Anteriormente habíamos comentado que HTML es un tipo de programación que se basa en tags o etiquetas. Ahora vamos a explciar un poco qué son esas etiquetas, su funcionamiento y descubriremos todas las que vamos a necesitar para crear una página web completa. Tranquilo que no son demasiadas.
Primeramente lo que denominamos tag se refiere a una etiqueta de inicio y otra de fin que delimitan una parte del código, por ejemplo un párrafo se delimita entre etiquetas <p> y </p>, una capa se delimita como <div> y </div>. Siempre usaremos </nombreetiqueta> para cerrar una que previamente hayamos abierto, excepto algunas que se tienen que autocerrar.
El autocierre de las etiquetas es por ejemplo al poner una imagen, que solo tiene etiqueta de apertura como <img> y dentro de ella tiene todo lo que necesita, pero para que sea W3C válida tiene que presentarse con autocierre, es decir <img />. Iremos viendo otras etiquetas que corren la misma suerte durante este punto.
La programación en html es bastante extensa, pero en la mayoría de los casos habrá muchos tags que no van a ser necesarios o han quedado obsoletos a la hora de estructurar páginas. Por eso nos vamos a centrar en los principales para crear un diseño web basado en capas (no vamos a utilizar tablas por motivos que ya explicaremos).
Vamos a ver en principio los 3 tags principales que engloban las distintas partes de una página web en HTML. A partir de aquí voy a intentar ceñirme a los nombres que reciben en inglés para no confundirnos a la hora de programar, ya que será más fácil si mantenemos una nomenclaruta global que si empezamos a traducir conceptos que luego nos pueden llevar a confusión.
Tags principales que estructuran una página web
DOCTYPE
Este no es un tag propiamente dicho, sino que indica el tipo de estructura que tiene una página web. Como nosotros vamos a utilizar HTML en esta primera línea de nuestras páginas web utilizaremos <!DOCTYPE html> para indicar que es este tipo de programación.
<html></html>
Este tag lo engloba absolutamente todo en una web, es la primera línea que aparece en el código fuente y también la última. Esto es por que así le indica al navegador el tipo de página que es, ya que también existen páginas en xml y otros formatos, además de que las imágenes envían sus propios cabeceros cuando se carga una en el navegador. Nos aseguraremos siempre de tener la etiqueta de apertura y cierre de estas para que no tengamos errores en la visualización de la página.
<head></head>
Una página web está estructurada básicamente en dos partes que vamos a ver por separado en otros artículos, el head representado por las etiquetas <head></head>, que es la parte inicial del código y siempre se expone toda la información para que el navegador cargue archivos externos, tenga información adicional sobre la página, etiquetas para indicar a los buscadores de qué trata nuestra página y donde podemos incrustar javascript y css sobre la misma página sin archivos externos. Esta parte de una página no se muestra al usuario dentro del contenido, por lo que todo lo que pongamos aquí permanecerá oculto a la vista, pero sí estará en el código fuente.
<body></body>
Por otro lado tenemos el body, que es la parte visible para el usuario directamente en el navegador. Esta será la parte sobre la que pondremos todos nuestros textos, capas y contenido de la web para que el usuario final la pueda ver. Por ejemplo wikipedia tiene los menús a la izquierda , un título arriba y los artículos a la derecha, todo esto dentro del body de la página. Tendremos en cuenta siempre que estos tags delimitan el contenido visible de nuestra web.
<!doctype html> <html> <head> </head> <body> </body> </html>
En la siguiente página nos vamos a centrar en los tags del head y lo siguiente serán los usados en el body.
Tags para construir el head de una página HTML
Aquí ya empieza a haber unos cuantos, pero no tantos como los que veremos más adelante en el body. Los que describimos a continuación al ser del head van entre las etiquetas <head> y </head>. Al final de la página puedes ver un ejemplo con el uso de todos los tags y como deben quedar.
<title></title>
Este tag le va a dar título a nuestra página, va a ser la referencia principal tanto para los buscadores como para los navegadores ya que será el texto que veremos en la pestaña o ventana del navegador. Es muy importante que no nos olvidemos nunca de el, ya que es la base informativa sobre nuestra página, y que también nos ayudará con el posicionamiento.
<link />
Este es un tag de autocierre, y sirve para enlazar todos los archivos externos que conformarán nuestra web, como por ejemplo hojas de estilo css. También se utilizan para dar información o enlazarla desde la página indicando cosas como la url al favicon de nuestra web (iconito que sale en las pestañas), páginas relacionadas, etc. Nosotros de momento lo usaremos para cargar hojas de estilos y el favicon.
<meta />
Este tag es de vital importancia a la hora de optimizar nuestra página para su posicionamiento. Si bien es prescindible, si queremos dar información extra a los buscadores le daremos este tag dos veces con dos atributos diferentes, keywords y description, en las cuales pondremos las palabras clave que describan la página y una descripción sobre la misma. Como extra tendremos siempre un tag meta con el atributo text/html que nos permitirá indicar el tipo de codificación de nuestra página. ej: UTF8.
<style></style>
Este tag nos permite incrustar estilos css sobre nuestra página para no tener que cargar un archivo externo. Por el momento vamos a conocerlo y saber que está ahí, pero nos centraremos en utilizar hojas de estilo externas ya que desde el punto de vista de optimización web es más idóneo ya que reduce la cantidad de código y por tanto el tamaño base de nuestra página web.
<script></script>
Este otro tag es un poco más versátil, ya que nos permite o colocar directamente código javascript entre la apertura y el cierre, y también nos permite adjuntar un archivo .js externo a nuestra página con exactamente la misma funcionalidad que si incrustásemos el código. Por los mismos motivos que antes nos vamos a centrar en utilizar los archivos js cargados de forma externa, aunque para pruebas directas podemos utilizar este tag.
Por el momento estos son todos los tags principales que podemos necesitar en una página web normal. Ejemplo de uso:
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="UTF-8" />
<title>Curso de programación Web</title>
<meta name="Keywords" content="HTML,CSS,JavaScript,programacion">
<meta name="Description" content="Curso para aprender html en vichaunter.org">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="functions.js"></script>
</head>
<body>
Tendremos en cuenta que segun avanze el curso veremos tags nuevos que posteriormente adjuntaremos como artículo extra a este para extender información. Por el momento nos centramos en todo lo necesario para crear una web completa que podamos posicionar perfectamente.
Tags que forman la parte visible de una página web (body)
Esta parte es un poco más larga, pero simplemente por que hay mucha más variedad de tags que vamos a utilizar para poder crear una página web. No te preocupes ya que verás que los nombre son fáciles y se puede crear una página web con no demasiados tags.
<div></div>
Posiblemente el más importante que te vas a encontrar. Con este tag podemos posicionar prácticamente cualquier cosa con la estructura que queramos. Lo primero a tener en mente es que una capa div es como un cuadrado donde pondremos cualquier contenido (incluso otras capas div) y con la que podremos crear cualquier forma, por ejemplo una página con un bloque de una anchura determinada que lo englobe todo en el centro, otro para el header y el menú superior, otro para el contenido que tendrá dos dentro de el uno a un lado con la barra lateral o sidebar y otro con el contenido principal, y luego otro abajo para el footer con varios bloques a modo de columnas.
Con hojas de estilo css bien utilizadas se puede crear cualquier modelo de página web, y con capas div se ha conseguido sustituir a las tablas que ya no son recomendadas en la programación. Más adelante veremos como usar las capas div y entenderlas para crear nuestros diseños.
<div>
<div>Un contenido</div>
<div>Otro contenido</div>
</div>
<h1></h1>, <h2></h2>,<h3></h3>,<h4></h4>,<h5></h5>,<h6></h6>
Muy importantes también son los títulos del contenido, nos ayuda este tag a estructurar de forma visual el contenido y a que los buscadores entiendan que unas partes del texto forman parte de otras. Tenemos el ejemplo muy claro si abrimos el Office y probamos a poner un título 1, título 2, etc. Veremos que cuanto más grande es el número, más pequeño se vuelve el título y sirve para esquematizar.
<h1>Título principal de toda la página</h1>
<h2>Subsección primera</h2>
<h3>Dentro de la primera subsección</h2>
<h3>También dentro de la primera subsección</h2>
<h2>Subsección segunda</h2>
<h3>Dentro de la segunda subsección</h2>
<h2>Subsección tercera</h2>
<h3>Dentro de la tercerasubsección</h2>
<p></p>
Este tag se utiliza para delimitar un párrafo de texto, en muchas ocasiones nos olvidamos de el, pero deberíamos utilizarlo siempre ya que nos permite controlar mejor la estructura del contenido en nuestro sitio.
<p>Lorem ipsum dolor akis met, Lorem ipsum dolor akis met, Lorem ipsum dolor akis met, Lorem ipsum dolor akis met, Lorem ipsum dolor akis met, Lorem ipsum dolor akis met</p> <p>Lorem ipsum dolor akis met, Lorem ipsum dolor akis met, Lorem ipsum dolor akis met, Lorem ipsum dolor akis met, Lorem ipsum dolor akis met, Lorem ipsum dolor akis met, Lorem ipsum dolor akis met</p> <p>Lorem ipsum dolor akis met, Lorem ipsum dolor akis met, Lorem ipsum dolor akis met, Lorem ipsum dolor akis met, Lorem ipsum dolor akis met, Lorem ipsum dolor akis met, Lorem ipsum</p>
<a></a>
Conocido comunmente como enlace de texto o link, es la etiqueta que se encarga de crear links entre páginas, por ejemplo en esta web los textos que se colorean en azul dentro del contenido de la página son enlaces y con ellos podemos poner acceso a otras partes de la web. También se utilizan por ejemplo para crear los menús.
<a href="https://www.vichaunter.org" title="Blog programación">Blog de programación</a> <p>Lorem ipsum dolor akis met, Lorem ipsum dolor akis met, Lorem ipsum dolor akis met, Lorem ipsum dolor akis met,<a href="https://www.vichaunter.org" title="Blog programación">Blog de programación</a>, Lorem ipsum dolor akis met, Lorem ipsum dolor akis met, Lorem ipsum dolor akis met</p>
<ul></ul>, <li></li> y <ol></ol>
Estas se utilizan para crear listas numeradas (o con puntos, imágenes etc). El tag ul se encarga de englobar toda la lista, mientras que li y ol se utilizan para encuadrar cada línea de ese contenido. De esta forma podemos crear filas ilimitadas para nuestras listas, así como esquematizar contenidos.
<ul>
<li>primero</li>
<li>segundo</li>
<li>tercero</li>
</ul>
<ul>
<ol>primero</ol>
<ol>segundo</ol>
<ol>tercero</ol>
</ul>
<img />
Tag utilizado exclusivamente para colocar imágenes dentro del contenido de nuestra web. Podemos meterlo dentro de cualquier otro conjunto de etiquetas como divs, p, li, etc para posicionarlas en los lugares que queramos. Imagínate por ejemplo los artículos de Wikipedia y piensa en que tienen las imágenes intercaladas con el texto. Todos estos efectos se consiguen con capas div y css.
<div>
<img src="//www.vichaunter.org/concursos/images/play-facebook.png" alt="imagen aquí" />
</div>
<form></form>
Con estos tags se crean formularios y dentro de ellos colocaremos todos los otros tags que conforman los campos del formulario. Se pueden combinar con párrafos, listas, enlaces, etc. Dentro del formulario encontramos varios otros tags que debemos conocer y veremos más adelante:
- <input />: para crear campos de introducción de texto
- <select></select>: para crear menús desplegables, cajas de selección, etc.
- <option></option>: estos campos van dentro del campo select, y son los valores que nos mostrará.
- <textarea></textarea>: muestra un área de texto para escribir contenido más largo que unas palabras.
Dentro de los valores input, para crear áreas de texto, líneas de texto, botones, utilizaremos el atributo type=»», y en el indicaremos qué tipo de area es.
<form>
<input type="text" name="campo1" /><br/>
<input type="hidden" name="campo2" /><br/>
<textarea name="campo3" /></textarea><br/>
<select name="campo4">
<option value="1">opcion 1</option>
<option value="2">opcion 2</option>
<option value="3">opcion 3</option>
</select><br/>
<input type="submit" value="buscar" /><br/>
</form>
<br />
Este tag nos ayuda a incrustar un salto de línea entre dos tags que hayamos creado en la página, para que uno se muestre en la línea siguiente al otro. También sirve para crear un salto de línea en mitar de un texto por ejemplo. No debería ser usado ya que hay otras formas de conseguir esto, pero en ocasiones suele ser bastante útil. (usado en el ejemplo de formularios).
Formatos de texto con tags html
Hay varios tags que nos ayudar a crear diferentes efectos en el texto como cuando trabajamos con office, la lista que vamos a ver es la siguiente:
- <b></b>: convierte en negrita un texto
- <i></i>: texto en itálica
<p>Lorem ipsum <b>dolor</b> akis met, Lorem ipsum dolor <i>akis met</i>, Lorem ipsum dolor akis met, <b>Lorem</b> ipsum dolor akis met, Lorem ipsum dolor akis met, <i>Lorem ipsum dolor akis met</i></p>
Además de todos estos tags, podemos incluir algunos que hemos visto en el header como <script> o <style>, aunque lo ideal es no utilizarlos dentro del cuerpo de la página, los navegadores lo interpretan de forma correcta.
TAREA: A modo deberes puedes coger cada porción de código que te he ofrecido, y crear un archivo .html en tu ordenador con el bloc de notas. Una vez creado solo tienes que copiar la estructura principal de la web expuesta arriba y probar los diferentes códigos dentro de las etiquetas body. Para cargarlo haz doble click sobre el o abrelo con cualquier navegador web. Puedes exponer tus dudas e impresiones en los comentarios o este hilo del foro.
Por el momento estas son las que vamos a utilizar. Puede que me esté dejando alguna y por ello esta lista de tags queda abierta a futuras modificaciones, pero lo veremos segun avancemos en nuestra programación. Por el momento con solamente estos tags, se puede crear un diseño para una página web como el que nos puede ofrecer una plantilla profesional, eso sí, siempre combinándolo con CSS y podemos añadir también Javascript.