Embed Size (px)
Citation preview
Tema 7.- Publicación de páginas webProcedimientos y ejercicios.
Procedimiento 1.- Crear el sitio web local:
Crea en Misdocumentoso en Homeuna carpeta denominadaMi web.
Dentro de Mi webañade otra carpetadenominada imágenes.con estas carpetascreadas, guardatodos los documentosque crees.
Actividad 1, pg 143: Busca en Internet informacion sobre la primera
pagina web. Intenta averiguar donde se creo y quien fue su autor. Accede a Wikipedia y busca informacion sobre este personaje.
Timothy "Tim" John Berners-Lee, nació el 8 de junio de 1955 en Londres, Reino Unido, se licenció en Física en 1976 en el Queen's College de la Universidad de Oxford. Es considerado el padre de la web.
Ante la necesidad de distribuir e intercambiar información acerca de sus investigaciones de una manera más efectiva, Berners-Lee desarrolló las ideas fundamentales que estructuran la web. Él y su grupo crearon lo que por sus siglas en inglés se denomina Lenguaje HTML o lenguaje de etiquetas de hipertexto, el protocolo HTTP y el sistema de localización de objetos en la web URL.
Procedimiento 2.- Crear la página web:
Ejercicio 2, pg 144: Abre un documento de OpenOficce.orgWriter y
guárdalo como pagina web. Observa el código que se crea e identifica las etiquetas head y body.
He seguido los pasosy me ocurre igual que en el procedimiento,no me aparece nada.
Ejercicios 3,4,5 y 6, pg 145: 3.-Escribe delante y detrás de la palabra personal
las etiquetas <b> y </b>. ¿Qué sucede?
Me aparecela palabrapersonal,en negrita.
4.-Pon ahora en cursiva las palabras pagina web. Emplea para ello las etiquetas <i> e </i>. Guarda el documento y comprueba los resultados con el navegador.
5.- Crea una tabla que te permita ir introduciendo las etiquetas HTML que vayas aprendiendo indicando su utilidad y como se puede emplear.
Etiqueta: Inicio: Fin: Utilidad:
Lenguaje de marcas de hipertexto.
<html> </html> Sistema que nos permite dar formatos mediante el uso de
etiquetas.
Título. <title> </title> Guarda el título para que aparezca.
Cabecera. <head> </head> Lugar en el que incluimos los datos
sobre nuestro documento.
Cuerpo. <body> </body> Documento propiamente dicho.
<<h1>> <h1> </h1> Indica que se trata un párrafo del título del
documento.
Párrafo. <p> </p> Indica al navegador que se trata de un párrafo.
6.- Abre una pagina web cualquiera. Elige en el menú Ver la opción Código fuente. Identifica todas las etiquetas que has empleado hasta ahora.http://www.deperros.org/index.html
<head><body><html><p>
Procedimiento 3.- Agregar contenidos:
Edita el documento que acabas de crear, empleando el Bloc de notas, y añádele el siguiente contenido:
Guarda el documento Y observa el resultado.
Actividades 7 y 8 página146: 7.-Busca en Internet el nombre del primer editor de
páginas web y del primer navegador. La Web fue creada alrededor de 1989 por el inglés Tim
Berners-Lee y el belga Robert Cailliau mientras trabajaban en el CERN en Ginebra, Suiza, y publicado en 1992. Desde entonces, Berners-Lee ha jugado un papel activo guiando el desarrollo de estándares Web (como los lenguajes de marcado con los que se crean las páginas web), y en los últimos años ha abogado por su visión de una Web semántica.
El primer navegador, desarrollado en el CERN a finales de 1990 y principios de 1991 por Tim Berners-Lee, era bastante sofisticado y gráfico, pero sólo funcionaba en estaciones NeXT.
8.-Averigua por qué la página principal de un sitio suele llamarse index.
Index es la sección principal de una página web si no existe un index tendrás que especificar cual es la sección principal por ejemplo con index.html www.lokesea.com sin index.html www.lokesea.com/welcome.html.
Procedimiento 4.- Crear el sitio web en el editor.
1.- Haz clic en Editary escribe un nombrepara el sitio.2.-Haz clic en Direcciónde publicación y eligela carpeta Mi web.
3.-Haz clic en el botón Nuevo sitio.4.-Haz clic en el botón aceptar.Verás que aparecen los archivos y carpetas que habías creado.
Ejercicio 9, página 147. Compara la barra de herramientas de un
procesador de textos con la de un editor de páginas web. ¿Qué diferencias observas?
Que el editor web es más complejo, teniendo más opciones…
5.- Crear una nueva página web con NVU:
1.-Abre Nvu y hazclic en Nuevo.2.-Después en el icono Guardar.3.- De título pon Aficiones.
4.-Guárdalo como Aficiones.html , busca su código fuente y haz clic en el botón Recargar.
Procedimiento 6.- Trabajar con Nvu.Formatos:
1.- Sitúate en la pestaña Normalde la barra de Modo edición.2.-Elige Título 1.3.-Escribe un título y pulsa ENTER.4.-Añade una introducción.5.-Pulsa ENTER.
6.- Haz clic en el iconolista de viñetas y escri-be una relación entretus aficiones.7.-Haz clic en el iconoGuardar.
Comprueba elresultado haciendoclic en el botónNavegar.
Ejercicios 10, 11 y 12 página 149:
10.-Copia el código fuente y pégalo en un nuevo documento del Bloc de notas. Guárdalo con el nombre prueba.html. Ábrelo con el navegador y observa el resultado.
El resultado es que me sale igual que en el procedimiento,copiando el código fuente de la página en Nvu y pegándola en el Bloc de notas.
11.- Modifica las etiquetas en el Bloc de notas. Transforma el texto para darle distintos formatos. Observa los resultados en un navegador.
12.- Emplea distintas aplicaciones (Nvu, OpenOffice.org, Microsoft Word, etc.) para crear páginas web en blanco. Observa el código HTML que introduce cada uno de estas aplicaciones y contesta:
¿Qué elementos comunes tienen? ¿Cuáles les distinguen?
Todas tienen etiquetasen sus código fuentes.Pero en distinto orden,y variadas.
Procedimiento 7.- Crear un hipervínculo:
1.-Marca la palabraen la que vas a crearel enlace.2.-Escribe en la ventanaPropiedades del enlacela página web que vas a enlazar.
Procedimiento 8.- Añadir un enlace relativo:
Procedimiento 9.- Editar un enlace:
Accede a cada una de la páginas web creadasy luego edita los enlaces.
Procedimiento 10.- Insertar un enlace interno:
Procedimiento 11.- Crear una página con vínculos:
Procedimiento 12.-Separar elementos de la página:
1.- Selecciona InsertarY elige la opción Línea horizontal.
2.- Guarda la página y comprueba el resultado.
Procedimiento 12 index.html
Procedimiento 13.-Insertar una imagen en una página web:
1.- Haz clic sobre el icono Imagen.2.-En la ventana Propiedades dela imagen haz clic sobre el botónElegir archivo.
Introduce un texto alternativo descriptivo de tu imagen. Acepta.
Ejercicios 16 y 17 página 154:
16.- Averigua cuáles son los atributos que se le pueden asignar a una imagen.
ALT="Texto que aparece al situar el cursor sobre la imagen" También muestra este mismo texto en caso de que el navegador
no cargue la imagen. ALIGN=Nos indica la posición de la imagen respecto del texto.
Después del signo igual, pueden ir los valores: TOP=si queremos que el texto esté alineado con la parte
superior de la imagen MIDDLE=alinea el texto con la parte central de la imagen BOTTOM= alinea el texto con la parte inferior de la imagen LEFT= alinea la imagen a la izquierda de la página forzando la
colocación del texto en la parte derecha y arriba RIGHT=alinea la imagen en la derecha de la página forzando la
colocación del texto en la parte izquierda y arriba.
17.- ¿Cuáles de estos atributos están relacionados con la usabilidad de la página?
ALT, ALIGN y TOP.
ALT="Texto que aparece al situar el cursor sobre la imagen"También muestra este mismo texto en caso de que el navegador no cargue la imagen.ALIGN=Nos indica la posición de la imagen respecto del texto. Después del signo igual, pueden ir los valores:TOP=si queremos que el texto esté alineado con la parte superior de la imagen
Procedimiento 14.- Organizar las fotografías mediante tablas:
1.- Haz clic en Tabla y en elModo Preciso.
3.- Escribe fotografía y descripción.4.- Abre y visualízalo.
Ejercicios 18 y 19 página 155:
18.- Escribe el código fuente de la tabla de tres columnas y dos filas. ¿Qué significa que la anchura de la tabla es el 80% de la ventana?
Que la tabla ocupa el 80%de la ventana, si cambia eltamaño de la ventana sepone la tabla al 80% del tamañoque se haya modificado.
19.- Averigua cómo se añaden bordes a las celdas de una tabla con el editor de la página web que tú utilizas.
Opción Preciso, abajo en border.
Procedimiento 15.- Agregar un sonido:
Inserta el cursor en un punto de la página.
Accede al modo de edición y edítalo con <embed>.
Si l consideras necesario puedes agregar algunos atributos.
Ejercicio 20 página 156: Busca el código que se debe emplear para insertar
un vídeo y compáralo con el empleado para insertar sonidos.
Para insertar en vídeo.
Para insertar un sonido.
Procedimiento 16.- Agregar estilo al documento:
Selecciona Herramientas y Editor CSS y haz clic en el botón Style.Con ello modifica los estilos de tus páginas y de sus código fuentes.
