HTML ist eine Auszeichnungssprache / Seitenbeschreibungssprache, mit der es möglich ist Internetseiten zu gestalten.

Transkript

1 HTML HTML ist eine Auszeichnungssprache / Seitenbeschreibungssprache, mit der es möglich ist Internetseiten zu gestalten. Hierfür bedient man sich sog. Tags zur Darstellung und Beschreibung einer Internetseite (Homepage). Befehlsaufbau HTML-Tag: <h1 align= center > Elementname Attribut Wer </h1> Endtag Grundstruktur <title>die Grundstruktur einer Internetseite</title> <body> <h1>homepage</h1> So kann die Grundstruktur einer Internetseite aussehen. </body> <h1> - <h6> In diesem<br>beispiel findet<br> <body bgcolor="#f2a04f > Farbnamen <body bgcolor="#d4d0c8"> <h1>schriftfarben</h1> <font color="#ffffff">weißer Text</font><br> <font color="#ff0000">roter Text</font><br> <font size="6" color="#00ff00">grüner Text</font><br> <font color="#0000ff">blauer Text</font><br> <font face="arial, courier" color="#0000ff">blauer Text</font><br> <font size="6" color="black">black</font><br> <font size="6" color="silver">silver</font><br> <font size="6" color="gray">gray</font><br> <font size="6" color="white">white</font><br> <font size="6" color="maroon">maroon</font><br> <font size="6" color="red">red</font><br> <font size="6" color="purple">purple</font><br> <font size="6" color="fuchsia">fuchsia</font><br> <font size="6" color="green">green</font><br> <font size="6" color="lime">lime</font><br> <font size="6" color="olive">olive</font><br> <font size="6" color="yellow">yellow</font><br> <font size="6" color="navy">navy</font><br> <font size="6" color="blue">blue</font><br> <font size="6" color="teal">teal</font><br> <font size="6" color="aqua">aqua</font><br>

2 <a href= name.htm >Hyperlink</a> <body bgcolor="#f2a04f" link="#000080" alink="#000080" vlink="#000080"> <!- Hier steht der einzeilige Kommentar -> <!- Hier steht der mehrzeilige Kommentar -> <!- Hier steht der mehrzeilige Kommentar //-> <hr width="50%" align="center"> <hr width="70%" align="center"> <hr width="90%" align="center"> <hr width="200" align="center"> Dies ist eine weitere horizontale Linie <hr width="50%" align="center"> Dies ist eine weitere horizontale Linie <hr width="50%" align="right" size="5"> Dies ist eine weitere horizontale Linie <hr width="50%" color="red" align="right" size="5"> <hr noshade size="5" width="50%" align="center"><br><br> <hr size="5" width="50%" align="center"> <i>worte</i> <u>formatiert</u> <b>hervorgehoben</b>. 10<sup>2</sup> <br> 10 2 H<sub>2</sub>O H 2 O Absatz <p>in diesem Beispiel werden</p> <p align="right">rechts:in diesem </p> <p align="center">zentriert: In diesem Beispiel werden </p> <p align="left">links: In diesem Beispiel </p> <p align="justify">blocksatz: In diesem Beispiel werden unterschiedliche </p>

3 <pre> _ \_/ _ _ _ \_/ _ _ _ _ _ _ _ _ _ _ _ _ </pre> <XMP> Sämtliche Sonderzeichen werden widergegeben auch #include<stdio.h> und Leerzeichen!!! </XMP> Sonderzeichen ä =ä (zählen)<br> Ä =Ä<br> Ü =Ü<br> Ö =Ö<br> ß =ß<br> & =&<br> < =<<br> > =><br> ½ =½<br> Copyright-Zeichen= (Entitynotation) = (Dezimalnotation) Pfeil links oder <br> Pfeil hoch oder <br> Pfeil rechts oder <br> Pfeil runter oder <br><br> oder <br> oder <br> oder <br> oder <br> oder <br> oder <br> ² Aufzählung: <ul> <li>blumen </ul> //ausgefüllter schwarzer Punkt <ul type="circle"> </ul> //leerer unausgefüllter Kreis

4 <ul type="disc"> </ul> //ausgefüllter schwarzer Punkt <ul type="square"> </ul> // ausgefülltes schwarzes Quadrat <ol> und Garten</li> // Zeilenumbruch <ol type ="A"> // zählt mit grossem A <ol type ="a"> // zählt mit kleinem A <ol type ="I">// zählt mit grossem I (Römisch) <ol type ="i">// zählt mit kleinem i (Römisch) <ol> <li>haus</li> <li>garten</li> <ol type="a"> <li>blumen</li> <li>baum</li> <li>veilchen</li> <li>zwerg</li> <ol type="i"> <li>klein</li> <li>mittel</li> <li>gross</li> <li>auto</li> <li>tiere</li> 1. Haus 2. Garten a. Blumen b. Baum c. Veilchen d. Zwerg I. klein II. mittel 3. Auto 4. Tiere III. gross

5 <ol start="18"> <li>haus</li> <li>garten</li> <ol type=a> <li>blumen</li> <li>unkraut</li> <li>tiere</li> <li>auto</li> <li>garage</li> <li>zaun</li> 18. Haus 19. Garten a. Blumen b. Unkraut c. Tiere 20. Auto 21. Garage 22. Zaun <ol type ="a" start="6"> und Garten</li> <li>garten</li> <li>blumen</li> f. Haus und Garten g. Garten h. Blumen <ol type ="I" start="15"> und Garten</li> <li>garten</li> <li>blumen</li> Aufzählung mit Bild XV. XVI. XVII. Haus und Garten Garten Blumen <ul> <img src="gelb.gif"> Haus<br> <img src="gelb.gif"> Garten<br> <img src="gelb.gif"> Blumen<br> <img src="gelb.gif"> Gruppeneinteilung machen (evtl. Gruppennamen vergeben und ein Person bzw. Personen bestimmen, die das Ergebnis zum Schluß der Gruppenarbeit präsentieren und/oder ein Ergebnis an den Moderator übergeben.<br> </ul> <ul style="list-style-image:url(gelb.gif)"> <li>haus</li> <li>garten</li> <li>blumen</li> <li>gruppeneinteilung machen (evtl. Gruppennamen vergeben und ein Person bzw. Personen bestimmen, die das Ergebnis zum Schluß der Gruppenarbeit präsentieren und/oder ein Ergebnis an den Moderator übergeben.</li> </ul> Bilder <img src="it.gif"> // normaler Link im gleichen Fenster <img src="it.gif" BORDER="5" HSPACE=70 VSPACE=10 width="160" height="80" align = "right">

6 Der Satz steht unten an der Grafik. <img src="it.gif" align="bottom"> Der Satz steht in der Mitte der Grafik.<img src="it.gif" align="middle"> Der Satz steht oben an der Grafik.<img src="it.gif" align="top"> Hyperlink (danach Übung mit Unterverzeichnisen <a href="030.htm">test</a> // Link in gleichen Fenster öffnen <a href="k/seite1.htm" target="mitte">1 </a> // von akt. Verz. in Unterverzeichnis k <li><a href="../int/htm.htm" target="mitte">was ist HTML?</a> //.. um aus Verzeichnis raus / um in neues Verzeichnis rein <a href="030.htm" target="_blank">seite 1</a> // Link in neuem Fenster öffnen <a href="#hallo" onclick="window.open('002.htm','','height=300, width=500, scrollbars, resizable=yes')">kleines Infofenster</a> // kleines Infofenster Anker <a name="oben"></a> <a href="032.htm#oben">oben</a> Bilderlink <A href="test.htm" target="_blank"><img src="it.gif" border=0 alt="it"></a> automatischer Link <title>it</title> <meta http-equiv="refresh" content="2; url=test.htm"> MAIL-link <A HREF="mailto:vorname@nachname.de">Mail</a> MAIL-link mit zusätzlichen Angaben <A HREF="mailto:vorname@nachname.de? subject=dies ist ein Beispiels-Betreff& body=bki ist toll!& cc=ccvornmae@ccnachname@de& bcc=bccvornmae@bccnachname@de"> </a>. Tabellen

7 Tabellenüber- und Unterschrift <table border bgcolor="#dfdfdf"> <caption align="top">tabellenüberschrift</caption> <caption align="bottom">tabellenunterschrift</caption> <tr> <th>frühstück </th> <th>abendbrot</th> <table bgcolor="silver" border="1"> <tr bgcolor="red"> //Zeile rot <td>montag</td> <td>dienstag</td> <td>mittwoch</td> <tr> <td>pizza</td> <td>spaghetti</td> <td bgcolor="white">fisch</td> //Zelle weiß <tr> <td>pudding</td> <td>eiscreme</td> <td>obst</td> <table bgcolor="silver" border="1" cellpadding="10" > // Text von Zellenrand weg <tr bgcolor="red"> <td>montag</td> <td>dienstag</td> <td>mittwoch</td> <table bgcolor="silver" border="1" cellspacing="10"> // ändert Dicke der Zellenränder <tr bgcolor="red"> <td>montag</td> <td>dienstag</td> <td>mittwoch</td> <table bgcolor="silver" border="1" cellspacing="0" bordercolor="black"> //schwarzer dünner Rand <tr bgcolor="red"> <td>montag</td> <td>dienstag</td> <td>mittwoch</td>

8 <table bgcolor="silver" border="1" cellpadding="10" cellspacing="0" bordercolor="black"> // alles kombiniert Text weit vom Rand weg, schwazer Rand, aber dünner Rand <tr bgcolor="red"> <td>montag</td> <td>dienstag</td> <td>mittwoch</td> <table bgcolor="silver" border="1" cellpadding="10" cellspacing="0" bordercolor="black" align="right"> // Tabelle wird rechts ausgerichtet <tr bgcolor="red"> <td>montag</td> <td>dienstag</td> <td>mittwoch</td> <table bgcolor="silver" border="1" cellpadding="10" cellspacing="0" bordercolor="black" width="500" height="300"> <tr align="center"> <td>zeile</td> <td>ist</td> <td>mittig</td> <tr> <td align="left">links</td> <td align="center">zentriert</td> <td align="right">rechts</td> <tr> <td valign="top">top</td> <td valign="middle">middle</td> <td valign="bottom">bottom</td> <tr> <td align="left" valign="top">links top</td> <td align="center" valign="middle">zentriert middle</td> <td align="right" valign="bottom">rechts bottom</td> <table bgcolor="silver" border="1" cellpadding="10" cellspacing="0" bordercolor="black" width="500" height="300" background="gman.gif"> // TABELLENHINTERGRUNDBILD <tr> <td>a</td> <td>b</td> <td>c</td> <tr> <td>d</td> <td>e</td> <td>f</td> <tr> <td>g</td> <td>h</td> <td>i</td> <tr> <td>j</td> <td>k</td> <td>l</td> Zellen verbinden <table border> <tr> <th rowspan="2">varianten</th> <td>variante 1</td> <tr> <td>variante 2</td> Variante 1 Varianten Variante 2

9 <table border> <tr> <th colspan="2">varianten</th> <tr> <td>variante 1</td> <td>variante 2</td> Varianten Variante 1 Variante 2 Formulare (danach Aufgabe Bestellformular) <!- mit CGI-Script <form method="post" enctype="multipart/form-data" action=" <!- enctype mit angeben, weil Hieroglyphen schlecht zu entziffern sind. -> <form action="mailto:vondetten@gmx.de" method="post" enctype="text/plain"> <table border="1"> <tr> <td>name:</td> <td><input type=text name="name" size=25 maxlength=15 value="hier Name eingeben!"></td> <br><br> <input type="submit" value="senden"> <input type="reset" value="eingabe LÖSCHEN"> </form> Passwort <input type=password name="name" size=25 maxlength=15> grosses Textfeld <textarea name="feedback" rows=10 cols=50></textarea> checkboxen / Rediobutton <input type="radio" name="familienstand" value="ledig">ledig <br> <input type="radio" name="familienstand" value="verheiratet" checked>verheiratet <br> <input type="radio" name="familienstand" value="geschieden">geschieden das gleiche als Fieldset <fieldset> <legend align="left">familienstand:</legend> <br> <input type="radio" name="familienstand" value="ledig" checked>ledig <br> <input type="radio" name="familienstand" value="verheiratet">verheiratet <br> <input type="radio" name="familienstand" value="geschieden">geschieden <br><br> </fieldset>

10 checkboxen / Kontrollkästchen <input type="checkbox" name="interessen" value="computer">computer <br> <input type="checkbox" name="interessen" value="sport">sport <br> <input type="checkbox" name="interessen" value="lesen">lesen einzeilges Listenfeld <select name="familienstand" size=1> // zb. Size = 3 wenn mehrzeiliges Listenfeld sein soll <option selected value="ledig">ledig <option value="verheiratet">verheiratet <option value="geschieden">geschieden </select> Metatags <title>it</title> <meta name="robots" content="index"> <meta name="robots" content="follow"> <meta name="description" content="hardwaretechnik, Betriebssysteme, HTML/CSS, Netzwerktechnik, Programmierung, Kommunikationstechnik, Datenbanken"> <meta name="keywords" lang="de" content="hardwaretechnik, Betriebssysteme, HTML/CSS, Netzwerktechnik, Programmierung, Kommunikationstechnik, Datenbanken"> <meta name="date" content=" t02:04:49+00:00"> <META NAME="Title" CONTENT="Titel"> <META NAME="Author" CONTENT="Autor"> <META NAME="Publisher" CONTENT="Herausgeber"> <META NAME="Copyright" CONTENT="by XY"> <META NAME="Revisit" CONTENT="After 12 days"> <META NAME="Expires" CONTENT="Verfallsdatum"> <META NAME="Keywords" CONTENT="Schlüsslewörter"> <META NAME="Description" CONTENT="Beschreibung"> <META NAME="Abstract" CONTENT="Beschreibung"> <META NAME="page-topic" CONTENT="Kultur"> <META NAME="page-topic" CONTENT="Anleitung"> <META NAME="audience" CONTENT="Anfänger"> <META NAME="Robots" CONTENT="INDEX,FOLLOW"> <META NAME="Language" CONTENT="Englisch"> Überlappen mit Ebenen <div style="position:absolute;left:20;top:20; font-family:arial; font-size:65pt; color:red"> <img src="lach.gif" align="right">stil </div> <div style="position:absolute;left:100;top:70; font-family:impact; font-size:85pt; color:red"> blüten </div> <div style="position:absolute;left:60;top:130; font-family:impact; font-size:15pt; color:black"> aus Klassenarbeiten </div>

11 Frametechnik index <frameset cols="150,*"> <frame src="seite1.htm" name="verweise"> <frame src="seite2.htm" name="daten"> <noframes> Bitte rufen Sie die <a href="frame1.htm">titelseite</a> auf! </noframes> seite1.htm <title>das steht in der Titelleiste</title> <body> <a href="seite1.htm" target="daten">seite 1</a><br> <a href="seite2.htm" target="daten">seite 2</a><br> <a href="seite3.htm" target="daten">seite 3</a><br> <a href="seite4.htm" target="daten">seite 4</a><br> </body> seite2.htm <body> <h2>seite 2</h2> </body> Alternative zu seite1.htm <base target="daten"> <title>das steht in der Titelleiste</title> <body> <a href="seite1.htm">seite 1</a><br> <a href="seite2.htm">seite 2</a><br> <a href="seite3.htm">seite 3</a><br> <a href="seite4.htm">seite 4</a><br> </body>

12 <frameset rows="100,*"> <frame src="seite1.htm" name="verweise"> <frame src="seite2.htm" name="daten"> <frameset rows="100,*" frameborder="0"> <frame src="seite1.htm" name="verweise"> <frame src="seite2.htm" name="daten"> <frameset rows="100,*"> <frame src="seite1.htm" name="verweise" noresize> <frame src="seite2.htm" name="daten" noresize> <frameset rows="100,*" framespacing="20"> <frame src="seite1.htm" name="verweise"> <frame src="seite2.htm" name="daten"> <frameset rows="100,*" bordercolor="blue" border="8"> <frame src="seite1.htm" name="verweise"> <frame src="seite2.htm" name="daten">

13 <frameset cols="150,*"> <frameset rows="150,*"> <frame src="seite1.htm" name="verweise"> <frame src="seite2.htm" name="daten"> <frame src="seite3.htm" name="daten"> <frameset cols="150,*"> <frame src="seite1.htm" name="verweise"> <frameset rows="150,*"> <frame src="seite2.htm" name="daten"> <frame src="seite3.htm" name="daten"> Inline-Frame <title>die Grundstruktur einer Internetseite</title> <body bgcolor="#fffff7" link="#000080" alink="#000080" vlink="#000080"> <h2>inline-frame mit Frameborder</h2> <iframe src="ext.txt" name="box" width="600" height="300"> Ihr Browser unterstützt keine Inline-Frames.<a href="ext.txt">weiter</a> </iframe> <br><br><br> <h2>inline-frame ohne Frameborder</h2> <iframe src="ext.txt" name="box" width="600" height="300" frameborder="no"> Ihr Browser unterstützt keine Inline-Frames.<a href="ext.txt">weiter</a> </iframe> <br><br><br> <h2>objekt einbinden</h2> <object data="ext.txt" type="text/html" width="600" height="300"> </body>

14