4. What is it then?
Unlike with a programming language, all you can do with
HTML is format information. In this sense, you use HTML for
layout tasks. To cover this weakness, HTML coders use other
languages, like Javascript, to do complex tasks that require
programming.
So do you program in HTML?
HTML is a formatting language.
No.
You write HTML code. (I.E. you code HTML)
5. How does HTML work?
• Since all HTML can do is manage the
layout of information, it’s not that hard to
use.
• An HTML document has two kinds of
information in it
• Information (Text, etc.)
• HTML code to format that information
6. So what is HTML code like?
HTML is a tag-based language.
That means that HTML code is made out of little pieces, called
tags, with a particular structure. They surround information that
they manipulate.
Generally, if you have an HTML tag called TAGX, it consists of
two parts:
• An opening tag, <TAGX>
• A closing tag, </TAGX>
7. How do these tags work?
The tags surround a piece of information that they are
designed to have a formatting effect on. For example, if we
have a piece of text,
“I like to paint xylophones while flying a hang glider.”
and we want to make it bold, we can use an HTML tag, <b> to
do this.
<b> I like to paint xylophones while flying a hang glider.</b>
shows up like this in a browser:
I like to paint xylophones while flying a hang glider.
8. Notice that in our previous example, all of the text was inside
of the bold tags,
<b> I like to paint xylophones while flying a hang glider.</b>
meaning that all of it was put into bold. If I only wanted to
bold part of it, however, I could put only part of it inside the
tags, like this.
I like to paint <b>xylophones </b> while flying a hang glider.
This would produce:
I like to paint xylophones while flying a hang glider.
9. Basic Tags
The most basic tag is the <html> tag.
This tag appears at the beginning of every HTML document
(.html or .htm) and the corresponding closing tag,
</html>, appears at the end of every HTML document.
So so far we have:
<html>
***some HTML code and information***
</html>
10. Basic Tags pt 2
Every HTML document is divided into 2 parts: a head and a
body. The head contains information about the document, like
the title, and the body contains most of the actual code and
information. The tags are: <head> and <body>.
So so far we have:
<html>
<head>***HTML code and information***</head>
<body>
***HTML code and information***
</body>
</html>
11. <head>
Inside the <head> tags you can put a lot of different tags and
information, but for now we’ll only worry about one thing: the
<title> tag.
This tag allows you to specify the text that appears at the top
of the browser window.
<html>
<head>
<title> My Happy Page </title>
***more HTML code and information***
</head>
…etc
12. <body>
Things that go inside of the body tags include:
•Text
•Images
•Links
•Multimedia
and such.
Let’s focus on text for now.
13. Text-related Tags
The first text-related tag we’ll look at is a header tag.
Header tags are used to mark text that heads a section, usually
by making it larger.
We’ll start with the largest one, <h1>.
Try adding <h1> Some Text </h1> into the body of your
document, like this:
….
<body>
<h1> Some Text </h1>
</body>
</html>
14. Text-related Tags pt 2
Header tags come in several sizes, from <h1> down to <h6>.
Try changing the tag to <h3> and comparing the size.
<html>
<head>
<title> … </title>
</head>
<body>
<h3> Some Text </h3>
</body>
</html>
An additional benefit of header tags is that they add a line break.
15. Text-related Tags pt 3
We’d like to add several lines of text. To do this we just type
the text, like this:
<html>
<head>
<title> … </title>
</head>
<body>
<h1> Some Text </h1>
This is line 1 of the text.
This is line 2 of the text.
</body>
</html>
What’s the problem with this?
16. Text-related Tags pt 4
The two lines of text are run together. We’d like to put text on
a new line. The solution? The <br> tag. <br> stands for break,
as in line break. <br> is also an exception in that it doesn’t
have a closing tag.
<html>
<head>
<title> … </title>
</head>
<body>
<h1> Some Text </h1>
This is line 1 of the text.
<br>This is line 2 of the text.
</body>
</html>
17. Text-related Tags pt 5
What if we have a lot of text in separate paragraphs? Should
we just use a lot of <br> s?
Well, we could….
But what we should really use is the paragraph tag, <p>.
The paragraph tag is roughly equivalent to 2 <br> s, and it has
a closing tag, </p>
<p>
Paragraph 1
</p>
<p>
Paragraph 2
</p>
18. Text-related Tags pt 6
So now we have text nicely formatted into paragraphs. What if
we want to emphasize some of it by underlining, italicizing, or
bolding it?
Well, we’ve already seen the bold tag, <b>.
Similarly, <i> is the tag for italics and <u> is the tag for
underlining. All three of these can be used at once if you want,
or just by themselves.
This <u>sentence is <i>way <b>confusing</b></i>. </u>
shows up as:
This sentence is way confusing.