Before I begin I should just tell you what this tutorial is all about. At a web board called HackerHours.org a few people asked how to get started in the area of web design/programming/development. After answering the question a few times I though it might not be a bad idea to post a few links and some tips that I struggled through during my own process of learning how to program for the web.
The result of those thoughts is what you see before you. A tutorial that’s probably an over kill and lacking the information on how to code but letting you know what you should know to be a successful web developer. There are many great sites out there (some linked in this tutorial) that will help you learn HOW to code web pages but as for this tutorial, it’s simply a guide to help you on your way through the process.
The first thing I should do is break up the levels so that people can skip over the sections and links that they may not need. Feel free to skip ahead if you want, you won’t hurt my feelings.
Levels:
Novice – For those who’ve never designed a website to someone who’s made a few site mainly with a program like MS FrontPage.
Basic – Those people use to HTML and programming it by hand to those who are ready to start XHTML and CSS.
Proficient – Those people who have a good understanding of HTML and want to start XHTML and CSS.
Expert/Advanced – Those people who are ready to tackle those CSS bugs and hacks to make the great looking sites that work “perfect”.
Novice:
If you’ve never designed a web site before but are looking to start learning there are a few things that you’re going to want to know before you begin. Hopefully the following will be a helpful guide to getting you started.
1. It is a simple start, but it will get complicated.
When you first start designing a web site you’re going to look at it and think, “Boy this is so easy, anyone can do this!” Well you’re right. Anyone can do it and it is easy. However this will all depend on the quality of the web site that you’re making. The more you start to learn the more you will see that problems do come into play. So be prepared for that.
2. Program by hand.
It’s okay to use programs like MS FrontPage that will help you to design a site but it’s better that you start off learning the HTML code and doing it by hand. Why? It gets you prepared for later and can eliminate a lot of headaches later on. Don’t get me wrong I know people who use WYSIWYG (“What You See Is What You Get”) programs for web sites and they work very well. But you need to be able to set up those programs to work the way you want them to, and to do that you need to know what’s going on “Behind the Scenes.”
3. Learn the code.
The one thing that you’re going to want to do is learn HTML and its basics. You may have heard about XHTML and think that you should start there. While you could do that, it’s a better idea to learn HTML to since it provides the “base” for XHTML. Plus you may encounter a site later that’s in that old HTML code only and you’re going to want to know what you’re looking at.
4. Make your tags all lowercase.
No matter what you see on basic HTML sites…. Make sure that you do the following:
MAKE ALL YOUR HTML TAGS LOWERCASE
So use <html> and not <HTML>. It’ll prepare you for the future. Uppercase tags will work with pure HTML but if you plan to go on to XHTML this will prevent you from having to change your style later. Trust me…. I know how much of a pain that is.
For a good place to start with HTML you may want to check out the following sites:
https://www.w3schools.com/html/default.asp – W3 Schools HTML tutorial. A great place to learn and even try some of the HTML code.
https://www.w3schools.com/tags/default.asp – W3 Schools HTML tag list… great for reference when you can’t remember which tag you need to use.
https://arachnoid.com/lutusp/html_tutor.html – HTML for the Conceptually Challenged – a guide to learning HTML fast. Nice but could be a lot better, good though for a basic understanding.
What you should know from all of this
You’re going to want to make sure that you know the basic layout of an HTML page and some of the basic tags. If you’re not perfect at the tables, lists, and some of the more obscure tags that’s fine. What you want to know inside, out and backwards are the following:
HTML
HEAD
BODY
FONT (font tag - know some of its attributes like color, size, etc.)
P (paragraph tag)
TABLE (the basic structure)
TH (table header/heading)
TR (table row)
TD (table data)
H1, H2, H3, H4, H5, H6 (heading tags)
A (anchor tag)
IMG (image tag)
B (bold)
I (italicize)
U (underline)
SPAN (just be aware of it for the future)From those you can pretty much build good-looking “beginners” sites.