Im Netz aber auch bei diversen Büchern sind manchmal Sammlungen zu unserem "(X)HTML und CSS"-Seminarthema beigelegt. Beim Buchhandel "Terrashop" firmieren diese Sammlungen unter dem Titel "Cheat-Sheet" - was so viel wie "Schummel-Zettel/Blatt" heißen soll. Aber "Schummeln" im Sinne von "man sollte wissen, wo etwas an Information zu finden ist" ist bei uns ausdrücklich gewünscht ;-)
...tbc.. - Dokument in Arbeit - Work in Progress
Also los geht es mit einer "Sammlung" von Infos:
HTML
Tabellarische Übersicht zu HTML (Anm.: die spitzen Klammern < > spare ich mir)
Hier ein Link zum Mozilla Developer Network mit einer kompletten HTML5-Übersicht:
MDN - Liste der HTML5-Elemente
oder aber natürlich der HTML-Index auf wiki.selfhtml.org
| Tag | Erläuterung |
|---|---|
| html |
äußere Definition für gesamtes Dokument <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" HTML5 (das ist doch mal eine Vereinfachung ;-) <!doctype html> <html lang="de"> |
| head | beinhaltet Kopfinfos des Dokuments wichtige head-Tags: title, meta, link (für externes CSS), script (für JS) |
| title | Name für das Dokument - Verwendung in Lesezeichen (Bookmarks, Favorites)<title>Dokumenttitel für Lesezeichen</title> |
| meta |
Meta-Infos für Dokument <meta name="author" content="Joe Brandes - becss.de"/> <meta name="copyright" content="Creative Commons Attribution Lic. 3.0" /> <meta name="keywords" content="CMS, Onlinetechnik, HTML, CSS"/> <meta name="date" content="2013-12-15T08:49:37+02:00"> |
| link | Einfügen von externen Dokumenten und Infos<link media="screen, projection" rel="stylesheet" spezielles Handlung für den Microsoft Internet Explorer: <!--[if lte IE 7]> <link href="/css/iehacks.min.css" rel="stylesheet" type="text/css" /> <![endif]-->
|
| script | Einfügen von Skriptcode (intern im Dokument oder zu externer Datei)<script src="/js/mootools-core.js" type="text/javascript"></script> <script src="/js/core.js" type="text/javascript"></script> |
| body | Der "Körper" unseres HTML-Dokuments - Standardausgabebereich für Browser |
| h1 ... h6 | Headings / Überschriften - Hierarchieebenen 1 bis 6 |
| div |
Blöcke / Abschnitte - die Bereiche der Website <div id="header">...</div> <div id="nav">...</div> in HTML5: header, nav, article, footer |
| span |
Inline-Markierung - Klammerung für Texte <p>Nunc scelerisque, |
| p |
Paragraph - Absätze (bitte niemals Texte ohne p-Tags) |
| br |
Break - Zeilenumbruch |
| a |
Anker - Verlinkung von Texten, Grafiken weil sonst die E-Mail-Verschleierungstechnik des CMS anspringt) <!-- verlinkt zu div id="header" --> <a href="#header">zum Header springen</a> <!-- verlinkt zu bahn.de mit neuem Tab --> <a href="http://www.bahn.de" target="_blank">Deutsche Bahn</a> <!-- verlinkt E-Mail-Adresse inklusive Betreff --> <a class="emaillogo" |
| img |
Images - Bilder in HTML verlinken <img src="/img/eintracht-02-960px.jpg" |
| pre |
Preformatted Text - Vorformatierter Text (Text im Browser so wie im Code) <pre>Tabelle: (auf "Blöd")<br /> Name Vorname Ort<br /> Becker Boris Leimen<br /> Graf Steffi Las Vegas<br /> </pre> |
| table |
Table - Tabellen |
| form |
Form - Formular |
em strong abbr cite q |
Logische bzw. semantische Tags: |
Natürlich erhebt diese Übersicht keinen Anspruch auf Vollständigkeit.
Ihr Trainer Joe Brandes
Status: April 2017
