Y por fin ha llegado el momento de ensuciarse un poco las manos y crear tu primera página web. Ya te aviso que no te vas a hacer rico vendiéndola al gigante Google, pero te va a permitir empezar a tocar un poco de código HTML.
Lo primero que vas a hacer es crear un directorio nuevo (da igual donde lo pongas, mientras sepas encontrarlo luego) llamado mi_primera_web.
Ahora abre el editor de código Sublime Text y crea un archivo llamado index.html y en él escribe:
Hola Mundo
Guárdalo, dirígete a la carpeta mi_primera_web y haz doble clic al archivo index.html. Se te abrirá el navegador y podrás ver sobre un fondo blanco escrita la frase Hola Mundo. ¡¡¡Genial has creado tu primera web!!! Bueno, genial genial tampoco, que no es para tirar cohetes.
Guarda tu código, my friend:
Llegados a este punto, quiero hablarte sobre una «patología» que tenemos los desarrolladores. Se trata del «síndrome del guardar como si no hubiera un mañana», es decir, como a lo largo de los años hemos sufrido cortes de luz sin previo aviso, un sinfín de mensajes del tipo «su programa no responde», cafés sobre el teclado, gatos y perros dispuestos a teclear sobre nuestro código y un largo etcétera, nos hemos vuelto un poco paranóicos y sin darnos cuenta guardamos mucho y muy a menudo. Dejando a un lado la bromas, verás que en los vídeos guardo muchas veces el código. De hecho cada vez que hago un cambio en el HTML o CSS guardo y actualizo el navegador para ver si ha funcionado bien lo que acabo de hacer.
La etiqueta doctype:
La página web que hemos creado antes no contenía nada de código HTML. De hecho la primera línea de todo código HTML debería indicar que se ese documento ha sido programado en dicho lenguaje. Por lo tanto, vuelve al archivo index.html, borra todo su contenido y escribe:
<!DOCTYPE html>
Esta línea indica que el archivo contiene código HTML5. Y la incluiremos al principio de todos nuestros archivos HTML.
Estructura básica del HTML y su jerarquía
Añade a tu código la etiqueta html:
<!DOCTYPE html> <html> </html>
A partir de ahora el resto de nuestro código irá incluido dentro de esta etiqueta. Vamos a añadir la etiqueta head y la etiqueta body:
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>
Fíjate que he tabulado ambas etiquetas hacia la derecha. ¿Por qué? Pues porque el HTML es un lenguaje jerárquico, es decir, la etiqueta html es el padre de las etiquetas head y body y al mismo tiempo, head y body son etiquetas hermanas e hijas de la etiqueta html.
Al principio puede resultar un poco lioso, pero tabular bien un código es esencial para después poderlo entender. Por ejemplo, en uno de mis cursos online tuve un alumno que nunca tabulaba su código y cuando tenía algún error, era un auténtico calvario poder localizarlo y corregirlo, ya que un código sin tabular es mucho más complejo de revisar.
La etiqueta title:
Ahora añade dentro de la etiqueta head la etiqueta title:
Fíjate en una cosa: esta etiqueta no la he introducido en dos líneas distintas, ¿por qué? porque dentro de ella sólo hay texto y no tendrá etiquetas hijo. Normalmente, cuando dentro de una etiqueta vamos a introducir más etiquetas, ésta la escribimos en dos líneas y cuando no, en una sóla línea.
La etiqueta title sirve para indicar el título de la página. En este caso la he llamado Mi primera web. Si ahora guardamos el código y actualizamos el navegador, podrás ver que en la pestaña del navegador ha aparecido:
Los encabezados (headings):
En HTML existen 6 etiquetas para introducir un encabezado (títulos o subtítulos) y son: h1, h2, h3, h4, h5 y h6. Actualiza tu código de la siguiente manera:
Como ves, dentro de cada etiqueta hemos introducido un título. El funcionamiento de los headings es muy sencillo:
- Como menor sea el número, más importante será el título. Por tanto
h1es más relevante queh2,h2es más relevante queh3y así consecutivamente. - Además,
h1sólo puede ser utilizado una sola vez dentro de una archivo HTML. Esto quiere decir que si tenemos varias páginas, cada una de ellas sólo podrá tener unh1. - El resto de headings los podrás usar tantas veces como lo desees para introducir títulos, pero siempre respetando su relevancia.
Si ahora guardas tu código y actualizas tu navegador, te mostrará lo siguiente:
Pero que cój… ¿por qué en lugar de acentos se ven símbolos raros? Esto es porque no le hemos indicado al código qué formato de codificación tendrá nuestro texto. Para solucionarlo añadimos dentro del head la etiqueta meta con el formato UTF8:
Ahora cuando actualices, verás:
Donde es muy sencillo entender visualmente por qué h1 tiene más relevancia que h2, h2 más que h3… Y es que el navegador ya adapta su tamaño automáticamente para remarcar esta relevancia.
Los párrafos:
Al igual que cuando lees un libro o una revista su texto está compuesto por distintos párrafos, en las páginas web sucede lo mismo. Cada vez que quieras añadir un párrafo debes utilizar la etiqueta p.
El resultado será:
¿Qué pasaría si no usamos la etiqueta p y simplemente escribimos una línea debajo de la otra?
Pues que el navegador no entiende que eso sean párrafos y por tanto lo pone todo junto. Así que cuando tengas que usar párrafos no te olvides de la etiqueta p.
Énfasis en el texto:
Cuando queramos dar cierto énfasis en algunas palabras de nuestro texto utilizaremos las etiquetas em y strong. La diferencia entre ellas es que la segunda es para dar un énfasis más fuerte. Fíjate en el siguiente código:
Dentro de la etiqueta h2 hemos introducido la etiqueta em para indicar énfasis en la palabra «interesante». Hemos hecho lo mismo en el párrafo, pero esta vez con la etiqueta strong para indicar que la palabra «párarfo» tiene un énfasis fuerte. Veamos el resultado:
Fíjate que el navegador otorga a la etiqueta em un estilo cursiva y a strong un estilo negrita. Quiero que entiendas que dar énfasis no significa poner cursivas o negritas, sino dar relevancia a nivel semántico. Recuerda que el HTML sirve para la estructura y el significado, nunca para el diseño. De hecho cuando aprendamos CSS seremos capaces de asignar el estilo que queramos a estas etiquetas y no tendrán por qué ser cursiva o negrita.
Y eso es todo por este artículo, recuerda que puedes seguir aprendiendo con los cursos de diseño y desarrollo WordPress del Club SiliCodeValley, a partir de 29€/mes sin permanencia, con soporte a tus dudas incluido y acceso a la comunidad privada de miembros.
¡Un abrazo y seguimos!
Gracias! Muy completo 🙂
Muchas gracias Manuel!
excelente
¡Muchas gracias Virginia! Puedes encontrar una versión actualizada y completa de este curso en https://silicodevalley.com/cursos/. ¡Un saludo!
Excelente
¡Muchas gracias Braulio!