How to Design a Basic HTML Web Page

Basic HTML PageWant to do some fun web page designing? Structuring a basic HTML page is fairly easy once you know how page design works.

As you will learn in most beginner web design courses, a web page builds as you go.

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 HTML web page and what they represent.

When learning HTML for beginners, 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.

How to design HTML web pageHead 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.

Learn Web Design from Home ..

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!

how to design html pagesKnowing 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! Learn more ..

Filed under: Web Design