A Quick Introduction to (X)HTML and CSS
Whether you want to be a web designer or a well-rounded blogger, you need to know the basics of (X)HTML and CSS. They work hand in hand, so I figured I’d make one series of posts that teaches both of them together. This first post will just cover some definitions and background info. At the end, there’s also a slideshow on how to make, view, and edit HTML and CSS files.
Note: I’ll be updating this with a video tutorial in the future, to make it a more thorough intro.
What Is (X)HTML?
HTML (Hypertext Markup Language) is a computer language — more specifically, a markup language — used to add information and objects to a web page.
Now, XHTML (Extensible Hypertext Markup Language) is pretty much the same thing, but it’s a newer and stricter version of HTML. It’s essentially a cross between HTML and the general-purpose XML (Extensible Markup Language).
People often use “HTML” to refer to both HTML and XHTML, but I prefer to use “(X)HTML” when I’m referring to both. This series will teach you how to write both HTML and XHTML, but I recommend using HTML, at least while you’re still learning. Later I’ll make a tutorial explaining all the differences between the two.
What Is CSS?
CSS (Cascading Style Sheets) is a stylesheet language, a type of computer language used to specify how a web page should be presented. CSS can control font sizes, colors, line spacing, borders, positioning, and more.
Style sheets are great because they separate the content from the presentation, keeping everything organized and easier to edit. To see the power of CSS, just take a look at CSS Zen Garden.
How to Make HTML and CSS Files
First, you need a plain text editor like Notepad. There are lots of other text editors out there, but stick with something simple for now.
To create an HTML or CSS file on Windows, open Notepad and save the file as “filename.html” or “filename.css” and include the quotes around the name. Then just double click the HTML file to view the page with your default web browser. To edit the HTML or CSS file, open it again using Notepad. (By the way, both XHTML and HTML use a “.html” file extension.)
For the less computer-savvy, here’s a slideshow with pictures and step-by-step instructions. (You can view it full-screen or download it on SlideShare.)
Now you’re all set to learn XHTML and CSS! They’re both simple and straightforward, so you’ll be able to make your own websites in no time.
