HTML für Hotelbesitzer by Skitering
Vorweg sei erwähnt dass ich euch mit diesem Tutorial nicht HTML beibringen möchte,
sondern lediglich wichtige Codes und Regeln, die für News passend sind.
1.1) Was ist HTML und wofür dient es?
HTML ist eine Auszeichnungssprache, die mittlerweile in der Version 5 heimisch ist.
Diese Auszeichnungssprache dient dazu einer Homepage eine Struktur zu verleihen.
In der Sprache HTML gibt es noch diverse weitere Codes, Regeln, Attribute und Container,
die ich euch hier nicht erwähnen werde, da diese für Hotelbesitzer irrelevant sind.
1.2) Wem dient dieses Tutorial?
Dieses Tutorial dient Hotelbesitzern, Communitymangern und sämtlichen Leuten, die in ihrem Hotel
gerne ansehliche News publizieren möchten. Für Techniker ist dieses Tutorial nicht weiter interessant
da es sich nur auf die Basics bezieht.
1.3) Kann ich nach diesem Tutorial HTML?
Nein, absolut nicht. Du kannst danach lediglich sämtliche
Basics um deine News zu gestalten.
Wichtig: Sämtliche HTML Codes kannst du einfach in den Editor im Housekeeping einfügen.
2.2) Einbindung von Bildern
Bilder machen sich in den News immer gut. Sie sehen nicht nur toll aus, sondern können auch
diverse Situationen darstellen. Diese bindet man wie folgt ein: <img src="PFAD ZUM BILD">
So, nun ist dein Bild online. Allerdings noch in der originalen Größe und auch noch nicht zentriert.
Wenn dein Bild eine genaue Größe haben soll, macht man dies wie folgt: Der oben genannte Code
bleibt bei jeder Einbindung eines Bildes bestehen, er wird lediglich erweitert:
<img src="PFAD ZUM BILD" width="BREITE, ANGEGEBEN IN PIXEL" heigh="HÖHE, ANGEGEBEN IN PIXEL">
Nun kannst du dein Bild auf eine genaue Größe anpassen, allerdings erscheint es immer noch mittig.
Wenn du dein Bild aber z.B rechts von einem Text haben möchtest, machst du dies wie folgt:
<img src="PFAD ZUM BILD" allign="left"> (bei rechts währe es: right). Nun kannst du zu deinem Bild
noch ein Highlight hinzufügen und zwar ein Text der beim laden und beim drüberscrollen erscheint.
Dieser geht so: <img src="PFAD ZUM BILD" alt="TEXT">.
Natürlich kann man mehrere Attribute auf einmal einfügen, das bedeutet das man sowohl die Größe,
den Text als auch Zentrierung in einem angeben kann.
2.3) Abstände (Achtung: Bei den meisten Housekeepings, wird dies automatisch gemacht)
Vorweg sei erwähnt, das die meisten Abstände bei professionellen Homepages via CSS gemacht werden,
allerdings ist dies via HTML auch möglich. Mit "<br />" bewirkst du einen Zeilenumbruch. Das
bedeutet nach diesem Code schreibt man automatisch in der neuen Zeile. Mit "<p>" bewirkst du einen
Zeilenabstand, das bedeutet du schreibst nicht in der neuen Zeile weiter, sondern in der übernächsten,
die dazwischige bleibt leer. Dieser Code muss auch wieder geschlossen werden,
undzwar so: "</p>" Wenn du einen Abstand beim schreiben (nach rechts) machen möchtest,
geht dies mit " ".
2.4) Linking
Sollten in deinen News Links vorkommen sollen, machst du dies mit diesem Code:
<a href="PFAD ZUR SEITE">TEXT, DER DORT STEHT"</a>. Auch dies bietet viele Möglichkeiten.
Wir werden auf die in HTML möglichen eingehen. Wie auch schon bei Bildern wird mit dem
Attribut "alt" ein Text wiedergegeben. Dieser wird angezeigt wenn man mit dem Cursor drüber fährt.
Dies sieht so aus: <a href="PFAD ZUR SEITE" alt="TEXT BEIM SCROLLEN">TEXT, DER DORT STEHT"</a>
Eines der wichtigsten Attribute hier ist das Attribut "target" mit diesem legst du die Öffnung
des Links fest. Mit dem Attribut "_blank" öffnet sich der Link in einem neuen Tab. Bei keiner Eingabe
oder mit "_self" öffnet sich der Link auf der aktuellen Seite. Sieht so aus:
<a href="PFAD ZUR SEITE" target="_blank">TEXT, DER DORT STEHT"</a>. Es gibt noch weitere Möglichkeiten
wie z.B parent und top usw., auf diese werde ich aber nicht weiter eingehen. Mit CSS lässt sich noch
Farbe, Darstellung u.w des Links bestimmen, dies auch in verschiedenen Momenten (aktiv, hover, visited etc.).
Auf dieses wird hier auch nicht eingegangen.
2.5) Standard
Die wohl bekannten Standard Codes lauten: <strong>TEXT</strong>, <em>TEXT</em>, <u>TEXT</u>.
Strong lässt einen Text fett gedruckt darstellen, em kursiv und u unterstrichen. Allerdings
werden diese Techniken in CSS wieder verändert, bei professioneller Handhabung.
2.6) Verschiedene Schriftendarstellungen
In 2.5 haben wir schon die Standardcodes gelernt, nun lernen wir noch weiteres. Das Standardelement
hierfür lautet: "<font>" die Farbe legen wir also so fest: "font color="RED,GREEN USW">. Dies kann
auch in hexadezimalzahlen angegeben werden. Die Größe wird so angegeben: "<font size="12-20 z.B">"
Auch dieser Code muss geschlossen werden, so: .... </font>. In professionellen Homepages wird diese
Methode allerdings nicht verwendet, dort setzt man auf CSS. In HTML gibt es allerdings noch die "H-Möglichkeit."
Diese gibt dem Text eine Schriftgröße. Es gibt: <h1> bis <h6> (auch diese Codes müssen geschlossen werden: </hGRÖßE>).
<h1> ist die größte Darstellung und <h6> die kleinste. Alles andere dazwischen wird dementsprechend kleiner/größer.
Im professionellen Webdesign gibt <h> allerdings nicht die größe, sondern die Ausschlagskraft an. Dies hat etwas
mit SEO-Techniken zutun, <h> Codes werden dort via CSS angepasst.
2.7) Einbettung von Videos und Musik
Da dies auf Grund vieler Möglichkeiten (Flash, usw.) ziemlich kompliziert wird und daher auch
ziemlich viele Möglichkeiten bietet gebe ich hierbei nur die Codes bekannt:
Musik: <embed src="MUSIK" autostart="true" loop="true" hidden="true" height="0" width="0">
Wie man die Größe angibt ist bekannt, der autostart kann noch auf "false" gesetzt werden,
dann muss dies manuell angemacht werden (per klick auf Play). Es gäbe noch Möglichkeiten eine
Hintergrundmusik einzubinden, allerdings gehe ich auf diese auch nicht weiter ein.
Video:
<object data="VIDEO" type="image/svg+xml" width="0" height="0">
<param name="src" value="uhr.svg">
Bitte Flash installieren (TEXT KANN ANGEPASST WERDEN)
</object>
Größe muss wieder angepasst werden, ansonsten den Code so belassen,
da es für Einsteiger sonst zu kompliziert wird.
Das war es soweit von diesem Tutorial. Auf Wunsch werde ich dieses Tutorial ständig erweitern,
so dass es auch in den professionellen HTML Bereich übergeht.
Sämtlicher Text wurde komplett von Skitering geschrieben, dies bitte bei Weiterverteilung
bestehen lassen.
