UNIDAD 1

Introducción a las paginas Web, al HTML y JavaScript.

Erika Johana Caicedo Arias

ESPACIOS Y SALTOS DE LINEA

Cuando se escribe una página web, es frecuentemente el uso de varios espacios de saltos de línea para mejorar el aspecto del código fuente.

 Sin embargo, los navegadores ignoran los espacios adicionales entre palabras, y saltos de línea, tratando de mostrar la página de acuerdo a algunas preferencias (tipo de letra, tamaño, resolución de la pantalla, etc.) que son configuradas en la maquina cliente.

 En consecuencia, HTML tiene etiquetas para respetar los saltos de línea y los espacios en blanco.

EJEMPLO 3

Línea de textoOtra línea de texto <br><br><pre>Línea de textoOtra línea de texto</pre>

La etiqueta <br> es la encargada de indicarle al navegador que el texto que se encuentra a continuación deberá ser mostrado en la línea siguiente. Al usar dos veces esta etiqueta (<br><br>), se está dejando una línea vacía. Tenga en cuenta que la etiqueta <br> no necesita cerrarse con </br>.Por otra parte, el texto delimitado por <pre> y </pre> indican que se deben respetar los espacios y los saltos de línea presentes en el código fuente.

CARACTERES ESPECIALES

Especial HTML Especial HTML

á &aacute; < &lt;

é &eacute; > &gt;

í &iacute; & &amp;

ó &oacute; “ &quot;

ú &uacute; ¿ &#191;

ñ &ntilde; ¡ &#161;

Ñ &Ntilde;

EJEMPLO 4

<pre>P&aacute;gina, tambi&eacute;n,

art&iacute;culo, Aplicaci&oacute;n, &uacute;nico,

tama&ntilde;o,TAMA&Ntilde;O, &#191;Qu&eacute;?,

&#161;C&oacute;mo!</pre>

ETIQUETA <H1></H1>

Delimita texto enfatizado, donde el numero 1 especifica el tamaño. Este número puede cambiarse por otro, 2 y 6, siendo el 1el más grande y el 6 el más pequeño. Además, el texto delimitado por estas etiquetas se muestra en líneas independientes.

EJEMPLO 5

Texto normal<h1> Texto entre h1 </h1><h2> Texto entre h2 </h2><h3> Texto entre h3 </h3><h4> Texto entre h4 </h4><h5> Texto entre h5 </h5><h6> Texto entre h6 </h6>

ETIQUETA <P>

Indica el inicio de un nuevo párrafo. El efecto es similar al que se logra escribiendo <br><br>. Esta etiqueta posee el atributo align con los valores left, rigt, o center para especificar la alineación deseada en el nuevo párrafo. Al igual que <br>, <p> no se cierra con </p>.

ETIQUETA <HR>

Dibuja una línea horizontal tan ancha como la permita la ventana del navegador. Posee los modificadores size, para especificar el grosor: width, para indicar el ancho de la línea en pixeles o porcentaje y align, para especificar la alineación horizontal. La etiqueta <hr> no necesita cerrarse con </hr>. Ejemplo: “formateoTexto”.

ETIQUETA <DIV></DIV>

Delimita elementos de un documento para controlar de una manera más eficiente. Por ejemplo, para alinear a la derecha o justificar a ambos lados.

ETIQUETA <FONT></FONT>

Delimita un texto que desea modificarse con parámetros como:

♦ Color: Debe especificarse un color en formato RGB (6 caracteres hexadecimales, o escribir en ingles el nombre del color.

♦ Size: Modifica el tamaño de los caracteres, con un numero entre 1 y 7 entre comillas. El tamaño 1 es el mas pequeño.

♦ Face: Establece el tipo de letra, Hay que tener en cuenta que no todos los tipos de letras están disponibles en todos los computadores.

LISTAS Y ENUMERACIONES

Una lista es un conjunto de ítems (palabras o párrafos), los cuales se pueden diferenciar utilizando viñetas o números. HTML soporta listas numeradas, no numeradas y listas de definición, de uno o varios niveles.Las principales etiquetas que se utilizan para el manejo de listas y enumeraciones son:

♦ Etiqueta <ul>: Delimita una lista sin enumeración, mostrando una vineta por cada ítem especificado con la etiqueta <li>.

♦ Etiqueta <li>: Es utilizada para insertar cada ítem en una lista con vinetas o numerada. No es necesario utilizar </li>.

♦ Etiqueta <ol>: Delimita una lista numerada, mostrando un numero por cada ítem especificado con la etiqueta <li>.

EJEMPLO 6

<ul> <li> Monitor <li> CPU <ol>

<li> Procesador<li> Memoria

</ol> <li> Teclado <li> Mouse</ul>

LISTAS ORDENADAS <OL>

4. Rectoría5. Tesorería6. Contabilidad7. Biblioteca

El caso anterior se puede obtener mediante el uso de las etiquetas <ol> (Order List) y <li> (list Item).

EJEMPLO 7

<ol type="1" start="4"><li> Rectoría<li> Tesorería<li> Contabilidad<li> Biblioteca

</ol>

En la etiqueta <ol>, el atributo type=“1” indica que la lista será numérica, mientras que el atributo start=“4” hace que el primer elemento del listado este precedido por el numero 4 el segundo por el numero 5 y así sucesivamente.El mismo listado de la siguiente manera:

A. RectoríaB. Tesorería

C. ContabilidadD. Biblioteca

EJEMPLO 8

<ol type="A" start="1"> <li> Rectoría <li> Tesorería <li> Contabiliad <li> Biblioteca

</ol>

LISTAS CON VIÑETAS

Si en lugar de una letra o un numero precediendo los items del listado, lo que se quiere es que aparezca una viñeta, se debe utilizar la etiqueta <ul> (Unorder List) de la siguiente manera:

Ejemplo 8

<ul type="circle"> <li> item1 <li> item2 <li> item3 <li> item4

</ul>

La etiqueta <ul> únicamente tiene al atributo type=“circle”, que se refiere al tipo de viñeta que se presentara, este puede ser cambiado por; circle, disq o square.

LISTA DE DEFINICIÓN

♦ Etiqueta <dl></dl>: Indica el comienzo de una lista de definición de términos.

♦ Etiqueta <dt>: Se utiliza para indicar el termino que será definido dentro de una lista de definiciones.

♦ Etiqueta <dd>: Es la etiqueta utilizada para la definición de cada termino en una lista de definiciones.

EJEMPLO 9

<html><head> <title> Ejemplo 9 </title> </head><body><dl> <dt> Monitor: <dd> Dispositivo de salida. <dt> Teclado: <dd> Dispositivo de entrada. <dt> Disco Duro: <dd> Dispositivo de

almacenamiento externo.</dl></body></html>

IMÁGENESUna página web puede contener texto, imágenes, animaciones, sonidos, videos y otros. Estos elementos pueden ser simplemente presentados en la página o servir como enlaces que permiten navegar a través de la información de internet, según los intereses particulares del usuarios.

ETIQUETA <IMG>

La etiqueta <img> contiene la información necesaria para mostrar una foto o dibujo en un documento web. Soporta los formatos gráficos mas comunes como gif y jpg, y sus atributos son los siguientes:

♦ Src: Para indicar la ubicación del archivo grafico que se desea mostrar en la página web.

♦ Align: Para la alineación de la foto, los valores pueden ser left, right o middle.

♦ Title: Muestra una pequeña caja de texto cuando el puntero del ratón se detiene sobre la imagen. El texto que se desea mostrar debe ir encerrado entre comillas.

♦ Alt: Se utiliza para mostrar en la pantalla un texto cuando el navegador no puede mostrar la imagen. Algunos navegadores muestran una pequeña caja de texto cuando el puntero del raton pasa por encima de la imagen si no se utiliza el atributo title.

♦ Border: Estable el grosor del borde, medido en pixeles.

♦Height: Permite establecer la altura de la imagen medida en pixeles o en porcentaje.

♦Width: Permite establecer el ancho de la imagen medida en pixeles o en porcentaje.

EJEMPLO 10

<html><head> <title> Ejemplo Imagen </title> </head><body><img src="computador.gif" align="left"

width="200"border="10" alt="El computador">

<img src="computador.gif" width="150" heigth="150“ title="El computador">

</body></html>

ENLACESEs una de las etiquetas mas importantes de HTML es la que permite, a través de vínculos o enlaces , navegar por las diferentes páginas o sitios de la red. Un enlace es un elemento esencial de internet, el cual se activa haciendo clic sobre el. Usando un enlace es posible, entre otros:

♦ Pasar de un lugar a otro en la misma pagina web.

♦ Ir a otra página web.♦ Ir a un sitio FTP.♦ Enlace al servicio Email.

Un vinculo puede ser colocado sobre una zona de texto o sobre una imagen, lo que lo convierte en un elemento “sensible”; este elemento responderá a acciones tales como hacer clic, doble clic o desplazar el puntero del ratón sobre el. Si el enlace se coloca sobre una franja de texto, ésta aparecerá subrayada y con diferente color; si es una imagen la que lo contiene, HTML entonces colocara un borde del color definido para el atributo link de la etiqueta <body>.

ETIQUETA <A>

Es la etiqueta utilizada para definir enlaces y tiene los siguiente atributos:

♦ Acceskey: Especifica la tecla de acceso, presionando alt y la tecla de acceso, este enlace se activa presionando la tecla Enter.

♦ Href: especifica el destino, el cual puede ser de diferentes clases.

♦ Name: Permite asignar un nombre que sirve como punto de referencia para enlaces de la misma página o de otras páginas.

♦ Title: permite especificar un texto en una pequeña caja de texto, alusiva al enlace.

PASAR DE UN LUGAR A OTRO EN LA MISMA PÁGINA

Para facilitar la navegación dentro de una página cuando su contenido es demasiado largo y al desplegarla ocupa mas de una pantalla, se pueden colocar enlaces que lleven al usuario a sitios específicos o predeterminados de la misma, esto puede ser visible con los atributos de la etiqueta <a>. Ejemplo Automóvil

ENLACES A OTRA PÁGINA

Cuando se quiere crear un enlace a otra pagina que reside en el mismo directorio el atributo href debe contener la ruta, el nombre la página y su extensión. Estas páginas así creadas deben guardarse dentro del mismo directorio. Ejemplo Menú.

ENLACES A PÁGINAS REMOTAS

La verdadera potencia del lenguaje HTML consiste en que permite enlazar y acceder a páginas web localizadas en cualquier servidor, para lo cual lo único que se necesita conocer es su dirección, que se constituye el valor nombre del atributo href.El procedimiento para utilizar una imagen como elemento de enlace es similar a los anteriores. Ejemplo Menú.

ENLACE AL SERVICIO MAIL

El protocolo o servicio mailto permite definir otro tipo de enlace, que activa la herramienta de correo electrónico para enviar un mensaje a la dirección definida en el atributo href. Este enlace puede ser colocado indistintamente sobre imágenes o texto. Ejemplo Menu.