Awp
Uploaded by
Archi JariwalaAwp
Uploaded by
Archi JariwalaTECHNIGAL PUBLIGATIONS® - An up thst for knowacige Advanced Web Programming 1-3 Refreshing Java Script and CSS * For the document cascading style sheet the style specification appear as the content ofa style element within the header of a document. Property Value Selector The type attribute tells the browser that what it is reading is text which is affected by the Cascading Style Sheet. The type specification is necessary because there is one more specification used in JavaScript. * The External style sheet makes use of style specification in the same manner as in document cascading style sheet. The most commonly used CSS properties are enlisted in the following table — Property Type Property Fonts font font-family font-size font-style font-weight @font-face Text letter-spacing line-height text-align textdecoration textindent Color and background background background-color background-image background-position background-repeat color TECHNIGAL PUBLIGATIONS® - An up thst for knowaciga Advanced Web Programming 1-4 Refreshing Java Script and CSS Borders border border-width border-style border-top border-top-color border-top-width Spacing, padding padding-bottom, padding-left, padding- right, padding-top margin margin-bottom, margin-left, margin- right, margin-top height maxheight max-width min-height min-width width Layout bottom, left, right, top clear display float overflow position visibility z-index TECHNIGAL PUBLIGATIONS® - An up thst for knownciga Advanced Web Programming 1-5 Refreshing Java Script and CSS Lists liststyle liststyle-image liststyle-type EE) Location of Styles There are three levels of cascading style sheets - Inline style sheet ‘* Document level style sheet ‘© External level style sheet EEE] inline Style Sheet © The inline cascading style sheet is a kind of style sheet in which the styles can be applied to HTML tags. This tag can be applied using following rule - Tag { property: value } © Forexample : ‘
Here for the tag p two properties are used such as font-family and color and those are
associated with the values such as Arial and red respectively.
‘* Note that if we want to use more than one property then we have to use separator
such as semicolon. In the following HTML document we have used cascading style
sheet-
HTML Document [InlineStyle.htmi]
This is simple text This text is colored.
Refreshing Java Script and CSS
‘The embedded style sheet is the most commonly used style sheet.
This paragraph is written in Verdana font with font size of 14.
‘The External style sheet is the compact representation of Cascading Style Sheets.
‘This paragraph is written in Monotype Corsiva font with font size of 14.
The links with a target attribute gets a RED background: This line is in bold face with the color ofthe text - blue Good Bye
‘The Vicorial waterfall is one of the greatest waterfalls in the world.
It lies on the Zimbezi river which is between the border of Zambia and Zimbabwe.
‘The Victoria fall can be seen from 25 to 40 miles away.
‘The roaring of the water can be heard from a long distance.
‘The native people call it as “mosi-oa-tunya”, that means “smoke that thunders”.
Victoria falls was discovered by David Livingstone in 1855.
‘The falls were named in honor of Queen Victoria.
‘Twinkle, twinkle, litle star, How I wonder what you are.Up above the world so high, Like a diamond
in the sky.Twinkle, twinkle, little star, How I wonder what you are!
TECHNICAL PUBLIGATIONS® - An up thrust for knowaciga Advanced Web Programming 1-22 Refreshing Java Script and CSS
When the blazing sun is gone, When there's nothing he shines upon,Then you show your little light,
‘Twinkle, twinkle, through the night.
‘Twinkle, twinkle, little star, How I wonder what you arel
In the dark blue sky so deep Through my curtains often peep For you never close your eyes
Til the morning sun does rise
‘Twinkle, twinkle, little star How I wonder what you are Twinkle, twinkle, little star How I wonder
‘what you are
Programming the Web Programming the Web Programming the Web I Love my Countrylll This text is having linethrough This text is having overline This text is a normal text
Output
1B ord Lk Dee Windows hier pee
QO [eo or sete
he Fovomes |e @) Sugoestes sues +g) Ge Mote |
B Vnordaed it Dane sey
cles] x]|P tveeveon P =|
Significance of Vegetables
+ Cant
© Teimproves appearance of skin har and nal
« Ieimproves eyesight
© Iteegults Blood sugar
+ Cuamniber
* Tels wef in ver ceases
+ Ircomrole diabetes
* Spinach
© Teserves at an anti-cancer agent,
+ is ani-aging vegetable.
4 Its arch source of Viana A and C.
TECHNIGAL PUBLIGATIONS® - An up thst for knoweciga Advanced Web Programming 1-36 Refreshing Java Script and CSS
We can also display small images as the list item bullet. For example
HTML Documenttist3.html]
‘
This page is created using Document Level Style Sheet
This line is aligned left and red colored.
This page is created using External Style
Shest
‘This line is aligned left and red colored.
<2>
India is My Country
Refreshing Java Script and CSS
‘ All the Indians are my brothers and sisters
I love my country
Output
Bose
fe) DexHM fomplenicieseitem ~[42]][P Tagen coe P ~]
GO
‘Be Fveries | op ie) Suggesed stes~ (2) Get Mere Ate one ©
| Clee Slector Form Pe DT Be Pager seteye
India is My Country
{All the Indians-are my brothers and sisters
I love my country
ME Computer| Prtected Mode OFF
TECHNIGAL PUBLIGATIONS® - An up thst for knownciga ‘Advanced Web Programming 5-13
Following Nodejs script shows how to write data to the string,
writeStreamExamplejs
var fs = require(‘fs");
var str =" This line is written to myfile’;
var ws = fs.createWriteStream(sample.txt);
‘ws. write(str, tf};
‘ws.end();
‘console.log("The data is written to the file.
‘Node JS in Details
{BH Command Prompt - a
D:\NodeJSExamples>node writeStreamExample. js
|The data is written to the file...
D:\NodeJSExamples>type sample.txt
This line is written to myfile
D: \NodeISExanples>,
The above code is simply modified to handle the error event as follows -
var fs = require(‘ts");
var str =" This line is written to myfile
var ws = fs.createWriteStream(‘sample.txt’);
ws.write(str,'utf8');
ws.end();
console.log("The data is written to the file...");
‘ws.on(error’function(err) {
‘console.log(err.stack);
Mi
Read Operation
For reading from the stream we use createReadStream. Then using the data event the
data can be read in chunks.
TECHNICAL PUBLICATIONS - An up trust for knowiadge Advanced Web Programming
Refreshing Java Script and CSS
POR 8
EE] Generic Selectors
‘© We define the class in generalised form.
‘* Inthe sense, that particular class can be applied to any tag.
‘© Here is the HTML document which makes use of such generic selector.
HTML Document [ClassSel1.html]
‘
-From My Collection.
Output
(B Uriel Selector - Windows eet Explorer
SMG 6 overne mmecctmcnt ls xP ences ]
‘Ue Fovortes | ofp (@) Suggested Stes ~ €) Get More Ad-ons =
Brive elector Braco
Famous Proverbs
A friend in need isa friend indeed
Cleaniness is next to Godliness
Allis fain love and war
‘An apple a day keeps the doctor away
(God helps them who help themselves
From My Collection
I Computer| Protected Mode Off
‘As we have defined the universal selector that sets the green color. Hence the text that
is appearing on the above web page is in green color.
EEE Attribute Selector
* CSS allows authors to specify rules that match elements which have certain
attributes defined in the source document.
+ The syntax is
[att] -Match when the element sets the “att” attribute, whatever the value of the attribute.
{att=val] - Match when the element's “att” attribute value is exactly "val".
TECHNIGAL PUBLIGATIONS® - An up thst for knowiaciga Advanced Web Programming 1-18 Refreshing Java Script and CSS
* Example : In the following example all the elements get selected with a target
attribute.
‘
TECHNIGAL PUBLIGATIONS® - An up thst for knowiaciga “Advanced Web Programming 1-34 Refreshing Java Scrit and CSS
Output
@ Unordered List Demo - Windows Internet Explorer
Goo e ovema bampesusaren ~]4] xP a
@ Unordered List Demo
Sie Favorites | ly @) Suggested Sites ~ je) Get More Add-ons ~
fh > Bd Pages safetye
= Carrot
= Cucumber
= Spinach
Following are the useful vegetables...
IM Computer| Protected Mode: Off
There is another way of representing the unordered list. It is illustrated by following
HTML document.
HTML Documentflist2.html]
‘
TECHNIGAL PUBLIGATIONS® - An up thst for knowecige Advanced Web Programming 1-39 Refreshing Java Script and CSS
Boas bore Wee ape Epo
Oa oven toreetne —
Se Fovontes | 3B) 0
Bedeedindene
Vitamins in Fruits and Vegetables
1. Frit
1 Compa otiee Mode OF
Ei Responsive Design
Definition : “Responsive design” refers to the idea that your website should
display equally well in everything from widescreen monitors to mobile phones.
Itis called responsive web design because you can resize, hide, shrink, enlarge, or
move the contents of the web page to make it look good on any screen.
The responsive web design makes use of HTML and CSS only. It is neither a
program nor a JavaScript.
Using the responsive design approach the web developer can give the best
experience for all the user. For example -
TECHNIGAL PUBLIGATIONS® - An up thst for knowaciga Advanced Web Programming 1-40 Refreshing Java Script and CSS
Desktop Mobile ohone
Tablet
Fig. 4.9.4 Responsive Layout for Different Devices
‘© There are four key components that make responsive design work -
© Liquid Layouts
© Scaling Images to the viewport size.
©. Setting viewports via tag.
© Customizing the CSS for different viewports using media queries.
‘* Making the use of liquid layouts means specifying the widths in percentage. This is
the most obvious part of any responsive web design approach. Scaling images to
the viewport size means you have to specify following rule:
img {
‘Width:100%;
+
* It only shrinks or expands the visual display of the image to fit the size of the
browser window, never expanding beyond its actual dimensions.
EEEI setting Viewports
‘© Viewport means user's visible area of web page.
‘© The viewport varies from mobile phone to desktop computers.
* HTMLS allows the web developer to take control over the viewport using
tag.
TECHNIGAL PUBLIGATIONS® - An up thst for knowaciga Advanced Web Programming 1-41 Refreshing Java Script and CSS
‘* Following line must be included in your HTML document to set the viewport :
aN
‘Sets the intial zoom
Gives browser the 8
instruction to control Sets width of page as per level when the page is
dimension of web page cialoserrede ‘rat loaded by he
Fig. 1.9.2
The HTML document structure will be :
* By setting the viewport in above manner, the page is telling the browser that no
scaling is needed, and to make the viewport as many pixels wide as the device
screen width.
‘© This means that if the device has a screen that is 320 px wide, the viewport width
will be 320 px; if the screen is 480 px then the viewport width will be 480 px.
EEE] Media Queries
‘* Another key component of responsive web design is media queries. Media queries
is for different style rules for different size devices such as mobiles, desktops and so
on.
‘* It uses the @media rule to include a block of CSS properties only if a certain
condition is true.
‘* For example - Following HTML document makes use of media queries for different
types of devices(such as mobile phones, tablets and desktops)
HTML Document
