Übersicht
Überblick
●
Html → Darstellung von Inhalten auf einer Internetseite
●
CSS → Gestaltung der Seite (Aufbau, Schrifttypen, Farben, etc.)
●
Javascript → Zur Steuerung der
Benutzerinteraktion
Aufbau einer HTML-Seite
●
Head → Metainformationen (Author, Inhalt der Seite, Link auf CSS-Datei,
Umlautkonvertierung, etc.)
●
Body → Eigentlicher Inhalt der Seite
(Überschriften, Text, Bilder, Aufzählungen,
Eingabefelder, Buttons, etc.)
Befehle in Html
●
Befehle werden zur Laufzeit vom Browser interpretiert und bestehen aus sog. TAGs
<..> ...</..>.
●
Befehle haben Attribute und Attributwerte.
Bsp.:
<img src="BILD.jpg" alt="Text unter dem
Bild" width="104" height="142">
Html Befehle
●
<h1>1. Überschrift</h1>
●
<h2>1.1 Überschrift</h2>
●
<h3>1.1.1 Überschrift</h3>
●
<p>Absätze</p>
●
<a href="www.bko-opladen.de">Ich bin einer Verknüpfung</a>
●
<img src="BILD.jpg" alt="Text unter dem Bild" width="104"
height="142">
●
<br> Zeilenumbruch
●
<hr> Horizontale Linie
Aufzählungen in Html
<p>An ordered list: (durchnummeriert) </p>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<p>An unordered list: (Spiegelpunkte)</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Html Zeichenformtierung
●
<b> </b>, <i> </i>, <strong> </strong>, etc
●
<p>This is <sup>hochgestellt</sup> text.</p>
●
<h2>HTML <mark>markiert</mark>
Formatting</h2>
●
…
Details:
http://www.w3schools.com/html/html_formatting.asp
Farben in CSS/Html
●
color: #A300A3 oder Namen aqua
●
im Hexadezimalsystem
●
je höher umso intensiver
Details:
http://www.w3schools.com/html/html_colorna
mes.asp
CSS
in header Verweis auf CSS-Datei:
<link href=“myStyle.css“ rel=“stylesheet“ />
---> relative / absolute Adressierung !!!!
oder <head> ….
<style>
#header { …. }
</style> </head>
CSS-Datei (1)
body {
background-color: #d0e4fe;
} h1 {
color: orange;
text-align: center;
} p {
font-family: "Times New Roman";
font-size: 20px;
}
→ Design einzelner Html-Elemente wird festgelegt.
CSS – Selektieren nach IDs
CSS: #kopf {background: yellow;
height: …...
font-size: ….
…...} ;
der ID-Selektor beginnt mit einem #
Html:
<p>My name is Donald.</p>
<p ID="kopf">Ducksburg.</p> → wie Absatzformatierung oder
<div ID="kopf"> …...</div> → ganzer Bereich wird gestaltet
CSS-Datei (2) - Klassen
CSS: .hometown {background: yellow;} ; der Klassenselektor beginnt mit einem Punkt Html:
<p>My name is Donald.</p>
<p class="hometown">I live in Ducksburg.</p>
oder
<h1 class="hometown">Ducksberg</h1>
→ vergleichbar mit Absatzformatierung
<!DOCTYPE html>
<html>
<head>
<style>
#header {
background-color:black;
color:white;
text-align:center;
adding:5px;}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px; }
#section {
width:350px;
float:left;
padding:10px; }
#footer {
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_divs
Beispiel: Aufbau einer Internetseite
<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
<div id="section">
<h2>London</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div id="footer">
Copyright © W3Schools.com
</div>
</body>
</html>
Quellen
●
http://www.w3schools.com/
●
http:// www.html-seminar.de
●
