Foros de Emudesc

Manual
JSCRIPS
JCSCRIPS
COKIES
H QUICK

Antes de Empezar....:

Primero, voy a decir que este texto no pretende ser un curso formal de "Html". Tan solo quiero que sea de ayuda y guía para todos aquellos que quieren introducirse en el tema.

Comenzaremos diciendo que el Html (HyperText Markup Language) no es verdaderamente un lenguaje de programación; es en realidad una versión reducida del Lenguaje SGML (Standard Generalized Markup Language), un lenguaje estándar para la descripción de documentos. Se emplea, entonces el Html, para describir las páginas que deseamos "crear"; de manera tal que los distintos "browsers" las muestren lo más fielmente posible.Debido a la existencia de distintos browsers (aunque actualmente existen dos que se disputan el dominio del mercado: Netscape e Internet Explorer) resulta difícil concebir una página de aspecto final único, todo depende del "browser con que se mire".De esta manera nos encontramos con que existen ciertos "comandos" (tags) exclusivos de cada browser.

Una vez hechas estas aclaraciones comenzemos a desarrollar nuestra página para la world wide web!!!!!!!!!.

Software

Editor
Lo primero que necesita es un editor, un programa que nos permite escribir y editar HTML. Es preferible un editor de texto, ya que nos permite escribir nuestro código completamente por nosotros mismos. Debemos entender las consecuencias de escribir cada instrucción de HTML. Por lo tanto nos olvidaremos de usar los editores WYSIWYG.
Usaremos los simples editores de texto. Windows ya trae uno incorporado: Wordpad. Con él podemos editar varios archivos a la vez y además podemos pasar fácilmente de uno a otro. Si trabaja con una Macintosh, use el BBedit. Un buen editor en texto de HTML, que recomiendo es el Stone's Webwriter (un programa Freeware!!!!!).

Browsers
Otra cosa que necesitaremos es un (web) browser. Como ya dije existen dos que pelean por el liderazgo de los Browsers; asi que podemos hacernos de ambos para poder "ver" nuestros logros en el aprendizaje.
Para mi gusto el mejor es Netscape Navigator (ahora Communicator). En segundo lugar tenemos al Microsoft Internet Explorer. Otro muy bueno es el Opera, un browser compacto y rápido, sin prestaciones innecesarias.

FTP software
Esta es una herramienta que necesitamos para poder poner nuestras páginas en la red. Un programa FTP (File Transfer Protocol) nos permite "mover" un archivo de un lugar a otro. El más usado es el WS_FTP, otro muy popular es el Cute-FTP. Si está utilizando una Macintosh, una buena opción es el Fetch.

File manager
Para no perdernos entre tantos archivos, necesitaremos un buen administrador de archivos.Si bien ya tenemos el Explorador de Windows, existen otros muy buenos como el Windows Commander. En caso de que no dispongamos de dinero para un programita de estas características, hay varios que son Freeware.
Para ahorrar espacio y tiempo (que es dinero) en la red, muchos archivos se encuentran comprimidos. A veces se tratan de archivos self-extracting ó de programas instaladores. Pero otros son archivos zip. En este caso necesitamos de un descompresor, el Winzip es uno de los mejores y más populares.

Reference
Por último debemos tener a mano un buen "HTML reference". El mejor es el de Stephen le Hunte, denominado: HTML Reference Library. El Web Design Group tiene uno llamado Wilbur help file. El W3C publica el standard oficial on line.


Uno no aprende a realizar páginas Web leyendo solamente. Podrá leer cientos libros sobre el tema pero no sabrá lo que es hasta no haber experimentado por sí mismo. El HTML es, como amar, se aprende mejor haciéndolo.

Tags

Una vez que tenemos las herramientas necesarias,iniciamos:
En HTML todo gira en torno a los tags. Un tag es un rótulo, con algo escrito en él. Un tag HTML trabaja como una llave, que muestra u oculta cosas que se verán o no en la página.

<TAG>

Los tags están siempre encerrados entre los signos "menor que " (<) y "mayor que" (>). Los Tags tanto en mayúsculas como en minúsculas. Es recomendable escribirlos en mayúsculas, para poder ubicarlas rápidamente dentro del Código. Pero puedes hacerlo de la manera que más te guste.

<TAG>...</TAG>

Los tags a menudo se escriben de a pares. Un tag de apertura y ptro tag de cierre. La única diferencia es la "barra" que debemos poner en el tag de cierre.NOTA: a menudo nos olvidamos de esta barra, haciendo que la página no tome el aspecto que queremos.

¡¡¡ No nos olvidemos de la barra en el tag de cierre!!!

ATRIBUTOS:

Algunos tags tienen uno ó más atributos. Estos suministran información extra a su browser. Cuando ponemos una imagen en la página, usamos un tag de imagen, en él especificamos sus atributos es decir, qué imagen será usada y sus características. Los detalles del atributo se ubican entre comillas. En resumen: un tag le dice al browser QUE hacer, un atributo le dice COMO hacerlo.

<TAG ATRIBUTO="...">...</TAG>

Especial atención debemos prestarle a la notación de los tags. Siempre debemos poner los signos "menor que" y "mayor que" directamente al lado de la descripción del tag sin espacios. No use espacios en los atributos. Cuando coloca la información de un atributo después del signo "igual", hay que ponerlo entre comillas. Los Tags pueden contener otros tags. La forma correcta de escribirlas es...: <A><B></B></A>. Si lo hacemos de la siguiente manera: <A><B></A></B>, la cosa puede no funcionar como lo esperamos.

Página Básica

Abramos el editor de texto y escribamos el texto de abajo. Es conveniente abrir una ventana con el browser, así podemos ver los efectos de la alteraciones que realizamos a nuestro código. Para ello debemos recargar la página luego de cada modificación que hagamos. ( Apretar Reload -si usamos Netscape- ó Actualizar-si usamos el Explorer-)

<HTML>
</HTML>

Con estos dos tags indicamos que el archivo es un archivo HTML. Le estamos diciendo al Browser: Aquí comienza el archivo HTML (<HTML>), y aquí termina el archivo(</HTML>). Estos tags son usados una sola vez en cada página. Antes del tag <HTML> y después del tag </HTML> normalmente no suele haber nada.



Head

<HTML>
<HEAD>
</HEAD>
</HTML>


Cada archivo HTML tiene un "Encabezamiento". Este se encuentra encerrado por dos tags HEAD que se ubican después del tag HTML. Los tags aparecen solo una vez en toda la página. El contenido principal del tag HEAD es el título de la página que estamos creando. Pondremos el título de nuestra página encerrado por el tag TITLE; lo que allí escribamos será mostrado en la barra superior de la ventana del Browser.Por ahora no usaremos ningún otro tag dentro del HEAD

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
</HTML>

Title
Debemos elegir un título claro para nuestra página; ya que cuando nuestros visitantes nos pongan en su Bookmark; el título será nuestra presentación. Además es importante para que nos presenten los motores de búsqueda.

<HTML>
<HEAD>
<TITLE>Título Claro</TITLE>
</HEAD>
</HTML>

Body
Todos los archivos HTML tienen un cuerpo principal, denotado por el tag BODY. Entre estos tags pndremos el contenido de la página. Es decir lo que será visible en el Browser. Nuevamente el tag BODY al igual que los que vimos se escriben una sola vez. El tag <BODY> se ubica inmediatamente detrás del </HEAD >; y el tag </BODY> de cierre es la última cosa que se escribe antes del tag </HTML>.

<HTML>
<HEAD>
<TITLE>Título Claro</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Files

Una vez que escribimos lo anterior en nuestro editor, lo podemos guardar. Lo grabamos como page.html ó page.htm si no podemos usar más de 3 caracteres en la extensión. Lo guardaremos en un directorio separado, junto a los otros archivos que serán parte de su Site.
A menudo alguno nombres de archivos pueden ocasionar problemas. Esto es debido a que la mayoría de los servers trabajan bajo UNIX. Lo mejor es utilizar siempre para los nombres de archivos letras minúsculas y no emplear espacios.

Nuestra primera página
La siguiente es la sintaxis de una página básica:

<HTML>
<HEAD>
<TITLE>Mi primera página</TITLE>
</HEAD>
<BODY>
Mi primera página. No es muy sofisticada pero sirve de ejemplo.
</BODY>
</HTML>



Hemos escrito nuestra primera página, la guardamos... y podemos verla con un browser, podríamos publicarla.
La usaremos como un template, para ayudarnos a construir las otras páginas y no tipearemos de nuevo lo mismo una y otra vez (obviamente sacaremos el texto del body).
Todas las páginas, por más complicada que sea, consta de estos 3 elementos.

Recordemos: TODOS los tags que hemos mencionado se usan una sola vez en la página web. Ellos son la columna vertebral de la página.