Start. HTML Crash-Kurs. HTML Crashkurs Bernd Blümel Christian Metzger

Transkript

1 Start HTML Crash-Kurs

2 Basics HyperText Markup Language logische Auszeichnungssprache Einfache Syntax Sehr einfach zu erlernen

3 Dateiendungen und Startseite Dateiendungen.htm.html Startseite: index default welcome start kann ggf. in der Webserver Config eingestellt werden

4 Grundgerüst einer HTML-Datei  <html> <head> <title>iksy</title> </head> <body> Hello World </body> </html>

5 Literatur

6 Einfacher Zeilenumbruch <br> und Absatz <p></p> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "  <html> </html> <head> </head> <body> </body> <title>iksy</title> <p>hello World</p> <p>guten <br> Tag</p>

7 Absatzausrichtung: ( <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head><title>text-align</title> </head> <body> <p style="text-align:left; margin-left:50px; margin-right:50px"> Der Absatz, den Sie gerade lesen, wurde mit <b>text-align</b> linksbündig ausgerichtet. Ferner wurde ein Rand von 50px eingestellt, just for fun oder auch, damit Sie sehen, wie die einzelnen Stylesheet-Angaben zusammenspielen.<br> Noch eine Textzeile<br> Noch eine Textzeile</p>  </body> </html>

8 Schriftarten und <span> <html> <head> <title>iksy</title> </head> <body> <p><span style="font-family:'times New Roman',Times,serif">kleiner Beispieltext in Times New Roman</span><br> <span style="font-family:'times New Roman',Times,serif; font-size:200%">großer Beispieltext in Times New Roman</span></p> <p><span style="font-family:verdana">kleiner Beispieltext in Verdana</span><br> <span style="font-family:verdana; font-size:200%">großer Beispieltext in Verdana</span></p> </body> </html>

9 Styles für Elemente <html> <head> <title>titel der Datei</title> <style type="text/css"> </style> </head> body { background-color:#ffffcc; margin-left:100px; } * { color:blue; } h1 { font-size:300%; color:#ff0000; font-style:italic; border-bottom:solid thin black; } p,li { font-size:110%;line-height:140%; font-family:helvetica,arial,sans-serif; letter-spacing:0.1em; word-spacing:0.3em; }

10 Styles für Elemente, Überschriften, Listen <body> <h1>überschrift 1. Ordnung</h1> <p>ein normaler Textabsatz</p> <ul> <li>ein Listenpunkt</li> <li>ein anderer Listenpunkt</li> </ul> </body> </html>

11 Formatklassen <html> <head> <title>titel der Datei</title> <style type="text/css"> h1 { font-family:arial,sans-serif; font-size:2em; font-weight:normal; } h1.hinterlegt { background-color:#ffff00 } *.hinterlegt { background-color:#00ffff }.extra { background-color:#ff99ff }.extra.hinterlegt { background-color:#ff0000 } </style> </head>

12 Formatklassen, Überschriften <body> </body> </html> <h1>h1 ganz normal nur etwas formatiert</h1> <h1 class="hinterlegt">h1 knallgelb hinterlegt</h1> <h2> H2 ganz normal, <span class="hinterlegt"> aber <b class="extra">auch</b> hinterlegt</span></h2> <h3 class="extra hinterlegt">h3, extra hinterlegt</h3>

13 Stylesheet-Dateien (Extension.css) <html> <head> <title>titel der Datei</title> <link rel="stylesheet" type="text/css" href="formate.css"> <style type="text/css"> /*... hier sind dateispezifische Formate erlaubt... */ </style> </head> <body> </body> </html>

14 Allgemeines Block-Element <div align="center"> <h1>alles zentriert</h1> <ul> <li>alles zentriert</li> <li>alles?</li> <li>alles!</li> </ul> </div> <div align="right"> <h1>alles rechts am Rand</h1> <ul> <li>alles rechts am Rand</li> <li>alles?</li> <li>alles!</li> </ul> </div>

15 Allgemeines Block-Element formatieren <div style="text-align:center; padding:20px; border:thin solid red; margin:25px"> <h1>alles zentriert</h1> <ul> <li>alles zentriert</li> <li>alles?</li> <li><span style="font-weight:bold; color:red">alles!</span></li> </ul> </div> <div style="text-align:right; padding:20px; border:thin solid blue; margin:25px"> <h1>alles rechts am Rand</h1> <ul> <li>alles rechts am Rand</li> <li>alles?</li> <li> <span style="font-weight:bold; color:blue"> alles! </span> </li> </ul> </div>

16 Allgemeines Block-Element formatieren

17 </head> </head> <body> Farben <style type="text/css"> body { background-color:#e0e0e0; font-weight:bold; font-family:arial}.rosabox { background-color:#ffdddd; padding:6px; margin:0px; }.rosa { background-color:#ffdddd; }.gelbbox { background-color:#ffff66; padding:6px; margin:0px; }.gelb { background-color:#ffff66; } </style> </p> </body> <p class="rosabox">hinter dem Internet ist das <span class="gelb">hinternet</span>. </p> <p>dies hat nichts zu sagen.</p> <p class="gelbbox"> Im Kinderzimmer herrscht das <span class="rosa">kindernet</span>.

18 Hintergrundbilder <div style="background-image:url(background2.gif); margin:0px; padding:10px"> <h1 align="center" style="color:#ffffcc"> Willkommen im Reich der Texturen! </h1> </div>

19 Positionierung und das id-element <style type="text/css"> #box1 { position:absolute; top:50px; left:10px; width:150px; height:150px; z-index:1; } #box2 { position:absolute; top:80px; left:40px; width:100px; height:100px; z-index:2; } #box3 { position:absolute; top:120px; left:50px; width:150px; height:150px; z-index:3; } #box4 { position:absolute; top:80px; left:20px; width:70px; height:70px; z-index:1; } #box5 { position:absolute; top:100px; left:10px; width:80px; height:80px; z-index:2; } #box6 { position:absolute; top:60px; left:50px; width:90px; height:90px; z-index:-1; } </style> </head><body> <div id="box1" style="background:red; border:solid 2px blue;">box1</div> <div id="box2" style="background:blue; border:solid 2px white;">box2</div> <div id="box3" style="background:yellow; border:solid 2px red;">box3 <div id="box4" style="background:gold; border:solid 2px green;">box4</div> <div id="box5" style="background:lime; border:solid 2px navy;">box5</div> <div id="box6" style="background:red; border:solid 2px blue;">box6</div> </div>

20 <p> </p> <p> </p> Links <a href=" ARD Tagesschau </a> Nachrichten<br> <a href=" Heise Newsticker </a> Computer-Nachrichten<br> <a href="/"> Wohin der wohl führen mag? </a> <br> <a href="./"> Und der hier? </a>

21 Links, Pseudoelemente <head> <style type="text/css"> a:link { text-decoration:none; font-weight:bold; color:#e00000; } a:visited { text-decoration:none; font-weight:bold; color:#800000; } a:hover { text-decoration:none; font-weight:bold; background-color:#ff0; } a:active { text-decoration:none; font-weight:bold; background-color:#cff; } a:focus { text-decoration:none; font-weight:bold; background-color:#080; } </style> </head> <body> <p> Vermutlich kennen Sie die <a href="../../index.htm">kapiteleinstiegsseite zu CSS</a><br> Und wohl auch die <a href="../../../index.htm">einstiegsseite zu SELFHTML</a><br> Aber kennen Sie auch die <a href="../../../intro/hypertext/geschichte.htm">geschichte von Hypertext</a>?<br> </p> </body>

22 Interne Links <h1><a name="anfang">lange Seite</a></h1> <h2><a name="kapitel1">kapitel 1</a></h2> <a href="#anfang"> Seitenanfang </a> <a href="../projektintern.htm#anker"> Anker definieren und Verweise zu Ankern </a>

23 -links <p>mail an einen Hauptempfänger und einen sichtbaren Kopienempfänger:<br> <a mit Kopie</a> </p> <p>mail an einen Hauptempfänger und einen unsichtbaren Kopienempfänger:<br> <a mit Geheimkopie</a> </p> <p>mail mit vordefiniertem Subject (Betreff):<br> <a subject=eine%20mail%20von%20deinen%20web-seiten"> Mail mit Betreff </a> </p>

24 Tabellen, Umlaute <table border="1"> <tr> <th>berlin</th> <th>hamburg</th> <th>münchen</th> </tr> <tr> <td>miljöh</td> <td>kiez</td> <td>bierdampf</td> </tr> <tr> <td>buletten</td> <td>frikadellen</td> <td>fleischpflanzerl</td> </tr> </table>

25 Tabellen 2 <table border="1"> <tr> <th colspan="2">die Menschheit besteht aus</th> </tr> <tr> <td>eseln</td> <td>affen</td> </tr> </table

26 Grafiken <img src="./icons/tc-trans.jpg" alt="logo TC Südpark" width ="164" height ="189">

27 Meta-Tags <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="Notepad"> <META NAME="Author" CONTENT="Christian Metzger"> <META NAME="Keywords" CONTENT="HTML, Meta Tags"> <META NAME="Description" CONTENT="Beschreibung"> </HEAD>

28 Formular: Erstes einfaches Formular <form method="post" enctype="text/plain"> <table border="1" align="center"> <tr> <td> Name </td> <td> <input type="text" name="name" size="15"> </td> </tr> <tr> <td> Vorname </td> <td> <input type="text" name="vorname" size="15">

29 Formular: Erstes einfaches Formular fortgesetzt <tr> <td> PLZ </td> <td> <input type="text" name="plz" size="15"> </td> </tr> <tr> <td> Stadt </td> <td> <input type="text" name="stadt" size="15"> </td> </tr> <tr> <td> Strasse/Hausnummer </td> <td> <input type="text" name="strasse" size="15"> </td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" value="abschicken"> </td> </tr> </table> </form> </body> </html>

30 Formular: Erstes einfaches Formular in der Browserdarstellung

31 Formular: Erstes einfaches Formular - Inhalt der Inhalt der name=mustermann vorname=max plz=12123 stadt=bochum strasse=testrasse 11 Ohne Encryption (application/x-www-form-urlencoded) name=mustermann&vorname=max&plz=12123& stadt=bochum&strasse=teststra\%dfe+11

32 Formular: Formular mit Radio-Button <tr> <td> Geschlecht </td> <td> <input type="radio" name="geschlecht" value="m" checked> männlich <br> <input type="radio" name="geschlecht" value="w"> weiblich <br> </td> </tr> <tr> <td align="center"> <input type="submit" value="abschicken"> </td> <td align="center"> <input type="reset" value="zurücksetzen"> </td> </tr>

33 Formular: Formular mit Radio-Button in der Browserdarstellung

34 Formular: Formular mit Radio-Button Inhalt der Inhalt der name=mustermann vorname=max plz=12123 stadt=bochum strasse=testrasse 11 geschlecht=m

35 Formular: Formular mit Auswahlliste <tr> <td> Ermäßigung </td> <td> <select name="status"> <option value="kind">kind</option> <option value="student">student</option> <option value="erwachsener">erwachsener</option> </select> </td> </tr>

36 Formular: Formular mit Auswahlliste in der Browserdarstellung

37 Formular: Formular mit Auswahlliste Inhalt der Inhalt der name=mustermann vorname=max plz=12123 stadt=bochum strasse=testrasse 11 geschlecht=m status=student