GCT2
Grundlagen Computer-Technik
Elemente
Das anchor-Element <a> für eine Verknüpfung
<a href="kontakt.html">etwas Text</a>
Tag
href
"Hypertext
reference"
URL
Link-Zielort
Angezeigter Link-Text
Interner Link
<a href="kontakt.html">etwas Text</a>
relative URL
Externer Link
<a href="https://www.google.com/">etwas Text</a>
absolute URL
URL
Uniform Resource Locator
Der Doctype wird zu Beginn eines HTML-Dokuments angegeben.
Er definiert die mögliche Struktur eines Dokuments, sowie erlaubte Elemente/Tags.
Der Doctype für HTML5 ist <!DOCTYPE html>
Einige Unterschiede von HTML5 zu 4:
| Neue Elemente |
<section> <article> <header> <footer> <mark> <nav> <figure> |
| Entfernte Elemente |
<basefont> <big> <center> <font> <strike> <tt> |
| Neue Attribute |
required autofocus placeholder async reversed |
| Entfernte Attribute |
target usemap align bgcolor noshade border |
Wie kann ich sicherstellen, dass Umlaute und Sonderzeichen korrekt dargestellt werden?
Im <head> notiert man
<meta charset="utf-8" />
Element/Tag
Attribut-Name
Attribut-Wert/Value
Zur Strukturierung von Texten gibt es eine Reihe von Tags.
Grundlegende Elemente
<h1> <h2> <h3> <h4> <h5> <h6>
<p> <ul> <ol> <li>
<div>
<em> <strong> <a> <abbr> <time>
<span>
Block-Elemente
<h1> <h2> <h3> <h4> <h5> <h6>
<p> <ul> <ol> <li>
<div>
<em> <strong> <a> <abbr> <time>
<span>
Block-Elemente erzeugen einen eigenen Absatz im Textfluss.
Inline-Elemente
<h1> <h2> <h3> <h4> <h5> <h6>
<p> <ul> <ol> <li>
<div>
<em> <strong> <a> <abbr> <time>
<span>
Inline-Elemente erzeugen keinen Absatz im Textfluss. Sie stehen nur innerhalb von Block-Elementen.
Sie werden verwendet, um Inhalte innerhalb von Block-Elementen zu strukturieren.
<h1> <h2> <h3> <h4> <h5> <h6>
Überschriften verschiedener Ebenen
<h1>Nachrichten</h1>
<h2>Obamas Vize muss punkten</h2>
<h2>Japan ertrinkt in Schulden</h2>
<p>
Textabsätze, Abschnitte
<p>In seiner Heimat sind die Meinungen
geteilt. Georg Blume beschreibt, wie
es Mo Yan gelang, sich inmitten der
kommunistischen Öffentlichkeit den
Nobelpreis zu erschreiben</p>
<ul> <ol> <li>
Listen und Listeneinträge
<ul>
<li>Amerika verliert den Glauben</li>
<li>Der Nazi in Hörsaal 10</li>
<li>Freiwillig ist niemand Prostituierte</li>
</ul>
<ul> <ol> <li>
Listen und Listeneinträge
<ol>
<li>The Fellowship of the Ring</li>
<li>The Two Towers</li>
<li>The Return of the King</li>
</ol>
<ul>
- Amerika verliert Glauben
- Nazi in Hörsaal 10
- Freiwillig Prostituierte
<ol>
- Fellowship
- Two Towers
- Return o. t. King
Innerhalb von <li>-Elementen kann weiterer HTML-Code stehen, zB. Links (Navigation), oder Bilder und Text (Instagram)
<div>
Ein generischer Container, der für die Gruppierung von Elementen genutzt werden kann.
<div>
<h1>Über das DIV-Element</h1>
<p>Jede Art von Inhalt ist erlaubt.</p>
<p>Text, Bilder, Listen, Tabellen, etc.</p>
</div>
Inline-Elemente
<h1> <h2> <h3> <h4> <h5> <h6>
<p> <ul> <ol> <li>
<div>
<em> <strong> <a> <abbr> <time>
<span>
<em> <strong>
Betonung und Semantik
<p>In seiner Heimat sind die Meinungen
geteilt. Georg Blume beschreibt, wie
es Mo Yan gelang, sich <strong>inmitten
der kommunistischen Öffentlichkeit</strong>
den <em>Nobelpreis</em> zu erschreiben</p>
<a>
Verknüpfungen, Links, Navigation
<p>Knöterich wächst im
Freien. Die Schlingpflanze wird auch
<a href="http://en.wikipedia.org/wiki/
Persicaria">Architektentrost</a> genannt</p>
<abbr>
Abkürzungen
<p>Rückschlag, das ist ein Begriff, den die
<abbr title="Central Intelligence Agency">CIA</abbr>
für die unbeabsichtigten Folgen amerikanischer
Politik am 12. Oktober geprägt hat.</p>
<time>
Zeitangaben
<p>Rückschlag, das ist ein Begriff, den die
CIA für die unbeabsichtigten Folgen amerikanischer
Politik am <time datetime="2012-10-12">12.
Oktober</time> geprägt hat.</p>
<span>
Wie das <div> ein generischer Container, allerdings für die Gruppierung von Inline-Elementen.
<p><span lang="de">Und dann sagte Stackoverflow
zu Goldlöckchen:</span>
<span lang="en">"Your html file will
be saved as a new document."</span></p>
Beginne mit Aufgabe 2.