• Protopage-Zentrale von Elektronische Dokumente

• Zum Protopage-Tutorial

• Mon April 23 - Webkonferenz mit DimDim (Online Praktikum)

• Mon May 7 - B3 HTML/ CSS fertig haben

• Tue April 24 - Word Wissenscollage muss fertig sein

• Mon April 30 - Maifeiertag

• Mon May 21 - Präsenspraktikum

• Fri May 25 - Pfingsten

• Sat May 26 - Pfingsten

• Sun May 27 - Pfingsten

• Thu May 31 - ISWI

• Fri June 1 - ISWI

• Sat June 2 - ISWI

• Sun June 3 - ISWI

• Mon June 4 - ISWI mögliches Präsenspraktikum wegen Disacade-micus

• Tue June 5 - ISWI

• Wed June 6 - ISWI Fronleichnam

• Thu June 7 - ISWI

• Fri June 8 - ISWI

• Sat June 9 - ISWI

• Wed May 16 - Christi Himmelfahrt

• Mon June 18 - Präsenspraktikum

• Wed June 20 - Berlin Exkursion

• Thu June 21 - Berlin Exkursion

• Mon July 2 - Präsenspraktikum

• Mon July 9 - Präsenspraktikum

• Thu August 30 - Abgabe Projektarbeit Booklet

• Sun June 24 - Bergfestwoche Karaokeabend

• Mon June 25 - Bergfestwoche Bergfestfilm Movie Lounge

• Tue June 26 - Bergfestwoche

• Wed June 27 - Bergfestwoche

• Thu June 28 - Bergfestwoche

• Fri June 29 - Bergfestwoche

·        Öffnen eines leeren Word Dokumentes

·        Unter Datei→Seite einrichten werden die Seitenränder festgelegt, hierbei sollte man sich an die IfMK- Richtlinien halten:

·        IfMK Richtlinien: links: 4cm, rechts: 3cm, oben: 2,5cm, unten: 2,5cm

Formatvorlagen

·        Nun werden die Formatvorlagen unter Format→Formatvorlagen vordefiniert

·        Die nötigen sind Standart, Überschrift, Automatische Nummerierung, Literaturverzeichnis, Listen,         Aufzählungen, Kopfzeilen und Fußzeilen

·        Standart: Der Standart definiert die Form des Fließtextes und sollte laut IfMK die Schriftart Times New Roman, Bookman Old Style oder Garamond haben.
Die Schriftgröße sollte 12 sein und als Ausrichtung soll der Blocksatz gewählt werden.

·        Überschriften: Unter Formatvorlagen kann man die Überschriften der verschiedenen Ebenen vordefinieren und die Schriftgröße sowie die Schriftart einstellen

·        Automatische Nummerierung: Den Überschriften werden hier Nummerierungen zugewiesen. Dies findet ihr unter Formatvorlagen→z.B. Überschrift1→ändern→Nummerierung und Aufzählung/Gliederung anpassen

Kopfzeilen & Fußzeilen

·        Ansicht→Kopf-und Fußzeile

·        In der Kopf-oder Fußzeile lassen sich nun verschiedene Texte einfügen, wie das Thema, Name aber       auch die Seitenzahlen

Inhaltsverzeichnis

Dieses findet ihr unter Einfügen→Referenz→Index und Verzeichnisse→Inhaltsverzeichnis und später könnt ihr dort euer Inhaltsverzeichnis aus dem Rohmaterial einfügen

Speichern des Dokumentes als *.dot

Unter Datei→Speichern unter kann man das Dokument nun als Dateityp *.dot abspeichern

HTML ist eine Seitenbeschreibungssprache, mit der dem Browser "gesagt" wird, wie die Daten angezeigt werden: welche Einheiten (Buchstaben, Wörter, Sätze, Absätze) z.B. fett gedruckt werden, in bestimmten Farben dargestellt werden etc.

Dazu werden über das Internet HTML-Seiten übertragen. Das Bedeutsame dabei ist, dass die HTML-Seiten in Klartext übertragen werden und so jeder schauen kann, wie das eigentlich funktioniert. Einfach mal im Browser auf "Ansicht -> Quellcode anzeigen" gehen. Das zunächst Verwirrende ist, dass zwischen den Informationen noch was auftaucht.

Es gibt also nicht nur Informationen, sondern auch Anweisungen, wie diese Informationen angezeigt werden sollen. Das geschieht über HTML-TAGs.

Pro:

·    Größere Layoutmöglichkeiten: Das Design ist gleich zwischen den Browser.

·    Kürzere Zeiten zur Erstellung und Pflege von Homepages: Von einer einzigen Datei aus kannst du ein komplettes Homepage-Design erstellen und bei Bedarf jederzeit ändern.

·    Schnellere Übertragung: CSS macht zahlreiche HTML-Wiederholungen überflüssig. Weniger Code = 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).

Contra:

·    Unterschiedliche Unterstützung durch Browser: Größter Nachteil ist die teilweise unterschiedliche Unterstützung durch den jeweiligen Browser. Deshalb: nicht alle CSS-Definitionen einsetzen!

Pro:

·    Zum Erstellen eines HTML-Dokuments reicht ein einfacher Texteditor.

·    Die Beschreibungssprache HTML ist einfacher zu erlernen als eine richtige Programmiersprache.

·    Die Webseiten, die du mit HTML erstellst, werden direkt vom dem Browser auf deinem Betriebssystem interpretiert. Dadurch können sie plattformübergreifend auf jedem Computer genutzt werden, solange ein Browser dafür verfügbar ist.

·    Man kann immer von anderen HTML- Designern lernen, da der Quellcode einer HTML-Seite lesbar ist, hat jeder Zugriff auf die darin enthaltenen Informationen.

·    Webseiten können einfach über Querverweise (Hyperlinks) verknüpft werden. Somit können Informationen über Inhaltsverzeichnisse, Indizes usw. aufgerufen werden.

·    HTML kann sowohl für das Internet, als auch zur Veröffentlichung von Informationen auf Datenträgern wie z.B. einer CD-ROM benutzt werden.

·    Änderunegn und Ergänzungen einer Webseite können flexibel vorgenommen und durch die Druckfunktion des Browsers mit geringen Kosten vervielfältigt werden.

Contra:

·    Die Darstellung von Webseiten ist in der Regel von Browser zu Browser unterschiedlich, auch zwischen den Versionen eines einzelnen Browsers.

·    Jeder Benutzer hat Zugriff auf die Informationen und Grafiken einer Webseite und kann diese letztendlich unberechtigterweise für seine Zwecke benutzen.

Aufbau von CSS Befehlen

Grundlagen des CSS Konzept

CSS ist einfacher als im Allgemeinen angenommen. Es gibt nur ein paar grundlegende Regeln zum Erfolg mit CSS:

Aufbau

Im Beispiel oben werden alle Überschriften h1 nun die Farbe rot bekommen.

Eigenschaften und Werte

Die Vereinbarung (Deklaration) besteht aus zwei Teilen:

• dem Eigenschaftsteil, wie z. B. Farbe, Größe, und
• der dazugehörige Wert, wie rot(Farbe) oder 30 (Größe).
  

TIPP: Immer die geschwungenen Klammern beachten!

Begriffe um CSS

Vererbung

Die Deklarationen können vererbt werden. Wird z. B. für das <body>-TAG die Farbe per CSS bestimmt, hat der <li>-TAG automatisch die gleiche Farbe, wenn diese dort nicht definiert ist.

Cascade:

Es kann mehrere Style Sheets geben, die auch konkurrierend sein können. Wer dann jeweils "gewinnt", hängt von verschiedenen Regeln ab. Das gehört aber zu den Techniken für Fortgeschrittene. So kann z. B. auch ein Design extra für den Ausdruck definiert werden.

Stylesheets in HTML einbinden

Es gibt mehrer Möglichkeiten - zum erlernen sind die ersten 2 Verfahren geschickt. Dort sind die CSS direkt in der HTML-Datei. Für die Entwicklung von Websites dann empfiehlt sich die 3 Variante. Dort werden die CSS in einer externen Datei hinterlegt und diese Datei wird dann in jede HTML-Seite eingebunden.

Variante 1: Befehl direkt im Quellcode

Direkt im Quellcode wirkt der Befehl nur an dieser bestimmten Stelle der Seite, so dass man abweichende Designs verwenden kann.

Beispiel:
<h1 style="letter-spacing:30;">Überschrift</h1>

Alle Buchstaben bis zum Ende von </h1> werden jeweils mit einem Abstand von 30 zwischen den Buchstaben dargestellt.

Natürlich können die Befehle auch kombiniert werden.

Zusätzlich zur Buchstabenbreite kommt jetzt noch eine andere Farbe hinzu:

Hier ist natürlich die Frage berechtigt, warum nicht gleich mit den gewohnten HTML Befehlen? Die Logik der Sache wird klar, wenn man diese Formatdefinitionen auslagert (siehe Variante 3 unten). Dadurch kann dann z. B. eine Einstellung erstellt werden, die dann für alle <h1> gelten, ohne dass speziell noch in den HTML-TAG eingegriffen werden muss.

Variante 2: Am Anfang der HTML-Datei

Im Kopfbereich der HTML-Datei werden die CSS-Eigenschaften definiert. Diese wirken dann auf das ganze HTML-Dokument 

<html>
<head>
<style type="text/css">
<!--
h1 {
color:red;
letter-spacing:30;
}
-->
</style>
</head>
<body>
<h1>jetzt HTML lernen mit CSS</h1>
</body>
</html>

Variante 3: Auslagern von CSS-Befehlen

Zum Auslagern werden 2 Dinge benötigt. Als erstes eine neue Datei, ich nenne diese design.css (kann aber auch beliebig anders heißen) und als zweites einen Verweis darauf in der HTML-Datei, die diese ausgelagerte Datei nutzen soll.

Verweis in der HTML-Datei:
Dieser Verweis sollte im head-Bereich eingegeben werden.

So, nun erstellen wir eine neue Datei mit dem Namen "design.css".

Inhalt:

Unbedingt auf Leerzeichen achten, und als Klammern kommen hier die geschweiften zum Zuge!! So, Datei abspeichern und im HTML Editor zurück zur ursprünglichen Internetseite.

Design per CSS - FLOAT

Über das Float-Element kann eine Ausrichtung von Elementen geschehen.

Float ( engl. = fließen, Hin- und Herbewegung) bestimmt wie ein Blockelement reagieren soll - im Klartext, neben dem Blockelement dürfen weitere Elementen sich befinden, die ansonsten unterhalb platziert würden.

Beispiel Bildervorschau (ohne Links zur Vereinfachung)

Beispiel Bildervorschau (ohne Links zur Vereinfachung)

<style type="text/css">
 <!--
 .bildvorschau {
   border:2px dotted orange;
   float:left;
 }
 -->
 </style>
 
 <img class="bildvorschau" src="ax.gif" />
 <img class="bildvorschau" src="ax.gif" />
 ...
 <img class="bildvorschau" src="ax.gif" />
 

Interessant ist, was passiert, wenn der Platz im Anzeigefenster nicht ausreicht - dann wird einfach in die nächste Zeile umgebrochen. Das ist ein Grund, warum manche Websitenbauer das FLOAT-Element in den Wahnsinn treibt : - aber es halb so wild.

Website-Layout mit Float, DIVs, CLASS und ID

Und endlich kommen wir zu dem wichtigen Punkt - Layout einer Website mit CSS.

Wir wollen im ersten Beispiel ein 2 spaltiges Layout (links Steuerung, rechts Inhalt) erstellen. Quellcode vereinfacht ohne Links - es geht erst mal ums Prinzip.

Der entsprechende Quellcode:

<style type="text/css">
 <!--
 #navi {
   float:left;
   background-color:thistle;
   width:  150px;
 }
 
 #inhalte {
   background-color:lightblue;
   width:  300px;
   height: 100px;
 }
 -->
 </style>
 
 <div id="navi">
 <ul>   <li>Startseite</li>
   <li>Impressum</li>
 </ul>
 </div>
 
 <div id="inhalte">
 Hier HTML und CSS lernen und die eigene Website erstellen - selbst ist der Mensch
 </div> 

Und im folgenden Beispiel ist zu sehen, wie ein float:right wirkt - am besten auch selber probieren!

sauberes 2 Spalten Layout

OK - das bei float das Element von weiteren Inhalten "umflossen" wird, mag nicht jedem gefallen, aber es ist der erste Schritt. Die wweite Box (mit dem Inhalt) kann jetzt z.B. über margin ausgerichtet werden. Gleiches Beispiel oben.

<style type="text/css">
 <!--
 #navi {
   float:left;
   background-color:thistle;
   width:  150px;
 }
 
 #inhalte {
   background-color:lightblue;
   margin-left: 200px;
   width:  300px;
   height: 100px;
 }
 -->
 </style>
 
 <div id="navi">
 <ul>   <li>Startseite</li>
   <li>Impressum</li>
 </ul>
 </div>
 
 <div id="inhalte">
 Hier HTML und CSS lernen und die 
 eigene Website erstellen - selbst ist der Mensch
 </div> 

Und das Ergebnis davon

DIV und SPANs

Über die 2 Elemente DIV und SPAN kann CSS erst seine volle Pracht entfalten.

Beide Elemente werden primär zum Begrenzen von Bereichen genutzt. Und über die Attribute der Elemente kann dann Design in die umschlossenen Bereiche gebracht werden. Dabei können die Elemente geschachtelt werden.

Wichtig ist zu verstehen, was der Unterschied zwischen den 2 Elementen ist. DIV ist ein Blockelement. Nach ein dem DIV erfolgt nach der Definition ein neuer Block. SPAN dagegen kann innerhalb eines Bereiches angewendet werden. Im folgenden Beispiel wird der Unterscheid deutlicher.

Der CSS-Befehl background-color:farbe; bewirkt, dass der Hintergrund des Elements eingefährbt wird.

DIV - Einsatz

<div style="background-color:red;">
  Steuerung
</div>
 
<div style="background-color:lawngreen;">
  Inhalt
</div>
 

Durch die Verwendung von DIV geht das nächste Element in der nächsten Zeile weiter - wie eine Platzierung nebeneinander erfolgen kann, kommt in einem späteren Kapitel

SPAN - Anwendung (nicht SPAM!)

 ein <span style="background-color:yellow;">wie vom Textmarker 
 hervorgehobener</span> Text und dann geht es normal weiter 

Innerhalb der Zeile geht es nach dem SPAN-Element ganz normal weiter.

Mischen von DIVs und SPANs

Die Elemente können ineinander geschachtet werden (egal ob SPAN oder DIV).

Im Beispiel wird das Textmarkerbeispiel erweitert, dass der Text zusätzlich noch rot wird.

ein    
  <span style="background-color:yellow;">
    wie vom 
      <span style="color:red;"> 
        Textmarker 
      </span>
    hervorgehobener   
  </span>   
Text und dann geht es normal weiter  

Was ist nun ein HTML-TAG? - Als HTML-TAG wird ein einzelner HTML-"Befehl" bezeichnet. So z. B. steht der HTML-TAG

 <b>
 fett darzustellender Text
 </b>

3 sind Dinge zu beachten:

1. Die TAGs sitzen immer zwischen Kleiner- und Größerzeichen < .. >
2. Zwischen den < > befindet sich die Anweisung - hier b - und wie so vieles im Leben ist das eine Abkürzung und das Ganze von dem englischen "bold" (fett). Dementsprechend sind alle Befehle nur Abkürzungen von englischen Begriffen. So lassen sich die Befehle gut merken (vorausgesetzt, man kann Englisch).
3. Alle HTML-TAGs immer klein schreiben. Auswirkungen werden zwar erst in der Zukunft sichtbar, aber wenn man sich etwas falsches angewöhnt, bekommt man das schlecht wieder los.

Alles hat ein Anfang und ein Ende. So auch praktisch fast jeder HTML-TAG.

Anfangs- und End-TAGs

Weiterhin gibt es einen Anfangs-TAG und einen End-TAG. Sonst müsste unser Text mit obigem Beispiel ja immer fett sein. Der End-TAG ist fast identisch mit dem Anfangs-TAG, mit dem einzigen Unterschied, dass nach dem Kleinerzeichen (<) ein Schrägstrich kommt.

Also so:

 </befehl>

Steuerung per CSS

So nun geht es an die Feinarbeit - wir basteln eine Steuerung per CSS - dazu nehmen Sie als Zutaten (den nur mit hochwertigen Zutaten schmeckt das Gericht), ein Prise <ul>, eine Handvoll <li>, als Füllung wählen Sie Ihren gewünschten Inhalt wie Beispielsweise "Startseite", "Über mich", "Termine" etc.

Zum Abschmecken eine Handvoll CSS, wie "border", "background-color" und "padding" und "margin"

Steuerung vertikal

Unser Grundaufbau in HTML sieht wie folgt aus (das ganze Design kommt aus der CSS-Definition!)

Das sieht erstmal als reines HTML nicht wirklich spektakulär aus.

Da die Steuerung auf jeder unserer Seiten später auftaucht, binden wir die CSS-Definition über eine externe Datei ein. Dadurch können Änderungen (Relaunch einer Website) vereinfacht werden. Designumstellungen werden i.d.R. an einer einzigen Datei erledigt (egal wie viele html-Seiten Sie auch haben.)

Design über externe CSS-Datei

Diese Datei speichern wir mit dem Name "design.css" ab (der Namen, mit der die Datei über link rel="stylesheet" eingebunden wird).

Inhalt der Datei ist folgender:

#navi {
   width:200px;                   /* Breite des Bereichs */
   text-align:left;               /* Textausrichtung     */
   margin-top:10px;               /* Außenabstand oben   */
   margin-bottom:10px;            /* Außenabstand unten  */
   margin-left:20px;              /* Außenabstand links  */
   margin-right:15px;             /* Außenabstand rechts */
 }
 
 #navi ul {
   list-style:none;               /* keine Aufzählungspunkte */
 }
 
 #navi li {
   background-color:silver;       /* Hintergrundfarbe   */
   border-top:1px black solid;    /* Rahmenfarbe Auflistungpunkt oben */
   border-left:25px orange solid; /* Rahmenfarbe Auflistungpunkt oben */
   border-bottom:1px red solid;   /* Rahmenfarbe unten  */
   border-right:2px blue solid;   /* Rahmenfarbe unten  */
   margin-top:10px;               /* Außenabstand oben  */
   padding-top:8px;               /* Innenabstand oben  */
   padding-bottom:8px;            /* Innenabstand unten */
   padding-left:8px;              /* Innenabstand unten */
   padding-right:8px;             /* Innenabstand unten */
 } 

Steuerung horziontal

Aus der vertikal Steuerung können wir schnell eine horziontale machen, wenn nur ein wenige Menüpunkte vorhanden sind.

Nutzen Sie hier einfach float:left;

#navi {
   text-align:left;               /* Textausrichtung     */
   margin-top:10px;               /* Außenabstand oben   */
   margin-bottom:10px;            /* Außenabstand unten  */
   margin-left:20px;              /* Außenabstand links  */
   margin-right:15px;             /* Außenabstand rechts */
 }
 
 #navi ul {
   list-style:none;               /* keine Aufzählungspunkte */
 }
 
 #navi li {
   float:left;                     /* Anordnung links   */
   margin-left:15px;               /* Außenabstand oben */
   width:90px;                     /* Breite des Links  */
 
   background-color:silver;        /* Hintergrundfarbe  */
   border-top:1px black solid;     /* Rahmenfarbe Auflistungpunkt oben */
   border-left:25px orange solid;  /* Rahmenfarbe Auflistungpunkt oben */
   border-bottom:1px red solid;    /* Rahmenfarbe unten  */
   border-right:2px blue solid;    /* Rahmenfarbe unten  */
   margin-top:10px;                /* Außenabstand oben  */
   padding-top:8px;                /* Innenabstand oben  */
   padding-bottom:8px;             /* Innenabstand unten */
   padding-left:8px;               /* Innenabstand unten */
   padding-right:8px;              /* Innenabstand unten */
 } 

CSS - Bilder und Hintergrundbilder

Auch bei Bilder hat die Trennung von Inhalt und Design nicht halt gemacht. Im HTML-Code wird vermerkt, dass ein Bild kommt und wo der Speicherort ist. In der CSS-Design erfolgt die Größe, Ausrichtung, Randabstände und Randdarstellung.

Im HTML-Code kann das Bild eine ID bekommen, wenn die Einstellungen nur für dieses Bild gelten sollen oder eine Klasse (class), wenn man mehrere Bilder mit der selben Größe, Ausrichtung und Eigenschaften hat.

Im folgenden Beispiel wird das Bild durch die CSS-Definition rechts ausgerichtet, mit einem Abstand nach links von 20 Pixel und dass der Text das Bild umfließt.

<style type="text/css">
<!--
#rechts {
    float:right;
    width:234px;
    height:123px;
    padding-right:30;
    border:1px solid red;
} 
-->
</style>
  
<img id="rechts" src="bilder/html-kurs-logo.gif" />
Hier kommt Text, der das Bild links umfließt und automatisch umgebrochen wird

Hier kommt Text, der das Bild links umfließt und automatisch umgebrochen wird.

Für eine bessere Darstellung der Bildgröße, erhält das Bild einen roten Rahmen.

Hintergrundbilder - wie das Bild in den Hintergrund kommt

Um das Bild in den Hintergrund zu packen, gibt es mehrere Möglichkeiten. Die verbreiteste ist, es in der CSS-Datei einen Bereich zu Definieren, der für das komplette HTML-Dokument gilt - also der Tag html bzw. body.

Beispiel: Das Bild wird nun gesetzt und wiederholt sich automatisch.
Die Schriftgröße wird auf 80% definiert und das eine Verdana verwendet werden soll. Ist keine Verdana auf dem Computer installiert, dann eine Arial und notfall einfach eine Schrift ohne Serifen.
Und zum Schluß wird noch die Farbe #ff0000 mitgegeben.

html, body {
  background:url(bilder/html-kurs-logo.gif);
  font: 80% Verdana, Arial, Verdana, Helvetica, sans-serif;
  color: #ff0000;
}

Hintergrundbild mit Wiederholung X/Y

Beispiel: Das Bild wird nun links oben (left top) gesetzt und wiederholt sich nicht.

html, body {
  background:url(bilder/html-kurs-logo.gif) no-repeat right top;
}

Beispiel: Das Bild wiederholt sich in der Horizontalen.

html, body {
  background:url(bilder/html-kurs-logo.gif) repeat-x;
}

Hintergrundbild mit Wiederholung x

Und nun kommt der Kniff, für was man solche Hintergrundwiederholungen gebrauchen kann

1. Man nehme folgende Grafik: Bild alleine anzeigen
2. lasse diese Grafik als Hintergrundbild horizontal wiederholen
3. Platziere die Steuerung in diesen Bereich
4. Platziere den Inhalt unterhalb
5. Fertig ist eine einfacher Internetauftritt

Und hier das fertige Beispiel - varrieren Sie die Fenstergröße

Hingrundbild komplett auf 100%

Wenn nun ein Hintergrundbild komplett angezeigt werden soll und automatisch in der Größe varriert (man möchte immer das ganze Bild sehen) gibt es auch dafür einen Kniff - das aber nur als Beispiel - in Quellcode sehen uns selber erarbeiten :)

100% Hintergrundbild

Hintergrund für andere Elemente

Anderen Elementen kann auch über die Auszeichnung "background:url(bilder/...)" ein Hintergrundbild zugewießen werden.

Beispielsweise einer Tabelle - Beispiel in extra Fenster (variieren Sie die Fensterbreite!)

table {
  width:80%;
  height:70%;
  background:#ffffff url(../photo/seifenstuecke-hell.jpg) no-repeat scroll ;
  margin:0pt auto;

CSS Definitionen - Übersicht CSS Befehle

Es sind verschiedene Begriffe um CSS zu finden wie beispielsweise CSS Definitionen, CSS Notation, CSS Syntax, CSS Elemente und CSS Formate. Im folgenden eine Übersicht über die wichtigsten CSS Befehle und deren Eigenschaften

CSS Tipps und Tricks

Abstand nach Überschriften etc.

Teilweise ist der Abstand nach einem Blockelement wie z.B. die Überschrift nicht erwünscht. Dieser Abstand kann sehr einfach über CSS wie gewünscht eingestellt werden.

Abstände komplett aufheben - Abstände nach oben/unten definieren:

Nach Belieben kann der Abstand geändert werden - einfach die gewünschte Pixelzahl einstellen. Also anstatt 0px z.B. dann 3px

Bilderrahmen mit Punkten bei Mauskontakt

Wenn ein Bild mit der Maus überfahren wird, erscheinen anstatt dem normalen Rahmen ein gepunkteter Rahmen

Anfangsbuchstaben hervorgehoben

Besonders als erster Buchstabe in einem Absatz lockert er den Absatz auf und dient dem Aussehen. Natürlich sollte genug Text folgen, damit dieser den Buchstaben "umfließen" kann. Ist der Browser nicht CSS-tauglich, wird der Buchstabe ganz normal angezeigt.

Text umfließt Bild

Wenn anstatt dem HTML-TAG align="right" CCS verwendet werden soll, kann dies über die folgenden Zeilen definiert werden. Um das Bild fließt der Text. Über float wird festgelegt, ob rechts oder links herum.
width und height sollten auf das entsprechende Bild angepasst werden.
Einen Rahmen erhält man durch die border-Anweisung.

CLASS und ID - Bezeichner für CSS-Elemente

CSS-Elemente können über diese beiden "Bezeichner" angesprochen werden.

Beispiel:

Oder auch
<div id="inhalt"> Text</div>
<span id="inhalt"> Text</span>

bzw. bei normalen HTML-Tags
<b class="inhalt">Text</b>

Das besonderer an CLASS ist, das damit mehrere Elemente ausgezeichnet werden können, dagegen die ID nur für 1 einziges Element pro Seite verwendet werden darf. ID ist also zur eindeutigen Bestimmung eines Elementes.

Sinn und Zweck von CLASS

Über die Klassen können wiederholende Designelemente bestimmt werden, im folgenden Beispiel wird im Text mehrere Stellen mit einer Art Textmarker hervorgehoben.

<style type="text/css"> 
<!-- 
.textmarker {   
  background-color:yellow; 
} --> 
</style>  

im Beispiel wird diese  <span class="textmarker">Stelle im Text</span>  
mit einer Art  <span class="textmarker">Textmarker</span> hervorgehoben. 

Hinweis: für Classen wird in der CSS-Definition vor dem Namen ein Punkt geschrieben (für ID ein # - siehen unten).

Sinn und Zweck von ID

Elemente, die es nur einmal gibt. Z.B. die Steuerung können so mit einer ID und den dazugehörigen CSS-Design ausgestattet werden.

Beispiel: Rahmen um die Steuerung und Hintergrundfarbe

<style type="text/css"> 
<!-- 
#navi {  
 background-color:silver;  
 border:2px dotted orange; 
 float:left;
} 
--> 
</style>  

<div id="navi">   
  <ul>
    <li><a href="index.htm">Startseite</a></li>
    <li><a href="impressum.htm">Impressum</a></li> 
  </ul> 
</div>  

<div id="inhalt">  
Hier kommt mehr zum Thema html lernen und homepage erstellen … 
</div> 

Für jedes Element wird eine rechteckige Fläche in CSS reserviert. Der englische Begriff "Box" steht für Schachtel (in unserem Fall, da html-Seiten ja eher in 2 Dimensionen leben, also eine Fläche). Über das Box-Modell wird das Design einer Seite erstellt, daher ist ein Verständnis diese Box-Modells wichtig.

Wie sieht der Aufbau der "Box" aus?

Von Innen nach außen:

• Inhalt: für den Inhalt kann eine Breite (width) und eine Höhe (height) definiert werden
• Innenabstand: definiert den Platz zwischen Inhalt und Rahmen
• Rahmen: dem Rahmen kann eine Stärke mitgegeben werden, die Strichart und eine Farbe (auch der Rahmen unsichtbar sein)
• Außenabstand: Abstand zu anderen Elementen

Shortcuts werden Tastenkombinationen genannt, durch die Eingaben schneller gemacht werden können, bzw. die auch Aktionen auslösen.

Viele Shortcuts sind noch effizienter, wenn zuvor der Text markiert wird, auf den sich dies beziehen soll. So wird z. B. der Anfangs-TAG vor den Text und der End-TAG hinter den markierten Text gesetzt, z. B. bei Überschriften.

Anbei sind nur die wichtigsten aufgelistet (das sind die, die ich wohl am häufigsten benötige :-)

Jede HTML-Seite hat ein Grundgerüst, das aus 2 Teilen besteht.

Folgend eine Minimalversion, die bereits funktioniert, aber für den professionellen Bedarf noch erweitert werden muss. Folgendes Grundgerüst ist zum Lernen und Testen aber ausreichend:

<html>  
<head>  
</head>

<body>  
</body>   

</html> 

Die 2 Bereiche sind der Head-Bereich und der Body-Bereich:

a. Ein Start-Tag wird immer mit dem dazugehörigen End-Tag geschlossen.

b. Aus Kompatibilitätsgründen zu XHTML wird dir empfohlen, auch Elemente ohne Inhalt wie, z.B. <br>, <img> immer zu schließen: <br />, <img />

c. Aus Kompatibilitätsgründen zu XHTML wird dir empfohlen Element- und Attributnamen immer klein zu schreiben (z.B. <a href=http://www.ifmk.de >Das ist ein Link</a>)

d. Setze Attributwerte immer in Anführungsstriche (z.B. src=“blume.jpg“ oder alt=“Das Photo zeigt eine Sonnenblume“)

e. Verwende immer Entitäten (z.B. für „ä“ = „&auml;“)

Dies ist die richtige Art und Weise Tags zu beginnen und zu schließen:

<html>
 <head>
 </head>

 <body>
 </body>

 </html>

Sonderzeichen sind Zeichen, die nicht auf der Tastatur vorhanden sind oder die eine spezielle Bedeutung haben. Zur Darstellung von Sonderzeichen werden in HTML sogenannte Entities verwendet. Eine Entity ist ein Name für ein bestimmtes Sonderzeichen.

Entities werden durch ein &-Zeichen am Anfang und durch ein Semikolon am Ende gekennzeichnet.

a. Für die Verlinkung von elektronischen Dokumenten in einer HTML-Seite ist die korrekte Pfadangabe wichtig.

b. Hierbei werden absolute von relativen Pfaden unterschieden. Hyperlinks zu externen Webseiten müssen als absoluter Pfad gesetzt werden. Eingebundene Bilder hingegen können auch relativ verlinkt werden, um die Darstellung der HTML-Seite auf jedem System auch offline zu gewährleisten. Dasselbe gilt für interne Unterseiten eines HTML-Projektes.

c. Ebenfalls essentiell ist die Groß- und Kleinschreibung der verlinkten Dokumente.

HTML strukturiert eine Seite und beschreibt nicht wie sie aussieht. Ausschließlich CSS dient zur Gestaltung der Seite. Beachten Sie dies schon mit Beginn der Erstellung, eine nachträgliche Anpassung ist oft unnötig und zeitaufwendig.

Viele Formatierungselemente und Attribute in HTML verstoßen gegen die strikte Trennung von Inhalt und Layout. Demnach sollten sie nicht mehr verwendet werden und erhalten den Status „deprecated“ (z.B. „font-Tag“). Verwenden sie deshalb ausschließlich Logische Auszeichnungen (z.B. „em-Tag“ oder „strong-Tag“) anstatt Physikalischen Auszeichnung bzw. Visuellen Auszeichnung (z.B. „i-Tag“ oder „b-Tag“).

Die Verwendung von Layouttabellen verstößt gegen die strikte Trennung von Inhalt und Layout. Inzwischen ist es ohne Probleme möglich tabellenfreie Layouts mit CSS zu erstellen.

Zu viel verschiedene Formatierungen und blinkende Layoutelemente können leicht Verwirrung schaffen, sind nicht immer lesbar und lenken vom Inhalt ab.

Verwenden Sie stets das „alt-Attribut“ um Grafiken, Bilder, Formularelemente, applets und so weiter zu beschreiben, um jedem Nutzer die Chance zu geben, die Inhalte zu erfassen.

a. Nicht alle HTML-Eigenschaften und CSS-Regeln funktionieren in jedem Browser. Es handelt sich dabei meist um zusätzliche Layouteffekte. Versuchen Sie sich auf die gängigen CSS-Regeln zu beschränken, die auf allen Browsern funktionieren. Die ggf. ein wenig abweichende Darstellung einer Seite auf unterschiedlichen Browsern ist dabei nicht gemeint. (In den meisten Werken zu HTML & CSS sind CSSReferenzkarten enthalten, die anzeigen welche CSS-Regeln von den gängigen Browsern unterstützt werden).

b. Horizontale Scrollleisten sind nicht benutzerfreundlich. Durch Verwendung von h. S. kann nicht ausgeschlossen werden, dass der Inhalt teilweise oder gar nicht wahrgenommen wird. Abhilfe schafft eine feste horizontale Seitenbeschränkung und die automatische Verwendung von vertikalen Scrollleisten in CSS.

Erweitern Sie Ihre HTML-Seite mit sinnvollen Zusatzinformationen und vermeiden Sie überflüssige Informationen bzw. Wiederholungen. Unterlassen Sie den Missbrauch von Metainformationen zum eigenen Vorteil (z.B. Werbung, gezieltes Ranking, Spam).

In Meta-Angaben können Sie verschiedene nützliche Anweisungen für Web-Server, Web-Browser und automatische Suchprogramme im Internet ("Robots") notieren. Meta-Angaben können Angaben zum Autor und zum Inhalt der Datei enthalten. Sie können aber auch HTTP-Befehle absetzen, zum Beispiel zum automatischen Weiterleiten des Web-Browsers zu einer anderen Adresse.

Meta-Angaben sind nicht für persönliche Anmerkungen oder Kommentare zum Quelltext der HTML-Datei gedacht. Für solche Angaben können Sie  Kommentare definieren.

Der HTML-Standard seit Version 4.0 schreibt keine konkreten Meta-Angaben mehr vor, sondern definiert lediglich den grundsätzlichen Aufbau einer Meta-Angabe. Zur Standardisierung von Meta-Angaben arbeitet das W3-Konsortium stattdessen an einer Sprache namens Resource Description Framework (RDF). Auf den Web-Seiten des W3-Konsortiums finden Sie  Informationen zum Resource Description Framework.

Für jede Meta-Angabe notieren Sie ein Meta-Tag im HTML-Dateikopf. Es ist also kein Problem, mehrere Meta-Tags zu notieren.