Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Autor: H.Sporenberg Einführung in HTML ASGSG – Marl Meine Schule Die Befehle, die man für die Erstellung einer HTML-Seite benötigt, heißen TAGS (TAG (engl.)

Ähnliche Präsentationen


Präsentation zum Thema: "Autor: H.Sporenberg Einführung in HTML ASGSG – Marl Meine Schule Die Befehle, die man für die Erstellung einer HTML-Seite benötigt, heißen TAGS (TAG (engl.)"—  Präsentation transkript:

1 Autor: H.Sporenberg Einführung in HTML ASGSG – Marl Meine Schule Die Befehle, die man für die Erstellung einer HTML-Seite benötigt, heißen TAGS (TAG (engl.) -> Auszeichner). Die TAGS werden in spitze Klammern geschrieben. In der Regel werden TAGS geöffnet und dann geschlossen. Das Schließen der TAGS geschieht durch Voranstellen eines Schrägstrichs. z.B.: …. Die TAGS unterliegen nicht der Groß- und Kleinschreibung. So sind folgende Schreibweisen äquivalent: = = usw.

2 Autor: H.Sporenberg Einführung in HTML ASGSG – Marl Meine Schule Der Text bildet das Grundgerüst einer HTML- Seite. Das Anfangs-TAG ist immer. Innerhalb dieses -TAG gibt es zwei Bereiche: 1.Den -Bereich: hier werden z.B. die CSS-Formatierungen, Programmierungen usw. durchgeführt. Mit dem TAG Title wird der Text angegeben, der in der Head-Zeile des Explorers erscheinen soll. 2.Den -Bereich: hier erscheint alles, was nachher auf dem Bildschirm zu sehen sein soll.

3 Autor: H.Sporenberg Einführung in HTML ASGSG – Marl Meine Schule Überschriften werden mit Hilfe der TAGS … hervorgehoben (größere Schrift). Dabei ist ´ die größte, die kleinste Schrift. Achtung: nach gibt es einen Zeilenumbruch (=neue Zeile) Der Hintergrund kann farbig gestaltet werden. Dieses wird im BODY als Attribut angegeben. Dabei kann eine große Anzahl von Farben durch einen Farbnamen angegeben werden. Eine andere Möglichkeit ist die Angabe der Farbe als Hexadezimalzahl: bgcolor=# FF1493 -> deeppink

4 Autor: H.Sporenberg Einführung in HTML 1.Feld 2.Feld 3.Feld 4.Feld Das ist das Grundgerüst einer Tabelle mit zwei Zeilen und jeweils 2 Datenlementen. Der Eingangs-TAG ist. Die Datenelemente einer Reihe werden mit (=Table-Row) eingeleitet. Die eigentlichen Datenelemente werden mit (= Table-Date) eingefügt. Tabellen

5 Autor: H.Sporenberg Einführung in HTML 1.Feld 2.Feld 3.Feld 4.Feld Mit Hilfe von Attributen, die im TABLE-Tag angegeben werden, kann die Tabelle auch optisch gestaltet werden. Wichtige Attribute sind: border, bordercolor, cellspacing, cellpadding Tabellen

6 Autor: H.Sporenberg Einführung in HTML 1.Feld 2.Feld 3.Feld 4.Feld Aufgabe: Stelle deinen Stundenplan in einer HTML- Tabelle dar. Tabellen

7 Autor: H.Sporenberg Einführung in HTML 1.Feld 2.Feld 3.Feld 4.Feld Im Beispiel: Durch Angabe einer Zahl zwischen 1 und 7 können unterschiedliche Rahmenarten erzeugt werden. Mit bordercolor kann dem Rahmen eine Farbe gegeben werden. Mit cellspacing wird der Abstand der Zellen festgelegt, mit cellpadding der Abstand des Zelleninhalts zum Rand der Zelle. Tabellen

8 Autor: H.Sporenberg Einführung in HTML GSG - MARL Die maximale Anzahl der Spalten ist 3. In der ersten Zeile werden drei Spalten zusammengefasst. Dies geschieht durch das Attribut colspan mit der entspre- chenden Anzahl von Spalten Tabellen Formatieren einer Tabelle

9 Autor: H.Sporenberg Einführung in HTML 4. Feld 5. Feld In der dritten Zeile werden zwei Spalten zusammen- gefasst. Dies geschieht wieder durch das Attribut colspan mit der ent- sprechenden Anzahl von Spalten. Eine Spalte bleibt normal. Tabellen Formatieren einer Tabelle

10 Autor: H.Sporenberg Einführung in HTML 6. Feld 7. Feld 8. Feld 9. Feld 10. Feld Es können auch Zeilen zusammengefasst werden. Dies geschieht durch rowspan mit der entsprechenden Anzahl von Zeilen. Tabellen Formatieren einer Tabelle

11 Autor: H.Sporenberg Einführung in HTML Coldplay Michael Jackson Tom Waits Rolling Stones Madonna Mit … wird ein Formular definiert. Alles was zwischen diesen TAGs steht, gehört zum Formular. Das sind hauptsächlich Elemente des Formulars wie Eingabefelder, Auswahllisten oder Buttons. Mit dem Attribut size bestimmen Sie die Anzeigegröße der Liste, d.h. wie viele Einträge angezeigt werden sollen. Mit... definieren Sie zwischen dem einleitenden -Tag und dem Abschluss-Tag jeweils einen Eintrag der Auswahlliste. Die Auswahlliste leitet eine Auswahl- liste ein. Jede Auswahlliste sollte einen internen Bezeichnernamen erhalten, und zwar mit dem Attribut name. Formulare

12 Autor: H.Sporenberg Einführung in HTML Vorname: Einzeilige Eingabefelder definiert ein einzeiliges Eingabefeld (input = Eingabe). Der Vollständigkeit halber sollte man die Angabe type="text" dazusetzen. Jedes Eingabefeld sollte einen internen Bezeichnernamen erhalten, und zwar mit dem Attribut name. Formulare

13 Autor: H.Sporenberg Einführung in HTML Mehrzeilige Eingabebereiche Mehrzeilige Eingabefelder dienen zur Aufnahme von Kommentaren, Nachrichten usw. leitet ein mehrzeiliges Eingabefeld ein (textarea = Textbereich). Jedes mehrzeilige Eingabefeld sollte ebenso einen internen Bezeichnernamen erhalten, und zwar mit dem Attribut name.Pflicht ist die Angabe zur Höhe und Breite des Eingabebereichs. Das Attribut rows bestimmt die Anzahl der angezeigten Zeilen (rows = Zeilen) und damit die Höhe, während cols die Anzahl der angezeigten Spalten (cols = columns = Spalten) festlegt. "Spalten" bedeutet dabei die Anzahl Zeichen (pro Zeile). Mit schließen Sie das mehrzeilige Eingabefeld ab. Das End-Tag ist unbedingt notwendig und darf nicht weggelassen werden Formulare

14 Autor: H.Sporenberg Einführung in HTML Männlich/Weiblich? männlich weiblich Radio-Buttons Radio-Buttons sind eine Gruppe von beschrifteten Knöpfen, von denen der Anwender einen auswählen kann. Es kann immer nur einer der Radio-Buttons ausgewählt sein. Der Wert des ausgewählten Radio-Buttons wird beim Absenden des Formulars mit übertragen. Radio-Buttons werden durch definiert (input = Eingabe). Jeder Radio-Button sollte einen internen Bezeichnernamen erhalten, und zwar mit dem Attribut name. Alle Radio-Buttons, die den gleichen Namen haben, gehören zu einer Gruppe, d.h. von diesen Buttons kann der Anwender genau einen markieren. Formulare

15 Autor: H.Sporenberg Einführung in HTML Salami Pilze Sardellen Check-Buttons Checkboxen sind eine Gruppe von ankreuzbaren Quadraten, bei denen der Anwender keine, eins oder mehrere auswählen kann. Die Werte von ausgewählten Checkboxen werden beim Absenden des Formulars mit übertragen. Checkboxen werden durch definiert (input = Eingabe). Jede Checkbox muss einen internen Bezeichnernamen erhalten, und zwar mit dem Attribut name. Alle Checkboxen, die den gleichen Namen haben, gehören zu einer Gruppe, d.h. von diesen Elementen kann der Anwender keines, eines oder mehrere ankreuzen. Formulare

16 Autor: H.Sporenberg Einführung in HTML Biographien berühmter Physiker Einstein Bohr Planck Einstein { Hier stünde der Text für A. Einstein} Bohr {Hier stünde der Text für N. Bohr} Ein interner Link wird gesetzt, um innerhalb einer HTML-Seite verschiedene Bereiche auf dieser Seite zu erreichen. Links Im Beispiel sollen Lebensläufe über verschiedene Physiker informieren. Praktisch als Inhaltsverzeichnis werden die verschiedenen Physiker aufgeführt, ein Mausklick führt dann zu deren Beschreibung.

17 Autor: H.Sporenberg Einführung in HTML Die schnellsten Autos sollen über interne Links angezeigt werden Als erstes definiert man die unterschiedlichen CSS-Formatierungen Links.schrift1{font-size:25;font-family:Verdana;background-color:#EEDC82}.schrift2{font-size:18;font-family:Verdana;color:#212121}.schrift3{font-size:18;font-family:Arial,Verdana;}.schrift4{font-size:20;font-family:Verdana;color:#212121}.schrift5{font-size:30;font-family:Lucida Console,Arial,Verdana; background-color:#EEEED1;position:absolute;left:10%;top:1%;}.rahmen1{position:absolute;left:5%;top:2%; border-width:8px;width:8px;height:1200px; border-style:ridge;padding:12px; background-color:#ff4500;}

18 Autor: H.Sporenberg Einführung in HTML Die schnellsten Autos sollen über interne Links angezeigt werden Die ganze Seite soll als Tabelle angeordnet werden. Links Die schnellsten Autos der Welt Das Banner mit der Überschrift ist in einer Tabelle dargestellt.

19 Autor: H.Sporenberg Einführung in HTML Die schnellsten Autos sollen über interne Links angezeigt werden In einer nächsten Tabelle werden die Verweise realisiert Links Porsche Bugatti Ferrari

20 Autor: H.Sporenberg Einführung in HTML Die schnellsten Autos sollen über interne Links angezeigt werden Die Angaben und das Bild des entsprechenden Autos werden in einer Tabelle realisiert. Dabei werden die Leistungsdaten in einer Tabelle in der Tabelle angeordnet. Links Porsche 911 TURBO Hubraum: 3200 ccm PS: 450 Höchstgeschwindigkeit: 303 km/h Die blau markierte Tabelle beinhaltet die Leistungsdaten und ist im Prinzip ein Datenelement, das zweite Datenelement stellt das Bild des Autos dar.

21 Autor: H.Sporenberg Einführung in HTML Die schnellsten Autos sollen über interne Links angezeigt werden Links

22 Autor: H.Sporenberg Einführung in HTML 1. Kapitel 2. Kapitel 1. Kapitel 2. Kapitel Unsortierte Liste Eine unsortierte Liste beginnt mit einem einleitenden Tag. Jeder Listeneintrag beginnt mit dem Tag und wird beendet mit dem Tag. Beendet wird die Liste mit dem abschließenden Tag. Das Aussehen der Listenpunkte kann man selbst bestimmen. Dazu wird im einleitenden Tag das type-Attribut angegeben. Dazu stehen zur Auswahl: circle – ein Kreis square – ein Viereck disc – ein Karo Listen

23 Autor: H.Sporenberg Einführung in HTML Mars Merkur Sortierte Liste Eine sortierte Liste beginnt mit einem einleitenden Tag. Jeder Listeneintrag beginnt mit dem Tag und wird beendet mit dem Tag. Beendet wird die Liste mit dem abschließenden Tag. Soll die Liste nicht mit 1 sondern mit einer anderen Zahl beginnen, so wird der einleitende Tag mit start=5 erweitert. Listen Mars Merkur

24 Autor: H.Sporenberg Einführung in HTML Mars Merkur Sortierte Liste Soll die Liste mit römischen Zah- len nummeriert werden, so wird der einleitende Tag mit type = I erweitert. Listen Soll die Liste mit großen Buchstaben nummeriert werden, so wird der einleitende Tag mit type = A erweitert. Mars Merkur

25 Autor: H.Sporenberg Einführung in HTML Frames teilen das Fenster in zwei oder mehr Bereiche, wobei ein größerer Bereich die Informationen und ein oder mehrere kleinere Bereiche ein Logo, Navigations-Links oder beides enthalten. Wegen des begrenzten Platzes in den meisten Browser-Fenstern empfiehlt es sich selten, mehr als zwei oder drei Frames zu verwenden. Frames

26 Autor: H.Sporenberg Einführung in HTML 1. Frames werden vielfach im Internet verwendet und zeugen oft von einer technisch ausgefeilten Seiten. 2. Frames verringern die Downloadzeit. 3. Frames erhöhen die Anwenderfreundlichkeit. Das Navigationsmenü bleibt sichtbar, während sich der Inhalt in einem anderen Frame ändert. 4. Da Frames den Inhalt von Navigations- u. Strukturelementen trennen, kann man Seiten schnell und problemlos aktualisieren und neue Informationen anbieten. Frames Vorteile

27 Autor: H.Sporenberg Einführung in HTML Im Beispiel sollen zwei senkrechte Frames erzeugt werden. Im linken Frame soll sich das Inhaltsverzeichnis befinden, im rechten die Information. Die Index-Seite: Die Frame-Fenster sollten mit einem Namen versehen werden, da man so das Zielfenster der entsprechenden Seite besser angeben kann. Frames

28 Autor: H.Sporenberg Einführung in HTML ASGSG - Infokurs Frames Das Programm, das die Frames festlegt. Für den ersten Aufruf benötigt man neben der Seite, in der die Frames erzeugt werden, noch zwei weitere HTML-Dateien. In diesem Fall heißen diese MenueVertikal_1.html und ersteseite.html

29 Autor: H.Sporenberg Einführung in HTML Frames So sieht die Seite aus.

30 Autor: H.Sporenberg Einführung in HTML Frames So sieht die Seite aus.

31 Autor: H.Sporenberg Einführung in HTML #navcontainer { width: 200px; } #navcontainer ul {margin-left: 0; padding-left: 0; list-style-type: none; font-size:14; font-family: Verdana,Arial, Helvetica, sans-serif;} #navcontainer a {display: block; padding: 3px; width: 160px; background-color: #898989; border-bottom: 1px solid #eee;} Menue 1 Menues mit Hilfe von Style-Sheets Größe der Schriftart Farbe vor dem Besuch der Seite

32 Autor: H.Sporenberg Einführung in HTML Item one Item two Item three Item four Item five Menue 1 Menues mit Hilfe von Style-Sheets Dieser Teil gehört in den Body der HTML-Seite

33 Autor: H.Sporenberg Einführung in HTML #navcontainer {background: #f0e7d7; width: 20%; margin: 0 auto; padding: 1em 0; font-family: verdana,georgia, serif; font-size: 13px; text-align: center; text-transform: lowercase;} ul#navlist {text-align: left; list-style: none; padding: 0; margin: 0 auto; width: 70%;} Menue 2 Menues mit Hilfe von Style-Sheets ul#navlist li {display: block; margin: 0; padding: 0;} Das alles gehört in die CSS-Definition

34 Autor: H.Sporenberg Einführung in HTML ul#navlist li a {display: block; width: 100%; padding: 0.5em 0 0.5em 2em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #ffcc00;} #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a {background: #eecc00; color: #800000;} Menue 2 Menues mit Hilfe von Style-Sheets Das alles gehört in die CSS-Definition

35 Autor: H.Sporenberg Einführung in HTML ul#navlist li a:hover, ul#navlist li#active a:hover {color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc;} Menue 2 Menues mit Hilfe von Style-Sheets Item one Item two Item three Item four Item five Das gehört in den Body Das alles gehört in die CSS-Definition

36 Autor: H.Sporenberg Einführung in HTML Menue 2 Menues mit Hilfe von Style-Sheets Und so sieht es aus

37 Autor: H.Sporenberg Einführung in HTML Menue 3 Menues mit Hilfe von Style-Sheets #navcontainer ul {margin: 0; padding: 0; list-style-type: none; font-family: Arial, Helvetica, sans-serif; font-size: 14px;} #navcontainer li { margin: 0 0 3px 0;} #navcontainer a {display: block; padding: 2px 2px 2px 24px; border: 1px solid #333; width: 160px; background-color: #999;} Das alles gehört in die CSS-Definition

38 Autor: H.Sporenberg Einführung in HTML Menue 3 Menues mit Hilfe von Style-Sheets #navcontainer a:link, #navlist a:visited {color: #EEE; text-decoration: none;} #navcontainer a:hover {border: 1px solid #333; background-color: #F60; background-image: url(images/l1_over.gif); color: #333;} #active a:link, #active a:visited, #active a:hover {border: 1px solid #333; background-color: #FF6600;color: #333;} Das alles gehört in die CSS-Definition

39 Autor: H.Sporenberg Einführung in HTML Menue 3 Menues mit Hilfe von Style-Sheets Item one Item two Item three Item four Item five Das gehört in den Body

40 Autor: H.Sporenberg Einführung in HTML Menue 4 Menues mit Hilfe von Style-Sheets #navcontainer{background: #f0e7d7; margin: 0 auto; padding: 1em 0 0 0; font-family: georgia, serif; text-transform: lowercase;} /* to stretch the container div to contain floated list */ #navcontainer:after{content: "."; display: block; line-height: 1px; font-size: 1px; clear: both;} ul#navlist{list-style: none; padding: 0; margin: 0 auto; width: 80%; font-size: 0.8em;} Das alles gehört in die CSS-Definition

41 Autor: H.Sporenberg Einführung in HTML Menue 4 Menues mit Hilfe von Style-Sheets ul#navlist li{display: block; float: left;width: 15%;margin: 0;padding: 0;} ul#navlist li a{display: block; width: 100%; padding: 0.5em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea;} #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a{background: #f0e7d7; color: #800000;} Das alles gehört in die CSS-Definition

42 Autor: H.Sporenberg Einführung in HTML Menue 4 Menues mit Hilfe von Style- SCheets ul#navlist li{display: block; float: left;width: 15%;margin: 0;padding: 0;} ul#navlist li a{display: block; width: 100%;padding: 0.5em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid;color: #777; text-decoration: none; background: #f7f2ea;} #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a{background: #f0e7d7; color: #800000;} Das alles gehört in die CSS- Definition ul#navlist li a:hover, ul#navlist li#active a:hover{ color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc;}

43 Autor: H.Sporenberg Einführung in HTML Menue 4 Menues mit Hilfe von Style-Sheets Item one Item two Item three Item four Item five Das gehört in den Body

44 Autor: H.Sporenberg Einführung in HTML Menue 5 Menues mit Hilfe von Style-Sheets Das alles gehört in die CSS-Definition

46 Autor: H.Sporenberg Einführung in HTML Menue 5 Menues mit Hilfe von Style-Sheets Home CSS Forums Webmaster Tools JavaScript Gallery Das gehört in den Body

47 Autor: H.Sporenberg Einführung in HTML Menue 5 Menues mit Hilfe von Style-Sheets

48 Autor: H.Sporenberg Einführung in HTML Zusammenstellung CSS Hier kann man sich über die einzelnen Attribute informieren und im Beispiel angesehen werden.

49 Autor: H.Sporenberg Einführung in HTML Zusammenstellung CSS - Befehle BefehlBedeutungMögliche Angaben Schrift font-familySchriftartArial, Verdana etc. font-sizeSchriftgrößeZahlenwert in pt(Punkte), mm oder cm colorSchriftfarbered, green oder hexadezimal font-variantSchriftvariantenormal, small-caps font-weightSchriftgewichtnormal, bold, bolder lighter font-styleSchriftstilnormal, oblique, italic

50 Autor: H.Sporenberg Einführung in HTML Zusammenstellung CSS - Befehle BefehlBedeutungMögliche Angaben Textgestaltung text-alignTextausrichtungleft, right, center, justify (Blocksatz) line-heightZeilenbstandNumerischer Wert in pt, mm oder cm text-decorationTextgestaltungunderline, overline, line-through, blink word-spacingWortabstandNumerischer Wert in pt, mm oder cm letter-spacingZeichenabstandNumerischer Wert in pt, mm oder cm text-indentTexteinrückungNumerischer Wert in pt, mm oder cm text-transformTextartCapitalize, uppercase, lowercase, none

51 Autor: H.Sporenberg Einführung in HTML Zusammenstellung CSS - Befehle BefehlBedeutungMögliche Angaben Seitenränder margin-left Absoluter Abstand zum SeitenrandNumerischer Wert in pt, mm oder cm margin-right Absoluter Abstand zum SeitenrandNumerischer Wert in pt, mm oder cm margin-bottom Absoluter Abstand zum SeitenrandNumerischer Wert in pt, mm oder cm margin-top Absoluter Abstand zum SeitenrandNumerischer Wert in pt, mm oder cm

52 Autor: H.Sporenberg Einführung in HTML Zusammenstellung CSS - Befehle BefehlBedeutungMögliche Angaben Links A:linkLinkFast alle CSS-Befehle anwendbar A:visitedBesuchter LinkFast alle CSS-Befehle anwendbar A:activeAngeklickter LinkFast alle CSS-Befehle anwendbar A:hover Link beim Über- fahren der Maus Fast alle CSS-Befehle anwendbar

53 Autor: H.Sporenberg Einführung in HTML Zusammenstellung CSS - Befehle BefehlBedeutungMögliche Angaben Bilder backgroundHintergrundfarbe red, green, white usw. oder hexadezimale Farbangabe background-imageHintergrundbildnone, URL background-repeatKachelRepeat, repeat-x, repeat- y, no-repeat

54 Autor: H.Sporenberg Einführung in HTML Zusammenstellung CSS - Befehle BefehlBedeutungMögliche Angaben Ränder border-top-widthDicke der Rahmenliniethin, medium, thick oder num. Wert border-bottom- widthDicke der Rahmenliniethin, medium, thick oder num. Wert border-left-widthDicke der Rahmenliniethin, medium, thick oder num. Wert border-right-widthDicke der Rahmenliniethin, medium, thick oder num. Wert border-styleRahmentyp none, dotted, dashed, solid, double, groove, inset, outset border-colorRamenfarbeFarbname oder hexadezimal

55 Autor: H.Sporenberg Einführung in HTML Zusammenstellung CSS - Befehle BefehlBedeutungMögliche Angaben Ränder padding-topTabellenabstand obenProzent oder num. Wert padding-bottomTabellenabstand untenProzent oder num. Wert padding-rightTabellenabstand rechtsProzent oder num. Wert padding-rightTabellenabstand linksProzent oder num. Wert widthRahmenbreitAuto, Prozent oder num. Wert heightRahmenhöheAuto, Prozent oder num. Wert


Herunterladen ppt "Autor: H.Sporenberg Einführung in HTML ASGSG – Marl Meine Schule Die Befehle, die man für die Erstellung einer HTML-Seite benötigt, heißen TAGS (TAG (engl.)"

Ähnliche Präsentationen


Google-Anzeigen