HTML Tutorial - Lernen Sie eine Website mit HTML-Design ()
Kapitel 1: Das Anfängerbuch für das Erlernen von HTML und CSS
Vorfragen
Tutorials sowohl kostenlose als auch kommerzielle visuelle Web-Editoren können auf den folgenden Seiten zu finden:
Dreamweaver CS6 Tutorial - Dreamweaver sind ein bekannter kommerzieller Web-Editor. Wenn Sie eine ältere Version von Dreamweaver verwenden, lesen Sie die entsprechenden Versionen des Tutorials statt, wie die Dreamweaver CS5.5 Tutorial sehen. das Dreamweaver CS5 Tutorial. das Dreamweaver CS4 Tutorial oder Dreamweaver CS3 Tutorial.
BlueGriffon Tutorial - BlueGriffon ist ein freier, Open-Source-Web-Editor.
Ich habe Tutorials für andere weniger bekannte Web-Editoren als auch. Die Liste der Tutorials für diese verschiedenen Editoren können auf der Tutorials für WYSIWYG Web-Editoren Seite. Dazu gehört auch die NetObjects Fusion 11 Tutorial (ein kommerzieller Web-Editor) und das Nvu Tutorial (eine alte Version von KompoZer).
In diesem Handbuch fehlen bestimmte wichtige Schritte
HTML ist nicht genug
Holen Sie sich einen Proper Texteditor
Das erste, was Sie brauchen, ist eine richtige Texteditor zu erhalten. Lassen Sie mich durch sie bestimmte Dinge beginnen, so dass es kein Missverständnis darüber, was ich meine, wenn ich „richtiges Texteditor“ sagen.
Sie NICHT Notepad
Ich weiß, dass, wenn ich „Texteditor“ erwähnt, einige Leute dachten wohl, „kein Problem, mein Computer verwendet Windows, die mit dem Editor kommt“.
Verwenden Sie keine Word Processor
Nicht Textverarbeitungs Hand-Code HTML-Dateien verwenden. Textverarbeitungsprogramme einfügen versteckte (und unsichtbar) Code in Ihre Dateien, die nicht Teil von HTML sind.
Mit dem Textverarbeitungsprogramme, meine ich jedes Programm, das Sie Text zu unterstreichen können, Text fett machen, setzen Sie Text kursiv, Erstellen von Tabellen usw. Dazu gehören Microsoft Word, Libreoffice, OpenOffice.org und alle Sachen in den Word-Freie aufgelistet Prozessoren und Office-Suites Seite. Es enthält auch Wordpad, die mit Windows geliefert wird. Ja, das ist Wordpad ein rudimentäres Textverarbeitung. Verwenden Sie es nicht für diesen Zweck verwenden.
Denken Sie daran: die Art der Texteditoren ich spreche nicht erlauben Sie Dinge wie unterstrichenen Wörter zu tun, setzen Sie Text fett, usw. Sie verhalten sich wie Notepad (ohne die Probleme dieser hat). Wenn Ihr Programm diese Arten von Funktionen hat, ist es nicht ein Texteditor, sondern eine Blas- Textverarbeitung.
Es gibt viele kostenlose und kommerzielle Texteditoren arounds
Einige von Ihnen denken wahrscheinlich an dieser Stelle, dass ich habe gerade über alles, was auf Ihrem Computersystem ausgeschlossen. Keine Sorge. Text-Editoren sind ein Groschen ein Dutzend im Internet. In der Tat brauchen Sie nicht einmal einen Cent. Es gibt Myriaden von Texteditoren um. (Und Myriaden von kommerziellen Auch was das betrifft. Programmierer scheinen Texteditoren zu lieben zu schaffen.)
Eine Liste von freien Texteditoren können auf den folgenden Seiten zu finden:
Free HTML-Editoren und WYSIWYG-Web-Editoren - obwohl dieser Seite zeigt die beiden Texteditoren sowie WYSIWYG Web-Editoren, denken Sie daran, dass Sie nur für einen Texteditor suchen, so dass Sie den WYSIWYG-Web-Editoren Abschnitt dieser Seite ignorieren. (Falls Sie sich fragen, die HTML-Editoren auf der Seite aufgelistet sind nur Texteditoren. Sie verwendet werden können HTML-Code, Programmcode oder andere Arten von Klartext eingeben.)
(Eigentlich für Anfänger, die Chancen sind, dass jeder eine, die Sie gerade fein holen funktioniert.)
Wenn Sie Dreamweaver.
Wenn Sie bereits Dreamweaver haben. Sie müssen keine separaten Texteditor erhalten. wechseln Sie einfach zu Codeansicht Dreamweaver. Das heißt, klicken Sie auf „Ansicht“ in der Menüleiste und „Code“ aus dem Drop-Down-Menü, das erscheint. Diese schaltet Dreamweaver aus seiner visuellen Design-Oberfläche zu seiner Text-Editor-Schnittstelle.
Ihre erste Web-Seite
Nun, da ich Sie zu Tränen mit den Vorrundenspielen gebohrt haben, lassen Sie sie nur direkt in das tiefe Ende des Pools sofort.
Bevor wir den Code oben diskutieren, fügen Sie es in Ihren Text-Editor kopieren und es als „sample.html“ auf Ihrem Desktop mit dem Namen Datei speichern. Ich weiß, es ist leicht, einfach hier meine Worte zu entlassen und diesen Schritt überspringen, aber tun es wird Ihr Lernen beschleunigen und verbessern Ihr Verständnis von dem, was ich rede später über. (Sie werden auch den Code werden zu modifizieren, wie wir entlang gehen.) Es gibt auch eine sekundäre (weniger wichtig) zugute kommen, dass es hilft Ihnen mit Ihrem Texteditor vertraut.
Für diejenigen, die nicht wissen, wie zu tun, was ich gerade gesagt habe im obigen Absatz, klicken Sie einmal in der Tabelle oben den Code enthält. Der Inhalt der Box automatisch hervorgehoben werden soll. Wenn nicht, ziehen Sie mit der Maus über den Text und manuell alles auswählen. Dann klicken Sie mit der rechten Maustaste. In dem Menü, das, klicken Sie auf „Kopieren“ erscheint. Starten Sie Ihren Texteditor. Klicken Sie auf „Bearbeiten“ in der Menüleiste von dem „Einfügen“ Elemente in dem Dropdown-Menü gefolgt, das erscheint. Der Text, den Sie in dem Feld siehe oben sollte in Ihrem Texteditor angezeigt werden.
Um die Datei zu speichern, klicken Sie auf das Menü „Datei“, gefolgt von dem „Save“ Elemente im Untermenü, das erscheint. Wenn Sie nach einem Dateinamen gefragt werden, wählen Sie den entsprechenden Ordner für die Datei gespeichert werden soll (zum Beispiel Ihrem Desktop, so dass Sie nicht vergessen, wo Sie es ausdrückte) und geben Sie „sample.html“ (ohne Anführungszeichen). Beachten Sie, dass ich gehe davon aus, dass Sie nicht Notepad. Wenn Sie den Editor verwenden, wird dies nicht funktionieren, da Notepad unsichtbar Ihre Dateinamen ändern hinter dem Rücken „sample.html.txt“. Verwenden Sie den Editor nicht.
Nun öffnen Sie die Datei in Ihrem Web-Browser. Eine Möglichkeit, es zu tun ist, um die Datei auf Ihrem Desktop doppelklicken. Die Datei sollte in Ihrem Standard-Web-Browser angezeigt werden. Halten Sie sowohl den Browser und den Texteditor geöffnet. Das heißt, nicht schließen oder entweder Programm verlassen.
Die Logik der HTML
Schauen Sie sich den HTML-Code (entweder in Ihrem Texteditor oder in diesem Artikel Scrollen nach oben).
Alle diese spitzen Klammern Wörter (oder Buchstaben) werden gewöhnlich als „HTML-Tags“ genannt. In HTML, kommen die meisten Tags in Paaren, mit der schmucklosen Version, wie "
„Verwendet wird, um den Beginn von etwas, um anzuzeigen, und die Version mit einem vorangestellten Schrägstrich (‚/‘), wie“ “, Wobei zu kennzeichnen das Ende von etwas verwendet.Jeder Tag hat eine bestimmte Funktion. Zum Beispiel die "
" und "
„Tag-Paar wird verwendet, um den Beginn und das Ende eines Absatzes anzuzeigen. (Denken Sie an die‚p‘in“"Als Bezugnahme auf‚Absatz‘.)
Die Struktur eines HTML-Dokument
Bevor wir die Struktur einer Webseite zu diskutieren, einen normalen Geschäftsbrief in der Ziegel und Mörtel Welt betrachten. Solche Briefe haben tatsächlich eine besondere Form: wenn das Papier Sie verwenden, kein Briefkopf haben, werden Sie normalerweise eingeben (oder schreiben), um Ihre eigene Adresse am oberen Rand der Seite, von der Adresse der Person, die Sie folgen‘ wieder auf unter schreiben. Erst dann beginnen Sie Ihren Brief richtigen mit so etwas wie „Liebe.“. Es ist in der Regel eine Betreffzeile folgt, und darunter kommt den Körper Ihres Schreibens, wo man endlich die Dinge zu sagen, erhalten Sie sagen wollte.
Web-Seiten haben auch ein bestimmtes Format.
Die erste Zeile der Seite identifiziert den Typ und die Version von HTML, die Ihre Web-Seite verwendet.
Der Rest der Seite ist eingeschlossen zwischen dem " "/" "Tag-Paar.-Code eingeschlossen zwischen diesen beiden Tags bilden die Webseite richtig.
Der erste Teil der Web-Seite ist, was als der HEAD-Bereich bekannt ist. Der Abschnitt beginnt mit "
„Und endet mit“ .“Es enthält Informationen gemeint, für Web-Browser und Suchmaschinen-Code in diesem Abschnitt platziert wird in einem Web-Browser nicht angezeigt Es ist wie die Adressen, die Sie zu Beginn eines Geschäftsbrief platzieren -.. Sie dienen einem Zweck, aber sie sind nicht tatsächlich ein Teil des Hauptinhalt. Wie dem auch sei, ich bin sicher, dass Sie bemerkt, dass die HEAD-Abschnitt in meinem Beispiel-Code zur Zeit leer ist. das ist, weil ich dich nicht verwirren wollte, indem Sie die Datei mit zu vielen Dingen unübersichtlich. Wir etwas in diesem Abschnitt einfügen später in diesem Kapitel werde.Der Teil der Webseite, die Informationen in einem Web-Browser angezeigt enthält, wird der Körperabschnitt genannt, und es ist, wie Sie wahrscheinlich schon erraten haben, eingeschlossen zwischen dem "
" und " "Tag-Paar.Jedes dieser Dinge wird unten im Detail diskutiert.
Im Beispiel oben stehenden Code verwendet wird, liest die erste Zeile wie folgt:
Im Gegensatz zu den anderen Linien auf dem Web-Seite, diese erste Zeile ist nicht ein HTML-Tag. Wie oben erwähnt, ist es eine Art Versionskennung, die Version 4.01 der HTML-Spezifikationen wird mit Web-Browser, die Ihre Seite sagt. Damals habe ich dies schreibe, soweit ich das beurteilen kann, die am häufigsten verwendeten HTML-Versionen im Internet sind HTML 4 (oder 4,01 um genau zu sein) und XHTML 1.0. Für alle praktischen Absichten und Zwecke, sind diese beiden Versionen tatsächlich meist die gleichen, mit der Ausnahme, dass XHTML wählerischeren über einige Dinge, wie, die kleine Buchstaben (Kleinbuchstaben) Wörter für Ihre Tags, erfordern schließenden Tags für alles, und einige andere Sachen.
Wir werden nur mit HTML 4.01 in diesem Tutorial zu tun haben. Keine Sorge. Sie verlieren nichts aus, indem Sie HTML 4 als zu XHTML verglichen. Trotz seiner flashier Namen (mit dem zusätzlichen Buchstaben), hat XHTML gibt Ihnen nicht mehr Funktionen auf Ihrer Web-Seite nutzen zu können. Es meist nur macht den Browser wählerischeren über das, was sie von Ihrer Webseite akzeptieren. Es fügt auch Komplikationen im Zusammenhang mit Cross-Browser-Kompatibilität (vor allem mit alten Versionen von Internet Explorer), die Ihr Leben ein bisschen unglücklich machen, wenn Sie ein puristisches und bestehen auf die strikte Einhaltung jedem Aspekt XHTML sind. Da Sie gerade erst anfangen, ist es am einfachsten, nur mit 4. HTML beginnen (Und es gibt keine wirkliche Notwendigkeit entweder zu XHTML zu überführen. HTML 4 ist in sich abgeschlossen.)
Der HEAD Abschnitt: Einführung in den Titel-Tag
Wechseln Sie zu Ihrem Texteditor und fügen Sie die folgende Zeile in den Kopf Abschnitt.
Für diejenigen, die nicht sicher, was ich meine, bewegen Sie den Cursor an das Ende der Zeile die enthält
-Tag. Drücken Sie die ENTER-Taste, um eine neue Zeile unterhalb zu erstellen. Geben Sie dann die Worte, in denen ich oben im Block gab. Eigentlich Sie nicht wirklich die Worte „My First Web-Seite“ verwenden. Verwenden Sie, was Worte, die Sie als Titel wollen. Aber stellen Sie sicher, dass diese Worte zwischen der Öffnung eingeschlossenSpeichern Sie die Seite und laden (refresh) es in Ihrem Web-Browser. Für diejenigen, die nicht sicher sind, wie eine Seite in Ihrem Browser neu zu laden, herauszufinden, wie. In den meisten Browsern Drücken von Strg + R sollte es tun (das heißt, halten Sie die Strg-Taste gedrückt, während Sie die Buchstaben „r“ auf der Tastatur eingeben). Darüber hinaus, wenn Sie Windows verwenden, einen schnellen Weg, um Ihre Arbeit in den meisten (wenn nicht alle) Text-Editoren speichern Strg + S zu treffen, das heißt, halten Sie die Strg-Taste gedrückt und „s“ auf der Tastatur eingeben. (Ich bin nicht sicher, ob dies auf der ganzen Linie auf Mac-Software funktioniert auch.)
Nun ein Blick auf die Titelleiste des Browserfensters. Sie sollten den Titel, den Sie festgelegt, um sehen können. Beachten Sie, dass die Worte, die Sie nicht im Hauptteil Ihrer Webseite selbst erscheinen getippt. Das