27

May


Iniciarse con la maquetación

Autor: David

Ayer vimos algunos cosejos básicos a la hora de diseñar una web, hoy vamos a ver lo básico para empezar a maquetar ese diseño en HTML.

Para empezar necesitamos un editor. En el mercado existen multitud de ellos, más o menos completos, como puede ser Dreamweaver o FrontPage de MS Office. Para la gente que se inicia yo no recomendaría Dreamweaver, ya que pienso que es mucho más complicado su uso, aunque si es cierto que proporciona muchas más herramientas. El uso de estos dos programas, es adecuado si no conoces el código HTML, ya que hacen ese trabajo por ti.

Yo particularmente, no utilizo ninguno de los dos, ya que me gusta escribir a mano todo el código, así lo controlo perfectamente y no se me incluye código no deseado que normalmente incluyen estos programas. Con el simple editor de notas de windows, puedes escribir el código, pero es más adecuado un editor un poco más potente que te ponga el código en colores, para facilitar la visión, por eso utilizo HomeSite o notepad2.

El código HTML está constituido por TAGS (etiquetas), todo lo que esté contenido dentro de la etiqueta de inicio y la de cierre estará afectado por ella. Ejemplo de estiquetas:

HTML:
  1. <b></b>  negrita
  2. <i></i> cursiva
  3. <u></u> subrayado
  4. <a></a> enlace
  5. ...

 

Las etiquetas pueden tener a su vez atributos, que se incluyen en la etiqueta de inicio, por ejemplo href permite incluir la URL a la que se irá al pinchar en el enlace:

HTML:
  1. <a href="http://www.bitacoraweb.com/">Bitacoraweb</a>

Pues bien, lo que tienen en común todas las web es la estructura básica, con los tags: <html>, que indica que se trata de una página con código html, <head>, es la zona donde se incluyen códigos de optimización para buscadores y algunos scripts, <body>, zona donde se va a incluir el contenido de la web.

 

HTML:
  3. <title>Título de nuestra web</title>
  4.  
  5.  
  6. </head>
  8.  
  9.  
  10.  
  11.  
  12. </body>
  13. </html>

Este código ya podríamos guardarlo en un archivo index.html, si lo abrimos con el el explorador, veremos que la ventana es nombrada mediante la etiqueta <title></title> dentro de <head></head>

Salu2

Básicos


1 Comment Send your comment ↓

  1.   BitacoraWeb » Maquetación básica para Web - Mayo 29, 2008 - #

    [...] el último post de esta serie de consejos básicos para los que se inician en el desarrollo web, comentamos que [...]


Leave a Reply