HTML - Kurs
Werbung
HTML - Kurs HTML Grundgerüst <html> <head> <title> Einführung </title> </head> <body> <h1> Willkommen </h1> <p> Es war einmal … </p> </body> </html> Textformatierung n Überschriften n <h1>Größte Überschrift</h1> n <h6>Kleine Überschrift </h6> Position n align="center" zentriert n align="right" rechtsb ündig n align=„left" linksbündig n align="justify„ Blocksatz Auch: <h1 style="text-align:center">...</h1> n <hr > = Trennlinie <html> <head> <title>Seite </title> </head> <body> <h1 align="center">Kapitel 1 </h1><hr> <p> Text…</p> <h3 align="right"> Kapitel 1.2.1</h3> <h5 align=„justify"> Blocksatz </h5> <h6 align="left">Hinweis</h6> </body> </html> Textformatierung n n <hr> fügt eine horizontale Linie ein <br> erzeugt einen Zeilenumbruch n Werden nicht geschlossen <html> <head> <title> Einführung </title> </head> <body> <h1> Kapitel 1 </h1> <hr> <p> Hallo <br> Welt </p> </body> </html> Textformatierung n Text fett markieren mit <b> oder <strong> : <p>Dieses <b>Wort </b> ist fett. H<sub>2</sub>O. 2 <sup> 2 </sup> </p> n n n n n n n Kursiv: <i> Unterstrichen : <u> Durchgestrichener Text: <strike>...</strike> Text größ er: <big>...</big> Text kleiner: <small>...</small> Hochgestellt: <sup>...</sup> Tiefgestellt: <sub>...</sub> Sonderzeichen n Umlaute: n Ä = &auml n Ö = &ouml n Ü = &uuml n Weitere: n http://de.selfhtml.org/html/referenz/zeichen.htm Schriftart n span style = n „font-family = Schriftart“ z.B. „Times New Roman“ „font-size = Schriftgröß e „ z.B: 200%, 12pt, n … <body> <p> <span style="fontfamily:'Times New Roman'‚ ">Text </span><br> <span style="fontfamily:'Times New Roman'; font-size:24pt">groß er Text </span> </p> </body> … Aufzählung/Listen <html> <head> <title>Liste</title> </head> <body> <h1>Liste </h1> <ul> <li>Punkt 1</li> <li> Punkt 2</li> <li>Punkt 3</li> </ul> </body> </html> n n n ul = unordered list li = list item Verschachtelt: <ul> <li>Suchmaschinen <ul> <li>Google</li> </ul> </li>Test 2 <ul> <li> Unterpunkt </li> </ul> </ul> Aufzählung/Listen n Aufzählung: n n ol = ordered list li = list item <ol> <li>Frühst ück</li> <li>Mittagessen</li> <li>Abendessen</li> </ol> Aufzählung bei 7 starten: <ol start="7"> n Rö mische Aufzählung: <ol type="I"> <li value="10">Text </li> </ol> Aufzählung/Listen n Aufzählung n n n n n <ol start="7"> <ul type="circle"> <ul type="disc"> <ul type="square"> Nummerierte Liste n n n n n bei 7 starten: nicht ausgefüllte Kreise : Ausgefüllte Kreise: Rechtecke: Listeneinträge mit I., II., …: Mit i., ii.,… : Mit A,B,.. : Mit a,b,c,… : <ol type="I"> <ol type="i„> <ol type="A"> <ol type="a„> Startwert: <ol start="7"> , <li value="15"> Definitionen n n n dl = definition list dt = definition (list) term = Ausdruck in der Definitionsliste dd = definition (list) definition = Definition in der Definitionsliste. <body> <h1>DFÜ-Abkürzungen</h1> <dl> <dt>AA</dt> <dd>Auto Answer (Modem)</dd> <dt>AAE</dt> <dd>Allgemeine Anschalte-Erlaubnis</dd> </dl> </body> Tabellen <table border="1"> <tr> <th>Stadt</th> <th>Land</th> <th>Fluss</th> </tr> <tr> <td>Dortmund</td> <td>Deutschland</td> <td>Donau</td> </tr> </table> Tabellen n „border“ legt die Breite des Rahmen fest. <tr> = Tabellenzeile <th> = Kopfzeile <td> = Datenzeile n Tabellenbreite festlegen: n Nach <table border="1"> ein <colgroup> einführen und die Breite der einzelnen Spalten mit <col width="80"> <col width="100"> <col width="320"> festlegen </colgroup> Oder einheitliche Größe mit <colgroup width="200" span="3"></colgroup> n n n n Tabellen n Verschiedene Spaltengr ößen: <table border="1"> <colgroup> <col width="80"> <col width="100"> <col width="320"> </colgroup> <tr> <td>1. Zeile, 1. Spalte</td> <td>1. Zeile, 2. Spalte</td> <td>1. Zeile, 3. Spalte</td> </tr> </table> n Einheitliche Spaltengr öße: <table border="1"> <colgroup width="200 „ span="3"></colgroup> <tr> <td>1. Zeile, 1. Spalte</td> <td>1. Zeile, 2. Spalte</td> <td>1. Zeile, 3. Spalte</td> </tr> </table> Tabellen <html><body> <table border="1" rules="groups"> <thead> <tr> <th>Stadt</th> <th>Hafen</th> </tr> </thead> <tbody> <tr> <td>Hamburg</td> <td>Deutschlands Tor zur Welt</td> </tr> </tbody> <tfoot> <tr> <td><i>Einwohner:<br>1.786.278</i></td> <td><i>Container:<br>9,89 Mil.</i></td> </tr> </tfoot> </table> </body> </html> Tabellen <html> <head> <title>Tabellen</title> </head> <body> <h1>Rahmen</h1> <table border="8" cellspacing="10" cellpadding="20"> <tr> <th>Stadt</th> <th>Land</th> <th>Fluss</th> </tr> <tr> <td>Dresden</td> <td>Deutschland</td> <td>Donau</td> </tr> </table> </body> </html> Tabelle: Außenrahmen n <table border="3" frame="void"> n frame="void" frame="above" frame="below" frame="hsides" frame="vsides" frame="lhs" frame="rhs" n n n n n n (kein Rahmen) (Rahmen oben) (Rahmen unten) (Rahmen horizontal) (Rahmen vertikal) (Rahmen links) (Rahmen rechts rechts) Tabelle: Gitternetzlinien n <table border="1" rules="groups"> n rules="none" rules="rows" rules="cols" rules="groups" rules="all" n n n n (keine Linien) (Reihenweise Linien) (Spaltenweise Linien) (Gruppenweise Linien) (Gatter) Tabellen n Zeilen verschmelzen: <table border="1"> <tr> <th colspan="2">Lieblingstiere</th> </tr> <tr> <td>Hund</td> <td>Katze</td> </tr> </table> n colspan = Zelle über mehrere Spalten Farben Hintergrund <body bgcolor="#CCFFFF"> n Textfarbe <body text="FFFFE5" > n n Weitere n n n link = Farbe f ür Verweise noch nicht besuchter Dateien vlink = Farbe für Verweise bereits besuchter Dateien alink= Farbe für Verweise, die der Anwender gerade anklickt Farbtabelle unter: http://www.html-php-mysql.de/generatoren/colors.php oder http://www.mediaevent.de/tutorial/farbcodes.html Farben n Für Tabellen: <table border="1" bgcolor="667FFF"> oder n <table border="1" style="background-color: 667FFF "> n <tr bgcolor="667FFF "> oder n <tr style="background-color: 667FFF "> n n bordercolor = Rahmenfarbe Links einfügen n n a = Anker href = Hypertext Direkt: <a href="http://www.Seite.de">Seite</a> n Neues Fenster: <a href="http://www.Seite.de" target="_blank">Seite</a> n Farbe: <a href=„www.seite.de" style="color:green">Seite</a> n Verweise Email: <p>Max Mustermann <a href="mailto:[email protected]"> [email protected]</a> </p> n Downloads: <p> <a href=„download.zip">Download</a><br> Ein Download Applet </p> n Bilder Einbinden: <p><img src=„Bild.png" alt=„Bild"></p> n Anpassen: <p><img src=„Bild.png" width="368" height="383„ border="4" name="bild" align="middle" alt=„Bild"></p> n <br clear="all"> Textfluss wird ab der nächsten Zeile unterhalb der Grafik fortgesetzt (left, right) n Link: <a href=„seite.html"><img src=„bild.jpg" width="160" height="34" border="0" alt=„bild"></a> n Einführung Navigation n n n Listenelemente mit ul, li Abstand auf 0 setzen Aufzählungszeichen durch „ liststyle:none“ eliminieren <html> <head> <title>Navigationsleisten</title> <style type="text/css"> body, a { font: normal 100.01% Helvetica, Arial, sans-serif; color: black; backgroundcolor: white; } ul#Navigation { margin: 0; padding: 0; } ul#Navigation li { list-style: none; margin: 0; padding: 0; } </style> </head> <body> <h1>Navigationsleiste ...</h1> <ul id="Navigation"> <li> <a href="nav_definieren.htm">Punkt 1 </a></li> <li> <a href="nav_formatieren.htm">Punkt 2 </a></li> </ul> </body> </html> Einführung n Navigation mit Listenelementen ul, li <html> <head> <title>Navigationsleisten</title> <style type="text/css"> body{ font: normal 100.01% Helvetica, Arial, sans-serif; color: black; background-color: white; } ul#Navigation { margin: 0; padding: 0; } ul#Navigation li { list-style: none; margin: 0; padding: 0; } </style> </head> <body> <h1>Navigationsleiste ...</h1> <ul id="Navigation"> <li><a href="nav_definieren.htm">Beispiel 1</a></li> <li><a href="nav_formatieren.htm">Beispiel 2</a></li> <li><a href="nav_rollover.htm">Beispiel 3</a></li> </ul> </body> </html> Einführung n n n Breite und Abstand für Listenelemente bestimmen, sowie Farben festlegen Mit Navigationskasten „display:block; „ um Rollover über den ganzen Kasten zu bekommen … ul#Navigation { width: 10em; margin: 0; padding: 0.8em; border: 3px solid black; /* Rahmen */ background-color: blue; } ul#Navigation li { list-style: none; margin: 0.4em; padding: 0.2em; border: 5px solid gray; /*innen Rahmen Kasten */ background-color: yellow; /*Farbe Kasten */ } ul#Navigation a { /* Link Text */ display:block; text-decoration: none; font-weight: bold; color: black; background-color: #ccc; } ul#Navigation a:hover { /* Farbe Text, wenn Mauszeiger auf Link*/ color: white; background-color: gray; } </style> … Navigation Seite mit Navigation Kopf <html> <head> <title>Navigationsleiste</title></head> <style type="text/css"> body { font: Helvetica, Arial, sans-serif; color: white; background-color: #0000cd; /*Hintergrund ganze Seite */ } ul#Navigation { width: 10em; margin: 0; padding: 0.2em 0.8em 0.8em; border: 1px solid black; /*Rahmen*/ background-color: black; } Seite mit Navigation Kopf ul#Navigation li { */ Kastengröße*/ list-style: none; margin: 0.5em; padding: 0; } ul#Navigation a, ul#Navigation span, ul#Navigation h2 { display:block; padding: 0.2em; Seite mit Navigation Kopf ul#Navigation a:hover, ul#Navigation span { border-color: black; border-left-color: black; border-top-color: black; color: blue; background-color: yellow; /* angeklicktes */ } ul#Navigation h2 { font-size: 1em; margin: 1.1em 0 0; Seite mit Navigation Inhalt n Die Navigationsliste wird über a href mit den jeweiligen Seiten verbunden: <body> <h1 id="Beispiel">Navigationsleiste mit Überschriften</h1> <ul id="Navigation"> <li><h2>Thema 1</h2></li> <li><a href="#Seite">Seite 1.1</a></li> <li><h2>Thema 2</h2></li> <li><span>aktuelle Seite</span></li> <li><a href="#Seite">Seite 2.2</a></li> <li><h2>Thema 3</h2></li> <li><a href="#Seite">Seite 3.1</a></li> </ul> </body> </html> Horizontale Navigation n Horizontale Navigation : n ul#Navigation{ Text-align: center; n ul#Navigation li{ Display: inline; n Einheitliche Menüpunkte: n ul#Navigation a, ul#Navigation span { float: left; width: 6em; … } ul#Navigation { margin: 0; padding: 0.8em; text-align: center; border: 1px solid black; background-color: silver; } ul#Navigation li { list-style: none; display: inline; margin: 0.4em; padding: 0; } ul#Navigation a, ul#Navigation span { padding: 0.2em 1em; text-decoration: none; font-weight: bold; border: 1px solid black; border-left-color: white; border-top -color: white; color: maroon; backgroundcolor: #ccc; } ul#Navigation a:hover, ul#Navigation span { border-color: white; border-left-color: black; border-top-color: black; color: white; background-color: gray; } </style> ... Horizontale Navigation n Mehrere Ebenen: n Durch Verschachtelung der ul: <ul id="Navigation"> <li><a href="#Punkt1">Seite 1</a></li> <ul> <li><a href="#Punkt">Seite 1a</a></li> </ul> </li> <li><a href="#Punkt">Seite 2</a></li> <li><a href="#Punkt">Seite 3</a></li> </ul> Zusammenfassung n Struktur: <html> <head> title </head> <body> content </body> </html> n Listen: <ul> <li>Punkt 1</li> <li> Punkt 2</li> <li>Punkt 3</li> </ul> <ol> <li>Frühstück</li> <li>Mittagessen</li> <li>Abendessen</li> </ol> Tabellen: <table border="1"> <tr> <th>Stadt</th></tr> <tr> <td>Dortmund</td> </tr> </table> n Zusammenfassung n Farben: n n n n n <body bgcolor="#CCFFFF"> <body text="FFFFE5" > http://www.html -php -mysql.de/generatoren/colors.php http://www.mediaevent.de/tutorial/farbcodes.html Links: n n <a href="http://www.Seite.de">Seite</a> <a href="http://www.Seite.de" target="_blank">Seite</a> Zusammenfassung n Bilder einfügen: n n <p><img src=„Bild.png" alt=„Bild"></p> Email-Adressen: <p>Max Mustermann <a href= mailto:[email protected]"> [email protected]</a> </p>