Linux Bibel online ~ HTML-Software

Creative Commons Lizenzvertrag
Dieses Werk ist lizenziert unter einer Creative Commons Namensnennung - Nicht-kommerziell - Weitergabe unter gleichen Bedingungen 3.0 Österreich Lizenz.

Change language by Google translator: ...

Unter Microsoft Windows wird gerne die Software Dreamweaver zur Erstellung von Webseiten genutzt - die Software ist zwar sehr bequem und einfach zu nutzen aber sie wurde 2013 das letzte Mal aktualisiert - und ehrlich gesagt wird diese von wirklichen Profis auch nicht genutzt. In diesem Beitrag geht es nun um Software unter Linux mit der sich Webseiten erstellen und warten lassen denn angeblich gibt es solch professionelle Software unter Linux nicht ...

Wir werden nun einiges an Software dieser Sparte in diesem Beitrag kennen lernen, aber ehrlich gesagt - mehr als einen Text-Editor der HTML versteht benötigt man eigentlich gar nicht.

Am Ende dieses Beitrages gibt es noch einen HTML-Grundkurs.

Bluefish

Die wohl bekannteste und professionellste Software um Webseiten jeder Art zu erstellen, egal ob es um HTML, HTML5, PHP oder XHTML, statische oder Seiten geht die ihre Daten von einer Datenbank beziehen geht - Bluefish kommt damit problemlos zurecht. Auch CSS-Syntax versteht die Software perfekt. Sie installieren die Software unter auf Debian basierenden Linux-Distributionen wie natürlich auch Ubuntu, Kubuntu, Linux Mint und so weiter ganz einfach über die Paket-Verwaltung durch das Paket "bluefish".

Nach der Installation finden Sie die Software im Anwendungsmenü im Bereich "Entwicklung", alternativ starten Sie die Software über den Schnellstarter (Alt + F2) oder über das Terminal durch den Befehl:

bluefish

Bluefish - Software zur Website-Entwicklung

Bluefish - Software zur Website-Entwicklung

Die Software ist eigentlich nichts anderes als ein üblicher Text-Editor der jedoch vor allem auf HTML-, PHP-Code zugeschnitten ist (aber auch so einige andere Codes und zahlreiche Hilfen eben für diese Codes integriert hat. Die Software bringt zwar keinen Drag & Drop mit wie etwa Dreamweaver - dies ist aber auch gar nicht nötig - mit ganz wenig Erfahrung erzeugt man schnell eine ansprechende Homepage mit zahlreichen Features - diese Homepage - also die Linux Bibel wurde allein mit Bluefish erstellt - wobei ich mich natürlich auf grundlegende zurück halte - jede Erweiterung, jedes zusätzliche Highlight benötigt mehr Zeit damit die Webseite auch lädt.

Nun sehen Sie links die Datei-Verwaltung und rechts das eigentliche Editor-Fenster. Unter der Werkzeug-Leiste finden Sie einzelne Reiter mit unterschiedlichen Aufgaben, öffnet man den Reiter zeigen sich auf die Aufgabe angepasste Icons - welche diese ist zeigt sich wenn man mit dem Mauszeiger ein wenig darüber fährt.

Die Software bietet per Menü "Datei / Neu aus Template" an verschiedene grundlegende Vorlagen zu erstellen - etwa das Grundgerüst für eine HTML5-Seite, gesichert wird automatisch beim Speichern einer Datei die vorhergegangene Version - etwa "dateiname.html~", diese lässt sich im Ernstfall ganz einfach wieder herstellen indem man die Tilde - "~" aus dem Dateinamen entfernt.

Nutzt man diverse Icons aus den Reitern öfters bietet es sich an diese in die "Schnellstartleiste" zu integrieren, man klickt das gewünschte Icon einfach rechts an und wählt "Zur Schnellstartleiste hinzufügen".

Natürlich bietet die Software die Vervollständigung von Code und so einiges mehr - ein richtiges Werkzeug für Profis.

Google Web Designer

Diese Software ist ebenfalls ein HTML-Editor der jedoch schon etwas mehr an Dreamweaver erinnert da er auch so einiges an Drag & Drop ermöglicht, im Grunde genommen jedoch ebenfalls ein professionelles Werkzeug. Hauptsächlich wird diese Software entwickelt um aus HTML5 alles heraus zu holen was möglich ist - was jedoch nicht bedeutet das man keine Erfahrung von HTML benötigt, die Software hat den Schwerpunkt Animation und Design, kostet keinen Cent - hat jedoch bisher einen kleinen Nachteil - von einem anderen Editor erstellte HTML-Dateien akzeptiert die Software bisher nicht - man muss (wie schon beschrieben bisher) damit leben das man Seiten mit dieser Software erstellen muss. Auch ist Google Web Designer bisher nur Beta-Software - bisher gab es dabei jedoch aus meinen Tests keine Abstürze oder ähnliche Probleme.

Sie finden die Software unter Google Web Designer zum Download als Debian-Paket wie auch für auf RPM-basierende Systeme in 32 und 64Bit-Versionen. Die Installation gelingt am schnellsten über das Terminal durch den Befehl:

dpkg -i paketname.deb apt-get install -f

Nach der Installation finden Sie die Software im Anwendungsmenü im Bereich "Entwicklung", alternativ starten Sie über den Schnellstarter (Alt + F2) oder über das Terminal durch den Befehl:

google-webdesigner

Google Web Designer - HTML-Editor unter Linux

Google Web Designer - HTML-Editor unter Linux

Nach der Installation hält sich die Software selbst über die Paket-Verwaltung aktuell.

Klinkstatus

Wenn man eine Homepage mit mehreren Links, egal ob intern oder extern hat gilt es natürlich auch sicher zu stellen das diese Links aktuell sind, nichts ist ärgerlicher als auf einen Link zu klicken und dort öffnet sich nichts. Man könnte nun natürlich jeden einzelnen Link per anklicken prüfen - bei sehr vielen kann dies natürlich dauern - oder dies einer darauf zugeschnittenen Software überlassen, eine solche wäre Klinkstatus. Unter auf Debian basierenden Linux-Distributionen installieren Sie die Software ganz einfach über die Paket-Verwaltung durch das Paket "klinkstatus", nutzen Sie bisher nicht KDE als Desktop-Umgebung oder sonstige KDE-Software sollten Sie zusätzlich die passenden Sprach-Dateien installieren, suchen Sie einfach nach "kde-l10n-" sowie dem passenden Sprach-Kürzel, für deutsch also das Paket "kde-l10n-de".

Nach der Installation finden Sie die Software im Anwendungsmenü im Bereich "Entwicklung", alternativ starten Sie über den Schnellstarter (Alt + F2) oder über das Terminal durch den Befehl:

klinkstatus

Klinkstatus - Links auf der Homepage unter Linux prüfen

Klinkstatus - Links auf der Homepage unter Linux prüfen

Um die Links auf einer Homepage zu prüfen geben Sie nun ganz einfach in das Feld "URL" die Adresse der Homepage ein, wenn gewünscht auch die Datei ab der geprüft werden soll. Unter "Tiefe" geben Sie an wie weit die Software Links verfolgen soll um nicht gleich das komplette Internet zu testen - ist eine Anmeldung nötig aktivieren Sie die Funktion, haben Sie die Einstellungen abgeschlossen klicken Sie auf die Schaltfläche "Suche starten" und schon beginnt die Software mit ihrer Arbeit. In der Mitte rechts finden Sie eine Schaltfläche mit der Bezeichnung "Status" - über diese können Sie die Ausgabe filtern lassen - etwa nur kaputte Links anzeigen lassen.

Nutzen Sie nicht KDE als Desktop findet sich natürlich auch alternative Software durch die Pakete "linkchecker" (für das Terminal), "linkchecker-gui" mit grafischer Oberfläche, "linkchecker-web" als Einbindung in die Homepage.

Kfilereplace

Wenn man wie ich eine statische Homepage betreibt hat man für jede einzelne Seite eine HTML-Datei, im aktuellen Fall (29.10.2016) sind dies 145 einzelne Dateien, mit jeder neuen Seite müsste ich also das Menü links anpassen, bei jeder einzelnen Datei - Arbeit ohne Ende. Nutzt man jedoch eine Software die dies erledigt ist dies eine Aufgabe von Sekunden - Kfilereplace ist eine solche Software, sie ermöglicht es einzelne Worte, Wort-Gruppen, ganze Sätze, Absätze oder ganze Artikel durch andere zu ersetzen. Mehr zu dieser nützlichen Software erfahren Sie gleich hier auf der Linux Bibel unter Kfilereplace.

Kimagemapeditor

Diese Software ist darauf spezialisiert Bilder mit Links zu versehen - nein, nicht einfach auf ein Bild klicken und der entsprechende Link öffnet sich, ein einzelnes Bild mit mehreren Links. Stellen Sie es sich etwa so vor, Sie haben ein Bild mit einer Landkarte der Erde - diese ist durch politische Grenzen unterteilt, vielleicht in jedem Land noch die Fahne dazu - man klickt nun in diesem einzigen Bild auf die österreichische Fahne öffnet sich eine österreichische Homepage, klickt man auf die russische eine russische Homepage. Mit Kimagemapeditor ist dies und ähnliches möglich.

Sie installieren die Software unter auf Debian basierenden Systemen ganz einfach über die Paket-Verwaltung durch das Paket "kimagemapeditor", nutzen Sie weder KDE als Desktop-Umgebung und sonstige KDE-Software sollten Sie sich zusätzlich die passenden Sprach-Dateien installieren, dazu suchen Sie ganz einfach nach "kde-l10n-" und dem zugehörigen Sprach-Kürzel - für deutsch also "kde-l10n-de".

Nach der Installation finden Sie die Software im Anwendungsmenü im Bereich "Entwicklung", alternativ starten Sie die Software über den Schnellstarter (Alt + F2) oder über das Terminal durch den Befehl:

kimagemapeditor

Kimagemapeditor - Imagemaps unter Linux erstellen

Kimagemapeditor - Imagemaps unter Linux erstellen

Die Software ist sehr einfach zu nutzen - für die Technik die eigentlich dahinter steckt. Starten Sie die Software sowie einen beliebigen Dateimanager, ziehen Sie das gewünschte Bild aus dem Dateimanager in die Bild-Fläche der Software, dies können folgende Datei-Formate sein: jpg (jpeg), png oder gif. Nun nutzen Sie das Menü "Karte / Neue Karte" und vergeben einen Namen für diese:

Kimagemapeditor - Imagemaps unter Linux erstellen

Kimagemapeditor - Imagemaps unter Linux erstellen

Markieren Sie nun die erstellte Karte per Klick (im Feld "Karten") und nutzen nun das Menü "Extras" - hier wählen Sie die passende geometrische Form mit der Sie im Bild die Fläche auswählen könnten die für den ersten Link genutzt werden soll - markieren Sie nun den Bereich in der Karte, nun öffnet sich der Editor in dem Sie den Link für diesen markierten Bereich angeben - hier geben Sie nun die notwendigen Daten ein:

Kimagemapeditor - Imagemaps unter Linux erstellen

Kimagemapeditor - Imagemaps unter Linux erstellen

Klicken Sie nun auf "Anwenden" sowie auf "OK" um die Änderungen zu übernehmen und dieses Fenster zu schließen, für einen weiteren Link im selben Bild markieren Sie wieder einen neuen Bereich und vergeben den weiteren Link. Haben Sie alle Links gesetzt speichern Sie die Datei als HTML-Seite. Eine hervorragende Hilfe finden Sie im Handbuch das Sie über das Menü "Hilfe / Handbuch zu Kimagemapeditor" finden.

Dies waren nun einmal die wohl bekanntesten Anwendungen für die HTML-Entwicklung unter Linux - es gibt natürlich noch einiges mehr, mit diesen sollte jedoch der Profi schon sehr weit springen - wie schon beschrieben genügt auch ein einfacher Text-Editor, HTML, PHP und dergleichen sind nichts anderes als reine Text-Dateien.

HTML-Grundkurs

Wie oben schon beschrieben sind HTML-Dateien oder auch PHP-Dateien nichts anderes als reine Text-Dateien, alles was man wirklich effektiv benötigt ist ein Text-Editor der mit HTML-Syntax umgehen kann. Der Unterschied zwischen HTML-Dateien und PHP-Dateien ist ein ganz großer - HTML-Dateien sind wirklich statisch, dies bedeutet alles was man hier einbindet ist und bleibt an der selben Stelle. PHP-Dateien hingegen können ohne Umstände Daten von einer Datenbank beziehen oder können auch anderen Code mit einbeziehen, so lässt sich etwa auch ein interner Besucherzähler und ähnliches ganz einfach implementieren.

Wir wollen uns zu Beginn ganz einfach einmal das Grundgerüst einer HTML-Datei ansehen, auf HTML werde ich gleich verzichten und nur noch HTML5 anwenden:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> </body> </html>

Die Endung der Datei lautet natürlich ".html", möchte man hingegen eine PHP-Seite erstellen genügt es alleine schon ganz einfach die Datei-Endung auf ".php" zu ändern und schon lässt sich entsprechender Code auch nutzen. Aber wie schon beschrieben - ich werde mich hier auf HTML-Code beschränken, es soll ja ein Einstieg werden und kein Lexikon.

Wir wollen uns nun den oberen HTML-Code etwas genauer ansehen, das Wichtigste ist die Einleitung "<!DOCTYPE html>", dies dient dazu damit der Webbrowser versteht worum es geht, also um eine reine HTML-Seite, kein PDF, kein Office-Dokument oder sonst etwas - eine HTML-Seite im HTML5-Standard. Alles was nun folgt wird geöffnet "<öffnen>" und anschließend wieder geschlossen "</schließen>". Alles was zwischen "<html>" und "</html>" steht wird vom Webbrowser ausgewertet, alles außerhalb ist für diesen nicht interessant. Es gilt also alles was zur Webseite gehört zwischen diesen beiden Tags einzutragen. Das erste was wir nun finden ist der Tag "<head></head>" - dies was hier nun steht sieht zwar der Nutzer, also derjenige der die Webseite im Webbrowser ansieht nicht doch für den Webbrowser selbst sind dies wichtige Informationen die etwa den Zeichen-Code angeben und so einiges mehr. Hier finden wir gleich einmal den Eintrag "<meta charset="utf-8" />", er gibt den Zeichen-Code an, der Webbrowser versteht damit das er etwa auch Umlaute korrekt anzeigen soll wie etwa "ä ö ü ß" - für europäische Webseiten wäre dies der passende Code (dazu jedoch später mehr), weiters finden wir hier den Tag "<title></title>" - das was hier dazwischen steht ist der Titel der Webseite - er wird im offenen Reiter ganz oben angezeigt.

Interessant wird es nun mit dem Tag "<body></body>" - alles was hier drin steht wird im Webbrowser nun tatsächlich angezeigt. Dies wollen wir uns gleich einmal ansehen - folgender Code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> Dies ist eine Webseite basierend auf HTML! </body> </html>

HTML-Code ganz einfach

HTML-Code ganz einfach

Wie schon beschrieben ist dies sehr einfach und alles andere als schön, würde ich folgenden Code anwenden:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> Dies ist eine Webseite basierend auf HTML! Erstellt durch den HTML-Editor Bluefish. </body> </html>

würde dies so aussehen:

HTML-Code ganz einfach

HTML-Code ganz einfach

Es gilt also den Text ebenso mittels Tags zu formatieren. Dies werden wir uns nun näher ansehen.

Als erstes wollen wir einmal Überschriften formatieren, folgender Code würde entsprechendes ergeben:

<h1>Große Schrift</h1> <h2>kleinere Schrift</h2> <h3>noch kleinere Schrift</h3> <h4>kleine Schrift</h4> <h5>noch kleinere Schrift</h5> <h6>ganz kleine Schrift</h6>

Formatierter HTML-Code

Formatierter HTML-Code

Alles was wir zwischen den Tag "<p></p>" setzen bildet einen Absatz und der Einzel-Tag "<br>" unterbricht diesen:

<p>HTML mit Software unter Linux ist nicht nur einfach sondern auch professionell, Software wie etwa Dreamweaver vereinfachen die Erstellung von Code zwar - besser sehen die Webseiten jedoch deshalb auch nicht aus. HTML-Code ist sehr einfach aufgebaut und deshalt auch sehr einfach und schnell zu erlernen.<p> <p>HTML mit Software unter Linux ist nicht nur einfach sondern auch professionell, Software wie etwa Dreamweaver vereinfachen die Erstellung von Code zwar - besser sehen die Webseiten jedoch deshalb auch nicht aus. <br>HTML-Code ist sehr einfach aufgebaut und deshalt auch sehr einfach und schnell zu erlernen.<p>

Formatierter HTML-Code

Formatierter HTML-Code

Mit den Tags "<b></b>" und "<i></i>" schreiben wir fett sowie schräg:

HTML mit Software unter <b>Linux ist nicht nur einfach sondern auch professionell, Software wie etwa <i>Dreamweaver vereinfachen die Erstellung von Code zwar - besser sehen die <b><i>Webseiten</b></i> jedoch deshalb auch nicht aus. HTML-Code ist sehr einfach aufgebaut und deshalb auch sehr einfach und schnell zu erlernen.

Formatierter HTML-Code

Formatierter HTML-Code

Durch "<u></u>" unterstreichen wir Text, durch "<sub></sub>" stellen wir solchen höher und durch "<sup></sup>" tiefer.

HTML mit Software unter <u>Linux</u> ist nicht nur einfach sondern auch professionell, Software wie etwa <sub>Dreamweaver</sub> vereinfachen die Erstellung von Code zwar - besser sehen die <sup>Webseiten</sup> jedoch deshalb auch nicht aus. HTML-Code ist sehr einfach aufgebaut und deshalt auch sehr einfach und schnell zu erlernen.

Formatierter HTML-Code

Formatierter HTML-Code

Wollen wir Text mit einer bestimmten Farbe versehen müssen wir etwas tiefer greifen und den Tag "<FONT COLOR="#Farbe-Code></FONT>" nutzen, alle möglichen Farb-Codes finden Sie etwa unter HTML-Farb-Codes, kleines Beispiel:

HTML mit Software unter <FONT COLOR="#0000de">Linux</FONT> ist nicht nur einfach sondern auch professionell, Software wie etwa Dreamweaver vereinfachen die Erstellung von Code zwar - besser sehen die Webseiten jedoch deshalb auch nicht aus. HTML-Code ist sehr einfach aufgebaut und deshalt auch sehr einfach und schnell zu erlernen.

Formatierter HTML-Code

Formatierter HTML-Code

Nun wollen wir die Größe der Schrift noch auf das Pixel genau fest setzen - hierzu nutzen wir den Tag "<p style="font-size:12px;">" alles was danach folgt wird in diesem Absatz mit der Größe von 12 Pixel dar gestellt.

Jetzt wollen wir einmal einen Link auf eine andere Webseite anlegen, im Beispiel auf die Seite "http://www.adresse.org", dazu folgender Code:

<a href="http://www.adresse.org">Hier geht es hin</a>

Was nun so aussehen würde:

Link in HTML-Code

Link in HTML-Code

Unser Tag lautet also "<a href="adresse">Link-Bezeichnung</a>".

Auch kann man natürlich innerhalb eines Dokumentes Links anlegen, dies ist etwa nützlich wenn eine Seite sehr lang ist und man diese schneller durch navigieren möchte. Als Beispiel habe ich irgendwo ganz unten eine Überschrift mit dem Code "<h1>Hier her</h1>" - als erstes gilt es diese Überschrift als Link-Ziel fest zu legen, dies geschieht indem man folgenden Tag um die Überschrift setzt "<a name="bezeichnung"></a>" - in diesem Fall also:

<a name="hier_her"><h1>Hier her</h1></a>

Nun stellt man den eigentlichen Link her, also etwa ganz oben an der Seite auf den man dann klickt um an die gesetzte Stelle zu kommen, etwa:

<a href="#hier_her">Hier her</a>

Wichtig ist dabei die Raute "#" vor dem Namen des Links nicht zu vergessen. Möchte man von einer anderen Seite den Link zu dieser an genau diesem Link navigieren funktioniert dies so - im Beispiel nenne ich die Seite ganz einfach "datei.html":

<a href="datei.html#hier_her">Hier her</a>

Zu Webseiten gehören natürlich auch Bilder, im Beispiel habe ich die Bilder im Unter-Verzeichnis "images" liegen, die dort platzierte Datei "bild.png" möchte ich einbinden:

<p><img src="images/bild.png" alt="Alternativer Text" longdesc="Beschreibung des Bildes für Suchmaschinen"></p>

Der Code "src="xxxx"" gibt also den Pfad zur Datei sowie die Datei selbst an.

Nun wollen wir uns ein wenig mehr um die Meta-Daten kümmern, liegen im "<head></head>"-Bereich und sind für den eigentlichen Betrachter unsichtbar - für Suchmaschinen jedoch umso wichtiger. Meta-Daten werden von folgendem Tag umschlossen "<meta name="bezeichnung" content="angabe">". Solche Meta-Daten gibt es ohne Ende, nur sehr wenige sind jedoch auch wirklich wichtig - ich möchte hier nun einige davon vorstellen. Eine der wichtigsten "<meta charset="utf-8">" haben wir schon kennen gelernt, sie gibt den verwendeten Zeichensatz an. Eine weitere wäre etwa "<meta http-equiv="expires" content="0">" - sie zeigt dem Webbrowser das dieser falls diese Seite schon einmal geöffnet wurde die Daten nicht aus dem Cache - also von der Festplatte geholt werden sollen sondern das die Webseite komplett aktuell vom Server geladen werden soll. Eine der wichtigsten Daten "<meta name="description" content="...................."> - die Beschreibung der Webseite, dies was Sie hier statt der Punkte einsetzen wird in der Suchmaschine als Beschreibung angezeigt. Noch wichtiger Schlüsselwörter durch "<meta name="keywords" content="...................">", hier geben Sie wichtige Wörter ein die diese Seite betreffen, geht es etwa um Linux sollte dies hier nicht fehlen, geben Sie diese Schlüsselwörter am besten klein ein - und wichtig durch ein Komma (",") getrennt - etwa "linux, debian, ubuntu" - und kontrollieren Sie ob Sie keine Wörter doppelt gesetzt haben - dann ignoriert die Suchmaschine die Seite. "<meta name="robots" content="index, follow">" gibt an das die Suchmaschine alle integrierten Links ebenfalls durchsuchen soll. Meta-Tags gibt man einfach einen nach den anderen - einen pro Zeile an - etwa:

<!DOCTYPE html> <html lang="de"> <head> <title>......................</title> <meta charset="utf-8"> <meta http-equiv="expires" content="0"> <meta name="description" content="...................."> <meta name="keywords" content="...................">

Besonders wenn man auch auf mobile Geräte zählt sollte man vor allem folgende Meta-Daten einsetzen "<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />" - es sorgt dafür das der Webbrowser die Seite passend skaliert - das man also etwa nicht seitlich scrollen muss. Damit dies für Bilder und Videos ebenso funktioniert setzt man im Header weiter auf folgende Zusätze:

<style> img { max-width: 100%; height: auto; } video { max-width: 100%; height:auto; } </style>

Dies war wie schon beschrieben nur ein kleiner Grundkurs, wollen Sie mehr sollten Sie etwa folgende Seiten besuchen W3C-Schools oder Selfhtml sowie HTML.com und HTML für Einsteiger.

Suche Nach oben Startseite Mail an den Autor Links rund um Linux









SiteLock