Apuntes HTML.1.pdf

Colegio LA MILAGROSA APUNTES. HTML (Hypertext Markup Language)

Informática. HTML Página 1

El HTML (Hypertext Markup Language) es un lenguaje de programación con el que se escriben

los documentos del www (World Wide Web).

Para escribir un documento en lenguaje HTML se puede emplear cualquier editor de texto,

como el Bloc de Notas.

Una vez que hemos terminado de escribir el documento, lo guardaremos dándole el nombre

que queramos y añadiéndole la terminación html (o htm).

Para abrir el documento bastará con hacer doble clic sobre él. El navegador que tengamos

instalado lo mostrará en pantalla.

ESTRUCTURA DE UN DOCUMENTO HTML

HTML consta de etiquetas que permiten dar formato a la página. La estructura de una etiqueta

es: <etiqueta>.

La mayoría de etiquetas requieren ser abiertas y posteriormente cerradas, pudiendo contener

otras etiquetas.

Apertura: <etiqueta> Cierre: </etiqueta>

Todo documento HTML debe estar definido entre la etiqueta de apertura <html> y la de

cierre </html>, entre ellas se encuentran la cabecera, con las etiquetas <head> y </head> y el

cuerpo con las etiquetas <body> y </body>.

<html>

<head>

</head>

<body>

</body>

</html>

Dentro de la cabecera se definen las características generales del documento. Las etiquetas

aquí son opcionales; un ejemplo es <title>TÍTULO DE LA PÁGINA</title>, para poner un título a

la página. Dicho título se visualiza en la barra superior del navegador.

Dentro del cuerpo se indican los contenidos que se mostrarán. En la etiqueta <body> se

pueden utilizar parámetros para mostrar una imagen, el color de fondo de la página, el color

del texto, etc.

ETIQUETAS MÁS FRECUENTES EN EL CUERPO

<br >: salto de línea en un párrafo.

<p>, </p>: salto de párrafo.

<b>, </b>: texto en negrita.

<u>, </u>: texto subrayado.

<i>, </i>: texto en cursiva.

<h1>, </h1>, … , <h6>, </h6>: tamaño del texto.



<blink>, </blink>: Texto parpadeante.

<hr>: Dibuja una línea horizontal.

ATRIBUTOS DE <hr>

Size: indica la altura en puntos de pantalla

Width: indica el ancho de la barra, en puntos de pantalla o en porcentaje

Align: indica la situación de la barra (Right, Left o Center)

<hr size=6 width=75% align=center>

<img>, </img>: introduce una imagen en el documento. La imagen debe estar en formato jpg

o gif. Es obligatorio incluir el atributo “src” para indicar la ruta donde se encuentra la

imagen, por lo que la etiqueta de apertura tendrá la forma: <img src>.

Ejemplo: <img scr=”ruta de la imagen”>

<img src="F:\IMAGEN.jpg" width="115" height="146">

<img src="F:\Informatica\HTML\Imagenes\Gladiolo.jpg" width="115" height="146">

ATRIBUTOS DE <img>

Width: indica el ancho de la imagen

Height: indica la altura de la imagen

Hspace: margen horizontal, en puntos, que separará la imagen de otros

elementos situados a su lado.

Vspace: igual que el anterior, pero referido a la vertical.

<alt>, </alt>: muestra un texto alternativo cuando no es posible visualizar una imagen.

<font>, </font>: Permite personalizar el texto dándole tamaño y color.

El formato es el siguiente:

<font size=6 color=yellow> hola </font>, escribiría la palabra hola en tamaño 6 y

color amarillo. El tamaño puede variar entre 1 y 7.

<a href>, </a>: permite insertar un hipervínculo en la página.


<a href = “dirección de la página”> texto o imagen para enlazar </a>

Por ejemplo, <a href = “http://www.google.es”> google </a> haría que pinchando

en el texto google accediéramos a la página de google.

Si queremos enlazar con una dirección de correo electrónico, usaremos la siguiente

estructura:

<a href = “mailto: dirección de e-mail”> texto o imagen para enlazar </a>. Al hacer

clic sobre el texto se nos abrirá el programa de correo que tengamos establecido como

predeterminado.

<a name>, </a>: nos lleva a una parte del documento actual.




<a name = “#texto”> texto para enlazar </a>

Por ejemplo, <a name = “#comentario”> comentario </a> haría que se defina lo que

se denomina un ancla. Una vez establecido, usaremos la etiqueta <a href> para

desplazarnos al ancla establecida.

La instrucción: no deje de leer el <a href=”#comentario”> comentario </a>,

produciría un salto al lugar donde hubiéramos situado el ancla.

EL COLOR EN HTML

Para establecer colores en HTML se utiliza el siguiente formato: #RRGGBB, donde RR indica

la proporción de rojo (Red), GG indica la proporción de verde (Green) y BB indica la proporción

de azul (Blue). Los valores RR, GG y BB se escriben en notación hexadecimal (base 16). La

ausencia de un color vendrá representada por 00, mientras que la cantidad máxima será FF.

Entre los valores hexadecimales 00 y FF hay 256 valores o tonos distintos que pueden

aplicarse.

Por ejemplo, si escribimos #80CD1F, obtendríamos 80 de rojo, CD de verde y 1F de azul. Como

resulta difícil conocer todos los tonos, puede establecerse colores básicos utilizando su

nombre: RED, BLUE, WHITE, NAVY, YELLOW, GREEN, OLIVE, MAGENTA, BLACK, CYAN, etc.

ATRIBUTOS

Son variantes, la mayor parte opcionales que se pueden añadir a las etiquetas para conseguir

determinados efectos

ATRIBUTOS DEL CUERPO

Background: Indica la imagen del fondo de la página.

<body background=”url de la imagen”>

<body background="F:\Informatica\HTML\Imagenes/Hortensia.JPG">

Bgcolor: Establece el color de fondo de la página, siempre que no haya imagen.

<body bgcolor=”red”>

Text: Especifica el color del texto en el documento.

<body text=”red”>

Link: Para establecer el color de los hipervínculos o enlaces no usados.

<body link=”cyan”>

Vlink: Para establecer el color de los hipervínculos o enlaces usados.

Apuntes HTML.1.pdf

Documents

Transcript of Apuntes HTML.1.pdf