HTML desde cero
Creado en Dreamweaver, HTML el ago 17En este post encontraras un poco de ayuda para dar tus primeros pasos en el mundo del HTML. Si lo que quieres es empezar a diseñar tus paginas web y aprender html desde cero, aquí te tratare de dar las bases para que puedas seguir aprendiendo.
Que veremos en este post
- Estructura de un archivo HTML
- Tu primero archivo en HTML
- Uso de parrafos y estilos
- Uso de links
- Insertar Imagenes
- Tablas
- Tu primera página web
Estructura de un arvhico HTML
No te espantes todavía, tal vez pienses que para crear una página web necesitas saber “programar” como muchos lo dicen. Tenemos que aclarar este punto antes que nada, diseñar páginas web en html no nos hace programadores; HTML es un lenguaje de marcado, a lo que me refiero con esto es que los navegadores como Google Chrome, Safari, Internet Explorer (el patito feo), etc interpretan este lenguaje de “marcado” y crean los elementos en pantalla. Esto no quiere decir que HTML sea un lenguaje de “programación”, es simplemente un lenguaje para crear estructuras.
Me desvié un poco del tema, volviendo a lo importante. La estructura de un archivo HTML esta basada en etiquetas, las etiquetas son pequeños textos que se abren y se cierran (huh?). Para “abrir” una etiqueta se utilizan los corchetes y el nombre de la etiqueta (<miEtiqueta>), para cerrar la etiqueta se utiliza la misma etiqueta pero escribiendo una diagonal antes del nombre de la etiqueta (</miEtiqueta>).
Sabiendo esto podemos ver la estructura clásica de un archivo HTML.
<DOCTYPE> <html> <head> <meta /> <title>Mi documento</title> </head> <body> Aquí va nuestro contenido </body> </html>Se que puede resultar un poco intimidante ver todo este código pero la mayoría de los editores de código pondrán todo este código de inicio para que empecemos a meter nuestro contenido. Sin embargo, es bueno saber como esta hecho nuestro documento.
Como podemos ver una etiqueta puede contener a otra, y asi sucesivamente. La etiqueta <html> contiene a la etiqueta <body> y la etiqueta <body> contiene todo lo que despliegan los navegadores. Todo lo contenido en la etiqueta <head> también es muy importante ya que aquí se contienen elementos como el titulo, las metatags (etiqueta meta) y muchas veces Javascripts.
Tu primer archivo HTML
Ahora si, después de conocer la estructura veamos como agregar un simple párrafo a nuestro documento en html.
La etiqueta para incluir parrafos es la etiqueta <p> y se cierra </p> como dijimos anteriormente. Esta etiqueta tiene muchos atributos que podemos utilizar para personalizar nuestro párrafo recien creado. Los atributos en HTML se definen dentro de la etiqueta de apertura. Veamos en el caso de nuestro etiqueta de parrafo como sería:
<p align="center">Este es mi primer parrafo en HTML!</p> Así de fácil y sencillo tenemos nuestro primer parrafo. Prueba tu archivo en tu navegador y veras que tu parrafo se encuentra perfectamente centrado en la página.
Otros atributos para nuestra etiqueta de parrafo son: id, class, title, dir y lang. Para ver un listado completo ve aquí.
Uso de links
Que sería de un archivo html sin vinculos. Le etiqueta que nos permite agregar un vinculo en HTML es <a> y tiene 2 atributos muy importantes, el primero es la url del vinculo que queremos y el segundo es un titulo que ayuda a los navegadores a indexar los enlaces entre sitios web. Entonces nuestro vinculo o link quedaría así:
<a href="http://www.yadahcl.com" title="Despacho de Diseño y Desarrollo Web">Visita mi sitio</a>Así de fácil, otra vez vemos que el código no debe intimidarte. Otro atributo que podemos darle a nuestro vinculo y uno muy importante a decir verdad es “target”, este atributo lo que hace es muy sencillo: define en donde queremos que se abre el vínculo. Por default todos los vinculos se abren en la misma ventana donde nos encontramos, pero si que tal si no quisieramos que el usuario se fuera de nuestra página cuando da clic en otro vinculo? Para esto le damos el atributo “_blank” y quedaría de la siguiente manera.
<a href="http://www.yadahcl.com" title="Despacho de Diseño y Desarrollo Web" target="_blank">Visita mi sitio</a>Como insertar imagenes en HTML
¿Que sería de la WWW sin imagenes? Solo sería un espacio lleno de información y colores planos. Para eso existe una etiqueta que te salvará la vida para agregar imagenes a tus sitios web. La etiqueta img es la encargada de desplegar las imagenes en nuestro contenido html. Recibe como la mayoría de las etiquetas atributos. Existen muchos atributos, pero 2 son básicos para una sintaxis correcta. Estos 2 atributos son: src y alt. src viene de source y lo que hace es indicar la url donde se encuentra nuestra imagen, alt indica un texto alterno que ayuda a la gente que no puede desplegar las imagenes para saber que debe haber ahi.
Suena a mucha información, pero al ver el ejemplo verás que sencillo es:
<img src"http://google.com/imagen.jpg" alt="Google Logo" /> Algo diferente vemos aquí, la etiqueta img como muchas otras que conocerás poco a poco es una etiqueta que se cierra dentro de la misma etiqueta que se abre. Para cerrar una etiqueta en la misma que se abre simplemente agregamos la diagonal antes del corchete que cierra.
Es muy importante tener la dirección correcta de la imagen para que se pueda desplegar correctamente.
Tablas en HTML (Sitios web a la antigüita)
Sin duda las tablas ya no se usan como antes, tratare de explicar este punto. Todos los sitios web en el pasado eran hechos con tablas y nada mas que tablas, ya que eran lo único que se conocía y lo mas fácil para realizar una página web. Hoy en día y con la evolución que ha tenido el internet, los sitios web se realizan con etiquetas llamadas <div>, estas etiquetas nos dan mas libertad a los diseñadores y desarrolladores web de manipular el código y tener un mejor resultado. Sin embargo no te desiluciones y pienses “Entonces para que me sirve esto?”, claro que te sirve! Todos debemos saber las bases de lo que hacemos, y aunque las tablas ya no son lo mejor para hacer una página web aun se utilizan para desplegar información tabular y datos.
La etiqueta <table> tiene muchos parametros y atributos que definir, ademas la estructura es muy importante. Primero debemos abrir la etiqueta table como es de esperarse, pero es muy importante definir cada renglon cuando estamos escribiendo el código y dentro de cada renglón debemos definir cada celda. Una tabla de 2 columnas y 2 renglones quedaría así:
<table width="300" cellspacing="0" cellpading="10"> <tr> <td>Celda </td> <td>Celda </td> </tr> <tr> <td>Celda </td> <td>Celda </td> </tr> </table> Sencillo no? OK, se que si lo ves por primera vez puede ser un poco intimidante ver tanto código. Pero si nos detenemos un poco y lo razonamos no es nada complicado. Una tabla contiene renglones y los renglones contienen celdas, así de fácil y sencillo.
Ahora, la etiqueta table necesita parametros especiales para “funcionar”. El primero y el mas importante es width que define el ancho que tendrá nuestra tabla. Se puede expresar en porcentaje o en pixeles, si es un porcentaje escribimos width=”70%” y si es en pixeles solo ponemos el numero de pixeles.
Otro atributo importante es cellspacing y cellpadding, ambos se expresan en pixels poniendo solo el numero. Cellspacing corresponde al espacio entre una celda y otra. Cellpadding sin embargo funciona como un “rellendo” a la celda. Es decir, si nuestra celda mide 200 pixeles de ancho y nosotros agregamos un cellpadding de 10, la celda realmente medira 220 pixeles.
¿Porque 220 si solo le agreamos 10 pixeles? Es muy fácil, el padding en html y css funciona de la siguiente manera: Cuando un usuario agrega un padding o en este caso cellpadding se agrega el “relleno” a cada uno de los lados del elemento. En este caso de lado izquierdo, derecho, arriba y abajo de la celda. El padding ayuda mucho para que nuestros elementos dentro de la celda no se vean “apretados”.
Tu primera página en HTML
Muy bien, has llegado al final de este pequeño camino. Ahora trata de hacer algo con lo que aprendiste, es muy fácil aquí te doy unos tips sobre como hacerlo: Crear una tabla con la estructura de tu página web, agrega imagenes y vinculos y dale forma hasta que te guste.
Espero te haya servido este pequeño, muy pequeño tutorial sobre las bases de código HTML. Si te gusto dale “Me gusta” o “+1″ o “Tweet” dependiendo de tus preferencias (o todas).
