HTML y CSS [Parte 2]

Como hemos visto, un archivo HTML comienza con la definición del tipo de documento y luego las etiquetas <html> </html> que indican su inicio y fin; además el documento tiene un encabezado y un cuerpo. El encabezado <head> </head> es donde se ingresa la información sobre el archivo, como, por ejemplo, el título y la codificación. El cuerpo <body> </body> es donde se ingresa el contenido, como textos, imágenes y enlaces. El contenido del cuerpo es lo que se verá en la página real.

Etiquetas, atributos y valores

Las etiquetas son aquellos textos que escribimos entre los símbolos <> y representan cajas, dentro de las cuales se coloca la información a mostrar y a las que se les puede dar un estilo. Cada etiqueta tiene atributos, los atributos son las características que tiene cada etiqueta y que las diferencia del resto.

<img src="img/dayan.jpg" width="300" height="200" />

La etiqueta img tiene en éste ejemplo 3 atributos:

  1. src: representa la ruta al archivo de imagen a mostrar, cuyo valor es img/dayan.jpg
  2. width: representa el ancho de la imagen, cuyo valor es 300 pixeles
  3. height: representa el alto de la imagen, cuyo valor es 200

Hay casos donde se tiene una etiqueta de inicio y una de cierre como: <p> </p> y hay casos donde solo se necesita una sola etiqueta y al final de la misma se indica el cierre con /> como es el caso de: <img />.

Etiquetas HTML5

HTML5 es la quinta y última versión del lenguaje HTML, este nuevo estándar establece una serie de nuevos elementos y atributos que reflejan el uso típico de los sitios web modernos. Entre las novedades de ésta versión encontramos la creación de nuevas etiquetas que le dan semántica o significado a nuestro documento:

  • <header> </header>: representa la cabecera del documento o sección, donde se realza lo más importante.
  • <footer> </footer>: representa el pie de página del documento o sección, donde se coloca información menos relevante.
  • <section> </section>: representa una sección del documento, es una caja que agrupa otros elementos.
  • <article> </article>: representa un artículo o un contenido del documento.
  • <sidebar> </sidebar>: representa una barra lateral del documento.
  • <nav> </nav>: representa una barra de navegación o menú del documento.

Estas etiquetas permiten describir cuál es el significado del contenido. Por ejemplo su importancia y su finalidad. No tienen impacto en la visualización, pero permiten que los buscadores puedan indexar e interpretar esta meta información para no buscar simplemente apariciones de palabras en el texto de la página.

Otras etiquetas generales y de mucho uso son:

  • <div> </div>: sirve como caja para agrupar contenidos pero no agrega valor semántico.
  • <ol> </ol> - <ul> </ul>: representan listas de elementos, ordenados o no ordenados, respectivamente. Cada elemento de la lista se agrega con <li> </li>.
  • <img />: sirve para agregar imágenes.
  • <a> </a>: sirve para agregar enlaces o hipervínculos.
  • <p> </p>: representa párrafos.
  • <h1> </h1> - <h6> </h6>: representa a los títulos, HTML nos permite tener más de un tamaño de títulos, hay seis (6) tamaños: <h1> es el más grande, de mayor jerarquía y <h6> es el más pequeño, de menor jerarquía.

Navegación o Hipervínculos

Cuando queremos ir de una página a otra creamos una etiqueta <a> </a>, o un hipervínculo, que no es más que un link que al ser pulsado nos lleva a otro documento. El destino a donde nos llevará el enlace se define con el atributo href. Ejemplo:

<a href=”http://google.com”>Ir a Google</a>

Los enlaces pueden ser a otras páginas de internet, archivos o ubicaciones dentro de la misma página, direcciones de correo, o cualquier otra URL. También se pueden usar como ancla, llevándote a un punto dentro del mismo documento actual; por ejemplo: en el documento se crea un título <h2 id=”miTitulo2”>Titulo en un segundo punto</h2> y en el enlace se coloca <a href=”#miTitulo2”>Ir al Título 2</a>.

También existen los enlaces vacíos, que no llevan a ningún lado: <a href=”#”>Clic no hace nada</a>.

Rutas absolutas o relativas

Cuando hacemos referencia a un archivo ya sea en un hipervínculo o en una etiqueta de imagen, se puede hacer de manera absoluta o relativa.

Una ruta absoluta es aquella que se escribe de manera completa, por lo general porque el archivo se encuentra en internet fuera del sitio web que estamos construyendo. Ejemplos:

<a href=”http://facebook.com”>Ir a Facebook</a>
<img src=”http://www.delfinbeta.com.ve/img/Dayan.jpg” width=”200” />

Una ruta relativa es aquella que hace referencia a un archivo interno que se encuentra dentro del sitio web que estamos construyendo. Ejemplos:

<a href=”delfinbeta.html”>¿Quién es DelfinBeta?</a>
<img src=”archivos_articulos/oficina.jpg” width=”200” />

Ejercicio 2

<!DOCTYPE html>
<html lang="es">
 <head>
 <meta charset="utf-8">
 <title>Ejercicio 2 - HTML y CSS</title>
 </head>
 <body>
 <header>
 <h1>Ejercicio 2</h1>
 </header>
 <nav>
 <ul>
 <li><a href="index.html">Ejercicio 1</a></li>
 <li><a href="ejercicio2.html">Ejercicio 2</a></li>
 <li><a href="http://google.com" target="_blank">Google</a></li>
 </ul>
 </nav>
 <sidebar>Barra Lateral</sidebar>
 <section>
 <h2>Noticias</h2>
 <article>
 <h3>Noticia 1</h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore sunt pariatur cum vero, consequuntur earum, eaque, ipsa, esse perferendis ipsum eligendi corrupti. Cumque eum nemo et error, maiores animi ut! Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
 </article>
 <article>
 <h3>Noticia 2</h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore sunt pariatur cum vero, consequuntur earum, eaque, ipsa, esse perferendis ipsum eligendi corrupti. Cumque eum nemo et error, maiores animi ut! Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
 </article>
 </section>
 <div>
 <h4>Lista No Ordenada</h4>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore sunt pariatur cum vero, consequuntur earum, eaque, ipsa, esse perferendis ipsum eligendi corrupti. Cumque eum nemo et error, maiores animi ut! Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
 <ul>
 <li>item 1</li>
 <li>item 2</li>
 <li>item 3</li>
 </ul>
 </div>
 <div>
 <h4>Lista Ordenada</h4>
 <ol>
 <li>elemento</li>
 <li>elemento</li>
 <li>elemento</li>
 <li>elemento</li>
 </ol>
 <img src="https://www.w3.org/html/logo/downloads/HTML5_Badge_512.png" width="150" alt="HTML5" />
 </div>
 <footer>Pie de Página</footer>
 </body>
</html>

Guarda el archivo con el nombre ejercicio2.html y luego ábrelo en un navegador web.

Y hasta aquí por ahora en un próximo artículo te contaré cómo darle estilos con CSS a nuestro HTML.

Show your support

Clapping shows how much you appreciated Dayan Betancourt’s story.