tema 7 power
TRANSCRIPT
INFORMATICA
IES «Universidad Laboral»
TEMA 7FRANCISCO DELGADO SALAZAR4º D
ACTIVIDADES CON SUS RESPECTIVOS PROCEDIMIENTOS
INDICE
1.¿Cuál fue la primera página web y quien fue su autor?
- En (1991) fue creada por Berners-Lee. Sir Timothy "Tim" John Berners-Lee, OM, KBE (TimBL o TBL) nació el 8 de junio de 1955 en Londres, Reino Unido, se licenció en Física en 1976 en el Queen's Collage 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 (HyperText Markup Language) o lenguaje de etiquetas de hipertexto, el protocolo HTTP (HyperText Transfer Protocol) y el sistema de localización de objetos en la web URL (Uniform Resource Locator).
Es posible encontrar muchas de las ideas plasmadas por Berners-Lee en el proyecto Xanadu (que propuso Ted Nelson) y el memex (de Vannevar Bush).
ACTIVIDAD 1
2. Abre un documento de OpenOffice.org Writer y guárdalo como página web. Observa el código que se crea e identifica las etiquetas head y body.
ACTIVIDAD 2
Página web.html
3. Escribe delante y detrás de la palabra
personal las etiquetas <b> y </b>. ¿Qué
sucede?
- Que se pone en negrita
ACTIVIDAD 3
index.html
4. Pon ahora en cursiva las palabras página web. Emplea para ello las etiquetas < i > e < /i >. Guarda el documento y comprueba los resultados con el navegador.
ACTIVIDAD 4
PROCEDIMIENTO 3
index.html
5. Crea una tabla que te permita ir
introduciendo las etiquetas HTML que vayas
aprendiendo indicando su utilidad y cómo se
puede emplear.
ACTIVIDAD 5
ETIQUETAS USO <body></body> Cuerpo
<b></b> Negrita <head></head> Cabeza <HTML></HTML> Código
<p></p> Párrafo <i></i> Cursiva
<h1></h1> Encabezado
ETIQUETAS USO <body></body> Cuerpo
<b></b> Negrita <head></head> Cabeza <HTML></HTML> Código
<p></p> Párrafo <i></i> Cursiva
<h1></h1> Encabezado
6. Abre una página web cualquiera. Elige en el
menú Ver la opción Código fuente. Identifica
todas las etiquetas que has empleado hasta
ahora.
- La pagina elegida http://www.los40.com/
-Las etiquetas que he reconocido han sido:
<HTML></HTML>, <body></body>, <p></p>,
<u1></u1>, <title></title>.
ACTIVIDAD 6
7. Busca en Internet el nombre del primer editor
de páginas web y del primer navegador.
- El primer editor WYSIWYG y el primer
navegador fue World Wide Web (www)
ACTIVIDAD 7
8. Averigua por qué la página principal de un sitio suele llamarse índex.
- Porque índex significa índice que proviene
del latín índex
ACTIVIDAD 8
9. Compara la barra de herramientas de un procesador de textos con la de un editor de páginas web. ¿Qué diferencias observas?
- Que en un procesador de textos tienes mas
opciones para editar textos que un editor
web.
ACTIVIDAD 9
procedimiento 4.html
10.Copia el código de 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.
ACTIVIDAD 10
Aficiones.html..htmlProcedimiento
5 y 6
11.Modifica las etiquetas en el Bloc de notas. Transforma el texto para darle distintos formatos. Observa los datos en un navegador.
ACTIVIDAD 11
Aficiones.html..html
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:
a) ¿Qué elementos comunes tienen? - Que son procesadores de texto
- Que puedes insertar enlaces
- Que tienen barras de herramientas
b) ¿Cuáles les distinguen?
- Que Nvu no tiene opción para poner
sangría
ACTIVIDAD 12
13.Selecciona el vínculo que acabas de crear y vuelve a hacer clic en el icono Enlace. Haz clic en el botón Mas propiedades y selecciona la opción El enlace se abrirá ene una nueva ventana. ¿Cómo has cambiado el código? ¿Qué sucede si pruebas el enlace en un navegador?
- Sucede lo mismo
que en el procedimiento
ACTIVIDAD 13
procedimiento 7.html
14.Identifica los iconos de insertar enlace en las siguientes aplicaciones• GoLive• Dreamweaver• FrontPage.
Si no dispones de información, busca sus manuales en Internet.
ACTIVIDAD 14
PROCEDIMIENTO 8
Procedimiento 8.html
.
PROCEDIMIENTO 10 PROCEDIMIENTO 10.html
.
PROCEDIMIENTO 11
tenis.html
16.Averigua cuales son los atributos que se le pueden asignar a una imagen.
ALT: "Texto que aparece al situar el cursor sobre la imagen"
ALIGN: Nos indica la posición de la imagen respecto del texto
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.
ACTIVIDAD 16
17.¿Cuáles de estos atributos están relacionados con la usabilidad de la pagina?
WIDTH HEIGTH
ACTIVIDAD 17
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 porcentaje indicado y
si aumenta la tabla el porcentaje será mayor
ya que ocuparía más
ACTIVIDAD 18
19.Averigua cómo se añaden bordes a las celdas de una tabla con el editor de página web que tú utilizas.
- Pinchas en propiedades de la tabla y en
bordes y espaciado modificas al gusto
ACTIVIDAD 19
20.Busca el código que se debe emplear para insertar un video y compararlo con el empleado para insertar sonidos.
<embed> (para insertar video)
<bgsound> (para insertar sonido)
ACTIVIDAD 20
21.Busca distintos manuales para trabajar con hojas de estilo.
ACTIVIDAD 21
Css (CASCADING STYLE SHEETS)
22.Explica el siguiente código: body { font-size: smal;color: #333;
margin: 0 20px 2em 20px;
line-height: 140%;
background: #fff}
- Dice que la tamaño de la fuente sea
pequeña, que el color sea gris, que tenga un
margen de 20 pixeles, que su tamaño
sea de 140% y su fondo sea blanco
ACTIVIDAD 22
23.Comenta los distintos elementos de la ventana para la vinculación de una hoja de estilos de Macromedia Dreamweaver
Elegir
documento
Aceptar o cancelar la
vinculación
Elegir entre vincular o importar
ACTIVIDAD 23
25.Que se entiende por ancla
• Las anclas se usan para ir a una parte concreta de una página. Esto es muy útil en grandes documentos donde moverse entre las partes del mismo puede ser dificultoso.
• Un ancla se crea de la siguiente forma:
<a name = "nombre_ancla"></a>
ACTIVIDAD 25
26. Arrastra los documentos del sitio web a una pagina en blanco
• Se crea un enlace • Un enlace
relativo
ACTIVIDAD 26
27. Crea una tabla
ACTIVIDAD 27
tabla27.html