BASIC CONCEPTS IN HTML CODE FOR WEB PAGES
There are many tools and techniques used in web page design. Many of
the newest tools are graphic interface and do not require a knowledge of the
principles involved in the HTML scripting contained in the basic web page.
There are a few tools that I use for most of my web page creations.
-
Note Pad
-
Microsoft FrontPage 2003
-
Adobe Photo Shop
-
Microsoft Photo
Editor
When I first started
making web pages I used Note Pad. Since the development of the Office
2003 product I have started to use the FrontPage 2003 software.
Most of the time I use FrontPage for the basic layout and then switch to
Note Pad for all my detailed HTML scripts. I have found that
understanding the basics of HTML coding is important to custom design and
arrange text or graphical objects within the webpage.
On my page titled
[Educational Resources For Web Page Design And HTML Code] you will find a
number of Power Point pages and LINKS to resources I have found that are
very helpful in learning the techniques involved with making your own web
page.
On this page I will begin giving you some basic concepts regarding the HTML
code. None of this information is original to myself but is taken from
notes I have gathered over the years from mentors and friends that are experts in the
field of web and graphic design.
Some of this material is no longer available from the original resource.
However, I believe it is useful for having a basic understanding of the HTML
code. All of this information is given for educational purposes to
encourage and enhance the understanding of HTML page coding and design
concepts.
INTRODUCTION
Web Pages are designed using "HTML" which stands for Hyper Text Markup
Language. There are a number of very good, easy to use "fill in the blank"
programs on the market, but Web Pages and "Home Pages" can be built from a
blank screen using simple HTML codes and a text editor.
It's helpful to understand some simple HTML before creating a Web Page.
Learning HTML is easy once the language is understood. The object of making
a personal home page should be fun and this tutorial will help beginners get
started.
A Web Page or HTML file may be created using a simple text-editor such as
"notepad" or a word-processing program. There are a number of "do it for
you" programs on the market, but Web Pages or "Home Pages" can be built from
scratch using simple HTML codes.
IMPORTANT:
Files must be saved with the ".html" extension (or ".htm" on systems that
won't allow a 4-character extension). You may find some older servers will
not recognize the extension .htm as an HTML file, and the files might show
up on the browser as text files. If this happens, you may have to change all
your file extensions to .html, and if so, you'll have to change every link
to the renamed files to reflect the change. Therefore I would
recommend using the 4-character HTML extension.
All HTML tags are bracketed by the greater < and less than > symbols. The
HTML tag looks like this: <html>. (HTML tags aren't case sensitive so they
may be in caps, lowercase, etc...)
The most important tag in HTML is the <HTML> tag. This tag goes before every
other tag in HTML to inform the browser program (such as Internet Explorer
or Netscape Navigator) that it's an HTML file.
The second tag is the <HEAD></HEAD> tag, which marks the document heading.
The title and/or other information may be placed inside this tag.
Place the title inside the <HEAD> tag. <TITLE>Enter text here</TITLE> tag.
The title for this page is
"HTML NotePad Basics - Albany NY Web Site Designer, Graphic Webpage
Artist, Web Management by Edward Healy."
Each command is completed by repeating the tag with a slash in front of it.
(Example: <TITLE></TITLE>). That slash closes the tag. Some tags don't need
to be closed, but most do. It's a good habit to always close the tags.
[Web Page Title]
If the desired title is Here's My Web Page, the HTML code would look like
this.
<HTML>
<HEAD><TITLE>Here's My Web Page</TITLE></HEAD>
</HTML>
[The Body Tag]
The next important tag is the <BODY> tag. The <BODY> is where page content
(all images, links, tables, forms, etc…) are inserted. The body of this Web
page is the information presented about HTML, from the title to the end of
the page. The </BODY> closes the command for inserted content. The
simple Web Page HTML file would look like this:
<HTML>
<HEAD><TITLE>Here's My Web Page</TITLE></HEAD>
<BODY>
</BODY>
</HTML>
Backgrounds are added in the <BODY> tag, which is discussed further down
the page.
[Body Content]
Content is entered inside the body tag, in the form of paragraphs, tables or
graphics. For text the "Paragraph Tag" is used.
Paragraph tags look like this: <P>Enter Text Here</P>. For each paragraph
enclose the desired text in the paragraph tags. (It is not essential to
close the paragraph tag. <P> may be typed to begin each new paragraph).
However, I personally would recommend beginning to make a close to help in
making errors in other coding scripts.
Another way to "break" between lines is to type <BR>. This will begin a new
line without changing the font or color attributes, or may insert a blank
line if typed twice.
[To enter the text] "The text of this document is entered in paragraph form
for ease of reading and reference." The HTML code would look like this:
<HTML>
<HEAD><TITLE>Here's My Web Page</TITLE></HEAD>
<BODY>
<P>
The text of this document is entered in paragraph form for ease of reading
and reference.
</P>
</BODY>
</HTML>
IMPORTANT:
Always include the <HTML></HTML> tags in the document. This covers the
basics of starting an HTML file. Keep going to learn about backgrounds,
text, images and links.
[Working with Text]
Text color codes and names are same as background names and codes. Text
color inside the <Body> tag determines the color of the text. The tag looks
like this:
<FONT COLOR= "#FF0000">
...and the text will appear as red. To turn off the font color, enter
</FONT COLOR= "#FF0000"> and the default color, black, resumes.
IMPORTANT:
Choose text colors that are eye-catching yet easy to read in contrast to the
background.
[Text Style]
The <HTML> file is done in plain text, on a word processing program such as
Microsoft Word, or WordPad. (This one was done on Notepad.) In those
programs, all the text appears the same: PLAIN.
To change the style of the font, or typeface, the <FONT> is used. The
attribute FACE= is the tag for changing the style goes.
Three standard text fonts that may be used with Netscape Navigator or
Internet Explorer are:
Courier
Arial
Modern
These font styles are attained by typing in:
<FONT FACE= "COURIER">
to get the Courier font.
<FONT FACE= "ARIAL">
to get the Arial font.
<FONT FACE= "MODERN">
to get the Modern font.
Use of BOLD TYPE or italics also can make reading a web page more
interesting.
To bold the text, type <B> and the text will appear bold.
For italics, type <I> and the text will be italicized.
Use both tags, <B><I> for bold Italics.
With some browsers, (Netscape Navigator) the option to use the tags
<SMALL></SMALL> for SMALL text is available. On others, such as Internet
Explorer, the font will appear "normal" size.
The tags <SUB></SUB> for --- subscript --- and <SUP></SUP> --- for
superscript --- are also available with Netscape Navigator and may or may
not work on other browser versions.
Other options are STRIKETHROUGH which is: <S> and underline, which is <U>.
IMPORTANT:
Remember, to "turn off" the bold, italic, strikethrough or underline,
type the tag with a slash before it:
</B>, <I/>, </S>, or </U>.
[Text Size]
Varied text size makes for a more interesting web page.
This is another <FONT> attribute: SIZE =
<FONT SIZE= "1">
results in type this size.
<FONT SIZE= "2"> results in type this size.
<FONT SIZE= "3"> results in type this size.
<FONT SIZE= "4"> results in type this size.
The numbers go from 1 to 7, with
5 (five)
6 (six) and
7 (seven) being
the larger sizes.
[Text Placement]
Alignment of text also adds to a pleasing web page design.
To center Text on the web page, type:
<CENTER>
To space the text as desired, type: <PRE>
then text may
be
variably spaced,
and the "enter" key
used
as a carriage return...
Without using the <PRE>, no matter how many times the "space bar" is
entered, the computer still reads only one space after each word.
IMPORTANT:
Be advised, use of the <PRE> tag may result in spacing text off the
right side of the screen. When this occurs a scrollbar will appear at the
bottom of the user's screen to enable moving the page to read the text.
[To indent paragraphs]
Since it is not possible to simply space in 5 spaces, type in " " for
each space desired in the indentation.
For example:
  Indented paragraphs may make the web page
appear more "readable."
Will appear on the web page as:
Indented paragraphs make the web page appear more
"readable."
Another way to insert spaces is to use the ALT0160
entry, for computers that have a 10 key number pad.
[BACKGROUND COLORS
and IMAGE FILES]
Adding a background file or color to a web page is simple. Each color has a
six digit code, entered into a command in the <BODY> segment of the page.
IMPORTANT:
Color codes or background file names are entered inside "quotation marks."
The HTML tag for the background of this page looks like this:
<HTML>
<HEAD><TITLE>Here's My Web Page</TITLE></HEAD>
<BODY>
<BODY BGCOLOR= "FFFFE0">
</BODY>
</HTML>
Background graphics are added in the <BODY> tag, by entering:
<BODY BACKGROUND= "filename.XXX">
Here are three sample body background files:
