Patrick Cato. Wochenplan Montag: - HTML Grundlagen - Hintergrund - Bilder einfügen - Links...
30
Patrick Cato
-
Upload
erdmut-druffel -
Category
Documents
-
view
111 -
download
1
Transcript of Patrick Cato. Wochenplan Montag: - HTML Grundlagen - Hintergrund - Bilder einfügen - Links...
Patrick Cato
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?
HTML SyntaxHTML Syntax
• Was braucht man?
• HTML Editor
• Geduld
• Browser
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
Meine erste HTML Seite Meine erste HTML Seite • HTML Befehle nennt man tags
Die Seite als .htm oder .html abspeichern
Texte formatierenTexte formatieren
Was fehlt?
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
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>
Nice to know….Nice to know….
<hr> oder <hr / > Linie
<marquee scrolldelay="300">Laufband</marquee>
Ä, ü, ö, ß Ä, ü, ö, ß
ä -> ä
Ä -> Ä
ö -> ö
Ö -> Ö
ü -> ü
Ü -> Ü
ß -> ß
€ -> €
& -> &
Viele Browser erkennen nicht die deutschen Sonderzeichen
WebseiteWebseite
Eine Internetseite ist mehr als nur eine Seite
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”>
Bilder einfBilder einfügenügen
Musik einfügenMusik einfügen
Musik
<EMBED SRC="yesterday.mid" WIDTH="200" HEIGHT="10" VOLUME="100" AUTOSTART="TRUE" LOOP="TRUE" CONTROLLER="TRUE">
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>
Mehre Links auf einem BildMehre Links auf einem Bild
Frames (Seiten unterteilen)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>
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>
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.
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>
NavigationsmenüNavigationsmenü
a:link {color:red}
a:visited {color:yellow}
a:hover {font-weight:bold;color:black;}
Bereiche mit Div definierenBereiche mit Div definieren
<div>
</div>
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
#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;
