Structuring a basic HTML page
is fairly easy once you know how page design works.
As you will learn in most web
design courses, a web
page builds as you go, so you can always add new
HTML tags to create more features on the page or to
enhance its look and feel... even after you've
designed the basic structure of the page. Let's
look at a few of the main structuring codes for
building a web page and what they
represent.
When learning
html
for beginers, one
thing you will discover is that the initial
structure tags of a page tell a web browser (like
IE or Firefox) that the document you've created is
an actual web page. These include the <html>,
<head>, and <body> tags. These have
opening and closing tags for each so the browser
will read when one command ends and another
begins.
*Example: Opening
<head> Closing </head> (notice a slash
is added for the closing tag)
HTML Tag
This tag simply tells the
browser that it's an HTML page/document so it will
be recognized as such. You can't just put any type
of document on the web... websites must have an
HTML foundation or some variation of it to work.
Otherwise, the domain name will give an error when
pulled up online. Even other web programming
languages have an HTML foundation, such as PHP,
CSS, XHTML, etc.
Head Tag
The <head> tag is where
you'll feature a title, description and keywords in
a group called "meta tags." These are read by
search engines and are sometimes grabbed by the
engine to display in your site's listing. It's
important to feature your main keyword or phrase in
the title and description for SEO purposes.
Using the keywords meta tag
is optional and may or may not make a difference to
most search engines. The <head> tag may also
include basic HTML page commands or tags that are
not really part of the page's design, such as
comments (for the designer's reference), CSS
template coding, navigational menu commands,
etc.
Body Tag
The <body> tag is where
you'll include the content for your web page that
will be seen by others. You'll use this section to
build tables (if applicable), insert text,
products, photos. links, videos, etc. Keep in mind
that sky's the limit within the body tag; this is
where all your creativity takes shape as you create
your first website!
Tags, Features and
Functionality
There are hundreds of
possible HTML tags to use in designing your site.
Tags give the page its features and functionality,
so choose wisely. The <b> (bold) tag, for
instance, creates bold text. There are tags for
making your page's text appear in italics, in
various colors, and in different sizes. For
headings, you can use a special header tag, with
<H1> being the most prominent for main
headlines.
Other popular tags include
link tags, input tags for developing HTML forms,
list items, fonts (for lettering styles), paragraph
tags, image tags, and menu tags. If using tables
for your design, you'll use tags for the main table
as well as tags for columns and rows.
Within an HTML
Tag
A basic HTML page will still
have very specific features, which will need to be
determined by what you type inside the brackets of
a tag. The main command within a tag is called the
element, while the description of the element is
called an attribute.
For example: A "font" command
needs to know which font you desire for your
lettering. So if you type "arial" as your font,
then arial is the actual attribute that describes
the command "font." The web browser then knows that
the font for certain text on the page is arial, so
it shows the arial text to the world!
Knowing how HTML works is
just the beginning, but it's a great start! Now
you're ready to enroll in a more detailed web
design training course to learn how to put all this
together in a basic HTML page and get your page
online for others to view. Check out beginner
courses that show you how to do this through
e-books and videos. You'll find that creating a
website is much easier than you thought!
