tags: `HTML`

HTML Basics

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.

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.
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
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.

Elements and Tags

Just what are these mysterious things and how do we use them?

Here is one example in this case we are coding a link
Image Not Showing Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Every element will have an opening and a closing tag - some elements are self closing like an image.

tags: HTML

HTML Basics

What is HTML?

4 Major parts to an HTML document plus 2 optional

#1 DOCTYPE

#2 - The HTML Tag

#3 - The head tag

#4 - The body tag

Optional Part of an HTML Document

Elements and Tags

Read more

August/September 2023 Web Fundamentals Main Notebook

June/July 20223 Web Fundamentals Cohort Notebook

JS Codepens

Resources and Links

tags: `HTML`