estructura de documento atributos 1. atributos básicos id, class, style, title 2. atributos para...
TRANSCRIPT
![Page 1: Estructura de Documento Atributos 1. Atributos Básicos id, class, style, title 2. Atributos para Internacionalización lang, xml:lang, dir 3. Atributos](https://reader033.vdocuments.mx/reader033/viewer/2022061612/5665b4351a28abb57c8ffbd9/html5/thumbnails/1.jpg)
![Page 2: Estructura de Documento Atributos 1. Atributos Básicos id, class, style, title 2. Atributos para Internacionalización lang, xml:lang, dir 3. Atributos](https://reader033.vdocuments.mx/reader033/viewer/2022061612/5665b4351a28abb57c8ffbd9/html5/thumbnails/2.jpg)
Estructura de Documento
![Page 3: Estructura de Documento Atributos 1. Atributos Básicos id, class, style, title 2. Atributos para Internacionalización lang, xml:lang, dir 3. Atributos](https://reader033.vdocuments.mx/reader033/viewer/2022061612/5665b4351a28abb57c8ffbd9/html5/thumbnails/3.jpg)
Atributos1. Atributos Básicos
id, class, style, title
2. Atributos para Internacionalización lang, xml:lang, dir
3. Atributos de Eventos: onclick, ondblclick, onmousedown, …
4. Atributos para los elementos que pueden Obtener el Foco.
accesskey, tabindex, onfocus, onblur
![Page 4: Estructura de Documento Atributos 1. Atributos Básicos id, class, style, title 2. Atributos para Internacionalización lang, xml:lang, dir 3. Atributos](https://reader033.vdocuments.mx/reader033/viewer/2022061612/5665b4351a28abb57c8ffbd9/html5/thumbnails/4.jpg)
2.4. Elementos HTML
![Page 5: Estructura de Documento Atributos 1. Atributos Básicos id, class, style, title 2. Atributos para Internacionalización lang, xml:lang, dir 3. Atributos](https://reader033.vdocuments.mx/reader033/viewer/2022061612/5665b4351a28abb57c8ffbd9/html5/thumbnails/5.jpg)
Elementos en línea (inline) y Elementos de bloque (block).
![Page 6: Estructura de Documento Atributos 1. Atributos Básicos id, class, style, title 2. Atributos para Internacionalización lang, xml:lang, dir 3. Atributos](https://reader033.vdocuments.mx/reader033/viewer/2022061612/5665b4351a28abb57c8ffbd9/html5/thumbnails/6.jpg)
Restricciones básicas que introduce XHTML respecto a HTML1. Las etiquetas se tienen que cerrar de acuerdo a como se abren:
Ejemplo correcto en XHTML: <p>Este es un párrafo con <a>un enlace</a></p>
2. Los nombres de las etiquetas y atributos siempre se escriben en minúsculas:
Ejemplo correcto en XHTML: <p>Este es un párrafo con <a href="http://www.google.com">un enlace</a></p>
3. El valor de los atributos siempre se encierra con comillas: Ejemplo correcto en XHTML: <p>Este es un párrafo con <a href="http://www.google.com">un enlace</a></p>
4. Los atributos no se pueden comprimir: Ejemplo correcto en XHTML: <dl compact="compact">...</dl> Este tipo de atributos en los que el nombre coincide con su valor no son muy
habituales.
5. Todas las etiquetas deben cerrarse siempre:
![Page 7: Estructura de Documento Atributos 1. Atributos Básicos id, class, style, title 2. Atributos para Internacionalización lang, xml:lang, dir 3. Atributos](https://reader033.vdocuments.mx/reader033/viewer/2022061612/5665b4351a28abb57c8ffbd9/html5/thumbnails/7.jpg)
Capítulo 3. Texto
![Page 8: Estructura de Documento Atributos 1. Atributos Básicos id, class, style, title 2. Atributos para Internacionalización lang, xml:lang, dir 3. Atributos](https://reader033.vdocuments.mx/reader033/viewer/2022061612/5665b4351a28abb57c8ffbd9/html5/thumbnails/8.jpg)
![Page 9: Estructura de Documento Atributos 1. Atributos Básicos id, class, style, title 2. Atributos para Internacionalización lang, xml:lang, dir 3. Atributos](https://reader033.vdocuments.mx/reader033/viewer/2022061612/5665b4351a28abb57c8ffbd9/html5/thumbnails/9.jpg)
3.1.1. Párrafos<p>
Este es el texto que forma el primer párrafo de la página.Los párrafos pueden ocupar varias líneas y el navegador
se encargade ajustar su longitud al tamaño de la ventana.
</p>
![Page 10: Estructura de Documento Atributos 1. Atributos Básicos id, class, style, title 2. Atributos para Internacionalización lang, xml:lang, dir 3. Atributos](https://reader033.vdocuments.mx/reader033/viewer/2022061612/5665b4351a28abb57c8ffbd9/html5/thumbnails/10.jpg)
3.1.2. Secciones
<body>
<h1>Titular de la página</h1><p>Párrafo de introducción...</p>
<h2>La primera sub-sección</h2><p>Párrafo de contenido...</p>
<h2>Otra subsección</h2><p>Más párrafos de contenido...</p>
</body>
![Page 11: Estructura de Documento Atributos 1. Atributos Básicos id, class, style, title 2. Atributos para Internacionalización lang, xml:lang, dir 3. Atributos](https://reader033.vdocuments.mx/reader033/viewer/2022061612/5665b4351a28abb57c8ffbd9/html5/thumbnails/11.jpg)
3.2. Marcado básico de texto<p> El lenguaje HTML permite marcar algunos segmentos de texto como <em>muy importantes</em> y otros segmentos como <strong>los más importantes</strong>.</p>
![Page 12: Estructura de Documento Atributos 1. Atributos Básicos id, class, style, title 2. Atributos para Internacionalización lang, xml:lang, dir 3. Atributos](https://reader033.vdocuments.mx/reader033/viewer/2022061612/5665b4351a28abb57c8ffbd9/html5/thumbnails/12.jpg)
3.3. Marcado avanzado de texto
<p> El lenguaje <acronym title="HyperText Markup Language">HTML</acronym> es estandarizado por el <acronym title="World Wide Web Consortium">W3C</acronym>.</p>
![Page 13: Estructura de Documento Atributos 1. Atributos Básicos id, class, style, title 2. Atributos para Internacionalización lang, xml:lang, dir 3. Atributos](https://reader033.vdocuments.mx/reader033/viewer/2022061612/5665b4351a28abb57c8ffbd9/html5/thumbnails/13.jpg)
3.5. Espacios en blanco y nuevas líneas
Nueva Linea: <br />
Espacios en Blanco:
![Page 14: Estructura de Documento Atributos 1. Atributos Básicos id, class, style, title 2. Atributos para Internacionalización lang, xml:lang, dir 3. Atributos](https://reader033.vdocuments.mx/reader033/viewer/2022061612/5665b4351a28abb57c8ffbd9/html5/thumbnails/14.jpg)
Los enlaces se utilizan para establecer relaciones entre dos recursos.
Aunque la mayoría de enlaces relacionan páginas web, también es posible enlazar otros recursos como imágenes, documentos y archivos.
Capítulo 4. Enlaces
![Page 15: Estructura de Documento Atributos 1. Atributos Básicos id, class, style, title 2. Atributos para Internacionalización lang, xml:lang, dir 3. Atributos](https://reader033.vdocuments.mx/reader033/viewer/2022061612/5665b4351a28abb57c8ffbd9/html5/thumbnails/15.jpg)
4.1. URLEl acrónimo URL (del inglés Uniform Resource
Locator) hace referencia al identificador único de cada recurso disponible en Internet.
Las URL son esenciales para crear los enlaces, pero también se utilizan en otros elementos HTML como las imágenes y los formularios.
La URL de un recurso tiene dos objetivos principales:Identificar de forma única a ese recursoPermitir localizar de forma eficiente ese recurso
![Page 16: Estructura de Documento Atributos 1. Atributos Básicos id, class, style, title 2. Atributos para Internacionalización lang, xml:lang, dir 3. Atributos](https://reader033.vdocuments.mx/reader033/viewer/2022061612/5665b4351a28abb57c8ffbd9/html5/thumbnails/16.jpg)
Partes de una URL
Protocolo (http://): el mecanismo que debe utilizar el navegador para acceder a ese recurso.
Servidor (www.librosweb.es): simplificando mucho su explicación, se trata del ordenador en el que se encuentra guardada la página que se quiere acceder.
Ruta (/xhtml/capitulo4.html): camino que se debe seguir, una vez que se ha llegado al servidor, para localizar el recurso específico que se quiere acceder.
http://www.librosweb.es/xhtml/capitulo4.html
![Page 17: Estructura de Documento Atributos 1. Atributos Básicos id, class, style, title 2. Atributos para Internacionalización lang, xml:lang, dir 3. Atributos](https://reader033.vdocuments.mx/reader033/viewer/2022061612/5665b4351a28abb57c8ffbd9/html5/thumbnails/17.jpg)
4.2. Enlaces relativos y absolutosLas URL absolutas incluyen todas las
partes de la URL (protocolo, servidor y ruta) por lo que no se necesita más información para obtener el recurso enlazado.http://www.ejemplo.com/ruta1/ruta2/
pagina2.html
Las URL relativas prescinden de algunas partes de las URL para hacerlas más breves./ruta1/ruta2/pagina2.html
![Page 18: Estructura de Documento Atributos 1. Atributos Básicos id, class, style, title 2. Atributos para Internacionalización lang, xml:lang, dir 3. Atributos](https://reader033.vdocuments.mx/reader033/viewer/2022061612/5665b4351a28abb57c8ffbd9/html5/thumbnails/18.jpg)
Rutas Relativas1. El origen y el destino del enlace se
encuentran en el mismo directorio
Origen http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.html
Recurso enlazado
Página web llamada pagina2.html y que se encuentra en el mismo directorio
URL absoluta http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina2.html
URL relativa pagina2.html
![Page 19: Estructura de Documento Atributos 1. Atributos Básicos id, class, style, title 2. Atributos para Internacionalización lang, xml:lang, dir 3. Atributos](https://reader033.vdocuments.mx/reader033/viewer/2022061612/5665b4351a28abb57c8ffbd9/html5/thumbnails/19.jpg)
Rutas Relativas2) El destino del enlace se encuentra cerca de su origen y en un nivel superior
Origen http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.html
Recurso enlazado
Página web llamada pagina2.html y que se encuentra en el directorio superior llamado ruta2
URL absoluta http://www.ejemplo.com/ruta1/ruta2/pagina2.html
URL relativa ../pagina2.html
![Page 20: Estructura de Documento Atributos 1. Atributos Básicos id, class, style, title 2. Atributos para Internacionalización lang, xml:lang, dir 3. Atributos](https://reader033.vdocuments.mx/reader033/viewer/2022061612/5665b4351a28abb57c8ffbd9/html5/thumbnails/20.jpg)
Rutas Relativas3) El destino del enlace se encuentra cerca de su origen y en un nivel inferior
Origen http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.html
Recurso enlazado
Página web llamada pagina2.html y que se encuentra en un directorio inferior llamado ruta4
URL absoluta http://www.ejemplo.com/ruta1/ruta2/ruta3/ruta4/pagina2.html
URL relativa ruta4/pagina2.html
![Page 21: Estructura de Documento Atributos 1. Atributos Básicos id, class, style, title 2. Atributos para Internacionalización lang, xml:lang, dir 3. Atributos](https://reader033.vdocuments.mx/reader033/viewer/2022061612/5665b4351a28abb57c8ffbd9/html5/thumbnails/21.jpg)
Rutas Relativas4) El origen y el destino del enlace se encuentran muy alejados
Origen http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.html
Recurso enlazado
Página web llamada pagina2.html y que se guarda en un directorio llamado ruta7 que se encuentra en la raíz del servidor
URL absoluta http://www.ejemplo.com/ruta7/pagina2.html
URL relativa /ruta7/pagina2.html
![Page 22: Estructura de Documento Atributos 1. Atributos Básicos id, class, style, title 2. Atributos para Internacionalización lang, xml:lang, dir 3. Atributos](https://reader033.vdocuments.mx/reader033/viewer/2022061612/5665b4351a28abb57c8ffbd9/html5/thumbnails/22.jpg)
4.3. Enlaces básicosPáginas:
<a href="http://www.google.com">Página de Google</a>
Imágenes:<a
href="http://www.ejemplo.com/imagen.jpg">Foto</a>
Archivos:<a
href="http://www.ejemplo.com/informe.pdf">Descargar informe completo [PDF]</a>
Raiz del Sitio:<a href="/">Volver al inicio</a>
![Page 23: Estructura de Documento Atributos 1. Atributos Básicos id, class, style, title 2. Atributos para Internacionalización lang, xml:lang, dir 3. Atributos](https://reader033.vdocuments.mx/reader033/viewer/2022061612/5665b4351a28abb57c8ffbd9/html5/thumbnails/23.jpg)
Capítulo 5. ListasEl lenguaje HTML define tres tipos diferentes
de listas para agrupar los elementos:
1.Listas no ordenadas (se trata de una colección simple de elementos en la que no importa su orden),
2.Listas ordenadas (similar a la anterior, pero los elementos están numerados y por tanto, importa su orden) y
3.Listas de definición (un conjunto de términos y definiciones similar a un diccionario).
![Page 24: Estructura de Documento Atributos 1. Atributos Básicos id, class, style, title 2. Atributos para Internacionalización lang, xml:lang, dir 3. Atributos](https://reader033.vdocuments.mx/reader033/viewer/2022061612/5665b4351a28abb57c8ffbd9/html5/thumbnails/24.jpg)
5.1. Listas no ordenadas
<h1>Menú</h1>
<ul><li>Inicio</li><li>Noticias</li><li>Artículos</li><li>Contacto</li>
</ul>
![Page 25: Estructura de Documento Atributos 1. Atributos Básicos id, class, style, title 2. Atributos para Internacionalización lang, xml:lang, dir 3. Atributos](https://reader033.vdocuments.mx/reader033/viewer/2022061612/5665b4351a28abb57c8ffbd9/html5/thumbnails/25.jpg)
5.2. Listas ordenadas<h1>Instrucciones</h1>
<ol><li>Enchufar
correctamente</li><li>Comprobar
conexiones</li><li>Encender el aparato</li>
</ol>
![Page 26: Estructura de Documento Atributos 1. Atributos Básicos id, class, style, title 2. Atributos para Internacionalización lang, xml:lang, dir 3. Atributos](https://reader033.vdocuments.mx/reader033/viewer/2022061612/5665b4351a28abb57c8ffbd9/html5/thumbnails/26.jpg)
5.3. Listas de definición<dl> <dt>SGML</dt> <dd>Metalenguaje para la definición de otros lenguajes de marcado </dd>
<dt>XML</dt> <dd>Lenguaje basado en SGML y que
se emplea para describir datos </dd>
<dt>RSS</dt> <dt>GML</dt> <dt>XHTML</dt> <dt>SVG</dt> <dt>XUL</dt> <dd>Lenguajes derivados de XML para determinadas aplicaciones</dd></dl>
![Page 27: Estructura de Documento Atributos 1. Atributos Básicos id, class, style, title 2. Atributos para Internacionalización lang, xml:lang, dir 3. Atributos](https://reader033.vdocuments.mx/reader033/viewer/2022061612/5665b4351a28abb57c8ffbd9/html5/thumbnails/27.jpg)
Capítulo 6. Imágenes y objetos
Etiqueta img
<img src="/imagenes/proyecto2.jpg" alt="Imagen del Proyecto 2“ longdesc="/mas_informacion.html"
/>