HTML Basics
When starting an HTML Document you want to start with <!DOCTYPE html> This tells the web browser what set of rules you want to use. There is a bunch of history behind this, and you can explore at places like W3C for more information.
HTML Doc Type
<!– This tells the browser which set of rules to use. We want to follow the rules HTML 5–>
<html lang=”en”> <!– Starts HTML page with attribute of the language is English –>
<head>
<meta charset=”utf-8″>
<title> Enter Title </title>
<link rel=”stylesheet” type=”text/css” href=”main.css” media=”screen”>
</head>
<body>
<!– Comments it is good to create sectionsin the document so you can apply CSS. Add comments as you go along to help style the document –>
<header><!– You can add a logo or navigation in the header area. It is a good idea to add a header group for all things in the header–>
<hgroup>
<h1>Page Header</h1>
<h2>Page Sub Header</h2>
</hgroup>
<nav> <!– This is a navigation section and will display as unordered list or bullet items –>
<ul>
<li><a href=”#”> Nav1 </a></li>
<li><a href=”#”> Nav2 </a></li>
<li><a href=”#”> Nav3 </a></li>
</ul>
</nav>
</header>
<!– End Header information –>
<section> <!– Section is where all main content will sit. Will end before footer –>
<article> <!– Is a way to add subjections to a webpage. Add tag inside section. –>
<h1>Article 1 Header</h1>
<h2>Article 1 Sub Header</h2>
<p>Article one this is some text inside the article.Donec ut ligula sem. Aenean suscipit eleifend nisi, venenatis dictum magna varius suscipit. Pellentesque quis ullamcorper quam, et bibendum lacus. Quisque sodales libero at hendrerit vulputate. Suspendisse sit amet ornare nulla. Duis molestie sem vitae lectus euismod ornare. Morbi fermentum augue sit amet pulvinar convallis.</p>
<aside>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lobortis fringilla tincidunt. Nullam eros odio, placerat nec fringilla ac, tristique vel felis. Praesent sed metus nec felis lobortis volutpat sed eu felis. Maecenas semper pharetra ipsum, et mollis nisi malesuada sagittis. Ut id tempus lectus. Vestibulum et ultricies libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer id hendrerit metus, et condimentum lacus.</aside>
</article>
<hr>
<article> <!– Is a way to add subjections to a webpage. Add tag inside section. –>
<h1>Article 2 Header</h1>
<h2>Article 2 Sub Header</h2>
<p>Article two this is some text inside the article. Donec ut ligula sem. Aenean suscipit eleifend nisi, venenatis dictum magna varius suscipit. Pellentesque quis ullamcorper quam, et bibendum lacus. Quisque sodales libero at hendrerit vulputate. Suspendisse sit amet ornare nulla. Duis molestie sem vitae lectus euismod ornare. Morbi fermentum augue sit amet pulvinar convallis.</p>
<figure> <!– A figure is used for –>
<a href=”http-message.gif”><img src=”http-message.gif” alt=”A diagram of the parts of an HTTP Message”></a>
<figcaption>Figure 1. The HTTP Request and Response messages contains important information that allows communication back and forth between the client and the server. THIS IS TEXT THAT EXPLAINS WHAT THE FIGURE IS.</figcaption>
</figure>
<h3>Article 2 subhead 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lobortis fringilla tincidunt. Nullam eros odio, placerat nec fringilla ac, tristique vel felis. Praesent sed metus nec felis lobortis volutpat sed eu felis. Maecenas semper pharetra ipsum, et mollis nisi malesuada sagittis. Ut id tempus lectus. Vestibulum et ultricies libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer id hendrerit metus, et condimentum lacus.</p>
<p>Donec ut ligula sem. Aenean suscipit eleifend nisi, venenatis dictum magna varius suscipit. Pellentesque quis ullamcorper quam, et bibendum lacus. Quisque sodales libero at hendrerit vulputate. Suspendisse sit amet ornare nulla. Duis molestie sem vitae lectus euismod ornare. Morbi fermentum augue sit amet pulvinar convallis.</p>
Here you need to know these things. <br>
<br>
<b>When styling HTML files, there are several things you can do.</b> <br>
<ol>
<li>Always check your code.</li>
<li> Name things correctly. </li>
<li>Use an editor to help you troubleshoot code.</li>
</ol>
</article>
</section>
<footer> <!– Is the bottom most part of the webpage. –>
<nav> <!– This is a navigation section and will display as unordered list or bullet items. Some times people will put navigation at the bottom, I would only recommend doing this if it fits with the over all design –>
<ul>
<li><a href=”#”> Foot1 </a></li>
<li><a href=”#”> Foot2 </a></li>
<li><a href=”#”> Foot3 </a></li>
</ul>
</nav>
</footer>
</body>
</html>