diedVIPs

html knowhow

Text-Container gestalten - <container>











Das



Ein zentrierter Container mit einem zentrierten Bild
So sieht´s aus


Logo


Quellcode
<html>
<head>
Hier nichts

<style type="text/css">
.container {background-color: #D7FFF9;padding: 15px;width:30em;}
.container img {mix-blend-mode: darken;}
</style>
</head>

<body >
<center><div class="container"><center><img src="Bilder/htmllogo.png" alt="Logo" width="40%" height="auto" /></center></div></center>
</body>

</html>



Ein zentrierter Container mit einem linksbündigen Text
So sieht´s aus


Ein Umriss ist eine Linie, die außerhalb der Grenzen um Elemente gezogen wird, um das Element hervorzuheben.
Hinweis: Umrisse (outline=BLAU) unterscheiden sich von Rändern (border=ROT) Im Gegensatz zum Rahmen wird der Umriss außerhalb des Rahmens des Elements gezeichnet und kann andere Inhalte überlappen. Außerdem ist der Umriss NICHT Teil der Abmessungen des Elements. Die Gesamtbreite und -höhe des Elements wird



Quellcode
<html>
<head>
Hier nichts

<style type="text/css">
.container {background-color: #D7FFF9;padding: 15px;width:30em;}
.container img {mix-blend-mode: darken;}
p {text-align:left}
</style>
</head>

<body >
<div class="container"><p>DER Text wie oben</p></div>
</body>

</html>



Ein zentrierter Container mit einem linksbündigen Text, wobei der Seitenbesucher die Größe und Form selber bestimmen kann.
So sieht´s aus


Lassen Sie den Benutzer sowohl die Höhe als auch die Breite dieses div-Elements ändern.

So ändern Sie die Größe: Klicken Sie auf die untere rechte Ecke und ziehen sie sie.



Quellcode
<html>
<head>
Hier nichts

<style type="text/css">
div.a {border: 2px solid;padding: 20px;width: 300px;resize: both;overflow: auto;}
</style>
</head>

<body >
<center><div class="a"><p>Lassen Sie den Benutzer sowohl die Höhe als auch die Breite dieses div-Elements ändern. </p>
<p>So ändern Sie die Größe: Klicken Sie auf die untere rechte Ecke und ziehen sie sie.</p>
</div></center>
</body>

</html>



Boxen mit verschiedenen Rändern

Mit dem hier unten abgebildeten Frame binden Sie eine eigene Seite auf Ihre Seite ein. Wenn Sie Scrolling auf YES setzen, wird die Scrollingleiste angezeigt. Auf NO nicht. Mit WIDTH bestimmen Sie die Breite des Frames und mit HEIGHT die Höhe.
So sieht´s aus

Runde Ecken für ein Element mit farbigem Hintergrund

Runde Ecken 1

Runde Ecken für ein Element mit Rand

Runde Ecken 2

Runde Ecken für ein Element mit Hintergrundbild

Runde Ecken 3

Quellcode
<html>
<head>
Hier nichts

<style type="text/css">
#rcorners1 {border-radius: 25px; background: #73AD21; padding: 20px; width: 200px; height: 150px; }
#rcorners2 {border-radius: 25px; border: 2px solid #73AD21; padding: 20px; width: 200px; height: 150px; }
#rcorners3 {border-radius: 25px; background: url(paper.gif); background-position: left top; background-repeat: repeat; padding: 20px; width: 200px; height: 150px; }
</style>
<head>

<body >
<p>Runde Ecken für ein Element mit farbigem Hintergrund</p><p id="rcorners1">Runde Ecken 1</p>
<p>Runde Ecken für ein Element mit Rand</p><p id="rcorners2">Runde Ecken 2</p>
<p>Runde Ecken für ein Element mit Hintergrundbild</p><p id="rcorners3">Runde Ecken 3</p>
</body>

</html>



Frame mit dem Sie ein Bewertungsscript einbinden

Mit dem hier unten abgebildeten Frame binden Sie einen fremden Bewertungsframe auf Ihre Seite ein. Was Sie da sehen, ist meiner. Sie können sich eine eigene Bewertungsseite anlegen unter: webwiki.de.

Probieren Sie es aus und bewerten Sie uns.

Quellcode So sieht´s aus
<html>
Hier nichts

<style type="text/css">
Hier nichts
</style>

<body >
<textarea style="background-color: #lightblue; font-family: Cambria; font-size: 1em; color: black; border: 5px solid red;" cols="30" rows="12">Einen sehr guten robots.txt-Generator
finden Sie unter: https://www.seoptimer.com/robots-txt-generator. Hier können Sie sich eine robots.txt-Datei anfertigen lassen, die für die Registrierung bei Google, Bing oder
anderen Suchmaschinen benötigen.</textarea>

</body>
</html>











Kontakt    Datenschutz    Impressum