Introduction to HTML/CSS If you are the content provider, read HTML. If you are the graphic designer, read CSS. If you are a programmer and want to add dynamic effects to your web page, read JavaScript. But if you operate in OMO (one-man-operated) and are expected to create a reasonably good-looking website, you need to understand HTML, CSS and JavaScript. This is the reason that I combine both the HTML and CSS in this article as they are inseparable.
Free HTML5 CSS3 Templates, free download HTML5 CSS3 Templates. A HTML5 CSS3 template can help you build an amazing website. Introduce HTML5 CSS3 Templates. Free Magazine HTML5/CSS3 Website Template; Free SEO HTML5/CSS3 Website. Free Personal Blog HTML5/CSS3 Website Template. Please select file format to download.
To create an OMO website, I suggest that: • Understand HTML, CSS and JavaScript thoroughly. • Pick an authoring tool.
Use Dreamweaver if you can afford. Otherwise, find a free HTML text editor (such as NotePad++, Sublime). For programmers, NetBeans/Eclipse are good choice for HTML/CSS/JavaScript as they perform syntax checking and provide auto-complete.
• Design and organize your page. Decide on the look and feel of your website. How many columns? What are the major sections (e.g., header, navigation menu, main content, sidebar, table of content, footer)? Do you need a navigation menu or panel?
What is your theme (colors, fonts)? • Take a close look at your favorite websites!!! CSS is humongous and complex! You can't invent this wheel! Use Firefox plugin 'Firebug' (@ ) or the built-in 'Web Developer Tools' to inspect HTML/CSS of your favorite websites.
Alternatively, you can use a CSS framework (I recommend BootStrap) to jump-start your design. • Start with an initial CSS design.
Website design begins with CSS, NOT HTML?! Work on your CSS: • Partition your web page into logical section via (or HTML5',,, ), such as header, content, footer. Assign an id to that is unique (e.g., ' header', ' footer'.
Assign a common classname to sections (non-unique) that share the same style (e.g., ' entry', ' side-note'). Write the CSS id-selectors and class-selectors (e.g., #header tag-name. #footer tag-name. #menu tag-name.) for common tags (such as h1, h2, h3, p, a:link, a:visited, a:hover, a:active), in each of the 's. Basically, what I am saying is to design each of the sections by itself - a 'divide and conquer' strategy. • Create sub-classes for common styles, such as layout out tables and images and special effects (e.g., '.highlight', '.underline', '.center'). They could be used in and.
• There are many good and free CSS templates (or web templates) available online (just google 'CSS Templates' or 'Web templates'). Pick one that meets your taste to model after. You can also look at the CSS of any website that you find interesting.
Be aware of the Intellectual Property Right, do not use any images or graphics unless they are in the public domain. It is extremely easy to create one yourself with an imaging tool, such as PhotoShop, Element, Illustrator or even Paint. Alternatively, use CSS framework such as BootStrap and pick your favorite design from the samples. 
• Write your HTML pages. You may need to modify the CSS as you go along. The most challenging thing for an OMO web author is that he has to be concerned about both the contents and appearances at the same time, and can lose focus at times! • Repeat the previous steps until you are happy with your page's look and feel, layout, and most importantly, the contents - try not to create yet another insignificant website. Introduction to HTML What is HTML (HyperText Markup Language)?