<!--<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>-->
<nav id="navbar">
<header>
<h1>HTML Documentation</h1>
</header>
<ul>
<li><a href="#Introduction" class="nav-link">Introduction</a></li>
<li><a href="#How_HTML_Works" class="nav-link">How HTML Works</a></li>
<li><a href="#Overview_of_Tags" class="nav-link">Overview of Tags</a></li>
<li><a href="#Structural_Setup" class="nav-link">Structural Setup</a></li>
<li><a href="#Basic_Styling" class="nav-link">Basic Styling</a></li>
<li><a href="#Lists" class="nav-link">Lists</a></li>
<li><a href="#Input_and_Forms" class="nav-link">Input and Forms</a></li>
<li><a href="#Tables" class="nav-link">Tables</a></li>
<li><a href="#Advanced_Tags" class="nav-link">Advanced Tags</a></li>
<li><a href="#References" class="nav-link">References</a></li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="Introduction">
<header>Introduction</header>
<p>HTML (<b>H</b>yper<b>T</b>ext <b>M</b>arkup <b>L</b>anguage (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript, it forms a triad of cornerstone technologies for the
World Wide Web.</p>
<p>HTML does not have much in the form of <em>logic-based functionality</em> (such as changing text based on the date or time of day), but instead functions as the basic building blocks that browsers need in order to format content on the Internet.</p>
<p>Basic HTML looks like the following:</p>
<code><p>Hello World. This is a sentence.</p></code>
</section>
<section class="main-section" id="How_HTML_Works">
<header>How HTML Works</header>
<p>Internet Browsers, such as Chrome, Internet Explorer, Edge, Firefox, Netscape, Safari, Opera, and others, process HTML in very similiar manner. They use the formatting of <a href="#Overview_of_Tags">tags</a> to understand how to process elements and
objects of a webpage into a viewable format.</p>
<p>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 the appearance of the document.
HTML can embed programs written in a scripting language such as JavaScript, which affects the behavior and content of web pages. Inclusion of CSS defines the look and layout of content. The World Wide Web Consortium (W3C), maintainer of both the
HTML and the CSS standards, has encouraged the use of CSS over explicit presentational HTML since 1997.</p>
<ul>
<li>Files that end in <code>.html</code> or <code>.htm</code> are basic HTML files. They can be rendered in the browser.</li>
<li>Files that end in <code>.php</code>, <code>.asp</code>, or the like are <em>backend files</em> and may contain server-specific code in them, along with HTML.</li>
<li>Files that end in <code>.css</code> (Cascading Stylesheets) or <code>.js</code> (Javascript) work with HTML, but are not required. They may contain some HTML, but it will be based on styling rules or logic-based functions.</li>
</ul>
</section>
<section class="main-section" id="Overview_of_Tags">
<header>Overview of Tags</header>
<p>HTML's core functionality is based on the use of <em>tags</em>. Tags are the litle bits of formatting that the browser understands to properly display the content. Most <strong>elements</strong> (items in the document) will be wrapped in opening and
closing tags, such as below:</p>
<code><p>Hello World. This is a sentence.</p></code>
<p>In the above example, the <code><p></code> is the opening tag (starting the element), and the <code></p></code> is the closing tag (ending the element). Some elements that do not require a closing tag can be <em>self-closing</em>, such
as below:</p>
<code><img src="logo.png" alt="Company Logo" /></code>
<p>There are about <strong>89 different HTML tags</strong> in the current version (HTML5). As a programmer, one is not required to know all types and versions of tags, but at least the most commonly-used 30 should be sufficient for most projects.</p>
</section>
<section class="main-section" id="Structural_Setup">
<header>Structural Setup</header>
<p>In HTML, content is organized in Sections, and all webpages should have the following format: Head and Body. While many pages may have navigation bars, footers, content headers, and the like, all webpages should contain a Head and Body, which are
wrapped in an <code><html></code> tag.</p>
<code><html><br/>
<head><br/>
</head><br/>
<br/>
<body><br/>
</body><br/>
</html></code>
<p>The <code><head></code> tag contains all of the information that should be processed or loaded <em>before</em> the main content/page is loaded. This can mean such things as title, character set, CSS stylesheets, Javascript libraries, Meta content
(such as descriptions, preview images, authors, etc), and the language that the content should be loaded in.</p>
<code> <head lang="en"><br/>
<title>Title of the Webpage</title><br/>
<meta charset="utf-8"/><br/>
<link href="/css/style.css" rel="stylesheet"/><br/>
<script src="/js/loadFunction.js"></script><br/>
<meta name="author" content="John H. Zoidberg"><br/>
</head></code>
<p>The <code><body></code> tag contains everything that should be visible to the end user (you, or the general public), such as articles, images, videos, etc. Unless it is specifically noted, all items that are in the <code><body></code> will be visible.</p>
<code> <body><br/>
<h1>Introduction</h1><br/>
<p>Hello World</p><br/>
<img src="/img/my_photo.jpg" alt="Me"/><br/>
</body></code>
<p>The information in the <code><body></code> can be organized into <em>Section</em> using advanced semantic tags, which will be discussed in <a href="#Advanced_Tags">Advanced Tags</a>.</p>
</section>
<section class="main-section" id="Basic_Styling">
<header>Basic Styling</header>
<p>While HTML can be stylized with colors and animations in CSS, HTML does provide its own form of basic styling, such as <b>bold</b>, <i>italics</i>, and <u>underline</u>.</p>
<p>Bold: <code><b>This is Bold</b></code></p>
<p>Italic: <code><i>This is Italicized</i></code></p>
<p>Underline: <code><u>This is Underlined</u></code></p>
<p>There are a few notes to keep in mind:</p>
<ul>
<li>While <code><b></code> may make content bolded, it does not work for Screen Readers. If something should be stated with importance, it should be wrapped in a <code><strong></code> tag, making sure the Screen Reader enunciates it correctly.</li>
<li>The same goes for <code><i></code> tag; Screen Readers cannot process this correctly, so items that need to be italicized should be wrapped in a <code><em></code> (<strong>em</strong>phasized) tag.</li>
<li>Both <code><b></code>/<code><strong></code> and <code><i></code>/<code><em></code> produce the same thing visually, it is important to note the difference between what should be spoken with importance and what shouldn't.</li>
</ul>
</section>
<section class="main-section" id="Lists">
<header>Lists</header>
<p>Lists are possible with HTML in two basic formats: Ordered and Unordered (or "Bulleted"). Ordered lists are as stated: lists with numbers (or letters, based on formatting); Unordered lists are marked with bullets, based on the level of list.</p>
<p><em><strong>IMPORTANT:</strong> "Ordered" only refers to the numbers of the items in the list, not automatically sorting the list. If the list contains "F, T, M", it will be listed as "F, T, M".</em></p>
<p>All items inside an Ordered or Unordered list must be inside a <code><li></code> (list item) tag, which can contain lists in themselves.</p>
<div class="overflow">
<div class="w-50 float-left">
<p>Code:</p>
<code><ol><br/>
<li>Ford</li><br/>
<li>Telsa</li><br/>
<li>Mazda</li><br/>
<ol></code>
</div>
<div class="w-50 float-left">
<p>Produces:</p>
<ol>
<li>Ford</li>
<li>Telsa</li>
<li>Mazda</li>
</ol>
</div>
</div>
<p>Meanwhile, the Unordered list produces the same thing, but with bullets instead.</p>
<div class="overflow">
<div class="w-50 float-left">
Code:
<code><ul><br/>
<li>Ford</li><br/>
<li>Telsa</li><br/>
<li>Mazda</li><br/>
<ul></code>
</div>
<div class="w-50 float-left">
Produces:
<ul>
<li>Ford</li>
<li>Telsa</li>
<li>Mazda</li>
</ul>
</div>
</div>
<p><em>There are Data lists with <code><dl></code>, but those are rarely used.</em></p>
</section>
<section class="main-section" id="Input_and_Forms">
<header>Input and Forms</header>
<p>The method for handing input and forms with HTML is a bit different; this is the first portion that allows for something other than just a display of information. Information (like logins, orders, email signups, etc) is submitted via HTML forms, but
then is processed on the server via backend systems (like PHP or ASP). However, basic forms can still be created in HTML.</p>
<p>There are multiple versions of inputs that can be put into forms, but regardless, the form must be wrapped in a <code><form></code> tag. The properties (items inside the tag/element) that are recommended (but not required) are <code>method</code> (how the information will be passed to the server) and <code>action</code> (where the information will be sent). (More information on this later.)</p>
<p>Let's take a look at a sample form setup:</p>
<div class="overflow">
<div class="w-50 float-left">
<p>Code:</p>
<form method="post" action="submitForm.php"><br/> <label>Name:</label> <input type="text" name="name" id="name"/><br/><br/> <label>Email:</label> <input type="email" name="email"
id="email"/><br/>
<br/> <label>Phone:</label> <input type="text" name="phone" id="phone"/><br/><br/> <label>Age:</label> <input type="number" name="age" id="age" max="125" min="0"/><br/>
<br/> <label>Gender:</label>
<br/> <select id="gender" name="gender"><br/> <option value="m">Male</option><br/> <option value="f">Female</option><br/> <option value="na">Non-Binary</option><br/> </select><br/>
<br/> <label>Favorite Color:</label><br/> <label><input type="radio" name="color" value="red" /> Red</label><br/><br/> <label><input type="radio"
name="color" value="blue" /> Blue</label><br/><br/> <label><input type="radio" name="color" value="green" /> Green</label><br/><br/> <label><input
type="radio" name="color" value="yellow" /> Yellow</label><br/><br/> <label>Favorite Animal:</label><br/> <label><input type="checkbox" name="animal" value="cat" /> Cat</label><br/><br/> <label><input type="checkbox" name="animal" value="dog" /> Dog</label><br/><br/> <label><input type="checkbox" name="animal" value="bird" /> Bird</label><br/><br/> <label><input type="checkbox" name="animal" value="fish" /> Fish</label><br/><br/> <label>Comments:</label>
<br/> <textarea id="comments" name="comments"></textarea><br/><br/> <input type="submit" value="Send Form"/><br/> </form>
</div>
<div class="w-50 float-left">
<p>Produces:</p>
<form method="post" action="submitForm.php">
<label>Name:</label> <input type="text" name="name" id="name" /><br/>
<label>Email:</label> <input type="email" name="email" id="email" /><br/>
<label>Phone:</label> <input type="text" name="phone" id="phone" /><br/>
<label>Age:</label> <input type="number" name="age" id="age" max="125" min="0" /><br/>
<label>Gender:</label>
<select id="gender" name="gender">
<option value="m">Male</option>
<option value="f">Female</option>
<option value="na">Non-Binary</option>
</select><br/>
<label>Favorite Color:</label>
<label><input type="radio" name="color" value="red" /> Red</label><br/>
<label><input type="radio" name="color" value="blue" /> Blue</label><br/>
<label><input type="radio" name="color" value="green" /> Green</label><br/>
<label><input type="radio" name="color" value="yellow" /> Yellow</label><br/>
<label>Favorite Animal:</label>
<label><input type="checkbox" name="animal" value="cat" /> Cat</label><br/>
<label><input type="checkbox" name="animal" value="dog" /> Dog</label><br/>
<label><input type="checkbox" name="animal" value="bird" /> Bird</label><br/>
<label><input type="checkbox" name="animal" value="fish" /> Fish</label><br/>
<label>Comments:</label>
<textarea id="comments" name="comments"></textarea><br/>
<input type="submit" value="Send Form" />
</form>
</div>
</div>
<p>All <code>form</code>s must have a <em>Submit</em> button in order to submit the information.</p>
<p>There are many other form elements that can be used, such as "color", "date", and "file uploads", but those will not be discussed here.</p>
</section>
<section class="main-section" id="Tables">
<header>Tables</header>
<p>Data in HTML documents can be formatted in Tables. It is not recommended to design HTML pages with tables, but only to use tables to display data as necessary.</p>
<p>All tables are wrapped with a <code><table></code> tag. Inside that, we have rows with <code><tr></code> (<b>t</b>able <b>r</b>ows). <em>Inside</em> that, we have <code><td></code> (<b>t</b>able <b>d</b>ata, also known as <em>cells</em>).
<b>T</b>able <b>h</b>eaders (<code><th></code>) can be used to identify columns.</p>
<p>The data in tables must be writte in HTML in a <em>vertical</em> format, which is processed in a <em>horizontal</em> format, so each row, then each table data cell is written and processed. Confusing? No worries, let's take a look:</p>
<code><table><br/>
<tr><br/>
<th>Name</th><br/>
<th>Age</th><br/>
<th>Color</th><br/>
</tr><br/>
<tr><br/>
<td>Tom</td><br/>
<td>45</td><br/>
<td>Blue</td><br/>
</tr><br/>
<tr><br/>
<td>Susan</td><br/>
<td>26</td><br/>
<td>Red</td><br/>
</tr><br/>
<tr><br/>
<td>Robert</td><br/>
<td>105</td><br/>
<td>Plaid</td><br/>
</tr><br/>
</table></code>
<p>This produces the following:</p>
<fieldset>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Color</th>
</tr>
<tr>
<td>Tom</td>
<td>45</td>
<td>Blue</td>
</tr>
<tr>
<td>Susan</td>
<td>26</td>
<td>Red</td>
</tr>
<tr>
<td>Robert</td>
<td>105</td>
<td>Plaid</td>
</tr>
</table>
</fieldset>
<p><em><small>The attribute of <code>border</code> has been added to this example to emphasize the cells.</small></em></p>
</div>
</div>
<p>This make take some practice to get correct, especially when <code>colspan</code> and <code>rowspan</code> are in the mix.</p>
</section>
<section class="main-section" id="Advanced_Tags">
<header>Advanced Tags</header>
<p>In the recent years, HTML has evolved to include modern convinences, such as audio, video, responsive images, and media queries (a CSS technique for reformatting the page information on different sized screens). Prior to HTML5, including something
like a video was very complicated, and required many lines of code to get correct. Now, just the inclusion of a <code><video></code> tag is most of the work.</p>
<p>Let's take a look at the two most common used advanced tags: video and audio.</p>
<div class="overflow">
<div class="w-50 float-left"><code>
<video width="400" controls><br/> <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"><br/> <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"><br/> Your
browser does not support HTML5 video.<br/> </video></code>
</div>
<div class="w-50 float-left">
<video width="400" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
</div>
<p><em><small>There are two formats included, based on what the browser can load. MP4 is the most common and popular, and OGG can be used as a backup.</small></em></p>
<p>Now let's take a look at an example of <code>audio</code>:</p>
<div class="overflow">
<div class="w-50 float-left"><code>
<audio controls><br/> <source src="https://www.w3schools.com/Html/horse.ogg" type="audio/ogg"><br/> <source src="https://www.w3schools.com/Html/horse.mp3" type="audio/mpeg"><br/> Your
browser does not support the audio element.<br/> </audio></code>
</div>
<div class="w-50 float-left">
<audio controls>
<source src="https://www.w3schools.com/Html/horse.ogg" type="audio/ogg">
<source src="https://www.w3schools.com/Html/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
</div>
<p><em><small>There are two formats included, based on what the browser can load. MP3 is the most common and popular, and OGG can be used as a backup.</small></em></p>
</section>
<section class="main-section" id="References">
<header>References</header>
<p>More information about HTML can be found at the following links:</p>
<ul>
<li><a href="https://en.wikipedia.org/wiki/HTML" target="_blank">HTML [Wikipedia]</a></li>
<li><a href="https://www.w3schools.com/html/" target="_blank">W3Schools</a></li>
<li><a href="https://freecodecamp.com" target="_blank">FreeCodeCamp</a></li>
</ul>
</section>
</main>
!
