Wednesday, December 19, 2007

How To Build a Web Site ..

How To Build a Web Site ..


LEARN WEB DESIGN EASILY
You've come to the right website to learn web design- no previous experience is required! Only seven simple tutorials and a total beginner will be designing websites quickly.
WHO THIS WEB SITE IS FOR
How-to-build-websites.com is designed for total beginners and people who use programs like Dreamweaver, FrontPage, or other wysiwyg programs (wysiwyg stands for: "What You See Is What You Get") and now want to learn what's going on 'behind the scenes'.
To really understand web design, you need to learn HTML hand-coding; it's easier than you think!
WHY YOU SHOULD LEARN HTML
Tools like Dreamweaver are great, especially if you are building old-style web sites based on tables, sliced images, et cetera. But if you want to be able to build what I call 4th generation websites, then these tools will get in the way of you learning and will actually slow you down!
Learning to build your web sites using HTML will give you far better control over the process and ultimately your web sites. You will have a far deeper understanding of the web, and as a result you will create better web sites quicker - much quicker.
WHAT'S ON THIS WEB SITE
This web site is made up of 8 modules - seven are instructional and contain both articles and tutorials where module 8 wraps things up with a few tid-bits.
Here is the list of lessons:
Basic web concepts
Building a web page
Building a web site
Introduction to CSS
CSS tutorial
Advanced HTML
Introduction to JavaScript / Programming
Misc. topics related to web design
What is the web?

In a nutshell, the web is a whole bunch on interconnected computers talking to one another. The computers (on the web) are typically connected by phone lines, digital satellite signals, cables, and other types of data-transfer mechanisms. A 'data-transfer mechanism' is a nerd's way of saying: a way to move information from point A to point B to point C and so on.

The computers that make up the web can be connected all the time (24/7), or they can be connected only periodically. The computers that are connected all the time are typically called a 'server'. Servers are computers just like the one you're using now to read this article, with one major difference, they have a special software installed called 'server' software.

What is the function of server software / programs?
Server software is created to 'serve' web pages and web sites. Basically, the server computer has a bunch of web sites loaded on it and it just waits for people (via web browsers) to request or ask for a particular page. When the browser requests a page the server sends it out.
How does the web surfer find a web site?
The short answer is: by typing in the URL, or in other words, the web site address. So for example, if you wanted to find the web site www.killersites.com, you would type in the address into your web browser's address bar or maybe use your 'favorites' or 'bookmarks' link to Killersites.
There are other ways to find web sites (like search engines,) but behind the scenes web sites are all being found by going to the web site's official address. That brings us our last nerd detail: how does a website get an official address so that the rest of the web can find it?
Registering your domain name
If you ever wondered what the heck registering a domain was all about ... you probably figured it out by now! But just in case - registering a domain name gets you an official address for your web site on the World Wide Web. With this 'official' address, the rest of the web can find you.
Like your home address is unique in the real world, there also can't be any duplicate addresses on the Internet, otherwise no one would know where to go! In other words, domain names are unique addresses on the web.
Why does registering a domain name cost money?
If you want to have your own unique address on the web, your own domain name, it will cost a few bucks for each year you want to 'own' the name. The cost of registering a domain name ranges from less than $10 USD to about $30 USD per year. You can register a domain from 1 to 10 years.
The reason for the cost is that the central 'address book' of all the world's domain names needs to be updated - somebody's got to pay for that! You may have noticed that I just snuck in a little extra piece of information: the giant 'web address book' of domains.
That leads us to our last bit of nerd information: when you type in a website's domain name or click on a link that takes you to that domain name, your browser starts asking servers where that particular domain name is sitting (on the web) and the servers are then able to tell the browser where to go by referring to the giant address book I mentioned above.
Getting your web site 'live' on the Web
With the nerd background details under our belts, we can now learn about the two steps to going live on the Web:
Register your domain.
Rent some server space.
1. Registering your domain
There are many companies out there that allow you to register the domain name for your web site. Prices vary, as does the quality of service, but at the end of the day, they all handle the details of getting your domain name listed in the giant address book I spoke about earlier.
These days, you will find that many of the names you may be interested in registering are already taken. As I mentioned above, domain names have to be unique and many have been slurped up.
What is the difference between .com, .net, .org, etc.?
Practically speaking, there is really no difference these days. Search engines don't discriminate between a .COM address and a .NET address. The only thing you might consider is that people tend to type in .COM automatically since it was the first publicly known domain extension. So when registering a domain name, I would go for the .COM first and if it was taken, I would then try for any of the others. (.net, .org, .tv, etc. ...)
You probably guessed; a .COM address is not the same domain name of the same name with a different extension. So for example:
As such, each of the addresses can be registered separately.
2. Renting server space to 'host' your web site
You need to rent space on a server so that it can serve your web site to the World Wide Web; this is often called 'hosting'. Companies that provide this service are often called 'host' or hosting companies.
After you've registered your domain, all you need to do is contact a hosting company and tell them your domain name. They will be able to guide you through the process and you should be live on the web in no time - typically within a week or less.
A cheaper option
Some people may not want to buy a domain or pay for hosting because they only have a personal web site for fun or practice. You can still get your website live on the web by using a free hosting service that allows you to create what is called a 'sub-domain'. A sub-domain is just a domain that is part of another domain. So if killersites.com offered sub-domain hosting you could have an address like:
www.killersites.com/yourWebsite/
Or it could be like:
http://yourWebsite.killersites.com
Whichever way the free hosting service decides to do it. The point is that your web site domain is really a part of the parent domain, in this case killersites.com. Doing it this way, you don't need to buy a domain name, and you don't need to pay for hosting.
This is fine for fun or project websites, but if you are serious about your web site (say it's your business website) using sub-domains is like taking someone else's business card and writing your name on it! You figure it out ...
One last point, I've heard of free hosting services that will allow you to host proper domains with them for free and without annoying ads that other free hosts will insert into your pages. But I've never used them, and in my opinion you always get what you pay for. In the internet's recent past there was once a crop of free service providers that would give away access to the web via dial-up, they were notorious for bad service and all have since gone bankrupt ... I wonder why?
Moving your website files onto the server
After you have your domain name registered and your hosting service in place, the last step is to upload the website onto the server. You can transfer your web site to your host's server using an FTP program.
An FTP program is a type of software that is used to move files from one computer to another over the Internet. FTP is the acronym for: File Transfer Protocol; this just means that this is a 'way' of moving files.
There are several free FTP programs you can use to move your files and many HTML editors and web design programs like Dreamweaver have FTP capabilities built in.
One option you probably have to 'FTP' your files to the server is Internet Explorer. Internet Explorer 5 and up have an FTP program built right in. You can use it by typing in the FTP address of the server in the address bar preceded by the keyword: FTP. Here is an example:
FTP://207.35.15.69/yourwebsite/
Lesson 2: Building your first web page
In this 'hands-on' module we will be building our first web page in no time. We just need to quickly cover a couple of points beforehand to help get our feet on the ground.
The three ways you can build a web page

1. Use a pre-made template: WHAT IS A WEB DESIGN TEMPLATE?
A web site design template is a pre-made web designs which can be customized to reflect your company's branding. Website design templates can be found in various formats like Photoshop and HTML. Many times, these templates are compatible with HTML editors like GoLive, FrontPage, and Dreamweaver.
Web site templates can be very useful; they can be used by experienced web designers to 'jump-start' the creation of a website. They are also a way for people to put out great looking web sites quickly with little or no knowledge of HTML and web design.
2. Use an HTML editor like FrontPage or Dreamweaver:
HTML editors make building web pages feel like (to a certain extent) creating a document in Microsoft Word ... it's made pretty easy. But the downside is that you lose a certain amount of control of what you're doing and in some cases become dependent on the program.c
3. Hand-code your HTML in a text editor like Notepad:
That means you type in the HTML code yourself. This is the approach we are going to use here, because it's the quickest way to learn how to build web pages, and it is arguably the best way because you have the most control over what you're doing.
Ok, now that we know the advantages of hand-coding web pages, let's jump into just the bare minimum of theory, then we will build our first web page!
What are HTML tags?
HTML tags are specifically formatted text that creates 'markers' for web browser to read and interpret. These 'markers' tell the web browser what and how to display things on the web page. Tags are placed in and around text and images (text and images are some of the 'things') that your want to have appear in your web pages.
HTML has a whole bunch of tags (just like the alphabet has a whole bunch of letters) that the web designer can use to build web pages. As mentioned above, tags have a specific structure so that when the browser is reading an HTML page, it knows the tags from the normal text.
Tags are typically words or abbreviations of words placed between angled brackets. So for example: to make text bold, HTML has the 'bold' tag that looks like this:
This text will be bolded
Another commonly used tag is the paragraph tag:


Tag Diagram:
You may have noticed that HTML tags come in pairs; HTML has both an opening tag () and a closing tag (). The only difference between the opening and closing tags is that the closing tag contains an extra forward slash.
some EXAMPLE HTML tags that might make things more clear:
Make text bold
Makes text italic

Tells the browser that this text is very important - the browser usually makes this text really big


Creates an HTML table - think of a spreadsheet

I hope you can see the pattern in the list above.
HTML tags are not just for placing and formatting text, HTML tags can be used to include other things like: animation, video, Flash, audio, and even multimedia programs.
Comparing HTML code and the web page it creates
Let's start with a very simple web page to make it as easy for you to understand. First lets look at the final page: sample web page
Now that we've seen what the page looks like, let's look at the HTML code used to create the page.
What you should do now is take a little time and compare the HTML page and the page with the code that is used to create the page. Notice where the tags are and what they are doing.
SOME theory: the structure of an HTML page
An HTML page is divided into two major sections:
1. The body:: The body () section: this section contains all the stuff that appears on the actual web page when someone happens to come along with their web browser. We are talking about the actual text, images, flash movies, and so on that people will see. That, of course, means the tags used to format all this stuff are there too...
2. The head:: The head () section contains underlying information about the page which does not get displayed in the web page (except for the title of the page). It does, however, have an affect on how the web page is displayed.
You will notice that both the head and the body sections of a web site are marked in the HTML page with their respective tags: ( ) and ( ).
If the body tag creates the body of an HTML page, and the head tag creates the head of an HTML page, how do you create an HTML page itself? You guessed it, use the HTML tags:

The 'mother of all tags' is the HTML () tag, and like all tags it must have a start tag () and an end tag (). The difference between the start and end tags is the forward slash (/), but you already knew that .
Every web page MUST begin and end with the HTML tag, otherwise the web browser (programs like Internet Explorer) will not be able to display the page. You also have to have the head tags and the body tags. All the other tags are optional.
So the bare-bones HTML page must have these tags and in this order:


Title of your page





Lesson 2: Building your first web page
PART 1 PART 2 PART 3
Time to build your first HTML page by hand
I could go on with more theory and send half of you to sleep (trust me); instead you are now going to actually build your very first web page! One of the best ways to learn something is to actually do it, so don't worry if things are a little foggy for you right now, as we build the web page, things will start to clear up.
Step 1: let's write some HTML code
Open up a text editor like Notepad on Windows or TextEdit on the Macintosh and type this in:
Note: Here's a PDF that shows you how to create html documents on MAC


Your first hand coded page!


Hand coding web pages is easy!



I would like to thank everyone who helped me type this page.




Step 2: save the file as an HTML document
Save your HTML file (save it to your desktop so you will be sure to find it!) using your text editor's 'Save as' function and name the file webPage.html.
You can choose any name you want, as long as you follow these 3 rules:
1. Web page names cannot have spaces in them: 'web page.html' is no good but 'webPage.html' is perfecto.
2. The name has to end with either .html or .htm; by ending the file name this way you are telling the computer that this is a web page and that it should use a web page reader / browser to view it.
3. Don't use funny symbol like: $, %, ^, & in your page names. Stick to standard letters and numbers.
MAC OSX Notes: How to create an HTML document with MAC OSX (PDF)
Step 3: Marvel at your work and view your page
You should be able to now just double-click on the page or open it up with your web browser by going to its "File" menu, then select "Open file" and select your page.
You should be able to see your page in all its glory! Ok, not too much glory, but it was your first hand-coded page after all! If you don't see anything, then compare what you typed with the original I gave you and just go over the process again. You will get it if you give yourself a chance!
If you're not sure if what you created is looking like it's supposed to, you can check out the final page here and compare it with your own.
Conclusion
Now that we've built our first web page, we can now move on to building our first web site
Lesson 3: Building A web site
PART 1 PART 2 PART 3 PART 4 PART 5
Now that you've created your first web page and have some of the basics down, we can move onto building a web site.
Introduction: What is a website?
A website is just a bunch of web pages connected together through something called links. In HTML there is a special tag called (you guessed it!) the 'link' tag, and it looks like this in its most basic form:

And here is an example of the link tag with a destination filled in:
Go to killersites.com
It's safe to say that we have all used links when surfing the web. Whenever you click on a link that takes you to another page, you are using a link tag. The link tag is the most important tag in HTML; it makes the Internet interconnected!
In the above example, we see that the link tag points to the web site www.killersites.com and the text that is displayed on the web page is: 'Go to killersites.com'. So if you wanted to create a link that took someone to www.yahoo.com, for example, you would replace the www.killersites.com with www.yahoo.com, Yahoo's address.
Like all other tags, link tags have an opening tag () and a closing tag (). Links tags are a little more complex than the other tags we have seen so far, but I think that you can handle it!
Some of you may have noticed that there is some text in the link tag that comes before the web site address; the text I am talking about is this:
http://
This text tells the browser that the link is pointing to a web page. Sometimes links can point to other things besides web pages; things like movies, PDF files, and so on.
Absolute vs. Relative URL
To link pages in your web site from one page to the next you have a choice of using one of two types of addresses: absolute addresses (complete) and relative addresses (partial).
Before I go on, URL is a nerd's way of saying 'address'.
An absolute URL is the complete address of a page that can be found from any other location on the Internet. So let's say you have a page called contact.html on the root of your web site who's domain name is www.myStore.com . In this case, the absolute URL of the contact.html page would be:
'http://www.myStore.com/contact.html'
Ok, now I know I lost a few people because I used a word that I did not explain: 'root'.
When geeks talk about the root of a web site, they are taking about the base of the web site, the starting level.
The files (pages, images, etc.) that make up your web site are organized in folders just like any other files that you store on your home computer. Your host will give you a space/directory on their server for you to place all your website's files.
This space/folder assigned to you will be the 'root' of your web site. This means that as far as the Internet is concerned, anything (html files, images, other folders, etc.) in this folder is directly accessible by your domain name plus the name of the item. Huh! Even I'm a little confused! Perhaps a little example will explain this better:
Let's say that on the root level of your website, you had these HTML files:
index.html and contact.html
And in a folder called 'products', you placed whole bunch of other pages with one called 'bookcases.html'. You decided to put all your 'product' HTML pages into a 'products' folder to keep the web site more

Lesson 3: Building a web site
PART 1 PART 2 PART 3 PART 4 PART 5
Absolute vs. Relative URL - continued
Can you guess what the absolute URL would be for the web page 'bookcases.html'? For the domain name: 'www.myStore.com' it would be:
http://www.myStore.com/products/bookcases.html
Just think about it a little and hopefully it will sink in! If it doesn't right away, don't worry, it will come.
RELATIVE URLS
A relative URL is a partial address that is relative to the page where you placed your link. So if you were linking from the index.html page of this web site to the bookcases.html page your relative URL (address) would be:
/products/bookcases.html
And the actual link tag would look like this:
Check out our bookcases!
You are basically telling the browser that the HTML page we want to load is in the products folder. Play around with links and folders on your own web site and things will become very clear. This is important because if you get the address wrong, it won't load!
Ok, one more example to help you guys and gals out there: lets say you wanted to link to the page 'contact.html' from the 'index.html' page:
Contact us
Since the page 'contact.html' is on the same level as the page 'index.html', we need only include the name of the html file in the link address.
Summary of the process of creating a web site
Now that we got some preliminary theory out of the way (it's about time,) we can actually go over the 10 steps you'll need to take to build and bring a website 'live' on the World Wide Web.
1. Define the purpose of the web site
When starting a web site project, you must first clarify what the goals of the website are. Knowing your goals will impact the choices you make when putting the web site together and ultimately contribute to its success or failure.
This may sound obvious, but many web sites seemed to have been put together without the goal kept in mind. The result is a messy web site that is disorganized and harder to build and maintain.
So if, for example, the goal is to create an e-commerce web site that sells products, then as a web site designer you have to consider things like the following:
1. Do you need credit card processing capabilities?
2. Are you going to need a shopping cart system to take orders?
3. How many items will be sold on the web site?
This is just one example. The point to take away is that by defining the purpose you can better prepare and get the right tools / people for the job.
2. Diagram the structure of the website.
A simple diagram helps to visualize the web site for both you and your client - this assuming someone has hired you to build a website. Nothing special is really needed, just a series of boxes representing each page in the site with lines connecting them showing the linking strategy. A pyramid scheme is usually used to show the hierarchy of

((Note: I use the terms 'splash page' and 'home page' interchangeably most of the time. There is a subtle difference from the perspective of an old-time web nerd, but for the rest of the world, it basically is the first page someone hits when they visit a website.))
Lesson 3: Building a web site
PART 1 PART 2 PART 3 PART 4 PART 5
The process of creating a web site - continued
3. Write out the text for the web site
Before you start writing any HTML, you should (in your favorite word processor) write out all the text that you need to include in the website. Doing so will help you with the design process.
Another thing you should do is to make sure that the text is finalized before it gets to the web site; it is much easier to correct things in a word processor than in an HTML page.
4. Choose a basic layout that will be used on all pages
Armed with your website diagram and your web site's text (complete text!) you can now choose a basic layout for your pages. You can go crazy with some funky artsy web site (and sometimes it can work), but most of the time you should use standard layouts that people are used to:
1. Left side navigation.
2. Top navigation
3. Right side navigation.
When in doubt, think of how books are laid out.
5. Choose the basic color scheme and fonts for the site
Your next task is to start considering the basic colors and fonts that you're going to use. You want to choose a style that fits the subject of the web site. For example: pink doesn't do well for a hardware store, maybe some steel blues instead! The point to take away is to establish the style of the web site before you start creating pages, otherwise you may find yourself doing pages over again!
Later on in this tutorial I will teach you how to use an easy to use technology that makes web sites a breeze to style: CSS
Lesson 3: Building a web site
PART 1 PART 2 PART 3 PART 4 PART 5
The process of creating a web site - continued
6. Build out the website
With the before-mentioned completed, you're ready to actually start creating your web pages. So what you need to do is:
1. Take the structure you developed in steps 1 to 5 to create your web pages.
2. Link the web pages together.
Now is the time for you to practice a little and actually build a small web site! If you can't think of something, create one on your favorite movie with a page for each main character.
Remember that you only get good at doing something by doing it!

7. Choose a domain name
Once your website is built, you will need to get it on the web - that means you need a domain name.
All websites need a domain name, and your choice of a domain name can impact on how many people find your website, so choose carefully! Here are some points to remember when considering your choice of a domain name:
1. Domain names that tell you something about the web site are food for search engines and they help clue people in, too. If for example you were building a website for a hardware store, a domain name like 'discountHardware.com' is pretty good, it tells you everything about the web site immediately. If you called it 'bigSteel.com' instead, you can argue that we are not giving such a clear message of what the web site is about. Even if the hardware store was actually called 'Big Steel Hardware', I would go with 'discountHardware.com'.
2. Search engines such as Google will look at several elements of your web site to try and determine what your website is about. One of those key elements is the domain name; Google will look for keywords in the domain name that help the 'Google bot' (Google's automated snooper software) to categorize your web site.
One question that is asked often enough is whether the domain name has to have the same name as the business it is representing - the answer is no.
Lesson 3: Building a web site
PART 1 PART 2 PART 3 PART 4 PART 5
the process OF creating a web site - continued
8. Register your domain name
This can be trickier than you think, since many of the good domain names are taken. You can pretty much forget about single-word domain names like business.com and auctions.com; they are long gone! You will need to come up with combination words like 'how-to-build-websites.com'.
Today you have many more options for domains; in the past, businesses could only register .com's because .net and .org domains where reserved for special types of organizations. Those old restrictions are now gone, and there are a wide variety of extensions you can choose from:
.com, .net, .org, .tv, .biz, and several others including country codes like .ca (Canada), .us (USA), .co.uk (United Kingdom) et cetera.
In terms of the search engines, it makes no difference which ending (extension) you use.
Some people might argue that the first thing you need to do is to register your domain name, then build your web site. That may be true if your website design is impacted by the domain ... for some people this is the case, and for others it isn't. You can make that call for your own websites.
How do you know if a domain is already taken?
The quickest way to figure this out is to type in the domain name in your browser and see if it takes you anywhere. This is not always useful though because many domains have been bought but have no website!
That means the best way to figure this out is to go to your registrar. Every registrar will have a form where you can check to see if domains names are available just by typing it in.
The best thing about going to the registrar is that when you type in a domain name you are interested in their systems will not only tell you if the .com is available, they will also give you the scoop on all the other variations - a big time saver.
9. Find a hosting company: what to look for in A hosT
Today, hosting web sites cost much less than what they did just a few years ago, and that's a good thing. You can go from zero cost hosting to very pricey solutions, depending on your web site's needs.
What can affect the cost of hosting a website?
Traffic - more traffic can cost you more per month. But for this to affect you, you would have to have a pretty popular web site. Since you are just starting out, I wouldn't expect that problem for a while.
Extra features / services - you may need to use a database (for e-commerce) or need many email accounts, extra disk space to store all your websites files. Each host will have a list of plans that you can choose from depending on your needs.
In the end you have to choose the hosting company and hosting plan that is best suited to for your web site. Cheaper is not always best, but it may be good enough for you.
10. Upload your website to the hosting company's server
Once you created your web site, paid for your domain name, and picked your hosting company, it's time to upload the web site onto your host server for the world to see. Typically, you would use something called FTP to do this; you hosting company should be able to help you with the details when setting up your account.
Some quick tips to remember
1. Keeping web pages small - under 60k
2. Keeping content headers (H2 tags) clear and to the point.
3. Keep paragraphs small.
4. Keep contact information (email - phone) easily found in same place on all pages.
5. Keep look and structure of the web pages consistent across all pages.
6. Provide a 'Home' button to take the user back to the cover (a.k.a.: splash, home) page of the website.
7. Make sure links are always underlined. (Don't use CSS to remove the underline: big mistake if you do since people assume that underlined texts are links.)
8. The company logo should appear on every page in the same spot and it should always be a link back to the home page.
Now that we have a good idea of what building a website is all about, we can move on to the next subject: Using Cascading Style Sheets (otherwise known as CSS) to help us make our pages look great
Lesson 4: An Introduction to CSS
Our next step is to learn CSS (Cascading Style Sheets), a key tool for today's web designers.
What is CSS?
CSS is the acronym for: ‘Cascading Style Sheets’. CSS is an extension to basic HTML that allows you to style your web pages. An example of a style change would be to make words bold. In standard HTML you would use the tag like so:
make me bold
This works fine and there is nothing wrong with it per se, except that now if you wanted to, say, change all your text that you initially made bold to underlined, you would have to go to every spot in every page and change the tag.
Another disadvantage can be found in this example: say you wanted to make the above text bold, make the font style Verdana and change its color to red you would need a lot of code wrapped around the text:
This is text
This is verbose (wordy) and contributes to making your HTML messy. With CSS you can create a custom style elsewhere and set all its properties, give it a unique name and then ‘tag’ your HTML to apply these stylistic properties:

My CSS styled text


And in between the tags at the top of your web page you would insert this CSS code that defines the style we just applied:

In the above example we include the style sheet code inline, or in other words, in the page. This is fine for smaller projects or in situations where the styles you're defining will only be used in a single page. There are many times when you will be applying your styles to many pages and it would be a hassle to have to copy and paste you CSS code into each page. Besides, the fact that you will be cluttering up each page with the same CSS code, you also find yourself having to edit each of these pages if you want to make a style change. Like with JavaScript, you can define/create your CSS style in a separate file and then link it to the page you want to apply the code to:

The above line of code links your external style sheet called ‘myFirstStyleSheet.css’ to the HTML document. You place this code in between the tags in your web page.
To create an external style sheet all you need to do is create a simple text document (on Windows you simply right-click and select new -> text document) and then change it from a file type .txt to .css. You can change the file type by just changing the file names extension. The file name’s extension on Windows tells the computer what kind of file it is and allows the computer to determine how to handle the file when, for example, you try to open it.
You probably guessed it; CSS files are just specially (specifically) formatted text files much in the same way that HTML pages are. There is nothing special or different about the file itself, rather it is the contents of the file that makes a CSS document a CSS document.
When working with an external CSS document there are a couple of points to remember:
1. You DON'T add these tags in the CSS document/page itself as you would if you embedded the CSS code in your HTML:

Since the link in your web page connecting the CSS page to your HTML page says that you are linking to a CSS page, you don’t need to declare that the code in the page is CSS. That is what the above tags do. Instead you would just add your CSS code directly to the page:
.myNewStyle {font-family: Verdana, Arial, Helvetica, sans-serif;font-weight: bold;color: #FF0000;}
.my2ndNewStyle {font-family: Verdana, Arial, Helvetica, sans-serif;font-weight: bold;color: #FF0000;}
.my3rdNewStyle {font-family: Verdana, Arial, Helvetica, sans-serif;font-weight: bold;font-size: 12pt;color: #FF0000;}
In the above example I have created a series of CSS classes that can be applied to any HTML tag like so:

My CSS styled text


or

My CSS styled text


You will notice that in the above example I applied a CSS style to an

tag. This tag sets the size of the text that it wraps to a size that is preset in the browser (ex: 10 pixels). When you apply a CSS class to it, the CSS code overrides the default size that you would normally get with an

tag in favor of the size specified in the CSS class. So now you can see that CSS can override default HTML tag behavior!
In the above examples, I have CSS code where I define my CSS classes and then ‘apply’ them to various elements in the page. Another way to apply CSS is to globally redefine an HTML tag to look a certain way:
h1 { font-family: Garamond, "Times New Roman", serif; font-size: 200%; }
What this CSS code does is set the font style and size of all

tags in one shot. Now you don't have to apply a CSS class as we did before to any

tag since they are automatically all affected by the CSS style rules.
Here is another example of where I give the whole page bigger margins:
body { margin-left: 15%; margin-right: 15%; }
As you can see, you can redefine any tag and change the way it looks! This can be very powerful:
div {background: rgb(204,204,255);padding: 0.5em;border: 1px solid #000000;}
Set in the above code, any
tag will now have a background color of ‘rgb(204,204,255)’ and have a padding of 0.5em and a thin 1 pixel border that is solid black.
A few things to explain about the above:
Color in CSS can be expressed in a few ways:
1. In Hex -> for example: #000000 – this is black and this: #FF0000 is red.2. In rgb -> rgb(204,204,255) is a light purple-blue color.3. With named colors like: ‘red’ or ‘blue’
I typically use hex color since I am familiar with them or I just use named colors. So the last example can be rewritten like so:
div {background: green;padding: 0.5em;border: 1px solid #FF0000;}
So instead of ‘rgb(204,204,255)’ , I just specified ‘green’.
By using RGB (RGB is the acronym for: ‘Red Green Blue’) and Hex color, you can really get the exact color you want easily when you know your codes. Luckily many programs (like Dreamweaver) provide easy to use color pickers for you so you don’t need to know the values for the code.
In this last example I will show you the ‘super cool’ CSS code that allows you to create link roll-over effects without images:
:link { color: rgb(0, 0, 153) } /* for unvisited links */:visited { color: rgb(153, 0, 153) } /* for visited links */ :hover { color: rgb(0, 96, 255) } /* when mouse is over link */ :active { color: rgb(255, 0, 102) } /* when link is clicked */
The above CSS will cause your link to change color when someone hovers their mouse pointer over it, instant rollovers with no images! One important note with the above code is that it is important that the style declarations be in the right order: "link-visited-hover-active", otherwise it may break it in some browsers.
CSS is very powerful and allows you to do things that you can’t do with standard HTML. It is supported nicely now in all the modern browsers and is a must learn tool for web designers.
The above examples are just a small sample of what you can do with CSS, but it should be more than enough for you to start styling your pages nicely. Like with many technologies, CSS has a lot of capability that most people will not need to use often if at all. Don’t get caught in the trap of thinking that if there is some functionality/feature available, that you have to use it.
Lesson 5: CSS Tutorial
Part 1 PART 2 PART 3
Now that we have the first few lessons under our belts, we will be taking the next step towards total nerd glory with this first of a three-part lesson on creating a pure CSS web page.
Not just CSS styling, but CSS positioning too, that means NO TABLES required! Once completed you will be creating pages in sophisticated ways that 99% of web designers don't even consider!!
That means you will be able to put out pages with much less work; pages that load much faster and will be easy to update and print! Needless to say, you will have an advantage over the competition. BTW, all this is 100% standards compliant and should work in 99% of browsers used today.
CSS Template Layout - Part 1 of 3
In this easy to understand tutorial (I hope!) on creating web pages with CSS, I will not be able to show you everything there is to know about CSS, but when finished, you will be able to create a nice looking CSS based page. After completing this tutorial, you should have enough information to explore CSS and web page design even further.
You can download the CSS and HTML files we build in this tutorial: CSS files
You can check out what the page should look like here: CSS Example Page
Tags used in this CSS based layout:
Because of the power of CSS, we will be able to reduce the number of HTML tags we use in a page big time, all the while still being able to lay out great-looking pages using only 6 types (for lack of a better word) of HTML tags.
The tags we will use to layout the content:
1. The Heading tags which range from '

' to '
', are going to be used to mark/tag headings in our pages. So the most important heading will be wrapped in a

tag and the least important in a

tag. An example of a heading for this article:

CSS Template Layout


This tells the browsers and the search engines, too, that this page is primarily about: 'CSS Template Layout'
All browsers have a default size (for each tag) as to how it renders text placed between these tags. Many of these defaults can be unusable (especially

) because they come out too big. But never fear, CSS is here, and we will use CSS to make the text sizes more to our liking.
2.

The Paragraph tag is used to mark parts of the pages as being 'paragraphs', simple enough. Paragraph tags are what is called a 'block element'; that means that it acts like a block where a space is automatically inserted before and after each

tag pair. You will see it work in the examples coming up.
3.

    and
      List tags will be used to create our menus. The tag
        is the 'un-ordered list tag' that creates a list with bullets or other images/icons that do not specify or denote an order; hence the term 'un-ordered'. The other list tag mentioned (
          ) is the 'ordered list tag' and it creates a list that, instead of with bullets, marks the list items with numbers or letters. Code examples to follow.
          4.
          and
          : Div tags allow you to demark a portion of your page so that you can do things to it. Another way of saying 'demark a portion' can be 'to put into a container'. Once a part of your web page is in this
          container you can do all kinds of stuff like style it, animate it, make it visible or invisible, and so on. Div's represent the next generation of formatting HTML pages that, in many ways, are superior to tables.
          We will use div's to create containers for parts of our page. One div will be used to 'hold' our navigational menu and another div to 'hold' the main page.
          5. The most important tag in HTML: the 'link tag' or the 'hyperlink tag'. This makes text 'hyper' so that when we click on it we can load another page or activate/call some JavaScript (otherwise known as ECMA script).
          6. This is the 'image tag', which allows you to link to images so that they show up in our pages. In HTML, images are not embedded into the actual page, instead the image tag () only points to where the image is and the browser will attempt to load that image when a surfer loads your HTML page.
          That covers the HTML tags we will use in our layout! No need for table tags,
          tags, and nasty (and DEPRICIATED) tags.
          Creating the basic page template
          To work through the examples, we are going to need a practice HTML page.
          To create the practice HTML page do the following:
          1. Go to your desktop and create a simple text document. On Windows all you need to do is right-click and select: New -> text Document.
          This will create a simple blank text document on your desktop. Name the file: practiceHTML.htm. Windows will show you a warning asking you if you want to change the file extension. Just say 'yes'. Now right click on the file and select: 'open with' and select 'Notepad'. Once inside Notepad, paste in the template code found in the grey box below:
          (A simple way to cut/paste text in Windows is to press and hold the Ctrl key and 'c' for copy and 'v' for paste.)
          My Practice HTML Page
          This code forms the basic structure for all HTML pages. You can now cut and paste the code samples in between these tags:

          One last note: in between the you find what is called a comment. Comments are a way to place notes that cannot be seen in the browser . Anything in between the following characters becomes an HTML comment:

          Anything inside comments will be invisible in the browser. So in the above example the word 'and' would be invisible in the browser. It is a good way to leave messages about what your are doing in the page. It can come in handy later on when someone else is working on the page or even when you are, because you may (you WILL) forget why you did things a certain way.
          Building the CSS
          Once you have created the template page, create a folder and name it something like: 'myCSSwebsite' and then drop the HTML page into it. In that same folder, create a new text document and call it: 'myCSS.css'. Once created open that file and paste in this template CSS code and then save it:
          /* Generic Selectors */
          body {
          font-family: Georgia, "Times New Roman", Times, serif;
          font-size: 14px;
          color: #333333;
          background-color: #F9F9F9;
          }
          p {
          width: 80%;
          }
          li {
          list-style-type: none;
          line-height: 150%;
          list-style-image: url(../images/arrowSmall.gif);
          }
          h1 {
          font-family: Georgia, "Times New Roman", Times, serif;
          font-size: 18px;
          font-weight: bold;
          color: #000000;
          }
          h2 {
          font-family: Georgia, "Times New Roman", Times, serif;
          font-size: 16px;
          font-weight: bold;
          color: #000000;
          border-bottom: 1px solid #C6EC8C;
          }

          /**************** Pseudo classes ****************/
          a:link {
          color: #00CC00;
          text-decoration: underline;
          font-weight: bold;
          }
          li a:link {
          color: #00CC00;
          text-decoration: none;
          font-weight: bold;
          }
          a:visited {
          color: #00CC00;
          text-decoration: underline;
          font-weight: bold;
          }
          li a:visited {
          color: #00CC00;
          text-decoration: none;
          font-weight: bold;
          }
          a:hover {
          color: rgb(0, 96, 255);
          padding-bottom: 5px;
          font-weight: bold;
          text-decoration: underline;
          }
          li a:hover {
          display: block;
          color: rgb(0, 96, 255);
          padding-bottom: 5px;
          font-weight: bold;
          border-bottom-width: 1px;
          border-bottom-style: solid;
          border-bottom-color: #C6EC8C;
          }
          a:active {
          color: rgb(255, 0, 102);
          font-weight: bold;
          }
          /************************* ID's *************************/
          #navigation {
          position: absolute;
          z-index: 10;
          width: 210px;
          height: 600px;
          margin: 0;
          border-right: 1px solid #C6EC8C;
          font-weight: normal;
          }
          #centerDoc {
          position: absolute;
          z-index: 15;
          padding: 0 0 20px 20px; /*top right bottom left*/
          margin-top: 50px;
          margin-left: 235px;
          }
          Don't let the CSS freak you out, I will explain the important details and you will soon see how easy it really is. One last thing for you to do before I finish this part of the tutorial, we need to add some code to our HTML page.
          In between the tags you will need to insert this code:


          The Main Heading



          Go to the Web Designer's Killer Handbook home page and grab the practice HTML page that we will used as the starting template for this tutorial. You can find it under the heading: 'To create the practice HTML page do the following:'.
          Follow the instructions there and create your basic HTML page - and do it now!



          And in between the tags you will need to insert this:
          First CSS Tutorial


          With this in place we will be able to start styling our page. If you take a look at the HTML page now you may be surprised to see that we already started!
          If you haven't set the page up yet, please do so to make sure you have everything working thus far. Should you have any problems, go to the           Killersites.com Forum and post your questions.

          Lesson 5: CSS Tutorial
          Part 1 PART 2 PART 3
          In Part 1 we created a classic two-column layout with left side navigation using CSS and only a few types of HTML tags. Part 1 presented the code for the page and explained what HTML tags we were going to use. This week I will look at the actual HTML code we used thus far and the CSS.
          You can check out what the page should look like here: CSS example page
          Our page thus far is really very simple. As you may already know, all the content (text, images, Flash, etc.) that the user sees when viewing a web page is marked-up with HTML in-between the and tags. In this case we have this:



          The Main Heading



          Go to the Web Designer's Killer Handbook home page and grab the practice HTML page that we will use as the starting template for this tutorial. You can find it under the heading: 'To create the practice HTML page do the following:'.
          Follow the instructions there and create your basic HTML page ... and do it now!




          In the above code we see that we have 2 main sections, each enclosed inside
          tags. As you learned in Part 1 of this tutorial,
          tags are designed to be used to create a 'division' in the document or, in other words, create a container. We have created two such containers and given each of them a unique ID:
          Subscribe to: Post Comments (Atom)