Si está escribiendo formulas matemáticas es posible que te surja la duda de como poner una raíz cuadrada en tu página HTML.

Para poder hacer esto utilizamos las entidades. En concreto el código de la entidad de la raíz cuadrada es en 8730.

Ahora ya solo nos queda el añadir &# delante del código y ; al final del código.

En nuestra página HTML escribiríamos lo siguiente:

Calcular la raíz cuadrada de 16.
√16 = 4

Y el resultado

Calcular la raíz cuadrada de 16.
√16 = 4

Sencillo y útil.
Similar Posts:

• Área de un pentágono en Java
• Restar dos números con Java
• Letra PI en una página web
• Código fuente en una capa con scroll
• Subindice en HTML

En este ejemplo vamos a ver como podemos crear una imagen la cual tenga diferentes partes (o áreas) con enlaces diferentes. Para ello nos vamos a apoyar en los elementos MAP y AREA de HTML.

Lo primero ver la imagen sobre la que vamos a crear las áreas...

La idea es que cada logo de la imagen redirija a un enlace diferente. Lo primero que hacemos es cargar la imagen en la página:

<img usemap="#navegadores" src="navegadores.png" border="0" alt="Navegadores" width="821" height="152" />

Como se puede apreciar hemos utilizado el atributo usemap para indicarle el nombre del mapa que contendrá la definición de las áreas enlazables. En este caso el mapa se llama navegadores.

Pasemos a definir el mapa. El mapa se define mediante el elemento MAP:

 
<map id="navegadores" name="navegadores">
...
</map>
 

Dentro del mapa es donde definiremos las áreas, mediante elementos AREA. Un elemento AREA tiene varios atributos, pero los más importantes son:

• href, es el enlace donde se irá al pinchar sobre ese área.
• shape, es el tipo de figura que queremos que represente el área: default|rect|circle|poly
• coords, los las coordenadas de la imagen que representan los vértices de la figura. O centro y rádio en el caso de que sea un círculo

En este caso, sobre la imagen definiríamos los siguientes áreas:

 
<area shape="rect" coords="0,0,157,147" href="/que-es-internet-explorer/" alt="Internet Explorer"  />
<area shape="rect" coords="164,0,321,147" href="/que-es-firefox/" alt="Firefox" />
<area shape="rect" coords="340,0,497,147" href="/que-es-google-chrome/" alt="Google Chrome" />
<area shape="rect" coords="507,0,664,147" href="/que-es-safari/" alt="Safari" />
<area shape="rect" coords="659,0,816,147" href="/que-es-opera/" alt="Opera" />

En nuestro caso hemos utilizado todo rectángulos.

Lo más complicado en estos casos es encontrar las coordenadas del área. Para ello te recomiendo que utilices herramientas como Image Map Creator la cual genera las coordenadas y el código HTML.Similar Posts:

• Area de un rectángulo con Java
• Ventanas de información con imágenes en Google Maps
• Crear métodos dinámicamente en Javascript
• Imagen con enlace en HTML
• Definir el tamaño de una imagen con CSS

Una de las etiquetas HTML más olvidadas es ADDRESS. Esta etiqueta es la que nos permite poner el contacto de una determinada página, tal cual nos indica la W3C:

"El elemento ADDRESS debe de ser utilizado por los autores para proporcionar información de contacto de un documento o de una parte importante de un documento como podría ser un formulario."

Así que cuando vayamos a poner el contacto de un documento podemos utilizar la etiqueta ADDRESS la cual tiene la siguiente estructura básica:

 
<address>contacto</address>
 

Así, si queremos poner un contacto podríamos poner lo siguiente:

 
<address>Victor Cuervo <br>
Alferez Provisional 14 2B <br>
05003 Avila <br>
Tlfno: +34 920 22 22 27</address>
 

Un interesante artículo (en inglés) sobre la utilización del elemento ADDRESS es "Use of ADDRESS Element".Similar Posts:

• Poner música en tu web con HTML5
• Definir la estructura Persona en XML
• Inicializar un array en Javascript
• Crear propiedades dinámicas en Javascript
• Embed: Música de fondo en tu página web

Aunque lo normal en la web es que los enlaces sean textos, también podemos extender la capacidad de hacer enlaces con imagenes. De esta forma, cuando pulsemos sobre una imagen, esta actuará como enlace y nos llevará al destino demarcado por el enlace.

Para poder hacer esto en HTML, lo primero será poner una imagen. Para ello nos basamos en la etiqueta IMG:

<img src="casarural.jpg" alt="Los Tejos" />

Acordaros, como buena práctica, el poner un texto alternativo a la imagen con el atributo alt.

Ahora tendremos que recubrir el código de la imagen con un código de enlace. Para los enlaces nos basamos en la etiqueta A o anchor. Y para indicar el enlace el atributo href. De esta manera el código quedaría de la siguiente forma:

<a title="Los Tejos" href="http://www.lostejos.com"><img src="casarural.jpg" alt="Los Tejos" /></a>

Similar Posts:

• Enlace a una parte concreta de la página
• Abrir enlace en una nueva ventana
• Obtener el contenido de un elemento conociendo su TAG
• Marcar enlaces externos con jQuery
• Hipervinculos: enlazar dos páginas web

A la hora de escribir documentos HTML y publicarlos en la web tenemos que tener en cuenta que, estos, son susceptibles de ser visualizados por personas de muchos sitios. Y que estas personas tendrán diferentes configuraciones de sus navegadores. Es por ello que tenemos que prestar especial atención cuando utilicemos símbolos especiales de los idiomas.

Esto nos va a aparecer si utilizamos codificaciones de codificación locales, como puede ser la ISO-8859-1.

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

Este es el caso de la Ñ, letra que solo encontramos en el alfabeto español. Así, si queremos utilizar la ñ en nuestros documentos HTML, lo mejor que podemos hacer es escaparla. Para ello, en vez de escribirla directamente la deberíamos de escribir de la siguiente forma:

ñ

O en mayúsculas:

Ñ

De esta forma podríamos tener textos como...

La capital de España es Madrid

...que se visualizaría de la siguiente forma:

La capital de España es Madrid

Otra opción, siempre y que podamos, es utilizar una codificación UTF-8, que nos evita estos problemas:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Similar Posts:

• Grupos de Conversación sobre Programación en Facebook
• Subindice en HTML
• Alto y ancho de una imagen con HTML
• Día W3C en España 2007
• Utilizar Placeholder con jQuery

Por defecto, cuando montamos un menú de selección en HTML vemos que podemos escoger una sola de las opciones. Veamos el código normal a la hora de construir un combo SELECT de opciones:

 
<select id="favoritos" name="favoritos" size=6>
<option value="deportes">Deportes</option>
<option value="cine">Cine</option>
<option value="teatro">Teatro</option>
<option value="fotografía">Fotografía</option>
<option value="lectura">Lectura</option>
<option value="viajes">Viajes</option>
<option value="pintura">Pintura</option>
<option value="música">Música</option>
<option value="otros">Otros</option>
</select>
 

Si queremos que el usuario pueda marcar diferentes de las opciones tendremos que hacer uso del atributo multiple dentro del SELECT. Si asignamos el valor:

multiple="multiple"

Habilitaremos la selección múltiple. Veamos como quedaría el nuevo código:

 
<select id="favoritos" name="favoritos" multiple="multiple" size=6>
<option value="deportes">Deportes</option>
<option value="cine">Cine</option>
<option value="teatro">Teatro</option>
<option value="fotografía">Fotografía</option>
<option value="lectura">Lectura</option>
<option value="viajes">Viajes</option>
<option value="pintura">Pintura</option>
<option value="música">Música</option>
<option value="otros">Otros</option>
</select>
 

Similar Posts:

• Enviar un array a una JSP
• Activar valores de un combo dinámicamente
• Listar opciones seleccionadas de un combo con jQuery
• Combos de selección
• Checkbox marcados por defecto

Aunque la W3C recomienda el uso de CSS para realizar acciones de estilo vamos a ver como poner texto en negrita con HTML.
La codificación será realmente sencilla, ya que solo necesitaremos utilizar la etiqueta B (BOLD). Esta etiqueta contendrá internamente el texto que queramos visualizar en negrita.

El código asociado sería el siguiente:

<B>Texto en negrita</B>

Algo muy sencillo y útil.
Similar Posts:

• Centrar texto con CSS en tu página web
• Subrayar texto en la web
• Convertir un fichero XML en una página web
• Botones con imagenes en XForms
• Borde con lineas discontinuas

Cuando entramos mediante nuestro navegador a una página de Internet, este suele cargar en la barra principal el título de la página web. Pero, ¿de dónde obtiene el navegador dicho título?

Pues esto es muy sencillo y es que los navegadores cargan en la barra principal el valor de la etiqueta TITLE. La etiqueta TITLE tendremos que ponerla dentro dela cabecera de nuestra página HTML. Es decir, dentro de la sección HEAD.

Veamos como quedaría ese código:

 
<html>
<head>
<title>Este es el titulo de la pagina</title>
</head>
<body>
...
</body>
</html>
 

Similar Posts:

• Obtener el titulo de la página con JavaScript
• Tooltip, texto al pasar sobre una imágen
• Ir al principio y al final de una página web
• Acceder a elementos con Prototype
• Abrir una ventana con JavaScript

Aunque al día de hoy casi todas las páginas están versadas en uno u otro lenguaje de servidor: ASP, PHP, JSP,... existe un amplio espectro de páginas desarrolladas en HTML. Casi siempre con la inestimable ayuda de un editor web. Y es que es mucha la gente, que con unos conocimientos mínimos de Internet, se lanza a este para contarle algo al ciber espacio. E incluso habrá sitios dónde podrámos insertar código HTML y que no permite utilizar otro lenguaje

Y ya puestos, y una vez que nos hemos currado una página web, nos apetece que la gente comparta con nosotros su opinión sobre la misma. O simplemente se ponga en contacto con nosotros.

Una vez en esta tesitura, lo más fácil sería poner un texto que sea un enlace (o no) con nuestra dirección de email. Aquí, le estamos dando al comunicante solo nuestra dirección y el, la utilizará para contarnos lo que quiera. Si quieres tomar esta opción léete el articulo "Propiedades de los enlaces de email" el cual te ayudará a darle más potencia a tus enlaces de email.

Pero claro, puede ser que queramos, que cuando nos escriba, rellene cierta información que con el email no sabremos nunca si nos la va a enviar o no. Para ello tenemos los formularios. Y será entonces cuando queramos que nos envíe lo relleno en el formulario.

En este punto tenemos dos opciones. O bien tiramos de algún lenguaje de servidor (para aludidos, no tiene desperdicio Mandar emails con JavaMail)

Para que el usuario nos envíe el formulario utilizando HTML solo tendremos que hacer una cosa. Poner "mailto:miusuario@miemail.com" en el campo action del formulario. Quedándonos un código HTML como este, mediante la etiqueta FORM:

<FORM action="mailto:miusuario@miemail.com">

Con esto conseguiremos que el usuario nos envíe un email con la estructura del formulario.

Una vez montando nuestro formulario veremos que si le damos a enviar el texto recibido puede ser algo como esto:

textfield=victor&textfield2=victor%40miemail.com&textarea=cojonuda

El problema es que para diferenciar las diferentes partes del mensaje, el navegador utiliza los identificadores de los campos. Es por ello que es bastante conveniente el modificarlos. Para tal fin hay que modificar el campo name de los campos del formulario. Podríamos ponerlos así:

 
<input type="text" name="nombre">
 

Ahora, la cadena recibida, sería la siguiente:

nombre=victor&email=victor%40miemail.com&opinion=cojonuda

Aunque sigue siendo una cadena críptica, es algo más clara que la anterior.

Además tenemos que tener en mente un par de cosas. La primera es que esto solo funcionará si el usuario tiene un programa de correo electrónico en su ordenador (Outlook, Outlook Express, Eudora...). Hay que tener cuidado, ya que aunque es raro que el ordenador no tenga un programa de correo electrónico, puede darse el caso.

La segunda es que aunque nosotros le hayamos puesto los campos (incluso poniendolos cómo obligatorios -podríamos usar JavaScript-), el usuario tiene la capacidad de modificar el email antes de enviarlo.

Aún con todo, esto es una buena solución para que se pongan en contacto con nosotros de forma sencilla.

Al final nos quedará el siguiente formulario:

 
<form name="form1" method="post" action="mailto:contacto@lineadecodigo.com">
<label for="nombre">Nombre: </label>
<input type="text" name="nombre" id="nombre">
<label for="email">Email: </label>
<input type="text" name="nombre" id="email">
&iquest;Qu&eacute; te pareci&oacute; la p&aacute;gina?
<textarea id="opinion" name="opinion"></textarea>
<input type="submit" name="Submit" value="Enviar">
</form>
 

Similar Posts:

• Validar que el campo es un email
• vbCrLf, Saltos de línea en una cadena
• Posicionarse en el primer elemento de un formulario
• Año bisiesto en Java
• Propiedades de enlaces de email

Si el otro día veíamos como poner un subíndice en HTML, hoy vamos a ver como poner un superindice en HTML.

Esto nos ayudará cuando en nuestras páginas web tengamos que poner cosas como

E = mc²
20 km²

o cuando tengamos que poner una referencia a pie de página..

...según lo citado en Linea de Código¹...

En este caso, para poner un superindice con HTML necesitamos del elemento SUP. Este elemento contendrá el superíndice entre una etiqueta de inicio y otra de cierre.

<sup>superindice</sup>

El código necesario para expresar lo anterior sería el siguiente:

E = mc<sup>2</sup> 
20 km<sup>2</sup>

Algo realmente útil y sencillo.Similar Posts:

• Saltos de línea en HTML
• Texto en negrita con HTML
• Escribir texto con formato en JavaScript
• Número de inicio de una lista con CSS
• Hola Mundo en ASP