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 atributo href
. 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>
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>
con rel="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 |
---|---|
& | & |
< | < |
> | > |
Á | Á |
É | É |
Í | Í |
Ó | Ó |
Ú | Ú |
á | á |
é | é |
í | í |
ó | ó |
ú | ú |
ñ | ñ |
€ | € |
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>
Ya sé que es algo más sencillo que otros temas que suelo tratar. Pero seguro que a alguno le será de utilidad.
Excelente, el empujon necesario para aprender algo nuevo(ni bien termine de leer paython para todos(: ). Espero que sigas poniendo tutoriales, son uno mejor que otro.
Muchas gracias Rodrigo 🙂
Considero muchísimo mejor usar utf8 como encoding
, así se puede escribir sin problemas.
He intentado poner el code pero se lo ha comido. Seria
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
Ya. Si escribes HTML en los comentarios, WordPress lo mostrará como HTML. A menos que se trate de etiquetas no admitidas, en cuyo caso las obviará simplemente. Puedes usar < y > en lugar de < y > si quieres que se vea el código. Te lo edito.
Si te fijas yo utilizo UTF-8 en el blog. Cuestión de gustos. Sobre todo teniendo en cuenta que sólo escribo en castellano, o a lo sumo en inglés…
Por cierto, yo soy el primero que hace cosas que no se deberían hacer, como en esta misma entrada, usar el atributo border de la etiqueta table.
Pero ya se sabe…
¿Para que entornos puede ser útil XHTML?
¿No es simplemente un HTML strcit, pero más strict?
Por ejemplo, para usar un parser XML para leerlo.
Joe, sin duda ¡es una gran razón!. Parsear HTML puede ser infernal según lo poco estándar que sea el que escribe el código…
Muchas gracias, siempre viene bien un pequeño empujon para comenzar. Con respecto a las entidades HTML me encontré un programa que puede ser útil para no introducirlas a mano:
http://texttohtml.codeplex.com/
Pingback: Tutorial rápido de HTML
Pingback: Tutorial rápido de HTML y XHTML « SomosGeeks
Excelente yo estoy aprendiendo algo de html para mi blog y esto es muy útil,me gustaría que siguieras con este tipo de tutoriales,pero seria bueno que mostraras como queda cuando modificas algo,digamos si le pones una etiqueta como se vería aplicada ya en la pagina web.
No es mala idea.
Listo 🙂
Muy bueno¡¡¡ Gracias
Me refresco la memoria.
Lo de combinar las etiquetas de preformateado y codigo no me sirvio en mi theme, supongo que sera por eso mismo, lo quise usar para que respete los espacios.
Eso es porque en la hoja de estilo le tienes puesto
white-space:nowrap;
Gracias Zootropo, no había leido tu respuesta.
Verificando…
Muy buen tutorial!
sigue asi!
pero… entonces es mejor usar xhtml que usar html?
Depende de a quién se lo preguntes. En realidad no importa mucho, y nunca se pondrán de acuerdo.
Yo siempre cierro todas las etiquetas, escribo en minúsculas las etiquetas y los atributos, y encierro los valores de los atributos entre comillas, así que…
Justo yo estoy en estos días preparando un tutorial de HTML (que verá la luz próximamente en mi blog) y, ante la duda, he terminado decantándome por explicar tomando como base el HTML 5. Claro, algunas cosas se hacen más complicadas: hay unas cuentas etiquetas populares como el subrayado y el tachado que ahora son «deprecated» (¿lo escribí bien?) y toca tirar de CSS aunque sea metiéndolo dentro del código de la página con style.
Pero, dejando aparte todas esas posibilidades de las que todo el mundo habla, un pequeño detalle me llamó la atención: lo del doctype. Ahora, simplemente es , sin tanto rollo.
Y hablando de rollo, ya he metido bastante. Felicitaciones por tutorial. Muy interesante y completo para dar los primeros pasos. A ver si lo enlazo por ahí.
Gracias Iván.
Habrá que echar un vistazo a tu tutorial cuando lo publiques 🙂
Para tachado se puede usar la etiquta
del
, y para subrayar (si es como sustitución de lo tachado)ins
. Claro, es tontería usar unaspan
con clases.Por cierto, si tachas con
del
en vez de cons
, IE te pone el tachado un poco más bajo para hacerlo más difícil de leer (con mala intención).Felicidades por el tutorial, me ha venido al pelo, porque estaba haciendo una pequeña pagina web y no me acordaba de los codigos de los carcteres no estandar
Gran tutorial zootropo!, una pregunta que espero que no caiga en el offtopic pero estoy buscando mucho eso y seguro me comprenderás: ¿qué plugin usas para mostrar el código?, yo usaba el wp-syntax pero le faltan opciones (como la de mostrar el texto plano pulsando un botón) y solo admite html estricto y no el transicional. Te agradecería mucho si me ayudas en eso.
Usa el «dp.SyntaxHighlighter»: http://www.dreamprojections.com/syntaxhighlighter/?ref=about
si le das al interrogante en la esquina superior derecha te lo dice 🙂
Efectivamente 🙂
A todo esto, nadie ha comentado que el mime de XHTML es
application/xhtml+xml
, y notext/html
. Porque si lo sirves como HTML, pierdes el valor de los avisos estrictos, los namespaces, y todas las ventajas del XML.Muchas gracias Zoo… a ver si ahora me decido a incursionar un poco en esto.
Excelente tutorial de HTML. Eres un crack!
Pingback: Tutorial rápido de CSS
Excelente!. Por fin pude entender de que va esto de xhtml. Muchas gracias.
excelente lo he comprendido en un 99.99% muchas gracias
Pingback: Tutorial rápido de HTML / XHTML « El Blog de JUARAMIR
buen rapido tutorial, lo weno esque con dreamweaver ya se puede hacer una pagian de internet sin saber mucho html ahaha
muy buen tutorial, les felicito..!!
QUisiera preguntarles, cómo se pone el texto en forma de Aorcoiris, quisiera saber la etiqueta para hacer eso!!
Saludos!
Hola
Estoy usando Aptana Studio para hacer un sitio web
y estoy usando xhtml
pero en Aptana cuando valida el codigo
me dice que el input esta en mal locacion
buscando con google econtre que despues del
debe haber un o un
¿porqué?
Esta Bien hecho te falta solo los Codigos HTML // PHP
/– Nota te Pongo; Un 6 –\
Mushass gcss:D
muchas gracias muy didactico ..
puntual preciso….y los ejemplos
y todo gracias por tomarte el tiempo
de hacer un buen tutorial..Gracias!!
Pingback: >ARR # 2: Tutorial rápido de HTML / XHTML
Pingback: Doom en tu navegador
Este mini-manual es buenisimo!! imagina cuando hagas un tutorial completo!!! felicitaciones!!!
Amazing! Its truly awesome paragraph, I have got much clear idea about from this article.
Este tuto es genial!, y tus ejemplos ayudan a comprender mejor los códigos. Esta explicado de una manera excelente! gracias
me encanta este tutorial, i loved, poco a poco puedo hacer mis luchitas en html
With the 32 markets that this PS4 does launch within by the end of
2013, House said Sony could provide a solid supply for consumers during the entire holiday season.
It also supports high definition audio including Dolby True – HD
and DTS-HD Master Audio. This is how NCAA football
roster providers are available in handy. Intrapreneurship may be successfully used by corporations, partnerships,
and non-profit firms inside US, Europe, Asia, and Africa.
Since the recording and audio content streams online, it won’t actually download into
one big file which can be copied and moved around. A Play
– Station network card, lets you buy products and items from online retailers of Play –
Station that you could freely use in case you have a PSN Code Generator card.
However, most users just like the Invisible Speakers
that are also unique to others within the line. You have to be prepared to put a bit of effort so that you can locate a retailer who can give you the best PS4 deals as well as early delivery.
Step One: Acquiring Themes You have two ways to obtain a
XMB theme for the Playstation 3: either create one or find one.
Inform your doctor if you suffer from conditions such
as gall bladder disorders or chronic malabsorption syndrome.
Chock-full Games Available created Download: On create day of
your portable you will dsicover 25 games obtainable
about launch evening and greater one in development.
Excellent Article! Thanks for sharing!! I am extremely inspired along with your writing abilities and also with the format in your blog.
Excellent Article! Thanks for sharing!! I am extremely inspired along with your writing abilities and also with the format in your blog.
Great blog here! Also your site loads up very fast! What web host are you using?
Can I get your affiliate link to your host? I wish my website loaded up as quickly as yours
lol
Have you ever thought about including a little bit more than just your articles?
I mean, what you say is important and all. But
think about if you added some great photos or video clips to give your posts more, «pop»!
Your content is excellent but with images and video clips, this website could certainly be one of the greatest in its niche.
Good blog!
It’s the best time to make some plans for the future and it’s time to be happy.
I have read this post and if I could I want to suggest you
some interesting things or tips. Maybe you can write next articles referring to this article.
I wish to read even more things about it!
Hi to every , because I am truly keen of reading this
web site’s post to be updated daily. It consists of good information.
Websites that offers such products can give you pictures and details about chandelier, so it would be easier for you to choose the right one for your home.. Choosing small chandelier can produce insufficient light for the room while the huge ones can make the room over exposed with the light.. Chandelier is best illuminations solutions which can provide light based avenues which can sustain the idiosyncrasies of providing illumination in a better predomination..
If you are going for best contents like myself, only visit this web
page every day for the reason that it provides
quality contents, thanks
Buen tutorial, sencillo y bien explicado. Se presentan las etiquetas básicas de html y de XHTML, sería muy interesante si continuara con CSS y Javascript o quiza con las nuevas etiquetas de html5.
Me alegra que te haya gustado Dani. Aquí tienes un tutorial rápido de CSS que escribí en su día, y otro de jQuery
Pingback: Chuck Norris es un color (en HTML)