Por la Web hay varias listas de tutoriales y páginas web donde encontrar la lista de etiquetas de HTML, pero para poder empezar desde cero hay que saber algunas cosillas importantes de las que no se habla mucho.
Primer consejo
Ésto no me va a ocupar mucho espacio en el blog, pero por desgracia es, quizás, lo más importante que debes saber y no olvidar JAMÁS: ¡paciencia!
Como decía mi madre la paciencia es la madre de la ciencia, y si quieres llevar tus experimentos a buen puerto (como un sitio web) debes ser paciente, aprender poco a poco, sin prisa pero sin pausa.
No aprenderás HTML en dos días, de hecho te pasarás la vida aprendiendo y actualizando tu estilo personal de desarrollo web, porque vivimos en una era de cambios: la era digital.
Y sobretodo escribe, practica, prueba, experimenta y cuando creas que ya lo has probado todo date cuenta por ti mismo que solo conoces una pequeña parte de todas las posibilidades del mundo, vuelve a practicar, a reescribir tus ideas de una manera más eficiente y moderna, investiga y compara con otros desarrolladores.
Repito: paciencia y práctica son las claves para todo, incluido aprender un lenguaje nuevo como podría ser Chino mandarín o HTML.
Introducción al HTML
Qué puedo llegar a hacer con HTML
Hay algo sobre el lenguaje HTML que se da por obvio y en mi opinión debería quedar más claro. Este lenguaje fue diseñado (en sus principios) con la ambición de poder compartir información entre científicos que trabajaban en zonas distantes. Así que puedes imaginarte que los archivos que transmitían se parecían más a prospectos de medicamentos que no libros coloreables.
Y a lo que me refiero con todo es que HTML es un lenguaje para describir la estructura y el contenido, que puede ser
texto, imágenes, vídeos y otros componentes, de las páginas web. Con
HTML no se define la presentación visual de las páginas web.
Debe quedarte muy claro que con HTML no hay ni colorines para las letras, ni una colección de tipografías ni nada de eso. Para tratar los aspectos estéticos y visuales se utilizan otros lenguajes como el CSS (del que hablaremos más adelante).
Tipos de HTML
El lenguaje HTML ya lleva unos años "on the road" y en octubre de 2014 publicaron su quinta edición, el HTML5. Realmente es muy joven y, aunque puedes usarlo libremente, algunos navegadores no están preparados para todas sus nuevas etiquetas. Pero en muy poco tiempo HTML5 será el lenguaje más apto para todos los navegadores, así que poco a poco hay que ir aprobechando sus nuevas posibilidades.
Los lenguajes más usados hasta ahora son HTML 4 y XHTML, de los cuales podrás encontrar todo tipo de información útil por toda la Web.
Recuerda que en este blog dejo escritas las pautas para empezar desde cero y también una bibliografía con la información útil con la que yo mismo trabajo y te recomiendo. Si quieres añadir más información estaré encantado de recibir tus comentarios.
Qué se necesita para escribir HTML
Los sistemas operativos (Windows, Mac OS, Linux, etc...) vienen con las herramientas necesarias para desarrollar una página web en HTML.
En el caso de Windows puedes utilizar el carismático y humilde "Bloc de notas". Una vez hayas terminado tu trabajo, para transformarlo en una web tan solo debes guardar el archivo con la extensión .html o .htm (ambas son lo mismo), y recuerda que en algunos sistemas operativos deberás seleccionar en el desplegable "Tipo:" la opción "todos los archivos".
Si el archivo queda guardado con el mobre de "ejemplo_web.html.txt" o bien "ejemplo_web.htm.txt" la extensión que detectará siempre será la del último punto, por lo tanto el sistema operativo no lo leerá como un archivo web sino como un texto del bloc de notas.
Si lo prefieres puedes utilizar editores de texto muy útiles para utilizar el lenguaje HTML como por ejemplo el Notepad++, completamente gratuito y muy cómodo de usar. Hay muchos más, así que te recomiendo que des una hojeada por Google e investigues el que más se adecúe a tus necesidades.
Una vez guardado el archivo correctamente verás que su icono es el de tu navegador preferente. Los que tengan Mozilla como preferente abriran el archivo con Mozilla, los que tengan Chrome con Chrome, etc... Es posible que te aparezca con el icono de Internet Explorer sin que sea tu preferente y que al abrir el archivo se ejecute automaticamente tu navegador (Mozilla, Chrome...): es normal.
Cómo ver el código fuente de otras páginas web
Es recomendable para aprender, como en toda disciplina, consultar cómo lo han hecho los demás (sobretodo a los que le funciona).
En todos los navegadores hay una opción para leer el código fuente (es decir, el texto de HTML y demás lenguajes con el que el webmaster ha escrito la página web) si clicas con el botón derecho del ratón sobre la misma página web.
Normalmente recibe el nombre de "Ver código fuente" o bien "Ver código fuente de la página".
Pruébalo tu mismo en esta web y en tres webs diferentes más. Venga, hazlo ahora que esta entrada no se va a desvanecer. Verás que no entiendes ni papa, no te asustes. Es normal que no entiendas nada (o solo muy poco), porque es lo mismo que encontrarte en mitad de un país que hablan una lengua que no conoces de nada. Pero verás que poco a poco empezarás a entender qué són esos elementos e irás descubriendo que no es tan difícil como parecía al principio.
Anatomía de una etiqueta de HTML
El lenguaje HTML es un lenguaje de marcado de etiquetas, y por lo tanto lo que deberás aprender es qué etiquetas hay, cómo se utilizan y cuándo se utilizan.
Pero antes de ir al turrón vamos a aclarar la estructura de una etiqueta.
Todas las etiquetas de HTML se escriben entre los símbolos "<" y ">", de manera que siempre que escribas algo entre esos dos símbolos el navegador lo interpretará como una palabra del lenguaje HTML y no como una palabra del texto a mostrar.
<ejemplo>
Cada etiqueta tiene su versión de cerrado, que se escribe entre los símbolos "</" y ">".
</ejemplo>
Ésto sirve para indicar que la función que vaya a hacer la etiqueta a terminado. Por ejemplo, nos vamos a inventar una etiqueta (no la uses cuando escribas páginas web porque no existe) que coloree el texto de color rojo (si no sabes porque no existe esta etiqueta vuelve a leer esta entrada desde el principio). La llamaremos rojo. Su etiqueta inicial sería <rojo> y su etiqueta final sería </rojo>.
Un ejemplo de su uso sería el siguiente:
Este texto <rojo> no funcionaría </rojo> en una web.
Y el resultado (hipotéticamente) sería el siguiente:
Este texto no funcionaría en una web.
Ahora vamos a ver cómo se definen las partes de una etiqueta:
- Elemento: es el componente básico de una página web, por lo tanto una web se construye con un conjunto de elementos. Vendría a ser toda la etiqueta, desde su apertura, hasta el cierre, con el texto al que afecta (contenido) incluido.
- Etiqueta de inicio (o de apertura): es la primera parte del elemento e indica a partir de dónde debe empieza la orden de la etiqueta en concreto.
- Etiqueta final (o de cierre): es la última parte del elemento e indica donde deja de afectar la orden de la etiqueta en concreto. Algunas etiquetas no necesitan etiqueta final.
- Contenido: es la información a la que está afectando la etiqueta. Algunas etiquetas no necesitan contenido.
- Atributo: define alguna característica extra que el nombre de la etiqueta en sí no define. Solo se escribe en las etiquetas de inicio y dependiendo de la etiqueta es obligatorio, opcional o innecesario. Los atributas que no usan valor se les llama booleanos.
- Valor: concreta las características del atributo de la etiqueta. Los atributos booleanos no usan valor.
No hay comentarios:
Publicar un comentario
RECUERDA: ésto no es ningún tutorial, pero estaré encantado de compartir información y ayudar en medida de lo posible a cualquiera :)