Create electronic documents (called web pages) that are displayed on the World Wide Web.
1. HTML - Elements /Tags (Start – End). 2. HTML Documents. 3. HTML Headings. 4.HTML Links. 5. HTML Images. 6. HTML Lists. 7. Attributes. 8.The div element. 9. Web addresses. 10. HTML Form Elements. 11. HTML Multimedia (sound, music, videos, movies, and animations). 12. HTML5
1. Describe the Web. 2. Recognize the job of HTML. 3. Understand the rules that describe HTML tags. 4. Install a text editor (Atom or VS Code). 5. Create a new HTML Code and save it. 6. Use HTML to write web pages (Syntax - Nested). 7. Format a paragraph using HTML. 8. Display a web page in the browser. 9- Differentiate between the block and inline elements in HTML. 10- Create a nested list in HTML (Ordered - Unordered). 11- Add a link (URL) in a web site. 12- Add an image and relative URL in a web site and Multimedia (sound, music, videos, movies, and animations) and add Forms. 13- Make validation.
1. Agenda
1- Warm up revision about HTML 10 min
2- ppt teacher demonstrate about HTML 15m
3- Video about What forms in HTML 5min
4- Practical work Students divided in pairs and use notepad or
Atom , explorer to create very simple html page web page30m
7- Questions and answers as pretest about HTML5 5 min
8-Refelection 5 min
9- Home work 5 min
2. LO CS.1.05 - Create
electronic documents
(called web pages) that
are displayed on the
World Wide Web.
Lesson plan
6. Favorite Sites
• overview for this example:
<!DOCTYPE html>
<html lang="en">
<head>
<title> </title>
<meta charset="UTF-8">
<style> </style> // for header and article and img
<script> </script>
</head>
<body>
content: header, article for each site
</body>
</html>
13. 13
<ol>
The ordered list is created with
the <ol> element.
<li>
Each item in the list is placed
between an opening <li> tag
and a closing </li> tag. (The li
stands for list item.)
14. 14
<ol>
<li>Chop potatoes into quarters</li>
<li>Simmer in salted water for 15-20
minutes until tender</li>
<li>Heat milk, butter and nutmeg</li>
<li>Drain potatoes and mash</li>
<li>Mix in the milk mixture</li>
</ol>
16. 16
<ul>
The unordered list is created
with the <ul> element.
<li>
Each item in the list is placed
between an opening <li> tag
and a closing </li> tag. (The li
stands for list item.)
17. 17
<ul>
<li>1kg King Edward potatoes</li>
<li>100ml milk</li>
<li>50g salted butter</li>
<li>Freshly grated nutmeg</li>
<li>Salt and pepper to taste</li>
</ul>
21. 21
Core Attributes
Id
Title
Class
Style
<p id="html">This para explains what is HTML</p>
<p id="css">This para explains what is Cascading Style Sheet</p>
<p style="font-family:arial; color:#FF0000;">Some text...</p>
<h3 title="Hello HTML!">Titled Heading Tag Example</h3>
22. 22
The class Attribute
The class attribute is used to associate an
element with a style sheet, and specifies the
class of element. You will learn more about the
use of the class attribute when you will learn
Cascading Style Sheet (CSS). So for now you
can avoid it.
The value of the attribute may also be a space-
separated list of class names. For example:
class="className1 className2 className3"
27. 27
Page Redirection
You can use <meta> tag to redirect your
page to any other webpage. You can also
specify a duration if you want to redirect
the page after a certain number of
seconds.
Example
Following is an example of redirecting
current page to another page after 5
seconds. If you want to redirect page
immediately then do not specify content
attribute.
Web address
28. 28
<head>
<title>Meta Tags Example</title>
<meta name="keywords"
content="HTML, Meta Tags, Metadata" />
<meta name="description"
content="Learning about Meta Tags." />
<meta http-equiv="refresh" content="5;
url=http://www.tutorialspoint.com" />
</head>
Web address
42. 42
Learn and practice through on line web sites
http://www.w3schools.com/tags/tag_div.asp
http://www.quackit.com/html_5/tags/html_div_tag.cfm
https://www.sololearn.com/Course/HTML/
45. Home work (s. proj.) 1
create a very simple web page
about one of your hopes or
favorites you should include 5
sentences and one picture
describing your it index.htm and
include it and the picture in folder
named with your name and class .
45
46. Home work (s. proj.) 2
search and find away to
communicate what you achieved
from your home work 1,2
46
47. Reflection
• What is your goal to accomplish in
next week End Using C programming
Language ?
48. Home work (s. proj.) 2
search and find away to
communicate what you achieved
from your home work 1 such as to
upload the pages you designed to
google site .
48