html-.pptx

Curso: HTML Básico Facilitador: Ing. Carlos J. Archondo O. 2

• El World Wide Web, la Web o
WWW, es un sistema de
navegación Web para extraer
elementos de información llamados
"documentos" o "páginas Web".
• Puede referirse a "una Web" como
una página, sitio o conjunto de
sitios que proveen información por
los medios descritos, o a "la Web",
que es la enorme e interconectada
red disponible prácticamente en
todos los sitios de Internet.
– Ésta es parte de Internet, siendo la
World Wide Web uno de los
muchos servicios ofertados en la
red Internet.
Curso: HTML Básico 4

• El HTML, acrónimo inglés de
HyperText Markup Language (lenguaje
de marcas hipertextuales).
– Es el lenguaje de marcación diseñado
para estructurar textos y presentarlos
en forma de hipertexto.
• Es el formato estándar de las páginas
Web.
• Gracias a Internet y a los navegadores
como ser Internet Explorer, Opera,
Firefox o Netscape, el HTML se ha
convertido en uno de los formatos más
populares que existen para la
construcción de documentos y también
de los más fáciles de aprender.

• En 1989 existían ya 2 técnicas para poder vincular
documentos electrónicos:
– Los hipervínculos (links)
– El poderoso lenguaje de etiquetas SGML.
• Tim Berners-Lee (Londres Inglaterra 1955) físico del
Centro Europeo para la Investigación Nuclear da a
conocer que estaba trabajando en un sistema que
permitirá acceder a ficheros en línea, funcionando sobre
redes de computadoras basadas en el protocolo TCP/IP.
– A principios de 1990, define el HTML como un subconjunto del
conocido SGML y crea algo más valioso aun, el World Wide
Web.
– En 1991, crea el primer navegador de HTML que funcionaría en
modo texto para UNIX.
Tim Berners-Lee

• Los trabajos para crear un sucesor del HTML,
llamado “HTML+”, comenzaron a finales de
1993.
– El HTML+ se diseñó originalmente para ser un super
conjunto del HTML que permitiera evolucionar
gradualmente desde el formato HTML anterior.
– La primera especificación formal se denominó versión
2.0 para distinguirla de los "estándares no oficiales".
– Los trabajos sobre HTML+ continuaron, pero nunca
se convirtió en un estándar.

•
El borrador del estándar HTML 3.0 fue propuesto por el recién
formado W3C en marzo de 1995.
– Con él se introdujeron nuevas capacidades, como facilidades para crear
tablas, hacer que el texto fluyese alrededor de las figuras y mostrar
elementos matemáticos complejos.
– Aunque se diseñó para ser compatible con HTML 2.0, era demasiado
complejo para ser implementado con la tecnología de la época y,
cuando el borrador del estándar expiró en septiembre de 1995, se
abandonó debido a la carencia de apoyos de los fabricantes de
navegadores Web.
– El HTML 3.1 nunca llegó a ser propuesto oficialmente, y el estándar
siguiente fue el HTML 3.2, que abandonaba la mayoría de las nuevas
características del HTML 3.0 y, a cambio, adoptaba muchos elementos
desarrollados inicialmente por los navegadores Web Netscape y
Mosaic.
– La posibilidad de trabajar con fórmulas matemáticas que se había
propuesto en el HTML 3.0 pasó a quedar integrada en un estándar
distinto llamado MathML.

•
El HTML 4.0 también adoptó muchos elementos
específicos desarrollados inicialmente para un
navegador Web concreto, pero al mismo tiempo pulió el
HTML.
• Ya no va a haber nuevas versiones del HTML.
– Sin embargo, la herencia del HTML se mantiene en XHTML,
que se basa en XML.

•
En 1989 a partir de un proyecto del CERN (Consejo
Europeo para la Investigación Nuclear), Tim Berners-
Lee construyó el prototipo que dio lugar al núcleo de lo
que hoy es la World Wide Web.
• La intención original era hacer más fácil el compartir
textos de investigación entre científicos y permitir al
lector revisar las referencias de un artículo mientras lo
fuera leyendo.
• Un sistema de hipertexto enlazaría todos los
documentos entre sí para que el lector pudiera revisar
las referencias de un artículo mientras lo fuera leyendo.
• El nombre original del prototipo era "Enquire Within
Upon Everything“.

•
La funcionalidad elemental de la Web se basa en tres estándares:
– El Localizador Uniforme de Recursos (URL), que especifica cómo a
cada página de información se asocia una "dirección" única en donde
encontrarla.
– El Protocolo de Transferencia de Hipertexto (HTTP), que especifica
cómo el navegador y el servidor intercambian información en forma de
peticiones y respuestas.
– El Lenguaje de Marcación de Hipertexto (HTML), un método para
codificar la información de los documentos y sus enlaces.
• Berners-Lee dirige en la actualidad el World Wide Web Consortium,
que desarrolla y mantiene estos y otros estándares que permiten a
las computadoras de la Web almacenar y comunicar todo tipo de
información.

•
La pieza clave es el "browser", "navegador",
"visualizador" o "cliente".
• Todas las codificaciones de efectos en el texto que
forman el lenguaje HTML no son más que instrucciones
para el visualizador.
– Partiendo de esto, se entiende el porqué no se ve igual en todos
los visualizadores.
• Depende de cómo estén diseñados y para qué versión de lenguaje
estén diseñados.
• Actualmente existen multitud de ellos, los más
conocidos:
– Internet Explorer de Microsoft, Netscape Navigator de Netscape,
o el Mozilla Firefox (que es el nuevo Netscape), sin olvidar el
clásico Opera.

• Si se tiene instalado un visualizador o
navegador HTML, sólo se tiene que crear un
documento con un editor y ya se tendrá un
hipertexto en marcha.
– Los documentos creados pueden residir en un disco
duro local, en una unidad de memoria auxiliar o en un
servidor web.
• Si es así, entonces estaremos moviéndonos por la World
Wide Web.
• Una página en HTML no es más que texto
normal, escrito con un editor, al que cuando se
le quiere dar algún aspecto especial, como ser
el tamaño de la letra, habrá que agregarle
ciertos códigos.
– A estos códigos se les llama elementos del lenguaje.

• Los pasos a seguir:
–Lo primero es crear las páginas
localmente, y eso ya nos permite
navegar por el documento.
• Si se desea ponerlo en Internet ("colgarlo"
en Internet), lo siguiente es conseguir una
cuenta y espacio en disco en algún
proveedor de servicios de internet (ISP:
Internet Service Provider).

– Luego hay que enviar los ficheros que
contienen las páginas al servidor.
• Para ello se puede utilizar la página que
habitualmente proporcionan los ISP para "subir"
los ficheros, o bien utilizar algún programa de FTP,
configurándolo según las instrucciones del ISP.
• La página inicial se llamará normalmente
index.html ó sino el nombre que se le asigne en el
servidor, de tal forma que baste con escribir por
ejemplo:
– http://www.mi_pagina.com
• Lo cual sería lo mismo que escribir:
– http://www.mi_pagina.com/index.html

•
Es un sistema que contiene una cantidad de información
casi infinita.
• Para que se pueda acceder a esta información, la
unidad básica corresponde a las páginas Web.
• Estas páginas se caracterizan por tener:
– Texto, imágenes, sonido y video.
• Pudiendo ser estos interactivos.
• La característica mas importante de las páginas Web es
que pueden poseer hiperenlaces.
– Originalmente hipertexto, hoy en día hipermedia:
• Hiperenlaces con componentes Multimedia.

• Cuando se desarrolló el HTML, se pensó en
satisfacer las necesidades del WWW:
– El Web tenía que ser distribuido:
• Es decir con información repartida en páginas no muy
grandes enlazadas entre sí.
– El Web tenía que ser hipertexto y debía ser fácil el
navegar por él.
– Tenía que ser compatible con distintos tipos de:
• Hardware.
• Sistemas operativos.
– Debía ser dinámico:
• El proceso de cambiar y actualizar la información debía ser
ágil y veloz.

•
No se requiere ningún programa especial.
• El código HTML es sólo texto.
• La extensión del archivo puede ser:
–
–
htm
html
•
•
Normalmente la página principal se llama:
– index.html
Se puede crear una página mediante:
– Editores de texto:
• Bloc de notas, edit de DOS, Word, etc.
– Editores WYSIWYG (lo que ves es lo que obtienes):
• Front Page, Macromedia Dreamweaver, Hot Metal, WebShop, Coffee Cup,
Voda, PSPad, Word, Power Point, etc.

• Las órdenes de este lenguaje están formados
por unos comandos llamados etiquetas.
– Las etiquetas pueden ser de 2 tipos:
• Única instrucción:
– <NOMBRE_ETIQUETA>
• Doble instrucción:
– <NOMBRE_ETIQUETA>TEXTO Y/O
CÓDIGO</NOMBRE_ETIQUETA>

• Veamos el siguiente código de nuestra primera página web:
<html>
<head>
<title>Mi primera página</title>
</head>
<body>

Esta es mi primera página Web, espero que les guste. Pepito
Pérez.
</body>
</html>

• Ahora analizaremos el código anterior:
– <html>……</html>:
• Todas las páginas Web comienzan con esta etiqueta.
– Posee etiquetas de inicio y fin.
– <head>……</head>:
• Encabezado de la página.
– Se pueden hacer distintos tipos de declaraciones en este
apartado: variables, tipos de letras, título, etc.
– 
• Introducción de comentarios en la página.
– <title>……</title>:
• Etiquetas para título a mostrar en la Barra de Título del
navegador.
– <body>……</body>:
• Etiquetas para marcar el inicio del cuerpo de la página.

ELABORACIÓN DE UN DOCUMENTO HTML.
1.- Para poder elaborar un documento HTML debemosprimero
de iniciar el “ Bloc de Notas ”, para la creación delmismo.
2.- A hora una vez abierto el Bloc de Notas anotaremos los
elementos básicos de un documento de HTML.
Nota: A hora bien anotamos todas
las etiquetas elementales que debe
de llevar un documento de HTML,
recuerden que la estructura de una
etiqueta siempre va a estar dada
por:
< nombre de la etiqueta >
Siempre va llevar esa estructura,
con paréntesis angulares < > y el
nombre de la etiqueta no importa
si se escribe con mayúscula o
minúscula:
< HEAD > ó < hEAd >
Lo que si es importante retomar es
que la etiqueta debe tener siempre
un inicio y un fin denotadopor:
< HEAD > < /HEAD >
Simplemente al anexarle el signo
de división ( / ) estémosle
indicando que ahí se ha terminado
la función de esa etiqueta.
3 HTML

3.- Una vez terminado el segundo paso , lo
que procede es guardar nuestro documento:
4.- A continuación
guardado de nuestro documento,
daremos paso al
sin
olvidar que debe tener la extensión .HTML ó
de lo contrario solo lo guardara como
archivo de texto y no como página de
HTML.
No olvides que la extensión puede ir en
minúscula ( .html ) ó mayúscula ( . HTML).
4 HTML

A hora observa que si al
momento de guardar el
documento sin ninguna extensión
automáticamente lo guardar
como un archivo de texto, y no
como un documento de HTML,
por ello es importante poner la
extensión “ .html “.
5 HTML

Ubicación de nuestro documento.
Encabezado al inicio de la pagina
Web. <title> Ejemplo </title>
Cuerpo del documento.
<body> Hola compañeros este es un ejemplo sencillo de HTML</body>

•
Ahora veamos como se verá el código anterior:

• Aquí reside información acerca del documento,
y generalmente no se ve cuando se navega por
él.
– En HEAD se puede agregar el elemento <TITLE> que
es una breve descripción que identifica el documento.
• Es lo que el visualizador guarda en "Bookmarks" (Favoritos).
• Por ejemplo:
– <HEAD> <TITLE>Head de un documento </TITLE> </HEAD>
– Dentro de HEAD puede utilizarse también otro
elemento: META.
• Esta etiqueta se utiliza fundamentalmente para poder
interactuar con motores de búsqueda de Internet.

•
Por ejemplo:
– <HEAD> <TITLE>Head de un documento </TITLE> <META HTTP-
EQUIV="Refresh" CONTENT="10"> </HEAD>
• Esto hace que el visualizador vuelva a cargar la página activa al cabo de 10
segundos.
• También puede hacerse a un servidor así:
EQUIV="Refresh" CONTENT="10;
URL=http://miservidor/mipagina.htm"> </HEAD>
• Otra opción es forzar la expiración inmediata en la caché del
navegador de la página recibida, lo que provoca que la página sea
solicitada de nuevo al servidor cada vez, en lugar de cargar la copia
que ya existe en la máquina del cliente:
EQUIV="Expires" CONTENT="Tue, 20 Aug 2006 14:25:27 GMT">
</HEAD>
• Si se pone una fecha ya pasada, como la del ejemplo anterior, el
navegador elimina inmediatamente de la caché la página recibida, y
si no es pasada, lo hará en el momento indicado por la misma.

• Si queremos que las páginas aparezcan en los
buscadores de Internet, y puedan ser
encontradas con facilidad, se debe poner las
palabras clave que contiene la página
separadas por comas:
– <HEAD> <TITLE>Head de un documento </TITLE>
<META NAME="keywords" CONTENT="HTML,
internet ,cursos"> </HEAD>
• Para que los buscadores puedan ofrecer un
breve resumen de los contenidos de la página:
– <HEAD> <TITLE>Head de un documento </TITLE>
<META NAME="description" CONTENT="Manual
para escribir HTML."> </HEAD>

•
Todos los navegadores, por defecto, siempre que
reciben una página de un servidor hacen una copia de la
misma en el disco de nuestra computadora.
– Con esto se pretende que si se vuelve a solicitar la misma
página, en lugar de pedirla de nuevo al servidor, se mostrará la
que se tiene guardada en el disco.
• A esta área del disco donde el navegador va poniendo
las páginas visitadas, se le denomina caché.
• El tamaño de la caché puede ser modificado desde las
opciones de configuración del navegador, e incluso se
puede darle tamaño cero.
– Con lo que siempre que se vea una página, ésta habrá sido
solicitada directamente al servidor.

•
Cuando un visualizador recibe un fichero, antes de
mostrarlo necesita saber el tipo de contenido que éste
tiene, a fin de procesarlo adecuadamente.
– En cada caso, el visualizador pondrá en juego distintas
habilidades.
• Si el fichero procede de un servidor http remoto, éste se encargará
de decirle al visualizador cuanto necesite saber.
• Si lo que hay que procesar es un fichero local, la única forma de
saberlo es por la extensión del fichero.
• La extensión de un fichero son las tres o cuatro letras
(depende del sistema operativo) que hay después del
nombre del fichero y que están separadas del mismo por
un punto.
• Existen innumerables extensiones correspondientes a
diferentes aplicaciones.

•
– .Z o .zip: Contiene un fichero comprimido de cualquier clase.
Estas son algunas de las extensiones standard más comunes y sus
contenidos:
–
–
–
– .html o .htm: Documento HTML. Contine texto e instrucciones HTML
que serán interpretadas.
– .text o .txt: Contiene texto plano.
– .gif: Contiene un fichero de imagen en formato GIF.
– .xbm: Contiene un fichero de imagen en formato X-Bitmap (blanco y
negro).
– .xpm: Contiene un fichero de imagen en formato X-Pixmap (color).
– .jpeg o .jpg: Contiene un fichero de imagen en formato codificado jpeg.
– .mpeg o .mpg: Contiene un fichero de imagen de video o cine (en
movimiento).
– .au: Contiene un fichero de audio (sonido) codificado en aiff-encoded.
– .mid: Contiene un fichero de audio (sonido) generado con
secuenciadores midi típicos de Windows.
.avi: Contiene un fichero con video y sonido típico de Windows95.
.exe: Contiene un fichero binario ejecutable en DOS.
.hqx: Contiene un fichero binario ejecutable en Macintosh.

• En el entorno WWW se utilizan los MIME
types:
– Multipurpose Internet Mail Extension, para
definir el tipo de un fichero transferido.
• El visualizador determina desde el MIME type
cómo hay que tratar cada fichero.
• Los visualizadores tienen una configuración de los
mapas de tipos aceptables, e instrucciones de
cómo proceder en cada caso.
– Algunos tipos son tratados directamente por el propio
visualizador (Ej: htm, gif, txt), mientras que para otros
necesitan de una herramienta auxiliar adecuada, que
hay que indicar al visualizador, para que sea llamada en
el momento preciso (Ej: zip, mpg, au).

• Para crear una página se recomienda
básicamente lo siguiente:
– Poseer conocimientos del funcionamiento del
“Explorador de Windows”.
– Poseer mínimamente herramientas como:
• Bloc de Notas y Paint (Existen otras mucho más potentes).
– Crear una carpeta para cada proyecto.
– Dentro de la carpeta del proyecto crear sub-carpetas,
con el fin de distribuir en ellas imágenes,
documentos, etc.
– Probar la página diseñada en varios navegadores:
• Internet Explorer, Mozilla, Netscape, etc.
– Como en todos los lenguajes de programación
existen miles de opciones diferentes de las comunes
(en este manual se ven solamente las de mayor uso).

•
Los parámetros soportados para el cuerpo son:
– Imagen de fondo:
• background=“nombre_del_archivo_imagen”
– Color de fondo:
• bgcolor=“color”
– Color de texto normal:
• text=“color”
– Color de enlace:
• link=“color”
– Color de enlace visitado:
• vlink=“color”
•
– Color de enlace activo:
• alink=“color”
Ejemplo:
<body bgcolor=“green” link=red>
.
.
.
</body>
• Para poner una imagen de fondo fija:
– <BODY background=“foto.jpg" bgproperties="fixed">

• El número de colores soportados por la
mayoría de los navegadores es de 16
millones.
• Los colores que indicaremos en esta
sección son sólo 16.
• Pueden ser representados mediante texto
(su nombre en inglés) o mediante su
código equivalente en hexadecimal:
– Desde: #000000
– Hasta: #FFFFFF

Negro
Blanco
Verde
Marrón rojizo
Black
White
Green
Maroon
#000000
#FFFFFF
#008000
#800000
Verde oliva Olive #808000
Azul marino Navy #000080
Violeta Purple #800080
Gris oscuro Gray #808080
Rojo Red #FF0000
Amarillo Yellow #FFFF00
Azul Blue #0000FF
Azul verdoso Teal #008080
Verde lima Lime #00FF00
Azul claro Aqua #00FFFF
Fucsia Fuchsia #FF00FF
Gris claro Silver #C0C0C0

• El HTML soporta 6 niveles de encabezados (heading) ó titulares:
– <h1>Encabezado 1</h1>
• El texto mas grande corresponde a h1
• Empiezan siempre en una línea nueva
y generan un espacio vertical extra
• Todos los titulares están en negrita

• Una de las formas más comunes de
generar un salto de línea es mediante la
etiqueta:
– <br>
• Tiene el formato de instrucción única
– No necesita </br>

• Un párrafo es un conjunto de frases sobre un
mismo asunto
• La forma de crear un párrafo simple es:
– <p>Este es el ejemplo de un párrafo</p>
• La forma de crear un párrafo alineado es:
– <p align=“left”>aquí el texto</p>
– <p align=“right”>aquí el texto</p>
– <p align=“center”>aquí el texto</p>
• Esta etiqueta genera automáticamente un
espacio vertical

• Dejar espacio en blanco dentro de las
etiquetas “no genera mayor espacio”
• La forma de generar este es mediante:
– &nbsp

• Es un texto (acotación) que tiene
automáticamente una tabulación
• Se utiliza para esto:
– <blockquote>Aquí el texto</blockquote>

<html>
<body>
Este es un ejemplo de blockquote:
<blockquote>
El uso de esta instrucción genera<br>
de forma automática<br>
márgenes al párrafo.
</body>
</html>

• Utilizada para hacer alguna referencia al
final de la página
• Este genera un texto en itálica
• Su forma de uso:
– <address> Aquí el texto </address>
• Se puede generar el mismo efecto con:
– <i> Aquí el texto </i>

• La etiqueta de centrado se utiliza
indiferentemente para texto, imágenes,
tablas, etc.
• Su formato:
– <center>Aquí el texto u otro objeto</center>
• Existen otras herramientas de
alineamiento mejores como div y hojas de
estilo

• HTML permite dar varios tipos de
formatos al texto
• Para esto utiliza muchas etiquetas
compuestas por instrucciones de inicio y
fin
• Estas etiquetas se dividen en:
– Etiquetas de estilo físico
– Etiquetas de estilo lógico

• Son aquellas que especifican
exactamente cómo debe ser formateado
el texto
• Estas etiquetas contradicen en cierta
forma la característica descriptiva del
HTML, siendo muy criticadas por sectores
que sugieren siempre el uso de las
etiquetas de estilo lógico

• <b>…...</b>
• <i>……</i>
• <tt>……</tt>
• <strike>……</strike>
• <big>……</big>
• <small>……</small>
• <sub>……</sub>
• <sup>……</sup>
• <u>……</u>
Negrita
Itálica
Teletipo
(Monoespaciado)
Tachado
Grande
Pequeño
Subíndice
Superíndice
Subrayado

• Son la contraposición de los estilos físicos
• Está en concordancia con la filosofía de
HTML
• A diferencia de los estilos físicos le dicen
a los navegadores por ejemplo:
– Este texto es importante, esto es código, etc.,
de tal forma que el navegador lo represente
de la mejor manera posible

•
Texto de mayor importancia, negrita:
– <strong>……</strong>
• Énfasis, texto en cursiva:
– <em>……</em>
• Código de programa, en letra monoespaciada:
– <code>……</code>
• Texto de referencia, en cursiva:
– <cite>……</cite>
• Definición, texto en cursiva:
– <dfn>……</dfn>

• Esta etiqueta posee una gama importante de
variantes para la apariencia de las letras
• Para que un tipo de letra sea utilizado será
necesario que este se encuentre instalado en el
equipo con el cual se esté navegando
– Esta es la razón por la que normalmente se utilicen
fuentes típicas como: Arial, Times New, Roman,
Courier, Tahoma, etc.
• Existe una alternativa mejor a la etiqueta font:
– Las hojas de estilo en cascada CSS

• Existen 2 formas:
– Tamaño absoluto
• <font size=“n”>Aquí el texto</font>
– n varía entre 1(más pequeño) y 7(más grande)
– Tamaño relativo
• <font size=“+3”>Aquí el texto</font>
– Le dará al texto un tamaño de 3 veces mas al por
defecto
• Es común para este caso definir antes un tamaño
por defecto:
– <basefont size=“2”>

• Para dar un determinado color a una
porción de texto se utiliza:
– <font color=“red”>Aquí el texto</font>
– Los colores aceptados por la mayoría de
navegadores:
• black, white, green, maroon, olive, navy, purple,
red, yellow, blue, teal, lime, aqua, fuchsia y silver.

• A veces es necesario mantener espacios y saltos de línea de un
párrafo. Se verá tal cual se hizo el texto.
• Esto es texto preformateado:
<pre>
for I:=1 to n do
begin
readln(a[I,j]);
if a[I,j]=0 then
begin
writeln(‘Caso 1’);
caso1(n);
end;
end;
</pre>

• Las líneas horizontales (horizontal row) se
utilizan normalmente para separar
párrafos.
• Línea horizontal simple:
– <hr>
• Otra opción más interesante a estas, es el
uso de imágenes en forma de líneas.
– Estas pueden ser más vistosas.

• Línea horizontal con atributos:
– <hr align=“left”>
– <hr align=“center”>
– <hr align=“right”>
– <hr size=“200”>
– <hr width=“100”>
– <hr width=“80%”>
– <hr noshade>
(izquierda)
(centro)
(derecha)
(en pixeles)
(en pixeles)
(% de ventana)
(quita la sombra 3D)

•
Las imágenes pueden ser insertadas solas o dentro de
otros elementos como ser los párrafos.
• Para introducirlas es obvio que primero debe existir la
imagen en la ruta a especificar.
• La forma de utilizarla es:
– Pulsa la flecha <img src=“flecha.gif”> para pasar a la siguiente
página.
• Para que la página cargue más rápido es importante que
las imágenes tengan un formato comprimido o sean
pequeñas:
– jpg, jpeg, gif.

• Texto debajo de la imagen:
– <img src=“foto.gif”><h3>Esta es mi foto</h3>
• Texto al lado de la imagen:
– <h3><img src=“foto.gif”>Esta es mi foto</h3>
• La instrucción:
– <center>……</center>
– También es válida para imágenes.

• Para generar texto e imágenes con efectos de
fusión de estas con el texto se utiliza:
– <img src=“imagen.gif” align=“top”>Texto de ejemplo
• La parte superior de la imagen coincide con la del texto.
– <img src=“imagen.gif” align=“bottom”>Texto de
ejemplo
• La parte inferior de la imagen coincide con la del texto.
– <img src=“imagen.gif” align=“middle”>Texto de
ejemplo
• El texto está centrado al lado de la imagen.

•
Para la generación de texto envolvente
– …texto<img src=“imagen.gif” align=“left”>de ejemplo
• El texto envuelve a la imagen que se encuentra alineada a la izquierda de la
página.
– …texto<img src=“imagen.gif” align=“right”>de ejemplo
• El texto envuelve a la imagen que se encuentra alineada a la derecha de la
página.
• Para terminar texto envolvente se puede utilizar:
– <br clear=left>
• Provoca un salto de línea hasta el primer margen libre a la izquierda.
– <br clear=right>
• Provoca un salto de línea hasta el primer margen libre a la derecha.
– <br clear=all>
• Provoca un salto de línea hasta el primer margen libre tanto a la derecha
como a la izquierda.

• Para poder controlar los márgenes se
tiene 2 atributos disponibles con la
etiqueta img:
– vspace.
– hspace.
• Ejemplo:
– <img src=“imagen.gif” align=“left” vspace=30
hspace=30>

• Cuando una imagen corresponde a un
hiperenlace, automáticamente se
encuentra envuelta en un rectángulo.
• Para cambiar el grosor del borde de este:
– Desde no borde ó border=0.
– Hasta bordes más gruesos mayores a 0.
• Ejemplo:
– <a href=“nueva.html”><img src=“flecha.gif”
border=“0”></a>

• Para generar imágenes con distintos tamaños
del que tienen se puede utilizar 2 atributos
dentro de la etiqueta img:
– width.
– height.
• Ejemplo:
– <img src=“imagen.gif” width=200 height=200>
• Si se utiliza sólo uno de estos atributos, el
nuevo tamaño mantendrá una relación de
aspecto horizontal y vertical proporcional la
original.

• Son palabras que se presentan en forma
alternativa cuando una imagen no ha
cargado aún, ó cuando se posa el mouse
por encima de la imagen:
• Su formato:
– <img src=“foto.jpg” alt=“Esta es mi fotito”>

• Son enlaces para visualización mediante
una nueva página de navegador de
imágenes.
• Su formato:
– <a href=“imagen.zzz”>Imagen externa</a>
• Para estos enlaces externos, el
navegador descarga la imagen y la
reproduce o ejecuta con la aplicación
asociada respectiva.

Formato Extensión Descripción
GIF .gif Imágen de 256 colores s/pérdidas
JPEG .jpg, .jpeg 16 millones de colores c/pérdidas
BMP .bmp Bitmap de Windows
XBM .xbm Bitmap de Unix
PICT .pict Bitmap de Mac
PNG .png 16 millones de colores
TIFF .tif Gran calidad
XPM .xpm Imagen de Paintbrush

• Es la combinación de imágenes internas y
externas.
• Su objetivo proporcionar un aperitivo
(interno) con una imagen de menor
tamaño, de la imagen completa (externa).
• La forma más simple es tener imágenes
reducidas, para que cuando de clic en
estas (o su texto asociado), se pueda
acceder a las imágenes completas.

•
Permite enlaces de distintas áreas de una imagen para
acceder a otras páginas.
• Su formato:
– <img src=“imagen.gif” usemap=“#mapa1”>
– <map name=“mapa1”>
• <area shape=“rect”
– coords=“0,0,150,150”
– href=“uno.htm”>
• <area shape=“rect”
– coords=“150,0,300,100”
– href=“dos.htm”>
– </map>
• Se puede utilizar también:
– alt, shape=rect, circle, poly.

• Los enlaces hipertexto son aquellas palabras
(que aparecen subrayadas) en los navegadores
y que permiten saltar a otra parte de la página o
a otra página.
• La etiqueta que permite un hiperenlace es:
– <a href=“…”>Aquí el texto</a> (href es su atributo)
• Clasificación de los enlaces.
– Externos.
• Fuera de la página.
– Internos.
• Dentro de la misma página.

•
Ejemplo para acceder a la página de la Universidad de
los Andes:
– <a href=“http://www.udelosandes.edu.bo”>UNANDES</a>
• Ejemplo para enviar correo mediante el programa
instalado localmente por defecto:
– <a href=“mailto:pepito@gmail.com”>escríbeme</a>

• Para saltar a una parte específica de una
página (puede ser la misma u otra) se
requiere considerar 2 cosas:
– El hiperenlace:
• En la misma página:
– <a href=“#ancla1”>Inicio de la página</a>
• En otra página:
– <a href=“www.newpage.html#ancla1”>Noticias</a>
– El ancla ó marcador:
• <a name=“ancla1”></a>

• El principio es el mismo que con
hipertexto:
– <a
href=“http://www.udelosandes.edu.bo”><img
src=“logo.gif”></a>
• Es factible también hacer una
combinación de texto e imágenes que
enlazan una dirección interna o
externamente.

• Las listas son uno de los elementos mas
usados en HTML.
• Mediante HTML se pueden crear los
siguientes tipos de listas:
– Numeradas u ordenadas.
– No ordenadas.
– Listas de glosario o definición.
– Menús.
– Usadas con párrafos cortos.
– Listas de directorio.

• Ejemplo:
Los componentes básicos de un CPU son:
<ol>
<li>Unidad de Control
<li>ALU
<li>Registros
</ol>

• Ejemplo:
<ul>
<li>Unidad de Control
<li>ALU
<li>Registros
</ul>

• Ejemplo:
<dl>
<dt>Unidad de Control
<dd>Es la unidad principal
<dt>ALU
<dd>Realiza operaciones aritmético-lógicas
<dt>Registros
<dd>Son el área de memoria
</dl>

• Ejemplo:
<menu>
<li>Unidad de control
<li>ALU
<li>Registros
</menu>
• Se puede hacer exactamente lo mismo
con: <dir>……</dir>.

• Es posible el anidamiento de un tipo de lista dentro de otro con lo que se
logran interesantes efectos.
• Ejemplo:
<html>
<body>
<ul>
<li>Unidad de Control<br>
Sus funciones básicas son:<br>
<ol>
<li>Dar instrucciones a la ALU
<li>Escribir/leer de los registros
</ol>
<li>ALU
<li>Registros
</ul>
</body>
</html>

• El uso de tablas es muy popular en las
páginas Web.
• Existen muchas páginas divididas en
tablas y con sus bordes ocultos.
– Gracias a esto se organiza la página
simétricamente, sin necesidad que el visitante
vea la tabla.
• Las tablas pueden contener texto e
imágenes, además de listas, etc.

• Ejemplo de una tabla sencilla:
<table border=“1”>
<tr>
<th>encabezado1</th>
<th>encabezado2</th>
</tr>
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
</tr>
</table>

• Para insertar un título a una tabla:
<table border=“2”>
<caption align=“bottom”>
Título de la tabla
</caption>
<tr>
<td>Hola
<td>a todos
</table>
• El atributo de align puede ser:
– top, bottom, left, right.

• Para alinear toda la tabla debemos utilizar los atributos
de align:
<table align=“center”>
…Código de la tabla
</table>
• Puede ser: right, left ó center.

• Ejemplo:
– Esta es una prueba del uso de tablas
con texto
<table border="2" align="left">
<caption align="top"><b>Título</b>
</caption>
<tr>
<td>Hola
<td>a todos
</table>
– Este es texto envolvente sobre la
tabla, su uso es muy parecido al de
envolver imágenes. Puede utilizarse
atributos hacia izquierda, derecha y
centro de la tabla.
– <br clear="all">

• Alineamiento horizontal
– Se debe utilizar el atributo align (con right, left
ó center) de las etiquetas TH ó TD.
• Alineamiento vertical.
– Se debe utilizar el atributo valign:
• valign=“top”
• valign=“middle”
• valign=“bottom”

• Por defecto el ancho de las celdas queda
determinado por el tamaño necesario para
mostrar el contenido de sus celdas.
• Ancho de tablas.
– En píxeles:
• <table width=“500”>……</table>
– En porcentaje:
• <table width=“70%”>……</table>
• Tamaño de celdas.
– <td width=“80”height=“100”>……</td>

• Para que una celda pueda compartir más de una
columna o fila se utilizan los atributos:
– colspan y rowspan.
• Ejemplo:
<table border="1">
<caption align="top"><b>Título</b></caption>
<tr><th colspan="2">Celda de 2 columnas</th></tr>
<tr><td rowspan="2">Celda de 2 filas</td>
<td>Fila2, Columna2</td></tr>
<tr><td>Fila3, Columna2</td></tr>
</table>

• Los frames consisten en una técnica para
insertar varios documentos HTML en una
sola ventana.
• Para ello divide la pantalla en varias
zonas que reciben el nombre de frames ó
marcos.
• En cada uno de estos marcos debemos
insertar un contenido HTML (también
podría ser otro elemento visualizable por
los navegadores).

• El primer paso será crear el documento de definición de frames:
<html>
<head><title>Ejemplo de frames</title></head>
<frameset cols=“20%,80%”>
<frame src=“izquierda.html”>
<frame src=“derecha.html”>
</frameset>
</html>
• Con esto tendremos una página dividida en 2 frames, en una
columna izquierda y otra derecha que ocupan el 20 y 80% del
ancho respectivamente.
• El contenido de cada frame estará en los archivos izquierda.html y
derecha.html.
Ojo!:
La etiqueta body se
reemplaza aquí por el
frameset.
Puede utilizar rows en
vez de cols para
divisiones horizontales.

• El siguiente paso es la creación de los archivos izquierda.html y
derecha.html. A continuación vemos el frames de la izquierda:
<html>
<body>
<h1>Este es el frame izquierdo.</h1>
Este frame podría ser utilizado como índice:
<ul>
<li>Tema 1
<li>Tema 2
<li>Tema 3
</ul>
</body>
</html>
• Y Aquí el frame de la derecha:
<html>
<body>
<h1>Este es el frame derecho.</h1>
<p>En este frame podría ir el documento prinicipal de la página.</p>
</body>
</html>

• El ejemplo anterior se verá así:

•
Scrolling ó barras de desplazamiento horizontal y
vertical:
•
•
•
– Barra automáticas:
• scrolling=“auto”
– Barras siempre:
• scrolling=“yes”
– Nunca barras:
• scrolling=“no”
Noresize:
– Evita que el usuario pueda cambiar de tamaño a los frames.
Marginheight:
– Ajusta el margen superior que debe respetar el contenido de
ese frame (en pixeles).
Marginwidth:
– Ajusta el margen lateral que debe respetar el contenido del
frame (en pixeles).

html-.pptx

Recomendados

Recomendados

Más contenido relacionado

Similar a html-.pptx

Similar a html-.pptx (20)

Más de MariselaBardales1

Más de MariselaBardales1 (18)

Último

Último (20)

html-.pptx