HTML-Tutorial für Anfänger
Sicherlich ist der eine oder andere unter euch bereits auf den Begriff „HTML“ gestoßen – doch was ist HTML genau und was kann ich damit alles machen? Dieser Frage werde ich heute nachgehen und versuchen, die Basics der HTML-Welt zu erklären.
- Head/Body/Footer
Im ersten Schritt möchte ich auf die Begriffe „Header“, „Body“ und „Footer“ eingehen, denn diese bilden das Gerüst für jede HTML Website.
Im <head> befinden sich sogenannte Metadaten, also Daten über das HTML Dokument. Dieser Bereich wird in der Regel nicht angezeigt und definiert für gewöhnlich Titel, Styles, Links, Scipts und andere Meta-Informationen. Folgende Begriffe kommen in den <head>: <title>, <style>, <meta>, <link>, <script>, und <base>.
Im <body> finden wir wiederum das Gerüst für die Website. Hier kommen Tabellen und Inhalte wie zum Beispiel Texte ins Spiel. Wichtig ist, dass am Ende der <body> so geschlossen wird: </body>.
<footer>:
Im Footer findet man für gewöhnlich Informationen wie zum Beispiel das Impressum, einen „zurück zum Anfang“-Anker, Werbung, etc.
- Überschriften:
Überschriften werden im Body wie folgt definiert:
<h1>Überschrift 1</h1>
<h2>Überschrift2</h2>
<h3>Überschrift3</h3>
<h4>Überschrift4</h4>
<h5>Überschrift5</h5>
<h6>Überschrift6</h6>
Der Überschriften HTML Code sollte wirklich nur für Überschriften, und nicht zum Beispiel zur Großschreibung von Stichwörtern verwendet werden – hierfür gibt es andere Optionen, die ich später noch anführen werde.
- Absätze und Zeilenumbrüche
Um einen Zeilenumbruch einzufügen, gebt <br> ein, für einen Absatz fügt ihr <p> am Anfang des Absatzes ein, und am Ende </p>.
- Links
Um einen Link in eine Homepage einzubauen, gibt es mehrere Möglichkeiten. Die einfachste ist diese:
<a href=“URL“>TEXT</a>
unter „URL“ gebt ihr die Seite an, die aufgerufen werden soll (also z.B. http://www.google.com), unter „TEXT“ könnt ihr den Link benennen wie ihr wollt.
Das Target-Attribut gibt an, wie der Link geöffnet werden soll: in einem neuen Fenster, Tab, etc. oder im selben Fenster (dann lässt man den Target-Teil weg):
<a href="http://google.com" target="_blank">öffnet Google in einem neuen Tab bzw. Fenster</a>
_self = im selben Fenster
_top = öffnet den Link im ganzen Fenster (dient dazu, falls die Website in einem Frame festsitzt)
Auch kann ein Bild als Link verwendet werden, hier geht man wie folgt vor:
<a href="http://www.bildlink!!!.com">
<img src="smiley.gif" alt="HTML by WA" style="width:breite in px;height: höhe in px;border:0">
</a>
- Textformatierung
Ähnlich wie bei den Farbcodes muss man auch eine Ausnahme bei der Textformatierung machen: bei HTML gibt es leider keinen Button auf den ihr klicken könnt, um einen Buchstaben oder ein Wort zu unterstreichen, dies funktioniert wieder mit HTML Codes:
<u>Unterstrichen</u> (underlined)
<i>Kursiv</i> (italic)
<b>Fettgedruckt</b> (bold)
- Kommentar in den HTML Code einfügen
Dies ist ganz nützlich, falls ihr den HTML Code mit jemandem teilen möchtet und einen kleinen Kommentar einfügen wollt; dieser ist auf der Website dann nicht ersichtlich, wohl aber im Quelltext:
<!—Kommentar einfügen -->
- Listen erstellen
Wollt ihr eine kleine Liste mit Bulletpoints bzw. Aufzählungspunkten haben, so könnt ihr diese wie folgt erstellen:
<li>Erster Punkt</li>
<li>Zweiter Punkt</li>
<li>Dritter Punkt</li>
- Tabellen:
Tabellen sind durch den <table> - Tag definiert und werden in Tabellen-Reihen mit einem <tr> geteilt Tabellen-Reihen werden wiederum in Tabellen-Daten geteilt und das mit dem <td> -Tag.
Und so sieht das dann aus:
<table style="width:100%">
<tr>
<td>Name1</td>
<td>Nachname1</td>
<td>Alter</td>
</tr>
<tr>
<td>Name2</td>
<td>Nachname2</td>
<td>Alter2</td>
</tr>
</table>
iFrame
Ein iFrame dient dazu, eine Website in einer Website darzustellen. Mit folgendem HTML Code könnt ihr ein iframe erstellen:
<iframe src="Seite.htm" width="BREITE IN PIXEL" height="HÖHE IN PIXEL"></iframe>
Weiterführende Links zu diesem Thema
http://www.w3schools.com/html/
http://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML-Einstieg
http://www.html-seminar.de/einsteiger.htm
