Taller XHTML y CSS3 - XHTML

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 realizado bajo licencia “CC˜BY-SA˜3.0” .Este documento esta Fuente: Curso desarrollado por IEEE StudentBranch of Granada


https://creativecommons.org/licenses/by-sa/3.0/deed.es


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






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









DOCTYPEHEADBODYHTML









DOCTYPEHEADBODYHTML









DOCTYPEHEADBODYHTML









DOCTYPEHEADBODYHTML








W3C

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




W3C



Estructura de la PaginaEtiquetasEnlacesListas y TablasMultimedia

Indice






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 xmlns="http://www.w3.org/1999/xhtml">

...

</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">

<meta name="description" content="CURSO XHTML Y CSS">

<meta name="keywords" content="HTML,CSS,XML,XHTML">

<meta name="author" content="Julian Fernandez; Ruben Martın">




Cabecera

<head>


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

</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>

<title></title>




<link href="../style/style.css" rel="stylesheet" type="text/css" />



</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ı

<h1>...</h1>

<h2>...</h2>

<h3>...</h3>

<h4>...</h4>

<h5>...</h5>

<h6>...</h6>

RECUERDA

Cuanto mas pequeno es elnumero mas grande la letra




Encabezados

Son jerarquicos entre sı

<h1>...</h1>

<h2>...</h2>

<h3>...</h3>

<h4>...</h4>

<h5>...</h5>

<h6>...</h6>

RECUERDA

Cuanto mas pequeno es elnumero mas grande la letra




Parrafos

Todo el texto debe irencerrado en parrafos

<p>...</p>

RECUERDA

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




Parrafos

Todo el texto debe irencerrado en parrafos

<p>...</p>

RECUERDA

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




Parrafos

<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




Parrafos

<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




Parrafos

<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




Parrafos

<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




Parrafos

<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




Parrafos

<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




Parrafos

<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




Parrafos

<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




Parrafos

<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




Parrafos

Escribir codigo

<code>...</code>




Indice






Hipervınculos

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

Estructura Basica

<a href="#">...</a>




Relaciones Internas

Para crear nuestro punto dellegada deberemos aplicar

<a name="id">...</a>

al texto deseado

Y para el punto de partidaaplicamos

<a href="#id">...</a>




Relaciones Internas

Para crear nuestro punto dellegada deberemos aplicar

<a name="id">...</a>

al texto deseado

Y para el punto de partidaaplicamos

<a href="#id">...</a>




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)

<a href="../imagenes/fondo_escritorio.jpg" target="_blank">




Relaciones Externas









Relaciones Externas









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

<ol>

<li>Padre

<ol>

<li>Hijo1</li>

<li>Hijo2</li>

<li>Hijo3

<ol>

<li>Nieto</li>

</ol></li>

</ol></li>

</ol>

1 Padre

1 Hijo12 Hijo23 Hijo3

1 Nieto




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 Hijo12 Hijo23 Hijo3

1 Nieto




Listas Desordenadas

<ul>

<li>Padre

<ul>

<li>Hijo1</li>

<li>Hijo2</li>

<li>Hijo3

<ul>

<li>Nieto</li>

</ul></li>

</ul></li>

</ul>

Padre

Hijo1Hijo2Hijo3

Nieto

RECUERDA

Los listas desordenadas son lasmas utilizadas a la hora de crearmenus




Listas Desordenadas

<ul>

<li>Padre

<ul>

<li>Hijo1</li>

<li>Hijo2</li>

<li>Hijo3

<ul>

<li>Nieto</li>

</ul></li>

</ul></li>

</ul>

Padre

Hijo1Hijo2Hijo3

Nieto

RECUERDA





Listas Desordenadas

<ul>

<li>Padre

<ul>

<li>Hijo1</li>

<li>Hijo2</li>

<li>Hijo3

<ul>

<li>Nieto</li>

</ul></li>

</ul></li>

</ul>

Padre

Hijo1Hijo2Hijo3

Nieto

RECUERDA





Tablas

Etiquetas para construir una tabla

Obligatorias

<table>...</table>

<tr>...</tr>

<td>...</td>

Opcionales

<th>...</th>




Tablas

Etiquetas para construir una tabla

Obligatorias

<table>...</table>

<tr>...</tr>

<td>...</td>

Opcionales

<th>...</th>




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 CSSContenido FormaTexto Formato




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 CSSContenido FormaTexto Formato




Indice






Etiquetas

Tipos de etiquetas para insertar contenido externo en la web

<img>...</img>

<audio>...</audio>

<video>...</video>




Etiquetas


<img>...</img>

<audio>...</audio>

<video>...</video>




Etiquetas


<img>...</img>

<audio>...</audio>

<video>...</video>




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=“#”

Technology

Taller XHTML y CSS3 - XHTML