Tecnología Información y Comunicación.: marzo 2016

viernes, 11 de marzo de 2016

html VII: Trabajo final

Buenos días,
tenemos ya los conocimientos suficientes para empezar a defendernos con el html y realizar una página web, por lo que vamos con el trabajo final.

TRABAJO FINAL:
Realizar una página sobre un tema libre, puede ser un trabajo para otra asignatura, sobre un tema de interés personal, sobre un examen. Tened en cuenta que lo vamos a subir a la red, de manera que lo podrá ver cualquier persona:

Deberemos aplicar todo lo aprendido.
Deberá de constar de 10 páginas html.
La página constará de marcos, por ejemplo, superior para título, izquierda para índice y derecha para contenido.
Abriremos con una portada (con foto y titulo identificativo del tema) en el marco central, y a la izquierda un índice, donde cada punto del índice es un enlace a una página. Por ejemplo, Salamanca, los púntos del índice serían historia, monumentos, iglesias, institutos, enlaces interesantes, etc...
Deberemos utilizar fotografías de fondo, utizando varias para las diferentes páginas.
Deberá haber cambios de color de fondo, de foto de fondo, de tipos de letra, de colores en las letras.
Es importante la presentación de la página, pero no influye sólo lo bonito que hagan el sitio web, sino la información que contenga, no solo copy/paste.
Deberemos meter música de fondo.manual
Deberemos incrustar vídeos
No abusar de muchas fotos ni de mucha información, que intercalen.
También no deben abusar de muchos videos, ni que sean videos chorras que no aportan nada al trabajo....
Ojo con el peso de los elementos multimedia que nos pueden complicar la subida a los servidores gratuitos.
Importante la organización de las páginas (en arbol bien puestas), todas las páginas deben tener enlace para ir a la página anterior, cuidado con las faltas de ortografía y las ñ y los acentos, debe ser amigable a la vista, no saturada.
Importante la organización de los archivos, a la hora de hacer funcionar los enlaces. Debemos subirlos con la misma estructura.

Un saludo

miércoles, 9 de marzo de 2016

Html VI: frames

Buenos días,
Para distribuir la información en la pantalla se solía trabajar con tablas, así nos salía de manera correcta en nuestro navegador.
Pero lo normal es trabajar con marcos, os dejo un enlace donde nos lo explica muy claramente.

http://www.htmlpoint.com/guida/html_13.htm

Ojo el código de los marcos debemos meterlo entre la etiqueta head y la de body, quedando la estructura de la siguiente manera:

<html >

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
</head>
<frameset rows="80,*">

<frame src="titulo.html"/>

<frameset cols="80,*" frameborder="no" border="0" framespacing="0">
<frame src="index.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="menu" />
<frame src="inicio.html" name="contenido" />

</frameset>
</frameset>
<noframes>

<body>
</body>
</noframes>

</html>

EJERCICIO:

el trabajo que hemos realizado hasta ahora lo vamos a distribuir con marcos de maneras que la página tendrá tres marcos.

Un marco arriba que será el título. Ocupa todo el ancho y el 20% de la pantalla de alto.
Un marco izquierda que ocupar el 20% del ancho que será el índice
Un marco central que será donde aparecerá la página seleccionada en el índice

Ojo para que cada vez que pinchemos en un enlace del indice nos lo muestre en la página central deberemos utilizar en las etiquetas <a href la propiedad target indicando en que ventana deberá abrirse. En el ejemplo de arriba deberemos poner algo así:

<a href="capitulo1.html" target="contenido"> capitulo1</a>

habiéndole dado al marco central en nombre contenido mediante la etiqueta name="Contenido" cuando creamos el frame

Un saludo

html V: texto y tablas

Para dar formato al texto, acompañando a la etiqueta <font></font>podemos utilizar:

size: tamaño absoluto 1-7
Face: tipo de letra, separandola por coma, podemos poner varios tipos, que se elegirán por orden de aparición.
Etiqueta <sub></sub> para poner el texto como subindice

Para crear tablas utilizamos:

Etiqueta <table> </table> para definir las tablas.
Etiqueta <tr> </tr> para definir las características de la fila.
Etiqueta <td> </td> para definir las caraterísticas de la celda.
Atributo WIDTH para el ancho
Atributo BORDER para poner el borde
Atributo CELLSPACING define la separación entre las celdas en pixeles.
Atributo CELLPADDING número pixeles entre borde y contenido.
Atributo WIDTH y HEIGHT, ancho y alto, en pixeles o porcentaje.
Atributo ALIGN alineación right, left, center.
Atributo VALIGN alineación en vertical, top, botton, middle.
Atributo BGCOLOR, color de fondo.
Atributo BACKGROUND, imagen de fondo de la tabla.

Para unir celdas utilizamos:

COLSPAN, para unir columnas.
ROWSPAN, para unir filas

EJERCICIO:

Con todo esto, haz un nuevo punto en el indice que se llame tablero y que nos envíe a un archivo nuevo, tablero.html. En este archivo nuevo crea una tabla, que ejerza de tablero de ajedrez, con las celdas en blanco y negro, poniendo imágenes de los buenos del señor de los anillos en un extremo y en el otro los malos. En la fila de los peones deberá aparecer el nombre en mayúsculas de los personajes que aparecene en la imágen:

Nombre de los malos, letra arial, tamaño 3

Nombre de los buenos, letra helvetica, tamaño 4

La letras en color rojo.

Un saludo