Hi, I'm Dr. B and welcome to my digital composing instructional video series.
In this tutorial, I will be talking about a unique brand of HTML tags called empty elements.
We call them empty elements because they are not used to format text and they do not require a starting and end tag to function.
Instead, we use them to add things like breaks and horizontal rules to an HTML document.
Once you have your HTML editor open and started a new HTML document, the next thing you need to do is get some content that we can mark up.
To do so, go back to the HTML tutorial home page, click on the link that says click this link to access the text used in the following tutorials, and then Scroll down to where it says empty HTML elements.
Go ahead and highlight that bit of content and copy it.
Once you've copied the content we are going to be using for this tutorial, the next thing we need to do is add that content to our new HTML document.
So, go into your HTML document, find the open and close body tag, give yourself a little room, and then paste the content you copied into that section of our document.
The next thing we're going to do is save our document. We're gonna call this one "three" and we're once again going to save it to our desktop for easy reference.
Next, we're going to go ahead and open up our Internet browser and we're going to open our file so that we can preview the changes we make as we go.
As you can see, we have a lot of content, but it has no formatting yet and we also need to add a title to our page.
So, let's go back to our HTML editor and let's start making some changes.
The first thing I want to do is we wanna get rid of "untitled document" between the open and closed title tag and replace it with "third HTML document."
We're going to make sure we save our changes and then we're going to start adding some block level elements.
So, around were it says "Empty HTML Elements" we're going to add our first level heading.
So, we're gonna surround it with an h1 tag.
Where it says "Subheading One" we're gonna add an h3.
Where it says "the following was generated using lorem ipsum" we're going to put a paragraph and at the end of that paragraph we're going to close our paragraph tag.
We're also going to add an h3 to our "Subheading Two" and we're going to add an open closed paragraph around our last paragraph.
OK, so we're gonna save our work. We're gonna head on over to our browser, we're going to refresh our page, and we're going to take a look at what we have.
As you can see, we now have some formatted text.
Now the next thing to do is we're going to add what are called break tags and then we're going to add a horizontal rule.
Break tags do exactly what their name implies. They will add a line break to our content wherever we add them to our HTML document.
The cool thing about break tags is, unlike paragraphs, they do not have pre-formatted spacing before or after them.
However, when you're building HTML documents, never build paragraphs with break tags, always use a paragraph to build a paragraph and always use a break tag whenever you need to add a line break.
To add a line break, we find the part of our content where we want to add those breaks and what we're going to do is we're going to put a break at the end of each of these sections of content so that we can see what happens.
To do so, we add our angle bracket, we type in br, we add a / and then we add our other angle bracket.
As you can see, to add a line break, we don't have to surround any text.
These are empty tags, they don't require a certain end tag, they only need to be added to the page.
So, if we save our work, go back to our browser, refresh our page, you'll see that we now have a line break here.
Let's add our other brake tags. Let's save our work and go back to our browser.
Let's refresh our page and, as you can see, I now have a series of lines that have line breaks added to them.
The next thing we want to add in this tutorial is a horizontal rule or a line that stretches from one side of the page to the other.
To do that, we're gonna go back to our HTML editor, we're going to open some space between our close paragraph and the opening h3 paragraph for subheading 2, and we're going to add a horizontal rule here.
To do that, we use our angle bracket, we type out hr, we add our / and then we add our other angle bracket.
Like the brake tag, we don't need an open and closed tag because we're not actually formatting content.
We're not surrounding content with it, we're just adding an element to our page.
So, if we save this, go back to our browser, and refresh our page you can see that we now have a horizontal rule on our page where we added it in our HTML document.
Although there are many other empty HTML elements out there available to you, these are the only two that normally come up as you're building web pages.
Others, of course, can be found in your handbook
That's it that brings us to the end of today's tutorial.
I hope you enjoyed today's tutorial and that you are enjoying building your own digital compositions.
As I always say, thank you for playing along and for trusting in the process.
Dr. B’s instructional video series is brought to you in cooperation with the Bacha Design Group.
For more information about the Bacha Design Group, or to view more tutorials, please visit us online at jeffbacha.com.