Вы находитесь на странице: 1из 19

Empezando

Iniciaremos con esta prctica nuestro acercamiento al lenguaje HTML. Las


explicaciones sern breves y abordarn los aspectos bsicos de forma que podamos
avanzar con cierta agilidad. Encontrars una pgina dedicada a recursos para ampliar
estos conocimientos bsicos.
Comenzamos pues comentando que los documentos HTML no son ms que documentos
de texto con una serie de etiquetas. stas le sirven al navegador para interpretar de que
forma tiene que presentar el texto, las imgenes o los sonidos en la pantalla.
Al tratarse de documentos de texto podemos afirmar que nos bastara con el Bloc de
notas de Windows para crear nuestras pginas HTML.
Aunque este procedimiento resultara bastante incmodo para su uso habitual, ya que
nos obligara a conocer todas las etiquetas del HTML, puede ser interesante para que
comprendamos la estructura de una pgina WEB y ser el primero que utilicemos.
El formato de las etiquetas HTML
Las etiquetas HTML se escriben encerradas entre ngulos. Normalmente se utilizan dos
etiquetas: una de inicio y otra de final para indicar que ha terminado el efecto que
queramos presentar. La nica diferencia entre ambas es que la de cierre lleva una barra
inclinada "/" antes del cdigo.
<etiqueta>texto que presentar el efecto</etiqueta>
Por ejemplo:<B>texto</B> dar como efecto texto
La estructura bsica de una pgina WEB
Para que un navegador reconozca que lo que est viendo es una pgina WEB se utiliza
la siguiente estructura:
<HTML> (Etiqueta que indica que lo que viene a continuacin es un documento HTML)
<HEAD>(Etiqueta de apertura de la cabecera).
Aqu va la informacin sobre el ttulo de la pgina, el autor, palabras clave, etc. que no se
presentarn en la ventana del navegador, salvo el ttulo que aparecera en la barra de ttulo
de la parte superior
</HEAD>(Etiqueta de cierre de la cabecera)
<BODY>(Etiqueta de apertura del cuerpo)
Aqu va el contenido de la pgina que ser lo que se presente en pantalla.
</BODY>(Etiqueta de cierre del cuerpo)
</HTML>(Etiqueta de cierre del documento)
<BR> es la etiqueta que sirve para indicarle al navegador que debe hacer un salto de
lnea.

<P> indica un salto de prrafo e introducir un doble salto de lnea.


El elemento <P> admite cuatro atributos: ALIGN=LEFT (por defecto)
ALIGN=RIGHT, ALIGN=CENTER y ALIGN=JUSTIFY
Ejercicio 1: Utiliza el Notepad (Bloc de Notas) y Guarda el archivo en la unidad A,
como Ejercicio1.htm y como tipo Documento de texto:
<HTML>
<HEAD>
<TITLE> Ejercicio nmero 1 </TITLE>
</HEAD>
<BODY>
<p align="justify">
Esto es el ms sencillo de los documentos HTML. Hemos introducido un nuevo
elemento cuya misin es alinear prrafos. En este caso realiza una justificacin
completa. Existen otras formas de alinearlo, cambiando la palabra justify por:
right (alineacin derecha) left (alineacin izquierda) center (alineacin
centrada)
</p>
</BODY>
</HTML>
Otro interesante efecto es el elemento lleno <BLOCKQUOTE> que sirve para
presentar prrafos adentrados (como si estuviesen tabulados).
Se escribir as:
<BLOCKQUOTE>
texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto
<BLOCKQUOTE>
texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto
</BLOCKQUOTE>
</BLOCKQUOTE>
Fjate que en este ejemplo hay un anidamiento, y por tanto, debe haber dos cierres
</BLOCKQUOTE> al final
Otro separador de bloques de texto es el elemento vaco <HR> (por Horizontal Rule).
Este sera el resultado:

El elemento <HR> admite dos parmetros: WIDTH y SIZE. El primero define la


longitud de la lnea y el segundo su anchura. No es obligado usar los dos a la vez
Por ejemplo, si escribes

<HR WIDTH=400 SIZE=5>


El resultado ser:

El valor del atributo WIDTH se puede expresar, como en el ejemplo anterior, en nmero
de puntos (pxels), o en tantos por ciento referidos al ancho total de la ventana. As:
<HR WIDTH=80% SIZE=5>
El resultado ser:

Adems se puede indicar su posicin respecto a los mrgenes de la ventana con los
atributos ALIGN=CENTER (por defecto) ALIGN=LEFT y ALIGN=RIGHT. Por
ejemplo:
<HR WIDTH=80% SIZE=5 ALIGN=LEFT>
El resultado ser:

O bien:
<HR WIDTH=80% SIZE=5 ALIGN=RIGHT>
El resultado ser:

Otros efectos en el texto


Una o varias lneas de texto, pueden estar centradas respecto a los mrgenes de la
ventana. Esto afecta slo al texto que hay entre <CENTER> y </CENTER>, pero no a
todo el prrafo. Por ejemplo:
<CENTER>texto centrado texto centrado</CENTER>
Se ver:
txto texto texto texto texto texto texto texto

Esto, adems de a texto slo, se puede aplicar a una tabla, una imagen o cualquier otra
cosa.
Texto en negrita:
<B>Texto en negrita</B>
Texto realzado:
<STRONG>Texto realzado</STRONG>
Texto en itlica:
<I>Texto en itlica</I>
Texto subrayado:
<U>Texto subrayado</U>
Texto tachado:
<STRIKE>Texto tachado</STRIKE>
Texto superndice
Texto normal
<sup>Texto Superndice</sup>
Texto subndiceTexto nomal
<sub>Texto Subndice</sub>
Texto parpadeante
Podemos hacer que el texto parpadee as utilizando la etiqueta <blink>. Usadlo con
cuidado porque es una de las cosas que menos gustan a los navegantes. He aqui un
ejemplo
<html>
<head>
<title>ejemplo de texto parpadeante</title>
</head>
<body>
Esta lnea es normal.
<blink>Esta en cambio parpadea.</blink>
</body>
</html>

Las cabeceras
Uno de los elementos de formato que nos resultar imprescindible ser la diferenciacin
de tamaos de letra para poder introducir ttulos de epgrafes y organizar visualmente la
informacin.

Disponemos para esta tarea de seis formatos predeterminados de cabeceras. Para


utilizarlos deberemos poner la etiqueta de apertura delante de la primera letra cuya
apariencia deseemos modificar y cerrar tras la ltima para volver al texto normal.
(Adems las etiquetas de cabecera introducen un salto de prrafo sin necesidad de
indicarlo)
Ejemplo: <H1> Primer ejemplo de como escribir un documento HTML </H1>
Este cdigo...
...da como resultado
<H1>Cabecera 1</H1> Cabecera 1
<H2>Cabecera 2</H2> Cabecera 2
<H3>Cabecera 3</H3> Cabecera 3
<H4>Cabecera 4</H4> Cabecera 4
<H5>Cabecera 5</H5> Cabecera 5
<H6>Cabecera 6</H6> Cabecera 6

Otra forma de cambiar los tamaos de letra es utilizar el elemento <FONT > con el
atributo VALOR, que es un nmero entre 1 y 7. El valor por defecto del texto es 3, por
lo que valor puede ser positivo (+) o negativo (-) respecto a 3. Una gran ventaja de esta
notacin respecto a la anterior es que no se produce un salto de prrafo despus de cada
cambio, por lo que pueden hacerse cosas como esta:
<FONT SIZE=3>A</font><FONT SIZE=4>A</font><FONT SIZE=5>A</font>
<FONT SIZE=6>A</font><FONT SIZE=7>A</font><FONT SIZE=6>A</font>
<FONT SIZE=5>A</font><FONT SIZE=4>A</font><FONT SIZE=3>A</FONT>

Un atributo del elemento <FONT> permite elegir tipos de letra entre los varios de que
dispone por defecto Windows. Se trata del atributo FACE. Este atributo permite forzar
el tipo de letra que el diseador de la pgina quiere que vea el cliente, sin importar el
que por defecto tenga establecido el visualizador. Si escribes
<FONT FACE="arial">Texto de prueba 12345 con tipo ARIAL</FONT>
<FONT FACE="times new roman">Texto de prueba 12345 con tipo TIMES NEW
ROMAN</FONT>
<FONT FACE="courier new">Texto de prueba 12345 con tipo COURIER
NEW</FONT>
<FONT FACE="courier">Texto de prueba 12345 con tipo COURIER</FONT>
<FONT FACE="roman">Texto de prueba 12345 con tipo ROMAN</FONT>
<FONT FACE="small fonts">Texto de prueba 12345 con tipo SMALL
FONTS</FONT>

Se ver:
Texto de prueba 12345 con tipo ARIAL
Texto de prueba 12345 con tipo TIMES NEW ROMAN
Texto de prueba 12345 con tipo COURIER NEW
Texto de prueba 12345 con tipo COURIER
Texto de prueba 12345 con tipo ROMAN
Texto de prueba 12345 con tipo SMALL FONTS
Por supuesto, este atributo es compatible con otro, como color y tamao. Por ejemplo, si
escribes
<FONT FACE="impact" SIZE=6 COLOR="red">Texto de prueba 12345 con tipo
IMPACT</FONT>
Se ver en el ordenador (en la fotocopia no apreciaremos el color):
Texto de prueba 12345 con tipo IMPACT
Ejercicio3: Utiliza el Bloc de Notas y Guarda el archivo en A:\, como tipos.htm y
como tipo Documento de texto:
<HTML>
<HEAD>
<TITLE> Tamaos y tipos de fuentes </TITLE>
</HEAD>
<BODY>
<p align="center">
<h2>Prueba de Tamaos de fuentes</h2>
</p>
<H1> Texto de prueba (H1)</H1>.
<H2> Texto de prueba (H2)</H2>
<H3> Texto de prueba (H3)</H3>
<H4> Texto de prueba (H4)</H4>
<H5> Texto de prueba (H5)</H5>
<H6> Texto de prueba (H6)</H6>
<p align="center">
<h2>Prueba de Tipos de fuentes</h2>
</p>
<FONT FACE="arial">Texto de prueba 12345 con tipo ARIAL</FONT>
<FONT FACE="times new roman">Texto de prueba 12345 con tipo TIMES
NEW ROMAN</FONT>
<FONT FACE="courier new">Texto de prueba 12345 con tipo COURIER
NEW</FONT>
<FONT FACE="courier">Texto de prueba 12345 con tipo COURIER</FONT>
<FONT FACE="roman">Texto de prueba 12345 con tipo ROMAN</FONT>
<FONT FACE="small fonts">Texto de prueba 12345 con tipo SMALL
FONTS</FONT>
</BODY>

</HTML>

Texto en color
Se puede controlar el color del texto utilizando el elemento <FONT> con el atributo
COLOR=xxx, donde xxx es el nombre en ingls del color que se desea. Hay que tener
presente que algunos no se vern o se vern mal si la mquina no soporta 256 colores.
Por supuesto, este efecto es anidable con el de tamao y todos los dems. Si escribes:
<B><FONT COLOR="red">Texto ROJO </FONT><br>
<FONT COLOR="blue">Texto AZUL </FONT><br>
<FONT COLOR="navy">Texto AZUL MARINO </FONT><br>
<FONT COLOR="green">Texto VERDE </FONT><br>
<FONT COLOR="olive">Texto OLIVA </FONT><br>
<FONT COLOR="yellow">Texto AMARILLO </FONT><br>
<FONT COLOR="lime">Texto LIMA </FONT><br>
<FONT COLOR="magenta">Texto MAGENTA </FONT><br>
<FONT COLOR="purple">Texto PURPURA </FONT><br>
<FONT COLOR="cyan">Texto CYAN </FONT><br>
<FONT COLOR="brown">Texto MARRON </FONT><br>
<FONT COLOR="black">Texto NEGRO </FONT><br>
<FONT COLOR="gray">Texto GRIS </FONT><br>
<FONT COLOR="teal">Texto TEAL </FONT><br>
<FONT COLOR="white">Texto BLANCO </FONT><br>
</B>
Se ver as (aunque no se apreciar en la fotocopia):
Texto ROJO
Texto AZUL
Texto AZUL MARINO
Texto VERDE
Texto OLIVA
Texto AMARILLO
Texto LIMA
Texto MAGENTA
Texto PURPURA
Texto CYAN
Texto MARRON
Texto NEGRO
Texto GRIS
Texto TEAL
Texto BLANCO
He aqu una combinacin de colores y tamaos:

<FONT SIZE=6 COLOR="red">E</FONT><FONT SIZE=4>sto es una </FONT>


<FONT SIZE=6 COLOR="red">P</FONT><FONT SIZE=4>rueba </FONT>
Resulta (la E y la P estn en color rojo):
Esto es una Prueba
Los colores tambin se pueden definir en hexadecimal (por ejemplo el rojo es <FONT
COLOR=#FF0000>). Cuando son colores bsicos, como los del ejemplo de arriba, es
ms cmodo escribir el nombre aunque sea en ingls, pero cuando se trata de definir un
color que "no tiene nombre" no hay ms remedio que usar la codificacin hexadecimal.
Cdigos hexadecimales de color
Estos cdigos de color se pueden utilizar como valor de atributo en otros elementos,
veamos algunos casos:
<FONT COLOR=#FFFF00>, que nos da el color del texto
<BODY BGCOLOR=#9F5F9F>, que nos da el color de fondo de la pgina
<BODY LINK=#0000FF>, que nos da el color del hipervnculo antes de ser visitado (ya
lo veremos ms adelante)
<BODY VLINK=#4F2F4F>, que nos da el color del hipervnculo despus de ser
visitado
<BODY ALINK=#FF0000>, que nos da el color del hipervnculo en el momento de en
el momento de su activacin
Algunos no funcionarn en ciertos visualizadores, as como si Windows no est
configurado con 256 colores al menos.
La codificacin de estos colores est basada en mezclas cromticas RGB (RED GREEN
BLUE), es decir, se mezclan ciertas cantidades de los tres colores bsicos (rojo verde y
azul), para conseguir el color deseado. La cantidad de cada color est definida por el
cdigo que utilizamos, que tiene seis dgitos en hexadecimal. Si los cortamos en 3
grupos de dos de izquierda a derecha, obtendremos la cantidad (en hexadecimal) de
cada color.
Lista de cdigos RGB
White rgb=#FFFFFF
Red rgb=#FF0000
Green rgb=#00FF00
Blue rgb=#0000FF
Magenta rgb=#FF00FF
Cyan rgb=#00FFFF
Yellow rgb=#FFFF00
Black rgb=#000000
Aquamarine rgb=#70DB93
Baker's Chocolate rgb=#5C3317
Blue Violet rgb=#9F5F9F
Brass rgb=#B5A642
Bright Gold rgb=#D9D919

Brown rgb=#A62A2A
Bronze rgb=#8C7853
Bronze II rgb=#A67D3D
Cadet Blue rgb=#5F9F9F
Cool Copper rgb=#D98719
Copper rgb=#B87333
Coral rgb=#FF7F00
Corn Flower Blue rgb=#42426F
Dark Brown rgb=#5C4033
Dark Green rgb=#2F4F2F
Dark Green Copper rgb=#4A766E
Dark Olive Green rgb=#4F4F2F
Dark Orchid rgb=#9932CD
Dark Purple rgb=#871F78
Dark Slate Blue rgb=#6B238E
Dark Slate Grey rgb=#2F4F4F
Dark Tan rgb=#97694F
Dark Turquoise rgb=#7093DB
Dark Wood rgb=#855E42
Dim Grey rgb=#545454
Dusty Rose rgb=#856363
Feldspar rgb=#D19275
Firebrick rgb=#8E2323
Forest Green rgb=#238E23
Gold rgb=#CD7F32
Goldenrod rgb=#DBDB70
Grey rgb=#C0C0C0
Green Copper rgb=#527F76
Green Yellow rgb=#93DB70
Hunter Green rgb=#215E21
Indian Red rgb=#4E2F2F
Khaki rgb=#9F9F5F
Light Blue rgb=#C0D9D9
Light Grey rgb=#A8A8A8
Light Steel Blue rgb=#8F8FBD
Light Wood rgb=#E9C2A6
Lime Green rgb=#32CD32
Mandarian Orange rgb=#E47833
Maroon rgb=#8E236B
Medium Aquamarine rgb=#32CD99
Medium Blue rgb=#3232CD
Medium Forest Green rgb=#6B8E23
Medium Goldenrod rgb=#EAEAAE
Medium Orchid rgb=#9370DB
Medium Sea Green rgb=#426F42
Medium Slate Blue rgb=#7F00FF
Medium Spring Green rgb=#7FFF00
Medium Turquoise rgb=#70DBDB
Medium Violet Red rgb=#DB7093
Medium Wood rgb=#A68064

Midnight Blue rgb=#2F2F4F


Navy Blue rgb=#23238E
Neon Blue rgb=#4D4DFF
Neon Pink rgb=#FF6EC7
New Midnight Blue rgb=#00009C
New Tan rgb=#EBC79E
Old Gold rgb=#CFB53B
Orange rgb=#FF7F00
Orange Red rgb=#FF2400
Orchid rgb=#DB70DB
Pale Green rgb=#8FBC8F
Pink rgb=#BC8F8F
Plum rgb=#EAADEA
Quartz rgb=#D9D9F3
Rich Blue rgb=#5959AB
Salmon rgb=#6F4242
Scarlet rgb=#8C1717
Sea Green rgb=#238E68
Semi-Sweet Chocolate rgb=#6B4226
Sienna rgb=#8E6B23
Silver rgb=#E6E8FA
Sky Blue rgb=#3299CC
Slate Blue rgb=#007FFF
Spicy Pink rgb=#FF1CAE
Spring Green rgb=#00FF7F
Steel Blue rgb=#236B8E
Summer Sky rgb=#38B0DE
Tan rgb=#DB9370
Thistle rgb=#D8BFD8
Turquoise rgb=#ADEAEA
Very Dark Brown rgb=#5C4033
Very Light Grey rgb=#CDCDCD
Violet rgb=#4F2F4F
Violet Red rgb=#CC3299
Wheat rgb=#D8D8BF
Yellow Green rgb=#99CC32

Ejercicio4: Utilizar el Notepad (Bloc de Notas) y Guardar el archivo en la unidad A,


como textocolor.htm y como tipo Documento de texto:
<HTML>
<HEAD>
<TITLE> Tamaos, Tipos y colores de fuentes </TITLE>
</HEAD>
<BODY>
<p align="center">

<h2>Prueba de Tipos y colores de fuentes con el nombre del color</h2>


</p>
<FONT FACE="arial">Texto de prueba 12345 con tipo ARIAL
Color="red"</FONT>
<FONT FACE="times new roman">Texto de prueba 12345 con tipo TIMES
NEW ROMAN Color="green"</FONT>
<FONT FACE="courier new">Texto de prueba 12345 con tipo COURIER NEW
Color="navy"</FONT>
<FONT FACE="courier">Texto de prueba 12345 con tipo COURIER
Color="olive"</FONT>
<FONT FACE="roman">Texto de prueba 12345 con tipo ROMAN
Color="blue"</FONT>
<FONT FACE="small fonts">Texto de prueba 12345 con tipo SMALL FONTS
Color="silver"</FONT>
<p align="center">
<h2>Prueba de Tipos y colores de fuentes con colores en formato RGB</h2>
</p>
<FONT FACE="arial">Texto de prueba 12345 con tipo ARIAL
Color="#FF0000"</FONT>
<FONT FACE="times new roman">Texto de prueba 12345 con tipo TIMES
NEW ROMAN Color="#00FF00"</FONT>
<FONT FACE="courier new">Texto de prueba 12345 con tipo COURIER NEW
Color="#0000FF"</FONT>
<FONT FACE="courier">Texto de prueba 12345 con tipo COURIER
Color="#663399"</FONT>
</BODY>
</HTML>

No funciona, ehhh! Se ponen todas las etiquetas al principio


<FONT FACE="arial" COLOR="red">Texto de prueba 12345 con tipo
ARIAL</FONT>

Caracteres especiales

: &aacute;

: &eacute;
: &iacute;
: &oacute;
: &uacute;
: &Aacute;
: &Eacute;
: &Iacute;
: &Oacute;
: &Uacute;
: &uuml;
: &Uuml;
: &ntilde;
: &Ntilde;
: &#191;
: &#161;

Listas y mens
Hay elementos que permiten crear texto con varios formatos de listado: Estos pueden
ser ordenados <OL> (se refiere a numerados, no ordenados por algun criterio),
desordenados <UL> (no numerados).
Veamos como es la sintaxis bsica y apariencia de estos elementos, a partir de los
cuales, pueden hacerse combinaciones muy complejas mediante anidamientos de unos
con otros, hasta conseguir prcticamente cualquier presentacin deseada:
Esto es una lista ordenada (numerada):
1. Primera linea
2. Segunda linea
Se escribe:
<OL>
<LI>Primera linea
<LI>Segunda linea
</OL>
Fjate en que los elementos <LI> no tienen cierre. Terminan cuando aparece otro igual o
se cierra la lista.
Esto es una lista desordenada ( no numerada):

Primera linea
segunda linea

Se escribe:
<UL>
<LI>Primera linea
<LI>Segunda linea
</UL>
En este caso los nmeros han sido sustituidos por unos puntos gruesos. Esa es la
apariencia por defecto; se puede cambiar usando el atributo TYPE con tres valores (el
valor por defecto es DISC). Con el valor CIRCLE se ver:
o
o

Primera linea
segunda linea

Se escribe:
<UL TYPE=CIRCLE>
<LI>Primera linea
<LI>Segunda linea
</UL>
Tambin puede usarse el valor SQUARE. As:

Primera linea
segunda linea

Se escribe:
<UL TYPE=SQUARE>
<LI>Primera linea
<LI>Segunda linea
</UL>
Las listas ordenadas no slo se pueden ordenar con nmeros. Tambin se pueden utilizar
letras y numeracin romana tanto en maysculas como minsculas. Para esto se utiliza
el atributo TYPE del elemento <OL> con los siguientes valores: TYPE=1 (por defecto)
para nmeros, TYPE=A para letras maysculas, TYPE=a para letras minsculas,
TYPE=I para numeracin romana en maysculas y TYPE=i para numeracin romana
en minsculas.
Esto es una lista ordenada con letras maysculas:
A.
B.
C.
D.

Primera linea
Segunda linea
Tercera linea
Cuarta linea

Se escribe:
<OL TYPE=A>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea

</OL>
Esto es una lista ordenada con letras minsculas:
a.
b.
c.
d.

Primera linea
Segunda linea
Tercera linea
Cuarta linea

Se escribe:
<OL TYPE=a>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>
Esto es una lista ordenada con numeracin romana en maysculas:
I. Primera linea
II. Segunda linea
III. Tercera linea
IV. Cuarta linea
Se escribe:
<OL TYPE=I>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>
Esto es una lista ordenada con numeracin romana en minsculas:
i.
ii.
iii.
iv.

Primera linea
Segunda linea
Tercera linea
Cuarta linea

Se escribe:
<OL TYPE=i>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>
En algunos casos puede interesarnos que la lista no comience por el nmero 1 (por
ejemplo si es una lista que continua en otra pgina). Se puede conseguir con el atributo
START combinado con TYPE.

Esto es una lista ordenada con letras maysculas y que comienza por la E:
E.
F.
G.
H.

Primera linea
Segunda linea
Tercera linea
Cuarta linea

Se escribe:
<OL TYPE=A START=5>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>
El nmero que pones en el atributo START indica en que nmero o letra comenzar la
lista. la E es la quinta letra.

Ejemplos de listas
Desordenadas
Desordenada simple con marcas

Linea de texto 1
Linea de texto 2
Linea de texto 3

Se escribe:
<UL>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
</UL>
Desordenada simple con marcas. Comienzo una posicin a la derecha

Linea de texto 1
Linea de texto 2
Linea de texto 3

Se escribe:
<UL>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
</UL>

Desordenada simple con marcas. Comienzo dos posiciones a la derecha


o
o
o

Linea de texto 1
Linea de texto 2
Linea de texto 3

Se escribe:
<UL>
<UL TYPE=DISC>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
</UL>
</UL>
Ordenadas
Ordenada simple
1. Linea de texto 1
2. Linea de texto 2
3. Linea de texto 3
Se escribe:
<OL>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
</OL>
Ordenada con 4 niveles, todos ordenados
1. Linea de texto 1
2. Linea de texto 2
3. Linea de texto 3
1. Linea de texto 3.1
2. Linea de texto 3.2
1. Linea de texto 3.2.1
2. Linea de texto 3.2.2
1. Linea de texto 3.2.2.1
2. Linea de texto 3.2.2.2
4. Linea de texto 4
Se escribe:
<OL>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
<OL>

<LI>Linea de texto 3.1


<LI>Linea de texto 3.2
<OL>
<LI>Linea de texto 3.2.1
<LI>Linea de texto 3.2.2
<OL>
<LI>Linea de texto 3.2.2.1
<LI>Linea de texto 3.2.2.2
</OL>
</OL>
</OL>
<LI>Linea de texto 4
</OL>

Ejemplo
<html>
<head> <title>Curso de HTML</title> </head>

<body bgcolor="red">
<FONT COLOR=#FFFF00>
<center><h1>Bienvenidos al curso de HTML</h1></center><br>
<hr width=50%><br>
<h2>Debemos a comprar</h2><br>
<ul>
<li>Camisas para Jos&eacute;</li>
<li>Loci&oacute;n para Daniel</li>
</ul><br>
<h2>Estudiar para ma&ntilde;ana</h2><br>
<ol>
<li type=a>Geometr&iacute;a
<li type=a>ciencias Sociales
</ol><br>
<h2>Actividades de la semana</h2><br>
<ol type=I>
<li>Asistir a la Universidad
<li>Comprar Disco
<li>Llevar el auto al mec&aacute;nico
</ol><br>
<h1>Objetivos</h1>
<ul>El uso de estas etiquetas tambi&eacute;n puede ayudar a mover
el texto en base a tabulaciones o sangr&iacute;as de texto, para
diferenciar parrafos o textos de los encabezamientos.
</ul>
</body>
</html>

Creacin de enlaces (links)


Lo caracterstico del lenguaje HTML es el poder generar vnculos de hipertexto para
enlazar con ellos todos sus documentos en web.

Para generar un enlace a otro documento necesitamos el nombre de un archivo (o su


direccin URL) y el texto que servir de punto de activacin del otro documento. Este
segundo elemento ser el que veamos en pantalla y que se servir del primero para
saltar de documento.
Los enlaces se generan mediante la tag <A>.....</A> y, a diferencia de los vistos
anteriormente, llevar siempre dentro de la tag un atributo ya sea <A HREF=""> o <A
NAME="">.
<A HREF="URL">.....</A>: Es el ms habitual de los atributos y sirve para
saltar entre diferentes URLs. De momento veremos:
o Saltar en una presentacin del archivo 1 al archivo 2: En el archivo 1
incluiremos la directiva <A HREF="archivo2.html">Siguiente
pgina</a>
o Saltar de nuestra presentacin a otra presentacin web llamada
www.bienvenidos.es: <A HREF="http://www.bienvenidos.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 queramos incluir un vnculo a dicha seccin escribiremos:
<A HREF="#parte1">Ir a la primera parte</A>

<HTML>
<HEAD>
<TITLE>Ejemplo 3</TITLE>
</HEAD>
<BODY>
<A NAME="arriba">Arriba</A> <br>
<A HREF="#abajo">Ir abajo</A><br>
<A HREF="ej4.html">Ir a ejemplo 4</A><br><br>
<A HREF="http://www.webestilo.com/">Ir a WebEstilo</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>
<A NAME="abajo">Abajo <br></A>
<A HREF="#arriba">Ir arriba</A>
</BODY>
</HTML>
<A HREF="2.html" TARGET="Ventana-2"> archivo2</A> (se abre en una ventana
nueva)

Вам также может понравиться