tutorial ejercicio 1

HTML

3. Explique que hacen las siguientes etiquetas:

ETIQUETAS FUNCION<HTML> Indica que se va a escribir código HTML<HEAD> Cabecera del documento<TITLE> Coloca titulo al documento<BODY> Cuerpo del documento. Aquí se pone el verdadero

contenido de la página<BGCOLOR> Para dar color al fondo de la página

<TEXT> Para darle características al texto<LINK> Para darle características a los hipervínculos

4. Escriba un segmento de código donde muestre la aplicación de las etiquetas anteriores.

Para comenzar debemos abrir nuestro bloc de notas, vamos a Archivo > Guardar.

Debemos crear una carpeta donde guardaremos todas nuestras páginas realizadas. En nuestro caso la llamaremos html. Ahora guardamos el documento con el nombre de ejercicio1.html. Damos clic en Guardar.

Cerramos el bloc de notas. Ahora vamos a nuestra carpeta html y observamos que el archivo que acabamos de crear aparece con el icono de nuestro navegador, en este caso Internet Explorer.

Damos doble clic en el archivo y observamos una página en blanco.

Vamos a introducir el código html a nuestra página, para esto vamos al menú Ver > Código Fuente.

Aparece el bloc de notas con el archivo que habíamos creado anteriormente. Colocamos un código que cumpla con los requisitos del ejercicio. En nuestro caso colocaremos el siguiente.

Recuerde que las etiquetas <html> </html> indican que lo que va entre ellas es código html. Después encontramos las etiquetas <head> </head> que es el encabezado de la página, dentro de esas etiquetas encontramos <title> </title> que me indica el título que va a llevar nuestra página web.

El body lleva la instrucción bgcolor para darle un color al fondo, este color va en código hexadecimal #00ffff que en nuestro caso representa un color azul aguamarina.

Ahora presentamos la paleta de colores para escojan es que más le agrade.

Observamos que en la parte superior aparece el texto que colocamos en las etiquetas title.

En la instrucción text colocamos el color por defecto del texto de nuestra página que en nuestro caso será el rojo.

En link se da el color de los hipervínculos que por norma debe ser azul.

Recordemos que con align alineamos el texto como queramos, en nuestro caso el texto será centrado.

Colocamos un hipervínculo para observar su color por defecto, al hacer clic sobre este nos llevará a la página de Hotmail.

Guardamos este documento y vamos a nuestra página web, presionamos F5 para actualizar y observar los cambios realizados.

5. Explique que hace las siguientes líneas de código html:

Nota: recuerde probarlas en una página web para practicar y observar los resultados.

• Coloca características al texto como tipo de fuente (Times New Roman), tamaño (3) y color (amarillo).

• <A HREF="copia.html" TARGET="principal"> Escribe un hipervínculo hacia una página que se encuentra en nuestra carpeta, apareciendo la página en el marco principal de esta.

• <A HREF=dos.jpg><IMG SRC=uno.gif></A> Hipervínculo hacia una imagen .jpg al dar clic en una imagen .gif

• <A HREF=#top>Arriba</A> Hipervínculo que nos lleva a la parte superior de nuestra página.

• <HR WIDTH=50% SIZE=20 ALIGN=left COLOR=navy NOSHADE> Traza una línea de separación horizontal, de 50% de ancho de la pantalla, tamaño (grosor) de 20, alineada a la izquierda, con color azul y sin sombra.

6. Escriba un segmento de código donde:

Cargue una imagen de extensión .gif que se debe colocar en las misma carpeta donde están grabados los archivos html, el ancho y la altura son de 50, no tiene borde y que cuando alguien mueva el mouse sobre ella aparezca un mensaje que diga ¨Bienvenido¨.

Busque un gif animado y cárguelo en esta misma página.

Elabore un marquee a su gusto que quede debajo en esta misma página.

Vamos al bloc de notas y creamos nuestra página con el nombre de ejercicio2.html.

Primer punto: Ahora escribimos las siguientes líneas de código en el body para cumplir con el primer punto de nuestro ejercicio.

<img src="./YOBI.gif" widht="50" height="50" border="0" alt="Bienvenido">

ETIQUETA FUNCIÓNalign="center" Centra la imagen

Src="./YOBI.gif" Nombre de la imagenwidht="50" Ancho de la imagenheight="50" Alto de la imagenborder="0" Sin borde

alt="Bienvenido" Muestra un texto cuando se mueve el Mouse sobre la imagen

Segundo punto: cargue el .gif animado de la misma manera como en el Primer punto. Recuerde que el .gif debe ser animado.

Tercer punto: Escribimos las siguientes líneas de código en el body para cumplir con el tercer punto de nuestro ejercicio.

<marquee behavior="alternate" bgcolor="#FFFF00">TODOS SUS PROBLEMAS TIENEN SOLUCION</marquee>

ETIQUETA FUNCIÓN Nuevo párrafo Texto en Negrita

marquee Marquesinabgcolor="#FFFF00" Color de la marquesina

font color="#008000" Color de la letra de la marquesina

Si utilizamos la etiqueta <marquee> sola no existe ningún problema, pero podemos utilizar etiquetas adicionales que le darán otro efectos como se muestra a continuación:

ETIQUETA FUNCIÓN<marquee behavior="slide"> Desplazamiento una sola vez

<marquee behavior="alternate"> Desplazamiento rebotando

El código completo se muestra a continuación:

El resultado de la página es el siguiente:

7. Elabore una fracción de código que al dar clic sobre los vínculos vaya a las siguientes páginas:

A la universidad Nacional A un buscador (Por ejemplo Google) A un archivo de Word

Primer punto: <a href="http://www.unad.edu.co">Visita la Universidad Nacional a distancia</a>

Segundo punto:<a href="http://www.google.com">Busca cualquier cosa desde acá</a>

Tercer punto: Este hipervínculo nos lleva a un documento de Word de nombre tarea.doc que se encuentra ubicado en la unidad C, en una carpeta de nombre Actividades, por esa razón se debe colocar toda la ruta del archivo.

<a href="file:///C|/Actividades/tarea.doc">Revisa tu tarea</a>

El resultado de la página es el siguiente:

8. Que hace la siguiente fracción de código:

<ul> <li type=circle> Armenia </li>

<li type=square> Salento </li> </ul>

<ol> <li>Buenavista</li> <li>La Tebaida</li> </ol>

Primer punto:Listas con viñetas círculo y cuadrado

o Armenia

Salento

Segundo punto:Listas numeradas

1. Buenavista 2. La Tebaida

9. Ejecute el siguiente código y comente que hace:

FONT CO LO

RS

Nota: Guarde el archivo con el nombre de ejercicio4.html

10. Elabore la siguiente lista de glosario

INTERNET Red mundial de computadores

HTML Conjunto de códigos para crear una página Web

<BODY> Cuerpo de una página Web, allí se escriben todas las instrucciones.


11. Elabore su hoja de vida en tres archivos de HTML llamados

Inf_academica, Inf_laboral y Inf_general que tengan relación con su hoja de vida y cree adicionalmente una página llamada menu.html desde la cual al dar clic sobre un enlace le permita ver cada página.

Haga los formatos a su gusto y aplique lo que considere necesario (imágenes, animaciones, videos, colores de letra, tamaños, movimientos del texto, entre otros).

Vamos al bloc de notas y creamos nuestra página con su nombre andresgomez.html.

Crearemos otra página donde coloque su experiencia profesional. En otra página coloque su formación académica.En otra página coloque sus conocimientos informáticos.

12. Elabore una tabla de Cuatro columnas por cuatro filas, cada celda debe tener una imagen y al dar clic sobre ésta aparezca en una nueva ventana con la imagen ampliada y haciendo un pequeño comentario de ella.

Vamos al bloc de notas y creamos nuestra página con el nombre de ejercicio6.html. Recuerden que las imágenes deben estar en la misma carpeta de los archivos html.

Debemos crear 2 páginas:

Primera página: Como ejemplo lo hacemos para una sola imagen pero ustedes deben hacerlo para todos los campos de la tabla.

Debemos colocar la imagen como hipervínculo a otra página.

El código es el siguiente:

Así se verá nuestra primera página:

Segunda página:

En esta página la imagen se debe colocar más grande, con su respectivo comentario y un hipervínculo que la lleve a la primera página.El código es el siguiente:

Así se verá nuestra primera página:

14. Cree un frame con tres secciones así:

tutorial ejercicio 1

Technology