Curso de HTML

CURSO DE
HTML
Mara Cives Senra
Curso de Bsico de HTML

2
HTML
3
HTML es un lenguaje que

permite definir pginas web.
Este lenguaje permite
describir hipertexto, es decir,
texto presentado de forma
estructurada y agradable, con
enlaces (hyperlinks) que
conducen a otros documentos
o fuentes de informacin
relacionadas, y con inserciones
multimedia (grficos, sonido,
imgenes, etc.).
Hiper
Text
Markup
Language
Las etiquetas del lenguaje HTML

4
El lenguaje HTML usa etiquetas o directivas (tags) para indicarle al

programa cliente de Web como mostrar el texto.
Las etiquetas estn formadas por determinados caracteres metidos
entre los signos <>, y con la barra </> cuando se trata de la segunda
etiqueta de un efecto (la de cierre). Por ejemplo: <title> para abrir y
</title> para cerrar.
Este lenguaje se escribe en un documento de texto, por eso necesitamos
un editor de textos para escribir una pgina web. As pues, el archivo
donde est contenido el cdigo HTML es un archivo de texto, con una
peculiaridad, que tiene extensin .html o .htm (es indiferente cul
utilizar). De modo que cuando programemos en HTML lo haremos con
un editor de textos, lo ms sencillo posible y guardaremos nuestros
trabajos con extensin .htm.
El navegador es el programa que conoce el lenguaje de la World Wide Web, por una parte se sabe
comunicar con los servidores para pedir los archivos que el usuario solicita (los protocolos), y por otro
entiende el cdigo de la pgina Web para presentar el contenido al usuario (HTML).
Estructura de un documento HTML

5
Se codifica a travs de unas etiquetas especiales,

generalmente van en parejas, una de apertura y otra de
cierre.
<nombre etiqueta> texto afectado </nombre etiqueta>
Cada etiqueta puede poseer una serie de atributos que
modifiquen su contenido. Pueden ser obligatorios u opcionales
<body bgcolor="#FFFFFF" >
En las etiquetas no hay distincin entre maysculas y
minsculas.
Si la pgina contiene algn error HTML, no saldr por
pantalla.
El archivo debe tener extensin .htm .html
Estructura de un documento HTML
Cabecera y cuerpo del documento

7
<HTML>
<HEAD>
<TITLE>
<BODY>
HTML: Limita el documento e indica que se

encuentra escrito en este lenguaje.
HEAD: define la cabecera del documento
HTML, esta cabecera suele contener
informacin sobre el documento que no se
muestra directamente al usuario. Como por
ejemplo el ttulo de la ventana del
navegador.
TITLE: define el ttulo de la pgina. Por lo
general, el ttulo aparece en la barra de
ttulo de la ventana del navegador.
BODY: encierra el contenido del documento.
Ejemplo 1
8
Para guardar los

distintos ejemplos
vamos a crear una
carpeta llamada
PRCTICAS DE HTML.
Escribiremos el
programa en el block
de notas y lo
guardaremos con el
nombre de Ejemplo 1.
<HTML>
<HEAD>
<TITLE>Ejemplo 1</TITLE>
</HEAD>
<BODY>
Hola mundo
</BODY>
</HTML>
Organizacin del texto

9
Guardamos el
archivo con el
nombre de:
Ejemplo 1_1
Los saltos de lnea, tabuladores y otros separadores (excepto los

espacios entre palabras) son ignorados por los navegadores por lo que
hay que insertarlos mediante etiquetas.
<html>
<HEAD>
<TITLE>Ejemplo 1_1</TITLE>
</HEAD> .
<body>
Tecnologa
de la
Informacin
y la
Comunicacin
</body>
</html>

10
Salto de lnea: 

Divisin de prrafos (mayor espacio que el salto de lnea) 
Alineacin del texto
Centrado <center> </center> o 
Derecha 
Izquierda 
Sangrado de texto <blockquote>
Subrayado 
Cursiva 
Negrita 
Subndice 
Superndice 
 Comentarios. Son

directivas o etiquetas que
nunca se mostrarn en el
navegador. Sirven al
programador para
documentar la pgina web.
Ejemplo 1_2
11
Escribimos el
programa en el
block de notas y
lo guardamos
con el nombre de
Ejemplo 1_2.
<html>
<HEAD>
<TITLE> Ejemplo 1_2</TITLE>
</HEAD>
<body>
 
<center> texto centrado en negrita
 
 texto alineado a la derecha
 
 texto alineado a la izquierda
<center> texto centrado, subrayado y en cursiva
 
La Repblica Oriental del Uruguay es un pas de Amrica del
Sur cuyo territorio es el segundo ms pequeo del subcontinente, con una superficie
de 176.215 km. Limita con el Brasil al norte y noreste y con Argentina al oeste. El
lmite es el Ro Uruguay. Por el sur, tiene costas sobre el Ro de la Plata, el cual lo
separa de la provincia de Buenos Aires y de la ciudad de Buenos Aires. Por el sureste,
tiene costas sobre el Ocano Atlntico.
<blockquote>La Repblica Oriental del Uruguay es un pas
de Amrica del Sur cuyo territorio es el segundo ms pequeo del subcontinente, con
una superficie de 176.215 km. Limita con el Brasil al norte y noreste y con Argentina
al oeste. El lmite es el Ro Uruguay. Por el sur, tiene costas sobre el Ro de la Plata,
el cual lo separa de la provincia de Buenos Aires. Por el sureste, tiene costas sobre el
Ocano Atlntica</blockquote>
</body>
</html>
12
Resultado del archivo Ejemplo 1_2.htm

En este ejemplo se han aplicado varias etiquetas para cambiar la alineacin y los
atributos del texto (cursiva, negrita y subrayado).

13
El tag FONT permite modificar la

apariencia del la fuente utilizada en la
pgina.
Su estructura es la siguiente:

Los atributos del tag FONT son los
siguientes:
Atributos de Font
face - color - size
14
Atributo
Valor del
Atributo
Ejemplo del
uso del tag y atributo
Funcin del tag
Apariencia
del atributo
face
Nombre de
la fuente
Fuente arial 
Aplicar una
fuente a cierta
parte del texto
Fuente
arial
color
Nmero
hexadecimal
o la palabra
clave del
color
Aplica un color a
Letr
usa en cierta
a roja 
parte del texto
size
Un nmero
entero
positivo o
negativo

Letra tamao 1

Define el tamao
de la fuente que
se usa en cierta
parte del
documento (valores
entre 1 y 7)
Letra roja
Letra tamao
1
Ejemplo 1_3
15
En este ejemplo
pondremos en
prctica los
atributos de color,
y tamao de la
fuente del texto.
Tambin
cambiaremos de
tipo de fuente.
Guardar el
archivo con el
nombre de
Ejemplo 1_3.htm
<html>
<HEAD>
</HEAD>
<body>
 
<center> Texto en tamao 2 centrado y en
negrita
 
 texto alineado a la derecha y en
tamao 7 
 
<center>texto
centrado, subrayado, en cursiva y de color rojo. De tamao 5

 
 texto
alineado a la izquierda. Fuente Comic Sans ms y en tamao 3 
</body>
</html>
16
Ejecucin del archivo Ejemplo 1_3

En este documento se han utilizado distintos atributos del texto (Alineacin, tipos
de fuentes y atributos del texto)
Encabezados
17
<H1>
<H2>
<H3>
<H4>
<H5>
<H6>
Se utilizan para crear ttulos dentro de una

pgina.
Sintaxis general:
<H nmero de encabezado>
La diferencia entre los distintos tipos de
encabezados es el tamao de la letra, el
tipo de resaltado, y la separacin existente
entre el texto y los elementos que tienen
encima y debajo de l.
Se puede alinear el texto mediante la
propiedad align . <H3 align=center>
18
Encabezados
En la tabla anterior se puede observar el comportamiento de los distintos
encabezados.
Pueden llevar el atributo color (etiqueta STYLE dentro de HEAD), por ejemplo:
H1 { color: blue }
H2 { color: #000080 }
Ejemplo 2_1
19
Guardamos el
documento
con el nombre
de:
Ejemplo 2_1
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>LOS ENCABEZADOS (este es un encabezado H1)</H1>
 
<h3 align="center"> este segundo titular es H3 y de color verde
</h3>

Esta es un pgina con titulares,

que tiene tambin un prrafo (este) y unos cuantos
saltos de lnea (ms abajo).
Primer salto 
Segundo salto 
Tercer salto 
</BODY>
</HTML>
Marquesinas
20
<marquee>
Las marquesinas son lneas de texto que pueden

desplazarse de un lado a otro de la ventana en
forma lineal.
Por defecto se desplaza de derecha a izquierda
indefinidamente, pero se pueden modificar estas
propiedades.
Atributo direction: permite modificar la direccin
en la que se mueve el texto.
down: de arriba abajo
up: de abajo a arriba
right, de derecha a izquierda o left de
izquierda a derecha.
Marquesinas
21
Al archivo
Ejemplo 2_1
le aadimos
al principio
de la
seccin
<body> la
siguiente
orden.
Volvemos a
guardar el
archivo
(ejemplo 2_2).
Atributo behavior: este atributo modifica el tipo

de movimiento.
alternate: de lado a lado de la ventana como si

rebotara.
scroll: de un lado a otro, continuamente .
slide: de un lado a otro, pero una sola vez
Atributo bgcolor: nos permite cambiar el color

de fondo de la marquesina.
<marquee bgcolor="#006699" behavior="alternate"

direction="right"> ejemplo
de marquesina </marquee>
HIPERTEXTO
22
El hipertexto permite conectar entre s diferentes

documentos, elementos multimedia, pginas web,
etc.
Los elementos sobre los que se inserta el enlace o
hipervnculo deben estar entre las etiquetas <a> y
</a>.
La etiqueta <a> llevar siempre un atributo, que
puede ser:
href
name
HIPERTEXTO
Realizar la
pgina
enlace0
(Santiago)
23
<A HREF="URL">.....</A>: Es el ms habitual de

los atributos y sirve para saltar entre diferentes
URLs.
<A HREF="http://www.lavozdegalicia.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 necesitemos incluir un
vnculo a dicha seccin escribiremos:
<A HREF="#parte1">Ir a la primera parte</A>
HIPERTEXTO Ejemplo 3
24
<HTML>
<HEAD>
<TITLE>Ejemplo 3</TITLE>
</HEAD>
<BODY>
<A NAME="arriba"><H1>Pgina de enlaces</H1></A>
<A HREF="#abajo">Ir abajo</A> 
<A HREF="ejemplo1_1.htm">Ir a ejemplo 1</A> 
<A HREF="http://www.peleteiro.com/">Ir a peleteiro</A> 
 . . . . . . . 
 
 . . . . . 
<A NAME="abajo"> </A>
<A HREF="#arriba">Ir arriba</A>
</BODY>
</HTML>
HIPERTEXTO Tipos de referencias

25
Referencia absoluta
Referencia relativa al sitio
Punto de fijacin
Enlaza con una ubicacin externa al sitio en el que

se encuentra el documento.
La ubicacin pertenece a Internet, por lo que hay
que empezar la referencia por http://, el nombre
del dominio y a veces el nombre de la pgina.
Si no se escribe el nombre de la pgina se cargar
la pgina de inicio asociada al dominio.
<a href=http//www.peleteiro.com> Colegio Peleteiro

26
Referencia absoluta
Punto de fijacin
Enlaza con un documento

se encuentra en el mismo
Carpeta que
principal
directorio que el documento
actual.
Documento.htm
Documento que contiene
el enlace y la extensin del archivo.
Deber indicarse el nombre
Por ejemplo:
CARPETA 1
<a href=ejemplo1_1.htm Primer ejercicio</a>
Ejemplo1_1.htm
Carpeta principal
Documento.htm
CARPETA
Ejemplo1_1.htm
CARPETA 2
Si el documento con el que se quiere enlazar esta en una

carpeta diferente a la actual deber indicarse, delante
del nombre del archivo, la ruta de acceso
a dicha 2
CARPETA
carpeta.
<a href=carpeta1/ejemplo1_1.htm Primer ejercicio</a>

(suponemos que carpeta1 est dentro de la carpeta o directorio donde se encuentra el documento)

27
Referencia absoluta
Punto de fijacin
Enlaza con un punto determinado del documento

actual o de otro diferente.
Para definir el punto de enlace utilizaremos la
etiqueta <a name>. Por ejemplo:
<a name=arriba> Ttulo de esa seccin </a>
La sintaxis del enlace sera:

<a href=nombre del documento#nombre del punto de enlace texto que lleva el enlace </a>
opcional
Ejemplo 3_1
28
<HTML>
<HEAD>
</HEAD>
<BODY>
<A NAME="arriba"><H1>Pgina de enlaces</H1></A>
<A HREF="#abajo">Ir abajo</A> 
<A HREF="imagenes\enlace0.htm">Ir a enlace</A> 
<A HREF="http://www.peleteiro.com/">Ir a peleteiro</A> 
 . . . . . . .
Enlace a una imagen 
<a href="imagenes/rosas.jpg" target="_blank" > foto rosas </a>
 
Enlace a un archivo pdf 
 <a href="imagenes/santiago.pdf" target="_blank" > Archivo pdf
 
 . . . . . 
<A NAME="abajo"> </A>
<A HREF="#arriba">Ir arriba</A>
</BODY>
</HTML>
Para realizar este ejercicio se

har una copia del archivo
ejemplo 3 y se le aadirn las
lnea marcadas como nuevas.
El archivo se guardar con el
nombre de Ejemplo 3_1
HIPERTEXTO Destino del enlace

29
El destino del enlace determina en qu ventana va

a ser abierta la pgina vinculada.
El atributo target determina el destino del enlace.
Valor
Significado
_blank
Abre el documento vinculado en una ventana nueva del

navegador.
_parent
Abre el documento vinculado en la ventana del marco que

contiene el vnculo.
_self
Es la opcin predeterminada. Abre el documento vinculado en el

mismo marco o ventana que el vnculo.
_top
Abre el documento vinculado en la ventana completa del

navegador.
Ejemplo: Enlaces
30
<html>
<head> <title> Pgina de Enlaces</title> </head>
Guardar este
documento
con el nombre
de ENLACE.
<body>
 
<a href ="http://www.peleteiro.com"
target="_blank"> Visita a Peleteiro (_blank) </a>
 
<a href ="http://www.lanasa.net" target=

"_parent"> Visita a la NASA (_parent) </a>
 
</body >
</html>
HIPERTEXTO Cambiar el color de los enlaces

31
Se puede modificar el color predefinido para el

enlace (normal, visitado y activo). Tambin se
puede eliminar el tpico subrayado.
Los atributos que modifican el color del enlace
pertenecen a la etiqueta <Body>.
link
=cdigo de color: para los enlaces normales.

vlink =cdigo de color: para los enlaces visitados.
alink =cdigo de color: para los enlaces activos (o en
el momento de ser pulsados.
Para eliminar el subrayado utilizaremos el atributo

style="text-decoration:none en la etiqueta <A>.
IMGENES
32
SRC
ALIGN
ALT
BORDER
WIDTH
HEIGHT
Para colocar una imagen debemos

utilizar la etiqueta <img>.
Los principales atributos de la etiqueta
son:
SRC
=ruta_imagen
ALIGN= left/right/top/middle/bottom.
ALT =texto explicativo.
BORDER=valor del borde.
WIDTH=valor del ancho,
HEIGHT =valor de la altura
IMGENES - SRC
33
Establece la localizacin de la imagen que

queremos insertar, es decir, la ruta de acceso al
archivo grfico (imagen).
La ruta de acceso puede ser relativa a la estructura
de carpetas del sitio web o absoluta, en cuyo caso
se debe dar la URL completa del archivo grfico.
<img SRC="imagenes/rosas.jpg">
(Creamos una carpeta llamada IMGENES y en ella guardamos

una imagen llamada rosas.jpg)
IMGENES - ALIGN
34
Establece la alineacin que va a tener la imagen en

la pgina con respecto a la lnea en la que se
encuentra.
La alineacin puede ser:
Horizontal
(left o right)
Vertical (top o bottom)
Ejemplo: Imgenes
35
<HTML>
<HEAD> <TITLE> IMGENES </TITLE> </HEAD>
<BODY>
<marquee bgcolor="#006699" behavior="alternate" direction="rigth">
 IMGENES </marquee>
<H1> PGINA CON IMGENES </H1>
 
<h3 align="center"> Imagen sin texto </h3>
<img SRC="imagenes/rosas.jpg">
<img sRC="imagenes/rosas.jpg" align="left> 
En este ejemplo el texto aparece a la derecha de la imagen y si es muy extenso de dividir en

varias lneas.
En este ejemplo el texto aparece a la derecha de la imagen y si es muy extenso de dividir en
varias lneas.
</BODY>
</HTML>
IMGENES - ALT
36
Permite mostrar una descripcin de la imagen

cuando no puede visualizarse o cuando pasamos el
cursor del ratn sobre ella.
<img alt="ramo de rosas" SRC="imagenes/rosas.jpg">
IMGENES - border
37
Este atributo permite definir un borde para la imagen.

Puede tomar valores numricos que representan el
grosor del borde expresado en pxeles.
Por defecto aparecer el
color negro a no ser que la
imagen sea un enlace, en
cuyo caso el color del borde
ser el color establecido por
los vnculos.
<img alt="ramo de rosas" SRC="imagenes/rosas.jpg"

border="6">
IMGENES Y ENLACES
38
Podemos utilizar una imagen como objeto de

enlace.
<a href=http://www.peleteiro.com> <img alt="ramo de rosas"

SRC="imagenes/rosas.jpg" border="6"> </a>
Si no se desea el borde debemos escribir border=0
TABLAS
39
Las tablas son posiblemente la manera ms clara y cmoda de organizar la

informacin.
Tambin es el modo ms adecuado de maquetar texto y grficos.
Proporciona un mayor control sobre los textos que el parmetro ALIGN.
Para definir una tabla, primero se deben especificar las caractersticas de
la tabla, luego las de cada fila y dentro de sta, cada celda.
De un modo simplificado, el cdigo de una tabla de una fila y dos columnas
sera el siguiente:
<TABLE>
<TR>
<TD> Contenido de la 1 celda </TD>
<TD> Contenido de la 2 celda </TD>
</TR>
</TABLE>
TABLAS
40
Para mejorar el aspecto de la tabla, podemos aadir una

serie de atributos a la etiqueta <table> que nos van a
permitir modificar los siguientes parmetros:
border
Grosor del borde que se dibujar alrededor de las celdas.
cellspacing
Define el nmero de pxeles que separarn las celdas.
cellpadding
Especifica el nmero de pxeles que habr entre el borde de una celda y

su contenido.
width
Especifica la anchura de la tabla.
bgcolor
background
bordercolor
align
Color de fondo.
Imagen de fondo.
Color del borde.
Alinea la tabla a la izquierda (LEFT), derecha (RIGHT) o centro (CENTER)
TABLAS - Filas
41
Cada fila se define con una etiqueta <TR>, que

puede tener los siguientes atributos:
align
Alinea el contenido de las celdas de la fila

horizontalmente a izquierda (LEFT), a
derecha (RIGHT) o centro (CENTER).
valign
Alinea el contenido de las celdas de la fila

verticalmente arriba (TOP), abajo
(BOTTOM) o centro (MIDDLE).
TABLAS - Celdas
42
Cada celda se define con una etiqueta <td> o <th>

Estas etiquetas son equivalentes, pero <th> se utiliza
para encabezados, de modo que su interior se
escribir por defecto en negrita y centrado.
La etiqueta <td> tiene una serie de atributos que
tienen como objetivo controlar el formato de la
celda y su contenido.
TABLAS Atributos de la celda

43
align
Alinea el contenido de la celda horizontalmente a izquierda (LEFT),

derecha (RIGHT) o centro (CENTER).
valign
Alinea el contenido de la celda verticalmente arriba (TOP), abajo

(BOTTOM) o centro (MIDDLE)
width
Especifica el ancho de la celda en pxeles
nowrap
Impide que, en el interior de la celda, se rompa la lnea de texto aunque

esta sea larga (si no figura nowrap el texto se distribuye en varios
renglones respetando el ancho de la celda).
colspan
Especifica el nmero de celdas de la fila situadas a la derecha de la

actual que se unen a sta (contando la celda actual).
bgcolor
Color de fondo.
background
Imagen de fondo.
bordercolor
Color de borde
rowspan
Especifica el nmero de celdas de la columna situadas debajo de la

actual que se unen a sta
TABLAS - Ttulo
44
La etiqueta <CAPTION> permite incluir un ttulo en

la tabla.
Esta etiqueta tiene un atributo: ALIGN.
ALIGN puede tomar dos valores:
TOP
(valor por defecto) pondr el ttulo en la parte

superior de la tabla.
BOTTOM coloca el ttulo al final de la tabla.
LISTAS
45
Permiten enumerar una serie de contenidos.

Todas ellas se pueden meter unas dentro de otras
formando rboles o jerarquas.
El formato general es el siguiente:
<tipo_lista>
<LI>Primer elemento
<LI>Segundo elemento
</tipo_lista>
Donde <tipo_lista> pueden ser listas desordenadas

<ul>, listas ordenadas <ol>, o listas de definiciones
<dl>.
LISTAS Listas desordenadas (I)

46
La etiqueta <UL> nos permite presentar listas de

elementos sin orden alguno.
Cada elemento de la lista ir normalmente
precedido por un crculo como se puede ver en el
ejemplo:
<ul>
<LI>Primer elemento
</ul>
Primer elemento
Segundo elemento
LISTAS Listas desordenadas (II)

47
La etiqueta <UL> admite el parmetro TYPE

donde se le puede indicar al navegador el dibujo
que preceder a cada elemento de la lista.
Para mayor flexibilidad se admite tambin como
parmetro de la etiqueta <LI>.
<ul>
<LI type=square>Primer elemento
<LI type=circle>Segundo elemento
<LI type=disc>Tercer elemento
</ul>
Primer elemento
oSegundo elemento
Tercer elemento
LISTAS Listas ordenadas (I)

48
La etiqueta <OL> nos permite presentar listas de

elementos ordenados de menor a mayor.
Normalmente cada elemento de la lista ir
precedido por su nmero en el orden.
<ol>
<LI>Primer elemento
</ol>
1. Primer elemento
2. Segundo elemento
LISTAS Listas ordenadas (II)

49
La etiqueta <OL> admite una serie de atributos

para cambiar sus caractersticas.
TYPE Indica al navegador el tipo de numeracin que
preceder a cada elemento de la lista. Puede ser
igual a l, a, A, i, I.
START =num ,indica al navegador el nmero por el
que se empezarn a contar los elementos de la lista.
<ol>
<LI TYPE="a">Primer elemento
<LI TYPE="A">Segundo elemento
<LI TYPE="i">Tercer elemento
<LI TYPE="I">Cuarto elemento
<LI TYPE=1">Quinto elemento
</ol>
a.
B.
iii.
IV.
5.
Primer elemento
Segundo elemento
Tercer elemento
Cuarto elemento
Quinto elemento
LISTAS Listas de definiciones

50
Es el nico tipo de lista que no utiliza la etiqueta

<LI>.
Al presentar una lista de definiciones, tiene que
plasmar de manera distinta el objeto definido y la
definicin.
Esto se hace por medio de las etiquetas <DT> y
<DD> de la siguiente manera:
<DL>
<DT>Primer elemento <DD>
Definicin del primer elemento.
<DT>Segundo elemento <DD>
Definicin del segundo elemento.
</DL>
Primer elemento
Definicin del primer
elemento
Segundo elemento
Definicin del segundo
elemento.
STYLE
51
Permite definir reglas de estilo en el encabezado

del documento.
Puede utilizarse para poner un color de fondo al
documento o adjudicar un color de fuente y fondo a
las cabeceras.
<html>
<head>
<title> Ejercicio 3_2 </title>
<style> body {
background-color: #FFCC66;}
h1 {color: white;
background-color: #FC9804;}
</style>
</head>
<body>
<center><h1>TECNOLOGA </h1></center>
 
<center><h1>INFORMACIN </h1></center>
</BODY>
</HTML>
52
Ejemplo 3_2
En el estilo del body aadimos la siguiente lnea:
background-image: url(imagenes/rosas.jpg)
Background-repeat
53
El valor inicial de "background-repeat es "repetir.

Por eso en el ejemplo anterior la imagen de fondo
se repite en sentido horizontal y vertical, formando
un mosaico. Para que la imagen se repita solamente
en sentido horizontal debemos usar:
BODY {background-color: # FFFFFF; background-image: url

(imagenes/rosas.jpg); background-repeat: repeat-x; }
Para que la imagen se repita solamente en sentido

vertical debemos usar:

(imgenes/rosas.jpg) background-repeat: repeat-y;}
Background-repeat
54
Finalmente, para que la imagen aparezca

solamente una vez debemos usar:

(bg-flecha.gif); background-repeat: no-repeat; }
Para colocar la imagen en el

centro se utiliz backgroundposition
55
Ubicacin de la imagen de fondo

background-position
Por defecto, una imagen de fondo se posiciona en la
esquina superior izquierda de la pantalla.
La propiedad background-position permite cambiar el
valor por defecto y posicionar la imagen de fondo en
cualquier lugar de la pantalla.
Las coordenadas se pueden indicar como porcentajes del
ancho de la pantalla, como unidades fijas (pxeles,
centmetros, etc.) o se pueden usar las palabras "top"
(superior), "bottom" (inferior), "center" (centro), "left"
(izquierda) y "right" (derecha).
background-position
56
background-position
57
El modelo siguiente ilustra cmo funciona el sistema:

La tabla siguiente proporciona varios ejemplos.
58
Paleta de colores estndar

Se puede usar cualquiera de las palabras clave o nmeros hexadecimales mostrados en la tabla de
arriba.
DIRECCIONES DE INTERS:
http://html-color-codes.info/codigos-de-colores-hexadecimales/
http://www.sitiosargentina.com.ar/webmaster/CODIGOS%20DE%20COLORES.htm
Actividad
Realiza una copia del documento Ejemplo 2_2

Sobre la copia define distintas marquesinas.
En
distintas partes del documento

Con distintos movimientos
Y con distintos tipos de textos.
59
Guarda el archivo con el nombre de Copia Ejemplo 2_2
NOTA: Combina los encabezados con la marquesina.

VOLVER
Ejercicio de enlaces
60
Crea tres documentos HTML cada uno con nombres diferentes. Cralos usando los
tags que hemos visto en los captulos anteriores.
En el primer documento crea hipervnculos hacia los otros dos documentos.
Cada uno de los otros documentos debe tener vnculos hacia los otros documentos.
Marca una parte de alguno de los documentos usando el tag <A> y el atributo
"name".
Haz que la parte que marcaste en el punto anterior sea accesible a travs de un
hipervnculo en cada uno de los documentos.

Curso de HTML

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Curso de HTML

Caricato da

Copyright:

Formati disponibili

CURSO DE

Curso de Bsico de HTML

HTML es un lenguaje que

Las etiquetas del lenguaje HTML

El lenguaje HTML usa etiquetas o directivas (tags) para indicarle al

Estructura de un documento HTML

Se codifica a travs de unas etiquetas especiales,

Estructura de un documento HTML

Cabecera y cuerpo del documento

HTML: Limita el documento e indica que se

Para guardar los

Organizacin del texto

Los saltos de lnea, tabuladores y otros separadores (excepto los

Organizacin del texto

Salto de lnea: <br>

Sangrado de texto <blockquote>

Subrayado <u> </u>

Cursiva <i> </i>

Negrita <b> </b>

Subndice <sub> </sub>

Superndice <sup> </sup>

Comentarios. Son

Resultado del archivo Ejemplo 1_2.htm

Organizacin del texto

El tag FONT permite modificar la

face - color - size

Funcin del tag

Ejecucin del archivo Ejemplo 1_3

Se utilizan para crear ttulos dentro de una

<P>Esta es un pgina con titulares,

Las marquesinas son lneas de texto que pueden

Atributo behavior: este atributo modifica el tipo

alternate: de lado a lado de la ventana como si

Atributo bgcolor: nos permite cambiar el color

<marquee bgcolor="#006699" behavior="alternate"

El hipertexto permite conectar entre s diferentes

<A HREF="URL">.....</A>: Es el ms habitual de

<A NAME="parte1">Primera parte</A>:

HIPERTEXTO Tipos de referencias

Referencia relativa al sitio

Enlaza con una ubicacin externa al sitio en el que

HIPERTEXTO Tipos de referencias

Referencia relativa al sitio

Enlaza con un documento

Si el documento con el que se quiere enlazar esta en una

<a href=carpeta1/ejemplo1_1.htm Primer ejercicio</a>

HIPERTEXTO Tipos de referencias

Referencia relativa al sitio

Enlaza con un punto determinado del documento

La sintaxis del enlace sera:

Para realizar este ejercicio se

HIPERTEXTO Destino del enlace

El destino del enlace determina en qu ventana va

Abre el documento vinculado en una ventana nueva del

Abre el documento vinculado en la ventana del marco que

Es la opcin predeterminada. Abre el documento vinculado en el

Abre el documento vinculado en la ventana completa del

<a href ="http://www.lanasa.net" target=

HIPERTEXTO Cambiar el color de los enlaces

Se puede modificar el color predefinido para el

=cdigo de color: para los enlaces normales.

Para eliminar el subrayado utilizaremos el atributo

Para colocar una imagen debemos

Establece la localizacin de la imagen que