Como programar un sitio web HTML5 en Bloc de Notas

Existen muchos que piensan que programar un sitio web consiste en hacer un documento en Word y guardarlo en html. Pues no! Eso seria en todo caso guardar un documento de Word en html (risa) y en todo caso un programador de HTML5 que se respete jamas publicaría un sitio web hecho de esa manera. Por lo que para resolver estas y otras dudas decidimos realizar este tutorial, empecemos.

Es Difícil programar un sitio web? En realidad Si!. Aprender la estructura del HTML, la forma en la debe darse el estilo para que se vea bien y el comportamiento probablemente con Javascript o PHP, es una tarea realmente colosal y académica, e incrementa dependiendo del proyecto web. Mas sin embargo eso no quiere decir que un simple mortal no lo pueda aprender, claro que cualquiera lo puede aprender!. De la misma manera que se aprende otro idioma como ingles, francés o alemán, al principio parece imposible lograrlo, pero conforme memorizas un par de palabras, de pronto te de das cuentas que puedes hacer algo con lo poco aprendido. Con el tiempo te volverás experto y podrás usar el lenguaje para lo que desees, desde dar las gracias hasta hablar de una operación quirúrgica.

Sitio WEB Avanzado

Actualmente la versión de HTML vigente es la numero 5 en otras palabras lo actual es HTML5, aunque ya tiene varios años desde su lanzamiento, a crecido tanto que parece que llego para quedarse.

Es un lenguaje de programación? Si lo es, de hecho su nombre lo dice: HyperText Markup Language (Lenguaje de marcas de hipertexto), por lo que al aprender esto podrás llamarte programador de HTML5, que sucede con la rivalidad entre programadores sobre el HTML y otros lenguajes de programación. Bien esto consiste grandemente en la complejidad y los usos de los lenguajes de programación Madre, como es el caso de el lenguaje C, Java, Phyton entre otros, que son mas difíciles de aprender, mas no imposible para cualquiera que quiera aprenderlos, en otra ocasión traeremos un tutorial para aprender lenguaje C o Java.

Bien, habiendo introducido a los nuevos a esto del lenguaje de Marcas de Híper Texto, pasamos a mostrarles que hacer un sitio básico es sencillo. Para esto copiare y pegare el código que nos servirá para hacer el sitio web inicial. La version de un hola mundo nuestra.

 

Todos tenemos una estructura básica al realizar un sitio web y en HTML5 no hay excepción, lo que es muy fácil de hacer ya que HTML5 tiende a ser una estructura muy semántica y es lo mejor de todo, sus etiquetas son muy básicas por eso vamos a ver como es una Estructura básica de un documento de HTML5. Este lenguaje tiende a hacerse mas simple y humano al escribir el código.

Antes que nada abramos el block de notas de Windows o Gdit si estamos en Linux, TextEdit si estamos en MAC. Cualquier editor de texto que usen en su sistema operativo servira.

Empecemos escribiendo el  DOCTYPE, es muy sencillo de escribir y ha sido recortado en html5,  después la etiqueta HTML la cual tiene el atributo LANG para el idioma del sitio.Tienes que escribir todos los caracteresno solo DOCTYPE, En otras palabras: <!DOCTYPE html> si uno de los caracteres de apertura y cierre no esta  el codigo funcionara de forma incorrecta o no funcionara en el peor de los casos.

 

1

2

3

4

5

<!DOCTYPE html>

 

<html lang="es">

 

<head>

Muy sencillo para empezar ¿no?, ahora toca el turno del titulo, este sigue siendo el mismo, con diferencia de la etiqueta META, donde le decimos al navegador que tipo de codificado es el documento html, de preferencia usemos el UTF-8 que acepta nuestros acentos y ñ con mas compatibilidad.

En realidad es algo demasiado corto y que no quita mucho tiempo, todo esto sigue estando en la etiqueta HEAD que no ha cambiado para nada, es algo muy parecido a XHTML, la cuestión es resumir el código.

1

2

3

<title>Titulo de la web</title>

 

<meta charset="utf-8" />

Pasemos a las etiquetas link, son las que enlazan nuestros estilos CSS, los Favicones y los Feeds. Estas son muy cortas con excepción de el feed que sigue casi igual, solo que ahora usaremos algo que ya existía,  el atributo REL que usamos en los links para cuestiones de SEO.

REL es para decir, que estamos enlazando,  ya que el atributo TYPE no se utiliza a menos que usemos para enlazar el FEED.

1

2

3

4

5

<link rel="stylesheet" href="/estilos.css" />

 

<link rel="shortcut icon" href="/favicon.ico" />

 

<link rel="alternate" title="Libreria RSS" type="application/rss+xml" href="/feed.rss" />

Ya terminamos con la parte no visible de la pagina web, es el turno del cuerpo o BODY, esta etiqueta sigue siendo útil para lo mismo, pero a continuación empieza algo interesante que son las etiquetas de la estructura de el sitio visual.
La etiqueta HEADER es la cabecera donde va el nombre del sitio, el logotipo y descripción de la pagina web, ejemplo.

Recomiendo que solo se use un H1 en una cabecera por cuestiones de SEO, pero es posible poner mas de un H1 y HEADER.

1

2

3

4

5

<body>

<header>

     <h1>Mi sitio web</h1>

     <p>Mi sitio web creado en html5</p>

</header>

Como pueden ver, la etiqueta HEADER es muy equivalente a crear un DIV con ID=”header”, pero ahora tenemos una etiqueta especial para ello.

Pasamos con el contenido o SECTION usando H2 de titulo y el contenido en etiquetas P dentro de una etiqueta llamada ARTICLE para articulos o post, esto por cuestiones de SEO que es muy recomendable tambien, ejemplo.

1

2

3

4

5

6

<section>

    <article>

        <h2>Titilo de contenido<h2>

        <p> Contenido (además de imágenes, citas, videos etc.) </p>

    </article>

</section>

SECTION es el equivalente a un DIV con ID=”contenido” y ARTICLE a un DIV con ID=”post” o “articulo”

Otra etiqueta interesante es la etiqueta ASIDE, lo que viene siendo nuestro SIDEBAR o barra lateral  y es muy fácil de implementar con H3 de titulo y P de contenido dentro de ella.

1

2

3

4

<aside>

         <h3>Titulo de contenido</h3>

         <p>contenido</p>

</aside>

ASIDE es nuestro equivalente a un DIV con ID=”sidebar” o “barra”

Y finalizando con el pie de la pagina con la etiqueta muy obvia FOOTER , un ejemplo.

1

2

3

<footer> </span>

<p style="padding-left: 30px;"><span style="color: #333399;"> Creado por mi el 2011</span></p>

<span style="color: #333399;"></footer>

FOOTER es nuestro equivalente a un DIV con ID=”footer” o “pie”

Ahora veamos nuestro código completo:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

<!DOCTYPE html>

 

<html lang="es">

 

<head>

<title>Titulo de la web</title>

<meta charset="utf-8" />

<link rel="stylesheet" href="/estilos.css" />

<link rel="shortcut icon" href="/favicon.ico" />

<link rel="alternate" title="Pozolería RSS" type="application/rss+xml" href="/feed.rss" />

</head>

 

<body>

    <header>

       <h1>Mi sitio web</h1>

       <p>Mi sitio web creado en html5</p>

    </header>

    <section>

       <article>

           <h2>Titilo de contenido<h2>

           <p> Contenido (ademas de imagenes, citas, videos etc.) </p>

       </article>

    </section>

    <aside>

       <h3>Titulo de contenido</h3>

           <p>contenido</p>

    </aside>

    <footer>

        Creado por mi el 2011

    </footer>

</body>

</html>

 

Ahora le decimos guardar y escribimos index.html, en la ubicación donde deseemos guardarlo, el archivo al darle doble clic abrirá en el navegador por defecto (firefox, iexplorer, safari, chrome) como un sitio web normal, lo único que desde nuestra computadora, no desde el internet.

Bien, Esto es un sitio web básico y programado desde un block de notas común, si avanzan un poco mas pueden pensar en programar html en un editor de lenguajes como NotePad++ , BlueFish o DreamWeaver, he mencionado los mas populares, mas no los únicos.

 

En WebSupportels.com Somos expertos en el diseño y programación de sitios web, atendemos desarrollos desde un sitio web personal hasta un portal con miles de usuarios, tenemos mas de 15 años en la rama, ya vimos y aprendimos bastantes lenguajes y librerias de codigo útiles para su sitio web. Llámenos y podría costarle su sitio web menos de lo que se imagina.