Ejemplos de HTML
¡Hola Mundo!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mi primera página HTML</title>
</head>
<body>
<p>¡Hola Mundo!</p>
</body>
</html>
Define la versión del documento como HTML5.
Los caracteres se codifican usando UTF-8,
que es actualmente el sistema de codificación de caracteres más común.
La cabecera HTTP
ContentType también puede usarse para especificar la codificación de caracteres,
y tiene prioridad sobre esta etiqueta <meta>.
Si no se especifica ninguna codificación, los navegadores asumen ISO-8859-1 (Latin-1).
El título del documento, que normalmente se muestra en la pestaña del navegador.
El elemento
body define
el contenido real del documento que se muestra en la ventana del navegador.
Espacios en blanco
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Espacios en blanco y fines de línea</title>
</head>
<body>
<p>
Si hay múltiples espacios en blanco consecutivos se
tratan como si sólo hubiera uno.
Los caracteres de salto de línea o tabuladores
se tratan como si simplemente
fuesen espacios.
</p>
</body>
</html>Texto preformateado
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Texto preformateado</title>
</head>
<body>
<pre>
public class CircleAreaCalc {
private BigDecimal pi;
public CircleAreaCalc(int numDigits) {
PiCalc piCalc = new PiCalc(numDigits);
pi = piCalc.compute();
}
public BigDecimal area(BigDecimal radius) {
BigDecimal area = radius.pow(2);
area = area.multiply(pi);
return area;
}
}
</pre>
</body>
</html>
El elemento
pre se usa para representar texto preformateado,
como el código fuente de un programa.
Los espacios en blanco, los caracteres de fin de línea y los tabuladores
se muestran tal como están en el documento HTML.
Marcado semántico (1)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Marcado semántico de texto</title>
</head>
<body>
<p>
Esta aplicación web le permite <em>comprar</em>
o <em>vender</em> <strong>únicamente</strong>
objetos de segunda mano.
</p>
<p>
<small>El operador del servicio se reserva
el derecho a cancelarlo sin previo aviso.</small>
</p>
</body>
</html>
El navegador enfatiza el contenido del elemento
em,
normalmente en cursiva.
El navegador enfatiza fuertemente el contenido del elemento
strong,
normalmente en negrita.
El elemento
small se usa para representar comentarios laterales,
como avisos legales, que normalmente se muestran en un tamaño de fuente más pequeño.
Imágenes
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Imágenes</title>
</head>
<body>
<p>
<img src="logo-uc3m.jpg" alt="Logotipo de UC3M">
<img src="logo-uc3m.jpg" width="100"
alt="Logotipo de UC3M esacalado a un ancho de 100 píxeles">
<img src="logo-uc3m.jpg" width="100" height="100"
alt="Logotipo de UC3M escalado a 100x100 píxeles">
</p>
</body>
</html>
Una imagen mostrada con el tamaño original del archivo de imagen.
Una imagen mostrada con un ancho de 100 píxeles.
La altura se ajusta para mantener la proporción original de la imagen.
Una imagen redimensionada a 100x100 píxeles.
Hipervínculos (1)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Enlaces</title>
</head>
<body>
<p>
La <a href="http://www.uc3m.es/">Universidad
Carlos III de Madrid</a> fue fundada en 1989.
</p>
<p>
<a href="http://www.uc3m.es/">
<img src="logo-uc3m.jpg"></a>
</p>
<p>
Este <a href="http://www.uc3m.es/" target="_blank">
hipervínculo</a> se abre en otra ventana o pestaña.
</p>
</body>
</html>
Al hacer clic en este texto se activa el hipervínculo al sitio web de la UC3M.
Al hacer clic en esta imagen se activa el hipervínculo al sitio web de la UC3M.
El atributo
target="_blank" hace que el hipervínculo se abra en una nueva pestaña o ventana del navegador.
Hipervínculos (2)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Enlaces</title>
</head>
<body>
<p>
Este tema se trata en mayor profundidad
<a href="#p3">posteriormente en este documento</a>.
</p>
<p id="p3">
El tema tiene una complejidad...
</p>
</body>
</html>
Al hacer clic en este enlace, el usuario es llevado al párrafo con
id="p3" en el mismo documento.
El atributo
id asigna un identificador único a un elemento HTML.
Este identificador puede usarse para crear hipervínculos a este elemento.
Listas ordenadas
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Listas ordenadas</title>
</head>
<body>
<p>
Esto es una lista ordenada (el orden de los
elementos de la lista es relevante):
</p>
<ol>
<li>Primer punto.</li>
<li>Segundo punto.</li>
</ol>
<p>
Se pueden usar números, letras, etc.:
</p>
<ol type="a">
<li>Primer punto.</li>
<li>Segundo punto.</li>
</ol>
</body>
</html>
Una lista ordenada con elementos etiquetados usando letras minúsculas
("a", "b", "c", etc.).
Listas desordenadas
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Listas no ordenadas</title>
</head>
<body>
<p>
Esto es una lista no ordenada (el orden de los
elementos de la lista
<strong>no</strong> es relevante):
</p>
<ul>
<li>Primer punto.</li>
<li>Segundo punto.</li>
</ul>
</body>
</html>Tablas
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tablas</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Fecha</th>
<th>Lugar</th>
<th>Precio</th>
</tr>
</thead>
<tbody>
<tr>
<td>10-09-2014</td>
<td>Madrid</td>
<td>60</td>
</tr>
<tr>
<td>12-09-2014</td>
<td>Sevilla</td>
<td>50</td>
</tr>
<tr>
<td>13-09-2014</td>
<td>Málaga</td>
<td>50</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>TOTAL:</td>
<td></td>
<td>160</td>
</tr>
</tfoot>
</table>
</body>
</html>
Los encabezados de tabla se definen usando el elemento
th.
Una fila de tabla se define usando el elemento
tr.
Contiene varias celdas de tabla.
Las celdas de tabla normales se definen con el elemento
td.
Secciones
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Secciones</title>
</head>
<body>
<article>
<header>
<h2>Apples</h2>
<p>Tasty, delicious fruit!</p>
</header>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<section>
<h3>Red Delicious</h3>
<p>These bright red apples are the most common found in many
supermarkets.</p>
</section>
<section>
<h3>Granny Smith</h3>
<p>These juicy, green apples make a great filling for
apple pies.</p>
</section>
</article>
</body>
</html>
El elemento
article representa una composición autónoma
en un documento, como una entrada de blog, un artículo de noticias,
una publicación en un foro, etc.
El elemento
header representa contenido introductorio
al comienzo de una sección o artículo.
Los elementos
h1 a h6 representan los encabezados de sección.
h1 es el encabezado de nivel más alto, y h6 el de nivel más bajo.
El elemento
section representa un agrupamiento temático de contenido,
normalmente con un encabezado.
Las secciones pueden anidarse dentro de otras secciones.
Formularios
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Formularios</title>
</head>
<body>
<form action="http://example.com/search">
<label>
Texto: <input type="search" name="term">
</label>
<input type="submit" value="Buscar">
</form>
</body>
</html>
El atributo
action especifica la URL
a la que se enviarán los datos del formulario cuando se envíe.
El elemento
label representa una descripción textual para un control de formulario.
El atributo
name del elemento input
especifica el nombre del control de formulario.
Este nombre se usa como clave al enviar los datos que se introdujeron en este control.
El atributo
type del elemento input
especifica el tipo de control de formulario que se va a crear.
En este caso, es un campo de entrada de texto de una sola línea
para introducir términos de búsqueda.
Los elementos
input con type="submit"
crean un botón que envía los datos del formulario al servidor.
Su atributo value especifica el texto que se muestra en el botón.
Formularios: menús desplegables
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Formularios</title>
</head>
<body>
<form action="http://example.com/search">
<p>
<label for="unittype">Select unit type:</label>
<select id="unittype" name="unittype">
<option value="1"> Miner </option>
<option value="2"> Puffer </option>
<option value="3" selected> Snipey </option>
<option value="4"> Max </option>
<option value="5"> Firebot </option>
</select>
</p>
</form>
</body>
</html>
El atributo
for del elemento label
asocia la etiqueta con el control de formulario cuyo id se especifica en este atributo.
Es una alternativa a envolver el control de formulario dentro del elemento label.
El elemento
select crea una lista desplegable con varias opciones.
El atributo
value de un elemento option
especifica el valor que se enviará al servidor.
El contenido de un elemento
option
representa el texto que se muestra al usuario para esa opción
en la lista desplegable.
El atributo
selected de un elemento option
indica que esta opción está seleccionada por defecto
cuando el formulario se muestra inicialmente.
Formularios: áreas de texto
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Formularios</title>
</head>
<body>
<form action="http://example.com/search">
<p>
<textarea name="mensaje" rows="5" cols="80"
placeholder="Escribe tu mensaje aquí."></textarea>
</p>
<p>
<input type="submit" value="Enviar">
</p>
</form>
</body>
</html>
El elemento
textarea crea un campo de entrada de texto de varias líneas.
Los atributos
rows y cols especifican
las dimensiones visibles del área de texto en términos de filas y columnas de caracteres.
El atributo
placeholder especifica una pista corta
que describe el valor esperado del área de texto.
Esta pista se muestra dentro del área de texto cuando está vacía,
y desaparece cuando el usuario comienza a escribir.
Formularios con conjuntos de campos
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Formularios</title>
</head>
<body>
<form action="http://example.com/search">
<fieldset>
<legend>Display</legend>
<div>
<label>
<input type="radio" name="c" value="0" checked>
Black on White
</label>
</div>
<div>
<label>
<input type="radio" name="c" value="1">
White on Black
</label>
</div>
<div>
<label>
<input type="checkbox" name="g">
Use grayscale
</label>
</div>
</fieldset>
</form>
</body>
</html>
El elemento
fieldset se usa para agrupar controles de formulario relacionados
y etiquetas dentro de un formulario web.
Ayuda a organizar el contenido del formulario y mejorar su accesibilidad.
El elemento
legend proporciona un título para el contenido del fieldset.
Los botones de opción se crean usando elementos
input
con type="radio".
Los botones de opción con el mismo valor en su atributo name
se agrupan juntos, y solo uno de ellos puede ser seleccionado a la vez.
El atributo
checked de un elemento input
indica que este botón de opción o casilla de verificación está seleccionado por defecto
cuando el formulario se muestra inicialmente.
Las casillas de verificación se crean usando elementos
input
con type="checkbox".
Se pueden seleccionar varias casillas de verificación al mismo tiempo.
Formularios: sugerencias de entrada
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Formularios</title>
</head>
<body>
<form action="http://example.com/search">
<label>
País <input type="text" name="pais" list="paises">
</label>
<datalist id="paises">
<option value="España">
<option value="Portugal">
<option value="Andorra">
<option value="Francia">
</datalist>
</form>
</body>
</html>
El atributo
list de un elemento input
especifica el id de un elemento datalist
que contiene una lista de opciones predefinidas para el campo de entrada.
El navegador puede mostrar estas opciones como sugerencias
y autocompletar el campo de entrada mientras el usuario escribe.
El elemento
datalist contiene un conjunto de elementos option
que definen las opciones predefinidas para un campo de entrada asociado.
El atributo
value de un elemento option
especifica una opción predefinida que puede ser sugerida al usuario.
Formularios con campos de subida de ficheros
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Formularios</title>
</head>
<body>
<form action="http://example.com/search">
<p>
<label>
Selecciona una o más fotos:
<input type="file" name="foto" multiple required>
</label>
</p>
<p>
<input type="submit" value="Enviar">
</p>
</form>
</body>
</html>
El elemento
input con type="file"
crea un control de carga de archivos que permite al usuario seleccionar archivos desde su dispositivo.
El atributo
multiple permite al usuario seleccionar más de un archivo
para un único control de carga de archivos.
El atributo
required indica que este control de formulario
debe ser completado antes de enviar el formulario.
El navegador evitará el envío del formulario
si no se ha seleccionado ningún archivo.