Cabecera curso fácil html y css

Estructura y sintaxis de HTML | Curso fácil de HTML5 y CSS #2º

Vamos a ver un poco más de la sintaxis de HTML y a saber como podemos empezar a escribir código.

Índice general del «Curso de HTML5 y CSS»:

  1. Introducción
  2. La sintaxis de HTML
  3. Los atributos
  4. Formalidades al escribir HTML
  5. Introducción a CSS
  6. Añadir CSS a una página
  7. Selectores básicos
  8. Elementos inline y block

¿Cómo crear un documento HTML?

Partiendo de que un documento HTML está compuesto íntegramente de texto, para ponernos a programar nuestra primera página web tan solo necesitamos un editor de texto, como por ejemplo el “Bloc de notas” que viene con Windows, o si eres usuario de Mac el “TextEdit”.

Lo bueno de utilizar un programa tan básico como el Bloc de notas, es que los documentos de texto que crea son simplemente eso, texto, sin nigun formato. De esta manera, solo tenemos que editar el documento y guardarlo con la extensión .html, y así sabemos que el resultado será un documento con texto plano, es decir texto sin formato (color, negritas, tamaño, . .).

NOTA:

Cuando vayamos a guardar el archivo, la ventana de “Guardar como” nos dejará elegir el tipo de codificación, es recomendable elegir utf-8 por una cuestión de compatibilidad.

Editores específicos

Aunque es recomendable comenzar a aprender HTML con un editor de texto simple, existe un buen abanico de software específico que nos hará el trabajo más fácil a medida que vayamos invirtiendo horas en la creación de código. Algunos de estos programas son, Notepad++, Brackets o Sublime, los dos primeros totalmente gratis.

Este tipo de editores disponen de ayudas como cierre automático de etiquetas, paréntesis y comillas, o un sistema que nos va sugiriendo código según vamos escribiendo. Pero una de las mayores ventajas, es cómo utiliza diferentes juegos de colores para diferenciar los distintos elementos del código, haciendo que sea mucho más cómoda y rápida la lectura de los elementos.

A las muchas ventajas que nos ofrecen estos programas, podemos sumar las que nos traen las extensiones que podemos ir añadiendo según nuestras necesidades.

Captura de la interface de Brackets
Interface de Brackets

También podemos utilizar un editor online, como por ejemplo Thimble: https://thimble.mozilla.org/es/

Estructura básica

Una vez que ya tenemos el programa con el que vamos a trabajar, veamos cómo crear un documento HTML.

Lo primero que debemos escribir es la declaración <!DOCTYPE html>, con ella le indicamos a los navegadores, que están leyendo un documento bajo el estándar HTML5. De esta manera el navegador sabrá qué versión de HTML se está utilizando y cómo debe interpretar el documento.

NOTA:

La finalidad de un navegador es leer e interpretar un documento HTML y mostrarlo en pantalla.

<html>

Esta etiqueta engloba todo el contenido de la página web y debe ir después de la declaración <!DOCTYPE html>. Es el elemento raíz del documento.

<head>

Es el primer elemento que se debe poner dentro de las etiquetas <html>. Sirve para contener los metadatos que vayamos a incluir en la página, si eso de los metadatos te suena poco o nada, no te preocupes, más adelante los iremos conociendo detalladamente, por ahora nos basta con saber que son la información que no se muestra en la página, pero que es necesaria.

<body>

El elemento body debe de ir a continuación de <head></head>, y es el elemento que contiene todo lo que es visible en una web, los títulos, los párrafos, las imágenes, los menús, etc.

Estos tres elementos que acabamos de citar son los principales, veamos un ejemplo.

Estructura principal HTML
2.1 Estructura principal HTML

Para terminar el capítulo, pongamos en práctica lo visto. Vamos a crear una página muy sencilla con un título de sección y dos párrafos.

<!DOCTYPE html>
<html>
       <head>
       <head>
       <body>
              <h1>Este es el título de sección</h1>
              <p>Este es el primer párrafo de mi web</p>
              <p>Este es el segundo y último párrafo de mi web</p>
       </body>
</html>

// 2.1

Una vez que hemos acabado de escribir el código en nuestro documento, lo guardamos con la extensión .html y la codificación UTF-8. Para ver el resultado debemos de abrir el documento html en un navegador. Analicemos cómo aparecen los textos en la página.

Resultado en pantalla del código 2.1
2.2 Resultado del código 2.1

Con la etiqueta <h1> le hemos indicado al navegador que el texto que contiene queremos que sea un título. Por lo que el navegador le ha dado ciertas características: lo ha puesto en negrita y ha aumentado su tamaño.

Con las etiquetas <p>, le hemos indicado que queremos que el texto que contienen sea un párrafo. Así que el navegador los presenta con otras características: crea un espacio antes y después del texto para separar los diferentes párrafos.

NOTA:

HTML no es “case sensitive”, es decir, no diferencia entre minúsculas y mayúsculas, pero es recomendable escribir el código en minúscula.

En este segundo capítulo hemos conocido la estructura básica de un documento HTML y hemos realizado la primera práctica. En la próxima entrega de este curso básico sobre HTML veremos qué son los atributos.


Ir a Curso fácil de HTML5 y CSS 3ª parte

Deja una respuesta

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