Índice del curso de HTML5

  1. Introducción
  2. Estructura de una página web
  3. Comentarios
  4. Encabezados y párrafos
  5. Imágenes
  6. Enlaces
  7. Video y audio
  8. Listas
  9. Ejercicio resumen de fundamentos de HTML
  10. iframes
  11. Páginas de consulta
  12. Tablas
  13. Estilos en línea
  14. Unidades de medida
  15. Capas
  16. Hacer una NewsLetter con HTML
  17. favicon
  18. Hojas de estilos
  19. Selectores CSS
  20. Algunos estilos de CSS3
    1. Motores de navegación
    2. text-shadow
    3. border-radius, box-shadow
    4. border-image
    5. Ejercicio - background centrado
    6. background-size
    7. Multiple Background & size
    8. background con rgba
    9. Gradientes
    10. Fuentes
    11. columns
    12. Animaciones con transition
    13. text-overflow
    14. transform
  21. GIMP
  22. display:block, inline, inline-block
  23. Margin Collapse
  24. padding y width
  25. Ejercicios de maquetación vertical
  26. Hacer una newsletter responsive sin media queries
  27. img vs background
  28. Flexbox
  29. Algunos tips
    1. Pintar el color de fondo de una línea
    2. Incrustar una imagen
    3. Sangría francesa (hanging intent)
    4. Capitalizar una letra
    5. Eliminar el borde (outline) del elemento activo
    6. contenteditable
    7. Soporte para textos asiáticos
    8. wbr - Word Break
  30. Ejercicios de HTML
  31. Break! - gran día de repaso
  32. Links de interés
  33. position
  34. Opacidades
  35. Popups con CSS
  36. Ejercicio - Galería de fotos
  37. Navigation Bar
  38. !important
  39. Páginas reales
  40. Grid Layout
  41. Selectores avanzados de CSS
  42. HTML5: definición y ejemplos
  43. HTML5 vs HTML4
  44. divs semánticos
  45. svg
  46. Formularios
  47. Animaciones con CSS3
  48. Responsive design
  49. Más ejercicios de html
  50. Página de error 404
  51. Insertar el buscador de google
  52. Dominio y alojamiento
  53. Ejercicio - Proyecto
  54. Ejercicio - Clientes y proveedores

Estructura de un documento

broma sobre cómo estructurar una página html estructura de una página html
<!DOCTYPE html>
<html>
	<head>
		<title></title>
	</head>

	<body>

	</body>
</html>

Notas:

  • El doctype le dice al navegador que tipo de información va a contener la página web (HTML4, XHTML 1.0, HTML5).
  • Todo lo que hemos estado haciendo hasta ahora, iría dentro del body.

DOCTYPE

EL HTML 4.01 Strict no permite marcado de presentación con el argumento de que debería usar CSS en su lugar para eso. Así es como el DOCTYPE Strict luce:

<!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">

Metaetiquetas de codificación del texto

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

Para HTML5:
<meta charset="UTF-8">

El atributo content="text/html define que clase de información contiene el documento web, cación se debería abrir.

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" />

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" />

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"/>

http://www.w3schools.com/

icono de mandar un mail¡Contacta conmigo!
Pablo Monteserín
contacta conmigoPablo Monteserín

Para dudas técnicas sobre los ejercicios de mis cursos es necesario estar suscrito.