Professional Documents
Culture Documents
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.
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.
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.
4
Lesson 2
Stages of designing and creating a website
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
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.
Exercises:
Home Page
My School
(Home Page - About School - Photo Album -
Vision and mission - Contact Us)
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
8
Transport menu to
record sound
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:
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. (…..)
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:
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.
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
a. ……………………………
b. ……………………………
c. …………………………….
d. ……………………………
17
3. To create a video clip, follow the following steps
a. ……………………………
b. ……………………………
c. ……………………………
d. ……………………………
(…) 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.
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
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
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. (……)
26