HTML + CSS y sus magias

Para comenzar el tema primero explicaremos que es HTML.

El HTML, es un lenguaje (o idioma) para hacer una página web, con ella puedes realizar estructuras sobre los cuales se colocaran los contenidos.

El CSS es la nomenclatura para decirle a una página web como verse, darle estilos o formato.

Es muy importante entender que todas las etiquetas en HTML se escriben encerradas entre signos menor (<) y mayor (>).

Las estructuras en HTML tienen un ordenamiento semántico, es decir, nos dicen para qué se usan, por ejemplo:

  1. Cabeceras
  2. Pies
  3. Listas
  4. Párrafos
  5. Tablas
  6. etc.

El ordenamiento semántico sirve para señalar el significado del contenido y no solo para señalar su apariencia.

Por ejemplo: Una etiqueta <p> no me dice nada sobre lo que contiene. En cambio una etiqueta <h1> me dice que contiene un título o lo más relevante de la página web. Esta información la usan los buscadores.

El ordenamiento semántico sirve también para dar accesibilidad a los discapacitados. Por ejemplo:

Un ciego, obviamente no puede ver una imagen pero si la puede "escuchar".

<img src="población_mundial.jpg" alt="Distribución de la población por continentes" />

También podemos decirles a los buscadores cuáles son los datos relevantes de nuestra página web. Por ejemplo:

<meta name="description" content="Este es el curso de HTML" />

<title>HTML y CSS </title>

La gran mayoría de las etiquetas tienen un bloque de inicio y un bloque de fin para indicar donde empieza lo que contiene y donde termina.

Por ejemplo:

<p>Texto dentro de un párrafo </p>

<h1>Título de la página web</h1>

Pero no todas tienen un bloque de fin similar, hay etiquetas que se cierran a si mismas.

Por ejemplo:

<img src="portada.jpg" />

<input type="button" value="Presionar" />

Incluso hay otras que no tienen bloque de fin.

Por ejemplo:

<link rel="stylesheet" href="estilos.css">

Existen etiquetas que pueden usarse con bloque de fin o sin este.

Por ejemplo:

<br />

<br>

La mayoría de las etiquetas tienen atributos . Los atributos sirven para individualizar etiquetas, para indicar el contenido, para indicar cómo se visualizará, etc.

Las etiquetas pueden no tener atributos o tener uno o tener más de uno.

Por ejemplo:

<img src="portada.jpg">

img -> Es la etiqueta
src -> Es el atributo  
“portada.jpg” -> Es el valor del atributo