HTML stands for Hypertext Markup Language. HTML is based on the
Standard Generalized Markup Language (SGML), a much larger document-processing system used by News Papers
and Magazines. Quite simply, HTML is the language used to create Web Pages. HTML is pure text, it therefore can
be written using Microsoft's Notepad (which we will do in here). In order for your HTML document opens in the
Browser you will need to add the four letter extension .HTML to the end of your file name.
HTML Syntax
All HTML commands are places inside of "angle" brackets (< (less than) and > (greater than) signs).
For example, the HTML command for Bold is b, so the
command to "make things bold" would look like this: <b> The command along with its angle brackets
is called a "tag."
Not all, but most HTML commands have an opening and closing tag.
e.g. <b>Hello World</b>
HTML tags of this type are called "containers". Note that the closing tag is the same as the
opening tag except that the closing tag has a slash "/" in front of the command, indicating the command is over or closed.
e.g. </b>
HTML tags can have attributes. Attributes are variables, set by the developer, that effect the way the command works.
Attributes are placed inside the HTML tag and separated from the command (and each other) with a
blank spaces. Almost all attributes have values that are placed behind the attribute and separated from the attribute
with an equal sign "=".
Values are placed inside of quotation marks. e.g. <body text="black">
Note how the attribute is separated for the
command by a blank space. If additional attributes are added to the tag, blank spaces are use to separate the
attributes from each other.
e.g. <body text="black" link="blue">
Also note that there are no blank spaces between the attribute, the equal sign, and the value.
(See Web-save Colors) (See also More Colors)
HTML is not case sensitive; it may be entered in upper case or lower case letters and quotation marks can be double
or single quotes. XHTML, in contrast, requires all
HTML to be entered in lower case. (We'll talk about XHTML later.)
Structure of HTML
An HTML document is a container, the entire document is held with in the <html> and </html> tags.
HTML documents are divided into two segments: The head and the body. e.g. <head> </head>
and <body> </body>
The content of the head segment is not displayed in the browser except for the title container. The head
segment is where you would place JavaScript, style sheets, meta commands, etc. We'll cover these topics
later as well.
The title, for now anyway, is the most important part of the head. The content of the title container will
be displayed in the "title bar" of the browser. The title of this page is: Web Page Design: Lesson 1
HTML Document Syntax. Take a look at the title bar of your browser right now, notice the title is there
(- followed by the name of your browser). The title also is used in
web search engines to find web pages that match search strings. And lastly, the title container is the location
used by your browser to describe a web page saved in your favourites folder. Try saving this web page to your favourites and
notice the name.
e.g. <title>Web Page Design: Lesson 1 HTML Document Syntax</title>
We will return to the head segment of the HTML document again as we learn more advanced aspects of HTML.
The body segment of the HTML document is the web page. Everything that you place on your web page,
all pictures, documents, tables, etc. will be inside the body container. A simple but complete HTML document
would look like this:
<html>
<head>
<title>My First Web Page</title>
</head>
<body text='blue' bgcolor='white'>
<h1>My First Web Page</h1>
</body>
</html>
Notice all the syntax we talked about is included in this example. the HTML tags are the first and last
lines of the code. The first segment is the head and the second is the body. The head has the title container
in it with the title of the web page My First Web Page inside the container. The body tag has two attributes
text and bgcolor (background color). Notice the equal signs have no spaces around then and the data White
and blue are enclosed in quotation marks. This code will create a web page that will look like this:
Web Page Design: Exercise 1
Open notepad and enter the following HTML code:
<html>
<head>
<title>My First Web Page</title>
</head>
<body text='blue' bgcolor='white'>
<h1>My First Web Page</h1>
</body>
</html>
Save it in the wwwroot folder on your computer as index.html.
Note: index.html is a special name, it is the Home Page name for any web sites.
Do not close notepad, just reduce it in case you have to go back to it to make edits.
Open the wwwroot folder and double click index.html
(It should look like the page displayed above.)
