Unidad 7

Lenguaje HTML

Sesin de aprendizaje N 1

INTRODUCCION AL HTML
Es el lenguaje con el que se escriben las pginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada, y que est compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del documento. Un documento hipertexto no slo se compone de texto, puede contener imgenes, sonido, vdeos, etc., por lo que el resultado puede considerarse como un documento multimedia. Los documentos HTML deben tener la extensin html o htm, para que puedan ser visualizados en los navegadores (programas que permiten visualizar las pginas web).

Los Navegadores:
Un navegador es el que interpreta el cdigo HTML de la pgina que visitamos por lo que a veces puede ocurrir que dos usuarios visualicen la misma pgina de forma distinta porque tienen instalados navegadores distintos o incluso versiones distintas del mismo navegador. Dos de los navegadores que continuamente estn realizando extensiones son Internet Explorer y Netscape Navigator, que realizan extensiones incluso antes de que se establezcan los estndares, intentando incluir las nuevas funciones incluidas en los borradores.

Los Editores:
Un editor es un programa que nos permiten redactar documentos. Hoy en da existen un gran nmero de editores que permiten crear pginas web sin la necesidad de escribir ni una sola lnea de cdigo HTML. Estos editores disponen de un entorno visual, y generan automticamente el cdigo de las pginas. Al poder ver en todo momento cmo quedar la pgina en el navegador, se facilita la creacin de las pginas, y el uso de mens permite ganar rapidez. Algunos de los editores visuales con los que podramos crear nuestras pginas Web son Macromedia Dreamweaver, Microsoft Frontpage, Adobe Pagemill, NetObjects Fusion, CutePage, HotDog Proffesional, Netscape Composer y Arachnophilia, de los cuales algunos tienen la ventaja de ser gratuitos.

Las Etiquetas:
Las etiquetas o marcas delimitan cada uno de los elementos que componen un documento HTML. Existen dos tipos de etiquetas, la de comienzo de elemento y la de fin o cierre de elemento. La etiqueta de comienzo est delimitada por los caracteres < y >. Est compuesta por el identificador o nombre de la etiqueta, y puede contener una serie de atributos opcionales que permiten aadir ciertas propiedades. Su sintaxis es: <identificador atributo1 atributo2 ...> Los atributos de la etiqueta de comienzo siguen una sintaxis predefinida y pueden tomar cualquier valor propio del usuario, o valores HTML predefinidos. La etiqueta de final est delimitada por los caracteres </ y >. Est compuesta por el identificador o nombre de la etiqueta, y no contiene atributos. Su sintaxis es: </identificador>.

1 Ao de Secundaria

94

Prof. Jorge Salazar Silva

Unidad 7

Lenguaje HTML

PRACTICA CALIFICADA N1

1. Ingresamos al Bloc de notas (Inicio/ Todos los Programas/Accesorios/Bloc de notas) y escribimos lo siguiente:

2. Una vez hecho esto hacemos clic en el men Archivo y clic en la opcin Guardar como:

3. En el cuadro de dialogo Guardar como, seleccionamos en el lateral izquierdo Escritorio y en el recuadro Nombre escribimos practica1.html (para que se guarde como pagina Web) y luego hacemos clic en el botn Guardar.

1 Ao de Secundaria

95

Prof. Jorge Salazar Silva

Unidad 7

Lenguaje HTML

4. Minimizamos todas las ventanas abiertas y en el Escritorio hacemos doble clic sobre nuestro archivo practica1 que tiene ya como icono adicional el Internet Explorer.

5. Ahora podremos visualizar nuestra pgina Web. 6. Regresamos al Bloc de notas, hacemos clic en el men Archivo / nuevo y redactamos lo siguiente:

7. Guardamos el archivo con el nombre pagina2.html en la misma ubicacin.

1 Ao de Secundaria

96

Prof. Jorge Salazar Silva

Unidad 7

Lenguaje HTML

PUEDO HACERLO YO

1. Qu significa las siglas HTML? ........................................................................................................................ ........................................................................................................................

2. Qu es el Lenguaje de Marcador de Hipertexto? ........................................................................................................................ ........................................................................................................................ ........................................................................................................................ ........................................................................................................................

Completa el crucigrama
Verticales:
1.- Es el navegador ms cocido del mundo y es de la empresa Microsoft. 3.- es un programa que nos permiten redactar documentos

Horizontales:
2.- Son los que interpretan el cdigo HTML de la pgina que visitamos.
4.- Es el lenguaje que permite escribir texto de forma estructurada, y que est compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del documento. 5.- Es otro de los navegadores ms conocidos y usado pero no pertenece la familia Microsoft. 6.- Son las que delimitan cada uno de los elementos que componen un documento HTML.

1 Ao de Secundaria

97

Prof. Jorge Salazar Silva

Unidad 7

Estructura HTML

Sesin de aprendizaje N 2

ESTRUCTURA HTML
La estructura bsica en cdigos HTML de una pgina Web es: <html> <head> ............... </head> <body> ............... </body> </html>

Identificador del tipo de documento <html>

Todas las pginas web escritas en HTML tienen que tener la extensin html o htm. Al mismo tiempo, tienen que tener las etiquetas <html> y </html>. Entre las etiquetas <html> y </html> estar comprendido el resto del cdigo HTML de la pgina. Por ejemplo: <html> ... </html>

Cabecera de la pgina <Head>

Est formada por las etiquetas <head> y </head>. La etiqueta <head> va justo debajo de la etiqueta <html>. Por ejemplo: <html> <head> ... </head> ... </html> La cabecera de la pgina se utiliza para agrupar informacin sobre ella, como puede ser el ttulo.

Ttulo de la Pgina <Title>

El ttulo de la pgina es el que aparecer en la parte superior de la ventana del navegador, cuando la pgina est cargada en l. Estas etiquetas han de estar dentro de la cabecera, es decir, entre las etiquetas <head> y </head>. Por ejemplo: <html> <head> <title> Computacin e informtica </title> </head> ... </html>
1 Ao de Secundaria

98

Prof. Jorge Salazar Silva

Unidad 7

Estructura HTML

Cuerpo del Documento <Body>

El cuerpo del documento contiene la informacin propia del documento, es decir lo que queremos que aparezca en nuestra pgina Web. Todos estos elementos tienen que encontrarse entre las etiquetas <body> y </body>, que van justo debajo de la cabecera. Por ejemplo: <html> <head> <title> Curso de HTML </title> </head> <body> ... </body> </html>

PUEDO HACERLO YO

1. Cul es la estructura bsica de una pgina Web? ............................................................................................................................. ............................................................................................................................. ............................................................................................................................. ............................................................................................................................. ............................................................................................................................. .............................................................................................................................

2. Est formada por las etiquetas <head> y </head>. La etiqueta <head> va justo debajo de la etiqueta <html> ............................................................................................................................. .............................................................................................................................

3. Es el que aparecer en la parte superior de la ventana del navegador, cuando la pgina est cargada en l. ............................................................................................................................. .............................................................................................................................

4. Contiene la informacin propia del documento, es decir lo que queremos que aparezca en nuestra pgina Web. ............................................................................................................................. .............................................................................................................................

1 Ao de Secundaria

99

Prof. Jorge Salazar Silva

Unidad 7

Estructura HTML

PRACTICA CALIFICADA N2

1. 2.

Con la ayuda del profesor creamos una Carpeta en el Escritorio de nombre diseo2_web Ingresa al Bloc de notas y escribe la siguiente lnea de cdigos:

3.

Una vez hecho esto hacemos clic en el men Archivo y clic en la opcin Guardar como:

4.

En el cuadro de dialogo Guardar como, seleccionamos el Escritorio, as como tambin la Carpeta que hemos creado. En el recuadro Nombre escribimos practica2.html (para que se guarde como pagina Web) y luego hacemos clic en el botn Guardar. 100
Prof. Jorge Salazar Silva

5.

1 Ao de Secundaria

Unidad 7

Lenguaje HTML

6.

Ahora hacemos clic en el botn Guardar.

DEMUESTRO MIS HABILIDADES

En un documento en blanco realizamos lo siguiente: (Si te queda tiempo para hacerlo en clase lo realizas, de lo contrario para la prxima traerlo en una memoria USB)

1 Ao de Secundaria

101

Prof. Jorge Salazar Silva

Unidad 7

Fondos Web

Sesin de aprendizaje N 3

FONDO DE LA PGINA WEB

Normalmente cuando diseamos nuestra pgina Web queremos dotarla de un diseo caracterstico que se represente en un color de fondo para la pgina que, es la parte principal para que nuestro documento Web sea atractiva para los visitantes. Un fondo de pgina puede ser una imagen, como tambin un cdigo hexadecimal para un color en particular. A travs de la etiqueta <body> es posible establecer el color o la imagen de fondo de la pgina.

Color de fondo de la pgina <body bgcolor=..>

El color de fondo de la pgina se establece con el atributo bgcolor, al que es posible asignarle un color representado en hexadecimal o por un nombre predefinido. Cdigos en hexadecimal para los colores ms utilizados:

Cdigo hexadecimal
#FFFFFF

color
Blanco Negro Azul marino Azul Verde Marrn Violeta Plomo Rojo Fuxia Amarillo

#000000 #000080 #0000FF #008000 #800000 #800080 #808080 #FF0000 #FF00FF #FFFF00

Por ejemplo, para hacer que el color de fondo de una pgina sea de color azul, tendramos que escribir: <html> <head> <title>..</title> </head> <body bgcolor="#0000FF"> . ............................................ </body> </html> Como tambin podramos poner <html> <head> <title>..</title> </head> <body bgcolor="blue"> . ............................................ </body> </html> Cualquiera de las dos es vlida, pero es conveniente trabajar con cdigos hexadecimales por qu tenemos muchas posibilidades para trabajar con otras tonalidades de color (se puede encontrar en el Internet)
1 Ao de Secundaria

102

Prof. Jorge Salazar Silva

Unidad 7

Fondos Web

PRACTICA CALIFICADA N3

1.

Ingresa al Bloc de notas y escribe la siguiente lnea de cdigos:

2. 3.

Una vez hecho esto hacemos clic en el men Archivo y clic en la opcin Guardar como: En el cuadro de dialogo Guardar como, seleccionamos el Escritorio y escribimos en la casilla nombre biblioteca_escolar.html y hacemos clic en el botn Guardar.

4. 5.

Minimizamos todas las ventanas y hacemos doble clic en el archivo biblioteca_escolar.html Luego de visualizar nuestra pgina, hacemos clic en el icono del Bloc de notas de la barra de tareas.

1 Ao de Secundaria

103

Prof. Jorge Salazar Silva

Unidad 7 6. Modificamos el cdigo HTML de: <body bgcolor="#124A49"> por; 7. <body bgcolor="#FFFFFF">

Fondos Web

Hacemos clic en el men Archivo y clic en la opcin Guardar (esto nos permite actualizar los cambios)

Regresamos a nuestra pgina Web abierta haciendo clic en el Icono del Internet de la Barra de tareas. Con nuestra pgina Web en pantalla otra vez hacemos clic en el botn Actualizar o presionamos la tecla F5.

DEMUESTRO MIS HABILIDADES

En el mismo archivo (biblioteca_escolar.html) modifica o cambia el cdigo para el color de fondo de la pgina de acuerdo a los cdigos Hexadecimales.

Disea una pgina Web empleando color de fondo sobre cualquier tema de tu agrado.

Completa el crucigrama
Verticales:
1.- El cdigo hexadecimal #FFFF00 representa al color: 4.- Con este atributo se establece el color de fondo de la pgina.

Horizontales:
2.- El cdigo hexadecimal #800000 representa al color: 3.- El cdigo hexadecimal #0000FF representa al color: 4.- A travs de esta etiqueta se establece el color o la imagen de fondo de la pgina. 5.- El cdigo hexadecimal #FF0000 representa al color: 6.- El cdigo hexadecimal #FFFFFF representa al color:

1 Ao de Secundaria

104

Prof. Jorge Salazar Silva

Unidad 7

Formatos de texto

Sesin de aprendizaje N 4

FORMATOS DE TEXTO

Cuando diseamos nuestra Web es importante formatear el texto, como el color, tamao, estilo, alineacin, etc. Al disear una pgina lo debemos hacer atractivo para nuestros visitantes, de esto depende que haya muchas personas que la visiten.

Formato de texto <font>

El formato de texto lo establece la etiqueta <font>. Para formatear el texto lo describimos dentro de las etiquetas <font> y </font>, especificando algunos de los siguientes atributos de la etiqueta:
Atributo face color size Tipo fuente color del texto tamao del texto Valores Nombre de la fuente, o fuentes (Arial, Comic Sans MS, etc) Cdigo hexadecimal (#800000, #FF00FF, etc) Valores del 1 al 7.

Por ejemplo, si queremos que nuestro texto tenga el siguiente formato: Color: Azul Fuente: Comic Sans MS Tamao: 4 Tendramos que escribir: <html> <head> <title>..</title> </head> <body bgcolor="#FFFF00"> <font color="#0000FF " size="4" face="Comic Sans MS, Arial, MS Sans Serif"> . ............................................ </body> </html>

Saltos de lnea <br>

Cuando diseamos una pgina Web para un salto de lnea no presionamos la tecla ENTER como en el MS Word u otro Editor de textos. Cuando diseamos nuestra Web empleando cdigos HTML si presionamos la tecla ENTER, no se interpreta al visualizar la Web en el navegador, por el contrario el salto de lnea debe producirse en el cdigo. Para que se produzca el salto de lnea en el navegador, en lugar de pulsar la tecla ENTER hay que escribir la etiqueta <br>. La etiqueta <br> no tiene etiqueta de cierre.

1 Ao de Secundaria

105

Prof. Jorge Salazar Silva

Unidad 7

Formatos de texto

Estilos de texto <b> <i> <u>

Existen una serie de etiquetas que permiten aplicar diferentes estilos al texto que, generalmente se utilizan para resaltarlo. Etiqueta <b> <i> <u> Estilo negrita cursiva subrayado

No hay que olvidarse que todas estas etiquetas necesitan una etiqueta de cierre, y que pueden aplicarse varias etiquetas al mismo texto.

Alineacin de texto (align)

La alineacin nos permite obtener que nuestro texto aparezca alineado a la derecha, izquierda o al centro mediante el atributo align los siguientes Atributo left right center justify Etiqueta <p align="left">.</p> <p align=" right ">.</p> <p align="center">.</p> <p align=" justify ">.</p> Valor Todo el prrafo alineado a la izquierda Todo el prrafo alineado a la derecha Todo el prrafo alineado al centro Todo el prrafo justificado

PUEDO HACERLO YO
1. Qu son los formatos de texto? Explique. ........................................................................................................................ ........................................................................................................................ ........................................................................................................................ ........................................................................................................................

2.

Qu son los saltos de lnea y cul es su etiqueta ........................................................................................................................ ........................................................................................................................ ........................................................................................................................

3.

Cules son los atributos del formato de texto? ........................................................................................................................ ........................................................................................................................ ........................................................................................................................

1 Ao de Secundaria

106

Prof. Jorge Salazar Silva

Unidad 7 PRACTICA CALIFICADA N4

Formatos de texto

1. 2.

Crea en el Escritorio una Carpeta de nombre Diseo Web Ingresa al Bloc de notas y escribe la siguiente lnea de cdigos:

3. 4. 5. 6.

Una vez hecho esto hacemos clic en el men Archivo y clic en la opcin Guardar como: En el cuadro de dialogo Guardar como, elegimos la carpeta que hemos creado en el Escritorio En la casilla nombre escribimos dia_nio.html y hacemos clic en el botn Guardar. Modifica algunos atributos como el color de fondo, de texto, alineacin, etc. Luego presntaselos al profesor.

DEMUESTRO MIS HABILIDADES

Crea un diseo Web empleando toda tu habilidad y los conocimientos adquiridos hasta ahora

1 Ao de Secundaria

107

Prof. Jorge Salazar Silva

Unidad 8

Imgenes

Sesin de aprendizaje N 1

IMGENES EN LA WEB
Las imgenes proporcionan mayor dinamismo a nuestras pginas y sirven para mejorar la presentacin del mismo. Existen varios tipos de imgenes (incluyendo las que tienen animacin) que vuelven ms atractivas nuestras pginas. Las imgenes son muy importantes ya que una pgina Web con solo texto es sumamente cansada y a veces resulta aburrido para nuestros visitantes ver solo texto

Tipos de imgenes
Existen varios tipos de imgenes, vamos a explicar brevemente las caractersticas de los ms utilizados. Un formato grfico se identifica por el tipo de archivo, y se reconoce por la extensin del archivo, por ejemplo un archivo llamado motocicleta.jpg tiene extensin o tipo jpg.

Tipos de imgenes no vectoriales o de mapa de bits:

JPG o JPEG. Es uno de los formatos ms utilizados hoy en da, indicado sobre todo para fotografas en Internet por su capacidad de conseguir imgenes suficientemente reales y con un gran nmero de colores. GIF. Es el ms utilizado en Internet, permite una buena compresin con imgenes de pocos tonos, tipo iconos y botones. Tambin permite crear grficos animados. BMP. Este tipo de imagen no admite compresin por lo que estas imgenes ocupan mucho espacio. Se utiliza, por ejemplo, en la imagen tapiz de Windows. PNG. Moderno formato que permite compresin.

Otros tipos de archivos son:

MOV y AVI. Se emplea para los archivos de vdeo digital. WAV y MP3 Se emplea para los archivos de sonido.

Etiqueta para una imagen <img>

Para insertar una imagen es necesario insertar la etiqueta <img>. Dicha etiqueta no necesita etiqueta de cierre. El nombre de la imagen se especifica con el atributo src. Por ejemplo, para insertar la siguiente imagen de nombre inca.gif:

1 Ao de Secundaria

108

Prof. Jorge Salazar Silva

Unidad 8

Imgenes

Tendramos que escribir: <html> <head> <title>..</title> </head> <body > <font ..> . ........................................... </font> <img src="inca.gif"> . . </body> </html> Para trabajar de una forma sencilla y ordenada, que cuando diseemos todas las pginas web (documentos html) se encuentren en una misma Carpeta, y que dentro de esta Carpeta existan diferentes Carpetas para agrupar otros objetos, como puede ser una Carpeta destinada a almacenar imgenes, o una Carpeta destinada a almacenar archivos de audio, etc.

Texto alternativo para la imagen

Con el atributo alt podemos hacer que cuando el cursor pase por la imagen se muestre un texto. Por ejemplo, imaginemos que en la imagen anterior deseamos que cuando el cursor del mouse se muestre el texto Atahualpa ultimo inca, para ello insertamos el siguiente cdigo: <img src="inca.gif" alt="Atahualpa ultimo Inca" >

PUEDO HACERLO YO
1. Qu son las imgenes para la Web? Explique. ........................................................................................................................ ........................................................................................................................ ........................................................................................................................ ........................................................................................................................

Completa el crucigrama
Verticales:
2.- Este tipo de imagen es un moderno formato que permite compresin. 4.- Proporcionan mayor dinamismo a nuestras pginas y sirven para mejorar la presentacin del mismo

Horizontales:
1.3.5.6.Este tipo de imagen no admite compresin. Es el ms utilizado en Internet, permite una buena compresin Con este atributo podemos hacer que cuando el cursor pase por la imagen se muestre un texto Es uno de los formatos de imgenes utilizados en Internet por su capacidad de conseguir imgenes suficientemente reales y con un gran nmero de colores. 7.- Con este atributo se especifica el nombre de la imagen.

1 Ao de Secundaria

109

Prof. Jorge Salazar Silva

Unidad 8

Imgenes

PRACTICA CALIFICADA N5

1. 2.

Creamos una Carpeta de nombre diseo_imagenes Ingresamos al Internet Explorer y descargamos imgenes con el texto violencia familiar

3.

Ahora hacemos clic en el botn Buscar imgenes

4.

Hacemos clic con el botn derecho en la imagen diainternacionaldelanovieloencia.jpg y luego en el men contextual que nos aparece hacemos clic en la opcin Guardar imagen como

1 Ao de Secundaria

110

Prof. Jorge Salazar Silva

Unidad 8

Imgenes

5.

En el cuadro de dialogo Guardar como, hacemos doble clic en la Carpeta que hemos creado en el Escritorio

6.

En la casilla nombre escribimos violencia1 y hacemos clic en el botn Guardar.

1 Ao de Secundaria

111

Prof. Jorge Salazar Silva

Unidad 8

Imgenes

7.

De la misma forma descargamos la siguiente imagen con el nombre violencia2 en la misma Carpeta

Ingresamos al Bloc de notas y escribimos la siguiente lnea de cdigos:

8. 9.

Hacemos clic en el men Archivo / Guardar como En el Cuadro de Dilogo Guardar seleccionamos la Carpeta que hemos creado en el Escritorio

10. Escribimos en la casilla nombre pr5_apellidos.html 11. Hacemos clic en el botn Guardar 12. Visualiza tu pgina.

1 Ao de Secundaria

112

Prof. Jorge Salazar Silva

Unidad 8 ,
Sesin de aprendizaje N 2

Tablas

TABLAS
Hoy en da, la mayora de las pginas Web se basan en tablas, ya que resultan de gran utilidad al mejorar notablemente las opciones de diseo. Todos los objetos (imgenes) se ubican por defecto a la izquierda de las pginas web, pero gracias a las tablas es posible alinear el texto con imgenes. Una Tabla est compuesta de Filas y Columnas y la interseccin de ellas se llaman Celdas.

Etiqueta tabla <table>

Para crear una tabla hay que insertar las etiquetas <table> y </table>. Entre dichas etiquetas habr que especificar las filas y columnas que formarn la tabla.

Fila <tr>
Para crear una fila es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la tabla. Estas etiquetas debern insertarse entre las etiquetas <table> y </table>. Por ejemplo, para crear una tabla con cuatro filas escribiramos: <table> <tr>...</tr> <tr>...</tr> <tr>...</tr> <tr>...</tr> </table>

Columna <td>
Para crear columnas empleamos las etiquetas <td> y </td> dentro de las las etiquetas <tr> y </tr>. Por ejemplo, para insertar la siguiente tabla: Cursos MS Word Photoshop Tendramos que escribir: <table border="1"> <tr> <td>Cursos</td> <td>Dias</td> </tr> <tr> <td>MS Word</td> <td> Lun Mar- Mier </td> </tr> <tr> <td>Photoshop</td> <td>Jue - Vier</td> </tr> </table> Dias Lun Mar- Mier Jue - Vier

1 Ao de Secundaria

113

Prof. Jorge Salazar Silva

Unidad 8

Tablas

Imagen de fondo de la pgina <body background =..>

La imagen de fondo puede establecerse a travs del atributo background, indicando la ruta en la que se encuentra la imagen. Por ejemplo, para hacer que la imagen de fondo de una pgina sea la imagen fondo.gif, que se encuentra en el mismo directorio en el que se encuentra guardada la pgina, tendremos que escribir: <html> <head> <title>..</title> </head> <body background="fondo.gif"> . ............................................ </body> </html> La cabecera de la pgina se utiliza para agrupar informacin sobre ella, como puede ser el ttulo. En el Internet existen variedad de imgenes de fondo sera cuestin de buscarlas.

PUEDO HACERLO YO
1. Cul sera la definicin de una Tabla? Explique. ....................................................................................................................... ....................................................................................................................... ....................................................................................................................... .......................................................................................................................

Completa el crucigrama
Verticales:
1.- Esta etiqueta se emplea para insertar una Tabla. 2.- Para crearlas empleamos las etiquetas <td> y </td> dentro de las las etiquetas <tr> y </tr>

Horizontales:
2.- Una Tabla est compuesta de Filas y Columnas y la interseccin de ellas se llaman. 3.- Para crearlas es necesario insertar las etiquetas <tr> y </tr> 4.- La imagen de fondo puede establecerse a travs del atributo

1 Ao de Secundaria

114

Prof. Jorge Salazar Silva

Unidad 8 PRACTICA CALIFICADA N6

Tablas

1. 2. 3.

Creamos en el Escritorio una Carpeta con el nombre diseo_tablas Ingresamos al Internet Explorer y luego al Google. En la ventana del navegador escribimos fondos web en la casilla buscar, hacemos clic en el portal imgenes y clic en el botn Buscar imgenes

4.

Hacemos clic con el botn derecho en la imagen de fondo de nuestro agrado, hacemos clic en la opcin Guardar imagen.

13. En el cuadro de dialogo Guardar como, hacemos doble clic en la Carpeta que hemos creado en el Escritorio

14. En la casilla nombre escribimos fondo_web y hacemos clic en el botn Guardar.

1 Ao de Secundaria

115

Prof. Jorge Salazar Silva

Unidad 8

Tablas

5.

Ingresamos al Bloc de notas y escribimos la siguiente lnea de cdigos

6. 7. 8. 9.

Hacemos clic en el men Archivo / Guardar como En el Cuadro de Dilogo Guardar como seleccionamos la Carpeta que hemos creado en el Escritorio Escribimos en la casilla nombre violencia_familiar.html Hacemos clic en el botn Guardar.

10. Visualiza tu pgina.

1 Ao de Secundaria

116

Prof. Jorge Salazar Silva

Unidad 8

Hipervnculos

Sesin de aprendizaje N 3

HIPERVNCULOS
Un hipervnculo vnculo, no es ms que un enlace que al hacer clic nos lleva de una pgina a otra archivo. Aquellos elementos (texto, imgenes, etc.) sobre los que se deseemos insertar un enlace han de encontrarse entre las etiquetas <a> y </a>. A travs del atributo href se especifica la pgina a la que est asociado el enlace, la pgina que se visualizar cuando el usuario haga clic en el enlace.

Tipos de referencias
Existen diferentes formas de expresar una referencia a una pgina a travs del atributo href.

Referencia absoluta
Conduce a una ubicacin externa al sitio en el que se encuentra el documento. La ubicacin es en Internet, en este caso hay que empezar la referencia por http:// , el nombre del dominio y algunas veces el nombre de la pgina. Si no se escribe el nombre de la pgina se cargar la pgina de inicio asociada al dominio. Por ejemplo, "http://www.google.com" tendr el mismo efecto que http://www.google.com/index.htm" Para insertar el enlace:

Visita www.google.com
Tendramos que escribir: <a href="http://www.google.com">Visita www.google.com</a>

Referencia relativa al sitio

Conduce a un documento situado dentro del mismo sitio que el documento actual. Un sitio web es un conjunto de archivos y carpetas, relacionados entre s, con un diseo similar o un objetivo comn, estando todos ellos dentro de una misma carpeta, conocida como carpeta raz del sitio. Por ejemplo, teniendo en cuenta que un documento web llamado pagina1.html se encuentra directamente dentro de la carpeta raz del sitio, para insertar el enlace:

Enlace a pgina1: Practica calificada1

Tendramos que escribir: <a href="/pagina1.html">Enlace a pgina1: Practica calificada1</a>

1 Ao de Secundaria

117

Prof. Jorge Salazar Silva

Unidad 8

Hipervnculos

PRACTICA CALIFICADA N7

1. 2.

Creamos en el Escritorio una Carpeta con el nombre web_site Ingresamos al Bloc de notas y realizamos la siguiente lnea de cdigos:

3.

Hacemos clic en el men Archivo / Guardar como

4. 5. 6.

Seleccionamos la Carpeta que hemos creado en el Escritorio (Escritorio / web_site) En la casilla nombre escribimos musica.html y hacemos clic en el botn guardar Otra vez hacemos clic en el men Archivo Guardar como

7.
8.

En la casilla nombre escribimos comida.html. Hacemos clic en el botn guardar 118

Prof. Jorge Salazar Silva

1 Ao de Secundaria

Unidad 8

Hipervnculos

9.

Modificamos la lnea de cdigos

10. Hacemos clic en el men Archivo / Guardar

11. Se guardan los cambios 12. Otra vez hacemos clic en el men Archivo Guardar como

13. Seleccionamos la Carpeta que hemos creado en el Escritorio (Escritorio / web_site) 14. En la casilla nombre escribimos hoby.html y hacemos clic en el botn guardar 15. Ahora modificamos la lnea de cdigos

1 Ao de Secundaria

119

Prof. Jorge Salazar Silva

Unidad 8

Hipervnculos

16. Hacemos clic en el men Archivo / Guardar 17. Se guardan los cambios 18. Otra vez hacemos clic en el men Archivo Guardar como 19. Seleccionamos la Carpeta que hemos creado en el Escritorio (Escritorio / web_site) 20. En la casilla nombre escribimos index.html y hacemos clic en el botn guardar 21. Ahora modificamos la lnea de cdigos

22. Hacemos clic en el men Archivo / Guardar 23. Visualiza la pgina

1 Ao de Secundaria

120

Prof. Jorge Salazar Silva