Introduction
Grade 11: Computer Applications Technology
September 11, 2022
Topic: HTML
Subtopic: Designing a simple HTML web page
Key questions for this lesson:
• What are the basic tags I need to create a web page?
• Does the order of the tags matter?
• Are there special tags for formatting the contents of a web page?
• How do I leave messages or reminders for myself and other people in the HTML code that wont display on the web page?
• What are the basic tags I need to create a web page?
• Does the order of the tags matter?
• Are there special tags for formatting the contents of a web page?
• How do I leave messages or reminders for myself and other people in the HTML code that wont display on the web page?
• What formatting can I apply to text in a web page?
• What paragraph formatting can I apply to text in a web page?
• What is the best way to design a simple web page?
Task
When designing a new web page you should design the layout on paper first.
This will help you decide on an appropriate layout and make coding much easier.
Task:
On a page, design the layout of a website you will design (This is to be scanned and submitted to my email).
Decide on the following:
•Title to your web page
•How many heading levels you will need and what your headings and subheadings will be.
•Whether any of the text needs to be highlighted using formatting such as bold, italics, colour, size and font face.
Process
After you had completed the design of your website, you need to create the code in HTML using the notepad++ application.
You can use the following link to play around with tags you may wants to use:
https://www.w3schools.com/html/html_intro.asp
The following website may help refresh your memory on the basics of web design, it will also benefit you when doing todays activity https://www.w3schools.com/html/html_basic.asp
The following video may help refresh your memory too. Please note that the application used in this video is Notepad...For this activity, you need to use the notepad++ application.
Evaluation
This activity will be marked on the following criteria:
|
Evaluation Rubric |
||||
|
Layout and design |
Poor
Layout and design are unorganized; background color is too dark/light; fonts either too big/small. |
Fair
Layout is somewhat organized; too many different font sizes; images are too big/small; background color and text somewhat contrast. |
Good
Layout is organized; more than three fonts sizes; size and quality of images is appropriate; great contrast between background color and text; format of each page somewhat fits monitor |
Excellent
Layout is well-organized; font size is in relation to the size of the page; size and quality of images is appropriate; great contrast between background and text; format of each page fits frame of monitor. |
|
HTML Tags |
Poor
There are more than 6 coding errors on the site as found by me or an online validator. |
Fair
There are 4-5 coding errors on the site as found by me or an online validator. |
Good
There are 1-3 coding errors on the site as found by me or an online validator. |
Excellent
There are no errors in the HTML, CSS or other coding on the site as found by me or an online validator. |
|
Use of Task guidelines |
Poor
Task guidelines are not followed. |
Fair
Sometimes fair use of task guidelines is followed. |
Good
Fair use f task guidelines are frequently followed throughout the Web page. |
Excellent
Fair use task guidelines are followed throughout the Web page. |
Conclusion
By the end of this lesson you should be able to
1. Plan the layout of an HTML webpage
2. Apply the plan created to HTML code on Notepad++
3. Successfully complete the HTML code on Notepad++
4. Save the file as HTML to launch via a web browser
Congratulations! You can now design and create a simple web page.