Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

HTML Grundkurs Patrick Cato.

Ähnliche Präsentationen


Präsentation zum Thema: "HTML Grundkurs Patrick Cato."—  Präsentation transkript:

1 HTML Grundkurs Patrick Cato

2 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)

3 HTML Grundlagen

4 HTML Syntax Was braucht man? HTML Editor Geduld Browser
Client / Server Modell Auf verschiedene Browser eingehen (IE Explorer, Firefox, Opera, Google Chrome, Safari)

5 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

6 Meine erste HTML Seite HTML Befehle nennt man tags
Die Seite als .htm oder .html abspeichern

7 Texte formatieren Was fehlt?

8 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

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

10 Nice to know…. <hr> oder <hr / > Linie <marquee scrolldelay="300">Laufband</marqu ee>

11 Ä, ü, ö, ß Viele Browser erkennen nicht die deutschen Sonderzeichen
ä -> ä Ä -> Ä ö -> ö Ö -> Ö ü -> ü Ü -> Ü ß -> ß € -> € & -> & Viele Browser erkennen nicht die deutschen Sonderzeichen

12 Seiten gestalten

13 Webseite Eine Internetseite ist mehr als nur eine Seite Webseite Links
Bilder Farben Dynamik Eine Internetseite ist mehr als nur eine Seite

14 Bilder einfügen <img src=„beispielbild.gif"> <p align="right"><img src ="sim.gif"></p> (Bild anordnen) Oder <IMG SRC =„beispielbild.gif” align=“right”>

15 Bilder einfügen

16 Musik einfügen Musik <EMBED SRC="yesterday.mid" WIDTH="200" HEIGHT="10" VOLUME="100" AUTOSTART="TRUE" LOOP="TRUE" CONTROLLER="TRUE">

17 Links erstellen <a href="ziel.html">Linktext</a> <a href=“ berg.de">Linktext</a> <a ">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=“ > <img src=“leo.jpg”></a>

18 Mehre Links auf einem Bild

19

20 Grundlagen Webdesign

21 Frames (Seiten unterteilen)

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

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

24 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.

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

26 Navigationsmenü a:link {color:red} a:visited {color:yellow} a:hover {font- weight:bold;color:black;}

27 Bereiche mit Div definieren
<div> </div>

28 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

29 //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!

30 BOX vergößern (oben, rechts, unten, links)
Padding:10px 20px 30px 0px;


Herunterladen ppt "HTML Grundkurs Patrick Cato."

Ähnliche Präsentationen


Google-Anzeigen