Below is a basic template for an empty HTML Document.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
</html>
HTML documents start with a DOCTYPE
declaration that states what version of HTML is being used, which tells the browser how the read the code below it to render the page. If the webpage were written with a different markup language (i.e. XML, XHTML), it would tell you here.
After the DOCTYPE
, we see the start of the Root Element. EVERYTHING - all content - that you want presented on this page and all information about how you want that information to be organized and styled goes in the root element, and it is demarcated by <html>
and </html>
.
The root element begins by indicating which language the document is written in; and in this basic template, en
tells us we are writing in English.
Within the root element of the basic template below, you'll notice the two main sections of all HTML documents - a head section (demarcated by <head>
and </head>
) and a body section (demarcated by <body>
and </body>
).
The head section contains basic information about the file such as the title, keywords, authors, a short description, etc. This is also where you will link to your CSS Stylesheet.
The body section contains the content of the page including paragraphs, images, links, and more, and indicates how this content is to be structured on the page.
Create a folder called html_css
on your desktop.
Open your text editor, type or copy and paste the template above into your text editor, and save as index.html
to the html_css
folder you just created.
Open a second file, type or copy and paste this same template into your text editor, and save as about.html
to the same folder on your desktop.
These are the first two pages of your new website!
Note: The index.html
is your default homepage. This is an industry standard, because web browsers tend to recognize the index.html
page as the opening page to the directory that is your website. See Resources for more.
Once you have both documents saved, open the index.html
through the Finder.
What happens?