• 20 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 2/6/20

Vuestra primera página web en HTML

Log in or subscribe for free to enjoy all this course has to offer!

Entonces, ¿habéis instalado todo el software? Deberíais tener ahora un editor de texto para crear vuestro sitio web(como Sublime Text) y varios navegadores para probar el sitio (Mozilla Firefox, Google Chrome, Internet Explorer, etc.).

¡Pasaremos a la acción en este capítulo! ¡Vamos a descubrir los fundamentos de HTML y a guardar nuestra primera página web!
Por supuesto, no os creáis que vais a producir una página web excepcional justo en el capítulo dos, pero esperad y veréis... ¡vendrá!

Crear una página web con el editor

Entonces, ¡sigamos adelante! Como acabo de decir vamos a crear nuestro sitio web en un editor de texto. Deberíais haber instalado uno como os aconsejé en el primer capítulo: no importa qué editor de texto sea. Estos programas tienen un propósito muy simple, ¡permiten que tecleéis el texto!

En este curso yo voy a trabajar con Sublime Text. Así que voy a abrirlo (ver figura siguiente).

Abriendo Sublime Text
Abriendo Sublime Text

VALE, ¿entonces qué hacemos ahora? ¿Qué vamos a escribir en esta página en blanco?

Hagamos una pequeña prueba. Simplemente escribid los que os venga a la mente como lo hice yo en la figura siguiente.

Creando Fichero en Sublime Text
Creando Fichero en Sublime Text

Podéis teclear las mismas oraciones que yo o cualquier cosa que queráis; el objetivo es simplemente teclear algo.

Ahora vamos a guardar este archivo. Hacer esto es muy sencillo como en todos los programas tenéis un menú Archivo > Guardar como. Un cuadro de diálogo os pregunta dónde queréis guardar el archivo y qué nombre tiene. Guardadlo donde queráis. Dadle al archivo cualquier nombre que queráis que termine con .html, por ejemplo prueba.htmlcomo se muestra en la figura siguiente.

Guardando fichero en sublime y mac
Guardando fichero en sublime y mac

Ahora abrid el explorador de archivos en la carpeta en la que hayáis guardado la página. Veréis el archivo que acabáis de crear (figura siguiente).

El archivo en Finder

Os puede salir un icono dependiendo del sistema operativo que uséis que represente el archivo va en función del navegador web que tengáis predeterminado.  Por ejemplo estos son los iconos que aparecen cuando vuestro navegador predeterminado es Firefox o Internet Explorer (ver la figura siguiente).

Icono del archivo con Firefox
Icono del archivo con Firefox
Icono del archivo con Internet Explorer
Icono del archivo con Internet Explorer

Simplemente haced doble clic en este archivo y... vuestro navegador se abrirá y mostrará el texto que habéis escrito como se ve en la figura siguiente.

Visualización de la página web

¡Parece que no funciona muy bien! ¿¡Todo el texto se muestra en la misma línea aunque escribimos dos líneas de texto diferentes!?

¡De hecho, buena observación!
El texto se muestra en la misma línea aunque pedimos que se tecleara en dos líneas diferentes. ¿Qué está pasando?

De hecho, para crear una página web no basta solo con teclear el texto como acabamos de hacer. Además de este texto también tenéis que teclear lo que se conoce como etiquetas que le darán instrucciones al ordenador como «ir a la línea siguiente», «mostrar una imagen», etc.

Etiquetas y sus atributos

Bueno, todo eso fue demasiado fácil. Obviamente, esos especialistas informáticos pesados tenían que meterse y complicar las cosas. No basta «solo» con teclear el texto en el editor también tenéis que darle instrucciones al ordenador. Para hacer esto en HTML se usan etiquetas.

Etiquetas

Las páginas HTML están llenas de las llamadas etiquetas. Aunque estas etiquetas no las pueden ver aquellos que visiten vuestro sitio, ellas permiten que el ordenador entienda que es lo que tiene que mostrar.
Las etiquetas son fáciles de identificar. Están rodeadas por «corchetes angulares» en otras palabras los símbolos < y >, como este: <etiqueta>

¿Para qué sirven? Indican el tipo de texto al que rodean. Quieren decir por ejemplo: «esto es el título de la página», «esto es una foto», «esto es un párrafo», etc.

Hay dos tipos de etiquetas: etiquetas en pares y etiquetas huérfanas.

Etiquetas en pares

Se abren, contienen texto y se cierra posteriormente. Esta es la apariencia que tienen:

<p>Esto es un párrafo</p>

Vais a ver una etiqueta que abre (<párrafo>) y una etiqueta que cierra ( <párrafo>) que indica el final del párrafo. Para el ordenador, esto significa que todo lo que no esté entre esas dos etiquetas no es un párrafo.

Esto no es un párrafo <p>Esto es un párrafo</p> Esto no es un párrafo
Etiquetas huérfanas

Estas son las etiquetas que se usan con más frecuencia para insertar un elemento en un punto determinado (por ejemplo una imagen). No es necesario definir el comienzo y el final de la imagen. Solo tenéis que decirle al ordenador que «inserte una imagen aquí»

Una etiqueta huérfana se escribe así:

<img></code>

Atributos

Los atributos son como las opciones de la etiqueta. Las complementan para proporcionar información adicional. El atributo se coloca después del nombre de la etiqueta que abre y frecuentemente es un valor como este:

<NombreDeLaEtiqueta AtributoDeLaEtiqueta="valor">

¿Para qué sirve? Vamos a usar la etiqueta <imagen /> que acabamos de ver. Por sí misma no tiene mucha utilidad. Podemos añadir un atributo que indique el nombre de la imagen a mostrar:

<img src="foto.jpg" ></code>

El ordenador entonces entiende que tiene que mostrar la imagen que contiene el archivo foto.jpg.

En el caso de una etiqueta que funciona como una «pareja», los atributos únicamente se colocan en la etiqueta de apertura y no en la de cierre. Por ejemplo este código indica que la cita es de Neil Armstrong y data del 21 de julio de 1969:

<blockquote author="Neil Armstrong"  date="2107/07/1969">
Es un pequeño paso para el hombre, pero un gran paso para la humanidad.</blockquote>

Estructura básica de una página HTML5

Volvamos a nuestro editor de texto (en mi caso Sublime Text) Únicamente teclead o copiad y pegad el código fuente que está a continuación dentro de Sublime Text. Este código corresponde a los fundamentos de una página web en HTML5:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Título</title>
    </head>
    
    <body>
    
    </body>
</html>

El resultado que se obtiene cuando se copió dentro del Sublime Text se muestra en la figura siguiente.

El código HTML5 mínimo en Sublime Text

Notaréis que las etiquetas se abren y se cierran en un orden específico. Por ejemplo, la etiqueta <html> es la primera que se abre y también la última que se cierra (al final del código con </html>). Las etiquetas se tienen que cerrar en el orden inverso en el que se abrieron. Por ejemplo:

  • <html><body></body></html>: correcto. Una etiqueta que se abrió dentro de otra etiqueta también se tiene que cerrar dentro de esa etiqueta.

  • <html><body></html></body> : incorrecto, las etiquetas están entrecruzadas.

¿Eh?, ¿podrías explicarnos todas las etiquetas que acabamos de copiar dentro del editor?

Por supuesto, ya que me lo pedís con tanta educación.
¡No os asustéis viendo todas esas etiquetas de un golpe, os voy a explicar lo que hacen!

doctype

<!DOCTYPE html>

La primera línea se denomina eldoctype. Es fundamental porque indica que esto es efectivamente una página web HTML.
No es realmente una etiqueta como las otras (empieza con un signo de exclamación) y se puede considerar como una excepción que confirma la regla.

La etiqueta</html>

<html>

</html>

Esta es la etiqueta principal del código. Incluye el contenido completo de la página. ¡Como podéis ver la etiqueta </html> de cierre está situada a la derecha del final del código!

La cabecera <head> y el cuerpo <body>

Una página web se compone de dos partes:

  • La cabecera <head>: esta sección proporciona información general sobre la página como su título, la codificación (para la gestión de caracteres especiales), etc. Esta sección suele ser bastante corta. La información que contiene la cabecera no se muestra en la página y es simplemente información general concebida para el ordenador. ¡Sin embargo, es muy importante!

  • El cuerpo<body>: es aquí donde se encuentra la parte principal de la página. Todo lo que tecleemos aquí se mostrará en la pantalla. La mayor parte de nuestro código se tecleará en el cuerpo.

Por ahora el cuerpo está vacío (volveremos a esto más adelante). Pero vamos a echar un vistazo a las dos etiquetas que contiene la cabecera...

La codificación ( charset)
<meta charset="utf-8" ></code>

Esta etiqueta indica la codificación que se usa en el archivo .html.

Sin entrar en detalles porque se complica muy rápido, la codificación especifica cómo se guarda el archivo. Es lo que determina la forma en la que se van a mostrar los caracteres especiales (acentos, caracteres japoneses y chinos, caracteres arábigos, etc.)

Hay varias técnicas de codificación con nombres raros que se usan en función del idioma: ISO-8859-1, OEM 775, Windows-1253, etc. No obstante, actualmente solo se debería usar una: UTF-8. ¡Este método de codificación permite que todos los símbolos de todos los idiomas del mundo se muestren virtualmente sin ningún problema! Esta es la razón por la que indiqué utf-8 en esta etiqueta.

Vuestro archivo se tiene que guardar efectivamente en UTF-8. Podréis ver la codificación en la fila de abajo del editor. 

El título principal de la página
<title>

Este es el título de vuestra página, ¡lo cual es probablemente el elemento más importante! Todas las páginas tienen que tener un título que describe lo que contienen.
Es aconsejable que el título se mantenga bastante corto (normalmente menos de 100 caracteres).

El título no se muestra en la página sino en su parte superior (habitualmente en la pestaña del navegador). Guardad vuestra página web y abridla en el navegador. Veréis que el título se muestra en la pestaña como se ve en la figura siguiente.

El título de la página figura en la parte superior del navegador
El título de la página figura en la parte superior del navegador

Deberíais saber que el título también aparece en los resultados de búsqueda, como en Google (figura siguiente).

El título de la página figura en las búsquedas en Google
El título de la página figura en las búsquedas en Google

¡Así que elegir el título es importante!

Comentarios

En este capítulo aprendimos cómo crear nuestra primera página HTML real. Antes de concluir me gustaría añadir una o dos observaciones.

Un comentario en HTML es un texto que es simplemente una nota. No se muestra, el ordenador no lo interpreta y no modifica lo que se visualiza en la página.

En pocas palabras, ¿no sirve para nada?

¡Bueno, claro que sí!
Lo usáis vosotros y aquellos que lean el código fuente de la página. Podéis usar los comentarios para dejar instrucciones sobre la forma en la que funciona la página.

¿Qué finalidad tiene esto? Os ayudará a recordar cómo funciona la página cuando volváis al código fuente después de que haya pasado un tiempo sin verlo. No es broma, esto le pasa a todos los administradores web.

Insertar un comentario

Un comentario es una etiqueta HTML con un formato muy especial:

<!-- Esto es un comentario -->

Lo podéis poner en la parte que queráis en el código fuente, no afecta a la página, pero lo podéis usar como ayuda para que os situéis en el código especialmente si es largo.

<!DOCTYPE html>
<html>
    <head>
        <!-- Cabecera de la página -->
        <meta charset="utf-8" />
        <title>Título</title>
    </head>
    
    <body>
        <!-- Cuerpo de la página -->
    </body>
</html>

¡Todo el mundo puede ver vuestros comentarios... y vuestro código HTML completo!

Voy a concluir con una observación importante: todo el mundo puede ver el código HTML de vuestra página,ya que está online en la Red. Simplemente haced clic derecho en la página y seleccionad «Inspeccionar elemento» (en Chrome, ya que el texto exacto puede variar en función del navegador) como se muestra en la figura siguiente.

Menú ver código fuente de la página
Menú ver código fuente de la página

A continuación aparece el código fuente (figura siguiente).

Visualizar el código fuente
Visualizar el código fuente

Podéis probar esto en cualquier sitio web, ¡funciona! 100 % garantizado. Esto tiene una explicación sencilla, el navegador necesitael código HTML para saber que mostrar. El código HTML de todos los sitios por consiguiente es público.

¿La moraleja de la historia? Todo el mundo puede ver vuestro código fuente HTML y no podéis hacer nada al respecto. En consecuencia, no incluyáis información sensible en los comentarios, como contraseñas... ¡y encargaros de vuestro código fuente porque puedo comprobar en cualquier momento si habéis seguido el curso al pie de la letra!

En resumen

  • Un editor de texto (nosotros usamos Sublime Text) se usa para crear un archivo con la extensión .html (p. ej. prueba.html). Esto será nuestra página web.

  • Este archivo se puede abrir en el navegador web simplemente haciendo doble clic sobre él.

  • Tecleamos el contenido de la página junto con las etiquetas HTML dentro del archivo.

  • Las etiquetas pueden tener varias formas:

    • <etiqueta> </etiqueta>: se abren y se cierran para delimitar el contenido, por ejemplo el comienzo y el final de un título.

    • <etiqueta />: las etiquetas huérfanas (solo se introduce una etiqueta) se usan para insertar un objeto en un punto determinado, por ejemplo una imagen.

  • Las etiquetas van acompañadas algunas veces con atributos que proporcionan información adicional (p. ej. <img src=«foto.jpg» />).

  • Una página web se compone de dos secciones principales: una cabecera ( <head>) y un cuerpo ( <body>).

  • El código fuente de cualquier página web se puede visualizar al hacer clic derecho y seleccionando «Inspeccionar Elemento»en Google Chrome. En el resto de los navegadores el texto varía pero se accede de la misma forma.

Example of certificate of achievement
Example of certificate of achievement