Programacion III

PROGRAMACION III GUIA #2 HTML
2.1. Etiquetas

El lenguaje HTML se basa en etiquetas, por eso es importante entender bien la
sintaxis de las etiquetas.
Al realizar nuestro primer ejemplo, hemos visto algunas etiquetas.
Las etiquetas siempre van contenidas entre los signos de desigualdad < y >. Por
ejemplo <body>,<title> o <p>.
Las etiquetas tienen una etiqueta de apertura y una de cierre, marcada por el
signo /. Por ejemplo <body> (apertura) y </body>(cierre). Entre la apertura y el
cierre, est el contenido de la etiqueta, que puede ser texto u otras etiquetas,
depende del tipo de etiqueta. Algunas etiquetas, no tienen contenido, y se cierran
sobre s mismas. Esto se expresa colocando la apertura y el cierre en la misma
etiqueta, como por ejemplo: <br />, que equivaldra a <br></br>. La
etiqueta <br /> escribe un salto de lnea.
Vamos a fijarnos en la apertura de la etiqueta. La primera palabra que aparece es
el nombre o identificador de la etiqueta. A parte, podemos encontrar atributos con
sus valores, siguiendo el
formato <etiqueta atributo1="valor" atributo2="valor">. La forma
correcta de escribirlo es escribir el nombre de la etiqueta y los atributos en
minscula, y los valores contenidos entre comillas dobles. Si un atributo tiene ms de
un valor, se escriben todos los valores dentro de las mismas comillas, separados por
espacios en blanco, por ejemplo <etiqueta atributo="valor1 valor2">.
Hasta hace poco, lo ms usual a la hora de escribir pginas web era que cada
etiqueta tuviera bastantes atributos, que se referan a propiedades del formato o
representacin de los elementos. La tendencia actual es la de separar el formato del
contenido, descartando estos atributos, sustituyndolos por propiedades de estilo.
Por ejemplo, para escribir la siguiente lnea:
Bienvenidos a www.uma.edu.sv
Antes, sin estilos:
<p align="center"><font color="#993366" size="4" face="Comic
Sans MS, Arial, MS Sans Serif">Bienvenidos a
www.uma.edu.sv</font></p>
Ahora, con estilos:
<p class="presentacion">Bienvenidos a www.uma.edu.sv </p>
Como veremos en el siguiente tema, en otro lugar se definen las caractersticas
del estilo.
2.2. Estructura bsica de la pgina
Todo el documento HTML viene contenido dentro de la etiqueta <html></html>.
Dentro de la etiqueta <html>, encontramos dos subdivisiones, la cabecera, delimitada por
las etiquetas <head></head> y el cuerpo, delimitado por las etiquetas <body></body>. Por
lo tanto, el aspecto bsico de cualquier pgina web, es el siguiente:
<html>
<head>
...
</head>
<body>
...
</body>
</html>
La etiqueta <head> contiene informacin sobre la pgina. Por ejemplo contiene etiquetas
que pueden decir de qu va la pgina, el ttulo que debe de mostrar en la barra del
navegador, o cdigo javascript y estilos, que pueden estar en el propio encabezado o como
llamadas a otros archivos. Normalmente, lo que contiene esta etiqueta no se muestra en el
navegador.
Iremos viendo lo que puede contener esta etiqueta a medida que nos haga falta. De
momento slo comentaremos que obligatoriamente debe de contener la
etiqueta <title></title>, que contiene el ttulo de la pgina, que es lo que se ve en la
barra de ttulo del navegador.

En el <body> encontramos el contenido de la pgina, lo que se ve a travs del navegador:
texto, imgenes, enlaces, tablas, etc...
En el siguiente ejemplo, puedes ver que hemos modificado el cdigo que utilizamos en la
pgina Primera.htm creada en el tema anterior. En l vemos los elementos que hemos
comentado. Hemos aadido la etiqueta <br /> para saltar de lnea. Esta es la primera
pgina del sitio que vamos a ir construyendo a lo largo del curso.
<html>
<head>
<title>Floramics. Amigos de las flores</title>
</head>
<body>
<p>Bienvenido a Floramics
<br /> En esta web encontrars informacin sobre la
asociacin y nuestra coleccin de fotografas de
flores.</p>
</body>
</html>

2.3. Estructura del texto
Ya hemos comentado que todo el texto de la pgina estar dentro del <body>, que a su
vez estar dentro del <html>. El texto dentro del <body>debe estar dentro de prrafos. En
HTML, los prrafos se identifican con la etiqueta <p></p>. Dentro de los prrafos
colocaremos texto e imgenes, y algunas etiquetas que nos permitan dar formato al texto,
pero no podemos tener otros prrafos anidados.
A su vez, disponemos de encabezados que nos permiten organizar el texto. Los
encabezados van desde el <h1></h1> de mayor tamao, al <h6></h6>, el ms pequeo.
Por ejemplo, utilizaramos un <h1> para poner el rtulo principal de la pgina, <h2> para los
ttulos de los apartados, <h3> para los apartados de segundo nivel, etc. El texto de cada
apartado ira contenido en prrafos <p></p>.
Una de las peculiaridades del texto, es que los espacios en blanco consecutivos y saltos de
lnea no se muestran como en el cdigo fuente. Si hay varios espacios seguidos, slo se
mostrar uno. Por ejemplo, si en el cdigo fuente
escribimosBienvenido a Floramics se ver Bienvenido a Floramics. Si
queremos poner varios espacios seguidos, utilizaremos el cdigo html para el
espacio, .
El navegador tambin ignora los saltos de lnea. As si dentro de un prrafo colocamos
varios saltos de lnea pulsando Intro, estos no se vern. Como ya vimos para crear un salto
de lnea dentro de un prrafo, utilizamos la etiqueta <br />.
Puedes ver todo esto en el siguiente ejemplo:
<html>
<head>
<title>Floramics. Amigos de las flores</title>
</head>
<body>
<h1>Bienvenido a Floramics</h1>
<h2>Presentacin</h2>
<p> En esta web encontrars informacin sobre la
asociacin y nuestra coleccin de fotografas de
flores.<br/>
Tenemos las fotografas organizadas en diferentes categoras</p>

<h2>Contacto</h2>
<p> Si quieres comunicarte con nosotros
visita nuestra pgina de contacto. Te esperamos.</p>
</body>
</html>

Es interesante utilizar encabezados, ya que muchos programas podrn generar tablas de
contenido a partir de cmo hayamos estructurado nuestra pgina.
A la hora de escribir texto, hay ms cosas que hemos de tener en cuenta relativas al idioma
y a los caracteres especiales, como las letras acentuadas y la .
Unidad 2. Avanzado: Texto y caracteres especiales
Cuando escribimos texto, hemos de tener en cuenta ciertas consideraciones.
Por ejemplo, quin va a ver la pgina. No todos los idiomas tienen los mismos caracteres.
Por ejemplo, no todos los idiomas tienen las letras acentuadas, y la letra es exclusiva del
espaol. Esto puede producir que estos caracteres no se vean correctamente, dependiendo
del navegador y la regin.
Una forma de solucionar esto, es indicar en la pgina web que codificacin utilizamos. Por
ejemplo, podemos hacerlo aadiendo la siguiente etiqueta a nuestra pgina:
<meta http-equiv="content-type" content="text/html; charset=iso-8859-
1" />
La etiqueta informa de que es una pgina de texto/HTML, y que utiliza el juego de
carcteres iso-8859-i. Como esta etiqueta da informacin sobre la pgina, la incluiremos en
el <head>.
Pero existen otros caracteres especiales que no podemos mostrar en la pgina. Por
ejemplo, si queremos escribir 1<2, el navegador interpretar < como una apertura de etiqueta.
Por ello, todos los caracteres se pueden representar como un cdigo con el formato &codigo;.
Por ejemplo, si conocemos el cdigo ASCII de un carcter, podemos escribirlo en el cdigo
fuente como &#num;. As, la letra , cuyo cdigo ASCII es 241, se podra escribir ñ.
Los caracteres ms utilizados, tienen tambin un cdigo html propio, como vemos en la
siguiente tabla:
Carcter Representacin
< <
> >
á
Á
é
É
í
Í
ó
Ó
ú
Ú
ñ
Ñ
Espacio

Carcter Representacin
€
ç
Ç
ü
Ü
& &
¿
¡
" "
·
º
ª
¬
©
®
Utilizar estos cdigos nos asegura que no haya ningn problema al visualizar nuestra
pgina.
As, si escribimos en el cdigo fuente "¿Será
María?" podremos leer "Ser Mara?".
Otra de las peculiaridades del texto, como ya hemos visto, es que varios espacios en
blanco se mostrarn como uno solo. Por ejemplo, si en el cdigo fuente escribimos hola
mundo se ver hola mundo. Si queremos poner varios espacios seguidos, utilizaremos
el cdigo html para el espacio, .
El navegador tambin ignora los saltos de lnea. As si dentro de un prrafo colocamos
varios saltos de lnea pulsando Intro, estos no se vern. Para crear un salto de lnea dentro
de un prrafo, utilizamos la etiqueta <br />.
Si queremos que los saltos de lnea y espacios se muestren igual que en el cdigo fuente,
podemos utilizar la etiqueta <pre></pre>en vez del prrafo. Aunque de esta forma no
podremos utilizar otro tipo de formatos.
Otra cosa que se muestra en el cdigo pero no en el navegador son los comentarios.
Podemos escribir un comentario con el siguiente formato . En el comentario podemos poner texto y etiquetas, que el navegador
ignorar.
Puedes ver todo esto en el siguiente ejemplo:
<html>
<head>
<title>Texto</title>
<meta http-equiv="content-type" content="text/html; charset=iso-
8859-1" />
</head>
<body>
<p>Caracteres especiales:</p>
<p>El ñandú y la cigüeña.<br />
3 > 2, y 2 < 4<p>
<p>Aquí hay 5 espacios [ ]</p>
<p>Aquí sí que hay 5 espacios
[ ]</p>
<p>Este párrafo
tiene saltos
en el código fuente</p>
<p>Aquí<br />y aquí<br />hay saltos</p>
<pre>En la etiqueta pre
si aparecen
saltos y es pa ci os</pre>
<p>En el último párrafo hay un comentario.</p>
</body>
</html>
Prubalo, cambiando lo que quieras:
Colores en hexadecimal

Los colores en HTML se representan mediante un nmero hexadecimal.
Un nmero hexadecimal se diferencia de un nmero decimal en que no slo puede tomar valores del 0
al 9, sino que puede tomar hasta diecisis valores distintos, que van del 0 al 9, y de la A a la F.
Cada color estar representado por un grupo de seis dgitos en hexadecimal, precedidos por una
almohadilla, como por ejemplo#FFFFFF.
Existen 216 colores seguros para web. stos son los colores que se muestran de la misma forma en
Microsoft Internet Explorer y en Netscape Navigator, tanto en Windows como en Macintosh.
Tambin podemos personalizar nuestros propios colores, modificando los valores de cada uno de los
dgitos que forman parte del nmero hexadecimal.
A continuacin se muestran los 216 colores seguros para web, para que puedas consultarlos cuando lo
necesites.

#000000

#000033

#000066

#000099

#0000CC

#0000FF

#003300

#003333

#003366

#003399

#0033CC

#0033FF

#006600

#006633

#006666

#006699

#0066CC

#0066FF

#009900

#009933

#009966

#009999

#0099CC

#0099FF

#00CC00

#00CC33

#00CC66

#00CC99

#00CCCC

#00CCFF

#00FF00

#00FF33

#00FF66

#00FF99

#00FFCC

#00FFFF

#330000

#330033

#330066

#330099

#3300CC

#3300FF

#333300

#333333

#333366

#333399

#3333CC

#3333FF

#336600

#336633

#336666

#336699

#3366CC

#3366FF

#339900

#339933

#339966

#339999

#3399CC

#3399FF

#33CC00

#33CC33

#33CC66

#33CC99

#33CCCC

#33CCFF

#33FF00

#33FF33

#33FF66

#33FF99

#33FFCC

#33FFFF

#660000

#660033

#660066

#660099

#6600CC

#6600FF

#660033

#663333

#663366

#663399

#6633CC

#6633FF

#666600

#666633

#666666

#666699

#6666CC

#6666FF

#669900

#669933

#669966

#669999

#6699CC

#6699FF

#66CC00

#66CC33

#66CC66

#66CC99

#66CCCC

#66CCFF

#66FF00

#66FF33

#66FF66

#66FF99

#66FFCC

#66FFFF

#990000

#990033

#990066

#990099

#9900CC

#9900FF

#993300

#993333

#993366

#993399

#9933CC

#9933FF

#996600

#996633

#996666

#996699

#9966CC

#9966FF

#999900

#999933

#999966

#999999

#9999CC

#9999FF

#99CC00

#99CC33

#99CC66

#99CC99

#99CCCC

#99CCFF

#99FF00

#99FF33

#99FF66

#99FF99

#99FFCC

#99FFFF

#CC0000

#CC0033

#CC0066

#CC0099

#CC00CC

#CC00FF

#CC3300

#CC3333

#CC3366

#CC3399

#CC33CC

#CC33FF

#CC6600

#CC6633

#CC6666

#CC6699

#CC66CC

#CC66FF

#CC9900

#CC9933

#CC9966

#CC9999

#CC99CC

#CC99FF

#CCCC00

#CCCC33

#CCCC66

#CCCC99

#CCCCCC

#CCCCFF

#CCFF00

#CCFF33

#CCFF66

#CCFF99

#CCFFCC

#CCFFFF

#FF0000

#FF0033

#FF0066

#FF0099

#FF00CC

#FF00FF

#FF3300

#FF3333

#FF3366

#FF3399

#FF33CC

#FF33FF

#FF6600

#FF6633

#FF6666

#FF6699

#FF66CC

#FF66FF

#FF9900

#FF9933

#FF9966

#FF9999

#FF99CC

#FF99FF

#FFCC00

#FFCC33

#FFCC66

#FFCC99

#FFCCCC

#FFCCFF

#FFFF00

#FFFF33

#FFFF66

#FFFF99

#FFFFCC

#FFFFFF

Existe otra forma de representar algunos colores, sin la necesidad de utilizar nmeros en
hexadecimal. Estos colores pueden representarse por su nombre, y son los siguientes:
Color Hexadecimal Nombre

#FFFFFF white
#000000 black

#000080 navy

#0000FF blue

#008000 green

#008080 teal

#00FF00 lime

#00FFFF aqua

#800000 maroon

#800080 purple

#808000 olive

#808080 gray

#C0C0C0 silver

#FF0000 red

#FF00FF fuchsia

#FFFF00 yellow

Unidad 2. Ejercicio paso a paso: Crear una pgina bsica
Objetivo
Vamos a practicar los elementos vistos hasta ahora para crear una sencilla pgina web
desde su cdigo fuente. Para hacerla, utilizaremos el Bloc de notas (Todos los
programas Accesorios)
Ejercicio
1. Abre un documento en blanco con el bloc de notas, y gurdalo con el nombre que
quieras.
2. Dentro del documento, crea las etiquetas que forman la estructura de la pgina:
3. <html>
4. <head>
5. </head>
6. <body>
7. </body>
</head>
8. Dentro del head, aade el ttulo de la pgina con la etiqueta <title>:
<title>Ejercicio de HTML</title>
9. Dentro del body, aade el siguiente encabezado 1: <h1>Pgina de ejemplo</h1>
10. A continuacin, aade el siguiente encabezado 2: <h2>Texto normal</h2>.
11. Aade el siguiente prrafo: <p>El and comn es un ave sudamericana muy
parecida al avestruz.</p>.
12. Aade el siguiente prrafo: <p>Este ave, es omnvora y no puede volar,
aunque es una gran corredora.</p>
13. Aade el siguiente prrafo con saltos: <p>Otras aves emparentadas con el
and son: <br /> - El avestruz<br /> - El em<br /> - El
kiwi.</p>.
14. Aade el siguiente encabezado 2: <h2>Caracteres especiales</h2>.
15. Aade el siguiente prrafo: <p>El ñandú común es un
ave sudamericana muy parecida al avestruz.</p>.
16. Guarda la pgina y prubala.
17. Comprueba que el tercer prrafo muestra saltos de lnea, aunque no aparezcan en el
cdigo fuente.
18. Comprueba que el primer y ltimo prrafo se ven iguales aunque estn escritos de
distinta forma.

Programacion III

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Programacion III

Uploaded by

Copyright:

Available Formats

PROGRAMACION III GUIA #2 HTML

You might also like