HTML stands for Hypertext Markup Language. Tim Berners-Lee based HTML on the
Standard Generalized Markup Language (SGML), 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 this class). In order for your HTML documents to open in a
Browser you will need to add the four letter extension .HTML to the end of your document's file name.
HTML Syntax
All HTML tags are placed inside "angle brackets" (< (less than) and > (greater than) signs).
For example, the HTML tag for Big Text is H1, so the
tag to make text big would look like this: <h1> The tag along with its angle brackets
is called a tag."
Not all, but most HTML tags have an opening and closing tag.
e.g. <h1>Hello World</h1>
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 content, indicating the tag is over or closed.
e.g. </h1>
HTML tags can have attributes. Attributes are variables, set by the developer, that effect the way the tag works.
Attributes are placed inside the HTML tag and separated from the tag and each other with a
blank space. 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'>
If additional attributes are added to the tag, blank spaces are use to separate the
attributes from each other. e.g. <body text='black' bgcolor='white'>
Also, note that there are no blank spaces between the attribute, the equal sign, and the value.
In this example we are setting the text color (color of the text on the page) to black and the bgcolor (background
color of the web page) to white.
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.
Web Safe Colors:
Web safe colors are a set of colors that are predefined by name. For example, you may set the text color to red in the body tag.
e.g. <body text='red'> This is possible because red is translated into the hexadecimal value #FF0000 by your browser.
A simple but complete HTML document
would look like this:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>My First Web Page</title>
</head>
<body bgcolor='blue' text='white'>
<h1>My First Web Page</h1>
Welcome to my Web page...
</body>
</html>
Document Type declaration <!DOCTYPE html> lets your browser know that this is an HTML5 Web page.
An HTML document is a container. The entire document is held within the <html> and </html> tags.
lang='en' lets the browser know this page is displayed in English.
HTML documents are divided into two major 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 tags, 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: RaysWebClass.Com: Lesson 1
HTML Document Syntax. Take a look at the title bar of your browser right now, notice the title is there
(- followed by this page's URL). The title also 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.
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 them and the data. White
and blue are enclosed in quotation marks. The <h1> tag is a header tag. There are 6 header tags (<h1>
through <h6>). The higher the number the smaller the font size.
Web Page Design: Exercise 2
Download your HTMLClass Folder:
Click Here to download your HTMLClass Folder
When the dialog box pops up click Save as
Click on Desktop (left column)
And click the Save button
(A copy of the HTMLClass.zip file will appear on your desktop)
Right Click the zip file and choose Extract All...
Remove ~HTMLClass from the end of the location
Remove the check mark in front of Show extracted files when complete
And click Extract (lower right)
(You will now have the HTMLClass folder on your desktop)
(You may delete the ~HTMLClass.zip file from your desktop)
Create your Home Page:
Double Click the HTMLClass folder to open it
Right Click anywhere inside the HTMLClass folder and choose New
And Text Document from the second dialog box
Rename the Text Document test.html.
Make sure you get rid of the .txt on the end.
(It will ask if you're sure you want to do this, choose Yes)
Double Click the test.html file. Your browser should open a new tab. IF THE BROWSER DID NOT OPEN, make sure you can see hidden files
and file extensions,
Follow these instructions
Right Click anywhere on the new blank page in your browser
and choose View source Notepad should open. IF NOTEPAD DID NOT OPEN (or some other program did)
follow these instructions.
Triple Click the code below and paste it into the test.html file:
<!DOCTYPE html>
<html lang='en'>
<head>
<title>My First Web Page</title>
</head>
<body bgcolor='white' text='blue'>
<h1>My First Web Page</h1>
</body>
</html>
From the Notepad Menu choose File then Save
Click on your browse icon (at the bottom of your monitor).
Then click the refresh button (top of your browser)
The above code will create a web page that looks like this:
Congratulations! You have just created your first Web Page!
(top of your browser)
