featured computer 850

HTML Notes #1 – Intro and First Page

 Summary

The intended audience to this series of notes is someone who is computer literate and knows how to use a web browser and text editor. No prior knowledge of HTML is assumed. One goal is to demonstrate that you do not need a special program to create a website consisting of a few pages.

Background

HTML stands for HyperText Markup Language. It is the mark-up “code” that is read by web browswers like Intenet Explorer, Firefox, Safari, etc., either as straight HTML or a newer, XML version of HTML called XHTML. The differences between these versions is beyond the scope of these notes. All the “experts” can’t even seem to agree when you can or should use XHTML. Just know that if you use either, any web browser will be able to display your pages for some time to come. I will use both, but try to emphasize XHTML, becuase it makes your pages ready for stuff we haven’t thought up yet.

HTML mark-up is made by placing content, or what you want people to see, inside HTML tags (or elements) which are how your browser knows how to display the content.

Tags versus elements

Officially, an HTML element is made up of a start tag and an end tag. I have heard too much usage of the word “HTML tag” to mean the whole element (start and end tag), though, so these terms will be used interchangeably, because the purpose here is to communicate with language you will hear others use, not to be technically correct.

There are a few HTML tags that are required for every HTML page, so you need to learn these first. They are listed below, in the order required, to make up just about the most basic HTML page possible:

<html>

<head>
<title>The most basic HTML page</title>
</head>

<body>

The content people see goes here.
</body>


</html>

Remarks

The start and end tags appear between the “less than” and “greater than” symbols. The end tags look like the start tags, except they have a slash “/” after the beginning “less than” sign. One thing you can see right away is that HTML elements/tags can contain other HTML tags within themselves. This is called “nesting” and is true for some, but not all tags.

html – Your html page starts with an “html start tag” and ends with an “html end tag”. Makes sense so far, right?

head – You should always include a title within the head element. It is also the place for “meta data” and “include” files, but you don’t need to understand what those are to get started.

title – A brief description of your page. Most browsers store the title if people bookmark your page, so “welcome” is really not a good way to start your title.

body – Your content. Everything that is displayed in the main web browser window is contained within the “body” element, i.e., in between the body “start” tag and the body “end” tag.

Viewing the Page

You can test out a basic HTML page by copying and pasting the text from the starting HTML tag to the ending HTML tag (including both) into a text editor, such as Notepad or gedit. Save the file as “first-page.html”, or anything that ends in “.html”. Open your web browser and use the File…Open commands to browse to the file and open it. You should see the title in the title bar and the content within the “body” tags in the main window. If not, make sure the text editor hasn’t out-smarted you by putting a “.txt” extension at the end of your file name. When saving the file, make sure that if there is a drop-down arrow for “file type” that it says something like “all types” and not “text file”.

Windows file extensions

I can never figure out why the default in MS Windows is to hide the file extensions when you look at the name of the files. To change this behavior, so that you always see the complete name of the file, open up your home folder (it is the Windows Eplorer program). I think it has been in Tools…Folder_Options for quite a while now. Scroll down until you see “Hide extentions of known file types”, or similar language, and uncheck the box.

Similar Posts