HTML und CSS ist keine Raketenwissenschaft und die Sprache des WEBs. Somit bietet das WEB selber auch die besten Dokumentation und Tutorials zu diesem Thema.
Hier eine Liste der Ressourcen welche ich verwende:
selfhtml.org
Diese Seite bietet alles was Sie zum Thema HTML / CSS und JavaScript benötigen.
Schon lange her?
Im Web hat sich in den letzten Jahren extrem viel getan, bis zu den heutigen modernen WebApps.
In meinen alten Zeiten hat man eine Webseite ehr statisch betrieben, Designanpassungen waren anfangs noch mit erheblichen Aufwand verbunden.
Ein kleines Beispiel zu den ersten Webseiten:
Gehen wir von folgenden Layout aus:
| Kopf (z.B. Name und Logo) – header.html | ||
|
Navigation nav.html |
Inhalt home.html oder page1.html usw. |
|
| Fußbereich Copyright etc. – footer.html | ||
So ein Layout wurde anfangs erst mit sogenannten Frames erstellt. Zudem gab es ja auch kein CSS somit sah unsere Seite vom Code in etwa so aus:
Damals als ich noch jung war 🙂
Navigation.htm
<!DOCTYPE html>
<html>
<head>
<title>Navigation</title>
</head>
<body>
<h1 font-color="#333333">Navigation</h1>
<a href="home.html" target="content">Home</a>
<a href="page1.html" target="content">Seite1</a>
</body>
</html>
Header.htm
<!DOCTYPE html>
<html>
<head>
<title>Navigation</title>
</head>
<body background-color="">
<h1 font-color="#333333">Meine Webseite</h1>
</body>
</html>Die Footer.htm sah dann ähnlich wie der Header aus und enthielt z.B weitere Infos oder Copyright Infos.
Hinzu kamen unzählige weitere statische Webseiten und für unsere Beispiel benötigte man noch eine index.html welche dann mit Frames die ganzen Dinge wie im Layout oben dargestellt zusammenführt.
Der Code hierzu sah dann in etwa so aus:
<HTML>
<HEAD>
<TITLE>Meine Homepage</TITLE>
<META NAME='description' CONTENT='Beschreibung'>
<META NAME='keywords' CONTENT='Suchworte'>
</HEAD>
<frameset cols='20%,*' border='0' frameborder='0' framespacing='0'>
<frame src='nav.htm' name='links' marginwidth='0' marginheight='0' scrolling='auto' noresize>
<frameset rows='20%,*' border='0' frameborder='0' framespacing='0'>
<frame src='header.htm' name='oben' marginwidth='0' marginheight='0' scrolling='auto' noresize>
<frame src='home.htm' name='main' marginwidth='0' marginheight='0' scrolling='auto' noresize>
</frameset>
<noframes>
<body>Ihr Browser unterstützt keine Frames</body>
</noframes>
</frameset>
</HTML>Wollte man damals Designanpassungen vornehmen oder den Inhalt ändern musste man früher noch viel mit Suchen und Ersetzen arbeiten. Unsere Farbgebung wurde ja schließlich direkt in der Datei vorgenommen.
Zudem war es früher schwierig das oben gezeigte Layout umzusetzen, hier mal ein kleines Beispiel einer OLD School Seite:
Und dann kam CSS
CSS sorgte dafür das wir unser Design auslagern konnten und Anpassungen wie Farbgebung etc. zentral abzulegen. So nutze man für das obige Layout statt der Frames anfangs noch Tabellen, diese boten aber schon mehr Freiheit. So konnte man die Webseiten die ja eigentlich im wesentlichen auf Text fokussiert waren schick aufwüschen. Die wurde auf vielen Seiten am Anfang auch drastisch übertrieben, war aber modern.
.meineKlasse{
font-color: #333333
}Im Verlauf von CSS wurden später dann auch die Tabellen gegen Layouts mit <div></div> Containern eingeführt, da Layouts mit Tabellen nicht Barrierefrei waren.
War aber noch immer alles noch statisch
Mit CSS hat man nun ein Werkzeug zur Hand um seine Webseite schöner zu gestalten und bei Anpassungen seine Arbeit schneller zu erledigen.
Die ersten Cracks haben damals noch kleine Serverskripte geschrieben. Aus diesen wurden dann später die Sprache PHP welche zusammen mit mySQL den zweiten großen Meilenstein im Web gesetzt hat.
Nun konnte man auch den Inhalt seiner Webseite dynamisch gestalten. Diese Dynamik war aber in soweit begrenzt das der Server immer noch statische Seiten ausgeliefert hat wir diese aber dynamisch erzeugen konnten.
Was also mit Aktionen direkt beim Client?
Erst waren da diese JAVA Applets, dann kam Flash und noch andere ähnliche Sachen die heute ehr noch Nischen bilden.
Es gab zu dieser Zeit auch schon Javascript, dies war aber in großen Firmen oft deaktiviert und somit wurde es auch noch nicht viel genutzt.