HTML - Grundlagen

Begriffe und Erklärungen

Html

(=Hypertext Markup Language)

Wird dazu benutzt das Grundgerüst einer Website zu programmieren und einen Text in dieser zu formatieren.

Tags

sind Platzhalter die einen bestimmten Bereich markieren. Sie weden in Tagklammern <> geschrieben und vom Browser nicht angezeigt. Mit ihnen wird die Website oder der Text formatiert. Ein Beispiel

 <font> Text </font> 
Attribute oder Parameter

ergänzen einen Tag und verändern somit bestimmte Eigenschaften eines Tags. Ein Beispiel

 <font size="+4"> Text </font> 

Beim Beispiel wäre der Teil size=„+4“ das Attribut und sagt dem Tag font, dass die Schrift innerhalb dieses Tags auf die Größe „4“ setzen soll.

(=Kopf einer Html-Seite) Im Head sind Detailinformationen über die HTML-Seite enthalten. Beispiele dafür sind:

Body

(=Körper der Html-Seite) Im Body stehen der anzuzeigende Text der Html-Seite und die Tags mit ihren Attributen.

WWW

(=World Wide Web) Wird oft als Synonym für „Internet“ benutzt, obwohl das WWW nicht so viele Möglichkeiten bietet wie das Internet. Manche Optionen im Internet sind im WWW gar nicht enthalten z.B. E-Mail.

Server

sind Computer die im Dauerbetrieb laufen und anderen Computern bestimmte Dienstleistungen ermöglichen. Ein Server, der mit dem Internet verbunden ist, nennt man auch Webserver. Meistens speichert man Websites oder Dateien, die man downloaden kann, auf ihnen.

Download/ Upload
URL

ist eine Adresse einer Internetresource (Webadresse, z.B. Internetseite), die dem Browser sagt wonach er suchen soll.

Domain

sind die Kürzel, die am Ende einer Url stehen. Sie geben den Zweck oder das Land einer Website an. z.B.:

Domainname Bedeutung
.at Österreich
.de Deutschland
.ch Schweiz
.uk England
.com kommerzieller Anbieter
.eu Europa
.org nicht kommerzielle Organisationen
.ac Schulen/ Universitäten
.net für Netzverwaltungseinrichtungen

dies waren/sind einige reservierte Top-Level-Domains, seit einiger Zeit sind alle „Endungen“ frei zugänglich.

Grundgerüst einer Html-Seite

Head
<head>
<title></title>
<meta name="author" content="#">
</head>

Zwischen die „title“ tags schreibt man den Namen der Seite. Auch in den Head kommen so genannte Metadaten die Informationen über den Autor und den Inhalt enthalten.

Body
<body>Hier stehen der Text und die Tags</body>

In den Body schreibt man den sichtbaren Text und die nicht sichtbaren Tags zum Formatieren. Wichtig ist es die Tags gut zu gliedern und darauf zu achten das man auch alle Tags wieder schließt und man selbst noch weiß welcher Tag was bewirkt und auf wen er wirkt.

Gliederung

Zum Gliedern des Textes können die Tags <br> und <p> verwendet werden. <br> bewirkt einen Zeilenumbruch und <p> markiert einen Absatz. wichtig <p> muss auch wieder mit </p> geschlossen werden wobei man <br> nicht schließen muss.

Tags und Attribute

Tags die sich direkt auf den Text auswirken
<b></b>

(bold) bewirkt, dass der Text fett angezeigt wird.

<i></i>

(italic) bewirkt, dass der Text kursiv angezeigt wird.

<u></u>

(underline) bewirkt, dass der Text unterstrichen wird.

<s></s>

(strike) bewirkt, dass der Text durchgestrichen wird.

<tt></tt>

(teletype) bewirkt, dass der Text in Schreibmaschienschrift angezeigt wird.

<sup></sup>

(superscript) zeigt einen hochgestellten Text.

<sub></sub>

(subscript) zeigt einen tiefgestellten Text.

weitere Tags und Attribute
<font></font>

wird für alle Änderungen am Text verwendet. Die wichtigsten Attribte:

<font size="+1"></font>

Das Attribut „size“ bestimmt die Größe der Schrift.+ wird verwendet um die Schrift zu vergrößern und die Zahl gibt den Grad an in dem das geschieht. Man könnte auch - verwenden um den Text zu verkleinern.

 <font face="arial"></font>

Das Attribut „face“ wird verwendet um die Schriftart anzugeben. Man sollte besser nur die gängigsten Schriftarten verwenden wie Arial, Times new Roman, Comic sans ms,…

<font color="gold"></font>

Das Attribut „color“ wird dazu verendet die Farbe des Textes anzugeben. Dazu kann man die wichtigsten Farbnamen verwenden wie gold, silver, red, blue, yellow, green,… und auch den Hexadezimalcode einer Farbe nach einer Raute wie z.B. color=„#FF00FF“
Man kann nicht nur den Tag „font“ durch ein Attribut ergänzen denn grundsätzlich kann man das mit jedem Tag tun. Jedoch um eine Schrift zu formatieren mit den hier angegebenen Attributen verwendet man den font Tag. übrigens font (=Schrift)

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

sind Überschriften in ihrer Wertigkeit fallend. Man kann die position der Überschrift auch ändern mit:

<h1 align="center"></h1>

Jetzt wäre die Überschrift zentriert. man kann sie auch anders positionieren:

Attribut Bedeutung
left linksbündig
right rechtsbündig
center zentriert

Man kann die Position der Schrift auch am div (ist ein Tag der einen Block definiert) Tag manipulieren.
Kommentare die der Browser nicht anzeigt werden wie folgt eingefügt:

<!-- Kommentar -->

Kommentare sind vor allem bei größeren Html Seiten wichtig damit man später noch weiß welcher Tag für was zuständig ist.

Links werden mit Hilfe folgendem Tags eingefügt:

<a href="URL">Name des Links</a>

Wenn man möchte das sich der Link in einem neuen Fenster öffnet muss man noch das Attribut

target="_new"

einfügen.

Listen

Man kann zwischen zwei Formen von Listen unterscheiden: <ul> ist eine unterordnende Liste
<ol> ist eine geordnete Liste
<li> ist ein Listenpunkt
den ul Tag kann man mit type=„“ ergänzen.
„square“ bewirkt ein quadratisches Zeichen als Listenpunkt
„disc“ bewirkt ein rundes Zeichen
„circle“ bewirkt ein rundes ausgefülltes Zeichen.
man kann auch den ol Tag mit dem Attribut type=„“ ergänzen:
„I“ bewirkt eine Liste die mit römischen Zahlen durchnummeriert ist
„A“ bewirkt eine Liste die mit Goßbuchstaben durchnummeriert ist
„a“ bewirkt eine Liste die mit Kleinbichstaben durchnummeriert ist
„1“ bewirkt eine Liste die mit Zahlen durchnummeriert ist.
wenn man z.B. eine Liste will die mit Zahlen durchnummeriert ist sieht das so aus:

<ol> 
 <li> 1.Listenpunkt </li>
 <li> 2.Listenpunkt </li> 
 <li> 3.Listenpunkt </li>
</ol>
 
===== Tabellen =====
 
Eine Tabelle beginnt mit <table> und endet mit </table>
<tr> </tr> kennzeichnet eine Zeile \\ 
<td> </td> kennzeichnet eine Spalte \\
z.B.
<code html>
<table>
  <tr>
    <td>Punkt der Tabelle links oben
    </td>
    <td>Punkt der Tabelle rechts oben
    </td>
  </tr>
  <tr>
    <td>Punkt der Tabelle links unten
    </td>
    <td>Punkt der Tabelle rechts unten
    </td>
  </tr>
</table>

Einbinden von Grafiken

Grafiken kann man in einer Html wie folgt einbinden:

 <img src="" alt="" border="0" width="" height="" align="center" >

bei src muss man den Namen des Bildes angeben. Achtung das Bild muss sich im selben Ordner befinden sonst funktioniert es nicht.
alt (=alternativer Name) bei alt kann man einen Namen einfügen der angezeigt wird wenn man mit dem Cursor über dem Bild steht.
width gibt die breite des Bildes in Pixel an.
heigh gibt die höhe des Bildes in Pixel an.
align gibt die Position des Bildes an.

Links/Quellen

weiterführende Links und Tutorials zum leichteren Einstieg und für die Vertiefung