in Weblica kann man Websites ganz einfach mit CSS, HTML und Javascript erweitern und individualisieren
In der Rubrik Tests werden verschiedene Codeschnipsel getestet.

Wie Codeschnipsel eingebaut werden, steht in Vorgehen beim Einbau.

Notationskonvention

Code ist in in Lucida Console schwarz oder in Courier schwarz notiert, anpassungs­bedürftige Teile sind farbig.

Die Namen von Weblica- und Ressourcen­feldern beginnen mit dem $-Zeichen. Dieses ist hier so hervorgehoben: $. Beim Ver­wenden von Code müssen die Ressourcenfelder ersetzt werden.

W3C-Konformität

Unser Code ist standardkonform:
XHTML 1.0 transitional ist valide - zur Prüfung bitte klicken

Seite erstellt / geändert

e 12.12.11  /  update
Tipp:
Eine vollständige Liste aller Codeschnipsel findet sich im Codeschnipsel Inhaltsverzeichnis.

Codeschnipsel 01: Zeichen und Symbole


HTML-Code für Zeichen, Symbole und Textaufbereitung. Grafiken als Listenaufzählungszeichen.

Zeichen und Symbole

Leerzeichen geschützt

 

Eingabe im Text und im HTML-Code auch mit Alt + 255.


zurück   |   nach oben

Zeilenumbruch

<br />


zurück   |   nach oben

Trennstrich bedingt - bedingter Zeilenumbruch

&shy;

Der bedingte Trennstrich wird auch als bedingtes oder weiches Trennzeichen bezeichnet.
&shy; bewirkt einen Zeilenumbruch und fügt ein Trennzeichen ein.

Soll ein Wort oder eine lange Zeichenkette umgebrochen werden, ohne dass ein Trennstrich eingefügt wird, so bedient man sich des wbr-Elements <wbr> (erst ab HTML5 valide).


zurück   |   nach oben

Trennstrich  |  vertikal

  |  

HTML-Code: &#124;
Eingabe mit Alt + 124.


zurück   |   nach oben

Geviertstrich —

  —  

HTML-Zeichen: &mdash;
XHTML: &#8212;
Eingabe mit Alt + 0151


zurück   |   nach oben

Punkt klein (für alles mögliche)

 •  

HTML-Zeichen: &bull;
Eingabe mit Alt + 0149


zurück   |   nach oben

Pfeile nach rechts → und ⇒

&rarr; und &rArr;

Beispiele:  →    und   ⇒  (besser)
mehr zu den HTML-Zeichen bei SELFHTML, siehe Links ganz unten


zurück   |   nach oben

 

Listenaufzählungszeichen

Listenaufzählungszeichen disc (ganze Webseite)

.textParagraph ul { list-style-type: disc; }


zurück   |   nach oben

Listenaufzählungszeichen disc nur für einen bestimmten Absatz

<style type="text/css">
#pa471 ul { list-style-type: disc; }
</style>


Absatznummer (= Nummer des Paragraphs) anpassen


zurück   |   nach oben

Weitere Listentypen (Aufzählungszeichen, Listenzeichen)

Listenzeichen für ungeordnete Listen ul, z. B. #pa471 ul {....}:
list-style-type:disc = gefüllter Kreis
list-style-type:circle = leerer Kreis
list-style-type:square = gefülltes Quadrat, Weblica-Standard
list-style-type:none = kein Aufzählungszeichen
Beispiele: Aufzählungszeichen Varianten

Für geordnete (nummerierte) Listen ol, z. B. #pa471 ol {....}:
list-style-type:decimal =  1., 2., 3., 4. usw.
list-style-type:decimal-leading-zero = mit führender Null 01., 02., 03., usw.
list-style-type:lower-roman =  i., ii., iii., iv. usw.
list-style-type:upper-roman =  I., II., III., IV. usw.
list-style-type:lower-alpha =  a., b., c., d. usw.
list-style-type:lower-latin = a., b., c., d. usw.
list-style-type:upper-alpha =  A., B., C., D. usw.
list-style-type:upper-latin = A., B., C., D. usw.
list-style-type:lower-greek = griechische Buchstaben α., β., γ., δ. usw.

Mehr zum Thema Aufzählungslisten im W3C Wiki: Styling lists and links (sehr lesenswert).


zurück   |   nach oben

Listenaufzählungszeichen Grafik / Bild (Bullet / Kugel in MCA-Blau)

Grafik bzw. Bild als Aufzählungszeichen:

<style type="text/css">
.textParagraph ul {
  list-style-type: none;
  list-style-image: url("$(res.383.Bullet_Blue_14_png.path)");
}
</style>


Bildpfad anpassen
Anwendungsbeispiel: Startseite


zurück   |   nach oben

 

Weitere HTML-Codes, ASCII-Codes und Unicodes für Sonderzeichen


reservierte HTML-Zeichen:
Anführungszeichen
&quot;
Ampersand
&amp;
kleiner / spitze Klammer links
&lt;
grösser / spitze Klammer rechts &gt;
 
verschiedene Sonderzeichen:
Copyright-Zeichen © &copy;
Registered-Trademark-Zeichen ® &reg;
frz. Anführungszeichen links « &laquo;
frz. Anführungszeichen rechts » &raquo;
kleines Pünktchen  · &middot;
in Ordnung √ &#8730;
Dreieck nach oben ▲ U+25B2;
Dreieck nach rechts ► U+25B6;
Dreieck nach unten ▼ U+25BC;
Dreieck nach links ◄ U+25C0;
dicker Pfeil nach rechts ➡ U+27A1;

Sonderzeichen-Eingabe ASCII-Code mit ALT:
Alt 54   ♫  musikalisch
Alt 124  |  das trennt was
Alt 126  ~  so ungefähr
Alt 128  Ç  Cedille gross
Alt 155  ø  eher durchschnittlich
Alt 157  Ø  noch durchschnittlicher
Alt 167  º  Grad
Alt 169  ® wurde registriert
Alt 170  ¬  not
Alt 171  ½  ein Halbes
Alt 174  «  wird links angeführt
Alt 175  »  wird rechts abgeführt
Alt 179  │  das trennt auch was
Alt 184  ©  Plagiat verboten
Alt 189  ¢  begrenzter Wert
Alt 225  ß  das haben wir abgeschafft, aber die Germanen noch nicht
Alt 230  µ  so klein
Alt 241  ±  mehr oder weniger
Alt 248  °  Grad
Alt 250  ·  Pünktli
Alt 255     fester Leerschritt (den sieht man nicht)

Mehr dazu hier:
SelfHMTL - HTML-Zeichenreferenz
SelfHTML - Sonderzeichen und HTML-eigene Zeichen
Sonderzeichenreferenz - Wikipedia
Eine sehr gute Übersicht findet sich auch hier:
Zeichentabelle - Sonderzeichen, Tastenkürzel, Hex-Codes usw.
vollständige Liste der Unicode-Zeichen:
List of Unicode characters


zurück   |   nach oben

 

Kennzeichnung Kommentare in CSS, HTML und Javascript

Kommentare (Kommentarzeilen) werden wie folgt gekennzeichnet:

in CSS

/* Kommentar */

in HTML

<!-- Kommentar -->

in Javascript

// Kommentar


zurück   |   nach oben