Start HTML Crash-Kurs
Basics HyperText Markup Language logische Auszeichnungssprache Einfache Syntax Sehr einfach zu erlernen
Dateiendungen und Startseite Dateiendungen.htm.html Startseite: index default welcome start kann ggf. in der Webserver Config eingestellt werden
Grundgerüst einer HTML-Datei <!-- Dateiname helloworld.html --> <html> <head> <title>iksy</title> </head> <body> Hello World </body> </html>
Literatur http://de.selfhtml.org/
Einfacher Zeilenumbruch <br> und Absatz <p></p> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <!-- Dateiname helloworld.html --> <html> </html> <head> </head> <body> </body> <title>iksy</title> <p>hello World</p> <p>guten <br> Tag</p>
Absatzausrichtung: (http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#text_align) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <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> <!--usw.--> </body> </html>
Schriftarten und <span> http://de.selfhtml.org/css/eigenschaften/schrift.htm <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>
Styles für Elemente http://de.selfhtml.org/css/formate/zentrale.htm <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; }
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>
Formatklassen http://de.selfhtml.org/css/formate/zentrale.htm#klassen <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>
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>
Stylesheet-Dateien (Extension.css) http://de.selfhtml.org/css/formate/einbinden.htm#separat <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>
Allgemeines Block-Element http://de.selfhtml.org/html/text/bereiche.htm <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>
Allgemeines Block-Element formatieren http://de.selfhtml.org/html/text/bereiche.htm#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>
Allgemeines Block-Element formatieren http://de.selfhtml.org/css/eigenschaften/index.htm http://de.selfhtml.org/css/eigenschaften/randabstand.htm http://de.selfhtml.org/css/eigenschaften/innenabstand.htm http://de.selfhtml.org/css/eigenschaften/rahmen.htm
</head> </head> <body> Farben http://de.selfhtml.org/css/eigenschaften/hintergrund.htm <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>.
Hintergrundbilder http://de.selfhtml.org/css/eigenschaften/hintergrund.htm <div style="background-image:url(background2.gif); margin:0px; padding:10px"> <h1 align="center" style="color:#ffffcc"> Willkommen im Reich der Texturen! </h1> </div>
Positionierung und das id-element http://de.selfhtml.org/css/eigenschaften/positionierung.htm <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>
<p> </p> <p> </p> Links http://de.selfhtml.org/html/verweise/definieren.htm <a href="http://www.tagesschau.de/"> ARD Tagesschau </a> Nachrichten<br> <a href="http://www.heise.de/newsticker/"> Heise Newsticker </a> Computer-Nachrichten<br> <a href="/"> Wohin der wohl führen mag? </a> <br> <a href="./"> Und der hier? </a>
Links, Pseudoelemente http://de.selfhtml.org/html/verweise/definieren.htm http://de.selfhtml.org/css/formate/zentrale.htm#attributbedingte <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>
Interne Links http://de.selfhtml.org/html/verweise/projektintern.htm <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>
email-links http://de.selfhtml.org/html/verweise/email.htm#optionen <p>mail an einen Hauptempfänger und einen sichtbaren Kopienempfänger:<br> <a href="mailto:beispiel@example.org?cc=heidi.bratze@example.org">mail mit Kopie</a> </p> <p>mail an einen Hauptempfänger und einen unsichtbaren Kopienempfänger:<br> <a href="mailto:beispiel@example.org?bcc=heidi.bratze@example.org">mail mit Geheimkopie</a> </p> <p>mail mit vordefiniertem Subject (Betreff):<br> <a href="mailto:beispiel@example.org? subject=eine%20mail%20von%20deinen%20web-seiten"> Mail mit Betreff </a> </p>
Tabellen, Umlaute http://de.selfhtml.org/html/tabellen/ <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>
Tabellen 2 <table border="1"> <tr> <th colspan="2">die Menschheit besteht aus</th> </tr> <tr> <td>eseln</td> <td>affen</td> </tr> </table
Grafiken http://de.selfhtml.org/html/grafiken/einbinden.htm <img src="./icons/tc-trans.jpg" alt="logo TC Südpark" width ="164" height ="189">
Meta-Tags http://de.selfhtml.org/html/kopfdaten/meta.htm <!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>
Formular: Erstes einfaches Formular http://de.selfhtml.org/html/formulare/index.htm <form action="mailto:bernd.bluemel@fhbochum.de?subject=adresse" 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">
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>
Formular: Erstes einfaches Formular in der Browserdarstellung
Formular: Erstes einfaches Formular - Inhalt der email Inhalt der email 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
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>
Formular: Formular mit Radio-Button in der Browserdarstellung
Formular: Formular mit Radio-Button Inhalt der email Inhalt der email name=mustermann vorname=max plz=12123 stadt=bochum strasse=testrasse 11 geschlecht=m
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>
Formular: Formular mit Auswahlliste in der Browserdarstellung
Formular: Formular mit Auswahlliste Inhalt der email Inhalt der email name=mustermann vorname=max plz=12123 stadt=bochum strasse=testrasse 11 geschlecht=m status=student