Basiselemente
Textelemente:
Beispiel
(
HTML-Quelle
)
beschreiben logische Bedeutung eines Textteils
Beispiele
Tag
Bedeutung
Darstellung (meistens)
em
betont
kursiv
cite
Zitat
eingerückt, kursiv
code
Programmtext
nicht-proportionaler Font
sub
Index
kleiner, tiefgestellt
sup
Exponent
kleiner, hochgestellt
Einbinden von Bildern:
mit
img
-Tag, ohne Endtag
<img src="peter.jpg" width="400" height="200" alt="Porträt von Peter">
wird wie ein großer Buchstabe behandelt (also als Textelement)
mögliche Bildquellen
Datei im gleichen Verzeichnis (
"photo.jpg"
)
Datei in anderem Verzeichnis (
"../bilder/photo.gif"
)
Datei direkt aus dem Netz (
"http://www.bilder.de/photo.jpg"
)
Copyrights beachten!
width
,
height
angezeigte Größe des Bildes in Pixel
u.U. verzerrte Darstellung
Ladezeit nur von der Originalgröße abhängig!
alt
alternativer Text (Vorschau oder für Textbrowser)
obligatorisch!
Absatzelemente:
Beispiel
(
HTML-Quelle
)
beschreiben Elemente zur Gliederung
Grundelement
<p>
(
Paragraph
) normalerweise durch Zeilenumbruch und Leerzeile dargestellt
Positionierung (links-, rechtsbündig, zentriert) möglich mit Style-Attribut
style="text-align:right;"
Zeilenumbruch erzwingen mit
<br>
(ohne End-Tag)
vorformatierter Text mit
<pre>
Überschriften mit
<h1>
,
<h2>
...
<h6>
semantische Strukturierung einer Seite mit (u.a.)
main
,
header
,
footer
,
nav
Listen:
Beispiel
(
HTML-Quelle
)
ganze Liste
unnummeriert
<ul>
nummeriert
<ol>
Elemente der Liste
jeweils mit
<li>
eingeleitet
Darstellung
eingerückt
jedes Element in einzelner Zeile
vor jedem Element Listensymbol (Kreis, Kästchen) oder Nummer
Schachtelung
Liste darf nicht direkt in einem Absatz
<p>
stehen
jedes Listenelement darf Absätze enthalten
Stilarten
Listensymbol oder Art der Nummerierung durch Style-Element
list-style-type
Werte für
<ul>
:
disc
,
circle
,
square
,
none
Werte für
<ol>
:
decimal
,
lower-roman
,
upper-roman
,
lower-alpha
,
upper-alpha
,
none
