Okay lets add content to our J-Prop Page!
4. Click the end of the opening <head> tag, and then press the Enter key to insert a new line in your text editor.
5. Press the Spacebar several times to indent the new line of code, and then type <title> The J-Prop Shop </title> as shown in Figure 1-4.
5. Press the Spacebar several times to indent the new line of code, and then type <title> The J-Prop Shop </title> as shown in Figure 1-4.
6. Click at the end of the opening <head> tag, and then press the Enter key to add anew line in your text editor directly above the opening <title> tag.
7. Type the following lines of code as shown in figure 1-5:
<!-- The J-Prop Shop Sample Page
Author: your name
Date: the date
-->
7. Type the following lines of code as shown in figure 1-5:
<!-- The J-Prop Shop Sample Page
Author: your name
Date: the date
-->
8. Save you changes and open your page up in Google Chrome. Remember to occasionally view this for errors!
9. We will now work on the contents of the <body> of the Web page. We will use structural elements which are the elements that define the major sections of a Web page. The following are HTML5 Structural Elements:
article – a subsection covering a single topic.
aside – content containing side issues to the main topic.
footer – content placed at the bottom of the page.
header – content placed at the top of the page.
nav – a navigation list of hypertext links.
section – a major topical area in the page.
To insert the HTML5 structural elements, return to the jprop.htm file in your text editor. Within the existing <body> element, insert the following tags:
<header>
</header>
<section>
</section>
<aside>
</aside>
<footer>
</footer>
Save your changes to the file.
article – a subsection covering a single topic.
aside – content containing side issues to the main topic.
footer – content placed at the bottom of the page.
header – content placed at the top of the page.
nav – a navigation list of hypertext links.
section – a major topical area in the page.
To insert the HTML5 structural elements, return to the jprop.htm file in your text editor. Within the existing <body> element, insert the following tags:
<header>
</header>
<section>
</section>
<aside>
</aside>
<footer>
</footer>
Save your changes to the file.
10. Structural elements can also be nested within one another. In the structure of this Web page, we will insert three article elements within the section element. Insert the following code within the section element:
<article>
</article>
<article>
</article>
<article>
</article>
Save your changes to the file.
<article>
</article>
<article>
</article>
<article>
</article>
Save your changes to the file.