WEB TECHNOLOGY Unit-2.pptx

•Design interactive web pages using CSS and Scripting languages

1. Unit – II CSS & CLIENT SIDE PROGRAMMING Presented By K.Karthick M.E(Ph.D.) Assistant Professor/CSE, Kongunadu College of Engineering And Technology.

2. Client-side Programming It is the program that runs on the client machine (browser) and deals with the user interface/display and any other processing that can happen on client machine like reading/writing cookies. 1) Interact with temporary storage 2) Make interactive web pages 3) Interact with local storage 4) Sending request for data to server 5) Send request to server 6) work as an interface between server and user The Programming languages for client-side programming are : 1) Javascript 2) VBScript 3) HTML 4) CSS 5) AJAX

3. What is CSS ? CSS stands for Cascading Style Sheets CSS describes how HTML elements are to be displayed on screen, paper, or in other media CSS saves a lot of work. It can control the layout of multiple web pages all at once External stylesheets are stored in CSS files

4. Why Use CSS? CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

5. CSS Solved a Big Problem HTML was NEVER intended to contain tags for formatting a web page! HTML was created to describe the content of a web page, like: <h1>This is a heading</h1> <p>This is a paragraph.</p> When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large websites, where fonts and color information were added to every single page, became a long and expensive process. To solve this problem, the World Wide Web Consortium (W3C) created CSS. CSS removed the style formatting from the HTML page!

6. CSS  Syntax The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon. Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.

7. Example In this example all <p> elements will be center-aligned, with a red text color: p {   color: red;   text-align: center; } Example Explained p is a selector in CSS (it points to the HTML element you want to style: <p>). color is a property, and red is the property value text-align is a property, and center is the property value

8. Advantages of CSS CSS saves time  − You can write CSS once and then reuse same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many Web pages as you want. Pages load faster  − If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code means faster download times. Easy maintenance  − To make a global change, simply change the style, and all elements in all the web pages will be updated automatically. Superior styles to HTML  − CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML attributes. Multiple Device Compatibility  − Style sheets allow content to be optimized for more than one type of device. By using the same HTML document, different versions of a website can be presented for handheld devices such as PDAs and cell phones or for printing. Global web standards  − Now HTML attributes are being deprecated and it is being recommended to use CSS. So its a good idea to start using CSS in all the HTML pages to make them compatible to future browsers.

9. CSS  Selectors A CSS selector selects the HTML element(s) you want to style . We can divide CSS selectors into five categories: Simple selectors (select elements based on name, id, class) Combinator selectors  (select elements based on a specific relationship between them) Pseudo-class selectors  (select elements based on a certain state) Pseudo-elements selectors  (select and style a part of an element) Attribute selectors  (select elements based on an attribute or attribute value)

10. The CSS element Selector The element selector selects HTML elements based on the element name . Here, all <p> elements on the page will be center-aligned, with a red text color:  p {   text-align:  center ;    color : red; }

11. !DOCTYPE html> <html> <head> <style> p { text-align: center; color: red; } </style> </head> <body> <p>Every paragraph will be affected by the style.</p> <p id="para1">Me too!</p> <p>And me!</p> </body> </html>

12. The CSS id Selector The id selector uses the id attribute of an HTML element to select a specific element. The id of an element is 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. #para1 {    text-align : center;   color: red; }

13. <!DOCTYPE html> <html> <head> <style> #para1 { text-align: center ; color : red; } </style> </head> <body> <p id="para1">Hello World!</p> <p>This paragraph is not affected by the style.</p> </body> </html>

14. The CSS class Selector The class selector selects HTML elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the class name. . center  {   text-align:  center ;    color : red; }

15. The CSS Universal Selector The universal selector (*) selects all HTML elements on the page . * {   text-align:  center ;    color : blue; }

16. <!DOCTYPE html> <html> <head> <style> * { text-align: center; color: blue; } </style> </head> <body> <h1>Hello world!</h1> <p>Every element on the page will be affected by the style.</p> <p id="para1">Me too!</p> <p>And me!</p> </body> </html>

17. The CSS Grouping Selector The grouping selector selects all the HTML elements with the same style definitions . In this example we have grouped the selectors from the code above:  h1, h2, p {   text-align: center;   color: red; }

18. <!DOCTYPE html> <html> <head> <style> h1, h2, p { text-align: center ; color : red; } </style> </head> <body> <h1>Hello World!</h1> <h2>Smaller heading!</h2> <p>This is a paragraph.</p> </body> </html>

19. How To Add CSS When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet . Three Ways to Insert CSS There are three ways of inserting a style sheet: External CSS Internal CSS Inline CSS

20. External CSS With an external style sheet, you can change the look of an entire website by changing just one file! Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section.

21. <!DOCTYPE html> <html> <head> <link rel ="stylesheet" href ="mystyle.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>

22. "mystyle.css" body {   background-color:  lightblue ; } h1 {   color: navy;   margin-left: 20px; }

23. Internal CSS An internal style sheet may be used if one single HTML page has a unique style. The internal style is defined inside the <style> element, inside the head section.

24. <!DOCTYPE html> <html> <head> <style> body {   background-color: linen; } h1 {   color: maroon;   margin-left: 40px; } </style> </head> <body > <h1>This is a heading</h1> <p>This is a paragraph.</p > </body> </html>

25. Inline CSS 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.

26. <!DOCTYPE html> <html> <body> <h1 style=" color:blue;text-align:center ;">This is a heading</h1> <p style=" color:red ;">This is a paragraph.</p> </body> </html>

27. CSS - Colors CSS uses color values to specify a color. Typically, these are used to set a color either for the foreground of an element (i.e., its text) or else for the background of the element . They can also be used to affect the color of borders and other decorative effects.

28. CSS Colors - Hex Codes A hexadecimal is a 6 digit representation of a color. The first two digits(RR) represent a red value, the next two are a green value(GG), and the last are the blue value(BB ). Color HEX   #000000   #FF0000   #00FF00   #0000FF   #FFFF00   #00FFFF   #FF00FF   #C0C0C0   #FFFFFF

29. CSS Colors - Short Hex Codes This is a shorter form of the six-digit notation. In this format, each digit is replicated to arrive at an equivalent six-digit value. For example: #6A7 becomes #66AA77 . Each hexadecimal code will be preceded by a pound or hash sign '#'. Following are the examples to use Hexadecimal notation.

30. Color Color HEX   #000   #F00   #0F0   #0FF   #FF0   #0FF   #F0F   #FFF

31. CSS Colors - RGB Values This color value is specified using the  rgb ( )  property. This property takes three values, one each for red, green, and blue. The value can be an integer between 0 and 255 or a percentage . To display black, set all color parameters to 0, like this: rgb (0, 0, 0). To display white, set all color parameters to 255, like this: rgb (255, 255, 255).

32. Color Color RGB   rgb(0,0,0)   rgb(255,0,0)   rgb(0,255,0)   rgb(0,0,255)   rgb(255,255,0)   rgb(0,255,255)   rgb(255,0,255)   rgb(192,192,192)   rgb (255,255,255)

33. CSS  Backgrounds The CSS background properties are used to add background effects for elements . The background color of a page is set like this: body {   background-color:  lightblue ; }

34. <!DOCTYPE html> <html> <head> <style> body { background-color: lightblue ; } </style> </head> <body > <h1>Hello World!</h1 > <p>This page has a light blue background color!</p > </body> </html>

35. CSS Background Image The  background-image  property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element. Example Set the background image for a page:  body  {   background-image :   url ("paper.gif") ; }

36. <!DOCTYPE html> <html> <head> <style> body { background-image: url ("paper.gif"); } </style> </head> <body > <h1>Hello World!</h1 > <p>This page has an image as the background!</p > </body> </html>

37. <!DOCTYPE html> <html> <head> <style> body { background-image: url ("img_tree.png"); background-repeat: no-repeat; background-position: right top; margin-right: 200px; background-attachment: fixed; } </style> </head> <body > <h1>The background-attachment Property</h1 > <p>The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page).</p > </body> </html>

38. CSS  Borders The following values are allowed: dotted  - Defines a dotted border dashed  - Defines a dashed border solid  - Defines a solid border double  - Defines a double border groove  - Defines a 3D grooved border. The effect depends on the border-color value ridge  - Defines a 3D ridged border. The effect depends on the border-color value inset  - Defines a 3D inset border. The effect depends on the border-color value outset  - Defines a 3D outset border. The effect depends on the border-color value none  - Defines no border hidden  - Defines a hidden borde

39. <!DOCTYPE html> <html> <head> <style> p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;} </style> </head >

40. <body> <h2>The border-style Property</h2> <p>This property specifies what kind of border to display:</p> <p class="dotted">A dotted border.</p> <p class="dashed">A dashed border.</p> <p class="solid">A solid border.</p> <p class="double">A double border.</p> <p class="groove">A groove border.</p> <p class="ridge">A ridge border.</p> <p class="inset">An inset border.</p> <p class="outset">An outset border.</p> <p class="none">No border.</p> <p class="hidden">A hidden border.</p> <p class="mix">A mixed border.</p > </body> </html>

41. CSS Border Width The border-width property specifies the width of the four borders. The width can be set as a specific size (in px , pt , cm, em , etc ) or by using one of the three pre-defined values: thin, medium, or thick:

42. <!DOCTYPE html> <html> <head> <style> p.one { border-style: solid; border-width: 5px; } p.two { border-style: solid; border-width: medium; } p.three { border-style: dotted; border-width: 2px; }

43. p.four { border-style: dotted; border-width: thick; } p.five { border-style: double; border-width: 15px; } p.six { border-style: double; border-width: thick; } </style> </head>

44. <body > <h2>The border-width Property</h2> <p>This property specifies the width of the four borders:</p > <p class="one">Some text.</p> <p class="two">Some text.</p> <p class="three">Some text.</p> <p class="four">Some text.</p> <p class="five">Some text.</p> <p class="six">Some text.</p > <p><b>Note:</b> The "border-width" property does not work if it is used alone. Always specify the "border-style" property to set the borders first.</p > </body> </html>

45. CSS Border Color The border-color property is used to set the color of the four borders . The color can be set by : name - specify a color name, like "red" HEX - specify a HEX value, like "#ff0000" RGB - specify a RGB value, like " rgb (255,0,0)" HSL - specify a HSL value, like " hsl (0, 100%, 50%)" transparent

46. <!DOCTYPE html> <html> <head> <style> p.one { border-style: solid; border- color : red; } p.two { border-style: solid; border- color : green; } p.three { border-style: dotted; border- color : blue; } </style>

47. </head> < body> < h2>The border-color Property</h2> <p>This property specifies the color of the four borders:</p > <p class="one">A solid red border</p> <p class="two">A solid green border</p> <p class="three">A dotted blue border</p > <p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p > </body> </html>

48. CSS Margins The CSS margin properties are used to create space around elements, outside of any defined borders. With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).

49. Margin - Individual Sides CSS has properties for specifying the margin for each side of an element : margin-top margin-right margin-bottom margin-left All the margin properties can have the following values : auto - the browser calculates the margin length - specifies a margin in px , pt , cm, etc. % - specifies a margin in % of the width of the containing element inherit - specifies that the margin should be inherited from the parent element

50. <!DOCTYPE html> <html> <head> <style> div { border: 1px solid black; margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; background- color : lightblue ; } </style> </head> <body > <h2>Using individual margin properties</h2 > <div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.</div > </body> </html>

51. CSS Fonts Generic Font Family Examples of Font Names Serif Times New Roman Georgia Garamond Sans-serif Arial Verdana Helvetica Monospace Courier New Lucida Console Monaco Cursive Brush Script MT Lucida Handwriting Fantasy Copperplate Papyrus

52. <!DOCTYPE html> <html> <head> <style> .p1 { font-family: "Times New Roman", Times, serif; } .p2 { font-family: Arial, Helvetica, sans-serif; } .p3 { font-family: "Lucida Console", "Courier New", monospace; } </style> </head> <body > <h1>CSS font-family</h1> <p class="p1">This is a paragraph, shown in the Times New Roman font.</p> <p class="p2">This is a paragraph, shown in the Arial font.</p> <p class="p3">This is a paragraph, shown in the Lucida Console font.</p > </body> </html>

53. CSS  Text Text Color The color property is used to set the color of the text. The color is specified by : a color name - like "red" a HEX value - like "#ff0000" an RGB value - like " rgb (255,0,0)"

54. Text Color and Background Color <!DOCTYPE html> <html> <head> <style> body { background-color: lightgrey ; color: blue; } h1 { background-color: black; color: white; } div { background-color: blue; color: white; }

55. </style> </head> <body> <h1>This is a Heading</h1> <p>This page has a grey background color and a blue text.</p> <div>This is a div.</div> </body> </html>

56. CSS Text Alignment Text Alignment and Text Direction In this chapter you will learn about the following properties : text-align text-align-last direction unicode -bidi vertical-align

57. <!DOCTYPE html> <html> <head> <style> h1 { text-align: center ; } h2 { text-align: left; } h3 { text-align: right; } </style> </head> < body <h1>Heading 1 ( center )</h1> <h2>Heading 2 (left)</h2> <h3>Heading 3 (right)</h3 > <p>The three headings above are aligned center , left and right.</p > </body> </html>

58. Text Direction The direction and unicode -bidi properties can be used to change the text direction of an element:

59. <!DOCTYPE html> <html> <head> <style> p.ex1 { direction: rtl ; unicode -bidi: bidi-override; } </style> </head> <body> <p>This is the default text direction.</p> <p class="ex1">This is right-to-left text direction.</p> </body> </html>

60. Text Decoration In this chapter you will learn about the following properties : text-decoration-line text-decoration-color text-decoration-style text-decoration-thickness text-decoration

61. Add a Decoration Line to Text The text-decoration-line property is used to add a decoration line to text.

62. <!DOCTYPE html> <html> <head> <style> h1 { text-decoration: overline ; } h2 { text-decoration: line-through; } h3 { text-decoration: underline; } p.ex { text-decoration: overline underline; } </style> </head >

63. <body> <h1> Overline text decoration</h1> <h2>Line-through text decoration</h2> <h3>Underline text decoration</h3> <p class="ex"> Overline and underline text decoration.</p> <p><strong>Note:</strong> It is not recommended to underline text that is not a link, as this often confuses the reader.</p> </body> </html>

64. <!DOCTYPE html> <html> <head> <style> h1 { text-decoration-line: overline ; text-decoration- color : red; } h2 { text-decoration-line: line-through; text-decoration- color : blue; } h3 { text-decoration-line: underline; text-decoration- color : green; } p { text-decoration-line: overline underline; text-decoration- color : purple; } </style>

65. </head> <body> <h1> Overline text decoration</h1> <h2>Line-through text decoration</h2> <h3>Underline text decoration</h3> <p> Overline and underline text decoration.</p> </body> </html>

66. Text Transformation The  text-transform  property is used to specify uppercase and lowercase letters in a text. It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word: p.uppercase  {   text-transform: uppercase; } p.lowercase  {   text-transform: lowercase; } p.capitalize  {   text-transform: capitalize; }

67. <!DOCTYPE html> <html> <head> <style> p.uppercase { text-transform: uppercase; } p.lowercase { text-transform: lowercase; } p.capitalize { text-transform: capitalize; } </style> </head>

68. <body> <h1>Using the text-transform property</h1> <p class="uppercase">This text is transformed to uppercase.</p> <p class="lowercase">This text is transformed to lowercase.</p> <p class="capitalize">This text is capitalized.</p> </body> </html>

69. CSS Text Spacing Text Spacing In this chapter you will learn about the following properties: text-indent letter-spacing line-height word-spacing white-space

70. Text Indentation The  text-indent  property is used to specify the indentation of the first line of a text: Example p  {   text-indent :  50px ; }

71. <!DOCTYPE html> <html> <head> <style> p { text-indent: 50px; } </style> </head> <body > <h1>Using text-indent</h1 > <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p > </body> </html>

72. Letter Spacing The  letter-spacing  property is used to specify the space between the characters in a text. The following example demonstrates how to increase or decrease the space between characters:

73. <!DOCTYPE html> <html> <head> <style> h2 { letter-spacing: 5px; } h3 { letter-spacing: -2px; } </style> </head> <body > <h1>Using letter-spacing</h1 > <h2>This is heading 1</h2> <h3>This is heading 2</h3 > </body> </html>

74. Line Height The  line-height  property is used to specify the space between lines: Example p.small   {   line-height :  0.8 ; } p.big   {   line-height :  1.8 ; }

75. <!DOCTYPE html> <html> <head> <style> p.small { line-height: 0.7; } p.big { line-height: 1.8; } </style> </head> <body >

76. <h1>Using line-height</h1> <p> This is a paragraph with a standard line-height.< br > The default line height in most browsers is about 110% to 120%.< br > </p> <p class="small"> This is a paragraph with a smaller line-height.< br > This is a paragraph with a smaller line-height.< br > </p> <p class="big"> This is a paragraph with a bigger line-height.< br > This is a paragraph with a bigger line-height.< br > </p> </body> </html>

77. CSS Text Shadow Text Shadow The  text-shadow  property adds shadow to text. In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow (2px): Text shadow effect!

78. <!DOCTYPE html> <html> <head> <style> h1 { text-shadow: 2px 2px ; } </style> </head> <body > <h1>Text-shadow effect!</h1 > </body> </html>

79. <!DOCTYPE html> <html> <head> <style> h1 { text-shadow: 2px 2px red; } </style> </head> <body > <h1>Text-shadow effect!</h1 > </body> </html>

80. <!DOCTYPE html> <html> <head> <style> h1 { color : white; text-shadow: 2px 2px 4px #000000; } </style> </head> <body > <h1>Text-shadow effect!</h1 > </body> </html>

81. The CSS Box Model In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model :

82. Explanation of the different parts: Content  - The content of the box, where text and images appear Padding  - Clears an area around the content. The padding is transparent Border  - A border that goes around the padding and content Margin  - Clears an area outside the border. The margin is transparent The box model allows us to add a border around elements, and to define space between elements.

83. <!DOCTYPE html> <html> <head> <style> div { background- color : lightgrey ; width: 300px; border: 15px solid green; padding: 50px; margin: 20px; } </style> </head> <body > <h2>Demonstrating the Box Model</h2 > <p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.</p>

84. <div>This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. Ut enim ad minim veniam , quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat . Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur . Excepteur sint occaecat cupidatat non proident , sunt in culpa qui officia deserunt mollit anim id est laborum .</div> </body> </html>

85. CSS  Tables Table Borders To specify table borders in CSS, use the border property . The example below specifies a solid border for <table>, < th >, and <td> elements: table, th , td {   border: 1px solid; }

86. CSS Table Size table {   width: 100%; } th  {   height: 70px; }

87. CSS Table Alignment The text-align property sets the horizontal alignment (like left, right, or center) of the content in < th > or <td>. By default, the content of < th > elements are center-aligned and the content of <td> elements are left-aligned . td {   text-align:  center ; }

88. CSS Table Style Table Padding To control the space between the border and the content in a table, use the padding property on <td> and < th > th , td {   padding: 15px;   text-align: left; }

89. CSS Responsive Table Responsive Table A responsive table will display a horizontal scroll bar if the screen is too small to display the full content : <div style=" overflow-x:auto ;"> <table> ... table content ... </table> </div>

90. <!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; width: 100%; } th , td { text-align: left; padding: 8px; } tr:nth-child (even) {background- color : #f2f2f2;} </style> </head>

91. <body > <h2>Responsive Table</h2> <p>A responsive table will display a horizontal scroll bar if the screen is too small to display the full content. Resize the browser window to see the effect:</p> <p>To create a responsive table, add a container element (like div) with <strong> overflow-x:auto </strong> around the table element:</p > <div style="overflow-x: auto;"> <table> < tr > < th >First Name</ th > < th >Last Name</ th > < th >Points</ th > < th >Points</ th > < th >Points</ th > < th >Points</ th > < th >Points</ th > < th >Points</ th > < th >Points</ th > < th >Points</ th > < th >Points</ th > < th >Points</ th > </ tr >

92. < tr > <td>Jill</td> <td>Smith</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> </ tr >

93. < tr > <td>Eve</td> <td>Jackson</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> </ tr >

94. < tr > <td>Adam</td> <td>Johnson</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> </ tr > </table> </div > </body> </html>

95. CSS  Lists HTML Lists and CSS List Properties In HTML, there are two main types of lists: unordered lists (< ul >) - the list items are marked with bullets ordered lists (< ol >) - the list items are marked with numbers or letters The CSS list properties allow you to: Set different list item markers for ordered lists Set different list item markers for unordered lists Set an image as the list item marker Add background colors to lists and list items

96. <!DOCTYPE html> <html> <head> <style> ul.a { list-style-type: circle; } ul.b { list-style-type: square; } ol.c { list-style-type: upper-roman; } ol.d { list-style-type: lower-alpha; } </style> </head >

97. <body > <h2>The list-style-type Property</h2 > <p>Example of unordered lists:</p> <ul class="a"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul > <ul class="b"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul>

98. <p>Example of ordered lists:</p> <ol class="c"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol > <ol class="d"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol > </body> </html>

99. An Image as The List Item Marker The list-style-image property specifies an image as the list item marker : ul  {   list-style-image:  url ('sqpurple.gif'); }

100. <!DOCTYPE html> <html> <head> <style> ul { list-style-image: url ('sqpurple.gif'); } </style> </head>

101. <body > <h2>The list-style-image Property</h2 > <p>The list-style-image property specifies an image as the list item marker:</p > < ul > <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ ul > </body> </html>

102. CSS 3.0 WHAT IS CSS? Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. What is CSS 3? CSS3  is the latest evolution of the Cascading Style Sheets language and aims at extending CSS2.1. It brings a lot of new features and additions, like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts.

103. CSS  Forms The look of an HTML form can be greatly improved with CSS : Styling Input Fields Use the width property to determine the width of the input field : input {   width: 100%; }

104. Bordered Inputs Use the border property to change the border size and color, and use the border-radius property to add rounded corners : input[type=text ] {   border: 2px solid red;   border-radius: 4px; }

105. Colored Inputs Use the background-color property to add a background color to the input, and the color property to change the text color: input[type=text] {   background-color: #3CBC8D;   color: white; }

106. CSS  Animations CSS Animations CSS allows animation of HTML elements without using JavaScript or Flash!

107. @ keyframes animation-name animation-duration animation-delay animation-iteration-count animation-direction animation-timing-function animation-fill-mode animation

108. <!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background-color: red; animation-name: example; animation-duration: 4s; }

109. @ keyframes example { 0% {background- color : red;} 25% {background- color : yellow;} 50% {background- color : blue;} 100% {background- color : green;} } </style> </head> <body > <h1>CSS Animation</h1 > <div></div > <p><b>Note:</b> When an animation is finished, it goes back to its original style.</p > </body> </html>

110. STYLE RULE CASCADING AND INHERITANCE Rule Cascade: A single style sheet associated with one or more web pages is valuable, but in quite a limited way. For small sites, the single style sheet is sufficient, but for larger sites, especially sites managed by more than one person (perhaps several teams who may never communicate) single style sheets don't provide the ability to share common styles, and extend these styles where necessary. This can be a significant limitation.

111. Font Family The font family of a text is set with the font-family property.The font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available . Example p{ font-family:"Times New Roman", Times, serif;}

112. Font Style The font-style property is mostly used to specify italic text. This property has three values : normal - The text is shown normally italic - The text is shown in italics

113. Font Size The font-size property sets the size of the text.Being able to manage the text size is important in web design. However , you should not use font size adjustments to make paragraphs look like headings, or headings look like paragraphs . Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for paragraphs . The font-size value can be an absolute, or relative size. Absolute size:

114. JavaScript  Tutorial JavaScript is the world's most popular programming language. JavaScript is the programming language of the Web. JavaScript is easy to learn . Why Study JavaScript? JavaScript is one of the  3 languages  all web developers  must  learn:    1.  HTML  to define the content of web pages    2.  CSS  to specify the layout of web pages    3.  JavaScript  to program the behavior of web pages

115. What is JavaScript JavaScript ( js ) is a light-weight object-oriented programming language which is used by several websites for scripting the webpages. It is an interpreted, full-fledged programming language that enables dynamic interactivity on websites when applied to an HTML document . JavaScript is used to create client-side dynamic pages. JavaScript is  an object-based scripting language  which is lightweight and cross-platform. JavaScript is not a compiled language, but it is a translated language. The JavaScript Translator (embedded in the browser) is responsible for translating the JavaScript code for the web browser.

116. Features of JavaScript All popular web browsers support JavaScript as they provide built-in execution environments. JavaScript follows the syntax and structure of the C programming language. Thus, it is a structured programming language. JavaScript is a weakly typed language, where certain types are implicitly cast (depending on the operation). JavaScript is an object-oriented programming language that uses prototypes rather than using classes for inheritance. It is a light-weighted and interpreted language. It is a case-sensitive language. JavaScript is supportable in several operating systems including, Windows, macOS , etc. It provides good control to the users over the web browsers.

117. Application of JavaScript JavaScript is used to create interactive websites. It is mainly used for: Client-side validation, Dynamic drop-down menus, Displaying date and time, Displaying pop-up windows and dialog boxes (like an alert dialog box, confirm dialog box and prompt dialog box), Displaying clocks etc.

118. History of JavaScript In 1993,  Mosaic , the first popular web browser, came into existence. In the  year 1994 ,  Netscape  was founded by  Marc Andreessen . He realized that the web needed to become more dynamic. Thus , a 'glue language' was believed to be provided to HTML to make web designing easy for designers and part-time programmers. Consequently, in 1995, the company recruited  Brendan Eich  intending to implement and embed Scheme programming language to the browser.

119. But, before Brendan could start, the company merged with  Sun Microsystems  for adding Java into its Navigator so that it could compete with Microsoft over the web technologies and platforms. Now, two languages were there: Java and the scripting language. Further, Netscape decided to give a similar name to the scripting language as Java's. It led to ' Javascript '

120. JavaScript Example Javascript example is easy to code. JavaScript provides 3 places to put the JavaScript code: within body tag, within head tag external JavaScript file.

121. <script  type="text/ javascript " >    document.write ("JavaScript is a simple language for  javatpoint  learners");   </script>    The  script  tag specifies that we are using JavaScript. The  text/ javascript  is the content type that provides information to the browser about the data . The  document.write ()  function is used to display dynamic content through JavaScript.

122. 3 Places to put JavaScript code Between the body tag of html Between the head tag of html In . js file (external java Script )

123. JavaScript Example : code between the body tag <script  type="text/ javascript " >     alert("Hello  Javatpoint ");   </script>    <html> <body> <script type="text/ javascript "> alert("Hello Javatpoint "); </script> </body> </html>

124. JavaScript Example : code between the head tag In this example, we are creating a function msg (). To create function in JavaScript, you need to write function with function_name as given below.

125. <html> <head> <script type="text/ javascript "> function msg (){ alert("Hello Javatpoint "); } </script> </head> <body> <p>Welcome to Javascript </p> <form> <input type="button" value="click" onclick =" msg ()"/> </form> </body> </html>

126. External JavaScript file We can create external JavaScript file and embed it in many html page. It provides  code re usability  because single JavaScript file can be used in several html pages. An external JavaScript file must be saved by . js extension . It is recommended to embed all JavaScript files into a single file. It increases the speed of the webpage. Let's create an external  JavaScript  file that prints Hello Javatpoint in a alert dialog box.

127. <html>    <head>    <script  type="text/ javascript "  src ="message.js" ></script>    </head>    <body>    <p> Welcome to JavaScript </p>    <form>    <input  type="button" value="click"  onclick =" msg ()" />    </form>    </body>    </html>   

128. message.js function  msg (){    alert("Hello  Javatpoint ");   }  

129. Advantages of External JavaScript There will be following benefits if a user creates an external javascript : It helps in the reusability of code in more than one HTML file. It allows easy code readability. It is time-efficient as web browsers cache the external js files, which further reduces the page loading time. It enables both web designers and coders to work with html and js files parallelly and separately, i.e., without facing any code conflictions. The length of the code reduces as only we need to specify the location of the js file.

130. JavaScript Basics JavaScript Comment: The  JavaScript comments  are meaningful way to deliver message. It is used to add information about the code, warnings or suggestions so that end user can easily interpret the code. The JavaScript comment is ignored by the JavaScript engine i.e. embedded in the browser. Types of JavaScript Comments There are two types of comments in JavaScript. Single-line Comment Multi-line Comment

131. JavaScript Single line Comment It is represented by double forward slashes (//). It can be used before and after the statement. Let’s see the example of single-line comment i.e. added before the statement. <script>    // It is single line comment   document.write ("hello  javascript ");   </script>   

132. <script>    var  a=10;   var  b=20;   var  c= a+b ;//It adds values of a and b variable   document.write (c);//prints sum of 10 and 20   </script>   

133. JavaScript Multi line Comment It can be used to add single as well as multi line comments. So, it is more convenient. It is represented by forward slash with asterisk then asterisk with forward slash. For example: /* your code here  */   It can be used before, after and middle of the statement. <script>    /* It is multi line comment.   It will not be displayed */   document.write ("example of  javascript  multiline comment");   </script>  

134. JavaScript Variable A  JavaScript variable  is simply a name of storage location. There are two types of variables in JavaScript : local variable and global variable. Rules: There are some rules while declaring a JavaScript variable (also known as identifiers). Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ ) sign. After first letter we can use digits (0 to 9), for example value1. JavaScript variables are case sensitive, for example x and X are different variables .

135. Correct JavaScript variables var  x = 10;   var  _value=" sonoo ";   Incorrect JavaScript variables var   123=30;   var  *aa=320;  

136. Example of JavaScript variable <html> <body> <script> var x = 10; var y = 20; var z= x+y ; document.write (z); </script> </body> </html>

137. JavaScript local variable A JavaScript local variable is declared inside block or function. It is accessible within the function or block only. For example : <script>    function  abc (){   var  x=10;//local variable   }   </script>  

138. JavaScript global variable A  JavaScript global variable  is accessible from any function. A variable i.e. declared outside the function or declared with window object is known as global variable. For example :

139. <html> <body> <script> var data=200 ;//global variable function a(){ document.writeln (data); } function b(){ document.writeln (data); } a();//calling JavaScript function b(); </script> </body> </html>

140. Javascript Data Types JavaScript provides different  data types  to hold different types of values. There are two types of data types in JavaScript. Primitive data type Non-primitive (reference) data type JavaScript is a  dynamic type language , means you don't need to specify type of the variable because it is dynamically used by JavaScript engine. You need to use  var  here to specify the data type. It can hold any type of values such as numbers, strings etc. For example : var a=40;//holding number   var b="Rahul";//holding string  

141. JavaScript primitive data types There are five types of primitive data types in JavaScript. They are as follows : Data Type Description String represents sequence of characters e.g. "hello" Number represents numeric values e.g. 100 Boolean represents boolean value either false or true Undefined represents undefined value Null represents null i.e. no value at all

142. JavaScript non-primitive data types The non-primitive data types are as follows : Data Type Description Object represents instance through which we can access members Array represents group of similar values RegExp represents regular expression

143. JavaScript Operators JavaScript operators are symbols that are used to perform operations on operands. For example : var  sum=10+20;   Here, + is the arithmetic operator and = is the assignment operator. There are following types of operators in JavaScript. Arithmetic Operators Comparison (Relational) Operators Bitwise Operators Logical Operators Assignment Operators Special Operators

144. JavaScript Arithmetic Operators Arithmetic operators are used to perform arithmetic operations on the operands. The following operators are known as JavaScript arithmetic operators . Operator Description Example + Addition 10+20 = 30 - Subtraction 20-10 = 10 * Multiplication 10*20 = 200 / Division 20/10 = 2 % Modulus (Remainder) 20%10 = 0 ++ Increment var a=10; a++; Now a = 11 -- Decrement var a=10; a--; Now a = 9

145. JavaScript Comparison Operators Operator Description Example == Is equal to 10==20 = false === Identical (equal and of same type) 10==20 = false != Not equal to 10!=20 = true !== Not Identical 20!==20 = false > Greater than 20>10 = true >= Greater than or equal to 20>=10 = true < Less than 20<10 = false <= Less than or equal to 20<=10 = false

146. JavaScript Bitwise Operators Operator Description Example & Bitwise AND (10==20 & 20==33) = false | Bitwise OR (10==20 | 20==33) = false ^ Bitwise XOR (10==20 ^ 20==33) = false ~ Bitwise NOT (~10) = -10 << Bitwise Left Shift (10<<2) = 40 >> Bitwise Right Shift (10>>2) = 2 >>> Bitwise Right Shift with Zero (10>>>2) = 2

147. JavaScript Logical Operators Operator Description Example && Logical AND (10==20 && 20==33) = false || Logical OR (10==20 || 20==33) = false ! Logical Not !(10==20) = true

148. JavaScript Assignment Operators Operator Description Example = Assign 10+10 = 20 += Add and assign var a=10; a+=20; Now a = 30 -= Subtract and assign var a=20; a-=10; Now a = 10 *= Multiply and assign var a=10; a*=20; Now a = 200 /= Divide and assign var a=10; a/=2; Now a = 5 %= Modulus and assign var a=10; a%=2; Now a = 0

149. JavaScript Special Operators Operator Description (?:) Conditional Operator returns value based on the condition. It is like if-else. , Comma Operator allows multiple expressions to be evaluated as single statement. delete Delete Operator deletes a property from the object. in In Operator checks if object has the given property instanceof checks if the object is an instance of given type new creates an instance (object) typeof checks the type of object. void it discards the expression's return value. yield checks what is returned in a generator by the generator's iterator.

150. JavaScript Statement The  JavaScript if-else statement  is used  to execute the code whether condition is true or false . There are three forms of if statement in JavaScript. If Statement If else statement if else if statement

151. JavaScript If statement It evaluates the content only if expression is true. The signature of JavaScript if statement is given below . if(expression){   //content to be evaluated   }  

152. <html> <body> <script> var a=20; if(a>10){ document.write ("value of a is greater than 10"); } </script> </body> </html>

153. JavaScript If...else Statement It evaluates the content whether condition is true of false. The syntax of JavaScript if-else statement is given below . if(expression){   //content to be evaluated if condition is true   }   else{   //content to be evaluated if condition is false   }  

154. <html> <body> <script> var a=20; if(a%2==0){ document.write ("a is even number"); } else{ document.write ("a is odd number"); } </script> </body> </html>

155. JavaScript If...else if statement It evaluates the content only if expression is true from several expressions. The signature of JavaScript if else if statement is given below . if(expression1){   //content to be evaluated if expression1 is true   }   else if(expression2){   //content to be evaluated if expression2 is true   }   else if(expression3){   //content to be evaluated if expression3 is true   }   else{   //content to be evaluated if no expression is true   }  

156. <html> <body> <script> var a=20; if(a==10){ document.write ("a is equal to 10"); } else if(a==15){ document.write ("a is equal to 15"); } else if(a==20){ document.write ("a is equal to 20"); } else{ document.write ("a is not equal to 10, 15 or 20"); } </script> </body> </html>

157. JavaScript Switch The  JavaScript switch statement  is used  to execute one code from multiple expressions . It is just like else if statement that we have learned in previous page. But it is convenient than  if..else..if  because it can be used with numbers, characters etc. The signature of JavaScript switch statement is given below.

158. switch(expression){   case value1:    code to be executed;    break;   case value2:    code to be executed;    break;   ......      default:     code to be executed if above values are not matched;   }  

159. <!DOCTYPE html> <html> <body> <script> var grade='B'; var result; switch(grade){ case 'A': result="A Grade"; break; case 'B': result="B Grade"; break; case 'C': result="C Grade"; break; default: result="No Grade"; } document.write (result); </script> </body> </html>

160. JavaScript Loops The  JavaScript loops  are used  to iterate the piece of code  using for, while, do while or for-in loops. It makes the code compact. It is mostly used in array. There are four types of loops in JavaScript. for loop while loop do-while loop for-in loop

161. JavaScript For loop The  JavaScript for loop   iterates the elements for the fixed number of times . It should be used if number of iteration is known. The syntax of for loop is given below . for (initialization; condition; increment)   {       code to be executed   }  

162. <!DOCTYPE html> <html> <body> <script> for ( i =1; i <=5; i ++) { document.write ( i + "< br />") } </script> </body> </html>

163.  JavaScript while loop The  JavaScript while loop   iterates the elements for the infinite number of times . It should be used if number of iteration is not known. The syntax of while loop is given below. while (condition)   {       code to be executed   }  

164. <!DOCTYPE html> <html> <body> <script> var i =11; while ( i <=15) { document.write ( i + "< br />"); i ++; } </script> </body> </html>

165. JavaScript do while loop The  JavaScript do while loop   iterates the elements for the infinite number of times  like while loop. But, code is  executed at least  once whether condition is true or false. The syntax of do while loop is given below. do{       code to be executed   }while (condition);  

166. <!DOCTYPE html> <html> <body> <script> var i =21; do{ document.write ( i + "< br />"); i ++; }while ( i <=25); </script> </body> </html >

167. JavaScript Functions JavaScript functions  are used to perform operations. We can call JavaScript function many times to reuse the code. Advantage of JavaScript function There are mainly two advantages of JavaScript functions. Code reusability : We can call a function several times so it save coding. Less coding : It makes our program compact. We don’t need to write many lines of code each time to perform a common task.

168. JavaScript Function Syntax The syntax of declaring function is given below. function  functionName ([arg1, arg2, ... argN ]){    //code to be executed   }   JavaScript Functions can have 0 or more arguments.

169. JavaScript Function Example <html> <body> <script> function msg (){ alert("hello! this is message"); } </script> <input type="button" onclick =" msg ()" value="call function"/> </body> </html>

170. JavaScript Function Arguments

171. JavaScript Objects A javaScript object is an entity having state and behavior (properties and method). For example: car, pen, bike, chair, glass, keyboard, monitor etc. JavaScript is an object-based language. Everything is an object in JavaScript. JavaScript is template based not class based. Here, we don't create class to get the object. But, we direct create objects.

172. Creating Objects in JavaScript There are 3 ways to create objects . By object literal By creating instance of Object directly (using new keyword) By using an object constructor (using new keyword)

173. 1) JavaScript Object by object literal The syntax of creating object using object literal is given below: object={property1:value1,property2:value2..... propertyN:valueN }   <html> <body> <script> emp ={id:102,name:"Shyam Kumar",salary:40000} document.write (emp.id+" "+emp.name+" "+ emp.salary ); </script> </body> </html>

174. 2) By creating instance of Object The syntax of creating object directly is given below: var   objectname =new Object();   Here,  new keyword  is used to create object .

175. <html> <body> <script> var emp =new Object(); emp.id=101; emp.name="Ravi Malik"; emp.salary =50000; document.write (emp.id+" "+emp.name+" "+ emp.salary ); </script> </body> </html>

176. 3) By using an Object constructor Here, you need to create function with arguments. Each argument value can be assigned in the current object by using this keyword. The  this keyword  refers to the current object.

177. <html> <body> <script> function emp ( id,name,salary ){ this.id=id; this.name=name; this.salary =salary; } e=new emp (103,"Vimal Jaiswal",30000); document.write (e.id+" "+e.name+" "+ e.salary ); </script> </body> </html>

178. JavaScript Can Change HTML Content One of many JavaScript HTML methods is getElementById (). The example below "finds" an HTML element (with id="demo"), and changes the element content ( innerHTML ) to "Hello JavaScript ":

179. <!DOCTYPE html> <html> <body > <h2>What Can JavaScript Do?</h2 > <p id="demo">JavaScript can change HTML content.</p > <button type="button" onclick =' document.getElementById ("demo"). innerHTML = "Hello JavaScript!"'>Click Me!</button > </body> </html>

180. The <script> Tag In HTML, JavaScript code is inserted between <script> and </script> tags . <!DOCTYPE html> <html> <body > <h2>JavaScript in Body</h2 > <p id="demo"></p > <script> document.getElementById ("demo"). innerHTML = "My First JavaScript"; </script > </body> </html>

181. JavaScript Functions and Events A JavaScript function is a block of JavaScript code, that can be executed when "called" for. For example, a function can be called when an event occurs, like when the user clicks a button.

182. JavaScript in <head> or <body> You can place any number of scripts in an HTML document . Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both.

183. <!DOCTYPE html> <html> <head> <script> function  myFunction () {    document.getElementById ("demo"). innerHTML  = "Paragraph changed."; } </script> </head> <body><h2>Demo JavaScript in Head</h2 > <p id="demo">A Paragraph</p> <button type="button"  onclick =" myFunction ()">Try it</button> </body> </html>

184. JavaScript  Output JavaScript Display Possibilities JavaScript can "display" data in different ways : Writing into an HTML element, using innerHTML . Writing into the HTML output using document.write (). Writing into an alert box, using window.alert (). Writing into the browser console, using console.log().

185. Using innerHTML To access an HTML element, JavaScript can use the document.getElementById (id) method . The id attribute defines the HTML element. The innerHTML property defines the HTML content:

186. <!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My First Paragraph</p > <p id="demo"></p> <script> document.getElementById ("demo"). innerHTML  = 5 + 6; </script> </body> </html>

187. Using document.write () For testing purposes, it is convenient to use document.write (): <!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My first paragraph.</p> <script> document.write (5 + 6); </script> </body> </html>

188. Using window.alert () You can use an alert box to display data: <!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My first paragraph.</p> <script> window.alert (5 + 6); </script> </body> </html>

189. JavaScript  Statements JavaScript Programs A  computer program  is a list of "instructions" to be "executed" by a computer. In a programming language, these programming instructions are called  statements . A  JavaScript program  is a list of programming  statements . In HTML, JavaScript programs are executed by the web browser.

190. JavaScript Statements JavaScript statements are composed of: Values, Operators, Expressions, Keywords, and Comments. This statement tells the browser to write "Hello Dolly." inside an HTML element with id="demo": Example document.getElementById ("demo"). innerHTML  = "Hello Dolly ."; Semicolons ; Semicolons separate JavaScript statements. Add a semicolon at the end of each executable statement:

191. JavaScript White Space JavaScript ignores multiple spaces. You can add white space to your script to make it more readable. The following lines are equivalent: let person = " Hege "; let person=" Hege ";

192. JavaScript Keywords Keyword Description var Declares a variable let Declares a block variable const Declares a block constant if Marks a block of statements to be executed on a condition switch Marks a block of statements to be executed in different cases for Marks a block of statements to be executed in a loop function Declares a function return Exits a function try Implements error handling to a block of statements

193. JavaScript  Syntax JavaScript syntax is the set of rules, how JavaScript programs are constructed: // How to create variables: var  x; let y; // How to use variables: x = 5; y = 6; let z = x + y;

194. RegExp Object A regular expression is a  pattern  of characters. The pattern is used to do pattern-matching  "search-and-replace"  functions on text. In JavaScript, a  RegExp Object  is a pattern with  Properties  and  Methods . Syntax / pattern / modifier(s) ;

195. Expression Description [abc] Find any character between the brackets [^abc] Find any character NOT between the brackets [0-9] Find any character between the brackets (any digit) [^0-9] Find any character NOT between the brackets (any non-digit) (x|y) Find any of the alternatives specified

196. Metacharacter Description . Find a single character, except newline or line terminator \w Find a word character \W Find a non-word character \d Find a digit \D Find a non-digit character \s Find a whitespace character \S Find a non-whitespace character \b Find a match at the beginning/end of a word, beginning like this: \bHI, end like this: HI\b \B Find a match, but not at the beginning/end of a word \0 Find a NULL character \n Find a new line character \f Find a form feed character \r Find a carriage return character \t Find a tab character \v Find a vertical tab character \xxx Find the character specified by an octal number xxx \xdd Find the character specified by a hexadecimal number dd \udddd Find the Unicode character specified by a hexadecimal number dddd