Web Design 101 - Part 3: Biting Off Some HTML

Submitted by admin on Sat, 12/31/2011 - 18:56

All websites are made up of at least some HTML code.  Think of it as the foundation for just about every web page out there.  Have you ever looked at the source of any webpages that you’ve used?  In Firefox use Command + U and you’ll see all the HTML code that was used to build this webpage that you are looking at. 

Now you know that CSS is used to style blocks or sections of a webpage by identifying each area with a tag.  Those tags are essentially what makeup the webpage. For example the entire body of the page is enclosed in the body tag.  Each paragraph is enclosed in a paragraph tag. 

So at the start of each paragraph you will see the following:  <p>.  At the end of the paragraph you’ll see </p>.  This tells your browser that the text within the “p” tag is a paragraph, and it will treat it differently then, say, a heading.  A heading will look like this at the source:  <h1>This is a heading</h1>.  And will be displayed quite differently in your browser than a paragraph.  (Most tags have a default styling, CSS comes in when you want to customize your site.)

Using HTML within you CMS site. 

Knowing at least the basics of HTML may come in handy when you are working on your blog, updating your pictures, or changing your store hours within your CMS site.  For example you may find that you don’t have a certain heading option in your CKEditor, or you may want to use some more of the advanced option within the Editor.  At the very least, knowing some HTML will help you understand how your site speaks to your browser. 

Here are some HTML tags that you may run across:

Type Source Code Browser Display
Link To
<a href="www.dirtbirdproductions.com">Link to Dirt Bird</a>
Link to Dirt Bird
Heading Type 2
<h2>This is a major heading</h2>

This is a major heading

Line Break / Carrage Return
There is a line break after these words:
< br/>
Phew, I'm glad that worked!

There is a line break after these words:

Phew, I'm glad that worked!
 

Horizontal Line
< hr/> 

 

Space
There are several spaces between here: &nsbp; &nsbp; &nsbp; and here.
There are several spaces between here:     and here.
Bold
<b>This writing is bold</b>

This writing is bold

Italics
<i>This is Italic</i>
This is Italic
Bold and Italic
<b><i>Bold and Italic</i></b>
Bold and Italic

 

 

copyright Dirt Bird Productions 2011 | Site Design and Development Dirt Bird Productions 2011