La idea detrás de este articulo, es ayudar al lector a introducirse en el mundo Web y mas propiamente en la creación de las paginas.
Ademas de lo anteriormente expuesto, también se desea que el lector, aprenda a crear paginas valiendose de las mejores practicas y las técnicas mas adecuadas.
Manos a la obra.
Antes de iniciar deberíamos bajarnos algún programa para la edición de las paginas. En Internet existen infinidad de editores y muchos de ellos gratis. A mi en particular me gusta Aptana Studio, puedes buscar los detalles de la descarga aquí: http://www.aptana.com/.
Entendiendo el HTML.
HTML, es una lenguaje de marcado mediante el cual le indicamos al navegador de Internet, como deseamos que se renderice la información;
Etiqueta abierta:
<tag> contenido </tag>
Etiqueta cerrada:
<tag/>
Como apreciara, la etiqueta abierta permite contenido u otras etiquetas dentro de si, por ejemplo si usted desea hacer un párrafo, podría hacerlo de la siguiente manera:
<p> Un párrafo </p>
Las etiquetas cerradas, a diferencia, son utilizadas para renderizar elementos sin contenido textual, algunos ejemplos:
Cambio de linea:
<br/>
Imagen:
<img src=”unaimagen.png”/>
Creando el esqueleto de nuestra pagina Web
Una pagina Web, en su forma mas general se compone por dos elementos, el encabezado y el cuerpo del documento. Ambos elementos se encapsulan dentro de las etiquetas “html”, que indica que estamos describiendo un documento HTML.
<html>
<head>
</head>
<body>
</body>
</html>
Si copias este código a tu editor de texto y lo salvas como index.html, puedes abrirlo en tu navegador favorito con lo cual obtendrás una pagina en blanco, lista para empezar a ser trabajada.
Un punto importante, que debemos entender, es que el body contendrá el contenido que se vera en la pagina y el encabezado contendrá la meta información para la pagina, mas adelante mostraremos los elementos que se pueden incluir en esta sección.
Por ejemplo, si usted coloca algún texto dentro de los tags body, y refresca la pagina en su navegador, podrá ver el contenido que escribió. Como notara, no necesita herramientas muy sofisticadas, inclusivo con el editor vi en Unix o notepad en Windows, puede ser suficientes, sin embargo es recomendado un IDE, que ayuda en el autocompletado de los tags, entre otras opciones.
CSS
Los CSS o estilos en cascada, son utilizados para darle formato a nuestra pagina, si hacemos nuestro trabajo correctamente, nunca deberíamos tener etiquetas para dar estilo a nuestras paginas, me refiero aspectos tales como: color, tipografías, bordes, alineamientos, etc.
Muchas de las etiquetas con las cuales podemos trabajar, contienen un estilo por defecto, por ejemplo:
<h1> Un titulo de tipo 1 </h1>
Si colocamos este texto, dentro de la etiqueta “body”, podemos apreciar que nuestro texto tiene un tamaño bastante grande, se encuentra sombreado e incluye márgenes izquierdos y superiores. En algunas ocasiones, podríamos desear personalizar desde cero nuestra pagina, de tal manera que las etiquetas no tengan ningún tipo de estilo, para ello podemos utilizar una técnica llamada “CSS reset” y para llevarla a cabo, podemos utilizar algunas librerías existentes, a mi en particular me gusta la de YUI, para ello solo incluya dentro de las etiquetas “head” la siguiente linea:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css"/>
Una vez incluida esta linea, actualice su pagina, en el navegador de Internet y notara que su etiqueta “h1”, cambiara el estilo, mostrandose como un simple texto. De esta manera, usted puede empezar a dar el estilo que usted mejor prefiera.
Mas adelante estudiaremos la forma de utilizar los CSS, para dar formato, por ahora solo quería mencionar que existen y la forma de resetearlos.
Colocando el titulo a nuestra pagina.
Lo ultimo que vamos ha hacer, en esta primera entrega del tutorial, sera colocar el titulo de nuestra pagina, antes de aprender como, quiero dejar claro que al referirnos a titulo, nos referimos al titulo en la ventana del navegador y no en la pagina propiamente.
Para colocar el titulo, simplemente el siguiente tag, dentro del tag “head”:
<head>
<title>Mi titulo</title>
</head>
De esta manera, el titulo sera mostrado.
Esto es todo por ahora, pronto la segunda entrega.
Comentarios