Vorlesung: Web Engineering. Kurs: TINF17A / TINF17B. Datum:

Größe: px

Ab Seite anzeigen:

Download "Vorlesung: Web Engineering. Kurs: TINF17A / TINF17B. Datum:"

Liese Boer
vor 5 Jahren
Abrufe

1 1 Vorlesung: Kurs: Datum: Web Engineering TINF17A / TINF17B

2 2 Agenda Übungen - HTML in der Praxis Validator - HTML Code prüfen

3 3 Übungen HTML in der Praxis

4 Titel vom Tab 4

5 <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>web Engineering</title> </head> <body> Web Engineering Teil 1: HTML Hier ist HTML! Die Kernsprache des Web! Dozent: Daniel Wierbicki </body> </html> 5

6 <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>web Engineering</title> </head> <body> <h1>web Engineering</h1> Teil 1: HTML Hier ist HTML! Die Kernsprache des Web!

6 6 <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>web Engineering</title> </head> <body> <h1>web Engineering</h1> Teil 1: HTML Hier ist HTML! Die Kernsprache des Web! Dozent: Daniel Wierbicki </body> </html> Beachten: Nicht nur gestalterischer, sondern auch semantischer Effekt (Betonung)! SEO-Tipp: h1 nur einmal pro Seite nutzen (z.b. für Blogtitel), bei h2, h3 etc. egal

7 <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>web Engineering</title> </head> <body> <h1>web Engineering</h1><hr> Teil 1: HTML Hier ist HTML! Die Kernsprache des Web! Dozent: Daniel Wierbicki </body> </html> 7

8 8 <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>web Engineering</title> </head> <body> <h1>web Engineering</h1><hr> <h2>teil 1: HTML</h2> Hier ist HTML! Die Kernsprache des Web! Dozent: Daniel Wierbicki </body> </html> Beachten: Nicht nur gestalterischer, sondern auch semantischer Effekt (Betonung)!

9 9 <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>web Engineering</title> </head> <body> <h1>web Engineering</h1><hr> <h2>teil 1: HTML</h2> Hier ist <strong>html</strong>! Die Kernsprache des Web! Dozent: Daniel Wierbicki </body> </html> Beachten: Nicht nur gestalterischer, sondern auch semantischer Effekt (Betonung)! Tipp: <b> nicht verwenden (dafür gibt es CSS)

10 <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>web Engineering</title> </head> <body> <h1>web Engineering</h1><hr> <h2>teil 1: HTML</h2> Hier ist <strong>html</strong>! Die Kernsprache des Web!<br> Dozent: Daniel Wierbicki </body> </html> 10

11 11 <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>web Engineering</title> </head> <body> <h1>web Engineering</h1><hr> <h2>teil 1: HTML</h2> Hier ist <strong>html</strong>! <p> Die Kernsprache des Web!<br> Dozent: Daniel Wierbicki </p> </body> </html> Absatz Absatz

12 <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>web Engineering</title> </head> <body> <h1>web Engineering</h1><hr> <h2>teil 1: HTML</h2> Hier ist <strong>html</strong>! <p> Die Kernsprache des Web!<br> Dozent: Daniel Wierbicki </p> Wichtig: </body> </html> 12

13 <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>web Engineering</title> </head> <body> <h1>web Engineering</h1><hr> <h2>teil 1: HTML</h2> Hier ist <strong>html</strong>! <p> Die Kernsprache des Web!<br> Dozent: Daniel Wierbicki </p> Wichtig: <ul> <li>hypertext Markup Language</li> <li>keine Programmiersprache</li> <li>eine Auszeichnungssprache</li> </ul> </body> </html> 13

14 14 <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>web Engineering</title> </head> <body> <h1>web Engineering</h1><hr> <h2>teil 1: HTML</h2> Hier ist <strong>html</strong>! <p> Die Kernsprache des Web!<br> Dozent: Daniel Wierbicki </p> Wichtig: <ol> <li>hypertext Markup Language</li> <li>keine Programmiersprache</li> <li>eine Auszeichnungssprache</li> </ol> </body> </html>

15 Quelle: 15

16 16 Validator HTML Code prüfen / validieren

17 17 Was ist ein Validator: Ein Computerprogramm, das die Syntax* eines Dokuments prüft. Der Begriff wird oft bei Auszeichnungssprachen verwendet (z.b. bei HTML). *Syntax: Aufbau und Aussehen einer Sprache (Quasi die Grammatik und Rechtschreibung) Warum ist ein HTML-Validator nützlich? Um zu prüfen, ob unser HTML-Code korrekt ist. Browser interpretieren auch fehlerhaften Code (Wettbewerbsfähigkeit) Wenn man HTML lernt, sollte man wissen, ob der Code korrekt ist Downloads (Beispiele für Browser Extensions): Chrome: Firefox:

18 18 Code ist fehlerhaft (nicht valide), wird aber korrekt angezeigt <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>web Engineering</title> </head> <h1>web Engineering</h1><hr> <h2>teil 1: HTML</h2> Hier ist <strong>html</strong>! <p> Die Kernsprache des Web!<br> Dozent: Daniel Wierbicki </p> Wichtig: <ol> <li>hypertext Markup Language</li> <li>keine Programmiersprache</li> <li>eine Auszeichnungssprache</li> </ol> <body> </body> </html>

19 Der Validator zeigt Warnungen Irgendetwas mit <body> 19

20 Der Validator zeigt Error Irgendetwas mit <body> 20

21 21 Code ist fehlerhaft (nicht valide), wird aber korrekt angezeigt <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>web Engineering</title> </head> <body> <h1>web Engineering</h1><hr> <h2 align ="right">teil 1: HTML</h2> Hier ist <strong>html</strong>! <p> Die Kernsprache des Web!<br> Dozent: Daniel Wierbicki </p> Wichtig: <ol> <li>hypertext Markup Language</li> <li>keine Programmiersprache</li> <li>eine Auszeichnungssprache</li> </ol> </body> </html>

22 Der Validator zeigt Warnungen align not allowed for HTML5 22

23 Der Validator zeigt Error align attribute on the h2 element is obsolete 23

24 24 Code ist valide (obwohl fast identisch wie Quelltext davor) Die DOCTYPE hat sich geändert (jetzt gilt HTML 4.01)! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html lang="de"> <head> <meta charset="utf-8"> <title>web Engineering</title> </head> <body> <h1>web Engineering</h1><hr> <h2 align ="right">teil 1: HTML</h2> Hier ist <strong>html</strong>! <p> Die Kernsprache des Web!<br> Dozent: Daniel Wierbicki </p> Wichtig: <ol> <li>hypertext Markup Language</li> <li>keine Programmiersprache</li> <li>eine Auszeichnungssprache</li> </ol> </body> </html>

25 Der Validator zeigt keine Warnungen und keine Fehler! 25

26 Der Validator zeigt beim Online-Algorithmus Error! Online-Algorithmus erwartet HTML5, unabhängig von Doctype! 26

Ähnliche Dokumente

Vorlesung: Web Engineering. Kurs: TINF17A / TINF17B. Datum:

Vorlesung: Web Engineering. Kurs: TINF17A / TINF17B. Datum: 1 Vorlesung: Kurs: Datum: Web Engineering TINF17A / TINF17B 16.10.2018 2 Agenda zu HTML Formulare - Grundlagen (Übertragung von Daten) Formulare - Ein Kontaktformular Formulare - Die URL bei der GET-Methode