qué es xhtml
TRANSCRIPT
Instituto Superior de Electrónica Gamma
¿Qué es XHTML?
• XHTML significa eXtensible HyperText Markup Language.
• Es una versión mas estricta y limpia de HTML.
• XHTML extiende HTML 4.0 combinando la sintaxis de HTML, diseñado para mostrar datos, con la de XML, diseñado para describir los datos.
¿Para que sirve XHTML?
• XHTML surge como el lenguaje cuyo etiquetado permite una correcta interpretación sin importar el dispositivo desde el que se accede a ella.
• XHTML puede incluir otros lenguajes como MathML , SMIL o SVG , al contrario que HTML.
¿Cuáles son las reglas básicas?
• Todos los elementos deben estar jerarquizados.
• Todo documento debe estar bien formado.
• Los nombres de las etiquetas y atributos deben ser en minúscula.
• Todas las etiquetas debe cerrarse.• Los valores de atributos deben ir entre
comillas
¿Cuál es la base de un XHTML?
¿Qué partes podemos distinguir?
Resumiendo
• Las páginas HTML se dividen en dos partes: la cabecera y el cuerpo.
Resumiendo
• La cabecera incluye información sobre la propia página, como por ejemplo su título y su idioma.
• El cuerpo de la página incluye todos sus contenidos, como párrafos de texto e imágenes.
¿Qué son las etiquetas?
Introducción
Etiquetas
• Las etiquetas se componen de 4 partes.
• Ej.: <h1 id=“destacado”>Mi título</h1>
Etiquetas
• También hay etiquetas que constan de una sola parte.
• Ej.: <br /> <hr />
Estructura de un XHTML
Parte I
Índice
EL DOCTYPE y codificación
Elemento raíz(HTML)
La cabecera(HEAD)
El cuerpo(BODY)
La codificación y el DOCTYPE
Parte II
Codificación
• La primera línea que debemos tener en nuestro documento XHTML es la que marca la codificación.
• La codificación estándar es la Unicode (UTF-8) y soporta caracteres de todas las lenguas (occidentales, griegos, chinos, árabes, japoneses, coreanos...).
Codificación y DOCTYPE
<?xml version="1.0"
encoding="UTF-8"?>
• A continuación tenemos que indicar el DOCTYPE.
• Se encarga de decirle al navegador qué contiene el archivo que esta abriendo.
• Usaremos la especificación XHTML 1.0 Strict.
XHTML Strict DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
• Nota: DTD: Document Type Definition (Definición del tipo de documento)
Elemento raíz
• Excepto el DOCTYPE el resto de nuestro documento tiene que ir encerrado por la etiqueta <html>.
• Pero en esa etiqueta tenemos que indicar una serie de cosas, como que nuestro documento es XHTML y la lengua que utilizamos. Si escribimos en español nos quedaría así.
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="es" lang="es">
Algunos códigos de idioma
Código Idioma
es Español
es-CL Español Chileno
en Inglés
fr Francés
de Alemán
it Italiano
ja Japonés
La cabecera
• La cabecera tiene información que no forma parte del contenido de la página.
• Por ahora nos quedaremos sólo con el título de la página. <head>
<title> Título de la web </title>
</head>
El cuerpo
• Por último, nos encontramos con el cuerpo, encerrado entre <body> y </body>.<body>
Aquí va el cuerpo de la web
</body>
Plantilla ejemplo
<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Titulo del documento</title>
</head>
<body><p>Cuerpo del html</p>
</body>
</html>
Etiquetas básicas
Parte III
Párrafos
• Los párrafos sirven para estructurar el contenido.
• Se utiliza la etiqueta <p></p>.
• Ej.: <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec neque in felis vestibulum viverra. </p>
Títulos
• Nos sirven para jerarquizar la información.
• La etiqueta que usamos es <hx> </hx>, siendo x ún nº del 1 al 6.
• Ej.: <h1>Mis grupos favoritos</h1>
<h2>Rock</h2><p>Queen</p>
<p>Poison</p>
Saltos de línea
• A veces dentro de un párrafo necesitamos crear un salto de línea.
• Utilizamos la etiqueta <br />
• Ej: <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
Sed nec neque in felis vestibulum viverra. </p>
Comentarios
• Para ingresar comentarios se debe utilizar la etiqueta <!-- -->
• Ej.: <!– Esto es un comentario -->
Énfasis
• Para dar énfasis a un texto disponemos de 2 etiquetas <em> y <strong>
• Ej.: <p>
<em>Far</em> is not the word because I'm never far <strong>enough</strong>.
</p>
Enlaces
Parte IV
A una página externa
<a href="http://www.google.cl" title=“el mejor buscador"> Google </a>
A una página local
<a href=“perfil.html" title=“info sobre mi"> Mis datos personales </a>
A una dirección de correo
<a href="mailto:[email protected]"
title="E-mail de la princesa Leia">Leia</a>
Listas
Parte V
Listas ordenadas
• Las listas ordenadas muestran sus elementos numerados. Se crean con la etiqueta <ol>.<p>Lista de regalos:</p>
<ol><li>Equipo de música</li>
<li>Notebook</li>
<li>Reproductor de mp3</li>
</ol>
Listas sin ordenar
• Las listas sin ordenar marcan cada elemento con una viñeta. Se crean con la etiqueta <ul>.<p>El helado perfecto:</p>
<ul><li>Frutilla</li>
<li>Frambuesa</li>
<li>Cobertura de chocolate</li>
<li>Crema</li>
<li>Nueces y almendras picadas</li>
</ul>
Imágenes
Parte VI
Formatos de Imágen
• Podemos usar tres formatos de imagen: GIF, JPEG y PNG. – JPEG es el más adecuado para imágenes con
muchos colores, como fotografías, y que no tengan grandes áreas de colores planos.
– GIF son de sólo 8 bits (256 colores), pero podemos usar un color transparente.
– PNG es el estándar y podemos elegir varias profundidades de paleta (número de colores). También podemos usar un canal alpha para crear transparencias.
Diferencias entre formatos
Como insertar una imagen
<img src=“image.gif” width=“ancho” height=“alto” alt=“descripción” />
Tablas
Parte VII
Tablas
• Las tablas son para presentar información tabulada, como horarios.
• Son un complicadas de usar pero a veces necesarias.
• NUNCA se deben utilizar para diagramar un sitio web.
Etiquetas de una tabla
• <table>: Crea la tabla
• <caption>: Pone título a la tabla
• <tr>: Crea una fila
• <td>: Crea una celda
• <th>: Crea una celda de encabezamiento
Ejemplo
<table><caption>Videojuegos</caption>
<tr><th>Título</th><th>Género</th>
</tr><tr>
<td>Sonic</td><td>Plataformas</td>
</tr>
</table>
Formularios
Parte VIII
Los formularios
• Los formularios nos permiten recoger información introducida por el usuario.
• Esta información podemos enviarla por correo electrónico o procesarla con un script.
• Si nuestro servidor dispone de tecnología como PHP o CGI (por ejemplo), podemos guardar la información en una base de datos o generar una página dinámicamente
La etiqueta FORM
• Todo formulario está encerrado por <form> y </form>.
• Dentro de estas etiquetas, van los campos del formulario, y podemos usar párrafos y saltos de línea.
Ejemplo etiqueta FORM
<form action=“mailto:[email protected]” method=“post” enctype=“text/plain”>
<form action=“enviar.php” method=“post” enctype=“text/plain”>
Etiqueta INPUT
<input type="text" id="nombre" name="nombre" size="20" />
El type puede ser:
text
password
checkbox
radio
submit
image
reset
button
hidden
file
Etiqueta TEXTAREA
<textarea name="comentario" id="comentario" cols="30" rows="5">
Bla bla bla
</textarea>