patrick cato. wochenplan montag: - html grundlagen - hintergrund - bilder einfügen - links...
TRANSCRIPT
![Page 1: Patrick Cato. Wochenplan Montag: - HTML Grundlagen - Hintergrund - Bilder einfügen - Links Dienstag: -Frames -Tabellen -Formulare Mittwoch -CSS -Grundlagen](https://reader035.vdokument.com/reader035/viewer/2022062512/55204d8249795902118d5605/html5/thumbnails/1.jpg)
Patrick Cato
![Page 2: Patrick Cato. Wochenplan Montag: - HTML Grundlagen - Hintergrund - Bilder einfügen - Links Dienstag: -Frames -Tabellen -Formulare Mittwoch -CSS -Grundlagen](https://reader035.vdokument.com/reader035/viewer/2022062512/55204d8249795902118d5605/html5/thumbnails/2.jpg)
WochenplanWochenplanMontag: -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?
![Page 3: Patrick Cato. Wochenplan Montag: - HTML Grundlagen - Hintergrund - Bilder einfügen - Links Dienstag: -Frames -Tabellen -Formulare Mittwoch -CSS -Grundlagen](https://reader035.vdokument.com/reader035/viewer/2022062512/55204d8249795902118d5605/html5/thumbnails/3.jpg)
![Page 4: Patrick Cato. Wochenplan Montag: - HTML Grundlagen - Hintergrund - Bilder einfügen - Links Dienstag: -Frames -Tabellen -Formulare Mittwoch -CSS -Grundlagen](https://reader035.vdokument.com/reader035/viewer/2022062512/55204d8249795902118d5605/html5/thumbnails/4.jpg)
HTML SyntaxHTML Syntax
• Was braucht man?
• HTML Editor
• Geduld
• Browser
![Page 5: Patrick Cato. Wochenplan Montag: - HTML Grundlagen - Hintergrund - Bilder einfügen - Links Dienstag: -Frames -Tabellen -Formulare Mittwoch -CSS -Grundlagen](https://reader035.vdokument.com/reader035/viewer/2022062512/55204d8249795902118d5605/html5/thumbnails/5.jpg)
HTML GrundsyntaxHTML Grundsyntax
<html> oder <HTML>
<head> <HEAD>
</head> </HEAD>
<body> <BODY>
</body> </BODY>
</html> </HTML>
Niemals mischen!!!!!!!!
GROß oder kleinGROß oder klein
.HTM oder .HTML
Meta-Informationen
Kernseite
![Page 6: Patrick Cato. Wochenplan Montag: - HTML Grundlagen - Hintergrund - Bilder einfügen - Links Dienstag: -Frames -Tabellen -Formulare Mittwoch -CSS -Grundlagen](https://reader035.vdokument.com/reader035/viewer/2022062512/55204d8249795902118d5605/html5/thumbnails/6.jpg)
Meine erste HTML Seite Meine erste HTML Seite • HTML Befehle nennt man tags
Die Seite als .htm oder .html abspeichern
![Page 7: Patrick Cato. Wochenplan Montag: - HTML Grundlagen - Hintergrund - Bilder einfügen - Links Dienstag: -Frames -Tabellen -Formulare Mittwoch -CSS -Grundlagen](https://reader035.vdokument.com/reader035/viewer/2022062512/55204d8249795902118d5605/html5/thumbnails/7.jpg)
Texte formatierenTexte formatieren
Was fehlt?
![Page 8: Patrick Cato. Wochenplan Montag: - HTML Grundlagen - Hintergrund - Bilder einfügen - Links Dienstag: -Frames -Tabellen -Formulare Mittwoch -CSS -Grundlagen](https://reader035.vdokument.com/reader035/viewer/2022062512/55204d8249795902118d5605/html5/thumbnails/8.jpg)
Grundlegende TagsGrundlegende 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
![Page 9: Patrick Cato. Wochenplan Montag: - HTML Grundlagen - Hintergrund - Bilder einfügen - Links Dienstag: -Frames -Tabellen -Formulare Mittwoch -CSS -Grundlagen](https://reader035.vdokument.com/reader035/viewer/2022062512/55204d8249795902118d5605/html5/thumbnails/9.jpg)
Grundlegende TagsGrundlegende 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>
![Page 10: Patrick Cato. Wochenplan Montag: - HTML Grundlagen - Hintergrund - Bilder einfügen - Links Dienstag: -Frames -Tabellen -Formulare Mittwoch -CSS -Grundlagen](https://reader035.vdokument.com/reader035/viewer/2022062512/55204d8249795902118d5605/html5/thumbnails/10.jpg)
Nice to know….Nice to know….
<hr> oder <hr / > Linie
<marquee scrolldelay="300">Laufband</marquee>
![Page 11: Patrick Cato. Wochenplan Montag: - HTML Grundlagen - Hintergrund - Bilder einfügen - Links Dienstag: -Frames -Tabellen -Formulare Mittwoch -CSS -Grundlagen](https://reader035.vdokument.com/reader035/viewer/2022062512/55204d8249795902118d5605/html5/thumbnails/11.jpg)
Ä, ü, ö, ß Ä, ü, ö, ß
ä -> ä
Ä -> Ä
ö -> ö
Ö -> Ö
ü -> ü
Ü -> Ü
ß -> ß
€ -> €
& -> &
Viele Browser erkennen nicht die deutschen Sonderzeichen
![Page 12: Patrick Cato. Wochenplan Montag: - HTML Grundlagen - Hintergrund - Bilder einfügen - Links Dienstag: -Frames -Tabellen -Formulare Mittwoch -CSS -Grundlagen](https://reader035.vdokument.com/reader035/viewer/2022062512/55204d8249795902118d5605/html5/thumbnails/12.jpg)
![Page 13: Patrick Cato. Wochenplan Montag: - HTML Grundlagen - Hintergrund - Bilder einfügen - Links Dienstag: -Frames -Tabellen -Formulare Mittwoch -CSS -Grundlagen](https://reader035.vdokument.com/reader035/viewer/2022062512/55204d8249795902118d5605/html5/thumbnails/13.jpg)
WebseiteWebseite
Eine Internetseite ist mehr als nur eine Seite
![Page 14: Patrick Cato. Wochenplan Montag: - HTML Grundlagen - Hintergrund - Bilder einfügen - Links Dienstag: -Frames -Tabellen -Formulare Mittwoch -CSS -Grundlagen](https://reader035.vdokument.com/reader035/viewer/2022062512/55204d8249795902118d5605/html5/thumbnails/14.jpg)
Bilder einfBilder einfügenügen
<img src=„beispielbild.gif">
<p align="right"><img src ="sim.gif"></p>
(Bild anordnen)
Oder
<IMG SRC =„beispielbild.gif” align=“right”>
![Page 15: Patrick Cato. Wochenplan Montag: - HTML Grundlagen - Hintergrund - Bilder einfügen - Links Dienstag: -Frames -Tabellen -Formulare Mittwoch -CSS -Grundlagen](https://reader035.vdokument.com/reader035/viewer/2022062512/55204d8249795902118d5605/html5/thumbnails/15.jpg)
Bilder einfBilder einfügenügen
![Page 16: Patrick Cato. Wochenplan Montag: - HTML Grundlagen - Hintergrund - Bilder einfügen - Links Dienstag: -Frames -Tabellen -Formulare Mittwoch -CSS -Grundlagen](https://reader035.vdokument.com/reader035/viewer/2022062512/55204d8249795902118d5605/html5/thumbnails/16.jpg)
Musik einfügenMusik einfügen
Musik
<EMBED SRC="yesterday.mid" WIDTH="200" HEIGHT="10" VOLUME="100" AUTOSTART="TRUE" LOOP="TRUE" CONTROLLER="TRUE">
![Page 17: Patrick Cato. Wochenplan Montag: - HTML Grundlagen - Hintergrund - Bilder einfügen - Links Dienstag: -Frames -Tabellen -Formulare Mittwoch -CSS -Grundlagen](https://reader035.vdokument.com/reader035/viewer/2022062512/55204d8249795902118d5605/html5/thumbnails/17.jpg)
Links erstellenLinks erstellen
<a href="ziel.html">Linktext</a>
<a href=“www.leon berg.de">Linktext</a>
<a href="mailto:[email protected]">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>
![Page 18: Patrick Cato. Wochenplan Montag: - HTML Grundlagen - Hintergrund - Bilder einfügen - Links Dienstag: -Frames -Tabellen -Formulare Mittwoch -CSS -Grundlagen](https://reader035.vdokument.com/reader035/viewer/2022062512/55204d8249795902118d5605/html5/thumbnails/18.jpg)
Mehre Links auf einem BildMehre Links auf einem Bild
![Page 19: Patrick Cato. Wochenplan Montag: - HTML Grundlagen - Hintergrund - Bilder einfügen - Links Dienstag: -Frames -Tabellen -Formulare Mittwoch -CSS -Grundlagen](https://reader035.vdokument.com/reader035/viewer/2022062512/55204d8249795902118d5605/html5/thumbnails/19.jpg)
![Page 20: Patrick Cato. Wochenplan Montag: - HTML Grundlagen - Hintergrund - Bilder einfügen - Links Dienstag: -Frames -Tabellen -Formulare Mittwoch -CSS -Grundlagen](https://reader035.vdokument.com/reader035/viewer/2022062512/55204d8249795902118d5605/html5/thumbnails/20.jpg)
![Page 21: Patrick Cato. Wochenplan Montag: - HTML Grundlagen - Hintergrund - Bilder einfügen - Links Dienstag: -Frames -Tabellen -Formulare Mittwoch -CSS -Grundlagen](https://reader035.vdokument.com/reader035/viewer/2022062512/55204d8249795902118d5605/html5/thumbnails/21.jpg)
Frames (Seiten unterteilen)Frames (Seiten unterteilen)
![Page 22: Patrick Cato. Wochenplan Montag: - HTML Grundlagen - Hintergrund - Bilder einfügen - Links Dienstag: -Frames -Tabellen -Formulare Mittwoch -CSS -Grundlagen](https://reader035.vdokument.com/reader035/viewer/2022062512/55204d8249795902118d5605/html5/thumbnails/22.jpg)
<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>
![Page 23: Patrick Cato. Wochenplan Montag: - HTML Grundlagen - Hintergrund - Bilder einfügen - Links Dienstag: -Frames -Tabellen -Formulare Mittwoch -CSS -Grundlagen](https://reader035.vdokument.com/reader035/viewer/2022062512/55204d8249795902118d5605/html5/thumbnails/23.jpg)
TabellenTabellen
<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>
![Page 24: Patrick Cato. Wochenplan Montag: - HTML Grundlagen - Hintergrund - Bilder einfügen - Links Dienstag: -Frames -Tabellen -Formulare Mittwoch -CSS -Grundlagen](https://reader035.vdokument.com/reader035/viewer/2022062512/55204d8249795902118d5605/html5/thumbnails/24.jpg)
Vor- und Nachteile von CSS
Größere Layoutmöglichkeiten:Das Design ist konsistent zwischen den Browser (siehe unten).
Kürzere Zeitenzur 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.
![Page 25: Patrick Cato. Wochenplan Montag: - HTML Grundlagen - Hintergrund - Bilder einfügen - Links Dienstag: -Frames -Tabellen -Formulare Mittwoch -CSS -Grundlagen](https://reader035.vdokument.com/reader035/viewer/2022062512/55204d8249795902118d5605/html5/thumbnails/25.jpg)
CSS GrundgerüstCSS Grundgerüst
<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-family: Arial;
font-style:italic;
}
</style>
Zwischen <head>
</head>
![Page 26: Patrick Cato. Wochenplan Montag: - HTML Grundlagen - Hintergrund - Bilder einfügen - Links Dienstag: -Frames -Tabellen -Formulare Mittwoch -CSS -Grundlagen](https://reader035.vdokument.com/reader035/viewer/2022062512/55204d8249795902118d5605/html5/thumbnails/26.jpg)
NavigationsmenüNavigationsmenü
a:link {color:red}
a:visited {color:yellow}
a:hover {font-weight:bold;color:black;}
![Page 27: Patrick Cato. Wochenplan Montag: - HTML Grundlagen - Hintergrund - Bilder einfügen - Links Dienstag: -Frames -Tabellen -Formulare Mittwoch -CSS -Grundlagen](https://reader035.vdokument.com/reader035/viewer/2022062512/55204d8249795902118d5605/html5/thumbnails/27.jpg)
Bereiche mit Div definierenBereiche mit Div definieren
<div>
</div>
![Page 28: Patrick Cato. Wochenplan Montag: - HTML Grundlagen - Hintergrund - Bilder einfügen - Links Dienstag: -Frames -Tabellen -Formulare Mittwoch -CSS -Grundlagen](https://reader035.vdokument.com/reader035/viewer/2022062512/55204d8249795902118d5605/html5/thumbnails/28.jpg)
Boxen definierenBoxen definieren<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
![Page 29: Patrick Cato. Wochenplan Montag: - HTML Grundlagen - Hintergrund - Bilder einfügen - Links Dienstag: -Frames -Tabellen -Formulare Mittwoch -CSS -Grundlagen](https://reader035.vdokument.com/reader035/viewer/2022062512/55204d8249795902118d5605/html5/thumbnails/29.jpg)
#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!
![Page 30: Patrick Cato. Wochenplan Montag: - HTML Grundlagen - Hintergrund - Bilder einfügen - Links Dienstag: -Frames -Tabellen -Formulare Mittwoch -CSS -Grundlagen](https://reader035.vdokument.com/reader035/viewer/2022062512/55204d8249795902118d5605/html5/thumbnails/30.jpg)
BOX vergößern (oben, rechts, unten, links)
Padding:10px 20px 30px 0px;