Introduction to HTML

1

Introduction to Web Design

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.


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.


7

• Simple

It is Simple to understand and ease of application development.

• Low cost


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.


9

Web Components

• Clients and Servers

• Internet Service Providers

• Web Site Hosting Services

• Domains Names, URL’s and Ips

• Registrars


10

Clients & Servers

Clients (Browser)• Internet Explorer• Firefox• Mozilla• Netscape• Opera• Amaya• AOL• MSN

Servers• Apache• Microsoft• Netscape• zeus• AOLserver• AV• JavaWebServer• Oracle


11

Web Components





• Registrars


12

Internet Service Providers Connect Clients to the Internet

• Phone Company• AOL• Earthlink• Verizone• NetZero

• Basic internet connection

• Dialup/DSL/Cable/Sat• Email


13

Web Components





• Registrars


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


15

Web Components





• Registrars


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


17

Web Components




• Domains Names, URL’s and IPs

• Registrars


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


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


20

World Wide Web

• WWW comprises software (Web server and browser) and data (Web sites)

Client Side

JavaScriptVBScriptDHTML

Java Applets

Server Side

CGI(Common gateway Interface )

ASPJava Servlets

HTML, XML, ...


21

How HTML is Displayed

Browser Command

HTML Display

Http protocol(HyperText Transfer Protocol)

Text & binary data

render

HTML URL:http://www.google.com


22

How HTML is Displayed – from remote site

HTML Display

User Browser Command

URL:http://www.yahoo.com

RemoteRemoteWeb ServerWeb Server

Client SiteClient Site

DBDB

HTMLCGIASPPHP…

http request

http response


23

The Basics

Elements and Tags are the basics of any

webpage.


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>


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>


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>


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.


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>


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.


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.


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.


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.


33

<title>

The document you must have a <title>

which describes what the document is.

Without a <title> the document is not valid.


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.


35

HTML

• We’ll type it in Notepad

• Start/Programs/

Accessories/

Notepad/

• New File


36

Put It All Together

<html>

<head>

<title>WelCome To VIT</title>

</head>

<body>

</body>

</html>


37

Example

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

</html>


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


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)


40

Here’s What You’ll See Title Bar

Heading Body


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.


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.


43

Unordered, Ordered, and Definition Lists

• Unordered

• ordered

• definition lists


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.


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.


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 .


47

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


48

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


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.


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>


51

Output For Table tag


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.


53

Form Structure

• <form>

.

.input elements .</form>


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


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>


56

Out Put


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>


58

Out Put With Radio Buttons


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>


60

Out Put With Check Boxs


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.

•


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>


63

Out Put Scrolling Lists


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.


65

Output for Pull Down Lists


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>


67

Output for text area

•


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


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.


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.


71

Example

• <frameset cols=50%,25%,*>• <frame src="C:\Documents and Settings\admin\

Desktop\New Folder\tab.html">• <frame src="C:\Documents and Settings\admin\

Desktop\New Folder\prabu.html">• <frame src="C:\Documents and Settings\admin\

Desktop\New Folder\f.html">• </frameset>


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>


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>


74

Thank you

Introduction to HTML

Documents

table tag

used form tag

special tag

closing tag

listitem tag

tagand end tag

form elements

html tags