Hybertextmarkupllanguage
HyperTextMarkupLanguage
Die eigene Web-Seite in 10 Minuten
1.1 Welche Programme braucht man ?
Editor (aus dem Menü Zubehör)
1.2 Erstellen eines Grundgerüstes:
Steueranweisungen in HTML: sogen. “Tag”: z.B.: <XYZ> =Einleitungstag
</XYZ>=Abschlußtag
Die DOCTYPE-Steueranweisung dokumentiert die in der Web-Seite verwendete HTML-Version:
<!DOYTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.
0//EN”>
Eigentlicher Beginn:
<HTML>
Im Anschluß: Kopfteil: HEADER:
Gibt noch keine Anweisungen für eingentl. Seite an
<HEAD>
Wichtigste Anweisung im Kopfteil:
<TITLE></TITLE>
Danach: Kopfteil-Ende:
</HEAD>
Nun: Beginn des Body-Teiles:
<BODY>
Später Anweisungen für die eigentliche Web-Seite; Dann: Ende des Body-Teiles:
</BODY>
Und schließlich:
</HTML>
Vollständiges Grundgerüst nochmals zusammengefasst:
<!DOYTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.0//EN”>
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
TIP.: Ein Grundgerüst abspeichern, um nicht immer alles neu schreiben (und merken) zu müssen.
2. Was ist eigentlich HTML ?
2.
1 Der Anfang: HTML 1.0
HTML und WWW wurden im Mai 1991 auf Rechnern des Kernforschungszentrum CERN geboren. W3C – World Wide Web-Consortium war Mitbegründer.
2.2.Die 2.
Stufe – HTML 2.0
Wurde nun erst richtig populär. Erweiterung diverser Elemente. Erst 1995.
2.3 Die geteilte Stufe 3.
x
Viele Untergruppen von HTML 3.0. Ab Mai 1996
2.4 Up to date: Die Version 4
Seit 1997; Viele Neuheiten: unter anderem: Frames (= spezielle Rahmen im Internet)
2.5 Allgemeines zu HTML
HTMl ist das Zentrum im WorldWideWeb. Es gibt zwar auch noch andere Internet-Sprachen, diese sind aber um ein Vielfaches komplizierter.
3. Die elementaren HTML-Grundregeln
3.1 Das Grundgerüst:
<!DOYTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.0//EN”>
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
So sieht eine leere Web-Seite aus. Eingefügt werden können noch Kommentare, die dann nur im “Quelltext”, also im HTML-Skript erscheinen, nicht aber auf der Web-Seite.
<!-- TEXT -->
Statt TEXT kann ein belieber Text eingesetzt werden.
3.2 Überschriften für die Übersichtlichkeit:
TYP
BESCHREIBUNG
<H1>...</H1>
Überschrift 1. Ordnung
<H2>.
..</H2>
Überschrift 2. Ordnung
<H3>...
</H3>
Überschrift 3. Ordnung
<H4>...</H4>
Überschrift 4. Ordnung
<H5>.
..</H5>
Überschrift 5. Ordnung
<H6>...
</H6>
Überschrift 6. Ordnung
3.3 Lokale und Weltweite Verweise
Grundstruktur: <A îTyp”îBezeichner”>Verweistext</A>
Lokale Verweise = Verweise auf eine andere Stelle in der selben Seite
Von dort wo verwiesen werden soll:
<A HREF=”#Verweisname”>Verweistext</A>
Dort wo hin verwiesen wird:
<A NAME=”Verweisname”>Text auf den verwiesen wurde</A>
Beispiel:
<!DOYTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.0//EN”>
<HTML>
<HEAD>
<TITLE>Verweise</TITLE>
</HEAD>
<BODY>
Hier steht ganz normaler Text. Hier steht ganz normaler Text. Hier steht ganz normaler Text.
Hier steht ganz normaler Text. Hier steht ganz normaler Text.
<A HREF=”#Verweis1”>Dieser Text verweist auf den Verweis1.</A>
Hier steht ganz normaler Text. Hier steht ganz normaler Text. Hier steht ganz normaler Text.
Hier steht ganz normaler Text. Hier steht ganz normaler Text.
<A NAME=”Verweis1”>Auf diesen Text wurde Verwiesen !</A>
</BODY>
</HTML>
Weltweite Verweise = Verweise auf andere Web-Seiten
Von dort wo verwiesen wird:
<A HREF=”https://www.irgendeineseite.com”>https://www.irgendeineseite.
com</A>
Verweise auf eine andere Internet-Seite im selben Verzeichnis:
<A HREF=”irgendeineseite.htm”>Verweis auf Irgendeineseite</A>
Verweis als E-Mail = Bei Klick auf Verweis: automatischer Start der E-Mail-Schreib-Software
<A HREF=”mailto:ich@du.com”>E-Mail an Ich</A>
3.4. Seiten-Layout mit Farben
OPTION
BEDEUTUNG
BGCOLOR
Bildschirmhintergrund
TEXT
Textfarbe
LINK
Farbe von Verweisen
VLINK
Farbe von Verweisen zu bereits besuchten Zielen
ALINK
Farbe von Verweisen beim Anklicken
Anwendung:
<BODY BGCOLOR=”Farbe1” TEXT=”Farbe2” LINK=”Farbe3” VLINK=”Farbe4” ALINNK=”Farbe5”>
Seitenprogramierung
</BODY>
FARBANGABE
BESCHREIBUNG
black
Schwarz
maroon
Kastanienbraun, beziehungsweise ein dunkles Rot
green
Grün
olive
Olivgrün
navy
Marine/Navyblau
purple
Purpurrot
teal
Dunkler Cyanton
gray
Grau
silver
Silber
red
Rot
lime
Heller Grünton
yellow
Gelb
blue
Blau
fuchsia
Lilaton
aqua
Aqua, ein heller Blauton
white
Weiß
3.5 Seiten-Layout mit Text- und Absatzformatierung
Befehle zur Texthervorhebung:
<I></I> .
.. kursiv
<B></B> ... fett
<U></U> .
.. unterstrichen
<SUB></SUB> ... tiefgestellt
<SUP></SUP> .
.. hochgestellt
<S></S> ... durchgestrichen
<STRONG></STRONG> .
.. fett
<EM></EM> ... allg.
Hervorhebung
<CITE></CITE> ... Hervorhebung für Zitate
<BLOCKQUOTE></BLOCKQUOTE> ...
Hervorhebung für Zitate
<QUOTE></QUOTE> ... Hervorhebung von Quellcodes
<VAR></VAR> ...
Hervorhebung von Variablennamen
Schriftgrößen:
<FONT SIZE=[Größe]>
Möglich von (-7) bis 7
Absätze und Zeilenumbrüche:
STEUERANWEISUNG
WIRKUNG
<P>
Neuer Absatz
</P>
Absatzende
<BR>
Zeilenumbruch
<NOBR></NOBR>
Kein Zeilenumbruch in diesem Abschnitt
<WBR>
Wenn Zeilenumbrcuh notwendig, dann hier
Ausrichtung:
<CENTER></CENTER> ... Eingeschlossener Text wird zentriert dargestellt
<DIV ALIGN=left> ...
Eingeschlossener Text wird linksbündig dargestellt (ursprünglich)
<DIV ALIGN=right> ... Eingeschlossener Text wird rechtsbündig dargestellet
Trennlinien:
Durch Einfügen des HTML-Tags <HR> wird eine Trennlinie eingefügt.
Die Breite kann durch Ergänzen von WIDTH=[Prozentangabe]% bestimmt werden.
Z.
B.: <HR WIDTH=75%>
Die Dicke kann durch Ergänzen von SIZE=[Liniendicke] bestimmt werden.
Z.B.: <HR SIZE=28>
3.6 Bilder sagen mehr: Grafiken einbinden
Zwei Grafikformate im WWW: GIF und JPEG (=JPG)
Einbindung einer Grafik:
<IMG SRC=[Dateiname]>
Verweis auf eine Grafikdatei im gleich Verzeichnis (in diesem Fall “foto.
jpg”):
<IMG SRC=”foto.jpg”>
Grafikdatei aus einem anderen Verzeichnis einbinden:
Bsp.:<IMG SRC=”file:///C:/ICH/DU/foto.jpg”>
In diesem Fall: Die Datei foto.jpg aus dem Verzeichnis ICH aus deren Unterverzeichnis DU auf dem Laufwerk C.
Bsp.
: <IMG SRC=”https://www.irgendeineseite.com/verzeichnis/foto.jpg”>
Größenangaben für Grafiken:
<IMG SRC=”foto.jpg” WIDTH=[Größenangabe] HEIGHT=[Größenangabe]>
Größenangabe in Pixel !
Tip: Originalgröße einer Grafik oder Breite und Höhe im exakten Verhältnis zueinander angaben, da sonst (vermutlich unerwünschte) Verzerrungen auftreten können.
Ausrichtung:
<IMG SRC=”foto.
jpg” ALIGN=left>
<IMG SRC=”foto.jpg” ALIGN=left>
<IMG SRC=”foto.jpg” ALIGN=center>
<CENTER><IMG SRC=”foto.jpg”></CENTER>
Verweissensitive Grafiken:
Einfach durch Einbindung in Verweis möglich.
Bsp.: <A HREF=”https://www.
orf.at”><IMG SRC=”orf.gif”></A>
3.7 Ordnung, die Erste: Listen einsetzen
Die Bullet-Liste = durch Punkte aufgelistet
<UL>
<LI>Punkt 1 der Tagesordnung: Ansprache</LI>
<LI>Punkt 2 der Tagesordnung: Mittagspause</LI>
<LI>Punkt 3 der Tagesordnung: Kaffee</LI>
</UL>
Die numerische Liste = Liste durch 1., 2., 3.
,... aufgelistet
<OL>
<LI>Punkt 1 der Tagesordnung: Ansprache</LI>
<LI>Punkt 2 der Tagesordnung: Mittagspause</LI>
<LI>Punkt 3 der Tagesordnung: Kaffee</LI>
</OL>
Listen römisch numerien
<OL TEYPE=i>
<LI>Punkt 1 der Tagesordnung: Ansprache</LI>
<LI>Punkt 2 der Tagesordnung: Mittagspause</LI>
<LI>Punkt 3 der Tagesordnung: Kaffee</LI>
</OL>
Listen alphabetisch numerieren
<OL TYPE=a>
<LI>Punkt 1 der Tagesordnung: Ansprache</LI>
<LI>Punkt 2 der Tagesordnung: Mittagspause</LI>
<LI>Punkt 3 der Tagesordnung: Kaffee</LI>
</OL>
3.8 Ordnung, die Zweite: Tabellen einsetzen
<TABLE> ..
. Eröffnung der Tabelle
<TR> ... Eröffnung der Zeile
<TD> ..
. Eröffnung der Spalte
</TD> ... Schließung der Spate
<TD></TD> ..
. kann beliebig oft (wieviele Spalten gebraucht wird) verwendet werden
</TR> ... Schließung der Zeile
<TR></TR> ..
. kann beliebig oft (wieviele Zeilen gebraucht wird) verwendet werden
</TABLE> ... Schließung der Tabelle
Bsp:
<TABLE>
<TR><TD>Spalte 1/Zeile 1</TD>
<TD>Spalte 2/Zeile 1</TD>
<TD>Spalte 3/Zeile 1</TD>
</TR><TR>
<TD>Spalte 1/Zeile 1</TD>
<TD>Spalte 2/Zeile 2</TD>
<TD>Spalte 3/Zeile 3</TD>
</TR><TABLE>
Allg. Infos zu Tabellen:
Im Tag <TABLE> muß auch noch die Rahmen-Dicke angegeben werden, da ansonsten nur unsichtbare Tabellen entstehen.
Z.B.: <TABLE BORDER=5>
Außerdem gelten in der Tabelle die selben Gesetzte wie in der normalen Seite. D.h.: Textformatierung, Grafikeinbindung und dgl.
sind kein Problem mehr.
Höhe und Breite von Tabellen angeben
<TABLE WIDTH=[Größe] HEIGHT=[Größe]>
3.9 Special-Effects mit ...
Hintergrundgrafiken
Grundsätzlich gleich mit normalen Grafiken, zum Einfügen:
<BODY BGCOLOR=black TEXT=yellow BACKGROUND=”foto.
jpg”>
In diesem Fall die Hintergrundgrafik “foto.jpg”.
Marquee
Text scrollt von rechts nach links, wird nur von MS Internet Explorer unterstützt.
<MARQUEE></MARQUEE>
Blink
Text blinkt.
<BLINK></BLINK>
4. Seitenaufteilung in Segmente – Frames
4.
1 Was sind Frames ?
Die Möglichkeit den Anzeigebereich des Browsers in verschiedene, frei definierbare Segmente aufzuteilen. Segmente werden Frames genannt.
4.2 Wie werden Frames in ein HTML-Projekt integriert ?
Erstellen einer Index-Datei zum Aufteilen des Browseranzeigefensters
Grundgerüst dieser Index-Datei:
<!DOYTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.0//EN”>
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<FRAMESET>
Framedefinitionen
</FRAMESET>
</HTML>
Kein Body-Teil !
Framedefinitionen
Reihen = Quer-Frames
Ergänzen von ROWS=”[Prozent]%,[Prozent]%” im Bereich <FRAMESET>
Spalten
Ergänzen von COLS=”[Prozent]%,[Prozent]%” im Bereich <FRAMESET>
Z.B.
: <FRAMESET ROWS=”25%,75%”>
oder <FRAMESET COLS=”45%,55%”>
4.3 Der Inhalt von Frames
Wird einfach durch die Erweiterung von <FRAME SRC=”[Name]”>
Z.B.:
<!DOYTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.0//EN”>
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<FRAMESET ROWS=”25%,75%”>
<FRAME SRC=”frame1.html”>
<FRAME SRC=”frame2.
html”>
</FRAMESET>
</HTML>
In diesem Fall wird im 1. Frame (dessen Name ist als Frame1 definiert) die Datei frame1.html und im 2. Frame (=Frame2) die Datei frame2.html dargestellt. Die Dateien müssen aber noch erstellt werden.
Die Dateien, die in den Frames dargestellt werden sollen, können ganz normal wie jede andere HTML-Seite erstellt werden.
4.4 Verweise zu anderen Frames
Links werden normalerweise im selben Fenster dargestellt. Wenn das nicht geschehen soll muss man den Frames einen Namen geben.
Z.B.
:
<!DOYTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.0//EN”>
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<FRAMESET>
<FRAME SRC=”frame1.html” NAME=”Frame1”>
<FRAME SRC=”frame2.html” NAME=”Frame2”>
</FRAMESET>
</HTML>
Und beim Link in der HTML-Datei (nicht in der Index-Datei) muss den
TARGET=[Name des Frame in dem gelinkte Seite dargestellt werden soll]
Z.B.:
Mitten in einer normalen HTML-Datei:
<A HREF=”seite1.
html” TARGET=”Frame1”>Verweis-Text</A>
Reservierte Framenamen
RESERVIERTE FENSTERNAMEN
BEDEUTUNG
_self
Der URL wird im gleichen Frame dargestellt wie der Verweis.
_parent
Der URL wird im übergeordneten Frame angezeigt. Falls es kein übergeordnetes Fenser gibt, wird das Verweisziel in einem neuen Fenster angezeigt (ohne Frame-Struktur)
_blank
Der URL wird in einem neuen Browser-Fenster angezeigt. Dieses neue Browser-Fenster hat defaultmäßig keine Frame-Struktur.
_top
Der URL wird im vollen Fenser des Browsers angezeigt. Die Frame-Struktur verschwindet.
| Anmerkungen: |
| impressum | datenschutz
© Copyright Artikelpedia.com
