HTML Basico

Institucin Educativa Nuestra Seora de la Candelaria
DISEO DE PAGINAS WEB CON HTML

ETIQUETAS BASICAS DEL LENGUAJE HTML
ESQUEMA BASICO DE UN DOCUMENTO HTLM
Un documento HTML comienza siempre con la etiqueta <HTML>, que indica que el
documento en cuestin est construido con dicho lenguaje.
La mayora de las etiquetas se escriben entre, <...> corresponde al principio de la

accin y </...> indica el fin de dicha accin.
Por
tanto,
una
pgina
web
etiquetas <HTML> y </HTML>.
Por otra parte, todo documento HTML consta de dos partes: la cabecera (head) y el
cuerpo del documento (body).
estar
siempre
contenida
entre
las
1. La cabecera contiene bsicamente informacin destinada al browser (o

navegador), que queda oculta al usuario. Su etiqueta (pareada) es <HEAD>.
2. El cuerpo es el documento que ve el usuario. Su etiqueta (pareada)
es <BODY>.
Ya estamos en condiciones de componer nuestra primera pgina web. Basta con

escribir las siguientes etiquetas en nuestro editor de texto y salvar el resultado con la
extensin *.HTML
Nota: Para asignarle color de fondo a la pgina se usa
<BODY bgcolor=Blue>.color de fondo azul

Si deseas colocar una imagen de fondo debes usar:
<BODY background=nombreimagen.jpg>. La imagen debe estar guardada en la
carpeta donde se guarda la pgina web.

ETIQUETAS PARA EL TEXTO
La etiqueta bsica, que controla el tipo de fuente utilizado, es y se cierra

.
Ejemplo: Para asignar el tipo, el tamao y el color de los caracteres: ....
Etiquetas para asignar Negrilla, cursiva y subrayado: A partir de este momento, se

trata simplemente de aadir ms etiquetas a nuestra an pequea coleccin, de modo
que vayamos teniendo cada vez ms control sobre el formato de los caracteres.
La tabla siguiente muestra las ms comunes:
Cdigo
...
...
...
...
...
Funcin
Negrita
Cursiva
Subrayado
Subndice
Superndice
Es normal utilizar varias etiquetas para un mismo elemento de texto. En ese caso, hay
que
tener
cuidado
para
encajarlas
correctamente.
Por
ejemplo:
... es
correcto,
pero
... es incorrecto.
ETIQUETAS PARA LOS PARRAFOS Y LA ALINEACION
La etiqueta inserta un salto de lnea.
la etiqueta ... inserta una salto de lnea y una lnea en blanco, por lo que, en
la prctica, equivale a un nuevo prrafo.
Por supuesto, tanto como ... pueden repetirse varias veces seguidas
para dejar ms distancia entre las lneas y los prrafos.
Un prrafo puede alinearse introduciendo los siguientes atributos en la etiqueta

habitual:
Cdigo
Funcin
...
Prrafo alineado a la izquierda
...
Prrafo centrado
...
Prrafo alienado a la derecha
...
Prrafo justificado

ETIQUETAS PARA RAYAS HORIZONTALES
Las rayas horizontales son otro de los procedimientos habituales para separar los
contenidos de un documento HTML. Se introducen simplemente con la etiqueta <HR>.
Hay una serie de caractersticas de las rayas que pueden controlarse, como siempre,
por medio de parmetros aadidos a la etiqueta bsica:
1. El tamao: la etiqueta <HR> introduce una raya que ocupa todo el ancho de
la pantalla. Pueden especificarse distintas anchuras aadiendo el valor
deseado, expresado en pixeles (<HR width="n">) o en trminos
porcentuales (<HR width="n%">).9
2. La alineacin: cuando una raya ocupa slo una parte de la pantalla, puede
especificarse su alineacin por medio de las etiquetas habituales:
<HR align="left">
<HR align="center">
<HR align="right">
3. La altura: se expresa en pxeles por medio de la etiqueta <HR size="n">.
Puede adoptar el valor 0 (la raya ms fina).
4. El color, por medio del prametro habitual: <HR color="?">.
Como siempre, lo habitual suele ser la combinacin de varios parmetros en una

misma etiqueta. Por ejemplo:
<HR width="100%" size="4" color=yellow > asigna una raya del ancho de la
pantalla
<HR width="50" size="4" color=yellow align=center > asigna una raya

alineada a la izquierda.
ETIQUETAS PARA INSERTAR IMAGENES

Para entender el proceso de insertar imgenes dentro del cdigo de HTML, primero
debemos de hablar de los formatos de imagen.
Formatos de imagen
Los formatos de imagen que se usan regularmente en los documentos en HTML, son
el GIF, JPG Y BITMAP. Al seleccionar el formato, hay que considerar particularmente
el peso (kilobytes) y la calidad de una imagen (cantidad de colores).
La etiqueta que se utiliza es <IMG SRC=NOMBRE IMAGEN.EXTENSION >, no
tiene etiqueta de cierre.
EL atributo SRC indica el URL de la ubicacin del archivo de la imagen.

Ejemplo <img src=ciberb.jpg> Inserta la imagen con el nombre
ciberb que se encuentra en la carpeta donde tengo guarda la pagina
web.
Esta etiqueta contiene los siguientes atributos:
<IMG >
Cdigo
Funcin
<img SRC=imagen.jpg>...
Nombre imagen
<Width=300>...
Define el ancho de la imagen en pixeles
<Height="300">...
Define el alto de la imagen
<Align="left ">...
Alnea la imagen de acuerdo al texto circundante
En este caso a la izquierda.
Ejemplo <img src=ciberb.jpg width=300 height=300 align=left>

ETIQUETA PARA TEXTO EN MOVIMIENTO
La etiqueta <Marquee> nos sirve para dar un efecto diferente a los texto de nuestra pgina
Web. Gracias a ella podemos conseguir texto en movimiento. Para aplicar este efecto a los
textos, stos deben estar dentro de la etiqueta <Marquee>, entre su inicio "<Marquee> " y
su cierre </Marquee>.
El movimiento, la direccin de desplazamiento, la velocidad del mismo,todo es configurable gracias

a los siguientes atributos:
align: Este atributo nos indicar si el texto dentro de la etiqueta se alinear en la zona alta del
marquee ("top"), en el medio ("middle") o en la parte baja ("bottom").
bgcolor: Con este atributo definiremos el color de fondo que le queremos dar a la marquesina donde
est el texto en movimiento.
height y width: El primero marca la altura que tendr la marquesina y el segundo la anchura de la
misma.
scrollamount: Este atributo define la cantidad de pxeles que queremos que se desplace el texto en
cada movimiento. Por ejemplo: <marquee scrollamount="3"> </marquee> significar que el texto que
vaya dentro de esa etiqueta se mover a razn de tres pxeles por movimiento.
scrolldelay: ste nos define la velocidad del texto que est dentro de la marquesina. A menor
numeracin, mayor velocidad. Es decir, un texto ir ms rpido si el scrolldelay es 5, que si el
scrolldelay es 20.

loop: Este atributo nos determina si el movimiento se repetir o no. Si queremos que el movimiento
slo se repita unas veces determinadas debemos indicrselo con un nmero, que ser el nmero de
veces que se repita. Si queremos que se repita slo 10 veces, su loop ser el siguiente: <marquee
loop="10"> </marquee>
Si queremos que se repita debemos usar "infinite" o "-1". Si no especificamos nada, se repetir
constantemente.
direction: Sirve para definir la direccin del movimiento: "left" para la izquierda, "right" para la
derecha, "top" para arriba y "down" para abajo.
behavior: Gracias a este atributo podemos dar nuevos efectos a la marquesina. Si no especificamos
este atributo, el texto se mover de forma circular en el sentido que le hayamos marcado. Con
behavior="scroll" conseguiremos el mismo efecto: el texto se mover circularmente.
Con behavior="slide" haremos que el texto se detenga al llegar al final de la marquesina. Y con el
behavior="alternate" el texto ir y volver de un lado a otro de la marquesina.
Ejemplo <marquee> Texto desplazandose </marquee>

EJEMPLO DE UNA PGINA COMPLETA

HTML Basico

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML Basico

Cargado por

Copyright:

Formatos disponibles

Institucin Educativa Nuestra Seora de la Candelaria

DISEO DE PAGINAS WEB CON HTML

ESQUEMA BASICO DE UN DOCUMENTO HTLM

La mayora de las etiquetas se escriben entre, <...> corresponde al principio de la

1. La cabecera contiene bsicamente informacin destinada al browser (o

Ya estamos en condiciones de componer nuestra primera pgina web. Basta con

Nota: Para asignarle color de fondo a la pgina se usa

<BODY bgcolor=Blue>.color de fondo azul

Institucin Educativa Nuestra Seora de la Candelaria

La etiqueta bsica, que controla el tipo de fuente utilizado, es <FONT> y se cierra

Etiquetas para asignar Negrilla, cursiva y subrayado: A partir de este momento, se

La etiqueta <BR> inserta un salto de lnea.

Un prrafo puede alinearse introduciendo los siguientes atributos en la etiqueta

Prrafo alineado a la izquierda

Prrafo alienado a la derecha

Institucin Educativa Nuestra Seora de la Candelaria

Como siempre, lo habitual suele ser la combinacin de varios parmetros en una

<HR width="50" size="4" color=yellow align=center > asigna una raya

ETIQUETAS PARA INSERTAR IMAGENES

EL atributo SRC indica el URL de la ubicacin del archivo de la imagen.

Institucin Educativa Nuestra Seora de la Candelaria

Define el ancho de la imagen en pixeles

Define el alto de la imagen

Alnea la imagen de acuerdo al texto circundante

En este caso a la izquierda.

Ejemplo <img src=ciberb.jpg width=300 height=300 align=left>

El movimiento, la direccin de desplazamiento, la velocidad del mismo,todo es configurable gracias

Institucin Educativa Nuestra Seora de la Candelaria

Ejemplo <marquee> Texto desplazandose </marquee>

También podría gustarte