Internet Programming I

Overview of the Internet

What is Internet?

❑ The network which is formed by the co-operative interconnection

of a large number of computer networks.
➢ Network of Networks
➢ No one owns the Internet.
• Every person who makes a connection to the internet becomes a part of the
owner.
➢ There is no central administration or central authority to the internet.

2 8/6/2018
What is Internet actually?

❑ A community of people
✓ Who use and develop the network.
❑ A collection of resources
✓ That can be reach from those networks
❑ A setup to facilitate collaboration
✓ Among the members of the research and educational communities,
world wide
❑ The connected networks use the TCP/IP protocol.

3 8/6/2018
Key Milestones in Evolution
❑ 1950
✓ ARPA (Advanced Research Projects Agency)
❑ 1970
✓ ARPANET creates precursor to Transmission Control Protocol (TCP)
❑ 1971
✓ Universities added to net
✓ Telnet and FTP are available
❑ 1972
✓ First electronic mail message sent
❑ 1973
✓ ARPANET connected to England and Norway

4 8/6/2018
Cont.….
❑ 1974
✓ TCP starts being used for communicating across as system of networks
❑ 1982
✓ US DoD starts building defense data networks based on ARPANET
technology
❑ 1983
✓ ARPANET split into ARPANET and MILNET
✓ Internet now in place
✓ TCP?IP standardized
❑ 1986
✓ National Science Foundation (NSF) stated another network NFSNET.
✓ NFSNET is a system of regional networks which were connected over a back
bone network.

5 8/6/2018
Cont.…

❑ 1991
✓ New applications like Archie and gopher were released.
✓ It is very similar to the World Wide Web
❑ 1992
✓ The internet linked more than 17000 networks
✓ There were about 3 million hosts.
❑ 1993
✓ The World Wide Web application were launched.
❑ 1995
✓ Interconnected network providers starts offering services
✓ About 30 million users

6 8/6/2018
Important Internet Application

❑ World Wide Web (WWW)

❑ Telnet
❑ File Transfer Protocol (FTP)
❑ Electronic Mail (Email)
❑ Usenet news
❑ Gopher
❑ Internet Relay Chat (IRC)

7 8/6/2018
World Wide Web

WWW
World Wide Web (WWW)
❑ It is the latest revolution in the internet scenario.

❑ The main feature of WWW is that it allows us to share multimedia

documents between machines.
✓ Containing text, pictures, audio, clips, video, moving objects, animation.

❑ Now what this World Wide Web is actually is?

❑ It is basically a huge collection of documents which are interlinked.

✓ billions of documents which are linked in any possible ways

9 8/6/2018
Cont.…

❑ Where do the document reside?

✓ On web server also on HTTP server
❑ They are typically written in
✓ Hyper Text Markup Language (HTML)
❑ Document get formatted/displayed using web browsers.
✓ Internet Explorer
✓ Mozilla Firefox
✓ Netscape
✓ Mosaic, etc

10 8/6/2018
 Client-Server Model

Overview of Client/Server Architecture

Client-Server Model
❑ This is a standard model for developing network applications today
❑ As the name implies there is the notion of a client and also the
notion of server.
✓ A server is a process that is offering some service
✓ A client in contrast is another process which is requesting the service
from a server.
❑ The server and client may not be running on the same machine.
They may be on different computers altogether.
❑ Typically server is the program which starts first and waits for
requests from clients

12 8/6/2018
Cont.….

Database

13 8/6/2018
Cont.….
❑ Typical scenario:
✓ First the server process must start on some system, the server process must
initialize itself and then it goes to sleep waiting for a client request.

✓ Client process starts, either on the same system or on some other system.
 Sends a request to the server

✓ when the server has finished providing the server can go back to sleep waiting for
the next client request and this process will repeat indefinitely.

❑ The process repeats

14 8/6/2018
How The Web Works?
How The Web Works?
❑ When you enter something like google.com the request goes to one of many
special computers on the Internet known as Domain Name Servers(DNS).

❑ When you want to view any page on the Web, you must initiate the activity by
requesting a page using your browser.

❑ The browser asks a domain name server to translate the domain name you
requested into an IP address.

❑ The browser, sends a request to that server for the page you want, using a
standard called Hypertext Transfer Protocol or HTTP and returns to
Web browser
16 8/6/2018
What is DNS?
❑ A global database system for internet addressing mail and others.

❑ Using DNS is that using names rather than addresses

✓ So it is much easier to use and to memorize

❑ In the DNS there is a concept domains and sub domains

17 8/6/2018
What is HTTP?
❑ Stands for Hyper Text Transfer Protocol

❑ The HTTP protocols are protocol which the web clients (browsers) are
interact with web servers.

❑ It is a stateless protocol
✓ This means no history is maintained.
✓ Every time a request is sent a fresh connection has to be established.

❑ It allows transfer from one document to another using hyper text by clicking
a link you can go to some other place.
18 8/6/2018
Cont.….
❑ Web clients and web servers communicate via HTTP protocols.

❑ Basics steps:
✓ Client opens socket connection to the HTTP server. (on port 80)
✓ Client sends HTTP requests to server
✓ Server sends back response
✓ Server closes connection. (HTTP is stateless protocol)

19 8/6/2018
HTTP Request Format
❑ A client request to a server consists of:
✓ Request method
✓ Path portion of the HTTP URL
✓ Version number of the HTTP protocol
✓ Optional request header information
✓ Blank line
✓ POST or PUT data if present
❑ GET
✓ Most common HTTP method
✓ Returns the contents of the specified documents
✓ Places any parameters in request header
✓ Can also be used to submit forms:
 The form data is URL – encoded and appended the GET command URL

20 8/6/2018
cont.…
❑ HEAD
✓ Returns only the header information of the specified document
✓ Used by clients to determine the information like:
 file size
 modification date
 server version, etc.
❑ POST
✓ Used to send data to the server to be processed in some way
✓ Basic difference from GET:
 A block of data is sent along with the request, extra headers like:
Content-type and content- length are used for this purpose

21 8/6/2018
HTTP Response
❑ An initial response line
✓ Also called the status line
✓ Consists of three parts separated by spaces:
 HTTP version
 A 3-digit response status code
 An English phrase describing the status code
HTTP/1.0 200 OK
HTTP/1.0 404 Not Found

22 8/6/2018
3 – digits status code
❑ 1xx
✓ Indicates informational messages only
❑ 2xx
✓ Indicates successful transaction
❑ 3xx
✓ Redirects the client to another URL.
❑ 4xx
✓ Indicates client error
❑ 5xx
✓ Indicates internal server error

23 8/6/2018
Web Design Fundamentals
 Web Design…
❑ Technical definitions:
✓ A webpage is a single HTML document
✓ A website is a collection of related Webpages
❑ Designing a good website requires more than just putting
together a few pages.
❑ Layout of web pages is very important
❑ Poor layout makes
✓ Difficult navigation
✓ Hard to locate information on page
✓ Visually unappealing (not attractive)

25 8/6/2018
Some Guidelines
❑ Use the appropriate balance of images, color, and space.
◦ Too many images on one page (or large images) will be slow to load.
❑ Put sufficient white space between texts.
❑ Use color judiciously (in other words, don’t go overboard with color).
◦ Just because you can make every cell in a table a different color doesn’t mean you
have to.
◦ A little color in the form of bullets, etc is fine.
❑ White or a soft light color is best for the background.

26 8/6/2018
Cont.….
❑ Have a common look and feel for each page in a web site.
✓ There should be a sense of uniformity.
✓ Perhaps there is a common graphical element and color on each page
❑ Give the page a title (header).
✓ The title shows up on the top line of the web site when viewed in a web browser.
✓ Having no title indicates the designer doesn’t know beans about web design.

27 8/6/2018
Cont.….
❑ Utilize a common scheme for page navigation (appropriate navigation)
◦ Once you get on a page, there should be links back to the home page or other pages on the web
site.
◦ No links back to a home page indicates lack of skill in web design.
◦ A page with no link to the home page is known as an orphan page
❑ Have a method for contacting the author or owner of the web page.
❑ Don’t use Under Construction signs.
◦ This implies you are not on the ball
◦ Good web designers are always making changes, so a page should really always be under
construction.

28 8/6/2018
Steps to design a well websites

❑ Have a goal
❑ Target your audience
❑ Create a plan
❑ Select a Web service provider
❑ Try it out
❑ Maintain it

29 8/6/2018
Have a goal for your web site
❑ What are the things that you want to accomplish?
✓ review your mission statement
❑ Do you want your web site to accomplish all or some of those things?
✓ the more goals, the more difficult the task becomes
❑ What information do you need or want to provide?

30 8/6/2018
Identify your target audience
❑ Who is the information for?
✓ Do you have more than one audience?
✓ Can you serve them all with one Web site?
❑ What are the information needs of your audience?
❑ What are their habits, characteristics, culture, technical capabilities, etc.
✓ Are they likely to start with the Web or another information source?

31 8/6/2018
Plan it out
❑ Identify information you already provided and you haven’t, but would like to
provide to your audience.
❑ Identify the sources of information you want to provide through your Web
site.
✓ Prepare that information for the web by collecting it and converting it.
❑ Develop a vision for your Web site and storyboard it before construction
begins.
❑ Share your vision and storyboard with your colleagues and your bosses.
❑ Estimate initial times and costs for construction.
✓ Decide on the software/hardware tools necessary to construct your site.

32 8/6/2018
Select a Web service provider
❑ Coordinate the method for publishing and updating your Web pages.
✓ mailfiles
✓ FTP files

❑ Know your root address (domain name).

❑ Will you have a need for scripting and database interaction?

33 8/6/2018
Try it out: Optimize it for your audience
❑ Test it in-house.
❑ Test it on a sample audience.
❑ Test it on as many different computers and monitors and browsers
as possible.
❑ Test it using various Internet connections.
✓ Modems
✓ Direct connects

34 8/6/2018
Make your site well-organized
❑ Decide how you want to organize your information based on your users and
what you know about them
❑ Ways to organize your site:
✓ by department or organizational chart
✓ by audience type (marketing)
✓ by subject

35 8/6/2018
Make your site attractive
❑ Choose simple colors that compliment each other & work on most web
browsers.
❑ Keep graphics less than 20,000 Bytes
(20 kilobytes) to make them download reasonably on a home modem.
❑ Keep animated gifs to a minimum.
❑ Use graphics that compliment your image.

36 8/6/2018
Make your site useful
❑ If you are unique, you’re already useful!
❑ If you are not unique, how do you differ from similar Web sites?
✓ Is your content unique?
✓ Is your approach unique?
✓ Is your audience unique?
✓ Are you more up to date?
✓ Are you better organized?
✓ Are you more comprehensive?

37 8/6/2018
Keep your site up-to-date
❑ In an organization, make this part of someone’s job. Pay them to do it. It’s
worth it.
❑ If a person is currently the “documentation person” or the “flier person,”
consider that person to be your Webmaster.

38 8/6/2018
Other tips…
Site Goals and Guidelines
❑ Why are you creating this site?
❑ What does the site owner hope to achieve with this site?
❑ What action does the site owner want the audience to take as a result of
visiting?
❑ What restrictions or guidelines must be followed when designing the site?

39 8/6/2018
Analyze the “Competition”

❑ Look for sites with similar contents, purpose

✓ At other universities
✓ At other organizations
✓ In the private sector
❑ What are the trends and precedents?
❑ Where do they excel or fall short?
❑ Does your site need to “match” a parent site?

40 8/6/2018
Know Resources & Abilities

❑ What technical knowledge do you have?

❑ What tools, resources, and time do you have access to (now AND
later)?
✓ Software
✓ Web authoring tools
✓ Image editing and tools
✓ Animation tools
✓ Hardware
✓ Camera, scanner e.t.c
✓ Other people
❑ NB: Think long-term, i.e., Be sure you have the resources (human and
technical) to maintain the site once you’ve created it.

41 8/6/2018
Site Map

❑ A site map is designed to show the connections between pages

❑ A graphical site map uses lines to connect linked pages

42 8/6/2018
Usable Web pages
❑ Effective:
✓ enable user to find required information
❑ Efficient:
✓ enable information to be found quickly without additional effort
❑ Satisfying:
✓ motivate user to come again and give appropriate image

❑ To create a usable site it is essential to take a user-centered approach

to design.

43 8/6/2018
usability testing
❑ The testers should…
✓ Reflect your audience demographics
✓ Be (relatively) un coached
❑ The test should…
✓ Have clearly defined goals
✓ Be observed in some way

❑ Ask for tester feedback

✓ Notes
✓ Post-test interviews

44 8/6/2018
 HTML

INTRODUCTION
About HTML
 Hyper Text Markup Language
 Constitutes a collection of platform independent styles that defines the various
components of a web documents.
 Styles indicated by markup tags.
 What is HTML really?
 Plain-text documents can be created using any text editor.
 WYSIWYG editors are also available

46 8/6/2018
Cont.…
 What is a markup language?
 One where we can embed special tags or formatting commands in the text.
 To describe how the text should be displayed/printed
 HTML is markup language
 Special formatting codes (called Tags) to adjust fonts, create bulleted lists, create forms,
display images, create tables, etc

47 8/6/2018
Cont. . .
❖ HTML is the standard markup language for creating Web pages.
▪ HTML stands for Hyper Text Markup Language
▪ HTML describes the structure of Web pages using markup
▪ HTML elements are the building blocks of HTML pages
▪ HTML elements are represented by tags
▪ HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
▪ Browsers do not display the HTML tags, but use them to render the content of the
page

48 8/6/2018
HTML Document Structure
 A HTML document consists of two major portions:
 Head
 Contains information about the document, like the title and meta data
describing the contents.
 Body
 Contains the actual matter of the document
 Gets displayed within the browser window

49 8/6/2018
A Simple HTML Document
❖ Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

50 8/6/2018
Explanation for above Example
♦ The <!DOCTYPE html> declaration defines this document to be HTML5
♦ The <html> element is the root element of an HTML page
♦ The <head> element contains meta information about the document
♦ The <title> element specifies a title for the document
♦ The <body> element contains the visible page content
♦ The <h1> element defines a large heading
♦ The <p> element defines a paragraph

51 8/6/2018
HTML Tags
♦ HTML tags are element names surrounded by angle brackets:
▪ <tagname> content goes here... </tagname>
♦ HTML tags normally come in pairs like <p> and </p>
♦ The first tag in a pair is the start tag, the second tag is the end tag
♦ The end tag is written like the start tag, but with a forward slash inserted
before the tag name
♦ Tip: The start tag is also called the opening tag, and the end tag the closing tag.

52 8/6/2018
HTML Styles
♦ Setting the style of an HTML element, can be done with the style attribute.
♦ The HTML style attribute has the following syntax:
▪ <tagname style="property:value;">
♦ The property is a CSS property. The value is a CSS value.
♦ We will see more about CSS later.

53 8/6/2018
HTML Styles (cont.…)
♦ Use the style attribute for styling HTML elements
♦ Use background-color for background color
♦ Use color for text colors
♦ Use font-family for text fonts
♦ Use font-size for text sizes
♦ Use text-align for text alignment

54 8/6/2018
Example
<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">

<h1 style="color:blue "font-family:verdana "font-size:300% ="text-align:center;">This is a heading</h1>

<p style="color:red "font-family:courier font-size:160% "text-align:center;">This is a paragraph.</p>

</body>
</html>

55 8/6/2018
HTML Text Formatting
♦ HTML defines special elements for defining text with a special
meaning.
♦ Formatting elements were designed to display special types of text:
▪ <b> - Bold text
▪ <strong> - Important text
▪ <i> - Italic text
▪ <em> - Emphasized text
▪ <mark> - Marked text
▪ <small> - Small text
▪ <del> - Deleted text
▪ <ins> - Inserted text
▪ <sub> - Subscript text
▪ <sup> - Superscript text

56 8/6/2018
HTML Quotation and Citation Elements

♦The HTML <q> element defines a short quotation. Browsers usually

insert quotation marks around the <q> element.
▪ <p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>

♦The HTML <abbr> element defines an abbreviation or an acronym.

Marking abbreviations can give useful information to browsers,
translation systems and search-engines.

▪ <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

57 8/6/2018
Cont. ….
♦ The HTML <blockquote> element defines a section that is quoted from
another source. Browsers usually indent <blockquote> elements.

▪ <p>Here is a quote from WWF's website:</p>

<blockquote cite="http://www.worldwildlife.org/who/index.html">

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF
works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

</blockquote>

58 8/6/2018
Cont. …
♦ The HTML <address> element defines contact information(author/owner) of
a document or an article. The <address> element is usually displayed in italic.
Most browsers will add a line break before and after the element.
▪ <address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

59 8/6/2018
Cont. …
♦ he HTML <cite> element defines the title of a work. Browsers usually display
<cite> elements in italic.
▪ <p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
♦ The HTML <bdo> element defines bi-directional override. The <bdo>
element is used to override the current text direction:
▪ <bdo dir="rtl">This text will be written from right to left</bdo>

60 8/6/2018
HTML Comments
♦Comment tags are used to insert comments in the HTML source code.
♦You can add comments to your HTML source by using the following syntax:
▪ <!-- Write your comments here -->
♦Note: Comments are not displayed by the browser, but they can help
document your HTML source code. With comments you can place
notifications and reminders in your HTML:
▪ <!-- This is a comment -->

<p>This is a paragraph.</p>

<!-- Remember to add more information here -->

61 8/6/2018
HTML Links
♦Links are found in nearly all web pages. Links allow users to click their way
from page to page.
♦Hyperlinks:
♦HTML links are hyperlinks.
♦You can click on a link and jump to another document.
♦When you move the mouse over a link, the mouse arrow will turn into a little
hand.
▪ Note: A link does not have to be text. It can be an image or any other HTML element.
♦Syntax:
▪ <a href="url">link text</a>

62 8/6/2018
HTML Links (cont. …)
♦ The href attribute specifies the destination address of the link.
♦ The link text is the visible part. Clicking on the link text will send you to the
specified address.
♦ Note: Without a forward slash on subfolder addresses, you might generate
two requests to the server. Many servers will automatically add a forward
slash to the address, and then create a new request.

63 8/6/2018
HTML Links (cont. …)
♦ The target attribute specifies where to open the linked document.
♦ The target attribute can have one of the following values:
▪ _blank - Opens the linked document in a new window or tab
▪ _self - Opens the linked document in the same window/tab as it was clicked (this is
default)
▪ _parent - Opens the linked document in the parent frame
▪ _top - Opens the linked document in the full body of the window
▪ framename - Opens the linked document in a named frame

64 8/6/2018
HTML Images
♦ Images can improve the design and the appearance of a web page.
♦ In HTML, images are defined with the <img> tag.
♦ The <img> tag is empty, it contains attributes only, and does not have a
closing tag.
▪ <img src="pulpitrock.jpg" alt="Mountain View">

65 8/6/2018
Attributes of Image Tag
♦ src attribute to define the URL of the image
♦ alt attribute to define an alternate text for an image, if it cannot
be displayed
♦ width and height attributes to define the size of the image
♦ width and height properties to define the size of the image
(alternatively)
♦ float property to let the image float
♦ <map> element to define an image-map
♦ <area> element to define the clickable areas in the image-map
♦ <img>'s element usemap attribute to point to an image-map
♦ <picture> element to show different images for different devices

66 8/6/2018
HTML Lists
▪ HTML Lists are used to specify lists of information.
▪ All lists may contain one or more list elements.
▪ There are three different types of HTML lists:
 Ordered List or Numbered List (ol)
 Unordered List or Bulleted List (ul)
 Description List or Definition List (dl)

67 8/6/2018
HTML Ordered List | HTML Numbered List
▪ HTML Ordered List or Numbered List displays elements in numbered
format.
▪ The HTML ol tag is used for ordered list.
▪ There can be different types of numbered list:
 Numeric Number (1, 2, 3)
 Capital Roman Number (I II III)
 Small Romal Number (i ii iii) Example:

 Capital Alphabet (A B C) <ol type="I">

<li>HTML</li>
 Small Alphabet (a b c) <li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol>

68 8/6/2018
HTML Unordered List | HTML Bulleted List
▪ HTML Unordered List or Bulleted List displays elements in bulleted
format.
▪ The HTML ul tag is used for the unordered list.
▪ There can be 4 types of bulleted list:
 disc
 circle
 square Example:

 none <ul type="circle">

<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>

69 8/6/2018
HTML Description List | HTML Definition List
▪ HTML Description List or Definition List displays elements in definition
form like in dictionary.
▪ The 3 HTML description list tags are given below:
 <dl> tag defines the description list.
 <dt> tag defines data term.
Example:
 <dd> tag defines data definition (description).
<dl>
<dt>HTML</dt>
<dd>is a markup language</dd>
<dt>Java</dt>
<dd>is programming language</dd>
<dt>JavaScript</dt>
<dd>is a scripting language</dd>
<dt>SQL</dt>
<dd>is a query language</dd>
</dl>

70 8/6/2018
HTML Frames
▪ What is frame?
 A method for dividing the browser window into smaller sub windows.
 Each sub window displaying a different HTML document. This is unlike a table.
▪ The contents of some of the frames may be fixed depending on the
application for which you are developing the page.
▪ But it is different type and clickable menu they were hyperlinks associated
with it and information you want to see is displayed in the central place.

71 8/6/2018
Frame Tags
▪ The main tag with which you can define the frame is the frameset.
▪ Frameset can define a collection of frames or again recursively other
framesets.
▪ <FRAMESET> … …………….</FRAMESET>
• Defines a collection of frames or other framesets.
• Attributes:
• Cols = list of lengths (number, %, or *)
• Rows = list of lengths (number, %, or *)

72 8/6/2018
Cont. . . .

▪ <FRAME>: ▪ <NOFRAMES> …</NOFRAMES>:

• Defines a single frame within a • This specifies the contents to be
frameset. displayed by browsers that cannot
• Attributes: display frames.
• frame border, it can be either 1 or 0.
• src = url • Ignored by browsers that support
• Scrolling = yes/no/auto frames.
• margingwidth = number • But for modern browsers this tag
• Marginheight = number will be not considered or ignored.
• Name = text

73 8/6/2018
Merits and Demerits of Frames
▪ Merits:
 They allows parts of the page to remain stationary while the other parts can scroll or
cab change.
 They can unify resources that reside on separate web servers
 There is a <noframe> tag, using which it is possible to add alternative content for
browsers that do not support frames.

74 8/6/2018
Cont. . .
▪ Demerits:
 All Browsers do not support frame.
 Documents nested in a frame is more difficult to bookmark.
 Load on the server can be significantly increased, if there are a large number of frames
I n the page.
 Frames are very difficult to handle for search engines.

75 8/6/2018
HTML Tables
♦ HTML table tag is used to display data in tabular form (row * column).
♦ There can be many columns in a row.
♦ HTML tables are used to manage the layout of the page
♦ e.g. header section, navigation bar, body content, footer section etc.
♦ But it is recommended to use div tag over table to manage the layout of the
page .

76 8/6/2018
HTML Tables (cont. …)

♦ Use the HTML <table> element to define a table

♦ Use the HTML <tr> element to define a table row
♦ Use the HTML <td> element to define a table data
♦ Use the HTML <th> element to define a table heading
♦ Use the HTML <caption> element to define a table caption
♦ Use the CSS border property to define a border
♦ Use the CSS border-collapse property to collapse cell borders

77 8/6/2018
HTML Tables (cont. …)
♦ Use the CSS padding property to add padding to cells
♦ Use the CSS text-align property to align cell text
♦ Use the CSS border-spacing property to set the spacing between cells
♦ Use the colspan attribute to make a cell span many columns
♦ Use the rowspan attribute to make a cell span many rows
♦ Use the id attribute to uniquely define one table

78 8/6/2018
 Tag Description
<table> Defines a table

<th> Defines a header cell in a table

<tr> Defines a row in a table

<td> Defines a cell in a table

<caption> Defines a table caption

<colgroup> Specifies a group of one or more columns in a table for formatting

<col> Specifies column properties for each column within a <colgroup>

element
<thead> Groups the header content in a table

<tbody> Groups the body content in a table

<tfoot> Groups the footer content in a table

79 8/6/2018
 Example
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Abebe</td>
<td>Kebede</td>
<td>50</td>
</tr>
<tr>
<td>Alemu</td>
<td>Tola</td>
<td>94</td>
</tr>
</table

80 8/6/2018
HTML Form
♦ An HTML form is a section of a document which contains controls such as:
text fields, password fields, checkboxes, radio buttons, submit button, menus etc.

♦ It facilitates the user to enter data that is to be sent to the server for
processing.
♦ Why we use forms?
✓ forms are required if you want to collect some data from of the site visitor.

81 8/6/2018
HTML Form Syntax

<form action="server url" method="get|post">

//input controls e.g. textfield, textarea, radiobutton, button
</form>

82 8/6/2018
 HTML Form Tags
Tag Description

<form> It defines an HTML form to enter inputs by the used side.

<input> It defines an input control.
<textarea> It defines a multi-line input control.
<label> It defines a label for an input element.
<fieldset> It groups the related element in a form.
<legend> It defines a caption for a <fieldset> element.
<select> It defines a drop-down list.
<optgroup> It defines a group of related options in a drop-down list.
<option> It defines an option in a drop-down list.
<button> It defines a clickable button.

83 8/6/2018
Form Attributes

Attributes Descriptions

action Backend script ready to process your passed data.

method Method to be used to upload data. The most frequently used are GET and POST methods.

target Specify the target window or frame where the result of the script will be displayed. It takes
values like _blank, _self, _parent etc.

84 8/6/2018
HTML Form Controls
♦ There are different types of form controls that you can use to collect data
using HTML form.
✓ Text Input Controls File Select boxes
✓ Checkboxes Controls Hidden Controls
✓ Radio Box Controls Clickable Buttons
✓ Select Box Controls Submit and Reset Button

85 8/6/2018
Text Input Controls

♦ There are three types of text input used on forms:

♦ Single-line text input controls:-
▪ This control is used for items that require only one line of user input, such as search boxes or
names.
▪ They are created using HTML <input> tag.
♦ Password input controls:-
▪ This is also a single-line text input but it masks the character as soon as a user enters it.
▪ They are also created using HTML <input> tag.
♦ Multi-line text input controls:-
▪ This is used when the user is required to give details that may be longer than a single sentence.
▪ Multi-line input controls are created using HTML <textarea> tag.

86 8/6/2018
<

Example for Text Input Controls

<form>
First Name: <input type="text" name="firstname"/> <br/>
Last Name: <input type="text" name="lastname"/> <br/>
</form>
<form>
Description : <br />
<textarea rows = "5" cols = "50" name = "description">
Enter description here...
</textarea>
</form>

87 8/6/2018
Checkbox Control

♦ Checkboxes are used when more than one option is required to be

selected.
♦ They are also created using HTML <input> tag but type attribute is
set to checkbox.
<form>
<input type="checkbox" name=“HTML" value=“on"/> HTML
<input type="checkbox" name=“JavaScript" value=“on"/>JavaScipt
<input type="checkbox" name=“PHP" value=“on"/>PHP
</form>

88 8/6/2018
Radio Button Control
♦ The radio button is used to select one from multiple options. It is used in
gender, quiz questions etc.
♦ If you use one name for all the radio buttons, only one radio button can be
selected at a time.
<form>
<label for="gender">Gender: </label>
<input type="radio" id="gender" name="gender" value="male"/>Male
<input type="radio" id="gender" name="gender" value="female"/>Female <br/>
</form>

89 8/6/2018
Select Box Control
♦ A select box, also called drop down box which provides option to list down
various options in the form of drop down list, from where a user can select
one or more options.
<form>
<select name = "dropdown">
<option value = “HTML" selected>HTML</option>
<option value = “PHP">PHP</option>
</select>

</form>

90 8/6/2018