Cuéntanos qué está pasando:
Estos son los 3 errores que me dice que estoy mal en mi codigo alguien quien me pueda apoyar por favor.
1.-El primer hijo de cada .main-section debe ser un elemento header .
2.-Debes tener el mismo número de elementos .nav-link y .main-section
3.-ejemplo, si haces clic en un elemento .nav-link que contenga el texto “Hello world”, la página navega al elemento section con ese id).
Tu código hasta el momento
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<nav id="navbar">
<header>Documentacion HTML</header>
<ul>
<li>
<a class="nav-link" href="#Introduccion">Introduccion</a>
</li>
<li>
<a class="nav-link" href="#Requisitos_previos">Requisitos previos</a>
</li>
<li>
<a class="nav-link" href="#Guias">Guias</a>
</li>
<li>
<a class="nav-link" href="#Comenzando_con_HTML">Comenzando con HTML</a>
</li>
<li>
<a class="nav-link" href="#Anatomia_de_un_elemento_HTML">Anatomia de un elemento HTML</a>
</li>
<li>
<a class="nav-link" href="#Elementos_de_anidamiento">Elementos de anidamiento</a>
</li>
<li>
<a class="nav-link" href="#Elementos_vacios">Elementos vacios</a>
</li>
<li>
<a class="nav-link" href="#Imagenes">Imagenes</a>
</li>
<li>
<a class="nav-link" href="#Marcar_texto">Marcar texto</a>
</li>
<li>
<a class="Parrafos" href="#Parrafos">Parrafos</a>
</li>
<li>
<a class="nav-link" href="#Liza">Liza</a>
</li>
<li>
<a class="nav-link" href="#Enlaces">Enlaces</a>
</li>
<li>
<a class="nav-link" href="#Conclusion">Conclusion</a>
</li>
<li>
<a class="nav-link" href="#Referencia">Referencia</a>
</li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="Introduccion">
<header>Introduccion</header>
<article>
<p>
En esencia, HTML es un lenguaje compuesto por elementos que se pueden aplicar a fragmentos de texto
para darles un significado diferente en un documento (¿Es un párrafo? ¿Es una lista con viñetas? ¿Es
parte de una tabla?), estructure un documento en secciones lógicas (¿Tiene un encabezado? ¿Tres
columnas de contenido? ¿Un menú de navegación?) e incruste contenido como imágenes y videos en una
página. Este módulo presentará los dos primeros e introducirá los conceptos fundamentales y la
sintaxis que necesita saber para comprender HTML.
</p>
</article>
</section>
<section class="main-section" id="Requisitos_previos">
<header>Requisitos previos</header>
<article>
<p>Conocimientos básicos de informática, software básico instalado y conocimientos básicos de trabajo
con archivos .<br><strong>Objetivo</strong>:Para obtener una familiaridad básica con HTML y
practicar la escritura de algunos elementos HTML.
</p>
</ul>
</article>
</section>
<section class="main-section" id="Guias">
<header>Guias</header>
<article>
<p>
Este módulo contiene los siguientes artículos, que lo guiarán a través de toda la teoría básica de
HTML y le brindarán una amplia oportunidad para que pruebe algunas habilidades.
</p>
<p>
Comenzando con HTML<br>
Cubre los conceptos básicos absolutos de HTML, para que pueda comenzar: definimos elementos,
atributos y otros términos importantes, y mostramos dónde encajan en el lenguaje. También mostramos
cómo se estructura una página HTML típica y cómo se estructura un elemento HTML, y explicamos otras
características básicas importantes del lenguaje. En el camino, jugaremos con algo de HTML para que
se interese.
</p>
<p>
¿Qué hay en la cabeza? Metadatos en HTML<br>
El encabezado de un documento HTML es la parte que no se muestra en el navegador web cuando se carga
la página. Contiene información como la página title, enlaces a CSS (si desea diseñar su contenido
HTML con CSS), enlaces a favicons personalizados y metadatos (datos sobre el HTML, como quién lo
escribió y palabras clave importantes que describen el documento). ).
</p>
<p>
Fundamentos del texto HTML<br>
Uno de los trabajos principales de HTML es dar significado al texto (también conocido como semántica
), para que el navegador sepa cómo mostrarlo correctamente. Este artículo analiza cómo usar HTML
para dividir un bloque de texto en una estructura de encabezados y párrafos, agregar
énfasis/importancia a las palabras, crear listas y más.
</p>
<p>
Creación de hipervínculos<br>
Los hipervínculos son realmente importantes: son lo que hace que la web sea una web. Este artículo
muestra la sintaxis requerida para hacer un enlace y analiza las mejores prácticas para los enlaces.
</p>
<p>Formato de texto avanzado<br>
Hay muchos otros elementos en HTML para dar formato al texto que no abordamos en el artículo de
fundamentos de texto HTML . Los elementos aquí son menos conocidos, pero sigue siendo útil
conocerlos. En este artículo, aprenderá a marcar citas, listas de descripción, código de computadora
y otros textos relacionados, subíndices y superíndices, información de contacto y más.
</p>
<p>
Estructura del documento y del sitio web<br>
Además de definir partes individuales de su página (como "un párrafo" o "una imagen"), HTML también
se usa para definir áreas de su sitio web (como "el encabezado", "el menú de navegación" o "el
columna de contenido principal"). Este artículo analiza cómo planificar la estructura de un sitio
web básico y cómo escribir el HTML para representar esta estructura.
</p>
<p>Depuración de HTML<br>
Escribir HTML está bien, pero ¿qué pasa si algo sale mal y no puedes averiguar dónde está el error
en el código? Este artículo le presentará algunas herramientas que pueden ayudar.
</p>
</article>
</section>
<section class="main-section" id="Comenzando_con_HTML">
<header>Comenzando con HTML</header>
<article>
En este artículo cubrimos los conceptos básicos absolutos de HTML. Para comenzar, este artículo define
elementos, atributos y todos los demás términos importantes que puede haber escuchado. También explica
dónde encajan estos en HTML. Aprenderá cómo se estructuran los elementos HTML, cómo se estructura una
página HTML típica y otras características básicas importantes del lenguaje. En el camino, ¡también
habrá una oportunidad de jugar con HTML!<br>¿Qué es HTML?
HTML (lenguaje de marcado de hipertexto) es un lenguaje de marcado que le dice a los navegadores web
cómo estructurar las páginas web que visita. Puede ser tan complicado o tan simple como el desarrollador
web quiera que sea. HTML consta de una serie de elementos que se utilizan para encerrar, envolver o
marcar diferentes partes del contenido para que aparezca o actúe de cierta manera. Las etiquetas
adjuntas pueden convertir el contenido en un hipervínculo para conectarse a otra página, poner palabras
en cursiva, etc. Por ejemplo, considere la siguiente línea de texto:
<code>My cat is very grumpy</code>
Si quisiéramos que el texto se mantuviera solo, podríamos especificar que es un párrafo encerrándolo en
un <p>elemento de párrafo ( ):</p>
<code><p>My cat is very grumpy </p>
</code>
Select the code in the pad and hit Ctrl+R to watch it unfold in your
browser!
</article>
</section>
<section class="main-section" id="Anatomia_de_un_elemento_HTML">
<header>Anatomia de un elemento HTML</header>
<p>
Exploremos más a fondo nuestro elemento de párrafo de la sección anterior:
</p>
<code>
< !DOCTYPE html>
< html lang="en-US">
< head>
< meta charset="utf-8" />
< meta name="viewport" content="width=device-width" />
< title>My test page</title>
< /head>
< body>
< img src="images/firefox-icon.png" alt="My test image" />
< /body>
< /html>
</code>
<ul>
<li>
La etiqueta de apertura: consiste en el nombre del elemento (en este ejemplo, p de párrafo),
envuelto entre paréntesis angulares de apertura y cierre. Esta etiqueta de apertura marca dónde
comienza el elemento o comienza a surtir efecto. En este ejemplo, precede al inicio del texto del
párrafo.
</li>
<li>
El contenido: Este es el contenido del elemento. En este ejemplo, es el texto del párrafo.
</li>
<li>
La etiqueta de cierre: es lo mismo que la etiqueta de apertura, excepto que incluye una barra
inclinada antes del nombre del elemento. Esto marca donde termina el elemento. No incluir una
etiqueta de cierre es un error común de principiante que puede producir resultados peculiares.
</li>
<li>El elemento es la etiqueta de apertura, seguido por el contenido, seguido por la etiqueta de cierre.
</li>
</ul>
<p>
Los atributos contienen información adicional sobre el elemento que no desea que aparezca en el
contenido real. Aquí, classes el nombre del atributo y editor-notees el valor del atributo . El
classatributo le permite dar al elemento un identificador no único que se puede usar para orientarlo (y
cualquier otro elemento con el mismo classvalor) con información de estilo y otras cosas. Algunos
atributos no tienen valor, como required.
</p>
<p>Los atributos que establecen un valor siempre tienen:
</p>
<ul>
<li>Un espacio entre éste y el nombre del elemento (o el atributo anterior, si el elemento ya tiene uno
o más atributos).
</li>
<li>El nombre del atributo seguido de un signo igual.
</li>
<li>El valor del atributo envuelto por comillas de apertura y cierre.
</li>
</ul>
</section>
<section class="main-section" id="Elementos_de_anidamiento">
<header>Elementos de anidamiento</header>
<article>
También puede colocar elementos dentro de otros elementos; esto se denomina anidamiento . Si quisiéramos
decir que nuestro gato es muy gruñón, podríamos envolver la palabra "muy" en un <strong>elemento, lo
que significa que la palabra debe enfatizarse fuertemente:
<p>
<code><p>My cat is <strong>very</strong> grumpy.</p ></code>
Sin embargo, debe asegurarse de que sus elementos estén anidados correctamente. En el ejemplo
anterior, abrimos <p>primero el elemento, luego el <strong>elemento; por lo tanto, tenemos
que cerrar < strong>primero el elemento, luego el <p>elemento. Lo siguiente es incorrecto:
</p>
<p>
<code><p>My cat is <strong>very grumpy.</p></strong ></code>
Los elementos tienen que abrirse y cerrarse correctamente para que queden claramente dentro o fuera
unos de otros. Si se superponen como se muestra arriba, su navegador web intentará hacer la mejor
suposición de lo que estaba tratando de decir, lo que puede generar resultados inesperados. ¡Así que
no lo hagas!
</p>
</article>
</section>
<section class="main-section" id="Elementos_vacios">
<header>Elementos vacios</header>
<article>
<p>
Algunos elementos no tienen contenido y se denominan elementos vacíos . Tome el < img>elemento
que ya tenemos en nuestra página HTML:
</p>
<code>
<img src="images/firefox-icon.png" alt="My test image" />
</code>
<p>
Esto contiene dos atributos, pero no hay una < /img >etiqueta de cierre ni contenido interno.
Esto se debe a que un elemento de imagen no envuelve el contenido para afectarlo. Su propósito es
incrustar una imagen en la página HTML en el lugar donde aparece.
</p>
</article>
</section>
<section class="main-section" id="Imagenes">
<header>Imagenes</header>
<article>
<p>
Volvamos nuestra atención al <img>elemento nuevamente:
</p>
<code>
<img src="images/firefox-icon.png" alt="My test image" />
</code>
<p>
Como dijimos antes, incrusta una imagen en nuestra página en la posición en que aparece. Lo hace a
través del srcatributo (fuente), que contiene la ruta a nuestro archivo de imagen.
</p>
<p>
También hemos incluido un altatributo (alternativo). En el altatributo , especifica un texto
descriptivo para los usuarios que no pueden ver la imagen, posiblemente por las siguientes razones:
</p>
<ul>
<li>Son discapacitados visuales. Los usuarios con discapacidades visuales significativas a menudo
usan herramientas llamadas lectores de pantalla para leerles el texto alternativo.
</li>
<li>Algo salió mal y la imagen no se muestra. Por ejemplo, intente cambiar deliberadamente la ruta
dentro de su srcatributo para que sea incorrecta. Si guarda y vuelve a cargar la página, debería
ver algo como esto en lugar de la imagen:
</li>
</ul>
<p>
Las palabras clave para el texto alternativo son "texto descriptivo". El texto alternativo que
escriba debe proporcionar al lector suficiente información para tener una buena idea de lo que
transmite la imagen. En este ejemplo, nuestro texto actual de "Mi imagen de prueba" no sirve para
nada. Una alternativa mucho mejor para nuestro logotipo de Firefox sería "El logotipo de Firefox: un
zorro en llamas que rodea la Tierra".
</p>
</article>
</section>
<section class="main-section" id="Marcar_texto">
<header>Marcar texto</header>
<article>
<p>
Esta sección cubrirá algunos elementos HTML esenciales que usará para marcar el texto.
</p>
Encabezados
<p>
Los elementos de título le permiten especificar que ciertas partes de su contenido son títulos o
subtítulos. De la misma manera que un libro tiene el título principal, los títulos de los capítulos
y los subtítulos, un documento HTML también puede tenerlo. HTML contiene 6 niveles de encabezado,
< h1> - < h6> , aunque normalmente solo usará 3 o 4 como máximo:
</p>
<code>
< !-- 4 heading levels: -->
< h1>My main title< /h1>
< h2>My top level heading< /h2>
< h3>My subheading< /h3>
< h4>My sub-subheading< /h4>
</code>
<p style="background:rgb(10, 207, 241);;"><strong>Nota:</strong>Nota:</strong> cualquier cosa en HTML entre < !--y
-- >es un comentario HTML . El navegador ignora los comentarios mientras procesa el código. En
otras palabras, no son visibles en la página, solo en el código. Los comentarios HTML son una forma
de escribir notas útiles sobre su código o lógica.
</p>
</div>
<p>Ahora intente agregar un título adecuado a su página HTML justo encima de su <img>elemento.</p>
<p style="background:rgb(10, 207, 241);"> <strong>Nota:</strong> Verá que su título de nivel 1 tiene un estilo
implícito. No utilice elementos de encabezado para hacer que el texto sea más grande o en negrita,
ya que se utilizan para la accesibilidad y otras razones, como el SEO . Trate de crear una secuencia
significativa de encabezados en sus páginas, sin saltarse niveles.</p>
</article>
</section>
<section class="main-section" id="Parrafos">
<header>Parrafos</header>
<article>
<p>Como se explicó anteriormente, <p>los elementos son para contener párrafos de texto; los usará
con frecuencia al marcar contenido de texto regular:</p>
<code>
<p >This is a single paragraph</p >
</code>
<p>Agregue su texto de muestra (debe tenerlo de ¿Cómo se verá su sitio web? ) en uno o varios párrafos,
colocados directamente debajo de su <img>elemento.
</p>
</article>
</section>
<section class="main-section" id="Liza">
<header>Liza</header>
<article>
Gran parte del contenido de la web son listas y HTML tiene elementos especiales para ellas. Las listas
de marcado siempre consisten en al menos 2 elementos. Los tipos de lista más comunes son las listas
ordenadas y desordenadas:
<ol>
<li>Las listas desordenadas son para listas en las que el orden de los elementos no importa, como
una lista de la compra. Estos están envueltos en un <ul>elemento.
</li>
<li>Las listas ordenadas son para listas en las que el orden de los elementos es importante, como
una receta. Estos están envueltos en un <ol>elemento.
</li>
</ol>
Cada elemento dentro de las listas se coloca dentro de un < li>elemento (elemento de lista).
Por ejemplo, si quisiéramos convertir la parte del siguiente fragmento de párrafo en una lista
<code>
<p >
At Mozilla, we're a global community of technologists, thinkers, and builders
working together…
</p >
</code>
Podríamos modificar el marcado a este
<code>
<p >At Mozilla, we're a global community of</p >
<ul >
<li>technologists</li >
<li >thinkers</li >
<li >builders</li>
</ul>
<p>working together…</p>
</code>
Intente agregar una lista ordenada o desordenada a su página de ejemplo.
</article>
</section>
<section class="main-section" id="Enlaces">
<header>Enlaces</header>
<article>
Los enlaces son muy importantes: ¡son lo que hace que la web sea una web! Para agregar un enlace,
necesitamos usar un elemento simple:<a>: "a" es la forma abreviada de "ancla". Para convertir el
texto dentro de su párrafo en un enlace, siga estos pasos:
<ol>
<li>Elige algún texto. Elegimos el texto "Mozilla Manifesto".
</li>
<li>Envuelva el texto en un <a>elemento, como se muestra a continuación:
<code>
<a >Mozilla Manifesto</a >
</code>
</li>
<li>
Asigne <a>un hrefatributo al elemento, como se muestra a continuación:
<code><a> href="">Mozilla Manifesto</a></code>
</li>
<li>
Complete el valor de este atributo con la dirección web a la que desea vincular:
<code>
<a> href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto< /a>
</code>
</li>
</ol>
Es posible que obtenga resultados inesperados si omite la parte https://o http://, denominada protocolo
, al principio de la dirección web. Después de hacer un enlace, haz clic en él para asegurarte de que te
está enviando a donde querías.
<p style="background:rgb(10, 207, 241);">
<strong>Nota:</strong> href al principio puede parecer una opción bastante oscura para un nombre de
atributo. Si tiene problemas para recordarlo, recuerde que significa referencia <strong>de
hipertexto .</strong>
</p>
Agregue un enlace a su página ahora, si aún no lo ha hecho.
</article>
</section>
<section class="main-section" id="Conclusion">
<header>Conclusion</header>
<article>
Si ha seguido todas las instrucciones de este artículo, debería terminar con una página similar a la
siguiente (también puede<a href="https://mdn.github.io/beginner-html-site/" target="_blank">verla
aquí)</a>:<br><br>
Si te quedas atascado, siempre puedes comparar tu trabajo con nuestro <a
href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html" target="_blank">código de
ejemplo terminado</a> en GitHub.
Aquí, solo hemos arañado la superficie de HTML. Para obtener más información, vaya a nuestro tema sobre
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML" target="_blank">aprendizaje de HTML .</a>
</article>
</section>
<section class="main-section" id="Referencia">
<header>Referencia</header>
<article>
<ul>
<li>
Toda la documentacion en esta pagina esta tomada de
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank">MDN</a>
</li>
</ul>
</article>
</section>
</main>
</body>
</html>
html,
body {
min-width: 290px;
color: #4d4e53;
background-color: #ffffff;
font-family: 'Open Sans', Arial, sans-serif;
line-height: 1.5;
}
#navbar {
position: fixed;
min-width: 290px;
top: 0px;
left: 0px;
width: 300px;
height: 100%;
border-right: solid;
border-color: rgba(0, 22, 22, 0.4);
}
header {
color: black;
margin: 10px;
text-align: center;
font-size: 1.8em;
font-weight: thin;
}
#main-doc header {
text-align: left;
margin: 0px;
}
#navbar ul {
height: 88%;
padding: 0;
overflow-y: auto;
overflow-x: hidden;
}
#navbar li {
color: #4d4e53;
border-top: 1px solid;
list-style: none;
position: relative;
width: 100%;
}
#navbar a {
display: block;
padding: 10px 30px;
color: #4d4e53;
text-decoration: none;
cursor: pointer;
}
#main-doc {
position: absolute;
margin-left: 310px;
padding: 20px;
margin-bottom: 110px;
}
section article {
color: #4d4e53;
margin: 15px;
font-size: 0.96em;
}
section li {
margin: 15px 0px 0px 20px;
}
code {
display: block;
text-align: left;
white-space: pre-line;
position: relative;
word-break: normal;
word-wrap: normal;
line-height: 2;
background-color: #f7f7f7;
padding: 15px;
margin: 10px;
border-radius: 5px;
}
@media only screen and (max-width: 815px) {
/* Para dispositivos moviles: */
#navbar ul {
border: 1px solid;
height: 207px;
}
#navbar {
background-color: white;
position: absolute;
top: 0;
padding: 0;
margin: 0;
width: 100%;
max-height: 275px;
border: none;
z-index: 1;
border-bottom: 2px solid;
}
#main-doc {
position: relative;
margin-left: 0px;
margin-top: 270px;
}
}
@media only screen and (max-width: 400px) {
#main-doc {
margin-left: -10px;
}
code {
margin-left: -20px;
width: 100%;
padding: 15px;
padding-left: 10px;
padding-right: 45px;
min-width: 233px;
}
ADVERTENCIA
El código semilla del desafío y/o tu solución excedió la longitud máxima que podemos transferir del desafío.
Tendrás que dar un paso adicional aquí para que el código que escribiste se presente en un formato fácil de leer.
Por favor, copia/pega todo el código del editor que se muestra en el desafío desde el que acabas de enlazar.
Reemplaza estas dos oraciones con tu código copiado.
Por favor, deja la línea ``` arriba y la línea ``` abajo,
porque permiten que tu código formatee correctamente en el post.
Información de tu navegador:
El agente de usuario es: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36
Desafío: Proyectos de diseño web responsivo - Construye una página de documentación técnica
Enlaza al desafío:
