Sie sind hier
E-Book

Einstieg in CSS

Webseiten gestalten mit HTML und CSS

AutorPeter Müller
VerlagRheinwerk Computing
Erscheinungsjahr2015
Seitenanzahl524 Seiten
ISBN9783836236850
FormatePUB
KopierschutzWasserzeichen
GerätePC/MAC/eReader/Tablet
Preis26,90 EUR

CSS lernen mit dem beliebten CSS-Experten Peter Müller!

  • Grundlagen: Schriften, Farben und Box-Modelle
  • Konzepte: Spezifität, Kaskade und Positionierung verständlich erklärt
  • Gestaltung: Navigation, mehrspaltige Layouts und Media Queries und Flexbox
Sie suchen eine gute Einführung in die Gestaltung von Webseiten mit HTML und CSS? Dann liegen Sie mit diesem Buch genau richtig! Peter Müller erklärt Ihnen hervorragend, was Sie bei der modernen Webgestaltung wissen müssen: von den grundlegenden Prinzipien bis hin zu den neuesten Entwicklungen. Immer kompetent, klar und verständlich. Anschauliche Beispiele aus der Praxis können Sie leicht auf eigene Projekte anwenden. Inkl. HTML5 und CSS3.

Aus dem Inhalt:

  • HTML und CSS im Schnelldurchlauf
  • Das HTML-Grundgerüst
  • HTML-Elemente für Überschriften, Text und Listen
  • HTML-Elemente für Links, Bilder und mehr
  • CSS kennen lernen: Schriften, Farben und Hyperlinks
  • Selektoren, Einheiten und Farben
  • Das Box-Modell
  • Ordnung halten in den Stylesheets
  • Eine horizontale Navigation per »display:inline«
  • Ein Kontaktformular erstellen
  • Fließtext, Webfonts und Druckversion
  • Der Browser in Aktion: Kaskade, Vererbung oder Standardwert
  • HTML-Tabellen erstellen und gestalten
  • Kästchen verschieben mit »position«
  • Media Queries
  • Weitere mehrspaltige Layoutmethoden
  • Containing Floats: gefloatete Elemente umschließen
  • Gestaltung von Grafiken per CSS
  • Eine floatbasierte horizontale Navigation
  • Suchfunktion, Dropdown und Layouten per Flexbox



Peter Müller arbeitet seit vielen Jahren als IT-Dozent und und ist als Autor des CSS-Bestsellers »Little Boxes« bekannt, der es versteht, komplizierte Sachverhalte auf einfache und unterhaltsame Weise darzustellen.

Kaufen Sie hier:

Horizontale Tabs

Leseprobe

5HTML-Elemente für Links, Bilder und mehr


Worin Sie weitere wichtige HTML-Elemente für Hyperlinks, Grafiken und ein paar andere Dinge kennenlernen sowie das Wichtigste über Zeichensätze und Sonderzeichen erfahren.

Die Themen im Überblick:

In diesem Kapitel komplettieren Sie den kurzen HTML-Grundkurs mit Elementen zum Erstellen von Hyperlinks und zum Einfügen von Bildern. Außerdem lernen Sie noch andere nützliche HTML-Elemente kennen. Den Abschluss bilden Sonderzeichen in HTML und ein Exkurs zur Rolle von Zeichensätzen wie UTF-8.

5.1Hyperlinks – das Besondere am World Wide Web


Hyperlinks sind das Hyper in Hypertext und sind bildlich gesprochen die Fäden, mit denen dieses weltweite Gewebe namens Web gesponnen wird. In gewisser Weise typisch für HTML ist, dass das wichtigste Element in dem ganzen Laden nicht hyperlink heißt, sondern schlicht und einfach a (wie Anker). Es gibt übrigens tatsächlich ein Element namens link, aber das macht etwas anderes und tritt erst in Abschnitt 6.2 in Erscheinung.

5.1.1Anatomie eines Hyperlinks


Hyperlinks haben immer denselben Aufbau:

<a href="...">Sichtbarer Text</a>

Hier das Beispiel im Detail:

  • Das Element zum Erstellen eines Hyperlinks heißt einfach nur a.

  • Das Attribut href steht für Hypertext Reference und enthält die Wegbeschreibung zu einer Datei, die nach einem Klick im selben Browserfenster angezeigt wird. Hier kann ein Dateiname oder auch eine komplette URL stehen.

  • Zwischen <a> und </a> steht der Text, der vom Browser standardmäßig blau und unterstrichen hervorgehoben wird.

  • </a> beendet den Hyperlink.

Im folgenden ToDo erstellen Sie einen einfachen Hyperlink zur Website zum Buch.

ToDo: Erstellen Sie einen Hyperlink

  1. Erstellen Sie folgenden Quelltext auf der Beispielseite unterhalb der verschachtelten Liste und vor </main>:

    <p>Besuchen Sie <a href="http://little-boxes.de/">die Website zum
    Buch</a> für weitere Informationen.</p>
  2. Speichern Sie die Seite, und betrachten Sie sie in einem Browser.

So wie in Abbildung 5.1 sieht der Hyperlink im Browser aus.

Abbildung 5.1Ein Hyperlink im Browser – blau und unterstrichen

Beachten Sie, dass der Hyperlink lila wird, nachdem der Link zum ersten Mal angeklickt wurde oder die im a-Element gespeicherte URL mit diesem Browser bereits besucht worden ist. Wenn Sie die Surfgeschichte des Browsers löschen, die je nach Browser meist Chronik oder Verlauf heißt, werden auch die besuchten Links wieder blau dargestellt.

Ein Hyperlink zurück nach oben auf derselben Seite

Falls Sie auf einer langen Webseite unten auf der Seite einen Link anbieten möchten, der »zurück nach oben« an den Beginn der Webseite springt, so können Sie eine bereits vorhandene ID als Sprungziel benutzen.

Auf den Beispielseiten könnte das zum Beispiel so aussehen:

<a href="#wrapper">Nach oben</a>

Die Raute # sagt dem Browser, dass wrapper eine ID ist. Ein Klick auf diesen Link führt zum Element <div id="wrapper"> direkt unterhalb von <body>.

5.1.2Die Navigation – eine ungeordnete Liste mit Hyperlinks


Eine Navigation ist im Prinzip eine Auflistung von Hyperlinks, und aus diesem Grund wird sie oft als ungeordnete Liste notiert. Das Aussehen der Liste wird später per CSS geregelt.

ToDo: Eine Navigationsliste erstellen

  1. Ergänzen Sie auf der Beispielseite die ungeordnete Liste innerhalb des Navigationsbereichs:

    <nav id="navibereich">
    <ul>
    <li><a href="index.html">Startseite</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
    </ul>
    </nav>
  2. Speichern Sie die Seite, und betrachten Sie sie in einem Browser.

Der Link zur Seite kontakt.html funktioniert noch nicht, da die Seite erst im nächsten Kapitel erstellt wird, aber der Link kann trotzdem schon eingebaut werden.

Der obere Bereich der Beispielseite sieht im Browser jetzt so aus wie in Abbildung 5.2. Gestaltet wird die Navigationsliste später per CSS.

Abbildung 5.2Die Beispielseite mit einer Navigationsliste

Hyperlinks um Block-Elemente sind in HTML5 erlaubt

In älteren HTML-Versionen war das Element a ein reines Inline-Element und durfte dementsprechend auch nur Inline-Elemente enthalten. In HTML5 ist es ein transparentes Element, eine Art Chamäleon, das sowohl Inline- als auch Block-Element sein kann.

Quintessenz ist, dass Hyperlinks jetzt auch Block-Elemente enthalten dürfen, was im Alltag sehr nützlich ist.

5.1.3Links auf andere Dateien – PDF, MP3 etc.


Hyperlinks müssen nicht unbedingt auf andere Webseiten zeigen. Das Ziel des Hyperlinks kann auch ein PDF, ein MP3 oder irgendeine andere Datei sein, die Sie dem Besucher zum Download anbieten möchten. Dazu benutzen Sie einen ganz normalen Hyperlink, dem Sie im Attribut href den Namen der gewünschten Datei geben.

Im Linktext sollten Sie dem Besucher ein paar Informationen über Dateityp und -größe geben, damit er schon vor dem Anklicken weiß, was ihn erwartet. Für ein PDF könnte das so aussehen:

<a href="leseprobe.pdf">Leseprobe (PDF, 1,2Mb)</a>

Was genau nach dem Anklicken eines solchen Links im Browser des Besuchers passiert, können Sie dabei nicht kontrollieren, denn ob der Browser ein Dialogfeld zum Speichern der Datei anbietet oder das PDF sofort darstellt, hängt von der Konfiguration des Browsers ab.

Öffnen und lesen kann ein Besucher das PDF aber in jedem Fall nur, wenn er auch ein entsprechendes Programm wie den Adobe Reader installiert hat oder sein Browser PDF von selbst darstellen kann.

Hyperlinks in einem neuen Fenster öffnen – »target="_blank"«

Normalerweise ersetzt ein Link die vorhandene Seite im Browser, sodass der Benutzer mit dem Zurück-Button wieder auf die vorherige Seite gelangt. Wenn ein Link stattdessen in einem neuen Fenster erscheinen soll, können Sie dazu das Attribut target benutzen:

<a href="http://little-boxes.de/" target="_blank">die Website zum Buch</a>
(in neuem Tab oder Fenster).

Sie sollten target allerdings sparsam einsetzen, denn im neuen Tab oder Fenster funktioniert zum Beispiel der Zurück-Button nicht, was besonders ungeübte Surfer verwirrt. Außerdem kann der Benutzer bei Bedarf den Link über das Kontextmenü selbst in einem neuen Tab oder Fenster öffnen. Mit target...

Blick ins Buch

Weitere E-Books zum Thema: Internet - Intranet - Webdesign - Security

Internet für Psychologen

E-Book Internet für Psychologen
Format: PDF

Das Internet kurz zu erklären und gleichzeitig einen aktuellen Überblick über psychologische Themen und Forschungsschwerpunkte zu geben, ist wohl ein hoffnungsloses Unterfangen. Zu…

Internet für Psychologen

E-Book Internet für Psychologen
Format: PDF

Das Internet kurz zu erklären und gleichzeitig einen aktuellen Überblick über psychologische Themen und Forschungsschwerpunkte zu geben, ist wohl ein hoffnungsloses Unterfangen. Zu…

Internet für Psychologen

E-Book Internet für Psychologen
Format: PDF

Das Internet kurz zu erklären und gleichzeitig einen aktuellen Überblick über psychologische Themen und Forschungsschwerpunkte zu geben, ist wohl ein hoffnungsloses Unterfangen. Zu…

Internet für Psychologen

E-Book Internet für Psychologen
Format: PDF

Das Internet kurz zu erklären und gleichzeitig einen aktuellen Überblick über psychologische Themen und Forschungsschwerpunkte zu geben, ist wohl ein hoffnungsloses Unterfangen. Zu…

Texten für das Web

E-Book Texten für das Web
Erfolgreich werben, erfolgreich verkaufen Format: PDF

Dieses Buch bietet das nötige Handwerkszeug, um die Qualität der eigenen Web-Texte zu verbessern bzw. eingekaufte Texte sicherer beurteilen zu können. Es liefert klare Kriterien für die Textanalyse,…

Texten für das Web

E-Book Texten für das Web
Erfolgreich werben, erfolgreich verkaufen Format: PDF

Dieses Buch bietet das nötige Handwerkszeug, um die Qualität der eigenen Web-Texte zu verbessern bzw. eingekaufte Texte sicherer beurteilen zu können. Es liefert klare Kriterien für die Textanalyse,…

Texten für das Web

E-Book Texten für das Web
Erfolgreich werben, erfolgreich verkaufen Format: PDF

Dieses Buch bietet das nötige Handwerkszeug, um die Qualität der eigenen Web-Texte zu verbessern bzw. eingekaufte Texte sicherer beurteilen zu können. Es liefert klare Kriterien für die Textanalyse,…

TCP/IP-Praxis

E-Book TCP/IP-Praxis
Dienste, Sicherheit, Troubleshooting Format: PDF

Netzwerke modernen Standards verlangen weniger nach Rezepten für Neu - Design als vielmehr nach Wegen, Maßnahmen zur Integration in eine bestehende Infrastruktur aufzuzeigen. Diesem Aspekt trägt TCP/…

E-Learning

E-Book E-Learning
Einsatzkonzepte und Geschäftsmodelle Format: PDF

Der vorliegende Band ist dem Lernen und Lehren auf der Basis moderner Informations- und Kommunikationstechnologien gewidmet. Das Buch fasst die wichtigsten Ansätze zur Einführung, Umsetzung und…

E-Learning

E-Book E-Learning
Einsatzkonzepte und Geschäftsmodelle Format: PDF

Der vorliegende Band ist dem Lernen und Lehren auf der Basis moderner Informations- und Kommunikationstechnologien gewidmet. Das Buch fasst die wichtigsten Ansätze zur Einführung, Umsetzung und…

Weitere Zeitschriften

ARCH+.

ARCH+.

ARCH+ ist eine unabhängige, konzeptuelle Zeitschrift für Architektur und Urbanismus. Der Name ist zugleich Programm: mehr als Architektur. Jedes vierteljährlich erscheinende Heft beleuchtet ...

AUTOCAD & Inventor Magazin

AUTOCAD & Inventor Magazin

FÜHREND - Das AUTOCAD & Inventor Magazin berichtet seinen Lesern seit 30 Jahren ausführlich über die Lösungsvielfalt der SoftwareLösungen des Herstellers Autodesk. Die Produkte gehören zu ...

Bibel für heute

Bibel für heute

BIBEL FÜR HEUTE ist die Bibellese für alle, die die tägliche Routine durchbrechen wollen: Um sich intensiver mit einem Bibeltext zu beschäftigen. Um beim Bibel lesen Einblicke in Gottes ...

caritas

caritas

mitteilungen für die Erzdiözese FreiburgUm Kindern aus armen Familien gute Perspektiven für eine eigenständige Lebensführung zu ermöglichen, muss die Kinderarmut in Deutschland nachhaltig ...

Der Steuerzahler

Der Steuerzahler

Der Steuerzahler ist das monatliche Wirtschafts- und Mitgliedermagazin des Bundes der Steuerzahler und erreicht mit fast 230.000 Abonnenten einen weitesten Leserkreis von 1 ...

EineWelt

EineWelt

Lebendige Reportagen, spannende Interviews, interessante Meldungen, informative Hintergrundberichte. Lesen Sie in der Zeitschrift „EineWelt“, was Menschen in Mission und Kirche bewegt Man kann ...