Webdesign 2

Platzhalter für den Text, den ich zusammen fassen muss. Texte – büah.

So, die ersten zwei Artikel von vier.

http://dev.opera.com/articles/view/20-html-forms-the-basics/

HTML-Formulare ­– Die Basics

Jeder kennt ja Formulare und hat welche benutzt. Die Felder, wo man selbst etwas reinschrieben und auch abschicken kann, oder auch die Felder, wo man runde (radio button) und eckige (check boxes) Boxen anklicken kann und an die Webseite (irgendwas passiert im backend der Seite) . Die werden halt ganz oft benutzt: Namen eingeben für Login-screens, Satusnachrichten schrieben, twittern, etc.

Es ist relativ einfach ein Formular zu erstellen, aber nicht so einfach, ein Formular, das den Webstandards entspricht, zu erstellen. Nur das ist der Weg, gut voran zu kommen und Webseiten zu erstellen, die „länger haltbar“ sind.

Also mal das einfachste Formular, drei Felder, Name, E-Mail und Kommentar. Plus der „submit“-Button, versteht sich von selbst.
<form>

Name: <input type="text" name="name" id="name" value="" />

Email: <input type="text" name="email" id="email" value="" />

Comments: <textarea name="comments" id="comments" cols="25" rows="3"></textarea>

<input type="submit" value="submit" />

</form>

<form></form> braucht man dazu, um dem Browser zu sagen, dass es sich um ein Formular handelt.
<ínput> hier kann man definieren, was so rein kommt. Alle <input> tags brauchen einen Namen, der zeigt, was in das Feld eingetragen werden soll.
Und dann <textarea>. Super gut. Keine eine Zeile, sondern ein ganzer Block, in dem man etwas schreiben kann. Mit colums und rows kann man die Größe der textarea definieren.
Und als letztes noch ein <input> tag, mit value=submit. Das bewirkt einen „submit“-Button, damit der Benutzer seine Angaben und sein Kommentar auch abschicken kann.
Es besteht auch die Möglichkeit, dieses <form> tag zu stylen, mit <ol>, <il>, usw. um mehr Struktur zu bekommen.

Das schwierige, was dann jetzt eigentlich noch kommt, ist, das ganze auch zu erhalten, wenn der Benutzer seine informationen abschickt. Dazu braucht man aber andere Geschütze und müsste sich mit php und so auskennen.
In Zeiten von Wordpress und dessen unzähligen Plug-ins geht sowieso alles ziemlich einfach.

 

http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/

CSS layout model ­– boxes, bordewrs, margins und paddings

In diesem Artikel geht es darum, wie man HTML-Elemente „manipulieren“ kann, verändern und verschönern mit Hilfe von Rändern (border), Außenabstände (margins) und vielem mehr.
Man kann die Anordnung der verschiedenen Elemente beeinflussen, die größen sozusagen ändern und mit Weißraum (laut dem Verfasser ein wichtiges Mittel, laut mir eigentlich auch, einfach auf einen guten Weißraum achten und es sieht gut aus – die meisten Blogs funktionieren nach dem System).
Weißraum um ein Objekt erreicht man mit margin:
Diese Ränder kann man einzeln anwählen oder auch alle zusammen. Die Werte werden in px oder em angegeben, für print-stylesheets auch in cm. Auch % ist erlaubt, nur muss man damit vorsichtig umgehen – nicht, dass es am Ende die Seite zerreist, weil sich manche Angaben auf der Eltern-Element beziehen und nicht auf die ganze Seite.

Auto-margins:
#idirgendwas {
margin: 50px auto;
}
Das div mit der id idirgendwas steht dann in der Mitte des Browserfensters mit oben und unten einem Abstand von jeweils 50px. Der erste Wert gibt nämlich oben und unten an, der zweite rechts und links. Also kurz im CSS unter html {} geschrieben, schon ist die Seite zentriert.
Auch lassen sich die Werte negativ (negative margins) angeben, um so zwei verschiedene Elemte zu überlagern, alles kein Problem, Minus (-) davor und fertig. Es lebe das digitale Zeitalter.

Collapsing margins (Übersetzung braucht es nicht, weiß ich nicht):

Die Werte lassen sich für jeden Rand natürlich auch einzeln angeben:
#idirgendwas {
margin: 5px 10px 20px 0px;
}
So hat das div idirgendwas von oben einen Abstand von 5px, rechts 10px, unten 20px und links 0px. Das ganze geht im Uhrzeigersinn und fängt oben an, ist bei padding genauso – einmal gemerkt, alles passt.
Wenn das einem zu blöd ist, man nur einen Rand ansprechen möchte, geht das auch über margin-right, margin-left, margin-top und margin bottom.

Border

Es gibt verschiedene Arten, border anzusprechen:
* border-width

* border-style

* border-color

* border-top

* border-top-width

* border-top-style

* border-top-color

* border-right

* border-right-width

* border-right-style

* border-right-color

* border-bottom

* border-bottom-width

* border-bottom-style

* border-bottom-color

* border-left

* border-left-width

* border-left-style

* border-left-color

Sieht viel aus, oder? Ja.

Ich selbst habe das bis jetzt in einem Aufwasch erledigt, nämlich mit:
#idirgendwas {
border: 2px solid #000000;
}
So hat der Rand eine 2px Große, durchlaufende Linie in Schwarz. Man kann das „solid“ auch erstzen durch double, dotted, dashed usw., einfach mal im dazugehörigen Artikel nachschauen, da gibt es Beispiele.

Wenn margins nicht mehr ausreichen: padding
padding ist der Innenabstand vom Rand zum Text. Wenn man eine farbige Fläche hat und Text reinsetzt, hängt der Text an den Rändern, das sieht unschön aus. Will man den Text vom Rand weg bekommen, muss man padding benutzen. Das läuft genauso wie mit margin was die Eingabe von den Werten betrifft.

Width und height:

Man kann zum einen die Breite (width) und Höhe (height) eines Elements definieren, sei es mit Pixelangaben oder Prozenten oder mit em oder mit was es auch immer gibt. Aber Vorsicht: Immer bedenken, dass das nicht die einzigen Kriterien für das Aussehen der Elemente sind, sondern dass auch margins und paddings dabei eine wichtige Rolle spielen.
Was schön ist, ist unter anderem max-width, min-width, max-height und min-height. Wenn ich meine Seite zentriert habe, kann ich z.B. mit max-width angeben, dass sie 690px breit sein soll – maximal. Und schon sitzt die Seite zentriert und in der richtigen Größe im Browserfenster. Wenn man das Fenster aber kleiner ziehen sollte (oder die Auflösung die gewünschte Breite nicht hergibt) kann man mit min-widht arbeiten und ihm zu verstehen geben: Bis hier her und nicht weiter mein Freund! Irgendwann muss mit dem kleiner ziehen der Seite ja auch Schluss sein, nicht wahr?

Was passiert, wenn der Inhalt der Seite aber über dem ihm zur Verfügung stehenden Größe heraus will? Overflow natürlich!

Was es da so gibt: overflow: hidden, visible, auto und scroll. Auch eine ganz normale CSS-Anweisung.
hidden: Der überstehende Text wird nicht angezeigt.
visible: Der überstehende Text wird angezeigt, kann einem aber das Layout zerstören.
auto: Der überstehnde Text erzeugt eien seitliche Scrollbar.
scroll: Erstellt eine horizontale und vertikale Scrollbar, auch wenn der Text nicht über die Größe des Elements geht.