Module 5 and 6

MODULE-5 AND
MODULE 6
Internet Basics

Basic Elements of a Communication
System
11/1/2018 INFO 108 Computer Fundamentals and its Applications 2

Data Transmission Modes

Metropolitan Area Network

• Network that provides
the long distance
transmission of data,
voice, image and
video information over
large geographical
areas that may
comprise a country or
a continent. Range:
Beyond 100 KMs.
WAN: Wide Area Network

Differences : LAN, MAN and WAN

SomeCommonTerms
• The Internet is a network of computers spanning the
globe. It is also called the World Wide Web.
• An Internet Browser is a software program that enables
you to view Web pages on your computer. Browsers
connect computers to the Internet, and allow people to
“surf the Web.”
• Internet Explorer is one of the browsers most commonly
used. There are other browsers available as well,
including Netscape.

• A site or area on the World Wide Web that is
accessed by its own Internet address is called a
Web site.
• A Web Page is like a page in a book. Websites
often have several pages that you can access by
clicking on links. A Web site can be a collection
of related Web pages.
• Each Web site contains a home page (this is the
original starting page) and may also contain
additional pages.
• Different computers will have different home
pages. You can set your own webpage.

PartsofaWebAddress
• A web address is typically composed of four parts:
• For example, the address http://www.google.ca is made
up of the following areas:
• http://
This Web server uses Hypertext Transfer Protocol
(HTTP). This is the most common protocol on the Internet.
• www
This site is on the World Wide Web.
• google
The Web server and site maintainer.
• ca
This tells us it is a site in Canada.

• Endings of web pages tells us a bit about the page. Some
common endings to web addresses are:
• com (commercial)
• edu (educational institution)
• gov (government)
• net (network)
• org (organization)
• You might also see addresses that add a country code as
the last part of the address such as:
• ca (Canada)
• uk (United Kingdom)
• fr (France)
• us (United States of America)
• au (Australia)

WorkingwithInternet
1. Go to the address bar. Click once to highlight the address. (It
should turn blue).
2. Hit the Delete key on your keyboard.
3. Enter the following address: www.theweathernetwork.com
4. Then press Enter on the keyboard or click on the word Go on
the right side of the Address Bar.

SearchtheInternet
• If you don’t know the address of the webpage,
but want to learn more about a topic or find a
particular website, you will need to do a
search.
• There are several handy search engines out
there that will locate information for you. Two
of the mostly commonly used are:
www.google.com
www.yahoo.com

What is an IP address?
• IP (Internet Protocol) address
• device used by routers, to select best path from source to
destination, across networks and internetworks
• network layer address, consisting of NETWORK portion, and
HOST portion
• logical address, assigned in software by network administrator
• part of a hierarchical ‘numbering scheme’ - unique, for reliable
routing
• may be assigned to a host pc, or router port
A way to identify machines on a network
A unique identifier

IP usage
Used to connect to another computer
Allows transfers of files and e-mail

IP Addresses
IP addresses are:
Unique
Global and Standardised
Essential

Domain Name and URLs
• The domain name is the textual representation of the IP
address, used to identify a specific Web page or pages,
and comes after the "://".
• For example, one of the IP addresses assigned to
Facebook is 69.63.176.13; conversely, the domain name
for Facebook's IP address is facebook.com.
• Every domain name has a top level domain. These are
simple suffixes attached to the end of the domain name
that indicates its place in the domain name hierarchy.
Common top level domains are .com, org, .net, and .gov.

Clues That Web Addresses Can Give
You
• There's a lot of information that you can glean from a
simple URL, including:
• what kind of server the Web page is hosted on
• what kind of organization the Web page belongs to
• where the Web page is located in the world
• the names of the directories on the website
• By carefully looking at the different parts of any Web
address, you can quickly determine quite a bit of useful
information. In addition, by simply deleting parts of the
URL, you can learn more about the website than what
might be actually publicly accessible.

HTML
• HTML is a computer language devised to allow website creation. These
websites can then be viewed by anyone else connected to the Internet. It is
relatively easy to learn, with the basics being accessible to most people in
one sitting; and quite powerful in what it allows you to create.
• The definition of HTML is HyperText Markup Language.
• HyperText is the method by which you move around on the web — by
clicking on special text called hyperlinks which bring you to the next
page.
• Markup is what HTML tags do to the text inside them. They mark it
as a certain type of text (italicised text, for example).
• HTML is a Language, as it has code-words and syntax like any other
language.

How does it work?
• HTML consists of a series of short codes typed into a text-file by the site
author — these are the tags. The text is then saved as a html file,
and viewed through a browser, like Internet Explorer or Netscape
Navigator. This browser reads the file and translates the text into a visible
form, hopefully rendering the page as the author had intended. Writing your
own HTML entails using tags correctly to create your vision. You can use
anything from a rudimentary text-editor to a powerful graphical editor to
create HTML pages.

Is there anything HTML can’t do?
• Of course, but since making websites became more
popular and needs increased many other supporting
languages have been created to allow new stuff to
happen, plus HTML is modified every few years to make
way for improvements.
• Cascading Stylesheets are used to control how your
pages are presented, and make pages more accessible.
Basic special effects and interaction is provided
by JavaScript, which adds a lot of power to basic HTML.

HTML
• HTML stands for Hypertext Markup Language, and it is the
most widely used language to write Web Pages.
• Hypertext refers to the way in which Web pages (HTML
documents) are linked together. Thus the link available on a
webpage are called Hypertext.
• As its name suggests, HTML is a Markup Language which
means you use HTML to simply "mark up" a text document with
tags that tell a Web browser how to structure it to display.
• Originally, HTML was developed with the intent of defining the
structure of documents like headings, paragraphs, lists, and so
forth to facilitate the sharing of scientific information between
researchers.
• Now, HTML is being widely used to format web pages with the
help of different tags available in HTML language.

Basic HTML Document
In its simplest form, following is an example of an HTML document:
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>

• Either you can use Try it option available at the top right
corner of the code box to check the result of this HTML
code, or let's save it in an HTML file test.htm using your
favorite text editor. Finally open it using a web browser
like Internet Explorer or Google Chrome, or Firefox etc. It
must show the following output:

HTML Tags
• As told earlier, HTML is a markup language and makes
use of various tags to format the content. These tags are
enclosed within angle braces <Tag Name>. Except few
tags, most of the tags have their corresponding closing
tags. For example <html> has its closing
tag </html> and <body> tag has its closing
tag </body> tag etc.
• Above example of HTML document uses folloiwng tags:

HTML TAGS
Heading Tags
Any document starts with a heading. You can use different sizes for your
headings. HTML also has six levels of headings, which use the
elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While
displaying any heading, browser adds one line before and one line after that
heading.

This will produce the following result:

Paragraph Tag
The <p> tag offers a way to structure your text into different paragraphs.
Each paragraph of text should go in between an opening <p> and a closing
</p> tag as shown below in the example:

This will produce following result:
Here is a first paragraph of text.
Here is a second paragraph of text.
Here is a third paragraph of text.

Line Break Tag
Whenever you use the <br /> element, anything following it starts from the next
line.
This tag is an example of an empty element, where you do not need opening and
closing tags, as there is nothing to go in between them.
The <br /> tag has a space between the characters br and the forward slash.
If you omit this space, older browsers will have trouble rendering the line break,
while if you miss the forward slash character and just use <br>

Hello
You delivered your assignment ontime.
Thanks
Mahnaz

Centering Content
You can use <center> tag to put any content in the center of the page or
any table cell.

This text is not in the center.
This text is in the center.

HTML Elements
An HTML element is defined by a starting tag. If the element contains other
content, it ends with a closing tag, where the element name is preceded by a
forward slash as shown below with few tags:
So here <p>....</p> is an HTML element, <h1>...</h1> is another HTML
element. There are some HTML elements which don't need to be closed, such as
<img.../>, <hr /> and <br /> elements. These are known as void elements.

HTML Tag vs. Element
• An HTML element is defined by a starting tag. If the
element contains other content, it ends with a closing tag.
• For example <p> is starting tag of a paragraph and </p>
is closing tag of the same paragraph but <p>This is
paragraph</p> is a paragraph element.

Nested HTML Elements
It is very much allowed to keep one HTML element inside another HTML
element:
This will display following result:
This is italic heading
This is underlined paragraph

HTMLAttributes
• An attribute is used to define the characteristics of an
HTML element and is placed inside the element's opening
tag. All attributes are made up of two parts: a name and a
value:
• • The name is the property you want to set. For
example, the paragraph <p> element in the example
carries an attribute whose name is align, which you can
use to indicate the alignment of paragraph on the page.
• • The value is what you want the value of the property
to be set and always put within quotations. The below
example shows three possible values of align attribute:
left, center and right.

HTML Formatting
Bold Text
Anything that appears within <b>...</b> element, is displayed in bold as
shown below:
The following word uses a bold typeface.

Italic Text
Anything that appears within <i>...</i> element is displayed in italicized
as shown below:

Underlined Text
Anything that appears within <u>...</u> element, is displayed with
underline as shown below:

Strike Text
Anything that appears within <strike>...</strike> element is displayed
with strikethrough, which is a thin line through the text as shown below:
The following word uses a strikethrough typeface.

HTML IMAGE
• You can insert any image in your web page by
using <img> tag. Following is the simple syntax to use
this tag.
• <img src="Image URL" ... attributes-list/>
• The <img> tag is an empty tag, which means that it can
contain only list of attributes and it has no closing tag.

You can use PNG, JPEG or GIF image file based on your comfort but
make sure you specify correct image file name in src attribute. Image
name is always case sensitive.
The alt attribute is a mandatory attribute which specifies an alternate text
for an image, if the image cannot be displayed.

Set Image Width/Height
You can set image width and height based on your requirement
using widthand height attributes. You can specify width and height of the
image in terms of either pixels or percentage of its actual size.

HTML Colors
• Colors are very important to give a good look and feel to
your website. You can specify colors on page level using
<body> tag or you can set colors for individual tags
using bgcolor attribute.
• The <body> tag has following attributes which can be
used to set different colors:
• bgcolor - sets a color for the background of the page.
• text - sets a color for the body text.

HTML Color Coding Methods
• There are following three different methods to set colors in
your web page:
• Color names - You can specify color names directly like
green, blue or red.
• Hex codes - A six-digit code representing the amount of
red, green, and blue that makes up the color.
• Color decimal or percentage values - This value is
specified using the rgb( ) property.

HTML Colors - Color Names
• You can sepecify direct a color name to set text or
background color. W3C has listed 16 basic color names
that will validate with an HTML validator but there are over
200 different color names supported by major browsers.
• W3C Standard 16 Colors
• Here is the list of W3C Standard 16 Colors names and it
is recommended to use them.

Setting Font Color
• You can set any font color you like using color attribute.
You can specify the color that you want by either the color
name or hexadecimal code for that color.

CSS
• The terms CSS stands for Cascading Style Sheet.
• The word "style sheet" refers to the document itself (like HTML,
CSS files are really just text documents that can be edited with
variety of programs). Style sheets have been used for
document design for years. They are the technical
specifications for a layout, whether print or online.
• Print designers have long used style sheets to insure that their
designs are printed exactly to specifications.
• A style sheet for a web page serves the same purpose, but
with the added functionality of also telling the viewing engine
(the web browser) how to render the document being viewed.
Today, CSS style sheets can also use media queries to change
the way a page looks for different devices and screen sizes.

• Cascade is the special part of the term "cascading style
sheet".
• A web style sheet is intended to cascade through a series
of style sheets, like a river over a waterfall. The water in
the river hits all the rocks in the waterfall, but only the
ones at the bottom affect exactly where the water will flow.
The same is true of the cascade in Web style sheets.
• Every Web page is affected by at least one style sheet,
even if the web designer doesn't apply any styles. For
example, by default hyperlinks are styles in blue and they
are underlined. Those styles comes from a web browser's
default style sheet. If the web designer provides other
instructions, however, the browser will need to know
which instructions have precedence.

• Where is CSS Used?
• CSS can also used to define how web pages should look when
viewed in other media than a web browser. For example, you
can create a print style sheet that will define how the web page
should print out.
• Because web page items like navigation buttons or web forms
will have no purpose on the printed page, a Print Style Sheet
can be used to "turn off" those areas when a page is printed.
• Why is CSS Important?
• CSS is one of the most powerful tools a web designer can
learn because with it you can affect the entire visual
appearance of a Web site. Well written style sheets can be
updated quickly and allow sites to change what is prioritized or
valued without any changes to the underlying HTML markup.
• The challenge of CSS is that there is so much to learn - and
with browsers changing every day, what works well today may
not make sense tomorrow as new styles become supported.

Module 5 and 6

More Related Content

What's hot (20)

Similar to Module 5 and 6 (20)

More from Mitali Chugh (20)

Recently uploaded (20)

Module 5 and 6