Lesson 1 – The Basics
Websites are comprised of many different technologies. The foundation of those is HTML.
What is HTML?
HTML stands for HyperText Markup Lanaguage. It is the core of all web pages on the web today. HTML is processed by Internet browsers to render what you see when you view websites. Without HTML, no web page would be possible.
There are currently two “flavors” of HTML which are used among professionals, HTML 4.01 Strict and XHTML 1.0 Strict. There are also non-strict flavors of these (transitional), as well as XHTML 1.1. These are not used by professionals and should be avoided when possible.
The differences between HTML and XHTML are minimal. The essential difference is that XHTML is meant to be served by the server as XML (mime-type: application/xhtml+xml) whereas HTML is supposed to be served as text (mime-type: text/html). However, because many servers do not serve XHTML as XML, and because all but the most current versions of the modern browsers can handle this XML version, XHTML is often treated just like HTML, as text. Due to this, many web developers have returned to using HTML 4.01 instead of XHTML 1.0, though they are almost the same. Personally, I use HTML 4.01, but I will be covering both HTML 4.01 and XHTML 1.0 in these lessons.
The other difference is a minor syntax difference which is mentioned in the next subsection.
Basic Syntax
HTML is made up of a series of nested elements which give the HTML its structure. The basic syntax for these elements, sometimes referred to as “tags”, is a lesser than sign (>) followed by the name of the element, followed by any attributes, then ending with a greater than sign (<). Here are some examples:
Code
<img src="mypic.gif" alt="A picture of me."> <p> <div id="special">
Most elements also require a closing tag, which is simply a lesser than sign (<), followed by a forward slash (/), followed by the element name, followed by a greater than sign (>). These closing tags come after any data that is contained within the element. We’ll go over these various requirements later in our lessons.
The primary difference between HTML and XHTML syntax is that any elements that don’t require a closing tag must have a closing slash at the end of the element. The line break element (<br>) is one such element. To properly use it in XHTML, you must add a slash, like this: <br />.
The other key difference is that in XHTML, it is required that all attribute names must be lowercase. In HTML, it is not required one way or the other, and it is usually good practice to put them in lowercase regardless, so this is an almost unnoticeable difference.
Doctype
The Doctype (short for Document Type) of the page is what tells the Internet browser what flavor of HTML you are using. It is required for every page that you create. The two flavors we are following, HTML 4.01 Strict and XHTML 1.0 Strict have the following Doctypes. Select the one you wish to use and paste it into the top of your page:
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
The first is HTML, the second is XHTML. The Transitional flavors are meant to be used in old pages that are converting to the newer standards. They aren’t meant for use in anything new, so we won’t worry about them.
What every web page needs…
Every web page has certain requirements, along with a doctype. It must always contain an html element directly preceeding the doctype. The html element is what contains everything else in your web page.
Directly within the html element there must be a head element and a body element. The head element contains all of the information for your website that isn’t directly displayed within the browser window. The body element contains everything that is directly displayed.
The head element must also contain a title element, which is what specifies the name that appears in the title bar of your Internet browser.
So, the basic skeleton of a web page, using HTML 4.01 Strict is:
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Your title here</title> </head> <body> </body> </html>
Related Extra Credit
As you can probably already tell, there is going to be a lot of code, and a lot to keep straight, as far as telling which element is contained within which other element. Don’t fear! There is a way to make it very simple to tell. The answer? The tab key!
Each time you go down another level, or go inside of another element, have all of those elements moved over by one tab. This makes it much easier because you can go down and tell what is in which element just by scanning how far over they are.
Here is an example:
Code
<html>
<head>
<title>Demo</>
</head>
<body>
<h1>Demo</h1>
<div>
<p>This is only a test!</p>
</div>
<body>
<html>
Notice how I didn’t tab over the head and body, even though they are contained within the HTML. I don’t tab these over because I always know they will be contained within HTML, since that’s the only thing they can be contained within. It gives me a bit more space to work with. Often times on big, complex projects, I won’t tab over the first elements within the body or head either, because it saves me a little more room from the edge of my window.
What to Use
Web designers and developers have many software options to choose from to aid them in their development. I personally use the Adobe CS3 collection, namely Adobe CS3 Photoshop, Adobe CS3 Dreamweaver, and Adobe CS3 Fireworks.
Photoshop is the industry-standard for graphics creation, and provides all the tools needed for making stunning graphics.
Dreamweaver is one of the best web development tools on the market. It is typically a WYSIWYG editor (What-you-see-is-what-you-get) meaning that it has what is essentially point-and-click web page creation. The problem with this though, is that the code is often sloppy. However, even if you never use that method (like myself), the other tools it offers are more than worth the money.
Fireworks is a graphics program, but is vector-based (unlike Photoshop, which is raster-based), making it ideal for doing the actual layout and design of your website.
The only real problem with these products is that they are pricey. If you are going to do web stuff seriously, then by all means, please purchase these products as they will be a great asset. However, if you are just a hobbyist, there are cheaper (or free) alternatives which will serve the same purpose, though with less features to work with.
Textpad is an excellent, free text editor which you can use to make all of the code for your websites.
If you want to be able to upload your pages to a website, Filezilla is a fantastic free FTP editor.
For graphics creation, though rather difficult to use at first, Gimp is a free graphics editor that can compare to Photoshop.
For the HTML, CSS, and Javascript portions of these lessons, Textpad will be more than enough. For the PHP/MySQL portions, you will need a web host (don’t worry, we’ll list some free ones when we get there), so you’ll need Filezilla to upload the files. As for the design, we will talk a lot about theory and such, which doesn’t require an image editor, though when we get more advanced you will likely need an image editor.
Now that you know the bare basics of HTML, let’s move on to actually doing something, in the next lesson: Lesson 2: Say Something!
