Agosto2009 http://eveliz.wordpress.com 2
Licencia de Documentacion
HTML/XHTML by Ing. Erika Veliz is licensed under a Creative Commons Creative Commons
ReconocimientoCompartir bajo la misma licencia 3.0 España License.
Agosto2009 http://eveliz.wordpress.com 3
HTML
El Lenguaje HTML
HTML(HyperText Markup Language). Es el lenguaje de marcas reconocido en todo el mundo y cuyas normas define un organismo sin fines de lucro llamado World Wide Web Consortium (http://www.w3.org/) , conocido como W3C.
Agosto2009 http://eveliz.wordpress.com 4
Historia de HTML
1980: Tim Berners Lee, propone un sistema de hipertexto para compartir documentos.
Tim BernersLee, Presenta en una convocatoria organizada para desarrollar un sistema de “hipertexto” para Internet, junto al Ing de Sistemas Robert Cailliau la propuesta ganadora World Wide Web.(W3)
1991: Presentan “Html tags” como primer documento formal.
Agosto2009 http://eveliz.wordpress.com 5
Historia de HTML
1993: Proponen convertir HTML en un estándar por parte del Organismo IETF.
1995: Se publica el estándar HTML 2.0 por el Organismo IETF.
1996: Los estandares los publica la W3C.
1997: HTML 3.2
1999: HTML 4.0
Agosto2009 http://eveliz.wordpress.com 6
Historia de HTML
2004: Apple, Mozilla y Opera se centran el fúturo estandar de HTML5, y publican un primer borrador en Enero del 2008 a través de la Empresa WATHWG.
2007: W3C retoma el estandar HTML y paralelamente continuan la estandarizacion de XHTML.
Agosto2009 http://eveliz.wordpress.com 7
Estándar Oficial
Especificación oficial de HTML 4.01
http://www.w3.org/TR/html401/
Especificación oficial de XHTML 1.0
http://www.w3.org/TR/xhtml1/
Agosto2009 http://eveliz.wordpress.com 8
HTML/XHTML
XHTML Es una adaptación de HTML al lenguaje XML.
Agosto2009 http://eveliz.wordpress.com 9
XHTML : Imposición de reglas
Debe contar con un indicador de tipo de documento y cumplir sus reglas:<?xml version="1.0" encoding="utf8"?>
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
Debe contar con <html> <head> y <body>
Debe aparecer el <title> en primer lugar, despues del <head>
Debe entrecomillar TODOS los atributos, incluyendo los sencillos como <p align=left>
Agosto2009 http://eveliz.wordpress.com 10
XHTML : Imposición de reglas
Debe anidar las etiquetas correctamente, <i><b>son correctas</b></i>, pero <i><b>no lo son </i></b>.
No se pueden omitir las etiquetas de cierre opcionales, por lo que <p> no puede aparecer sola; es preciso tener <p> y </p>.
Las etiquetas vacías se deben cerrar, por lo que las etiquetas <hr>se convierten en <hr />.
Todo debe aparecer en minusculas.
Agosto2009 http://eveliz.wordpress.com 11
Características Básicas
Lenguajes de Etiquetas Etiqueta de apertura: carácter <, seguido del nombre de la etiqueta (sin espacios en blanco) y terminado con el carácter >
Etiqueta de cierre: carácter <, seguido del carácter /, seguido del nombre de la etiqueta (sin espacios en blanco) y terminado con el carácter >
Estructura típica de las etiquetas HTML<nombre_etiqueta> ... </nombre_etiqueta>
Agosto2009 http://eveliz.wordpress.com 12
Características BásicasPrimer Documento de XHTML
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<title>Mi primer HTML</title>
...
</head>
<body>
<p>Este es un parrafo <strong>muy importante</strong> e interesante........</p>
<p>En el mundo de HTML, puedes colocar <em>letras cursivas</em>y <del>tachadas</del></p>
</body>
</html>
Agosto2009 http://eveliz.wordpress.com 13
Características Básicas
Primer Documento de XHTML
Agosto2009 http://eveliz.wordpress.com 14
Características Básicas
Etiquetasa, abbr, acronym, address, applet, area, b, h1, h2, h3, h4, h5, h6, head, etc...
Se consideran obsoletas: applet, basefont, center, dir, font, isindex, menu, s, strike, u.
Atributos<a>Enlace Incompleto</a>
<a href="http://www.google.com">Enlace hacia la pagina de Google</a>
Agosto2009 http://eveliz.wordpress.com 15
Caracteristicas Básicas
Use las etiquetas correspondientes para generar el archivo siguiente:
Agosto2009 http://eveliz.wordpress.com 16
Caracteristicas Básicas
Atributos BásicosAtributo Descripcion
id=”texto” Establece un dentificador único a cada elemento dentro de una pagina.
class=”texto” Establece la clase CSS que se aplica a los estilos del elemento
style=”texto” Establece de forma directa los estilos CSS de un elemento
title=”texto” Establece el título a un elemento (mejora la accesibilidad y los navegadores lo muestran cuando el usuario pasa el ratón por encima del elemento).
Agosto2009 http://eveliz.wordpress.com 17
Características Básicas
Atributos para Internacionalización
Atributo Descripcion
lang=”codigo de idioma”
Indica el idioma del elemento mediante un código predefinido.
xm:lang=”codigo de idioma”
Indica el idioma del elemento mediante un código predefinido
dir Indica la dirección del texto (útil para los idiomas que escriben de derecha a izquierda)
Agosto2009 http://eveliz.wordpress.com 18
Características Básicas
Atributos de Eventos
Atributo Descripcion
onclick, ondblclick, onmousedown, onmouseup,onmouseover,onmousemove,onmouseout,onkeypress,onkeydown,onkeyup
Permiten controlar los eventos producidos sobre cada elemento de la página
Agosto2009 http://eveliz.wordpress.com 19
Características Básicas
Atributos para elementos que pueden obtener el foco
Atributo Descripcion
accesskey ="letra"
Establece una tecla de acceso rápido a un elemento HTML
tabindex ="numero"
Establece la posición del elemento en el orden de tabulación de la página. Su valor debeestar comprendido entre 0 y 32.767
onfocus,onblur
Controlan los eventos JavaScript que se ejecutan cuando el elemento obtiene o pierde el foco
Agosto2009 http://eveliz.wordpress.com 20
Características Básicas
Elementos HTMLUna etiqueta de apertura.
Cero o más atributos.
Texto encerrado por la etiqueta.
Una etiqueta de cierre.
Agosto2009 http://eveliz.wordpress.com 21
Características Básicas
Elementos en Linea
a, abbr, acronym, b, basefont, bdo, big, br, cite,code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub,sup, textarea, tt, u, var.
Elementos en Bloque
address, blockquote, center, dir, div, dl,fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul.
Agosto2009 http://eveliz.wordpress.com 22
Caracteristicas Básicas
Sintaxis de las Etiquetas XHTMLLas etiquetas se tienen que cerrar de acuerdo a como se abren
<p>Este es un párrafo con <a>un enlace</a></p>
Los nombres de las etiquetas y atributos siempre se escriben en minúsculas:
<p>Este es un párrafo con <a href="http://www.google.com">un enlace</a></p>
El valor de los atributos siempre se encierra con comillas:
<p>Este es un párrafo con <a href="http://www.google.com">un enlace</a></p>
Agosto2009 http://eveliz.wordpress.com 23
Características Básicas
Sintaxis de las Etiquetas XHTML
Los atributos no se pueden comprimir:<dl compact="compact">...</dl>
Todas las etiquetas deben cerrarse siempre:<br/>
<hr/>
Agosto2009 http://eveliz.wordpress.com 24
EstructurarPárrafos <p>Párrafos</p>
Texto
<p> Párrafos
Atributos Comunes Basicos,i18n y eventos
Atributos Específicos
Tipo de Elemento Bloque
Descripcion Delimita el contenido de un párrafo.
Agosto2009 http://eveliz.wordpress.com 25
Texto
EstructurarSecciones
<h1>,<h2>,...,<h6> Secciones de nivel 1 hasta 6
Atributos Comunes Basicos,i18n y eventos
Atributos Específicos
Tipo de Elemento Bloque
Descripcion Define los títulos de las secciones de mayor importancia de la página.
Agosto2009 http://eveliz.wordpress.com 26
Texto
Marcado Básico de TextoÉnfasis
<em> Énfasis
Atributos Comunes Basicos,i18n y eventos
Atributos Específicos
Tipo de Elemento En línea
Descripcion Realza la importancia del texto que encierra
Agosto2009 http://eveliz.wordpress.com 27
Texto
Marcado Básico de TextoÉnfasis más acentuado
Genere el Codigo de la Imagen siguiente en base a los elementos planteados.
<strong> Énfasis más acentuado
Atributos Comunes Basicos,i18n y eventos
Atributos Específicos
Tipo de Elemento En línea
Descripcion Realza la importancia del texto que encierra
Agosto2009 http://eveliz.wordpress.com 28
Texto
Marcado Avanzado de texto
Abreviaturas
<abbr> Abreviaturas
Atributos Comunes Basicos,i18n y eventos
Atributos Específicos title=”texto” Indica el significado completo de la abreviatura
Tipo de Elemento En línea
Descripcion Se emplea para marcar las abreviaturas del texto y proporcionar el significado de esasabreviaturas
Agosto2009 http://eveliz.wordpress.com 29
Texto
Marcado Avanzado de texto
Acrónimos o Siglas
<acronym> Acrónimos o Siglas
Atributos Comunes Basicos,i18n y eventos
Atributos Específicos title=”texto” Indica el significado completo del acrónymo o sigla
Tipo de Elemento En línea
Descripcion Se emplea para marcar las siglas o acrónimos del texto y proporcionar el significado de esas abreviaturas
Agosto2009 http://eveliz.wordpress.com 30
Texto
Marcado Avanzado de texto
Definición
<dfn> Definición
Atributos Comunes Basicos,i18n y eventos
Atributos Específicos title=”texto” Indica el significado completo del término
Tipo de Elemento En línea
Descripcion Se emplea para marcar las definiciones de ciertos términos y proporcionar el significado de los mismos.
Agosto2009 http://eveliz.wordpress.com 31
Texto
Marcado Avanzado de texto
cita
<cite> Definición
Atributos Comunes Basicos,i18n y eventos
Atributos Específicos -
Tipo de Elemento En línea
Descripcion Se emplea para marcar una cita o una referencia a otras fuentes.
Agosto2009 http://eveliz.wordpress.com 32
Texto
Espacio en blancos y nuevas lineas
  y br
<br> Nuevas lineas
Atributos Comunes Basicos,i18n y eventos
Atributos Específicos -
Tipo de Elemento En línea y etiqueta vacía
Descripcion Fuerza al navegador a insertar una nueva linea
Agosto2009 http://eveliz.wordpress.com 33
Texto
Texto Preformateado
pre
<pre> Texto Preformateado
Atributos Comunes Basicos,i18n y eventos
Atributos Específicos -
Tipo de Elemento Bloque
Descripcion Muestra el texto que encierra tal cual como está escrito.
Agosto2009 http://eveliz.wordpress.com 34
Texto
Texto Preformateado
code
<code> Codigo
Atributos Comunes Basicos,i18n y eventos
Atributos Específicos -
Tipo de Elemento En linea
Descripcion Delimita el texto, considerado un fragmento de codigo fuente.
Agosto2009 http://eveliz.wordpress.com 35
Texto
Codificacion de Caracteres
Entidad Carácter Descripcion
< < Signo de menor que
> > Signo de mayor que
& & Amspersand
" “ Comillas
Agosto2009 http://eveliz.wordpress.com 36
Texto
Agosto2009 http://eveliz.wordpress.com 37
Texto
Agosto2009 http://eveliz.wordpress.com 38
Enlaces
Enlaces <a>
<a> Enlaces
Atributos Comunes Basicos,i18n y eventos
Atributos Específicos -name=”texto” Permite Permite nombrar al enlace para que se pueda acceder desde otros enlaces
-href=”url” Indica la URL del recurso que se quiere enlazar
Tipo de Elemento En linea
Descripcion Se emplea para enlazar otro tipo de recursos.
Agosto2009 http://eveliz.wordpress.com 39
Enlaces
Enlazar a la Página de Google
<a href="http://www.google.com">Página principal de Google</a>
Enlazar hacia una Imagen<a href="http://www.ejemplo.com/fondo_escritorio.jpg">Imagen interesante para un fondo de escritorio</a>
Enlazar hacia otros documentos<a href="http://www.ejemplo.com/informe.pdf">Descargar informe completo [PDF]</a>
<a href="http://www.ejemplo.com/informe.odt">Descargar informe completo [ODT</a>
Agosto2009 http://eveliz.wordpress.com 40
Enlaces Enlaces Especiales
<html><head> <title>Enlaces</title> <meta name="GENERATOR" content="Quanta Plus" /> <meta httpequiv="ContentType" content="text/html; charset=utf8" /></head><body><a name="seccion1"><h1>Seccion 1</h1></a><p>Parrafos</p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><a href="#seccion1">Ir a Seccion1</a><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><a href="ejercicio3.html">Ir a Ejercicio3</a></body></html>
Agosto2009 http://eveliz.wordpress.com 41
Enlaces
Genere el Codigo Correspondiente
Agosto2009 http://eveliz.wordpress.com 42
Enlaces
Genere el codigo correspondiente
Agosto2009 http://eveliz.wordpress.com 43
Listas
Listas no ordenadas<ul> Lista no ordenada
Atributos Comunes Basicos,i18n y eventos
Atributos Específicos -
Tipo de Elemento Bloque
Descripcion Se emplea para definir listas no ordenadas
<li> Elemento de una lista
Atributos Comunes Basicos,i18n y eventos
Atributos Específicos -
Tipo de Elemento Bloque
Descripcion Se emplea para definir los elementos de una lista(ordenada o no ordenada)
Agosto2009 http://eveliz.wordpress.com 44
Listas
Lista Ordenada
<ol> Lista ordenada
Atributos Comunes Basicos,i18n y eventos
Atributos Específicos -
Tipo de Elemento Bloque
Descripcion Se emplea para definir listas ordenadas
Agosto2009 http://eveliz.wordpress.com 45
Listas
Listas de definicion<dl> Lista de definicion
Atributos Comunes Basicos,i18n y eventos
Atributos Específicos -
Tipo de Elemento Bloque
Descripcion Se emplea para definir listas de definicion
<dt> Término de una definición
Atributos Comunes Basicos,i18n y eventos
Atributos Específicos -
Tipo de Elemento Bloque
Descripcion Se emplea para definir el término de una definicion
Agosto2009 http://eveliz.wordpress.com 46
Listas
Listas de definicion
<dd> Descripcion de una definición
Atributos Comunes Basicos,i18n y eventos
Atributos Específicos -
Tipo de Elemento Bloque
Descripcion Se emplea para definir la descripcion de una definicion
Agosto2009 http://eveliz.wordpress.com 47
Listas
Agosto2009 http://eveliz.wordpress.com 48
Imagenes y Objetos
Imagenes<img> Imagenes
Atributos Comunes Basicos,i18n y eventos
Atributos Específicos src = "url" Indica la URL de la imagen que se muestraalt = "texto" Descripción corta de la imagenlongdesc = "url" Indica una URL en la que puede encontrarse
una descripción más detallada de la imagenname = "texto" Nombre del elemento imagenheight = "unidad_de_medida" Indica la altura con la que se
debe mostrar la imagen (no es obligatorio que coincida con la altura original de la imagen)width = "unidad_de_medida" Indica la anchura con la que se
debe mostrar la imagen (no es obligatorio que coincida con la anchura original de la imagen)
Tipo de Elemento En linea y etiqueta vacía
Descripcion Se emplea para incluir imagenes en los documentos.
Agosto2009 http://eveliz.wordpress.com 49
Imagenes y Objetos<img src="imagen.gif" usemap="#mapa_zonas" />
<map name="mapa_zonas">
<area shape="rect" coords="20,25,84,113" href="rectangulo.html" />
<area shape="polygon" coords="90,25,162,26,163,96,89,25,90,24" href="triangulo.html"
/>
<area shape="circle" coords="130,114,29" href="circulo.html" />
<area shape="rect" coords="19,156,170,211" href="mailto:[email protected]" />
<area shape="default" nohref="nohref" />
</map>
Agosto2009 http://eveliz.wordpress.com 50
Imagenes y Objetos
Objetos<object> Objeto
Atributos Comunes Basicos,i18n y eventos
Atributos Específicos data = "url" Indica la URL de los datos que utiliza el objetoclassid, codebase, codetype Información específica que
depende del tipo de objetotype Indica el tipo de contenido de los datosheight = "unidad_de_medida" Indica la altura con la
que se debe mostrar el objetowidth = "unidad_de_medida" Indica la anchura con la
que se debe mostrar el objeto
Tipo de Elemento Bloque y en linea
Descripcion Se emplea para embeber objetos en los documentos.
Agosto2009 http://eveliz.wordpress.com 51
Imagenes y Objetos<object data="PlanetaTierra.mpeg" type="application/mpeg" />
<object title="La Tierra vista desde el espacio" classid="http://www.observer.mars/
TheEarth.py">
<! Formato alternativo en forma de vídeo >
<object data="PlanetaTierra.mpeg" type="application/mpeg">
<! Otro formato alternativo mediante una imagen GIF >
<object data="PlanetaTierra.gif" type="image/gif">
<! Si el navegador no soporta ningún formato, se muestra el siguiente texto >
La <strong>Tierra</strong> vista desde el espacio.
</object>
</object>
</object>
Agosto2009 http://eveliz.wordpress.com 52
Tablas
Tablas
<table> Tabla
Atributos Comunes Basicos,i18n y eventos
Atributos Específicos summary = "texto" Permite describir el contenido de la tabla (lo utilizan los buscadores y las personas discapacitadas)
Tipo de Elemento Bloque y en linea
Descripcion Se emplea para embeber objetos en los documentos.
Agosto2009 http://eveliz.wordpress.com 53
Tablas
Tablas
Fila de tabla<tr> Fila de tabla
Atributos Comunes Basicos,i18n y eventos
Atributos Específicos
Tipo de Elemento Bloque
Descripcion Se emplea para definir cada fila de las tablas de datos.
Agosto2009 http://eveliz.wordpress.com 54
Tablas
Tablas
Celda de tabla<td> Celda de tabla
Atributos Comunes Basicos,i18n y eventos
Atributos Específicos abbr = "texto" Permite describir el contenido de la celda (se emplea sobre todo con los navegadores de voz utilizados por personas discapacitadas)headers = "lista_de_id" Indica las celdas que actúan como cabeceras para
esta celda (los títulos de las columnas y filas). Se indica como una lista de valores del atributo "id" de celdasscope = "col, row, colgroup, rowgroup" Indica las celdas para las que esta
celda será su cabecera. Ej: scope="col" indica que esta celda es la cabecera de todas las demás celdas que están en la misma columna colspan = "numero" Número de columnas que ocupa esta celdarowspan = "numero" Número de filas que ocupa esta celda
Tipo de Elemento Bloque
Descripcion Se emplea para definir cada fila de las columnas de las tablas de datos.
Agosto2009 http://eveliz.wordpress.com 55
Tablas
Tablas
Celda cabecera de tabla<th> Celda cabecera de tabla
Atributos Comunes Basicos,i18n y eventos
Atributos Específicos abbr = "texto" Permite describir el contenido de la celda (se emplea sobre todo con los navegadores de voz utilizados por personas discapacitadas)headers = "lista_de_id" Indica las celdas que actúan como cabeceras para
esta celda (los títulos de las columnas y filas). Se indica como una lista de ID de celdasscope = "col, row, colgroup, rowgroup" Indica las celdas para las que esta
celda será su cabecera. Ej: scope="col" indica que esta celda es la cabecera de todas las demás celdas que están en la misma columnacolspan = "numero" Número de columnas que ocupa esta celda rowspan = "numero" Número de filas que ocupa esta celda
Tipo de Elemento Bloque
Descripcion Se emplea para definir las celdas que son cabecera de una fila o de una columna de la tabla
Agosto2009 http://eveliz.wordpress.com 56
Tablas
Tablas
Caption<caption> Leyenda o título de la tabla
Atributos Comunes Basicos,i18n y eventos
Atributos Específicos
Tipo de Elemento En linea
Descripcion Se emplea para definir la leyenda o título de una tabla
Agosto2009 http://eveliz.wordpress.com 57
Formularios
Formularios <form><form> Formulario
Atributos Comunes Basicos,i18n y eventos
Atributos Específicos action = "url" Indica la URL que se encarga de procesar los datos del formulariomethod = "POST o GET" Método HTTP empleado al enviar el formularioenctype = "application/xwwwformurlencoded o multipart/formdata"
Tipo de codificación empleada al enviar el formulario al servidor (sólo se indica de forma explícita en los formularios que permiten adjuntar archivos) accept = "tipo_de_contenido" Lista separada por comas de todos los tipos de archivos aceptados por el servidor (sólo para los formularios que permiten adjuntar archivos)Otros: acceptcharset, onsubmit, onreset
Tipo de Elemento Bloque
Descripcion Se emplea para insertar un formulario en la pagina
Agosto2009 http://eveliz.wordpress.com 58
Formularios
Elementos de un formulario<input> Control de un formulario
Atributos Comunes Basicos,i18n ,eventos y foco
Atributos Específicos type = "text | password | checkbox | radio | submit | reset |file | hidden | image | button" Indica el tipo de control que se incluye en el formulario name = "texto" Asigna un nombre al control (es imprescindible para que el servidor
pueda procesar el formulario)value = "texto" Valor inicial del controlsize = "unidad_de_medida" Tamaño inicial del control (para los campos d de texto y de
password se refiere al número de caracteres, en el resto de controles se refiere a su tamaño en píxel)maxlength = "numero" Máximo número de caracteres para los controles de texto y de
passwordchecked = "checked" Para los controles checkbox y radiobutton permiteindicar qué opción aparece preseleccionada disabled = "disabled" El control aparece deshabilitado y su valor no se envía al servidor
junto con el resto de datos readonly = "readonly" El contenido del control no se puede modificar src = "url" Para el control que permite crear botones con imágenes, indica la URL de la
imagen que se emplea como botón de formularioalt = "texto" Descripción del control
Tipo de Elemento Bloque
Descripcion Se emplea para insertar un formulario en la pagina
Agosto2009 http://eveliz.wordpress.com 59
Formularios
Formulario sencillo
<html><head> <title>Formulario</title> <meta name="GENERATOR" content="Quanta Plus" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body><h1>Formulario Sencillo</h1><form action=”ejercicio2.html" method="post">Nombre:<input type="text" /><br /><br /><input type="submit" value="Enviar"/> <input type="reset" value="Limpiar"/></form></body></html>
Agosto2009 http://eveliz.wordpress.com 60
Estructuras
Elemento div
<div> Divisiones
Atributos Comunes Basicos,i18n ,eventos y foco
Atributos Específicos
Tipo de Elemento Bloque
Descripcion Agrupa elementos de bloque
Agosto2009 http://eveliz.wordpress.com 61
Estructuras
<div id="contenedor">
<div id="cabecera">
...
</div>
<div id="contenido">
<div id="menu">
..
</div>
...
</div>
<div id="pie">
...
</div>
</div>
...
Agosto2009 http://eveliz.wordpress.com 62
Proyecto
Elabore un diseño para su pagina Web
Identifique:A quien va dirigida?
Cual es la estructura?
Busque Informacion o contenido para la Pagina.
Trabaje con el Lenguaje XHTML y publiquela!
Muchas Gracias!!!