Emprendemos un viaje para crear un espacio en línea acogedor para los amantes de las mascotas. Nuestra escena, Pet Paradise, presenta a un personaje, Alex the Innovator, quien sueña con conectar a los dueños de mascotas a través de una página web vibrante e informativa. El objetivo de Alex es mostrar servicios para mascotas, compartir historias y construir una comunidad. Esta escena está diseñada para ser atractiva, guiando a los estudiantes a través del proceso de transformar la visión de Alex en una realidad digital.
Comenzaremos cubriendo los conceptos básicos de HTML con un pequeño proyecto, enfatizando 3 laboratorios que os guiarán a través del proceso de creación de una página web simple.
En este Laboratorio, crearás la sección del encabezado y el diseño de la página principal de "Pet's House". Esta sección es crucial para crear una buena primera impresión. El encabezado contendrá el menú de navegación y el diseño de la página principal presentará la página web a los visitantes.
Skills Graph
%%%%{init: {'theme':'neutral'}}%%%%
flowchart RL
html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"])
html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"])
html/BasicStructureGroup -.-> html/basic_elems("Basic Elements")
html/BasicStructureGroup -.-> html/head_elems("Head Elements")
html/BasicStructureGroup -.-> html/lang_decl("Language Declaration")
html/LayoutandSectioningGroup -.-> html/layout("Layout Elements")
html/LayoutandSectioningGroup -.-> html/nav_links("Navigation and Links")
html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding")
subgraph Lab Skills
html/basic_elems -.-> lab-271712{{"Diseño del encabezado y de la página principal"}}
html/head_elems -.-> lab-271712{{"Diseño del encabezado y de la página principal"}}
html/lang_decl -.-> lab-271712{{"Diseño del encabezado y de la página principal"}}
html/layout -.-> lab-271712{{"Diseño del encabezado y de la página principal"}}
html/nav_links -.-> lab-271712{{"Diseño del encabezado y de la página principal"}}
html/doc_flow -.-> lab-271712{{"Diseño del encabezado y de la página principal"}}
end
Estructura del documento HTML
Cuando los usuarios navegan por la web a través de Internet, encuentran diferentes tipos de contenido, incluyendo texto, enlaces, gráficos, imágenes y más.
¿Alguna vez te has preguntado cómo un navegador muestra este contenido de página? Podemos presionar F12 para ver el código fuente de la página, como se muestra en la figura siguiente.
A partir de la figura anterior, podemos ver que todo el contenido de texto está encerrado entre los corchetes angulares < y >. Este tipo de contenido se conoce como etiquetas, donde <> representa la etiqueta de apertura y </> representa la etiqueta de cierre.
HTML es un lenguaje compuesto por elementos, que se representan mediante etiquetas.
HTML (Hipertexto Marcado Lenguaje) es el código que se utiliza para estructurar una página web y su contenido.
Hiper: "Hiper" se opone a "Lineal". Los programas informáticos anteriores eran en su mayoría lineales, lo que significa que tenían que ser ejecutados secuencialmente de arriba hacia abajo. Las páginas web creadas con HTML, sin embargo, permiten la navegación a través de enlaces hipertextuales de una página a otra.
Texto: A diferencia de los lenguajes de programación compilados como C, C++ o Java, HTML es un lenguaje de scripting basado en texto. Su código fuente se interpreta y ejecuta directamente en el navegador sin necesidad de compilación.
Marcado: El principio fundamental de HTML es utilizar el marcado (etiquetas compuestas por corchetes angulares emparejados) para describir cómo se debe mostrar el contenido de la página web en un navegador.
Lenguaje: HTML es un lenguaje, pero se interpreta en lugar de compilarse. Todas sus etiquetas de marcado se traducen por el navegador en el resultado final que se muestra.
En este paso, comenzarás configurando la estructura básica de tu página web. Crearás un nuevo archivo HTML llamado index.html en el directorio /home/labex/project utilizando el comando touch ~/project/index.html. Abre este archivo con tu editor de texto preferido y agrega la estructura básica del documento HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pet's House</title>
</head>
<body>
<!-- We'll add content here in the next steps -->
</body>
</html>
La declaración <!DOCTYPE html> le dice al navegador qué tipo de documento esperar.
El elemento <html lang="en"> es el elemento raíz del documento HTML.
El elemento <head> contiene metadatos (datos sobre el documento), como el título y el conjunto de caracteres.
El elemento <title> especifica el título de la página web.
El elemento <meta charset="UTF-8"> especifica la codificación de caracteres para la página web.
El elemento <body> contiene el contenido visible de la página web.
Haz clic en Go Live en la esquina inferior derecha del Entorno para abrir el puerto 8080, y haz clic en Web 8080 en la esquina superior izquierda del Entorno para ver los resultados de la página.
Nota: La página actual no tiene ningún efecto porque el cuerpo está actualmente vacío. Veremos el efecto de la página cuando aprendamos más etiquetas.
El diseño de una página web generalmente consta de varios componentes clave, cada uno con un propósito distinto para garantizar que la interfaz de usuario sea clara y funcional:
Encabezado: Esta es la sección superior de la página web, que a menudo contiene el logotipo del sitio, el menú de navegación, los enlaces de inicio de sesión/registro, etc. El encabezado es una de las primeras cosas que un usuario nota, por lo que por lo general está diseñado para ser prominente, brindando un acceso fácil a la navegación.
Barra de navegación: Aunque la barra de navegación puede ser parte del encabezado, en algunos diseños también puede ser una sección separada ubicada en la parte superior, lateral o inferior de la página. La barra de navegación ofrece un acceso rápido a los enlaces internos del sitio web, ayudando a los usuarios a encontrar fácilmente el contenido en el que están interesados.
Contenido principal: Esta es la parte central de la página web, que contiene la información principal o el contenido principal que el usuario visitó la página para ver. El contenido principal puede dividirse en varias secciones, como artículos, publicaciones de blog, presentaciones de productos, etc., variando según el propósito y el diseño del sitio web.
Barra lateral: La barra lateral generalmente se encuentra al lado del contenido principal (ya sea en el lado izquierdo o derecho) y proporciona información adicional o funcionalidades, como enlaces relacionados, anuncios, cajas de búsqueda, enlaces a redes sociales, etc.
Pie de página: Ubicado en la parte inferior de la página web, el pie de página generalmente contiene información de derechos de autor, detalles de contacto, enlaces a mapas del sitio, políticas de privacidad, iconos de redes sociales, etc. El pie de página es la última parte que ven los usuarios cuando se desplazan hacia abajo, ofreciendo información básica del sitio y opciones adicionales de navegación.
Agrega elementos semánticos (header, main, footer) para organizar el contenido lógicamente.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pet's House</title>
</head>
<body>
<!--Contenido del encabezado-->
<header></header>
<!--Contenido principal-->
<main></main>
<!--Contenido del pie de página-->
<footer></footer>
</body>
</html>
<!----> es un comentario en HTML que se utiliza para agregar notas o descripciones al código. No afecta la funcionalidad del código y es ignorado por el navegador.
El elemento HTML <header> representa contenido introductorio, generalmente un grupo de ayudas introductorias o de navegación.
El elemento HTML <main> representa el contenido principal del <body> de un documento. La área de contenido principal consta de contenido que está directamente relacionado con o que amplía el tema central de un documento, o la funcionalidad central de una aplicación.
El elemento HTML <footer> representa un pie de página para su ancestro más cercano de contenido de sección o elemento raíz de sección. Un pie de página generalmente contiene información sobre el autor de la sección, datos de derechos de autor o enlaces a documentos relacionados.
Divide el logotipo y la navegación en dos áreas utilizando las etiquetas <div> y <nav>.
El elemento HTML <img> inserta una imagen en el documento.
El atributo src en la etiqueta <img> se utiliza para especificar la ruta a la imagen.
El atributo alt en la etiqueta <img> se utiliza para describir la imagen, y cuando la imagen no se puede mostrar correctamente en la página, se mostrará el contenido de alt.
class en la etiqueta es un atributo global, y el contenido después del signo igual es equivalente al nombre dado al elemento, que se utiliza por CSS para identificar un elemento en particular y establecer el estilo para el elemento especificado.
El elemento HTML <ul> representa una lista no ordenada de elementos, generalmente representada como una lista con viñetas.
El elemento HTML <li> representa un elemento en una lista.
El elemento HTML <a> se utiliza para definir un hiperenlace, creando un enlace entre diferentes páginas.
Nota: HTML se utiliza para poner contenido en una página web, mientras que CSS es esencial para crear un diseño visualmente atractivo. En este experimento, nos centraremos en aprender el contenido de HTML. Para lograr un mejor diseño de página, también te proporciono el archivo completo style.css.
En este laboratorio, aprendiste a estructurar y dar estilo al encabezado y al diseño de la página principal, centrándote en crear una interfaz acogedora y navegable para "Pet's House". Este laboratorio enfatizó la importancia de las primeras impresiones y sentó las bases para un sitio web amigable para el usuario.
