Frau Kalke's Blog - Comcave: Kurs Tag 2 - HTML & CSS

TAG 2 - Mitschrift vom 7.4.2014

Wiederholung Tag 1

(funktionale) Tags = Anweisungen an den Browser etwas zu tun (=Beschreibung)

Warum break-Tag und nicht, wie früher ?

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.

Kommentare im Quelltext:

Kommentare in den Quelltext schreiben, die mir die Übersichtlichkeit erleichtern.

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

Dokumenttitel im Browser

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.

Tag => unterstreicht! (underline)

beschreibt wieder einen Bereich  dieser Text wird unterstrichen dargestellt

Tag => stellt Text kursiv! (italic)

beschreibt wieder einen Bereich  dieser Text wird kursiv dargestellt 

Tag => stellt den Text kleiner!

beschreibt wieder einen Bereich  dieser Text wird kleiner dargestellt

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 ist uralt - noch aus dem HTML1-Standard. Mittlerweile heißt es strong-Tag!

Tag => schreibt fett!beschreibt wieder einen Bereich  dieser Text wird fett dargestellt

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:

Das wird ein Demotext. Das ist mein Text.

nicht möglich:

-> 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. Das ist mein Text.

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!)

fett - bold
kursiv - italic
unterstrichen - underlined

Kombinationen sind möglich

Kombinationen sind möglich

<s>durchgestrichen</s> - strike
<tt>Fernschreiber</tt> - teletyper
<big>Grösser</big> - big

<big><big><big><big>Sehr gross</big></big></big></big>

Kleiner - small
hochgestellt
tiefgestellt

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>
<code>Programmiercode</code>
<dfn>Definition</dfn>
stark hervorgehoben
betonten, emphatisch
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>

Inline-Element

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)

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">...

<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:
 Dieser Text wird rot geschrieben sein
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!