CURSO DE HTML María Cives Senra
2 HTML HTML es un lenguaje que permite definir páginas web. Este lenguaje permite describir hipertexto, es decir, texto presentado de forma estructurada y agradable, con enlaces (hyperlinks) que conducen a otros documentos o fuentes de información relacionadas, y con inserciones multimedia (gráficos, sonido, imágenes, etc.). Hiper Text Markup Language
Las etiquetas del lenguaje HTML 3 El lenguaje HTML usa etiquetas o directivas (tags) para indicarle al programa cliente de Web como mostrar el texto. Las etiquetas están formadas por determinados caracteres metidos entre los signos <>, y con la barra </> cuando se trata de la segunda etiqueta de un efecto (la de cierre). Por ejemplo: <title> para abrir y </title> para cerrar. Este lenguaje se escribe en un documento de texto, por eso necesitamos un editor de textos para escribir una página web. Así pues, el archivo donde está contenido el código HTML es un archivo de texto, con una peculiaridad, que tiene extensión.html o.htm (es indiferente cuál utilizar). De modo que cuando programemos en HTML lo haremos con un editor de textos, lo más sencillo posible y guardaremos nuestros trabajos con extensión.htm. El navegador es el programa que conoce el lenguaje de la World Wide Web, por una parte se sabe comunicar con los servidores para pedir los archivos que el usuario solicita (los protocolos), y por otro entiende el código de la página Web para presentar el contenido al usuario (HTML).
Estructura de un documento HTML 4 Se codifica a través de unas etiquetas especiales, generalmente van en parejas, una de apertura y otra de cierre. <nombre etiqueta> texto afectado </nombre etiqueta> Cada etiqueta puede poseer una serie de atributos que modifiquen su contenido. Pueden ser obligatorios u opcionales <body bgcolor="#ffffff" > En las etiquetas no hay distinción entre mayúsculas y minúsculas. Si la página contiene algún error HTML, no saldrá por pantalla. El archivo debe tener extensión.htm ó.html
5 Estructura de un documento HTML
Cabecera y cuerpo del documento 6 <HTML> <HEAD> <TITLE> <BODY> HTML: Limita el documento e indica que se encuentra escrito en este lenguaje. HEAD: define la cabecera del documento HTML, esta cabecera suele contener información sobre el documento que no se muestra directamente al usuario. Como por ejemplo el título de la ventana del navegador. TITLE: define el título de la página. Por lo general, el título aparece en la barra de título de la ventana del navegador. BODY: encierra el contenido del documento.
Ejemplo 1 7 Para guardar los distintos ejemplos vamos a crear una carpeta llamada PRÁCTICAS DE HTML. Escribiremos el programa en el block de notas y lo guardaremos con el nombre de Ejemplo 1. <HTML> <HEAD> <TITLE>Ejemplo 1</TITLE> </HEAD> <BODY> Hola mundo </BODY> </HTML>
Organización del texto 8 Guardamos el archivo con el nombre de: Ejemplo 1_1 Los saltos de línea, tabuladores y otros separadores (excepto los espacios entre palabras) son ignorados por los navegadores por lo que hay que insertarlos mediante etiquetas. <html> <HEAD> <TITLE>Ejemplo 1_1</TITLE> </HEAD>. <body> Tecnología de la Información y la Comunicación </body> </html>
Organización del texto 9 Salto de línea: <br> División de párrafos (mayor espacio que el salto de línea) <p> Alineación del texto Centrado <center> </center> o <p align =center> Derecha <p align=right> Izquierda <p align=left> Sangrado de texto <blockquote> Subrayado <u> </u> Cursiva <i> </i> Negrita <b> </b> Subíndice <sub> </sub> Superíndice <sup> </sup> <!-- --> Comentarios. Son directivas o etiquetas que nunca se mostrarán en el navegador. Sirven al programador para documentar la página web.
Ejemplo 1_2 10 Escribimos el programa en el block de notas y lo guardamos con el nombre de Ejemplo 1_2. <html> <HEAD> <TITLE> Ejemplo 1_2</TITLE> </HEAD> <body> <br> <br> <b><center> texto centrado en negrita</b> <br> <p align=right> texto alineado a la derecha <br> <p align=left> texto alineado a la izquierda <center><u><i> texto centrado, subrayado y en cursiva</u></i> <br> <br> <p align=left>la República Oriental del Uruguay es un país de América del Sur cuyo territorio es el segundo más pequeño del subcontinente, con una superficie de 176.215 km². Limita con el Brasil al norte y noreste y con Argentina al oeste. El límite es el Río Uruguay. Por el sur, tiene costas sobre el Río de la Plata, el cual lo separa de la provincia de Buenos Aires y de la ciudad de Buenos Aires. Por el sureste, tiene costas sobre el Océano Atlántico. <blockquote><p align=left>la República Oriental del Uruguay es un país de América del Sur cuyo territorio es el segundo más pequeño del subcontinente, con una superficie de 176.215 km². Limita con el Brasil al norte y noreste y con Argentina al oeste. El límite es el Río Uruguay. Por el sur, tiene costas sobre el Río de la Plata, el cual lo separa de la provincia de Buenos Aires. Por el sureste, tiene costas sobre el Océano Atlántica</blockquote> </body> </html>
11 Resultado del archivo Ejemplo 1_2.htm En este ejemplo se han aplicado varias etiquetas para cambiar la alineación y los atributos del texto (cursiva, negrita y subrayado).
Organización del texto 12 El tag FONT permite modificar la apariencia del la fuente utilizada en la página. Su estructura es la siguiente: <FONT atributo=valor del atributo> Los atributos del tag FONT son los siguientes:
13 Atributos de Font face - color - size Atributo Valor del Atributo Ejemplo del uso del tag y atributo Función del tag Apariencia del atributo face Nombre de la fuente <font face="arial,helvetica" >Fuente arial </font> Aplicar una fuente a cierta parte del texto Fuente arial color Número hexadecimal o la palabra clave del color <font color="#ff0000">letr a roja </font> Aplica un color a una fuente que se usa en cierta parte del texto Letra roja size Un número entero positivo o negativo <font size=1> Letra tamaño 1 </font> Define el tamaño de la fuente que se usa en cierta parte del documento (valores entre 1 y 7) Letra tamaño 1
Ejemplo 1_3 14 En este ejemplo pondremos en práctica los atributos de color, y tamaño de la fuente del texto. También cambiaremos de tipo de fuente. Guardar el archivo con el nombre de Ejemplo 1_3.htm <html> <HEAD> <TITLE>Ejemplo 1_3</TITLE> </HEAD> <body> <br> <br> <b><center><font size=2> Texto en tamaño 2 centrado y en negrita</font></b> <br> <p align=right> <font size=7>texto alineado a la derecha y en tamaño 7 </font> <br> <center><u><i><font color="#ff0000" size=5>texto centrado, subrayado, en cursiva y de color rojo. De tamaño 5 </font></u></i> <br> <br> <p align=left> <font size=3 face="comic sans ms">texto alineado a la izquierda. Fuente Comic Sans ms y en tamaño 3 </font> </body> </html>
15 Ejecución del archivo Ejemplo 1_3 En este documento se han utilizado distintos atributos del texto (Alineación, tipos de fuentes y atributos del texto)
Encabezados 16 <H1> <H2> <H3> <H4> <H5> <H6> Se utilizan para crear títulos dentro de una página. Sintaxis general: <H número de encabezado> La diferencia entre los distintos tipos de encabezados es el tamaño de la letra, el tipo de resaltado, y la separación existente entre el texto y los elementos que tienen encima y debajo de él. Se puede alinear el texto mediante la propiedad align. <H3 align= center >
17 Encabezados En la tabla anterior se puede observar el comportamiento de los distintos encabezados. Pueden llevar el atributo color, por ejemplo: H1 { color: blue } H2 { color: #000080 }
Ejemplo 2_1 18 Guardamos el documento con el nombre de: Ejemplo 2_1 <HTML> <HEAD> <TITLE>Ejemplo 2_1</TITLE> </HEAD> <BODY> <H1>LOS ENCABEZADOS (este es un encabezado H1)</H1> <br> <h3 align="center"> <font color="00800">este segundo titular es H3 y de color verde </font></h3> <!-- Aquí va un comentario que no es interpretado por el navegador --> <P>Esta es un página con titulares, que tiene también un párrafo (este) y unos cuantos saltos de línea (más abajo).</p> Primer salto<br> Segundo salto<br> Tercer salto<br> </BODY> </HTML>
Marquesinas 19 <marquee> Las marquesinas son líneas de texto que pueden desplazarse de un lado a otro de la ventana en forma lineal. Por defecto se desplaza de derecha a izquierda indefinidamente, pero se pueden modificar estas propiedades. Atributo direction: permite modificar la dirección en la que se mueve el texto. down: de arriba abajo up: de abajo a arriba right, de derecha a izquierda o left de izquierda a derecha.
Marquesinas 20 Al archivo Ejemplo 2_1 le añadimos al principio de la sección <body> la siguiente orden. Volvemos a guardar el archivo (ejemplo 2_2). Atributo behavior: este atributo modifica el tipo de movimiento. alternate: de lado a lado de la ventana como si rebotara. scroll: de un lado a otro, continuamente. slide: de un lado a otro, pero una sola vez Atributo bgcolor: nos permite cambiar el color de fondo de la marquesina. <marquee bgcolor="#006699" behavior="alternate" direction="right"> <font color= #FFFF00 size="5">ejemplo de marquesina </font> </marquee>
HIPERTEXTO 21 El hipertexto permite conectar entre sí diferentes documentos, elementos multimedia, páginas web, etc. Los elementos sobre los que se inserta el enlace o hipervínculo debe estar entre las etiquetas <a> y </a>. La etiqueta <a> llevará siempre un atributo, que puede ser: href name
HIPERTEXTO Realizar la página enlace0 (Santiago) 22 <A HREF="URL">...</A>: Es el más habitual de los atributos y sirve para saltar entre diferentes URLs. <A HREF="http://www.lavozdegalicia.es">Visita esta página</a> <A NAME="parte1">Primera parte</a>: Utilizamos el atributo name para dar nombre a una sección de nuestro documento. Posteriormente, cuando en nuestro documento queramos incluir un vínculo a dicha sección escribiremos: <A HREF="#parte1">Ir a la primera parte</a>
HIPERTEXTO Ejemplo 3 23 <HTML> <HEAD> <TITLE>Ejemplo 3</TITLE> </HEAD> <BODY> <A NAME="arriba"><H1>Página de enlaces</h1></a> <A HREF="#abajo">Ir abajo</a><br> <A HREF="ejemplo1_1.htm">Ir a ejemplo 1</A><br><br> <A HREF="http://www.peleteiro.com/">Ir a peleteiro</a><br> <br>.<br>.<br>.<br>.<br>.<br>.<br>.<br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br>.<br>.<br>.<br>.<br>.<br> <A NAME="abajo"><br></A> <A HREF="#arriba">Ir arriba</a> </BODY> </HTML>
HIPERTEXTO Tipos de referencias 24 Referencia absoluta Referencia relativa al sitio Punto de fijación Enlaza con una ubicación externa al sitio en el que se encuentra el documento. La ubicación pertenece a Internet, por lo que hay que empezar la referencia por http://, el nombre del dominio y a veces el nombre de la página. Si no se escribe el nombre de la página se cargará la página de inicio asociada al dominio. <a href= http//www.peleteiro.com > Colegio Peleteiro
HIPERTEXTO Tipos de referencias 25 Carpeta principal Documento.htm CARPETA Ejemplo1_1.htm Referencia absoluta Referencia relativa al sitio Punto de fijación Enlaza con un documento Carpeta que principal se encuentra en el mismo directorio que el documento actual. Documento.htm Documento que contiene Deberá indicarse el nombre el enlace y la extensión del archivo. Por ejemplo: CARPETA 1 <a href= ejemplo1_1.htm Primer ejercicio</a> Ejemplo1_1.htm Si el documento con el que se quiere enlazar esta en una carpeta diferente a la actual deberá indicarse, delante del nombre del archivo, la ruta de acceso a dicha carpeta. CARPETA 2 <a href= carpeta1/ejemplo1_1.htm Primer ejercicio</a> CARPETA 2 (suponemos que carpeta1 está dentro de la carpeta o directorio donde se encuentra el documento)
HIPERTEXTO Tipos de referencias 26 Referencia absoluta Referencia relativa al sitio Punto de fijación Enlaza con un punto determinado del documento actual o de otro diferente. Para definir el punto de enlace utilizaremos la etiqueta <a name>. Por ejemplo: <a name= arriba > Título de esa sección </a> La sintaxis del enlace sería: <a href= nombre del documento#nombre del punto de enlace texto que lleva el enlace </a> opcional
Ejemplo 3_1 27 <HTML> <HEAD> <TITLE>Ejemplo 3_1</TITLE> </HEAD> <BODY> <A NAME="arriba"><H1>Página de enlaces</h1></a> <A HREF="#abajo">Ir abajo</a><br> <A HREF="imagenes\enlace0.htm">Ir a enlace</a><br><br> <A HREF="http://www.peleteiro.com/">Ir a peleteiro</a><br> <br>.<br>.<br>.<br>.<br>.<br>.<br>. Enlace a una imagen<br><br> <a href="imagenes/rosas.jpg" target="_blank" > foto rosas </a> <br><br><br><br><br><br> Para realizar este ejercicio se hará una copia del archivo ejemplo 3 y se le añadirán las línea marcadas como nuevas. El archivo se guardará con el nombre de Ejemplo 3_1 Enlace a un archivo pdf<br><br> <br><a href="imagenes/santiago.pdf" target="_blank" > Archivo pdf <br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br>.<br>.<br>.<br>.<br>.<br> <A NAME="abajo"><br></A> <A HREF="#arriba">Ir arriba</a> </BODY> </HTML>
HIPERTEXTO Destino del enlace 28 El destino del enlace determina en qué ventana va a ser abierta la página vinculada. El atributo target determina el destino del enlace. Valor _blank _parent _self _top Significado Abre el documento vinculado en una ventana nueva del navegador. Abre el documento vinculado en la ventana del marco que contiene el vínculo. Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo. Abre el documento vinculado en la ventana completa del navegador.
Ejemplo: Enlaces 29 Guardar este documento con el nombre de ENLACE. <html> <head> <title> Página de Enlaces</title> </head> <body> <br><br><br><br> <a href ="http://www.peleteiro.com" target="_blank"> Visita a Peleteiro (_blank) </a> <br><br><br><br> <a href ="http://www.lanasa.net" target= "_parent"> Visita a la NASA (_parent) </a> <br><br><br><br> </body > </html>
HIPERTEXTO Cambiar el color de los enlaces 30 Se puede modificar el color predefinido para el enlace (normal, visitado y activo). También se puede eliminar el típico subrayado. Los atributos que modifican el color del enlace pertenecen a la etiqueta <Body>. link = código de color : para los enlaces normales. vink = código de color : para los enlaces visitados. alink = código de color : para los enlaces activos (o en el momento de ser pulsados. Para eliminar el subrayado utilizaremos el atributo style="text-decoration:none en la etiqueta <A>.
STYLE 31 Permite definir reglas de estilo en el encabezado del documento. Puede utilizarse para poner un color de fondo al documento o adjudicar un color de fuente y fondo a las cabeceras.
<html> <head> <title> Ejercicio 3_2 </title> <body> </BODY> </HTML> <style> body { </style> </head> background-color: #FFCC66;} h1 {color: white; background-color: #FC9804;} <center><h1>tecnología </h1></center> <br> <br><br> <br><br> <br> <center><h1>información </h1></center> 32 Ejemplo 3_2 En el estilo del body añadimos la siguiente línea: background-image: url(imagenes/rosas.jpg)
Background-repeat 33 El valor inicial de "background-repeat es "repetir. Por eso en el ejemplo anterior la imagen de fondo se repite en sentido horizontal y vertical, formando un mosaico. Para que la imagen se repita solamente en sentido horizontal debemos usar: BODY {background-color: # FFFFFF; background-image: url (imagenes/rosas.jpg); background-repeat: repeat-x; } Para que la imagen se repita solamente en sentido vertical debemos usar: BODY {background-color: # FFFFFF; background-image: url (imágenes/rosas.jpg) background-repeat: repeat-y;}
Background-repeat 34 Finalmente, para que la imagen aparezca solamente una vez debemos usar: BODY {background-color: # FFFFFF; background-image: url (bg-flecha.gif); background-repeat: no-repeat; } Para colocar la imagen en el centro se utilizó backgroundposition
35 Ubicación de la imagen de fondo background-position Por defecto, una imagen de fondo se posiciona en la esquina superior izquierda de la pantalla. La propiedad background-position permite cambiar el valor por defecto y posicionar la imagen de fondo en cualquier lugar de la pantalla. Las coordenadas se pueden indicar como porcentajes del ancho de la pantalla, como unidades fijas (píxeles, centímetros, etc.) o se pueden usar las palabras "top" (superior), "bottom" (inferior), "center" (centro), "left" (izquierda) y "right" (derecha).
36 background-position
background-position 37 El modelo siguiente ilustra cómo funciona el sistema: La tabla siguiente proporciona varios ejemplos.
IMÁGENES 38 SRC ALIGN ALT BORDER WIDTH HEIGHT Para colocar una imagen debemos utilizar la etiqueta <img>. Los principales atributos de la etiqueta son: SRC = ruta_imagen ALIGN= left/right/top/middle/bottom. ALT = texto explicativo. BORDER=valor del borde. WIDTH= valor del ancho, HEIGHT = valor de la altura
IMÁGENES - SRC 39 Establece la localización de la imagen que queremos insertar, es decir, la ruta de acceso al archivo gráfico (imagen). La ruta de acceso puede ser relativa a la estructura de carpetas del sitio web o absoluta, en cuyo caso se debe dar la URL completa del archivo gráfico. <img SRC="imagenes/rosas.jpg"> (Creamos una carpeta llamada IMÁGENES y en ella guardamos una imagen llamada rosas.jpg)
IMÁGENES - ALIGN 40 Establece la alineación que va a tener la imagen en la página con respecto a la línea en la que se encuentra. La alineación puede ser: Horizontal (left o right) Vertical (top o bottom)
Ejemplo: Imágenes 41 <HTML> <HEAD> <TITLE> IMÁGENES </TITLE> </HEAD> <BODY> <marquee bgcolor="#006699" behavior="alternate" direction="rigth"> <font color="#ffff00" size="5"> IMÁGENES </font> </marquee> <H1> PÁGINA CON IMÁGENES </H1> <br> <h3 align="center"> <font color="00800"> Imagen sin texto </font></h3> <img SRC="imagenes/rosas.jpg"> <img src="imagenes/rosas.jpg" align="left> <BR><BR><BR><BR> En este ejemplo el texto aparece a la derecha de la imagen y si es muy extenso de dividirá en varias líneas. En este ejemplo el texto aparece a la derecha de la imagen y si es muy extenso de dividirá en varias líneas. </BODY> </HTML>
IMÁGENES - ALT 42 Permite mostrar una descripción de la imagen cuando no puede visualizarse o cuando pasamos el cursor del ratón sobre ella. <img alt="ramo de rosas" SRC="imagenes/rosas.jpg">
IMÁGENES - border 43 Este atributo permite definir un borde para la imagen. Puede tomar valores numéricos que representan el grosor del borde expresado en píxeles. Por defecto aparecerá el color negro a no ser que la imagen sea un enlace, en cuyo caso el color del borde será el color establecido por los vínculos. <img alt="ramo de rosas" SRC="imagenes/rosas.jpg" border="6">
IMÁGENES Y ENLACES 44 Podemos utilizar una imagen como objeto de enlace. <a href=http://www.peleteiro.com> <img alt="ramo de rosas" SRC="imagenes/rosas.jpg" border="6"> </a> Si no se desea el borde debemos escribir border= 0
TABLAS 45 Las tablas son posiblemente la manera más clara y cómoda de organizar la información. También es el modo más adecuado de maquetar texto y gráficos. Proporciona un mayor control sobre los textos que el parámetro ALIGN. Para definir una tabla, primero se deben especificar las características de la tabla, luego las de cada fila y dentro de ésta, cada celda. De un modo simplificado, el código de una tabla de una fila y dos columnas sería el siguiente: <TABLE> <TR> <TD> Contenido de la 1ª celda </TD> <TD> Contenido de la 2ª celda </TD> </TR> </TABLE>
TABLAS 46 Para mejorar el aspecto de la tabla, podemos añadir una serie de atributos a la etiqueta <table> que nos van a permitir modificar los siguientes parámetros: border cellspacing cellpadding width bgcolor background bordercolor align Grosor del borde que se dibujará alrededor de las celdas. Define el número de píxeles que separarán las celdas. Especifica el número de píxeles que habrá entre el borde de una celda y su contenido. Especifica la anchura de la tabla. Color de fondo. Imagen de fondo. Color del borde. Alinea la tabla a la izquierda (LEFT), derecha (RIGHT) o centro (CENTER)
TABLAS - Filas 47 Cada fila se define con una etiqueta <TR>, que puede tener los siguientes atributos: align valign Alinea el contenido de las celdas de la fila horizontalmente a izquierda (LEFT), a derecha (RIGHT) o centro (CENTER). Alinea el contenido de las celdas de la fila verticalmente arriba (TOP), abajo (BOTTOM) o centro (MIDDLE).
TABLAS - Celdas 48 Cada celda se define con una etiqueta <td> o <th> Estas etiquetas son equivalentes, pero <th> se utiliza para encabezados, de modo que su interior se escribirá por defecto en negrita y centrado. La etiqueta <td> tiene una serie de atributos que tienen como objetivo controlar el formato de la celda y su contenido.
TABLAS Atributos de la celda 49 align valign width nowrap colspan bgcolor background bordercolor rowspan Alinea el contenido de la celda horizontalmente a izquierda (LEFT), derecha (RIGHT) o centro (CENTER). Alinea el contenido de la celda verticalmente arriba (TOP), abajo (BOTTOM) o centro (MIDDLE) Especifica el ancho de la celda en píxeles Impide que, en el interior de la celda, se rompa la línea de texto aunque esta sea larga (si no figura nowrap el texto se distribuye en varios renglones respetando el ancho de la celda). Especifica el número de celdas de la fila situadas a la derecha de la actual que se unen a ésta (contando la celda actual). Color de fondo. Imagen de fondo. Color de borde Especifica el número de celdas de la columna situadas debajo de la actual que se unen a ésta
TABLAS - Título 50 La etiqueta <CAPTION> permite incluir un título en la tabla. Esta etiqueta tiene un atributo: ALIGN. ALIGN puede tomar dos valores: TOP (valor por defecto) pondrá el título en la parte superior de la tabla. BOTTOM coloca el título al final de la tabla.
LISTAS 51 Permiten enumerar una serie de contenidos. Todas ellas se pueden meter unas dentro de otras formando árboles o jerarquías. El formato general es el siguiente: <tipo_lista> <LI>Primer elemento <LI>Segundo elemento </tipo_lista> Donde <tipo_lista> pueden ser listas desordenadas <ul>, listas ordenadas <ol>, o listas de definiciones <dl>.
LISTAS Listas desordenadas (I) 52 La etiqueta <UL> nos permite presentar listas de elementos sin orden alguno. Cada elemento de la lista irá normalmente precedido por un círculo como se puede ver en el ejemplo: <ul> <LI>Primer elemento <LI>Segundo elemento </ul> Primer elemento Segundo elemento
LISTAS Listas desordenadas (II) 53 La etiqueta <UL> admite el parámetro TYPE donde se le puede indicar al navegador el dibujo que precederá a cada elemento de la lista. Para mayor flexibilidad se admite también como parámetro de la etiqueta <LI>. <ul> <LI type= square >Primer elemento <LI type= circle >Segundo elemento <LI type= disc >Tercer elemento </ul> Primer elemento osegundo elemento Tercer elemento
LISTAS Listas ordenadas (I) 54 La etiqueta <OL> nos permite presentar listas de elementos ordenados de menor a mayor. Normalmente cada elemento de la lista irá precedido por su número en el orden. <ol> <LI>Primer elemento <LI>Segundo elemento </ol> 1. Primer elemento 2. Segundo elemento
55 <ol> LISTAS Listas ordenadas (II) La etiqueta <OL> admite una serie de atributos para cambiar sus características. TYPE Indica al navegador el tipo de numeración que precederá a cada elemento de la lista. Puede ser igual a l, a, A, i, I. START = num,indica al navegador el número por el que se empezarán a contar los elementos de la lista. <LI TYPE="a">Primer elemento <LI TYPE="A">Segundo elemento <LI TYPE="i">Tercer elemento <LI TYPE="I">Cuarto elemento <LI TYPE= 1">Quinto elemento </ol> a. Primer elemento B. Segundo elemento iii. Tercer elemento IV. Cuarto elemento 5. Quinto elemento
LISTAS Listas de definiciones 56 Es el único tipo de lista que no utiliza la etiqueta <LI>. Al presentar una lista de definiciones, tiene que plasmar de manera distinta el objeto definido y la definición. Esto se hace por medio de las etiquetas <DT> y <DD> de la siguiente manera: <DL> <DT>Primer elemento <DD> Definición del primer elemento. <DT>Segundo elemento <DD> Definición del segundo elemento. </DL> Primer elemento Definición del primer elemento Segundo elemento Definición del segundo elemento.
57 Paleta de colores estándar Se puede usar cualquiera de las palabras clave o números hexadecimales mostrados en la tabla de arriba. DIRECCIONES DE INTERÉS: http://html-color-codes.info/codigos-de-colores-hexadecimales/ http://www.sitiosargentina.com.ar/webmaster/codigos%20de%20colores.htm
Actividad Realiza una copia del documento Ejemplo 2_2 Sobre la copia define distintas marquesinas. En distintas partes del documento Con distintos movimientos Y con distintos tipos de textos. 58 Guarda el archivo con el nombre de Copia Ejemplo 2_2 NOTA: Combina los encabezados con la marquesina. VOLVER
Ejercicio de enlaces 59 Crea tres documentos HTML cada uno con nombres diferentes. Créalos usando los tags que hemos visto en los capítulos anteriores. En el primer documento crea hipervínculos hacia los otros dos documentos. Cada uno de los otros documentos debe tener vínculos hacia los otros documentos. Marca una parte de alguno de los documentos usando el tag <A> y el atributo "name". Haz que la parte que marcaste en el punto anterior sea accesible a través de un hipervínculo en cada uno de los documentos.