Tecno Infante Don Juan Manuel: diciembre 2011

viernes, 16 de diciembre de 2011

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

jueves, 15 de diciembre de 2011

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   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 .
Tenemos el siguiente ejemplo:

Este sería el resultado....

Si utilizamos el atributo ALIGN en la etiqueta 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

lunes, 12 de diciembre de 2011

HTML 5. USO DE LAS FUENTES.

Para poder cambiar el tamaño, tipo de letra o color de texto, utilizamos la etiqueta . 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......
 Tamaño tipo 6 
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.
 Tipo de letra arial
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.
Texto de color rojo

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: 
cursiva: 
subrayado:

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

viernes, 9 de diciembre de 2011

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  .

<HTML>

<HEAD>

<TITLE> Práctica 1</TITLE>

</HEAD>

<BODY>

IES Infante Don Juan Manuel

1º Bachillerato

Murcia

</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

Abrir bloc de notas.
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.
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.

viernes, 2 de diciembre de 2011

HTML. ESTRUCTURA BÁSICA DE UNA PÁGINA WEB.

EL HTML es el lenguaje con el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir el texto de forma estructurada, y que está compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del documento.

Un documento de hipertexto, no sólo se compone de texto, puede tener imágenes, sonido, vídeos, etc, por lo que el resultado puede considerarse como un documento multimedia.

Los documentos HTML deben tener la extensión html o htm, para que puedan verse en los navegadores.

Los navegadores se encargan de interpretar el código HTML de los documentos y de mostrar a los usuarios las páginas web resultantes del código interpretado.

Los más comunes son Internet Explorer y Mozilla Firefox.

Editores

Un editor es un programa que nos permite redactar documentos HTML. Hoy en día la mayoría nos permiten crear páginas web sin la necesidad de escribir ni una sola línea de código HTML.

Algunos editores más conocidos son Dreamweaver, Frontpage,

Compozer, etc.......