Beginning HTML
A Template
<!doctype html lang="en"> <html> <head> <meta charset="utf-8"> <title> Document Title </title> <meta name="bla" content="bla2"> </head> <body> <h1>Web Page title</h1> <h2>Web Page Sub-title</h2> <article> <h1>Article Heading</h1> <section> <h1>Section 1 heading</h1> </section> <section> <h1>Section 2 heading</h1> </section> </article> </body> </html>
Copy this code into a file called template.html and open it with a web browser. You should see this.
The Structure of an HTML Document
An HTML document is made up of elements.Elements
- Normal Elements : These elements can contain other elements.
- Text Elements : These elements do not contain other elements. They just contain text.
- Void Elements : These elements do not contain other elements. They contain nothing.
Elements are written in HTML using tags. You can check your HTML for valid syntax here.
Style
Now look at:
<!doctype html lang="en">
<html>
<head>
<meta charset="utf-8">
<title> Document Title </title>
<meta name="bla" content="bla2">
<style type="text/css">
h1{
color:red;
}
</style>
</head>
<body>
<h1>Web Page title</h1>
<h2>Web Page Sub-title</h2>
<article>
<h1>Article Heading</h1>
<section>
<h1>Section 1 heading</h1>
</section>
<section>
<h1>Section 2 heading</h1>
</section>
</article>
</body>
</html>
We have added some style in the header:
<style type="text/css">
h1{
color:red;
}
</style>
This means h1 tags will all appear red.
You should see
this.
