Clase 04 Html

556 views

Published on

Clase 04 Html

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
556
On SlideShare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Clase 04 Html

  1. 1. Clase 04: HTML Curso: Internet y Desarrollo Intranet Profesor: Jaime Valenzuela A.
  2. 2. Descripción de Contenido <ul><li>Idea base original: describir contenido y estructura y </li></ul><ul><li>no formato o presentación. </li></ul><ul><li>Berners-Lee recurrió a solución ya existente: SGML </li></ul><ul><li>Standard Generalized Markup Language (SGML) se </li></ul><ul><li>definió y estandarizó en 1986 (antes del Web) </li></ul><ul><li>Principalmente utilizado en la industria editorial pero también en otras (espacial, automotriz, semiconductores, etc) </li></ul><ul><li>Conceptualmente más similar a XML que a HTML </li></ul>
  3. 3. Lenguaje de marcas permite describir contenido estructurado <ul><li>Autor solo provee contenido y estructura </li></ul><ul><li>Presentación es independiente </li></ul><ul><ul><li>Documento => secuencia de capítulos </li></ul></ul><ul><ul><li>Capítulo => secuencia de secciones </li></ul></ul><ul><ul><li>Sección => colección de párrafos, tablas, figuras </li></ul></ul><ul><li>Estructura del documento => árbol del documento </li></ul>
  4. 4. Marcas: describe estructura del documento <ul><li>Idea general: mezclar el contenido e información de estructura en el mismo documento (markup) </li></ul><ul><li>Una secuencia especial de caracteres permite distinguir </li></ul><ul><li>contenido de información sobre él (markup) </li></ul><ul><li>Información estructural se define en términos de elementos </li></ul><ul><li>Nombres de los elementos se ponen entre delimitadores de </li></ul><ul><li>markup </li></ul><ul><ul><li>Cada ocurrencia de un elemento dentro de los delimitadores se denomina un tag </li></ul></ul><ul><ul><li>información adicional sobre el elemento => atributos del tag </li></ul></ul>
  5. 5. HTML (Hypertext Markup Language) <ul><li>Objetivos de diseño originales: </li></ul><ul><ul><li>Poder Expresivo (suficientemente general) </li></ul></ul><ul><ul><li>Accesibilidad e independencia de plataforma </li></ul></ul><ul><ul><li>Simplicidad (no se necesita ser un programador) </li></ul></ul><ul><li>Está basado en SGML el cual ya satisfacía dos de los tres objetivos. Fallaba en la simplicidad. </li></ul><ul><li>Aparece por primera vez en 1990 y desde entonces ha evolucionado en forma constante </li></ul><ul><li>Versión actual es la 4.01 </li></ul><ul><li>Browser interpreta el HTML para generar una presentación formateada de la página </li></ul>
  6. 6. Breve historia <ul><li>1990 primera versión (muy simple) </li></ul><ul><ul><li>encabezados a diferentes niveles, párrafos, listas, anclas </li></ul></ul><ul><li>1991 </li></ul><ul><ul><li>Dave Ragget diseña el HTML+ pero nunca alcanza status formal </li></ul></ul><ul><ul><li>Mosaic (NCSA) que incorpora otro set de elementos diferentes del HTML </li></ul></ul><ul><li>1994 </li></ul><ul><ul><li>se libera HTML 2.0 (definido como un DTD de SGML) </li></ul></ul><ul><ul><li>se funda Netscape, 2.0 queda obsoleto casi de inmediato </li></ul></ul><ul><ul><li>HTML de Netscape se transforma en un standard de facto </li></ul></ul><ul><ul><li>se funda el World Wide Web Consortium (W3C) y su primera recomendación </li></ul></ul><ul><ul><li>Importante es el borrador de HTML 3.0 (queda obsoleta antes de hacerse oficial) </li></ul></ul><ul><li>1997 (Enero) se libera la versión 3.2 que estabilizó un poco situación fuera de control </li></ul><ul><li>1997 (Diciembre) aparece la recomendación correspondiente a HTML 4.0 basada en 3 DTDs </li></ul><ul><ul><li>transicional - interpretar un documento HTML y no para generarlo </li></ul></ul><ul><ul><li>estricto - generar documentos HTML (no incluye los elementos de transición) </li></ul></ul><ul><ul><li>frameset - necesario para documentos que usan frames </li></ul></ul>
  7. 7. Situación Actual <ul><li>Hoy en día hay tres opciones </li></ul><ul><ul><li>HTML 4.01 </li></ul></ul><ul><ul><li>XHTML </li></ul></ul><ul><ul><ul><li>HTML descrito como aplicación XML (DTD o Schema XML) </li></ul></ul></ul><ul><ul><ul><li>Igual que HTML 4 es descrito con 3 DTDs (transicional, estricto y frames) </li></ul></ul></ul><ul><ul><ul><li>Asegura buen funcionamiento futuro en distintos browsers y dispositivos portatiles. </li></ul></ul></ul><ul><ul><ul><li>Muy parecido a HTML 4 </li></ul></ul></ul><ul><ul><li>XML </li></ul></ul><ul><ul><ul><li>Transformación a HTML mediante XSLT en el cliente o en el servidor </li></ul></ul></ul>
  8. 8. Estructura básica de un documento HTML <ul><li>Documento HTML tiene dos partes: Head y Body </li></ul><ul><li>Head contiene información general sobre el documento (título <title> es lo único obligatorio </li></ul><ul><li>Body contiene estructura y contenido entremezclado </li></ul><ul><li>Elementos de estructura dentro del body </li></ul><ul><ul><li>Headers -> <h1>, <h2>, ... <h6> </li></ul></ul><ul><ul><li>Paragraph -> <p> </li></ul></ul><ul><ul><li>Listas -> <ul>, <ol>, <menu>, <li> </li></ul></ul><ul><li>Body contiene además instrucciones orientadas a la presentación aunque en la versión 4.0 se suponen obsoletas (deprecated) </li></ul><ul><li>En XHTML </li></ul><ul><ul><li>Cada tag tiene que tener el correspondiente cierre </li></ul></ul><ul><ul><li>Se agregan algunas líneas al inicio del documento </li></ul></ul><ul><ul><li>Es Case Sensitive </li></ul></ul>
  9. 9. Etapas de Desarrollo de un Proyecto de sitio Web
  10. 10. Documento HTML mínimo <ul><li><HTML> </li></ul><ul><li><HEAD > </li></ul><ul><li><TITLE >Título del documento < /TITLE > </li></ul><ul><li>< / HEAD > </li></ul><ul><li><BODY> </li></ul><ul><li>Cuerpo del documento </li></ul><ul><li></BODY > </li></ul><ul><li>< / HTML > </li></ul>
  11. 11. Algunos Tags <ul><li>Párrafos y Encabezados (títulos) </li></ul><ul><ul><li><p></p>, <hi></hi> i=1..6 </li></ul></ul><ul><li>Espaciamiento y Posicionamiento </li></ul><ul><ul><li><br> , <pre> </li></ul></ul><ul><li>Listas </li></ul><ul><ul><li><ol><li></li>…<li></li></ol> </li></ul></ul><ul><ul><li><ul><li></li>…<li></li></ul> </li></ul></ul><ul><ul><li><dl><dt></dt><dd></dd></dl> </li></ul></ul>
  12. 12. Div y Span <ul><li><div></div> permite dividir el documento en secciones (divisiones) </li></ul><ul><li>Es posible asignarle significado mediante atributo class </li></ul><ul><li>Es posible asignarle una identidad a cada elemento mediante atributo id </li></ul><ul><li><span></span> cumple un rol similar pero no introduce un fin de línea (es de tipo inline) </li></ul><ul><li>Muy útiles en combinación con hojas de estilo (mas adelante) </li></ul><ul><ul><li><SPAN class=&quot;glossary&quot;>resolution</SPAN> and </li></ul></ul><ul><ul><li><SPAN!class=&quot;glossary&quot;>color depth</SPAN> </li></ul></ul><ul><ul><li>span.glossary {color: green} </li></ul></ul>
  13. 13. Definición de Links <ul><li>Conexión de un e recurso Web con otro (hipertexto) </li></ul><ul><li><a>...</a> sirve para especificar destino </li></ul><ul><ul><li><a href=&quot;filename.html&quot;>...</a> </li></ul></ul><ul><ul><li><a href=&quot;http://server/path/file.html&quot;>...</a> </li></ul></ul><ul><ul><li><a href=&quot;http://server/path/file.html#fragment&quot;>...</a> </li></ul></ul><ul><ul><li><a href=&quot;#fragment&quot;>...</a> </li></ul></ul><ul><li>… y también para definir el comienzo de un fragmento </li></ul><ul><ul><li><a name=“fragment”> </li></ul></ul>
  14. 14. Inclusión de imágenes <ul><li>Elemento multimedia que puede ser referenciado mediante anclas (anchors) </li></ul><ul><li>Es posible indicar despliegue “in line” </li></ul><ul><li>Browsers incluyen decodificadores (JPEG, GIF) propios </li></ul><ul><li>Tag <img > <img /> con atributos … </li></ul><ul><ul><li>Src: <img src=&quot;packing_plant.gif&quot;> </li></ul></ul><ul><ul><li>Alt: </li></ul></ul><ul><ul><li>Align: <img src=&quot;horiz.gif&quot; align=middle> (top, middle, bottom) </li></ul></ul><ul><ul><li>height, width: <img src=&quot;one-pixel.gif&quot; width=640 height=20> </li></ul></ul>
  15. 15. Tablas <ul><li>se usa principalmente como mecanismo de posicionamiento </li></ul><ul><li>mejor solución es usar CSS <table></table> </li></ul><ul><li>atributos border, cellspacing y cellpading permiten controlar los bordes y la separación de las celdas </li></ul><ul><li>atributos width y height </li></ul><ul><li>elementos <tr> y <td> describen el detalle </li></ul><ul><li>atributos rowspan y colspan permiten generar casilleros mayores </li></ul>
  16. 16. Las tabla se llenan fila a fila <ul><li>Primero se indica una fila <tr> y luego las celdas que la componen mediante <td> (table data) o <th> (table header) </li></ul><ul><li>Atributos colspan y rowspan permiten hacer que una celda ocupe más de un casillero tanto en sentido horizontal como vertical </li></ul>
  17. 17. Los marcos (frames) <ul><li>Se integran oficialmente con versión 4.0 </li></ul><ul><li>La idea es tener páginas que corresponden a una integración de más de un documento en una sola ventana </li></ul><ul><li>Un ejemplo típico de uso es mantener una tabla de contenidos en un frame y el contenido mismo en otro </li></ul><ul><li>Resultado se logra mediante un documento donde se define la estructura de frames (frameset) y varios documentos independientes que van a ir a parar a cada uno de los frames </li></ul><ul><li>El documento frameset no tiene contenido. Solamente la estructura de frames y los links a los documentos que van a componer la ventana </li></ul><ul><li>Especificación del frameset usa un DTD distinto </li></ul>
  18. 18. Ejemplo Frames
  19. 19. Frameset
  20. 20. a que frame va el documento asociado a un link <ul><li>Mecanismo de interacción permite cambiar el contenido de uno más frames como efecto de acciones del usuario </li></ul><ul><li>Cada frame tiene un nombre (atributo name) el cual es usado para especificar el frame donde va a ser mostrado un recurso </li></ul><ul><li>Los elementos anchor (<a>) incluyen un atributo llamado target que indica el nombre del frame: </li></ul><ul><ul><li><a src=“clase1.html” target=“Co Content”>C >Clase 1</a> </li></ul></ul><ul><ul><li>(documento clase1.html va al área de contenidos de la ventana) </li></ul></ul><ul><li>Atributos adicionales: </li></ul><ul><ul><li>Scrolling - si aparecen barras de scroll horizontales o verticales cuando sea necesario </li></ul></ul><ul><ul><li>Noresize - si se prohibe al usuario cambiar el tamaño del frame </li></ul></ul><ul><ul><li>Marginwidth, Marginheight - grosor de los límites </li></ul></ul>
  21. 21. Documento XHTML
  22. 22. Principales diferencia entre XHTML y HTML <ul><li>Documento debe estar “impecablemente” bien formado </li></ul><ul><ul><li>todos los tags con fin de tags o tags vacíos </li></ul></ul><ul><ul><li>anidación correcta </li></ul></ul><ul><li>Mayúsculas y minúsculas son diferentes </li></ul><ul><ul><li>los tags y atributos equivalentes a HTML deben ser minúsculas </li></ul></ul><ul><li>Todos los valores de los atributos entre comillas </li></ul><ul><li>No hay atributos con default solo por presencia </li></ul><ul><ul><li>&quot; border=“4” </li></ul></ul><ul><li>Atributo id en lugar de atributo name </li></ul>
  23. 23. Links <ul><li>HyperText Markup Language (HTML) Home Page </li></ul><ul><ul><li>http://www.w3.org/MarkUp/ </li></ul></ul><ul><li>Tutoriales </li></ul><ul><ul><li>http://www.lawebdelprogramador.com </li></ul></ul>

×