PageSourceSearch

https://w3schoolsapp.com/index.html

html w3schoolsapp.com collected 2026-10-10 00:10:30 UTC 78,177 bytes, 1,734 lines download raw bytes

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'>&#xf0c9;</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'>&#xe802;</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'>&#xe801;</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'>&#xe80b;</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">&times;</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">&times;</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">&times;</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">&times;</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;">&times;</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                        &lt;!DOCTYPE html&gt;<br>
1185                        &lt;html&gt;<br>
1186                        &lt;title&gt;HTML Tutorial&lt;/title&gt;<br>
1187                        &lt;body&gt;<br><br>
1188                        &lt;h1&gt;This is a heading&lt;/h1&gt;<br>
1189                        &lt;p&gt;This is a paragraph.&lt;/p&gt;<br><br>
1190                        &lt;/body&gt;<br>
1191                        &lt;/html&gt;
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 &raquo; </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                    &nbsp; background-color: lightblue;<br>}<br><br>
1203                    h1 {<br>
1204                    &nbsp; color: white;<br>
1205                    &nbsp; text-align: center;<br>}<br><br>
1206                    p {<br>
1207                    &nbsp; font-family: verdana;<br>
1208                    &nbsp; 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 &raquo; </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                    &nbsp; background-color: lightblue;<br>}<br><br>
1231                    h1 {<br>
1232                    &nbsp; color: white;<br>
1233                    &nbsp; text-align: center;<br>}<br><br>
1234                    p {<br>
1235                    &nbsp; font-family: verdana;<br>
1236                    &nbsp; 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 &raquo; </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                            &lt;button onclick=&quot;myFunction()&quot;&gt;Click Me!&lt;/button&gt;<br><br>
1267                            &lt;script&gt;<br>
1268                            function myFunction() {<br>
1269                            &nbsp; var x = document.getElementById(&quot;demo&quot;);<br>
1270                            &nbsp; x.style.fontSize = &quot;25px&quot;; <br>
1271                            &nbsp; x.style.color = &quot;red&quot;; <br>}<br>
1272                            &lt;/script&gt;
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 &raquo; </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 &raquo; </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 &raquo; </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'>&#xe801;</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'>&#xe802;</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 = "&nbsp;" + 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.