Hier siehst Du eine sehr einfache Website. Sie besteht aus folgenden HTML-Elementen: Seitenüberschrift, Zwischenüberschrift, zwei Absätze mit Text, ein verlinktes Bild und zwei Text-Verlinkungen. Zumindest sind dies die Elemente, die Du SEHEN kannst. Der Inhalt, der in dem weißen Kasten hier steht. Der auch ein HTML-Element ist.
Aktuell in der Tate: Modigliani
Du kannst als der Autor der Website überall hin verlinken, wo Du willst. Du brauchst nur die Internetadresse: Zur TATE MODERN musst Du hier klicken Der Text, der zum Linkziel führt, kann heißen wie Du willst. Du kannst zum Beispiel auch eine Textverlinkung zur Arbeitsproben-Seite einer gewissen B.G. setzen und den Linktext schreiben: Geh zu Horst.
(ENDE Demoteil)
(START Erklärteil)
Wie ich die Website schreibe
Von der Tastatur in den PC - Vom PC in's WWW - Vom WWW auf den Bildschirm
Was erwartet Dich jetzt?
Der einfach gestrickte Demoteil oben mit Modigliani-Kunst dient als Erklärungsgrundlage. Ich zeige Dir im Folgenden, wie das im Hintergrund aussieht. Was heißt das eigentlich, „eine Website schreiben“? Aus welchen Elementen besteht ein Webauftritt? Erklärbilder mit farbigen Markierungen dienen Dir zum Nachverfolgen, wovon die Rede ist. Ebenso begleitet Dich Erklär-Betti und steht Dir zur Seite.
Ich veranschauliche, wie das mit dem Style = CSS funktioniert. Wieso CSS viel mehr ist als nur „hübsch machen“ (viel viel mehr), und wie traurig die Web-Welt ohne CSS wäre. Ich zeige Dir auch, wie alles „online gestellt“ wird. Was heißt das eigentlich, online stellen, und wo befinden sich die Seiten und Bilder, die man dann im WWW sehen kann?
In 5 Kapiteln wird alles erklärt. Die Zusammenfassung bietet eine Quintessenz. Alle wichtigen oder schwierigen Begrifflichkeiten, die Dir im Laufe der Kapitel begegnen, sind noch einmal im letzten Abschnitt aufgeführt. - Jedes Kapitel (und Unter-Kapitel) hat rechts einen "zurück zur Übersicht"-Button, erkennbar am . Er führt Dich immer zurück zum folgenden:
Um Webseiten zu schreiben, kannst Du verschiedene Programme (=Software) verwenden, ich nutze den kostenlosen Editor "Notepad++". Er ist eine ganz einfache Schreibsoftware ohne jegliche Möglichkeit zur Formatierung der Schrift, viel einfacher als Microsoft Word zum Beispiel. Formatierung braucht man auch nicht, das erledigt man später mit CSS.
Wichtig ist einzig, dass Du die Sprachen zum Schreiben von Websites beherrscht. Du möchtest ja, dass die Browser, z. B. Firefox, Google Chrome, Internet Explorer, Safari und weitere, Deine Website wie von Dir gewünscht darstellen (=rendern), da darfst Du keine Sprachfehler in den Webschreib-Sprachen machen. Du musst Grammatikregeln beachten!
Das kommt auf Deine Website an. Zwingend notwendig sind 1: HTML (Hyper Text Markup Language) = Seitenbeschreibungssprache und 2: CSS (Cascading Style Sheets, dt.: mehrstufige Formatvorlagen) = Stylesprache. Zum Schreiben der Modigliani-Demosite oben würden diese beiden reichen. HTML strukturiert Deine Seite semantisch, formatiert / stylt sie aber nicht. CSS legt fest, wie alles aussieht und wie sich Elemente zueinander verhalten.
Einfach ausgedrückt: HTML ist Inhalt, CSS ist Aussehen
Wenn Du „Action“ auf der Site willst, z. B. eine Slideshow (wie bei Pingu & Maunzi) oder diesen „nach-oben-Button“ hier rechts unten auf der Site, brauchst Du 3: JavaScript, eine Scriptsprache.
Für diesen nur scheinbar banalen kleinen nach oben - Button a, der, egal wie weit Du nach unten scrollst, immer am selben Platz klebt, benötige ich diese recht lange JavaScript-Funktion b. DASS dieser Button nämlich immer unten rechts klebt und überhaupt erst erscheint, wenn es sich lohnt, dass Du per Klick „nach oben“ kommst und nicht so viel scrollen musst... das ist alles andere als eine banale Funktion.
Für eine kleine Funktion braucht's ein langes Script
Das Skript mit der Dateiendung .js wird auch im Head eingebunden. Zum Head als HTML-Element später mehr! Auf die Scriptsprache JavaScript gehe ich aber nicht ein, das würde zu viel und hier den Rahmen sprengen. Wir betrachten nur HTML und CSS. - An dieser Stelle noch zu nennen: Für extrem komplexe Sites oder z. B. Webshops braucht man „richtige“ Programmiersprachen, z. B. JAVA, C++, C# oder PHP. Diese können sogar rechnen, einfach ausgedrückt. Die Regeln aller Sprachen und deren Weiterentwicklung wird vom W3C, dem World Wide Web Consortium, überwacht.
Webschreiber müssen googeln können! (und das gern auf Englisch)
Das World Wide Web beruht auf Webentwicklung, klar. Das heißt, Du musst niemals alles wissen, Du musst nur googeln und die "richtigen" Fragen stellen können. Du findest alles, was Du nicht weißt, kostenlos auf hunderten von Hilfesites. Die Webgemeinde ist so freigiebig mit ihrem Wissen wie sonst kaum eine Gemeinschaft. Den Großteil meines Wissens erlangte ich durch Learning by Doing - und die Ergebnisse von Google-Suchanfragen.
2. Das HTML des Demoteils: Jetzt geht's richtig los
Der Demoteil oben mit dem Modigliani-Bild ist die Erklär-Grundlage. Ich habe ein Bildschirmfoto meines Editors gemacht, das zeigt, wie der Demoteil im Hintergrund aussieht: Du siehst also das HTML, den Quelltext. Die farbigen Markierungen und Ziffer-Kästchen dienen dem Auseinanderhalten der Elemente. - Jede schöne oder häßliche Website hat einen Quelltext, den ein Webentwickler geschrieben hat.
Ein HTML-Dokument besteht aus drei Hauptteilen: Dokumenttypdeklaration a<!doctype>, b<head> = Kopf und c<body> = Körper. Beginn und Ende jedes Teils und jedes Elements wird durch einen Tag (sprich: täkk) gekennzeichnet: ein öffnender Tag mit eckigen Klammern und der Elementbezeichnung, z. B. <head> und ein schließender Tag in Klammern mit Slash davor, z. B. </head>. - Vergiss NIEMALS, einen Tag wieder zu schließen! Sonst gibt es Chaos.
Ein Blick in das Schreibprogramm: Quelltext mit viel Bunt zum besseren Auseinanderhalten
1 Der doctype deklariert den Typen des Dokuments: das ist hier HTML 5, es gibt auch andere Versionen.
2 Der <head> enthält den Titel der Site (das, was man im Browser oben am Registerkarten-Kopf lesen kann) sowie Metainformationen, die NICHT auf der Website angezeigt werden. Skripte und Stylesheets werden hier eingebunden: der Browser weiß, dass er diese auch lesen muss.
3 Der <body> enthält alle Elemente, die für Dich auf der Site sichtbar sind.
4 Der <html> - Tag markiert Anfang und Ende der Website. Er schließt den <head> mit ein, also alles, was für den Browser zu "lesen" ist! Im <html>-Tag ist die Sprache angegeben: lang="de" (Language/Sprache ist Deutsch), was wichtig ist für eine funktionierende Silbentrennung.
5 Der <div> dient als Container für Diverses, wobei das div für division = Bereich steht. Divs setze ich zur Strukturierung ein, um Bereiche abzugrenzen. Hier hat er eine id="wrapper". Die ID kann heißen wie ich will, sie dient dazu, im Style-Sheet diesen div eindeutig ansprechen (= stylen) zu können. Der div hier hat einen weißen Hintergrund: das hebt den Seiteninhalt ab vom übrigen Hintergrund, der farbig gemacht wird. Er umschließt alles, von Überschriften über Bild zu Text. - Regulär bestehen Sites aus sehr vielen Divs, die der logischen sowie gestalterischen Gliederung dienen.
6 Alle grün markierten Elemente sind strukturierende HTML-Elemente mit erst öffnendem, dann schließendem Tag: z. B. <h1>, das ist eine Überschrift der Ordnung 1. Oder <span>, das ist ein Element das nur dazu da ist, Klassen aufzunehmen, die dem Style dienen (dazu unten mehr). Oder <p> = paragraph, zu dt. Absatz, als Textabschnitt. Der <img> Tag = image (Bild oder Grafik) ist das einzige HTML-Element das aus nur einem Tag besteht. Es ist ein Container für Bilder, in dem die src = source (Quelle), also der Ort des Bildes angegeben ist.
Ein HTML-Element kann viele andere Elemente einschließen, z. B. der <p> den <span>. Am Wichtigsten ist, die Reihenfolge der schließenden Tags zu beachten, also z. B. nicht den <p> zu schließen, obwohl der <span> noch offen ist! Bei komplexen Sites, wo die sich umschließenden Elemente sehr verschachtelt sind, sind Kommentare extrem hilfreich. Sie dienen dem Webschreiber zur Orientierung im Dokument. Sie werden vom Browser nicht dargestellt, sofern der Entwickler sie richtig schreibt: < ! - - . . . - - >
Auch der weiter oben bei Ziffer 5 extra behandelte Div mit der ID wrapper ist ein HTML-Element sowie natürlich der <html>-Tag, der <body>-Tag, der <head>-Tag und der <a>-Tag. Da diese aufgrund ihrer Funktion alle für sich erklärt werden, wird hier bei Ziffer 6 auf andere, reguläre HTML-Elemente eingegangen. Wobei streng genommen auch <html>, <a> etc., grün markiert sein könnten / müssten...
... denn ALLES, was in eckigen Klammern < > steht, stellt in einem HTML-Dokument ein HTML-Element dar!
7class = Klassen werden im Stylesheet festgelegt, um HTML-Elementen eine Style-Eigenschaft zuzuweisen (unten gehe ich auf CSS näher ein). Klassen können jedem HTML-Element gegeben werden und sich auf Schriftart, -farbe, -schnitt beziehen, auf Hintergrundfarbe (eines Divs z. B.), auf Abstände, auf Rahmenlinien... auf alles, was im Stylesheet festgelegt werden kann. Vorteile von Klassen: im CSS einmal vergeben, können sie beliebig vielen HTML Elementen zugewiesen werden. Ein Element kann auch mehrere Klassen erhalten: z. B. Farbe "moosgruen" und "dick", siehe Bild
Klassen sind KEINE HTML-Elemente! Klassen verweisen auf Style-Eigenschaften von HTML-Elementen!
8<a> steht für Anker = Verlinkung. HTML-Elemente oder Textteile können von einem öffnenden sowie schließenden Anker-Tag umgeben sein und als Link dienen. Hier siehst Du einen Anker-Tag, der die Worte "Geh zu Horst" umschließt. Zum genauen Aufbau eines Ankers siehe im Folgenden.
Ein Bild dient als Link und wird mit verschiedenen Eigenschaften spezifiziert
Jetzt schauen wir uns den Anker = Link oben im Demoteil an, der um ein Image-Tag, also ein Bild gelegt ist. Im Quelltext so: <a href ="http://www.tate.org.uk/" target ="_blank" title ="Durch Klick auf dieses Bild geht's zur Tate Modern Gallery"><img src="images/modigliani-beispielbild.jpg"></a>
Der Link wird mit dem <a> Tag geöffnet. Er hat drei Spezifikationen: href ist "hyper reference" und sagt, wo es hingehen soll. target (dt. Ziel) ist nicht das Link-Ziel sondern sagt, WIE der Browser die angepeilte Webadresse öffnen soll: "_blank" heißt, in einem neuen Tab (Registerkarte des Browsers). Der title ist der Hilfstext, der erscheint, wenn Du mit der Maus über den Link fährst. Der <img> Tag ist umschlossen von dem öffnenden und dem schließenden Anker-Tag. So ist das ganze Bild klickbar und führt zum Link-Ziel.
Textverlinkungen und Hover-Effekt samt Title = "Händchen-Text"
Hier als Beispiel der erste Text-Link des Demoteils oben. Auch Text-Links werden mit href, target und title spezifiziert: <a href ="http://www.tate.org.uk/" target ="_blank" title ="Zur Site der Tate Modern Gallery in London (neues Fenster)">Zur TATE MODERN musst Du hier klicken</a>
So wie oben das ganze Bild klickbar ist, siehst Du hier in Rot geschrieben den Textteil, der von dem a Tag umschlossen ist. Dieser Text funktioniert als Link. Dass er dick und grün und unterstrichen ist, und rot wird, wenn man mit der Maus drüber geht, sind Dinge, die ich im Stylesheet festlege. Ich kann Text-Links hervorheben, wie ich will, oder auch gar nicht. Das würde man aber eher nicht machen; der Nutzer soll ja sehen dass es sich um einen Link handelt!
Das a im <a>-Tag steht für engl. anchor, zu dt. Anker = Link
Verlinkung / Link / Anker bedeuten dasselbe. Verlinkung = Verbindung. Ein Anker verlinkt immer zu einer anderen Stelle im WWW, entweder auf derselben Website oder zu einer völlig anderen Website. Links / Anker als Verbindungspunkte innerhalb des WWW stellen dessen wichtigstes Merkmal und größte Errungenschaft dar. Jeglicher Inhalt kann mit jeglichem Inhalt verbunden werden - durch Verlinkungen. Milliarden von Sites mit Milliarden von anderen Sites.Vor der Freischaltung des WWW am 6. 8. 1991 gab es keine derartige Verbindungsmöglichkeit von PC zu PC - und damit von Person zu Person.
Dieses Bildschirmfoto hier zeigt den Demoteil, wenn ich das im Head eingebundene Stylesheet lösche. Der Browser stellt jetzt das reine HTML dar. Das macht er so ordentlich, weil das HTML "grammatikalisch" sauber geschrieben ist.
Die Mini-Site mit Frauenkopf sieht ohne CSS zumindest nicht unordentlich aus, oder? Stimmt: Ich hab mich an die HTML-Grammatikregeln gehalten und eine schön strukturierte Seite erstellt, wie es sein soll. Der Browser, der das HTML-Dokument „liest“ und diese obige Ansicht für den Webnutzer wiedergibt, hält sich an diese Struktur. Er hat den <head>-Tag durchforstet und nichts gefunden, was er sonst noch beachten muss, also z. B. kein Stylesheet.
Der Browser arbeitet das HTML-Dokument jetzt von oben nach unten ab: er liest <h1>Hallo Mom...</h1>. Das steht für "head Nr. 1", head = Kopf = Überschrift. Der Browser weiß: die <h1> muss am größten geschrieben werden. Alle folgenden <h2> oder <h3> oder <h4> kleiner. Der Browser weiß auch: vor und nach einem <p> = paragraph = Absatz: Platz lassen.
Ebenso weiß er: Textlinks unterstreichen und Lila oder Blau schreiben. Für allen Text nutzt der Browser eine Systemschrift, die „sicher“ ist, da der Nutzer sie auf seinem PC-System mit höchster Wahrscheinlichkeit installiert hat. In diesem Falle - oben siehst Du die Ansicht im Browser Google Chrome - nimmt er Times New Roman.
Ich als Webgestalter hingegen binde auf jeden Fall schönere Schriften per CSS ein - und auch mehr als eine, um Individualität und Abwechslung zu schaffen.
Doch zunächst, was die Browser-eigene Gestaltung des puren HTML betrifft, gilt Folgendes: Wenn der Webentwickler die Überschriften richtig einsetzt und die Absätze nicht zu lang macht, zur Auflockerung vielleicht ein zwei Bilder einbindet, könnte man bei so sehr einfachen Seiten das Stylesheet theoretisch auch sein lassen - gegeben wäre zumindest der pure Informationsgehalt.
Na dann: Viel Spaß beim Informieren!
Bei solchen Textmengen ist's einfach langweilig ohne CSS
Selten will man eine ungestylte Site. Wer schaut sich so etwas schon gern an? Unterscheidbarkeit bzw. Einzigartigkeit ist ganz wichtig: Jede Site will sich abheben von anderen. Individualität geht nur via CSS. Der größte Pro-CSS-Punkt allerdings: sehr selten sind Seiten so kurz und klein. Und noch seltener sind sie allein auf eine knappe Info ausgelegt. Meist haben Sites ein Anliegen, sie möchten den Nutzer aktivieren, etwas zu tun.
Beispiele von Benutzerführung sehr unterschiedlicher Sites
Jawohl! Wenn jetzt der Einwand kommt, wie es mit Websites ist, die der puren Information dienen... ja? Tun sie das wirklich? Nein. Auch wenn das "Tun" des Nutzers "nur" darin bestehen soll, weiterzulesen: er muss geführt werden, durch die Seite geleitet, und animiert, auf der Seite zu bleiben. Wobei bei den meisten Sites sehr viel mehr vom Nutzer gewollt wird, beispielsweise Kaufen! - Jetzt testen! - Gratis Probeabo bestellen! - Beratungstermin vereinbaren - Einfach anrufen - Hören - Nach oben - Links - Rechts - Zurück - Zum Anfang der Seite ... Sei dabei! - Mach mit!
Ich zeige jetzt mal in stark verkleinertem Maßstab meine "How to make... Flatterbilder Wiesenwelt" Site, eine rein informative Site!, als Foto mit und ohne CSS. Sie ist kaum lesbar ohne CSS und auf jeden Fall eher unattraktiv - erscheint chaotisch und unsortiert, obwohl der Entwickler sehr sauberes HTML geschrieben hat. Slideshows, Animationen und jegliche "Action" auf der Site sind ohne CSS kaum erkennbar. Der Sinn der Site - informieren in schöner Form, mit Spaß für den Nutzer - liefe somit komplett ins Leere.
4.3. Bildvergleich: Komplexere Site mit / ohne CSS
1 ist ein HTML-Schnipsel aus der index.html. Die Worte "einfache Website" sind von einem Span umschlossen, welcher zwei Klassen bekommt: moosgruen und dick. 2 zeigt zwei Stylesheet-Schnipsel aus der style.css. Der Punkt vor dem Namen .moosgruen und .dick heißt, dass dies Klassen sind. Die Eigenschaft selbst ist in geschweifte Klammern gefasst: { color: #4b9761; } Die zugewiesene Eigenschaft ist color, der Eigenschaftswert ist ein Code für den Grünton.
Bei der Klasse .dick steht { font-weight: 600; } Die Eigenschaft font-weight (Schrift"gewicht") hat den Wert 600. Ultradünn hingegen wäre z. B. 200, sehr dick wäre 800. Es gibt über tausend Web-Schriften mit ein bis neun möglichen "Gewichten", von 100 bis 900. Das Ergebnis beider Klassen ist bei 3 zu sehen, dem Site-Schnipsel: grün und dick geschriebene Worte.
Beispiel #2: Hintergrundfarbe und Box-Schatten
1 zeigt die HTML-Schnipsel: wie oben erläutert enthält der <body> alles für Dich auf der Site sichtbare, der <div> mit der id="wrapper" ist für Style und Struktur da. Den Identifikationsnamen "wrapper" vergebe ich. 2 sind zwei CSS-Schnipsel. Zuerst wird die Eigenschaft "Hintergrundfarbe" für den gesamten HTML-Body festgelegt: { background: #334f3b; } Das ist der Farbcode für den dunklen Grünton.
Der Container #wrapper bekommt im CSS einen weißen Hintergrund - das muss sein, denn sonst wäre der Hintergrund auch grün und die Schrift kaum zu lesen: Der Wrapper als untergeordnetes Element des Body würde das Grün des Body erben! (darum spricht man von Cascading Style Sheets, stufenförmige Gestaltungsbögen). - Die nächste Eigenschaft des Wrappers ist { box-shadow: 0 4px 14px rgba(0,0,0,0.9); }, ein Schlagschatten: die px-Angaben bedeuten Länge und Weichheit, "rgba(0,0,0,0.9)" ist eine andere Art Farbe anzugeben. Das Ergebnis dieser 3 Style-Eigenschaften siehst Du bei 3: Die weiße Inhaltsbox hebt sich vom grünen Hintergrund ab, der Box-Schatten macht das Ganze ein bisschen 3D.
Kommentare im HTML / CSS... ...werden vom Browser nicht gerendert (= nicht dargestellt), sofern sie richtig geschrieben sind. Im HTML mit eckigen Klammern, Ausrufezeichen und zwei Minus vorn und hinten: <!-- TEXT --> Im CSS mit Slash, Sternchen ... Sternchen, Slash: /* TEXT */ Kommentare dienen der Orientierung des Webschreibers und machen Start bzw. Ende von Elementen nachvollziehbar - bei langen Dokumenten essentiell wichtig.
Noch mal kurz... Klasse versus ID?!
Hier im CSS zeigt die Raute bei #wrapper an, dass es sich um ein HTML-Element mit einem Identifikationsnamen (ID) handelt. Klassen werden im CSS mit dem . gekennzeichnet, IDs mit der #. IDs sind einzigartig, können nur einem einzigen HTML-Element gegeben werden - im Unterschied zu Klassen, die beliebig vielen Elementen gegeben werden können. Allerdings kann ich mir unendlich viele IDs ausdenken - Hauptsache, nur ein HTML-Element bekommt dann diese ID.
Abschließende Bemerkungen zu Cascading Style Sheets
Im Stylesheet wird festgelegt, wie alles aussieht. Die Elemente werden nacheinander aufgeführt und mit einer oder vielen Gestaltungsoptionen spezifiziert. Es gibt ca. 350 verschiedene Style-Eigenschaften. Background (Hintergrundfarbe) & Box-Schatten hast Du oben kennengelernt. Websites haben bei mir je nach Komplexität und Design-Variationen zwischen Unterseiten (Subsites) zwischen ca. 300 bis 2000 Zeilen CSS-Befehle; diese Site hier hat knapp 800.
CSS unterscheidet von anderen und animiert die Nutzer - auch unterwegs
CSS macht jede Website einzigartig. Der Style bringt idealerweise „Gefühle“ mit, die zum Inhalt passen. Das nennt man look & feel der Website. Eine Baumarkt-Site z. B. will zum Ackern und Do-it-yourself motivieren, um letztlich den Absatz zu fördern. Benutzerführung via CSS aktiviert zu allem Möglichen: Suchen, Testen, Anmelden, Mieten, Kaufen, Dabei sein. Oder auch Informieren, Nach links, Nach oben, Zum Start, Zurück, Weiterlesen...
Responsiv = für jedes Endgerät passend muss befohlen werden, da macht der Browser nix von allein. Für die sich verändernde Breite werden immer neue CSS-Anweisungen geschrieben, da wird lange gepuzzelt und geschoben... Der Grundgedanke von responsivem Design ist Content first. Informationen sind auf jeden Fall wichtiger als rein dekorative Bilder.
Solche Platzierungen wie die Grafiken, die hier an der Box kleben: dass sie über den eigentlichen Inhaltsbereich an den Kanten hinausragen, dass sie ÜBER der Box liegen; überhaupt, Überlappungen und andere Elemente verdecken: Das geht nur mit CSS-Befehlen. (Erinnerst Du dich, was oben gesagt wurde? "Der Browser stellt alles in der Reihenfolge dar, die im HTML vergeben wird: nacheinander. Übereinander muss befohlen werden.")
Auch für die kleine Spielerei für Dich hier mit den Box-Hintergrundfarben braucht's CSS. Hier muss ich aber zugeben, dass etwas Skriptsprache Javascript ("Actionsprache") mitmacht, sonst ginge das nicht. Verändere per Klick die Farbe dieser Box:
Diese Erklärsite mit vorangestelltem Demoteil besteht, wie Du jetzt schon weißt, 1 aus einer Datei namens index.html, am heimischen PC geschrieben. Die Dateiendung .html zeigt den Typen der Datei an, kennst Du von oben schon: Hyper Text Markup Language, Hypertext Auszeichnungssprache. Die nächste Datei für diese Site ist 2 die style.css mit den Design-Befehlen. Die Dateiendung .css heißt Cascading Style Sheets ~ Gestufte Gestaltungsbögen.
Die CSS-Datei ist in die HTML-Datei eingebunden, es gibt eine Referenz zu dieser. Die JavaScript-Datei to-top-button.js3 benötige ich für den nach-oben-Button (oben bei Abschnitt 1.2., Webschreib-Sprachen, kannst Du die Datei sehen). Auch diese Script-Datei ist in die Hauptdatei index.html eingebunden. Im images-Ordner4 liegen alle Bilder, die in die index.html eingebunden sind. Der Ordner typicon5 ist für die Icons auf der Site nötig, Pfeilchen und Haus.
Inhalt des Ordners Moms_Frage am heimischen PC
Alle Bilder, die Du hier auf der Site siehst, werden innerhalb des Ordners Moms_Frage in den Unterordner images einsortiert. Jedes Bild bekommt einen eindeutigen Namen. Da alle Bilder in die index.html eingebettet sind, muss auf Ordnung bei der Schreibweise geachtet werden. Wenn ein Bild in der HTML-Datei anders geschrieben wird als es in Echt heißt, dort im Ordner liegend, wird es später nicht angezeigt.
Mein Ordner Moms_Frage, der alles enthält was die Website ausmacht, liegt auf meinem Rechner physisch in Berlin. Er muss jetzt einen Platz im WWW bekommen. Es gibt Firmen, die dort Platz verwalten: es sind Hoster = Webanbieter. Bei einer solchen Firma habe ich ein Mini-Plätzchen gemietet: das bedeutet Speicherplatz auf deren sehr großem Rechner. Auch bezahle ich dafür, dass die Adresse www.bettinagraf.info mir gehört.
Stell Dir vor, im Hintergrund der Adresse bettinagraf.info liegt ein Ordner im WWW, den ich gemietet habe. Dort kann ich eine Menge weitere Ordner von meinem Heim-Rechner aus reinkopieren. Ein Ordner ist gleich eine mögliche Website! Ich nehme also zu Haus den Ordner Moms_Frage, kopiere ihn und sende ihn an mein gemietetes Plätzchen, meinen Ordner auf dem großen Rechner der Firma, der ich Miete für's WWW zahle. Mein Oberordner hat die WWW-Adresse bettinagraf.info.
Der Webhoster hat einen großen Datenspeicher (=Server), der meine Ordner (und die vieler Anderer) beherbergt
Moms_Frage liegt jetzt in meinem Oberordner im WWW. Er ist jetzt schon „im Internet“, die Adresse zum Aufrufen bekommt er sofort. Ich benenne den Ordner um: da Moms_Frage ALLES sein könnte, heißt der Ordner also ab sofort how-to-web, darum gehts nämlich, wie das geht mit dem Web. Der Ordner „how-to-web“ hat automatisch die fertige Internetadresse:
Der Schrägstrich (Slash) hinter „info“ weist darauf hin, dass es vom Oberordner „bettinagraf.info“ in den Unterordner „how-to-web“ geht
Und nun erklärt sich, wieso die Site index.html heißt und sowieso alle möglichen Startseiten im WWW index heißen: der Browser sucht im Ordner how-to-web nach der index-Datei und zeigt sie als erstes, als Startseite. Index = Startpunkt. Alle meine Sites, egal welchen Inhalts, haben als Ausgangspunkt eine index.html. Auch dann, wenn es wie hier in diesem Falle keine Unterseiten / Subsites gibt!
Ein Webentwickler schreibt mit Hypertext- oder Programmiersprachen, z. B. HTML, den Quelltext in Dateien, die später vom Browser als Websites angezeigt werden. Um die Sites voneinander abzuheben, schön zu machen und den Besucher zu lenken und ihm zu helfen, wird die Stylesprache CSS verwendet. Alle Sprachen für's Web haben mehr oder weniger komplizierte Regeln und Gesetzmäßigkeiten; sie müssen gelernt bzw. studiert werden.
Stück für Stück zur Website
Eine Website besteht aus einer bis unzähligen Dateien. Klassisch ist es, eine Startseite und ein paar Subsites zu haben; die Startseite wird traditionell mit Index bezeichnet. Weitere Dateien einer Website sind das Stylesheet, Scripte für Bewegung und Action auf der Site (z. B. eine Bildergalerie) und natürlich viele oder wenige Bilddateien. Es gilt: Viele Wege führen nach Rom - Die Präsenz im Web ist auf viele unterschiedliche Arten möglich.
Nicht jeder kann sich "einfach so" eine Präsenz im Web schaffen. Man muss sich an einen Hoster, einen Verwalter von Webspace wenden. Mit dem geht man einen Vertrag ein und bezahlt für einen Platz im Web.
Man bekommt Zugang zu dessen Server, dem Datenspeicher, um dort Dateien und ganze Sites hinzukopieren. Auch bekommt man eine Webadresse, die sogenannte Domain, z. B. bettinagraf.info - Unter dieser Startadresse kann man dann seine Websites veröffentlichen.
Die Buchstaben nach der Domain, hier .info, stellen die Top-Level-Domain dar. Weitere solcher Top-Level-Domains sind zum Beispiel .de, .com, .it, .ch, .org. Die Top-Level-Domain kann ein Hinweis auf das Ziel oder den Zweck der Website sein, muss aber nicht - sie ist im Rahmen des Verfügbaren frei wählbar!
Sie kann beispielsweise bedeuten, dass die Site-Inhaber aus der Schweiz sind (.ch), eine Organisation betreiben (.org) oder „commercial unterwegs“ (com.), also kommerziell, auf den Verkauf ausgerichtet. Andererseits sind Top-Level-Domains im Grunde willkürlich: Mein .info wählte ich, da .de nicht mehr verfügbar, die Adresse schon besetzt war (nämlich von mir selbst viel früher... doch das ist eine andere Geschichte).
Hier eine Auflistung und Erläuterung einiger Begrifflichkeiten, die mit dem Internet und mit Webentwicklung zu tun haben und Dir im Text begegnet sind.
HTML
Hyper Text Markup Language = dt. Hypertext Auszeichnungssprache (hyper ~ über). Textbasierte Seitenbeschreibungssprache, mit der Inhalte digitaler Dokumente strukturiert werden: Zum Beispiel Texte mit Links, Bildern, und sonstigen Inhalten. HTML-Dokumente sind die Basis des World Wide Web und werden von Webbrowsern dargestellt.
CSS
Cascading Style Sheets = gestufte Gestaltungsbögen = soviel wie "Styleanweisungs-Blätter". Mit HTML zusammen eine der Kernsprachen des WWW. Mit CSS werden Gestaltungsanweisungen / Styleeigenschaften für elektronische Dokumente erstellt. "Gestuft" weist darauf hin, dass sich Eigenschaften von übergeordneten HTML-Elementen auf untergeordnete vererben.
Merke: HTML ist Inhalt, CSS ist Aussehen!
WWW
Steht für World Wide Web, kurz Web oder WWW. Ein System von elektronischen Hypertext-Dokumenten (Webseiten). Durch Hyperlinks miteinander verknüpft, werden sie im Internet über Protokolle, z. B. HTTP oder HTTPS, übertragen. Umgangssprachlich wird das WWW mit dem Internet gleichgesetzt; in Wahrheit ist das WWW jünger als das Internet und stellt nur eine mögliche Nutzung des Internet dar.
Webbrowser
Computerprogramme zur Darstellung von Webseiten im WWW. Sie sind die Benutzeroberfläche für Webanwendungen. Engl. to browse = stöbern, schmökern, umsehen, abgrasen. Viel genutzte Browser sind Google Chrome, Mozilla Firefox, Internet Explorer, Microsoft Edge, Apple Safari, Opera.
Suchmaschine
Die Suchmaschine ist ein Programm zur Recherche von Dokumenten im WWW. Nach Eingabe eines Suchbegriffs in die Suchmaske liefert die Suchmaschine eine Trefferliste mit Verweisen auf relevante Dokumente mit Titel und Auszug aus dem Dokument. In Deutschland nutzen 90 % die Suchmaschine Google. Danach kommen Bing, Yahoo (die Bing verwendet), T-Online (die Google verwendet) und sonstige mit 0,3%. Suchmaschine ist NICHT gleich Browser!
HTTP
Hypertext Transfer Protocol = Hypertext Übertragungsprotokoll. HTTP ist hauptsächlich dazu da, Webseiten aus dem WWW in einen Webbrowser zu laden. Anders formuliert: Protokoll bedeutet, es wird die Art und Weise definiert, wie Daten - z. B. Hypertext, also meine HTML-Datei - auf die Anwendungsschicht, also z. B. Deinen PC, übertragen werden.
URL
Steht für Uniform Resource Locator = Einheitlicher Ressourcenzeiger. Er identifiziert und lokalisiert eine Ressource, z. B. eine Website, über die Zugriffsmethode, die verwendet wird, z. B. die Netzwerkprotokolle HTTP oder FTP. Im allgemeinen Sprachgebrauch wird URL als Internetadresse / Webadresse bezeichnet.
Eine Webadresse besteht aus Protokoll, URL und Top-Level-Domain: http://bettinagraf.info
W3C
Steht für World Wide Web Consortium. Ist seit 1994 das Gremium zur Standardisierung der Techniken im WWW, zum Beispiel HTML, CSS und viele andere. Das Gremium sorgt dafür, dass im WWW so gut wie möglich "alles klappt", dass Konsens über Spezifikationen und Richtlinien herrscht. Gründer ist Tim Berners-Lee, Erfinder des WWW.
(Web-)Hoster
Hoster von engl. to host = beherbergen, aufnehmen, unterbringen. Auch Provider: engl. von to provide = anbieten, liefern, bereitstellen. Der Hoster nimmt die Daten und Ordner der Kunden auf, die dafür Miete zahlen. Der Hoster verfügt über "Platz im Netz", über große Datenspeicher, die sogenannten Server.
(Web-)Server
Engl. von to serve = servieren, bedienen, versorgen. Der Server ist ein lokaler Datenspeicher. So wie die Festplatte im PC ein Datenspeicher ist, ist ein Server einer in großer bzw. riesiger Version. (Es gibt auch virtuelle, das heißt nicht physische = "nicht zum Anfassen" - Server, doch das ist ein anderes Thema). Wenn ich etwas "online stellen" will, dann sende ich Dateien und Ordner von meinem PC-Speicher via Internet zum Datenspeicher des Webhosters. Der hat dann Kopien von meinen Dateien und Ordnern bei sich gespeichert, man sagt auch "gehostet".
HTML
Hyper Text Markup Language = dt. Hypertext Auszeichnungssprache (hyper ~ über). Textbasierte Seitenbeschreibungssprache, mit der Inhalte digitaler Dokumente strukturiert werden: Zum Beispiel Texte mit Links, Bildern, und sonstigen Inhalten. HTML-Dokumente sind die Basis des World Wide Web und werden von Webbrowsern dargestellt.
CSS
Cascading Style Sheets = gestufte Gestaltungsbögen = soviel wie "Styleanweisungs-Blätter". Mit HTML zusammen eine der Kernsprachen des WWW. Mit CSS werden Gestaltungsanweisungen / Styleeigenschaften für elektronische Dokumente erstellt. "Gestuft" weist darauf hin, dass sich Eigenschaften von übergeordneten HTML-Elementen auf untergeordnete vererben.
Merke: HTML ist Inhalt, CSS ist Aussehen!
WWW
Steht für World Wide Web, kurz Web oder WWW. Ein System von elektronischen Hypertext-Dokumenten (Webseiten). Durch Hyperlinks miteinander verknüpft, werden sie im Internet über Protokolle, z. B. HTTP oder HTTPS, übertragen. Umgangssprachlich wird das WWW mit dem Internet gleichgesetzt; in Wahrheit ist das WWW jünger als das Internet und stellt nur eine mögliche Nutzung des Internet dar.
Webbrowser
Computerprogramme zur Darstellung von Webseiten im WWW. Sie sind die Benutzeroberfläche für Webanwendungen. Engl. to browse = stöbern, schmökern, umsehen, abgrasen. Viel genutzte Browser sind Google Chrome, Mozilla Firefox, Internet Explorer, Microsoft Edge, Apple Safari, Opera.
Suchmaschine
Die Suchmaschine ist ein Programm zur Recherche von Dokumenten im WWW. Nach Eingabe eines Suchbegriffs in die Suchmaske liefert die Suchmaschine eine Trefferliste mit Verweisen auf relevante Dokumente mit Titel und Auszug aus dem Dokument. In Deutschland nutzen 90 % die Suchmaschine Google. Danach kommen Bing, Yahoo (die Bing verwendet), T-Online (die Google verwendet) und sonstige mit 0,3%. Suchmaschine ist NICHT gleich Browser!
HTTP
Hypertext Transfer Protocol = Hypertext Übertragungsprotokoll. HTTP ist hauptsächlich dazu da, Webseiten aus dem WWW in einen Webbrowser zu laden. Anders formuliert: Protokoll bedeutet, es wird die Art und Weise definiert, wie Daten - z. B. Hypertext, also meine HTML-Datei - auf die Anwendungsschicht, also z. B. Deinen PC, übertragen werden.
URL
Steht für Uniform Resource Locator = Einheitlicher Ressourcenzeiger. Er identifiziert und lokalisiert eine Ressource, z. B. eine Website, über die Zugriffsmethode, die verwendet wird, z. B. die Netzwerkprotokolle HTTP oder FTP. Im allgemeinen Sprachgebrauch wird URL als Internetadresse / Webadresse bezeichnet.
Eine Webadresse besteht aus Protokoll, URL und Top-Level-Domain: http://bettinagraf.info
W3C
Steht für World Wide Web Consortium. Ist seit 1994 das Gremium zur Standardisierung der Techniken im WWW, zum Beispiel HTML, CSS und viele andere. Das Gremium sorgt dafür, dass im WWW so gut wie möglich "alles klappt", dass Konsens über Spezifikationen und Richtlinien herrscht. Gründer ist Tim Berners-Lee, Erfinder des WWW.
(Web-)Hoster
Hoster von engl. to host = beherbergen, aufnehmen, unterbringen. Auch Provider: engl. von to provide = anbieten, liefern, bereitstellen. Der Hoster nimmt die Daten und Ordner der Kunden auf, die dafür Miete zahlen. Der Hoster verfügt über "Platz im Netz", über große Datenspeicher, die sogenannten Server.
(Web-)Server
Engl. von to serve = servieren, bedienen, versorgen. Der Server ist ein lokaler Datenspeicher. So wie die Festplatte im PC ein Datenspeicher ist, ist ein Server einer in großer bzw. riesiger Version. (Es gibt auch virtuelle, das heißt nicht physische = "nicht zum Anfassen" - Server, doch das ist ein anderes Thema). Wenn ich etwas "online stellen" will, dann sende ich Dateien und Ordner von meinem PC-Speicher via Internet zum Datenspeicher des Webhosters. Der hat dann Kopien von meinen Dateien und Ordnern bei sich gespeichert, man sagt auch "gehostet".
Vorwort Nachwort
Nachwort
Alle erklärenden Inhalte dieser Site sind nach bestem Wissen und Gewissen verfasst. Gliederung, Bereiche und Schwerpunkte der Ausführungen sind so gestaltet, wie die Autorin die Interesselage eines durchschnittlichen Laien im Bereich Webgestaltung und Webschreiberei einschätzt. Es sollte weder der Anspruch auf hundertprozentige fachliche Korrektheit noch auf Vollständigkeit der Thematik erhoben werden - dazu bräuchte es auch sehr sehr sehr viel mehr Platz. Übrigens, alle Illustrationen entstammen der Hand der Autorin - ganz klassisch mit Bleistift auf Papier.
