utilidades didacticas Cursos Gratis recursos didacticos
Inicio, Reduca, tu web de recursos educativos Registro de Usuarios, gratis y rápido, Reduca, recursos didácticos Cursos gratis Reduca, Recursos educativos Descargas didácticas y educativas, audio, historia, ciencia, biografías,programas, libros- Reduca
Recursos educativos

Menú principal

Utilidades educativas
Recursos didacticos

Contacto

Recursos educativos- REDUCA
 Favoritos
 Inicial
 Webmaster
 
 
tecnicas de estudio

Chat

técnicas de estudio
aprender a estudiar

Diccionario RAE

aprender a estudiar
Palabra:
aprender a estudiar

Cursos

aprender a estudiar
REDUCA, DESCARGAS EDUCATIVAS

tenicas de estudio

REDUCA CURSOS GRATIS


Vamos a comenzar con un curso de como crear una página web y un curso de Técnicas de Estudio. Con el curso de diseño HTML, seremos capaces al terminar el curso de crear una pagina web completa y además aprenderemos a crear un Portal completo, todo paso a paso. Desde poner un enlace para el correo electrónico, hasta un registro de usuarios.

técnicas de estudio

aprender a estudiar

DISEÑO HTML



EL CURSO LO VAMOS A DIVIDIR EN CUATRO PARTE:
INDICE

  1. Tú Primera página WEB, sólo para no Iniciados
  2. Comandos básicos
  3. Texto: tamaño, color y tipo
  4. Incluir imágenes y sonidos
  5. Otros comandos interesantes
  6. Links: conectar varias páginas y correo electrónico

1. Tu Primera WEB

TOP  1  2  3  4  5  6 

INTRODUCCIÓN

Bienvenidos a todos/as, para empezar os diremos que esto no es un curso de HTML, sino más bien una pequeña introducción al HTML. El objetivo de este minicurso es construir una página sin la ayuda de editores, ni de complicados comandos (que más adelante si queréis podéis aprender) y lista para ser colocada en la RED. A la conclusión de este curso tienes que ser capaz de construir una página web en HTML (el lenguaje de Internet) que incluya:

  • texto,
  • imágenes y
  • sonido

todo ello con posibilidades de incluir nuestro fondo favorito y nuestra dirección e-mail para que nuestros colegas nos envíen sus sugerencias.

Para asesoraros ponemos a vuestra disposición a nuestros PROFESORES, contactar con ellos a través del FORO DE HTML, para que vuestras dudas y las respuestas, puedan ser compartidas con otros usuarios.

Antes de empezar a construir nuestra página, tenemos que tener una idea. ¿Que queremos incluir?, ¿que queremos que aparezca en nuestra página?, ¿que deseamos compartir con los amigos de la Red?

Una vez terminéis la WEB, enviádnosla por correo electrónico (adjuntais los archivos html) y la subiremos al servidor para tener una "Colección de web, hechas por Ustedes"

Para realizar una WEB tenemos que tener una idea clara del texto que deseamos incluir y las imágenes, como combinar los colres, etc...

Cuando tengamos en mente lo que deseamos realizar y como debe lucir podemos ponernos manos a la "página".

 

HERRAMIENTAS

Para construir una página web solo es necesario disponer de un procesador de textos y de un navegador.

El procesador de texto puede ser cualquiera, las grandes aplicaciones: Word o Wordperfect, o la aplicación facilitada por el propio Windows: WordPad o Block de Notas. En nuestro curso vamos a utilizar el block de notas (de Windows) para demostrar que con las propias herramientas de Windows ( es decir sin inversión adicional) se puede llegar a Internet.

El navegador que utilizaremos será el Iexplorer de Microsoft (se puede obtener gratis de cualquier CD de las revistas especializadas, también nuestro proveedor de Internet nos lo facilitara junto con el software de conexión).

Escribiremos el código HTML que nos permitirá ir construyendo nuestra página en el block de notas e iremos verificando nuestros progresos utilizando el navegador. En esta fase no necesitaremos estar conectados a Internet. Solo cuando estemos totalmente satisfechos con nuestro trabajo empezaremos a pensar en como colocar nuestra página en la red.

 

2. Crear archivo HTML y Comandos básicos

TOP  1  2  3  4  5  6 

INTRODUCCION

Vamoa a comenzar creando el archivo HTML. Para este fín, vamos a Incicio/Todos los programas/Accesorios y elegimos abrir el bloc de notas.Una vez abierto, vamos a "Archivos/Guardar como", en la pantalla que se nos abre, escogemos "Todos los archivos" y en el "nombre" ponemos de título "miprimerapagina.html", cuidado con no olvidar poner ".html" después del nombre, ya que esto le dice al navegador que es un archivo HTML.


CLICK EN EL REPRODUCTOR - CLIC PARA VER A PANTALLA COMPLETA

Para que una página web sea interpretada por el navegador debe incluir una serie de comandos (tags) que son los que marcan lo que queremos que el navegador visualice en referencia a nuestra página.

Los comandos (tags) que utiliza el lenguaje HTML siguen unas reglas muy simples:

  • Siempre van entre corchetes, < >.

  • El mismo comando marca el principio y el fin de una acción con la única diferencia de que el comando que indica el final de la acción va precedido por la barra inclinada.

En el transcurso de esta sesión iremos desarrollando paso a paso una página web empezando con los comandos básicos y añadiendo diversos comandos hasta que nuestra página este lista para su presentación en "SOCIEDAD".

LO OBLIGATORIO

Toda página web incluye los siguientes comandos o tags:

  • <HTML> </HTML>

  • <HEAD> </HEAD>

  • <TITLE> </TITLE>

y su distribución en nuestra página es como sigue:

<html>

<head>

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

</head>

</html>

(A efectos de claridad en el material de referencia de este curso se escribirán siempre los comandos del lenguaje en color azul. Otro aspecto a destacar es que el lenguaje no hace diferencia entre mayúsculas y minúsculas, por lo que es indiferente utilizar unas u otras)

Con este pequeño programa conseguimos que el navegador sepa que esta ante una página web que se identifica con el título Mi primera página web.

La dirección (URL) indica en que directorio esta incluida nuestra página. En la barra azul observamos que se muestra en nombre (o título) que le hemos puesto a nuestra página.

La página esta vacía mostrando el característico color gris que por defecto utiliza el navegador de Microsoft.


CLICK EN EL REPRODUCTOR . CLIC PARA VER A PANTALLA COMPLETA

¿ QUE MAS SE DEBE INCLUIR ?

A continuación debemos incluir el texto, imágenes, etc. que queremos se vean en nuestra página. Todo aquello que se visualice en nuestra web debe estar incluido entre el comando <BODY> </BODY>. Este comando va siempre detrás del comando </HEAD>.

Es decir;

<html>

<head><title> Mi primera página web </title></head>

<body>

Hola, esta es mi primera página en Internet. De momento solo estas breves líneas, pero esperar un poco y ya veréis......

</body>

</html>

 


CLICK EN EL REPRODUCTOR - . CLIC PARA VER A PANTALLA COMPLETA

3. Texto: tamaño, color y tipo

TOP  1  2  3  4  5  6 

Podemos modificar el tamaño del texto, elegir diferentes colores así como tipos de letras. Para ello solo tenemos que añadir unos sencillos comandos en nuestra página web.

<FONT SIZE="+2"> Tamaño de letra

COLOR="green"> Color de letra

FACE="impact"> Tipo de letra

</FONT>

Estos comandos pueden combinarse entre ellos o usarlos de forma individual.

También existen una serie de comandos que realzaran nuestro texto y son los siguientes:

<B> </B> Letra en negrita

<I> </I> Letra en itálica.

Otro conjunto de comandos nos ayudara a poner cabeceras en nuestra página:

<H1> </H1> Letra muy grande

<H2> </H2> Letra grande

hasta

<H6> </H6> Letra pequeña

 

EJEMPLO

<html>

<head><title> Mi primera página web </title></head>

<body>

<font color="green">

Hola, esta es mi primera pán en Internet. </font>

<font color="red" size="+3"> <b>

De momento solo estas breves líneas, </b></font>

<font face="impact"> <i>

pero esperar un poco y ya veréis.... </i></font>

</body>

</html>

 

 

Un par de comandos más: para poder controlar cuando el texto debe cambiar de línea utilizamos <BR> y para crear un párrafo usamos <P>.

Repitamos nuestro ejemplo con cortes de línea:

<html>

<head><title> Mi primera página web </title></head>

<body>

<font color="green">

Hola, esta es mi primera página Internet. </font> <br>

<font color="red" size="+3"> <b>

De momento solo estas breves líneas, </b></font> <br>

<font face="impact"> <i>

pero esperar un poco y ya veréis.... </i></font>

</body>

</html>

 


CLICK EN EL REPRODUCTOR - . CLIC PARA VER A PANTALLA COMPLETA

4. Incluir imágenes y sonido

TOP  1  2  3  4  5  6 

Otro aspecto interesante de las páginas web es la posibilidad de incluir fotos, dibujos, en resumen: imágenes.

El comando básico para insertar una imagen o sonido es:

Imagen: <IMG SRC="nombredibujo.gif">

Sonido <IMG SRC="nombresonido.mid">

Como se observa la única diferencia es el tipo de fichero que estoy indicando que se va a insertar.

Los comandos necesarios para poder controlar donde y como se va a visualizar la imagen es como sigue:

<IMG SRC="nombredibujo.gif" ALT="Texto que queremos que se vea si la imagen falta o si ponemos el curso encima de la imagen">

WIDTH="200"> es la anchura de la imagen

HEIGHT="150"> es la altura de la imagen

ALIGN="CENTER o RIGHT o LEFT"> es donde queremos que vaya alineada nuestra imagen- centro, derecha o izquierda

 

En nuestro ejemplo base vamos a insertar un dibujo entre la primera y la segunda línea

<html>

<head><title> Mi primera página web </title></head>

<body>

<font color="green">

Hola, esta es mi primera página en Internet. </font> <br>

<img src="dka.gif" alt="DKA Servicios y Formación"><br>

<font color="red" size="+3"> <b>

De momento solo estas breves líneas, </b></font> <br>

<font face="impact"> <i>

pero esperar un poco y ya veréis.... </i></font>

</body>

</html>

 

Vamos a mejorar el aspecto modificando el tamaño de la imagen y dejando que el texto flote alrededor de nuestra imagen. También vamos a modificar ligeramente nuestro ejemplo incluyendo una cabecera y un solo tipo de letra.

<html>

<head><title> Mi primera página web </title></head>

<body>

<h1> Hola, esta es mi primera página en Internet. </h1> <br>

<img src="dka.gif" width=180 height=131 align="left" alt="DKA Servicios y Formacion">

<font color="red" size="+2"> <b>

Ya tengo suficientes conocimientos para incluir una imagen y un breve o largo comentario. Sigo investigando para perfilar y mejorar mi página. Estoy seguro que podré incluir algún efecto más que sorprenda a todos. </b></font> <br>

</body>

</html>

 

5. Otros comandos interesantes

TOP  1  2  3  4  5  6 

Podemos tener un mayor control sobre nuestra página con la ayuda de los siguientes comandos:

Dentro del comando <BODY> podemos incluir los siguientes comandos que nos permitirán cambiar el color de fondo de nuestra página o poner como fondo una imagen:

<BODY BACKGROUND="dibujo2.gif"> Pone una imagen como fondo

BGCOLOR="aqua"> Marca el color de fondo

Otro comando que nos permite mejorar nuestra página es <HR> este comando nos permite insertar una barra en la página. Esta barra puede ser tan larga o ancha como nosotros queramos y también puede tener el color que más nos interese. Para ello utilizamos los siguientes comandos:

<HR SIZE=" ">

WIDTH=" %">

ALIGN="CENTER, LEFT, RIGHT">

COLOR="GRAY">

 

Por último un comando que nos permite indicar donde queremos que se posicione nuestro texto:

<DIV ALIGN="CENTER, RIGHT, LEFT"> </DIV>

Vamos a incorporar estos comandos a nuestro ejemplo.

<html>

<head><title> Mi primera página web </title></head>

<body bgcolor="green">

<h1> Hola, esta es mi primera página en Internet. </h1>

<hr size="5" width="80%" color="red" align="center"><br>

<div align="center">

<img src="dka.gif" width=180 height=131 align="left" alt="DKA Servicios y Formación">

<font color="red" size="+2"> <b>

Ya tengo suficientes conocimientos para incluir una imagen y un breve o largo comentario. Sigo investigando para perfilar y mejorar mi página. Estoy seguro que podré incluir algún efecto más que sorprenda a todos. </b></font> <br>

</div>

</body>

</html>


CLICK EN EL REPRODUCTOR - . CLIC PARA VER A PANTALLA COMPLETA

6. Links: conectar varias páginas y comando para enviar correo electrónico

TOP  1  2  3  4  5  6 

Con los comandos aprendidos en las lecciones anteriores ya estamos en disposición de construir una página web personal. Pero para acabar con la sesión vamos a introducir los comandos necesarios para crear un link (una conexión) entre varias páginas web.

El comando básico para crear un link es como sigue:

<A HREF="nombre del archivo.html> Nombre del enlace </A>

Con este comando estamos indicando que hemos conectado la página web actual (miprimerapagina.html) con la página web denominada "misegundapagina.html". El texto que se inserte ente <A> </A> aparecerá subrayado y si pinchamos en él nos trasladaremos a la pagina web "misegundapagina.html".

Para introducir un enlace hacia nuestro programa de correo electrónico para que nos puedan enviar mensajes a él, simplemente pondremos esta instrución "mailto" dentro de la etiqueta "a herf", es como sigue:

<A HREF="mailto:nombre del nuestro correo electrónico">enviar mensaje</a>

Veamos como queda en nuestro ejemplo:

miprimerapagina.html

<html>

<head><title> Mi primera página web </title></head>

<body bgcolor="#FFB080">

<h1> Hola, esta es mi primera página en Internet. </h1>

<hr size="5" width="80%" color="red" align="center"><br>

<div align="center">

<img src="dka.gif" width=180 height=131 align="left" alt="DKA Servicios y Formación">

<font color="red" size="+2"> <b>

Ya tengo suficientes conocimientos para incluir una imagen y un breve o largo comentario. Sigo investigando para perfilar y mejorar mi página. Estoy seguro que podré incluir algún efecto más que sorprenda a todos. </b><br>

<hr size="5" width="80%" color="red" align="center"><br>

<a href="misegundapagina.html"> Ir a mi segunda página </a><br><br>

<A HREF="mailto:nombredecorreo@hotmail.com">enviar mensaje</a>

</font>

</div>

</body>

</html>

 

misegundapagina.html

<html>

<head><title> Mi segunda página web </title></head>

<body bgcolor="green">

<h1> Hola, esta es mi segunda página en Internet. </h1>

<hr size="5" width="80%" color="red" align="center"><br>

<div align="center">

<font color="yellow" size="+2"> <b>

Ahora ya dispongo de una segunda página para seguir contando mis experimentos en la web. </b><br>

<hr size="5" width="80%" color="red" align="center"><br>

<a href="miprimerapagina.html"> Ir a primera página </a>

</body>

</html>


CLICK EN EL REPRODUCTOR - . CLIC PARA VER A PANTALLA COMPLETA

PUEDEN COMPROBAR AMBAS PÁGINAS
YA PUESTAS EN LA RED Clic Aquí




Bueno pues hemos conluido esta breve introducción al lenguaje HTML, como véis no es tan complicado, aunque quedan muchas cosas por ver, si os interesa el tema, matricularos en nuestro

CURSO COMPLETO DE DISEÑO HTML, que incluye Temario, Block, CD interactivo, libro de Ejercicios, Rotulador y bolígrafo, además de 60 horas de tutorías y CERTIFICADO de realización, por la cantidad de 150 euros. CLICK EN LAS IMAGENES PARA MATRICULAROS



UN SALUDO A TODOS/AS

FIN


técnicas de estudio

aprender a estudiar
Google
Directorio de Cursos gratis

técnicas para concentrarse

Cursos Gratis Trabajadores

trabajo y estudio

VIDEO CLIP

estudiar en el extranjero
Elegir estudios

Juegos Flash

Elegir estudios
Airfox


1. fofito071176: 895

¡Establece la tuya!
técnicas para concentrarse

Cursos Recomendados

Design by DKA Formación

Cursos Gratis - Cursos Online