Tag Archives: CSS

06 – Grundlagen HTML & CSS: Das Container-Box-Modell endlich verstehen

Dieses Video ist existenziell wichtig für die Programmierung von Internetseiten und das Verständnis von der Trennung von Inhalt (HTML) und Design (CSS). Mittels CSS ist es möglich ein und dieselbe HTML-Datei unterschiedlich (Layout / Design) darzustellen. Alles dreht sich um das Container-Box-Modell. Ohne das Verständnis für dieses Box-Modell können Sie mit Hilfe von CSS nicht das Design oder Layout erstellen, dass Sie sich wünschen.

In diesem Video zeige ich Ihnen schematisch das CSS-Container-Box-Modell anhand meiner eigenen Internetseite. Der Schematische Aufbau einer beliebigen Internetseite ist häufig ähnlich: Es gibt die Container Header, Content (der zumeist wieder unterteilt ist) sowie einen Footer.  Im Anschluss experimentieren wir im HTML-Editor mit dem Einfluss von MARGIN und PADDING auf das Box-Modell.

Wie so oft führen viele Wege nach Rom. Auch im Einsatz von HTML und CSS, zur Umsetzung eines Designs, führen viele Wege zum gewünschten Ergebnis (Design / Layout). Wichtig ist jedoch nur, dass Sie dieses Container-Box-Modell verinnerlicht haben und anzuwenden wissen.

Am Ende dieser Video-Lektion binden wir erstmals eine externe CSS-Datei ein.

PS: Neben den beiden CSS-Anweisungen MARGIN und PADDING gibt es sicherlich noch weitere Anweisungen, die wesentlichen Einfluss auf das Modell / die Darstellung haben. Auf diese wird in diesem Video nicht eingegangen.

04 – Grundlagen HTML & CSS: Kommentieren und HTML-Entities

Ein wichtiger Bestandteil sowohl im HTML-Code als auch im CSS ist das kommentieren. Kommentare können jedoch aus unterschiedlicher Motivation eingesetzt werden. Zum einen, und dafür sind Kommentare sicherlich geschaffen worden, helfen Kommentare einen Quellcode zu strukturieren und zu beschreiben. Das ist vor allem bei langen und komplexen Programmierungen sehr hilfreich. Es hilft nicht nur dem Programmierer sich in seinem eigenen Quelltext zu Recht zu finden, sondern auch anderen, die hier nachträglich Änderungen einfügen sollen.

Zum Anderen sind Kommentare ein nützliches Hilfsmittel, um bestimmte Passagen eines Quelltextes für Testzwecke „unsichtbar“ zu machen bzw. zu entfernen. Wie das geht und was ich damit genau meine, zeige ich in dieser Video-Lektion.

Außerdem nehmen wir weitere Einstellungen an dem von mir favorisierten und Ihnen empfohlenen HTML-Editor vor, damit Ihre Arbeit noch leichter und effizierter wird. Diese beiden Einstellungen betreffen das automatische korrigieren von Umlauten und Sonderzeichen in eine webfähige Interpretation. Denn Sonderzeichen wie beispielsweise Umlaute (ä, ü und ö) gibt es in der klassischen Internet-Zeichencodierung nicht. Mittels Einsatz von Entitäten (auch Maskierung von Sonderzeichen genannt) sind diese jedoch nutzbar. Eine Alternative stellt die Änderung der Zeichencodierung dar.

Tabelle ausgewählter Entitäten (HTML-Entities) als Beispiel:

Kaufmännisches UND & & amp ;
Aufzählungspunkt & bull ;
Umlaut ä & auml ;
Copyright © & copy ;

Entitäten (Entities) werden immer mit einem kaufmännischen UND (&) eingeleitet und mit einem Semikolon (;) abgeschlossen. Zwischen diesen beiden befindet sich das Kürzel für das zu erstellende Zeichen.

Umstellung der Zeichencodierung (Westeuropäisch inkl. Umlaute):

<meta http-equiv="content-type" content="text/html;
charset=ISO-8859-1">

Dieser Teil wird im Header der HTML-Seite bei den Meta-Daten eingefügt und sorgt dafür, dass der Zeichensatz ISO-8859-1 (Latin-1) eingebunden wird. In diesem Zeichensatz deckt den Bedarf an Zeichen für die gängigen Sprachen wie Dänisch, Deutsch, Englisch, Finnisch, Französisch, Italienisch, Niederländisch, Norwegisch, Schwedisch und Spanisch.

03 – Grundlagen HTML & CSS: Was sind Anker / Links / Sprungmarken?

In dieser Video-Lektion gehe ich detaillierter auf Links / Anker ein. Dieses Video ist ein wichtiger Bestandteil für den späteren Aufbau einer suchmaschinenoptimierten Navigation einer jeden Internetseite. Demnach sollte eine Navigation immer aus einer Liste / Aufzählung bestehen. Diese Listen können dann per CSS entsprechend formatiert / gestaltet werden.

Bevor ich auf die Formatierung einer Navigation eingehe, möchte ich gern die verschiedenen Ankertypen (externer Link, interner Link und Sprungmarke) aufzeigen.

So verlinkt man eine externe Seite:

<a href=“http://www.gordon-adams.com/index.html“>Link</a>

Natürlich kann man auch seine eigenen, internen Seiten so verlinken. Dies Form der Verlinkung nennt an auch absolut verlinkt bzw. referenziert. Warum absolut: Es ist egal wo sich die HTML-Datei auf dem Server befindet. Sie ruft immer einwandfrei die verlinkte Seite auf, sofern diese existiert. Bei einer relativen Verlinkung kommt es hingegen darauf an, wo sich die HTML-Datei aktuell im Verhältnis zur verlinkten Datei befindet.

So verlinkt man eine interne Seite:

<a href=“kontakt.html“>Link text</a>

Diese Form der Verlinkung nennt man auch relative verlinkt. Der hier dargestellte Link ruft eine HTML-Datei namens „kontakt.html“ auf, die sich im selben Verzeichnis befindet, wie die HTML-Datei in der sich der Link befindet (zum Beispiel der index.html). Würde sich die „kontakt.html“ in einem Unterverzeichnis befinden, so müsste der Link dieses Verzeichnis enthalten:

<a href=“/Unterverzeichnis/kontakt.html“>Link text</a>

Würde diese „kontakt.html“ wieder zur „index.html“ verlinken, dann müsste der Link dafür wie folgt aussehen:

<a href=“../index.html“>Link text</a>

Die beiden Punkte (“..”) besagen, dass die verlinkte Datei sich in einem vorherigen Verzeichnis befindet. Dieser „Doppelpunkt“ steht also für eine Verzeichnisebene und muss für jede Verzeichnisebene, die man „nach oben“ oder „zurück gehen“ will, angegeben werden:

<a href=“../../index.html“>Zwei Verzeichnisse höher</a>

<a href=“../index.html“>Ein Verzeichnis höher</a>

So setzt man eine Sprungmarke:

<a href=“#Bezeichnung“>Link text der Sprungmarke</a>

<a name=“Bezeichnung“>Markierung</a>

Eine Sprungmarke besteht immer als mindestens zwei Ankern! Ein Anker stellt eine Markierung dar (Position im HTML-Dokument), während ein weiterer Anker mit dieser Markierung „verknüpft“ wird und dafür sorgt, dass der Bildschirm zu dieser Markierung „springt“.

Alle diese verschiedenen Link- bzw. Ankertypen stelle ich ausführlich in diesem Video vor.

02 – Grundlagen HTML & CSS: Erklärung Aufbau einer HTML-Datei

In dieser Video-Lektion schauen wir uns den allgemeinen Aufbau einer HTML-Datei an. Der typische Aufbau einer HMTL-Datei ist wie folgt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title></title>
  </head>
  <body>
  </body>
</html>

Im Head-Bereich <head> … </head> werden die Daten gepflegt, die im Wesentlichen von den Suchmaschinen ausgelesen werden. Lediglich die Inhalte im Body-Bereich (<body> … </body>) werden effektiv / tatsächlich im Browser-Fenster angezeigt. D.h. die eigentlichen HTML-TAGS (Elemente) wie Überschriften, Fließtexte, Absätze, Links und Aufzählungen werden im Body-Bereich eingetragen.

Außerdem gehe ich auf die wichtigsten HTML-TAGs ein. Zu diesen zählen:

  • DIV-Container
  • Überschriften
  • Absätze bzw. Paragraphen
  • Links bzw. Anker
  • Listen bzw. Aufzählungen (geordnete und ungeordnete Listen)



01 – Grundlagen HTML & CSS: Der richtige HTML-Editor

Bilder und vor allem Videos sagen den meisten Menschen häufig mehr als tausend Worte. In dieser Video-Lektion stehe ich Ihnen einen professionellen, kostengünstigen HTML-Editor vor, die Ihre Arbeit in Zukunft sehr vereinfachen wird. Als Alternative zeige ich auch eine für Privatanwender kostenlose Anwendung.

Nach der Installation des HTML-Editors richten wir diesen für unsere Bedürfnisse ein. Ich kann Ihnen hier Tipps geben. Wenn Sie eine andere Anordnung der Elemente bevorzugen ist dies Ihnen natürlich freistellt. Am Ende speichern wir unsere Einstellungen in einem Nutzerprofil. So können wir unsere persönlich eingerichtete Arbeitsfläche im HTML-Editor jederzeit wieder aufrufen / wiederherstellen.

00 – Grundlagen HTML & CSS

In dieser Video-Reihe (Grundlagen HTML & CSS) zeige ich Ihnen, wie Sie mit ein wenig Basiswissen im Bereich HTML und CSS Ihre eigene Internetseite erstellen können. Diese 15-teilige Video-Reihe ist aber auch für alle diejenigen unter Ihnen interessant, die bereits eine Internetseite haben und einfache Aufgaben der Pflege selbst übernehmen möchten, ohne immer gleich eine Agentur oder einen Designer dafür zu beauftragen.

Warum ich diese Video-Lektion (Tutorials) erstellt habe:
Wer für HTML und CSS (also der Trennung von Inhalt und Design) gut aufbereitetes und zudem kostenloses Video-Material auf Deutsch im Internet sucht, hat es schwer. Auf YouTube gibt es eine Vielzahl an Beiträgen. Diese haben häufig folgendes gemeinsam:

  • Die Lektionen sind oft zu schnell und es wird zu viel an Grundwissen vorausgesetzt.
  • Es werden entweder die falschen oder zu professionelle und damit kostenintensive Programme verwendet. Wer sich diese legal beschafft (wovon ich ausgehe!) kann auch eine Agentur mit der Gestaltung & Programmierung einer Internetseite beauftragen. Das spart Geld, Zeit und vor allem Nerven!

Ich fange bei „A“ wie Ausstattung an und kläre, mit welchen Programmen Sie arbeiten sollten und sich auch leisten können. Schritt für Schritt erkläre ich die Basis-Elemente (TAGS) von HTML und CSS (Klassen und IDs) bis Sie sich schließlich eine erste einfache Homepage erarbeitet haben.

Was sind die Inhalte in diesen Video-Lektionen (Tutorials):

  1. Die Auswahl und Einrichtung des richtigen HTML-Editors
  2. Die wichtigsten HTML-TAGS (Elemente) für den Aufbau einer Internetseite
  3. Detaillierte Beschreibung und Darstellung verschiedener Linktypen
  4. Komfortabler mit den HTML-Editor arbeiten
  5. Meta-Daten: Wir klären was das ist, wo man sie findet und welche wichtig sind
  6. Einstieg in CSS: Das Container-Boxmodell anschaulich erklärt
  7. Der Unterschied zwischen Klassen und ID’s in CSS
  8. Erstellung der ersten einfachen Homepage / Internetseite
  9. Die HTML-Seite mittels Klassen und ID’s (CSS) strukturieren
  10. Die HTML-Seite mittels Klassen und ID’s (CSS) formatieren (schön machen)
  11. Weiterer Ausbau der einfachen Homepage / Internetseite
  12. Erweiterung der Navigation um ein Untermenü (Verschachtelung)
  13. Verwendung und Formatierung von CSS-Pseudoklassen
  14. Die erste einfache Homepage ist fast fertig: So erstellt man ein Kontaktformular
  15. Fertig: Die erste eigene Internetseite mit einem funktionsfähigen Kontaktformular

Jedes Video ist ca. 10 bis 15 Minuten lang. An dieser Stelle möchte ich Ihnen empfehlen, wenn Sie Anfänger sind und sich mit der Thematik HTML und CSS zum ersten Mal auseinandersetzen, sich die 15 Videos in der vorgesehenen Reihenfolge anzuschauen und nicht zu überspringen. Die Videos sind didaktisch und logisch aufeinander aufbauend erstellt worden. Am Ende haben Sie einen sehr guten Überblick im Bereich HTML und CSS, um eine eigene Internetseite zu programmieren.

Natürlich können Sie das in den Videos gezeigte HTML-Grundgerüst übernehmen und verwenden. Sie werden jedoch sehr bald feststellen, dass jedes Layout / Design ein eigenes Grundgerüst benötigt. Zum Probieren, Lernen und Verstehen von HTML und CSS ist es in jedem Fall eine gute Basis.

In den einzelnen Video-Lektionen auf diesem Blog (www.gordon-adams.com/blog) befinden sich neben den Video-Lektionen auch kurze Beschreibungen zu den Inhalten der Videos. Diesen geben jedoch nur grob / oberflächlich den Inhalt des Videos wieder. Eine „Zitierung“ der gesprochenen Kommentare wollte ich Ihnen und mir ersparen. ;o)

Fließtext in mehrere Spalten gleichmäßig verteilen

Mit CSS3 ist es möglich (wird es sein; denn CSS3 wird sowohl von den Browser als auch von den HTML-Editoren nicht vollständig unterstützt, da die Spezifikationen sich ständig ändern) Fließtext auf eine beliebige Anzahl von Spalten gleichmäßig zu verteilen; ähnlich wie man es von den Tageszeitungen her kennt und gewohnt ist.

Drei wesentliche Angaben sollten in einer entsprechenden CSS-Klasse enthalten sein, die die Anzahl der Spalten, die Spaltenbreite sowie die Abstände zwischen den Spalten definiert:

  • column-count (Anzahl der Spalten; Angabe nummerisch)
  • column-width (Breite der Spalte; Angabe in Pixel)
  • column-gap (Abstand zwischen den Spalten; Angabe in Pixel)

Eine beispielhafte Klasse für einen mehrspaltigen Text mittels CSS3:

div.spalten {
   /*Standard-Definition*/
   column-count: 3;
   column-gap: 20px;
   column-width: 200px;

   /*Definition für FireFox*/
   -moz-column-count: 3;
   -moz-column-gap: 20px;
   -moz-column-width: 200px;

   /*Definition für Safari*/
   -webkit-column-count: 3;
   -webkit-column-gap: 20px;
   -webkit-column-width: 200px;
}

Der entsprechende DIV-Container im HTML:

<div class= "spalten">
   Ein langer Fließtext, der dynamisch auf eine bestimmte 
   Anzahl von Spalten verteilt werden soll. Die Länge / 
   Höhe der Spalten ergibt sich automatisch aus der 
   Textlänge.
</div>

Das obige Beispiel erzeugt einen Container in dem der enthaltene Fließtext auf 3 Spalten verteilt wird, wobei jede Spalte 200 Pixel breit ist und der Abstand zwischen den Spalten 20 Pixel beträgt.

Das kostenlose Startpaket für Webdesigner

Wer privat oder mit eigenen Mitteln eine Internetseite erstellen möchte, wird in der Regel nicht die professionellen Produkte von Adobe mit Photoshop, Illustrator, InDesign und Dreamweaver kaufen. Dafür sind diese Tools einfach zu teuer. Für eine Werbe-Agentur lohnen sich diese Investitionen sicherlich – Sie verdienen damit schließlich auch Ihr Geld.

Für das kleine Budget von Privatpersonen, Existenzgründern oder kleinen mittelständischen Unternehmen gibt es kostenlose Alternativen zu der oben genannten Profisoftware. Bei den kostenlosen Alternativen müssen Sie sicherlich Abstriche bei den Funktionsumfängen machen. Für einen Einstieg oder einfache Aufgaben im Bereich Webdesign, aber auch Printdesign, reichen diese Tools in jedem Fall. Und das Beste: Sie schonen Ihre Finanzen, da es sich hierbei um kostenlose Software handelt!

Gimp:
Die kostenlose Alternative zu Adobe Photoshop lautet Gimp. In der Standard-Installation kann Gimp nur Bilder im RGB-Modus erstellen. Das ist für Webanwendungen auf völlig ausreichend. Auch bei den Funktionsumfängen für die Bildbearbeitung hat Gimp einiges zu bieten und ist wahrscheinlich mehr, als die meisten Webdesigner für Ihre Arbeit benötigen und jemals nutzen.

Wer Außerdem im CMYK-Modus, also für den Druck geeignete Designs erstellen will, kann ein Plugin installieren, um dieses Mano zu beseitigen. Grundsätzlich eigenen sich für den Printbereich aber andere Programme, wie zum Beispiel Inkscape.

Aptana:
Hierbei handelt es sich um einen kostenlosen HTML-Editor, mit der Sie sowohl Web- als auch mobile Anwendungen erstellen können. Aptana bietet die üblichen Hilfen für HTML, CSS und JavaScript, Code-Highlight sowie eine Livevorschau. Es sollte also an nichts fehlen, wenn Sie in HTML und CSS Ihre ersten Gehversuche machen. Auch ein FTP-Client ist in dem Programm integriert. Eine Alternative dazu ist das FTP-Programm FileZilla.

Inkscape:
Mit Inkscape haben sich ein kostenloses Vektorprogramm als Alternative zu Illustrator oder Freehand an der Hand. Vektorprogramme eigenen sich vor allem zur Erstellung von Logos, Illustrationen und Comics. Natürlich können Sie auch komplette Screen-Designs in Inkscape erstellen. Es ist häufig Geschmackssache mit welchem Programm man ein Screen-Design erstellt, gibt es doch Vor- und Nachteile für jedes dieser kostenlosen Alternativ-Programme.

Der Vorteil von Vektorprogrammen und daraus resultierende Designs: Das Ergebnis lässt sich stufenlos und Qualitätsverlustfrei skalieren, also in der Größe verändern. Wird ein Teil des Designs im Printbereich benötigt, kann es ohne Probleme übernommen und verwendet werden.

FileZilla:
Haben Sie Ihr Design erste einmal am Bildschirm entworfen (Screen-Design) und mittels HTML und CSS web fähig umgesetzt, müssen Sie Ihre HTML-Daten noch auf Ihren Server übertragen. Dies geschieht mittels eines FTP-Client-Programms. FileZilla ist hier die kostenlose Alternative für Webdesigner zum Pendant Dreamweaver oder GoLive.