Web+html

Introduction to the
Internet and Web

Internet
• It is the largest network in the world that
connects hundreds of thousands of individual
networks all over the world.
• The popular term for the Internet is the
“information highway”.
• Rather than moving through geographical space,
it moves your ideas and information through
cyberspace – the space of electronic movement
of ideas and information.

Internet
• No one owns it
• It has no formal management organization.
• As it was originally developed by the Department
of defense, this lack of centralization made it less
vulnerable to wartime attacks.
• To access the Internet, an existing network need
to pay a small registration fee and agree to certain
standards based on the TCP/IP (Transmission
Control Protocol/Internet Protocol) .

What is Web?
• The Web (World Wide Web) consists of information
organized into Web pages containing text and graphic
images.
• It contains hypertext links and images that lead to
related information.
• A collection of linked Web pages that has a common
theme or focus is called a Web site.
• The main page that all of the pages on a particular
Web site are organized around and link back to is
called a home page.

Internet Service Provider (ISP)
• A commercial organization with permanent connection to the
Internet that sells connections to subscribers.
• Examples:
Nayatel, PTCL, Wateen, Wi-tribe.

How to access the Web?
• Once you have your Internet connection, then you need special
software called a browser to access the Web.
• Web browsers are used to connect you to remote computers, open
and transfer files, display text and images.
• Web browsers are specialized programs.
• Examples of Web browser: Chrome, Safari, Firefox, Internet
Explorer.

Client/Server Structure of the Web
• Web is a collection of files that reside on computers,
called Web servers, that are located all over the
world and are connected to each other through the
Internet.
• When you use your Internet connection to become
part of the Web, your computer becomes a Web
client in a worldwide client/server network.
• A Web browser is the software that you run on your
computer to make it work as a web client.

Addresses on the Web:IP Addressing
• Each computer on the internet does have a unique identification
number, called an IP (Internet Protocol) address.
• The IP addressing system currently in use on the Internet uses a four-
part number.
• Each part of the address is a number ranging from 0 to 255, and each
part is separated from the previous part by a dot (.),
• For example
• 115.186.163.226
• 192.168.1.1

Domain Name Addressing
• Most web browsers do not use the IP address to locate
Web sites and individual pages.
• They use domain name addressing.
• A domain name is a unique name associated with a
specific IP address by a program that runs on an
Internet host computer.
• This program, which coordinates the IP addresses and
domain names for all computers attached to it, is
called DNS (Domain Name System ) software.
• The host computer that runs this software is called a
domain name server.

Domain Name Addressing
• Domain names can include any number of parts separated by
dot, however most domain names currently in use have only
three or four parts.
• Domain names follow hierarchical model that you can follow
from top to bottom if you read the name from the right to the
left.
• For example, the domain name abasyn.edu.pk
• Abasyn is the computer connected to the Internet at the abasyn
university,
• Educational institution (edu)
• Pakistan (pk)
• No other computer on the Internet has the same domain name.

Uniform Resource Locators
• The IP address and the domain name each identify a particular
computer on the Internet.
• However, they do not indicate where a Web page’s HTML
document resides on that computer.
• To identify a Web pages exact location, Web browsers rely on
Uniform Resource Locator (URL).
• URL is a four-part addressing scheme that tells the Web
browser:
What transfer protocol to use for transporting the file
The domain name of the computer on which the file resides
The pathname of the folder or directory on the computer on
which the file resides
The name of the file

Structure of a Uniform Resource Locators
filename
http => Hypertext Transfer Protocol
http://edition.cnn.com/2016football/england-russia-euro2016/index.html
protocol
Domain name
pathname

HTTP
• The transfer protocol is the set of rules that the
computers use to move files from one computer
to another on the Internet.
• The most common transfer protocol used on the
Internet is the Hypertext Transfer Protocol
(HTTP).
• Two other protocols that you can use on the
Internet are the File Transfer Protocol (FTP) and
the Telnet Protocol

Hypertext Markup Language (HTML)
• The public files on the web servers are ordinary text files, much
like the files used by word-processing software.
• To allow Web browser software to read them, the text must be
formatted according to a generally accepted standard.
• The standard used on the web is Hypertext markup language
(HTML).

HypertextMarkupLanguage(HTML)
• HTML uses codes, or tags, to tell the Web browser
software how to display the text contained in the
document.
• For example, a Web browser reading the following line of
text:
<B> A Review of the Book<I>Wind Instruments of
the 18th Century</I></B>
• recognizes the <B> and </B> tags as instructions to display
the entire line of text in bold and the <I> and </I> tags as
instructions to display the text enclosed by those tags in
italics.

“Normal text” surrounded by
bracketed tags that tell browsers how
to display web pages
Pages end with “.htm” or “.html”
HTML Editor – A word processor that
has been specialized to make the
writing of HTML documents more
effortless.
18

Tags
Codes enclosed in brackets
Usually paired
<TITLE>My Web Page</TITLE>
Not case sensitive
<TITLE> = <title> = <TITLE>
19

Choosing Text Editor
 There are many different programs that you can use
to create web documents.
 HTML Editors enable users to create documents
quickly and easily by pushing a few buttons. Instead
of entering all of the HTML codes by hand.
 These programs will generate the HTML Source Code
for you.
20

Choosing Text Editor
 HTML Editors are excellent tools for experienced web
developers; however; it is important that you learn
and understand the HTML language so that you can
edit code and fix “bugs” in your pages.
 For this Course, we will focus on using the standard
Microsoft Windows text editors, NotePad. We may
use also textpad.
21

Creating a Basic Starting
Document
<HTML>
<HEAD>
<TITLE>Abasyn University</TITLE>
</HEAD>
<BODY>
This is what is displayed.
</BODY>
</HTML> 24

Creating a Basic Starting
Document
The HEAD of your document point to above
window part. The TITLE of your document
appears in the very top line of the user’s
browser. If the user chooses to “Bookmark”
your page or save as a “Favorite”; it is the
TITLE that is added to the list.
The text in your TITLE should be as descriptive as
possible because this is what many search
engines, on the internet, use for indexing your
site.
25

Previewing Your Work
Once you have created your basic starting document
and set your document properties it is a good idea to
save your file.
To save a file, in NotePad, follow these steps:
1. Locate and click on the menu called “File”.
2. Select the option under File Menu labeled “Save
As”.
3. In the “File Name” text box, type in the entire
name of your file (including the extension
name .html).
26

Edit, Save and View Cycle
To preview Your Work, open a web browser and do the
following:
1. Click on the menu labeled “File”.
2. Locate the menu option, “Open”.
27

Edit, Save and View Cycle
3. In the “Open” dialog box, click on the
“Browse” button and locate your web
document.
4. Click “OK” once you have selected your file.
 The web browser will load the same document
but with the new revisions. This process is the
Edit, Save and View Cycle.
28

Headings,Paragraphs,Breaks&HorizontalRules
Objectives
Upon completing this section, you should be able to
1. List and describe the different Heading elements.
2. Use Paragraphs to add text to a document.
3. Insert breaks where necessary.
4. Add a Horizontal Rule.
29

Headings, <Hx> </Hx>
Inside the BODY element, heading elements H1
through H6 are generally used for major divisions of the
document. Headings are permitted to appear in any
order, but you will obtain the best results when your
documents are displayed in a browser if you follow
these guidelines:
1. H1: should be used as the highest level of heading, H2 as
the next highest, and so forth.
2. You should not skip heading levels: e.g., an H3 should not
appear after an H1, unless there is an H2 between them.
31

Headings, <Hx> </Hx>
<HTML>
<HEAD>
<TITLE> Example Page</TITLE>
</HEAD>
<BODY>
<H1> Heading 1 </H1>
</BODY>
</HTML>
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
32

Paragraphs, <P> </P>
 Paragraphs allow you to add text to a document in such a way
that it will automatically adjust the end of line to suite the
window size of the browser in which it is being displayed. Each
line of text will stretch the entire length of the window.
33

Paragraphs, <P> </P>
<HTML><HEAD>
</HEAD>
<BODY></H1> Heading 1 </H1>
<P> Paragraph 1, ….</P>
<H6> Heading 6</H6>
</BODY></HTML>
Heading 1
Paragraph 1,….
Heading 2
Paragraph 2,….
Heading 3
Paragraph 3,….
Heading 4
Paragraph 4,….
Heading 5
Paragraph 5,….
Heading 6
Paragraph 6,….
34

Break, <BR>
 Line breaks allow you to decide where the text
will break on a line or continue to the end of the
window.
 A <BR> is an empty Element, meaning that it
may contain attributes but it does not contain
content.
 The <BR> element does not have a closing tag.
35

Break, <BR>
<HTML>
<HEAD>
</HEAD>
<BODY>
<P>Paragraph 1, <BR>
Line 2 <BR> Line 3 <BR>….
</P>
</BODY>
</HTML>
Heading 1
Paragraph 1,….
Line 2
Line 3
….
36

Horizontal Rule, <HR>
The <HR> element causes the
browser to display a horizontal
line (rule) in your document.
<HR> does not use a closing tag,
</HR>.
37

Attribute Description Default Value
SIZE
Height of the rule in
pixels
2 pixels
WIDTH
Width of the rule in
pixels or percentage
of screen width
100%
NOSHADE
Draw the rule with a
flat look instead of a
3D look
Not set
(3D look)
ALIGN
Aligns the line (Left,
Center, Right)
Center
COLOR
Sets a color for the
rule (IE 3.0 or later)
Not set
38

<HTML>
<HEAD>
</HEAD>
<BODY>
<P>Paragraph 1, <BR>
Line 2 <BR>
<HR>Line 3 <BR>
</P>
</BODY>
</HTML>
Heading 1
Paragraph 1,….
Line 2
________________________
___
Line 3
39

Character Formatting
Bold, Italics, and other character formatting options.
Objectives
1. Change the color and size of your text.
2. Use Common Character Formatting Elements.
3. Align your text.
4. Add special characters.
5. Use other character formatting elements.
40

Bold, Italic and other CharacterFormatting
Elements
 <B> Bold </B>
 <I> Italic </I>
 <U> Underline </U>
 Color = “#RRGGBB” The COLOR attribute of the FONT
element. E.g., <FONT COLOR=“#RRGGBB”>this text has
color</FONT>
41

Alignment
 <DIV ALIGN=“value”></DIV> Represents a division in the
document and can contain most other element type. The alignment
attribute of the DIV element is well supported.
 <TABLE></TABLE> Inside a TABLE, alignment can be set for each
individual cell.
42

Alignment
 Some elements have attributes for alignment (ALIGN) e.g.
Headings, Paragraphs and Horizontal Rules.
 The Three alignment values are : LEFT, CENTER.
 <CENTER></CENTER> Will center elements.
43

Example
<html>
<body>
<p>This is some text.</p>
<div style="color:#0000FF">
<h3>This is a heading in a div element</h3>
<p>This is some text in a div element.</p>
</div>
<DIV style="color:#0000FF", ALIGN=center>
<h3>This is a heading in a div element</h3>
<p>This is some text in a div element.</p>
</DIV>
</body>
</html>

Example
<P><STRIKE> strike-through text </STRIKE></BR>
<BIG>places text in a big font </BIG><BR>
<SMALL> places text in a small font</SMALL><BR>
<SUB> places text in subscript position </SUB>
Normal
<SUP> places text in superscript style position </SUP><BR>
</P> 45

Lists
In this chapter you will learn how to create a variety of lists.
Objectives
1. Create an unordered list.
2. Create an ordered list.
3. Create a defined list.
4. Nest Lists.
46

List Elements
 HTML supplies several list elements. Most list elements are
composed of one or more <LI> (List Item) elements.
 UL : Unordered List. Items in this list start with a list mark such
as a bullet. Browsers will usually change the list mark in
nested lists.
<UL>
<LI> List item …</LI>
</UL>
• List item …
• List item …
47

List Elements
 You have the choice of three bullet types: disc(default), circle,
square.
 These are controlled in Netscape Navigator by the “TYPE”
attribute for the <UL> element.
<UL TYPE=“square”>
</UL>
 List item …
 List item …
 List item …
48

List Elements
 OL: Ordered List. Items in this list are numbered
automatically by the browser.
<OL>
</OL>
1. List item …
2. List item …
3. List item
 You have the choice of setting the TYPE Attribute to
one of five numbering styles.
49

List Elements
TYPE Numbering Styles
1 Arabic numbers 1,2,3, ……
a Lower alpha a, b, c, ……
A Upper alpha A, B, C, ……
i Lower roman i, ii, iii, ……
I Upper roman I, II, III, ……
50

List Elements
 You can specify a starting number for an ordered list.
<OL TYPE =“i”>
</OL>
<P> text ….</P>
<OL TYPE=“i” START=“3”>
</OL>
51

List Elements
i. List item …
ii. List item …
Text ….
iii. List item …
52

List Elements
 DL: Definition List. This kind of list is different from the
others. Each item in a DL consists of one or more Definition
Terms (DT elements), followed by one or more Definition
Description (DD elements).
<DL>
<DT> HTML </DT>
<DD> Hyper Text Markup Language </DD>
<DT> Friend</DT>
<DD> A human’s best friend!</DD>
</DL>
HTML
Hyper Text Markup Language
A friend in need is a friend indeed!
53

Nesting Lists
 You can nest lists by inserting a UL, OL, etc., inside a list item (LI).
EXample
<UL TYPE = “square”>
<LI> List item …
<OL TYPE=“i” START=“3”>
</OL>
</LI>
</UL>
54

What will be the output?
55
<H1 ALIGN="CENTER">SAFETY TIPS FOR CANOEISTS</H1>
<OL TYPE=“a” START=“2”>
<LI>Be able to swim </LI>
<LI>Wear a life jacket at all times </LI>
<LI>Don't stand up or move around. If canoe tips,
<UL>
<LI>Hang on to the canoe </LI>
<LI>Use the canoe for support and </LI>
<LI>Swim to shore
</UL> </LI>
<LI>Don't overexert yourself </LI>
<LI>Use a bow light at night </LI>
</OL>

57
<H1 ALIGN="CENTER">SAFETY TIPS FOR
CANOEISTS</H1>
<OL TYPE="a" START="2">
<LI>Be able to swim </LI>
<LI>Wear a life jacket at all times </LI>
<LI>Don't stand up or move around. If canoe tips,
<UL>
<LI>Hang on to the canoe </LI>
<LI>Use the canoe for support
<OL type="I" start="4">
<LI> Be careful </LI>
<LI> Do not look around</LI>
</LI> </OL>
<LI>Swim to shore
</UL> </LI>
<LI>Don't overexert yourself </LI>
<LI>Use a bow light at night </LI>
</OL>
What
will
be the
output?

Images
Will learn about images and how to place images in your pages.
Objectives
1. Add images to your pages.
59

Images
 <IMG>This element defines a graphic image on
the page.
 Image File (SRC:source): This value will be a URL
(location of the image) E.g.
http://www.domain.com/dir/file.ext or
/dir/file.txt.
 Alternate Text (ALT): This is a text field that
describes an image or acts as a label.
 Alignment (ALIGN): This allows you to align the
image on your page.
60

Images
 Width (WIDTH): is the width of the image in pixels.
 Height (HEIGHT): is the height of the image in pixels.
 Border (BORDER): is for a border around the image,
specified in pixels.
61

Some Examples on images
1) <IMG SRC=“jordan.gif” border=4>
2) <IMG SRC=“ jordan.gif "width="60" height="60">
3) <IMG SRC=“jordan.gif "ALT="This is a text that goes with the
image">
4) <IMG SRC “jordan.gif “ border=20>
5) < IMG SRC =" jordan.gif“ align="left">
62

Anchors, URLs
In this chapter you will learn about Uniform Resource
Locator, and how to add them as Anchor or Links
inside your web pages.
Objectives
1. Insert links into documents.
2. Define Link Types.
3. Define URL.
4. List some commonly used URLs.
63

HOW TO MAKE A LINK
1) The tags used to produce links are the <A>
and </A>. The <A> tells where the link should start and
the </A> indicates where the link ends. Everything between
these two will work as a link.
2) The example below shows how to make the word
Here work as a link to yahoo.
Click <A HREF="http://www.yahoo.com">here</A> to
go to yahoo.
64

Tables
In this chapter you will learn that tables have many uses in
HTML.
Objectives:
Upon completing this section, you should be able to:
1. Insert a table.
2. Explain a table’s attributes.
3. Edit a table.
4. Add a table header.
67

Tables
 The <TABLE></TABLE> element has four sub-
elements:
1. Table Row<TR></TR>.
2. Table Header <TH></TH>.
3. Table Data <TD></TD>.
 The table row elements usually contain table
header elements or table data elements.
68

Tables
<table border=“1”>
<tr>
<th> Column 1 header </th>
<th> Column 2 header </th>
</tr>
<tr>
<td> Row1, Col1 </td>
</tr>
<tr>
</tr>
</table> 69

Tables
Column 1 Header Column 2 Header
Row1, Col1 Row1, Col2
Row2, Col1 Row2, Col2
70

Tables Attributes
 BGColor: Some browsers support background colors
in a table.
 Width: you can specify the table width as an
absolute number of pixels or a percentage of the
document width. You can set the width for the table
cells as well.
 Border: You can choose a numerical value for the
border width, which specifies the border in pixels.
 CellSpacing: Cell Spacing represents the space
between cells and is specified in pixels. 71

Table Attributes
 CellPadding: Cell Padding is the space between the cell border and
the cell contents and is specified in pixels.
 Align: tables can have left, right, or center alignment.
 Background: Background Image, will be titled in IE3.0 and above.
 BorderColor, BorderColorDark.
72

Table Caption
 A table caption allows you to specify a line of text
that will appear centered above or bellow the table.
<TABLE BORDER=1 CELLPADDING=2>
<CAPTION ALIGN=“BOTTOM”> Label For My Table
</CAPTION>
 The Caption element has one attribute ALIGN that
can be either TOP (Above the table) or BOTTOM
(below the table).
73

Table Header
 Table Data cells are represented by the TD element. Cells can
also be TH (Table Header) elements which results in the
contents of the table header cells appearing centered and in
bold text.
74

Table Data and Table Header
Attributes
 Colspan: Specifies how many cell columns of the table this cell
should span.
 Rowspan: Specifies how many cell rows of the table this cell
should span.
 Align: cell data can have left, right, or center alignment.
 Valign: cell data can have top, middle, or bottom alignment.
 Width: you can specify the width as an absolute number of
pixels or a percentage of the document width.
 Height: You can specify the height as an absolute number of
pixels or a percentage of the document height.
75

Basic Table Code
<TABLE BORDER=1 width=50%>
<CAPTION> <h1>Spare Parts <h1> </Caption>
<TR><TH>Stock Number</TH><TH>Description</TH><TH>List Price</TH></TR>
<TR><TD bgcolor=red>3476-AB</TD><TD>76mm
Socket</TD><TD>45.00</TD></TR>
<TR><TD >3478-AB</TD><TD><font color=blue>78mm Socket</font>
</TD><TD>47.50</TD></TR>
<TR><TD>3480-AB</TD><TD>80mm Socket</TD><TD>50.00</TD></TR>
</TABLE>
76

TableData and TableHeaderAttributes
<Table border=1 cellpadding =2>
<tr> <th> Column 1 Header</th> <th> Column 2 Header</th> </tr>
<tr> <td colspan=2> Row 1 Col 1</td> </tr>
<tr> <td rowspan=2>Row 2 Col 1</td>
<td> Row 2 Col2</td> </tr>
<tr> <td> Row 3 Col2</td> </tr>
</table>
77

Table Data and Table Header Attributes
Column 1 Header Column 2 Header
Row 1 Col 1
Row 2 Col 1
Row 2 Col 2
Row 3 Col 2
78

Special Things to Note
• TH, TD and TR should always have end tags.
Although the end tags are formally optional, many browsers will mess
up the formatting of the table if you omit the end tags. In particular,
you should always use end tags if you have a TABLE within a TABLE -- in
this situation, the table parser gets hopelessly confused if you don't
close your TH, TD and TR elements.
• A default TABLE has no borders
By default, tables are drawn without border lines. You need the
BORDER attribute to draw the lines.
• By default, a table is flush with the left margin
TABLEs are plopped over on the left margin. If you want centered
tables, You can either: place the table inside a DIV element with
attribute ALIGN="center".
Most current browsers also supports table alignment, using the ALIGN
attribute. Allowed values are "left", "right", or "center", for example:
<TABLE ALIGN="left">. The values "left" and "right" float the table to
the left or right of the page, with text flow allowed around the table.
This is entirely equivalent to IMG alignment 79

What will be the output?
<TABLE BORDER width=“750”>
<TR> <TD colspan=“4” align=“center”>Page Banner</TD></TR>
<TR> <TD rowspan=“2” width=“25%”>Nav Links</TD><TD
colspan=“2”>Feature Article</TD> <TD rowspan=“2”
width=“25%”>Linked Ads</TD></TR>
<TR><TD width=“25%”>News Column 1 </TD> <TD
width=“25%”><News Column 2 </TD></TR>
</TABLE>
80

Color Codes
1. WHITE
2. BLACK
3. RED
4. GREEN
5. BLUE
6. MAGENTA
7. CYAN
8. YELLOW
9. AQUAMARINE
10. BAKER’S CHOCOLATE
11. VIOLET
12. BRASS
13. COPPER
14. PINK
15. ORANGE
1. #FFFFFF
2. #000000
3. #FF0000
4. #00FF00
5. #0000FF
6. #FF00FF
7. #00FFFF
8. #FFFF00
9. #70DB93
10. #5C3317
11. #9F5F9F
12. #B5A642
13. #B87333
14. #FF6EC7
15. #FF7F00
85

The Body Element
• The BODY element of a web page is an important
element in regards to the page’s appearance. Here
are the attributes of the BODY tag to control all the
levels:
TEXT="#RRGGBB" to change the color of all the text
on the page (full page text color.)
 This element contains information about the
page’s background color, the background image, as
well as the text and link colors.
86

Background Color
 It is very common to see web pages with their background color set
to white or some other colors.
 To set your document’s background color, you need to edit the
<BODY> element by adding the BGCOLOR attribute. The following
example will display a document with a white background color:
<BODY BGCOLOR=“#FFFFFF”></BODY>
87

TEXT Color
 The TEXT attribute is used to control the color of all the normal
text in the document. The default color for text is black. The
TEXT attribute would be added as follows:
<BODY BGCOLOR=“#FFFFFF” TEXT=“#FF0000”></BODY>
In this example the document’s page
color is white and the text would be red.
88

LINK, VLINK, and ALINK
These attributes control the colors of the different link states:
1. LINK – initial appearance – default = Blue.
2. VLINK – visited link – default = Purple.
3. ALINK –active link being clicked–default= Yellow.
The Format for setting these attributes is:
<BODY BGCOLOR=“#FFFFFF” TEXT=“#FF0000”
LINK=“#0000FF”
VLINK=“#FF00FF”
ALINK=“FFFF00”> </BODY> 89

Using Image Background
 The BODY element also gives you ability of setting an image as the
document’s background.
 An example of a background image’s HTML code is as follows:
<BODY BACKGROUND=“hi.gif” BGCOLOR=“#FFFFFF”></BODY>
90

Assignment HTML
Create a Three to five web page website, about your favorite sport.
You should create a home page called index.html.
Provide links to all your pages on top of your home page. e.g.
[home] [player 1] [player 2] [player 3] [about us]
Each page should have hyper link back to the home page.
‘ About us’ page should have information about the person who is creating
this website.
Home page should have some images related to the sport and some basic
details about the sport.
Player profile should have the picture of the player, basic introduction some
records.
Email: naveen.ahmed@abasynisb.edu.pk

Web+html

More Related Content

What's hot (20)

Similar to Web+html (20)

Recently uploaded (20)

Web+html