Guia HTML 2016

Universidad Bolivariana de Venezuela.
Programa de Formacin en Informtica para la Gestin Social
U.C: Internet y el Web

Periodo: 2016-II
Realizado por el Profesor: Gerardo Garcia
____________________________________________________________________________________
Gua Instruccional de :
Internet y el Web
Responsables:
Ing.. Gerardo Garcia
Maracaibo, Julio de 2016.


Periodo: 2016-II
____________________________________________________________________________________
Conceptos Bsicos.
Seguidamente describimos algunos conceptos que consideramos

imprescindibles:
World Wide Web (WWW): (del ingls, Telaraa Mundial), la Web o WWW, es
un sistema de hipertexto que funciona sobre Internet. Para ver la informacin
se utiliza una aplicacin llamada navegador web para extraer elementos de
informacin (llamados "documentos" o "pginas web") de los servidores web (o
"sitios web") y mostrarlos en la pantalla del usuario.
El usuario puede entonces seguir hiperenlaces que hay en la pgina a otros

documentos o incluso enviar informacin al servidor para interactuar con l. A la
accin de seguir hiperenlaces se le suele llamar "navegar" por la Web. No se
debe confundir la Web con Internet, que es la red fsica mundial sobre la que
circula la informacin.

Periodo: 2016-II
____________________________________________________________________________________
Del mismo modo que se puede distinguir entre "una intranet" (una inter-red) y
"Internet", uno puede referirse a "una web" como un conjunto de sitios que
proveen informacin por los medios descritos, y "la Web", que es la enorme e
interconectada web disponible prcticamente en todos los sitios de
Internet.es.wikipedia.org/wiki/WWW
Navegador: Un navegador web o web browser es una aplicacin software que

permite al usuario recuperar y visualizar documentos de hipertexto,
comnmente descritos en HTML, desde servidores web de todo el mundo a
travs de Internet. Esta red de documentos es denominada World Wide Web
(WWW) o Telaraa Mundial.
Los navegadores actuales permiten mostrar y/o ejecutar: grficos, secuencias

de vdeo, sonido, animaciones y programas diversos adems del texto y los
hipervnculos o enlaces. Los programas utilizado para visualizar las pginas
web podemos destacar Internet Explorer, Netscape, Firefox y Opera
Servidor: (host) Ordenador conectado a Internet capaz de prestar uno o ms

servicios a otros ordenadores llamados "clientes".
Ejemplos de servicios: conexin, cuenta de correo, sitio web, ftp, noticias, etc.

Periodo: 2016-II
____________________________________________________________________________________
HTTP: Abreviacin de "Hypertext Transfer Protocol" o, en espaol, "Protocolo

de Transferencia de Hipertexto". Es el tipo de comunicacin utilizado entre un
servidor y un navegador de WWW, como por ejemplo el Firefox o el Internet
Explorer. Por este motivo, las direcciones de las pginas web comienzan por
"http://..."
URL: Es el Localizador Uniforme de Recursos, o dicho mas claramente, es la

direccin que localiza una informacin dentro de Internet. Ejemplo de una URL:
www.innovanetworks.es
HTML: El HTML, acrnimo ingls de Hypertext Markup Language (lenguaje de

formato de documentos de hipertexto), es un lenguaje de marcas diseado
para estructurar textos y presentarlos en forma de hipertexto, que es el formato
estndar de las pginas web. Gracias a Internet y a los navegadores del tipo
Explorer, Mozilla, Firefox o Netscape, el HTML se ha convertido en uno de los
formatos ms populares que existen para la construccin de documentos.
HTML es hijo de SGML, aunque hay unas versiones de XHTML que son
descendientes de XML y exigen que se escriba mucho ms para facilitar la vida

Periodo: 2016-II
____________________________________________________________________________________
a los navegadores, que son aquellos programas que nos muestran informacin
en pantalla.
Ruta absoluta: las rutas absolutas son indicadas mediante la URL completa
del documento vinculado.
<a href="http://www.pcweb.es"> Enlace</a>

Para vincular un documento situado en otro servidor, o sitio web, es preciso
utilizar una ruta absoluta.
Aunque tambin podemos emplear las de rutas absolutas para llamar o

localizar archivos locales (de documentos en el mismo sitio), se desaconseja
emplear este mtodo, puesto que si mueve el sitio a otro dominio (lugar,
carpeta o servidor) se rompern todos los vnculos de las rutas absolutas.
Se recomienda el utilizar rutas relativas para vncu los locales, puesto que
estos vnculos nos permiten una mayor flexibilidad, en caso de que
necesitemos mover los documentos dentro del sitio.
Las rutas relativas a los documentos son las ms adecuadas para emplear
con vnculos locales en la mayora de los sitios Web. Son especialmente tiles
cuando el documento actual y el documento con el que se establece el vnculo
se hallan en la misma carpeta. Tambin es posible usar una ruta relativa al
documento para crear un vnculo con un documento en otra carpeta, pero
deberemos especificar la ruta empleando de la jerarqua de carpetas desde el
documento actual hasta el vinculado.

Periodo: 2016-II
____________________________________________________________________________________
Para establecer un vnculo con un documento de la misma carpeta,

indicaremos slamente el nombre del archivo.
<a href="enlaces.html">Enlaces</a>
Para realizar un vnculo con una pgina o un archivo situado por debajo en el
arbol se debe indicar los nombres de las subcarpetas seguidos de /, y
finalizando con el nombre del archivo.
<a href="documentos/detalles.doc">Documento Word</a>
<a href="documentos/excel/tabla.xls">Documento Excel</a>
Para establecer un vnculo con un documento que se halla por encima en el

rbol debes introducir ../para cada nivel que queramos subir.
<a href="../indice.htm">ndice</a>
Temenos la posibilidad de combinar las dos ltimas operaciones, subiendo por

el rbol y luego bajando por otra rama
<a href="../general/menu.htm">Enlace</a>
Introduccin al HTML
HTML es un lenguaje muy sencillo que permite describir hipertexto, es decir,

texto presentado de forma estructurada y agradable, con enlaces (hyperlinks)

Periodo: 2016-II
____________________________________________________________________________________
que conducen a otros documentos o fuentes de informacin relacionadas, y

con inserciones multimedia (grficos, sonido...). La descripcin se basa en
especificar en el texto la estructura lgica del contenido (ttulos, prrafos de
texto normal, enumeraciones, definiciones, citas, etc) as como los diferentes
efectos que se quieren dar (cursiva, negrita, o un grfico determinado).
HTML es el lenguaje con el que se "escriben" las pginas web. Se puede

resumir la filosofa del HTML con los siguientes puntos :
Es muy sencillo.
No hay variables.
No se compila.
Es un lenguaje interpretado.
A la instrucciones se les llama etiquetas o marcas
Permite escribir hipertexto
El programa que interpreta este lenguaje es el navegador (Internet Explorer,

Netscape, Firefox, etc).Este lenguaje es el usado por los navegadores para
mostrar las pginas web.
A las instrucciones se les llama marcas etiquetas, Las etiquetas de HTML

tienen la siguiente sintaxis:
<identificador-de-etiqueta Atributos: informacin adicional>

Un ejemplo de la etiqueta <b> (bold) que se utiliza poner el texto en negrita.
Algunas etiquetas envuelven texto y marcan el comienzo de un bloque.
La sintaxis para cerrar el bloque es:

Periodo: 2016-II
____________________________________________________________________________________
</identificador-de-etiqueta>
Veamos un ejemplo:
El cdigo HTML:
<b> HOLA MUNDO </b>
se ver:
HOLA MUNDO
Una caracterstica de HTML es que es pasivo. Esto es no interacta con el

usuario. Simplemente se baja el cdigo de HTML del servidor al navegador del
cliente y este nos lo muestra
. De una forma directa un documento de HTML no puede pedir informacin al

usuario, procesarla y desplegarla. Por esto no se considera a HTML con un
lenguaje de programacin.
Es un lenguaje muy parecido a como trabaja un procesador de textos. HTML es

un lenguaje transferible, es decir, se pueden visualizar las pginas con
cualquier sistema operativo y, por supuesto tambin crearlas. El HTML est
formado por tan slo 90 elementos.
Una de las caractersticas ms importantes del HTML es el hipertexto. Esto

quiere decir que las pginas no son elementos aislados, sino que estn unidas
a otras mediante los links o enlaces hipertexto. Gracias a estos enlaces el
navegante de internet puede pulsar sobre un texto (texto al que llamaremos de

Periodo: 2016-II
____________________________________________________________________________________
ahora en adelante enlace) de una pgina para navegar hasta otra pgina. Ser
cuestin del programador de la pgina inicial decidir que palabras o frases
sern activas (enlaces) y a donde nos conducir pulsar sobre ellas
Sintaxis de una pgina HTML

Los documentos o archivos HTML estn compuestos por tres partes bien
diferenciadas:
1. EL Comiezo del documento HTML lo indica la etiqueta <html>

Adems un documento HTML ha de estar delimitado por las etiquetas
<html> .... </html>
2. La Cabecera del documento (Header, cabecera en ingls) esta

delimitada por <head> ...... </head>
Donde colocaremos etiquetas normalmente informativas como el ttulo de la


Periodo: 2016-II
____________________________________________________________________________________
pgina. Adems se usa para dar informacin sobre el documento, por ejemplo
la versin de HTML (no visible)
3. El Cuerpo del documento (BODY, cuerpo en ingls) flanqueado por las

etiquetas <body> ...</body>
Es probablemente el parte ms importante de un documento HTML. es

donde el usuario disea o maqueta atravs de las etiquetas (tags) la pgina
web.
Por ltimo un pequeo detalle tendremos que salvar el documento con la

extensin .htm o .html, entoces ser un archivo html.
Esta estructura puede observarse continuacin.

<html>
<head>
</head>
<body>
</body>
</html>
veamos el significado del cdigo anterior:
La primera lnea indica que es un documento HTML:

<html> comienzo de pgina html
La segunda y tercera lnea delimitan la cabecera del documento:

<head>

Periodo: 2016-II
____________________________________________________________________________________
</head>
La cuarta y quinta lnea delimitan el cuerpo del documento:

<body>
</body>
La ltima lnea indica que finaliza el documento HTML:

</html>
Nuestra primera pgina

Aplicando lo aprendido en el punto anterior Sintaxis de una pgina nuestra
primera pgina podra ser algo parecido a esta:
<html>
<head>
</head>
<body>
HOLA MUNDO
</body>
</html>
Prubelo, por favor, ver que fcil es realizar nuestra pgina web.
Cabecera de un documento <head>.....</head>.


Periodo: 2016-II
____________________________________________________________________________________
La Cabecera, head es la primera de las dos partes en que se estructura un

documento HTML. Veamos una cabecera tpica de un documento HTML:
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="tu nombre">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
</body>
</html>
En la Cabecera reside informacin acerca del documento, y generalmente no

se aprecia cuando se navega por l. Es importante recordar que estos
elementos son opcionales es decir no son obligatorios o necesarios para la
realizacin de una pgina web.
la etiqueta <title> .. </title> se escribe en la cabecera, el title, ttulo es lo

aparecer cuando abramos el documento con el navegador, en la barra azul,
ver dibujo.

Periodo: 2016-II
____________________________________________________________________________________
Es importante no confundir el ttulo de la cabecera con el nombre del fichero.

Por ejemplo el nombre del fichero podra ser: documento_web.html y el ttulo
<title> Mi pgina </title>
Otra etiqueta que podemos emplear en la cabecera (head) es la etiqueta

<meta> que posee diversas aplicaciones:
<head>
<title> la cabecera de un documento </title>
<meta http-equiv="Refresh" content="15">
</head>
Esto hace que el navegador vuelva a cargar la pgina activa al cabo de 15 segundos.
Tambin puede hacerse a un servidor. As:
<head>
<meta http-equiv="refresh" content="20"
url="http://miservidor/mipagina.html">
</head>
Tendremos que usar esto con precaucin. Puesto que si el contenido de la

pgina no varia, esto no tiene ninguna utilidad y si lo hacemos contra un
servidor podemos sobrecargarlo.
Otra opcin es forzar la expiracin inmediata en la cach del navegador de la

pgina recibida, lo que provoca que la pgina sea solicitada de nuevo al
servidor cada vez, en lugar de cargar la copia que ya existe en la mquina del
cliente. esto sera:
<head>
<meta htpp-equiv="Expires"
content="Tue, 20 Jan 2006 16:25:27 GMT">
</head>
Si la fecha ha pasado, como la que tenemos en el ejemplo, el navegador

eliminar inmediatamente la pgina de la cach, y si la fecha no ha pasado, la
borrara en fecha indicada.

Periodo: 2016-II
____________________________________________________________________________________
Tambin podemos usar la etiqueta meta para ayudar a los buscadores de

Internet como Google, Yahoo, etc a encontrar nuestras pginas. Pondremos
palabras clave que contiene la pgina separadas por comas.
Por ejemplo:
<head>
<meta name="keywords" content="HTML, facil, internet">
</head>
Adems si queremos que los buscadores muestren un breve resumen del

contenido de tu pgina, podremos usar este ejemplo:
<head>
<meta name="keywords" content="HTML, facil, internet">
<meta name="description" CONTENT="Manual de HTML">
</head>
Es importante tener en cuenta que podemos usar todos los elementos <meta>
que necesitamos, pero sin repetirlos.
Existen otros atributos de la etiqueta meta como el nextid, link o isindex pero
los cuales son de uso muy especializado o estn en desuso .
* significado de cache. Es un tipo de memoria interna. En el caso de los

navegadores, estos realizan una copia de la pgina que estn mostrando en un
espacio reservado del disco duro. De este modo en caso de volver a visitarla se
cargar desde la cach (desde el propio disco duro del usuario) mucho ms
rpidamente. Lgicamente el tamao de la cach y muchas ms opciones son
configurables en los navegadores.
Cuerpo de un documento HTML <body>.....</body>

El cuerpo esta delimitado por las etiquetas <body>....</body> siendo
habitualmente lo ms importante en un documento HTML. Entre las etiquetas

Periodo: 2016-II
____________________________________________________________________________________
que definen el cuerpo debemos de colocar los elementos que componen

nuestra pgina como por ejemplo: el texto, imgenes, etc.
La etiqueta <body> posee los siguientes atributos, (los cuales han sido
declarados en desuso, recomendando el uso de las estilos en cascada CSS
para realizar estas funciones):
Atributos de la etiqueta <body>:

bgcolor="nmero hexadecimal / nombre del color". Asignamos un color de
fondo a la pgina mediante un nmero hexadecimal, (#2233ff) o el nombre del
color en ingls (red).
Veamos un ejemplo:
<body bgcolor="#0000FF">
o
<body bgcolor="yellow">
Una buena ayuda para la seleccin de colores el formato hexadecimal,

#rrggbb, la puedes encontrar en: designacin de colores
text="nmero hexadecimal / nombre del color". Atributo usado para definir el

color del texto por defecto es negro mediante un nmero hexadecimal,
(#2233ff) o el nombre del color en ingls (red).
link="nmero hexadecimal / nombre del color".Parmetro usado para

especificar el color de los enlaces de texto. Color por defecto azul.
vlink="nmero hexadecimal / nombre del color". Parmetro usado para

especificar el color de los enlaces de texto ya visitados. Color por defecto
morado.
alink="nmero hexadecimal / nombre del color". Parmetro usado para

especificar el color de los enlaces de texto activo. Color por defecto rojo.
Ejemplo:
<body text="#ff0000" link="#ffffff"

Periodo: 2016-II
____________________________________________________________________________________
vlink="#ff00ff" bgcolor="#101010">
background="ruta archivo / nombre_archivo.extension". Indicamos la ruta y el

nombre del archivo que ser usado como fondo del documento. Esta se
visualizar en mosaico para cubrir toda la ventana si es pequea.
Veamos su sintaxis:
<body background="ruta/archivo.gif">
Tener que tener muy presente que debemos especificar la ruta de modo
relativo, esto nos aporta la siguiente ventaja si movemos el directorio completo
(con todos sus archivos y manteniendo su estructura). La ruta especificada en
nuestra pgina continua siendo vlida mientras que si especificamos una ruta
absoluta no nos valdra.
Dando formato al texto.

Probablemente entre los elementos ms importantes en HTML podemos
destacar las etiquetas que dan formato: <h1>, prrafos <p>, y saltos de lnea
<br>.
Gracias a estos elementos del HTML podremos dar una estructura general a
nuestro documento de HTML . Estas etiquetas nos ayudarn a configurar la
aparencia del documento en el navegador.
<h1>...</h1>, <h6>....</h6>...: Titulares. Sirven para dividir el texto en secciones.

Se pueden definir seis niveles de titulares, siendo <h1> el de mayor tamao y
el <h6> el de menor tamao. El texto que nos gustara que sea un titular lo
pondremos entre los elementos <h1> Titular h1 </h1>.
Ejemplo:
<h1> Titular h1 </h1>
se mostrar:
Titular h1

Periodo: 2016-II
____________________________________________________________________________________
<p>...</p>: Prrafos. Etiqueta que se dise para saltar de prrafo. Por lo que
puede ir sola "<p>" al final de un texto indicando que a continuacin se quiere
una lnea en blanco. Es aconsejable que se abra y cierre.
Ejemplo:
Texto normal
<p> esto es un prrafo </p>
continuamos con el texto normal
se ver:
Texto normal
esto es un prrafo
continuamos con el texto normal
<br>: Saltos de lnea. Este elemento realiza un salto de lnea, podemos poner
tantos como necesitemos y realizar un salto de lnea por cada una de ellos.
Ejemplo:
insertando <br> saltos <br> de lnea
se visualizar:
insertando
saltos
de lnea
: Comentarios. Lo que nosotros introduzcamos entre los

elementos  no se mostrarn a travs del navegador, permitiendonos
recordar posteriormente, en futuras revisiones el porque de esta o aquella
instruccin en el documento.
<hr>: Se emplea para dibujar una lnea horizontal. Posee los atributos

Periodo: 2016-II
____________________________________________________________________________________
align="left / right" Alineacin izquierda o derecha. Por defecto aparece

centrada
width="66%" Asigna el ancho en %
size="3".Designa el alto en pxels
color="#0000FF". Especifica el color
Ejemplo:
<hr width="75%">
<hr width="50%">
<hr width="25%">
<hr width="12%">
se mostrar:
__________________________________________________
______________________________________
_____________________________
_______________________
Tamao, tipo y color de las fuentes
Tamao de las letras

Aunque ya hemos visto anteriormente ests instrucciones al explicar los estilos
lgicos y los estilos fsicos. Vamos a explicar como utilizarlas.
Para definir distintos tamaos de letra, en HTML tenemos varias opciones:
1) Usamos el elemento <hx>....</hx>: donde x es un nmero que puede

variar entre 1 y 6, siendo 1 el tamao mayor. Esto se utiliza slamente para los
titulares de pginas
Ejemplo podra ser el siguiente:

<h1> Texto de prueba h1 </h1>

Periodo: 2016-II
____________________________________________________________________________________

se ver:
Texto de prueba h1
Texto de prueba h2
Texto de prueba h3
Texto de prueba h4
Texto de prueba h5
Texto de prueba h6
Es importante no olvidar el cerrar </hx> cada etiqueta ulitizada.
Como ya hemos mencionado anteriormente este tipo de elemento se suele

utilizar para escribir titulares, ya que despus del cierre automticamente el
visualizador inserta un salto de prrafo.
Por ejemplo: si escribes

<h1> Texto en h1 </h1> <h3> Texto en h3 </h3>

Periodo: 2016-II
____________________________________________________________________________________
se ver:
Texto en H1
Texto en H3
Y no una cosa al lado de la otra, como cabra esperar.
2) por medio de la etiqueta <font> con el atributo size <font size="3">

(tamao en ingls) seguido por un nmero, el cual indica el tamao entre 1 y 7.
Tenemos que tener en cuenta que el valor por defecto es 3. Esta notacin no
provoca un salto de prrafo despus de cada cambio.
Ejemplo:
<font size="3">N</font> <font size="4">N</font>
<font size="3">N</font>
El resultado ser:
NNN N NN NN N
Es posible cambiar el tamao por defecto (3) de toda la pgina con el elemento
<basefont size="valor">.
El texto pasar al tamao indicado por valor y lo mantendr hasta que


Periodo: 2016-II
____________________________________________________________________________________
aparezca otro elemento <basefont size="valor"> y lo restaure o lo cambie por

otro diferente.
Tipo de las Fuentes

Para cambiar el tipo de le letra podemos usar el atributo face seguido por el
nombre del tipo de letra al cual queremos cambiar.
Ejemplo:
<font face="times new roman">Fuente Times New Roman </font>

<font face="arial">Fuente Arial </font>
<font face="courier new">Fuente Courier New </font>
<font face="courier">Fuente Courier </font>
<font face="roman">Fuente Roman </font>
el navegador mostrar:
Fuente Times New Roman

Fuente Arial
Fuente Courier New
FuenteCourier
Fuente Roman
Este atributo se puede usar en conjuncin con color y tamao.
Por ejemplo:
<font face="univers" size="6" color="blue">
Texto tipo Univers
</font>
Se ver:
Texto tipo Univers


Periodo: 2016-II
____________________________________________________________________________________
Podemos definir cualquier tipo de letra, pero tenemos que tener en cuenta que
si en el ordenador de la persona que esta visualizando la pgina no tiene
instalada la fuente que nosotros hemos definido en font face se mostrar la en
su lugar fuente que el navegador tenga por defecto. Por tanto hemos de tener
mucho cuidado a la hora de definir los tipos de letra. Puesto que si definimos
tipos de letra raros es muy probable que no lleguen a mostrase en la pantalla
del cliente.
Color del Texto

El color del texto puede ser definido mediante el atributo color. En principio
existen dos posibilidades para definir los colores:
1. Mediante la Utilizacin de los valores RGB en forma hexadecimal

RGB=Red/Green/Blue; Insertar los valores Rojo/Verde/Azul.
Por ejemplo:
<font color="#24AAFF">
Este texto est en azul usando color="#24AAff"
</font>
se ver:
Este texto est en azul usando color="#24AAff"
2. Utilizando la especificacin del nombre del color.
Por ejemplo:
<font color="red">
Este texto est en rojo usando color="red"
</font>
se mostrar:
Este texto est en azul usando color="red"


Periodo: 2016-II
____________________________________________________________________________________
Si nos decidimos a trabajar con valores hexadecimales, podremos escoger

entre una paleta de 16,7 millones de colores. De esta manera se trabaja
independientemente de los navegadores Web.
Si embargo escribimos el nombre del color, podemos evitar la definicin del

color en forma hexadecimal que es un poco ms dificil. Actualmente estn
estndarizados tan slo 16 colores. Existen colores adicionales los cuales son
dependientes de los navegadores Web. Los cuales son:
Nombre Color Nombre Color Nombre Color

Aqua Black Blue
Fuchsia Gray Green
Lime Maroon Purple
Navy Olive Red
Silver Teal White
Yellow
Veamos lo siguiente ejemplos:

<font color="blue">
Este texto est en azul usando color="blue"
</font>
Este texto est en azul usando color="blue"
<font color="maroon">
Este texto est en azul usando color="maroon"
</font>
Este texto est en azul usando color="maroon"
Alineacin del texto

El alineamiento del texto, esto es, que aparezca a la izquierda, centrado o a la
derecha de la pgina, se consigue en HTML mediante las etiquetas como
<center>...</center> y <p align="center">
,...
Centrado del texto


Periodo: 2016-II
____________________________________________________________________________________
1. <center>...</center> en desuso , que centra todos los elementos que

englobaba.
2. <p aling="center">..</p> , mediante el atributo align.
Veamos un ejemplo:
<center> Este prrafo est centrado </center >
<p align="center"> Este prrafo est centrado </p>
Visualizacin:
Este prrafo est centrado
Este prrafo est centrado
Un prrafo puede alinearse a la izquierda, centro, derecha o justificarlo. El

prrafo en cuestin debe estar contenido entre las etiquetas
<p align="left/center/right/justify">...</p>.
Ejemplo:
<p align="left">
Este texto est alineado a la izquierda
</p>
<p align="center">
Este texto est centrado
</p>
<p align="right">
Este texto est alineado a la derecha
</p>
<p align="justify">
Este texto est justificado
</p>
Visualizacin:
Este texto est alineado a la izquierda
Este texto est centrado


Periodo: 2016-II
____________________________________________________________________________________
Este texto est alineado a la derecha
Este texto est justificado
Muy Importante: La recomendacin actual para alinear el texto segn nos

interese, es la de utilizar las CSS:
<p style="text-align:center">
Este texto est centrado.
</p>
<p style="text-align:left">
Este texto est alineado a la izquierda.
</p>
<p style="text-align:right">
Este texto est alineado a la derecha.
</p>
<p style="text-align:justify">
Este texto est justificado,
Margenes alineados a derecha e izquierda.
</p>
Este texto est centrado.
Este texto est alineado a la izquierda.
Este texto est alineado a la derecha.
Este texto est justificado, Margenes alineados a derecha e izquierda.
Listas
Listas Desordenadas
Supongamos que queremos mostrar en nuestra pgina web un pedido, por
ejemplo una lista de las pelculas que hemos adquirido recientemente, las que
nos gustara comprar, o quizs es Navidad y nos gustara realizar una lista con
nuestros buenos deseos de todos los aos.
HTML tiene unas posibilidades limitadas a la hora del tratamiento del texto. Las

Periodo: 2016-II
____________________________________________________________________________________
listas se usan para citar, numerar y definir cosas. Podemos clasificar las listas
en tres tipos:
1. Listas desordenadas
2. Listas Ordenadas
3. Listas de Definicin
Listas Desordenadas
Estn englobadas por las etiquetas <ul>...</ul> (unordered list). Cada uno de
los elementos de la lista comenzar con una etiqueta <li>, que puede o no
llevar su correspondiente </li> de cierre.
Veamos un ejemplo:
<p> Lenguajes en Internet </p>

<ul>
<li> Ingls 50% </li>
<li> Espaol 10 % </li>
<li> Francs 10% </li>
</ul>
Esto nos mostrar:
Lenguajes en Internet
Ingls 50%
Espaol 10 %
Francs 10%
Atributos de la etiqueta <ul>

La etiqueta <ul> dispone una serie de atributos, con los cuales es posible
configurar el aspecto que va a tener la lista.
type="circle / disc / square". Define la vieta a emplear en la lista. El parmetro

tipo puede tomar los valores:
circle: punto redondeado negro y relleno

disc: lnea crcular

Periodo: 2016-II
____________________________________________________________________________________
square: cuadro relleno
Ejemplo (1)

<ul type="circle">
</ul>
Esto nos mostrar:
o Ingls 50%
o Espaol 10 %
o Francs 10%
Ejemplo (2)
<ul type="square">
</ul>
Esto nos mostrar:
Ingls 50%
Espaol 10 %
Francs 10%
Listas Ordenadas
Estn delimitadas por las etiquetas <ol> y </ol> (ordered list). Al igual que las
desordenadas cada uno de los elementos de la lista comenzar con una
etiqueta <li>, que puede o no llevar su correspondiente </li> de cierre.
Veamos un ejemplo:

Periodo: 2016-II
____________________________________________________________________________________
<p> Ciudades del Mundo <p>

<ol>
<li> NewYork </li>
<li> Tokio </li>
<li> Shangai </li>
</ol>
Esto nos mostrar:
Ciudades del Mundo
1. NewYork
2. Tokio
3. Shangai
Atributos de la etiqueta <ol>

La etiqueta <ol> dispone una serie de atributos, con los cuales es posible
configurar la apariencia que va a tener la lista. Los ms importantes son:
(1) type="1 / a / A / i / I ": define el tipo de secuenciador a usar en la lista. Los

secuenciadores en una lista van en su orden natural lgico. El atributo tipo
puede tomar los valores:
type="1" - Para ordenar por nmeros - Este el valor que tiene type por
defecto
type="a" - Numerar por letras minsculas del alfabeto
type="A" - Clasificar por letras maysculas del alfabeto
type="i" - Numerar por nmeros romanos en minsculas
type="I" - Ordenacin por nmeros romanos en maysculas
Veamos algunos ejemplos:

Cdigo HTML Visualizacin
<ol type="1"> 1. primer elemento
<li> primer elemento </li>
<li> segundo elemento </li>
2. segundo elemento
<li> tercer elemento </li>
</ol> 3. tercer elemento
a. primer elemento
<ol type="a">

Periodo: 2016-II
____________________________________________________________________________________
<li> primer elemento </li> b. segundo elemento

</ol> c. tercer elemento
<ol type="A"> A. primer elemento
B. segundo elemento
</ol> C. tercer elemento
<ol type="i"> i. primer elemento
ii. segundo elemento
</ol&gr; iii. tercer elemento
<ol type="I"> I. primer elemento
II. segundo elemento
</ol> III. tercer elemento
(2) start="n": donde n es el valor con el que comenzar la lista. Los valores del
parmetro "n" son nmeros enteros a partir de 1. Si se omite este atributo la
lista comenzar por el nmero 1.
Cdigo HTML Visualizacin
<ol type="1" start="4"> 4. tercer elemento

<li> primer elemento </li> 5. cuarto elemento
6. quinto elemento
</ol>
<ol type="A" start="5"> E. cuarto elemento
F. quinto elemento
</ol> G. sexto elemento
Listas de Definicin
Estn englobadas por las etiquetas <dl> y </dl> (definition list). La etiquetas del
elemento a definir es <dt> (definition term) y su correspondiente definicin son
<dd>.(definition definition).

Periodo: 2016-II
____________________________________________________________________________________
Las etiquetas <dt> y <dl> no tienen pareja de cierre, pero la etiqueta padre <dl>
se debe cerrar siempre con su correspondiente pareja </dl>.
Veamos un ejemplo para aclarar esto un poco ms:

<p>Diccionario Oxford </p>
<dl>
<dt>footstep
<dd> Seguirle los pasos a alguen
<dt>misplace
<dd>perder algo transitoriamente
</dl>
El efecto producido:
Diccionario Oxford
footstep
Seguirle los pasos a alguen
misplace
perder algo transitoriamente
Obsrvese que la etiqueta <dd> desplaza hacia la izquierda el texto al cual acompaan.
Siendo estas etiquetas usadas algunas veces para desplazar textos a la izquierda.
Ejemplo:
<dl>
<dd> 1 Primer punto
<dl>
<dd> 1.1 Desplazado hacia la izquierda
<dl>
<dd>1.1.1 Mas desplazado hacia la izquierda
</dl>
</dl>
</dl>
Mostrndonos:
1 Primer punto
1.1 Desplazado hacia la izquierda
1.1.1 Mas desplazado hacia la izquierda

Guia HTML 2016

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Guia HTML 2016

Enviado por

Direitos autorais:

Formatos disponíveis

Universidad Bolivariana de Venezuela.

Programa de Formacin en Informtica para la Gestin Social

U.C: Internet y el Web

Maracaibo, Julio de 2016.

U.C: Internet y el Web

Seguidamente describimos algunos conceptos que consideramos

El usuario puede entonces seguir hiperenlaces que hay en la pgina a otros

U.C: Internet y el Web

Navegador: Un navegador web o web browser es una aplicacin software que

Los navegadores actuales permiten mostrar y/o ejecutar: grficos, secuencias

Servidor: (host) Ordenador conectado a Internet capaz de prestar uno o ms

U.C: Internet y el Web

HTTP: Abreviacin de "Hypertext Transfer Protocol" o, en espaol, "Protocolo

URL: Es el Localizador Uniforme de Recursos, o dicho mas claramente, es la

HTML: El HTML, acrnimo ingls de Hypertext Markup Language (lenguaje de

U.C: Internet y el Web

<a href="http://www.pcweb.es"> Enlace</a>

Aunque tambin podemos emplear las de rutas absolutas para llamar o

U.C: Internet y el Web

Para establecer un vnculo con un documento de la misma carpeta,

<a href="documentos/detalles.doc">Documento Word</a>

<a href="documentos/excel/tabla.xls">Documento Excel</a>

Para establecer un vnculo con un documento que se halla por encima en el

Temenos la posibilidad de combinar las dos ltimas operaciones, subiendo por

HTML es un lenguaje muy sencillo que permite describir hipertexto, es decir,

U.C: Internet y el Web

que conducen a otros documentos o fuentes de informacin relacionadas, y

HTML es el lenguaje con el que se "escriben" las pginas web. Se puede

El programa que interpreta este lenguaje es el navegador (Internet Explorer,

A las instrucciones se les llama marcas etiquetas, Las etiquetas de HTML

<identificador-de-etiqueta Atributos: informacin adicional>

U.C: Internet y el Web

Una caracterstica de HTML es que es pasivo. Esto es no interacta con el

. De una forma directa un documento de HTML no puede pedir informacin al

Es un lenguaje muy parecido a como trabaja un procesador de textos. HTML es

Una de las caractersticas ms importantes del HTML es el hipertexto. Esto

U.C: Internet y el Web

Sintaxis de una pgina HTML

1. EL Comiezo del documento HTML lo indica la etiqueta <html>

2. La Cabecera del documento (Header, cabecera en ingls) esta

Donde colocaremos etiquetas normalmente informativas como el ttulo de la

U.C: Internet y el Web

3. El Cuerpo del documento (BODY, cuerpo en ingls) flanqueado por las

Es probablemente el parte ms importante de un documento HTML. es

Por ltimo un pequeo detalle tendremos que salvar el documento con la

Esta estructura puede observarse continuacin.

veamos el significado del cdigo anterior:

La primera lnea indica que es un documento HTML:

La segunda y tercera lnea delimitan la cabecera del documento:

U.C: Internet y el Web

La cuarta y quinta lnea delimitan el cuerpo del documento:

La ltima lnea indica que finaliza el documento HTML:

Nuestra primera pgina

Cabecera de un documento <head>.....</head>.

U.C: Internet y el Web

La Cabecera, head es la primera de las dos partes en que se estructura un

En la Cabecera reside informacin acerca del documento, y generalmente no

la etiqueta <title> .. </title> se escribe en la cabecera, el title, ttulo es lo

U.C: Internet y el Web

Es importante no confundir el ttulo de la cabecera con el nombre del fichero.

Otra etiqueta que podemos emplear en la cabecera (head) es la etiqueta

Tendremos que usar esto con precaucin. Puesto que si el contenido de la

Otra opcin es forzar la expiracin inmediata en la cach del navegador de la

Si la fecha ha pasado, como la que tenemos en el ejemplo, el navegador