¿Qué es HTML?
HTML es el lenguaje estándar para la creación de la parte visual de una web. Sus siglas significan: HyperText Markup Language (‘lenguaje de marcas de hipertexto’).
Hay que aprender unos conceptos básicos para dominar el HTML. Después, Google va a ser tu aliado. Como es casi imposible aprenderse todo de memoria, cuando necesito algo, busco en internet. Por ejemplo: “html insertar salto de línea” y en el primer resultado, ya obtengo la respuesta.
Al aprender a programar, lo primero que me dijeron es que es más importante saber buscar en internet que aprenderse todo de memoria (habrá quien sí pueda retenerlo todo pero, en mi caso, guardo ese espacio mental para otras cosas y busco en Google todo lo que voy necesitando).
Etiqueta o Tag
La etiqueta o tag es el elemento que queremos usar. Se escribe entre <>.
Si quiero añadir un párrafo, tengo que saber (o buscarlo) que su etiqueta es p, así que escribo:
<p> </p>
Hay que usar la p entre <> y volver a ponerla con </> cuando se acaba. Este último “cierra” el elemento. En medio debo escribir lo que quiero que aparezca. Si quiero poner una frase que sea “Hola, soy Ruth”, escribo:
<p>Hola, soy Ruth</p>
¡Y listo! La web ya sabe que eso es un párrafo y te lo muestra en tu web, tal cual.
¡¡Importante!!, cualquier etiqueta deberá tener apertura y cierre. Así que lo que yo hago es primero añadir las dos partes, así nunca me olvido. Ya verás que luego será el típico fallo que hace que tu código esté roto y te volverás loco. Usa este tip. Primero <p></p> y luego ya haces las «virguerías» que quieras.
Podemos querer no solo un párrafo, sinó un título (h1, por heading) o un texto en negrita (b, de bold) o un enlace url (a, de anchor).
<h1>Mi web</h1>
<p>Hola, soy <b>Ruth</b> y puedes ver mi CV <a>aquí</a>, gracias.</p>
¿Qué veríamos?
Mi web
Hola, soy Ruth y puedes ver mi CV aquí, gracias.
Atributos
Por ahora, “aquí” se comportaría como un enlace o link pero, claro, no sabría a dónde dirigirnos. Para eso y otras características necesitamos ATRIBUTOS.
Los atributos son las propiedades de cada elemento. Sirve para decirle que queremos el texto en rojo o dónde va a dirigirse el link o enlace que hemos creado.
En el caso de color rojo es un atributo style y para el enlace es de tipo href. Para añadir un atributo siempre lo colocamos en el tag de apertura y seguido de un = “”.
<p style= “”> </p>
o
<a href= “”> </a>
<p style= “color:purple;”>Hola, soy <b style= “color: Salmon;”>Ruth</b> y puedes ver mi CV <a href=“www.ruthgascon.com/”>aquí</a>, gracias.</p>
¿Cómo crees que se verá?
Hola, soy Ruth y puedes ver mi CV aquí, gracias.
Hola, soy Ruth y puedes ver mi CV aquí, gracias.
Hola, soy Ruth y puedes ver mi CV aquí, gracias.
Lo veríamos así:
Hola, soy Ruth y puedes ver mi CV aquí, gracias.
Los atributos afectan a todo el elemento, aunque en medio haya un elemento con un atributo diferente. Y un enlace, por defecto, se ve azul y subrayado aunque en mi caso lo tengo en el color corporativo y sin subrayar, por defecto en toda la web. Podemos también añadirle atributos para que no sea así.
¿Habías acertado?
En estas dos páginas puedes aprender mucho más de HTML, son súper útiles:
Codecademy es una plataforma online y gratuita donde podrás hacer cursos online, no solo de HTML sinó de muchísimos lenguajes de programación. W3schools es la web de referencia para programadores, acabarás consultándola miles de veces.
Si tienes cualquier duda o problema con HTML, no dudes en contactarme. En este post podrás consultar cómo insertar HTML en tu WordPress.
