TIPS
by
NETtMAN

html schlüsselwörter

Wie HTML aufgebaut ist und wie einzelne TAG´s zusammengestellt werden, haben Sie im vorherigen Artikel gesehen. Was noch fehlt ist : Was für TAG´s gibt es ? Und : welche Attribute kann man Ihnen auferlegen ?

!DOCTYPE
html
head
title
meta
base
link
style
script ( bis hierher Deklarationselemente - folgend Inhaltsträchtige TAG´s : )
body, header, footer, menu, nav, section, article, aside, main, figcaption, figure, dfn, var, canvas, h1, h2, h3, h4, h5, h6, div, p, a, hr, br, b, i, q, mark, span, small, em, strong, cite, abbr, ins, del, sub, sup, img, map, area, script, ruby, rp, rt, kbd, samp, code, pre, bdo, bdi, summary, details, address, ol, ul, li
table, tbody, thead, tfoot, col, colgroup, caption, tr, td, th, dl, dd, dt
form, fieldset, label, input, textarea, meter, legend, select, option, button, output, datalist, time, progress, outgroup, keygen, embed, object, param, source, video, audio, iframe

Brandneu und nur in modernen Browsern integriert ist dieser TAG : <details>
Im Einsatz erledigt er das Aus- und Einblenden für INFO´s wie es sonst nur CSS könnte.
Dieser INFO-Text befindet sich in einem details-TAG. Wird er ohne Mausklick einfach so angezeigt, verwenden Sie leider einen veralteten Browser ohne HTML5-Implementierung !


1* ) Standard-Attribute verwenden. Diese TAG´s gehören zur Gruppe der BLOCK-Elemente, da sie einen eigenen Absatz bilden und somit nicht in den Textfluss integriert sind.

2* ) Standard-Attribute verwenden. Diese TAG´s fügen sich automatisch in den Textfluss ein als wäre ihr Text-Inhalt einfacher Text. Sie werden daher auch INLINE-Elemente genannt.

3* ) TAG´s die keinen Inhalt haben. Auch die Standard-Attribute sind nicht immer anwendbar. Diese Elemente beziehen Ihr Wesen aus Fremd-Dateien (dann mit den Attributen WIDTH & HEIGHT einstellbar / andere Attribute entspringen der jeweiligen Datei) oder strukturellen Aufgaben (dann ist "Ausgabe" nicht vorgesehen, wodurch Standard-Attribute entfallen).

Standard-Attribute (URL = Addresse, $ = Text, % = Zahlwert) :

title="$", width="%", height="%", id="$", class="$ $ $", name="$", lang="de/fr/ru/...", dir="ltr/rtl/auto", style="CSS", contextmenu="CSS-ID", contenteditable="true/false", draggable="CSS-ID", dropzone="copy/move/link", checkspell="true/false", translate="yes/no", accesskey="$", data(-VARIABEL)="$", hidden="true" und (Event-Handler mit Werten als Javascript-Anweisungen : ) onclick, onmouseover, onmouseout, ontouch, onload, onunload, onselect, onscroll, onresize, onblur, onchange, onsubmit, onreset, onerror, onabort

Im einzelnen die Attribute zu folgenden TAG´s :

<!-- Kommentare ( will ich gleich Mal nutzen ) Die folgenden TAG´s sind der Einfachheit halber ohne < > abgebildet -->

!DOCTYPE = 3* / ist eigentlich kein echter HTML-TAG, wird aber zur Unterscheidung von HTML-ähnlichen Script-Sprachen und HTML-Varianten, derer es viele gibt, benötigt. Für HTML5 braucht nur " html" als einziges Attribut folgen. Sieht dann so aus : <!DOCTYPE html>

HTML = 3*, xmlns="$"- und manifest="URL"-Attribute / klärt die Art des Dokumentes ggf. mit Spezifikation

HEAD = 3* / stellt einen noch nicht mit Attributen oder Funktionen belegten Bereich für Deklarationen bereit

TITLE = 3* / Der Titel des Dokumentes. Er wird von Suchmaschinen ausgewertet, ist der Eintrag in den Favoriten, wenn dort abgelegt, und erscheint in der Tab-Leiste des Browser´s

META = 3*, name="application-name/author/description/generator/keywords"-, content="text"-, http-equiv="content-type/default-style/refresh"-, charset="$"-Attribute / Mitteilungen an Suchmaschinen / Browser

BASE = 3*, href="URL"- und target="_blank/_parent/_self/_top/$"-Attribute / setzt die BASIS-URL und ggf. die ZIEL-URL. Diese werden genutzt um interne LINK´s und interne PFAD-Angaben zu Formular-Dateien zu vervollständigen, wenn diese nur die URL-Kurzschreibweise als "href"- oder "target"-Attribut benennen.

LINK = 3*, type="screen/print"-, href="URL"-, hreflang="de/fr/ru/..."-, media="$"-, rel="alternate/archives/author/bookmark/external/first/help/icon/last/license/next/nofollow/noreferrer/pingback/prefetch/prev/search/sidebar/stylesheet/tag/up"-, crossorigin=""-Attribute / verweist auf externe Dateien und bindet diese ein ( CSS, PINGBACK, ICON, NOFOLLOW u.v.m. )

STYLE = 3*, type="text/css"-, media="$"- und scoped="scoped"-Attribute / Der Inhalt sind Style-Anweisungen für alle anderen TAG´s mit Inhalten ( CSS )

SCRIPT = 3*, src="URL"-, type="$"-, defer="defer"-, charset="$"-, async="async"-Attribute / führt ein script des angegebenen typ´s aus. Scripte im HEAD-Bereich sollten möglichst keine Texte ausgeben - können aber einen noscript-TAG ausgeben - ein solcher darf auch im HEAD-Bereich gesetzt sein, obwohl dort eigentlich nur Deklarationen ohne Text-Ausgabe vorgesehen sind

BODY = 1* / stellt einen noch nicht mit Attributen oder Funktionen belegten Behälter / Raum für den Dokument-Körper bereit

HEADER = 1* / stellt einen noch nicht mit Attributen oder Funktionen belegten Behälter / Raum für die Titelleiste bereit

FOOTER = 1* / stellt einen noch nicht mit Attributen oder Funktionen belegten Behälter / Raum für die Fußnoten bereit

MENU/MENUITEM = 1* / stellt einen noch nicht mit Attributen oder Funktion belegten Behälter / Raum für spezielle Kontext-Menues bereit ( wird bisher ( JUN-2016 ) nur von FIREFOX ab Version 8 geleistet)

NAV = 1* / stellt einen noch nicht mit Attributen oder Funktionen belegten Behälter / Raum für die "navigation-bar" bereit

SECTION = 1* / stellt einen noch nicht mit Attributen oder Funktionen belegten Behälter / Raum für irgendeinen Bereich bereit

ARTICLE = 1* / stellt einen noch nicht mit Attributen oder Funktionen belegten Behälter / Raum für einen Beitrag bereit

ASIDE = 1* / stellt einen noch nicht mit Attributen oder Funktionen belegten Behälter / Raum für die "sidebar" bereit

MAIN = 1* / stellt einen noch nicht mit Attributen oder Funktionen belegten Behälter / Raum für den Hauptteil bereit

FIGCAPTION/FIGURE = 2* / stellt einen Raum für Medien oder Fotos bereit ( FIGCAPTION als Titel )

DFN = 2* / stellt einen Raum für "zu definierendes" bereit - entsprechende Definition sollte folgen

VAR = 2* / stellt einen Raum für "Worte die etwas variables meinen" bereit

CANVAS = 2* / stellt einen Raum / eine Zeichenfläche bereit, deren Matrix ( Bildpunkte ) mittels Javascript oder ähnlichen Script-Sprachen bemalt werden kann

H1/H2/H3/H4/H5/H6 = 1* / Überschriften in diversen Größenordnungen

DIV = 1* / stellt einen noch nicht mit Attributen belegten Behälter / Raum für andere TAG´s bereit

P = 1* / definiert einen Absatz für Texte

A = 2*, href="URL"-, target="_blank/_self/_parent/_top/$"-, type="$"-, rel="alternate/author/bookmark/help/license/next/nofollow/noreferrer/prefetch/prev/search/tag"-, media=""-, download="URL"- und hreflang="de/fr/ru/..."-Attribute / anklickbarer Link

HR = 1* / durchgezogene Linie für die gesamte jeweilige Textbreite

BR = 3* / Zeilenumbruch

IMG/MAP/AREA = 3*, src="URL"-, ismap="ismap"-, usemap="$"-, crossorigin="$"-, longdesc="URL"- und alt="$"-Attribute / Bilder, Bereiche : ( name-Attribut ) für Bilder und Teilbereiche : (href="URL"-, type="$"-, target="_blank/_self/_parent/_top/$"-, media="$"-, rel="alternate/author/bookmark/help/license/next/nofollow/noreferrer/prefetch/prev/search/tag"-, shape="default/rect/circle/poly"-, coords="% % % %"-, download="URL"-, alt="$"- und hreflang="de/fr/ru/..."-Attribute ) des Bereiches für Bilder zum Belegen mit mehreren LINK´s

B/I/Q/MARK/SPAN/SMALL/EM/STRONG/CITE/ABBR/INS/DEL/SUB/SUP = 2* / Verzierungsmöglichkeit mit CSS (voreingestellt als Proportional-Schrift). Vorgesehen für FETT/ITALIC/ANFÜHRUNGSZEICHEN/MARKIERT/MARKIERT/SCHMAL/EMPHATISCH/SCHWER/TITEL/(ABBR- mit Attribut-[title])/DURCHGESTRICHEN/UNTERSTRICHEN/TIEFGESTELLT/HOCHGESTELLT formatierte Textausgaben.

KBD/CODE/SAMP/PRE = 2* / Verzierungsmöglichkeit mit CSS (voreingestellt mit einheitlicher Zeichenbreite, nicht proportional). Vorgesehen für Phrasen/Code/Programmierte Textausgaben/Steuerzeichen wie im zugrundeliegenden Text, Inhalt wird nicht geparst.

BDI = 3* / kehrt die Richtung des Textflusses innerhalb (nur) dieses TAG´s um. Kann z. B. Namen oder Zitate in einer Landessprache mit "von rechts nach links leseweise" einfügen.

BDO = 3*, dir="ltr/rtl"-Attribut / legt die Richtung des Textflusses fest

SCRIPT = 3*, src="URL"-, type="$"-, defer="defer"-, charset="$"-, async="async"-Attribute / führt ein script des angegebenen typ´s aus

NOSCRIPT = 2* / gibt den Textinhalt aus, falls der Browser auf "keine scripte ausführen" eingestellt ist

RUBY/RT/RP = 2* / setzen, evtl. gemeinsam, Zusatzzeichen an Wort-Schriften, wie sie in Japan und China beispielsweise verwendet werden.

SUMMARY/DETAILS = 2*, open="open"-Attribut / zusätzliche INFO´s (SUMMARY als Titel) vom Webseiten-Besucher ein- bzw. ausblendbar

ADDRESS = 1* / Hervorhebung für Adressenfeld von Artikel-Autoren ( mehrzeilig, nicht für Kontaktdaten des Dokumenturhebers - Impressum soll in FOOTER )

OL = 3*, type="1/A/a/I/i"-, start="Z"- und reversed="reversed"-Attribute / eröffnet eine geordnete Liste

UL = 3* / eröffnet eine ungeordnete Liste

LI = 3*, value="%"-Attribut / definiert einen Listenpunkt

TABLE = 3*, border="%"- und sortable="sortable"-Attribute / eröffnet eine Tabelle

TFOOT/THEAD/TBODY = 3* / Kopf, Körper oder Fußbereich von Tabellen

COL = 3*, span="%"-Attribut / Teil von colspan-TAG´s in Tabellen als bezugnehmender Text

COLSPAN = 3*, span="%"-Attribut / Zusammenfassung von col-TAG´s in Tabellen

CAPTION = 2* / bezugnehmender Text für eine Tabelle

TR = 3* / erzeugt eine Zeile in Tabellen

TD = 3*, colspan="%"- und headers="$"-Attribute / erzeugt eine Zelle in Tabellen

TH = 3*, colspan="%"-, headers="$"-, rowspan="%"-, sorted="reversed/Z/reversed Z/Z reversed"- und scope="col/colgroup/row/rowgroup"-Attributen / setzt Überschrift in Tabellenspalte

DL = 3* / eröffnet eine Liste von Tabellen-Spalten-Beschreibungen

DD = 3* / Einrückung mit Beschreibung für eine Tabellenspalte

DT = 3* / Einrückung mit Beschreibung für eine Tabellenspalte ( in Verbindung mit vorherigem DL mehrere Spalten)

FORM = 3*, action="URL"-, autocomplete="on/off"-, accept-charset="$"-, enctype="application/x-www-form-urlencoded/multipart/form-data/text/plain"-, method="get/post"-, novalidate="novalidate"-, und target="_blank/_self/_parent/_top"-Attribute / eröffnet Formulare

FIELDSET = 3*, form="$"- und disabled="disabled"-Attribute / gruppiert Teile von Formularen ( form-TAG´s )

LABEL = 2*, for="$"-(id) und form="$"-Attribute / ein Textfeld als Label mit INPUT verbinden

INPUT = 2*, alt="$"-(wenn type="image"), form="$"-, formaction="URL"-, formenctype="application/x-www-form-urlencoded/multipart/form-data/text/plain"-, formmethod="get/post"-, formnovalidate="formnovalidate"-, formtarget="_blank/_self/_parent/_top/$"-, accept="$*/audio/*video/*image/*/*media_type"-, autocomplete="on/off"-, autofocus="autofocus"-, checked="checked"-, list="$"-, max="%"-, maxlength="%"-, min="%"-, multiple="multiple"-, pattern="(regexp)"-, size="%"- , step="%"-, type="button/checkbox/color/date/datetime/datetime-local/email/file/hidden/image/month/number/password/radio/range/reset/search/submit/tel/text/time/url/week"- und value="$"-Attribute / Eingabefeld

TEXTAREA = 1*, form="$"-, cols="%"-, rows="%"-, wrap="hard/soft"-, dirname="$.ltr/$.rtl"-, readonly="readonly"-, required="required"-, maxlength="%"-, placeholder="$"-, autofocus="autofocus"- und disabled="disabled"-Attribute / mehrzeiliges Eingabefeld

METER = 2*, form="$"-, value="%"-, high="%"-, low="%"-, max="%"-, min="%"- und optimum="%"-Attribute / blendet eine Füllanzeige für einen bestimmten Wert ein
LEGEND = 1*, align-="top/left/bottom/right"Attribut / hervorheben einer Legenden-Überschrift

SELECT = 3*, form="$"-, size="%"-, required="required"-, multiple="multiple"-, autofocus="autofocus"- und disabled="disabled"-Attribute / Rahmen für Optionsfeld

OPTION = 2*, value="$"-, label="$"-, selected="selected"- und disabled="disabled"-Attribute / drop-down-list für select-TAG

BUTTON = 2*, form="$"-, formaction="URL"-, formenctype="application/x-www-form-urlencoded/multipart/form-data/text/plain"-, formmethod="get/post"-, formnovalidate="formnovalidate"-, formtarget="_blank/_self/_parent/_top/$"-, type="button/reset/submit"-, value="$"-, autofocus="autofocus"- und disabled="disabled"-Attribute / anklickbarer Knopf mit Wertübergabe

OUTPUT = 2*, for="(ID)"- und form="$"-Attribute / blendet eine Skala für einen bestimmten Wert ein

DATALIST = 2* / Eingabefeld mit Optionen ( und autocomplete )

TIME = 2*, datetime="2016-06-18 21:30"-Attribut / blendet eine Kalender- und Uhrzeit-Auswahl ein

PROGRESS = 2*, value="%"- und max="%"-Attribute / anzeigen einer Fortschritts-INFO

OUTGROUP= 3*, label="$"- und disabled="disabled"-Attribute / gruppierung von SELECT-OUTGROUP-OPTION-TAG´s

KEYGEN = 2*, keytype="rsa/dsa/ec"-, autofocus="autofocus"-, form="$"-,challenge="challenge"- und disabled="disabled"-Attribute / Eingabefeld für verschlüsseltes Passwort

EMBED = 1*, src="URL"- und type="$"-Attribute / Stellt externes Objekt mit interaktivem Inhalt bereit

OBJECT = 1*, type="$"- ,form="(ID)"- ,usemap="#$"- und data="data"-Attribute / stellt ein Objekt bereit

PARAM = 3*, value="$"- und type="$"-Attribute / stellt Parameter für ein Objekt ein

SOURCE = 3*, src="URL"-, type="$"- und media="$"-Attribute, lädt eine Ressource hinzu

AUDIO = 3*, src="URL"-, type="$"-, preload="auto/metadata/none"-, autoplay="autoplay"-, loop="loop"-, controls="controls"-, muted="muted"-Attribut / spielt Hintergrund-Geräusche ab

IFRAME = 1*, src="URL"-, frameborder="%"-, marginwidth="%"-, marginheight="%"-, scrolling="yes/no/auto"-, srcdoc="URL"-, sandbox="allow-forms/allow-pointer-lock/allow-popups/allow-same-origin/allow-scripts/allow-top-navigation"-Attribut / zeigt Fenster in eine fremde Webseite


Und noch ein Extra-Tipp : Auf http://dabblet.com haben Sie die Möglichkeit HTML und CSS und JS "on the fly" zu "scripten". Das Ergebnis wird in echtzeit angezeigt. Das Beste daran : Das "script" kann ohne Account und sowieso gratis gespeichert werden. Zu diesem Zweck erhält die Unterseite mit Ihrem "script" eine spezielle URL. Die können Sie z. B. in den Favoriten Ihres Browser´s hinterlegen, denn nur unter dieser URL ist es wieder zu finden. Eignet sich auch gut zum Vorstellen eigener Werke in einem Blog oder auf der Webseite.

18.6.16 11:25
 


bisher 0 Kommentar(e)     TrackBack-URL

Name:
Email:
Website:
E-Mail bei weiteren Kommentaren
Informationen speichern (Cookie)



 Smileys einfügen
Myblog.de website reputation  Seitenreport - Die SEO und Website Analyse  Quality monitored by qualidator.com   Daisypath Friendship tickers OpenOffice

 responsive menu
 rauf
  runter