Sei sulla pagina 1di 21

HTML

ESTRUCTURA BASICA DE UN DOCUMENTO HTML

Un documento escrito en HTML contendra bsicamente las


siguientes etiquetas :

<HTML> Indica el inicio del documento.

<HEAD> Inicio de la cabecera.

<TITLE> Inicio del ttulo del documento.

</TITLE> Final del ttulo del documento.

</HEAD> Final de la cabecera del documento.

<BODY> Inicio del cuerpo del documento.

</BODY> Final del cuerpo del documento.

</HTML> Final del documento.


CABECERA DEL DOCUMENTO

La etiqueta <HEAD></HEAD> delimita la cabecera del documento.


Dentro de la cabecera es importante definir el ttulo de la pgina por
medio de la etiqueta <TITLE></TITLE>. Este ttulo ser el que
aparezca en la barra de nuestro navegador de pginas Web.
Ejemplo :
<TITLE>Pgina del Manual de HTML</TITLE>
CUERPO DEL DOCUMENTO

La etiqueta <BODY></BODY> indica el inicio y final de nuestra


pagina Web. Ser entre el inicio y el final de esta etiqueta
donde pongamos los contenidos de nuestra pgina, textos,
grficos, enlaces, etc.... Esta etiqueta tiene una serie de
parmetros opcionales que nos permiten indicar la
"apariencia" global del documento
BACKGROUND

Indica el nombre de un fichero grfico que servir como "fondo" de


nuestra pgina. Si la imagen no rellena todo el fondo del documento,
esta ser reproducida tantas veces como sea necesario.
background= "nombre de fichero grfico"
<HTML>
<HEAD>
<TITLE> PGINA DE PRUEBA
</TITLE>
</HEAD>
<BODY
background="DSC00351.jpg">
</body>
</html>
La propiedad bgproperties="fixed" , es reconocido por
Internet explorer y permite fijar la imagen al fondo de la
ventana. No se mueve la imagen.
BGCOLOR

Parmetro usado para especificar el color de fondo de la pgina. El


color se define en base hexadecimal de la siguiente forma
(#rrggbb) en el orden rojo, verde, azul (Red, Green, Blue). Es decir,
cada color se define con el carcter # seguido de 6 letras
nmeros. Cada combinacin de letras o nmeros da lugar a
distintos colores. Tambin se puede usar el nombre en ingls de los
colores predefinidos en los navegadores (red, blue, green, etc.).

Sintaxis: <body bgcolor=#0000FF> o <body


bgcolor=blue>
White rgb=#FFFFFF Firebrick rgb=#8E2323
Red rgb=#FF0000 Forest Green rgb=#238E23
Green rgb=#00FF00 Gold rgb=#CD7F32
Blue rgb=#0000FF Goldenrod rgb=#DBDB70
Magenta rgb=#FF00FF Grey rgb=#C0C0C0
Cyan rgb=#00FFFF Green Copper rgb=#527F76 Orange rgb=#FF7F00
Yellow rgb=#FFFF00 Green Yellow rgb=#93DB70 Orange Red rgb=#FF2400
Black rgb=#000000 Hunter Green rgb=#215E21 Orchid rgb=#DB70DB
Aquamarine rgb=#70DB93 Indian Red rgb=#4E2F2F Pale Green rgb=#8FBC8F
Baker's Chocolate Khaki rgb=#9F9F5F Pink rgb=#BC8F8F
rgb=#5C3317 Light Blue rgb=#C0D9D9 Plum rgb=#EAADEA
Blue Violet rgb=#9F5F9F Light Grey rgb=#A8A8A8 Quartz rgb=#D9D9F3
Brass rgb=#B5A642 Light Steel Blue rgb=#8F8FBD Rich Blue rgb=#5959AB
Bright Gold rgb=#D9D919 Light Wood rgb=#E9C2A6 Salmon rgb=#6F4242
Brown rgb=#A62A2A Lime Green rgb=#32CD32 Scarlet rgb=#8C1717
Bronze rgb=#8C7853 Mandarian Orange rgb=#E47833 Sea Green rgb=#238E68
Bronze II rgb=#A67D3D Maroon rgb=#8E236B Semi-Sweet Chocolate
Cadet Blue rgb=#5F9F9F Medium Aquamarine rgb=#6B4226
Cool Copper rgb=#D98719 rgb=#32CD99 Sienna rgb=#8E6B23
Copper rgb=#B87333 Medium Blue rgb=#3232CD Silver rgb=#E6E8FA
Coral rgb=#FF7F00 Medium Forest Green Sky Blue rgb=#3299CC
Corn Flower Blue rgb=#6B8E23 Slate Blue rgb=#007FFF
rgb=#42426F Medium Goldenrod Spicy Pink rgb=#FF1CAE
Dark Brown rgb=#5C4033 rgb=#EAEAAE Spring Green rgb=#00FF7F
Dark Green rgb=#2F4F2F Medium Orchid rgb=#9370DB Steel Blue rgb=#236B8E
Dark Green Copper Medium Sea Green rgb=#426F42 Summer Sky rgb=#38B0DE
rgb=#4A766E Medium Slate Blue rgb=#7F00FF Tan rgb=#DB9370
Dark Olive Green Medium Spring Green Thistle rgb=#D8BFD8
rgb=#4F4F2F rgb=#7FFF00 Turquoise rgb=#ADEAEA
Dark Orchid rgb=#9932CD Medium Turquoise Very Dark Brown
Dark Purple rgb=#871F78 rgb=#70DBDB rgb=#5C4033
Dark Slate Blue rgb=#6B238E Medium Violet Red Very Light Grey
Dark Slate Grey rgb=#2F4F4F rgb=#DB7093 rgb=#CDCDCD
Dark Tan rgb=#97694F Medium Wood rgb=#A68064 Violet rgb=#4F2F4F
Dark Turquoise rgb=#7093DB Midnight Blue rgb=#2F2F4F Violet Red rgb=#CC3299
Dark Wood rgb=#855E42 Navy Blue rgb=#23238E Wheat rgb=#D8D8BF
Cdigos hexadecimales de color
TEXT

Parmetro usado para definir el color del texto de toda la


pgina. Su formato es el mismo que el de bgcolor. Si no se pone
nada es negro.

Sintaxis: <body text=#0000FF> o <body text=blue>

<HTML>
<HEAD>
<TITLE> PGINA DE PRUEBA </TITLE>
</HEAD>
<BODY background="lgaf1.jpg" bgproperties="fixed"
text="RED">
Hola
<br>
amigo
<br>

Hello
</body>
</html>
Se puede controlar el color del texto seleccionado 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, por lo
menos, 256 colores. Por supuesto, este efecto es anidable con el de
tamao y todos los dems.

<FONT COLOR="red">Texto ROJO </FONT>


Tamaos de
caracteres
Para definir distintos tamaos de letra, en HTML se utiliza el
elemento lleno <Hx> </Hx> donde x es un nmero que puede
variar entre 1 y 6, siendo 1 el tamao mayor.
Se escribirn as:
<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>

Este elemento admite un parmetro de alineacin:

<H3 align=center> Texto en H3 </H3>


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. La gran diferencia 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>
Se puede cambiar el tamao por defecto (3) de toda la pgina con el
elemento <BASEFONT SIZE=valor>. El texto tomar el tamao
indicado por valor y lo mantendr hasta que aparezca otro elemento
<BASEFONT SIZE=valor> y lo restaure o lo cambie por otro diferente.
Tanto si se ha establecido un valor base como si se utiliza el valor por
defecto, los tamaos tambin pueden indicarse de forma relativa, por
lo que el valor puede ser positivo (+) o negativo (-) respecto al tamao
base. Por ejemplo estos dos valores dan el mismo resultado:

<FONT SIZE=5>ABcde</FONT> <FONT SIZE=+2>ABcde</FONT>


El atributo del elemento <FONT> que permite elegir tipos de letra entre los
varios de que dispone por defecto Windows se llama 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.

<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>
<FONT FACE="impact" SIZE=6 COLOR="red"> Texto de prueba 12345 con tipo IMPACT</FONT>
Separadores. Etiqueta hr.

Para separar un texto de otro o un prrafo de otro podemos utilizar una


lnea horizontal de un tamao o un grosor determinado por nosotros. Esa
franja la escribimos con la etiqueta <hr>. La contrario que muchas
etiquetas html, sta no necesita ser cerrada. Slo con escribir la etiqueta
anterior ya la escribimos.

La etiqueta <hr>, como muchas otras etiquetas, puede variar de


aspecto dependiendo de una serie de caracteres o parmetros que
podemos predefinir. Por ejemplo, podemos definir su grosor mediante el
parmetro size.

size=x, x el nmero del grosor de la franja.


<hr size="20" >
<hr size="2">
A continuacin una franja de 75% de ancho:

<hr width=75%"/>
Si se desea que la franja sea simple, sin sombra se escribe el parmetro
noshade.

Tambin se puede predefinir el color de la franja con el parametro "color".

<hr color="#FF0000"/>.

Justificacin de la barra empleando la propiedad align.


align = center para el centro, align = right para la derecha y align =
left para la izquierda.

<hr size=3 width= 50% align=center/>


<hr size=2 width=80% noshade=noshade
align= right />
Otros efectos en el texto
1. Centrar 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:

texto texto texto texto texto texto texto texto texto texto texto texto
<CENTER>texto centrado texto centrado</CENTER>
texto texto texto texto texto texto texto texto texto texto texto texto
Texto en negrita:
<B>Texto en negrita</B>
Texto realzado:
<STRONG>Texto realzado</STRONG>
Texto en itlica:
<I>Texto en itlica</I>
Texto con nfasis:
<EM>Texto con nfasis</EM>
Texto ejemplo de cdigo:
<CODE>Texto ejemplo de cdigo</CODE>
Texto teletipo:
<TT>Texto teletipo</TT>
Texto subrayado:
<U>Texto subrayado</U>
Texto tachado:
<STRIKE>Texto tachado</STRIKE>
Texto de direccin:
<ADDRESS>Texto de direccin</ADDRESS>
Texto intermitente
<BLINK>Texto intermitente</BLINK>
Texto superndice
Texto normal
<SUP>Texto Superndice</SUP>
Texto subndice
Texto nomal
<SUB>Texto Subndice</SUB>
Texto grande
<BIG>Texto grande</BIG>
Texto pequeo
<SMALL>Texto pequeo</SMALL>

Potrebbero piacerti anche