Yesterday, I started a six part series designed to help an absolute beginner learn how to build a web site. If you’re new to computing or you have no idea what skills and tools you need to become a web developer, this is for you. Follow my steps and suggestions and follow the links I’ve provided - these are a wealth of knowledge you’ll need to get started. These articles won’t teach you how to build web sites. Instead, it will teach you what skills you need to learn and where to find the information and resources to learn them. I hope you find it helpful.
If you haven’t read Day One - Tools Required for Website Development, do that first; then come back here and continue along.
Article Outline
Day One - Tools Required for Website Development
Day Two - Skills Required for Website Development
Day Three - The Most Powerful Learning Secret for Website Development
Day Four - Beyond Basics - Tools That Take Your Site To the Next Level
Day Five - Beyond Basics - Skills That Take Your Website to the Next Level
Day Six - Wrap-Up - Summary of Tools, Skills, Books, and Tutorials for Website Development
Day Two - Skills Required for Website Development
Step One - Learning HTML and XHTML
HTML stands for HyperText Markup Language.
XHTML stands for Extensible HyperText Markup Language (the X doesn’t mean it’s extreme, or refer to some sort of trans gender inside joke.)
HTML and XHTML aren’t programming languages - they’re markup languages. That means, you take standard text and you mark it up with “tags” your web browser can understand. Tags give your text structure and tell the browser everything it needs to know about your site. In a few days, anyone can learn enough HTML and XHMTL to build basic web page or even a whole site. It won’t be elegant or flashy at first, but as your coding skills expand, your pages will become more functional and beautiful. I learned HTML 5 years ago and I had my first site online about 3 days later.
Here’s an example of what the this sentence looks like to a web browser. HTML can be extremely simple and easy to learn.
<em>Here’s an example of what the last two sentences look like to a web browser</em>. <strong>HTML can be extremely simple and easy to learn</strong>.
Here are two types of tags surrounding the text. The first sentence is in italics, so we use <em> where italics start and </em> where italics end. We do the same thing for the sentence in bold, except the tags we use are <strong> and </strong>. Pretty simple, huh?
HTML and XHTML? Why two languages?
XHTML is just a newer form of HTML with slightly different rules for the tags you use. I suggest getting a firm grip of HTML first and then learning XHTML. The two languages are almost identical. Once you learn one, you’ll have no problem learning the other.
I suggest two methods of learning HTML - books and online tutorials.
The best HTML book on the market today is Head First HTML with CSS & XHTML by Eric and Elisabeth Freeman. The publisher is O’Reilly. Pick it up at your local book store or purchase it online at Amazon using the link I provided. A good HTML book is an essential tool and this one is the most thorough and approachable book on this subject for a beginner.
For web tutorials, I suggest HTML Dog. Follow the “HTML Beginner” tutorials and when you feel comfortable, move on the the intermediate lessons.
Another great site for HTML resources and tutorials is Webmonkey. Follow the link, “HTML Basics” in the “Authoring” section of the how-to library.
Step Two - Learning CSS
CSS stands for Cascading Style Sheets.
HTML gives your web pages structure; CSS gives them style. CSS is a stylesheet language that is written as a separate document from your HTML pages. The CSS stylesheet describes what every element on your web pages will look like. Elements like text color, fonts, size, and background images or colors are all separated from the HTML structure.
Here is a short sample of some of the CSS for the pages on the page you’re reading right now:
p.center { text-align: center !important; }
p.bottom { margin: 0 !important; }
p.unstyled { font-size: 1.4em; }
.flickr_blue { color: #007ae4; text-transform: lowercase; }
.flickr_pink { color: #ff2a96; text-transform: lowercase; }
You can use HTML without ever learning CSS but there is a reason web developers use it. At some point your web pages will grow in size and in quantity. If you want to change the colors or fonts for your site and you use HTML only, you’ll have to manually change each and every tag for those fonts and colors, on every page - this is a major pain in the butt. If you use CSS as a separate document, all you have to do is change the stylesheet once and all your pages change with it. CSS is flexible and a major time-saver. Your web pages will also load faster when you use CSS.
I suggest learning HTML and XHTML first, then progressing to CSS as you become more comfortable coding your pages. A web site without CSS is like life without laughter - you can live without it, but it isn’t much fun.
I recommended Head First HTML with CSS & XHTML because it covers everything you need to know, including CSS. This book has it all!
Both HTML Dog and Webmonkey are good resources for CSS tutorials. Once you’re an HTML master, check out cascading style sheets!
That’s It for Day Two
The resources I’ve pointed you towards will keep you busy for days and weeks to come. Come back to join me for tomorrow’s article - The Most Powerful Learning Secret for Website Development.