HTML – Estructura base
Muchos de vosotros queréis iniciaros en este mundo del código, de las páginas webs, y de internet. Muchos os gustaría ver matrix… pero seguramente muchos de vosotros no estéis preparados para leer todo ese código sin amargaros. De todos modos para aquellos que sigan con el gusanillo y quieran probar, voy a intentar ir recopilando una serie de posts dedicados a unos primeros pasos para hacer una web.
Muchos me preguntan muchas veces cómo logro entender todas esas letras cuando miran mi pantalla… bueno, yo siempre les digo que todo lo que ven por una pantalla digamos que es lo bonito que se muestra, que lo que yo veo es el código que genera lo que el usuario ve. Ya no vemos el color negro, sino que vemos #000000 y el blanco es #ffffff, incluso sabes que el gris es #CCCCCC… termina siendo algo que usas a diario. De todos modos, esto es como el que sabe todas las piezas de un coche, muchos nos limitamos a ver sólo un resultado, el coche, pero los mecánicos se dedican a ver todo lo necesario para que ese coche arranque con sólo girar la llave de contacto o pulsar un botón.
Por ello, igual que una web, al fin y al cabo, sólo es código, el código al fin y al cabo sólo son ceros y unos. Pues bien, entonces ¿qué necesitas en principio para crear una página web? Pues es sencillo, tan sólo necesitas un editor de texto plano: el bloc de notas (windows), no sé si el textedit (mac os x) servirá, o el html-kit (windows) o el coda (mac os x) o el gedit (linux), el que más coraje te dé y si puede colorear código, mejor que mejor.
Empezemos por lo básico
Extensión de archivo. Para que un programa entienda qué lenguaje de programación estamos usando en un archivo, tiene aparte de una estructura en el código determinada, una extensión de archivo. En el caso de una página web, lo más común será el .HTML o .HTM aunque hay otras muchas a las que no voy a entrar ahora. Y la página por defecto que un directorio carga, es llamada index.html.
Lo primero que vamos a hacer es crear un archivo de texto plano (.txt) vacío y abrirlo con el editor elegido.. Si quieres lo puedes llamar “index” pero realmente en este punto da igual.
Código básico de una página HTML
Después, igual que una carta un cuento o lo que sea que vayamos a escribir se puede definir una estructura, en código es igual, tiene una estructura báse que le indica al programa, aparte de la extensión, que está ante un archivo HTML. Por lo tanto voy a pasar a explicar paso a paso para tener una estructura base.
1. Etiquetas En HTML el lenguaje es mediante etiquetas que encierran contenido que es afectado por esas etiquetas. Las que vamos a ver aquí son HTML, HEAD, TITLE y BODY; y tal vez la más importante de todas es aquella que nos sirve para hacer comentarios, y poder tener anotaciones en nuestro código. Por supuesto esta notación es para hacer comentarios no sale en el resultado final.
Código con notas:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<html>
<!– Esto es un comentario y como vez está abierto por una etiqueta y cerrado por otra, lo que esté en medio no aparecerá en la web, por tanto, esto, no aparecerá en el resultado. –>
<!– Esto es la primera etiqueta que verás en casi toda web y es de apertura del documento HTML, la de cierre es igual pero con un / despues del primer < –>
<!– Después tenemos dos partes en el documento que es la cabeza, tampoco es visible y el cuerpo, que aquí sí será visible todo aquello que escribamos como ves, tiene una etiqueta de apertura y otra de cierre para ambos casos –>
<head>
<!– Contenido del head –>
<!– Normalmente después en la cabecera hay distintas llamadas y códigos específicos que explicaré más adelante, pero aquí por ahora sólo voy a explicar un par–>
<title>Título del documento de prueba</title> <!– Con esto harás que en la ventana del explorador salga un título que es aquel que escribas entre las etiquetas “title” –>
</head>
<body>
<!– Contenido del cuerpo –>
Un texto que vas a ver aparecer
<body>
</html><!– Etiqueta de cierre de HTML –> |
Código sin notas.
|
1 2 3 4 5 6 7 8 9 |
<html>
<head>
<title>Título</title>
</head>
<body>
<!– Un comentario –>
<p>Un <strong>texto</strong> que <em>vas</em> a <u>ver</u> aparecer</p>
</body>
</html> |
Como podéis ver, el código no es más que etiquetas que serán interpretadas y que afectarán a aquello que esté entre esas etiquetas. Casi todas las etiquetas están en inglés y casi son explicativas por si mismas. Por ejemplo, en la parte sin notas os he puesto las etiquetas strong, em y u, la primera sirve para poner en negrita (strong=fuerte), la seguna en cursiva (de empathize) y la tercera es de subrayado (underline). Y todas el texto está entre las etiquetas p, que simbolizan un párrafo (del inglés paragraphs).
Por tanto espero que con esto, tengáis una visión muy básica de este mundillo del código.
