Teaching HTML / WEB DESIGN in CAT _by Miss Saban

Introduction

Good Afternoon grade 11  HTML / WEB DESIGN

  1. Today we start with recapping on our prior lesson with html  / web design.
  2. We will be continuing with our being HTML / WEB DESIGN'. But today you will be using given the instruction and necessary information to create a web page by yourself.
  • A few things you should remember from our last lesson would be :
  1. What Is  a WEBSITE?
  2. What is a WEB PAGE?
  3. What is HTML?
  4. What is HTML used for?
  • To Refresh your memory :
  1.  A website is : https://www.google.com/search?q=what+is+a+website&oq=what+is+a+website&aqs=chrome..69i57j0l9.4876j0j15&sourceid=chrome&ie=UTF-8
  2. A web page is : https://www.google.com/search?q=what+is+a+web+page&oq=&aqs=chrome.0.69i59i450l8.15356490322j0j15&sourceid=chrome&ie=UTF-8
  3. HTML is : https://www.w3schools.com/html/html_intro.asp
  4. HTML is used for : https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics

Task

Your task for today will require that you familiarize yourself with the following notes (Attachment A), that was provided for you previously in our last lesson, you will be expected to create your own web page using the same tags that are provided. A  number of instructions will follow in order to complete your web page as instructed. SEE Attachment B !

Attachment A

Structuring a web page:

<html> …. </html> - Used when creating a webpage

<head> …. </head> -Used inside the html tags to insert the title of the webpage

<title> …. </title> - Used inside the head tags to give your webpage a title

<body> …. </body> -Used inside the html tags, and to place the content of the webpage

<p> …. </p> - Used inside the body tags, to create paragraphs in the contents of the body

<i> …. </i> - Used for Italics 

<b> …. </b> - Used to make text bold

<h1> …. </h1> - Used as heading sizes, Heading 1 is the biggest heading, going up to

<h6> …. </h6> - Heading 6 being the smallest

<br/> …. -  “Break tag “ Used inside the paragraph tags, forcing a sentence to start on a new line

<hr/> …. - Used to create a horizontal line

 

 

 

 

Process

Attachment B 

Activity 2

Using the notes given ( Attachment A) create a webpage using HTML, by following the instructions below, do only that which is asked to be created and understand that only these must be presented on your webpage, ensuring that all of you have the same input and output unless stated otherwise.

Note that the inverted commas are not necessary for this document.

Make use of indentation when creating this document.

  1. Create your document according to the HTML structure.
  2. The title of your web page must be “PETLAND”.
  3. Save your HTML document as “PETLAND.html” on your student drive”
  4. Your first heading within the body element of the document must be “ANIMALS”, using the heading 1 element
  5. Using the heading 2 element, create a sub heading called “ELEPHANTS”
  6. Below your sub heading “ELEPHANTS” insert paragraph tags
  7. Using Google, search for information on elephants, copy and paste a paragraph from the information found inside the paragraph tags. (Note that paragraphs will most probably differ to each other’s.)
  8. Create a second sub heading called “WHALES” using heading 2, include paragraph tags below this heading.
  9. Using Google, search for information on whales, copy and paste a paragraph from the information found inside the paragraph tags. (Note that paragraphs will most probably differ to each other’s.)
  10. In both paragraphs make use of two font styles ( bold and italics)
  11. A horizontal line should be placed below all your content, finishing off the activity.
  12. Open your web page using Google Chrome, to view the end result of your web page.

Evaluation

Solution to activity:

 

<html>

                <head>

                                <title> PETLAND </title>

                </head>

 

                <body>

                                <h1> ANIMALS </h1>

 

                                <h2> ELEPHANTS </h2>

                                <p>

                                                <b> INFORMATION </b> ON <i> ELEPHANTS </i>

                                </p>

 

                                <h2>WHALES</h2>

                                <p>

                                                <b> INFORMATION </b> ON <i> WHALES </i>

                                </p>

                                <hr/>

                </body>

 

 

</html>

Conclusion

After todays lesson I would like for you to do some self studying and play around with some new tags that I will be giving you, and for our next activity you should ensure that you familiarize yourself with the following tags :

Try to incorporate the following tags into your web page. NOTE that these tags are to make use of background colors!

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">Lorem ipsum...</p>

 

<h1 style="color:Tomato;">Hello World</h1>

<p style="color:DodgerBlue;">Lorem ipsum...</p>

<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

 

<h1 style="background-color:rgb(255, 99, 71);">...</h1>

<h1 style="background-color:#ff6347;">...</h1>

<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>



<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>

<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

Credits

Teacher Page