1<!DOCTYPE html> 2<html lang="en-US"> 3<head> 4
4<script async src="https://fundingchoicesmessages.google.com/i/pub-3064682230209163?ers=1"></script>
vendor: 2 bytes, line 4
4
5<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3064682230209163" crossorigin="anonymous"></script>
5 6 <!-- Google tag (gtag.js) -->
vendor: 69 bytes, lines 6-7
6 7 <script async src='https://www.googletagmanager.com/gtag/js?id=
7G-78N273LCMH
vendor: 17 bytes, lines 7-8
7'></script> 8
8<script> 9
vendor: 157 bytes, lines 9-12
9window.dataLayer = window.dataLayer || []; 10 function gtag() { dataLayer.push(arguments); } 11 gtag('js', new Date()); 12 gtag('config', '
12G-78N273LCMH
vendor: 9 bytes, lines 12-13
12'); 13
13</script>
13 14 <title>W3Schools Online Web Tutorials</title> 15 <meta charset="utf-8"> 16 <meta name="viewport" content="width=device-width, initial-scale=1"> 17 <meta name="Keywords" content="HTML,CSS,JavaScript,DOM,jQuery,PHP,SQL,XML,Python,Java,Bootstrap,Web,W3CSS,W3C,tutorials,programming,development,training,learning,quiz,primer,lessons,reference,examples,source code,colors,demos,tips,w3c"> 18 <link rel="icon" href="favicon.ico" type="image/x-icon"> 19 <link rel="stylesheet" href="w3css/4/w3.css"> 20 <style> 21 .ad-desktop { 22 display: block; 23 } 24 25 .ad-mobile { 26 display: none; 27 } 28 29 @media(max-width:768px) { 30 .ad-desktop { 31 display: none; 32 } 33 34 .ad-mobile { 35 display: block; 36 } 37 } 38 39 /* W3Schools Font Logo */ 40 .w3schools-logo { 41 font-family: fontawesome; 42 text-decoration: none; 43 line-height: 1; 44 -webkit-font-smoothing: antialiased; 45 -moz-osx-font-smoothing: grayscale; 46 font-size: 37px; 47 letter-spacing: 3px; 48 color: #555555; 49 display: block; 50 position: relative; 51 } 52 53 .w3schools-logo .dotcom { 54 color: #1E1E1E; 55 } 56 57 @font-face { 58 font-family: 'fontawesome'; 59 src: url('lib/fonts/fontawesome8deb.eot?14663396#iefix') format('embedded-opentype'), url('lib/fonts/fontawesome8deb.woff?14663396') format('woff'), url('lib/fonts/fontawesome8deb.ttf?14663396') format('truetype'), url('lib/fonts/fontawesome8deb.svg?14663396#fontawesome') format('svg'); 60 font-style: normal; 61 } 62 63 .fa { 64 display: inline-block; 65 font: normal normal normal 14px/1 FontAwesome; 66 font-size: 20px; 67 text-rendering: auto; 68 -webkit-font-smoothing: antialiased; 69 -moz-osx-font-smoothing: grayscale; 70 transform: translate(0,0); 71 } 72 73 .fa-home:before { 74 content: '\e800'; 75 } 76 77 .fa-menu:before { 78 content: '\f0c9'; 79 } 80 81 .fa-globe:before { 82 content: '\e801'; 83 } 84 85 .fa-search:before { 86 content: '\e802'; 87 } 88 89 .fa-thumbs-o-up:before { 90 content: '\e803'; 91 } 92 93 .fa-left-open:before { 94 content: '\e804'; 95 } 96 97 .fa-right-open:before { 98 content: '\e805'; 99 } 100 101 .fa-caret-down:before { 102 content: '\e809'; 103 } 104 105 .fa-caret-up:before { 106 content: '\e80a'; 107 } 108 109 .fa-user:before { 110 content: '\e816'; 111 } 112 113 .fa-js:before { 114 content: '\e819'; 115 } 116 117 .fa-python:before { 118 content: '\e81a'; 119 } 120 121 .fa-php:before { 122 content: '\e81b'; 123 } 124 125 .fa-bootstrap:before { 126 content: '\e81c'; 127 } 128 129 .fa-html5:before { 130 content: '\f13b'; 131 } 132 133 .fa-css3:before { 134 content: '\f13c'; 135 } 136 /* Google */ 137 #nav_translate, #nav_search { 138 display: none; 139 } 140 141 #nav_translate a { 142 display: inline; 143 } 144 145 #googleSearch { 146 color: #000000; 147 } 148 149 .searchdiv { 150 max-width: 400px; 151 margin: auto; 152 text-align: left; 153 font-size: 16px; 154 } 155 156 div.cse .gsc-control-cse, div.gsc-control-cse { 157 background-color: transparent; 158 border: none; 159 padding: 0px; 160 margin: 0px; 161 } 162 163 td.gsc-search-button input.gsc-search-button { 164 background-color: #555555; 165 border-color: #555555; 166 } 167 168 input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus, .gsc-search-button { 169 box-sizing: content-box; 170 line-height: normal; 171 } 172 173 .gsc-tabsArea div { 174 overflow: visible; 175 } 176 177 .gsst_a .gscb_a { 178 margin-top: 3px; 179 } 180 /* Customize W3.CSS */ 181 #nav_tutorials, #nav_references, #nav_examples, #nav_exercises, #nav_login { 182 display: none; 183 padding-bottom: 40px; 184 position: absolute; 185 width: 100%; 186 z-index: 5 !important; 187 } 188 189 .w3-col .w3-button { 190 margin: 5px 5px 5px 0; 191 font-size: 16px; 192 } 193 194 .w3-col.l4 .w3-card-2 { 195 padding: 15px 10px; 196 height: 260px; 197 } 198 199 .w3-theme { 200 color: #fff !important; 201 background-color: #1E1E1E !important; 202 } 203 204 .w3-main { 205 margin-left: 230px; 206 } 207 208 .w3-sidebar { 209 z-index: 3; 210 width: 230px; 211 overflow: hidden !important; 212 position: absolute !important; 213 margin-bottom: -155px; 214 } 215 216 .w3-sidebar .w3-bar-block .w3-bar-item { 217 padding: 0 16px; 218 font-size: 16px; 219 } 220 221 .w3-bar { 222 position: relative; 223 z-index: 4; 224 font-size: 17px; 225 } 226 227 .w3-wide { 228 font-family: "Segoe UI",Arial,sans-serif; 229 } 230 231 h1 { 232 font-size: 80px; 233 color: #555555; 234 margin: 2px 0 -20px 0 !important; 235 } 236 237 .certoverlay { 238 position: absolute; 239 top: 0; 240 background-color: rgba(0, 0, 0, 0.5); 241 width: 100%; 242 text-align: center; 243 padding: 15px 244 } 245 246 .certoverlay h2 { 247 margin: 10px 0 0 0; 248 font-size: 36px; 249 } 250 251 .certoverlay h3 { 252 margin: 0 0 10px 0; 253 } 254 255 .login { 256 display: none; 257 line-height: 1.5; 258 padding: 6px 14px; 259 position: relative; 260 top: 5px; 261 color: #fff; 262 background-color: #1E1E1E; 263 text-decoration: none; 264 border-radius: 5px; 265 font-family: "Segoe UI",Arial,sans-serif; 266 } 267 268 .loginmodalform { 269 margin: auto; 270 width: 100%; 271 max-width: 700px; 272 text-align: left; 273 padding: 20px 40px; 274 } 275 276 .loginmodaldiv input { 277 width: 100%; 278 border: 1px solid #ccc; 279 padding: 8px 12px; 280 } 281 282 .loginmodaldiv .login_submit_container { 283 text-align: right; 284 } 285 286 .loginmodaldiv button { 287 width: 30%; 288 min-width: 120px; 289 border: none; 290 border-radius: 5px; 291 padding: 6px 10px; 292 background-color: #1E1E1E; 293 color: #fff; 294 cursor: pointer; 295 } 296 297 .loginmodaldiv button:hover { 298 background-color: #333333; 299 color: #fff; 300 } 301 302 .loginmodaldiv a { 303 padding: 0 !important; 304 color: #000; 305 } 306 307 .login_newusertext { 308 width: auto; 309 float: right; 310 text-align: right; 311 } 312 313 .login_forgotpasswordtext { 314 width: auto; 315 float: left; 316 } 317 318 @media screen and (max-width:700px) { 319 .loginmodaldiv .login_submit_container { 320 text-align: center; 321 } 322 323 .login_newusertext { 324 width: 100%; 325 text-align: center; 326 margin-top: 20px; 327 } 328 329 .login_forgotpasswordtext { 330 width: 100%; 331 text-align: center; 332 margin-top: 30px; 333 } 334 335 .w3schools-logo { 336 font-size: 30px; 337 } 338 339 .login { 340 top: 3px; 341 } 342 } 343 344 .tagcolor { 345 color: mediumblue 346 } 347 348 .tagnamecolor { 349 color: brown 350 } 351 352 .attributecolor { 353 color: red 354 } 355 356 .attributevaluecolor { 357 color: mediumblue 358 } 359 360 .commentcolor { 361 color: green 362 } 363 364 .cssselectorcolor { 365 color: brown 366 } 367 368 .csspropertycolor { 369 color: red 370 } 371 372 .csspropertyvaluecolor { 373 color: mediumblue 374 } 375 376 .cssdelimitercolor { 377 color: black 378 } 379 380 .cssimportantcolor { 381 color: red 382 } 383 384 .jscolor { 385 color: black 386 } 387 388 .jskeywordcolor { 389 color: mediumblue 390 } 391 392 .jsstringcolor { 393 color: brown 394 } 395 396 .jsnumbercolor { 397 color: red 398 } 399 400 .jspropertycolor { 401 color: black 402 } 403 404 .javacolor { 405 color: black 406 } 407 408 .javakeywordcolor { 409 color: mediumblue 410 } 411 412 .javastringcolor { 413 color: brown 414 } 415 416 .javanumbercolor { 417 color: red 418 } 419 420 .javapropertycolor { 421 color: black 422 } 423 424 .kotlincolor { 425 color: black 426 } 427 428 .kotlinkeywordcolor { 429 color: mediumblue 430 } 431 432 .kotlinstringcolor { 433 color: brown 434 } 435 436 .kotlinnumbercolor { 437 color: red 438 } 439 440 .kotlinpropertycolor { 441 color: black 442 } 443 444 .phptagcolor { 445 color: red 446 } 447 448 .phpcolor { 449 color: black 450 } 451 452 .phpkeywordcolor { 453 color: mediumblue 454 } 455 456 .phpglobalcolor { 457 color: goldenrod 458 } 459 460 .phpstringcolor { 461 color: brown 462 } 463 464 .phpnumbercolor { 465 color: red 466 } 467 468 .pythoncolor { 469 color: black 470 } 471 472 .pythonkeywordcolor { 473 color: mediumblue 474 } 475 476 .pythonstringcolor { 477 color: brown 478 } 479 480 .pythonnumbercolor { 481 color: red 482 } 483 484 .angularstatementcolor { 485 color: red 486 } 487 488 .sqlcolor { 489 color: black 490 } 491 492 .sqlkeywordcolor { 493 color: mediumblue 494 } 495
496 .sqlstringcolor { 497 color: brown 498 } 499 500 .sqlnumbercolor { 501 color: 502 } 503 504 .darktheme .w3-code { 505 background-color: rgb(40,44,52); 506 color: white; 507 border-left-color: rgb(40,44,52) !important 508 } 509 510 .darktheme .w3-example pre { 511 background-color: rgb(40,44,52) !important; 512 border-left-color: rgb(40,44,52) 513 } 514 515 .darktheme .tagcolor { 516 color: #88ccbb /*green2*/ !important 517 } 518 519 .darktheme .tagnamecolor { 520 color: #ff9999 /*red*/ !important 521 } 522 523 .darktheme .attributecolor { 524 color: #c5a5c5 /*purple*/ !important 525 } 526 527 .darktheme .attributevaluecolor { 528 color: #88c999 /*green*/ !important 529 } 530 531 .darktheme .commentcolor { 532 color: #999 !important 533 } 534 535 .darktheme .cssselectorcolor { 536 color: #ff9999 /*red*/ !important 537 } 538 539 .darktheme .csspropertycolor { 540 color: #c5a5c5 /*purple*/ !important 541 } 542 543 .darktheme .csspropertyvaluecolor { 544 color: #88c999 /*green*/ !important 545 } 546 547 .darktheme .cssdelimitercolor { 548 color: white !important 549 } 550 551 .darktheme .cssimportantcolor { 552 color: #ff9999 /*red*/ !important 553 } 554 555 .darktheme .jscolor { 556 color: white !important 557 } 558 559 .darktheme .jskeywordcolor { 560 color: #c5a5c5 /*purple*/ !important 561 } 562 563 .darktheme .jsstringcolor { 564 color: #88c999 /*green*/ !important 565 } 566 567 .darktheme .jsnumbercolor { 568 color: #80b6ff /*blue*/ !important 569 } 570 571 .darktheme .jspropertycolor { 572 color: white !important 573 } 574 575 .darktheme .javacolor { 576 color: white !important 577 } 578 579 .darktheme .javakeywordcolor { 580 color: #88c999 /*green*/ !important 581 } 582 583 .darktheme .javastringcolor { 584 color: #88c999 /*green*/ !important 585 } 586 587 .darktheme .javanumbercolor { 588 color: #88c999 /*green*/ !important 589 } 590 591 .darktheme .javapropertycolor { 592 color: white !important 593 } 594 595 .darktheme .kotlincolor { 596 color: white !important 597 } 598 599 .darktheme .kotlinkeywordcolor { 600 color: #88c999 /*green*/ !important 601 } 602 603 .darktheme .kotlinstringcolor { 604 color: #88c999 /*green*/ !important 605 } 606 607 .darktheme .kotlinnumbercolor { 608 color: #88c999 /*green*/ !important 609 } 610 611 .darktheme .kotlinpropertycolor { 612 color: white !important 613 } 614 615 .darktheme .phptagcolor { 616 color: #999 !important 617 } 618 619 .darktheme .phpcolor { 620 color: white !important 621 } 622 623 .darktheme .phpkeywordcolor { 624 color: #ff9999 /*red*/ !important 625 } 626 627 .darktheme .phpglobalcolor { 628 color: white !important 629 } 630 631 .darktheme .phpstringcolor { 632 color: #88c999 /*green*/ !important 633 } 634 635 .darktheme .phpnumbercolor { 636 color: #88c999 /*green*/ !important 637 } 638 639 .darktheme .pythoncolor { 640 color: white !important 641 } 642 643 .darktheme .pythonkeywordcolor { 644 color: #ff9999 /*red*/ !important 645 } 646 647 .darktheme .pythonstringcolor { 648 color: #88c999 /*green*/ !important 649 } 650 651 .darktheme .pythonnumbercolor { 652 color: #88c999 /*green*/ !important 653 } 654 655 .darktheme .angularstatementcolor { 656 color: #ff9999 /*red*/ !important 657 } 658 659 .darktheme .sqlcolor { 660 color: white !important 661 } 662 663 .darktheme .sqlkeywordcolor { 664 color: #80b6ff /*blue*/ !important 665 } 666
667 .darktheme .sqlstringcolor { 668 color: #88c999 /*green*/ !important 669 } 670 671 .darktheme .sqlnumbercolor { 672 color: 673 } 674 675 .w3-hover-greener:hover { 676 background-color: #333333 677 } 678 679 @media screen and (min-width:769px) { 680 .w3-sidebar.w3-collapse { 681 display: block !important; 682 } 683 } 684 685 @media screen and (min-width:769px) { 686 #myAccordion, .hidesm { 687 display: none !important; 688 } 689 } 690 691 @media screen and (min-width:769px) { 692 .w3-main { 693 margin-left: 230px !important; 694 } 695 696 .w3-bar-block .w3-button { 697 padding: 0; 698 } 699 } 700 701 @media screen and (max-width:768px) { 702 .w3-sidebar.w3-collapse, .barex, .navex { 703 display: none !important; 704 } 705 706 .w3-bar-block .w3-bar-item { 707 text-align: center !important; 708 padding: 2px 0; 709 } 710 711 h1, .w3-jumbo { 712 font-size: 60px !important; 713 } 714 } 715 716 @media screen and (max-width:545px) { 717 .certoverlay { 718 padding: 10px; 719 height: 100%; 720 } 721 722 .certoverlay h3 { 723 font-size: 15px; 724 } 725 } 726 727 @media screen and (max-width:380px) { 728 .getcert { 729 position: absolute; 730 text-align: center; 731 left: 50%; 732 bottom: 50%; 733 font-size: 13px; 734 } 735 } 736 737 @media only screen and (max-device-width: 1366px) { 738 .w3-hide-device { 739 display: none; 740 } 741 } 742 743 @media screen and (max-width:1080px) { 744 #cert_navbtn { 745 display: none; 746 } 747 } 748 </style> 749 <!--[if lt IE 9]> 750
750<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
750 751
751<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
751 752 <![endif]--> 753 <!-- begin cmp --> 754 <style> 755 #snigel-cmp-framework .sn-b-def.sn-blue { 756 color: #ffffff !important; 757 background-color: #1E1E1E !important; 758 border-color: #1E1E1E !important; 759 } 760 761 #snigel-cmp-framework .sn-b-def { 762 border-color: #1E1E1E !important; 763 color: #1E1E1E !important; 764 } 765 766 #snigel-cmp-framework .sn-selector ul li { 767 color: #1E1E1E !important 768 } 769 770 #snigel-cmp-framework .sn-selector ul li:after { 771 background-color: #1E1E1E !important; 772 } 773 774 #snigel-cmp-framework .sn-footer-tab .sn-privacy a { 775 color: #1E1E1E !important; 776 } 777 778 #snigel-cmp-framework .sn-arrow:after, #snigel-cmp-framework .sn-arrow:before { 779 background-color: #1E1E1E !important; 780 } 781 782 #snigel-cmp-framework .sn-switch input:checked + span::before { 783 background-color: #1E1E1E !important; 784 } 785 786 #snigel-cmp-framework h1 { 787 height: 75px; 788 } 789 790 #adconsent-usp-link { 791 border: 1px solid #1E1E1E !important; 792 color: #1E1E1E !important; 793 } 794 795 #adconsent-usp-banner-optout input:checked + .adconsent-usp-slider { 796 background-color: #1E1E1E !important; 797 } 798 799 #adconsent-usp-banner-btn { 800 color: #ffffff; 801 border: solid 1px #1E1E1E !important; 802 background-color: #1E1E1E !important; 803 } 804 </style> 805
805<script> 806 function Log_donate_button_click() { 807 } 808 function insta_follow_us_click() { 809 try { 810 var appWindow = window.open("instagram://user?username=w3school_com", "_blank"); 811 setTimeout(function () { 812 if (appWindow) { 813 appWindow.location = "https://www.instagram.com/invites/contact/?i=1ol9kza1ezbws&utm_content=k3b98vr"; 814 } 815 }, 1000); 816 } catch (e) { 817 } 818 } 819 </script>
819 820</head> 821<body style="position:relative;min-height:100%;"> 822
822<script type="module"> 823 // Import the functions you need from the SDKs you need 824 import { initializeApp } from "https://www.gstatic.com/firebasejs/11.9.0/firebase-app.js"; 825 import { getAnalytics } from "https://www.gstatic.com/firebasejs/11.9.0/firebase-analytics.js"; 826 // TODO: Add SDKs for Firebase products that you want to use 827 // https://firebase.google.com/docs/web/setup#available-libraries 828 // Your web app's Firebase configuration 829 // For Firebase JS SDK v7.20.0 and later, measurementId is optional 830 const firebaseConfig = { 831 apiKey: "AIzaSyAE1HA3eQQ_jrB6Bgm_Mx3Pd9ok8Obk1j0", 832 authDomain: "w3-web.firebaseapp.com", 833 projectId: "w3-web", 834 storageBucket: "w3-web.firebasestorage.app", 835 messagingSenderId: "503613309824", 836 appId: "1:503613309824:web:4b0ff64e54913343ddf765", 837 measurementId: "G-78N273LCMH" 838 }; 839 // Initialize Firebase 840 const app = initializeApp(firebaseConfig); 841 const analytics = getAnalytics(app); 842 </script>
842 843 <div class='w3-container top' style="padding-top:20px;"> 844 <a class='w3schools-logo notranslate' style="position:absolute;" href='index.html'>schools</a> 845 <div id="loginactioncontainer" class='w3-right' style='width:80px;height:50px;'> 846 <div id="mypagediv"> </div> 847 <a id="a_follow_us_on_instagram" onclick="insta_follow_us_click();" style="background:#f1f1f1;"><img src="PayPal/images/follow_us_on_nstagram.png" style="width: 130px; margin-left: -5px;margin-left: -30px;"></a> 848 </div> 849 <div id="theworldsgreatest" class='w3-right w3-hide-medium w3-hide-small w3-wide toptext' style="line-height: 50px;margin-right:20px;font-family:'Segoe UI',Arial,sans-serif"> 850 </div> 851 </div> 852 <div style='display:none;position:absolute;z-index:6;right:60px;height:57px;padding-top:12px;padding-right:20px;background-color:#1E1E1E;' id='googleSearch'><div class='gcse-search'></div></div> 853 <div style='display:none;position:absolute;z-index:5;right:120px;height:57px;background-color:#1E1E1E;text-align:right;padding-top:15px;' id='google_translate_element'></div> 854 <div class="w3-bar w3-theme w3-card-2 w3-wide notranslate"> 855 <a class="w3-bar-item w3-button w3-hover-white w3-padding-16 hidesm" href="javascript:void(0)" onclick="w3_open()"><i class='fa'></i></a> 856 <a class="w3-bar-item w3-button barex w3-hover-white w3-padding-16" href="javascript:void(0)" onclick="w3_open_nav('tutorials')" id="navbtn_tutorials">TUTORIALS <i class='fa fa-caret-down'></i><i class='fa fa-caret-up' style="display:none"></i></a> 857 <a class="w3-bar-item w3-button barex w3-hover-white w3-padding-16" href="javascript:void(0)" onclick="w3_open_nav('references')" id="navbtn_references">REFERENCES <i class='fa fa-caret-down'></i><i class='fa fa-caret-up' style="display:none"></i></a> 858 <a class="w3-bar-item w3-button barex w3-hover-white w3-padding-16" href="javascript:void(0)" onclick="w3_open_nav('examples')" id="navbtn_examples">EXAMPLES <i class='fa fa-caret-down'></i><i class='fa fa-caret-up' style="display:none"></i></a> 859 <div class="w3-right"> 860 <!--<a class="w3-bar-item w3-button w3-hover-white w3-padding-16 w3-right" href="javascript:void(0)" onclick="open_search(this)" title='Search W3Schools'><i class='fa'></i></a>--> 861 <a class="w3-bar-item w3-button w3-hover-white w3-padding-16 w3-right" href="javascript:void(0)" onclick="open_translate(this)" title='Translate W3Schools'><i class='fa'></i></a> 862 <a class="w3-bar-item w3-button w3-hover-white w3-padding-16 w3-right" href="javascript:void(0)" onclick="changecodetheme(this)" title='Toggle Dark Code'><i class='fa'></i></a> 863 </div> 864 </div> 865 <nav class="w3-sidebar w3-collapse w3-white w3-card-2" id="mySidenav"> 866 <div class="w3-bar-block"> 867 <div class="w3-container"> 868 <h4 class="w3-margin-top">HTML and CSS</h4> 869 </div> 870 <a class="w3-bar-item w3-button" href="html/default.html">Learn HTML</a> 871 <a class="w3-bar-item w3-button" href="css/default.html">Learn CSS</a> 872 <a class="w3-bar-item w3-button" href="bootstrap/bootstrap_ver.html">Learn Bootstrap</a> 873 <a class="w3-bar-item w3-button" href="w3css/default.html">Learn W3.CSS</a> 874 <a class="w3-bar-item w3-button" href="colors/default.html">Learn Colors</a> 875 <a class="w3-bar-item w3-button" href="icons/default.html">Learn Icons</a> 876 <a class="w3-bar-item w3-button" href="graphics/default.html">Learn Graphics</a> 877 <a class="w3-bar-item w3-button" href="howto/default.html">Learn How To</a> 878 <a class="w3-bar-item w3-button" href="sass/default.html">Learn Sass</a> 879 <div class="w3-container"> 880 <h4 class="w3-margin-top">JavaScript</h4> 881 </div> 882 <a class="w3-bar-item w3-button" href="js/default.html">Learn JavaScript</a> 883 <a class="w3-bar-item w3-button" href="jquery/default.html">Learn jQuery</a> 884 <a class="w3-bar-item w3-button" href="react/default.html">Learn React</a> 885 <a class="w3-bar-item w3-button" href="angular/default.html">Learn AngularJS</a> 886 <a class="w3-bar-item w3-button" href="js/js_json_intro.html">Learn JSON</a> 887 <a class="w3-bar-item w3-button" href="js/js_ajax_intro.html">Learn AJAX</a> 888 <a class="w3-bar-item w3-button" href="appml/default.html">Learn AppML</a> 889 <a class="w3-bar-item w3-button" href="w3js/default.html">Learn W3.JS</a> 890 <div class="w3-container"> 891 <h4 class="w3-margin-top">Server Side</h4> 892 </div> 893 <a class="w3-bar-item w3-button" href="sql/default.html">Learn SQL</a> 894 <a class="w3-bar-item w3-button" href="php/default.html">Learn PHP</a> 895 <a class="w3-bar-item w3-button" href='asp/default.html'>Learn ASP</a> 896 <a class="w3-bar-item w3-button" href='nodejs/default.html'>Learn Node.js</a> 897 <a class="w3-bar-item w3-button" href='nodejs/nodejs_raspberrypi.html'>Learn Raspberry Pi</a> 898 <div class="w3-container"> 899 <h4 class="w3-margin-top">Programming</h4> 900 </div> 901 <a class="w3-bar-item w3-button" href="python/default.html">Learn Python</a> 902 <a class="w3-bar-item w3-button" href="java/default.html">Learn Java</a> 903 <a class="w3-bar-item w3-button" href="cpp/default.html">Learn C++</a> 904 <a class="w3-bar-item w3-button" href="cs/default.html">Learn C#</a> 905 <a class="w3-bar-item w3-button" href="python/python_ml_getting_started.html">Learn Machine Learning</a> 906 <div class="w3-container"> 907 <h4 class="w3-margin-top">Web Building</h4> 908 </div> 909 <a class="w3-bar-item w3-button" href="w3css/w3css_templates.html">Web Templates</a> 910 <a class="w3-bar-item w3-button" href="browsers/default.html">Web Statistics</a> 911 <a class="w3-bar-item w3-button" href='tryit/default.html'>Web Editor</a> 912 <a class="w3-bar-item w3-button" href="whatis/default.html">Web Development</a> 913 <a class="w3-bar-item w3-button" href="typingspeed/default.html">Test Your Typing Speed</a> 914 <div class="w3-container"> 915 <h4 class="w3-margin-top">XML Tutorials</h4> 916 </div> 917 <a class="w3-bar-item w3-button" href="xml/default.html">Learn XML</a> 918 <a class="w3-bar-item w3-button" href='xml/ajax_intro.html'>Learn XML AJAX</a> 919 <a class="w3-bar-item w3-button" href="xml/dom_intro.html">Learn XML DOM</a> 920 <a class="w3-bar-item w3-button" href='xml/xml_dtd_intro.html'>Learn XML DTD</a> 921 <a class="w3-bar-item w3-button" href='xml/schema_intro.html'>Learn XML Schema</a> 922 <a class="w3-bar-item w3-button" href="xml/xsl_intro.html">Learn XSLT</a> 923 <a class="w3-bar-item w3-button" href='xml/xpath_intro.html'>Learn XPath</a> 924 <a class="w3-bar-item w3-button" href='xml/xquery_intro.html'>Learn XQuery</a> 925 <div class="w3-container"> 926 <h4 class="w3-margin-top">References</h4> 927 </div> 928 <a class="w3-bar-item w3-button" href='tags/default.html'>HTML Reference</a> 929 <a class="w3-bar-item w3-button" href='cssref/default.html'>CSS Reference</a> 930 <a class="w3-bar-item w3-button" href='jsref/default.html'>JS Reference</a> 931 <a class="w3-bar-item w3-button" href='sql/sql_ref_keywords.html'>SQL Reference</a> 932 <a class="w3-bar-item w3-button" href='php/php_ref_overview.html'>PHP Reference</a> 933 <a class="w3-bar-item w3-button" href='jquery/jquery_ref_overview.html'>jQuery Reference</a> 934 <a class="w3-bar-item w3-button" href='python/python_reference.html'>Python Reference</a> 935 <a class="w3-bar-item w3-button" href='bootstrap/bootstrap_ref_all_classes.html'>Bootstrap 3 Reference</a> 936 <a class="w3-bar-item w3-button" href='bootstrap4/bootstrap_ref_all_classes.html'>Bootstrap 4 Reference</a> 937 <a class="w3-bar-item w3-button" href='w3css/w3css_references.html'>W3.CSS Reference</a> 938 <a class="w3-bar-item w3-button" href='java/java_ref_keywords.html'>Java Reference</a> 939 <a class="w3-bar-item w3-button" href="angular/angular_ref_directives.html">Angular Reference</a> 940 <a class="w3-bar-item w3-button" href='sass/sass_functions_string.html'>Sass Reference</a> 941 <a class="w3-bar-item w3-button" href='charsets/default.html'>UTF-8 Reference</a> 942 </div> 943 </nav> 944 <div id='myAccordion' class="w3-card-2 w3-light-grey w3-center w3-hide-large" style="display:none;cursor:default"> 945 <a href="javascript:void(0)" onclick="w3_close()" class="w3-button w3-xlarge w3-right">×</a><br> 946 <div class="w3-container w3-padding-32"> 947 <a class="w3-button w3-block w3-large w3-wide" onclick="open_xs_menu('tutorials');" href="javascript:void(0);">TUTORIALS <i class='fa fa-caret-down'></i></a> 948 <div id="sectionxs_tutorials" class="w3-white w3-show"></div> 949 <a class="w3-button w3-block w3-large w3-wide" onclick="open_xs_menu('references')" href="javascript:void(0);">REFERENCES <i class='fa fa-caret-down'></i></a> 950 <div id="sectionxs_references" class="w3-white w3-show"></div> 951 <a class="w3-button w3-block w3-large w3-wide" onclick="open_xs_menu('examples')" href="javascript:void(0);">EXAMPLES <i class='fa fa-caret-down'></i></a> 952 <div id="sectionxs_examples" class="w3-white w3-show"></div> 953 </div> 954 </div> 955 <nav id="nav_tutorials" class="w3-light-grey w3-card-2 w3-hide-small navex">
956 <span onclick="w3_close_nav('tutorials')" class="w3-button w3-xlarge w3-display-topright barex">×</span><br> 957 <div class="w3-row-padding w3-bar-block"> 958 <div class="w3-col l3 m6"> 959 <h3 class="w3-margin-top">HTML and CSS</h3> 960 <a class="w3-bar-item w3-button" href="html/default.html">Learn HTML</a> 961 <a class="w3-bar-item w3-button" href="css/default.html">Learn CSS</a> 962 <a class="w3-bar-item w3-button" href="bootstrap/bootstrap_ver.html">Learn Bootstrap</a> 963 <a class="w3-bar-item w3-button" href="w3css/default.html">Learn W3.CSS</a> 964 <a class="w3-bar-item w3-button" href="colors/default.html">Learn Colors</a> 965 <a class="w3-bar-item w3-button" href="icons/default.html">Learn Icons</a> 966 <a class="w3-bar-item w3-button" href="graphics/default.html">Learn Graphics</a> 967 <a class="w3-bar-item w3-button" href='graphics/svg_intro.html'>Learn SVG</a> 968 <a class="w3-bar-item w3-button" href='graphics/canvas_intro.html'>Learn Canvas</a> 969 <a class="w3-bar-item w3-button" href="howto/default.html">Learn How To</a> 970 <a class="w3-bar-item w3-button" href="sass/default.html">Learn Sass</a> 971 <div class="w3-hide-large w3-hide-small"> 972 <h3 class="w3-margin-top">XML Tutorials</h3> 973 <a class="w3-bar-item w3-button" href="xml/default.html">Learn XML</a> 974 <a class="w3-bar-item w3-button" href='xml/ajax_intro.html'>Learn XML AJAX</a> 975 <a class="w3-bar-item w3-button" href="xml/dom_intro.html">Learn XML DOM</a> 976 <a class="w3-bar-item w3-button" href='xml/xml_dtd_intro.html'>Learn XML DTD</a> 977 <a class="w3-bar-item w3-button" href='xml/schema_intro.html'>Learn XML Schema</a> 978 <a class="w3-bar-item w3-button" href="xml/xsl_intro.html">Learn XSLT</a> 979 <a class="w3-bar-item w3-button" href='xml/xpath_intro.html'>Learn XPath</a> 980 <a class="w3-bar-item w3-button" href='xml/xquery_intro.html'>Learn XQuery</a> 981 </div> 982 </div> 983 <div class="w3-col l3 m6"> 984 <h3 class="w3-margin-top">JavaScript</h3> 985 <a class="w3-bar-item w3-button" href="js/default.html">Learn JavaScript</a> 986 <a class="w3-bar-item w3-button" href="jquery/default.html">Learn jQuery</a> 987 <a class="w3-bar-item w3-button" href="react/default.html">Learn React</a> 988 <a class="w3-bar-item w3-button" href="angular/default.html">Learn AngularJS</a> 989 <a class="w3-bar-item w3-button" href="js/js_json_intro.html">Learn JSON</a> 990 <a class="w3-bar-item w3-button" href="js/js_ajax_intro.html">Learn AJAX</a> 991 <a class="w3-bar-item w3-button" href="appml/default.html">Learn AppML</a> 992 <a class="w3-bar-item w3-button" href="w3js/default.html">Learn W3.JS</a> 993 <h3 class="w3-margin-top">Programming</h3> 994 <a class="w3-bar-item w3-button" href="python/default.html">Learn Python</a> 995 <a class="w3-bar-item w3-button" href="java/default.html">Learn Java</a> 996 <a class="w3-bar-item w3-button" href="cpp/default.html">Learn C++</a> 997 <a class="w3-bar-item w3-button" href="cs/default.html">Learn C#</a> 998 <a class="w3-bar-item w3-button" href="python/python_ml_getting_started.html">Learn Machine Learning</a> 999 </div> 1000 <div class="w3-col l3 m6"> 1001 <h3 class="w3-margin-top">Server Side</h3> 1002 <a class="w3-bar-item w3-button" href="sql/default.html">Learn SQL</a> 1003 <a class="w3-bar-item w3-button" href="php/default.html">Learn PHP</a> 1004 <a class="w3-bar-item w3-button" href='asp/default.html'>Learn ASP</a> 1005 <a class="w3-bar-item w3-button" href='nodejs/default.html'>Learn Node.js</a> 1006 <a class="w3-bar-item w3-button" href='nodejs/nodejs_raspberrypi.html'>Learn Raspberry Pi</a> 1007 <h3 class="w3-margin-top">Web Building</h3> 1008 <a class="w3-bar-item w3-button" href="w3css/w3css_templates.html">Web Templates</a> 1009 <a class="w3-bar-item w3-button" href="browsers/default.html">Web Statistics</a> 1010 <a class="w3-bar-item w3-button" href='tryit/default.html'>Web Editor</a> 1011 <a class="w3-bar-item w3-button" href="whatis/default.html">Web Development</a> 1012 <a class="w3-bar-item w3-button" href="typingspeed/default.html">Test Your Typing Speed</a> 1013 </div> 1014 <div class="w3-col l3 m6 w3-hide-medium"> 1015 <h3 class="w3-margin-top">XML Tutorials</h3> 1016 <a class="w3-bar-item w3-button" href="xml/default.html">Learn XML</a> 1017 <a class="w3-bar-item w3-button" href='xml/ajax_intro.html'>Learn XML AJAX</a> 1018 <a class="w3-bar-item w3-button" href="xml/dom_intro.html">Learn XML DOM</a> 1019 <a class="w3-bar-item w3-button" href='xml/xml_dtd_intro.html'>Learn XML DTD</a> 1020 <a class="w3-bar-item w3-button" href='xml/schema_intro.html'>Learn XML Schema</a> 1021 <a class="w3-bar-item w3-button" href="xml/xsl_intro.html">Learn XSLT</a> 1022 <a class="w3-bar-item w3-button" href='xml/xpath_intro.html'>Learn XPath</a> 1023 <a class="w3-bar-item w3-button" href='xml/xquery_intro.html'>Learn XQuery</a> 1024 </div> 1025 </div> 1026 <br class="hidesm"> 1027 </nav> 1028 <nav id="nav_references" class="w3-light-grey w3-card-2 w3-hide-small navex">
1029 <span onclick="w3_close_nav('references')" class="w3-button w3-xlarge w3-display-topright barex">×</span><br> 1030 <div class="w3-row-padding w3-bar-block"> 1031 <div class="w3-col l3 m6"> 1032 <h3 class="w3-margin-top">HTML</h3> 1033 <a class="w3-bar-item w3-button" href='tags/default.html'>HTML Tag Reference</a> 1034 <a class="w3-bar-item w3-button" href='tags/ref_html_browsersupport.html'>HTML Browser Support</a> 1035 <a class="w3-bar-item w3-button" href='tags/ref_eventattributes.html'>HTML Event Reference</a> 1036 <a class="w3-bar-item w3-button" href='colors/default.html'>HTML Color Reference</a> 1037 <a class="w3-bar-item w3-button" href='tags/ref_attributes.html'>HTML Attribute Reference</a> 1038 <a class="w3-bar-item w3-button" href='tags/ref_canvas.html'>HTML Canvas Reference</a> 1039 <a class="w3-bar-item w3-button" href='graphics/svg_reference.html'>HTML SVG Reference</a> 1040 <a class="w3-bar-item w3-button" href='graphics/google_maps_reference.html'>Google Maps Reference</a> 1041 <h3 class="w3-margin-top">CSS</h3> 1042 <a class="w3-bar-item w3-button" href='cssref/default.html'>CSS Reference</a> 1043 <a class="w3-bar-item w3-button" href='cssref/css3_browsersupport.html'>CSS Browser Support</a> 1044 <a class="w3-bar-item w3-button" href='cssref/css_selectors.html'>CSS Selector Reference</a> 1045 <a class="w3-bar-item w3-button" href='bootstrap/bootstrap_ref_all_classes.html'>Bootstrap 3 Reference</a> 1046 <a class="w3-bar-item w3-button" href='bootstrap4/bootstrap_ref_all_classes.html'>Bootstrap 4 Reference</a> 1047 <a class="w3-bar-item w3-button" href='w3css/w3css_references.html'>W3.CSS Reference</a> 1048 <a class="w3-bar-item w3-button" href='icons/icons_reference.html'>Icon Reference</a> 1049 <a class="w3-bar-item w3-button" href='sass/sass_functions_string.html'>Sass Reference</a> 1050 </div> 1051 <div class="w3-col l3 m6"> 1052 <h3 class="w3-margin-top">JavaScript</h3> 1053 <a class="w3-bar-item w3-button" href='jsref/default.html'>JavaScript Reference</a> 1054 <a class="w3-bar-item w3-button" href='jsref/default.html'>HTML DOM Reference</a> 1055 <a class="w3-bar-item w3-button" href='jquery/jquery_ref_overview.html'>jQuery Reference</a> 1056 <a class="w3-bar-item w3-button" href='angular/angular_ref_directives.html'>AngularJS Reference</a> 1057 <a class="w3-bar-item w3-button" href="appml/appml_reference.html">AppML Reference</a> 1058 <a class="w3-bar-item w3-button" href="w3js/w3js_references.html">W3.JS Reference</a> 1059 <h3 class="w3-margin-top">Programming</h3> 1060 <a class="w3-bar-item w3-button" href='python/python_reference.html'>Python Reference</a> 1061 <a class="w3-bar-item w3-button" href='java/java_ref_keywords.html'>Java Reference</a> 1062 </div> 1063 <div class="w3-col l3 m6"> 1064 <h3 class="w3-margin-top">Server Side</h3> 1065 <a class="w3-bar-item w3-button" href='sql/sql_ref_keywords.html'>SQL Reference</a> 1066 <a class="w3-bar-item w3-button" href='php/php_ref_overview.html'>PHP Reference</a> 1067 <a class="w3-bar-item w3-button" href='asp/asp_ref_response.html'>ASP Reference</a> 1068 <h3 class="w3-margin-top">XML</h3> 1069 <a class="w3-bar-item w3-button" href='xml/dom_nodetype.html'>XML DOM Reference</a> 1070 <a class="w3-bar-item w3-button" href='xml/dom_http.html'>XML Http Reference</a> 1071 <a class="w3-bar-item w3-button" href='xml/xsl_elementref.html'>XSLT Reference</a> 1072 <a class="w3-bar-item w3-button" href='xml/schema_elements_ref.html'>XML Schema Reference</a> 1073 </div> 1074 <div class="w3-col l3 m6"> 1075 <h3 class="w3-margin-top">Character Sets</h3> 1076 <a class="w3-bar-item w3-button" href='charsets/default.html'>HTML Character Sets</a> 1077 <a class="w3-bar-item w3-button" href='charsets/ref_html_ascii.html'>HTML ASCII</a> 1078 <a class="w3-bar-item w3-button" href='charsets/ref_html_ansi.html'>HTML ANSI</a> 1079 <a class="w3-bar-item w3-button" href='charsets/ref_html_ansi.html'>HTML Windows-1252</a> 1080 <a class="w3-bar-item w3-button" href='charsets/ref_html_8859.html'>HTML ISO-8859-1</a> 1081 <a class="w3-bar-item w3-button" href='charsets/ref_html_symbols.html'>HTML Symbols</a> 1082 <a class="w3-bar-item w3-button" href='charsets/ref_html_utf8.html'>HTML UTF-8</a> 1083 </div> 1084 </div> 1085 <br class="hidesm"> 1086 </nav> 1087 <nav id="nav_examples" class="w3-light-grey w3-card-2 w3-hide-small navex">
1088 <span onclick="w3_close_nav('examples')" class="w3-button w3-xlarge w3-display-topright barex">×</span><br> 1089 <div class="w3-row-padding w3-bar-block"> 1090 <div class="w3-col l3 m6"> 1091 <h3 class="w3-margin-top">HTML and CSS</h3> 1092 <a class="w3-bar-item w3-button" href='html/html_examples.html'>HTML Examples</a> 1093 <a class="w3-bar-item w3-button" href='css/css_examples.html'>CSS Examples</a> 1094 <a class="w3-bar-item w3-button" href='w3css/w3css_examples.html'>W3.CSS Examples</a> 1095 <a class="w3-bar-item w3-button" href='bootstrap/bootstrap_examples.html'>Bootstrap Examples</a> 1096 <a class="w3-bar-item w3-button" href='howto/default.html'>How To Examples</a> 1097 <a class="w3-bar-item w3-button" href='graphics/svg_examples.html'>SVG Examples</a> 1098 <a class="w3-bar-item w3-button" href='w3css/w3css_templates.html'>Web Templates</a> 1099 </div> 1100 <div class="w3-col l3 m6"> 1101 <h3 class="w3-margin-top">JavaScript</h3> 1102 <a class="w3-bar-item w3-button" href="js/js_examples.html" target="_top">JavaScript Examples</a> 1103 <a class="w3-bar-item w3-button" href="js/js_dom_examples.html" target="_top">HTML DOM Examples</a> 1104 <a class="w3-bar-item w3-button" href="jquery/jquery_examples.html" target="_top">jQuery Examples</a> 1105 <a class="w3-bar-item w3-button" href="angular/angular_examples.html" target="_top">AngularJS Examples</a> 1106 <a class="w3-bar-item w3-button" href="js/js_ajax_examples.html" target="_top">AJAX Examples</a> 1107 <a class="w3-bar-item w3-button" href="w3js/w3js_examples.html" target="_top">W3.JS Examples</a> 1108 <h3 class="w3-margin-top">Programming</h3> 1109 <a class="w3-bar-item w3-button" href="python/python_examples.html" target="_top">Python Examples</a> 1110 <a class="w3-bar-item w3-button" href="java/java_examples.html" target="_top">Java Examples</a> 1111 <a class="w3-bar-item w3-button" href="cpp/cpp_examples.html" target="_top">C++ Examples</a> 1112 <a class="w3-bar-item w3-button" href="cs/cs_examples.html" target="_top">C# Examples</a> 1113 </div> 1114 <div class="w3-col l3 m6"> 1115 <h3 class="w3-margin-top">Server Side</h3> 1116 <a class="w3-bar-item w3-button" href="sql/sql_examples.html" target="_top">SQL Examples</a> 1117 <a class="w3-bar-item w3-button" href="php/php_examples.html" target="_top">PHP Examples</a> 1118 <a class="w3-bar-item w3-button" href="asp/asp_examples.html" target="_top">ASP Examples</a> 1119 <h3 class="w3-margin-top">XML</h3> 1120 <a class="w3-bar-item w3-button" href="xml/xml_examples.html" target="_top">XML Examples</a> 1121 <a class="w3-bar-item w3-button" href="xml/xsl_examples.html" target="_top">XSLT Examples</a> 1122 <a class="w3-bar-item w3-button" href="xml/xpath_examples.html" target="_top">XPath Examples</a> 1123 <a class="w3-bar-item w3-button" href="xml/schema_example.html" target="_top">XML Schema Examples</a> 1124 <a class="w3-bar-item w3-button" href="xml/ajax_examples.html" target="_top">AJAX Examples</a> 1125 <a class="w3-bar-item w3-button" href="graphics/svg_examples.html" target="_top">SVG Examples</a> 1126 </div> 1127 </div> 1128 <br class="hidesm"> 1129 </nav> 1130 <nav id="nav_exercises" class="w3-light-grey w3-card-2 w3-hide-small w3-hide-medium navex"> 1131 <br class="hidesm"> 1132 </nav> 1133 <nav id='nav_login' class='w3-light-grey w3-bar-block w3-card-2' style="display:none"> 1134 <span onclick='w3_close_nav("login")' class='w3-button w3-xlarge w3-right w3-padding' style="position:absolute;right:0;font-weight:bold;">×</span> 1135 <div class="loginmodaldiv" style="padding:48px 16px 1px 16px;text-align:center;"> 1136 <h2>LOG IN</h2> 1137 <div style="font-size:15px"><a href="../mypage.w3schools.com/mypage/index.html">Why Log In?</a></div> 1138 <div class="loginmodalform"> 1139 <form id="loginform" name="loginform" autocomplete="off" method="post"> 1140 <div><label>Username</label></div> 1141 <div><input type="email" name="n" placeholder="Enter your e-mail address" onfocus="login_inputGetsFocus(this)"></div> 1142 <br> 1143 <div><label>Password</label></div> 1144 <div><input type="password" name="p" placeholder="Enter Your Password" onfocus="login_inputGetsFocus(this)"></div> 1145 <br> 1146 <div id="loginerrordiv" style="display:none" class="w3-text-red"></div> 1147 <div class="login_submit_container"><button id="login_submit_button" type="submit" onclick="login_user(event)">LOG IN</button></div> 1148 <div style="overflow:auto;margin-top:10px;font-size:15px;"> 1149 <div class="login_newusertext">New User? <a href="../mypage.w3schools.com/mypage/login8236.html?logintyp=1" target="_blank">Sign Up For Free!</a></div> 1150 <div class="login_forgotpasswordtext"><a href="../mypage.w3schools.com/mypage/forgot_password.html">Forgot password?</a></div> 1151 </div> 1152 </form> 1153 </div> 1154 </div> 1155 <br> 1156 </nav> 1157 <!-- MAIN --> 1158 <div class="w3-main" id="main"> 1159 <!-- === AD 1: ABOVE-THE-FOLD (PRIME PLACEMENT) === --> 1160 <div style="text-align:center;padding:8px 0;background:#f5f5f5;margin-bottom:20px;"> 1161 <!-- w3ad24 --> 1162 <ins class="adsbygoogle"
1163 style="display:block" 1164 data-ad-client="ca-pub-3064682230209163" 1165 data-ad-slot="2749169060" 1166 data-ad-format="auto" 1167 data-full-width-responsive="true"></ins> 1168
1168<script> 1169 (adsbygoogle = window.adsbygoogle || []).push({}); 1170 </script>
1170 1171 </div> 1172 <!-- HomePage --> 1173 <div class="w3-row w3-margin-bottom"> 1174 <div class="w3-col l6 w3-center" style="padding:3%"> 1175 <h1>HTML</h1> 1176 <p class="w3-xlarge w3-text-dark-grey">The language for building web pages</p> 1177 <a href="html/default.html" class="w3-button w3-dark-grey">LEARN HTML</a> 1178 <a href="tags/default.html" class="w3-button w3-dark-grey">HTML REFERENCE</a> 1179 </div> 1180 <div class="w3-col l6" style="padding:3%"> 1181 <div class="w3-hide-small w3-light-grey w3-card-2" style="padding:16px;"> 1182 <h3>HTML Example:</h3> 1183 <div class="w3-code htmlHigh notranslate w3-border-green"> 1184 <!DOCTYPE html><br> 1185 <html><br> 1186 <title>HTML Tutorial</title><br> 1187 <body><br><br> 1188 <h1>This is a heading</h1><br> 1189 <p>This is a paragraph.</p><br><br> 1190 </body><br> 1191 </html> 1192 </div> 1193 <a href="html/tryitfb35.html?filename=tryhtml_default" target="_blank" class="w3-button w3-theme w3-hover-green w3-hover-shadow">Try it Yourself » </a> 1194 </div> 1195 </div> 1196 </div> 1197 <div class="w3-row w3-light-grey w3-hide-medium w3-hide-small"> 1198 <div class="w3-col l6" style="padding-top:40px;padding:3%;"> 1199 <h3>CSS Example:</h3> 1200 <div class="w3-code cssHigh notranslate w3-card-2 w3-border-green"> 1201 body {<br> 1202 background-color: lightblue;<br>}<br><br> 1203 h1 {<br> 1204 color: white;<br> 1205 text-align: center;<br>}<br><br> 1206 p {<br> 1207 font-family: verdana;<br> 1208 font-size: 20px;<br>} 1209 </div> 1210 <a href="css/tryit438d.html?filename=trycss_default" target="_blank" class="w3-button w3-theme w3-hover-green w3-hover-shadow">Try it Yourself » </a> 1211 </div> 1212 <div class="w3-col l6 w3-center" style="padding:3%"> 1213 <h1>CSS</h1> 1214 <p class="w3-xlarge">The language for styling web pages</p> 1215 <a href="css/default.html" class="w3-button w3-dark-grey">LEARN CSS</a> 1216 <a href="cssref/default.html" class="w3-button w3-dark-grey">CSS REFERENCE</a> 1217 </div> 1218 </div> 1219 <div class="w3-row w3-light-grey w3-hide-large" style="padding-bottom:30px"> 1220 <div class="w3-col l6 w3-center" style="padding:3%"> 1221 <h1>CSS</h1> 1222 <p class="w3-xlarge">The language for styling web pages</p> 1223 <a href="css/default.html" class="w3-button w3-dark-grey">LEARN CSS</a> 1224 <a href="cssref/default.html" class="w3-button w3-dark-grey">CSS REFERENCE</a> 1225 </div> 1226 <div class="w3-col l6 w3-hide-small" style="padding-top:40px;padding:3%;"> 1227 <h3>CSS Example:</h3> 1228 <div class="w3-code cssHigh notranslate w3-card-2 w3-border-green"> 1229 body {<br> 1230 background-color: lightblue;<br>}<br><br> 1231 h1 {<br> 1232 color: white;<br> 1233 text-align: center;<br>}<br><br> 1234 p {<br> 1235 font-family: verdana;<br> 1236 font-size: 20px;<br>} 1237 </div> 1238 <a href="css/tryit438d.html?filename=trycss_default" target="_blank" class="w3-button w3-theme w3-hover-green w3-hover-shadow">Try it Yourself » </a> 1239 </div> 1240 </div> 1241 <!-- === AD 2: MID-CONTENT (HIGH ENGAGEMENT) === --> 1242 <div style="text-align:center;padding:8px 0;background:#f5f5f5;margin:20px 0;"> 1243 <!-- w3ad25 --> 1244 <ins class="adsbygoogle"
1245 style="display:block" 1246 data-ad-client="ca-pub-3064682230209163" 1247 data-ad-slot="1675129655" 1248 data-ad-format="auto" 1249 data-full-width-responsive="true"></ins> 1250
1250<script> 1251 (adsbygoogle = window.adsbygoogle || []).push({}); 1252 </script>
1252 1253 </div> 1254 <div class="w3-row"> 1255 <div class="w3-col l6 w3-center" style="padding:3%"> 1256 <h1 class="w3-jumbo">JavaScript</h1> 1257 <p class="w3-xlarge w3-text-dark-grey">The language for programming web pages</p> 1258 <a href="js/default.html" class="w3-button w3-dark-grey">LEARN JAVASCRIPT</a> 1259 <a href="jsref/default.html" class="w3-button w3-dark-grey">JAVASCRIPT REFERENCE</a> 1260 </div> 1261 <div class="w3-col l6" style="padding:3%"> 1262 <div class="w3-hide-small w3-card-2 w3-light-grey" style="padding:16px;"> 1263 <h3>JavaScript Example:</h3> 1264 <div class="w3-code notranslate w3-card-2 w3-border-green"> 1265 <div class="htmlHigh"> 1266 <button onclick="myFunction()">Click Me!</button><br><br> 1267 <script><br> 1268 function myFunction() {<br> 1269 var x = document.getElementById("demo");<br> 1270 x.style.fontSize = "25px"; <br> 1271 x.style.color = "red"; <br>}<br> 1272 </script> 1273 </div> 1274 </div> 1275 <a href="js/tryit8004.html?filename=tryjs_default" target="_blank" class="w3-button w3-theme w3-hover-green w3-hover-shadow">Try it Yourself » </a> 1276 </div> 1277 </div> 1278 </div> 1279 <div class="w3-row w3-light-grey w3-hide-medium w3-hide-small"> 1280 <div class="w3-col l6" style="padding-top:40px;padding:3%;padding-bottom:45px"> 1281 <h3>SQL Example:</h3> 1282 <div class="w3-code sqlHigh notranslate w3-card-2 w3-border-green" style="height:180px"> 1283 SELECT * FROM Customers<br> 1284 WHERE Country='Mexico'; 1285 </div> 1286 <a href="sql/trysql03b0.html?filename=trysql_select_where" target="_blank" class="w3-button w3-theme w3-hover-green w3-hover-shadow">Try it Yourself » </a> 1287 </div> 1288 <div class="w3-col l6 w3-center" style="padding:3%"> 1289 <h1>SQL</h1> 1290 <p class="w3-xlarge">A language for accessing databases</p> 1291 <a href="sql/default.html" class="w3-button w3-dark-grey">LEARN SQL</a> 1292 <a href="sql/sql_ref_keywords.html" class="w3-button w3-dark-grey">SQL REFERENCE</a> 1293 </div> 1294 </div> 1295 <div class="w3-row w3-light-grey w3-hide-large" style="padding-bottom:30px;margin-top:40px"> 1296 <div class="w3-col l6 w3-center" style="padding:3%"> 1297 <h1>SQL</h1> 1298 <p class="w3-xlarge">A language for accessing databases</p> 1299 <a href="sql/default.html" class="w3-button w3-dark-grey">LEARN SQL</a> 1300 <a href="sql/sql_ref_keywords.html" class="w3-button w3-dark-grey">SQL REFERENCE</a> 1301 </div> 1302 <div class="w3-col l6 w3-hide-small" style="padding-top:40px;padding:3%;"> 1303 <h3>SQL Example:</h3> 1304 <div class="w3-code sqlHigh notranslate w3-card-2 w3-border-green" style="height:100px"> 1305 SELECT * FROM Customers<br> 1306 WHERE Country='Mexico'; 1307 </div> 1308 <a href="sql/trysql03b0.html?filename=trysql_select_where" target="_blank" class="w3-button w3-theme w3-hover-green w3-hover-shadow">Try it Yourself » </a> 1309 </div> 1310 </div> 1311 <div class="w3-row w3-dark-grey w3-padding-32"> 1312 <div class="w3-col l6 w3-center" style="padding:2% 3%;"> 1313 <div class="w3-card-2 w3-white w3-padding" style="padding-bottom:24px!important"> 1314 <h2 class="w3-xxlarge">Python</h2> 1315 <div style="height:70px;"> 1316 <h4 class="w3-text-dark-grey">A programming language</h4> 1317 </div> 1318 <a href="python/default.html" class="w3-button w3-dark-grey">LEARN PYTHON</a> 1319 </div> 1320 </div> 1321 <div class="w3-col l6 w3-center" style="padding:2% 3%;"> 1322 <div class="w3-card-2 w3-white w3-padding" style="padding-bottom:24px!important"> 1323 <h2 class="w3-xxlarge">PHP</h2> 1324 <div style="height:70px;"> 1325 <h4 class="w3-text-dark-grey">A web server programming language</h4> 1326 </div> 1327 <a href="php/default.html" class="w3-button w3-dark-grey">LEARN PHP</a> 1328 </div> 1329 </div> 1330 </div> 1331 <!-- === AD 3: BETWEEN CONTENT SECTIONS === --> 1332 <div style="text-align:center;padding:8px 0;background:#f5f5f5;margin:20px 0;"> 1333 <!-- w3ad22 --> 1334 <ins class="adsbygoogle"
1335 style="display:block" 1336 data-ad-client="ca-pub-3064682230209163" 1337 data-ad-slot="3708793875" 1338 data-ad-format="auto" 1339 data-full-width-responsive="true"></ins> 1340
1340<script> 1341 (adsbygoogle = window.adsbygoogle || []).push({}); 1342 </script>
1342 1343 </div> 1344 <div class="w3-row w3-dark-grey w3-padding-32"> 1345 <div class="w3-col l6 w3-center" style="padding:2% 3%;"> 1346 <div class="w3-card-2 w3-white w3-padding" style="padding-bottom:24px!important"> 1347 <h2 class="w3-xxlarge">jQuery</h2> 1348 <div style="height:70px;"> 1349 <h4 class="w3-text-dark-grey">A JavaScript library for developing web pages</h4> 1350 </div> 1351 <a href="jquery/default.html" class="w3-button w3-dark-grey">LEARN JQUERY</a> 1352 </div> 1353 </div> 1354 <div class="w3-col l6 w3-center" style="padding:2% 3%;"> 1355 <div class="w3-card-2 w3-white w3-padding" style="padding-bottom:24px!important"> 1356 <h2 class="w3-xxlarge">Java</h2> 1357 <div style="height:70px;"> 1358 <h4 class="w3-text-dark-grey">A programming language</h4> 1359 </div> 1360 <a href="java/default.html" class="w3-button w3-dark-grey">LEARN JAVA</a> 1361 </div> 1362 </div> 1363 </div> 1364 <!-- === AD 5: MID CARD SECTION === --> 1365 <div style="text-align:center;padding:8px 0;background:#f5f5f5;margin:20px 0;"> 1366 <!-- w3ad16 --> 1367 <ins class="adsbygoogle" 1368 style="display:block" 1369 data-ad-client="ca-pub-3064682230209163" 1370 data-ad-slot="1795180044" 1371 data-ad-format="auto" 1372 data-full-width-responsive="true"></ins> 1373
1373<script> 1374 (adsbygoogle = window.adsbygoogle || []).push({}); 1375 </script>
1375 1376 </div> 1377 <div class="w3-row w3-dark-grey w3-padding-32"> 1378 <div class="w3-col l6 w3-center" style="padding:2% 3%;"> 1379 <div class="w3-card-2 w3-white w3-padding" style="padding-bottom:24px!important"> 1380 <h2 class="w3-xxlarge">C++</h2> 1381 <div style="height:70px;"> 1382 <h4 class="w3-text-dark-grey">A programming language</h4> 1383 </div> 1384 <a href="cpp/default.html" class="w3-button w3-dark-grey">LEARN C++</a> 1385 </div> 1386 </div> 1387 <div class="w3-col l6 w3-center" style="padding:2% 3%;"> 1388 <div class="w3-card-2 w3-white w3-padding" style="padding-bottom:24px!important"> 1389 <h2 class="w3-xxlarge">Node.js</h2> 1390 <div style="height:70px;"> 1391 <h4 class="w3-text-dark-grey">Node.js is an open source server environment.</h4> 1392 </div> 1393 <a href="nodejs/default.html" class="w3-button w3-dark-grey">LEARN NODE.JS</a> 1394 </div> 1395 </div> 1396 </div> 1397 <div class="w3-row w3-dark-grey w3-padding-32"> 1398 <div class="w3-col l6 w3-center" style="padding:2% 3%;"> 1399 <div class="w3-card-2 w3-white w3-padding" style="padding-bottom:24px!important"> 1400 <h2 class="w3-xxlarge">React</h2> 1401 <div style="height:70px;"> 1402 <h4 class="w3-text-dark-grey">React is a JavaScript library for building user interfaces.</h4> 1403 </div> 1404 <a href="react/default.html" class="w3-button w3-dark-grey">LEARN REACT </a> 1405 </div> 1406 </div> 1407 <div class="w3-col l6 w3-center" style="padding:2% 3%;"> 1408 <div class="w3-card-2 w3-white w3-padding" style="padding-bottom:24px!important"> 1409 <h2 class="w3-xxlarge">AngularJS </h2> 1410 <div style="height:70px;"> 1411 <h4 class="w3-text-dark-grey">AngularJS extends HTML with new attributes</h4> 1412 </div> 1413 <a href="angular/default.html" class="w3-button w3-dark-grey">LEARN ANGULARJS </a> 1414 </div> 1415 </div> 1416 </div> 1417 <div class="w3-row w3-dark-grey w3-padding-32"> 1418 <div class="w3-col l6 w3-center" style="padding:2% 3%;"> 1419 <div class="w3-card-2 w3-white w3-padding" style="padding-bottom:24px!important"> 1420 <h2 class="w3-xxlarge">Bootstrap</h2> 1421 <div style="height:70px;"> 1422 <h4 class="w3-text-dark-grey">Bootstrap is a free CSS framework</h4> 1423 </div> 1424 <a href="bootstrap/bootstrap_ver.html" class="w3-button w3-dark-grey">LEARN BOOTSTRAP</a> 1425 </div> 1426 </div> 1427 <div class="w3-col l6 w3-center" style="padding:2% 3%;"> 1428 <div class="w3-card-2 w3-white w3-padding" style="padding-bottom:24px!important"> 1429 <h2 class="w3-xxlarge">JSON</h2> 1430 <div style="height:70px;"> 1431 <h4 class="w3-text-dark-grey">JSON is a syntax for storing and exchanging data</h4> 1432 </div> 1433 <a href="js/js_json_intro.html" class="w3-button w3-dark-grey">LEARN JSON</a> 1434 </div> 1435 </div> 1436 </div> 1437 <!-- === AD 4: BOTTOM OF PAGE === --> 1438 <div style="text-align:center;padding:8px 0;background:#f5f5f5;margin:20px 0;"> 1439 <!-- w3ad15 --> 1440 <ins class="adsbygoogle" 1441 style="display:block" 1442 data-ad-client="ca-pub-3064682230209163" 1443 data-ad-slot="7648038883" 1444 data-ad-format="auto" 1445 data-full-width-responsive="true"></ins> 1446
1446<script> 1447 (adsbygoogle = window.adsbygoogle || []).push({}); 1448 </script>
1448 1449 </div> 1450 <!-- === AD 6: PRE-FOOTER (HIGH SCROLL DEPTH) === --> 1451 <div style="text-align:center;padding:8px 0;background:#f5f5f5;margin:20px 0;"> 1452 <!-- w3ad14 --> 1453 <ins class="adsbygoogle" 1454 style="display:block" 1455 data-ad-client="ca-pub-3064682230209163" 1456 data-ad-slot="7777503579" 1457 data-ad-format="auto" 1458 data-full-width-responsive="true"></ins> 1459
1459<script> 1460 (adsbygoogle = window.adsbygoogle || []).push({}); 1461 </script>
1461 1462 </div> 1463 <div class="w3-light-grey w3-center w3-padding-large w3-padding-32"> 1464 <h2 class="w3-xxlarge">Web Templates</h2> 1465 <h4 class="w3-text-dark-grey">Browse our selection of <strong>free</strong> responsive HTML Templates</h4> 1466 <div class="w3-content"> 1467 <a href="w3css/w3css_templates.html"><img src="w3css_templates.jpg" style="width:100%;margin:16px 0 20px 0" alt="W3.CSS Templates"></a> 1468 </div> 1469 <p><a href="w3css/w3css_templates.html" class="w3-button w3-dark-grey w3-padding-large w3-mobile">BROWSE TEMPLATES</a></p> 1470 </div> 1471 <br> 1472 <!-- END MAIN --> 1473 <br /> 1474 <br /> 1475 1476 <div class="w3-center w3-small w3-opacity"> 1477 <a href="./privacypolicy.html" class="text-info">Privacy Policy</a> | 1478 <a href="./cookie-policy.html" class="text-info">Cookie Policy</a> 1479 </div> 1480 <br /> 1481 <br /> 1482 </div> 1483 1484 1485
1485<script> 1486 function w3_open() { 1487 var x = document.getElementById("myAccordion"); 1488 if (x.style.display === 'none') { 1489 x.style.display = 'block'; 1490 } else { 1491 x.style.display = 'none'; 1492 } 1493 } 1494 function w3_close() { 1495 document.getElementById("myAccordion").style.display = "none"; 1496 } 1497 function open_xs_menu(x) { 1498 if (document.getElementById("sectionxs_" + x).innerHTML == "") { 1499 document.getElementById("sectionxs_" + x).innerHTML = document.getElementById("nav_" + x).innerHTML; 1500 } else { 1501 document.getElementById("sectionxs_" + x).innerHTML = ""; 1502 } 1503 } 1504 function w3_open_nav(x) { 1505 if (document.getElementById("nav_" + x).style.display == "block") { 1506 w3_close_nav(x); 1507 } else { 1508 w3_close_nav("tutorials"); 1509 w3_close_nav("references"); 1510 w3_close_nav("examples"); 1511 w3_close_nav("exercises"); 1512 document.getElementById("nav_" + x).style.display = "block"; 1513 if (document.getElementById("navbtn_" + x)) { 1514 document.getElementById("navbtn_" + x).getElementsByTagName("i")[0].style.display = "none"; 1515 document.getElementById("navbtn_" + x).getElementsByTagName("i")[1].style.display = "inline"; 1516 } 1517 if (x == "search") { 1518 if (document.getElementById("gsc-i-id1")) { document.getElementById("gsc-i-id1").focus(); } 1519 } 1520 } 1521 } 1522 function w3_close_all_nav() { 1523 w3_close_nav("tutorials"); 1524 w3_close_nav("references"); 1525 w3_close_nav("examples"); 1526 w3_close_nav("exercises"); 1527 w3_close(); 1528 } 1529 function w3_close_nav(x) { 1530 document.getElementById("nav_" + x).style.display = "none"; 1531 if (document.getElementById("navbtn_" + x)) { 1532 document.getElementById("navbtn_" + x).getElementsByTagName("i")[0].style.display = "inline"; 1533 document.getElementById("navbtn_" + x).getElementsByTagName("i")[1].style.display = "none"; 1534 } 1535 } 1536 function changecodetheme() { 1537 var cc = document.body.className; 1538 if (cc.indexOf("darktheme") > -1) { 1539 document.body.className = cc.replace("darktheme", ""); 1540 localStorage.setItem("preferredmode", "light"); 1541 } else { 1542 document.body.className += " darktheme"; 1543 localStorage.setItem("preferredmode", "dark"); 1544 } 1545 } 1546 function open_translate(elmnt) { 1547 var a = document.getElementById("google_translate_element"); 1548 if (a.style.display == "") { 1549 a.style.display = "none"; 1550 elmnt.innerHTML = "<i class='fa'></i>"; 1551 } else { 1552 a.style.display = ""; 1553 if (window.innerWidth > 830) { 1554 a.style.width = "20%"; 1555 } else { 1556 a.style.width = "60%"; 1557 } 1558 elmnt.innerHTML = "<span style='font-family:verdana;font-weight:bold;display:inline-block;width:21px;text-align:center;'>X</span>"; 1559 } 1560 } 1561 function open_search(elmnt) { 1562 var a = document.getElementById("googleSearch"); 1563 document.getElementById("navbtn_tutorials").style.visibility = "visible"; 1564 if (a.style.display == "") { 1565 a.style.display = "none"; 1566 elmnt.innerHTML = "<i class='fa'></i>"; 1567 } else { 1568 a.style.display = ""; 1569 if (window.innerWidth > 1000) { 1570 a.style.width = "40%"; 1571 } else if (window.innerWidth > 768) { 1572 document.getElementById("navbtn_tutorials").style.visibility = "hidden"; 1573 a.style.width = "80%"; 1574 } else { 1575 a.style.width = "80%"; 1576 } 1577 if (document.getElementById("gsc-i-id1")) { document.getElementById("gsc-i-id1").focus(); } 1578 elmnt.innerHTML = "<span style='font-family:verdana;font-weight:bold;display:inline-block;width:23px;text-align:center;'>X</span>"; 1579 } 1580 } 1581 function googleTranslateElementInit() { 1582 new google.translate.TranslateElement({ 1583 pageLanguage: 'en', 1584 autoDisplay: false, 1585 gaTrack: true, 1586 gaId: 'UA-142508205-4' 1587 }, 'google_translate_element'); 1588 } 1589 function clickFBLike() { 1590 document.getElementById("fblikeframe").style.display = 'block';
1591 document.getElementById("popupDIV").innerHTML = "<iframe src='/fblike.asp?r=" + Math.random() + "' frameborder='no' style='height:200px;width:250px;'></iframe><br><button onclick='hideFBLike()' class='w3-button w3-dark-grey w3-hover-black'>Close</button>"; 1592 } 1593 function hideFBLike() { 1594 document.getElementById("fblikeframe").style.display = 'none'; 1595 } 1596 if (window.addEventListener) { 1597 document.getElementById("main").addEventListener("click", w3_close_all_nav, true); 1598 document.getElementById("mySidenav").addEventListener("click", w3_close_all_nav, true); 1599 document.getElementById("main").addEventListener("wheel", w3_close_all_nav, true); 1600 document.getElementById("main").addEventListener("touchstart", w3_close_all_nav, true); 1601 } else if (window.attachEvent) { 1602 document.getElementById("main").attachEvent("onclick", w3_close_all_nav); 1603 document.getElementById("mySidenav").attachEvent("onclick", w3_close_all_nav); 1604 } 1605 </script>
1605 1606
1606<script src="lib/w3codecolor.js"></script>
1606 1607
1607<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
1607 1608
1608<script> 1609 function loginCircle(xx, yy, r, aD) { 1610 var aR = (aD - 90) * Math.PI / 180.0; 1611 return { 1612 x: xx + (r * Math.cos(aR)), 1613 y: yy + (r * Math.sin(aR)) 1614 }; 1615 } 1616 function loginDrawCircle(x, y, r, sa, ea) { 1617 var s = loginCircle(x, y, r, ea); 1618 var e = loginCircle(x, y, r, sa); 1619 var f = ea - sa <= 180 ? "0" : "1"; 1620 return ["M", s.x, s.y, "A", r, r, 0, f, 0, e.x, e.y].join(" "); 1621 } 1622 function login_user(event) { 1623 event.preventDefault(); 1624 var xhttp = new XMLHttpRequest(), a, b, f, f2, valid = 1; 1625 f = document.forms["loginform"]; 1626 a = f["n"]; 1627 b = f["p"]; 1628 if (a.value == "") { 1629 a.style.backgroundColor = "#ffcccc"; 1630 valid = 0; 1631 } 1632 if (b.value == "") { 1633 b.style.backgroundColor = "#ffcccc"; 1634 valid = 0; 1635 } 1636 if (valid == 0) { return false; } 1637 document.getElementById('login_submit_button').focus(); 1638 xhttp.onreadystatechange = function () { 1639 if (this.readyState == 4 && this.status == 200) { 1640 if (this.responseText == "OK") { 1641 a.value = ""; 1642 b.value = ""; 1643 w3_close_nav("login"); 1644 loadUser(); 1645 } else if (this.responseText == "OK2") { 1646 document.getElementById("loginerrordiv").innerHTML = "Your account has not been verified yet"; 1647 document.getElementById("loginerrordiv").style.display = "block"; 1648 } else if (this.responseText == "NOSUCHUSER") { 1649 a.style.backgroundColor = "#ffcccc"; 1650 b.style.backgroundColor = "#ffcccc"; 1651 document.getElementById("loginerrordiv").innerHTML = "Wrong Username or Password"; 1652 document.getElementById("loginerrordiv").style.display = "block"; 1653 } else { 1654 document.getElementById("loginerrordiv").innerHTML = "Ooops! Something went wrong..."; 1655 document.getElementById("loginerrordiv").style.display = "block"; 1656 } 1657 } 1658 }; 1659 xhttp.open("POST", "../mypage.w3schools.com/mypage/login_user.html", true); 1660 xhttp.withCredentials = true; 1661 xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 1662 } 1663 function login_inputGetsFocus(elmnt) { 1664 document.forms["loginform"]["n"].style.backgroundColor = "#fff"; 1665 document.forms["loginform"]["p"].style.backgroundColor = "#fff"; 1666 if (document.getElementById("loginerrordiv")) { 1667 document.getElementById("loginerrordiv").style.display = "none"; 1668 } 1669 } 1670 loadUser(); 1671 function loadUser() { 1672 var x, y, pos, foldername, filename, typ, pathname = window.location.pathname; 1673 var xhttp = new XMLHttpRequest(); 1674 xhttp.onreadystatechange = function () { 1675 if (this.readyState == 4 && this.status == 200) { 1676 x = this.responseText; 1677 if (x == "A") { 1678 console.log(x); 1679 activateElse(); 1680 } else if (x == "B") { 1681 console.log(x); 1682 activateMYPAGE(x, y); 1683 } else { 1684 activateElse(); 1685 console.log("Z"); 1686 } 1687 } 1688 }; 1689 xhttp.open("POST", "../mypage.w3schools.com/mypage/beta_for_default.html", true); 1690 xhttp.withCredentials = true; 1691 xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 1692 } 1693 function activateMYPAGE(cc, obj) { 1694 var x, degrees = 0, txt = "", txt2 = "", color1 = "rgba(76, 175, 80, 0.1)", color2 = "rgba(76, 175, 80, 1)"; 1695 var a = document.getElementById("w3loginbtn"); 1696 var b = document.getElementById("mypagediv"); 1697 if (a) a.style.display = "none"; 1698 if (b) { 1699 if (cc == "Q") {
1700 color1 = "rgba(44, 156, 202, 0.1)"; 1701 color2 = "rgba(44, 156, 202, 1)"; 1702 } 1703 b.style.display = "block"; 1704 txt += "<a href='../mypage.w3schools.com/mypage/index.html'>"; 1705 txt += "<img src='/images/mypagelogo32x32.png' alt='MYPAGE' style='position:absolute;top:18px;right:28px'>"; 1706 txt += '<svg style="position:absolute;top:0;right:0;height:70px;width:70px">'; 1707 txt += '<path id="mypage_circle1" fill="none" stroke="' + color1 + '" stroke-width="4"/>'; 1708 txt += '<path id="mypage_circle2" fill="none" stroke="' + color2 + '" stroke-width="4"/>'; 1709 txt += '</svg>'; 1710 txt += '</a>'; 1711 b.innerHTML = " " + txt; 1712 document.getElementById("mypage_circle1").setAttribute("d", loginDrawCircle(26, 35, 24, 0, 359.99)); 1713 document.getElementById("mypage_circle2").setAttribute("d", loginDrawCircle(26, 35, 24, 0, degrees)); 1714 } 1715 } 1716 function activateElse() { 1717 var a = document.getElementById("mypagediv"); 1718 var b = document.getElementById("w3loginbtn"); 1719 if (a) a.style.display = "none"; 1720 if (b) b.style.display = "inline"; 1721 } 1722 w3CodeColor(); 1723 ( 1724 function setThemeMode() { 1725 var x = localStorage.getItem("preferredmode"); 1726 if (x == "dark") { 1727 document.body.className += " darktheme"; 1728 } 1729 })(); 1730 </script>
vendor: 2 bytes, line 1730
1730
1731<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v4bc70e2c01a94c73b74392e4234840661791215815920" integrity="sha512-L0ha0OXavK/8okipN9F8BtP84dg9DUhPERbBXzwI6dgTA55d2+yweo3pn5CSFYs45/r8md2+xvUPtTdvTNRfjA==" data-cf-beacon='{"version":"2024.11.0","token":"6590074e607e41cebeb680f10ddfefc4","r":1,"spa":2}' crossorigin="anonymous"></script>
1731 1732</body> 1733</html> 1734
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.