HTML means HyperText Markup Language it is the code that Webpages are made out of.

In our series of lessons we will cover how to build a webpage by putting together a number of HTML elements to control layout, formatting and to add items like images and multimedia.

Elements are objects that make up a page.
Many elements have a <starting> tag and an </ending> tag but some like the Image Tag <img> only use a single tag. You can think of elements as containers that you put things in. They store items just like you would in a refrigerator.

Think of your Refrigerator as the WebPage and inside you have many containers or Elements to store items.

Within each element (container) there are ways to modify the attributes of the items inside.

<font color=”red”>This is a red font</font>

As you learn how to use more elements on your pages you will also find ways to use them together to make a nice presentation for your visitor.

Although there are many more aspects to building a good website that are outside of basic HTML this is the foundation for every website. It does not matter how big the site is or what super spectacular features they may have when the page is presented on your home computer it is HTML that renders the pages in your web browser.

Now yes there are a few addons that your browser can use like javascript or flash but even those elements rely on some html to get their work done.

So, since this is the first lesson we won’t get caught up with learning complex things but it is a good time to think about how you should learn.

First you should always remember that no site is ever perfect. You can spend hours designing your layouts but if that takes away from your writing content then whats the use. In other words you should try to keep your sites as simple as you can while still adding all the feature that you want.

Don’t worry about being on the cutting edge of web design as long as your site works for you and your visitors. Things will always change and every new version of some browser will add something or end up breaking your pages. Don’t try to please everyone. Read your website log statistics and you will see that most of your visitors will use 1 or 2 browsers so install them on your home computer and view your pages before you make them live.

And here is a clue for the most part unless your site is very specific your visitors will be using either Internet Explorer or Firefox. And within those two browsers you will find most people will be using the newest version after it has been released for about 3 months. However some people never seem to upgrade. After IE and FF you will find a number of visitors probably less then 25% that are split between the 50 other browsers most you have never heard of before. Don’t get caught up in pleasing them all. If you write simple clean code then your site should work for everyone and if not then those people have problems with many sites not just yours.

Take advantage of View Source in your browser.
This is probably the best way you can learn at first and even later down the line when you want to do something special like implementing a new menu that you like on someone else’s site. Now we are not saying that you should steal sites that is a definite (do not do) but it is ok to get ideas from other sites and implement them in your own designs. So, admire, learn from and implement but never make a direct copy of any live site.

Resources
Hopefully this site will be a good resource for learning both basic and advanced skills but you should also think about design.

Free Template Sites
The best places for new design ideas, other then every page you visit, is a free template website. Many developers that build sites professionally will also include free versions of their sites for people to download. They do this for a couple reasons: Advertising of their style so they can build pay sites and also just for fun.

Free Code Sites
Another resource you will need to find is a place to find code samples. Although we will start off with HTML for building your pages you should also learn about a few programming languages like Perl, Java, PHP and other products that work on your server or software like Flash, Java and Javascript that work in your browser.

Free code is always your first and best resource but you may want to invest in specific software packages or in some situations hire someone that will build your website’s code while you handle the layout. The one thing you have to remember about paid software is that you get what you pay for and in this meaning its not about the quality of the code but more the features you can add. If you go with popular open source software you  are likely to find community support and people that write free add-ons that you may need.

So, unless you are doing something really special and specific to your company that no one else in the world needs to do try to stick with open source software or at least paid packages that have a large community following.

Thats basically it … in other lessons we will cover all of the different HTML Elements and try to put them to good use. We will also go over some software packages you should use and in our other lessons we will cover setting up a server, programing languages, website package software and everything else we can think of to help you design the website you always wanted.

<!DOCTYPE> Tells the browser what version of HTML it should expect

<html> Starts the page

<head> Includes non displayed information such as the title and links to other files

<title> Is displayed in the browser title bar

<body> This is where all of the content of the page is placed

The format for these tags is as follows

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<link rel=’stylesheet’ href=’http://www.oursite.com/sitestyles.css’ type=’text/css’ media=’all’ />
<title>This is the page title</title>
</head>
<body>
Page Content In Here
</body>
</html>

In the example above you can see that all of the element tags with the exception of LINK and DOCTYPE have a beginning and a ending tag. However you can also see that these two tags use a trailing slash / on the closing > to indicate that the tag element is closed. Like this />

A Link Tag is not one of the mandatory Tags but it is included in the example to show its placement.

To start any page you should include the DOCTYPE In our case the doctype for our page is (XHTML 1.0 Transitional) meaning the browser should understand that it will be receiving html that is compliant with the XHTML 1.0 Standard.

Immediately after the Doctype we have the HTML Tag. This tag will encapsulate the whole page with a start and end tag of <html></html> It tells the browser to begin reading in the page here and end there.

At the top of the page right after the HTML Element we add a <head> area that can contain information about the page such as the title that will show in the viewers browser title bar and other information such as links to files that will add support for the up coming HTML page.

Items that may be included in a header area include:
CSS formatting information or Links to an external file
Javascript commands or links to an external file.

There is no difference between adding css or javascript directly in a file or linking to it other then the fact that if that same information is used on many pages it can be easier to link to the file that way you only have to update one file instead of each page of your site.

The <body> Element Tag is located after the HEAD element tag closes.

The BODY area is where you will place all of the HTML Elements needed to display the content of your page. You will put all of your Text, Links to Images, Multimedia and basically anything you want your visitor to see in this area.

At the bottom of the page you will see the BODY tag Closes then the HTML Tag Closes to tell the browser the page has been downloaded completely.

Make an empty folder to store your files and start a new text file named test.txt and open it in Notepad.

In the file put the following lines of HTML

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<link rel=’stylesheet’ href=’http://www.mysite.com/sitestyles.css’ type=’text/css’ media=’all’ />
<title>This is my first webpage</title>
</head>
<body>
Hello, This is my first webpage. <br /> I hope you like it.
</body>
</html>

You should see something like this:

As you may have noticed we added another tag on your page. The <br /> or Line Break Tag.

This is an important tag to remember because anytime you need to go to the next line or force an empty line between text or other items you will need to use a BR tag.

Empty lines and repeated spaces in HTML files are ignored. You could add ten pages of spaces and returns in your html file and only the first would be recognized and used.

You should also take note that all of our HTML Element Tags are in LOWER CASE  <br /> is correct <BR /> is not correct. This is part of the new html standards and is important because some advanced html may see tags differently if they are in upper or lower case or have mixed case words. However for now if you make a mistake on the case of the tag eLeMenT your browser should still render the page correctly.

In lesson 3 we will introduce different content to our pages.

When your visitor reads your site they want the text to be presented in a way that is easy to read and is highlighted or styled to bring emphasis and guide the reader.

In lesson 2 we saw that there are basic mandatory tags that must be included in every webpage. As we continue learning we will start off with a HTML file template that contains those basic tags.

We know that within the <body> tag is where we will place all of our text and links and image references but before we get started with laying out a fancy design this lesson will cover many of the ways that you can use basic HTML to be creative. You should also remember that we are learning basic HTML in these beginning lessons and in later ones we will cover the use of CSS style sheets that can perform many of the same tasks and many more advanced formatting commands.

Ok lets start with adding a line of text to our template file within the Body Area.

Code view is on the left and what you see in the browser is on the right.

.

Now lets add a Headline for our Page
As you can see the <H1> header tag makes the font bigger, bold and it also forces a line break between the Headline and the paragraph of text we had already written.

Headline Tags <h1> have a starting tag and an ending tag <h1>stuff</h1> You must always close your tags or the rest of the page will pickup the formatting until the tag is closed or you reach the end of the page.

Headline Tags come in sizes 1 through 6 and the strange thing is the lower the number the larger the Headline. To use a different size you must open and close your text with the number included in the closing tag. Here are some examples:

<h1>HEADLINE</h1>
<h2>HEADLINE</h2>
<h4>HEADLINE</h4>
<h6>HEADLINE</h6>

.

But what if we just want to make something within our paragraph Bold and we don’t want a line break that a <H1> tag will force? Then we can use the <strong> or <b> bold tags

.

To make a Word Italic we can use the <em> tag

.

To underline a word we can use the <u> tag

.

To change font face, color or size of a word we can use the <font> tag

.

Review

Lets cover some of the ways that you can add styling to your text in HTML.

<H> headline tags they are used for headlines that will be separate from the other text and include a forced line break after the headline tag.

<strong>  tags make your fonts bold

<em> tags make your words italic

<font> tags can set color font-family and size

NOTE
It is important to note that the font tag has been deprecated in favor of CSS Styles even so you can use the font tag to insert your local styles or replace it with a <span> tag.

In CSS which we will learn later a <span> tag can be used to style fonts and would look something like this.

<span style=”font-family:times;font-size:16pt;color:#0000ff;text-decoration:underline”>this line of text is blue 16 point high underline in Times Font </span>

this line of text is blue 16 point high underline in Times Font

We will add to our understanding of web design in stages.

More complex tasks will come in manipulation of divs for layout and menu systems but it is important to understand the use of tags and elements before you begin styling them.

Complex tasks are nothing more then a series of easy ones.

For instance baking a cake when you never have before can seem to be complex but each step is pretty simple.

Measure the flour and sugar and water, add your baking powder and mix it up, set the oven to 350F, grease the pan and cook it for 30 minutes and in the end you endup with a cake.

Websites are the same… you learn how to style your fonts (just like measuring flour) and then you will understand that part when you begin making a menu system.

So, what types of images can you use?

Web browsers can understand a variety of media types but for images there are 3 basic file types that you can place or link to in your pages.

Jpeg – This file type is a compressed image able to display 16 million colors in a lossy or dithered image. It is best used for photographic images but it can be used anyplace within your design where transparency isn’t necessary.

GIF – This is one of the very first image file types it has a lower number of colors only 256 that it can use to represent your images so it is not so great for photographs but it is good for graphs, text or images that need transparent areas. It is often used for logos, buttons or corners where you want the background behind the image to show through making round or complex shapes. You can also use Gif Files to create animations.

PNG – This is a relatively new image file type and combines the two properties of GIF and Jpeg image files. PNG has a large number of colors so it is good for photographs. It is also good for images that require transparent regions. In addition to transparent regions that are totally see through PNG can also have levels of transparency. You can overlap a bottom yellow png file with a 50% transparent blue file and endup with green. About 60% of the browsers out there support the full properties of PNG files and this includes most browsers of the latest version however many users still use old browsers because they have not or can not update their browser due to the operating system they use on their computer. Yes people still use Windows 95 but also many other OS’s.

ICO – This is a format that is used primarily for making icons for your desktop applications. When you see a Icon on your desktop that you use to launch your word processor that is an ICO file … The ICO format is also used in websites for the icon that shows up in your browser location bar and when you drag that url shortcut to your desktop. There are websites that will convert your jpeg or gif file to an ICO file and it is best that you use one of these services when you need to generate your favicon.ico file.

Note because of browser incompatibility it is important to double check your site in a variety of browsers and versions of browsers based on your site’s visitor stats. View your weblogs and check what your visitors are using then visit a site like www.browsershots.com and get a preview of what your visitors are seeing. However don’t remake your site into a text only site just because you get 10 visitors a month browsing your site with a WebTv browser.

.

Adding Images to your Content
When you want to add an image within the text of your main content you use the <img> Tag.

This is one of only a few html tags that have no closing tag.

To add an image find the place within your HTML that you want to insert the file.

Then for an image on your local server in your /images/ directory
add <img src=”/images/flowers.jpg”>

For an image that is hosted on another server use http://
add <img src=”http://www.website.com/images/flowers.jpg”>

As you can see in this example we are inserting a <img> tag at the beginning of our text.

<html> <head> <title>Lesson 3</title> </head> <body><img src=”/base/images/cash.jpg”>This is a line of text that we are adding to our html file.  As you can see it is pretty plain. </body> </html>

This is a line of text that we are adding to our html file. As you can see it is pretty plain.

.

Here we will apply an alignment to force the image to the right side of the text <img align=”right”>. Alignment can also be placed in your CSS Styles either on the image tag or on a container surrounding it.

<html> <head> <title>Lesson 3</title> </head> <body><img src=”/base/images/cash.jpg” align=”right”>This is a line of text that we are adding to our html file.  As you can see it is pretty plain. </body> </html>

This is a line of text that we are adding to our html file. As you can see it is pretty plain.

.

Here we will wrap the <img> tag with an anchor or hyperlink so if you click on the money you are brought to another page. <a href=”http://www.npsites.com”><img src=”/base/images/cash.jpg”></a>

<html> <head> <title>Lesson 3</title> </head> <body><a href=”http://www.npsites.com”><img src=”/base/images/cash.jpg”></a>This is a line of text that we are adding to our html file.  As you can see it is pretty plain. </body> </html>

This is a line of text that we are adding to our html file. As you can see it is pretty plain.

Most browsers today will ignore the border around images if they are used for a button Hyperlink but you can use the border property in any hyperlinked image to insure that you do not get a blue border around your linked images.

<a href=”place”><img src=”imageurl” border=”0″></a>

.

In this example we will set the background for our page to be an image.

<html> <head> <title>Lesson 3</title> </head> <body background=”/base/images/blkgreen-10x60px.jpg”><img src=”/base/images/cash.jpg”>This is a line of text that we are adding to our html file.  As you can see it is pretty plain. </body> </html>

This is a line of text that we are adding to our html file. As you can see it is pretty plain.

.

To fix the background image and make it only repeat in the x direction and not down the page in the y direction we need to use CSS Styles.
<body Style=”background-image: url(/base/images/blkgreen-10x60px.jpg);background-repeat: repeat-x;”>

<html> <head> <title>Lesson 3</title> </head> <body  Style=”background-image: url(/base/images/blkgreen-10x60px.jpg);background-repeat: repeat-x;”><img src=”/base/images/cash.jpg”>This is a line of text that we are adding to our html file.  As you can see it is pretty plain.</body> </html>

This is a line of text that we are adding to our html file. As you can see it is pretty plain.

To complete the green color down the page we can apply a background color.
<body bgcolor=”#98CF40″ Style=”background-image: url(/base/images/blkgreen-10x60px.jpg);background-repeat: repeat-x;”>

If the visitors browser isn’t able to use CSS styles they will simply see a solid green background.

Here you can see we also changed the text to white and replaced the cash jpg image with a transparent Gif image so you can see the background through the white area.

<html> <head> <title>Lesson 4</title> </head> <body  bgcolor=”#98CF40″ Style=”background-image: url(/base/images/blkgreen-10x60px.jpg);background-repeat: repeat-x;”><img src=”/base/images/cash.gif“><font color=”#ffffff”>This is a line of text that we are adding to our html file.  As you can see it is pretty plain.</font> </body> </html>

This is a line of text that we are adding to our html file. As you can see it is pretty plain.

.

There are a variety of other uses and methods to include images on your pages menus and in your content. As you can see we are starting to use more CSS Styles to add more features. Some things you just can’t do in basic HTML unless you are willing to go through a lot of work.

You should now understand how to add images into your content and apply images as backgrounds for your pages.

The same methods of adding images as backgrounds can be applied to Tables Divs and other containers.

You can use images as links to other pages within your content or as menus or buttons for forms such as a search form.

There are a variety of uses and the limits are endless if you are willing to understand the basic concepts and apply them creatively.

.

Because we talked about it earlier and it is so simple to do.

Linking to a Favorites ICO file
Favorites icons are linked to in the <head></head> area at the top of your html file

<link rel=”Shortcut Icon” href=”/images/favicon.ico” type=”image/x-icon” />

To set the language options you may place the following HTML in your Header Element.

<html dir="ltr" lang="en-US">

The Options available for the English Language include

English – lang=”en”
English US – lang=”en-US”
English Great Britain – lang=”en-GB”
English Cockney – lang- “en-cockney”
English Scouse – lang=”en-scouse”
English Australia – lang=”en-AU”
English Canada – lang=”en-CA”

You can also Override bidirectionality in your CSS File

html, body {direction:ltr}
/* begin bidirectionality */
bdo[dir=ltr] {direction:ltr; unicode-bidi:bidi-override}
bdo[dir=rtl] {direction:rtl; unicode-bidi:bidi-override}
*[dir=ltr] {direction:ltr; unicode-bidi:embed}
*[dir=rtl] {direction:rtl; unicode-bidi:embed}

If you are going to set bidirectionality in your CSS you must include the HTML tag

CSS Bidirectionality can be set based on individual elements based on their parent where the absence of the HTML Tag setting will not allow this

The more you work with foreign language preferences the better you will become at designing pages that viewers around the world can read easily.

This is not to say that you should limit your designs in ways that would compromise your content. Just that there are decisions to be made if you know your content is being viewed by people with different settings.