Scribd
Cargar
224 vistas60 páginas

Curso de HTML PDF

Este documento presenta una introducción al lenguaje HTML. Explica que HTML permite definir páginas web y describir hipertexto de forma estructurada. Usa etiquetas para indicar cómo mostrar el texto y estas etiquetas se escriben entre signos <>. También describe la estructura básica de un documento HTML, incluyendo las etiquetas HTML, HEAD, TITLE y BODY.

Cargado por

yopmail
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
224 vistas60 páginas

Curso de HTML PDF

Este documento presenta una introducción al lenguaje HTML. Explica que HTML permite definir páginas web y describir hipertexto de forma estructurada. Usa etiquetas para indicar cómo mostrar el texto y estas etiquetas se escriben entre signos <>. También describe la estructura básica de un documento HTML, incluyendo las etiquetas HTML, HEAD, TITLE y BODY.

Cargado por

yopmail
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 60

CURSO DE

HTML

Mara Cives Senra


Curso de Bsico de HTML
2
3
HTML
Hiper
HTML es un lenguaje que
permite definir pginas web.
Este lenguaje permite

Text
describir hipertexto, es decir,
texto presentado de forma
estructurada y agradable, con
enlaces (hyperlinks) que
conducen a otros documentos
o fuentes de informacin
relacionadas, y con inserciones
Markup
multimedia (grficos, sonido,
imgenes, etc.). Language
Las etiquetas del lenguaje HTML
4

El lenguaje HTML usa etiquetas o directivas (tags) para indicarle al


programa cliente de Web como mostrar el texto.
Las etiquetas estn 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 pgina web. As pues, el archivo
donde est contenido el cdigo HTML es un archivo de texto, con una
peculiaridad, que tiene extensin .html o .htm (es indiferente cul
utilizar). De modo que cuando programemos en HTML lo haremos con
un editor de textos, lo ms sencillo posible y guardaremos nuestros
trabajos con extensin .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 cdigo de la pgina Web para presentar el contenido al usuario (HTML).
Estructura de un documento HTML
5

Se codifica a travs 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 distincin entre maysculas y
minsculas.
Si la pgina contiene algn error HTML, no saldr por
pantalla.
El archivo debe tener extensin .htm .html
6 Estructura de un documento HTML
Cabecera y cuerpo del documento
7

<HTML> HTML: Limita el documento e indica que se


encuentra escrito en este lenguaje.
HEAD: define la cabecera del documento
HTML, esta cabecera suele contener
<HEAD>
informacin sobre el documento que no se
muestra directamente al usuario. Como por
ejemplo el ttulo de la ventana del
<TITLE> navegador.
TITLE: define el ttulo de la pgina. Por lo
general, el ttulo aparece en la barra de
<BODY> ttulo de la ventana del navegador.
BODY: encierra el contenido del documento.
Ejemplo 1
8

Para guardar los <HTML>


distintos ejemplos <HEAD>
vamos a crear una
carpeta llamada <TITLE>Ejemplo 1</TITLE>
PRCTICAS DE HTML. </HEAD>
<BODY>
Hola mundo
Escribiremos el
programa en el block </BODY>
de notas y lo
guardaremos con el
</HTML>
nombre de Ejemplo 1.
Organizacin del texto
9

Guardamos el Los saltos de lnea, tabuladores y otros separadores (excepto los


archivo con el espacios entre palabras) son ignorados por los navegadores por lo que
nombre de: hay que insertarlos mediante etiquetas.
<html>
<HEAD>
<TITLE>Ejemplo 1_1</TITLE>
</HEAD> .
Ejemplo 1_1
<body>
Tecnologa
de la
Informacin
y la
Comunicacin
</body>
</html>
Organizacin del texto
10

Salto de lnea: <br>


Divisin de prrafos (mayor espacio que el salto de lnea) <p>
Alineacin del texto
Centrado <center> </center> o <p align =center>

Derecha <p align=right>

Izquierda <p align=left>

Sangrado de texto <blockquote>


Subrayado <u> </u> <!-- --> Comentarios. Son
Cursiva <i> </i> directivas o etiquetas que
nunca se mostrarn en el
Negrita <b> </b> navegador. Sirven al
Subndice <sub> </sub> programador para
Superndice <sup> </sup> documentar la pgina web.
Ejemplo 1_2
11
<html>
<HEAD>
<TITLE> Ejemplo 1_2</TITLE>
</HEAD>
<body>
<br> <br>
<b><center> texto centrado en negrita</b>
<br>
Escribimos el <p align=right> texto alineado a la derecha
<br>
programa en el <p align=left> texto alineado a la izquierda
<center><u><i> texto centrado, subrayado y en cursiva</u></i>
block de notas y <br> <br>
<p align=left>La Repblica Oriental del Uruguay es un pas de Amrica del
lo guardamos Sur cuyo territorio es el segundo ms pequeo del subcontinente, con una superficie
de 176.215 km. Limita con el Brasil al norte y noreste y con Argentina al oeste. El
con el nombre de lmite es el Ro Uruguay. Por el sur, tiene costas sobre el Ro de la Plata, el cual lo
separa de la provincia de Buenos Aires y de la ciudad de Buenos Aires. Por el sureste,
Ejemplo 1_2. tiene costas sobre el Ocano Atlntico.

<blockquote><p align=left>La Repblica Oriental del Uruguay es un pas


de Amrica del Sur cuyo territorio es el segundo ms pequeo del subcontinente, con
una superficie de 176.215 km. Limita con el Brasil al norte y noreste y con Argentina
al oeste. El lmite es el Ro Uruguay. Por el sur, tiene costas sobre el Ro de la Plata,
el cual lo separa de la provincia de Buenos Aires. Por el sureste, tiene costas sobre el
Ocano Atlntica</blockquote>
</body>
</html>
12 Resultado del archivo Ejemplo 1_2.htm
En este ejemplo se han aplicado varias etiquetas para cambiar la alineacin y los
atributos del texto (cursiva, negrita y subrayado).
Organizacin del texto
13

El tag FONT permite modificar la


apariencia del la fuente utilizada en la
pgina.
Su estructura es la siguiente:

<FONT atributo=valor del atributo>


Los atributos del tag FONT son los

siguientes:
Atributos de Font
face - color - size
14

Valor del Ejemplo del Apariencia


Atributo Funcin del tag
Atributo uso del tag y atributo del atributo
<font Aplicar una Fuente
Nombre de
face face="arial,helvetica" fuente a cierta
la fuente arial
>Fuente arial </font> parte del texto
Nmero
Aplica un color a
hexadecimal <font
una fuente que se
color o la palabra color="#ff0000">Letr Letra roja
usa en cierta
clave del a roja </font>
parte del texto
color
Define el tamao
Un nmero <font size=1> de la fuente que
entero Letra tamao 1 se usa en cierta Letra tamao
size
positivo o </font> parte del 1
negativo documento (valores
entre 1 y 7)
Ejemplo 1_3
15

<html>
En este ejemplo <HEAD>
pondremos en <TITLE>Ejemplo 1_3</TITLE>
prctica los </HEAD>
<body>
atributos de color,
<br> <br>
y tamao de la <b><center><font size=2> Texto en tamao 2 centrado y en
fuente del texto. negrita</font></b>
<br>
Tambin <p align=right> <font size=7>texto alineado a la derecha y en
cambiaremos de tamao 7 </font>
tipo de fuente. <br>
<center><u><i><font color="#FF0000" size=5>texto
Guardar el centrado, subrayado, en cursiva y de color rojo. De tamao 5
archivo con el </font></u></i>
nombre de <br> <br>
Ejemplo 1_3.htm <p align=left> <font size=3 face="comic sans ms">texto
alineado a la izquierda. Fuente Comic Sans ms y en tamao 3 </font>
</body>
</html>
16 Ejecucin del archivo Ejemplo 1_3
En este documento se han utilizado distintos atributos del texto (Alineacin, tipos
de fuentes y atributos del texto)
Encabezados
17

Se utilizan para crear ttulos dentro de una


<H1> pgina.
Sintaxis general:
<H2>
<H nmero de encabezado>
<H3> La diferencia entre los distintos tipos de
encabezados es el tamao de la letra, el
<H4> tipo de resaltado, y la separacin existente
<H5> entre el texto y los elementos que tienen
encima y debajo de l.
<H6> Se puede alinear el texto mediante la
propiedad align . <H3 align=center>
18 Encabezados
En la tabla anterior se puede observar el comportamiento de los distintos
encabezados.
Pueden llevar el atributo color (etiqueta STYLE dentro de HEAD), por ejemplo:
H1 { color: blue } H2 { color: #000080 }
Ejemplo 2_1
19

<HTML>
<HEAD>
<TITLE>Ejemplo 2_1</TITLE>
</HEAD>
<BODY>
<H1>LOS ENCABEZADOS (este es un encabezado H1)</H1>
Guardamos el <br>
documento <h3 align="center"> <font color="00800">este segundo titular es H3 y de color verde
con el nombre </font></h3>
de: <!-- Aqu va un comentario que no es
interpretado por el navegador -->
Ejemplo 2_1
<P>Esta es un pgina con titulares,
que tiene tambin un prrafo (este) y unos cuantos
saltos de lnea (ms abajo).</P>

Primer salto<br>
Segundo salto<br>
Tercer salto<br>
</BODY>
</HTML>
Marquesinas
20

Las marquesinas son lneas 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
<marquee> propiedades.
Atributo direction: permite modificar la direccin
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
21

Atributo behavior: este atributo modifica el tipo


Al archivo
Ejemplo 2_1 de movimiento.
le aadimos alternate: de lado a lado de la ventana como si
al principio rebotara.
de la
seccin scroll: de un lado a otro, continuamente .
<body> la slide: de un lado a otro, pero una sola vez
siguiente
orden. Atributo bgcolor: nos permite cambiar el color
Volvemos a de fondo de la marquesina.
guardar el
archivo
(ejemplo 2_2). <marquee bgcolor="#006699" behavior="alternate"
direction="right"> <font color=#FFFF00 size="5">ejemplo
de marquesina </font> </marquee>
HIPERTEXTO
22

El hipertexto permite conectar entre s diferentes


documentos, elementos multimedia, pginas web,
etc.
Los elementos sobre los que se inserta el enlace o
hipervnculo deben estar entre las etiquetas <a> y
</a>.
La etiqueta <a> llevar siempre un atributo, que
puede ser:
href

name
Realizar la

HIPERTEXTO
pgina
enlace0
(Santiago)

23

<A HREF="URL">.....</A>: Es el ms habitual de


los atributos y sirve para saltar entre diferentes
URLs.
<A HREF="http://www.lavozdegalicia.es">Visita esta pgina</A>

<A NAME="parte1">Primera parte</A>:


Utilizamos el atributo name para dar nombre a
una seccin de nuestro documento. Posteriormente,
cuando en nuestro documento necesitemos incluir un
vnculo a dicha seccin escribiremos:
<A HREF="#parte1">Ir a la primera parte</A>
HIPERTEXTO Ejemplo 3
24

<HTML>
<HEAD>
<TITLE>Ejemplo 3</TITLE>
</HEAD>
<BODY>
<A NAME="arriba"><H1>Pgina 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
25

Referencia absoluta Referencia relativa al sitio Punto de fijacin

Enlaza con una ubicacin externa al sitio en el que


se encuentra el documento.
La ubicacin pertenece a Internet, por lo que hay
que empezar la referencia por http://, el nombre
del dominio y a veces el nombre de la pgina.
Si no se escribe el nombre de la pgina se cargar
la pgina de inicio asociada al dominio.
<a href=http//www.peleteiro.com> Colegio Peleteiro
HIPERTEXTO Tipos de referencias
26

Referencia absoluta Referencia relativa al sitio Punto de fijacin

Enlaza con un documento


Carpeta que se encuentra en el mismo
principal
directorio que el documento
Documento.htm actual.
Documento que contiene
Deber indicarse el nombreel enlace y la extensin 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 2
CARPETA
carpeta.
Carpeta principal
Documento.htm

CARPETA
Ejemplo1_1.htm

CARPETA 2

<a href=carpeta1/ejemplo1_1.htm Primer ejercicio</a>


(suponemos que carpeta1 est dentro de la carpeta o directorio donde se encuentra el documento)
HIPERTEXTO Tipos de referencias
27

Referencia absoluta Referencia relativa al sitio Punto de fijacin

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> Ttulo de esa seccin </a>

La sintaxis del enlace sera:


<a href=nombre del documento#nombre del punto de enlace texto que lleva el enlace </a>
opcional
Ejemplo 3_1
28

<HTML>
<HEAD>
<TITLE>Ejemplo 3_1</TITLE>
</HEAD> Para realizar este ejercicio se
<BODY> har una copia del archivo
<A NAME="arriba"><H1>Pgina de enlaces</H1></A>
<A HREF="#abajo">Ir abajo</A><br> ejemplo 3 y se le aadirn las
lnea marcadas como nuevas.
<A HREF="imagenes\enlace0.htm">Ir a enlace</A><br><br>
<A HREF="http://www.peleteiro.com/">Ir a peleteiro</A><br> El archivo se guardar con el
<br>.<br>.<br>.<br>.<br>.<br>.<br>. nombre de Ejemplo 3_1
Enlace a una imagen<br><br>
<a href="imagenes/rosas.jpg" target="_blank" > foto rosas </a>
<br><br><br><br><br><br>

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
29

El destino del enlace determina en qu ventana va


a ser abierta la pgina vinculada.
El atributo target determina el destino del enlace.
Valor Significado
Abre el documento vinculado en una ventana nueva del
_blank navegador.

Abre el documento vinculado en la ventana del marco que


_parent contiene el vnculo.

Es la opcin predeterminada. Abre el documento vinculado en el


_self mismo marco o ventana que el vnculo.

Abre el documento vinculado en la ventana completa del


_top navegador.
Ejemplo: Enlaces
30

<html>
<head> <title> Pgina de Enlaces</title> </head>
<body>
Guardar este
documento <br><br><br><br>
con el nombre
<a href ="http://www.peleteiro.com"
de ENLACE.
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
31

Se puede modificar el color predefinido para el


enlace (normal, visitado y activo). Tambin se
puede eliminar el tpico subrayado.
Los atributos que modifican el color del enlace
pertenecen a la etiqueta <Body>.
link =cdigo de color: para los enlaces normales.
vlink =cdigo de color: para los enlaces visitados.

alink =cdigo 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>.
IMGENES
32

Para colocar una imagen debemos


SRC utilizar la etiqueta <img>.
ALIGN Los principales atributos de la etiqueta
son:
ALT
SRC =ruta_imagen
BORDER ALIGN= left/right/top/middle/bottom.
WIDTH ALT =texto explicativo.

HEIGHT BORDER=valor del borde.

WIDTH=valor del ancho,

HEIGHT =valor de la altura


IMGENES - SRC
33

Establece la localizacin de la imagen que


queremos insertar, es decir, la ruta de acceso al
archivo grfico (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 grfico.

<img SRC="imagenes/rosas.jpg">

(Creamos una carpeta llamada IMGENES y en ella guardamos


una imagen llamada rosas.jpg)
IMGENES - ALIGN
34

Establece la alineacin que va a tener la imagen en


la pgina con respecto a la lnea en la que se
encuentra.
La alineacin puede ser:
Horizontal (left o right)
Vertical (top o bottom)
Ejemplo: Imgenes
35

<HTML>
<HEAD> <TITLE> IMGENES </TITLE> </HEAD>
<BODY>
<marquee bgcolor="#006699" behavior="alternate" direction="rigth">
<font color="#FFFF00" size="5"> IMGENES </font> </marquee>
<H1> PGINA CON IMGENES </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 lneas.
En este ejemplo el texto aparece a la derecha de la imagen y si es muy extenso de dividir en
varias lneas.
</BODY>
</HTML>
IMGENES - ALT
36

Permite mostrar una descripcin de la imagen


cuando no puede visualizarse o cuando pasamos el
cursor del ratn sobre ella.

<img alt="ramo de rosas" SRC="imagenes/rosas.jpg">


IMGENES - border
37

Este atributo permite definir un borde para la imagen.


Puede tomar valores numricos que representan el
grosor del borde expresado en pxeles.
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 vnculos.
<img alt="ramo de rosas" SRC="imagenes/rosas.jpg"
border="6">
IMGENES Y ENLACES
38

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


39
TABLAS
Las tablas son posiblemente la manera ms clara y cmoda de organizar la
informacin.
Tambin es el modo ms adecuado de maquetar texto y grficos.
Proporciona un mayor control sobre los textos que el parmetro ALIGN.
Para definir una tabla, primero se deben especificar las caractersticas de
la tabla, luego las de cada fila y dentro de sta, cada celda.
De un modo simplificado, el cdigo de una tabla de una fila y dos columnas
sera el siguiente:

<TABLE>
<TR>
<TD> Contenido de la 1 celda </TD>
<TD> Contenido de la 2 celda </TD>
</TR>
</TABLE>
TABLAS
40

Para mejorar el aspecto de la tabla, podemos aadir una


serie de atributos a la etiqueta <table> que nos van a
permitir modificar los siguientes parmetros:
border Grosor del borde que se dibujar alrededor de las celdas.

cellspacing Define el nmero de pxeles que separarn las celdas.

Especifica el nmero de pxeles que habr entre el borde de una celda y


cellpadding su contenido.
width Especifica la anchura de la tabla.

bgcolor Color de fondo.

background Imagen de fondo.

bordercolor Color del borde.

align Alinea la tabla a la izquierda (LEFT), derecha (RIGHT) o centro (CENTER)


TABLAS - Filas
41

Cada fila se define con una etiqueta <TR>, que


puede tener los siguientes atributos:

Alinea el contenido de las celdas de la fila


align horizontalmente a izquierda (LEFT), a
derecha (RIGHT) o centro (CENTER).
Alinea el contenido de las celdas de la fila
valign verticalmente arriba (TOP), abajo
(BOTTOM) o centro (MIDDLE).
TABLAS - Celdas
42

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
43

Alinea el contenido de la celda horizontalmente a izquierda (LEFT),


align derecha (RIGHT) o centro (CENTER).
Alinea el contenido de la celda verticalmente arriba (TOP), abajo
valign (BOTTOM) o centro (MIDDLE)
width Especifica el ancho de la celda en pxeles
Impide que, en el interior de la celda, se rompa la lnea de texto aunque
nowrap esta sea larga (si no figura nowrap el texto se distribuye en varios
renglones respetando el ancho de la celda).
Especifica el nmero de celdas de la fila situadas a la derecha de la
colspan actual que se unen a sta (contando la celda actual).
bgcolor Color de fondo.

background Imagen de fondo.

bordercolor Color de borde


Especifica el nmero de celdas de la columna situadas debajo de la
rowspan actual que se unen a sta
TABLAS - Ttulo
44

La etiqueta <CAPTION> permite incluir un ttulo en


la tabla.
Esta etiqueta tiene un atributo: ALIGN.
ALIGN puede tomar dos valores:
TOP (valor por defecto) pondr el ttulo en la parte
superior de la tabla.
BOTTOM coloca el ttulo al final de la tabla.
45
LISTAS
Permiten enumerar una serie de contenidos.
Todas ellas se pueden meter unas dentro de otras
formando rboles o jerarquas.
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)
46

La etiqueta <UL> nos permite presentar listas de


elementos sin orden alguno.
Cada elemento de la lista ir normalmente
precedido por un crculo como se puede ver en el
ejemplo:

<ul>
<LI>Primer elemento Primer elemento
<LI>Segundo elemento Segundo elemento
</ul>
LISTAS Listas desordenadas (II)
47

La etiqueta <UL> admite el parmetro TYPE


donde se le puede indicar al navegador el dibujo
que preceder a cada elemento de la lista.
Para mayor flexibilidad se admite tambin como
parmetro de la etiqueta <LI>.
<ul>
<LI type=square>Primer elemento Primer elemento
<LI type=circle>Segundo elemento oSegundo elemento
<LI type=disc>Tercer elemento Tercer elemento
</ul>
LISTAS Listas ordenadas (I)
48

La etiqueta <OL> nos permite presentar listas de


elementos ordenados de menor a mayor.
Normalmente cada elemento de la lista ir
precedido por su nmero en el orden.

<ol>
<LI>Primer elemento 1. Primer elemento
<LI>Segundo elemento 2. Segundo elemento
</ol>
LISTAS Listas ordenadas (II)
49

La etiqueta <OL> admite una serie de atributos


para cambiar sus caractersticas.
TYPE Indica al navegador el tipo de numeracin que
preceder a cada elemento de la lista. Puede ser
igual a l, a, A, i, I.
START =num ,indica al navegador el nmero por el
que se empezarn a contar los elementos de la lista.
<ol>
<LI TYPE="a">Primer elemento
a. Primer elemento
<LI TYPE="A">Segundo elemento B. Segundo elemento
<LI TYPE="i">Tercer elemento
<LI TYPE="I">Cuarto elemento
iii. Tercer elemento
<LI TYPE=1">Quinto elemento IV. Cuarto elemento
</ol> 5. Quinto elemento
LISTAS Listas de definiciones
50

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
definicin.
Esto se hace por medio de las etiquetas <DT> y
<DD> de la siguiente manera:
Primer elemento
<DL>
Definicin del primer
<DT>Primer elemento <DD>
Definicin del primer elemento. elemento
<DT>Segundo elemento <DD> Segundo elemento
Definicin del segundo elemento. Definicin del segundo
</DL> elemento.
STYLE
51

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>
<style> body { background-color: #FFCC66;}
h1 {color: white;
background-color: #FC9804;}
</style>
</head>
<body>
<center><h1>TECNOLOGA </h1></center>
<br> <br><br> <br><br> <br>
<center><h1>INFORMACIN </h1></center>

</BODY>
</HTML>

52 Ejemplo 3_2
En el estilo del body aadimos la siguiente lnea:
background-image: url(imagenes/rosas.jpg)
Background-repeat
53

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
(imgenes/rosas.jpg) background-repeat: repeat-y;}
Background-repeat
54

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 background-
position
Ubicacin de la imagen de fondo
55
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 (pxeles,
centmetros, etc.) o se pueden usar las palabras "top"
(superior), "bottom" (inferior), "center" (centro), "left"
(izquierda) y "right" (derecha).
background-position
56
background-position
57

El modelo siguiente ilustra cmo funciona el sistema:


La tabla siguiente proporciona varios ejemplos.
58 Paleta de colores estndar
Se puede usar cualquiera de las palabras clave o nmeros hexadecimales mostrados en la tabla de
arriba.
DIRECCIONES DE INTERS:
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.

59 Guarda el archivo con el nombre de Copia Ejemplo 2_2

NOTA: Combina los encabezados con la marquesina.


VOLVER
Ejercicio de enlaces
60

Crea tres documentos HTML cada uno con nombres diferentes. Cralos usando los
tags que hemos visto en los captulos anteriores.
En el primer documento crea hipervnculos hacia los otros dos documentos.
Cada uno de los otros documentos debe tener vnculos 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 travs de un
hipervnculo en cada uno de los documentos.

También podría gustarte