Wie kamen wir auf die Idee eine solche Website zu machen??

Die Idee ist im Informatik Grundkurs der Jahrgangsstufe E1 entstanden. Im Rahmen einer Gruppenarbeit sollte eine Webseite ohne Hilfsmittel programmiert werden. Mittlerweile gibt es eine Vielzahl von Werkzeugen wie z.B. MS Word, die auch HTML erzeugen können. Wir möchten es aber von Grund auf erlernen.

Das Wichtigste zuerst: "Was wird auf dieser Website alles erklärt?"

Man bekommt auf dieser Website Basics zum Programmieren einer einfachen Website vermittelt!

Konkret: Basics in HTML und CSS!



Woraus besteht eine Website?

NEWS

Hier werden in Zukunft alle Neuigkeiten von dieser Website angezeigt!



hier die Dokumentation der Website downloaden

Das wichtigste für eine Website: HTML

Wenn du nun auf dieser Website bist, möchtest du bestimmt Grundlagen zum Programmieren einer Website erlangen.



Fangen wir damit an, was HTML überhaupt ist.

Die Abkürzung HTML steht für HypeTextMarkupLanguage.

HTML ist eine sogenannte Auszeichnungssprache, die überwiegend zum Erstellen einer Website verwendet wird. Dies ist aber nicht der einzige Verwendungszweck. Heutzutage werden manche so genannte WebApps (APPS, die in HTML erstellt sind, können in jedem Browser unabhängig vom jeweiligen Betriebssystem verwendet werden) auch mit dieser "Auszeichnungssprache" erstellt.

Wir befassen uns aber mit dem Verwendungszweck von HTML bei Webdesign und lassen den Zweck bei WebApps erst einmal links liegen.

HTML besteht aus zwei Haupt-Elementen:

  1. Head
    • title - Titel der Website, wird im Tab angezeigt
    • metat charset="" - gibt an, um welche Textcodierung es sich handelt
    • "link rel="stylesheet" href="Dateiname der CSS-Datei" - Verlinkung der CSS-Datei

  2. Body
    • beinhaltet den kompletten Inhalt der Webpages



Grundlegende HTML-Tags

Zuerst einmal aber noch die Erklärung, was ein Tag überhaupt ist:

Ein Tag dient zur Auszeichnung des Inhaltes des HTML Dokumentes.


Tag Bedeutung
p Absatz
h1 Hauptüberschrift
h2 bis h6 Unterüberschriften
br erzwingt Zeilenumbruch
hr fügt horizontale Trennlinie ein
b =bold -> Schrift wird fett
i =italic -> Schrift wird kusiv
em =emphasis -> Schrift wird hervorgehoben (kusiv)
a Link
href gibt in einem a Tag den Zielort der Verlinkung an
ul unordered list -> ungeordnete Liste
ol ordered list -> geordnete Liste
li Listenelement von einer ul/ol
div zum Definieren eines Bereiches
class Klassen-Benennung eines definierten Bereiches (div) (kann mehrmals auf einer Webpage verwendet werden)
id Identifikation eines Tags (kann nur einmal auf einer Webpage verwendet werden

CSS


Wofür ist CSS da?

CSS ist die Abkürzung für CasdianStyleSheet.

Mit dieser Funktion kann man für ein HTML-Grundgerüst das Design festlegen. Dazu wird fast jeder Tag - Signalworte - in einzelnen Bereichen definiert, wie z.B.:

  • Größe
  • Farben
  • Verhältnis zu anderen Tags
  • Position
  • Rahmen
  • und vieles mehr

Zuerst einmal muss man die CSS-Datei mit den inhaltlichen Bestandteilen verlinken. Dazu nutzt man den "link"-Tag im Head Element (nachlesbar auf der Webpage über html).

Nun kann man mit CSS Regeln definieren, was für den ausgewählten Selektor gelten soll (Selektor = Tag). Dafür schreibt man hinter den Selektor "{ Eigenschaft1: Wert1 ; Eigenschaft2 : Wert2;}".


Wichtige Eigenschaften:

Eigenschaft Bedeutung der Darstellung
color Schriftfarbe
background-color Hintergrundfarbe
font-family Schriftart
border Rahmendicke
border-"Seite" bestimmte Seite
text-align Ausrichtung(left, center, right)



Das Block-Modell in CSS

Stell dir vor jedes HTML-Element ist eine Box.

Es wird zwischen block- und inline-Elementen unterschieden. Dazu nutzt man die CSS-Eigenschaft "display".

  • display: block -> Element geht über die gesamte Breite
  • display: inline -> Element ist nur so breit wie der Inhalt
  • display: inline-block -> Man kann die Höhe und die Breite festlegen


Hexadezimalsystem

Das Hexadezimalsystem ist dem Binär- und dem Dezimalsystem ähnlich und wird zum Anzeigen von Zahlen verwendet:

DezimalHexadezimal
1-91-9
10A
11B
12C
13D
14E
15F

Dieses System wird nun benutzt um Farbwerte zu kodieren. Mit sechs-Stellen kann man 16.581.375 (16^6) verschiedene Farben darstellen.

Nach dem "#" werden mit den ersten beiden Stellen der Rotanteil, mit der dritten und vierten Stelle der Grünanteil und mit den beiden letzten Stellen der Blauanteil festgelegt.

Beispiel:

HexadezimalFarbe
#ff0000rein Rot
#00ff00rein Grün
#0000ffrein Blau
#ffff00Gelb
#ff00ffViolett
#00ffffTürkis
#000000Schwarz
#ffffffWeiß

HTML + CSS

Ein paar Beispiel Aufgaben

Wir möchten hier auf Herrn Kleins Website verweisen, da diese Beispielaufgaben enthält und wir selbe mit diesen auch das Erstellen von Websites erlernt haben und mit diesen gute Erfahrungen haben.

Des Weiteren wollen wir euch noch ein paar Alternativen zum dem normalen Text-Editor von Windows nennen, zum Erstellen einer Website:


Brackets

Zum einen möchten wir euch Brackets empfehlen. Brackets ist ein Texteditor von Adobe, der viele verschiedene Themes für die am meisten verbreiteten Programmiersprachen. So bietet er verschieden farbliche Darstellungen, welche sich alle anpassen lassen. Ein Weiteres sehr nützliches Feature ist, dass man auch eine Live-Vorschau in Chrome öffnen kann. Des Weiteren kann man mit dem Programm Photoshop von Adobe, bzw. generell mit PSD-Dateien sich nach dem Baukasten-Prinzip eine Website zusammenstellen. Brackets schreibt dann im Hintergrund dazu die CSS-Datei (CascadianStyleSheet). Wir haben damit auch selber diese Website geschrieben und können nur positives von diesem Editor berichten. Ein weiterer großer Vorteil ist, dass man die Möglichkeit hat, sehr viele Erweiterungen zu laden und zu installieren. Des Weiteren ist Brackets für alle gängigen Betriebssysteme (also Windows, MacOs und Linux) verfügbar.

Bewertung:


Atom

Der nächste Editor, der weitverbreitet ist, heißt Atom. Er ist ähnlich wie der Editor Brackets, allgemeiner Text-Editor, der aber auf das Editieren von Programmier- und Auszeichnungssprachen ausgelegt ist. Atom verfügt auch wie Brackets über Programmiersprachen abhängige Designs bzw. Themes. Des Weiteren ist auch Atom für alle gängigen Betriebssysteme (also Windows, MacOs und Linux) verfügbar. Leider können wir keine persönlichen Erfahrungswerte mitteilen, da wir diesen Editor noch nie benutzt haben.

Dieses Bild ist von Jonobacon

Bewertung: (neutral)


Notepad++

Als letzten Editor möchten wir noch den Editor erwähnen, den wir Anfangs auch verwendet haben. Notepad++

Notepad++ ist sozusagen der "standard" Editor. Die meisten fangen mit diesem Editor an. Er bietet auch die Standardfunktionen, wie zum Beispiel LiveVorschau in Firefox, Chrome, Internet-Explorer... Viele steigen aber nach relativ kurzer Zeit auf andere Editoren um. Vielen reicht einfach der Funktionsumfang nicht mehr aus und gerade bei Brackets liegt der große Vorteil darin, dass man diesen individuell anpassen kann und da er Open-Source ist auch immer weiter programmierbar bzw. entwickelbar. Notepad++ ist für den Einstieg zwar am besten geeignet, da er am einfachsten aufgebaut ist, jedoch macht es Sinn, wenn man von Anfang an weiß, dass man viel und oft mit solchen Editoren arbeiten wird, sich einen der obengenannten downloadet.

Dieses Bild ist von Notepad-plus-plus

Bewertung: (für Einsteiger gut, aber aus unserer Sicht für ambitioniertere empfehlenswert)

hier die Website downloaden

Wer steckt hinter dieser Website?

Wir sind, wie schon vorhin auf der Home Site erwähnt, zwei Schüler der 10. Klasse.

Wir heißen Julian Ramscheid und Tim Kiesewettter.

Wir haben beide dieselben Leistungskurse, Mathematik und Physik. Außerdem haben wir beide noch den Grundkurs Informatik belegt, wie ihr euch schon bestimmt beim Lesen des Anfangssatzes habt denken können.

Wie auch schon bereits erwähnt, ist diese Website im Rahmen unseres Informatik-Grundkurses entstanden. Diese Website soll die Grundkenntnisse vermitteln, welche man zum Programmieren / Erstellen einer einfachen Website braucht.