Web Dev Mod 2

PDF Watermark Remover DEMO : Purchase from www.PDFWatermarkRemover.
com to remove the watermark
Source diginotes.in Save the Earth. Go paperless

PDF Watermark Remover DEMO : Purchase from www.PDFWatermarkRemover.com to remove the watermark
HTML Tables and Forms
Chapter 4

Section 1 of 6
INTRODUCING TABLES

HTML Tables
A grid of cells
➢A table in HTML is created using the <table> element

Tables can be used to display:
•Many types of content
•Calendars, financial data, lists, etc…
•Any type of data

•Images
•Text
•Links
•Other tables

HTML Tables
Example usages

Tables Basics
Rows and cells
• an HTML <table> contains any number of rows (<tr>)

• each row contains any number of table data cells (<td>)
• Content goes inside of <td></td> tags
<table>
<tr>
<td>The Death of Marat</td>
</tr>
</table>
content

A basic Example

With Table Headings
th

Why Table Headings
A table heading <th>
• Browsers tend to make the content within a <th> element
bold
• <th> element for accessibility (it helps those using screen
readers)
• Provides some semantic info about the row being a row of
headers

Spanning Rows and Columns
Span Span Span a Row
Each row must have the

same number of <td> or
<th> containers. If you
want a given cell to cover
several columns or rows,
use the colspan or

rowspan attributes

Using Tables for Layout
• Popular in 1990s
It works in many situations
• Results in table bloat
• Not semantic
• Larger HTML pages
• Browser quirks

Example Table layouts

Additional table tags
• <caption>
• <col>,<colgroup>
• <thead>
• <tfoot>
• <tbody>

Section 2 of 6
STYLING TABLES

Styling Tables
The old way’s deprecated
In HTML5 it is left to CSS, However legacy support for deprecated

HTML attributes still exist
▪ width, height—for setting the width and height of cells
▪ cellspacing—for adding space between every cell in the table
▪ cellpadding—for adding space between the content of the cell
and its border
▪ bgcolor—for changing the background color of any table
element
▪ background—for adding a background image to any table
element
▪ align—for indicating the alignment of a table in relation to the
surrounding container

Styling Tables
Borders

Styling Tables
Padding and spacing

Styling Tables
Examples

Nth-Child
Nifty Table styling tricks: hover effect and
zebra-stripes

Section 3 of 6
INTRODUCING FORMS

HTML Forms
Richer way to interact with server
Forms provide the user with an alternative way to

interact with a web server.
• Forms provide rich mechanisms like:
• Text input
• Password input
• Options Lists
• Radio and check boxes

Form Structure

How forms interact with servers

Query Strings
At the end of the day, another string

URL encoding
Special symbols

<form> element
Two essential features of any form, namely the action and the
method attributes.
• The action attribute specifies the URL of the server-side
resource that will process the form data
• The method attribute specifies how the query string data
will be transmitted from the browser to the server.
• GET
• POST

GET vs POST

GET vs POST
Advantages and Disadvantages
▪ Data can be clearly seen in the address bar.
▪ Data remains in browser history and cache.
▪ Data can be bookmarked
▪ Limit on the number of characters in the form
data returned.
POST
▪ Data can contain binary data.
▪ Data is hidden from user.
▪ Submitted data is not stored in cache, history,
or bookmarks.

Section 4 of 6
FORMS CONTROL ELEMENTS

Form-Related HTML Elements
Type Description
<button> Defines a clickable button.
<datalist> An HTML5 element form defines lists to be used with other form elements.
<fieldset> Groups related elements in a form together.
<form> Defines the form container.
<input> Defines an input field. HTML5 defines over 20 different types of input.
<label> Defines a label for a form input element.
<legend> Defines the label for a fieldset group.
<option> Defines an option in a multi-item list.
<optgroup> Defines a group of related options in a multi-item list.
<select> Defines a multi-item list.
<textarea> Defines a multiline text entry box.


Text Input Controls
Type Description
text Creates a single line text entry box. <input type="text" name="title" />
textarea Creates a multiline text entry box. <textarea rows="3" ... />
password Creates a single line text entry box for a password <input type="password" ... />
search Creates a single-line text entry box suitable for a search string. This is an HTML5 element.
<input type="search" … />

email Creates a single-line text entry box suitable for entering an email address. This is an HTML5 element.
<input type="email" … />
tel Creates a single-line text entry box suitable for entering a telephone. This is an HTML5 element.
<input type="tel" … />
url Creates a single-line text entry box suitable for entering a URL. This is an HTML5 element.
<input type="url" … />
Source diginotes.in
PDF Watermark Remover DEMO : Purchase from www.PDFWatermarkRemover.com to remove the watermark Save the Earth. Go paperless
Text Input Controls
Classic

Text Input Controls
HTML5

HTML5 advanced controls
Pattern attribute
datalist

Select Lists
Chose an option, any option.
• <select> element is used to create a multiline box for

selecting one or more items
• The options are defined using the <option> element
• can be hidden in a dropdown or multiple rows of the list can
be visible
• Option items can be grouped together via the <optgroup>
element.

Select Lists
Select List Examples

Which Value to send
Select Lists Cont.
❑The value attribute of the <option> element is used to specify

what value will be sent back to the server.
❑The value attribute is optional; if it is not specified, then the
text within the container is sent instead

Radio Buttons
Radio buttons are useful when you want the user to select a
single item from a small list of choices and you want all the
choices to be visible
• radio buttons are added via the <input type="radio"> element
• The buttons are mutually exclusive (i.e., only one can be chosen)
by sharing the same name attribute
• The checked attribute is used to indicate the default choice

• the value attribute works in the same manner as with the <option>
element

Radio Buttons

Checkboxes
Checkboxes are used for getting yes/no or on/off responses
from the user.
• checkboxes are added via the <input type="checkbox”> Element
• You can also group checkboxes together by having them share the
same name attribute
• Each checked checkbox will have its value sent to the server
• Like with radio buttons, the checked attribute can be used to set
the default value of a checkbox

Checkboxes

Button Controls
Type Description
<input type="submit"> Creates a button that submits the form data to the server.
<input type="reset"> Creates a button that clears any of the user’s already
entered form data.
<input type="button"> Creates a custom button. This button may require
Javascript for it to actually perform any action.
<input type="image"> Creates a custom submit button that uses an image for its
display.
<button> Creates a custom button. The <button> element differs

from <input type="button"> in that you can completely
customize what appears in the button; using it, you can,
for instance, include both images and text, or skip
server-side processing entirely by using hyperlinks.
You can turn the button into a submit button by using the
type="submit" attribute.

Button Controls

Specialized Controls
I’m so special
• <input type=hidden>
• <input type=file>

Number and Range
❖Typically input values need be validated. Although server side

validation is required, optional client side pre-validation is
good practice.
❖The number and range controls Added in HTML5 provide a
way to input numeric values that eliminates the need for
JavaScript numeric validation!!!

Number and Range

Color

Date and Time Controls
❖Dates and times often need validation when gathering
this information from a regular text input control.
❖From a user’s perspective, entering dates can be tricky
as well: you probably have wondered at some point in
time when entering a date into a web form, what
format to enter it in, whether the day comes before the
month, whether the month should be entered as an
abbreviation or a number, and so on.

HTML5 Date and Time Controls

HTML5 Date and Time Controls

HTML Controls
Type Description
date Creates a general date input control. The format for the date is "yyyy-mm-dd".
time Creates a time input control. The format for the time is "HH:MM:SS", for
hours:minutes:seconds.
datetime Creates a control in which the user can enter a date and time.
datetime-local Creates a control in which the user can enter a date and time without specifying a time zone.
month Creates a control in which the user can enter a month in a year. The format is "yyyy-mm".
week Creates a control in which the user can specify a week in a year. The format is "yyyy-W##".
Source diginotes.in
PDF Watermark Remover DEMO : Purchase from www.PDFWatermarkRemover.com to remove the watermark Save the Earth. Go paperless
Other Controls
You mean there’s more
• The <progress> and <meter> elements can be used to

provide feedback to users,
• but requires JavaScript to function dynamically.
• The <output> element can be used to hold the output

from a calculation.
• The <keygen> element can be used to hold a private key
for public-key encryption

Section 5 of 6
TABLE AND FORM ACCESSIBILITY

Web Accessibility
❖Not all web users are able to view the content on web pages in
the same manner.
❖The term web accessibility refers to the assistive technologies,
various features of HTML that work with those technologies, and
different coding and design practices that can make a site more
usable for people with visual, mobility, auditory, and cognitive
disabilities.
❖In order to improve the accessibility of websites, the W3C
created the Web Accessibility Initiative (WAI)
• Web Content Accessibility Guidelines

Web Content Accessibility Guidelines
• Provide text alternatives for any nontext content so that it can

be changed into other forms people need, such as large print,
braille, speech, symbols, or simpler language.
• Create content that can be presented in different ways (for
example simpler layout) without losing information or
structure.
• Make all functionality available from a keyboard.
• Provide ways to help users navigate, find content, and
determine where they are.

Accessible Tables
1. Describe the table’s content using the <caption> element

2. Connect the cells with a textual description in the header

Section 6 of 6
MICROFORMATS

Microformats
❖The web has millions of pages in it. Yet despite the incredible variety, there is
a surprising amount of similar information from site to site.
❖Most sites have some type of Contact us pages.

❖Similarly, many sites contain calendar of upcoming events or information
about products or news.
❖The idea behind microformats is that if this type of common information
were tagged in similar ways, then automated tools would be able to gather
and transform it.
❖A microformat is a small pattern of HTML markup and attributes to

represent common blocks of information such as people, events, and news
stories so that the information in them can be extracted and indexed by
software agents.
❖One of the most common microformat is hcard, which is used to

semantically mark up contact information of a person.
Source
PDF Watermark Remover DEMO : Purchase from diginotes.in
www.PDFWatermarkRemover.com Save
to remove the the Earth. Go paperless
watermark
Microformat

Advanced CSS: Layout
Chapter 5

5.1 Normal Flow
Normal flow, which refers here to how the browser will normally
display block level elements and inline elements
❖ Block Level elements such as p, div, table, ul and table are
each contained on their own line.
❖ They begin with a line break.
❖ 2 block level elements cant exist on the same line as in fig


Inline Elements
• Inline elements do not form their own blocks but
instead are displayed within lines.
• Normal text in an html document is inline, as are
elements such as em, a, tag, and span.
• Inline elements line up next to one another horizontally
from left to right on the same line.
• When there is no space left on the line the content
moves to new line as in figure


Inline Elements
• Inline elements are actually two types.
– Replaced Inline elements.
• Content and appearance is defined by some
external resource,
Ex – tag and some form elements
– Nonreplaced Inline elements.
• Content defined within the document, which
includes all other inline elements.
• In a Document with normal flow, block level elements

and inline elements work together as in figure.
– Block level will flow from top to bottom
– Inline level will flow from left to right


• It is possible to change
• These two rules will make all span elements behave like
block level elements and all li elements like inline
Span {display : block;}
l1 {display : inline;}

5.2 Positioning Elements
• The position property is used to specify the type of
positioning and the possible values are

5.2.1 Relative positioning
• Element is displaced out of its normal flow position and

moved relative to where it would have been placed.
• When an element is positioned relatively, it is displaced
out of its normal flow position and moved relative to
where it would have been placed.
• The other content around the relatively positioned
element “remembers” the element old position in the
flow, thus the space the element would have occupied as
in fig


5.2.2 Absolute positioning
• When an element is positioned absolutely, it is removed

completely from normal flow.
• Thus, unlike with relative positioning, space is not left for
the moved element, as it no longer in the normal flow.
• Its position is moved in relation to its container block.


• A moved element via absolute position is actually relative
to its nearest positioned ancestor container( i.e, a block
level element whose position is fixed, relative or
absolute).
• In the below fig, the <figcaption> is absolutely positioned,

it is moved 150px down and 200 px to the left of its
nearest positional ancestor, which happens to be its
parent (<figure> element)


5.2.3 Z - Index
• Looking at above fig, you may wonder what would have
happened if the <figcaption> had been moved so that it
overlapped the <figure>.
• Each positioned element has a stacking order defined by
the z – index property.
• Items closest to the viewer have a larger z-index.
• Working with z- index can be tricky.
• First, only positioned elements will make use of their
z-index.
• Second, as in below fig, simply setting the z-index value of
elements will not necessarily move them on top or
behind other items.



5.2.4 Fixed
• The fixed position value is used relatively infrequently.
• It’s a type of absolute positioning, except that the
positioning values are in relation to the viewport.
• Elements with fixed positioning do not move when the
user scrolls up or down the page.


5.3 Floating elements
• It is possible to displace an element out of its position in
the normal flow via the css float property.
• It means to far left or far right of its containing block and
rest of the content is “re-flowed” around the floated
element, as in below fig


5.3.1 Floating with a container
• Float will help to move left or right of its container also
called as container block
• In above fig container is HTML document itself so figures
moves left or right of browser window.
• In below example the floated figure is contained within
an <article> element that is indented from the browser’s
edge.


• There is an important change happening which can be
seen only by zooming the above figure.
• The overlapping margins for the adjacent <p> elements
behave normally and collapse.
• But notice that the top margin for the floated <figure>
and the bottom margin for the <p> element above it do
not collapse.


5.3.2 Floating Multiple items side by side



5.3.3 Containing Floats
• Another problem that can occur with floats is when an
element is floated within a containing block that contains
only floated content.
• In that case, the containing block essentially disappears(fig).
• In the below figure, the <figure> containing block contains
only an <img> and a figcaption element and both of these
elements are floated to the left.
• That means both elements have been removed from the
normal flow, from the browser’s perspective, since the
<figure> contains no normal flow content, it essentially has
nothing in it, hence it has a content height of zero.
• Best solution for this problem is to use overflow property.




5.3.4 Overlaying and Hiding elements
• One of the most common design tasks with CSS is to place

two elements on top of each other or to selectively hide and
display elements. Positioning is important for both tasks.


• There are two different ways to hide
elements in css:
– Display property
• It takes an item out of the flow – element no longer exists
– Visibility property
• Hides the element, but the space for that element remains


• It is also possible to make use of these
properties by using
– Hover and pseudo class.


5.4 Constructing Multicolumn Layouts
The previous sections showed two different
ways to move items out of the normal
top-down flow, namely, by using positioning
and by using floats.
They are the raw techniques that you can use

to create more complex layouts

5.4.1Using Floats to Create Columns
• The first step is to float the content container that will be on
the left-hand side.


Main problem :
• This is the main problem with the floated approach:
that we can’t necessarily put the source in an
SEO-optimized order (which would be to put the
main page content before the navigation and the
aside).
• There are in fact ways to put the content in an

SEO-optimized order with floats, but typically this
requires
making use of certain tricks such as giving the main
content negative margins

Using positioning to Create Columns
• Positioning can also be used to create a
multicolumn layout. Typically, the approach
will be to absolute position the elements.



Section 5 of 7
APPROACHES TO CSS
LAYOUT

Approaches to CSS
Layout
One of the main problems faced by web designers is that the
size of the screen used to view the page can vary quite a bit.
• 21-inch wide screen monitor that can display 1920 x 1080
pixels
• older iPhone with a 3.5 screen and a resolution of
320x480 px
Satisfying both users can be difficult; the approach to take for
one type of site content might not work as well with another
site with different content.

Approaches to CSS
Layout
Most designers take one of two basic approaches to
dealing with the problems of screen size.
• Fixed Layout
• Liquid Layout
• Hybrid Layout

Fixed
Layout
It isn't even broken
In a fixed layout, the basic width of the design is set by the

designer, typically corresponding to an “ideal” width based on
a “typical” monitor resolution
The advantage of a fixed layout is that it is easier to produce

and generally has a predictable visual result.
Fixed layouts have drawbacks.
• For larger screens, there may be an excessive amount of

blank space to the left and/or right of the content.
• It is also optimized for typical desktop monitors; however,

as more and more user visits are happening via smaller
mobile devices

Fixed
Layout
Notice the fixed size

Problem with fixed
layouts

Liquidy goodness Liquid Layout
In a liquid layout (also called a fluid layout) widths
are not
specified using pixels, but percentage values.
Advantage:
• adapts to different browser sizes,
Disadvantages:
• Liquid layouts can be more difficult to create

because some elements, such as images, have
fixed pixel sizes
• the line length (which is an important contributing

factor to readability) may become too long or too
short
Source
PDF Watermark Remover DEMO : Purchase from diginotes.in
www.PDFWatermarkRemover.com Save
to remove the the Earth. Go paperless
watermark
Liquidy goodness Liquid Layout

Hybrid
Layout
Such a smug feeling
A hybrid layout combines pixel and percentage measurements.

• Fixed pixel measurements might make sense for a sidebar
column containing mainly graphic advertising images that
must always be displayed and which always are the same
width.
• percentages would make more sense for the main content or
navigation areas, with perhaps min and max size limits in
pixels set for the navigation areastime

5.6 Responsive design
•In the past several years, a lot of attention has been given to
so called Responsive layout designs.
•In a responsive design, the page “responds” to changes in
the browser size that go beyond the width scaling of a liquid
layout.
•We had problems with liquid layout for images.
•In a responsive design layout, images will be scaled down
and navigation elements will be replaced as the browser
shrinks.



•There are 4 important key components to make responsive
design work
1. Liquid layouts.
2. Scaling images to viewport size.
3. Setting viewports via the <meta> tag
4. Customizing the css for different viewports using media
queries.
❖ Responsive designs begin with liquid layout, ie., in

which most elements have their widths specified as
percentages.
❖ Making images scale in size is quite straight forward
img {
max-width=100%;
}

5.6.1 Setting Viewport
•If you have ever used a modern mobile browser, you may
have been surprised to see how the web page was scaled to
fit into the small screen of the browser.
•The way this works is the mobile browser renders the page
on a canvas called the viewport.
•On iphones, - the viewport width is 980 px, and then that
viewport is scaled to fit the current width of the any device


•The mobile safari browser introduced the viewport meta tag as a
way for developers to control the size of that initial viewport.
•The web page will tell the mobile browser the viewport size to
use via the viewport <meta> element, as below
<html>
<head>
<meta name=“viewport” content=“width-device-width”/>
(Setting the viewport)
•By above, the page is telling the browser there is no need of any
scaling and it makes the viewport as many pixels wide as device
screen width.
Ex- if device has a screen that is 320 px wide, then the
viewport width will be 320 px,
if its 480px wide, then viewport will be 480


•However, since only setting the viewport as in above figure-
shrank but still cropped the content.
•Setting the viewport is only one step in creating a responsive
design.
•There needs to be a way to transform the look of the site for
the smaller screen of the mobile device, which can be done
by using media queries.

5.6.2 Media Queries
•The other key component of responsive design is CSS media
queries.
•A media query is a way to apply style rules based on the
medium that is displaying the file.
•Syntax of media queries.

•These queries are Boolean expressions and can be added to
your css file or to the link element to conditionally use a
different external CSS file based .
•Below table shows the list of features you can use with
media queries.


5.7 CSS FRAMEWORK
• A CSS framework is a precreated set of CSS
classes or other software tools that make it
easier to use and work with CSS.
• They are two main types of CSS framework:
1. Grid systems
2. CSS preprocessors.

Grid systems
• Grid systems make it easier to create multicolumn

layouts.
• There are many CSS grid systems; some of the
most popular are Bootstrap twitter.github.com
/bootstrap),Blueprint (www.blueprintcss.org),
and 960 (960.gs).
• The most important of these capabilities is a grid
system.

• CSS frameworks provide similar grid features.
The 960 framework uses either a 12- or
16-column grid.
• Bootstrap uses a 12-column grid.
• Blueprint uses a 24-column grid.
• The grid is constructed using <div> elements
with classes defined by the framework.
• The HTML elements for the rest of your site
are then placed within these <div> elements.



We will be using the Bootstrap framework, which is an
open-source system, but was originally created by the designers
at Twitter

Css preprocessor
• CSS preprocessors are tools that allow the
developer to write CSS that takes advantage of
programming ideas such as variables, inheritance,
calculations, and functions.
• A CSS preprocessor is a tool that takes code
written in some type of preprocessed language
and then converts that code into normal CSS
• The advantage of a CSS preprocessor is that it can
provide additional functionalities that are not
available in CSS.

• In a programming language, a developer can
use variables, nesting, functions, or inheritance
to handle duplication and avoid
copy-and-pasting and search-and-replacing.
• CSS preprocessors such as LESS, SASS, and
Stylus provide this type of functionality.


MODULE 2
END


Web Dev Mod 2

Uploaded by

Document Informationclick to expand document information

Copyright:

Available Formats

Web Dev Mod 2

Uploaded by

Document Information

Original Description:

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

Web Dev Mod 2

Uploaded by

Copyright:

Available Formats

PDF Watermark Remover DEMO : Purchase from www.PDFWatermarkRemover.

com to remove the watermark

Source diginotes.in Save the Earth. Go paperless

Source diginotes.in Save the Earth. Go paperless

Source diginotes.in Save the Earth. Go paperless

➢A table in HTML is created using the <table> element

•Any type of data

Source diginotes.in Save the Earth. Go paperless

Source diginotes.in Save the Earth. Go paperless

• an HTML <table> contains any number of rows (<tr>)

Source diginotes.in Save the Earth. Go paperless

Source diginotes.in Save the Earth. Go paperless

Source diginotes.in Save the Earth. Go paperless

Source diginotes.in Save the Earth. Go paperless

Each row must have the

use the colspan or

Source diginotes.in Save the Earth. Go paperless

Source diginotes.in Save the Earth. Go paperless

Source diginotes.in Save the Earth. Go paperless

Source diginotes.in Save the Earth. Go paperless

Source diginotes.in Save the Earth. Go paperless

In HTML5 it is left to CSS, However legacy support for deprecated

Source diginotes.in Save the Earth. Go paperless

Source diginotes.in Save the Earth. Go paperless

Source diginotes.in Save the Earth. Go paperless

Source diginotes.in Save the Earth. Go paperless

Source diginotes.in Save the Earth. Go paperless

Source diginotes.in Save the Earth. Go paperless

Forms provide the user with an alternative way to

Source diginotes.in Save the Earth. Go paperless

Source diginotes.in Save the Earth. Go paperless

Source diginotes.in Save the Earth. Go paperless

Source diginotes.in Save the Earth. Go paperless

Source diginotes.in Save the Earth. Go paperless

Source diginotes.in Save the Earth. Go paperless

Source diginotes.in Save the Earth. Go paperless

Source diginotes.in Save the Earth. Go paperless

FORMS CONTROL ELEMENTS

Source diginotes.in Save the Earth. Go paperless

<button> Defines a clickable button.

<fieldset> Groups related elements in a form together.

<form> Defines the form container.

<label> Defines a label for a form input element.

<legend> Defines the label for a fieldset group.

<option> Defines an option in a multi-item list.

<optgroup> Defines a group of related options in a multi-item list.

<select> Defines a multi-item list.

<textarea> Defines a multiline text entry box.

Source diginotes.in Save the Earth. Go paperless

<input type="search" … />

<input type="email" … />

<input type="tel" … />

<input type="url" … />

Source diginotes.in Save the Earth. Go paperless

Source diginotes.in Save the Earth. Go paperless

Source diginotes.in Save the Earth. Go paperless

• <select> element is used to create a multiline box for