miércoles, 7 de marzo de 2012


Html
Definicion: Siglas de HyperText Markup Language («lenguaje de marcado de hipertexto»), es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>). HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo JavaScript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.

Tablas.-
 Como realizar una tabla Simple
Una tabla HTML puede ser considerada, de manera simple, como un grupo de filas donde cada una de ellas contiene un grupo de celdas (y no alrevés). Las tablas, como toda estructura en los documentos HTML, son definidas usando elementos. Entonces, una tabla simple puede ser insertada en un documento HTML usando tres elementos: el elemento HTML table (estructura contenedora principal), el elemento HTML tr (contenedor de fila) y el elemento HTML td (celda). Veamos un ejemplo:
Código
<table>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>

El título de una tabla

El título de una tabla, definido mediante el elemento HTML caption, debería describir breve y precisamente el contenido y la naturaleza de la tabla y es habitualmente representado en algún lugar cercano a la tabla (su posición puede ser establecida usando hojas de estilo). Recuerda que el elemento HTML caption solo está permitido si va justo después del tag de apertura de la tabla.
Código
<table>
<caption>Título de la tabla</caption>
<tr>
<td>Contenido 1</td>
<td>Contenido 2</td>
<td>Contenido 3</td>
</tr>
<tr>
<td>Contenido 4</td>
<td>Contenido 5</td>
<td>Contenido 6</td>
</tr>
</table>
 

Códigos de color en HTML

Los colores en HTML son construidos utilizando una combinación de tres colores básicos: rojo, verde y azul. Cada uno de estos colores puede tomar una valor desde 0 a 255 y son representados en notación hexadecimal (00 a FF). Dicho esto, un color está compuesto por seis caracteres donde los dos primeros representan al color rojo, los dos segundos al verde y los dos terceros al azul. Por ejemplo, el color rojo está formado en HTML con "FF" para el rojo (los dos primeros caracteres) y "00" para el resto: "FF0000".
Al mezclar estos valores se mezclarán los colores resultantes, de modo que puedes crear un amarillo al mezclar el rojo y el verde (por ejemplo, "FFFF00"), violeta al mezclar rojo y azul (por ejemplo, "FF00FF") ó cyan al mezclar verde y azul (por ejemplo, "00FFFF"). Esto funciona exactamente como la paleta de un pintor.
El tono del color puede también ser cambiado incrementando (por ejemplo, violeta claro "FF66FF") ó disminuyendo (por ejemplo, violaeta oscuro "AA00AA") los tres valores proporcionalmente.
Nota: por la naturaleza de esta página, las personas ciegas pueden encontrar al siguiente mapa de clores escasamente útil.

Mapa de colores

Este mapa de colores muestra un amplio juego de colores HTML que pueden ser usados en documentos HTML. El propósito de este gráfico es simplemente mostrar algunos color disponibles. La funcionalidad extra se encuentra únicamente a disposición en los navegadores que soporta JavaScript, y permite a los usuarios previsualizar una selección de colores en un documento de ejemplo.



Imagen en html

El uso de imágenes es uno de los factores que ha popularizado tanto World Wide Web. Incluir imágenes en una presentación web es muy sencillo, solo debe de tener en cuenta que las imágenes tienen que tener los formatos GIF, JPEG o PNG. Las imágenes en línea, se especifican a partir de la tag <img> que no tiene una tag correspondiente de cierre pero que puede acompañarse de los siguientes atributos:
  • src= Este atributo es obligatorio e indica el nombre del archivo de imagen (entre comillas) o la URL que se va a representar.

  • Align= Permite controlar la alineación de una imagen con respecto a una línea de texto adyacente o a otras imágenes en esa línea. Los tres valores posibles son los ya conocidos left, right, top, middle y bottom.

  • Alt= Es la alternativa que se estableció cuando todavía existían visualizadores de solo texto. Entre comillas podremos escribir un texto que suplantara a esta imagen si no se carga o mientras se carga o cuando, visualizando ya la imagen, pasamos el ratón por encima.

  • WIDTH= Este atributo es opcional pero es recomendable ponerlo para ayudar al navegador a representar la imagen, significa el ancho de la imagen que vamos a representar.

  • HEIGHT=Al igual que el atributo WIDTH, es opcional y recomendable ponerlo, este significa el alto de la imagen.

  • BORDER= Con BORDER especificamos el ancho de un borde que rodea la imagen.
<IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=0 ALT="Un bebé">

Un bebé



<HTML>
<HEAD>
<TITLE>Ejemplo 12</TITLE>
</HEAD>
<BODY>

<H1>Im&aacute;genes</H1>


   <IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=0 ALT="Un beb&eacute;" ALIGN="RIGHT">
   <IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=3 ALT="Un beb&eacute;" ALIGN="LEFT">
Un texto cualquiera.
</BODY>
</HTML> 

Cómo crear un hipervínculo en HTML

Esta es la formula:
<a + (espacio) + href= + ” (Abrimos comillas) + (la dirección URL que queremos) + ” (Cerramos comillas) + > + (Texto a mostrar) + </a>
LISTO. YA ESTÁ. 
Quedaría así:
<a href=”http://juliorestrepo.wordpress.com”>El Blog de Julio Restrepo</a>


FORMATOS DE TEXTO Y LINEAS

Negrita

Existen dos etiquetas que harán que nuestro texto se convierta en negrita. La utilización de cualquiera de ellas es indiferente. Puedes usar la que prefieras.


La primera es la etiqueta <b> y la otra es la etiqueta <strong>. Aquí va un ejemplo:


Este palabra la vamos a poner en <b>negrita</b> y esta otra <strong>también</strong>

Este palabra la vamos a poner en
negrita y esta otra también

Cursiva


Para escribir un texto en cursiva debemos utilizar la etiqueta <i> (y por supuesto cerrarla con la etiqueta </i>).


También podemos utilizar la etiqueta <em>. Como en el caso de la negrita, es indiferente el uso de una u otra. Aquí os dejo un ejemplo:


Este palabra la vamos a poner en <i>cursiva</i> y esta otra <em>también</em>

Este palabra la vamos a poner en
cursiva y esta otra también

Subrayado


Si queremos que la palabra o el texto quede subrayado, deberemos rodearlo con la etiqueta <u> y cerrarlo con su correspondiente etiqueta. O sea, </u>. Así subrayaríamos una frase importante:


<u>Así subrayaríamos una frase importante</u>

Así subrayaríamos una frase importante

Texto con espaciado simple o TT


TT son las iniciales de “teletype”. Utilizando esta etiqueta conseguiremos un espaciado simple entre las diferentes letras del texto. Abriremos la etiqueta con <tt> y la cerraremos con </tt>.


<tt>Esta frase la vamos a escribir de forma espaciada </tt>

Esta frase la vamos a escribir de forma espaciada

Palabras más grandes o más pequeñas


Puede que en una frase queramos destacar un palabra por medio de una variación de tamaño sin necesidad de utilizar los encabezados(los explicaremos más adelante). Pues esta variación de tamaño la conseguiremos gracias a las etiquetas <big> y <small>.


Sus propios nombres en inglés nos indican cuáles serán sus funciones: <big> agrandará el texto y <small> lo disminuirá.


Cada vez que escribamos una etiqueta, haremos el texto un punto más grande. Pero estas etiquetas también la podemos combinar, por lo que si escribimos dos veces la etiqueta <big>, haremos crecer la palabra dos puntos.


Un ejemplo sería el siguiente:


Esta palabra se va a escribir <small>pequeñita</small>, esta se va a escribir <big>más grande</big> y ésta <big><big>más grande aún</big></big>.

Esta palabra se va a escribir
pequeñita, esta se va a escribir más grande y ésta más grande aún.

Superíndices y subíndices


Mediante el Html también podemos escribir fórmulas matemáticas.  Gracias a las etiquetas siguientes podrás escribir subíndices y superíndices fácilmente. La etiqueta <sub> te servirá para escribir un subíndice y <sup> será tu etiqueta para un superíndice.


Así nos queda un ejemplo como el siguiente:


Gracias a estas etiquetas podemos escribir cualquier formula matemática como esta: H <sub>2</sub> O o números elevados a potencias 7<sup>3</sup>.

Gracias a estas etiquetas podemos escribir cualquier formula matemática como esta: H
2 O o números elevados a potencias 73.

Texto tachado


Existen tres etiquetas diferentes que nos servirán para conseguir que nuestro texto se quede tacahado. Hablamos de las etiquetas <strike>, <s> y <del>. Ambas nos ofrecen el mismo resultado. Aquí tienes la muestra:


Si la palabra no me gusta la puedo tachar <strike>así</strike>, <s>así</s> o <del>así</del>. ¡Lo mismo me da!


Si la palabra no me gusta la puedo tachar
así, así o así. ¡Lo mismo me da!

 Saltos de línea

Ya os hemos comentado anteriormente que en html los saltos de línea escritos en código no son tal una vez el navegador interpreta el código. Vamos a explicaros esto con un claro ejemplo:


Puedes escribir un texto como este
y el navegador no lo interpretará así

Y se verá así: 

Puedes escribir un texto como este y el navegador no lo interpretará así

Existen dos etiquetas para indicar que queremos hacer un salto de línea normal. Son las etiquetas <br> y <br/> ambas son interpretadas igual por el navegador. Esta etiqueta no hace falta abrirla y cerrarla, sólo con escribirla el navegador ya la interpreta.


Así pues el texto anterior deberíamos escribirlo de la siguiente forma:


Puedes escribir un texto como este <br/>
y el navegador no lo interpretará así

Párrafos


Para indicarle al navegador que queremos poner ese texto en un párrafo, debemos escribirlo entre las etiquetas <p> y su cierre </p>.


Así el texto quedará dentro de un párrafo, separado por un espacio en blanco por encima y uno por abajo.


El texto del párrafo lo puedes alinear utilizando la etiqueta align utilizando los parámetros “center” (para alinearlo al centro), “right” (para alinearlo a la derecha), “left” (para alinearlo a la izquierda) y “justify” (para justificar el texto).


Un ejemplo de esta etiqueta con sus respectivos parámetros es el siguiente:


<p align="center">Este texto se alineará al centro</p>
<p align="right">Este texto se alineará a la derecha</p>
<p align="left">Este texto se alineará a la izquierda</p>

que se verá así:

Este texto se alineará al centro
Este texto se alineará a la derecha
Este texto se alineará a la izquierda


Marquee.

La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra página Web. Gracias a ella podemos conseguir texto en movimiento. Para aplicar este efecto a los textos, éstos deben estar dentro de la etiqueta marquee, entre su inicio "<marquee>" y su cierre "</marquee>".
El movimiento, la dirección de desplazamiento, la velocidad del mismo,…todo es configurable gracias a los siguientes atributos:

align: Este atributo nos indicará si el texto dentro de la etiqueta se alineará en la zona alta del marquee ("top"), en el medio ("middle") o en la parte baja ("bottom").

bgcolor: Con este atributo definiremos el color de fondo que le queremos dar a la marquesina donde está el texto en movimiento.

height y width: El primero marca la altura que tendrá la marquesina y el segundo la anchura de la misma.

scrollamount: Este atributo define la cantidad de píxeles que queremos que se desplace el texto en cada movimiento. Por ejemplo: <marquee scrollamount="3"> </marquee> significará que el texto que vaya dentro de esa etiqueta se moverá a razón de tres píxeles por movimiento.

scrolldelay: Éste nos define la velocidad del texto que está dentro de la marquesina. A menor numeración, mayor velocidad. Es decir, un texto irá más rápido si el scrolldelay es 5, que si el scrolldelay es 20.

loop: Este atributo nos determina si el movimiento se repetirá o no. Si queremos que el movimiento sólo se repita unas veces determinadas debemos indicárselo con un número, que será el número de veces que se repita. Si queremos que se repita sólo 10 veces, su loop será el siguiente: <marquee loop="10"> </marquee>
Si queremos que se repita debemos usar "infinite" o "-1". Si no especificamos nada, se repetirá constantemente.

direction: Sirve para definir la dirección del movimiento: "left" para la izquierda, "right" para la derecha, "top" para arriba y "down" para abajo.

behavior: Gracias a este atributo podemos dar nuevos efectos a la marquesina. Si no especificamos este atributo, el texto se moverá de forma circular en el sentido que le hayamos marcado. Con behavior="scroll" conseguiremos el mismo efecto: el texto se moverá circularmente.

Con behavior="slide" haremos que el texto se detenga al llegar al final de la marquesina. Y con el behavior="alternate" el texto irá y volverá de un lado a otro de la marquesina.
Nosotros hemos querido mostrarte un ejemplo de marquee. Aquí lo puedes ver:
Estás viendo el ejemplo que hemos hecho nosotros.
Y el código de nuestro marquee es el siguiente:
<marquee bgcolor="#FFFFFF" width="50%" scrolldelay="100" scrollamount="5" direction="left" loop="infinite">Estás viendo el ejemplo que hemos hecho nosotros.
</marquee>
  

Separadores en html: La etiqueta <hr>

Para separar un texto de otro o un párrafo de otro podemos utilizar una línea horizontal de un tamaño o un grosor determinado por nosotros. Esa franja la escribimos con la etiqueta <hr>. La contrario que muchas etiquetas html, ésta no necesita ser cerrada. Sólo con escribir la etiqueta anterior ya la escribimos.


La etiqueta <hr>, como muchas otras etiquetas, puede variar de aspecto dependiendo de una serie de caracteres o parámetros que podemos predefinir. Por ejemplo, podemos definir su grosor mediante el parámetro size.


Para escribir este parámetro en la etiqueta escribiremos “size=x”, siendo “x” el número del grosor de la franja. A continuación te vamos a ofrecer dos ejemplos de franjas con diferentes grosores, siendo la primera 10 y la segunda dos. La diferencia es abismal


<hr size="20" />

<hr size="2"  />


Maquetación por tablas paso a paso
 
Las tablas en realidad están pensadas para presentar información tabulada, es decir, usando filas y columnas. Sin embargo, este uso lo podemos extender a toda la página web y crear una macrotabla que englobe todos los contenidos que se van a mostrar en la página entera. Como las tablas tienen filas y columnas, nos servirán para crear varias áreas donde se mostrarán los contenidos maquetados como si fuera una revista o un portal.
En este artículo vamos a crear un ejemplo medianamente sencillo de maquetación usando tablas. Lo podemos ver a continuación para hacernos una idea del objetivo buscado.
Como hemos visto, esta página está compuesta por una cabecera y un cuerpo de página. Para crear la cabecera y el cuerpo utilizaremos tablas independientes. Esto lo hacemos porque con dos tablas separadas para simplificar el ejemplo, es decir, por comodidad y porque se hace más fácil de diseñar. No obstante, como la distribución de columnas y filas en la cabecera y cuerpo en este ejemplo es distinta, necesitamos utilizar tablas independientes. Pero la razón más importante de poner cabecera y cuerpo en tablas distintas es que en algunos navegadores, cuando hay diseño con tablas, hasta que no se carga el código de la tabla entera no se muestra nada. Si tuviéramos toda la página metida en la misma tabla, el usuario no vería nada hasta que no se terminase de cargar toda la página en su navegador. Si separamos las tablas de cabecera y cuerpo conseguimos que la cabecera de la página se cargue y se muestre rápidamente y luego, aunque tarde bastante en cargarse el resto de la página con todo el cuerpo, por lo menos el usuario ve la cabecera y puede saber que la página está por cargar del todo.
En este caso la cabecera es bastante típica, con el logotipo, un banner y una barra de navegación horizontal. El código puede ser como el siguiente.
<table width="778" cellspacing="1" cellpadding="3" border="0" bgcolor="#000000" align="center">
<tr>
    <td width=180 align=center bgcolor="#ffffff"><img src="logo.gif" width="154" height="72" alt="Todo Clásico" border="0"></td>
    <td bgcolor="#ffffff" align=center><img src="banner.gif" width="468" height="60" border="0"></td>
</tr>
<tr>
    <td colspan=2 bgcolor="#ffffff" background="fondohorizontal.gif">
     
    <font face="Garamond">Portada | Noticias | Agenda | Artistas | Buscador | Comunidad | Tienda</font>
    </td>
</tr>
</table>
Si nos fijamos, la cabecera tenía un contorno negro. Esto lo conseguimos de manera similar a como explicamos en un taller anterior de HTML: Recuadro elegante y sencillo con HTML. Simplemente ponemos un color de fondo negro a la tabla, luego hacemos que las casillas estén separadas (cellspacing) de un píxel y definimos en blanco el color de todas las casillas. Así, la separación entre casillas aparecerá en negro y las casillas en blanco. En este caso hemos definido un margen entre el borde de la casilla y el contenido (cellpadding) de tres pixels, para que el contenido de las casillas no se pegue con el borde.
La barra de navegación horizontal ocupa todo el ancho de la cabecera, por eso tiene un colspan=2. Le hemos puesto un fondo degradado para mejorar el diseño un poco.
Otra cosa destacable es el ancho de la tabla, que lo hemos hecho de 778 píxeles. Podríamos haber hecho un diseño que ocupase todo el ancho de la página, pero he creado un diseño no fluido con ancho fijo. Este tipo de diseños, en mi opinión, son más sencillos de que queden bien. El tamaño de 778 píxeles es porque es lo máximo que se puede poner que quepa en definiciones de pantalla de 800 x 600. Podemos conocer más sobre diseños fluidos en el artículo Páginas fluidas. También tenemos otro artículo donde podemos saber más sobre definiciones de pantalla.
Por su parte, el cuerpo tiene una distribución de tres columnas. El código de la tabla que englobaría todo el cuerpo es el siguiente:
<table width="778" cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
    <td width=150 valign="top">
    <!--NAVEGADOR LATERAL IZQUIERDO-->
    </td>
    <td width=10></td>
    <td width=484 valign="top">
    <!--CUERPO PRINCIPAL-->
    </td>
    <td width=10></td>
    <td width=124 align=center valign="top">
    <!--LATERAL DERECHO-->
    </td>
</tr>
</table>