martes, 11 de junio de 2013


CÓDIGO PARA INSERTAR UNA IMAGEN EN HTML

Para insertar una imagen, se coloca el siguiente 
<img src="ruta/imagen.gif" width="XXpx" height="YYpx" alt="descripcion de la imagen">
Como ves, este es uno de los pocos casos en los que no hay etiqueta de cierre, es decir, no se pone </img>. Recuérdalo, oki? Las imágenes nunca tienen etiqueta de cierre. A lo sumo se indica el cierre en la misma línea colocando una contrabarra al final, así: ..... alt="descripcion de la imagen" /> 
 

APRENDE A CREAR TUS PROPIAS TABLAS DE HTML~~



Estructura de una tabla
Las tablas estan formadas por filas, columnas y celdas. Cada espacio horizontal continuado es una fila y cada espacio vertical continuado es una columna, definiéndose una celda como el espacio formado por la intersección de una fila y una columna.
columna 1columna 2columna 3
fila 1
celda(1,1)celda(1,2)celda(1,2)
celda(2,1)celda(2,2)celda(2,3)
celda(3,1)celda(3,2)celda(3,3)
fila 2
fila 3
Lo primero que tenemos que hacer cuando queremos introducir una tabla es decirle al navegador dónde empieza y dónde acaba esta; esto se consigue mediante la etiqueta de inicio <TABLE> y su correspondiente de cierre </TABLE>.
Seguidamente debemos decirle cuantas filas vamos a tener en nuestra tabla, cosa que hacemos con las etiqueta de inicio de fila <TR>> y su correspondiente de cierre de fila</TR>, por lo que deberenos insertar una pareja de etiquetas por cada fila que queramos que tenga la tabla.
Por último, dentro de cada fila deberemos indicar cuantas celdas va a haber, que inicialmente deben corresponderse con el número de columnas que deseemos tenga la tabla. Esto se consigue mediante las parejas de etiquetas <TD> y </TD>.
De esta forma, y siguiendo con nuestra tabla inicial deEjemplo, el esquema de etiquetas sería el siguiente:
<TABLE>
<TR>
<TD>...</TD><TD>...</TD><TD>...</TD>
<TD>...</TD><TD>...</TD><TD>...</TD>
<TD>...</TD><TD>...</TD><TD>...</TD>
</TR>
<TR></TR>
<TR></TR>
</TABLE>
Este es el esquema general de toda tabla simple, que traducido a código HTML quedaría de la forma:

<TABLE>
  <TR>
    <TD> celda(1,1) </TD>
    <TD> celda(1,2) </TD>
    <TD> celda(1,3) </TD>
  </TR>
  <TR>
    <TD> celda(2,1) </TD>
    <TD> celda(2,2) </TD>
    <TD> celda(2,3) </TD>
  </TR>
  <TR>
    <TD> celda(3,1) </TD>
    <TD> celda(3,2) </TD>
    <TD> celda(3,3) </TD>
  </TR>
</TABLE>
La visualización de una tabla se genera automaticamente a partir de las filas y las columnas definidas. Sin embargo para un navegador no es facil interpretar a tiempo como debe aparecer la tabla. Primero tiene que leer la tabla completa antes de poder visualizar alguna cosa. En caso de tablas muy grandes eso puede conducir a que en la pantalla aparecen espacios vacios desagradables mientras que la pagina se carga. HTML 4.0 ofrece una nueva sintaxis para comunicarle al navegador al principio de la tabla cuantas columnas tiene. De esta manera el navegador puede cargar la tabla mucho mas rapido, o sea que una parte de la tabla es visualizada antes de que la totalidad de la tabla haya sido leída. Esto se debe implementar mediante las etiquetas <COLGROUP>...</COLGROUP> y sus hijas <COLS>. No obstante, estas etiquetas, que veremos mas adelante, sólo son compatibles con Internet Explorer, cosa que las hace desaconsejables para nuestras paginas, pués debemos siempre crear paginas compatibles con todos los navegadores de cuarta generación y todas las resoluciones habituales.


¿Cómo usar los códigos de colores HTML?

Con los Códigos de colores HTML puede establecer el color de fondo del sitio web, el color del texto, de las celdas en las tablas y mucho más.
Usar los códigos de colores HTML para el color de fondo del sitio web:
<body style="background:#80BFFF">

Usar los códigos de colores HTML para configurar el color de la fuente/texto:
<span style="color:#80BFFF">

Usar los códigos de colores HTML para el color de fondo de las tablas:
<table style="background:#80BFFF">

Usar los códigos de colores HTML para los colores de los enlaces:
<a style="color:#80BFFF">

Teoría sobre los códigos de colores HTML

Seguramente se está preguntando: « ¿Tiene algún significado esta extraña combinación de letras y números?» Pues la respuesta es «Sí» y así es como funciona:)

Formato de los códigos HTML: 
Cada código HTML comprende el símbolo «#» y 6 letras o números. Estos números se expresan en el sistema de numeración hexadecimal. Por ejemplo «FF» en hexadecimal representa el número 255 en Decimal.

Significado de los símbolos: 
Significado de los símbolos: Los dos primeros símbolos del código de color HTML representan la intensidad del color rojo. 00 es el menos intenso y FF es el más intenso. El tercer y el cuarto número representan la intensidad del verde y el quinto y el sexto representan la intensidad delazul. Así, con esta combinación de la intensidad del rojo, verde y azul podemos mezclar cualquier color que deseemos de corazón;)

Ejemplos:
#FF0000 - Con este código HTML le decimos al navegador que muestre la máxima cantidad de rojo y nada de verde ni de azul. El resultado es evidentemente el color rojo puro:     

#00FF00 - Este código HTML muestra solo el verde y nada de rojo ni de azul. El resultado es:     

#0000FF - Este código HTML muestra solo el azul y nada de rojo ni de verde. El resultado es:     

#FFFF00 - Con la combinación de color rojo y verde obtenemos el amarillo:     

#CCEEFF - Cogemos un poco de rojo, un poco más de verde y el máximo de azul para obtener el color del cielo:      





Cómo hacer una página web en HTML en bloc de notas


Si no sabes cómo crear una página web en HTML, te sorprenderá saber que puedes hacerlo con el bloc de notas de tu PC.


Por si no lo sabías, todas las páginas web están creadas a partir del lenguaje HTML. Estas páginas en realidad son archivos .htm o .html de un bloc de notas. El resultado que tú ves en Internet es la “traducción” del navegador para que tú visualices el resultado final en tu sitio web.
Imagen de Cómo hacer una página web en HTML en bloc de notas

Por si no lo sabías, todas las páginas web están creadas a partir del lenguaje HTML. Estas páginas en realidad son archivos .htm o .html de un bloc de notas. El resultado que tú ves en Internet es la “traducción” del navegador para que tú visualices el resultado final.

Hoy te enseñaremos los pasos para que sepas cómo hacer una página web desde cero en HTML con un bloc de notas, que puede ser cualquier editor sencillo de texto, pero en este caso utilizaremos el de Windows.

Lenguaje HTML

Se compone de etiquetas de inicio < > y de fin </ >, y dentro de ellas se escribe el “significado” de la misma.

Por ejemplo: <HEAD> Mi página web en html </HEAD>


Estructura de la página web en HTML

La plantilla base de las webs en HTML es más o menos así:

<HTML>
<HEAD>
</HEAD>

<BODY>
</BODY>
</HTML>

Luego tienes que introducir el contenido deseado: la cabecera (el título) y el cuerpo de lapágina web dentro de las etiquetas.


El Texto

Para modificar las propiedades del texto deberemos utilizar etiquetas concretas para lo que deseemos estructurar:

<P>: Salto de párrafo. No tiene etiqueta de final.
<BR>: Salto de línea. No tiene etiqueta de final.
<BLOCKQUOTE>: Sirve para justificar el texto. No tiene etiqueta de final.

Y así con muchas más.


Añadir Imágenes

Si quieres poner una imagen de Internet a tu sitio web, el código HTML es: <img src=”URL”>. La etiqueta de cierre, </img>, es opcional.


Guardar tu archivo html

Guarda el documento con un nombre y la extensión .html eligiendo “todos los archivos” o “txt” en Tipo de Archivo.

Ahora que ya sabes cómo crear una buena página web con html creando un documento con un bloc de notas ¡ábrela con tu navegador preferido!