Diccionario
Metadatos
Mi primera página web
4.2. Primeros pasos con HTML
Para poder diseñar páginas web debemos utilizar un lenguaje especial, se trata de HTML.
En este apartado vais a conocer:
¡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.
Retroalimentación
Verdadero
Todas las páginas están hechas con HTML.
Retroalimentación
Falso
HTML no es un lenguaje de programación.
Retroalimentación
Verdadero
Un ejemplo de etiqueta <p>.
Retroalimentación
Verdadero
Todo el texto HTML debe estar dentro de estas etiquetas.
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 estructura 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:
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 >
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 No comercial Compartir igual 4.0