1 00:00:00,000 --> 00:00:06,100 2 00:00:06,100 --> 00:00:08,790 >> DOUG LLOYD: So verbrachten wir about-- wenn mein Mathe ist richtig, 3 00:00:08,790 --> 00:00:11,900 und ich denke, suchen back-- Ich denke, Wir haben ungefähr 35 videos sprechen 4 00:00:11,900 --> 00:00:15,139 über verschiedene Aspekte der C, vielleicht ein wenig mehr, vielleicht etwas weniger. 5 00:00:15,139 --> 00:00:16,930 Und wir haben nicht decken alles in C, aber wir 6 00:00:16,930 --> 00:00:21,170 bedeckt einen großen Teil der Sprache, die überwiegende Mehrheit davon, 7 00:00:21,170 --> 00:00:22,882 Sicherheit für die häufigsten Anwendungen. 8 00:00:22,882 --> 00:00:25,090 Jetzt werden wir zu sprechen über eine andere Sprache, HTML. 9 00:00:25,090 --> 00:00:28,180 Und wir werden zu decken es in nur einem Video. 10 00:00:28,180 --> 00:00:29,340 >> Aber das geht in Ordnung zu sein. 11 00:00:29,340 --> 00:00:31,410 Das wird tatsächlich geworden etwas, Sie gehen zu gewöhnen. 12 00:00:31,410 --> 00:00:33,535 Jetzt haben Sie die Grundlagen einer Sprache, 13 00:00:33,535 --> 00:00:35,776 es ist eigentlich recht einfach Lernen zu beginnen andere. 14 00:00:35,776 --> 00:00:37,650 So werden wir beginnen , ein wenig zurücktreten 15 00:00:37,650 --> 00:00:43,340 und beschönigen die Grund Unterschiede zwischen diesen Sprachen 16 00:00:43,340 --> 00:00:45,750 und Art lassen Sie es. 17 00:00:45,750 --> 00:00:48,530 Es gibt eine Menge wirklich große Ressourcen im Internet, die 18 00:00:48,530 --> 00:00:51,279 werden wir beginnen Richten Sie Richtung, weil das Internet 19 00:00:51,279 --> 00:00:53,340 eine große Sammlung von Informationen. 20 00:00:53,340 --> 00:00:55,960 Und so ist es nicht mögen, werden Sie Heraus zwangsläufig verlieren 21 00:00:55,960 --> 00:00:58,349 indem nicht die Informationen in einem Video bedeckt. 22 00:00:58,349 --> 00:01:00,640 Sie werden immer noch in der Lage, zu erhalten alles was Sie brauchen und die Nutzung 23 00:01:00,640 --> 00:01:03,590 Wissen Sie bereits haben up durch das Verständnis C gebaut 24 00:01:03,590 --> 00:01:07,130 um die Lernkurve für diese machen andere Sprachen eigentlich viel flacher. 25 00:01:07,130 --> 00:01:08,640 Ich verspreche. 26 00:01:08,640 --> 00:01:12,770 >> Aber lassen Sie uns über eine Sprache sprechen das ist wirklich grundlegend für jede Web- 27 00:01:12,770 --> 00:01:14,830 Seite, die HTML ist. 28 00:01:14,830 --> 00:01:18,230 HTML ist die Hyper Text Markup Language. 29 00:01:18,230 --> 00:01:22,700 HTML ist eine Sprache, aber es ist keine Programmiersprache. 30 00:01:22,700 --> 00:01:23,900 >> HTML nicht über Variablen. 31 00:01:23,900 --> 00:01:26,430 Es muss nicht Logik oder Funktionen oder so etwas. 32 00:01:26,430 --> 00:01:30,301 Wir können nicht zu tun Programmierung per se in HTML. 33 00:01:30,301 --> 00:01:32,300 Manchmal werden Sie hören Menschen, sich selbst zu beschreiben 34 00:01:32,300 --> 00:01:35,710 als HTML-Programmierer, die ist nicht ganz richtig. 35 00:01:35,710 --> 00:01:37,980 Wir können keine HTML-Programme zu schreiben. 36 00:01:37,980 --> 00:01:40,770 >> HTML wird nur verwendet, um markieren Text. 37 00:01:40,770 --> 00:01:42,690 Es ist eine Markup-Sprache genannt. 38 00:01:42,690 --> 00:01:47,680 Und was dies does-- dieses markup-- verwenden wir Tags in HTML und diesen tags-- 39 00:01:47,680 --> 00:01:51,600 Diese markup-- semantisch definiert die Struktur einer Seite 40 00:01:51,600 --> 00:01:55,280 und bewirkt, dass der Klartext, besteht zwischen Tags zu interpretieren 41 00:01:55,280 --> 00:01:57,320 von Browsern auf unterschiedliche Weise. 42 00:01:57,320 --> 00:02:00,370 Und vielleicht ist es am besten zu erklären, dies mittels einer Abbildung. 43 00:02:00,370 --> 00:02:06,450 >> Hier ist eine sehr einfache HTML-Seite, nicht eine HTML-Programm wiederum eine HTML-Seite. 44 00:02:06,450 --> 00:02:08,680 Und wir wissen, es ist eine HTML-Seite, weil wir 45 00:02:08,680 --> 00:02:11,480 begrenzt ist alles, was mit HTML-Tags. 46 00:02:11,480 --> 00:02:13,850 Also das ist, was ein HTML-Tag aussieht. 47 00:02:13,850 --> 00:02:15,870 Es ist zwischen den spitzen Klammern. 48 00:02:15,870 --> 00:02:18,570 Und an der Spitze haben wir feststellen, HTML und am unteren Ende, 49 00:02:18,570 --> 00:02:21,400 nachdem wir getan, was anscheinend viele andere HTML, 50 00:02:21,400 --> 00:02:24,310 Wir haben Winkel Schrägstrich HTML. 51 00:02:24,310 --> 00:02:29,262 So dass eine Art ist die Grenze zwischen dem, was HTML ist und was nicht. 52 00:02:29,262 --> 00:02:32,220 Und natürlich herkömmlich einfach wie Sie alle Ihre C-Programme geschrieben 53 00:02:32,220 --> 00:02:35,300 mit Punkt C-Erweiterungen, alle Ihre HTML-Dateien 54 00:02:35,300 --> 00:02:37,909 wird mit Punkt HTML-Erweiterungen zu beenden. 55 00:02:37,909 --> 00:02:39,200 Aber es gibt mehr los hier. 56 00:02:39,200 --> 00:02:40,658 Wir haben nicht nur diese HTML-Tags. 57 00:02:40,658 --> 00:02:44,010 Wir haben diese scheinbar Ding namens ein Kopfschild. 58 00:02:44,010 --> 00:02:46,010 Na ja, OK, was ist das? 59 00:02:46,010 --> 00:02:48,550 >> Nun, vielleicht ist es besser, Unterscheidung durch einen Körper, 60 00:02:48,550 --> 00:02:50,590 Körpers der Inhalt der Web-Seite. 61 00:02:50,590 --> 00:02:55,860 Also vielleicht das Haupt-Tag definiert Zeug das ist nicht im Browser-Fenster die richtige, 62 00:02:55,860 --> 00:02:59,410 aber irgendwie wichtig unsere Web-Seite korrekt wiedergegeben wird. 63 00:02:59,410 --> 00:03:02,490 Beispielsweise innerhalb des head-Tag haben wir Titel-Tags. 64 00:03:02,490 --> 00:03:05,500 >> So Titel als Hallo Welt, das ist eigentlich los, um das, was sein 65 00:03:05,500 --> 00:03:08,797 zeigt sich in der Registerkarte in Chrome oder in Safari oder Firefox-- 66 00:03:08,797 --> 00:03:11,880 was auch immer Sie Browser prefer-- das ist, was los ist, um im Titel auftauchen. 67 00:03:11,880 --> 00:03:14,800 Und bevor Registerkarten es zeigen würde, up in Ihre gesamte Browser-Fenster 68 00:03:14,800 --> 00:03:19,710 und Sie können nur eine Seite Öffnen Sie in einem Browser-Fenster zu einem Zeitpunkt. 69 00:03:19,710 --> 00:03:22,160 So, das wird das sein, Titel meiner Seite in der Registerkarte 70 00:03:22,160 --> 00:03:24,600 oder das Browserfenster bar, hallo Welt. 71 00:03:24,600 --> 00:03:28,611 Und dann wird der Inhalt meiner Web-Seite wird Welt sein, hallo. 72 00:03:28,611 --> 00:03:31,360 Werfen wir also einen Blick auf, was einige Sache, wie diese aussehen könnte. 73 00:03:31,360 --> 00:03:33,210 Dies ist eine ziemlich einfache HTML-Seite. 74 00:03:33,210 --> 00:03:35,970 Also bin ich hier in meinem CS50 IDE und Ich habe in ein wenig vergrößert. 75 00:03:35,970 --> 00:03:38,290 Und ich werde einfach öffnen hallo dot HTML 76 00:03:38,290 --> 00:03:42,000 und zeigen Ihnen, dass dies ziemlich die Seiteninhalte, die wir zuvor gesehen. 77 00:03:42,000 --> 00:03:45,240 Meine einfache HTML, Kopf-Tags, Titel-Tags, Körper, und so weiter. 78 00:03:45,240 --> 00:03:47,320 Ich habe eingerückt sauber sein. 79 00:03:47,320 --> 00:03:51,530 >> Und dann, was ich tun kann, meine in IDE ist nur eine Vorschau der Seite. 80 00:03:51,530 --> 00:03:52,630 Und wir gehen. 81 00:03:52,630 --> 00:03:56,070 Der Inhalt meiner Seite gibt es weltweit, hallo, und ich sehe nichts 82 00:03:56,070 --> 00:03:58,500 in der Kopf-Tags gibt. 83 00:03:58,500 --> 00:03:59,980 Es ist nur der Inhalt des Körpers. 84 00:03:59,980 --> 00:04:00,780 Welt, hallo. 85 00:04:00,780 --> 00:04:03,700 Und wieder der Körper gerade sagte, welt, hallo. 86 00:04:03,700 --> 00:04:06,160 Der andere Teil fehlt. 87 00:04:06,160 --> 00:04:07,610 >> Also das ist wirklich alles, was es ist. 88 00:04:07,610 --> 00:04:11,370 Dies ist eine sehr einfache Grund HTML-Seite. 89 00:04:11,370 --> 00:04:14,280 Jetzt habe ich meine HTML eingerückt wirklich nett und organisiert, 90 00:04:14,280 --> 00:04:15,840 aber ich weiß nicht wirklich zu. 91 00:04:15,840 --> 00:04:17,959 Ich könnte es so aussehen ziemlich hässlich. 92 00:04:17,959 --> 00:04:19,467 Und dies würde immer noch funktionieren. 93 00:04:19,467 --> 00:04:21,050 Das wäre genau die gleiche Web-Seite sein. 94 00:04:21,050 --> 00:04:23,100 Ich habe gerade losgeworden all den weißen Raum. 95 00:04:23,100 --> 00:04:24,820 >> Wie sich herausstellt, ist weiß Raumdaten. 96 00:04:24,820 --> 00:04:28,540 Und so, wenn wir Daten aus Senden Sender zum Empfänger, vom Server 97 00:04:28,540 --> 00:04:30,670 Client, Kosten Daten Geld. 98 00:04:30,670 --> 00:04:34,460 Und so immer von Whitespace zu befreien ist eigentlich eine gute Idee 99 00:04:34,460 --> 00:04:37,320 wenn Sie jemand sind, der dient eine Menge von Web-Inhalten. 100 00:04:37,320 --> 00:04:39,820 Es ist eine schlechte Idee, wenn Sie jemanden, der das Erlernen dieses Zeug 101 00:04:39,820 --> 00:04:41,528 und Sie haben wollen es gut organisiert. 102 00:04:41,528 --> 00:04:43,810 Dies ist viel einfacher zu analysieren als dies. 103 00:04:43,810 --> 00:04:45,540 Aber es ist funktional identisch. 104 00:04:45,540 --> 00:04:48,720 >> Die Vertiefung und solche Sachen nicht wirklich in HTML Rolle. 105 00:04:48,720 --> 00:04:53,634 Alles was zählt ist das Öffnen-Tags und Schließen-Tags in der richtigen Reihenfolge. 106 00:04:53,634 --> 00:04:55,050 Beachten Sie, was hier passiert, wenn. 107 00:04:55,050 --> 00:04:58,450 Das Markup gibt uns eine Möglichkeit, kommunizieren zusätzliche Informationen 108 00:04:58,450 --> 00:04:59,940 über das, was wir geschrieben haben. 109 00:04:59,940 --> 00:05:03,130 Die Hallo Welt Teil war wie der Titel interpretiert. 110 00:05:03,130 --> 00:05:06,410 Und die Welt war hallo Teil als Inhalt interpretiert 111 00:05:06,410 --> 00:05:09,090 oder, was sein sollte sichtbar auf meiner Webseite. 112 00:05:09,090 --> 00:05:12,167 >> Es gibt über 100 dieser verschiedenen Tags und viele große Ressourcen 113 00:05:12,167 --> 00:05:13,000 Online, sie zu finden. 114 00:05:13,000 --> 00:05:14,900 Wir werden zu einem Gespräch Einige von ihnen in diesem Video, einige 115 00:05:14,900 --> 00:05:16,440 der wirklich grundlegenden Sachen. 116 00:05:16,440 --> 00:05:18,440 Aber wir werden nicht die Rede über alles, weil sie 117 00:05:18,440 --> 00:05:20,250 wäre vollständig, dies zu tun. 118 00:05:20,250 --> 00:05:22,880 >> Eine andere Sache, die Sie tun können, obwohl, ist eröffnen Entwickler-Tools. 119 00:05:22,880 --> 00:05:26,069 Und wenn Sie von erinnern unsere Video-on-HTTP, 120 00:05:26,069 --> 00:05:27,860 Ich erklärte, wie zu öffnen up-Entwickler-Tools. 121 00:05:27,860 --> 00:05:32,020 In Chrome ist es meist die Taste F12 zu öffnen, die Developer Toolbar. 122 00:05:32,020 --> 00:05:35,909 Dann statt der Wahl des Netzwerk Registerkarte können Sie auf die Registerkarte Elemente auswählen. 123 00:05:35,909 --> 00:05:37,700 Und wenn Sie einen Web-Laden Seite finden Sie tatsächlich 124 00:05:37,700 --> 00:05:40,280 Link zu den HTML, die diese Web-Seite erstellt. 125 00:05:40,280 --> 00:05:44,090 Und so können Sie eine Menge über HTML lernen können Dazu suchen Sie in Ihren bevorzugten Websites 126 00:05:44,090 --> 00:05:48,474 und sehen, wie sie beim Aufbau der verschiedene Stücke von ihnen, dass Sie mögen. 127 00:05:48,474 --> 00:05:50,890 Vielleicht gibt es diese coole Muster oder so ähnlich. 128 00:05:50,890 --> 00:05:52,140 Wie machen sie es mit HTML? 129 00:05:52,140 --> 00:05:55,630 Nun können Sie einfach öffnen Sie Ihren Entwickler Werkzeuge und schweben über diesem Element 130 00:05:55,630 --> 00:05:57,700 und genau sehen, was HTML macht es. 131 00:05:57,700 --> 00:05:59,450 Also das ist ein wirklich guter Weg, um HTML zu lernen, 132 00:05:59,450 --> 00:06:02,330 und ich empfehle dringend, Sie tun es sowohl zu lernen HTML 133 00:06:02,330 --> 00:06:04,930 und auch ein wenig zu lernen wenig über einige der Optionen 134 00:06:04,930 --> 00:06:07,050 zur Verfügung in Entwickler-Tools, die 135 00:06:07,050 --> 00:06:10,200 wird sicherlich als nützlich, wie kommen Sie tun intensivere Web beginnen 136 00:06:10,200 --> 00:06:11,090 Programmierung. 137 00:06:11,090 --> 00:06:14,080 >> Werfen wir also einen Blick auf ein paar gemeinsame HTML-Tags. 138 00:06:14,080 --> 00:06:17,210 Und wir springen und einen Blick auf was diese Tags werden auch machen 139 00:06:17,210 --> 00:06:20,490 wie durch einen Blick auf einige Dateien in meinem IDE. 140 00:06:20,490 --> 00:06:26,330 Also hier sind drei sehr grundlegenden Tags für Tweaking das optische Erscheinungsbild des Textes. 141 00:06:26,330 --> 00:06:29,050 Es gibt B-Tags, I-Tags und U-Tags. 142 00:06:29,050 --> 00:06:33,170 Bzw. was sie tun machen den Text zwischen ihnen in Fettdruck, 143 00:06:33,170 --> 00:06:35,430 Kursivschrift und Unterstreichung. 144 00:06:35,430 --> 00:06:40,430 Also mal sehen, was das aussehen würde wie auf einem tatsächlichen Web-Seite in meinem IDE. 145 00:06:40,430 --> 00:06:43,390 >> So, hier in meinem IDE Ich habe ein Datei namens BIU dot HTML. 146 00:06:43,390 --> 00:06:46,770 BIU dot HTML gerade fett, kursiv, unterstrichen. 147 00:06:46,770 --> 00:06:47,830 Ich werde es zu öffnen. 148 00:06:47,830 --> 00:06:51,810 >> Und wir werden das hier sehe ich, haben diesen Text ist B-Tags fett. 149 00:06:51,810 --> 00:06:54,010 Dieser Text ist ich Tags kursiv. 150 00:06:54,010 --> 00:06:56,307 Und dieser Text ist U-Tags unterstrichen. 151 00:06:56,307 --> 00:06:57,640 Was wird das wohl aussehen? 152 00:06:57,640 --> 00:06:59,473 Wieder gut, haben alle I zu tun ist, gehen hier 153 00:06:59,473 --> 00:07:04,690 zu meinem Browser, meine Datei-Browser, klicken Sie auf Vorschau, und dies ist, was kommt. 154 00:07:04,690 --> 00:07:07,520 >> Der Text zwischen den B Tags ist in der Tat jetzt fett. 155 00:07:07,520 --> 00:07:10,720 Der Text zwischen dem I Tags ist in der Tat jetzt kursiv. 156 00:07:10,720 --> 00:07:14,634 Und der Text zwischen dem U Tags ist in der Tat jetzt unterstrichen. 157 00:07:14,634 --> 00:07:15,550 Also das ist ziemlich gut. 158 00:07:15,550 --> 00:07:18,450 Wir wissen jetzt, wie Sie Text zu machen schauen ein wenig mehr Phantasie 159 00:07:18,450 --> 00:07:20,360 oder zeichnen Schwerpunkt auf bestimmte Dinge. 160 00:07:20,360 --> 00:07:25,530 Noch ein paar gemeinsame Tags sind hier Absatz-Tags, P und Header-Tags, 161 00:07:25,530 --> 00:07:27,980 die ich hier als HX gerendert. 162 00:07:27,980 --> 00:07:32,520 >> Diese P-Tags, diese Absatz-Tags, brechen Sie Ihren Text in Absätze. 163 00:07:32,520 --> 00:07:34,646 Es ist nicht genug, nur Enter drücken, und lassen Räume, 164 00:07:34,646 --> 00:07:37,186 weil ein Computer ist nur noch zu tun, was Sie sagen, es zu tun, 165 00:07:37,186 --> 00:07:39,450 und es weiß, ignoriert Platz für den größten Teil. 166 00:07:39,450 --> 00:07:41,636 So können wir nicht einfach Enter drücken und erwarten, dass unsere Computer 167 00:07:41,636 --> 00:07:43,760 zu interpretieren, dass wir wollen, um einen neuen Absatz zu beginnen. 168 00:07:43,760 --> 00:07:47,670 Wir müssen sehr deutlich sagen, dass dies ist einer paragraph-- dies another-- 169 00:07:47,670 --> 00:07:50,740 durch Einschließen jeweils in einer Reihe von P-Tags. 170 00:07:50,740 --> 00:07:54,560 >> Und wir haben auch diese Optionen für H-Tags, diesen Header-Tags. 171 00:07:54,560 --> 00:07:57,000 Wir haben sechs verschiedene Ebenen von Headern, eins, zwei, drei, 172 00:07:57,000 --> 00:08:01,110 vier, fünf und sechs, die sind progressiv größere und größere 173 00:08:01,110 --> 00:08:01,710 Überschriften. 174 00:08:01,710 --> 00:08:04,360 Und sie kleiner zu bekommen und immer kleiner und kleiner. 175 00:08:04,360 --> 00:08:07,690 So haben wir eine Top-Level-Header, einen zweiten Grundgehäuse, und so weiter, und so weiter. 176 00:08:07,690 --> 00:08:10,480 >> Werfen wir einen Blick auf vielleicht einige P-Tags und einige Header-Tags 177 00:08:10,480 --> 00:08:13,110 in Aktion auf einer Web-Seite. 178 00:08:13,110 --> 00:08:18,180 So, hier in meinem IDE Ich habe eine Datei mit dem Namen PH dot HTML, PH wobei Absätzen 179 00:08:18,180 --> 00:08:18,970 und Header-Tags. 180 00:08:18,970 --> 00:08:20,709 Öffnen Sie, dass bis. 181 00:08:20,709 --> 00:08:23,000 Es gibt eine Menge los hier denn ich habe einige lorem setzen 182 00:08:23,000 --> 00:08:24,660 ipsum, einige nur zufälligen Text hier. 183 00:08:24,660 --> 00:08:27,284 Also werde ich zoom out ein wenig denn es gibt so viel los. 184 00:08:27,284 --> 00:08:31,980 Aber beachten Sie, dass ich ganz am top hier, ich habe ein H1, ein Niveau ein, 185 00:08:31,980 --> 00:08:32,802 Header-Tag. 186 00:08:32,802 --> 00:08:36,010 Dann habe ich noch einen Absatz, der gerade ist eine Reihe von zufälligen text-- lorem ipsum-- 187 00:08:36,010 --> 00:08:38,720 nur Standardstandardfüllung im Text. 188 00:08:38,720 --> 00:08:41,970 So habe ich zwei Absätze Innenseite, dass Stufe eins Header und dann unten I 189 00:08:41,970 --> 00:08:46,850 eine Stufe zwei Kopf hier auf der Leitung 24, eine zweite Ebene Header, und zwei weitere 190 00:08:46,850 --> 00:08:47,840 Randnrn. 191 00:08:47,840 --> 00:08:51,910 Nun, was bedeutet das aussehen wenn ich es sehen in meiner Vorschau? 192 00:08:51,910 --> 00:08:53,790 Mal sehen. 193 00:08:53,790 --> 00:08:55,730 >> So fest, dass die erste Ebene Header hier 194 00:08:55,730 --> 00:08:58,420 ist eigentlich ganz ein bisschen größer als die zweite Ebene Header. 195 00:08:58,420 --> 00:08:59,940 So nutzten wir H1-Tags. 196 00:08:59,940 --> 00:09:03,820 Und beachten Sie, dass die P-Tags erlauben es uns die Dinge in den Absätzen auszubrechen. 197 00:09:03,820 --> 00:09:07,500 Hätten wir losgeworden diesen P-Tags und tatsächlich hat gerade Aufrufen oder Rückgabe 198 00:09:07,500 --> 00:09:10,110 in dem, was wir hofften, werden die verschiedenen Absätzen, 199 00:09:10,110 --> 00:09:13,193 sie würden alles nur zusammen zuschlagen und es wäre nicht dieses nette Absatz 200 00:09:13,193 --> 00:09:15,840 Trennung mit Platz oben und unten. 201 00:09:15,840 --> 00:09:18,300 Und so das ist, was Absatz Tags und Header-Tags 202 00:09:18,300 --> 00:09:22,440 werden häufig verwendet, um zu tun, um zu zeichnen Aufmerksamkeit auf Bereiche unserer Web-Seite 203 00:09:22,440 --> 00:09:23,550 Auf diese Weise. 204 00:09:23,550 --> 00:09:27,560 >> Weiter oben sind nur einige Schlagworte, die wir verwenden Listen Sie auf unserer Web-Seite zu bauen. 205 00:09:27,560 --> 00:09:30,820 So haben wir ungeordnete lists-- ULs-- denen gerade sind 206 00:09:30,820 --> 00:09:34,090 Aufzählungen, bestellt Liste, die numbered-- sind 207 00:09:34,090 --> 00:09:37,680 OLs-- und innen entweder einer von denen, die wir benötigen, sind 208 00:09:37,680 --> 00:09:40,600 Sätze wie Sie Listenelemente anzuzeigen, LI. 209 00:09:40,600 --> 00:09:44,370 Und so haben wir offene UL-Tag und wir setzen Artikel darin. 210 00:09:44,370 --> 00:09:46,920 Und dann, wenn wir es zu tun dass können wir die UL-Tag zu schließen. 211 00:09:46,920 --> 00:09:49,850 >> Und in ähnlicher Weise die wir haben können eine geordnete oder nummerierte Liste 212 00:09:49,850 --> 00:09:51,560 und legte Listenelemente im Inneren davon. 213 00:09:51,560 --> 00:09:53,350 Werfen wir also einen Blick auf ein paar Listen 214 00:09:53,350 --> 00:09:57,230 und was sie wollten machen wie auf CS50 IDE. 215 00:09:57,230 --> 00:10:00,640 Also ich habe hier in meinem IDE ein Datei namens Listen dot HTML. 216 00:10:00,640 --> 00:10:03,100 Lass uns einen Blick darauf werfen. 217 00:10:03,100 --> 00:10:08,482 >> Und beachtet hier habe ich eine ungeordnete Liste mit fünf Dinge in ihm. 218 00:10:08,482 --> 00:10:11,440 Und dann habe ich eine geordnete Liste, und Ich habe den Tag ein wenig verändert, 219 00:10:11,440 --> 00:10:11,939 Recht? 220 00:10:11,939 --> 00:10:13,152 Ich habe gesagt, Start gleich sechs. 221 00:10:13,152 --> 00:10:16,110 Es stellt sich heraus mit einer geordneten Liste I kann der Startpunkt, wo immer gesetzt 222 00:10:16,110 --> 00:10:20,130 Ich want-- wird er per default one-- sein indem einfach diese so genannte Attribut 223 00:10:20,130 --> 00:10:21,190 zu meinem OL-Tag. 224 00:10:21,190 --> 00:10:23,572 Und so wird diese Liste Zählen beginnen um sechs. 225 00:10:23,572 --> 00:10:26,780 So sind die Elemente dieser nummerierte Liste sollte sechs, sieben, acht, neun, zehn, 226 00:10:26,780 --> 00:10:29,930 denn es gibt fünf Elemente in der Liste ist, im Gegensatz zu einem, 227 00:10:29,930 --> 00:10:33,770 zwei, drei, vier, fünf, die was der Fall wäre, wenn ich die OL 228 00:10:33,770 --> 00:10:36,730 ohne Angabe der Start-Attribut. 229 00:10:36,730 --> 00:10:41,594 >> So werden wir nur eine Vorschau, so dass Sie diese bekommen ein Gefühl für das, was hier vor sich geht. 230 00:10:41,594 --> 00:10:42,260 Und wir gehen. 231 00:10:42,260 --> 00:10:44,610 Es ist meine Liste. 232 00:10:44,610 --> 00:10:47,810 Die ersten fünf Elemente sind ungeordnete oder Listen mit Aufzählungszeichen. 233 00:10:47,810 --> 00:10:51,010 Und die nächsten fünf Elemente sind ein separater geordnete Liste 234 00:10:51,010 --> 00:10:52,980 ab sechs. 235 00:10:52,980 --> 00:10:56,247 Also das ist, wie wir können, bauen mit Hilfe von HTML-Listen. 236 00:10:56,247 --> 00:10:58,080 Eine andere Sache, die Sie will mit HTML zu tun 237 00:10:58,080 --> 00:11:01,520 ist eine Tabelle erstellen Daten von Zeilen und Spalten 238 00:11:01,520 --> 00:11:04,560 um Informationen in einer Gegenwart besonders organisierten Art und Weise. 239 00:11:04,560 --> 00:11:09,110 Um dies mit HTML machen wir eine haben Tabellendefinition beginnend offene Bügel 240 00:11:09,110 --> 00:11:10,160 Tabelle. 241 00:11:10,160 --> 00:11:14,680 Und dann in der Tabelle wir könnte eine Reihe von Zeilen, TR-Tags haben 242 00:11:14,680 --> 00:11:15,980 um jede Zeile anzuzeigen. 243 00:11:15,980 --> 00:11:22,510 Und dann TD-Tags gehen Innenseite TR-Tags um eine Spalte innerhalb einer Zeile angeben. 244 00:11:22,510 --> 00:11:24,340 >> Warum heißt es TD und TC nicht? 245 00:11:24,340 --> 00:11:25,940 Nun, steht TD für die Tabellendaten. 246 00:11:25,940 --> 00:11:27,900 Normalerweise Sie setzen Ihre Informationen gibt. 247 00:11:27,900 --> 00:11:29,440 Also das ist, warum es TD und nicht TC. 248 00:11:29,440 --> 00:11:31,140 Es ist ein wenig verwirrend. 249 00:11:31,140 --> 00:11:33,720 >> So können Sie Tabellen-Tags haben und Innenseite der Tabellen-Tags 250 00:11:33,720 --> 00:11:35,600 Sie haben eine Anzahl von Reihen, TRs. 251 00:11:35,600 --> 00:11:40,030 Und innerhalb jeder Zeile, die Sie haben TDS für die Anzahl der Spalten, 252 00:11:40,030 --> 00:11:42,880 dass Sie haben wollen in dieser bestimmten Zeile. 253 00:11:42,880 --> 00:11:47,730 Werfen wir einen Blick auf eine sehr einfache Tabelle über in CS50 IDE. 254 00:11:47,730 --> 00:11:49,730 >> Also ich habe hier eine Datei genannt Tisch dot HTML. 255 00:11:49,730 --> 00:11:53,390 Lassen Sie uns einen Blick auf , wie das aussieht. 256 00:11:53,390 --> 00:11:56,225 Es gibt eine Menge los hier, aber wenn Sie feststellen, ich habe eine Tabelle geöffnet. 257 00:11:56,225 --> 00:11:57,850 Ich fange die Definition mit Tisch. 258 00:11:57,850 --> 00:12:02,100 Und dann in meinem ersten Reihe I offenbar vier Säulen, eins, zwei, drei, 259 00:12:02,100 --> 00:12:02,660 vier. 260 00:12:02,660 --> 00:12:04,290 Und dann bin ich mit dieser Zeile durchgeführt. 261 00:12:04,290 --> 00:12:07,750 >> Dann eine weitere Zeile zu beginnen und ich machen zwei, vier, sechs, acht. 262 00:12:07,750 --> 00:12:08,850 Beenden Sie diese Zeile. 263 00:12:08,850 --> 00:12:11,410 Neue Reihe, drei, sechs, neun, 12. 264 00:12:11,410 --> 00:12:14,830 Und dann eine letzte Reihe, vier, acht, 12, und wenn es 265 00:12:14,830 --> 00:12:16,560 ein wenig aus sich hier schneiden, 16. 266 00:12:16,560 --> 00:12:17,710 >> Ich beendete die Zeile. 267 00:12:17,710 --> 00:12:18,970 Ich beendete die Tabelle. 268 00:12:18,970 --> 00:12:21,430 Und dann bin ich mit meinem HTML getan. 269 00:12:21,430 --> 00:12:22,590 Was bedeutet das aussehen? 270 00:12:22,590 --> 00:12:26,014 271 00:12:26,014 --> 00:12:27,430 Nun, es ist nicht wirklich viel zu sehen. 272 00:12:27,430 --> 00:12:31,690 Ich habe meine Informationen übersichtlich in einer etwas organisierten Art und Weise. 273 00:12:31,690 --> 00:12:33,755 Aber es ist nicht super hübsch hier. 274 00:12:33,755 --> 00:12:36,130 Und wir werden zu behandeln , dass, wenn wir über CSS zu sprechen. 275 00:12:36,130 --> 00:12:38,930 Wir werden diese Idee überdenken was wir tun, um eine table-- machen 276 00:12:38,930 --> 00:12:41,260 formatieren Sie es vielleicht ein bisschen besser? 277 00:12:41,260 --> 00:12:45,070 Aber ich weiß noch vier Reihen, von denen jede vier Spalten, 278 00:12:45,070 --> 00:12:48,890 und wirklich, was diese beläuft sich auf eine sehr einfach vier mal vier Multiplikations 279 00:12:48,890 --> 00:12:49,870 Tabelle. 280 00:12:49,870 --> 00:12:51,690 >> Nur noch ein paar Tags werden wir darüber reden. 281 00:12:51,690 --> 00:12:54,617 Lassen Sie uns über das zu sprechen Konzept der ein HTML-Formular. 282 00:12:54,617 --> 00:12:57,450 So können Sie diese in die gesehen haben Zusammenhang mit der Anmeldung in einer Web-Seite. 283 00:12:57,450 --> 00:12:59,100 Normalerweise geben Sie Ihren Benutzernamen an. 284 00:12:59,100 --> 00:13:01,510 Sie geben Sie Ihr Passwort vergessen, und du bist gut zu gehen. 285 00:13:01,510 --> 00:13:04,170 Das wäre der Beginn einer Form vorliegen. 286 00:13:04,170 --> 00:13:05,420 >> Überspringen div ein zweites. 287 00:13:05,420 --> 00:13:07,987 Wir haben auch Eingänge, Art passen Innenseite bildet. 288 00:13:07,987 --> 00:13:10,320 Dies sind die Elemente, Sie tatsächlich der Eingabe in, 289 00:13:10,320 --> 00:13:12,580 oder die Radio-Buttons sind Sie tickt oder der Scheck 290 00:13:12,580 --> 00:13:14,310 Boxen, die Sie tickt sind ausgeschaltet. 291 00:13:14,310 --> 00:13:15,770 So gehen diese im Inneren der Formen. 292 00:13:15,770 --> 00:13:18,500 Und sie im Grunde enthalten jede Reihe von der Form 293 00:13:18,500 --> 00:13:19,887 wenn Ihre Form ist gut formatiert. 294 00:13:19,887 --> 00:13:22,220 Dann gibt es dieses Konzept der ein div, die nicht wirklich 295 00:13:22,220 --> 00:13:25,060 passen in einer bestimmten Kategorie von Tags wie die, die ich habe 296 00:13:25,060 --> 00:13:26,170 zuvor machen. 297 00:13:26,170 --> 00:13:29,790 Es ist einfach die Art von abgrenzt beginnend von einer beliebigen division-- 298 00:13:29,790 --> 00:13:31,670 div-- der Seite. 299 00:13:31,670 --> 00:13:33,210 Es gibt keine visuelle Pause. 300 00:13:33,210 --> 00:13:34,800 Es gibt keine Linie. 301 00:13:34,800 --> 00:13:37,180 Es ist nicht weg als Set separates Stück automatisch. 302 00:13:37,180 --> 00:13:39,430 Sie müssten es stylen auf diese Weise, das zu tun. 303 00:13:39,430 --> 00:13:42,110 >> Es einfach irgendwie sagt, ich möchte, dass ein Stück Platz auf meiner Web-Seite, 304 00:13:42,110 --> 00:13:45,190 und ich werde einfach anrufen es diese Aufteilung meiner Seite. 305 00:13:45,190 --> 00:13:47,619 Wir können Sachen nach innen setzen der divs, und in der Tat, 306 00:13:47,619 --> 00:13:49,410 wenn wir den Kopf über IDE in einer zweiten, werden wir 307 00:13:49,410 --> 00:13:53,760 sehen, dass Ich setze meine bilden innerhalb eines div. 308 00:13:53,760 --> 00:13:57,050 >> Also ich habe hier in meinem IDE ein Datei namens div Form dot HTML. 309 00:13:57,050 --> 00:13:59,260 Lassen Sie öffnen Sie es. 310 00:13:59,260 --> 00:14:01,460 Beachten Sie, dass, wie ich sagte, div ist ein bisschen willkürlich. 311 00:14:01,460 --> 00:14:01,640 Recht? 312 00:14:01,640 --> 00:14:02,973 Es ist nicht wirklich alles bedeuten. 313 00:14:02,973 --> 00:14:05,140 So habe ich eine beliebige ersten Liga auf meiner Seite. 314 00:14:05,140 --> 00:14:07,848 Und dann anstelle eines anderen div später, beginnend in Zeile acht, 315 00:14:07,848 --> 00:14:08,730 Ich habe dieses Formular. 316 00:14:08,730 --> 00:14:13,594 Und im Inneren der Form habe ich einen Anzahl der Eingänge, Felder des Formulars. 317 00:14:13,594 --> 00:14:16,510 So habe ich ein Feld, dessen Name A-- was nicht wirklich bedeutet nichts 318 00:14:16,510 --> 00:14:19,350 Recht now-- die offenbar statt Text, eine andere, die 319 00:14:19,350 --> 00:14:22,630 dauert ein Passwort, eine andere, die ein Radio Button, eine andere, die ein Kontrollkästchen ist, 320 00:14:22,630 --> 00:14:24,797 und eine andere, ist ein Submit-Button. 321 00:14:24,797 --> 00:14:26,630 Nun, was tut dies, alle eigentlich aus? 322 00:14:26,630 --> 00:14:27,629 Nun, lassen Sie uns einen Blick. 323 00:14:27,629 --> 00:14:31,010 Wir werden es öffnen in unserer Vorschau-Fenster. 324 00:14:31,010 --> 00:14:33,557 Beachten Sie, dass dieser willkürliche erste division-- es gibt 325 00:14:33,557 --> 00:14:34,640 keine optische Trennung hier. 326 00:14:34,640 --> 00:14:37,150 Es hat nicht wirklich etwas zu tun, oder? 327 00:14:37,150 --> 00:14:38,220 >> Und dann habe ich meine Form. 328 00:14:38,220 --> 00:14:39,890 Und ich habe keine spezielle Formatierung nicht. 329 00:14:39,890 --> 00:14:42,680 So ist die Form ist nur eine große Reihe von Informationen. 330 00:14:42,680 --> 00:14:46,424 Wenn ich meine Form unterschiedlich formatiert, Ich habe könnte es durch die Linie Zeile für Zeile. 331 00:14:46,424 --> 00:14:47,590 Aber ich habe keine Styling nicht. 332 00:14:47,590 --> 00:14:49,256 Auch hier sprechen wir nicht über CSS sprechen hier. 333 00:14:49,256 --> 00:14:51,030 Wir sprachen gerade über HTML. 334 00:14:51,030 --> 00:14:53,980 >> Nun, in meinem Textform I Typ-- können daran erinnern, dass Formen der Typ text 335 00:14:53,980 --> 00:14:55,480 so kann ich meinen Namen setzen. 336 00:14:55,480 --> 00:14:57,330 Und mein Passwort vergessen Ich kann mein Kennwort eingeben. 337 00:14:57,330 --> 00:14:59,740 Und weil dieses Feld ist vom Typ Kennwort ein, 338 00:14:59,740 --> 00:15:01,470 Sie weiß nicht, was mein Passwort. 339 00:15:01,470 --> 00:15:02,800 Es ist alle Punkte. 340 00:15:02,800 --> 00:15:09,140 >> Ich kann auch wählen, abhaken ein Radio-Button oder abhaken ein Kontrollkästchen. 341 00:15:09,140 --> 00:15:10,420 Oder ich könnte meine Form einzureichen. 342 00:15:10,420 --> 00:15:11,810 Und ich habe nichts getan, so, wenn ich mein Formular abgesendet haben, 343 00:15:11,810 --> 00:15:13,090 die Seite lediglich aktualisiert. 344 00:15:13,090 --> 00:15:16,970 Aber ich konnte vielleicht konfigurieren meiner Submit-Button, um etwas anderes zu tun. 345 00:15:16,970 --> 00:15:20,410 Und wir werden sehen, was wir tun können, mit , dass in einem zukünftigen Video bei PHP. 346 00:15:20,410 --> 00:15:22,520 Aber das baut eine sehr einfache Form, die wir 347 00:15:22,520 --> 00:15:27,360 verwenden können Benutzer interagieren zu haben und Vorlage von Informationen auf unserer Website. 348 00:15:27,360 --> 00:15:29,620 >> Eine letzte Bemerkung, bevor wir fahren Sie mit einigen anderen Tags 349 00:15:29,620 --> 00:15:32,040 sind, um einen Blick auf diese zu nehmen input-Tag noch einmal. 350 00:15:32,040 --> 00:15:35,760 Beachten Sie, dass ich hervorgehoben die Enden des Etiketts in rot. 351 00:15:35,760 --> 00:15:39,390 Jeden zweiten Tag, die wir bisher gesehen hat hat einen Anfang und ein Ende hat, die eine Öffnung 352 00:15:39,390 --> 00:15:41,030 Tag und einem schließenden Tag. 353 00:15:41,030 --> 00:15:42,520 >> Aber eine Eingangs Tag nicht. 354 00:15:42,520 --> 00:15:46,860 Es gibt keinen Text, der geht zwischen Eingangs-Tags. 355 00:15:46,860 --> 00:15:49,160 Alle Informationen, wir beabsichtigen, zu vermitteln 356 00:15:49,160 --> 00:15:52,640 wird als Teil des gebundenen Attribute dieser Eingabe. 357 00:15:52,640 --> 00:15:54,690 Beachten Sie, wir haben input name gleich x. 358 00:15:54,690 --> 00:15:55,580 Type gleich y. 359 00:15:55,580 --> 00:15:57,660 Das ist wirklich alles das Informationen die wir brauchen. 360 00:15:57,660 --> 00:15:59,470 >> Dies wird als eine selbstschließende Tag. 361 00:15:59,470 --> 00:16:02,470 Es keine Öffnung und eine benötigen nahe, weil alle Informationen, 362 00:16:02,470 --> 00:16:04,974 ist innerhalb der enthaltenen Tag und seine Attribute. 363 00:16:04,974 --> 00:16:06,390 Also manchmal werden Sie das sehen, auch. 364 00:16:06,390 --> 00:16:10,400 Also einfach bewusst sein, dass, wenn Sie eine Tag, das vollständig in sich geschlossen ist, 365 00:16:10,400 --> 00:16:14,170 Es öffnet und schließt sich selbst mit der offene Winkel auf der linken Seite 366 00:16:14,170 --> 00:16:17,000 und der Schrägstrich Winkel Klammer auf der rechten Seite. 367 00:16:17,000 --> 00:16:20,580 Wir werden ein anderes jener zu sehen jetzt mit Image-Tags als auch. 368 00:16:20,580 --> 00:16:23,300 >> Bevor wir über Bilder sprechen, die wir müssen über Hyperlinks zu sprechen. 369 00:16:23,300 --> 00:16:26,080 Wenn wir wollen, dass unsere Web-Seite zu sein interaktive und bewegen uns herum, 370 00:16:26,080 --> 00:16:28,121 es wäre schön, in der Lage sein auf einer von denen, klicken Sie auf 371 00:16:28,121 --> 00:16:30,190 was in der Regel ein blauer Link. 372 00:16:30,190 --> 00:16:34,440 Dies ist tatsächlich, wie wir bauen ein Hyperlink in unserer Web-Seite. 373 00:16:34,440 --> 00:16:36,540 Und interessanterweise es gibt eine andere HTML-Tag 374 00:16:36,540 --> 00:16:39,000 genannte Link, das ist kein Hyperlink. 375 00:16:39,000 --> 00:16:44,130 A steht dabei für Anker und das ist, wie wir zeigen einen Hyperlink. 376 00:16:44,130 --> 00:16:49,150 >> A href gleich x Mittel gehen Web-Seite X. Und alles 377 00:16:49,150 --> 00:16:51,580 zwischen der offenen A-Tag und die in der Nähe A-Tag 378 00:16:51,580 --> 00:16:56,010 ist was los zu sein, dass unterstrichen blauer Text, der aussieht wie ein Link 379 00:16:56,010 --> 00:16:57,590 dass wir kennen. 380 00:16:57,590 --> 00:17:01,660 Unten, dass wir ein Image-Tag, der ist eine selbstschließende Tag für die Anzeige 381 00:17:01,660 --> 00:17:05,599 ein Bild auf X. befindet Sie könnten zu ändern 382 00:17:05,599 --> 00:17:08,280 dass Bild durch Angabe Breite und Höhe 383 00:17:08,280 --> 00:17:11,640 und andere Attribute in dass Punkt Punkt Punkt gibt. 384 00:17:11,640 --> 00:17:14,260 >> Ganz unten hier Wir haben eine sehr interessante 385 00:17:14,260 --> 00:17:16,170 Suche Tag, das nicht der Fall ist einen End-Tag. 386 00:17:16,170 --> 00:17:19,410 Es ist Ausrufezeichen Doctype HTML. 387 00:17:19,410 --> 00:17:23,300 So HTML gibt es schon seit dem gewesen Anfang der 1990er Jahre für den Aufbau von Web-Seiten, 388 00:17:23,300 --> 00:17:25,859 und es ist unterzogen gegangen mehrere Revisionen seither. 389 00:17:25,859 --> 00:17:28,550 Zuletzt im Jahr 2014 es eine Revision unterzog 390 00:17:28,550 --> 00:17:33,440 genannt HTML5 das ist jetzt der aktuelle Art De-facto-HTML-Standard. 391 00:17:33,440 --> 00:17:36,730 >> Um anzuzeigen, dass unsere Web- Seiten werden geschrieben mit HTML5, 392 00:17:36,730 --> 00:17:38,160 das ist, wie wir starten. 393 00:17:38,160 --> 00:17:40,380 Es kann weggelassen werden, aber was das grundsätzlich 394 00:17:40,380 --> 00:17:45,930 Mittel ist, können Sie nicht verwenden Sie eine der Tags dass HTML5-Tags, diese neuen Tags sind. 395 00:17:45,930 --> 00:17:48,591 So beginnen wir immer ausgeschaltet wenn wir mit HTML5. 396 00:17:48,591 --> 00:17:51,340 Und all die Tags haben wir darüber gesprochen zuvor nicht HTML5-Tags. 397 00:17:51,340 --> 00:17:55,470 Aber das würde zeigen, dass HTML5-Tags werden anwesend sein. 398 00:17:55,470 --> 00:17:58,400 Und so haben wir Ausrufe Doctype HTML, die 399 00:17:58,400 --> 00:18:01,280 ist gleich zu Beginn unserer HTML-Datei, und nach diesem Punkt 400 00:18:01,280 --> 00:18:04,930 haben wir eigentlich unsere HTML geöffnet markieren und gehen von dort aus. 401 00:18:04,930 --> 00:18:10,050 >> Der letzte ist ein Kommentar-Tag, die etwas anders aussieht, auch. 402 00:18:10,050 --> 00:18:12,810 Es beginnt mit dem Winkel Halterung Ausrufe dash 403 00:18:12,810 --> 00:18:15,220 dash aber keine schließende Klammer. 404 00:18:15,220 --> 00:18:20,150 Zwischen diesen beiden Elementen besteht ist, wo Sie Ihre Kommentare zu schreiben. 405 00:18:20,150 --> 00:18:28,420 Und lassen Sie uns einen Blick auf Bilder und Kommentare und Links in CS50 IDE. 406 00:18:28,420 --> 00:18:32,850 >> Also ich habe hier eine Datei namens Image-Link dot HTML, das werde ich eröffnen. 407 00:18:32,850 --> 00:18:36,420 Und beachten Sie, ich habe ein paar bekam kommentiert hier in meinem HTML-Kommentare. 408 00:18:36,420 --> 00:18:38,990 So genau wie in C und anderen Programmiersprachen, 409 00:18:38,990 --> 00:18:43,169 HTML, nur weil eine Markup-Sprache nicht die Möglichkeit haben, Anmerkungen haben. 410 00:18:43,169 --> 00:18:45,710 Und so bin ich offenbar werde setzen ein Bild von Rick Astley 411 00:18:45,710 --> 00:18:49,060 irgendwo zwischen diesem div Tag, diese willkürliche Teilung. 412 00:18:49,060 --> 00:18:51,497 Anscheinend Datei Rick dot JPEG, Lokalität 413 00:18:51,497 --> 00:18:53,580 wenn wir den Kopf nach hinten über meinem Dateibaum für eine zweite, 414 00:18:53,580 --> 00:18:55,490 ist eine Datei, in existiert das aktuelle Verzeichnis. 415 00:18:55,490 --> 00:18:56,031 Also das ist OK. 416 00:18:56,031 --> 00:18:57,710 Ich kann darauf verweisen. 417 00:18:57,710 --> 00:18:59,680 >> Dann kann ich interne Links haben. 418 00:18:59,680 --> 00:19:05,080 So bemerken in Zeile 11 hier meine href ist hallo dot HTML. 419 00:19:05,080 --> 00:19:09,050 So dass nur bezieht sich auf hallo dot HTML was existiert im aktuellen Verzeichnis. 420 00:19:09,050 --> 00:19:12,980 Und ich kann auch externe Links nur durch Angabe HTTPS 421 00:19:12,980 --> 00:19:16,180 um anzuzeigen, dass ich spreche nicht über eine Datei in meinem aktuellen Verzeichnis. 422 00:19:16,180 --> 00:19:19,730 Ich freue mich über eine Datei, die es gibt im Gespräch irgendwo im Internet, die ich 423 00:19:19,730 --> 00:19:23,370 zu beantragen, über das HTTP-Protokoll. 424 00:19:23,370 --> 00:19:25,990 >> Werfen wir also einen Blick auf das, was Diese Seite aussehen könnte 425 00:19:25,990 --> 00:19:29,500 und machen Sie sich bereit für ein Bild von Rick Astley zu zeigen, bis auf dem Bildschirm. 426 00:19:29,500 --> 00:19:31,490 Also werde ich diese in der Vorschau. 427 00:19:31,490 --> 00:19:33,800 Es gibt Rick Astley am Ganz oben in dieser willkürlichen 428 00:19:33,800 --> 00:19:35,008 Division Ich habe es an der Spitze. 429 00:19:35,008 --> 00:19:36,960 Und dann unten I habe meine Links, oder? 430 00:19:36,960 --> 00:19:39,330 >> Ich habe einen Link, um hallo dot HTML. 431 00:19:39,330 --> 00:19:42,860 Und wenn ich Sie auf, dass, ich bekomme auf dieser Seite über bewegt 432 00:19:42,860 --> 00:19:47,050 dass wir sehr vertraut mit aus der Anfang unseres Programms. 433 00:19:47,050 --> 00:19:50,880 Wenn ich Pop die Seite wieder öffnen, wenn ich Pop-Image-Link öffnet ein weiteres Mal, 434 00:19:50,880 --> 00:19:54,420 Ich kann auch extern gehen In den CS50-Website. 435 00:19:54,420 --> 00:19:56,740 Und es see-- wir Ich werde zoom out ein wenig hier-- 436 00:19:56,740 --> 00:20:00,260 wir CS50-Website Art zu sehen in der Mitte unserer Seite eingebettet. 437 00:20:00,260 --> 00:20:04,670 So konnte ich eine interne zu machen Verlinken sowie ein externer Link. 438 00:20:04,670 --> 00:20:07,200 >> Die letzte Regel mit HTML, werden wir hier sprechen 439 00:20:07,200 --> 00:20:09,510 ist, dass Ihr HTML sollte gut ausgebildet sein. 440 00:20:09,510 --> 00:20:13,020 In C sprachen wir viel über Die verschiedenen Syntax der Dinge. 441 00:20:13,020 --> 00:20:17,650 In HTML-Syntax wirklich dreht sich um Tags. 442 00:20:17,650 --> 00:20:19,660 Jeden Tag, das Sie öffnen, muss geschlossen werden. 443 00:20:19,660 --> 00:20:22,630 Und in der Tat, jeden Tag, das Sie öffnen sollte in umgekehrter Reihenfolge geschlossen werden. 444 00:20:22,630 --> 00:20:25,790 >> Also, wenn Sie eine mutige Tag zu öffnen, ein italic Tag, und dann ein Unterstrich-Tag 445 00:20:25,790 --> 00:20:28,120 , alle drei zu einem zu tun bestimmten Satz von Text, 446 00:20:28,120 --> 00:20:30,070 sollten Sie sie in umgekehrter Reihenfolge zu schließen. 447 00:20:30,070 --> 00:20:32,270 Also, wenn Sie fett geöffnet, kursiv, unterstrichen, die Sie 448 00:20:32,270 --> 00:20:35,240 möchte unterstreichen, kursiv zu schließen, fett. 449 00:20:35,240 --> 00:20:39,990 Diese Art der Einkapselung ist, was hält HTML nett und organisiert. 450 00:20:39,990 --> 00:20:44,370 >> Im Gegensatz zu C, obwohl, werden Syntaxfehler nicht tatsächlich Krüppel Ihren HTML möglich. 451 00:20:44,370 --> 00:20:48,730 Ihre HTML kann nicht gut sein gebildet, aber immer noch funktionieren würde. 452 00:20:48,730 --> 00:20:50,589 Und so werden diese Fehler kann der Schieber nach zu sortieren. 453 00:20:50,589 --> 00:20:52,130 Es liegt an Ihnen, um wirklich wachsam sein. 454 00:20:52,130 --> 00:20:54,760 Manchmal werden sie scheitern, aber manchmal können Sie sich mit ihm weg. 455 00:20:54,760 --> 00:20:56,509 >> Es kann einen wirklich sein, schwierige Aufgabe, wenn auch, 456 00:20:56,509 --> 00:21:00,660 zu verfolgen, wenn Sie geöffnet zu halten ein Tag, wenn Sie es geschlossen ist, 457 00:21:00,660 --> 00:21:04,110 vor allem als Ihr HTML Dateien größer und größer. 458 00:21:04,110 --> 00:21:05,490 Du wirst etwas Hilfe möchten. 459 00:21:05,490 --> 00:21:07,560 Und es gibt Online- Validator Tools, die Sie 460 00:21:07,560 --> 00:21:11,474 verwenden können, um einen Blick auf Ihre Web haben Seite und sehen, ob es gut geformt HTML. 461 00:21:11,474 --> 00:21:13,390 Und Sie sollten auf jeden Fall einen Blick auf diejenigen, 462 00:21:13,390 --> 00:21:16,620 und beginnen, sie, wie Sie verwenden, beginnen, etwas Arbeit mit HTML, 463 00:21:16,620 --> 00:21:20,800 Schreiben von HTML, nur so erhalten einige gute Gewohnheiten zu organisieren 464 00:21:20,800 --> 00:21:24,377 Ihre HTML in einem guten Weg und guten Stil und dafür sorgen, 465 00:21:24,377 --> 00:21:27,210 dass man nicht alles tun, dass könnte einen Syntaxfehler zu schaffen, dass 466 00:21:27,210 --> 00:21:30,270 würden Sie ein wenig bewirken ein Problem auf dem Weg. 467 00:21:30,270 --> 00:21:31,190 >> Ich bin Doug Lloyd. 468 00:21:31,190 --> 00:21:33,450 Dies ist CS50. 469 00:21:33,450 --> 00:21:34,859