Introduction to HTML
HTML stands for Hypertext
Markup Language and is the authoring language used
to create documents on the World Wide Web. HTML defines the structure
and layout of a Web document. It is quite a simple language and
closely resembles English.
To create a basic HTML document,
you can use a text editor such as Notepad on a PC or SimpleText
on the Mac.
To begin creating an HTML document
on a PC, first open Notepad.
To do so:
-
Click on Start.
-
Go to All Programs.
-
Navigate to Accessories.
-
Click on Notepad.
Now that Notepad is open, you can
type in the basic structure that all HTML documents must have:
| <html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
|
All text you would like to show on
your web page goes between the <body> and </body> tags.
Go ahead and either type or cut and paste some text there now.
Add a title for your page such as My First HTML
Document between the <title> tags.
Viewing Your Document as a Web Page
Save your document as an HTML file. To do so:
- At the top left of Notepad, click on File.
- Click on Save As...
- In the window that opens, next to File
name: type in HTMLpractice.html.
- Save it to your Desktop.
Next, let's view your document in a browser. To do
so:
- Go to your Desktop.
- Click on the document called HTMLpractice.html.
It will open in a browser.
- Right click on the browser
and choose View Source. You will see the HTML and text
you created. Notice your text is not formatted.
Formatting text
Here is a table of basic HTML tags you can use to
control the formatting and layout of your text:
| HTML tag |
Effect |
Example |
| <b>bold text </b> |
bold text |
bold text |
| <i>italics</i> |
italics |
italics |
| <u>underlined text</u> |
underlined text |
underlined text |
| <br>line break</br> |
line break |
|
| <p>paragraph break</p> |
paragraph break |
|
| <font color="red">welcome</font> |
red text |
welcome |
| <font color="green">welcome</font> |
green text |
welcome |
| <font color="blue">welcome</font> |
blue text |
welcome |
| <font color="purple">welcome</font> |
purple text |
welcome |
| <h1>introduction</h1> |
creates a large heading |
Introduction |
| <h2>introduction</h2> |
creates a smaller heading |
introduction |
| <h3>introduction</h3> |
smaller yet |
introduction |
| <h4>introduction</h4> |
even smaller |
introduction |
| <a href="http://www.google.com/">Google</a> |
create a link to the Google website |
Google |
You will notice a similarity between these HTML tags and older word
processors such as Wordstar. All tags must be inside pointed brackets
<>. To turn off the effect of a tag, simply repeat it but
include a forward slash / in front.
Practice modifying your current HTML
document by including some of these HTML tags. For example:
| <html>
<head>
<title>My First HTML Document
</title>
</head>
<body>
<h2> Welcome Friends!</h2>
Welcome to my <b>first</b> web page!
<br>
HTML seems quite <font color="red">easy</font>
and <font color="purple">fun</font>!
</body>
</html>
|
Remember to save your document with the extension
.html. View it in a browser and see how it looks.
For further information on HTML,
try these sites:
Note: There are some web design considerations
you need to keep in mind. For example, if you color your text then
it may make it more difficult to read, and different monitors, monitor
settings, computers and browsers render color shades differently.
Also, strictly speaking, blue text should be reserved to indicate
a link, and purple or red text to indicate a visited link. Read
more on the importance of respecting standards in web design in
this
article by Jakob Nielson.
|
