Soplando al Cierzo: /Aprender HTML

Mostrando entradas con la etiqueta /Aprender HTML. Mostrar todas las entradas

viernes, 2 de febrero de 2007

Cómo hacer una tabla en html (nivel básico)

• Elementos básicos de las tablas
• Los Atributos
• Alineación de las celdas
• Anchura de la tabla y de las celdas

Elementos básicos de las tablas

• la tabla
• filas
• celdas

Generalmente las páginas web se hacen a partir de tablas para asegurar que los contenidos mantienen una estructura fija.
Las tablas están formadas por muchos elementos. La forma de diseñaras es un sistema rígido y claro que determina la tabla completamente.
Vamos a ver un ejemplo:

<table border="1"> <tr> <td>celda 1</td><td>celda 2</td> </tr> <tr> <td>celda 3</td><td>celda 4</td> </tr> </table>

Con este código lo que sale es:

celda 1	celda 2
celda 3	celda 4

Esto es una tabla muy simple.

Los elementos que encontramos en ella son:

• <table> comienzo de la tabla.

• <tr> comienza una fila (Table Row).
El fin de la fila se indica: </tr>.

• <td> significa Table Data, es una celda. Cada elemento de estos que pongamos en esa fila quedará como una nueva celda a continuación de la anterior. Indicamos el final de la celda poniendo </td>.

• </table> Final de la tabla.

Las celdas se redimensionan para adaptarse a los datos que contienen por defecto. Todas las filas de la tabla tienen que tener el mismo número de celdas a menos que se usen atributos especiales que veremos luego.

Para escribir algo en una tabla es necesario que esté en una celda ( entre el <td>, </td> correspondiente de la celda). Y la celda debe de estar en una fila (entre el <tr> y </tr> correspondiente de la fila).

Hay que tener cuidado de cerrar todas las etiquetas porque como los elementos se contienen entre sí, por ejemplo los tr contienen a los tds y así, la tabla entera puede quedar arruinada cuando un navegador intente interpretarla.

Los Atributos

• border
• align
• width
• cellpadding
• cellspacing

Los atributos más básicos que vamos a definir son:

• border el borde alrededor de la tabla y entre sus

celdas se puede fijar a cualquier valor. la mayoría de las tablas tienen el border a 0 - es decir invisible.

• align indica el alineamiento, puede ser center (centrado), left (a la izquierda) o right (a la derecha)

• width especifica la anchura, puede dares en pixels o en porcentage de la anchura de la pantalla.

Ahora vamos con dos atributos que pueden parecer la misma cosa pero no lo son: cellpadding y cellspacing.

• cellpadding is es el espacio alrededor cualquier

cosa en la celda. Por ejemplo, en la primera celda de esta tabla, el cellpadding se fija a 0, y en el segundo es 5.



<table align="center" border="0"><tbody><tr>
<th><table bg border="1" cellpadding="0" width="150">
<tbody><tr><td>cell content</td></tr></tbody></table></th>

<th><table bg border="1" cellpadding="5" width="150">
<tbody><tr><td>cell content</td></tr></tbody></table></th>
</tr></tbody></table>

Con este código lo que sale es:

celda content

Notar que en la primera celda, el contenido toca con el borde, mientras que en la otra celda se ha desplazado hacia la derecha un poco.

• cellspacing es el espacio entre las celdas.

Las celdas están separadas unas de otras por una “frontera” . Ponemos un ejemplo donde los valores son de nuevo 0 y 5:


<table align="center" border="0"><tbody><tr>
<th><table bg border="1" cellspacing="0" width="200">
<tbody><tr><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td></tr></tbody></table></th>

<th><table bgcolor="#ffffff" border="1" cellspacing="5" width="200">
<tbody><tr><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td></tr></tbody></table></th>
</tr></tbody></table>

Queda:

celda	celda
celda	celda

celda	celda
celda	celda

El valor que se fija por defecto es 2 para ambos atributos si no se realiza ningún cambio.

Alineación de las celdas

No hay porqué alinear toda la tabla homogéneamente, se puede alinear solo una fila o una celda en concreto. Simplemente hay que poner el atributo align/valign en la etiqueta de la fila o celda en cuestión. Si lo ponemos en la etiqueta de la tabla se aplicará a todas las celdas de la tabla.

• <td align="right"> para alinear en una celda (a la derecha)

• <tr align="right"> para que el alineamiento afecte e la fila entera

Además hay que notar que se puede alinear texto, imágenes o lo que sea que contenga una celda.

Podemos alinear tanto en sentido horizontal como en vertical:

• align significa alineamiento horizontal. En la primera celda vemos un

alineamiento del texto centrado, y en la segunda está alineado a la derecha.

center

right

• valign significa alineamiento vertical (Vertical Align). En la primera celda el valor del valign es bottom y en la segunda valign="top" y en la tercera esta alineada al centro de la vertical.

bottom

top

middle

El valor por defecto de align es left y el valor de valign por defecto es middle.

Anchura de la tabla y de las celdas

Se puede añadir la cualidad width en la etiqueta de la tabla o en las celdas individuales.
Podemos fijar la anchura de la tabla y las celdas bien mediante pixeles o por porcentajes.

• Si se fija la anchura para toda la tabla es mejor mantener las anchuras por debajo de 750 pixeles. Al fijar el ancho como porcentaje se toma el porcentaje de la pantalla, y no hay que olvidar el % de la marca.

• Si se fija la anchura para cada celda en particular, en este caso se podrá dar la anchura en pixels o en porcentage de la tabla a la que estas celdas pertenecen.

Normalmente las celdas se adaptan dependiendo de lo que tienen dentro, pero si se quiere se puede especificar su ancho.
Una vez que se fije el ancho de una celda, las demás se establecerán conforme al espacio restante.
Hay que recordar que una celda puede contener imágenes, texto… cualquier cosa. De esta forma una tabla puede ser usada para poner todo el contenido de una página, y usarse para dejarlo con una presentación y unas alineaciones determinadas.

jueves, 25 de enero de 2007

Como poner un vínculo para mandar un correo electrónico con html a una o varias direcciones, con título y con mensaje predefinidos

Poner un vínculo a una dirección de correo electrónico es muy simple y puede resultar muy útil. Se puede poner un vínculo que se limite a mandar el correo a una o varias direcciones determinadas, añadirle título del mail, escribir parte del cuerpo del mensaje, etc

Vamos a ver como se hace todo esto con unos ejemplos para que quede lo más claro posible.

Mandar un correo electrónico a un destinatario con un vínculo html.

Consiste en que al hacer clic sobre el vínculo se enviará un correo a la dirección que uno haya predefinido.

Lo que hay que poner es:

<a href="mailto:soplandoalcierzo@gmail.com">
EJEMPLO 1 Mail a Soplando al Cierzo</a>

Para ver como queda dale a este link:

EJEMPLO 1 Mail a Soplando al Cierzo

Mandar un correo electrónico a varios destinatarios con un vínculo html

Si quereis que al hacer clic el correo se mande a más de una persona, es posible mandar una copia a un destinatario visible (cc-Mail), o a un destinatario invisible (bcc-Mail).

<a href="mailto:soplandoalcierzo@gmail.com
?cc=otrocorreo@gmail.com">
EJEMPLO 2 Mail a Soplando al Cierzo</a>

<a href="mailto:soplandoalcierzo@gmail.com
?bcc=otrocorreo@gmail.com;yotrocorreomas@gmail.com">
EJEMPLO 3 Mail a Soplando al Cierzo </a>

Vamos a probarlo:

EJEMPLO 2 Mail a Soplando al Cierzo

EJEMPLO 3 Mail a Soplando al Cierzo

Mandar de correo electrónico con el "Subject" predefinido con un vínculo html

Si nos interesa, también podremos predefinir el título que aparezca en correo.

<a href="mailto:soplandoalcierzo@gmail.com
?subject=Te quiero mandar un saludo">
EJEMPLO 4 Mail a Soplando al Cierzo</a>

En este caso tenemos esto:

EJEMPLO 4 Mail a Soplando al Cierzo

Mandar de correo electrónico con el "Body" predefinido con un vínculo html

Y ya sólo nos falta dejar algo predefinido en el cuerpo del mensaje.
Esto es útil si quieres que los correos tengan una determinada estructura o que contengan cierta información de una determinada manera, etc.

<a href="mailto:soplandoalcierzo@gmail.com
?body=Nombre de actividad: ">
EJEMPLO 5 Mail a Soplando al Cierzo</a>

El resultado será este:

EJEMPLO 5 Mail a Soplando al Cierzo

Bueno, sobra decir que se puede combinar todo lo anterior.
Por ejemplo un vínculo a un correo con varios destinatarios, título y cuerpo del mensaje predefinidos quedaría algo así:

<a href="mailto:soplandoalcierzo@gmail.com
?cc=otrocorreo@gmail.com
&subject=Hola Ciercita
&body=Te mando un saludo">
EJEMPLO 6 Mail</a>

Que queda así:

EJEMPLO 6 Mail

Para evitar los spammers puede veniros bien echarle un ojo a este artículo:
Cómo ocultar una dirección de correo, que se pone en el mailto de un enlace, para evitar que sea detectada por los robots que buscan direcciones en webs para enviar spam:
www.desarrolloweb.com/articulos/1735.php

Y eso es todo,
un saludo.

sábado, 20 de enero de 2007

Cómo poner anclajes con HTML en tu Web

Poner anclajes o links de una palabra a otra en una página WEB es muy sencillo.

Primero se pone el "ancla" (nosotros le hemos puesto de nombre "ancla" pero se puede llamar como quieras, date cuenta que este nombre hace de identificador para el anclaje, así que cada anclaje tendrá que tener un nombre diferente):

<a name="ancla">Este es mi ancla </a>

Este es mi ancla

Luego se ponen los enlaces a nuestro ancla que estarán en cualquier parte del documento o del post:

<a href="#ancla">Enlace a ancla </a>

<a href="#ancla">Y esto también es un enlace a ancla </a>

Cuidado, porque si pongo el enlace desde otra página del blog no basta con poner el nombre del anclaje, hay que poner toda la dirección completa:

<a href="nombredelapágina.htm#ancla>Enlace a ancla desde otra página </a>

Y ya está.

....
....
....

bueno, ahora hay que probarlo...

....

....

y para eso hace falta espacio...
....

....

....

un poco más...

....

....
....

....

....

....

....

....

....

venga, un poco más...
....

....

....

ahora, dale!!!

Enlace a ancla

Y esto también es un enlace a ancla

¿funciona, no?

Bueno, una última cosa, ya sabeis, en Bloger para estas cosas mejor ni tocar la vista previa. Uno lo escribe en HTML y lo publica directamente.

jueves, 18 de enero de 2007

Poner texto deslizante con HTML

aahgggg

En Bloger no se ve el texto deslizante en la vista previa.
Edita la página en HTML, pon el texto que quieras entre las etiquetas <marquee> y </marquee>:

<marquee> aahgggg </marquee>

y a publicar.

No te preocupes que en el blog te saldrá el texto moviéndose.

miércoles, 17 de enero de 2007

Como usar los META TAGS

Los metadatos

La forma usual de insertar metadatos en el documento es por medio de la etiqueta <META> en la sección <HEAD> de la página.

<HEAD>

</HEAD>

Hoy por hoy, las metaetiquetas o meta tags no sirven de mucho. Debido al abuso que se ha hecho de ellos, cada vez son mas los buscadores que los ignoran.
El standard html define la estructura de una etiqueta META, pero no sus valores. Puedes inventarte tus propias etiquetas META pero dado que no se visualizan en el navegador, y que realmente sólo las usan los buscadores y otras herramientas informáticas que sólo procesan las etiquetas META mas difundidas, tampoco tiene mucho sentido crear tu propia metainformación, salvo para uso propio.

En un blog de Blogger como éste, se recomienda el uso de estas 3 meta etiquetas:

Pero podemos encontrar una gran variedad de META TAGS con usos muy diversos, y el uso que se haga de ellos es cosa del responsable de la edición de la página (los hay más y menos lícitos). De momento sólo vamos a explicar las meta etiquetas más conocidas con algún ejemplo para que las aprendais a usar, o si las veis para que las reconozcáis:

Keywords
Description
Author
Content-Language
Email
Copyright
Revisit
Refresh
Expires
Distribution
Robot
Rating
Character set - content-type
Pragma
Generator
Window Target
Set-cookie
Abstract
Anti smart-tags
Content-Script-Type
Comentarios
The Dublin Core
PICS

Es importante saber que los metatags funcionan declarando propiedades y valores para esas propiedades, por ejemplo la etiqueta "author" se enlaza con el nombre del autor de la página. Además podemos encontrar atributos, como lang.

Lang como atributo:
Se declara que el nombre del autor es francés:

<META name="Author" lang="fr" content="Arnaud Le Hors">

También es aplicable al idioma de los keywords, por ejemplo:

<-- US English -->
<META name="keywords" lang="en-us"
content="vacation, Greece, sunshine">
<-- British English -->
<META name="keywords" lang="en"
content="holiday, Greece, sunshine">
<-- French -->
<META name="keywords" lang="fr"
content="vacances, Grèce, soleil">

PICS Plataforma para selección de contenidos de Internet

Si os encontrais esto, no tiene nada que ver con fotos.
La PICS, Platform for Internet Content Selection, es una infraestructura para asociar las meta tags con contenidos de Internet. Se diseñó para ayudar a los padres y profesores a controlar el acceso de los niños a internet, filtrando la página con arreglo a su contenido, advirtiendo de que puede tener, por ejemplo, contenido sexual, violencia o lenguaje ofensivo aunque también tiene otros usos como privacidad, administrar derechos intelectuales de la página, etc.

Un tag de este tipo se puede hacer de una manera muy sencilla con un generador de PICS, por ejemplo, con el de:

http://vancouver-webpages.com/VWP1.0/VWP1.0.gen.html

Nosotros nos hemos hecho ésta PIC para nuestra web, diciendo que el contenido de Soplando al Cierzo es casi angelical:

<META http-equiv="PICS-Label" content='(PICS-1.1
"http://vancouver-webpages.com/VWP1.0/" l gen true comment "VWP1.0" by "micorreo@este.es"
on "2007.01.17T11:26-0800" for "http://soplandoalcierzo.blogspot.com/"
r (Gam 0 V 0 Env -2 SF 0 Com 0 Can 0 Edu -1 S 0 P 0 Tol -1 MC 0 ))'>

Vamos a ver que sale cuando decimos que somos racistas, anticulturales, con ilimitados contenidos violentos y sexuales, desfavorables al medioambiente, que incluimos palabras feas y compras y apuestas online. Etre tanta profanación, nos encontramos que hay que seleccionar cuanto contenido canadiense tiene nuestra web... no entendemos esta parte:
Category: Canadian Content
· All: All-Canadian content
· Some: Some Canadian content or production
· None: No Canadian content
¿Por qué el contenido canadiense tiene un campo propio, como el sexo y la violencia? Está claro que los maños tendremos que revindicar un campo propio también. Bueno, da igual, hemos puesto All.

He aquí nuestra nueva etiqueta PICS:

Ya veremos cual de las 2 ponemos... lo mismo ninguna.

Todo esto no es muy fiable ya que las metatags las escribe el autor de la página y como habéis visto uno pone lo que quiere o le interesa de una manera bastante simple.

Descripción de las etiquetas meta más conocidas y sus usos seguidos por un ejemplo:

Keywords
Las Keywords deben ir separadas por comas, y hay que poner primero las palabras más importantes.
Nota: Debido al abuso que se ha hecho de los meta tags, cada vez cada vez son más los buscadores que los ignoran, especialmente el de Keywords. Inktomi es el único motor de búsqueda que los usa para indexar sites y aún así le da muy poca importancia.

Content-Language con FrontPage: Cuando se modifican las propiedades de una página, FrontPage restablecerá la etiqueta META que contiene la variable de sistema content-language. Esta etiqueta no se conserva después de que realiza modificaciones en el cuadro de diálogo Propiedades de página.

Email
La dirección email de contacto.

<link rev="made" href="perico@punto.com">

Copyright
El año de copyright y el nombre del holder

<meta name="copyright" content="2002 by Miweb">

Revisit
Establece con que frecuencia pasa el spider (programa diseñado para explorar páginas web en forma automática)

<meta name="revisit-after" content="2 weeks">

Refresh
Este campo debe contener la URL a la que nos remite la página transcurridos un número específico de segundos. Se puede usar para refrescar la propia página o para redireccionar a otra diferente, aunque esto no es aconsejable ya que con estas prácticas se deja inaccesible la página para otros usuarios.

Notar que las comillas tienen que incluir los segundos y, en el caso de un redireccionamiento a otra página, también la url en cuestión.

Expires
Fecha de expiración. Indica la vigencia del documento y sirve para que el navegador no guarde una página en caché indefinidamente y se vea forzado a cargar las nuevas versiones.
La fecha debe estar necesariamente en formato RFC840 (GMT):

dia_de_Semana, DD-Mon-YY HH:MM:SS TIMEZONE(Greenwich)

Por ejemplo: Fri, 06 Aug 2008 06:25:55 GMT
Las abreviaturas de los días de la semana y los meses en inglés bajo esta notación son:

dia_de_Semana = "Mon" | "Tue" | "Wed" | "Thu" | "Fri" | "Sat" | "Sun"

Mon = "Jan" | "Feb" | "Mar" | "Apr" | "May" | "Jun" | "Jul" | "Aug" | "Sep" | "Oct" | "Nov" | "Dec"

Si la fecha está expresada en un formato distinto, el valor de expires será interpretado como now, es decir, se fija una caducidad inmediata.

Esto mismo se consigue también con el archivo robots.txt;
Esto lo explica muy bien los de ignside en su página: //www.ignside.net/man/servidores/robots.php
“Cuando un robot visita una página, por ejemplo http://www.ignside.net/, lo primero que solicita al servidor es el archivo Cuando un robot visita una página, por ejemplo http://www.ignside.net/, lo primero que solicita al servidor es el archivo http://www.ignside.net/robots.txt...” bla bla bla

Rating
Indica a que público está destinado la web.
General: para todo el mundo
14 Years: para mayores de 14 años
Mature: para adultos
Restricted: acceso restringido

<meta name="rating" content="14 years">

Character set - content-type
Con el content-type indicamos al navegador el tipo de documento que es nuestra página: si es un documento html, o un documento de texto plano.
También el set de caracteres que usamos, set character. El más común es el ISO-8859-1 La siguiente lista explica otras de las series de lenguajes que contiene el ISO 8859 y que os podréis encontrar:

ISO-8859-1 – Western Europe and Americas: Afrikaans, Basque, Catalan, Danish, Dutch, English, Faeroese, Finnish, French, Galician, German, Icelandic, Irish, Italian, Norwegian, Portuguese, Spanish and Swedish

ISO-8859-2 – Latin-written Slavic and Central European languages

ISO-8859-3 – Esperanto, Galician, Maltese, and Turkish

ISO-8859-4 – Scandinavia/Baltic

ISO-8859-5 – Cyrillic

ISO-8859-6 – Arabic

ISO-8859-7 – Modern Greek

ISO-8859-8 – Hebrew

ISO-8859-9 – Western Europe and Americas: Afrikaans, Basque, Catalan, Danish, Dutch, English, Faeroese, Finnish, French, Galician, German, Turkish, Irish, Italian, Norwegian, Portuguese, Spanish and Swedish

Pragma
Para evitar que una página se guarde en cache se ordena al navegador que no almacene una copia cache de la página. Es aconsejable su uso en páginas dinámicas cuyo contenido cambia frecuentemente. Su único valor aceptable es no-cache.

Nota: cuando se utiliza esta metaetiqueta es posible que la página web siga almacenada en caché en la carpeta Archivos temporales de Internet.
Las páginas que explora Internet Explorer no se guardan en caché mientras no se haya llenado la mitad del búfer de 64 KB. Normalmente, las metaetiquetas se insertan en la sección de encabezado de los documentos HTML, que aparece al comienzo del documento. Cuando se analiza el código HTML, se lee de arriba abajo. Al leer la metaetiqueta <HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">, Internet Explorer busca la existencia de la página en la caché justo en ese momento y si está, la elimina.
Para impedir de manera adecuada que la página Web aparezca en la caché, se recomiendan por ejemplo:

<HTML>

<HEAD>
<META HTTP-EQUIV="REFRESH" CONTENT="5">
<TITLE> Pragma No-cache </TITLE>
</HEAD>

<BODY>

Generator
Indica el programa que se ha usado para editar la página.

<meta name="generator" content="Metty Online Version 1.0">

<meta name="generator" content="HTML-Kit" />

etc...

Window Target
Indica el nombre de la frame donde la página tiene que ser cargada.

<meta http-equiv="window-target" content="_top">

Set-cookie
Mediante esta metatag podemos enviar una cookie al navegador del usuario. Si contiene fecha de expiración, el navegador la conservará en el disco duro hasta dicha fecha; en caso contrario, se borrará al terminar la sesión de navegación.

<META HTTP-EQUIV="Set-Cookie"
CONTENT="nombre_cookie=valor_cookie;expires=fecha_valor;
path=/" />

Abstract
Resume el description meta tag con unas 100 palabras.

<meta name="abstract" content="Viewpoints, Tools, and Content for Webmasters">

Anti smart-tags
Las smart-tags fueron un “invento” de microsoft que permitía alterar el contenido de una página web, insertando enlaces aqui y allá. El problema es que el autor de la página no decide donde incluye links ni hacia donde los enlaza sino la propia microsoft. Por supuesto se levantó un clamor contra la idea, que de momento está aparcada.

Comentarios
Aunque los comentarios no son metadatos, algunos morores de búsqueda los usan en vez de usar los metatags.

The Dublin Core
No queremos dejar de mencionar esta iniciativa de standards y prácticas, útil para etiquetar bibliografías y documentación electrónica.
[DCORE] website: http://purl.org/dc

para saber más sobre este tema puedes usar este LINK del World Wide Web Consortium, pero avisamos, está en inglés:

http://www.w3.org/TR/REC-html40/struct/global.html#edef-META

Esperamos que os haya ayudado esta información.

Soplando al Cierzo

viernes, 2 de febrero de 2007

Cómo hacer una tabla en html (nivel básico)

jueves, 25 de enero de 2007

Como poner un vínculo para mandar un correo electrónico con html a una o varias direcciones, con título y con mensaje predefinidos