¿Qué es HTML? ¿Cómo son los comandos HTML? ¿Qué voy a
Curso: Creación de páginas web en HTML, 1ª parte
¿A qué estás esperando? ¡El mundo necesita saber de tus hobbys, ver las fotos de tus
vacaciones, conocer lo que piensas de los temas de actualidad! Haz una web ¡Ya!
¿Cómo? ¿Que no sabes? Pues ya no tienes excusa. Te enseñamos en este nuevo curso.
¿Qué es HTML?
Principios y estructura básica de HTML
Imágenes y gráficos animados
Enlaces y hojas de estilo
Tablas y marcos
Tu primera
página web
Modificar
el estilo del texto
El color en la web
73
73
75
Nº 126
Nº 127
Nº 128
Nº 129
lista de ejemplos puede ser
interminable. Lo mejor es
que no necesitas prácticamente nada para crearla, sobre todo si la programas tú
directamente en HTML.
La abreviatura corresponde
a HyperText Markup Language, o Lenguaje de Marcas
de Hipertexto. Es un lenguaje 01 , con el que se diseñan las páginas web. Por
ejemplo, determinar en qué
lugar del documento se deben ver las imágenes,los textos o los gráficos.
Con HTML se puede también dar formato a los tex-
tos, es decir, configurar el tipo, el color y el tamaño de
la fuente.Los archivos HTML
se reconocen por la extensión html o htm.
¿Cómo son los
comandos HTML?
Las instrucciones HTML se
conocen como “tags” o etiquetas. Siempre comienzan
con el signo < y terminan
con >. La instrucción en
sí misma aparece entre estos
símbolos.Así, por
ejemplo, los tags
<html> y </html>
caracterizan el
principio y el final de un documento HTML.
Es posible ver el
código fuente 02
HTML de prácticamente cualquier
página web que visites en Internet. Para ello sólo necesitas ejecutar el navegador, y abrir una
página cualquiera,
por ejemplo la web
de nuestra revista
www.computerhoy.es
Debajo de esta “fachada” se esconden muchas instrucciones
HTML, que podrás ver
si haces click en
y en
.
Con ello se abrirá un
editor que mostrará la
página “por dentro”.
En ésta y en las siguientes
tres entregas de este curso
te enseñaremos a usar estas
etiquetas para hacer tu propia página web. En las capturas de los ejemplos hemos
resaltado, para mayor claridad, las etiquetas que se comentan en cada caso.
¿Qué voy
a necesitar?
Para escribir código fuente
es suficiente un sencillo editor de texto,como el Bloc de
Notas. Para comprobar que
están bien y, naturalmente,
para ver las páginas, necesitas un navegador. Y para colgarla tienes que disponer de
una conexión a Internet, de
espacio en un servidor web
03 y del software necesario
para enviarle los archivos.
B
romas aparte, lo de hacer una página web no
es ninguna tontería. Puede ser muy práctica para
muchas cosas. Dar publicidad a tu negocio, o incluso
para hacer ventas a través
de ella, publicar tus propios
artículos y relatos, tener al
día a tus familiares y amigos
de todas las novedades que
se produzcan en tu vida... la
72
Puedes hacer la prueba. Abre con cualquier navegador de Internet una página web y selecciona en el menú “Ver” la opción
“Código fuente”. Se abrirá un editor que te mostará las “tripas” del documento.
Nº 126
Curso: Creación de páginas web en HTML, 1ª parte
Tu primera página web
La mejor forma de empezar este curso es, por supuesto, diseñar una página
web.Y eso es ni más ni menos lo que vas a hacer.
1
Lo primero es abrir un
editor de texto. El Bloc
de Notas de Windows te servirá a la perfección. Haz
click en
y luego encima de
. Escribe
dentro del campo de texto
la expresión
y
aprieta la tecla C .
2
Ahora tienes que escribir el código fuente de
la página. Introduce las siguientes líneas en la ventana del editor:
3
La instrucción <html>
se coloca siempre al
principio de un documento
HTML. Entre las etiquetas
<head> y </head> está la cabecera de la página web. En
ella se introduce la información que normalmente
no aparece al visualizarlo,
como hojas de estilo 05 ,
scripts 06 , etc. O el nombre de la página, que debe
situarse entre los tags <ti
tle> y </title> y que luego se
mostrará en la Barra de título de la ventana del navegador. El cuerpo de la página, el texto que se verá al
abrir el documento, está limitado por las instrucciones <body> y </body> que
Modificar el estilo del texto
La verdad es que la página que hemos diseñado es
un poco sosa, ¿no te parece? ¿Te gustaría poder modificar el tamaño, color y la
fuente del texto de tu web?
Te enseñamos a hacerlo.
1
Cierra el navegador y
haz click con el botón
derecho encima de
coloca ahora el cursor sobre
y pincha en la
lista en la entrada
sirven de límites al texto
que luego se leerá en la página.Al final debe aparecer
la orden </html>, que cierra
el archivo HTML.
4
Ahora guarda el archivo.
Para ello pulsa en el menú
y a continuación
en la lista que se despliega
en
.
5
Si quieres almacenarlo
en una nueva carpeta,
escoge su ubicación, pincha
sobre el icono , y a continuación dale un nombre,
por ejemplo
,
y aprieta C .
6
Ahora haz click encima
de la flecha
y selecciona en la lista la entrada
.
decir, entre los tags <body>
y </body>, como por ejemplo éste:
Cada vez que quieras introducir un retorno de carro (o
salto de línea), puedes utilizar la etiqueta <br>
2
Empieza escribiendo un
texto más extenso en el
cuerpo del documento, es
Luego escribe en el campo
de introducción de datos al
efecto el nombre y extensión que quieras darle al archivo,
, y luego pulsa encima del botón
llamado
. Cierra el
Bloc de Notas pinchando
sobre el botón .
7
Finalmente, dirígete a la
carpeta que has creado,
ábrela, y haz doble click encima del icono del archivo
HTML que has generado:
01
02
Con ello se abrirá una ventana del navegador de Internet para mostrar el documento:
3
Haz click en el menú
y luego, en la
lista que se despliega, encima de la entrada llamada
. A continuación introduce ya en el
campo de texto situado
junto a
un nombre nuevo para el fichero y
así no “machacar” el que ya
creaste antes, por ejemplo
, y aprieta encima del botón
.
Lenguaje
Conjunto de instrucciones
que permiten especificar
un proceso al ordenador.
Los lenguajes de programación, los más comunes, se usan para no tener que aprender las
complicadas instrucciones formadas por unos y
ceros del código máquina, el único lenguaje que
“habla” el procesador.
Código fuente
Instrucciones y expresiones de un programa tal y
como fueron escritas por
el programador en un lenguaje determinado.
03
Servidor web
Ordenador que aloja documentos HTML en Internet. Éste debe disponer
de un servidor HTTP
04 , un programa que
procesa las peticiones
que llegan en dicho protocolo, y da al cliente una
respuesta con la información solicitada.
04
HTTP
Hyper Text Transfer Protocol (Protocolo de Transferencia de Hipertexto).
Protocolo de comunicaciones usado en la WWW.
Su principal misión es
contactar con las páginas
web y transmitirlas al nevegador del cliente.
05
Hojas de estilo
También llamadas diseños de página. Formato
añadido a un archivo
HTML que contiene el
esquema maestro del
aspecto del documento.
Especifica márgenes,
fuentes, tamaños, pies
de página...
06
Script
Conjunto de instrucciones
pensado para que los ejecute otro programa y no
el procesador. Hay lenguajes de programación,
como JavaScript, concebidos como “lenguajes
script” y con los que se
escriben programas para
páginas web.
�
Nº 126
73
Curso: Creación de páginas web en HTML, 1ª parte
4
A continuación, pulsa
dos veces en el icono
para ver el resultado:
Como puedes ver, el texto
se interrumpe en los lugares en los que se ha colocado el símbolo <br>.
5
Existe una forma más
sencilla de lograr que el
texto se muestre de manera
“ordenada”en la pantalla.Las
etiquetas <p> y </p> se ocupan de que los textos más
largos se dividan automáticamente en párrafos.Así que
borra todas las instrucciones
<br> e introduce al comienzo y al final de cada frase dichas instrucciones.
8
12
Puedes controlar el tamaño del titular por
medio de la cifra que contiene la etiqueta. Así, si en
lugar de <h1> y </h1> introduces <h3> y </h3>, la línea será más pequeña:
Repite el paso 6 y
observa ahora el resultado:
En lugar del tag <ul>, también puedes utilizar <ol>. El
resultado sería una lista numerada:
Pincha detrás de </h1>
o </h3> –en función del
que hayas decidido usar– y
presiona C. Introduce <hr>
y presiona de nuevo C .
Con HTML también
puedes configurar el
tipo y el color de la fuente.
Vuelve a modificar el código fuente del documento de
esta forma:
9
10
Cuando ahora repitas el paso 6 verás
que con ello aparecerá una
fina línea debajo del titular:
13
6
Presiona la tecla ¡ y,
sin soltarla, pulsa en la
letra g para guardar así los
cambios.A continuación ve
a la ventana del navegador
y aprieta en el icono
o sobre la tecla 5 para actualizar la página. Observa como
ahora el texto se divide “él
solito”, de forma clara, en
distintos párrafos.
La longitud de las líneas
quedará fijada por el ancho
de la ventana:
11
Vas a seguir probando distintos tipos de
formato.Así que modifica el
texto de esta forma:
Por medio de la etiqueta
<ul> introduces lo que se
denomina una lista. Cada
uno de los elementos independientes de esta lista
14
7
Éstas no son, ni mucho
menos, todas las posibilidades que tienes para
editar textos. Por ejemplo,
con <h1> y </h1> puedes
resaltar titulares. Pruébalo.
Sustituye los tags <p> y
</p> (antes y después de la
línea de bienvenida) por
<h1> y </h1>. Repite el paso 6 para de este modo
guardar todos los cambios
que has realizado y actualizar la página:
se marcan por medio de la
instrucción <li>, y ésta se
cierra con </ul>.
Por medio de <font
face “Courier”> se
modifica la fuente del texto
situado a continuación, y
hasta la etiqueta </font>. Si
olvidas añadir esta última,
la edición afectará a todas
las líneas hasta el final del
has utilizado la orden <font
color = “aqua”>.Para especificar el color puedes utilizar un
“alias”, como en este ejemplo,o su código hexadecimal.
En este caso, la instrucción
sería <font color=”00ffff”>
Puedes ver algunos de ellos
documento. Con las instrucciones <b>, </b>, <i> e
</i> puedes hacer que los
textos se muestren en negrita y en cursiva.
en el recuadro situado en la
siguiente página.
15
74
Para modificar también el color del texto
Nº 126
16
Repite el paso 6 para guardar el archivo
y actualizarlo.Tu página ahora debe tener más o menos
este aspecto:
17
Y para terminar, puedes incluir un “último retoque”, añadiendo una
gran letra mayúscula al principio del párrafo, lo que se
denomina una letra capitular.Para ello debes modificar
el código de esta forma:
Asegúrate de incluir la letra
que quieres “engordar” entre las dos etiquetas.
18
Repite de nuevo el paso 6 y observa el resul-
tado:
¡Enhorabuena! ¡Ya has creado
tu primera página web!
En la siguiente entrega del curso te enseñaremos, entre otras
cosas, cómo puedes insertar archivos de imágenes en un documento HTML.
El color en la web
Nº 126
#00ffff
#000000
#0000ff
#ff00ff
#808080
#008000
#00ff00
#800000
#000080
#808000
#800080
#ff0000
#008080
#c0c0c0
#ffffff
#ffff00
�
aqua
black
blue
fuchsia
gray
green
lime
maroon
navy
olive
purple
red
teal
silver
white
yellow
Los “alias” suelen ser, simplemente, el nombre del color en
inglés. Si no conoces alguno,
puedes intentar traducirlo. Por
ejemplo, si no conoces el alias o
el código del naranja, prueba
con “orange” (por cierto, en este
caso habrás acertado).
Respecto al valor hexadecimal,
es posible emplear un programa
de retoque fotográfico, como
Photoshop o Paint Shop Pro. Su
paleta de colores te mostrará el
código hexadecimal de cualquier
matiz que quieras emplear:
75
Curso HTML, 2ª parte
cuidado.Asegúrate antes de
que se trata de imágenes
gratuitas, de las que puedes
disponer libremente, o pídele autorización al “propietario intelectual” antes
de publicarlas.
¿Pueden estar
en cualquier
formato de imagen?
No. La imagen debe estar
en formato GIF 01 (pág. 62)
o JPEG 02 (pág. 62) . Es la
única forma de asegurarte de
que se muestre correctamente con cualquier navegador. Se trata de formatos
que permiten almacenar la
imagen de forma comprimida, es decir, archivos que no
requieren usar mucha memoria. La ventaja de esto es
muy clara. Se pueden transferir más cómodamente a
través de Internet, y ocupan
mucho menos espacio en el
servidor web en el que esté
alojada la página. JPEG se
pueden representar hasta
16,7 millones de colores distintos, mientras que GIF sólo consigue 256 colores.Además,a diferencia del anterior
no permite utilizar distintos
niveles de compresión. Por
eso JPEG es el más usado para fotos y en general imágenes que requieren cierta calidad.GIF tiene también sus
ventajas,ya que permite crear imágenes en movimiento
y usar fondos transparentes.
Para ambos casos es válido un último consejo. Intenta buscar el equilibrio
entre tamaño y calidad de
la imagen. Ésta se resentirá
si reduces demasiado la resolución 03 (pág. 62) para
ahorrar espacio.
¿Cómo lograr
imágenes en
movimiento?
Te será posible tanto descargar los GIF animados
04 (pág. 62) de forma gratuita desde Internet como crearlos tú mismo.
Colocar y organizar
las imágenes en la página
En este apartado te vamos
a enseñar cómo se insertan
imágenes en una página
web, y también cómo organizarlas.Para ello seguiremos
usando la página dedicada a
El Puerto de Santa María,que
ya creamos en la anterior entrega del curso.
1
Si quieres que tu página web le llame la atención a alguien más
que a amigos y familiares tendrás que darle un poco de “sabor”.
Nada mejor que unas cuantas imágenes para animarla un poco.
Colocar y organizar
las imágenes
en la página
Modificar el fondo
de una página web
Hacer que las
imágenes cambien
Trucos
60
A
60
62
63
64
nadie le gusta ver páginas web en las que sólo
haya texto.Ya no estamos en la “prehistoria” de
Internet, ahora prima todo
lo “multimedia”, y cuanto
más,mejor. Por suerte, es
muy sencillo añadir fotos y
todo tipo de elementos gráficos a un documento HTML
y de este modo darle un aspecto mucho más atractivo.
¿Qué imágenes
puedo utilizar?
En principio, cualquiera.
Desde fotos que has hecho
con una cámara de carrete
y que has digitalizado con
ayuda de un escáner a las
que hayas descargado en tu
disco duro desde tu cámara digital o desde Internet.
En este último caso, ten
Nº 127
Antes de empezar a trabajar en el documento
HTML,asegúrate de disponer
de las imágenes que vas a
usar.Si se trata de tus propias
fotos, esto no supondrá ningún problema, tan sólo asegúrate de que no “pesan”demasiado para colgarlas en
Internet. Si no, hay muchas
webs en las que encontrarás
imágenes que puedes descargar de forma gratuita y
usar en tu propia página. La
siguiente URL 05 (pág. 62)
http://spain.linkworld.ws/Web
masters/Recursos/Galerias_de_
Imagenes/ contiene enlaces a
muchas de ellas.
2
Para bajarlos, una vez
cargada la imagen en el
navegador, haz click encima
de ella con el botón dere-
cho del ratón y pincha en el
menú que se despliega sobre
. Selecciona para almacenar los archivos de imagen la misma
carpeta donde guardaste el
documento HTML en el que
estás trabajando, es decir, .
Dale un nombre, por ejemplo
, y cierra la ventana apretando en
. Repite el proceso
–evidentemente, dando a
los ficheros un nombre diferente– con todas las fotos
que pretendas emplear.
3
Ahora ya puedes seguir
con la construcción de
la página.Abre la carpeta
y haz click con el botón derecho encima de .
A continuación sitúa el cursor encima de la entrada llamada
y, en la lista
Curso HTML, 2ª parte
que se despliega, pincha sobre el icono del Bloc de Notas de Windows:
4
5
Aprieta la tecla
,
manténla presionada y
pulsa la tecla G . Con ello
guardarás todos los cambios realizados ahora en el
código fuente.
6
Comprueba el resultado con un doble click
encima del icono
para que así el navegador
muestre tu página:
7
Para que el texto recorra las imágenes, en vez
de dejar espacios en blan-
co a su lado, escribe la instrucción align=left justo detrás de “imagen1.jpg” e
“imagen3.jpg” de modo que
la etiqueta quede de este
modo:
Detrás de “imagen2.jpg” escribe align=right.
número. En caso de que haya texto debajo o por encima de una imagen, puedes
utilizar la instrucción vspa
ce,indicando del mismo modo que antes el espacio que
quieres dejar.
10
11
Por medio de la cifra
introducida detrás
de hspace puedes determinar la distancia respecto a la
imagen, que será mayor
cuanto más elevado sea el
También se puede
especificar el tamaño de la imagen. Para ello
modifica el texto como sigue:
Por medio de height=150
8
Graba a continuación
las modificaciones como hemos descrito en el
paso 5 . Para hacerlas visibles en la página, debes actualizarla. Para ello
haz click una vez en
el icono ,
o bien aprieta la tecla ¶ :
9
Desgraciadamente, si lo
haces de este modo el
texto queda demasiado pegado a la foto. La buena noticia es que esto se puede
cambiar de forma muy sen-
determinas la altura de la
imagen. El navegador calcula automáticamente la anchura manteniendo las proporciones. Si especificas el
ancho, la altura es la que se
calcula de forma automática. Para el ancho se emplea
la instrucción width. Naturalmente, también es posible determinar ambos valores, pero con ello puede
ocurrir que la imagen aparezca distorsionada:
�
Ahora modifica el código fuente de la siguiente forma:
Vamos a dar un “repaso”a las
etiquetas, aunque ya las conozcas de la anterior entrega del curso. Con <html> se
especifica el comienzo del
documento,que finaliza con
</html>. Las instrucciones
<head>, </head>, <title> y
</title> comprenden la cabecera y el título de la página.<h1>, </h1>, <h3> y
</h3> se utilizan para crear
titulares de distinto tamaño.
Entre los “tags” <body> y
</body> se encuentra el texto que luego se leerá en la
página. <p> y </p> se encargan de los saltos del texto.Lo único nuevo son las líneas resaltadas en color
amarillo. Con <img src =
“imagen1.jpg”> se carga la
primera foto en la página.
<img informa al navegador
de que se debe insertar una
imagen. La instrucción src =
“Imagen1.jpg” determina
dónde se encuentra la imagen. Se trata de una ruta “relativa”. Si no especificas nada más, significa que el
archivo debe estar en la misma carpeta que el documento HTML.También puedes especificar una ruta
“absoluta”escribiendo la dirección completa de un fichero situado en una carpeta diferente en el disco
duro o en el servidor. Las
otras imágenes se añaden
con las instrucciones <img
src = “imagen2.jpg” e <img
src = “imagen3.jpg”>
cilla. Detrás de las instrucciones introducidas en el
paso 7 añade ahora hspa
ce=7, de manera que queden así:
Repite los pasos 5 y 8 para
comprobar el resultado:
Nº 127
61
Curso HTML, 2ª parte
01
GIF
Graphics Interchange Format, o Formato para Intercambio de Gráficos desarrollado por Compuserve.
Usa el algortimo LZW para
comprimir los datos.
02
JPEG
Estándar de compresión
de imagen que permite
usar distintos tipos y niveles de compresión de
los datos. El término se
emplea también para denominar a los archivos
gráficos creados usando
este formato.
03
Resolución
Término usado para indicar la cantidad de puntos
que componen una imagen. Se empleanormalmente como principal indicador de la calidad de
éstas o de los dispositivos
relacionados con ellas.
04
GIF animado
Hay dos versiones del formato GIF, la 87a y la 89a.
La segunda permite
transparentar uno de los
colores y adquirir el del
fondo de la ventana o página situada debajo, y
crear GIFs animados. Éstos son secuencias formadas por varias imágenes guradadas en un
único fichero GIF y que
dan sensación de movimiento al mostrarse unas
detrás de otras.
05
URL
Uniform Resource Locator,
o Localizador Uniforme de
Recursos. Ruta completa
para localizar un archivo
en la Red, su dirección de
Internet. Su sintaxis es primero el protocolo (http, ftp,
etc.), luego el nombre de
dominio y finalmente la
ruta del fichero en el ordenador que lo aloja.
06
Script
Conjunto de instrucciones
pensado para que los ejecute otro programa y no
el procesador. Son muy
usados en la creación de
páginas web.
62
12
13
Repite los pasos 5 y
8 para comprobar el
resultado:
Las imágenes animadas se insertan
exactamente de la misma
forma. El “movimiento” es
una característica del archivo, no hay que insertar
código HTML. Puedes descargar un GIF animado desde Internet. Encontrarás
muchos gratuitos en la dirección www.gifmania.com
14
Carga la página y selecciona, por ejemplo, la sección
. Luego pincha en
para
ver las imágenes disponibles:
anteriores. Pero no vamos usarlo en nuestro
ejemplo. En su lugar,
insertaremos nuestra
propia animación, que
hemos creado en el
truco de la página 64.
16
A continuación
modifica el código fuente de la siguiente forma:
Una imagen móvil se in-
15
1
Primero hay que procurarse una imagen. De
nuevo se te presentan varias alternativas a la hora de
conseguirla. Es posible recurrir a Internet y descargarla de alguna de las direcciones que te hemos
proporcionado, o bien puedes crearla tú mismo tal y
como te mostramos en la
página 66. Una vez la tengas, guárdala en la carpeta
terior y comprueba qué tal
ha quedado:
Como ves, la imagen ocupa
por completo el fondo de la
2
Vuelve a la ventana del
Bloc de Notas y añade
las siguientes instrucciones:
Como ves, se consigue que
el navegador reconozca la
imagen como un fondo de
página por medio de background.A su derecha se indica el nombre de la imagen, en este ejemplo así:
=“fondo.jpg”.
3
17
Vuelve a repetir los
pasos 5 y 8 para ver
cómo ha quedado:
Pulsa encima de
una de ellas con el
botón derecho y haz click
en
. Dale
el nombre que quieras
y guarda el fichero
en la misma carpeta que los
Modificar el fondo de una página
En este apartado te enseñamos a añadir un fondo a
tu página web.
serta en la página de la misma forma que una imagen
“normal”. La instrucción
align=left se ocupa de que la
imagen aparezca a la izquierda, al lado del titular.Y
también puedes ajustar su tamaño para que “encaje”tal y
como tú quieras.
Ahora repite los pasos
5 y 8 del apartado anNº 127
página, quedando el texto y
las imágenes por delante.
4
Si no se ven bien las letras debido al color del
fondo empleado, recuerda
que puedes modificar tan-
to éste como el tamaño y tipo de la fuente usada. También es posible hacer que
algunas partes se vean subrayadas mediante las etiquetas <u> y </u>. Por medio de size se determina el
grosor de la línea creada con la
etiqueta <hr>. Para eliminar la
sombra de ésta se utiliza la instrucción noshade, literalmente “sin
sombra” en inglés:
5
Repite de nuevo los pasos 5
y 8 del apartado “Colocar y
organizar imágenes en la página”
para de este modo poder ver el
resultado de tu trabajo:
Hacer que las imágenes cambien
Seguro que te has fijado en que
muchas páginas web incluyen
imágenes que cambian al pasar el
cursor del ratón por encima. Se
Justo detrás de onMouseOver especificas la imagen que quieres
que se muestre al pasar el ratón
por encima.
trata de los “rollovers”, uno de los
efectos más vistosos que se pueden incluir en un documento
HTML sin necesidad de “saber
programar”o de recurrir a scripts
06 elaborados por otros.
3
Añade el siguiente código .
para indicar la imagen “en reposo” por medio del modificador
onMouseOut, de modo que la línea
quede de esta forma:
1
4
Vas a ver lo fácil que resulta.
Para probarlo, puedes modificar la etiqueta de una imagen que
ya hayas insertado anteriormente, por ejemplo
2
A continuación añade la siguiente instrucción:
Para terminar, repite por último los pasos 5 y 8 del apartado “Colocar y organizar imágenes en la página” y comprueba
cómo cambia la imagen:
En la próxima entrega del curso
te enseñaremos a añadir enlaces.
�
Nº 127
63
Curso. Creación de páginas web
en HTML, 3ª parte
llamda
y pincha en
la lista que se despliega en
2
Añadir enlaces a
un documento HTML
Utilizar cascading
stylesheets
76
78
T
endrás que reconocerlo.
La página ha mejorado
ya muchísimo desde que
comenzó este curso. ¿Quieres conseguir llamar todavía más la atención de tus visitantes? Entonces añade
algunos hipervínculos 01 ,
también llamados vínculos,
enlaces o links. Con ellos
podrás tener cientos de páginas en una sola. ¿Cómo? Si
haces click encima de uno
de ellos, se mostrará en la
ventana del navegador la
web a la que esté vinculado.
También se emplean para
las descargas de software,
enlazando el correspondiente archivo.Y si el navegador no es capaz de ello,
éste “llama” a la aplicación
adecuada para hacerlo.
En este artículo te enseñamos a colocar hipervínculos en tu página web, y a
Principios y estructura básica de HTML
Imágenes y gráficos animados
Enlaces y hojas de estilo
Tablas y marcos
76
Una de las cosas más “divertidas” de navegar por Internet es ir
“saltando” de página en página. ¿Quieres que los visitantes de
la tuya puedan hacerlo? Te enseñamos a usar los hipervínculos.
utilizar las llamadas cascading stylesheets 02 , u hojas de estilo en cascada.
Añadir enlaces
a un documento HTML
¿Qué es una
hoja de estilo?
Es un formato añadido a
un archivo de texto, HTML,
etcétera, que contiene el esquema maestro de diseño
del documento. Entre otros,
se pueden aplicar estilos al
tipo, tamaño y color de
fuente, a la forma del texto
(cursiva, negrita o subrayado), ajustar el texto (alineado a la izquierda, a la derecha o centrado), modificar
la separación de líneas o de
palabras, la forma del cursor y el color del hipervínculo, la imagen o el color
del fondo. A un usuario le
será posible definir una hoja de estilo para cartas personales, otra para documentos formales..., todas las
que sean necesarias.
Nº 126
Nº 127
Nº 128
Nº 129
En este apartado te mostramos cómo añadir un hipervínculo a una página web
por medio del lenguaje
HTML. Para ello ahora vas a
seguir ampliando el documento de ejemplo que hemos utilizado en las anteriores entregas del curso.
1
En dicha página web hablábamos de El Puerto
de Santa María. Parece natural ofrecer a los visitantes
Nº 128
enlaces a otras páginas web
y recursos sobre la ciudad.
Para ello, abre primero la
carpeta en la
que guardaste
todos los archivos usados hasta ahora
luego haz click
con el botón
derecho encima de ,
a continuación coloca el
cursor sobre la entrada
Modifica de este modo
el código fuente 03
del documento:
Los hipervínculos suelen
mostrarse en azul para destacarse sobre el fondo. Como a veces el color de éste
hace que no se vea claro el
enlace, puedes modificarlo
por medio de la instrucción
link=navy Del mismo modo,
alink=red tiene como efecto
que el link, al hacer click en
él, aparezca en rojo.Y cuando haces click sobre el hipervínculo, vlink=teal se
ocupa de que aparezca en
verde oscuro indicando que
ya has pinchado en él. La
etiqueta <a> introduce el
enlace en el documento. La
dirección se pone detrás de
href=. Antes de la etiqueta
</a>, con la que se cierra la
línea, aparece el texto que
se mostrará en la página,
“encima” del hipervínculo.
Finalmente, por medio de
<center> se mostará en la
mitad de la ventana.
3
Aprieta , y, sin soltarla, pulsa también la tecla G ,para que así se guarden todos los cambios en el
fichero HTML.
4
Comprueba
cómo han
quedado los
cambios. Otra
vez en
Curso: Creación de páginas webTrucos:
en HTML,
Lo que
3ª parte
seriese
Como puedes ver aquí ,
emplear la barra de desplazamiento de la ventana para verla entera. Puedes emplear un sencillo truco para que los visitantes de tu
web no tengan que hacerlo. Basta con que añadas hipervínculos que remitan a
la parte inferior del documento, los llamados saltos
de página. Modifica el código HTML de la siguiente
forma:
haz doble click encima de
para que se abra
la web en una ventana del
navegador de Internet:
En tu página ahora aparecen tres hipervínculos:
02
5
El cursor tomará el
aspecto de una mano
cuando lo lleves encima de
un enlace:
Haz click una vez en el hipervínculo y mantén el botón presionado. El texto
aparece de color rojo:
Cuando sueltes,y si estás conectado a Internet, se abrirá la página “vinculada”:
6
Para volver a tu página
pincha en
Fíjate en que el enlace sobre el
que has hecho click aparece
en ahora en color verde:
7
que se abra al pinchar encima del vínculo. Para poner
un enlace “detrás” de las
imágenes, modifica ahora el
texto en el editor de la siguiente manera:
8
Con la instrucción adicional border=0 evitarás
que la imagen se enmarque
con una línea. Si quieres insertar un marco, omite la
instrucción o bien modifica
la cifra que hay dentro del
paréntesis. Cuanto mayor
sea ésta, más grueso aparecerá el marco. Por ejemplo,
con el valor
se
mostraría de esta forma:
ahora el cursor adopta la
forma de una mano cuando
lo colocas encima de una
de las imágenes.
10
Muchas de las páginas web que podemos encontrar por Internet resultan “demasiado
grandes” para que se puedan mostrar completas en
la pantalla del ordenador.
Normalmente es necesario
9
Repite el paso 3
para guardar los
cambios, y actualiza
la imagen apretando en
o presionando ¶.
11
Como ves, has eliminado las instrucciones que organizaban las
imágenes en la ventana. Por
medio de name= “arriba” y
de name= “abajo” se muestran los puntos de salto. Las
instrucciones href= “#arriba” y href= “#abajo” son los
links que remiten a ellos.
Ahora repite el paso 3 para
que así se salven de este
modo todos los cambios.
Hipervínculo
Cascading
Stylesheets
Aunque su traducción
más exacta sería algo parecido a “diseños de página sucesivos en cascada”, normalmente se usa
la expresión “hojas de estilo en cascada”, o directamente las siglas CSS.
Es un formato añadido a
un documento HTML que
permite, tanto a usuarios
como a administradores
de una página web, un
mayor control acerca de
cómo se muestra la página. Estos diseños es posible aplicarlos a cualquier documento. La
expresión “en cascada”
procede de que sólo hay
que especificar la hoja de
estilo en el primer documento HTML para que se
aplique de forma sucesiva en todas las páginas
de la web, sin necesidad
de escribir el código en
todas ellas.
03
Código fuente
Instrucciones y expresiones de un programa tal y
como fueron escritas por
el programador en un lenguaje determinado.
04
URL
Uniform Resource Locator,
o Localizador Uniforme de
Recursos. Ruta completa
para localizar un archivo
en la Red, su dirección de
Internet. Su sintaxis es,
primero el protocolo (http,
ftp, etc.), luego el nombre
de dominio (.com, .org .es,
etc.), y finalmente la ruta
del fichero en el ordenador
que lo aloja.
�
Si quieres, puedes usar
enlaces en vez de mostrar las imágenes en la página. Para ello será necesario
que modifiques el código
HTML del documento. En
lugar de una URL 04 , introduce, sencillamente, la ruta
del servidor (o del disco duro) donde se encuentra el
archivo gráfico que quieres
01
Enlace predefinido que
vincula dos objetos distintos. Éstos pueden ser
tanto zonas de un mismo
documento como archivos completamente distintos. En la actualidad, se
asocia casi exclusivamente con aquella parte
de una página web que
conduce a una página diferente si se pulsa encima de él.
Nº 128
77
Curso. Creación de páginas web en HTML, 3ª parte
cer uso de los nuevos hipervínculos.
Cuando hagas click
en el hipervínculo
o encima
de
la web
“salta” hacia arriba
y hacia abajo.
14
12
Regresa al navegador y presiona la tecla ¶ para actualizar la página. Como ves, no es posible ver la página entera:
13
Puedes utilizar la barra de desplazamiento de la derecha para mover
la página hacia abajo. Pero
es mucho más sencillo ha-
También es
posible hacer que te envíen
mensajes de correo electrónico sin que el
visitante tenga necesidad
de saber tu dirección email.
Para ello modifica el código
de la siguiente
forma:
Naturalmente,
tienes que sustituir la dirección
por la tuya.
15
Repite el paso 3 y
luego pulsa la tecla
¶ . Si pinchas encima del
nuevo enlace
se ejecutará el cliente de
correo electrónico del visitante:
Utilizar Cascading Stylesheets
Hasta ahora, cuando has
querido modificar el estilo
del documento, tenías que
añadir las nuevas instrucciones del formato en cada
línea afectada. Existe una
forma de evitarlo, las “hojas
de estilo en cascada” o Cascading Stylesheets.:
1
Primero, modifica el código HTML de la siguiente forma:
Puedes quitar todas las instrucciones font del documento. Esto es algo que se
logra mediante el uso de
Cascading Stylesheets.
4
Si ahora haces click encima del hipervínculo
, podrás comprobar
que el estilo de los enlaces situados abajo no se han visto
afectados por el cambio.Esto
se debe a las instrucciones
link=navy y vlink=red, y también a que el hipervínculo
está situado entre las etiquetas <p> y </p>.
5
Con el modelo de “Clases” es mucho más sencillo. Modifica el código de
esta forma:
Y también de esta otra para
añadir una “despedida”:
Por medio de la instrucción
.final has creado un nuevo
modelo, una clase o class,
que contiene estilos con los
que será posible formatear
una parte del texto. Como,
por ejemplo, con la línea <p
class=final >
2
El “formateado” se inicia con <style type =
“text/css”> p, h1, h3. Esto
significa que los estilos que
aparecen a continuación se
aplicarán al texto que está
dentro de estas etiquetas.
Todo lo que se encuentre
entre <p> y </p>, <h1> y
</h1>, y <h3> y </h3> debe
aparecer en el color black,
en el tamaño 10pt y en la
fuente Arial. Los especificados para los titulares son
navy y green, en los tamaños
20pt y 12pt. La letra Arial es
la misma del primer estilo.
6
3
Aprieta en la tecla
,
mantenla presionada y
pulsa ahora sobre la tecla G.
Vuelve a la ventana del navegador y aprieta la tecla ¶
para que se actualice. La página debe tener ahora más o
menos un aspecto como
éste:
78
Nº 128
�
Repite el paso 3 y luego pincha encima del
hipervínculo
.
La última línea ha adquirido
ahora el estilo de la nueva
clase:
Así puedes resaltar los textos
de forma individual y ahorrarte el tiempo que de otro
modo pasarías escribiendo
instrucciones “extra”.
En la próxima y última parte de este curso de HTML
aprenderás, entre otras cosas, cómo publicar tablas en
una página web y también
cómo usar marcos o “frames”. Éstos te permitirán
abrir y visualizar diferentes
páginas web en una sola
ventana del navegador, que
se “dividirá” para ello.
Curso: Creación de páginas web en HTML, 4ª parte
Con la etiqueta [table] se empieza la tabla. Cada línea se
inicia por emdio de [tr] y se
cierra con [/tr]. Para las entradas de la primera línea, la
que contiene las cabeceras
o títulos de cada columna,se
utilizan las instrucciones [th]
y /[th],y para las distintas entradas de cada fila [td] y [/td].
El color de fondo las celdas
se modifica con las instrucciones [bqcolor="aqua”] y
[bqcolor=”yellow”]. Por último, el comando [cellpadding=5] se emplea para definir la distancia entre el texto
y las líneas de la tabla.
3
Diseñar una tabla sencilla 98
Organizar el contenido
de una web con una tabla 99
Usar marcos
99
Caracteres universales 100
C
on sólo usar adecuadamente algunos recursos
te será muy fácil ordenadore el contenido de tu
web. Así, los visitantes se
orientarán enseguida y podrán encontrar fácilmente
lo que buscan. Lo mejor para ello es que emplees tablas
y marcos.En esta entrega del
curso, la última, te enseñamos a hacerlo.
¿Para qué se usan
las tablas?
Te ayudarán a organizar
los contenidos. Una tabla está formada por filas y columnas. En la intersección
de éstas hay campos independientes,llamados celdas,
que, que pueden rellenarse
de datos, colores y motivos
Principios y estructura básica de HTML
Imágenes y gráficos animados
Enlaces y hojas de estilo
Tablas y marcos
98
Construir una págna web no es sólo ir añadiendo contenidos “sin
ton ni son”. Hay que hacerlo de forma organizada, cuidando que
todo esté en sus sitio. Las tablas y los marcos te serán de ayuda
de fondo. Además, puedes
utilizar una tabla para crear
un sumario o índice para la
web completa.
¿Qué son
los marcos?
Los marcos o “frames”son
cada una de las “subventanas” en las que se puede dividir el navegador para mostrar en cada una de ellas un
documento HTML diferente. De este modo puedes,
por ejemplo, usar un marco
para el sumario, otro para
los hipervínculos y otro para los contenidos, ya procedan de la misma web o de
una dirección de Internet
distinta.
Respecto a cuántos frames
se deben usar, es una cuestión de gusto.Aunque con
más de tres o cuatro la página queda poco clara.
Diseñar una tabla sencilla
En este apartado aprenderás a organizar unaso cunatos datos medio de una sencilla tabla y posteriomente
a incluirla en tu página web.
1
Abre el Bloc de Notas de
Windows. Para ello haz
click en el botón
,
luegopincha encima de la
entrada llamada
A continuación introduce el
comando
y haz click sobre encima del
botón
.
Nº 126
Nº 127
Nº 128
Nº 129
Nº 129
2
Escribe las siguientes líneas en la ventana:
Guarda el nuevo documento HTML en tu disco duro. Para ello, pincha en
el menú
y, en la lista que se despliega, sobre
Dirígete a la carpeta en
la que estás copiando todos los archivos a lo largo del curso
introduce el nombre del fichero,
,
y aprieta encima del botón
.A continuación cierra el programa pulsando
4
Para abrir la página, abre
y haz doble click
sobre el icono
Así el navegador
mostrará la tabla
Curso: Creación de páginas web en HTML, 4ª parte
Organizar el contenido de una web por medio de una tabla
4
En cuanto a la línea,
hemos empleado por
primera vez una “entidad”
para representar caracteres
no especificados en la norma ASCII, en este caso una
vocal acentuada. Encontrarás
más información acerca de
las entidades en el recuadro
situado en la página 100.
5
A continuación, aprieta
a la vez las teclas
y
G para que se guarden las
modificaciones que has introducido en el documento.
6
Así colocas una tabla como
boceto o esquema sobre
una página. Para el ejemplo
sirve el archivo de la anterior parte del curso
1
Aún debes tener abierta
la ventana
del apartado anterior. Si no
es así, ábrela y pulsa con el
botón derecho encima de
luego coloca el
cursos sobre
y haz
click en la lista
que se despliega encima de
la entrada
Ahora vueve
a la carpeta
y pulsa dos veces encima del
icono .
La página de Internet se presentará ahora por
medio de tablas
ordenadamente repartidas
dentro de la ventana del navegador:
2
Modifica el código fuente HTML de la siguiente
forma:
Reconocerás muchas instrucciones de las instrucciones por haberlas usado en
el anterior apartado, pero algunas son nuevas. Por ejemplo, hemos modificado el
esquema de color de algunos elementos, como los enlaces, para que sigan siendo
visibles de forma clara con
el nuevo estilo de la página.
3
Por medio de la instrucción [width=950] se es-
tablece que la máxima anchura de la tabla es de 950
píxeles. La columna de la izquierda tendrá una anchura de 160, expresado con
[width=160]. Para la segunda
columna no se ha indicado
ninguna anchura, lo que significa que su ancho estará
en función del de la primera, o sea 950-160 = 790 puntos. [align=center] sirve para
situar la tabla en el centro
de la ventana.Y la instrucción [valign=top] ajusta el
contenido de la celda hacia
arriba.
Usar marcos
En este apartado te vamos a
enseñar a conseguir que
puedan mostrarse varias páginas en una sola ventana
del navegador.
1
Por medio de la expresión
[target=”Contenidos”] estamos “anticipando acontecimientos” al especificar el
nombre del marco en el que
debe abrirse el documento
vinculado al enlace.
2
Repite el paso 3 del
apartado “Diseñar una
tabla sencilla” para guardar
el nuevo documento. Dale
el nombre de
Nº 129
3
Ahora pulsa dos veces
encima del
icono
y se mostrará
la página con
en una ventana
del navegador:
Si haces click encima de
cualquiera de estos enlaces
se abrirá una ventana diferente del navegador para
mostrar las correspondientes páginas web.
4
Gracias a los marcos esto sucederá sin necesidad de abrir nuevas ventanas. Repite el paso 1 de este
99
�
En primer lugar vas a
crear una página que
servirá de sumario o de índice de tu web. Si has cerrado el editor de texto, repite
el paso 1 del apartado “Diseñar una tabla sencilla”.
Haz click arriba en el menú
y a continuación
sobre la entrada llamada
. Luego introduce el
siguiente texto:
Curso: Creación de páginas web en HTML, 4ª parte
mismo apartado y escribe lo
siguiente:
5
La instrucción [frameset] “informa” al navegador de que debe dividir la
ventana en varias partes. La
forma apropiada de hacerlo
se le indica por medio de
[cols=”150,*”], que quiere
decir que la ventana de la
aplicación se debe partirse
en dos columnas verticales,
la primera con una anchura
de 150 puntos. El asterisco
indica que se debe reservar
el resto para la segunda columna. El comando [border=0] impide que se dibuje
una línea entre los dos marcos. Con las dos líneas siguientes se rellenan las celdas. La primera incluye el ín-
dice, y la segunda la “página
principal”. Con las instrucciones [name=”Lista”] y
de [name=”Contenidos”] se
“bautizan” ambos marcos,
de modo que se pueda usar
sus nombres para que los
hipervínculos sepan con la
columna en que deben
abrirse los documentos.
6
43b7ba
f5f3d7
fde0bc
980517
c85a17
f76541
fff7d7
00ffff
af7817
7d1b7e
4e9258
d4a017
736f6e
5e2217
ffffee
ada96e
e3e4fa
e57ded
faafbe
b93b8f
2b60de
f88158
ee9a4d
4e8975
8a4117
6698ff
fff9fa
f75431
43c6db
52d017
Si ahora haces click
Repite el paso 3 del
apartado “Diseñar una
tabla sencilla” y nombra al
fichero como
.
la tabla se mostrará en la
parte derecha:
A continuación
pincha dos veces encima de
Las ventanas se pueden
subdividir de nuevo,
una columna se puede divi-
7
¿No has encontrado alguna
vez alguna web en la que el
navegador “se hace un lío”?
Para evitarlo se ha definido
unos códigos y unos nombres
llamados entidades, que representan los caracteres espeCaracter
!
#
%
'
)
+
/
;
=
?
[
]
{
}
_
_
Ú
ú
ü
Código
!
#
%
'
)
+
-
/
;
=
?
[
]
{
}
 
²
¼
Ú
ú
ü
Entidad
---------------nbsp
sup2
frac14
Uacute
uacute
uuml
dir en filas horizontales. Modifica de esta forma el código fuente:
El segundo marco, por medio de la línea [rows=”50,*”],
se “parte” en dos filas horizontales. La primera tiene 50
puntos de ancho, el resto se
reserva para la segunda fila.
9
Aprieta la tecla
y
ambién la G para guardar todos los cambios.
definen los enlaces: .
A continuación, guarda todos los cambios y cierra el
Bloc de Notas pinchando
encima de .
13
Haz click dos veces
s o b re
el icono
Se iniciará el
n a v e g a d o r,
que en la parte superior mostrará los tres
8
10
Caracteres universales
Para gustos...
Aquamarine
Beige
Bisque
Brown
Chocolate
Coral
Cornsilk
Cyan
DarkGoldenrod
DarkOrchid
ForestGreen
Gold
Gray
IndianRed
Ivory
Khaki
lavender
Orchid
Pink
Plum
RoyalBlue
Salmon
SandyBrown
SeaGreen
Sienna
SkyBlue
Snow
Tomato
Turquoise
YellowGreen
para ver el resultado:
ciales y permiten mostrarlos
“tal cual” en cualquier documento. Las entidades comienzan con el símbolo ampersand
[&] y terminan con un punto y
coma [;]. Aquí puedes ver algunas de las más importantes:
Caracter
"
&
(
*
,
.
:
_
¿
Á
Ç
É
Í
Ó
á
ç
é
í
ñ
ó
÷
Código
"
&
(
*
,
.
:
¹
¿
Á
Ç
É
Í
Ó
á
ç
é
í
ñ
ó
÷
Entidad
-------sup1
iquest
Aacute
Ccedil
Eacute
Iacute
Oacute
aacute
ccedil
eacute
iacute
ntilde
oacute
divide
Sólo falta ahora el
archivo que debe
aparecer en la primera fila
de la segunda columna. Repite el paso 1 e introduce lo
siguiente:
Con la instrucción [ ]
se introduce un espacio en
blanco entre los distintos
enlaces, que se mostrarán
en la misma línea.
11
Repite de nuevo el
paso 3 y guarda el
archivo con el nombre
12
Como hemos situado los tres hipervínculos en una columna extra,
ahora podemos eliminarlos
de la página principal. Para
ello borra en
las tres filas en las que se
nuevos vínculos
14
Si haces click en
cualquiera de ellos
aparecerá la página de Internet en la misma ventana:
Esto es todo. Dándote a conocer los fundamentos del
HTML, te hemos mostrado
la puerta para la programación de páginas web.Ahora
eres tú el que debes cruzarla. Por que ahora puedes
hacerlo.
�
100
Nº 129
© Copyright 2024