curso de xhtml y css3

CONCEPTOS GENERALESXHTML

Taller de XHTML y CSS3Nivel Basico - Parte I

Julian Fernandez Ortiz

Vicepresidente de IEEE Student Branch of GranadaGrado en Ingenierıa Electronica Industrial

[email protected]

Ruben Martın Moreno

Vocal en IEEE Student Branch of GranadaGrado en Estadıstica

[email protected]

Julian Fernandez, Ruben Martın XHTML y CSS

Licencia

Este documento esta realizadobajo licencia Creative Commons“Reconocimiento-CompartirIgual 3.0Espana” .

Fuente: Curso desarrollado por IEEE Student Branch of Granada

Indice

1 CONCEPTOS GENERALESEstructura de un Sitio WebLos Estandares Web - W3C

2 XHTMLEstructura de la PaginaEtiquetasEnlacesListas y TablasMultimedia

Estructura de un Sitio WebLos Estandares Web - W3C

Indice

Estructura de Arbol

Existe una pagina principaldesde la que puedes llegara otras paginas de la web

Estructura en Listas

Las paginas estanenlazadas con suscontiguas

Estructura Mixta

Aprovecha las dosanteriores

Estructura en Red

Paginas totalmenteinterconectadas

Indice

Se exige que se usen los elementos

DOCTYPEHEADBODYHTML

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 minuscula

Todos los valores han de indicarse de forma explıcita

DOCTYPEHEADBODYHTML

https://validator.w3.org/#validate_{}by_{}input

Estructura de la PaginaEtiquetasEnlacesListas y TablasMultimedia

Indice

Definicion del Documento

Declaracion DOCTYPE<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Etiqueta HTML

</html>

Cabecera

Incluye:

Tıtulo de la pagina

Informacion importante para losmotores de busqueda(Etiquetas)

Ubicacion

Hojas de estilos (CSS)

Scripts

<head>

<title>CURSO XHTML Y CSS</title>

</head>

IMPORTANTE

La declaracion de un tıtulo para lapagina es OBLIGATORIA

Cabecera

Incluye:

Ubicacion

Scripts

<head>

</head>

IMPORTANTE

Cabecera

Incluye:

Ubicacion

Scripts

<head>

</head>

IMPORTANTE

Cabecera

Incluye:

Ubicacion

Scripts

<head>

</head>

IMPORTANTE

Cabecera

Incluye:

Ubicacion

Scripts

<head>

</head>

IMPORTANTE

Cabecera

Incluye:

Ubicacion

Scripts

<head>

</head>

IMPORTANTE

Cabecera

Incluye:

Ubicacion

Scripts

<head>

</head>

IMPORTANTE

Cabecera

METADATOS mas usuales<meta charset="UTF-8">

Cabecera

<head>

</head>

Cuerpo

Contenido de la web

Se incluye el texto, imagenes yvıdeos que queremos que semuestren en la web

<body>

</body>

En Resumen...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

<head>

</head>

<body>

</body>

</html>

En Resumen...

<head>

</head>

<body>

</body>

</html>

En Resumen...

<head>

</head>

<body>

</body>

</html>

En Resumen...

<head>

</head>

<body>

</body>

</html>

Indice

Tipos de etiquetas mas utilizadas (e imprescindibles)

Encabezados

Parrafo

Tipologıa de letra

Script

Codigo

Encabezados

Son jerarquicos entre sı

RECUERDA

Cuanto mas pequeno es elnumero mas grande la letra

Encabezados

Son jerarquicos entre sı

RECUERDA

Cuanto mas pequeno es elnumero mas grande la letra

Parrafos

Todo el texto debe irencerrado en parrafos

RECUERDA

Es bueno separar cada parrafode manera independiente paraque sea mas facil el uso deidentificadores

Parrafos

Todo el texto debe irencerrado en parrafos

RECUERDA

Es bueno separar cada parrafode manera independiente paraque sea mas facil el uso deidentificadores

Parrafos

Abreviatura

Negrita

Cursiva

Enfatizado

Subrayado

Tachado

Subındice1

Superındice1

Parrafos

Abreviatura

Negrita

Cursiva

Enfatizado

Subrayado

Tachado

Subındice1

Superındice1

Parrafos

Abreviatura

Negrita

Cursiva

Enfatizado

Subrayado

Tachado

Subındice1

Superındice1

Parrafos

Abreviatura

Negrita

Cursiva

Enfatizado

Subrayado

Tachado

Subındice1

Superındice1

Parrafos

Abreviatura

Negrita

Cursiva

Enfatizado

Subrayado

Tachado

Subındice1

Superındice1

Parrafos

Abreviatura

Negrita

Cursiva

Enfatizado

Subrayado

Tachado

Subındice1

Superındice1

Parrafos

Abreviatura

Negrita

Cursiva

Enfatizado

Subrayado

Tachado

Subındice1

Superındice1

Parrafos

Abreviatura

Negrita

Cursiva

Enfatizado

Subrayado

Tachado

Subındice1

Superındice1

Parrafos

Abreviatura

Negrita

Cursiva

Enfatizado

Subrayado

Tachado

Subındice1

Superındice1

Parrafos

Escribir codigo

Indice

Hipervınculos

Los enlaces nos permiten hacer relaciones internas (a secciones) oexternas (a otra web o contenido) en nuestra pagina

Estructura Basica

Relaciones Internas

Para crear nuestro punto dellegada deberemos aplicar

al texto deseado

Y para el punto de partidaaplicamos

Relaciones Internas

Para crear nuestro punto dellegada deberemos aplicar

al texto deseado

Y para el punto de partidaaplicamos

Relaciones Externas

Pueden ser locales o estar alojadas en internet

Enlazan otras webs o archivos

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 Pestana)

Relaciones Externas

Relaciones Externas - emails

email en Nueva Pestana<a href="mailto:[email protected]" target="_blank">Envıanos un email</a>

email en Nueva Pestana + Asunto<a href="mailto:[email protected]?subject=ASUNTO" target="_blank">

Envıanos un email</a>

email en Nueva Pestana + Texto<a href="mailto:[email protected]?body=TEXTO" target="_blank">

email en Nueva Pestana + Asunto + Texto<a href="mailto:[email protected]?subject=ASUNTO&body=TEXTO" target="_blank">

Indice

Listas

Existen 2 tipos

Ordenadas

Desordenadas

RECUERDA

Las listas se pueden anidar, ya sean del mismo o de distinto tipo

Listas

Existen 2 tipos

Ordenadas

Desordenadas

RECUERDA

Las listas se pueden anidar, ya sean del mismo o de distinto tipo

Listas Ordenadas

<li>Padre

<li>Hijo3

<li>Nieto</li>

</ol></li>

1 Padre

1 Hijo12 Hijo23 Hijo3

1 Nieto

Listas Ordenadas

<li>Padre

<li>Hijo3

<li>Nieto</li>

</ol></li>

1 Padre

1 Hijo12 Hijo23 Hijo3

1 Nieto

Listas Desordenadas

<li>Padre

<li>Hijo3

<li>Nieto</li>

</ul></li>

Hijo1Hijo2Hijo3

RECUERDA

Los listas desordenadas son lasmas utilizadas a la hora de crearmenus

Listas Desordenadas

<li>Padre

<li>Hijo3

<li>Nieto</li>

</ul></li>

Hijo1Hijo2Hijo3

RECUERDA

Listas Desordenadas

<li>Padre

<li>Hijo3

<li>Nieto</li>

</ul></li>

Hijo1Hijo2Hijo3

RECUERDA

Tablas

Etiquetas para construir una tabla

Obligatorias

Opcionales

Tablas

Etiquetas para construir una tabla

Obligatorias

Opcionales

Tablas

<table>

<td><strong>XHTML</strong></td>

<td>Contenido</td>

<td>Forma</td>

<td>Texto</td>

<td>Formato</td>

</table>

XHTML CSSContenido FormaTexto Formato

Tablas

<table>

<th>XHTML</th>

<td>Contenido</td>

<td>Forma</td>

<td>Texto</td>

<td>Formato</td>

</table>

XHTML CSSContenido FormaTexto Formato

Indice

Etiquetas

Tipos de etiquetas para insertar contenido externo en la web

Etiquetas

Etiquetas

Imagenes

Atributos utiles a la hora de insertar imagenes

src=“#”

Indica la URL para encontrar laimagen

name=“#”

Nombre de la imagen

alt=“#”

Pequena descripcion de la imagen

longdesc=“#”

Indica una URL donde encontraruna descripcion mas detallada dela imagen

height=“#”

Altura obligada de la imagen

width=“#”

Anchura obligada de la imagen

Imagenes

src=“#”

name=“#”

Nombre de la imagen

alt=“#”

longdesc=“#”

height=“#”

width=“#”

Imagenes

src=“#”

name=“#”

Nombre de la imagen

alt=“#”

longdesc=“#”

height=“#”

width=“#”

Imagenes

src=“#”

name=“#”

Nombre de la imagen

alt=“#”

longdesc=“#”

height=“#”

width=“#”

Imagenes

src=“#”

name=“#”

Nombre de la imagen

alt=“#”

longdesc=“#”

height=“#”

width=“#”

Imagenes

src=“#”

name=“#”

Nombre de la imagen

alt=“#”

longdesc=“#”

height=“#”

width=“#”

Audios

Atributos utiles a la hora de insertar audio

src=“#”

Indica la URL para encontrar elarchivo

type=“#”

Indica el tipo de audios: mp3,mpeg, ogg...

autoplay=“#”

Indica si se debe reproducir unavez que el audio se ha cargado(automaticamente)

preload=“#”

Especifica si se debe precargar elaudio antes de reproducirlo

controls=“#”

Indica los controles que semuestran en pantalla: play,pause...

loop=“#”

Indica si una vez que termine lapista se debe volver a reproducir

Audios

src=“#”

type=“#”

autoplay=“#”

preload=“#”

controls=“#”

loop=“#”

Audios

src=“#”

type=“#”

autoplay=“#”

preload=“#”

controls=“#”

loop=“#”

Audios

src=“#”

type=“#”

autoplay=“#”

preload=“#”

controls=“#”

loop=“#”

Audios

src=“#”

type=“#”

autoplay=“#”

preload=“#”

controls=“#”

loop=“#”

Audios

src=“#”

type=“#”

autoplay=“#”

preload=“#”

controls=“#”

loop=“#”

Vıdeo

Atributos utiles a la hora de insertar vıdeos

src=“#”

type=“#”

Indica el tipo de vıdeo: mp4,mpeg, ogg...

autoplay=“#”

Indica si se debe reproducir elvıdeo se ha cargado(automaticamente)

preload=“#”

Especifica si se debe precargar elvıdeo

controls=“#”

Indica los controles que semuestran en pantalla: play,pause, mute...

loop=“#”

Indica si una vez que termine sedebe volver a reproducir

Vıdeo

src=“#”

type=“#”

autoplay=“#”

preload=“#”

controls=“#”

loop=“#”

Vıdeo

src=“#”

type=“#”

autoplay=“#”

preload=“#”

controls=“#”

loop=“#”

Vıdeo

src=“#”

type=“#”

autoplay=“#”

preload=“#”

controls=“#”

loop=“#”

Vıdeo

src=“#”

type=“#”

autoplay=“#”

preload=“#”

controls=“#”

loop=“#”

Vıdeo

src=“#”

type=“#”

autoplay=“#”

preload=“#”

controls=“#”

loop=“#”

Vıdeo

muted=“#”

Indica si el vıdeo debereproducirse sin audio por defecto

poster=“#”[URL]

Indica una imagen que mostrarhasta que el vıdeo se reproduzca

height=“#”

Altura obligada del vıdeo

width=“#”

Anchura obligada del vıdeo

Vıdeo

muted=“#”

poster=“#”[URL]

height=“#”

width=“#”

Vıdeo

muted=“#”

poster=“#”[URL]

height=“#”

width=“#”

Vıdeo

muted=“#”

poster=“#”[URL]

height=“#”

width=“#”