Schlagwortarchiv für: HTML

Dieser Beitrag ist Teil des CSS Kurses.
Im Unterschied zu Papierseiten sind Webseiten und Grafiken getrennt zu betrachten. Im eigentlichen Quelltext steht nur der Verweis auf die Grafik. Erst im Browser werden die beiden Elemente zusammengeführt.
Unser Logo
In diesem Beitrag zeige ich Ihnen, wie Sie Bilder in Ihre Webseite einbinden können. Dazu verwenden wir das Element img (engl. image = Bild). Beim Element img wird kein Endtag wie </img> verwendet. Das Element wird einfach mit einem Schrägstrich beendet. Mit dem Attribut src (engl. source = Quelle) sagen wir dem Browser wo unser Bild zu finden ist. Wenn Sie nur den Dateinamen angeben, sucht der Browser im selben Order in dem sich die jeweilige Webseite befindet.


<img src="logo.jpg" />

Befindet sich das Bild in einem anderen Ordner, müssen Sie den Weg dorthin angeben. Diese Angabe ist relativ zu dem allerersten Ordner der Webseite (in unserem Fall www.denisreis.com). Wenn das Bild unter www.denisreis.com/logo.jpg zu finden ist können Sie den Pfad wie folgt angeben:


<img src="/logo.jpg" />

Sie können natürlich auch die ganze URL reinschreiben, also https://www.denisreis.com/logo.jpg

Nun haben Sie dem Browser gesagt, wo Ihre Grafik zu finden ist. Wenn der Browser Ihren Code liest, läuft er los und holt sich die Grafik, macht aber parallel mit dem Text weiter. Je nach der Internetverbindung und der Größe der Grafik sieht Ihr Besucher erst einmal nichts.
Daher macht es Sinn das img Element um zusätzliche Attribute zu erweitern. Bis die Grafik geladen ist, wollen wir, dass ein alternativer Text angezeigt wird. Dazu verwenden wir das Attribut alt (engl. alternative). Wenn die Grafik noch nicht angezeigt wird, sieht der Benutzer stattdessen den Text. Daher sollte der Text möglichst aussagekräftig sein. In unserem Fall also nicht „Logo“ sondern lieber „CSS Kurs“. Anschließend sagen wir noch wie hoch und wie breit unsere Grafik ist. Um das Bild später in CSS eindeutig identifizieren zu können vergeben wir noch eine ID.


<img src="logo.jpg" id="logo" alt="CSS Kurs" width="222" height="32" />

Die Reihenfolge der Attribute spielt dabei keine Rolle.

Probieren Sie es selbst aus!

Quellen und weiterführende Literatur:
Peter Müller (2013): Flexible Boxes

Falls Ihnen dieser Beitrag weitergeholfen hat, wäre es eine sehr nette Anerkennung meiner Arbeit wenn Sie z.B. Ihre Bücher über Amazon bestellen würden. Wenn Sie ein Produkt kaufen, erhalte ich dafür eine Provision. Für Sie ändert sich am Preis des Produktes gar nichts. Ich möchte mich an dieser Stelle jetzt schon für Ihre Unterstützung bedanken.

Dieser Beitrag ist Teil des CSS Kurses.
Hyperlinks sind die Fäden, die das WorldWideWeb zusammenhalten. Sie verlinken von einer Webseite auf die andere. Sie können sich dieses Element wie eine Ankerkette vorstellen, die eine Webseite mit der anderen verbindet. In diesem Beitrag lernen Sie solche Links zu erstellen.
Das HTML Element für einen Link beginnt mit <a> (engl. anchor = Anker) und wird mit </a> abgeschlossen. Dazwischen steht der Text oder die Grafik. Nach dem Klick auf den Text bzw. das Bild wird der Besucher zum Ziel geleitet. Innerhalb des Elements vergeben Sie mit dem Attribut href noch die Referenz, also das Ziel Ihrer Verlinkung.


<a href="https://www.denisreis.com">Homepage</a>

Mit dem Attribut title können Sie eine Beschreibung zu Ihrem Link angeben. Diese wird angezeigt, wenn Ihr Besucher mit der Maus über dem Link verweilt. Mit dem Attribut target können Sie steuern ob die neue Webseite im selben Fenster oder in einem neuen (_blank) Fenster angezeigt werden soll.


<a href="https://www.denisreis.com" title="Startseite" target="_blank">Homepage</a>

Probieren Sie es selbst aus!

Um innerhalb einer Webseite zu springen, können Sie die von Ihnen gewählten IDs oder den Namen eines Bereichs benutzen. Wenn Ihr Inhalt in dem Bereich <div id="inhalt"> steht können Sie mit dem folgenden Code einen Link zu diesem erstellen.


<a href="#inhalt">Zum Inhalt springen</a>

Alternativ können Sie mit dem Attribut name einen Namen für eine bestimmte Position vergeben und dann auf diese verweisen.


<a name="inhalt"></a>

Quellen und weiterführende Literatur:
Peter Müller (2013): Flexible Boxes

Falls Ihnen dieser Beitrag weitergeholfen hat, wäre es eine sehr nette Anerkennung meiner Arbeit wenn Sie z.B. Ihre Bücher über Amazon bestellen würden. Wenn Sie ein Produkt kaufen, erhalte ich dafür eine Provision. Für Sie ändert sich am Preis des Produktes gar nichts. Ich möchte mich an dieser Stelle jetzt schon für Ihre Unterstützung bedanken.

Dieser Beitrag ist Teil des CSS Kurses.
In diesem Beitrag lernen Sie die Listen kennen. Man unterscheidet zwei Arten von Listen: Aufzählungen und Nummerierungen.
Aufzählungen stellen ungeordnete Listen dar. Das HTML-Element für diese lautet ul (engl. unordered list). Dieses enthält die einzelnen Listenelemente (Punkte) li (engl. list item).
Erstellen wir nun unsere Liste die die einzelnen Schritte dieses Kurses enthält.


<ul>
<li>Wie funktioniert HTML?</li>
<li>Kästchen mit CSS gestalten.</li>
<li>Kästchen mit CSS positionieren.</li>
</ul>

Nummerierungen sind nichts anderes als geordnete Liste. Vom Aufbau her weisen diese sehr große Ähnlichkeit mit den ungeordneten Listen auf. Allerdings müssen Sie statt ul das Element ol (engl. ordered list) verwenden.


<ol>
<li>Wie funktioniert HTML?</li>
<li>Kästchen mit CSS gestalten.</li>
<li>Kästchen mit CSS positionieren.</li>
</ol>


Probieren Sie es selbst aus und ändern Sie <ul> in <ol> um.

HTML Listen
Sie können die Listen auch verschachteln. Dazu müssen Sie innerhalb eines Listenelementes eine neue Liste erstellen. Wir wollen nun den ersten Punkt weiter untergliedern.


<ul>
<li>Wie funktioniert HTML?
<ul>
<li>Grundgerüst</li>
<li>Webseite mit div in Bereiche unterteilen</li>
<li>Überschriften und Absätze</li>
</ul>
</li>
<li>Kästchen mit CSS gestalten.</li>
<li>Kästchen mit CSS positionieren.</li>
</ul>


Probieren Sie es selbst aus!

Quellen und weiterführende Literatur:
Peter Müller (2013): Flexible Boxes

Falls Ihnen dieser Beitrag weitergeholfen hat, wäre es eine sehr nette Anerkennung meiner Arbeit wenn Sie z.B. Ihre Bücher über Amazon bestellen würden. Wenn Sie ein Produkt kaufen, erhalte ich dafür eine Provision. Für Sie ändert sich am Preis des Produktes gar nichts. Ich möchte mich an dieser Stelle jetzt schon für Ihre Unterstützung bedanken.

Dieser Beitrag ist Teil des CSS Kurses.
Wenn Sie sich unsere Beispiel-Webseite mit Firefox anschauen, können Sie über Entwicklerwerkzeuge → 3D-Ansicht die einzelnen Elemente in 3D anschauen. In dieser Ansicht wird der Unterschied zwischen Block- und Inline-Elementen deutlich.

3D-Ansicht der HTML Elemente

Block- und Inline-Elemente

Die Block-Elemente gehen im Browserfenster von ganz links bis nach ganz rechts. Blockelemente sind zum Beispiel: div, h1, p. Sie werden so breit wie es nur geht und haben einen integrierten Zeilenumbruch. Das darauf folgende Kästchen beginnt in der nächsten Zeile.
Inline-Elemente dagegen haben keinen Zeilenumbruch. Wie Sie sehen fließt unser Text nach span, em und strong einfach weiter. Sie werden auch nur so breit wie sie sein müssen. Sie enden nach dem Text, der in dieser Kiste steckt.
Eine Übersicht über alle Block- und Inline-Elemente finden Sie auf SELFHTML.

Quellen und weiterführende Literatur:
Peter Müller (2013): Flexible Boxes

Falls Ihnen dieser Beitrag weitergeholfen hat, wäre es eine sehr nette Anerkennung meiner Arbeit wenn Sie z.B. Ihre Bücher über Amazon bestellen würden. Wenn Sie ein Produkt kaufen, erhalte ich dafür eine Provision. Für Sie ändert sich am Preis des Produktes gar nichts. Ich möchte mich an dieser Stelle jetzt schon für Ihre Unterstützung bedanken.

Dieser Beitrag ist Teil des CSS Kurses.
Mit den HTML Elementen strong und em können Sie Textpassagen fett oder kursiv darstellen. Um es Ihnen an einem Beispiel präsentieren zu können füllen wir den Textbereich mit Inhalt.


<div id="textbereich">
<h2>Startseite</h2>

<p>Herzlich willkommen! Hier lernen Sie HTML und CSS.</p>
</div> <!-- textbereich -->

Nun stellen wir das Wort HTML kursiv und CSS fett dar.


<div id="textbereich">
<h2>Startseite</h2>

<p>Herzlich willkommen !
Hier lernen Sie <em>HTML</em> und <strong>CSS</strong>.</p>
</div> <!-- textbereich -->

Texte können kursiv oder fett dargestellt werden

Probieren Sie es selbst aus!

Quellen und weiterführende Literatur:
Peter Müller (2013): Flexible Boxes

Falls Ihnen dieser Beitrag weitergeholfen hat, wäre es eine sehr nette Anerkennung meiner Arbeit wenn Sie z.B. Ihre Bücher über Amazon bestellen würden. Wenn Sie ein Produkt kaufen, erhalte ich dafür eine Provision. Für Sie ändert sich am Preis des Produktes gar nichts. Ich möchte mich an dieser Stelle jetzt schon für Ihre Unterstützung bedanken.