HTML

What exactly is a web page?

A web page is very much like a MS Word file—a document that can contain images, tables, formatted text (bold, underline, italics, etc.), and links to other documents.

When you use an app like MS Word, there is code embedded in the document that you cannot immediately see. This code determines how text should be formatted and where images should be placed. Similarly, when you open a web page, there is code embedded in the document you cannot immediately see.

Afterall, when you tell MS Word to make your text bold or underlined or whatever…it’s not magic, all of this formatting information needs to be stored somewhere, somehow. Similarly, web pages contain formatting instructions (HTML) that indicates how text and multimedia should be displayed in a web browser.

Note: Using a web browser, you can view the source code of a web page. Usually, there’s an option called “View Source” under the view menu of your web browser.

Example #1

Here is an example of HTML.

<html>

<head>

<title></title>

</head>

<body>

<h1>This is a heading</h1>
<h2>This is a sub-heading</h2>

<p>You can do all kinds of things with HTML.</p>
<p>For example, you can make a paragraph like this.</p>

<p>Followed by another paragraph...
<br /> with a line break.</p>

<p>However that line break 
must be indicated with an HTML tag 
or else it wont show up in a web browser.</p>

<p>You can also make text <strong>bold</strong> 
and <em>italicized</em>.</p>

<hr>

<p>This is a <a href="http://learnhtmlcode.com">link</a>.</p>

</body>

</html>

Breakdown

The line below is called an HTML element.

<h1>This is a heading</h1>

An HTML element generally consists of HTML tags (“<h1>” and “</h1>”) that surround content (“This is a heading”).

An HTML tag is a word or character enclosed within the greater than and lesser than signs.

< >

HTML tags usually come in pairs; an opening tag…

<h1>

…and a closing tag

</h1>

However, there are so-called singleton tags that standalone, like the tag for a horizontal rule

<hr />

Singleton tags should have a closing slash (for esoteric reasons, even though they generally work just fine without them).

HTML elements only require an opening and closing tag when there is something in between them.

Web browsers do not display HTML tags, instead they use HTML tags to determine what objects to display (text, images, tables, etc.) and how they should be formatted.

Example #2

In order to better explain how HTML works, I want to show you how to create a a really basic web page step-by-step. (Again, we’ll go over all of this again, later, in detail.) First, I’ll open my text editor.

text-editor

Then I’ll paste some text into the window. (As you can see, the text is nicely indented and relatively readable.)

text

Now I’ll save the file. (Any file that ends in .htm or .html will be treated as a web page by a web browser. I can view web pages stored on my computer, but they are not viewable on the Internet.)

dialogue-window

I have not create a proper web page since it does not contain HTML coding. But let’s take a look at it anyway, just to see what happens.

browser-text

All of the words are there, but they’re all lumped together in one big unreadable block of text. That’s because the web browser doesn’t know what to do with the text. Even though it may appear obvious to us, we need to tell the web browser where paragraphs begin and end. And we can do this quite simply by using the paragraph tag: <p> </p>

Example

We can arbitrarily define paragraphs as we see fit.

<p>It is a melancholy object to those who walk through this great town or travel in the country, when they see the streets, the roads, and cabin doors, crowded with beggars of the female sex, followed by three, four, or six children, all in rags and importuning every passenger for an alms.</p>

Applying the paragraph tag can turn our previous messy blob of text into something that looks like this…

paragraphs

Now that’s much better! It still doesn’t look like a proper web page, but hopefully you’re getting a sense of how HTML works. It’s not magic, we simply need to give the web browsers instructions for how to render our web page. Even though our web page is rendering as we intended, it’s missing basic HTML tags that are required for all web pages.

(Some web browsers are more forgiving than others when it comes to improper code. Don’t convince yourself that you can get away with sloppy code, it may end up creating problems for you later.)

Post a comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Close Window