Tell us what’s happening:
Hello there,
I’m really struggeling with this task, since to me everything looks and works right, yet there seem to be Problems with the tasks 8 & 19.
I dont know if this is just one typo somewhere, but after copying and pasting everything twice, I can’t understand how there still can be anything wrong.
Please help!!
Your code so far
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Jannicks CSS Documentation Page</title>
<link rel="stylesheet" href="styles.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
</head>
<body>
<nav id="navbar" class="navbar">
<header class="navbar-header">
<h1>"Beginner"-HTML Documentation</h1>
</header>
<ul class="navbar-nav">
<li>
<a href="#Introduction" class="nav-link">Introduction</a>
</li>
<li>
<a href="#Building_Blocks" class="nav-link">Building Blocks</a>
</li>
<li>
<a href="#Content_Tags" class="nav-link">Content Tags</a>
</li>
<li>
<a href="#Structural_Tags" class="nav-link">Structural Tags</a>
</li>
<li>
<a href="#Interactive_Tags" class="nav-link">Interactive Tags</a>
</li>
<li>
<a href="#Semantics" class="nav-link">Semantics</a>
</li>
<li>
<a href="#Styling" class="nav-link">Styling</a>
</li>
<li>
<a href="#Attributes_and_advanced_Styling" class="nav-link">Attributes and advanced Styling</a>
</li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="Introduction">
<header>Introduction</header>
<p>HTML stands for hyper text markup language.
It is considered the standard markup language for documents to be displayed by Webbrowsers. HTML was originally proposed and programmed by Tim Berners-Lee in in the years 1989 and 1990 while working at CERN.</p>
<img id="TBL" rel="decorative" src="https://cds.cern.ch/images/CERN-GE-9407011-31/file?size=large">
<p id="caption">*Tim Berners-Lee at Cern in 1989</p>
</section>
<section class="main-section" id="Building_Blocks">
<header>Building Blocks</header>
<p>HTML elements are the building blocks of HTML Pages, which define the semantic structure of the hypertext.Those Building blocks are written as Tags by using angle brackets (< >) and with a backslash to identify the closing tag
</p>
<div class="example">
<code><opening-tag> </closing-tag></code>
</div>
</section>
<section class="main-section" id="Content_Tags">
<header>Content Tags</header>
<p>To display the content of a Webpage, the most important Tags are:
</p>
<div class="example">
<ul>
<li><code><h1></code></li>
<li><code><h2></code></li>
<li><code><h3></code></li>
<li><code><p></code></li>
<li><code><img></code></li>
</ul>
<div>
</section>
<section class="main-section" id="Structural_Tags">
<header>Structural Tags</header>
<p>Beside content tags, there are many tags that define the structure of a Website. Most important Tags are:
</p>
<div class="example">
<ul>
<li><code><header></code></li>
<li><code><body></code></li>
<li><code><main></code></li>
<li><code><article></code></li>
<li><code><section></code></li>
<li><code><aside></code></li>
<li><code><nav></code></li>
<li><code><div></code></li>
<li><code><span></code></li>
<li><code><footer></code></li>
</ul>
</div>
<p>Using the right structural text for every part hof the Hypertext, will enable search engines like Google and Bing to identify the information on a webpage correctly and lead to correct better searching results.</p>
<p>To increase the readability of the code, it is best practice to nest child-tags into their mother-tag:</p>
<div class="example">
<ul>
<li class="mother"><section></li>
<li class="childone"><div></li>
<li class="childtwo"><p></p></li>
<li class="childone"></div></li>
<li class="childone"><div></li>
<li class="childtwo"><p></p></li>
<li class="childone"></div></li>
<li class="mother"></section></li>
</ul>
</div>
</section>
<section class="main-section" id="Interactive_Tags">
<header>Interactive Tags<header>
<p>Another function of the hypertext is the ability to interact with it, by clicking on links, checking boxes of even type in information and sending that information to designated destination.<p>
<p>Most prominent interaction Tags would be the <code><input></code> and the <code><a></code> Tag.</p>
<p>While the use of the <code><a></code> tag is pretty much straight forward (<a href="#introduction">back to the top of the page</a>), the <code><input></code> tag can be used in a wide veariety of ways, by giving it various <code>type=""</code>-attributes, like for example:
<section class="example">
<p>type="radio"</p>
<form class="input">
<label>Option A</label>
<input type="radio" name="options" id="optiona">
<label>Option B</label>
<input type="radio" name="options" id="optionb">
<p>type="checkbox"</p>
<label>Option A</label>
<input type="checkbox">
<label>Option B</label>
<input type="checkbox">
<div class="input">
<p>type="date"</p>
<input type="date" class="input">
<p>type="submit"</p>
<input type="submit" value="Submit" class="input">
</section>
</section>
<section class="main-section" id="Semantics">
<header>Semantics</header>
<p>There are many ways a HTML-document can be written to basically look the same, yet it is advised to always use the tags with the adequate semantics.</p>
<p>Can a part of the hypertext be cropped out of the text, pasted anywhere else without losing its meaning the <code><article></code>-tag should be used</p>
<p>If the hypertext show a list of things that make sense in the context of the original hypertext, but wouldn’t make sense anywhere else, the <code><section></code>-tag is best.</p>
<p>When the HTML-page should just show different things, that aren’t related to one another the <code><div></code> and <code><span></code> Tags should be used.</p>
</section>
<section class="main-section" id="Styling">
<header>Styling</header>
<p>The decision about when to use a <code><div></code> or a <code><span></code> tag is made by deciding in what orientation the elements should stand to another.</p>
<p><code><div></code> tags define block elements, which are displayed on top of each other.<code><span></code> tags are in line elements which are used to display items next to each other.</p>
<section class="example">
<div class="div">
<code><div></code>
</div>
<p class="div">
<code><div></code>
</p>
<span class="span">
<code><span></code>
</span>
<span class="span">
<code><span></code>
</span>
</section>
<p >Other already mentioned tags, that inherit defined styling values are <code><h1></code>, <code><h2></code>, <code><h3></code> and <code><p></code> which display text in descending intensity:</p>
<section class="example intensities">
<h1 id="h1" class="intensities">h1</h1>
<h2 class="intensities">h2</h2>
<h3 class="intensities">h3</h3>
<p class="intensities">p</p>
</section>
</section>
<section class="main-section" id="Attributes_and_advanced_Styling">
<header>Attributes and advanced Styling</header>
<p>Besides displaying things in line, or as block, there are several options to style HTML. The most direct, way would be by giving tags a style attribute. in the followong examplet the header would have the style of "value":</p>
<div class="example">
<code><h1 style="value”></code>
</div>
<p>Since that kind of styling would decrease the readability of well designed Websites drastically, styling is mostly outsourced to the Cascade Styling System, or short CSS.</p>
<p>To use CSS, the used CSS-document is linked into the <code><head></code> of the HTML-Text:</p>
<div class="example">
<code><head></code>
<code><link href="styles.css” /></code>
<code></head></code>
</div>
<p>After implementing that link, no in-line styling attributes are necessary anymore, but specific <code><tags></code> and attributes like id="" and class="" can be targeted by CSS to design the Hypertext.</p>
</section>
</main>
</body>
</html>
* {
padding: 0;
margin: 0;
}
@media only screen and (max-width: 700px) {
:root {
font-size: 0.5rem;
font-family: "Open Sans", serif;
}
p {
font-size: 1.3rem;
}
#h1 {
font-size: 20px;
}
}
@media only screen and (min-width: 700px) {
:root {
font-size: 20px;
font-family: "Open Sans", serif;
}
p {
font-size: 1.1rem;
}
#h1 {
font-size: 35px;
}
}
body {
margin: 0;
padding: 0;
background-color: #fefafa;
color: black;
}
main {
padding: 1.8rem;
margin-left: 16rem;
}
.navbar {
width: 16rem;
min-height: 100vh;
position: fixed;
}
.navbar-nav {
box-shadow: 0px 0px 1rem 0.1rem lightgrey;
}
.nav-link {
display: flex;
flex-direction: column;
border: 1px solid black;
list-style: none;
background-color: #eeeeee;
padding: 10px;
}
.nav-link:hover {
background-color: #99ff99;
border: 2px solid black;
}
a:active {
color: grey;
text-decoration: none;
}
a:visited {
color: black;
text-decoration: none;
}
a:link {
color: black;
text-decoration: none;
}
header {
font-family: sans-serif;
margin-bottom: 1rem;
font-size: 2rem;
}
.navbar-header {
font-size: 1.1rem;
margin: 1rem;
}
p {
margin-top: 2rem;
margin-bottom: 1rem;
}
code {
font-size: 0.9rem;
}
ul {
list-style-type: none;
}
.main-section {
margin-bottom: 1rem;
padding: 1rem;
border-bottom: 1px double lightgrey;
box-shadow: 0px 0px 1rem 0.1rem lightgrey;
}
#TBL {
width: 14rem;
}
#caption {
display: flex;
font-size: 0.9rem;
}
#TBL:hover {
width: 100%;
}
code {
font-style: italic;
}
.example {
padding: 1rem;
background-color: #eeeeee;
}
.mother {
position: relative;
}
.childone {
position: relative;
padding-left: 1rem;
}
.childtwo {
position: relative;
padding-left: 2rem;
}
.input {
display: block;
justify-content: center;
font-size: 0.9rem;
}
.intensities {
display: flex;
align-items: center;
margin: auto;
}
.span {
position: relative;
top: -3rem;
left: 6rem;
}
.div {
position: relative;
top: 1rem;
left: 1rem;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page
. I am not sure about that last one, to be honest, maybe someone else can find it. Good luck!! Happy coding!!