Estructura global 1

Información Adicional

El editor que usamos en todo el curso es Notepad++ y es completamente gratis.

Transcripción

Es tiempo de profundizar en código HTML real
En este video aprenderemos sobre la estructura global de un documento HTML
El cual contendrá el contenido de nuestra página web
Ahora que ya tenemos un idea sobre cómo funciona HTML, es tiempo de aprender más sobre las etiquetas de HTML
Vamos a aprender las etiquetas que se encargan de darle la estructura global a todos los documentos HTML
Tenemos el navegador google Chrome abierto, pero tu puedes usar el navegador con el que te sientas más cómodo
Y voy a crear mi código HTML en el editor de texto llamado note pad ++
Este editor es gratuito y puedes encontrar el enlace a la web del autor para que lo descargues en la descripción del video
O puedes entrar en notepad-plus-plus.org
No es necesario que uses este editor en particular, puedes usar el que tu quieras
Entonces, en primer lugar vamos a crear algo llamado doctype, y para ello vamos a abrir nuestra etiqueta, ahora vamos a colocar un símbolo de exclamación dentro
Y luego colocamos el texto doctype añadimos un espacio y colocamos HTML
A esto se le llama document type, o tipo de documento en español
Existen muchos diferentes tipos de doctypes dependiendo de qué tipo de archivo HTML deseamos crear
Este doctype es el doctype de html5
En el curso vamos a aprender etiquetas de html4 y html5, sin embargo las etiquetas html4 pueden usarse sin problemas en un doctype de html5
Así que vamos a guardar nuestro documento, y vamos a darle el nombre de index.html
El nombre index.html es bastante común
Y cuando colocas un archivo con el nombre index.html en tu cuenta de Hosting
El servidor al acceder a tu dominio o directorio se dirigirá automáticamente hacia el archivo index.html y pasara por alto todos los otros archivos o páginas
Vamos a aprender más sobre la estructuración de nuestras páginas y archivos para el sitio web en un tutorial posterior
Ahora que ya tenemos nuestro doctype vamos a seguir con más etiquetas HTML
Así que nos movemos un poco hacia abajo y colocamos la etiqueta HTML
Y dentro de la etiqueta vamos a añadir algo llamado atributo
Así que colocamos lang de lenguaje un signo de igual, abrimos comillas y dentro colocaremos es de español
Y ahora cerramos nuestra etiqueta HTML
La etiqueta HTML envuelve todo nuestro documento HTML, y es donde vamos a colocar todas las etiquetas que comprenderán nuestra página
Lo único que no va dentro de la etiqueta HTML es la etiqueta del doctype
Hemos usado el atributo de lenguaje, para indicarle al navegador en que lenguaje se encuentra nuestra página
Que en este caso es español
Recuerda que la etiqueta HTML envolverá a todas las etiquetas y contenido de nuestra página
Pero no el doctype ya que es una etiqueta especial
Dentro de la etiqueta HTML vamos a colocar la etiqueta head, de encabezado
Así que colocamos la etiqueta head y luego creamos la etiqueta de cierre para head
Y vamos a añadir algo de espacio entre ellas para poder colocar más etiquetas dentro de head
La etiqueta head es el encabezado de nuestro documento
Ten en cuenta que lo que colocamos dentro de la etiqueta head no se muestra en el navegador
Es decir que el visitante no ve lo que nosotros colocamos aquí
Pero se usa para añadir información importante
Como información meta, vínculos con archivos CSS, vínculos con archivos de javascript y entre otra información.
Vamos a mostrarlo añadiendo una etiqueta meta
Así que creamos la etiqueta meta, y nuevamente vamos a colocar un atributo dentro de esta etiqueta
En este caso usaremos el atributo llamado charset y luego un símbolo de igual, luego añadimos comillas y colocamos dentro utf-8
Charset significa el conjunto de caracteres, y en este caso usaremos el conjunto de caracteres llamado utf 8
Y este es el conjunto de caracteres que desearas usar el 99 por ciento de las veces que crees un sitio web
Si usas un conjunto diferente de caracteres, probablemente tengas una buena razón para ello, y tu probablemente sabes por que
La meta etiqueta indicando el conjunto de caracteres es opcional, pero al igual que especificar el lenguaje de nuestro documento, es buena idea colocarlo
Así que vamos a guardar nuestro documento
Podrás haber notado que la etiqueta meta es similar a la etiqueta doctype
Ya que ninguna de las dos tiene una etiqueta de cierre
Eso es debido a que las etiquetas meta, son lo que llamamos un elemento vacío
No existe una etiqueta de cierre ya que no hay nada que debamos colocar dentro de la etiqueta
Su contenido, en este caso el atributo, y la etiqueta son uno mismo
Ahora tenemos muchas de las etiquetas que necesitamos para crear la estructura global de nuestro documento
Pero aún quedan algunas más
En el siguiente video veremos las que nos faltan

One Comment on “Estructura global 1”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¿Quieres aprender a crear sitios web?

Regístrate gratis como estudiante y aprende a crear sitios web sorprendentes. Gana certificados y medallas al completar los cursos gratuitos.
¡REGÍSTRATE GRATIS!
close-link
Crea tu sitio web con diseño profesional en menos de 15 minutos
Ver Tutorial
close-image