Home » Webdesign » HTML 5 Tutorial
- Anzeige -
Software Asset Management beim Fachmann

HTML 5 Einsteiger Tutorial

Ich muss mich nun endlich am Riemen reissen! Warum? Nein, abnehmen sollte ich zwar auch, aber meine HTML-Kenntnisse, die peinlicherweise noch aus dem Jahr 2000 stammen, müssen dringend aufgefrischt und modernisiert werden. Freundlicherweise durfte ich vom Arbeitgeber her einen Kurs besuchen. Ich bin schwer motiviert ;-)

Strenge Trennung von Inhalt und Aussehen ist angesagt und HTML5. Frontpage wird vom Rechner deinstalliert, HTML und Stylesheets werden von Hand mit Notepad++ gecodet.

Hier kommen ein paar Notizen zum Umstieg. Grundkenntnisse im HTML sind vorrausgesetzt

Begriffe

HTML

HTML steht für "HyperText Markup Language". Sie definiert die Syntax zum Erzeugen von Webdokumenten.

XHTML

XHTML steht für "eXtensible Markup Language". XHTML hat strengere Regeln als HTML. Beispielweise müssen in XHTML Elemente klein geschrieben werden. Elemente ohne abschliessendes </..>-Tag (z.B. imG) werden durch <img /> abgeschlossen. Diese Schreibweise ist aber mittlerweile auch im HTML 5 üblich. XHTML 1.0 ist praktisch identisch mit HTML 4.01.

CSS

CSS steht für "Cascading Stylesheet" und bezeichnet eine Sprache, mit der das Aussehen von HTML-Elementen definiert werden kann. Generell sollte man den Inhalt vom Layout strikt trennen (leider auf meinen Seiten noch zu wenig konsequent durchgeführt). Das Werkzeug hierzu ist CSS.

XML

XML steht für Extensible Markup Language. Wie bei HTML und XHTML werden Daten in Elemente, den sog. Tags mit <element> und

</element>

eingeschlossen. XML wird jedoch hauptsächlich für die strukturierte Beschreibung von Daten verwendet und die Entwickler können sich eigene Tags ausdenken. XML dient also hauptsächlich dem Dateiaustausch.

HTML-Standards

Neben HTML 5 ist auch noch HTML 4.01 in Gebrauch. HTML 4.01 gibt es in drei Ausprägungen. Transitional, Strict und Frameset.

Das HTML 5 Grundgerüst

<!DOCTYPE html> 
<html lang="de">
   <head>
      <title></title>
      <meta charset="utf-8" />
      <link rel="stylesheet" href="p.css" type="text/css" media="screen" />
   </head>
   <body>
   </body>
</html>
<!DOCTYPE html>
HTML-Definition für HTML5
<html>
Notwendig
<title></title>
Notwendig, definiert den Titel (Zwischen den Tags). Für einen gute Position in den Suchergebnnissen sollten Sie ausserdem eine Zeile wie z.B."<meta name="Description" content="Hier beschreibe ich den Inhalt meiner Seite." /> mit aufnehmen. Das ist i. d. R. die Beschreibung, die in den Suchergebnissen zu der jeweiligen Seite erscheint.
<meta charset="utf-8" />
Dies ist keine notwendige HTML-5 Anweisung. Wenn man jedoch seinen Editor auf UTF8 umstellt und die Seite entsprechend kodiert, kann man sich spätere mühsame Umlautkodierungen sparen.
<link rel="stylesheet" href="p.css" type="text/css" media="screen" />
Auch dies ist keine notwendige HTML-5 Anweisung. Da man jedoch streng Content von Layout trennen sollte, darf keine HTML Seite ohne Stylesheet auskommen. Inplace-Stylesheet und ähnliches sollte man ebenfalls unterlassen. Die Pfade sind natürlich anzupassen.
</head>
Notwendig
<body>
Notwendig, hier dahinter kommt der eigentliche Seitenhinhalt.
</body>
Notwendig
</html>
Notwendig

Die wichtigsten HTML-Tags

p - Absatz

<p>Dies hier ist ein ganzer Absatz. Er macht nicht viel Sinn, aber so 
ist das halt, wenn es auf den Text nicht ankommt</p>

- Buchempfehlung -

Wenn Sie schon ein paar HTML-Kenntnisse habe, ist das ein tolles Buch. Es sollte aber Seite für durchgearbeitet werden und ist kein Nachschlagewerk.

br - Zeilenumbruch

<p>Dies hier ist ein ganzer Absatz. <br />
Er ist mit br auseinandergerissen.</p>

Wichtig zu wissen: Bei Tags, die ein Anfangs- und ein End-Tag haben, wird mit </tag> geschlossen. Besteht ein Tag wie br nur aus einem Tag, dann wird die zweite Eckige Klammer /> (also z.B: <br />) geschlossen.

h1-h6 - Überschrift

<h1>Ich bin eine Überschrift vom Grad 1</h1>
<h2>Ich bin eine Überschrift vom Grad 2</h2>
<h3>Ich bin eine Überschrift vom Grad 3</h3>
<h4>Ich bin eine Überschrift vom Grad 4</h4>
<h5>Ich bin eine Überschrift vom Grad 5</h5>
<h6>Ich bin eine Überschrift vom Grad 6</h6>

div - Abschnitt

Mit div wird ein Abschnitt definiert. Dies brauch man z.B. um die Navigation von der Seite zu trennen. Div werden erst mit CSS und IDs richtig interessant.

strong - Hervorheben

<p>Dies hier ist <strong>hervorgehoben.</strong></p>

Wie der Browser den hervorgehobenen Text darstellt, ist nicht festgelegt. Auch hier definiert man die Darstellung im CSS.

em - Textbetonung

<p>Dies hier ist <em>hervorgehoben.</em></p>

Wie der Browser den betonten Text darstellt, ist nicht festgelegt. Auch hier definiert man die Darstellung im CSS.

code - Programmcode

<code>a=a+1</code>

code kann z.B. dafür verwendet werden, Programmlistings darzustellen.

cite - Zitat

<p>Dies hier ist <cite>hervorgehoben.</cite></p>

Wie der Browser den Zitats-Text darstellt, ist nicht festgelegt. Auch hier definiert man die Darstellung im CSS.

blockquote - Zitat

<blockquote>
<p>Dies ist ein langes Zitat, z.B. von einer anderen Webseite.</p>
</blockquote>

Auch Blockquote wird im allgemeinen als Zitat beschrieben. Blockquote ist im Prinzip einfach eingerückter Text, der sich dazu eignet, z.B. von einer anderen Quelle zu zitieren.

pre - Vorformatierter Text

<pre>Dies ist vorformatierter Text</pre>

Vorformatierter Text wird genau so dargestellt, wie man ihn eingibt. Ohne CSS erscheint er in einer Schriftart mit festem Abstand (i.d. R. Courier).

Listenelement, ungeordnet

<ul>
 <li>Ein Punkt</li>
 <li>Noch ein Punkt</li>
 <li>Und noch einer</li>
</ul>

Eine "ungeordnete" Liste ist eine einfach Aufzählung. Die Art der Aufzählungezeichen passt man hier mittels CSS an.

Listenelement, geordnet

<ol> <li>Erster Punkt</li> <li>Zweiter Punkt</li> <li>Dritter Punkt</li> </ol>

Eine "geordnete" Liste ist eine Nummerierung.

Möchte man die Listen verschachteln, verschachtelt man die Tags entsprechend. Die Unterlisten müssen aber jeweils in einem Listenelement eingeschlossen sein. Beispiel:

<ul>
    <li>
        <ul>
            <li>...</li>
        </ul>
    </li>
    <li>
      <ul>
        <li>...</li>
      </ul>
 
   </li>
   <li>
    <ul>
      <li>...</li>
    </ul>
  </li>
</ul>

Definitionlisten

So gut wie nie brauche ich die:

<dl>
 <dt>www.it-zeugs.de</dt>
 <dd>www.it-zeugs.de ist die weltbeste Website zum Thema IT.</dd>
 </dl>

Eingeschlossen wird die Definitionsliste mit dem dl-Tag. dt schliesst den zu erklärenden Terminus ein. dd wiederum schliesst die eigentliche Erklärung ein. Die Darstellung kann auch hier von Browser zu Browser unterschiedlich sein. I. d. R. wird die Erklärung eingerückt. Wie praktisch überall kann auch hier die Darstellung mittels CSS angepasst werden.

Links

<a href="http://wwww.heise.de" target="_blank" title="heise.de">Homepage Heise</a>

Der Link oben verweist auf www.heise.de. Die Target-Angabe bewirkt, dass die Seite in einem neuen Browser-Tab aufgeht. Der Title wird angezeigt, wenn man mit der Maus darauf fährt. Für die Suchmaschinenoptimierung ist es übrigens wichtig, dass Sie einen vernünftigen Ankertext, das wäre oben Homepage Heise, wählen.

Bilder

<img src="http://wwww.heise.de/image/bild.jpg" 
widht="10" height="10" title="Logo Heise" img />

Der Title sollte hier auch wieder zum Zwecke der Suchmaschinenoptimierung gesetzt werden. Man schafft es damit besser in die Bildersuche. width und height sind mit Vorsicht zu gebrauchen. Man sollte möglichst die Bilder in der korrekten Auflösung vorliegen haben.

Tabellen

Tabellen sollten nicht mehr für Layoutarbeiten verwendet werden. Dies sollte ausschliesslich via CSS gemacht werden. Trotzdem braucht man Tabellen i. d. R. noch für ihren eigentlichen Zweck, also um Tabellen darzustellen.

Hier ein einfaches Beispiel aus dem Kurs zur Erklärung:

  <table>
   <thead>
    <tr><td colspan="4">Feiertage Stadt Zürich 2014</td></tr>
     <tr>
     <th>Tag</th>
     <th>Wochentag</th>
     <th>Woche</th>
     <th>Feiertag</th>
    </tr>
   </thead>
   
   <tfoot>
    <tr><td colspan="4"><em>Irrtümer vorbehalten. Keine Garantie für Korrektheit der Daten.</em></td></tr>
       <tr><td colspan="4">Quelle: www.feiertagskalender.ch</td></tr>
   </tfoot>
   <tbody>   
    <tr><td>28. April 2014 </td><td>Mo </td><td>KW 18</td><td> Sechseläuten</td></tr>
    <tr><td>01. Mai 2014   </td><td>Do </td><td>KW 18</td><td> Tag der Arbeit</td></tr>
    <tr><td>29. Mai 2014 </td><td>Do </td><td>KW 22</td><td> Auffahrt</td></tr>
    <tr><td>08. Juni 2014 </td><td>So </td><td>KW 23</td><td> Pfingsten</td></tr>
    <tr><td>09. Juni 2014 </td><td>Mo </td><td>KW 24</td><td> Pfingstmontag</td></tr>
    <tr><td>01. August 2014 </td><td>Fr </td><td>KW 31</td><td> Nationalfeiertag Schweiz</td></tr>
    <tr><td>15. September 2014 </td><td>Mo </td><td>KW 38</td><td> Knabenschiessen</td></tr>
    <tr><td>25. Dezember 2014 </td><td>Do </td><td>KW 52</td><td> Weihnachten</td></tr>
    <tr><td>26. Dezember 2014 </td><td>Fr </td><td>KW 52</td><td> Stephanstag</td></tr>
   </tbody>
  </table>
table
Das table-Tag ist das äusserste Tag und schliess die Tabelle ein. Es muss verwendet werden.
tablehead
Das tablehead-Tag definiert einen Tabellenkopf. Es muss aber nicht verwendet werden.
tablebody
Das tablehead-Tag definiert den Tabellenhauptteil. Es muss aber nicht verwendet werden.
tablefoot
Das tablefoot-Tag definiert einen Tabellenfuss. Es muss aber nicht verwendet werden.

Die Reihenfolge von tablehead, tablebody und tablefoot kann man theoretisch vertauschen. Das dient aber nciht gerade der einfacheren Wartbarkeit der Seite.

tr
Das tr-Tag definiert die Zeile. Es muss verwendet werden.
td
Das td-Tag definiert die Spalte. Es muss verwendet werden.
rowspan, colspan
Mit rowspan kann man eine Zelle über mehrere Zeilen, mit volspan über mehrere Spalten aufspannen.

Umlautkodierung

Es gibt Situationen, da braucht man die Umlautkodierung dann doch noch. Hier die wichtigsten Elemente:

Zeichen HTML
" &quot;
& &amp;
< &lt;
> &gt;
  (Leerzeichen) &nbsp;
ä &auml;
Ä &Auml;
ö &ouml;
Ö &Ouml;
ü &uuml;
Ü &Uuml;
ß &szlig
[ &#91;
] &#93;

Eine sehr ausführliche Liste findet sich unter Mediaevent.de.

Kommentare

<!-- Dies ist der Text, der ein Kommentar ist -->

Formulare

Im Bereich der Formualare hat sich viel getan. Neue Typen, Felder können von HTML5-fähigen Browsern direkt validiert werden. Schauen Sie sich den folgenden Code an:

<!DOCTYPE html> 
	<html> 
	<head>
	<title></title>
	<meta charset="utf-8" />
	  
	</head>
	<body>
	 <form name="formular">
	  <input id="name" type="text" placeholder="Nachname" />
	  <input id="mail" type="email" placeholder="email@example.org" required />	
	  <input type="submit" value="Abschicken" formmethod="get" formaction="bla.php" formtarget="_selfquot" />
	 </form>
	 
	</body>
	</html>

Durch die Eingabe von "required" wird das Formular browserseitig überprüft. Die Verwendung des passenden Typs "email", wird sogar geprüft, ob die Eingabe Sinn macht.

Praktisch, nur bitte die alten Browser nicht dabei vergessen.

HTML5 bietet dreizehn neue Eingabetypen

Typ Verwendung
email E-Mail-Adresse
search Suchtext
url URL
tel Telefonnummer
datetime Datum und Uhrzeit UTC
datetime-local Datum und Uhrzeit
date Datum
month Datum mit Jahr und Monat
week Datum mit Jahr und Wochenzahl
time Uhrzeit
number Nummerischer Wert
range Nummerischer Bereich
color Farbe

CSS

Mit CSS (Cascading Stylesheet) wird dem langweiligen HTML das Layout hinzugefügt.

Beispiel-Code eines einfaches Styleshheets:

body
{
  font-family: Verdana, Sans-Serif, Arial, Helvetica;  
  background: #C0C0C0;
}

h1,
h2,
h3
{
  font-size: 18px;
  padding: 0;
  margin: 0;
  color: #004F9D;
  margin-bottom: 10px;
}

In diesem Stylesheet wird die Schriftart, der Hintergrund und im speziellen die Überschriften gesetzt.

id

IDs werden als Referenz für CSS (und Javascript) verwendet. Häufigster Einsatz ist das Festlegen von eindeutigen Bereichen in einer Homepage, die mit einem bestimmten Aussehen versehen werden sollen.

IDs können daher nur einmalig verwendet werden.

<div id="me">
<table>
	<tr>
		<td colspan="2"><h2>Hier schreibt:</h2></td>
	</tr>
	<tr>
		<td><img src="http://www.schlageter.ch/images/me.jpg" alt="Lars Schlageter"></td>
		<td>
		<p><a href="https://plus.google.com">Lars Schlageter</a><br>
		Geboren
		1969 in Deutschland<br>
		Lebt in der
		Schweiz im Kanton Aargau<br>
		Tätig in der IT</p></td>
	</tr>
</table>
</div>

Innerhalb eines DIV mit einer bestimmten ID können nun auch Unterelemente angespreochen werden. Im folgenden Beispiel wird mit...

#me a
	

...ein Link (a) im DIV mit ID "me" angesprochen. Ausserhalb des DIV würde die CSS-Answeiung nicht greifen.

#me a
{
  font-size: 10px;
  line-height: 12px;
  text-align: right;
}


#me table
{
 width: 180px;
 border: 0px;
 }


#me tr, #me td
{
 border: 0px;
 padding: 0px 0px;
 border-collapse:collapse; 
}

#me img 
{
  border: 1px solid black;
}

#me h2
{
  font-size: 12px;
  font-weight: bold;
  text-align: center;
}

class

Classes werden als Referenz für CSS verwendet. Im Gegensatz zu ids sind sie mehrfach verwendbar.

<table class="mytab">
	<tr class="mytab">
		<th class="mytab">Zeichen</th>
		<th class="mytab">In HTML kodiert</th>		
	</tr>
	<tr class="mytab">
		<td class="mytab">"</td>
		<td class="mytab">&quot;</td>
	</tr>
	<tr class="mytab">
		<td class="mytab">&</td>
		<td class="mytab">&amp;</td>
	</tr>
</table>

Auch hier kann man vom CSS aus Elemente innerhalb einer Klasse ansprechen. Beispiel:

table.mytab 
{
 text-align: center;
 margin-left: auto;
 margin-right: auto;
 border: 1px solid black;
 padding: 5px 5px;
 border-collapse: collapse;
}

tr.mytab  th.mytab, td.mytab
{
 border: 1px solid black;
 padding: 5px 5px;
 border-collapse: collapse;
}

Beispiele der wichtigsten CSS-Anweisungen

padding: 0px;
Innenabstand zum Rand
padding-left:10px;
Linker Innenabstand zum Rand
padding-right:60px;
Rechter Innenabstand zum Rand
padding-top: 12px;
Oberer Innenabstand zum Rand
padding-bottom: 12px;
Unterer Innenabstand zum Rand
margin: 0px;
Aussenabstand zum Rand
margin-top: 12px;
Oberer Aussenabstand zum Rand
margin-bottom: 20px;
Unterer Aussenabstand zum Rand
font-size: 14px;
Schriftgrösse
text-size:80%;
Schriftgrösse im Verhältnis zur normalen
font-family: Verdana, Sans-Serif, Arial, Helvetica;
Schriftart
font-weight: bold;
SchriftgrösseFette Schrift
text-align: right;
Textausrichtung
text-align: center;
Textausrichtung
background: #C0C0C0;
Hintergrund, auch möglich: transparent - Das Element hat keine Farbe - inherit - Der Wert des Elternelements wird geerbt
width: 980px;
Breite
height: 80px;
Höhe
position: relative;
Postion im Dokument
clear: both;
Beendet das Umfließen andere Elemente
border: 1px solid black;
Durchgehender schwarzer Rand rings rum
text-align: center; margin-left: auto; margin-right: auto;
Zentrierung - z.B. für eine Tabelle
padding: 5px 5px;
Abstand, z.B. für eine Tabelle
border-collapse: collapse;
Ränder fallen zusammen, z.B. für eine Tabelle
background-image: url(images/LM_arrow-right.gif) !important;
background: no-repeat 99% 50%;
overflow: hidden;
Behandlung von aus Bereichen überstehenden Elementen
min-height: 300px;
Minimale Höhe

Rahmen um Bild - Beispiel

#me img 
{
  border: 1px solid black;
}

Definition Link - Beispiel

a:link
{
  color:#000066;
  background:inherit;
}

a:hover,
a:focus
{
  color: #FF0000;
  background:inherit;
  text-decoration: underline;
}

a:visited
{
  color: #993333;
  background:inherit;
}

Einfaches Print-CSS

Wenn man beim Ausdruck bestimmte Bereiche nicht mit drucken will, kann man das ebenfalls über CSS steuern. Im folgenden Beispiel werden die Elemente mit der ID "header", "menu", "sidebar" und "pageend" nicht mit gedruckt.

@media print {
#header,#menu,#sidebar,#pageend
{display:none;} 
}

Quellen, Referenzen



War der Artikel hilfreich? Bitte liken und sharen. Danke!

it-zeugs.de ist auch auf Facebook...

Schreibe einen Kommentar - aber kein SPAM - der wird zuverlässig gefiltert!

  • Erforderliche Felder sind markiert mit *.

If you have trouble reading the code, click on the code itself to generate a new random code.