HTML, CSS, Infos

Details
Kategorie: Modul I - HTML & CSS

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