HTML

HTML
Qu es HTML?
Hyper Text Markup Languaje
Pginas WEB.
Hipertexto. Texto de forma estructurada.
Se compone de etiquetas que marcan el
inicio y el fin de cada elemento dentro
del documento.

Qu es HTML?
Hipertexto = texto + imgenes +
sonido + vdeos = multimedia.
Los documentos HTML deben tener
la extensin html o htm,
Los navegadores se encargan de
interpretar el cdigo HTML
Versiones de HTML
HTML 2.0
HTML 3.0
HTML 3.2
HTML 4.0
HTML 4.01
HMTL 5

Los navegadores Compatibilidad
Los navegadores interpretan el cdigo HTML.
Visualizacin diferente por el uso de navegadores
distintos o por versiones diferentes.
Los navegadores pretenden ser compatibles con la ltima
versin de HTML.
Si un navegador no reconoce una etiqueta, la ignora y el
efecto que pretenda la etiqueta no queda reflejado en la
pgina.
Para realizar las extensiones de estos navegadores se
aaden nuevos atributos a las etiquetas ya existentes, o
se aaden nuevas etiquetas.

Editores
Un editor es un programa que nos
permiten redactar documentos.
Editores visuales: DREAMWEAVER,
FRONTPAGE, PAGEMILL,
NETOBJECTS SUSION, CUTEPAGE,
HOTDOG, Y OTROS.
Wordpad o blog de notas.
Etiquetas
Las etiquetas o marcas delimitan cada uno de
los elementos que componen un documento
HTML.
Existen dos tipos de etiquetas, la de comienzo
de elemento y la de fin o cierre de elemento.
Las del comienzo llevan este smbolo < y >.
Su sintaxis es:
<identificador atributo1 atributo2 ...>
Etiquetas
La etiqueta de final est delimitada por los
caracteres </ y >
Su sintaxis es:
</identificador>

Warning: en todo el documento es posible
encontrar etiquetas de comienzo y su
correspondiente etiqueta de cierre.
Etiquetas
Tambin es posible anidar etiquetas.
<p align="center"><font
color="#993366" size="4"
face="Comic Sans MS, Arial, MS
Sans Serif">FORMACiON PARA EL
TRABAJO</font></p>

Formato de un documento HTML
Cualquier documento de HTML consta de dos
partes: cabecera y cuerpo del documento.
Formato de cabecera:
<html>
<head>
<title>plantilla</title>
</head>
Formato de un documento HTML
Formato del cuerpo del documento:
<body>

Esta pagina es la primera que hacemos.
</body>
Formato total
<html>
<head>
<title>plantilla</title>
</head>
<body>

Esta pagina es la primera que hacemos.
</body>
</html>
Ejemplo
<html>
<head>
<title>MI PRIMERA PAGINA</title>
</head>
<body bgcolor="#FFCC99">
<font color="#CC3300" size="5">Hola,
estoy haciendo pruebas.</font>
</body>
</html>
Actividad

Estructura de una
pgina html
Estructura bsica
<html>
<head>
...
</head>
<body>
...
</body>
</html>
Identificador del tipo de documento <html>
Entre las etiquetas <html> y </html>
estar comprendido el resto del
cdigo HTML de la pgina.
<html>
...
</html>

Cabecera de la pgina
La cabecera de la pgina se utiliza para agrupar informacin sobre
ella, como puede ser el ttulo.
Est formada por las etiquetas <head> y </head>.
La etiqueta <head> va justo debajo de la etiqueta <html>.
<html>
<head>
...
</head>
...
</html>

Cabecera de la pgina
Entre las etiquetas <head> y
</head>, las etiquetas que podemos
encontrar y ms se utilizan son:
<link>, <style>, <script>,<meta> y
<title>
Ttulo de la pgina <title>
El ttulo de la pgina.
<html>
<head>
<title>
Mi primera pgina web
</title>
</head>
...
</html>

Cuerpo del documento <body>
El cuerpo del documento contiene la
informacin propia del documento, es decir lo
que queremos que se visualice, el texto de la
pgina, las imgenes, los formularios, etc.
Todos estos elementos tienen que encontrarse
entre las etiquetas <body> y </body>, que van
justo debajo de la cabecera.
Cuerpo del documento <body>
<html>
<head>
<title>Mi primera pgina web</title>
</head>
<body>

</body>
</html>

Color de fondo
El color de fondo se puede establecer con el
atributo bgcolor.

<body
bgcolor="#0000FF">

</body>
</html>
<body bgcolor=blue>

</body>
</html>

Imagen de fondo
La imagen de fondo puede establecerse
a travs del atributo background.
<body background=a.jpg>

</body>
</html>

Color del texto
A travs de la etiqueta <body>
tambin es posible establecer el
color del texto de la pgina a travs
del atributo text.
<body text="#FF0000">
...
</body>
</html>
Mrgenes
leftmargin (margen izquierdo) .
topmargin (margen superior).
Para los navegadores donde no
funcionan los anteriores
marginwidth (anchura del margen).
marginheight (altura del margen). .
Mrgenes
<body leftmargin="20"
topmargin="0" marginwidth="20"
marginheight="0" >
...
</body>
</html>
Color de los enlaces
Link. Indica el color que tendrn los hiperenlaces
que no han sido accedidos.
link=#rrggbb color

vlink. Indica el color de los hiperenlaces que ya han
sido accedidos.
vlink=#rrggbb color
Texto
Objetivo
Aprender a cambiar las propiedades
del texto, as como a insertar
caracteres especiales o
separadores.
Caracteres especiales
Si se desea escribir los caracteres
< y > como texto hay que
escribir el nombre que los
representa
< Se representa con <
> Se representa con >

Caracteres especiales
Existen otros caracteres que no se visualizan
correctamente en algunos navegadores (, y letras
acentuadas)
Espacios en blanco
En un texto HTML donde existen varios espacios
en blanco, el navegador solo pone uno.
Para conseguir que se muestren varios espacios
en blanco es necesario substituirse por
Bienvenidos, esta es mi 1 pgina!

Comentarios
Para insertar comentarios dentro del cdigo,
basta con insertar el texto entre .
Todo el cdigo que se inserte entre estos
smbolos no ser visualizado en los
navegadores.
Bienvenidos, esta es mi 1 pgina!
Saltos de lnea <br>
Se produce un salto de lnea al pulsar la tecla INTRO.
Para crear un salto de lnea se utiliza la etiqueta <br>
La etiqueta <br> no precisa ninguna etiqueta de cierre.
Queridos usuarios,
tengo el placer de comunicarles que hay una nueva
seccin.
Texto preformateado <pre>
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>..

Texto preformateado <pre>
Entre las etiquetas <pre> y </pre>
no se pueden incluir las etiquetas
<img> (para incluir imgenes),
<object> (para incluir objetos como
animaciones), <big>, <small>, <sub>
ni <sup>.
Separadores <hr>
El elemento que suele utilizarse para separar
secciones dentro de una misma pgina es la regla
horizontal.
Se utiliza la etiqueta <hr>.

Separadores <hr>

Sangrado de texto <blockquote>
La sangra es una especie de margen que se
establece a ambos lados del texto.
Para que un texto aparezca sangrado, se
inserta entre las etiquetas <blockquote> y
</blockquote>.
Insertando el texto entre varias etiquetas
<blockquote> y </blockquote> se consigue
que los mrgenes sean mayores.
Sangrado de texto <blockquote>

Formatear el texto <font>
Las propiedades del texto pueden modificarse a travs de
la etiqueta <font>.
Para ello, podemos insertar el texto entre las etiquetas
<font> y </font>, especificando algunos de los atributos
de la etiqueta:
Tambin es posible definir una fuente para todo el
documento. Para ello, hay que insertar la etiqueta
<basefont> despus de la etiqueta <body>.
La etiqueta <basefont> no necesita una etiqueta de
cierre, y permite modificar los mismos atributos del
texto que la etiqueta <font>.

Resaltado del texto <b>
A continuacin se muestran algunas
etiquetas asociadas al tipo de letra:
A continuacin se muestran algunas etiquetas
asociadas al tipo de informacin:
<font color="#993366" size="4"
face="Comic Sans MS, Arial, MS Sans
Serif">Bienvenidos a
<b><u><tt>www.google.com</tt></u><
/b></font>
Prrafos <p>
El texto de una pgina puede agruparse en
prrafos. Para ello, el texto de cada uno de los
prrafos debe insertarse entre las etiquetas <p> y
</p>.
No es necesario insertar la etiqueta <br>
Para cambiar la alineacin del texto de cada
prrafo, se modifica el atributo align, cuyos valores
pueden ser left (izquierda), right (derecha), center
(centrado) o justify (justificado).
Prrafos <p>

Prrafos <div>
La etiqueta <div> y </div>, al igual que la etiqueta
<p>, se utiliza para agrupar bloques de texto, pero
con la diferencia de que la separacin entre ellos
es menor.
tambin existe el atributo align.
Prrafos <div>
Tambin es posible insertar el texto entre las etiquetas
<center> y </center> para que aparezca centrado.
Por ejemplo, para insertar el texto:

Encabezados <h1>
Existen una serie
de encabezados
que suelen
utilizarse para
establecer ttulos
dentro de una
pgina.
Encabezados <h1>

Marquesinas <marquee>
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>.

Actividad

LISTAS
Listas
Sirven para representar un conjunto
de elementos .
Existen tres tipos distintos de listas:
Listas no numeradas
Listas numeradas
Listas de definiciones
Listas no numeradas: <UL> {UL: Unordered
List}
Para la definicin de los lmites de la lista utilizaremos la
etiqueta <UL>.... </UL>, y para determinar cada uno de los
elementos que la componen usaremos la etiqueta <LI>.
El formato es el siguiente:
Ejemplo 1

Ejemplo 2

Listas numeradas: <OL> {OL: Ordered List}
Permite especificar una serie de elementos numerados segn el lugar
que ocupan en la lista.
Para la definicin de los lmites de la lista utilizaremos la etiqueta
<OL>.... </OL>, y para determinar cada uno de los elementos que la
componen usaremos la etiqueta <LI>.
Start y type
A: Letras maysculas (A, B, C, ...)
a: Letras minsculas (a, b, c, ...)
I: Nmeros romanos en maysculas (I, II, III, IV, ...)
i: Nmeros romanos en minsculas (i, ii, iii, iv, ...)
1: Numricamente (1, 2, 3, 4, ....) (es la numeracin por
defecto y por tanto no habra que indicarla).
Ejemplo 1

Ejemplo 2

Listas de definiciones: <DL> {DL: Definition
List}
Sirven para especificar una serie de trminos y sus
definiciones correspondientes.
Para la definicin de la lista usaremos la etiqueta <DL>....
</DL>, para especificar los trminos usaremos la etiqueta
<DT> y para especificar la definicin correspondiente a cada
trmino usaremos la etiqueta <DD>.
Ejemplo

Imgenes
Imagen <img>
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.

<img src="imagenes/logo_animales.gif">

Imgenes y texto alternativo
Cuando una imagen no puede ser visualizada en el navegador, cosa que
puede ocurrir al especificar mal el valor del atributo src, aparece un
recuadro blanco con una X roja en su lugar, junto con el nombre de la
imagen.
Podemos hacer que en lugar de mostrarse el nombre de la imagen
aparezca el texto que nosotros deseemos, gracias al atributo alt.

<img src="imagenes/gatito.gif" alt="Imagen gato" >

Borde de la imagen
El atributo border puede tomar valores numricos, que
indican el grosor en pxeles del borde.

<img src="imagenes/logo_animales.gif" border="4" >

Imagen como enlace
Para insertar la siguiente imagen con borde y con un enlace.

<a href="http://www.google.com" target ="_blank" ><img
src="imagenes/logo_animales.gif" border="4" ></a>

Tamao de la imagen
A travs de los atributos width (anchura) y height (altura)
puede modificarse el tamao de la imagen.
El valor que pueden tomar los atributos width y height ha
de ser un nmero, acompaado de % cuando se desee que
sea en porcentaje con respecto a la pgina.

<img src="imagenes/logo_animales.gif" width="200"
height="80">

Alineacin de una imagen
La alineacin de las imgenes se
establece a travs del atributo align.

Ejemplo

PerrosGatos<img
scr="imagenes/logo_animales.gif"
align="middle">Una web de animales

Hiperenlaces
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.

Ejemplo
Visita www.google.com.mx

<a
href="http://www.google.com.mx"
>Visita www.google.com.mx</a>

Tipos de referencias
Absoluta
Relativa al sitio
Relativa al documento
Punto de fijacin
Referencia absoluta
Conduce a una ubicacin externa al sitio en el
que se encuentra el documento.
La ubicacin es en Internet, en este caso hay
que empezar la referencia por http:// , el
nombre del dominio y algunas veces el nombre
de la pgina.
<a
href="http://www.sepultura.com.br">Entra
a: www.sepultura.com.br</a>

Referencia relativa al sitio
Conduce a un documento situado dentro
del mismo sitio que el documento
actual.
<a href="/noticias.htm">Noticias</a>
O
<a
href="/pt/noticias.htm">Noticias</a>

Referencia relativa al documento
Conduce a un documento situado dentro del
mismo sitio que el documento actual, pero
partiendo del directorio en el que se encuentra
el actual.
<a href="biografa.htm">Biografa</a>
<a href="pt/biografa.htm">Biografa</a>

Punto de fijacin
Conduce a un punto dentro de un documento, ya sea
dentro del actual o de otro diferente.
Para ello el vnculo debe ser:
"nombre_de_documento#nombre_de_punto".

<a href=" videos.htm#recientes">Videos recientes</a>

Destino de 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.
Ejemplo
Abrir www.taringa.net en una nueva
ventana

<a href="http://www.taringa.net"
target ="_blank">Abrir www.taringa.net
en una nueva ventana</a>

Formato de enlaces
los colores de un enlace 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).

Ejemplo
<body link="#FF0000"
vlink="#FF0099" alink="#FF9900">
...
<a href="http://www.google.com"
target
="_blank">www.google.com</a>
Puntos de fijacin. Anclas
Las anclas, o puntos de fijacin son muy
tiles a la hora de crear ndices.
Un ancla necesita que se inserten las <a>
y </a>, con el atributo name, que puede
tomar cualquier valor inventado por el
usuario, se recomienda no utilizar
caracteres especiales.

Ejemplo
Enlace al ancla
<a href=Archivo.htm#miancla">Enlace al
ancla</a>

Texto con ancla.
<a name="miancla"></a>Texto con ancla.
Otros tipos de enlaces
Correo electrnico
E-mail para Gmail.
<a
href="mailto:usuario@mail.google.com">
E-mail para Gmail</a>

Imagen como enlace
Para insertar la siguiente imagen con borde y con un enlace.

<a href="http://www.google.com" target ="_blank" ><img
src="imagenes/logo_animales.gif" border="4" ></a>

Tablas
Tabla <table>
Las tablas estn formadas por celdas, que son
los recuadros que se obtienen como resultado
de la interseccin entre una fila y una columna.
Para crear una tabla hay que insertar las
etiquetas <table> y </table>. Entre dichas
etiquetas habr que especificar las filas y
columnas que formarn la tabla.
Tabla <table>

Formato general

Fila <tr>
Es necesario insertar las etiquetas <tr> y </tr> por cada una
de las filas de la tabla. Estas etiquetas debern insertarse
entre las etiqetas <table> y </table>.
Columna o celda <td>
Es necesario insertar las etiquetas <td> y </td>
por cada una de las celdas que compongan
cada una de las filas de la tabla. Por lo tanto,
habr que insertar esas etiquetas entre las
etiquetas <tr> y </tr>.
Entre las etiquetas <td> y </td> se podr
especificar el contenido de cada una de las
celdas.
Ejemplo
Formato de la tabla
Ejemplo
Ejemplo
Encabezado de columna <th>
Las etiquetas <td> y </td> se
utilizan para definir las celdas de
cada una de las filas, pero
podemos poner en su lugar las
etiquetas <th> y </th>.
Ejemplo
Ttulo de tabla <caption>
Para establecer un ttulo para la tabla
mediante las etiquetas <caption> y
</caption>.
Combinar celdas
Para las etiquetas <td> y <th> existen los atributos
colspan y rowspan, que se utilizan para combinar
celdas.
A travs del atributo colspan se especifica el
nmero de columnas por las que se extender la
celda.
A travs del atributo rowspan se especifica el
nmero de filas por las que se extender la celda.

Ejemplo
Ejemplo
Actividad

Multimedia
Sonido de fondo <bgsound>
Formatos: wav, mp3 y algunos midi.
La etiqueta <bgsound>, que se utiliza para incluir sonido de fondo. Esta
nueva etiqueta no necesita etiqueta de cierre.
Con el atributo src hay que especificar la ruta y el nombre del archivo de
audio.
<bgsound src="varios/audio.mid" loop="l"
balance="b" volume="v"></bgsound>
Esta etiqueta puede situarse en cualquier parte del documento, pero lo
correcto es debajo de la etiqueta <body>
Vdeo y audio <embed>
Los formatos de vdeo que suelen utilizarse en Internet son
el AVI, el MPEG y el MOV.
La etiqueta <embed> es la que se utiliza para insertar
archivos de vdeo.
A travs del atributo src hay que especificar la ruta y el
nombre del archivo de vdeo.
<embed src="varios/cotorra.avi" >
</embed>

Vdeo y audio <embed>
El atributo autostart indica si el archivo se reproducir
automticamente al cargarse la pgina, y puede tomar
los valores true o false.
El atributo loop indica si el archivo se reproducir
continuamente en un bucle, y tambin puede tomar los
valores true o false.
<embed src="varios/cotorra.avi" autostart="false"
loop="true"></embed>

Para insertar el archivo de audio anterior, se
podra escribir:
<embed src="varios/audio.mid"
autostart="false"
loop="true"></embed>

Pelculas Flash <object>
Las pelculas Flash son animaciones con la extensin SWF.
La etiqueta <object> puede utilizarse para insertar
diferentes objetos dentro de la pgina.

Marcos
Frameset
Insertar varios documentos HTML
en una sola ventana del navegador.
Se divide la pantalla en varias zonas
o secciones que reciben el nombre
de frames o marcos.
En cada uno de estos marcos
debemos insertar un contenido.
marcos <frameset>
Sirven para
distribuir mejor los
datos de las
pginas, ya que
permiten mantener
fijas algunas partes.
Ejemplo:
Mantener fijo el
logotipo y la barra
de navegacin,
mientras que el
resto de la pgina
puede cambiar.
Ejemplo
<frameset> y </frameset>
las etiquetas <frameset> y
</frameset>, que van despus de la
etiqueta <head>.
Cuando se insertan las etiquetas
<frameset> y </frameset> no hay
que insertar las etiquetas <body> y
</body>
Atributos de <frameset>
Nota
Por ltimo debemos saber que entre
las etiquetas <frameset> y
</frameset> slo se pueden
encontrar la etiquetas <noframe>
<frameset> <frame> y sus
correspondientes etiquetas de
cierre.
Documento con frames
Divisin en columnas
<FRAMESET COLS="ancho_col1,
ancho_col2, ...">

Divisin en las
<FRAMESET ROWS="alto_fila1, alto_fila2, ...">
Combinando COLS y ROWS
<FRAMESET COLS="*,*" ROWS="*,*">
...
</FRAMESET>
Ejemplo

La etiqueta <frame>
La etiqueta usada para insertar el contenido en las las,
columnas o divisiones en general, hechas con la etiqueta
FRAMESET, es FRAME.
Esta etiqueta debe ser usada una vez por cada una de las
divisiones que hallamos creado.

<FRAME SRC="docum.htm">
<FRAME SRC="docum.htm NAME="primer_frame">
Pgina completa con frames (Index.html)
Archivo
principal llamado
Index.html
Izquierda
Derecha.html
Enlazar un frame desde otro frame
Si posteriormente queremos crear un enlace a este frame
desde otro de la misma pgina no tendremos ms que
escribir:
<A HREF="otro.htm" TARGET="primer_frame">
Atributos de la etiqueta <frame>
Ejemplo del Index.html

Anidamiento de framesets

Anidamiento de framesets

HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML

Uploaded by

Copyright:

Available Formats

HTML

You might also like