For this lesson task, you need to create a basic HTML structure.
Part 1
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.
Ensure 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 web page. 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.
Screenshot:
Part 2
You have created an HTML document with the following content:
<!DOCTYPE html>
<html>
<head>
<body>
<title>
<header>
<main>
<footer>
In one or two sentences, describe the function and meaning of each element and, where applicable, state in which parent element you are expected to find the element.
<!DOCTYPE html> - aims to tell the browser what kind of document this is. It is the first thing that should be added.
<html> - is the main parent and it contains all the rest. It is the first brackets that we open in the document.
<head> - is the first child of the document and contains information (metadata) that will not be displayed on the webpage. it can contain page titles, descriptions of the page, styles, scripts, viewports, links, etc.
<body> follows the head and contains everything that will be displayed on the webpage. The body contains three main parts: the header, the main content and the footer.
<title> - this is the title of the page and it is not displayed on the webpage. We can find the title in the head section.
<header> - the header is the top part of the webpage that usually contains the logo, navigation, and additional website elements of big importance. We can find the header as the first child in the body of the HTML file.
<main> - the main part of the website contains the main information of the website. It can be found in the body section right after the header.
<footer> - the footer is the bottom of the webpage and it usually contains information about the brand like telephone number, address, and email. The footer is the last child of the body section and it is located after the main part.
Comments