So after lesson 2 you might be thinking “That was too easy. Seriously, TEACH me something!” Be
patient. I think this lesson will give you your fill.
HTML is a language that is coded with tags. They are called tags because they tag parts of a webpage
for formatting in a browser. HTML tags are very easy to spot in web page source. They are the things
shown that start with a < and end with a >. Most HTML tags have an opening tag (<tag>) to start
formatting text and a closing tag (</tag>) to end the formatting.
There are some HTML tags that are absolutely necessary in an HTML page. Those tags are the
‘<HTML>’ and ‘</HTML>’ tags. These are usually put at the top (<HTML>) and bottom (</HTML>) of an HTML
page. This tag tells the browser that this page is an HTML page.
Other tags:
- <HEAD> and </HEAD>: This is where information about the entire page is placed.
- <TITLE> and </TITLE>: This tag needs to be put between the <HEAD> and </HEAD>. This tag
gives a name to your page. The name won’t be shown in the the text of the page, but rather in the top
of the browser window. - <BODY> and </BODY>: This tag defines the body portion of the page. Later we will learn how to
use the <BODY> tag to add background colors, text colors, and margins.
Now that we know the required tags, I’m going to put my text that I came up with in the last lesson in the
proper html format.
<HTML>
<HEAD>
<TITLE>
Justin’s Webpage
</TITLE>
</HEAD>
<BODY> Welcome to Justin’s Web Page!
Hi, my name is Justin. I built this web page because I love coding in HTML! I could do it all day
long!
I am a lover of programming languages, and love to design and produce web content.
Thanks for visiting my page!
Yours Truly,
-Justin
</BODY>
</HTML>
“But wait 1 second!”, you might be thinking. “I typed that, and opened it with my browser, and it doesn’t
look like that!” What? Does it look like this:
Welcome to Justin’s Web Page! Hi, My name is Justin. I built this web page because I love coding in
HTML! I could do it all day long! I am a lover of programming languages, and love to design and
produce web content. Thanks for visiting my page! Yours Truly, -Justin
Hmm… What’s wrong here? Ohmygod! We forgot the text formatting tags!
The <p> tag can add paragraph spacing to your page. The <BR> tag adds a single line break to your
page.
These tags do not need a <p> and </p>, or <BR> and </BR>, unlike the other tags.
So now our page is coded like this:
<HTML>
<HEAD>
<TITLE>
Justin’s Webpage
</TITLE>
</HEAD>
<BODY>
Welcome to Justin’s Web Page!
<p>
Hi, my name is Justin. I built this web page because I love coding in HTML! I could do it all day
long!
<p>
I am a lover of programming languages, and love to design and produce web content.
<p>
Thanks for visiting my page!
<p>
Yours Truly,<BR>
-Justin
</BODY>
</HTML>
Great! We have format! Now i’ll bet you want that first line to be large, right? This can be
accomplished by marking some text as a “header”. The header is made as shown below:
<H2> "header text goes here" </H2>
<H2>Welcome to Justin's Web Page!</H2>
Note that the html tags are <H2> and </H2>. Headers can be of size 1-6, with 1 being the largest and 6 the smallest.
I chose to use header size 2 (the second largest), which is the size i usually prefer to use for a header at the top of a page.
You chould instead use <H1></H1> all the way down to <H6></H6> if you like.
My final page code looks like this:
<HTML>
<HEAD>
<TITLE>
Justin’s Webpage
</TITLE>
</HEAD>
<BODY>
<H2>Welcome to Justin’s Web Page!</H2>
Hi, my name is Justin. I built this web page because I love coding in HTML! I could do it all day
long!
<p>
I am a lover of programming languages, and love to design and produce web content.
<p>
Thanks for visiting my page!
<p>
Yours Truly,<BR>
-Justin
</BODY>
</HTML>
Also note that i removed the <p> tag after the header, since headers are automatically on their own line.
Go ahead and save your page as “myfirstpage.html” (note the ‘.html’ extension at the end HTML pages all need
either .htm or .html extensions), then meet me at the next lesson!
Tags: free education, free tech tips, html tutorial, lesson, little_v
