Hi I'm Dr. B and welcome to my digital composing instructional video series.
In this tutorial, I will be demonstrating how to markup headings, subheadings, and paragraphs in an HTML editor.
Once you've opened up your HTML editor and have started a new HTML document, the next step in the process is to gather some text together that we can mark up.
To do so, go back to the textbook home page and find the link that says click this link to access the text used in the following tutorials.
Click on it, find the first section of text, highlight it, a copy.
The next step in the process is to go into our HTML editor and add our content that we just copied into our HTML document.
To do so, you're gonna find the open and closed body tag.
You're gonna give yourself a little space and you're simply gonna paste the content you copied into that area you just created.
Now, at this point, you're going to want to save your file so that you can preview it in a browser and watch the changes happen as we go.
So, we're gonna call this first and I like to save the stuff I'm working on to my desktop for easy reference so that I can find it later and find it quickly.
So hit save. Then, we're going to go to our Internet browser.
We're gonna go file, we're going to open, and we're going to open the file we saved.
As you can see here, there's not much going on right now. We have content, but it's not formatted. It's simply showing as a block paragraph and we want to change that.
To start making changes to our document, then, we're going to go back to our HTML editor and the first thing we're going to do is we're going to change the title of our page.
So, we're going to go up to where we have our open and closed title tag.
We're going to replace untitled document with “this is my first HTML document.” We're going to save our file.
We're gonna go back to our Internet browser.
We're going to refresh our page and, as you can see, the content itself didn't change. But up here in the tab, the title we added to our document now displays.
So, let's start doing some markup. Let's go back to our HTML editor and we want to find the part of our content that says heading, subheadings, and paragraphs.
What we wanna do is we wanna make this a heading.
So, what we're gonna do, is we're going to put an h tag, an open and close h tag, around this section of our content.
So, to do that we're going to start with our angle bracket. We're going to add an h and then we're gonna add a number.
The numbers stand for how big the heading should be. One is the biggest and six is the smallest that you want to go.
So, we're going to put an h1 and then we're going to add our angle bracket.
We're going to go to the end of the content section that we want to mark up and we're going to make sure we add our close tag.
We're going to save this. We're going to go back to our browser.
We're going to refresh our page and we're going to see what happens.
Notice that what we wanted to turn into a heading now displays as a heading. Pretty neat, but one thing I want to show you is what happens if we forget to close our tags.
So, if I take out the close tag for our heading, save my document, and go back to my browser you'll notice that everything on the page is now formatted like a heading, which is something we don't want.
So, we always want to make sure that we close out our HTML tags.
So, I'm gonna go back to my HTML editor and then I'm gonna add my close tag back in, save my document, reload my page, and as you can see we're back to where we were.
The next thing we want to do is we want to add some paragraphs to our content.
So, what we're gonna do is we're gonna go back to our HTML editor.
We're going to find the area of our text that says “eventually this will be my first paragraph,” and the content below it, and we're gonna add an open and closed paragraph tag to this part of our content.
To do so, we start with an angle bracket, we add a p which stands for paragraph and then we put our other angle bracket in.
We go to the point in our content where we want our paragraph to stop and we add our close tag.
If we save our file, go to our Internet browser, reload our page, you can see we now have a paragraph.
So let's go back to our HTML editor.
Let's find this section of our content that says “this will eventually be my second paragraph” and let's add some more paragraph tags.
So, we start with the open paragraph. We go to the end of our content that we want to be our second paragraph and we add our close tag.
If we save this, go to our Internet browser, reload our page, you'll see we have another paragraph now.
The last bit of formatting we wanted to do is we want to go in and we want to turn “This will be a subheading” into an actual subheading.
So if we go back to our HTML editor and we find the part of our content that says “This will be a subheading” what we're gonna do is we're going to include another h tag.
We use h tags for main level headings, subheadings, so on and so forth.
This time we're gonna start with our angle bracket, we're going to put an h, and we're gonna put a 3.
In other words, we're going to turn this into a third level heading.
We're then going to close our tag at the end of our subheading. We're going to save our document, go back to our Internet browser, and we're going to reload our page.
Notice, then, we now have a subheading.
So that brings us to the end of today's tutorial. In the next tutorial, we'll start adding some inline elements and we'll start adding some additional formatting rules to our content.
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.