Me decidi por comenzar a redactar un completo tutorial de diseño y programacion web. Muchas veces me paso de agarrar muchos pdfs bastante largos y la verdad, tanta informacion te quema la cabeza, asi que la idea es ser muy concreto, y tirar links con informacion adicional para determinados puntos.
Mi idea es ir subiendo por partes todo el contenido, 100% redactado por mi, no tengo nada diagramado, simplemente lo que vaya surgiendo lo ire agregando.
Este tutorial va a empezar totalmente desde CERO, asi que si no cazas un palo, no importa, si me seguis, vas a captarlo, porque voy a ser muy basico al principio, y voy a tratar de utilizar vocabulario y palabras comunes, o sea, no pretendas que voy a escribir y hablar como las cosas que encontras en un libro jeje, lo aclaro ahora, despues no se me quejen juaaaaaaa
El contenido va a ser:
- HTML
- CSS
- JavaScript
- PHP
- MySQL
- XML
- Web Services
- WAP
- Hostings
- Y no se, otras cosas tambien.
Quizas algunas veces me cuelgue de subir la info, laburo y facu me mata, pero bue, cuando tenga tiempo al pedo, vengo y sigo agregando cosas je.
Recuerden, voy a ser MUY CONCRETO y BASICO en muchos puntos, voy a tratar de inducirlos, uds sigan investigando!
En fin, comencemos.
Introduccion HTML
Bue, la onda es asi, HTML significa HyperText Markup Language, que significaria algo asi como lenguaje de etiquetas de hipertexto.
Este lenguaje, en si, no es programacion, sino que es una forma de darle estructura a las paginas, o sea, para ubicar como querramos todas las cosas que se visualizan en un sitio.
Este codigo que se redacta, es interpretado por el navegador, y se muestra al usuario.
Para comenzar a realizar algunas pruebas, vamos a necesitar algunas HERRAMIENTAS:
+ Un navegador Web para visualizar nuestras paginas: Si estas viendo este post desde taringa, ya tenes un navegador . Yo recomiendo Firefox, pero bue, Internet Explorer alcanza
+ Un editor de codigo: Todo el codigo de HTML se puede escribir en el notepad de Windows. Si tenes eso, ya alcanza por ahora. Igual, te recomiendo que te vayas bajando el Notepad++ http://notepad-plus.sourceforge.net/es/site.htm, ya que te colorea el codigo que vas escribiendo, y te ayuda muchisimo.
Comenzemos a escribir codigo HTML!
Aclaracion sobre el codigo: Si nunca vieron algun tipo de codigo de programacion, no se asusten si no cachan una. Simplemente hay que seguir determinadas reglas y sintaxis para que todo funcione ok. Empiecen de a poquito a comprenderlas, y dia a dia incorporen en sus cabezas un par mas!
Bue ahora si, toda pagina web HTML tiene una estructura basica comun, que es la siguiente.
- Código: Seleccionar todo
<html>
<head>
</head>
<body>
</body>
</html>
Cada uno de los elementos que visualizan se llaman etiquetas ( o tags ). Los tags en HTML generalmente se redactan asi: <nombre_del_tag> </nombre_del_tag>. Esto se refiere a que el 1er tag denota el comienzo de esa estructura o evento, y el segundo tag ( que tiene la barra invertida al principio, denota el final.
Explicacion de los tags que utilizamos en el ejemplo:
* HTML: Significa que ahi empieza nuestra pagina, tiene que estar arriba de todo
* HEAD: Es el encabezado de la pagina, se utiliza para agregar algunas cosas extras, por ahora no importa
* BODY: Alli se redacta el cuerpo de la pagina
Con respecto a los tags y su ubicacion y orden, tenemos que pensarlos como conjuntos:
* HEAD esta adentro de HTML, o sea, se abre HTML, adentro de HTML se abre y cierra HEAD, y luego al final de todo HTML se cierra. si recien dijimos que HTML indica el inicio de la pagina, nunca pero nunca HEAD podria estar antes de HTML, ya que nunca se inicio la pagina, ni tampoco podria estar despues del cierre de HTML, ya que eso indica el fin de la pagina.
Ahora lo que vamos a hacer, es copiar y pegar en el notepad el codigo de la estructura basica de una pagina. Aqui se los pongo.
- Código: Seleccionar todo
<html>
<head>
</head>
<body>
</body>
</html>
Ahora guardamos el archivo como taringa.html ( Fijense que cuando van a "guardar como", el tipo de guardado no sea archivo de texto, sino que sea todo tipo de archivos, sino aca windows te cambia la extension y te lo guarda como taringa.html.txt )
Una vez que lo guardamos, vamos, y lo abrimos con el navegador. La pagina va a estar en blanco!!!! y si, si lo unico que pusimos es una estructura basica, sin texto ni nada!!!!
Agregando texto a nuestra pagina:
Hoy habiamos dicho que la etiqueta BODY es el cuerpo de la pagina, alli debemos redactar todo el contenido, antes del cierre, y despues del inicio.
- Código: Seleccionar todo
<html>
<head>
</head>
<body>
El que lee es puto
</body>
</html>
Copiamos y pegamos este codigo en Notepad, lo guardamos con extension .HTML ( por ejemplo, taringa.html ), lo abrimos con el navegador, y ya vamos el texto!!!
Cualquier cosa que redacten dentro de body, luego van a visualizarlo en la pagina!! o sea, cambien "el que lee es puto" por "el diego es el mas grande de la argentina" y listo! guarden los cambios y abran la pagina.
Bueno, si se dan cuenta, todo el texto es re plano, sin colores ni nada!!! En la proxima entrega les voy a contar como ordenar texto, parrafos, negrita, etc etc!!!
Espero que les haya gustado esta primera edicion apresurada
Fuente
