HTML erklärt #10 Breiten und Höhen

geschrieben von Felix Beuster am 29.08.2010

Dein Browser ist zu klein für den eingebetteten Player. Du kannst das Video hier auf YouTube ansehen.

Hier wird euch gezeigt, wie ihr Absätze (oder jedes andere Element) in der Breite oder Höhe verändern könnt.
Neue Attribute in diesem Teil: width, height

1
2<!DOCTYPE html>
3<html>
4 <head>
5  <title>Breiten und Höhen</title>
6  <meta charset="utf-8">
7  <meta http-equiv="content-type" content="text/html; charset=utf-8">
8  <style>
9   html, body {height: 100%;}
10   body {font-family: Calibri; background-color: #cccccc;}
11   p {background-color: #ff9900;}
12   .p100p {width: 100%;}
13   .p100px {width: 100px;}
14   .p50p {width: 50%;}
15   .p100h {height: 100px;}
16   .p10hp {height: 10%;}
17  </style>
18 </head>
19 <body>
20  <p class="p100p">Lorem ipsum dolor sit amet.</p>
21  <p class="p100px">Lorem ipsum dolor sit amet.</p>
22  <p class="p50p">Lorem ipsum dolor sit amet.</p>
23  <p class="p100h">Lorem ipsum dolor sit amet.</p>
24  <p class="p10hp">Lorem ipsum dolor sit amet.</p>
25 </body>
26</html>

< Zurück zu HTML erklärt

Mehr aus HTML erklärt

HTML erklärt #2 Textstrukturierung

Hier klicken, um das Video zu sehen. Diesmal erkläre ich einige Elemente, um den Inhalt zu strukturieren, also Überschriften, Zeilenumbrüche und horizontale Linien. Die Interseite zur Textgenierung: loremipsum.de...

HTML erklärt #15.3 Mehrzeilige Textfelder

Hier klicken, um das Video zu sehen. Setzen wir die Formular-Videoreihe fort und schauen uns heute mal mehrzeilige Eingabefelder an. Das Video baut auf HTML erklärt #15.1 und #15.2 auf, Links dazu sowie allen anderen HTML-Videos...

HTML erklärt #12 Horizontale Navigation

Hier klicken, um das Video zu sehen. Heute geht es in die Vollen; Banner, Navigationsleisten und Contentbereiche werden behandelt, naja zumindest grob. Das Prinzip wird gezeigt, ausserdem lernt ihr Ausssen- und Innenabstände...

HTML erklärt #3 Makros in Notepad++

Hier klicken, um das Video zu sehen. Mit diesem kleinen Tipp zeige ich euch, wie ihr mit ein paar Mausklicks oft wiederholte Eingaben fast schon automatisieren könnt und dadurch viel Zeit spart.

< Zurück zu HTML erklärt

Kommentare

Bisher keine Kommentare.

Bitt warte 20 Sekunden, bevor du das Formular abschicken kannst.

< Zurück zu HTML erklärt

Ein parr mehr Artikel

Pokemon Go Stopps auf Friedhöfen

Der Hype um Pokemon Go ist ungebrochen und kommt auch hier am Blog nicht ganz vorbei. Auf eines, was dem ein oder anderem Twitter-Nutzer negativ aufgestoßen ist, möchte ich hier einmal kurz eingehen: Warum gibt es...

Pusheen Box Sommer 2018 - Unboxing und Review

Hier klicken, um das Video zu sehen. Sommer, Sonne, Sonneschein - Und passend dazu gibt es nun die Somemrausgabe der Pusheen Box 2018. Was alles drin ist, das schauen wir uns in diesem Unboxing einmal an. Mehr über die Pusheen...

Sind wöchentliche Uploads sinnvoll? - YouTube Lupe #93

Hier klicken, um das Video zu sehen. Wöchentliche Uploads - Braucht man sie als YouTuber oder geht es auch ohne? Wir schauen uns mal meinen Kanal dazu an, und dann gebe ich euch Tipps, um es besser für euren eigenen Kanal...

Schreibtischumbau - Ergonomie am Arbeitsplatz - Briefe von Felix

Hier klicken, um das Video zu sehen. Wer viel Zeit am Rechner verbringt, sei es nun beruflich oder private, der sollte sich lieber früher als später Gedanken um Ergonomie am Arbeitsplatz machen. Hierbei geht es um die Position...

< Zurück zu HTML erklärt