# 4.2. Primeros pasos con HTML

## Diccionario

## Metadatos

Definición:

  Son los datos que describen un recurso y permiten identificarlo.

Ejemplo:

  El nombre y autor de una página web.

Para poder diseñar páginas web debemos utilizar un lenguaje especial, se trata de HTML.

En este apartado vais a conocer:

- - La estructura básica de un documento HTML.
  - Consejos a la hora de crear páginas web.

¡Os espero en las siguientes actividades!

# 1. Un poco de información sobre HTML

Seguro que os estaréis preguntando, ¿pero qué es HTML?

HTML es un lenguaje para crear contenido de páginas web. En los siguientes vídeos, Kiko Palomares os presenta unos vídeos muy interesantes. En el primero, explica qué es y para qué sirve el lenguaje HTML. En el segundo video, os da diez consejos que se deben tener en cuenta cuando diseñamos páginas web.

## ¿HTML qué es y para qué sirve?

En el siguiente vídeo Kiko Palomares os explica de una forma muy amena qué es HTML y para qué se utiliza.

Estoy seguro de que os va a gustar.

Recuerda que si lo necesitas puedes activar los subtítulos

## 10 consejos sobre HTML

En este vídeo, Kiko Palomares nos da diez consejos muy útiles a la hora de crear nuestra página web.

Si algún consejo pensáis que no lo váis a necesitar, no pasa nada. Pero es bueno que os vaya sonando todo esto.

# 2. Partes de un documento HTML

Cualquier documento HTML deberá indicar:

- Tipo de documento.
- Inicio del documento.
- La cabecera.
- El cuerpo.
- Fin del documento.

Recordad que HTML es un lenguaje de marcado, es decir, todo son etiquetas del tipo <etiqueta>.

## Tipo de documento

Con esta etiqueta informamos al navegador de la versión de HTML que estamos utilizando para escribir nuestra página web.

Es muy importante no olvidar incluirla. En este caso, le indicamos al navegador que usamos la versión de HTML 5.

## Inicio y fin de mi página

Es necesario indicar dónde empieza y termina nuestra página web. Esto se consigue con las siguientes etiquetas:

## La cabecera

Toda página web debe tener una cabecera. Las etiquetas que debemos utilizar son:

Dentro de esta etiqueta podemos incluir:

- El título de la página, que no es el título del documento.
- Tipo de caracteres que vamos a utilizar.
- Los estilos.
- El autor o autora de la página.

Lo que pongamos dentro de esta etiqueta no se verá en el navegador. Esto se conoce cómo metadatos.

## El cuerpo

El cuerpo es la parte fundamental de nuestra página, aquí escribiremos todo el contenido HTML que aparecerá en el navegador.

Las etiquetas que debemos utilizar son:

## Esqueleto de nuestra página

Una página web debe tener la siguiente estructura:

Todas las páginas web deben tener esta estructura.

Definición:

Son los datos que describen un recurso y permiten identificarlo.

Ejemplo:

El nombre y autor de una página web.

## Lumen dice ¿Lo quieres ver mejor?

Te he preparado una imagen que te puede ayudar a comprender mejor cómo es la estructura de una página web.

# 3. Toca estudiar

En la actividad anterior hemos aprendido un contenido muy importante. Hemos visto la estructura que debe tener cualquier página web.

En la siguiente imagen podéis recordarlo:

Ahora, os pido que hagáis un pequeño esfuerzo. Debéis memorizar la estrutura de una página web con sus etiquetas correspondientes.

Disponéis de 5 minutos.

Podéis utilizar el material que consideréis necesario.

## Clavis dice Recuerda

Para conseguir alcanzar una meta es importante que seas un buen o buena estratega. Es decir, tener métodos, técnicas, “trucos” para llegar antes o de forma más fácil donde tú quieres.

Ahora te voy a enseñar una estrategia, ¡Aprovéchala para alcanzar tu reto!

El nombre de la estrategia es memorización. Cuando estás desarrollando una tarea es normal que encuentres aspectos que te resulten complicados de memorizar y que puedan llegar a bloquearte si no sabes tratarlos adecuadamente. En esta estrategia vas a aprender a memorizar y recordar la información aplicando algunos consejos básicos que te sugieran cómo organizar tu tiempo y actuar en cada caso para superar la dificultad.

Podrás encontrar todo lo que necesitas sobre esta estrategia en los siguientes enlaces a las siguientes guías de la competencia de aprender a aprender:

- Aprendo a memorizar y recordar.
- Organizo mi tiempo para memorizar

Tómate el tiempo que necesites y recuerda que siempre puedes preguntarle al docente o a algún compañero o compañera cuando no entiendas algo.

¡Ánimo, seguro que lo haces genial!

# 4. Ahora puedes comprobar cuánto sabes ya

Ahora ha llegado el momento de trabajar de forma individual.

Te planteo las siguientes actividades, puedes elegir la opción que consideres más adecuada a tus conocimientos sobre HTML. Seguro que cuando empieces, querrás hacerlas todas.

Debes subir una captura de pantalla de tu actividad o actividades resueltas a la tarea de classroom, o contestarlas en tu cuaderno.

# Opción A: ¿Recuerdas las etiquetas básicas?

En las actividades anteriores has visto que todos los documentos HTML tienen una estructura común, formada por las mismas etiquetas.

¿Recuerdas cuáles son las etiquetas que debe tener cualquier documento HTML?

# Opción B: Ordena la estructura HTML

Además de recordar cuáles son la etiquetas que forman parte de cualquier documento HTML, es necesario que estén en el orden correcto.

A continuación tienes las etiquetas, ¿puedes colocar cada etiqueta en el lugar que le corresponde?

- < !DOCTYPE html >
- < html >
- < head >
- < /head >
- < body >
- < /body >
- < /html >

Comprobar

¡Correcto!

No es correcto... Revisa la actividad 3. Escribimos la estructura básica

# Opción C: Diferencia entre la cabecera y el cuerpo

Ya hemos visto que un documento HTML está formado por diferentes partes, como por ejemplo la cabecera y el cuerpo.

¿Podrías explicar alguna diferencia que hay entre la cabecera y el cuerpo?

Página 7 de 9

Obra publicada con Licencia Creative Commons Reconocimiento No comercial Compartir igual 4.0

Creado con eXeLearning (Ventana nueva)