html Tutorial 3 von 4 - Bilder

Und wie versprochen geht es schon weiter mit dem html Tutorial.
Als erstes hatten wir die Grundlagen und anschließend die Tabellen, jetzt wollen wir uns das Einfügen von Bildern näher anschauen. Es gibt verschiedene Arten Bilder einzufügen. Ich werde euch zwei bzw. drei Varianten zeigen.

In den folgenden Codes müsst ihr euch den * wegdenken, den trage ich in den Beispielen ein, damit ihr die Codes lesen könnt. In den Klammern [ ] sind kurze Erklärungen zum Code.

1. Variante
<*img alt="Dateiname [kann man aber auch ignorieren]" src="Link" style="border-radius:Abrundungsradius%; border-style:solid; height:Höhepx; margin:5px; width:Breitepx" />

Damit bekommt ihr runde oder abgerundete Bilder hin, indem ihr den Radius einstellst.

Radius auf 10%	Radius auf 30%	Radius auf 50%

2. Variante
<*img src="Link" />

Damit setzt ihr ein einfaches Bild rein in Originalgröße, mit der Erweiterung style="width:Weitepx" könnt ihr auch die Größe einstellen. Das ganze sähe dann so aus:
<*img src="Link" style="width: Weitepx" />
3. Variante
<*a href="Link"><*img alt="Dateiname [kann man auch ignorieren]" src="Link" style="width: Weitepx;" />
Hierbei verlinkt ihr ein Bild. Ihr könnt zB. den Direktlink des Bildes angeben, damit man das Bild anklicken und es sich in Originalgröße anschauen kann. Ihr könnt aber auch den Link im a href Bereich austauschen und zu einer anderen Webseite verlinken. Das gleiche funktioniert auch mit dem Mail verlinken. Dabei tauscht ihr einfach den Link im a href Bereich durch mailto:Mailadresse aus. So macht man zB. auch Buttons.

    mit Direktlink zum Bild                           mit verlinkter Mailadresse
So das war auch schon der dritte Teil des Tutorials. Im nächsten geht es dann mit einem Scrollfeld und dem Spoilerbutton zum Aufklappen weiter.