HTML Capitulo I – Desde Cero

By febrero 24, 2012DIseño Web, tips, web design

Hoy es viernes! inicio del fin de semana y para comenzar bien el merecido descanso pensé en iniciar una sección diferente para las entradas de blog de este día.

A partir de hoy, todos los viernes será de aprendizaje.

¿Y que vamos a aprender?
Aprenderemos el lenguaje en el cual una pagina web está escrita, HTML <html>

Cada viernes tendremos un capitulo diferente con ejemplos prácticos para que poco a poco vayas aumentando tu conocimiento en este lenguaje.

* estos tutoriales son “desde cero ” para principiantes y conocedores que deseen refrescar un poco lo que ya conocen.

Algunos conceptos básicos:

  • HTTP: Es el protocolo de transferencia de hipertexto, o sea, el protocolo que los servidores de World Wde Web utilizan para mandar documentos HTML a través de Internet.
  • URL: Es el Localizador Uniforme de Recursos, o dicho mas claramente, es la dirección que localiza una información dentro de Internet.
  • HTML: De momento, le basta saber que estas siglas se corresponden con 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 lenguaje HTML

Este lenguaje estructura documentos de texto que luego son visualizados en un navegador. La mayoría de los documentos tienen estructuras comunes (títulos, parrafos, listas…) que van a ser definidas por este lenguaje mediante tags (etiquetas). Cualquier cosa que no sea una tag es parte del documento mismo.

Este lenguaje no describe la apariencia del diseño de un documento sino que ofrece a cada plataforma que le de formato según su capacidad y la de su navegador (tamaño de la pantalla, fuentes que tiene instaladas…). Por ello y para no fustrarnos, por el momento no vamos diseñar los documentos basándonos en como lucen en nuestro navegador sino que debemos centrarnos en proporcionar un contenido claro y bien estructurado que resulte fácil de leer y entender.

No te desesperes por lo que acabas de leer. HTML tiene dos ventajas que lo hacen prácticamente imprescindibles a la hora de diseñar una presentación web: Su compatibilidad y su facilidad de aprendizaje debido al reducido número de tags (etiquetas) que usa.

Básicamente, los documentos escritos en HTML constan del texto mismo del documento y las tags que pueden llevar atributos. Esto llevado a la práctica, vendría a ser:

<tag> texto afectado </tag>

La tag del principio activa la orden y la última (que será la del principio precedida del signo /) la desactiva. No todas las tags tienen principio y final pero esto lo veremos más adelante.

Editores y convertidores

Antes de comenzar a trabajar sobre un editor, te recomendaría que vieras el código fuente de nuestra página principal. Todos los navegadores dan la opción de editarla (clic derecho /ver código fuente). Si visita otras páginas y visualiza su código fuente encontrará similitudes en la forma en que están organizadas las páginas y en las tags utilizadas.

¿Dónde hay que editar el código fuente? Pues, si usted es usuario de Windows le bastaría con el Bloc de Notas y si utiliza Macintosh con el Simple Text. Si utiliza procesadores de texto más potentes debe guardar sus documentos como “solo texto” ya que HTML ignora todos los espacios en blanco. Una vez guardado convierta la extensión de texto por la extensión html o htm (en los sistemas DOS). Por el momento estaremos utilizando el Bloc de Notas.

Los convertidores se utilizan para tomar los archivos de un procesador de textos y convertirlos a HTML. Pero debido a la propia limitación de este lenguaje, por muy elegante que hagamos un documento en nuestro procesador, un convertidor no obrará milagros y quizá acabe por crear cosas ilegibles en HTML. Además, la mayoría de los convertidores no convierten imágenes y no automatizan los vínculos hacia los documentos en Web debiendo corregir esto de manera manual.

Documento HTML

<html> <head> <title> <body>

Estructura básica de un documento HTML: Cabecera y cuerpo del documento

Tres son los tags que describen la estructura general de un documento y dan una información sencilla sobre él. Estos tags no afectan a la apariencia del documento y solo interpretan y filtran los archivos HTML.

  • <html>: Limitan el documento e indica que se encuentra escrito en este lenguaje.
  • <head>: Especifica el prólogo del resto del archivo. Son pocas las tags que van dentro de ella, destacando la del titulo <title> que será utilizado por los marcadores del navegador e identificará el contenido de la página. Solo puede haber un título por documento, preferiblemente corto aunque significativo, y no caben otras tags dentro de él. En head no hay que colocar nada del texto del documento.
  • <body>: Encierra el resto del documento, el contenido.

Hagamos nuestra primera pagina web!
Escribe este código en un bloc de notas, luego lo guardas como ejemplo1.htm (asegurate de colocar el “.htm” al final del nombre de tu archivo. Guardalo en un lugar sencillo de encontrar.

 <html>
<head>
<title>Ejemplo 1</title>
</head>
<body>
Hola mundo
</body>
</html>

ver ejemplo

Ahora ve a abrir tu archivo, solo da doble clic para abrirlo con un navegador.

Primeros pasos

<h1> <p> <br />

Tres son la tags que describen la estructura general de un documento y dan una información sencilla sobre él. Estas tags no afectan a la apariencia del documento y solo interpretan y filtran los archivos HTML.

<h1>, <h2>, <h3>… : Titulos. Sirven para dividir el texto en secciones. Se pueden definir seis niveles de titulares, el texto que deseamos que sea un titulo se pone entre las tags <h1> Titulo de página uno </h1>.  Se definen mediante las tags <h1>…..</h1> hasta <h6>…..</h6>

<p>: Párrafos. En principio, sin entrar en detalles de alineación u otras características, digamos que se definen por las tags <p> Texto de nuestro documento </p>. Esta tag, en un principio, se diseñó para saltar de párrafo por lo que puede ir sola “<p>” al final de un texto indicando que a continuación se quiere una línea en blanco aunque le recomendamos que se acostumbre a utilizarla abriéndola y cerrándola.

<br>: Saltos de línea. Esta tag sirve para realizar un salto de linea, puede poner tantas como desee y realizará un salto de línea por cada una de ellas.

<!– –>: Comentarios. Son directivas que nunca se mostrarán a través del navegador y que le servirán para recordatorios en futuras revisiones del documento.
Bien, recuperemos nuestro ejemplo y agreguemos nuestros nuevos conocimientos. <!– esto es un comentario –>

 <html>
<head>
<title>Ejemplo 2 – Mi primera pagina web</title>
</head>
<body>
<h1>Mi primera pagina web </h1>
<!– Aqui va un comentario que no es
interpretado por el navegador –>
<p>Hola mundo, esta es un página con titular,
que tiene también un párrafo y unos cuantos
saltos de línea.</p>
<p>Construir una página web es mucho más sencillo de lo que creí.<br>
Quiero seguir practicando!</p>
</body>
</html>

ver ejemplo

Ahora ya conoces lo básico del html. Te espero el próximo viernes con más sobre html.

Si te gusto este artículo compártelo con tus amigos en facebook y twitter, y no te olvides de comentar. 
Danny Guzman

About Danny Guzman

Esposo, cristiano, emprendedor y amante de la música. Hago diseño web/gráfico, trabajo con redes sociales, marketing y más. Me encanta tocar mi guitarra, bloguear y tomar café. I speak English too.

2 Comments