-Website

ÜK 101

HTML

Tags und Grundgerüst

Ein HTML Grundgerüst besteht aus einem <html>, einem <body> Tag und wichtigen anderen Tags. Darunter sind zum Beispiel die <head>, <header>, <p> und <footer> Tags. Alles was in einer Website angezeigt werden soll, steht im <body> Tag. Vor dem <body> Tag steht oftmals das Element <head> mit Informationen über die Seite. Um schnell ein HTML Gerüst aufzubauen kann man auch den Befehl "html:5" eingeben.

Ein HTML Grundgerüst besteht aus einem <html>, einem <body> Tag und wichtigen anderen Tags. Darunter sind zum Beispiel die <head>, <header>, <p> und <footer> Tags. Alles was in einer Website angezeigt werden soll, steht im <body> Tag. Vor dem <body> Tag steht oftmals das Element <head>> mit Informationen über die Seite. Um schnell ein HTML Gerüst aufzubauen kann man auch den Befehl "html:5" eingeben.

Hier nochmal die wichtigsten HTML Elemente zusammengefasst:
<html> Dieses Element braucht es am Anfang in jedem HTML-Dokument
<head> Hier stehen alle wichtigen Informationen über die Seite
<body> Der ganze sichtbare Text steht hier drin
<header> Kopfbereich einer Website
<footer> Fussbereich einer Website
<a> Wird benutzt wenn man Links einfügen möchte
<h1> - <h6> Wird benutzt für Überschriften
<img> Wird benutzt um Bilder einzufügen mithilfe eines Links mit <src="">
<nav> Enthält die Hauptnavigationsabschnitte der Website, in einem <nav> Element steht oftmals ein <ul> und ein <li> Element
<p> Wird benutzt um einen Absatz zu erstellen
<table> Wird benutzt um Tabellen zu erstellen
<tr> Markiert den Beginn einer neuen Zeile einer Tabelle
<td> Stellt die einzelnen Zellen einer Tabelle dar
<ol> Liste mit Zahlen (1. 2. 3.)
<ul> Liste mit Punkten, statt Zahlen
<li> Erstellt jeden Eintrag einer Liste, es steht immer innerhalb eines <ol> oder <ul> Elements
</p> Für einen Paragraph

Zusammenfassung aller Elemente
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

</body>
</html>

Testing

Testing beschreibt das testen einer Software, damit sie flüssig läuft. Bei einer Webseite ist dies wichtig, weil es viele verschiedene Browser gibt, welche verschieden Eigenschaften haben. Man kann mithilfe von Validierung den Code prüfen. Die Validierungssoftware ist dafür zuständig, dass der Quellcode richtig geschrieben ist. Man kann sich mithilfe einer Tabelle Angaben dazu machen, was man noch prüfen muss und was noch ansteht. Auch kann man in der Tabelle notieren, ob die Fehler behoben worden sind oder noch nicht gelöst wurden. Wichtig bei einem Testprotokoll ist, das Datum, Uhrzeit, getesteter Browser und die Windows Version. Auch muss der Autor des Testprotokolls vorhanden sein und wie die Webseite heisst. In einem Testprotokoll stehen meistens die Titel "Fehler/Resultat, SOLL/Erw.Res, Wie getestet und Was getestet wurde.

CSS

Eigenschaften

Mit CSS erstellt man Regeln, die die Darstellung eines HTML-Elementes beeinflusst. Um CSS zu verstehen, muss man sich um jedes HTML-Element einen unsichtbaren Kasten vorstellen. Mit CSS kann man diesen Kästen Formatierungsregeln zuweisen. Man kann einen Rahmen um die Kästen legen, die Breite, Höhe und die Seitenabstände einstellen, oder sogar ein Hintergrundbild einfügen. Eine CSS-Regel besteht aus 2 Regeln: einem Selektor und einer Deklaration. Der Selektor wählt das Element aus. Man kann entweder eine Elementgruppe (z.B. h1), eine Klasse (z.B. .navbar) oder eine ID (z.B. #blcform). Die Deklaration bestimmt, wie die Elemente formatiert werden sollen. Sie besteht aus 2 Teilen: Einer Eigenschaft und deren Wert. Die Eigenschaft bezeichnet den Aspekt des Elements. Das kann z.B. die Farbe, der Abstand oder das Hintergrundbild sein. Die Werte nennen die Einstellung für die Eigenschaft. Um z.B. die Höhe zu definieren, muss der Wert eingetragen werden.

Aufbau CSS

CSS einbinden

Extern

Mit dem Element link kann man dem Browser mitteilen, wo sich die CSS-Datei befindet. Es ist ein leeres Element, also ist kein schliessender Tag nötig. Ausserdem sollte sich das Element im head befinden. Mit dem Attribut href gibt man den Pfad der CSS-Datei an, mit type die Art des verknüpften Dokuments (hier: text/css) und mit rel die Beziehung zwischen der HTML-Seit und der CSS-Datei. (hier: stylesheet)

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

Intern

Mit dem style-Element kann der CSS-Code direkt ins HTML eingebunden werden. Dies ist aber nicht zu empfehlen, da für jede Seite die CSS-Eigenschaften manuell geändert werden müssen. Das Attribut type macht den gleichen Job wie bei der externen Einbindung.

Das style-Element wird auch im head platziert.

<style type="text/css">
body {
font-family: arial;
}
h1 {
color: rgb(255,255,255;)
}
</style>

Selektoren

Selektoren + Beispiele Bedeutung
Universalselektor
* {}
Dieser Selektor gilt für alle Elemente im Dokumente. Mit diesem Selektor kann man eine Schrift für das ganze Dokument festlegen.
Typselektor
h1, h2, h3 {}
Gilt für übereinstimmende Elementnamen.
Klassenselektor
.class{}, h1.class{}
Der Klassenselektor spricht Elemente an, die einer bestimmten Klasse zugehören.
ID-Selektor
a (alle a Elemente die Kinder eines li Elementes sind)
Mit dem ID-Selektor kann ein Element angesprochen werden, dem eine ID zugeordnet wurde.
Nachkommenselektor
p a (alle a Elemente innerhalb eines p Elements)
Gilt für Elemente die dem angegebenen Element untergeordnet sind.

Pfade

Pfade werden gebraucht um Bilder einzufügen oder andere Dokumente ins Dokument einzubinden. Die Ordnerstruktur spielt bei den Pfäden eine grosse Rolle. Bsp: Der Hauptordner heisst BlWebsite, in diesem Ordner befinden sich die Ordner html, css und img. Im Html Ordner befinden sich dann 3 html Dateien, im css eine style.css Datei und im img befinden sich alle Bilder. Wenn man im Dokument index.html drin ist (im Ordner html) und ein Bild reintun will muss man folgenden Pfad eingeben: ../../img/bild.jpg. Das ../ steht für einen Schritt zurück, dann geht man in den Ordner img und wählt in diesem Ordner ein Bild aus. nach dem man den Pfad eingegeben hat kann man noch die Höhe und Breite einstellen. Wenn man will kann man noch eine alternative für das Bild schreiben, diese steht dann wenn das Bild nicht angezeigt werden kann oder der Pfad falsch ist.

Ordnerstruktur Beispiel Pfad

Beispiel: Der Ordner Beispiel ist das Hauptverzeichnis, wenn man im index.html ein Bild aus Test2 hinzufügen möchte muss man ein Verzeichnis zurück und erst dann das Bild einfügen. Der Richtige Pfad wäre: ../Test2/footer.png

Classes und Ids

Einzelne Teile einer Html Seite zu formatieren werden classes und ids genutzt. Mit classes kann man bei beliebig vielen Elementen die gleiche Formatierung geben. Eine class definiert also eine «klasse», alles was in dieser Klasse geschrieben wird sieht gleich aus. Ids kann man im Gegensatz zu Classes nur einmal nutzen. Wenn man einen einzigen Text im Dokument fett machen will dann kann man eine id benutzen. Ids und Classes haben im Prinzip dieselbe Aufgabe. Ob man classes oder ids braucht ist jedem selbst überlassen. Im Html:

<p class="style">Text Text Text</p>
<p id="style">Text Text Text</p>

Im CSS:

.style {
font-size: 18pt;
}
#style {
font-size: 20pt;
}

Verzeichnisstruktur

Bei einer Verzeichnisstruktur von einer grossen Website ist es sehr wichtig, dass diese Logische und übersichtliche aufgebaut ist. Unten auf dem Bild sieht man ein gutes Beispiel für eine solche Struktur, dazu werden Eltern und Kindelemente eingesetzt. Zum Beispiel ist der Hardwaredealz Ordner ein Elternordner und die Ordner Computer Deals, Images, Laptop Deals und Peripheriegeräte sind die jeweiligen Kinderordner. Der Hardwaredealz Ordner ist auch ein Grosselternordner und die Enkelordner sind Headset Deals, Maus Deals und Tastatur Deals. Das sorgt dann insgesamt wie schon gesagt für eine gute Struktur.

Verzeichnis + Elternelemente

Elternelemente und Kindelemente

Eltern und Kindelemente sind die richtige verteilung in einem code von html, dabei ist das Elternelement immer das welches über dem Kindelement steht. Zum Beispiel ist beim unten dargestellten Bild der <body> das Elternelement und <nav>, <h1>, <h2> und <h3> sind Kindelemente. Eltern und Kindelemente sind auch sehr wichtig für Flexbox, da dabei immer das Elternelement angesprochen werden muss. Also um zum beispiel beim Code, wenn man die Tags <nav>, <h1>, <h2> und <h3> in einer Kolone haben will, muss man in CSS auf body Flexbox anwenden.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<nav>
<ul>
<li></li>
</ul>
</nav>
<h1></h1>
<h2></h2>
<h3></h3>
</body>
</html>

Box Modell

Jedes Element in HTML und CSS hat eine box um sich. diese Box besitzt einen Padding, eine Border und einen Margin. Der Padding ist der innere Abstand, der Border der Rahmen und das Margin ist der Äussere Abstand. Diese kann man in CSS Vergrössern oder verkleinern mit den folgenden Eigenschaften:

Box-Modell
  • Margin: “Grösse”;
  • Padding: “Grösse”;
  • Border: “Grösse”;

Ein Beispiel:

header p {
margin: 50px;
padding: 50px;
}

Flexbox

Flexbox ist ein Tool um Inhalte in Websites zu verschieben. In Flexbox gibt es verschiedene Eigenschaften hier werden nur die wichtigsten aufgelistet falls etwas nicht aufgelistet ist dann kann man auf der Website css-tricks nachschauen. css-tricks

Display: flex; Zeigt die Flexboxen an (sollte immer geschrieben werden wenn Flexbox verwendet wird)
Flex-direction: row; Waagerecht von links nach rechts
Flex-direction: row-reverse; Waagerecht von rechts nach links
Flex-direction: column; Senkrecht von oben nach unten
Flex-direction: column-reverse; Senkrecht von unten nach oben
Justify-content: flex-start; Items sind am Anfang der Flex Richtung
Justify-content: flex-end; Items sind am Ende der Flex Richtung
Justify-content: center; Items sind in der Mitte
Justify-content: space-between; Items haben einen Abstand dazwischen
Justify-content: space-around; Items haben einen Abstand um sich

Wenn man z.B. Bilder oben rechts senkrecht anordnen möchte kann man folgendes eingeben:

header {
display: flex;
flex-direction: column;
justify-content: flex-start;
}

Wichtig, bei Flexbox muss man immer das Eltern Element ansprechen um ein Element zu verschieben, Beispiel:

Wenn man im Body 3 Bilder hat und diese ausrichten möchte muss man NICHT die Bilder ansprechen, sondern den Body.

Media Queries (Responsive Web Design)

Mit Media Queries kann man seine Seite benutzerfreundlicher für Mobile-User machen. Da man heutzutage immer mehr auf Handy und Tablets im Web surft, muss man diese Zielgruppe auch beachten. Media Queries fügt man mit @media ein. Dazu muss man auch noch zusätzliche Attribute hinzufügen. Mit min-width kann man die minimale Breite festlegen, die gebraucht wird um die @media Regel auszulösen. Mit max-width bestimmt man logischerweise die maximale Breite. In der Klammer gibt man die CSS-Regeln ein, die ausgeführt werden, wenn die Anforderungen (Attribute) erfüllt werden.

@media (min-width:991) {
.maine {
display: flex;
justify-content: space-between;
}
.agbs {
font-size: 34px;
font-weight: bold;
text-decoration: underline;
}
}

Framework Bootstrap

Framework ist eine Erweiterung zu einem Programm, welches ihm eine vorgegebene Struktur gibt. Bootstrap ist das Bekannteste CSS Framework heisst Bootstrap. Es beinhaltet vorgegebene Tabellen, Formulare, Navigationen und Buttons. Bootstrap besteht aus mehreren CSS-dateien und Vorlagen, welche per Copy Paste in die HTML Datei eingefügt werden können. Auch Java-Script kann durch Bootstrap in die Seite eingebunden werden. Grosser Vorteil davon ist, dass man nicht allzu viel über die sprachen wissen muss und schon fertige Bausteine einsetzten kann. Es Läst eine Seite Professioneller und Stukturierter aussehen und spart zeit. Um Bootstrap einzubinden, werden entweder die Stylesheets und Scripts von der Bootstrapseite heruntergeladen und in die Ordner struktur eingesetzt werden. Bootstrap kann auch im head verlinkt werden, mit den auf der Webseite angegebenen links. Um Bootstrap anzuwenden, können die vorgefertigten Blöcke von der Bootstrap Webseite kopiert und eingefügt werden. Grosser Vorteil ist das responsive Webdesign, welches in den meisten Fällen schon vorgearbeitet

Bootstrap