CCS - Constructing the Web Pages Lesson

 

Constructing the Web Pages Lesson

You may have created web pages using HTML in a previous course. If so, your web pages were created using a plain text editor. Notepad is the free text editor for PC users and TextEdit is the free option for Mac users. Additional plain text editor options are available, but require you to download or purchase the program.

TextEdit and Notepad Image To find TextEdit on your Mac: 1. Go to your Applications folder or dock 2. Open TextEdit. 3. Click New on the file menu. To find Notepad on Windows: 1. Click on Start or the Windows logo on the task bar at the bottom of the desktop to show the Start menu. 2. Click on Programs or All Programs to show a menu of installed programs in Windows 3, Click on the Accessories folder to expand it. 4. Click on the Notepad icon to open the program.

Several versions of HTML exist. The latest version includes enhanced updates so we will focus on HTML 5 for this course. It is possible that while you are enrolled in this course, a newer version of HTML will become available. Just remember to access the W3C website to stay abreast of any updates.

Click here for an HTML Tutorial. Links to an external site.

Anatomy of an HTML Document

Documents written in a markup language need to have root, head, and body elements. Access the presentation below to discover information about the basic required elements for all HTML 5 documents.

In addition to the basic required elements, the HTML document will consist of content you desire to be viewed on the web page along with HTML code referred to as tags or the element name. As you create web pages using HTML 5 you will discover that many semantic elements are used.   Semantic elements provide information about the content.   The image below reflects a web page.   The table below the image defines the semantic elements that would be used to build the web page. 

 

Ergonomic Office Furniture

 

         Chairs                               Tables                        Desks                  

Choosing Ergonomic Furniture
(Article details would be included in this section.)

girl in chair

Figure 1: Ergonomic Adjustable Chair

© Team Joshua and Joanna 2017

 

Defined Semantic Elements

<header>

(Defines the header for the document)

<nav>

(Defines navigation links)

<article>

(Defines an article)

<figure>

(Defines self-contained content such as the image)

<figcaption>

(Defines a caption for the <figure> element)

<footer>

(Defines a footer for the document)

 

IMAGES CREATED BY GAVS