Estructura de una página web

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Curso de HTML

31.  
32.  
35.  
38.  
53.  
<!DOCTYPE html>
<html>
	<head>
		<title></title>
	</head>

	<body>

	</body>
</html>

Todo lo que hemos estado haciendo hasta ahora, iría dentro del body.

broma sobre cómo estructurar una página html
estructura de una página html

DOCTYPE

El doctype le dice al navegador que tipo de información va a contener la página web (HTML4, XHTML 1.0, HTML5)

HTML4:

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

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

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

HTML5

<!DOCTYPE HTML>

Metaetiquetas de codificación del texto

Las etiquetas meta contienen información relativa al documento web.

XHTML 1.0 e inferiores

La iso para Europa del Oeste (español):
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

La iso para Europa Central:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />

Esperanto y Maltés:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-3" />

Letón, Lituano y Japonés:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-4" />
						...
Para caracteres asiáticos y de todo tipo:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

HTML5:

<meta charset="UTF-8">

Otras metaetiquetas

Indica al navegador el número de segundos antes de que la página sea actualizada.
<meta http-equiv="refresh" content="15" />

Redirecciona a la página indicada en la URL.
<meta http-equiv='refresh' content='0; URL=http://www.google.es/'>

Previene que la página se cargue en un target.
<meta http-equiv="window-target" content="_top" />

HTML5 es un compendio de nuevas tecnologías(http://www.w3.org/html/logo/), entre las que tenemos:

  • Nuevas etiquetas.
  • Almacenamiento offline.
  • Integración los sensores de los dispositivos que lo utilicen (geolocalización, etc).
  • Posibilidad de conectividad entre dispositivos (chat, etc.).
  • Reproducción de multimedia sin recurrir a plugins de terceros.
  • Gráficos 3D y efectos visuales.
  • Multitarea.
  • CSS3. No forma parte de la especificación de HTML5, pero se está haciendo la mismo tiempo.

Soporte de HTML5

Para evaluar en que medida tu navegador a la especificación html5: http://html5test.com/

No todos los navegadores implementan todas todas las nuevas características de html5. Es posible consultar el estado de implementación en que se encuentran en el siguiente enlace: http://caniuse.com/

Algunos ejemplos de páginas que usan intensamente HTML5:

Etiquetas obsoletas en HTML5

Presentación

basefont, big, center, font, s, strike, tt, u

Otras etiquetas

acronym, applet, isindex, dir

Accesibilidad

frame, frameset, noframes

Atributos obsoletos

  • body -> background
  • a, link -> rev, charset
  • img -> hspace, vspace, longdesc, name
  • html -> version
  • body, table, tr, th, td -> bgcolor
  • table -> valign, border, cellpadding, cellspacing
  • td, th -> height, width
  • th -> abbr
  • td -> scope
  • Para todos -> align

Documento XHTML que valide por w3c

Básicamente es un documento html bien formado.

  • Etiquetas en minúsculas (del XML).Como las etiquetas en XML distinguen entre mayúsculas y minúsculas (case-sensitive), la recomendación XHTML ha definido todos los nombres de etiqueta en minúsculas.
  • Valores de atributos entre comillas dobles.
  • Ningún texto puede estar directamente dentro del body, sin estar situado a su vez en otro elemento (por ejemplo, un párrafo). <p>hola mundo!</p>.
  • La etiqueta title, dentro del head, es obligatoria.
  • Las metaetiquetas se cierran en sí mismas explícitamente:
    <meta http-equiv=»Content-Type» content=»text/html;charset=utf-8″/>
← Ejercicio: mi primera página web
Comentarios en HTML →