Академический Документы
Профессиональный Документы
Культура Документы
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
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
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:
1 Ao de Secundaria
96
Unidad 7
Lenguaje HTML
PUEDO HACERLO YO
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
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>
98
Unidad 7
Estructura 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
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.
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
Unidad 7
Fondos Web
Sesin de aprendizaje N 3
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
Unidad 7
Fondos Web
PRACTICA CALIFICADA N3
1.
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
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.
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
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.
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>
1 Ao de Secundaria
105
Unidad 7
Formatos de texto
No hay que olvidarse que todas estas etiquetas necesitan una etiqueta de cierre, y que pueden aplicarse varias etiquetas al mismo texto.
PUEDO HACERLO YO
1. Qu son los formatos de texto? Explique. ........................................................................................................................ ........................................................................................................................ ........................................................................................................................ ........................................................................................................................
2.
3.
Cules son los atributos del formato de texto? ........................................................................................................................ ........................................................................................................................ ........................................................................................................................
1 Ao de Secundaria
106
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.
Crea un diseo Web empleando toda tu habilidad y los conocimientos adquiridos hasta ahora
1 Ao de Secundaria
107
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.
1 Ao de Secundaria
108
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.
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
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.
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
Unidad 8
Imgenes
5.
En el cuadro de dialogo Guardar como, hacemos doble clic en la Carpeta que hemos creado en el Escritorio
6.
1 Ao de Secundaria
111
Unidad 8
Imgenes
7.
De la misma forma descargamos la siguiente imagen con el nombre violencia2 en la misma Carpeta
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
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.
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
Unidad 8
Tablas
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
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
115
Unidad 8
Tablas
5.
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.
1 Ao de Secundaria
116
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>
1 Ao de Secundaria
117
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.
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.
1 Ao de Secundaria
Unidad 8
Hipervnculos
9.
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
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
1 Ao de Secundaria
120