UNITI TIER ARCHITECTURE HTML Topics 1 ClientServer Architecture

Topics: 1. Client/Server Architecture 2. J 2 EE Multi Tier Architecture 3. HTML Common

1. Client/Server Architecture: • Client-server architecture (client/server) is a network architecture in which each

Cont… 1. 2. 3. As a result of the limitations of file sharing architectures,

Types of Client/Server Architectures Two Tier Architecture Three Tier Architecture 5

Two Tier Architecture 1. User Interface (requester of services) 2. Server Interface (provider of

Advantages: 1. Non-Complex 2. Non-time Critical information processing system 3. User Interface in User

Advantages: It overcomes all the disadvantages of Two Tier Architecture, by providing a middle

Usage of Three Tier Architecture : 1. 2. 3. Used in distributed Client/Server Architecture.

2. J 2 EE Multi Tier Architecture: • Client Presentation ØHTML or Java applets

J 2 EE Application Model: • Browser is able to process HTML and applets

3. HTML (Hypertext Mark. UP Language) • HTML is the lingua franca for publishing

What is HTML…? HTML is a markup language for describing web documents (web pages).

HTML structure • HTML tags are keywords (tag names) surrounded by angle brackets: <tagname>content</tagname>

Program syntax Html program contains two parts 1. Head section(includes title of the web

Simple program <HTML> <head> <title>first</title> </head> <body> <H 1>Hello World</H 1> </body> </HTML> 18

Tags: Heading tags <h 1>Main heading</h 1> <h 2>sub heading</h 2> <h 3>sub heading</h

Different types of Tags: TAG DESCRIPTION <font></font> to set the font size and color

Example of Tags: <html> <head> <title>second program</title> </head> <body> <p> this is the paragraph

4. LISTS We can create three types of lists in XHTML: 1. Unordered lists,

4. 1 Unordered Lists We can create unordered lists by using tag <ul> Synatx

Example <html> <body> <h 1>Explaining about bullet lists</h 1> <ul type=“cicrle”> <li>Bullet point number

4. 2 Ordered Lists Sometimes we need to order the list of items To

Example: <html> <body> <ol type=“ 1”> <li>Point number one</li> <li>Point number two</li> <li>Point number

4. 3 Definition Lists Some times we need to define the terms at that

Example: <html> <head> <title>About lists</title> </head> <body> <h 1>Explaining about Definition Lists</h 1> <dl>

5. Tables, just like spreadsheets, are made up of rows and columns To write

Cont. . To write data in a row we will use <td> syntax <td

Example: <html> <body> <table border=” 1”> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column

Exercise 1: Write a HTML program for creating the following page. 37

Exercise 2: Write a HTML program for creating the following page. 38

6. Images <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src=“file name" alt=“ alternate text" height=“n" width=“n"> <html> <body> <h 2>Beautiful

7. Frames <frameset [cols=“%, %] [rows=“%, %”]> ……</frameset> To fill the data in frames

Example: <html> <frameset rows="50%, 50%"> <frame src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="D: 11. jpg" /> <frameset cols="25%, 75%"> <frame

8. FORMS We will use tag <form> in the body part We can create

8. 1 Text Field( used to enter one line) <input type=”text” name=”name” value=”default value”

Example <html> <body> <form> <input type=”text” name=”txt. Search” value=”Search for” size=” 20” maxlength=” 64”

8. 2 Text Area (used to write multiple lines) <textarea name=“name” rows=“n” cols=“n”></textarea> Example

8. 3 Buttons 2 Types 1. Submit 2. Reset Tag: <input type=“submit”|”reset” value=“any value”>

Example <html> <body> <form> Enter name: <input type=“text” size=“ 20” <input type=“submit” value=“submit”/> <input

8. 4 Checkbox A checkbox is created using the <input> element whose type attribute

8. 5 Radio Buttons Syntax: <input type=“radio”> input type=”radio” name=”A” value=”First” />First class <input

8. 6 Select boxes A drop-down select box allows users to select one item

Example <select name=”sel. Color”> <option selected=”selected” value=”“>Select color</option> <option value=”red”>Red</option> <option value=”green” selected>Green</option> <option

9. Cascading Style Sheets There are three types 1. Inline 2. Embedded 3. External

9. 1 Inline style sheets Syntax <Tag style=“property: value”> Example: <p style=“font-size: 30 pt;

Example <html> <body> <p style=“font-size: 30 pt; font-family: arial; color: red”>This text is colored

9. 2 Embedded style sheets Syntax Tag name { property 1; propert 2; }

Example: <html> <head> <title>Embedded</title> <style type="text/css"> p { font-size: 30 pt; font-family: Arial; color:

9. 3 External style sheets We will write the CSS properties in one file

1. CSS p { font-size: 30 pt; font-family: Arial; color: red; } 69

Example <html> <head> <title>Embedded</title> <link rel=“stylesheet” type=“text/css” href=“ 1. css”> </head> <body> <p>This text

10. Different CSS properties Font-family: different font families Font-style: italic/underlined/normal Font-weight: Font-size: Text-align: Color:

Slides: 72

Download presentation

UNIT-I: TIER ARCHITECTURE & HTML

Topics: 1. Client/Server Architecture 2. J 2 EE Multi Tier Architecture 3. HTML Common Tags-Block Level and Inline Elements 4. Lists 5. Tables 6. Images 7. Frames 8. Forms 9. CSS 10. CSS properties

1. Client/Server Architecture: • Client-server architecture (client/server) is a network architecture in which each computer or process on the network is either a client or a server. Servers are powerful computers or processes dedicated to managing disk drives (file servers), printers (print servers), or network traffic (network servers )

Cont… 1. 2. 3. As a result of the limitations of file sharing architectures, the client/server architecture emerged A Database server replaced the File server Network traffic was reduced, because user queries could be answered directly. 4

Types of Client/Server Architectures Two Tier Architecture Three Tier Architecture 5

Two Tier Architecture 1. User Interface (requester of services) 2. Server Interface (provider of services) 6

Advantages: 1. Non-Complex 2. Non-time Critical information processing system 3. User Interface in User side, database management in the server side. Disadvantages: 1. Performance Detoriats if more than 100 users are involved 2. Interoperability is limited 3. System Administration is difficult 7

Three Tier Architecture 8

Advantages: It overcomes all the disadvantages of Two Tier Architecture, by providing a middle layer Disadvantages: 1. The development environment is more difficult to use, than the Two Tier development environment 2. The cost involved is much more than the Two tier Architecture 9

Usage of Three Tier Architecture : 1. 2. 3. Used in distributed Client/Server Architecture. That provides flexibility etc. Used in Internet applications Used in net-centric applications 10

2. J 2 EE Multi Tier Architecture: • Client Presentation ØHTML or Java applets deployed in Browser ØXML documentations transmitted through HTTP ØJava clients running in Client Java Virtual Machine (JVM) • Presentation Logic ØServlets or Java Server Pages running in web server • Application Logic ØEnterprise Java. Beans running in Server

J 2 EE Application Model: • Browser is able to process HTML and applets pages. • It forwards requests to the web server, which has JSPs and Servlets • Servlets and JSPs may access EJB server. • Java Standalone runs on java client, which access EJB server using RMI.

Cont…

3. HTML (Hypertext Mark. UP Language) • HTML is the lingua franca for publishing hypertext on the World Wide Web • Define tags <html><body> <head>…. etc • Allow to embed other scripting languages to manipulate design layout, text and graphics • Platform independent • Current version is 4. x and in February W 3 C released the first draft of a test suite 4. 01 14

What is HTML…? HTML is a markup language for describing web documents (web pages). • HTML stands for Hyper Text Markup Language • A markup language is a set of markup tags • HTML documents are described by HTML tags • Each HTML tag describes different document content • Tags are not case sensitive(<h 1> or<H 1>) 15

HTML structure • HTML tags are keywords (tag names) surrounded by angle brackets: <tagname>content</tagname> • HTML is comprised of “elements” and “tags” – Begins with <html> and ends with </html> • Elements (tags) are nested one inside another: <html> <head></head> <body></html> • Tags have attributes: <h 1 align=“center” color=“red”></h 1> 16

Program syntax Html program contains two parts 1. Head section(includes title of the web page) 2. Body section(body of the program) 17

Simple program <HTML> <head> <title>first</title> </head> <body> <H 1>Hello World</H 1> </body> </HTML> 18

Tags: Heading tags <h 1>Main heading</h 1> <h 2>sub heading</h 2> <h 3>sub heading</h 3> Paragraph tags <p>First paragraph</p> 19

Different types of Tags: TAG DESCRIPTION <font></font> to set the font size and color <b></b> Bold <i></i> Italic <strong></strong> Strong <sub></sub> Subscript <sup></sup> superscript 20

Example of Tags: <html> <head> <title>second program</title> </head> <body> <p> this is the paragraph with <strong>strong</strong> tags. And also discuss about <b> bold</b> subscripts. </p> </body> </html> 22

4. LISTS We can create three types of lists in XHTML: 1. Unordered lists, which are like lists of bullet points 2. Ordered lists, which use a sequence of numbers or letters instead of bullet points 3. Definition lists, which allow you to specify a term and its definition 23

4. 1 Unordered Lists We can create unordered lists by using tag <ul> Synatx <ul type=“circle|disc|compact”> To write one by one we will use <li> 24

Example <html> <body> <h 1>Explaining about bullet lists</h 1> <ul type=“cicrle”> <li>Bullet point number one</li> <li>Bullet point number two</li> <li>Bullet point number three</li> </ul> </body> 25

Output: 26

4. 2 Ordered Lists Sometimes we need to order the list of items To create ordered list use <ol> tag Syntax: <ol type=“A”|”I”|”i”|” 1”> 27

Example: <html> <body> <ol type=“ 1”> <li>Point number one</li> <li>Point number two</li> <li>Point number three</li> </ol> </body> </html> 28

Output Of The Program: 29

4. 3 Definition Lists Some times we need to define the terms at that case, we will use Definition Lists To use the define the list <dl> Term which is to be defined must be in <dt>…</dt> Definition must be in <dd>. . </dd> 30

Example: <html> <head> <title>About lists</title> </head> <body> <h 1>Explaining about Definition Lists</h 1> <dl> <dt>HTML</dt> <dd>Hyper text Markup Language</dd> <dt>XML</dt> <dd>Extensible Markup Language</dd> </dl> </body> </html> 31

Output Of The Program: 32

5. Tables, just like spreadsheets, are made up of rows and columns To write table <table [align=“center”|”left”|”right”] [border [=“n”]] [cellpadding=“n”] [width=“nn%] [cellspacing=“n”]>. . </table> To write a row <tr[align=“center”|”left”|”right”][valign=“top”|”center”|”bottom”] >. . </tr> 33

Cont. . To write data in a row we will use <td> syntax <td [align=“center”|”left”|”right”][valign=“top”|”center”|”bottom” ]>. . </td> 34

Example: <html> <body> <table border=” 1”> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table> </body> </html> 35

Output of table: 36

Exercise 1: Write a HTML program for creating the following page. 37

Exercise 2: Write a HTML program for creating the following page. 38

6. Images <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src=“file name" alt=“ alternate text" height=“n" width=“n"> <html> <body> <h 2>Beautiful

6. Images <img src=“file name" alt=“ alternate text" height=“n" width=“n"> <html> <body> <h 2>Beautiful Flower</h 2> <img src="1. JPEG“ height="42" width="42"> </body> </html> 39

Output 40

7. Frames <frameset [cols=“%, %] [rows=“%, %”]> ……</frameset> To fill the data in frames <frame [name=“name”] src=“filename” [frameborder=“ 0”|1”] [scrolling=“yes”|”auto”|”no”] 41

Example: <html> <frameset rows="50%, 50%"> <frame src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="D: 11. jpg" /> <frameset cols="25%, 75%"> <frame

Example: <html> <frameset rows="50%, 50%"> <frame src="D: 11. jpg" /> <frameset cols="25%, 75%"> <frame src="D: 11. jpg" /> < /frameset> </html> 42

8. FORMS We will use tag <form> in the body part We can create 1. Text field 2. Text area 3. Check boxes 4. Radio button 5. Select boxes(Menu) 43

8. 1 Text Field( used to enter one line) <input type=”text” name=”name” value=”default value” size=” 20” maxlength=“length” /> 44

Example <html> <body> <form> <input type=”text” name=”txt. Search” value=”Search for” size=” 20” maxlength=” 64” /> <input type=”submit” value=”Submit” /> </form> </body> </html> 45

OUTPUT: 46

8. 2 Text Area (used to write multiple lines) <textarea name=“name” rows=“n” cols=“n”></textarea> Example <textarea name=”s” rows=” 20” cols=” 50”> Enter your feedback here. </textarea> <input type=”submit” value=”Submit” /> </form> 47

OUTPUT: 48

8. 3 Buttons 2 Types 1. Submit 2. Reset Tag: <input type=“submit”|”reset” value=“any value”> 49

Example <html> <body> <form> Enter name: <input type=“text” size=“ 20” <input type=“submit” value=“submit”/> <input type=“reset” value=“reset”/> </form> </body> </html> 50

OUTPUT 51

Exercise 52

8. 4 Checkbox A checkbox is created using the <input> element whose type attribute has a value of checkbox. <form> <input type=”checkbox” name=”s” value=”html” />HTML <input type=”checkbox” name=”s” value=”xhtml” />XHTML <input type=”checkbox” name=”s” value=”CSS” />CSS <input type=”checkbox” name=” s” value=”Java. Script” />Java. Script <input type=”checkbox” name=” s” value=”aspnet” />ASP. Net <input type=”checkbox” name=” s” value=”php” />PHP </form> 53

OUTPUT 54

8. 5 Radio Buttons Syntax: <input type=“radio”> input type=”radio” name=”A” value=”First” />First class <input type=”radio” name=”A” value=”Business” />Business class <input type=”radio” name=”A” value=”Economy” />Economy class </form> 55

OUTPUT 56

Exercise 57

8. 6 Select boxes A drop-down select box allows users to select one item from a drop-down menu. Drop-down select boxes can take up far less space than a group of radio buttons. 58

Example <select name=”sel. Color”> <option selected=”selected” value=”“>Select color</option> <option value=”red”>Red</option> <option value=”green” selected>Green</option> <option value=”blue”>Blue</option> </select> 59

Output 60

Exercise 61

9. Cascading Style Sheets There are three types 1. Inline 2. Embedded 3. External 62

9. 1 Inline style sheets Syntax <Tag style=“property: value”> Example: <p style=“font-size: 30 pt; font-family: arial; color: red”> 63

Example <html> <body> <p style=“font-size: 30 pt; font-family: arial; color: red”>This text is colored with red</p> </body> </html> 64

9. 2 Embedded style sheets Syntax Tag name { property 1; propert 2; } Ex: P { font-family: arial; color: red; } 65

Example: <html> <head> <title>Embedded</title> <style type="text/css"> p { font-size: 30 pt; font-family: Arial; color: red; } </style> </head> <body> <p>This text is colored with red</p> </body> </html> 66

OUTPUT 67

9. 3 External style sheets We will write the CSS properties in one file and include them in HTML by using <link rel=“stylesheet” type=“text/css” href=“ 1. css”> 68

1. CSS p { font-size: 30 pt; font-family: Arial; color: red; } 69

Example <html> <head> <title>Embedded</title> <link rel=“stylesheet” type=“text/css” href=“ 1. css”> </head> <body> <p>This text is colored with red</p> </body> </html> 70

OUTPUT 71

10. Different CSS properties Font-family: different font families Font-style: italic/underlined/normal Font-weight: Font-size: Text-align: Color: Background-color: Width: Height: 72