Lesson 1 - Basic Skills and Webmaster Tools

Your Computer Skills

Fortunately you need very few basic computer skills to learn creating and publishing websites and probably you already have these. You need to know how to ...

download and install software open documents in a text editor create folders on your computers hard drive create new text documents and save them to a location on your computers HD know how to use a graphic software to manipulate pictures, especially how to cut and resize images, how to add text to the images and how to save them in a compact format in order to make them more "web friendly". Dont worry - Youll learn all these skills in this tutorial, too.

The Tools
1. A Simple Text Editor
The most basic software you need to write HTML code is a simple ASCII text editor like NotePad, the one which is installed on almost every computer. It cannot be WordPad or Word as these text editing programs use proprietary text formatting codes and therefore would mess up your HTML code. Much better and user-friendlier than NotePad is a text editor called TextPad. You can download this software at Downloads.com or directly from TextPad.com. You get the full version of the software for an unlimited time evaluation period. However, if you will be using it regularily, you should buy a license and support the creators of this excellent software ( it costs only about 30 $ ). I recommend you download all the software tools and scripts related to your work as webmaster to the folder "software" inside this tutorial. The big advantages of TextPad over NotePad are that you can edit many files at once, use a mass "find & replace" function, create macros and the different HTML elements are color-coded, which gives you an easy view of your HTML code structure. Here are two screenshots to show you some differences between the two text editors - Click Here to see the screenshots. Anyway - as we are going to use the excellent free HTML editor 1stPage2000, Im going to show you only the HTML basics in TextPad.

2. A Good Free HTML Editor

While you can write HTML code with a simple text editor, there are many time-saving functions that only an HTML editor has built in. One of the best free HTML editors (not only in my, but also in many other peoples opinion) is 1stPage2000 from Evrsoft. Its very easy to use, has many time-saving functions and a complete reference of all HTML elements and more. I have included this tool and some other tools on the HTML Tutorial CD ROM tutorial, so you dont need to download it. You find it inside the folder software. To install it, simply double click on the file 1stPage2000.exe. This will launch the installation shield which guides you through the installation process. But before you install 1stPage2000, please read the following carefully to avoid any confusions: Important Note Before Installing 1stPage2000 When you install the software you will probably get an alert from your anti virus software that a trojan or virus has been found in one of the files. This is wrong ! The reason why your anti virus software thinks that theres a virus / trojan in 1stPage2000 is that one of the many javascript codes included in the package ( the file "Six buttons from hell.izs" ) is falsely considered by many anti virus softwares to be a trojan or virus. So dont worry - your computer and your data are save. You can find more info about this on evrsofts support forum (use the search function and "trojan" as keyword to find threads dealing with this issue). UPDATE: In January 2006, Evrsoft released their new HTML editor 1stPage2006. The basic functions are the same as in 1stPage2000, but the reference is more extensive, the interface is a bit difference and it has some more features than 1stPage2000. Also, the free version keeps nagging you to buy an upgrade. Nevertheless I have still included the old version (Im still using it, too) as the videos are recorded using 1stPage2000 and most people feel more comfortable seeing exactly the same software interface. If you like, you can start with 1stPage2000 and later use the new 1stPage2006, which you can also download for free from Evrsoft.com.

3. FTP (File-Transfer) Software

FTP stands for "file transfer protocol". In lesson 17 Ill show you how you can publish your website on the internet and the most easiest way is to use an FTP software to "upload" your webpages. There are many different FTP software tools available on the market, most of them have only a free trial version of 30 days, others are only free for non-profit organizations and other free tools are ad-supported.

Ive searched pretty long and reviewed many different tools before I found a truely free, clean (i.e. ad-free) and user-friendly FTP software - FileZilla. Ill show you step-by-step in lesson 17 how to install, configure and use it to publish your websites to the internet right from your desktop.

Alright, lets get started now and learn the basic structure of an HTML document ( = the "source code" of a webpage) and the meaning of its different elements.

Lesson 2: Understanding the HTML Basics

Meaning of HTML, Elements, Tags & Attributes
First of all, lets take a look at some terms you should know: HTML stands for Hyper Text Markup Language. Its a markup language that can be interpreted by different softwares like a web browser that reads and translates the HTML code and displays a webpage to the user according to the commands given in the HTML code. HTML is a very easy and comprehensive markup language as you will see in a moment. The "World Wide Web Consortium" (W3C.org) is the international organization who develops web standards, web technologies and also defines the HTML specifications. An HTML document is structured with elements, which represent different parts of the document. Most elements consist of three parts: an opening tag, some content and a closing tag. To illustrate the different parts of an element, lets take a look at the element used for text paragraphs - P.

The opening tag contains the element name "P" within angle brackets "<" and ">". Hence, in the example above, "<p>" is the opening tag. Next comes the content (any text you like) and finally the closing tag which is similar to the opening tag but includes one forward slash "/" right before the element name. So the function of tags is to tell a browser where a given element starts and where it ends and how it should handle the content within this element. Important to know is that the element names are case-insensitive, which means that it makes no difference whether you use "<p>" or "<P>" inside your HTML code. Empty Tags (also called "stand-alone tags") are elements which only consist of an opening tag. They dont have neither content, nor a closing tag. You will get to know an empty tag in the next lesson. Attributes are parameters used to further define and format the content of an element. They are included only inside the opening tags, behind the element name, in the following syntax: Attribute-Name="Attribute-Value". While the attribute names are case-insensitive (just like the element names), some of their values might be case-sensitive, so in order to avoid confusion and to stay on the safe side I recommended you use always lower case letters.

Heres an example for an attribute.

You see, the name of the attribute is "align" and its value in the above example is "center". And you guess what its function is ... ... youre right - displaying all content within this paragraph in the center of the web page. Display Example: This is how it looks like in your browser. <p>this is a paragraph</p> <p>this is another paragraph</p> <p align="center">and this is a centered paragraph</p>

The basic structure of an HTML document

Watch the video to learn the very basic structure of an HTML document.

Video button not working ? Click Here Display Example: This is how it looks like in your browser. ( just a blank page ) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> </head> <body> </body> </html>

Now its time to get active yourself and create your first HTML document. Were going to use this document in the following lessons to play around with HTML code. Watch the video and follow me through these steps:

open your text editor copy and paste the above code in a new blank document create a new folder for your website on a local drive of your computer and save the HTML document as "1stwebpage.html" in this folder.

Lesson 3: The HTML HEAD Element

The TITLE Element
The least thing you must include in the HEAD section of all your webpages in order to write valid HMTL documents is the TITLE element. The title of a webpage appears in your browsers title bar when you view the page. The screenshot below shows you the title of this webpage:

Search engines like Google and Yahoo also use the content of the TITLE element as the title for your webpages search engine listing, so its a really important element inside the head section of a webpage. Watch the video to learn how to add a title to your first webpage and to see how it looks like in your browser. <title> My first webpage </title>

Video button not working ? Click Here

The META Element

The META element is used for a couple of different functions inside the HEAD section. Its the first empty element you are learning and as you already know by now, this means that the META element consists only of an opening tag. The most important use for this element is to give the search engines some basic information about your HTML document such as the most important keywords that appear inside the document and a short description of the documents content. META tags use different attributes to specify the function for which each meta element is used. For example: to tell the search engines about important keywords inside your document, you would use the attribute name with the value keywords to define the function of this meta tag and also a second attribute content whose value is a list of comma-separated keywords (or keyphrases) - like this: <meta name="keywords" content="keyword1, keyword2, ...">

For a short description about the document, you would use description as value for the name attribute and a short text for the value of the content attribute - like this: <meta name="description" content="This webpage is about bla bla bla ..."> Heres the raw HTML code for both meta tags again, so you can easily copy and paste it into your first webpage and then add the content you want - the video shows you how, using a practical example and also shows you where the content of these meta tags appears in the search engine listings. <meta name="keywords" content=" "> <meta name="description" content=" ">

Video button not working ? Click Here Youve probably seen it a thousand times, but now you know where they come from: titles and descriptions of webpages listed in the search engine result pages. Google for example uses the content of a webpages title tag as title in the search result page and many times it also uses the content of meta description tags as the description for a webpage (especially when the description contains the searched for keywords). The screenshot below - part of the search results for "online games" - illustrates this again.

The character encoding of your webpages

Another function of the meta element is to tell a browser which character set you are using for the given document. Although not necessarily required, it makes quite sense to include it inside the head section of all your webpages, heres the reason why:

If you do not include this tag into the head section of your webpages, a browser would use the users local default character set to display the content of your webpage. This doesnt make a difference as long as your default character set is the same as your website visitors local default character set. For example: The character set ISO-8859-1 (Latin-1) contains the characters for all american and most western european languages. Hence, a webpage written in the USA would be correctly displayed in North and South America and most western european countries, but visitors from the rest of the world would see pretty much garbage, as their default local character sets are different (Greece for example has ISO-8859-7). So if you want the content of your webpages to be displayed correctly all over the world, you should tell a browser which character set you are using. To do this, simply add the following meta tag to the head section of your webpage. <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> As said, the character set in the above meta tag applies to american and western european languages, so if your native language is different and you want to build websites in your native language, then you would replace "ISO-8859-1" with your local character set. You can find the one for your language at http://www.iana.org/assignments/character-sets

Thats all you need to know for now about the HEAD section. In the next lesson were going to start adding content to your first webpage. You might have already noticed that its going to become time consuming if you continue building webpages with a text editor. To see the changes you make to your documents youd always have to save them first and then (re)load them in your browser. Thats why Ill continue this tutorial using the HTML editor 1stPage2000. Dont worry - youll get used to this tool very quickly and Ill show you the most important functions and options in the coming lessons. Its easy and it will save you a lot of time.

Lesson 4: The Body Element

Introduction
This is the first lesson which is going to last a bit longer, because well play around with a couple of different elements used to format the text on your webpage. In this lesson were going to use only the very basic forms of each element. You will learn in a later lesson how to change text colors, background colors, font sizes, font styles, text alignment and other styling options. Now is the right moment to start using the HTML editor 1stPage2000 instead of your text editor, because its going to save you a lot of time. You know I want to make everything very easy for you, so Ive created a short video to introduce you to the most important functions of 1stPage2000 and to show you some basic options you should set. By now, you should already have this tool installed on your computer like shown in the first lesson.

Video button not working ? Click Here For your convenience, I have provided again the default HTML code for the meta tags below. Copy it into the template for new documents, like shown in the video. <meta name="keywords" content=" "> <meta name="description" content=" "> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

Block-Level and Inline Elements

First you should know the two different main groups of elements that can be used within the BODY section of an HTML document: block-level elements and inline elements One difference between the two groups is that when rendered visually in a web browser, the content of block-level elements starts on a new line while the content of inline elements does not. Another difference is that block-level elements may contain inline elements, some block-level elements may even contain other block-level elements, while inline elements may only contain text and other inline elements. Some examples for block-level elements are the elements used for headings ( H ), paragraphs ( P ), forms ( FORM ), divisions ( DIV ), tables ( TABLE ) and lists ( OL / UL / DL ).

Inline elements are those which are used to format text differently from the surrounding text inside the same parent element, such as the elements used for bold text ( B ), underlined text ( U ), subscript ( SUB ), superscript ( SUP ), anchors and hyperlinks ( A ) and many more. Dont worry about all the different tags for now, youll learn them all in the course of this tutorial.

Headings
H is the element name that stands for "heading". There are 6 levels of headings being 1 the biggest and 6 the smallest heading. Headings are block-level elements and like most other elements, a heading is composed with an opening tag, the content and a closing tag, hence the HTML code for a level 1 heading would look like this: Display Example: This is how it looks like in your browser. <h1>This is a H1 headline</h1> And here are all the 6 different heading levels together Display Example: This is how it looks like in your browser. <h1>H1 - the biggest headline</h1> <h2>H2 - smaller than H1</h2> <h3>H3 - smaller than H2</h3> <h4>H4 - smaller than H3</h4> <h5>H5 - smaller than H4</h5> <h6>H6 - the smallest headline</h6> When you are using headings on a webpage, you should always use an H1 (level 1 heading) first. Other levels should optionally follow in a logical sequence, i.e. you would use H2 (not H3) as sub-heading after a H1 heading. If you think that the H1 level is too big, dont worry: theres a simple way to adapt the font sizes of headings and you will learn it soon.

Lesson 4: The Body Element

Introduction
This is the first lesson which is going to last a bit longer, because well play around with a couple of different elements used to format the text on your webpage. In this lesson were going to use only the very basic forms of each element. You will learn in a later lesson how to change text colors, background colors, font sizes, font styles, text alignment and other styling options. Now is the right moment to start using the HTML editor 1stPage2000 instead of your text editor, because its going to save you a lot of time. You know I want to make everything very easy for you, so Ive created a short video to introduce you to the most important functions of 1stPage2000 and to show you some basic options you should set. By now, you should already have this tool installed on your computer like shown in the first lesson.

Video button not working ? Click Here For your convenience, I have provided again the default HTML code for the meta tags below. Copy it into the template for new documents, like shown in the video. <meta name="keywords" content=" "> <meta name="description" content=" "> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

Block-Level and Inline Elements

First you should know the two different main groups of elements that can be used within the BODY section of an HTML document: block-level elements and inline elements One difference between the two groups is that when rendered visually in a web browser, the content of block-level elements starts on a new line while the content of inline elements does not. Another difference is that block-level elements may contain inline elements, some block-level elements may even contain other block-level elements, while inline elements may only contain text and other inline elements. Some examples for block-level elements are the elements used for headings ( H ), paragraphs ( P ), forms ( FORM ), divisions ( DIV ), tables ( TABLE ) and lists ( OL / UL / DL ).

Inline elements are those which are used to format text differently from the surrounding text inside the same parent element, such as the elements used for bold text ( B ), underlined text ( U ), subscript ( SUB ), superscript ( SUP ), anchors and hyperlinks ( A ) and many more. Dont worry about all the different tags for now, youll learn them all in the course of this tutorial.

Headings
H is the element name that stands for "heading". There are 6 levels of headings being 1 the biggest and 6 the smallest heading. Headings are block-level elements and like most other elements, a heading is composed with an opening tag, the content and a closing tag, hence the HTML code for a level 1 heading would look like this: Display Example: This is how it looks like in your browser. <h1>This is a H1 headline</h1> And here are all the 6 different heading levels together Display Example: This is how it looks like in your browser. <h1>H1 - the biggest headline</h1> <h2>H2 - smaller than H1</h2> <h3>H3 - smaller than H2</h3> <h4>H4 - smaller than H3</h4> <h5>H5 - smaller than H4</h5> <h6>H6 - the smallest headline</h6> When you are using headings on a webpage, you should always use an H1 (level 1 heading) first. Other levels should optionally follow in a logical sequence, i.e. you would use H2 (not H3) as sub-heading after a H1 heading. If you think that the H1 level is too big, dont worry: theres a simple way to adapt the font sizes of headings and you will learn it soon. Lets add some headings to our webpages now.

Video button not working ? Click Here

Paragraphs
Most of the text on your webpages will be embedded in paragraphs. For this purpose you will be using the P element. The example below shows two paragraphs. Display Example: This is how it looks like in your browser. <p>This is a paragraph. It begins with an opening tag, .... </p> <p>There is always a blank line between two paragraphs. </p> In the next video Ill show you how to add some paragraphs to your webpage, but there are also some more basic things you will learn, so its very important you dont skip this one. Youll discover that several white spaces and blank lines within your HTML code are merged into one blank space by the browsers and also how to force line breaks using the empty tag <br>.

Video button not working ? Click Here

Elements for Text Formatting

From the different text formatting options you have, a few basic ones are done by using special elements. All these elements are composed with an opening tag, the content to be formatted and a closing tag. You can see the most frequently used ones in the table below, their names, their effects on text and how the HTML code for the display example looks like. Name EM B I U SUP SUB STRIKE TT Display Example emphasized text bold text italic text underlined text Asuperscript f.ex.: E=mc2 Asubscript f.ex.: H2O strike-through
teletype writer

HTML Code <em>emphasized text</em> <b>bold text</b> <i>italic text</i> <u>underlined text</u> A^superscript f.ex.: E=mc² A_subscript f.ex.: H₂O <strike>strike-through</strike> <tt>teletype writer</tt>

BIG SMALL

bigger than normal

smaller than

<big>bigger than</big> normal <small>smaller than</small> normal

normal

The Correct Nesting of Elements

Before you start experimenting with the elements above, you should learn how to correctly "nest" different elements, i.e. writing the opening and closing tags of the HTML elements in the right order when you put several ones inside another. Below are two lines of HTML code. In the first line, the inline element B is correctly nested inside the block-level element P, the two inline elements STRIKE and U are correctly nested inside B and the inline element BIG is correctly nested inside U. Although the second line is invalid HTML code, most web browsers would still display it correctly as you can see in the display example. Display Example: This is how it looks like in your browser. <p>Buy now for <b><strike>37 $</strike> <u><big>only 19.95</big></u></b></p> <p>Buy now for <strike><b>37 $</strike> <big><u>only 19.95</b></u></big></p> In order to illustrate it better, Ive created a graphic for you.

Now have some fun and experiment with the different elements youve learned in this lesson to get more familiar with them. Ill show you in the video where you find the buttons for a speedy insertion of the most important text formatting elements.

Video button not working ? Click Here

Comments in HTML
Sometimes its very useful to include comments inside your HTML code which allow you to keep a better view of your documents structure. Especially large documents can become pretty confusing when they contain a lot of different codes. Comments can be also useful to place instructions inside the HTML code of website templates in order to make it easier for a user to understand the structure of a template. Other uses for comments are to temporarily hide content from being displayed on your webpages and also the inclusion of SSI (server side includes youll learn this in an advanced lesson). A comment starts with "<!--" and ends with "-->" and all its content is not displayed when the document is viewed in a browser. A comment may basically contain any text and code, except " - ". <!-- I am a comment --> Watch the video to see some practical examples for the use of comments and how comments look like in your 1stPage2000 HTML editor.

Horizontal Rules
Horizontal rules are simple lines used to divide different parts of a webpage. To create a horizontal rule, the stand-alone element HR is used. The most simple horizontal line is formed by "<HR>", which creates a 100% wide and 1 pixel thick line. The default color is grey, the default style "groove" and the default alignment is centered. To change thickness, alignment, width and style of the horizontal rule, you may use certain attributes inside the HR tag, such as SIZE (for thickness in pixels), WIDTH (for the length), ALIGN (for the alignment) and NOSHADE (for the style). These attributes may take the following values: align: left / right / center size: an integer number width: integer number or percentage noshade: no values

However, more flexibility and more styling options are given with Cascading Style Sheets ( CSS ), which you will learn in lesson 10. Display Example: This is how it looks like in your browser. <hr> <hr width="500" size="15"> <hr width="50%" align="left" size="5" noshade>

Escaping Special Characters

By now you already know that certain characters have special functions in HTML, for example the angle brackets "<" (aka the "less than" sign) and ">" (aka the "greater than" sign), which are used for html tags, and the double quotation marks ("), which are used to delimit the values of attributes. Also, there are many special characters that cannot be easily entered on a keyboard, such as the copyright or trademark symbols ( ) and those characters that cannot be expressed in the documents character encoding, for example foreign currencies like Yen () and Euro () or foreign letters (, , , , , ). So if you want to use these characters inside your text, you need to "escape" (= encode) them using the so-called character entity references, or entities for short. Entities are case-sensitive and take the following form: &entity; (ampersand, entityname, semicolon) Here are some of the most commonly used entities. Watch the video to learn how to easily insert entities in your HTML documents with 1stPage2000 and where you find a complete reference list. Entity in HTML &copy; &acute; &amp; &nbsp; &lt; &gt; < > Displayed as & (non breaking space = forces a white space) 3..2..1.. &nbsp;&nbsp;0 --> 3..2..1.. 0 don&acute;t --> dont Examples (HTML code --> Displayed as)

&quot;

"

Video button not working ? Click Here