Hallo Mom - geneigter Leser!

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

Was erwartet Dich jetzt?

Der einfach gestrickte Demoteil oben dient als Erklärungsgrundlage. Ich zeige Dir im Folgenden, wie das im Hintergrund aussieht, was zu welchem Zweck da ist, wie manche Dinge funktionieren. "Erklärbilder" mit farbigen Markierungen dienen Dir zum Nachverfolgen, wovon die Rede ist. Ich veranschauliche, wie das mit dem Style = CSS funktioniert und wie traurig die Web-Welt ohne CSS wäre. Ich zeige Dir auch, wie alles "online gestellt" wird.

In 5 Kapiteln wird alles erklärt. Die Zusammenfassung bietet eine Quintessenz in 13 Sätzen. Alle wichtigen oder schwierigen Begrifflichkeiten sind noch einmal im letzten Abschnitt aufgeführt. - Jeder Hauptabschnitt hat rechts einen "zurück zur Übersicht"-Button, erkennbar am . Er führt Dich immer zum folgenden Inhaltsverzeichnis zurück:

 

1. Handwerkszeug des Webschreibers

zurück zur Übersicht

1.1. Mit was schreibt man Websites?

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!

1.2. Welche Webschreib-Sprachen braucht man?

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.

Grundsätzlich gilt: Das World Wide Web beruht auf Webentwicklung, klar. Das heißt, Du musst niemals alles wissen, Du musst nur googeln 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 keine 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

zurück zur Übersicht

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.

2.1. Was ist was - die drei Hauptelemente

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

2.2. Was ist was GENAU?


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: < ! - - . . . - - >


7 class = 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.


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.
 

3. Verlinkung: Ziel, Titel, Referenz

zurück zur Übersicht

3.1. Anker #1: Bild-Link

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.

3.2. Anker #2: Text-Link

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!

 

4. Wieso Stylesheets schreiben?

zurück zur Übersicht

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.

Demoteil oben ohne Stylesheet

4.1. Ohne CSS: nur "nicht schön, aber lesbar" ?

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.

Wenn der Webgestalter also 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!

4.2. Weshalb man CSS dringend braucht

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 sehr selten sind sie allein auf eine einzige kurze knappe Info ausgelegt. Meist haben Sites ein Anliegen, sie möchten den Nutzer aktivieren, etwas zu tun.

Jawohl! Wenn jetzt der Einwand kommt, wie es denn z. B. mit Touristik-Seiten von Städten 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, weiterzulesen: als mindeste Handlung. Wobei bei den allermeisten Sites sehr viel mehr vom Nutzer gewollt wird.

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

Komplexere Seiten kommen nicht ohne CSS aus, auch zur Benutzerführung

4.4. Zwei Mini-Beispiele: HTML & CSS > Ergebnis

Beispiel #1: Verschiedene Klassen für einen Textteil

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üne 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! (Das wird bei Begrifflichkeiten / CSS noch mal erklärt) - 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.

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.

Um CSS abzuschließen:

Ein paar Style-Eigenschaften wie Background oder Box-Schatten kennst Du nun. Es gibt ca. 350 verschiedene Style-Eigenschaften. "Kleine" Sites haben bei mir Stylesheets mit ca. 700 Zeilen Befehlen. Eine komplexere Site wie bg*library - Sammlung von Webdingen hat ca. 1600 Zeilen. Das ist nicht viel, wenn zwischen den Subsites einer Website Variationen im Design zum Tragen kommen sollen.

Diese Sache mit responsiv muss ja auch befohlen werden, da macht der Browser nix von allein. Der Entwickler schiebt sein Browserfenster Stück für Stück kleiner und schreibt für die sich verändernde Breite immer neue Anweisungen, so dass es für jedes Endgerät möglichst gut aussieht.

Solche Spielereien wie die halbtransparenten Klebestreifen-Bilder, die hier an der Box kleben, dass sie über den eigentlichen Inhaltsbereich an den Kanten hinausragen und ÜBER der Box liegen... all das sind Sachen, die nur mit CSS-Befehlen gehen. Oder so wie im Folgenden, die kleine Spielerei für Dich mit den Farben: Hier muss ich aber zugeben, dass etwas Skriptsprache Javascript ("Actionsprache") mitmacht, sonst ginge das nicht.
Verändere per Klick die Farbe dieser Box:

Box-Hintergrund Rosa
Box-Hintergrund Gelb
Box-Hintergrund Lichtgrün
Box-Hintergrund Hellgrau
 

5. Wie geht's in's Internet mit der Site?

zurück zur Übersicht

5.1. Die Teile, die hochgeladen werden müssen

Diese Erklärsite mit vorangestelltem Demoteil besteht aus einer Datei namens index.html, am heimischen PC geschrieben. Die Dateiendung "html" zeigt den Typen der Datei an, den Du von oben schon kennst: HyperText Markup Language. Die zweite Datei für diese Site ist die style.css mit den Design-Befehlen. Beide Dateien sortiere ich in einen Ordner auf meinem PC ein und gebe dem Ordner den Namen Moms_Frage.

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.

Auf richtige Schreibweise ist zu achten!

5.2. Wie kommt die Site von meinem PC in's Netz?

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 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 namens how-to-web hat schon die fertige Internetadresse: http://www.bettinagraf.info/how-to-web. Der Schrägstrich, der sogenannte Slash hinter "info" weist darauf hin, dass es vom Oberordner "bettinagraf.info" in den Unterordner "how-to-web" geht, siehe Grafik oben.

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!

 

Zusammenfassung

zurück zur Übersicht

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.

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, z. B. bettinagraf.info. Unter dieser Startadresse kann man dann seine Websites veröffentlichen.

Stück für Stück zur Website
 

Wichtige Begriffe & Abkürzungen

zurück zur Übersicht

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 und URL, z. B. 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 und URL, z. B. 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".
 nach oben