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

TagErläuterung
html

äußere Definition für gesamtes Dokument
davor noch die notwendige saubere DTD (Dokument Typ Defintions)
XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">

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" 
href="/css/styles.css" type="text/css" /> <link href="/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" /> <!-- oder auch: --> <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />

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
klassisch:

<div id="header">...</div>
<div id="nav">...</div>
<div id="content">...</div>
<div id="footer">...</div>

in HTML5: header, nav, article, footer
span

Inline-Markierung - Klammerung für Texte

<p>Nunc scelerisque, 
<span class="testformat">massa a condimentum</span> pellentesque
</p>
p

Paragraph - Absätze (bitte niemals Texte ohne p-Tags)

br

Break - Zeilenumbruch
Anm.: ein Einzeltag - also ohne explizite Anfangs- und Endetag
in XHTML müsste sauber mit <br /> kodiert werden!

a

Anker - Verlinkung von Texten, Grafiken
Beispiele: (bei E-Mail-Adressen ohne Klammeraffen,

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" 
href="mailto:info(at)pcsystembetreuer.de?subject=Testmail">
info(at)pcsystembetreuer.de</a>
img

Images - Bilder in HTML verlinken
Bitte immer mit alt- und title-Attributen

<img src="/img/eintracht-02-960px.jpg" 
alt="Aantracht Braunschwaich" title="Aantracht Braunschwaich"/>
pre

Preformatted Text - Vorformatierter Text (Text im Browser so wie im Code)
Anm.: Darstellung von Code oder eben einfachen tabellarischen Strukturen und Texten

<pre>Tabelle: (auf "Blöd")<br />
Name         Vorname           Ort<br />
Becker       Boris             Leimen<br />
Graf         Steffi            Las Vegas<br />
</pre>
table

Table - Tabellen
Eine mögliche saubere Tabellenstruktur aus den Tags:
thead (Tabellenkopf), tfoot (Tabellenfuß), tbody (Tabellenbody),
tr (tablerows - Tabellenzeilen),
th (tableheadings - Spaltenköpfe),
td (tabledata - Tabellendatenzellen) und
caption (Tabellenbeschriftung)
Beispieltabelle auf selfhtml-Projekt-Seite

form

Form - Formular
verschiedene Eingabefelder mit den folgenden Tags:
input (Haupttag mit verschiedenen Typen)
    type="text" (Textfeld)
    type="password (speziell: Passwort)
    type="radio" (Optios-Gruppen)
    type="checkbox" (Kontorllkästchen)
    type="submit" (Schaltfläche)
select / option (Auswahllisten)
textarea (Eingbabebereiche)
label (Bezeichner)
Beispieltabelle bei den TN-Unterlagen


em
strong
abbr
cite
q

Logische bzw. semantische Tags:
emphatisch (betonte Textstellen)
stark betonte Textstelle
Abkürzung
Zitat
Quote

Natürlich erhebt diese Übersicht keinen Anspruch auf Vollständigkeit.

CSS

...tbc...

siehe CSS-Index auf wiki.selfhtml.org

 

Ihr Trainer Joe Brandes

Status: April 2017

  Privates

... zu Joe Brandes

Sie finden auf dieser Seite - als auch auf meiner privaten Visitenkarte joe-brandes.de einige Hintergrundinformationen zu mir und meinem Background.
Natürlich stellt die IT einen Schwerpunkt in meinem Leben dar - aber eben nicht nur ...

joe brandes 600px

Private Visitenkarte / Technik: HTML & CSS /
  joe-brandes.de

  Jobs

... IT-Trainer & Dozent

Ich erarbeite und konzipiere seit über 25 Jahren IT-Seminare und -Konzepte. Hierfür stehen der "PC-Systembetreuer / FITSN" und der "CMS Online Designer / CMSOD". Ich stehe Ihnen gerne als Ansprechpartner für Ihre Fragen rund um diese und andere IT-Themen zur Verfügung!

becss 600px

BECSS Visitenkarte / Technik: HTML & CSS /
  becss.de

  Hobby

... Snooker & more

Wer einmal zum Snookerqueue gegriffen hat, der wird es wohl nicht wieder weglegen. Und ich spiele auch immer wieder gerne eine Partie Billard mit den Kumpels und Vereinskameraden. Der Verein freut sich über jeden, der einmal in unserem schicken Vereinsheim vorbeischauen möchte.

bsb 2011 600px

Billard Sport BS / Joomla 3.x /
  billard-bs.de

PC Systembetreuer ist J. Brandes - IT seit über 35 Jahren - Technik: Joomla 3.4+, Bootstrap 3.3.4 und "Knowledge"

© 2024 - Websitedesign und Layout seit 07/2015 - Impressum - Datenschutzerklärung
Nach oben