Week 3 Learn & Practice - HTML Page

Textbook

Chapter 4: Creating a Simple Page

Let's review this week's content by creating a simple web page.

Directory Setup

In your demos folder for this class, add a new folder plus file: week03Demo/index.html in VS Code
Create two additional folders named images and stylesheets

HTML Markup

With the index.html selected, open the Live Preview
Start typing anything in the index.html page. Notice what happens to extra spaces or line breaks.

Why did the code render in the Preview without the extra space or line breaks?

Add a  to the top of your page. Does it appear in the Live Preview?

<!--  This is a comment -->
Hello!

Learning to code is Awesome  :)

What is              happening to
   extra       spaces?

The HTML Structure

Image source: Code with Harry

The `<!DOCTYPE>`

Before can get too far, you need some sort of structure or foundation to build on. So far, the browser (Live Preview) is just regurgitating your text onto a blank canvas. You can declare this document as an HTML5 document by adding the <!DOCTYPE>. The <!DOCTYPE> needs to be the first line of your HTML page, always.

Enter the <!DOCTYPE html> as the first line of code

<!DOCTYPE html>
<!--  This is a comment -->
Hello!

Learning to code is Awesome  :)

What is              happening to
   extra       spaces?

The Root Element `<html>`

All webpages need to have a root element. The root element defines the start and end of your page.

Add the root element (the <html> start and </html> end tags) on your page after your <!DOCTYPE>.

<!DOCTYPE html>
<html>
<!--  This is a comment -->
Hello!

Learning to code is Awesome  :)

What is              happening to
   extra       spaces?
</html>

HTML Comments

A  can be placed anywhere in the document after the <!DOCTYPE> and can be one to many lines, so long as it is encapsulated inside the appropriate markers. We will add our name and date between the <!DOCTYPE> and the opening root tag.

HTML Comments always start with 

Replace “This is a comment” with your name & date. Place it between the <DOCTYPE> and <html> tag.

<!DOCTYPE html>
<!-- 
    Temple Chestnut
    01/01/2054
-->
<html>
Hello!

Learning to code is Awesome  :)

What is              happening to
   extra       spaces?
</html>

The `<head>` Element

Next, we need to declare where our metadata will be stored. We use the <head> element for this. The <head> element stores the rendered content title, CSS (internal and external), JavaScript (internal and external), and metadata.

Add the <head> section to our document.

<!DOCTYPE html>
<!-- 
    Temple Chestnut
    01/01/2054
-->
<html>
    <head>
        <meta charset="utf-8">
        <title>My First Webpage</title>
    </head>

Hello!

Learning to code is Awesome  :)

What is              happening to
   extra       spaces?
</html>

`<head>` Child Elements

There are (at least) two elements contained within the <head> element. Elements that are contained within another element are referred to as child elements.

The <meta> element: the <meta> element declares the character set used by our HTML document. Notice that this element is self-closing element.
The <title> element: the <title> of our page appears in the browser tab. It is also the text saved when the webpage is bookmarked in the browser.

Indentation

Notice how my code is indenting. Each child element is indented four spaces from its parent element. This is extremely important to making legible code. Your work will be graded on legibility, so learning the correct indentation now is crucial.

The `<body>` Element

The next tag will be the <body>tag, and all the items inside the body that we want to display on our page. The body tag is placed between the closing </head> tag and the closing </html> tag.

Add the <body> element (see below)

Indent all the text inside the <body> element. To indent multiple lines at one; select all the lines you want to indent and hit the tab key.

<!DOCTYPE html>
<!--
   Temple Chestnut
   01/01/2054
-->
<html>
   <head>
      <meta charset="utf-8">
      <title>My First Webpage</title>
   </head>

   <body>
      Hello!

      Learning to code is Awesome  :)

      What is              happening to
         extra       spaces?
   </body>
</html>

Has Anything Changed?

What are you noticing in your Live Preview pane? If you answered, “nothing is different” …. you would be correct. So far, we just built the frame! The basic building blocks of all webpages will need to contain (at least) the following lines:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Some Title</title>
    </head>
    <body>

    </body>
</html>

Semantic Markup

We built the foundation, let’s add more to the frame with elements to mark up our text. We know that everything we want to display goes into our body section, but how do we tell the browser when to use paragraphs, or what the footer is, or what is a heading versus a part of a list? We use what is called semantic markup to describe our content. Let's begin by looking at the type types of HTML elements.

Image source: Block-level, Inline, and Organizational Elements

Block-level Elements

Block level elements belong on their own row (line) on a page. Some examples of block elements:

headings <h1> - <h6>
paragraphs <p>
divs <div>

Full list of lock-level elements

Inline Elements

Inline elements are considered text level elements (phrasing elements) and do not start a new line. Spacing is added as required. Some examples of inline elements are:

emphasis <em>
italics <i>
image <img>

Full list of inline-elements

Let’s add a few elements around our content to give it some meaning, starting with a main heading.

Add an <h1> tag inside your body.

<body>
    <h1>Hello!</h1>

    Learning to code is Awesome  :)

    What is              happening to
    extra       spaces?
</body>

You should notice the difference in the Preview pane. (Finally!)

Let’s keep going with a second heading tag <h2>, just below our first one.

<body>
    <h1>Hello!</h1>

    <h2>Learning to code is Awesome  :)</h2>

    What is              happening to
    extra       spaces?
</body>

Since the browser is ignoring whitespace, remove the extra white space previously added. Add a <p> element to a sentence.

<body>
    <h1>Hello!</h1>

    <h2>Learning to code is Awesome  :)</h2>

    <p>What is happening to extra spaces?</p>
</body>

Use a <br> element to go to a new line. Insert the element anywhere within our paragraph.
```
<p>What is happening <br> to extra spaces?</p>
```
Add the inline element, <em>, to display the word “extra” in emphasis.
```
<p>What is happening <br> to <em>extra</em> spaces?</p>
```

We should see the following in our Preview or browser window.

HTML Images

Let's add the Madison College logo to our webpage.

Go to the Madison College website and right-click on the logo.
Choose Save Image As...
Save the logo into your images folder.
If you expand the images folder in VS Code, you should now see the logo.png file.

The `<img>` Element

The <img> element is used to add an image to our document. Image elements are inline elements, meaning images do not render on a new line.

After the closing </p> tag add the <img> element. The <img> is an empty or self-closing element. Unlike our <h1> or <p> elements, this element does not contain any content. Instead, it instructs the browser to find an image located on the server and insert it into the flow of the webpage.

<!DOCTYPE html>
<!-- 
    Temple Chestnut
    01/01/2054
-->
<html>
    <head>
        <meta charset="utf-8">
        <title>My First Webpage</title>
    </head>

    <body>
        <h1>Hello!</h1>

        <h2>Learning to code is Awesome  :)</h2>

        <p>What is happening <br> to <em>extra</em> spaces?</p>
        <img>
    </body>
</html>

THe `<img>` Attributes

Attributes are added to an element to provide additional information about an element. In this case, we need to provide two additional details about our image.

The source where the image is located
- src="" the path to the image is placed in the quotes
Alternative text in case the image does not load and to communicate images to the visually impaired
- alt="" the alternative text is placed in the quotes

Both these attributes are required on every <img> element.

Add the src and alt attributes to the image element. Attributes are always located within the opening tag.
```
<img src="" alt="">
```
Add the attribute values inside the quotes. Start with the path to the image in our src attribute. We are using a relative path to tell the browser to look in our images folder and grab the logo.png image. You must include the file extension; in my example, the image is a .png.
```
<img src="images/logo.png" alt="">
```
Add the alt value (alternative text). This text will display on the webpage if the image fails to load. Screen readers also use this text to read or describe the image.
```
<img src="images/logo.png" alt="Madison College Logo">
```

Validate the HTML

Perform a validation check on your markup to ensure that it abides by all the rules of whatever version of HTML you are using. Validating your document is a crucial step for every developer. You are required to do this for all projects and all assignments.

The browser will attempt to render your webpage even if it does not pass validation; it will do its best to display whatever you give it, errors and all.

Go to https://validator.w3.org/
Choose either Validate by File Upload or Validate by Direct Input
- Validate by File Upload: navigate to your index.html file and select it.
- Validate by Direct Input: copying and pasting HTML code index.html
Click Check
- You should see 1 Warning appear in the validation results:
- This error is indicating that we should include a language attribute in the <html> opening tag.
In the index.html file, add the lang attribute and en value to the <html> opening tag. This tells our browser that we are using English.
```
<html lang="en">
```
Re-validate the index.html by uploading the file again or copying and pasting the new code. You should now see the below message.
Make sure all errors and warnings are corrected before submitting any projects or coding exercises. If you are ever unsure of what an error/warning means, please ask!

Tips for Using the HTML Validator

You are required to validate all your HTML code through the validator this semester. It takes practice to understand all the error and warning messages, but here are some starting tips:

The Validator gives you a line and column number to help you locate your error. However, be cautious, this is not always 100% accurate. Often, the error is on the line above.
Fix one error or warning at a time.
Each time you fix an error in your source code, re-validate. Often you will see multiple errors or warnings go away.

Other Common Mistakes

Forgetting to save your document. Saving seems obvious, but if you do not see your change appear on the website, you may have forgotten to save your document.
Missing a closing tag. You may find that 1/2 your page disappears, or the layout looks completely wrong! This can happen if a closing tag is incorrect or missing from the document.
Wrong image file extension. If you enter in an image as a .png when the image is a .jpg file.