HTML. Webdesign 2015/16. NaReM 3.Semester. Teil 1: HTML Grundlagen. Dozentin: Karin Maier. Einführung. Grundlagen. HTML Hyper Text Markup Language

Transkript

1 Webdesign 201/16 NaReM 3.Semester Karin Maier Teil 1: HTML Grundlagen 1 HTML Dozentin: Karin Maier Karin Maier Einführung 1 Grundlagen HTML Hyper Text Markup Language Jeder Webseite liegt HTML-Quelltext, der einsehbar ist zu Grunde Folie 3 1

2 Einführung 1 Grundlagen HTML - Der Sprachstandard für Webseiten HTML Hypertext Markup Language XHTML Extensible Hypertext Markup Language Folie 4 Einführung 1 Grundlagen Sprachentwicklung XML XHTML 1.0 strict XHTML HTML 4.01 strict XHTML 1.0 transitional 2006 XHTML HTML 3.2 HTML 4.01 transitional XHTML 1.0 frameset 2009 XHTML 2.0 HTML 4.01 frameset 2014 HTML.0 Folie Einführung 1 Grundlagen Welche Browser unterstützen HTML? Score Browsername 26 Chrome 44 2 Opera Firefox Safari Internet Explorer (Edge) Erläuterung: erreichte Punktzahl von möglichen Punkten, bei denen HTML Eigenschaften getestet wurden. (Stand: 09/201) Quelle: Folie 6 2

3 Einführung Grundlagen1 Bei der Seitenerstellung ist zu berücksichtigen: Welche Browser-Software wird verwendet? Welche Browser-Version ist im Einsatz? Welche Auflösungen sind häufig? Sollen Seiten oft ausgedruckt werden? Folie 7 HTML Aufbau/Strukturierung einer HTML-Datei 2 Dozentin: Karin Maier Karin Maier Aufbau einer 2 HTML-Datei Jede HTML-Seite besteht aus 3 Teilen: <!doctype...> <head>... </head> <body>... </body> Folie 9 3

4 Aufbau einer2 HTML-Datei Syntax <Elementname...> <...Attributname> </Elementname...> Attribute können beliebig innerhalb der Klammer kombiniert werden Folie 10 Aufbau einer 2 HTML-Datei Um einen validen HTML-Code zu erhalten, gelten folgende Regeln: In HTML nur Kleinbuchstaben verwenden Elemente müssen sauber verschachtelt sein Attributwerte müssen in Anführungszeichen gesetzt werden Wird in XHTML programmiert: Jedes Element muss ein Schließelement haben Folie 11 Kopfdaten Im Head-Bereich können stehen: Aufbau einer2 HTML-Datei Tag-Name <title> <base> <link> <style> <meta> <script> Beschreibung Beschreibt den Dokumententitel Spezifiziert den Seitenursprung Verbindung zwischen dem Dokument und externen Resourcen Definiert die Style-Informationen für CSS Beschreibt Metadaten des Dokumentes Definiert ein clientseitiges Script Folie 12 4

5 Titel Beispiel: <head><title>webdesign Vorlesung HFR Rottenburg</title></head> Aufbau einer2 HTML-Datei Der Titel taucht an folgenden Stellen auf: in der Titelzeile des Browser-Anzeigefensters in den Tabs beim Setzen von Lesezeichen in der Liste der bereits besuchten Seiten bei vielen automatischen Suchprogrammen als wichtige Anzeige bei Suchtreffern Folie 13 Titel Aufbau einer2 HTML-Datei Folie 14 Kommentare Aufbau einer2 HTML-Datei Einzeilige und mehrzeilige Kommentare: Beispiel:  Kommentare werden zur besseren Lesbarkeit des HTML-Codes erstellt, zum dokumentieren und erläutern. Folie 1

6 Aufbau einer2 HTML-Datei HTML Elemente Folie 16 HTML Elemente Aufbau einer2 HTML-Datei Formulare Dokumente Tabellen Folie 17 HTML Elemente Tags zum Einbinden von Dateien Aufbau einer2 HTML-Datei Folie 18 6

7 Aufbau einer2 HTML-Datei Seitenstruktur Semantische Divs Semantische Divs dienen dazu, der Suchmaschine zu sagen, was die Funktion eines bestimmten Abschnittes ist. Die neuen Elemente sind: Header Footer Section Article Aside (Seitenspalte, Zitate) Nav Folie 19 HTML Textformatierungen 3 Dozentin: Karin Maier Karin Maier Textformatierungen 3 Vorformatierte Überschriften Headings (h1..) werden zum Formatieren von Überschriften verwendet. Es sind Werte von 1-6 möglich. Beispiel: <h1> text </h1> Folie 21 7

8 Zeilenumbrüche/Absätze Absatzformatierung mit p=paragraph <p>hier entsteht ein Absatz</p> Einfacher Umbruch mit br (break) Beispiel: 1. Zeile <br> 2. Zeile Folie 22 Veraltete Schriftformatierung Mit font-element: <font...> text </font> Kombiniert mit Attributen: size (Schriftgröße) color (Schriftfarbe) face (Schriftart) Beispiel: <font size= 3 color = red > text </font> Nicht mehr erlaubt in HTML!!! Folie 23 Textformatierungen Textformatierungen 3 Textformatierungen Weitere Formatierungsmöglichkeiten (nicht vollständig) <em></em> <code></code> <b></b> <i></i> <sub></sub> <sup></sup> <small></small> betont Kennzeichnet Code Fett Kursiv tiefgestellt hochgestellt Kleiner Font Folie 24 8

9 Weitere Formatierungsmöglichkeiten Beispiel: <b>chemische Formeln </b> <br /> H<sub>2</sub>O = Wasser Folie 2 Listen Listen ohne Zählung (Unordered Lists) <ul>.</ul> <ul> <li>kaffee</li> <li>tee</li> <li>milch</li> </ul> Kaffee Tee Milch Folie 26 Textformatierungen Textformatierungen Textformatierungen Listen Listen mit Zählung (Ordered Lists) <ol> </ol> <ol> <li>kaffee</li> <li>tee</li> <li>milch</li> </ol> 1. Kaffee 2. Tee 3. Milch Folie 27 9

10 Hyperlinks 4 Der Hyperlink Folie 28 Hyperlinks 4 Der Hyperlink absoluter Link <a href= >..</a> relativer Link <a href=../forstwirtschaft.html >..</a> interner Link <a href= #seitenende >..</a> Folie 29 Hyperlinks 4 Der Hyperlink Protokoll Domainname Genauer Verzeichnispfad Datei (Name und Typ) Folie 30 10

11 Hyperlinks 4 Der Hyperlink Spezifische Attribute Attribute Wert Beschreibung href URL Legt die Seite fest, zu der der Link führt hreflang language_code Legt die Sprache des verlinkten Dokumentes fest media media_query Spezifiziert für welchen Medium der Link optimiert ist. rel Alternate, author, bookmark, help, license, next, nofollow, noreferrer, prefetch, prev search, tag Spezifiziert die Beziehung zwischen dem bestehenden und dem verlinkten Dokument target type _blank _parent framename MIME_type _self _top Legt fest, wo das Dokument geöffnet werden soll Spezifiziert den MIME-Type Folie 31 Hyperlinks 4 Der interne Link Verweisziel markieren: <a id="ziel"> Hier ist das Verweisziel </a> Verweis zum markierten Ziel: <a href="#ziel">zum Verweis</a> Folie 32 Hyperlinks 4 Der Hyperlink Gestaltung mit CSS <style type="text/css"> a:link { text-decoration:none; color:#e00000; } a:visited { text-decoration:none; color:#800000; } a:hover { text-decoration:none; color:#ff0; } a:active { text-decoration:none; color:#cff; } a:focus { text-decoration:none; color:#080; } </style> Folie 33 11

12 HTML Grafiken 4 Dozentin: Karin Maier Karin Maier Grafiken Grafik einbinden <img src= bild.gif...> <img src= bild.jpg...> Verweis auf Bildquelle Bildquelle kann absolut oder relativ angegeben werden. <img src= > Folie 3 Grafiken Bildattribute Beispiel: <img src= logo.gif alt= Firmenlogo > Weitere Attribute: alt Alternativer Text width Breite des Bildes height Höhe des Bildes Alternativer Text Folie 36 12

13 Grafiken Standardisierte Grafikformate JPG Joint Expert Picture Group GIF - Graphic Interchange Format PNG - Portable Network Graphics SVG - Scalable Vector Graphics Folie 37 Grafiken Unterschied Bitmap-Vektorgrafik Bitmap: Besteht aus einzelnen Punkten Bearbeitung von Bildpunkten Spezialeffekte möglich Auflösung wird durch Einstellung bestimmt Vektorgrafik: Besteht aus Objekten Jedem Objekt sind Eigenschaften zugeordnet Ein Objekt=eine Einheit Auflösung wird durch Ausgabegerät bestimmt Folie 38 Grafiken Unterschied in der Dateigröße: gif-jpg jpg: 90kb gif: 40kb jpg: 27kb gif: 118kb Folie 39 13

14 Grafiken SVG Skalierbare Vektorgrafik Offener Standard, durch W3C Basiert auf XML Beispiel: <svg> <desc>ein Rechteck</desc> <rect width=200 height=100 /> </svg> Folie 40 Grafiken Imagemaps Ermöglicht anklicken auf ein Detail und damit Sprung auf neue Seite Reiner HTML-Code Beispiel: <map name="karte"> <area shape=rect coords="60,0,147,11" href= </map> Folie 41 Grafiken Imagemaps Bereiche können mit den Attributen - rect - circle - poly festgelegt werden. Mit coords werden die Koordinaten des Bereichs definiert und mit href die Sprungmarke festgelegt. Folie 42 14

15 Grafiken Multimedia einbinden <audio> <source> <track> <video> Definiert Sound Inhalt (im Moment standardisiert: mp3, wav, ogg) Definiert unterschiedliche Medien-Quellen für Media-Elemente (<video> und <audio>) Für Text-Spuren, die Media-Elemente begleiten z.b. Untertitel Für Video und Film-Verweise (mp4, webm, ogg) Folie 43 Grafiken Neues Element: canvas <canvas> Um Grafiken direkt am Bildschirm zu zeichnen Realisiert durch JavaScript Attribute: height und width mit Pixelangabe. Definiert die Größe des Zeichenfeldes Folie 44 HTML Tabellen Dozentin: Karin Maier Karin Maier 1

16 Tabellen 6 Reihenanfang (table row) ( Reihenanfang Tabelleninhalt (table data) Reihenende Reihenende Tabellenende <table> <tr><td></td><td></td> </tr> <tr><td></td><td></td></tr> </table> Folie 46 Tabellen 6 Tabellengestaltung <table border= 1"> Rahmenbreite in px Hier existiert in HTML nur noch 1 und Zur Strukturierung: <caption> Tabellenüberschrift <colgroup> <col> Hier können Spalten zusammengefasst werden <thead> Tabellenkopf <tfoot> Tabellenfuß <tbody> Hauptteil der Tabelle Folie 47 Tabellen 6 Zellen verbinden colspan <td colspan="3"> inhalt </td> Folie 48 16

17 Tabellen 6 Zellen verbinden rowspan <tr><td rowspan="3"> inhalt </td> <td>inhalt 2. Spalte </td> </tr> Folie 49 HTML CSS-Cascading Style Sheets 6 Dozentin: Karin Maier Karin Maier Cascading Eigenschaften: Sehr viele Formatierungsmöglichkeiten Bei großen Projekten sehr effektives Arbeiten möglich Gut geeignet fürs Intranet Unterschiedliche Browser-Ergebnisse Momentaner Standard: CSS3 (Stand 10/2013) Folie 1 17

18 Cascading Syntax: H1 { font-size: 20px} Selektor { Eigenschaft: Wert} Folie 2 Cascading Regeln/Möglichkeiten Verknüpfung mehrerer Selektoren möglich h1, h2, td {font-size: 20px} Verknüpfung mehrerer Eigenschaften möglich h1 {font-size: 20px; color: yellow} Folie 3 Cascading Formatierungsmöglichkeiten Direkt vor dem zu formatierenden Text Beispiel: <h1 style= color:yellow >text</h1> Folie 4 18

19 Cascading Formatierungsmöglichkeiten Im Header, gültig für aktuelles Dokument Beispiel: <head> <style type= text/css > h1{color:yellow} </style> </head> Folie Cascading Formatierungsmöglichkeiten In externer Datei; gültig für alle darauf verweisende Dokumente Beispiel: <link rel= stylesheet type= text/css href= vorlage.css > </link> Folie 6 Pseudoklassen Cascading Klassifizierungen, die einen Zustand oder eine Eigenschaft eines Elements beschreiben. Sie werden an den Elementnamen angehängt. :link - Unbesuchter Link :visited - Besuchter Link :active - Aktiver Link Beispiel: a:visited {color: yellow; text-decoration: none} Folie 7 19

20 Cascading Weitere Klassen Selektoren können selbst definiert werden. Sie müssen dann über ein Klasse-Attribut aufgerufen werden. Beispiel:.überschrift {font-size:14pt;color: darkblue} Im Body: <div class= überschrift >...</div> oder <h1 class= überschirft >...</h1> Folie 8 Cascading Maße und Einheiten Längen In = Inch cm = Zentimeter mm = Millimeter pt = Punkt (1pt=0, mm) pc = Pica (pc = 12 pt) em = Schriftgröße (1 em = 100% Schriftgröße) px = Pixel Folie 9 Cascading Farben Farbname = Name der Farbe (yellow) Farbwert = RGB-Wert der Farbe hexadezimal mit # (#FF0044) RGB-Zahlenwert = RGB-Wert der Farbe als Zahl von 0 bis 2 (rgb(2,2,0)) RGB-Prozentwert = RGB-Wert der Farbe als Prozentzahl (rgb(10%,20%,30%) ) Folie 60 20

21 Cascading Schriftgestaltung font-family Schriftart font-size Schriftgröße font-style Schriftstil font-variant Schriftveränderung font-weight Schriftgewichtung font-size-adjust - Einstellung der Schriftgröße font-stretch - Schriftstreckung Beispiel: H1{font-color: yellow; font-family: verdana} Folie 61 Textgestaltung Cascading letter-spacing - Buchstabenabstand line-height - Zeilenhöhe text-align - Horizontale Textausrichtung text-decoration - Textdekoration text-indent - Einrücken der ersten Zeile text-transform - Textveränderung vertical-align - Vertikale Textausrichtung word-spacing - Wortabstand Beispiel: H1{letter-spacing:2px; text-align:center} Folie 62 Cascading Farbe und Hintergrundgestaltung color Schriftfarbe background-attachment - Einpassung des Hintergrundbildes background-color - Hintergrundfarbe background-image Hintergrundbild background-position - Position des Hintergrundbildes background-repeat - Wiederholung des Hintergrundes background - allgemeine Hintergrundangaben Beispiel: img{background-image:url( bild.jpg ); background-repeat: no-repeat; background-position:center} Folie 63 21

22 Cascading Positionierung absolute - Absolute Positionierung fixed - Fixierte Positionierung relative - Relative Positionierung static - Statische Positionierung Beispiel: H1 { position:absolute; left:20px; top:30px;} Folie 64 22