Herzlich willkommen zu diesem Tutorial.
Ich möchte Euch hier die Grundlegenden Dinge über HTML, CSS und teils PHP erklären. Ich werde auch verstärkt auf das 'Designing'
eingehen.
Webdesign Heute
Das World-Wide-Web wird heute immer öfters benutzt.
Ob für Firmenauftritte, Foren oder Filehostern wie MenkiSys;
Jede seriöse Firma hat eine proffessionelle Webpage.
Doch was macht so eine Webpage aus?
Hier streiten sich die Kenner:
Modernes Design oder Schnelligkeit?
Pauschal lässt sich das nicht beantworten.
Doch man sollte weder eine Flash Seite, die 4 Minuten allein zum laden braucht noch eine weiße Seite mit einfachen Links und Inhalt ohne jegliches Design benutzen.
Warum Schnelligkeit?
- Die User sollen natürlich möglichst lange auf ihrer Webpage bleiben, um die nötigsten Informationen zu finden.
Ist die Page zu langsam, vergrault das viele Benutzer.
Warum Design?
- Das Design der Seite hat auch einen erheblichen Einfluss auf den Benutzer. Eine leere Seite halt nur mit Text ist einfach nur langweilig.
Eine Webpage schreiben
Dafür stehen euch mehrere Auszeichnungs - und Programmierungssprachen zur Verfügung.
HTML
(Hypertext Mark Up Language)
Die wohl wichtigste Auszeichnungssprache.
Ohne HTML kann man keine Homepage machen.
Allerdings ist die Semantik von HTML auch für
Anfänger leicht zu lernen.
Hier das grundlegende HTML Gerüst:
<html>
<head>
<title> Der Titel der Webpage</title>
...
</head>
<body>
...
</body>
</html>
HTML verfolgt ein sogenanntes Container-Prinzip wenn man es so will. html, body und head sind alles Container, die aber auch eine bestimmte Reihenfolge haben.
Man nennt HTML Befehle Tags.
Der HTML Tag ist der alles umschließende Container.
Im Head Tag kann man Optionen oder auch kleinere Anwendungen per JavaScript oder CSS schreiben.
Im Body Tag kommt der sichtbare Text hinein.
CSS
DAS Designerwerkzeug überhaupt.
Mit CSS könnt ihr eure Seite positionieren,
bestimmte Textstellen mit wenig Code kennzeichnen und noch vieles mehr. Ausgeschrieben heißt CSS: Cascarding Stylesheets.
Hier ein kleines Beispiel:
das würde den Hintergrund, auf den eure Schrift platziert ist,
also den Body-Container schwarz färben.
CSS müsst ihr allerdings in HTML einbinden.
Am besten macht ihr das so (extern)
...
<head>
<link href="style.css" rel="stylesheet" type="text/css">
...
style.css sollte hierbei eure externe Stylesheet Datei sein.
Soviel erstmal hierzu.
Ich werde den Guide noch erweitern,
falls ihr genaueres zu HTML, CSS etc wissen wollt,
könnt ihr euch auch auf Google auf die Suche begeben :3
Viel Spaß