Scribd
Cargar
39 vistas4 páginas

Apuntes de HTML

Este documento proporciona una introducción al lenguaje HTML y describe las etiquetas básicas para estructurar páginas web, incluyendo etiquetas para texto, imágenes, enlaces, tablas, sonido y color de fondo.

Cargado por

Oier
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
39 vistas4 páginas

Apuntes de HTML

Este documento proporciona una introducción al lenguaje HTML y describe las etiquetas básicas para estructurar páginas web, incluyendo etiquetas para texto, imágenes, enlaces, tablas, sonido y color de fondo.

Cargado por

Oier
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 4

APUNTES DE HTML

1. Lenguaje HTML.
Las páginas Web son documentos de texto que están escritos en un lenguaje de
programación sencillo que se llama Lenguaje HTML.
Para crear las páginas Web no hace falta estar conectado a Internet. Para escribir el
código utilizaremos el Bloc de notas por ser un procesador de textos sencillo que viene
con Windows y que no introduce ningún código especial de sangrado, ni negrita, etc. Si
queremos ver el resultado de una página Web tenemos que usar un navegador como el
Microsoft Internet Explorer.
Si al visionar una página Web queremos corregir errores o introducir mejoras,
volvemos al editor, corregimos el código y lo guardamos. Vamos al navegador y
hacemos clic en el botón Actualizar.

2. Estructura general de las páginas Web.


Todas las páginas Web tienen la misma estructura:

<HTML>
<HEAD>
Cabecera: datos relativos al documento (título, autor,...)
</HEAD>

<BODY>

Cuerpo: el documento en sí (textos, imágenes, tablas,...)

</BODY>
</HTML>

<HTML>: indica el inicio del código del programa.


</HTML>: fin de código HTML.
<HEAD>: inicio de la cabecera. En ella se hace referencia a características que va a
tener la página Web, por ejemplo el título.
<TITLE>Historia del Museo del Prado</TITLE>
<META NAME=”Author” CONTENT=”Óscar Arias”>
</HEAD>: fin de la cabecera.
<BODY>: es el principio del cuerpo. Dentro de él irán los elementos que serán
visualizados en la página Web. Así, después de esta etiqueta insertaremos los textos,
imágenes, tablas, etc., que van a construir la página Web.
</BODY>: fin del cuerpo.

1
3. Insertar texto.
Para insertar texto en una página Web, simplemente lo escribimos y si queremos
modificar alguna de las propiedades del texto debemos usar etiquetas específicas.

<H1>Texto</H1>: el texto que aparece entre ambas etiquetas tendrá el tamaño máximo
que permite el navegador. Se emplea para poner títulos.
<H2>Texto</H2>: Pone el texto al segundo tipo más grande.
<H3>Texto</H3>: Pone el texto al tercer tipo más grande.
<H4>Texto</H4>: Pone el texto al cuarto tipo más grande.
<H5>Texto</H5>: Pone el texto al quinto tipo más grande.
<B>Texto</B>: Pone el texto en negrita.
<U>Texto</U>: Subraya el texto.
<I>Texto</I>: Pone el texto en cursiva.
<TT>Texto</TT>: Pone el texto en un tipo de letra similar al de una máquina de
escribir.
<EM>Texto</EM>: Para dar más énfasis al texto.
<SUB>Texto</SUB>: Para poner el texto como subíndice.
<SUP>Texto</SUP>: Para poner el texto como superíndice.
<MARQUEE>Texto</MARQUEE>: Desplaza el texto por la pantalla de derecha a
izquierda.
<FONT COLOR=Red SIZE=4>Texto</FONT>: Pone el texto en el color y/o
tamaño especificados.
<P>: Realiza un salto de párrafo.
<BR>: Realiza un salto de línea.
<HR>: Dibuja en la pantalla una línea de separación horizontal.
<!--Texto del comentario -->: Sirve para poner comentarios en el código de la página.
Su contenido no aparecerá en la pantalla del navegador.
<BLOCKQUOTE>Texto</BLOCKQUOTE>: Justifica el texto.
<CENTER>Texto</CENTER>: Centra el texto. Esta etiqueta sirve también para
centrar imágenes, tablas, enlaces, etc.
<A HREF=”mailto:[email protected]”>e-mail</a>: Deja accesible nuestra dirección
e-mail, para que nos puedan mandar un mensaje de correo electrónico.

4. Insertar imágenes.
Para insertar una imagen en una página Web utilizaremos la etiqueta:

<IMG SRC = “antiguo.jpg” ALT =”Museo del Prado”>

El nombre de la etiqueta es IMG, el resto de campos que aparecen en ella son


características de la imagen entre las que conviene destacar:
SRC: archivo a insertar, las imágenes han de ser .gif o .jpg.
ALT: texto alternativo que veremos al colocar el ratón sobre la imagen.
ALIGN: alineación de la imagen y puede tener los valores: Top(arriba),
Botton(abajo), Left(izquierda), Right(derecha), etc.
BORDER: pone un borde del tamaño que especifiquemos.

2
Para poner una imagen como fondo tenemos el atributo BACKGROUND que va
dentro de la marca <BODY>.
<BODY BACKGROUND=”olas.gif”>: Pone como fondo de la página la
imagen olas.gif.

5. Insertar enlaces.
Los enlaces son los elementos característicos de las páginas Web ya que nos
permiten cambiar entre distintas páginas de una forma ágil.

Si queremos saltar a una página Web que está en el mismo ordenador y en la misma
carpeta que la que estamos confeccionando, tenemos la etiqueta:
<A HREF=”historia.html”>Historia del museo</A>
En la pantalla del navegador aparecerá: Historia del museo en color azul.

Si la página a la que queremos saltar está en otro ordenador de la red Internet


añadiremos http:// antes del nombre de la página.
<A HREF=”http://museoprado.mcu.es”>Página oficial del museo</A>

Para poner imágenes como enlaces en vez de texto anidaremos las etiquetas de la
siguiente manera:
<A HREF=”historia.html”><IMG SRC=”antiguo.jpg”></A>

6. Insertar tablas.
La creación de tablas tiene el siguiente mecanismo:

a) Colocamos la etiqueta <TABLE> con sus características.


b) Una etiqueta de principio de fila <TR> con sus características.
c) En cada fila una etiqueta <TH> o <TD> por cada una de las celdas que contenga
dicha fila.
Repetimos los pasos b) y c) tantas veces como filas tenga la tabla.
d) Etiqueta de fin de tabla </TABLE>.

Ejemplos de marcas para insertar tablas:

<TABLE BORDER WIDTH=”90%”>: indica que queremos crear una tabla con un
borde visible y con una anchura del 90% del ancho total de la página.

<TR ALIGN=”CENTER” VALIGN=”CENTER”>: indica que queremos una fila


con alineación centrada tanto horizontalmente como verticalmente.

<TD ALIGN=”LEFT” WIDTH=”50%”>: indica que queremos una celda con


alineación izquierda y una anchura del 50% de la tabla.

3
7. Insertar sonidos y colores de fondo.
Para insertar un sonido de fondo en una página Web utilizaremos la etiqueta:
<BGSOUND SRC=”museos.wav”>
Los archivos de sonido han de ser .wav o .mid.

Con el atributo BGCOLOR podemos poner un color de fondo a una página Web
entera, a una tabla, a una fila de una tabla o a una celda de una tabla.

<BODY BGCOLOR=Green>: Pone el color verde de fondo en la página Web.

<TABLE BGCOLOR=Yellow>: Pone el color amarillo de fondo en una tabla.

<TR BGCOLOR=Red>: Pone el color rojo de fondo en una fila de una tabla.

<TH BGCOLOR=Blue>: Pone el color azul de fondo en una celda de una tabla.

Los colores de fondo han de ir especificados en inglés o mediante su código RGB


de la siguiente manera:
<BODY BGCOLOR = "#33CCFF">: Pone un color azul claro de fondo.

8. Listas.
En este curso vamos a ver dos tipos de listas: numeradas y no numeradas. Las
marcas para introducir estas listas en nuestras páginas son:

Listas numeradas Listas no numeradas


<OL> <UL>
<LI> <LI>
<LI> <LI>
<LI> <LI>
… …
</OL> </UL>

Existen otras muchas etiquetas y otros atributos, pero las más importantes son las
que hemos visto.
Para conseguir todas las etiquetas, así como su significado, características y un
ejemplo de cada una hay distintas páginas en Internet.

También podría gustarte