Guía No. 2 grado 6

L.F.1813 de octubre 20 de 2003
COMUNIDAD FRANCISCANA PROVINCIA DE LA SANTA FE
COLEGIO FRANCISCANO DE SAN LUIS BELTRAN
Código
PGF 02 R-04
Proceso
GESTION DE FORMACION
Procedimiento
DISEÑ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.com
Habría que escribir:
<a href="http://www.gmail.com">Visita www.gmail.com</a>

Código
PGF 02 R-04
Proceso
Procedimiento
DISEÑO CURRICULAR
Página 2 de 4
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:
1. Ingresa al sitio http://www.aulaclic.com
2. 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:
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:
<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ódigo
PGF 02 R-04
Proceso
Procedimiento
DISEÑO CURRICULAR
Página 3 de 4
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.
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)
center (centro)
width ancho de la regla
un número, acompañado de % cuando se desee
que sea en porcentaje
size alto de la regla un número
noshade
eliminar el sombreado de la
regla
no 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

Código
PGF 02 R-04
Proceso
Procedimiento
DISEÑO CURRICULAR
Página 4 de 4
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.
BIBLIOGRAFIA
ING. GRANADOS GARCIA. Irene.
Tutorial de diseño de páginas Web.
gregorioalbertopc.blogspot.com

Guía No. 2 grado 6

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (8)

Similar a Guía No. 2 grado 6

Similar a Guía No. 2 grado 6 (20)

Más de gregoriopena

Más de gregoriopena (20)

Último

Último (20)

Guía No. 2 grado 6