HTML Grundgerüst. html> head> <title> Einführung </title> </head. body> <h1> Willkommen </h1> <p> Es war einmal </p> </body.

Größe: px

Ab Seite anzeigen:

Download "HTML Grundgerüst. html> head> <title> Einführung </title> </head. body> <h1> Willkommen </h1> <p> Es war einmal </p> </body."

Gertrud Fiedler
vor 7 Jahren
Abrufe

1 HTML - Kurs

2 HTML Grundgerüst <html> <head> <title> Einführung </title> </head head> <body> <h1> Willkommen </h1> <p> Es war einmal </p> </body body> </html html>

3 Textformatierung Überschriften <h1>größ ößte Überschrift</h1> <h6>kleine Überschrift </h6> Position align="center" " zentriert align="right" " rechtsbündig align= left left" " linksbündig ndig align="justify Blocksatz Auch: <h1 style="text-align:center">...</h1> <hr > = Trennlinie <html> <head> <title>seite </title> </head head> <body> <h1 align="center">kapitel 1 </h1><hr> <p> Text </p </p> <h3 align="right"> "> Kapitel 1.2.1</h3> <h5 align= justify justify"> Blocksatz </h5> <h6 align="left">hinweis</h6> </body body> </html html>

4 Textformatierung <hr> > fügt f eine horizontale Linie ein <br> > erzeugt einen Zeilenumbruch Werden nicht geschlossen <html> <head> <title> Einführung </title> </head head> <body> <h1> Kapitel 1 </h1> <hr< hr> <p> Hallo <br< br> > Welt </p> </body body> </html html>

5 Textformatierung Text fett markieren mit <b> oder <strong< strong> > : <p>dieses <b>wort </b> ist fett. H<sub>2</sub>O. 2 <sup< sup> > 2 </sup sup> > </p> Kursiv: <i> Unterstrichen : <u> Durchgestrichener Text: <strike>...</strike< strike>...</strike> Text größ ößer: <big>...</big> Text kleiner: <small>...</small> Hochgestellt: <sup>...</sup> Tiefgestellt: <sub>...</sub>

6 Sonderzeichen Umlaute: Ä = &auml Ö = &ouml Ü = &uuml Weitere:

7 Schriftart span style = font-familyfamily = Schriftart z.b. Times New Roman font-size = Schriftgröß öße z.b: : 200%, 12pt, <body> <p> <span style="font- family:'times New Roman' ">Text </span><br span><br> <span style="font- family:'times New Roman'; font-size:24pt">gro size:24pt">großer er Text </span span> </p> </body body>

8 Aufzählung/Listen <html> <head> <title>liste</title> </head head> <body> <h1>liste </h1> <ul> <li> li>punkt 1</li> <li> Punkt 2</li> 2 <li> li>punkt </ul ul> </body body> </html html> Punkt 3</li> ul = unordered list li = list item Verschachtelt: <ul> <li>suchmaschinen <ul> <li>google</li> </ul> </li>test 2 <ul> <li> Unterpunkt </li> </ul ul> </ul>

9 Aufzählung/Listen Aufzählung: ol = ordered list li = list item <ol> <li>frühstück</li> <li>mittagessen</li> <li>abendessen</li> </ol ol> Römische Aufzählung: <ol type="i"> "> <li value="10">text </li li> </ol ol> Aufzählung bei 7 starten: <ol start="7">

10 Aufzählung/Listen Aufzählung bei 7 starten: nicht ausgefüllte Kreise : Ausgefüllte Kreise: Rechtecke: <ol start="7"> <ul type="circle"> "> <ul type="disc"> "> <ul type="square"> "> Nummerierte Liste 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">

11 Definitionen dl = definition list dt = definition (list) term = Ausdruck in der Definitionsliste dd = definition (list) definition = Definition in der Definitionsliste. <body> <h1>dfü-abk Abkürzungen</h1> <dl> <dt>aa</dt> <dd>auto Answer (Modem)</dd> <dt>aae</dt> <dd>allgemeine Anschalte-Erlaubnis</dd Erlaubnis</dd> </dl> </body body>

12 Tabellen <table border="1"> <tr> <th>stadt</th> <th>land</th> <th>fluss</th> </tr tr> <tr> <td> td>dortmund</td> <td>deutschland</td> <td> td>donau</td> </tr tr> </table table>

13 Tabellen border legt die Breite des Rahmen fest. <tr> > = Tabellenzeile <th> > = Kopfzeile <td> > = Datenzeile Tabellenbreite festlegen: Nach <table< border="1"> ein <colgroup< colgroup> > einführen und die Breite der einzelnen Spalten mit <col width="80"> <col width="100"> <col width="320"> festlegen </colgroup colgroup> Oder einheitliche Größ öße e mit <colgroup width="200" span="3"></colgroup colgroup>

14 Tabellen Verschiedene Spaltengr ößen: Einheitliche Spaltengröß öße: <table border="1"> <colgroup> <col width="80"> <col width="100"> <col width="320"> </colgroup colgroup> <tr> <td>1. Zeile, 1. Spalte</td> <td>1. Zeile, 2. Spalte</td> <td>1. Zeile, 3. Spalte</td> </tr tr> </table table> <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 tr> </table table>

15 <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> </i></td> <td><i>container:<br>9,89 Mil.</i></td> </tr> </tfoot> </table> </body> </html> Tabellen

16 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>

17 Tabelle: Außenrahmen <table border="3" frame="void"> frame="void" (kein Rahmen) frame="above" (Rahmen oben) frame="below" (Rahmen unten) frame="hsides" (Rahmen horizontal) frame="vsides" (Rahmen vertikal) frame="lhs" (Rahmen links) frame="rhs" (Rahmen rechts rechts)

18 Tabelle: Gitternetzlinien <table border="1" rules="groups"> rules="none" rules="rows" rules="cols" rules="groups" rules="all" (keine Linien) (Reihenweise Linien) (Spaltenweise Linien) (Gruppenweise Linien) (Gatter)

19 Tabellen Zeilen verschmelzen: <table border="1"> <tr> <th colspan="2">lieblingstiere</th> </tr> <tr> <td>hund</td> <td>katze</td> </tr> </table> colspan = Zelle über mehrere Spalten

20 Farben Hintergrund <body bgcolor="#ccffff"> "> Textfarbe <body text="ffffe5" > Weitere link = Farbe für f r Verweise noch nicht besuchter Dateien vlink = Farbe für f r Verweise bereits besuchter Dateien alink= = Farbe für f r Verweise, die der Anwender gerade anklickt Farbtabelle unter: php-mysql.de/generatoren/colors.php oder

21 Für Tabellen: Farben <table border="1" bgcolor="667fff"> oder <table border="1" style="background-color: 667FFF "> <tr bgcolor="667fff "> oder <tr style="background-color: 667FFF "> bordercolor = Rahmenfarbe

22 a = Anker href = Hypertext Links einfügen Direkt: <a href=" Neues Fenster: <a href=" target="_blank">seite</a> Farbe: <a href= style="color:green">seite</a>

23 Verweise <p>max Mustermann <a </p> Downloads: <p> <a href= download.zip">download</a><br> Ein Download Applet </p>

24 Bilder Einbinden: <p><img src= Bild.png" alt= Bild"></p> Anpassen: <p><img src= Bild.png" width="368" height="383 border="4" name="bild" align="middle" alt= Bild"></p> <br clear="all"> Textfluss wird ab der nächsten Zeile unterhalb der Grafik fortgesetzt (left, right) Link: <a href= seite.html"><img src= bild.jpg" width="160" height="34" border="0" alt= bild"></a>

25 Navigation

26 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;  } ul#navigation { width: 10em; margin: 0; padding: 0.2em 0.8em 0.8em; border: 1px solid black;//rahmen background-color: black; }

27 Seite mit Navigation ul#navigation li { list-style: none; margin: 0.5em; padding: 0; } Kopf ul#navigationa, ul#navigationspan, ul#navigation h2 { display:block; padding: 0.2em; text-decoration: none; font-weight: bold; border: 1px solid black; border-left-color: black; border-top-color: black;  color: black; background-color: #4169e1;  }

28 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; border-color: white; color: white; background-color: #6495ed; <! Überschriften Felder--> } </style> </head>

29 Seite mit Navigation Inhalt 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>

30 Zusammenfassung Struktur: <html> <head> title </head> <body> content </body> </html> Listen: <ul> > <li>punkt< 1</li> <li< li> > Punkt 2</li> <li>punkt< 3</li> </ul ul> <ol> > <li>fr< li>frühstück</li> <li>mittagessen</li> <li>abendessen</li> > </ol ol> Tabellen: <table border="1"> <tr> <th>stadt</th></tr> <tr> <td> td>dortmund</td> </tr tr> </table table>

31 Zusammenfassung Farben: <body bgcolor="#ccffff"> "> <body text="ffffe5" > php-mysql.de/generatoren/colors.php Links: <a href=" <a href=" target="_blank">seite</a>

32 Zusammenfassung Bilder einfügen: <p><img src= Bild.png" alt= Bild"></p> -Adressen: <p>max Mustermann <a href= </p>

Ähnliche Dokumente

Ergänzungen zum HTML - Grundkurs

Ergänzungen zum HTML - Grundkurs Ein HTML - Dokument besteht grundsätzlich aus zwei Teilen; HEADER (Kopf, enthält allg. Angaben zu Titel und ähnlich) BODY (Körper, enthält den eigentlichen Text mit Überschriften,