Christian Web Design Blog

Tutorials, tips, tools and free resources!

Archive for the ‘Design Part 4’ Category

Basics of Web Design - Part 4

Posted by admin On September - 14 - 2008 1 COMMENT

Introduction to HTML and Tags

Here’s what we will be covering:

  • A closer look at Tags
  • Parsing. What the browser reads and shows.
  • Foundations to HTML Structure

A closer look at Tags.

All of what you are reading is placed inside of HTML tags. But your web browser parses those tags. Take a look at this Illustration:

This is an example of the underline tag. There are always an opening and closing tag. The closing tag is known by the “/”.

Here’s a look at some common HTML Tags

Basic HTML Document:

<html>
<head>
<title>Document name goes here</title>
</head>

<body>
<p>Visible text goes here, inside a paragraph tag.</p>
</body>

</html>

Comparing HTML code and the web page it creates

Take a look at this side by side comparison of HTML and the Page it displays in the browser.

Take a look at the page here. Right-Click on your mouse and choose View Source to see the source code.

Now that you know what it looks like. It’s time to start writing!

Foundation to HTML structure

2 main areas of an HTML page:

Head <head> </head>
The head tag is all of the invisible stuff.

<title></title> Title tag

<meta /> Meta Tag

These are common tags included in the Head tag.


Body <body> </body>
The body tag is all of the visible stuff.

<p></p> Paragraph tag.

<h1></h1> Heading Tag. There are 6 sizes: h1 - h6

<ul></ul> Unordered List.

<li></li> List Item.

These are some common tags included in the body.

For a more complete list of HTML tags, view this post.

HTML <html> </html>

Every page needs to be “wrapped” in the HTML tag. This is important, because a web browser doesn’t know it’s an HTML page unless it has the <html> </html> tag. Look at the example below.

<html>

<head>

<title>Title of your page</title>

</head>

<body>

<p>some text</p>

</body>

</html>

Basics of HTML, Design Part 4