Inhaltsverzeichnis

Begriffe
Einige Elemente
Dokumentation
Grundaufbau
Gutes Webdesign

Begriffe

Begriff	Beschreibung
Void Element	Elemente die ein Opening Tag haben, aber kein Closing-Tag
Attribute	Definieren Eigenschaften von Dokumenten Befinden sich im Opening Tag eines Elements

Einige Elemente

Element

Beschreibung

main

Haupttext der Seite.
Sollte sich nicht wiederholen
Semantisches Element

section

Sektion.

Zum Beispiel eine Untersektion innerhalb Main (umfassend die Überschrift und den Inhalt des Abschnittes) oder eine Kopf- oder Fußzeile
Semantisches Element (im Gegensatz zu div).

figure

Figur (im Sinne von Abbildung in Büchern).

Ein Block von Inhalt (häufig ein Bild) welches in sich geschlossen ist - z.B. ein Stück Code, eine Abbildung, ein Bild, ein Zitat.
Kann eine Abbildungserklärung darunter haben - siehe figcaption-Tag.

Das Element umschließt alles was Teil der figure sein soll

figcaption

Ein Erklärungstext zur figure.
Muss im figure-Element stehen

em

Emphasys - Betonung/Heraushebung.
Genutzt um ein Wort oder Gruppe von Wörtern besonders zu betonen/hervorzuheben.

Sollte an Stelle von Formatierung genutzt werden wenn angebracht, weil es durch srceen reader z.b. erkannt und entsprechend anders betont werden kann.
In der Regel wird der Text in italic dargestellt

strong

Unterstreicht (nicht visuell, sondern im literarischen Sinne) ein Wort oder Wortgruppe.
In der Regel dick dargestellt

label

Gruppiert Text und Elemente.
In der Regel einen Text und ein Interaktionselement (Textfeld, Radio-Button, Check-Box) die zusammengehören.

Visuell in der Regel nicht sichtbar.
Aber klick auf den Text aktiviert das Interaktionselement → vergrößert den Einzugsradio → gut bei Touchscreens oder für Menschen mit Genauigkeitsproblemen.
Screenreader können Interaktionselement und Text zusammenbringen

form

Formular.

action → URL an welche die Daten gesendet werden sollen.
method → get oder post → HTTP-Methode über die gesendet werden soll

fieldset

Gruppiert zusammengehörende Controls (User-Interaktionselemente) zu einem Block.
Zum Beispiel Radio-Buttons der gleichen Entscheidung.

Visuell sichtbar.
„Überschrift“ kann durch Legend-Element erreicht werden

Legend

Erzeugt eine Legende/Überschrift/Erklärung für ein Fieldset.
Ähnlich figcaption für figure-Element

input

Eingabe-Element.

type:

^type ^Beschreibung ^

submit	Sendet das Formular ab
text	Text
email	E-Mail-Addresse
password	Eingabe wird mit Sternchen maskiert
radio	Radio-Button. Mehrere können über den gleichen Namen im name-Attribut zu einer Gruppe zusammengefasst werden von der nur einer ausgewählt werden kann
file	Button zum hochladen einer Datei
number	Zahl - es können nur Zahlen eingegeben werden. siehe auch min und max

value → Beschriftung
required → hat keinen Wert, wenn angegeben muss dieses Feld ausgefüllt werden um das Formular absendend zu können
minlength → minimale Länge der Eingabe
pattern → definiert ein regular Expression der erfüllt sein muss → pattern=„[a-z0-5]{8,}“
name → Names des Feldes wie er dann im Post bzw. get übertragen wird
- bei Radio-Buttons können mehrere Buttons den gleichen Namen haben, es kann dann nur einer dieser Gruppe ausgewählt werden
checked → per Default ausgewählt (Radio-Button/Check-Box). Hat keinen Wert
min → für Zahlenfelder der Minimalwert
max → für Zahlenfelder der Maximalwert

select

Drop-Down-Menü.

<select>
<option value="eins">Eins</option>
<option value="zwei">Zwei</option>
<option value="drei">Drei</option>
</select>

options geben die Optionen an die zur Auswahl stehen
- value ist optional, wird es nicht angegeben wird der Text gesendet

textarea

Ein Multi-Zeilen-Textfeld.
Benötigt schließendes Tag

cols → definiert Anzahl Spalten/Zeichen (Breite)
rows → Anzahl Zeilen (Länge)
placeholder → Ein Plathalter-Text (verschwindet beim reinklicken)

<!DOCTYPE html>

Pseudo-Element welches definiert um was für eine Art Dokument es sich handelt → html5-Element

html

root-Element einer html-Seite.

lang-Attribut = definiert welche Sprache diese Seite nutzt. lang=„de“ → Deutsch; lang=de_de → Deutsch-Deutschland

meta

Definiert Meta-Informationen der Seite.
Innerhalb vom head-Element

Attribut	Beschreibung
charset	Kodierung des Dokumentes. „utf-8“ für UTF8

iframe

Einbinden anderer html-files in das aktuelle

Funktioniert ähnlich einem frame, allerdings ohne dessen Nachteile, un dohen Definition eines Framesets.
Die einzubindende Datei wird einfach direkt in die aktuelle Datei eingebunden.

Syntax: <iframe src=„ einzubindende Datei “ frameborder=„ dicke der Umrandung “ width=„ Breite “ height=„ Höhe “>

Angaben zur Höhe und zur Breite können in Pixeln (keine Einheit angegeben) oder in Prozent (Prozentzeichen) angegeben werden.

Hinweis: Bei Links im iframe die in der Seite geöfnet werden sollen in dem der iframe ist (Hauptseite), muss target=„_parent“ angegeben werden.

div

Gruppiert zusammengehörende Element.
Generisch
Ist nicht semantisch (im Gegensatz zu article oder section die Inhalte gruppieren, gruppiert es Elemente vor allem für Styling.
Block-Element - Span ist Inline-Gegenstück

Das Elemnt hat keien formatierende Wirkung (es sei denn man definiert eine via css)

Hinweis:Wird bei verschachtelten Divs im übergeordneten Div keine Breite angegeben (css width), kann unter Umständen ein untergeordnetes Div nicht die volle Bildschirmbreite nutzen, auch wenn beim untergeordneten Div width:100% angegeben ist.
Scheint daran zu liegen das der Browser für as übergeordnete Div dann einfach eine Weite willkürlich fest definiert und die Breite des untergeordneten Divs sich relativ auf das übergeordnete bezieht.

span

Formatierungsanker (ähnlich div) - dient um einen Bereich/Abschnitt im Text anders zu formatieren (per css)
Inline-Element (div ist das Block-Gegenstück) \\
Hat wie div keine (Selbst)-Formatierende Wirkung, sondern nur mit css zusammen.

Im Gegensatz zu div beschreibt es aber auch keinen in sich geschlossenen Bereich.

ul

Unordered List - unnummerierte Liste

Erzeugt eine Stichpunktliste

Syntax:

<ul>
<li>Punkt1</li>
<li>Punkt2</li>
<\ul>

* ul → Unordered List
* li → List Item → Listen-Eintrag

link

Einbinden externer Resourcen

Syntax: <link rel= Relation-Typ href=URL/File type=Mime-Typ

Relation-Typ: Art der einzubindendenen Resource (Zum Beispiel Stylesheet oder Favicon)
URL/File: Ort wo die einzubindende Datei zu finden ist
Mime-Typ: Welches Format die einzubindende Resource hat → bei Favicons können zum Beispiel verschiedene Bildformate eingebunden werden

Resource	Relation-Typ	Mime-Typ
URL-Icon/Favoriten-Icon/Favicon	icon	Hängt vom verwendeten Bild-Format ab Siehe http://de.wikipedia.org/wiki/Favicon
Externer CSS/Externer Style-Sheet	stylesheet	* CSS → text/css

ol

Ordered List - geordnete Liste/Nummerierte Liste.
Im Prinzip wie ul, nur das die Einträge nummeriert sind

p

Umschließt einen Absatz.

Nach dem Absatz kommt eine Leerzeile.

Im Gegensatz zu wo nur die Zeile umgebrochen wird.

br

Zeilenumbruch

Hier nach erfolgt ein Zeilenumbruch (der Textfluss wird auf der nächsten Zeile fortgesetzt).
Es kommt keine Leerzeile, es sei denn das steht auf einer eigenen Zeile. Für die Markierung von Absätzen (Leerzeile zwischen dem restlichen Text) gibt es 

Hinweis: Dieses Element umschließt keinen Bereich, wird also geöffnet und sofort geschlossen. Entweder oder

Dokumentation

Was	Wo
Erklärung der HTML-Elemente der verschiedenen Versionen	http://www.w3.org/wiki/HTML/Elements
Informationen zu HTML, CSS, Java-Script	https://developer.mozilla.org/en-US/docs
Referenzen JavaScript, CSS, HTML	http://reference.sitepoint.com/css
Tutorials zu verschiedenen Themen hinsichtlich CSS, JavaScript, HTML	http://www.webplatform.org/

Grundaufbau


<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0>
    <title>Something</title>
  <head>
  <body>
  </body>
</html>

<!DOCTYPE html> - definiert Dokumenttyp HTML5
<html lang=„de“> - definiert Sprache des Dokuments auf Deutsch
<meta charset=„utf-8“> - definiert Encoding des Dokuments auf UTF-8
<meta name=„viewport“ content=„width=device-width, initial-scale=1.0> - definiert das die Seitenbreite an die Breite des Gerätes angepasst werden soll und nicht skaliert werden soll

Gutes Webdesign

nur ein h1-Element pro Seite
alt-Attribut in img-Elementen nutzen

MyWiki

Benutzer-Werkzeuge

Webseiten-Werkzeuge