Clase de diseño web #001
Posted by admin | Posted in diseño web | Posted on 23-11-2009
Tags: body, br, css, diseño web, etiquetas, h1, h2, h3, h4, h5, h6, head, html, p
0
Es muy común ver hoy en día aún un mal uso del html, y mucho peor el uso del css, aunque exista gente que se las ingenie para hacer cosas totalmente increibles como llamar a 11 hojas de estilo, y escribir un codigo html dentro de otro, aunque parezca exageración, en mi post anterior publiqué “Dolor de cabeza #01” que es simple una muestra de lo que es un html con esas características, y lo peor una agencia de publicidad en la cual trabajé.
Volviendo al tema, es feo ver que no se sepa realizar una maquetación eficiente, y mucho más proviniendo de diseñadores mal capacitados. Existen terribles ejemplos de lo perjudicial que puede llegar a ser el famoso “cut and paste”, hoy es poco usual pero existen sitios basados en tablas, sin repetar estándares web, con los estilos incluidos dentro del html.
Muchos no concen los estándares web y bueno vamos a comenzar a desasnar un poco a la gente con algunos tips que son muy simples y conocidos pero por lo que veo no todos están al tanto.
Comencemos con como es la estructura básica de un documento html. Este se escribe con lo que se denominan tags o etiquetas la principal es la etiqueta html. Todas las etiquetas deben cerrarse, si “todas” veamos unos ejemplos:
Primero abrimos cualquier editor de textos, yo recomiendo el que uso para escribir código que es el Geany.
<html>
<head>
<title>Hello World</title>
</head>
<body>
Hello World!
</body>
</html>
Despúes de escribir lo guardamos como helloworld.html
Éste es un clásico Hello World, explicaré un poco lo que está ahí escrito.
Los documentos html estan conformados por dos partes escenciales, la cabecera que se encuentra delimitada por las etiquetas <head> y </head> y el cuerpo que es el que se encuentra entre las etiquetas <body> y </body>.
El encabezado del documento es dónde se realizan todas las “configuraciones” del documento y donde se le asigna el título del mismo entre las etiquetas <title> y </title>
En el cuerpo o “body” es donde escribiremos todo lo que se verá al ingresar al la página web.
En este caso el texto no posee ninguna característica en general para que veamos las distintas alternativas a continuación.
Todo el documento debe estar entre las etiquetas html, eso es algo que no debemos olvidar nunca.
Ahora hagamos un nuevo archivo al cual llamaremos primerdocumento.html:
<html>
<head>
<title>Primer documento</title>
</head>
<body>
<h1>Título principal</h1>
<h2>Subtítulo</h2>
<p>Esto es un párrafo, si queremos poner un salto de linea se escribe el tag "br" <br /> y en el sitio vemos el salto de línea.</p>
<p>Acá iniciamos un segundo párrafo para que vean las diferencias de los saltos de línea como este.</p>
</body>
</html>
Expliquemos el código, lo nuevo que incorporamos son 4 etiquetas:
La etiqueta “h1″, es para destacar los encabezado en primer nivel.
La etiqueta “h2″, es para destacar los encabezados en sgundo nivel y así sucesivamente podemos hacerlo hasta el “h6″
Ente las etiquetas “p” es donde delimitamos los párrafos que escribimos. Ahí es donde notamos la diferencia entre el “br” que es un salto de línea simple, y el “p” que genera un doble salto de línea.
Hasta acá llegamos con la primer clase de html, voy a ir escribiendo las clases todos los lunes, para que puedan ir aprendiendo desde la base como se diseña un sitio web, desde el código, como pasar un archivo diseñado en programas de diseño como GIMP o InkScape (menciono únicamente soft libre ya que yo trabajo bajo sistemas operativos linux).
Lo que veremos en la siguiente clase:
Le ponemos estilo al “Primer documento”, tambien vamos a ver la etiqueta !DOCTYPE, como crear enlaces, insertar imágenes, las diferencias entre “div” y “table” (para que usamos cada uno) y algunos otros temas.