Código HTML

Versión para impresión
HTML

Introducción

  • El lenguaje HTML es un conjunto de códigos que entienden los navegadores web.
  • Se compone de una serie de etiquetas (en inglés tag) y atributos HTML, más el contenido de la web (texto e imágenes principalmente).
  • El lenguaje HTML no distingue entre mayúsculas y minúsculas.

Versiones de HTML:

  • HTML4 y anteriores
  • XHTML, versión basada en los estándares de XML, un lenguaje más estricto.
  • HTML5, promovido por Apple, Mozilla y Opera, que constituyen WHATWG, un grupo disidente de la W3C, el consorcio que se encargaba de regular las especificaciones de HTML y XHTML.

Más información.

Etiquetas y atributos

Un documento HTML se compone de una etiqueta de apertura y otra de cierre:

<etiqueta>
</etiqueta>

Cada etiqueta puede contener varios atributos separados por un espacio. El valor del atributo va entre comillas, precedido por el signo igual:

<etiqueta atributo1="valor1" atributo2="valor2">
</etiqueta>

Ejemplo

<h1 align="center">
Esto será un texto grande de título
</h1>

Nota:

El atributo "align" ya no se utiliza pues la alineación se realiza con CSS.

Nota: editar html en el textedit de Mac

Ir a "Preferencias>Abrir y guardar" y marcar la opción "Ignorar comandos de texto enriquecido en los archivos HML"

Estructura básica de un documento HTML

Un documento de HTML empieza con la etiqueta <!DOCTYPE>, que especifica el tipo de documento de que se trata. Por ejemplo, para la versión de HTML5 se pone:

<!DOCTYPE html>

A continación viene la etiqueta <html> y el documento HTML termina con la etiqueta </html>

La primera parte del documento se llama cabecera (en inglés head), y en ella van las especificaciones de la página previas al contenido. Se especifica con el par de etiquetas <head> </head>

La segunda parte del documento se llama cuerpo (body en inglés), y en esta parte van los contenidos (texto, imágenes, vídeos). Se especifica con el par de etiquetas <body> </body>

Parámetros de body

Estructura básica

<!DOCTYPE html>
<html> <head> </head> <body> </body> </html>

Etiquetas del HEAD

<title>

Sirve para especificar el título de la página web:

<title>título de la página</title>

<meta>

Las utilizan los buscadores para leer la descripción, las palabras clave, el nombre del autor. Por ejemplo:

<meta name="keywords" content="palabra1,palabra2, palabra3" />
<meta name="description" content="aquí va la descripción de la página" />
<meta name="author" content="aquí va el nombre del autor de la página" />

También sirve para indicar la codificación de caracteres del documento:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link>

Para cargar recursos externos, como hojas de estilos, o el favicon.

<link href="estilos/veteporlasombra.css" rel="stylesheet" type="text/css" />

<style>

Para declarar una hoja de estilos en el documento.

<style>
  body{color: blue; background: red}
</style>

<script>

Para definir o vincular código en el documento, por ejemplo JavaScript.

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

Etiquetas del BODY

<h1>

Sirve para hacer encabezados (letras grandes para títulos). Hay hasta H6 (a mayor número encabezados más pequeños):

<h1>Esto será un texto grande de título</h1>

<p>

Nos indica un párrafo de texto:

<p>
   Aquí va el párrafo de texto
</p>

<br>

Para hacer un salto de línea sin cambiar de párrafo

<strong>

Para indicar que un texto es importante. Tiene aspecto de negrita.

<b>

Para poner un texto en negrita, sin que implique que sea importante.

<em>

Para enfatizar un texto; tiene aspecto de cursiva.

<i>

Para poner en cursiva un texto, por ejemplo para palabras en otro idioma.

<img>

Para meter una imagen:

<img src="ruta de la imagen" width="ancho" height="alto" alt="etiqueta explicativa de la imagen">

La ruta puede ser absoluta (en una carpeta ajena al sitio web, por ejemplo en otro servidor) o relativa (en el mismo sitio web que el archivo html). Por ejemplo:

<a>

Para hacer enlaces en imágenes o textos:

<a href="ruta de la página o archivo a abrir" target="_blank">
   Aquí ponemos el encabezado, párrafo o foto que servirá de enlace
</a>

El atributo target sirve para indicar la ventana del navegador en que se debe abrir el nuevo documento. Admite los valores:

  • _self: en la misma ventana, valor por defecto;
  • _blank: en una nueva ventana o pestaña;
  • _parent: en el marco padre;
  • _top: en el padre de todos los padres.

Con el atributo id podemos definir un ancla al que luego poder vincular desde otro enlace:

<a id="miancla"></a>

Para poder enlazar al ancla anterior haríamos:

<a href="#miancla">ir a mi ancla</a>

El valor del atributo id no debe tener espacios, ni caracteres raros (ñ, ü, tildes), ni empezar por un número.

Nota: en realidad, no haría falta añadir un ancla. Bastaría identificar con un id a cualquier etiqueta HTML para poder navegar hacia ella.

Nota: antes se utilizaba el atributo name, pero en HTML5 ha sido descartado.

<table>

Para hacer tablas. Cada fila se indica con <tr>, y cada celda dentro de la fila con <td>. Si la fila es de encabezado se especifica <th>. Por ejemplo:

<table>
 <tr> <th>Texto en la celda de encabezado</th> </tr>
<tr> <td>Texto en la celda</td> </tr>
<tr> <td>Texto en la celda</td> </tr>
</table>

Por ejemplo:

celda encabezado celda encabezado celda encabezado
celda normal celda normal celda normal
celda normal celda normal celda normal

Algunos atributos que admiten las celdas (td y th) son:

  • colspan: columnas que se juntan;
  • rowspan: filas que se juntan

Por ejemplo:

celda encabezado celda encabezado celda encabezado con height="150px"
celdas unidas con el parámetro colspan="2" filas unidas con el parámetro rowspan="2"
celda con el parámetro bgcolor celda centrada con align="center"

También están las etiquetas para agrupar las filas pertenecientes al encabezado, cuerpo y pie de la tabla:

  • <thead>
  • <tbody>
  • <tfoot>

<ul>

Para hacer listas sin ordenar:

<ul>
 <li>elemento1 de la lista</li>
 <li>elemento2 de la lista</li>
 <li>elemento3 de la lista</li>
</ul>

<ol>

Para hacer listas ordenadas (con un número delante).

<ol>
 <li>elemento1 de la lista</li>
<li>elemento2 de la lista</li>
<li>elemento3 de la lista</li>
</ol>

Tanto las listas desordenadas con las ordenadas se pueden anidar (listas dentro de listas). Es un caso muy típico con el que se realizan los menús desplegables. Por ejemplo:

  1. Inicio
  2. Quiénes somos
    • Nuestra empresa
    • Investigación y desarrollo
  3. Contacto

<dl>

Son las listas de definición. La sintaxis es:

<dl>
 <dd>nombre del término o ítem definido</dd>
 <dt>definición del término</dt>
</dl>

Por ejemplo:

Tomate:
Planta de la familia de las solanáceas. El fruto es una baya jugosa que se toma en ensalada.
Pimiento:
Planta con la que se hace el pisto manchego.

<blockquote>

Una cita textual. Se utiliza generalmente para meter contenidos tabulados.

Por ejemplo:

Pienso, luego exito.

<!-- -->

Es la forma de hacer comentarios dentro del código HTML. Con frecuencia es necesario hacer aclaraciones en el código. Un ejemplo:

<!-- esto es un comentario dentro del código HTML -->

Este comentario no aparecería en la web. Dreamweaver utiliza estos comentarios para definir sus plantillas.

<address>

Sirve para definir una información de contacto. Tiene un claro significado semántico.

<code>

Para definir código

<cite>

Para citar el título de un trabajo: libro, vídeo, película...

<pre>

Preformato. Permite poner un texto tal cual lo escribimos, con los mismos espacios y saltos de línea. Utiliza una tipografía monoespaciadas (todos los caracteres ocupan el mismo espacio).

Se suele utilizar por ejemplo para escribir código:

<script>
	function abrirVentanta(){
		window.open("http://www.veteporlasombra.com")
	}
</script>

<div>

Contenedor para establecer la estructura del contenido. El atributo id indica el nombre del identificador. Por ejemplo:

<div id="contenido">

estructura html4

Con HTML5 se introducen unas nuevas etiquetas que dan carácter semántico a la estructura del documento:

estructura html5

<span>

Se utiliza por ejemplo para aplicar un estilo distinto a un trozo de código.

Por ejemplo:

<p>Dentro de este párrafo, <span style="color:red">este texto es rojo</span></p>

<iframe>

Etiqueta para meter un marco con contenido referenciado.

<iframe src="ruta" width="ancho" height="altura">

Atributos globales

Son atributos que pueden ponerse a cualquier etiqueta. Los más importantes son:

class

Para indicar la clase que afecta a una etiqueta.

id

Para indicar el identificador de la etiqueta. Debe ser único.

style

Para declarar un estilo en línea en la etiqueta.

title

Especifica información extra sobre cualquier elemento.

lang

Especifica el idioma del contenido de la etiqueta

Podemos echar también un vistazo a los nuevos atributos globales de HTML5.

Más información:
http://www.w3schools.com/tags/ref_standardattributes.asp

Códigos HTML de terceros

En algunos sitios webs nos proporcional líneas de código (generalmente con la etiqueta iframe), para que insertemos sus aplicaciones en nuestras páginas. Por ejemplo, para insertar vídeos, mapas y canciones:

Información complementaria

Categorías: