1. Qué es el XHTML? Colegio Diocesano San José de Carolinas XHTML significa extensible HiperText Markup Language y es la versión modernizada del tradicional HTML. XHTML es un lenguaje semántico: definimos lo que significan las cosas. Cómo funciona el XHTML? XHTML es un lenguaje basado en etiquetas (tags). Una etiqueta tiene la siguiente forma: <etiqueta> algo aquí </etiqueta> La etiqueta para poner el título principal en la página es <h1> <h1> Prueba de Título </h1> Hay etiquetas que funcionan con una sola parte y son así <etiqueta /> Es muy importante el espacio en blanco que hay entre el nombre de la etiqueta y la barra /. Hay etiquetas que pueden modificarse con atributos. <etiqueta atributo= valor > Siempre en minúsculas y los atributos entre comillas. 2. Estructura XHTML La codificación La primera línea que debemos tener en un documento XHTML es la que marca la codificación. Simplemente el formato en el que se guardan los caracteres en el archivo. La codificación estándar es la Unicode (utf-8) y soporta caracteres de todas las lenguas occidentales (griegos, chinos, japoneses, coreanos ). Hay que escribir lo siguiente: <?xml version= 1.0 enconding= UTF-8?> Podemos omitir esta línea y declarar la codificación dentro de la sección head: <meta http-equiv= Content-Type content= text/html; charset=utf-8 /> El DOCTYPE Se encarga de decirle al navegador que contiene el archivo que está abriendo: <!DOCTYPE html PUBLIC = _//W3C//DTD XHTML 1.0 Strict//EN http://www.w3c.org/tr/xhtml1/dtd/xhtml1-strict.dtd > Después tenemos la cabecera y el cuerpo encerrado entre las etiquetas <html></html> Debemos indicar que nuestro documento es XTHML y qué lengua estamos usando. <html xmlns="http://www.w3.org/1999/xhtml\" xml:lang="es" lang="es"> 1 XHTML
Lengua Código Castellano es Catalán ca Inglés en Francés fr Alemán de Japonés Ja Las páginas se dividen en dos partes: la cabecera y el cuerpo. 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. El cuerpo (llamado body en inglés) contiene todo lo que el usuario ve en su pantalla y la cabecera (llamada head en inglés) contiene todo lo que no se ve (con la única excepción del título de la página, que los navegadores muestran como título de sus ventanas). Las tres etiquetas principales de un documento HTML (<html>, <head>, <body>): <html>: indica el comienzo y el final de un documento HTML. Ninguna etiqueta o contenido puede colocarse antes o después de la etiqueta <html>. En el interior de la etiqueta <html> se definen la cabecera y el cuerpo del documento HTML y todo lo que se coloque fuera de la etiqueta <html> se ignora. <head>: delimita la parte de la cabecera del documento. La cabecera contiene información sobre el propio documento HTML, como por ejemplo su título y el idioma de la página. Los contenidos indicados en la cabecera no son visibles para el usuario, con la excepción de la etiqueta <title>, que se utiliza para indicar el título del documento y que los navegadores lo visualizan en la parte superior izquierda de la ventana del navegador. <body>: delimita el cuerpo del documento HTML. El cuerpo encierra todos los contenidos que se muestran al usuario (párrafos de texto, imágenes, tablas). En general, el <body> de un documento contiene cientos de etiquetas HTML, mientras que el <head> no contiene más que unas pocas. 2 XHTML
La estructura básica de una página XHTML quedaría de la siguiente forma: <html > <head> <title> Título de la Web </title> </head> <body> </body> </html> Ejercicio 1. Realiza una plantilla con todo lo que hemos visto hasta ahora. Guárdalo con el nombre plantilla.html. 3. Etiquetas básicas Párrafos Los párrafos sirven para estructurar el contenido. Para crear un párrafo metemos el texto entre las etiquetas <p> Texto </p> Saltos de línea Para bajar una línea. Para forzar un salto de línea en un párrafo pondremos al final de línea. <br /> Los títulos Los títulos nos sirven para agrupar información. Para poner diferentes títulos utilizamos las etiquetas: <h1> </h1> <h6> </h6> Donde h1 corresponde al título más importante y así sucesivamente. Ejercicio2. Introduce los siguientes títulos. Guárdalo con el nombre ejercicio2.html. Titulo 1: Mis links favoritos. Titulo 2: Blogs. Título 2: Descargas. Título 2: Videojuegos. Titulo 3: Arcade. Título 3: Aventuras. Título 3: Acción. 4. Citas Existen tres etiquetas para poder escribir citas: <blockquote> <q> <cite> 3 XHTML
Las dos primeras se utilizan para decir la cita en sí y la última se emplea para marcar el origen. Blockquote se utiliza para contener citas largas mientras que q es para citas cortas. 5. Separadores horizontales Para introducir una línea de separación horizontal utilizamos la etiqueta <hr /> 6. Marcado básico del texto. Entre las etiquetas más utilizadas para marcar texto se encuentran <em> y <strong>. La etiqueta <em> marca un texto indicando que su importancia es mayor que la del resto del texto. La etiqueta <strong> indica que un determinado texto es de la mayor importancia dentro de la página. Ejemplo: <html> <head> <title>ejemplo de etiqueta em y strong</title> </head> <body> <p>el lenguaje HTML permite marcar algunos segmentos de texto como <em>muy importantes</em> y otros segmentos como <strong>los más importantes</strong>.</p> </body> </html> 7. Cambiar tipo de letra, tamaño y color. Para cambiar el tipo de letra, tamaño y color usamos la etiqueta <font> con los siguientes parámetros: <font> Texto </font> Los parámetros que podemos poner en la etiqueta son: face= Tipo de letra size= 12, size= +1 aumentamos en 1 con respecto al anterior color= red, color= FF9900 <font face= Times New Roman size= 12 color= blue > Texto de prueba </texto> 8. Comentarios Los comentarios son notitas que ponemos en el código pero no salen en el navegador. Tienen que estar en una solo línea. Utilizamos las etiquetas: <! - - Esto es un comentario - - > 4 XHTML
Ejercicio 3. Modifica la plantilla.html y coloca con comentarios para que sirve cada línea de código. Guárdalo con el nombre ejercicio3.html. Ejercicio 4. Crea la siguiente Web a partir de la plantilla.html y guárdala con el nombre ejercicio4.html. H1- Mis grupos favoritos H2- Nombres H3- Tres nombres de grupos H2- Canciones H3- Grupo 1 <cite> Nombre de la canción </cite> <blockquote> <p> párrafo de la canción </p> H3- Grupo 2 <p> Mi canción preferida es <q> Nombre canción </q></p> 9. Enlaces Enlace a una página externa Para enlazar a una página o archivo que está en otro servidor, atizamos la etiqueta <a> de la siguiente forma. <a href= http://www.algo.com title= Descripción > Texto del enlace </a> Si queremos que se abra en otra ventana, añadimos target=_blank Enlace a una página local Para enlazar a una página que está en nuestro servidor. Tenemos que indicar la ruta donde se encuentra el archivo. Si está en el mismo directorio solo hay que escribir el nombre. Si está en un subdirectorio utilizamos la barra /. Y por último si está en un directorio superior pondríamos../../. <a href= pagina.html title= Titulo de la pagina >Texto del enlace </a> Enlace a una dirección de e-mail Podemos crear un enlace que, al pinchar sobre él, se abra automáticamente una ventana del cliente de correo que tenga el usuario para que escriba un mensaje a esa dirección. <a href= malito:ejemplo@gmail.com title= E-mail de ejemplo > Escribe un e-mail </a> 10. Anclas Las anclas nos permiten enlazar a una posición concreta de la página. 5 XHTML
Primero creamos el ancla en el sitio al que queremos enlazar después. Para esto, usamos el atributo id. <h3 id= comentarios >Lista de comentarios</h3> Ahora creamos un link que nos transporte a ese ancla. Ponemos en href la Id precedida de #. <a href= #comentarios title= Lista de comentarios > Leer comentarios</a> También podemos enlazar un ancla a otra página: <a href= pagina.html#comentarios title= Lista de comentarios </a> Ejercicio 5. Crea una página Web en la que aparezcan los siguientes enlaces: Enlace a una página Web externa. o En la misma ventana. o En otra ventana. Enlace a una página Web local. o En la misma ventana. o En otra ventana. Enlace a una ubicación dentro de una misma página Web. o Poner un ancla al principio de la página. A una dirección de correo electrónico. Guárdalo con el nombre ejercicio5.html. 11. Listas Listas ordenadas Muestran sus elementos numerados. Se crean con la etiqueta <ol> <p>mis cantantes favoritos son:</p> <ol> <li>cantante 1</li> <li>cantante 2</li> <li>cantante 3</li> </ol> Listas sin ordenar Marcan cada elemento como una viñeta, de modo que no se sigue una numeración. Se crea con la etiqueta <ul> <p> El helado perfecto: </p> <ul> <li>1 bola de helado de chocolate</li> <li>1 bola de helado de limón</li> <li>sirope de chocolate</li> </ul> 6 XHTML
Listas de definición Colegio Diocesano San José de Carolinas Cada ítem está compuesto por un par de elementos: un término y su definición. Su usa <dl> para crear la lista, <dt> para cada término y <dd> para las definiciones. <p>significado de algunos smileys:</p> <dl> <dt>:)<dt> <dd>sonrisa</dd> <dt>xd<dt> <dd>carcajada</dd> <dt>:p<dt> <dd>sacar la lengua</dd> </dl> Listas anidadas Es una lista que combina las anteriores. 12. Imágenes Podemos usar tres formatos de imagen: GIF, JPEG y PNG. Insertar una imagen Se utiliza la etiqueta <img> con los siguientes atributos. En width y height podemos indicar el valor absoluto en píxeles(200) o relativo en tanto por ciento(50%). El atributo alt contiene una descripción de la imagen que veremos cuando no se haya podido cargar la imagen o cuando pongamos el ratón sobre la imagen, es obligatorio ponerlo. <img src= image.gif width= ancho height= alto alt= descripción /> Imágenes como links Podemos hacer que una imagen sea a su vez un enlace a una página. Para ello la introduciremos dentro de la etiqueta <a> <a href=http://www.google.es title= Mi buscador > <img src= imagen.gif width= 200 height= 40 alt= Mi buscador /> </a> Thumbnails Es una imagen más pequeña que la original que al hacer clic sobre ella cargamos la imagen a tamaño completo. Para ello usaremos un programa de dibujo, escalamos la imagen y guardamos la nueva copia. <a href= Matriz.jpg title= Wallpaper > 7 XHTML
<img src= Matriz_peque.jpg width= 100 height= 50 alt= Wallpaper /> </a> Ejercicio 6. Crea una página Web en la que aparezcan una lista ordenada, una lista de definición, varias imágenes y thumbnails. El tema de la página Web será los animales, pudiendo crear una lista con los diferentes tipos, etc. Guárdalo como ejercicio6.html. 13. Tablas Las tablas nos permiten presentar la información tabulada. Las principales etiquetas son: <table> Crea la tabla <caption> pone título a la tabla crea una fila <td> crea una celda <th> crea una celda de encabezamiento <table> <caption> Videojuegos </caption> <th>título</th> <th>género</th> <td>sonic</td> <td>plataformas</td> </table> Atributos de la tabla: En todos se mide en número de píxeles. Para el tamaño del borde usamos border= 0 Para la distancia entre celdas cellspacing= 1 Para la distancia del contenido de la celda con los bordes se usa cellpadding= 1 Expandir filas y columnas En la etiqueta <th> ponemos colspan= 2 para expandir una celda por varias columnas. Y rowspan= 2 para expandir una celda por varias filas. <table border="2" cellpadding="10" cellspacing="10"> <caption> Videojuegos </caption> <th>título</th> <th colspan= 2 >Género</th> <td>sim city</td> <td>simulación</td> <td>estrategia</td> 8 XHTML
</table> <table border= 1 cellpadding= 1 cellspacing= 1 > <caption> Videojuegos </caption> <th>título</th> <th>sim city</th> <td rowspan= 2 >Géneros</td> <td>simulación</td> <td>estrategia</td> </table> Tabla de colores: FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF 9 XHTML
990000 990033 990066 990099 9900CC 9900FF 993300 993333 993366 993399 9933CC 9933FF 996600 996633 996666 996699 9966CC 9966FF 999900 999933 999966 999999 9999CC 9999FF 99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF 99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF 660000 660033 660066 660099 6600CC 6600FF 663300 663333 663366 663399 6633CC 6633FF 666600 666633 666666 666699 6666CC 6666FF 669900 669933 669966 669999 6699CC 6699FF 66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF 66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF 330000 330033 330066 330099 3300CC 3300FF 333300 333333 333366 333399 3333CC 3333FF 336600 336633 336666 336699 3366CC 3366FF 339900 339933 339966 339999 3399CC 3399FF 33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF 33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF 000000 000033 000066 000099 0000CC 0000FF 003300 003333 003366 003399 0033CC 0033FF 006600 006633 006666 006699 0066CC 0066FF 009900 009933 009966 009999 0099CC 0099FF 00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF 00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF 10 XHTML