Jede HTML Datei ist nach einem bestimmten Muster aufgebaut!
Sie beginnt mit einer vom W3C festgelegten Definition:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Anschließend wird die Programmiersprache festgelegt und die Datei als HTML Quelltext identifiziert!
Dies geschieht mit dem Tag <html>.
Geschlossen werden muss der <html> Tag nach dem Schließen des Bodys mit dem Tag </html>
Weiterhin gibt es zwei wichtige Bereiche. Dies sind der Header <head> und der Body <body>!
Im Header werden Metaangaben z.B. für Suchmaschinen hinterlegt und der Seitentitel, der in der erste Zeile des Browserfensters angezeigt wird, eingestellt.
Metaangaben befinden sich im <meta ...> Tag. Die besonderheit dieses Tags ist, dass er nicht geschlossen wird!
Der Seitentitel wird mit dem <title> Tag definiert. Der Name der Seite wird zwischen dem öffnen und dem Schließen des Tags (</title>)eingetragen.
Beispiel: <title> Christians Abi Vorbereitung </title>)
Der Body enthält den angezeigten Text, Bilder, Tabellen,... der Webseite!
Die Tags werden hier im folgenden erläutert!
Eine Webseite kann in Bereiche eingeteilt werden. Dies ist wie eine Tabelle zu sehen. In jeder "Zelle" wird ein anderes HTML Dokument angezeigt.
Außerdem verfügt jede "Zelle" auch über einen eigenen Scrollbalken, sofern diese nicht in dem verfügbaren Platz angezeigt werden kann!
Bedingung ist, dass die index.htm zwischen dem HEAD und dem BODY den Befehl zum Erstellen von Frames enthält.
| </head> | Schließen des Headers |
| <frameset rows=125,* border=0> | Einteilung des Frames in 2 Zeilen. Die erste ist 125 Pixel hoch, die zweite nutzt den restlichen Platz. Der Rahmen ist nicht sichtbar. |
| <frame name="banner" src="banner.html"> | Deie erste Zeile hat den Namen "banner" und die Quelldatei befindet sich im Hauptverzeichnis in der Datei "banner.html" |
| <frameset cols=200,* border=0> | Die zweite Zeile wird in 2 Spalten eingeteilt! die erste Spalte ist 200 Pixel breit und die zweite Spalte nutzt den Rest des Fensters. Der Rahmen ist nicht sichtbar. |
| <frame name="menue", src="menue.html"> | Die erste Spalte hat den Namen "menue" und die Quelldatei befindet sich im Hauptverzeichnis in der Datei "menue.html" |
| <frame name="main", src="main.html"> | Die zweite Spalte hat den Namen "main" und die Quelldatei befindet sich im Hauptverzeichnis in der Datei "main.html" |
| </frameset> | Schließen des für die Spalten zuständigen <frameset> |
| </frameset> | Schließen des für die Zeilen zuständigen <frameset> |
| <body> | Eröffnung des Body. |
Im Body kann ein alternativer Text eingefügt werden, der angezeigt wird, wenn der Browser keine Frames versteht!
Um Überschriften in einer HTML Datei zu gestalten existiert der Tag <h?> wobei das h für
Headline - Überschrift - steht und das ? für eine Zahl zwischen 1 und 6 steht, die die Schriftgröße der Überschrift definiert.
1 ist eine sehr große Überschrift, 6 eine sehr kleine!
Hier die Beispiele:
Normaler Text kann als Absatz im Paragraph-Tag eingefasst werden. Dieser Tag ist ein einfaches <p>. Er wird am Ende des Absatzes mit </p> geschlossen!
Der Tag kann dur weitere Attribute, wie zum Beispiel die Textausrichtung ergenzt werden. Zum Beispiel <p align="center">
Text kann auch als "Bereich" definiert werden! Dies geschieht durch den <div&g; Tag, welcher durch </div&g; wieder geschlossen wird. Auch hier können Ergänzungen wie Farbe, Ausrichtung,... festgelegt werden!
Beispiel:
Text wird üblicherweise in Absätzen (<p>) oder Bereichen (<div>) zusammengefasst. Hinter den <p> oder <div> Tag können noch genauere Definitionen gesetzt werden.
Der benötigte Tag für die Ausrichtung ist <... align="[Ausrichtung]">
Erlaubte Ausrichtungen:
left = linksbündig
center = zentriert
right = rechtsbündig
justify = Blocksatz
Zu beachten ist, dass die Art der Ausrichtung in Hochkommata gesetzt werden muss!
Beispiel:
Auf Webseiten dargestellter Text kann verschieden formatiert werden.
Die benötigten Tags umfassen das Wort bzw. den Bereich, der die definierte Formatierung aufweisen soll!
Denkbar sind:
| fett | <b>fett</b> | fett | kursiv | <i>kursiv</i> | kursiv | unterstrichen | <u>unterstrichen</u> | unterstrichen | durchgestrichen | <strike>durchgestrichen</strike> | hochgestellt | Text<sup>hochgestellt</sup> | Texthochgestellt | tiefgestellt | Text<sub>tiefgestellt</sub> | Texttiefgestellt |
Der "Grund-Tag" ist <font> und wird, unabhängig der angehängten Attribute, immer mit </font> beendet.
Die angefügten Attribute werden durch Leerzeichen voneinander getrennt an den Eröffnungs-Tag angehängt.
Um die ganze Seite oder bestimmte Teile zu bestimmen, kann der Font-Tag auch vor Absätzen, Bereichen oder nach der Eröffnung des Body
eingefügt werden. Das Ende kann direkt nach einem Zeichen, einem Absatz bzw. Bereich oder erst vor dem Ende des Body eingesetzt werden.
Bei der Schriftart muss beachtet werden, dass nur Schriftarten angezeigt werden können, die auch auf dem Rechner installiert sind,
der die Seite öffnet. Wenn man sicher gehen möchte, dass die Seite wie gewünscht angezeigt wird, sollte man sich entweder auf die
Standardschriftarten beschränken, oder eine Liste verwenden. Der Vorteil einer Liste ist, dass die erste auf dem Rechner gefundene
Schriftart verwendet wird.
<font face="Algerian,Impact,Tahoma,Verdana">Die erste gefundene Schriftart wird verwendet</font>
Das Attribut <font color="?"> bestimmt die Farbe des Textes. Das ? steht für eine Namen oder einen Hexadezimalcode.
Der Hexadezimalcode besteht aus einer # und darauf folgend 6 Stellen. Die Stellen sind in Zweierpaaren zusammengefasst und stehen für die Farbanteile von
R G B, also Rot, Grün, Blau! Es wird die additive Farbmischung angewendet! Keine Farbanteile stehen für Schwarz, Alle Farben voll zugeteilt ergibt Weiß!
<font color="#FF0000">Knallroter Text</font>
<font color="#00C000">Grüner Text</font>
<font color="#0000FF">Blauer Text</font>
| black | #000000 | gray | #808080 |
| maroon | #800000 | red | #FF0000 |
| green | #008000 | lime | #00FF00 |
| olive | #808000 | yellow | #FFFF00 |
| navy | #000080 | blue | #0000FF |
| purple | #800080 | fuchsia | #FF00FF |
| teal | #008080 | aqua | #00FFFF |
| silver | #C0C0C0 | white | #FFFFFF |
Zu beachten ist, dass sowohl der Farbname als auch der Code immer in Anführungszeichen gesetzt werden muss!
Mit dem Hexadezimalcode lassen sich 16,78 Millionen verschiedene Farben definieren, die im Browser dargestellt werden können.
<font size="5">Ziemlich großer Text</font>
<font size="1">Ziemlich winziger Text</font>
<font size="+1">Text etwas größer als normal</font>
<font size="-2">Text deutlich kleiner als normal</font>
Verwendet werden können folgende Klartext-Farben:
Umlaute und Sonderzeichen werden in manchen Browsern falsch angezeigt. Um dem vorzubeuegen, werden im Quelltest bestimmte Zeichen nicht "normal" geschrieben, sondern in einem speziellen Code angegeben. Die folgende Übersicht zeigt, welcher Code welches Sonderzeichen darstellt.
|
|
Tipp: Am Ende des Programmierens die "Suchen & Ersetzen" Funktion des HTML Editors verwenden, und somit einfach und auf einen Schlag alle Umlaute ändern.
Zu beachten ist dabei, dass dies nicht bei den Sonderzeichen funktioniert. Denn verändert man die typischen Zeichen ", &, > und <, ist der gesamte Quelltext unbrauchbar!
Grundsätzlich ist zwischen zwei verschiedenen Arten von Listen zu unterscheiden. Als erstes gibt es die sortierten Listen
(ordered lists) und die unsortierten Listen (unordered lists). Merkmal einer sortiertel Liste ist,
dass fortlaufen nummeriert wird, wogegen bei unsortierten Listen nur Aufzählungszeichen gesetzt werden.
Hier das
Beispiel einer sortierten Liste:
Liste 1 (ohne Typangabe):
<ol>
Liste 2 (Type = A):
<ol type=A>
Liste 3 (Type = a):
<ol type=a>
Liste 4 (Type = I):
<ol type=I>
Liste 5 (Type = i):
<ol type=i>
Die geordnete Liste mit fortlaufender Nummerierung wird durch <ol> eingeleitet. Darauf folgen die Listeneiträge.
Jeder Eintrag wird durch <li> eröffnet und durch </li> abgeschlossen. Am Ende beendet </ol> die Aufzählung.
Wird nicht näher definiert, wie die Aufzählung zu erfolgen hat, erfolgt automatisch eine arabisch nummerierte Liste.
Für die anderen Aufzählungstypen ist eine genauere Definition notwendig:
<ol type=A>
<ol type=a>
<ol type=I>
<ol type=i>
Trotz der genaueren Definition ist das Tag-Ende durch </ol> zu definieren.
Und nun das Beispiel einer unsortierten Liste:
Circle:
<ul type=circle>
Square:
<ul type=square>
Disc:
<ul type=disc>
Die ungeordnete Liste wird durch <ul type=?> eingeleitet. Das ? steht für die verschiebenen Aufzählungszeichen "circle", "square" und "disc". Darauf folgen die Listeneiträge. Jeder Eintrag wird durch <li> eröffnet und durch </li> abgeschlossen. Am Ende beendet </ul> die Auflistung.
Es gibt die Möglichkeit, wie in diesem Dokument immer schon gemacht, horizontale Trennlinien zu verwenden.
Bis jetzt wurden immer Standard-Trennlinien ohne Schatten verwendet.
Der Tag dafür latuet: <hr noshade>
Die Standard-Linie mit dem Tag: <hr>
Die Standard-Linie ohne Schatten <hr noshade>:
Die Breite der Linie ist, wenn sie undefiniert ist, immer vom linken bis zum rechten Bildschirmrand.
Definiert werden kann die Breite entweder über die Pixelzahl oder den Prozentsatz aller verfühbaren Pixel. Hier: 200 Pixel, zentriert:
<hr align="center" width=200>
Hier noch ein Beispiel für eine 70%ige Breite, linkszentriert:
<hr align="left" width=70%>
Nun ein Beispiel, wie die Höhe angepasst werden kann:
<hr size=10 width=500 color=blue>
Tabellen können zur strukturierten Darstellung bestimmter informationin, oder gar zur Gestalltung einzelner Elemente oder ganzen Seiten verwendet werden!
Tabellen werden durch den Tag <table> eingeleitet. Im Eröffnungs-Tag kann noch eine Information über die Ragmendicke der Tabelle enthalten sein. Dies geht über: <table border=2>
Auch die Tabelle mit dem nebenstehenden Quelltext ist durch eine Tabelle mit der Rahmendicke = 0 (border=0) in der zweispaltigen Ansicht dargestellt.
|
<table border=1> <tr> <td>1.Zeile;1. Zelle<td><td>1. Zeile 2.Zelle<td><td>1. Zeile 3.Zelle<td><td>1. Zeile 4.Zelle<td> </tr> <tr> <td>2. Zeile 1.Zelle<td><td>2. Zeile 2.Zelle<td><td>2. Zeile 3.Zelle<td><td>2. Zeile 4.Zelle<td> </tr> <tr> <td>3. Zeile 1.Zelle<td><td>3. Zeile 2.Zelle<td><td>3. Zeile 3.Zelle<td><td>3. Zeile 4.Zelle<td> </tr> </table> |
|
<table border> <tr><td width="100">Schmal</td><td width="300">Breit</td></tr> <tr><td height="50">Hoch</td><td> </td></tr> <tr><td height="100">Noch Höher </td><td> </td></tr> </table> |
Ein Hyperlink ist immer nach einem bestimmten Schema aufgebaut!
<a href="http://www.ziel.de">Name des Links</a>
Das "a" steht für Anker (Anchor) und leitet einen Verweis ein!
Ist das Ziel eine Datei, wird versucht, diese direkt im Browser zu öffnen. Geht das nicht, dann erscheint ein Download Fenster!
<a href="http://www.ziel.de/test.pdf">Wird im Browser geöffnet</a>
<a href="http://www.ziel.de/test.zip">Dateidownload wird gestartet</a>
Soll ein Punkt auf der Webseite das Ziel des Hyperlinks sein, muss vorher ein "Ankerpunkt" definiert werden!
<a name="12"></a>Hyperlinks
Mit name="?" wird der Name definiert, der später im Hyperlink als Zieladresse verwendet werden muss! Was dahinter steht und ob etwas dahinter steht ist irrelevant, weil es quasi nur ein "Post-It" auf der Seite ist!
Der Hyperlink zu der Seite sieht dann folgemdermaßen aus:
<a href="main.html#12" target="main">Links</a>
Das main.html gibt im Hauptverzeichnis die Seite an, auf der der Ankerpunkt zu suchen ist. Nach der # steht dann der Name des Ankers. Das Attribut target="main" beschreibt das im frameset definierte Fenster, in dem sich die Seite bei dem Ankerpunkt öffnen soll.
Andere Möglichkeiten wären z.b. target="_blank". Dies stellt die verwiesene Stelle in einem neuen Tab bzw. neuen Fenster dar.
<a href="mailto: beispiel@irgendwas.de">eMail schreiben</a>
Es erscheint, wie beim "normalen" Verweis nur "eMail schreiben". Klickt der Besucher auf den Link, öffnet sich das von ihm verwendete Mailprogramm und als Empfängeradresse ist dann beispiel@irgendwas.de eingetragen.
Durch den Vorsatzt "mailto: " erkennt der Browser, was zu tun ist!
Das Einbinden von Bildern bieter eine Reihe von Möglichkeiten!
Es empfiehlt sich, trotz DSL Geschwindigkeiten von 50.000 und mehr, das Dateiformat und damit die Größe auf die gängigsten komprimierbaren Fromate zu beschränken!
Dies sind:
Der (Grund-)Tag zum Einbinden von Bildern lautet:
<img src="images/strand3.jpg">
Unter src="?" muss der Dateiname bzw. der Ort angegeben sein, unter dem das Bild zu finden ist!
Hier können relative und absolute BEzüge verwendet werden! Im Beispiel oben ist der relative Bezug zu einem Bild zu sehen, welches im Unterordner "images" liegt und den Dateinamen "strand3.jpg" hat.
Alternativ kann hier auch ein absoluter Bezug auf ein Bild hinterlegt sein, welches sich irgendwo im Internet befindet:
<img src="http://www.menzel-bs.de/images/strand3.jpg">
Der Tag kann um eine Reihe weiterer Funktionen erweitert werden!
Dies kann dann folgendes bewirken:
<img src="http://www.menzel-bs.de/images/strand3.jpg" alt="Alternativer Text" width="200" height="160" border="2" align="right vspace="10" hspace="20">
Erläuterung:
Das einzubindende Bild befindet sich unter: http://www.menzel-bs.de/images/strand3.jpg. Kann das Bild nicht angezeigt werden, erscheint der Text: "Alternativer Text".
Das Bild wird auf eine Breite von 200 Pixeln und auf eine Höhe von 160 Pixeln "qequetscht".
Achtung: Dies führt unweigerlich zur Verzerrung des Bildes!
Der Rahmen um das Bild hat eine Stärke von 2 Pixeln. Das Bild hat eine Rechtsausrichtung und er umlaufende Text hat einen Anstand von 10 Pixeln nach oben und unten und einen Abstand von 20 Pixeln nach rechts (zum umlaufenden Text).
<a href="http://www.menzel-bs.de" target="_blank"><img src="http://christian.menzel.bsk-agy.de/images/link_fotoseite.jpg" border="0"alt="Hier sollte eigentlich der Link zu meinem Bild sein!</a>
Dieser Tag ist wie ein "normaler" Hyperlink aufgebaut. Er wurde jedoch durch den img Tag erweitert.
Ziel des Hyperlinks ist die Seite: "http://www.menzel-bs.de". Die Zielseite soll sich in einem neuen Tab oder einem neuen Fenster öffnen (target="_blank").
Der img Tag wird nun einfach angehängt.
img src="http://christian.menzel.bsk-agy.de/images/link_fotoseite.jpg"
Anschließend habe ich die Rahmendicke auf 0 Pixel festgelegt und den alternativen Text "Hier sollte eigentlich der Link zu meinem Bild sein!" eingefügt.
CSS (Cascading Style Sheets) ist eine Ergänzung zu HTML. Mit Hilfe von CSS können globale Einstellungen festgelegt werden.
Beispielsweise kann definiert werden, dass eine Überschrift der Klasse "h1" IMMER in rot dargestellt werden soll.
Es besteht die Möglichkeit, die CSS Informationen direkt im Header zu definieren, oder sie in eine externe Datei auszulagern.
Die Auslagerung ist dann sinnvoll, wenn mehrere Seiten (z.B. bei Frames) immer die selben Eigenschaften aufweisen sollen, da sonst der Header eine nicht zu verachtende Größe annimmt.
|
<head> <link rel="stylesheet" href="style.css" type="text/css"> </head> |
Innerhalb des <link>-Tags müssen die Angaben rel="stylesheet" type="text/css" stehen (rel = relation = Bezug - type = MIME-Typ).
Beim Attribut href muss der gewünschte Dateiname angegeben werden (href = hyper reference = Hypertext-Referenz).
Sollen die Informationen direkt im Header stehen, ist der oben gezeigte Tag sinnlos, da es ja keine ausgelagerte Datei gibt!
hier muss folgendes hinterlegt werden:
|
<head> <style type="text/css"> . . . </style> </head> |
In den Style Tag werden dann die CSS Informationen hinterlegt!
In der ausgelagerten Datei werden die Informationen im <style>-Tag eingerahmt.
Sollen die Informatinen direkt im Header eingefügt werden, existiert der <style>-Tag ja wie gesagt schon.
Der grundsätzliche Aufbau einer in CSS definierten Eigenschaft sieht immer so aus:
Selektor { Eigenschaft:Wert; }
Der Selektor gibt an, für welche Arten von Elementen die anschließende Formatierung gelten soll.
Die Eigenschaft legt fest, welche der verfügbaren Einstellungen angewendet werden sollen!
Der Wert gibt an, was die Eigenschaft für einen Wert aufweisen soll.
|
a:link {color:blue; text-decoration: none; } a:visited {color:blue; text-decoration: none;} a:hover {color:grey; text-decoration: none;} a:active {color:grey; text-decoration: none;} p { font-family:Arial} div { font-family:Arial} |
Das a steht, wie weiter oben schon erwähnt, für einen "Anker" bzw. einen Hyperlink!
Es können alle verfügbaren Selektoren, wie z.B. a, table, p, div, ul, ol,... verwendet werden.
Eine totale Einstellung z.B. der Schriftart wird mit dem Selektor * festgelegt!
|
font-family font-style font-weight background-color color word-spacing letter-spacing font-size list-style-type border |
Schriftart (z.B.:Arial;) Schriftformatierung (z.B.:iatalic;) Schriftdicke (z.B.:bold;) Hintergrundfarbe (z.B.:red; oder FF0000;) Schriftfarbe (z.B.:red; oder FF0000;) Wordabstand (z.B.: 3,5 em;) Buchstabenabstand (z.B.: 0,5 em;) Schriftgröße (z.B.: 20 pt;) Listentyp (z.B.: bei ul - circle; bei ol - lower-alpha;) Rahmendicke (z.B.: bei Tabellen - thick double red) |
! 1 em = 12 Pixel !
Beachte: Es können auch mehrere Eigenschaften hintereinander geschrieben werden. Hinter dem Semikolon folgt zur Trennung dann eil Leerzeichen!
Achtung:
Überschriften, Listen, Tabellen,... unterbrechen Absätze und Bereiche! Ist z.B. für p die Schriftart Arial definiert, so wird im Paragraph vor einer Tabelle die Schriftart Arial angewendet, danach jedoch nicht mehr!
Das bedeutet, dass vor unterbrechenden Elementen ein </p> bzw. ein </div> kommen muss und anschließend ein neuer Bereich bzw. ein neuer Absatz definiert werden muss.
Der globale Selektor * überlagert alles Weitere!
Ist z.B. p {font-family:Arial}, und an einer anderen Stelle * {font-family:Impact} definiert, dann wird die Schriftart immer Impact sein!
Selektoren können auch noch genauer definiert werden. Dies ist oben am Beispier a zu erkennen!
|
a:link {color:blue; text-decoration: none; } a:visited {color:blue; text-decoration: none;} a:hover {color:grey; text-decoration: underline;} a:active {color:grey; text-decoration: blink;} |
Darstellung eines noch nicht besuchten Hyperlinks (Hier: Farbe Blau - ohne Dekoration) Darstellung eines besuchten Hyperlinks (Hier: Farbe Blau - ohne Dekoration) Was passiert, wenn der Mauszeiger über den Link bewegt wird (Hier: Farbe Grau - unterstrichen) Was passiert, wenn der Link angeklickt wird (zu sehen, wenn die Maustaste gehalten wird) (Hier: Farbe Grau - blinkt) |
Die für diese Seite verwendete CSS Datei kann hier angesehen werden: KLICK
Zu beachten ist, dass die Einbindung des CSS files auf jeder Seite erfolgt ist! Das gilt für die Seiten das Frames und für die CSS Beispielseite!
In Excel werden Bezüge unterschieden. Die relativen Bezüge haben die Eigenschaft, dass sie sich beim Kopieren / Ziehen von Zellen verändern!
Habe ich als Beispiel in den Spalten A und B Zahlen und möchte diese in der Spalte C addieren,
kann ich in C1 schreiben: "=A1+B1" und diese dann nach unten ziehen.
Die Formel in Zelle C5 sieht dann folgendermaßen aus:"=A5+B5"
Absolute Bezüge zeichnen sich durch ein $ vor der Spalten und/oder Zeilenangabe aus!
Behalten wir das oben genannte Beispiel bei, lautet die Formel in C1 mit einem absoluten Bezug:
"=$A$1+$B$1"
Beim Ziehen wird in jeder Zelle das Ergebnis von A1+B1 stehen, da sich die Bezüge nicht verändern!
jeder Diagrammtyp bietet die Möglichkeit, den ausgewählten Typ nochmals genauer zu definieren!
Die Funktion "S-Verweis" hat folgenden Syntax:
=SVERWEIS(Suchkriterium; Matrix; Index; Sortiert)
Sie hat die Aufgabe, in einem definierten Bereich nach einem bestimmten Wert zu suchen und dann den nebenstehenden Wert wiederzugeben.
Das Suchkriterium ist der Wert, der in einem Bereich, der Matrix, gesucht werden soll. Es kann entwerder direkt in der Formel hinterlegt sein, oder auf eine Zelle verweisen.
Der Index gibt an, aus welcher Spalte der Matrix der nebenstehende Wert übernommen werden soll. Das Attribut Sortiert legt fest, ob die Matrix sortiert ist und nach dem
Auffinden eines ähnlichen Wertes des Schukriteriums die Suche beendet ist, oder nach genau dem angegebenen Wert in der gesamten Liste gesucht werden soll! Dieser Wert kann auch weggelassen
werden.
Dann interpretiert die Tabellenkalkulation die Eingabe als sortiert und gibt auch bei hoher Ähnlichkeit den im Spaltenindex festgelegten Wert wieder.
Die Funktion "Zählenwenn hat folgenden Syntax:
=ZÄHLENWENN(Bereich;Kriterien)
Sie gibt einen Wert wieder, der der Anzahl der zutreffenden Bedingungen entspricht.
Es kann z.B. nach Buchstaben oder Zahlen suchen, oder die Anzahl von Zahlen angeben die beispielsweise kleiner als 5 ist.
Dies würde dann so aussehen:
=ZÄHLENWENN(A1:B23;"<5")