HTML
Layouts
CLICK
HERE For The Beginner Web Design Course On
Sale
Beginner Web Design
Classes Online: Learn HTML Layouts
So you've got an HTML layout
in mind for your website, but aren't sure how to
put it all together. If you're new to
Internet
web site design and
are just learning how to code with HTML, then HTML
layouts can seem a little confusing at first. After
all, how do designers get the page to be perfectly
formatted with multiple sections? How do they keep
the images and text from running together on the
page?
Hopefully, with this short
web
design class online,
the answer becomes clear with knowing the
underlying functions of HTML and how the web page
layout can be built from scratch. This is something
you won't be able to learn by using a Web design
software program that does all the coding for you.
But by learning HTML basics, you'll know the
foundation and building blocks of a web page,
inside and out.
Types of HTML
Layouts
Web page layouts vary from
one site to the next. Most designers use a multiple
column type layout, which divides the web page into
columns and/or rows. A page might have two or three
vertical columns, with horizontal rows at the top
and bottom of the page to "hold it all together."
With this layout, the row at
the top is often called a "header" and the row at
the bottom is called a "footer." The header and
footer help give the page a professional look with
the logo in the header and site information
(copyright, contact, privacy policy, etc.) within
the footer area.
Another type of HTML layout
is one with multiple rows or columns. It's just a
basic page with perhaps a rectangular box (table)
containing some graphical imagery, links and a
short section of text. These designs are often used
with one-page websites or entry pages. Some use
this design for landing pages that give a short
sales presentation.
Table
Layouts
With basic HTML web design,
tables are often used to create the column and row
sections. Text, images, links, etc. are contained
with the tables. The tables can be manipulated in
width, height, color, borders, padding (space
between line and content within the table) and
spacing (space between the table and outer content
or other tables). Tables can also be created as
rows or columns, which are specified within the
HTML code.
CSS Alternative to
Tables
Though tables have been the
primary method of creating HTML layouts for years,
alternatives such as CSS design are making it
easier to control a page's content without the use
of tables. How? CSS uses measurements for each
element of content to determine how close or far
apart features should be on a page.
*Example: If you want your
logo to be "Y" number of pixels from the top and
left side of the page, you can specify this in the
CSS code. If you want your content to be "Y" number
of pixels to the right of your navigation menu bar,
this can be specified as well. Basically, instead
of using multiple HTML tables to contain various
types of content, you're controlling the content
placement with exact measurements.
Not only can using CSS
methods help with browser compatibility, but also
with page loading time because there are no tables
to load. You'll also be able to overlap images or
content to create unique designs on your web
page.
Create a Plan and Look at
Other Websites
As you study HTML layouts and
coding, consider how you would like your layout to
look once completed. Write it out on paper or find
a site with a similar design. This will help you
reach your Internet web design goals more quickly
and find the method that works best for your
website needs. Hope you enjoyed this online class
and be sure to look for others in the
future.
Did you enjoy this lesson
about HTML layouts? Well, this is just one of the
many classes you'll discover when you study the
complete beginner
web design course.
Take a look and decide if you want to become a
webmaster!
CLICK
HERE to Learn Beginner Web Design Online
>>
Related Lessons:
HTML
Layouts
Web
Design
Inspiration
HTML
Symbols
Web
Design
Education
Small
Business Web
Design
Internet
Web Design
HTML Web
Design
|
