# 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. ¿Te atreves a repasar lo que hemos visto?

Depués de ver los vídeos anteriores, os propongo una actividad de verdadero o falso.

Se trata de detectar qué afirmaciones son correctas o falsas. Leelas con cuidado y piensa la respuesta correcta.

# Pregunta 1

1. Todas las páginas web están hechas con lenguaje HTML.

# Sugerencia

Ver vídeo anterior.

Verdadero Falso

# Retroalimentación

Verdadero

Todas las páginas están hechas con HTML.

# Pregunta 2

2. HTML es un lenguaje de programación, pero que utiliza otra sintaxis diferente.

# Sugerencia

Ver vídeo anterior.

Verdadero Falso

# Retroalimentación

Falso

HTML no es un lenguaje de programación.

# Pregunta 3

3. Una etiqueta comienza con el signo "<" y termina con el ">".

# Sugerencia

Ver vídeo anterior.

Verdadero Falso

# Retroalimentación

Verdadero

Un ejemplo de etiqueta <p>.

# Pregunta 4

4. Las etiquetas, <html> y </html> indican el comienzo y el final de la página web.

# Sugerencia

Ver vídeo anterior.

Verdadero Falso

# Retroalimentación

Verdadero

Todo el texto HTML debe estar dentro de estas etiquetas.

# Pregunta 5

5. El contenido dentro de las etiquetas, <body> y </body> no aparece en la pantalla del navegador.

# Sugerencia

Ver vídeo anterior.

Verdadero Falso

# Retroalimentación

Falso

Todo la información contenida entre estas etiquetas se mostrará en el navegador.

# 3. 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.

## Kardia dice ¿Queréis saber más?

Si te has quedado con ganas de saber un poco más sobre la estructura del códgo HTML, te invito a visitar la siguiente página.

# 4. 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!

# 5. Escribimos la estructura básica

En esta actividad tu grupo debe escribir cómo debe ser la estructura básica de una página en HTML.

Para ello debéis recordar cuáles son las etiquetas que deben aparecer.

Podéis hacer la actividad en:

- Vuestro cuaderno de clase.
- Utilizando un ordenador.
- Escribiendo sobre el docuemento rellenable que podéis encontrar más abajo.

Cualquiera de las tres opciones es válidas, vuestro grupo puede elegir aquella que más le guste.

## Documento rellenable

Aquí tenéis el documento rellenable que podéis utilizar. Recordad que podéis imprimirlo y guardarlo.

Haz clic aquí para descargar el documento rellenable

## Lumen dice ¿Necesitas ayuda con las etiquetas?

Fijaos en la siguente imagen:

# 6. Sobre HTML puedo decirte algo

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.

# 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?

Te recomiendo que utilices tu cuaderno o el ordenador para escribirlas.

# 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?

# Opción D: Crea tu propia definición

Tanto si has llegado hasta aquí haciendo antes otras opciones, como si has elegido esta opción directamente, estoy seguro de que podrás hacer esta actividad.

Te piden que redactes tu propia definición de HTML.

¿Te atreves, con lo que has aprendido, a hacerlo?

Obra publicada con Licencia Creative Commons Reconocimiento Compartir igual 4.0

Creado con eXeLearning (Ventana nueva)