Curso Computer Hoy - Creación de Páginas Web en HTML

Curso: Creacin de pginas web en HTML, 1 parte
s misma aparece entre estos smbolos.As, por ejemplo, los tags <html> y </html> caracterizan el principio y el final de un documento HTML. Es posible ver el cdigo fuente 02 HTML de prcticamente cualquier pgina web que visites en Internet. Para ello slo necesitas ejecutar el navegador, y abrir una pgina cualquiera, por ejemplo la web de nuestra revista www.computerhoy.es Debajo de esta fachada se esconden muchas instrucciones HTML, que podrs ver si haces click en y en . Con ello se abrir un editor que mostrar la pgina por dentro. En sta y en las siguientes tres entregas de este curso te ensearemos a usar estas etiquetas para hacer tu propia pgina web. En las capturas de los ejemplos hemos resaltado, para mayor claridad, las etiquetas que se comentan en cada caso.
A qu ests 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! Cmo? Que no sabes? Pues ya no tienes excusa. Te enseamos en este nuevo curso.
Qu es HTML?
Principios y estructura bsica de HTML Imgenes y grficos animados Enlaces y hojas de estilo Tablas y marcos N 126 N 127 N 128 N 129
Tu primera pgina web Modificar el estilo del texto El color en la web
73 73 75
lista de ejemplos puede ser interminable. Lo mejor es que no necesitas prcticamente 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 disean las pginas web. Por ejemplo, determinar en qu lugar del documento se deben ver las imgenes,los textos o los grficos. Con HTML se puede tambin dar formato a los tex-
tos, es decir, configurar el tipo, el color y el tamao de la fuente.Los archivos HTML se reconocen por la extensin html o htm.
Qu voy a necesitar?
Para escribir cdigo fuente es suficiente un sencillo editor de texto,como el Bloc de Notas. Para comprobar que estn bien y, naturalmente, para ver las pginas, necesitas un navegador. Y para colgarla tienes que disponer de una conexin a Internet, de espacio en un servidor web 03 y del software necesario para enviarle los archivos.
Cmo son los comandos HTML?

Las instrucciones HTML se conocen como tags o etiquetas. Siempre comienzan con el signo < y terminan con >. La instruccin en
romas aparte, lo de hacer una pgina web no es ninguna tontera. Puede ser muy prctica para muchas cosas. Dar publicidad a tu negocio, o incluso para hacer ventas a travs de ella, publicar tus propios artculos y relatos, tener al da a tus familiares y amigos de todas las novedades que se produzcan en tu vida... la
Puedes hacer la prueba. Abre con cualquier navegador de Internet una pgina web y selecciona en el men Ver la opcin Cdigo fuente. Se abrir un editor que te mostar las tripas del documento.
N 126
72
Tu primera pgina web

La mejor forma de empezar este curso es, por supuesto, disear una pgina web.Y eso es ni ms ni menos lo que vas a hacer. La instruccin <html> se coloca siempre al principio de un documento HTML. Entre las etiquetas <head> y </head> est la cabecera de la pgina web. En ella se introduce la informacin que normalmente no aparece al visualizarlo, como hojas de estilo 05 , scripts 06 , etc. O el nombre de la pgina, que debe situarse entre los tags <ti tle> y </title> y que luego se mostrar en la Barra de ttulo de la ventana del navegador. El cuerpo de la pgina, el texto que se ver al abrir el documento, est limitado por las instrucciones <body> y </body> que
sirven de lmites al texto que luego se leer en la pgina.Al final debe aparecer la orden </html>, que cierra el archivo HTML. Ahora guarda el archivo. Para ello pulsa en el men y a continuacin en la lista que se despliega en . Si quieres almacenarlo en una nueva carpeta, escoge su ubicacin, pincha sobre el icono , y a continuacin dale un nombre, por ejemplo , y aprieta C . Ahora haz click encima de la flecha y selecciona en la lista la entrada .
1 2
Lo primero es abrir un editor de texto. El Bloc de Notas de Windows te servir a la perfeccin. Haz click en y luego encima de . Escribe dentro del campo de texto la expresin y aprieta la tecla C . Ahora tienes que escribir el cdigo fuente de la pgina. Introduce las siguientes lneas en la ventana del editor:
4 5 6
Luego escribe en el campo de introduccin de datos al efecto el nombre y extensin que quieras darle al archivo, , y luego pulsa encima del botn llamado . Cierra el Bloc de Notas pinchando sobre el botn . Finalmente, dirgete a la carpeta que has creado, brela, y haz doble click encima del icono del archivo HTML que has generado:
01
Conjunto de instrucciones que permiten especificar un proceso al ordenador. Los lenguajes de programacin, los ms comunes, se usan para no tener que aprender las complicadas instrucciones formadas por unos y ceros del cdigo mquina, el nico lenguaje que habla el procesador.
02
Lenguaje
Con ello se abrir una ventana del navegador de Internet para mostrar el documento:
Instrucciones y expresiones de un programa tal y como fueron escritas por el programador en un lenguaje determinado.
03
Cdigo fuente
Modificar el estilo del texto

La verdad es que la pgina que hemos diseado es un poco sosa, no te parece? Te gustara poder modificar el tamao, color y la fuente del texto de tu web? Te enseamos a hacerlo.
Cierra el navegador y haz click con el botn derecho encima de
Empieza escribiendo un texto ms extenso en el cuerpo del documento, es
coloca ahora el cursor sobre y pincha en la lista en 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 lnea), puedes utilizar la etiqueta <br>
Haz click en el men y luego, en la lista que se despliega, encima de la entrada llamada . A continuacin 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 botn .
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 informacin solicitada.
04
Servidor web
Hyper Text Transfer Protocol (Protocolo de Transferencia de Hipertexto). Protocolo de comunicaciones usado en la WWW. Su principal misin es contactar con las pginas web y transmitirlas al nevegador del cliente.
05
HTTP
Tambin llamadas diseos de pgina. Formato aadido a un archivo HTML que contiene el esquema maestro del aspecto del documento. Especifica mrgenes, fuentes, tamaos, pies de pgina...
06
Hojas de estilo
Conjunto de instrucciones pensado para que los ejecute otro programa y no el procesador. Hay lenguajes de programacin, como JavaScript, concebidos como lenguajes script y con los que se escriben programas para pginas web.
Script
73
N 126

A continuacin, 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 smbolo <br>. Existe una forma ms sencilla de lograr que el texto se muestre de manera ordenadaen la pantalla.Las etiquetas <p> y </p> se ocupan de que los textos ms largos se dividan automticamente en prrafos.As que borra todas las instrucciones <br> e introduce al comienzo y al final de cada frase dichas instrucciones. Presiona la tecla y, sin soltarla, pulsa en la letra g para guardar as los cambios.A continuacin ve a la ventana del navegador y aprieta en el icono o sobre la tecla 5 para actualizar la pgina. Observa como ahora el texto se divide l solito, de forma clara, en distintos prrafos. La longitud de las lneas quedar fijada por el ancho de la ventana:
8 9
Puedes controlar el tamao del titular por medio de la cifra que contiene la etiqueta. As, si en lugar de <h1> y </h1> introduces <h3> y </h3>, la lnea ser ms pequea:
Repite el paso 6 y observa ahora el resultado: En lugar del tag <ul>, tambin puedes utilizar <ol>. El resultado sera una lista numerada:
12 13
Pincha detrs de </h1> o </h3> en funcin del que hayas decidido usar y presiona C. Introduce <hr> y presiona de nuevo C .
10
Cuando ahora repitas el paso 6 vers que con ello aparecer una fina lnea debajo del titular:
Con HTML tambin puedes configurar el tipo y el color de la fuente. Vuelve a modificar el cdigo fuente del documento de esta forma:
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
11
14
stas no son, ni mucho menos, todas las posibilidades que tienes para editar textos. Por ejemplo, con <h1> y </h1> puedes resaltar titulares. Prubalo. Sustituye los tags <p> y </p> (antes y despus de la lnea de bienvenida) por <h1> y </h1>. Repite el paso 6 para de este modo guardar todos los cambios que has realizado y actualizar la pgina:
Por medio de <font face Courier> se modifica la fuente del texto situado a continuacin, y hasta la etiqueta </font>. Si olvidas aadir esta ltima, la edicin afectar a todas las lneas 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 cdigo hexadecimal. En este caso, la instruccin sera <font color=00ffff> Puedes ver algunos de ellos
17
Y para terminar, puedes incluir un ltimo retoque, aadiendo una gran letra mayscula al principio del prrafo, lo que se denomina una letra capitular.Para ello debes modificar el cdigo de esta forma: Asegrate de incluir la letra que quieres engordar entre las dos etiquetas.
se marcan por medio de la instruccin <li>, y sta se cierra con </ul>.
documento. Con las instrucciones <b>, </b>, <i> e </i> puedes hacer que los textos se muestren en negrita y en cursiva.
15
Para modificar tambin el color del texto

N 126
Repite el paso 6 para guardar el archivo y actualizarlo.Tu pgina ahora debe tener ms o menos este aspecto:
16
en el recuadro situado en la siguiente pgina.
74
18
tado: Enhorabuena! Ya has creado tu primera pgina web!
Repite de nuevo el paso 6 y observa el resul-
En la siguiente entrega del curso te ensearemos, entre otras cosas, cmo puedes insertar archivos de imgenes en un documento HTML.
El color en la web
Los alias suelen ser, simplemente, el nombre del color en ingls. Si no conoces alguno, puedes intentar traducirlo. Por ejemplo, si no conoces el alias o el cdigo del naranja, prueba con orange (por cierto, en este caso habrs acertado). Respecto al valor hexadecimal, es posible emplear un programa de retoque fotogrfico, como Photoshop o Paint Shop Pro. Su paleta de colores te mostrar el cdigo hexadecimal de cualquier matiz que quieras emplear:
N 126
aqua black blue fuchsia gray green lime maroon navy olive purple red teal silver white yellow
#00ffff #000000 #0000ff #ff00ff #808080 #008000 #00ff00 #800000 #000080 #808000 #800080 #ff0000 #008080 #c0c0c0 #ffffff #ffff00
75
Curso HTML, 2 parte

cuidado.Asegrate antes de que se trata de imgenes gratuitas, de las que puedes disponer libremente, o pdele autorizacin al propietario intelectual antes de publicarlas. 16,7 millones de colores distintos, mientras que GIF slo consigue 256 colores.Adems,a diferencia del anterior no permite utilizar distintos niveles de compresin. Por eso JPEG es el ms usado para fotos y en general imgenes que requieren cierta calidad.GIF tiene tambin sus ventajas,ya que permite crear imgenes en movimiento y usar fondos transparentes. Para ambos casos es vlido un ltimo consejo. Intenta buscar el equilibrio entre tamao y calidad de la imagen. sta se resentir si reduces demasiado la resolucin 03 (pg. 62) para ahorrar espacio.
No. La imagen debe estar en formato GIF 01 (pg. 62) o JPEG 02 (pg. 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 ms cmodamente a travs de Internet, y ocupan mucho menos espacio en el servidor web en el que est alojada la pgina. JPEG se pueden representar hasta
Pueden estar en cualquier formato de imagen?
Te ser posible tanto descargar los GIF animados 04 (pg. 62) de forma gratuita desde Internet como crearlos t mismo.
Cmo lograr imgenes en movimiento?
Colocar y organizar las imgenes en la pgina

En este apartado te vamos a ensear cmo se insertan imgenes en una pgina web, y tambin cmo organizarlas.Para ello seguiremos usando la pgina dedicada a El Puerto de Santa Mara,que ya creamos en la anterior entrega del curso. Antes de empezar a trabajar en el documento HTML,asegrate de disponer de las imgenes que vas a usar.Si se trata de tus propias fotos, esto no supondr ningn problema, tan slo asegrate de que no pesandemasiado para colgarlas en Internet. Si no, hay muchas webs en las que encontrars imgenes que puedes descargar de forma gratuita y usar en tu propia pgina. La siguiente URL 05 (pg. 62) http://spain.linkworld.ws/Web masters/Recursos/Galerias_de_ Imagenes/ contiene enlaces a muchas de ellas. cho del ratn 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 ests trabajando, es decir, .
Si quieres que tu pgina web le llame la atencin a alguien ms que a amigos y familiares tendrs que darle un poco de sabor. Nada mejor que unas cuantas imgenes para animarla un poco.
nadie le gusta ver pginas web en las que slo haya texto.Ya no estamos en la prehistoria de Internet, ahora prima todo lo multimedia, y cuanto ms,mejor. Por suerte, es muy sencillo aadir fotos y todo tipo de elementos grficos a un documento HTML y de este modo darle un aspecto mucho ms atractivo.
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.
Colocar y organizar las imgenes en la pgina Modificar el fondo de una pgina web Hacer que las imgenes cambien Trucos
Qu imgenes puedo utilizar?

En principio, cualquiera. Desde fotos que has hecho con una cmara de carrete y que has digitalizado con ayuda de un escner a las que hayas descargado en tu disco duro desde tu cmara digital o desde Internet. En este ltimo caso, ten
N 127
Ahora ya puedes seguir con la construccin de la pgina.Abre la carpeta
60 62 63 64
y haz click con el botn derecho encima de .
Para bajarlos, una vez cargada la imagen en el navegador, haz click encima de ella con el botn dere-
A continuacin sita el cursor encima de la entrada llamada y, en la lista
60
Curso HTML, 2 parte
cilla. Detrs de las instrucciones introducidas en el paso 7 aade ahora hspa ce=7, de manera que queden as: Repite los pasos 5 y 8 para comprobar el resultado:
nmero. En caso de que haya texto debajo o por encima de una imagen, puedes utilizar la instruccin vspa ce,indicando del mismo modo que antes el espacio que quieres dejar.
que se despliega, pincha sobre el icono del Bloc de Notas de Windows:
Ahora modifica el cdigo fuente de la siguiente forma: Vamos a dar un repasoa 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 ttulo de la pgina.<h1>, </h1>, <h3> y </h3> se utilizan para crear titulares de distinto tamao. Entre los tags <body> y </body> se encuentra el texto que luego se leer en la pgina. <p> y </p> se encargan de los saltos del texto.Lo nico nuevo son las lneas resaltadas en color amarillo. Con <img src = imagen1.jpg> se carga la primera foto en la pgina. <img informa al navegador de que se debe insertar una imagen. La instruccin src = Imagen1.jpg determina dnde se encuentra la imagen. Se trata de una ruta relativa. Si no especificas nada ms, significa que el archivo debe estar en la misma carpeta que el documento HTML.Tambin puedes especificar una ruta absolutaescribiendo la direccin completa de un fichero situado en una carpeta diferente en el disco
5 6 7
duro o en el servidor. Las otras imgenes se aaden con las instrucciones <img src = imagen2.jpg e <img src = imagen3.jpg>
Aprieta la tecla , mantnla presionada y pulsa la tecla G . Con ello guardars todos los cambios realizados ahora en el cdigo fuente. Comprueba el resultado con un doble click encima del icono
8 9
co a su lado, escribe la instruccin align=left justo detrs de imagen1.jpg e imagen3.jpg de modo que la etiqueta quede de este modo: Detrs de imagen2.jpg escribe align=right.
Por medio de la cifra introducida detrs de hspace puedes determinar la distancia respecto a la imagen, que ser mayor cuanto ms elevado sea el
10
11
Tambin se puede especificar el tamao de la imagen. Para ello modifica el texto como sigue: Por medio de height=150
Graba a continuacin las modificaciones como hemos descrito en el paso 5 . Para hacerlas visibles en la pgina, debes actualizarla. Para ello haz click una vez en el icono , o bien aprieta la tecla : 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-
para que as el navegador muestre tu pgina: Para que el texto recorra las imgenes, en vez de dejar espacios en blan-
determinas la altura de la imagen. El navegador calcula automticamente la anchura manteniendo las proporciones. Si especificas el ancho, la altura es la que se calcula de forma automtica. Para el ancho se emplea la instruccin width. Naturalmente, tambin es posible determinar ambos valores, pero con ello puede ocurrir que la imagen aparezca distorsionada:
61
N 127
Curso HTML, 2 parte
01
Graphics Interchange Format, o Formato para Intercambio de Grficos desarrollado por Compuserve. Usa el algortimo LZW para comprimir los datos.
02
GIF
Estndar de compresin de imagen que permite usar distintos tipos y niveles de compresin de los datos. El trmino se emplea tambin para denominar a los archivos grficos creados usando este formato.
03
JPEG
Repite los pasos 5 y 8 para comprobar el resultado: Las imgenes animadas se insertan exactamente de la misma forma. El movimiento es una caracterstica del archivo, no hay que insertar cdigo HTML. Puedes descargar un GIF animado desde Internet. Encontrars muchos gratuitos en la direccin www.gifmania.com Carga la pgina y selecciona, por ejemplo, la seccin . Luego pincha en para ver las imgenes disponibles:
12 13
16
Pulsa encima de una de ellas con el botn derecho y haz click en . Dale el nombre que quieras y guarda el fichero en la misma carpeta que los
anteriores. Pero no vamos usarlo en nuestro ejemplo. En su lugar, insertaremos nuestra propia animacin, que hemos creado en el truco de la pgina 64. A continuacin modifica el cdigo fuente de la siguiente forma: Una imagen mvil se in-
Trmino 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
Resolucin
14
15
Vuelve a repetir los pasos 5 y 8 para ver cmo ha quedado:
17
serta en la pgina de la misma forma que una imagen normal. La instruccin align=left se ocupa de que la imagen aparezca a la izquierda, al lado del titular.Y tambin puedes ajustar su tamao para que encajetal y como t quieras.
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 pgina situada debajo, y crear GIFs animados. stos son secuencias formadas por varias imgenes guradadas en un nico fichero GIF y que dan sensacin de movimiento al mostrarse unas detrs de otras.
05
GIF animado
Modificar el fondo de una pgina

En este apartado te enseamos a aadir un fondo a tu pgina web.
Uniform Resource Locator, o Localizador Uniforme de Recursos. Ruta completa para localizar un archivo en la Red, su direccin 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
URL
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 pgina 66. Una vez la tengas, gurdala en la carpeta
terior y comprueba qu tal ha quedado: Como ves, la imagen ocupa por completo el fondo de la
Si no se ven bien las letras debido al color del fondo empleado, recuerda que puedes modificar tan-
pgina, quedando el texto y las imgenes por delante.
to ste como el tamao y tipo de la fuente usada. Tambin es posible hacer que algunas partes se vean subrayadas mediante las etiquetas <u> y </u>. Por medio de size se determina el
Conjunto de instrucciones pensado para que los ejecute otro programa y no el procesador. Son muy usados en la creacin de pginas web.
Script
Vuelve a la ventana del Bloc de Notas y aade las siguientes instrucciones: Como ves, se consigue que el navegador reconozca la imagen como un fondo de pgina por medio de background.A su derecha se indica el nombre de la imagen, en este ejemplo as: =fondo.jpg.
Ahora repite los pasos 5 y 8 del apartado anN 127
62
grosor de la lnea creada con la etiqueta <hr>. Para eliminar la sombra de sta se utiliza la instruccin noshade, literalmente sin sombra en ingls:
Repite de nuevo los pasos 5 y 8 del apartado Colocar y organizar imgenes en la pgina para de este modo poder ver el resultado de tu trabajo:
Hacer que las imgenes cambien

Seguro que te has fijado en que muchas pginas web incluyen imgenes que cambian al pasar el cursor del ratn por encima. Se trata de los rollovers, uno de los efectos ms vistosos que se pueden incluir en un documento HTML sin necesidad de saber programaro de recurrir a scripts 06 elaborados por otros. Justo detrs de onMouseOver especificas la imagen que quieres que se muestre al pasar el ratn por encima.
Aade el siguiente cdigo . para indicar la imagen en reposo por medio del modificador onMouseOut, de modo que la lnea quede de esta forma:
3 4
Vas a ver lo fcil que resulta. Para probarlo, puedes modificar la etiqueta de una imagen que ya hayas insertado anteriormente, por ejemplo
1 2
Para terminar, repite por ltimo los pasos 5 y 8 del apartado Colocar y organizar imgenes en la pgina y comprueba cmo cambia la imagen:
A continuacin aade la siguiente instruccin:
En la prxima entrega del curso te ensearemos a aadir enlaces.
N 127
63
Curso. Creacin de pginas web
en HTML, 3 parte
llamda y pincha en la lista que se despliega en
Aadir enlaces a un documento HTML Utilizar cascading stylesheets
76 78
Una de las cosas ms divertidas de navegar por Internet es ir saltando de pgina en pgina. Quieres que los visitantes de la tuya puedan hacerlo? Te enseamos a usar los hipervnculos.
utilizar las llamadas cascading stylesheets 02 , u hojas de estilo en cascada.
endrs que reconocerlo. La pgina ha mejorado ya muchsimo desde que comenz este curso. Quieres conseguir llamar todava ms la atencin de tus visitantes? Entonces aade algunos hipervnculos 01 , tambin llamados vnculos, enlaces o links. Con ellos podrs tener cientos de pginas en una sola. Cmo? Si haces click encima de uno de ellos, se mostrar en la ventana del navegador la web a la que est vinculado. Tambin se emplean para las descargas de software, enlazando el correspondiente archivo.Y si el navegador no es capaz de ello, ste llama a la aplicacin adecuada para hacerlo. En este artculo te enseamos a colocar hipervnculos en tu pgina web, y a
Qu es una hoja de estilo?

Es un formato aadido a un archivo de texto, HTML, etctera, que contiene el esquema maestro de diseo del documento. Entre otros, se pueden aplicar estilos al tipo, tamao 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 separacin de lneas o de palabras, la forma del cursor y el color del hipervnculo, 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.
Aadir enlaces a un documento HTML
Modifica de este modo el cdigo fuente 03 del documento: Los hipervnculos 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 instruccin 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 hipervnculo, 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 direccin se pone detrs de href=. Antes de la etiqueta </a>, con la que se cierra la lnea, aparece el texto que se mostrar en la pgina, encima del hipervnculo. Finalmente, por medio de
En este apartado te mostramos cmo aadir un hipervnculo a una pgina 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.
Principios y estructura bsica de HTML Imgenes y grficos animados Enlaces y hojas de estilo Tablas y marcos
N 126 N 127 N 128 N 129
En dicha pgina web hablbamos de El Puerto de Santa Mara. Parece natural ofrecer a los visitantes
N 128
enlaces a otras pginas 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 botn derecho encima de , a continuacin coloca el cursor sobre la entrada
<center> se mostar en la mitad de la ventana. Aprieta , y, sin soltarla, pulsa tambin la tecla G ,para que as se guarden todos los cambios en el fichero HTML. Comprueba cmo han quedado los cambios. Otra vez en
3 4
76
Curso: Creacin de pginas web en HTML,queparte Trucos: Lo 3 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 aadas hipervnculos que remitan a la parte inferior del documento, los llamados saltos de pgina. Modifica el cdigo HTML de la siguiente forma:
01
haz doble click encima de para que se abra la web en una ventana del navegador de Internet: En tu pgina ahora aparecen tres hipervnculos:
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 pgina web que conduce a una pgina diferente si se pulsa encima de l.
02
Hipervnculo
El cursor tomar el aspecto de una mano cuando lo lleves encima de un enlace:
Haz click una vez en el hipervnculo y mantn el botn presionado. El texto aparece de color rojo:
Cuando sueltes,y si ests conectado a Internet, se abrir la pgina vinculada:
6 7
Para volver a tu pgina pincha en Fjate en que el enlace sobre el que has hecho click aparece en ahora en color verde:
Si quieres, puedes usar enlaces en vez de mostrar las imgenes en la pgina. Para ello ser necesario que modifiques el cdigo HTML del documento. En lugar de una URL 04 , introduce, sencillamente, la ruta del servidor (o del disco duro) donde se encuentra el archivo grfico que quieres
Con la instruccin adicional border=0 evitars que la imagen se enmarque con una lnea. Si quieres insertar un marco, omite la instruccin o bien modifica la cifra que hay dentro del parntesis. Cuanto mayor sea sta, ms grueso aparecer el marco. Por ejemplo, con el valor se mostrara de esta forma:
que se abra al pinchar encima del vnculo. Para poner un enlace detrs de las imgenes, modifica ahora el texto en el editor de la siguiente manera:
10
ahora el cursor adopta la forma de una mano cuando lo colocas encima de una de las imgenes.
Muchas de las pginas web que podemos encontrar por Internet resultan demasiado grandes para que se puedan mostrar completas en la pantalla del ordenador. Normalmente es necesario
Como ves, has eliminado las instrucciones que organizaban las imgenes 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.
11
Aunque su traduccin ms exacta sera algo parecido a diseos de pgina sucesivos en cascada, normalmente se usa la expresin hojas de estilo en cascada, o directamente las siglas CSS. Es un formato aadido a un documento HTML que permite, tanto a usuarios como a administradores de una pgina web, un mayor control acerca de cmo se muestra la pgina. Estos diseos es posible aplicarlos a cualquier documento. La expresin en cascada procede de que slo hay que especificar la hoja de estilo en el primer documento HTML para que se aplique de forma sucesiva en todas las pginas de la web, sin necesidad de escribir el cdigo en todas ellas.
03
Cascading Stylesheets
Instrucciones y expresiones de un programa tal y como fueron escritas por el programador en un lenguaje determinado.
04
Cdigo fuente
Repite el paso 3 para guardar los cambios, y actualiza la imagen apretando en o presionando .
N 128
Uniform Resource Locator, o Localizador Uniforme de Recursos. Ruta completa para localizar un archivo en la Red, su direccin 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.
URL
77
Curso. Creacin de pginas web en HTML, 3 parte

cer uso de los nuevos hipervnculos. Cuando hagas click en el hipervnculo o encima de la web salta hacia arriba y hacia abajo.
Regresa al navegador y presiona la tecla para actualizar la pgina. Como ves, no es posible ver la pgina entera:
12
Puedes utilizar la barra de desplazamiento de la derecha para mover la pgina hacia abajo. Pero es mucho ms sencillo ha-
13 4
Tambin es posible hacer que te enven mensajes de correo electrnico sin que el visitante tenga necesidad
14
de saber tu direccin email. Para ello modifica el cdigo de la siguiente forma: Naturalmente, tienes que sustituir la direccin 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 electrnico del visitante:
Utilizar Cascading Stylesheets

Hasta ahora, cuando has querido modificar el estilo del documento, tenas que aadir las nuevas instrucciones del formato en cada lnea afectada. Existe una forma de evitarlo, las hojas de estilo en cascada o Cascading Stylesheets.: Si ahora haces click encima del hipervnculo , podrs 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 tambin a que el hipervnculo est situado entre las etiquetas <p> y </p>.
1 2
Primero, modifica el cdigo 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.
Con el modelo de Clases es mucho ms sencillo. Modifica el cdigo de esta forma: Y tambin de esta otra para aadir una despedida: Por medio de la instruccin
El formateado se inicia con <style type = text/css> p, h1, h3. Esto significa que los estilos que aparecen a continuacin se aplicarn 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 tamao 10pt y en la fuente Arial. Los especificados para los titulares son navy y green, en los tamaos 20pt y 12pt. La letra Arial es la misma del primer estilo.
.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 lnea <p class=final > Repite el paso 3 y luego pincha encima del hipervnculo . La ltima lnea 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 pasaras escribiendo instrucciones extra. En la prxima y ltima parte de este curso de HTML aprenders, entre otras cosas, cmo publicar tablas en una pgina web y tambin cmo usar marcos o frames. stos te permitirn abrir y visualizar diferentes pginas web en una sola ventana del navegador, que se dividir para ello.
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 pgina debe tener ahora ms o menos un aspecto como ste:
N 128
78

Con la etiqueta [table] se empieza la tabla. Cada lnea se inicia por emdio de [tr] y se cierra con [/tr]. Para las entradas de la primera lnea, la que contiene las cabeceras o ttulos 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 lneas de la tabla.
Disear una tabla sencilla 98 Organizar el contenido de una web con una tabla 99 Usar marcos 99 Caracteres universales 100
Construir una pgna web no es slo ir aadiendo contenidos sin ton ni son. Hay que hacerlo de forma organizada, cuidando que todo est en sus sitio. Las tablas y los marcos te sern de ayuda
de fondo. Adems, puedes utilizar una tabla para crear un sumario o ndice para la web completa.
Guarda el nuevo documento HTML en tu disco duro. Para ello, pincha en el men y, en la lista que se despliega, sobre Dirgete a la carpeta en la que ests copiando todos los archivos a lo largo del curso introduce el nombre del fichero, , y aprieta encima del botn .A continuacin cierra el programa pulsando Para abrir la pgina, abre y haz doble click sobre el icono As el navegador mostrar la tabla
Disear una tabla sencilla

En este apartado aprenders a organizar unaso cunatos datos medio de una sencilla tabla y posteriomente a incluirla en tu pgina web.
on slo usar adecuadamente algunos recursos te ser muy fcil ordenadore el contenido de tu web. As, los visitantes se orientarn enseguida y podrn encontrar fcilmente lo que buscan. Lo mejor para ello es que emplees tablas y marcos.En esta entrega del curso, la ltima, te enseamos a hacerlo.
Qu son los marcos?

Los marcos o framesson 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 hipervnculos y otro para los contenidos, ya procedan de la misma web o de una direccin de Internet distinta. Respecto a cuntos frames se deben usar, es una cuestin de gusto.Aunque con ms de tres o cuatro la pgina queda poco clara.
Escribe las siguientes lneas en la ventana:
Para qu se usan las tablas?

Te ayudarn a organizar los contenidos. Una tabla est formada por filas y columnas. En la interseccin de stas hay campos independientes,llamados celdas, que, que pueden rellenarse de datos, colores y motivos
Abre el Bloc de Notas de Windows. Para ello haz click en el botn , luegopincha encima de la entrada llamada A continuacin introduce el comando y haz click sobre encima del botn .
Principios y estructura bsica de HTML Imgenes y grficos animados Enlaces y hojas de estilo Tablas y marcos
N 126 N 127 N 128 N 129
98
N 129
Organizar el contenido de una web por medio de una tabla
En cuanto a la lnea, hemos empleado por primera vez una entidad para representar caracteres no especificados en la norma ASCII, en este caso una vocal acentuada. Encontrars ms informacin acerca de las entidades en el recuadro situado en la pgina 100. A continuacin, aprieta a la vez las teclas y G para que se guarden las modificaciones que has introducido en el documento. Ahora vueve a la carpeta y pulsa dos veces encima del icono . La pgina de Internet se presentar ahora por medio de tablas ordenadamente repartidas dentro de la ventana del navegador:
5 6
As colocas una tabla como boceto o esquema sobre una pgina. Para el ejemplo sirve el archivo de la anterior parte del curso
An debes tener abierta la ventana del apartado anterior. Si no es as, brela y pulsa con el botn derecho encima de luego coloca el cursos sobre y haz click en la lista que se despliega encima de la entrada
Modifica el cdigo fuente HTML de la siguiente forma: Reconocers 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 pgina.
Por medio de la instruccin [width=950] se es-
tablece que la mxima anchura de la tabla es de 950 pxeles. 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 funcin 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 instruccin [valign=top] ajusta el contenido de la celda hacia arriba.
Usar marcos
En este apartado te vamos a ensear a conseguir que puedan mostrarse varias pginas en una sola ventana del navegador.
En primer lugar vas a crear una pgina que servir de sumario o de ndice de tu web. Si has cerrado el editor de texto, repite el paso 1 del apartado Disear una tabla sencilla. Haz click arriba en el men y a continuacin sobre la entrada llamada . Luego introduce el siguiente texto:
Por medio de la expresin [target=Contenidos] estamos anticipando acontecimientos al especificar el nombre del marco en el que debe abrirse el documento vinculado al enlace.
Repite el paso 3 del apartado Disear una tabla sencilla para guardar el nuevo documento. Dale el nombre de
Ahora pulsa dos veces encima del icono y se mostrar la pgina con en una ventana del navegador:
Gracias a los marcos esto suceder sin necesidad de abrir nuevas ventanas. Repite el paso 1 de este
99
Si haces click encima de cualquiera de estos enlaces se abrir una ventana diferente del navegador para mostrar las correspondientes pginas web.
N 129
mismo apartado y escribe lo siguiente: La instruccin [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 aplicacin 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 lnea entre los dos marcos. Con las dos lneas siguientes se rellenan las celdas. La primera incluye el n-
Repite el paso 3 del apartado Disear una tabla sencilla y nombra al fichero como .
6 7
dice, y la segunda la pgina 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 hipervnculos sepan con la columna en que deben abrirse los documentos.
para ver el resultado:
Si ahora haces click
dir en filas horizontales. Modifica de esta forma el cdigo fuente: El segundo marco, por medio de la lnea [rows=50,*], se parte en dos filas horizontales. La primera tiene 50 puntos de ancho, el resto se reserva para la segunda fila. Aprieta la tecla y ambin la G para guardar todos los cambios.
definen los enlaces: . A continuacin, guarda todos los cambios y cierra el Bloc de Notas pinchando encima de . 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
13
la tabla se mostrar en la parte derecha: Las ventanas se pueden subdividir de nuevo, una columna se puede divi-
A continuacin pincha dos veces encima de
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 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
Caracteres universales
No has encontrado alguna vez alguna web en la que el navegador se hace un lo? Para evitarlo se ha definido unos cdigos y unos nombres llamados entidades, que representan los caracteres espeCaracter ! # % ' ) + / ; = ? [ ] { } _ _ Cdigo ! # % ' ) + - / ; = ? [ ] { } ² ¼ Ú ú ü Entidad ---------------nbsp sup2 frac14 Uacute uacute uuml ciales y permiten mostrarlos tal cual en cualquier documento. Las entidades comienzan con el smbolo ampersand [&] y terminan con un punto y coma [;]. Aqu puedes ver algunas de las ms importantes: Caracter " & ( * , . : _ Cdigo " & ( * , . : ¹ ¿ Á Ç É Í Ó á ç é í ñ ó ÷ Entidad -------sup1 iquest Aacute Ccedil Eacute Iacute Oacute aacute ccedil eacute iacute ntilde oacute divide
Slo 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 instruccin [ ] se introduce un espacio en blanco entre los distintos enlaces, que se mostrarn en la misma lnea.
10
nuevos vnculos
11 12
Repite de nuevo el paso 3 y guarda el archivo con el nombre
Como hemos situado los tres hipervnculos en una columna extra, ahora podemos eliminarlos de la pgina principal. Para ello borra en las tres filas en las que se
Si haces click en cualquiera de ellos aparecer la pgina de Internet en la misma ventana: Esto es todo. Dndote a conocer los fundamentos del HTML, te hemos mostrado la puerta para la programacin de pginas web.Ahora eres t el que debes cruzarla. Por que ahora puedes hacerlo.
14
100
N 129

Curso Computer Hoy - Creación de Páginas Web en HTML

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Curso Computer Hoy - Creación de Páginas Web en HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

Curso: Creacin de pginas web en HTML, 1 parte

Tu primera pgina web Modificar el estilo del texto El color en la web

Cmo son los comandos HTML?

Curso: Creacin de pginas web en HTML, 1 parte

Tu primera pgina web

Modificar el estilo del texto

Cierra el navegador y haz click con el botn derecho encima de

Empieza escribiendo un texto ms extenso en el cuerpo del documento, es

coloca ahora el cursor sobre y pincha en la lista en la entrada

Curso: Creacin de pginas web en HTML, 1 parte

se marcan por medio de la instruccin <li>, y sta se cierra con </ul>.

Para modificar tambin el color del texto

en el recuadro situado en la siguiente pgina.

tado: Enhorabuena! Ya has creado tu primera pgina web!

Repite de nuevo el paso 6 y observa el resul-

Curso HTML, 2 parte

Pueden estar en cualquier formato de imagen?

Cmo lograr imgenes en movimiento?

Colocar y organizar las imgenes en la pgina

Qu imgenes puedo utilizar?

Ahora ya puedes seguir con la construccin de la pgina.Abre la carpeta

y haz click con el botn derecho encima de .

A continuacin sita 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:

Curso HTML, 2 parte

Vuelve a repetir los pasos 5 y 8 para ver cmo ha quedado:

Modificar el fondo de una pgina

pgina, quedando el texto y las imgenes por delante.

Ahora repite los pasos 5 y 8 del apartado anN 127

Hacer que las imgenes cambien

A continuacin aade la siguiente instruccin:

En la prxima entrega del curso te ensearemos a aadir enlaces.

Curso. Creacin de pginas web

Aadir enlaces a un documento HTML Utilizar cascading stylesheets

Qu es una hoja de estilo?

Aadir enlaces a un documento HTML

N 126 N 127 N 128 N 129

Curso: Creacin de pginas web en HTML,queparte Trucos: Lo 3 seriese

El cursor tomar el aspecto de una mano cuando lo lleves encima de un enlace:

Cuando sueltes,y si ests conectado a Internet, se abrir la pgina vinculada:

Curso. Creacin de pginas web en HTML, 3 parte

Utilizar Cascading Stylesheets

Curso: Creacin de pginas web en HTML, 4 parte

Disear una tabla sencilla

Qu son los marcos?

Escribe las siguientes lneas en la ventana:

Para qu se usan las tablas?

N 126 N 127 N 128 N 129

Curso: Creacin de pginas web en HTML, 4 parte

Organizar el contenido de una web por medio de una tabla

Por medio de la instruccin [width=950] se es-

Curso: Creacin de pginas web en HTML, 4 parte

para ver el resultado:

Si ahora haces click

A continuacin pincha dos veces encima de

Repite de nuevo el paso 3 y guarda el archivo con el nombre

Anda mungkin juga menyukai