Main /

HTML Seite Erstellen

Allgemein

Knowledge Base

Virtualisierung Emulation

Technik und Wissen

Community

Privat

%center%[[http://validator.w3.org/check?uri=referer|http://www.w3.org/Icons/valid-xhtml10.png]]%%

HTML Seite Erstellen

Wie erstellt man eine Internetseite

Hier soll einfachst beschrieben werden, wie man eine Internetseite erstellt. Jeder der Anwesenden ist aufgerufen seinen Senf hinzuzufügen.

Feste Seiten

HTML

 <html>
 <body>
 Hello World!
 </body>
 </html>

Primitiver Inhalt einer HTML Datei, die ein simples 'Hello World' im Browser zeigt.

Alles zwischen '<' und '>' sind sog. Tags. Es gibt immer ein öffnendes Tag <foo ...> und ein schließendes Tag </foo> die als sog. Klammern mit Namen um den Inhalt fungieren. Die '...' können weitere Attribute enthalten. Zu einem öffnenden Tag gehört also immer ein schließendes, es gibt keine Vermischung.

<a><b></b></a>

Ist ok.

<a><b></a></b>

Ist falsch!

Es gibt noch einen Sonderfall, simple Tags ohne Inhalt können abgekürzt werden mit einem Slash vor der schließenden spitzen Klammer <bar .../>

<a><b/></a>

So könnte man es also auch schreiben.

CSS

CSS Styles einbinden, hier im <head> tag, das gilt immer für die ganze Seite.

 <html>
   <head>
     <title>title text, erscheint in der Windowtitelleiste, neben dem Windowicon</title>
     <style type="text/css">
         body { background-color:#000; color:#E0E0E0 }
     </style>
   </head>
   <body>...</body>
 </html>

Anmerkung: man muss nicht einrücken, es sieht nur lesbarer aus. Manchmal ist es auch schädlich, gerade wenn es auf pixelgenaues Design ankommt.

Styles im Tag, hier <div>-Tag gelten nur bis zum schließendem </div>-Tag, danach gilt wieder das darüberliegende.

 <div style="background-color:#000;">...</div>

Achtung! Ein <div>-Tag zieht zwar einen Rahmen auf, ein innerer <span> kann diesen aber überragen, indem man das padding sehr stark vergrößert.

 <div style="letter-spacing:2em">
  <div style="background-color:#666">
   <span style="background-color:#aaa;padding:8px;border-style:solid;border-color:#888;border-width=1px"> </span>
  </div>
 </div>

Es wird eine dicke hellgraue Linie dargestellt, in der ein dicker, größerer Klotz dargestellt wird.

Dynamische Seiten

Da man nicht jede Seite neu erstellen möchte, sondern Seiten Werte auch anpassen sollen, gibt es verschiedene Möglichkeiten. Eine davon ist PHP.

PHP

Mit PHP kann man Internetseiten programmieren, es gibt immer noch den typischen <html><body>...</body></html> Rahmen, aber alles innerhalb des <?php ... ?>-Tags ist reines PHP. Man kann damit wirklich objektorientiert programmieren, auf Datenbanken zugreifen etc. Dazu braucht man auf dem Apache-Server einen PHP Interpreter, der die PHP Seiten nach HTML konvertiert.

 <html>
 <body>
 <?php 

echo "Hello World!";

 ?>
 </body>
 </html>

Wicket

Wicket ist ein weiteres Framework, das allerdings viel weiter ausholt. Als Sprache wird hier reines Java verwendet. Es reicht allerdings nicht mehr ein einfacher Apache-Server, man benötigt einen sog. Applikation-Server, z.B. Apache Tomcat oder Glassfish oder http://de.wikipedia.org/wiki/Jboss.

Der HTML-Code enthält keinen ausführbaren Sourcecode mehr, sondern wird an beliebiger Stelle mit wicket:id gespickt, <span wicket:id="...">... der Java Sourcecode, der die wicket-id mit Daten füllt, liegt daneben, und muss extra compiliert werden. Man trennt das Design von der Logik. Der Java-Sourcecode enthält die Programmlogik, die HTML-Sourcen nur noch das Design. Diese können unabhängig von verschiedenen Mitarbeitern entwickelt werden, ohne das der eine viel vom anderen wissen muss.

Zum Entwickeln solcher Konstrukte wird unbedingt eine IDE empfohlen, die sich um die Verwaltung der Sourcen sowie das bauen kümmert. z.B. Eclipse oder Netbeans. Diese erstellt aus den Java, HTML, Images, ... ein war-File. Des weiteren sollte unbedingt ein Sourcecode Management Tool verwendet werden (CVS, SVN, Mercurial oder Git).

In die Applikation Server wird das fertige war-File nicht mehr einfach an einer bestimmten Stelle hinein kopiert, sondern es muss deployed werden. Dabei helfen einem die Server meist mit eigenen Administrationsseiten.

Da man beim Entwickeln nicht dauernd selbst deployen möchte, gibt es den Jetty, hiermit wird das deployen so einfach, wie das Starten eines einfachen Programms.

Man merkt schon, Entwickeln von Software wird immer komplizierter, mittlerweile hat sich sogar ein gewisser Standard herauskristallisiert, wie man seine Sourcen anordnen sollte, das hat den großen Vorteil, das Fremde Entwickler viel leichter Dinge wiederfinden. Da es häufig auch sehr viele Abhängigkeiten zu anderen Projekten gibt, schließlich will man das Rad nicht jedes mal neu erfinden, gibt es sogar dafür schon Tools. Maven ist eins, dem man nur noch sagt, was man alles für Abhängigkeiten hat, oder welche Dinge man nutzen möchte. Um das Finden der Pakete kümmert sich Maven dann selbst. Wer das nicht glaubt, es gibt einen Wicket Quickstart en Es besteht eigentlich nur noch aus einer Kommandozeile, um Maven zu starten. Es erstellt eine sehr schnelle Einführung in Wicket.

Weitere Tipps für Wicket

Links

tbc...

Frische Änderungen (All) | Edit SideBar Zuletzt geändert am 18.07.2012 12:57 Uhr Seite Bearbeiten | Seitenhistorie
Powered by PmWiki