>> DOUG LLOYD: So verbrachten wir about-- wenn mein Mathe ist richtig,
und ich denke, suchen back-- Ich denke, Wir haben ungefähr 35 videos sprechen
über verschiedene Aspekte der C, vielleicht ein wenig mehr, vielleicht etwas weniger.
Und wir haben nicht decken alles in C, aber wir
bedeckt einen großen Teil der Sprache, die überwiegende Mehrheit davon,
Sicherheit für die häufigsten Anwendungen.
Jetzt werden wir zu sprechen über eine andere Sprache, HTML.
Und wir werden zu decken es in nur einem Video.
>> Aber das geht in Ordnung zu sein.
Das wird tatsächlich geworden etwas, Sie gehen zu gewöhnen.
Jetzt haben Sie die Grundlagen einer Sprache,
es ist eigentlich recht einfach Lernen zu beginnen andere.
So werden wir beginnen , ein wenig zurücktreten
und beschönigen die Grund Unterschiede zwischen diesen Sprachen
und Art lassen Sie es.
Es gibt eine Menge wirklich große Ressourcen im Internet, die
werden wir beginnen Richten Sie Richtung, weil das Internet
eine große Sammlung von Informationen.
Und so ist es nicht mögen, werden Sie Heraus zwangsläufig verlieren
indem nicht die Informationen in einem Video bedeckt.
Sie werden immer noch in der Lage, zu erhalten alles was Sie brauchen und die Nutzung
Wissen Sie bereits haben up durch das Verständnis C gebaut
um die Lernkurve für diese machen andere Sprachen eigentlich viel flacher.
Ich verspreche.
>> Aber lassen Sie uns über eine Sprache sprechen das ist wirklich grundlegend für jede Web-
Seite, die HTML ist.
HTML ist die Hyper Text Markup Language.
HTML ist eine Sprache, aber es ist keine Programmiersprache.
>> HTML nicht über Variablen.
Es muss nicht Logik oder Funktionen oder so etwas.
Wir können nicht zu tun Programmierung per se in HTML.
Manchmal werden Sie hören Menschen, sich selbst zu beschreiben
als HTML-Programmierer, die ist nicht ganz richtig.
Wir können keine HTML-Programme zu schreiben.
>> HTML wird nur verwendet, um markieren Text.
Es ist eine Markup-Sprache genannt.
Und was dies does-- dieses markup-- verwenden wir Tags in HTML und diesen tags--
Diese markup-- semantisch definiert die Struktur einer Seite
und bewirkt, dass der Klartext, besteht zwischen Tags zu interpretieren
von Browsern auf unterschiedliche Weise.
Und vielleicht ist es am besten zu erklären, dies mittels einer Abbildung.
>> Hier ist eine sehr einfache HTML-Seite, nicht eine HTML-Programm wiederum eine HTML-Seite.
Und wir wissen, es ist eine HTML-Seite, weil wir
begrenzt ist alles, was mit HTML-Tags.
Also das ist, was ein HTML-Tag aussieht.
Es ist zwischen den spitzen Klammern.
Und an der Spitze haben wir feststellen, HTML und am unteren Ende,
nachdem wir getan, was anscheinend viele andere HTML,
Wir haben Winkel Schrägstrich HTML.
So dass eine Art ist die Grenze zwischen dem, was HTML ist und was nicht.
Und natürlich herkömmlich einfach wie Sie alle Ihre C-Programme geschrieben
mit Punkt C-Erweiterungen, alle Ihre HTML-Dateien
wird mit Punkt HTML-Erweiterungen zu beenden.
Aber es gibt mehr los hier.
Wir haben nicht nur diese HTML-Tags.
Wir haben diese scheinbar Ding namens ein Kopfschild.
Na ja, OK, was ist das?
>> Nun, vielleicht ist es besser, Unterscheidung durch einen Körper,
Körpers der Inhalt der Web-Seite.
Also vielleicht das Haupt-Tag definiert Zeug das ist nicht im Browser-Fenster die richtige,
aber irgendwie wichtig unsere Web-Seite korrekt wiedergegeben wird.
Beispielsweise innerhalb des head-Tag haben wir Titel-Tags.
>> So Titel als Hallo Welt, das ist eigentlich los, um das, was sein
zeigt sich in der Registerkarte in Chrome oder in Safari oder Firefox--
was auch immer Sie Browser prefer-- das ist, was los ist, um im Titel auftauchen.
Und bevor Registerkarten es zeigen würde, up in Ihre gesamte Browser-Fenster
und Sie können nur eine Seite Öffnen Sie in einem Browser-Fenster zu einem Zeitpunkt.
So, das wird das sein, Titel meiner Seite in der Registerkarte
oder das Browserfenster bar, hallo Welt.
Und dann wird der Inhalt meiner Web-Seite wird Welt sein, hallo.
Werfen wir also einen Blick auf, was einige Sache, wie diese aussehen könnte.
Dies ist eine ziemlich einfache HTML-Seite.
Also bin ich hier in meinem CS50 IDE und Ich habe in ein wenig vergrößert.
Und ich werde einfach öffnen hallo dot HTML
und zeigen Ihnen, dass dies ziemlich die Seiteninhalte, die wir zuvor gesehen.
Meine einfache HTML, Kopf-Tags, Titel-Tags, Körper, und so weiter.
Ich habe eingerückt sauber sein.
>> Und dann, was ich tun kann, meine in IDE ist nur eine Vorschau der Seite.
Und wir gehen.
Der Inhalt meiner Seite gibt es weltweit, hallo, und ich sehe nichts
in der Kopf-Tags gibt.
Es ist nur der Inhalt des Körpers.
Welt, hallo.
Und wieder der Körper gerade sagte, welt, hallo.
Der andere Teil fehlt.
>> Also das ist wirklich alles, was es ist.
Dies ist eine sehr einfache Grund HTML-Seite.
Jetzt habe ich meine HTML eingerückt wirklich nett und organisiert,
aber ich weiß nicht wirklich zu.
Ich könnte es so aussehen ziemlich hässlich.
Und dies würde immer noch funktionieren.
Das wäre genau die gleiche Web-Seite sein.
Ich habe gerade losgeworden all den weißen Raum.
>> Wie sich herausstellt, ist weiß Raumdaten.
Und so, wenn wir Daten aus Senden Sender zum Empfänger, vom Server
Client, Kosten Daten Geld.
Und so immer von Whitespace zu befreien ist eigentlich eine gute Idee
wenn Sie jemand sind, der dient eine Menge von Web-Inhalten.
Es ist eine schlechte Idee, wenn Sie jemanden, der das Erlernen dieses Zeug
und Sie haben wollen es gut organisiert.
Dies ist viel einfacher zu analysieren als dies.
Aber es ist funktional identisch.
>> Die Vertiefung und solche Sachen nicht wirklich in HTML Rolle.
Alles was zählt ist das Öffnen-Tags und Schließen-Tags in der richtigen Reihenfolge.
Beachten Sie, was hier passiert, wenn.
Das Markup gibt uns eine Möglichkeit, kommunizieren zusätzliche Informationen
über das, was wir geschrieben haben.
Die Hallo Welt Teil war wie der Titel interpretiert.
Und die Welt war hallo Teil als Inhalt interpretiert
oder, was sein sollte sichtbar auf meiner Webseite.
>> Es gibt über 100 dieser verschiedenen Tags und viele große Ressourcen
Online, sie zu finden.
Wir werden zu einem Gespräch Einige von ihnen in diesem Video, einige
der wirklich grundlegenden Sachen.
Aber wir werden nicht die Rede über alles, weil sie
wäre vollständig, dies zu tun.
>> Eine andere Sache, die Sie tun können, obwohl, ist eröffnen Entwickler-Tools.
Und wenn Sie von erinnern unsere Video-on-HTTP,
Ich erklärte, wie zu öffnen up-Entwickler-Tools.
In Chrome ist es meist die Taste F12 zu öffnen, die Developer Toolbar.
Dann statt der Wahl des Netzwerk Registerkarte können Sie auf die Registerkarte Elemente auswählen.
Und wenn Sie einen Web-Laden Seite finden Sie tatsächlich
Link zu den HTML, die diese Web-Seite erstellt.
Und so können Sie eine Menge über HTML lernen können Dazu suchen Sie in Ihren bevorzugten Websites
und sehen, wie sie beim Aufbau der verschiedene Stücke von ihnen, dass Sie mögen.
Vielleicht gibt es diese coole Muster oder so ähnlich.
Wie machen sie es mit HTML?
Nun können Sie einfach öffnen Sie Ihren Entwickler Werkzeuge und schweben über diesem Element
und genau sehen, was HTML macht es.
Also das ist ein wirklich guter Weg, um HTML zu lernen,
und ich empfehle dringend, Sie tun es sowohl zu lernen HTML
und auch ein wenig zu lernen wenig über einige der Optionen
zur Verfügung in Entwickler-Tools, die
wird sicherlich als nützlich, wie kommen Sie tun intensivere Web beginnen
Programmierung.
>> Werfen wir also einen Blick auf ein paar gemeinsame HTML-Tags.
Und wir springen und einen Blick auf was diese Tags werden auch machen
wie durch einen Blick auf einige Dateien in meinem IDE.
Also hier sind drei sehr grundlegenden Tags für Tweaking das optische Erscheinungsbild des Textes.
Es gibt B-Tags, I-Tags und U-Tags.
Bzw. was sie tun machen den Text zwischen ihnen in Fettdruck,
Kursivschrift und Unterstreichung.
Also mal sehen, was das aussehen würde wie auf einem tatsächlichen Web-Seite in meinem IDE.
>> So, hier in meinem IDE Ich habe ein Datei namens BIU dot HTML.
BIU dot HTML gerade fett, kursiv, unterstrichen.
Ich werde es zu öffnen.
>> Und wir werden das hier sehe ich, haben diesen Text ist B-Tags fett.
Dieser Text ist ich Tags kursiv.
Und dieser Text ist U-Tags unterstrichen.
Was wird das wohl aussehen?
Wieder gut, haben alle I zu tun ist, gehen hier
zu meinem Browser, meine Datei-Browser, klicken Sie auf Vorschau, und dies ist, was kommt.
>> Der Text zwischen den B Tags ist in der Tat jetzt fett.
Der Text zwischen dem I Tags ist in der Tat jetzt kursiv.
Und der Text zwischen dem U Tags ist in der Tat jetzt unterstrichen.
Also das ist ziemlich gut.
Wir wissen jetzt, wie Sie Text zu machen schauen ein wenig mehr Phantasie
oder zeichnen Schwerpunkt auf bestimmte Dinge.
Noch ein paar gemeinsame Tags sind hier Absatz-Tags, P und Header-Tags,
die ich hier als HX gerendert.
>> Diese P-Tags, diese Absatz-Tags, brechen Sie Ihren Text in Absätze.
Es ist nicht genug, nur Enter drücken, und lassen Räume,
weil ein Computer ist nur noch zu tun, was Sie sagen, es zu tun,
und es weiß, ignoriert Platz für den größten Teil.
So können wir nicht einfach Enter drücken und erwarten, dass unsere Computer
zu interpretieren, dass wir wollen, um einen neuen Absatz zu beginnen.
Wir müssen sehr deutlich sagen, dass dies ist einer paragraph-- dies another--
durch Einschließen jeweils in einer Reihe von P-Tags.
>> Und wir haben auch diese Optionen für H-Tags, diesen Header-Tags.
Wir haben sechs verschiedene Ebenen von Headern, eins, zwei, drei,
vier, fünf und sechs, die sind progressiv größere und größere
Überschriften.
Und sie kleiner zu bekommen und immer kleiner und kleiner.
So haben wir eine Top-Level-Header, einen zweiten Grundgehäuse, und so weiter, und so weiter.
>> Werfen wir einen Blick auf vielleicht einige P-Tags und einige Header-Tags
in Aktion auf einer Web-Seite.
So, hier in meinem IDE Ich habe eine Datei mit dem Namen PH dot HTML, PH wobei Absätzen
und Header-Tags.
Öffnen Sie, dass bis.
Es gibt eine Menge los hier denn ich habe einige lorem setzen
ipsum, einige nur zufälligen Text hier.
Also werde ich zoom out ein wenig denn es gibt so viel los.
Aber beachten Sie, dass ich ganz am top hier, ich habe ein H1, ein Niveau ein,
Header-Tag.
Dann habe ich noch einen Absatz, der gerade ist eine Reihe von zufälligen text-- lorem ipsum--
nur Standardstandardfüllung im Text.
So habe ich zwei Absätze Innenseite, dass Stufe eins Header und dann unten I
eine Stufe zwei Kopf hier auf der Leitung 24, eine zweite Ebene Header, und zwei weitere
Randnrn.
Nun, was bedeutet das aussehen wenn ich es sehen in meiner Vorschau?
Mal sehen.
>> So fest, dass die erste Ebene Header hier
ist eigentlich ganz ein bisschen größer als die zweite Ebene Header.
So nutzten wir H1-Tags.
Und beachten Sie, dass die P-Tags erlauben es uns die Dinge in den Absätzen auszubrechen.
Hätten wir losgeworden diesen P-Tags und tatsächlich hat gerade Aufrufen oder Rückgabe
in dem, was wir hofften, werden die verschiedenen Absätzen,
sie würden alles nur zusammen zuschlagen und es wäre nicht dieses nette Absatz
Trennung mit Platz oben und unten.
Und so das ist, was Absatz Tags und Header-Tags
werden häufig verwendet, um zu tun, um zu zeichnen Aufmerksamkeit auf Bereiche unserer Web-Seite
Auf diese Weise.
>> Weiter oben sind nur einige Schlagworte, die wir verwenden Listen Sie auf unserer Web-Seite zu bauen.
So haben wir ungeordnete lists-- ULs-- denen gerade sind
Aufzählungen, bestellt Liste, die numbered-- sind
OLs-- und innen entweder einer von denen, die wir benötigen, sind
Sätze wie Sie Listenelemente anzuzeigen, LI.
Und so haben wir offene UL-Tag und wir setzen Artikel darin.
Und dann, wenn wir es zu tun dass können wir die UL-Tag zu schließen.
>> Und in ähnlicher Weise die wir haben können eine geordnete oder nummerierte Liste
und legte Listenelemente im Inneren davon.
Werfen wir also einen Blick auf ein paar Listen
und was sie wollten machen wie auf CS50 IDE.
Also ich habe hier in meinem IDE ein Datei namens Listen dot HTML.
Lass uns einen Blick darauf werfen.
>> Und beachtet hier habe ich eine ungeordnete Liste mit fünf Dinge in ihm.
Und dann habe ich eine geordnete Liste, und Ich habe den Tag ein wenig verändert,
Recht?
Ich habe gesagt, Start gleich sechs.
Es stellt sich heraus mit einer geordneten Liste I kann der Startpunkt, wo immer gesetzt
Ich want-- wird er per default one-- sein indem einfach diese so genannte Attribut
zu meinem OL-Tag.
Und so wird diese Liste Zählen beginnen um sechs.
So sind die Elemente dieser nummerierte Liste sollte sechs, sieben, acht, neun, zehn,
denn es gibt fünf Elemente in der Liste ist, im Gegensatz zu einem,
zwei, drei, vier, fünf, die was der Fall wäre, wenn ich die OL
ohne Angabe der Start-Attribut.
>> So werden wir nur eine Vorschau, so dass Sie diese bekommen ein Gefühl für das, was hier vor sich geht.
Und wir gehen.
Es ist meine Liste.
Die ersten fünf Elemente sind ungeordnete oder Listen mit Aufzählungszeichen.
Und die nächsten fünf Elemente sind ein separater geordnete Liste
ab sechs.
Also das ist, wie wir können, bauen mit Hilfe von HTML-Listen.
Eine andere Sache, die Sie will mit HTML zu tun
ist eine Tabelle erstellen Daten von Zeilen und Spalten
um Informationen in einer Gegenwart besonders organisierten Art und Weise.
Um dies mit HTML machen wir eine haben Tabellendefinition beginnend offene Bügel
Tabelle.
Und dann in der Tabelle wir könnte eine Reihe von Zeilen, TR-Tags haben
um jede Zeile anzuzeigen.
Und dann TD-Tags gehen Innenseite TR-Tags um eine Spalte innerhalb einer Zeile angeben.
>> Warum heißt es TD und TC nicht?
Nun, steht TD für die Tabellendaten.
Normalerweise Sie setzen Ihre Informationen gibt.
Also das ist, warum es TD und nicht TC.
Es ist ein wenig verwirrend.
>> So können Sie Tabellen-Tags haben und Innenseite der Tabellen-Tags
Sie haben eine Anzahl von Reihen, TRs.
Und innerhalb jeder Zeile, die Sie haben TDS für die Anzahl der Spalten,
dass Sie haben wollen in dieser bestimmten Zeile.
Werfen wir einen Blick auf eine sehr einfache Tabelle über in CS50 IDE.
>> Also ich habe hier eine Datei genannt Tisch dot HTML.
Lassen Sie uns einen Blick auf , wie das aussieht.
Es gibt eine Menge los hier, aber wenn Sie feststellen, ich habe eine Tabelle geöffnet.
Ich fange die Definition mit Tisch.
Und dann in meinem ersten Reihe I offenbar vier Säulen, eins, zwei, drei,
vier.
Und dann bin ich mit dieser Zeile durchgeführt.
>> Dann eine weitere Zeile zu beginnen und ich machen zwei, vier, sechs, acht.
Beenden Sie diese Zeile.
Neue Reihe, drei, sechs, neun, 12.
Und dann eine letzte Reihe, vier, acht, 12, und wenn es
ein wenig aus sich hier schneiden, 16.
>> Ich beendete die Zeile.
Ich beendete die Tabelle.
Und dann bin ich mit meinem HTML getan.
Was bedeutet das aussehen?
Nun, es ist nicht wirklich viel zu sehen.
Ich habe meine Informationen übersichtlich in einer etwas organisierten Art und Weise.
Aber es ist nicht super hübsch hier.
Und wir werden zu behandeln , dass, wenn wir über CSS zu sprechen.
Wir werden diese Idee überdenken was wir tun, um eine table-- machen
formatieren Sie es vielleicht ein bisschen besser?
Aber ich weiß noch vier Reihen, von denen jede vier Spalten,
und wirklich, was diese beläuft sich auf eine sehr einfach vier mal vier Multiplikations
Tabelle.
>> Nur noch ein paar Tags werden wir darüber reden.
Lassen Sie uns über das zu sprechen Konzept der ein HTML-Formular.
So können Sie diese in die gesehen haben Zusammenhang mit der Anmeldung in einer Web-Seite.
Normalerweise geben Sie Ihren Benutzernamen an.
Sie geben Sie Ihr Passwort vergessen, und du bist gut zu gehen.
Das wäre der Beginn einer Form vorliegen.
>> Überspringen div ein zweites.
Wir haben auch Eingänge, Art passen Innenseite bildet.
Dies sind die Elemente, Sie tatsächlich der Eingabe in,
oder die Radio-Buttons sind Sie tickt oder der Scheck
Boxen, die Sie tickt sind ausgeschaltet.
So gehen diese im Inneren der Formen.
Und sie im Grunde enthalten jede Reihe von der Form
wenn Ihre Form ist gut formatiert.
Dann gibt es dieses Konzept der ein div, die nicht wirklich
passen in einer bestimmten Kategorie von Tags wie die, die ich habe
zuvor machen.
Es ist einfach die Art von abgrenzt beginnend von einer beliebigen division--
div-- der Seite.
Es gibt keine visuelle Pause.
Es gibt keine Linie.
Es ist nicht weg als Set separates Stück automatisch.
Sie müssten es stylen auf diese Weise, das zu tun.
>> Es einfach irgendwie sagt, ich möchte, dass ein Stück Platz auf meiner Web-Seite,
und ich werde einfach anrufen es diese Aufteilung meiner Seite.
Wir können Sachen nach innen setzen der divs, und in der Tat,
wenn wir den Kopf über IDE in einer zweiten, werden wir
sehen, dass Ich setze meine bilden innerhalb eines div.
>> Also ich habe hier in meinem IDE ein Datei namens div Form dot HTML.
Lassen Sie öffnen Sie es.
Beachten Sie, dass, wie ich sagte, div ist ein bisschen willkürlich.
Recht?
Es ist nicht wirklich alles bedeuten.
So habe ich eine beliebige ersten Liga auf meiner Seite.
Und dann anstelle eines anderen div später, beginnend in Zeile acht,
Ich habe dieses Formular.
Und im Inneren der Form habe ich einen Anzahl der Eingänge, Felder des Formulars.
So habe ich ein Feld, dessen Name A-- was nicht wirklich bedeutet nichts
Recht now-- die offenbar statt Text, eine andere, die
dauert ein Passwort, eine andere, die ein Radio Button, eine andere, die ein Kontrollkästchen ist,
und eine andere, ist ein Submit-Button.
Nun, was tut dies, alle eigentlich aus?
Nun, lassen Sie uns einen Blick.
Wir werden es öffnen in unserer Vorschau-Fenster.
Beachten Sie, dass dieser willkürliche erste division-- es gibt
keine optische Trennung hier.
Es hat nicht wirklich etwas zu tun, oder?
>> Und dann habe ich meine Form.
Und ich habe keine spezielle Formatierung nicht.
So ist die Form ist nur eine große Reihe von Informationen.
Wenn ich meine Form unterschiedlich formatiert, Ich habe könnte es durch die Linie Zeile für Zeile.
Aber ich habe keine Styling nicht.
Auch hier sprechen wir nicht über CSS sprechen hier.
Wir sprachen gerade über HTML.
>> Nun, in meinem Textform I Typ-- können daran erinnern, dass Formen der Typ text
so kann ich meinen Namen setzen.
Und mein Passwort vergessen Ich kann mein Kennwort eingeben.
Und weil dieses Feld ist vom Typ Kennwort ein,
Sie weiß nicht, was mein Passwort.
Es ist alle Punkte.
>> Ich kann auch wählen, abhaken ein Radio-Button oder abhaken ein Kontrollkästchen.
Oder ich könnte meine Form einzureichen.
Und ich habe nichts getan, so, wenn ich mein Formular abgesendet haben,
die Seite lediglich aktualisiert.
Aber ich konnte vielleicht konfigurieren meiner Submit-Button, um etwas anderes zu tun.
Und wir werden sehen, was wir tun können, mit , dass in einem zukünftigen Video bei PHP.
Aber das baut eine sehr einfache Form, die wir
verwenden können Benutzer interagieren zu haben und Vorlage von Informationen auf unserer Website.
>> Eine letzte Bemerkung, bevor wir fahren Sie mit einigen anderen Tags
sind, um einen Blick auf diese zu nehmen input-Tag noch einmal.
Beachten Sie, dass ich hervorgehoben die Enden des Etiketts in rot.
Jeden zweiten Tag, die wir bisher gesehen hat hat einen Anfang und ein Ende hat, die eine Öffnung
Tag und einem schließenden Tag.
>> Aber eine Eingangs Tag nicht.
Es gibt keinen Text, der geht zwischen Eingangs-Tags.
Alle Informationen, wir beabsichtigen, zu vermitteln
wird als Teil des gebundenen Attribute dieser Eingabe.
Beachten Sie, wir haben input name gleich x.
Type gleich y.
Das ist wirklich alles das Informationen die wir brauchen.
>> Dies wird als eine selbstschließende Tag.
Es keine Öffnung und eine benötigen nahe, weil alle Informationen,
ist innerhalb der enthaltenen Tag und seine Attribute.
Also manchmal werden Sie das sehen, auch.
Also einfach bewusst sein, dass, wenn Sie eine Tag, das vollständig in sich geschlossen ist,
Es öffnet und schließt sich selbst mit der offene Winkel auf der linken Seite
und der Schrägstrich Winkel Klammer auf der rechten Seite.
Wir werden ein anderes jener zu sehen jetzt mit Image-Tags als auch.
>> Bevor wir über Bilder sprechen, die wir müssen über Hyperlinks zu sprechen.
Wenn wir wollen, dass unsere Web-Seite zu sein interaktive und bewegen uns herum,
es wäre schön, in der Lage sein auf einer von denen, klicken Sie auf
was in der Regel ein blauer Link.
Dies ist tatsächlich, wie wir bauen ein Hyperlink in unserer Web-Seite.
Und interessanterweise es gibt eine andere HTML-Tag
genannte Link, das ist kein Hyperlink.
A steht dabei für Anker und das ist, wie wir zeigen einen Hyperlink.
>> A href gleich x Mittel gehen Web-Seite X. Und alles
zwischen der offenen A-Tag und die in der Nähe A-Tag
ist was los zu sein, dass unterstrichen blauer Text, der aussieht wie ein Link
dass wir kennen.
Unten, dass wir ein Image-Tag, der ist eine selbstschließende Tag für die Anzeige
ein Bild auf X. befindet Sie könnten zu ändern
dass Bild durch Angabe Breite und Höhe
und andere Attribute in dass Punkt Punkt Punkt gibt.
>> Ganz unten hier Wir haben eine sehr interessante
Suche Tag, das nicht der Fall ist einen End-Tag.
Es ist Ausrufezeichen Doctype HTML.
So HTML gibt es schon seit dem gewesen Anfang der 1990er Jahre für den Aufbau von Web-Seiten,
und es ist unterzogen gegangen mehrere Revisionen seither.
Zuletzt im Jahr 2014 es eine Revision unterzog
genannt HTML5 das ist jetzt der aktuelle Art De-facto-HTML-Standard.
>> Um anzuzeigen, dass unsere Web- Seiten werden geschrieben mit HTML5,
das ist, wie wir starten.
Es kann weggelassen werden, aber was das grundsätzlich
Mittel ist, können Sie nicht verwenden Sie eine der Tags dass HTML5-Tags, diese neuen Tags sind.
So beginnen wir immer ausgeschaltet wenn wir mit HTML5.
Und all die Tags haben wir darüber gesprochen zuvor nicht HTML5-Tags.
Aber das würde zeigen, dass HTML5-Tags werden anwesend sein.
Und so haben wir Ausrufe Doctype HTML, die
ist gleich zu Beginn unserer HTML-Datei, und nach diesem Punkt
haben wir eigentlich unsere HTML geöffnet markieren und gehen von dort aus.
>> Der letzte ist ein Kommentar-Tag, die etwas anders aussieht, auch.
Es beginnt mit dem Winkel Halterung Ausrufe dash
dash aber keine schließende Klammer.
Zwischen diesen beiden Elementen besteht ist, wo Sie Ihre Kommentare zu schreiben.
Und lassen Sie uns einen Blick auf Bilder und Kommentare und Links in CS50 IDE.
>> Also ich habe hier eine Datei namens Image-Link dot HTML, das werde ich eröffnen.
Und beachten Sie, ich habe ein paar bekam kommentiert hier in meinem HTML-Kommentare.
So genau wie in C und anderen Programmiersprachen,
HTML, nur weil eine Markup-Sprache nicht die Möglichkeit haben, Anmerkungen haben.
Und so bin ich offenbar werde setzen ein Bild von Rick Astley
irgendwo zwischen diesem div Tag, diese willkürliche Teilung.
Anscheinend Datei Rick dot JPEG, Lokalität
wenn wir den Kopf nach hinten über meinem Dateibaum für eine zweite,
ist eine Datei, in existiert das aktuelle Verzeichnis.
Also das ist OK.
Ich kann darauf verweisen.
>> Dann kann ich interne Links haben.
So bemerken in Zeile 11 hier meine href ist hallo dot HTML.
So dass nur bezieht sich auf hallo dot HTML was existiert im aktuellen Verzeichnis.
Und ich kann auch externe Links nur durch Angabe HTTPS
um anzuzeigen, dass ich spreche nicht über eine Datei in meinem aktuellen Verzeichnis.
Ich freue mich über eine Datei, die es gibt im Gespräch irgendwo im Internet, die ich
zu beantragen, über das HTTP-Protokoll.
>> Werfen wir also einen Blick auf das, was Diese Seite aussehen könnte
und machen Sie sich bereit für ein Bild von Rick Astley zu zeigen, bis auf dem Bildschirm.
Also werde ich diese in der Vorschau.
Es gibt Rick Astley am Ganz oben in dieser willkürlichen
Division Ich habe es an der Spitze.
Und dann unten I habe meine Links, oder?
>> Ich habe einen Link, um hallo dot HTML.
Und wenn ich Sie auf, dass, ich bekomme auf dieser Seite über bewegt
dass wir sehr vertraut mit aus der Anfang unseres Programms.
Wenn ich Pop die Seite wieder öffnen, wenn ich Pop-Image-Link öffnet ein weiteres Mal,
Ich kann auch extern gehen In den CS50-Website.
Und es see-- wir Ich werde zoom out ein wenig hier--
wir CS50-Website Art zu sehen in der Mitte unserer Seite eingebettet.
So konnte ich eine interne zu machen Verlinken sowie ein externer Link.
>> Die letzte Regel mit HTML, werden wir hier sprechen
ist, dass Ihr HTML sollte gut ausgebildet sein.
In C sprachen wir viel über Die verschiedenen Syntax der Dinge.
In HTML-Syntax wirklich dreht sich um Tags.
Jeden Tag, das Sie öffnen, muss geschlossen werden.
Und in der Tat, jeden Tag, das Sie öffnen sollte in umgekehrter Reihenfolge geschlossen werden.
>> Also, wenn Sie eine mutige Tag zu öffnen, ein italic Tag, und dann ein Unterstrich-Tag
, alle drei zu einem zu tun bestimmten Satz von Text,
sollten Sie sie in umgekehrter Reihenfolge zu schließen.
Also, wenn Sie fett geöffnet, kursiv, unterstrichen, die Sie
möchte unterstreichen, kursiv zu schließen, fett.
Diese Art der Einkapselung ist, was hält HTML nett und organisiert.
>> Im Gegensatz zu C, obwohl, werden Syntaxfehler nicht tatsächlich Krüppel Ihren HTML möglich.
Ihre HTML kann nicht gut sein gebildet, aber immer noch funktionieren würde.
Und so werden diese Fehler kann der Schieber nach zu sortieren.
Es liegt an Ihnen, um wirklich wachsam sein.
Manchmal werden sie scheitern, aber manchmal können Sie sich mit ihm weg.
>> Es kann einen wirklich sein, schwierige Aufgabe, wenn auch,
zu verfolgen, wenn Sie geöffnet zu halten ein Tag, wenn Sie es geschlossen ist,
vor allem als Ihr HTML Dateien größer und größer.
Du wirst etwas Hilfe möchten.
Und es gibt Online- Validator Tools, die Sie
verwenden können, um einen Blick auf Ihre Web haben Seite und sehen, ob es gut geformt HTML.
Und Sie sollten auf jeden Fall einen Blick auf diejenigen,
und beginnen, sie, wie Sie verwenden, beginnen, etwas Arbeit mit HTML,
Schreiben von HTML, nur so erhalten einige gute Gewohnheiten zu organisieren
Ihre HTML in einem guten Weg und guten Stil und dafür sorgen,
dass man nicht alles tun, dass könnte einen Syntaxfehler zu schaffen, dass
würden Sie ein wenig bewirken ein Problem auf dem Weg.
>> Ich bin Doug Lloyd.
Dies ist CS50.