MyWiki

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
====== 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. \\ <WRAP>
  * 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
</WRAP>|
|select|Drop-Down-Menü. \\ \\ <WRAP>
<sxh html>
<select>
<option value="eins">Eins</option>
<option value="zwei">Zwei</option>
<option value="drei">Drei</option>
</select>
</sxh>

  * options geben die Optionen an die zur Auswahl stehen
      * value ist optional, wird es nicht angegeben wird der Text gesendet
</WRAP>|
|textarea|Ein Multi-Zeilen-Textfeld. \\ Benötigt schließendes Tag <WRAP>
  * cols -> definiert Anzahl Spalten/Zeichen (Breite)
  * rows -> Anzahl Zeilen (Länge)
  * placeholder -> Ein Plathalter-Text (verschwindet beim reinklicken)
</WRAP>|
|<!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<WRAP>
^Attribut ^Beschreibung^
|charset|Kodierung des Dokumentes. \\ "utf-8" für UTF8|
</WRAP> |
|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 \\ \\ \\ <WRAP>
^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|<WRAP>
* CSS -> text/css
</WRAP>|
</WRAP>|
|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 <br> 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 <br> steht auf einer eigenen Zeile. Für die Markierung von Absätzen (Leerzeile zwischen dem restlichen Text) gibt es <p>\\ \\ **Hinweis**: Dieses Element umschließt keinen Bereich, wird also geöffnet und sofort geschlossen. Entweder <br></br> oder <br />|


====== 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 ======

<sxh html>

<!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>
</sxh>

  * <!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

Seiten-Werkzeuge
