Bienvenido

Unete y participa en este curso gratuito, deja tus comentarios, dudas, resultados y sugerencias.

Introduccion a HTML

Descripción



Las páginas Web están hechas generalmente con el lenguaje HTML.

Las paginas Web HTML son paginas Web estáticas, es decir, el contenido de sus paginas Web no cambia, solo si usted las edita manualmente cada vez que quiera realizar un cambio.

En estos casos, si usted tiene en Internet sus paginas Web HTML, y quiere mostrar mas información, nuevos videos, imágenes, etc., usted debe editar las paginas Web HTML y volver a subirlas a Internet para que los cambios tengan efecto (incluyendo los videos, imágenes, música, etc., que contengan sus paginas Web).


Objetivos

1. Conocer que es HTML.
2. Conocer como crear paginas Web HTML.
3. Conocer como introducir y dar formato al texto.
4. Conocer como hacer listas, tablas y formularios.
5. Conocer como insertar imágenes, música, videos y vínculos a otras paginas Web.
6. Conocer como cambiar el color de texto, el color de fondo, la imagen de fondo.
7. Conocer como dividir la pantalla en varias páginas Web.
8. Conocer como organizar las páginas Web.
9. Conocer como crear un sitio Web.


Estructura Basica de las Paginas Web HTML

<html>

<head>

<title> Titulo de la pagina Web HTML </title>

</head>

<body>

Aqui se inserta todo el contenido de la pagina Web HTML

</body>

</html>

donde:

<html> - indica que la pagina Web es HTML
<head> - permite especificar atributos a la pagina Web
<title> - indica el titulo de la pagina Web
<body> - es donde se encuentra todo el contenido de la pagina Web


Publicado por ingenieroMike
0 comentarios

Cambiar el color de fondo y de la letra de la pagina Web

Color de fondo de la pagina Web

Para cambiar el color de fondo de nuestra pagina Web, usaremos el atributo "bgcolor" de la etiqueta <body>.

Ejemplo:

<html>
 <head>
  <title> Color de fondo de la pagina </title>
 </head>

 <body bgcolor="purple">
  Mi pagina Web con color de fondo
 </body>
</html>

Recuerde que puede colocar el nombre del color en Ingles (ejemplo: purple), o el codigo hexadecimal del color (ejemplo: #CC00CC).

Color de la letra de la pagina Web

Para cambiar el color de la letra de nuestra pagina Web, usaremos el atributo "text" de la etiqueta <body>.

Ejemplo:

<html>
 <head>
  <title> Color de letra de la pagina </title>
 </head>

 <body text="purple">
  Mi pagina Web con color de letra
 </body>
</html>

Actividad

<html>
 <head>
  <title> Color de fondo y letra de la pagina </title>
 </head>

 <body bgcolor="purple" text="white">
  Mi pagina Web con color de fondo y color de letra
 </body>
</html>

Vea como combinamos los atributos para mejorar la apariencia de nuestra pagina.
Publicado por ingenieroMike
3 comentarios

Saltos de linea

Descripcion

Para incluir una nueva línea en un punto y forzar a que el texto que sigue se muestre en la línea inferior, se utiliza la etiqueta <br/>. En cierta manera, insertar la etiqueta <br/> en un determinado punto del texto equivale a presionar la tecla ENTER (o Intro) en ese mismo punto.


Ejemplos:

<p> Este primer párrafo no contiene saltos de línea ni otro tipo de espaciado. </p>

 <p>
   Este segundo párrafo sí que contiene saltos <br/>
   de <br/>
   línea <br/>
   y   otro   tipo   de   espaciado.
 </p>

 Esta lista esta hecha con saltos de linea: <br/><br/>

 1. Opcion A <br/>
 2. Opcion B <br/>
 3. Opcion C

Vea como se puede aplicar la etiqueta <br/> incluso dentro de otras etiquetas.

La etiqueta <br> es una de las pocas etiquetas especiales de HTML. La particularidad de <br> es que es una etiqueta vacía, es decir, no encierra ningún texto. De esta forma, la etiqueta debe abrirse y cerrarse de forma consecutiva: <br></br>.

En estos casos, HTML permite utilizar un atajo para indicar que una etiqueta se está abriendo y cerrando de forma consecutiva: <br/> (también se puede escribir como <br />).


Actividad

Escriba el siguiente codigo en un BLOC DE NOTAS, guardelo como pagina Web y vea como funcionan los saltos de linea.

<html>
     <head>
           <title> Saltos de Linea </title>
     </head>
     <body>

          El color es una percepción visual.
          <br/><br/>
          Es un fenómeno físico-químico.
          <p>         
               Todo cuerpo iluminado absorbe una parte.
               <br/><br/>
               El ojo humano sólo percibe las longitudes de onda.
          </p>

     </body>
</html>

Observe que los saltos de linea se pueden colocar donde usted lo requiera.
Publicado por ingenieroMike
0 comentarios

Marcos

Introduccion

Los frames (marcos o cuadros) permiten dividir la ventana en varias más pequeñas, de modo que en cada una de ellas se carga una página HTML distinta. Las versiones más antiguas de los navegadores no tienen implementada esta característica, por lo que no podrán verlos.

Los frames, nos permiten partir la ventana del navegador en diferentes áreas. Cada una de estas áreas son independientes y han de ser codificadas con archivos HTML también independientes. Como resultado, cada frame o marco contiene las propiedades específicas que le indiquemos en el código HTML a presentar en ese espacio. Así mismo, y dado que cada marco es independiente, tendrán sus propias barras de desplazamiento, horizontales y verticales, por separado.

Existen en la Web muchas páginas que contienen frames y seguro que todos hemos tenido la ocasión de conocer algunas. Se suelen utilizar para colocar en una parte de la ventana una barra de navegación, que generalmente se encuentra fija y permite el acceso a cualquier zona de la página web. Una de las principales ventajas de la programación con frames viene derivada de la independencia de los distintos frames, pues podemos navegar por los contenidos de nuestro web con la barra de navegación siempre visible, y sin que se tenga que recargar en cada una de las páginas que vamos visitando.

Objetivos

1. Conocer como insertar frames en nuestras paginas.
2. Conocer como dividir la pantalla en columnas.
3. Conocer como dividir la pantalla en filas.
4. Conocer como dividir la pantalla en filas y columnas a la vez.

Etiquetas

<frameset> </frameset> - agrupa los marcos horizontal o verticalmente.

<frame> - establece los marcos.

Atributos

rows - establece la cantidad de marcos que se mostraran horizontalmente (numero de filas).

cols - establece la cantidad de marcos que mostraran verticalmente (numero de columnas).

frameborder - establece si los marcos muestran borde (yes or no).

src - establece la pagina que se mostrara en el marco (url de la pagina).

scrolling - establece si el marco muestra la barra de desplazamiento (yes or no).

noresize - establece si el marco puede cambiar de tamano.

Insertar marco

Para dividir nuestra pantalla en marcos (cada uno con su respectiva pagina Web), haremos uso de las etiquetas <frameset> y <frame>. La etiqueta <frameset> agrupa los marcos que creemos, y la etiqueta <frame> es el marco donde enlazamos la pagina Web que deseamos mostrar.

Ejemplo:

<html>
 <head>
  <title> Pagina principal </title>
 </head>

 <frameset rows="80, *">
  <frame src="pagina1.html" scrolling="no" noresize="noresize" />
  <frame src="pagina2.html" scrolling="yes"  />
 </frameset>

 <noframes>
  <body>   
  </body>
 </noframes>
</html>

Observe que la etiqueta <frameset> de apertura indica con su atributo "rows" cuantos marcos horizontalmente mostrara en la pagina principal.

NOTA: En el atributo "rows" se establece el tamano de los marcos que hay, separados por coma (el simbolo "*" indica todo el espacio disponible).

Insertar marcos horizontalmente

Para insertar marcos horizontalmente se hace uso del atributo "rows". Recuerde que se indica el tamano de los marcos separados por comas.

Ejemplo:

<html>
 <head>
  <title> Pagina principal </title>
 </head>

 <frameset rows="80, *" frameborder="no">
  <frame src="pagina1.html" scrolling="no" noresize="noresize" />
  <frame src="pagina2.html" scrolling="yes"  />
 </frameset>

 <noframes>
  <body>   
  </body>
 </noframes>
</html>

Insertar marcos verticalmente

Para insertar marcos horizontalmente se hace uso del atributo "cols". Recuerde que se indica el tamano de los marcos separados por comas.

Ejemplo:

<html>
 <head>
  <title> Pagina principal </title>
 </head>

 <frameset cols="80, *">
  <frame src="pagina1.html" scrolling="no" noresize="noresize" />
  <frame src="pagina2.html" scrolling="yes"  />
 </frameset>

 <noframes>
  <body>   
  </body>
 </noframes>
</html>

Insertar marcos horizontal y verticalmente

Para insertar marcos tanto horizontal como verticalemente, se utiliza varias veces la etiqueta <frameset>.

<html>
 <head>
  <title> Pagina principal </title>
 </head>
 <frameset rows="50, *" frameborder="yes">


  <frame src="pagina3.html" scrolling="no" noresize="noresize" />  
  
  <frameset cols="200, *" >
   <frame src="pagina1.html" scrolling="no" noresize="noresize" />
   <frame src="pagina2.html" scrolling="yes"  />
  </frameset>


 </frameset> 
 <noframes>
  <body>   
  </body>
 </noframes>
</html>

Recuerde que la etiqueta <frameset> agrupa marcos, es decir, agrupe marcos horizontalmente y otros verticalmente, finalmente combine los grupos de marcos para formar lo que este buscando.

Actividad

Escriba el siguiente codigo en un BLOC DE NOTAS, guardelo como pagina Web y verifique que se muestre correctamente la pagina con marcos.

<html>
 <head>
  <title> Pagina principal </title>
 </head>
 <frameset cols="200, *" frameborder="yes">


  <frame src="titulo.html" scrolling="no" noresize="noresize" />  
  
  <frameset rows="80, *" >
   <frame src="menu.html" scrolling="no" noresize="noresize" />
   <frame src="bienvenido.html" scrolling="yes"  />
  </frameset>


 </frameset> 
 <noframes>
  <body>   
  </body>
 </noframes>
</html>

Recuerde crear primero las paginas titulo.html, menu.html y bienvenido.html para que la pagina principal funcione correctamente.
Publicado por ingenieroMike
0 comentarios

Formularios

Introduccion

HTML es un lenguaje de marcado cuyo propósito principal consiste en estructurar los contenidos de los documentos y páginas web. Sin embargo, HTML también incluye elementos para crear aplicaciones web. El estándar HTML permite crear formularios para que los usuarios interactúen con las aplicaciones web.

Los formularios nos permiten solicitar información a los usuarios para procesarla y almacenarla. Un formulario actúa como un contenedor donde se encuentran sus componentes que permiten la entrada de datos. Toda la información obtenida por un formulario puede ser procesada por un lenguaje de programación como PHP, entregarla a un servidor Web como Apache y almacenarla en una base de datos como MySQL.

Objetivos

1. Conocer como se insertan formularios a las paginas Web.
2. Conocer como insertar cajas de texto.
3. Conocer como insertar cajas de contrasena.
4. Conocer como insertar areas de texto.
5. Conocer como insertar listas desplegables.
6. Conocer como insertar casillas de verificacion.
7. Conocer como insertar botones de seleccion.
8. Conocer como insertar botones de comando.
9. Conocer como insertar botones de reseteo.
10. Conocer como insertar botones de envio.

Insertar formularios

Para implementar los formularios haremos uso de la etiqueta <form>. La etiqueta <form> encierra todos los elementos del formulario (botones, cuadros de texto, listas desplegables, etc).

Ejemplo:

<form method="GET/POST" action="pagina_destino.extension">
     <!--Aqui se colocan los elementos del formulario-->
</form>

La mayoría de formularios utilizan sólo los atributos "action" y "method". El atributo "action" indica la URL de la aplicación del servidor que se encarga de procesar los datos introducidos por los usuarios.

El atributo "method" establece la forma en la que se envian los datos del formulario al servidor. Este atributo hace referencia al método HTTP, por lo que no es algo propio de HTML. Los dos valores que se utilizan en los formularios son GET y POST. De esta forma, casi todos los formularios incluyen el atributo method="get" o el atributo method="post".

Al margen de otras diferencias técnicas, el método POST permite el envío de mucha más información que el método GET. En general, el método GET admite como máximo el envío de unos 500 bytes de información. La otra gran limitación del método GET es que no permite el envío de archivos adjuntos con el formulario. Además, los datos enviados mediante GET se ven en la barra de direcciones del navegador (se añaden al final de la URL de la página), mientras que los datos enviados mediante POST no se pueden ver tan fácilmente.

Si no sabes que método elegir para un formulario, existe una regla general que dice que el método GET se debe utilizar en los formularios que no modifican la información (por ejemplo en un formulario de búsqueda). Por su parte, el método POST se debería utilizar cuando el formulario modifica la información original (insertar, modificar o borrar alguna información).


Caja de texto

Se trata del elemento más utilizado en los formularios. En el caso más sencillo, se muestra un cuadro de texto vacío en el que el usuario puede escribir cualquier texto.

Ejemplo:

<form method="post" action="">
     Nombre: <input type="text" name="" value="" size="" maxlength="">
</form>

El atributo "type" diferencia a cada uno de los diez controles que se pueden crear con la etiqueta <input>. Para las cajas de texto, su valor es "text".

El atributo "name" es el más importante en los campos del formulario. De hecho, si un campo no incluye el atributo "name", sus datos no se envían al servidor. El valor que se indica en el atributo name es el nombre que utiliza la aplicación del servidor para obtener el valor de este campo de formulario.

Cuando el usuario pulsa el botón de envío del formulario, el navegador envía los datos a una aplicación del servidor para que procese la información y genere una respuesta adecuada. En el servidor, la aplicación que procesa los datos debe obtener en primer lugar toda la información introducida por el usuario. Para ello, utiliza el valor del atributo "name" para obtener los datos de cada control del formulario.

Como el valor del atributo "name" se utiliza en aplicaciones programadas, es esencial ponerse de acuerdo con el programador de la aplicación, no se deben utilizar caracteres problemáticos en programación (espacios en blanco, acentos y caracteres como ñ o ç).

El atributo "size" permite establecer el tamaño, en caracteres, con el que se muestra el cuadro de texto. Su uso es imprescindible en muchos formularios, en los que algunos campos como la dirección deben mostrar más caracteres de lo normal (<input size="100" ...) y otros campos como el código postal deben mostrar menos caracteres de lo normal (<input size="5"...). Si no se especifica un tamaño, el navegador muestra el cuadro de texto con un tamaño predeterminado.

El atributo "maxlength" permite establecer el máximo número de caracteres que el usuario puede introducir en un cuadro de texto. Su uso es imprescindible para campos como el código postal, el número de la Seguridad Social y cualquier otro dato con formato predefinido y limitado.

El atributo "readonly" permite que el usuario pueda ver los contenidos del cuadro de texto pero no pueda modificarlos.

El atributo "disabled" deshabilita un cuadro de texto de forma que el usuario no pueda modificarlo y además, el navegador no envía sus datos al servidor.

Caja de password

La única diferencia entre este control y la caja de texto, es que el texto que el usuario escribe en una caja de contraseña no se ve en la pantalla. En su lugar, los navegadores ocultan el texto utilizando asteriscos o círculos, por lo que es ideal para escribir contraseñas y otros datos sensibles.

Ejemplo:

<form method="post" action="">
     Contraseña: <input type="password" name="" value="" size="" maxlength="">
</form>

Cambiando el valor del atributo "type" por "password" se transforma la caja de texto en un cuadro de contraseña. Los demas atributos son iguales a los de la caja de texto y se utilizan de la misma forma.

Area de texto

Las áreas de texto son útiles cuando se debe introducir una gran cantidad de texto, ya que es mucho más cómodo de introducir que en un campo de texto.

Ejemplo:

<form method="post" action="">
     Descripcion:
     <br/>
     <textarea name="" cols="" rows=""></textarea>
</form>

Los atributos más utilizados en las etiquetas <textarea> son los que controlan su anchura y altura. La anchura del área de texto se controla mediante el atributo "cols", que indica las columnas o número de caracteres que se podrán escribir como máximo en cada fila. La altura del área de texto se controla mediante "rows", que indica directamente las filas de texto que serán visibles.

El principal inconveniente de los elementos <textarea> es que el lenguaje HTML no permite limitar el número máximo de caracteres que se pueden introducir. Mientras los elementos <input type="text"> disponen del atributo "maxlength", las áreas de texto no disponen de un atributo equivalente, por lo que sólo es posible limitar el número de caracteres mediante su programación con JavaScript.

Lista desplegable

Las listas desplegables son un conjunto de opciones de las cuales se puede seleccionar una o varias a la vez. Para ello usaremos las etiquetas <select> y <option>.

Ejemplo:

<form method="post" action="">
     <select name="">
          <option value="S" selected="selected"> SI </option>
          <option value="N"> NO </option>
     </select>
</form>

Donde:

select - Es la que define que es una lista.
option - Es la que indica las opiciones de la lista.

El atributo "name" es el nombre que utiliza la aplicación del servidor para obtener el valor de este campo del formulario.

El atributo "size" indica el número de opciones visibles. Si le asignamos 1, la selección se presentará como un menú desplegable. Si le asignamos un valor mayor se presentará como una lista con barra de desplazamiento.

El atributo "multiple" indica si se pueden realizar varias opciones a la vez.

El atributo "value" de cada opción es obligatorio, ya que es el dato que se envía al servidor cuando el usuario envía el formulario.

Para seleccionar por defecto una opción al mostrar la lista, se añade el atributo "selected" a la opción deseada.

Casillas de verificacion

Los checkbox o "casillas de verificación" son controles de formulario que permiten al usuario seleccionar y deseleccionar una o varias opciones individualmente. Aunque en ocasiones se muestran varios checkbox juntos, cada uno de ellos es completamente independiente del resto. Por este motivo, se utilizan cuando el usuario puede activar y desactivar varias opciones relacionadas pero no excluyentes.

Ejemplo:

<form method="post" action="">
     Temas de interes: <br/>
     <input type="checkbox" name="deportes" /> Desportes <br/>
     <input type="checkbox" name="musica" checked="checked" /> Musica <br/>
     <input type="checkbox" name="teatro" /> Teatro <br/>
</form>

El valor del atributo "type" para estos controles de formulario es "checkbox". Como se muestra en el ejemplo anterior, el texto que se encuentra al lado de cada checkbox no se puede establecer mediante ningún atributo, por lo que es necesario añadirlo manualmente fuera del control del formulario. Si no se añade un texto al lado de la etiqueta <input /> del checkbox, el usuario sólo ve un pequeño cuadrado sin ninguna información relativa a la finalidad de ese checkbox.

Si se quiere mostrar un checkbox seleccionado por defecto, se utiliza el atributo "checked". En cualquier otro caso, el checkbox permanece sin seleccionar.

Radio botones

Estos controles son similares a los controles de tipo checkbox, pero presentan una diferencia muy importante. Se utilizan cuando el usuario solamente puede escoger una opción entre las distintas opciones relacionadas que se le presentan. Cada vez que se selecciona una opción, automáticamente se deselecciona la opción que estaba seleccionaba.

Ejemplo:

<form method="post" action="">
     Sexo: <br/>
     <input type="radio" name="sexo" value="hombre" checked="checked"/> Hombre
     <input type="radio" name="sexo" value="mujer"/> Mujer
</form>

El valor del atributo "type" para estos controles de formulario es "radio".

El atributo "name" se emplea para indicar que los controles están relacionados. Por lo tanto, cuando varios controles tienen el mismo nombre, el navegador sabe que están relacionados y puede deseleccionar una opción del grupo cuando se seleccione otra opción.

El atributo "value" indica el valor que almacena el control que esta seleccionado. Observe que el control esta relacionado con varios por su nombre, esto quiere decir que los controles seran reconocidos como uno solo por el servidor, la diferencia sera el valor que almacenan los controles del grupo y el que recibira el servidor sera el control seleccionado.

Si se quiere mostrar un radio boton seleccionado por defecto, se utiliza el atributo "checked". En cualquier otro caso, el radio boton permanece sin seleccionar.

Boton de comando

Los botones de comando permiten que el usuario al hacer clic en el boton, se desencadene cierta acción como pueden ser eventos, procesos o validaciones de datos.

Ejemplo:

<form method="post" action="">
     Nombre:
     <input type="text" name="nombre" value="" size="30" maxlength="20">
     <input type="button" value="Imprimir" onclick="">
</form>

El valor del atributo "type" para este control de formulario es "button".

El atributo "value" es el texto del boton que sera visible para el usuario en pantalla.

Si pruebas a pulsar un botón de este tipo, verás que el navegador no hace nada: no envía los datos al servidor y no borra los datos introducidos. Este tipo de botones sólo son útiles si se utilizan junto con el lenguaje de programación JavaScript. Si la página incluye código JavaScript, los botones de este tipo se pueden programar para que realicen cualquier tarea compleja cuando se pulsa sobre ellos. Para ejecutar estas tareas al hacer clic en el boton haremos uso del atributo "onclick".

Boton de reseteo

Se trata de un botón especial que borra todos los datos introducidos por el usuario y devuelve el formulario a su estado original.

Ejemplo:

<form method="post" action="">
     Nombre:
     <input type="text" name="nombre" value="Juan Perez" size="30" maxlength="20">
     <input type="reset" value="Resetear">
</form>

El valor del atributo "type" para este control de formulario es "reset". Cuando el usuario pulsa este botón, el navegador borra toda la información introducida y muestra el formulario en su estado original. Si el formulario no contenía originalmente ningún valor, el botón de reset lo vuelve a mostrar vacío. si el formulario contenía información, el botón reset vuelve a mostrar la misma información original.

El atributo "value" es el texto del boton que sera visible para el usuario en pantalla.

Boton de envio

Los formularios disponen de un botón para enviar al servidor los datos introducidos por el usuario.

Ejemplo:

<form method="post" action="">
     Nombre:
     <input type="text" name="nombre" value="" size="30" maxlength="20">
     <input type="submit" value="Enviar">
</form>

El valor del atributo "type" para este control de formulario es "submit". El navegador se encarga de enviar automáticamente los datos cuando el usuario pincha sobre este tipo de botón.

El atributo "value" es el texto del boton que sera visible para el usuario en pantalla.

Para recibir los datos en el servidor, es necesario que en el atributo "action" del formulario, se indique la pagina que manipulara los datos.

Actividad

Escriba el siguiente codigo en un BLOC DE NOTAS, guardelo como pagina Web y verifique que se muestre correctamente el formulario:

<html>
     <head>
           <title> Uso de Formularios </title>
     </head>
     <body>

<form method="post" action="">
    
     Nombre: <br/>
     <input type="text" name="control1" size="40" maxlength="30" /> <br/>
    
     Apellidos: <br/>
     <input type="text" name="control2" size="40" maxlength="40" /> <br/>
    
     Sexo:
     <input type="radio" name="control3" value="hombre" checked="checked"> Hombre
     <input type="radio" name="control3" value="mujer"> Mujer <br/><br/>

     Usuario: <br/>
     <input type="text" name="control4" size="40" maxlength="40" /> <br/>

     Contraseña: <br/>
     <input type="password" name="control5" size="40" maxlength="20" /> <br/></br>
     <input type="reset" value="Resetear">
     <input type="submit" value="Guardar">

</form>
   
     </body>
</html>

Vea que el atributo "action" de la etiqueta <form> no contiene ningun valor, ya que hasta esta etapa no hemos usado algun servidor Web como APACHE y un lenguaje de programacion como PHP.

Esto quiere decir, que al presionar el boton ENVIAR no pasara nada y seguiremos observando la misma pagina HTML.
Publicado por ingenieroMike
0 comentarios

Tablas

Introduccion

Desde sus primeras versiones, HTML incluyó el soporte para crear tablas de datos en las páginas web. Además de ser sencillo, el modelo definido por HTML es muy flexible y bastante completo.

Las tablas en HTML utilizan los mismos conceptos de filas, columnas, cabeceras y títulos que los que se utilizan en cualquier otro entorno de publicación de documentos.

Las tablas de HTML puede contener elementos simples, agrupaciones de filas y de columnas, cabeceras y pies de tabla, subdivisiones, cabeceras múltiples y otros elementos complejos.

Objetivos

1. Conocer como insertar tablas en las paginas Web.
2. Conocer como cambiar el tamano de las tablas.
3. Conocer como se alinean las tablas.
4. Conocer como se fusionan filas y columnas.
5. Conocer como se alinea el contenido de las celdas de las tablas.
6. Conocer como establecer el espacio entre las celdas.
7. Conocer como se anidan las tablas.

Insertar tablas

Las tablas más sencillas de HTML se definen con tres etiquetas:

<table> 
<tr> 
<td>

La etiqueta <table> encierra todas las filas y columnas de la tabla.

Las etiquetas <tr> (del inglés "table row") definen cada fila de la tabla y encierran todas las columnas.

La etiqueta <td> (del inglés "table data cell") define cada una de las columnas de las filas, aunque realmente HTML no define columnas sino celdas de datos.

Al definir una tabla, se debe pensar en primer lugar en las filas que la forman y a continuación en las columnas. El motivo es que HTML procesa primero las filas y por eso las etiquetas <tr> aparecen antes que las etiquetas <td>.

Ejemplo:

<table border="1">
     <tr>
          <td> Mi primera tabla </td>
     </tr>
</table>

Cabe mencionar que para mostrar las dimensiones y estructura de las tablas, hacemos uso de su atributo "border".

Cambiar tamano de las tablas

Como se mostro con las imagenes, las dimensiones de la tabla tambien pueden ser manipuladas con los mismos atributos:

width - Para manipilar el ancho
height - Para manipular lo alto

Estas dimensiones pueden ser de tamaño fijo o porcentual.

Ejemplo con dimensiones fijas:

<table border="1" width="200" height="70">
     <tr>
          <td>
               Alto y ancho fijo
         </td>
     </tr>
</table>

Ejemplo con dimensiones porcentuales:

<table border="1" width="100%" height="50%">
     <tr>
          <td>
               Alto y ancho porcentual
         </td>
     </tr>
</table>

Alineacion de las tablas

El atributo "align" nos permite alinear la tabla en tres estados:

left - a la izquierda
center - al centro
right - a la derecha

Ejemplo tabla centrada:

<table border="1" align="center">
     <tr>
          <td>
               Tabla centrada
          </td>
     </tr>
</table>

Ejemplo tabla alineada a la derecha:

<table border="1" align="right">
     <tr>
          <td>
               Tabla alineada a la derecha
          </td>
     </tr>
</table>


Fusionar filas y columnas

Las tablas complejas suelen disponer de una estructura irregular que junta varias columnas para formar una columna ancha o une varias filas para formar una fila más alta que las demás.

Para fusionar las filas se utiliza el atributo "rowspan" y para fusionar las columnas se utiliza el atributo "colspan".

Ejemplo fusion de filas:

<table border="1">
     <tr>
          <td> A </td>
          <td rowspan="2"> B </td>
     </tr>
     <tr>
          <td> C </td>
     </tr>
</table>

Ejemplo fusion de columnas:

<table border="1">
     <tr>
          <td colspan="2"> A </td>
     </tr>
     <tr>
          <td> B </td>
          <td> C </td>
     </tr>
</table>

Alinear el contenido de las celdas

Las celdas es el espacio rectangular que se forma en la intersección de una fila y una columna. En este espacio es donde se coloca el contenido que se desea mostrar dentro de la tabla. El contenido se puede ubicar en tres sentidos horizontalmente con la ayuda del atributo "align":

left - a la izquierda
center - al centro
right - a la derecha

También el contenido se puede ubicar en tres sentidos verticalmente con la ayuda del atributo "valign":

top - superior
middle - al centro
bottom - inferior

Ejemplo de tabla con contenido alineado a la izquierda:

<table border="1" width="250" height="150">
     <tr>
          <td align="right">
               Contenido
          </td>
     </tr>
</table>

Ejemplo de tabla con contenido alineado en el inferior:

<table border="1" width="250" height="150">
     <tr>
          <td valign="bottom">
               Contenido
          </td>
     </tr>
</table>

Espacio entre celdas

Los atributos "cellpading" y "cellspacing" nos ayudaran a dar a nuestra tabla un aspecto más estético:

cellpading - es la distancia que hay entre el contenido y los bordes de la celda.
cellspacing - es la distancia que hay entre los bordes de las celdas.

Ejemplo:

<table border="1" cellpadding="10" cellspacing="10">
     <tr>
          <td>
               Celda 1
          </td>
          <td>
               Celda 2
          </td>
     </tr>
</table>

Tablas anidadas

Muy útil también es el uso de tablas anidadas. De la misma forma que podíamos incluir listas dentro de otras listas, las tablas pueden ser incluidas dentro de otras.

Ejemplo:

<table border="10" width="200" height="120" align="center">
  <tr>
    <td>
      Tabla principal
    </td>
  </tr>
  <tr>
    <td>

      <table border="1" align="center">
        <tr>
          <td>
            Tabla anidada
          </td>
        </tr>
      </table>

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


Actividad

Escriba el siguiente codigo en un BLOC DE NOTAS, guardelo como pagina Web y compruebe lo que ha aprendido:

<html>
     <head>
           <title> Uso de Tablas </title>
     </head>
     <body>

<table border="3" width="200" cellpadding="10" cellspacing="0" align="center">
 <tr>
  <td colspan="2" align="center">
   <b> Lista de cursos </b>
  </td>
 </tr>
 <tr>
  <td> 1 </td>
  <td> <font color="blue"> HTML </font> </td>  
 </tr>
 <tr>
  <td> 2 </td>
  <td> JAVASCRIPT </td>  
 </tr>
 <tr>
  <td> 3 </td>
  <td> HOJAS DE ESTILO </td>  
 </tr>
</table>
   
     </body>
</html>
Publicado por ingenieroMike
0 comentarios

Enlaces

Introduccion

El lenguaje de marcado HTML se definió teniendo en cuenta algunas de las características que existían en ese momento para la publicación digital de contenidos. Entre los conceptos utilizados en su creación, se encuentra el mecanismo de "hipertexto".

La incorporación del hipertexto fue una de las claves del éxito del lenguaje HTML, ya que permitió crear documentos interactivos que proporcionan información adicional cuando se solicita. El elemento principal del hipertexto es el "hiperenlace", también llamado "enlace web" o simplemente "enlace".

Los enlaces se utilizan para establecer relaciones entre dos recursos. Aunque la mayoría de enlaces relacionan páginas web, también es posible enlazar otros recursos como imágenes, documentos y archivos.

Una característica que no se suele tener en cuenta en los enlaces es que están formados por dos extremos y un sentido. En otras palabras, el enlace comienza en un recurso y apunta hacia otro recurso. Cada uno de los dos extremos se llaman "anchors" en inglés, que se puede traducir literalmente como "anclas".

Objetivos

1. Conocer como insertar enlaces hacia otras paginas en nuestras paginas Web.
2. Conocer como insertar enlaces hacia documentos e imagenes.
3. Conocer como insertar enlaces para secciones en la misma pagina.

Insertar enlaces

Los enlaces en HTML se crean mediante la etiqueta <a> (su nombre viene del inglés "anchor", literalmente traducido como "ancla").

Ejemplo:

<h1> Enlace a Google </h1>
<a href="'>http://www.google.com"> Pagina principal de Google</a>

El atributo más importante de la etiqueta <a> es "href", que se utiliza para indicar la URL a la que apunta el enlace. Cuando el usuario pincha sobre un enlace, el navegador se dirige a la URL del recurso indicado mediante "href". Las URL de los enlaces pueden ser absolutas, relativas, internas y externas.

De la misma forma, los enlaces pueden apuntar directamente a documentos PDF, Word, etc.

Ejemplos:

<a href="http://www.ejemplo.com/informe.pdf">
Descargar informe completo [PDF]
</a>

<a href="http://www.ejemplo.com/informe.doc">
Descargar informe completo [DOC]
</a>

Insertar enlaces a secciones

El otro atributo básico de la etiqueta <a> es "name", que permite definir enlaces dentro de una misma página Web. Si una página es muy larga, puede ser útil mostrar enlaces de tipo "Saltar hasta la segunda sección", "Volver al principio de la página", etc.

Este tipo de enlaces son especiales, ya que la URL de la página siempre es la misma para todas las secciones y por tanto, debe añadirse otra parte a las URL para identificar cada sección.

Ejemplo:

<a name="inicio"></a>
<p>
Contenido del parrafo.
</p>
<a href="#inicio">Volver al inicio de la página</a>

Los enlaces directos a secciones también funcionan con el atributo "id" de cualquier elemento. El siguiente ejemplo es equivalente al ejemplo anterior:

<h1 id="inicio">Título de la página</h1>
<p>
Contenido del parrafo.
</p>
<a href="#inicio">Volver al inicio de la página</a>

El nombre de la sección que se indica después del símbolo # puede utilizar el valor de los atributos "id" de cualquier elemento. De hecho, se recomienda utilizar los atributos "id" de los elementos ya existentes en la página en vez de crear "enlaces vacíos" como : <a name="nombre_seccion"></a>.

Actividad

Crea una pagina Web con este codigo y comprueba que funcionan los enlaces absolutos y relativos.

<html>
<head>
<title> Uso de Enlaces Absolutos y Relativos </title>
</head>
<body>

<h1> Enlace a Google (enlace absoluto) </h1>
<a href="http://www.google.com"> Ir a Google </a>

<h1> Enlace a Yahoo (enlace absoluto) </h1>
<a href="http://www.yahoo.com.mx"> Ir a Yahoo </a>

<h1> Enlace a Hi5 (enlace absoluto) </h1>
<a href="http://www.hi5.com"> Ir a Hi5 </a>

<h1> Enlace a otra pagina (enlace relativo) </h1>
<a href="mi_segunda_pagina.html"> Ir a mi segunda pagina </a>

</body>
</html>

Nota: Crea una segunda pagina Web con el nombre de "mi_segunda_pagina.html", para comprobar que el cuarto enlace funcione correctamente.
Publicado por ingenieroMike
0 comentarios

Imagenes

Introduccion

Las imágenes son uno de los elementos más importantes de las páginas web. De hecho, prácticamente todas las páginas web contienen alguna imagen y la mayoría incluyen decenas de imágenes.

Objetivos

1. Conocer como insertar imagenes a nuestras paginas Web.
2. Conocer como cambiar el tamano de las imagenes.
3. Conocer como aplicar borde a las imagenes.

Insertar imagen

Para insertar una imagen a nuestra pagina Web, hacemos uso de la etiqueta <img> y su atributo "src". Donde escribiremos el nombre de la imagen y su extension.

Ejemplo:

<img src="perrito.jpg"/>

HTML no impone ninguna restricción sobre el formato gráfico que se puede utilizar en las imágenes, por lo que en principio la etiqueta <img> puede incluir cualquier formato gráfico existente. Sin embargo, si la imagen utiliza un formato poco habitual, todos o algunos navegadores no serán capaces de mostrar esa imagen.

La recomendación es utilizar uno de los tres siguientes formatos gráficos que entienden todos los navegadores modernos: GIF, JPG y PNG. El formato PNG presenta el inconveniente de que los navegadores obsoletos como Internet Explorer 6 no muestran correctamente las imágenes con transparencias de 24 bits.

Cambiar tamano
En ocasiones las imagenes son muy grandes y se desean mostrar mas pequeñas, para esto haremos uso de sus atributos "width" (para manipular el ancho) y "height" (para manipular el alto).

Ejemplos:

<h1> Original </h1>
<img src="perrito.jpg"/>

<h1> Reducido </h1>
<img src="perrito.jpg" width="100" height="150"/>

Si el valor del atributo "width" o "height" se indica mediante un número entero, el navegador supone que hace referencia a la unidad de medida píxel. Por tanto, en este ejemplo, la segunda imagen se muestra con una anchura de 100 píxel y una altura de 150 píxel.

Colocar borde

El borde es una linea alrededor de la imagen. Si deseamos mostrar esta linea haremos uso del atributo "border".

Ejemplo:

<img src="perrito.jpg" border="1"/>

Entre mas grande sea el valor del atributo, mas grueso sera el borde de la imagen.

Actividad

Crea una pagina Web con el siguiente codigo y comprueba que las imagenes con sus atributos se muestran correctamente.

<html>
<head>
<title> Uso de Imagenes </title>
</head>
<body>

<h1>Imagen</h1>
<img src="gatito.jpg"/>

<h1>Imagen Modificada de Tamaño</h1>
<img src="gatito.jpg" width="150" height="120"/>

<h1>Imagen con Borde</h1>
<img src="gatito.jpg" border="3"/>

</body>
</html>
Publicado por ingenieroMike
2 comentarios

Cambiar el tipo de letra, el tamaño y color al texto

Introduccion

Ademas de los estilos del texto, HTML ofrece la posibilidad de cambiar el color, tamano y tipo de letra del texto.

Objetivos

1. Conocer como cambiar el color del texto.
2. Conocer como cambiar el tamano del texto.
3. Conocer como cambiar el tipo de letra del texto.

Color

HTML ofrece la posibilidad de cambiar de color el texto para mejorar la presentacion de nuestra informacion. Para cambiar el color del texto haremos uso del atributo -color- de la etiqueta <font>.

Ejemplos con el nombre del color en Ingles:

<font color="blue"> Texto de color azul. </font>
<font color="red"> Texto de color rojo. </font>
<font color="orange"> Texto de color naranja. </font>


Donde el color se cambia al escribir el nombre del color en Ingles, o con el codigo hexadecimal de los colores.


Ejemplos con el codigo hexadecimal del color:

<font color="0000FF"> Texto de color azul. </font>
<font color="FF0000"> Texto de color rojo. </font>
<font color="FF8000"> Texto de color naranja. </font>


Tamano


Tambien es posible cambiar el tamaño del texto, con el atributo -size- de la etiqueta <font>.


Ejemplos:

Texto con el tamaño por default.


<font size="+1">
Texto aumentado.
</font>


<font size="-1">
Texto disminuido.
</font>


Para los casos donde se aumenta o disminuye, entre mas alto es el valor positivo o negativo, mas se reduce o aumenta el texto.


Tipo de letra


Otro atributo que nos permite usar la etiqueta <font>, es el atributo -face-, que nos permite cambiar la fuente (tipo de letra) de nuestro texto.


Ejemplos:

<font face="Arial, Helvetica, sans-serif">
Texto con fuente Arial.
</font>


<font face="Times New Roman, Times, serif">
Texto con fuente Times New Roman.
</font>


<font face="Courier New, Courier, monospace">
Texto con fuente Courier New.
</font>


<font face="Georgia, Times New Roman, Times, serif">
Texto con fuente Georgia.
</font>


<font face="Verdana, Arial, Helvetica, sans-serif">
Texto con fuente Verdana.
</font>


<font face="Geneva, Arial, Helvetica, sans-serif">
Texto con fuente Geneva.
</font>


Donde la primer fuente que reconocera HTML sera la primera de la izquierda, y en caso que no la reconozca o no encuentre la fuente, usara la siguiente. Las fuentes mencionadas en los ejemplos, son por lo general las mas comunes.


Actividad


Crea una pagina Web con el siguiente codigo, e identifica como se aplica el tipo de letra, el tamano y el color al texto.


<html>
<head>
<title> Uso de los Atributos de la Etiqueta FONT </title>
</head>
<body>


<p>
<font face="Arial, Helvetica, sans-serif" color="blue">
El color <b>azul</b> es una de las seis sensaciones cromáticas básicas de la visión humana normal.
</font>
</p>


<p>
<font face="Times New Roman, Times, serif" size="-1" color="orange">
Su opuesto es el <b>naranja</b> en las artes plásticas y es complementario al amarillo en la luz, ya que para formar amarillo se necesita mezclar rojo y verde al 100% de intensidad, y nada de azul.
</font>
</p>


<p>
<font face="Courier New, Courier, monospace" color="009900">
El <b>verde</b> es un color frecuente en la naturaleza. Las plantas son verdes porque contienen clorofila. Mezclando pigmentos de colores azul y amarillo se crea dicho color.
</font>
</p>


</body>
</html>




Observe en los ejemplos que al colocar el color, se utilita tanto el nombre del color en Ingles asi como el codigo hexadecimal.




Resultado
Publicado por ingenieroMike
0 comentarios

Estilos del texto

Introduccion

Una vez estructurado el texto en párrafos, encabezados y listas, el siguiente paso es aplicar los diferentes estilos que componen el texto.

Objetivos

1. Conocer los diferentes estilos que se le puede aplicar al texto de nuestras paginas Web.

Descripcion

Las etiquetas de estilo afectan a palabras o carácteres dentro de HTML, modificando el aspecto del texto para que sea diferente del texto que lo rodea.

Ejemplos:


<b> Texto en negrita </b>
<i> Texto en cursiva </i>
<u> Texto subrayado </u>
<sup> Texto en superindice </sup>
<sub> Texto en subindice </sub>


Actividad

Crea una pagina Web con el siguiente codigo y comprueba los diferentes estilos que se le aplico al texto de nuestra pagina.


<html>
<head>
<title> Texto con Estilo </title>
</head>
<body>

<h1> El Artico ha perdido el 14% de su hielo marino </h1>
<b>WASHINGTON.-</b> El hielo perenne del Artico se redulo en un 14% durante el ultimo año, al perder <u>720.000 kilometros cuadrados</u>.
<p>
<b>Son Nghiem</b>, investigador del JPL ha declarado que:
</p>
<i>
"Los cambios registrados en el hielo artico son rapidos y espectaculares."
</i>


</body>
</html>
 

Resultado



Observe como se aplicaron los estilos en el texto.



Publicado por ingenieroMike
0 comentarios
Suscribirse a: Entradas (Atom)