<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta charset="utf-8"/>
<title>HTML Doc Page</title>
<link rel="stylesheet" href="techdoc.css"/>
</head>
<body>
<nav id="navbar">
<header id="menu">HTML Doc Page</header>
<ul>
<li><a href="#What_is_HTML?" class="nav-link">What is HTML?</a></li>
<li><a href="#CSS" class="nav-link">CSS</a></li>
<li><a href="#JavaScript" class="nav-link">JavaScript</a></li>
<li><a href="#Elements_and_Tags" class="nav-link">Elements and Tags</a></li>
<li><a href="#Expected_Knowledge" class="nav-link">Expected Knowledge</a></li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="What_is_HTML?">
<header id="What-Html">What is HTML?</header>
<p class="normalp">The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It defines the meaning and structure of web content. It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.</p>
<p class="normalp">Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for its appearance.</p>
<p class="linkp">Go to <a href="https://en.wikipedia.org/wiki/HTML" target="_blank">wikipedia</a> for more information.</p>
</section>
<section class="main-section" id="CSS">
<header id="thecss">CSS</header>
<p class="normalp">Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.</p>
<p class="normalp">CSS is designed to enable the separation of content and presentation, including layout, colors, and fonts. This separation can improve content accessibility; provide more flexibility and control in the specification of presentation characteristics; enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, which reduces complexity and repetition in the structural content; and enable the .css file to be cached to improve the page load speed between the pages that share the file and its formatting.</p>
<p>Here are a couple of CSS examples:</p>
<code>#game {
max-width: 500px;
max-height: 400px;
background-color: #ffffff;
color: #ffffff;
margin-top: 30px;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
padding: 10px;
} </code>
<p></p>
<code>
body {
background-color: #fdfaec;
color: #524100;
font-family: timesnewroman;
}
</code>
<p class="linkp">Go to <a href="https://en.wikipedia.org/wiki/CSS" target="_blank">wikipedia</a> for more information.</p>
</section>
<section class="main-section" id="JavaScript">
<header id="thejavascript">JavaScript</header>
<p class="normalp">JavaScript, often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2023, 98.7% of websites use JavaScript on the client side for webpage behavior, often incorporating third-party libraries. All major web browsers have a dedicated JavaScript engine to execute the code on users' devices.</p>
<p class="normalp">JavaScript is a high-level, often just-in-time compiled language that conforms to the ECMAScript standard.[11] It has dynamic typing, prototype-based object-orientation, and first-class functions. It is multi-paradigm, supporting event-driven, functional, and imperative programming styles. It has application programming interfaces (APIs) for working with text, dates, regular expressions, standard data structures, and the Document Object Model (DOM).</p>
<p>Here are a couple of JavaScript examples:</p>
<code>
const life = "eternal";
</code>
<p></p>
<code>
let someEvenNumbers = [2, 4, 6, 8, 10, 12, 14, 16];
</code>
<p></p>
<code>
let button1 = document.querySelector("#button1");
</code>
<p class="linkp">Go to <a href="https://en.wikipedia.org/wiki/JavaScript" target="_blank">wikipedia</a> for more information.</p>
<section class="main-section" id="Elements_and_Tags">
<header id="eltag">Elements and Tags</header>
<p class="normalp">As is generally understood, the position of an element is indicated as spanning from a start tag and is terminated by an end tag. This is the case for many, but not all, elements within an HTML document. The distinction is explicitly emphasised in HTML 4.01 Specification:</p>
<p class="normalp">Elements are not tags. Some people refer to elements as tags (e.g., "the P tag"). Remember that the element is one thing, and the tag (be it start or end tag) is another. For instance, the HEAD element is always present, even though both start and end HEAD tags may be missing in the markup.</p>
<p class="linkp">Go to <a href="https://en.wikipedia.org/wiki/HTML_element" target="_blank">wikipedia</a> for more information.</p>
<h1 id="blockel">Block Elements</h1>
<p class="normalp">Block elements, or block-level elements, have a rectangular structure. By default, these elements will span the entire width of its parent element, and will thus not allow any other element to occupy the same horizontal space as it is placed on.</p>
<p class="linkp">Go to <a href="https://en.wikipedia.org/wiki/HTML_element#Block_elements" target="_blank">wikipedia</a> for more information.</p>
<h1 id="inel">Inline Elements</h1>
<p class="normalp">Inline elements are treated as part of the flow of document text; they cannot have margins, width, or height set, and do break across lines.</p>
<p class="linkp">Go to <a href="https://en.wikipedia.org/wiki/HTML_element#Document_body_elements" target="_blank">wikipedia</a> for more information.</p>
<h1 id="form">Forms</h1>
<p class="normalp">A webform, web form or HTML form on a web page allows a user to enter data that is sent to a server for processing. Forms can resemble paper or database forms because web users fill out the forms using checkboxes, radio buttons, or text fields. For example, forms can be used to enter shipping or credit card data to order a product, or can be used to retrieve search results from a search engine.</p>
<p class="linkp">Go to <a href="https://en.wikipedia.org/wiki/HTML_form" target="_blank">wikipedia</a> for more information.</p>
<h1 id="anchor">Anchor</h1>
<p class="normalp">An anchor element is called an anchor because web designers can use it to "anchor" a URL to some text on a web page. When users view the web page in a browser, they can click the text to activate the link and visit the page whose URL is in the link.</p>
<p class="normalp">In HTML, an anchor can be either the origin (the anchor text) or the target (destination) end of a hyperlink.</p>
<p class="normalp">With the attribute href, the anchor becomes a hyperlink to either another part of the document or another resource (e.g. a webpage) using an external URL. Alternatively (and sometimes concurrently), with the name or id HTML attributes set, the element becomes a link target.</p>
<p class="linkp">Go to <a href="https://en.wikipedia.org/wiki/HTML_element#Anchor" target="_blank">wikipedia</a> for more information.</p>
<h1 id="attributes">Attributes</h1>
<p class="normalp">HTML attributes are special words used inside the opening tag to control the element's behaviour. HTML attributes are a modifier of a HTML element type. An attribute either modifies the default functionality of an element type or provides functionality to certain element types unable to function correctly without them. In HTML syntax, an attribute is added to a HTML start tag.</p>
<p class="normalp">Several basic attributes types have been recognized, including: required attributes, needed by a particular element type for that element type to function correctly; optional attributes, used to modify the default functionality of an element type; standard attributes, supported by many element types; and event attributes, used to cause element types to specify scripts to be run under specific circumstances.</p>
<p class="normalp">Some attribute types function differently when used to modify different element types. For example, the attribute name is used by several element types, but has slightly different functions in each.</p>
<p class="linkp">Go to <a href="https://en.wikipedia.org/wiki/HTML_attribute" target="_blank">wikipedia</a> for more information.</p>
</section>
<section class="main-section" id="Expected_Knowledge">
<header id="know">Expected Knowledge</header>
<p>Some things you need to know before jumping into coding:</p>
<ul>
<li>How to read</li>
<li>How to write</li>
<li>How to listen</li>
<li>How to be patient</li>
<li>How to browse the Web</li>
</ul>
<p class="normalp">In order to dive into HTML (and of course, CSS and JavaScript) one has to know how to read and write, how to handle a computer amd browse the web, and how to be patient, focused and determined. A little bit of math wouldn't hurt. It's not much, basically anyone can dive into it and, who knows, make a fine living.</p>
<footer>This project was based on <a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-technical-documentation-page-project/build-a-technical-documentation-page" target="_blank">freeCodeCamp</a> and the vast majority of the info displayed here was taken from Wikipedia.</footer>
</section>
</main>
<hr>
</body>
</html>
* {
box-sizing: border-box;
}
body {
background-color: #fdfaec;
color: #524100;
font-family: timesnewroman;
}
#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);
}
#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%;
}
#main-doc {
position: absolute;
margin-left: 310px;
padding: 20px;
margin-bottom: 110px;
}
header {
font-size: 30px;
font-weight: bold;
margin: 10px;
text-align: center;
}
#main-doc header {
text-align: left;
margin: 0px;
}
h1 {
font-size: 24px;
font-style: italic;
}
li {
padding-left: 10px;
}
code {
background-color: #ced2d9;
}
.normalp {
text-align: left;
text-justify: auto;
font-size: 20px;
}
.linkp {
text-align: center;
text-justify: auto;
border: 20px solid transparent;
}
a {
color: #4d4d4d;
}
a:visited {
color: black;
}
a:hover {
color: brown;
}
a:active {
color: #ffffff;
}
@media (max-width: 1000px) {
code {
background-color: #1d156b;
color: white;
}
}
