How to Really Build a Web Page
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
Next Steps
Hopefully by now you have a good grasp of the basic elements necessary to build a barebones web page. But this isn’t the end… this is only the beginning. In future tutorials, I plan to cover more advanced topics to help you flesh out your web page. Some of these will include:
Styles and CSS
CSS lets you keep your HTML simple and apply visual styles to your web pages. The next installment in this series will cover basic CSS and will build on the principles we learned in this article.
(More) Advanced HTML
There is a whole world of HTML tips and tricks out there, just waiting for you to grab hold! I will cover more advanced HTML tags, continuing to build upon the code we created here.
Javascript
Javascript gives you the ability to do a great many things with your content. With basic HTML and CSS, you can have a great looking static website, but when you throw JS into the mix, you give yourself the potential to create dynamic content that the user can interact with. I plan to focus (at first) on using the jQuery javascript library, which has a shallow learning curve and a large support base to draw from.
Final Thoughts
I hope you enjoyed and learned something from this tutorial. Feel free to provide feedback in the comments. Don’t forget to share/bookmark this article!
If you want to play around with the files yourself, download the zip file below. It contains all of the code and sample files from this tutorial.
November 6th, 2009 at 10:09 am
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.
November 6th, 2009 at 10:22 am
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.
November 7th, 2009 at 4:30 pm
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^)
November 9th, 2009 at 7:50 am
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.
February 24th, 2010 at 5:31 am
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.