HTML: Erste Styling-Versuche

Die Grundlagen von HTML beherrschst du jetzt. Das ist doch schön! 🙂 Aber da wird es doch mal Zeit, das ganze Gebamsel gut aussehen zu lassen. 😀 Denn vielleicht möchte man auch mal Bilder einen Rahmen verpassen und die Ecken abrunden, ohne das Bild zu beschneiden. Auch wichtige Wörter oder Absätze können zur besseren Lesbarkeit bearbeitet werden. Und da gibt’s noch mehr…

Styling. Wie soll das gehen ?

Das übernimmt die Sprache CSS für uns. Ihr kann man sagen: Mach den Hintergrund so und den Rahmen so (usw.). Genaueres erfährst du in der CSS-Reihe.

<br />
&lt;html&gt;<br />
&lt;head&gt;<br />
	&lt;title&gt; Erste Styling Versuche &lt;/title&gt;<br />
&lt;/head&gt;<br />
&lt;body style=&quot;background:lightgrey;&quot;&gt;<br />
	&lt;h1 style=&quot;font-size:30px;font-family:Arial;color:#F00;&quot;&gt; Mal eine andere Überschrift 😀 &lt;/h1&gt;<br />
	&lt;p style=&quot;background:black;color:#FFF;font-family:Arial;&quot;&gt; Cooler weißer Text auf schwarzem Hintergrund. Nicht schlecht 😉 &lt;br/&gt; Hier folgt eine Tabelle: &lt;/p&gt;</p>
<p>	&lt;table style=&quot;background:green;width:300px;&quot;&gt;<br />
		&lt;tr&gt;<br />
			&lt;td&gt; Eugene &lt;/td&gt;<br />
			&lt;td&gt; 20 Pkt &lt;/td&gt;<br />
		&lt;/tr&gt;<br />
		&lt;tr&gt;<br />
			&lt;td&gt; Abraham &lt;/td&gt;<br />
			&lt;td&gt; 17 Pkt &lt;/td&gt;<br />
		&lt;/tr&gt;<br />
	&lt;/table&gt;<br />
	&lt;img src=&quot;amsterdam2016.JPG&quot; style=&quot;width:300px;height:200px;border-radius:12px;&quot; /&gt;<br />
	&lt;/body&gt;<br />
&lt;/html&gt;<br />

Ansehen

Erklärung: Bei jedem HTML-Objekt ist nun ein neues Attribut zu erkennen, das style-Attribut. Dies sagt dem Browser, dass gestylt werden muss. Und alles was zwischen den Gänsefüßchen steht, ist CSS-Syntax (näheres dazu erfährst du ebenfalls in der CSS-Reihe; grob auch schon hier :D).

Aber was steht da in den Gänsefüßchen? Die Syntax sieht so aus: Eigenschaft: Wert; (bspw. wie bei h1: font-size:30px;). Das Beispiel bedeutet, dass die Schriftgröße auf 30 Pixel gesetzt wird. Dies wird auch so angezeigt.

Die einzelnen CSS-Eigenschaften:

background: Diese Eigenschaft setzt die Hintergrundfarbe eines HTML-Objekts auf den entsprechenden Wert. Auch Bilder sind als Hintergrund möglich. Jedoch reichen für den Anfang erstmal Farben. In der Regel werden diese im Hexadezimalsystem angegeben, z.B. #FF0000. Dies wäre Rot, da in CSS die Farben im RGB-Format (Rot Grün Gelb) angegeben werden. Von 120 „Grundfarben“ kann auch der Name anstatt der Hexadezimalwert geschrieben werden. Wichtig: Am Bildschirm werden keine Farben gemischt, wie in Kunst :D. Hier wird Licht gemischt.

font-size: Wie schon erwähnt. Die Schriftgröße in Pixeln.

font-family: Diese Eigenschaft beschreibt die Schriftart. Doch sollten keine exklusiven, mega außergewöhnlichen Arten verwendet werden. Browser beherrschen nur die gängigen Schriften. (Im Code habe ich Arial verwendet)

color: Das ist einfach die Schriftfarbe. Die Angabe erfolgt, wie bei der background-Eigenschaft.

width / height: Breite bzw, Höhe in Pixeln. Diese Eigenschaften ersetzen die bereits bekannten HTML-Attribute width & height.

Das beste zum Schluss 😀 ⇒ border-radius: Diese Angabe erfolgt ebenfalls in… dreimal raten… PIXELN!!! Wow :D. Es rundet die Ecken eines Objektes ab. Der Wert beschreibt dabei den Radius der abgerundeten Ecke. Einige Objekte, wie z.B. Tabellen lassen sich nicht abrunden… :/

 

Jo… Das war ganz schön viel Input auf einmal, oder ? 😀 Naja, hoffe es war verständlich und liest sich gut.

<Tim Poerschke />

 

 

Was denkst du über diesen Post?
  • Gut (0)
  • Hilfreich (0)
  • Nicht gut (0)
  • Lustig 😀 (0)

von | Kategorie: Programmierung
Schlagwörter: // // //

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

35 − 32 =