HTML Agenda for Creating Simple Web Pages

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

LO CS.1.05 - Create
electronic documents
(called web pages) that
are displayed on the
World Wide Web.
Lesson plan

Warm Up
Listen to this video
Offline
On line

Essential Question
what are the programs
which you can use in
creating web pages and
how ?

5
• 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 …..

• Using on line resources for
html5 code , java script code
, css etc …
• Ex school w3
6

HTML template
<!DOCTYPE html>
<html lang="en">
<head>
<title>STEM Education</title>
<meta charset="utf-8">
</head>
<body> hdgjadhgakf</body>
</html>

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>

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 13

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"/>

Practical work Students
divided in groups and use
notepad , , online resources
to create very simple
portfolio or school web
page 30 min

Check your email to Solve the
Online auto answered
quiz 15 min after
school the quiz will be
closed in 10:00pm
after
tomorrow

Warm up revision
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
17

20
<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.)

21
<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>

23
<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.)

24
<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>

Question ??
How to create nested
liste in HTML (ordered
– unordered )?
26

29
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>

30
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"

The div element
Listen to this video
Offline
On line

34
<div style="background: green">
<h5 >SEARCH LINKS</h5>
<a target="_blank"
href="http://www.google.com">
Google</a>
</div>

38
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

39
<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

Warm up revision
1.HTML- Lists).
2.HTML Attributes.
3.The Div element .
4.Web address .
40

Warm up revision
Note to read the
curriculum to prepare for
next session of week 8
41

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 .
42

search and find away to
communicate what you achieved
from your home work 1,2
43

Reflection
• What is your goal to accomplish in
next week End Using C programming
Language ?

search and find away to
communicate what you achieved
from your home work 1
45

Resources
• https://www.youtube.com/watch?v=Rtww83GH
0BU
• Other materials:
http://rlv.zcache.com/success_in_life_is_just_a
_div_tag_away_humor_flyerp24478692360690
8311b2pv5_
• 400.jpg
• http://www.w3schools.com/tags/tag_div.asp
• http://www.quackit.com/html_5/tags/html_div_ta
g.cfm
46

HTML Agenda for Creating Simple Web Pages

Recommended

Recommended

More Related Content

Similar to HTML Agenda for Creating Simple Web Pages

Similar to HTML Agenda for Creating Simple Web Pages (20)

More from Osama Ghandour Geris

More from Osama Ghandour Geris (20)

Recently uploaded

Recently uploaded (20)

HTML Agenda for Creating Simple Web Pages