Diseño Web Básico con HTML
Cargado por
Osvaldo Gonzalez LaugeDiseño Web Básico con HTML
Cargado por
Osvaldo Gonzalez LaugeComputación Extra Programática
Colegio Nuestra Señora del Rosario
Cuadernillo de Clase 2do año Secundario
Módulo: Diseño Web en Código HTML
Profesor: Osvaldo Román González Laugè
Día y Horario: Viernes de 9:30 a 10:25 hs, salida 10:30hs puntual.
Objetivo: Leer e interpretar el lenguaje HTML para poder crear estructuras de
página web con el fin de utilizar todas las herramientas de éste recurso con la
finalidad de lograr crear un sitio web competente.
Alumno: ……………………………………………………..
Computación Extraprogramática – 2do1er año – Prof: Osvaldo González Laugè
UNIDAD 1: Introducción
El lenguaje HTML, Hyper Text Markup Languaje o lenguaje de definición de marcas es un
lenguaje sencillo que permite marcar los documentos de hipertexto mediante unas etiquetas
especificas, de este modo conseguimos darle a los documentos una cierta estructura.
Para crear los documentos HTML se ha usado el Bloc de Notas de Windows por ser el más
sencillo y común, pero se puede usar cualquier editor o procesador de texto para tal efecto.
Decíamos antes que los documentos HTML se marcaban usando unas etiquetas. Estas
etiquetas se encierran mediante los símbolos " < " y " > ". Generalmente irán por parejas
delimitando así el campo de acción de las mismas. Diferenciaremos entonces dos tipos de
etiquetas: etiquetas de apertura y etiquetas de cierre. Las etiquetas de cierre llevaran
entre los signos antes mencionados y al principio, el signo " / ".
Qué necesitas...
Para empezar a crear tu página necesitas un editor de textos, o sea, un programa en el que
puedas teclear el código de tu página. Si tienes Windows en tu computadora puedes usar el
Bloc de notas o Notepad, que sería lo más práctico y sencillo. No te recomiendo por ahora
usar el Word o algún programa similar porque podría haber problemas con los formatos,
pero si de todas maneras decides utilizarlo, recuerda guardar la información sólo como texto
simple (extensión .txt).
Otra cosa que necesitas es un navegador de Internet para poder ver como está quedando tu
página. Estos navegadores de Internet pueden ser Netscape Navigator o Internet Explorer.
Para diseñar tu página no es necesario por el momento que dispongas de una conexión a
Internet. Puedes estar modificando el código de tu archivo en el editor de textos y estarlo
visualizando en el navegador sin tener que conectarte.
UNIDAD 2: Estructura Básica
Vamos a realizar nuestra primera página, es una página muy sencilla en la que veremos la
frase: "Esta es mi primera página".
En primer lugar abriremos el Block de Notas (Notepad) y escribiremos el siguiente código:
<HTML>
<HEAD>
<TITLE>Mi primera página</TITLE>
</HEAD>
<BODY>
Esta es mi primera página
</BODY>
</HTML>
Si nos fijamos en el código podemos observar que algunas palabras se encuentran entre los
símbolos ' < ' y ' > ', estas palabras se llaman “etiquetas” y el uso de las mismas será
imprescindible para nuestros documentos en HTML.
Las letras que van dentro de las etiquetas pueden escribirse en mayúsculas o en
minúsculas, en nuestro caso las escribiremos en mayúsculas para distinguirlas mejor del
resto de palabras.
Podemos diferenciar dos clases de etiquetas, las etiquetas de apertura “<ooo>” y de cierre
“</ooo>”. Generalmente las etiquetas salvo excepciones que más adelante veremos tienen
una etiqueta de apertura y otra de cierre. Lo que haya entre estas estará afectado por la
orden que contenga dicha etiqueta. Así por ejemplo todo el documento está entre <HTML> y
</HTML>, que son las etiquetas que abren y cierran respectivamente el documento HTML.
El documento HTML se divide en dos partes principales: El “encabezado” (HEAD) y el
“cuerpo” (BODY). El encabezado es la parte que se encuentra entre las etiquetas <HEAD> y
2 Computación Extraprogramática – 2do año – Prof: Osvaldo González Laugè
Computación Extraprogramática – 2do1er año – Prof: Osvaldo González Laugè
</HEAD>. Dentro del mismo se encuentra información sobre nuestro documento, en nuestro
caso tenemos el título de la página entre las etiquetas <TITLE> y </TITLE>. En el cuerpo
pondremos todo lo que queramos ver en nuestra página texto, imágenes, enlaces, etc....
Una vez comprendidos estos conceptos guardaremos nuestro documento (en el Block de
Notas) como: Ejer1.htm.
Para Internet Explorer:
Ir a la barra de menú y selecciona Archivo, luego Abrir y pulsa Examinar para darle la
dirección en donde se encuentra el archivo. Cuando lo selecciones presionas Aceptar y tu
archivo se visualizará en el navegador.
UNIDAD 3: Formato de textos 1
Formato de los caracteres.
Existen dos tipos de formato para los caracteres: Los formatos físicos y los formatos
lógicos.
Formatos físicos:
Son los que ordenan como se va a presentar el texto. Son formatos físicos por ejemplo la
negrita, el subrayado... Aquí tenemos una lista de algunos de ellos.
<B> ... </B> Negrita <SUB> ... </SUB> M Subíndice
<I> ... </I> Cursiva <SUP> ... </SUP> M Superíndice
<U> ... </U> Subrayado <TT> ... </TT> Máquina escribir
<S> ... </S> Tachado
Ejercicio 2:
En el siguiente ejercicio veremos claramente como utilizar estas etiquetas de formato físico,
así que como siempre abriremos el Bloc de notas (Notepad) y escribiremos el siguiente
código:
<HTML>
<HEAD>
<TITLE>Formatos físicos</TITLE>
</HEAD>
<BODY>
<B>Este texto esta en negrita</B>
<I>en cambio este esta en cursiva</I>
<U>también se puede subrayar</U>
<S>y tachar</S>
<B><I><U>Se pueden usar</U> varios a</I> la vez</B>
Ejemplo de superíndice: 6<SUP>2</SUP>= 36
Ejemplo de subíndice: X<SUB>1</SUB> + X<SUB>2</SUB> = Z
</BODY>
</HTML>
Computación Extraprogramática – 2do año – Prof: Osvaldo González Laugè 3
Computación Extraprogramática – 2do1er año – Prof: Osvaldo González Laugè
En las tres primeras frases está muy clara la utilización de las etiquetas: Se abre
inmediatamente antes de la frase que quieres que tenga el formato indicado en la etiqueta y
se cierra inmediatamente después. Pero vamos a observar detenidamente la frase "Se
pueden usar varios a la vez". Lo que aquí vemos es que se pueden anidar este tipo de
etiquetas (se pueden usar al mismo tiempo). A la hora de anidar las etiquetas es muy
importante tener en cuenta el orden de apertura y de cierre de ellas, así que si abro primero
la negrita, luego la cursiva y por último el subrayado (ver código en el Ejercicio 2) deberé
tener en cuenta que debo cerrar primero la última que abrí, esto es, el subrayado, luego
cerraré la cursiva y por último la negrita.
Guardaremos este ejercicio como Ejer2.htm y lo ejecutaremos, este debe ser el resultado:
Todas las frases se visualizan una tras otra y no una en cada línea como esperábamos, y es
que hay que indicarle al navegador cuando queremos saltar de línea. Esto se hace mediante
la etiqueta <BR>, que dada su concreta función es una etiqueta que no tiene etiqueta de
cierre.
Las etiquetas <CENTER> y </CENTER> posicionan el texto seleccionado en el centro de la
página. También puede aplicarse a gráficos.
Encabezados
<H X> </H X> se utiliza para resaltar encabezados. La X son números que van del 1 al 6,
siendo el 1 el encabezado más grande y resaltado, el 2 un poco menos y así
sucesivamente.
Ejemplo:
<H1>Encabezado</H1>
<H2>Encabezado</H2>
<H3>Encabezado</H3>
<H4>Encabezado</H4>
Sabiendo esto vamos a utilizarla en el ejercicio anterior:
Ejercicio 2 bis:
<HTML>
<HEAD>
<TITLE>Formatos físicos</TITLE>
</HEAD>
<BODY>
<B>Este texto esta en negrita</B><BR>
<I>en cambio este esta en cursiva</I><BR>
<U>también se puede subrayar</U><BR>
4 Computación Extraprogramática – 2do año – Prof: Osvaldo González Laugè
Computación Extraprogramática – 2do1er año – Prof: Osvaldo González Laugè
<S>y tachar</S><BR>
<B><I><U>Se pueden usar</U> varios a</I> la vez</B><BR>
Ejemplo de superíndice: 6<SUP>2</SUP>= 36<BR>
Ejemplo de subíndice: X<SUB>1</SUB> + X<SUB>2</SUB> = Z
</BODY>
</HTML>
Guardamos como Ejer2bis.htm, lo ejecutamos y comprobamos que nos da este mismo
resultado:
Formatos lógicos:
Son los que dan una cierta calidad al texto y se apreciarán dependiendo del navegador.
Aquí tenemos una lista de algunos de ellos.
<CITE> ... </CITE> Texto con formato cita
<DFN> ... </DFN> Texto con formato definición
<CODE> ... </CODE> Texto con formato código
<KBD> ... </KBD> Texto con formato teclado
<SAMP> ... </SAMP> Texto con formato ejemplo
<VAR> ... </VAR> Texto con formato variable
UNIDAD 4: Formato de textos 2
Atributos del texto
En este apartado veremos como cambiar el color, el tamaño y el tipo de letra para dar un
mejor aspecto a nuestros documentos. Para ello usaremos la etiqueta <FONT>.
Hasta ahora las etiquetas que hemos visto no llevaban ningún dato adicional pero como
veremos muchas etiquetas llevan esta serie de datos que se llaman atributos. Los atributos
irán dentro de la etiqueta y separados con un espacio.
Ejemplo:
Para ponerle a una palabra un tamaño 5 pondríamos la etiqueta <FONT> y el atributo SIZE
con el valor 5:
<FONT SIZE=5>Palabra</FONT>
A continuación veremos los atributos que podremos usar con la etiqueta FONT y la función
que ejercerá cada uno de ellos.
SIZE
Este atributo sirve para cambiar el tamaño de las fuentes. La manera de utilizarlo sería:
a) SIZE = X
Computación Extraprogramática – 2do año – Prof: Osvaldo González Laugè 5
Computación Extraprogramática – 2do1er año – Prof: Osvaldo González Laugè
De esta manera estamos asignando un tamaño directamente. El tamaño (X) va desde uno a
siete donde uno es el valor de letra más pequeño y siete el más grande.
b) SIZE=+X ó SIZE=-X
En cambio aquí incrementamos o disminuimos un tamaño (X) relativo al tamaño base que
tiene la fuente, que por defecto es 3 normalmente. Veamos algunos ejemplos de código y
resultado:
<FONT SIZE=-1>Tamaño de letra 2 (3-1)</FONT>
<FONT SIZE=+3>Tamaño de letra 6 (3+3)</FONT>
El tamaño base del documento (por defecto 3) se puede cambiar al principio del documento
abriendo la etiqueta <BASEFONT> y poniendo el atributo SIZE al tamaño que se desee.
Ejemplo:
<HTML>
<HEAD>
<TITLE> Cambio del tamaño base </TITLE>
</HEAD>
<BODY>
<BASEFONT SIZE=4>
......
</BASEFONT>
</BODY>
</HTML>
Así este documento tendría un tamaño base de 4 (en vez de 3), por lo que a la hora de usar
el atributo SIZE=+X ó -X hay que tener en cuenta que ahora se incrementará o se disminuirá
un tamaño (X) sobre ese tamaño base (4).
Ejercicio 3:
<HTML>
<HEAD>
<TITLE>Tamaños de fuente</TITLE>
</HEAD>
<BODY>
<BASEFONT SIZE=4>
El tamaño base de letra es 4<BR>
<FONT SIZE=6>
Esta frase tiene un tamaño de letra 6<BR>
</FONT>
<FONT SIZE=+2>
Esta frase también tiene un tamaño de letra 6 (4+2)<BR>
</FONT>
</BASEFONT>
</BODY>
</HTML>
Después de haber copiado el código guardamos como Ejer3.htm y cargamos la página en
el navegador.
6 Computación Extraprogramática – 2do año – Prof: Osvaldo González Laugè
Computación Extraprogramática – 2do1er año – Prof: Osvaldo González Laugè
Color
Este atributo sirve para cambiar el color de las fuentes.
Ejemplos:
<FONT Color=Blue>Esta frase es de color Azul</FONT>
<FONT Color="#0000ff">Esta frase también es de color Azul</FONT>
<FONT Color=Red SIZE=5>Esta frase es de color Rojo</FONT>
Ejercicio 4:
<HTML>
<HEAD>
<TITLE>Colores</TITLE>
</HEAD>
<BODY>
<FONT Color=Orange SIZE=7>
COLORES<BR>
</FONT>
<FONT Color="#33ff00" SIZE=+2>
Ejemplo 1<BR>
</FONT>
<FONT Color="#ff00ff">
Ejemplo 2<BR>
</FONT>
</BODY>
</HTML>
Pasamos el código al Bloc de Notas y guardamos como Ejer4.htm. Cargamos la página en
el navegador. Así quedaría el resultado:
Computación Extraprogramática – 2do año – Prof: Osvaldo González Laugè 7
Computación Extraprogramática – 2do1er año – Prof: Osvaldo González Laugè
Se pueden seleccionar los colores deseados desde el inicio del documento en la etiqueta
<BODY> </BODY> por ejemplo:
<BODY BGCOLOR="#FFFFFF" TEXT="#FF0000" LINK="#00AEFF">
Donde:
BGCOLOR es el color del fondo.
TEXT es el color del texto.
LINK es el color del enlace.
NOTA: En este ejemplo se ve que antes del color siempre se coloca un signo "#".
También se puede cambiar el color sólo para un segmento deseado como:
<FONT COLOR="#FF0000">Texto</FONT>
FACE
El atributo FACE se utiliza para cambiar el tipo de la fuente. Si no definimos este atributo
cada navegador cargara el documento HTML con la fuente que tenga predeterminada, lo
mismo pasará si el ordenador en que se visualice la página no contiene el tipo de fuente que
definamos en el documento con este atributo.
Ejemplo:
<FONT FACE="Comic Sans MS" SIZE=5>Tipos de fuente</FONT>
En este atributo se puede definir más de un tipo de letra, con el fin de que si un ordenador
no contiene el primer tipo de fuente que contiene el atributo, pruebe con el segundo,
tercero...
Ejemplo:
<FONT FACE="Arial,Comic Sans MS" SIZE=5>Tipos de fuente</FONT>
Ejercicio 5:
<HTML>
<HEAD>
<TITLE>Fuentes</TITLE>
</HEAD>
<BODY>
<FONT Color=Red SIZE=7 FACE="Comic Sans MS,Arial">
Ejercicio 5<BR>
</FONT>
<FONT Color="#33ccaa" SIZE=5>
Atributos<BR>
</FONT>
<FONT Color="#bb22ff" SIZE=+3 FACE="Courier New">
HTML<BR>
</FONT>
</BODY>
</HTML>
Pasamos el código al Bloc de Notas y guardamos como Ejer5.htm. Cargamos la página en
el navegador. Algunos tipos de letra puede que no se vean, depende que los tenga el
ordenador).
8 Computación Extraprogramática – 2do año – Prof: Osvaldo González Laugè
Computación Extraprogramática – 2do1er año – Prof: Osvaldo González Laugè
UNIDAD 5: Listas
Las listas se usan cuando se quiere enumerar varios ítems. Hay 3 tipos de listas: listas
ordenadas, listas no-ordenadas y listas de definición. Estas listas se pueden utilizar por
separado o anidadas entre si como veremos más adelante.
Listas Ordenadas
Este tipo de listas se designan con la etiqueta <OL> (Ordered List). Cada ítem de la lista ira
precedido de la etiqueta <LI> (List Item) con el fin de diferenciarlos entre si correctamente.
Veamos a continuación un ejemplo de lista ordenada:
Ejemplo:
<OL>
<LI>Introducción
<LI>La Primera Página
<LI>Escribir texto
</OL>
Resultado:
1. Introducción
2. La Primera Página
3. Escribir texto
Atributos de las listas ordenadas:
START: Este atributo permite iniciar la lista ordenada según convenga al diseñador de la
Web.
Ejemplo:
<OL Start=4>
<LI>Introducción
<LI>La Primera Página
<LI>Escribir texto
</OL>
Resultado:
4. Introducción
5. La Primera Página
6. Escribir texto
TYPE: Por defecto las listas ordenadas se ordenan con la numeración común y se inicializan
en 1. Con este atributo puedes cambiar la manera de ordenar la lista.
TYPE puede tomar los siguientes valores en este tipo de listas:
Computación Extraprogramática – 2do año – Prof: Osvaldo González Laugè 9
Computación Extraprogramática – 2do1er año – Prof: Osvaldo González Laugè
1 para numeración común (por defecto)
I para numeración romana en mayúsculas
i para numeración romana en minúsculas
A para letras mayúsculas
a para letras minúsculas
Veamos más claro la utilización de este atributo con un ejemplo:
Ejemplo:
<OL TYPE=I>
<LI>Introducción
<LI>La Primera Página
<LI>Escribir texto
</OL>
Resultado:
I. Introducción
II. La Primera Página
III. Escribir texto
Los atributos START y TYPE se pueden utilizar a la vez dentro de la etiqueta <OL>.
Listas No-Ordenadas
Este tipo de listas se designan con la etiqueta <UL> (Unordered List). Cada ítem de la lista
irá precedido de la etiqueta <LI> (List Item) al igual que en las listas ordenadas. Veamos a
continuación un ejemplo de lista ordenada:
Ejemplo:
<UL>
<LI>Introducción
<LI>La Primera Página
<LI>Escribir texto
</UL>
Resultado:
• Introducción
• La Primera Página
• Escribir texto
Podemos observar como a diferencia de las listas ordenadas este tipo de listas no llevan
ningún tipo de numeración sino que simplemente va precedido de un símbolo (en este caso
un circulo).
Atributos de las listas no-ordenadas:
TYPE: Con este atributo podremos cambiar el símbolo que precede a este tipo de listas.
TYPE puede tomar los siguientes valores en este tipo de listas:
• Bullet (por defecto)
Circle
Square
Veamos más claro la utilización de este atributo con un ejemplo:
Ejemplo:
<UL TYPE="SQUARE">
<LI>Introducción
<LI>La Primera Página
<LI>Escribir texto
10 Computación Extraprogramática – 2do año – Prof: Osvaldo González Laugè
Computación Extraprogramática – 2do1er año – Prof: Osvaldo González Laugè
</UL>
Resultado:
Introducción
La Primera Página
Escribir texto
Listas de Definición
Este tipo de listas se designan con la etiqueta <DL> (Definition List). Cada ídem de la lista
irá precedido de la etiqueta <DT> (Definition Term) y su correspondiente definición ira
precedida por la etiqueta <DD> (Definition Definition). Veamos a continuación un ejemplo de
lista de definiciones:
Ejemplo:
<DL>
<DT>Introducción
<DD>Breve introducción al lenguaje
<DT>La Primera Página
<DD>Como hacer la primera página
<DT>Escribir texto
<DD>Empieza a dar formato al texto
</DL>
Resultado:
Introducción
Breve introducción al lenguaje
La Primera Página
Como hacer la primera página
Escribir texto
Empieza a dar formato al texto
En este tipo de listas (de definición) aparte de los ítems se da una breve descripción o
definición de ellos.
UNIDAD 6: Imágenes
En este apartado veremos como insertar imágenes en nuestros documentos Web. Las
imágenes que se utilizan generalmente en este tipo de documentos Web son archivos de
imagen comprimidos para que la carga de la página sea más rápida, nosotros en este
manual utilizaremos los archivos GIF y los JPG por ser los más utilizados.
(NOTA: Hay que tener en cuenta que las imágenes ocupen lo menos posible, especialmente
las grandes, ya que debemos lograr que la página cargue lo antes posible)
Para insertar una imagen debemos utilizar el comando IMAGE SOURCE.
<IMG SRC="IMAGEN.GIF">
Características de la etiqueta
• Esta etiqueta de <IMG> no tiene etiqueta de cierre ya que la imagen a insertar viene
especificada en el atributo SRC (SOURCE).
• En el atributo SRC pondremos el nombre del archivo con su extensión entre comillas
respetando siempre las mayúsculas y minúsculas de dicho nombre.
Computación Extraprogramática – 2do año – Prof: Osvaldo González Laugè 11
Computación Extraprogramática – 2do1er año – Prof: Osvaldo González Laugè
• Como ya hemos dicho antes hay que intentar que las imágenes insertadas ocupen lo
mínimo posible en memoria.
• Una de las cosas más importantes al utilizar esta etiqueta es la situación del archivo de
imagen, esto es, si la imagen esta o no en el mismo directorio que el documento Web.
Nosotros por comodidad tendremos el archivo de imagen y el documento Web en la
misma carpeta o directorio. De todas maneras veamos estos casos:
1. El documento Web y el archivo de imagen están en el mismo directorio:
<IMG SRC="IMAGEN.GIF">
2. El archivo de imagen está en un subdirectorio respecto al directorio donde se encuentra
el documento Web:
<IMG SRC="SUBDIR/IMAGEN.GIF">
(donde SUBDIR es el nombre del subdirectorio)
3. El documento Web está en un subdirectorio respecto al directorio donde se encuentra el
archivo de imagen :
<IMG SRC="../IMAGEN.GIF">
Atributos para esta etiqueta:
ALT: Con este atributo se puede introducir una pequeña descripción de la imagen mediante
una palabra o frase corta. Este atributo sirve para que el usuario vea de qué trata la imagen
en el caso de usar un navegador que no cargue imágenes. También notaremos diferencia al
cargar la imagen ya que al poner el mouse encima aparece la descripción que hemos
puesto.
Ejemplo:
<IMG SRC="DINOSAURIO.GIF" ALT=”DINO”>
Resultado: (posar el Mouse en la imagen)
BORDER : Dándole un valor en píxeles a este atributo se puede poner un borde a la
imagen.
Ejemplo:
<IMG SRC="DINOSAURIO.GIF" BORDER=5>
HEIGHT y WIDTH : Con estos atributos se puede modificar la altura y la anchura de la
imagen, esto se puede hacer dándole un valor en píxeles a estos atributos o dándole un
valor en tanto por ciento.
Ejemplo:
<IMG SRC="DINOSAURIO.GIF" HEIGHT=31 WIDTH=53>
Resultado: (la imagen tiene la mitad del tamaño original)
ALIGN : Este es un atributo nos puede servir para alinear la imagen a derecha e izquierda
dándole los valores RIGHT y LEFT respectivamente o para que los titulares de la imagen
(una línea de texto al lado de la imagen) estén alineados arriba (TOP), abajo (BOTTOM) o
en medio (MIDDLE). Veámoslo más claro con estos ejemplos:
Ejemplo1:
12 Computación Extraprogramática – 2do año – Prof: Osvaldo González Laugè
Computación Extraprogramática – 2do1er año – Prof: Osvaldo González Laugè
<IMG SRC="DINOSAURIO.GIF" ALIGN=RIGHT>
Ejemplo2:
<IMG SRC=”DINOSAURIO.GIF” ALIGN=MIDDLE>
Texto alineado en medio de la imagen.
UNIDAD 7: Enlaces / Hipervínculos
Los enlaces son una de las partes más importantes y prácticas dentro de los documentos
Web ya que permiten entrelazar diferentes documentos entre si que a su vez pueden estar
entrelazados con otros, etc. Hay diferentes tipos de enlaces: enlaces a otra página, enlaces
a una URL, marcadores y enlaces a una dirección de correo.
Enlaces a otra página
Vamos a enlazar a continuación dos documentos Web dentro de un mismo directorio (hay
que recordar que es importante saber el directorio que ocupan nuestros documentos e
imágenes. Para realizar este vinculo entre páginas utilizaremos el siguiente código.
Ejemplo:
<A HREF="OTRAPAGINA.HTML">Ir a otra página</A>
Resultado:
Ir a otra página
Mediante este vínculo hemos unido esta página con otra que se llama OTRAPAGINA.HTML,
así podemos unir las distintas páginas de nuestros proyectos con este tipo de enlace.
Enlaces a una URL
En el apartado anterior enlazábamos dos documentos Web dentro de un mismo directorio.
En este apartado vamos poner un vínculo a una dirección Web (URL). Lo haremos de la
siguiente manera:
Ejemplo:
<A HREF="http://WWW.YAHOO.COM">Ir al buscador Yahoo</A>
Resultado:
Ir al buscador Yahoo
Lo que conseguimos en este caso es un vínculo entre nuestra página y otra de Internet (en
este caso Yahoo).
Marcadores
Los marcadores son un tipo de enlaces dentro de una misma página, se suelen utilizar en
páginas de gran extensión para saltar de un sitio a otro deNtro de la Web sin tener que
utilizar la barra de desplazamiento. Veámoslo más claro en este ejemplo en el que
pondremos un marcador al principio de esta página.
Ejemplo:
<A NAME="ENLACEAOTRO">Enlaces a otra página</A>
<A HREF="#ENLACEAOTRO">Ir a enlaces a otra página</A>
Resultado:
Ir a enlaces a otra página
Vamos a estudiar esto de los marcadores con más detenimiento, para empezar observemos
que tienen dos partes: una en la que se define el atributo NAME y otra en la que se define el
atributo HREF. En la primera estamos insertando una etiqueta con un nombre donde
definimos el lugar donde tiene que ir el vínculo, es lo que llamamos una marca. Entre la
Computación Extraprogramática – 2do año – Prof: Osvaldo González Laugè 13
Computación Extraprogramática – 2do1er año – Prof: Osvaldo González Laugè
apertura y el cierre de esta etiqueta irá el texto o imagen a la que estará apuntando el
vínculo, en nuestro caso el vínculo apunta a la sección de esta pagina de: Enlaces a otra
página, por lo que iremos buscando en el código donde pusimos anteriormente esa frase y
le pondremos la etiqueta. La siguiente etiqueta es la que crea el vinculo en la frase: Ir a
enlaces a otra página que apunta a donde hemos colocado la marca (el atributo HREF
tendrá como valor el nombre de la marca precedido por #).
Enlaces a una dirección de correo
En este apartado nuestro enlace será hacia una dirección de correo. Este enlace funcionará
cuando hagamos click en el abriéndonos el servidor de correo que tengamos
predeterminado en nuestro ordenador y con la dirección a la que apunta ya colocada.
Ejemplo:
<A HREF="MAILTO:NOMBRE@YAHOO.COM">Mi E-Mail</A>
Resultado:
Mi E-Mail
En esta clase de enlaces no se olvide poner: MAILTO: en el atributo HREF antes de la
dirección de correo electrónico.
UNIDAD 8: Colores
El atributo color se puede definir de dos maneras, mediante una numeración hexadecimal o
de manera literal.
Numeración Hexadecimal
La numeración hexadecimal consta de 16 dígitos frente a los 10 de la decimal habitual. Van
en este orden (de menor a mayor):
0123456789ABCDEF
Para indicar un color con este método lo haremos de la siguiente manera:
"#RRGGBB"
Donde RR toma un valor para el color Rojo, GG toma un valor para el color Verde y BB toma
un valor para el color Azul. Así por ejemplo para conseguir el color rojo pondríamos el
máximo valor (FF) en RR y el mínimo (00) en los demás: "#FF0000". Combinando estos
números se sacan el resto de colores.
Literales
También se pueden definir algunos colores de manera literal, para conseguir el color rojo por
ejemplo se pondría: RED.
Aquí tenemos una lista con colores literales.
Aliceblue Antiquewhite Aqua Aquamarine
Azure Beige Bisque Black
Blanchedalmond Blue Blueviolet Brown
Burlywood Cadetblue Chartreuse Chocolate
Coral Cornflowerblue Cornsilk Crimson
Cyan Darkblue Darkcyan Darkgoldenrod
Darkgray Darkgreen Darkkhaki Darkmagenta
Darkolivegreen Darkorange Darkorchild Darkred
Darksalmon Darkseagreen Darkslateblue Darkslategray
Darkturquoise Darkviolet Deeppink Deepskyblue
Dimgray Dodgerblue Firebrick Floralwhite
Forestgreen Fuchsia Gainsboro Ghostwhite
Gold Goldenrod Gray Green
Greenyellow Honeydew Hotpink Indianred
Indigo Ivory Khaki Lavender
Lavenderblush Lawngreen Lemonchiffon Lightblue
Lightcoral Lightcyan Lightgoldenrodyellow Lightgreen
14 Computación Extraprogramática – 2do año – Prof: Osvaldo González Laugè
Computación Extraprogramática – 2do1er año – Prof: Osvaldo González Laugè
Lightgrey Lightpink Lightsalmon Lightseagreen
Lightskyblue Lightslategray Lightsteelblue Lightyellow
Lime Limegreen Linen Magenta
Maroon Mediumblue Mediumorchild Mediumpurple
Mediumseagreen Mediumslateblue Mediumspringgreen Mediumturquoise
Mediumvioletred Midnightblue Mintcream Mistyrose
Moccasin Navajowhite Navy Oldlace
Olive Olivedrab Orange Orangered
Orchild Palegoldenrod Palegreen Paleturquoise
Palevioletred Papayawhip Peachpuff Peru
Pink Plum Powderblue Purple
Red Rosybrown Royalblue Saddlebrown
Salmon Sandybrown Seagreen Seashell
Sienna Silver Skyblue Slateblue
Slategray Snow Springgreen Steelblue
Tan Teal Thistle Tomato
Turquoise Violet Wheat White
Whitesmoke Yellow Yellowgreen
UNIDAD 9: Tablas
ESTRUCTURA
Las tablas son muy útiles a la hora de ordenar y estructurar nuestros documentos Web.
Veamos de qué etiquetas constan las tablas en el código HTML:
• La tabla utiliza el código <TABLE> y </TABLE>.
• La tabla estará compuesta por filas que se definirán entre las etiquetas <TR> y </TR>.
• Las filas estarán compuestas por celdas que se definirán entre las etiquetas <TH>,
</TH> ó <TD>, </TD> según sean de encabezados o datos comunes.
Veamos un ejemplo de tabla, donde podemos observar como definimos la tabla <TABLE>
luego la fila <TR> y luego las celdas <TD> que contiene esa fila.
Ejemplo:
<TABLE>
<TR>
<TD>FILA1COL1</TD>
<TD>FILA1COL2</TD>
</TR>
<TR>
<TD>FILA2COL1</TD>
<TD>FILA2COL2</TD>
</TR>
</TABLE>
Resultado:
FILA1COL1 FILA1COL2
FILA2COL1 FILA2COL2
Atributos
Así a simple vista puede que no distingamos correctamente la tabla pero miradla ahora
como queda con un borde (El borde lo agregamos dando un valor al atributo BORDER).
Ejemplo:
<TABLE BORDER=3>
<TR>
<TD>FILA1COL1</TD>
<TD>FILA1COL2</TD>
Computación Extraprogramática – 2do año – Prof: Osvaldo González Laugè 15
Computación Extraprogramática – 2do1er año – Prof: Osvaldo González Laugè
</TR>
<TR>
<TD>FILA2COL1</TD>
<TD>FILA2COL2</TD>
</TR>
</TABLE>
Resultado:
FILA1COL1 FILA1COL2
FILA2COL1 FILA2COL2
En esta tabla vemos que no hay distancia desde la letra hasta el borde, esto es, que la tabla
se adecua al tamaño de las letras. Si nosotros queremos que haya un espacio de
separación entre las letras el borde se lo asignaremos mediante el atributo CELLPADDING.
Ejemplo:
<TABLE BORDER=3 CELLPADDING=12>
<TR>
<TD>FILA1COL1</TD>
<TD>FILA1COL2</TD>
</TR>
<TR>
<TD>FILA2COL1</TD>
<TD>FILA2COL2</TD>
</TR>
</TABLE>
Resultado:
FILA1COL1 FILA1COL2
FILA2COL1 FILA2COL2
Si observamos el borde de la tabla vemos que tiene un espacio entre los cantos, esto lo
podremos modificar gracias al atributo CELLSPACING.
Ejemplo:
<TABLE BORDER=3 CELLPADDING=12 CELLSPACING=6>
<TR>
<TD>FILA1COL1</TD>
<TD>FILA1COL2</TD>
</TR>
<TR>
<TD>FILA2COL1</TD>
<TD>FILA2COL2</TD>
</TR>
</TABLE>
Resultado:
FILA1COL1 FILA1COL2
FILA2COL1 FILA2COL2
Para definir una anchura y altura a la tabla se le dan valores a los atributos WIDTH y
HEIGHT.
Ejemplo:
<TABLE BORDER=3 CELLPADDING=12 CELLSPACING=6 WIDTH=350 HEIGHT=150>
<TR>
<TD>FILA1COL1</TD>
<TD>FILA1COL2</TD>
</TR>
16 Computación Extraprogramática – 2do año – Prof: Osvaldo González Laugè
Computación Extraprogramática – 2do1er año – Prof: Osvaldo González Laugè
<TR>
<TD>FILA2COL1</TD>
<TD>FILA2COL2</TD>
</TR>
</TABLE>
Resultado:
FILA1COL1 FILA1COL2
FILA2COL1 FILA2COL2
La tabla se alinea a la página con el atributo ALIGN.
Ejemplo:
<TABLE BORDER=3 CELLPADDING=12 CELLSPACING=6 WIDTH=350 HEIGHT=150
ALIGN=RIGTH>
<TR>
<TD>FILA1COL1</TD>
<TD>FILA1COL2</TD>
</TR>
<TR>
<TD>FILA2COL1</TD>
<TD>FILA2COL2</TD>
</TR>
</TABLE>
Resultado:
FILA1COL1 FILA1COL2
FILA2COL1 FILA2COL2
UNIDAD 10: Creación de una página con marcos
Se crea una página con marcos o FRAMES para dividirla en sectores que pueden, o no,
mantenerse mientras se navega el sitio.
Esto se ve comúnmente en las páginas que poseen una botonera generalmente en el sector
izquierdo de la página, que cuando se navegue por el sitio usando dicha barra de
navegación cambiaran los contenidos del marco de la derecha manteniéndose los datos del
otro FRAME iguales.
ESTRUCTURA
<FRAMESET COLS=”20%,80%”>
<FRAME NAME=”IZQUIERDA” SRC=”PAGINA1.HTML”>
<FRAME NAME=”DERECHA” SRC=”PAGINA2.HTML”>
</FRAMESET>
Vamos a describir a continuación la estructura escrita anteriormente. La
primera línea indica que se va a trabajar con una página de marcos
dividida en dos columnas, una del 20% de la página y la otra del 80% de
la página, quedando como resultado lo siguiente:
En la segunda y tercer línea se indica el nombre que va a poseer cada frame y que página
se cargará en cada uno de los lados. Recordemos que el INDEX (así se llamará el archivo)
Computación Extraprogramática – 2do año – Prof: Osvaldo González Laugè 17
Computación Extraprogramática – 2do1er año – Prof: Osvaldo González Laugè
es una especie de esqueleto contenedor de páginas. Entonces indicamos que en la primera
columna se cargará una página llamada PAGINA1.HTML y en la segunda columna se
cargará PÁGINA2.HTML.
El atributo NAME se utilizará en los hipervínculos de las páginas cargadas para indicar en
que frame del documento HTML se cargarán las páginas. Ej:<A HREF=”PÁGINA3.HTML”
TARGET=”DERECHA”>.
Por último, la cuarta línea indica el cierre de la etiqueta FRAMESET abierta al comienzo de
la estructura.
UNIDAD 11: Dónde coloco mi página?
Servidores
Ahora que ya tienes lista tu página hay que saber en qué servidor montarla para que todos
puedan verla. Si dispones de una conexión a Internet en tu casa o negocio, tu proveedor
tiene la obligación de proporcionarte espacio en su servidor para tu página. Si no dispones
de una conexión a Internet existen algunas compañías que ofrecen este servicio de manera
gratuita. Ahí te va una lista de algunas de estas compañías en Internet:
www.geocities.com
www.tripod.com
www.starmedia.com
www.host22.com
https://nic.ar/
Es un servicio público del Ministerio de Relaciones Exteriores, Comercio Internacional y
Culto (MRECIC). Se encarga de registrar dominios terminados en .ar.
El NIC (Network Information Center) es la autoridad que delega los nombres de dominio a
quienes los solicitan. Cada país en el mundo (o propiamente dicho cada Top-Level Domain o
TLD) cuenta con una autoridad que registra los nombres bajo su jurisdicción.
En otras palabras, el NIC es quien se encarga de registrar los dominios de un país. Por
ejemplo, Argentina cuenta con su NIC que se encarga de registrar los dominios bajo .ar.
Generalmente los NIC´s cobran una cuota de mantenimiento anual por cada dominio
registrado. Cada organización elige el precio por mantenimiento que considera adecuado por
sus servicios.
