Vorbereitung Termin 4

Transkript

1 Vorbereitung Termin 4

2 Spezielle Links & Linkattribute 2

3 Ein Bild verlinken <a href= ><img src= kochmuetze.png /></a> Das Ankerelement wird erst durch das Attribut href zum funktionierenden Hypertext Link. 3

4 -Links <a href= >Christin Heinze</a> Bei einem Klick auf den Link wird das Mailprogramm geöffnet und eine neue Mail mit der entsprechenden Mailadresse als Empfänger angelegt 4

5 Links in einem neuen Fenster öffnen <a href= target= _blank >Zur Folkwang Website</a> Öffnung des Linkziels in einem neuen Fenster. target= _self öffnet das Linkziel im selben Fenster 5

6 Anker 6

7 Links auf eine bestimmte Stelle in einer Seite Direktes Springen an eine Stelle im Dokument 1. Das Ziel benennen <h1 id= starth >H</h1> 2. Auf das Ziel verweisen <p> F G <a href= #starth >H</a> I J... </p> 7

8 Übung h2-überschrift L als Ziel für einen Link kennzeichnen (id= startl ) 2. Den Buchstaben L am Anfang der Seite zu einem Link auf den Anker L umwandeln (href = #startl ) 3. Das gleiche mit dem Buchstaben U 4. Absatzelement Oben am Abschnittsende einfügen und Link auf die Überschrift Glossar am Seitenanfang setzen 8

9 Zu einer bestimmten Stelle auf einer anderen Seite verlinken <a href= >Hauptgerichte</a> Bei einem Klick auf den Link wird die Website im Browser geöffnet und der Browser springt automatisch zu dem Element mit dem Linkziel hauptgerichte 9

10 Bilder 10

11 Bilder hinzufügen Pfad zur Bilddatei <img src= images/katze.jpg /> source-attribut 11

12 Weitere Bildattribute Alternativer Text falls das Bild nicht angezeigt werden kann bzw. für Screenreader und Suchmaschinen <img src= images/katze.jpg alt = Eine Katze /> alternative-attribut 12

13 Weitere Bildattribute title-attribut zur näheren Beschreibung des Bildes oder für Hinweise <img src= images/katze.jpg alt = Eine Katze title = Mit einem Klick auf das Logo gelangen Sie zurück zur Startseite /> Der Text wird angezeigt, sobald der Benutzer mit der Maus über dem Bild verweilt 13

14 Breite und Höhe des Bildes festlegen <img src= images/katze.jpg alt = Eine Katze width = 300px height = 400px /> Angabe der Breite in Pixeln Angabe der Höhe in Pixeln Breite des Bildes Höhe des Bildes durch Angabe der Größe kann der Browser den entsprechenden Platz auf der Seite schon einmal reservieren noch bevor das Bild geladen wurde Später: Angabe der Bildgröße über CSS-Angaben 14

15 Tabellen 15

16 Übung 02 - tabelle_01.html <table> <th>gericht</th> <th>kalorien</th> <th>fett (g)</th> <th>hühnersuppe</th> <td>120</td> <td>2</td> <th>caesar Salad</th> <td>400</td> <td>26</td> </table> 16

17 Übung 02 - tabelle_01.html <table> <th>gericht</th> <th>kalorien</th> <th>fett (g)</th> <th>hühnersuppe</th> <td>120</td> <td>2</td> <th>caesar Salad</th> <td>400</td> <td>26</td> </table> Start- und Endtag 17

18 Übung 02 - tabelle_01.html <table> <th>gericht</th> <th>kalorien</th> <th>fett (g)</th> <th>hühnersuppe</th> <td>120</td> <td>2</td> <th>caesar Salad</th> <td>400</td> <td>26</td> </table> tr : Zeile 18

19 Übung 02 - tabelle_01.html <table> <th>gericht</th> <th>kalorien</th> <th>fett (g)</th> <th>hühnersuppe</th> <td>120</td> <td>2</td> <th>caesar Salad</th> <td>400</td> <td>26</td> </table> 3 Zeilen 19

20 Übung 02 - tabelle_01.html <table> <th>gericht</th> <th>kalorien</th> <th>fett (g)</th> <th>hühnersuppe</th> <td>120</td> <td>2</td> <th>caesar Salad</th> <td>400</td> <td>26</td> </table> th: Header-Spalte td: Spalte 20

21 Übung 02 - tabelle_01.html <table> <th>gericht</th> <th>kalorien</th> <th>fett (g)</th> <th>hühnersuppe</th> <td>120</td> <td>2</td> <th>caesar Salad</th> <td>400</td> <td>26</td> </table> 3 Zeilen und jeweils 3 Spalten 21

22 Übung 02 - tabelle_01.html Überschrift gilt für eine <table> Spalte <th scope= col >Gericht</th> <th scope= col >Kalorien</th> <th scope= col >Fett (g)</th> <th>hühnersuppe</th> <td>120</td> <td>2</td> <th>caesar Salad</th> <td>400</td> <td>26</td> </table> 22

23 Übung 02 - tabelle_01.html <table> <th scope= col >Gericht</th> <th scope= col >Kalorien</th> <th scope= col >Fett (g)</th> <th scope= row >Hühnersuppe mit Nudeln</th> <td>120</td> <td>2</td> <th scope= row >Caesar Salad</th> <td>400</td> <td>26</td> </table> Überschrift gilt für eine Zeile 23

24 Verbinden von Tabellenelementen mit colspan & rowspan Übung 02: tabelle_02_colspan.html Übung 02: tabelle_03_rowspan.html 24

25 w3schools.com 25

26 Zellinnenabstand (Cell Padding) & Zellabstand (Cell Spacing) 26

27 w3schools.com 27

28 Übung 02 - tabelle_04.html 28

29 Übung 03 - tabelle_04.html Ein gemeinsamer Header für 2 Tabellenüberschriften Header 1 Header 2 Daten A Daten A1 Daten A2 Daten A3 Daten B Daten B1 Daten B2 Daten B3 Daten C Daten C1 Daten C2 Daten C3 29

30 Übung 03 - tabelle_04.html Ergebnis 30