So, from part 2, you should have an understanding of the basic lingo I’m going to use from here on out. You should know what nesting is and the basic high-level structure of an HTML document. You should also have your text editor and browser ready to go! You’ll need those beginning this part. If any of these sound unfamiliar, please revisit part 1 and part 2 before proceeding.
Objectives
After reading this post, you will be able to:
- Apply a page title to your HTML document.
- Structure the basic elements of your HTML document.
- Recall the correct method to save your document.
- View your saved document within your selected browser.
Let’s pick up where we left off. This time, you’ll be introduced to a few more tags, so feel free to use the Mozilla or W3C tag references provided in part 2.
Where We Left Off
In the previous part, we’d begun building the HTML structure with the HEAD and BODY elements nested within the HTML element.
<html>
<head>
</head>
<body>
</body>
</html>Basic Page Elements
One of the first items (or last, it depends) page builders focus on is the page title. This is not visible within the page, but is usually visible within the title bar in your browser. This is easily inserted using the TITLE element. The title element is nested within the HEAD element on the page.
<html>
<head>
<title>My Page Title</title>
</head>
<body>
</body>
</html>Let’s also add some simple text within the BODY element. You can add whatever text you like within the BODY element. Remember, things added within the BODY element do show on the page.
<html>
<head>
<title>My Page Title</title>
</head>
<body>
This is my page!
</body>
</html>Notice how the text is contained within the BODY element (and it isn’t “Hello World”)? This is because it is meant to display within the browser window. Now we’re ready to view our work. Are you ready? I don’t know about you, but I’m so excited!
Saving Your Page For the First Time
Are you ready to see the magic? If so, let’s get to saving…
Since you’re working in a text editor, you can either use the save shortcut, or usually the Save option can be found under the File Menu.
Check out the video and steps below to walk you through the saving process.
Watch the Video
Click the maximize arrow () in the upper right corner of the video to make the video full screen.
Saving each subsequent time just requires clicking the “Save” button (or keyboard shortcut).
Viewing Your Page For the First Time
Follow the steps below to view your creation!
Watch the Video
Click the maximize arrow () in the upper right corner of the video to make the video full screen.
Your page should look similar to this (minus the annotations)…
As long as the HTML file is open in the browser, you can just refresh the browser window/tab to view updates.
Making Updates to the File
Let’s play with some more HTML tags! From here on out, I’ll be showing only the updated HTML and a screenshot of how it is rendered in the browser.
The expectation from here on is that you will save each subsequent update using the “Save” menu item, and then you will view that update in your browser by refreshing your page’s tab.
Adding Line Breaks Between Text
The BR element separates two elements on the page with a single line break. The BR element is the first one we’ll be introduced to that does not have (nor need) an explicit end tag. These elements can be indicated in one of two methods:
- Just a start tag:
<br> - A self-closing tag
<br />, where the slash comes at the end of the instruction part of the tag. These are not required for HTML5.
Let’s add another line of text to our HTML document.
<html>
<head>
<title>My Page Title</title>
</head>
<body>
This is my page!<br>
This is a second line of text.
</body>
</html>
Adding Paragraphs
Now, let’s add a paragraph. Paragraphs are noted with the P element. The P element applies what’s called block-level formatting. This means items (and elements) nested within this element are visually separate from other elements on the page, usually by margins (not line breaks) above and beneath. Block formatting elements also take up the entire available width of its container (the element it is inside of). We’ll add our paragraph immediately after the second line of text.
<html>
<head>
<title>My Page Title</title>
</head>
<body>
This is my page!<br>
This is a second line of text.
<p>On this great day, I ask of you. How much wood could a woodchuck chuck if a woodchuck could chuck wood? Also, if a woodchuck could chuck wood, what kind of wood would it chuck? Would it chuck oak? Would it chuck pine? Would it chuck maple? Inquiring minds want to know!</p>
</body>
</html>
And yes, you can nest line breaks within the P element!
<html>
<head>
<title>My Page Title</title>
</head>
<body>
This is my page!<br>
This is a second line of text.
<p>On this great day, I ask of you. How much wood could a woodchuck chuck if a woodchuck could chuck wood? Also, if a woodchuck could chuck wood, what kind of wood would it chuck? Would it chuck oak? Would it chuck pine? Would it chuck maple? Inquiring minds want to know!<br>Is anyone listening to me?</p>
</body>
</html>Purposely, I did not separate the latest line within the HTML (by pressing the ENTER key) to show that you don’t have to within the HTML syntax. It still renders as expected.
Well, that’s all for now! In the next lesson, we’ll begin to explore some attributes and some very basic inline Cascading Style Sheets (CSS) to incorporate some styling! Stay tuned!
Check Your Understanding (2 Activities)
Relevant Vocabulary
| Term | Definition |
|---|---|
| Block formatting element | An element that appears visually separate from other elements on the page, usually by margins (not line breaks) above and beneath, and by default takes up the entire width of its container. |
| Container | The element another element is immediately nested within. This can be the body, or any block-formatting element. |
| Self-closing element | An element that does not have an explicit end tag. In this case, it is ok to only add the start tag. |