---
# System prepended metadata

title: HTML Basics
tags: [ACC, HTML, Tutorials, Lesson Notes]

---

###### tags: `Lesson Notes` `HTML` `Tutorials` `ACC`
# HTML Basics

## Links
- [Repository](https://github.com/Coding-Dojo-ACC/week3-html-css) - Starter
- [Repository](https://github.com/Coding-Dojo-ACC/week3-html-css/tree/houston) - End of Class Solution

## What is HTML?
Hyper-Text Markup Language is what it stands for, but what is it really?

Well it is the bones of any website.  You can write JavaScript, and CSS till the cows come home but if you don't have a way to display their effects they are meaningless.  HTML isn't just what you see on the page either.

### 4 Major parts to an HTML document plus 2 optional

#### #1 DOCTYPE
```
<!DOCTYPE html>
```
This tag needs to be at the top of every .html document.  It sets the language type of html for the document.  This has no closing tag like most of the other tags.

#### #2 - The HTML Tag
```
<!DOCTYPE html>
<html lang="en">

</html>
```
Here we are essentially stating that inside these html tags we will be using the english language and it will contain all of our html elements

#### #3 - The head tag
```
<!DOCTYPE html>
<html lang="en">
    <head>
    
    </head>
</html>
```
This tag or secton of code that is contained with in it isn't shown on the web page but is quite important.  That tab in your browswer rightnow that shows the title of this note is set inside this tag,  Google uses this tag to better provide you with search results.  When developers use a meta tag in side it they can set search terms which is what Google uses. A lot can go in here.

#### #4 - The body tag
```
<!DOCTYPE html>
<html lang="en">
    <head>
    
    </head>
    <body>
    
    </body>
</html>
```
This section is where you will be working most of the time.  The content here is what shows up on your webpage.  It will contain various other tags to format how you want to display your content.

#### Optional Part of an HTML Document
```
<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel='stylesheet' href='styles.css'
        <style>
            a {
                text-decoration: none;
                color: white;
            }
        </style>
        <script>
        
        </script>
    </head>
    <body>
        <nav style='background-color: blue;'>
            <a href='index.html'>Home Page</a>
        </nav>
    </body>
</html>
```
The first thing to notice that changed is we are using 3 different ways to add styling to our document.  

1. The link tag in the head section is where we would link an external CSS document to this document and have our styles over there.  
2. The style tag also located in the head section is internal CSS in this case we are setting the font color for all links to white and saying we don't want any text decoration like underlining
3. Inside the opening nav tag within the body we are using inline styling and in this case we are setting the background color for the navigation section to blue.

Next you see a script tag inside the head section.  This is where you can add JavaScript funcitons that might be used in this document.  However you can also link a script.js file here as well. 