How To Learn Designing Your First Website
by: Siuchu Suga
In learning web design, HTML (HyperText Markup Language) is something you must know, WYSIWYG (What-You-See-Is-What-You-Get) HTML editor is something you must have and CSS (Cascading Style Sheet) is some big treasure to you which deserves burying yourself into it deeper and deeper.
HTML is a common language for building and designing website. It tells the Internet browsers like Internet Explorer or Firefox how to display web content on the screen via HTML tags. In fact, everything you see on the web is under the control of HTML. What is HTML editor? It is a software like Macromedia Dreamweaver or Microsoft Frontpage which helps you to create websites even though you know nothing about HTML.
WOW! Does it mean by using HTML editor, you need not learn HTML yourself?? NOT necessarily. Below I’ll explain why and will also talk about some learning tips.
HTML
As I told you earlier, everything you see on the web is under the instructions written in HTML. Therefore, HTML editors also create webpages using HTML. The difference is that when you use HTML editor, you just have to click the buttons to "draw" webpages as you see on screen (What-You-See) and then HTML editor writes the HTML tags for you to display the webpages on web browser in exactly the same form (What-You-Get). However, it always happens that HTML editors write clumsy HTML tags, especially when you amend the webpage layout again and again during your website designing process, which may possibly deter search engines from reading your web page and in turn poorly affect your search engine ranking. What's worse, your website cannot even be listed in search engines at all! The clumsy HTML codings will also increase your file size and hence the loading time, encouraging visitors to leave your website soon. Therefore, you should understand HTML to unable yourself to modify the HTML codes produced by WYSIWYG HTML editors. Besides, in the designing perspective, there are also some design limitations and restrictions using HTML editors when compared to free writing of HTML codes. If you would like some special design or custom look to your webpages, you are recommended to have some knowledge on HTML yourself. In more advanced level, if you are to do SEO (Search Engine Optimization) for your web page, you should know how to make use of meta tags like title, content, alt, header, etc. in order to attain better keyword positions in search engines. If you just happen to own a website designed by others, you should learn HTML in order to edit the context of your website without the need to depend on someone else in this simple but routine updating task. Or you have no website yet but you like to write articles to be displayed in others' websites, you also should learn HTML in order to create appropriate links in your articles for others' easy reference.
Tips: If you have already got some basic knowledge on HTML, you may study “Getting Started With HTML” which is the most popular free HTML tutorials online provided by World Wide Web Consortium (W3C) which develops interoperable technologies including specifications, guidelines, software and tools to lead the Web to its full potential. If you still find the above tutorials too difficult or boring to start with or your time being too limited, “One Hour HTML” is highly recommended for you. It is a practical program to take you step by step in learning HTML from the very beginning and it offers you hands-on HTML encoding experience instead of merely teaching you theories so that you could have already experienced creating webpage using HTML as early as in the first hour of learning.
WYSIWYG HTML Editor
Indeed, despite my understanding on HTML, like many other web designers, I like to use WYSIWYG HTML editor such as Dreamweaver a lot and in fact, I can't even think of living without it once I encountered it as it saves me so much time in writing the complex HTML codes and the best advantage is that i can immediately visualize the effect in the splitted WYSIWYG designing screen whenever I change the HTML codings above in the HTML encoding screen! I am not contradicting myself. In fact, the key to make use WYSIWYG HTML editor software is that you have to learn the software well and to use its buttons for quick and easy HTML editing yet you don't let the software generated HTML codes to take the control but it is you who know how to master all HTML tags and to make any necessary changes to the HTML tags in order to bring the best visual and seo benefits to your website. Among all HTML editors in the market, Dreamweaver and Frontpage are the most popular ones. Dreamweaver is very popular among professional web designers while Frontpage is popular for small enterprise users. Dreamweaver has more user-friendly features than Frontpage which include its seamless integration with Flash, its automatic generation of closing tags once you enter the opening tags, the fact that it would not automatically re-write your codings like Frontpage does when you save an external HTML page not created by Frontpage, etc. Despite less user-friendly features, Frontpage is a Microsoft Office's tool which many of you will be familiar with and it is fine enough for creating or editing websites for small projects.
Tips: If you have never encountered HTML editors before, you may download the free trial provided by Macromedia. There are a few good Dreamweaver tutorials in the market. Among those, “Tutorials-4-You” and “Dreamweaver Made Simple” are two more popular ones due to the interactive nature of their video tutorials, giving Dreamweaver beginners hands on experience in using Dreamweaver from the very beginning of the tutorials. For Tutorials-4-You, a free demo is offered for you to experience the tutorials yourself and you can choose the version of Dreamweaver in meeting your practical needs. For Dreamweaver Made Simple, you are offered free download of a few chapters of the videos plus the ebook. Why not giving a try? It's free and for sure you'll have a lot of fun!
CSS
Aha! So it comes the time for CSS. If you are using HTML editors like Dreamweaver, indeed you are using CSS and creating styles yourself without even your noticing it! Wait, so you may ask, why do I need to learn CSS when I am able to create styles even without my own notice using an HTML editor? I can just tell you the answer is - "magics". Yes yes, CSS is indeed a magic and it also creates many magics. But are you satisfied if you are just able to perform one of the many magics of CSS? Your answer is surely NO. Let me tell you what the CSS magics are.
CSS Magic #1:
- You no longer need to rewrite the same set of presentation style attributes like font color, background style, alignment, border, size, etc. repeatedly within the HTML codings but can group the set of attributes into a single style class within the stylesheet. In your HTML document, you just have to call it out using the style name. CSS is well designed to allow the separation of presentation style from the main content and a stylesheet can either be included inline as part of the HTML document or referenced externally as a CSS file. (So you may have already tried this magic from Dreamweaver)
CSS Magic #2:
- You now have great control over how your website looks and can change the presentation of hundreds or even thousands of your web pages by altering just one file (i.e. your stylesheet!) if it is referenced externally as a single source by your different web pages instead of being contained inline in each one of your web page. Presentation information including positioning, layout, font, color, etc. for your entire website can be contained in this single CSS file.
CSS Magic #3:
- You can eliminate the use of table to be nested inside some more tables for your web design layout anymore as you may now use the CSS file to control the positioning of all elements inside your website. Spiders no longer have to crawl through each one of your tables and page loading time can be much faster as visitors only have to download the lightweight stylesheet once and it is automatically reused for every page. What’s remained to be loaded is the actual HTML content which is now much smaller in size and hence your website can be made visible in a flash! What’s more, you can now get rid of a lot of complicated codes with tables and so your site code can be cleaner and neater for prior view and amendment.
CSS Magic#4:
- You can use CSS to place your important keyword phrases at top of your web pages which search engines love before other of your source code. In such a way, you can gain search engine ranking benefits as search engines like Google gives more weight to content closer to the top of your HTML document and now search engines can pick up the main content of your website first before your header images or navigation menus.
CSS Magic#5:
- You can use CSS to simulate some beautiful javascript effects like rollover buttons in your website design. Yet, you need not have any images visible on your html codes which will slow down your page loading time and you need not worry about visitors turning off javascript in eliminating pop-ups as for now, all are done just inside your CSS file instead of your HTML documents. Actually CSS can bring about much more than the above 5 magics. As I said in the first paragraph, learning CSS is not a "must" but you can certainly perform magics in your website when you know it more and more. Moreover, using CSS is a trend in web design and it is also conforming to future web standard in letting your website compatible with different browsers and making it much easier to be spidered by different search engines.
Tips: I myself am learning it right a way and I find myself like a magician whenever I learn to eliminate the long HTML tags and replace them using CSS! I have done many researches on CSS tutorials and I find “How To Master CSS” of such a high quality and it meets my needs so well! It is a CSS know-it-all, teaching me all I need to master CSS in simple languages and how to use CSS to its full potential. Its step-by-step training videos and comprehensive CSS book are my favourites and it is even used by school teachers in teaching web design in class! It’s really worth a try if you are to learn CSS yourself. There is also a 100% risk-free money back guarantee, as for other professional web design related tutorials that I recommended. But I’m sure you won’t need it after your first trial on the tutorial! If you want a free tutorial regarding some basics of CSS instead, I would recommend “Adding A Touch Of Style” which is also provided by the reputable World Wide Web Consortium (W3C).
Conclusion
Building and designing website is not as difficult as you think. It just takes you hours to start with but of course it takes more time for your further practices. However, it will become your valuable asset for life once you've acquired the skill and got to know the crack. Don't you hesitate anymore. Start learning it today!
If you want to obtain more information and resources about website designing tutorial, please visit
http://www.about-webdesign.comAbout The Author
Siuchu Suga, webmaster of About Web Design.
Want to learn more about how to design a good website and obtain more information on website design tutorial? Please visit
http://www.about-webdesign.comThis article may be freely distributed if this resource box stays attached.
