TAG 2 - Mitschrift vom 7.4.2014
Wiederholung Tag 1
(funktionale) Tags = Anweisungen an den Browser etwas
zu tun (=Beschreibung)
Warum break-Tag <br /> und nicht, wie früher <br>?
- Es gibt STANDARDS (konsequente Weiterentwicklung, die HTML durchläuft).
- Wir arbeiten mit dem XHTML-Standard, der auch für HTML5 gelten wird.
- da es so viele vorangegangenen Standards gibt, können die Anweisungen teilweise unterschiedlich aussehen, bewirken aber dasselbe.
- es gibt Tags, die keine schließende Klammer benötigen, sich also nicht auf einen Bereich, sondern auf einen speziellen Punkt beziehen.
- Diese werden in der einen Klammer direkt wieder geschlossen mit " /". -> Kombination aus öffnender und schließender Klammer.
- Hinweis: Da die Browser aber abwärtskompatibel sein müssen, versteht der Browser auch noch die alte Schreibweise.
Grundgesrüst (ähnlich einer Zwiebel):
Wir trennen die Bereiche/Zwiebelschichten:
html(Rahmen)
> head (Info an den Browser)> body (Ausgabekörper) >
html
<html>
<head>
Info an den Browser
</head>
<body>
auszugebende Info
</body>
</html>
Doctype:
Zu Beginn, muss man der Seite mitteilen, welchen
Standard man benutzt: doctype!
Ursprünglich hatte man diese Info in den Kopf gepackt.
Es hat sich aber der Standard etabliert, diese Info schon vor den Rahmen (html)
zu setzen.
Damals gab es viele und unübersichtliche Doctype-Infos, wie:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Seit
dem HTML5 Standard ist es so einfach und schön geworden: <!doctype
html>
Die
w3 hat festgestellt, dass die Informationen im Doctype an sich überflüssig
sind, weil der Browser eh abwärtskompatibel ist ;)
Ländertypische
Sonderzeichen:
Sonderzeichentabelle.de - es werden alle Sonderzeichen
definiert, damit sie richtig abgebildet werden können.
Alternativ
kann man es über das meta tag charset (Zeichensatz) im head definieren.
Bei
uns greift beispielsweise der Charset UTF=8.
<meta
charset="UTF-8" /> -> mit diesem Meta Tag werden unsere
deutschen Umlaute richtig angezeigt.
Kommentare
im Quelltext:
Kommentare
in den Quelltext schreiben, die mir die Übersichtlichkeit erleichtern.
<!--
Kommentar für mich -->
aus
semantischer Korrektheit werden die Kommentare nur im headbereich vorgenommen.
Title-Tag
für Dokumententitel:
<title>
Dokumententitel </title>
->
immer im Headbereich
->
dieser Dokumententitel erscheinnt im Reiter des Browsers
|
geht
einher mit dem fav-icon (Favicon = Bild neben
dem Dokumententitel) :) dazu mehr später.
Tipp:
Drag and Drop zum Öffnen im Notepad++: dazu die txt-Datei im Ordner mit der
Maus einfach in das Notepad++ ziehen.
<u>Tag
=> unterstreicht! (underline)
beschreibt
wieder einen Bereich <u> dieser Text wird unterstrichen
dargestellt </u>
<i>Tag
=> stellt Text kursiv! (italic)
beschreibt
wieder einen Bereich <i> dieser Text wird kursiv
dargestellt </i>
<small>Tag
=> stellt den Text kleiner!
beschreibt
wieder einen Bereich <small> dieser Text wird
kleiner dargestellt </small>
wenn
ich das small mit weiteren smalls umrahme, wird der Text immer kleiner!
<big>Tag
=> stellt Text größer!beschreibt wieder
einen Bereich <big> dieser Text wird
größer dargestellt </big>
wenn
ich das big mit weiteren bigs umrahme, wird der Text immer größer!
<strike>Tag
=> streicht durch!beschreibt wieder einen Bereich <strike> dieser
Text wird durchgestrichen dargestellt </strike>
!
das <b> ist uralt - noch aus dem HTML1-Standard. Mittlerweile heißt es
strong-Tag!
<strong>Tag
=> schreibt fett!beschreibt wieder einen Bereich <strong> dieser
Text wird fett dargestellt </strong>
ACHTUNG:
Jede Änderung, die ich durchführe, muss kontrolliert werden!
Wir
können HTML-Tags kombinieren
nach
bestimmter Regel!
also:wenn
ich das small mit weiteren smalls umrahme, wird der Text immer
kleiner!
wenn
ich das big mit weiteren bigs umrahme, wird der Text immer größer!
anderes
Beispiel:
<big>
Das ist <i> mein</i> Text </big>
Das
wird ein Demotext. Das ist mein Text.
nicht
möglich:
<big>
Das ist <i> mein Text </big></i>
-> man kann nur innerhalb eines Tags ein anderes Formatierungstag
einbauen/schachteln!
Tipp: erst Gesamttext formatieren (Basisformatierung) und dann vom Groben ins Feine formatieren.
Beispiel: Das wird ein Demotext. <strong>Das ist
<i><u>mein</u></i> Text.</strong>
Das wird ein Demotext. Das ist mein
Text.
Bitte
darauf achten semantisch korrekt zu verschachteln!
Zeichenformate:
(=Arten von HTML-Tags)
(zeichenformate.html)
=>
Physische Zeichenformate (es
verändert sich was am Zeichen selbst/ Ändern das Aussehen unserer Zeichen!)
- <b>fett</b> - bold
- <i>kursiv</i> - italic
- <u>unterstrichen</u> - underlined
<b><i>Kombinationen sind
möglich</i></b>
<i><b>Kombinationen</b> sind
<b>möglich</b></i>
- <s>durchgestrichen</s> - strike
- <tt>Fernschreiber</tt> - teletyper
- <big>Grösser</big> - big
- <big><big><big><big>Sehr gross</big></big></big></big>
- <small>Kleiner</small> - small
- <sup>hoch</sup>gestellt
- <sub>tief</sub>gestellt
Logischen,
semantische Zeichenformate
haben
tiefer gehende Funktionen!- Metainformationen!
Nicht
nur das Zeichen verändert sich, sondern die Bedeutung der Zeichen wird für
ganze Gruppen mitgeliefert!
=Kombinationen
aus vielen Formatierungen, die für uns
bereitgestellt sind.
Suchmaschinenoptimierung:
die Suchmaschine registriert dieses Tag! grenzt Zitat ab und
formatiert es gleichzeitig.
(Tipp: Google Algorithmus bewertet semantisch korrekte Verwendung der Tags
positiv und man wird besser gelistet!!!)
- <cite>Zitat</cite> (kursiv)
- <samp>Beispiel</samp>
- <kbd>Tastatureingabe</kbd>
- <var>Variable</var><br />
- <code>Programmiercode</code>
- <dfn>Definition</dfn>
- <strong>stark hervorgehoben</strong>
- <em>betonten, emphatisch</em>
- bei abbr & acronym entstehen tooltips = wenn ich mit der Maus drüber fahre erscheint ein Fenster, welches das abgekürzte Wort erklärt.
- <abbr title="Abkürzung" lang="de">Abk</abbr> (Funktion: Screenreader würden ohne Tag Abk vorlesen, mit dem Tag kann der Screenreader buchstabieren!)
- <acronym title="Lastkraftwagen">LKW</acronym> (liest als Wort ohne Pause zwischen den Buchstaben, wie bei der Abkürzung!)
- <abbr title="Hypertext Markup Language" >HTML</abbr>
- <span lang="en">Inline-Element</span>
Proprietäre
Formate (nicht standardkonform)
außerhalb
des Standards definiert worden. Bspw. Laufband (marquee)
- <blink>Es blinkt heute nicht mehr</blink>
- <marquee direction="left">Es läuft</marquee>
- <marquee direction="right">Es läuft</marquee>
- <marquee direction="up">Es läuft</marquee>
- <marquee direction="down">Es läuft</marquee>
Herr Sewelies unterstützt die Standards - es hat ja
einen Grund, weshalb es Standard geworden ist ;)
Aufgabe: Neue Datei anlegen und Grundgerüst
schreiben!
und unter strukturierungselemente.html abspeichern.
Strukturierungselemente
(Typografische Strukturen):
(strukturelemente,html, struktur.html)
- <p> Absatz - der Browser baut automatisch Abstände rein!
- nur Textblöcke!
- <h[1-6] Headlines/Überschriften nach Priorität!
- -> Leserfreundlichkeit und Listung bei Google hängen auch hier zusammen!
- sind sehr wichtig für die Suchmaschine! Seiten mit guter Lesbarkeit/Strukturierung werden besser gelistet! Maximal eine H1 pro Website und mehrere Unterüberschriften! H1 sagt, worum es auf der Seite geht!
- <h1>Headline1</h1> - genau eine H1 pro Website (höchste Priorität
- <h2>Headline2</h2> H2-H6 geben dem Text der Seite Struktur!
!!!Ein Text besteht aus Textblöcken, die
mit Überschriften und Sublines strukturiert sind!!!
- <hr /> Trennlinie | horizontal rule
- hat die Eigenschaft sich von Haus aus
- Größe
- Farbe schwarz (color)
- kann entweder hexadezimal (#DEB887)=>Hexadezimalfarben: (HEX) = Zusammenstellung der Hexadezimalen (führende Raute und 6 Zahlen: #DEB887 = Burleywood)
- oder named eingetragen werden (yellow)
=>Named Colors: http://www.w3schools.com/html/html_colornames.asp Tip: The 17 standard colors are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. - maximal über die gesamte Seite auszubreiten (width)
- sich mitig zu zentrieren (align)
- kann mit Attributen/Eigenschaften versehen werden, bspw.
Attribute sind Eigenschaften mit denen ich manche Tags
versehen kann!
- color
- width
- align
<hr width="100"
color="green"/> - stellt Linie besonders dar!
<h1 color="blue">...
<p align="center">
<h2 align="center"> Headline 2. Ordnung</h2>
Eigenschaft (bspw.: align) und Wert (bspw.: left, center right, justify (=Blocksatz)
font/ Schrift - mögliche Attribute
- farbe/ color:
Heutzutage benutzen wir für die Schriftfarbe CSS - damals hat man das
font-tag benutzt:
<font color="red"> Dieser Text wird rot geschrieben sein</font> - size
- face (=Schriftart - damals family)
Hinweis zur Fehlersuche:
oftmals ist es ein fehlendes " oder ein fehlendes
schließendes Tag...
Aufgabe für heute Mittag:
Zeitungsartikel in Texteditor selber formatieren!
siehe Dokument: zeitungsartikel.html
Vorgehensweise:
erstmal Grundgerüst reinbringen: doctype, html, head,
body
Basisschrift
Überschriften
Zitate
Links und Bilder machen wir später!
