You are on page 1of 26

New Manor House School

Computer,
Information Technology
And Communication

2018- 2019
Unit 1
Lesson 1
Concepts and basics
Of
Websites
 Website:
Collection of one or more web pages grouped together under the same server, and can
be visited through a certain web address.

 Web page:
It is a document with electronic content on the internet which can be shown through a
web browser.
 Home page:
It is the opening page in the website through which other pages can be visited.

 The components of the web page:


1. Text. 2. Pictures.
3. Audio 4. Videos.
5. Hyperlinks.
 Static web pages:
It's a web page with contents that are previously prepared by the page developers. The
contents can’t be changed or edited by visitors. It is designed using HTML code.

 Interactive web pages:


It is a webpage that has a content allowing the visitors to interact with and manipulate.
This type is designed using HTML, JavaScript, PHP and others.

Exercises:
First. Complete the following:
- The website is ……………………………………….
- The webpage is……………………………………….
- The Homepage is …………………………………….
- The static webpage is ……………………………..
-The interactive webpage is…………………………

2
Second. Open this website http://www.egynews.net
-Identify the homepage.
- State the contents of the homepage [ text, images, video, hyperlinks,…]
-What type is the homepage: static or interactive ?
- Go through the site pages and identify the page contents, then decide if it is a static or an
interactive web page.

Third. Choose the correct answer of the following:


1. ………… is a collection of one or more web pages grouped together under the same
server.
a. Website c. Static web page
b. Web page d. Home page
2. ……………. is a document with electronic content on the internet which can be shown
through a web browser.
a. Website c. Audio file
b. Web page d. Home page
3. ……………… is the opening page in the website through which other pages can be
visited.
a. Website c. Interactive web page
b. Web page d. Home page
4. Interactive web pages are designed using ……………. Code
a. HTML c. java script
b. PHP d. all of the above
5. Static web pages are designed using ……………. Code
a. HTML c. java script
b. PHP d. all of the above
Fourth. Tick (√) in front of the right sentence and sign (X) in front of the wrong
one:
1. Web page is a collection of one or more web pages grouped together under the same
server. (…..)
2. Website is a collection of one or more web pages grouped together under the same server
(…..)

3
3. Web page is a document with electronic content on the internet which can be shown
through a web browser. (…..)
4. Static web page can be edited by the visitors. (…..)
5. Static web pages are designed using java script code. (…..)
6. Interactive web pages are designed using HTML Code. (…..)
Fifth. Write the scientific term:
1. Collection of one or more web pages grouped together under the same server.
(…………………….)
2. A document with electronic content on the internet which can be shown through a web
browser. (…………………….)
3. The opening page in the website through which other pages can be visited.
(…………………….)
4. A type of web pages that has contents is previously prepared by the page developer.
Contents can’t be changed or edited by the visitor. It is designed using HTML code.
(……………..………….)
5. A type of web pages that has contents allowing the visitors to interact with and
manipulate. This type is designed using HTML, JavaScript, PHP and others.

Sixth. Complete the following sentences:


1. Static web pages are designed using …………… code.
2. Interactive web pages are designed using ………… and …………. Codes.
3. PHP is used in designing …………… web pages.
4. HTML is used in designing ……………. and ……………… Web pages
5. List the components of a web page.
a. …………………………….. d. …………………………..
b. …………………………….. e. …………………………
c. ……………………………..
6. What are the types of web pages?
a. ……………………………… b. ………………………………

4
Lesson 2
Stages of designing and creating a website

Stages of designing and creating a website:-


1. Planning to create a website.
2. Design the web pages.
3. Prepare and develop web pages.
4. Implement web pages.
5. Publish the website on the internet

Plan

Publish Design

Prepare
Implement and
develop

First: Planning:
- In this stage, we draw a simple diagram of the web pages of the website, homepage and the
connected pages
- Decide the data and information to be used

Second: Design web pages


- This is the most important stage; we design the format and shape of the home page and
other pages.
5
- We set the format of the web pages (colours, background, font size and type, images and
video clips.
- Also we set the different hyperlinks inside the same page which connected with other
pages in the same website

Third: Prepare and develop


This stage consists of:
1. Prepare the text which will be added to the page using a text editor program and save
it in a folder.
2. Prepare the image files and save them in a folder.
3. Prepare the video and audio files and save them in a folder

Fourth: implementation
This is done using a programming language and HTML codes:
1. Convert the design into webpage.
2. Input data and files.
3. Create hyperlinks.

Fifth: Publish the website on the internet:-


- Choose a title, select a web address, decide the storage capacity on a server and publish
on the internet.

Exercises:

First. Complete the following sentences:


1. List stages of creating a website.
a. ………………………… d. ………………………….
b. ………………………… e. …………………………
c. …………………………
2. List steps of preparing and developing a website
a. ……………………………………………………………..
b. ……………………………………………………………..
c. ……………………………………………………………..
3. List steps of implementation stage when creating a website
a. ………………………………. c. …………………………….
b. ……………………………….
6
Activity: Design a plan for the website: (title and subject- no. of web pages- home page and
other web pages - data that will be shown)
- Design the shape of home page and web pages, design hyperlinks, design places to put text,
picture, video clips.
- Prepare text files, collect photos, prepare sound and video files.

An example of a suggested web site:

Home Page

Vision and Photo About


mission Album school

My School
(Home Page - About School - Photo Album -
Vision and mission - Contact Us)

Vision and Mission


Vision:to prepare a Photo Album About School
distinguished student
able to..

7
Lesson 3
Create and edit audio files
Audio programs:
They are software programs that enable the user to create and process audio files. They
contain tools for creating and editing audio files.
(Audacity):
It's an open source software for creating and processing audio files. It can be run on
different operating systems. (like Windows, Linux).
Steps of Creating and editing audio files:-
First: Setup and processing to create an audio file:
1. Collect data, type it, edit it then save it in a text file.
2. Prepare software and hardware components
Software: Audacity
Hardware: Microphone and speakers
Second: Implementation:
1. Open Audacity program
2. Record the sound using the program

a. Click record button


b. Read the script using the microphone

c. Click stop when you finish.

d. Click play to listen to the recorded part.

8
Transport menu to
record sound

Third: Modifying the sound:-


1. Adding an effect
a. Play the audio
b. Select the desired audio clip from timeline to add the effect to it.
c. Click “effect” menu and select an effect (repeat, reverse, ...)
d. Play the audio clip.
2. Cut and paste audio parts
a. Select the desired audio clip from timeline.
b. Click “Edit” menu and choose “Cut”
c. Move the pointer on the timeline to the desired place
d. Click “ Edit” menu and select “paste”
e. Play the audio
3. Delete a section of the audio
a. Select the desired audio clip from timeline.
b. Press “delete” key.
Fourth: Export the audio file
1. Click “File” menu
2. Choose “ Export Audio”
3. Select the appropriate extension of the audio file
4. Save the audio file in the folder

9
Types of audio file extensions:
There are different types of audio files such as wav, mp3…, they differ in quality, purity and
storage space of the sound.

Notes:
1. Wav file extension: It has high quality and clarity, and it has a large storage capacity, so
it is not appropriate for publication via websites.

2. Mp3 file extension: It has less purity, and it has less storage capacity, so it is appropriate
for publication via websites.

Activity:
Open an audio file and do the following:
1. Apply some sound effects (repeat, reverse)
2. Cut a portion and paste it in another place
3. Copy a portion and paste it in another place
4. Delete the copied portion

Exercises:

First. Choose the correct answer of the following:


1. ……………….. is a sound file that has high quality and clarity, and large storage
capacity.
a. wav file c. mp3 file
b. avi file d. mp4 file
2. ………………. is a sound file which is suitable for publication via websites.
a. wav file c. mp3 file
b. avi file d. mp4 file

Second. Tick (√) in front of the right sentence and sign (X) in front of the wrong one:
1. Audio programs are used for creating and editing video files (…..)
2. wav file is not suitable for publication via websites. (…..)
3. wav file has less purity, less storage capacity. (…..)
4. Wav file extension is appropriate for publication via websites. (…..)

10
5. We can modify audio files. (…..)
6. We export audio files using “Edit” menu. (…..)

Third. Write the scientific term:


1. A type of software programs that enable the user to create and edit audio files.
(……….…………….)
2. An open source program for creating and editing audio files. (…………………….)
3. A type of sound files that has high quality and clarity, and large storage capacity.
(……………….)
4. A type of sound files which is not suitable for publication via websites.
(………………..)
5. A type of sound files that has less purity, less storage capacity. (..………………)
6. A type of sound files which is suitable for publication via websites. (..………………)

Fourth. Complete the following sentences:


1. …………. and ……….…. are examples of extensions for audio files.
2. List steps of creating an audio file.
a. ……………………………… c. ……………………………..
b. ………………………………. d. ……………………………..
3. List steps of exporting an audio file:
a. …………………………………………
b. …………………………………………
c. …………………………………………
d. ………………………………………….

11
Lesson 4
Creating and editing video files
Video program: Software that enables the user to create and edit video files.
To edit a video file:
- We must use a program through which the video is cut into segments. Moving these
shots in a fixed speed makes them feel animated.
- These shots become easy to edit its contents.
- There are many programs that can be used in creating and editing video files like:
“Kdenlive” and “OpenShot”, which are open source and free to use and easy to
operate with Linux and Windows.
- There is also “Movie Maker” which runs on Windows.
OpenShot video editor:
- It is used to create and edit videos.
- Videos can be created through images collected.
- It enables the user to make a high quality video with images, backgrounds and
inserting audio files easily.

12
 The interface consists of:

2
4

5 6

7
8

1. Main toolbar
2. Project files
3. Function tab (move – images – audio files)
4. Video preview
5. Edit toolbar
6. Zoom slider
7. Play head
8. Timeline

13
Program timeline:

1. Ruler (to show time length on timeline).


2. play head (reads the current clip on timeline to show it in preview window)
3. Current clip (image, sound or video).
4. Tracks (they are similar to layers for images. Unlimited number of tracks can be used in
the project. The higher track has the priority to show, then the lower and so on.)

To create video clip:-


1. Import images to the program.
2. Put images in order on timeline.
3. Import a sound file to the program.
4. Preview the video.

First: Import images to the program.


1. Click import files icon in the main toolbar or from File menu.
2. Select the images you want.
Second: Put images in order on timeline.
1. Drag and drop the images in the “Project Files” window.
2. Put all the images in Track path and put them in order.
3. When putting images in Track , they become a (Video Clip) and appear in the Video
Preview
Third: Import sound files to the program.
1. Click import files icon
2. Select sound file you want
3. Drag and drop sound sign to insert in one track.

14
Forth: preview the video
Click Play icon in the Preview window.

Notes:
- To add a new Track, click the Add Track icon on the Edit Toolbar.

Activity:
Open an audio file and do the following:
1. Apply repeat effect
2. Apply reverse effect
3. Cut a portion and paste it in another place
4. Copy a portion and paste it in another place
5. Delete the copied portion
6. Save the project.

 Save Project:
To save the video project, do the following:
- Create a project folder on one of the drives
- Save all the files (images, sound, text, etc…) in that folder.
- On the Main Toolbar, select “File”, then “Save Project As”
- Name the Project, then click Save.

 Edit Video Clips:


1. Control play time:
- After previewing the video clip, the sound file time may be longer than the image
show time. This appears in the Timeline which ends the images and the sound
continues.
- We can control the sound clip to end at the same time with the last image clip on
the timeline as follows:
a. Put the mouse cursor on the Track, right click the mouse.
b. Select Slice, then Keep left side.
Add Effects to a Video Clip
a. Click “Effects” tab.
b. Drag and drop the effect to add it to the clip
c. The effect sign appears on the clip.
Notes:
- To read the effect name put the cursor on the effect sign.
- To delete the effect, right click the effect sign and select “Remove Effect”
-
15
2. Add Transitions to a Video Clip:
a. Click Transitions tab
b. Drag and drop a transition and add it to the clip.
c. Add the transition at the beginning or at the end of the clip.
d. Control the transition time length by drag and drop it to increase or decrease it.
3. Add Text to a Video clip:
a. From Title menu, select Title.
b. Choose a template
c. Fill in the dialog box.
d. Select a name for the text file
e. Change Font, colour or background
f. Click Save
Export a Video Clip to file:
1. Press "Export Video".
2. In the Dialog box of “Export Video", select the following:
a. “File Name”.
b. Folder Path.
c. Extension of target file.
d. Video profile
e. Quality level
f. Export the video by pressing “Export Video”,
Note: There are different types of video files with different extensions like avi, mp4 …

Activity:
Open your project, and do the following:
1. Control play time(Keep left side)
2. Add effect
3. Add transition
4. Add text
5. Export your video

16
Exercises:
First. Complete the following:
1. OpenShot interface consists of:
a. ……………………………
b. …………………………… 1
c. ……………………………
d. ……………………………
e. ……………………………
2 4
f. ……………………………
g. ……………………………
h. ……………………………
3

5 6
7
8

2. The Program timeline consists of:

a. ……………………………

b. ……………………………

c. …………………………….

d. ……………………………

17
3. To create a video clip, follow the following steps
a. ……………………………
b. ……………………………
c. ……………………………
d. ……………………………

Second. Put the following steps in the correct order:

- To save a project, you should do the following:

(…) Save the project file in the project Folder.


(…)On the Main Toolbar, select “File”, then “Save Project As”
(…) Create a project folder on one of the drives

(…) Put all the files ( images, audio, etc..) in the project folder.

18
Unit 2
Lesson 1
Create web pages using HTML
 Hyper Text Markup Language (HTML):
It is a coding (programming) language which used to create web pages.
 HTML codes:
To create a web page, HTML codes are used, these codes are called Tags. The web
browser executes these tags on the browser page.
 To create a web page using HTML tags:
- Create a text file using a text editor.
- Write HTML tags.
- Most of the tags with a start " < >" and an end " </>".
- Save the text file with ".htm" or ".html" extension
- Open the saved file using a web browser.
- Write HTML tags in capital or small letters.

 Structure of creating a web page using HTML


1. Write the tag <html> at the beginning of the code to
refer that the document is written in HTML.
2. The HTML tag is divided into two parts:
a. Head: the part where the page information is
written for the browser like page title.
b. Body: the part where the content is written.

 Add a web page title:


- use <title>.......</title> tag:
- The title appears in the address bar at the top of the page.
- Start a text editor program.
- Type the structure to create the page using HTML tags.
- Type the tag <title> My School </title> in the field <head >...</head>
- Save the file with the name school.htm
- Open the file school.htm (the web page) using a web browser to see the result of executing
the typed tags.

Activity:
- Create a new web page named My Website. Write a title for that page
19
Exercises:
Choose the correct answer:
1. HTML refers to …………
a. Hyper Text Markup Library.
b. Help Table Made Layout.
c. Hyper Text Markup Language.
d. Hyper Table Markup language
2. A tag starts with ………..
a. < > c. </ >
b. {} d. {/ }
3. We must save the HTML file with the extension……………..
a. Docx b. Jpg c.Htm

 Adding contents to a web page:


1. Adding text to a web page:
Add text inside body section
Add text "Manor House School"
Note: Internet explorer isn't affected by the left spaces in the file or by moving to a new line.
- Changing the direction using "dir" tag:
When designing a web page with Arabic view, we have to change the direction of the page to
make the content from right to left.
Rtl: right to left.
Ltr: left to right.
Write <body dir="rtl">
 Web page formatting:
1. Writing in a new line:
- Use <br> tag
2. Centering the text:
- Use <center> … </center> tag
3. Add blank space:
- Use &nbsp (non-breaking space)
- When leaving any number of spaces between words in the file, the explorer will
deal with it when viewing the page as one space.
- To control the number of spaces between words, use &nbsp; Repeat it according
to the number of the needed spaces.
4. Formatting font:
a. Use <font >…</font>
- The browser identifies seven different font sizes, with values from 1 to 7
- Change font to be Andalus face, red color and size 6.
20
- After using the close </font>, this finishes the effect of font tag.
<Font face = "andalus" color = "red" size = 6">
b. Use <b> …. </b> ,
<i> …… </i>,
<u> ….. </u>
Activity:
To design the web page:
- Write tags in a text file
- Save it with .htm extension
- Make changes in the text file, save it and preview changes in the web browser.
- Use dir, br, center, &nbsp;, font, b, i , u tags
-
Exercises:
A. Explain what is meant by the following codes:
<Title> My School </Title>
............................................................................................
<body dir="rtl">
............................................................................................
<font face="andalus">
............................................................................................
B. Choose the correct answer:
1. To display a text on the web page, we write the text in the …………
a) Head b) Title c) Body
2. To display the text "italic" on the web page, we use the tag………
a) <u> b) <i> c) <b>
3. To select the font type in <font> tag , we use the property………..
a) Font name
b) size
c) face

 Formatting the background of the web page:


1. Selecting the color of the web page background:
Use bgcolor property that connects to the <body> tag
<body bgcolor = "green">
Some names of colors that can be used as a value to the property bgcolor:
Blue, Brown, Black, Green, Red, White, Yellow, Purple, Sky Blue
2. Adding an image as a web page background :
Use background property that connects to the <body> tag
<body background = "image1.jpg">
 Dealing with images in the web pages:
Use <img> tag to insert an image in the web page
1. Use src property to identify the place where we save the image file and the name of the
file
<img src="school.jpg">
21
2. Use Height and width properties to control the image dimensions.
We use the measurement unit "pixel" to measure the image dimensions
<img src="school.jpg" height="450" width="800">
3. Use Align property to align the image
Value Function
Right Align the image to the right
Left Align the image to the left
Middle Center the text in the middle of the image
Bottom The text is positioned align down of the image
Top The text is positioned align top the of image

Important Notes:
- The image file and the web page file must be in the same folder.
- In case, there is a file image in another folder, we must write the complete path of the
image file.

Activity:
1. Change the background of the web page to be a picture
2. Change the back color of the web page
3. Insert a picture in the web site
4. Change the dimensions of the picture
5. Align the picture to right
6. Align text to be in the center of the image

Exercises:
A. Complete:
1. To align the text in the center of the picture, use ……………. Property.
2. To insert a picture in the web page, use ………… tag.
3. To write the place of the picture, use …………… property.
B. Choose the correct answer:
1. To select the background color of a web page, we use the …… property
a. Bgcolor b) background c) color
2. The property which is connected to the <img> tag, is……
a. path b) href c) src

 Insert the sound as a background sound:


- Use <bgsound>tag
- Use src property to write the place of the file and its name
- We can insert the sound as a background to the web page to listen to when we
download the web page by the browser.
Important Note:
- We must notice that the "Internet Explorer" is the only browser that supports the
<bgsound> tag to insert the sound as a background to the web page.
-
22
 Insert Video in the web page:
- Use <embed> tag
Note:
- The tag supports the video file of the type (swf - avi - mov).
-
Activity:
- Insert a sound to your web page.
- Insert a video to your web page.
-
Evaluation:
Complete:
- Use ………. tag to insert a sound file to a web page.
- Use ………. tag to insert a video file to a web page.

 Hyperlink: It is a hyper image or a hypertext, connected to an address, when we click


it, we move to this address, it can be in the same page or in another one, in the same
site or in another one.
1. To insert a text hyperlink:
- Use <a> …..</a> tag
- Use href property to write the address of a hyperlink
<a href="http://www.moe.gov.eg" >Ministry of Education</a>
2. To insert an image hyperlink:
- Use img tag inside <a> …..</a> tag to display the image
<a href ="myschool.htm"><img src="tools.jpg"></a>

Activity:
1. Insert a text hyperlink to the ministry of education website
2. Insert an image hyperlink to google website

Exercises:
Choose the correct answer:
The <a> tag ,is used to………… inside the web page.
a) align text b) add a hyperlink c) play video

23
Unit 2 Exercises
First. Choose the correct answer:
1. HTML refers to …………………….
a. Hyper Text Markup Library. c. Hyper Text Markup Language.
b. Help Table Made Layout. d. Hyper Table Markup language
2. A tag starts with ………..
a. < > c. </ >
b. {} d. {/ }
3. A tag ends with ………..
a. < > c. </ >
b. {} d. {/ }
4. We must save the HTML file with the extension……………..
a. docx b. mp3 c.htm d. wav

Second. Tick (√) in front of the right sentence and sign (X) in front of the wrong one:
1. HTML tags must be written in capital letters. (……)
2. HTML tags may be written in capital or small letters. (……)
3. To add a title to the web page in title bar use title tag in Body section. (……)
4. To add a title to the web page in title bar use title tag in Head section. (……)
5. The image file and the web page file must be in the same folder. (……)

Third. Write the scientific term:


A coding (programming) language which used to create web pages.
(……………………………….)
Fourth. Complete the following sentences:
1. HTML codes are called ……………..
2. Web pages are saved with extension ……… or ……..
3. To add a title to the web page in title bar use …………. tag in …………. Section.
4. To change the direction of writing, use ……….. property in ……… tag.
5. To write in a new line use ……… tag.
6. To write in center, use ……….. tag.
7. To leave blank spaces, use ………………
8. To change font, use ………. tag with ………… , ………… and ………….. properties.
24
9. To make the font bold, use ……… tag.
10. To make the font italic, use ……… tag.
11. To make the font underlined, use ……… tag.
12. To change the background color of a web page, use ……… property in …….. tag.
13. To use a picture as a background of a web page, use …………. property in …….. tag.
14. To insert a picture in a web page, use ………… tag.
15. ………… and …………… properties identifies the dimensions of a picture.
16. …………… property identifies the place where the picture is saved.
17. …………….. property identifies the alignment of the picture.
18. To align the text in the center of the picture, use ……………. Property.
19. To insert sound as a background for the web page, use ………. Tag.
20. To add a video to the web page, use …….. tag.
21. To add a hyperlink to a web page, use ……. Tag.
22. Use ……… property to write the address of a hyperlink

Fifth. Write the HTML code needed to execute the following:


1. Set the title "Form 8" in the title bar of the page
……………………………………………………………………………………………
2. Set the font to type andalus, color red and size 6
…………………………………………………………………………………………..
3. Set the background of the page to color blue
…………………………………………………………………………………………..
4. Set "image1.jpg" as the background of the page
…………………………………………………………………………………………...
5. Insert "image1.jpg" in the web page
……………………………………………………………………………………………
6. Set "audio1.mp3"as a background sound of the page
…………………………………………………………………………………………..

7. Format "Manor House School" as a hyperlink for website "http://www.newmhs.com"


…………………………………………………………………………………………..
25
Sixth. Write the structure of creating a web page

26

You might also like