Section 1: Starting an HTML Document
- Code: Select all
<!DOCTYPE>
All HTML documents begin with a <!DOCTYPE> tag. The <!doctype> tag lets the browser know what version of HTML the document is written in. We'll be writing our page in XHTML 1.0 Transitional. Go ahead and open up a text editor.
The doctype for XHTML 1.0 Transitional is:
- Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Put this at the very top of your document.
Next is the <html> tag. It defines the start of the HTML document. Every tag needs a start and end so add the following to your document below the <!doctype>.
- Code: Select all
<html>
</html>
So far your document should look like this:
- Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
</html>
Section 2: The <head> Tag
Next up is the <head> and <title> tags.
The <head> tag is used to house certain elements. It can contain the <base>, <link>, <meta>, <script>, <style>, and <title>.
The <title> tag defines the title of the web page. This will display at the top of the browser.
Lets give our document a title. Add the following to your document inside the <html> tags:
- Code: Select all
<head>
<title>My First Website</title>
</head>
You should now have the following:
- Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>My First Website</title>
</head>
</html>
Section 3: The <body> Tag
Now its time for the <body> tag. The <body> tag is where all the content in the document is written. The body tag goes below the <head> tags, inside the <html> tags.
- Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>My First Website</title>
</head>
<body>
</body>
</html>
Now lets add some content. Add the following inside the <body> tags:
- Code: Select all
<p>Hello World!</p>
The <p> tag defines a paragraph.
You should have the following:
- Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>My First Website</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Save your document. When you save it make sure to save it as .html. Naming it index.html would do fine. Open your HTML file in a browser. Congratulations, you just created your first web page.
Next Lesson: A Brief Introduction to CSS and Stylesheets.
![[facepalm]](./images/smilies/Facepalm.png "Face Palm")
