Embed Size (px)
Citation preview
Pulvermühlestrasse 57 Tel. +41 (0)81 286 24 24 [email protected] FHO Fachhochschule CH-7004 Chur Fax +41 (0)81 286 24 00 www.htwchur.ch/imp Ostschweiz
Zusammenfassung Structure for the Web Stand vom 11.8.2019
Semantisches HTML
Korrekte Dateinamen im Internet
1. Erlaubte Zeichen für Ordner-, Datei-, Variablen-, Klassen und id-Namen: 1. Kleinbuchstaben a bis z, Zahlen von 0 bis 9 und Unterstrich _ 2. Klassen-, id- und Variablen-Namen beginnen mit einem Kleinbuchstaben 3. Englische Namen verwenden 4. Ordner Struktur
Die Ordnernamen «aufgabe_01», « aufgabe_02» und « aufgabe_03» sind nur als Beispiele für Projekt-, resp. Aufgaben-Ordner gedacht. Die Ordnerstruktur im Projektordner ist aber zwingend («css», «html», «images», «js» und «index.html»).
2
HTML-Link auf andere Dokumente in neuem Browserfenster
<a href= "http://www..." target="_blank">Text</a>
Dateien auf Webserver kopieren
Webserver einrichten im HTW Intranet
Informationen in Atom übernehmen
Sonderzeichen mit HTML
3
CSS-Selektoren
Selektor HTML-Beispiel CSS-Beispiel HTML-Tag <article> article {…}
Klasse <article class="start"> .start {…}
ID <article id="start"> #start {…}
<h2>Sehr <em>gut</em></h2> h2 em {…}em innerhalb h2 <h1>…</h1><p>…</p> h1, p {…} h1 und p
Externe CSS-Datei mit HTML verknüpfen
Code im <head> Tag: <link href="css/layout.css" rel="stylesheet" type="text/css">
Vererbung im CSS
strong erbt von p p erbt von body body vererbt an h1, h2 und p p vererbt an strong
Aufbau CSS
Selektor, Deklaration, Eigenschaft und Wert
Mac: { = ALT + 8 } = ALT + 9 Windows: { = ALT GR + ä } = ALT GR + $
4
Boxmodell im CSS
Boxmodell «border»: Breite von Content, Padding und Rand wird festgelegt
Gesamtbreite Box: width bezieht sich auf die Breite des Kastens (inklusive Rahmen)
5
Media Queries für CSS
CSS Flex Boxes
Im Flex-Container wird festgelegt, dass die untergeordneten Elemente (Flex-Items) dem Flex-Muster folgen. Weitere verschachtelte Elemente (Inhalt) sind davon nicht betroffen.
Separates Dokument
6
CSS Grid
Im Grid-Container wird festgelegt, dass die untergeordneten Elemente (Grid-Items) dem Grid-Muster folgen. Weitere verschachtelte Elemente (Inhalt) sind davon nicht betroffen.
Wichtigste Befehle im Grid-Container display: grid; grid-template-columns: 1fr 1fr 2fr; oder grid-template-columns: repeat(4, 250px); grid-column-gap: 2vw; grid-template-rows: 50px 200px; oder grid-auto-rows: 100px; /*auto für autom Höhen*/ grid-row-gap: 5px; oder grid-gap: 5px; /* selber hori und verti Gap */
Einheiten (nur für Grid) Neue CSS Einheit: fr (für Fraction) = übrigbleibender Rest
Grid-Items kombinieren Beginn Spalte 1, ab dort 2 Spalten verbunden grid-column: 1 / span 2; Beginn Zeile 1, ab dort 2 Zeilen verbunden grid-row: 1 / span 2;
Einheiten im CSS
Vorschlag
Breiten (width): vw oder % oder fr (fr nur für CSS Grid) maximale Breite (max-width): px Schriften (font-size): rem Höhen: vh oder px
Gewisse Einheiten immer in Pixel max-width, min-width, max-height, min-height und die Breakpoints der Media Queries.
7
Google Web-Fonts im CSS
<link> in den <head> einfügen
In font-family Schriftname einfügen
Farben mit CSS im Web
color: #FFFF00; (#rrggbb; hexadezimale Angabe 0-9 und A-F) color: #FF0; (#rgb; Hexadezimale Angabe 0-9 und A-F) color: rgb(255,255,0); (rgb von 0 bis 255) color: rgba(255,255,0,0.50); (rgb von 0 bis 255; a von 0 bis 1)
8
Aussehen von Hyperlinks mit CSS ändern
Formatieren aller Links: a
Normaler, noch nie besuchter Link: a:link
Besuchter Link: a:visited
aktiver Link (man klickt mit Maus): a:active
Maus über Link: a:hover
Links ohne Unterstreichung a:link { text-decoration: none; }
Links mit bestimmter Farbe hervorheben a:link { text-decoration: none; color: #FF0000; background-color: #FFFF00; }
Cursor über Link ändern a:link { text-decoration: none; color: #FF0000; cursor: crosshair; }
Die Reihenfolge der Formatierungen ist wichtig: Zuerst a:link, dann a:visited, dann a:hover (oder zuerst a, dann a:hover).
Ausrichtung von Absätzen mit CSS
text-align: left oder justify oder right oder center
