First Term 2023 / 2024

2nd Prep

Name:…………………………
Class:…………………………
 Cairo Governorate ‫محافظة القاهرة‬
Nasr City Ed. Directorate
‫إدارة شرق مدينة نصر التعليمية‬
Member of the ASP Net
‫عضو شبكة مدارس اليونسكو‬
AL OLA Modern school ) ‫مدرسة العال الحديثة ( عربى‬
2nd prep ‫ الثاني اإلعدادي‬:‫الصف‬
Computer First Term 2023 / 2024 ‫ الكمبيوتر وتكنولوجيا‬:‫المادة‬
‫المعلومات واالتصاالت‬

Unit one
Concepts and basics Of Websites
In this unit, we will learn about some concepts of website, including what is a
websites, webpage, a home page.

Website: It is a site on the internet that consists of a webpage or more, it is

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.

1
 Web page components

Web page Components:

The web page includes texts, images, audio files, videos and hyperlinks.

2
 Types of web pages

Interactive Web
Static Web Page
Page

Static Web Page:

The content of these pages is previously prepared by the page developer. The
content doesn’t change and can’t be edited by the visitor. It is designed by
HTML code I designing such pages.

Static web page

Interactive Web Page:

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

Interactive Web Page

3
 Exercises
Question 1: complete the following
1-The Web site is …………………………………………………………….
2-The Web page is …………………………………………………………..
3-The Home page is …………………………………………………………
4-The Static Web page………………………………………………………
5-The Interactive Web page is ……………………………………………..
6-The elements of the web page is………,……..,…….,………
7-The types of the web page…………….,……………
8- ….………………it is consider as webpage or more connected with each
other under a certain name and address on the internet and you can visit it by
using the computer.
9-The Web page ……………….. is designed by Html , Jave script PHP and others
Question 2:Put ( √ ) Or ( × ):
1-Hyper Link is the consists of a webpage or more through a certain
Web address. ( )
2- Web site it is the opening page in the website through which other pages can
be visited. ( )
3- Web page lt is consists texts, images, audio files, videos and hyperlinks.
( )
4- Web site it is a document with electronic content on the internet which can be
shown through a web browser. ( )
5- Static Web Page that has a content allowing the visitors to interact with and
manipulate. ( )
6- Interactive web is created by html only ( )
3-Choose the correct answer:
1- web pages ………displays the information for viewing only .
a- interactive b- static
c- Homepage d-web page
4
 2- ………… web page or more which are linked together under a certain name
a- Web site b- interactive
c- Home page d- static
3-Web page static properties……………
a- Typing by Html b- Typing by Java script
c-Typing by PHP d- all of them
4-Web site the address on the internet certain……….
a- Web Address b- web page
b- Home page d-none from the above
5- ……………. The content doesn’t change and can’t be edited.
a- Home page b- web site
c- web page interactive d-Webpage static
4-Write the scientific term:
1. It is content of the page is fixed and doesn’t change
( )
2. The first page of the website from which you can go to the rest of the
website pages. ( )
3. Html, php, JavaScript are used in which webpage design.
( )
4. One or more web page linked together under certain name.
( )
5. It is document with electronic content published on the internet.
( )
6. Contains image, text, sound, video and hyperlinks.
( )

5
 Stages of designing and creating
A web site
Stages of designing and creating a website:
- The first stage: planning to create a website.
- The second stage: design the web pages.
-The third stage: prepare and develop the web pages.
-The fourth stages: implement the web page.
- The fifth stage: publish the website on the internet.

6
The First Stage: Planning
In this stage, we draw a simple diagram of the web pages of the website, the
homepage and the connected pages - Decide the information and data to be
included as data or service according to the need.

The Second Stage: Design the web page

This stage is the most important one as we design the format and shape of the
homepage and other pages. The different format types are designed, the
color, the background, the font size and type, place of putting text,
images and video clips and decide the different hyperlinks inside the
same page and connected with other pages in the website.

7
The Third stage: Prepare and develop
This stage consists of important steps which are as follows:
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 sound files and save them in a folder. Later on we will
know how to create and edit these files.

Stage Four: Implementation

This is the stage when we change the paper design into web page to be shown and
visited on the internet with an internet browser program.
- Input the data, text, images, and videos and so on.
- Create the necessary hyperlinks to connect the different pages and facilitate
browsing the site. This is done using HTML codes.

8
 Stage five: Publish on the internet

In this stage, a web address is taken and the storage capacity is decided to save on one
of the servers and publish the site on the internet.

Exercises
Question One: Complete:
First, designing and creating a website goes through
stages which are:
1-…………………………………..
2-………………………………......
3-…………………………………..
4-…………………………………...
5-……………………………………

9
Second, in the stage of implementation, we
1-………………………………………..
2-……………………………………….
3-………………………………………..
Choose the correct answer:
1-The website is being published on line
a-Reserve a website address
b- Allocate storage space on servers to publish to site.
c-Both a and b
d- website Planning

2- Using html programming Languages to

a- Convert design into web pages b- prepare and develop text files
b- prepare and develop image file c- prepare and develop video files

3- Website planning means

a-convert design into webpages
b- Reserve a website address
c- determine the data and information in the webpages .
d- create a hyperlink to the website

4-The stage of designing and creating a web site

a- prepare and develop web pages
b- home page
c-web page
d-interactive webpage
Creating an audio file
You can create an audio file containing audio clips and the
words required as well as adding different effects
on the audio and specifically on a track , and then
save the audio
In a file.

10
 Firstly: the setup and processing to create an audio
file stage:
- All the data that will be audio recorded.
-Make sure of the software components (install one of the programs of creating
and audio processing on computers in the lab
-Ensure the hardware components (connecting the microphone
"Mic" to a computer.

Secondly, the implementation stage

-Using the "Audacity" program to create and audio processing which is an open-source
software, a program that can be run on different operating systems like
(Windows –Linux)
You can download the program through the website: http://audacity.sourceforge.net

-To start voice recording through the program, click the Record button
-Read the data collected for the school in the text file using the Mic
"microphone" as a unit input.

11
-To complete entering audio data, click "Stop" button in the program.
-To listen to the sound that has been entering click "Play" button in the
listening to the sound through the speakers program,

Thirdly, modifying the sound (or audio clip)

Add an effect on the audio clip

-Select the desired audio clip added to effect it by clicking and dragging on the desired
sound indicator reading at the time the timeline.
From " effect" menu, select one of the desired changes

-Cut and paste an audio clip:

Select the audio clip you want to cut. From ' Edit menu " select " Cut" -Move the
pointer on the timeline to the desired place to paste the audio clip, ."
From the Edit menu select" Paste .

Delete an audio section:

Select the audio section you want to delete.
Press “Delete" from the keyboard.

12
Export an audio file with An appropriate extension:
From the File menu, select "Export Audio"
Select the appropriate extension of the audio file

Types of audio file extensions:

-Audio MP3 file , the sound is of less purity, compared with the file with WAV
extension, has less storage capacity, so it is appropriate for publication
via websites.

Compare Mp3, Wav audio file :

Wav Mp3
1- High quality compared to mp3 1-The sound is of less purity
2- Not suitable for publish on the 2- suitable for publish on the
internet internet
3- High storage capacity 3-small storage capacity

Exercise

Q1: Complete the following

1- ........... Program Works on operating systems windows, Linux ,Mac
2- The symbol is used in the Audacity program to …….. audio
3- In the Audacity program form the …………menu one of the desired
suitable effects .
4- The symbol is used in the Audacity program to……… audio .
5- Audio files are exported with different types , including the extension
such as…………………,………………….

13
Q2:- To create an audio file, do the following:
Firstly: …………………………………………
Secondly: …………………………………….
Thirdly: ………………………………………..
Fourthly: ……………………………………..
Q3:Put ( √ ) Or ( × )
1- Audio processing software allows creating an audio file but not saving the file
( )
2- Audacity is an audio processing program that includes the ability to directly
record audio ( )
3- The audio file cannot be exported in audacity with different extensions
( )
4- Audio processing software does not allow adding effects to audio clips
( )
5- Press the record button to start the audio recording ( )
6- Audio data is entered into audio file by using microphone ( )
7- To cut a specific audio clip , open the edit menu and select copy ( (

Q4:Choose the correct answer:

1-Audacity is program for creating and processing audio …
a- Open source software b- Free software
c- Runs on windows, Linux d- all of the above
2- ………….it is used to see the sound clips and sound tracks
a- Time Line . b- Transport menu for audio recording
C- Main Toolbar . d- Menu bar

3- The audacity advantages

a- Menu bar b- Easy to use interface
c- Menu Edit d- Menu Transport

4- Some of the tasks that can be performed through the audacity program
a-The ability to cut an audio clip b-Paste an audio clip
c- Combine audio clips d- all of the above

14
Q5:Write the scientific term
1- Sound file the we can’t publish it on the internet ( )
2- Sound file that we can publish it on the internet ( )
3- To delete a part of selected part of sound file ( )
4- To export file from file menu ( )
5- To past a part of a sound file and cut it from edit menu. ( )

Creating and Editing Video Files

Creating and editing video programs are the ones that

enable the user to create and edit video files. This is
done through tools and effects that help the user
create and edit video clips easily and fast.

Download Video Program and Identify Its Interface

1. -Download a video editing program. “Opens hot” will be used and you can
get it on http://www.openshot.org

15
The interface consists of:
1. Main toolbar
2. Project Files.
3. Function Tab (Move –Images-Audio files)
4. Preview Window.
5. Edit Toolbar.
6. Zoom Slider
7. Play head/Ruler
8. TimeLine

16
Program Timeline:
1. Ruler (to show the time length on the timeline).
2. -Play Head (reads the current clip on the timeline to show in Preview
Window).
3. Current Clip (image, sound or video).
4. Tracks (They are similar to Layers where images, sounds or video caption
clip is put on the track.

17
 Create Video Clips

Import image files into the program:

- Click Import files icon + in the Main Toolbar to add the images.( You can
import files from File, then Import Files)
- Import images from the “‫“ مدرستتي‬folder, to show in the “Project Files tab in
the program interface.

Put Images in order on the Timeline:

To create Video clips, the images are put in order on the video timeline.

1. Drag and drop the images in the “Project Files” window.

2. -Put all the images in Track path and put them in the suitable order.

18
 3. When putting images in Track , they become a (Video Clip) and appear
in the Video Preview
4. Put the images in order in Tracks on the Timeline.

Import Sound files into the program:

- To make the video clip more attractive and effective, we add music or sound
comment.
- To add sound file, click Add File icon + on the Main Toolbar and add the
sound file to appear in “Project Files” tab.

19
 Drag and drop the sound sign to insert in one track.

Preview the video:

-To preview the video, click the Play icon in the Preview window.

Save Project:
- Save all the used files,( images, sound, text…) in a specific folder.
- From the Main Toolbar, select File, Save Project As
- Name the project in English.

20
 Edit Video Clips
Control the play time of the Video Clip
1. Define the time length of the clip on the timeline.
2. Drag and drop the head of the play indicator and move it
3. till it goes to the right place on the timeline.
4. Right click the clip Track, a drop box appears
Select Slice Clip to split the clip into two slides.
5. Keep Both Slides, the right and left slides are kept.
6. -Keep the left slide.
7. -Keep the right slide

21
 Add Effects to a Video Clip
Add “Effects” to the video clip and control the time of this effect to show the
clip in a certain way.

Steps to follow:
1. Click “Effects” tab.
2. Drag and Drop an effect to add it to the clip.
3. The effect sign appears on the clip.
4. To delete the effect, right click the effect sign and select “Remove Effect”

22
 Add Transitions to a Video Clip

To add Transitions to a video clip:

1. Click the Transitions tab
2. Drag and drop one transition and add it to the clip.
3. Add a transition at the beginning and at the end of the clip.
4. Clip the transition time length by drag and drop it to increase or decrease
it.

23
 Add Text to a Video clip
To add text to a video clip:
- From Title menu, select Title.
- Fill in the dialog box.
- Save text in a file “Save”.
-Name the text file in English.
- The text file is found in “Project Files”.
- Add text file to the video clips by drag and drop the text file and add it to a
track.

Notes:
-The text can be added at the beginning, in the middle or at the end of the video
clip.
- Add a Track or more to add the text and other clips ( images or sound) -
Reorder the video clip ( audio , images or text ) on the Track

24
 Export a Video Clip to file
After finishing the project, putting all the needed scenes and editing through
adding suitable Effects and Transitions, the project can be exported to a video
file with a suitable extension. The program makes it easy to export in different
extensions .

To export a video to a file with suitable extension:

- Press "Export Video".

- “File Name”.
-Folder Path.
- Extension of the Target video File.
- Decide the Quality level.
-Export the video by pressing “Export Video”

25
 Exercises
Question 1 : Complete the following
The Program Interface consists of the following

1- ……………………………………….
2- ……………………………...............
3- ………………………………………
4- ………………………………………
5- ………………………………………
6- ………………………………………
7- ………………………………………
8- ……………………………………....
Question 2 : Complete :
To create video clips, follow the following steps
1- …………………………………….
2- …………………………………….
3- …………………………………….
4- …………………………………….

26
Question 3:-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.
(……….. ) Save the project file and name it in English from the Main
Toolbar, File, Save As.
(……….. ) Create a project folder on one of the drives and name it in
English
(……….. )Put all the files ( images, audio, etc..) in the project folder

Question 4: Complete :
The program timeline consists of:
1

1- ………………………………….
2- ……………………………….....
3- …………………………………..
4- …………………………………..
Question 5: Put( √) or( × )
1. To add effect on the video we press effect tab ( )
2. open shot program didn’t allow to control the time of transition ( )
3. we can’t control the time of the sound on the timeline ( )
4. To delete the effect from the video w press right click on the effect menu and
choose delete ( )
5. To control the time of the sound file we use the indicator on the time line or
the arrows from keyboard. ( )
6. To move the reading indicator press on it and drag it to the required place.
( )

27
Question 6: Choose the correct answer:
1-we can control the time of the video (audio and picture) by using
a-effects b-time length
c-reading indicator d-timeline

2-when we choose “keep both slides “we cut the clip in to

a-2 slides b-3 slides
c-1 slide c-more than n3 slides

3-when we use “keep left slide” the clip divided two part which part will
be deleted
a-left side b-right side
c-upper slide d-down slide

4-when we use “keep right slide” the clip divided two part which part will
be deleted
a-left slide b-right side
c-upper slide d-down slide

5-To save file from main toolbar we choose ………………from file menu
a- Save project as b-save
c-save image d-save picture as

28
 Unit Two
Create Web Pages by Using HTML
HTML:
It is a coding language used to create internet pages which are used through an
internet browser.

HTML codes:
To create a web page, HTML codes are used, these codes are called Tags. An
internet browser executes these tags on the browser page.

To create a web page using HTML tags, do as follows:

- Create a text file using a text editor to write and edit the HTML tags.
- Write the HTML tags between these signs “<” “ >”.
- Write most of the tags with a start " < >" and an end " </>".
- Save the text file with the HTML tags with.htm or .html extension
- Open the saved file using a web browser and notice the result.
- Write HTML tags in capital or small letters.

The Structure of creating a web page using HTML:

Steps to follow:
-Upload a text editor program
- Write the tag <html> at the beginning of the code to refer that the document is
written in HTML.
-The HTML tag is divided into two parts:
1- head: the part where the page information is written for the browser like
page title.
2- body: the part where the content is written
<html>
<head>
</head>
<body>
</body>
</html>

29
Add a web page title using </title>.......<title> tag
Ex:
<html>
<head>
<title> my school</title>
</head>
</html>
-Adding text to the webpage:
Ex:
<body>
I love my school
</body>
-Changing the direction of the web page using "dir”
Rtl→From right to left
Ltr→from left to right
Ex:
<body dir=”rtl”>
‫مدرستي جميله و نظيفه‬
</body>

30
-Web page formatting:
formatting the text in the web page:
1-Writing at the beginning of a new line by <br> tag.
2- Centering the text by <center>… </center> tag.
3- Add blank space between words by &nbsp
4-a Format the font in the web by <font>…</font>

Face→ Choose the font

Color→Choose the font color
size Choose the font size

ex:<body>
<font face=”andalus” color=”red” size=”6”>
I love my schppl
</font>
4-b formatting the font in the web page
<u> Underline --- <b> Bold --- <i> Italic

-Formatting the background of the web page:

<body bgcolor=”green”>

-Adding image as a web page background by the property Background

<body background=”image1.jbg>

-Insert image inside the web page by <img> tag.

<img src=”school.jbg”>

-Controlling the image dimension in the web page.

<img src=”school.jpg” hieght=”450” widt=”800”>

- Align the image inside the web page

Right→Align the image to the right
Left→Align the image to the left

31
Middle→Center

The text in the middle of the image

Bottom→The text is positioned align down the image
Top→The text is positioned align top the image
<img src=”school.jpg” align=”middle”>

-Insert the sound as a background sound by <bgsound>tag:

<bgsound src=”Egypt.mp3”>

-Insert Video in the web page by <embed> tag:

<embed src=internet.avi>

Insert hyperlink in the web page by the <a>…</a>tag .

<a href=http://www.moe.gov.eg> </a>

Excersise
Question: 1 Choose the suitable correct answer to the following phrases:
1- HTML refers to the phrase…………
a- Hyper Text Markup Library.
b- Help Table Made Layout.
c- Hyper Text Markup Language.

2- The web page which uses HTML in its design, it is only considered
a……page.
a- interactive
b- Active
c- static

3- Using languages like JavaScript and PHP besides HTML in the

design of the web page is to modify the page to…………
a- interactive
b- Homepage
c- subpage

32
4- To display a text on the web page, we write the text in the…………….
a- Head
b- Title
c- Body

5- We must save the HTML file with the extension……………..

a- Docx
b- Jpg
c- Htm

6- To display the text "italic" on the web page, we use the tag………
a- <u>
b- <i>
c- <b>

7- To select the background color of the web page, we use the

property…….
a- bgcolor
b- background
c- color

8- The property which is connected to the <img> tag, one of these

properties is……
a- path
b- href
c- src

9- The <a> tag ,is used to………………………inside the web page.

a- align text
b- add a hyperlink
c- play video

10- To select the font type in <font> tag , we use the property………..
a- Font name
b- size
d- face

33
Q2: match (A) from (B)

(A) (B)
1-web site A. ( ) a document with e-content that is
published on the internet and is displayed by
the browser.
2-home page B. ( ) display read-only information without the
ability to do processing from guests to the
content
3-web page C. ( ) a place on the internet that is consisted of
a web page or more and is visited through
specific titles
4-static page D. ( ) the first page on the web site and
through it we easily move to the rest pages.
5-dynamic / E. ( ) information page that displays an
Interactive interactive content to the guests to interact
page and process it.

Question 3 : Put (√ ) or the correct sentence and ( X ) for the wrong one:
1-HTML is used to create interactive web pages. ( )
2- JavaScript is used to modify the static page to interactive page.
( )
3- The tag that is written at the beginning of the code to refer that the document
is written by html is <title>. ( )
4- To control the number of the spaces between words, we use the symbol
&nbsp. ( )
5- To add image to the web page, we use the <img> tag. ( )

34
Question: 4 Explain what is meant by the following codes:

<Title> My School </Title>

............................................................................................

<body bgcolor="green">
............................................................................................

<Img src = "school.png">

............................................................................................

<font face="andalus">
............................................................................................

<bgsound src="Egypt.MP3">

............................................................................................

35
 Practical model
Q1: Open the Audacity program

………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
……………………………………………………………………

-Add a sound file.

………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
……………………………………………………………………

Q2: -open the audacity program

………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
……………………………………………………………………

-Select part of the first sound file then copy and paste in end of the file.
……………………………………………………………………………
………………………….…………………………………………………
………………………………………………………..……………………
……………………………………………………………………..

36
Q3: -Open the Notepad program
………………………………………………………………………………
………………………………………………………………………..
………………………………………………………………………………
…………………………………………………………………………

-Using the language of html write code to add the title of “Main Page” and
write another code to add the text "Welcome to Al Ola schools".

……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………

Q4: -open the notepad program

…………………………………………………………………...............
……………………………………………………………………………
……………………………………………………………………………
……………………………………………………………………………

-change the direction of the sentence ‫انا احب مدرستي‬to rtl(right to left)
…………………………………………………………………………..
…………………………………………………………………………..
………………………………………………………………………….…
………………………………………………………………………..

37
 Model 1

Q1:- Put mark () or ():-

1. MP3 is an Extension of Pictures. ( )
2. HTML stands for Hyper Text Markup Language. ( )
3. To add a picture use the Tag <title> . ( )
4. The first step of create a website is Design. ( )
5. Any website consists of group of Pages. ( )
6. The text between <body> and </body> describes the page title. ( )
7. The picture should be in the same folder with the page to be added.
( )

Q2:- Choose the correct Answer

1. Any website must have unique..........................
(pages – URL-Browser -website)
2. The website elements maybe .........................
(Text – Pictures & videos – hyperlinks – all of them)
3. To record sound, you have to connect the ................. with computer.
(Microphone – Printer – Speaker – Headset)
4. .................. and ................ are an open source programs.
(openshot – Audacity -windows)
5. Programming language s used to create dynamic page ...................... and
.......................
(Php – java script – Cobol- Basic)

38
Q3:- Put line under the different word:
1. Webpage – Interactive page – JPG -Static page – Website
2. Tracks – Ruler – Function Tab – Play Head
3. <u> – <b> – <i> – <img>
4. Design – Implementation – Planning – Preparation and processing –
Hyperlink
5. <br> – <center> – <title> – <head>
6. Edit Menu – Cut – File Menu – paste – Copy
7. < > – < " "> – </> – <///>

Q4:- Choose the correct answer and complete the spaces:-

<b> – <I> – Tages – Audacity – &nbsp – <a> – href – bgcolor –
Windows)
1. To make the text appears on webpage bold use the tag ............
2. To identify the background color use the attribute ..................
3. The Html Commands called .................................
4. Program used to create audio file ............................
5. …………… used to insert a space between words in browser.
6. Tag used to create hyperlink .................... and it's property is ……………..

39
 Model 2

Q1:- Put mark () or ():-

1- we use java script language convert the static webpage to interactive
webpage ( )
2- HTML stands for Hyper Text Markup Language. ( )
3- We can’t make any process (delete-cut-copy) on the sound file.
( )
4- The second step of create a website is implement the web pages.
( )
5- Any website must have unique URL. ( )
6- We use <title> tag in the beginning of the code to indicate that we use
html language. ( )
7- Wav is an Extension of audio. ( )
8- Hyperlink is a webpage or more, connected with each other.
( )

Q2:- Choose the correct Answer

1- Programming language used to create dynamic page ...................... and
.......................
(Php – java script – Cobol - Basic)
2. ……………. It is a webpage that has a content allowing the visitors to interact
with and manipulate.
(static webpage - interactive webpage -website)
3. Program used to create audio file ............................
(Audacity – Gimp – Photoshop)
4. To record sound, you have to connect the ................. with computer.
(Microphone – Printer – Speaker)
5. Tag used to create hyperlink ....................

(<href> – <img> - <center>)

40
Q3:- Put line under the different word:
1- <Background> – <Bgsound> – <Embed> – Copy
2- Openshot – Audacity – Movie Maker
3- <u> – <b> – <i> – <img>
4- MP3 – MP4 – WAV
5- Website – Web Page – Home Page – Design
6- Windows – Linux – android – Paint
7- <Br> – <Center> – <title> – <head>

Q4:- Choose the correct answer and complete the spaces:-

<u> – <I> – Web Page – Movie Maker – &nbsp – Php – Html – bgcolor
– Openshot - Audacity )
1- To make the text appears on webpage underline use the tag ............
2- …………… used to insert a space between words in browser.
3- ……………. It is a document with electronic content on the internet which
can be shown through a web browser.
4- To identify the background color use the attribute ..................
5- .................. and ................ are an open source programs.
6- Save the text file with the HTML tags with ………….. extension

41