martes, 4 de junio de 2013

Ekainak 5 - WEB con blog de notas

Ejercicio final: creación de una web


En la dos últimas clases tendrás que crear una web con el bloc de notas. Para eso tendrás que:

- Escoger un tema.
- Descargarte al menos dos fotos sobre ese tema.
- Recopilar información sobre ese tema (se puede cortar y pegar desde internet).

Estas son las características que tiene que cumplir la web:

- Tiene que tener un índice y al menos dos apartados. En el índice aparecerán los apartados y haciendo clic en él, se podrán ir a la página de los apartados. En los apartados, aparecerá un link al índice y se podrá volver a él.
- La pantalla tiene que tener un color de fondo. Se puede utilizar el mismo para los diferentes apartados.
- Hay que insertar al menos dos fotos.
- Aparecerán diferentes tipos de encabezados.
- Al menos un link a una página relacionada con el tema.
- Se utilizarán la negrita, cursiva y subrayado. También los saltos de página <br> para separar las líneas.

Para ver un ejemplo, vete a la carpeta de Aingeru y hac clic en índice.

martes, 28 de mayo de 2013

Creación de web con el Bloc de Notas IV - Maiatzak 29


Enlazar páginas

 
Para introducir el tema de los enlaces vamos a empezar definiendo la sintaxis de la etiqueta de enlace que más comúnmente se utiliza:

<a href="">...</a>

Nota:   

- En el lugar de "..." se pone el texto de enlace que se verá en la página. Si la página a la que queremos ir se llama uno, tendremos que poner  <a href="uno.html">...</a>
- En los puntos suspensivos pondremos la palabra o palabras que queramos que aparezcan en la web. Pro ejemplo, si queremos que el link nos lleve a la página 1, podemos poner Página 1
   
Esta etiqueta -con su atributo- sirve para crear un enlace hacia otra página; por defecto la nueva página se abrirá en la misma página en la que se encontraba la página que contiene el enlace. Veamos un ejemplo:
<a href="uno.html">Página 1</a>

Ejercicios:

-          Crea una hoja en el bloc de notas que llamarás “indice”.
-          En esa página copia y pega estos códigos (pero poner vuestros nombres en el título, no el mío).

<html>
<title>
Página de Aingeru
</title>
<body>
Esta es la página de inicio
</body>
</html>

-          Crea otra página llamada “pagina uno” con  los mismos códigos que la página anterior, pero esta vez, dentro del cuerpo de la página (body) poner “Esta es la página uno”.
-          Crear los links correspondientes para enlazar ambas páginas (mira la teoría de hoy y pruébalo antes de pregutar!!!)
-          Pon en cada página un color de fondo diferente.

jueves, 23 de mayo de 2013

Creación de web con el Bloc de Notas III - Maiatzak 24

Seguimos aprendiendo nuevos códigos:

Encabezados:

Uno de los elementos de formato que nos resultará imprescindible será la diferenciación de tamaños de letra para poder introducir títulos de epígrafes y organizar visualmente la información.  Disponemos para esta tarea de seis formatos predeterminados de cabeceras. Para utilizarlos deberemos poner la etiqueta de apertura delante de la primera letra cuya apariencia deseemos modificar y cerrar tras la última para volver al texto normal.
















Justificación

La justificación del texto por defecto se hace a la izquierda. Además de la justificación por defecto podemos también justificar el texto a partir del centro o a partir de la derecha. Para hacerlo deberemos poner al principio del párrafo que deseamos justificar la etiqueta de apertura y la de cierre en el final.

Centrado: <CENTER> TEXTO </CENTER>

Alineado derecha: <DIV ALIGN=right> TEXTO </DIV>


Tablas

En HTML, las tablas se construyen especificando filas y celdas. El conjunto de celdas de una fila irá encerrado en las etiquetas de fila, y el conjunto de filas de la tabla, en las etiquetas de tabla.
El comienzo y fin de una tabla se define mediante el tag <table> ... </table>. Para especificar cada fila de la tabla se utilizan las etiquetas <tr> ... </tr>. Finalmente, para especificar cada celda de una fila habrá que usar las etiquetas <td> ... </td>.
Teniendo en cuenta estas simples reglas, vamos a mostrar a continuación algunos ejemplos:


 <TABLE BORDER="3" CELLSPACING="5" WIDTH="150">
     <TR>
          <TD>1 </TD> <TD> 2 </TD>
     </TR> <TR>
          <TD>3 </TD> <TD> 4</TD>
</TR>
</TABLE>



Ejercicios:

- Crea un bloc de notas para hacer los ejercicios de hoy. Luego al final lo llamarás “Bloc 2 + vuestro nombre.html”

- Escribe seis de los días de la semana con diferente tamaño. Para eso tendrás que usar los códigos de los encabezados.

- Coge de internet un párrafo y pégalo tres veces. Cada uno de ellos tiene que estar justificado de una forma diferente: izquierdo (el normal), otro centrado y otro a la derecha (lee en la teoría el apartado “justificación”).

- Crea una tabla de tres filas y tres columnas. En cada celda escribe un color. Cada palabra tiene que ir con el color que has escrito.

miércoles, 22 de mayo de 2013

Creación de web con el Bloc de Notas II - Maiatzak 22



En la clase de hoy vamos a ver otros códigos útiles:


Insertar una imagen:

Este es el código para insertar una imagen: <img src="NOMBRE.jpg" width="XXXX" height="XXXX">

IMPORTANTE: donde pone “nombre”, escribir el nombre de la foto. La foto debe estar en la misma carpeta del documento. Si no lo está, debería mostrarse la ruta.

Los parámetros width y height son la altura y anchura de la foto. Poner números para ver cual sería el tamaño real de la foto.

Mensaje POP:

<BODY onLoad="alert('Dale a aceptar para seguir');">


Link con un comentario

<a href="http://www.informatika4bilbo.blogspot.com.es/" onmouseout="window.status=''" onmouseover="window.status='';return true"> Este es el link a la página de informática </a>


IMPORTANTE: la dirección de la web tiene que estar dentro de las comas, donde está en azul. Por otro lado, el texto del link debe ser en el espacio donde pone “Este es el link a la página de informática”

Ejercicios:


  1. - En la hoja que creasteis el día anterior, introducir una foto. Para ello debéis bajaros una de internet y guardarla en la misma carpeta. Insertar la foto TRES veces, con tamaños diferentes.

-          Crear una mensaje pop avisando de que es vuestra página.

-          Crear un link a una página explicando en el link qué tipo de página es.

  1. Busca una noticia en internet, escribe en un bloc de notas un breve resumen, con al menos una página y el link de la página de la noticia. Guardarlo con el nombre “noticia + vuestro nombre.html”

jueves, 16 de mayo de 2013

Creación de web con el Bloc de Notas - Maiatzak 17


Crear una web con el Bloc de Notas


Lenguaje HTML

HTML, siglas de HyperText Markup Language («lenguaje de marcado hipertextual»), hace referencia al lenguaje utilizado en elaboración de páginas web que se utiliza para describir y traducir la estructura y la información en forma de texto, así como para complementar el texto con objetos tales como imágenes. 

El HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>).  Existen varios comandos que sirven para realizar las diferentes funciones. Por ejemplo, para separar un párrafo de otro, se utiliza la orden <br>

Hoy en día existen editores como el Dreamweaver que realizan estas funciones sin tener que saber programar el lenguaje HTML. Hoy veremos  unos comandos básicos de este lenguaje y editaremos una web en el bloc de notas.

Estos son algunos de los comandos más utilizados:


<b> </b> El texto colocado entre estas etiquetas estará en negrita.
<u> </u> El texto colocado entre estas etiquetas estará subrayado.
<i> </i> El texto colocado entre estas etiquetas estará en cursiva.
<br>  Colocamos esta etiqueta para saltar de línea.
<hr> Esta etiqueta dibuja una recta horizontal para separar dos áreas de la página.
<body  text=#(más el código del color)>  </body>  Pone todo el texto dentro de estas etiquetas en un color determinado. En este enlace tenéis los códigos de los colores.
<body  bgcolor=#(más el código del color)>  </body> Pone el fondo de pantalla de un color

EJERCICIOS

Ejercicio 1:

Pasos para crear una web con el bloc de notas:

-          Abre el bloc de notes de Windows. Para eso vete a Inicio / Todos los programas / Accesorios / Bloc de notas.
-          Se abrirá el bloc de notas y en él escribiremos las siguientes órdenes:
<html>
<head>
<title>
Esta es mi primera web.
</title>
</head>
<body>
Página en obras
</body>
</html>
-          Guardad en vuestra carpeta el documento con este nombre: “primera web + vuestro nombre.html”. Ojo: es muy importante que pongáis “.html” para decir que queréis guardar el documento en forma de web.
-          Iros a vuestra carpeta y haced clic en el archivo y veréis que se abre el documento en formato Web. Enséñale la web al profesor.

Ejercicio 2:


Ahora vamos a completar la web que hemos creado utilizando algunos de los comandos más utilizados. Para poder hacerlo, ir mirando en la teoría  algunos de los comandos más utilizados.

- Busca tres párrafos de internet y pégalos en el bloc de notas.

- El primer párrafo estará en negrita, el segundo en cursiva y el tercero subrayado.

- Entre el primer y segundo párrafo habrá una línea horizontal.

- Poned todo el texto de un color y el fondo de pantalla de otro color.

- Guardar el archivo en vuestra carpeta como “primera web + vuestro nombre.html”.  Enseñadle al profesor el resultado.

martes, 14 de mayo de 2013

Bog 1. klasea. Maiatzak 15

BLOG


¿Qué es un blog? Un blog, (también se conocen como weblog o bitácora), es un sitio web que recopila cronológicamente textos o artículos de uno o varios autores, apareciendo primero el más reciente.

Existen varios sitios para poder hacer un blog y tenerlo en la red. Posiblemente uno de los más conocidos internacionalmente sea el BLOGSPOT, que es donde crearemos nuestro blog.
En la primera clase nos abriremos una cuenta de gmail y un blog. También crearemos nuestra primera entrada.

Pasos para crear un blog en Blogspot:



















- Nos aparecerá una nueva pantalla y ahí haremos clic en "NUEVO BLOG".

- En la siguiente pantalla tendremos que poner la siguiente información:

Titulo: “Informatica 4 ESO + vuestro nombre”
Dirección: Pdm+vuestro nombre
Plantilla: elegir la que más os guste.
Al terminar, darle a “crear blog” (abajo a la derecha)


- Ya habéis creado el blog, pues tenéis una cuenta dentro de blogger con una dirección.

- El blog nos llevará a la primera pantalla, la de entrada. Ahora vamos a crear la primera entrada. Para ello, iremos al botón “crear una entrada nueva".

- Nos llevará a una pantalla donde arriba en el centro aparecerá una espacio junto a la palabra ENTRADA: Ahí tendremos que escribir el nombre de la primera entrada que haremos. La llamaremos “Introducción al blog”.

En el espacio en blanco de abajo podemos escribir texto. Copia las tres preguntas que hay a continuación, ponlas en el blog y trata de responderlas (investiga en Google )

¿Qué es un blog?
¿Para qué puede servir un blog?
¿Qué tipo de herramientas puedo utilizar en un blog?
Enumera tres sitios donde puedes crear un blog (aparte de blogger)

- Subraya y marca con negrita las preguntas. Las respuestas las pondrás en azul.
Cuando termines darle a “guardar”. Si le das al botón de “ver blog”, verás cómo quedaría tu blog visto por el público.

martes, 7 de mayo de 2013

Access final - Maiatzak 8

EJERCICIO FINAL


- Para terminar con Access, vamos a hacer un ejercicio repaso final. Vamos a crear una base de datos que sirva para almacenar recetas de platos. Para eso primero crearemos una base de datos llamadarecetas + vuestro nombre”.

Luego crearemos tres tablas:

-  La primera tabla que vamos a necesitar es la de platos. De cada plato, debemos saber su nombre y los vamos a identificar mediante un código numérico.













- También vamos a necesitar una tabla de ingredientes. De cada ingrediente, queremos saber su nombre, unidad de medida básica y precio unitario, y los vamos a identificar mediante un código numérico.

- Finalmente, nos va a hacer falta una tabla para relacionar platos con ingredientes. Llamaremos a esta última tabla recetas. En la tabla de recetas necesitamos las claves principales (código de ingrediente, código de plato), y también la cantidad del ingrediente a utilizar. OJO: La clave principal debe ser
el código de ingrediente y el código de plato, puesto que un ingrediente se puede usar para elaborar muchos platos, y un plato puede necesitar muchos ingredientes para su elaboración.

- Una vez creadas la tablas, relaciona las tres tablas. Para eso vete a HERRAMIENTAS / RELACCIONES. Pon las tres tablas, la de recetas irá en medio. A la hora de hacer las relaciones “exigir integridad referencial”.


- Ahora, tienes que crear dos platos. Para eso por cada tabla crea un formulario e introduce  los datos a través de él. Ten en cuenta los ingredientes que necesitas con sus cantidades (te los puedes inventar).


- Para terminar, vamos a crear una consulta en la que incluiremos: nombre del plato y los ingredientes.