Curso HTML 5. Estructura básica de una página web

bitonobit

12 Feb 202304:10

Summary

TLDREn este video, se explica cómo empezar a trabajar con HTML5, desde la declaración de tipo de documento hasta la estructura básica de una página web. Se cubren aspectos clave como las etiquetas <html>, <head>, <body>, y las metas, así como la importancia de la etiqueta <title> y <link> para incluir hojas de estilo. También se enseña a crear un archivo HTML en Visual Studio Code, agregar contenido básico, y utilizar la extensión Live para ver los cambios en tiempo real. Además, se enfatiza la práctica de documentar el código mediante comentarios. Ideal para principiantes en desarrollo web.

Takeaways

😀 El HTML (Hypertext Markup Language) es el lenguaje estándar para crear páginas web.
😀 Desde 1991, HTML ha tenido varias versiones, y el foco aquí es HTML5.
😀 Para trabajar con HTML5, se debe declarar el tipo de documento usando `<!DOCTYPE html>` al inicio.
😀 La estructura básica de un documento HTML incluye las etiquetas `<html>`, `<head>` y `<body>`.
😀 El `<head>` contiene elementos importantes como las etiquetas `<meta>`, `<title>` y `<link>`.
😀 Las etiquetas `<meta>` proporcionan información no visible, como el conjunto de caracteres, autor y descripción.
😀 La etiqueta `<title>` se usa para definir el título de la página que aparece en la pestaña del navegador.
😀 La etiqueta `<link>` se usa para incluir archivos externos, como hojas de estilo CSS.
😀 En Visual Studio Code, puedes crear un archivo HTML y utilizar atajos de teclado como Shift+1 para agregar la estructura básica.
😀 Es importante guardar los cambios en el archivo, ya sea con el atajo `Ctrl+S` o configurando el guardado automático en Visual Studio Code.
😀 Usar extensiones como Live Server permite ver los cambios en tiempo real al abrir un servidor local.
😀 Los comentarios en HTML se añaden con `` y no se muestran en el navegador, pero son útiles para documentar el código.

Q & A

¿Qué es HTML?
-HTML significa 'Hypertext Markup Language' (Lenguaje de Marcado de Hipertexto). Es un lenguaje utilizado para estructurar y presentar contenido en la web.
¿Cuál es la versión de HTML que se está utilizando en este tutorial?
-En este tutorial se utiliza HTML5, que es la versión más reciente del lenguaje HTML.
¿Qué propósito tiene la declaración 'DOCTYPE html' al inicio del documento?
-La declaración 'DOCTYPE html' informa al navegador que el documento está escrito en HTML5, ayudando a que se visualice correctamente en el navegador.
¿Cómo se estructura un documento HTML?
-Un documento HTML se estructura con dos partes principales: el encabezado (<head>) y el cuerpo (<body>), ambos contenidos dentro de la etiqueta <html>.
¿Qué tipo de información podemos incluir en la sección <head>?
-En la sección <head> podemos incluir metaetiquetas (para definir el conjunto de caracteres, el autor, la descripción, entre otras), la etiqueta <title> para el título de la página y la etiqueta <link> para vincular archivos externos como hojas de estilo.
¿Cuál es la función de la etiqueta <meta>?
-La etiqueta <meta> no se muestra en la página web, pero es utilizada para incluir información importante como el conjunto de caracteres, el autor de la página y una breve descripción de su contenido.
¿Cómo podemos ver los cambios en nuestro código HTML en tiempo real?
-Podemos ver los cambios en tiempo real utilizando la extensión Live Server en Visual Studio Code, que abre un servidor local y muestra las actualizaciones automáticamente en el navegador.
¿Qué es la función de 'auto-save' en Visual Studio Code y cómo se activa?
-La función 'auto-save' guarda automáticamente los cambios realizados en el código. Para activarla, hay que ir a las configuraciones de Visual Studio Code y cambiar la opción de 'auto-save' a una preferencia como 'onWindowChange'.
¿Por qué es importante agregar comentarios en el código HTML?
-Los comentarios en el código HTML son importantes para documentar lo que hace cada parte del código, lo que facilita su comprensión, mantenimiento y colaboración con otros desarrolladores.
¿Cómo se agrega un comentario en HTML?
-Para agregar un comentario en HTML, se utiliza la sintaxis . Los comentarios no se mostrarán en el navegador pero serán visibles en el código fuente.