Create electronic documents (called web pages) that are displayed on the World Wide Web.
Key Concepts: 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
https://www.slideshare.net/osamaggeris/html-week7-2019-2020-by-engosama-ghandour
https://www.youtube.com/watch?v=mQz7ORGzV3I&list=PLOB0DtE2PK79oPI-Na9H9UY4LSzUXgNB2&index=3
https://www.youtube.com/watch?v=_It4HG3j53U&list=PLOB0DtE2PK79oPI-Na9H9UY4LSzUXgNB2&index=4
https://www.youtube.com/watch?v=fDM9WkIJUh4&list=PLOB0DtE2PK79oPI-Na9H9UY4LSzUXgNB2&index=5
1. Agenda
1- Warm up revision about Algorithm 10 min
2- ppt teacher demonstrate about HTML5 15m
3- Video about What is the importance of HTML5 real life 5min
4- Practical work Students divided in groups and use notepad ,
explorer to create very simple portfolio web page 30 min
7- Questions and answers as pretest about HTML5 5 min
8-Refelection 5 min
9- Home work 5 min
2. 2
Warm up Review
• What do each of the following symbols
represent?
(Answer on next slide)
3. 3
Answer
• What do each of the following symbols
represent?
Terminal
Input/Output
Operation
Process
Decision
Connector
Module
4. 4
Warm up Review
• Name the four flowchart structures.
(Answer on next slide)
9. Pseudo-Code: Repetition
• while-do
• Repeat zero or more times (check
condition before statement(s))
•
• General form:
• while (condition is met)
• statement(s)
• Example:
• while students ask questions
• Answer questions
•
10. 10
• What type of structure is this?
Warm up Review
(Answer on next slide)
21. 21
• Web page design applications such
as Frontpage , Dreamweaver ,
• Explorers such as IE , chrome , fire fox
, etc…
• Notepad
• Online website to design Web page
which give free subdomain name
and hosting area such as google ,
yahoo , tripod and etc …..
22. • Using on line resources for
html5 code , java script code
, css etc …
• Ex school w3
22
25. 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>
30. HTML documents
• Extensions htm or html
• txt by note bad or another web page
desiner for code creation or modification .
•Jpg ,Gif …. For pictures
• For web site folder there must be one
page which is the home have to be named
index.htm or index.html 30
31. Headings
31
Headings are defined with the <h1> to <h6> tags.
<h1> defines the largest heading.
<h6> defines the smallest heading.
<h1>This is a heading 1</h1>
<h2>This is a heading 2</h2>
<h3>This is a heading 3</h3>
<h4>This is a heading 4</h4>
<h5>This is a heading 5</h5>
<h6>This is a heading 6 </h6>
34. HTML link and image
To add link use the following
format
Note1 Elements consist of opening tag,
contents of the element and closing tag.
Note2 Tags have attributes.
<a href="nextpage.html">NEXT </a>
To add image use the following
format
Note Some elements/tags are singletons
<img src="logo.gif" width="100"/>
35. Practical work Students
divided in groups and use
notepad , , online resources
to create very simple
portfolio or school web
page 30 min
36. Check your email to Solve the
Online auto answered
quiz 15 min after
school the quiz will be
closed in 10:00pm
after
tomorrow
37. Conclusion
1.HTML-Elements /Tags (Start – End).
2.HTML Documents.
3. Headings h1 to h6 .
4.HTML- Links to include links.
5. HTML- Images to include image.
note to read the curriculum to
prepare for next session of week 8
37
38. Reflection
• What is your goal to accomplish in
next week End Using C programming
Language ?
39. Home work (s. proj.) 1
create a very simple portfolio web
page about your capstone which
should include 5 sentences and
one picture of 3d SketchUp
drawing describing your cap.
project and name it index.htm and
include it and the picture in folder
named with your name and class .
39
40. Home work (s. proj.) 2
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 .
40
41. Home work (s. proj.) 3
search and find away to
communicate what you achieved
from your home work 1,2
41
42. Resources
• watch a videos that explain different ways for
coding using HTML5 for creating web pages
and read in the following links :
https://www.youtube.com/watch?v=Rtww83GH
0BU
• Other materials:
https://www.sololearn.com/Course/HTML/
https://www.w3schools.com/css/default.asp
42