Archive for the ‘Komponenten’ Category

Bilder als Link

Posted on by herr_seeliger • Comments disabled

Das Bild als Kind-Element von #a wird zur Link-Quelle. Es kann mit CSS gestaltet werden.

Inhalt verlinken

Posted on by herr_seeliger • Comments disabled

Mit dem Anker-Tag #a können Verlinkungen auf andere Inhalte gesetzt werden. Link-Quelle kann Text, ein Bild oder auch andere Elemente sein. Ein Link hat vier Zustände und diese werden über die Pseudo-Klassen #:link, #:visited, #:hover und #:active angesprochen werden.

Head

Posted on by herr_seeliger • Comments disabled

In der Box #head werden Angaben über die Webseite gesammelt. Häufig genutzte Elemente sind: #title, #meta und #link. #head wird im Gegensatz zu #body im Browser nicht angezeigt, seine Informationen jedoch verarbeitet. #head könnte jedoch mit der Eigenschaft #display #block sichtbar gemacht werden. Was allerdings keinen großen Sinn macht.

Hintergrund-Bilder einpassen

Posted on by minasecic • Comments disabled

Text und andere Inhalte können auf Hintergrundbildern liegen. Wir können mit ergänzenden Eigenschaften Größe und Position sowie andere Aspekte beeinflussen.

Typographie mit CSS

Posted on by herr_seeliger • Comments disabled

Schrift kann in allen wesentlichen Merkmalen gestaltet werden. Das Leseverhalten am Bildschirm ist etwas anders, aber wer Erfahrungswerte aus dem Print mitbringt findet zu allem ein Gegenstueck im CSS.

Boxen und ihre Bedeutung

Posted on by herr_seeliger • Comments disabled

Es gibt im HTML eine Auswahl von Boxen mit denen eine Webseite aufgebaut werden kann. Ihnen wird jeweils eine bestimmte Bedeutung (Semantik) zugeschrieben und dieses allgemeine semantische Konzept sollte bei der Auswahl berücksichtig werden.

Hintergrundbild mit Fokuspunkt

Posted on by DesiDeclaro • Comments disabled

Das Motiv der Hintergrundbilder hat in der Regel einen individuellen Schwerpunkt. Setzt man die Prozentwerte von #BACKGROUND-POSITION auf den individuellen Fokuspunkt, ist dieser auch bei extremen Verhältnissen sichtbar. Die Prozentwerte von dem individuellen Fokuspunkt kann man leicht mit z. B. Adobe Photoshop ermitteln.

number & range

Posted on by Sklave1 • Comments disabled

Number bestimmte die Eingabe von Zahlen. Bei Range erfolgt Eingabe mit einem Slider. Dies ist bei mobilen Geräten oft praktisch.

fieldset und legend

Posted on by GruftieSklave • Comments disabled

Größere Gruppen von Eingabemöglichkeit können mit <fieldset> zusammengefasst werden. Das <fieldset> wird mit <legend> beschriftet.

select mit option

Posted on by Sklave1 • Comments disabled

Innerhalb des <select> werden die Auswahlmöglichkeiten mit <option> getaggt. Mehrere <option> können mit <optgroup> markiert werden. Das Attribut value kann bestimmt die tatsächliche Information die übertragen wird.

radio und checkbox

Posted on by GruftieSklave • Comments disabled

<input> mit type=radio erlauben nur eine Auswahl. Checkboxen können in beliebiger Form selektiert werden.

Hintergrundbild

Posted on by jessicaG • Comments disabled

Text und andere Inhalte können auf Hintergrundbildern liegen. Wir können mit ergänzenden Eigenschaften Größe und Position sowie andere Aspekte von diesem Hintergrundbild beeinflussen.

box-shadow

Posted on by Juliane • Comments disabled

#box-shadow kann den meisten Elementen zugewiesen werden, da diese Boxen sind.

Retro-Look mit Google Webfonts

Posted on by a.mc_cuiston • Comments disabled

Der Webdienst „Fonts“ von Google bietet die Möglichkeit relativ leicht Schriften auf der eigenen Webseite einzubinden. https://fonts.google.com/

CSS für den Druck

Posted on by Juliane • Comments disabled

Wenn Webseiten ausgedruckt werden gelten andere Anforderungen. Koordinatensystem ist dann ein Papier. Absolute Maßeinheiten wie CM, MM und bei Schriftgrößen PT sind darauf abgestimmt. Dunkle Hintergrundflächen vielleicht in Weiß umwandeln um Farbe zu sparen und es kann auch Hilfreich sein Links als Ergänzung noch einmal in voller URL ausführen. Dies kann mit einem für PRINT […]

Semantik bei Schrift

Posted on by Lukas Schupp • Comments disabled

Allen schriftbezogenen Elementen wird jeweils eine bestimmte Bedeutung, d.h. Semantik, zugeschrieben und dieses allgemeine semantische Konzept soll bei der Auswahl der Elemente berücksichtig werden. Diese Elemente für Text sind ebenfalls Rechtecke. Die meisten sind per CSS-Standard #display: #BLOCK. Sie erzwingen eine neue Zeile und nehmen erst einmal 100% der Breite ein und sind so hoch […]

Video

Posted on by Seblu • Comments disabled

#Video bringt eine ganze Reihe praktischer Attribute, z.B. #autostart oder #loop. Die Video-Dateien werden mit #source eingebunden. Das MPEG4 Format auf Basis des H.264 Standard ist mittlerweile generell in den Browsern unterstützt.

Farben und Verläufe zuweisen

Posted on by a.mc_cuiston • Comments disabled

Die Farbe der Fläche einer Box kann über #background-color oder #background bestimmt werden. Es gibt mehrere Möglichkeiten für die Bestimmung von Farbwerte. Verläufe können nur über #background zugewiesen werden. Die Webseite ccsmatic stellt ein schönes Tool für das Erstellen von Verläufen zur Verfügung. https://www.cssmatic.com/gradient-generator

Arnold-Bode-Schule
Berufliche Schule der Stadt Kassel
Kontakt | Impressum | Datenschutz