Introduction to HTML

2
Web server
• A web server is a computer program that
delivers (serves) content, such as web pages,
using the Hypertext Transfer Protocol (HTTP),
over the World Wide Web .
• The primary function of a web server is to
deliver web pages to clients. This means
delivery of HTML documents and any additional
content that may be included by a document,
such as images, style sheets and JavaScript's.

3
• A client, commonly a web browser or web
crawler, initiates communication by
making a request for a specific resource
using HTTP and the server responds with
the content of that resource, or an error
message if unable to do so .
• Many generic web servers also support
server-side scripting, e.g., Apache HTTP
Server and PHP.

4
Client Server Architecture
Client Server database

Vellore Institute of Technology
University
5
Advantages of Client-Server
Architect
• Centralization resource
In the model the main role is done by the
server because it provide the resources to client
and access, resource and security for database
are controlled by the server.
• Scalability
In this case any element can be upgraded
when needed.
• Flexibility
With this model we can easily integrate the
new technology in to the system.

University
6
• Interoperability
All components of (clients, network, and
servers) model work together.
• Accessibility
In this model server can be accessed
remotely and across multiple platforms for
client request.

University
7
• Simple
It is Simple to understand and ease of
application development.
• Low cost

University
8
Disadvantages of Client-Server
Architecture
• Dependability
In the model the application processing is
depends on server side
• Lack of scalability
Some of the network operating system having
lack of scalability.
Congestion
In client server model some time there may be
chance to occur of congestion, when
multiple requests are came at server side.

University
9
Web Components
• Clients and Servers
• Internet Service Providers
• Web Site Hosting Services
• Domains Names, URL’s and Ips
• Registrars

University
10
Clients & Servers
Clients (Browser)
• Internet Explorer
• Firefox
• Mozilla
• Netscape
• Opera
• Amaya
• AOL
• MSN
Servers
• Apache
• Microsoft
• Netscape
• zeus
• AOLserver
• AV
• JavaWebServer
• Oracle

University
11
Web Components
• Registrars

University
12
Internet Service Providers
Connect Clients to the Internet
• Phone Company
• AOL
• Earthlink
• Verizone
• NetZero
• Basic internet
connection
• Dialup/DSL/Cable/Sat
• Email

University
13
Web Components
• Registrars

University
14
Web Hosting Services
Connects Web Sites to the Internet
• Computer (server) farm
• Web server software
• Firewall hardware and software
• IT services
– (Backup, troubleshooting, hardware repair)
• Disk space
• Bandwidth / connection to internet
• Routers and switchers
• Email server / storage

University
15
Web Components
• Registrars

University
16
Domain’s URL’s and IPs
• Domain name: The specific address of a
computer on the Internet
– microsoft.com
• Uniform Resource Locator (URL):
– http://www.microsoft.com/faqs.html
• Internet protocol (IP) address
– 192.168.1.1

University
17
Web Components
• Domains Names, URL’s and IPs
• Registrars

University
18
Domain Registrar
• A company that provides domain name
registration services for a fee.
• Maintain database which maps domain
names to IP’s
• Propagate new domain name/IP address
information across the internet

University
19
Creating a Web Site
1. Choose a domain name
2. Register with a Registrar
3. Choose a hosting service
4. Tell Registrar the IP address
5. Create web content
6. Store (publish) onto hosting server (FTP)
7. Submit new site to search engines

University
20
World Wide Web
• WWW comprises software
(Web server and browser) and
data (Web sites)
Client Side
JavaScript
VBScript
DHTML
Java Applets
Server Side
CGI(Common gateway Interface )
ASP
Java Servlets
HTML, XML, ...

University
21
How HTML is Displayed
Browser Command
HTML Display
Http protocol
(HyperText Transfer Protocol)
Text & binary data
render
HTML URL:http://www.google.com

University
22
How HTML is Displayed – from remote site
HTML Display
User
Browser Command
URL:http://www.yahoo.com
RemoteRemote
Web ServerWeb Server
Client SiteClient Site
DBDB
HTML
CGI
ASP
PHP
…
http request
http response

University
23
The Basics
Elements and Tags are the basics of any
webpage.

University
24
Elements
Elements are made up of two tags; a start
tag and an end tag. Between these tags is
the element content.
<title>Welcome to My World</title>

University
25
Start Tags
A start tag is a left angle bracket followed by
the name of the element and then a right
angle bracket.
<title>

University
26
End Tags
End tags are a left angle bracket and a slash
followed by the name of the element and
then a right angle bracket. The slash allows
the computer to distinguish the end tag from
the start tag.
</title>

University
27
Empty Elements
Certain elements are empty and are
designated by a slash before the right angle
bracket in the start tag.
<br/>
The <br> element is used to insert a line break into
the document. This tells the computer to stop the
text at that point and start a new line. As you may
have guessed the <br> element does not have any
content so it does not need an end tag.

University
28
Content
Most elements will contain multiple
elements. This may sound confusing but it
is really very simple. An element that
contains another element looks like this:
<head>
<title>The document title</title>
</head>

University
29
Nesting
Nesting means the way in which elements
contain elements. When we say that
elements are properly nested we mean that
each element is completely contained within
the elements that contain it, and it
completely contains the elements it
contains.

University
30
Required Elements
There are four elements that all HTML
documents must contain.
They must have a <head> and they must
contain a <title>. They also must have
<html> and <body> elements.

University
31
<html>
The <html> element contains the whole
document. It starts first and finishes
last. It tells the computer that this is an
<html> document and must always be
present.

University
32
<head>
The <head> contains elements that are
about the document rather than elements
that are displayed in the page itself and
includes things like the document title.

University
33
<title>
The document you must have a <title>
which describes what the document is.
Without a <title> the document is not valid.

University
34
<body>
A last, but certainly not least, the document
must have a <body>. The <body> is the
Webpage itself. It comes after the <head>
and is the only other element that can go in
your <html> element. Anything that you
want
to put in your page goes in here.

University
35
HTML
• We’ll type it in Notepad
• Start/Programs/
Accessories/
Notepad/
• New File

University
36
Put It All Together
<html>
<head>
<title>WelCome To VIT</title>
</head>
<body>
</body>
</html>

University
37
Example
<html>
<head>
<title> Wel come TO VIT </title>
</heaD>
<Body>
Hi Friends <BR>
Wel come to my webworld
</Body>
</html>

University
38
Let’s Save It!!
• File/Save As
• Type in a file name with the
extension .html
• Example name: school.html
• Put it in your HTML folder with your
graphic

University
39
Let’s Browse It!
• Open a browser (Netscape or Internet
Explorer)
• NETSCAPE--File/Open Page/Choose
File
–Browse to your file (OK)
• INTERNET EXPLORER--File/Open
–Browse to your file (open,OK)

University
40
Here’s What You’ll See Title
Bar
Heading Body

University
41
Paragraphs and Line Breaks
• You must use HTML tags to control where
line and paragraph breaks actually
appear.
• To skip a line between paragraphs, put a
<p> tag at the beginning of each
paragraph and a </p> tag at the end.

University
42
• The <br> tag forces a line break within a
paragraph. Unlike the other tags you've
seen so far, <br> doesn't require a closing
</br> tag.
• Use <hr /> to draw horizontal rules
separating major sections of text, or
wherever you'd like to see a line across
the page.

University
43
Unordered, Ordered, and Definition
Lists
• Unordered
• ordered
• definition lists

University
44
Unordered
• one in which the order of items is not
important, such as a laundry or grocery list
gets bounded by <ul> and </ul> tags.
• Each item in the list, usually a word or
short phrase, is marked by the <li> (list-
item) tag.

University
45
Ordered List
• Ordered lists, bounded by the <ol> and
</ol> tags, are identical in format to
unordered ones, including the <li> tag
(and </li> end tag with XHTML) for
marking list items.

University
46
Definition lists
• Definition list's enclosing <dl> and </dl>
tags, each list item has two parts, each
with a special tag: a short name or title,
contained within a <dt> tag, followed by its
corresponding value or definition, denoted
by the <dd> tag .

University
47
• <html>
<head>
<title>
List
</title>
</head>
<body>
<ul>
<li> hi
<li>how r u

University
48
<ul>
<li>
fine
</ul>
</ul>
<p>
<ol>
I am missing you
<li> VIT is No 1 university
</ol>
</body> </html>

University
49
Table
• Tables are defined with the <table> tag. A
table is divided into rows (with the <tr>
tag), and each row is divided into data
cells (with the <td> tag). The letters td
stands for "table data," which is the
content of a data cell. A data cell can
contain text, images, lists, paragraphs,
forms, horizontal rules, tables, etc.

University
50
• <body>
<table border="2" bgcolor="blue" cellpadding=40>
<caption> table with border</caption>
<th> c1</th><th> c2</th>
<tr>
<td>
srinivas Koppu </td>
<td>
Web Desiging
</td>
</tr>
</body>

University
51
Output For Table tag

University
52
Forms
• A form is an area that can contain form
elements.
• Form elements are elements that allow
the user to enter information (like text
fields, textarea fields, drop-down menus,
radio buttons, checkboxes, etc.) in a form.
• A form is defined with the <form> tag.

University
53
Form Structure
• <form>
.
.
input elements
.
</form>

University
54
Input
• The most used form tag is the <input> tag.
The type of input is specified with the type
attribute. The most commonly used input
types are explained below.
• Text Fields
• Radio Buttons
• Checkboxes
• The Form's Action Attribute and the
Submit Button

University
55
Text Fields
• Text fields are used when you want the user to
type letters, numbers, etc. in a form.
<form>
First Name:
<input type="text" name="first name" />
<br />
Last Name:
<input type="text" name="last name" />
</form>

University
56
Out Put

University
57
Radio Buttons
• Radio Buttons are used when you want the user
to select one of a limited number of choices.
<form>
Gender:
<input type="radio" name="sex" value="male" />
Male
<input type="radio" name="sex"
value="female" /> Female
</form>

University
58
Out Put With Radio Buttons

University
59
Checkboxes
• Checkboxes are used when you want the user to select
one or more options of a limited number of choices.
• <form>
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" />
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car" />
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane"
/>
</form>

University
60
Out Put With Check Boxs

University
61
Selection Lists
• Both Scrolling lists and pull-down pick list
are created with the <select> Tag.
• <option> Tag used to give the options to
end user.
•

University
62
Scrolling lists
• <form>
<select name="extras" size="2" Multiple="multiple">
<option selected="selected"> </option>
<option>Am/Fm Radio</option>
<option>Turbocharge</option>
<option>SBI Card</option>
<option>Mastercard</option>
<option>Visa card</option>
</select>
</form>

University
63
Out Put Scrolling Lists

University
64
Pull Down list
• <body> <form> <select name="card">
<option>Mastercard</option>
<option>Visa card</option> </select>
</form> </body>
• Pick Lists cannot allow multiple choices
:they are logically equivalent in to a group
of radio buttons.

University
65
Output for Pull Down Lists

University
66
Text Areas
• Allow multiple lines of text in a single
input item, use the text area tag
ie<textarea>……</textarea>
• <html> <head> <title> hi </title> </head>
<body> <form> <textarea
name="comments" rows="8" cols="20">
please enter u r comments </textarea>
</form> </body> </html>

University
67
Output for text area
•

University
68
The Form's Action Attribute and
the Submit Button
• When the user clicks on the "Submit"
button, the content of the form is sent to
the server.
• The form's action attribute defines the
name of the file to send the content to.
The file defined in the action attribute
usually does something with the received
input

University
69
• <form name="input"
action="html_form_submit.asp"
method="get">
Username:
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
• If you type some characters in the text
field above, and click the "Submit" button,
the browser will send your input to a page
called "html_form_submit.asp". The page
will show you the received input.

University
70
Frames
• You can display more than one HTML
document in the same browser window.
Each HTML document is called a frame,
and each frame is independent of the
others.
• HTML file can have either a frameset or
body but not both.

University
71
Example
• <frameset cols=50%,25%,*>
• <frame src="C:Documents and
SettingsadminDesktopNew Foldertab.html">
SettingsadminDesktopNew
Folderprabu.html">
SettingsadminDesktopNew Folderf.html">
• </frameset>

University
72
Here’s the code:
• <html>
• <head>
• <title>Type what you want in the title bar
here
• </title>
• <h1 align=“center”>< font face=“ComicSans
MS”>
– Type what you want your heading to say here.
• </center></font face> </h1>
• </head>

University
73
The body• <body>
• <center>
• <img src=“kids3.jpg”>
• </center>
• <font face=“Comic Sans MS”>
• <center>
• Type what you want to say in the body
under your image here.
• </center>
• </font face>
• </body>
• </html>

University
74
Thank you

Introduction to HTML

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Introduction to HTML

Similaire à Introduction to HTML (20)

Introduction to HTML

Notes de l'éditeur