lunes, 29 de octubre de 2012

HTML Mapas de imágenes

Cuando hablamos de mapas de imágenes, hablamos de imágenes sensibles. Estas son las que contienen zonas activas que funcionarán como enlaces.

Este tipo de mapas se pueden procesar en dos puntos, en el servidor donde tenemos alojada nuestra página, lado del servidor (ismap) o en el ordenador donde se abra la página web, lado del cliente (usemap)

Lo más común es que el procesado se realice en el lado del cliente:

En primer lugar realizamos el mapeo, definimos dicho mapa dentro de una imagen añadiendo una almohadilla delante del nombre de la siguiente manera:
<img usemap="#ejemplo" />

A continuación definimos el nombre del mapa con la etiqueta:
<map name="ejemplo">...</map>
Entre la etiqueta de apertura y la de cierre introduciremos  todas las zonas activas mediante una etiqueta por zona activa. Estas zonas activas pueden ser cuadrados, circunferencias o polígonos. Sus etiquetas en este orden serian las siguientes:

Zona rectangular desde un punto (x1,y1) al punto opuesto en su diagonal (x2,y2)
<area shape="rect" coords="x1,y1,x2,y2" href="" alt"" />

Zona circular desde un punto (x,y) tomando como radio (r)
<area shape="circle" coords="x,y,r" href="" alt"" />

Zona poligonar insertando de forma seguida todos los puntos que componen dicho polígono mediante coordenadas (x,y)
<area shape="poly" coords="x1,y1,x2,y2, ... ,xn,yn" href="" alt"" />


Un ejemplo completo sería el siguiente:
<img src="imagen.png" width="100" heigth="100" usemap="#ejemplo" />
<map name="ejemplo">
<area shape="rect" coords="10,10,40,40" href="rectangulo.html" alt"esto es un rectangulo" />
<area shape="circle" coords="80,80,2" href="circulo.html" alt"esto es un circulo" />
<area shape="poly" coords="10,45,10,60,80,60" href="poligono.html" alt"esto es un poligono" />
</map>

viernes, 26 de octubre de 2012

HTML Imagenes

Como gestionar imágenes en páginas webs

Cuando hablamos de imágenes en la web estamos hablando de hipermedia

Atributos obligatorios en XHTML 1.0
- src (ruta de la imagen)
- alt (texto que aparece cuando la imagen aún no se ha cargado o no se puede cargar)
<img src="img/imagen.gif" alt="esta es la imagen mostrada">...</img>

Atributos opcionales
- width y height (proporciona ancho y alto)
- long desc (ruta donde se proporciona una descripción larga de la imagen)
- ismap y usemap (para definir mapas de imagen)

Atributos obsoletos (desaconsejados, utilizar css en su lugar)
- align
- border
- hspace
- vspace

Queda también desaconsejado usar imagenes de fondo con
<body background="">
<table background="">
 
Se puede usar imagenes al mismo directorio y a otras páginas

Formatos de imágenes para el uso en webs (Los tres primeros son los más usuales)
jpeg
gif (incluidos animados)
png
apng (requiere Gecko 1.9.2)
svg (requiere Gecko 2.0)
bmp
bmp ico
png ico (requiere Gecko 9.0)

miércoles, 24 de octubre de 2012

HTML Enlaces o hipervinculos

Dentro del Hipertexto tenemos 3 bloques
  • Nodos o secciones
  • Anclajes
  • Enlaces, hiperenlaces o hipervínculos
Hay dos tipos de enlaces
  • Intradocumentales
  • Extradocumentales
Los enlaces intradocumentales son los enlaces a un punto dentro del mismo documento y se construyen con dos partes:
El enlace
<a href="#nombre">...</a>

El destino
<a name="#nombre">...</a> (Antiguo método)

<h1 id="#nombre">...</h1> (Actualmente)
<p id="#nombre">...</p> (Actualmente)

Es decir, primero definimos un elemento llamado "nombre" y luego agregamos los enlaces a ese elemento.
Hay que recordar que varios enlaces pueden llevar a un destino, pero no varios destinos con el mismo nombre.


Los enlaces extradocumentales son los más conocidos, son los enlaces a otras páginas webs, pero tenemos más opciones de las que quizás creamos tener.
<a href="pagina.html">...</a>
donde pagina.html es la URL(Uniform Resource Locator) de la pagina a la que queremos vincularnos.

Este código es para ir a un elemento de otra página, algo que también nos puede llegar a resultar muy útil.
<a href="pagina.html#nombre">...</a>

Por último el siguiente código nos servirá para enlazar otros servicios como el usual "mailto:pepito@ejemplo.es"
<servicio>://<usuario>:<contraseña>@<host>:<puerto>/<ruta>/recurso



lunes, 22 de octubre de 2012

HTML Tablas primera parte

Tablas en HTML

Hay muchas formas de mostrar datos en html, y aunque parecen pocas las posibilidades que nos ofrece una tabla, se le puede sacar mucho partido a la misma. Usaremos para crear una tabla la etiqueta <table></table>, dentro de esta etiqueta irá nuestro contenido.
A diferencia de lo que podemos esperar de una tabla en una hoja excel, donde trabajamos con filas y columnas, en html se trabaja con filas y celdas, es decir, no podemos definir como tal una columna, quizás con la finalidad de no complicar el código cuando queremos algo más simple.
Para insertar una fila usaremos la etiqueta <tr></tr>, iniciales de Table Row.
Para insertar una celda dentro de una fila, introducimos la etiqueta <td></td>, iniciales de Table Data cell.
La estructura tomará este aspecto (recuerdo que introducir intro entre etiquetas no influye en el aspecto final de la página facilitando considerablemente la lectura del código):

 <table>
<tr>
<td>A1</td><td>A2</td><td>A3</td>
</tr>
<tr>
<td>B1</td><td>B2</td><td>B3</td>
</tr>
<tr>
<td>C1</td><td>C2</td><td>C3</td>
</tr>
</table>

 El aspecto final quedaría de la siguiente manera:

A1A2A3
B1B2B3
C1C2C3

Como todo, las tablas en html tienen una parte sencilla y una compleja. Para añadir por ejemplo celdas de cabecera que dispongan de un estilo más acentuado usamos la etiqueta <th></th> (Table Header cell)

Podemos también agrupar filas (que no unirlas) diferenciando cabecera, cuerpo y pie de tabla, las etiquetas correspondientes serían:
<thead></thead> Cabecera
<tbody></tbody> Cuerpo
<tfoot></tfoot> Pie


<table>
<thead>
<th>A1</th><td>A2</td><td>A3</td>
</thead>
<tr>
<td>B1</td><td>B2</td><td>B3</td>
</tr>
<tr>
<td>C1</td><td>C2</td><td>C3</td>
</tr>
</table>

A1A2A3
B1B2B3
C1C2C3

Para continuar con la segunda parte de tablas clickea aquí.

sábado, 20 de octubre de 2012

HTML Caracteres primera parte

Podemos dotar a nuestra página web de una estructura bien hecha, de un estilo esquisito, y por supuesto de un contenido original y atrayente para el lector, pero todo se puede ir al traste si descuidamos los caracteres que usamos en nuestra página.

Por ejemplo, debemos saber que en el código, los espacios en blanco no son acumulables, ¿que quiere decir esto? que si yo escribo en el código una "P" diez espacios y una "L" al final obtenemos "P L" con un solo espacio.

Sin embargo, si usamos una codificación correcta, no será necesario recurrir a este engorroso sistema. No obstante, supongamos que no tenemos posibilidad de recurrir a una codificación adecuada. La única forma que tenemos para introducir espacios y caracteres en general es insertándolos mediante referencias de carácter. A esto se le llama "escapar los carácteres".

 Hay 3 formas diferentes de escaparlos:

Referencias de caracteres mediante nombre
&nombre;
  • &    &amp;
  • "     &quot;
  • '      &apos;
  • <     &lt;
  • >    &gt;
Referencias de caracteres numéricos decimales:
&#nnnn;
donde los valores pueden ser 1-9

Referencias de caracteres numéricos hexadecimales:
&#xnnnn;
&#XNNNN;
donde los valores pueden ser 1-9 y A-F

Otra forma que tenemos para tildar vocales es la siguiente:
  • ó     &oacute;

Tabla de caracteres numéricos decimales
Imagen de www.urbanchip.com


Para conocer todas las referencias de caracteres visita W3Schools
Visita también esta página con referencias en nombre, decimales y hexadecimales.

viernes, 12 de octubre de 2012

Consejos 1

Añado este consejo para toda aquella persona de naturaleza curiosa (y para la que lo será), porque hay muchas formas de aprender html.
Y es, al igual que con otras muchas cosas, investigando como han hecho los demás lo que nosotros queremos hacer, puede que otra persona tenga otra visión diferente de como hacer las cosas a la nuestra.
¿Como podemos investigarlo?
Consultando el código fuente de la página que estamos viendo.
¿Como podemos consultar el código fuente?
Daré instrucciones de como ver el código fuente en Firefox, Crome y Explorer (Aunque si sigues usando este último navegador... te queda mucho que aprender)


logo de firefox


En Mozilla Firefox:

- Usando el botón derecho sobre una zona neutra de la página que estés viendo, y haciendo click en "Ver código fuente de la página".
- Pulsando (mientras el foco no está en centrado en nada concreto) Ctrl+U
- En el menú "Herramientas/Desarrollador web/Código fuente de la página". Si tienes Windows 7 quizás tengas que pulsar alt para visualizar la barra de menú.



logo de crome


En Google Crome:

- Usando el botón derecho sobre una zona neutra de la página que estés viendo, y haciendo click en "Ver código fuente de la página".
- Pulsando (mientras el foco no está en centrado en nada concreto) Ctrl+U
- En el menú "Herramientas/Ver código fuente de la página". Si tienes Windows 7 quizás tengas que pulsar alt para visualizar la barra de menú.


logo de explorer


En Internet Explorer:

- Usando el botón derecho sobre una zona neutra de la página que estés viendo, y haciendo click en "Ver código fuente".
- En el menú "Ver/Código fuente". Si tienes Windows 7 quizás tengas que pulsar alt para visualizar la barra de menú.

miércoles, 10 de octubre de 2012

HTML Listas

Para la elaboración de listas es necesario el uso de dos etiquetas <ul> y <li>. La primera establece la estructura de lista, y la segunda contiene cada elemento de la lista.
Su estructura básica es:

<ul>
<li>
Elemento 1</li>
<li>
Elemento 2</li>
<li>
Elemento 3</li>
<li>
Elemento 4</li>
<li>
Elemento 5</li>
</ul>
 También se puede escribir todo seguido, pues no es necesario que cada elemento esté en una linea diferente, pero es recomendable para mantener un orden a la hora de elaborar la lista.

<ul><li>Elemento 1</li><li>Elemento 2</li><li>Elemento 3</li><li>Elemento 4</li><li>Elemento 5</li></ul>
Quedaría así:
  • Elemento 1
  • Elemento 2
  • Elemento 3
  • Elemento 4
  • Elemento 5

También podemos incluir una lista dentro de otra por ejemplo para formar esquemas:
<ul>
<li>
Elemento 1</li>
<ul>
<li>
Subelemento 1</li>
<li>
Subelemento 2</li>
</ul>

<li>Elemento 2</li>
<li>
Elemento 3</li>
</ul>
 Quedaría así:
  • Elemento 1
    • Subelemento 1
    • Subelemento 2
  • Elemento 2
  • Elemento 3

lunes, 8 de octubre de 2012

HTML Saltos de Linea

Para realizar saltos de linea se usa la etiqueta <br></br>, sin embargo se trata de una etiqueta especial, ya que no puede ni debe contener nada entre ambas etiquetas. Su principal cometido es establecer un salto de linea, para lo que no hace falta ninguna instrucción más.
Se suele recomendar de hecho usar exclusivamente la etiqueta <br /> que funciona por ambas etiquetas.
Ejemplo:
<p>Esto es un párrafo normal y voy a hacer dentro del él un punto y aparte.<br />Esta es la siguiente línea, pero dentro del mismo párrafo.</p>

Esto es un párrafo normal y voy a hacer dentro del él un punto y aparte.
Esta es la siguiente línea, pero dentro del mismo párrafo.

La recomendación que se hace sobre el uso de los saltos de línea es que se usen en los párrafos únicamente, ya que los elementos externos a los párrafos no necesitan de saltos de línea.

viernes, 5 de octubre de 2012

HTML Gramática

Para un correcto desarrollo de html sin errores hay que seguir las siguientes reglas gramaticales:
- Todas las etiquetas tienen que cerrarse.
- Tienen que tener un orden de apertura y cerrado, es decir, la última etiqueta que se abrió debe ser la primera en cerrarse.
-Es muy recomendable usar siempre minúsculas.
- Los atributos de las etiquetas deben ir entre comillas y estas pueden ser o simples '   ' o dobles "   ".
- Se deberían usar exclusivamente carácteres ingleses, números del 0 al 9 y los guiones normal y bajo "-" y "_".

Cuando escribimos un texto normalmente usamos diferentes recursos, estos pueden ser:
Negrita:
<strong>texto</strong>
Ejemplo:
<p>Dentro de este texto, <strong>esto está en negrita</strong></p>
Dentro de este texto, esto está en negrita
Anteriormente se usaba la etiqueta <u> pero se ha desaconsejado su uso.

Cursiva:
<em>texto</em>
Ejemplo:
<p>Dentro de este texto, <em>esto está en cursiva</em></p>
Dentro de este texto, esto está en cursiva
 Anteriormente se usaba la etiqueta <i> pero se ha desaconsejado su uso.

Tachado:
<del>texto</del>
Ejemplo:
<p>Dentro de este texto, <del>esto está tachado</del></p>
Dentro de este texto, esto está tachado
 Anteriormente se usaba la etiqueta <s> pero se ha desaconsejado su uso.

La etiqueta para subrayado era <u> ya que se ha desaconsejado su uso, el principal motivo es que cuando llegue html 5 se modificará su uso.

jueves, 4 de octubre de 2012

HTML Estructuras principales

Una página web debe estar bien estructurada, para ello, HTML dispone de determinadas etiquetas para realizarlo todo correctamente.

<html>
     <head>
          <title>Título de la web</title>
          Contenido no visible
     </head>
     <body>
          <h1>Contenido visible</h1>
          <p>Aqui va el texto que formará el párrafo</p>
     </body>
</html>

Comenzando por la etiqueta <html> es la etiqueta principal que abre la página web y define que lo que haya entre esta etiqueta de apertura y la correspondiente de cierre está escrito en lenguaje HTML. Es decir, todo debe ir dentro de esta etiqueta.

En el siguiente nivel tenemos dos etiquetas <head><body>
En <head> va contenida toda la información referente a la web que no va a mostrarse en el navegador que usemos, sino que sirve digamos como almacén de información.
Sin embargo en <body> es donde debe ir todo el contenido visible de la web mediante párrafos que comentaré otro dia.

La etiqueta <title> es una etiqueta especial, ya que es obligatoria y debe ir siempre dentro de <head>. En esta etiqueta ponemos el nómbre de la web. No obstante, este nombre no aparecerá en la web como tal, sino en el rótulo del navegador.

Dentro de <body> podemos usar títulos en una clasificación de 6 niveles y representados por:
<h1>Nivel 1</h1>
<h2>Nivel 2</h2>
<h3>Nivel 3</h3>
<h4>Nivel 4</h4>
<h5>Nivel 5</h5>
<h6>Nivel 6</h6>

siendo <h1> el título con mayor importancia.

El resto de contenido se introduce dentro de uno o varios parrafos, y para definir un párrafo usamos la etiqueta <p>
<p>Aqui escribo un parrafo</p><p>Lo que estoy escribiendo aqui es otro parrafo aunque lo escriba a continuación del anterior</p>

Existen muchas más etiquetas, pero estas son las más básicas, el resto ya las iré explicando.

miércoles, 3 de octubre de 2012

HTML Introducción

HTML (HyperText Markup Language) es un lenguaje de marcado que se usó por primera vez en 1991 de manos de su desarrollador Tim Berners-Lee.
Es el lenguaje base usado para diseñar páginas webs. Es por tanto el lenguaje que le aporta estructura y contenido a una web, no asi el estilo que irá ligado a otros lenguajes del desarrollo web.

HTML está desarrollado y controlado por el World Wide Web Consortium (W3C) disponiendo actualmente de la versión HTML4 a la espera de HTML5 en el año 2014.

Aunque dispongo de versiones de Eclipse y Code::blocks de haber programado en C++ y Python, voy a usar un entorno de programación más sencillo con tal de romper con mi idea de "Ya que empiezo, empiezo con lo mejor de lo mejor". Siempre sucede que te pierdes en un mar de opciones que no hacen más que liarte. Es por eso que usaré Notepad++ que es una aplicación libiana, gratuita y suficientemente potente.

HTML funciona mediante etiquetas entre signos de menor que y mayor que "<etiqueta>"
En la gramática de HTML siempre hay que usar una etiqueta de inicio y una de fin enmarcando entre ambas el contenido y definiendo dentro de la etiqueta de inicio además de la etiqueta en si, el atributo y el valor correspondiente al atributo (siempre entre comillas dobles"_" o simples '_'), tal y como se muestra en la imagen.
La estructura de una etiqueta quedaría de la siguiente forma:

Existe también un orden de apertura y cerrado. "La última etiqueta que se abrió, debe ser la primera en cerrarse".

Es muy recomendable aunque no obligatorio escribir las etiquetas siempre en minúscula, y hay que usar dentro de las mismas carácteres comprendidos en A-Z, a-z,0-9,- y_