HTML and CSS
You have probably used so-called "What-You-See-Is-What-You-Get" (WYSIWYG) web page editor before. You select text, press the bold button, and voilà! Your text is bold. But what's really happening behing the scenes is that your editor is generating HTML and CSS code. Indeed, every page you view on the internet is built using HTML and CSS. In this guide, you will learn the principles of HTML and CSS and learn how they fit together to make a web page.
Contents
Basic Structure of a Web Page
Open up a plain text editor (like Notepad on Windows or TextEdit in Plain Text mode on Mac OS X) and insert the following:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Now save the file, and open it in Firefox. You should see the following:
(image here)
What you have just produced is the bare bones of every web page on the internet. Things to notice:
- The page begins with a DOCTYPE declaration. This is a mandatory part of a web page, and it tells the browser what version of HTML to use when rendering your page. In this case, the browser should use HTML 5.
- The rest of the page consists of tags, in a hierarchy as follows:
- html
- head
- title
- body
- p
- head
- html
Introduction to HTML
HTML stands for HyperText Markup Language. Notice that HTML is not a programming language, so it doesn't have classes, methods, variables, or anything else you may be used to seeing. Instead, HTML defines the content of a web page, and it uses tags to do that for you.
Tags
Tags define the content of your page. There are two types: content tags and empty tags.
Content Tags
A content tag is a container for other tags on your page, and it participates in the nesting hierarchy of a web page. The general format looks like this:
<tagname> Contents </tagname>
If you've used BBCode before in online forums, HTML should look familiar, except that it uses angle brackets (less-than and greater-than signs) instead of square brackets.
Empty Tags
An empty tag represents an element on your page that does not participate in the nesting hierarchy. An empty tag looks like this:
<tagname />
Although the closing slash is optional on empty tags, it is considered best practice to include it, and it also makes it more clear what's a content tag and what's an empty tag when reviewing your code.
Commonly Used Tags
Here is a list of commonly used tags in HTML. For a complete list, see the list at W3Schools.
Attributes
Both content tags and empty tags can have attributes that further define their functionality.
