HTML Básico para emprendedores

HTML Básico. Etiquetas más básicas.

HTML Básico 1 para emprendedores

Aprender HTML Básico es muy fácil. Y si tienes una página web, no importa si está hecha con WordPress o cualquier otro CMS (Sistemas de Gestión de Contenidos), es muy importante que sepas algo sobre HTML. Además HTML Básico te ayudará a enriquecer tus entradas si tienes un blog.

Con estos pequeños artículos, empezando por este llamado HTML Básico aprenderás lo más necesario y en poco tiempo podrás meter mano en el código web de tu portal. Pero recuerda: “debes hacer una copia de seguridad antes de ponerte a retocar algo, no sea que hagas algo mal y no puedas volver atrás y solucionarlo”.

Bueno vamos a empezar. Lo primero que haremos es buscar en nuestro ordenador (computador) un programa llamado el Bloc de Notas. Este será nuestro editor de html. Coloca un enlace de este programa en el escritorio para que puedas acceder a él fácilmente.

Luego creas una carpeta en el escritorio donde guardarás todo lo que hagas en este tutorial de HTML.

1. Las etiquetas. Lo primero que aprenderemos es que el lenguaje HTML está basado en un conjunto de palabras claves que van dentro del signo mayor que “<" y menor que ">". A esto se le llama etiquetas. Las etiquetas las hay, en su mayoría, de dos tipos: de apertura, ej. <nombre-de-la-etiqueta>; y de cierre, que se reconoce porque el nombre de la etiqueta va precedida de una barra inclinada "/", ej. </nombre-de-la-etiqueta>. También las hay que no tienen etiqueta de cierre, porque su nombre ya incluye al final la barra inclinada, ej. <nombre-de-etiqueta/>.

2.  Declarando el HTML. Lo segundo que aprenderemos en HTML Básico 1 es que para que los navegadores como Internet Explorer, Google Chrome u otros, reconozcan tu documento como una página de html, hay que declararlo (Línea 01).

  1. <!DOCTYPE Html>

3. Declarando el lenguaje. Lo tercero es declarar que el lenguaje que se va a utilizar es HTML. Esto se hace con dos etiquetas: una de apertura (Línea 02) y una de cierre (Línea 03). Nunca se debe olvidar cerrar una etiqueta. Para cerrarla, recordemos, se coloca el nombre de la etiqueta precedida de una barra inclinada "/".

  1. <!DOCTYPE Html>
  2. <html>
  3. </html>

4. Cabecera de la web. Ahora vamos a dividir el código en dos partes. Una primera que no es visible y que sirve para dar información de la web (y otras cuestiones que veremos más adelante). Esta parte no visible se llama "head". Está compuesta por dos etiquetas: una de apertura (Línea 03) y una de cierre (Línea 04). Y ambas etiquetas están anidadas o van dentro de las etiquetas "html".

  1. <!DOCTYPE Html>
  2. <html>
  3.    <head>
  4.    </head>
  5. </html>

5. El cuerpo de la web. Esta es la segunda parte principal del código. Es la parte el visible de la web y se llama "body". También tiene dos etiquetas: una de apertura (Línea 05) y una de cierre (Línea 06). Como las anteriores etiquetas, estas también están anidadas entre las etiquetas "html".

  1. <!DOCTYPE Html>
  2. <html>
  3.    <head>
  4.    </head>
  5.    <body>
  6.    </body>
  7. </html>

6. El título de la página web. Ahora vamos a bautizar nuestra página web. Para ello crearemos una etiqueta de apertura y cierre llamada "title". Dentro colocaremos el título de nuestra página web. Esta es la única parte visible hasta ahora: el título se puede leer en la pestaña de su navegador favorito.

  1. <!DOCTYPE Html>
  2. <html>
  3.    <head>
  4.       <title>Título de nuestra web</title>
  5.    </head>
  6.    <body>
  7.    </body>
  8. </html>

7. Cómo ver el html de una web. Este es un recurso muy útil a la hora de aprender HTML: poder ver cómo fueron hechas nuestras páginas web favoritas. Verlo es muy sencillo: abre una de tus páginas web favoritas o incluso puedes hacerlo con esta misma. Luego das clic en el botón secundario (el de la derecha) de tu ratón. En este menú desplegable que se abre, haz clic en la línea que dice "Ver código fuente de la página". Y esa página que se abre es el armazón de tu web favorita. Y no sólo está el html, si no muchos otros lenguajes.

8. Nuestra primera página web. Ahora vamos a escribir los primeros textos de nuestra web. Para hacerlo utilizaremos dos etiquetas nuevas: la etiqueta de título "h1" con la cual se construye el título principal de la página; y la etiqueta de párrafo "p" con la que construiremos nuestros tres primeros párrafos. Ambas tienen su etiqueta de apertura y de cierre. No está de más decir que esto va dentro de las etiquetas de "body" o cuerpo de la web.

  1. <!DOCTYPE Html>
  2. <html>
  3.    <head>
  4.       <title>El blog de fotografía</title>
  5.    </head>
  6.    <body>
  7.       <h1>Cómo tomar buenas fotografías</h1>
  8.       <p>Tome una buena cámara.</p>
  9.       <p>Mire por el visor y enfoque el objeto a fotografiar.</p>
  10.       <p>Dispare.</p>
  11.    </body>
  12. </html>

9. Cómo construir nuestra primera web. Ahora viene lo mejor: ver nuestra página web. Es muy sencillo: primero abre el Bloc de Notas; escribe luego el código HTML del punto 8; luego en "Archivo" del Bloc de Notas, haz clic en "Guardar como"; coloca como nombre "elblogdefotografia.html" y guárdalo en la carpeta que has creado para guardar los ejercicios. Un punto muy importante: si quieres cambiar el título de la web, no olvides colocar ".html" o ".htm". Si no haces esto, no podrás ver la web. Y para finalizar, ve a la carpeta y haz clic sobre el documento guardado. Esta es tu primera página web. ¿Ves lo fácil que es? Si lo has hecho bien, deberás ver algo como lo de la imagen siguiente:

Mi primera página web

Mi primera página web

10. Ejercicio para afianzar conceptos de HTML Básico.

  1. Abre el Bloc de Notas
  2. Escribe el armazón principal: declaración html y etiquetas "html", "head" y "body". No olvides colocar las dos, apertura y cierre.
  3. Colócale un título a la web. No olvides que se utiliza la etiqueta "title".
  4. Dentro del "body" coloca un título "h1" y tres párrafos "p". Puede ser texto simulado.
  5. Guarda el documento con la extensión ".html". No olvides el punto (.).
  6. Abre el documento guardado o página web.
  7. Para finalizar: memoriza las etiquetas y practica mucho con lo aprendido en HTML Básico.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *