HTML
Introducción
Los páginas que podemos ver con los
navegadores son en su mayoría paginas
HTML.
Estas páginas no son mas que texto al que se
le han añadido algunas etiquetas.
Gracias a estas etiquetas el navegador sabe
que debe hacer para presentar estas páginas.
Estas etiquetas tiene atributos que le indican
como hacer esta tarea.
ELEMENTOS BASICOS PARA
CONSTRUIR UNA PAGINA HTML
La página html mínima
Toda página consta de etiquetas: < >
Los símbolos < y > se usan para distinguir
las etiquetas del resto del texto.
Todo documento o página html comienza
con <html> y termina con </html>.
Ej:
◦ <html>Aquí comienza la página
◦ </html>Aquí finaliza la página
Ejercicio 1
Abra un editor de texto, como el Notepad, y
escriba dichas etiquetas en el archivo
“primera página html”.
Cabecera y cuerpo
Toda página tiene una cabecera
Toda pagina tiene un cuerpo
Ej:
<html>
<head>
</head>
<body>
</body>
</html>
Titulo
Se pone en la cabecera con las etiquetas
<title></title>.
Se muestra en el marco del navegaor
Ej:
<html>
<head>
<title>Mi página web</title>
<head>
…
Ejercicio 2
Añada estas etiquetas (head, title, body) a la
página anterior y vea como queda.
Fíjese donde queda el titulo y donde se ve el
cuerpo de la página.
Formato del texto
Negrita(bold): <b></b>
Italica(italic): <i></i>
Subrayado(underline): <u></u>
Texto destacado(emphasis): <em></em>
Texto muy destacado(strong emphasis):
<strong></strong>
subindice: <sub></sub>
Superindice: <sup></sup>
Formato del texto
Estas etiquetas se pueden combinar. Esto se
hace anidándolas.
<b><i><u>texto en negrita, italica y
subrayado</u></i></b>
Se deben cerrarlas etiquetas en orden inverso
a como se abren
Ejercicio 3
Escriba una página a partir de la anterior,
cuyo texto sea:
El texto puede estar en negrita, italica o
subrayado, incluso en negrita, italica o
subrayado.
Formato del texto
Para cambiar el aspecto del texto se emplea
<font> y su cierre </font>
A diferencia de las anteriores emplea
atributos.
Ej:
El texto puede cambiar de <font
size=“6”>tamaño</font>
Tamaños: 1 muy pequeño a 7, muy grande
Formato del texto
Face: cambia el tipo de letra
Ej:
El texto puede cambiar de <font
face=“impact”>tipo de letra</font>
Color: cambia el color de letra
Ej:
El texto puede cambiar de <font
color=“yellow”>color</font>
Ejercicio 4
Cargue en un archivo html los distintos
ejemplos de la etiqueta <FONT> y vea su
aspecto. Ahora escriba un texto de dos o tres
lineas en, la primera mitad en Arial, la
segunda en Courier New. Ponga tres
tamaños: 2, 4 y 6. incluya una palabra de
tamaño 2 de color rojo, en italica y otra de
tamaño 6 en verde, en italica y con
subrayado.
Formato del texto
Salto de línea.
El navegador cambia de línea solo cuando se
le acaba la pantalla, no cuando vea un cambio
de línea en el texto.
La única forma de forzar un cambio de línea
es mediante la etiqueta:<br>
Ej:
<body>
Este texto<br>
<br>
Formato del texto
Ej:
<body>
Este texto<br>
<br>
<br>
Estará en<br>
Varias lineas
</body>
Formato del texto
Párrafo
Para evitar de tener que poner estos saltos de
línea se utiliza la etiqueta de párrafo:
<p></p>.
Todo lo que esté entre estas etiquetas el
navegador lo tomará como párrafo y lo
presentará como tal.
Formato del texto
Un párrafo puede estar alineado, atributo
ALIGN, a la izquierda (left), derecha(right),
centro(center) o justificado(justify).
Ej:
<body>
<p align=“left”>A la izquierda</p>
<p align=“right”>A la derecha</p>
<p align=“center”>Al centro</p>
<p align=“justify”>justificado</p>
Formato del texto
Titulos o cabeceras
Se emplean para ello las etiquetas
<Hx></Hx>, donde x es el nivel.
Los niveles de importancia van desde el 1 al
6.
En el medio de las etiquetas se define el
texto.
Formato del texto
Ej:
<body>
<h1>Esta es una cabecera de nivel 1</h1>
<h2>Esta es una cabecera de nivel 2</h2>
<h3>Esta es una cabecera de nivel 3</h3>
<h4>Esta es una cabecera de nivel 1</h4>
<h5>Esta es una cabecera de nivel 5</h5>
<h6>Esta es una cabecera de nivel 6</h6>
</body>
Formato del texto
Estas cabeceras se pueden alinear
Mediante el atributo Align pueden estar
alineadas a la derecha, izquierda o al centro.
Ej:
<h3 align=“left”>Esta es una cabecera
alineada a la izquierda</h3>
Formato del texto
Líneas horizontales
Se usan para dividir la secciones identificadas
con las cabeceras
Se hacen con la etiqueta <HR>
Se puede definir el ancho con el atributo
WIDTH.
Lo mas normal es expresar el ancho de la
línea en porcentaje respecto del ancho de la
página.
Formato del texto
Ej:
<body>
<hr width=“20%”>
<hr width=“50%”>
<hr width=“100%”>
</body>
Formato del texto
Una línea se puede alinear
Ej:
<body>
<hr width=“20%” align=“left”>
<hr width=“50%” align=“right”>
<hr width=“100%” align=“center”>
</body>
Formato del texto
También se puede modificar el grosor de la lí
nea con el atributo SIZE.
Ej:
<body>
<hr width=“60%” size=“1”>
<hr width=“60%” size=“8”>
<hr width=“60%” size=“15”>
</body>
Fondos
El fondo puede cambiarse de color
Se empela el atributo: bgcolor de la etiqueta
Body.
El color va expresado en formato RGB
Fondos
Formato RGB:
El intervalo entre dos dígitos hexadecimales
indica un color.
Ej: 0000FF
Los dos primeros indican el color rojo
Los dos segundos indican el color verde
Los dos últimos indican el color azul
En el ejemplo 00 rojo
00 verde
FF azul
Fondos
Cada numero puede ir de 0 a 255
En hexadecimal de 0 a FF
Un cero significa nada de ese color
255 significa todo de ese color
Así, en el ejemplo anterior #0000FF es azul
intenso y puro.
Aquí se puede ver una lista de los colores
http://www.mxstudio.com.br/Conteudos/
Dreamweaver/Cores.htm
Fondos
Para poner una imagen de fondo se utiliza el
atributo: background de la ertiqueta Body.
Ej:
<body background=“aguas.gif”>
Pagina con fondo
</body>
Fondos
Puede dejarse fijo el fondo y que el texto se
desplace sobre el fondo.
Se emplea el atributo bgproperties=“Fixed”
Ej:
<body background=“imagen.gif”
bgproperties=“fixed”>
Pagina con fondo fijo
</body>
Ejercicio 5
Pruebe el ejemplo anterior, para lo cual
necesitará una imagen que tenga guardada.
Vea las diferencias entre un comportamiento
y otro.
Imágenes
Para incorporar imágenes se utiliza la
etiqueta <IMG>
El atributo SRC indica que imagen se quiere
cargar y donde se encuentra
<body>
<img src=“imágenes/gato.gif”
Imágenes
Se suele indicar el tamaño de la figura
Esto le permite saber al navegador:
◦ Cuanto va a ocupar
◦ Permite redefinir cuanto va a ocupar la imagen
modificando el tamaño que originalmente tenia
◦ Para ello se emplean los atributos: WIDTH y HEIGHT
◦ Ej:
◦ <body>
◦ <img src=“imágenes/gato.gif” width=“120”
height=“90”>
◦ </body>
Imágenes
El atributo ALT se usa para poder mostrar un
texto alternativo si no se muestra la imagen
Ej:
◦ <body>
◦ <img src=“imágenes/gato.gif” width=“120”
height=“90” alt=“gato”>
◦ </body>
El alto y ancho generalmente están en pixeles
Imágenes
Se usan basicamente dos formatos de
imágenes:
◦ GIF
◦ JPG
◦ Estos formatos comprimen las imágenes para
reducir su tamaño y así asegurar una transferencia
mas rápida por la red.
Imágenes
Formato GIF
El formato GIF usa 256 colores y se emplea
sobretodo con imágenes pequeñas como
iconos. No se suele usar con fotos porque da
más calidad el formato JPG.
Imágenes
Formato JPG
El formato JPG usa 16.7 millones de colores,
por lo que se emplea con imágenes de alta
resolución.
Todas las fotos de buena calidad usan este
formato.
Imágenes
Se pueden alinear al igual que los párrafos y
cabeceras, mediante el atributo ALIGN
Se alinea respecto al texto que la rodea, no
respecto a la página donde está.
Se puede alinear
◦ A la izquierda(left)
◦ A la derecha(right)
◦ Al centro(center)
◦ Arriba(top)
◦ Abajo(bottom)
◦ Al medio(middle)
Ejercicio 6
Cargue una imagen, especifique el alto y el
ancho de la misma, y modifique estos valores
para ver como cambia la figura.
Añádale el atributo ALT, active la opción de
no cargar imágenes en el navegador y vea
como queda.
Ponga algo de texto alrededor de la imagen y
pruebe los distintos valores del atributo
ALIGN. Por ultimo a partir de la imagen de un
puto construya líneas de distintos grosores.
Enlaces
Se basan en la etiqueta <a> </a>
El atributo mas importante es href, que es el
destino del enlace, es decir el URL.
Se puede poner cualquier URL válida, esto es,
dentro de la misma pagina, en la misma
maquina o en otra máquina.
Enlaces
Rutas
Existen dos tipos de rutas
◦ Rutas absolutas
◦ Rutas relativas
Enlaces
Rutas absolutas
◦ Las rutas absolutas son el camino que ha de seguir el
navegador para encontrar el archivo, definidas desde el
principio, como por ejemplo:
◦ http://www.midominio.com/carpeta/archivo.ext
◦ Esta es la ruta absoluta para un archivo llamado
archivo.ext que está dentro de la carpeta, estando ésta
directamente dentro de mi dominio.
◦ Las rutas absolutas se suelen utilizar nada más para
enlazar a archivos que están fuera del dominio de nuestra
página web. De hecho es la única manera de hacerlo.
Como inconveniente... hay que escribir demasiado
(http:www.dominio.....).
Enlaces
Rutas relativas
Las rutas relativas son el camino a seguir DESDE la
página HASTA el archivo. En este caso no hay que
escribir http://www.midominio....,sino solo indicar
los pasos que hay que dar para llegar desde la página
en cuestión, hasta el archivo correspondiente.
Enlaces
En general los enlaces tienen la siguiente
estructura
<A HREF="URL"> Texto del enlace</A>
Enlaces
Enlace a otro lugar del mismo documento
En este caso la URL se sustituye por un marcador en la
misma página. El marcador puede ser texto colocado en
el lugar al que queremos saltar. No importa lo que sea
ya que no se verá.
Veamos un ejemplo para saltar al inicio de esta página.
Escribiríamos en el lugar desde el que queremos saltar:
<A HREF="#inicio"> Ir al Inicio</A>
Y en el sitio exacto adonde queremos saltar, debemos
poner la siguiente etiqueta:
<A NAME="inicio"> </A>
Enlaces
Enlace a otra página local
En este caso la URL se dará de forma relativa (igual
que para poner un fondo a la página). Por ejemplo si
tenemos dos páginas en el mismo directorio
pagina1.htm y pagina2.htm y queremos poner un
enlace desde la pagina1.htm a la pagina2.htm
debemos escribir
<a href="pagina2.htm">Ir a pagina2</a>
Enlaces
Enlace a una dirección de Internet
Ahora la URL debe darse de forma absoluta, tal como
la ves en la ventana de dirección del navegador, es
decir:
<A
HREF="http://centros4.pntic.mec.es/ies.de.cistierna"
>IES Cistierna</A>
Enlaces
Enlaces usando imágenes
Para que una imagen sea un enlace hay que colocarla
en el lugar del texto del enlace.
Ej:
<A HREF=" #inicio"><img
src="gifs/imagen.gif"></A>
En este caso es importante no olvidar el
atributo ALT
Para suprimir la linea que parece alrededdor
de la imágen se debe poner el atributo
BORDER a cero.
Ejercicio 7
Haga un enlace de texto a Microsoft, salvelo y
vea su aspecto en el navegador, haga clic en
el enlace para ver su funcionamiento.
Sustituya el texto por una imagen, luego
suprima la línea que aparece alrededor de la
imagen y vea como queda.
Ahora haga que apunte a un archivo html
local, que este en su máquina.
Enlaces
Enlace con una dirección de correo
Este es un enlace un poco diferente, veamos
un ejemplo
<A HREF="mailto: [email protected]">
[email protected] </A>
que se ve como [email protected] y que
al pulsarlo se abre el programa de correo que
tenga configurado, con la dirección en el
campo correspondiente.
Enlaces
Si se desea abrir el enlace en una nueva
ventana se utiliza el atributo TARGET.
La opción por defecto es la ventana actual:
(target=“_self”)
Nueva ventana: target=“_blank”
Mapas
Mapas: son un cao especial de imágenes y
enlaces.
Esla combinación de ambos para usar
imágenes como mapas sensibles al ratón.
Para implementar los mapas se divide la
imagen en zonas y a cada zona se le asocia
un enlace distinto.
Mapas
Se define con la etiqueta <MAP> y </MAP>
Dentro de este mapa, cada nueva zona de la
imagen se define con la etiqueta <AREA>
Esta AREA puede tener forma de circulo,
cuadrado o rectangulo.
Mapas
<map name=“mi_mapa”>
<area shape=“rect” coords=“x1,y1,x2,y2”
href=“enlace1.html”>
<area shape=“circ” coords=“x,y,r”
href=“enlace2.html”>
<area shape=“poly” coords=“x1,y1,x2,y2,x3,y3…”
href=“enlace3.html”>
<area shape=“default” nohref>
</map>
<img src=“mapa.gif” usemap=“#mi_mapa”>
Listas
En HTML existen tres tipos de listas:
◦ Listas no numeradas
◦ Listas numeradas
◦ Listas de definición
Listas
Listas no numeradas
Son una sucesión de elementos sin numerar
Se utilizan las etiquetas <UL> y </UL>
Dentro de la lista se definen los elementos de
la misma con las etiquetas <LI> y </LI>
Ejercicio 8
Haga una lista de compra, construya una lista
no numerada del estilo:
◦ Lechuga
◦ Tomate
◦ Manzana
◦ Queso
Listas
Listas numeradas
Similares a las listas no numeradas, pero cada
elemento tiene una numeración asociada.
Se usan las etiquetas <OL> y </OL>
También se usan <LI> y </LI> para los items
de la lista.
Ejercicio 9
Haga una receta de cocina. Construya una
lista numerada del estilo:
1 hacer las masa y dejarla reposar
2 pelar, lavar y cortar las manzanas
3 estirar la masa sobre la bandeja, colocar
encima las manzanas y añadir mermelada
4 meter al horno hasta que se haga
Listas
Listas de definición
Se emplean para definir términos
Se emplean las etiquetas <DL> y </DL>
<DT> y </DT> elemento a definir
<DD> y </DD> definición del elemento
Ejercicio 10
Construya una lista de definición según el
patrón:
Aserción: afirmación de alguna cosa
Aserradero: sitio donde sierran la madera
Listas
Las listas pueden anidarse.
Para ello hay que sustituir un elemento de la
lista por la lista completa
A la hora de representar la lista, el navegador
deja la sangría correspondiente mas la
sublista y cambia el icono
Listas
El icono se puede cambiar especificando el
atributo TYPE de la etiqueta que marca el inicio de
la lista
<UL> sus valores son: disc, circle o square
<OL> sus valores pueden ser
◦ A: letras mayúsculas
◦ A: letras minúsculas
◦ I: números romanos en mayúscula
◦ i: números romanos en minúscula
◦ 1: números árabes
Ejercicio 11
Cambie el icono de la lista no numerada antes
realizada y pruebe con los tres tipos para ver
su aspecto.
Cambie el icono de la lista numerada antes
realizada y pruebe con los cinco tipos para ver
su aspecto.
Ponga un icono distinto para cada elemento de
las listas anteriormente definidas.
Haga que la lista numerada anterior empiece
en 5 y que a mitad de la lista salte varios
números entre dos elementos.
Proyecto
Uso de múltiples elementos
Proyecto
Uso de múltiples elementos
Tablas
En HTML son muy utilizadas, no solo para
hacer tablas sino para dividir el espacio de la
página en zonas, consiguiendo una buena
distribución y colocación de los elementos
que aparecerán en la página.
Tablas
Se utilizan tres etiquetas principales:
◦ <table> </table> define el comienzo y el fin de la
tabla
◦ <tr> </tr> define una fila (horizontal) de la tabla
◦ <td> </td> define una celda de la tabla. Una fila
está compuesta por celdas.
Tablas
Ej: tabla de una sola fila y una sola columna
<table>
<tr>
<td>su nombre</td>
</tr>
</table>
Tablas
Bordes: se los activa para ver mejor la tabla
Se usa el atributo BORDER en la etiqueta
<table>
<table border=“valor”>
Tablas
Tamaño: para especificar el tamaño de una tabla
se emplean los atributos WIDTH(ancho) y HEIGHT
(alto) de la etiqueta table.
El valor asignado puede estar dado en pixeles o
porcentaje.
Ej:
<table border=“2” width=“100” height=“100”
<tr>
<td> su nombre
</tr>
</table>
Ejercicio 12
Pruebe a poner distintos bordes en una tabla:
1,3,10 y 25 ¿Cuál es el valor por defecto del
atributo BORDER?
Escriba en una tabla con una única celda su
nombre y apellido, y vea el resultado ¿Cuál es
su tamaño?
Añada ahora atributos de tamaño, primero en
puntos: ancho 300 puntos y alto 100 puntos y
vea el resultado; luego en porcentaje: ancho
100 % y alto 100% y vea como queda, por
último pruebe con ancho 50% y alto 50%.
Tablas
Alineación: los datos de una celda se pueden
alinear horizontal y verticalmente.
Para ello se emplean los atributos de celda
<td> ALIGN y VALIGN
ALIGN: indica la alineación horizontal, sus
valores pueden ser: left, right y center.
VALIGN: indica la alineación vertical, sus
valores pueden ser: top, middle y bottom.
Ej:
<td align=“valor” valign=“valor”>Dato</td>
Tablas
Tamaño de una celda:
Se puede especificar el ancho de cada celda
con el atributo WIDTH, pero aplicándolo a las
celdas (poniéndolo dentro de la etiqueta
<td> en vez de a la tabla.
Ejercicio 13
A partir de la tabla anterior defina una con
una fila y dos celdas, con ancho de 300
puntos. En las celdas ponga dos nombres
distintos ¿Cómo se ve dicha tabla?
Ahora use el atributo width para definir el
ancho de cada celda, primero hágalas iguales,
expresando el valor en puntos, luego haga lo
mismo expresando el valor en porcentaje.
Use este atributo para que la primera celda
dos tercios y la segunda un tercio.
Ejercicio 14
A partir de la tabla anterior defina una con
dos filas y tres celdas por fila. Ponga seis
nombres cualesquiera. En la primera fila
asigne el ancho de cada celda como de 40%,
40% y 20% del total de la tabla. Al ver la tabla,
¿Cómo se ve en la segunda fila?
Ahora suprima una de las celdas de la
segunda fila ¿Qué sucede?, ¿Cómo lo
solucionaria?
