====== 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 Text
== Attribute oder Parameter ==
ergänzen einen Tag und verändern somit bestimmte Eigenschaften eines Tags. Ein Beispiel Text 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.
== Head ==
(=Kopf einer Html-Seite) Im Head sind Detailinformationen über die HTML-Seite enthalten. Beispiele dafür sind:
* Titel der Seite
* Metadaten
* Skriptinformationen (z.B. Link zu einer externen CSS- oder Javaskript-Datei)
* Styleinformationen
== 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 ==
* Mit Downlaod bezeichnet man den Vorgang des Speicherns von Daten von einem Webserver auf die eigene Festplatte.
* Mit Upload bezeichnet man den Vorgang des Hochladens von Daten vom eigenen Computer auf einen Webserver.
== 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 ==
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 ==
Hier stehen der Text und die Tags
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
und
verwendet werden.
bewirkt einen Zeilenumbruch und
markiert einen Absatz. wichtig
muss auch wieder mit
geschlossen werden wobei man (bold) bewirkt, dass der Text **fett** angezeigt wird. \\ (italic) bewirkt, dass der Text //kursiv// angezeigt wird. \\ (underline) bewirkt, dass der Text __unterstrichen__ wird. \\ (strike) bewirkt, dass der Text (teletype) bewirkt, dass der Text in ''Schreibmaschienschrift'' angezeigt wird. \\ (superscript) zeigt einen hochgestellten Text. \\ (subscript) zeigt einen tiefgestellten Text.
== weitere Tags und Attribute ==
wird für alle Änderungen am Text verwendet. Die wichtigsten Attribte:
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.
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,...
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)\\
sind Überschriften in ihrer Wertigkeit fallend. Man kann die position der Überschrift auch ändern mit: 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:
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 =====
Links werden mit Hilfe folgendem Tags eingefügt:
Name des Links
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:
- 1.Listenpunkt
- 2.Listenpunkt
- 3.Listenpunkt
===== Tabellen =====
Eine Tabelle beginnt mit und endet mit
kennzeichnet eine Zeile \\
kennzeichnet eine Spalte \\
z.B.
Punkt der Tabelle links oben
Punkt der Tabelle rechts oben
Punkt der Tabelle links unten
Punkt der Tabelle rechts unten
===== Einbinden von Grafiken =====
Grafiken kann man in einer Html wie folgt einbinden:
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
* [[http://de.selfhtml.org/navigation/html.htm|SelfHtml]]
* [[http://de.html.net/tutorials/html/|deutsches Tutorial]]
* [[http://www.w3schools.com/html/|HTML Vertiefung (englische Seite)]]
* [[http://de.selfhtml.org/navigation/stichwort.htm|Stichwortverzeichnis HTML]]
* [[http://www.css4you.de/|CSS - Referenz]]
* [[http://www.tgleissner.onlinehome.de/html_testfragen.htm|HTML - Quiz]]