Hi, I’m Dr. B and welcome to my Digital Composing Instructional video series.
In this tutorial, I provide an introduction to HTML.
Specifically, I'll be talking about what HTML is, what it's used for, and why it is important.
HTML stands for Hypertext Markup Language. We use HTML to prepare content for the Internet.
A markup language is a set of markup tags that we can use to describe the contents of an HTML document.
Simply put on its own a web browser doesn't understand how to display content.
We use HTML then to tell an Internet browser how to display the content included in a web page.
HTML is also used to semantically identify parts of a web page to make them easier to find.
HTML can also be used to help build a layout for our web pages.
By itself HTML really doesn't do much.
As we can see in this example, if we have some HTML code as shown in the red box, without content the Internet browser will display a blank page as shown in the blue box.
Instead, HTML requires content in order to fulfill its true purpose.
One important thing to point out is that an HTML editor is not a word processor.
We use an HTML editor to mark up content we already have as a way to tell an Internet browser how to display it and format it the way we want it to look.
In other words, whenever you're preparing content for the Internet, or content that you want to include in a website, make sure to build that content in a different application before adding it to an HTML editor.
Once you have content to share, the next thing we need to do is we need to use HTML tags to mark it up and prepare it for the Internet.
HTML tags are keywords that we use to describe the content we want to post on a web page.
In their simplest form, they're pretty much like hitting the bold button in Word.
In other words, HTML tags work very much like translators helping an Internet browser understand what to do with the content once it's posted to the web.
As you can see in this example, without HTML tags an Internet browser has no idea what to do with the content.
The Internet browser doesn't understand that we want part of our text, as illustrated in the red box, to look like a heading and the other part to look like a paragraph.
As you can see in the blue box, an Internet browser also doesn't understand line breaks.
We actually have to go in and tell the Internet browser when a paragraph starts and when a paragraph stops.
So, to help an Internet browser understand how to do its job, we need to add HTML tags to our content, which are keywords surrounded by angle brackets.
HTML tags normally come in pairs.
They have what is known as a start tag and they have what is known as an end tag.
Notice that the keywords we add to our start and end tag pair are always the same.
In other words, we need to tell an Internet browser when to start formatting content in a particular way and when to stop formatting content that way.
Notice that the end tag always has a / before the keyword.
Basically, what that tells the Internet browser is that we're done with this particular type of formatting. Please stop formatting my text that particular way.
To start marking up content, then, we simply surround what we want to be formatted with a start and end HTML tag.
So, in this example, if I want this piece of content to be formatted like a paragraph, I would basically put a paragraph tag at the beginning and paragraph tag at the end making sure to add a / where I want the formatting to stop.
Notice here, as I explained earlier, that when the Internet browser renders the text it will not display the HTML tags that we added. Instead, it simply displays the content.
It's also important to note that HTML comes with a bunch of preloaded tags.
Each of these tags has their own formatting rules as shown in the example here.
In later tutorials I will be discussing these tags and the predefined formatting rules attached to them in more detail.
For now, however, the important thing to remember is that we use HTML to tell an Internet browser how to display 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.