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.

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

1• <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.

1• <HR WIDTH=50% SIZE=20 ALIGN=left COLOR=navy NOSHADE>
2Traza 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ÓN
align="center" Centra la imagen
Src="./YOBI.gif" Nombre de la imagen
widht="50" Ancho de la imagen
height="50" Alto de la imagen
border="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 Marquesina
bgcolor="#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

ejercicio3.html.

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

110. 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.

ejercicio5.html.

111. Elabore su hoja de vida en tres archivos de HTML llamados
2
3Inf_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.

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:

114. Cree un frame con tres secciones así:

Tutorial ejercicio 1

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Destacado

Destacado (18)

Similar a Tutorial ejercicio 1

Similar a Tutorial ejercicio 1 (20)

Más de Kelly Johanna Santos

Más de Kelly Johanna Santos (10)

Último

Último (20)

Tutorial ejercicio 1