DAVEN FARNHAM: Heute werde ich zu gehen sprechen ein wenig über HTML, Hypertext Markup Language. Sie sehen HTML überall in diesen Tagen. In der Tat, wenn Sie beobachten diese Video in einem Browser, sind Sie jetzt sehen, HTML. HTML ist keine Programmiersprache, vielmehr eine Markup-Sprache verwendet, ist es Web-Browser, um Seiten zu machen über das Internet. 

So könnte man fragen, wie genau ist das Schreiben eine Web-Seite in HTML verschiedene aus ein Programm in einer Programmiersprache zu schreiben Sprache wie C? Nun, C ist eine Sprache mit sehr strengen syntaktischen Regeln, die sein muss zusammengestellt, bevor sie ausgeführt werden können. Wenn Sie schon einmal vergessen haben, gehören ein Semikolon am Ende einer Anweisung in Ihre C-Code, wissen Sie, wovon ich rede etwa in Bezug auf die strengen Syntax. 

Web-Browser sind jedoch ein wenig verzeihen, wenn es um HTML geht. Selbst wenn Ihr HTML ist nicht syntaktisch richtig, können Ihre Seite noch sein von einem Browser angezeigt wird, aber es könnte nicht aus, als Sie gedacht. So ist es immer am besten, die Regeln einhalten. Der beste Weg, um ein Gespür zu bekommen wie die Dinge Arbeit ist es, gehen durch ein Beispiel. 

Also, was wir hier haben, ist ein Grund Blaupause für eine Web-Seite. Sie haben wahrscheinlich bemerkt, eine Menge Dinge zwischen spitzen Klammern. Nun, das sind nur Schlagworte. Schlagwörter grundsätzlich informieren Web-Browser dass, hey, etwas ist im Anflug. Denken Sie jedoch daran, wenn Sie öffnen ein -Tag, um es zu schließen, sobald Sie sind müssen Sie Sie es getan. 

So zum Beispiel, einen Abschnitt zu öffnen I Code mit offenen Klammerkörper, Klammer zu. Ich habe dann einen Text hinzufügen, in diesem Fall, mein erste Web-Seite dann als ich ging, Schließen dieser Sektion, verwende ich fast eine identisch Tag außer dieser Zeit mit einer Schrägstrich vor dem Körper. In der Regel ist dies das Format Sie verwenden wollen, wann immer Sie öffnen und schließende Tags. Gemeinsam eine offene-Tag und einem End-Tag komponieren, was ein Element bezeichnet. 

Wenn Sie in der ersten Zeile anschauen, werden Sie sehen Sie ein Ausrufezeichen gefolgt von DOCTYPE html. Das ist wirklich nur sagen Ihrem Browser , dass die Datei eine Web-Seite in HTML geschrieben. Der HTML-Tag sagt im Wesentlichen, hier kommt einige HTML. Dann haben wir eine Kopf-Tag mit ein Titel-Tag in seinem Inneren. Der Kopf der Tag, das Sie sich vorstellen können, wie bestehend aus HTML-Code, der für kommt der Großteil Ihrer Web-Seite eigentlichen Inhalt. 

In der Regel den Titel setzen Sie Ihre Webseite hier, obwohl es einige andere Tags, die angezeigt werden können auch hier. Als nächstes kommt Ihr Körper Web-Seite, die Ist Fleisch und Knochen von Ihrer Website. In unserem Beispiel haben wir gerade gestellt habe eine einfache Satz, meine erste Webseite, , die, wenn wir unser Website aussehen wird ein wenig etwas wie dieses. Unsere Web-Seite ist nicht zu eigenartig, aber keine Sorge. Wir werden es bald Fichte. 

Also die oben HTML, wir geben Ihnen eine sehr Grund Vorlage für eine Web-Seite, nichts Besonderes, nur die blanken Knochen. Aber wenn ich die Erstellung einer Web-Seite, was, wenn ich eine hinzufügen Bild von, sagen wir, mir selbst? Nun, ich kann das tun. Es gibt ein paar Möglichkeiten, Bilder hinzufügen, um Ihre Website. Wenn das Bild in den gleichen Ordner wie Ihre HTML-Datei, können Sie auf den Link Bild über den Weg wie dieses. 

Sie öffnen mit einem Image-Tag, gefolgt durch in Alt-Attribut in der Quelle des Bildes. Der Wert des Alt-Attribut ist nur einige Alternativtext, falls ein Benutzer nicht sehen Sie das Bild. Alternativ können Sie auch die auf Bilder über eine vollständige URL, wie diese. Nun bedeutet, dass die Website nicht wirklich existiert, aber wenn es ein Bild von mich an dieser Adresse, die ich verwenden könnte die Quell-URL zu schließen sein Bild auf meiner Webseite. So oder so, Sie am Ende mit einem viel hübscher Website, etwas wie dieses. 

Nun, das ist ziemlich cool, aber ich Art wollen einige der Text auch hier. Also lassen Sie uns nur etwas hinzufügen super einfach über die Bild, wie der Kopfzeile. Alles, was ich bisher gemacht habe ist die Kopfzeile verwenden tag, H1, und ein Zeilenumbruch-Tag, br. Die Header-Tag macht die Schrift ein wenig etwas größer und mehr im Vordergrund. Der Zeilenumbruch-Tag, auf der anderen Seits ist irgendwie cool. Anders als die meisten anderen Tags, die Sie nicht haben, ein Öffnen und Schließen Pause-Tag, nur die oben gezeigte einem. Dies liegt daran, Pause hat keinen Inhalt und ist daher ein leeres Element. 

Leere Elemente wie diese, die Sie öffnen können und gleichzeitig in der Nähe einfach durch einschließlich einem Schrägstrich am Ende der ersten Erklärung. So, jetzt meine Website sieht ein wenig so etwas. Besser, aber es ist irgendwie fühlt wie eine Sackgasse. Es gibt nirgendwo sonst beiseite zu gehen von dieser Seite an. Nun, lassen Sie beheben, dass durch die mit einem Link. 

Was ich hier tun, ist eine Attribut erkennbar am und machen die Bild einen Link zu, sagen wir, CS50-TV. So, wenn jemand auf mich klickt, ihren Browser umgeleitet wird anderen, vermutlich nützlich, Web-Seite. Ich habe, um die Größe der zu minimieren Text ein wenig, weil unsere Web-Seite ist immer weiter fortgeschritten. Aber hoffentlich ist es immer noch klar. Meine Website sieht genau das gleiche nur jetzt, wenn ich auf das Bild klicken, mein Browser öffnen ein weiteres Registerkarte für die Web-Seite CS50.tv. 

Schließlich sagen wir, ich bin um Stil geht Diese Website später mit Hilfe von CSS. CSS ist, was als eine bekannte Cascading Style Sheet. Und es im Grunde ein effizientes Weise zu bearbeiten und Stil Ähnliche Codeblöcke. Ich möchte beginnen Organisation meiner HTML machen es einfacher, später Stil. Hier stellte ich zwei verschiedene Arten von Kennungen zu helfen, meinen Code zu organisieren. Ich habe das ID-Attribut verwendet, innerhalb einer Division oder div-Tag, und ich habe ein gebrauchtes Class-Attribut im Inneren ein weiteres div-Tag. 

ID-und Klassenattribute funktionieren ähnlich. Der einzige Unterschied ist, dass Sie nur können ein Element, das spezifische ID, eine beliebige Anzahl von Elementen können eine Klasse zu teilen. So zum Beispiel, kann ich die Klasse zu verwenden Bild mehrmals, aber ich kann nicht erstellen Sie eine andere Abteilung mit der ID-Spitze. Obwohl ich nicht in CSS weg, eine andere Sprache häufig verwendet, neben HTML, sobald ich starten Styling mein Code mit CSS, kann ich diese verwenden Organisations Attribute Einfluss Ästhetik meiner Web-Seite. 

Alles, was innerhalb der Division oben ähnlich Stylings oder welche haben andere Gruppe von HTML-I-Gruppe in der Bildklasse wird einen ähnlichen Blick zu teilen. Das ist viel einfacher als zu versuchen, zu bearbeiten und Stil Bilder oder Blöcke von Text individuell. 

Also über die Grundlagen, wie ging es eine Web-Seite mit HTML zu machen. HTML hat eine Reihe von anderen Funktionen zu dass, wenn gepaart mit anderen Sprachen wie CSS und JavaScript, wirklich kann machen Seiten abheben. Der beste Weg, sich bequem zu machen HTML ist nur zu Chaos mit sich herum, sehen, was funktioniert und was nicht. 

Mein Name ist Daven Farnham. Dies ist CS50. 

So zum Beispiel, die ich verwenden kann die Klasse Bild - Nein, es gibt so viele Attribute. Mein Name ist Daven Farnham. Dies ist CS 650. Ich möchte sagen, CSS. Dies ist CSS.