OPENOFFICE
Page 35
OBJECTIVES
What do you understand by the
term “open source software”?
Listing and introducing a
number of open office
applications.
Define the components of open
office writer.
Define open office impress.
WHAT DO YOU
UNDERSTAND BY THE
TERM “OPEN SOURCE
SOFTWARE”?
OPEN SOURCE SOFTWARE
Open source software is code that is designed to be publicly
accessible.
Anyone can see, modify, and distribute the code as they see fit.
Open source software is developed in a decentralized and
collaborative way, relying on peer review and community
production.
OPENOFFICE APPLICATIONS
Writer: to create and edit documents.
Calc: to edit spreadsheets.
Impress: Presentations.
Math: for mathematical formulas.
Draw: for graphics.
Base: to create databases.
WRITER
OpenOffice Writer is a word processor used to create. edit, format and
print a document.
The Extension of the file created in writer is .odt
It can be used to create and edit:
documents with text. images and charts
brochures and invitations
newsletters with multiple columns
1 2 3 4
7
5
6
MAIN COMPONENTS
Title Bar: it is the bar on the top of the application that holds the
name of the file.
Menu Bar: This is made of several drop-down menu tabs: File, Edit,
View, Insert, Format, etc..
Standard Toolbar: This includes tools for frequent tasks such as
open, save, copy, cut, paste.
Ruler: to show dimensions and margins of the page.
Slide Bar: This conaitns frequently used tools grouped in a deck.
Status Bar: Displays information about the current page, zoom
percentage, etc..
THE MENUS IN WRITER
File Menu: the file menu has a list of options:
New: to create a new file.
Open: to open an already existing file.
Close: to close a file.
Save: save the changes.
save as: saves an existing file with a different name.
print: print documents.
THE MENUS IN WRITER
Edit Menu: the edit menu has a list of options:
Undo: to undo the last action in a document.
Restore: to redo the last action in a document.
Cut: cuts the selected text places it in the clipboard.
Copy: copies the selected text places it in the clipboard.
Paste: pastes the cut/copied text into the document
Find & Replace: searches for a specific word and replaces it with
a new word.
THE MENUS IN WRITER
Format Menu: the format menu has a list of options:
Character: it holds the Font, Font effect position of the text.
Bullets and numbering: creates an ordered or unordered list.
Page: changes the borders and background of the page, can
also add headers and footers.
Alignment: aligns text to right, left, center or justified.
______ Is an open office application
used for creating spreadsheets.
______ Is an open office application
used for Drawing Diagrams.
_________ is at the top of the
QUESTIONS application window that has the
document name.
_______ save an existing file with a
different name.
THANK YOU
ahmed.mohammed@suli-bis.com
mohammed.raad@suli-bis.com
Frames in HTML
Chapter 4
Learning Objectives
01 02 03
• Creating frames in HTML. • <FRAMESET> Tag. • <FRAME> Tag.
HTML Structure
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!– Code Here -->
</body>
</html>
HTML Example?
EXAMPLE HTML
<!DOCTYPE html> What you need as a base of HTML
<html> file.
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a simple HTML document.</p>
</body>
PURPOSE
</html> To let the browser understand that
the incoming file is a HTML file.
Frames Examples:
Frames allow you to divide the
web page into several
independent parts or panels, for
each “part” of the screen is called
a frame.
Frame Dependencies
FRAMESET Tag FRAME Tag
Frame Set: parent tag of Frame s, Frame defines what goes into each
or a set of frames combined section of the frame.
together, also styles the structure
of the frame s.
FRAMESET Attributes
Defines how many Columns we can have and their
Cols Cols=“100px” || Cols=“50%”
sizes
Rows Rows=“100px” || Rows=“50%” Defines how many Rows we can have and their sizes
Border border=“1” || border=“2” Specifies the thickness of the border
Border Color bordercolor=“black” || bordercolor=“purple” Specifies the color of the border
FrameBorder FrameBorder =“yes” || FrameBorder =“no” Specifies if the border should be visible or not
FRAME Attributes
Specifies the URL of the initial file
SRC src=“file1.html” || src=“file2.html”
Border Color bordercolor=“black” || bordercolor=“purple” Specifies the color of the border
FrameBorder FrameBorder=“yes” || FrameBorder =“no” Specifies if the border should be visible or not
"The best way to predict
the future is to create it."
Conclusion
01 HTML Frames
What is a frame in html ?
02 FrameSet
What is a frameset tag? Name two attributes.
03 Frame
What is a frame tag? Name two attributes.
Arigato
;)
JavaScript
Chapter 5
Page: 84
HTML Documents
JavaScript Methodes and functions
The importance of JavaScript 01 04 using methods as shortcuts for
coding
Code
How to code in JS 02
Variables & Operators
What are variables and operators 03
JavaScript
To add functionality to the web page you need
JavaScript, JavaScript is a scripting language with
Javascript
very simple syntax to add interactivity to web pages.
Writing in
JavaScript
Program
There are different ways to start writing down
JavaScript to your webpage, most basic way to do so
is to embedd it directly to your HTML page, how?
<script language=“JavaScript”>
</script>
In which you put that in the <head> tag.
Or impor the code from another javascript file, which
will look like the following:
<script language=“JavaScript” src=“fileLocation.js“>
// extra js code if needed
</script>
JavaScript
<!DOCTYPE html>
<html>
<head>
<script>
document.write(“<h1>welcome to JavaScript</h1>”)
</script>
</head>
<body>
</body>
</html>
Variables
What are Variables? Variables are names that you
can store data in temporarly, example:
var name = “a random data can be anything”
var anyNameWouldWork = “12”
var anotherOne = “Dj KhAliD”
var differentType= true
var numb = 12
Variables for more examples checkout the book or this link
“Your mental health is more
important than making other
people comfortable.”
—SOMEONE ON INSTAGRAM
Operators
We have many different kinds of operators to do
additions and comparisons between two data. Such
as:
+-*/= for basic math
=== !== > < >= <= for comparisons
&& || ! for logical operations
check the pages of (93 – 95)
Operators
Methodes in JS
We have functions or methods that help us with
handling the html document the way we want, such
as:
1- window.alert(): show an alert on the top of the web
page.
2- window.confirm(): show a confirmation modal in
the web page.
3- window.prompt(): to show a dialog box with an
Methodes
input in the web page.
JavaScript
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Basics</title>
</head>
<body>
<script>
var message = window.alert("Hello! This is an alert.");
var confirmMessage = window.confirm("Do you like this page?");
var userName = window.prompt("What is your name?");
document.write("Hello, " + userName + "!");
</script>
</body>
</html>
Comments in JS
You can leave comments in the programming
language like the other ones, for you or teammates to
read on later without it effecting the code:
single line comment:
// this is one line of comment
multiple line of comment
/*
multiple
lines of
Comments
comments
*/
Scream Jack Sparrow for 3 marks
Conclusion
What are the JS
Key word to make variables ? methods
What is Name 5 operators
JavaScript
Where do you
write down JS How many ways
in HTML to write
Document comments in JS
OUR PARTNERS
Mercury is the closest
planet to the Sun and
the smallest one in our
Solar System
MARS
VENUS
Despite being red, Mars Venus has a beautiful
is a cold place, not hot. name and is the second
It’s full of iron oxide MERCURY planet from the Sun
dust
THANKS!
Does anyone have any question?
Moahmmed.raad@suli-bis.com
Hyper Text Markup
Language (HTML)
Made by Mohammed Raad
Contents of this Course
HTML What is HTML how is it being used? How can we learn it.
Text Editor What is a Text editor? How to use it?
HTML Structure How to write the syntax and structure of html?
HTML tags and element What are the HTML tags/element? How to write them
Course Objectives
HTML Structural tags
01 Understand the fundamentals
of HTML.
02 Understand the fundamentals
of HTML structural tags and
learn to use them
HTML Tags
03 Learn the objectives of tags
01
HTML
HTML: Hyper Text Markup Language, that can be
viewed using a web browser.
HTML
• First line of HTML should be <!doctype html> .
• Consists of markups tags.
• Not Case sensitive, <HTML> <hTMl> <html> are all the same.
• Creates simple text files using Text editors, (Sublime,
notepad++).
02
Structural Tags
- What are structural elements.
Structural elements
• <Header>: defines the header of the web page.
• <nav> defines the navbar section of the web page.
• <article> defines the article section of the web.
• <section>: defines a different section or portion of the page.
• <aside>: defines a side of a section of the web page (sidebar).
• <footer>: defines the footer section of the page.
HTML Structure
● <!DOCTYPE html>
● <head>
● <title>Document</title>
● </head>
● <body>
● </body>
● </html>
03
HTML Tags
- What are tags and examples.
- What are HTML elements and examples.
- What are tag attributes and examples.
HTML Tags
Refer to pages 108 – 112 for better details and understanding
HTML Tags
• <p> to write a paragraph.
• <h1> to write headers, we have 6 total header the higher
the number the smaller the text.
• <br> to break the line and make a new one.
• <font>: a tag used to customize text in the web page.
• <A>: anchor tag used to create hyperlinks.
HTML Tags
• <ul> || <ol>: unordered or ordered list used to create
different kind of lists.
• <li>: list item in which are used inside of a list to create
an item.
HTML Tags
• <table> tag to create a table.
• <tr> a tag used in table tag to create a table row.
• <th> a tag used within table tag and table row to create
a table header.
• <td> a tag used within table tag and table row to create
table data.
HTML Tags
• <audio>: a tag to play an audio file in a web page.
• <video> a tag to play a video in a web page.
<audio || video>
<source src=“audifile.ogg” type=“”audio/ogg>
</audio || video>
HTML Attributes
Used to customize or help the tag work as they are
intended:
• Bgcolor: to change the background color.
• Background: used to place an image in the background.
• Align || valign: to align horizontally or vertically.
• Height || width: to change the height or the width of the
element.
Conclusion
HTML HTML Structure
What does HTML Stand for? What are Text Editors?
HTML Tags
Name three tags and their
functionalities.
Alternative resources
Here’s an assortment of alternative
resources whose style fits the one of this
creative template:
● W3School official website.
● Ask chatGpt questions.
Thanks!
Does anyone have any questions?
mohammed.raad@suli-bis.com
Website
Slidesgo
CREDITS: This presentation template was created by Slidesgo, including
Flaticon Freepik
icons by Flaticon, and infographics & images by Freepik
Please keep this slide for attribution
Python
Chapter 7 page: 120
Content of this chapter
Python Features of Python
Operators Available operators in Python
Arithmatics in python Available Arithmatics in Python
Variables in Python How to make a varibale in Python
Methodes & functions What are the available functions and how to use them.
Conditional Statements What are the uses of conditions in programming languages
Python ?
Python is a high-level programming web-
based python is open source and object
oriented. Used in the following areas:
● Create web-based applications.
● Handle large amounts of data.
● Perform complex applications.
● Connect DB systems and modify files.
What are the features of Python?
● Python source code is freely available.
● Python is loosely typed OOPL.
● Python supports GUI.
Operator
Operators in Python
Assignments
Assignment operators in Python
Relational Operators
Realtional operators in Python
Logical Operators
Logical operators in Python
Variables in Python
Rules to make variables in Python
• Variable can consist of letters digits and underscore (_).
• Naming a variable cannot start with a digit.
• Variable names cannot have spaces between.
• KEYWORDS are not allowed as a variable name.
• Python is a case sensitive language.
Functions & methods in Python
• Input() : asks the user to write or input a text into the program
equivalent to input tag in html.
• Int() : parses (converts) a value to an integer.
• Print() : print a value to the screen.
Conditions in Python
Conclusion
Python operators Variables
What are the features Name two & give examples. What are the rules of
/ares of use of it? making a variable in
python?
Functions/Methods Conditions
Name the functions and What to use to make a
what they do. condition in python.
