You will use your text editor to add and style HTML5 semantic elements. You insert section, article, and aside elements in an HTML document. You then add a style rule to format each element. Work with the apply07.html file in the apply folder and the applystyles07.css file in the apply\css folder. You will also use professional web development practices to indent, space, comment, and validate your code.

1.. In the apply07.html file, add a section element within the main element.

2. Add the following heading within the section element:

HTML Basics

3.. Add the following two article elements within the section element:

What is HTML?

In this tutorial, you will learn about Hypertext Markup Language, or HTML.

Webpages are created using HTML, which is an authoring language used to create documents for the web. HTML consists of a set of spe- cial instructions called tags to define the structure and layout of content in a webpage. A browser reads the HTML tags to determine how to display the webpage content on a screen.

Your First Webpage

In this tutorial, you will learn how to create your first web- page.

You can create webpages using HTML with a simple text editor, such as Notepad, Notepad++, Sublime, Programmers Notepad, TextEdit, and TextWrangler. Notepad comes preinstalled with the Windows oper- ating system and TextEdit comes preinstalled with the Mac OS X op- erating system. TextWrangler also runs only on Mac OS X, while the other text editors run on Windows. A text editor is a program that allows you to enter, change, save, and print text, which includes HTML tags.

4. In the apply07.html file, add the following aside element below the main element:

Practice Makes Perfect

Webpage design is a skill learned over time. You must practice to improve.

8. In the applystyles07.css file, create the following style rules: section { background-color: #183440; color: #FFFFFF; margin-top: 4%; padding: 1%; } article { background-color: white; border-radius: 3em; color: #000000; margin-top: 1%; padding: 2%; } aside { background-color: #183440; border-radius: 3em; width: 25%; float: right; padding: 2%; margin-top: 1%; color: #FFFFFF; } 9. Add appropriate comments above each style rule.

the code is below.

/* Style sheet created by: Student's First Name Student's Last Name, Today's Date */

/* Style for body specifies a background color */ body { background-color: #CCFFCC; }

/* Style to create a fluid image */ img { max-width: 100%; margin: 1%; border: double 0.3em #000014; width: 100%; }

/* Style for the container centers the page and specifies the width */ #container { width: 100%; margin-left: auto; margin-right: auto; }

/* Style for the header specifies top margin, background color, rounded corners, and center align content */ header { font-family: Verdana, Arial, sans-serif; margin-top: 0.2em; text-align: center; }

/* Style for the main specifies a block display, text properties, margins, padding, rounded corners, and borders */ main { display: block; margin-top: 0.5em; padding: 1em; border-radius: 1em; background-color: #FFFFFF; box-shadow: .5em .5em .5em #404040; }

/* Style for the footer specifies font size, text alignment, and top margin */ footer { font-size: .70em; text-align: center; margin-top: 2em; }