COMUNIDAD FRANCISCANA PROVINCIA DE LA SANTA FE             Código                                                COLEGIO F...
COMUNIDAD FRANCISCANA PROVINCIA DE LA SANTA FE              Código                                         COLEGIO FRANCIS...
COMUNIDAD FRANCISCANA PROVINCIA DE LA SANTA FE              Código                                          COLEGIO FRANCI...
COMUNIDAD FRANCISCANA PROVINCIA DE LA SANTA FE          Código                                           COLEGIO FRANCISCA...
COMUNIDAD FRANCISCANA PROVINCIA DE LA SANTA FE     Código                                      COLEGIO FRANCISCANO DE SAN ...
Upcoming SlideShare
Loading in …5
×

Guía No. 3 Grado 6

566 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
566
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Guía No. 3 Grado 6

  1. 1. COMUNIDAD FRANCISCANA PROVINCIA DE LA SANTA FE Código COLEGIO FRANCISCANO DE SAN LUIS BELTRAN PGF 02 R-04 Proceso GESTION DE FORMACION Página 1 de 3 Procedimiento DISEÑO CURRICULAR L.F.1813 de octubre 20 de 2003 GUIA No.3 DE TECNOLOGIA E INFORMÁTICAGRADO 6º CURSO 1-2-3 PERIODO: III FECHA 24 de Agosto de 2012ALUMNO_________________________________________________________________________________DOCENTES: Lic. GREGORIO PEÑA CORONADO – Ing. MIGUEL MANJARRES JIMENODESEMPEÑO: Reconocer la importancia y utilidad del lenguaje del HTML para la elaboración de páginas WebINDICADOR DE DESEMPEÑO• Inserta en una páginas Web enlaces, textos e imágenesCONTENIDOS: Formatear y resaltado de texto Marquesinas Hiperenlaces Imágenes FORMATEAR EL TEXTO <FONT>...Las propiedades del texto pueden modificarse a través de la etiqueta <font>. Para ello, podemos insertar eltexto entre las etiquetas <font> y </font>, especificando algunos de los atributos de la etiqueta: Atributo Significado Posibles valores Fuente Face nombre de la fuente, o fuentes Color color del texto número hexadecimal o texto predefinido valores del 1 al 7, siendo por defecto el 3, Size tamaño del texto o desplazamiento respecto al tamaño por defecto, añadiendo + o - delante del valorPor ejemplo, para insertar el texto: Bienvenidos a www.hotmail.comHabría que escribir:<font color="blue" size="4" face=" Arial">Bienvenidos a www.hotmail.com</font>También es posible definir una fuente para todo el documento. Para ello, hay que insertar la etiqueta<basefont> después de la etiqueta <body>. La etiqueta <basefont> no necesita una etiqueta de cierre, ypermite modificar los mismos atributos del texto que la etiqueta <font>. Por ejemplo:<body><basefont color="Red" size="4" face="Arial">Este código haría que la fuente del documento fuera por defecto de color azul, de tamaño 4 y Arial. Si despuésde indicar la etiqueta <basefont> o <font>, el navegador encuentra otra etiqueta <font>, la que prevalece essiempre la última que se encuentra. RESALTADO DEL TEXTO <B>...
  2. 2. COMUNIDAD FRANCISCANA PROVINCIA DE LA SANTA FE Código COLEGIO FRANCISCANO DE SAN LUIS BELTRAN PGF 02 R-04 Proceso GESTION DE FORMACION Página 2 de 3 Procedimiento DISEÑO CURRICULAR L.F.1813 de octubre 20 de 2003 GUIA No.3 DE TECNOLOGIA E INFORMÁTICAExisten una serie de etiquetas que permiten aplicar diferentes estilos al texto que se encuentra entre ellas, ygeneralmente se utilizan para resaltarlo. Estos estilos pueden agruparse según vayan asociados al tipo de letrao a la información que represente el texto.No hay que olvidar que todas estas etiquetas necesitan una etiqueta de cierre, y que pueden aplicarse variasetiquetas al mismo texto.A continuación se muestran algunas etiquetas asociadas al tipo de letra: Etiqueta Significado Ejemplo Negrita <b> curso HTML <i> Cursiva curso HTML <u> Subrayado curso HTML <s> Tachado curso HTML <tt> teletipo (máquina de escribir) curso HTML <big> aumenta el tamaño de la fuente curso HTML <small> disminuye el tamaño de la fuente curso HTMLLas etiquetas más utilizadas son las asociadas al tipo de letra, ya que son más fáciles de recordar, y en muchoscasos los resultados son los mismos que los de aplicar una etiqueta diferente. Por ejemplo, el resultado deaplicar las etiquetas <b> y <strong> es el mismo. Incluso a veces algunos estilos asociados al tipo deinformación pueden representarse de forma distinta según el navegador. Por ejemplo, para insertar el texto: Bienvenidos a www.yahoo.esHabría que escribir:<font color="Red" size="4" face="Comic Sans MS"> Bienvenidos a<b><u><tt>www.yahoo.es</tt></u></b></font> MARQUESINAS <MARQUEE>Las marquesinas son líneas de texto que pueden desplazarse de un lado a otro de la ventana en forma delínea. Para insertar una marquesina, es necesario insertar el texto entre las etiquetas <marquee> y</marquee>.La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si se desea es posiblehacer que estas propiedades varíen. A través del atributo behavior puede modificarse el tipo de movimiento.Puede tomar los valores alternate (de lado a lado de la ventana, como si rebotara en los extremos), scroll (deun lado a otro, continuamente) o slide (de un lado a otro, pero una sola vez). A través del atributo directionpuede modificarse la dirección en la que se moverá el texto. Puede tomar los valores down (de arriba a abajo),up (de abajo a arriba), left (de derecha a izquierda) o right (de izquierda a derecha). También es posibleestablecer un color de fondo, a través del atributo bgcolor.Por ejemplo, para insertar un ejemplo de marquesina habría que escribir:<marquee bgcolor="blue" behavior="alternate" direction="right"><b><font color="red" size="15">Esto feliz de estar aprendiendo el lenguaje HTML </font></b></marquee>
  3. 3. COMUNIDAD FRANCISCANA PROVINCIA DE LA SANTA FE Código COLEGIO FRANCISCANO DE SAN LUIS BELTRAN PGF 02 R-04 Proceso GESTION DE FORMACION Página 3 de 3 Procedimiento DISEÑO CURRICULAR L.F.1813 de octubre 20 de 2003 GUIA No.3 DE TECNOLOGIA E INFORMÁTICA 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 oarchivo.Aquellos elementos (texto, imágenes, etc.) sobre los que se desee insertar un enlace han de encontrarse entrelas etiquetas <a> y </a>. A través del atributo href se especifica la página a la que está asociado el enlace, lapá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 suapariencia, o dotarla de una mayor información visual. Para insertar una imagen es necesario insertar laetiqueta <img>. Dicha etiqueta no necesita etiqueta de cierre. El nombre de la imagen ha de especificarse através del atributo src. Por ejemplo, para insertar la siguiente imagen:1. Ingresa al sitio http://www.aulaclic.com2. Haz clic derecho sobre la siguiente imagen y selecciona la opción Guardar imagen como… Aparecerá la siguiente ventana:
  4. 4. COMUNIDAD FRANCISCANA PROVINCIA DE LA SANTA FE Código COLEGIO FRANCISCANO DE SAN LUIS BELTRAN PGF 02 R-04 Proceso GESTION DE FORMACION Página 4 de 3 Procedimiento DISEÑO CURRICULAR L.F.1813 de octubre 20 de 2003 GUIA No.3 DE TECNOLOGIA E INFORMÁTICA3. 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: CÓDIGO HTML RESULTADO EN EL NAVEGADOR <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>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: ACTIVIDAD EXTRACLASEInvestiga1. ¿Para qué se utiliza la etiqueta <P> y </P>?2. ¿Cuál es la función de la etiqueta H1?3. ¿Cuáles son los diferentes formatos que se pueden utilizar para colocar imágenes a una página web?4. ¿Cuál es la función de el atributo width?5. ¿Para qué se utilizan los atributo height?
  5. 5. COMUNIDAD FRANCISCANA PROVINCIA DE LA SANTA FE Código COLEGIO FRANCISCANO DE SAN LUIS BELTRAN PGF 02 R-04 Proceso GESTION DE FORMACION Página 5 de 3 Procedimiento DISEÑO CURRICULAR L.F.1813 de octubre 20 de 2003 GUIA No.3 DE TECNOLOGIA E INFORMÁTICA BIBLIOGRAFIAING. GRANADOS GARCIA. Irene. Tutorial de diseño de páginas Web.gregorioalbertopc.blogspot.com

×