HTML Grundkurs Patrick Cato
Wochenplan Montag: HTML Grundlagen Hintergrund Bilder einfügen Links Dienstag: -Frames -Tabellen -Formulare Mittwoch -CSS -Grundlagen Webdesign Donnerstag/Freitag -Java Script -Webmaster (Was brauche ich für die Homepage -dynamische Programmierung? HTML Grundbefehle Grundverständnis Internet Grundlagen Webdesign Webmaster (Grundlagen)
HTML Grundlagen
HTML Syntax Was braucht man? HTML Editor Geduld Browser Client / Server Modell Auf verschiedene Browser eingehen (IE Explorer, Firefox, Opera, Google Chrome, Safari)
HTML Grundsyntax GROß oder klein Tags .HTM oder .HTML Notepad Meta-Informationen <html> oder <HTML> <head> <HEAD> </head> </HEAD> <body> <BODY> </body> </BODY> </html> </HTML> Niemals mischen!!!!!!!! GROß oder klein Tags .HTM oder .HTML Notepad Kernseite
Meine erste HTML Seite HTML Befehle nennt man tags Die Seite als .htm oder .html abspeichern
Texte formatieren Was fehlt?
Grundlegende Tags <br> (neuer Absatz, kein Endtag) Alternative Schreibweise <br /> <b> fett </b> <i> kursiv </i> <U>Hallo, ich bin ein unterstrichener Text</U> <center>zentriert </center> <p> Absatz </p> <h1> Überschrift 1 </h1> <strong>Hervorhebung </strong> 2 <sup> 3<sup> 2^3
Grundlegende Tags <!--Dies ist ein unsichtbarer Kommentar--> <FONT SIZE="5">Hallo, ich bin ein Text der Grösse 5</FONT> <FONT FACE="Arial">Hallo, ich bin ein Text in Arial</FONT> <FONT COLOR=„red">Hallo, ich bin ein roter Text</FONT>
Nice to know…. <hr> oder <hr / > Linie <marquee scrolldelay="300">Laufband</marqu ee>
Ä, ü, ö, ß Viele Browser erkennen nicht die deutschen Sonderzeichen ä -> ä Ä -> Ä ö -> ö Ö -> Ö ü -> ü Ü -> Ü ß -> ß € -> € & -> & Viele Browser erkennen nicht die deutschen Sonderzeichen
Seiten gestalten
Webseite Eine Internetseite ist mehr als nur eine Seite Webseite Links Bilder Farben Dynamik Eine Internetseite ist mehr als nur eine Seite
Bilder einfügen <img src=„beispielbild.gif"> <p align="right"><img src ="sim.gif"></p> (Bild anordnen) Oder <IMG SRC =„beispielbild.gif” align=“right”>
Bilder einfügen
Musik einfügen Musik <EMBED SRC="yesterday.mid" WIDTH="200" HEIGHT="10" VOLUME="100" AUTOSTART="TRUE" LOOP="TRUE" CONTROLLER="TRUE">
Links erstellen <a href="ziel.html">Linktext</a> <a href=“www.leon berg.de">Linktext</a> <a href="mailto:hans@mustermann.de ">Mail an Hans</a> Verweise in Ordnerstruktur “../ziel.html” (falls Seite im übergeordneten Verzeichnis liegt) Auch Bilder können verlinkt werden (funktioniert wie Textlink) <a href=“www.leonberg.de” > <img src=“leo.jpg”></a>
Mehre Links auf einem Bild
Grundlagen Webdesign
Frames (Seiten unterteilen)
<html> <head> <title>Beispiel Frames</title> </head> <frameset cols="30%,70%"> <frame src="left.htm" name="links"> <frame src="main.htm" name="rechts"> </frameset> </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>
Vor- und Nachteile von CSS Größere Layoutmöglichkeiten: Das Design ist konsistent zwischen den Browser (siehe unten). Kürzere Zeiten zur Erstellung und Pflege von Websites: Von einer einzigen Datei aus kann ein komplettes Website-Design erstellt und bei Bedarf geändert werden. Schnellere Übertragung: CSS macht zahlreiche HTML-Wiederholungen überflüssig. Weniger Code bedeutet schnelleren Download. Homepage funktioniert auch noch bei alten Browsern: Auch bei Browsern, die CSS nicht unterstützen, wird die Homepage noch angezeigt (allerdings dann ohne CSS-Design). Unterschiedliche Unterstützung durch Browser: Größter Nachteil ist die teilweise uneinheitliche Unterstützung durch Browser. Deshalb sollten nicht alle CSS-Definitionen eingesetzt werden.
CSS Grundgerüst Zwischen <head> </head> } </style> <style type= „text/css“> h1 { color: red font-family: Arial; font-size:28pt; font-style:normal; font-weight:bold; background-color:blue } p { color: blue font-style:italic; } </style> Zwischen <head> </head>
Navigationsmenü a:link {color:red} a:visited {color:yellow} a:hover {font- weight:bold;color:black;}
Bereiche mit Div definieren <div> </div>
Boxen definieren Box 1 <html> <head> <style type="text/css"> #box { background-color: yellow; } </style> </head> <body> <div id="box"> Inhalt von div bock </div> </body> </html> Box 1
//Kommentare WEGLASSEN! #box{ Background-color: yellow // Hintergrund Width: 200px; // Breite der Box Height: 100px; // Höhe der Box Padding:20px; // innenabstand Border: solid 20px black; // rahmen } //Kommentare WEGLASSEN!
BOX vergößern (oben, rechts, unten, links) Padding:10px 20px 30px 0px;