Nuestros Patrocinadores

lunes, 30 de agosto de 2010

Día 1: Estructura del HTML

La forma en que está estructurado un documento de HTML se define por 3 tags que DEBEN SER OBLIGATORIOS (o casi).

Éstos son:
1. <HTML></HTML>: Todo lo que pongamos entre éstos tags indicará que está escrito en lenguaje HTML, si no se ponen éstos tags tu navegador no sabrá leerlo, ya que no se le dirá que es HTML. No debes poner nada fuera de ellos.

2. <HEAD></HEAD>: Es un preprocesador, es decir, los navegadores leen la información que está dentro de éstos tags antes de mostrar la página. Es muy útil para el momento en que quieras incluir tu página a motores de búsqueda, ya que generalmente usan ésto.
El tag más importante que se coloca dentro de éste es el <TITLE></TITLE>, ya que definirá el nombre y título de tu página, no el que aparecerá cuando la veas "visualmente" sino el que aparecerá en la barra de arriba del navegador:


3. <BODY></BODY>: Éste tag creo que es el más importante de todo el documento ya que ésta es la sección donde irá el contenido, ésto es lo que se mostrará en los navegadores.

Todos estos tags juntos se escriben así:
<HTML>
<HEAD>
<TITLE>TÍTULO DE MI PÁGINA</TITLE>
</HEAD>
<BODY>
CONTENIDO, TODO LO QUE QUIERAS ESCRIBIR AQUI.
</BODY>
</HTML>
Bueno que esperas?!: abre tu block de notas y escribe tu primera página web :).

*Nota:
Normalmente los tags que ocupan 1 línea son escritos así:
<TAG>TEXTO</TAG>
Y aquellos que ocupan varias líneas (como párrafos o listas) son escritos así:
<TAG>
TEXTO
</TAG>
Pero su orden da exactamente lo mismo.

**Nota 2: No es necesario escribir los tags con mayúscula, sólo lo estoy haciendo para diferenciar los tags.


Introducción al HTML

Así que... quieres aprender html eh???. Pues has llegado al lugar indicado :D. Supongo que la razón por la que has llegado aquí es porque te enteraste que para hacer una página web debes aprender html, y no tienes idea siquiera de lo que es. Quizás hayas llegado aquí también porque quieres ya sabes, pero quieres aprender más. Bueno...suficiente introducción. Empezemos ya! Primero pasaremos por todos aquellos conceptos que son TREMENDAMENTE ABURRIDOS (y que quizás no entiendas de momento)... pero que sin embargo debes saber. Conceptos Básicos: 1) World Wide Web (WWW): Digamos, simplemente, que es un sistema de información, el sistema de información propio de Internet. 2) Navegador: Es el programa que nos ofrece acceso a Internet. Debe ser capaz de comunicarse con un servidor y comprender el lenguaje de todas las herramientas que manejan la información de Web. Puede decirse que cada casa de software podría tener su navegador propio, aunque los mas populares sean Netscape e Internet Explorer. 3) Servidor: Se encarga de proporcionar al navegador los documentos y medios que este solicita. Utiliza un protocolo HTTP para atender las solicitudes de archivos por parte de un navegador. 4) HTTP: Es el protocolo de transferencia de hipertexto (HyperText Transfer Protocol), o sea, el protocolo que los servidores de World Wde Web utilizan para mandar documentos HTML a través de Internet. 5) URL: Es el Localizador Uniforme de Recursos, o dicho mas claramente, es la dirección que localiza una información dentro de Internet. 6) HTML: De momento, te basta saber que estas siglas corresponden a la definición "Lenguaje para marcado de hipertexto". Más claro aún, se trata de un lenguaje para estructurar documentos a partir de texto en World Wide Web. Este lenguaje se basa en tags (instrucciones que le dicen al texto como deben mostrarse) y atributos (parámetros que dan valor al tag). El HTML, sirve para hacer documentos, y al igual que cualquier documento, tiene una estructura determinada que define dónde está la información puesta y su relevancia, etc. Como por ejemplo, los títulos y cuerpos de un texto: todos sabemos que un título resume lo que está escrito en el texto. No sé si me habré explicado bien pero continuaremos... Lo más básico que debes saber sobre el HTML es que se escribe principalmente entre Tags o etiquetas, los cuales alteran de alguna manera la forma en que se muestra el texto. Éstos tags se escriben entre "<" y ">". Ejemplo:
<TAG>Texto que se quiere mostrar</TAG>
El tag del principio activa la orden y el último (que será el del principio precedido del signo /) la desactiva. No todas las tags tienen principio y final pero esto lo veremos más adelante. Una última cosa: el HTML puede escribirse en Block de Notas, pero hay que guardarlo con la extensión .html en vez de .txt (que sería el formato por defecto del block de notas). Desde aquí podrás practicar todas las demás lecciones en block de notas, guardándolas como .html y luego abriéndolas en tu navegador.