Webdesign und Programmierung Kompakt
Dies ist eine kompakte Dokumentation über die wichtigsten webbasierten Sprachen. Es werden die Auszeichnungssprachen HTML, CSS, MathML und SVG behandelt. Danach steht die Programmierung mit JavaScript und PHP an. Es wird MySQL zum erstellen von Datenbanken über PHP behandelt. Zum Schluss werden nützliche mathematische Formeln und Funktionen aufgelistet.
HTML
HTML ist eine sogenannte Auszeichnungssprache und dient dem Strukturieren von Webseiten. Eine Webseite kann Text, Bilder, Audio, Videos und aufwendige Animationen aller Art enthalten. Das Aussehen, also z.B. der Hintergrund der Webseite, die Schriftfarbe oder sonstiges, erfolgt mit Sprache CSS, die danach besprochen wird. Was Struktur bedeutet wird klarer, wenn man diesen Abschnitt durchgestigen ist.
Grundlagen
<tag attribut='wert'>Inhalt zwischen Tags.</tag>Zwei praktische Beispiel:
<b style='color:#00f'>Hier steht ein blauer Text.</b>
<img src='bild.png'>tag - Die Strukturierung in HTML erfolgt mit songenannten Tags. Dies ist englisch und beudeutet im deutschen so viel wie Etiketten (wie z.B. Preis-Etiketten im Supermarkt). Die meisten Tags bestehen aus einem Anfangs- und einem Endtag, der mit / gekennzeichnet ist. Es gibt aber auch Tags ohne einen Endtag, dass ist z.B. der Fall, wenn ein Foto oder eine Musikdatei auf einer Webseite eingebunden werden soll. Ein Endtag ist hier dann nicht wirklich notwendig.
atributt - Tags können zusätzlich Eigenschaften, sogenannte Atrribute enthalten. Je nach zweck gibt recht viele unterschieliche Attribute.
wert - Attribute enthalten wiederrum Werte, die in einfachen (') oder doppelten Anführungszeichen (") geschrieben werden können (es aber nicht unbedingt müssen). In den Beispielen werden immer die einfachen verwendet. Anführungszeichen müssen aber auf jeden Fall gesetzt werden, wenn der Wert > und/oder Leerzeichen enthält. Kommen " darin vor, so sollte der Wert in ' gesetzt werden. Kommen aber ' darin vor, so sollten wiederrum " eingesetzt werden.
Tag, Attribute und Werte müssen durchgehend klein geschrieben werden.
Er enthält Absätze und doppelte Leerzeichen.
Text - Einfacher Text ohne Struktur wird auch im Browser ohne Struktur und Formatierung angezeigt. Doppelte Leerzeichen, Tabulatoren und Absätze werden aber zu einem einzigen Leerzeichen zusammengefasst. Die Strukturierung im Editor ist von Vorteil, wenn der Code der Webseite gut lesbar sein und auch später schnell verändert werden können soll.
<!-- Hier steht eine Notiz, die nützliche Infos enthalten kann und auf der Webseite nicht angezeigt wird. --> Hier steht ein Text nach einer Notiz.Notizen - Notizen können ganz nützlich sein um Informationen in einer Webseite hinzuzufügen, die auf der Webseite selber nicht mehr zu sehen sind. Zudem lässt sich mit ihnen Code-Abschnitte ausblenden, indem der Code sich zwischen <!-- und --> befindet. Auf der Webseite selber sind Notizen dann nicht mehr zu sehen.
http://www.beispiel.de/ordner1/ordner2/datei.htmDas Protokoll:
http://Die Domäne:
www.beispiel.de/Das Verzeichnis
ordner1/ordner2/Der Dateiname:
datei.htmStatische URL's - Eine Webseite oder andere Datein haben eine eindeutige Adresse, die sich URL () nennt.
Protokoll - Das Standartprotokoll ist http. Für sichere Webseiten gibt es https, für den Datenaustausch ftp und für E-Mail pop und imap.
Domäne - .
Verzeichnis - .
Dateiname - .
music.wavDatei befindet sich in einem weiterem Unterordner:
ordner/music.wavDatei befindet sich im Überordner der Webseite:
../music.wavDatei befindet sich im zweiten Überordner:
../../music.wavDatei befindet sich in einem Ordner im Überordner:
../ordner/music.wavRelative URL's - Internet-Adressen sollten nach Möglichkeit immer relativ sein. So kann z.B. eine Webseite auf einem Computer viel besser bearbeitet werden oder es kann ein Domänwechsel erfolgen, ohne sämmtliche URL's auf jeder Webseite ändern zu müssen. Hier die Regeln für relative URL's:
Befindet sich eine Datei im gleichen Ordner wie die Webseite, auf der die Datei eingebunden werden soll, so genügt nur der Dateiname der einzubindenden Datei (Im Beispiel: music.wav).
Befindet sich die einzubindende Datei in einem weiterem Unterorder, so wird zusätzlich der Ordner angegeben (Im Beispiel: ordner/music.wav).
Wenn sich eine Datei über einem Ordner befindet, folgt in der Pfadangabe ... Dadurch kann eine Datei aufgerufen werden, wärend sich die Webseite selber in einem Unterordner befindet (Im Beispiel: ../music.wav). Die restlichen Beispiele sind somit selbsterklärend.
Aufbau und Kopf
Eine HTML konforme Webseite besteht immer aus einem minimalem Grundgerüst, der immer identisch aussieht. Daneben sind im Kopfbereich Informationen enthalten. Einige Standartinformationen sind wichtig. Es gibt daneben auch noch ein paar andere.
<!doctype html>
<html><head><meta charset='utf-8'>
<title>Aufbau einer HTML-Webseite</title></head>
<body><h2>Aufbau einer HTML-Webseite</h2>
<p>Hier steht Text.</p></body></html><!doctype> - Das allererste was eine Webseite benötigt, ist ein Doctype. Damit wird angegeben, was für eine Auszeichnungshtml. Danach wird die Webseite mit <html> eingeleitet und auch wieder geschlossen. Der Kopf enthält Informationen über eine Webseite. Dargestellt wird dieser Bereich durch <head>. Danach folgt der Körper mit <body>. Er enthält das, was auch später im Browser zu sehen ist, also die Webseite selbst.
<meta charset='utf-8'>Zeichenkodierung - Die Zeichenkodierung einer Webseite ist sehr wichtig. Mit ihr wird angegeben, welche Kodierung beim Speichern einer HTML-Datei verwendet wurde, damit der Browser die Buchstaben und Zeichen richtig anzeigen kann. Standart ist hier der Wert utf-8. Für Japanische Seiten ist utf-16 besser. Wichtig ist natürlich auch, dass die Datei auch wirklich als UTF-8 bzw. UTF-16 gespeichert wurde. Beim Speichern kann man nämlich die Kodierung festlegen, was man aber schnell übersieht und vergisst.
<title>Das ist eine Beispielwebseite</title><title> - Der Titel einer Webseite wird oben in der Browserleiste angezeigt (da wo auch der Knopf zum schliessen des Fensters ist). Attribute hat dieser Tag keine.
<meta name='author' content='Zarey Weiss'>
<meta name='description' content='Ein kleiner Beschreibungstext, warüber es auf der Webseite geht.'>
<meta http-equiv='refresh' content='0; url=index.htm'>
<meta http-equiv='cache-control' content='cache'><meta> - Eine Webseite kann (muss aber nicht) zusätzlich Metaangaben enthalten. Das sind so Angaben wie Author, Beschreibung und sonstige Einstellungen. Sie alle fangen mit diesem Tag. Das erste Attribut ist entweder name oder http-equiv; das hängt davon ab, um was für eine Aktion es sich handelt. Der zweite Attribut ist immer content. Hier wird der Authorenname, Beschreibungtext oder sonstiges eingetragen.
name='author' - Name des Author, der die Webseite erstellt hat. Als Wert für content wird der Name des Author eingetragen.
name='description' - Kleiner Beschreibungtext der kurz angibt, worüber die Webseite handelt. Als Wert für content wird dann ein kleiner Beschreibungstext aufgeführt. Beschreibungtexte sind hauptsächlich für Suchmaschinen gedacht.
name='robots' - Dies steuert das Verhalten von Suchmaschinen. content kann hier einer von den sechs folgenden Werten erhalten. index sorgt dafür, dass nur die Seite mit dieser Angabe in den Suchindex aufgenommen werden soll. follow gibt dem Suchroboter an, die Seite mit dieser Angabe sowie alle verlinkten Seiten in den Index aufzunehmen. Einfacher ist dagegen all, welches angibt, die ganze Webseite, also Startseite und alle Unterseiten, ins Suchverzeichnis aufzunehmen. Auf den Unterseiten ist also keine weitere Angabe mehr daürber erforderlich. Dagegen unterbindet nofollow das verfolgen von Links und befehlt, nur die aktuelle Seite aufzunehmen. Soll die Seite überhaupt nicht aufgenommen werden, kann noindex eingesetzt werden. Damit eine Webseite nicht archiviert wird, gibt es noarchive, was bei Webseiten, die sich ständig ändern, von Vorteil ist. Das Kombinieren mehrerer Angaben auf einer Seite ist möglich.
name='' - . content.
http-equiv='refresh' - Dies sorgt dafür, dass eine neue Seite nach einer bestimmten Zeit geladen wird. content enthält hier zwei Werte durch ein Komma getrennt. Der erste gibt die Zeit in Sekunden an (in diesem Beispiel 0), nach der die angegebene Seite, die den zweiten Wert darstellt. geladen werden soll. Wenn die URL der aktuellen Seite angegeben ist, so ruft die Seite sich selbst auf (refresh sozusagen). Was URL sind wird im Kapitel „Mediale Einbindung“ erklärt.
http-equiv='cache-contral' - Im Browsercache können Webseiten zwischengespeichert werden oder auch nicht. content kann hier die zwei Werte cache oder no-chache annehmen. Bei cache werden die Webseiten im Browsercache zwischengespeichert, um sie später wieder schnell aufzurufen; Empfehlens für Seiten, die sich kaum oder gar nicht ändern. Bei no-cache erfolgt keine Zwischenspeicherung, sondern die Webseiten werden immer vom Server aufgerufen. Eher für Webseiten empfehlenewert, die ihren Inhalt ständig aktuellisieren.
<link> - .
Seitenstruktur
Eine Webseite sollte ordentlich strukturiert sein. Es gibt dafür viele HTML-Elemente. Anfangs mag es zwar etwas unklar erscheinen, warum eine so relativ aufwendige Struktur erforderlich ist, aber wenn man erst man ein paar Webseiten erstellt hat, wird man sich daran schnell gewöhnen. Eine saubere Struktur hat jedensfalls viele Vorteile.
<nav><li>Hauptmenü
<li><a>Hauptseite</a>
<li><a>Shop</a>
</ul>
<li><a>Schinken Pizza</a>
<li><a>Käse Pizze</a>
</ul>
</nav><nav - Eine vorstendige Webseite sollte über eine Navigation verfügen. Sie sollte an erster Stelle Platziert werden, also direkt nach dem einleitenden <body>-Tag. Es ist später überhaupt kein Problem, die Navigation über CSS an jeder anderen beliebigen Stelle zu verschieben. Innerhalb der navigations-Tags können im Prinzip alle Elemente platziert werden. Am besten sind aber Listen und Anker-Elemente (die Tags werden noch erklärt werden).
<article> - .
<header> - .
<h1> - .
<section> - .
<p> - .
<blockquote> - cite.
<address> - .
<pre> - .
<div> - .
Textstruktur
Inline-Tags dienen der Strukturierung von Text. Sie fügen dem Text zwar eine optische Formatierung hinzu, aber ihr Sinn ist ein ganz anderer. Es gibt z.B. Programme, die den Text im Browser vorlesen können. Wenn da eine Textstelle vorkommt, die mit ein entsprechendes Tag gekennzeichnet ist, dann kann der vorzulesende Sprecher die Stelle besonders betonen. Ein weiteres Beispiel sind Suchmaschinen. Sie lesen die Webseite ein und beachten die Tags. Es ist ein Unterschied, ob ein Buchstabe einer Formel gekennzeichnet ist oder nicht.
Link öffnet im neuen Fenster oder Tab
Link innerhalb einer Seite
Ein Beispiel
Hier steht ein Beispieltext.
<a href='index.htm'>Link öffnet im selben Fenster</a>
<br><a target='_blank' href='index.htm'>Link öffnet im neuen Fenster oder Tab</a>
<br><a href='#Beispiel'>Link innerhalb einer Seite</a>
<h1 id='Beispiel'>Ein Beispiel</h1>
<p>Hier steht ein Beispieltext.</p><a> - Dieser Tag steht für anchor und heisst im deutschen Anker (wie ein Anker aus der Schifffahrt). Damit lässt sich innerhalb auf einer Seite oder zu einer anderen Seite verweisen. Das Attribut und der Wert target='_blank' sorgen dafür, dass sich ein neues Fenster (oder Tab) öffnet. Sie kann weggelassen werden, dann erfolgt der Verweis im gleichen Fenster.
Eine <i>Variable</i> ist ein Bestandteil einer Programmiersprache.<i> - Hiermit werden Fremdwörter oder Wörter oder Satzteile in Fremdsprache gekennzeichnet.
<b>Dies ist ein wichtiger Hinweis.</b><b> - Dies dient dazu, wichtige Textabschnitte zu markieren.
Genau <em>so</em> muss es gehen.<em> - Dies führt zu einer Betonung auf einer Wort oder Satz, welches dann der Schwerpunkt des ganzen ist.
Wanderweg auf steinigem Untergrund. <strong>Betreten auf eigener Gefahr.</strong><strong> - Dies führt zu einer starken Betonung, die auf eine Gefahr oder ähnlichem hinweisen soll z.B. auf Warnschildern.
<u> - .
„dass“ nach einem Komma schreibt sich mit „ss“, wenn es sich auf nichts bezieht und nicht wie „<s>das</s>“.<s> - Ein Wort oder eine Textstelle kann als falsch makiert werden. Dadurch wird klar, dass das Wort oder die jeweilige Handlung falsch sind.
Um <var>C</var> zu berechnen, müssen <var>A</var> und <var>B</var> quadriert, addiert und Wurzel gezogennen werden.<var> - Variablen finden sich in der Mathematik. Sie können für jede Zahl stehen. Im Text sollten sie gekennzeichnet sein.
<code> - .
Preis: 500€ <strong>zzgl. Versandkosten</code><small> - Dies dient für Kommentare oder kleineren Informationen in Webseiten.
<sub> - .
<sup> - .
Das Buch von Zarey heisst <cite>Das Unfassbare</cite>. Er schreibt zudem an einem Album, dass sich <cite>Das Unfassbare des Unfassbaren</cite> nennen soll.<cite> - Buch-, Musik-, Film- oder sonstige Titel werden damit markiert. Mit diesem Tag sind Werke zu markieren aber keine Namen von Personen oder Zitate derjenigen.
Es ist <time>9.00</time> Uhr.<time> - Zeitangaben wie Uhrzeit sollten hiermit gekennzeichnet sein, dadurch wird eine Verwechslung mit einer normalen Zahl vermieden.
das geht nicht weil es gehtund das ist auch richtig so.
Du sagt <q>das geht nicht weil es geht</q> und das ist auch richtig so.<q> - .
<mark> - .
0201 / 336699
45145 Essen
Ytostr. 2<br>0201 / 336699<br><br>45145 Essen<br> - Dieser Tag fügt einen Zeilenumbruch hinzu. Er kann auch mehrere mal hintereinander erfolgen. Einen Endtag gibt es hier nicht.
Der nächste Test sind Hoch<wbr>geschwindigkeits<wbr>mehrfach<wbr>kurven.<wbr> - Wenn ein Wort sehr lang ist, sieht es möglicherweise etwas komisch aus, wenn das Fenster verkleinert wird. Hierfür gibt es eine Lösung. An Stellen, wo der Tag zum Einsatz kommt, wird das Wort an dieser Stelle umgebrochen, wenn das Fenster nun verkleinert wird. Einen Endtag gibt es auch hier nicht.
<nobr>Dieser Text hält auch dann zusammen, wenn das Borwserfenster verkleinert wird.</nobr><nobr> - Ganz anders verhält sich dieser Tag. Er hält ein Satz stabil zusammen, auch wenn das Fenster verkleinert wird. Der Endtag ist hier dann wieder erforderlich.
Ordnungsstrukturen
Mediale Einbindung
Damit eine Webseite nicht nur aus Text besteht, lassen sich mediale Inhalte wie Bilder, Audio, Video und andere Sachen einbinden.
<img src='beispiel.png'><img> - Damit werden Bilder eingebunden. Ausser src gibt es hier keine weiteren Attribute.
<audio src='beispiel.wav' control><audio> - .
<video src='beispiel.mov' control><video> - .
<iframe> - .
<object> - .
Formulare
Formulare sind eine Interaktive Schnittstelle, bei verschiedene Daten eingegeben und angegeben werden können, um die verschiedensten Ereignisse auszulösen. Angefangen bei einem kleinem Formular, das für Suchanfragen gedacht ist, über ein größeres Registrierungsformular bis hin zum Formular für komplexere Interaktionen. Allerdings ist noch eine Skriptsprache wie JavaScript oder PHP erforderlich, um ein Formular bearbeiten zu können. Bis auf <form> benötigen alle anderen Formular-Elemente benötigen die beiden Attribute name und value, die später in Zusammenhang mit den Skriptsprachen noch genauer erklärt werden.
<form action='zielort.php' method='get'>
<input type='text' maxlength='20' name='Beispiel_A' value=''>
<input type='submit' name='Beispiel_A' value='Abschicken'>
</form>
<form action='zielort.php' method='post'>
<table>
<tr> <td> Name: <td> <input type='text' maxlength='20' name='Beispiel_B' value=''>
<tr> <td> Passwort: <td> <input type='password' maxlength='20' name='Beispiel_B' value=''>
<tr> <td> Abschicken: <td> <input type='submit' name='Beispiel_B' value='Abschicken'>
</table>
</form><form> - Alle Formular-Elemente werden innerhalb eines Anfangs- und Endtag eingeschlossen. Es können mehrere unabhängige Formulare auf einer Webseite untergebracht werden. Die Elemente eines Formular können mit einer Tabellen angeordnet werden. Die Tabelle muss dann selber im Tag untergebracht werden.
action - Hiermit wird eine Adresse angegeben, an die das Formular verschickt werden soll. Es kann sich aber auch um eine interne Interkation wie z.B. ein Taschenrechner handeln. In diesem Fall wird das Formular nicht verschickt, sondern es wird eine Funktion aufgerufen, welches das Formular übernimmt und es weiterverarbeitet um z.B. eine Rechnung durchzuführen.
method - Es gibt zwei unterschiedliche Übertragungsmöglichkeiten. Die eine ist get. Hier werden die Daten an die URL angehängt. Die andere ist post. Hier wird eine extra Datei verschickt. Beide Wege werden in Zusammenhang mit einer Skriptsprache deutlicher.
<input> - Dies ist das vielseitigste Element eines Formulares. Entscheidend ist hier das Attribut type, welches verschiedene Werte annehmen kann.
type='hidden' - Verstecktes Element, dass nicht angezeigt und so Daten wie Browser oder IP-Adresse überträgt.
type='text' - Eingabefeld für Text. Zusätzlich kann das Attribut maxlength angeben, wie viele Zeichen maximal angegeben werden können. Das ist bei der Bearbeitung hinterher von Vorteil.
type='password' - Ähnlich wie ein Textfeld, nur das hier die Eingabe verdeckt ist. Auch hier ist der Einsatz von maxlength sinnvoll.
type='number' - Innerhalb dieses Feldes können nur Nummern angegeben werden.
type='time' - Dieses Feld dient für Zeitangaben.
type='date' - Hier kann ein Datum angegeben werden.
type='radio' - .
type='checkbox' - .
type='file' - .
type='reset' - .
type='submit' - .
(
maxlength bestimmt die maximale Länge).<textarea> - .
(Die erste ist mit
checked vormakiert).Eine Auswahlliste mit mehrern Antwortmöglichkeiten (multiple):
<select> - .
CSS
Mit Tags wird eine Webseite Formatiert aber nicht grafisch gestaltet. Die Inline-Tags geben dem Text zwar eine optische Note, sie dienen in erster Linie aber der Formatierung des Textes. Die grafische Gestaltung der Webseite erfolgt seperat, also getrennt vom Inhalt der Seite, durch CSS.
Grundlagen
<head><meta charset='utf-8'>
<title>Einbindung einer CSS-Datei</title>
<link rel='stylesheet' type='text/css' href='beispiel.css'></head>Externes Einbindung - Hier wird eine externe CSS-Datei eingebunden, indem innerhalb des Kopf-Bereichs der Webseite eine Angabe mit <link> gemacht wird. Der Vorteil daran ist, dass die Datei dann in vielen weiteren Webseiten eingebunden werden kann, weshalb Änderungen sehr einfach sind. CSS-Dateien haben die Dateiendung .css. Im Code-Beispiel nebenan nennt sich die Datei beispielsweise „beispiel.css“.
Interne Einbindung - Hier werden die Styledefinitionen direkt in den Kopf der Webseite hineingefühgt. Zu diesem Zweck gibt es das Tag <style>. Die Angabe des Attributs type='text/css' ist zwar nicht unbedingt erforderlich aber zu empfählen.
Direkte Einbindung - .
- .
- .
Größeneinheiten - Um einer Schrift, einem Block oder einen Bild.
Farbeinheiten - .
Schrift und Text
In diesem Abschnitt werden Eigenschaften zur Gestaltung von Text beschrieben. Kein Sinn würde es in Verbindung mit Bilder, Audio oder Video machen, aber bei einigen Formular-Tags wie Textfelder schon. Man muss eben ein bisschen herumprobieren, weil ansonsten auch keine Fehlermeldung ausgegeben wird. Die nun folgenden Eigenschaften lassen sich sowohl auf Inline- als auch auf Block-Tags anwenden.
Text mit normalem Schriftstil.
Text mit kursiven Schriftstil.
Text mit ähnlich kursiven Schriftstil.
font-style:normal;
font-style:italic;
font-style:oblique;font-style - Der Stil einer Schrift. Es gibt die drei Werte normal, kursiv und eine ähnlich kursiven Schriftstil.
Text mit normaler Schriftvariante.
Text mit small-caps Schriftvariante.
font-vairant:normal;
font-variant:small-caps;font-variant - Es gibt hier zwei Schriftvarianten. Einmal eine normale und dann eine, die Kleinbuchstaben als kleinere Großbuchstaben darstellt.
Text mit normaler Schrift.
Text mit dünner Schrift.
Text mit dicker Schrift.
Text mit noch dickerer Schrift.
font-weight:normal;
font-weight:lighter;
font-weight:bold;
font-weight:bolder;font-weight - Das sogenannte „Schriftgewicht“ bestimmt die dicke der Buchstaben und Zeichen. Es gibt die Werte lighter, light, normal und bold.
Text mit einer Größe von 20px.
Text mit einer Größe von 0.8em.
Text mit einer Größe von 3ex.
font-size:10px;
font-size:1.2em;
font-size:3ex;font-size - Die Schriftgröße kann verändert werden. Zulässige Werte sind Grösseneinheiten.
Hier steht ein etwas längerer Textblock mit einer Zeilenhöhe von 0.8em.
Hier steht ein etwas längerer Textblock mit einer Zeilenhöhe von 1em.
Hier steht ein etwas längerer Textblock mit einer Zeilenhöhe von 1.5em.
line-height:0.8em;
line-height:1em;
line-height:1.5em;line-height - Zeilenhöhe des Textes. Es sind positive als auch negative Werte möglich.
Text mit der Schriftart Arial.
Text mit der Schriftart Menlo.
Text mit der Schriftart Papyrus.
font-family:arial;
font-family:times;
font-family:verdana;font-family - Es gibt sehr viele Schriftarten. Auf einem Computer sind bereits viele schon vorinstalliert.
Hier steht ein Textblock. Es wurden mehrere Schrifteigenschaften Gemischt.
Hier steht ein Textblock. Es wurden mehrere Schrifteigenschaften Gemischt.
Hier steht ein Textblock. Es wurden mehrere Schrifteigenschaften Gemischt.
font:1em arial;
font:0.8em/1.5em menlo;
font:italic small-caps bold 1em/1em arial;font - Alle bis jetzt aufgeführten Schrifteigenschaften lassen sich auch als Kurzform notieren. Sie werden dabei in der gleichen Reihenfolge hintereinander aufgeschrieben, wie sie hier auch aufgeführt sind. Mindestens die Schrifthöhe und -art müssen enthalten sein. Direkt hinter der Schrifthöhe kann durch ein / getrennt die Zeilenhöhe stehen. Schliesslich lassen sich noch drei weitere Angaben hinzufügen. Zuerst Schriftstyle und -variante, danach Schriftgewicht gefogt von Schrift-/Zeilenhöhe und zuletzt Schriftart. Die Reihenfolge muss eingehalten werden.
Text mit der Farbe #89f.
Text mit der Farbe #28f.
color:#f98;
color:#28f;color - Ein Text kann hiermit eine Farbe erhalten. Zulässige Werte sind Farbangaben.
Text mit normalem Zeichenabstand.
Text mit einem Zeichenabstand von 0.1em.
Text mit einem Zeichenabstand von 0.12em.
letter-spacing:normal;
letter-spacing:0.1em;
letter-spacing:-0.12em;letter-spacing - Der Zeichenabstand bestimmt den Abstand von Buchstaben, Zahlen oder anderen Zeichen innerhalb eines Wortes. Er kann den Wert normal annehmen, poisitve oder auch negative Werte.
Text mit normalem Wortabstand.
Text mit einem Wortabstand von „0.5em“.
Text mit einem Wordabstand von „-0.2em“.
word-spacing:normal;
word-spacing:0.5em;
word-spacing:-0.2em;word-spacing - Ähnlich wie der Zeichenabstand, bestimmt aber den Wortabstand. Auch hier gibt es den Wert normal, positve oder negative Werte.
Hier steht ein Textblock, der etwas länger ist.
Hier steht ein Textblock, der etwas länger ist.
Hier steht ein Textblock, der etwas länger ist.
Hier steht ein Textblock, der etwas länger ist.
Hier steht ein Textblock, der etwas länger ist.
white-space:normal;
white-space:pre;
white-space:pre-line;
white-space:pre-wrap;
white-space:nowrap;white-space - .
text-decoration:underline;
text-decoration:line-through;
text-decoration:overline;
text-decoration:blink;text-decoration - Gestaltet den Text mit einer Linie, die entweder unter, durch oder über den Text geht. Eine weiter Option ist blinkender Text. Ist der Text mit color farbig gestaltet, so wird auch die Linie in der gleichen Farbe dargestellt. Mit Textdecoration kann und sollte nur Text gestaltet werden, aber nicht Bilder und andere Dinge, die sich als Linlie-Tags verhalten.
Hier steht ein Text.
Hier steht ein Text.
Hier steht ein Text.
text-transform:normal;
text-transform:capitalize;
text-transform:lowercase;
text-transform:uppercase;text-transform - Dies ist eine einfache Möglichkeit, den Text nachträglich komplett in Klein- oder Großbuchstaben zu ändern oder jedes Wort wird groß geschrieben.
Die nächsten Eigenschaften lassen sich nur auf Block-Tags anwenden. Auf Inline-Tags funktionieren sie nicht.
Hier steht ein Textblock, der mit „none“ ausgerichtet ist. Bei einem längeren Textblock kann man es auch viel besser erkennen.
Hier steht ein Textblock, der mit „left“ ausgerichtet ist. Bei einem längeren Textblock kann man es auch viel besser erkennen.
Hier steht ein Textblock, der mit „right“ ausgerichtet ist. Bei einem längeren Textblock kann man es auch viel besser erkennen.
Hier steht ein Textblock, der mit „center“ ausgerichtet ist. Bei einem längeren Textblock kann man es auch viel besser erkennen.
Hier steht ein Textblock, der mit „justify“ ausgerichtet ist. Bei einem längeren Textblock kann man es auch viel besser erkennen.
text-align:none;
text-align:left;
text-align:right;
text-align:center;
text-align:justify;text-align - Richtet den Text aus. Es gibt die fünf Werte none, left, right, center und justify. Beim letzteren wird der Text so eingerückt, dass links und rechts der Text angepasst wird.
Hier steht ein Textblock. Der Text ist um den Wert 1em positiv eingerückt. Richtig gut kann man es aber nur sehen, wenn der Textblock schön lang ist. Dann wirkt die Texteinrückung auch besser.
Hier steht ein Textblock. Der Text ist um den Wert -1em negativ eingerückt. Richtig gut kann man es aber nur sehen, wenn der Textblock schön lang ist. Dann wirkt die Texteinrückung auch besser.
text-indent:1em;
text-indent:-0.5em;text-indent - Rückt die erste Zeile eines Textblocks ein. Alle anderen nachfolgenden Zeilen bleiben unberüht in ihrer Position. Texteinrückungen können sowohl positiv als auch negativ sein. Zulässige Werte sind Größeneinheiten.
Boxmodell
Das Boxmodell ist ein Gestaltungsmodell, dass im Prinzip auf alle HTML-Tags anwendbar ist, ausser die Tags, die man auf der Webseite selber nicht sehen kann. Er ist aus einem Rand, einem Aussen- und Innenabstand aufgebaut. Die Breite und Höhe ist einstellbar. Ferner verfügt das Boxmodell über einen Hintergrund und einem Boxschatten.
border - .
border-radius - .
margin - Der Aussenabstand ist immer Transparent. Ist nur ein Wert angegeben, so gilt er für alle vier Seiten des Kastens. Bei zwei Werten gilt der erste für Oben und unten und der zweite Wert für rechts und links. Bei drei gilt der erste für oben, der zweite für rechts und links und der dritte für unten. Bei allen vier Werten lässt sich jede Seite ansteuern. Dabei gilt der Uhrzeigersinn: Erster Wert oben, zweiter rechts, dritter unten und vierter links.
padding - .
width - .
height - .
background - .
box-shadow - .
MML
MathML ist eine Erweiterung um mathematische Formeln in Webseiten darstellen zu können. Die erfolgt mit weiteren Tags. Die Gestaltung der Formel übernimmt dann der Browser.
Die Elemente
Um Formeln darzustellen gibt es zahlreiche weitere Tags. Die Formatierung mag zwar relativ streng erscheinen, hat aber beim späteren designen auch Vorteile.
<math>
<mrow>
<mi>C</mi>
<mo>=</mo>
</mrow>
</math>
<math> - Das hier ist das Wurzelelement der mathematischen Formel. Es verhält sich als ein Inline-Tag, weshalb Formeln gut im Text platziert werden können, ohne dass ein Umbruch erzeugt wird. Zwischen dem Anfangs- und Endtag werden die für die Formelerstellung benötigten Untertags platziert, die alle mit m beginnen. HTML-Tags haben hier aber nichts zu suchen.
<mrow> - Der nächste Schritt sind Reihen. Eine einfache Formel besteht mindestens immer aus einer Reihe. Ein Bruchstrich hat zudem eine Reihe oben und eine weitere Reihe unten, was aber bei Brüchen erklärt wird.
<mn> - .
<mi> - .
<mo> - .
<mtext> - .
SVG
SVG ist eine Auszeichnungssprache zum erstellen und gestalten von Grafiken, die in Klartext verfasst sind.
Einfache Elemente
Einfache Elemente sind Linien, Kreise, Ellipsen und Rechtecke.
<line x1='10' y1='10' x2='250' y2='60' /><line> - Linien sind einfach. Sie benötigen einen Startpunkt mit x1 und y1 und einen Endpunkt mit x2 und y2. Es wird eine Linie vom Start- zum Endpunkt gezogen.
<circle cx='150' cy='35' r='30' /><circle> - Kreise haben einen Mittelpunkt, der mit cx und cy angegeben wird. Der Radius erfolgt mit r.
<ellipse cx='150' cy='35' rx='60' ry='30' /><ellipse> - Ellipsen haben wie Kreise einen Mittelpunkt, der mit cx und cy angegeben wird. Daneben ist rx der horizontale und ry der vertikale Radius.
<rect x='50' y='10' width='200' height='55' rx='20' ry='5' /><rect> - Rechtecke haben ihren Startpunkt oben links, der mit x und y angegeben wird. width gibt die Breite, height die Höhe an. Optional sind zwei Attribute, die die Kanten des Rechtecks abrunden. rx rundet die Kanten auf der horizontalen, ry die kanten auf der vertikalen Ebene ab. Es kann auch nur rx angegeben werden, dann werden alle Kanten gleichmässig abgerundet.
Programmierung allgemein
In der Programmierung geht es im Prinzip nur um zwei Dinge: Daten die es zu verarbeiten gilt und die Art, wie Daten verarbeitet werden sollen. So auch bei den Sprachen JavaScript, PHP und C#. In diesem Kapitel werden die Gemeinsammkeiten der drei Sprachen erklärt. Sie sind nämlich nach ECAM-Script definiert und besitzen annähernd die gleiche Vorgehensweise. Später werden die Sprachen dann in eigenen Kapiteln erklärt. JavaScript dient der Ausführung eines Programms im Browser, PHP wird auf einem Server ausgeführt und C# ist eine Programmiersprache um Programme zu erstellen, die auf einem Computer ausgeführt werden.
Grundlagen
Es gibt wesentliche Grundlagen wie z.B. der Programm-Code aufgeschrieben werden muss, wie Befehle beendet werden müssen und noch einiges mehr.
// Einzeilige Notiz.
if (A < 1) {A++}
/* Mehrzeilige Notizen
gehen über
mehrere zeilen. */
/* if (A < 10) {A *= 100}
else {A *= 10} */
Notizen - Ist ein Programm sehr lange und/oder sehr funktional, ist es mitunter auch kompliziert. Um wenigstens die Übersicht zu behalten sind Notizen innerhalb des Programms ausserordentlich nützlich. Sie werden später nicht mit ausgeführt. Einzeilige Notizen sind mit // einzuleiten. Demgegenüber erstrecken sich mehrzeilige Notizen mit /* als Anfangs- und */ als Endpunkt über mehrere Zeilen. Notizen können auch ganz nützlich sein um einen Codeabschnitt vorübergehent zu deaktivieren, ohne ihn entfernen zu müssen.
A = 1;
document.write("Ausgabe");Semikolia - Eine Anweisung ist z.B. eine Addition zweier Zahlen oder eine Ausgabe auf dem Bildschirm. In beiden Fällen muss jedenfalls die Anweisung mit einem ; beendet werden.
Kontrollstrukturen
In allen Programmiersprachen sind Kontrollstrukturen sehr wichtig, da mit ihnen sonst keine Programmierung möglich ist. Alle Strukturen haben eines gemeinsam: Entweder die Bedingung trifft zu oder sie trifft nicht zu. Man kann sich die Verhaltenweise wie ein Schloss vorstellen. Wenn der Schlüssen nicht passt, kann man wieder nach Hause gehen und weiss nicht, was sich z.B. hinter einer Tür verbirgt. Alles bleibt also unverändert. Passt er jedoch, so gelangt man in den Raum und kann weitere Dinge unternehmen wie z.B. das Fahrrad herrausholen etc.
if (A < 10) {A *= 10}
else if (A < 20) {A *= 20}
else if (A < 30) {A *= 30}
else if (A < 40) {A *= 40}
else {A *= 50}if - Dies ist der erste Teil einer if-else-Anweisung. Die in der Klammer stehende Operation wird ausgeführt bzw. geprüft, denn das Ergebniss der Operation kann immer nur einer von den zwei Zuständen FALSE oder TRUE annehmen. Wenn das Ergebniss TRUE ist, wird die Anweisung ausgeführt, wenn es FALSE ist, wird (falls vorhanden) zur else if-Anweisung übersprungen.
else if - In PHP schreibt sich diese Funktion elseif.
else - .
- .
Vordefinierte Funktionen
Es gibt viele vordefinierte Funktionen um sich die Programmierung leichter zu machen.
Mathematische Berechnungsfunktionen
Die folgenden vordefinierten Funktionen dienen der Berechnung von mathematische Aufgaben.
| JS | PHP | C | Beschreibung |
|---|---|---|---|
Math.pow(ZAHL, EXPONENT) | pow($zahl, $exponent) | pow(ZAHL, EXPONENT) | Hochrechnung |
Math.sqrt(ZAHL) | sqrt($zahl) | sqrt(ZAHL) | 2. Wurzel |
Math.sin(ZAHL) | sin($zahl) | sin(ZAHL) | Sinus |
Math.cos(ZAHL) | cos($zahl) | cos(ZAHL) | Cosinus |
Math.tan(ZAHL) | tan($zahl) | tan(ZAHL) | Tangens |
Math.asin(ZAHL) | asin($zahl) | asin(ZAHL) | Arcus Sinus |
Math.acos(ZAHL) | acos($zahl) | acos(ZAHL) | Arcus Cosinus |
Math.atan(ZAHL) | atan($zahl) | atan(ZAHL) | Arcus Tangens |
Math.atan2(ZAHL, ZAHL) | atan2($zahl, $zahl) | atan2(ZAHL, ZAHL) | Arcus Tangens (aus zwei Parametern) |
Math.abs(ZAHL) | abs($zahl) | abs(ZAHL) | Absoluter Betrag |
Math.() | () | () |
Mathematische Umwandlungsfunktionen
Diese Funktionen dienen der Umwandlung von Zahlen.
| JS | PHP | C | Beschreibung |
|---|---|---|---|
Math.round(ZAHL) | round($zahl, $nachkommerstellen) | Rundet eine Zahl | |
Math.floor(ZAHL) | floor($zahl) | Rundet eine Zahl ab | |
Math.ceil(ZAHL) | ceil($zahl) | Rundet eine Zahl auf | |
| - | rad2deg($bogenmass) | Bogenmaß zu Grad | |
| - | deg2rad($grad) | Grad zu Bogenmaß | |
| - | bindec($binaerzahl) | Binär zu Dezimal | |
| - | octdec(4oktalzahl) | Oktal zu Dezimal | |
| - | decbin($zahl) | Dezimal zu Binär | |
| - | decoct($zahl) | Dezimal zu Oktal | |
| - | dechex($zahl) | Dezimal zu Hex | |
| - | hexdec($hexzahl) | Hex zu Dezimal | |
| - | base_convert($zahl, $ausgangsbasis, $zielbasis) | Wandlung von System zum anderen |
Datentypprüfung von Variablen
Es gibt Funktionen zum überprüfen, welcher Datentyp eine Variable gerade hat. Alle Funktionen in der Liste arbeiten nach dem selben Prinzip: Stimmt der Datentyp der Variable mit dem Namen der zu überprüfenden Funktion überein, so wird 1 (TRUE) zurückgegeben, andernfalls 0 (FALSE). In Verbindung mit selbst geschriebenen Funktionen ist dies sehr nützlich. So kann es überprüft werden, ob es der richtige Datentyp ist. Die Überprüfunksfunktionen werden einfach in den Klammern einer if-Anweisung geschrieben. In der Anweisung wird dann die eigentliche Funktion untergebracht, die ausgeführt wird, wenn der Datentyp übereinstimmt und der if-Teil somit ausgeführt wird. Und wenn nicht, wird eben über einen else-Teil eine selbstdefinierte Fehlermeldung ausgegeben, was die spätere Fehlersuche erheblich erleichtert.
| JS | PHP | C | Beschreibung |
|---|---|---|---|
| is_null($var) | | |
| is_bool($var) | | |
| is_int($var) | | |
| is_float($var) | | |
| is_numeric($var) | | |
| is_string($var) | | |
| is_object($var) | | |
| is_resoucre($var) | | |
| is_scalar($var) | | |
| is_array($var) | |
PHP
PHP ist eine Skriptsprache, die auf einem Server ausgeführt wird.