For this lesson task, you need to create a basic HTML structure.
- In Adobe Dreamweaver, open up the index.html file you created in the previous lesson task. If you do not have one, then create a new document now.
- Make sure the HTML file is saved as index.html in the folder structure you created for the lesson task on planning the structure. Note that the tile of the page can be different from the file’s name. You always need to name at least one file index.html, as a browser will look for such a file to load first. It does not have to be your home page, but this is standard practice.
- Now, start adding some tags. It is perfectly fine if you don’t add any information between the opening and closing tags for now, just focus on the different tags that will make up the structure of the webpage. Your HTML file should have the following content:
- <!DOCTYPE html> – this should be the first line in the document.
- <html>, <head> and <body> elements.
- Page title – note: the <title> element must sit within the <head> element.
- <header>, <main> and <footer> elements, these must sit within the <body> element.
Almost all of the elements you will use have opening and closing tags. Typical «newbie» mistakes include forgetting to close your tags. Check your work!
Take a screenshot of the HTML coded document to post to your blog.
You have created an HTML document with the following content:
- <!DOCTYPE html>
In one or two sentences, describe the function and meaning of each element and, where applicable, state in which parent folder you are expected to find the element.
<!DOCTYPE html> – States what kind of document is is, for example this is a html document.
<html> – Defines the root of a HTML document. Often the main parent in the document.
<head> – This tag contains metadata (information) for the document. Used as a instruction for browsers on how to display the content. This will not be visible on the webpage.
<body> – Everything that is visible on the webpage is going into the body section. The body is the child of the html parent.
<title> – Defines the title of the document.
<header> – This section usually contains the logo, navigation etc.
<main> – Specifies the main content of a document inside the «body». This is the child of the body parent.
<footer> – This is where all the footer information inside the document/ section is placed, such as copyright, policies etc. This will be the child of the body parent.