2717608
Description
Mind Map by Ricardo DL Perez, updated more than 1 year ago
|
Created by Ricardo DL Perez
over 9 years ago
|
|
CONCEPTOS BASICOS EN HTML
- IMAGENES
- Los documentos HTML se limitan a
prever dentro de ellos un espacio en el
que se insertan las imágenes
solicitadas. La marca <IMG> no
necesita cierre y su sintaxis correcta
es: <IMG SRC="immagine.gif">
- El elemento <IMG> va
acompañado de diversos
atributos que facilitan su uso.
Veamos ahora juntos cuáles
son.
- ALT El uso de texto para comentar las
imágenes es una regla fundamental que
debemos observar en la creación de
sitios web
- el uso de comentarios resuelve el
problema y permite optimizar la página
web. La sintaxis correcta de los
comentarios es la siguiente: <IMG
SRC="immagine.gif" ALT="Obra de K.
Haring">
- WIDTH y HEIGHT En los ejemplos
vistos hasta ahora, no hemos
especificado las medidas de la
imagen que el navegador se ha
encargado de buscar
automáticamente. Es posible
definir la anchura y la altura de la
imagen gracias a los atributos
width y height, respectivamente:
<IMG SRC="immagine.gif"
WIDTH=178 HEIGHT=180
ALT="Obra de K. Haring">
- Mediante estos atributos podemos
definir dimensiones diferentes de las que
realmente tiene la imagen. En cualquier
caso, es aconsejable insertar imágenes
con su tamaño efectivo sobre todo si
están en formato GIF, dado que, cuando
se cambian las medidas, este formato
pierde mucha calidad
- BORDER Con el atributo BORDER podemos aplicar un
borde a la imagen. Los valores son numéricos y van
expresados en píxel. Si impostamos el valor BORDER en
0, la imagen no va recuadrada. Cuando omitimos este
atributo, el navegador no aplica ningún borde, pero si
la imagen es también un enlace automáticamente se le
asignará un BORDER=1. La sintaxis correcta es: <IMG
SRC="immagine.gif" WIDTH=178 HEIGHT=180
BORDER=2 ALT="Obra de K. Haring">
- HSPACE y VSPACE Con estos dos atributos podemos establecer la distancia en píxel
de la imagen a los objetos que se encuentran a los cuatro lados de la misma. HSPACE
define la distancia de los lados derecho e izquierdo de la imagen a los objetos más
cercanos (texto, imágenes, apliques, etc.). VSPACE define la distancia de los lados
superior e inferior de la imagen a los objetos más cercanos (texto, imágenes,
apliques, etc.). La sintaxis correcta es <IMG SRC="immagine.gif" WIDTH=178
HEIGHT=180 BORDER=2 VSPACE=3 HSPACE=3 ALT="Obra de K. Haring"> Estos
atributos resultan útiles cuando queremos distanciar la imagen de los objetos más
cercanos.
- ALIGN El atributo ALIGN define la posición de la imagen
respecto al texto colocado inmediatamente antes o después
de la misma. Existen varias opciones para el atributo ALIGN:
ALIGN=top: alinea la primera línea de texto con la parte
superior de la imagen. Para un ejemplo práctico, haz clic aquí.
ALIGN=middle: alinea la primera línea del texto con el centro
de la imagen. Para un ejemplo práctico, haz clic aquí.
ALIGN=bottom: alinea la primera línea de texto con la parte
inferior de la imagen. Para un ejemplo práctico, haz clic aquí.
ALIGN=left: el texto se coloca a la derecha de la imagen
empezando desde la parte superior de la misma. Para un
ejemplo práctico, haz clic aquí. ALIGN=right: el texto se coloca
a la izquierda de la imagen empezando desde la parte superior
de la misma
- ALIGN El atributo ALIGN define la posición de la imagen
respecto al texto colocado inmediatamente antes o después
de la misma. Existen varias opciones para el atributo ALIGN:
ALIGN=top: alinea la primera línea de texto con la parte
superior de la imagen. Para un ejemplo práctico, haz clic aquí.
ALIGN=middle: alinea la primera línea del texto con el centro
de la imagen. Para un ejemplo práctico, haz clic aquí.
ALIGN=bottom: alinea la primera línea de texto con la parte
inferior de la imagen. Para un ejemplo práctico, haz clic aquí.
ALIGN=left: el texto se coloca a la derecha de la imagen
empezando desde la parte superior de la misma. Para un
ejemplo práctico, haz clic aquí. ALIGN=right: el texto se coloca
a la izquierda de la imagen empezando desde la parte superior
de la misma
- HSPACE y VSPACE Con estos dos atributos podemos establecer la distancia en píxel
de la imagen a los objetos que se encuentran a los cuatro lados de la misma. HSPACE
define la distancia de los lados derecho e izquierdo de la imagen a los objetos más
cercanos (texto, imágenes, apliques, etc.). VSPACE define la distancia de los lados
superior e inferior de la imagen a los objetos más cercanos (texto, imágenes,
apliques, etc.). La sintaxis correcta es <IMG SRC="immagine.gif" WIDTH=178
HEIGHT=180 BORDER=2 VSPACE=3 HSPACE=3 ALT="Obra de K. Haring"> Estos
atributos resultan útiles cuando queremos distanciar la imagen de los objetos más
cercanos.
- BORDER Con el atributo BORDER podemos aplicar un
borde a la imagen. Los valores son numéricos y van
expresados en píxel. Si impostamos el valor BORDER en
0, la imagen no va recuadrada. Cuando omitimos este
atributo, el navegador no aplica ningún borde, pero si
la imagen es también un enlace automáticamente se le
asignará un BORDER=1. La sintaxis correcta es: <IMG
SRC="immagine.gif" WIDTH=178 HEIGHT=180
BORDER=2 ALT="Obra de K. Haring">
- Mediante estos atributos podemos
definir dimensiones diferentes de las que
realmente tiene la imagen. En cualquier
caso, es aconsejable insertar imágenes
con su tamaño efectivo sobre todo si
están en formato GIF, dado que, cuando
se cambian las medidas, este formato
pierde mucha calidad
- WIDTH y HEIGHT En los ejemplos
vistos hasta ahora, no hemos
especificado las medidas de la
imagen que el navegador se ha
encargado de buscar
automáticamente. Es posible
definir la anchura y la altura de la
imagen gracias a los atributos
width y height, respectivamente:
<IMG SRC="immagine.gif"
WIDTH=178 HEIGHT=180
ALT="Obra de K. Haring">
- el uso de comentarios resuelve el
problema y permite optimizar la página
web. La sintaxis correcta de los
comentarios es la siguiente: <IMG
SRC="immagine.gif" ALT="Obra de K.
Haring">
- ALT El uso de texto para comentar las
imágenes es una regla fundamental que
debemos observar en la creación de
sitios web
- El elemento <IMG> va
acompañado de diversos
atributos que facilitan su uso.
Veamos ahora juntos cuáles
son.
- Los documentos HTML se limitan a
prever dentro de ellos un espacio en el
que se insertan las imágenes
solicitadas. La marca <IMG> no
necesita cierre y su sintaxis correcta
es: <IMG SRC="immagine.gif">
- ALINEACION DE TEXTO
- Crear párrafos con <P> La marca <P> sirve para definir un
nuevo párrafo de texto, indicando al navegador que el mismo
debe empezar en una nueva línea y colocarse a la derecha, a la
izquierda o centrado. Si no se especifica otra cosa, la marca
<P> alinea el texto por defecto a la izquierda. Para indicar
otros tipos de alineación, existen atributos específicos:
- <P ALIGN=left> Define un párrafo y alinea el
texto a la izquierda(left). <P ALIGN=right> Define
un párrafo y alinea el texto a la derecha (right). <P
ALIGN=center> Define un párrafo y centra el
texto (center).
- Salto de línea con <BR> <BR> es una marca de
interrupción de línea. Tiene un funcionamiento similar a la
marca de párrafo vista anteriormente, pero se diferencia
porque no indica el inicio de un nuevo párrafo. Dicho de
otro modo, su función es parecida a la de la tecla "enter"
del teclado. Se usa sin marca de cierre.
- Disponer el texto con <DIV ALIGN> y <CENTER> El
elemento <DIV> se utiliza para alinear
horizontalmente el texto a la izquierda, a la derecha o
en el centro de la página. El atributo ALIGN es
fundamental a este respecto. <DIV ALIGN=left>Texto e
imágenes a la izquierda</DIV> Mueve a la izquierda
los elementos contenidos dentro de sus marcas. <DIV
ALIGN=right>Texto e imágenes a la derecha</DIV>
Mueve los elementos a la derecha. <DIV
ALIGN=center>Texto e imágenes centrados</DIV>
Centra los elementos.
- íneas horizontales con <HR> Las líneas
horizontales constituyen un instrumento
idóneo para dividir partes del documento y
hacer más legible el texto. La sintaxis
necesaria para su inserción en un
documento HTML es la siguiente: <HR
align="CENTER" size="2" width="400"
color="Red" noshade> La marca HR
(acrónimo de Horizontal Rule) no necesita
cierre. Consta de diversos atributos:
aling="CENTER": define la alineación de la
línea (center, right, left). size="2": define el
grosor, en píxel, de la línea. width="400":
define la longitud horizontal, en píxel, de la
línea. Puede también expresarse en tanto
por cien respecto al espacio a disposición:
width=80%. color="RED": define el color de
la línea. noshade: si este atributo está
presente, elimina el efecto 3D de la línea.
Si no está presente, produce dicho efecto.
- íneas horizontales con <HR> Las líneas
horizontales constituyen un instrumento
idóneo para dividir partes del documento y
hacer más legible el texto. La sintaxis
necesaria para su inserción en un
documento HTML es la siguiente: <HR
align="CENTER" size="2" width="400"
color="Red" noshade> La marca HR
(acrónimo de Horizontal Rule) no necesita
cierre. Consta de diversos atributos:
aling="CENTER": define la alineación de la
línea (center, right, left). size="2": define el
grosor, en píxel, de la línea. width="400":
define la longitud horizontal, en píxel, de la
línea. Puede también expresarse en tanto
por cien respecto al espacio a disposición:
width=80%. color="RED": define el color de
la línea. noshade: si este atributo está
presente, elimina el efecto 3D de la línea.
Si no está presente, produce dicho efecto.
- Disponer el texto con <DIV ALIGN> y <CENTER> El
elemento <DIV> se utiliza para alinear
horizontalmente el texto a la izquierda, a la derecha o
en el centro de la página. El atributo ALIGN es
fundamental a este respecto. <DIV ALIGN=left>Texto e
imágenes a la izquierda</DIV> Mueve a la izquierda
los elementos contenidos dentro de sus marcas. <DIV
ALIGN=right>Texto e imágenes a la derecha</DIV>
Mueve los elementos a la derecha. <DIV
ALIGN=center>Texto e imágenes centrados</DIV>
Centra los elementos.
- Salto de línea con <BR> <BR> es una marca de
interrupción de línea. Tiene un funcionamiento similar a la
marca de párrafo vista anteriormente, pero se diferencia
porque no indica el inicio de un nuevo párrafo. Dicho de
otro modo, su función es parecida a la de la tecla "enter"
del teclado. Se usa sin marca de cierre.
- <P ALIGN=left> Define un párrafo y alinea el
texto a la izquierda(left). <P ALIGN=right> Define
un párrafo y alinea el texto a la derecha (right). <P
ALIGN=center> Define un párrafo y centra el
texto (center).
- Crear párrafos con <P> La marca <P> sirve para definir un
nuevo párrafo de texto, indicando al navegador que el mismo
debe empezar en una nueva línea y colocarse a la derecha, a la
izquierda o centrado. Si no se especifica otra cosa, la marca
<P> alinea el texto por defecto a la izquierda. Para indicar
otros tipos de alineación, existen atributos específicos:
- FONDOS YCOLORES
- <BODY> El elemento <BODY> se coloca
inmediatamente después del cierre de la
marca </HEAD> y, en cualquier caso, dentro de
los elemenos <HTML></HTML>; tiene una
marca de apertura y una de cierre y delimitado
por ellas figura el cuerpo del documento. Si el
elemento <HEAD> contenía metainformación
(es decir, datos no visualizados materialmente
por el navegador) la función de la marca
<BODY> es la de mostrar los objetos (texto,
imágenes, sonidos, apliques, etc.) de la página.
La sintaxis correcta del elemento <BODY> es la
siguiente: <BODY> Contenido del documento
</BODY>
- GCOLOR El atributo BGCOLOR imposta un fondo de
un solo color. La sintaxis correcta es: <BODY
BGCOLOR="red"> Es posible sustituir el nombre en
inglés con valores hexadecimales. Por ejemplo, el
color rojo (red) se sustituye de esta manera: <BODY
BGCOLOR="#ff0000">
- BACKGROUND tiene una función similar a
BGCOLOR, pero mientras el segundo muestra un
tono único del color, el primero visualiza en el fondo
una imagen en formato gráfico .gif o .jpg
- <BODY BACKGROUND="sfondo.gif"> El navegador visualiza la
imagen sfondo.gif y la repite en todos los puntos disponibles
de la pantalla. En otras palabras, no se limita a visualizar la
imagen una sola vez, en el centro de la página por ejemplo,
sino que llena todo espacio a disposición. Por esta razón, es
absolutamente necesario crear un fondo que, si viene
repetido, no presente interrupciones sino un aspecto lo más
uniforme posible.
- TEXT Si no viene establecido diversamente, el
color del texto del documento es el negro ya que
los navegadores asignan este color por defecto.
Gracias al atributo TEXT es posible asignar al texto
un color distinto del negro. La sintaxis correcta es:
<BODY BACKGROUND="sfondo.gif" TEXT="red">
- LINK Si no viene establecido diversamente, el color de los
enlaces (que todavía no se han visitado) es el azul. Gracias al
atributo LINK podemos definir colores diferentes: <BODY
BACKGROUND="sfondo.gif" LINK="red">
- BGPROPERTIES Hablando del atributo
BACKGROUND hemos resaltado el hecho
de que las imágenes estén dispuestas
ocupando toda la pantalla disponible.
- Gracias a la propiedad BGPROPERTIES es
posible hacer que el fondo permanezca
inmóvil respecto al desplazamiento de
página. La sintaxis correcta es: <BODY
BACKGROUND="sfondo.gif"
BGPROPERTIES="fixed">
- Gracias a la propiedad BGPROPERTIES es
posible hacer que el fondo permanezca
inmóvil respecto al desplazamiento de
página. La sintaxis correcta es: <BODY
BACKGROUND="sfondo.gif"
BGPROPERTIES="fixed">
- BGPROPERTIES Hablando del atributo
BACKGROUND hemos resaltado el hecho
de que las imágenes estén dispuestas
ocupando toda la pantalla disponible.
- LINK Si no viene establecido diversamente, el color de los
enlaces (que todavía no se han visitado) es el azul. Gracias al
atributo LINK podemos definir colores diferentes: <BODY
BACKGROUND="sfondo.gif" LINK="red">
- TEXT Si no viene establecido diversamente, el
color del texto del documento es el negro ya que
los navegadores asignan este color por defecto.
Gracias al atributo TEXT es posible asignar al texto
un color distinto del negro. La sintaxis correcta es:
<BODY BACKGROUND="sfondo.gif" TEXT="red">
- <BODY BACKGROUND="sfondo.gif"> El navegador visualiza la
imagen sfondo.gif y la repite en todos los puntos disponibles
de la pantalla. En otras palabras, no se limita a visualizar la
imagen una sola vez, en el centro de la página por ejemplo,
sino que llena todo espacio a disposición. Por esta razón, es
absolutamente necesario crear un fondo que, si viene
repetido, no presente interrupciones sino un aspecto lo más
uniforme posible.
- BACKGROUND tiene una función similar a
BGCOLOR, pero mientras el segundo muestra un
tono único del color, el primero visualiza en el fondo
una imagen en formato gráfico .gif o .jpg
- GCOLOR El atributo BGCOLOR imposta un fondo de
un solo color. La sintaxis correcta es: <BODY
BGCOLOR="red"> Es posible sustituir el nombre en
inglés con valores hexadecimales. Por ejemplo, el
color rojo (red) se sustituye de esta manera: <BODY
BGCOLOR="#ff0000">
- <BODY> El elemento <BODY> se coloca
inmediatamente después del cierre de la
marca </HEAD> y, en cualquier caso, dentro de
los elemenos <HTML></HTML>; tiene una
marca de apertura y una de cierre y delimitado
por ellas figura el cuerpo del documento. Si el
elemento <HEAD> contenía metainformación
(es decir, datos no visualizados materialmente
por el navegador) la función de la marca
<BODY> es la de mostrar los objetos (texto,
imágenes, sonidos, apliques, etc.) de la página.
La sintaxis correcta del elemento <BODY> es la
siguiente: <BODY> Contenido del documento
</BODY>
- TABLAS
- La altura y anchura global
de una tabla se indica dentro
del atributo <TABLE>, que
señala la apertura y cierre de
una tabla. Las dimensiones
se definen mediante WIDTH
(ancho) y HEIGHT (alto) y
pueden expresarse en píxel o
en tantos por ciento
respecto a la página: <TABLE
WIDTH=500> </TABLE>
- El atributo <TABLE> genera
la tabla, mientras que <TD>
sirve para definir los
campos presentes dentro
de la tabla.
- <TABLE BORDER=1
WIDTH=300> <TD
WIDTH=100> </TD>
<TD WIDTH=100>
</TD> <TD
WIDTH=100> </TD>
</TABLE>
- <TR>, que es una
especie de "salto" de
fila dentro de la
tabla.
- <TABLE
BORDER=1
WIDTH=300>
<TR> <TD
WIDTH=100>
</TD> <TD
WIDTH=100>
</TD> <TD
WIDTH=100>
</TD> </TR> <TR>
<TD WIDTH=100>
</TD> <TD
WIDTH=100>
</TD> <TD
WIDTH=100>
</TD> </TR>
</TABLE>
- El espacio entre los
diversos campos de
una tabla se define
dentro de la marca
</TABLE> con
CELLSPACING=X y
CELLPADDING=X
(donde X es la distancia
en píxel): <TABLE
CELLPADDING=10
CELLSPACING=10>
</TABLE>
- El espacio entre los
diversos campos de
una tabla se define
dentro de la marca
</TABLE> con
CELLSPACING=X y
CELLPADDING=X
(donde X es la distancia
en píxel): <TABLE
CELLPADDING=10
CELLSPACING=10>
</TABLE>
- <TABLE
BORDER=1
WIDTH=300>
<TR> <TD
WIDTH=100>
</TD> <TD
WIDTH=100>
</TD> <TD
WIDTH=100>
</TD> </TR> <TR>
<TD WIDTH=100>
</TD> <TD
WIDTH=100>
</TD> <TD
WIDTH=100>
</TD> </TR>
</TABLE>
- <TR>, que es una
especie de "salto" de
fila dentro de la
tabla.
- <TABLE BORDER=1
WIDTH=300> <TD
WIDTH=100> </TD>
<TD WIDTH=100>
</TD> <TD
WIDTH=100> </TD>
</TABLE>
- El atributo <TABLE> genera
la tabla, mientras que <TD>
sirve para definir los
campos presentes dentro
de la tabla.
- La altura y anchura global
de una tabla se indica dentro
del atributo <TABLE>, que
señala la apertura y cierre de
una tabla. Las dimensiones
se definen mediante WIDTH
(ancho) y HEIGHT (alto) y
pueden expresarse en píxel o
en tantos por ciento
respecto a la página: <TABLE
WIDTH=500> </TABLE>
- FORMULARIOS
- Elementos básicos para la
realización de un formulario
- Abrir y cerrar un formulario <FORM
ACTION="mailto:tulogin@tuservidor.pntic.mec.es"
METHOD="post" ENCTYPE="text/plain"> ...
</FORM>
- Entre las etiquetas anteriores
deben ir todas las etiquetas que
generan los botones, casillas,
campos, etc. y también todas las
etiquetas de HTML que permitan
dar forma al formulario (tablas,
colores, etc) El atributo ACTION
nos indica la dirección de correo a
la cual se van a enviar los datos del
formulario. Así pues debes
sustituir
tulogin@tuservidor.pntic.mec.es
por tu dirección de correo. Los
atributos METHOD y ENCTYPE
indican cómo se transferirán los
datos (post, correo) y la
codificación del texto El atributo
HIDDEN no mostrará el campo en
la página web, aunque sí enviará
su contenido.
- Entrada de texto de una
línea <INPUT TYPE="text"
SIZE="25"
NAME="Nombre">
- para introducir texto
(en este caso el
nombre)
- Entrada de texto de
varias líneas <TEXTAREA
NAME="comentario"
ROWS=3 COLS=50>
Introduzca aquí sus
comentarios
</TEXTAREA>
- Lista de opciones o
menú desplegable
<SELECT
NAME="estudios">
<OPTION SELECTED>
ESO <OPTION>
Bachillerato
<OPTION> Ciclos
Formativos <OPTION>
Garantía Social
</SELECT>
- Una variante de las listas de opciones
son los menús con barras de
desplazamiento <SELECT
NAME="americanos" SIZE=6>
<OPTION>España <OPTION>México
<OPTION>Argentina <OPTION>Costa
Rica <OPTION>Panamá <OPTION>Belice
<OPTION>Honduras <OPTION>Bolivia
<OPTION>Chile <OPTION>Paraguay
</SELECT>
- Una variante de las listas de opciones
son los menús con barras de
desplazamiento <SELECT
NAME="americanos" SIZE=6>
<OPTION>España <OPTION>México
<OPTION>Argentina <OPTION>Costa
Rica <OPTION>Panamá <OPTION>Belice
<OPTION>Honduras <OPTION>Bolivia
<OPTION>Chile <OPTION>Paraguay
</SELECT>
- Lista de opciones o
menú desplegable
<SELECT
NAME="estudios">
<OPTION SELECTED>
ESO <OPTION>
Bachillerato
<OPTION> Ciclos
Formativos <OPTION>
Garantía Social
</SELECT>
- Entrada de texto de
varias líneas <TEXTAREA
NAME="comentario"
ROWS=3 COLS=50>
Introduzca aquí sus
comentarios
</TEXTAREA>
- para introducir texto
(en este caso el
nombre)
- Entrada de texto de una
línea <INPUT TYPE="text"
SIZE="25"
NAME="Nombre">
- Entre las etiquetas anteriores
deben ir todas las etiquetas que
generan los botones, casillas,
campos, etc. y también todas las
etiquetas de HTML que permitan
dar forma al formulario (tablas,
colores, etc) El atributo ACTION
nos indica la dirección de correo a
la cual se van a enviar los datos del
formulario. Así pues debes
sustituir
tulogin@tuservidor.pntic.mec.es
por tu dirección de correo. Los
atributos METHOD y ENCTYPE
indican cómo se transferirán los
datos (post, correo) y la
codificación del texto El atributo
HIDDEN no mostrará el campo en
la página web, aunque sí enviará
su contenido.
- Abrir y cerrar un formulario <FORM
ACTION="mailto:tulogin@tuservidor.pntic.mec.es"
METHOD="post" ENCTYPE="text/plain"> ...
</FORM>
- Elementos básicos para la
realización de un formulario
- MAPAS
- Los mapas sensibles son
imágenes que presentan
múltiples enlaces según la
zona donde se sitúe el
cursor. Para conseguir esto
se divide la imagen en
zonas mediante las
coordenadas de las
mismas.
- Primero conseguimos
una imagen y la
declaramos como mapa,
en este caso con el
nombre de directorio
<IMG
SRC="gifs/mapa.gif
USEMAP="#directorio"
- Abrimos el mapa recién
creado <MAP
NAME="directorio">
- Definimos las zonas del
mapa y los enlaces que
le asignamos a cada una.
<AREA SHAPE="forma de
la zona"
COORDS="coordenadas"
HREF="URL asignada"
ALT="comentario
- el mapa
Cerramos </MAP>
- el mapa
Cerramos </MAP>
- Definimos las zonas del
mapa y los enlaces que
le asignamos a cada una.
<AREA SHAPE="forma de
la zona"
COORDS="coordenadas"
HREF="URL asignada"
ALT="comentario
- Abrimos el mapa recién
creado <MAP
NAME="directorio">
- Primero conseguimos
una imagen y la
declaramos como mapa,
en este caso con el
nombre de directorio
<IMG
SRC="gifs/mapa.gif
USEMAP="#directorio"
- Los mapas sensibles son
imágenes que presentan
múltiples enlaces según la
zona donde se sitúe el
cursor. Para conseguir esto
se divide la imagen en
zonas mediante las
coordenadas de las
mismas.
- ENLACES
- En general los enlaces tienen la
siguiente estructura <A
HREF="URL"> Texto del enlace</A>
- En este caso la URL se sustituye por un marcador en la
misma página. El marcador puede ser texto colocado en
el lugar al que queremos saltar. No importa lo que sea
ya que no se verá. Veamos un ejemplo para saltar al
inicio de esta página. Escribiríamos en el lugar desde el
que queremos saltar: <A HREF="#inicio"> Ir al Inicio</A>
Y en el sitio exacto adonde queremos saltar, debemos
poner la siguiente etiqueta: <A NAME="inicio"> </A>
- Enlace a otra página local En este caso la URL se dará de forma
relativa (igual que para poner un fondo a la página). Por ejemplo si
tenemos dos páginas en el mismo directorio pagina1.htm y
pagina2.htm y queremos poner un enlace desde la pagina1.htm a la
pagina2.htm debemos escribir <a href="pagina2.htm">Ir a
pagina2</a> Con esto es suficiente, no hay que crear ningún
marcador a no ser que quieras ir a un sitio concreto de la
pagina2.htm. En ese caso tendrías que poner en el sitio adonde
quieres llegar de la pagina2.htm <a name="sitio"></a> y en la
pagina1.htm <a href="pagina2.htm#sitio>Ir a sitio de la página
2</a>
- Enlace a una dirección de Internet Ahora la URL debe darse
de forma absoluta, tal como la ves en la ventana de
dirección del navegador, es decir: <A
HREF="http://centros4.pntic.mec.es/ies.de.cistierna">IES
Cistierna</A> te llevaría a la página de entrada del IES
Cistierna
- Enlaces usando imágenes Para que una imagen
sea un enlace a otra imagen se debe escribir: <a
href="gifs/sky.jpg"><img src="gifs/ojo.gif" ></a>
- Enlace con una dirección de correo Este es un enlace un poco
diferente, veamos un ejemplo <A HREF="mailto:
abercian@pntic.mec.es"> abercian@pntic.mec.es </A> que se ve
como abercian@pntic.mec.es y que si lo pulsas se abre el programa
de correo que tengas configurado, con la dirección en el campo
correspo
- Enlace que se abre en una nueva ventana Si quieres que la
página que enlazas aparezca en una nueva ventana del
navegador, solamente tienes que poner target="nombre"
como atributo del enlace, es decir: <a href="index.htm"
target="nueva">Indice</a> que se verá como Indice
- Enlace que se abre en una nueva ventana Si quieres que la
página que enlazas aparezca en una nueva ventana del
navegador, solamente tienes que poner target="nombre"
como atributo del enlace, es decir: <a href="index.htm"
target="nueva">Indice</a> que se verá como Indice
- Enlace con una dirección de correo Este es un enlace un poco
diferente, veamos un ejemplo <A HREF="mailto:
abercian@pntic.mec.es"> abercian@pntic.mec.es </A> que se ve
como abercian@pntic.mec.es y que si lo pulsas se abre el programa
de correo que tengas configurado, con la dirección en el campo
correspo
- Enlaces usando imágenes Para que una imagen
sea un enlace a otra imagen se debe escribir: <a
href="gifs/sky.jpg"><img src="gifs/ojo.gif" ></a>
- Enlace a una dirección de Internet Ahora la URL debe darse
de forma absoluta, tal como la ves en la ventana de
dirección del navegador, es decir: <A
HREF="http://centros4.pntic.mec.es/ies.de.cistierna">IES
Cistierna</A> te llevaría a la página de entrada del IES
Cistierna
- Enlace a otra página local En este caso la URL se dará de forma
relativa (igual que para poner un fondo a la página). Por ejemplo si
tenemos dos páginas en el mismo directorio pagina1.htm y
pagina2.htm y queremos poner un enlace desde la pagina1.htm a la
pagina2.htm debemos escribir <a href="pagina2.htm">Ir a
pagina2</a> Con esto es suficiente, no hay que crear ningún
marcador a no ser que quieras ir a un sitio concreto de la
pagina2.htm. En ese caso tendrías que poner en el sitio adonde
quieres llegar de la pagina2.htm <a name="sitio"></a> y en la
pagina1.htm <a href="pagina2.htm#sitio>Ir a sitio de la página
2</a>
- En este caso la URL se sustituye por un marcador en la
misma página. El marcador puede ser texto colocado en
el lugar al que queremos saltar. No importa lo que sea
ya que no se verá. Veamos un ejemplo para saltar al
inicio de esta página. Escribiríamos en el lugar desde el
que queremos saltar: <A HREF="#inicio"> Ir al Inicio</A>
Y en el sitio exacto adonde queremos saltar, debemos
poner la siguiente etiqueta: <A NAME="inicio"> </A>
- En general los enlaces tienen la
siguiente estructura <A
HREF="URL"> Texto del enlace</A>
Want to create your own Mind Maps for free with GoConqr? Learn more.