INFORMÁTICA 4º ESO LOLA: mayo 2012

viernes, 25 de mayo de 2012

Ejercicio 14: Enlace a una URL que no está en nuestro servidor.

Vamos a poner un enlace en nuestra página index.html a la página principal de otra página web, como por ejemplo http://www.pinturayartistas.com.
Podemos incluso copiar una imagen de la página web y ponerla en nuestra página para que funcione como enlace. Para ello, pulsamos con el botón derecho sobre la imagen en cuestión y la guardamos en nuestro disco en la carpeta "imagenes" que ya tenemos creada.
Lo primero será incluirla en nuestro index.html y luego enlazarla. Vayamos por partes:

<html>

<head>

<title>Página web de Lola Mena</title>

</head>

<p><h1>Teoría del color</h1></p>
<img src="/imagenes/artista.gif" align="right">
<ol type="A">

<li>El color luz

<li>El color pigmento

<li>Colores cálidos

<li>Colores fríos

</ol>
...

Ya hemos colocado la imagen (se llama por ejemplo artista.gif y está en la carpeta "imagenes"). Ahora vamos a hacer el enlace a la página:

...

<p><h1>Teoría del color</h1></p>
<a href="http://www.pinturayartistas.com"><img src="/imagenes/artista.gif" align="right"></a>
<ol type="A">

<li>El color luz

<li>El color pigmento

<li>Colores cálidos

<li>Colores fríos

</ol>

...

Guardamos el archivo, lo visualizamos en el navegador y probamos el enlace...

Ejercicio 13: Los hiperenlaces.

El hipertexto o hiperenlace nos permite enlazar nuestra página web con otras de dos formas:

1. Dentro de la misma página: poniendo un enlace que nos lleve a otro lugar dentro de la misma página.
2. A otra página: simplemente tendremos que dar la URL donde se encuentra, bien en nuestro disco duro, bien en internet.

A estos enlaces se les llama también link.

Vamos a construir tres páginas y partir de aquí las enlazaremos primero unas con otras.

Empezaremos con la primera página. A esta primera página o página principal la llamaremos index.html.

Escribamos su código:

<html>

<head>

<title>Página web de Lola Mena</title>

</head>

<h1>Teoría del color</h1>
<ol type="A">

<li>El color luz

<li>El color pigmento

<li>Colores cálidos

<li>Colores fríos

</ol>
<table align="center" border="1" width="75%" height="150">

<tr>

<td>Síntesis aditiva</td>

<td>Síntesis sustractiva</td>

<td>Colores complementarios</td>

</tr>

</table>

</body>

</html>

Esto, que es más o menos lo que llevamos hecho hasta ahora, habrá que guardarlo en un directorio nuevo. Construiremos una página con los títulos para el bloque uno. Este archivo se llamará bloque1.html y éste es su código:

<html>

<head>

<title>Página web de Lola Mena-Bloque1</title>

</head>

<h1>Teoría del color: El color luz</h1>
<ol type="A">

<li>Newton y la teoría de las descomposición de la luz.

<li>La síntesis aditiva del color luz.

<li>Uso terapéutico del color.

<li>Colores luz y escenografía.

</ol>
<table align="center" border="1" width="75%" height="150">

<tr>

<td>Síntesis aditiva</td>

<td>Síntesis sustractiva</td>

<td>Colores complementarios</td>

</tr>

</table>

</body>

</html>

Bien, ahora enlazaremos la página principal (index.html) con la página bloque1.html. Para ello utilizaremos el tag <a href="URL">Texto de enlace</a>.

Ahora tendremos que añadir el código necesario en el archivo index.html.

<html>

<head>

<title>Página web de Lola Mena</title>

</head>

<h1>Teoría del color</h1>
<ol type="A">

<li><a href="bloque1.html"> El color luz</a>

<li>El color pigmento

<li>Colores cálidos

<li>Colores fríos

</ol>
...

Una vez que guardes este código en el archivo index.html, tus archivos deben quedar como siguen:

1. Tendrás una carpeta en la que debe haber asimismo una carpeta "imagenes" en las que estarán tus imágenes (las que utilices en la página web).
2. Dentro de esa carpeta mayor habrá también un documento llamado bloque1.html y otro llamado index.html.

Bien sólo nos queda enlazar ahora la página bloque1.html con index.html. Para ello pondremos un enlace , por ejemplo, en la imagen que tenemos. Modificamos el código del archivo bloque1.html y lo guardamos, actualizamos el navegador y comprobamos los enlaces.

<html>

<head>

<title>Página web de Lola Mena-Bloque1</title>

</head>

<center><a href="index.html"><img src="imagenes/banner.jpg">
border="0" alt="Página Principal" title="Página Principal"></a></center>

<h1>Teoría del color: El color luz</h1>

miércoles, 23 de mayo de 2012

Un poquito de entretenimiento y nuevas tecnologías.

miércoles, 16 de mayo de 2012

Ejercicio 12. Creando tablas.

La mejor forma de organizar cosas en filas y columnas es una tabla.
Para añadir una tabla a nuestra página utilizaremos el tag <table></table>. Este tag se puede modificar así:
<table align="alineamiento" border="tamañoborde" width="anchura".
Donde "alineamiento" puede ser left, center o right; "tamañoborde" es un valor en píxeles para la anchura del borde y "anchura"es el ancho total de la tabla y se puede expresar en píxeles (width="200") o porcentajes (width="90%").

Si incluimos la tabla en nuestra página podría quedar así:

...
<li>Ordenando el texto </ul>
<table align="center" border="1" width="75%" height="150">
</table>
<p><font color=#4ff3ff size=+2>Lola Mena </font><img src="f1.gif" alt="[Smile]">
</p>

La tabla que hemos insertado sería una tabla alineada al centro, con un tamaño de borde de un pixel, cuyo ancho total ocuparía el 75% de la pantalla y de alto tendría 150 píxeles.

Pero para que la tabla tenga sentido tendremos que introducir las filas con el tag <tr></tr> y las columnas con el tag <td></td>.
Sería así:

...

<table align="center" border="1" width="75%" height="150">
<tr>
<td>Primera fila, columna una</td>
<td>Primera fila, columna dos</td>
<td>Primera fila, columna tres</td>
<td>...</td>
</tr>
</table>

Podemos seguir introduciendo columnas según este esquema:

...

<table align="center" border="1" width="75%" height="150">
<tr>
<td>Primera fila, columna una</td>
<td>Primera fila, columna dos</td>
<td>Primera fila, columna tres</td>
<td>...</td>
</tr>
<tr>
<td>Segunda fila, columna una</td>
<td>Segunda fila, columna dos</td>
<td>Segunda fila, columna tres</td>
<td>...</td>
</tr>

</table>

Podemos, como ya hemos dicho antes, modificar los parámetros de la tabla para que cambie. Haz algunos cambios y quédate con la tabla que más te guste:

...

<table align="center" border="1" width="75%" height="150">
<tr>
<td align="center">Primera fila, columna una</td>
<td align="left">Primera fila, columna dos</td>
<td align="right">Primera fila, columna tres</td>
<td>...</td>
</tr>
<tr align="center">
<td>Segunda fila, columna una</td>
<td>Segunda fila, columna dos</td>
<td>Segunda fila, columna tres</td>
<td>...</td>
</tr>

</table>

Ejercicio 11. Subimos nuestro trabajo a Dropbox

Vamos a subir nuestro trabajo HTML a nuestra Dropbox. Accede a tu cuenta, crea una carpeta que se llame trabajo html, sube el archivo html que has realizado. También tienes que subir las fotos que insertaste en tu web html.

jueves, 10 de mayo de 2012

10. Cómo introducir imágenes.

Para incluir una imagen en una página web HTML tendremos que utilizar el tag <img src="imagen">. Para que el código funcione es necesario que tengas la imagen en el directorio donde tengas el archivo de la página web. Para eso puedes guardar las imágenes en una carpeta independiente que llames "images".
El ejemplo quedaría así:

<html>

<head>

<title>Primera Página</title>

</head>

<img src="banner.gif">

<h1>Mi primera página web.</h1>

<p>Estoy haciendo mi primera página web y esto empieza a gustarme, ya sé darle <i>color al fondo</i> y a <i>las letras</i> y ahora estoy aprendiendo a <b>darle formato al texto.</b></p>

<h2>Dando Formato al Texto</h2>

<ul>

<li>Salto de línea

<li>tag &lt br &gt

<li>tag &lt p &gt

</ul>

<li>Enfatizando el texto

<li>Tamaño de la fuente

<li>Ordenando el texto

</ul>

</body>

</html>

O también:

...
<img src="images/banner.gif">

Para colocar la imagen en un lugar determinado de la página, utilizaremos modificadores del tag <img>. Por ejemplo, para colocarla en el centro <center><img....></center>; si la queremos alinear a derecha o izquierda pondremos <img src=banner.gif align="right">, o left en vez de right...

Si la imagen va más arriba, en medio o abajo usaremos top, middle ó bottom. Por ejemplo:

...

<img src="f1.gif" align="top"></p>

</body>

</html>

Finalmente si queremos que nos aparezca un comentario cuando pongamos el ratón encima de imagen, tendremos que colocar el modificador title del tag <img>. El texto que queremos que aparezca, lo pondremos entrecomillado.

...

</body>

</html>

martes, 8 de mayo de 2012

9. Ordenando el texto.

En cuanto al orden del texto, podemos utilizar viñetas ordenadas o sin ordenar, que llamaremos listas ordenadas (si están numeradas) o listas desordenadas:

<ol><li>Primer elemento<li>Segundo elemento...</ol>

<ul><li>Primer elemento<li>Segundo elemento...</ul>

<html>

<head>

<title>Primera Página</title>

</head>

<h1>Mi primera página web.</h1>

<p>Estoy haciendo mi primera página web y esto empieza a gustarme, ya sé darle <i>color al fondo</i> y a <i>las letras</i> y ahora estoy aprendiendo a <b>darle formato al texto.</b></p>

<h2>Dando Formato al Texto</h2>

<ol type="A">

<li>Salto de línea

<li>Enfatizando el texto

<li>Tamaño de la fuente

<li>Ordenando el texto

</ol>

</body>

</html>

Lo que hemos introducido como nuevo quedaría así:

Dando Formato al Texto

A. Salto de línea

B. Enfatizando el texto

C. Tamaño de la fuente

D. Ordenando el texto

En vez de poner type="A", podemos también poner "a" (letras minúsculas), "I" (números romanos en mayúsculas), "i" (números romanos en minúsculas) ó "1" (numeración decimal). Si no ponemos nada, utilizará automáticamente la decimal.

También podemos utilizar listas anidadas, como por ejemplo:

<html>

<head>

<title>Primera Página</title>

</head>

<h1>Mi primera página web.</h1>

<p>Estoy haciendo mi primera página web y esto empieza a gustarme, ya sé darle <i>color al fondo</i> y a <i>las letras</i> y ahora estoy aprendiendo a <b>darle formato al texto.</b></p>

<h2>Dando Formato al Texto</h2>

<ol>

<li>Salto de línea

<ol type="a">

<li>tag &lt br &gt

<li>tag &lt p &gt

</ol>

<li>Enfatizando el texto

<li>Tamaño de la fuente

<li>Ordenando el texto

</ol>

</body>

</html>

En este caso hemos hecho dos cosas: la primera introducir una lista dentro de otra. La segunda, para que aparezca en la página web los símbolos < y > que forman parte del código, hay que utilizar &lt y &gt. Quedaría así:

Dando Formato al Texto

1. Salto de línea

a. tag < br >

b. tag < p >

2. Enfatizando el texto

3. Tamaño de la fuente

4. Ordenando el texto

Por último, dentro de las listas desordenadas (viñetas) utilizaremos el tag <ul> con el parámetro <ul type="valor">, donde valor puede ser circle (círculo abierto), square (cuadrado sólido) ó disk (disco sólido). Quedaría así:

...

<h2>Dando Formato al Texto</h2>

<ul>

<li>Salto de línea

<ul type="square">

<li>tag &lt br &gt

<li>tag &lt p &gt

</ul>

<li>Enfatizando el texto

<li>Tamaño de la fuente

<li>Ordenando el texto

</ul>

Dando Formato al Texto

Salto de línea

(viñeta cuadrada) tag < br >

(viñeta cuadrada) tag < p >

Enfatizando el texto
Tamaño de la fuente
Ordenando el texto

8. Tamaño de la fuente.

Al hablar del tamaño de la fuente, lo primero es que tenemos que distinguir entre el tag <h1>...</h1> (que es el encabezado de nivel 1 y hay hasta seis <h2>...</h2>, <h3>...</h3>,...,<h6>...</h6>) y el tamaño de la fuente.

En el primer caso:

<html>

<head>

<title>Primera Página</title>

</head>

<h1>Mi primera página web.</h1>

<p>Estoy haciendo mi primera página web y esto empieza a gustarme, ya sé darle <i>color al fondo</i> y a <i>las letras</i> y ahora estoy aprendiendo a <b>darle formato al texto.</b></p>

</body>

</html>

El resultado será que Mi primera página web aparecerá en un tamaño mucho mayor, indicando que es el título principal.

En el segundo caso, cuando queremos modificar el tamaño de la fuente, tendremos que incluir size dentro del tag <font>...</font>, poniéndole un + delante del número para agrandar y un - para reducir la letra del tamaño estándar (size=0).

Podría quedar así:

<html>

<head>

<title>Primera Página</title>

</head>

<h1>Mi primera página web.</h1>

<p>Estoy haciendo mi primera página web y esto empieza a gustarme, ya sé darle <i>color al fondo</i> y a <i>las letras</i> y ahora estoy aprendiendo a <b>darle formato al texto.</b></p>

</body>

</html>

También podemos indicar simplemente el tamaño en una escala del 1 a 7:

<html>

<head>

<title>Primera Página</title>

</head>

<h1>Mi primera página web.</h1>

<p>Estoy haciendo mi primera página web y esto empieza a gustarme, ya sé darle <i>color al fondo</i> y a <i>las letras</i> y ahora estoy aprendiendo a <b>darle formato al texto.</b></p>

</body>

</html>

viernes, 4 de mayo de 2012

7. Dándole color y forma al texto.

Seguimos con nuestro archivo HTML y ahora nos vamos a ocupar del texto:

1. Si le hemos puesto un color oscuro al fondo, elegiremos un color claro para el texto, por ejemplo:

<html>
<head>
<title>Primera Página</title>
</head>
<body bgcolor=#5d0000 text=#f9e783>
Mi primera página web
</body>
</html>

Este parámetro text dentro del tag body da formato a todo el texto del documento. Si queremos también podemos dar sólo color a algunas palabra o incluso a letras concretas. Podemos hacerlo añadiendo nuestro nombre, por ejemplo:

<html>
<head>
<title>Primera Página</title>
</head>
<body bgcolor=#5d0000 text=#f9e783>
Mi primera página web
<font color=#4ff3ff>Lola Me</font>na
</body>
</html>

El tag font se usa para cambiar características del tipo de letra, en este caso con el parámetro color se define el color del texto.

3. Para darle formato al texto, ya conocemos algunos tags, como por ejemplo los que se refieren a:

Salto de línea: Hay dos tags que son <br> y <p>...</p>. <br> Corte (break), corta la línea sin que se interrumpa el texto, mientras que <p>...</p> marca el contenido de un párrafo.

Podéis probar con los dos tags y ver los efectos que producen:

<html>
<head>
<title>Primera Página</title>
</head>
<body bgcolor=#5d0000 text=#f9e783>
Mi primera página web
<p><font color=#4ff3ff>Lola Me</font>na</p>
</body>
</html>

o:

<html>
<head>
<title>Primera Página</title>
</head>
<body bgcolor=#5d0000 text=#f9e783>
Mi primera página web
<br><font color=#4ff3ff>Lola Me</font>na
</body>
</html>

En el primer caso tiene que quedar así:

Mi primera página web

Lola Mena

Y en el segundo quedará así:

Mi primera página web
Lola Mena

Como veis la diferencia está en la distancia entre párrafos, con lo que podemos enfatizar el texto.

Para poner el texto en cursiva o negrita utilizamos <i>...</i> de itálica y <b>...</b> de bold (negrita).

<html>
<head>
<title>Primera Página</title>
</head>
<body bgcolor=#5d0000 text=#f9e783>
Mi primera página web
<p>Estoy haciendo mi primera página web y esto empieza a gustarme, ya sé darle <i>color al fondo</i> y a <i>las letras</i> y ahora estoy aprendiendo a <b>darle formato al texto.</b></p>
<p><font color=#4ff3ff>Lola Me</font>na</p>
</body>
</html>

Otros tags que remarcan el texto son:

<s>~~...texto tachado...~~</s> (también <strike>...</strike>)
<u>...texto subrayado...</u>

En la próxima entrada abordaremos el tema del tamaño de la fuente y la ordenación del texto.

Ejercicio 6: Dropbox.

Antes de continuar vamos a abrirnos una cuenta en Dropbox. Es muy útil. Se trata de tener un espacio gratuito de 2 Gigas en Internet, donde podemos subir los archivos que queramos y acceder a ellos desde cualquier ordenador (sólo puedes acceder tu, claro).

Intenta abrirte una cuenta. En internet hay muchas páginas que te dicen como hacerlo, como por ejemplo esta:

http://www.tecnologiadiaria.com/2011/03/crear-cuenta-dropbox.html

Ejercicio 5. Mi primera Página Web paso a paso.

1. Ya sabéis que lo primero es abrir el editor de texto y escribir el código de inicio y fin de página:

<html>
Mi primera página web
</html>

Después de esto ya podéis guardarlo en vuestra carpeta de trabajo con el nombre primera.html o vuestronombre.html.

Si abrís la carpeta con doble clic, os aparecerá la estructura más simple de una página web...

2. Ahora vamos a añadir las dos secciones principales en las que se divide una página web: cabecera (<head> </head>) y el cuerpo (<body> </body>).
Como ya hemos indicado antes, en el head irá todo lo que no se ve dentro de la página pero es información sobre la misma: autor, título,...
En el body insertaremos el texto, los gráficos y todos los demás tags que darán forma al texto.

3. Abrimos de nuevo el editor de texto con nuestro documento y lo modificamos:

<html>
<head>
<title>Primera Página</title>
</head>
<body>
Mi primera página web
</body>
</html>

4. Al abrirlo en el navegador, lo que aparece entre los tag <title> </title> es el título que veremos en la barra del navegador.

5. Ahora vamos a darle color a la página.
HTML utiliza un sistema de color llamado RGB y para especificar un color se utilizan seis dígitos en parejas de dos números escritos en sistema hexadecimal cuyo formato será el siguiente:

color=#rrggbb

rr es la cantidad de color rojo que lleva la mezcla.
gg es la cantidad de verde (green).
bb será la cantidad de azul (blue).

El ejemplo que sigue sería la manera de darle color a nuestra página web (os pongo en negrita lo único que añadimos, bgcolor que es background color o color de fondo y va dentro del tag <body>):

<html>
<head>
<title>Primera Página</title>
</head>
<body bgcolor=#5d0000>
Mi primera página web
</body>
</html>

Para escoger el color podemos utilizar cualquier herramienta de dibujo que tenga una paleta de colores o el mismo programa GIMP. Abriendo el programa y haciendo doble click sobre el cuadrado de color negro se nos abre un cuadro de diálogo donde podemos escoger el color que nos gusta o modificar los valores de rojo, verde o azul.

En la próxima entrada hablaremos de cómo darle forma y color al texto...

jueves, 3 de mayo de 2012

Ejercicio 4: Estructura de la página web.

La página web que vais a elaborar tendrá que tener al menos las siguientes características:

1. Tendrá mínimo 3 páginas escritas en código html.
2. Las 3 páginas estarán enlazadas entre sí.
3. Una página tendrá al menos un enlace a un lugar dentro de ella.
4. Por lo menos una página contendrá una imagen pequeña enlazada a la original más grande.
5. Una página tendrá una tabla.
6. Insertaréis una lista ordenada.
7. Todas las páginas tendrán fondo distinto al blanco y letras de distinto tamaño y color.
8. Tema: libre, pero os recuerdo que cuanto más enlazado con vuestro currículo, mejor. No puntuaré ninguna página web que presente contenidos ofensivos, discriminatorios o que atenten contra el respeto y las opiniones del resto de los compañeros. Cuanto más educativo, mejor nota obtendréis...

Más teoría HTML...

Bueno, por si todavía no tenéis claras algunos conceptos sobre el nuevo lenguaje que estamos utilizando, aquí os dejo estas aclaraciones que espero que os ayudarán a entenderlo.

1. HTML significa Hypertext Markup Languaje, o lenguaje de marcas de hipertexto. Los ficheros html (pág. web) son ficheros de texto y la forma del texto viene definida por un conjunto de marcas o tags.

2. El Navegador distingue los tags del resto del texto porque van dentro de <...>.

3. Las letras de la etiqueta pueden estar en mayúsculas o minúsculas. Usaremos las minúsculas.

4. Todo lo que haya entre ambas etiquetas estará influenciada por ellas. Por ejemplo, todo el documento HTML debe estar entre las etiquetas <html> y </html>.

5. Para crear las páginas html sólo necesitamos un editor de textos lo más simple posible. Hay programas específicos que hacen directamente páginas web sin que tengamos que aprender los códigos, pero el conocer la estructura de una página HTML es fundamental para que las cosas aparezcan en el navegador como queramos.

Ejercicio 3: más html

Te dejo aquí un enlace con los códigos básicos del lenguaje html.
Debes diseñar una web utilizando el máximo de comandos de la lista.
Cuando termines copia el código html que usaste y copia y pégalo en una nueva entrada (en la parte redactar). Titula la entrada MÁS HTML.

INFORMÁTICA 4º ESO LOLA

viernes, 25 de mayo de 2012

Ejercicio 14: Enlace a una URL que no está en nuestro servidor.

Ejercicio 13: Los hiperenlaces.

miércoles, 23 de mayo de 2012

Un poquito de entretenimiento y nuevas tecnologías.

miércoles, 16 de mayo de 2012

Ejercicio 12. Creando tablas.

Ejercicio 11. Subimos nuestro trabajo a Dropbox

jueves, 10 de mayo de 2012

10. Cómo introducir imágenes.

martes, 8 de mayo de 2012

9. Ordenando el texto.

8. Tamaño de la fuente.

viernes, 4 de mayo de 2012

7. Dándole color y forma al texto.

Ejercicio 6: Dropbox.

Ejercicio 5. Mi primera Página Web paso a paso.

jueves, 3 de mayo de 2012

Ejercicio 4: Estructura de la página web.

Más teoría HTML...

Ejercicio 3: más html

Fúmbol

Miguel anguel silvestre

Alessadro

JUSTIN BIEBER