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
punto 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”
