Prof Mercedes 5to de Sec Und Aria

LENGUAJE
HTML
HyperText Markup Language
El lenguaje de publicación usado por

la World Wide Web es el HTML
(acrónimo de HyperText Markup
Language, Lenguaje para el Formato
de Documentos de Hipertexto). Es
un sistema de etiquetas (algo así
como palabras claves) que contienen
órdenes y se insertan en el texto
que uno quiere publicar. Un
documento HTML no es más que
texto al cual se le pueden agregar
otros elementos como imágenes,
sonido y videos
Prof. Mercedes Méndez Rojas

Prof. Del curso
¿Qué es el HTML?
El lenguaje de publicación usado por la World Wide Web es el
HTML (acrónimo de HyperText Markup Language, Lenguaje para
el Formato de Documentos de Hipertexto). Es un sistema de
etiquetas (algo así como palabras claves) que contienen órdenes
y se insertan en el texto que uno quiere publicar. Un documento
HTML no es más que texto al cual se le pueden agregar otros
elementos como imagenes, sonido y videos.
Los documentos html deben tener la extensión html o htm, para
que puedan ser visualizados en los navegadores que son los
programas que permiten visualizar las páginas web.
El Html no es el único lenguaje que existe, es simplemente el
básico, los demás lenguajes como Php, Asp, Javascript, etc,
incluyen códigos de Html para poder funcionar. Estos últimos no
serán objeto de estudio en este manual html.
El HTML brinda herramientas para publicar documentos en línea
con encabezados, textos, tablas, listas, fotos; obtener
información en línea a través de vínculos de hipertexto; diseñar
formularios para realizar transacciones con servicios remotos,
para buscar información, hacer reservas, pedir productos, etc;
incluir hojas de cálculo, videoclips, sonidos, y otras aplicaciones
directamente en sus documentos.
En este manual html usted aprenderá como hacer, de una forma
fácil y rápida, la mayoria de estas operaciones.
Estructura y etiquetas del lenguaje html

Aquí tenemos un ejemplo de la estructura de un documento en
el que se ha empleado el lenguaje HTML:
<HTML>
<HEAD>
2
<TITLE>Lenguaje html</TITLE>
</HEAD>
<BODY>
<P>¡Estructura de una página html!</P>
</BODY>
</HTML>
Un documento HTML se identifica por las siguientes dos
etiquetas:
<html>
Documento
</html>
En todo documento html se encuentra la cabecera que es una
colección de información acerca del documento y requiere de las
etiquetas <HEAD> y </HEAD>, las que no afectan la apariencia
del mismo. Aquí se deben incluir definiciones generales que
afectarán a todo el documento, todas las etiquetas del lenguaje
html que se utilizan en esta área son opcionales pero es muy
importante, para el posicionamiento de su sitio web de cara a los
buscadores, el uso de las etiquetas del título (<TITLE> y
</TITLE>). El título del documento que emplea el lenguaje html
debe describir el contenido de dicha página.
El otro elemento que define la estructura de una página html es
el cuerpo del documento html delimitado por las etiquetas
<BODY> y </BODY>. y en él cual l se incluirán todas las
instrucciones HTML, el texto, as imágenes y demás elementos
que componen el lenguaje html.
El formato general de las etiquetas utilizadas en el lenguaje html
es el siguiente:
<Etiqueta> Inicio de una etiqueta .
</Etiqueta> Cierre de esa misma etiqueta
3
ETIQUETAS DE TEXTO DEL LENGUAJE
HTML
A continuación haré una relación de las etiquetas de texto más
empleadas con el lenguaje html:
• <Hn> texto </Hn> : n es un numero entero comprendido
entre 1 y 6. Cuando n es 1 se obtiene la letra más grande
y, si se utiliza 6, la letra es muy pequeña.
• <HR> : Línea horizontal, que se extiende a todo lo ancho de la
pantalla. Esta etiqueta no necesita marca de cierre.
• <BR> : Salto forzado a la línea siguiente.
• <NOBR> : El texto que se coloque entre las etiquetas de inicio
y fin no se le podrán insertar cambios de línea.
• <P> texto </P> Inicio y final de párrafo.
• <pre> texto </pre> : texto preformateado, el texto aparecerá
en el navegador tal y como se ha insertado dentro del código.
• : Con esta secuencia de caracteres conseguiremos
espacios en blanco que se mostrarán de forma efectiva. Se
incluirán tantas expresiones de este tipo como espacios en
blanco se desee.
• < : carácter <.
• &gt : carácter >
• &letraacute : para acentuar, letra debe sustituirse por la letra
mayuscula o minuscula que se quiere acentuar
• &ntilde: Letra ñ, para la mayuscula sustituir n por N.
Ejemplo:
<html>
<head>
<Title> Tipos de Cabeceras </Title>
4
</head>
<Body background ="C:\Html\logo.jpg">
<h1 align=center> CABECERA </h1>
Hay 6 tipos de letras
<h1> Tamaño 1 </h1>
Para escribir las cabezeras se debe hacer uso de <H1&gt y
</H1&gt
</Body>
</html>
FORMATO DE TEXTO HTML

Estos son algunas de las etiquetas que más se emplean para el
formato de texto en html.
• <B>texto</B> : El texto aparecerá en negrita.
• <I>texto</I> : Con el empleo de este formato de texto html,
se produce un texto en itálica.
• <U>texto</U>: Se subraya el texto entre las dos etiquetas. Este
formato de texto html no es reconocido por todos los navegadores.
• <EM>texto </EM> : Indica un énfasis tipográfico, se muestra
el texto en letra itálica.
• <TT>texto</TT> : Esta etiqueta hace que el texto se vea en
formato teletipo.
• <BIG> texto</BIG>: Especifica que el texto debe ser mostrado
usando el mayor tamaño de fuente (comparado con el font actual).
5
• <S>texto</S>: Especifica que el texto aparecerá tachado.
• <SMALL>texto</SMALL>: Especifica que el texto debe ser
mostrado usando el menor tamaño de fuente (comparado con
el font actual).
• <STRONG>texto</STRONG>: Es utilizado para especificar énfasis
tipográfico, generalmente aparece en negrita.
• <SUB>texto</SUB> : Es usado para especificar que el texto
encerrado entre las etiquetas de inicio y fin es un subíndice
• <SUP>texto</SUP> : Para especificar que el texto encerrado entre
las etiquetas es un superíndice
• <BUTTON>: Para crear botones que están empotrados en el
documento. Este elemento de formato de texto html toma todo el
contenido que se encuentra entre las etiquetas de inicio y fin y crea
con ellas un botón.
• <FONT> texto < /FONT> : Estas etiquetas de formato de texto
html permite modificar la forma de presentarse el texto.
• ADDRESS: Este elemento de formato de texto html especifica
información sobre el nombre, la dirección y otras
características importantes del autor y puede estar en el inicio
o el final del documento. Generalmente aparece alineada y
escrita en typeface itálica. Esta etiqueta introduce un cambio
de párrafo antes y después.
• <PRE>texto</PRE>: Respeta el bloque de texto, tal y como se
ha escrito con espacios y tabuladores.
• <BLOCKQUOTE>texto</BLOCKQUOTE> : Introduce una cita
textual o un texto que debe ser resaltado. Genera un cambio
de párrafo al inicio y al final de la cita y el texto se ajustará a
los márgenes izquierdo y derecho. Estas etiquetas de formato
de texto html también son utilizadas para permitir sangria en el
texto
6
• <CENTER>texto</CENTER>: Centra todo lo que esté dentro de
ella, independientemente que sea texto ó imágenes. Hay que
advertir aquí que no la soportan todos los navegadores,
aunque si los mas conocidos.
• MARQUEE: permite crear una región de texto que puede
moverse a través de la pantalla.
Tiene los siguientes atributos:

○ ALIGN: acepta valores left, right, top, middle o
bottom y especifica que el texto alrededor de la
marquesina debe ser alineado según el valor
indicado.
○ BEHAVIOR: acepta valores scroll, slide o alternate y
especifica como va a aparecer el texto
 Scroll : es el valor por defecto, el texto aparece por
un lado se desliza por la marquesina y desaparece
por el contrario
 Slide :aparece por un lado y cuando llega al contrario
se queda alli
 Alternate : El texto se desplaza de un lado a otro
siempre dentro de los limites de la marquesina.
○ BGCOLOR: especifica un color de fondo para la
marquesina.
○ DIRECTION: especifica en qué dirección se va a
mover el texto (left, right).
○ HEIGHT: especifica el alto de la marquesina, ya sea
en pixels o en porciento.
○ HSPACE: es usado para especificar el número de
pixels de espacio libre a la derecha e izquierda de la
marquesina.
7
○ LOOP: especifica los ciclos de tiempo en que debe
repetirse la marquesina. Si se especifica –1 o
infinite la marquesina se repite indefinidamente.
○ TITLE: para información, cuando se pasa el mouse
por encima de la marquesina, aparece como un
ToolTip.
VSPACE: es usado para especificar el número de
pixels de espacio libre por encima y por debajo de
la marquesina.
○ WIDTH: es usado para especificar el ancho de la
marquesina en pixels o en
porciento.
Ejemplos:
<html>
<head>
<Title>Formato de texto html</Title>
</head>
<Body>
<h1 align=center> Formato de texto html</h1>
<B>Negrita</B> <BR>
<I>Cursiva</I><BR>
<U>Subrayada</U><BR>
<S> Tachada </S><BR>
<SUP> Superindice </SUP><BR>
<SUB> Subindice </SUB><BR>
<TT> Teletipo </TT><BR><BR>
<BIG><B> Grande </B></BIG><BR>
<SMALL> Pequeña </SMALL><BR>
8
</Body>
</html>
<HTML>
<HEAD>
<TITLE>Textos en bloques</TITLE>
</HEAD>
<BODY>
<pre> Este texto aparece tal y como lo he tecleado:
veremos como se ve.
</pre>
<MARQUEE BEHAVIOR=ALTERNATE LOOP="5"> Texto que
aparece despacio, en 5 ocasiones
</MARQUEE>
<MARQUEE WIDTH="80%" HEIGHT="30" ALIGN="TOP"
BGCOLOR="blue"
DIRECTION="RIGHT" LOOP="90" HSPACE="10"
VSPACE="5">
<FONT COLOR="#ffffff" SIZE="3">Este es mas ancho
que los demas</FONT>
</MARQUEE>
<CENTER>Formato de texto html centrado</CENTER>
</BODY>
</HTML>
Imágenes
La etiqueta html que sirve para incluir imágenes en una página
Web es la siguiente:
<IMG SRC="imagen.bmp">
El atributo SRC sirve para indicar al navegador web el nombre y
la localización del fichero que contiene la imagen.
9
Dentro de la etiqueta de imágenes se pueden añadir otros
Atributos, tal como ALT
<IMG SRC="imagen.bmp" ALT="descripción">
Con ALT se introduce una descripción (una palabra o una frase
breve) referente a las imágenes. Este atributo de las imágenes,
es en beneficio de los que accedan a nuestra página con un
navegador en forma de sólo texto, ya que aunque no pueden ver
las imágenes, por lo menos pueden hacerse una idea sobre ella,
tambíen sirve como información para el usuario el cual ve en
pantalla un mensaje descriptivo hasta que se logra cargar la
imagen. Hay casos en los cuales las imagnes sirven para enlazar
a otras páginas.
Las imágenes pueden tener diferentes posiciones con respecto al
texto, se puede poner arriba, en medio o abajo e incluso al .
Para ello se añade el atributo ALIGN a la etiqueta <IMG>.
Los posibles usos del atributo ALIGN de las imágenes son los
siguientes:
• <IMG SRC=“imagen.bmp" ALIGN=top> (Texto arriba de la
imagen)
• <IMG SRC=“imagen.bmp" ALIGN=middle> (Texto en el medio)
• <IMG SRC=“imagen.bmp" ALIGN=bottom> (Texto debajo de la
imagen)
• <IMG SRC=“imagen.bmp" ALIGN=right > (imagen a la
derecha)
• <IMG SRC=“imagen.bmp" ALIGN=left> (imagen a la izquierda)
Existen otros atributos vinculados con este este comando de las
imágenes:
• VSPACE: Se utiliza para definir el espacio que deberá quedar en
blanco entre la imagen desplegada y los textos o imágenes
arriba y abajo de la misma.
10
• HSPACE: Se utiliza para definir el espacio que deberá quedar en
blanco entre la imagen desplegada y los textos o imágenes de
la izquierda y derecha de la misma.
LISTAS
En html, existen tres tipos fundamentales de listas:
• Listas desordenadas
• Listas ordenadas
• Listas de definición
LISTAS DESORDENADAS
Las listas desordenadas se delimita con las etiquetas
<UL>...</UL> y cada elemento de la lista se encuentra
delimitado por las etiquetas <LI>Elemento de la lista</LI>.
Estas listas admiten el atributo TYPE (TYPE="tipo"), "tipo" puede
tomar uno de los siguientes valores:
• "disc" = Inserta el circulo relleno
• "square" = Inserta un cuadrado.
• "circle" = Inserta un circulo sin rellenar.
Si a este atributo lo añadimos a la etiqueta <UL> se verán
afectados todos los elementos de la lista, si por el contrario, lo
añadimos a la etiqueta <LI> solo se verá afectado ese elemento
de la lista.
Ejemplo:
<UL TYPE="DISC">
<LI>Juan</LI>
<LI>Pedro Pablo</LI>
<LI>Javier</LI>
</UL>
LISTAS ORDENADAS
11
Este tipo de listas se delimitan con las etiquetas <OL>...</OL>
y cada elemento de la lista, se encuentra entre las etiquetas
<LI>Elemento de la lista</LI>.
Las listas ordenadas admiten los siguientes atributos:
START="n" : "n" es un número que indica a partir de que
número va a empezar la lista
TYPE="1" : Indica orden numérico.
TYPE="a" : Indica orden alfabético con minúsculas.
TYPE="A" : Indica orden alfabético con mayúsculas.
TYPE="i" : Indica orden numérico con números romanos en
minúsculas.
TYPE="I" : Indica orden numérico con números romanos en
mayúsculas.
En el caso de que el atributo START se quiera aplicar a una

etiqueta <LI>, en lugar de START se pondrá VALUE y afectará a
los elementos de la lista que vengan a continuación.
Ejemplo:
<OL START="1" TYPE="1">
<LI>Juan</LI>
<LI>Pedro Pablo</LI>
<LI>Javier</LI>
</OL>
LISTAS DE DEFINICIÓN
Las listas de definición son listas a dos niveles, cada elemento se
descompone en un nombre que ocuparía la primera línea y una
definición que ocuparía las siguientes. Generalmente aparece
formateada con el nombre pegado al borde izquierdo y la
definición ligeramente tabulada a partir del borde izquierdo
12
Este tipo de lista está delimitado por la directiva <DL>...</DL>,
el título por <DT>TITULO</DT> y la definición por
<DD>DEFINICIÓN</DD>
La etiqueta <LH> permite definir el título de la lista, que es
opcional y aparecerá en la parte superior de la misma. Esta
etiqueta puede usarse como título para cualquiera de las listas.
Ejemplo:
<DL>
<DT><B>Catalunya</B></DT>
<DD>Barcelona</DD>
<DT><B>Andalucia</B></DT>
<DD>Córdoba</DD>
<DT><B>Madrid</B></DT>
<DD>Madrid</DD>
</DL>
TABLAS
Las tablas permiten la representación de los datos por filas y
columnas y la ubicación de los elementos dentro de un
documento HTML. Se recomienda usar tablas para distribuir los
elementos de la página web. En una tabla podemos introducir
todo tipo de elementos : imágenes, enlaces, texto, cabeceras,
formularios, etc.
Las tablas se definen de la siguiente manera. Primero, las
características de la tabla, luego las de cada fila y dentro de
ésta, cada celda.
Para delimitar las tablas se utilizan las etiquetas <TABLE> ...
</TABLE>. Los atributos que se emplean con la etiqueta
<TABLE> son opcionales y modifican la tabla completa:
• ALIGN: Forma en que se alineará la tabla. Solo admite valores
left y right.
13
• BACKGROUND: permite especificar una imagen de fondo
para la tabla.
• BGCOLOR: permite especificar un color de fondo para la
tabla.
• BORDER: define el grueso de los bordes de la tabla. Por
defecto será 0, sin bordes
• BORDERCOLOR: permite especificar un color a los bordes de la
tabla. Para usar este atributo es necesario que se haya definido
anteriormente el atributo BORDER <> 0.
• BORDERCOLORLIGHT: permite el uso de un color claro
independiente para dar la sensación de 3 dimensiones.
Para usar este atributo es necesario que se haya definido
• BORDERCOLORDARK: permite el uso de un color oscuro
independiente para dar la sensación de 3 dimensiones. Para
usar este atributo es necesario que se haya definido
• CELLPADDING: es el espacio entre el borde de la celda y
el contenido de esta, por defecto es 1. Si se indica 0, las
celdas aparecerán sin separación.
• CELLSPACING: indica el espacio que debe existir entre las
distintas celdas de la tabla. Por defecto será 2. Si se
indica 0 no habrá ningún espacio entre las celdas.HEIGHT:
definirá el alto de la tabla, se puede indicar como valor
absoluto o como porciento.
• TITLE: para información, cuando se pasa el mouse por
encima de la tabla, aparece como un ToolTip.
• VALIGN: permite alinear verticalmente el texto mostrado
en las celdas de la tabla. Admite valores top, bottom o
center.
14
• WIDTH: será el ancho de la tabla, se puede indicar como
valor absoluto o como porciento del ancho del documento.
Cada fila se encuentra delimitada por las etiquetas
<TR>...</TR>.
Atributos de las filas de las tablas:
• ALIGN: indicará la forma en que se alinearán los textos dentro
de las filas de la tabla. Admite valores center, left y right.
fila.
• BORDERCOLOR: permite especificar un color a los bordes
de la fila. Para usar este atributo es necesario que se haya
definido anteriormente el atributo BORDER <> 0.
• TITLE: para información, cuando se pasa el mouse por
encima de la fila, aparece como un ToolTip.
en las celdas de la fila. Admite valores top, middle,
bottom.
Para definir cada una de las celdas de tipo cabecera se utiliza la
etiqueta <TH>. Estas etiquetas de las tablas deben aparecer
tras los elementos <TR> Existirá una columna por cada
elemento <TH> que se incluya. Aunque se puede indicar la
15
etiqueta de cierre no es necesario pues se asume
implícitamente.
• ALIGN: indicará la forma en que se alinearán los textos dentro
de las celdas de la tabla. Admite valores center, left y right.
• BGCOLOR: permite especificar un color de fondo para la celda.
Por defecto el valor es 1.
• HEIGHT: es usado para definir el alto exacto de la celda en
pixels o en porciento. Solo es necesario determinar este valor
en una celda de la fila.
• NOWRAP: si aparece en cualquier celda, significa que las líneas
de texto dentro de las celdas no se pueden romper en varias
líneas. Por tanto si la línea es muy larga ella fijará el ancho de
la celda.
• ROWSPAN: especifica cuántas filas de la tabla va a ocupar esta
celda en la misma columna. Por defecto el valor es 1.
• VALIGN: permite alinear verticalmente el texto mostrado en las
celdas de la fila. Admite valores top, middle, bottom .
• WIDTH: es usado para definir el ancho exacto de la celda en
píxel o en porciento. Solo es necesario determinar este valor en
una celda de la fila.
TABLAS (CONT...)
La etiqueta <TD> definirá cada una de las celdas de las tablas.
Atributos para las celdas de las tablas:
• ALIGN: indicará la forma en que se alinearán los textos
dentro de las celdas de la tabla. Admite valores center,
left y right.
• BACKGROUND: permite especificar una imagen de fondo
para la celda.
celda.
16
• BORDERCOLOR: permite especificar un color a los bordes de la
celda, es necesario que se haya definido el atributo BORDER <>
0.
independiente para dar la sensación de 3 dimensiones. Para
usar este atributo es necesario que se haya definido
• COLSPAN: especifica cuántas columnas de la tabla va a ocupar
la celda actual. Por defecto el valor es 1.
• HEIGHT: para definir la latura de la celda en píxel o en
porciento. Solo es necesario determinar este valor en una celda
de la fila.
• NOWRAP: las líneas de texto dentro de las celdas no se pueden
romper en varias líneas, si la línea es muy larga ella fijará el
ancho de la celda.
• ROWSPAN: especifica cuántas filas de la tabla va a ocupar
esta celda en la misma columna, la celda se expandirá
ocupando tantas filas de la tabla inicial como se
especifique. Por defecto el valor es 1.
• TITLE: para información, cuando se pasa el mouse por encima
de la fila, aparece como un ToolTip.
en las celdas de la fila. Admite valores top, middle,
bottom.
• WIDTH: para definir el ancho de la celda en píxel o en
porciento. Solo es necesario determinar este valor en una celda
de la fila.
17
Ejemplo:

< TABLE BORDER=2 CELLPADDING=10 CELLSPACING=0>
<CAPTION>Listado de Productos</CAPTION>
<TR>
<TH>Producto</TH>
<TH>Almacen 1</TH>
<TH>Almacen 2</TH>
</TR>
<TR>
<TH>Queso</TH>
<TD ALIGN=CENTER>7</TD>
</TR>
<TR>
<TH>Aceite</TH>
</TR>
<TR>
<TH>Lata de tomate</TH>
</TR>
<TR>
<TH>Total</TH>
18
</TR>
<TR>
<TH>Gran Total</TH>
<TD ALIGN=CENTER COLSPAN=2 BGCOLOR=#FFFFFF
>99</TD>
</TR>
</TABLE>

ENLACES
Los enlaces son sumamente importantes cuando se trata de la
web ya que ellos permiten unir los distintos documentos
repartidos por toda la red, sin ellos hacer una página web sería
algo así como la publicación de documentos de texto en
Internet.
Los enlaces generalmente tienen la siguiente estructura:
<A HREF="destino"> Texto</A>
donde "destino" es el destino del enlace y Texto el texto que
aparecerá en la pantalla del enlace,caracterizado por un color
especial y que además esta subrayado.
Por medio de los enlaces hipertextos podemos realizar enlaces
dentro de una misma página, enlaces con otras páginas de un
mismo sitio web, enlaces a otros sitios web y enlaces con una
dirección de correo electrónico.
ENLACES DENTRO DE LA MISMA PÁGINA
Se utiliza para el caso en que tenemos una página muy extensa
y necesitamos hacer un salto a una posición determinada.
:Lo que hemos llamado "destino" es el destino del enlace, es
una posición dentro de la misma página y se identifica porque
lleva delante el un signo #, seguido del nombre de la marca. Lo
que hemos llamado antes Texto es la palabra (o palabras) que
19
aparecerán en la pantalla en un color diferente al resto del texto
y en forma de hipertexto. Su estructura es:
<A HREF="#marca"> Texto</A>
Y en el sitio exacto a donde queremos saltar, debemos poner la
siguiente etiqueta:
<A NAME="marca"> </A>
Supongamos que queremos poner un enlace para ir al comienzo
del documento, la etiqueta entonces quedará de la siguiente
forma:
<A HREF="#inicio">Inicio</A>
Y en el principio del documento debemos poner la etiqueta:
<A NAME="inicio"></A>
La primera etiqueta sería la orden de ir a una posición
determinado y la segunda es esa posición.
ENLACES CON OTRA PÁGINA DEL MISMO SITIO WEB
Lo más común es que tengamos un sitio web con varias páginas.
Para los enlaces entre páginas sustituimos lo que hemos
denominado "destino" (el destino del enlace) por el nombre del
fichero.
<A HREF="fichero"> Texto</A>
Digamos que queremos establecer enlaces hacia la página 2
desde otras páginas. Pues en cada página se debe escribir los
siguiente:
<A HREF="pag2.html"> Ir a la pág 2</A>
Si queremos que vaya a una posición concreta de otra página
tenemos que colocar una marca y completar el enlace con la
referencia a esa marca exactamente detrás del nombre de la
pagina:
<A NAME="posicion"></A> (Este es un ejemplo de una marca
que se debe poner en la página 2)
20
De esta forma se hace referencia a la marca anterior.
<A HREF="pag2.html#posicion"> Ir a la marca posición en la
pág 2 desde otra página</A>
ENLACES CON UNA PÁGINA FUERA DE NUESTRO SITIO
Si se quiere enlazar alguna página que no forma parte de
nuestro sitio web es necesario conocer su URL(Uniform Resource
Locator). Una vez conocida la dirección (URL), la colocamos
como destino de nuestro enlace.
Ejemplos de enlaces a url reales a las cuales usted puede
acceder con sólo poner estos enlaces en una página.
<a href="http://www.comandos-linux.we.bs">
http://www.comandos-linux.we.bs</a>
<a href="http://www.negocio-
rentable.we.bs">http://www.negocio-rentable.we.bs</a>
ENLACES CON UNA DIRECCIÓN DE E-MAIL
Sustituimos el destino del enlace por mailto: seguido de la
dirección de correo electrónico. La estructura de la etiqueta
quedaría:
<A HREF="mailto: dirección de e-mail"> Texto del enlace </A>
<A HREF="mailto:ijh@hotmail.com"> dirección electrónica
</A>
Se abrirá el programa de correo predeterminado con la dirección
escrita.
Podemos lograr que el asunto del mensaje aparezca, se debe
agregar lo siguiente:
?subject=Asunto deseado
Quedando la etiqueta de la siguiente forma:
<a
href="mailto:ijh@hotmail.com?subject=Prueba">Nombre</a>
21
IMÁGENES QUE SIRVEN COMO ENLACES
Se puede utilizar una imagen como enlace a otra página. Se
utilizan imágenes pequeñas (iconos), aunque se puede usar
cualquier tipo de imagen. La sintaxís para estos enlaces es la
siguiente:
<A HREF="destino"><IMG SRC="imagen"></A>
Ejemplo:
<A HREF="pag.html"><IMG SRC="imagen.gif"></A>
ENLACES A SONIDO
La manera más sencilla de incluir sonidos es dejando al usuario
la decisión de escucharlos o no. Para hacerlo incluiremos el
sonido en el parámetro HREF de un enlace, como si fuera una
página HTML:
<A HREF="hola.wav">Saludo de Bienvenida<A>
URL
Para definir el destino de los hiperenlaces se utilizan las URL ,
sirevn para referenciar imágenes y cualquier otro fichero que
quiera incluir dentro de un documento HTML.
Su sintaxis es la siguiente:
servicio://máquina.dominio:puerto/camino/fichero
servicio:
http: Esta parte de la url es el servicio invocado para transmitir
páginas web y el que se usa en los enlaces.
Máquina.dominio : Este componente de la url Indica el
servidor que proporciona el recurso, puede ser, o bien una serie
de cuatro números entre 0 y 255 (123.3.5.65) o bien algo más
fácil de recordar como es una serie de palabras separadas por
puntos . Ej www.yahoo.com
Puerto: Generalmente no se indica, ya que el servicio
22
predetermina uno.
Camino: Se refiere a una serie de directorios separados por el
símbolo /.
http://www.comandos-linux.we.bs
http://www.negocio-rentable.we.bs
URL absolutas y relativas
Una url absoluta es aquella en la cual se indican todas sus
partes, mientras que en las url relativas se toma todo aquello
que falte de la url en la cual esta en enlace, siempre comienza
por un nombre de directorio o por un nombre de fichero
asumiendo el servicio y el servidor actual.
Las url relativas puede comenzar por:
• Una barra / , que indica que el camino del fichero se especifica
desde el directorio raíz del servidor.
• Dos puntos y una barra ../ significa subir un nivel en la
estructura del directorio.
• Un nombre de fichero o directorio, considerándose este a partir
del directorio actual.
Formularios
Los formularios son plantillas que permiten la creación de
documentos HTML con peticiones de datos. La principal utilidad
de los formularios es la posibilidad de crear cuestionarios,
encuestas, páginas de comentarios o cualquier documento en el
que se desee la interacción con el usuario.
En los formularios se podrán definir distintos tipos de recuadros
de diálogo, botones de selección, menús de múltiples
opciones..., para permitir obtener los datos de una manera más
intuitiva.
Los formularios están delimitados por la directiva <FORM> y su
cierre </FORM>
23
Estructura de los formularios
<FORM ACTION="action" METHOD="metodo"
ENCTYPE="enctype">
...
</FORM>
• ACTION="action". Donde "action" es la dirección URL del
programa CGI que va a interpretar la entrada del usuario.
• METHOD="metodo". Donde "metodo" es el método de
transferencia de datos, en principio puede ser cualquiera de los
métodos reconocidos por http.
• ENCTYPE="enctype". Donde "enctype", define el
mecanismo utilizado para codificar el contenido del
formulario.
El cuerpo de los formularios, esta compuesto por una etiqueta
<INPUT> por cada uno de los datos que integremos en el
formulario y dependiendo de lo que necesitemos, por <SELECT>
y <TEXTAREA>.
Su formato general es:
<INPUT TYPE="type" NAME="name" VALUE="value"
SIZE="size">
• TYPE="type". Donde "type" es el tipo de datos que vamos
a introducir en formulario, puede tomar los siguientes
valores:
○ TEXT. Es el valor por defecto de este atributo, e indica
que se trata de una entrada de datos formada por una
línea de texto. El atributo NAME define el nombre que
recibe la variable en la que se almacenará la entrada;
SIZE es el tamaño en caracteres de la ventana de
visualización, podemos añadir un atributo MAXSIZE, que
es el tamaño máximo de caracteres que se pueden
introducir, Con el atributo VALUE se puede dar un valor
inicial aunque no es lo usual.
24
Ejemplo:
<form>
<input type=“text” name="Carnet" size=10
maxlength=15>
</form>
○ PASSWORD. Ttexto en el que se enmascaran los datos,
sustituyéndose por asteriscos, tiene los mismos atributos
que el tipo TEXT.
Ejemplo:
<form>
<input type="password" name "pwd">
</form>
○ CHECKBOX. Casilla de selección de los formularios. Solo
tiene dos valores, si el usuario la marca, la variable se
igualará a ON. Se añade el atributo CHECKED para
marcar la casilla desde el inicio.
Ejemplo:
<form>
<input type="checkbox" name="PC1"
value="linux">Linux
<input type="checkbox" name="PC2"
value="windows">Windows
</form>
○ RADIO. Permite elegir una opción entre varias. Para
todas las opciones, el atributo NAME será el mismo, el
atributo VALUE almacenará el nombre de cada opción y
será el valor que reciba la variable.
NAME="name". Como ya hemos visto antes "name" es el
nombre de la variable donde vamos a recibir el dato.
VALUE="value". Donde "value" representa el valor por
defecto que tomará la variable. En el caso de que el tipo
sea text se visualizará y en los otros casos no.
Ejemplo:
25
<form>
<input type="radio" name="media" value="cd"
checked>CD-ROM
<input type="radio" name="media"
value="dk">Disquete
</form>
Etiqueta TEXTAREA
Esta etiqueta es muy utilizada en los formularios, es una
variante de la etiqueta input, del tipo text, muestra un área de
múltiples líneas.
Su formato es el siguiente:
<TEXTAREA NAME="name" COLS="cols"
ROWS="rows">Texto</TEXTAREA>
"name" es el nombre de la variable que va a almacenar el texto,
"cols" es el numero de caracteres por línea y "rows" es el
numero de líneas.
Ejemplo:
<form>
<textarea name="observaciones" rows=7
cols=40>Observaciones: </textarea>
</form>
Etiqueta SELECT
Esta etiqueta de formularios nos permite hacer una lista
desplegable
Su formato es:
<SELECT NAME="name">
<OPTION VALUE="value1" SELECTED>Opcion 1 </OPTION>
<OPTION VALUE="value2">Opcion 2 </OPTION>
<OPTION VALUE="value3">Opcion 3 </OPTION>
</SELECT>
26
El atributo NAME representa la variable que va a recibir el valor
VALUE de la opción escogida, SELECTED indica la opción por
defecto.
Ejemplo:
<select name="Colores" size="1">
<option selected>Rojo</option>
<option>Amarillo</option>
<option>Verde</option>
<option>Azul</option>
<option>Blanco</option>
<option>Violeta</option>
</select>
Botones de envío y borrado en formularios
formato:
<INPUT TYPE="type" VALUE="value">
• "type" : Puede ser SUBMIT que se emplea en los
formularios para envíar los datos ó RESET cuya finalidad
es borra los datos introducidos restableciéndo el
formulario al estado original.
• "value" : Es la descripción que aparecerá en el botón.
Marcos ó Frames
Un marco es una ventana independiente dentro de la ventana
del navegador. Cada marco tiene sus bordes y sus barras de
desplazamiento. Cada página se dividirá en varias páginas
independientes. Para crear los marcos se necesita remos una
página web específica, llamado documento de definición de
marcos. En él se especifica el tamaño y posición de cada marco
y el documento HTML que contendrá.
27
En el documento de definición de marcos, el cuerpo del
documento se inserta entre las marcas <FRAMESET> y
</FRAMESET>. La etiqueta < FRAMESET ... > define el tamaño,
cantidad y forma de los marcos a utilizar.
Los marcos pueden ser horizontales o verticales y se pueden
cambiar los porcentajes del tamaño de dichos marcos tanto
como se desee siempre y cuando sumen 100%.
Los atributos ROWS y COLS del <FRAMESET> permiten precisar
la forma de los diferentes paneles.
ROWS: Se utiliza para dividir la zona en subzonas horizontales.
Su sintaxis es:
ROWS="altura_zona_1, altura_zona_2,...,altura_zona_n“
ROWS es una lista de valores enteros separados por comas. El
número de elementos de la lista corresponde al número de
subzonas horizontales a crear. Cada uno de los valores de la lista
puede darse según uno de los tres formatos siguientes, donde n
es un entero:
• n: indica la altura de la subzona en píxels.
• n%: indica la altura de la subzona expresada en porcentajes del
tamaño de la zona madre.
• n*: n es opcional. El carater * indica al browser que debe dar a
la zona todo el espacio aún disponible.
COLS: Se utiliza para dividir la zona en subzonas verticales. Su
sintaxis es:
COLS="altura_zona_1, altura_zona_2,...,altura_zona_n"
Ejemplo:
Uso de los marcos para dividir una zona en tres.
<FRAMESET ROWS="15%,35%,50%">...</FRAMESET>
<FRAMESET ROWS="*,*,4*">...</FRAMESET>
28
El FRAMEBORDER, cuya sintaxis es FRAMEBORDER="n", sirve
para definir la barra de separación entre frames. n es un valor
en pixeles, si es cero el borde desaparece
Etiqueta <Frame>
La etiqueta < FRAME > se emplea con los marcos para definir la
información que será desplegada en cada una de las partes en
que fue dividida la pantalla, siempre de izquierda a derecha.
Primero se muestra la información del marco de la izquierda con
el contenido del documento HTML especificado y después el
marco de la derecha.
Debe existir una etiqueta < FRAME > por cada marco definido
en FRAMESET. Es la etiqueta utilizada en los marcos para
caracterizar las subzonas definidas, tiene los siguientes
atributos:
• SCR: Indica el URL del documento que debe mostrarse en esa
zona. Si el atributo no se indica, entonces la zona estará vacía.
SCR="url"
• NAME: Se utiliza para nombrar la zona a fin de que pueda
convertirse en el destino de cualquier enlace de hipertexto. La
sintaxis del atributo es:
NAME="nombre_de_la_zona"
• MARGINWIDTH: Se utiliza para precisar el número de píxeles
entre los bordes izquierdo y derecho de la zona y el documento
HTML a visualizar, en definitiva marca el margen izquierdo. Su
sintaxis es :
MARGINWIDTH="n"
• MARGINHEIGHT: Se utiliza para precisar el número de píxeles
entre los bodes superior e inferior de la zona y el documento
HTML a visualizar. Su sintaxis es:
MARGINHEIGHT="n"
• SCROLLING: Indica si la zona debe poseer una barra de
desplazamiento (SCROLLING="yes"), si no debe contar con ella
(SCROLLING="no") o si esta elección se deja en manos del
29
browser (SCROLLING="auto"). Su sintaxis es:
SCROLLING="yes/no/auto"
• NORESIZE: No permite que el usuario modifique el
tamaño de la zona. Cuando se hace uso de marcos y este
atributo no se precisa es posible variar una zona
desplazandola mediante el ratón.
Etiqueta <NOFRAMES>
Esta etiqueta utlilizada en los marcos indica a todo navegador
incapaz de gestionar los frames el texto que debe presentar al
usuario en lugar de los paneles.
Dicho texto irá entre las marcas <NOFRAMES> y
</NOFRAMES>. Los navegadores ignorarán las marcas
FRAMESET y NOFRAMES no así el texto comprendido entre ellas.
Si el navegador es capaz de gestionar paneles interpretará estas
etiquetas y sabrá que debe ignorar el texto comprendido entre
ellas.
<HTML>
<HEAD>
<TITLE>Un documento con marcos</TITLE>
</HEAD>
<FRAMESET cols="25%,25%,50%">
<FRAMESET rows="*,150">
<FRAME src="contenidos_del_marco1.html"
scrolling="no">
<FRAME src="contenidos_del_marco2.gif"
marginwidth="15" marginheight="25" noresize>
</FRAMESET>
frameborder="0">
frameborder="0">
</FRAMESET>
</HTML>
30
31

Prof Mercedes 5to de Sec Und Aria

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Prof Mercedes 5to de Sec Und Aria

Cargado por

Copyright:

Formatos disponibles

LENGUAJE

El lenguaje de publicación usado por

Prof. Mercedes Méndez Rojas

Estructura y etiquetas del lenguaje html

FORMATO DE TEXTO HTML

Tiene los siguientes atributos:

En el caso de que el atributo START se quiera aplicar a una

También podría gustarte