HTML Die Programmiersprache des WWW Keine eigentliche Programmiersprache, sondern eher ´Seitenbeschreibungssprache´ systemübergreifend, plattformunabhängig

HTML

Die Programmiersprache des WWW

Keine eigentliche Programmiersprache, sondern eher ´Seitenbeschreibungssprache´

systemübergreifend, plattformunabhängig (im Idealfall) HTML-Text sieht

auf allen Rechnern/Rechnersystemen nahezu gleich aus

HyperText Markup Language

Hypertext kann an beliebigen Stellen auf andere Informationen verweisen (z.B. tiefer gehende Zusatzinformationen, Fremd-

worterklärungen, Index...), im Gegensatz zu einem Buch, bei dem man hinten nachschlagen muss

Johannes M. L. Pasquay

Werkzeuge

Ein einfacher (ASCI-)Texteditor, z.B. WordPad, MS Word

Ein HTML-Editor, z.B. Home-Site (Shareware),

Arachnophilia (Shareware), Hot Metal Pro, oder Frontpage, Phase V

Einen Browser, z.B. Netscape Navigator, MS Internet Explorer, Mosaic,Opera

Die Werkzeuge zum Erstellen einer Web-Seite


Und zum Betrachten der Seiten:

Syntax von HTML

... werden immer von spitzen Klammern eingeschlossen, also < und > (Tags)

Es gibt offene Tags, die einzeln stehen, z.B. 

... und es gibt geschlossene Tags, die immer als Paar auftreten, mit einem Anfangs-Tag und einem Ende-Tag, z.B.

 und 

Die Befehle in HTML – die Tags

Ende-Tags sind also immer durch einen Schrägstrich ( / ) gekennzeichnet


Syntax von HTML

Richtig: .... 

Falsch: .... 

Tags können ineinander verschachtelt sein, dürfen sich aber nicht überschneiden:


Tags

<HTML> </HTML> schließen ein Dokument ein


<HEAD> </HEAD> der Dokumenten-Kopf

<TITEL> </TITEL> der Dokumenten-Titel

<BODY> </BODY> der Hauptteil

 Zeilenumbruch

 Absatz

<H1...6> </H> verschiedene Überschriften

 Fettschrift

 Kursivschrift

 unterstrichen

weitere Tags

 Schriftart, -größe


<HR> Linien

<IMG SRC= ... > Grafik einfügen

<A HREF= ... > </A> Link (Verweis) einfügen

 Kommentar einfügen

<CENTER> </CENTER> Zentrier-Anweisung

<TABLE> </TABLE> umschließt eine Tabelle

<TR> erzeugt eine Tabellenzeile

<TD> erzeugt eine Tabellenzelle

Aufbau einer HTML-Seite

Der Kopf

(HEAD)

Der Körper

(BODY)


<HEAD> </HEAD>

<BODY> </BODY>

Inhalt einer Frontpageseite

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<meta name="GENERATOR" content="Microsoft FrontPage 4.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<title>HTML-Crash-Kurs</title>

</head>

<body bgcolor="#0000FF">

</body>

</html>


Beschreibung, die auf eine HTML-Seite der Version 4.0 hinweist.

Der Seiten-Titel

der Kopf

der Körper

Mit den Tags <HTML> und </HTML> wird die Seite „eingerahmt“.

gibt die Hintergrundfarbe an

hexadezimale Ziffern für Farbwerte

Eine hexadezimale Ziffer kann also 16 Zustände haben

Für jeden Farbwert (Rot oder Grün oder Blau) stehen 2 Ziffern zur Verfügung

Das macht 16 x 16 (= 256) mögliche Zustände pro Farbwert

0 (entspricht dezimal 0)










A (entspricht dezimal 10)

B (entspricht dezimal 11)

C (entspricht dezimal 12)

D (entspricht dezimal 13)

E (entspricht dezimal 14)

F (entspricht dezimal 15)

256 hoch 3 ergibt folglich 16,7 Mio. Farben


<body bgcolor="#0000FF">

S+W, Primär und Sekundärfarben


Kommentar (html)


<html>

<head>





</head>



<body bgcolor="#0000FF„ TEXT="#000000" LINK="#800000" VLINK="#800080">

</body>

</html>

Kommentar

Textfarbe Farbe der Links, der Verweise.Hintergrundfarbe

Kommentar (normal)


Überschrift (html)


<html>

<head>





</head>



<H1> <CENTER>Unsere erste Web-Seite</CENTER> </H1>

</body>

</html>

Überschrift (normal)


Linie (html)


<html>

<head>





</head>




<HR WIDTH="95%" ALIGN=CENTER>

 

</body>

</html>

Linie (normal)


Text 1 (html)


<html>

<head>





</head>





 

<CENTER> Willkommen auf der Test-Web-Seite des HTML-Crash-Kurses. In HTML zu programmieren ist ganz einfach.

Das werdet Ihr gleich sehen.</CENTER> </body>

</html>

Text 1 (normal)


Text 2 (html)






 <CENTER> Willkommen auf der Test-Web-Seite des HTML-Crash-Kurses. In HTML zu programmieren ist ganz einfach.

Das werdet Ihr gleich sehen.</CENTER>

Dieser Absatz ist linksbuendig ausgerichtet. Der Text ist fett. 

Was diesen Absatz ziert: Er ist zentriert. Der Text ist kursiv 

Dieser Absatz, oh wie schoen, ist am rechten Rand zu sehn. Der Text ist unterstrichen. </body>

</html>

Text 2 (normal)


Bild (html)









Dieser Absatz, oh wie schoen, ist am rechten Rand zu sehn. Der Text ist unterstrichen. 

<CENTER><IMG SRC="Bild1.gif" WIDTH="200" ALT="Das ist ein Bild"> </CENTER> </body>

</html>

Bild (normal)


Bildunterschrift (html)










<CENTER><IMG SRC="Bild1.gif" WIDTH="200" ALT="Das ist ein Bild"> </CENTER>

 

<CENTER>Ein Bild - wie nett.</CENTER> </body>

</html>

Bildunterschrift (normal)


Link (html)







 

<CENTER>Ein Bild - wie nett.</CENTER>

 

Nun wollen wir aber mal nicht vergessen, warum HTML Hyper Text Markup Language heisst: wegen der Verweise, den LINKS.

 

Unser erster Link verweist auf <A HREF="2.Web.htm">eine Seite von mir</A></body>

</html>

Link (normal)


E-Mail (html)







 


 


 

Unser erster Link verweist auf <A HREF="2.Web.htm">eine Seite von mir</A>

 

Und hier? Hier kann man mir eine

<A HREF="mailto:[email protected]">elektronische Post</A> schicken!</body>

</html>

E-Mail (normal)


Schriftattribute (html)







 


 


 

Unser erster Link verweist auf <A HREF="2.Web.htm">eine Seite von mir</A> 

Und hier? Hier kann man mir eine <A HREF="mailto:[email protected]">elektronische Post</A> schicken!

 

NA? War das etwa schwer? </body>

</html>

Schriftattribute (normal)


2. Webseite (html)


<html>

<head>





</head>

<BODY BGCOLOR="#00ffff" TEXT="#000000" LINK="#0000ff" VLINK="#800080" ALINK="#ff0000">

<H1> <CENTER>Unsere zweite Web-Seite</CENTER> </H1>


 

 

<A HREF="1.Web.htm">Zurück zur 1. Webseite</A>.

 

</body>

</html>

2. Webseite (normal)


Tabelle (html)


<BODY BGCOLOR="#00ffff" TEXT="#000000" LINK="#0000ff" VLINK="#800080" ALINK="#ff0000">

<H1> <CENTER>Unsere zweite Web-Seite</CENTER> </H1>


 

 

<A HREF="1.Web.htm">Zurück zur 1. Webseite</A>.

 

<CENTER><TABLE BORDER="1"></CENTER>

<TR>

<TD WIDTH="200">Überschrift 1</TD>

<TD>Überschrift 2</TD>

</TR>

<TR>

<TD WIDTH="200">Text 1</TD>

<TD>Text 2</TD>

</TR>

</TABLE> </body>

</html>

Tabelle (normal)

Documents

HTML Die Programmiersprache des WWW Keine eigentliche Programmiersprache, sondern eher ´Seitenbeschreibungssprache´ systemübergreifend, plattformunabhängig