GUIA BASICA HTML

GUIA BASICA DE CODIGO HTML
ARVEY BARAHONA GOMEZ
HTML
GUIA No. 1.
El manejo de Internet es fácil y ameno gracias al entorno gráfico actual, esto es
gracias al HTML que significa Lenguaje para marcar hipertexto, HiperTExt Markup
Language. El hipertexto es el vínculo o enlace que se realiza en una página, el
“saltar” de un lugar a otro. Es la lectura no lineal de un texto.
Crear hipertexto es sencillo. En la actualidad existen numerosos programas que
permiten diseñar páginas web rápidamente, pero en ocasiones es necesario
digitar código. Esta guía comenzará por manejar el código del html y
posteriormente utilizará software para crear las diferentes páginas.
El principio esencial del html es el uso de las etiquetas o marcas, que funcionan de
la siguiente manera:
<XXX> Inicio etiqueta
</XXX> Fin etiqueta
Las etiquetas se deben inicializar y finalizar y el texto que esta entre el origen y el
final se visualizará con estas características.
La primera etiqueta es <HTML> Toda la página </HTML> que indica que dentro
de esta etiqueta estará la página.
El documento esta dividido en dos secciones
 El encabezamiento, comprendido entre las etiquetas <HEAD> </HEAD>
 El cuerpo, comprendido entre <BODY> </BODY>
En el encabezamiento va información que no se visualizará en la pantalla. La
etiqueta <TITLE> TEXTO </TITLE>, permite visualizar el título en el libro de
direcciones.
En el cuerpo va la información de la página, imágenes, tablas, etc.
La estructura general de una página es:
<HTML>
<HEAD>
<TITLE>Título página</TITLE>
</HEAD>
<BODY>

......... Aquí van las etiquetas de la página.........
</BODY>
</HTML>
Para crear una página usando código HTML se debe tener en cuenta:
 El uso de enter para separar líneas no es necesario; el texto se acomoda a la
pantalla.
 El uso de las tildes se debe realizar con código.
 El documento se debe guardar con extensión .html
 Algunas etiquetas no se ven en todos los navegadores.
 Se puede utilizar cualquier procesador de texto, pero es necesario darle la
extensión html.
Ejemplo 1.
Digitar el siguiente código html en el procesador de texto. Guárdelo con el nombre
de pagina1.html.
<HTML>
<HEAD>
<TITLE>Mi primera página web </TITLE>
</HEAD>
<BODY>
Este es mi primer contacto con el maravilloso mundo de Internet. Esta es mi
primera página
</BODY>
</HTML>
FORMATO DE TEXTO.
En las páginas en ocasiones es necesario colocar texto con estilos diferentes.
Para html, cada estilo y tamaño de fuente es necesario una etiqueta, veremos a
continuación una serie de etiquetas que nos ayudarán a cambiarle la cara a
nuestras futuras páginas.
 Para visualizar texto con formatos fijos, tipo títulos se utiliza las etiquetas
<H1> XX</H1> , <H2> XX </H2> , <H3> XX </H3> , <H4> XX </H4>
, <H5>XX </H5> y <H6> XX</H6> , donde H1 es el tipo de mayor
tamaño
 Para centrar información en la página se utiliza <CENTER> XXX </CENTER>
 Si deseamos varios párrafos se utiliza la etiqueta <P>, sin el respectivo cierre
 Los separadores verticales se obtienen con la etiqueta <HR>, no utiliza cierre
de etiqueta.
 Si queremos separar los párrafos o cualquier otra cosa sin dejar línea en
blanco utilizamos la etiqueta <BR>, sin el respectivo cierre de etiqueta. Para
obtener varias líneas en blanco se combinan las etiquetas <BR> y <P> por cada
línea a usar.
 La fuente en negrilla se realiza con <B> XXX </B>
 La fuente en cursiva se realiza con <I> XXX </I>
2

Ejemplo 2.
Digite el siguiente código html en el procesador de texto. Guárdelo con el nombre
de pagina2.html.
<HTML>
<HEAD>
<TITLE>Mi segunda pagina web </TITLE>
</HEAD>
<BODY>
<CENTER><H1>MI SEGUNDA PAGINA WEB </H1></CENTER>
Este es mi primer contacto con el maravilloso mundo de Internet. Esta pagina
permite identificar los diferentes formatos de texto que puede tener una pagina
web.<BR>
<H1> Este es el tipo de fuente mas grande que maneja html</H1>
<H2> Este es tipo dos</H2>
<H3>Tipo tres </H3>
<H4>Tipo cuatro </H4>
<H5>Fuente con tipo cinco</H5>
<H6>Fuente con tipo cinco</H6>
<B>Texto en negrita</B> se utiliza un separador de párrafo sin linea <BR>
<I>Aqui esta un separador con linea y est escrito es cursivo</I> <P> esto es una
linea horizontal <HR>
</BODY>
</HTML>
 Las tildes también tienen un formato especial, aunque, dependiendo del
programa donde se cree el navegador las puede tomas.
Letra Código
á á
é é
í í Si se desea las tildes en mayúsculas, se coloca
Á etc,
ó ó
ú ú
ñ ñ
Ñ Ñ
El símbolo & se obtiene presionando las teclas alt 38 simultáneamente.
Ejercicios
1. Realice una página usando los códigos de las tildes.
2. Realice una página donde apliquen todos los temas vistos.
3

 Los tamaños del texto se pueden variar en HTML, van desde el valor menor
que es 1 hasta un tipo de letra grande que es 7. Para esto se utiliza la siguiente
línea:
<FONT SIZE =5> xxx texto con tamaño </FONT>
 Para realizar una ampliación al separador horizontal hacemos
<HR WIDTH =75%>
ocupando el 75% de anchura normal.
¨ <HR WIDTH =300>
tiene una anchura de 300 pixeles.
¨ Igualmente se puede alinear:
<HR WIDTH =50% ALING = LEFT> (izquierda)
<HR WIDTH =50% ALING = RIGHT> (derecha)
Se puede variar su espesor (alto)
<HR SIZE = 20>
También se puede hacer que sea una línea sólida:
<HR NOSHADE>
 Hay otro atributo para cambiar el tipo de fuente empleada. El tipo de fuente
estándar es Time New Roman , el usuario puede cambiar a otro tipo de fuente al
momento de cargar la página diferente al que está configurado en el navegador.
El comando es :
<FONT FACE=”Nombre Fuente” > xxx texto con tipo de fuente
</<FONT>
ejemplo:
<FONT FACE=”Impac” > Este texto es con tipo de fuente Impac
</<FONT>
<FONT FACE=”Impac, Arial” > Este texto es con tipo de fuente
Impac o Arial </<FONT>
 COLOR DEL TEXTO.
Para insertar texto de colores es necesario saber el código de los mismos y la
posición:
<color=”#XXYYZZ> en donde:
XX es el número indicativo del la cantidad de color rojo
4

YY es el número indicativo del la cantidad de color verde
ZZ es el número indicativo del la cantidad de color azul.
Los números están en numeración hexadecimal, este tipo de numeración tiene 16
dígitos. Y son:
0 1 2 3 4 5 6 8 9 A B C D E F
El número menor es el 00 y el mayor es el FF. Los colores básicos son:
#FF0000 para el Rojo
#00FF00 para el Verde
#0000FF para el Vzul.
Otros colores:
#FFFFFF para el Blanco
#000000 para el Negro
#FFFF00 para el Amarillo
Para hacer un color más oscuro o más claro se debe reducir o ampliar el número
de su componente Ejemplos
#CCFFFF Azul claro.
#AA0000 Rojo más oscuro
<FONT COLOR=”# CCFFFF”> Texto de color </FONT>
<FONT COLOR=”# FF0000”> Texto de color </FONT>
<FONT COLOR=”# CCFFFF”> Texto de color </FONT>
Para el color del fondo se utiliza la etiqueta background=”#XXYYZZ”. Ejemplo.
Para un fondo rojo la etiqueta sería <body bgcolor=”#FF0000”>
LISTAS
Existen 3 tipos de listas para HTML.
1. Listas desordenadas (no numeradas)
2. Listas ordenadas (numeradas)
3. Listas de definición.
 Las lista desordenadas (Unordered List) sirven para presentar cosas que, por
no tener un orden determinado no necesitan ir precedidas de un número. Su
estructura es:
<UL>
<LI> Una Cosa
<LI> Otra cosa
<LI> Más cosas
</UL>
<LI> Esta etiqueta significa List Item
Forma de la viñeta:
Type (tipo) que puede ser disk, circle square
Ejemplo:
5

<UL type= square>
<LI> Barco
<LI> Aviones
</UL>
 Las listas ordenadas (Ordered Lists) permite presentar cosas que en un orden
determinado. Su estructura es similar a la anterior, pero van numeradas
automáticamente
<OL>
<LI> Primera Cosa
<LI> Segunda cosa
<LI> Tercera cosas
</OL>
Se pueden anidar listas ordenadas o desordenadas, lo importante es abrir y cerrar
bien cada una.
Formas para cambias los nùmeros:
Type= valor, donde valor puede ser: a,A,i,I,
También se puede cambiar el número de iniciación con Stara=número a iniciar
Ejemplo
<OL type I start=3 >
<LI> Barco
<LI> Aviones
</OL>
Las listas de definición permiten definir términos tipo glosario. Toda lista de
definiciones debe ir entre las etiquetas <DL> y </DL>. Y cada renglón de la lista
tienen dos partes, a) el nombre a definir, utilizando la etiqueta <DT> (definition
Term) que indica el termino a definir y b) <DD> (definition definitio) que define el
termino.
<DL>
<DT> Una Cosa a definir
<DD> Definición de cosa
<DT> Otra cosas para definir
<DD> Definición otra cosa
</DL>
Ejemplos
Digite la siguientes líneas en el ejemplo anterior
Lista ordenada
Elementos de un computador
<OL>
<LI> CPU, compuesto por
<UL>
<LI> Disco Duro
<LI> Memoria
<LI> Microprocesador
</UL>
6

<LI> Monitor
<LI> Teclado
<LI> Mouse
<OL>
Definición
<DL>
<DT> -Hardware
<DD> Componentes fí del computador
<DT> Software
<DD> Elementos no tangibles del computador
</DL>
ENLACES A OTRAS PÁGINAS
Este tipo de enlaces es la esencia de las diferentes páginas en la Web. Estos
vínculos permiten unir diferentes documentos repartidos por todo el mundo y es lo
que conocemos como hipertexto.
La estructura general de los enlaces es :
< A HREF= “xxx”> yyy </A>
Donde:
xxx es el destino del enlace
yyy es el texto indicativo del enlace en la pantalla, subrayado generalmente de
color diferente
Existen cuatro tipos de enlaces:
1. Enlaces dentro de la misma página.
2. Enlaces con otra página de nuestro sistema ( carpeta)
3. Enlaces con una página fuera del sistema
4. Enlaces con una dirección de correo electrónico.
1. Enlaces dentro de la misma página.
Se utiliza cuando el documento es muy extenso. Permite saltar de una página a
otra dentro del mismo documento.
Para este caso lo que hemos llamado xxx (el destino del enlace) se sustituye por
#marca( palabra puede ser cualquier texto), yyy será el texto que permitirá el
enlace y es lo que ven los visitantes de la página:
<A HREF=”#marca”> yyy </A>
Y en el sitio exacto donde queremos saltar, debe ir la etiqueta:
<A NAME=”#marca”> </A>
Ejemplo:
Si queremos ir al final de un documento hacemos:
<A HREF=”#final”> Final documento </A>
y en el final del documento se escribe
7

<A NAME=”final”> </A>
2. Enlaces con otra página de nuestro sistema ( carpera)
Por lo general se tienen varias páginas en una carpeta de HTML, y en ocasiones
es necesario saltar a ellas. Para este caso lo que se ha llamado xxx se reemplaza
con el nombre del archivo. Ejemplo
<A HREF=”pagina1.html”> Mi primera página en la Web </A>
3. Enlaces con una página fuera del sistema
Si queremos enlazar con una página que se encuentra fuera de nuestro sistemas
es necesario conocer su dirección completa o URL (Uniform Resource Locator).
En este caso lo que se ha llamado xxx se reemplaza por la dirección completa de
la página a enlazar. Ejemplo.
Para ir a la página de yahoo hacemos:
<A HREF=”http://espanol.yahoo.com”> Yahoo en Español </A>
4. Enlaces con una dirección de correo electrónico.
En este caso, sustituiríamos lo que hemos llamado xxx por mailto
La estructura es :
<A HREF=”mailto: direccion email”> Texto enlace </A>
Ejemplo
<A HREF=”mailto: cesbarahona@ yahoo.com”> Arvey barahona
</A>
Para garantizar que cualquier navegador visualice el enlace se puede mejorar con
un mensaje de este tipo:
Correo de Arvey Barahona es <A HREF=”mailto: cesbarahona@ yahoo.com”>
cesbarahona @yahoo.com </A>
Taller.
1. Realice una página que con enlaces a las página que se hayan creado
utilizando listas desordenadas. Enlace las páginas que más le interesan utilizando
listas ordenadas. Enlace su correo. Utilice lista de definición.
2. Investigue cuales son los tipos de gráficos que se pueden insertar en HTML.
8

IMAGENES
Las imágenes pueden dar colorido a nuestras páginas y hacerlas más atractivas.
Las imágenes pueden convertir nuestra página en una maravilla, pero también
puede convertirla en una pesadilla (toma pareado). Las imágenes tienen unas
cuantas pegas:
1. Hacen muy lenta la carga de las páginas. Por muy artística que nos quede la
página, poca gente esperará a que se cargue un gráfico grande. Si la gente
espera mucho se aburre mucho y se va a otro sitio.
2. Pueden recargar la página y distraer al usuario del verdadero contenido.
3. Si están mal elegidas pueden complicar la lectura o hacerla imposible.
4. No debemos basar nuestra página en las imágenes; hay gente que tiene
navegador de texto (sin imágenes) o el navegador configurado para no ver
imágenes (así se cargan las páginas más rápido).
Una pista: una página con muchos gráficos es muy probable que sea pobre de
contenidos (a no ser que la página sea una galería de imágenes).
Al principio a todos nos gusta tener una página con muchos gráficos y colores
para hacerla más vistosa, pero hay que contenerse. Piensa en los sufridos
internautas que tienen una conexión lenta.
NOTA: Cuando un navegador carga una imagen la guarda en la caché (en el disco
para entendernos), de tal forma que si pasamos a otra página en nuestro sitio que
use la misma imagen no necesita cargarla de nuevo.
Una Imagen como fondo
Un primer efecto bastante bueno lo podemos conseguir poniendo una imagen
como fondo. Es muy fácil, basta añadir un par de cosas a la etiqueta body:
<body background="nombre_de_la_imagen">
Lo que hace el navegador es ir colocando la imagen indicada hasta llenar el fondo.
9

Sin embargo tienes que tener cuidado con el fondo, no escojas una imagen muy
grande. Ten cuidado que contraste bien con el texto para que se pueda leer con
comodidad.
Mostrar imágenes
Para insertar una imagen en nuestra página debemos hacer:
<img src="nombre_de_la_imagen">
src es la abreviatura de SouRCe. La etiqueta img no tiene pareja, no existe una
etiqueta <img>.
Esta etiqueta tiene varias opciones:
ALT = "descripción"
ALIGN = left / right / top / middle / bottom
HEIGHT / WIDTH
BORDER
HSPACE / VSPACE
ALT :
La descripción que se mete en alt es la que se muestra en caso que de la imagen
no se pueda cargar por el motivo que sea. Esto es conveniente para que la gente
que tiene un navegador de texto o las imágenes desactivadas no se pierda en
nuestra página.
Esta descripción también se muestra si ponemos el ratón sobre la imagen y lo
dejamos quieto unos segundos. El siguiente ejemplo permite mostrar una imagen
y al poner el ratón encima muestra el mensaje "Gráfico que representa un muro":
<center><IMG SRC="fondo-piedra.gif" width="96" height="96" ALT="Gráfico que
representa un muro"></center>
ALIGN
Con esta etiqueta podemos alinear el texto con respecto a la imagen. Con unos
ejemplos es como mejor se explica:
10

<img src="fondo-piedra.gif" align=top> Este texto va arriba
Este texto va arriba
<img src="fondo-piedra.gif" align=middle> Este texto va en medio
Este texto va en medio
<img src="fondo-piedra.gif" align=bottom> Este texto va abajo
Este texto va abajo
Existen otras dos posibilidades (left y right):
<IMG SRC="fondo-piedra.gif" align=right width="96" height="96" ALT="Gráfico que
representa un muro"> Bla, bla, bla, ...
Bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
bla, bla,bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
bla, bla, bla, bla, bla, bla, bla, bla.
<IMG SRC="fondo-piedra.gif" align=left width="96" height="96" ALT="Gráfico que
representa un muro"> Bla, bla, bla, ...
Bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
bla, bla, bla, bla, bla, bla, bla, bla,
11

HEIGHT / WIDTH
Estas opciones definen el tamaño (heigth=altura, width=anchura) con el que se
mostrará la imagen. Si no especificamos nada la imagen se muestra con su
tamaño real.
La imagen que venimos usando (el muro) tiene unas dimensiones de 96x96. Si
cambiamos estas dimensiones, por ejemplo a 96x48 la imagen quedaría así:
<IMG SRC="fondo-piedra.gif" width="96" height="48" ALT="Imagen reducida">
Pero también podemos agrandarla (196x98):
<IMG SRC="fondo-piedra.gif" width="192" height="96" ALT="Imagen reducida">
NOTA: Es importante poner las dimensiones siempre, aunque sean las originales,
para facilitar al navegador la representación de la imagen.
BORDER
Con esta opción podemos poner un borde a la imagen.
<IMG SRC="puppy.jpg" width="192" height="96" ALT="Imagen ampliada"
border=0>
<IMG SRC="puppy.jpg" width="192" height="96" ALT="Imagen ampliada"
border=6>
HSPACE / VSPACE
Con estas opciones podemos especificar cuántos pixels queremos de separación
entre la imagen y el resto del documento. Ejemplo
<IMG SRC="puppy.jpg" vspace=20>
12

Usar imágenes como enlaces
Vimos antes cómo poner enlaces de texto en nuestra página. Ahora vamos a ver
cómo se usan las imágenes para que sirvan como enlaces gráficos.
Para poner una imagen como enlace debemos meterla dentro de una etiqueta <a
href>: Usamos la imagen cualquiera. Y ponemos un enlace a esa página (Ejemplo
imagen de RCN, dirección. www.canalrcn.com
<A HREF="http://www.canalrcn.com"><IMG SRC="logoRCN.gif" width="92"
height="39"
ALT="Nuestra Tele"></A>
y ya tenemos nuestro enlace gráfico.
Fíjate que aparece un borde alrededor de la imagen. Este borde indica que se
trata de un enlace, pero si quieres quitarlo basta con usar la opción border=0.
OPCIONES ADICIONALES
OTROS COLORES
Color del texto
Color de fondo
Color de los enlaces
enlaces no visitados
enlaces visitados
enlaces activos
¨ Color del texto
Ya hemos visto cómo se cambiaba el color del texto con FONT.
Existe otra forma para cambiar el color por defecto del documento, con unas
opciones de la etiqueta BODY (igual que hacíamos con la opción background).
Con estas opciones podemos cambiar el color del texto, el del fondo y el de los
enlaces.
Las posibles opciones son:
13

text
bgcolor
link
vlink
alink
Para cambiar el color del texto debemos escoger la primera opción; text. Se usa
igual que la opción color de la etiqueta font (se puede especificar el color por su
nombre o por su código hexadecimal).
Si ponemos el siguiente código tendremos el texto de nuestra página de color
azul:
<body text=blue>
¨ Color de fondo
También podemos cambiar el color de fondo de nuestro documento simplemente
usando la opción bgcolor (igual que text. Para tener un fondo de color azul y texto
blanco:
<body text=white bgcolor=blue>
¨ Color de los enlaces
Quizá te hayas fijado que cuando pones un enlace en tu página se muestra de
color azul. Si el enlace ya ha sido visitado aparece con otro azul más claro (se
usan colores diferentes para que el usuario sepa si ya ha visitado la página o no).
Esto lo podemos cambiar a nuestro gusto.
Enlaces no visitados
Para cambiar el color de los enlaces a páginas que aún no han sido visitadas se
usa la opción link. Para poner estos enlaces de color amarillo:
<body link=yellow>
Enlaces visitados
El color de los enlaces a páginas ya visitadas se establece con la opción vlink
(Visited Link). Si queremos que sea verde:
14

<body vlink=green>
Enlaces activos
En el momento que pinchamos sobre un enlace este cambia de color. Para
especificar este color se usa alink (Active Link):
<body alink=red>
Y para ver todo esto junto en un documento veamos un ejemplo:
La etiqueta body de este ejemplo es:
<html>
<body text=yellow bgcolor=blue link=white vlink=red alink=green>
El texto normal aparece de color amarillo.
Los enlaces no visitados aparecen de color verde: noexiste.html.
Los enlaces visitados aparecen de color rojo: ejemplo11.html.
Al pinchar en un enlace se pone de color verde.
</body></html>
NOTA: Algunos navegadores permiten al usuario establecer los colores con los
que quiere visualizar las páginas. Si tiene esta opción activada no obedecerá a lo
que nosotros especifiquemos.
ETIQUETAS
La etiqueta OL tiene varias opciones. La primera, type, sirve para especificar el
tipo de numeración que queremos:
1 - Números (1,2,3,4,...)
A - Letras mayúsculas (A, B, C, D,...)
a - Letras minúsculas (a, b, c, d,...)
I - Números romanos en mayúsculas (I, II, III, IV,...)
i - Números romanos en minúsculas (i, ii, iii, iv,...)
EJEMPLO
i.martillos
ii.clavos
iii.destornilladores
15

iv.tornillos
Que se consigue con:
<ol type=i>
Se puede especificar también el número en el que queremos que empiece la lista
con la opción start=n, aunque no lo admiten todos los navegadores.
Listas desordenadas (no numeradas)
El símbolo que aparece al principio se puede cambiar con type. Las posibles
opciones son
disc (disco) square (cuadrado) y circle (círculo).
Con <ul type=square> queda:
 martillos
 clavos
 destornilladores
 tornillos
No es conveniente usar la etiqueta UL para establecer márgenes.
Espacios Adicionales
Se utiliza cuando se desea separar palabras y que se visualicen en pantalla. Para
este caso se coloca un código representa una letra o un carácter. Por ejemplo el
código del espacio en blanco es   (Non Breaking SPace). Si escribimos
  obtendremos un espacio adicional:
Texto sin formatear
Existe una forma de mostrar el texto con saltos de línea y espacios sin tener que
usar <br> y  . Es el texto preformateado. Cuando ponemos texto en una
página el navegador lo formatea, le quita los saltos de línea y los espacios
adicionales. Podemos indicarle que no haga esto usando las etiquetas <pre> y
</pre>. Cuando rodeamos un texto con estas etiquetas queda preformateado, es
decir, queda tal cual:
<html>
<head>
<title>Tu primera página</title>
</head>
<body>
16

<pre>
Hola, me llamo PON TU NOMBRE.
Esta es mi primera página web.
HTML es una cosa muy fácil.
</pre>
</body>
</html>
Tachado
Para el texto tachado se usa la etiqueta <strike> (strikeout):
<strike>Tachado</strike> -> Tachado
Puede no estar implementada en todos los navegadores.
Teletipo
Se puede mostrar el texto como si fuese escrito por una máquina de escribir
usando la etiqueta <tt> (TeleType):
Con esta etiqueta el texto no sale preformateado como con pre, se eliminan los
espacios adicionales.
Grande
Con las etiquetas <big> y</big> el texto aparece con un tamaño mayor al normal.
<big>Grande</big> -> Grande
Se pueden encadenar varios <big> pero no se asegura que el texto sea más
grande que uno solo.
Se puede usar también las etiquetas <font size="+1"> y </font>.
17

Pequeño
Es lo opuesto a la etiqueta big, con esta tenemos un texto más pequeño de lo
normal:
<small>Pequeño</small> -> Pequeño
Al igual que con big, se pueden encadenar varios small.
Parpadeo
Esta etiqueta produce un texto parpadeante. No está implementada en todos los
navegadores (creo que sólo está en el navigator). No se recomienda su uso, es
MUY incómodo leer páginas con texto parpadeante. Si en tu navegador no
funciona te puedes considerar afortunado:
<blink>Parpadeo</blink> -> Parpadeo
Texto en Movimiento :
Esta etiqueta produce un texto que se desplaza por la pantalla del navegador. No
está implementada en todos los navegadores (creo que sólo está en el explorer,
konkeror).
<MARQUEE> Texto que se desplaz</MARQUEE> que ocupa todo el ancho de
pantalla,
<MARQUEE WIDTH=50% HEIGTH=60%>Esta marquesina ocupa el 50& de
ancho de la pantalla y 60% de alto en pixel </MARQUEE>
ALING: Modifica el alineamiento del texto que rodea a la marquesina que
puede ser:
TOP : Arriba
MIDDLE: en medio
BOTTOM: Abajo
BEHAVIOR: Permite definir la manera del desplazamiento, que puede ser
SCROLL: Valor por defecto
SLIDE: Aparece por un lado y se desplaza a otro quedándose allí.
ALTERNATE: Se desplaza alternativamente de un lado a otro,
siempre dentro del límite de la marquesina
18

BGCOLOR: Se modifica el color del fondo de la marquesina.
DIRECTION: Modifica la dirección estándar( LEFT)
<MARQUEE DIRECTION= RIGHT> TEXTO </MARQUEE>
LOOP: Indica las veces que se desea que aparezca el texto. Es indefinido
por defecto.
Ejemplo aplicando todas las opciones:
<MARQUEE WIDTH=50% HEIGTH=60% ALING= BOTTOM BEHAVIOR:=
ALTERNATE BGCOLOR=”#FF7070” DIRECTION= RIGHT > HOLA MUNDO
</MARQUEE>
TABLAS
Definición de una tabla
Las tablas son muy útiles para mostrar la información con un formato flexible y más elegante que
una simple lista o que con texto formateado. Se usan mucho para dar formato a la página; es lo
que usan las páginas que muestran la información en varias columnas.
En este capítulo vamos a ver una sencilla introducción a las tablas
Para montar una tabla en nuestro documento lo primero es usar las etiquetas <table> y </table>.
Dentro de la tabla sólo podemos meter el título de la tabla (caption) o filas (tr), no puede haber
otros elementos dentro de la tabla. Donde sí podemos meter otros elementos es dentro de las filas
(encabezamientos ó celdas). Para mostrarlo gráficamente:
TABLE
+----Caption
+----TR
+----TH
+----TD
Veamos una tabla ejemplo. El siguiente código:
<table border=1>
<caption>Tabla Ejemplo</caption>
<tr>
<th>Columna 1
</th>
<th>Columna 2
</th>
<tr>
<td>10
</td>
<td>20
</td>
19

</tr>
</table>
produce la siguiente tabla:
Tabla Ejemplo
Columna 1 Columna 2
10 20
Ahora vamos a analizar los elementos uno a uno:
Caption
Con este podemos ponerle un título a la tabla. Este título puede ir encima o debajo de la tabla.
Para indicar dónde lo queremos usamos la opción align y sus valores posible son top o bottom. Si
no especificamos nada se coloca encima de la tabla.
El ejemplo anterior usando <caption align=bottom>:
Columna 1 Columna 2
10 20
Tabla Ejemplo
No es necesario poner un título a la tabla, pero si se pone debe ir justo debajo de la etiqueta
<table> y sólo puede haber uno.
TR (table row)
Después de colocar el título colocamos las líneas. <tr> indica el comienzo de una línea y </tr> el
final. Dentro de una línea sólo podemos meter elementos td o tr.
Esta etiqueta tiene unas opciones para alinear la etiquetas que contiene horizontalmente y
verticalmente.
TH (Table header)
Con las etiquetas <th> y </th> podemos colocar encabezamientos a las columnas. Estos
encabezamientos en algunos navegadores aparecen en negrita. Esta etiqueta tiene las misma
opciones que la etiqueta td.
Esta etiqueta se suele usar poco.
TD (table data)
Esta etiqueta puede contener cualquier cosa en su interior, desde lista hasta otras tablas. Debe ir
dentro del par de etiquetas <tr> </tr>
20

USO DE FRAMES
Los Frames son recuadros o marcos que se utiliza en HTML para dividir la pantalla
en dos áreas o zonas actuando en forma independiente una de otra.
Se caracteriza porque al pulsar un vínculo en un frame (índice) se carga en otro
(llamado principal). Esto facilita la navegación ya que nunca se sale del menú
principal.
Para realizar una página utilizando frames, se deben crear tres archivos html, en el
primero se crea el documento de definición, en el segundo se creará el indice y en
el tercero será la página princiapal.
 Documento de definición.
Primero se debe pensar en cuantas zonas va a tener la página, los frames se
pueden distribuir en columnas o filas.
El código inicial para dividir el documento y crear las dos zonas es el siguiente:
<HTML>
<HEAD><TITLE> Página utilizando Frames </TITLE></HEAD>
<FRAMESET Cols=”20%, 90%”>
<FRAME SRC=”indice.html”>
<FRAME SRC=”principal.htm1” NAME =”principal”>
</FRAMASET>
<HTML>
Este archivo se guardará como home.html
En el ejemplo anterior vemos las siguientes etiquetas:
 FRAMESET permite definir las áreas de trabajo
 <FRAMESET Cols =”20%,80%”> Se le indica al código HTML que se quiere
dividir la pantalla en xx columnas y yy filas.
 <FRAME SRC=”indice.html”> Para el contenido del Frame de la izquierda,
menú.
 <FRAME SRC=presentación.html” NAME =”principal”> para el contenido del
segundo FRAME; la etiqueta NAME indica que todas las páginas se dirigirán allí.
21

 Documentos para cada frame.
Para el frame de la izquierda que se llamará indice.html se tiene:
<HTML>
<HEAD><TITLE> Indice</TITLE></HEAD>
<BODY BGCOLOR=”#FFBB00”>
<P>< A HREF=”principal.html” TARGET= ”principal”> Presentación </A>
<P>< A HREF=”pagina1l.html” TARGET= ”principal”> Una página cualquiera </A>
</BODY>
</HTML>
El atributo TARGET lanza la página solicitada en el vínculo a la zona principal.
Para el frame de la derecha que tendrá el nombre de presentación.html
<HTML>
<HEAD><TITLE> Presentación</TITLE></HEAD>
<BODY BGCOLOR=”#00FF00”>
***********texto pagina *********
</BODY>
</HTML>
22

GUIA BASICA HTML

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (11)

Similar a GUIA BASICA HTML

Similar a GUIA BASICA HTML (20)

Más de Arvey Barahona

Más de Arvey Barahona (19)

Último

Último (20)

GUIA BASICA HTML