HTML Básico
1. Investiga qué Navegadores están disponibles en tu PC, familiarízate con cada uno de ellos y escribe su nombre a continuación:
Navegador 1:__________________________
Navegador 2:__________________________
Navegador 3:__________________________
Navegador 4:__________________________
2. Desde tu navegador accede a la página http://roble.pntic.mec.es/jtal0007/xmlfp/, analiza los diferentes elementos que la componen y responde a las siguientes preguntas:
- ¿Tiene la página enlaces o links?
_______________________________
- Enumera diferentes maneras de reconocer a un link o enlace:
________________________________________________________________________________________________________
- Posiciona el Mouse sobre un enlace y di, sin hacer clic sobre el mismo, cuál es la dirección a la que apunta:
________________________________________________________________________________________________________
- Pulsa el botón del Mouse en el enlace que has elegido y accede a la nueva página. Regresa, pulsando el icono que direcciona a la página anterior.
Nota: No cierres la ventana del navegador
3. Señala en el siguiente código las etiquetas de la estructura básica de una página HTML.
|
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title> Introducción a HTML </title> </head> <body> Esta es mi primera página, aunque todavía es muy sencilla. Como el lenguaje HTML no es difícil, pronto estaré en condiciones de hacer cosas más interesantes. </body> </html> |
4. Abre la herramienta NotePad ++. Transcribe el código del ejercicio anterior. Guarda el archivo con el nombre Actividad1.html.
5. Menciona, cuáles son las diferentes formas de guardar una página Web, y que se guarda en cada caso:
______________________________________________________________________________________________________________________________
6. Visualiza la página creada en el ej. 4:
- Haz activa la ventana del navegador
- Carga la página Actividad1.html: Menú Archivo\Abrir
7. Modifica el código Actividad1.html de manera tal que el cuerpo del código quede así:
|
<body>
Esta es mi primera página, aunque todavía es muy sencilla. Como el lenguaje HTML no es difícil, pronto estaré en condiciones de hacer cosas más interesantes. <p> Esta etiqueta permite generar un párrafo nuevo. </p> <p> Esta etiqueta permite generar un segundo párrafo. </p> </body> |
Graba los cambios con el nombre actividad7.html y visualiza la página modificada en el navegador.
Observa la diferencia entre el texto sin etiquetas y el texto con la etiqueta <p></p> al presentarse en el navegador.
8. Inserte como último párrafo el siguiente texto:
“Los HTML son archivos de texto que pueden ser editados libremente con el Bloc de Notas de Windows, aunque para hacerlo de esta manera es necesario conocer la estructura del lenguaje.”
9. Modifica el título de la página web actividad7.html. El nuevo título será “Curso de HTML”.
10. Graba los cambios realizados. Visualiza la página y el código html (Menú: Ver\Código fuente o ctrl+U) en distintos navegadores.
Nota: Recuerde actualizar la versión de la página.
11. Crea, en un archivo nuevo, la estructura necesaria de una página web. Escribe el siguiente texto dentro de las etiquetas correspondientes:
- Título: Práctica 1 de HTML
- Primer párrafo: “Bienvenidos a Mi página Web”
- Segundo y tercer párrafo: Escribir una breve presentación de tu persona.
Graba el archivo con el nombre mi_presentación.html y visualiza la página.
12. En el procesador de texto teclear el siguiente código
|
<!DOCTYPE html> <html> <head> <title>HTML básico</title> </head> <body bgcolor="#AADCA9"> <h2 align="center">Ejemplo de etiquetas para presentar texto</h2> <hr> <div align="center"> <h1>Encabezado de nivel 1 </h1> <h2>Encabezado de nivel 2</h2> <h3>Encabezado de nivel 3</h3> <h4>Encabezado de nivel 4</h4> <h5>Encabezado de nivel 5</h5> <h6>Encabezado de nivel 6</h6> <p>Parrafo dentro del <DIV> centrado, por lo cual, hereda la alineación</p> <hr width="50%" size="5"> </div> <hr> <blockquote>Párrafos con diferentes alineaciones </blockquote> <p>Parrafo fuera del <DIV> centrado, por lo cual toma la alineación izquierda por defecto</p> <p align="right">Parrafo alineado a la derecha</p> <p align="center">Parrafo centrado</p> <hr> con esta línea comprobamos que el H T M L no respeta ni los espacios ni los saltos de línea <pre> Pero si incluimos la etiqueta <PRE> nos muestra el T E X T O tal y como lo escribimos </pre> <p>HTML separa las palabras del texto con un blanco, si queremos añadir más blancos, debemos hacer referencia a la entidad que lo representa (&nbsp;)como por ejemplo:   ; esto </p> <p> Para cualquier consulta dirigirse a <address> departamento de Informática </address> </p> </body> </html> |
Guardar el archivo como Actividad12.html en formato texto y visualizalo con el Navegador.
CÓMO ENTREGAR ESTA ACTIVIDAD
- Crea un documento en google drive copiando el contenido de esta actividad y contesta a las preguntas en los espacio reservados para ello.
- En los apartados que hay que realizar una visualización en el navegador, realiza una captura de la pantalla y la inserta en la pregunta correspondiente.
- Inserta el documento en tu Blog.