El post que buscas se encuentra eliminado, pero este también te puede interesar

"manual practico de HTML"

(Click Encima De La Imagen Para Ir A La Comunidad)
"manual practico de HTML"


manual


QUÉ ES HTML

Las primeras cosas que debes saber sobre HTML: historia, objetivos y demás conocimientos donde sentar las bases del manual.
HTML es el lenguaje con el que se escriben las páginas web. Las páginas web pueden ser vistas por el usuario mediante un tipo de aplicación llamada navegador. Podemos decir por lo tanto que el HTML es el lenguaje usado por los navegadores para mostrar las páginas webs al usuario, siendo hoy en día la interface más extendida en la red.

Este lenguaje nos permite aglutinar textos, sonidos e imágenes y combinarlos a nuestro gusto. Además, y es aquí donde reside su ventaja con respecto a libros o revistas, el HTML nos permite la introducción de referencias a otras páginas por medio de los enlaces hipertexto.

El HTML se creó en un principio con objetivos divulgativos. No se pensó que la web llegara a ser un área de ocio con carácter multimedia, de modo que, el HTML se creó sin dar respuesta a todos los posibles usos que se le iba a dar y a todos los colectivos de gente que lo utilizarían en un futuro. Sin embargo, pese a esta deficiente planificación, si que se han ido incorporando modificaciones con el tiempo, estos son los estándares del HTML. Numerosos estándares se han presentado ya. El HTML 4.01 es el último estándar a septiembre de 2001.

Esta evolución tan anárquica del HTML ha supuesto toda una seria de inconvenientes y deficiencias que han debido ser superados con la introducción de otras tecnologías accesorias capaces de organizar, optimizar y automatizar el funcionamiento de las webs. Ejemplos que pueden sonaros son las CSS, JavaScript u otros. Veremos más adelante en qué consisten algunas de ellas.

Otros de los problemás que han acompañado al HTML es la diversidad de navegadores presentes en el mercado los cuales no son capaces de interpretar un mismo código de una manera unificada. Esto obliga al webmáster a, una vez creada su página, comprobar que esta puede ser leída satisfactoriamente por todos los navegadores, o al menos, los más utilizados.

Además del navegador necesario para ver los resultados de nuestro trabajo, necesitamos evidentemente otra herramienta capaz de crear la página en si. Un archivo HTML (una página) no es más que un texto. Es por ello que para programar en HTML necesitamos un editor de textos.

Es recomendable usar el Bloc de notas que viene con windows, u otro editor de textos sencillo. Hay que tener cuidado con algunos editores más complejos como Wordpad o Microsoft Word, pues colocan su propio código especial al guardar las páginas y HTML es únicamente texto plano, con lo que podremos tener problemas.

Existen otro tipo de editores específicos para la creación de páginas web los cuales ofrecen muchas facilidades que nos permiten aumentar nuestra productividad. No obstante, es aconsejable en un principio utilizar una herramienta lo más sencilla posible para poder prestar la máxima atención a nuestro código y familiarizarnos lo antes posible con él. Siempre tendremos tiempo más delante de pasarnos a editores más versátiles con la consiguiente ganancia de tiempo.

Es importante tener claro todo ello puesto que en función de vuestros objetivos puede que, más que aprender HTML, resulte más interesante aprender el uso de una aplicación para la creación de páginas.

Así pues, una página es un archivo donde está contenido el código HTML en forma de texto. Estos archivos tienen extensión .html o .htm (es indiferente cuál utilizar). De modo que cuando programemos en HTML lo haremos con un editor de textos y guardaremos nuestros trabajos con extensión .html, por ejemplo mipágina.html

Consejo: Utiliza siempre la misma extensión en tus archivos HTML. Eso evitará que te confundas al escribir los nombres de tus archivos unas veces con .htm y otras con .html. Si trabajas con un equipo en un proyecto todavía más importante que os pongáis todos de acuerdo en la extensión.



CÓMO ESPECIFICAR EFECTOS DEL TEXTO

La mayoría de los efectos se especifican de la misma forma: rodeando el texto que se quiere marcar entre dos etiquetas o directivas (tags, en inglés), que definen el efecto o unidad lógica que se desea. Las etiquetas están formadas por determinados códigos metidos entre los signos < y >, y con la barra / cuando se trata de la segunda etiqueta de un efecto (la de cierre). Por ejemplo: <efecto> para abrir y </efecto> para cerrar. Ciertas directivas sólo se ponen una vez en el lugar del texto donde queramos que aparezca el efecto concreto. Esto es lo que ocurre, por ejemplo, cuando queremos poner un gráfico, caso en el que se usa algo parecido a <poner_gráfico_aquí> (más adelante ya veremos la directiva concreta que se utiliza).
A veces es necesario ofrecer datos adicionales en una directiva. Por ejemplo, cuando se define un hiperenlace hay que especificar su destino. Para ello se incluyen parámetros en la directiva inicial (la de apertura), de la siguiente forma: <efecto parametro1 parametro2 ...>. La directiva de cierre, caso de ser necesaria, queda como antes: </efecto>.

Más adelante en el presente documento se muestra el efecto de las directivas más usadas en la creación de un documento HTML. Para cada una de ellas, primero se muestra el texto fuente, y bajo éste, el efecto que produce.

ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML

Un documento HTML comienza con la etiqueta <html>, y termina con </html>. Dentro del documento (entre las etiquetas de principio y fin de html), hay dos zonas bien diferenciadas: el encabezamiento, delimitado por <head> y </head>, que sirve para definir diversos valores válidos en todo el documento; y el cuerpo, delimitado por <body> y </body>, donde reside la información del documento.
La única utilidad del encabezamiento en la que nos detendremos es la directiva <title>, que permite especificar el título de un documento HTML. Este título no forma parte del documento en sí: no aparece, por ejemplo, al principio del documento una vez que este se presenta con un programa adecuado, sino que suele servir como título de la ventana del programa que nos la muestra. Por ejemplo, en el encabezamiento de este manual se ha especificado:

<title>Manual práctico de HTML</title>
en minúsculas. Obsérverse que el título que encabeza este texto se ha escrito con mayúsculas, para distinguirlo del título global del documento.
El cuerpo de un documento HTML contiene el texto que, con la presentación y los efectos que se decidan, se presentará ante el hiperlector. Dentro del cuerpo son aplicables todos los efectos que se van a mencionar en el resto de esta guía. Dichos efectos se especifican exclusivamente a través de directivas. Esto quiere decir que los espacios, tabulaciones y retornos de carro que se introduzcan en el fichero fuente no tienen ningún efecto a la hora de la presentación final del documento. Por ejemplo, escribiendo:

Estas
palabras
forman una
frase.
producimos exactamente lo mismo que con:
Estas palabras forman una frase.
A la hora de la verdad lo que se ve es:
Estas palabras forman una frase.

En resumen, la estructura básica de un documento HTML queda de la forma siguiente:

<html>
<head>
<title>Título</title>
</head>
<body>
Texto del documento, menciones a gráficos, enlaces, etc.
</body>
</html>
ESTILOS Y EFECTOS BÁSICOS

Como ya hemos dicho, la estructura lógica del texto y los diferentes efectos que se le apliquen se especifican mediante directivas. En este punto vamos a repasar algunas de las más importantes. En cada uno de los casos que veremos, primero se presenta el texto original HTML, es decir, lo que nosotros editamos, con las directivas situadas en los lugares adecuados; y después se presenta el efecto que dicho texto fuente produce una vez que se interpreta y se representa con el programa adecuado.
TÍTULOS

Mediante los títulos, en sus diferentes niveles de importancia, podemos definir el esqueleto del documento, su estructura básica.
<h1>Mucha importancia</h1>
Mucha importancia

<h2>Menos importancia</h2>
Menos importancia

<h3>Mucha menos importancia</h3>
Mucha menos importancia

ATRIBUTOS DEL TEXTO

Mediante estos atributos determinamos el estilo y el tipo de letra que tendrá la presentación del documento final.
El primero en el que nos deberíamos detener es el texto normal entendiendo como tal el que no tiene ninguna característica especial. Para definir un párrafo como normal no es necesario poner ninguna etiqueta. Lo único que hay que tener en cuenta, como ya se ha dicho antes, es que al presentar el documento se hace caso omiso de los espacios, tabulaciones y retornos de carro que se encuentren en el texto fuente. Por ello cuando se quiera forzar un final de línea es necesario utilizar dos directivas especiales: <p> para marcar un fin de párrafo, y <br> para un único retorno de carro. La diferencia entre ambas es que la separación de líneas que provoca <p> es algo mayor que la de <br>, para que los párrafos se distingan bien entre sí. Las dos directivas mencionadas se sitúan en el punto en que queremos poner la separación. Por ejemplo:

Este será un texto normal (párrafo 1, línea 1).<br>
El primer párrafo estará formado por 2 líneas (párrafo 1, línea 2).<p>
Este ya es el segundo párrafo (párrafo 2, línea 1).<p>
Este será un texto normal (párrafo 1, línea 1).
El primer párrafo estará formado por 2 líneas (párrafo 1, línea 2).
Este ya es el segundo párrafo (párrafo 2, línea 1).

Por supuesto, estas dos etiquetas se puede aplicar donde queramos, no sólo en el texto normal.

El texto preformateado (etiqueta <pre> se aplica cuando queremos que en la presentación final del documento se respeten los espacios y retornos de carro que hayamos puesto en el texto fuente. Además se utilizará un tipo de letra de espaciado fijo, parecido al de una máquina de escribir, más pequeño que el del texto normal. Este estilo de texto puede ser adecuado, por ejemplo, para una tabla numérica sencilla:

<pre>
Texto preformateado
---------------------
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
---------------------
</pre>
Texto preformateado
---------------------
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
---------------------
Para hacer una cita textual dentro de nuestro documento, se puede utilizar la directiva <blockquote>:

<blockquote>Muchos años después, frente al pelotón de fusilamiento,
el coronel Aureliano Buendía había de recordar aquella tarde remota
en que su padre lo llevó a conocer el hielo.<br>
(Gabriel García Márquez, Cien años de soledad)</blockquote>
Muchos años después, frente al pelotón de fusilamiento, el coronel Aureliano Buendía había de recordar aquella tarde remota en que su padre lo llevó a conocer el hielo.
(Gabriel García Márquez, Cien años de soledad)
Las direcciones de correo electrónico se suelen marcar con esta directiva:

<address>Dirección: webmaster@etsit.upm.es</address>
Dirección: webmaster@etsit.upm.es
Se pueden dar también los atributos más tradicionales: negrita y cursiva:

<b>Esto en negrita</b> y <i>esto en cursiva</i>
Esto en negrita y esto en cursiva
Se puede utilizar un tipo de letra similar al de una máquina de escribir:

<tt>Máquina de escribir</tt>
Máquina de escribir
Para centrar texto (o, en general, cualquier cosa: un gráfico, por ejemplo) se usa la directiva <center>:

<center>Verde que te quiero verde</center>
Verde que te quiero verde

LISTAS

Las listas se definen de forma muy sencilla: se dice dónde empieza la lista, dónde empieza cada punto y dónde acaba la lista. Las etiquetas que se utilicen en cada caso deben aparecer al principio de línea, o al menos sin texto por delante (sólo espacios o tabulaciones).
Podemos recurrir a tres tipos distintos de listas, cada una con una presentación diferente: no numeradas, numeradas y listas de definiciones (glosarios).

Las listas se pueden anidar, es decir, en el lugar donde debería ir uno de los términos de la lista se pone una nueva lista, que por supuesto no tiene porqué ser del mismo tipo.

Esto es una lista no numerada:

<ul>
<li>Tomates
<li>Zanahorias
<li>Puerros
</ul>
Tomates
Zanahorias
Puerros
Esto una lista numerada:

<ol>
<li>Miguel Induráin
<li>Tony Rominger
<li>Eugeni Berzin
</ol>
Miguel Induráin
Tony Rominger
Eugeni Berzin
Un glosario está formado por una serie de parejas de término (marcado con <dt> al principio de línea) y definición (con <dd>. Por ejemplo, podríamos crear un pequeño diccionario con los términos perro, gato y pescadilla, de la siguiente manera:

<dl>
<dt>Perro (<i>n. masc.</i>
<dd>Animal de cuatro patas que ladra.
<dt>Gato (<i>n. masc.</i>
<dd>Animal de cuatro patas que maúlla y se lleva muy mal con el perro.
<dt>Pescadilla (<i>n. fem.</i>
<dd>Animal que vive en el mar y está recubierto de escamas.
</dl>
Perro (n. masc.)
Animal de cuatro patas que ladra.
Gato (n. masc.)
Animal de cuatro patas que maúlla y se lleva muy mal con el perro.
Pescadilla (n. fem.)
Animal que vive en el mar y está recubierto de escamas.
VARIOS

La directiva <hr> sitúa en el documento una línea horizontal de separación. En este documento, por ejemplo, se han utilizado líneas horizontales para separar las diferentes secciones:
<hr>
Para poner un comentario en un documento HTML, es decir, una aclaración que no aparece en la presentación final del documento, se encierra el texto que formará el comentario entre los símbolos <!-- y -->. Por ejemplo, un caso típico podría ser:

<!-- Modificado por Álvaro el viernes 2 de junio -->
ENLACES Y GRÁFICOS

INTRODUCCIÓN

Además de los muchos estilos y capacidades de presentación que nos ofrece HTML para estructurar el documento en sí, disponemos de varias directivas que nos permiten definir relaciones entre diferentes documentos y estructurar todo un conjunto de documentos para crear una unidad lógica. La facilidad para definir este tipo de enlaces es una de las razones de la potencia y versatilidad de HTML. Por la similitud de tratamiento que tienen los enlaces y los gráficos, tocaremos también en esta sección cómo pueden incluirse estos últimos en un documento.
Los enlaces en HTML se expresan rodeando con la directiva <a> el objeto (que puede ser un fragmento de texto o un gráfico) que vaya a servir como anclaje para el enlace. Por ejemplo, si marcamos con <a> un gráfico, cuando en el documento final se pulse con el ratón sobre dicho gráfico saltaremos al objeto referenciado en el enlace: otro documento, un vídeo musical, o un servidor de información meteorológica.

QUÉ ES UN URL

Para especificar de manera uniforme el objeto al que apunta nuestro enlace, se utiliza una forma estandarizada que se denomina URL (Uniform Resource Locator, es decir, Localizador Uniforme de Recursos ). Un URL está formado de la siguiente manera: esquema://maquina/ruta (en realidad, como se verá dentro de un momento, la barra / puede considerarse parte de la ruta).
El esquema es un nombre que identifica el tipo de servicio que va a proporcionarse en el destino del enlace. La razón de esta aparente complicación es que el WWW pretende unificar el acceso a servicios de información que previamente eran incompatibles entre sí, como ftp, gopher o telnet. El esquema más utilizado es http, correspondiente al propio WWW (es decir, que cualquier referencia a un documento HTML debería comenzar con http://). Otros esquemas muy frecuentes son ftp, telnet, gopher o wais.

La máquina y la ruta sirven para localizar el objeto al que apunta nuestro enlace. La máquina es la identificación del servidor en el cual está situado el objeto al que apunta el enlace. Puede ser simplemente el nombre de un ordenador (como www.etsit.upm.es) o también un nombre y un puerto (por ejemplo www.etsit.upm.es:8000).

La ruta es el nombre del fichero que contiene el documento en concreto, incluyendo el nombre del subdirectorio en el que se encuentra. Los diferentes nombres que constituyan la ruta completa al archivo se deben separar con la barra / (inclinada hacia la derecha), tal y como se hace en el sistema operativo UNIX (y al revés que en MS-DOS). La razón de este convenio es precisamente que la mayor parte de los servidores de WWW que hay en Internet son ordenadores basados en UNIX, debido a la gran superioridad tecnológica de este sistema sobre MS-DOS. Esto se nota también en que por lo general los nombres de los ficheros no tienen muchas limitaciones: pueden ser casi tan largos como queramos, contener varios puntos, etc. Por ejemplo, el nombre de cierto fichero situado en un servidor podría ser /info/documentos/ciencia/fisica/relatividad.html. Debemos tener en cuenta que en UNIX las mayúsculas y las minúsculas son distintas en los nombres de los ficheros: no es igual FICHERO que fichero.

Conviene que nos detengamos momentáneamente en la estructuración habitual de los ficheros en un servidor de WWW. Para empezar, siempre hay una página de bienvenida (home page) que podría compararse con la portada de un periódico o revista: si no sabemos exactamente qué es lo que buscamos, o no sabemos dónde encontrarlo, la portada es lo primero que vemos. Para acceder a la home page de cualquier servidor de WWW, basta con escribir una barra en el lugar de la ruta (es decir, reclamamos al servidor el directorio raíz). Por ejemplo, para acceder a la página de bienvenida de la ETSIT, hay que dirigirse a http://www.etsit.upm.es/, y para ir a la de la NASA habría que contactar con http://www.nasa.gov/.

El resto de la información que se puede encontrar en un servidor de WWW se distribuye a partir de ese directorio raíz en distintos subdirectorios y archivos. Un convenio muy habitual relativo al nombre de los ficheros es hacer que los archivos que contengan documentos HTML terminen en .html.

Bueno a hora Vamos a ver cómo se hace una página muy sencilla en HTML, que sirva de práctica a los debutantes.


Podemos ya con estos conocimientos, y alguno que otro más, crear nuestra primera página. Para ello, abre tu editor de textos y copia y pega el siguiente texto en un nuevo documento.

<html>

<head>
<title>Cocina Para Todos</title>
</head>

<body>
<p><b>Bienvenido,</b></p>
<p>Estás en la página <b>Comida para Todos</b>.</p>
<p>Aquí aprenderás recetas fáciles y deliciosas.</p>
</body>

</html>

Ahora guarda ese archivo con extensión .html o .htm en tu disco duro. Para ello accedemos al menú Archivo y seleccionamos la opción Guardar como. En la ventana elegimos el directorio donde deseamos guardarlo y colocaremos su nombre, por ejemplo mi_pagina.html

Consejo: Utiliza nombres en tus archivos que tengan algunas normas básicas para ahorrarte disgustos y lios.

Nuestro consejo es que no utilices acentos ni espacios ni otros caracteres raros. También te ayudará escribir siempre las letras en minúsculas.

Esto no quiere decir que debes hacer nombres de archivos cortos, es mejor hacerlos descriptivos para que te aclaren lo que hay dentro. Algún caracter como el guión "-" o el guión bajo "_" te puede ayudar a separar las palabras. Por ejemplo quienes_somos.html


Con el documento HTML creado, podemos ver el resultado obtenido a partir de un navegador. Es conveniente, llegado a este punto, hacer hincapié en el hecho de que no todos los navegadores son idénticos. Desgraciadamente, los resultados de nuestro código pueden cambiar de uno a otro por lo que resulta aconsejable visualizar la página en varios. Generalmente se usan Internet Explorer y Netscape como referencias ya que son los más extendidos.

A decir verdad, en el momento que estas líneas son escritas, Internet Explorer acapara la inmensa mayoría de usuarios (90% más o menos) y Netscape esta relegado a un segundo plano. Esto no quiere decir que lo debemos dejar totalmente de lado ya que el 10% de visitas que puede proporcionarnos puede resultar muy importante para nosotros. Por otra parte, parece que se ha hecho publica la intención de Netscape de desviar un poco su temática de negocios hacia otros derroteros y abandonar esta llamada "lucha de navegadores" en la cual estaba recibiendo la peor parte.

Pues bien, volviendo al tema, una vez creado el archivo .html o .htm, podemos visualizar el resultado de nuestra labor abriendo dicha página con un navegador. Para hacerlo, la forma resulta diferente dependiendo del navegador:

Si estamos empleando el Explorer, hemos de ir al barra de menú, elegir Archivo y seleccionar Abrir. Una ventana se abrirá. Pulsamos sobre el botón Examinar y accederemos a una ventana a partir de la cual podremos movernos por el interior de nuestro disco duro hasta dar con el archivo que deseamos abrir.

La cosa no resulta más difícil para Netscape. En este caso, nos dirigimos también a la barra de menú principal y elegimos File y a continuación Open File. La misma ventana de búsqueda nos permitirá escudriñar el contenido de nuestro PC hasta dar con el archivo buscado.

Nota: También puedes abrir el archivo si accedes al directorio donde lo guardaste. En él podrás encontrar tu archivo HTML y verás que tiene como icono el logotipo de Netscape o el de Internet Explorer. Para abrirlo simplemente hacemos un doble click sobre él.

Fijaos en la parte superior izquierda de la ventana del navegador. Podréis comprobar la presencia del texto delimitado por la etiqueta <title>. Esta es una de las funciones de esta etiqueta, cuyo principal cometido es el de servir de referencia en los motores de búsqueda como Altavista o Yahoo.

infohtml]


Por otro lado, los elementos que colocamos entre la etiqueta <body> y </body> se pueden ver en el espacio reservado para el cuerpo de la página.

Se puede ver la página del ejemplo en funcionamiento aquí. http://www.desarrolloweb.com/articulos/ejemplos/html/pagina1.html

Si ahora hacéis click con el botón derecho sobre la página y elegís Ver código fuente (o View page source) veréis como en una ventana accesoria aparece el código de nuestra página. Este recurso es de extremada importancia ya que nos permite ver el tipo de técnicas empleadas por otros para la confección de sus páginas.

Con todo esto asimilado ya estamos en condiciones de adentrarnos un poco más en la descripción de algunas de las etiquetas más empleadas del HTML.

Posible problema: Al utilizar el Block de Notas en Windows en ocasiones, aunque le digamos que es un archivo .html, el documento se guarda como si fuera un texto y no una página web. Lo que está pasando es que el Block de Notas tiene predeterminado guardar sus archivos con extensión .txt y en realidad lo que está guardando en el disco duro es mi_pagina.html.txt

Para conseguir tener el control de las extensiones en el block de notas y en Windows en general podemos acceder a MI-PC y en el menú de Ver seleccionáis "Opciones de carpeta". En la ventana que sale pulsamos en la solapa "Ver" y nos permite deseleccionar una caja de selección que pone algo como "Ocultar extensiones para los tipos de archivos conocidos". (Así se hace en Win98, puede variar un poco en otras versiones de Windows.)

Con ello conseguiremos que se vea siempre la extensión del archivo con el que estamos trabajando y que el Block de Notas nos haga caso cuando le indicamos que grabe el archivo con otra extensión que no sea .txt



Cómo colocar párrafos y saltos de línea en páginas web. También vemos los encabezados como párrafos que sirven de titulo.

En los capítulos anteriores hemos presentado a titulo de ejemplo algunas etiquetas que permiten dar formato a nuestro texto. En este capitulo veremos con más detalle las más ampliamente utilizadas y ejemplificaremos algunas de ellas posteriormente.

Formatear un texto pasa por tareas tan evidentes como definir los párrafos, justificarlos, introducir viñetas, numeraciones o bien poner en negrita, itálica...

Hemos visto que para definir los párrafos nos servimos de la etiqueta <p> que introduce un salto y deja una línea en blanco antes de continuar con el resto del documento.

Podemos también usar la etiqueta <br>, de la cual no existe su cierre correspondiente (</br>, para realizar un simple retorno de carro con lo que no dejamos una línea en blanco sino que solo cambiamos de línea.

Nota: Existen otras etiquetas que no tienen su correspondiente de cierre, como <img> para las imágenes, las veremos más adelante. Esto ocurre porque un salto de línea o una imagen no empiezan y acaban más adelante sino que sólo tienen presencia en un lugar puntual.


Podéis comprobar que cambiar de línea en nuestro documento HTML sin introducir alguna de estas u otras etiquetas no implica en absoluto un cambio de línea en la página visualizada. En realidad el navegador introducirá el texto y no cambiara de línea a no ser que esta llegue a su fin o bien lo especifiquemos con la etiqueta correspondiente.

Los párrafos delimitados por etiquetas <p> pueden ser fácilmente justificados a la izquierda, centro o derecha especificando dicha justificación en el interior de la etiqueta por medio de un atributo align. Un atributo no es más que un parámetro incluido en el interior de la etiqueta que ayuda a definir el funcionamiento de la etiqueta de una forma más personal. Veremos a lo largo de este manual cantidad de atributos muy útiles para todo tipo de etiquetas.

Así, si deseásemos introducir un texto alineado a la izquierda escribiríamos:

<p align="left">Texto alineado a la izquierda</p>

El resultado seria:
Texto alineado a la izquierda


Para una justificación al centro:

<p align="center">Texto alineado al centro</p>

que daría:
Texto alineado al centro


Para justificar a la derecha:

<p align="right">Texto alineado a la derecha</p>

cuyo efecto seria:

Texto alineado a la derecha


Como veis, en cada caso el atributo align toma determinados valores que son escritos entre comillas. En algunas ocasiones necesitamos especificar algunos atributos para el correcto funcionamiento de la etiqueta. En otros casos, el propio navegador toma un valor definido por defecto. Para el caso de align, el valor por defecto es left.

Nota: Los atributos tienen sus valores indicados entre comillas (", pero si no los indicamos entre comillas también funcionará en la mayoría de los casos. Sin embargo, es aconsejable que pongamos siempre las comillas para acostumbrarnos a utilizarlas, por dar homogeneidad a nuestros códigos y para evitar errores futuros en sistemas más quisquillosos.


El atributo align no es exclusivo de la etiqueta <p>. Otras etiquetas muy comunes, que veremos más adelante, entre las cuales se introducen texto o imágenes, suelen hacer uso de este atributo de una forma habitual.

Imaginemos un texto relativamente largo donde todos los párrafos están alineados a la izquierda (por ejemplo). Una forma de simplificar nuestro código y de evitar introducir continuamente el atributo align sobre cada una de nuestras etiquetas es utilizando la etiqueta <div>.

Esta etiqueta por si sola no sirve para nada. Tiene que estar acompañada del atributo align y lo que nos permite es alinear cualquier elemento (párrafo o imagen) de la manera que nosotros deseemos.

Así, el código:

<p align="left">Parrafo1</p>
<p align="left"> Parrafo3</p>
<p align="left"> Parrafo2</p>

es equivalente a:

<div align="left">
<p>Parrafo1</p>
<p>Parrafo2</p>
<p>Parrafo3</p>
</div>

Como hemos visto, la etiqueta <div> marca divisiones en las que definimos un mismo tipo de alineado.

Ejemplo práctico:

Para practicar un poco lo que acabamos de ver vamos a proponer un ejercicio que podéis resolver en vuestros ordenadores. Simplemente queremos construir una página que tenga, por este orden:

2 Párrafos centrados
3 Párrafos alineados a la derecha
Un salto de línea triple
1 párrafo alineado a la izquierda

No vamos a escribir en esta ocasión el código fuente del ejercicio. Podemos verlo en funcionamiento en nuestro navegador y en la ventana podemos obtener el código fuente seleccionando en el menú Ver la opción Código fuente.

Ver el ejercicio en marcha.
http://www.desarrolloweb.com/articulos/ejemplos/html/ejemplo2.html

Encabezados

Existen otras etiquetas para definir párrafos especiales, formateados como títulos. Son los encabezados o Header en inglés. Como decimos, son etiquetas que formatean el texto como un titular, para lo cual asignan un tamaño mayor de letra y colocan el texto en negrita.

Hay varios tipos de encabezados, que se diferencian en el tamaño de la letra que utilizan. La etiqueta en concreto es la <h1>, para los encabezados más grandes, <h2> para los de segundo nivel y así hasta <h6> que es el encabezado más pequeño.

Los encabezados implican también una separación en párrafos, así que todo lo que escribamos dentro de <h1> y </h1> (o cualquier otro encabezado) se colocará en un párrafo independiente.

Podemos ver cómo se presentan algunos encabezados a continuación.

<h1>Encabezado de nivel 1</h1>

Se verá de esta manera en la página:
Encabezado de nivel 1
Los encabezados, como otras etiquetas de HTML, soportan el atributo align. Vemos un ejemplo de encabezado de nivel 2 alineado al centro.

<h2 align="center">Encabezado de nivel 2</h2>

Se verá de esta manera en la página:
Encabezado de nivel 2

Otro ejercicio interesante es construir una página web que contenga todos los encabezados posibles. Se puede ver a continuación.

<html>

<head>
<title>Todos los encabezados</title>
</head>

<body>

<h1>Encabezado de nivel 1</h1>
<h2>Encabezado de nivel 2</h2>
<h3>Encabezado de nivel 3</h3>
<h4>Encabezado de nivel 4</h4>
<h5>Encabezado de nivel 5</h5>
<h6>Encabezado de nivel 6</h6>

</body>

</html>

Se puede ver el ejercicio en una página aparte.
http://www.desarrolloweb.com/articulos/ejemplos/html/ejemplo_header.html

Consejo: No debemos utilizar las etiquetas de encabezado para formatear el texto, es decir, si queremos colocar un tipo de letra más grande y en negrita debemos utilizar las etiquetas que existen para ello (que veremos en seguida). Los encabezados son para colocar titulares en páginas web y es el navegador el responsable de formatear el texto de manera que parezca un titular. Cada navegador, pues, puede formatear el texto a su gusto con tal de que parezca un titular.



Y bueno por ultimo los significados de los tag y para que sirven

Cabecera (HEAD) de un documento HTML

La HEAD es la primera de las dos partes en que se estructura un documento HTML.
En la HEAD reside información acerca del documento, y generalmente no se ve cuando se navega por él. En la HEAD se pone el elemento lleno <TITLE> que es una breve descripción que identifica la página. Es lo que el navegador se guarda en el "Bookmarks" (libro de marcas o libro de direcciones), con lo que crea la lista que aparece en la orden "Go" de la barra de órdenes, lo que aparece en la esquina superior izquierda cuando se imprime el documento, y lo que aparece en el marco de la ventana del navegador. También lo guarda en su caché, y servirá para mostrar la página, cuando sea llamada otra vez, sin necesidad de conectarse de nuevo al servidor de origen.

No hay que confundir el elemento <TITLE> con el nombre del fichero.
Por ejemplo, esta página está contenida en un fichero llamado head.htm y el texto de su <TITLE> es: Head de un documento. Se escibirá asi:

<HEAD>
<TITLE>Head de un documento </TITLE>
</HEAD>
Dentro de la HEAD puede utilizarse otro elemento: META. Por ejemplo, si se escribe:

<HEAD>
<TITLE>Head de un documento </TITLE>
<META HTTP-EQUIV="Refresh" CONTENT="10">
</HEAD>
Esto hace que el visualizador vuelva a cargar la página activa al cabo de 10 segundos. También puede hacerse a un servidor. Así:
<HEAD>
<TITLE>Head de un documento </TITLE>
<META HTTP-EQUIV="Refresh" CONTENT="10; URL=http://miservidor/mipagina.htm">
</HEAD>
Utiliza esto con precaución. Si sabes que el contenido de la página no va a cambiar, es inútil hacer esto, y si lo haces contra un servidor, puedes sobrecargarlo. Este elemento, sólo tendrá utilidad en casos muy especiales.

Otra opción es forzar la expiración inmediata en la caché del navegador de la página recibida, lo que provoca que la página sea solicitada de nuevo al servidor cada vez, en lugar de cargar la copia que ya existe en la máquina del cliente. Se escribe así:

<HEAD>
<TITLE>Head de un documento </TITLE>
<META HTTP-EQUIV="Expires" CONTENT="Tue, 20 Aug 1996 14:25:27 GMT">
</HEAD>
Si se pone una fecha ya pasada, como la que hay en el ejemplo, el navegador elimina inmediatamente de la caché la página recibida, y si no es pasada, lo hará en el momento indicado por la misma. También se le puede dar valor cero a la fecha de expiración:
<HEAD>
<TITLE>Head de un documento </TITLE>
<META HTTP-EQUIV="Expires" CONTENT="0">
</HEAD>
Otra opción es impedir directamente que el navegador guarde en caché la página. Esto es especialmente útil cuando se trabaja con formularios que consultan datos dinámicos:

<HEAD>
<TITLE>Head de un documento </TITLE>
<META HTTP-EQUIV="Expires" CONTENT="no-cache">
</HEAD>
Si tienes interés en que tus páginas aparezcan en los grandes buscadores de Internet, y puedan ser encontradas con facilidad, puedes poner las palabras clave que contiene la página separadas por comas. Por ejemplo:

<HEAD>
<TITLE>Head de un documento </TITLE>
<META NAME="keywords" CONTENT="HTML, internet ">
</HEAD>
Este otro sirve para que los buscadores puedan ofrecer un breve resumen de los contenidos de tu página:

<HEAD>
<TITLE>Head de un documento </TITLE>
<META NAME="description" CONTENT="Manual para escribir HTML.">
</HEAD>
Puedes poner todos los elementos <META> que creas necesarios, pero sin repetirlos.

Habrás notado que se ha utilizado la palabra "caché", y tal vez no sepas a qué se refiere. Todos los navegadores, por defecto, siempre que reciben una página de un servidor se hacen una copia de la misma en el disco de tu máquina. Con esto se pretende que si vuelves a solicitar la misma página, en lugar de pedirla de nuevo al servidor, te mostrará la que tiene guardada en el disco. A esta área del disco donde el navegador va poniendo las páginas visitadas, se le denomina caché. El tamaño de la caché lo puedes modificar desde las opciones de configuración del navegador, e incluso puedes darle tamaño cero, con lo que siempre que veas una página, ésta habrá sido solicitada al servidor independientemente de lo que digan las instrucciones META.

Hay otros elementos que pueden aparecer en la HEAD, como ISINDEX, NEXTID, LINK o BASE, pero son de uso muy especializado y poco corriente, algunos ya en desuso, y ninguno obligatorio (<TITLE> sí lo es).

Cuerpo (BODY) de un documento

El cuerpo (BODY) es la segunda y última de las dos partes en que se estructura un documento HTML. Por supuesto es obligatoria, ya que es aquí donde reside el verdadero contenido de la página, y por tanto, al contrario de la HEAD sí se ve cuando navegamos por ella.
Se escibirá asi:

<BODY>

texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto

</BODY>
Como ya habrás visto, los navegadores, por defecto, presentan el texto de una página ajustando los contenidos a la esquina superior izquierda de la pantalla. El elemento BODY tiene parámetros que permiten modificar los márgenes por defecto. Lo malo es que cada navegador los interpreta de una manera. Por ejemplo, Netscape utiliza solamente dos instrucciones que afectan simultáneamente a los márgenes superior e inferior e izquierdo y derecho respectivamente:
marginwidth="pixels", para los márgenes izquierdo y derecho.
marginheight="pixels", para los márgenes superior e inferior.

En cambio, el Internet Explores, utiliza uno para cada cual:

leftmargin="pixels", para el margen izquierdo
topmargin="pixels", para el margen superior
rightmargin="pixels", para el margen derecho
bottommargin="pixels", para el margen inferior

Donde pixels es el número de pixels que se quiere mover cada margen hacia el interior de la página. Estos parámetros también son accesibles desde instrucciones de estilo.

Otro problema que suele presentarse con los márgenes es que a la hora de imprimir una página, cada impresora, junto con el navegador, se las ingeniarán para hacer justo lo contrario de lo que se desea... Tal vez algun dia todo esto funcione bien.

Otra cosa que puede controlarse desde BODY es el color que tomarán los links que pongamos en la página. Por ejemplo, para hacer que los links sean amarillos antes de ser visitados, azul-verde cuando son activados, y verdes después de haber sido utilizados, se escribe:

<BODY LINK="#FFFF00" VLINK="#22AA22" ALINK="#0077FF">

Veamos a hora los elementos más habituales del lenguaje que deben escribirse en el BODY.


Y algo muy útil a que no parezca los Códigos hexadecimales de color

Estos códigos de color se pueden utilizar como valor de atributo en los elementos <FONT COLOR> y <BODY BGCOLOR FGCOLOR TEXT LINK VLINK ALINK>. Algunos no funcionarán en ciertos visualizadores, así como si Windows no está configurado con 256 colores al menos.

La codificación de estos colores está basada en mezclas cromáticas RGB (RED GREEN BLUE), es decir, se mezclan ciertas cantidades de los tres colores básicos (rojo verde y azul), para conseguir el color deseado. La cantidad de cada color está definida por el código que utilizamos, que tiene seis dígitos en hexadecimal. Si los cortamos en 3 grupos de dos de izquierda a derecha, obtendremos la cantidad (en hexadecimal) de cada color.

La sintaxis para cambiar el fondo de la página (background) a color rojo es: <BODY BGCOLOR=#FF0000> y para dar color al texto, ver la página Texto de colores. Para combinaciones generales de colores, ver el ejemplo de control de colores.


Lista de códigos RGB

Puedes probar los diez primeros para hacerte una idea, o puedes verlos todos desde aquí
White rgb=#FFFFFF
Red rgb=#FF0000
Green rgb=#00FF00
Blue rgb=#0000FF
Magenta rgb=#FF00FF
Cyan rgb=#00FFFF
Yellow rgb=#FFFF00
Black rgb=#000000
Aquamarine rgb=#70DB93
Baker's Chocolate rgb=#5C3317
Blue Violet rgb=#9F5F9F
Brass rgb=#B5A642
Bright Gold rgb=#D9D919
Brown rgb=#A62A2A
Bronze rgb=#8C7853
Bronze II rgb=#A67D3D
Cadet Blue rgb=#5F9F9F
Cool Copper rgb=#D98719
Copper rgb=#B87333
Coral rgb=#FF7F00
Corn Flower Blue rgb=#42426F
Dark Brown rgb=#5C4033
Dark Green rgb=#2F4F2F
Dark Green Copper rgb=#4A766E
Dark Olive Green rgb=#4F4F2F
Dark Orchid rgb=#9932CD
Dark Purple rgb=#871F78
Dark Slate Blue rgb=#6B238E
Dark Slate Grey rgb=#2F4F4F
Dark Tan rgb=#97694F
Dark Turquoise rgb=#7093DB
Dark Wood rgb=#855E42
Dim Grey rgb=#545454
Dusty Rose rgb=#856363
Feldspar rgb=#D19275
Firebrick rgb=#8E2323
Forest Green rgb=#238E23
Gold rgb=#CD7F32
Goldenrod rgb=#DBDB70
Grey rgb=#C0C0C0
Green Copper rgb=#527F76
Green Yellow rgb=#93DB70
Hunter Green rgb=#215E21
Indian Red rgb=#4E2F2F
Khaki rgb=#9F9F5F
Light Blue rgb=#C0D9D9
Light Grey rgb=#A8A8A8
Light Steel Blue rgb=#8F8FBD
Light Wood rgb=#E9C2A6
Lime Green rgb=#32CD32
Mandarian Orange rgb=#E47833
Maroon rgb=#8E236B
Medium Aquamarine rgb=#32CD99
Medium Blue rgb=#3232CD
Medium Forest Green rgb=#6B8E23
Medium Goldenrod rgb=#EAEAAE
Medium Orchid rgb=#9370DB
Medium Sea Green rgb=#426F42
Medium Slate Blue rgb=#7F00FF
Medium Spring Green rgb=#7FFF00
Medium Turquoise rgb=#70DBDB
Medium Violet Red rgb=#DB7093
Medium Wood rgb=#A68064
Midnight Blue rgb=#2F2F4F
Navy Blue rgb=#23238E
Neon Blue rgb=#4D4DFF
Neon Pink rgb=#FF6EC7
New Midnight Blue rgb=#00009C
New Tan rgb=#EBC79E
Old Gold rgb=#CFB53B
Orange rgb=#FF7F00
Orange Red rgb=#FF2400
Orchid rgb=#DB70DB
Pale Green rgb=#8FBC8F
Pink rgb=#BC8F8F
Plum rgb=#EAADEA
Quartz rgb=#D9D9F3
Rich Blue rgb=#5959AB
Salmon rgb=#6F4242
Scarlet rgb=#8C1717
Sea Green rgb=#238E68
Semi-Sweet Chocolate rgb=#6B4226
Sienna rgb=#8E6B23
Silver rgb=#E6E8FA
Sky Blue rgb=#3299CC
Slate Blue rgb=#007FFF
Spicy Pink rgb=#FF1CAE
Spring Green rgb=#00FF7F
Steel Blue rgb=#236B8E
Summer Sky rgb=#38B0DE
Tan rgb=#DB9370
Thistle rgb=#D8BFD8
Turquoise rgb=#ADEAEA
Very Dark Brown rgb=#5C4033
Very Light Grey rgb=#CDCDCD
Violet rgb=#4F2F4F
Violet Red rgb=#CC3299
Wheat rgb=#D8D8BF
Yellow Green rgb=#99CC32

¿Por qué hay que usar códigos?


Existen diversos sistemas operativos dentro del mundo de los ordenadores. Estos sistemas no son otra cosa que unos programas especiales que se ejecutan inmediatamente después de encender el ordenador, y son los que se encargan de darle "vida" a nuestra máquina.
Junto con estos programas, los ordenadores cargan en memoria unas tablas especiales que coinciden con los caracteres que tiene tu teclado y algunos más que no están en el mismo, pero que se pueden escribir en pantalla por otros medios. Estas tablas, desafortunadamente, no son siempre las mismas, y varían de un sistema a otro, de una marca de ordenador a otra, y por supuesto, de un idioma a otro. Por ejemplo, no se ven igual las letras con acentos desde un PC que desde un MACintosh, o una terminal UNIX, si las escribimos directamente desde el teclado.

Dado que el HTML pretende ser un lenguaje universal, y que una página debe verse como su creador desea, sin importar si estamos ante un ordenador que "habla" en inglés o en español, o que tiene tal o cual sistema operativo, se ha creado una tabla de caracteres "conflictivos" (en realidad están todos, pero generalmente sólo se usa para caracteres especiales) que se escriben con un código en lugar de pulsar la tecla que lo contiene directamente.

Por ejemplo, nuestra denostada en medio mundo "Ñ" se escribirá:

&Ntilde; o bien &#209;
Esto habrá que hacerlo con todos los caracteres que no sean las letras del alfabeto (mayúsculas y minúsculas), los números y unos pocos signos, como el punto, la coma, el guión y algunos otros. A este conjunto de caracteres, común para todos los sistemas, se le denomina código ASCII, y desde luego hay que codificar todas las letras acentuadas, eñes, cedillas, etc., etc.

Aquí encontrarás una tabla con todos los caracteres http://www.uv.es/jac/guia/coditab.htm, también están las letras, pero éstas sólo te serán útiles en caso de necesitar escribir textos un tanto raros.

Como puedes ver, la tabla tiene una columna con el carácter deseado seguida de su código numérico en base decimal, una descripción del carácter y después un nombre corto (una especie de alias) que para los más habituales se llegan a memorizar, y para cosas cortas, ayudan. No todos tienen ese nombre corto, y esos hay que escribirlos con el código numérico. En algunos casos especiales que se verán más adelante, habrá que escribir los códigos numéricos en base hexadecimal (la calculadora de Windows tiene un conversor).

Generalmente, se pueden escribir directamente desde teclado todos los que no tienen alias en la tabla, los que sí tienen normalmente darán problemas en sistemas diferentes al que se ha utilizado para escribir el documento. Si lo que escribes en HTML tienes la seguridad de que sólo va a ser utilizado como ficheros locales en máquinas similares a la tuya, no será necesario complicarse la vida; pero si tus páginas van a residir en un servidor WWW, cualquier tipo de máquina podrá acceder a ellas, y su aspecto no será el adecuado en algunas.

Existen multitud de editores especiales para escribir HTML, y la mayoría de ellos tienen herramientas para convertir de forma automática los caracteres especiales a su correspondiente código. También hay paquetes de "macros" para hacer lo mismo con procesadores de texto como Word o Word Perfect.


url

8 comentarios - "manual practico de HTML"

@gringow08 +1
muchas gracias a fav desp lo leo y aprecio mejor este tremendo trabajo
@motadidas
loko genial luego te dejo puntos de me acabaron