INICIO

APRENDER HTML DESDE CERO

Ya sabes que en el proceso de desarrollar una web, se usa el código HTML.

Y estás aquí porque quieres aprender el lenguaje HTML.

Ahora vamos a ver la estructura de un documento HTML y aprenderemos algunas etiquetas de marcado básicas.

¿Etiquetas?

Sí.

Las etiquetas son la base del lenguaje HTML.

Una etiqueta es una palabra encerrada entre dos triangulitos. Algo como <esto>

Las etiquetas son un envoltorio.

Según la etiqueta que usamos, el interior de ese envoltorio será interpretado de una forma u otra.

Por ejemplo, para poner una palabra en Negrita, la etiqueta (el envoltorio) correspondiente, sería <strong>.

En el editor HTML, se escribiría así:

Pues <strong>esto es texto en negrita</strong> y esto no.

La etiqueta de apertura es con los triangulitos <normales>.

La etiqueta de cierre es igual pero con una </barra>.

La interpretación, el navegador la hace sobre todo lo que está dentro del envoltorio.

En este caso el resultado sería:

Pues esto es un texto en negrita y esto no.

Nota: los <triangulitos> se llaman paréntesis angulares.

Pero bueno.

Antes de ponernos con todas las etiquetas que hay y no hay, vamos a ver cómo tenemos que estructurar un documento HTML.

Todos los documentos HTML son iguales.

Tienen una cabeza y un cuerpo.

Igual que tú.

Estructura de un documento HTML

<html>
  <head>
    <title>Cocodrilolandia</title>
    <meta charset="utf-8">
  </head>
  <body>
  Mi primera web. Bienvenidos a Cocodrilolandia.
  </body>
</html>

Empezamos siempre con la etiqueta <html>.

Observa que esta se <abre> al inicio del documento y se </cierra> al final.

Después, está el bloque <head>…</head> y el bloque <body>…</body>.

Vamos a ver qué poner en cada uno.

¿Qué ponemos en el <head>?

En el head –la cabeza– van los pensamientos que nadie ve, pero que son importantes.

Ahí pondremos el título del documento y algunos datos que son importantes para que el navegador pueda interpretar nuestra página web.

Digamos que esta es como la “personalidad” de la página web.

Estas cosas no aparecen directamente en el área de la web visible, pero son importantes para renderizar (mostrar) la página en la pantalla del usuario.

En este caso hemos incluído dos etiquetas:

La primera es un envoltorio normal, que contiene el título de la página web.

La segunda, parece que está mal porque se <abre> pero no se </cierra> por ningún lado.

Bueno, pues como siempre, la excepción cumple la regla.

Hay que decir que algunas etiquetas no hay que cerrarlas.

Son etiquetas especiales que no “envuelven” nada.

Solo dan una información de algo.

En este caso, estamos especificando charset=”utf-8″.

El charset es el juego de caracteres usado en la página.

Por norma general siempre vas a usar utf-8.

No te asustes

No te asustes con esas palabrejas.

El charset (juego de caracteres) es importante para que el navegador web sepa qué símbolos mostrar en la pantalla.

No es lo mismo escribir en caracteres latinos que en chino que en caracteres rusos я люблю картофель… ¿verdad?

El navegador tiene que saber eso.

Pues no te preocupes ahora por el charset.

Es una larga historia que aprenderás cuando sea necesario.

Para ti, usar utf-8 está perfecto de momento.

¿Qué ponemos en el <body>?

En el body –cuerpo– va la parte visible de la página.

Todo lo que el navegador sí va a mostrar en la pantalla.

En nuestro pequeño ejemplo, hemos puesto un simple texto:

"Mi primera web. Bienvenidos a Cocodrilolandia".

Y recuerda que el navegador lo ha interpretado así:

como-hacer-web-2Pues bien.

Ahora que tienes más o menos claro cómo estructurar el documento, vamos a darle un poquito de forma a nuestro proyecto.

Etiquetas básicas en HTML

Con tu editor de código y tu navegador abierto, vamos a editar el archivo del capítulo anterior.

<html>
  <head>
    <title>Cocodrilolandia</title>
    <meta charset="utf-8">
  </head>
  <body>
  <h1>Mi primera web</h1>
  <h2>Bienvenidos a Cocodrilolandia</h2>
  <p>Esto es una web que estoy haciendo para <strong>aprender HTML</strong></p>
  <p>Estoy haciendo un curso gratis de desarrollo web en <strong><i>Salamarkesa.com</i></strong></p>
  </body>
</html>

Ya ves que no hemos tocado el <head> todavía.

Solo hemos añadido nuevas etiquetas en el <body>.

Si observas bien, hemos puesto la etiqueta <strong> dentro de la etiqueta <p>.

Esto de meter una etiqueta dentro de otra, se llama anidar etiquetas.

Si pones atención a la lógica de tu mente, verás que es fácil de comprender el efecto.

Quiero un párrafo, y dentro del párrafo quiero la negrita.

Pues nada, meto una dentro de otra.

Quiero una negrita, y quiero que también sea cursiva.

Pues nada, meto una dentro de otra.

Fácil, ¿no?

Vamos a ver cómo queda en el navegador web lo que hemos hecho.

Ya teníamos abierto el documento, desde la lección anterior.

Simplemente, actualiza la página en el navegador.

Para eso puedes pulsar la tecla F5, o pulsar el icono de actualizar, para que el navegador vuelva a leer el código y haga una re-interpretación.

Así debe quedarte:

curso-desarrollo-web

Qué bien.

Ya estás entendiendo cómo funciona.

Y en realidad ya estás desarrollando tu primera web.

¡Qué bien!

Tienes que estar feliz, y tener más energía que nunca.

Porque ahora vamos a hacer un ejemplo grande con un montón de etiquetas HTML nuevas.

Siguiente capítulo: Ejemplo de HTML grande gordo y hermoso