Download Teacher Nedaa Hisham Abu Hashim

TU170 Learning online and
computing with confidence
Prepared by:
Teacher
Nedaa Hisham Abu Hashim
Teacher Nedaa Hisham
Section 4
Web skills
Teacher Nedaa Hisham
Aim of the session
Tow main subjects will be covered in this session:


Finding information on the web.
Creating web pages using HTML language
( hyper text markup language) .
Teacher Nedaa Hisham
What is Internet (1969):
Way of linking large multi-user computers by means
of physical links, microwave links, satellite links and
optical fibers.

Its main standard or protocol is called (TCP/IP)
(Transmission Control Protocol/Internet Protocol),
which is responsible for routing information between
computers and ensures that machines can
communicate and understand each other properly.
A set of services are running on top of Internet.
Examples are the WWW, mail, newsgroups, mailing lists,
telnet, Ftp, gopher, etc


Teacher Nedaa Hisham
What is WWW (1991 : much recent
than the email service)


World wide web service, used to provide information
and links to other’s documents on the web.
Defined by a set of protocols :

HTTP : Hyper Text Transport Protocol : specifies
how information exchange between machines
should be handled.

URL : Universal (or Uniform) Resource Locator :
Defines the location at which the document is
stored.

HTML : Hyper Text Markup Language : Defines the
format of any document that can be viewed on the
web.
Teacher Nedaa Hisham
What is WWW?


Notice that Internet and WWW are not the same
entities. WWW is just one among many services
running on the Internet.
Benefits of WWW :

Hides complexity of addresses and commands

Summarizes Internet features into single interface

Large resource for info. Including text, images and
sounds
Teacher Nedaa Hisham
WWW



The program that is used to get the WWW service is
called a browser.
There are two main browsers : Netscape and Internet
Explorer
Basic commands used in the browsers

Forward : goes to the next page

Back : goes to the previous page

Refresh for (IE) and reload for (Netscape) to
reload the page from the server

Stop : to interrupt current page transfer

View->source to see the HTML code of the current
page.
Teacher Nedaa Hisham
How to get the Internet service



ISPs (Internet service providers) get direct
Internet connection of a very high speed
Companies, universities and regular users
connect to Internet through the ISPs service.
"Backbone of the Internet", which is the
core of the Internet.
Teacher Nedaa Hisham
Favorite web pages



They refer to those web pages that are
frequently visited.
They can be renamed appropriately and
organized into folders by clicking on Create
In button in the Add to Favorites dialog box.
Favorites are called as such in Internet
explorer and called bookmarks in Netscape.
Teacher Nedaa Hisham
Finding info on the web




Can be done by using special meta sites
called search engines: They allow you to
search for other sites on the WWW.
Famous search engines include : AltaVista,
yahoo, Google , etc
The search result list is ordered such that
the information at the top of the list will
always be the most relevant ones to your
search.
Not all search engines use the same narrowing
techniques
Teacher Nedaa Hisham
Types of software found on the
web
In the world of internet, piracy or theft indicates illegal software
copying
Free software :
Come up along with their source code, the other name is
“Open Source Software”.
Free Software Foundation (FSF)
is a non-profit organization based in Boston, USA. It relies on
support from individuals to carry out our mission to preserve,
protect and promote the freedom to use, study, copy, modify,
and redistribute computer software, and to defend the rights
of all Free Software users.

This is usually meant for use by programmers who can
understand and elaborate on the associated code
 Gift of the programmer to the community.
 Totally free
Teacher Nedaa Hisham
Types of software found on the
web

Shareware :

Software that you can copy freely and pay a certain
amount of fee if you like and use it.
No source code is available because they are not meant
for programmers.
Usually, they come in a form cut-down or light versions (with
limited features). They also come as demonstration versions
of commercial software, which stops working after some
period, or which do not allow you to save files.



Plug-ins :
Extensions to software like browsers and graphic packages.
Examples are the visual audio and animators tools. The MP3
player, is a specific example of a browser plug-in.
Teacher Nedaa Hisham
Types of software found on the
web
Freeware:
Is a gift from the programmer to the user community.
 There is a variety of software available ranging from small
utilities to games, internet tools, business tools and
educational tools.
 An example of a site for downloading software is: CNET’s
download. COM.
 No source code is included
 Is not meant for use by programmers.
Teacher Nedaa Hisham
Benefits of free software
Other programmers could
 Improve the program
 Learn what clever tricks the first programmer
had used.
 Build on the best of each other's ideas
 Catch and correct errors they had found.
 Have other sources of income
Teacher Nedaa Hisham
What is HTML?
HTML (Hyper Text Markup Language). A text markup
language is a way of describing what the document text
means, or what it is supposed to look like, using
instructions embedded within the document,. A markup
language is just a collection of codes,
 HTML contains commands, called tags or elements, to
mark text as heading, paragraphs, lists, quotations, and so
on.
 HTML specifies where other documents are through using
URLs (Uniform Resource Locators), which is included in
HTML markup instructions and used by the user's browser
to find the designated resource.
Teacher Nedaa Hisham
HTML editors types



Editors that come along with browsers, such as the
Netscape composer
Some word processors, which have commands like
save as HTML facility. Examples are MS word, MS
publisher, WordPerfect, PowerPoint.
Sophisticated packages, like MS Home Publishing
Suit 2000, which use JavaScript to generate HTML
pages, pictures, animations, etc. The generated
pages are likely to work with IE only.
Teacher Nedaa Hisham
HTML editors types……

Basic editors:
 They are called wygiwym (what you get is what you
mean), because what appears in the browser
depends on the meaning of the selected tags
 Display HTML tags mixed with text
 To see how a page would look like on the web, it had
to be viewed in a browser.
 Tags are added using menus
 Offer full control of web design and is therefore
preferred by professionals.
Teacher Nedaa Hisham
HTML editors types……

Wysiwyg (What you see is what you get) editors :
 HTML tags are not normally visible, but can be
shown if desired
 Tags are created in a similar way as in regular word
processors
 Much easier to use, especially for beginners
 They can produce complex HTML code which
sometimes behaves strangely
 Example is the Front page editor
Teacher Nedaa Hisham
HTML



Is the standard used for writing documents
that are published on the WWW.
This standard is not meant to be the language
of a “Wysiwyg” as in word processors, but
rather it follows the wygiwym approach.
The interpretation of written codes are left to
the browser.
Teacher Nedaa Hisham
Basic elements of HTML
Main ingredients
HTML has been developing rapidly since it was invented.
Earlier HTML versions had only three main commands
which are well standardized across different browsers
These are: Headings, Lists, and Hyperlinks to other pages
and to pictures.
More recent major ingredients are:
 Tablets, Frames, and Forms (for interactivity including
buttons, pop-up menus, and text fields)
These recent ingredients are useful for improving the format
of a Web page and for making them interactive. However,
they are not well standardized.
Teacher Nedaa Hisham
HTML….
o Headings
<H1>This is a first level heading.</H1>
o
<H2>This is a second level
heading.</H2>
o
<H3>This is a third level heading.</H3>
o
<H4>This is a fourth level
heading.</H4>
o
Teacher Nedaa Hisham
HTML….
 Paragraphs:

<P> paragraph </P>.
 Lists:
 An ordered list





<OL>
<LI> the first item. </LI>.
<LI> the second item. </LI>
<LI> and so on.. </LI>
</OL>
Teacher Nedaa Hisham
HTML….
 This is an unordered list:
<UL>
<LI>Here is the first item.</LI>
<LI>Here is the second item.</LI>
<LI>And so on...</LI>
</UL>
Teacher Nedaa Hisham
HTML….
o To display a graphic on a web page:
o
< IMG SRC=”http://our of graphic” >
o To a document somewhere else on the web:
o
< A HREF=”http:// our of target site “ ></a>
Teacher Nedaa Hisham
HTML source of internal link (Link
within the document)
 Example of a link to within a document
[other paragraphs in the document]
Do you want to go back to the beginning of this document? This link
will take you back to the place where the anchor called 'start' has
been placed. (Just click on the underlined sentence).
____________________________________________________________
 HTML source of internal link example
<A NAME="start"></A>
[other paragraphs in the document]
<P>
<A HREF="#start">Do you want to go back to the beginning of this
document?</A> This link will take you back to the place where the
anchor called 'start' has been placed.</P>
Teacher Nedaa Hisham
Example of links e-mail
 And finally If u want people to send you an e-
mail click here, you can setup a ‘mailto link for
your self.
<p> And finally, <A HREF=mailto:[email protected]>, if you
want people to send you an e-mail click here</A>
,you can setup a ‘mailto:’ link for yourself.
</p>
Teacher Nedaa Hisham
General issues on good web design
techniques.
 Your site must be attractive.
 This is done by applying the following:









Use some of the advanced design principles.
Try to apply some kind of movements.
Make interaction.
This might require you to use a lot of extension to basic HTML. You
can do it by adding plug-ins, or by adding a little programming using Java
or JavaScript (which is beyond the scope of our course) as programming
languages designed for the Web.
Use Tables and Tables within Tables in addition to what you have learned
for displaying text or graphics in columns.
Use Frames which divides the browser window into different independent
sections.
Use colors for background, text and cells of tables to make your pages
look pretty and colorful. Sometimes colors are important to separate
different parts of the page, or if you want, make items flash to get the
viewers attention.
Use typefaces, sizes and styles to add interest and style.
Try to present a clear and simple structure for your pages.
Teacher Nedaa Hisham