Create google-sites by engineer and educator osama ghandour

Agenda
1- Warm up revision about HTML 10 min
2- ppt teacher demonstrate” google site” 15m
3- Video about What google site 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

LO CS.1.06 - Launch an
intranet for your project
(web site for your team)
without writing a single
code lines.
Lesson plan

Essential Question
1-How can you
create an on line
web page ?
2-Critique and
evaluate you peer
web site?

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>

Open this site
www.moe.gov.eg
6

Warm up revision
1.HTML5).
2.Forms.
3.addig images&links.
4. video & audio.
7

Open your previous web
page
10

Question ??
How to create a form
inside a web page
13

To send the form to e.mail
instead of database
15
<form action="/action_page.php" method="get">
<form action="/action_page.php" method="post">
<form action ="mailto:you@yourwebsite.com">
<form action="mailto:you@yourwebsite.com">

The code for Audio and
Video
18

What We’ll Cover today
 What students can create
 Setting up a Google Sites account
 Creating pages
 Adding graphics
 Editing pages
 Adding links
 Creating a wiki

Watch a video
Listen to Create a web page in 5 m
Offline
On line

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
about HTML after school
the quiz will be closed in
10:00 pm after
tomorrow

Website Creation
Using Google Sites
Lars Leader, Ph.D.
Curriculum, Leadership, & Technology
Valdosta State University
lfleader@valdosta.edu

Sample Web sites
 http://sites.google.com/site/
americanfolktales/
 http://sites.google.com/a/
valdosta.edu/gap-year-
experience/Home
 http://sites.google.com/site/
interviewerresources/home

Getting started
 Create a Google Account
https://google.com/accounts
 Go to Google Sites
www.google.com/sites
 Click “Learn more” and watch video
 Look over Example sites
 Log into your Google Account

Creating a homepage (1)
 Click Create new site.
 Name your site (appears in header on
each page--so consider carefully).
 In Share with section, choose Everyone
in the world.
 Choose a site theme.
 Type in codes and click Create site.

Creating a homepage (2)
After homepage appears, click
on More actions and select
Page settings.
 Deselect Show page title box in
Page Settings window.
 Click Save to see changes.

Page editing
 Click Edit page.
 Create a title for the page.
 Select your title, then use editing
tools to change font size.
 Create an introduction for your
Web site.
 Click Save to see changes made.

Adding graphics
 Find/save a graphic (e.g. Phillip Martin clip art).
 At your Google Sites page, click Edit page.
 Position cursor on page to insert the graphic.
 At the Insert menu, select Image.
 Click Browse, select the file, and click Open.
 Click Add Image.
 Click on the graphic to display an editing bar.
 Size and position the graphic using the options.
 Save. Then at More actions, select Preview.

Creating another page
 Click Create page. Then name the
page.
 Click Create Page. Then Save.
 Click More Actions, then Page
Settings.
 Deselect Show page title. Click Save.
 Click Edit page.
 Create a title for the page. Add
text/graphics.
 Click Save. Select from More actions
to Preview the page.

Adding external links
 Copy URL of external page.
 At one of your site pages, type a
name for the link.
 Select the link name.
 Click Link.
 Select Web address.
 Type or paste the URL.
 Click OK.

Creating a wiki
 Click More actions and choose Share
this site.
 Type or paste into Invite people input
box the email addresses of collaborators.
 Make sure as collaborators is selected.
 Click Invite these people.
 Click Return to site.
 Collaborators can add comments and
edit/change the site.

Google gadgets & other
content
 In Edit mode, a variety of content can be
added to the page by selecting from the
Insert menu.
 Google apps are near top of the menu.
(Create content in the app beforehand.)
 Google gadgets are listed at the bottom.
(Set up the gadget when inserted.)

Summary and closing
 Setting up a Google Sites
account
 Creating pages
 Adding graphics
 Editing pages
 Adding links
 Creating a wiki

Exit ticket
Write about 2
skills you gained
today?

Home work
 Design web site for your STEM
School with three pages at
least with brief information
about STEM Education and
including embedded
multimedia ? Home work will
be evaluated according the
disrupted rubric

Create google-sites by engineer and educator osama ghandour

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Create google-sites by engineer and educator osama ghandour

Similar to Create google-sites by engineer and educator osama ghandour (20)

More from Osama Ghandour Geris

More from Osama Ghandour Geris (20)

Recently uploaded

Recently uploaded (20)

Create google-sites by engineer and educator osama ghandour