MARCOS 15. EJERCICIO FINAL.

La práctica final vale un 50 % de la nota de HTML. Los ejercicios anteriores valdrán el otro 50 %.

 PRÁCTICA FINAL

Esta práctica consiste en realizar un sitio web.El sitio web debe cumplir las siguientes condiciones:

• Estructura de marcos. Los marcos serán mínimo 3 y con una distribución igual o muy parecida a la del ejemplo.
• Página debe tratar sobre música (grupo musica), algún equipo de fútbol, viajes, cine.....
• Se puntuará que contenga TABLAS, ENLACES, IMÁGENES, ALINEACIÓN DE PARRAFOS, NEGRITA, SUBRAYADO.......
• Debe contener como mínimo las páginas web .

AYUDA PARA HACER LA PÁGINA!!!!!!!

En el marco de la izquierda tengo unos enlaces ( PORTADA, GALERIA DE FOTOS...) al pinchar en ellos, una nueva página se abre en el marco de la derecha. ¿ Cómo se consigue esto?
Os pongo a continuación el código que sería necesario para hacerlo.

CÓDIGO DE LA PÁGINA DE LOS MARCOS

Como podeis ver, he añadido el atributo NAME en <FRAME>, para llamar a cada marco con un nombre sencillo......<FRAME SRC="practica16arriba.html" NAME="arriba">

Ahora os enseño la página del marco izquierdo (el índice).....

He añadido el atributo TARGET  a la etiqueta <IMG SRC>. Con esto consigo que al pinchar en un enlace del marco de la izquierda, se abra un nueva página en el marco de la derecha. Si quisiera que la página se abriera en otro marco, solo tendría que poner en TARGET, el nombre del marco, por ejempo TARGET="izquierda" o TARGET="arriba".
 Quedaría de la siguiente manera: <A HREF="historia.html" TARGET="contenido>

Sitio Web de ejemplo

Como veis, el sitio tiene 3 marcos y en el marco izquierdo tenemos un indice con varias opciones. Estas opciones son: Portada, historia, galería de fotos, palmarés, foto de equipo actual. Cada una de ellas abre una página nueva dentro del marco de la derecha.
Aquí tenéis unos ejemplos de como quedaría cada página.....

HISTORIA

GALERÍA FOTOS

HTML 14. MARCOS 5

EJERCICIO 15

Trata de hacer la siguiente página con esta estructura de marcos.....

 

Guarlada con el nombre practica15.html

HTML 13. MARCOS 4

Vamos a hacer ahora una página un poco más complicada. El resultado que queremos es el siguiente:

¿Cómo podemos conseguir esto?
En realidad, la página son 2 marcos horizontales y el marco de abajo lo he dividido en otros 2 marcos.
Primero hago la página que me indica la disposición de los marcos.
El código de la página principal es el siguiente:

Guardala con el nombre practica14.html

Analizamos el código:

• Divido la página en 2 filas con FRAMESET ROWS, una de 20% y otra con el resto del espacio.

• Con FRAMESET COLS, divido la fila de abajo, en 2 columnas, una de 20% y otra con el resto del espacio.

Posteriormente, tengo que crearme las páginas webs practica14arriba.html, practica14contenido.html y practica14indice.html que rellenan a la página que indica los marcos que tengo.

HTML12. MARCOS III

Vamos a seguir con los marcos y vamos a complicarlo un poco.

EJERCICIO 13

Haz una Página Web que contenga 3 marcos horizontales, como se ve en la siguiente imagen. Guardalo con el nombre ejercicio13.html

HTML 11. MARCOS II.

Vamos a hacer un ejemplo para entender cómo se hace una página web con 2 marcos, el marco izquierdo y el marco derecho..

Lo primero que tenemos que hacer es la página principal que contenga los 2 marcos. Guardala con el nombre marco.html

El resultado será el siguiente:

Aparece la página con los 2 marcos pero evidentemente, están vacíos ya que tengo que crear la página del marco izquierdo (izquierdo.html) y la página del marco derecho (derecha.html).
Estos serían los códigos de las páginas y su aspecto.

MARCO IZQUIERDO

MARCO DERECHO

Y éste sería el resultado final de la página con los 2 marcos.

EJERCICIO 12

Crea una página que tenga tres marcos y que tenga el aspecto de la siguiente figura.

Por lo tanto tienes que hacer 4 páginas web.

• La primera será la que contenga los 3 marcos, ponle de nombre "ejercicio12.html".

• Las otras tres guardalas con el nombre "marcoizquierdo12.html, marcocentral12.html, marcoderecho12.html."

HTML 10. MARCOS

Los marcos o frames sirven para distribuir mejor los datos de las páginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegación, mientras que otras sí pueden cambiar.
Cada uno de los marcos de una página, contiene un documento HTML individual. Por ejemplo la imagen de abajo contiene 2 marcos. El marco izquierdo contiene el documento menu.html y el derecho perro.html.
Para poder visualizar la página hemos tenido que crear la página marcos.html, que es la página que contiene el grupo de marcos.

Conceptos básicos para trabajar con marcos:

• Lo primero es crear una página en la que se diga la cantidad de marcos que va a ver.

• Esto se define a través de las etiquetas <frameset></frameset> que van después de la etiqueta <head> y </head>. 

• Por lo tanto, en esta página no existen las etiquetas <body> y </body>.

 Atributos que podemos poner a la etiqueta <frameset>.

HTML 9. TABLAS

Las Tablas es la mejor forma de distribuir tu página web. Se usan para el diseño y composición de una página web debido a que pueden contener información en cada celda ya sea en forma de links, de imágenes o de texto.

ETIQUETAS A USAR

• <TABLE>: Nos dice que viene una tabla.
• <TR>: Le decimos al navegador que tenemos una fila.
• <TD>: Dentro de la fila de decimos que viene una celda.

Por lo tanto si quiero hacer una tabla de 2 filas y 2 columnas, tendré que escribir el siguiente código....

Y tendré este resultado....

Dentro de cada celda puedes poner texto, imágenes y además puedes poner enlaces a cada cosa que pongas en la celda.


EJERCICIO 9


Tienes que hacer la siguiente tabla, igual que está en esta imagen....

Guardalo con el nombre ejercicio9.html
Podemos modificar las tablas, su tamaño, color, etc. Sólo tienes que añadir los siguientes atributos....

EJERCICIO 10

Modica la tabla del ejercicio 10 y trata de dejarla como en la siguiente imagen (ancho 50%, borde tamaño 2 y color azul, espacio entre celdas 0) .Guardalo con el nombre ejercicio10.html

También puedo cambiar el formato de las celdas usando los siguientes atributos....

EJERCICIO 11

Modifica la tabla del ejercicio 10 y dejala igual que en la siguiente imagen. Guardala con el nombre ejercicio11.html

HTML 8. ENLACES.

Los links son hiperenlaces con los cuales podemos conectar nuestra página web a otras páginas. Imagina que quieres un enlace en una página para ir a la página de google. Tendrás que usar la etiqueta <A> </A>.

<BODY>
<A HREF="http://www.google.es">Google</A>
</BODY>

EJERCICIO 10

Create una página web ( se llamará practica 7.html )en la que se incluyan:

• Tres enlaces a tres páginas hechas por tí. una de color rojo, otra color azul y otra color verde cada una con el color de fondo que indica en el enlace. (llamalas practica7rojo.html, practicaazul7.html y practicaverde7.html).

• Cada una de estas páginas debe tener un enlace que lleve a la página principal.

• Además crea los siguientes enlaces: youtube, blogger, flickr, facebook, tuenti.

 ENLACES CON FOTOS

Además de texto, también puedo hacer enlaces con imágenes. Simplemente tendré que poner la etiqueta <A></A> englobando a la etiqueta <IMG SRC"">.


EJERCICIO 11


Haz 2 páginas webs:

• La primera tendrá la foto de Messi o la de Cristiano Ronaldo. (Llamala practica8.html)
• La segunda página llevará una breve biografía del jugador que hayas elegido. (Llamala messi.html o cristiano.html).

La foto del jugador (Messi o Cristiano) contendrá un enlace que me llevará a la página de la biografía del jugador.
La página de la biografía tendrá un hipervínculo que me lleve a la página inicial con la foto del jugador.

HTML 7. IMAGENES

Para incluir una imagen en una página web, la especificamos con la etiqueta <IMG>. También debemos especificar los atributos con el nombre de la imagen (SRC) y el tamaño de la misma (en píxeles).

<IMG SRC="nombre de la imagen.jpg" WIDTH="130"  HEIGHT="101">

Debes recordar que el fichero de la imagen se debe guardar siempre en la misma carpeta que el archivo de la página web. Si quieres guardar la imagen en otra carpeta tendrás que indicar el camino completo en donde se encuentra almacenada la imagen.

Por ejemplo, si la imagen está en la carpeta images y nuestra página web en otra carpeta pondremos lo siguiente:

<IMG SRC="images/nombre de la imagen.jpg"  WIDTH="130"  HEIGHT="101">

Si quiero poner una imagen debajo de otra deberé poner:

<BODY>
 <IMG SRC="nombre de la imagen.jpg"  WIDTH="130"  HEIGHT="101"><BR>
<IMG SRC="nombre de la imagen.jpg"  WIDTH="130"  HEIGHT="101">
</BODY>

PRÁCTICA FOTOS

Crea una página web que tenga (llamala practica6.html) :

• Fondo azul.

• Contenga 3 imágenes.

HTML 6. Características de párrafo

Ya vimos que el navegador no entiende cuando quermos pasar de una línea a otra dandole al ENTER y que debemos poner la etiqueta <BR> para poder pasar de línea a línea. Vamos a ver ahora otra etiqueta que nos va a dar mejores resultados con párrafos, es la etiqueta <P>.
Tenemos el siguiente ejemplo:

Este sería el resultado....

Si utilizamos el atributo ALIGN en la etiqueta <P> podremos alinear el texto que queramos a la derecha, izquierda o centrarlo.

COPIA EL SIGUIENTE EJEMPLO

Este sería el resultado...

Si queremos que el texto en la página tenga el siguiente aspecto:
Esto       es       realmente     curioso

No nos sirven ni tabulaciones ni espacios en blanco, ya que el navegador no reconoce más de un espacio en blanco. Aunque esto parezca una tontería, es mejor así, ya que nos proporciona un control absoluto sobre la apariencia del documento.
Para poder conseguir que las palabras estén separadas utilizamos el siguiente código: &nbsp.

COPIA EL SIGUIENTE TEXTO

Observa el resultado.

PRÁCTICA 5


Diseña una página Web con el título Prácticas con párrafos, con color de fondo azul y que presente el siguiente aspecto en la pantalla de tu navegador. Guardala con el nombre practica5.html

HTML 5. USO DE LAS FUENTES.

Para poder cambiar el tamaño, tipo de letra o color de texto, utilizamos la etiqueta <FONT>. A esta etiqueta le podremos añadir una serie de atributos para poder modificar el texto.

CAMBIAR EL TAMAÑO

Para cambiar el tamaño de letra utilizaremos el atributo SIZE, por ejemplo......
<FONT SIZE="6"> Tamaño tipo 6 </FONT>
Al poner esto saldrá en la página web el texto con tamaño más grande.

Vamos a hacer un ejemplo sobre tamaños de letra....

 
Guardalo con el nombre "tamañoletra.html"

CAMBIAR LA FUENTE

Para cambiar la fuente de la letra con el atributo FACE dentro de la etiqueta FONT.
 <FONT FACE=" Arial"> Tipo de letra arial</FONT>
De esta forma podemos combiar a cualquier tipo de letra. Podemos elegir Arial, Times New Roman, Helvetica, Lucida Sans.

CAMBIAR EL COLOR

Por último vamos a ver como cambiar el color de la letra, para ello utilizamos el modificador COLOR.
<FONT COLOR="#FF0000">Texto de color rojo</FONT>

PRÁCTICA 4

• Prueba poner varios textos (por lo menos 5) y cada uno de un color diferente (azul, verde, amarillo, naranja, blanco...). Guardalo con el nombre "practica4.html"

Puedes poner más de un atributo en la marca FONT ( FONT COLOR SIZE FACE....).

• Escribe la siguiente frase: "Esta frase está escrita con tamaño 7, color azul y fuente arial").Guarlalo con el nombre "practica4b.html"
  

Debería quedar así.....

HTML 4. Poner en negrita, cursiva, subrayado.....

Las siguientes opciones que vamos a ver son:

• negrita: <b>
• cursiva: <i>
• subrayado: <u>

PRÁCTICA 3

Diseña una nueva página web con el título "Juego de Rol" con color de fondo amarillo y que presente el siguiente aspecto en la pantalla de tu ordenador. Guardaló con el nombre "Practica3.html."

HTML 3. FONDO DE UNA PAGINA WEB.

COLOR DE FONDO
Para ponerle un color de fondo a la página debo poner el atributo BGCOLOR a la etiqueta <BODY>. En este caso quedaría:

<BODY BGCOLOR="#FFFFFF">

Os pongo a continuación como serían los fondos en ROJO, VERDE Y AZUL.

ROJO: <BODY BGCOLOR="#FF0000">

VERDE:  <BODY BGCOLOR="#00FF00">

AZUL:  <BODY BGCOLOR="#0000FF">

EJERCICIO 3

A continuación, vamos a realizar 5 páginas web, cada una de ellas debe tener un color de fondo diferente. Ve probando con BGCOLOR. Guardalas con el nombre ejercicio 2a, ejercicio 2b, ejercicio2c, ejercicio 2d......

EJERCICIO 4. IMAGEN DE FONDO
Por último vamos a poner de fondo una imagen en lugar de un color, para ellos utilizamos el atributo BACKGROUND en la etiqueta BODY. Quedaría de la siguiente manera:
<BODY BACKGROUND="nombredelafoto.jpg">
Guardala con el nombre imagendefondo.html 

HTML 2. MI PRIMERA PAGINA WEB

Abrimos el Bloc de notas y nos creamos una la plantilla, guardala con el nombre plantilla.html.

Introducimos el siguiente código:

<HTML>

<HEAD>

<TITLE> </TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

 Lo guardamos y lo conservamos para hacer todos los demás ejercicios.

EJERCICIO 1
Copia el siguiente texto en el bloc de notas. Guardalo con el nombre etiquetabr.html

Este sería el resultado....

Sin embargo vemos que en el navegador se visualiza el texto seguido, "IES Infante Don Juan Manuel 1ºBachillerato Murcia", eso es porque para que el navegador interprete que he metido un ENTER debo poner la etiqueta <BR>.

<HTML>

<HEAD>

<TITLE> Práctica 1</TITLE>

</HEAD>

<BODY>

IES Infante Don Juan Manuel <BR>

1º Bachillerato<BR>

Murcia<BR>

</BODY>

</HTML>
 Ahora si queda bien.

EJERCICIO 2
Copia el siguiente texto en el bloc de notas y guardalo con el nombre ejercicio1.html.

Cuando termines, mira el resultado y dí cual es la función de las siguientes etiquetas.

• FONT
• BGCOLOR
• FONT SIZE
• FONT COLOR
• TITLE

Enviame los resultados en un archivo Word a mi correo abelroch75@gmail.com

HTML 1. USO BLOC DE NOTAS PARA HACER PAGINAS WEB.

Para crear una página web sólo tenemos que usar el Bloc de Notas de Windows y  escribir directamente el código HTML.

Escribir en el Bloc de notas

Vamos a abrir un documento en blanco y escribimos el texto del código como si fuera un editor de texto normal.

• Lo más recomendable es insertar cada etiqueta HTML en una línea nueva, así es más fácil de trabajar.
• Si escribieramos todo el código seguido, nos resultaría dificil interpretarlo, por eso es mejor intertar las etiquetas por separado.
• Finalmente, guarda el documento, pero en lugar de la extensión .txt, lo guardaremos con la extensión .html

De esta forma, lo que hemos escrito se transforma en una página web.
A partir de este momento, lo mejor es trabajar con el bloc de notas y la página web a la vez. Para ello debemos compaginar dos sesiones.
COMPAGINAR DOS SESIONES

1. Abrir bloc de notas.
2. Pulsar con el botón derecho sobre cualquier parte vacía de la barra de tareas, en la parte inferior de la pantalla. Es la barra en la que se encuentra el botón Inicio.
3. Elegir la opción Mosaico Vertical.

Compaginar dos sesiones es muy útil ya que puedes ver los dos documentos a la vez y cada vez que hagas un cambio en el código del bloc de notas, sólo tienes que actualizar la página web y verás los cambios de las modificaciones del bloc de notas.