Internetpräsenz und website

Internetpräsenz Website

Bedeutung der Internetpräsenz

Homepage – Website – Webseite

Bevor es an die eigentliche website geht, sollten erst einmal einige wichtig Begriffe näher erklärt werden. Neben Webseite finden auch die Begriffe Homepage oder Website Anwendung. Der Unterschied zwischen den verschiedenen Begrifflichkeiten ist allerdings nicht ganz so deutlich, denn im allgemeinen Sprachgebrauch wird hier einiges vermischt.

Der Begriff Homepage setzt sich aus den beiden englischen Wörtern „home“ und „page“ zusammen. Dies nun als „Hausseite“ oder „Heimseite“ zu übersetzen, trifft nicht ganz den Kern der Bedeutung. In der Praxis hat der Begriff Homepage tatsächlich zwei Bedeutungen. Zum einen steht Homepage für alle Webseiten einer Internetpräsenz, so wird der Begriff auch hier auf web-service.de verwendet. Im Regelfall ist eine Homepage in diesem Sinne eher im privaten Bereich angesiedelt und hat irgendeinen persönlich Bezug zum jeweiligen Betreiber. Zum anderen wird der Begriff Homepage auch in der Bedeutung „Startseite“ verwendet. Mit „Home“ wird in vielen Projekten zum Beispiel die Startseite verlinkt. Im kommerziellen bzw. professionellen Bereich wird eine Internetpräsenz nicht Homepage sondern Website, Webpräsenz oder Internetpräsenz genannt.

Auch der Begriff Website hat im allgemeinen Sprachgebrauch zwei Bedeutungen. Eine Webseite kann eine einzelne Seite einer Homepage oder Website sein, eine Unterseite, aber auch die Startseite. Website wird allerdings auch als weitere Bezeichnung für eine ganze Internetpräsenz verwendet, wie auch Homepage und Website. Grundsätzlich ergibt sich die genaue Bedeutung aus dem Kontext, indem einer dieser Begriffe verwendet wird.

Dies alles sagt allerdings nichts über die Qualität aus, denn eine private Homepage muss sich nicht nur mit Hobbys, Freunden und Verwandten etc. beschäftigen. Es gibt viele private Homepages, die ansprechend gestaltet sind und mit ihrem nützlichen Informationen professionelle Websites mit demselben Themengebiet weit in den Schatten stellen.

Anzumerken bleibt noch, die anfängliche Bedeutung „Homepage für Startseite“ , „Webseite für einzelne Seite“ und „Website für alle Seiten einer Internetpräsendeutung der z“ ist überholt. Nur in toten Sprachen gibt es eine festgeschriebene Bedeutung. In Sprachen, die gesprochen werden, erfahren Begriffe im Laufe der Zeit manchmal Bedeutungsänderungen. Dies ist eine ganze normale Entwicklung, der man Rechnung tragen muss, egal was anderen, meist selbsternannte Experten, zu diesem Thema zu sagen haben.

Bedeutung von Websites in der heutigen Zeit

In der heutigen Zeit hat beinahe jedes Unternehmen, ob große Handelsgruppe, mittelständiges Unternehmen oder kleiner Familienbetrieb, eine eigene Webpräsenz. Auch Privatpersonen erstellen mit wachsender Begeisterung ihre eigene Homepage. Die Website wird heutzutage als Visitenkarte der Neuzeit angesehen und gewinnt mehr und mehr an Bedeutung für das Ansehen einer Firma. Weiterhin bieten Websites den Kunden die Möglichkeit, interessante Informationen über die Fima zu erhalten und sie können einen Einblick in das Warenangebot nehmen. Vielseitige Kontaktmöglichkeiten vereinfachen den Dialog zwischen Firma und Kunden und auf der Webpräsenz hinterlegte Wegbeschreibungen führen die Kunden auf direktem Wege in die Firma.

Gerade im gewerblichen Bereich sollte unbedingt darauf geachtet werden, dass alle Texte frei von Rechtschreibfehlern und grammatikalischen Fehlern sind, da sich solche Fehler sehr negativ auswirken können. Kunden könnten denken, dass die Firma nur eine minderwertige Qualität abliefert, da sie nicht einmal im Stande ist die deutsche Sprache zu beherrschen und Firmenpartner könnten von mangelnder Qualifikation in der Führungsetage ausgehen.

Für Privatpersonen hat die Homepage eher eine Art Hobbycharakter. Man kann sich auf seiner eigenen Homepage darstellen und verwirklichen, kann seine Meinung äußern, sein Hobby vorstellen, Fotos veröffentlichen und sich auf leichte Art und Weise so der ganzen Welt vorstellen.

 

Suchmaschinenoptimierung SEO

Suchmaschinenoptimierung für Google

 

Ein hoher Pagerank allein ist keine Garantie dafür, bei Google auf den vorderen Plätzen der SERPs, also auf den Suchergebnisseiten zu stehen. Damit die Webseite in den SERPs gut positioniert wird, sollte sie entsprechend optimiert werden. Suchmaschinenoptimierung für Google unterteilt sich in zwei Guppen, der Webseitenoptimierung und dem Linkaufbau.

Offizielle Angaben von Google, wie was gewertet wird, existieren nicht. Das ist und bleibt ein Geheimnis. Alle nachfolgenden Erkenntnisse sind durch ausprobieren zustande gekommen.

Webseitenoptimierung

Zuerst sollte man sich über die möglichen Suchworte engl. keywords Gedanken machen. Es ist von Vorteil, wenn im Domain, Verzeichnis- und Seitennahmen wichtige Suchworte untergebracht sind.

Recht wichtig sind die beiden Angaben zum Titel und der Beschreibung im Kopf der Webseite. Der Titel ist nach der Meinung vieler SEO-Experten sogar das wichtigste Rankingkriteriem. Titel engl. title und Beschreibung engl. description werden nach folgendem Syntax im Kopfbereich engl. head der Seite eingefügt:

<html>
<head>
<title>Suchmaschinenoptimierung</title>
<meta name=“description“ content=“Suchmaschinenoptimierung für Google“>
</head>

Google übernimmt diese Angaben für die Ausgabe in den SERPs. Ist die Webseite bereits in DMOZ (ODP) gelistet, so kommt es evt. vor, dass Google den dort eingetragenen Titel und die Beschreibung übernimmt. Um dies zu verhindern kann man im Kopf der Seite folgenden Meta-Tag notieren:

<meta NAME=“ROBOTS“ CONTENT=“NOODP“></meta>

Ach Überschriften haben eine hohe Bedeutung für Google. Suchworte, der H1 Tag wird besonders gewichtet. Auch die anderen H-Tag werden gewichtet. Beispiel:

<h1>Suchmaschinenoptimierung</h1>
<h2>Google</h2>

Selbstverständlich können in einem Tag auch mehrere Wörter untergebracht werden.

Darüber hinaus können auch der strong- und der b-Tag die Wichtigkeit einiger Suchworte hervorheben.

<strong>Webseitenoptimierung</strong>
<b>Linkaufbau</b>

Grafiken können von Google nicht gelesen werden. Grafiken sollten deswegen im alt-Tag mit Text beschrieben werden. Hier können auch mehrere Suchworte untergebracht werden.

<img src=“../grafik/layout/google.gif“ width=“88″ height=“33″ border=“0″ alt=“Suchmaschinenoptimierung für Google“></a>

Letzendlich ist der Inhalt einer Seite entscheidend. Text, Text und noch mal Text ist das Erfolgsrezept. Die ersten 300 Zeichen direkt nach dem body-Tag sind dabei von besonderer Bedeutung. Hier sollte möglichst viel Text mit wichtigen Suchworten untergebracht und dieser Bereich, so weit möglich, nicht mit HTML- oder Script-Befehlen ausgefüllt werden.

Weniger ist manchmal mehr. Es macht wenig Sinn jedes Suchwort in einen H1- oder strong-Tag zu schreiben oder ganze Suchwortlisten in alt-Tags zu packen. Recht gute Erfolge erzielt man mit einer Suchwortdichte um die 5%.

 

Auch das Alter von Domain, Webseite und Verweisen wird von Google in die Bewertung mit einbezogen, wobei das Alter der Domain zu den wichtigen Rankingkriterien gehört. Alte Seiten erhalten also einen Altersbonus.

Linkaufbau

Große Bedeutung kommt auch der Link- bzw. Domainpopularität der Domain zu. Je mehr eingehende Verweise eine Domain hat, desto höher die Linkpopularität. Je mehr dieser eingehenden Links von unterschiedlichen Domain kommen, desto höher die Domainpopularität. Für Unterseiten gilt dazu analog, zumindest wenn sie selber keine eingehenden Links haben, je weiter sie von der Startseite aus verlinkt sind, desto weniger der Link- bzw. Domainpopularität wird an sie weitergegeben.

Dies ist ein nicht zu unterschätzender Rankingfaktor. So ranken z.B. Unterseiten von starken Webkatalogen oft vor den eingetragenen Domain, die sich ausgiebig mit dem Thema befassen. Dabei ist dies nur auf die Webseitenoptimierung und der Link- bzw. Domainpopularität zurück zu führen, denn eingehende Links auf Unterseiten von Webkatalogen sind eher die Ausnahme.

Da auch Link- Domain- oder IP-Popularität keine fälschungssicheren Kriterien für die Qualität einer Webseite darstellen und inzwischen von Suchmaschinenspammern z.B. durch Linkfarmen massiv unterwandert werden, ist an zu nehmen, dass in Zukunft weitere Qualitätskriterien von Google implementiert werden.

Eine besondere Bedeutung kommt bei Google allen Verweisen zu. Wenn viele Verweise mit bestimmten Begriffen im Linktext auf eine Webseite verweisen, dann betrachtet Google die Seite für diese Begriffe als relevant. Deswegen sollte der Linktext entsprechend dem wichtigsten bzw. den wichtigsten Suchwort/en ausgewählt werden.

Bei externen Verweisen kann man, im Gegensatz zur internen Verlinkung, den Linktext meist nicht selber festlegen. Im Idealfall enthält der Name der Webseite bereits die wichtigsten Suchworte und wird übernommen. Immer dann, wenn man den Linktext selber festlegen kann, z.B. bei Webkatalogen oder Linktauschpartnern, ist eine kluge Auswahl ein wichtiges Kriterium für den Erfolg in den SERPs.

Je mehr Verweise auf eine Webseite linken, desto höher ist deren Linkpopularität. Die Linkpopularität ist allerdings nicht alles. Viele Verweise von unterschiedlichen Seiten ein und derselben Domain zählen nicht zwangsläufig mehr. Es ist derzeit nicht ganz klar, in wie weit Domain- und IP-Popularität bei Google gewertet werden.

Es ist jedenfalls an zu nehmen, dass Verweise von unterschiedlichen Domains bzw. von unterschiedlichen IP-Adressen höher bewertet werden. Verweise von bedeutenden Webseiten werden auf jeden Fall höher gewertet als solche von weniger bedeutenden Webseiten. In wie weit Verweise von thematisch ähnlichen Seiten, sogn. Themenrelevanz, einen Bonus erhalten, ist nicht zweifelsfrei geklärt.

Mit genügend starken Verweisen ist es durchaus möglich eine Webseite weit oben in die SERPs zu bringen, auch wenn die Webseite inhaltlich weder das bzw. die Suchwort/e enthält oder sonst noch etwas mit der Suchanfrage zu tun hat.

Wird diese Technik z.B. zum Diffamieren einer Person eingesetzt, so bezeichnet man dies als „Google Bombing“. Ein sehr schönen Beispiel dafür war, wenn man nach „miserable failure“ (erbärmliches Versagen) suchte und als erste Ausgabe in den SERPs die Webseite des weißen Hauses mit der Biografie von Gorge W. Bush erhielt. Seit dem 26.01.07 funktioniert das in diesem Fall nicht mehr. Fraglich ist nur, ob hier manuell eingegriffen oder die Rankingkriterien bei Google entsprechend geändert wurden.

Infofenster beim Drüberfahren

Infofenster beim Drüberfahren

css-trick Infofenster beim Drüberfahren

Unter einem „Tooltip“ versteht man einen css-trick in Form eines kleinen Info-Fensters, das sich beim Hovern öffnet und weitergehende Zusatzinformationen enthält. Wenn auch nachfolgend der Begriff „Info-Fenster“ verwendet wird, so sei darauf hingewiesen, dass es sich dabei nicht um ein eigenes Browserfenster, sondern vielmehr um eine „Box“ handelt, die beim Hovern erscheint.
Hier das Beispiel: Beim Drüberfahren soll text erscheinen HalloIch bin ein Tipfenster, wer über mich fährt erhält Informationen.

 

Folgendes wurde in die Style.css eingefügt:

a.info
{
position:relative;
z-index:1;
background-color:#ff0;
color:#2D006B;
text-decoration:none;
}

a.info:hover
{
z-index:2;
background-color:#C0FF3E;
}

a.info span
{
display: none;
}

a.info:hover span
{
display:block;
position:absolute;
top:2em;
left:2em;
width:15em;
border:1px solid #12127D;
background-color:#fc0;
color:#000;
text-align: center;
padding: 5px;
font-size: 0.8em;
}

und hier der html-Text:

Bei der Klasse a.info werden die Text- und Hintergrundformatierungen für den „normalen“, per Infofenster dann zu erläuternden Text hinterlegt. position:relative; z-index:1; dienen dazu, das spätere Infofenster in Bezug zum Text zu positionieren.
a.info:hover definiert in diesem Fall die Hintergrundfarbe des normalen Textes beim Hovern. Die „z-index-Angabe“ bewirkt, dass sich das spätere Infofenster eine Ebene über dem Ursprungstext einblendet.
„display: none;“ bei a.info span verhindert, dass der hinterlegte Infotext außerhalb des Hover-Zustandes ersichtlich ist.

In a.info:hover span sind schließlich die Angaben für den Tooltip hinterlegt. Man kann ihn absolut zum Text positionieren, indem top- und left- Werte definiert werden. Ferner können hier die üblichen Formatierungsangaben für Breite, Farben, Schrift, Hintergrund und Rahmen eingetragen werden.

Weitere Infos. Man kann natürlich auch Bilder einfügen

Tooltipp mit eingeblendeter Grafik

Anstelle eines erscheinenden Textes kann mann natürlich auch eine Grafik einblenden. Zu diesem Zweck muss man a.info:hover span eine Hintergrundgrafik sowie einen Breiten- und Höhenwert entsprechend dieser Grafik zuweisen.
Als Beispiel hier die modifizierten Angaben, wie in der dritten Demo zu sehen.

a.info:hover span
{
display:block;
position:absolute;
top:-60px;
left:300px;
width:234px;
height: 60px;
background: url(grafik.jpg);
}

Beiträge mit  vertikaler Randmarkierung versehen

Beiträge mit vertikaler Randmarkierung versehen

Mit CSS vertikale Linien erzeugen

Beiträge mit Randmarkierung versehen. Im Gegensatz zur horizontalen Linie <hr> gibt es bisher kein Element für eine vertikale Linie. Dennoch müssen wir auf Vertikallinien nicht verzichten. Mit ein paar kleinen Kniffen können sie mit CSS erzeugt werden.

Beiträge mit Randmarkierung 

Die Eigenschaft „border“ wird in der Regel für einen allumfassenden Gesamtrahmen genutzt. Man kann damit aber auch gezielt einen einzelnen oberen, rechten, unteren und linken Rahmen oder eine Kombination davon definieren.

Nehmen wir an, es soll ein

Absatz mit einer linken, roten Vertikallinie markiert werden, um auf die Wichtigkeit seines Inhalts hinzuweisen. Dazu brauchen wir lediglich eine CSS-Klasse zu bilden. Wir bezeichnen sie mit .bl als Abkürzung für „border-left“ (selbstverständlich könnt ihr auch andere Bezeichnungen wählen)

.bl

{
padding: 8px;
border-left: 2px solid #f00;
}

HTML-Aufruf mit

<p class=“bl“>
wichtiger Text-Absatz
<p>

Das Ergebnis sieht dann so aus:

wichtiger Text-Absatz erstellt am 14.6.2016

Mit padding verändere ich den Abstand ich den Abstand vom Balken auf 16.
Der Rand soll auf 6px erhöht werden. Die Farbe ist dunkelgrün = 1d4209
in der style definieren wir als .bl1
{
padding: 16px;
border-left: 6px solid #1d4209;
}

Dies ist mit padding 16, border 6px und dunkelgrün:

Hier gibts weitere Informationen

 

Beiträge mit Randmarkierung

In den Seitenkopf unterhalb der Menüleiste ein Bild einfügen

In den Seitenkopf unterhalb der Menüleiste ein Bild einfügen

Hintergrundbild im Seitenkopf

Unter dem Menü Bild einfügen

Unter dem Menü Bild einfügen ist ganz einfach, wenn man ein wenig css versteht. Geht man nämlich mit der F12-Taste auf die html-Seite und sucht nach dem div Kontainer im header wird man rDas Divi-theme bietet elativ schnell auf  <div id = main header > stossen. In diesen container müssen wir das Bild als Hintergrundbild einfügen. Hierzu in der Style.css folgendes eingeben:

background-image: url(link zum Bild); eingeben. Den „;“ nicht vergessen.

Wie gelangt man aber auf die Style-css. Hierzu gibt es verschiedene Möglichkeiten.

  1. Man geht mit einem ftp-Programm wie z.B. „file-Zilla“ auf den Server und bearbeitet dort die style.css.
  2. Man hat ein Child-Theme angelgt und kann nun direkt auf die style.css im editor gelangen. 
  3. Das Divi theme bietet verschiedene Möglicheiten die style.css zu bearbeiten.

 

 

Einführung in HTML und CSS

Einführung HTML und CSS

  1. HTML

Einführung HTML und CSS. Meines erachtens ist es sehr wichtig zumindest Grundkenntnisse in diesem Bereich zu haben.  Auch wenn man später, weil man z.B seine website mit einem CMS erstellt, nicht mehr direkt mit HTML und CSS arbeitet. Denn grundsätzlich wird ja jede Seite mit diesen Elementen aufgebaut. Das haben wir unserem lieben Sir Tim Berners Lee zu verdanken.

Sir Tim Berners Lee Erfinder von HTML

 

tim Einführung HTML und CSS

Sir TimBerners Lee Erfinder von HTML

Also hier nochmal das Grundgerüst einer jeden Webseite:

<Html>

<head>

</head

<body>

</body>

</html>

 

 

Am besten ihr kopiert euch diese tags in den Editor eurer Wahl und speichert als index.html. In den body,  schreiben wir eine wenig text.

Das sieht dann so aus:

<body>

Meine erste Webseite

</body>

 

Wenn wir jetzt auf die Index-seite doppel-klicken öffnet der browser und zeigt das Ergebnis an!

Bildschirmfoto vom 2016-02-26 05:42:21

Einige kleine aber wichtige Dinge müssen wir noch in den head schreiben.

Nämlich Informationen über die Version, die Sprache, die Seitenbeschreibung und <meta charset=“UTF-8″>

UTF 8 ist die erweiterte Zeichenkodierung. Hierdurch werden auch unsere deutschen Umlaute richtig geschrieben. Würde diese Kodierung fehlen, dann müsste jedes Umlaut quasi „händisch“ geschrieben werden.

ä müsste dann z.B so aussehen; &auml;

Jetzt müssen wir noch den body aufteilen. In den Kopfbereich, den Bereich für die Navigation und de Inhalt oder content.

Das machen wir mit sogenannten div-Kontainern.

Fügt folgendes in den body ein:

<div id=’kopf‘>
</div>
<div id=’navigation‘>
</div>
<div id=’inhalt‘>
</div>

Anstelle von ‚ -Zeichen können natürlich auch „“ gesetzt werden!

Unsere index.html sieht nun so aus:

<html>
<head>
<meta http-equiv=“Content-Language“ content=de“>
<meta charset=“UTF-8″>
<title>Seitentitel</title>
<meta name=“description“ content= “ Seitenbeschreibung“ />
<link rel=“stylesheet“ type=“text/css“ href=“style.css“/>
</head>
<body>

<div id=’kopf‘>
</div>
<div id=’navigation‘>
</div>
<div id=’inhalt‘>
Dies ist meine Webseite

</div>
</body>
<html>

Bitte beachte, dass ich den Text jetzt in den inhalt-div geschrieben habe. Im folgenden wollen wir die div-Kontainer  formatieren. Um dies zu tun kommt CSS ins Spiel.

 

2. CSS

CSS gibt es seit 1995 und es entstand unter der Zusammenarbeit von zwei Computer- Fachleuten mit den Namen Hakon Wium und Bert Bos.

Das erste Mal präsentiert wurde CSS im Jahr 1994 auf einer Konferenz in Chicago, wonach auch das W3C auf diese Stylesheet Sprache reflektierte. Die Weiterentwicklung war erfolgreich, und so gab es nach CSS Level 1 bald auch das 2. Level, das bis heute von einigen Browsern komplett angewandt wird. In der gesamten Entwicklungsgeschichte arbeitete man immer wieder daran, Unstimmigkeiten auszuräumen und die Funktionsweise zu verbessern. CSS ist  beim Aufbau der meisten Homepages heute ein unverzichtbares Hilfsmittel. Es sorgt für die Gestaltung und dafür, dass die Inhalte und die Gestaltung der Seite voneinander getrennt behandelt werden können. Die Kombination mit HTML und XHTML ist üblich. Über CSS findet man viele Hilfestellungen im Internet, wodurch die praktische Anwendung sehr erleichtert wird.

Dass der browser weiß, dass es eine css-Datei gibt muss folgender link in die html Seite eingefügt werden:

<link rel=“stylesheet“ type=“text/css“ href=“style.css“/>

Wir erstellen noch eine style.css-Datei und speichern sie in unserem Webordner ab.

Wir öffnen die style.css und geben dort die Daten für die Formatierung unserer Webseite ein. Ich habe folgendes eingegeben:

#kopf
{width:1000px;
height:150px;
background-color:#ae2828;
margin-left:10px;}
body {
background-color:#dcdcdc;}
#navigation {
width:100px;
height:500px;
border: 5px solid #00501f;
margin-left:10px;
Position:absolute;}
#inhalt {
width:890px;
height: 2000px;
background-color: red;
margin-left:120px;
}

Am besten kopierst du das und fügst es in deine style.css-Datei ein!

Abgeleitet aus dem Englischen kann man gut erkennen worum es jeweils geht. die Farbcodes können aus jedem Bildbearbeitungsprogramm oder auch einfach mit googeln aus dem Internet geholt werden!

Wenn wir jetzt unsere Webseite betrachten so kann man jetzt schon die grundsätzlichen Bereiche erkennen.

Siehe hier

Bildschirmfoto vom 2016-02-26 06:41:18

 

Wer mehr über CSS wissen möchte oder einfach ein paar praktische Tips für seine Webseite benötigt der schaue doch mal hier nach

Praktische Tipps zu CSS

 

Das CSS/Box Modell

Das CSS/Box Modell

Das css box-Modell

  1. Theorie

Das css box-Modell Im visuellen Anzeigemodell erfolgt die Darstellung von Elementen durch das Zeichnen von Rechtecken. Die Bestandteile dieser Rechtecke beschreibt das „Box-Modell“. Eine Box kann bestehen aus:

  • Dem Inhaltsbereich, also der Fläche, die durch Texte und Bilder oder Eigenschaften wie width und height vorgegeben wird,
  • einem Innenabstand (padding),
  • einem Rahmen (border) und
  • einem Außenabstand (margin).

Bei Blockelementen können Höhe und Breite beliebig festgelegt werden, bei Inlineelementen werden die Maße durch den Inhalt vorgegeben.

Innen- und Außenabstände sowie Rahmen können für jede der vier Seiten einer Box einzeln festgelegt werden.

Wird eine Box positioniert, beginnt die linke Außenkante bei left, die obere Außenkante bei top, die rechte Außenkante bei right und die untere Außenkante bei bottom.

Hintergrundbilder und -farben werden, falls mithilfe von background-clip nichts Gegenteiliges festgelegt wurde, in den Bereichen des Inhalts, des Innenabstands und des Rahmens gezeichnet. Ein Rahmen verdeckt jedoch den Hintergrund, so dass dieser nur dann sichtbar ist, wenn der Rahmen teilweise durchsichtig ist (z.B. beim gestrichelten Rahmenstil). Die Außenabstände sind immer vollständig transparent.

Beachten Sie: Der Begriff „Box“ ist nicht mit dem Begriff „Element“ gleichzusetzen. Nicht jedes Element erzeugt eine Box, aber Boxen können auch erzeugt werden, wenn in einem Dokument kein Element als direktes Gegenstück existiert.

 Boxmodell-detail.png

Die einzelnen Rechtecke werden von innen nach außen bezeichnet als

  • content-box
  • padding-box
  • border-box
  • margin-box

 

2.Praxis

Jetzt wollen wir das Ganze mal am praktischen Beispiel betrachten.  Wir nehmen folgende index.html:

Gegeben sei die folgende Index.html :

<html>
<head>
<meta http-equiv=“Content-Language“ content=de“>
<meta charset=“UTF-8″>
<title>Seitentitel</title>
<meta name=“description“ content= “ Seitenbeschreibung“ />
<link rel=“stylesheet“ type=“text/css“ href=“style.css“/>
</head>
<body>

<div id=’inhalt‘>
<div id =“text“>
Dies ist Fülltext:„Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that’s what you see at a toy store. And you must think you’re in a toy store, because you’re here shopping for an infant named Jeb.“

</div>

</div>
</body>
</html>

Es ist hier unschwer zu erkennen, dass in den Kontainer  „inhalt“ der Kontainer „text“ geschachtelt ist.

Wir erstellen eine zugehörige style.css- Datei:

#inhalt {
width:500px;
height:500px;
background-color: red;
margin-left:120px;
position:absolute;

}

#text {
padding-top:20px;
padding-left:20px;
padding-right:20px;
border: 10px solid #00501f;
width:400px;
height:400px;
background-color: blue;
margin-top:10px;}

Die Darstellung im browser sieht dann wie folgt aus:

geschachtelt1

Wie man sieht liegt der text-Kontainer im Inhalt-Kontainer. Dies ist wegen „position absolute“ möglich.

 

 

 

 

Möchte man den text innerhalb des Kontainers einrücken so macht man das mit padding (left, top, right und bottom).

Das Ergebnis sieht dann für jeweils 30px einrücken so aus:

die style.css

#inhalt {
width:500px;
height:500px;
background-color: red;
margin-left:120px;
position:absolute;
}

#text {
padding-top:30px;
padding-left:30px;
padding-right:30px;
border: 10px solid #00501f;
width:400px;
height:400px;
background-color: blue;

}

der browser:

 

Bipadding

Man kann deutlich erkennen, dass der Text innerhalb des Kontainers eingerückt ist.

 

 

 

 

Um jetzt noch den gesamten Textblock innerhalb des Kontent-blocks zu verändern benötigt man das „margin“

Nur margin eingeben geht auch. Hier „margin:10px“

 

Die style.css

#inhalt {
width:500px;
height:500px;
background-color: red;
margin-left:120px;
position:absolute;
}

#text {
margin:10px;
padding-top:30px;
padding-left:30px;
padding-right:30px;
border: 10px solid #00501f;
width:400px;
height:400px;
background-color: blue;

}

Ansicht im browser:

margin

Übrigens: das „margin-left:120px“ beim inhalt zeigt uns,  dass dasselbe für die nächste box auch wieder gilt!

 

 

 

 

Zum Newsletter anmelden

Zum Newsletter anmelden

Melden sie sich zum meinem Newsletter an und Sie erhalten ein Geschenk

Sie haben sich erfolgreich angemeldet