Programación‎ > ‎

Tutorial rápido de HTML / XHTML

publicado a la‎(s)‎ 27 feb. 2015 19:31 por Juan Jose Ramirez Lama   [ actualizado el 11 oct. 2017 14:26 ]

Este es un pequeño tutorial de HTML (y XHTML) en el que intentaré explicar lo más importante del lenguaje de forma concisa.


HTML son las siglas de HyperText Markup Language (lenguaje de marcado de hipertexto).


La última versión de HTML es HTML 4.01, de Diciembre de 1999, aunque ya existe un borrador de HTML 5, y algunos de los navegadores más populares están empezando a implementar poco a poco parte de este nuevo estándar.


Como su nombre indica, HTML es un lenguaje de marcas, no un lenguaje de programación, es decir, no existe el concepto de variables, condicionales o bucles. Su objetivo no es otro que la creación de documentos, utilizando etiquetas para especificar la estructura y la semántica del contenido (pero NO el aspecto; para esto utilizaremos CSS).


Las etiquetas son palabras o caracteres rodeados por corchetes angulares (el signo menor que, ‘<’, y mayor que, ‘>’). Un ejemplo de etiqueta sería <em> que se utiliza para marcar un texto como enfatizado. Por defecto los navegadores mostrarían este texto enfatizado en cursiva, a menos que indiquemos otra cosa utilizando CSS. El texto que queremos marcar irá entre la etiqueta de inicio <em> y la etiqueta de cierre </em>.

Hola <em>mundo</em>



Por cada etiqueta de inicio, existe una etiqueta de cierre correspondiente, con una barra oblicua después del signo menor que.


Una etiqueta puede contener, además de texto simple, otras etiquetas. En ese caso hay que tener cuidado con cerrar primero la etiqueta que se abrió en último lugar. En este ejemplo se utiliza la etiqueta <p>, que marca el texto etiquetado como un párrafo, y por lo tanto añade un margen antes y después del texto, combinada con la etiqueta <em>

<p>Hola <em>mundo</em></p>


Además las etiquetas pueden tener atributos con los que especificar distintos aspectos relevantes para su funcionamiento. Para crear un enlace, por ejemplo, se utiliza la etiqueta <a>, de anchor, ancla, y su atributohref. El valor del atributo va después del signo igual (=).

Visita <a href="http://mundogeek.net/">Mundo geek</a>



Para que un documento HTML o XHTML sea válido las etiquetas deben seguir un orden y unas reglas determinadas, dependiendo del tipo del documento. Dentro del estándar HTML 4.01 tenemos 3 tipos de documentos: strict, transitional y frameset.


Frameset incluye todas las etiquetas y atributos del estándar, incluidas las que han sido marcadas como obsoletas, y la etiqueta frameset, para crear frames. Para indicar que un documento debe renderizarse teniendo en cuenta las reglas definidas por este tipo, la primera línea del documento deberá ser:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">


Transitional incluye todas las etiquetas del anterior, a excepción de la etiqueta frameset. Para utilizar este tipo la primera línea de nuestro archivo HTML deberá consistir en lo siguiente:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">


Strict es, como su nombre indica, el tipo más estricto: no acepta la etiqueta frameset, ni las etiquetas y atributos que han sido marcados como obsoletos. Si vamos a utilizar este tipo la primera línea del documento será:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


El tipo de documento puede tener enormes consecuencias en cómo se visualizará la página. Si no indicamos ningún tipo, o indicamos un tipo muy antiguo, el navegador entraría en lo que se conoce como quirks mode (literalmente, modo rarezas), un modo de renderizado pensado para mantener la compatibilidad con las prácticas y los navegadores antiguos. Los doctypes HTML 4.01 transitional y frameset lanzarían el modo de renderizado “casi-estándar” en la mayoría de los navegadores.


Después de la línea de doctype tendremos una etiqueta <html>, utilizada para marcar el principio y fin del documento. Esta contendrá a su vez una etiqueta <head> (la cabeza del documento) y una etiqueta <body> (el cuerpo del documento). Dentro de la etiqueta <head> podemos hacer cosas como indicar la codificación de caracteres mediante la etiqueta <meta> (“simulando” una cabecera HTTP), o el título de la página con la etiqueta<title>, título que se mostrará en la parte superior de la ventana del navegador. Dentro de la etiqueta <body>tendremos el contenido que se mostrará en el navegador.


De esta forma el documento HTML válido más sencillo que podemos encontrar tendría el siguiente aspecto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Ejemplo</title>
</head>

<body><p>Hola Mundo</p></body>
</html>


Documento HTML válido


Para probar este documento HTML basta abrir un editor de texto cualquiera, pegar el código, guardar el archivo con extensión .htm o .html, y abrir el fichero resultante en un navegador web. Para que otras personas pudieran ver este archivo, tendríamos que enviárselo de alguna manera, o subirlo a un servidor. Mundo geek, por ejemplo, está alojado en los servidores de RedCoruna (aunque Mundo geek está escrito en un lenguaje de programación llamado PHP, que permite generar HTML de forma dinámica).

Etiquetas HTML de uso común


Podemos añadir comentarios, entre <!-- y -->

<body>
<!-- Saludamos -->
<p>Hola Mundo</p>
</body>


Para asociar una o más hojas de estilo CSS (para definir el aspecto de la página) y un favicon (el icono que se muestra en la barra de direcciones y la pestaña) al documento actual, aunque también tiene otros usos, se utiliza la etiqueta <link>, etiqueta que sólo puede insertarse dentro de <head>. Con el atributo rel se indica el tipo de relación que tiene el documento enlazado con el actual, y con href la dirección en la que se encuentra el documento (que puede ser relativa o absoluta).

<head>
<link rel="stylesheet" href="estilo.css">
<link rel="shortcut icon" href="favicon.ico">
</head>


También se puede utilizar el atributo media para usar un recurso u otro dependiendo del medio que utilice el usuario. En el siguiente código, por ejemplo, utilizamos una hoja de estilo u otra dependiendo de si el usuario está viendo la página en una pantalla de ordenador (screen) o de si está viendo la vista previa antes de la impresión (print)

<head>
<link rel="stylesheet" media="screen" href="estilo.css">
<link rel="stylesheet" media="print" href="imprimir.css">
</head>


También podemos ofrecer al usuario varias hojas de estilo alternativas, teniendo una etiqueta <link> conrel="stylesheet" y otras con rel="alternate stylesheet". En las etiquetas de cada una de las hojas de estilo alternativas añadiremos un atributo title con el nombre tal y como queramos que aparezca en el navegador del usuario.

<head>
<link rel="stylesheet" media="screen" href="estilo.css">
<link rel="alternate stylesheet" media="screen" href="estilo-oscuro.css" title="Oscuro">
</head>


Para incluir un script (en JavaScript u otro lenguaje) se utiliza, cómo no, la etiqueta <script>.

<body><script type="text/javascript">alert('Hola mundo');</script></body>



Lo normal es escribir el código del script en un archivo externo e importarlo mediante el atributo src

<head>
<script type="text/javascript" src="script.js">
</head>


Si queremos mostrar un cierto contenido sólo a los usuarios que tengan la ejecución de scripts desactivada, por ejemplo para informarles de la maravillosa funcionalidad que se están perdiendo, se puede utilizar la etiqueta<noscript>

<body>
<script type="text/javascript">alert(new Date());</script>
<noscript>Activa JavaScript para ver la fecha</noscript>
</body>


Para definir metadatos acerca del documento se utiliza la etiqueta <meta>, etiqueta que ya utilizamos anteriormente para especificar la codificación de caracteres que utilizaba nuestro archivo. Algunos usos que se le pueden dar a esta etiqueta son especificar una descripción del contenido de la página:

<meta name="description" content="Tutorial de HTML y XHTML">


o palabras clave que describan la página:

<meta name="keywords" content="tutorial, html, xhtml">


Para dividir la página en secciones se utiliza la etiqueta <div>. Esta etiqueta es la base de la maquetación utilizando CSS, aunque el siguiente ejemplo, al no utilizar ningún estilo, no resultará demasiado impresionante:

<div id="menu">
<a href="http://mundogeek.net/">Inicio</a>
<a href="http://mundogeek.net/contacto/">Contacto</a>
</div>

<div id="contenido">Hola mundo</div>



Las cabeceras o títulos se indican con las etiquetas <h1><h2><h3><h4><h5> y <h6>. Estas etiquetas son especialmente útiles para el SEO (Search Engine Optimization, u optimización para buscadores)

<h1>Título</h1>
<h2>Subtítulo</h2>
<h3>Sub-subtítulo</h3>



Para insertar saltos de línea se utiliza <br> (como vemos existen etiquetas en HTML que no necesitan ser cerradas; no así en XHTML, del que hablaremos más tarde)

<p>Primera línea<br>
Segunda línea<br><br>
Cuarta línea</p>



Para marcar un bloque de texto como una cita se utiliza <blockquote>. Esto hará, por defecto, que el bloque de texto tenga un cierto margen izquierdo.

<p>Y entonces él dijo:</p>
<blockquote><p>Le haré una oferta que no podrá rechazar</p></blockquote>



Para marcar un texto como una cita inline se utiliza la etiqueta <q>. Por defecto esto hará, simplemente, que el texto aparezca entrecomillado.

<p>Y entonces él dijo... <q>¡Vamos a aprender HTML!</q></p>



Para marcar un texto como código fuente se utiliza <code>. Por defecto esto mostrará el texto con una fuente monoespacio.

<p><code>foreach($mensajes as $mensaje)
echo $mensaje;
</code></p>



<code> se suele utilizar en conjunción con <pre>, que hace que se tengan en cuenta los espacios en blanco, tabuladores y retornos de carro del texto que encierra

<pre><code>foreach($mensajes as $mensaje)
echo $mensaje;
</code></pre>



Para dar el significado de una abreviatura:

<abbr title="HyperText Markup Language">HTML</abbr>



Para indicar que una palabra o frase es especialmente importante (más que el texto marcado con <em>) se utiliza la etiqueta <strong>. Esto se traducirá, por defecto, en que el texto etiquetado se verá en negrita.

<strong>HTML</strong> es un lenguaje de marcado



Para mostrar una imagen se utiliza <img>. Es conveniente dar una descripción alternativa a la imagen para los invidentes y los navegadores que no muestren imágenes utilizando el atributo alt

<img src="imagenes/berners-lee.jpg" alt="Tim Berners-Lee, uno de los creadores de HTML">


Para crear listas se utiliza la etiqueta <ul> (de unordered list, o lista no ordenada). Cada elemento irá dentro de una etiqueta <li>

<ul>
<li>Lunes</li>
<li>Martes</li>
<li>Miércoles</li>
</ul>



También se pueden crear listas ordenadas con <ol>, lo que hará que cada entrada de la lista venga precedida por un número (o una letra, un número romano… si así se especifica en la hoja de estilo) en lugar de una viñeta, como ocurriría con <ul>:

<ol>
<li>Lunes</li>
<li>Martes</li>
<li>Miércoles</li>
</ol>



Para crear tablas se utiliza la etiqueta <table>. Dentro de esta tendremos una etiqueta <tr> (de table row) por cada fila, y a su vez, dentro de <tr>, una o más etiquetas <td>, para celdas de datos, o <th>, para celdas de la cabecera.

<table>
<tr>
<th>Lenguaje</th>
<th>Año</th>
</tr>
<tr>
<td>HTML</td>
<td>1991</td>
</tr>
<tr>
<td>CSS</td>
<td>1996</td>
</tr>
<tr>
<td>XHTML</td>
<td>2000</td>
</tr>
</table>


Entidades de caracteres HTML


Para evitar problemas con la codificación de caracteres podemos utilizar las llamadas entidades de carácter en sustitución de los caracteres que no pertenezcan a ASCII, como vocales acentuadas o la ñ.




































































Entidad

Carácter

&amp;

&

&lt;

<

&gt;

>

&Aacute;

Á

&Eacute;

É

&Iacute;

Í

&Oacute;

Ó

&Uacute;

Ú

&aacute;

á

&eacute;

é

&iacute;

í

&oacute;

ó

&uacute;

ú

&ntilde;

ñ

&euro;


XHTML


XHTML son las siglas de eXtensible Hypertext Markup Language (lenguaje extensible de marcado de hipertexto). Se trata de una versión algo más estricta de HTML basada en XML. La última versión de este estándar es la 1.1, de Mayo de 2001.


Para que un documento XHTML sea válido:


  • Todas las etiquetas deben estar cerradas. Para elementos vacíos, como <br> se puede cerrar la etiqueta añadiendo una barra invertida antes del signo de mayor que (<br/>)

  • Todas las etiquetas y atributos deben ir en minúsculas

  • Los valores de los atributos deben ir entre comillas


El doctype para XHTML 1.1 será:

<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


Además la etiqueta <html> debe tener un atributo xmlns indicando el espacio de nombres. Un ejemplo de documento XHTML válido sería, entonces:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<title>Ejemplo</title>
</head>

<body><p>Hola Mundo</p></body>
</html>


Mundo Geek


vía Tutorial rápido de HTML / XHTML.

Comments