HTML & WYSIWYG Editors
Editors are generally available in two different versions or flavours. You have standard text editors - which incorporate easy methods of using, controlling and seeing HTML tags (using colour coding etc.,) but you’re still writing directly in HTML and not seeing the output - unless you view it in a browser. And then you have WYSIWYG editors (said as 'whizzy-wig'.)
NOTE: We like NotePad2 for simple text editing with code highlighting: http://www.flos-freeware.ch/notepad2.html
WYSIWYG stands for 'What You See Is What You Get'. This means you can edit in a visual environment - where you can see what the page will look like. A popular example is Adobe's Dreamweaver. WYSIWYG HTML editors are essentially like advanced word-processors or layout programs. You can add text, tables and graphics - and alter the layout and style - without ever typing any HTML code markup. If you've used Microsoft Word to create a document and added in tables, graphics and changed fonts and styles, then you’ve already experienced this. (And actually, Microsoft Word uses XML markup internally, in a similar way to HTML, to control how the page is laid out.)
To a lot of people, this sounds far more attractive than hacking through code-tags. And although WYSIWYG editors can allow you to construct basic web pages without ever knowing what's going on behind the scenes, you really do need to understand the HTML code behind them if you ever hope to produce anything more advanced.
Adobe Dreamweaver and other editors offer a split-screen mode, so you can also see the code as it's written for you while in WYSIWYG mode. And conversely, as you edit the HTML code, you can immediately see its effect on the layout. See image below...
XML (eXtensible Markup Language)
XML looks similar to HTML on the surface, but XML is essentially a standardised structure to store and present data. HTML is now being brought in-line with XML, but HTML uses fixed tags (whereas XML allows you to define your own tags - which is why it's called extensible.) XML is currently used to format a wide variety of data storage and outputs - so they can be read universally by a variety of different programs - including common examples like RSS feeds, Sitemaps, and CSS.
CSS (Cascading Style Sheets)
CSS is a style sheet language commonly used to describe the way that a markup language will look.
The upshot of this is that by combining HTML & CSS, you can create a web page that has a standardised way of looking, so as you add more pages and elements, they remain in keeping with your theme. By changing the CSS, you effectively change the look of all the HTML pages that use those elements. This is hugely time-saving, and all modern websites now use CSS as the way of defining their look and style. If you've ever used 'styles' in MS Word, then you've seen this in effect in a simplified form.
In the previous HTML example where we printed 'Hello there everyone', we could use CSS to define the style of the <body> area as having a black background (color #000000) with white text (color #FFFFFF):
<style type="text/css">
body {
background-color: #000000;
color: #FFFFFF;
}
</style>
Colours in HTML & CSS are based on standard RGB hexadecimal values. The 6 digits represent 3 pairs of 2 digits, with each 2 digit pair representing a number from 0-255 for the Red, Green & Blue values. 'FF' is 255, so the above is saying using 255 for red, green and blue, which gives white. '00' in all 3 gives black.
https://en.wikipedia.org/wiki/Hexadecimal
But CSS goes beyond basic typeface control and allows extensive control over layout, graphics and hyperlinks. Many modern website effects are generated through clever use of CSS and Javascript.
WikiLinks for additional research: http://en.wikipedia.org/wiki/Css