Using HTML Editors for HTML and CSS Coding

Using HTML Editors for HTML and CSS Coding

The HTML editor software we reviewed generally have both a visual (WYSIWYG or What You See Is What You Get) editor and a text editor. A visual editor allows you to drag and drop visual components of a website wherever you want them. It gives you the benefit of being able to create a site without knowing a bit of code scuh as HTML and CSS. A text editor shows the code and allows you to directly edit the HTML. With the wonderful ability of a visual HTML editor, why bother with a text editor at all?

By learning how to code HTML by hand, you have the ability to move between several site platforms, such as from a regular HTML page to a content management system (CMS). You can also learn how to troubleshoot your website if things go wrong. In short, virtual editors can t compare with the versatility that understanding HTML code can give you.


HTML and CSS (cascading style sheets) go hand in hand. Where HTML says,  This is the header (or logo banner) of the website,  CSS says,  The header is this size, shape and color.  Together with a little design and graphics, HTML and CSS can create a beautiful, professional website.

This exercise will walk you through creating a simple webpage with a header, menu, content area, sidebar and footer using HTML and CSS. It may sound like a lot to learn, but you ll soon find that it s easier than you think.

Specifying HTML and CSS with HTML Editors

HTML editors give you the option to either save a file as a certain language or to set the language and then save the file. HTML files have an .html at the end (called an extension), while CSS files have a .css extension.

1. Create a new page and save it as sample.html
2. Create another new page and save it as sample.css

New pages can generally be created by going to  File  on the top navigation menu and clicking  New  in the dropdown. For most HTML editors, there is a quick link button for creating new documents.

Using HTML Editors to Create a Simple Web Page

Webpages are built using blocks as placeholders for each part of the page. The body tags <body></body> create the first block. If you flip from text editor view to virtual view, all you ll see is a white, blank page. Everything else goes inside these tags.

Now, when creating a webpage using HTML and CSS, you first want to define each block of the page. You do this by using division tags, which are written like this:

<div> </div>

1. Open the sample.html file
2. Find the <body> and </body> tags.
3. Create five divisions, one for each part of the site.

HTML editor text view: HTML divisions 

When you flip to your visual editor view, this is what you ll see:

If you don't have a visual editor, you can also choose to open the file with your web browser.

Adding CSS

How do you combine HTML and CSS for beautiful websites? It all starts with classes and ids. An  id  is a name given to a single element. For clean code, an id can t be given to any other element. A class, on the other hand, can be given to any element you want to act the same way.

Using the example above, let s define ids and classes:

Notice that the main divisions have ids and the smaller elements have classes. Why? Because the attributes of the main divisions usually won t change on any page of the website; they ll remain the same throughout. However, you might want your title to be different on the front page or have a different layout for the content.

A  main  division has also been added, putting a container around the content and sidebar areas. Without this container, the placement of the content, sidebar and footer may not show the way you expect them to show.

Now open the sample.css file you created earlier. You have a completely blank page to work with. The first thing to do is define how big you want your site to be. You do this by setting a width to the body, like so:

 Body  indicates which part the CSS should be applied. The open and close brackets tell the browser where the code for  body  starts and stops. Because most want their site to be centered on the screen, you would use automatic margins (indicated in the screenshot), so it will always be centered.

You ll also want to set the width of each division. The reasoning is that some browsers, such as earlier versions of Internet Explorer, may not display these elements correctly without the appropriate settings.

In this example, we ve set borders so you can see what each element looks like and where it is. If you ve written the code exactly as demonstrated, your visual page should look like this:

Congratulations! You ve created a basic layout for a webpage using HTML, CSS and your HTML editor. With just this layout, you can begin to design your site, adding colors, font sizes, background images and more for a truly fantastic website.

At TopTenREVIEWS We Do the Research So You Don t Have To. 


More Top Stories