[GUÍA] El comienzo en HTML

Ver el tema anterior Ver el tema siguiente Ir abajo

[GUÍA] El comienzo en HTML

Mensaje por joex97 el Mar Jun 15, 2010 1:08 am

1- Antes de empezar con HTML..

Crear un sitio Internet no es ni difícil ni paragonable con sistemas de programación propiamente dichos. A este respecto, en particular, debemos resaltar desde ahora que HTML no es un lenguaje de programación sino un simple sistema de marcado, cuyas marcas(tag) son reconocidas e interpretadas por navegadores Web (Netscape, MsIe, Opera, etc.). Esta peculiaridad hace del HTML un sistema fácil de comprender porque no presupone ningún conocimiento técnico previo. Por este motivo, cualquiera puede acercarse al Web Publishing sin prerequisitos de especialización y por esto en Internet existen millones de creadores de páginas.

El mercado está lleno de decenas y decenas de programas específicos para la creación de páginas HTML: son los denominados editores HTML. La complejidad de estos programas ha alcanzado niveles muy altos siguiendo caminos diversos. En síntesis podemos decir que el mercado propone dos tipos de editores HTML:


Editores textuales
Se trata de programas que proponen modificaciones directas en el código HTML puro, con posibilidad de vista preliminar del resultado. Para facilitar la escritura del código ponen a disposición comandos preconfeccionados que se activan con simples clic. La utilidad principal de estos instrumentos es que los usuarios logran dominar el código HTML. Su principal defecto reside en su mayor dificultad de aprendizaje respecto a los editores WYSIWYG.


Editores WYSIWYG
Acrónimo de: "What You See Is What You Get", que traducido equivaldría a "lo que ves es lo que tienes", es decir la pantalla ofrece la reproducción exacta de lo que aparecería después en formato impreso. Así, estos editores no visualizan el código HTML sino exclusivamente los objetos, las imágenes y el texto. De esta manera, el usuario no trabaja sobre el código HTML sino sobre la página tal y como será visualizada por el navegador: moviendo objetos con el ratón, explotando formatos predefinidos, etc.
La ventaja de este tipo de editor es evidente: el esfuerzo de comprensión de las características específicas del HTML se reduce al mínimo y el tiempo de aprendizaje es muy breve.
En nuestra opinión, sin embargo, este tipo de editor (un ejemplo concreto es Front Page) no ofrece la posibilidad de comprender el HTML y personalizar su uso. Se corre así el riesgo de crear sitios fotocopia, con un diseño idéntico, con errores que el editor no consigue resolver y sin poder ir más allá de lo que el programa prevé.

Prescindiendo de juicios subjetivos sobre los programas para el HTML, la presente guía está concebida para hacer comprender los rudimentos del HTML puro. Siguiendo este curso no te encontrarás con un manual sobre los comandos de los editores más difundidos, sino ante el código HTML puro y universal. Sólo de este modo lograrás comprender las peculiaridades del HTML y de los restantes lenguajes que soportan y amplían su uso.

Durante todo este curso, abandona tu editor y concéntrate en las nociones que sobre el código la guía te irá presentando. Una vez comprendidas las bases del HTML, podrás elegir si usar editores WYSIWYG o editores textuales. En ambos casos, serás consciente de los límites y potencialidades del sistema y podrás explotar al máximo todos los instrumentos que el mercado pone a tu disposición.

Algunos consejos:

Los sitios web, antes de su publicación, van creados localmente, es decir, en tu disco duro. Sólo sucesivamente se envían mediante los correspondientes programas específicos.

En los nombres de los archivos y las extensiones de los mismos, utiliza siempre letras minúsculas.

Recuerda que la modificación de tu sitio web se hace a través de programas FTP (File Trasfer Protocol) mediante contraseña (password) e identificación de usuario (UserId). Por lo tanto, nadie más que tú podrá modificar las páginas.


Para escribir códigos HTML puedes utilizar cualquier editor HTML textual (HomeSite, HotDog, DreamWeaver, etc.), pero también el simple bloc de notas Win95.

Antes de continuar, es importante subrayar una característica de las marcas (tag) HTML. Como ya hemos señalado, HTML es un sistema de marcado con efecto sobre texto e imágenes. Para que se produzca dicho efecto, es necesario asignar elementos específicos (en estándar HTML) a los diversos elementos del texto o imágenes de la página. El término marcado deriva justamente de esta característica. Para comprender mejor este concepto fundamental de HTML, consideremos el siguiente texto:

HTML es un sistema de marcado independiente de la plataforma.

Como puedes ver, se trata de un texto normalísimo para el cual no hemos específicado ninguna marca HTML. En línea con los conceptos que rigen el sistema de marcado, sin otras indicaciones, el navegador formatea el texto como el precedente (de hecho, en este caso se trata de un carácter arial de idéntico tamaño y color al de este mismo texto).
Supongamos ahora que queremos dar un color rojo al texto de nuestro ejemplo. Para ello etiquetamos el texto con la marca HTML específica que determina el color del texto:

<font color="red">HTML es un sistema de marcado independiente de la plataforma.</font>

Más adelante veremos cómo funciona la marca FONT. Lo que nos interesa subrayar ahora es el uso general de las marcas HTML: como podemos observar fácilmente en el ejemplo, la marca <font color="red"> se coloca inmediatamente antes y después de la frase que queremos formatear en rojo. La única diferencia es que la marca de apertura es <font color="red">, mientras que la de cierre es </font>. La barra que baja de derecha a izquierda indica al navegador que la marca <font> de apertura precedente se debe cerrar. Hemos así dado vida a un marcado pequeño pero indicativo del funcionamiento del sistema HTML.

Las marcas HTML son case insensitive, es decir, es completamente indiferente usar mayúsculas o minúsculas. En otras palabras, el siguientes código:

<font color="red"></font>

tiene el mismo efecto que:

<FONT COLOR="RED"></font>

En HTML existen marcas que no necesitan cierre porque su función no es marcar un elemento, sino proporcionar información de otro tipo. Indicaremos en cada caso qué elementos precisan de cierre y cuáles funcionan correctamente sin él.

Fuente: Antes de empezar...


2- <HEAD> encabezar el documento..

Para ser visualizados en Internet, los documentos son salvados en formato texto y contienen las marcas necesarias para informar al navegador (Netscape, MsIe o Explorer) al respecto. En otras palabras, el navegador visulizará en cualquier caso los documentos con texto salvados en formato .htm, pero si éstos carecen de marcas HTML aparecerán sin formato de ningún tipo: sin separación de líneas o párrafos, sin texto alineado, sin negritas, cursivas, etc.
La finalidad del HTML es dotar, mediante unos comandos denominados marcas , de formato al documento, así como insertar imágenes y otros elementos multimedia (filmaciones, apliques, etc.). El trabajo que un editor web realiza en el documento HTML está dirigido a proporcionar al navegador toda la información necesaria para interpretar correctamente la página.

Un documento HTML se divide en dos partes fundamentales: el encabezamiento o cabecera y el cuerpo del documento.

Es fácil comprender que el cuerpo del documento contiene todos los elementos de la página: el texto, las imágenes, los apliques (applet) Java, el código Javascript y todo lo que es visualizado materialmente por el navegador.

Por el contrario, la cabecera contiene una serie de datos que el navegador necesita para interpretar correctamente el documento, pero que no se visualizan dentro del mismo. La cabecera tiene, por tanto, una función no visible pero fundamental. Entre los elementos facilitados por la cabecera podemos citar: el título de la página, los términos clave para los buscadores, el tipo de HTML soportado y los enlaces base de referencia.
Aquí analizaremos sólo algunos elementos, omitiendo por el momento el estudio de aquéllos que no resultan inmediatamente necesarios para la comprensión del HTML:

HTML
DOCTYPE
HEAD
TITLE
META


A continuación describiremos detalladamente las peculiaridades más relevantes de cada uno de los elementos anteriores.

<HTML>


Todos los elementos y el contenido de un documento HTML están encerrados dentro de las marcas <HTML></HTML> cuya función es servir de apertura y cierre al archivo. Las marcas <HTML></HTML> indican al navegador que el documento está marcado en HTML, si bien los navegadores más recientes (Netscape 3 y 4, MsIe 3,4 y 5) consiguen interpretar igualmente las marcas sucesivas. Dicho esto, existen en cualquier caso dos razones para introducir siempre la marca <HTML></HTML> dentro del documento:


HTML no es el único lenguaje de marcado presente en el WWW (piénsese, por ejemplo, en el XML) y corremos el riesgo de que el navegador malinterprete las marcas, confundiéndolas con otros lenguajes de marcado.

Los usuarios de viejos navegadores corren el riesgo de visualizar un documento pésimamente formateado.


DOCTYPE


Siguiendo las indicaciones del W3C (consorcio internacional que se ocupa de normalizar el uso del HTML) Doctype debería ser el primer elemento que abriera un documento. Esto quiere decir que iría colocado antes de <HTML>.
Se trata de una marca que no precisa de cierre y cuya función es proporcionar información al servidor de web anfitrión de la página. Los datos que facilita DOCTYPE se refieren al tipo de documento visualizado además de ser necesarios para la comunicación entre navegador y servidor. DOCTYPE se debe escribir de una forma estándar:

<!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.0//EN">

Esta línea proporciona algunos datos sobre el documento:


HTML PUBLIC: el documento es público
IETF: el tipo de HTML público está gestionado por la Internet Engineering Task Force
DTD HTML 4.0: la versión de HTML soportada es la 4.0
EN: el idioma del documento es el inglés

El uso de DOCTYPE no es obligatorio y puede omitirse. Ciertamente, su utilización ayuda al servidor de web a interpretar correctamente el documento, pero su falta no condiciona la correcta visualización.

Tal y como puede observarse fácilmente DOCTYPE es una marca que no prevé elemento de cierre (no se escribe de esta manera: <!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.0//EN"></DOCTYPE>)


<HEAD>


Los elementos <HEAD></HEAD> se colocan inmediatamente después de la apertura de la marca <HTML> y cierran el encabezamiento propiamente dicho del documento; es decir toda la información que necesita el navegador, el servidor de web y los motores de búsqueda. Se trata del primer elemento que lee el navegador y, por ello, es el mejor lugar para insertar sintaxis script . Dentro de <HEAD></HEAD> se introduce el título del documento y otros datos. He aquí la sintaxis HTML de un documento con los comandos hasta ahora examinados:

<!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.0//EN">
<HTML>

<HEAD></HEAD>

</HTML>



<TITLE>


El elemento <TITLE></TITLE> es el más utilizado dentro de la marca <HEAD>, dado que sirve para dar título a la página. El título suele ser visualizado por los navegadores en la cabecera de página. La que figura a continuación es la imagen del TITLE de HTMLpoint (el texto es: HTMLpoint - el sitio italiano sobre el Web publishing):

En caso de que el URL se guarde con "agrega a favoritos" (para MsIe) Y "agrega a marcapáginas" (para Netscape) la marca TITLE da nombre a la conexión. En otras palabras, cuando se guarda la dirección, el navegador asigna al mismo lo que aparece dentro de <TITLE></TITLE>. La imagen que sigue muestra el efecto en MsIe (idéntico para Netscape):

El contenido que aparece entre las marcas <TITLE></TITLE> es utilizado también por algunos buscadores para indicizar la página y buscar palabras clave. Altavista constituye probablemente el ejemplo más eclatante. Por ello, es recomendable proporcionar en el TITLE una descripción detallada aunque sintética de la página, con todas las palabras clave que los buscadores pueden indicizar.
Un consejo que conviene tener presente es el de no exagerar con la longitud del texto, teniendo presentes las exigencias de quienes añaden el sitio al marcapáginas y de los buscadores.

La sintaxis correcta de la marca TITLE es la siguiente:

<TITLE>Mi primer titulo con la guía de HTMLpoint</TITLE>


META


Los buscadores representan un recurso indispensable para quienes buscan información en la red, y sitios como Altavista, Yahoo, Lycos y Excite se cuentan entre los más visitados de Internet.
Figurar en dichos motores de búsqueda es fundamental para quien crea páginas web y quiere mayor visibilidad. Es necesario, antes de nada, señalar las propias páginas a estos buscadores, lo que se efectúa mediante pequeños formularios presentes en las páginas web bajo la frase "Add your site". Periódicamente estas arañas (spider) supervisan los millones de páginas contenidos en sus bases de datos verificando las eventuales modificaciones.

Además de ser incluidos en los buscadores, es importante figurar en los primeros puestos de la lista que aparece al efectuar la búsqueda (a menudo, sobre todo cuando los términos que se buscan son de uso frecuente y de carácter general, aparecen en las listas miles de sitios). Para ello, debemos adoptar algunas sencillas medidas.
Fundamentales por lo que se refiere a este objetivo resultan las marcas de metainformación (META), cadenas de códigos que figuran en la cabecera del documento, entre <HEAD></HEAD> y que son las primeras que leen los buscadores.
Las palabras clave (keywords) son los términos que, de manera resumida, describen el contenido de una página web. Si, por ejemplo, el sitio se ocupa de la realización de páginas web, las palabras clave serán:

HTML
realización páginas web
portada
buscadores
precios módicos
.......


La marca META deberá impostarse como sigue:

<META name="keywords" Content="HTML, realización páginas web, portada, buscadores, precios módicos">

La coma divide unos términos de otros. No se escriben comas dentro de las frases que constan de más de un vocablo para que el buscador puede encontrarlas tal y como aparecen escritas.

Naturalmente, si vuestro sitio es multilingüe será recomendable incluir palabras clave en todos los idiomas del sitio, prestando siempre mucha atención para evitar usar términos demasiado genéricos. En el caso de que se tratara de nombres propios, es aconsejable incluir la forma singular y plural. El buscador considera el número de veces que se repite un término dentro de la página y de las palabras clave; sin embargo, repetir exageradamente la misma palabra en la marca META tiene el efecto contrario al deseado ya que la mayor parte de las arañas cancelan estos sitios de las propias bases de datos. Por ello, insistimos en no exagerar con el número de términos incluidos en las palabras clave.

Otras marcas de metainformación se refieren al autor de la página web:

<META name="author" content="Nombre Apellidos">

el título que aparecerá tras la búsqueda:

<META name="description" content="Mi primer titulo con la guía de HTMLpoint">

y el nombre del editor con el que se ha generado el documento HTML:

<meta name="GENERATOR" content="BLOC DE NOTAS WinXP(u otro)">

Si por cualquier razón quieres que una de tus páginas NO sea indicizada en los motores de búsqueda, deberás incluir la siguiente marca de metainformación:

<META NAME="ROBOTS" CONTENT="NOINDEX">

Otra marca META es la que permite el "refresh" de la página. Esto significa que la misma página u otra diferente puede lanzarse automáticamente tras un cierto número de segundos determinado por nosotros mismos.
He aquí el código:

<META HTTP-EQUIV="Refresh" CONTENT="5; url=pippo.htm">

Donde CONTENT="5 es el número de segundos en los que la nueva página será cargada, mientras que url=pippo.htm" es el archivo que será cargado.


RESUMEN DE LA LECCIÓN


A continuación figura una página HTML impostada según cuanto hemos visto en esta lección. Esta página constituirá también un punto de referencia para las lecciones siguientes:

<!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.0//EN">
<HTML>

<HEAD>

<META name="keywords" Content="HTML, realización páginas web, portada, buscadores, precios módicos">
<META name="description" content="Mi primera portada con la guía de HTMLpoint">
<meta name="GENERATOR" content="BLOC DE NOTAS Win95">
<META name="author" content="Nombre Apellidos">

<TITLE>Mi primera portada con la guía de HTMLpoint</TITLE>

</HEAD>

</HTML>


Fuente: <HEAD> encabezar el documento

Proximas : 3,4,5...15.

Nos vemos y supongo que alguno ya conoce la pagina esta, yo recien me entero que existe xD y se me ocurrio postear esto para quienes no saben, aunq para cuando ponga el resto ya revisaron la pagina.

joex97
Admin

Mensajes : 72
Fecha de inscripción : 13/06/2010
Edad : 19
Localización : MdP - ArG - 2010

Ver perfil de usuario http://designerskin.mejorforo.net

Volver arriba Ir abajo

Re: [GUÍA] El comienzo en HTML

Mensaje por andriyleu el Mar Jun 15, 2010 3:06 pm

Gracias, muy buena guia, y gran laburo +rep

andriyleu
Admin

Mensajes : 89
Fecha de inscripción : 13/06/2010

Ver perfil de usuario http://tutoskin.foroweb.org

Volver arriba Ir abajo

Re: [GUÍA] El comienzo en HTML

Mensaje por ~Galli el Mar Jun 15, 2010 6:06 pm

Genial, buena guia ;D
++

~Galli

Mensajes : 35
Fecha de inscripción : 13/06/2010
Localización : Argentina

Ver perfil de usuario

Volver arriba Ir abajo

Re: [GUÍA] El comienzo en HTML

Mensaje por joex97 el Mar Jun 15, 2010 7:25 pm

Gracias!

joex97
Admin

Mensajes : 72
Fecha de inscripción : 13/06/2010
Edad : 19
Localización : MdP - ArG - 2010

Ver perfil de usuario http://designerskin.mejorforo.net

Volver arriba Ir abajo

Re: [GUÍA] El comienzo en HTML

Mensaje por laloema el Mar Jun 15, 2010 7:28 pm

muy bien explicado felicidades

laloema

Mensajes : 27
Fecha de inscripción : 15/06/2010
Edad : 24
Localización : Colima

Ver perfil de usuario http://peliculash-d.blogspot.com/

Volver arriba Ir abajo

Re: [GUÍA] El comienzo en HTML

Mensaje por Contenido patrocinado Hoy a las 5:58 pm


Contenido patrocinado


Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba

- Temas similares

 
Permisos de este foro:
No puedes responder a temas en este foro.