Quick Navigation:
- Introduction
- Step 0: Setting Up Your Environment
- Step 1: The Basic Structure of An HTML File
- Step 2: Building Your First Page
- Step 3: A Practical Example
- Next Steps
Step 0: Setting Up Your Environment
Before you start working on websites, you have to get your environment set up. What does that mean? In general, it means purchasing and/or downloading the appropriate software and making sure you have the right browser(s) to test on.
The Right Browser(s)
You want to build web sites, because it is cool, right? Well then, fire up good old Internet Explorer 6 and get cracking, right? WRONG! Internet Exploder Explorer, whatever the version, has a long history of bungling website code and styles.
Obviously you want your websites to work in as many browsers as possible, but you will save yourself a lot of headache by developing in a better browser first, then tweaking your code for IE. We’ll get into that more in the next article with CSS.
There are a number of good browsers out there for you to use as your primary. I won’t get into a browser debate here, but any of the following browsers are good choices to use as an alternative to IE: Firefox, Chrome, Opera, and Safari. If you are locked into using IE for whatever reason, hopefully you will at least be using IE 8, which made a great deal of progress toward joining the ranks of "high quality browsers".
Your Code Editor
Now that FrontPage is no longer distributed by Microsoft, we can begin the healing process… and that doesn’t mean switch to DreamWeaver’s design view! DreamWeaver is a good quality product, but any time you develop a web page, you should be writing the code. I promise that anyone can learn to write basic HTML. Check out the W3Schools website for information on basic HTML code. They are a great resource for information.
So if I don’t recommend FrontPage or DreamWeaver, what should you use? That, dear reader, I will leave up to you. The key elements to look for are line numbers and (at least) basic HTML syntax highlighting. There are a number of great editors (free and paid) out there, but here are a few that I have used in the past and feel comfortable recommending:
Head on to the next page to read about the basic structure of an HTML file.
No related posts.
Pages: 1 2 3 4 5 6
Good Job!
I’m going to go ahead and mention HTML5 here, also found via the w3c site, as the standard a new designer should be starting with. The switchover is coming and most of the big-boy browsers already have support. Also, the faster we can kill Flash, the happier I’ll be.
Thanks! I appreciate the feedback.
I agree with you that HTML5 is on its way, and I plan to update this tutorial to use HTML5 instead of XHTML 1.0. However, since the spec is still in draft form and support is still (relatively) spotty, my preference is to stick with XHTML.
That being said, I don’t plan to wait forever for HTML5 support and the draft. If everyone does that, nobody will ever implement it. Once the spec gets to a fairly stable state and is a bit better supported, I’ll make the switch and start recommending it myself.
What’s your reason for suggesting that images be inside paragraph tags? To me it seems like that’s a presentational choice (block level, top and bottom margin, etc…) rather than structural.
Good article though. 8^)
The main reason I am advocating that they be inside paragraph tags is that in this article I don’t get into discussing the <div> tag. Since every element must be within a block-level container, it made the most sense to recommend putting them in paragraph tags.
The next article (covering CSS, mostly) will cover more HTML, including divs.
I don’t think many people realize the number of disadvantages that go along with creating free websites. Hopefully this article will shed some light on the subject.
Don’t make the same mistake I did. After this nightmare, I vowed to never go the “free route” again. Creating your site from scratch with its own dot com name is affordable and definitely worth the small investment.
Parking your site at a free host is often like building a house on sand. It may be quick and and it may seem easy at first, but I can almost guarantee you it won’t last long.