4º ESO INFORMÁTICA TEMA 7: LENGUAJE HTML ACTIVIDADES. A continuación abriéremos el bloc de notas: Inicio>Programas>Bloc de notas.

Tamaño: px

Comenzar la demostración a partir de la página:

Download "4º ESO INFORMÁTICA TEMA 7: LENGUAJE HTML ACTIVIDADES. A continuación abriéremos el bloc de notas: Inicio>Programas>Bloc de notas."

Nieves Díaz Salazar
hace 6 años
Vistas:

4º ESO INFORMÁTICA TEMA 7: LENGUAJE HTML ACTIVIDADES FECHA LÍMITE: 13 de mayo Práctica 1: Lo primero que vamos a hacer es crear en nuestro pendrive una carpeta que llamaremos WEBnuestronombre como

En este documento y como ya vimos en clase vamos a escribir el siguiente código Y ahora en Archivo>Guardar como, y en la carpeta creada con anterioridad guardaremos nuestra primera página web como el

1 4º ESO INFORMÁTICA TEMA 7: LENGUAJE HTML ACTIVIDADES FECHA LÍMITE: 13 de mayo Práctica 1: Lo primero que vamos a hacer es crear en nuestro pendrive una carpeta que llamaremos WEBnuestronombre como por ejemplo: Webivan sin caracteres especiales sino simplemente letras. A continuación abriéremos el bloc de notas: Inicio>Programas>Bloc de notas. En este documento y como ya vimos en clase vamos a escribir el siguiente código Y ahora en Archivo>Guardar como, y en la carpeta creada con anterioridad guardaremos nuestra primera página web como el nombre de practica1.html en formato de texto. Ahora vamos a la carpeta y abrimos nuestra página web creada fijándonos que aparece el texto de nuestro cuerpo (body) y en el navegador el título de la misma. Práctica 2: Ahora vamos a usar atributos. Cada una de las etiquetas tienen sus propios atributos y vamos a usar en esta caso atributos de la etiqueta BODY. Los atributos dan características a la etiqueta. Veamos los siguientes atributos: Atributos de Body: Bgcolor: Especifica el color del fondo Background: Ingresa un color o una imagen de fondo Text: Indica el color del texto Link: Color del enlace no visitado Vlink: Color del enlace visitado 1

2 Los atributos se ingresan dentro de la misma etiqueta como por ejemplo: <body bgcolor= red > Vamos a introducir este mismo atributo en nuestra página pero usaremos como color blue. Luego pinchamos en Archivo>Guardar y actualizamos nuestro navegador de forma que ahora aparecerá la página con un fondo azul. Una vez hayas visto que esto funciona entra en la siguiente página ( y elige un color para el fondo de tu página que más te guste y luego inserta el código que te de la página en el lugar donde habías puesto blue (Conserva las comillas) Ahora sólo queda cambiar el color del texto para lo cual tenemos que insertar otro atributo seguido del anterior dentro de la misma etiqueta body; en este caso el atributo será text quedando la etiqueta de esta forma : <body bgcolor= xxxxxx text= xxxxxx > siendo el segundo conjunto de xxxxxx el código de color que hayamos elegido para el texto. Práctica 3 En esta práctica vamos conocer nuevas etiquetas como pueden ser los saltos de línea. Para lo cual vamos a escribir más cosas en el body y debajo de Hola Mundo escribiremos Mi nombre es Estudio 4º ESO En el Colegio Ntra. Sra. del Buen Consejo Y le damos a Guardar Como y esta nueva página la guardaremos como el nombre de practica2.html y vemos el resultado en el explorador. Podremos comprobar que todo aparece en una sola línea y no como lo escribimos en diferentes líneas para lo cual introduciremos una nueva etiqueta para saltar de línea <br> que no tiene etiqueta de cierre. Prueba entre 4º ESO y la tercera línea poner dos etiquetas seguidas iguales y verás como aparece doble espacio entre frases. Vamos a probar ahora una nueva etiqueta como es <hr> que tampoco tiene etiqueta de cierre. Vamos a colocarla entre Hola mundo y Mi nombre de forma que el código quedaría parecido a este: 2

3 Ahora, tras guardar, observa qué cambio se ha producido en tu página. Como vimos anteriormente también la etiqueta <hr> tiene sus atributos que se resumen en: Width: permite definir la longitud de la línea (Se puede usar un porcentaje del total de la longitud) Size: permite definir el grosor de la línea. Para comprobar y usar estos atributos vamos a cambiar el tamaño de la línea. Para ello pondremos el atributo en la etiqueta <hr> como ya hicimos antes con otra etiqueta añadiendo en ésta size=4 luego probaremos con tamaño 8 y 20 para darnos cuenta del cambio producido. Probaremos el otro atributo: width al 60% y al 80% Práctica 4 Ahora vamos a trabajar con ENCABEZADOS y para ello vamos a modificar la plantilla anterior en el bloc de notas eliminando el texto en donde aparece el nombre y apellidos, el curso y el colegio y guardamos el nuevo archivo en guardar como poniéndole el nombre de practica3.html La etiqueta de encabezados es <hx> en donde X es un número que va desde el 1 hasta el 6, siendo el 1 el encabeza más importante y por lo tanto más grande. Esta etiqueta si tiene cierre </hx> Para ver cómo funcionan estos encabezados vamos a poner en el cuerpo de nuestra página lo siguiente: Antes de la línea separadora y como título (en donde antes teníamos puesto Hola Mundo) ahora pondremos como título ENCABEZADOS y luego, debajo de la línea pondremos 6 encabezados. En cada uno de ellos el texto a escribir será: Encabeza de nivel X en donde X será el número del nivel que 3

hagamos; Y este texto lo pondremos entre etiquetas de encabezad <hx> correspondiente al nivel del encabezado, de forma que en nuestra página web debe aparecer algo parecido a esto: Procura que el

Práctica 5 Vamos a probar ahora otra etiqueta que es la de párrafo: <P> </P> Para practicar con esta etiqueta vamos a crear una nueva página que guardaremos como practica4.

4 hagamos; Y este texto lo pondremos entre etiquetas de encabezad <hx> correspondiente al nivel del encabezado, de forma que en nuestra página web debe aparecer algo parecido a esto: Procura que el fondo sea del mismo color (#7401DF) y la letra también (#FF0080). Guarda y comprueba. Práctica 5 Vamos a probar ahora otra etiqueta que es la de párrafo: <P> </P> Para practicar con esta etiqueta vamos a crear una nueva página que guardaremos como practica4.html que con lo que ya sabes tienes que ser capaz de que tenga: De Título: Practicas en HTML En el cuerpo: antes de una línea separadora un encabeza grande (tamaño 1) que diga: Lenguaje HTML Debajo de la línea (la línea con el formato que tú quieras) pondremos un encabeza tamaño 2 que diga: Etiquetas Y luego debajo de este encabezado un párrafo que aparezca así: Seleccionando la opción «ver código fuente» en el navegador, se puede ver realmente la información que está recibiendo éste y cómo la está interpretando. Por ejemplo: en Internet Explorer o en Firefox, simplemente hay que desplegar el menú «ver» y luego elegir «código fuente». Vamos a ver ahora los atributos de la etiqueta párrafo que son: 4

5 Align que puede tomar alguno de estos valores: Left: justifica a la izquierda Right: justifica a la derecha Center: justifica al centro Se usa como este ejemplo: <p align= right> </p> En el ejemplo anterior vamos a centrar el párrafo que copiamos antes. Por último prueba la siguiente etiqueta: antes del encabezado tamaño 1 pondremos <center> y al final </center> de forma que quedará: <center> <h1> AQUÍ VA EL TEXTO DEL ENCABEZADO </h1> </center> Dale a guardar y observa el cambio. Prueba ahora tú a centrar también el encabezado que pusimos con tamaño 2 a cambiarlo y ponerlo con tamaño 3 y centrado (Etiquetas) 5

Documentos relacionados

MANUAL PARA CREAR NUESTRA PAGINA WEB EN DREAMWEAVER

1 MANUAL PARA CREAR NUESTRA PAGINA WEB EN DREAMWEAVER INDICE 1. Como crear mí sitio. 2. Entorno. 3. Insertar texto. 4. Como crear un vínculo. Formas: 5. Como insertar una imagen. 6. Insertar Tabla. 7.