Tutorial Home Blog


Webentwicklung/Design
Um vernünftige HTML-Codes zu schreiben, empfehle ich das kostenlose Programm Notepad++ (Download-Link: Hier klicken).
Zusätzlich legen wir einen Ordner an, in den unsere html Dateien reinkommen.

Dann öffnen wir Notepad++ und speichern die automatisch generierte datei als "index.html" in unserem angelegten Ordner ab.
Als nächstes erstellen wir eine weitere Datei, die wir "style.css" nennen und speichern diese ebenfalls im selben Ordner wie die HTML-Datei ab.

Jetzt öffnen wir die index.html Datei und schreiben in die erste Zeile : ˂!DOCTYPE html˃. Mit dieser Zeile zeigen wir dem Browser, das wir HTML verwenden.
Nahdem wir dem Browser vermittelt haben, dass wir HTML verwenden, beginnen wir mit dem eigentlichen Inhalt der Seite,
Wir öffnen wieder einen Tag. Diesmal den ˂html˃-Tag. nach dem Tag setzen wir eine Absatz und schließen den Tag wieder, indem wir ein "/" vor das html setzen(˂/html˃).
zwischen die ˂html˃-Tags kommen die ˂head˃˂/head˃-Tags und die ˂body˃˂/body˃-Tags.
Das ganze sollte nun in etwa so aussehen:
˂!DOCTYPE html˃

˂html˃
    ˂head˃
    ˂/head˃
    ˂body˃
    ˂/body˃
˂/html˃

Der head-Tag dient zur einbettung von .css- bzw. .js-Dateien, wie unsere "style.css", sowie für Metadaten.
In den ˂body˃-Tag kommt der Inhalt der Seite, also das was später im Browser sichtbar ist.
Dann schreiben wir zwischen die beiden ˂body˃-Tags die ˂div id="wrapper"˃˂/div˃-Tags. Jetzt haben wir einen Bereich erstellt, der die id "wrapper" trägt.
In unseren ˂div˃-Tag kommen nun untereinender 4 neue Tags. Der ˂header˃˂/header˃-Tags, der ˂aside˃˂aside˃-Tags, der˂section˃˂/section˃ und der ˂footer˃˂/footer˃-Tag,
sodass das ganze nun etwa so aussieht.
˂!DOCTYPE html˃

˂html˃
    ˂head˃
    ˂/head˃
    ˂body˃
        ˂div id="wrapper"˃
            ˂header˃Kopfzeile˂/header˃
            ˂aside˃Sidebar˂/aside˃
            ˂section˃Hauptinhalt˂/section˃
            ˂footer˃Fußzeile˂/footer˃
        ˂/div>˃
    ˂/body˃
˂/html˃

Als nächstes gehen wir in den ˂head˃-Tag.
Hier verlinken wir nun unser "style.css" Datei, um unserer Website ein Layout zu geben.
Wir fügen nun folgenden Tag ein: ˂link rel="stylesheet" href="style.css" type="text/css"/˃.
Jetzt gehen wir in die "style.css" Datei.
Als erstes wollen wir unseren ˂div˃ stylen. da der eine eigene id hat, schreiben wir in der ersten Zeile #wrapper und öffnen dahinter eine Mengenklammer, sodass das ganze im Endeffekt so aussieht
#wrapper{

}

Wir definieren nun eine Breite und lassen ihn immer, unabhängig von der Sakalierung des Browsers, in der Mitte erscheinen für den wrapper.
Unser wrapper soll 960 Pixel breit sein. Dazu schreiben wir:
#wrapper{
    width: 960px;
    margin-left: auto;
    margin-right: auto;
}

Als nächstes kommen wir zum header. Hier lassen wir die Raute weg, da der header keine eigene id hat bzw. ist.
header{
    height: 150px;
    width: 960px;
    background: #FF0000;
}

Kommen wir nun zur Sidebar. Hier kommen ein paar neu Aspekte dazu, weil diese sich rechts neben dem section befinden soll.
aside{
    height: 550px;
    width: 310px;
    float: right;
    background: #0000FF;
}

Im Prinzip dasselbe machen wir auch mit dem Hauptinhalt der Seite, nur das diese breiter ist als die Sidebar.
section{
    height: 550px;
    width: 650px;
    float: left;
    background: #00FF00;
}

Als letztes designen wir die Fußzeile, die ähnlich wie der Header wird.
footer{
    height: 50px;
    clear: both;
    background: #00FFFF;
}

Vorherige Seite Nächste Seite