comandos para diseño de página web

PRACTICA 2PRACTICA 2TECNOLOGÍAS DE LA TECNOLOGÍAS DE LA

INFORMACIÓN, INFORMACIÓN, CREACIÓN DE UNA CREACIÓN DE UNA

PÁGINA WEB.PÁGINA WEB.

OBJETIVOOBJETIVO

El alumno conocerá los elementos El alumno conocerá los elementos indispensables para crear una página indispensables para crear una página web.web.

HTMLHTML

HyperText Markup LanguageHyperText Markup Language ((Lenguaje de Marcas de HipertextoLenguaje de Marcas de Hipertexto), ),

es el lenguaje de marcado predominante para es el lenguaje de marcado predominante para la construcción de páginas web. Es usado la construcción de páginas web. Es usado

para describir la estructura y el contenido en para describir la estructura y el contenido en forma de texto, así como para forma de texto, así como para

complementar el texto con objetos tales complementar el texto con objetos tales como imágenes.como imágenes.

HTML se escribe en forma de "etiquetas", HTML se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>).rodeadas por corchetes angulares (<,>).

Los elementos son la estructura básica de HTML. Los elementos son la estructura básica de HTML. Los elementos tienen dos propiedades básicas: Los elementos tienen dos propiedades básicas: atributos y contenido.atributos y contenido.

Cada atributo y contenido tiene ciertas restricciones Cada atributo y contenido tiene ciertas restricciones para que se considere válido al documento HTML. para que se considere válido al documento HTML. Un elemento generalmente tiene una etiqueta de Un elemento generalmente tiene una etiqueta de inicio (p.ej. <nombre-de-elemento>) y una etiqueta inicio (p.ej. <nombre-de-elemento>) y una etiqueta de cierre (p.ej. </nombre-de-elemento>). Los de cierre (p.ej. </nombre-de-elemento>). Los atributos del elemento están contenidos en la atributos del elemento están contenidos en la etiqueta de inicio y el contenido está ubicado entre etiqueta de inicio y el contenido está ubicado entre las dos etiquetas las dos etiquetas (p.ej.<nombredelemento atributo="valor">Contenido(p.ej.<nombredelemento atributo="valor">Contenido</nombre-de-elemento>). </nombre-de-elemento>).

MarcasMarcas

Las marcas delimitan elementos de un documento como cabeceras, Las marcas delimitan elementos de un documento como cabeceras, párrafos, etc. y son utilizadas para dar un tratamiento diferente al párrafos, etc. y son utilizadas para dar un tratamiento diferente al texto que se encuentre entre las marcas.texto que se encuentre entre las marcas.En HTML las marcas se delimitan con los signos < (inferior En HTML las marcas se delimitan con los signos < (inferior a) y > (superior a). Un texto marcado tendrá por tanto este aspecto: a) y > (superior a). Un texto marcado tendrá por tanto este aspecto:

...texto normal ...texto normal <marca><marca> texto afectado por la marca texto afectado por la marca </marca></marca> resto del texto... resto del texto...

Un ejemplo podría ser resaltar un texto en negrita, para ello se Un ejemplo podría ser resaltar un texto en negrita, para ello se emplea la marca <B> y quedaría de la siguiente forma: emplea la marca <B> y quedaría de la siguiente forma:

...texto normal <B>...texto normal <B> texto en negrita texto en negrita </B> resto del texto... </B> resto del texto...

CabeceraCabecera

La cabecera se emplea para facilitar información acerca La cabecera se emplea para facilitar información acerca del documento y está delimitada por <HEAD> prólogo del documento y está delimitada por <HEAD> prólogo </HEAD>.</HEAD>.Dentro de la cabecera podemos destacar el título que Dentro de la cabecera podemos destacar el título que indica el nombre del documento <TITLE> </TITLE>.indica el nombre del documento <TITLE> </TITLE>.

<HTML><HTML><HEAD><HEAD><TITLE> Bienvenido a nuestra guía rápida </TITLE><TITLE> Bienvenido a nuestra guía rápida </TITLE></HEAD></HEAD>Cuerpo del documentoCuerpo del documento......</HTML> </HTML>

CuerpoCuerpo

El resto del documento residirá entre las marcas El resto del documento residirá entre las marcas <BODY> y </BODY>. Esta es la estructura <BODY> y </BODY>. Esta es la estructura mínima que debe poseer todo documento mínima que debe poseer todo documento HTML:HTML:

<HTML><HEAD><TITLE>Bienvenido a la guía <HTML><HEAD><TITLE>Bienvenido a la guía rápida</TITLE></HEAD>rápida</TITLE></HEAD><BODY><BODY>Documento...Documento...</BODY></HTLM></BODY></HTLM>

A continuación describiremos algunos A continuación describiremos algunos elementos que pueden aparecer dentro del elementos que pueden aparecer dentro del cuerpo. cuerpo.

EncabezadoEncabezado

Los encabezados se emplean para dividir los Los encabezados se emplean para dividir los documentos en secciones o mas concretamente documentos en secciones o mas concretamente para marcar los títulos de esas secciones. Las para marcar los títulos de esas secciones. Las marcas son del tipo <H#> título </H#>, donde # marcas son del tipo <H#> título </H#>, donde # puede ser un número cualquiera entre 1 y 6. puede ser un número cualquiera entre 1 y 6.

Tamaño mayorTamaño mayor <H1>Tamaño mayor</H1><H1>Tamaño mayor</H1>Tamaño menorTamaño menor <H6>Tamaño menor</H6><H6>Tamaño menor</H6>

Definición de bloquesDefinición de bloques Para definir y separar bloques de texto se Para definir y separar bloques de texto se

emplean una serie de marcas que definen emplean una serie de marcas que definen párrafos, texto preformateado o bloques párrafos, texto preformateado o bloques con significado especial como direcciones con significado especial como direcciones o citas. o citas.

Marcas de bloques: Marcas de bloques:

<P><P> se utiliza para separar párrafos. Dado que para el HTML todo se utiliza para separar párrafos. Dado que para el HTML todo el texto es continuo, necesitamos algún mecanismo para indicar el el texto es continuo, necesitamos algún mecanismo para indicar el principio y el fin de un párrafo. Las marcas inicial y final son <P> y principio y el fin de un párrafo. Las marcas inicial y final son <P> y </P></P>

<PRE><PRE> El texto insertado entre las marcas El texto insertado entre las marcas <PRE><PRE> y y </PRE></PRE> será será visualizado por el browser, respetando el formato con el que fue visualizado por el browser, respetando el formato con el que fue escrito en el fichero fuente HTML. escrito en el fichero fuente HTML.

<ADDRESS><ADDRESS> empleada para indicar que un texto representa una empleada para indicar que un texto representa una dirección o una firma. Generalmente se activa en cursiva y suele dirección o una firma. Generalmente se activa en cursiva y suele estar tabulado. estar tabulado.

<BLOCKQUOTE><BLOCKQUOTE> Se suele representar con tabulaciones a la Se suele representar con tabulaciones a la izquierda y derecha y en cursiva. En sistemas que no permiten izquierda y derecha y en cursiva. En sistemas que no permiten representar en cursiva se puede emplear algún tipo de símbolo al representar en cursiva se puede emplear algún tipo de símbolo al principio de las líneas. principio de las líneas.

<BR><BR> Este elemento solo tiene marca inicial e indica un salto de Este elemento solo tiene marca inicial e indica un salto de línea. línea.

<HR><HR> Solo tiene marca inicial y se emplea para representar una Solo tiene marca inicial y se emplea para representar una línea horizontal. línea horizontal.

ComentariosComentarios Todo texto que empiece por Todo texto que empiece por

<!...comentario...><!...comentario...> será ignorado por el será ignorado por el browser, y por lo tanto no será visible. browser, y por lo tanto no será visible. Esto sirve al autor del documento para Esto sirve al autor del documento para comentar su fichero fuente. comentar su fichero fuente.

Fondos y colores de textoFondos y colores de texto

Un cierto número de atributos de la marca Un cierto número de atributos de la marca BODY permiten controlar el color del fondo de la BODY permiten controlar el color del fondo de la ventana del browser, el color de los caracteres ventana del browser, el color de los caracteres del texto, y finalmente el color de los enlaces: del texto, y finalmente el color de los enlaces:

< BODY atributo1 atributo2 atributo3 ... atributoN > < BODY atributo1 atributo2 atributo3 ... atributoN >

* El atributo * El atributo BGCOLORBGCOLOR

Este atributo permite escoger un color para el fondo de la página Este atributo permite escoger un color para el fondo de la página <BODY BGCOLORS="#rrggbb"> donde "rr" "gg" y "bb" son valores <BODY BGCOLORS="#rrggbb"> donde "rr" "gg" y "bb" son valores hexadecimales comprendidos entre 00 y FF que especifican el grado de hexadecimales comprendidos entre 00 y FF que especifican el grado de saturación de los colores rojo, verde y azul. saturación de los colores rojo, verde y azul.

* El atributo * El atributo BACKGROUNDBACKGROUND

Este atributo especifica una imagen residente en el servidor la cual se Este atributo especifica una imagen residente en el servidor la cual se utilizará como fondo de página.utilizará como fondo de página.<BODY BACKGROUND="fichero_gráfico.gif"> <BODY BACKGROUND="fichero_gráfico.gif">

* El atributo * El atributo TEXTTEXT

Permite controlar el color del texto estándar, es decir, todo texto que no Permite controlar el color del texto estándar, es decir, todo texto que no especifique un enlace. especifique un enlace. <BODY TEXT="#rrggbb"> <BODY TEXT="#rrggbb">

* Los atributos * Los atributos LINK, VLINK y ALINKLINK, VLINK y ALINK

Controlan el color de los enlaces:Controlan el color de los enlaces:LINK color del enlace que aún no ha sido visitado.<BODY LINK="#rrggbb">LINK color del enlace que aún no ha sido visitado.<BODY LINK="#rrggbb">ALINK color muy fugaz que aparece cuando se hace clic sobre el enlace ALINK color muy fugaz que aparece cuando se hace clic sobre el enlace <BODY ALINK="#rrggbb"><BODY ALINK="#rrggbb">VLINK es el color de un enlace que ya ha sido visitado <BODY VLINK es el color de un enlace que ya ha sido visitado <BODY VLINK="#rrggbb">VLINK="#rrggbb">

LetraLetra

Título <Hn>Título <Hn> Es al marca que asigna el tamaño de los Es al marca que asigna el tamaño de los

caracteres, donde n varía de 1 a 6. Los caracteres, donde n varía de 1 a 6. Los mas grandes tienen valor 1 y los mas mas grandes tienen valor 1 y los mas pequeños valor 6. El texto entre estas pequeños valor 6. El texto entre estas marcas se trata en negrita. marcas se trata en negrita.

Tamaño de la letra y color <FONT>Tamaño de la letra y color <FONT>

La marca FONT permite actuar sobre bloques La marca FONT permite actuar sobre bloques distintos de caracteres situados en la misma distintos de caracteres situados en la misma línea.línea.

El atributo SIZE: Regula la altura de los El atributo SIZE: Regula la altura de los caracteres (1 a 7). caracteres (1 a 7). El atributo COLOR: Especifica el color de los El atributo COLOR: Especifica el color de los caracteres. caracteres.

Ejemplo:Ejemplo: <font size=3 color=#008000> texto... <font><font size=3 color=#008000> texto... <font>

Estilo Físico o estilo de los caracteresEstilo Físico o estilo de los caracteres

Combinación de tamaño y estiloCombinación de tamaño y estilo

Todo browser trabaja bajo el efecto de Todo browser trabaja bajo el efecto de sólo un par cerrado de marcassólo un par cerrado de marcasEjemplo:Ejemplo:

HiperenlacesHiperenlaces

El lector explora un documento en el Web El lector explora un documento en el Web haciendo clic sobre las zonas activas para así haciendo clic sobre las zonas activas para así hacer aparecer nuevos documentos. En HTML hacer aparecer nuevos documentos. En HTML definimos una zona activa (que puede ser un definimos una zona activa (que puede ser un texto o una imagen) que se asocia al URL texto o una imagen) que se asocia al URL (protocolo de direccionamiento de documentos) (protocolo de direccionamiento de documentos) del documento que sustituirá al documento del documento que sustituirá al documento visualizado cuando se haga clic sobre esa zona. visualizado cuando se haga clic sobre esa zona. Un ancla, por lo tanto, sirve para especificar la Un ancla, por lo tanto, sirve para especificar la partida y la llegada de un enlace hipertexto partida y la llegada de un enlace hipertexto ( <A> ). ( <A> ).

El atributo HREF, ancla de partida hacia El atributo HREF, ancla de partida hacia un enlace externoun enlace externo

Crea un enlace hacia un servidor situado en Crea un enlace hacia un servidor situado en algún punto de Internet, o hacia un algún punto de Internet, o hacia un documento propuesto por dicho servidor. La documento propuesto por dicho servidor. La marca especifica el atributo HREF cuyo valor marca especifica el atributo HREF cuyo valor precisa el URL del documento a recuperar:precisa el URL del documento a recuperar:

zona_activablezona_activable

<A HREF="url_de_destino"> zona_activable</A> <A HREF="url_de_destino"> zona_activable</A>

ImágenesImágenes

La marca <IMG> La marca <IMG> <IMG> es la marca que permite incluir una imagen. Esta <IMG> es la marca que permite incluir una imagen. Esta

marca irá siempre completada por el atributo SRC que marca irá siempre completada por el atributo SRC que permite dar la dirección del fichero gráfico que contiene permite dar la dirección del fichero gráfico que contiene la imagen: la imagen:

<IMG SCR=/directorio/subdirectorio/nombre_del_fichero:gráfico> <IMG SCR=/directorio/subdirectorio/nombre_del_fichero:gráfico>

El valor del atributo SCR permite especificar un URL y El valor del atributo SCR permite especificar un URL y es por tanto correcto encontrar imágenes definidas es por tanto correcto encontrar imágenes definidas como sigue:como sigue:

<IMG SCR="http://www.aramis.fr/imagenes/flores/rosa.gif"><IMG SCR="http://www.aramis.fr/imagenes/flores/rosa.gif">

Alineación de imágenesAlineación de imágenes

La marca <IMG> admite el atributo ALIGN que La marca <IMG> admite el atributo ALIGN que permite situar la imagen en relación a la línea de permite situar la imagen en relación a la línea de texto actual y puede tomar los siguientes texto actual y puede tomar los siguientes valores: valores:

* * TOPTOP para alinear la parte superior de la para alinear la parte superior de la imagen. imagen.

* * MIDDLEMIDDLE para alinear el centro de la imagen. para alinear el centro de la imagen.

* * BOTTOMBOTTOM para alinear la base de la imagen. para alinear la base de la imagen.

El atributo ALTEl atributo ALT

Hay ciertos browser como por ejemplo el Hay ciertos browser como por ejemplo el Lynx que están orientados a terminales no Lynx que están orientados a terminales no gráficos en los que no se verá la imagen gráficos en los que no se verá la imagen incluida en un documento HTML. Para incluida en un documento HTML. Para que en este tipo de browser el documento que en este tipo de browser el documento tenga la misma información se añade el tenga la misma información se añade el atributo ALT que contiene un texto atributo ALT que contiene un texto alternativo a la imagen.alternativo a la imagen.

<IMG SCR="foto1.gif" ALT="Foto del caballo de Santiago"><IMG SCR="foto1.gif" ALT="Foto del caballo de Santiago">

Las imágenes externasLas imágenes externas

Este tipo de imágenes no aparecen en la Este tipo de imágenes no aparecen en la pantalla cuando se carga la página sino que se pantalla cuando se carga la página sino que se crea un enlace hipertexto cuyo extremo podrá crea un enlace hipertexto cuyo extremo podrá ser: una imagen GIF, JPEG, XBM u otra.ser: una imagen GIF, JPEG, XBM u otra.

Puede Puede hacer hacer clickclick aquiaqui para ver lo mas nuevopara ver lo mas nuevo

Puede <A HREF="images/new.gif"> hacer click Puede <A HREF="images/new.gif"> hacer click aqui </A> para ver lo mas nuevo aqui </A> para ver lo mas nuevo

Las imágenes como anclasLas imágenes como anclas

Se puede reemplazar el texto de un ancla por Se puede reemplazar el texto de un ancla por una marca que define una imagen. En este caso una marca que define una imagen. En este caso la imagen tiene un borde de color para indicar la imagen tiene un borde de color para indicar que se trata de un enlace hipertexto sobre el que se trata de un enlace hipertexto sobre el que se puede hacer un clic.que se puede hacer un clic.

Ejemplo:Ejemplo:

<A HREF="images/new.gif"> <IMG <A HREF="images/new.gif"> <IMG SCR="images/info.gif"> </A> SCR="images/info.gif"> </A>

Ejemplo de código HTMLEjemplo de código HTML

<<HTMLHTML>> <<HEADHEAD>> <<TITLETITLE>>Un Titulo para el Browser de Un Titulo para el Browser de

turno turno <</TITLE/TITLE>> <</HEAD/HEAD>> <<BODYBODY>> <> <<H1H1>>Otro título, esta vez Otro título, esta vez

más largo. más largo. <</H1/H1>>

<<PP>> <<IMG SRC= "./felix.gif "ALIGN= IMG SRC= "./felix.gif "ALIGN= "MIDDLE " ALT= "EL Gato Felix "MIDDLE " ALT= "EL Gato Felix "">>Hoola. Hoola.

<<PP>>Esto es un parrafo con informacion Esto es un parrafo con informacion super importante. Notese que las lineas super importante. Notese que las lineas

salen pegadas aun dejando salen pegadas aun dejando espacios, saltos de linea, etc. espacios, saltos de linea, etc. <<BRBR>>

&#161 Si pongo esto &#161 Si pongo esto si si <<STRONGSTRONG>>cambia cambia <</STRONG/STRONG>> de de

linea! linea!

<<PP>>Otro parrafo, esto ya es un Otro parrafo, esto ya es un poco rollo. poco rollo.

<<H3H3>>Pongamos un Pongamos un subtítulosubtítulo<<H3H3>>

<<PP>>Por cierto, &#191 que paso Por cierto, &#191 que paso con las con las <<A HREF= "#pepe A HREF= "#pepe "">>anclasanclas<</A/A>>? ?

<<HRHR>> <<ULUL>>

<<LILI>> Esto es una lista no ordenada. Esto es una lista no ordenada. <<LILI>> Las listas quedan mejor si tienen varios Las listas quedan mejor si tienen varios

elementos. elementos. <</UL/UL>> Me voy al Me voy al <<A HREF= A HREF=

"http://www.iac.es/home.html ""http://www.iac.es/home.html ">>IACIAC<</A/A>>. . <<PP>>Vamos a crear un Vamos a crear un <<EMEM>>ancla ancla <</EM/EM>>, o lo , o lo

que es lo mismo, un que es lo mismo, un <<A A NAME="pepe"NAME="pepe">>anchor.anchor.<</A/A>>

..................................................... .....................................................

..................................................... ..................................................... <</BODY/BODY>> <</HTML/HTML>>

EjerciciosEjercicios

INDIVIDUALINDIVIDUAL Mandarme la pagina hecha en claseMandarme la pagina hecha en clase

EN EQUIPOEN EQUIPO Elaborar una página (el tema que les Elaborar una página (el tema que les

toque) que contenga un índice y toque) que contenga un índice y direccionar las paginas de todos los direccionar las paginas de todos los integrantes del equipo en esa página. integrantes del equipo en esa página.