5/15/2022

Principles of Internet
Technologies
Lecture 4:
Applications of the Internet
(Web Technology)
Assoc. Prof.
Ali A. Al-Ani

Department of Computer Science

College of1 Science

Network Components
1. The Network Hardware Devices.

2. Network Media: Wired: Twisted Pair cables, Co-axial, fiber Optic, Wireless: Microwave, Satellite

3. Network Types: we can classify networks in different ways:

1. Based on the network's Geographical Area and network size: (LAN,WAN, MAN, etc)

2. Based on Physical Topologies (connectivity): (Bus, Ring, Star, Mesh, Hybrid Topologies)

3. Based on Architecture method: (Peer-to-Peer, Client/Server)

4. Network Protocols: (TCP/IP).

5. Applications of the Internet (Web technology).

Department of Computer Science

College of2 Science

1
 5/15/2022

Internet Applications
• The internet has gained popularity rapidly as it is used for various purposes. Few of the main
applications of internet are listed below:

1. World Wide Web (Web technology)

2. E- mail (Electronic mail):

2. FTP (File transfer protocol).

3. E- Commerce.

4. Video Conferencing.

Department of Computer Science

College of3 Science

Web
The Web is an Internet-based distributed information system.

1. Anyone with a computer connected to the Internet can easily retrieve information by
giving a Web address or by simply clicking a mouse button.

2. The Web is a great way to disseminate information and making it available 24/7.

3. There is no central control or administration for the Web.

4. Maintainers and administrators can control and update Web content from anywhere on the
Web. All these make the Web a powerful tool for mass communication, e-business and e-
commerce.

Department of Computer Science

College of4 Science

2
 5/15/2022

Department of Computer Science

College of5 Science

Web  Internet
• The terms Internet and World Wide Web are often used in everyday speech without much
distinction. However, the Internet and the World Wide Web are not one and the same.

• Internet: a physical network connecting millions of computers using the same protocols for
sharing/transmitting information (TCP/IP).

• World Wide Web: a collection of interlinked multimedia documents that are stored on the
Internet and accessed using a common protocol (HTTP).

• Key distinction: Internet is hardware; Web is software.

Department of Computer Science

College of6 Science

3
 5/15/2022

URL
• Every page and resource on the Web has its own special address called a URL, which
stands for Uniform Resource Locator. Some URLs are short. Others may look like crazy
strings of characters separated by dots (periods) and slashes, but each part has a specific
purpose.

• A complete URL is generally made up of three components: the protocol, the site name,
and the absolute path to the document or resource, as shown below

Department of Computer Science

College of7 Science

Web Browsers
• A web browser or Internet browser is a software application for retrieving and presenting
information resources on the World Wide Web.
• Primary function of a browser is to identify the URI and brings the information resource to
user.
• All major browsers allow users to access multiple information resources at the same time in
different windows or in tabs. Major browsers include pop up blockers to prevent windows
to open without users consent.
• Some special web browsers are Internet Explorer, Mozilla, Firefox, Google Chrome,
Safari, Opera, Mobile browsers, etc.

Department of Computer Science

College of8 Science

4
 5/15/2022

Main Elements of Web Browsers

Department of Computer Science

College of9 Science

Web-related Technologies
• The following is a list of technologies associated with
web development.

1. Hypertext Markup Language (HTML)

2. Cascading Style Sheets (CSS)

3. JavaScript

4. Server-side programming and DB management.

Department of Computer Science

5/15/2022 College 10
of Science

5
 5/15/2022

Content

Host Web Design Design

Coding

Department of Computer Science

5/15/2022 College 11
of Science

Good vs. Bad Design

Department of Computer Science

5/15/2022 College 12
of Science

6
 5/15/2022

Good vs. Bad Design

• Most successful web designs have a few things in common:

1. They are accessible.

2. Most users have little problem finding the information they need.

3. They are easy to read.

4. There are good clean fonts laid out appropriately.

5. They are visually-appealing.

Department of Computer Science

5/15/2022 College 13
of Science

HTML
• HTML stands for Hyper Text Markup Language. HTML is not a programming language;
it is a markup language, which means it is a system for identifying and describing the
various components of a document such as headings, paragraphs, and lists.
• HTML command: all HTML commands are contained within angle brackets (< >). The
angle brackets simply tell browsers that the text between them is a HTML command. A tag
with its angle brackets looks like this: <tag_name>
• Most tags are paired, with an opening tag (<TAG>) and a closing tag (</TAG>). Both tags
look alike, except the closing tag also includes a forward slash (/).

Department of Computer Science

5/15/2022 College 14
of Science

7
 5/15/2022

HTML Tags
• To apply tags to information in the document, place the opening tag before the information,
and place the closing tag after the information, like this:

• For Example: <p> Learning HTML </p>

Department of Computer Science

5/15/2022 College 15
of Science

Basic Structure of HTML Document

• Well structured HTML documents come in these three parts:

1. A head that identifies a document as HTML and establishes its title.

2. A body that contains the content for a Web page. This part holds all displayed text on

a page, as well as most links to graphics, multimedia, locations inside the same file,

and to other Web documents.

3. A footer that labels a page by identifying its author, date of creation, and version

number.
Department of Computer Science
5/15/2022 College 16
of Science

8
 5/15/2022

HTML Page Structure

<html >
<head>
<title> Title here </title>
</head>
<body>
Page content goes here.
</body>
</html>

Department of Computer Science

5/15/2022 College 17
of Science

Tag Attributes
Some tags work in conjunction with attributes. Attributes live on the opening tag of an
element and provide extra information about the element that carries them.
All attributes consist of a name and a value; the name reflects a property of the element the
attribute is describing, and the value is a value for that property.
There are three groups of attributes that many of the HTML elements can carry:
1. Core attributes.
2. Internationalization attributes.
3. UI events.

Department of Computer Science

5/15/2022 College 18
of Science

9
 5/15/2022

Basic Text Formatting

1. Creating Headings Using <hn> Elements
• Most documents have headings in some
form or other. headings can help to
structure a document. HTML offers six
levels of headings, which use the elements
<h1>, <h2>, <h3>, <h4>, <h5>, and
<h6>. The <h1> element as the largest of
the six and <h6> as the smallest.

Department of Computer Science

5/15/2022 College 19
of Science

Basic Text Formatting

2. Creating Paragraphs Using the <p> Element: Each paragraph of text should go in
between an opening <p> and closing </p> tag, as in this example
<p>Here is a paragraph of text.</p>
3. Creating Line Breaks Using the <br /> Element: Whenever you use the <br /> tag,
anything following it starts on the next line.
4. Creating Preformatted Text Using the <pre> Element: Any text between the opening
<pre> tag and the closing </pre> tag will preserve the formatting of the source document.
Two of the most common uses of the <pre> element are to display tabular data without the
use of a table and to represent computer source code.

Department of Computer Science

5/15/2022 College 20
of Science

10
 5/15/2022

Presentational Elements
1. The <b> Element: Anything that appears in a <b> element is displayed in bold, for Ex:
bold  <b> bold </b>
2. The <i> Element: The content of an <i> element is displayed in italicized text, for Ex:
italic  <i> italic</i>
3. The <u> Element : The content of a <u> element is underlined with a simple line:
underlined  <u> underlined</u>
4. The <hr /> tag: The <hr /> tag creates a horizontal rule across the page.
5. The <s> and <strike> Elements: The content of an <s> or <strike> element is displayed
with a strikethrough, Ex: Strikethrough  <s> strikethrough</s>

Department of Computer Science

College 21
of Science

Presentational Elements
6. The <sup> Element: The content of a <sup> element is written in superscript, Ex. 31st 
31^st. The <sup> element is especially helpful in adding exponential values to
equations, and adding the st, nd, rd, and th suffixes to numbers such as dates.
7. The <sub> Element: The content of a <sub> element is written in subscript, Ex. Log2 
log₂
8. The <big> Element: The content of the <big> element is displayed one font size larger than
the rest of the text surrounding it. HTML  H<big> TM</big>L
9. The <small> Element: The content of the <small> element is displayed one font size
smaller than the rest of the text surrounding it. HTML  H<small> TM</small>L

Department of Computer Science

College 22
of Science

11
 5/15/2022

HTML : Lists
• We can create three types of lists in HTML:
1. Unordered lists, which are like lists of bullet points.
2. Ordered lists, which use a sequence of numbers or letters instead of bullet points.
3. Definition lists, which allow you to specify a term and its definition.
• Using the <ul> Element to Create Unordered Lists:
• If we want to make a list of bullet points, we write the list within the <ul> element (which
stands for unordered list). Each bullet point or line we want to write should then be
contained between opening <li> tags and closing </li> tags (the li stands for list item).
<ul> <li>Bullet point number</li> </ul>

Department of Computer Science

College 23
of Science

HTML : Lists
2. Using the <ol> Element to Create ordered Lists
• Sometimes, we want our lists to be ordered. In an ordered list, rather than prefixing each
point with a bullet point, we can use either numbers (1, 2, 3), letters (A, B, C), or Roman
numerals (i, ii, iii) to prefix the list item.
• An ordered list is contained inside the <ol> element. Each item in the list should then be
nested inside the <ol> element and contained between opening <li> and closing </li> tags.
<ol> <li>Point number</li> </ol>
• If we would rather have letters or Roman numerals than Arabic numbers, we must use the
type attribute on the <ol> element.

Department of Computer Science

College 24
of Science

12
 5/15/2022

HTML : Lists
• Using the type Attribute to Select Numbers, Letters, or Roman Numerals in Ordered Lists,
by giving the type attribute the corresponding character.

Value for type Attribute Description Examples

1 Arabic numerals (the default) 1, 2, 3, 4, 5
A Capital letters A, B, C, D, E
a Small letters a, b, c, d, e
I Large Roman numerals I, II, III, IV, V
i Small Roman numerals i, ii, iii, iv, v

Department of Computer Science

College 25
of Science

HTML : Lists
• All of the universal attributes and UI event attributes can be used with the <ol> elements,
and also a special attribute start, to control the number a list starts at.
• If we want to specify the number that a numbered list should start at, we can use the start
attribute on the <ol> element. The value of this attribute should be the numeric
representation of that point in the list, so a D in a list that is ordered with capital letters
would be represented by the value 4:
<ol type=”A” start=”4”>
<li>Point number one</li> <li>Point number two</li> <li>Point number three</li>
</ol>
Department of Computer Science
College 26
of Science

13
 5/15/2022

Special Characters
• We can use most alphanumeric characters in our document and they will be displayed
without a problem. However, there are some characters that have special meaning in
HTML, For example, we cannot use the angle brackets that start and end tags. To sove
this problem, We can use a set of different characters known as a character entity to
represent these special characters.
Special Character HTML Code Displays As
Blank Space &nbsp;
Open or Close Quote &quot; "
Ampersand &amp; &
Less Than &lt; <
Greater Than &gt; >

Department of Computer Science

College 27
of Science

Comments
• We can leave notes in the source document for yourself and others by marking them up as
comments. Anything we put between comment tags (<!-- -->) will not display in the
browser and will not have any effect on the rest of the source.
<!-- This is a comment -->
<!-- This is a multiple-
line comment
that ends here. -->
• Comments are useful for labeling and organizing long documents, particularly when they
are shared by a team of developers.
Department of Computer Science
College 28
of Science

14
 5/15/2022

The End

Department of Computer Science

College 29
of Science

15