Basics of Web Design - Part 3
Building your first HTML web page
Here’s what we will learn:
- The Simple Life. Using a pre-made Template
- Using an HTML editor such as Kompozer or Dreamweaver.
- Coding HTML by hand, the old fashioned way!
- Introduction to HTML tags
The Simple Life. Using a pre-made Template.
This is by far the easiest way to create a web page. So why not impress your friends and take the easy road to creating professional web pages!
If you are wondering what a template is, it is a ready made web site. Most of the time they need to be modified to fit your own distinctive look. And almost always you’ll be writing new copy. They can be found at places like:
I recommend these sites because they are styled with CSS. But we’ll cover CSS in later tutorial. For now, just know that you can’t do too much to mess up the design or layout with CSS templates when you are editing the page.
If you do a Google search for web templates and come across Photoshop templates, stay away from them for now. Just trust me on that. Get the basics of HTML and web design down first before you try and learn another complicated program.
The above mentioned sites have what you need. Theses free web templates are compatible WYSIWYG editors like Kompozer or Dreamweaver. If you don’t have an editor, I recommend getting Kompozer. It’s free and works very well!
Using an HTML editor such as Kompozer or Dreamweaver.
These programs are WYSIWYG editors. WYSIWYG is an acronym that stands for: What You See Is What You Get. It makes since when you use it. The basics of how they work can be similar to OpenOffice Writer, or MS Word.
They are great to use for beginners or professionals. You can pretty mush begin editing your website like a pro right away. But there are some drawbacks. The main one being, you lose some control of your design by not using HTML to make your page.
Which leads us to our next point!
Coding HTML by hand, the old fashioned way!
This is by far the best way to create your web pages. It most likely will always be due to the limitations of editors. HTML is easy to learn too! The first step to writing HTML is understanding TAGS.
Oh yea, you’ll want one more tool on your web design belt. Notepad ++. This free, handy text editor color codes your HTML code.
Introduction to HTML tags.
HTML stands for Hyper Text Markup Language.
HTML tags look like this: <html> </html>, <p> </p>, <br />.
Tags are stuffed inside those angle brackets so that a web browser knows to “parse” it. Simply meaning, the browser will “do” what is in the tag, and not show it on your screen. That means for you the HTML coder, you will need to be familiar with the different tags and what they do. And master them, so you can have full control over your web page.
Most of the time the what is contained inside the brackets are abbreviated forms of what they do.
Continue to Basics of Web Design - Part 4, for an HTML Tag list.