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

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

domingo, 11 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 <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."

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

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




    domingo, 30 de octubre de 2011

    WIKI 5. Invitar usuarios a nuestra wiki.

    Vamos ahora a invitar a otros usuarios para que puedan colaborar con nosotros para hacer alguna página.
    Tenemos que ir a "Administrar wiki", una vez dentro podemos ir a Miembros o a Invitar a personas. El inconveniente de Miembros es que solo dejará invitar uno a uno.


    Vamos a seleccionar invitar personas.


    Una vez enviada la invitación, dentro de la opción miembros nos saldrá que el usuario está a la espera de confirmación.


    Una vez confirmado el invitado, ya forma parte de tu wiki.

    viernes, 28 de octubre de 2011

    WIKI 4. Insertar videos.

    En esta práctica vamos a aprender a insertar video. Para ello vamos a crear una página nueva que se llame "Ejemplo de video". Ya sabéis como hacer. Una vez dentro, en el modo de edición pinchamos en Widget y dentro de Widget pinchamos en el enlace de Video.


    Una vez dentro, pinchamos en el logo de youtube e insertaremos en el cuadro de texto el código HTML del video que queremos insertar.


    Ahora vamos a buscar el video que queremos poner. Nos metemos en youtube y buscamos un video con el nombre "web 2.0".


    Ahora solo nos queda buscar el código HTML para poder insertarlo en la wiki. Creo que no habrá ninguna duda.
    Finalmente, debería quedar así.....

    WIKI 3. Insertar presentaciones.

    Vamos a seguir practicando con la wiki insertando más cosas. Crea una página nueva que se va a llamar "ejemplo de presentación".
    En esta página vamos a insertar una presentación de Slideshare, para ello pinchamos en el icono de Widget.


     Dentro de Widget pulsamos en pase de diapositivas.


    Y a continuación pinchamos en Otros/as, ya que no es una prestación de slide ni de flickr.


    Una vez dentro, solo tenemos que insertar el código HTML de la presentación que queramos.
    Entonces, vamos a buscar una presentación en Slideshare sobre "murcia web 2.0", accedemos a la presentación "Blogosfera y otros espacios".


    Y ya simplemente tenemos que buscar donde tiene su código HTML,. Recordar que es donde ponía Embed o < >.


    Ya solo queda pegar el código de la presentación y pegarlo en vuestra Wiki. Fácil no?
    Este sería el resultado....


    WIKI 2. Insertar una página nueva.

    Vamos a practicar insertar una página nueva. Para ello nos vamos a Página nueva y la creamos.

    La página se va a llamar "wiki" y en el modo edición voy a escribir el siguiente texto que es la definición de wiki.


    A continuación vamos a poner el texto en color rojo y en negrita.  Al final del texto vamos a poner un enlace a wikipedia. Pondremos lo siguiente.....


    Tenemos que usar el botón "Link" y poner en enlace como se va a continuación.


    Ahora vamos a poner un enlace que nos lleve a home que es una página de la wiki, así que nos vamos a link y hacemos lo que viene a continuación.....


    Por último, pon una imagen que sea un logo de wikipedia, buscalo en google imágenes. Más o menos tiene que quedar así.