SlideShare una empresa de Scribd logo

Curso de XHTML y CSS3

•
•
Julián Fernández Ortiz
Julián Fernández Ortiz

Curso impartido desde la asociación IEEE Student Branch of Granada por Rubén Martín y Julián Fernández (yo). La primera parte hace referencia al lenguaje XHTML y la segunda a las hojas de estilos en CSS3

Internet
1 de 102
Descargar para leer sin conexión
CONCEPTOS GENERALES XHTML Taller de XHTML y CSS3 Nivel B´asico - Parte I Julian Fern´andez Ortiz Vicepresidente de IEEE Student Branch of Granada Grado en Ingenier´ıa Electr´onica Industrial julian.fernandez.es@ieee.org Rub´en Mart´ın Moreno Vocal en IEEE Student Branch of Granada Grado en Estad´ıstica ruben.martinmoreno.es@ieee.org Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Licencia Este documento esta realizado bajo licencia Creative Commons “Reconocimiento-CompartirIgual 3.0 Espa˜na” . Fuente: Curso desarrollado por IEEE Student Branch of Granada Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML ´Indice 1 CONCEPTOS GENERALES Estructura de un Sitio Web Los Est´andares Web - W3C 2 XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de un Sitio Web Los Est´andares Web - W3C ´Indice 1 CONCEPTOS GENERALES Estructura de un Sitio Web Los Est´andares Web - W3C 2 XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de un Sitio Web Los Est´andares Web - W3C ´Indice 1 CONCEPTOS GENERALES Estructura de un Sitio Web Los Est´andares Web - W3C 2 XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de un Sitio Web Los Est´andares Web - W3C Estructura de ´Arbol Existe una p´agina principal desde la que puedes llegar a otras p´aginas de la web Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de un Sitio Web Los Est´andares Web - W3C Estructura en Listas Las p´aginas est´an enlazadas con sus contiguas Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de un Sitio Web Los Est´andares Web - W3C Estructura Mixta Aprovecha las dos anteriores Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de un Sitio Web Los Est´andares Web - W3C Estructura en Red P´aginas totalmente interconectadas Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de un Sitio Web Los Est´andares Web - W3C ´Indice 1 CONCEPTOS GENERALES Estructura de un Sitio Web Los Est´andares Web - W3C 2 XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de un Sitio Web Los Est´andares Web - W3C Se exige que se usen los elementos Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de un Sitio Web Los Est´andares Web - W3C Se exige que se usen los elementos DOCTYPE HEAD BODY HTML Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de un Sitio Web Los Est´andares Web - W3C Se exige que se usen los elementos DOCTYPE HEAD BODY HTML Se exige que se cierren todas las etiquetas Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de un Sitio Web Los Est´andares Web - W3C Se exige que se usen los elementos DOCTYPE HEAD BODY HTML Se exige que se cierren todas las etiquetas Se exige el uso de comillas en torno a valores de atributos Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de un Sitio Web Los Est´andares Web - W3C Se exige que se usen los elementos DOCTYPE HEAD BODY HTML Se exige que se cierren todas las etiquetas Se exige el uso de comillas en torno a valores de atributos Todos los elementos deben estar en min´uscula Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de un Sitio Web Los Est´andares Web - W3C Se exige que se usen los elementos DOCTYPE HEAD BODY HTML Se exige que se cierren todas las etiquetas Se exige el uso de comillas en torno a valores de atributos Todos los elementos deben estar en min´uscula Todos los valores han de indicarse de forma expl´ıcita Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de un Sitio Web Los Est´andares Web - W3C W3C https://validator.w3.org/#validate_{}by_{}input Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de un Sitio Web Los Est´andares Web - W3C W3C Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia ´Indice 1 CONCEPTOS GENERALES Estructura de un Sitio Web Los Est´andares Web - W3C 2 XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia ´Indice 1 CONCEPTOS GENERALES Estructura de un Sitio Web Los Est´andares Web - W3C 2 XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Definici´on del Documento Declaraci´on DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Etiqueta HTML <html xmlns="http://www.w3.org/1999/xhtml"> ... </html> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Cabecera Incluye: T´ıtulo de la p´agina Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Cabecera Incluye: T´ıtulo de la p´agina Informaci´on importante para los motores de b´usqueda (Etiquetas) Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Cabecera Incluye: T´ıtulo de la p´agina Informaci´on importante para los motores de b´usqueda (Etiquetas) Ubicaci´on Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Cabecera Incluye: T´ıtulo de la p´agina Informaci´on importante para los motores de b´usqueda (Etiquetas) Ubicaci´on Hojas de estilos (CSS) Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Cabecera Incluye: T´ıtulo de la p´agina Informaci´on importante para los motores de b´usqueda (Etiquetas) Ubicaci´on Hojas de estilos (CSS) Scripts Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Cabecera Incluye: T´ıtulo de la p´agina Informaci´on importante para los motores de b´usqueda (Etiquetas) Ubicaci´on Hojas de estilos (CSS) Scripts <head> <title>CURSO XHTML Y CSS</title> </head> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Cabecera Incluye: T´ıtulo de la p´agina Informaci´on importante para los motores de b´usqueda (Etiquetas) Ubicaci´on Hojas de estilos (CSS) Scripts <head> <title>CURSO XHTML Y CSS</title> </head> IMPORTANTE La declaraci´on de un t´ıtulo para la p´agina es OBLIGATORIA Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Cabecera METADATOS m´as usuales <meta charset="UTF-8"> <meta name="description" content="CURSO XHTML Y CSS"> <meta name="keywords" content="HTML,CSS,XML,XHTML"> <meta name="author" content="Juli´an Fern´andez; Rub´en Mart´ın"> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Cabecera <head> <title>CURSO XHTML Y CSS</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Language" content="Espa~nol" /> <link href="style.css" rel="stylesheet" type="text/css" /> <script><!--SCRIPT--></script> </head> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Cuerpo Contenido de la web Se incluye el texto, im´agenes y v´ıdeos que queremos que se muestren en la web <body> <!--Contenido de tu P´agina--> </body> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia En Resumen... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia En Resumen... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title><!--T´ıtulo en la Pesta~na de B´usqueda--></title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Language" content="Espa~nol" /> <link href="../style/style.css" rel="stylesheet" type="text/css" /> <!--SCRIPTS--> </head> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia En Resumen... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title><!--T´ıtulo en la Pesta~na de B´usqueda--></title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Language" content="Espa~nol" /> <link href="../style/style.css" rel="stylesheet" type="text/css" /> <!--SCRIPTS--> </head> <body> <!--Contenido de tu P´agina--> </body> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia En Resumen... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title><!--T´ıtulo en la Pesta~na de B´usqueda--></title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Language" content="Espa~nol" /> <link href="../style/style.css" rel="stylesheet" type="text/css" /> <!--SCRIPTS--> </head> <body> <!--Contenido de tu P´agina--> </body> </html> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia ´Indice 1 CONCEPTOS GENERALES Estructura de un Sitio Web Los Est´andares Web - W3C 2 XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Tipos de etiquetas m´as utilizadas (e imprescindibles) Encabezados P´arrafo Tipolog´ıa de letra Script C´odigo Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Encabezados Son jer´arquicos entre s´ı <h1>...</h1> <h2>...</h2> <h3>...</h3> <h4>...</h4> <h5>...</h5> <h6>...</h6> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Encabezados Son jer´arquicos entre s´ı <h1>...</h1> <h2>...</h2> <h3>...</h3> <h4>...</h4> <h5>...</h5> <h6>...</h6> RECUERDA Cuanto m´as peque˜no es el n´umero m´as grande la letra Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia P´arrafos Todo el texto debe ir encerrado en p´arrafos <p>...</p> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia P´arrafos Todo el texto debe ir encerrado en p´arrafos <p>...</p> RECUERDA Es bueno separar cada p´arrafo de manera independiente para que sea m´as f´acil el uso de identificadores Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia P´arrafos <abbr>...</abbr> <b>...</b> <i>...</i> <em>...</em> <u>...</u> <s>...</s> <sub>...</sub> <sup>...</sup> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia P´arrafos <abbr>...</abbr> <b>...</b> <i>...</i> <em>...</em> <u>...</u> <s>...</s> <sub>...</sub> <sup>...</sup> Abreviatura Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia P´arrafos <abbr>...</abbr> <b>...</b> <i>...</i> <em>...</em> <u>...</u> <s>...</s> <sub>...</sub> <sup>...</sup> Abreviatura Negrita Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia P´arrafos <abbr>...</abbr> <b>...</b> <i>...</i> <em>...</em> <u>...</u> <s>...</s> <sub>...</sub> <sup>...</sup> Abreviatura Negrita Cursiva Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia P´arrafos <abbr>...</abbr> <b>...</b> <i>...</i> <em>...</em> <u>...</u> <s>...</s> <sub>...</sub> <sup>...</sup> Abreviatura Negrita Cursiva Enfatizado Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia P´arrafos <abbr>...</abbr> <b>...</b> <i>...</i> <em>...</em> <u>...</u> <s>...</s> <sub>...</sub> <sup>...</sup> Abreviatura Negrita Cursiva Enfatizado Subrayado Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia P´arrafos <abbr>...</abbr> <b>...</b> <i>...</i> <em>...</em> <u>...</u> <s>...</s> <sub>...</sub> <sup>...</sup> Abreviatura Negrita Cursiva Enfatizado Subrayado Tachado Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia P´arrafos <abbr>...</abbr> <b>...</b> <i>...</i> <em>...</em> <u>...</u> <s>...</s> <sub>...</sub> <sup>...</sup> Abreviatura Negrita Cursiva Enfatizado Subrayado Tachado Sub´ındice1 Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia P´arrafos <abbr>...</abbr> <b>...</b> <i>...</i> <em>...</em> <u>...</u> <s>...</s> <sub>...</sub> <sup>...</sup> Abreviatura Negrita Cursiva Enfatizado Subrayado Tachado Sub´ındice1 Super´ındice1 Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia P´arrafos Escribir c´odigo <code>...</code> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia ´Indice 1 CONCEPTOS GENERALES Estructura de un Sitio Web Los Est´andares Web - W3C 2 XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Hiperv´ınculos Los enlaces nos permiten hacer relaciones internas (a secciones) o externas (a otra web o contenido) en nuestra p´agina Estructura B´asica <a href="#">...</a> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Relaciones Internas Para crear nuestro punto de llegada deberemos aplicar <a name="id">...</a> al texto deseado Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Relaciones Internas Para crear nuestro punto de llegada deberemos aplicar <a name="id">...</a> al texto deseado Y para el punto de partida aplicamos <a href="#id">...</a> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Relaciones Externas Pueden ser locales o estar alojadas en internet Enlazan otras webs o archivos Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Relaciones Externas Internet - WEB <a href="http://www.google.com">Google</a> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Relaciones Externas Internet - WEB <a href="http://www.google.com">Google</a> Internet - PDF <a href="http://www.ejemplo.com/informe.pdf">Ejemplo [PDF]</a> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Relaciones Externas Internet - WEB <a href="http://www.google.com">Google</a> Internet - PDF <a href="http://www.ejemplo.com/informe.pdf">Ejemplo [PDF]</a> Local - WORD <a href="/informe.doc">Ejemplo [DOC]</a> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Relaciones Externas Internet - WEB <a href="http://www.google.com">Google</a> Internet - PDF <a href="http://www.ejemplo.com/informe.pdf">Ejemplo [PDF]</a> Local - WORD <a href="/informe.doc">Ejemplo [DOC]</a> Local - JPG (En Nueva Pesta˜na) <a href="../imagenes/fondo_escritorio.jpg" target="_blank"> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Relaciones Externas - emails email en Nueva Pesta˜na <a href="mailto:ieee@ieee.org" target="_blank">Env´ıanos un email</a> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Relaciones Externas - emails email en Nueva Pesta˜na <a href="mailto:ieee@ieee.org" target="_blank">Env´ıanos un email</a> email en Nueva Pesta˜na + Asunto <a href="mailto:ieee@ieee.org?subject=ASUNTO" target="_blank"> Env´ıanos un email</a> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Relaciones Externas - emails email en Nueva Pesta˜na <a href="mailto:ieee@ieee.org" target="_blank">Env´ıanos un email</a> email en Nueva Pesta˜na + Asunto <a href="mailto:ieee@ieee.org?subject=ASUNTO" target="_blank"> Env´ıanos un email</a> email en Nueva Pesta˜na + Texto <a href="mailto:ieee@ieee.org?body=TEXTO" target="_blank"> Env´ıanos un email</a> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Relaciones Externas - emails email en Nueva Pesta˜na <a href="mailto:ieee@ieee.org" target="_blank">Env´ıanos un email</a> email en Nueva Pesta˜na + Asunto <a href="mailto:ieee@ieee.org?subject=ASUNTO" target="_blank"> Env´ıanos un email</a> email en Nueva Pesta˜na + Texto <a href="mailto:ieee@ieee.org?body=TEXTO" target="_blank"> Env´ıanos un email</a> email en Nueva Pesta˜na + Asunto + Texto <a href="mailto:ieee@ieee.org?subject=ASUNTO&body=TEXTO" target="_blank"> Env´ıanos un email</a> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia ´Indice 1 CONCEPTOS GENERALES Estructura de un Sitio Web Los Est´andares Web - W3C 2 XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Listas Existen 2 tipos Ordenadas Desordenadas Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Listas Existen 2 tipos Ordenadas Desordenadas RECUERDA Las listas se pueden anidar, ya sean del mismo o de distinto tipo Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Listas Ordenadas <ol> <li>Padre <ol> <li>Hijo1</li> <li>Hijo2</li> <li>Hijo3 <ol> <li>Nieto</li> </ol></li> </ol></li> </ol> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Listas Ordenadas <ol> <li>Padre <ol> <li>Hijo1</li> <li>Hijo2</li> <li>Hijo3 <ol> <li>Nieto</li> </ol></li> </ol></li> </ol> 1 Padre 1 Hijo1 2 Hijo2 3 Hijo3 1 Nieto Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Listas Desordenadas <ul> <li>Padre <ul> <li>Hijo1</li> <li>Hijo2</li> <li>Hijo3 <ul> <li>Nieto</li> </ul></li> </ul></li> </ul> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Listas Desordenadas <ul> <li>Padre <ul> <li>Hijo1</li> <li>Hijo2</li> <li>Hijo3 <ul> <li>Nieto</li> </ul></li> </ul></li> </ul> Padre Hijo1 Hijo2 Hijo3 Nieto Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Listas Desordenadas <ul> <li>Padre <ul> <li>Hijo1</li> <li>Hijo2</li> <li>Hijo3 <ul> <li>Nieto</li> </ul></li> </ul></li> </ul> Padre Hijo1 Hijo2 Hijo3 Nieto RECUERDA Los listas desordenadas son las m´as utilizadas a la hora de crear men´us Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Tablas Etiquetas para construir una tabla Obligatorias <table>...</table> <tr>...</tr> <td>...</td> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Tablas Etiquetas para construir una tabla Obligatorias <table>...</table> <tr>...</tr> <td>...</td> Opcionales <th>...</th> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Tablas <table> <tr> <td><strong>XHTML</strong></td> <td><strong>CSS</strong></td> </tr> <tr> <td>Contenido</td> <td>Forma</td> </tr> <tr> <td>Texto</td> <td>Formato</td> </tr> </table> XHTML CSS Contenido Forma Texto Formato Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Tablas <table> <tr> <th>XHTML</th> <th>CSS</th> </tr> <tr> <td>Contenido</td> <td>Forma</td> </tr> <tr> <td>Texto</td> <td>Formato</td> </tr> </table> XHTML CSS Contenido Forma Texto Formato Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia ´Indice 1 CONCEPTOS GENERALES Estructura de un Sitio Web Los Est´andares Web - W3C 2 XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Etiquetas Tipos de etiquetas para insertar contenido externo en la web <img>...</img> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Etiquetas Tipos de etiquetas para insertar contenido externo en la web <img>...</img> <audio>...</audio> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Etiquetas Tipos de etiquetas para insertar contenido externo en la web <img>...</img> <audio>...</audio> <video>...</video> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Im´agenes Atributos ´utiles a la hora de insertar im´agenes src=“#” Indica la URL para encontrar la imagen Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Im´agenes Atributos ´utiles a la hora de insertar im´agenes src=“#” Indica la URL para encontrar la imagen name=“#” Nombre de la imagen Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Im´agenes Atributos ´utiles a la hora de insertar im´agenes src=“#” Indica la URL para encontrar la imagen name=“#” Nombre de la imagen alt=“#” Peque˜na descripci´on de la imagen Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Im´agenes Atributos ´utiles a la hora de insertar im´agenes src=“#” Indica la URL para encontrar la imagen name=“#” Nombre de la imagen alt=“#” Peque˜na descripci´on de la imagen longdesc=“#” Indica una URL donde encontrar una descripci´on m´as detallada de la imagen Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Im´agenes Atributos ´utiles a la hora de insertar im´agenes src=“#” Indica la URL para encontrar la imagen name=“#” Nombre de la imagen alt=“#” Peque˜na descripci´on de la imagen longdesc=“#” Indica una URL donde encontrar una descripci´on m´as detallada de la imagen height=“#” Altura obligada de la imagen Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Im´agenes Atributos ´utiles a la hora de insertar im´agenes src=“#” Indica la URL para encontrar la imagen name=“#” Nombre de la imagen alt=“#” Peque˜na descripci´on de la imagen longdesc=“#” Indica una URL donde encontrar una descripci´on m´as detallada de la imagen height=“#” Altura obligada de la imagen width=“#” Anchura obligada de la imagen Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Audios Atributos ´utiles a la hora de insertar audio src=“#” Indica la URL para encontrar el archivo Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Audios Atributos ´utiles a la hora de insertar audio src=“#” Indica la URL para encontrar el archivo type=“#” Indica el tipo de audios: mp3, mpeg, ogg... Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Audios Atributos ´utiles a la hora de insertar audio src=“#” Indica la URL para encontrar el archivo type=“#” Indica el tipo de audios: mp3, mpeg, ogg... autoplay=“#” Indica si se debe reproducir una vez que el audio se ha cargado (autom´aticamente) Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Audios Atributos ´utiles a la hora de insertar audio src=“#” Indica la URL para encontrar el archivo type=“#” Indica el tipo de audios: mp3, mpeg, ogg... autoplay=“#” Indica si se debe reproducir una vez que el audio se ha cargado (autom´aticamente) preload=“#” Especifica si se debe precargar el audio antes de reproducirlo Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Audios Atributos ´utiles a la hora de insertar audio src=“#” Indica la URL para encontrar el archivo type=“#” Indica el tipo de audios: mp3, mpeg, ogg... autoplay=“#” Indica si se debe reproducir una vez que el audio se ha cargado (autom´aticamente) preload=“#” Especifica si se debe precargar el audio antes de reproducirlo controls=“#” Indica los controles que se muestran en pantalla: play, pause... Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Audios Atributos ´utiles a la hora de insertar audio src=“#” Indica la URL para encontrar el archivo type=“#” Indica el tipo de audios: mp3, mpeg, ogg... autoplay=“#” Indica si se debe reproducir una vez que el audio se ha cargado (autom´aticamente) preload=“#” Especifica si se debe precargar el audio antes de reproducirlo controls=“#” Indica los controles que se muestran en pantalla: play, pause... loop=“#” Indica si una vez que termine la pista se debe volver a reproducir Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia V´ıdeo Atributos ´utiles a la hora de insertar v´ıdeos src=“#” Indica la URL para encontrar el archivo Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia V´ıdeo Atributos ´utiles a la hora de insertar v´ıdeos src=“#” Indica la URL para encontrar el archivo type=“#” Indica el tipo de v´ıdeo: mp4, mpeg, ogg... Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia V´ıdeo Atributos ´utiles a la hora de insertar v´ıdeos src=“#” Indica la URL para encontrar el archivo type=“#” Indica el tipo de v´ıdeo: mp4, mpeg, ogg... autoplay=“#” Indica si se debe reproducir el v´ıdeo se ha cargado (autom´aticamente) Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia V´ıdeo Atributos ´utiles a la hora de insertar v´ıdeos src=“#” Indica la URL para encontrar el archivo type=“#” Indica el tipo de v´ıdeo: mp4, mpeg, ogg... autoplay=“#” Indica si se debe reproducir el v´ıdeo se ha cargado (autom´aticamente) preload=“#” Especifica si se debe precargar el v´ıdeo Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia V´ıdeo Atributos ´utiles a la hora de insertar v´ıdeos src=“#” Indica la URL para encontrar el archivo type=“#” Indica el tipo de v´ıdeo: mp4, mpeg, ogg... autoplay=“#” Indica si se debe reproducir el v´ıdeo se ha cargado (autom´aticamente) preload=“#” Especifica si se debe precargar el v´ıdeo controls=“#” Indica los controles que se muestran en pantalla: play, pause, mute... Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia V´ıdeo Atributos ´utiles a la hora de insertar v´ıdeos src=“#” Indica la URL para encontrar el archivo type=“#” Indica el tipo de v´ıdeo: mp4, mpeg, ogg... autoplay=“#” Indica si se debe reproducir el v´ıdeo se ha cargado (autom´aticamente) preload=“#” Especifica si se debe precargar el v´ıdeo controls=“#” Indica los controles que se muestran en pantalla: play, pause, mute... loop=“#” Indica si una vez que termine se debe volver a reproducir Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia V´ıdeo muted=“#” Indica si el v´ıdeo debe reproducirse sin audio por defecto Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia V´ıdeo muted=“#” Indica si el v´ıdeo debe reproducirse sin audio por defecto poster=“#”[URL] Indica una imagen que mostrar hasta que el v´ıdeo se reproduzca Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia V´ıdeo muted=“#” Indica si el v´ıdeo debe reproducirse sin audio por defecto poster=“#”[URL] Indica una imagen que mostrar hasta que el v´ıdeo se reproduzca height=“#” Altura obligada del v´ıdeo Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia V´ıdeo muted=“#” Indica si el v´ıdeo debe reproducirse sin audio por defecto poster=“#”[URL] Indica una imagen que mostrar hasta que el v´ıdeo se reproduzca height=“#” Altura obligada del v´ıdeo width=“#” Anchura obligada del v´ıdeo Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS

Recomendados

Taller XHTML y CSS3 - CSS3
Taller XHTML y CSS3 - CSS3Taller XHTML y CSS3 - CSS3
Taller XHTML y CSS3 - CSS3Rubén Martín Moreno (鲁本)
 
entorno de Word
entorno de Word entorno de Word
entorno de Word Santa Rumalda Lopez Medina
 
Ht ml exposicion_2011
Ht ml exposicion_2011Ht ml exposicion_2011
Ht ml exposicion_2011Claretiano
 
Manualrapido css
Manualrapido cssManualrapido css
Manualrapido cssjuan flores méndez
 
HTML
HTMLHTML
HTMLYamil Lambert
 
Hojas de estilo
Hojas de estiloHojas de estilo
Hojas de estiloRodrigo Cabrera
 
Html, Css y JavaScript
Html, Css y JavaScriptHtml, Css y JavaScript
Html, Css y JavaScriptLiz Nicol Cardenas Jauregui
 
Diseño de páginas Web con HTML
Diseño de páginas Web con HTMLDiseño de páginas Web con HTML
Diseño de páginas Web con HTMLJavier
 

Recomendados

Taller XHTML y CSS3 - CSS3
Taller XHTML y CSS3 - CSS3Taller XHTML y CSS3 - CSS3
Taller XHTML y CSS3 - CSS3Rubén Martín Moreno (鲁本)
 
entorno de Word
entorno de Word entorno de Word
entorno de Word Santa Rumalda Lopez Medina
 
Ht ml exposicion_2011
Ht ml exposicion_2011Ht ml exposicion_2011
Ht ml exposicion_2011Claretiano
 
Manualrapido css
Manualrapido cssManualrapido css
Manualrapido cssjuan flores méndez
 
HTML
HTMLHTML
HTMLYamil Lambert
 
Hojas de estilo
Hojas de estiloHojas de estilo
Hojas de estiloRodrigo Cabrera
 
Html, Css y JavaScript
Html, Css y JavaScriptHtml, Css y JavaScript
Html, Css y JavaScriptLiz Nicol Cardenas Jauregui
 
Diseño de páginas Web con HTML
Diseño de páginas Web con HTMLDiseño de páginas Web con HTML
Diseño de páginas Web con HTMLJavier
 
HTML 2011
HTML 2011HTML 2011
HTML 2011David Caipa Mamani
 
Presentación
PresentaciónPresentación
Presentaciónaynosk6
 
Conociendo mas sobre HTLM
Conociendo mas sobre HTLMConociendo mas sobre HTLM
Conociendo mas sobre HTLMTatiiana Benavides
 
Html guia 1
Html guia 1 Html guia 1
Html guia 1 Maria Saavedra Grimaldo
 
.Como insertar codigos de tablas en html
.Como insertar codigos de tablas en html.Como insertar codigos de tablas en html
.Como insertar codigos de tablas en htmlSñrta Barahona
 
Etiquetas semánticas HTML
Etiquetas semánticas HTMLEtiquetas semánticas HTML
Etiquetas semánticas HTMLiConstruye
 
Barra de diseño de página de word
Barra de diseño de página de wordBarra de diseño de página de word
Barra de diseño de página de wordM Velázquez Lavastida
 
¿Qué es el lenguaje HTML?
¿Qué es el lenguaje HTML?¿Qué es el lenguaje HTML?
¿Qué es el lenguaje HTML?nereasanchezz
 
Curso CSS Avanzado
Curso CSS AvanzadoCurso CSS Avanzado
Curso CSS AvanzadoIrontec
 
Trabajo normas apa
Trabajo normas apaTrabajo normas apa
Trabajo normas apagonzalezvalentina438
 
Te amo leydi
Te amo leydiTe amo leydi
Te amo leydiflor951
 
Wilmer andino
Wilmer andinoWilmer andino
Wilmer andinowilmerandinmo
 
Diapo03
Diapo03Diapo03
Diapo03Instituto Tenológico de Mexicali
 
Herramientas de WORD
Herramientas de WORD Herramientas de WORD
Herramientas de WORD Emiily Jurado
 
iconos de word
iconos de wordiconos de word
iconos de wordJacqueline Antépara
 
HTML y CSS
HTML y CSSHTML y CSS
HTML y CSSDinamiclerning
 
Curso HTML y CSS, parte 2
Curso HTML y CSS, parte 2Curso HTML y CSS, parte 2
Curso HTML y CSS, parte 2Sergio Nouvel Castro
 
Duffy_Robert_Resume 2016
Duffy_Robert_Resume 2016Duffy_Robert_Resume 2016
Duffy_Robert_Resume 2016Robert Duffy
 
India opinions
India opinionsIndia opinions
India opinionsItm Institutions
 
Dynamics 365: Empowering Canada's Oil & Gas Industry
Dynamics 365: Empowering Canada's Oil & Gas IndustryDynamics 365: Empowering Canada's Oil & Gas Industry
Dynamics 365: Empowering Canada's Oil & Gas Industryvinair
 
Edital pros
Edital prosEdital pros
Edital prosPablo Henrique
 
Appointment - JP(Qualified)
Appointment - JP(Qualified)Appointment - JP(Qualified)
Appointment - JP(Qualified)Wayne Pitt JP(Qual)
 

Más contenido relacionado

La actualidad más candente

Presentación
PresentaciónPresentación
Presentaciónaynosk6
 
.Como insertar codigos de tablas en html
.Como insertar codigos de tablas en html.Como insertar codigos de tablas en html
.Como insertar codigos de tablas en htmlSñrta Barahona
 
Etiquetas semánticas HTML
Etiquetas semánticas HTMLEtiquetas semánticas HTML
Etiquetas semánticas HTMLiConstruye
 
¿Qué es el lenguaje HTML?
¿Qué es el lenguaje HTML?¿Qué es el lenguaje HTML?
¿Qué es el lenguaje HTML?nereasanchezz
 
Curso CSS Avanzado
Curso CSS AvanzadoCurso CSS Avanzado
Curso CSS AvanzadoIrontec
 
Te amo leydi
Te amo leydiTe amo leydi
Te amo leydiflor951
 
Herramientas de WORD
Herramientas de WORD Herramientas de WORD
Herramientas de WORD Emiily Jurado
 

La actualidad más candente (17)

HTML 2011
HTML 2011HTML 2011
HTML 2011
 
Presentación
PresentaciónPresentación
Presentación
 
Conociendo mas sobre HTLM
Conociendo mas sobre HTLMConociendo mas sobre HTLM
Conociendo mas sobre HTLM
 
Html guia 1
Html guia 1 Html guia 1
Html guia 1
 
.Como insertar codigos de tablas en html
.Como insertar codigos de tablas en html.Como insertar codigos de tablas en html
.Como insertar codigos de tablas en html
 
Etiquetas semánticas HTML
Etiquetas semánticas HTMLEtiquetas semánticas HTML
Etiquetas semánticas HTML
 
Barra de diseño de página de word
Barra de diseño de página de wordBarra de diseño de página de word
Barra de diseño de página de word
 
¿Qué es el lenguaje HTML?
¿Qué es el lenguaje HTML?¿Qué es el lenguaje HTML?
¿Qué es el lenguaje HTML?
 
Curso CSS Avanzado
Curso CSS AvanzadoCurso CSS Avanzado
Curso CSS Avanzado
 
Trabajo normas apa
Trabajo normas apaTrabajo normas apa
Trabajo normas apa
 
Te amo leydi
Te amo leydiTe amo leydi
Te amo leydi
 
Wilmer andino
Wilmer andinoWilmer andino
Wilmer andino
 
Diapo03
Diapo03Diapo03
Diapo03
 
Herramientas de WORD
Herramientas de WORD Herramientas de WORD
Herramientas de WORD
 
iconos de word
iconos de wordiconos de word
iconos de word
 
HTML y CSS
HTML y CSSHTML y CSS
HTML y CSS
 
Curso HTML y CSS, parte 2
Curso HTML y CSS, parte 2Curso HTML y CSS, parte 2
Curso HTML y CSS, parte 2
 

Destacado

Duffy_Robert_Resume 2016
Duffy_Robert_Resume 2016Duffy_Robert_Resume 2016
Duffy_Robert_Resume 2016Robert Duffy
 
Dynamics 365: Empowering Canada's Oil & Gas Industry
Dynamics 365: Empowering Canada's Oil & Gas IndustryDynamics 365: Empowering Canada's Oil & Gas Industry
Dynamics 365: Empowering Canada's Oil & Gas Industryvinair
 
Tim Provide First Aid
Tim Provide First AidTim Provide First Aid
Tim Provide First AidTim Cooke
 
Red zig bee para la monitorización de variables atmosféricas y meteorológicas
Red zig bee para la monitorización de variables atmosféricas y meteorológicasRed zig bee para la monitorización de variables atmosféricas y meteorológicas
Red zig bee para la monitorización de variables atmosféricas y meteorológicasJulián Fernández Ortiz
 
Llistat sol·licituds proteccions TOV_2016_3
Llistat sol·licituds proteccions TOV_2016_3Llistat sol·licituds proteccions TOV_2016_3
Llistat sol·licituds proteccions TOV_2016_3Carles Folch Castell
 
Embedding the Principles of CSR from Responsibility to Sustainability
Embedding the Principles of CSR from Responsibility to SustainabilityEmbedding the Principles of CSR from Responsibility to Sustainability
Embedding the Principles of CSR from Responsibility to SustainabilityGlobalHunt Foundation
 
Corporate Social Responsibility
Corporate Social ResponsibilityCorporate Social Responsibility
Corporate Social ResponsibilityBaibhav Agrawal
 
Cálculo del Punto Muerto
Cálculo del Punto MuertoCálculo del Punto Muerto
Cálculo del Punto MuertoPablo MC
 
Education at a Glance 2015 - Global Launch
Education at a Glance 2015 - Global LaunchEducation at a Glance 2015 - Global Launch
Education at a Glance 2015 - Global LaunchEduSkills OECD
 

Destacado (19)

Duffy_Robert_Resume 2016
Duffy_Robert_Resume 2016Duffy_Robert_Resume 2016
Duffy_Robert_Resume 2016
 
India opinions
India opinionsIndia opinions
India opinions
 
Dynamics 365: Empowering Canada's Oil & Gas Industry
Dynamics 365: Empowering Canada's Oil & Gas IndustryDynamics 365: Empowering Canada's Oil & Gas Industry
Dynamics 365: Empowering Canada's Oil & Gas Industry
 
Edital pros
Edital prosEdital pros
Edital pros
 
Appointment - JP(Qualified)
Appointment - JP(Qualified)Appointment - JP(Qualified)
Appointment - JP(Qualified)
 
Brochure_417
Brochure_417Brochure_417
Brochure_417
 
wayne richardson cv 2
wayne richardson cv 2wayne richardson cv 2
wayne richardson cv 2
 
Tim Provide First Aid
Tim Provide First AidTim Provide First Aid
Tim Provide First Aid
 
Red zig bee para la monitorización de variables atmosféricas y meteorológicas
Red zig bee para la monitorización de variables atmosféricas y meteorológicasRed zig bee para la monitorización de variables atmosféricas y meteorológicas
Red zig bee para la monitorización de variables atmosféricas y meteorológicas
 
Llistat sol·licituds proteccions TOV_2016_3
Llistat sol·licituds proteccions TOV_2016_3Llistat sol·licituds proteccions TOV_2016_3
Llistat sol·licituds proteccions TOV_2016_3
 
Six Tweaks
Six TweaksSix Tweaks
Six Tweaks
 
Llistat proteccions TOV_2015_7
Llistat proteccions TOV_2015_7Llistat proteccions TOV_2015_7
Llistat proteccions TOV_2015_7
 
Llistat proteccions TOV_2015_6
Llistat proteccions TOV_2015_6Llistat proteccions TOV_2015_6
Llistat proteccions TOV_2015_6
 
Embedding the Principles of CSR from Responsibility to Sustainability
Embedding the Principles of CSR from Responsibility to SustainabilityEmbedding the Principles of CSR from Responsibility to Sustainability
Embedding the Principles of CSR from Responsibility to Sustainability
 
Csr
CsrCsr
Csr
 
No silver bullet
No silver bulletNo silver bullet
No silver bullet
 
Corporate Social Responsibility
Corporate Social ResponsibilityCorporate Social Responsibility
Corporate Social Responsibility
 
Cálculo del Punto Muerto
Cálculo del Punto MuertoCálculo del Punto Muerto
Cálculo del Punto Muerto
 
Education at a Glance 2015 - Global Launch
Education at a Glance 2015 - Global LaunchEducation at a Glance 2015 - Global Launch
Education at a Glance 2015 - Global Launch
 

Similar a Curso de XHTML y CSS3

Presentación de html, css y javascript.
Presentación de html, css y javascript.Presentación de html, css y javascript.
Presentación de html, css y javascript.CeteliInmaculada
 
Seminario - Diseño básico con hojas de estilos en cascada: CSS
Seminario - Diseño básico con hojas de estilos en cascada: CSSSeminario - Diseño básico con hojas de estilos en cascada: CSS
Seminario - Diseño básico con hojas de estilos en cascada: CSSJuan Carlos Cuevas Martínez
 
Seo para prestashop V.2
Seo para prestashop V.2Seo para prestashop V.2
Seo para prestashop V.2Raúl Carrión
 
Colegio nacional nicolás esguerra
Colegio nacional nicolás esguerraColegio nacional nicolás esguerra
Colegio nacional nicolás esguerraAlejandra Lopez
 
Colegio nacional nicolás esguerra
Colegio nacional nicolás esguerraColegio nacional nicolás esguerra
Colegio nacional nicolás esguerrajuanlopezjerez
 
Colegio nacional nicolás esguerra
Colegio nacional nicolás esguerraColegio nacional nicolás esguerra
Colegio nacional nicolás esguerrajuanlopezjerez
 
CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?Harold Maduro
 
440 material impreso uc059-3 desarrollo de pagina web y recursos multimedia (1)
440 material impreso uc059-3 desarrollo de pagina web y recursos multimedia (1)440 material impreso uc059-3 desarrollo de pagina web y recursos multimedia (1)
440 material impreso uc059-3 desarrollo de pagina web y recursos multimedia (1)wandelsonwww
 
Introducción al Desarrollo Web
Introducción al Desarrollo WebIntroducción al Desarrollo Web
Introducción al Desarrollo WebJorge Pirela
 

Similar a Curso de XHTML y CSS3 (20)

Taller XHTML y CSS3 - XHTML
Taller XHTML y CSS3 - XHTMLTaller XHTML y CSS3 - XHTML
Taller XHTML y CSS3 - XHTML
 
Html css
Html cssHtml css
Html css
 
Html
HtmlHtml
Html
 
HTML.ppt
HTML.pptHTML.ppt
HTML.ppt
 
Presentación de html, css y javascript.
Presentación de html, css y javascript.Presentación de html, css y javascript.
Presentación de html, css y javascript.
 
HTML
HTMLHTML
HTML
 
Seminario - Diseño básico con hojas de estilos en cascada: CSS
Seminario - Diseño básico con hojas de estilos en cascada: CSSSeminario - Diseño básico con hojas de estilos en cascada: CSS
Seminario - Diseño básico con hojas de estilos en cascada: CSS
 
Seo para prestashop V.2
Seo para prestashop V.2Seo para prestashop V.2
Seo para prestashop V.2
 
Html
HtmlHtml
Html
 
Camilo diaz
Camilo diazCamilo diaz
Camilo diaz
 
2009 09 21 Optimizacioncodigofuente V1
2009 09 21 Optimizacioncodigofuente V12009 09 21 Optimizacioncodigofuente V1
2009 09 21 Optimizacioncodigofuente V1
 
2009 09 21 Optimizacioncodigofuente V1
2009 09 21 Optimizacioncodigofuente V12009 09 21 Optimizacioncodigofuente V1
2009 09 21 Optimizacioncodigofuente V1
 
Posicionamiento Web
Posicionamiento WebPosicionamiento Web
Posicionamiento Web
 
Colegio nacional nicolás esguerra
Colegio nacional nicolás esguerraColegio nacional nicolás esguerra
Colegio nacional nicolás esguerra
 
Colegio nacional nicolás esguerra
Colegio nacional nicolás esguerraColegio nacional nicolás esguerra
Colegio nacional nicolás esguerra
 
Colegio nacional nicolás esguerra
Colegio nacional nicolás esguerraColegio nacional nicolás esguerra
Colegio nacional nicolás esguerra
 
Tipo
TipoTipo
Tipo
 
CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?
 
440 material impreso uc059-3 desarrollo de pagina web y recursos multimedia (1)
440 material impreso uc059-3 desarrollo de pagina web y recursos multimedia (1)440 material impreso uc059-3 desarrollo de pagina web y recursos multimedia (1)
440 material impreso uc059-3 desarrollo de pagina web y recursos multimedia (1)
 
Introducción al Desarrollo Web
Introducción al Desarrollo WebIntroducción al Desarrollo Web
Introducción al Desarrollo Web
 

Más de Julián Fernández Ortiz

DISEÑO Y DESARROLLO DE UN SITIO WEB DINÁMICO
DISEÑO Y DESARROLLO DE UN SITIO WEB DINÁMICODISEÑO Y DESARROLLO DE UN SITIO WEB DINÁMICO
DISEÑO Y DESARROLLO DE UN SITIO WEB DINÁMICOJulián Fernández Ortiz
 
DBR (Drum Buffer Roper) in TOC (Theory of Constraints)
DBR (Drum Buffer Roper) in TOC (Theory of Constraints)DBR (Drum Buffer Roper) in TOC (Theory of Constraints)
DBR (Drum Buffer Roper) in TOC (Theory of Constraints)Julián Fernández Ortiz
 
Investigación de mercados inicial basada en la DB E-PRTR
Investigación de mercados inicial basada en la DB E-PRTRInvestigación de mercados inicial basada en la DB E-PRTR
Investigación de mercados inicial basada en la DB E-PRTRJulián Fernández Ortiz
 
Red zigbee para la monitorización de variables atmosféricas y meteorológicas
Red zigbee para la monitorización de variables atmosféricas y meteorológicasRed zigbee para la monitorización de variables atmosféricas y meteorológicas
Red zigbee para la monitorización de variables atmosféricas y meteorológicasJulián Fernández Ortiz
 
Ética y responsabilidad social en la empresa
Ética y responsabilidad social en la empresaÉtica y responsabilidad social en la empresa
Ética y responsabilidad social en la empresaJulián Fernández Ortiz
 
Cómo despejar una incógnita en el denominador
Cómo despejar una incógnita en el denominadorCómo despejar una incógnita en el denominador
Cómo despejar una incógnita en el denominadorJulián Fernández Ortiz
 
Sumary of Person Surveillance Using Visual and Infrared Imagery
Sumary of Person Surveillance Using Visual and Infrared Imagery Sumary of Person Surveillance Using Visual and Infrared Imagery
Sumary of Person Surveillance Using Visual and Infrared Imagery Julián Fernández Ortiz
 

Más de Julián Fernández Ortiz (14)

DISEÑO Y DESARROLLO DE UN SITIO WEB DINÁMICO
DISEÑO Y DESARROLLO DE UN SITIO WEB DINÁMICODISEÑO Y DESARROLLO DE UN SITIO WEB DINÁMICO
DISEÑO Y DESARROLLO DE UN SITIO WEB DINÁMICO
 
Service Level Agreement (SLA)
Service Level Agreement (SLA)Service Level Agreement (SLA)
Service Level Agreement (SLA)
 
Bitcoin - Estado del arte
Bitcoin - Estado del arteBitcoin - Estado del arte
Bitcoin - Estado del arte
 
Nozbe - Análisis a alto nivel.
Nozbe - Análisis a alto nivel.Nozbe - Análisis a alto nivel.
Nozbe - Análisis a alto nivel.
 
Web 2.0, e-travel & e-banking
Web 2.0, e-travel & e-bankingWeb 2.0, e-travel & e-banking
Web 2.0, e-travel & e-banking
 
Análisis de la empresa Seresco S.A.
Análisis de la empresa Seresco S.A.Análisis de la empresa Seresco S.A.
Análisis de la empresa Seresco S.A.
 
DBR (Drum Buffer Roper) in TOC (Theory of Constraints)
DBR (Drum Buffer Roper) in TOC (Theory of Constraints)DBR (Drum Buffer Roper) in TOC (Theory of Constraints)
DBR (Drum Buffer Roper) in TOC (Theory of Constraints)
 
Investigación de mercados inicial basada en la DB E-PRTR
Investigación de mercados inicial basada en la DB E-PRTRInvestigación de mercados inicial basada en la DB E-PRTR
Investigación de mercados inicial basada en la DB E-PRTR
 
Red zigbee para la monitorización de variables atmosféricas y meteorológicas
Red zigbee para la monitorización de variables atmosféricas y meteorológicasRed zigbee para la monitorización de variables atmosféricas y meteorológicas
Red zigbee para la monitorización de variables atmosféricas y meteorológicas
 
Curso de XHTML y CSS3
Curso de XHTML y CSS3Curso de XHTML y CSS3
Curso de XHTML y CSS3
 
OLEDs
OLEDsOLEDs
OLEDs
 
Ética y responsabilidad social en la empresa
Ética y responsabilidad social en la empresaÉtica y responsabilidad social en la empresa
Ética y responsabilidad social en la empresa
 
Cómo despejar una incógnita en el denominador
Cómo despejar una incógnita en el denominadorCómo despejar una incógnita en el denominador
Cómo despejar una incógnita en el denominador
 
Sumary of Person Surveillance Using Visual and Infrared Imagery
Sumary of Person Surveillance Using Visual and Infrared Imagery Sumary of Person Surveillance Using Visual and Infrared Imagery
Sumary of Person Surveillance Using Visual and Infrared Imagery
 

Último

INSTITUCION EDUCATIVA LA ESPERANZA SEDE MAGDALENA
INSTITUCION EDUCATIVA LA ESPERANZA SEDE MAGDALENAINSTITUCION EDUCATIVA LA ESPERANZA SEDE MAGDALENA
INSTITUCION EDUCATIVA LA ESPERANZA SEDE MAGDALENAdanielaerazok
 
NUVO PROGRAMAS DE ESCUELAS NUEVO-ACUERDO-CTE.pdf
NUVO PROGRAMAS DE ESCUELAS NUEVO-ACUERDO-CTE.pdfNUVO PROGRAMAS DE ESCUELAS NUEVO-ACUERDO-CTE.pdf
NUVO PROGRAMAS DE ESCUELAS NUEVO-ACUERDO-CTE.pdfisrael garcia
 
12 Clasificacion de las Computadoras.pdf
12 Clasificacion de las Computadoras.pdf12 Clasificacion de las Computadoras.pdf
12 Clasificacion de las Computadoras.pdfedwinmelgarschlink2
 
Institucion educativa la esperanza sede la magdalena
Institucion educativa la esperanza sede la magdalenaInstitucion educativa la esperanza sede la magdalena
Institucion educativa la esperanza sede la magdalenadanielaerazok
 
Buscadores, SEM SEO: el desafío de ser visto en la web
Buscadores, SEM SEO: el desafío de ser visto en la webBuscadores, SEM SEO: el desafío de ser visto en la web
Buscadores, SEM SEO: el desafío de ser visto en la webDecaunlz
 
COMPETENCIAS CIUDADANASadadadadadadada .pdf
COMPETENCIAS CIUDADANASadadadadadadada .pdfCOMPETENCIAS CIUDADANASadadadadadadada .pdf
COMPETENCIAS CIUDADANASadadadadadadada .pdfOscarBlas6
 
COMOGANARAMIGODPARACRISTOIGLESIAADVENTISTANECOCLI,COM
COMOGANARAMIGODPARACRISTOIGLESIAADVENTISTANECOCLI,COMCOMOGANARAMIGODPARACRISTOIGLESIAADVENTISTANECOCLI,COM
COMOGANARAMIGODPARACRISTOIGLESIAADVENTISTANECOCLI,COMcespitiacardales
 
Guia para el registro en el sitio slideshare.pdf
Guia para el registro en el sitio slideshare.pdfGuia para el registro en el sitio slideshare.pdf
Guia para el registro en el sitio slideshare.pdflauradbernals
 
institucion educativa la esperanza sede magdalena
institucion educativa la esperanza sede magdalenainstitucion educativa la esperanza sede magdalena
institucion educativa la esperanza sede magdalenajuniorcuellargomez
 
libro de Ciencias Sociales_6to grado.pdf
libro de Ciencias Sociales_6to grado.pdflibro de Ciencias Sociales_6to grado.pdf
libro de Ciencias Sociales_6to grado.pdfFAUSTODANILOCRUZCAST
 

Último (10)

INSTITUCION EDUCATIVA LA ESPERANZA SEDE MAGDALENA
INSTITUCION EDUCATIVA LA ESPERANZA SEDE MAGDALENAINSTITUCION EDUCATIVA LA ESPERANZA SEDE MAGDALENA
INSTITUCION EDUCATIVA LA ESPERANZA SEDE MAGDALENA
 
NUVO PROGRAMAS DE ESCUELAS NUEVO-ACUERDO-CTE.pdf
NUVO PROGRAMAS DE ESCUELAS NUEVO-ACUERDO-CTE.pdfNUVO PROGRAMAS DE ESCUELAS NUEVO-ACUERDO-CTE.pdf
NUVO PROGRAMAS DE ESCUELAS NUEVO-ACUERDO-CTE.pdf
 
12 Clasificacion de las Computadoras.pdf
12 Clasificacion de las Computadoras.pdf12 Clasificacion de las Computadoras.pdf
12 Clasificacion de las Computadoras.pdf
 
Institucion educativa la esperanza sede la magdalena
Institucion educativa la esperanza sede la magdalenaInstitucion educativa la esperanza sede la magdalena
Institucion educativa la esperanza sede la magdalena
 
Buscadores, SEM SEO: el desafío de ser visto en la web
Buscadores, SEM SEO: el desafío de ser visto en la webBuscadores, SEM SEO: el desafío de ser visto en la web
Buscadores, SEM SEO: el desafío de ser visto en la web
 
COMPETENCIAS CIUDADANASadadadadadadada .pdf
COMPETENCIAS CIUDADANASadadadadadadada .pdfCOMPETENCIAS CIUDADANASadadadadadadada .pdf
COMPETENCIAS CIUDADANASadadadadadadada .pdf
 
COMOGANARAMIGODPARACRISTOIGLESIAADVENTISTANECOCLI,COM
COMOGANARAMIGODPARACRISTOIGLESIAADVENTISTANECOCLI,COMCOMOGANARAMIGODPARACRISTOIGLESIAADVENTISTANECOCLI,COM
COMOGANARAMIGODPARACRISTOIGLESIAADVENTISTANECOCLI,COM
 
Guia para el registro en el sitio slideshare.pdf
Guia para el registro en el sitio slideshare.pdfGuia para el registro en el sitio slideshare.pdf
Guia para el registro en el sitio slideshare.pdf
 
institucion educativa la esperanza sede magdalena
institucion educativa la esperanza sede magdalenainstitucion educativa la esperanza sede magdalena
institucion educativa la esperanza sede magdalena
 
libro de Ciencias Sociales_6to grado.pdf
libro de Ciencias Sociales_6to grado.pdflibro de Ciencias Sociales_6to grado.pdf
libro de Ciencias Sociales_6to grado.pdf
 

Curso de XHTML y CSS3

  • 1. CONCEPTOS GENERALES XHTML Taller de XHTML y CSS3 Nivel B´asico - Parte I Julian Fern´andez Ortiz Vicepresidente de IEEE Student Branch of Granada Grado en Ingenier´ıa Electr´onica Industrial julian.fernandez.es@ieee.org Rub´en Mart´ın Moreno Vocal en IEEE Student Branch of Granada Grado en Estad´ıstica ruben.martinmoreno.es@ieee.org Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 2. CONCEPTOS GENERALES XHTML Licencia Este documento esta realizado bajo licencia Creative Commons “Reconocimiento-CompartirIgual 3.0 Espa˜na” . Fuente: Curso desarrollado por IEEE Student Branch of Granada Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 3. CONCEPTOS GENERALES XHTML ´Indice 1 CONCEPTOS GENERALES Estructura de un Sitio Web Los Est´andares Web - W3C 2 XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 4. CONCEPTOS GENERALES XHTML Estructura de un Sitio Web Los Est´andares Web - W3C ´Indice 1 CONCEPTOS GENERALES Estructura de un Sitio Web Los Est´andares Web - W3C 2 XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 5. CONCEPTOS GENERALES XHTML Estructura de un Sitio Web Los Est´andares Web - W3C ´Indice 1 CONCEPTOS GENERALES Estructura de un Sitio Web Los Est´andares Web - W3C 2 XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 6. CONCEPTOS GENERALES XHTML Estructura de un Sitio Web Los Est´andares Web - W3C Estructura de ´Arbol Existe una p´agina principal desde la que puedes llegar a otras p´aginas de la web Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 7. CONCEPTOS GENERALES XHTML Estructura de un Sitio Web Los Est´andares Web - W3C Estructura en Listas Las p´aginas est´an enlazadas con sus contiguas Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 8. CONCEPTOS GENERALES XHTML Estructura de un Sitio Web Los Est´andares Web - W3C Estructura Mixta Aprovecha las dos anteriores Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 9. CONCEPTOS GENERALES XHTML Estructura de un Sitio Web Los Est´andares Web - W3C Estructura en Red P´aginas totalmente interconectadas Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 10. CONCEPTOS GENERALES XHTML Estructura de un Sitio Web Los Est´andares Web - W3C ´Indice 1 CONCEPTOS GENERALES Estructura de un Sitio Web Los Est´andares Web - W3C 2 XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 11. CONCEPTOS GENERALES XHTML Estructura de un Sitio Web Los Est´andares Web - W3C Se exige que se usen los elementos Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 12. CONCEPTOS GENERALES XHTML Estructura de un Sitio Web Los Est´andares Web - W3C Se exige que se usen los elementos DOCTYPE HEAD BODY HTML Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 13. CONCEPTOS GENERALES XHTML Estructura de un Sitio Web Los Est´andares Web - W3C Se exige que se usen los elementos DOCTYPE HEAD BODY HTML Se exige que se cierren todas las etiquetas Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 14. CONCEPTOS GENERALES XHTML Estructura de un Sitio Web Los Est´andares Web - W3C Se exige que se usen los elementos DOCTYPE HEAD BODY HTML Se exige que se cierren todas las etiquetas Se exige el uso de comillas en torno a valores de atributos Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 15. CONCEPTOS GENERALES XHTML Estructura de un Sitio Web Los Est´andares Web - W3C Se exige que se usen los elementos DOCTYPE HEAD BODY HTML Se exige que se cierren todas las etiquetas Se exige el uso de comillas en torno a valores de atributos Todos los elementos deben estar en min´uscula Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 16. CONCEPTOS GENERALES XHTML Estructura de un Sitio Web Los Est´andares Web - W3C Se exige que se usen los elementos DOCTYPE HEAD BODY HTML Se exige que se cierren todas las etiquetas Se exige el uso de comillas en torno a valores de atributos Todos los elementos deben estar en min´uscula Todos los valores han de indicarse de forma expl´ıcita Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 17. CONCEPTOS GENERALES XHTML Estructura de un Sitio Web Los Est´andares Web - W3C W3C https://validator.w3.org/#validate_{}by_{}input Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 18. CONCEPTOS GENERALES XHTML Estructura de un Sitio Web Los Est´andares Web - W3C W3C Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 19. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia ´Indice 1 CONCEPTOS GENERALES Estructura de un Sitio Web Los Est´andares Web - W3C 2 XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 20. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia ´Indice 1 CONCEPTOS GENERALES Estructura de un Sitio Web Los Est´andares Web - W3C 2 XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 21. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Definici´on del Documento Declaraci´on DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Etiqueta HTML <html xmlns="http://www.w3.org/1999/xhtml"> ... </html> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 22. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Cabecera Incluye: T´ıtulo de la p´agina Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 23. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Cabecera Incluye: T´ıtulo de la p´agina Informaci´on importante para los motores de b´usqueda (Etiquetas) Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 24. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Cabecera Incluye: T´ıtulo de la p´agina Informaci´on importante para los motores de b´usqueda (Etiquetas) Ubicaci´on Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 25. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Cabecera Incluye: T´ıtulo de la p´agina Informaci´on importante para los motores de b´usqueda (Etiquetas) Ubicaci´on Hojas de estilos (CSS) Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 26. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Cabecera Incluye: T´ıtulo de la p´agina Informaci´on importante para los motores de b´usqueda (Etiquetas) Ubicaci´on Hojas de estilos (CSS) Scripts Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 27. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Cabecera Incluye: T´ıtulo de la p´agina Informaci´on importante para los motores de b´usqueda (Etiquetas) Ubicaci´on Hojas de estilos (CSS) Scripts <head> <title>CURSO XHTML Y CSS</title> </head> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 28. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Cabecera Incluye: T´ıtulo de la p´agina Informaci´on importante para los motores de b´usqueda (Etiquetas) Ubicaci´on Hojas de estilos (CSS) Scripts <head> <title>CURSO XHTML Y CSS</title> </head> IMPORTANTE La declaraci´on de un t´ıtulo para la p´agina es OBLIGATORIA Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 29. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Cabecera METADATOS m´as usuales <meta charset="UTF-8"> <meta name="description" content="CURSO XHTML Y CSS"> <meta name="keywords" content="HTML,CSS,XML,XHTML"> <meta name="author" content="Juli´an Fern´andez; Rub´en Mart´ın"> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 30. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Cabecera <head> <title>CURSO XHTML Y CSS</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Language" content="Espa~nol" /> <link href="style.css" rel="stylesheet" type="text/css" /> <script><!--SCRIPT--></script> </head> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 31. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Cuerpo Contenido de la web Se incluye el texto, im´agenes y v´ıdeos que queremos que se muestren en la web <body> <!--Contenido de tu P´agina--> </body> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 32. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia En Resumen... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 33. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia En Resumen... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title><!--T´ıtulo en la Pesta~na de B´usqueda--></title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Language" content="Espa~nol" /> <link href="../style/style.css" rel="stylesheet" type="text/css" /> <!--SCRIPTS--> </head> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 34. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia En Resumen... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title><!--T´ıtulo en la Pesta~na de B´usqueda--></title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Language" content="Espa~nol" /> <link href="../style/style.css" rel="stylesheet" type="text/css" /> <!--SCRIPTS--> </head> <body> <!--Contenido de tu P´agina--> </body> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 35. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia En Resumen... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title><!--T´ıtulo en la Pesta~na de B´usqueda--></title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Language" content="Espa~nol" /> <link href="../style/style.css" rel="stylesheet" type="text/css" /> <!--SCRIPTS--> </head> <body> <!--Contenido de tu P´agina--> </body> </html> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 36. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia ´Indice 1 CONCEPTOS GENERALES Estructura de un Sitio Web Los Est´andares Web - W3C 2 XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 37. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Tipos de etiquetas m´as utilizadas (e imprescindibles) Encabezados P´arrafo Tipolog´ıa de letra Script C´odigo Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 38. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Encabezados Son jer´arquicos entre s´ı <h1>...</h1> <h2>...</h2> <h3>...</h3> <h4>...</h4> <h5>...</h5> <h6>...</h6> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 39. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Encabezados Son jer´arquicos entre s´ı <h1>...</h1> <h2>...</h2> <h3>...</h3> <h4>...</h4> <h5>...</h5> <h6>...</h6> RECUERDA Cuanto m´as peque˜no es el n´umero m´as grande la letra Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 40. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia P´arrafos Todo el texto debe ir encerrado en p´arrafos <p>...</p> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 41. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia P´arrafos Todo el texto debe ir encerrado en p´arrafos <p>...</p> RECUERDA Es bueno separar cada p´arrafo de manera independiente para que sea m´as f´acil el uso de identificadores Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 42. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia P´arrafos <abbr>...</abbr> <b>...</b> <i>...</i> <em>...</em> <u>...</u> <s>...</s> <sub>...</sub> <sup>...</sup> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 43. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia P´arrafos <abbr>...</abbr> <b>...</b> <i>...</i> <em>...</em> <u>...</u> <s>...</s> <sub>...</sub> <sup>...</sup> Abreviatura Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 44. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia P´arrafos <abbr>...</abbr> <b>...</b> <i>...</i> <em>...</em> <u>...</u> <s>...</s> <sub>...</sub> <sup>...</sup> Abreviatura Negrita Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 45. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia P´arrafos <abbr>...</abbr> <b>...</b> <i>...</i> <em>...</em> <u>...</u> <s>...</s> <sub>...</sub> <sup>...</sup> Abreviatura Negrita Cursiva Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 46. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia P´arrafos <abbr>...</abbr> <b>...</b> <i>...</i> <em>...</em> <u>...</u> <s>...</s> <sub>...</sub> <sup>...</sup> Abreviatura Negrita Cursiva Enfatizado Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 47. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia P´arrafos <abbr>...</abbr> <b>...</b> <i>...</i> <em>...</em> <u>...</u> <s>...</s> <sub>...</sub> <sup>...</sup> Abreviatura Negrita Cursiva Enfatizado Subrayado Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 48. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia P´arrafos <abbr>...</abbr> <b>...</b> <i>...</i> <em>...</em> <u>...</u> <s>...</s> <sub>...</sub> <sup>...</sup> Abreviatura Negrita Cursiva Enfatizado Subrayado Tachado Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 49. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia P´arrafos <abbr>...</abbr> <b>...</b> <i>...</i> <em>...</em> <u>...</u> <s>...</s> <sub>...</sub> <sup>...</sup> Abreviatura Negrita Cursiva Enfatizado Subrayado Tachado Sub´ındice1 Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 50. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia P´arrafos <abbr>...</abbr> <b>...</b> <i>...</i> <em>...</em> <u>...</u> <s>...</s> <sub>...</sub> <sup>...</sup> Abreviatura Negrita Cursiva Enfatizado Subrayado Tachado Sub´ındice1 Super´ındice1 Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 51. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia P´arrafos Escribir c´odigo <code>...</code> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 52. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia ´Indice 1 CONCEPTOS GENERALES Estructura de un Sitio Web Los Est´andares Web - W3C 2 XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 53. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Hiperv´ınculos Los enlaces nos permiten hacer relaciones internas (a secciones) o externas (a otra web o contenido) en nuestra p´agina Estructura B´asica <a href="#">...</a> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 54. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Relaciones Internas Para crear nuestro punto de llegada deberemos aplicar <a name="id">...</a> al texto deseado Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 55. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Relaciones Internas Para crear nuestro punto de llegada deberemos aplicar <a name="id">...</a> al texto deseado Y para el punto de partida aplicamos <a href="#id">...</a> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 56. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Relaciones Externas Pueden ser locales o estar alojadas en internet Enlazan otras webs o archivos Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 57. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Relaciones Externas Internet - WEB <a href="http://www.google.com">Google</a> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 58. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Relaciones Externas Internet - WEB <a href="http://www.google.com">Google</a> Internet - PDF <a href="http://www.ejemplo.com/informe.pdf">Ejemplo [PDF]</a> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 59. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Relaciones Externas Internet - WEB <a href="http://www.google.com">Google</a> Internet - PDF <a href="http://www.ejemplo.com/informe.pdf">Ejemplo [PDF]</a> Local - WORD <a href="/informe.doc">Ejemplo [DOC]</a> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 60. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Relaciones Externas Internet - WEB <a href="http://www.google.com">Google</a> Internet - PDF <a href="http://www.ejemplo.com/informe.pdf">Ejemplo [PDF]</a> Local - WORD <a href="/informe.doc">Ejemplo [DOC]</a> Local - JPG (En Nueva Pesta˜na) <a href="../imagenes/fondo_escritorio.jpg" target="_blank"> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 61. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Relaciones Externas - emails email en Nueva Pesta˜na <a href="mailto:ieee@ieee.org" target="_blank">Env´ıanos un email</a> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 62. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Relaciones Externas - emails email en Nueva Pesta˜na <a href="mailto:ieee@ieee.org" target="_blank">Env´ıanos un email</a> email en Nueva Pesta˜na + Asunto <a href="mailto:ieee@ieee.org?subject=ASUNTO" target="_blank"> Env´ıanos un email</a> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 63. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Relaciones Externas - emails email en Nueva Pesta˜na <a href="mailto:ieee@ieee.org" target="_blank">Env´ıanos un email</a> email en Nueva Pesta˜na + Asunto <a href="mailto:ieee@ieee.org?subject=ASUNTO" target="_blank"> Env´ıanos un email</a> email en Nueva Pesta˜na + Texto <a href="mailto:ieee@ieee.org?body=TEXTO" target="_blank"> Env´ıanos un email</a> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 64. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Relaciones Externas - emails email en Nueva Pesta˜na <a href="mailto:ieee@ieee.org" target="_blank">Env´ıanos un email</a> email en Nueva Pesta˜na + Asunto <a href="mailto:ieee@ieee.org?subject=ASUNTO" target="_blank"> Env´ıanos un email</a> email en Nueva Pesta˜na + Texto <a href="mailto:ieee@ieee.org?body=TEXTO" target="_blank"> Env´ıanos un email</a> email en Nueva Pesta˜na + Asunto + Texto <a href="mailto:ieee@ieee.org?subject=ASUNTO&body=TEXTO" target="_blank"> Env´ıanos un email</a> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 65. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia ´Indice 1 CONCEPTOS GENERALES Estructura de un Sitio Web Los Est´andares Web - W3C 2 XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 66. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Listas Existen 2 tipos Ordenadas Desordenadas Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 67. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Listas Existen 2 tipos Ordenadas Desordenadas RECUERDA Las listas se pueden anidar, ya sean del mismo o de distinto tipo Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 68. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Listas Ordenadas <ol> <li>Padre <ol> <li>Hijo1</li> <li>Hijo2</li> <li>Hijo3 <ol> <li>Nieto</li> </ol></li> </ol></li> </ol> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 69. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Listas Ordenadas <ol> <li>Padre <ol> <li>Hijo1</li> <li>Hijo2</li> <li>Hijo3 <ol> <li>Nieto</li> </ol></li> </ol></li> </ol> 1 Padre 1 Hijo1 2 Hijo2 3 Hijo3 1 Nieto Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 70. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Listas Desordenadas <ul> <li>Padre <ul> <li>Hijo1</li> <li>Hijo2</li> <li>Hijo3 <ul> <li>Nieto</li> </ul></li> </ul></li> </ul> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 71. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Listas Desordenadas <ul> <li>Padre <ul> <li>Hijo1</li> <li>Hijo2</li> <li>Hijo3 <ul> <li>Nieto</li> </ul></li> </ul></li> </ul> Padre Hijo1 Hijo2 Hijo3 Nieto Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 72. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Listas Desordenadas <ul> <li>Padre <ul> <li>Hijo1</li> <li>Hijo2</li> <li>Hijo3 <ul> <li>Nieto</li> </ul></li> </ul></li> </ul> Padre Hijo1 Hijo2 Hijo3 Nieto RECUERDA Los listas desordenadas son las m´as utilizadas a la hora de crear men´us Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 73. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Tablas Etiquetas para construir una tabla Obligatorias <table>...</table> <tr>...</tr> <td>...</td> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 74. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Tablas Etiquetas para construir una tabla Obligatorias <table>...</table> <tr>...</tr> <td>...</td> Opcionales <th>...</th> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 75. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Tablas <table> <tr> <td><strong>XHTML</strong></td> <td><strong>CSS</strong></td> </tr> <tr> <td>Contenido</td> <td>Forma</td> </tr> <tr> <td>Texto</td> <td>Formato</td> </tr> </table> XHTML CSS Contenido Forma Texto Formato Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 76. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Tablas <table> <tr> <th>XHTML</th> <th>CSS</th> </tr> <tr> <td>Contenido</td> <td>Forma</td> </tr> <tr> <td>Texto</td> <td>Formato</td> </tr> </table> XHTML CSS Contenido Forma Texto Formato Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 77. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia ´Indice 1 CONCEPTOS GENERALES Estructura de un Sitio Web Los Est´andares Web - W3C 2 XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 78. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Etiquetas Tipos de etiquetas para insertar contenido externo en la web <img>...</img> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 79. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Etiquetas Tipos de etiquetas para insertar contenido externo en la web <img>...</img> <audio>...</audio> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 80. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Etiquetas Tipos de etiquetas para insertar contenido externo en la web <img>...</img> <audio>...</audio> <video>...</video> Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 81. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Im´agenes Atributos ´utiles a la hora de insertar im´agenes src=“#” Indica la URL para encontrar la imagen Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 82. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Im´agenes Atributos ´utiles a la hora de insertar im´agenes src=“#” Indica la URL para encontrar la imagen name=“#” Nombre de la imagen Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 83. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Im´agenes Atributos ´utiles a la hora de insertar im´agenes src=“#” Indica la URL para encontrar la imagen name=“#” Nombre de la imagen alt=“#” Peque˜na descripci´on de la imagen Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 84. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Im´agenes Atributos ´utiles a la hora de insertar im´agenes src=“#” Indica la URL para encontrar la imagen name=“#” Nombre de la imagen alt=“#” Peque˜na descripci´on de la imagen longdesc=“#” Indica una URL donde encontrar una descripci´on m´as detallada de la imagen Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 85. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Im´agenes Atributos ´utiles a la hora de insertar im´agenes src=“#” Indica la URL para encontrar la imagen name=“#” Nombre de la imagen alt=“#” Peque˜na descripci´on de la imagen longdesc=“#” Indica una URL donde encontrar una descripci´on m´as detallada de la imagen height=“#” Altura obligada de la imagen Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 86. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Im´agenes Atributos ´utiles a la hora de insertar im´agenes src=“#” Indica la URL para encontrar la imagen name=“#” Nombre de la imagen alt=“#” Peque˜na descripci´on de la imagen longdesc=“#” Indica una URL donde encontrar una descripci´on m´as detallada de la imagen height=“#” Altura obligada de la imagen width=“#” Anchura obligada de la imagen Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 87. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Audios Atributos ´utiles a la hora de insertar audio src=“#” Indica la URL para encontrar el archivo Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 88. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Audios Atributos ´utiles a la hora de insertar audio src=“#” Indica la URL para encontrar el archivo type=“#” Indica el tipo de audios: mp3, mpeg, ogg... Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 89. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Audios Atributos ´utiles a la hora de insertar audio src=“#” Indica la URL para encontrar el archivo type=“#” Indica el tipo de audios: mp3, mpeg, ogg... autoplay=“#” Indica si se debe reproducir una vez que el audio se ha cargado (autom´aticamente) Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 90. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Audios Atributos ´utiles a la hora de insertar audio src=“#” Indica la URL para encontrar el archivo type=“#” Indica el tipo de audios: mp3, mpeg, ogg... autoplay=“#” Indica si se debe reproducir una vez que el audio se ha cargado (autom´aticamente) preload=“#” Especifica si se debe precargar el audio antes de reproducirlo Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 91. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Audios Atributos ´utiles a la hora de insertar audio src=“#” Indica la URL para encontrar el archivo type=“#” Indica el tipo de audios: mp3, mpeg, ogg... autoplay=“#” Indica si se debe reproducir una vez que el audio se ha cargado (autom´aticamente) preload=“#” Especifica si se debe precargar el audio antes de reproducirlo controls=“#” Indica los controles que se muestran en pantalla: play, pause... Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 92. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia Audios Atributos ´utiles a la hora de insertar audio src=“#” Indica la URL para encontrar el archivo type=“#” Indica el tipo de audios: mp3, mpeg, ogg... autoplay=“#” Indica si se debe reproducir una vez que el audio se ha cargado (autom´aticamente) preload=“#” Especifica si se debe precargar el audio antes de reproducirlo controls=“#” Indica los controles que se muestran en pantalla: play, pause... loop=“#” Indica si una vez que termine la pista se debe volver a reproducir Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 93. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia V´ıdeo Atributos ´utiles a la hora de insertar v´ıdeos src=“#” Indica la URL para encontrar el archivo Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 94. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia V´ıdeo Atributos ´utiles a la hora de insertar v´ıdeos src=“#” Indica la URL para encontrar el archivo type=“#” Indica el tipo de v´ıdeo: mp4, mpeg, ogg... Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 95. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia V´ıdeo Atributos ´utiles a la hora de insertar v´ıdeos src=“#” Indica la URL para encontrar el archivo type=“#” Indica el tipo de v´ıdeo: mp4, mpeg, ogg... autoplay=“#” Indica si se debe reproducir el v´ıdeo se ha cargado (autom´aticamente) Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 96. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia V´ıdeo Atributos ´utiles a la hora de insertar v´ıdeos src=“#” Indica la URL para encontrar el archivo type=“#” Indica el tipo de v´ıdeo: mp4, mpeg, ogg... autoplay=“#” Indica si se debe reproducir el v´ıdeo se ha cargado (autom´aticamente) preload=“#” Especifica si se debe precargar el v´ıdeo Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 97. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia V´ıdeo Atributos ´utiles a la hora de insertar v´ıdeos src=“#” Indica la URL para encontrar el archivo type=“#” Indica el tipo de v´ıdeo: mp4, mpeg, ogg... autoplay=“#” Indica si se debe reproducir el v´ıdeo se ha cargado (autom´aticamente) preload=“#” Especifica si se debe precargar el v´ıdeo controls=“#” Indica los controles que se muestran en pantalla: play, pause, mute... Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 98. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia V´ıdeo Atributos ´utiles a la hora de insertar v´ıdeos src=“#” Indica la URL para encontrar el archivo type=“#” Indica el tipo de v´ıdeo: mp4, mpeg, ogg... autoplay=“#” Indica si se debe reproducir el v´ıdeo se ha cargado (autom´aticamente) preload=“#” Especifica si se debe precargar el v´ıdeo controls=“#” Indica los controles que se muestran en pantalla: play, pause, mute... loop=“#” Indica si una vez que termine se debe volver a reproducir Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 99. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia V´ıdeo muted=“#” Indica si el v´ıdeo debe reproducirse sin audio por defecto Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 100. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia V´ıdeo muted=“#” Indica si el v´ıdeo debe reproducirse sin audio por defecto poster=“#”[URL] Indica una imagen que mostrar hasta que el v´ıdeo se reproduzca Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 101. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia V´ıdeo muted=“#” Indica si el v´ıdeo debe reproducirse sin audio por defecto poster=“#”[URL] Indica una imagen que mostrar hasta que el v´ıdeo se reproduzca height=“#” Altura obligada del v´ıdeo Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS
  • 102. CONCEPTOS GENERALES XHTML Estructura de la P´agina Etiquetas Enlaces Listas y Tablas Multimedia V´ıdeo muted=“#” Indica si el v´ıdeo debe reproducirse sin audio por defecto poster=“#”[URL] Indica una imagen que mostrar hasta que el v´ıdeo se reproduzca height=“#” Altura obligada del v´ıdeo width=“#” Anchura obligada del v´ıdeo Juli´an Fern´andez, Rub´en Mart´ın XHTML y CSS