COLEGIO NUESTRA SEÑORA DE FÁTIMA – CUCUTA

POLICÍA NACIONAL TALLER

ESTUDIANTE GRADO 11
ASIGNATURA INFORMATICA PERIODO PRIMERO
DOCENTE EYBAR VILLAMIZAR MORA FECHA

ETIQUETAS PARA ELABORAR PAGINAS WEB HTML

ESTILOS DE PÁGINA Todas estas etiquetas nos permiten cambiar de una manera
u otra el aspecto del tipo de letra que estemos utilizando y
Estos estilos o formatos actúan a nivel de párrafo se pueden utilizar dentro de un párrafo.
Etiqueta Significado Etiqueta Utilidad Resultado
Sirve para delimitar un párrafo. <B> ... Soy un texto negro
Pone el texto en negrita.
<P> Inserta una línea en blanco antes del </B> como el tizón
texto. <I> ... Representa el texto en
Estoy ladeado
Justificar el texto del párrafo a la </I> cursiva.
izquierda (ALIGN=LEFT), derecha <U> ... Como soy muy
<p ALIGN=x> ... </p> Para subrayar algo. importante estoy
(RIGHT), al centro (CENTER) o a ambos </U> subrayado
márgenes (JUSTIFY html4 )
<S> ...
<CENTER> ... Permite centrar todo el bloque de A mí, en cambio,
Para tachar.
</CENTER> texto encerrado. nadie me quiere
</S>
Representa el texto encerrado en ella Permite representar el
<TT> ... No soy
con un tipo de letra de paso fijo. El texto en un tipo de letra
<PRE WIDTH=x> ... </TT> de paso fijo. variable
parámetro WIDTH especifica el
</PRE>
número máximo de caracteres en una <SUP> ...
Letra superíndice. E=mc2
línea. </SUP>
Mete sangrías de párrafo tanto a <SUB> ...
<BLOCKQUOTE> ... </SUB>
Letra subíndice. ai,j=bi,j+1
derecha como a izquierda. Suele
</BLOCKQUOTE>
usarse como tabulador Soy GRANDE
<BIG> ...
Incrementa el tamaño del
tipo de letra.
LOS ENCABEZADOS </BIG>

El HTML nos ofrece seis etiquetas distintas para mostrar

cabeceras o títulos.
Etiqueta Resultado <SMALL> ...
Disminuye el tamaño Creí ver un
del tipo de letra. lindo gatito
</SMALL>
<H1> ... </H1>
Cabecera de nivel 1 <HR> Barra
horizontal.
<H2> ... </H2>
Cabecera de nivel 2 EL COLOR

<H3> ... </H3> Podemos cambiar el color de cualquier carácter mediante el

Cabecera de nivel 3 uso del parámetro COLOR. La manera de especificarle el
color es común a todas las etiquetas HTML: o bien
<H4> ... </H4> indicando el nombre, si es un color normal, o bien
Cabecera de nivel 4 especificando los componentes de rojo, verde y azul (código
RGB) del mismo. Los colores reconocidos son los siguientes:
<H5> ... </H5>
Cabecera de nivel 5 Black Silver Gray White Maroon Red Purple Fuchsia
Green Lime Olive Yellow Navy Blue Teal Aqua
<H6> ... </H6>
Cabecera de nivel 6 <FONT color="blue">Soy azul como el mar</FONT>

El modo de indicar el color RGB es el mediante los

Actúan a nivel de párrafo, es decir, el texto encerrado en
<h1></h1> lleva una línea en blanco por delante y por
detrás. Habitualmente se utilizan para destacar títulos de
los diferentes apartados o secciones de un texto.
CAMBIANDO EL TIPO DE LETRA
componentes RGB para lo que se usa un código de seis
dígitos hexadecimales: 00 a FF. Por ejemplo:
<FONT COLOR="#FF0000">Código para rojo es
#FF0000D</FONT>
Código para rojo es #FF0000
<FONT COLOR="#00FF00">Código para verde es
#00FF00</FONT>
Código para verde es #00FF00
<FONT COLOR="#0000FF">Código para Azul es
#0000FF</FONT>
Código para azul es #0000FF
<FONT COLOR="#0000FF">Y ahora mezclemos colores
con #10A2FF</FONT>
Y ahora mezclemos colores con #10A2FF
TAMAÑO DEL TEXTO
El parámetro utilizado para indicar el tamaño es SIZE. Puede
utilizarse para indicar tamaños absolutos:
SIZE=1 SIZE=2 SIZE=3 SIZE=4
SIZE=5 SIZE=6
SIZE=7
El tamaño por defecto es 3. También se puede utilizar los
modificadores + y - para indicar un incremento (o
decremento) relativo del tamaño del tipo de letra. Así, por
ejemplo, si indicamos que queremos un tamaño de -2
estaremos pidiendo al navegador que nos muestre el tipo
de letra dos veces más pequeño.
<FONT SIZE=2><font size="2">Tamaño 2</font><FONT
SIZE="+3">
<font size="2"><font size="+3">Tamaño
6</font></font></FONT></FONT>
TIPO DE LETRA
Por último, podemos especificar el nombre del tipo de letra
que queremos utilizar gracias al parámetro FACE. Pero ojo
esto no es realmente muy utilizable. El navegador usará el
tipo de letra indicado en este atributo si tiene esa fuente
instalada. Si sales de la Times New Roman, Arial, Helvética,
Verdana o Courier corres el riesgo de que el usuario no
llegue a ver la página como tu la has diseñado, sino de una
manera que puede llegar a ser desastrosa para el diseño. Si
el navegador no encuentra ninguno de las fuentes indicada
en este parámetro utilizará la fuente por defecto:
<FONT FACE="Helvetica,Arial,Times">
<font face="Helvetica,Arial,Times">
No sé como voy a salir exactamente</font></FONT>
ENLACES
LA ETIQUETA <A>
La etiqueta <A></A> nos sirve para delimitar la zona de la
página que constituye el enlace. Lo que esté encerrado en
esta etiqueta será mostrado por el navegador de forma
resaltada, bien sea por el color si es texto o por un borde si
es una imagen (a menos que modifiquemos el formato), y si
pulsamos con el cursor del ratón sobre esa zona el
navegador se dirigirá al lugar apuntado por ese enlace. El
formato completo de esta etiqueta es el que sigue:
<A HREF="dirección de destino"
target="destino">Pulsar para saltar</A>
La dirección de destino será la página web especificada
mediante una URL, en formato absoluto o relativo. En
ambos casos el destino puede incluso ser un elemento
concreto dentro de la página. En este caso se ha usado un
texto pero igualmente podríamos colocar una imagen.
INSERTAR IMÁGENES
Una página web sin alguna imagen es como el mar sin sal.
Para incluir gráficos e imágenes en nuestras páginas
utilizaremos la etiqueta
<IMG SRC="fichero_grafico" ALT="descripcion"
WIDTH=88 HEIGHT=31 BORDER=0>
El parámetro SRC especifica la URL del fichero que contiene
el gráfico. Los formatos estándar en la red son el GIF, PNG y
JPG.
El parámetro ALT especifica el texto que se mostrará en
lugar del gráfico en aquellos navegadores que no sean
capaces de mostrarlos (como el Lynx).
Los atributos WIDTH y HEIGHT indican el ancho y alto del
gráfico en pixels. Su uso no es obligatorio pero si muy
aconsejable para mejorar el tiempo de carga de la imagen:
Por último vemos el atributo BORDER que como podrás
adivinar tan solo coloca el ancho del borde que rodea la
imagen. Por defecto su valor es cero, salvo el caso que
vemos en el siguiente apartado.
Por ejemplo
<img src="/imgs/im_crear/pubcorreo.gif" width="30"
height="32" alt="correo">
ALINEACIÓN RESPECTO AL TEXTO
HTML nos permite controlar la disposición de las imágenes
en la página con relación al texto, para ello usamos el
parámetro ALIGN :
ALIGN= SIGNIFICADO
Coloca el punto más alto de la imagen
TOP coincidiendo con más alto de la línea de
texto actual.
Alinea el punto medio (en altura) de la
MIDDLE
imagen con la base del texto.
Alinea el punto más bajo de la imagen con la
BOTTOM
base del texto.
LEFT Coloca la imagen a la izquierda del texto.
Coloca la imagen a la derecha del texto.
RIGHT
Hay que aclarar que la base del texto es la línea donde
descansan casi todas las letras del alfabeto excepto algunas
como la p, la g o la j.