Creación de páginas Web y configuracion de HTML

Para tener una página en Internet necesitará:

1. Crear los ficheros o archivos que componen la Web. Una Web normalmente se compone de un cierto número de páginas. Por ejemplo, esta página del curso, que es un fichero con terminación htm.
2. Una dirección de Internet. Por ejemplo la dirección www. aulafacil.com. Por ejemplo www.elpais.es
3. Tener un alojamiento o servidor en Internet donde colocar la Web. Lo normal es construir la web y tenerla en el disco duro de nuestro ordenador y luego enviarla a un servidor de Internet. Un servidor de Internet en realidad es otro ordenador que está permanentemente encendido y conectado a la Red.
4. Y enviar los ficheros normalmente desde el disco duro de su ordenador al sitio donde se alojará la página. Algunos Portales permiten la creación y alojamiento de páginas personales directamente en Internet de forma sencilla.

A) LA CREACION DE LOS FICHEROS.

La construcción de las páginas de una Web se suele realizar utilizando diferentes programas editores. Los programas editores permiten la creación de páginas de una forma sencilla sin tener que programar cada instrucción del lenguaje Html.

Si dispone de Microsoft Office seguramente tiene instalado en su ordenador el programa Front Page. Este programa le permite crear de una forma sencilla los ficheros que componen las páginas Web.
Los programadores avanzados suelen emplear varios programas para la creación de las páginas. Uno de los favoritos es el Dreamweaver

Los programadores avanzados suelen emplear varios programas para la creación de las páginas. Uno de los favoritos es el Dreamweaver

Otra opción es programar directamente en HTML. . Esta es una opción para los que desean profundizar y comprender el lenguaje que se encuentra detrás de las páginas de Internet.(Mas adelente les esplico como configurar HTML)

B) LA DIRECCION DE INTERNET

Existen dos opciones:

* Tener una dirección propia del tipo www.aulafacil.com. Esto es lo que se denomina una dirección de primer nivel.
* Utilizar una dirección gratuita que nos proporciona algún Portal de Internet del tipo www.geocities/yosemite/Aqui/lapaginadenacho
Si desea crear una página personal y no necesita que la Web disponga de una dirección de primer nivel puede crear y alojar su página en alguno de los Portales que ofrecen esta posibilidad.

Algunos Portales que proporcionan alojamiento y facilidades para crear páginas personales son Iespana y Pobladores. Puede ver la explicación en Páginas gratuitas

Para realizar las páginas necesitará seguramente imágenes o Gif y diferentes complementos para darle vistosidad a las páginas

C) EL ALOJAMIENTO

* El alojamiento puede ser gratuito. Normalmente es una opción para páginas personales. Varios Portales en Internet proporcionan alojamiento gratuito con ciertas restricciones. Páginas gratuitas
* Para las empresas lo normal es pagar un alojamiento para sus páginas.
D) ENVIO DE LAS PAGINAS A INTERNET

Para subir los ficheros que ha creado desde el disco duro de su ordenador al servidor de Internet disponemos de varias opciones. Nuestra opción favorita es utilizar un programa especializado FTP.

La Dirección de la página. Los Dominios en Internet

Con relación a la dirección de la página tenemos dos primeras opciones:

1.

Si queremos tener nuestra propia dirección. Como por ejemplo Aulafacil.com. Tenemos que pagar el registro.
2.

Otra opción es utilizar un alojamiento gratuito. El alojamiento gratuito tiene ciertas limitaciones por lo que se suele utilizar para páginas personales. Una dirección del tipo http://geocities.com/Paris/2226/principal.htm

Diferentes Portales proporcionan alojamiento gratuito y una dirección a las páginas personales. Por ejemplo, el Portal Iespana y una posible dirección seria http://www.iespana.es/aaprender/

REGISTRO DE UN DOMINIO PROPIO

Si queremos tener nuestra propia dirección tenemos que buscar un nombre que no este registrado y pagar el registro.

Podemos registrar diferentes terminaciones:

*

La terminación .com es para las empresas y procede de company
*

La terminación .net estaba pensada para las redes.
*

La terminación .org se refiere a organization. Organizaciones no lucrativas.

Las marcas de empresas reconocidas, se encuentran protegidas por la legislación. Las empresas que ya tienen direcciones funcionando en Internet se encuentran protegidas por las legislaciones.

Supongamos que deseamos que nuestra página se denomine PedazodePagina.com

Nos vamos por ejemplo a Arsys

*

Tecleamos el nombre que deseamos registrar. Por ejemplo PedazodePagina
*

Y pulsamos Enviar


*

Una vez que conseguimos localizar un dominio que este libre y por tanto no registrado, pulsamos Registrar. A continuación, seguimos las distintas páginas para dar la conformidad al contrato y dar los datos necesarios.
*

Completamos el formulario de Pago.

Otras empresas donde podemos realizar el registro con las instrucciones en castellano son Acens

Nominalia

El registro de dominios con terminación .es podemos realizarlo directamente en Nic

Podemos realizar el registro en numerosas páginas. Todas tienen la misma validez y son parecidas. Un registro muy barato y sencillo pero con las instrucciones en ingles Dotster. Otro registro es el de Netsol

Podemos igualmente realizar el registro con las terminaciones para los diferentes países. Por ejemplo en la página de VeriSing

Los aspectos legales relacionados con los dominios podemos consultarlos en Dominiuris

PAGINAS GRATUITAS

Si deseamos tener una página gratuita no necesitamos realizar el registro del dominio. El Portal donde alojemos de forma gratuita la página será la que nos proporcione la dirección. Por ejemplo si utilizamos Iespana la dirección puede ser http://www.iespana.es/cursocrear/

En cualquier caso si tenemos una empresa es interesante registrar el dominio con la terminación .com y tenerla reservada.

LECCION 2ª
Creación de una Página Personal gratuita

En numerosos Portales podemos crear una página personal.
Por ejemplo en Iespana,

*

Desde la portada. Pulsamos sobre Mi sitio

Pulsamos sobre Crear


#

Aparecen las condiciones del contrato. Pulsamos al final de la página Si acepto las condiciones.
#

En la página siguiente ponemos el nombre y los datos del sitio. Por ejemplo aaprender y un título por ejemplo "los mejores cursos".
#

Nos hacemos miembros de I-club dando nuestros datos personales y una dirección de E-mail auténtica.
#

Ahora tenemos que activar nuestro sitio utilizando la clave de activación que recibimos en la dirección de E-mail que hemos dado.

Entrando de nuevo a Mi sitio. En la parte superior izquierda de la página se encuentran las herramientas de diseño, Diseña tu sitio .Una forma sencilla de realizar una página es utilizar el Editor HTML.

LECCION 3ª
COMO ENVIAR LAS PAGINAS WEB A LOS SERVIDORES CON FTP

OBTENER EL PROGRAMA PARA REALIZAR EL ENVIO

Las páginas las creamos y las guardamos en el disco duro de nuestro ordenador.Para que puedan ser vistas en Internet tenemos que enviarlas desde nuestro ordenador al ordenador conectado a Internet.Es lo que se denomina hospedar una página en un servidor de Internet.

Existen diferentes procedimientos para enviar las páginas que hemos creado. El procedimiento que preferimos en utilizar un programa especializado en la transferencia de ficheros. Uno especialmente bueno es el WS_FTP95 y las versiones posteriores.

El programa WS_FTP es gratuito para estudiantes y páginas no comerciales y barato para propósitos comerciales.

Podemos bajarnos directamente el programa de la dirección.
LINK


COMO ENVIAR LOS FICHEROS

Una vez que tenemos instalado el programa pulsamos sobre el programa ejecutable para ponerlo en marcha. En nuestro caso pulsamos sobre la imagen FTP

Nos aparece el Cuadro Propiedades de Sessión. Esta es la parte que puede dar algún problema. Los datos para rellenar este cuadro los facilita la empresa o web donde hemos decidido alojar nuestra Web. Suelen enviar la información en un E-mail cuando se contrata el servicio hospedaje con las instrucciones para rellenar este cuadro. El ejemplo que mostramos a continuación corresponde al alojamiento de aulafacil.org. Si no conocemos el Host Type, es decir el tipo de servidor ponemos Automatic detect para que el mismo programa se ocupe de investigarlo.

* Y pulsando Aceptar
Si todo va bien aparece un cuadro parecido al siguiente.



ENVIAR PAGINAS DEL DISCO DURO DE NUESTRO ORDENADOR AL SERVIDOR DE INTERNET

l.Nos movemos por nuestro disco duro para encontrar el subdirectorio donde tenemos colocados los archivos que deseamos enviar.
1b.Tenemos un botón en la parte superior en el que si pulsamos aparecen las diferentes carpetas o directorios de nuestro disco duro.


ll Podemos movernos hacia arriba haciendo clic en la flecha superior

lll El sistema para movernos por las diferentes carpetas del servidor es el mismo sistema.

Si deseamos colocar los archivos en una carpeta que ya esta creada en el servidor simplemente hacemos doble clic sobre la carpeta correspondiente. En el siguiente ejemplo ya tenemos creada la carpeta para el curso denominada "CrearInternet" y hacemos clic dos veces para entra en este apartado y poder colocar los ficheros.


2 Marcamos los que deseamos enviar. Si queremos enviar varios ficheros a la vez , podemos marcarlos manteniendo pulsada la Tecla Ctrl que se suele encontrar en el extremo Inferior izquierdo del teclado. Otra forma de seleccionar varios ficheros que se encuentran uno a continuación de otro es manteniendo pulsada la flecha de Mayúsculas y pulsando la flecha Arriba o Abajo..

3 Y pulsamos la flecha que apunta a la derecha tal como se muestra en la siguiente imagen.Es preciso tener cuidado pues si enviamos un fichero con el mismo nombre que otro ya existente en el servidor, eliminaremos, borraremos el anterior.

Cuando tenemos muchos ficheros en los que estamos trabajando y subimos ficheros de manera frecuente puede ser complicado saber que ficheros he actualizado desde última sesión. Para subir únicamente los ficheros que hemos actualizado un truco útil es utilizar Date.
*

Pulsamos sobre Date. Nos ordena por fechas de actualización. Normalmente los ficheros que hemos actualizado desde el último envío son los que aparece antes de WS_FTP.LOG. En nuestro ejemplo son los cuatro primeros archivos, tal como se muestra en la siguiente imagen.
*

Marcamos los primeros ficheros que se muestran.


BAJAR FICHEROS DEL SERVIDOR AL DISCO DURO DE NUESTRO ORDENADOR

* Nos movemos por los directorios del servidor.
* Marcamos los ficheros que deseamos bajarnos.
* Pulsamos la Flecha que apunta hacia la Derecha

LECCION 5ª
Gestionar el servidor de Internet

CREAR UN DIRECTORIO EN EL SERVIDOR

Pulsamos sobre MkDir


Le ponemos un nombre a la nueva carpeta es decir al directorio que deseamos crear. En nuestro ejemplo escribimos en el recuadro CursoFrontPage.

Para evitar problemas de compatibilidad con diferentes navegadores es aconsejable poner un nombre sin dejar huecos. Y tampoco utilizar acentos, "ñ" o símbolos diferentes al alfabeto estándar NorteAmericano.

En la ventana del programa se mostraran las diversas carpetas que hemos creado. En este caso se muestran como carpetas amarillas que hemos creado para ordenar los ficheros del servidor.


ELIMINAR

* Marcamos el fichero o el directorio que deseamos borrar. Antes de borrar un directorio debemos asegurarnos que este no contiene ficheros que deseamos mantener. Es preciso tener cuidado con lo que se elimina para no perder información o ficheros valiosos.
* Pulsamos sobre Delete


SALIR

* Pulsamos Close
* Y pulsamos Exit

Alojamiento de páginas

Tenemos una primera opción que hemos comentado anteriormente y es el alojamiento gratuito. Numerosas páginas personales se alojan en Portales que ofrecen espacio gratuito. Este sistema suele tener muchas limitaciones y restricciones. Podemos alojar nuestra página gratis en GratisWeb por ejemplo o en Iespana

Para las Webs de empresas o profesionales lo normal es un alojamiento de pago con una dirección propia. Existen numerosas empresas que proporcionan alojamiento. Por ejemplo, en castellano son importantes Arsys.es y Acens.

Para buscar y comparar alojamiento podemos ir a la página BuscaHost

Existen proveedores de los Estados Unidos que proporcionan alojamientos a bajo coste de gran capacidad. Aunque las instrucciones suelen estar en idioma inglés. Por ejemplo Yahoo y Linuxwebhost.

Para buscar y comparar alojamientos en empresas Norteamericanas podemos hacerlo en Hostindex

Podemos tener distintos tipos de alojamientos, dependiendo del sistema operativo o si compartimos el ordenador con otros clientes.

Dependiendo del sistema operativo que utilizan podemos distinguir servidores:

* Los servidores Windows que suelen ser más caros.
* Y los servidores que emplean el sistema operativo Unix o Linux y que evitan a Bill Puertas.

Ciertas bases de datos o programas funcionarán en unos servidores pero no en otros. Las empresas de alojamiento suelen especificar en las características técnicas de sus servidores que programas y bases de datos soportan.

El tipo de alojamiento puede ser:

1. Alojamiento compartido. Es el más frecuente. A menos que se trate de una página con muchas, muchas, visitas esta es la opción típica. En este tipo de alojamiento varias páginas comparten un servidor. Cada cliente tiene asignada una parte del disco duro que gestiona con independencia. Un alojamiento compartido es como un apartamento en un edificio.
2. Servidor dedicado. Todo el ordenador es para una página o empresa. Es un sistema más costoso. Apropiado para empresas con páginas que reciben muchas miles de visitas cada día. Es como tener una vivienda independiente.

Si tiene dudas contrate un alojamiento de bajo coste. En caso de necesitar más recursos, normalmente puede aumentarlos rápidamente comunicándoselo a la empresa de alojamiento. Algunas empresas incluso disponen de sistemas automatizados para solicitar el incremento de los recursos.

Como confeccionar una página web

Para confeccionar una página web lo único que se necesita es un editor de texto. Existen editores especializados en crear ficheros HTML

Podemos utilizar Notepad, WordPad o el que queramos. Es preferible utilizar Notepad o un editor especializado para generar ficheros de Html que en editor más avanzado que puede incluir códigos no deseados.

Seguramente tienes uno de estos programas en tu ordenador. Si no sabes donde esta pulsa en la esquina inferior izquierda "Inicio" y "Buscar"

Pasos para crear la página web:

1. Abrir el programa editor de texto.

2. Escribir los códigos o "tags". Escribimos los comandos como escribimos en un procesador de textos. Y guardamos el fichero que creamos como fichero de texto.A lo largo de este curso veremos los diferentes códigos.

*

Una vez abierto el programa editor de texto voy escribiendo los códigos o "tags"
*

Las instrucciones, códigos o "tags" de html van entre dos signos < y >. Las instrucciones es indiferente si se escriben en mayúsculas o minúsculas.
*

Tenemos que poner un código de inicio y uno de cierre.

Ejemplo: Poner texto en negrilla

La instrucción para que un texto se ponga en negrilla es <b>Soy magnífico</b>

La instrucción de cierre tiene que llevar el signo /

Por lo tanto:

A) Ponemos el código de inicio para poner el texto en negrilla <b>

B) A continuación el texto que queremos que aparezca en negrilla y

C) Al final el código de cierre </b>



3. Guardar el fichero. Es recomendable que cree un directorio en el disco duro de su ordenador para guardar ordenadas los ficheros que iremos generando.

1.

Para guardar el fichero tenemos que ponerle un nombre y como extensión htm. html o shtml. Es decir nombre, punto y htm. Por ejemplo miprimerapagina.htm
2.

Es preferible no poner acentos, "ñ" ni simbolos extraños para evitar problemas de compatibilidad
3.

No ponerle espacios en blanco al nombre del fichero.
4.

Y guardar como documento de TEXTO. Formato de texto ASCII. Volveremos a ver esta cuestión.

Una vez guardado el fichero podemos ver como queda utilizando el mismo programa con el que ve esta página. El resultado cuando veamos con el navegador el documento será

Soy magnífico

Puede ver como quedaría el fichero pulsando el enlace miprimerapagina. Para volver pulse Atrás en su navegador


Si utiliza una versión avanzada de Internet Explorer, puede ver los códigos de la página. Una vez que este en miprimerapagina pulse en la Barra superior:

*Pulsamos Archivo
*Y pulsamos Modificar con Microsoft Front Page. Esperamos unos segundos.

Y pulsamos sobre la pestaña HTML que se encuentra en la parte inferior derecha.

LECCION 2ª

Vamos a realizar nuestra primera página utilizando los códigos html que denominaremos "La Primera" y en la que aparezca escrito "soy un fenómeno"

Tenemos que crear un fichero en el que podremos las instrucciones y lo guardamos como fichero con terminación .htm

A) Todas las páginas html comienzan con el código de inicio <html> y terminan con el código </html>

Así que ponemos

<html>

</html>

B) Las páginas html se dividen en un encabezado y un cuerpo. Para el encabezamiento tenemos que poner los "tags"

<head>

</head>

Tenemos que ponerlo dentro de las instrucciones inicial y final de página (paso A) por lo tanto nos queda

<html>

<head>

</head>

</html>

C) Igualmente insertamos las instrucciones para el cuerpo de la página <body> y </body>

Con lo que nos queda

<html>

<head>

</head>

<body>

</body>

</html>



Podemos dejar líneas en blanco para comprender con más claridad la estructura del programa que estamos escribiendo. las líneas en blanco serán ignoradas cuando se ejecute el fichero html

D) Le ponemos título a la página con la instrucción <title> </title> que tenemos que poner dentro del encabezado (entre head y head)
<html>

<head>
<title>Mi primera Pagina</title>
</head>

<body>
</body>
</html>



E) Vamos a poner el texto en negrilla "Soy un fenómeno". La instrucción para negrilla es <b> y <b/>. Y el texto hay que colocarlo dentro del cuerpo (entre body y body) de la página.

Por tanto nos queda

<html>

<head>

<title>Mi primera Pagina</title>

</head>

<body>

Soy el mejor

</body>

</html>

LECCION 3ª

Guardamos el fichero para lo cual es aconsejable ser ordenado y crear un subdirectorio en el disco duro de nuestro ordenador para ir almacenando los ficheros.

Es importante:

A) Ponerle al fichero la terminación html

B) Guardarlo como documento de TEXTO (para que no se incluyan otros códigos)

C) Para evitar problemas es interesante que en el nombre del fichero, NO DEJAR ESPACIOS y NI PONER SIGNOS NO COMUNES como acentos, "ñ", o símbolos de distintos idiomas.

LECCION 4ª

DAR FORMATO A LAS LETRAS

Cambiar los atributos de las letras utilizamos el comando <font> </font> (fuente o tipo de letra). El color o el tamaño son atributos del elemento tipo de letra.

Podemos dar distintos atributos a las letras.

A) TAMAÑO DEL TEXTO

* Si queremos poner las letras de distinto tamaño empleamos el atributo

SIZE="".

* Dentro de las comillas pondremos "+" para aumentar el tamaño y "-" para disminuirlo

EJEMPLO 1

<FONT SIZE="+1">este texto se ve con mayor tamaño</FONT>

El resultado:
este texto se ve con mayor tamaño



EJEMPLO 2

Si queremos aun mayor tamaño ponemos un número mayor. Voy a probar con 4

<FONT SIZE="+4">este texto se ve muy grande</FONT>
este texto se ve muy grande



EJEMPLO 3

Para disminuir el tamaño ponemos -1

<FONT SIZE="-1">al poner -1 disminuye el tamaño</FONT>

Al poner -1 disminuye el tamaño



Podemos poner el texto en negrilla, en cursiva o subrayado



PONER EL TEXTO EN NEGRILLA

Para poner el texto en negrilla utilizamos el tag "b" (de bold)

Soy el <b>mejor</b> de la clase

Soy el mejor de la clase



PONER EL TEXTO EN CURSIVA

Para ponerlo en cursiva utilizamos "i" (de italian)

Poner un <i>texto en cursiva</i>

Poner un texto en cursiva



PONER EL TEXTO SUBRAYADO

Para subrayado

Ahora toca el <u>subrayado</u> de parte de la frase

Ahora toca el subrayado de parte de la frase

LECCION 5ª
PONER COLORES

La instrucción para poner color a las letras es

<FONT COLOR="entre estas comillas va el nombre o el número del color">aquí el texto al que queremos dar color</FONT>



EJEMPLO 1

Para poner el texto en rojo

<FONT COLOR="RED">este texto se pone rojo</font>

El resultado si lo ponemos dentro de los códigos del fichero html será

este texto se pone rojo

EJEMPLO 2

Para poner el texto en azul

<FONT COLOR="BLUE">este texto se pone en azul</font>

este texto se pone en azul

LECCION 6ª
LAS PARTES DE LAS INSTRUCCIONES

Por tanto vemos que las instrucciones de HTML tienen varias partes.

Las instrucciones de html se componen de tres partes fundamentales:

A) El elemento al que se refiere la instrucción. Es la palabra que va después del signo <.

Por ejemplo <font es un elemento. En este caso el elemento es el tipo de letra. La instrucción por tanto se refiere al tipo de letra.

B) El atributo. El tamaño o el color son atributos posibles del tipo de letra.

C) El valor que toma el atributo. Por ejemplo rojo o verde.

Por ejemplo, queremos:

A) Al elemento tipo de letra

B) Darle el atributo color

C) Con el valor rojo.
Elemento Atributo Valor El tag de cierre
<FONT COLOR= "RED"> </FONT>



Otro ejemplo, letra tamaño grande
Elemento Atributo Valor
<FONT SIZE= "+1"> </FONT>

LECCION 7ª
ALINEAR EL TEXTO

Para alinear el texto utilizamos el atributo align

align=left para alinear a la izquierda

align=right para alinear a la derecha

align=center para centrar el texto



EJEMPLO ALINEAR A LA IZQUIERDA

<p align="left">alineamos el texto a la derecha</p>

alineamos el texto a la izquierda



EJEMPLO "ALINEAR A LA DERECHA"

<p align="right">alineamos el texto a la derecha</p>



EJEMPLO DE CENTRAR

<p align="center">centramos el texto</p>

LECCION 8ª
LINEAS HORIZONTALES

El elemento para crear una línea horizontal es HR. Este "tag" no necesita un "tag" de cierre

Y a este elemento podemos darle distintos atributos

width para definir el largo de la línea con un cierto número de pixel o un porcentaje del documento>

size para asignar el ancho de la linea

noshade para el fondo de la línea



EJEMPLO

Línea de 100 pixels

<HR WIDTH=100>

Línea de 200 pixels

<HR WIDTH=200

Línea de un 50% del ancho del documento

<HR WIDTH=50%>

Línea del 100% del ancho del documento

<HR WIDTH=100%>

Línea con 10 de ancho

<HR SIZE=10>

Podemos combinar varios atributos. Por ejemplo línea de un 50% de largo y 10 pixel de ancho

<HR WIDTH=50% SIZE=10>

LECCION 9ª
LOS PARRAFOS Y EL CAMBIO DE LINEA

Para mantener el texto formando un párrafo o bloque de texto utilizamos el "tag" <p>aqui va el texto</p>

<p>Si utilizamos la instrucción de párrafo nos aseguramos que el texto se mantenga junto y controlamos cuando queremos que exista una línea de espacio en blanco</p>

Si utilizamos la instrucción de párrafo nos aseguramos que el texto se mantenga junto y controlamos cuando queremos que exista una línea de espacio en blanco



PASAR A LA SIGUIENTE LINEA

Cuando queremos pasar el texto a otra línea podemos utilizar el "tag" <br> que no tiene tag de cierre.

Si queremos separar el siguiente texto en varias líneas.

la casa el perro el niño las vacaciones

Pondremos:

la casa<br>

el perro<br>

el niño<br>

las vacaciones<br>

Y en el documento HTML mostrara en el navegador:
la casa
el perro
el niño
las vacaciones

LECCION 10ª
PONER TITULARES

Los titulares o encabezamiento de los textos son otra forma de modificar el tamaño del texto.

La orden para encabezamiento es "H1" para un titular muy grande, "H2" para uno grande, H3, H4, H5 y para letra pequeña H6

<H1>Encabezamiento muy grande</H1>
Encabezamiento muy grande



<H2>Encabezamiento grande</H2>
Encabezamiento grande



<H3>Encabezamiento menos grande</H3>
Encabezamiento menos grande



<H6>Encabezamiento muy pequeño</H6>
Encabezamiento muy pequeño

LECCION 11ª
LAS UTILES TABLAS

Las páginas web necesitan tener los elementos que colocamos ordenados y que se mantengan ordenados en los distintos navegadores.

Para definir el orden o la estructura de una página web se utilizan tablas con bordes ocultos. La mayoría de las páginas importantes se estructuran utilizando tablas ocultas.

Vamos a realizar una tabla con los bordes visibles

A) Las tablas comienzan con <table> y terminan con </table>

B) Definimos el borde de la tabla. Las tablas que se utilizan para ordenar los elementos sulen tener bordes invisibles para los navegadores y empleamos border="0". Si queremos un borde visible asignamos otro número al atributo borde. Nosotros en el primer ejemplo vamos a utilizar un borde visible border="1"

C) Definimos el tamaño de la tabla. Podemos definirlo como porcentaje del ancho de la página utilizando width

WIDTH="100%" nos genera una tabla que ocupa todo el ancho de la página que estamos creando.

WIDTH="50%" genera una tabla con la mitad del ancho del documento que creamos.

Podemos igualmente definir el tamaño de la tabla en número de pixel

WITH="100" ahora al no poner el % serán 100 pixel de larga la tabla y no el 100% del documento

D) Tenemos que definir las filas que lleva la tabla

<TR> </TR>

E) Y definimos las columnas utilizando

<TD> </TD>

Estas instrucciones de columna las pondremos dentro de las de fila.



EJEMPLO

Vamos a construir una tabla con el borde visible de tamaño el 100 por 100 del ancho del documento con dos filas y tres columnas.

Por tanto utilizamos al principio el "tag" <table> y al final </table>.

Definimos el borde border="1" y el ancho witdh="100%"

Definimos la primera fila con <tr> y </tr> y dentro las tres columnas <td> </td>

<tr> <td></td><td></td><td></td> </tr>

Y hacemos lo mismo con la segunda fila y sus tres columnas

<tr> <td></td><td></td><td></td> </tr>



Las instrucciones para construir la tabla nos queda. Recuerda que da igual que las instrucciones se escriban en mayúsculas o minúsculas. Los espacios en blanco no afectan al resultado por tanto es lo mismo poner <tr> <td></td><td></td><td></td> </tr> en una columna como lo ponemos a continuación.


<table border="1" witdh="100%">
<TR>
<td></td>
<td></td>
<td></td>
</TR>
<TR>
<td></td>
<td></td>
<td></td>
</TR>
</Table>

Y el resultado.

LECCION 12ª

TAMAÑO DE LAS COLUMNAS Y MARGENES DE LAS CELDAS DE LAS TABLAS

FIJAR EL TAMAÑO DE LAS COLUMNAS

El mismo atributo utilizado para definir el tamaño de la tabla se utiliza para definir o fijar el tamaño de las columnas.

Definimos el tamaño de la columna con WIDTH

Por ejemplo, queremos que en una tabla de dos columnas, la primera columna ocupe el 20 por ciento de la tabla y la segunda el 80 por ciento.

Pondremos Width=20% en las celdas de la primera columna y Width=80% en las celdas de la segunda columna.



EL MARGEN DE LAS CELDAS

Podemos asignar márgenes a las celdas, de forma que lo que pongamos dentro no quede pegado a los bordes de la celda.

Para el margen de las celdas utilizamos el atributo cellpadding="aqui ponemos el número"



EJEMPLO

Realizaremos una tabla de 2 por 3

A) Una tabla con dos filas y tres columnas, con borde de la tabla 1 y el ancho de la tabla un 75% del ancho de la página.

B) Las celdas con un margen de 15 píxeles y el tamaño de las celdas un 10% del tamaño de la tabla la primera columna, un 20% del tamaño de la tabla la segunda columna y un 70% del tamaño de la tabla la tercera columna.

C) Pondremos dentro de las celdas las letras a,b,c,d,e,f

Quedaría

<table border="1" cellpadding="15" cellspacing="0" width="75%">

<tr>

<td width="10%">a</td>

<td width="20%">b</td>

<td width="70%">c</td>

</tr>

<tr>

<td width="10%">d</td>

<td width="20%">e</td>

<td width="70%">f</td>

</tr>

</table>



Y el resultado
a b c
d e f

LECCION 13ª
EL COLOR DE LAS TABLAS

Para ponerle color a una celda utilizamos el atributo bgcolor="aqui ponemos el nombre o número del color"

EJEMPLO

Vamos a realizar una tabla de dos filas y dos columnas, con borde de tamaño "1" y de largo el 50% del ancho de página. Y le ponemos a una celda fondo rojo con el atributo bgcolor="red" y a otra fondo azul
<table border="1" cellpadding="0" cellspacing="0" width="50%">
<tr>
<td width="50%" bgcolor="red"></td>
<td width="50%" bgcolor="blue"></td>
</tr>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
</table>

COLOR DEL FONDO DE LA TABLA

Para darle color a toda la tabla es suficiente con poner el atributo bgcolor"" dentro de la instrucción de tabla. Para poner fondo amarillo bgcolor="yellow"

<table border="1" cellpadding="0" cellspacing="0" width="50%" bgcolor="yellow">

EJEMPLO

Una tabla de tres filas y dos columnas con un largo del 75%.
Y fondo amarillo

<table border="1" cellpadding="0" cellspacing="0" width="75%" bgcolor="yellow">

<tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>

<tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>


<tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>
</table>

LECCION 14ª
PONER ENLACES

Lo más característico de Internet es ser un medio que no es lineal sino hipertexto es decir que utiliza enlaces para movernos entre distintos niveles o páginas.

La instrucción para un enlace es de la forma <A HREF="aqui ponemos la dirección a la que queremos que apunte el enlace">el texto que queremos que se vea en el documento</A>

EJEMPLO

Queremos enlazar con la página 100mejores.com y que el texto que se vea sea "La mejor selección de enlaces"

<A HREF="http://www.100mejores.com/">La mejor selección de enlaces"</A>

La mejor selección de enlaces

Recordar que los enlaces externos a otras páginas deben llevar la dirección completa de la página.

LECCION 15ª
INSERTAR IMAGENES

Para insertar imágenes utilizamos <img src="aquí ponemos la dirección de la imagen">

Este tag no tiene tag de cierre.

En Internet tenemos numerosas páginas que proporcionan imágenes gratis. Por ejemplo

http://www.gifmania.com/

Nos vamos a gifmania para obtener una imagen de una ejecutiva

Seleccionamos mujeres y ejecutivas.

Nos situamos sobre la imagen y pulsamos el botón DERECHO

Lo guardamos con el nombre de fichero ejecutiva y guardar como tipo de fichero GIF. Podemos guardarlo con varios tipos de ficheros, elegimos los gif por ocupar poco espacio y dar pocos problemas de compatibilidad.

Si lo guardamos en el MISMO directorio que el fichero HTML que estamos creando la instrucción para insertar la imagen de la ejecutiva nos queda:

<img src="ejecutiva.gif">

Es MUY IMPORTANTE tener cuidado con las direcciones de la imágenes. Si las imágenes están en un directorio y el fichero html que estamos creando en otro directorio, la dirección de la imagen debe indicar la localización de la imagen en el otro directorio.

Cuando hemos puesto imágenes en un fichero HTML y al enviarlo al servidor de Internet no aparecen suele ser por dos motivos:

A) Hemos enviado el fichero HTML a Internet pero no los ficheros con las imágenes.

B) Al enviarlo al servidor la dirección donde el programa busca la imagen es distinta de donde realmente esta la imagen. Para comprobar si donde esta la imagen coincide con la dirección que tiene la página nos colocamos sobre la imagen (o sobre donde debería estar) y pulsando el botón DERECHO en el menú que aparece pulsamos propiedades.

Lo recomendable es MANTENER LA MISMA ESTRUCTURA DE DIRECTORIOS en el disco duro de nuestro ordenador y en el servidor de Internet. Al mover los ficheros en el disco duro y posteriormente enviarlo al servidor puede que la dirección de la imagen no coincida con la localización de la imagen.



Para insertar imágenes animadas se hace todo igual que para insertar imágenes. Simplemente elegimos una imagen animada para enlazar. Por ejemplo en la misma página de http://www.gifmania.com/

Seleccionamos una imagen animada


La guardamos con el nombre ejecutivaanimada

La instrucción para insertar la imagen queda:

<img src="ejecutivaanimada.gif">

Y el resultado

LECCION 17ª
ATRIBUTOS RELACIONADOS CON INSERTAR IMAGENES

Para una correcta visualización en los distintos navegadores es aconsejable definir el largo y alto de la imagen que se inserta

LARGO Y ALTO

Para definir el largo y el alto de una imagen utilizamos los atributos WIDTH y HEIGHT

Por ejemplo la imagen ejecutivaanimada tiene unas dimensiones de 167 pixels de largo por 109 pixels de alto. Podemos comprobarlo situándonos sobre la imagen y pulsando el botón DERECHO del ratón seleccionar "Propiedades"

La instrucción quedaría

<img src="ejecutivaanimada.gif" WIDTH="167" HEIGHT="109">


EL BORDE DE LAS IMAGENES

Podemos ponerle borde a la imagen empelando el atributo border y asignándole un valor por ejemplo 2. Si no queremos borde podemos poner border=0

<img border="2" src="ejecutivaanimada.gif" WIDTH="167" HEIGHT="109" >


Es posible y recomendable poner un texto para cuando no aparezca la imagen por algún motivo.


TEXTO ALTERNATIVO A LA IMAGEN

Para poner un texto alternativo se utiliza el "tag" ALT

Vamos a poner la imagen anterior con un borde mayor y en un recuadro más largo y menos alto y con el texto alternativo "secretaria animada"

<img border="5" src="ejecutivaanimada.gif" WIDTH="250" HEIGHT="90" ALT="secretaria animada">

LECCION 18ª
PONER UN BOTON O PONER UN ENLACE EN UNA IMAGEN

Si queremos poner un botón o una imagen que al pulsarla el usuario se encamine a otra página, utilizamos la orden para poner enlaces combinada con la orden para insertar imágenes.

<a href="dirección del enlace a otra página"> <img src="aquí ponemos la localización de la imagen"></a>

Vamos a poner la imagen de la secretaria y que al pulsarla lleve al usuario al portal de secretarias

http://www.secretariaplus.com

La instrucción nos quedaría:

<a href="http://www.secretariaplus.com"> <img src="ejecutivaanimada.gif"> </a>

Y se vera al acceder con el navegador a la página. De forma que al pulsar sobre la imagen nos dirigimos a la página enlazada. Vale, de acuerdo, pulsa la imagen pero recuerda darle en tu navegador al "pa tra" "atras" o "Back" y seguir el curso.

Esto nos permite poner botones y flechas que al pulsarlas nos encaminan a otras páginas de nuestra web o externas.

OTRO EJEMPLO

Insertamos una imagen que al pulsarla nos sitúa en la portada de aulafacil

<a href="http://www.aulafacil.com"><img border="0" src="HOMEWHT.gif" width="90" height="70"></a>

LECCION 19ª
ATRIBUTOS DE LA PAGINA O ATRIBUTOS DE "BODY"

Hemos visto que los ficheros HTML se dividen en una cabecera y un cuerpo o body. Los ficheros incorporan las instrucciones

<html>

<head>

</head>

<body>

</body>

</html>

Al "tag" body podemos añadirle una serie de atributos de color para asignar un color diferente:

A) Al fondo del documento con BGCOLOR

B) Colocar una imagen de fondo BACKGROUND

C) LINK para cambiar el color de los enlaces

D) VLINK para cambiar el color de los enlaces ya visitados por el usuario

E) Podemos cambiar el color del texto con el atributo TEXT



EJEMPLO

Asignaremos un fondo de color amarillo al documento

<html>

<head>

</head>

<body bgcolor=yellow>

</body>

</html>

Nos quedará el fondo de la página en amarillo.

LECCION 20ª
AÑADIR COMENTARIOS

Una buena idea cuando se programa es ir añadiendo comentarios para aclarar lo que estamos haciendo. Esto es especialmente importante cuando después de un tiempo volvemos a revisar un programa o cuando otro programador tiene que revisar o utilizar el programa.

Los comentarios no aparecen cuando el usuario ve el fichero con un navegador y no tiene efectos en el programa.

Para añadir comentarios utilizamos <!--aqui ponemos los comentarios sobre el programa-->

Lo mismo podemos hacer utilizando los "tags" <comment>aqui ponemos el texto del comentarios</comment>
pedazo de curso que estoy haciendo

SALUDOS Y GRACIAS