WEBSITE DEVELOPMENT

WHAT IS A WEBSITE?

 A website is a collection of documents known as a

webpage that contains information of words,
images, audios and videos.
PURPOSES OF A WEBSITE

 Sell products and services

 Post and find information on the web
 Provide knowledge
 Communicate with each other, etc.
 HOW DO COMPUTER PROGRAMMERS BUILD A
WEBSITE?

 Write codes
Common tools:
 HOW DO COMPUTER PROGRAMMERS BUILD A
WEBSITE?

 Use a browser in viewing the output of the codes.

 Register domain name.

https://depedcavite.com.ph/
 Purchase web hosting service
Example: Zoom Web Host
OBJECTIVES:
At the end of the session, the participants are
expected to
 Create their own learning resource website
 Learn how to share and collaborate with the
website they created.
GOOGLE SITES TUTORIAL
GOOGLE SITES
 A website creation tool offered by Google
through G-suite.
 To create a team-oriented site where multiple
people can collaborate and share files.
 It makes building a website as easy as editing a
document.
1. Log in to your google drive.
2. Create a new google sites
Google Sites Interface
3. Type the site name and the title page.
4. Click on Add logo.
5. Upload a picture you want to use for a logo.

If you are using a photo program that shows the size in pixels, for best
results, the logo height should be at least 112 px.
6. Click on Header Type and choose Banner
7a. You may upload a photo or select an image for the
site banner. You may use .png, .jpg or .gif type of file.
7b. You may upload a photo or select an image for the
site banner. You may use .png, .jpg or .gif type of file.
8a. Add more pages to your site.
8b. Type a name for your new page.

The page added automatically appears

on top of the banner.
8c. You may rename the page by double clicking
on its current name and type the new name.

*In deleting a page,

simply select the page
and hit on delete key on
your keyboard.
8d. More options can be done with the page by clicking
on the 3 vertical dots next to the name of the page.
A preview of the site with the added pages.
 Recap

✓ Site name
✓ Page Title
✓ Logo
✓ Banner
✓ Pages
9a. Start adding contents to your site.
Double-click the page where
you want to add content Images
to show the shortcut tools.

Embed Upload
Text

Drive
9a. Start adding contents to your site.

To add contents, you

may also utilize the
available tools in the
Insert Menu.
 Inserting Text
Double-click the page where
you want to add text. Click Just click the box and enter new text.
on the text icon as shown
below.
 Selecting a Layout
On the right, click Layouts and choose a different layout for your sections. Then
begin adding the contents.

5
 Inserting a Youtube Video

2. Search the video

3. Click on the chosen video

1. Click on
YouTube

4. Click on Select
Changing Theme

After adding some of the contents,

you may also change the theme.
Each theme comes with a preset
background, color scheme, and font
selection.

In this example, Vision theme is

selected.
 Inserting an Image
On the right, click Image.

Choose an option whether to

upload or select an image.
Inserting an Image Carousel
A carousel must have at least 2 images.
A preview of the home page with added contents.
 Recap

✓ Insert text
✓ Select a layout
✓ Insert a video
✓ Insert an image
✓ Insert images using image carousel
 Inserting Collapsible Text
Click on the collapsible text from the Insert Menu. Then enter new text.

1
2
 Inserting a Link on a Collapsible Text
Highlight the word/s where to insert link. Then click on the Link icon. Set the link. You may a URL
of another site or you may choose from the set of pages in your site.

2
1
Inserting a Lesson Presentation Created in Google
Slide

2. Select your
chosen slide
presentation
from the list of 4. The slide
google slides. now
appears on
the page.

Note: The google slide

1. Click on 3. Click on Insert must be shared first
Slides from the before inserting to the
Start Menu site page.
 Inserting a Video from the Google Drive

5. Click on the
chosen video
3. Click on File
Type

1. Click on
YouTube

2. Click on the magnifying 4. Click on Videos

glass to search the video from 6. Click on
Google Drive Insert
Inserting a Quiz created in Google Forms

Click on Insert

From the list of forms,

select what you want to
add to your page.

Click on
Forms Click on Insert
Inserting a Quiz created in Google Forms
using Hyperlink on a Text

Highlight the text and

click on hyperlink icon.

Enter a text
on the page.

Paste the link of Click on Apply

the shared form
 Inserting Links (Example: Quiz created in
Bookwidgets)

1. Open the
widget

2. On the top right, Click on 3. Highlight and copy the link

Share.
 Inserting Links (Example: Quiz created in
Bookwidgets)

5. Paste the copied

URL from bookwidgets

4. On the page, Click on

Insert and choose Embed
6. Click
Insert
 Inserting Folder

1. Share the folder from your

Google drive. 2. Change the sharing settings to
Anyone with the in and click on
Done button
 Inserting Folder

4. Locate the folder.

Click on it and select
Insert button.

3. Go back to
the page you
are working on.
Click Insert then
Drive.
A preview of a folder inserted in Google Site

All the files in the shared folder are downloadable.

 Inserting and Linking Buttons

2. Type in the name and

the link. Click Insert

1. Click on Insert and

choose Button
DepEd Commons
website will open, when
this button is clicked on.
 Inserting Calendar
Google Calendar and Google Sites are two different
applications. Once you have create this Calendar, you will then
be able to "insert" the calendar in your Google Site.

1. Go to calendar.google.com
Creating a Google Calendar

3. Click on the 3
vertical dots next to
the calendar you
created.

2. Click on the + sign to create a new calendar.

Creating a Google Calendar

3. Click on the 3
vertical dots next to
the calendar you
created.

2. Click on the + sign to create a new calendar.

 Creating a Google Calendar

5. Set access permission to Make

available to public
4. Choose settings
and sharing
6. Select month view.
 Creating an Event in Google Calendar

7. Pick a date on the Calendar. Add Title and set the time. Click Save.
Inserting Google Calendar to Google Sites

9. Select the calendar

you want display in
8. Choose Calendar your site.
from the Insert Menu

10. Click Insert

Inserting Google Calendar to Google Sites

11. Click on settings

12. Change the available
settings options.
Inserting Contact Information
 Inserting Map

2. Type the location

1. Insert Map 3. Choose Select.

 Inserting a Contact Form
1. Create a Contact Form in Google Forms
 Inserting a Contact Form

2. Go to Settings. Make
sure you uncheck
“Requires sign in”. Then
click on Save.
 Inserting a Contact Form

3. Go to Responses and click on New Spreadsheet

 Inserting a Contact Form

4. On the created
linked spreadsheet, go
to Tool and click on
Notification rules
 Inserting a Contact Form

5. Choose “A user submits a form”, and “Email – right away”. Click

on Save then Done.
 Inserting a Contact Form

7. Go to embed code

6. Click on Send

8. Click on Copy
 Inserting a Contact Form

9. Go to Insert >> Embed.

10. Go to Embed code then

paste the copied code from the
form. Then hit on Next button.
Reminders:

❑ You can upload a jpg., .png., or .gif image file from your
computer.
❑ To add other file types, use Google Drive.
❑ So the other file types from your computer should be uploaded
to Google Drive in order to insert those files in your Google
Sites.
10a. Share your site with others.

You may choose to put a check mark if you

want other editors to publish, change
permissions, and add new people.
10b. Share your site with others.

Type in the email address of the person you want

3 4
to collaborate with.

You may invite a person as published viewer

or editor. An editor has an access to change
the content of the site.
11. Publish your site.
12. Share your link so others can visit your site.

You may send the copied link of your website via email or chat.
How to transfer site ownership

Right click from the list of editors and

choose Make Owner.
Note:

❑ For any revision done on the Google Site, unpublish the site
and publish it again. Refer to step 11 on how to publish the
site again.
THANK YOU
JANICE.NODA@DEPED.GOV.PH