Clase 04: HTMLClase 04: HTML

Curso: Internet y Desarrollo IntranetCurso: Internet y Desarrollo Intranet

Profesor: Jaime Valenzuela A.Profesor: Jaime Valenzuela A.

Descripción de Contenido Descripción de Contenido

Idea base original: describir contenido y estructura yIdea base original: describir contenido y estructura yno formato o presentación.no formato o presentación.

Berners-Lee recurrió a solución ya existente: SGMLBerners-Lee recurrió a solución ya existente: SGML Standard Generalized Markup Language (SGML) seStandard Generalized Markup Language (SGML) se

definió y estandarizó en 1986 (antes del Web)definió y estandarizó en 1986 (antes del Web) Principalmente utilizado en la industria editorial pero Principalmente utilizado en la industria editorial pero

también en otras (espacial, automotriz, semiconductores, también en otras (espacial, automotriz, semiconductores, etc)etc)

Conceptualmente más similar a XML que a HTMLConceptualmente más similar a XML que a HTML

Lenguaje de marcas permite Lenguaje de marcas permite describir contenido estructuradodescribir contenido estructurado

Autor solo provee contenido y estructuraAutor solo provee contenido y estructura Presentación es independientePresentación es independiente

Documento => secuencia de capítulosDocumento => secuencia de capítulos Capítulo => secuencia de seccionesCapítulo => secuencia de secciones Sección => colección de párrafos, tablas, figurasSección => colección de párrafos, tablas, figuras

Estructura del documento => árbol del documentoEstructura del documento => árbol del documento

Marcas: describe estructura delMarcas: describe estructura deldocumentodocumento

Idea general: mezclar el contenido e información de Idea general: mezclar el contenido e información de estructura en el mismo documento (markup)estructura en el mismo documento (markup)

Una secuencia especial de caracteres permite distinguirUna secuencia especial de caracteres permite distinguircontenido de información sobre él (markup)contenido de información sobre él (markup)

Información estructural se define en términos de elementosInformación estructural se define en términos de elementos Nombres de los elementos se ponen entre delimitadores deNombres de los elementos se ponen entre delimitadores de

markupmarkup Cada ocurrencia de un elemento dentro de los delimitadores se Cada ocurrencia de un elemento dentro de los delimitadores se

denomina un tagdenomina un tag información adicional sobre el elemento => atributos del taginformación adicional sobre el elemento => atributos del tag

HTML (Hypertext Markup HTML (Hypertext Markup Language)Language)

Objetivos de diseño originales:Objetivos de diseño originales: Poder Expresivo (suficientemente general)Poder Expresivo (suficientemente general) Accesibilidad e independencia de plataformaAccesibilidad e independencia de plataforma Simplicidad (no se necesita ser un programador)Simplicidad (no se necesita ser un programador)

Está basado en SGML el cual ya satisfacía dos de Está basado en SGML el cual ya satisfacía dos de los tres objetivos. Fallaba en la simplicidad.los tres objetivos. Fallaba en la simplicidad.

Aparece por primera vez en 1990 y desde entonces Aparece por primera vez en 1990 y desde entonces ha evolucionado en forma constanteha evolucionado en forma constante

Versión actual es la 4.01Versión actual es la 4.01 Browser interpreta el HTML para generar una Browser interpreta el HTML para generar una

presentación formateada de la páginapresentación formateada de la página

Breve historia Breve historia

1990 primera versión (muy simple)1990 primera versión (muy simple) encabezados a diferentes niveles, párrafos, listas, anclasencabezados a diferentes niveles, párrafos, listas, anclas

19911991 Dave Ragget diseña el HTML+ pero nunca alcanza status formalDave Ragget diseña el HTML+ pero nunca alcanza status formal Mosaic (NCSA) que incorpora otro set de elementos diferentes del HTMLMosaic (NCSA) que incorpora otro set de elementos diferentes del HTML

19941994 se libera HTML 2.0 (definido como un DTD de SGML)se libera HTML 2.0 (definido como un DTD de SGML) se funda Netscape, 2.0 queda obsoleto casi de inmediatose funda Netscape, 2.0 queda obsoleto casi de inmediato HTML de Netscape se transforma en un standard de factoHTML de Netscape se transforma en un standard de facto se funda el World Wide Web Consortium (W3C) y su primera recomendaciónse funda el World Wide Web Consortium (W3C) y su primera recomendación Importante es el borrador de HTML 3.0 (queda obsoleta antes de hacerse oficial)Importante es el borrador de HTML 3.0 (queda obsoleta antes de hacerse oficial)

1997 (Enero) se libera la versión 3.2 que estabilizó un poco situación fuera de control1997 (Enero) se libera la versión 3.2 que estabilizó un poco situación fuera de control 1997 (Diciembre) aparece la recomendación correspondiente a HTML 4.0 basada en 3 1997 (Diciembre) aparece la recomendación correspondiente a HTML 4.0 basada en 3

DTDsDTDs transicional - interpretar un documento HTML y no para generarlotransicional - interpretar un documento HTML y no para generarlo estricto - generar documentos HTML (no incluye los elementos de transición)estricto - generar documentos HTML (no incluye los elementos de transición) frameset - necesario para documentos que usan framesframeset - necesario para documentos que usan frames

Situación ActualSituación Actual

Hoy en día hay tres opcionesHoy en día hay tres opciones HTML 4.01HTML 4.01 XHTMLXHTML

HTML descrito como aplicación XML (DTD o Schema XML)HTML descrito como aplicación XML (DTD o Schema XML) Igual que HTML 4 es descrito con 3 DTDs (transicional, Igual que HTML 4 es descrito con 3 DTDs (transicional,

estricto y frames)estricto y frames) Asegura buen funcionamiento futuro en distintos browsers y Asegura buen funcionamiento futuro en distintos browsers y

dispositivos portatiles.dispositivos portatiles. Muy parecido a HTML 4Muy parecido a HTML 4

XMLXML Transformación a HTML mediante XSLT en el cliente o en el Transformación a HTML mediante XSLT en el cliente o en el

servidorservidor

Estructura básica de un documento Estructura básica de un documento HTMLHTML

Documento HTML tiene dos partes: Head y BodyDocumento HTML tiene dos partes: Head y Body Head contiene información general sobre el documento (título <title> Head contiene información general sobre el documento (título <title>

es lo único obligatorioes lo único obligatorio Body contiene estructura y contenido entremezcladoBody contiene estructura y contenido entremezclado Elementos de estructura dentro del bodyElementos de estructura dentro del body

Headers -> <h1>, <h2>, ... <h6>Headers -> <h1>, <h2>, ... <h6> Paragraph -> <p>Paragraph -> <p> Listas -> <ul>, <ol>, <menu>, <li>Listas -> <ul>, <ol>, <menu>, <li>

Body contiene además instrucciones orientadas a la presentación Body contiene además instrucciones orientadas a la presentación aunque en la versión 4.0 se suponen obsoletas (deprecated)aunque en la versión 4.0 se suponen obsoletas (deprecated)

En XHTMLEn XHTML Cada tag tiene que tener el correspondiente cierreCada tag tiene que tener el correspondiente cierre Se agregan algunas líneas al inicio del documentoSe agregan algunas líneas al inicio del documento Es Case SensitiveEs Case Sensitive

Etapas de Desarrollo de un Proyecto Etapas de Desarrollo de un Proyecto de sitio Webde sitio Web

Documento HTML mínimoDocumento HTML mínimo

<HTML> <HTML> <HEAD ><HEAD >

<TITLE >Título del documento < /TITLE ><TITLE >Título del documento < /TITLE >< / HEAD >< / HEAD ><BODY><BODY>

Cuerpo del documentoCuerpo del documento</BODY ></BODY >

< / HTML >< / HTML >

Algunos TagsAlgunos Tags

Párrafos y Encabezados (títulos)Párrafos y Encabezados (títulos) <p></p>, <hi></hi> i=1..6<p></p>, <hi></hi> i=1..6

Espaciamiento y PosicionamientoEspaciamiento y Posicionamiento <br> , <pre><br> , <pre>

ListasListas <ol><li></li>…<li></li></ol><ol><li></li>…<li></li></ol> <ul><li></li>…<li></li></ul><ul><li></li>…<li></li></ul> <dl><dt></dt><dd></dd></dl><dl><dt></dt><dd></dd></dl>

Div y SpanDiv y Span

<div></div> permite dividir el documento en secciones <div></div> permite dividir el documento en secciones (divisiones)(divisiones)

Es posible asignarle significado mediante atributo classEs posible asignarle significado mediante atributo class Es posible asignarle una identidad a cada elemento Es posible asignarle una identidad a cada elemento

mediante atributo idmediante atributo id <span></span> cumple un rol similar pero no introduce <span></span> cumple un rol similar pero no introduce

un fin de línea (es de tipo inline)un fin de línea (es de tipo inline) Muy útiles en combinación con hojas de estilo (mas Muy útiles en combinación con hojas de estilo (mas

adelante)adelante) <SPAN class="glossary">resolution</SPAN> and<SPAN class="glossary">resolution</SPAN> and <SPAN!class="glossary">color depth</SPAN><SPAN!class="glossary">color depth</SPAN> span.glossary {color: green}span.glossary {color: green}

Definición de LinksDefinición de Links

Conexión de un e recurso Web con otro Conexión de un e recurso Web con otro (hipertexto)(hipertexto)

<a>...</a> sirve para especificar destino<a>...</a> sirve para especificar destino <a href="filename.html">...</a><a href="filename.html">...</a> <a href="http://server/path/file.html">...</a><a href="http://server/path/file.html">...</a> <a <a

href="http://server/path/file.html#fragment">...</a>href="http://server/path/file.html#fragment">...</a> <a href="#fragment">...</a><a href="#fragment">...</a>

… … y también para definir el comienzo de un y también para definir el comienzo de un fragmento fragmento <a name=“fragment”><a name=“fragment”>

Inclusión de imágenesInclusión de imágenes

Elemento multimedia que puede ser referenciado Elemento multimedia que puede ser referenciado mediante anclas (anchors) mediante anclas (anchors)

Es posible indicar despliegue “in line”Es posible indicar despliegue “in line” Browsers incluyen decodificadores (JPEG, GIF) Browsers incluyen decodificadores (JPEG, GIF)

propiospropios Tag <img > <img /> con atributos …Tag <img > <img /> con atributos …

Src: <img src="packing_plant.gif">Src: <img src="packing_plant.gif"> Alt: Alt: Align: <img src="horiz.gif" align=middle> (top, middle, Align: <img src="horiz.gif" align=middle> (top, middle,

bottom)bottom) height, width: <img src="one-pixel.gif" width=640 height, width: <img src="one-pixel.gif" width=640

height=20>height=20>

TablasTablas

se usa principalmente como mecanismo de se usa principalmente como mecanismo de posicionamientoposicionamiento

mejor solución es usar CSS <table></table>mejor solución es usar CSS <table></table> atributos border, cellspacing y cellpading permiten atributos border, cellspacing y cellpading permiten

controlar los bordes y la separación de las celdascontrolar los bordes y la separación de las celdas atributos width y heightatributos width y height elementos <tr> y <td> describen el detalleelementos <tr> y <td> describen el detalle atributos rowspan y colspan permiten generar atributos rowspan y colspan permiten generar

casilleros mayorescasilleros mayores

Las tabla se llenan fila a filaLas tabla se llenan fila a fila

Primero se indica una fila <tr> y luego las celdas que la Primero se indica una fila <tr> y luego las celdas que la componen mediante <td> (table data) o <th> (table componen mediante <td> (table data) o <th> (table header)header)

Atributos colspan y rowspan permiten hacer que una celda Atributos colspan y rowspan permiten hacer que una celda ocupe más de un casillero tanto en sentido horizontal como ocupe más de un casillero tanto en sentido horizontal como verticalvertical

Los marcos (frames)Los marcos (frames)

Se integran oficialmente con versión 4.0Se integran oficialmente con versión 4.0 La idea es tener páginas que corresponden a una La idea es tener páginas que corresponden a una

integración de más de un documento en una sola ventanaintegración de más de un documento en una sola ventana Un ejemplo típico de uso es mantener una tabla de Un ejemplo típico de uso es mantener una tabla de

contenidos en un frame y el contenido mismo en otrocontenidos en un frame y el contenido mismo en otro Resultado se logra mediante un documento donde se define Resultado se logra mediante un documento donde se define

la estructura de frames (frameset) y varios documentos la estructura de frames (frameset) y varios documentos independientes que van a ir a parar a cada uno de los independientes que van a ir a parar a cada uno de los framesframes

El documento frameset no tiene contenido. Solamente la El documento frameset no tiene contenido. Solamente la estructura de frames y los links a los documentos que van a estructura de frames y los links a los documentos que van a componer la ventanacomponer la ventana

Especificación del frameset usa un DTD distintoEspecificación del frameset usa un DTD distinto

Ejemplo FramesEjemplo Frames

FramesetFrameset

a que frame va ela que frame va eldocumento asociado a un linkdocumento asociado a un link

Mecanismo de interacción permite cambiar el contenido de Mecanismo de interacción permite cambiar el contenido de uno más frames como efecto de acciones del usuariouno más frames como efecto de acciones del usuario

Cada frame tiene un nombre (atributo name) el cual es Cada frame tiene un nombre (atributo name) el cual es usado para especificar el frame donde va a ser mostrado un usado para especificar el frame donde va a ser mostrado un recursorecurso

Los elementos anchor (<a>) incluyen un atributo llamado Los elementos anchor (<a>) incluyen un atributo llamado target que indica el nombre del frame:target que indica el nombre del frame: <a src=“clase1.html” target=“Co Content”>C >Clase 1</a><a src=“clase1.html” target=“Co Content”>C >Clase 1</a> (documento clase1.html va al área de contenidos de la ventana)(documento clase1.html va al área de contenidos de la ventana)

Atributos adicionales:Atributos adicionales: Scrolling - si aparecen barras de scroll horizontales o verticales Scrolling - si aparecen barras de scroll horizontales o verticales

cuando sea necesariocuando sea necesario Noresize - si se prohibe al usuario cambiar el tamaño del frameNoresize - si se prohibe al usuario cambiar el tamaño del frame Marginwidth, Marginheight - grosor de los límitesMarginwidth, Marginheight - grosor de los límites

Documento XHTMLDocumento XHTML

Principales diferencia entre XHTML Principales diferencia entre XHTML y HTMLy HTML

Documento debe estar “impecablemente” bien Documento debe estar “impecablemente” bien formadoformado todos los tags con fin de tags o tags vacíostodos los tags con fin de tags o tags vacíos anidación correctaanidación correcta

Mayúsculas y minúsculas son diferentes Mayúsculas y minúsculas son diferentes los tags y atributos equivalentes a HTML deben ser los tags y atributos equivalentes a HTML deben ser

minúsculasminúsculas Todos los valores de los atributos entre comillasTodos los valores de los atributos entre comillas No hay atributos con default solo por presencia No hay atributos con default solo por presencia

" " border=“4”border=“4” Atributo id en lugar de atributo nameAtributo id en lugar de atributo name

LinksLinks

HyperText Markup Language (HTML) HyperText Markup Language (HTML) Home PageHome Page http://www.w3.org/MarkUp/http://www.w3.org/MarkUp/

TutorialesTutoriales http://www.lawebdelprogramador.comhttp://www.lawebdelprogramador.com