HTML and CSS Reference
In-Depth Information
Code Validation
No matter how careful we are when writing our code, we will inevitably make
mistakes. Thankfully, when writing HTML and CSS we have validators to check
our work. The W3C has built both HTML (
http://validator.w3.org/
) and CSS val-
idators (
http://jigsaw.w3.org/css-validator/
)
that will scan code for mistakes. Val-
idating our code not only helps it render properly across all browsers, but also
helps teach us the best practices for writing code.
In Practice
As web designers and front-end developers, we have the luxury of attending a number
of great conferences dedicated to our craft. We're going to make up our own conference,
Styles Conference, and build a website for it throughout the following lessons. Here we go!
1.
Let's open our text editor, create a new file named
index.html
, and save it to a
location we won't forget. I'm going to create a folder on my Desktop named
“styles-conference” and save this file there; feel free to do the same.
2.
Within the
index.html
file, let's add the document structure, including the
<!DOCTYPE html>
document type and the
<html>
,
<head>
, and
<body>
elements.
1.
<!DOCTYPE html>
2.
<html lang="en">
3.
<head>
4.
</head>
5.
<body>
6.
</body>
7.
</html>
3.
Inside the
<head>
element, let's add
<meta>
and
<title>
elements. The
<meta>
element should include the proper
charset
attribute and value, while
the
<title>
element should contain the title of the page—let's say “Styles Con-
ference.”
1.
<head>
2.
<meta charset="utf-8">
3.
<title>Styles Conference</title>
4.
</head>
4.
Inside the
<body>
element, let's add
<h1>
and
<p>
elements. The
<h1>
ele-
ment should include the heading we wish to include—let's use “Styles Conferen-
Search WWH ::
Custom Search