Allgemeines > Technik

Eigene Webseite

<< < (5/14) > >>

Andrea:
Genau das habe ich mir erhofft, Gipsy. Insofern muss ich erst mal Befehle und mögliche Strukturen (kennen)lernen...

Und es sind so viele neue Begriffe da, die mir fremd sind. Klar, HTML kenne ich als Kürzel, Browser gehört zum täglichen Sprachgebrauch und ab und zu gibt es ein Java-Update. Aber was ganz genau sich dahinter und hinter vielen anderen Begriffen verbirgt, ist einem Laien so lange egal, bis sie eine Webseite will  ;D

Gipsy:
Um das Lernen der Begriffe kommst Du nicht herum.

Du kannst Dir aber den Anfang einfacher machen, wenn Du Word oder einen anderen Texteditor hast, der komplexe Formatierungen und z.B. auch das Einbinden von externen Bildern und Hinzufügen von Rahmen und 3D-Look zulässt sowie das Speichern als HTML. Das kannst Du Dir mit einem einfachen Editor (wie Notepad oder aktuell einfach "Editor" in Windows oder notfalls noch dem Editor, der z.B. im Firefox zum Bearbeiten der Seiten angeboten wird) anschauen. Fang einfach an, damit Du die Teile identifizieren kannst. So kannst Du auch herausfinden, mit welchen Befehle Du Dich als erstes beschäftigen möchtest.

Rainer:

--- Zitat von: Andrea am 18. September 2015, 13:43:49 ---Ich habe nun mal "spaßeshalber" den Wiki-Artikel zu HTML gelesen. Ich habe nicht nur Bahnhof verstanden, aber fast  ;D Nun hätte ich gerne einen "Einführungskurs in HTML"...
--- Ende Zitat ---

Der Artikel ist auch scheiße, viel zu "wissenschaftlich". Eigentlich ist es super einfach.

Erst einmal muss man überhaupt wissen, was sind "Dateien"? Das sind einfach "Ansammlungen" von Daten innerhalb eines bestimmten Bereichs in einem "Dateisystem". Die Festplatte des Computers wimmelt nur so von Dateien. Diese Dateien haben bestimmte Inhalte, oft werden diese Inhalte in Kategorien/Typen aufgeteilt. Zum Beispiel eine Videodatei. Die Daten, die da drinne stehen, stellen (mit einem Player abgespielt) ein Video dar. Oder eine Fotodatei, da gibt es gleich verschiedene Sorten, zum Beispiel die sog. "Bitmap" oder auch einen "JPEG" Datei. Das geeignete Werkzeug (zum Beispiel Irfan View, oder auch ein Browser) kann das Foto anzeigen.

Daten in Dateien sind zunächst einmal nichts anderes als Bits und Bytes. Ein besonderer Typ von Dateien sind die sog. "Textdateien". Da stehen einfach nur Texte drin, ein Text definiert sich einfach als Aneinanderreihung von alphanumerischen Zeichen.

Die Textdateien haben unter Windows beispielsweise die Endung *.txt. Also zum Beispiel meintext.txt

Wer einen Windowsrechner hat, der kann Textdateien beispielsweise mit einem "Editor" bearbeiten, bei Windows wird der Notepad dafür ausgeliefert. Diese Texte sind wirklich nur Text, da gibt es leider keine sog. "Attribute", Du kannst da nicht sagen, dass bestimmer Bereich in fett oder auch in rot dargestellt werden sollen. Das geht nicht. Text ist Text, sonst gar nichts.

Bei Word sieht das anders aus (und da fängt bei vielen schon das Verständnisproblem an). Word kann doch prima "Texte" darstellen. Aber aus computertechnischer Sicht ist das kein Text, das ist hoch komplexes Format, welches zwar auch Texte darstellen kann, aber man beliebige Attribut vergeben, man kann "Fonts" aussuchen, man kann riesig groß schreiben, man kann alle Farben wählen, man kann links und rechtsbündig schreiben. Und vieles mehr. D.h. in diesen Word Dateien da stehen in Wirklichkeit ganz viele Daten drin, die weit über simplen Text hinausgehen und deswegen braucht man auch das Programm "Word", um Worddateien anzuschauen. Wenn Du versuchst, ein Worddatei mit Notepad zu bearbeiten, das gibt "Salat". Kannst Du ja mal versuchen.

Das Verständnis dessen, was eine Textdatei ist, das ist essentiell für HTML. Denn HTML Dateien sind auch nur Textdateien. Und sonst nichts. Da steht nur Text drin. Versuche Dir irgendeine HTML Datei herunterzuladen und öffne sie mit Notepad. Das wirst Du lesen und erkennen können, sieht möglicherweise etwas eigenartig aus, aber es ist schierer Text.

Die Idee, die hinter HTML steckt (und da ist der Vergleich zu LaTex zu 100% richtig), ist das Konzept, dass man Texten, mit normalen Worten und Zeichen, in eine Datei eine Art Anweiseung schreibt, dass nachher ein geeignetes "Browsertool" daraus ein richtig schönes Dokument anzeigt, ähnlich wie ein Worddokument oder wie ein PDF Dokument, wo es Farben und Fettdruck gibt, wo es Bilder gibt und eine schöne bunte Welt.

Dazu hat man sich einfallen lassen, dass man innerhalb der Textdateien bestimmte "Anweisungen" schreiben kann, die der Browser NICHT als Text anzeigt, sondern die Browser benutzt, um andere Dinge zu attributieren oder anzuzeigen. Fangen wir ganz von vorne an, die erste HTML Datei Deines Lebens, wir nennen wir "test.html". Da schreibst Du einfach diese eine Zeile hinein (mit dem Notepad):


--- Code: ---Hallo Welt!
--- Ende Code ---

Speicher die Datei unter dem Namen "test.html" ab und dann klicke doppelt im Explorer darauf. Dann wird Dein Standardbrowser aufgehen und was zeigt er an - ganz oben links, klein aber fein "Hallo Welt!".

Jetzt hättest Du gerne, dass das mit Fettdruck dargestellt werden soll. Dazu musst Du das test.html wieder öffnen und dann kommt die erste echte "HTML Anweisung". HTML Anweisungen stehen (nahezu) grundsätzlich zwischen dem Kleiner- und dem Größerzeichen und dazwischen steht der sog. "HTML TAG", das ist ein bestimmter Befehl der Sprache HTML. Das sieht dann so aus:


--- Code: ---<b>Hallo Welt!</b>
--- Ende Code ---

Das ist ja immer noch Text, aber Du siehst, dieses "<b>" und "</b>" sind komischer Text. Diesen "Text" zeigt der Browser auch nicht an, stattdessen weiß der Browser, ich muss alles, was zwischen diesen beiden TAGs steht (und typischerweise sieht der hintere TAG fast so aus wie der erste TAG, hat aber am Anfang einen Slash oder auf Deutsch Schrägstrich) in fett darstellen. Probier es aus und schreib es mit dem Notepad in die Datei hinein und dann lade es im Browser neu.

Wenn Du es bis hier verstanden hast, dann bist Du fertig. HTML ist nichts anderes als eine Textdatei, mit Text und/oder TAGs.

Was die Sache jetzt spannend macht, das ist Frage, was gibt es eigentlich für TAGs (also Befehle), das hier ist ein sehr einfacher, der Befehl, einen bestimmten Textbereich in fett darzustellen. Aber der Browser kennt tausende von TAGs, die alle bestimmte Wirkung haben. Du möchtest vielleicht den "Hallo Welt" oben in der Mitte sehen? Kein Problem:


--- Code: ---<center>Hallo Welt!</center>
--- Ende Code ---

Oder in Mitte, als fette Titelzeile?


--- Code: ---<h1><center>Hallo Welt!</center></h1>
--- Ende Code ---

Das sieht schon komischer aus, was soll den "h1" heißen? Naja, es kommt ja alles aus dem englischen und das ist "Header 1". Es gibt auch h2 und auch h3 (kannst Du alles ausprobieren), das sind fest definierte Formate, was der Browser dann anzeigen muss.

Jetzt mal ein komplizierteres Stück HTML. Wir wollen die Titelzeile lassen, aber jetzt will ich darunter ein Foto anzeigen. Fotos sollten auf einem Server im Internet gespeichert sein, damit jeder das Foto sehen kann, wenn man sich das Dokument anschaut. Nehmen wir der Faulheit halber uns aktuelles Banner, das liegt auf dem Eumerika Server und hat diese Internet Adresse:


--- Code: ---http://www.eumerika.de/bilder/banner-0915.jpg
--- Ende Code ---

So eine Zeile nennt man übrigens "URL" (Uniform Resource Locator). Das ist Schreibweise, auf die man sich geeinigt hat um darzustellen zu können, wo im Internet (auf welchem Server) und wo genau auf diesem Server eine bestimmte Datei liegt.

Um in einem HTML Text ein Foto anzeigen zu lassen, benötigen wir (wieder) ein HTML TAG (ein Befehl), und der heißt hier (englisch, wie immer) "<img ....>". Ich schreibe es einfach mal auf und nicht vergessen, oben drüber sollte ja immer noch die Titelzeile stehen:


--- Code: ---<h1><center>Hallo Welt!</center></h1>
<img src="http://www.eumerika.de/bilder/banner-0915.jpg" />
--- Ende Code ---

Und jetzt kann man natürlich das Bildchen noch zentrieren, und dann zeige ich gleich eines ungewollten Problem von HTML: es hat sich im Laufe der Jahre immer weiter entwickelt, d.h. es kamen immer mehr Befehle hinzu, heute sind wir bei HTML Version 5 angekommen (auch einfach HTML5 genannt), das bedeutet nichts anderes, als dass da erneut neue TAGs hinzugekommen sind. Und es hat im Laufe der Jahre immer wieder "Verbesserungen" gegeben, aber man wollte aus Kompatibilitätsgründen "alte" Befehle nicht sterben lassen und das führt insgesamt dazu, dass es oft verschiedene TAGs gibt, die optisch das gleiche tun, aber syntaktisch anders aussehen. Nun schieb ich aber mal das Foto auch noch in die Mitte:


--- Code: ---<h1><center>Hallo Welt!</center></h1>
<div align="center"><img src="http://www.eumerika.de/bilder/banner-0915.jpg" /></div>
--- Ende Code ---


Jetzt siehts schon ganz schön wild aus, aber eigentlich immer noch verständlich. Und vor allem sieht es jetzt im Browser so aus, wie wir es uns gewünscht haben.

Und zum Abschluss schreiben wir noch zwischen der Kopfzeile und dem Banner einen kleinen Kommentar, wo man denn dieses Foto bestaunen kann:



--- Code: ---<h1><center>Hallo Welt!</center></h1>
<div align="center" width="80%"> Dieses wunderbare Foto ist das Banner für den Monat September aus dem Eumerika Reiseforum.
Wie man gleich sehen wird, ist hier im Text ein Zeilenumbruch drin, aber der Browser zeigt das gar nicht an, der macht zwar auch
Zeilenumbrüche, aber gar nicht an der gleichen Stelle, das verstehe ich nicht, aber da gehört eben auch zum Konzept von HTML, selbst
ein simpler erzwungener Zeilenumbruch ist ein eigener Befehl, ein eigenes Tag, ansonsten macht der Browser so lange Fließtext, wie es auf den Bildschirm
passt nun die width-Anweisung erlaubt die Steuerung, wieviel Prozent des Bildschirms benutzt werden dürfen. Ein erzwungenen Zeilenumbruch sieht so
komisch aus:<br />Was hier jetzt dahinter steht, das steht im Browser gleicht definitiv auf einer neuen Zeile. Dieses TAG heißt übrigens "break".</div>
<div align="center"><img src="http://www.eumerika.de/bilder/banner-0915.jpg" /></div>
--- Ende Code ---

Möglicherweise werden übrigens nachher die Umlaute falsch dargestellt. Das Problem besteht darin, dass man in HTML auch mitteilen kann, was für einen Zeichensatz eigentlich der Browser wählen soll. Das haben wir hier nicht gemacht, wir haben einfach deutsche Umlaute benutzt, aber das weiß der Browser nicht, der nimmt nachher einfach einen Standardwert und wenn man Pech hat, dann passt dieser Wert nicht. Egal, das sprengt jetzt endgültig die kleine Einführung. Aber das Prinzip von HTML ist einfach - schwierig ist die große Menge an TAGs, die der Browser versteht.

Zum Abschluss: warum HTML5 so gefragt ist, da wurde endlich das jahrelang aufgeschobene "Video" TAG vorgestellt und festgelegt, wie man Videos in Browser anzeigen kann, nämlich mit dem neuen Video TAG:


--- Zitat ---<video .....> ......</video>
--- Ende Zitat ---

Das war bis inkl. HTML4 gar nicht möglich. Da musst man horrende Konstrukte benutzen, um externe Videoplayer irgendwie zu bemühen, heute muss der Browser das Video selbst abspielen können, dann darf er sich HTML5-konform nennen. Das geht es also Stück für Stück um Fähigkeiten des Browsers, wenn der HTML Standard neu festgelegt wird. Die vorhandene, alte HTML Version hat aber immer noch Gültigkeit, d..h. jeder neue Browser muss alles können, egal ob alt oder neu.

serendipity:
Ich würde mir erst einmal ganz klar über die Inhalte werden und damit folgend auch die Überlegungen für den Arbeitsaufwand, den man sich selbst machen will und kann.

Ich selbst "betreibe" bzw. "betreue" derzeit ja drei Seiten - mittlerweile alle drei bei Jimdo.

Die Tigerklasse ist eigentlich ein Klassen-Blog, bietet mir jedoch auch die Möglichkeiten einen passwortgeschützen Elternbereich einzurichten und Seiten mit Fotogalerien unserer Unternehmungen oder "Kunst"-Werke. pdf-Dateien, Bilder, Videos lassen sich problemlos einbinden bzw. zum Download anbieten, dies war mir wichtig, da ich auch immer mal eigenes Materal für KollegInnen anbiete.

Schulhomepage ist eher eine klassische Website, jedoch mit intergriertem Blog unter dem Punkt "Aktuelles". Auch hier bieten wir Formulare zum Download an.

Und schließlich meine  private Seite, die ebenfalls Blog mit anderen Inhalten kombiniert, wobei ich an dieser am wenigsten arbeite.

Alle Seiten liefen vorher über wordpress, aber das war mir auf Dauer zu umständlich. Jimdo ist wesentlich intuitiver zu bedienen und vor allem bei meinem Klassenblog muss es schnell gehen, denn dort stehen die häufigsten Updates, oft täglich. Selbst wenn ich nur einen kurzen Text schreibe, der inhaltlich keine große Anforderungen an mich stellt und vielleicht 10 Bilder hochlade, so bin ich doch ca. eine halbe Stunde beschäftigt (Bilder bearbeiten, verkleinern, Text schreiben, Kategorien verwalten und Tags hinzufügen) - müsste ich das nun mit html selbst basteln, könnte ich das zeitlich nicht leisten.

Mit gefallen so tolle Seiten wie z.B. die von Muhtsch's Welt, aber in meinem Alltag habe ich dafür (noch) keine Zeit, das hebe ich mir mal für später auf. Deshalb auch meine Entscheidung für Baukasten und somit schnell zu einem einigermaßen anschaubaren Ergebnis kommen  :verpiss:

Andrea:
Oh ja, die Seite von Muhtsch kenne ich auch und habe auch schon viel dort gestöbert.

Ich glaube, bei mir geht es gar nicht so sehr um das eigentliche Veröffentlichen meiner Contents, denn das tue ich ja bisher hier auch schon. Ich suche ein Hobby, das mich durchaus beschäftigen darf. Beruflich werde ich eher körperlich als geistig gefordert, bin aber eigentlich eher der "Kopftyp". Deswegen fehlt mir schon seit Jahren etwas und das könnte eben die Programmierung und Pflege einer Webseite sein.

Lieber Rainer,

dein Einführungskurs ist ja der Hammer! Du machst dir so viel Arbeit und das, obwohl du eigentlich gerade ganz andere Dinge im Sinn hast. Tausend Dank dafür! Und das Beste: Ich habe es weitestgehend verstanden. Aber das kommt vielleicht, wenn ich es so wie du bzw. zuvor Gipsy vorgeschlagen hat, einfach mal ausprobiere. So bin ich gerade über den Unterschied von


--- Code: ---<center></center>
--- Ende Code ---

und


--- Code: ---<div align="center"></div>
--- Ende Code ---

gestolpert. Da habe ich doch schon mal die erste Sache zum Ausprobieren  ;) Prinzipiell hätte ich gedacht, dass center reicht. Ich probiers einfach mal aus.

Navigation

[0] Themen-Index

[#] Nächste Seite

[*] Vorherige Sete