Manual de HTML

INTRODUCCIN
A LA
PROGRAMACIN
WEB
ACTIVIDAD INTRODUCTORIA
1. Qu es Website?
En ingls Website o web site es un sitio (localizacin) en la World Wide Web que
contiene documentos (pginas web) contiene texto y/o grficos que aparecen como
informacin digital en la pantalla de un computador.
2. Qu es Intranet?
Es una red de computadores privadas que utilizan tecnologa Internet para compartir
dentro de una organizacin parte de sus sistemas de informacin y sistemas
operacionales.
3. Qu es extranet?
Es una red privada que utiliza protocolos de comunicacin y probablemente
infraestructura pblica de comunicacin. Una extranet es una Intranet que se extiende
mas all de los lmites fsicos de una corporacin.
4. Qu es Internet?
Es un conjunto descentralizado de redes de comunicacin interconectados que utilizan
la familia de protocolos TCP/IP, garantizando que las redes fsicas heterogneas que las
componen funcionen como una red nica de alcance mundial.
5. Qu es Hosting?
Alojamiento Web, es el servicio que provee a los usuarios de la Internet un sistema para
poder almacenar informacin, imagen, video o cualquier contenido aceptable en la web.
6. Qu es Dominio?
Es un conjunto de computadores conectados a una red que confa a uno de los equipos
de dicha red la administracin de los usuarios y los privilegios que cada uno de los
usuarios tiene en dicha red.
7. Qu es dominio geogrfico?
Indica el pas de origen de una pgina web, indicando sus caractersticas propias como
el lenguaje, actividades, etc. Generalmente los dominios de servicio son de 3 letras y los
geogrficos estn compuestos por las 2 letras ms representativas de su nombre.
8. Qu es un protocolo de Internet?
Es un conjunto de reglas usadas por computadores para comunicarse unas con otras a
travs de una red. Transferencia de datos entre dos puntos finales.
9. Qu s TCP/IP?
Se podra definir como el conjunto de protocolos bsicos de comunicacin, de redes,
que permite la transmisin de i9nformacion en redes de ordenadores.
10. Qu es HTTP?
(Hyper Text Transfer Protocol). Este protocolo est diseado para recuperar
informacin y llevar a cabo bsquedas indexadas permitiendo con eficacia saltos
hipertextuales, adems, nos solo permite le transferencia de textos
11. Qu es SMTP?
(Simple Mail Transfer Protocolo). Protocolo simple de correo electrnico en u conjunto
de reglas que rigen el formato y la transferencia de datos en envi de correo electrnico.
12. Qu es FTP?
(File Transfer Protocol). Protocolo para la transferencia remota de archivos. La cual
significa la capacidad de enviar un archivo digital de un lugar local a uno remoto.
INTRA
NET
Interno
Red
EXTRA
NET
Externo
Red
(utilizados en edificios y oficinas)
(utilizados dentro del permetro de una ciudad)
HOSTING (Alojamiento para la pgina web)
USUARIO
NESTOR VSQUEZ ROSSI
INTRANET
SERVIDOR WEB
Pgina 3
http://www.eluniversal.com.co
1
1. HTTP: Protocolo de transferencia de Hipertexto.

2. WWW: World Wide Web
3. NOMBRE DEL SITIO.
4. DOMINIO:
a. COM: Comercial
e. MIL: Militar.
b. EDU: Educativo
f. TV: Televisin.
c. GOV: Gobierno
g. NET: Tecnologa.
d. ORG: Organizacin.
5. DOMINIO GEOGRAFICO:
a. CO. Colombia
d. ES: Espaa.
b. AR: Argentina
e. BR: Brasil
c. MX: Mxico.
Es el lenguaje oficial para la construccin de pginas web, el significado de la siguiente

es LENGUAJE DE MARCADO DE HIPERTEXTO.
HTML est compuesto por un conjunto de instrucciones o comandos conocidos con el
nombre de etiquetas, las cuales tiene la funcin de mostrar dentro de un navegador de
Internet todos aquellos elementos que conforman la pagina web, los cuales son te4xtos,
imagen, videos, animaciones, sonidos, etc.
Las etiquetas estn compuestas de la siguiente forma:
<NOMBRE_ETIQUETA>
Etiqueta de apertura
</NOMBRE_ETIQUETA>
Etiqueta de cierre
Las pginas web estn compuestas por un conjunto de etiquetas de las cuales 4 nos
permiten desarrollar una pgina web rpidamente estas son:
1. <HTML>
</HTML>: Su funcin es indagarle al navegador cual va a ser el
principio y el final de la pgina.
2. <HEAD>
</HEAD>: Representa la cabecera de la pgina, su funcin es
mostrar diferentes tipos de informacin al inicio de una pgina web. Ejemplo:
titulo, barra de navegador, un texto que pueda ser encontrado por los buscadores.
3. <TITLE>
</TITLE>: Permite colocar un texto en la barra de titulo del
navegador, esta etiqueta debe trabajar junto a la etiqueta de la cabecera.
4. <HEAD>
</HEAD>: En l se coloca toda la informacin que necesitamos
colocar en la pgina web.
Ejemplo:
<html>
<head><title>MI SITIO WEB</title></head>
<body>BIENVENIDO A MI PAGINA WEB
</body>
<html>
NESTOR VSQUEZ ROSSI
Pgina 5
1
2
1. BARRA DE MEN: Esta compuesta por un conjunto de opciones y

herramientas que nos permite crear un nuevo documento, abrir, y guardar un
documento, observa la pagina web en un navegado, etc.
2. BARRA DE HERRAMIENTAS: Contiene los diferentes botones de acceso
rpido, los cuales nos permite realizar mltiples tareas.
3. SELECTOR DE DOCUMENTO: Muestra los archivos que se encuentran
abiertos con el programa Textpad.
4. BIBLIOTECA DE RECORTES: Contiene una lista de opciones que nos
permite insertar diferentes elementos como una etiqueta, un carcter especial,
etc.
5. REA DE TRABAJO: Es donde se escribe cada una de las etiquetas HTML,
estas aparecen en diferentes colores siempre y cuando el archivo haya sido
guardado con anterioridad para que se deben realizar los siguientes pasos:
a.
b.
c.
d.
e.
Men archivo >> Guardar como.

Seleccione la carpeta donde va a guardar el archivo.
Escriba el nombre del archivo.
Se selecciona el tipo de archivo en este caso Html.
Clic en guardar.
Tambin para trabajar con HTML puedes trabajar con el Block de Notas, pero al
guardar el archivo le debes colocar la extensin .HTML (punto HTML). Y cuando lo
visualices aparece con el Icono del Internet Explores y te abrir como una pgina Web.
Un atributo es cuando una de las propiedades o caractersticas que posee una etiqueta.
Estos pueden ser modificados para cambiar la apariencia de la etiqueta dentro de la
pgina web. Los atributos se escriben dentro de la etiqueta de apertura o de inicio, estos
se encuentran separados por otros atributos por un espacio, a cada atributo se le debe
establecer un valor en cual debe estar encerrado entre comillas dobles.
<ETIQUETA atributo1=valor atributo2=valor>
</ETIQUETA>
Etiqueta de apertura.
Etiqueta de cierra.
1. BGCOLOR: Se utiliza para cambiar el color de fondo de la pgina web.

2. BACKGROUND: Permite colocar una imagen de fondo en una pgina web.
3. TEXT: Cambia el color del texto que se encuentra en la pgina web.
Es utilizado dentro de los documentos o pginas web ttulos o subttulos en diferentes

niveles o tamaos dndole el nivel ms grande en 1 y el nivel ms pequeo es 6.
<H1>
</H1>
<H12>
</H2>
<H3>
</H3>
<H4>
</H4>
<H5>
</H5>
<H6>
</H6>
<B>
</B>
Coloca el texto en negrita
<I>
</I>
Coloca el texto en cursiva.
<S>
</S>
Coloca el texto en subrayado.
<U>
</U>
Coloca el texto en subrayado.
NESTOR VSQUEZ ROSSI
Pgina 7
<BR> </BR>
Salto de lnea
<CENTER> </CENTER>
Centra la informacin.
<P> </P>
Crea prrafos de texto, tiene un atributo llamado
Aling cuyos valores son left, rigth, center.
<HR> </HR>
atributos son:
Coloca una lnea horizontal en la pgina web, sus
a) Width: Cambia el ancho de la lnea.

b) Color: Cambia el color de la lnea.
c) Size: Cambia el grosor de la lnea.
<BLINK>
</BLINK>
Parpadeo
<SUB>
</SUB>
Coloca el texto por debajo de la lnea imaginaria
<SUP>
</SUP>
Coloca el texto por encima de la lnea imaginaria.
Es aquella que representa todo el texto que se encuentra dentro del cuerpo de una pgina
web, estos permite cambiar 3 caractersticas las cuales son:
a) Tipo de letra.
b) Tamao.
c) Color.
La etiqueta que representa la fuente es <FONT></FONT>
ATRIBUTOS:
1. FACE: Permite indicar el tipo de fuente o letra que tendr el texto dentro de la
pagina.
2. SIZE: Permite modificar el tamao de la fuente, su valor absoluto se encuentra
en la escala de 1 a 7, donde 1 es la letra ms pequea y 7 la letra ms grande
3. BGCOLOR: Especifica el color de la letra la cual debe ser escrito en Ingls.
EJEMPLO:
<html>
<head><title>::ANIMACIONES::</title>
</head>
<body bgcolor=yellow>
<hr width=80%>
<center><b><Font face=snap itc size=7 color=red>
MARKETING Y PUBLICICDAD </font></b></center>
</hr width=80%>
<i><font face=book Antiqua size=5 color=green>
1 INTERNET </font></i></br>
<s><font face=cardana size=4 color=orange>
2 REDES SOCIALES </font></s><br>
</body>
<html>
Para incluir comentarios en la pgina Web se utiliza la etiqueta .
Ejemplo:

Los comentarios no sern mostrados por el navegador y son tiles para realizar
anotaciones en el documento HTML que nos indiquen lo que estamos haciendo en una
determinada parte del documento.
Se utiliza dentro de la pgina web para darle movimiento a los objetos (Imgenes o
textos) de una forma vertical u horizontal.
ATRIBUTOS:
1. WIDTH: Ancho de la marquesina.
NESTOR VSQUEZ ROSSI
Pgina 9
2. HEIGHT: Alto de la marquesina.

3. BGCOLOR: Color de fondo de la marquesina, el color va en ingls.
4. BEHAVIOR: Determina el tipo de movimiento, sus valores son:
a. Scroll: Se desplaza dentro de la pgina web.
b. Alternate: Rebota dentro de la pagina web.
c. Slider: Se desliza dentro de la pgina.
d. Direction: Direccin del desplazamiento de la marquesina.
i. Rigth: derecha.
ii. Left: Izquierda
iii. Up: Arriba.
iv. Down: Abajo.
5. LOOP:
6. SCROLLAMOUNT: Determina la velocidad de desplazamiento.
7. SCROLLDELAY: Determina la velocidad de retardo de la marquesina.
8. HEIGHT: Anchura de la marquesina.
9. WIDTH: Altura de la marquesina
10. HSPACE y VSPACE: Estos dos atributos sirven para definir el nmero de
pxel que debe aparecer entre la marquesina y otros contenidos de la pgina, en
horizontal y vertical.
A continuacin un ejemplo de marquesina sencilla:
<marquee>
Texto desplazandose
</marquee>
Que podremos ir complicando hasta conseguir algo cmo:
Este ejemplo crea una marquesina vertical que se para al pasar el mouse por encima,
utiliza las funciones marquesina.start() y marquesina.stop() para arrancar y parar la
marquesina y los eventos onmouseover y onmouseout para detectar la posicin del
mouse<marquee
direction="up" height="200" width="100%" onmouseout="this.start()" onmouseo
ver="this.stop()">
Texto desplazandose
</marquee>
Algunos ejemplos de marquee:
<marquee width=200 direction=right>Marquesina a la derecha y con ancho
</marquee>
<marquee behaviour=alternate scrolldelay=500 bgcolor="#ff8833">texto que se
mueve</marquee
ETIQUETA DE IMAGEN
El uso de imgenes de la pgina web permite visualizar la informacin de una forma
agradable para el usuario, para utilizar una imagen se debe tener en cuenta lo siguiente:
1. Ubicacin del archivo de imagen: Las imgenes son archivos que deben estar
guardados en una carpeta en la misma carpeta que esta la pagina web que se est
construyendo, de no ser as las imgenes no aparecern en la pgina web.
2. Nombre y extensin del archivo: Los archivos ms utilizados para colocar
imgenes son aquellos de extensin: JPG, GIF y PNG.
La etiqueta que representa a las imgenes es <IMG>
</IMG>
ATRIBUTOS:
1.
2.
3.
4.
SRC: Permite escribir el nombre y la extensin del archive de imagen.

WIDTH: Ancho de la imagen.
HEIGHT: Alto de la imagen.
BORDE: Coloca un recuadro alrededor de la imagen.
<IMG SRC="/grficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=0 ALT="Un

beb">
5. ALT: Muestra un mensaje al pasar el puntero sobre la imagen. Es la alternativa
que se estableci cuando todava existan visualizadores de solo texto. Entre
comillas podremos escribir un texto que suplantara a esta imagen si no se carga
o mientras se carga o cuando, visualizando ya la imagen, pasamos el ratn por
encima.
Este valor se incluye detrs de las comillas que contienen la URL de la imagen:
<IMG SRC="URL DE LA IMAGEN" Alt="Texto a mostrar">
6. ALIGN: Uno de los parmetros que podemos cambiar al insertar las imgenes
es la alineacin. Para ello tendremos que incluir el parmetro Align=lugar, que
permite controlar la alineacin de una imagen con respecto a una lnea de texto.
Los tres valores posibles son left, right, y middle
Este valor se incluye detrs de las comillas que contienen la URL de la imagen:
<IMG SRC="URL DE LA IMAGEN" Align="left">

7. Imgenes que enlazan a otras web
Podemos hacer que una imagen nos enlace a otra web poniendo un enlace normal, y
dentro del campo del texto que habra que pinchar, poner la etiqueta de incrustar la
imagen.
NESTOR VSQUEZ ROSSI
Pgina 11
La etiqueta sera la siguiente:

<a href="URL DE LA WEB A LA QUE ENLAZAMOS" target="blanmk"><IMG
SRC="URL DE LA IMAGEN" ></a>
ETIQUETA DE VIDEO
Existen dos formas de insertar un video en una pgina web:
1. A travs de www.youtube.com.
2. Por medio de un archivo de video. Para este ltimo se debe tener en cuenta la
ubicacin, el nombre y la extensin: AVI, MPG, WMV y DIVX.
La etiqueta que representa los videos es la siguiente: <IMG>
</IMG>.
ATRIBUTOS:
1.
2.
3.
4.
5.
DYNSRC: Indica el nombre y extensin del archivo de video.

LOOP: Nmero de veces que se repite el video, por defecto es indefinido.
WIDTH: Ancho del video.
HEIGHT: Alto del video.
START=MOUSEOVER: Reproduce el video cuando el puntero del mouse
esta sobre l.
ETIQUETA DE SONIDO
A travs de esta etiqueta podemos colocar un sonido de fondo a la pgina web
<BGSOUND>.
ATRIBUTOS:
1. SRC: Nombre y extensin del archivo de audio. Los formatos de audio deben
ser: MP3, WAV, MID.
2. LOOP: Numero de veces en que se repite el sonido.
Existen diversas formas de incluir un fichero de audio en una pgina, formas que
dependen del tipo de fichero y del navegador usado, y podemos usar diferentes etiquetas
para cada una de ellas.
<BGSOUND SRC="imagine.mid" LOOP=INFINITE>
BGSOUND
La etiqueta bgsound incorpora sonidos de fondo en una pgina web, sonidos que se
ejecutan automticamente al cargarse la pgina. Es una etiqueta propietaria de
Microsoft, por lo que slo es interpretada por Internet Explorer, admitiendo los
formatos de audio MP3, MID y WAV,
EMBED
Nestcape Navigator implement la etiqueta embed para incorporar ficheros de audio. Es
sta una etiqueta de carcter general, que se usa para la inclusin en las pginas web de
todos aquellos archivos ajenos al navegador y que necesitan por lo tanto la ejecucin de
algn plugins para su interpretacin.
Su sintaxis general, con sus atributos ms importantes, es del tipo:
<bgsound src="ruta_fichero" loop="l" balance="b" volume="v"></bgsound>
ATRIBUTOS:
SRC="ruta_fichero" fija la ruta en la que se encuentra el fichero de audio a

reproducir. La ruta puede ser relativa a nuestro sistema de carpetas local,
absoluta respecto el sistema de carpetas del servidor web o una URL completa
que localice el fichero en Internet.
LOOP="l" determina el nmero de veces (l) que se debe ejecutar el fichero de
audio. Si le damos el valor infinite, el fichero se reproducir indefinidamente.
BALANCE="b" determina el balance del sonido entre los dos altavoces del
equipo, es decir, la potencia o intensidad con que se oir en cada uno de ellos
(derecho e izquierdo). Sus valores pueden estar entre -10,000 y +10,000,
correspondiendo el valor 0 a un balance equilibrado entre los dos altavoces.
VOLUME="v" fija el volumen al que se oir el sonido, y sus valores pueden
variar entre -10,000 (mnimo) y 0 (mximo). No es soportado por los equipos
MAC.
Ejemplo:
<bgsound src=" ./sonidos/wav.wav" balance=0 volume=0></bgsound>
La etiqueta bgsound admite muchas ms propiedades (disabled, delay, id, class,
controls, etc.). Asmismo, esta etiqueta es accesible en Internet Explorer mediante
cdigo JavaScript, pudiendo modificar en tiempo real sus propiedades balance, loop,
src, y volume, aunque sta ltima slo es accesible en plataformas PC. Para una
informacin completa sobre todas las propiedades y funcionalidades de este etiqueta
podis visitar la pgina correspondiente de Microsoft:
NESTOR VSQUEZ ROSSI
Pgina 13
EJEMPLO:
<html>
<head><title>::APLICATIVO MULTIMEDIA::</title>
</head>
<center>
<hr>
<img src=zzz.jpg width=30% height=30%>&nbsp
<img src=xxx.jpg width=30% height=30%>&nbsp
<img src=bbb.jpg width=30% height=30%>&nbsp
<img dynsrc=aaa.mwv width=30% height=30%>
<bgsound src=kalimba.mp3 loop=4>
</center>
</body>
<html>
La estructura en HTML para hacer un listado de elementos es bien simple, y lo mismo

los distintos valores que podemos asignar a sus atributos para tener un total control
sobre estas etiquetas HTML. Las listas HTML seran lo que son Numeracin y
vietas en los procesadores de texto.
LISTAS NO ORDENADAS O NO NUMERADAS:

Etiqueta: <ul></ul>
Elemento: <li></li>
Atributo: type=
Para comenzar siempre debe indicarse que comienza una lista mediante <ul> y para
finalizar </ul>. Si no indicamos el atributo type por defecto la lista se mostrar con un
crculo relleno. Lo ms comn es que dicho atributo se le asigne a la lista pero tambin
se le puede aadir a cada elemento en particular. La etiqueta <li> que indica un nuevo
elemento en la lista. Con el atributo type se indica que vieta debe visualizarse
pudiendo ser un crculo vaco, un cuadrado relleno o un crculo relleno.
Atributo type=: circle, disc o square
Ejemplo:
<ul type=disc>
<li>Manzanas</li>
<li>Naranjas</li>
<li>Peras</li>
</ul>
Resultado:
Manzanas
Naranjas
Peras
Vamos con un pequeo ejemplo en cdigo:

<ul>
<li type="circle">Esto es un tipo de punto.</li>
<li type="square">Este es otro.</li>
<li type="disc">Y este es otro diferente.</li>
</ul>
Cuyo resultado visual ser el que veremos a continuacin:

o
Esto es un tipo de punto.

Este es otro.
Y este es otro diferente.
NESTOR VSQUEZ ROSSI
Pgina 15
LISTAS ORDENADAS O NUMERADAS:

Etiqueta: <ol></ol>
Elemento: <li></li>
Atributo: type=
Atributo: value=
Atributo: start=
Es ms amplio lo que puede hacerse con las listas ordenadas ya que tiene tres atributos.
El atributo start es utilizado para los elementos, mientras que type y value para la lista.
Atributo type: define el tipo de lista ordenada y sus valores pueden ser I para que la
numeracin sea de nmeros romanos en mayscula; i nmeros romanos en
minscula; A o a para obtener ordenamiento alfabtico; 1 para numeracin con
nmeros.
Atributo value: establece a partir de qu valor comienza la lista. Su valor slo puede
ser numrico; Ej.: value=4 como resultado la el primer elemento de la lista ser 4..
Puede utilizarse conjuntamente con el atributo type en la etiqueta de la lista <ol>.
Atributo start: su valor slo puede ser numrico. Al utilizarlo al comienzo de la lista se
asume que la misma es del tipo numrica y sirve para indicar a partir de qu nmero se
empieza. No es combinable con los otros atributos.
Algunos ejemplos:
<ol type=A start=1>
<li>Manzanas</li>
<li>Naranjas</li>
<li>Peras</li>
</ol>
Resultado:
A.
Manzanas
B.
Naranjas
C.
Peras
<ol type=I>
<li>Manzanas</li>
<li>Naranjas</li>
<li>Peras</li>
</ol>
Resultado:
I.
Manzanas
II.
Naranjas
III.
Peras
<ol>
<li>Manzanas</li>
<li>Naranjas</li>
<li>Peras</li>
</ol>
Resultado:
1.
Manzanas
2.
Naranjas
3.
Peras
Las listas pueden anidarse, lo que implica simplemente crear otra lista dentro de una
lista. Hay otro tipo de lista, la llamada lista de definicin <dl> que no se usa casi nunca
pero vale mencionarla.
<ol type=I start=5>
<li>Manzanas</li>
<li>Naranjas</li>
<li>Peras</li>
</ol>
Por ejemplo, si queremos que nuestra lista empiece por el nmero 20, slo deberemos
escribir lo siguiente:
<ol>
<li value="20">Este ser el nmero 20. </li>
<li>Este ser el 21. </li>
<li> Este ser el 22. Y as sucesivamente. </li>
</ol>
Y el resultado ser el siguiente:
1. Este ser el nmero 20.
2. Este ser el 21.
3. Este ser el 22. Y as sucesivamente
NESTOR VSQUEZ ROSSI
Pgina 17
Un hipervnculo es una herramienta utilizada para vincular o unir 2 o ms pginas web,

la etiqueta que la representa es:
<A>
</A>
ATRIBUTOS:
1. HREF: Permite especificar el nombre del archivo de la pagina web que
deseamos vincular.
2. NAME: Se utiliza para darle un nombre a un ancla o marcador dentro de una
pgina web.
3. TITLE: Permite que al pasar el puntero del mouse sobre el hipervnculo
aparezca el mensaje con informacin.
Existen 3 clases de hipervnculos las cuales son:
1. HIPERVINCULO DENTRO DEL DOCUMENTO:
Este permite que el usuario se pueda desplazar o mover dentro del mismo
documento, ejemplo:
<H1>Tabla de Contenidos</H1>
<P><A href="#seccion1">Introduccin</A><BR>
<A href="#seccion2">Antecedentes</A><BR>
<A href="#seccion2.1">Experiencias personales</A><BR>
...el resto de la tabla de contenidos...
...el cuerpo del documento...
<H2><A name="seccion1">Introduccin</A></H2>
...seccin 1...
<H2><A name="seccion2">Antecedentes</A></H2>
...seccin 2...
<H3><A name="seccion2.1">Experiencias personales</A></H3>
...seccin 2.1...
2. HIPERVNCULOS ENTRE PAGINAS:

Las paginas implicadas deben estar vinculas dentro de la misma carpeta, los
nombres de las paginas no pueden contener espacios, ni caracteres especiales.
<html>
<head><title>::HIPERVINCULOS::</title>
</head>
<center>LA TECNOLOGIA</center>
<a href=PAGINA2.HTML>IR A LA CIENCIA</a>
</body>
</html>
<html>
</head>
<center>LA CIENCIA</center>
<a href=PAGINA1.HTML>IR A TECNOLOGIA</a>
</body>
</html>
LA TECNOLOGA
LA CIENCIA
IR A LA CIENCIA
IR A TECNOLOGIA
3. HIPERVNCULOS EXTERNOS:
Estos permiten vincular una pagina creada por nosotros con una pagina que ya
existe en Internet, ademas, podemos abrir o descargar y mostrar un programa de
correo electrnico.
NESTOR VSQUEZ ROSSI
Pgina 19
EJEMPLO:
Lo mas visto:
HOTMAIL
FACEBOOK
DESCARGAR MSICA: CUMBIA COLOMBIANA
<html>
</head>
<center>LO MAS VISTO</center>
<a href=http://www.hotmail.com>HOTMAIL</a><br>
<a href=http://www.facebook.com>FACEBOOK</a><br>
<a href=http://www.cumbia.mp3.com>
CUMBIA COLOMBIANA</a>
DESCARGAR
MSICA:
</body>
<html>
Una tabla en html viene marcada por las etiquetas <table> </table>. Entre esas dos
etiquetas definiremos la tabla, las celdas que queremos, las columnas y las
caractersticas de cada uno de estos parmetros. Pero vamos a empezar explicndote la
etiqueta <table>.
Ya hemos dicho que esta etiqueta nos indica que empieza una tabla, pero podemos
predefinir caractersticas de esa tabla? Por supuesto que s. Una tabla admite muchos
parmetros. Nosotros vamos a explicarte los principales.
La tabla: <table>
Como ya ocurre con la etiqueta body, a una tabla tambin lo podemos definir el fondo
de la misma. Esto lo podemos conseguir con el parmetro "bgcolor", que nos pondr un
color de fondo, o "background" para poner una imagen de fondo. Recuerda que si la
imagen es ms pequea que la tabla, sta se repetir tanto a lo ancho como a lo largo.
Otro aspecto que podemos definir de la tabla es el borde. Esto lo haremos con el
parmetro "border". Como en todas los parmetros que ya hemos visto escribiremos:
border= "x" siendo la x un nmero. Ese nmero indicar el grosor del borde. Si no
ponemos borde o lo escribimos "0", la tabla no mostrar borde ninguno. Por supuesto,
tambin podemos darle color al borde, escribiendo la etiqueta "bordercolor" e indicando
el color que queramos para nuestro borde.
El parmetro "width" indircar la anchura de la tabla. Esta anchura la podemos poner en
pxeles (width= "300") o con porcentaje (width= "100%").
Dos parmetros ms son cellspacing (que define el espacio entre las celdas de la tabla) y
cellpadding (que le marca a la tabla el espacio que debe dejar alrededor del texto dentro
de una celda).
Como ejemplo, escribiremos el hipottico supuesto de querer una tabla que sea ancha al
100%, con un borde azul de un pxel de grosor y con un cellpadding de 10 y con un
cellspacing de 10. El cdigo quedara de la siguiente forma.
<table width="100%" border="1" bordercolor="#0000FF" cellspacing="10"
cellpadding="10"></table>
Una vez explicadas las tablas, vamos a pasar a explicarte las partes fundamentales de las
mismas.
Las filas: <tr>
Como hemos visto en el encabezado las filas se escriben gracias a las etiquetas <tr> con
su correspondiente cierre </tr>. El contenido de las columnas que estn dentro de la fila
lo podemos alnear tanto horizontal como verticalmente.
Para alinearlo verticalmente utilizaremos el atributo "valign" para poder alinearlo arriba
de la celda ("top"), en el centro ("middle") o debajo ("bottom").
Para alinearlo horizontalmente utilizaremos el atributo "align". Con este atributo
podremos alinear el contenido de las celdas en el centro ("center"), a la izquierda
("left"), a la derecha ("right") o justificado ("justify").
Por supuesto a las filas tambin les podemos definir el color de fondo ("bgcolor") y el
color del borde ("bordercolor").
Las celdas <td>
Las celdas que van dentro de cada fila las tenemos que escribirlas con la etiqueta <td> y
su correspondiente cierre </td>.
Al igual que en las filas, en las celdas podemos definir la alineacin del contenido que
est dentro con los atributos "valign" y "align".
Las celdas poseen unos atributos que nos ayudan a poder agrupar tantas celdas o tantas
columnas como indiquemos en l. Para agrupar celdas utilizaramos el atributo
"colspan" y para agrupar celdas el atributo "rowspan".
NESTOR VSQUEZ ROSSI
Pgina 21
Por ejemplo, para agrupar en una celda 2 columnas tenemos que escribir: <td
colspan="2"></td>. Y para agrupar dos filas, la indicacin sera la siguiente: <td
rowspan= "2"></td>.
Las celdas <th>
Las celdas escritas con la etiqueta <th> y su correspondiente cierre, admiten los mismos
atributos que las etiquetas <td> y funcionan de la misma forma, salvo que el contenido
que est dentro de una etiqueta <th> est considerado como el encabezado de la tabla,
por lo que se crear en negrita y centrado sin que nosotros se lo indiquemos.
A continuacin vamos a ponerte un pequeo ejemplo de una tabla que combina todas
las cosas que hemos ido viendo en el artculo. Estdiate primero el cdigo, visualiza
cmo quedara la tabla y luego mrala en el enlace siguiente: Ejemplo de tabla.
<table width="100%" border="1" cellpadding="0" cellspacing="0"
bordercolor="#000000">
<tr>
<th>Encabezado 1</th>
</tr>
<tr>
<td rowspan="2" valign="middle" align="left">Este texto est alineado al centro
verticalmente y a la izquierda horizontalmente</td>
<td> </td>
nowrap
nowrap es un atributo que le podemos colocar a la etiqueta de la celda y que obligar al
navegador a no romper esa lnea, o sea, a no hacer ningn salto de lnea. Con este
atributo en la celda, el navegador no respeta el ancho predefinido de la tabla, si es que lo
hubiera, y respeta el ancho de la frase, ya que no puede partirla.
Por tanto, si la frase es ms larga que el ancho definido de la tabla, sta se estirar todo
lo necesario para albergar la frase sin saltos de lnea. El siguiente cdigo nos mostrar
cmo escribir este atributo en la etiqueta de la celda:
<table width="400" border="1" cellpadding="10" cellspacing="0"
<tr>
<td nowrap>Aunque este texto sea más ancho que los 400 píxeles
de la tabla, ésta no puede dividir mediante saltos de línea
el contenido de la misma, por lo que se estira para albergar toda la frase.</td>
</tr>
</table>
Y a continuacin podemos ver el efecto del atributo:
Aunque este texto sea ms ancho que los 400 pxeles de la tabla, sta no puede dividir
mediante saltos de lnea el contenido de la misma, por lo que se estira para albergar toda
la frase.
Etiqueta caption
Esta etiqueta sirve para poder ponerle un ttulo o encabezado a la tabla. Puedes poder el
encabezado arriba o abajo, dnde tu prefieras, mediante la etiqueta "align": "align=top"
para ponerlo arriba y "align=bottom" para ponerlo abajo. En el siguiente ejemplo
nosotros lo hemos puesto abajo.
<table width="50%" border="1" align="center" cellpadding="0" cellspacing="0"
<caption align="bottom">Encabezado de la tabla.</caption>
<tr>
<td align="center">Tablita de ejemplo para la etiqueta "caption"</td>
</tr>
</table>
EJEMPLO:
<table>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>
RESULTADO:
Celda 1
Celda 2
Celda 3
Celda 4
Celda 5
Celda 6
NESTOR VSQUEZ ROSSI
Pgina 23

Manual de HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Manual de HTML

Transféré par

Droits d'auteur :

Formats disponibles

INTRODUCCIN

(utilizados en edificios y oficinas)

(utilizados dentro del permetro de una ciudad)

HOSTING (Alojamiento para la pgina web)

NESTOR VSQUEZ ROSSI

1. HTTP: Protocolo de transferencia de Hipertexto.

Es el lenguaje oficial para la construccin de pginas web, el significado de la siguiente

NESTOR VSQUEZ ROSSI

1. BARRA DE MEN: Esta compuesta por un conjunto de opciones y

Men archivo >> Guardar como.

1. BGCOLOR: Se utiliza para cambiar el color de fondo de la pgina web.

Es utilizado dentro de los documentos o pginas web ttulos o subttulos en diferentes

Coloca el texto en negrita

Coloca el texto en cursiva.

Coloca el texto en subrayado.

Coloca el texto en subrayado.

NESTOR VSQUEZ ROSSI

Coloca una lnea horizontal en la pgina web, sus

a) Width: Cambia el ancho de la lnea.

Coloca el texto por debajo de la lnea imaginaria

Coloca el texto por encima de la lnea imaginaria.

NESTOR VSQUEZ ROSSI

2. HEIGHT: Alto de la marquesina.

SRC: Permite escribir el nombre y la extensin del archive de imagen.

<IMG SRC="/grficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=0 ALT="Un

<IMG SRC="URL DE LA IMAGEN" Align="left">

NESTOR VSQUEZ ROSSI

La etiqueta sera la siguiente:

DYNSRC: Indica el nombre y extensin del archivo de video.

SRC="ruta_fichero" fija la ruta en la que se encuentra el fichero de audio a

NESTOR VSQUEZ ROSSI

La estructura en HTML para hacer un listado de elementos es bien simple, y lo mismo

LISTAS NO ORDENADAS O NO NUMERADAS:

Vamos con un pequeo ejemplo en cdigo:

Cuyo resultado visual ser el que veremos a continuacin:

Esto es un tipo de punto.

NESTOR VSQUEZ ROSSI

LISTAS ORDENADAS O NUMERADAS:

NESTOR VSQUEZ ROSSI

Un hipervnculo es una herramienta utilizada para vincular o unir 2 o ms pginas web,

2. HIPERVNCULOS ENTRE PAGINAS:

NESTOR VSQUEZ ROSSI

NESTOR VSQUEZ ROSSI

NESTOR VSQUEZ ROSSI

Vous aimerez peut-être aussi