HTML For Beginners of Website Design
All
websites are created using a formatting language called HTML, an
acronym for Hyper Text Mark-up Language... another of those acronyms
that don't make much sense.
What
you see displayed on your computer when you look at a website in
your internet browser is similar to watching a play. You only see
what's happening on stage, but what's going on behind the scenes
is what makes the stage action possible.
HTML
is the action going on behind the scenes. It contains all the
instructions for the browser to properly display the text and images
in the web pages as you designed them.
Why
should you learn HTML? Although there are plenty of software
and online programs that allow you to easily design a website, none
of them are perfect.
- They
insert extraneous code that can affect search engine position.
- They
are limited and may not allow you to do what you want.
- They
may not support advanced techniques such as CSS or Javascripts.
- Some
errors may not be automatically corrected by the program. For
example, all the text suddenly becomes a link.
Additionally,
if you happen to find something on another website you like, such
as a color or the layout, you can view the source code, read the
HTML, and use it to aid you in the design of your website. Important
note: Although you can use the HTML on other websites
for inspiration, using their content - text and images - violates
copyright law. If you want to use any of the content from another
website you must first obtain permission from the website owner.
To
view the HTML of any web page, simply click on "View"
in the tool bar at the top of your browser's screen. In the menu
that drops down, click on "Source" or "View Source."
It probably looks like Gobbltygook to you, but it's actually very
simple to interpret and read. You may want to print the HTML from
a website to follow along with the rest of the article.
Here
are the basic rules of HTML:
- All
HTML tags are enclosed in angle brackets <>. They're
on the comma and period keys of your keyboard.
- All
HTML tags are in pairs
- one that begins the command and one that ends it. Start and
stop. On and off. To end a command insert a forward slash at the
beginning of it. Example: a new paragraph begins with <p>
and ends with </p>
- First
in, last out.
In many instances you'll have several HTML tags that define one
item. The first tag is always the last one to be ended. Example:
<font size="-1"> <font color="#006666">
text </font color> </font size>.
- For
every rule there is an exception. Including this rule.
A
web page has two main parts - the head and the body.
The
head is the first portion of the HTML and, like the thoughts
in your head, anything within the head of your website are invisible
to the viewer. All instructions within the head are strictly for
the browser and the search engines. Typically you'll find the Title
tag, Meta tags, and perhaps some Javascript or CSS instructions
in the head.
The
head of a basic website would look like this:
<html>
<head>
<title>The title to the webpage</title>
<meta name="keywords" content="website design,
web pages, websites">
</head>
Notice
that there is no end tag for the meta name; this is one of those
exceptions in action. Also there's no end tag for the html tag in
the head because it's the first thing in, so it's the last thing
out. Look for it at the very bottom of all the HTML.
The
second portion of the HTML is the body, which is the part of
the website that's visibly displayed on a computer monitor. This
is where all the text, files for the images, and other files such
as Javascript are inserted.
The
most common tags you'll see in the body to format text are:
- <p>
</p> - Paragraph, end paragraph. When working in a website
design program and you hit the Enter key a new paragraph is automatically
created. Additional formating of the paragraph may be the alignment.
Example: <p align="center">
- <br>
- line break. This particular tag requires no end tag. Holding
down the Shift key while hitting Enter creates a line break in
most website design software and programs.
- <font>
</font> - Within the <font> tag are the instructions
for the font type or family, color, and size. Example: <font
face="Verdana, Arial, Helvetica, sans-serif" size="-1"
color="#006666"> . In the example given the multiple
fonts are called a "font family". The size defined is
relative, which allows the website visitor to resize the text
for their ease of reading. The color is always defined in hexidecimal.
The closing font tag automatically ends all the font formatting.
- <b>
</b> - Bold.
- <i>
</i> - Italics. Use italicized text sparingly because it's
very difficult to read on a computer monitor. The use of bold
or colored text for emphasis is a better idea.
- <h1>
</h1> - Text formatting for "heading size 1" which
is the largest size of text. Headings can be sized from 1 to 7.
This should only be used for headings and subheadings on the web
page, especially if they have keywords in them. When formatting
regular text simply use the <font> tags.
The
HTML for a simple web page would look like this:
<html>
<head>
<title>The title to the webpage</title>
<meta name="keywords" content="website design,
web pages, websites">
</head>
<body>
<p> <font face="Verdana" size="-1">some
text</font></p>
</body>
</html>
View
the source code for this website and then print it. Read through
it, comparing what you see on-screen and see just how easy it is
to read and understand HTML.
|
