HTML

Para poder hacer pginas web con html debemos primero iniciar a programar lo que queremos que
aparezca en dicha pgina, lo cual hacemos en el blog de notas.
<html>Esta directiva se utiliza para iniciar la programacin en el blog de notas, para poder utilizarla
se debe cerrar con </html> al final de haber hecho todo lo que necesitamos.
<head> En esta directiva ir el encabezado de la pgina que vamos a crear. Para que todo lo que
vamos a escribir no se convierta en encabezado debemos cerrar con </head>.
<title> Esta directiva nos sirve para poder darle el nombre con el que aparecer nuestra pgina
weben el navegador. As mismo debemos cerrar la directiva con </title> para que as lo que
escribamos despus no se vuelva parte del ttulo.
<body> Todo los que escribamos despus de esta directiva ser lo que nos aparezca en la pgina
web, as tambin hay que determinar donde finaliza el cuerpo de la pgina.
La etiqueta <meta> se utiliza para aadir informacin sobre la pgina. Esta informacin puede ser
utilizada por los buscadores.
Los buscadores consultan la informacin de la etiqueta <meta> de las pginas, buscando

coincidencias con lo que el usuario pretende encontrar.
A travs de esta etiqueta pueden especificarse los atributos name y content. El atributo name
indica el tipo de informacin, y el atributo content indica el valor de dicha informacin.
Para indicar el tipo de informacin podemos utilizar cualquier palabra que deseemos, como puede
ser "Autor", "Palabras clave", "Descripcin", etc. Pero debido a que la mayora de buscadores
estn en ingls, es preferible que el tipo de informacin se especifique en ingls.
Los tipos de informacin ms utilizados son los siguientes:
Tipo Significado
author Autor de la pgina
classification Palabras para clasificar la pgina en los buscadores

description Descripcin del contenido de la pgina
generator Programa utilizado para crear la pgina
keywords Palabras clave
La etiqueta <meta> no necesita etiqueta de cierre. Para cada etiqueta <meta> solo es posible
indicar un tipo de informacin y su valor, pero es posible insertar varias etiquetas <meta> en un
mismo documento.
La etiqueta <meta> ha de estar entre las etiquetas <head> y </head>.

Por ejemplo, el siguiente cdigo indica que el autor de la pgina es aulaclic, que la pgina trata
sobre un curso de HTML gratuito, y especifica algunas palabras clave a ser consultadas por los
buscadores:
<html>
<head>
...
<meta name="author" content="aulaclic">
<meta name="description" content="Curso de HTML gratuito">
<meta name="keywords" content="cdigo HTML etiqueta pgina web gratis curso">
</head>
...
La etiqueta <meta> tambin se utiliza para indicarle al navegador alguna informacin o alguna
accin que debe realizar. En este caso se utiliza el atributo http-equiv, en lugar del atributo name.
Por ejemplo, imaginemos que por algn motivo queremos que nuestra pgina se actualice
automticamente cada 30 segundos. En ese caso, deberamos utilizar la accin Refresh
(actualizar). Podramos utilizar el siguiente cdigo:
<html>
<head>
...
<meta http-equiv="Refresh" content="30">
</head>
...
Ahora imaginemos que hemos cambiado la direccin en la que se encuentra nuestra pgina web, y
queremos que cuando algn usuario visite la pgina en la direccin antigua, a los 5 segundos el
navegador lo redirija automticamente a la direccin nueva. En ese caso podramos insertar el
siguiente cdigo en la pgina que se encuentra en la direccin antigua:
<html>
<head>
...
<meta http-equiv="Refresh" content="5; URL=http://www.aulaclic.com/index.htm">
</head>
...
De este modo, el navegador realizara la funcin de actualizar la pgina, pero cargando la que se
encontrara en la nueva direccin (URL=http://www.aulaclic.com/index.htm).
 salto de lnea.
Una forma de asegurarnos de que el texto aparezca en el navegador tal cual ha sido insertado
dentro del cdigo, es utilizando las etiquetas <pre> y </pre>.
Utilizando estas etiquetas podemos tener la seguridad de que en el navegador se mostrarn todos
los espacios en blanco que se inserten en el texto, as como todos los saltos de lnea resultantes
de pulsar la tecla INTRO, sin la necesidad de utilizar la etiqueta .
Habra que escribir:

<pre>Hola, BIENVENIDOS
esta ES MI PGINA WEB
y esto un texto preformateado</pre>
<img> (para incluir imgenes),
<object> (para incluir objetos como animaciones)
Separadores <hr>
El elemento que suele utilizarse para separar secciones dentro de una misma pgina es la regla
horizontal. Para insertar una regla horizontal hay que insertar la etiqueta <hr>. Dicha etiqueta no
precisa ninguna etiqueta de cierre.
Es posible especificar algunos atributos de la regla horizontal:
Atributo Significado Posibles valores
left (izquierda)
alineacin de la regla dentro
align
de la pgina
right (derecha)
center (centro)
un nmero, acompaado de % cuando se

width ancho de la regla
desee que sea en porcentaje
size alto de la regla un nmero
eliminar el sombreado de la
noshade regla
no puede tomar valores
Por ejemplo, para insertar el texto y la regla horizontal siguientes:
Inicio
Bienvenidos a mi pgina.
Habra que escribir:
Inicio<hr align="left" width="300%" size="5" noshade>Bienvenidos a mi pagina>
:
Atributo Significado Posibles valores

face fuente nombre de la fuente, o fuentes
color color del texto nmero hexadecimal o texto predefinido

valores del 1 al 7, siendo por defecto el 3,
size tamao del texto o desplazamiento respecto al tamao por defecto,
aadiendo + o - delante del valor
Por ejemplo, para insertar el texto:
Bienvenidos a www.aulaclic.com
Habra que escribir:
Bienvenidos a www.aulaclic.com
Etiqueta Significado Ejemplo
 negrita curso HTML aulaclic
 cursiva curso HTML aulaclic

 subrayado curso HTML aulaclic
<s> tachado curso HTML aulaclic
<tt> teletipo (mquina de escribir) curso HTML aulaclic
<big> aumenta el tamao de la fuente curso HTML aulaclic
 disminuye el tamao de la fuente curso HTML aulaclic
Bienvenidos a www.aulaclic.com
Habra que escribir:

Bienvenidos a <tt>www.aulaclic.com</tt>
Tambin es posible cambiar la alineacin del texto de cada prrafo. Para ello se modifica el valor
del atributo align, cuyos valores pueden ser left (izquierda), right (derecha), center (centrado) o
justify (justificado).
Bienvenidos a mi pgina.
Aqu encontraris cursos de formacin muy interesantes.
Habra que escribir:
Bienvenidos a mi pagina.

Aqu encontrareis cursos de formacin muy interesantes.
Para todas estas etiquetas es posible especificar el valor del atributo align.
El lenguaje HTML
Apartado 1: Las etiquetas
Habra que escribir:
<H2 align="center">El lenguaje HTML</H2><H4>Apartado 1: Las etiquetas</H4>
Las marquesinas son lneas de texto que pueden desplazarse de un lado a otro de la ventana en
forma de lnea.
Para insertar una marquesina, es necesario insertar el texto entre las etiquetas <marquee> y
</marquee>.
La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas

puedes hacer que estas propiedades varen.
A travs del atributo behavior puede modificarse el tipo de movimiento. Puede tomar los valores
alternate (de lado a lado de la ventana, como si rebotara en los extremos), scroll (de un lado a
otro, continuamente) o slide (de un lado a otro, pero una sola vez).
A travs del atributo direction puede modificarse la direccin en la que se mover el texto. Puede
tomar los valores down (de arriba a abajo), up (de abajo a arriba), left (de derecha a izquierda) o
left (de izquierda a derecha).
Tambin es posible establecer un color de fondo, a travs del atributo bgcolor.
Por ejemplo, para insertar la siguiente marquesina:

Habra que escribir:
<marquee bgcolor="#006699" behavior="alternate" direction="right">

Esto es una marquesina 
</marquee>
Hiperenlace <a>
Un hiperenlace, hipervnculo, o vnculo, no es ms que un enlace, que al ser pulsado lleva de una
pgina o archivo.
Aquellos elementos (texto, imgenes, etc.) sobre los que se desee insertar un enlace han de
encontrarse entre las etiquetas <a> y </a>.
A travs del atributo href se especifica la pgina a la que est asociado el enlace, la pgina que se
visualizar cuando el usuario haga clic en el enlace.
Por ejemplo, para insertar el enlace:
Visita www.aulaclic.com
Habra que escribir:
<a href="http://www.aulaclic.com">Visita www.aulaclic.com</a>
Destino del enlace

El destino del enlace determina en qu ventana va a ser abierta la pgina vinculada, se especifica
a travs del atributo target al que se le puede asignar los siguientes valores:
_blank:
Abre el documento vinculado en una ventana nueva del navegador.
_parent:
Abre el documento vinculado en la ventana del marco que contiene el vnculo o en el conjunto de
marcos padre.
_self:
Es la opcin predeterminada. Abre el documento vinculado en el mismo marco o ventana que el
vnculo.
_top:
Abre el documento vinculado en la ventana completa del navegador.
No te preocupes si no te queda del todo claro para qu sirve cada una de estas opciones de
destino, ya que se volvern a ver en el tema de Marcos. De momento slo te interesa retener la
opcin _blank y _self.
Para insertar el enlace:
Visita www.aulaclic.com en una ventana nueva
Habra que escribir:
<a href="http://www.aulaclic.com" target ="_blank">Visita www.aulaclic.com en una
ventana nueva</a>
Es interesante utilizar esta opcin cuando la pgina de destino est fuera de nuestro sitio para que
cuando el usuario cierre la ventana del explorador, se encuentre automticamente en la pgina
desde la que haba salido (que vuelva a nuestro sitio).
Normalmente los vnculos de texto cambian de color cuando el enlace ha sido ya pulsado o
cuando el puntero del ratn se posiciona sobre l, estos cambios estn predefinidos en cada
navegador, pero nosotros podemos cambiar esos colores.
Los colores de los vnculos pueden especificarse a travs de las propiedades de la pgina, en la
etiqueta <body>. Estos colores se asignan a travs de los atributos link (vnculo), alink (vnculo
activo), y vlink (vnculo visitado).
link permite determinar el color de los enlaces sin visitar (enlace que no ha sido pulsado ninguna
vez).
alink permite determinar el color del enlace activo (enlace que acaba de ser pulsado).
vlink permite determinar el color de los enlaces visitados (enlaces que ya han sido pulsados).
Por ejemplo, al insertar el siguiente cdigo:
...
<body link="#FF0000" vlink="#FF0099" alink="#FF9900">
...
<a href="http://www.aulaclic.com" target ="_blank">www.aulaclic.com</a>
...
Mientras no se visite la pgina www.aulaclic.com, el enlace ser de color rojo (#FF0000):
www.aulaclic.com
Mientras la pgina www.aulaclic.com sea la ltima visitada, el enlace ser de color fucsia
(#FF0099):
www.aulaclic.com
Cuando se haya visitado la pgina www.aulaclic.com, el enlace ser de color naranja (#FF9900):
www.aulaclic.com
Imagen <img>
Todas las pginas web acostumbran a tener un cierto nmero de imgenes, que permiten mejorar
su apariencia, o dotarla de una mayor informacin visual.
Para insertar una imagen es necesario insertar la etiqueta <img>. Dicha etiqueta no necesita
etiqueta de cierre.
El nombre de la imagen ha de especificarse a travs del atributo src.
Por ejemplo, para insertar la siguiente imagen:
Habra que escribir:

<img src="imagenes/logo_animales.gif">
Teniendo en cuentra que la imagen se llama logo_animales.gif y que est dentro de la carpeta
imagenes, que se encuentra en el mismo directorio que el documento actual (referencia relativa al
documento).
Para trabajar de una forma ms sencilla y ordenada, es recomendable que todos los documentos
html se encuentren en un mismo directorio, y que dentro de este directorio existan diferentes
carpetas para agrupar otros objetos, como puede ser una carpeta destinada a almacenar
imagenes, o una carpeta destinada a almacenar archivos de audio, etc.
Borde de una imagen
En general, al visualizar una pgina en un navegador las imgenes aparecen sin ningn borde
alrededor, pero es posible establecer uno a travs del atributo border.
El atributo border puede tomar valores numricos, que indican el grosor en pxeles del borde.
Por ejemplo, para insertar la siguiente imagen con borde:
Habra que escribir:
<img src="imagenes/logo_animales.gif" border="4" >
Hay que tener en cuenta que el borde de la imagen siempre ser de color negro, a no ser que la
imagen contenga un enlace, en cuyo caso el color del borde ser el color establecido para los
vnculos.
Por ejemplo, para insertar la siguiente imagen con borde y con un enlace:
Habra que escribir:

<a href="http://www.aulaclic.com" target ="_blank" ><img
src="imagenes/logo_animales.gif" border="4" ></a>
Alineacin de una imagen

La alineacin de las imgenes se establece a travs del atributo align. Este atributo indica la
alineacin de las imgenes con respecto a la lnea de texto en la que se encuentran.
Los valores del atributo align pueden ser los siguientes:
Valor Significado Ejemplo
absbottom inferior absoluta Imagen con

texto
absmiddle medio absoluta Imagen con

texto
baseline lnea de base Imagen con

texto
bottom inferior Imagen con

texto
Imagen con
left izquierda texto
middle medio Imagen con

texto
Imagen con
right derecha texto
texttop texto superior Imagen con

texto
top superior Imagen con

texto
El resultado de aplicar uno u otro valor puede tener el mismo resultado, como ocurre con los
valores baseline y bottom, o con los valores texttop y top.
Para insertar el texto y la imagen siguientes:
PerrosGatos Una web de animales

Elemento de
lista <li>
Cada uno de los elementos de una lista ha de insertarse entre las etiquetas <li> y </li>.
Por ejemplo, para insertar en una lista los siguientes elementos:
Perro
Gato
Periquito
Habra que escribir:

...
<li>Perro</li>
<li>Gato</li>
<li>Periquito</li>
...
Todos los elementos de la lista debern encontrarse entre las etiquetas que indiquen si la lista es
desordenada (con vietas) u ordenada (numerada) como veremos a continuacin.
Lista desordenada <ul>
Para que una lista sea desordenada, sus elementos debern encontrarse entre las etiquetas <ul>
y </ul>.
A travs del atributo type es posible elegir el tipo de vieta, que puede ser circle (crculo), disc
(disco) o square (cuadrado).
Por ejemplo, para insertar la siquiente lista:
o Perro
o Gato
o Periquito
Habra que escribir:

<ul type="circle">
<li>Perro</li>
<li>Gato</li>
<li>Periquito</li>
</ul>
Lista ordenada
<ol>
Para que una lista sea ordenada, sus elementos debern encontrarse entre las etiquetas <ol> y
</ol>.
A travs del atributo type es posible elegir el tipo de numeracin, que puede ser 1 (nmeros), a
(letras minsculas), A (letras maysculas), i (numeros romanos en minsculas) o I (nmeros
romanos en maysculas).
Por ejemplo, para insertar la siquiente lista:
i. Perro
ii. Gato
iii. Periquito
Habra que escribir:

<ol type="i">
<li>Perro</li>
<li>Gato</li>
<li>Periquito</li>
</ol>

HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML

Transféré par

Droits d'auteur :

Formats disponibles

Para poder hacer pginas web con html debemos primero iniciar a programar lo que queremos que

aparezca en dicha pgina, lo cual hacemos en el blog de notas.

Los buscadores consultan la informacin de la etiqueta <meta> de las pginas, buscando

Los tipos de informacin ms utilizados son los siguientes:

author Autor de la pgina

classification Palabras para clasificar la pgina en los buscadores

La etiqueta <meta> ha de estar entre las etiquetas <head> y </head>.

<br></br> salto de lnea.

Habra que escribir:

<img> (para incluir imgenes),

<object> (para incluir objetos como animaciones)

Es posible especificar algunos atributos de la regla horizontal:

Atributo Significado Posibles valores

un nmero, acompaado de % cuando se

Por ejemplo, para insertar el texto y la regla horizontal siguientes:

Habra que escribir:

Inicio<hr align="left" width="300%" size="5" noshade>Bienvenidos a mi pagina>

Atributo Significado Posibles valores

color color del texto nmero hexadecimal o texto predefinido

Por ejemplo, para insertar el texto:

Habra que escribir:

<font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans

Etiqueta Significado Ejemplo

<b> negrita curso HTML aulaclic

<i> cursiva curso HTML aulaclic

Por ejemplo, para insertar el texto:

Habra que escribir:

Por ejemplo, para insertar el texto:

Aqu encontraris cursos de formacin muy interesantes.

Habra que escribir:

<p align="center">Bienvenidos a mi pagina.</p>

Por ejemplo, para insertar el texto:

Habra que escribir:

<H2 align="center">El lenguaje HTML</H2><H4>Apartado 1: Las etiquetas</H4>

La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas

Tambin es posible establecer un color de fondo, a travs del atributo bgcolor.

Por ejemplo, para insertar la siguiente marquesina:

<marquee bgcolor="#006699" behavior="alternate" direction="right">

Destino del enlace

Por ejemplo, al insertar el siguiente cdigo:

Mientras no se visite la pgina www.aulaclic.com, el enlace ser de color rojo (#FF0000):

Habra que escribir:

Borde de una imagen

Habra que escribir:

Alineacin de una imagen

absbottom inferior absoluta Imagen con

absmiddle medio absoluta Imagen con

baseline lnea de base Imagen con

bottom inferior Imagen con

middle medio Imagen con

texttop texto superior Imagen con

top superior Imagen con

PerrosGatos Una web de animales

Habra que escribir:

Habra que escribir:

Habra que escribir:

Vous aimerez peut-être aussi