Guía No. 2 grado 6

L.F.1813 de octubre 20 de 2003

COMUNIDAD FRANCISCANA PROVINCIA DE LA SANTA FECOLEGIO FRANCISCANO DE SAN LUIS BELTRAN

CódigoPGF 02 R-04

Proceso GESTION DE FORMACION

ProcedimientoDISEÑO CURRICULAR

GUIA No.2 DE TECNOLOGIA E INFORMÁTICA

Página 1 de 4

GRADO 6º CURSO 1-2-3 PERIODO: II FECHA: 25 – 04 - 2013 ALUMNO_________________________________________________________________________________

DOCENTES: Lic. GREGORIO PEÑA CORONADO – Ing. MIGUEL MANJARRES JIMENO

DESEMPEÑO: Reconocer la importancia y utilidad del lenguaje del HTML para la elaboración de páginas Web

INDICADOR DE DESEMPEÑO

Inserta en una páginas Web enlaces, textos e imágenes

CONTENIDOS:

Hiperenlaces Imágenes Salto de línea Separadores Sangrado de texto

HIPERENLACE <A>Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva a una página o archivo. Aquellos elementos (texto, imágenes, etc.) sobre los que se desee insertar un enlace han de encontrarse entre las etiquetas <a> y </a>. A través del atributo href se especifica la página a la que está asociado el enlace, la página que se visualizará cuando el usuario haga clic en el enlace.Por ejemplo, para insertar el enlace:Visita www.gmail.comHabría que escribir:<a href="http://www.gmail.com">Visita www.gmail.com </a >IMAGEN <IMG>Todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten mejorar su apariencia, o dotarla de una mayor información visual. Para insertar una imagen es necesario insertar la etiqueta <img>. Dicha etiqueta no necesita etiqueta de cierre. El nombre de la imagen ha de especificarse a través del atributo src. Por ejemplo, para insertar la siguiente imagen:Ingresa al sitio http://www.aulaclic.com1. Haz clic derecho sobre la siguiente imagen y selecciona la opción Guardar imagen como…

Aparecerá la siguiente ventana:

3. Guarda la imagen con el nombre aulaclic en Mis documentos.4. Abre el Bloc de notas y edita el siguiente código HTML tal como se muestra en la siguiente figura:

http://www.aulaclic.com/

http://www.aulaclic.com/



CódigoPGF 02 R-04




Página 2 de 4

5. Haz clic en el menú Archivo de la Barra de menú y selecciona la opción Guardar.

6. Guarda el código HTML en Mis documentos con el nombre ejemplo.html como se muestra en la figura:

7. Haz clic en el botón:

8. Abre Mis documentos y haz doble clic sobre el siguiente icono:SALTOS DE LÍNEA <BR>

En general, cuando trabajamos con un editor de texto se produce un salto de línea al pulsar la tecla INTRO. Si pulsamos INTRO en un documento HTML, el salto de línea se producirá en el código, pero no se mostrará en el navegador. Para que se produzca el salto de línea en el navegador, en lugar de pulsar la tecla INTRO hay que insertar la etiqueta <br> donde se desee que se produzca el salto.

La etiqueta <br> no precisa ninguna etiqueta de cierre. No hay que insertar la etiqueta </br> después de ella, ya que dicha etiqueta no existe. Por ejemplo, para insertar el texto:

Queridos usuarios, tengo el placer de comunicarles que hay una nueva sección.

Habría que escribir:

Queridos usuarios,<br>tengo el placer de comunicarles que hay una nueva sección.

SEPARADORES <HR>

El elemento que suele utilizarse para separar secciones dentro de una misma página es la regla horizontal. Para insertar una regla horizontal hay que insertar la etiqueta <hr>. Dicha etiqueta no precisa ninguna etiqueta de cierre.

Es posible especificar algunos atributos de la regla horizontal:

Atributo Significado Posibles valores

align

alineación de la regla dentro de la página left (izquierda)

right (derecha)

<HTML><HEAD><TITLE>Ejemplo de IMG</TITLE></HEAD>

<BODY>

<CENTER><H3>IMAGEN INSERTADA</H3></CENTER>

A continuación hay una <B>imagen insertada</B>:<BR><BR>

<IMG SRC = "aulaclic.jpg">

</BODY></HTML>

CÓDIGO HTML RESULTADO EN EL NAVEGADOR



CódigoPGF 02 R-04




Página 3 de 4

center (centro)

width ancho de la reglaun número, acompañado de % cuando se desee

que sea en porcentaje

size alto de la regla un número

noshadeeliminar el sombreado de la

reglano puede tomar valores

Por ejemplo, para insertar el texto y la regla horizontal siguientes:

Inicio

Bienvenidos a mi página.


Inicio<hr align="left" width="300%" size="5" noshade>Bienvenidos a mi página

SANGRADO DE TEXTO <BLOCKQUOTE>

La sangría es una especie de margen que se establece a ambos lados del texto. Para que un texto aparezca sangrado, se inserta entre las etiquetas <blockquote> y </blockquote>. Esta etiqueta en un principio se definió para delimitar citas pero que como la mayoría de los navegadores resuelven la cita incluyendo un sangrado del texto, su uso para sangrar texto se ha generalizado.

El uso de la etiqueta <blockquote> obliga a que el texto aparezca en una nueva línea. Insertando el texto entre varias etiquetas <blockquote> y </blockquote> se consigue que los márgenes sean mayores. Por ejemplo, para insertar el texto:

Queridos usuarios, tengo el placer de comunicarles que hay una nueva sección.


Queridos usuarios, <blockquote> tengo el placer de comunicarles que hay una nueva sección</blockquote>

ACTIVIDAD EXPLORATORIA INDIVIDUAL

1. Realice los ejemplos que se encuentra en la guía orientado por el docente en la sala de informática.

ACTIVIDAD EXTRACLASE

Consulta las siguientes preguntas

1. ¿Para qué se utiliza la etiqueta Font en el lenguaje HTML?2. ¿Cuáles son los atributos que presenta la etiqueta Font? 3. ¿Cuál es la función de la etiqueta basefont?4. Realiza una página Web utilizando las etiquetas de la guía No. 2.



CódigoPGF 02 R-04




Página 4 de 4

BIBLIOGRAFIA

ING. GRANADOS GARCIA. Irene. Tutorial de diseño de páginas Web. gregorioalbertopc.blogspot.com

Guía No. 2 grado 6

Education

Transcript of Guía No. 2 grado 6