Unit - 1-WT

WEB TECHNOLOGY
-PROF. SNEHAL S. WAGH

INTRODUCTION TO WEB TECHNOLOGY
• WEB SITE
• HOME PAGE
1.1 WWW AND INTERNET
• HTML
• URI
• HTTP
1.2 UNIFORM RESOURCE LOCATOR
1.2 UNIFORM RESOURCE LOCATOR
• General Syntax:
• Transfer Protocol
• Servername.domain
• Directories and subdirectories(path name):
• Filename.filetype:
• .html or .htm hypertext files
• .gif, .jpg, .bmp: image files
• .zip, .tar :compressed files
1.3 DOMAIN NAME SYSTEM
• DNS Components:
• 1.Resolver
• 2. Name Servers
• 3. Domain Name Space
• 1.Domain Name Space
2.DNS SERVER(NAME SERVER)
3.DNS RESOLVERS
• 1.NON RECURSIVE QUERY
• 2. A RECURSIVE QUERY
4.ADDRESS RESOLUTION MECHANISM
1.2 HTTP PROTOCOL : Request and Response
2.HTTP COMMANDS
SR. HTTP DESCRIPTION
NO COMMAND
8 OPTIONS Describes the

communication
options for the
target resource.
9 CONNECT Establishes a
tunnel to the
server identified
by a given URI.
3. HTTP REQUEST MESSAGE
• 1. REQUEST LINE
• 2. REQUEST HEADER
• 3. AN EMPTY LINE
• 4. AN OPTIONAL MESSAGE BODY
EXAMPLE
4. HTTP RESPONSE MESSAGE
• 1. STATUS LINE
• 2. RESPONSE HEADER
• 3. AN EMPTY LINE
• 4. DOCUMENT(Actual body contents)
EXAMPLE
Response headers
HTTP REQUEST RESPONSE EXAMPLE
WEB BROWSER
• FEATURES OF WEB BROWSER
• 1. Refresh button:
• 2. Stop button:
• 3. Home button:
• 4. Web address bar:
• 5. Tabbed browsing:
• 6. Bookmarks:
WEB SERVERS
Web Server
• Apache HTTP server:
• Microsoft Internet Information Services (IIS):
• Ngnix
• Lighttpd:
• Jigsaw Server:
Web Pages
• web page is a document available on world wide web. Web Pages are
stored on web server and can be viewed using a web browser.
• A web page can contain huge information including text, graphics, audio,
video and hyper links. These hyper links are the link to other web pages.
Types of Web Pages
• 1. Static Web Pages
• 2. Dynamic Web Pages
• 3. Active Web Pages
Static Web Pages
Static Web Pages
• Static web pages are simply files that contains only html code and are
placed on the web Server.
• The static indicates that these web pages do not change frequently.
• Advantage:
• Search engines can find static web page easily
• Usually easier to develop
• Ideal for demonstrating how a site will look.
Static Web Pages
• Disadvantages:
• Required more storage space on server
• Does not provide personalization
• Difficult to maintain
• Difficult to keep consistent and up to date
Dynamic Web Pages
Dynamic Web Pages
• Advantages:
• Cheaper to Manage and maintain
• It can personalized and customized
• It shows differing contents according to user inputted data.
• It used templates and are created based on data sent from the web browser.
• Disadvantage: More expensive
Active Web Pages
WEB SITE PLANNIG
• PURPOSE AND GOALS OF SITE
• TARGET AUDIENCE
• ORGANIZING CONTENTS
• PUBLISHING OF WEBSITE
*WEB SITE DESIGN ISSUES
• TABLES OR FRAMES
• THE 3 CLICK RULE
• GOOD NAVIGATION
• FILE SIZE ISSUES
• FINDING YOUR WAY AROUND
• THE BROWSER BATTLES
• DERSIGN CONSIDERATION
• FUTURE OF WEB DESIGN
HTML
HTML
• Standard Generalized Markup Language
• Hyper: viewing any page any time by clicking link
• Text: what we will use
• Markup: Instructions for displaying text
• language: it consist a set of tag s with proper syntax and rules.
STRUCTURE OF HTML DOCUMENT
HTML TAGS
• HTML Tags:
• 1. Paired Tags
• 2. Unpaired Tags
• HTML TAG
HTML ELEMENTS
HTML ATTRIBUTES
• HTMLATTRIBUTE.docx
<h3 align=“left”>OM is aligned left</h3>
<h3 align=“center”>OM is aligned center</h3>
<h3 align=“right”>OM is aligned right</h3>
Result:
OM is aligned left
OM is aligned center
OM is aligned right
HTML ATTRIBUTES
HTML DOCUMENTS STRUCTURE
HTML ELEMENTS
1. HEADING 6. FRAMES
2. PARAGRAPH 7. LIST
3. LINE BREAK 8. TABLE
4. COLOR AND FONT 9. IMAGES
5. LINKS 10. FORM
HTML HEADING
PARAGRAPH
LINE BREAK
COLOR AND FONT
LINKS
Hyperlinks: <a>
Tag
• Link to a document called form.html on the same server in the
same directory:
<a href="form.html">Fill Our Form</a>
41
• Link to a document called parent.html on the same server in
the parent directory:
<a href="../parent.html">Parent</a>
• Link to a document called cat.html on the same server in
the
subdirectory stuff:
<a href="stuff/cat.html">Catalog</a>
• Link to an external Web site:
<a href="http://www.devbg.org" target="_blank">BASD</a>
THE HREF ATTRIBUTE
• 1. The Href attribute
2. The Target Attribute
2. The Target Attribute
3.The id Attribute
4.Email Links
FRAMES
HORIZANTAL FRAME USING ROW & COLOUM
ATTRIBUTE
LIST
LIST
TABLE
ROW-SPAN AND COLUMN SPAN
IMAGES
FORMS
• 1.The <Form> tag
• 2.The <input>tag
• - Text Box
• - Password Box
• - Radio Button
• - Check Box
• 3.The <Select>Tag
HTML Form
• The <form> Element
• The HTML <form> element defines a form that is used to
collect user input:
• Syntax
<form>
form elements
</form>
• Form elements are different types of input elements, like

• text fields,
• checkboxes,
• radio buttons,
• submit buttons, and more.
The <input>
Element • HTML5 Input Types
• The <input> element is the most
• HTML5 added several new input
important form element.
types
• Here are some examples: • color
• Input Type Text • date
• datetime-local
• Input Type Password
• email
• Input Type Submit • month
• Input Type Radio • number
• range
• Input Type Reset
• search
• Input Type Checkbox • tel
• Input Type Button …etc • time
• url
• week
Input Type
• <input type="text">
Text• This is how the HTML
defines a one-line text code above will be
input field: displayed in a
browser:
• Example
Input Type
• <input Password
• This is how the HTML
type="password"> code above will be
• defines a password field: displayed in a
browser:
• Example
Input Type Submit
• defines a button for submitting form data to a form-handler.
• The form-handler is specified in the form's action attribute:
• Example
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"> <br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>

<input type="submit" value="Submit">
</form>
Input Type Reset
• <input type="reset"> defines a reset button that will reset all
form values to their default values:
• click the "Reset" button, the form-data will be reset.
• Example
Input Type Button
• <input type="button"> defines a button:
• Example
• <input type="button" onclick="alert('Hello World!')"
value="Click Me!">
• After clicking above button it shows output as below:

Input Type
• <input type="radio"> defines aRadio
radio button.
• Radio buttons let a user select ONLY ONE of a limited number of
choices:
• <form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
• This is how the HTML code above will be displayed in a browser:

Input Type
Checkbox
• <input type="checkbox"> defines a checkbox.
• Checkboxes let a user select ZERO or MORE options of a limited
number of choices.
• Example
<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike
<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</form>
• This is how the HTML code above will be displayed in a browser:
HTML Input
Attributes
• The value Attribute
• The readonly Attribute
• The disabled Attribute
• The size Attribute
• The maxlength Attribute
The <select> Element
(Dropdown menus)
• The <select> element defines a drop-down list:
• <select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
The <select> Element with
multiple selection
• <select name="cars" size="4" multiple>
</select>
The <textarea> Element
• <textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
• The rows attribute specifies the visible number of lines in a

text area.
• The cols attribute specifies the visible width of a text area.
HTML Forms – Example
form.html
<form method="post" action="apply-now.php">
<input name="subject" type="hidden" value="Class" />
<fieldset><legend>Academic information</legend>
<label for="degree">Degree</label>
72
<select name="degree" id="degree">
<option value="BA">Bachelor of Art</option>
<option value="BS">Bachelor of Science</option>
<option value="MBA" selected="selected">Master of
Business Administration</option>
</select>
<br />
<label for="studentid">Student ID</label>
<input type="password" name="studentid" />
</fieldset>
<label for="fname">First Name</label>
<fieldset><legend>Personal Details</legend>
<input type="text" name="fname" id="fname" />
<br />
<label for="lname">Last Name</label>
<input type="text" name="lname" id="lname" />
HTML Input
Attributes
(Dropdown menus)
</select>
multiple selection
</select>
</textarea>

text area.
HTML Forms –
form.html Example
72
</select>
<br />
</fieldset>
<br />
(2)
form.html (continued)
<br />
Gender:
<input name="gender" type="radio" id="gm" value="m" />
<label for="gm">Male</label>
<input name="gender" type="radio" id="gf" value="f" />
<label for="gf">Female</label>
73
• <br />
• <label for="email">Email</label>
• <input type="text" name="email" id="email" />
• </fieldset>
• <p>
• <textarea name="terms" cols="30" rows="4"
• readonly="readonly">TERMS AND CONDITIONS...</textarea>
• </p>
• <p>
HTML Input
Attributes
(Dropdown menus)
</select>
multiple selection
</select>
</textarea>

text area.
HTML Forms –
form.html Example
72
</select>
<br />
</fieldset>
<br />
(2)
73
<br />
Gender:
<input name="gender" type="radio" id="gm" value="m" />
<label for="gm">Male</label>
<input name="gender" type="radio" id="gf" value="f" />
<label for="gf">Female</label>
• <br />
• <label for="email">Email</label>
• <input type="text" name="email" id="email" />
• </fieldset>
• <p>
• <textarea name="terms" cols="30" rows="4"
• readonly="readonly">TERMS AND CONDITIONS...</textarea>
• </p>
• <p>
• <input type="submit" name="submit" value="Send Form" />
• <input type="reset" value="Clear Form" />
• </p>
•</form>
(3)
74
HTML vs. HTML5
Html Html5
Doctype declaration in Html is too longer
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML DOCTYPE declaration in Html5 is very
4.01//EN" "http://www.w3.org /TR /html4 simple "<!DOCTYPE html>
/strict.dtd">
character encoding in Html is also longer
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML character encoding (charset) declaration is
4.0 Transitional//EN"> also very simple <meta charset="UTF-8">
Audio and Videos are integral part of
Audio and Video are not part of HTML4 HTML5 e.g. <audio> and <video> tags.
Vector Graphics is possible with the help of Vector graphics is integral part of HTML5
technologies such as VML, Silverlight, Flash etc e.g. SVG and canvas
It is almost impossible to get true GeoLocation of user JS GeoLocation API in HTML5 helps identify
browsing any website especially if it comes to mobile location of user browsing any website (provided
devices. user allows it)
Html5 use cookies. It provides local storage in place of cookies.
Not possible to draw shapes like circle, rectangle, Using Html5 you can draw shapes like
triangle. circle, rectangle, triangle.
Allows JavaScript to run in background. This is
Does not allow JavaScript to run in browser. JS possible due to JS Web worker API in HTML5
runs in same thread as browser interface.
Works with all old browsers Supported by all new browser.

CSS
Cascading Style Sheets
(CSS)
Introduction of
CSS
• Cascading Style Sheets, fondly referred to as CSS, is a simple
design language intended to simplify the process of making
web pages presentable.
• CSS handles the look and feel part of a web page.
• Using CSS, you can control the color of the text, the style of
fonts, the spacing between paragraphs, how columns are sized
and laid out, what background images or colors are used,
layout designs,variations in display for different devices and
screen sizes as well as a variety of other effects.
Advantages of
CSS
• CSS saves time
• Pages load faster
• Easy maintenance
• Superior styles to HTML
• Multiple Device
Compatibility
• Global web standards
• Offline Browsing
• Platform Independence
CSS3
Modules
• Selectors
• Box Model
• Backgrounds and Borders
• Image Values and Replaced Content
• Text Effects
• 2D/3D Transformations
• Animations
• Multiple Column Layout
• User Interface
CSS -
Syntax
• A CSS comprises of style rules that are interpreted by the
browser and then applied to the corresponding elements in
your document.
• Style rule is made of three parts −
• Selector − A selector is an HTML tag at which a style will be
applied. This could be any tag like <h1> or <table> etc.
• Property - A property is a type of attribute of HTML tag. Put
simply, all the HTML attributes are converted into CSS
properties. They could be color, border etc.
• Value - Values are assigned to properties. For example, color
property can have value either red or #F1F1F1 etc.
CSS -
Syntax
• Syntax:
• selector { property: value }
• Example:
• table{ border :1px solid
#C00; }
CSS selectors
(1)
• CSS selectors are used to "find" (or select) HTML elements
based on their element name, id, class, attribute, and more.
• The element Selector
• The element selector selects elements based on the element
name.
• You can select all <p> elements on a page like this (in this case, all
<p> elements will be center-aligned, with a red text color):
• Example
• p{
text-align: center;
color: red;
}
Example with
output Output
HTML Code with CSS
CSS selectors
• The id Selector
(2)
• The id selector uses the id attribute of an HTML element to
select a specific element.
• The id of an element should be unique within a page, so the id
selector is used to select one unique element!
• To select an element with a specific id, write a hash (#)
character, followed by the id of the element.
• The style rule below will be applied to the HTML element with
id="para1":
• Example
• #para1 {
text-align: center;
color: red;
}
Example with output
HTML Code with
CSS
Output
CSS selectors
• The class Selector
(3)
• The class selector selects elements with a specific class
attribute.
• To select elements with a specific class, write a period
(.) character, followed by the name of the class.
• In the example below, all HTML elements with
class="center"
will be red and center-aligned:
• Example
• .center {
text-align: center;
color: red;
}
Example with output
HTML Code with
CSS
Output
CSS selectors
(4)
• The class Selector continued….
• You can also specify that only specific HTML elements should
be affected by a class.
• In the example below, only <p> elements with class="center"
will be center-aligned:
• Example
• p.center {
text-align: center;
color: red;
}
CSS selectors
• Grouping Selectors
(5)
• If you have elements with the same style definitions, like this:
• h1 {
text-align: center;
color: red;}
h2 {
text-align: center; color: red; }
p{
text-align: center;
color: red;}
• It will be better to group the
selectors, to minimize the code.
• h1, h2, p {
text-align: center; color: red;
}
Example with output
HTML Code with
CSS
Output
Insert CSS in
HTML
• Three Ways to Insert CSS
1. External style sheet
2. Internal style sheet
3. Inline style
External Style
Sheet
• With an external style sheet, you can change the look of an
entire website by changing just one file!
• Each page must include a reference to the external style sheet
file inside the <link> element. The <link> element goes inside
the <head> section:
• Example
• <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
External Style Sheet -
Example
HTML Code
CSS File named- mystyle.css

Internal Style Sheet
• An internal style sheet may be used if one single page has a
unique style.
• Internal styles are defined within the <style> element, inside
the <head> section of an HTML page:
• Example
Inline
Styles
• An inline style may be used to apply a unique style for a single
element.
• To use inline styles, add the style attribute to the relevant
element. The style attribute can contain any CSS property.
• The example below shows how to change the color and
the
left margin of a <h1> element:
• Example
Text-related CSS
Properties
• color – specifies the color of the text
101
• font-size – size of font: xx-small, x-small, small, medium, large,
x-large, xx-large, smaller, larger or numeric value
• font-family – comma separated font names
• Example: verdana, sans-serif, etc.
• The browser loads the first one that is available
• There should always be at least one generic font
• font-weight can be normal, bold, bolder, lighter or a number
in range [100 … 900]
CSS Rules for Fonts
(2)
• font-style – styles the font
• Values: normal, italic, oblique
• text-decoration – decorates the text
102
• Values: none, underline, line-trough,
overline, blink
• text-align – defines the alignment of text
or other content
• Values: left, right, center, justify
Shorthand Font Property
• font
103
• Shorthand rule for setting multiple font properties at
the same time
font:italic normal bold 12px/16px verdana
is equal to writing
this:
font-style: italic;
font-variant: normal;
font-weight: bold;
font-size: 12px;
line-height: 16px;
font-family: verdana;
Backgrounds
• background-image
• URL of image to be used as background, e.g.:
104
background-image:url("back.gif");
• background-color
• Using color and image and the same time
• background-repeat
• repeat-x, repeat-y, repeat, no-repeat
• background-attachment
• fixed / scroll
Backgrounds (2)
• background-position: specifies vertical and horizontal
105
position of the background image
• Vertical position: top, center, bottom
• Horizontal position: left, center, right
• Both can be specified in percentage or other numerical values
• Examples:
background-position: top left;
background-position: -5px 50%;

Borders
• border-width: thin, medium, thick or numerical
106
value
(e.g. 10px)
• border-color: color alias or RGB value
• border-style: none, hidden, dotted, dashed, solid,
double, groove, ridge, inset, outset
• Each property can be defined separately for left, top, bottom
and right
• border-top-style, border-left-color, …
Border Shorthand Property
• border: shorthand rule for setting border properties at once:
border: 1px solid red
107
is equal to writing:
border-width:1px;
border-color:red;
border-style:solid;
• Specify different borders for the sides via shorthand rules:

border-top, border-left, border-right, border-
bottom
• When to avoid border:0
Width and Height
• width – defines numerical value for the width of element,
108
e.g. 200px
• height – defines numerical value for the height of
element,
e.g. 100px
• By default the height of an element is defined by its content
• Inline elements do not apply height, unless you change their
display style.
INTRODUCTION TO CSS
ADVANTAGES OF CSS
DISADVANTAGES OF CSS
INSERTING CSS TO HTML
CSS SELECTOR
CSS COMMENTS
XML
INTRODUCTION OF XML
WHY XML?
COMPARING XML WITH HTML
XML SYNTAX RULE
XML KEY COMPONENTS
XML DTD
TRANSFORMING XML into XSLT
XML ELEMENTS
XSLT
DTD
DTD TYPES
XML SCHEMA
DTD- ELEMENTS
DTD ATTRIBUTES
INTRODUCTION TO JSON
JSON-DATA TYPE
JSON-DATA TYPES
JSON SYNTAX RULES
USES OF JSON
JSON vs. XML

Unit - 1-WT

Uploaded by

Copyright:

Available Formats

Unit - 1-WT

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unit - 1-WT

Uploaded by

Copyright:

Available Formats

WEB TECHNOLOGY

-PROF. SNEHAL S. WAGH

8 OPTIONS Describes the

• Form elements are different types of input elements, like

<input type="text" name="lastname" value="Mouse"><br><br>

• After clicking above button it shows output as below:

• This is how the HTML code above will be displayed in a browser:

• The rows attribute specifies the visible number of lines in a

• The rows attribute specifies the visible number of lines in a

• The rows attribute specifies the visible number of lines in a

Works with all old browsers Supported by all new browser.

CSS File named- mystyle.css

background-position: top left;

background-position: -5px 50%;

• Specify different borders for the sides via shorthand rules:

You might also like