HTML und Javascript

HTML und Javascript


 
Aufbau und Funktion von HTML
Dynamic HTML (DHTML)
JavaScript


Aufbau und Funktion von HTML

HTML steht für Hypertext Markup Language. Es handelt sich um eine Seitenbeschreibungssprache (ähnlich dem Schreibprogramm M/Text), mit der WWW-Dokumente erstellt werden.
Schriftart, Schriftgröße, Textformatierungen, Darstellung von Bildelementen, Farbdefinitionen, Links u.a. lassen sich so beschreiben. HTML ist ein offener Standard und wird ständig weiterentwickelt. HTML Dokumente sind plattformunabhängig, d.h. sie können sowohl von einem Windows-PC als auch von einem Apple-PC dargestellt werden. Es wird nur ein sog. Webbrowser dafür benötigt. 
Adressen von HTML-Dokumenten fangen mit http:// an (
Internetprotokoll zur Darstellung von HTML-Dokumenten) und enden mit dem Suffix *.html bzw. *.htm 
Von der Bedienung her erinnert die HTML-Technik an die Windows-Hilfen: Über markierte Texte oder Bildelemente wird man per Mausklick an die gewünschte Stelle weitergeleitet. 

Wenn Sie sich mit Hilfe des Browsers den Quellcode (auch als Quelltext oder "Page Source" bezeichnet) einer HTML-Seite anzeigen lassen oder eine solche Datei mit einem ganz normalen Text-Editor öffnen, sehen Sie den HTML-Programmcode. Der Quelltext enthält Steuersymbole (auch Tags genannt), die in spitzen Klammern stehen.
Was kann HTML?
Hier sehen Sie ein paar Beispiele mit Quellcode:
 
Darstellung im Browser-Fenster: So sieht es im Quellcode aus (Tags blau markiert):
Wenn Sie die rechtsstehenden Zeilen mit Hilfe eines Editors eintippen und als Textdatei 'testseite.htm' speichern, stellt der Browser eine Seite mit 'Hallo. Das ist eine Testseite.' und der Fensterüberschrift 'HTML erste Testseite' dar.  <html>
<head><title>HTML erste Testseite</title></head>
<body>Hallo. Das ist eine Testseite.</body>
</html>
Texte können linksbündig, rechtsbündig  und zentriert  dargestellt werden Texte k&ouml;nnen linksb&uuml;ndig,
<div align="right">rechtsb&uuml;ndig</div>
<center>und zentriert</center>
dargestellt werden
Sonderzeichen werden ersetzt: 
Ä ä Ö ö Ü ü ß  &  
&Auml; &auml; &Ouml; &ouml; &Uuml; &uuml; &szlig; &amp; 
Schriftart und Größe:

1-fach verkleinert
normal (eingestellte Standardschrift)
1-fach vergrößert
2-fach vergrößert

 


 
<p><font size="-1">1-fach verkleinert</font></p>
<p>normal</p>
<font size="+1">1-fach vergr&ouml;&szlig;ert</font>
<font size="+2">2-fach vergr&ouml;&szlig;ert</font>
Unterschiedliche Überschriften: 
Überschrift 5
Überschrift 6


 

<h5>&Uuml;berschrift 5</h5>
 
<h6>&Uuml;berschrift 6</h6>
Trennlinien: 

Trennlinien: 
<hr>  
Verschiedene
Farben für den
Text
<font color="#000000">Verschiedene</font>
<font color="#ff0000">Farben f&uuml;r den</font>
<font color="#ffd700">Text</font>
normal 
fett
kursiv
unterstrichen

normal
<b>fett</b>
<i>kursiv</i>
<u>unterstrichen</u>

Auch Tabellen sind möglich: 
Tabelle  Spalte 1  Spalte 2 
Reihe 1  Wert 1.1  Wert 1.2 

 

<table border="0" cols="3" width="100%" bgcolor="#fff5ee" >
<tr><td>Tabelle</td>
    <td>Spalte 1</td>
    <td>Spalte 2</td></tr>
<tr><td>Reihe 1</td>
    <td>Wert 1.1</td>
    <td>Wert 1.2</td></tr>
</table>

 
Über Links (markierte Texte oder anklickbare Bilder) gelangen Sie zu anderen HTML-Dokumenten, z.B: 
http://www.google.de/
 
oder Sie springen innerhalb der Seite an eine andere Position Seitenanfang.
 
 
&Uuml;ber Links (markierte Texte oder anklickbare Bilder) gelangen Sie zu anderen HTML-Dokumenten
<a href="http://www.google.de/">http://www.google.de</a>,

 
oder springen innerhalb eines Dokumentes an eine andere Position <a href="#Beginn">Seitenanfang</a>
 
 
Auch Formularfelder zur Eingabe sind möglich: 

Name
Adresse

 

 
<form action="mailto:email_address" method="post"> 
<input type="text" name="realname" size="15"><b>Name</b><br> 
<input type="text" name="email" size="15"><b>Adresse</b>
</form>

 

Dynamic HTML (DHTML)

Dynamic HTML bedeutet, dass die in HTML dargestellten Seiten nicht nur statisch dargestellt werden, sondern, dass in die Seiten Bewegung/Dynamik gelangt.

Dadurch werden die Seiten etwas aufgepeppt. Mit DHTML sind erstmals verschiedene Ebenen einer HTML-Seite möglich. Solche Ebenen können von einzelnen Elementen (Text, Bilder) bis zu komplett eigenständigen Seiten alles mögliche enthalten. Man könnte sagen es sind mehrere Schichten einzelner HTML-Seiten in nur einem HTML-Dokument. Jede Ebene besitzt individuelle Eigenschaften (Textgröße, Textfarbe, Position im Browserfenster, usw.) die über 'Cascading Style Sheets' (CSS) sehr frei definiert werden können. Dadurch, daß diese Ebenen mit ihren Eigenschaften und Inhalten durch JavaScript ansprechbar sind, kommt etwas Bewegung in die Sache. D.h. Logos, die durch den Bildschirm fliegen, einfliegende Links, Laufschriften, Menüsysteme, sind kein Problem mehr.

Beispiele zu DHTML, können Sie sich hier ansehen.
 

JavaScript

Mit der Erscheinung des Netscape Browser 2.0 wurde u.a. eine neue Programmiersprache für das Internet eingeführt, die später den Namen 'JavaScript' erhielt.
JavaScript kann man nicht mit der Programmiersprache Java vergleichen, allenfalls dem Namen nach.
JavaScript ist eine eigenständige, kompakte und objektorientierte Skriptsprache, die vom Anwender nur geringe Programmierkenntnisse abverlangt, da sie recht einfach gehalten wurde. Mit JavaScript sollten dem Webdesigner mehr Möglichkeiten gegeben werden, HTML-Seiten interaktiv zu gestalten.
JavaScript kann direkt in das HTML-Dokument eingebunden werden, oder in einer externen Datei referenziert werden.
Im Gegensatz zu Java-anwendungen muss bei der 'Verarbeitung' von JavaScript nichts kompiliert werden, sondern der Ablauf gestaltet sich wie bei einem normalen Programm-Code.
Wenn Sie bereits die angebotenen Animationen u.a. zum Internetexplorer angeschaut haben, ist Ihnen aufgefallen, dass die Animation selbständig weiterläuft.
Dies wurde mit JavaScript realisiert.
 
Wenn Sie sich noch ein paar Beispiele zu JavaScript anschauen wollen, dann klicken Sie sich durch die nach
folgenden Links.
 
Beispiele für zwei Textanimationen.
Beispiel für eine Grafikeinbindung.
Ausgefallener Hintergrund.
Hintergrundfarbe per Knopf wählen.
Ironische Virusmeldung.
"Flüchtende" Links.
 
Die o.a. Beispiele sind aber nur ein Bruchteil dessen, was mit JavaScript in Verbindung mit HTML/DHTML möglich ist.
Diese oder andere Animationen werden Ihnen bei einem Streifzug durch das WWW in vielfältiger Weise begegnen.
 
Zum Seitenanfang