Learn Beginner HTML Layouts for Website Design
So you’ve got a HTML layouts 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, as well as having to deal with SEO, I always tell customers that it is better to get help from a smartstreetmedia seo expert if you don’t know what you are doing
After all, how do web 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 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 web design, HTML table codes 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 web design 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.
