Uploaded by Lilian Ming

HTML Source Code Example: Web Page Structure & Metadata

advertisement
Below is a web page viewed in a source code editor
At the top of the page is a < ! DOCTYPE> declaration. This is not an HTML tag but provides
information to the browser about what document type to expect
Head Area
Within the head area there is data about the data in the web page such as the title of the
document, the author's name and the character set to be used. This data, called metadata,
is not displayed when viewed in a browser. We can also add other commands like the page
title and how new pages will be opened.
From the image above we can see the following in the Head area
Commands
<title>Sea Webpage</title>
<base target="_blank">
Metadata
<meta name="keywords" content = "sea,coral,fish">
<meta name= "author" content = "Nicos Paphitis">
<meta name="description" content = "Tawara Balloon info page">
<meta name="viewport" content = "width=device-width initial-scale=1.0">
This sets the title which can be seen in
the tab of the browser
This tells the web page how to open new
web pages.
_self means open in same window.
_Blank means open in a new window
called _Blank
Keywords used by search engines to
determine which pages to return based
on their content
Name of the creator of the author
Description of what the webpage is about
Instructions to adjust the scaling of the
web page so that it is visible on different
devices.
To remember how to write these codes you can create a new HTML document in Dreamweaver, and
you will see most of the code you need there. Below is a screen shot of the HTML source code of a
new HTML document.
You can see that it contains the <!doctype html>, the title tags and a metatag. This gives you the
setup. When you enter a new Meta tag you will see a drop-down list which shows you what you can
add. Use this to remember the one you want eg. Name
After you click name, it gives you options for a name. You can choose one or enter your own.
After pressing space, you are faced with the next option where you can choose content for example
Add your content for keywords, author name, description etc and close the triangle brackets >
Download