El documento presenta la estructura básica de HTML para crear páginas web. Explica los elementos principales como <head>, <body> y <title> y describe brevemente los tipos de elementos como en bloque, en línea, de texto, de lista, de objetos e imágenes. También define atributos comunes como href, src y valores.
2. Quiz
Escribir la estructura de en
HTML del siguiente contenido
•20 minutos
•Imágenes similares
•Textedit
•Entrega vía email a
m.martin@profesor.duoc.cl
<!-- Nombre Curso URL -->
3.
4. HTML
Contenedores y tipos de
elementos
Computación Multimedia I - Clase 3
Maximiliano Martin - DUOC 2010
6. Declaración / DOCTYPE
No es una etiqueta sino una instrucción
•Definición del Tipo de Documento (DTD)
•El DTD especifica las reglas para el
lenguaje de marcado
•XHTML 1.0 Strict / XHTML 1.0 Transitional
•XHTML 1.1
•HTML 4.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/
DTD/xhtml1-strict.dtd">
www.maximiliano.cl
7. <head> o cabecera
Contiene información sobre el documento que:
no se muestra directamente al usuario
www.maximiliano.cl
8. <head> o cabecera
Contiene información sobre el documento que:
no se muestra directamente al usuario
<title>
<html>
<head>
<title>Guía de Referencia Rápida XHTML</title>
</head>
<body>
...elementos del body...
</body>
</html>
www.maximiliano.cl
9. <head> o cabecera
Contiene información sobre el documento que:
referencia a metaetiquetas
www.maximiliano.cl
10. <head> o cabecera
Contiene información sobre el documento que:
referencia a metaetiquetas
<meta>
<meta name="Description" content="Qué es HTML y para qué sirve" />
<meta name="Keywords" content="HTML,XHTML,tutorial HTML />
"
<meta name="Author" content="Maximiliano Martin" />
<meta name="Copyright" content="...
www.maximiliano.cl
11. <head> o cabecera
Contiene información sobre el documento que:
relaciona mediante vínculos a otras URL o archivos
www.maximiliano.cl
12. <head> o cabecera
Contiene información sobre el documento que:
relaciona mediante vínculos a otras URL o archivos
<link>
<link type="text/css" rel="stylesheet" href="css/base.css" />
<link type="text/css" media="print" rel="stylesheet" href="css/print.css" />
<link type="text/css" media="aural" rel="stylesheet" href="css/aural.css" />
www.maximiliano.cl
13. <body> o cuerpo
Define el contenido del documento. Lo que se
muestra a través del navegador
www.maximiliano.cl
14. <body> o cuerpo
Define el contenido del documento. Lo que se
muestra a través del navegador
<body>...
Elementos en bloque Elementos en linea
www.maximiliano.cl
15. <body> o cuerpo
Define el contenido del documento. Lo que se
muestra a través del navegador
<body>...
Elementos en bloque Elementos en linea
www.maximiliano.cl
16. <body> o cuerpo
Define el contenido del documento. Lo que se
muestra a través del navegador
<body>...
Elementos en bloque Elementos en linea
www.maximiliano.cl
17. <body> o cuerpo
Define el contenido del documento. Lo que se
muestra a través del navegador
<body>...
Elementos en bloque Elementos en linea
www.maximiliano.cl
18. <body> o cuerpo
Define el contenido del documento. Lo que se
muestra a través del navegador
<body>...
Elementos en bloque Elementos en linea
p, div, ol, ul, li, h1, a, img, em,
h2, h3, etc. strong, span, etc.
www.maximiliano.cl
19. <body> o cuerpo
Define el contenido del documento. Lo que se
muestra a través del navegador
<body>...
Elementos en bloque Elementos en linea
p, div, ol, ul, li, h1, a, img, em,
h2, h3, etc. strong, span, etc.
www.maximiliano.cl
20. Valores de Atributos
Propiedad de algunos elementos a los que se les
asigna Valores específicos (Humanos/Robots)
<a> vínculo o ancla </a>
www.maximiliano.cl
21. Valores de Atributos
Propiedad de algunos elementos a los que se les
asigna Valores específicos (Humanos/Robots)
<a> vínculo o ancla </a>
•href •hreflang
•title •accesskey
•class •rel
•id •tabindex
<a href=”http://www.wikipedia.com/ancla/”
title=”Definición de Wikipedia” rel=”External”> vínculo o
ancla </a>
www.maximiliano.cl
22. Valores de Atributos
Propiedad de algunos elementos a los que se les
asigna Valores específicos (Humanos/Robots)
<img src=”URI” />
•scr •height
•alt •width
•class •longdesc
•id
<img src=”http://www.w3c.es/img/eslogo-20030729.png” alt="Oficina
española del W3C" height="52" width="279" />
www.maximiliano.cl
23. + Elementos
Propiedad de algunos elementos a los que se les
asigna Valores específicos (Humanos/Robots)
•Estructura: body, head, html, title •Hipertexto: a
•Texto: abbr, acronym, address, blockquote, br, cite, •Lista: dl, dt, dd, ol, ul, li
code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, •Objetos: object, param
q, samp, span, strong, var •Edición: del, ins
•Presentación: b, big, hr, i, small, sub, sup, tt •Texto Bidireccional: bdo
•Formularios: button, fieldset, form, input, label, •Módulo de Imagen: img
legend, select, optgroup, option, textarea
•Metainformación: meta
•Tablas: caption, col, colgroup, table, tbody, td, tfoot,
th, thead, tr
•Scripting: noscript, script
•Mapa de Imagen del lado Cliente: area, map •Hoja de Estilo: style element
•Mapa de Imagen del lado Servidor: Attribute •Link: link
ismap on img •Base: base
www.maximiliano.cl
25. Tarea
Publicar un post con:
Tipos de elementos que se pueden anidar dentro de
otros
Ejemplificar utilizando el editor de HTML de
WordPress
Apuntes de la clase, lo que les quedó claro y
los que no y les gustaría ver nuevamente.