Introduction to HTML

HTML stands for Hyper Text Markup Language.

Any .txt application, like Notepad, can be used to make web pages.

All html pages begin with and end with . This is the very first and the very last thing you should have when you make a web page.

All web pages are divided into two sections: a head and a body section. The information in the heading is generally used for “behind-the-scenes” stuff while the body is what you see when you visit a web page.

A header can include things like keywords (things search engines use to find your page), the title of your page, the scripting language used in your page, style sheet information and so forth. The beginning of the header is and ends with .

Inside a header:

Title- the title of your page. This is the thing seen at the top of your browser. Begins with and ends with . Title

Keywords- In order to allow your website to be found by search engines, you may wish to include keywords. The command for keywords is:

This entry would allow search engines to return your web page when the words “Vance” or “Lynch” are searched. You can have as many words as you like. For now, this is all we will include in the head section. So a typical notepad entry might look like:

My home page

Notice there is no closing tag for the command because we haven’t begun the body yet.

Inside the body:

To begin the body section, use and to end it, use .

Each new paragraph begins with a

and ends with a

.

To make a hyperlink, you always include the whole URL. The format for a hyperlink is:

Google!

Beginning URL Text to display End of tag

If you have a picture, the code to display a picture is:

You must include quotation marks and there can’t be a space before or after the = sign. There is no closing tag for a picture or image.

A typical body:

Hello, my name is Mr. Lynch

It is nice to meet you!

Check out my link to Google

Google!

Check out my picture!

Put it all together:

My Home Page

Hello, my name is Mr. Lynch

It is nice to meet you!

Check out my link to Google

Google!

Check out my picture!

Do a “save as.” Switch the format from .txt to “all formats.” Type in a name for the file and add “.html” to the end of it.

Your assignment:

FIRST: Create a new folder on the desktop. Name it. All future work, this and all future assignments, will be saved in here. This keeps all of your work in one place.

SECOND: Create a working web page that has 2 functional links and one image. Swipe an image off the Internet (or use one of your pictures from the photoshop project), save it in your new folder, and link to it in your html practice page.

Coming up soon: Color and tables.