WEB DEVLOPEMENT

Page | 1
 Chapter-1: HTML Basics

“HTML is a language for describing, organizing, and linking the text, graphics and files
containing other information together.”
HTML HISTORY:
1989 Tim Berner Lee invented www
1991 Tim Berner Lee invented HTML
1993 Dave Ragget drafted HTML+
1995 HTML working group defined HTML 2.0
1997 W3C Recommendation: HTML 3.2
1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
2008 WHATWG HTML5 first public draft
2012 WHATWG HTML5 living started
2014 W3C Recommendation: HTML 5
2016 W3C candidate Recommendation: HTML 5.1
2017 W3C candidate Recommendation: HTML 5.1 2nd edition
2017 W3C Recommendation: HTML 5.2

<!Doctype>: represents the document type and inform browser about version of HTML.
Structural markup: Elements used to describe both headings and paragraphs.
Semantic markup: Provides extra information such as emphasis, quotation etc.
Elements: components of webpage. Ex: Body, Title, images etc.
Attributes: Properties of elements. Ex: color, height, width, style etc.
Tags: tells browser how to interpret the data. Ex: <p>...</p>

<strong> High importance Bold

<em> Emphasis text Italic
<blockquote> Specifies a section quotes from another source. Longer Quotes
<q> Shorter quotes
<abbr> abbreviation
<acronym> Spell out full form of acronym
<cite> Referencing piece of work such as book, research, films Italic
<dfn> Define instance of new term. Italic
<address> Specific use to show contact details of the author. Italic
<ins> Shows content inserted into document. Underlined
<del> Shows content deleted from document. Line through it
<s> Indicated something that is no longer accurate or Line through it
relevant (but not deleted).
Page | 2
NOTE: safari and chrome do not change appearance in <dfn> tag.

<u>strong tag:</u>

<p>This toy has many small pieces and is

<strong> not suitable for children under five years old. </strong>
</p>

<br><u>em tag:</u>

<p>I <em>think</em> Ivy was the first. </p>

<p>I think <em>Ivy</em> was the first.</p>
<p>I think Ivy was the <em>first</em>.</p>

<br><u>Quotations tag:</u>

<blockquote cite="http://en.wikipedia.org/wiki/Winnie-the-Pooh">
<p>Did you ever stop to think, and forget to start again?</p>
</blockquote>
<p>As A.A. Milne said, <q>Some people talk to animals. Not many listen though.
That's the problem.</q></p>

<br><u>abbr tag:</u>

<p><abbr title="Professor">Prof</abbr> Stephen Hawking is a theoretical physicist

and cosmologist.</p>
<p><acronym title="National Aeronautics and Space Administration">NASA
</acronym> do some crazy space stuff.</p>

<br><u>cite and dfn tag:</u>

<p><cite>A Brief History of Time</cite> by Stephen Hawking has sold over ten million
copies worldwide.</p>
<p>A <dfn>black hole</dfn> is a region of space from which nothing, not even light,
can escape.</p>

<br><u>address tag:</u>

<address>
<p><a href="mailto:homer@example.org">homer@example.org</a></p>
<p>742 Evergreen Terrace, Springfield.</p>
</address>

<br><u>del and ins tag:</u>

<p>It was the <del>worst</del> <ins>best</ins> idea she had ever had.</p>

<br><u>s tag:</u>

<p>Laptop computer:</p>
<p><s>Was $995</s></p>
<p>Now only $375</p>

Page | 3
Page | 4
 Chapter–2: LIST
1. Ordered List: <ol> tag
2. Unordered List: <ul> tag
3. Definition List:
• <ul> tag
• made up of set of terms along with the definition for each of those terms.
• <dt> : definition terms
• <dd> : definition data
NOTE: Nested lists are allowed in HTML.
<u>Definition List:</u>
<dl>
<dt>Sashimi</dt>
<dd>Sliced raw fish that is served with condiments such as shredded daikon
radish or ginger root, wasabi and soy sauce.</dd>
<dt>Scale</dt>
<dd>A device used to accurately measure the weight of ingredients.</dd>
<dd>A technique by which the scales are removed from the skin of a fish.</dd>
<dt>Scamorze</dt>
<dt>Scamorzo</dt>
<dd>An Italian cheese usually made from whole cow's milk (although it was
traditionally made from buffalo milk).</dd>
</dl>
<u>Nested List:</u>
<ul>
<li>Mousses</li>
<li>Pastries
<ol>
<li>Croissant</li>
<li>Mille-feuille</li>
<li>Palmier</li>
<li>Profiterole</li>
</ol>
</li>
<li>Tarts</li>
</ul>

Page | 5
 Chapter–3: LINKS

Link to other sites:

• Absolute URLs: starts with domain name followed by the path to a specific page.
• Format: root/folder1/folder2/destination.html

Link to other pages on same site:

• Relative URLs:
• Format: current file/target folder/destination.html

Links from one part of web page to another part of same web page:
On larger websites it is a good idea to organize your code by placing the pages for each
different section of the site into a new folder.
• Same folder: < a href = “destination.html”>
• Moving into the folder: < a href = “folder_name/destination.html”>
• Moving out of folder: < a href = “../../destination.html>
Note: “../” – out of 1 folder
“../../” – out of 2 folders
“../../../” – out of 3 folder

Page | 6
Email Links:

Page | 7
Opening Links in new window: use “target” attribute with value “_blank.”

Linking to a specific part of the same page:

• Headings will be given “id” attribute.
• id should start will letter or an underscore only.
• Link format: <a href = “#id_name”>

Linking to a specific part of another page: same as above

Link Format: <a href= “http:/www.website.com/#bottom”>

Page | 8
 Chapter–4: IMAGES

• Stock images are the images you pay to use.

• Ex: www.istockphoto.com, www.gettyimages.com, www.veer.com, www.sxc.hu,
www.fotolia.com
• Attributes:
1. src - contains URL or path of image in folder.
2. alt – text description of image if you cannot see it.
3. title – additional information about the image when you hover the mouse on
image.
4. height
5. width
• Position of image:
1. Before a paragraph - paragraph starts on new line after image.
2. Inside the start of paragraph – 1st row of text aligns with bottom of image.
3. Middle of paragraph – image between the words

• Block elements always appear on a new line. Ex: <h1>, <p>

• Inline elements sit within a block level element and do not start on a new line.
Ex: <b>, <em>, <img>
• align attribute: indicates how other parts of page should flow around an image.
1. Removed from HTML 5 and new websites using CSS
2. Value = left, right, top, middle, bottom
3. “top” places the 1st line near the top of image and so on.

Page | 9
• 3 rules to create images:
1. Save in right format:
• JPEG – different colors and GIF/PNG – few colors
2. Save at right size.
3. Use correct resolution.
• JPGs, GIFs, PNGs belongs to bitmap format made up of lots of miniature
squares. Images on computer are in pixels that are displayed on web
pages at a resolution of 72 ppi (pixels per inch)
• while images in printing materials like books and magazines are made up
dots that are usually printed at 300 dpi (dots per inch).
• Vector Images: differ from bitmap images as they are resolution
independent and created by placing points on grid and drawing lines b/w
points.
• Used for images with line drawings like logos, diagrams, illustration.
• SVG (Scalable Vector graphics) new format to display vector images
directly on web.
Page | 10
• <figure> and <figcaption> attributes: “figure” attribute contains the images and
their captions and “figcaption” attribute allows user to add caption to an image.

Page | 11
 Chapter–5: TABLES

• Attributes:
• <tr> - table row
• <td> - table data
• <th> - table heading
• <colspan> - used on <th> or <td> to combine columns (horizontally).
• <rowspan> - used on <th> or <td> to combine rows (vertically).
• <width> - width of table
• <cellpadding> - spacing inside table
• <cellspacing> - spacing b/w cells
• <border> - indicates width if border in pixels.
• <bgcolor> - indicates background color of entire table or cell.
• <th scope = “row”> - specifies heading for row
• <th scope = “col”> - specifies heading for column
• LONG Tables:
• <thead> - heading of table
• <tbody> - Body of table
• <tfoot> - footer of table
• <tr>, <th>, <td> remains same as above.

Page | 12
 Chapter–6: FORM

• Attributes:
• action – URL for the page on the server that will receive the info in form.
• method – sending the form.
• get method – values of form are added to end of URL.
• suitable for short forms such as search boxes.
• post method – values are sent in HTTP headers.
• suitable for sensitive info like password, PIN, card details.
• If method attribute id not used, by default get method is used.
• Elements:
• <label>
• <input>
• type = text / password / radio / checkbox.
• name – identifies the form control and is sent along with the
information to the server.
• size – indicates width of text input.
• maxlength – limit the number of characters a user may enter into
text field.
• placeholder – text that will eb shown in text box until user clicks
on it.
• valued – indicates the value that is sent to the server for selected
option.
• checked – indicate which value should be selected when the
page loads. [ value = “checked”]
• <type = “button”>
• value – attribute controls the text that appears on the
button.
• <type = “file”> creates a textbox followed by browse button.
• <type = “image”> - used for image on submit button.
• Attributes: src, width, height
• <type = “date”> - create date input.
• <type = “email”> - create email input
• <type = “url”> - create URL input
• <type = “search”> - create email input
• <textarea>
• name
• cols
• rows

Page | 13
• <select> - drop down list box that allows to select one option from drop
down list.
• name
• size – number of options you want to show at a glance.
• multiple – allows user to select multiple options from list.
[value = “multiple”]
• <option> - element used to specify the options user can select.
• value – option attribute, used to indicate the value that is sent to
server along with name of control.
• selected – option attribute, used to indicate with option to
selected when page loads. [value = “selected”]
• <button>
• <fieldset> - grouping form elements with a line around the edge.
• <legend> - contains caption for fieldset.

Page | 14
 Chapter–7: EXTRA MARKUP

• DOCTYPE declaration specifies the browser which version of HTML is being used.
• Comments: <!-- comments goes here -->
• id attribute – uniquely identify that element on the page and should start with a
letter or an underscore.
• class attribute – identify a group of several elements being different from others.
• Block level element: always start on new line. Ex: <h1>, <p>, <ul>, <li>.
• Inline elements: continue on the same line. Ex: <a>, <b>, <em>, <img>.
• <div>: element allows to group a set of elements together in one block-level box.
• <span>: inline equivalent of <div> used where a number of inline elements are
included.
• <iframe>: abbreviation of inline frame, little window that has been cut into your
page and in that window you can see another page.
• src – URL o page to show
• height, width
• scrolling – allows the scrollbar in HTML4 and XHTML, not in HTML 5.
• frameborder
• seamless
• <meta>: contains inside <head> and contains info about the web page.
• Attributes:
• name, content – specifies properties of entire page.
• name = “description” – used by search engine to understand
what page is about and should be max 155 chars.
• “keywords” – comma-separated words that user might search
onto find the page.
• “robots” – indicates whether search engine should add this page
to their search results or not. [value = “nofollow” add this page]
• http -equiv –
• author
• pragma – prevents browser from catching the page. [storing it
locally to save time downloading it on subsequent visits]
• expires – indicates when the page should expire. [date format =
Fri, 04 Apr 2014 23:54:06 GMT]
• Escape Character:
< &lt &#60 Less than
> &gt &amp Greater than
& &amp &#38 Ampersand
“ &ldquo &#8220 Left double quote
” &rdquo &#8221 Right double quote
Page | 15
Page | 16
 Chapter–8: FLASH, VIDEO & AUDIO

• Flash is a very popular technology used to animations, video and audio to websites.
• While creating flash file in Flash authorising environment, file extension - .fla
• In order to use in web page, convert to SWF format. [.swf file]
• Timeline:

Page | 17
 • USE of Flash:
• In 2005-6, a set of JavaScript libraries were launched (including prototype,
scrit.aculo.us and jQuery) which made it easier to create animated effects
using JS.
• In 2008, HTML5 introduced <video> and <audio> tags.

• Adding Flash Movie:

• Using JavaScript and <div> tag.
• <div> tag creates a space where the Flash movie should sit. It also contains
alternative content when Flash is not displayed.

• 1st <script> - SWFObject script is hosted on server. ‘type’ attribute is used to

indicate that the script written inside is JavaScript.
• 2nd <script> - tell the browser about the Flash movie, as well as which
element it should replace.
• “flash/bird.swf” - Location of file
• “bird” – id of <div> tag to replace content.
• 8.0.0 – minimum version of flash player to view movie.

• Video Formats and players:

• Browsers differ in formats supported by them.
• Encoding – process of converting a video into another format.
• Players/ plugins – program to play video content but not of every format.
• Solution – add video using hosted server such as YouTube or Vimeo

• Hosted Video Services:

• Alternative – using Flash Video and HTML5 <video> element.

Page | 18
 Advantage Disadvantage
No need to worry about encoding You need your own server and player I you
video since they allow large range of want to exclusively show the content on
formats. your site.
Cost effective because companies Some hosted services will play their adverts
often charges extra for hosting before your video will begin, or even
videos in your site overlay them.

• Preparing Flash Video:

• Convert video into FLV format.
• Find an FLV player. Ex: www.osflv.com, www.longtailvideo.com
• Include the player and video in your page. [using JavaScript techniques such
as SWFObject]

• Video player need the path to play video, so SWFObject uses JavaScript
variable flashvars to pass this info to Flash Movie.
• Path to movie is supplied in the variable params.

• HTML 5: Preparing Videos:

• Support – both HTML5 <video> and Flash Video
• Digital rights - <video> element doesn’t support any type of DRM (Digital
Management Rights)
• Formats – H264 - IE and safari, WebM – Android, chrome, Firefox, Opera
• Controls – appearance is browser based but can still be controlled by
JavaScript.

Page | 19
• Adding Video: <video> tag
• src
• poster – image to show while the video is downloading or until user plays
the video.
• width, height
• preload – tells the instruction to browser when page loads.
• none – browser should not load the video until user presses play.
• auto – browser downloads video when page loads.
• metadata – browser just collect info such as size, frame, duration.
• controls – browser supply its own controls for playback.
• autoplay
• loop – video runs in loop

• Multiple Video sources: <source> element

• src
• type – Ex: video/mp4, video/webm
• codecs – The codec that was used to encode the video is
supplied within the ‘type’ attribute.

Page | 20
 Chapter–9: CSS

• Authors use one CSS file to control the presentation (fonts, colors) and second to
control the layout.
• Selectors – indicate which element the rule applies to.
• Declarations – indicate styling of element in selectors.
• Two parts: property and value
• Property – aspects of elements. Ex: color, font, width, height, border.
• Values – values chosen for properties.

External CSS Internal CSS

• Using <link> tag inside <head> • Using <style> tag inside <head>
• href – path of CSS file •
• type – should be “text/css” • type – should be “text/css”
• rel – specifies relationship b/w • used when number of webpages
HTML page and CSS file. is small.
value should be “stylesheet”

• Why use External Style Sheet?

• No need to repeat same code in every page of web site.
• Code will be easier to read and edit.
• Once user has downloaded the CSS stylesheet, the rest of the site will
load faster.

Page | 21
• CSS selectors are case sensitive.

• Rules to apply CSS:

• Last Rule – If identical, latter selector will take precedence.
• Specificity – more specific rule will take precedence over more general
ones.
• Important – “! important” after any property value indicate it should be
considered more important for identical selectors.
Page | 22
• Inheritance – Properties on <body> like font-family, color is inherited by most child
elements while properties background-color, border are not inherited by child
elements.

• CSS versions: CSS1 – 1996, CSS2 – 1998, CSS3 – ongoing

• Browser Quirks – When a CSS property does not display as expected, it is referred as
Browser Quirk OR CSS bug.
• Online tools for appearance of a page in multiple browsers: BrowserCam.com,
BrowserLab.Adobe.com, BrowserShots.org, CrossBrowserTesting.com
• Solution to find bug in CSS: PositionIsEveruthing.net, QuirksMode.org

Page | 23
 Chapter–10: COLOR

• color
• background-color
• specified in 3 ways:
• RGB values
• HEX codes
• color names

• opacity – values b/w 0.0 and 1.0 [ 0.5 means 50% opacity]
• rgba – ‘a’ indicates opacity and is known as alpha value.

Page | 24
• CSS3: HSL colors – new way to specify colors using Hue, saturation and Lightness values.

NOTE: Brightness and Lightness are different. Brightness offers only black while Lightness
offers both white and black.

• hsl, hsla – hue, saturation, lightness, alpha

Page | 25
 Chapter–11: TEXT

• Typeface – design of letters, numbers and other symbols used in printing or

electronic display.
• Typeface includes variation in:
• Weight – light, medium, bold, black
• Style – normal, italic, oblique
• Stretch – condensed, Regular, Extended

• SERIF fonts: Extra details at the end of main strokes of letters.

• Used in printing of long passages of text.
• Ex: Georgia, Times, Times New Roman
• SANS-SERIF fonts: Straight ends to letters.
• Used in small text like screens have lower resolution than prints.
• Ex: Arial, Verdana, Helvetica
• MONOSPACE fonts: Fixed width.
• Used in writing code.
• Ex: Courier, Courier New
• CURSIVE fonts: Either joining strokes or cursive characteristics.
• Used in handwriting styles.
• Ex: Comic sans MS, Monotype Corsiva
• FANTASY fonts: Decorative fonts.
• Used in titles.
• Ex: Impact

• Attributes:
• font-family – list of fonts OR typefaces used in that element.
• font-size – specified in 3 ways:
• pixels (px) – most commonly used.
• percentage – default size = 16px
• EMS – An ‘em’ is equivalent to width of letter ‘m.’

Page | 26
• font-weight – [values = normal, bold]
• font-style – [values = normal, italic, oblique]
• text-transform – changes case of text. [values = uppercase, lowercase,
capitalize]
• text-decoration – [values = none, underline, overline, line-through, blink]
• line-height – set the height of entire line of text.
• Line-height = font-size + leading
• Measured in em.
• Should be 1.4 - 1.5 em.
• Leading – vertical space b/t lines of text measured from bottom
of descender to top of ascender on text.

• letter-spacing and word-spacing –

• Kerning – space b/w each letter [used by typographers]
• Measured in em. [default = 0.25 em]
• text-align
• vertical-align – commonly used with inline elements such as <img>,
<em>, <strong> and performs similar to HTML align attribute.

values = baseline, sub, super, top, text-top, middle, bottom, text-bottom

• text-indent – indent is the empty spacing at the beginning of the line.

• can take negative value which means text shift to left, off the browser.

Page | 27
 • text-shadow – Ex: 1px 1px 3px #000000
• 1st value – Horizontal Offset.
• -ve value – position to left
• +ve value – position to right
• 2nd value – Vertical Offset.
• 3rd value – Blur Distance [optional].
• 4th value –color of shadow.
• Print designers refer to size of text in terms of points (pt).
• A pixel roughly equates to a point because a point corresponds to 1/72 of
an inch and most computer displays have a resolution of 72 dots per
inch.
• Units to Type Size: :

NOTE: extra p rule is to help Internet Explorer 6 and 7 display the fonts at right size.
• @font-face – allows to use a font, even if it is not downloaded on system by
specifying the path to a copy of font.
• font-family
• src
• format – format of font, just like format of audio or video.
Values – eot, woff, ttf/otf, svg

Page | 28
 • open source fonts: www.fontsquirrel.com, www.fontex.org,
www.openfontlibrary.org
• paid commercial fonts: www.typekit.com, www.kernest.com,
www.fontspring.com
• FontSquirrel allows to convert font formats and also the CSS code for
@font-face.

• Pseudo element – extra value at the end of selector and specify declarations.
• :first-letter
• :first-line

• Pseudo class – extra value for class attribute.

• :link – default = blue
• :visited – default = violet
• :hover
• :active – default - red
• :focus

Before After focus

NOTE: ordering MUST be link, visited, hover, active for effective links.

• Attribute Selector – Selects elements with specified attribute.

Selector Meaning Symbol Example
Existence Matches a specified attribute [] p[class]
Equality Specified attribute with specific value [=] p[class = “dog”]
Space Specific attribute with value in space [~=] p[class ~= “dog”]
separated list of words.
Prefix Begins with specific string [^=] p[ attr ^”d”]
Substring Contains a specific string. [*=] p[attr *”do”]
Suffix Ends with specific string [$=] P[attr$”g”]

Page | 29
 Chapter–11: BOXES

• Box Dimensions -
• width, height
• pixels
• percentage – size of box is relative to size of browser window.
• ems – size of box relative to text within it.

• Limiting Width –
• min-width = smallest size of Box when browser window is narrow.
• max-width = maximum width of Box when browser window is wide.
• Helpful when content of pages are legible (especially on smaller
screens).
• Limiting Height –
• min-height
• max-height
• If the box is not big enough to hold the content, the content expands
outside the box which looks very messy.

• Solution – overflow – handles the content when content within box is

larger than box itself. It has 2 values:
• hidden – hides any extra content.
• scroll – adds a scrollbar to box.

Page | 30
• Box Shadow – same as text shadow
• 1st value – Horizontal Offset.
• -ve value – position to left
• +ve value – position to right
• 2 value – Vertical Offset.
nd

• 3rd value – Blur Distance [optional].

• If omitted, shadow is solid line like border.
• 4th value – color of shadow.
• 5thth value – Spread of shadow.
• +ve value – expand shadow in all direction.
• -ve value – contract.
• ‘inset’ keyword – create inner shadow.

NOTE: Chrome, Firefox and Safari support this property using -moz-box-shadow and
-webkit-box-shadow but these are not in CSS specification.

Page | 31
• Border, Margin & Padding –

• border-width –
• either in pixels or one of following values:
• thin
• medium
• thick
• can’t use pecentage
• control indivisual borders:
• border-top-width
• border-right-width
• border-bottom-width
• border-left-width
• values appear in clockwise order: top-right-bottom-left

• border-style – can take following values:

• solid, dotted, dashesd
• double, groove
• ridge, inset, outset
• control indivisual:
• border-top-style
• border-right- style

Page | 32
 • border-bottom- style
• border-left- style

• border-color –
• control indivisual:
• border-top-color
• border-right- color
• border-bottom- color
• border-left- color
• ordering – top-right-bottom-left
• HSL can also be used but in CSS3 only. Not in older
versions.

• border – ALL IN ONE (width, style and color)

• border-radius – create round corners on box

• Indivisual corner radius is also allowed.
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius
• border-top-left-radius

Page | 33
 • Elliptical Shapes: specify different distance for
horizontal and vertical parts of rounded corner.

Ex: border-top-left-radius: 80px 50px

• Shorthand can be used ny specifying 4 horizontal

values and then 4 vertical values.

• Even circle can be created by taking square box.

• border-image – takes a background image a slice it into 9 piece.

• Property takes 3 piece of information:

• URL of image
• Where to slice image
• What to do with straight edge:
• stretch
• repeat
• round – same as repeat but scale the
tile image if donot fit exactly.

Page | 34
• padding – space b/ content of an element and its border.
• pixels (most common), percentage, ems
• if width is specified for box, padding is added onto the
width of box.
• Indivisual padding is also allowed i.e., padding-top

• margin – gap b/w boxes

• Indivisual margins are also allowed i.e., margin-top
• If one box sits on top of other, margins are collapsed
means larger of t argins will be used and smaller will be
disregarded.
• If width of box is specified, then marigin is added to
width of box.

• Centering Content – set left and right margin to auto.

[ must set width of box]

Page | 35
NOTE:
• padding and margin property are not inherited byb the child elements is the same
way that color value of font-family property.
• margin : 10px 20px >> means left and right margins are 10 px while topo and
bottomare 20px.
[same shorthand for padding]

• Change INLINE/ BLOCK –

• display. It has 4 values:
• inline: block-level to inline
• block: inline to block-level
• inline-block: cause block-level to flow like inline
element while retaininh other features of block-level
element.
• none: hides element from page.
• Hididng Boxes –
• visibility. It has 2 values:
• hidden – blank space will appear.
• visible

• Content of hidden element can be viewed by viewing source in

browser.

Page | 36
 Chapter–12: LISTS, TABLES AND FORMS

• list-style-type – control shape of bullet points (also known as markers.)

• unordered list:
• values: none, disc, circle, square
• ordered list: values:
• decimal: 1 2 3
• decimal-leading-zero: 01 02 03
• lower-alpha: a b c
• upper-alpha: A B C
• lower-roman: i. ii. iii.
• Upper-roman: I II III
• used on <ol>,<ul>, <li>

• list-style-image – image as bullets

• used on <ul>, <li>
• value: url(“ //path goes here ”)
• margin property to increase vertical gap b/w each item in the list.

• list-style-position – positioning of bullets or marker. It has 2 values:

• outside: marker sits to left of block of text.
• inside: marker sits inside the box of text which is indented.

• list-style– shorthand

Page | 37
• Table Properties:
• width
• padding – spacing b/w border of cell and its content
• text-transform – convert content of table headers into UPPER case.
• letter-spacing
• font-size
• border-top, border-bottom – borders above and below the table
headers.
• text-align
• background-color
• :hover – highlight table row when user’s mouse goes over it.
• Tips for styling Tables:
• Give cell padding.
• Distinguish heading.
• Shade alternate rows
• Align numbers to right.

• empty-cells – specify border on empty cells. Values:

• show
• hide
• inherit – instructs table cells to obey rules of containing table, if
one table nested inside other.

• border-spacing – distance b/w adjacent cells

• border-collapse – 2 values:
• collapse – border-spacing and empty-cells will be ignored.
• separate – borders are detached from each other. And border-
spacing and empty-cells will be obeyed.

Page | 38
• Styling Forms:
• Text Inputs:
• font-size
• color
• background-color
• border
• border-radius
• :focus – pseudo class to change color of text box when it is being
used
• :hover
• background-image

• Submit Button:
• color
• text-shadow
• border-bottom
• background-color
• :hover

• Fieldsets and Legends: Fieldset determines the edges of form while

legend indicates the information required in fieldset.
• width
• color
• background-color
• border-radius
• padding

• cursor: control type of mouse cursor while hovering. Common values:

• auto
• crosshair
• default

Page | 39
• pointer
• move
• text
• wait
• help
• url(“cursor.gif”)

Page | 40
 Chapter–13: IMAGES

• width, height – First name the sizes of images, commonly used throughout the site
i.e., small, medium, large.

• Align Images: 2 methods:

• text-align – values: right, left, centre
• “float” – value: right, left
• Create classes named “align-left” and “align-right” for different images.

• Center Aligning:
• display: block = convert to block level.[ images are by default
inline elements]
• margin: 0px auto = “auto” value centers the image.

• Background:
• background-image – format = url(“ …path…”)
• can be applied to particular element.

Page | 41
• background-repeat – 4 values:
• repeat
• repeat-x : image is repeated horizontally only.
• repeat-y : image is repeated vertically only.
• no-repeat

• background-attachment – specify whether background image should

be fixed or not. It has 2 values:
• fixed
• scroll

• background-position – specify position of background image when

image is not repeated.
• Usually have pair of values.
• left top
• left center
• left bottom
• center top
• center center
• center bottom
• right top
• right center
• right bottom
• If only one value is specified, then other is center by default.
• Pair of pixels or percentages can also be used which specify
distance from top left corner.
[Top left corner is 0% 0%]

Page | 42
 • background – order:
• color
• image
• repeat
• attachment
• attachment

CSS3 also support use of multiple images

By repeating background shorthand.

• Image Rollover and Sprite – when a style changes to another style

using a link or button when user hovers the mouse on it, is known as
ROLLOVER.
When a single image is used for several different aprts of an interface si
known as a SPRITE.

• Gradient – using background-image property.

• Linear Gradient –

• Radial Gradient –

• Conic Gradient

Page | 43
Chapter–14: LAYOUT

Page | 44
 Chapter–15: JAVASCRIPT BASICs

• Originally developed by Netscape and named LiveScript.

• Netscape and Sun Microsystems collaboration, LiveScript renamed to JavaScript.
• Script - series of instruction that computer must follow to achieve goal.

• Coding JavaScript – 2 methods -

• <script>:
• If function within script, then placed inside <head>
• Else inside <body>.
• Using separate .js file: using src attribute

• Display: 3 methods -
• document.write() –
• deletes all existing HTML within page.
• Inline coputations are allowed.

Before : After:

• innerHTML –
• writes into HTML element.
• Never deletes existing HTML within page.
• Must be written within <script> tag.

Before: After:

Page | 45
 • Inline computations are also allowed.

• window.alert() –
• window keyword is optional.
• In JS, winodw object is global scope object which ,eans that
variables, properties, methods by default belongs to winodw
object.

• console.log() –
• display in browser console using inspect.
• F12 – activate debugging [CHROME: ctrl+Shift+J]
• select “console” and click run again.
Script code: Output:

• Document Object Model (DOM) –

• “W3C DOM is a platform and language independent inetrface that
allows programs and scripts to dynamicallly access and update the
content, structure and style of document.”
• HTML DOM is a standard Object and programming interface for HTML.
• Defines every object and element.
• Uses hierarchical structure.
• Access page elements and apply style to page.

• DOM Tree:
• model of web page.
• Each node is object with methods and properties.

Page | 46
 • Object – thing or entity. Ex: browser window, submit button.
• Properties – characteristics/ attribute of object.
• Events – actions taken by web page visitor.
Ex: onclick, onmouseover, onload etc.
• Methods – task to perform on certain event.
Ex: document.write(), form.submit()
Event Event Handler
click onclick
load onload
unload onunload
mouseover onmouseover
mouseout onmouseout
submit onsubmit

• ACCESS ELEMENTS:
• WORK WITH ELEMENTS:

• Comments:
• Single-line - //…..
• Multi-line - /* …….*/

• Variables: 3 ways to declare –

• Using var –
• Using let –
• Can not be redeclared.
• Must be declared before use.
• Have block scope.
• Using const –

Allowed NOT Allowed

NO Block Scope Block Scope

Redeclaring Redeclaring
Impose Solve
problems problem

Page | 47
• Function: using function keyword.
• Methods: same as function but created inside an object.
• Parameter VS Argument: when the function is declared, the words inside
parenthesis are called Parameters while the values when the function is called and
specific numbers are passed are known as Argument.

Argument Argument as variables

as values

• Getting Single value out of function:

• Getting Multiple value out of function:

• Anonymous Function: Function with No name

• Function Expression: Function where interpreter treats it as an expression.
Value returned by function()
is stored to var ‘area’ and
variable itself act as function.

Page | 48
• Javascript Objects: A Type of variable that contains many values.
• consist pair of Key and value[ like HTML attributes have name, value]

• Creating Object:
• Add properties later -

• Along with properties -

• Accessing Object:
• Object.PropertyName
• Object[“PropertyName”]

• Javascript Strings:
• Creation –
• var name = “Govind”;
• var name = new String(“Goind”); // not recommended
• Methods –

str.length() 16
str.indexOf(“om”) 1
str.indexOf(“om”,10) 2

Page | 49
 str.lastIndexOf(“om”) 12
str.search(“home”)
str.slice(3,11) ‘e sweet h’
str.substring(3,11) ‘ sweet h’
str.replace(“Home”,”My”) ‘My sweet home ’
str.toUpperCase() ‘MY SWEET HOME ’
str.toLowerCase() ‘my sweet home ’
str.charAt(7) e
str.split(‘ ’) [‘Home’, ‘sweet’, ‘home’, ‘’]
str.trim() ‘Home sweet home’

• Javascript Array:
• Creation –
• var name = new Array(1,2,3,4,5)
• var name = new Array(10);
• var name = [1,2,3,4,5]
• Accessing Elements: name[index]
• Methods:
• array.length()
• array.pop() // removes last element
• array.shift() // removes 1st element
• array.push(“black”) // new length is returned
• array.sort()
• array.reverse()
• delete array[1] // deletes element at index 1
• Math Objects:
• Properties: Math.PI, Math.E
• Methods:
• Math.round()
• Math.sqrt(n)
• Math.ceil()
• Math.floor()
• Math.random()
• Abs, log, min, max, pow, sin, cos,tan
• Date Objects:
• new Date()
• new Date(year, maonth, day, hours, minutes, seconds, milliseconds)
• new Date( milliseconds)
• new Date(date string)

Page | 50
 • GET methods: • SET methods:
• getDate() • setDate()
• getDay() • setFullYear()
• getFullYear() • setHours()
• getHours() • setMilliseconds()
• getMilliseconds() • setMinutes()
• getMinutes() • setMonth()
• getMonth() • setSeconds()
• getSeconds() • setTime()
• getTime()
• getTimezoneOffset()
• toDateString()
• toTimeString()
• toString()

• Comparison Operators:
is equal to == ‘hello’ == ‘hello’ returns true
‘hello’ == hello returns true
is not equal to != ‘hello’ != ‘hello’ returns false
strict equal to === ‘3’ === ‘3’ returns true
‘3’ === 3 returns false
strict not equal to !== ‘3’ !== ‘3’ returns false
‘3’ !== 3 returns true

Page | 51
 Chapter–15: EVENTS

• Different Event Types:

• UI Events –
• load
• unload
• error
• resize
• scroll
• Keyboard Events –
• keydown
• keyup
• keypress
• Mouse Events –
• click
• dblclick
• mousedown
• mouseup
• mousemove
• mpouseover
• mouseout
• Focus Events –
• focus/ focusin
• blur/ focusout
• Form Events –
• input
• change
• submit
• reset
• cut
• copy
• paste
• select
• Mutation Events – occurs when DOM structure has been changed by a
script.
• DOMSubtreeModified
• DOMNodeInserted
• DOMNodeRemoved
• DOMNodeInsertedIntoDocument
• DOMNodeRemovedFromDocument

Page | 52
Page | 53
Chapter–16: ERROR Handling & Debugging

Page | 54
Chapter–17: Form Enhancement & Validation

Page | 55
 Chapter–18: JSON

• Java Script Object Notation

• JSON is a format for storing and transporting data in web services.
• Most popularly used for transmitting data from server to client.

• Advantages:
• Lightweight data exchange format
• Language Independent
• Easy to understand.
• Self-describing.
• Disadvantages:
• Syntax is not forgiving i.e., a missed quote, comma can break the file.
• Can contain malicious content due to JavaScript.
• Syntax:
• Unordered set of key/name and its value.
• Enclosed within curly brackets. { }
• Each pair is separated by comma(,) while key and its value, separated
by colon(:)
• Key/ name should be placed in double quotes (not single quotes).

• JSON Array – value enclosed within solid brackets. []

• JSON Data:
• Creation –

Page | 56
• Access –

• Deletion –

• Sending Data – using JSON.stringify()

• Converts JavaScript Object into string, formatted using JSON.

• Receiving Data – using JSON.parse()

• Proccesses a string containing JSON data and converts it into
JavaScript Object.

Page | 57
• Debugging –
• console.log()
• ‘Debugger’ keyword – pause the code execution and call the
debugging function.

• All browsers have their own debugging tools:

• Chrome – developer tools
• Edge – console
• Firefox – Web Console

Page | 58
 Chapter–19: XML

• eXtensible Markup Language

• A markup language used to exchange, share and store structured information.
• Tags follow java naming conventions i.e., must begin with letter and may not
contain spaces, except single colon and other characters are allowed.

• Elements: Anything within start and end tag.

• Uses:
• Transfer data from one place to another over internet.
• XML subsets are designed for particular applications which makes it
easier to share data.
• RSS (Rich Site Summary/ Really Simple Syndication):
• XML subset/ service.
• Used to send breaking news bulletins from one website to
another.
• Advantages:
• XML is text/ Unicode based.
• Takes less space.
• Transmitted efficiently.
• Self-documenting format
• Can be modularized i.e., breaking large system into smaller parts and
parts can be reused.
• Platform independent

HTML XML
Case insensitive case sensitive
Used to create web pages and web Used to store and transport data.
applications.
Tages have predefined meaning. User defined tags.
Based on SGML (Standard Generalized Standalone markup language.
Markup Language) and is subset of it.
Used to display content. Used to structure data.
Can’t deal with data validation alone. Deals with data and its validation.
Provides only one input form at a time Form data can be stored in multiple files.

• Well-formed XML document: XML document that has a Tree structure and follows
all the XML rules.
• XML text files as trees.
• May add more rules by adding DTD or in a schema.

Page | 59
• XML Tree:
• Single root node.
• Generally, Pre-order Traversal are used for getting information out of
tree.

• Before loading XML document. It must be loaded to an XML DOM object through
parser.
• XML Parser:
• checks that all XML rules have been obeyed.
• Converts XML doc to XML DOM object.
• Browsers comes with XML parser.
• Ex: Xerxes (Apache open-source project)
• XML DOM:
• Language independent platform
• Defines standard way for accessing and manipulating XML document.
• Represent XML as tree structure.
• Standard for how to get, change, add and delete XML elements.
• DTD (Document type definitions):
• Markup language to describes the tree structure, elements and
attributes of XML document.
• Two datatypes:
• PCDATA (parsed character data)
• CDATA (character data)
Page | 60
 • Advantages –
• helps to verify validity of data.
• Not necessary for XML.
• Can be used for standardization if XML file is large and multiple
users are using same file.

NOTE: DTD is used to check validity of data.

DOM External DTD

“note.dtd”

Internal DTD • !DOCTYPE note defines root element

of document is note.
• !ELEMENT note defines the elements
contained by note element i.e., to,
from, heading, body.
• #PCDATA defines parsed data type.
• In XML file, select “view source” to
view the DTD.
• <!DOCTYPE> definition is must.

Page | 61
 PCDATA CDATA
Represent character data parsed by Represent character data that it is
XML parser. treated as raw data.
Characters like ‘<’ and ‘&’. Begins with ‘ <![CDATA[ ’ and ends
Escaped using entity reference. with ‘]]> ’
<example> <example>
This is a &lt; test &gt; <![CDATA[This is a <test>]]>
</example> </example>

• XML Schema:
• XML documents are XML schema.
• Provide more information about document than DTD.
• Data type: string, decimal, integer, Boolean, date, and time.
• Divide elements into simple and complex data types.
• Also determines tree structure.
• Advantages of XML Schema over DTD:
• XML schemas are written in XML, unlike DTD.
• XML schemas support different data type.
• XML schemas format is readable.
• XML schemas can verify data using JavaScript.

Page | 62
Page | 63
 Chapter–20: SERVLET

• Web Servers –
• Apache Web Server
• Apache Tomcat Web Server
• IIS Web Sever
• Nginx Web Server
• LightSpeed Web Server
• CGI (Common Gateway Interface) – An interface specification that enables web
servers to execute an external program.
OR
Middleware b/w www servers and external databases and information sources.

• Web servers run the CGI program in separate OS shell which includes
OS envirounment and the process to execute code of CGI program.
• Drawbacks –
• High response time
• Not scalable
• Not always secure or object oriented.
• Platform dependent.

• Servlet – Server-side programs that run on a web or application server and act as
middle layer between a requests coming from web browser and databases or
application on server.
• Servlets don’t fork new process for each request.
• New thread is created for each request.
• Single servlet can handle many requests.

Page | 64
 Servlet CGI
Thread based. Process based.
i.e., new request -> new thread i.e., new request ->new process
Codes written in JAVA. Any programming lang.
Object oriented. Not Object Oriented.
portable Not portable
Links directly to server. No direct link.
Can read and set HTTP servers. Neither read nor set HTTP servers
Slower speed Faster speed.
Platform independent Platform dependent

• Servlet Life cycle –

• Servlet Working Architecture –

Page | 65
 • Advantages –
• Less response time from web browser.
• Each request runs on individual thread.
• Scalable.
• Robust and Object-Oriented.
• Platform independent.

init() service() destroy()

Called only once Main method to perform Called only once at the end of
the actual task. cycle.
Called when servlet is first Each time server receives a After destroy(), servlet object
created. request for servlet, server marked for garbage collection.
Not called again for each spawns a new thread and
user request. calls service
Creates/ loads data that will be
Handle requests coming • Close all database
used in life of servlet. from client(browsers) and connections.
write formatted response. • Halt background threads.
• Write cookies lists.
Checks HTTP request type • Hit counts to disk.
(GET, POST, PUT, DELETE.)

Subsequently calls doGet,

doPut, doDelete.
public void init() public void service public void destroy()
throw ServletException (ServletRequest request, {
{ ServletResponse response) // finalization code
// initialization code throws ServletException, }
} IOException
{
// task
}

doGet() doPost()
Processes client request using HTTP GET Handles request send by client browsers.
METHOD
Form data is appended to URL User data is send using HTTP request body
name/ value pair and not using URL.
URL limited to 2048 characters includingNo restriction on URL length.
data.
Not used for transfer of sensitive data Sensitive data like Login credentials are
sent using doPost()
Form with user data can be bookmarked

Page | 66
 We can retrieve client information of
HttpServletRequest and
HttpServletResponse object using doGet().
public void doGet public void doPost
(HttpServletRequest request, (HttpServletRequest request,
HttpServletResponse response) HttpServletResponse response)
throws ServletException, throws ServletException,
IOException IOException
{ {
// Servlet Code // Servlet Code
} }

• Ways to create Servlet –

• Implementing Servlet interface.
• Extending GenericServlet class.
• Extending HttpServlet class.

• Servlet API –
• Consist of 2 imp packages that encapsulates classes and interfaces:
• javax.servlet
• javax.servlet.http – contains list of classes and interfaces
Interface Name Description
Servlet Declares life cycle method for servlet
ServletConfig Initialize parameters
ServletContext Log events and access information
ServletRequest Read data from client request
ServletResponse Write data from client response

Class Name Description

GenericServlet Implements Servlet and
ServletConfig
ServletInputStream Provide input stream for reading
client requests
ServletOutputStream Provide input stream for writing
responses to client
ServletException Indicates servlet error occurred.
UnavailableException Indicates servlet is unavailable.

Page | 67
• Servlet API Flow –

HttpservletRequest HttpservletResponse
Extends ServletRequest Inetrface Extends ServletResponse Inetrface
provide request info for HTTP servlet. Set response codes in numeric value.
• 200 depicts successful response.
• 404 depicts file not found.
Breaks down a request into parsed Set headers for response mentioning the
elements such as request URL, query name and value of headers.
arguments and headers. Set redirects is used to issue redirect
to client-end browser.
get methods allow to access various ServletOutputStream() is obtained by
parts of request. calling getOutputStream().
Contains all information of client. Data written to ServletOutputStream goes
back to browser.
Page | 68
• Reading Form data using Servlet –
• getParameter() – single parameter
• getParameterValues() – multiple parameters and returns multiple
values (checkbox)
• getParameterNames() – fetch complete list of all parameters in current
request.

• Sending data to client using Servlet – create PrintWriter Object

HttpServletResponse that send character text to client.

Page | 69
 Chapter–21: SESSION & COOKIES

• Session Tracking –
• Session refers to particular interval of time.
• Session tracking is a way to maintain state or data of user.
• Http protocols are stateless, and each request is considered as new
request. So, we need to maintain state using session tracking
techniques.

• Used to recognize a particular user.

• Techniques –
• Cookies
• Hidden form field
• URL re-writing
• HttpSession

• Cookies –
• Text files
• Stored in client computer for information tracking.
• Created using Cookie class present in Servlet API.
• addCookie(Cookie ck) – HttpServletResponse interface method
• getCookies() - HttpServletRequest interface method.

• Disadvantages:
• Will not work if cookie is disabled from browser.
• Only textual information can be sent in cookie Object.

Page | 70
Page | 71