Lerndokumentation Modul 101

Internet

Das Internet ist eigentlich nicht mit dem Ziel ein Internet wie wir es heute kennen erfunden worden,
sondern das Internet wurde aus einem Projekt der USA hervorgerufen, bei dem es um die Suche einer Kommunikationsmethode ging,
bei der man noch nach einem Atomunfall bzw. einem Atombombenangriff mit der ganzen Welt kommunizieren kann.
Das sogenannte Internet war das Resultat des Projekts, welches die 1973 von Vinton Cerf erfundene Kommunikationsmethode hervorbrachte.
Seither wird das Internet ständig weiterentwickelt. Wohl die grösste Weiterentwicklung war die Erfindung des World Wide Web(kurz www).
Dieses wurde von Timothy Berners Lee erfunden. Das Internet bekommt von Tag zu Tag mehr Benutzer und ist heute die Lösung für alles.
Ob Videos schauen, Videochatten, Musik hören, Mails schreiben oder recherchieren uvm.

Geschichte des Internets ausführlich erklärt

HTML

Die Entwicklungsumgebung

Ein Website-Schreiber hat seinen Arbeitsplatz natürlich im Büro. Er arbeitet an einem PC oder an einem Laptop.
Auf dem PC braucht er dann natürlich bestimmte Software, dier er fürs schreiben der Websites benötigt.
Dazu gehört natürlich als Grundstein das Betriebssystem, dies ist aber für jeden PC ein muss.
Dann braucht er spezifische Programme wie:

Editor

Wir verwenden den Visual Studio Code.

Browser

Hier verwenden wir meist den Google Chrome Browser.

Grafik

Hier verwenden wir Photoshop. Gimp empfehlen wir hier als kostenfreies Programm.

Webserver

Um grosse Websites betreiben zu können, muss man Platz auf Webservern mieten. In unserem Fall reicht der kostenlose XAMPP-Webserver

Development Tools

Hier verwenden wir meist, das inbegriffene Developer Tool des Chrome-Browsers. Dies kann man per F12 öffnen.

Die HTML-Elemente

Auf dem Folgenden Bild sehen sie eine Abbildung eines HTML-Elementes und dessen Aufbau.
Dieses Bild zeigt ein sogenannt leeres Element. Es ist ein leeres Element, weil es keinen Inhalt hat. Ein normales Element ist so aufgebaut:

<a href="https://lorsch10.github.io/Lerndoku_Modul101-ScL/">Lerndoku ScL</a>

In diesem Fall hätte ich nun einen Link in Form des Inhalts „ Lerndoku ScL“. Das bedeutet,
wenn jemand auf diesen Link klickt, wird er sofort auf die Webseite meiner Dokumentation weitergeleitet,
da ich als Link, der Link ist in den Gänsefüsschen bei href angegeben, den Link meiner Webseite auf der ich die Doku schreibe angegeben habe.
Wie man sieht besteht ein HTML-Element aus dem Start-Tag. Danach folgt das Attribut das in Name un Wert aufgeteilt ist. href z. B. ist ein Name,
der Websitelink ist der Wert. Nach dem Attribut kommt der Inhalt. Oben wäre das also Lerndoku ScL. Zum schluss kommt noch der End hin.
Die Tags unterscheiden sich nur durch ein Slash. Der Slash wird beim End-Tag nach der kleiner als-Klammer vor den Wert des Tags gesetzt.

Das Textelement

Es gibt verschiedene arten von Textelementen. Textelemente dienen der Strukturierung von Texten.

h1, h2, h3 usw.

h sind Überschriften, wobei h1 die Hauptüberschrift ist.

p

p steht für paragraph was soviel wie Abschnitt bedeutet. Im p wird der grösste Teil des normalen Textes geschrieben.

a

a verwandelt das geschriebene in einen Link. Weiter beschrieben wird dies im Abschnitt Linkelement. Dies passiert innerhalb eines p-Elements.

b und strong

b und strong schreiben alles im Abschnitt Fett. Es empfhielt sich aber, formatierungen im CSS zu machen. Dies passiert innerhalb eines p-Elements.

i und em

i und em schreiben alles im Abschnitt kursiv. Auch das sollte man lieber im CSS machen. Dies passiert innerhalb eines p-Elements.

sup und sub

sup schreibt alles im Abschnitt hochgestellt, sub alles tiefgestellt. Dies passiert innerhalb eines p-Elements.

s und del

s und del lassen den markierten Abschnitt in der Mitte durchstreichen (horinzontal). Auch hier ist CSS empfehlenswert.

ins

ins lässt alles in seinem Abschnitt unterstreichen. Dies sollte man besser auch im CSS machen. wie alle diese Sachen im CSS gehen, wird im Kapitel CSS beschrieben.

Das Listenelement

Es gibt verschiedene listentypen. Einmal hätten wir die ul. ul steht für unordered list. das bedeutet eine ungeordnete liste.
Das bedeutet es ist eine Liste die keine fixe Reihenfolge macht. Das gegenteil davon ist die ol, die ordered list. Sie nummeriert die aufgelisteten Inhalte.
Das System ist bei beiden gleich. Zuerst setzt man den Typ der liste also entweder ul oder ol. Dann schreibt man zwischen den Start- und Endtag li.
Zwischen dem li Start- und Endtag schreibt man dann den gewünschten Inhalt. diese werden dann entweder als ol oder ul angezeigt. Die Liste bei den Textelementen ist eine dl.
Dl bedeutet Definitionsliste. Da wird Zuerst der Typ gesetzt. Der Typ ist hier natürlich dl. Dann setzt man dt. Dt ist von der Verwendung her eigentlich gleich wie li.
Hier wird nähmlich auch der Inhalt eingesetzt. Zum schluss wird unterhalb von dt noch dd verwendet. Bei dd wird die Definition von dt eingesetzt.

Das Formularelement

form

form ist das Grundelement, dass alle weiteren Formatierungselemente umschliesst.

action

Jedes form-Element muss das Attribut action beinhalten. action hat den Wert der Website, wo die Auswertungen dann hingeschickt werden sollen.

method

method bietet zwei Varianten zum versenden der Formulare. get und post. get ist für kurze und post für lange Formulare. Mehr dazu auf S.156 im Buch.

id

id wird grundätzlich dafür verwendet, um zu schauen ob alle Pflichtfelder ausgefüllt wurden.

Input

Input erstellt verschiedene Forularsteuerelemente. Die wichtigsten folgen unmittelbar unter

type="text"

Dies erstellt ein einzelliges Textfeld.

name

name gib den Typ an,der in das formular eingegeben wird. Z. B. username oder password.

maxlength

maxlength gib die maximallänge der Anzahl Zeichen im Eingabefeld an. Als Beispiel: Jahrgang= max. 4 Zeichen.

type="password"

Es verhält sich wie type="text", nur wird der eingegebene Text nicht angezeigt.

textarea

Mit textarea wird ein mehrzeiliges Texteingabefeld generiert. Diese werden vorallem für Kommentare oder Bemerkungen verwendet.

type="radio"

Dies wird für eine Auswahl verwendet, bei der man auf den Kreis des auzuwählenden Objektes klickt und es sich mit einem Punkt im Kreis erweitert.

value

value enthält den Wert, der für die ausgewählte Option an den Server gesendet wird.
Bei submit wird value für die angabe des Textes auf dem Button verwendet.

checked

Mit checked können sie eine Vorauswahl festlegen, falls sie das wollen.

type="checkbox"

Mit checkbox wird ähnlich wie bei radio eine Auswahl erstellt.
Hier sind es aber Kästchen und sie werden mit einem Haken makiert, wenn drauf geklickt wurde.

select

Mit select werden Auswahl-Dropdownlisten erstellt. Ein select-Element muss mindestens zwei option-Elemente enthalten.

option

zwischen option-start- Endtag steht die Auswahl, die man im Dropdownmenü dann zur verfügung hat.
Dies muss aber für jede Auswahlmöglichkeit einzeln gemacht werden.

selected

funktioniert wie checked. Man legt mit selected nämlich die Vorauswahl fest.

multiple

wen man multiple den Wert multiple gibt, wird dem Benutzer eine Mehrfachauswahl ermöglicht.

input

input ermöglicht dem Benutzer, Dateien über den Input-Link hochzuladen, der meist als Button dargestellt wird.

type="submit"

Hiermit wird ein Knopf erstellt. Dieser Button wird dann mit value beschriftet. Beispiele dafür sind: Senden oder Registrieren

type="image"

Wird unter dem Element input verwendet. Mit image können sie der Schaltfläche ein Bild als Hintergrung geben.

button

wird auch für Schaltflächen verwendet. Der Vorteil an Button ist grössere Kontrolle.

type="hidden"

Erstellt ein verborgenes Formular, d.h für Benutzer nicht sichtbar. Der Autor kann mit dem Formular aber Werte hinzufügen.
Als Beispiel kann er sich anzeigen lassen, von welcher Seite der User das Formular abgeschickt hat.

label

label wird innerhalb von fieldset gesetzt. label fügt den beschreibenden Text vor die Textfläche.

fieldset

Hier werden Gruppen zusammengehöriger Steuerelemente zusammengefasst. Dies ist nützlich im umgang mit Formularen.
Meist werden Linien um den Inhalt eines Fieldsets gemacht, so ist der Zusammenhang der Elemente besser erkennbar.

legend

gibt dem fieldset-Element und seinem Inhalt eine Überschrift.

type="date"

mit type="date" zeigen HTML5 Browser ein Datumseingabefeld an.

type="email"

Hierdurch wird ein Emaileingabefeld erstellt, dass von HTML5-Browsern nach Format geprüft wird.
Einige Handys passen auch die Touchtatur an.

type="url"

Hierdurch wird ein URL-Eingabefeld erstellt, dass von HTML5-Browsern nach Format geprüft wird.
Einige Handys passen auch die Touchtatur an.

type="search"

search wird innerhalb von input verwendet. Es erstellt ein Suchfeld. Neue Browser wie Safari weisen Merkmale auf,
die die Bedienung vereinfachen. Z. B. ein X um den Suchinhalt zu löschen.

placeholder

Der Placeholder zeigt einen Text im Suchfeld an, bis in das Suchfeld geklickt wird.

Besonderes Markup

Das erste Was ich zu diesem Thema anspreche, sind die verschieden HTML-Versionen. Die neuste beginnt in der 1. Zeile mit !DOCTYPE html
Genaueres findet ihr hier:

HTML-Versionen Infowebsite

Weiter gehts es mit Kommentaren. Kommentare sind Texte die zwischen eine Bestimmte Reihenfolge von Zeichen stehen. Diese Lautet wie folgt:
<!--Text-->
Anstelle von Text kann am selben Ort jedes Beliebige Wort oder jeder beliebige Satz stehen.

id und Class sind zwei sehr wichtige Attribute. Mit id kann man ein Element so beschriften, dass man es im CSS alleine bearbeiten kann.
Das bedeutet, wenn ich einem p eine id p1 gebe, und ich nur dieses p und nicht alle anderen p's auch noch ändern möchte, muss ich p1 benutzen.
Class macht das gleiche. Es gibt aber einige Unterscheide. Ersteinmal muss gesagt sein, dass id die grössere Priorität besitzt als class.
Dazu kann id nur ein einziges Element auswählen, class kann beliebig viele. Der letzte Unterscheid ist das ansprechen.
Dies ist wichtig für Links, wie z. B. die ol-Liste anfänglich des Kapitel HTML. Noch wichtiger ist es aber fürs CSS.
id wird mit einem #Hashtag angesprochen, class mit einem .Punkt.

Wir kommen zu den Inline- und Blockelementen. Blockelemente beginnen bei der Anzeige im Browserfenster immer in einer neuen Zeile.
Inline-Elemente stehen in derselben Zeile wie ihre Nachbarelemente. Beispiele zu Blockelementen sind: h1,h2... p, ul, li.
Wie vielleicht bemerkt sind dies alles Textelemente, in dem Sinn, dass zwischen ihren Tags Wörter, Sätze und Texte geschrieben werden.
Beispiele zu Inline-Elementen sind: a, b, em und img. Diese sind als Deko zu gebrauchen. a ist ein Link, b und em verändern die Schrift,
und img fügt Bilder ein.

DIV ist ein Gruppierungselement, dass sehr oft verwendet wird. mit div kann man Abschnitte markieren und wenn man ihnen noch id oder class gibt,
kann man diese Abschnitte auch im CSS Formatieren.

Das Flash-, Audio- und Videoelement

Wie macht bettet man ein Video auf einer Website ein, So das es ein Titelbild und ein Menu hat. Hier folgt ein Link:

<video src="video.mp4" poster="Thumbnail.jpg" width="350px" height="220px" controls></video>

Dies ist der link um ein Video mit der obigen Beschreibung einzubinden. Bei video und Thumbnail müssen natürlich noch die Weblinks hin.

um Eine Audio-Datei einzufügen benötigt man folgenden Link:

<audio src="link.mp3" controls></audio>

Um zwei verschiedene Audioquellen zu verbinden benötigt man source.Link:

<audio controls> <source src="link.mp3" /> <source src="link.ogg" /> </audio>

Eine Audiodatei auf einer HTML5-Website sieht so aus:



Diese Audiodatei hier ist natürlich nicht funktionstüchtig, da ich den 1. Link verwendet habe welcher kein richtiger Link steht.

Das Bildelement

Es gibt verschieden Bilddateien. Unten stehen die wichtigsten aufgelistet.

Bei RAW steht kein Format, weil es beim RAW-Format gibt für jede Kameramarke eine eigenes,mit den anderen nicht kompatibles Format gibt.
Daher gibt es ziemlich viele. RAW ist die rohe Version des Bildes. Diese haben eine Sehr grosse Dateigrösse,
da sie im Gegensatz zu JPEG und PNG nicht komprimiert, verkleinert wurde.

Der link um ein Foto auf einer Website einzubinden, lautet wiefolgt:
<a href="link.png"></a>

Das Linkelement

Das Tabellenelement

CSS

CSS-Regel

Eine CSS-Regel besteht aus zwei Teilen: einem Selektor und einer Deklaration.
Die Deklaration ist dann nochmal in zwei Teile aufgeteilt, nämlich in Eigenschaft und Wert.
Die Eigenschaft zeigt an, was sie ändern möchten. Der Wert zeigt an, wie sie es ändern möchten.
Dies ist im obigen Bild sehr gut sichtbar.

CSS einbinden

Um ein CSS-Dokument einzubinden, welches sie neben ihren HTML-files geöffnet haben, müssen sie folgendes tun.
Verlinken tut man es mit dem Element "link" im Head des HTML-Dokuments.
Dies sieht folgendermassen aus:

<link rel="stylesheet" href="style.css" type:"text/css">

Wichtig hier ist, dass sie den richtigen Ablageort bei href hineinschreiben, sonst findet das HTML-file das CSS-Dokument nicht,
was dazuführt, dass sie sich nicht erkennen und verknüpfen können.
Da das CSS-file im Beispiel im gleichen Ordner liegt wie das HTML-Dokument, wird hier nur der name des Dokuments angegeben.

CSS-Selektoren

Text in CSS formatieren

In der Oberen Abbildung wird das System der Formatierung sehr gut aufgezeigt.
Auf dem Unteren Bild sind verschiedene Schriftstärken abgebildet. Recht sind sie zusätzlich in einer anderen Schriftlage.
Auf dem Bild im letzten Abschnitt sieht man einige der wichtigsten Eigenschaften im CSS
mit dem hover-Selektor kann man z. B. eine Schrift formatieren, die auftritt, wenn sie mit der Maus in Berührung kommt

Schriften mit Google Fonts einbinden

Eine Schrift über Google Fonts einzubinden, ist sehr einfach. Zuerst suchen sie sich eine Schriftart aus.
Dann drücken sie auf das rote Plus. Danach steht am unteren Bildschirmrand "1 Family selected"
Auf diesen Banner drücken sie dann. Auf diesem steht unter Embed Font bei Standard ein Link,
den müssen sie dann kopieren und in den Head des html-Dokuments einfügen.
Mit dem Link unter Specify in CSS können sie die Schrift im CSS einem Element zuteilen.

Farben in CSS

Farben gibt man in CSS immer mit dem Objekt an, ausser bei der Schriftfarbe.
Um die Farbe des Hintergrundes zu ändern gibt man also folgendes ein:

background: black;
oder
text-decoration: green;

die Ausnahme ist wie bereits erwähnt die Schrift. Diese wird mit color angegeben:
color: blue;

Die Farben, die mit Namen erwähnt sind, sind sehr begrenzt in der Anzahl. Es gibt nur 147 davon.
Daher kann man die Farben auch mit RGB, RGBA (RGB einfach mit Transparenzangabe) und Hexadezimal.
Ich persönlich nehme mir immer eine Farbe mit Name und gehe diese dann Per klick auf die Farbe bearbeiten.
Die Transparenz kann, wie oben erwähnt, mit RGBA oder auch mit oiacity angegeben werden.
Beide dieser Angaben werden aber bis jetzt nur von den neuen Browsern wie gewünscht verarbeitet.
Bei den Alten Browsern wird also nur der Farbwert erkannt, was im unten Folgendem Beispiel schwarz ist, erkannt.

Im CSS geschrieben sieht es so aus:

#f1 {
padding: 30px;
background: rgb(0, 0, 0);
opacity: 0.5;
color: white;
margin-bottom: 20px;
}

#f2 {
padding: 30px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
color: white;
margin-bottom: 20px;
}

Kästen

width, height

Hiermit können sie die exakte Grösse eines Kastens angeben

min-width, max-width

Diese Eigenschaften sind erst seit dem IE7 und Firefox2 verfügbar.
Mit diesen gibt man die midest- bzw. die maximalbreite eines Kastens an

min-height, max-height

Ist dasselbe wie das obige, einfach für die Höhe anstelle der Breite

falls sich die Kästen überschneiden, gibt Overflow an was zu tun ist
Bei overflow gibt es dafür zwei Möglichkeiten:
Scroll und hidden. Diese sind selbsterklärend

border-width

mit border-width kann die Rahmendicke angegeben werden.
Die Reihenfolge der Seiten ist genau wie der Kompass. NOSW.

border-style

Mit border-style kann man die Randart ändern. dafür gibt es folgende Möglichkeiten:

• solid
• dotted
• dashed
• double
• groove
• ridge
• inset
• outset

Auch hier gilt, dass dies für jede Seite gemacht werden kann. Dies auch wieder nach NOSW

border-color

Ist durch den Namen selbsterklärend. Auch hier gilt, jede einzelne Seite ist einzel ansprechbar

border

In border können sie Breite, Art und Farbe mit einer einzigen Eigenschaft bestimmen. Es muss aber diese Reihenfolge haben

padding

mit padding definieren sie den Abstand zwischen dem Element und seinem Rahmen

margin

margin definiert den Abstand vom Rahmen bis zum nächsten Objekt

display

Diese Eigenschaft kann folgende Werte annehmen:

• Inline - Blockelement verhält sich wie ein Inline-Element
• Block - Inline-Element verhält sich wie ein Blockelement
• inline-block - sorgt für Flusseigenschaften eines Inline-Elements bei einem Blockelement
• none - blendet das Element so aus, dass es aussieht als gäbe es das Element gar nicht
• hidden - verbirgt das Element
• visible - zeigt das Element an

border-image

Gestaltet mithilfe eines Bildes den Rahmen eines Bildes

box-shadow

Hiermit können sie einen Kasten mit einem Schlagschatten umgeben

border-radius

Mit Border-radius kann man Kästen Abgerundete Ecken geben

Listen, Tabellen und Formulare

list-style-position

Es gibt zwei Möglichkeiten: outside ist Standard und inside eher speziell.
Outside ist ausserhalb des Satzes, Inside Innerhalb.

list-style

Mit diesem Element kann man die Art der Aufzählungszeichen ändern.

width

legt die Breite der Tabelle fest

padding

legt den Abstand zwischen Rahmen der einzelnen Tabellenzellen und ihrem Inhalt fest

text-transform

wandelt den Inhalt der Tabellenkopfzeilen in Grosbuchstaben um

letter-spacing, font-size

sorgen für eine zusätzliche Formatierung des Inhalts von Tabellenkopfzeilen fest

border-top, border-bottom

legen die Rahmen über und unter den Tabellenkopfzeilen fest

text-align

richtet den Text in einigen Tabellenzellen linksbündig und in anderen rechtbündig aus

background-color

ändert abwechselnd die Hintergrundfarbe der Tabellenzeilen

:hover

hebt eine Tabellenzeile hervor, wenn der Benutzer mit dem Mauszeiger darüber fährt.

empty-cells

legt fest, ob bei leeren Zellen die Ränder angezeigt werden.

• show - Die Rahmen von leeren Zellen werden angezeigt
• hide - Die Rahmen von leeren Zellen werden ausgeblendet
• inherit - Sorgt dafür, dass eine verschachtelte Tabelle auf die Regeln der umfassenden Tabelle hört.

border-spacing, border-colapse

Mit spacing regeln sie den Abstand benachbarter Zellen, mit spacing kann dieser Abstand vergrössert bzw verkleinert werden

• collapse - Die Rahmen werden wenn möglich zu einem Einzigen zusammengefasst
• separate - Die Rahmen werden voneinander getrennt

font-size

legt die Grösse des Textes fest, der von den Besuchern eingegeben der Eingaben

color, background-color

color legt die Schriftfarbe fest, letzteres die Hintergrundfarbe

border

legt einen Rahmen um das Eingabefeld.

border-radius

Mit border-radius können sie die Ecken des Rahmens abrunden

:focus

Dient dazu, die Hintergrundfarbe der Texteingabe zu ändern, während das Eingabefeld benutzt wird

:hover

Mit hover können Formate angewendet werden, wenn der Benutzer mit dem Mauszeiger über das feld fährt

background-image

fügt dem Kasten ein Hintergrundbild hinzu.
Da für jedes Eingabefeld ein anderes Bild verwendet werden soll, suchen wir mit einem Attributsselektor jeweils nach dem Wert von id

padding

dient dazu, die Elemente mit innenrändern zu versehen

width

legt die Breite der Feldgruppe fest. In diesem Beispiel wird mit der Breitenangabe dafür gesorgt,
dass die Formularelemente an der richtigen Stelle in eine neue Zeile umbrechen

cursor

Mit dieser Eigenschaft können sie den Typ des Mauszeigers steuern, den die Benutzer sehen

• auto
• crosshair
• default
• pointer
• move
• text
• wait
• help

Bilder in CSS

Diesen Rahmen habe ich in CSS mit den Elementen border& border-style erstellt,
die unter Kästen bereits erklärt wurden, aber auch für Bilder zu gebrauchen sind.

Bilder können auf verschiedene Arten platziert werden.
Um ein Bild auf links oder rechts zu kriegen, kann man entweder float oder text-align verwenden.
Grundsätzlich kann ein Bild gleich platziert werden oder einen Rand kann gleich bearbeitet werden wie bei einem Kasten,
daher erkläre ich diese Optionen nicht erneut.
Die Elemente, die zum platzieren von Tabellen und Listen verwendet werden, können auch hier teilweise sehr nützlich sein.
Zusätzlich kann man auch hier die bereits beschriebenen Elementewidth und height verwenden, um die grösse eines Bildes anzupassen.
Eine zusätzliche Option werden sie in einem der nächsten Kapitel kennenlernen, nämlich Flexbox.

Boxmodell

Das Boxmodell funktioniert folgendermassen: Hier oben im Bild ist das Boxmodell des Chrome-Developertools abgebildet.
Auf diesem ist der blaue teil das Objekt, zum Beispiel ein Bild. Diesem kann jetzt padding gegeben werden.
Dieses steht für den Abstand zwischen Objekt und border, was Rand bedeutet.
Auch dieser Border kann in Grösse, Form und Farbe bearbeitet werden.
Ausserhalb des Randes kommt noch das margin, welches für den Abstand von Border zum nächsten Objekt oder zum Rand der Webseite steht.

Die Box, die oben zusehen ist, ist insgesamt 150px gross. Wie dieses aber im CSS gemacht wurde sehen sie hier:
#box {
width: 100px;
height: 100px;
margin: 15px;
border: 10px;
border-style: double;
padding: 15px;
background-color: rgb(35, 156, 71);
}

Flexbox

Media Queries

Wie oben zusehen ist, geht es bei Media Queries darum, die Website für alle geräte anschaubar zumachen.
Wenn sie eben so angepasst sind, sind sie responsiv. Daher ist hört man auch öfter responsive Webdesign,
was nichts anderes bedeutet, als die Webseite für alle Geräte anzupassen. dies tut man wiefolgt:
@media (max-width: 768px) {
div {
padding: 15px 40px;
}

Hier sieht man also eine Media Querie die sagt,
dass das div bei einer breite von maximal 768px auf eine bestimmte Grösse schrumpfen soll.
Dies kann mit jeder gewünschten Breite und jedem gewünschtem Element getan werden.

Praxis

Wireframe

Ein Wireframe ist eine Vorlage, die man für den Bau einer Website benützt.
Das Ziel eines Wireframes ist, dass man sich einen groben Plan für das Aussehen der Website erstellt.
Diese muss danach auch nicht identisch aussehen.

Sitemap

Ein Sitemap dient zur Sammlung und zuordnung von Ideen. Oben ist meist das Thema als "Oberhaupt".
Dieses wird dann in mehrere Grundthemen aufgeteilt, diese werden auch weiter in Gruppen zerlegt.
Wie so eine Sitemap aussehen könnte sehen sie im Bild oberhalb dieses Textes.

Layout in HTML

Im HTML braucht es eine bestimmte Ordnung um den Überblick zu behalten.
Eine Funktionstüchtige Website hat immer ein Head, indem Infos geschrieben sind, die man auf der Seite nicht sieht,
und den Body, in dem alles drinsteht was zusehen ist.

Im Body hat man dann einige Möglichkeiten um ihn nochmals zu unterteilen.
Folgend sehen sie eine Liste mit einigen Unterteilungselementen.

• header
• div
• nav
• main
• footer

Validierung

Validieren bedeutet, dass man seine Seite nach den von W3C aufgestellten Regeln kontrollieren lässt.
Dies tut man, indem man seinen Code in den Validator kopiert. Dieser wird einem dann den Fehlerort& Grund nennen.

Testprotokoll

Am Ende testet man, ob die Website wunschgemäss funktioniert.
Dies macht man am einfachsten mit einem Testprotokoll,
in dem man das Ziel des Tests und das wirkliche Ergebnis aufschreibt und vergleicht.

Glossar