|
| |
Tutorials
| HTML -Workshop |
|
| |
Grundgerüst
Text
Links
Bilder+Grafik
Tabellen
Frames
| Grundgerüst |
|
Jede Webseite ist eigentlich gleich aufgebaut.
Sie beginnt mit <html> und endet mit </html>.
Diese Codes nennt man tags. Diese Tags stehen meistens am
Anfang und am Ende eines bestimmten zu definierenden Objektes.
Innerhalb des <html>tags gibt es noch weitere wichtige
tags.
<head> ... </head>
In diesem Bereich steht zum Beispiel der Name bzw. Titel der
Seite. (<titel> ... </titel>)
Weiterhin haben hier die Metatags ihren Platz (Keyword, Autorenname
usw.)
Außerdem werden hier CSS-Styles hinterlegt. Entweder
als Link zu einer externen Datei oder gleich so.
<body> ... </body>
Hier steht dann der eigentliche Inhalt der Webseite, wie Text,
Grafiken, Bilder, Tabellen usw.
Die Seiteneigenschaften werden hier auch festgelegt, sprich
wie die Seite im Endeffekt aussieht.
Im <body>tag kann man viele verschiedene Eigenschaften
festlegen.
| text="#000000" |
Textfarbe (hier schwarz) |
| link="#FFFFFF" |
Hyperlinkfarbe (hier weiss) |
| vlink="#FF0000" |
bereits besuchte Hyperlinks (hier rot) |
| alink="#FFFF00" |
Farbe eines aktiven Links (hier gelb) |
| bgcolor="00FF00" |
Farbe des Hintergundes (hier grün) |
| background="bild.gif |
URL dea Hintergrundbildes |
| bgproperties="fixed" |
Hintergrunnd scrollt nicht mit |
| scroll=no |
Keine Scrollbalken am rechten Rand |
Ganz vereinfacht sieht der HTML-Code für eine Webseite
also so aus:
<html>
<head>
<titel> Titel der Seite </titel>
</head>
<body text="#000000" bgcolor="A9D8BD">
Seiten Inhalt mit Text und Grafiken
</body>
</html> |
:: anzeigen :: :: on top :: |
| Textformatierung |
|
Mit dem Tag <font> ... </font> legt man die Eigenschaften
für einen Text fest.
Schriftart, Farbe, Größe und Stil können festgelegt
werden.
| face="Arial" |
Schriftart |
| color="000000" |
Farbe des Textes |
| size="2" |
Größe des Textes |
weiterhin gibt es noch andere Tags, die das Aussehen des
Textes verändern können.
Ist nützlich wenn man einzelne Textelemente mal CSS formatieren
möchte.
| <b> bold </b> |
bold |
| <i> italic </i> |
italic |
| <u> unterstrichen </u> |
unterstrichen |
| <s> durchgestrichen </s> |
durchgestrichen |
| <em> hervorheben </em> |
hervorheben |
| <cite> Zitat </cite> |
Zitat |
| <kbd> Tastatur </kbd> |
Tastatur |
| <tt> teletype </tt> |
teletype |
Der Code könnte dann zum Beispiel so aussehen.
<html>
<head>
<titel> Titel der Seite </titel>
</head>
<body text="#000000" bgcolor="A9D8BD">
Seiten Inhalt mit Text und Grafiken
<font><b> bold </bold></font>
<font><i> italic </i></font>
<font><kbd> Tastatur </kbd></font>
</body>
</html> |
:: anzeigen ::
Textausrichtung auf einer Seite wird mit dem Tags "align"
vorgenommen. Vier verschiedene Anzeigeformate:
| align="right" |
Textausrichtung rechts |
| align="left" |
Textausrichtung links |
| align="center" |
Textausrichtung mittig |
| align="justify" |
Text im Blocksatz |
Manchmal sind auch Sonderzeichen nötig. Damit diese Zeichen
auch überall korreckt angezeigt werden, muss man dafür
den Code direkt im HTML-Code einbinden.
Hier einige Beispiele:
| Ä |
Ä |
< |
< |
| ä |
ä |
> |
> |
| Ö |
Ö |
& |
& |
| ö |
ö |
" |
" |
| Ü |
Ü |
€ |
€ |
| ü |
ü |
© |
© |
| £ |
£ |
¥ |
¥ |
| ™ |
™ |
— |
— |
| ß |
ß |
® |
® |
Um eine Liste bzw. Aufzählung zu realisieren gibt es den
Tag <ul> ... </ul> bzw. <ol> ... </ol>
in Verbindung mit dem Tag <li>
Eine untergeordnete Liste mit jeweils einem Punkt vor jedem
Eintrag könnte so aussehen:
<html>
<head>
<titel> Titel der Seite </titel>
</head>
<body text="#000000" bgcolor="A9D8BD">
<p>Seiten Inhalt mit Text und Grafiken</p>
<ul>
<li> Eintrag 1
<li> Eintrag 2
</ul>
</body>
</html> |
:: anzeigen ::
Eine Liste mit Aufzählung (1 2 3 4 ...) vor jedem Eintrag
könnte so aussehen:
<html>
<head>
<titel> Titel der Seite </titel>
</head>
<body text="#000000" bgcolor="A9D8BD">
<p>Seiten Inhalt mit Text und Grafiken</p>
<ol>
<li> Eintrag 1
<li> Eintrag 2
</ol>
</body>
</html> |
:: anzeigen :: ::on top :: |
| Links |
|
Hyperlinks oder einfach nur Links genannt sind das A und
O im Internet. Mit Hilfe dieser Links "surft" man
also durchs WWW. Eingefügt können Links entweder
ganz normal al Text oder auch als Bild bzw. Grafik.
Der Tag für einen Link lautet <a> ... </a>
in Verbindung href=" ... " .
Links verweisen meistens auf andere Seiten innerhalb des Internets.
Links können aber auch Dateien verweisen, welche dann
ausgeführt werden bzw. gedownloadet werden. Auch Links
innehalb eines Dokumentes bzw. Seite sind möglich.
| <a href="seite1.htm"> Seite1</a> |
Link innerhalb einer Internetpräsenz |
| <a href="http://www.viggo.de">Viggo</a> |
Link extern zu einer anderen Adresse |
| <a href="datei.zip">Download</a> |
Downloadlink fü eine Datei |
| <a href="mailto:viggo@viggo.de">Email</a> |
Link zum Schreiben einer Email |
| <a href="#top">nach oben</a> |
Link zum Seitenanfang |
| <a href="Absatz">Absatz</a> |
Link zu einer bestimmten Seitenstelle |
Bei der letzen Art des Links muss außerdem an die Stellen
wohin der Link verweisen soll natürlich der "Markierungstag"
gesetzt werden. Zum Beispiel <a name="Absatz"></a>.
So kann man innerhalb einer Seite weiterverweisen, siehe bei
diesem Dokument hier.
Um nun noch zu definieren wohin dieser Link ausgeführt
werden soll gibt es noch eine "Erweiterung" zum <a>
... </a>, und zwar target (Ziel):
| target="_self" |
Link wird im eigenen Frame oder Fenster
ausgeführt |
| target="_blank" |
Link wird in einem neuen Fenster geöffnet |
| target="_parent" |
Link wird in dem darüberliegendem Frame
geladen |
| target="_top" |
Link wird über das gesamte Browserfenster
geladen |
| target="framename" |
Link wird in dem benannten Frame ausgeführt |
Beispiel: <a href="http://www.viggo.de" target="_blank"
>HP-Zubehör</a>
Normalerweise werden bei keiner Angabe eines Zieles alle Links
im gleichen Fenster oder Frame geöffnet.
Will man aber erreichen, das alle Links immer ein ein und
demselbem Ziel geöffnet werden, kann man im <head>
... </head> Bereich ein Standardziel eintragen.
Der Code lautet: <base target=" ... ">.
Um Hyperlinks auch mit Bildern oder Grafiken zu realisieren
braucht man noch eine zusätzlichen Tag zum Einfügen
von Bildern. Dieser Tag funktioniert natürlich auch ohne
Link, sprich nur zum Einfügen von Bildern ein eine Webseite.
<img src="bild.gif"> (wobei man dort den Pfad
und Namen der Bilddatei abgeben muß.)
In Verbindung mit einem Link kann der Code dann so aussehen:
<a href="http://www.viggo.de" target="blank"><img
src="bild.gif">
:: on top ::
|
| Bilder & Grafiken |
|
Wie schon im Kapitel vorher gesehen fügt man Bilder
oder Grafiken mit dem <img>tag ein. Wobei dan die Quelle
(Source) bzw. Pfad der Bilddatei angegeben werden muß.
<img src="../bilder/bild1.gif> oder ähnlich.
Es gibt hauptsächlich 2 Formate von Bildern oder Grafiken,
die in Webseiten eingesetzt werden.
gif = Graphics Interchange Format
(256 Farben, können tranparent, Animationen möglich)
jpeg oder jpg = werden meistens für Fotos verwendet,
weil damit 16,7 Millionen Farben gargestellt werden können.
Auch bei den Bildern gibt es noch einige Zusatzattribute
| src="foto.jpeg" |
Quelle des Bildes oder der Grafik |
| border="1" |
Rahmen rund ums Bild |
| width="10" height"20" |
Breite & Höhe des Bildes in Pixeln |
Beispiel HTML-Code mit eingefügtem Bild .
|
<html>
<head>
<titel> Titel der Seite </titel>
</head>
<body text="#000000" bgcolor="A9D8BD">
<p>Seiten Inhalt mit Text und Grafiken</p>
<ol>
<li> Eintrag 1
<li> Eintrag 2
</ol>
<p><img src="../../images/logo.jpeg"
width="65 height"65"></p>
<p><img src="../../images/logo.jpeg"
width="65 height"65"border=1"></p>
</body>
</html>
|
:: anzeigen :: :: on top :: |
| Tabellen |
|
Tabellen sind nicht nur Aufreihungen von Spalten und Zeilen,
sondern auch beliebtes Formatierungshilfsmittel.
Mit Tabellen kann man sich eine Webseite sehr schön und
einfach aufteilen.
Tabellen werden mit dem <table>><tr><td>
... </td></tr></table>tag eingebunden.
Tabellen werden mit dem jeweiligen Tag in Zeilen und Spalten
unterteilt. Weiterhin gibt es noch viele andere Attribute
um eine Tabelle zu gestalten.
| <table> ... </table> |
Tabelle gesamt |
| <tr> ... </tr> |
eine Zeile |
| <td> ... </td> |
eine Spalte |
| border="1" |
Tabellenrahmen |
| bordercolor="#000000" |
Tabellenrahmenfarbe |
| width="250" |
Breite der Tabelle |
| height="50" |
Höhe der Tabelle |
| cellspacing="2" |
Abstand der einzelnen Zellen |
| cellpadding="2" |
Abstand des Zelleninhalts zum Rahmen |
| bgcolor="#A9D8BD" |
Hintergrundfarbe der Tabelle oder Zelle |
| background="grafik.gif" |
Hintergrundbild der Tabelle oder Zelle |
| align=" ... " |
Ausrichtung der Tabelle (center, left, right) |
So könnte der HTML-Code einer Webseite aussehen, die zwei
Tabellen enthält.
|
<html>
<head>
<titel> Titel der Seite </titel>
</head>
<body text="#000000" bgcolor="A9D8BD">
<p>Tabelle mit schwarzen Rand<br>
</p>
<table width="250" border="1"
cellspacing="0" cellpadding="2"
height="50" bordercolor="#000000">
<tr>
<td>Zelle 1 - 1</td>
<td bgcolor="#FFFF00">Zelle 1 - 2</td>
</tr>
<tr>
<td background="../../images/table_nav_bg.jpeg">Zelle
2 - 1</td>
<td>Zeille 2 -2</td>
</tr>
</table>
<p>Tabelle ohne sichtbaren Rand</p>
<table width="250" border="0"
cellspacing="0" cellpadding="2"
height="50">
<tr>
<td>Zelle 1 - 1</td>
<td background="../../images/table_nav_bg.jpeg">Zelle
1 - 2</td>
</tr>
<tr>
<td bgcolor="#FF0000">Zelle 2 - 1</td>
<td>Zeille 2 -2</td>
</tr>
</table>
</body>
</html>
|
:: anzeigen :: :: on top :: |
| Frames |
|
Frames werden ganz normal in einer HTML-Webseite angegeben.
Wobei dann diese Frameseite aus mehreren anderen HTML-Seiten
besteht.
Diese Angaben werden innerhalb des <frameset> ... </frameset>tags
gemacht. In diesem Tag stehen dann wieder die <frame>
... </frame>Tags, welche die einzelnen Webseiten angeben
aus denen die übergeordnete Frameseite besteht.
Mit Frameseiten kann eine Navigation erreichen, so dass zum
Beispiel die Links im linken Teil der angezeigtem Seite stehen
und beim Weiterklicken sich nur der rechte Teil der Webseite
ändert. Aber erst einmal die notwendigsten Tags und Attribute.
| <frameset> ... </frameset> |
beinhaltet die Frameseiten |
| <frame> ... </frame> |
einzelne Frameseite |
| name="links" |
Name des einzelnen Frames |
| scr="seite1.htm" |
Quelle bzw. Pfad der Frameseite |
| frameborder="yes" oder "no" |
Framerahmen ja oder nein |
| border="1" |
Breite des Rahmens |
| bordercolor="FF0000" |
Farbe des Rahmens |
| noresize |
Größe vom Browser nicht änderbar |
| scrolling="no" oder "yes" |
Scrollbalken ja oder nein |
| target="rechts" |
In welchen Frame die Links geladen werden
sollen |
Für eine Frameseite braucht man also eigentlich mindestens
drei Seiten. Die eigentliche Frameseite ansich und dann die
beiden Seiten aus denen die Frameseite besteht.
In dem Beispiel heißt die Frameseite "sample_html_70.htm"
und besteht zunächst aus "sample_html_71.htm"
als linker Teil und "sample_html_1.htm" als rechter
Teil.
Der Code der Frameseite könnte dann so aussehen.
|
<html>
<head>
<titel> Titel der Seite </titel>
</head>
<frameset cols="158,1102" rows="*"
bordercolor="#FF0000" border="1"
framespacing="1">
<frame name="links" src="sample_html_71.htm"
scrolling="NO">
<frame name="rechts" src="sample_html_1.htm"
scrolling="AUTO">
</frameset>
<noframes>
<body bgcolor="#FFFFFF" text="#000000">
</body>
</noframes>
</html>
|
Hier der HTML-Code der linken Frameseite mit Zielangaben der
Links, im den Seiteninhalt in rechten Teil der Webseite zu ändern.
Die Seiten im rechten Teil der Frameseite können beliebige
Webseite innerhalb der eigenen Webpräsenz sein oder aber
auch externe Seiten:
|
<html>
<head>
<titel> Titel der Seite </titel>
</head>
<body text="#000000" bgcolor="A9D8BD">
<p>Frameseite</p>
<p> </p>
<p><a href="sample_html_1.htm" target="rechts">Link
1</a></p>
<p><a href="sample_html_2.htm" target="rechts">Link
2</a></p>
<p><a href="sample_html_3.htm" target="rechts">Link
3</a></p>
</body>
</html>
|
zusammen sieht es dann so aus
:: anzeigen :: :: on top :: |
|
|
| |
|
|
|
