This is a tutorial on building web pages. It's free for all to view on my site. You're all welcome to comment at Email me. Constructive comments will be integrated and the comment authors will get a mention and a link to their site. The tutorial isn't for copying but other sites are free to link here. Register and I'll send you email notifications when material is added to the tutorial. What's not to like about free. However, I'm not against financial encouragement and will accept a Donation.

Getting Started

This tutorial assumes the reader is familiar with using the web but not with developing web sites. I've used a layered approach — deeper layers will cover more advanced topics. Advanced subject matter will be presented with an attempt to limit jargon for the benefit of those not versed in tech speak. My goal is to show you how to build a professional quality website — not to become proficient in all the components of markup like HTML and CSS or languages like Javascript or PHP. When you're ready to learn more, you will find reading recommendations for more in depth learning at Reading List.

Web development is rife with languages, buzz words and jargon. Most sites are built with HTML, CSS, Javascript and PHP at a minimum. The normal approach is to teach you everything about one language but you're still not ready to do something useful. I will be teaching you a little bit of many languages so you indeed will get a result. I won't address language elements specific to only one web browser — international standards only. I'll also exclude elements that are buggy on Internet Explorer. There's also a group of commands which have been depriciated — available for backward compatitbility but shouldn't be used. I won't cover any of those either. A top notch web site can be viewed on all platforms regardless of browser. This ebook will build a web site a step at a time focusing on the web features you want to provide to viewers and not on the intricacies of any language. You will understand how these languages play together to create a modern site. The sample HTML and CSS files are available for download in compressed ZIP format.

All the examples in the text have links to example pages so you can examine the results. Any editing I reference is included in the linked examples. All you need is the browser you're using now unless you wish to create the examples yourself while following the text — you'll need a text editor for that. Something as simple as Windows Notepad would do the job. Coding markup is however much easier with a text editor that has syntax highlighting. If like me, you've forsaken the evil empire and switched from Windows to Ubuntu Linux the included text editor, Gedit, has this feature and will serve you well. Fortunately, your web browser is also capable of rendering HTML files stored anywhere on your computer. No Internet connection or local web server is necessary to see how your HTML and CSS markup will render on from the web. The same goes for the Javascript language we'll touch on later. To start your development environment is a browser and an editor.

Page Structure

First is the DOCTYPE statement which defines what version of HTML is being used. The following is the DOCTYPE I use as the first line of every page.

.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Next come the the actual page bounded by the HTML command markups. Markup commands are reserved words bounded by < and >. A given command bounds it's content. At the end of content the command is always repeated with a / prefix. Many commands can have modifiers. In this example the language for the page is defined. It is best practice to use the language modifier.

.html

As a matter of personal style my markup commands are written in code as lower case. For clarity's sake, I will capitalize the commands when referred to in the text of this book. The HTML markup has two sections, HEAD which provides information about the page that doesn't display on the page and BODY which bounds the actual content. For now I'll limit my discussion of HEAD to the TITLE markup — displays in window title bar.

.html

<html lang="en-us">
<head>
<title>Grand Experiment</title>
</head>
<body>
</body>
</html>

Create Content

Now to BODY where your creative juices can go wild. The best way to understand what goes in hear is to draw parallels to word processing styles. Virtually every markup command can have a style associated with it. The main structural components are headings H1 through H6, divisions DIV and paragraphs P. And now an example:

.html

<body>
<h1>Coding for the web — my way</h1>
<h2>George Fragos</h2>
<p>
This is my grand experiment. A book written on web. You'll get to see it develop over time and learn something on the way. When all is said an written will you still want to purchase the finished product? That is the question.
</p>
<p>
Along the way, you're welcome to comment and ask questions. You may even wish to submit code snippets for potential inclusion. We'll be taking a big picture to a quick result approach. Rather than a reference on one of the web languages, I will present a limited set of commands and techniques from a broad variety of web languages and tools. I will however go into depth on that limited set. This will give you the big picture understanding of how all the parts go together and help you build an impressive web site.
</p>
</body>

I've put the code above into 1-ex-1.html so you can see the end result. Opening it in a new window will allow you to directly compare markup to results. It will look very different when web page rendered. One thing you'll notice is that the end of lines aren't like in the code box above. Characters like "space", tab and end-of-line are all considered white space. Consecutive white space is combined into a single "space" character and word wrapping is determined by the size of the window. If you re-size the page the word wrap will change dynamically. All markups have default styles which is what you will see when you click the link above.

A touch of style with CSS

So far we have an example with black text and a white background — not visually interesting. It's time to learn a little CSS. CSS can be embedded in HTML but current thinks is keep style in a separate file. In the HEAD section, add the following line:

.html

I've already done that for you and created "1-ex-2.html". Next in a new file we create our first CSS file, "1-ex-2.css" we'll place CSS properties and values. In a CSS file we label a set of CSS statements enclosed in curly braces with an HTML markup. Each CSS statement has a property, ":" and then a list of values terminated with a ";". First we define the style of BODY which will apply to all other styles on the web page. I've set the page background color to "teal" and the color of text to "white". I've also specified the font to use. In this case "Comic Sans MS" is my first choice, "Ariel" if first isn't available and any "san-serif" if those two aren't there. Web pages can only use fonts that are available on the viewing machine. The list could be longer or shorter. H1 through H5 will use "Ariel" and be yellow. P, our paragraphs, are justified to both the left and right edges like books and newspapers.

.css

body {
background:teal;
font-family: "Comic Sans MS", "Arial", sans-serif;
color:white;}

h1, h2, h1, h4, h5 {
font-family:"Arial", sans-serif;
color:yellow;}

p {text-align:justify;}

let's look at the end result 1-ex-2.html with CSS.

Hyperlinks

Hyperlinks, now shortened to links, are without a doubt the "killer" feature that made the Internet as we know it. I'd miss images if they were gone but without links —the web would loose it's importance. Links not only provide navagation but properly used they create an onion of information and quick access. They deserve much consideration when you design a web site.

The markup we've used so far is block oriented. A given markup takes the whole width of the window and as many lines as required. Later on we'll get into how to break the window into columns and other rectangular block area. The markup we'll now learn is A. Markup A is inline within a block and can nestle nicely in a sentence much like word. For now we'll talk about one flavor of A with attribute HREF. Examples follow:

.html

<a href="http://FragosTech.com/coach.html">Coach</a>
<a href="coach.html">Coach</a>
<a href="file.zip">Download ZIP</a>
<a href="mailto:fragos@email.com">email me</a>

Line one is a full URL hyperlink to the Coach page on my web site. It's the same as the URL that would be in the location line of your browser. Line two is an example of a relative link. This is the same as a working directory. The 2nd case is used in an HTML document that is stored in the same directory or folder as coach.html. The 3rd case will tell your browser to download and save the file. In a sense HREF says to download a file and operate on it as indicated by it's file type. An image file for example would be displayed in a browser window. The 4th line also opens a window on your desktop but this time it's a compose mail window from your default mail package. The TO: address will already be filled in to "fragos@gmail.com". When you click the email send button, the email is sent, the mail window closed and your returned to the browser window where the mailto link is. Now we'll add a P markup to our working example to link to another web page.

.html

<p>
You can learn more about the author in his <a href= "http://FragosTech.com/resume.html>resume</a>.
</p>

This link 1-ex-3.html will take you the updated web page. You see the link as the word "resume" underlined and blue in color — default appearance of an unvisited link. Click it and you go to my resume. Hit the browser back button to return and you'll see the color of the link has changed which indicates it has be "visited". Later on I'll show you how to change the appearance of a link. You may have noticed that on my site, links appear as 3D buttons that change color when the cursor hovers over them.

Images

The image is inline in a block sized to the image and the text that follows wraps around the image even though in this case there are no visible image borders. A copy of this image is in the ZIP file with all the examples. The following addition to the CSS file example was made for you and applies to the IMG markup command. The FLOAT property places the image on the left and allows the text that follows to wrap around it. The BORDER sets the border to 0 meaning "none."

.css

img {float:left;
border: 0;}

Place the following markup after the close of the H2 markup in example 1-ex-.html.

.html

There are a couple of extra attributes in addition to SRC. ALT defines the text that will be displayed if the image isn't. Since indexing web crawlers can't see images, it also provides text to be indexed. TITLE defines the text that is displayed when the cursor hovers over the image. I've done this for you in 1-ex-4.html.

Image as link

We can combine A with attribute HREF and IMG to use an image instead of the text link in the prior example. I'm going to turn the "mailus.gif" into an HREF send an email. This is done by editing IMG makup in the previous example as follows:

.html

You'll notice I've changed the TITLE that displays when you hover on the icon to reflect the link's purpose. 1-ex-5.html will display the resulting web page.

On page link

As well as linking to a new page you can reposition to any where on the page. This page uses that technique. The column of link buttons at the top left of this page are all of this type. 1st we define a name or label where we want to go using the ID attribute. I've inserted the ID assignment inside an h1 markup.

.html

The 2nd part is the actual link. The # is used to indicate an on page label.

.html

And this is how we'd reference this internal link from another page.

.html

Block Styles

The concept of blocks of text or image content gives us the opportunity to individually style these areas with unique fonts, colors, borders, backgrounds and spacing. The outermost sides of a block are spacing called the MARGIN. Inside the MARGIN is the BORDER. Inside that is spacing called PADDING and in the center of it all is the actual content. For each markup type the MARGIN, BORDER and PADDING are configurable by side. The background of a block can be color or an image. I like to use subtle patterns as backgrounds. The BODY markup block is the size of the entire page. Other markups are blocks within that. By using the DIV markup we can further divide the area. We'll use a DIV block to contain the H1 and H2 markup in our working example.

There are two parts to this. 1st let's define this new style in the CSS file. I'm introducing the definition of a class — in this case "intro" which is much like defining an optional style which can be applied to any markup block in the form class="intro". I've provided a image file "glass-pattern.gif." We'll use that image for the background using the URL function. I don't want the the text to be jammed up against the edge of the image so I've also defined PADDING on the left side of 10 pixels width. Last we'll add a solid BORDER 5 pixels wide. Rather than selecting a single border color we're going for the optical illusion of 3D. BORDER-COLOR can define a separate color for each side or select one for all sides. To get every gradation of colors we use a hexadecimal RGB number. These RGB numbers start with a "#" followed by pairs of hex digits representing the amount of red then green and then blue. For reference #FFFFFF is white and #000000 is black. There's more detail about colors in the Appendix. The 4 RGB colors are provided in a specific order — top, right, bottom, left. CSS file 1-ex-6.css includes this addition. I also made some tweaks to the H1 through H5 style to go better with the background I close.

.css

h1, h2, h1, h4, h5 {
font-family:"Arial", sans-serif;
color:navy;
margin:0;
padding:0;}

.intro {
background:url(glass-pattern.gif);
padding-left:10px;
border:5px solid;
border-color: #3a3a3a #aaa #d6d6d6 #616161;}

Now we create a DIV of CLASS "intro" that has our H1 and H2 makups in it. This is as follows:

.html

<div class="intro">
<h1>Coding for the web — my way</h1>
<h2>George Fragos</h2>
</div>

Not to check out the results of out latest change at 1-ex-6.html.

3D Button Links

By default, links are underlined. Colors are assigned by state — not visted, visited and cursor hovered. CSS can be used to change the appearance. In this example, we make links into 3D buttons that change with state. States for the A markup are called pseudo-classes. They are defined as "a:link", "a:visited' and "a:hover".

1st we'll define general properties for A. "text-decoration:none" removes the underline normally associated with links. For my taste the buttons look better with a little extra space on the left and right. I've set the border 2 pixels wide, solid line and teal in color which matches our background making it invisible. For not visited (:link) markup A with HREF attribute the button background is displayed as a light shade of green, text color is navy and the border colors make the button appear to stand out while being illuminated from the top left. After being visited the text color changes to blue. For the hover state the background changes to aqua with navy text and the borders flip which places the shadows on the top and left. Combined with the brighter aqua background the button appear to be pressed in and illuminated. This is the markup I've used on my site. It's been added to the last CSS example to create 1-ex-7.css.

.css

a {text-decoration:none;
padding:0 8px 0 8px;
border:2px solid teal;}

a:link {color:navy;
background:#80c0c0;
border-color: #d6d6d6 #616161 #3a3a3a #aaa;}

a:visited {color:blue;
background:#80c0c0;
border-color: #d6d6d6 #616161 #3a3a3a #aaa;}

a:hover {color:navy;
background:aqua;
border-color: #3a3a3a #aaa #d6d6d6 #616161;}

Unlike the :link and :visted pseudo-classes, the :hover state applies to all markup A varieties. This will be noticed when you hover on an A markup with the NAME attribute to make it addressable. I accept this issue because of the great interactive visual appeal this technique provides. 1-ex-7.html will show the resulting web page. It will have a strange visual artifact when an HREF is used with an IMG markup. You'll see the artifact by the "email us" icon. This I'll solve by using the MAP markup instaed of A with HREF. The following code we created in Image as Link.

.html

This is how we apply an image map to accomplish the same image link as above. A USEMAP property is added to the IMG markup. It points to a MAP markup which contains one or more AREA markups that associate an area of the image with a link. The area is defines with a SHAPE and COORDS. Coordinates are specified as a 4 numbers. The 1st pair are the X and Y coordinates of the upper left corner. The 2nd pair are the X and Y of the lower right. The other properties have already been discussed in earlier examples. The updated markup follows and the resulting page is 1-ex-8.html.

.html

Lists & Tables

A list or table will get more visitor attention than a paragraph. A list is defined as ordered aka numbered, OL markup, or unordered aka bullet, UL. List items in either case use the LI markup. For this site I've specified an image file of a check mark to be used for the bullet character.

.html

<ul>
<li>Ordered lists are numbered</li>
<li>Unordered lists have bullets</li>
</ul>

.example unordered

Ordered lists are numbered
Unordered lists have bullets

A list depicts a single column of information relating to a subject. Tables depict multiple relationships in a matrix fashion of rows and columns — maximum information in a condensed format. A table is bounded by the TABLE markup. Each row is bounded by the TR markup and lastly the table data cells in a row use the TD markup.

1st we'll do a little of CSS to improve the tale appearance. Defineing the ".lite" CLASS with text COLOR aqua allows us to hilite a row or even a single cell. I've chosen to use a 1 pixel navy BORDER with 5 pixels PADDING on the ends. The result is each data cell is within a box. I've made these changes to 1-ex-9.css.

.css

.lite {color:aqua;}

td {border: 1px solid navy;
padding:0 5px 0 5px;}

We've left it to the TABLE markup to adjust the spacing between data cells so that the columns line up properly based on the widest data cell in a column.

.html

<table>

<tr class="lite">
<td>Name</td><td>#Red-Green-Blue</td><td>Abbreviated</td>
</tr>

<tr>
<td>Aqua</td><td>#00FFFF</td><td>#0FF</td>
</tr>

<tr>
<td>Black</td><td>#000000</td><td>#000</td>
</tr>

</table>

.example rendered

Name	#Red-Green-Blue	Abbreviated
Aqua	#00FFFF	#0FF
Black	#000000	#000

The updated markup follows and the resulting page is 1-ex-9.html.

2 Column Format

Multi-column web sites are common. Frequently narrow columns are use for navigation and advertising. There's more than one way to create multiple columns. At least one, frames, has fallen out of favor. My recommendations is to define divisions, DIV markup, to break up the window. Divisions can be defined in pixels for a fixed format. Recognizing that users have a variety of monitor sizes with window dimensions chosen to favor multiple open windows, it's best to define division dimensions as a % of the available window. The viewer will be able to re-size the window and not have to scroll horizontally. This example will follow what's used in this site and will illustrate two columns. The narrower left column is sized for navigation. The right is for content.

We'll give the navigation column the ID of "nav". The column will start after markup above it. It's POSITION attribute is set to ABSOLUTE which means anchored to the page and scrollable to the window. There's also a value of FIXED which anchors to the window opening but although supported in the standards, it isn't in Internet Explorer. LEFT sets the the left side at 1% of the window width. WIDTH sets the column width to 17%. PADDING is set to 5 pixels. We've already defined A as an inline 3D button. Since all links will be in a column we'll make some changes to the appearance of A only within the "nav" DIV. The DISPLAY attribute will be changed from the default INLINE to BLOCK so the button will fill the full width of "nav". I found the buttons touched top to bottom so I added MARGIN-BOTTOM of 4 pixels to move them apart.

Next we define the content column with ID of "para". Again we set the POSITION attribute to ABSOLUTE. The LEFT side is set to 20% which leaves a little space between the columns. A 10 pixelMARGIN-RIGHT to the right window edge is set.

.css

#nav {position:absolute;
left:1%;
width:17%;
padding:5px;}

#nav a {display:block;
margin-bottom:4px;}

#para {position:absolute;
left:20%;
margin-right:10px;}

Place the 2 DIV markups after whatever banners and etc. are at the top of the page. Start with the "nav" DIV and follow it by the "para' DIV which will fill in to the right of "nav". For this example we'll place a few links in "nav" DIV. The "mailus.gif" IMG will go with all the content into the "para" DIV.

.html

<div id="nav">
<a href="http://FragosTech.com/resume.html">Resume</a>
<a href="mailto:fragos@gmail.com">Contact Us</a>
<a href="HTML-1.html">Back to Tutorial</a>
</div>

<div id="para">

</div>

The updated markup follows and the resulting page is 1-ex-10.html.

Javascript

HTML markup provides a sites content and structure. CSS defines the presentation or appearance. Javascript is used for control or behavior. Javascript can't read or write data on your computer. It can however read and write data called cookies on web site visitor PCs. It can also get input from the vistor and dynamically make changes to the HTML markup on the web page it was executed from. Learning javascript can be a daumting task but you don't need to learn to program to use it. There are a number of web sites that provide javascript routine for you to use. Some are even free. For our introduction to javascript I've seleted a bit of javascript that display's today's date. It came from JavascriptKit.com — there's lot's more there.

The program "today.js" is included in HTML-1.zip and is embeded into HTML as follows. 1-ex-11.html has been edited for you.

.html

Javascript like this runs in your browser with or without a web server. The "document.write" command dynamicaly adds today's date as HTML markup for display.

Domain & Hosting

So far we've been able to do quite a bit without having a real hosted site. To go farther we will need one. Some web features like cookies, a hosted data base and more functional development languages like PHP require a running web server. It's possible to install a web server on your PC but we might as well get our web presence. Many ISPs like Comcast give you a hosted web page. These ISP supplied home pages have size and other limitations. Although addressable on the web you also wouldn't have an Internet domain and might never be noticed by search engines. You really need to get your own domain and get it hosted by a hosting company like GoDaddy. You'll simplify the setup process if you purchase your domain registration from the hosting company. There are a number of reputable hosting companies you can choose from. I use GoDaddy. They provide everything you need at a reasonable price. They have served me well. They will miss no opportunity to offer you additional products and services for service.

Selecting your domain name is extremely important. It is or it relates to your brand. Brand frequently relates to products or the public face of the company. In my case as a freelance, I'm my own brand. The portrait used on the FragosTech home page is in a sense my logo and I use that image in blogs and forums as my avatar and my user name is almost always "fragos." The image is also on my business cards whose design ties to the FragosTech web page. Ideally "Fragos" would be my domain but although not used it's registered. You may need to create a new word to find an available domain. "FragosTech" worked for me because it ties to my brand and what I do.

There are people and companies that collect domains to resell. I can't imagine what the domain "sex.com" went for. When searching for a domain you need to be careful lest a domain troll register the name because they know you considered it. Never use a domain registration site to check for the availability of a domain. All registered domains are kept in the "Whois" data base. There is a specific protocol to access the data base. In Linux you can run "whois FragosTech.com" to see if it's registered and who owns it. Most systems have a GUI Network Tools application which amongst other things does whois. You could also just try the domain in your browser but that will only tell you it's hosted. It takes whois to see if it's registered even if not in use.

Assuming you choose GoDaddy, you will be registered for a customer account with an account number, password and 4 digit pin. When you purchase hosting they will set you up a hosting account that has a separate ID and password which is used for development access to your web pages. You will have an option of Microsoft or Linux hosting. I "highly" recommend you choose Linux. For under $100 you can get a registered domain and hosting for a year. Additional domains can be hosted via that package. I host three. There's an additional fee for registering each additional domain. There are higher priced packages that offer dedicated hosting and larger bandwidth allocation. You aren't likely to need these higher priced packages in the beginning and may never. GoDaddy will always be willing to upgrade you to a higher priced package if you generate a lot of traffic. There are numerous extra cost options which you also don't need at this stage of the game. Some of these you can get for free from Google and others free web help.

Let's for example say you've registered the domain "FragosTech.com". Your web site would be addressed by web surfers as "http://FragosTech.com". Your web pages are accessed for development with the FTP, File Transfer Protocol. Your FTP host address would be "ftp.FragosTech.com" and your ID and password are those of the hosting account. It's normal procedure for you to have a folder or directory on your PC that matches the folder organization used on the FTP server. FTP clients that run on your PC will open with a local folder on the left and the network folder on the right. Operation at this point is similar to a 2 window file manager. Files transferred between those two locations are mostly ASCII character files and use the ASCII transfer mode. Images and compressed files are stored as binary and you'll need to select BINARY transfer mode for those. If you're a Firefox user the FireFTP extension does nicely. On Ubuntu Linux I like the standalone package "gftp". FTP is one of the original Internet protocols and any FTP client should work.

The home page of your web site should be called "index.html" because that is the assumed file name when you address a web site by it's domain alone as in "FragosTech.com". The full web address of my home page is "FragosTech.com/index.html". That full address wouldn't normally be used. Knowing the folder structure on my site I can directly address any web page. For example, I have a sub folder called "HTML" that has all the files and web pages for this tutorial. I can skip my home page and directly address "http://FragosTech.com/HTML/HTML-1.html". When viewing any page of a web site the browser location bar will have the full web address of that page. Your viewers are more likely to use the navigation scheme you coded into the web site than by typing full page addresses.