Torre de Babel - Diseño Web

[CSS] Crear una barra de enlaces

2010-12-24T02:44:00.000-08:00

Crear una barra de enlaces con HTML es sencillo, sólo hemos de poner un enlace tras otro, todos ellos dentro de una capa (div) con un identificador (id). Por ejemplo:

<div id="enlaces">
 <a href="http://fcharte.com">Portada</a>
 <a href="http://fcharte.com/Default.asp?libros">Libros</a>
 <a href="http://tdbweb.blogspot.com/">Diseño web</a>
 <a href="http://fcharte.com/Default.asp?articulos">Artículos</a>
 <a href="http://fcharte.com/Default.asp?glosario">Glosario</a>
 <a href="http://feeds.feedburner.com/TorreBabel?format=xml">Feed RSS</a>
</div>

Este código tiene un resultado poco atractivo:

Portada Libros Diseño web Artículos Glosario Feed RSS

Sin embargo, es suficiente para que, con unos pocos trucos CSS, quede muy elegante.
Para empezar, separaremos los enlaces (para ello usaremos un selector CSS que incluye a todos los enlaces dentro de esa capa: div#enlaces>a):

div#enlaces {
  padding: 6px;
}

div#enlaces>a {
  display: table-cell;
  padding: .4em 12px .4em 12px;
}

El resultado ahora es algo mejor, pero todavía queda mucho por hacer:

Portada Libros Diseño web Artículos Glosario Feed RSS

Vamos a darle algo de color a todo esto, y también quitaremos el subrayado de los enlaces. Yo he elegido una gama de colores azul:

div#enlaces {
  background: #daeaf6;
  padding: 6px;
}
div#enlaces>a {
  color: #205080;
  text-decoration: none;
  display: table-cell;
  padding: .4em 12px .4em 12px;
}

Esto ya empieza a parecer una barra de enlaces más decente:

Portada Libros Diseño web Artículos Glosario Feed RSS

Vamos a añadirle un efecto para cuando el cursor se pose encima:

div#enlaces {
  background: #daeaf6;
  padding: 6px;
}
div#enlaces>a {
  color: #205080;
  text-decoration: none;
  display: table-cell;
  padding: .4em 12px .4em 12px;
}
div#enlaces>a:hover {
  opacity: .7;
  -moz-opacity: .7;
  filter: alpha(opacity=70);
}

Y ahora un último detalle: una línea sutil para separar enlaces.

div#enlaces {
  background: #daeaf6;
  padding: 6px;
}
div#enlaces>a {
  color: #205080;
  text-decoration: none;
  padding: .4em 12px .4em 12px;
  display: table-cell;
  border-right: 1px solid #ccc;
}
div#enlaces>a:hover {
  opacity: .7;
  -moz-opacity: .7;
  filter: alpha(opacity=70);
}
div#enlaces>a:last-child {
  border: 0px solid;
}

Y nuestra barra de enlaces quedará así:

Portada Libros Diseño web Artículos Glosario Feed RSS

El código al completo, tras el salto:
<!DOCTYPE html>

<html>
 <head>
  <style>
   div#enlaces {
    background: #daeaf6;
    padding: 6px;
   }
   div#enlaces>a {
    color: #205080;
    text-decoration: none;
    display: table-cell; 
    padding: .4em 12px .4em 12px;
    border-right: 1px solid #ccc;
   }
   div#enlaces>a:hover {
    opacity: .7;
    -moz-opacity: .7;
    filter: alpha(opacity=70);
   }
   div#enlaces>a:last-child {
    border: 0px solid;
   }
  </style>
 </head>
 <body>
  <div id="enlaces">
   <a href="http://fcharte.com">Portada</a>
   <a href="http://fcharte.com/Default.asp?libros">Libros</a>
   <a href="http://tdbweb.blogspot.com/">Diseño web</a>
   <a href="http://fcharte.com/Default.asp?articulos">Artículos</a>
   <a href="http://fcharte.com/Default.asp?glosario">Glosario</a>
   <a href="http://feeds.feedburner.com/TorreBabel?format=xml">Feed RSS</a>
  </div>
 </body>
</html>

Cómo crear una búsqueda instantánea

2010-09-18T07:33:00.000-07:00

Recientemente, Google ha lanzado Instant Search, la forma de buscar en la web más rápida, ya que no hace falta nada más que empezar a escribir para que vayan apareciendo resultados de la búsqueda. Otras personas tomaron la idea y crearon Youtube Instant y Twitter Instant, por ejemplo.

En Techtástico han publicado un tutorial para crear tu propia búsqueda instantánea usando jQuery y PHP.

Enlace - Cómo crear tu propio buscador instantáneo como Google Instant

La canción del CSS3

2010-08-23T10:02:00.000-07:00

Hace unos días que no posteo nada por aquí, así que aquí va la canción del CSS3, para entretenernos un rato.

Cómo crear un blog de Blogger (III)

2010-08-11T03:12:00.000-07:00

Bienvenidos al cursillo para crear un blog con Blogger. En la parte anterior, vimos cómo cambiar el aspecto general de nuestro blog. Ahora modificaremos, añadiremos y quitaremos gadgets para completar nuestro blog. De nuevo, debemos acceder a la pestaña Diseño desde el Escritorio de Blogger. Lo primero que veremos en esta pestaña será algo como esto:

Primero, añadamos algunos gadgets. Como vemos, tenemos sitios para gadgets encima de las entradas, a la izquierda (en la barra lateral) y debajo, con tres espacios iguales en la parte inferior. En el espacio de arriba, vamos a añadir el gadget Páginas, que sirve para mostrar una barra de pestañas en la que se pueden ir añadiendo más mediante la herramienta Editar páginas de Blogger. Para ello, haremos clic en el enlace Añadir un gadget que aparece en la parte superior, y aparecerá una ventana que contiene los gadgets disponibles (imagen izquierda). Al elegir Páginas, se abrirá la ventana de configuración del gadget (imagen derecha). En principio, haremos clic en Guardar sin realizar modificaciones, aunque más tarde podemos recuperar esta ventana si es necesario.

Ahora tendremos una barra de pestañas, que será diferente según la plantilla que hubiésemos elegido anteriormente, pero sólo con una pestaña. Para añadir más pestañas, hemos de ir a la sección Editar páginas, que se encuentra dentro de Creación de entradas.

La barra de pestañas también se puede crear mediante el gadget Lista de enlaces.

En la parte lateral o en la inferior, es interesante colocar los gadgets Etiquetas y Archivo del blog (está añadido por defecto), que ayudarán al usuario a navegar por el blog y a encontrar los temas que le interesan. Además, también podemos colocar una lista con otros blogs en los que colaboremos o que sigamos mediante Lista de blogs, o añadir algo de información personal con Perfil. Luego, podemos acceder a una gran galería de gadgets (más de 1500) eligiendo Más gadgets, en la ventana de Añadir un gadget.
Además, para añadir funcionalidades que no estén disponibles en forma de gadgets, tenemos a nuestra disposición HTML/Javascript, un gadget en el que podemos insertar algo de código. Por ejemplo, el servicio Twitter tiene un gadget para agregar a páginas web. Sólo hemos de copiar el código que aporta y pegarlo dentro del gadget HTML/Javascript para añadirlo al blog.
Finalmente, añadiremos un gadget de búsqueda sencillo con un gadget HTML/Javascript y algo de código:

<form action="search">
<input type="search" placeholder="Introducir término/s" value="" name="q" style="width:10em" />
<input type="submit" value="Buscar" />
</form>

Veamos un ejemplo de un blog de prueba con unos cuantos gadgets ya añadidos y configurados:

Cómo crear un blog de Blogger (II)

2010-08-07T12:35:00.000-07:00

En la primera parte de Cómo crear un blog de Blogger, vimos cómo empezar a crear nuestro blog. Ahora aprenderemos a crear nuestra propia plantilla y a personalizar el blog de varias maneras. Antes de nada, debemos acceder a Blogger y dirigirnos a nuestro Escritorio, donde elegiremos el enlace Diseño de debajo del título de nuestro blog.

Personalizar la plantilla

Cuando terminamos de crear nuestro blog, en la parte anterior, elegimos una plantilla para comenzar. Sin embargo, el nuevo Diseñador de plantillas de Blogger ofrece muchas más posibilidades. De entrada, podemos elegir una de las plantillas (por ahora hay 6, cada una comprende varias versiones de distintos colores y fondos) en el apartado Plantillas. Seguidamente, en la pestaña Fondo, podremos elegir una gama de colores entre los varios temas sugeridos o incluso personalizarla mediante el selector de colores de la sección Gama de colores principal, y, como es evidente, también podremos elegir un fondo diferente para nuestro blog. Veamos como ha quedado nuestro blog de prueba tras cambiar la plantilla, la gama de colores principal y el fondo:

Ahora indagaremos en la pestaña Diseño. Ésta nos permite ubicar la barra lateral, reordenar los gadgets, modificar el estilo de pie de página y cambiar el ancho del blog. En este blog de prueba, tendremos una barra lateral simple a la izquierda y un espacio triple para añadir gadgets en el pie de página.

Finalmente, vamos a entrar en la pestaña Avanzado, en la que podemos modificar las propiedades de los distintos elementos del blog (cabecera, entradas, barra lateral, texto, enlaces, etc.). Lo más sencillo aquí es ir experimentando, y llegar a la mejor configuración mediante ensayo y error. Dentro de esta pestaña encontramos el apartado Añadir CSS, que nos permite configurar el blog mediante código CSS. Es interesante añadir ésta línea de código, que hará desaparecer la molesta barra superior de Blogger:

#navbar { display: none; }

Por último, haremos clic en el botón Aplicar al blog. Veamos finalmente el resultado de nuestras modificaciones:

Pero las personalizaciones no han terminado aquí. En los próximos posts sobre Cómo crear un blog de Blogger veremos cómo añadir una barra de pestañas en la parte superior, añadir un logo y probaremos más gadgets para nuestro blog.

10 recursos gratuitos para desarrolladores

2010-08-07T04:38:00.000-07:00

Sets de botones y kits de Interfaz de usuario para diseñadores web, en Mashable: http://mashable.com/2010/08/05/free-web-ui-resources

¿Qué puedes construir en 1 kB de Javascript?

2010-08-06T10:09:00.000-07:00

Peter van der Zee ha abierto un curioso concurso en la red para desarrolladores y aficionados al diseño web: Programar una demo Javascript en un kilobyte de código (1024 bytes como máximo), hacks y minificaciones permitidas. Ya hay varias demos enviadas, puedes verlas en la página de demos. Las reglas del concurso, premios y jurado en el sitio de JS1k. El plazo de envío de demos se termina el 10 de septiembre.
Visto en Ajaxian.

6 útiles herramientas gratis para CSS 3

2010-08-06T02:57:00.000-07:00

Interesante entrada de CSSBlog.es: http://www.cssblog.es/6-utiles-herramientas-gratis-para-css3

Cómo crear un blog de Blogger (I)

2010-08-05T12:00:00.000-07:00

Uno de los métodos más usados para crear un blog es el servicio de Google Blogger. Recientemente renovado, es una de las maneras más fáciles y populares de conseguir un blog, junto con Wordpress.

Paso 1. Crear una cuenta de Google

Si no tienes una cuenta de Google, el primer paso será crearla para poder acceder como usuario a Blogger. Para ello, sólo tenemos que ir a https://www.blogger.com/start, hacer clic en Crear un blog y completar el formulario, usando como correo electrónico uno que ya tengamos. Si queremos crear una dirección de correo nueva, deberemos crear nuestra cuenta de Google en Gmail.

Paso 2. Asignar un nombre y una dirección al blog

Este paso, aunque de planteamiento sencillo, puede resultar muy difícil de realizar, a causa de la gran cantidad de direcciones que ya están usadas. Algunos trucos útiles para conseguir una buena dirección pueden ser: inventar un nombre original y, si es necesario, añadir algún guión o número a la dirección.

Paso 3. Elegir una plantilla

En esta etapa podemos elegir una plantilla cualquiera, ya que después, si no estamos conformes, podremos personalizarla y elegir gamas de colores, fuentes de letra, fondo del blog, etc.
Terminaremos pulsando el botón Continuar. Acto seguido, ya podemos empezar a publicar o personalizar la plantilla que hayamos elegido.

En el próximo post sobre Blogger, veremos cómo añadir un logo, personalizar la plantilla y añadir gadgets a la barra lateral de nuestro blog.

[Truco CSS] Cómo convertir cualquier elemento en un botón

2010-08-01T12:55:00.000-07:00

A veces nos puede interesar que un elemento HTML tenga las propiedades y ventajas propias, pero a la vez que parezca y actúe como un botón (<button>). Para ello, podemos usar CSS o Javascript. En este ejemplo usaremos CSS, y especialmente los pseudo-selectores :hover y :active, para añadir apariencia de botón a un elemento a.

Consideremos el siguiente elemento:

<a href="http://fcharte.com/">Volver a portada</a>

Es evidente que el resultado de tal elemento, antes de añadirle el estilo, será: Volver a portada
Para darle aspecto de botón, empezaremos quitando el subrayado mediante la propiedad text-decoration, y desactivando el cursor de la mano a través de la propiedad cursor:

a {
text-decoration: none;
cursor: default;
}

Lo próximo que haremos será cambiar el color de la letra, añadirle un borde y un fondo:

a {
text-decoration: none;
cursor: default;
color: #000000;
border: 1px solid gray;
background-color: #e0e0e0;
}

De esta manera, nuestro enlace quedará así: Volver a portada
Pero sigue sin parecer un botón, por lo que cambiaremos el tamaño y la fuente de letra y ajustaremos los márgenes interiores (padding):

a {
text-decoration: none;
cursor: default;
color: #000000;
border: 1px solid gray;
background-color: #e0e0e0;
font-family: Arial;
font-size: 12px;
padding: 1px 5px;
}

El atributo 1px 5px de la propiedad padding establece que el márgen interior de arriba y abajo será de 1 píxel, mientras que los márgenes laterales serán de 5px. El botón queda ahora así: Volver a portada

Ahora usaremos algunas propiedades de CSS3 para completar el estilo base de nuestro botón (Internet Explorer no soporta algunas de ellas):

a {
text-decoration: none;
cursor: default;
color: #000000;
border: 1px solid #444444;
background-color: #e0e0e0;
font-family: Arial, sans-serif;
font-size: 13px;
padding: 1px 5px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0,#efefef), color-stop(0.2,#eaeaea), color-stop(0.48,#eaeaea), color-stop(0.52,#d0d0d5));
background-image: -moz-linear-gradient(top,#efefef 0%,#eaeaea 20%,#eaeaea 48%,#d0d0d5 52%);border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
box-shadow: inset 0px 0px 5px #ffffff;
-moz-box-shadow: inset 0px 0px 5px #ffffff;
-webkit-box-shadow: inset 0px 0px 5px #ffffff;
}

Nuestro botón ahora tiene un fondo degradado (sólo en Firefox y Chrome), las esquinas redondeadas y un ligero brillo blanco entre el borde y el texto: Volver a portada
Podríamos sustituir estas propiedades CSS3 que Internet Explorer no soporta por imágenes, pero eso se convertiría en un trabajo tedioso. También podríamos utilizar CSS3Pie, una librería CSS para conseguir que Internet Explorer soporte estas propiedades.

Lo siguiente que hemos de hacer es que nuestro falso botón reaccione a los eventos del ratón (cuando el ratón pase por encima y cuando el ratón haga clic en el botón). Para que el fondo del botón cambie cuando el ratón pase por encima usaremos el siguiente código:

a:hover {
background-color: #d0e5fa;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0,#eaffff), color-stop(0.2,#e0f0ff), color-stop(0.48,#e0f0ff), color-stop(0.52,#c0e0ea));
background-image: -moz-linear-gradient(top,#eaffff 0%,#e0f0ff 20%,#e0f0ff 48%,#c0e0ea 52%);border: 1px solid #4488aa;
}

Con este código, al pasar sobre el botón tendría este aspecto: Volver a portada

Finalmente, necesitaremos algo más de código CSS para que nuestro botón reaccione al pulsarlo:

a:active {
background-color: #a0c5ea;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0,#caefef), color-stop(0.2,#caefef), color-stop(0.58,#caefef), color-stop(0.62,#b0d0da));
background-image: -moz-linear-gradient(top,#eaffff 0%,#e0f0ff 20%,#e0f0ff 48%,#c0e0ea 52%);
border: 1px solid #004488;
box-shadow: inset 0px 0px 3px #000000;
-moz-box-shadow: inset 0px 0px 3px #000000;
-webkit-box-shadow: inset 0px 1px 2px #000000;
outline: 0px solid;
}

Y el enlace, ya convertido en botón, será así al pulsarlo: Volver a portada

El código completo del ejemplo está después del salto

<!DOCTYPE html>
<html>
 <head>
  <title>Enlaces que parecen botones</title>
  <style type="text/css">
   a {
   text-decoration: none;
   cursor: default;
   color: #000000;
   border: 1px solid #444444;
   background-color: #e0e0e0;
   font-family: Arial, sans-serif;
   font-size: 13px;
   padding: 1px 5px;
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0,#efefef), color-stop(0.2,#eaeaea), color-stop(0.48,#eaeaea), color-stop(0.52,#d0d0d5));
   background-image: -moz-linear-gradient(top,#efefef 0%,#eaeaea 20%,#eaeaea 48%,#d0d0d5 52%);
   border-radius: 2px;
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
   box-shadow: inset 0px 0px 5px #ffffff;
   -moz-box-shadow: inset 0px 0px 5px #ffffff;
   -webkit-box-shadow: inset 0px 0px 5px #ffffff;
   }
   a:hover {
   background-color: #d0e5fa;
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0,#eaffff), color-stop(0.2,#e0f0ff), color-stop(0.48,#e0f0ff), color-stop(0.52,#c0e0ea));
   background-image: -moz-linear-gradient(top,#eaffff 0%,#e0f0ff 20%,#e0f0ff 48%,#c0e0ea 52%);
   border: 1px solid #4488aa;
   }
   a:active {
   background-color: #a0c5ea;
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0,#caefef), color-stop(0.2,#caefef), color-stop(0.58,#caefef), color-stop(0.62,#b0d0da));
   background-image: -moz-linear-gradient(top,#eaffff 0%,#e0f0ff 20%,#e0f0ff 48%,#c0e0ea 52%);
   border: 1px solid #004488;
   box-shadow: inset 0px 0px 3px #000000;
   -moz-box-shadow: inset 0px 0px 3px #000000;
   -webkit-box-shadow: inset 0px 1px 2px #000000;
   outline: 0px solid;
   }
  </style>
 </head>
 <body>
  <a href="http://fcharte.com">Volver a portada</a>
 </body>
</html>

HTML 5

2010-07-29T02:18:00.000-07:00

HTML 5 es el próximo estándar para la creación de páginas web. Aunque todavía no ha sido terminado ni las especificaciones están completas, muchos sitios utilizan esta versión de HTML, y la mayoría de navegadores modernos (excepto Microsoft Internet Explorer) lo soportan.
HTML 5 incluye muchas nuevas características, tales como la inclusión de las etiquetas <audio> y <video> para contener archivos multimedia, algo que antes se conseguía con Flash. También se ha incluido en el nuevo HTML el elemento <canvas> (lienzo en inglés), que nos permitirá dibujar y crear formas en él, además de poder permitir al usuario que también interactúe con él.

Además, se han añadido nuevos elementos para modificar la estructura de los sitios web (<header>, <section>, <article> y <footer>, entre otros), como se puede apreciar en la imagen:

Comparación entre HTML 4 y HTML 5. Imagen de Anexom.es

Para comprobar en qué medida tu navegador soporta HTML 5, visita HTML 5 Test. Para conocer lo último sobre este nuevo estándar, consulta W3 Schools, HTML 5 Rocks y HTML 5 Demos.

Editores web - KompoZer (I)

2010-07-27T10:38:00.000-07:00

KompoZer es un editor web derivado de Nvu, programa que está descontinuado desde 2006, y proviene del editor web Composer que se incluía en la Mozilla Suite (navegador web + cliente de correo + editor web), ahora llamada SeaMonkey. La principal meta de KompoZer es crear un entorno de edición web sencillo (además, se trata de un editor WYSIWYG, What You See Is What You Get).
El programa se puede descargar desde esta página en distintos idiomas. En este ejemplo estamos trabajando con la versión 0.8 beta 3.

Ventana principal de KompoZer

En la imagen anterior podemos observar el panel de edición a la derecha, donde se inserta el contenido con el que se creará la página web, y que consta de 3 pestañas en la parte inferior:

Diseño: Es la pestaña por defecto y la que se utilizaría normalmente en este programa. Aquí se introducen el texto y las imágenes tal cual quedarán en la página web definitiva.
Dividir: En esta pestaña podremos editar el contenido de la página a la vez que vemos y editamos el código del elemento seleccionado, como se puede ver en la figura de la derecha.
Código fuente: En esta vista podremos revisar y editar el código fuente de la página, una tarea dirigida a usuarios más avanzados que la vista Diseño.

Para editar el formato del contenido, además de contar con la barra de formato para el texto en la parte superior, podemos usar la ventana de propiedades de cada elemento, seleccionándolo con el botón derecho y haciendo clic en Propiedades. Además, mediante el botón Edición avanzada... se puede acceder a las propiedades CSS del elemento en cuestión, a los atributos HTML y añadir eventos con Javascript.

Ventana Propiedades de la tabla

Más adelante veremos cómo insertar contenido multimedia, crear capas y añadir más formato a los sitios que creemos con KompoZer.

Enlace: Descargar KompoZer

jQuery

2010-07-26T12:43:00.000-07:00

Voy a comentar un poco lo que es y para qué sirve jQuery. jQuery es una librería Javascript, es decir, un archivo de código que, al insertarse en una página web, permite al desarrollador programar en Javascript de manera mucho más fácil, prácticamente como si fuera un lenguaje nuevo. La diferencia es que la sintaxis de jQuery es realmente sencilla, y es capaz de realizar complejas funciones con muy poco código. Para implementar jQuery en tu página web, sólo tienes que añadir la siguiente línea entre las etiquetas <head> y </head>:

<script type="text/javascript" 
src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

De esta manera, cualquier script ubicado debajo de esa línea utilizará las funciones de jQuery. Todos los scripts que usan esta librería tienen esta estructura básica:

$(document).ready(function() {
    //aquí todos los scripts y funciones
});

Normalmente, la estructura del código en jQuery se hace de esta manera:

$(objeto).función(propiedades);

//ejemplo:
$('div').css('background', 'red');

Y la estructura para manejar eventos (clic del ratón, cambio en el contenido, etc.) es la siguiente:

$(objeto).evento(function() {
    //código a ejecutar cuando sucede el evento
});

//ejemplo:
$('button').click(function() {
    $(this).fadeOut(500);
});

La sintaxis que se utiliza para determinar el/los objeto(s) al que se aplicarán las distintas funciones es la misma que en CSS. Por ejemplo, con $('#logo') seleccionaríamos el elemento con identificador logo, y con $('table.lateral tr td'), todas las celdillas de las tablas con clase lateral.
Además, las funciones aplicadas a un elemento se pueden escribir de forma consecutiva (una detrás de otra), como en el siguiente ejemplo:

$('div.aparecer').css('background', '#000000')
  .fadeIn()
  .animate({'marginTop': '10px'}, 500);

Por último, jQuery también puede ser ampliada mediante una amplia selección de plugins, que podrás encontrar en http://plugins.jquery.com/.
Puedes encontrar mucha más información sobre el uso de jQuery en http://docs.jquery.com/.

Introducción al diseño web

2010-07-24T02:51:00.001-07:00

El diseño web consiste en construir páginas web, ya sea mediante puro código (HTML, PHP, ASP...) o mediante programas que crean al diseño interactivamente, tales como Dreamweaver o Nvu.

Las mayoría de las páginas web se construye estructuralmente en HTML, un lenguaje de marcas. En este lenguaje se escriben etiquetas, que contienen diversos atributos y contenidos. Por ejemplo, las siguientes etiquetas delimitarían un párrafo:

<p> </p>

Las etiquetas se pueden (es más, se deben) ir anidando para obtener resultados más complejos:

<table id="tabla1">
   <tr>
      <td>Éste es el contenido de una celda 
dentro de una tabla</td>
      <td>Ésta sería la celda siguiente</td>
   </tr>
   <tr>
      <td>Y ésta otra estaría debajo de las dos anteriores</td>
      <td>Una celdilla más</td>
   </tr>
</table>

Sin embargo, no es la estructura lo único que cuenta.Para añadirle estilo a la página web debemos usar CSS, que es un lenguaje completamente diferente, aunque fácil de comprender. El estilo ha de introducirse en la etiqueta <style> o en un archivo externo, de una manera que veremos más adelante. El siguiente código provoca que la tabla del ejemplo anterior (que tiene identificador tabla1) mida de ancho 500 píxeles y otros 300 de alto, y tenga un borde de 2 píxeles de color azul. Además, cada celdilla tendrá un borde blanco de 1 píxel:

table#tabla1 {
   width: 500px;
   height: 300px;
   border: 2px solid blue;
}
td {
   border: 1px solid red;
}

La siguiente tabla muestra el resultado del código CSS y HTML anterior:

Éste es el contenido de una celda dentro de una tabla	Ésta sería la celda siguiente
Y ésta otra estaría debajo de las dos anteriores	Una celdilla más

Finalmente, el lenguaje que añade interactividad a las páginas web es Javascript, cuya sintaxis es parecida al lenguaje Java. Javascript es, por tanto, un lenguaje de programación que se interpreta en el navegador. Un ejemplo de este lenguaje sería el siguiente código, que provoca que aparezca un mensaje diciendo ¡Hola mundo!:

function Saludar() {
   alert('¡Hola mundo!');
}

El siguiente botón ejecuta el código Javascript del ejemplo:

El código completo del ejemplo tras el salto.

<!DOCTYPE html>
<html>
   <head>
      <style>
         table#tabla1 {
            width: 500px;
            height: 300px;
            border: 2px solid blue;
         }
         td {
            border: 1px solid red;
         }
      </style>
   </head>
   <body>
      <table id="tabla1">
         <tr>
            <td>Éste es el contenido de una celda 
dentro de una tabla</td>
            <td>Ésta sería la celda siguiente</td>
         </tr>
         <tr>
            <td>Y ésta otra estaría debajo de las dos anteriores</td>
            <td>Una celdilla más</td>
         </tr>
      </table>
      <button onclick="alert('¡Hola mundo!')">Púlsame</button>
   </body>
</html>