Es gibt nur noch ca. 4 Browser, Firefox steht allen Bertriebssysteme zur Verfügung.
Add-ons:
ColorZilla: man kann ähnlich wie im Photoshop mit der Pipette Farbwerte ablesen
MeasureIt: kann z. B. die Bildgrößen, bzw. die Pixelgrößen, messen, Ruler (Lineal) wird angezeigt
Steuerung +0 (Apfel +0) = Originalgröße der Website, mit rechter Maustaste bekommt man Hintergrundinformationen über die Hintergrundgrafiken/Bilder
Sicherheit im Firefox kann man einstellen über:
Grundsätzliche Einstellungen im Windos-Explorer vorgenommen:
Datei-Endungen anzeigen und mit welchen Browser die .html-Dateien geöffnet werden sollen (Firefox)
FTP-Programm: nur zum Übertragen der Daten
Wir fangen an mit notepad++ (Rechtschreibprüfung rausgenommen):
- <!doctype html> immer sagen welche Dateityp es ist
- <!-- Ich bin ein Kommentar -->
man kann Anmerungen/Kommentare in den Quelltext setzen, wichtig zur Organisation! - immer vorne <html> und zum Abschluß </html> Grundgerüst
- dazwischen <head> </head> und dann <body> </body> im Body sieht man, was im Browser angezeigt wird
- Webseite hat einen Titel<title> </title> (nach <head>)
Immer kurz und knackig, auf dem Punkt
Dreamweaver: gibt automatisch "untiled dokument" raus, das Netz ist voll davon! -
Wir haben Umlaute im title-Tag, um das zu ändern:
UTF-8 = universeller Zeichensatz, kennt alle Zeichen dieser Welt
Kodierung sollte UTF-8 ohne BOM sein - <meta charset="utf-8"> einsetzten
(in HTML5 gibt es Elemente/Befehle, die kein Ende haben) - Grundgerüst erstellt:
Organisation von Texten, Typografische Strukturen:
Immer in Absätzen schreiben, Absatz heißt Paragraph (englisch) <p> </p>
Blindtext-Generator: Texte rauskopiert und in die HTML-Datei eingesetzt
Zwischen 2 Absätzen ist immer eine Leerzeile!
Überschriften es gibt 6 unterschiedliche Überschriften
<h1> Überschrift 1. Ordnung </h1>
<h2> Überschrift 2. Ordnung </h2>
<h3> Überschrift 2. Ordnung </h3> (meistens reichen 3 Überschriften aus)
<h4> Überschrift 2. Ordnung </h4>
<h5> Überschrift 2. Ordnung </h5>
<h6> Überschrift 2. Ordnung </h6>
Es wird vom Crowler von Google ausgewertet, in welcher Überschrift (h3), z. B. ein Keyword eingesetzt wird, die Unterschriften haben unterschiedliche Rangfolgen (von 1-6)
Es gibt noch den nicht formatieren Bereich (brauch man aber in der Praxis nicht oft):
<pre>, dort gilt HTML nicht (für z. B. Programmierer, wenn er den Code 1:1 anzeigen lassen will, zur Veröffentlichung von Quelltexten)
Wenn man einen Fehler im HTNL macht, sieht man es sofort!
Zeilenumbruch = engl. Break <br> (Befehl muß nicht geschlossen werden, also kein </br>)
Die Taste ATL GR bei Windos belegt das 3. Zeichen auf der Tastatur
Warum ist das Setzen von manuellen Zeilenumbrüchen ein Problem?
Bei kleinen Bildschirmen wird alles komisch umbrochen, auf verschiedenen Endgeräten wird es unterschiedlich ausgegeben (Responsive Design)
Sonderzeichen:
de.selfhtml.org (dort kann man alles nachlesen), dort sind alle Zeichen aufgelistet,
die man so braucht (kann man alles rauskopieren)
http://de.selfhtml.org/html/referenz/zeichen.htm#benannte_iso8859_1
Sonderzeichen fangen immer mit & an und Enden mit ;
Es gibt HTML eigene Zeichen z.B.
7 < 9, Kodierung dann 7 < 9
9 > 7, Kodierung dann 7 > 9
& Kaufmännisches UND
" Anführungszeichen oben
NON BREAKING SPACE, darf nicht umbrochen werden! Ist ein erzwungenes Leerzeichen, immer im Browser sichtbar! Wenn z. B. Adressen, Telefonnummern nicht getrennt werden sollen
Für alle Endgeräte gleich sichtbar: Responsive Webdesign
Typografie im Web, Crissov.de: http://webdesign.crissov.de/Typographie
Zeichenformate (es gibt 2 Arten)
Physische Zeichenformate
- fett - bold <b>
- kursiv - italic <i>
- unterstrichen - underlined <u> (wenig zu finden, zum Hervorheben eher fett oder kursiv)
durchgestrichen- strike <s>- Fernschreiber - teletyper <tt> (Buchstaben, die alle gleich breit sind, unproportionale Schriftart, nicht wichtig)
- Gross - big <big>
<big><big><big><big><big>Sehr gross</big></big></big></big></big> (für sehr großen Text) - Kleiner - small < smal>
- hochgestellt </sup>
- tiefgestellt </sub>
Man kann auch die Zeichenformate kombinieren, aber bitte beachten, das die Klammern sich nicht überschneiden dürfen:
Tags/HTML Elemente richtig verschachteln
Logischen, semantische Zeichenformate (soll auf die Art des Inhaltes schließen, werden unterschiedlich in den Browsern dargestellt)
- <cite>Zitate</cite>
- <samp>Beispiel</samp>
- <kbd>tastatureingabe</kdb>
- <var>Variable</var>
- <code>Programmiercode</code>
- <dfn>Definition</dfn>
- <em> betonen, emphatisch</em>
- <kbd>tastatureingabe</kdb>
- <var>Variable</var>
- <code>Programmiercode</code>
- <dfn>Definition</dfn>
- <strong> stark hervorgehoben</strong>
- <abbr title ="Abkürzungen" >Abk</abbr> (dieses Nutzen!)
- <acronym title ="Lastkraftwagen" >LKW </acronym>
(wenn man mit der Maus drüber geht, wird das gesamte Wort angezeigt)
Trennlinie - horizontal rule <hr>
<hr color="orangered">
color = die Eigenschaft bestimmen
"red" = ist dann die Eigenschaft
<hr width="50%"> relative Größe mit dem %-Zeichen
<hr width="50"> absolute Größe: Pixel
<hr size="12"> Dicke der Linie/Wert
<hr align="center"> Ausrichtung des Textes, der Linie
Befehl (Element/Tag) Attribut (Eigenschaft) = Wert
Welches Attribut ist für welches Element gültig?
Welche Eigenschaften ich dem Befehl mitgeben kann,
z. B. eine Headline kann nur mittig und farbig gesetzt werden
Es gibt alle Farbnamen in einer Liste, eigentlich gibt man die Hexalfarben an
Man kann im Netz gleich seine Daten abrufen:
http://training.net-now.de/cc/2013_12/schober/12_18/horizontal_rule.html
Keine Kommentare:
Kommentar veröffentlichen