Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

Posts Tagged ‘Little Boxes’

HTML/CSS-Grundlagen: Unterschied zwischen relativer und absoluter Positionierung

Posted by sura1 - 9. Januar 2009

jan09_128x1282
Bookmark and Share

HTML/CSS-Grundlagen: Unterschied zwischen relativer und absoluter Positionierung

Basierend auf meinem Artikel HTML/CSS-Grundlagen: 3 div-Boxen im Fluss (Flow) vom 25. November 2008 möchte ich Ihnen heute in der Reihe HTML/CSS-Grundlagen den Unterschied zwischen relativer und absoluter Positionierung erklären.

Die Grundlage zu meinen nachfolgenden Erläuterungen bilden die 3 verkürzten Boxen im Fluss aus dem Beispiel vom 25.11.08.

Quellcode:

HTML                                     CSS
<body>                                  body {
  <div>Box1</div>                       color: black;
  <div>Box2</div>                       background-color: grey;
  <div>Box3</div>                       padding: 0;
</body>                                     margin: 0;
                                             }
                                             div {
                                                 width: 20%;
                                                 background-color: white;
                                                 padding: 10px;
                                                 border: 1px solid black;
                                                 margin: 5px;
                                             }

flow20

   Beispiel ansehen:

demo2

Die relative Positionierung:

Die relative Positionierung mit position: relative macht 2 Dinge:

• Sie verschiebt die Box von ihrer normalen Position im Fluss.
• Sie markiert den ursprünglichen Platz des Elementes als geschützt

Die anderen Elemente im Dokument verhalten sich so, als ob das Element noch an seinem ursprünglichen Platz im normalen Fluss steht.

HTML und CSS werden für dieses Beispiel ein klein wenig geändert:

HTML                                       CSS
<body>                                    body {
  <div id="anders">Box1</div>     color: black;
  <div>Box2</div>                       background-color: grey;
  <div>Box3</div>                       padding: 0;
</body>                                     margin: 0;
                                               }
                                               div {
                                                 width: 20%;
                                                 background-color: white;
                                                 padding: 10px;
                                                 border: 1px solid black;
                                                 margin: 5px;
                                               }
                                               #anders {
                                                  position: relative;
                                                  top: 25px;
                                                  right: 25px;
                                                  background-color: #f3c600;
                                               }

Hier sehen Sie das Ergebnis:

positionierung_relative

   Beispiel ansehen: 
   Grafik oder Demo-Button anklicken!
demo2

Die Boxen 2 und 3 verändern sich also überhaupt nicht. Bei der relativen Positionierung bleibt die ursprüngliche Position des Elements wie gesagt geschützt und wird nicht von den nachfolgenden Elementen beansprucht.

Ein positioniertes Element bekommt seine genauen Koordinaten mit den CSS-Eigenschaften top, right, bottom und left, die bei der relativen Positionierung von der ursprünglichen Position im Flow aus gemessen werden:

• top: 25px

drückt die Box 1 nach unten. An der normalen Position der Box werden oben 25px eingefügt

• right: 25px

schiebt die Box 1 nach links, sodass sie zum Teil verschwindet. An der ursprünglichen Position werden rechts 25 Pixel eingefügt.

Alle Angabe sind relativ zur ursprünglichen Position und geben an, wo der Wert eingefügt wird und nicht, in welche Richtung die Box geschoben werden soll.

Die absolute Positionierung:

Im Gegensatz zur relativen nimmt die absolute Positionierung das Element komplett aus dem Fluss heraus. Das Element wird – bildlich gesprochen – hoch gezogen, und alle anderen Elemente verhalten sich so, als ob es gar nicht da wäre.

Das HTML für dieses Beispiel ist gleich, im CSS wird genau ein Wort geändert:

HTML                                       CSS
<body>                                    body {
  <div id="anders">Box1</div>     color: black;
  <div>Box2</div>                       background-color: grey;
  <div>Box3</div>                       padding: 0;
</body>                                     margin: 0;
                                               }
                                               div {
                                                 width: 20%;
                                                 background-color: white;
                                                 padding: 10px;
                                                 border: 1px solid black;
                                                 margin: 5px;
                                               }
                                               #anders {
                                                  position: absolute;
                                                  top: 25px;
                                                  right: 25px;
                                                  background-color: #f3c600;
                                               }

Nur ein einziges Wort wird geändert (absolute statt relative!), aber die Wirkung ist enorm. Box 1 steht plötzlich rechts, und bemerkenswerterweise rutschen die Boxen 2 und 3 nach oben:

positionierung_absolute

   Beispiel ansehen: 
   Grafik oder Demo-Button anklicken!
demo2

Absolut positionierte Elemente werden aus dem Fluss herausgehoben und liegen über den anderen Elementen.

Die genaue Position wird wieder durch top, right, bottom oder left angegeben, aber die Werte für diese 4 CSS-Eigenschaften orientieren sich nicht mehr an der ursprünglichen Position der Box im Fluss:

Punkt 1:

Die absolute Positionierung eines Elements bezieht sich auf das nächste umschließende Element, das mit relative, absolute oder fixed positioniert ist.

Punkt 2:

Falls kein positioniertes umschließendes Element vorhanden ist (kommt in der Prxis häufig vor), erfolgt die Positionierung relativ zum obersten Element des Dokumentenbaumes, und das ist nicht body, sondern html.

Diese beiden Aussagen kann man abschließend wie folgt zusammenfassen:

• Absolute Positionierung ist relativ zu irgendeinem Bezugspunkt.

• Es gibt zwei verschiedene mögliche Bezugspunkte:
– ein umgebendes, positioniertes Element
– das Stammelement html.

Ausführliche Informationen zur Positionierung mit CSS:

http://www.css4you.de/posproperty.html
http://www.css4you.de/position.html
http://jendryschik.de/wsdev/einfuehrung/eigenschaften/positionierung
http://www.mediaevent.de/tutorial/positionieren.html
http://www.barelyfitz.com/screencast/html-training/css/positioning/
http://www.de.html.net/tutorials/css/lesson14.asp
http://www.thestyleworks.de/ref/position.shtml
http://www.validome.org/doc/HTML_ge/css/eigenschaften/positionierung.htm

Quellnachweis:

Little Boxes – Teil 1

littleboxes_teil01-89x127

Webseiten gestalten mit CSS. Grundlagen.
Markt+Technik / 2007 / Dozent Peter Müller

www.little-boxes.de
Little Boxes, Teil 1 – Beispieldateien

Ähnliche Artikel:

HTML/CSS-Grundlagen: 3 div-Boxen im Fluss (Flow)
CSS Float: Schwebende Boxen (Theorie und Praxis)
CSS Sidebar mit runden Boxen
CSS-Beispiele: Blockquote (2x), Textfeld, Hinweisboxen
CSS-Liste mit grafischen Aufzählungszeichen
CSS-Listen mit Sonderzeichen

Posted in CSS | Verschlagwortet mit: , , , , , , , , , , , , , | Leave a Comment »

CSS-Beispiele: Blockquote, Textfeld, Hinweisboxen

Posted by sura1 - 8. Oktober 2008

Bookmark and Share

CSS-Beispiele: Blockquote (2x), Hervorgehobenes Textfeld, Hinweisboxen

Im Rahmen meiner Reihe “ Beispieldateien aus Little-Boxes – Teil 02 “ möchte ich Ihnen heute 4 neue CSS-Beispiele vorstellen.

Download: hier (15 KB – alle Dateien+Grafiken) oder am Ende jedes einzelnen Beispieles!


1. Zitate mit Blockquote:


Quelltext:
<body>
<h1>Zitate mit <em>blockquote</em></h1>

<p>Der folgende Absatz ist ein Block-Zitat mit Quellenangabe:</p>

<blockquote>
<p>Sie können Zitate von Fremdautoren in einem eigenen, anders
formatierten (zumeist eingerückten) Absatz hervorheben.</p>
<p>Es handelt sich dabei jedoch um eine logische, inhaltliche
Auszeichnung. Wie diese Absätze genau formatiert werden, bestimmt
letztlich der Web-Browser. Die Vorgabe ist jedoch, solche Absätze
auffällig und vom übrigen Text unterscheidbar anzuzeigen.
<cite>(Quelle: <a href="http://de.selfhtml.org/html/text/zitate_adressen.htm">
SelfHTML</a>)</cite></p>
</blockquote>

</body>
 CSS-Datei:
/* ==============================================
      Gestaltung Layout und Hyperlinks
      ============================================== */
   * {
      padding: 0;
      margin: 0;
   }
   h1, p {
      margin: 1em 0;
   }
   body {
      width: 50em;
      font-family: "Lucida Sans Unicode", "Lucida Grande",
      Verdana, Arial, Helvetica, sans-serif;
      font-size: small;
      line-height: 1.5;
      padding: 10px;
      margin: 0 auto;
   }
   a[href^="http:"] {
      background:url(linkinsweb.gif) no-repeat left center;
      padding-left: 16px;
   }
   a[href^="http:"]:visited {
      background-image: url(linkinsweb_visited.gif);
   }
   /* ==============================================
      Gestaltung von blockquote
      ============================================== */
   blockquote {
      background: #fff9df ;
      padding: 1em 1em 0 1em;
      border-top: 3px solid #f3c600;
      border-bottom: 3px solid #f3c600;
      margin-left: 0; /* keine Zentrierung */
   }
   blockquote cite {
      display: block;
      font-size: 90%;
      font-style: normal;
      letter-spacing: 1px;
      text-align: right;
   }



2. Zitate mit Blockquote und Grafik:


Quelltext:
<body>
<h1>Zitate mit <em>blockquote</em></h1>

<p>Der folgende Absatz ist ein Block-Zitat mit Quellenangabe:</p>

<blockquote>
<p>Sie können Zitate von Fremdautoren in einem eigenen, anders formatierten
(zumeist eingerückten) Absatz hervorheben.</p>
<p>Es handelt sich dabei jedoch um eine logische, inhaltliche Auszeichnung.
Wie diese Absätze genau formatiert werden, bestimmt letztlich der Web-Browser.
Die Vorgabe ist jedoch, solche Absätze auffällig und vom übrigen Text
unterscheidbar anzuzeigen.
<cite>(Quelle: <a href="http://de.selfhtml.org/html/text/zitate_adressen.htm">
SelfHTML</a>)</cite></p>
</blockquote>

</body>
 CSS-Datei:
/* ==============================================
      Gestaltung Layout und Hyperlinks
      ============================================== */
   * {
      padding: 0;
      margin: 0;
   }
   h1, p {
      margin: 1em 0;
   }
   body {
      width: 50em;
      font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana,
                    Arial, Helvetica, sans-serif;
      font-size: small;
      line-height: 1.5;
      padding: 10px;
      margin: 0 auto;
   }
   a[href^="http:"] {
      background:url(linkinsweb.gif) no-repeat left center;
      padding-left: 16px;
   }
   a[href^="http:"]:visited {
      background-image: url(linkinsweb_visited.gif);
   }
   /* ==============================================
      Gestaltung von blockquote
      ============================================== */
   blockquote {
   background: #fff9df url(quote.gif) no-repeat 5px 5px;
      padding: 1em 1em 0 40px;
      border-top: 3px solid #f3c600;
      border-bottom: 3px solid #f3c600;
      margin-left: 0; /* keine Zentrierung */
   }
   blockquote cite {
      display: block;
      font-size: 90%;
      font-style: normal;
      letter-spacing: 1px;
      text-align: right;
   background: url(unquote.gif) no-repeat right bottom;
   padding: 10px 40px 0 0;
   }



3. Hervorgehobene Textpassage:


Quelltext:
<body>
<h1>Hervorgehobene Passagen</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean blandit neque in turpis. Etiam vitae pede. Nam semper
arcu sollicitudin turpis. Vestibulum nec diam. Nunc placerat
tortor quis neque. Donec vulputate urna at magna. Vivamus sit
amet nunc fringilla sem ullamcorper tristique. Suspendisse vitae
turpis. Duis rhoncus velit. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Mauris
in quam. Integer sit amet lacus. Vivamus sit amet tortor. </p>

<blockquote class="hervorgehoben"><p>Hervorgehobene Passagen
werden tatsächlich gelesen!&nbsp;</p></blockquote>

<p>
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Suspendisse rhoncus. Proin
posuere, sapien quis bibendum nonummy, dolor lacus lacinia nulla,
sit amet mollis neque orci vel risus. Donec id lectus vitae augue
tempus adipiscing. Nam in pede et risus volutpat pretium. Nulla
congue est. Praesent non mauris eu nisl eleifend fermentum. Fusce
quis tortor. Suspendisse potenti. Pellentesque vel urna. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae;
</p>

</body>
 CSS-Datei:
/* ======================
      Gestaltung Layout
   ====================== */
* {
   padding: 0;
   margin: 0;
}
h1, p {
   margin: 1em 0;
}
body {
   width: 50em;
   font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana,
                 Arial, Helvetica, sans-serif;
   font-size: small;
   line-height: 1.5;
   padding: 10px;
   margin: 0 auto;
}

/* ==============================================
   Hervorgehobene Textpassage
   ============================================== */
.hervorgehoben {
	float:right;
   width: 15em;
	font-size: 110%;
   background-color: #fff9df;
	padding: 0 0 0 35px;
   border-top: 3px solid #f3c600;
   border-bottom: 3px solid #f3c600;
	margin: 10px;
}



4. Hinweisboxen:


Quelltext:

<body>
<h1>Hinweisbox</h1>

<p class="hinweisbox">Bitte füllen Sie das Feld "Name" aus.</p>
<p class="nr02">Bitte füllen Sie das Feld "Name" aus.</p>
<p class="nr03">Bitte füllen Sie das Feld "Name" aus.</p>
<p class="nr04">Bitte füllen Sie das Feld "Name" aus.</p>
<p class="nr05">Bitte füllen Sie das Feld "Name" aus.</p>

<p style="border: none; width: auto; padding: 0; margin-top: 1em;">
Die Icons sind aus dem
<a href="http://www.famfamfam.com/lab/icons/silk/">SILK-Set</a>
von famfamfam. </p>

</body>
 CSS-Datei:
/* ======================
      Gestaltung Layout
      ====================== */
   * {
      padding: 0;
      margin: 0;
   }
   h1, p {
      margin: 1em 0;
   }
   body {
      width: 50em;
      font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana,
                    Arial, Helvetica, sans-serif;
      font-size: small;
      line-height: 1.5;
      padding: 10px;
      margin: 0 auto;
   }
   /* ==============================================
      Hinweisbox
      ============================================== */
   p {
      width: 20em;
      padding: 5px 5px 5px 45px;
      border-top: 2px solid #f3c600;
      border-bottom: 2px solid #f3c600;
      margin-bottom: 2em;
   }
   p.hinweisbox { background: #fff url(error.png) no-repeat 15px center; }
   p.nr02 { background: #fff url(exclamation.png) no-repeat 15px center; }
   p.nr03 { background: #fff url(smiley.png) no-repeat 15px center; }
   p.nr04 { background: #fff url(asterisk_orange.png) no-repeat 15px center; }
   p.nr05 { background: #fff url(email.png) no-repeat 15px center; }


Posted in CSS | Verschlagwortet mit: , , , , , , , | 4 Comments »

CSS-Beispiel: Gestaltung Zebratabelle (www.little-boxes.de)

Posted by sura1 - 4. Oktober 2008

Bookmark and Share

Erstellung einer Zebratabelle (nur mit CSS)

Ich möchte Ihnen heute  ein kleines Beispiel vorstellen, wie Sie eine HTML-Tabelle mit Hilfe von CSS formatieren.

Quelle: Little Boxes Teil 02 (Beispieldateien)

Fertiges Beispiel:

Das Cascading Style Sheet für diese Tabelle sieht wie folgt aus:

1. Layout:

2. Gestaltung der Überschrift:

3. Gestaltung Tabellenzellen:

4. Formatierung Zebrastreifen:

Die CSS-Datei finden Sie im Quelltext des fertigen Beispieles!

Posted in CSS-Tabellen | Verschlagwortet mit: , , , , , , , | Leave a Comment »

HTML-Listen einmal anders: Schwebende Listenkisten

Posted by sura1 - 9. August 2008

Bookmark and Share

Ich möchte Ihnen hier in einem Beispiel zeigen, was Sie mit einer ungeordneten Liste (ul) und ein wenig CSS alles „anstellen“ können.

Beispieldateien (zip-file: 1oKB): Button anklicken oder hier(!) downloaden

Beispiel: (bitte Grafik anklicken oder hier(!) ansehen)

Idee und Inspiration:

Auf die Idee gebracht hat mich Dozent Peter Müller, welcher in seinem Buch „Little Boxes“ (Teil 2, Kapitel III, Absatz 12.2) ein entsprechendes Beispiel vorstellt. Leseproben und Beispieldateien können Sie auf der Webseite http://little-boxes.de/ herunterladen.

Die zweite wichtige Inspiration ist von Stu Nicholls von CSSplay. Ich habe auf seiner Seite nach einfachen CSS-Menüs gesucht und bin dabei auf folgendes (englisch-sprachige) Tutorial gestoßen: http://www.cssplay.co.uk/menus/tutorial.html .

Stu Nicholls erklärt in seinem Workshop, wie man eine vertikale Navigation erstellt, ohne (!) auf Listenelemente zurückgreifen zu müssen ( A Vertical Button Menu – The EASY Way).

Umsetzung:

Nach eingehender Beschäftigung mit den Vorlagen von Peter Müller und Stu Nicholls ging ich daran, das Muster-Beispiel an meine Bedürfnisse anzupassen.

Listen sind sehr flexibel, und oft genug sieht man ihnen den Ursprung als Liste nicht an.Ich beabsichtige, eine XHTML-Referenz zu erstellen und die XHTML-Elemente auf der Startseite in sieben Themengebiete aufzuteilen.

Die sieben Boxen im Textbereich gehören inhaltlich zusammen und sollen deshalb in einer ungeordneten Liste untergebracht werden.

Herausgekommen ist dabei folgendes:

Schwebende Listenkisten

Schritt 01:

Das HTML als Grundlage (schwebende_listenkisten.html)

<ul>
<li>
<h3><a href="#">XHTML-Struktur</a></h3>
<div class="list1">
<a class="nav" href="description.html#body">body</a>
<a class="nav" href="description.html#head">head</a>
<a class="nav" href="description.html#html">html</a>
<a class="nav" href="description.html#meta">meta</a>
<a class="nav" href="description.html#noscript">noscript</a>
<a class="nav" href="description.html#script">script</a>
<a class="nav" href="description.html#style">style</a>
<a class="nav" href="description.html#title">title</a>
<a class="nav" href="description.html#frame">frame</a>
<a class="nav" href="description.html#frameset">frameset</a>
<a class="nav" href="description.html#noframes">noframes</a>
<a class="nav" href="description.html#iframe">iframe</a>
</div>  <!-- list1 ende -->
</li>
<li>
<h3><a href="#">Logische Auszeichnung</a></h3>
<p>Donec varius lacus a leo. Pellentesque habitant morbi tristique
senectus etnetus et malesuada fames ac turpis egestas.</p>
<p>Luptatum repudiare gloriatur ex quo. Ei sale deserunt qui, at vis
velit efficiendi, ea usu graeci takimata. Ne veritus minimum pro.</p>
</li>
</ul>

<p class="clear_ie6">Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. In feugiat malesuada urna. Morbi et dui quis tortor convallis
facilisis. Morbi metus arcu,ultrices quis, tristique eu,vehicula a,
risus. Ut condimentum ultrices lacus. Morbi quis dolor.
Donec varius lacus
a leo. </p>

Sie sehen hier den Quellcode der ersten beiden Boxen und den ersten Textabsatz unterhalb der schwebenden Listenkisten (p class=“clear_ie6″). Die restlichen fünf Boxen sind genauso aufgebaut (siehe Originalcode im zip-file!!).

Schritt 02:

CSS: Listenelemente floaten, Liste clearen (schwebend.css)

/* Liste und Listenelemente floaten */

ul {
   float: left; /* Zum Umschließen der gefloateten Listenelemente */
   list-style-type: none;
   padding: 0;
   margin: 0 0 1em 2.5em; } /* Abstand zum nachfolgenden Fließtext */
ul li {
   float: left;
   width: 12em; /* Breite den Umständen anpassen */
   background: #ffeda0;
   border: 1px solid #000;
   margin: 0 0 0.5em 0.5em;
}
ul p { margin: 0.5em; }
ul h3 { font-size: 110%;
        margin-top: 0;
        border-bottom: 1px solid #000;
       }
ul + * { clear: both; }
.clear_ie6 { clear: both; }

In Schritt 2 wird im Stylesheet schwebend.css zuerst die ungeordnete Liste <ul> mit den Listenelementen <li> bearbeitet und entsprechend formatiert.

Danach werden die ungeordnete Liste und die Klassee .clear_ie6 mit dem CSS-Attribut clear:both; versehen   ( siehe http://www.css4you.de/clear.html, http://fwpf-webdesign.de/css/float-und-clear ). Die Auswirkungen der float-Eigenschaft sind nicht immer intuitiv verständlich. Diverse Darstellungsfehler des Internet Explorer im Zusammenhang mit Float erschweren dies zusätzlich. Benutzen Sie bitte zum Betrachten und Nachvollziehen der Float-Beispiele nicht den Internet Explorer.

Schritt 03:

CSS: Links in der Überschrift (Listenkiste) gestalten

/* Die Links in der Überschrift */

ul h3 a {
   display: block;
   text-decoration: none;
   padding: 0.5em; }
ul h3 a:link {
   background: #f3c600;
   color: #000;
}
ul h3 a:visited {
   background: #f3c600;
   color: #ffeda0;
}
ul h3 a:hover,
ul h3 a:focus,
ul h3 a:active {
   background: #d90000;
   color: white;
}

Im dritten Schritt werden die Links in der Überschrift der schweben Boxen formatiert (display: block; Link-Unterstreichung entfernen, Hintergrundfarbe, Innenabstand, Schriftfarbe, Pseudoklassen).

Schritt 04:

Links (Hyperlinks) innerhalb der schwebenden Boxen gestalten

/* Hyperlinks innerhalb der schwebenden Boxen gestalten */

.list1 { padding: 0;
         margin: 0 0 1em 1em; }

a.nav:link, a.nav:visited {
     padding: 0 0 0 1em;
     display: block;
     width: 9em;
     background: #f3c600;
     color: #000;
     font-weight: bold;
     border: 1px solid #000;
     margin-top: 2px;
     text-align: left;
     text-decoration: none;
     overflow: hidden;
    }
a.nav:hover,
a.nav:focus,
a.nav:active {
     background: #d90000;
     color: #fff;
     border: 1px solid #000; }

Im abschließenden Punkt 4 bearbeite ich zuerst die div-Box mit der Klasse .list1 ( Innen- und Außenabstände anpassen!).

In dieser div-Box befinden sich die Links (Hyperlinks) für die einzelnen XHTML-Elemente. Mit dem CSS-Befehl display:block ordne ich die Links untereinander an, ohne ein Listenelement einsetzen zu müssen!

Entsprechende Innen- und Außenabstände, eine Anpassung der Hintergrund-Farben an die Farbgestaltung aus Punkt 3 und die Angleichung der Schriftfarbe an die Listenkisten-Überschriften geben den 7 Boxen ein einheitliches Bild.

Posted in HTML | Verschlagwortet mit: , , , , , , | Leave a Comment »

Geschichte über die Entstehung meiner ersten Webseite

Posted by sura1 - 21. Mai 2008

Bookmark and Share


Ich muss voraussetzen, dass ich erst seit Juni 2007 über einen Internetanschluss verfüge. Vorher hatte ich mit der Programmierung von Webseiten überhaupt noch nie etwas zu tun. Begriffe wie XHTML oder CSS hatte ich bis zu diesem Zeitpunkt noch nie gehört; für mich war die Erstellung von Websites ein völlig neues Gebiet.

Eigentlich wollte ich aufgrund meiner Tätigkeit als Hobbymaler nur meine Bilder im Internet veröffentlichen. Deshalb begann ich ab Anfang Juli 2007, nach möglichen Hosting-Abietern zu suchen. Ich hatte geplant, eine Domain anzumelden und nur mit meinen Kunstwerken online zu gehen.

Es kam jedoch alles ganz anders:

Ich beschäftige mich nun seit einem halben Jahr nur mehr mit Begriffen wie Cascading Style Sheets, Gestaltung von Formularen, (X)HTML, Tabellen und ähnlichem.


Meine ersten Schritte:

(X)HTML

Als erstes habe ich mich darüber informiert, wo ich am besten HTML (HypertextMarkupLanguage) lernen kann. Sehr schnell stieß ich dabei bei meinen Nachforschungen auf die „Bibel“ für Webseitengestalter: de.selfthtml.org.

Zielgruppen:

Zielgruppe sind alle Computer-Anwender, die einen Web-Browser ihr Eigen nennen, die möglichst schon einige „Surf“-Erfahrungen im Web gesammelt haben und die nun wissen möchten, wie man selbst Web-Seiten erstellt. Alle Menschen, die sich privat, ehrenamtlich oder beruflich mit dem Erstellen von Web-Seiten beschäftigen, sind angesprochen. Erklärtes Ziel des Dokuments ist es, Menschen Mut zu machen, das, was sie zu sagen haben, selbst im Web zu publizieren und dadurch aktiv an der World Wide Web Revolution teilzunehmen. Denn das Motto des Web lautet: „Everyone’s a publisher“.

SELFHTML enthält sowohl einführende Kapitel für Anfänger als auch reine Nachschlagekapitel für Profis. Die Dokumentation ist eine Mischung aus Tutorial und Referenz.

Für Anfänger besonders geeignet ist folgender Abschnitt:

http://de.selfhtml.org/navigation/anfang/index.htm

Das Motto – die Energie des Verstehens – ist ernst gemeint. SELFHTML richtet sich nicht an Leute, die mit dem Anspruch antreten, alles fertig vorgesetzt zu bekommen und dann damit prahlen zu können, was sie tolles Eigenes geschaffen haben. Diese Dokumentation ist kein „Ihre-Homepage-in-zehn-Minuten“-Quickie. Das Dokument möchte erreichen, dass seine Anwender verstehen was sie lernen und wissen was sie tun, wenn sie an eigenen Web-Seiten arbeiten. Es richtet sich an Lernwillige, die bereit sind, sich mit einer faszinierenden Materie auseinander zu setzen, die aber immer wieder neue Fragen haben.

(Quellenangabe: „selfhtml“)


Cascading Style Sheets (CSS)

CSS 4 you – die deutsche Seite für Cascading Stylesheets (CSS)

Dies ist eine nahezu komplette CSS-Referenz auf deutsch – ergänzt durch etliche Tipps, Tricks und andere Referenzen.

Für Anfänger ist zunächst der CSS-Workshop empfehlenswert.
Dort werden die Grundlagen Schritt für Schritt dargestellt.

(Quellenangabe: „css4you“)

Nützliche Programme

Im Juli 2007 lief im Österreichischen Fernsehen die amerikanische Serie „Little Boxes“. Ich wollte im Internet einige Informationen über diese Serie einholen und bin dabei rein zufällig über die folgende Publikation gestoßen:

Little Boxes – Band 1 von Dozent Peter Müller aus Deutschland

Ich war von diesem Buch von Beginn an begeistert, weil es in sehr verständlicher Form und nicht ohne Ironie einem Anfänger wie mir die Welt von HTML und CSS nähergebracht hat. Ich lernte die wichtigsten HTML-Elemente kennen und auch die Grundlagen von CSS waren für mich eigentlich kein großes Problem.

Mein Lieblingseditor:

HTML Editor Phase 5.50

HTML Editor Phase 5 sorgt für einen ansprechenden Internetauftritt. Die Freeware bietet integrierte Zusatzanwendungen sowie zahlreiche Helfer und erleichert so das Programmieren mit HTML.
HTML Editor Phase 5 gehört zu den Top-Freeware-Programmen. Der Editor erleichtert die Programmierarbeit erheblich, funktioniert reibungslos und muss den Vergleich mit entsprechenden Kaufprogrammen nicht zu scheuen.

Der Ausgangspunkt für jeden Webauftritt ist im HTML-Editor das sogenannte Projekt. Darin programmiert man nicht nur jede Seite einzeln, sondern legt auch die gesamte Struktur der Website an. HTML-Tags, Java-Scripts und andere Elemente sind dabei farblich hervorgehoben. So behält man den Überblick über die Struktur des HTML-Codes und über den gesamten Webauftritt. Ein integrierter Bildbetrachter, die direkte Ansicht der programmierten HTML-Seiten innerhalb des Programms und zahlreiche automatisierte Abläufe runden den Editor ab.

Fazit:

Weitere nützliche Programme:

Browser:

CSS-Editor:

TopStyle wurde von Nick Bradbury, der durch den HTML-Editor Homesite bekannt wurde, entwickelt. TopStyle bietet neben Syntax-Highlighting und Code-Vervollständigung die Möglichkeit der Einbindung in eine große Palette von Web-Editoren. Sowohl HTML-Tidy als auch CSS-Tidy stehen zur Verfügung.

Posted in XHTML | Verschlagwortet mit: , , , , , , , , , , , , | Leave a Comment »