Riesen HTML und CSS Tutorial by F!r3FoX
Und nun geht es los. Zu Beginn kommen die Grundlagen - dabei wird teilweise mit Vereinfachungen gearbeitet. Wichtig ist mir, dass ihr schnell einen Erfolg seht und die Zusammenhänge verständlich werden.
Im Verlauf des Tutorials vervollständigen wir nach und nach unser Wissen, damit gut aufgebaute Seiten herauskommen.
Im Verlauf des Tutorials vervollständigen wir nach und nach unser Wissen, damit gut aufgebaute Seiten herauskommen.
~Aufbau vom Tutorial~
Was wird benötigt
HTML für Inhalt und Struktur
Hilfe bei Fragen zu HTML und CSS
---------------------------------------------------------------------
Programme zum HTML-Seiten erstellen
Welche Programme werden benötigt, um HTML-Seiten zu erstellen? Das ist die erste Frage, die man sich stellt, wenn man eine Website machen möchte bzw. HTML lernen will.
Wir brauchen für den Anfang nur sehr wenig und niemand muss dafür Geld ausgeben! Benötigt werden:
--ein Texteditor (hier werden wir zum Start den ganz einfachen vom Betriebssystem nehmen und dann im zweiten Schritt einen komfortablen, der das Lernen von HTML unterstützt)
--ein Webbrowser – vorzugsweise für den Start den Firefox
Warum Handarbeit bei HTML?
Es gibt mehrere Gründe dafür (und 1-2 dagegen :-)
Vorteile
+++volle Kontrolle auch über Details
+++besser lesbarer Code (kommt auf den Schreiber an)
+++keine besondere Software ist nötig, HTML kann mit allem erstellt werden (selbst mit Notepad)
+++sauberer Code (sofern der Ersteller ein wenig Ahnung hat)
+++besondere Kniffe sind per Hand einfacher realisierbar
+++it´s cool, man
Nachteile
---Kenntnisse von HTML müssen vorhanden sein
---am Anfang zeitaufwendiger
-------------------------------------------------------------------------
erste eigene HTML-Seite erstellen
Wir steigen hier ganz einfach ein. Dabei werden wir sehr schnell eine HTML-Seite entwerfen, die in einem Web-Browser angezeigt werden kann.
Dabei werden die Beispiele am Anfang sehr einfach gehalten sein, damit ein grundlegendes Verständnis aufgebaut werden kann. Dadurch sind die ersten Seiten, die wir hier erstellen, noch kein valides XHTML, sondern einfach zum HTML lernen. Valide XHTML-Seiten sind nach bestimmten Regeln aufgebaut.
Aber keine Angst - wir kommen von den einfachen Webseiten über den entsprechenden Wissenszuwachs sehr bald zu validen XHTML-Seiten und Sie bekommen die Werkzeuge an die Hand, um sich selber kontrollieren zu können!
sehr einfache HTML-Seite erstellen
Für das Grundverständnis legen wir nun eine Seite in einem einfachen Texteditor (z.B. dem Programm „Editor“ unter Windows, zu finden unter „Alle Programme“ - Zubehör) an.
Diese Datei speichern wir mit dem Namen "index.htm". Wichtig ist dabei die Endung. Durch die Endung sagen wir, dass es sich um eine HTML-Seite handelt. Wichtig ist beim Editor unter Windows, dass der Dateityp auf „Alle Dateien“ gestellt wird – sonst kann es vorkommen, dass unsere Datei in Wirklichkeit dann „index.htm.txt“ heißt und daher keine HTML-Seite ist. Die Anzeige der letzten Endung kann je nach Einstellung des Betriebssystems unterdrückt sein und man wundert sich dann, dass nichts so funktioniert wie hier beschrieben. Daher bitte darauf achten, dass die Endung entsprechend eingetragen ist!
Der Inhalt der Datei ist (exakt mit Leerzeichen und Umbrüchen abtippen!):
Code:
Herzlich willkommen auf meiner ersten HTML-Seite Hier finden Sie meine erste Homepage zum Lernen von HTML von F!r3FoX Ihr Max Mustermann
Datei speichern als HTML-Seite
Die Datei hat durch die Endung ".htm" im Betriebssystem das Browserlogo bekommen (meistens das E des Internet Explorer oder je nach Webbrowser das entsprechende Symbol).
Nun schauen wir uns diese Seite mit einem Webbrowser an. Sobald wird die Datei doppelt anklicken, wird diese im Webbrowser angezeigt. Die Ausgabe im Browser sollte ungefähr wie folgt aussehen:
Code:
Herzlich willkommen auf meiner ersten HTML-Seite Sie meine erste Homepage zum Lernen von HTML von F!r3FoX Ihr Max Mustermann
Schockiert, wie einfach HTML Seiten erstellen sein kann?
Das ist durchaus schon eine HTML-Seite (wenn auch nicht valide). Hier sehen Sie den Grund für den Siegeszug von HTML. Durch sehr einfache Mittel können Inhalte für andere bereitgestellt werden, die dann weltweit darauf zugreifen können. Unsere Datei müssten wir dazu nur noch auf einen Webserver schieben (dazu kommen wir später).
Als nächstes wollen wir unseren Text strukturieren und sauber anzeigen lassen. Dazu benötigen wir die ersten HTML-TAGs.
-------------------------------------------------------------------------
HTML-Grundlagen
Was ist HTML?
HTML ist eine „Strukturierungssprache“, mit der dem Browser „gesagt“ wird, wie die Inhalte strukturiert sind: welche Bereiche (Buchstaben, Wörter, Sätze) z.B. Überschriften sind, was Absätze sind, was fett ausgegeben werden soll – HTML ist keine Programmiersprache – man beschreibt, wie eine Seite im Browser ausgegeben werden soll (nicht mehr, nicht weniger).
Dazu werden über das Internet Dateien übertragen, die Texte und HTML-Befehle enthalten – ab jetzt als HTML-Seite bezeichnet. Das Bedeutsame dabei ist, dass die HTML-Seiten in Klartext übertragen werden und so jeder schauen kann, wie das eigentlich funktioniert. Einfach mal im Browser auf "Ansicht -> Quellcode anzeigen" gehen. Schaut man sich den Quellcode an, ist das zunächst Verwirrende, dass zwischen den Texten noch mehr auftauchen kann.
Es gibt also nicht nur den eigentlichen Text, sondern auch Anweisungen, wie einzelne Textbereiche angezeigt werden sollen. Man sagt z.B. dem Browser also, diesen Text normal anzeigen und nun zeige ab hier die Schrift hervorgehoben an. Ab jetzt wird der Text fett ausgegeben. Ein paar Worte später dann sagt man wieder dem Browser, aber hier die Hervorhebung wieder ausschalten.
In HTML also haben wie verschiedene Befehle (HTML-TAGs) für:
-verschiedene Überschriften
-Absätze
-Hervorhebungen wie Fett bzw. Kursiv
-verschiedene Aufzählungen
-und verschiedene Befehle mehr um Inhalte zu Strukturieren
Das geschieht über HTML-Befehle bzw. aus dem englischen den HTML-TAGs.
Aufbau von HTML-TAGs – HTML Befehlen
Was ist nun ein HTML-TAG? - Als HTML-TAG wird ein einzelner HTML-"Befehl" bezeichnet.
Dabei kommt der Begriff TAG aus dem Englischen und hat dort die Bedeutung von "Etikett, Anhänger, Aufkleber, Marke, Kennzeichnung, Auszeichner". Am besten lässt sich es mit dem Begriff "Kennzeichnung" veranschaulichen. Man kennzeichnet Bereiche, dass diese in bestimmter Weise angezeigt werden sollen. Dabei kann man dann sagen, hier beginnt der Bereich und dort hört er wieder auf.
Am Beispiel wird der HTML-TAG von 2 Absätzen gezeigt:
HTML Code:
<p>erster Absatz, der sehr lang sein kann</p> <p>zweiter Absatz - und nach der Definition bewirken Absätze immer einen Abstand (egal ob es sich um Text handelt oder bei Schuhen zwischen Straße und Träger</p>
Code:
erster Absatz, der sehr lang sein kann zweiter Absatz - und nach der Definition bewirken Absätze immer einen Abstand (egal ob es sich um Text handelt oder bei Schuhen zwischen Straße und Träger)
1. HTML-TAGs haben immer vom Aufbau ein Kleiner- und Größerzeichen < .. >
2. Zwischen den < > befindet sich die Anweisung - hier p - und wie so vieles im Leben ist das eine Abkürzung und das Ganze von dem englischen "paragraph" (Absatz, Abschnitt). Dementsprechend sind alle Befehle nur Abkürzungen von englischen Begriffen. So lassen sich die Befehle gut merken (vorausgesetzt, man kann Englisch).
3. Alle HTML-TAGs sind immer klein zu schreiben! Dies ist für XHTML und valide Webseiten wichtig.
Alles hat ein Anfang und ein Ende. So auch praktisch fast jeder HTML-TAG.
Aufbau Anfangs- und End-TAGs
Weiterhin gibt es einen Anfangs-TAG und einen End-TAG. Sonst hätten wir nicht die Möglichkeit, mehrere Absätze zu machen bzw. müssten fett geschriebene Texte bis zum Ende der Seite immer fett sein. Der End-TAG ist fast identisch mit dem Anfangs-TAG, mit dem einzigen Unterschied, dass nach dem Kleinerzeichen (<) ein Schrägstrich kommt. Dieser ist auf der Tastatur beim 7er zu finde.
Der HTML-End-TAG hat also folgendes Aussehen:
Code:
</befehl>
Merke: HTML strukturierte eine Seite
Merke: HTML strukturiert eine Seite! HTML ist nicht für das Design da (das war mal). Guter Stil ist also, HTML-TAGs zum strukturieren des Inhalts zu nutzen. Design kommt über CSS
Alle HTML Befehle strukturieren – was macht also das Design? Für Design ist CSS zuständig (was später im Kurs kommt)! Diese Trennung von Inhalt (+ Struktur) und dem Design zeichnet aktuelles HTML-Nutzung aus. Früher wurde lustig alles vermischt – heute ist diese Trennung sehr wichtig. Im ersten Teil des HTML-Tutorials werden wir uns um alle wichtigen HTML-Befehle kümmern und im zweiten Teil dann mit CSS das Design über das in HTML erstellte Grundgerüst stülpen. Hört sich komplizierter an, wie es ist. Ihr werdet sehen, dass es ganz einfach ist.
Absätze erstellen – HTML-TAG <p>
Ein wichtiger HTML-TAG ist der für Absätze. Ein Absatz hält einen Abstand zum nachfolgenden Element, was z.B. wieder ein Absatz oder z.B. eine Überschrift sein kann. Wie viel Abstand gehalten wird, interessiert hier nicht, da dies in den Bereich Design fällt und für Design nicht HTML sondern CSS zuständig ist (dazu dann mehr in den Kapiteln von CSS).
Sollen 2 Textabschnitte getrennt werden, sieht das wie folgt aus:
HTML Code:
<p>Hier kommt unser erster Test von HTML-TAG Absatz.</p> <p>Hallo elitepvpers</p>
Das Ergebnis im Gegensatz zum <br />-TAG ist eine Trennung mit Leerzeile:
Code:
Hier kommt unser erster Test von HTML-TAG Absatz. Hallo elitepvpers.
Es soll nicht verschwiegen werden, dass ihr dasselbe Ergebnis auch ohne den End-TAG erhaltet. Dabei reagiert aber jeder Browser unterschiedlich.
Übung zum HTML-TAG <p> für Absätze
Erweitert folgenden Inhalt mit den entsprechenden HTML-Tags für Absätze:
Code:
Herzlich willkommen auf meiner HTML-Seite Hier finden Sie meine erste Homepage zum Lernen von HTML von F!r3FoX Ihr Mustermann
1. Absatz: Herzlich ...
2. Absatz: Hier finden ...
3. Absatz: Ihr Mustermann
Nach der Eingabe speichert die Datei unter dem Namen "index.htm". Ansehen könnt ihr es in einem Website-Browser (z. B. Internet Explorer oder Firefox). Je nach Breite des Browserfensters kann der Umbruch innerhalb der Zeilen woanders stattfinden.
Bevor Sie sich Lösung ansehen, probiert es unbedingt selber aus!
--------------------------------------------------------------------------
Lösung zur „Übung HTML-TAG <p> für Absätze“
Die Lösung kann wie folgt aussehen. Wichtig ist, dass in folgender Lösung 3 verschiedene Arten zu sehen sind, die alle korrekt sind – die Erklärung erfolgt nach der Lösung.
Code:
<p>Herzlich willkommen auf meiner HTML-Seite</p> <p> Hier finden Sie meine erste Homepage zum Lernen von HTML von F!r3FoX</p><p>Ihr Mustermann</p>
Erklärung zu der Lösung:
In der Zeile 1 „<p>Herzlich …“ kommt sofort nach dem HTML-TAG der Text. Das ist sehr Platzsparend.
In Zeile 3 und 4 dagegen sitzen der HTML-TAG in einer eigenen Zeile (Zeile 3) und der Inhalt beginnt in der Zeile 4 an. Diese Art ist sehr übersichtlich. Natürlich kann auch der End-TAG „</p>“ dann eine eigene Zeile bekommen.
Im Beispiel wird der End-TAG und der folgende Anfangstag alles am Stück gebracht „F!r3FoX</p><p>Ihr Muster…“ - dies ist extrem Platzsparend, aber dafür auch die unübersichtlichste Art.
Welche von den Arten ihr bevorzugt, hängt von eurem Geschmack ab. In den folgenden Beispielen werde ich i.d.R. nun die erste Art verwenden.
Aber alle 3 Arten sind korrekt. Die dritte Art wird man bei Websites finden, die täglich tausendfach aufgerufen werden und wo jedes Byte an Übertragungsvolumen zählt. Zum Lernen von HTML sollten wir aber die übersichtlichste Art verwenden.
--------------------------------------------------------------------------
Texte formatieren – Überschrift in HTML
HTML-TAGs für Überschriften stellen die grundlegendsten Gliederungsmöglichkeiten für Texte dar. Ein Text wird durch Einsatz der verschiedenen Überschriftengrade sauber strukturiert.
Anhand von Überschriften wird Text gegliedert und strukturiert. Dabei sind wie in einem Fachbuch verschiedene Hierarchien (Wichtigkeit) von Überschriften möglich, z.B. Kapitelüberschrift, Abschnittsüberschriften usw.
Wichtig ist der korrekte Einsatz der Überschriften! Wenn wir uns jetzt die einzelne HTML-Seite wie ein Buch vorstellen, so hat das Buch einen Titel auf dem Umschlag – vergleichbar mit der Hauptüberschrift h1 bei der HTML-Seite. Diese kommt pro Seite nur 1-mal vor (welches Buch hat mehr als einen Titel?). Der Text wird durch die verschiedenen Überschriftengrade strukturiert. Nach der Hauptüberschrift kommt eine Unterüberschrift h2 und ein Unterkapitel von h2 bekommt dann h3.
Negativbeispiel Überschriftenreihenfolge: man sieht oft den Fehler auf Internetseiten, dass lustig zwischen den Überschriften ohne Logik gesprungen wird. Manchmal fehlt komplett die <h1> - das darf nicht sein – jede HTML-Seite hat exakt 1-mal eine <h1>.
Manchmal sieht man Sprünge – nach dem Einsatz von <h2> folgt sofort die <h4>. Auch das darf nicht sein. Überschriften sind zum logischen Strukturieren. Warum manche „Homepagebastler“ diese Sprünge machen liegt daran, dass diese wegen der Ausgabegröße solche „Sünden“ begehen. Aber auch hier gilt der Satz: Design wird immer über CSS gemacht – sprich also über CSS wird die Ausgabegröße der Überschrift später bestimmt.
Diese TAGs sich einzuprägen ist weder falsch noch schwer.
Überschriften in HTML nutzen
Wie wird nun der HTML-TAG für Überschriften genutzt? Wie wir bereits bei Absätzen gesehen haben, werden um den Text, der die Überschrift darstellt, die entsprechenden HTML-TAGs gepackt.
Für Überschriften wird der TAG <hX> genutzt. Dabei steht das h für das engl. header = Überschrift. Das X wird durch die Wichtigkeit ersetzt. Dabei stehen für X 1 bis 6.
1 ist die größte und wichtigste und sollte nur 1-mal pro HTML-Seite vorkommen
...
6 die kleinste und somit unwichtigste (aber immer noch wichtiger als normaler Text)
Im folgenden Quellcode sind alle 6 Überschriften untereinander, was in der Realität unüblich ist. Nach eine Überschrift kommt meistens ein Absatz (wenn nicht mehr). Aber das Beispiel soll auch das Aussehen der Überschriften bisher noch ohne Design zeigen.
HTML Code:
<h1>Überschriften-Ebene 1</h1> <h2>Überschriften-Ebene 2</h2> <h3>Überschriften-Ebene 3</h3> <h4>Überschriften-Ebene 4</h4> <h5>Überschriften-Ebene 5</h5> <h6>Überschriften-Ebene 6</h6> <p>normaler Text in einem Absatz ...</p>
Die Ausgabe im Browser sieht wie folgt aus:
Negativbeispiel: Der Gedanke, dass man innerhalb eines Absatzes eine Überschrift packt und dann der Aufbau wie folgt aussieht ist falsch!
HTML Code:
<p><h1>Überschrift</h1></p>
Richtig ist:
HTML Code:
<h1>Überschrift</h1> <p>normaler Absatz</p>
Hinweis zu den Größen der Überschriften
Die Größe der einzelnen Überschriften ist relativ zueinander. Je nach Browser können diese unterschiedlich ausfallen. Dabei sind die unwichtigeren Überschriften teilweise kleiner als der normale Text. Das ist OK so und kann wenn gewünscht über CSS geändert werden.
Übung: HTML-Seite mit Überschriften und Absätzen
Erstellen Sie folgende HTML-Seite: index.htm
Geben Sie folgenden Text exakt so in den Texteditor Notepad (oder anderen einfachen Texteditor) ein. Bitte auch die Leerzeichen und die Umbrüche
Erweitern Sie den Text um Überschriften und Absätze
Die Struktur des Textes ist:
Überschrift 1. Ordnung: Herzlich ...
Absatz: Hier finden ...
Überschrift 2. Ordnung: Meine Hobbies
Absatz: Sind so zahlreich ...
Absatz: Ihr Mustermann
Code:
Herzlich willkommen auf der meiner ersten HTML-Seite Hier finden Sie meine erste Homepage zum Lernen von HTML Meine Hobbies Sind so zahlreich, dass es demnächst eine weitere Seite gibt Ihr Mustermann
-------------------------------------------------------------------------
Lösung zur Aufgabe: HTML-Seite mit Überschriften und Absätzen
Als Aufgabestellung sollte ein Text mit 2 verschiedenen Überschriften und 3 Absätzen eingegeben werden.
Der Quellcode sieht dann wie folgt aus:
Code:
<h1>Herzlich willkommen auf der meiner ersten HTML-Seite</h1> <p>Hier finden Sie meine erste Homepage zum Lernen von HTML</p> <h2>Meine Hobbies</h2> <p>Sind so zahlreich, dass es demnächst eine weitere Seite gibt</p> <p>Ihr Mustermann<p>
------------------------------------------------------------------------
HTML-Editor – Werkzeug zum Internetseiten erstellen
HTML-Editor – Werkzeug zum Internetseiten erstellen
Bisher haben wir im HTML Kurs den Text-Editor vom Betriebssystem genutzt. Das geht auch, aber mit einem komfortablen Werkzeug macht das Lernen von HTML viel mehr Spaß und man wird unterstützt und lernt HTML auch schneller.
Mit einem HTML-Editor erstellt man Internetseiten – man erfasst Inhalte und HTML-Befehle. Die erstellten Inhalte werden dann in Dateien abgespeichert, die mit der Dateiendung .htm versehen sind. Pro Einzelseite eine Datei. Die Dateien sind reine Textdateien (ASCII) und können mit jedem Texteditor gelesen und bearbeitet werden. Die Vorteile von HTML-Editoren werden im übernächsten Abschnitt erläutert.
2 Arten von HTML-Editoren
Es gibt 2 Arten von HTML-Editoren:
Textbasiert – man tippt direkt die Inhalte und HTML-Befehle
WYSIWYG-Programme – das Design kann wie bei einem Grafikprogramm direkt gemacht werden. Viel wird mit der Maus an die gewünschte Stelle geschoben und das WYSIWYG-Programm erstellt daraus dann die entsprechende HTML-Datei mit CSS und allem was dazu gehört.
Warum wir hier kein WYSIWYG machen ist ganz einfach. Wir wollen HTML und CSS lernen – bei den WYSIWYG-Programmen lernt man i.d.R. kein HTML sondern nur, wie man das jeweilige Programm bedient. Außerdem kommen meistens dann die Probleme, wenn etwas nicht so funktioniert bzw. nicht so im Endergebnis aussieht. Dann steht man vor einem Berg von HTML-Code, den das WYSIWYG-Programm produziert hat und blickt nicht mehr durch.
Dagegen bieten sich textbasierte HTML-Editoren an. Hier trägt man seinen Inhalt und die HTML-Befehle ein – dazu muss man die HTML-Befehle verstehen (was kein Hexenwerk ist). Aber am Ende unterm Strich bekommt man ab einem gewissen Kenntnisstand exakt das, was man will und erwartet hat und keine Überraschungen. Dazu ist man ab einem bestimmten Kenntnisstand auch per Hand schneller und die fertigen Dateien können kleiner, schneller und erfolgreicher sein.
Es soll hier nicht verschwiegen werden, dass es auch hier „Zwitter“ gibt, die beides bieten und man zwischen den Betriebsmodi hin und her springen kann. Im Kurs wird im Folgenden immer ein textbasierter HTML-Editor genutzt, da man hier effektiv HTML lernen kann.
Wird also im Folgenden von einem HTML-Editor gesprochen, ist immer die textbasierte Version gemeint.
Vorteile von HTML-Editor
Was man von einem Texteditor (textbasierten) erwarten darf:
Syntaxhervorhebung
Autovervollständigung
Vorschaufunktion
Was ist das und warum unterstützt es einen beim Lernen von HTML und CSS?
Syntaxhervorhebung
Autovervollständigung
Vorschaufunktion
Vorstellung von 3 HTML-Editoren
Es gibt auf dem Markt zahlreiche HTML-Editoren. Teilweise wird es als Religionsfrage aufgefasst, welcher HTML-Editor zu verwenden ist. Wichtig ist, dass man damit selber gut mit dem HTML-Editor zu Recht kommt.
Es werden auf den folgenden Seiten 3 verschiedene HTML-Editoren vorgestellt. Alle 3 haben unterschiedliche Vorteile.
HTML-Editor Scriptly
Auch die Empfehlung von Scriptly stellt eine subjektive Meinung (von mir) dar. Das Programm bietet extrem viel (nicht nur für Einsteiger) und unterstützt den Webdesigner bei der Arbeit.
Mehr zu Scriptly findet ihr auf der nächsten Seite.
SuperHTML Web Studio
Eine kommerzielle Software – interessant im Vergleich zu dem Freeware Editor Scriptly. Hier ist beispielweise auch ein sFTP-Programm integriert. Mehr dazu auf der entsprechenden Seite.
HTML-Editor Phase 5
Ein weiterer HTML-Editor - schaut euch diesen einfach an. Den Editor gibt es bereits seit geraumer Zeit.
Ich bin zur Zeit mit 25% des Tutorials fertig :P Aber bis ich 1000 Posts zusammen habe, werde ich mit dem Tutorial fertig sein. Es ist sehr viel zu schreiben und auch die Screenshots zu bearbeiten etc. ist eine Menge Arbeit.
Ich hoffe, dass das TuT euch bis jetzt gefällt. Verbesserungsvorschläge sind jederzeit erwünscht. Ich werde morgen wieder weiter am TuT arbeiten aber heute ist so ein schönes Wetter xD.
MFG F!r3Fox
