LMSGI01 EstructuraHTML5
Summary
TLDREl guion ofrece una introducción al desarrollo de páginas web con HTML5, la quinta versión del lenguaje de marcado. Se destaca la importancia de las etiquetas y atributos para estructurar el contenido y la información adicional. Se menciona la sintaxis clásica y XHTML, y se enfatiza la necesidad de configurar correctamente el entorno de desarrollo y la codificación UTF-8 para incluir caracteres especiales. El script también cubre la estructura básica de un documento HTML, incluyendo la declaración de tipo de documento, la etiqueta 'lang', y elementos como 'head' y 'body'. Finalmente, se sugiere la utilización de comentarios para el mantenimiento del código.
Takeaways
- 🌐 HTML es el lenguaje de marcado estándar para crear páginas web y es compatible con todos los navegadores.
- 📝 HTML5 es la quinta versión del lenguaje de marcado HTML, con dos variantes: HTML y XHTML.
- 🛠 Se recomienda empezar a programar en HTML5 utilizando un entorno de desarrollo preparado para facilitar la codificación.
- 📖 Los documentos HTML5 están formados por etiquetas y atributos que definen los elementos y la información adicional de la página.
- 🔑 La etiqueta `doctype` es el primer paso para la creación de la estructura de un documento HTML, seguido de la etiqueta `html`.
- 🌐 El atributo `lang` en la etiqueta `html` indica el idioma del contenido de la página web.
- 📝 La estructura de una página web se divide en dos bloques principales: la cabecera (`head`) y el cuerpo (`body`).
- 🏷️ Dentro de la etiqueta `head`, se incluyen elementos como el título de la página y los metadatos.
- 📝 La codificación de caracteres, como UTF-8, es crucial para representar correctamente símbolos especiales en el contenido web.
- 🔑 Los comentarios en un documento HTML se pueden crear utilizando la sintaxis de `<!-- comentario -->`.
- 🔍 Las etiquetas `meta` se utilizan para incluir información adicional como descripción y palabras clave, que son importantes para la optimización de motores de búsqueda.
Q & A
¿Qué es HTML y para qué se utiliza?
-HTML es el lenguaje de marcado utilizado para crear páginas web. Es un estándar reconocido por todos los navegadores web que se utiliza para mostrar el contenido de una página de manera similar en todos los navegadores.
¿Cuál es la diferencia entre HTML y XHTML?
-HTML es el lenguaje de marcado con una sintaxis clásica de texto, mientras que XHTML tiene una sintaxis basada en XML, lo que significa que es más estricto en cuanto a la correcta sintaxis y cierre de etiquetas.
¿Qué versión de HTML se está utilizando en el guion y cuáles son sus variantes?
-El guion habla sobre HTML5, que es la quinta versión del lenguaje de marcado. HTML5 tiene dos variantes: HTML con una sintaxis clásica y XHTML con una sintaxis basada en XML.
¿Qué es un entorno de desarrollo y cómo se relaciona con la programación en HTML5?
-Un entorno de desarrollo es un conjunto de herramientas y recursos que facilitan el proceso de programación. En el caso de HTML5, el entorno de desarrollo permite trabajar y crear documentos con código HTML5 de manera eficiente.
¿Cómo se inicia la creación de un documento HTML y cuál es la primera etiqueta que se utiliza?
-La creación de un documento HTML comienza con la etiqueta `<!DOCTYPE html>`, que se escribe en mayúsculas y precedida de un símbolo de admiración. Esta etiqueta indica el tipo de documento que se va a abrir en el navegador.
¿Qué atributo se utiliza en la etiqueta `<!DOCTYPE html>` para indicar el tipo de documento y la sintaxis del código fuente?
-El atributo `html` se utiliza para indicar el tipo de documento y la sintaxis del código fuente. Se representa en minúscula y permite al navegador saber qué tipo de página web se está abriendo.
¿Qué se entiende por 'estructura de un documento HTML' y qué elementos la componen?
-La estructura de un documento HTML se refiere a la forma en que se organizan las etiquetas y atributos para crear la página web. Los elementos que componen la estructura incluyen etiquetas como `<html>`, `<head>`, `<body>`, entre otros, que definen los distintos componentes de la página.
¿Qué función tienen las etiquetas en un documento HTML y cómo se diferencian de los atributos?
-Las etiquetas en un documento HTML definen los elementos con los que se trabaja y ayudan a crear las estructuras de la página. Los atributos, por otro lado, proporcionan información adicional sobre una etiqueta específica.
¿Qué es el 'lang' atributo y cómo se utiliza en una etiqueta `<html>`?
-El atributo 'lang' se utiliza para indicar el idioma que se utilizará dentro del contenido de la página web. Se añade a la etiqueta `<html>` y se utiliza para asegurar que el contenido se muestre correctamente en el navegador, especialmente con caracteres especiales.
¿Qué información se suele incluir en la etiqueta `<head>` de un documento HTML y por qué?
-La etiqueta `<head>` suele incluir información que no se muestra visualmente en la página web, como el título que se visualiza en la pestaña del navegador y los elementos `<meta>`, que pueden incluir codificación, descripción y palabras clave de la página.
¿Cómo se indica la codificación de una página web en HTML y cuál es la codificación más común utilizada?
-La codificación de una página web se indica en la etiqueta `<meta>` con el atributo `charset`. La codificación más común utilizada es UTF-8, que permite incluir una amplia variedad de caracteres y símbolos.
¿Qué son los comentarios en un documento HTML y cómo se escriben?
-Los comentarios en un documento HTML son partes de texto que no se muestran en la página web final y se utilizan para agregar anotaciones o explicaciones al código. Se escriben entre `<!--` y `-->`.
¿Cómo se puede verificar el resultado de la página web que se está creando en HTML?
-Para verificar el resultado de la página web en desarrollo, se puede utilizar la opción 'Open with Live server' en el entorno de desarrollo, lo que mostrará la página en un navegador y permitirá ver el título y otros elementos que se han incluido.
Outlines
😀 Introducción al entorno de desarrollo HTML5
El primer párrafo introduce el entorno de desarrollo para programar en HTML5 y su importancia en la creación de páginas web. HTML es el lenguaje estándar reconocido por todos los navegadores y permite la visualización uniforme del contenido. Se menciona que HTML5 es la quinta versión del lenguaje y tiene dos variantes: HTML con sintaxis de texto clásica y XHTML con una sintaxis basada en XML. El proceso de creación de un documento HTML5 comienza con la etiqueta <!DOCTYPE html>, seguida de la declaración de atributos como 'lang' para definir el idioma del contenido. Además, se describe la estructura básica de un documento HTML, que incluye la etiqueta 'html', y los bloques 'head' y 'body', donde 'head' contiene información no visible como el título y los metadatos, mientras que 'body' contiene el contenido principal de la página.
😀 Configuración y atributos en HTML5
El segundo párrafo se enfoca en la configuración y atributos dentro de las etiquetas HTML5. Se discute la necesidad de establecer la codificación de la página como UTF-8 para asegurar la representación adecuada de caracteres especiales, como las letras con tildes o diéresis. También se menciona la importancia de utilizar entidades HTML para caracteres especiales que no forman parte de un idioma específico. Se da un ejemplo práctico de cómo se puede mostrar un título con tilde utilizando la codificación UTF-8 y se sugiere la utilización de etiquetas 'meta' para incluir elementos adicionales como la descripción y las palabras clave de la página. Finalmente, se explica cómo se pueden crear comentarios en un documento HTML utilizando la sintaxis de '<!--' y '-->'.
Mindmap
Keywords
💡HTML5
💡Entorno de desarrollo
💡Etiquetas y atributos
💡Estructura de un documento HTML
💡Codificación de caracteres
💡Idioma del documento
💡Cabecera (Head)
💡Cuerpo (Body)
💡Título de la página
💡Palabras clave (Keywords)
💡Comentarios en HTML
Highlights
Se está preparando el entorno de desarrollo para programar en HTML5.
HTML es el lenguaje para crear páginas web y es reconocido por todos los navegadores.
HTML5 es la quinta versión del lenguaje de marca con dos variantes: HTML y XHTML.
Se va a utilizar HTML con una sintaxis clásica de texto.
Los documentos HTML están formados por etiquetas y atributos que definen los elementos y la información adicional.
El primer paso es crear un documento HTML con la etiqueta `<!DOCTYPE html>`.
La etiqueta `<html>` indica el principio del contenido de la página y puede incluir atributos como `lang`.
La estructura de una página web se divide en dos bloques: la cabecera (`<head>`) y el cuerpo (`<body>`).
La etiqueta `<title>` se utiliza para definir el título que se muestra en la pestaña del navegador.
La etiqueta `<meta>` permite especificar la codificación de la página, como UTF-8.
La codificación UTF-8 es necesaria para representar símbolos especiales como eñes, tildes y diéresis.
Los caracteres especiales y símbolos no existentes en el idioma castellano deben ser codificados para su representación en la página web.
Se puede utilizar la etiqueta `h1` para indicar el título principal del contenido en el cuerpo de la página.
Los comentarios en un documento HTML se pueden crear con `<!--` y `-->`.
La indentación y el uso adecuado de las tabulaciones ayudan al mantenimiento del código en una estructura jerárquica.
El entorno de desarrollo propone y autocompleta etiquetas y atributos para facilitar la codificación.
Se puede verificar la representación de caracteres especiales y símbolos utilizando la opción 'Open with Live server'.
Las palabras clave en la etiqueta `<meta>` son importantes para la visibilidad en motores de búsqueda como Google.
Transcripts
los primeros vídeos visualizados lo que
hemos ido preparando es el entorno de
desarrollo para poder programar en html5
pero aún no hemos empezado a codificar
html es el lenguaje utilizado para crear
páginas web y es un estándar que lo van
a reconocer todos los navegadores y van
a mostrar el contenido de una página de
una forma muy similar
html5 es la quinta versión de lenguaje
de marca
tiene dos variantes
por un lado está la html con una
sintaxis clásica de texto y por otro
lado tenemos
x html con una sintaxis basada en
xhtml5 en principio nos vamos a basar en
esta primera Bueno pero vamos a ir al
grano hemos dicho que ya dispones del
entorno de desarrollo preparado y listo
para trabajar por lo tanto los
siguientes pasos serán comenzar a
trabajar o crear un documento con código
html5 los documentos estarán formados
por etiquetas y atributos las etiquetas
definen los elementos con los que
podemos trabajar
y nos van a ayudar a crear las
estructuras de la página y los atributos
nos mostrarán la información adicional a
esa etiqueta el primer paso para empezar
con la creación de la estructura de un
documento html comenzará siempre con la
etiqueta docktime
se escribirá siempre en mayúsculas y va
precedido de un símbolo de admiración
y a continuación Se le indica un
atributo denominado html este se
representa en minúscula y mediante este
atributo html lo que se indica es Qué
tipo de documento va a abrir el
navegador que abra esta página web y que
sintaxis y gramática utiliza su código
fuente por lo tanto si vamos a un
entorno de desarrollo crearemos un
directorio dura
html5 y Dentro de este directorio que he
denominado estructura html5 crearemos un
fichero llamado
index.html hemos dicho que la primera
línea de este documento html será
el signo de admiración docktite si veis
el propio html me lo propone y ya
directamente muestra el tipo de
documento que va a ser el atributo html
en minúscula
una vez que tengamos declarado Cuál es
el tipo de documento lo primero que
tendremos que hacer es abrir y cerrar la
etiqueta html le doy un enter abro otra
vez la llave escribo ht y si os fijáis
ya me está proponiendo html
cierro de etiqueta y cierra el
automáticamente la etiqueta también como
no quiero que toda la estructura esté
dentro de la misma línea le voy a dar un
intro y automáticamente también Crea una
tabulación la etiqueta html indica el
principio del contenido de la página el
resto de etiquetas Irán dentro de la
misma bien a esta etiqueta html le
podemos Añadir un atributo
que comenzará con lang lang que ya me lo
propone el propio torno de desarrollo
igual a entrecomillado s indicarle el
idioma que va a ir dentro del lenguaje
marcado en castellano una vez hayamos
marcado el comienzo y el fin de la
página una página web se divide en dos
bloques la cabecera y el cuerpo de la
página las etiquetas que utilizaremos
para estos dos bloques se denominan Head
y body
y como os imaginaréis le doy aquí al
tabulador apertura de llaves empieza a
escribir Head cierre de llaves
y escribiré
de llaves por lo tanto está etiqueta
html y dentro de ella la etiqueta Head y
la etiqueta Body con sus cierres
correspondientes si os fijáis no he
escrito este Head y este Body al
principio y de hecho el entorno de
desarrollo me propone meterle un poco
más hacia dentro con la tabulación a
esto se le llama intentar la indentación
es hacer un uso adecuado de las
tabulaciones en el documento dentro de
una estructura jerárquica ayuda
enormemente al mantenimiento del código
a continuación la información que se
definirá en la etiqueta Head normalmente
es información que no se muestra en la
página web de forma visual el título que
se visualiza en la pestaña del navegador
o los elementos meta por lo tanto como
son etiquetas que suelen ir dentro de la
cabecera lo que haremos es intentarlo
también dentro es decir añadirle un
tabulador
le indicaremos el título aquí como va a
ser todo en la misma línea y no va a
tener más etiquetas dentro mantenemos la
apertura y cierre de etiquetas dentro de
la misma línea y luego crearé una
etiqueta meta qué le vamos a indicar en
esta etiqueta meta pues la codificación
de la página web normalmente la
codificación que se utiliza en las
páginas web es utf8 y para eso
utilizaremos charset indicándole aquí
utf8
pero este utf8 también hay que
configurarlo dentro del entorno de
desarrollo
Y si os fijáis aquí abajo aparece el
tipo de codificación y coinciden si no
coincidieran tendríamos que Modificar el
entorno de desarrollo el idioma
Castellano tiene eñes tildes diéresis
estos símbolos hay que codificarlos y se
hace de la siguiente forma si tengo una
tilde en la a lo que tendré que poner
por detrás es el código correspondiente
o la entidad correspondiente
en la teoría tenéis acceso a la página
web que se os ofrece en la imagen en
ella podréis encontrar la asociación de
carácter o símbolo con el código entidad
correspondiente para que html lo sepa
interpretar voy a poner un ejemplo
dentro del Body aunque no vayamos a
hacer ahora nada os adelanto que hay una
etiqueta que es h1 que quiere decir que
vamos a indicarle el título si al título
le añadimos
un nombre que es información y lleva una
tilde en la o si no pusiésemos utf8 lo
que tendríamos que hacer es
esa o con esa tilde venir a la página
donde está la codificación
Buscar la O con la tilde y el
código y así mostraría información con
tilde y información con tilde también
esta segunda no sería necesaria
si ponemos aquí este tipo de
codificación y que el lenguaje es en
castellano pero aún así no estamos
exentos de utilizar este tipo de
caracteres Por qué Porque hay caracteres
especiales que no existen en los idiomas
por ejemplo
por ejemplo este símbolo por ejemplo
no existe en el idioma Castellano y por
lo tanto si queremos Que aparezca en la
página web tendríamos que el
código del carácter y código de carácter
y sustituirlo aquí donde aparece el
texto
Si queremos ver el resultado de la
página web que estamos creando que en
este caso solamente lleva un título el
resto de información es información que
va en la página pero que no se visualiza
lo que tendremos que hacer es ir con el
botón derecho a Open with Live server y
nos mostrará información con tilde
información con tilde pero con el
carácter especial o el símbolo
que no existe en el idioma castellano de
forma adecuada a continuación Seguiremos
con la etiqueta meta con la etiqueta
meta además de
la codificación lo que le podremos
Mostrar es lo que le podremos indicar es
una descripción y el contenido de esta
descripción será esto
y por otro lado
keywords que son palabras clave como
estructura
html
html5
serán palabras clave con las que si esta
página web que estamos creando se
publicase en internet cuando vayamos a
un buscador como Google por ejemplo y
introduzcamos una palabra Esa es la
palabra con la que hará búsquedas de la
página web que queremos Que aparezca en
ese calor finalmente indicar que los
comentarios en un documento html se
pueden crear haciendo uso de los
siguientes caracteres la apertura de
llaves signo de admiración guión guión y
automáticamente me ha propuesto el
cierre de este comentario que sería un
guión guión y cierre de llaves
Qué comentario vamos a poner pues como
es la cabecera y el cuerpo pero que
hayáis entendido Cómo se estructura una
página html cualquier duda ya sabéis
dónde estamos un saludo
Weitere ähnliche Videos ansehen
Curso de HTML y CSS. 2.1. Estructura de una página web. Párrafos de texto
🧡 10 BUENAS PRÁCTICAS en HTML 👍 [haz tu código limpio]
Tutorial básico de HTML desde cero - Video 2: Vistazo inicial a las etiquetas.
✌️👑Aprendiendo Desde Cero HTML 5 en Adobe Dreamweaver 2021👍✌️
Qué es y Cómo usar la Etiqueta Header en HTML (Ejemplo de uso)
Curso Básico de HTML desde 0 - Introducción
5.0 / 5 (0 votes)