Scribd
Upload
93 views37 pages

WBP File

Uploaded by

Ayush srivastava
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
93 views37 pages

WBP File

Uploaded by

Ayush srivastava
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 37
File - :\Users\ShubhangamiDesktop\ProgramminglWeb programming program2\Web page to show brief detals of HTML tags T 2 3 4 . 5 HTML Tag reference 6 7 8 9 0 ‘cht class=" Heading’ >HTML Tag Reference <

Unordered List (UL)

1 ;aragraph’ >The UL tag creates an unordered list. Each item is enclosed in a LI tag

oa B list text> Item 1e/li> “ list text">Item 2 15
  • Item 3 Sub Heading"> Ordered List(OL) 18

    Item t

    • t Eah item is enclosed in LI tag

    a lass= "list text> Item 2 2 list text> Item 3 23 24 Sub Heading">Table (TABLE) 25

    The IMG tag displays an image on the page. The source of the image is ified using the “src” attribute

    38 fimg/download jpg” alt="A sample image"> 39

    Anchor (A)

    40 41 The A tag creates a hyperlink to another webpage or a specified location on the same page. The Destination of the link is specified using "href" attribute

    4B ‘aragraph"> your cursor on the underlined text and click that text, You will be redirected to another site> 45. 46 47 Page Toft File - :\Users\ShubhangamiDesktop\ProgramminglWeb programming) programZHTML Tag Ref.css T 2 3 4 bodyt font-family: Aral, sans-serif; padding: 20px; background-color: antiquewhite; hn, h2 text-align: center, d ul, olf margin: 1Opx 0; padding-left: 20px; > tablet border-collapse: collapse; width: 100%; d th, td border: tpx solid red; > the background-color: lightblue; > imat imax-width: 100%; animation: ease-in-out; padding-left: 540px; width: 500px; ) ahovert color: #330756; text-decoration: #€a0000; text-transform: uppercase: text-decoration: underline; font-size: 13px; link text padding-left: 200px; > Heading font-style: normal; text-decoration: underlin font-family: “5th Grade Cursive’; font-size: 75px; font-weight: 1000 color: #8201ad; background-color: white; Page tof? File - :\Users\ShubhangamiDesktop\ProgramminglWeb programming) programZHTML Tag Ref.css 60 6) 62 63 64 Sub Heading 65 font-family: "Cutive Mono"; 66 font-weight: 10000; 67 font-size: 40px; 68 color: aquas 69 _ background-color: black; 70 } n R 73. sparagrapht 74 font-size: 25px; 75 font-family: "Cooper Blac 76 7) 78 19 80 ist text BI font-size: 20px; 82 font-weight: 50 83 font-style: italic; a4) 85 Page 2 0f2 HTML Tag Reference The UL tag creates an unordered list. Each item is enclosed in a LI tag The OL tag creates a ordered list. Eah item is enclosed in LI tag 1. Item 1 2. Item 2 3. Item 3 The TABLE tag creates a table. Each table row is encloded in a TR tag and each table data is encloded in TD tag Header 1 Header 2 Row 2, Cell 4 Row 2, Cell 2 Image(IMG) The IMG tag displays an image on the page. The source of the image is specified using the "src" attribute Anchor (A) The A tag creates a hyperlink to another webpage or a specified location on the same page. The Destination of the link is specified using "href" attribute your cursor on the underlined text and click that text. You will be redirected to another site> File wevausune 10 1 oa B “ 5 16 0 8 19 20 a 23 24 25 26 27 28 29 30 31 32 (C\Users\Shubhangam\Desktop\ProgrammingWeb programminglaragram3\Calculator htm! “ Simple Calculator ‘
    < ‘addValue(this)’>+ 1ddValue(this)">- ‘operator’ value: addValue(this)'>* conelick="addValue(this)’>7 ‘onclick addValue(this)">8 ‘addValue(this)'>9 ‘onclick "addValue(this)’>4 conclick="addValue(this)">5 ‘onclick addValue(this)">6 onclick="addValue(this)'>1 ‘onclick "addValue(this)'>2 ‘onclick "addValue(this)">3 ‘onclick="addValue(this)">0
    Page toft File - :\Users\Shubhangam\Desktop\Programming\Web programming) program3\Galculator.css T calculator { 2 width: 300px; 3 margin: 0 auto; 4 text-align: center; width: 100%; height: S0px; 10 font-size: 15em; M1 text-align: right; 12 padding: 0 10px; 13 margin-bottom: 20px; 14 border: none; 15 background-color: #2f202; 6) 5 6 7 input ¢ 8 9 18 buttons ( 19 display: grid 20. grid-template-columns: repeat(4, tf; 21 gtid-gap: 10px, 2) 24 button ¢ 25. width: 100%, 26 height: Spx; 27 font-size: Sem; 28 background-color: #242f2; 29° border: none; 30) 32 operator ( 33. background-color: #eee; 34) 35 Page toft File -CAUsers\ShubhangamiDesktop\ProgramminglWeb programmingloragram\Calculators T let display = document. getElementByld( clsplay )s 2 let currentValue = 3 let memory 4 let operator ="; 5 6 function addValue(button) 7 8 if (button.value === °C") 94 10 currentValue = °"; memory ="; 12 operator B wy 5 16 else if (button.value || button value m 18 memory = currentValue; 19 currentValue = 20 operator = button.value; || buttonvalue ay 22 alse 2 24 —currentValue += button value; 25} 26 display.valui 27) 28 display.value = currentValue; currentValue; 30 function calculated 31 32 if (operator 3B 34 currentValue = parseFloat(memory) + parseFloat(currentValue); 35) 36 else if (operator 37 38 _currentValue = parseFloat(memory) - parseFloat(currentValue); 39) 40. else if (operator a 42 currentValue = parseFloat(memory) * parseFloat(currentValue); ~ ) i) a3) 44 else 45 4 46 currentValue = parseFloat(memory) / parseFloat(currentValue); a7) 48° display.value = currentValue; 49) 50 st 52 Page Toft File - :\Users\ShubhangamiDesktop\Programming\Web programming\programé\Grocery ist hm T 2. 3 4 . 5 to-do/Grocery list 6 7 8 9 To-do/Grocery Liste/hi> 16 rocery*420listjs"> 18 19. Page toft File CUsers\ShubhangamiDesktop\Programming\Web programminglorogramé\Grocery list.css T 2 3 37 58 59 body ( font-family: Aral, sans-serif; margin: 0; padi hig text-align: center, margin-top: 50px; ) form( display: flex; justify-content: center; margin-top: 30px, y input ¢ width: 50%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: 2px solid Heee;, border-radius: 4px; > button { width: 20%; padding: ¥4px 20px; margin: 8px 0; border: none; border-radius: 4px; background-color: #4CAFSO; color: white: ‘cursor: pointer; d ul liststyle-type: none; margin: 50px 0; padding: 0; text-align: center, y li display: flex; justify-content: space-between; padding: 2px 20px; border: tpx solid #eee; border-radius: 4px; margin-bottom: 8px; background-color: 2°22; d button ( padding: 6px 12px; border-radius: 4px; background-color: #144336; color: white; Page tof? Fils - :\Users\ShubhangamiDesktop\ProgramminglWeb programming\programé\Grocery list.css 60 cursor: pointer; 61) 62 Page 2 0f2 File - :\Users\ShubhangamiDesktop\ProgramminglWeb programming\programAiGrocery ists 7/ initialize an empty array to store the list ems let items = 11; / Get the add button let addBtn = document.getElementByld("adeBtn’); // Add click event listener to the add button addBtn.addEventListener( "click", adaltem); // Function to add a new item to the list function additemd { 12 // Get the value of the input field 13 _letitem = document.getElementByld("itern").value; SS eervausen| 15 // Add the item to the array 16 _items.push(item); 18 // Clear the input field 19 document.getElementByld("item").valu 21 // Call the function to display the list 22 displayListo; 2B) 25 // Function to display the list 26 function displayList0 { 27 //Get the list element 28 let lst = document.getélementByld(ist"); 30 //Clear the list 31 listinnerHTML 33. //Loop through the array and add each item to the lst, 34 for (let = 0; 1 < itemsilength; i++) ( 35. // Create a new list item 36 let li = document.createtlement(’! 38° // Add the item text 41 //Create a delete button 42 let btn = document.createtlement(’button’); 43 btn.innerHTML = "Delete"; 44 btnonclick = functiond ( 45° deleteltemi 48 // Append the button to the list item 49. li.appendchild(btny; 51 // Append the list item to the list 52 _listappendchildi 33) 54) 55 56 // Function to delete an item from the list 57 function deleteltern(index) ( 58 // Remove the item from the array 59 _items.splice(index, 1); Page tof? File - :\Users\ShubhangamiDesktop\ProgramminglWeb programming\programAiGrocery ists 60 61 // Call the function to display the list 62 displayList0; 6) 64 65 // Call the function to display thi 66 displayList0; 67 Page 2 0f2 Carrot. onion Raddish Potato Add new item. To-do/Grocery List Pere Per File - :\Users\ShubhangamDesktop\Programming\Web programming\programSWavaScript at ‘Types and Statements.s 7/ Declare variables of different data types let name = "John Doe"; let age = 30; const isStudent = true; let grades = (90, 85, 80]; Use if-else statement to check a condition if (isStudent) ¢ console log( "Welcome, student"); yelse consolelog("Sorry, you are not a student"), SSeevausen—| 2) B 14. // Use a for loop to iterate through an array 15 for (let i = 0; < grades.length; i++) ( 16 console og( "Gracie: " + gradesfi); Ww) 8 19. // Use the typeof operator to check the data type of a variable 20 consolelog("Type of name: + typeof name); a 22 // Use the ternary operator to check if age is greater than 18 23 let ageCheck = age > 18 ? Adult’: Minos 24 consolelog(’Age Check: " + ageCheck); 25 26 // Use a while loop to print even numbers between 1 and 10 27 let num = 1; 28 while(num <= 10) ( 29 if{rnum % 2 === 0)¢ 30 console log(num); 31) 32 mums; 33) 34 35_// Use the switch statement to check a variable value 36 let day = new Date).getDay( 37. switeh(day) ( 38 case 0: 39 consolelog( "Today is Sunday"}; 40 break; 41 case: 42 consolelog(“Tocay is Monday’), 43 break; 44 case 2: 45 consolelog(“Today is Tuesday"); 46 break; 47 // add more cases for the remaining days 48 default: 49 consolelog(" Invalid Day"); 50) st Page toft File -C\Users\ShubhangamiDesktop\ProgramminglWeb programminglpragram\app him T 2 3 4 5 _JavaScript Application 6 7 8 9 0 ‘ch id="header” >Hello World! M1     ‘app.css"> 15. 16 Page Toft File -CAUsers\ShubhangamiDesktop\ProgramminglWeb programmingloragramslapp css. T #header{ 2 text-align: center, 3. font-size: 2em; 4 padding: 200% 5) 6 7 #myBtn ( 8 padding: 10px 2px 9 font-size: Sem; 10 margin: 20px auto; M1 display: block; 2) B Page Toft File ~Users\ShubhangamiDesktop\Programming\Web programming\program®iapp is 1 // Get the button element 2 var btn = document. getElement®yld(’myBtn"); 3 4. // Add an event listener to the button 5 btnaddEventListener( “click”, function // Get the header element var header = document.getElementByld(‘heade // Change the text of the header 10 header.innerHTML = "Button was clicked"; 12 // Change the background color of the window 13 window.document.body-style backgroundColor 4 oy 5 Page toft YouTube EB Javascript Application x + 27tjneiq3& ij_reload=RELOAD_ON_SAVE Ranklist - Resul. Hello World! Click me File -C:\Users\ShubhangamiDesktop\ProgramminglWeb programmingloragramT\app 2.html T 2 3 4 . 5 Object and Methods 6 a 22 23. 24 Page Toft File - :\Users\ShubhangamiDesktop\Programming\Web programminglprogram\app 2.085 T body( 2 font-family: Arial, sans-serif; text-align: center; > 3 4 5 6 7 color #Be3e3e; 8 margin: 40px 0; 9) 10 1 button ¢ 12 padding: 10px 20px, 13. margin: 1px; 14 font-size: 1.2em; 18 border-radius: Spx; 16 border: none; 17 background-color: #00bff; 18 color: white; 19 cursor: pointer; 20) a Page toft File -CUsers\ShubhangamiDesktop\ProgramminglWeb programmingloragramT\app 2s 1 // object creation 2 let person = ¢ ame: “John age: 30, ‘occupation: "Developer 3 4 5 6 7 8 //adding methods to the object 9 person.sayHello = functiond { 10 console log("Hello, my name is " + thismame); my oa 13 person showAge = function0 { 14 consoleog(’| ar + thisage + " years ole}; 5 16 17 //calling the methods 18 personsayHello(; 19 personshowAge); 20 Page Toft Objectand Methods * fe 1j401e08u3mbqpm&_ij_reload=RELOAD_ON_SAVE Ranklist - Resul... Objects and Methods ore Nal <1 6) Show Age File CUsersiShubhangam\Desktop\ProgramminglWeb [email protected] “ ‘. Iteration with Loops -Iteration with Loops
      Page Toft File ~ C:\Users\ShubhangamiDesktop\ProgramminglWeb programming\program\app3.css T body( 2 font-family: Arial, sans-serif 3 text-align: center, 4) 5 6 7 margin-top: SOpx; 8) 9 10 ult 11 list-style-typet none; 12 margin: 0; 13 padding: 0; 14 display: inline-block; 1%) 16 wit 18 display: inline-block; 19 margin: 0 10px; 20. padding: 10px, 21 background-color: #2f2A2; 22 border-radius: 2B) 24 Page toft File -C\Users\ShubhangamiDesktop\Programming\Web programminglprogram\app3 js 1 // Get the element to insert the numbers into 2 var numbersList = document.getElementByld(’numbers"); 3 4. // Use a for loop to iterate through the numbers 1 to 10, 5 for (vari= thi <= 10;i¢4) 6 7 // Create anew list item element 8 varnewlistitem = document.createElement{(l); 9 10 //Set the text content of the element to the current number M1 newListitem.textContent oa 13 // Append the element to the numbers lst 14 _numberslist.appendChild(newListitem); 5) 16 Page toft ct a Mentone aes x Ee j5eigtern39pqhtvk3& _ij_reload=RELOAD_ON_SAVE IPU Ranklist - Resul... Iteration with Loops File - C:\Users\Shubhangam\Desktop\Programming\Web programming|programs\Random Number Generator him! T 2 3 4 . 5 _ Random Number Generator 6 7 8 9

      Random Number Generator I Nh

      oa 13 “4 15. 16 ” Page Toft File ~C:\Users\ShubhangamiDesktop\Programming\Web programming\program®\stye.css T body( 2 font-family: Arial, sans-serif 3° text-align: center; 19: 5Opx 5 6 7 mG 8 color: #333333; 9) Mt button ¢ 12 padding: 10px 20px;, 13 font-size: 12em; 14 border-radius: Spx; 15 _ background-color: #4CAFSO; 16 color: wtf 17 border: none; 18 cursor: pointer: 19 margin-top: 20px; 20) 22 buttorchover { 23 background: color: #3eBedt; 24) 26 output ( 27 font-size: Sem; 28 color: #333333; 29 margin-top: 20px; 30) 31 Page toft File -C\Users\ShubhangamiDesktop\Programming\Web programminglprogram®\scrit js T function generateNumber) { 2 var output = document getélement®yld(‘output’); 3 var randomNumber = Math loor(Math.random9 * 100) + 1; 4 outputinnerHTML = “Random number: ° + randomNumber; 5) 6 Page Toft g Bil Random Number Generator Senerator html? jt=uttSpuipSbba2tii2t4ti2aq® ij reload=RELOAD ON SAVE sratorhtmi?_ijt=ut43pvfipSSba2firi2tstt2aqa ij reload=RELOAD_ON SAVE IP Ranke - Res, IPU Ranks -Resul Random Number Generator Random Number Generator Generate Random Number Random number: 33 snerator.html?_ijt=ut43 pvfipS$ba2ffriztaff2aqa_ij_reload=RELOAD_ON SAVE Jeneratochtml?_it=ut43pvfipSSbaafiri2tatizaq& jj reload=RELOAD_ON SAVE [PU Rankst-Resul.. IPU Rankist -Resul.. Random Number Generator Random Number Generator beam es nerate Random Number Random number: 64 Random number: 94 File - €:\Users\ShubhangamiDesktop\ProgramminglWeb programming|program10\Urit Convertor hr T , 2. 3 4 . 5 Unit Convertor 6 7 8 9
      10 1 ‘ 2
      13 4 Inches 23 24 ards">Yards 25 26 27 uubmit’>Convert 28 29 result>

      30 32 33. Page toft File - :\Users\ShubhangamiDesktop\Programming\Web programminglprogram10\converter.css T body( 2 font-family: Arial, sans-serif 3 margin: 0; 4 5 6 7 form { 8 margin: 20px, 9 padding: 20px; 10 background-color: #2F2f2; M1 border-radius: Spx; mw) 14 label ( 15 font-weight: bold; 16 margin-right: 1px; Ww) putttype="tox'1{ 20 padding: 1opx; 21 border-radius: Spx; 22. border: tpx solid eee; 23) 25 select ( 26 padding: 10px; 27 border-radius: Spx; 28 border: 1px solid #ece; 29) 31 button{type="submit'] { 32 background-color: #4CAFSO; 33. color: white; 34 padding: 12px 20px, 35. border: none; 36. border-radius: 4px; 37. cursor: pointer; 38 margin-top: 20px; 39) 41 button{type="submit’ hover ¢ 42 _ background-color: #454049; “6 : 47 padding: 20p%; 48. background-color: #d9edf7; 49. border-radius: Spx; 50 text-align: center; st) 52 Page toft File - €:\Users\ShubhangamiDesktop\Programming\Web programming program 1O\convertorjs T const conversionRates 2 inches: ( 3 feet: 0.083333, 4 yards: 0.02778 5) 6 feet:( 7 8 9 0 inches: 12, yards: 0.333333, d yards: ( 1 1 inches: 36, 2 feet:3 Bo) wy 5 16. document.getElementByld(‘conversion- form’) addEventListener( submit", function(e) ¢ 17 epreventDefaultQ; 8 19 //Get user input 20 const value = document.getElementByld("valuc")-value; 21 const fromUnit = document.getElementByld(from-uni").value; 22 const toUnit = document.getElementByld('to-unit")value; 23 24 // Perform conversion 25 const result = value * conversionRates{fromUnit][toUnit 26 27 // Display result 28 document.getélementByld(‘resui").innerHTML + toUnit; 29»; 30 flue +" + fromUnit + ° is equal to" + result + Page Toft + > 6 (Gnas E Rayan Sa RARER MRED OLE men onine. Bete. WABI, WA Ra ‘nese 602778 ade > © feshon32 roan th atoocamerortnl” pe2H empiri esd GLOND ON SAVE From Unit Fact Fount, vane 10 foots exal0333833 yards > © (© its jn UARRBIC ono aS wip le RECAD ON AVE From Unt fet ~ Teun: taome © 10 oot quale 120 nets > © (© leer aracmarimsziConarc ten Peo nearness RELOAD OU SVE 2 pen marine. Emmet see. VADURARTET, URI. 10-nehes i ogi 0.85858 oot

      You might also like