Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Einführung in HTML Die Befehle, die man für die Erstellung einer HTML-Seite benötigt, heißen TAGS (TAG (engl.) -> Auszeichner). ASGSG.</h1> <p class="uk-article-meta">Veröffentlicht von:<a href="/user/667782/" class="uk-margin-small-left uk-margin-small-right">Klothilda Landsberg</a> <span id="timeago" class="uk-float-right">Geändert vor über 3 Jahren</span> </p> </div> <!-- <div id="C4FQMBACHBKF4" class="ads"></div>--> <div id="C4FQMBACHBLFIVY" class="AYBRI AYBRIOAPBYBQGAQJ uk-margin uk-text-center"></div> <div id="social-share" class="uk-float-left uk-margin"> <div id="pluses"> <div class="addthis_toolbox addthis_default_style addthis_32x32_style"> <a class="addthis_button_facebook"></a> <a class="addthis_button_twitter"></a> <a class="addthis_button_linkedin"></a> <a class="addthis_button_google_plusone_share"></a> <a class="addthis_button_blogger"></a> <a class="addthis_button_flipboard"></a> <a class="addthis_button_google"></a> <a class="addthis_button_gmail"></a> <a class="addthis_button_vk"></a> <a class="addthis_button_email"></a> <a class="addthis_button_pinterest_share"></a> <a class="addthis_button_tumblr"></a> <a class="addthis_button_myspace"></a> <a class="addthis_button_wordpress"></a> <a class="addthis_button_ziczac"></a> <a class="addthis_button_print"></a> <a class="addthis_button_favorites"></a> <a class="addthis_button_whatsapp"></a> <a class="addthis_button_reddit"></a> <a class="addthis_counter addthis_bubble_style"></a> </div> </div> </div> <!-- <form method="post" action="/slide/download/" id="download_form_2">--> <div class="uk-float-right uk-margin" id="get-code-btn"> <div class="uk-button-group uk-margin-small-right"> <button type="button" class="uk-button uk-button uk-button-primary"><span class="uk-icon-code"></span></button> <button type="button" data-original-title="Embed this presentation" id="get_embed" class="uk-button uk-button">Einbetten</button> </div> <!-- <input type="hidden" name="slide_id" value="--><!--" />--> <div class="uk-button-group" id="download-btn"> <button class="uk-button uk-button uk-button-success" data-toggle="modal" data-target="#download-modal"><span class="uk-icon-cloud-download"></span></button> <button class="uk-button uk-button" data-toggle="modal" data-target="#download-modal">Präsentation herunterladen</button> </div><!-- <button type="submit" class="uk-button uk-button uk-button-success"><span class="uk-icon-cloud-download"></span></button>--> <!-- <button type="submit" class="uk-button uk-button">--><!--</button>--> </div> <!-- </div>--> <!-- </form>--> <div id="C4FQMBACHBLFIVQ" class="AYBRI AYBRIOAPBYBQGAQJ uk-display-inline-block uk-margin uk-margin-small-bottom uk-text-center"></div> </div> </div> <div class="uk-panel uk-panel-box uk-panel-box-secondary uk-margin" id="embed" style="display: none"> <div class="uk-margin uk-text-right"> <div class="uk-form-row"> <textarea rows="3" cols="" id="embed_input"></textarea> </div> <div class="uk-button-group"> <button class="uk-button uk-button uk-button-success"><span class="uk-icon-copy"></span></button> <button title="Customize embed code" id="copyembed" class="uk-button uk-button"> In Zwischenablage kopieren</button> </div> </div> </div> <div class="top_comment_banners uk-text-center uk-nbfc"> <div id="C4FQMBACHBLFKXQ" class="AYBRI AYBRIOAPBYBQGAQJ uk-display-inline-block uk-text-center uk-margin-small-bottom uk-margin-small-right uk-margin-small-top"></div> <div id="C4FQMBACHBLFIUI" class="AYBRI AYBRIOAPBYBQGAQJ uk-display-inline-block uk-text-center uk-margin-small-bottom uk-margin-small-left uk-margin-small-top"></div> </div> <div class="uk-panel uk-panel-box uk-panel-box-secondary uk-margin" id="fb_wrapper"> <div class="fb-comments" data-href="http://slideplayer.org/slide/666733/" data-numposts="5" data-width="100%""></div> </div> <div class="bottom_comment_banners uk-text-center uk-nbfc"> <div id="C4FQMBACHBLFIUA" class="AYBRI AYBRIOAPBYBQGAQJ uk-text-center uk-margin-small-bottom uk-margin-small-right uk-display-inline-block uk-margin-small-top"></div> <div id="C4FQMBACHBLFIXY" class="AYBRI AYBRIOAPBYBQGAQJ uk-text-center uk-margin-small-bottom uk-margin-small-left uk-display-inline-block uk-margin-small-top"></div> </div> <div id="after_comment_similars" class="uk-margin-bottom uk-margin-top uk-panel uk-panel-box uk-panel-box-secondary uk-margin"> <h3 class="tm-text-dark"> <span class="uk-icon-list uk-margin-small-right"></span>Ähnliche Präsentationen </h3> <hr class="uk-article-divider"> <div></div> <button class="uk-button uk-margin-top uk-button-primary uk-width-1-1" id="load_more_btn"><span class="uk-icon-arrow-circle-down uk-margin-small-right"></span>Mehr dazu</button> </div> <div class="uk-panel uk-panel-box uk-panel-box-secondary uk-margin"> <div class="uk-article"> <h2 class="transkript-title">Präsentation zum Thema: "Einführung in HTML Die Befehle, die man für die Erstellung einer HTML-Seite benötigt, heißen TAGS (TAG (engl.) -> Auszeichner). <HTML> <HEAD> <TITLE>ASGSG."—  Präsentation transkript:</h2> <div id="C4FQMBACHBLFG" class="AYBRI AYBRIOAPBYBQGAQJ"></div> <div id="C4FQMBACHBLFGVQ" class="AYBRI AYBRIOAPBYBQGAQJ uk-float-right uk-margin-small-left"></div> <p class="uk-text-justify uk-nbfc uk-margin "> <span class="uk-badge uk-margin-small-right"> <a href="http://slideplayer.org/666733/1/images/1/Einf%C3%BChrung+in+HTML+Die+Befehle%2C+die+man+f%C3%BCr+die+Erstellung+einer+HTML-Seite+ben%C3%B6tigt%2C+hei%C3%9Fen+TAGS+%28TAG+%28engl.%29+-%3E+Auszeichner%29..jpg" target="_blank" title="Einführung in HTML Die Befehle, die man für die Erstellung einer HTML-Seite benötigt, heißen TAGS (TAG (engl.) -> Auszeichner)." class="image_link uk-text-large uk-margin-small-left uk-margin-small-right">1</a> </span> <span>Einführung in HTML</span> <span class='tr'>Die Befehle, die man für die Erstellung einer HTML-Seite benötigt, heißen TAGS (TAG (engl.) -> Auszeichner).</span> <span class='tr'><HTML></span> <span class='tr'><HEAD></span> <span class='tr'><TITLE>ASGSG – Marl</span> <span class='tr'></TITLE></span> <span class='tr'></HEAD></span> <span class='tr'><BODY ></span> <span class='tr'>Meine Schule</span> <span class='tr'></BODY></span> <span class='tr'></HTML></span> <span class='tr'>Die TAGS werden in spitze Klammern geschrieben.</span> <span class='tr'>In der Regel werden TAGS geöffnet und dann geschlossen.</span> <span class='tr'>Das Schließen der TAGS geschieht durch Voranstellen eines Schrägstrichs.</span> <span class='tr'>z.B.: <HTML> …. </HTML></span> <span class='tr'>Die TAGS unterliegen nicht der Groß- und Kleinschreibung. So sind folgende Schreibweisen äquivalent:</span> <span class='tr'><HTML> = <html> = <Html> usw.</span> <span class='tr'>Autor: H.Sporenberg</span> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.org/666733/1/images/1/Einf%C3%BChrung+in+HTML+Die+Befehle%2C+die+man+f%C3%BCr+die+Erstellung+einer+HTML-Seite+ben%C3%B6tigt%2C+hei%C3%9Fen+TAGS+%28TAG+%28engl.%29+-%3E+Auszeichner%29..jpg", "name": "Einführung in HTML Die Befehle, die man für die Erstellung einer HTML-Seite benötigt, heißen TAGS (TAG (engl.) -> Auszeichner).", "description": "<HTML> <HEAD> <TITLE>ASGSG – Marl. Meine Schule. 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. Autor: H.Sporenberg.", "width": "800" }

2 Einführung in HTML <HTML> <HEAD> <TITLE>ASGSG – Marl
Der Text bildet das Grundgerüst einer HTML-Seite. Das Anfangs-TAG ist immer <HTML>. Innerhalb dieses <HTML>-TAG gibt es zwei Bereiche: 1.Den <HEAD>-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 <BODY>-Bereich: hier erscheint alles, was nachher auf dem Bildschirm zu sehen sein soll. <HTML> <HEAD> <TITLE>ASGSG – Marl </TITLE> </HEAD> <BODY > Meine Schule </BODY> </HTML> Autor: H.Sporenberg

3 Einführung in HTML <HTML> <HEAD> <TITLE>ASGSG – Marl
Überschriften werden mit Hilfe der TAGS <H1>… <H6> hervorgehoben (größere Schrift). Dabei ist ´<H1> die größte, <H6> die kleinste Schrift. Achtung: nach <H1> gibt es einen Zeilenumbruch (=neue Zeile) <HTML> <HEAD> <TITLE>ASGSG – Marl </TITLE> </HEAD> <BODY bgcolor=blue> <H1>Meine Schule</H1> </BODY> </HTML> Der Hintergrund kann farbig gestaltet werden. Dieses wird im BODY als Attribut angegeben. <BODY bgcolor=blue> 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=#FF > deeppink Autor: H.Sporenberg

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

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

6 Einführung in HTML Tabellen
Aufgabe: Stelle deinen Stundenplan in einer HTML-Tabelle dar. <TABLE border=“3“ bordercolor=blue cellspacing=5 cellpadding=5> <TR> <TD>1.Feld</TD> <TD>2.Feld</TD> </TR> <TD>3.Feld</TD> <TD>4.Feld</TD> </TABLE> Autor: H.Sporenberg

7 Einführung in HTML Tabellen
<TABLE border=“3“ bordercolor=blue cellspacing=5 cellpadding=5> <TR> <TD>1.Feld</TD> <TD>2.Feld</TD> </TR> <TD>3.Feld</TD> <TD>4.Feld</TD> </TABLE> 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. Autor: H.Sporenberg

8 Einführung in HTML Tabellen Formatieren einer Tabelle
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 <tr bgcolor=#cdcdcd> <td colspan=3> GSG - MARL</td> </tr> Autor: H.Sporenberg

9 Einführung in HTML Tabellen Formatieren einer Tabelle
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. <tr bgcolor=#cdcdcd> <td >4. Feld</td> <td colspan=2>5. Feld</td> </tr> Autor: H.Sporenberg

10 Einführung in HTML Tabellen Formatieren einer Tabelle
<tr bgcolor=#cdcdcd> <td >6. Feld</td> <td rowspan=2>7. Feld</td> <td>8. Feld</td> </tr> <td >9. Feld</td> <td>10. Feld</td> Es können auch Zeilen zusammengefasst werden. Dies geschieht durch rowspan mit der entsprechenden Anzahl von Zeilen. Autor: H.Sporenberg

11 Einführung in HTML Formulare Die Auswahlliste
Mit <FORM>…</FORM> 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. Die Auswahlliste <FORM> <select name=„hits" size="3"> <option>Coldplay</option> <option>Michael Jackson</option> <option>Tom Waits</option> <option>Rolling Stones</option> <option>Madonna</option> </select> </FORM> <select ...> leitet eine Auswahl-liste ein. Jede Auswahlliste sollte einen internen Bezeichnernamen erhalten, und zwar mit dem Attribut name. Mit dem Attribut size bestimmen Sie die Anzeigegröße der Liste, d.h. wie viele Einträge angezeigt werden sollen. Mit <option>...</option> definieren Sie zwischen dem einleitenden <select>-Tag und dem Abschluss-Tag </select> jeweils einen Eintrag der Auswahlliste. Autor: H.Sporenberg

12 Einführung in HTML Formulare Einzeilige Eingabefelder
Vorname:<br><INPUT name="vorname" type="text" size="30" maxlength="30"> </FORM> <INPUT> 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. Autor: H.Sporenberg

13 Einführung in HTML Formulare Mehrzeilige Eingabebereiche
<textarea name=„Benutzer_Eingabe" cols="50" rows="10"></textarea> </FORM> Mehrzeilige Eingabefelder dienen zur Aufnahme von Kommentaren, Nachrichten usw. <textarea ...> 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 </textarea> schließen Sie das mehrzeilige Eingabefeld ab. Das End-Tag ist unbedingt notwendig und darf nicht weggelassen werden Autor: H.Sporenberg

14 Einführung in HTML Formulare Radio-Buttons Männlich/Weiblich?
<input type=radio name=„Geschlecht“ value=„m“>männlich <input type=radio name=„Geschlecht“ value=„w“>weiblich </FORM> 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 <input type="radio"> 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. Autor: H.Sporenberg

15 Einführung in HTML Formulare Check-Buttons
<input type="checkbox" name="zutat" value="salami"> Salami<br> <input type="checkbox" name="zutat" value="pilze"> Pilze<br> <input type="checkbox" name="zutat" value="sardellen"> Sardellen </FORM> 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 <input type="checkbox"> 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. Autor: H.Sporenberg

16 Einführung in HTML Links <body>
<h1>Biographien berühmter Physiker </h1> <a href="#Einstein">Einstein</a><br> <a href="#Bohr">Bohr</a><Br> <a href="#Planck">Planck</a><br> <b><a name="Einstein">Einstein</a></b> { Hier stünde der Text für A. Einstein} <b><a name="Bohr">Bohr</a></b> {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. 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. Autor: H.Sporenberg

17 Einführung in HTML Links
Die schnellsten Autos sollen über interne Links angezeigt werden Als erstes definiert man die unterschiedlichen CSS-Formatierungen <style type="text/css"> .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;} </style> Autor: H.Sporenberg

18 Einführung in HTML Links
Die schnellsten Autos sollen über interne Links angezeigt werden Die ganze Seite soll als Tabelle angeordnet werden. <center><table width=90% <div class="schrift5"> <tr> <td><center>Die schnellsten Autos</center><center>der Welt</center></td> <td><img src="AutoBilder\BannerAuto.jpg" > </td> </tr> </table></center></div> <br><br><br><br><br><br><br> Das Banner mit der Überschrift ist in einer Tabelle dargestellt. Autor: H.Sporenberg

19 Einführung in HTML Links
Die schnellsten Autos sollen über interne Links angezeigt werden In einer nächsten Tabelle werden die Verweise realisiert <center><table cellpadding=8 width=70%> <tr bgcolor=#CDBE70><div class="schrift2"> <td width=33%><a href="#Porsche" div class="schrift2"><center>Porsche</center></a> </td> <td width=33%><a href="#Bugatti" div class="schrift2"><center>Bugatti</center></a> </td> <td><a href="#Ferrari" div class="schrift2"><center>Ferrari</center></a></td> </tr></div> </table></center> Autor: H.Sporenberg

20 Einführung in HTML Links
Die schnellsten Autos sollen über interne Links angezeigt werden <center> <table cellspacing=15 > <tr><td colspan=2><div class="schrift1"> <a name="Porsche"><center>Porsche 911 TURBO</a></center> </td></div></tr> <tr> <td> <center><table cellspacing=15> <tr bgcolor=#efefef> <td> <div class="schrift3">Hubraum: </td> <td> <div class="schrift3">3200 ccm </td> </div> </tr> <td><div class="schrift3">PS: </td> <td><div class="schrift3">450 </td> <td><div class="schrift3">Höchstgeschwindigkeit: </td> <td><div class="schrift3">303 km/h </td> </table></center> </td> Die Angaben und das Bild des entsprechenden Autos werden in einer Tabelle realisiert. Dabei werden die Leistungsdaten in einer Tabelle in der Tabelle angeordnet. <td> <img src="AutoBilder\Porsche2.jpg" width="476" height="357"></td> </tr> </table></center> Die blau markierte Tabelle beinhaltet die Leistungsdaten und ist im Prinzip ein Datenelement, das zweite Datenelement stellt das Bild des Autos dar. Autor: H.Sporenberg

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

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

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

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

25 Einführung in HTML Frames
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. Autor: H.Sporenberg

26 Einführung in HTML Frames
Vorteile 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. Autor: H.Sporenberg

27 Einführung in HTML Frames
Im Beispiel sollen zwei senkrechte Frames erzeugt werden. Im linken Frame soll sich das Inhaltsverzeichnis befinden, im rechten die Information. Die Index-Seite: <frameset cols="20%,80%" border=6 bordercolor=blue > <frame src="inhalt.htm" name="InhaltsFenster"> <frame src="ersteseite.htm" name="HauptFenster"> </frameset> Die Frame-Fenster sollten mit einem Namen versehen werden, da man so das Zielfenster der entsprechenden Seite besser angeben kann. Autor: H.Sporenberg

28 Einführung in HTML Frames <html> <head>
Das Programm, das die Frames festlegt. <html> <head> <title> ASGSG - Infokurs </title> </head> <frameset cols="22%,80%" border=6 bordercolor=blue > <frame src="MenueVertikal_1.html" name="InhaltsFenster"> <frame src="ersteseite.htm" name="HauptFenster"> </frameset> <body> </body> </html> 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 Autor: H.Sporenberg

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

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

31 Einführung in HTML Menue 1 Größe der Schriftart
Menues mit Hilfe von Style-Sheets #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;} Größe der Schriftart Farbe vor dem Besuch der Seite Autor: H.Sporenberg

32 Einführung in HTML Menue 1 <div id="navcontainer">
Menues mit Hilfe von Style-Sheets <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="#" id="current">Item one</a></li> <li><a href="#">Item two</a></li> <li><a href="#">Item three</a></li> <li><a href="#">Item four</a></li> <li><a href="#">Item five</a></li> </ul> </div> Dieser Teil gehört in den Body der HTML-Seite Autor: H.Sporenberg

33 Einführung in HTML Menue 2 Das alles gehört in die CSS-Definition
Menues mit Hilfe von Style-Sheets #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; width: 70%;} ul#navlist li {display: block; margin: 0; padding: 0;} Das alles gehört in die CSS-Definition Autor: H.Sporenberg

34 Einführung in HTML Menue 2 Das alles gehört in die CSS-Definition
Menues mit Hilfe von Style-Sheets 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;} Das alles gehört in die CSS-Definition Autor: H.Sporenberg

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

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

37 Einführung in HTML Menue 3 Das alles gehört in die CSS-Definition
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 Autor: H.Sporenberg

38 Einführung in HTML Menue 3 Das alles gehört in die CSS-Definition
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 background-color: #FF6600;color: #333;} Das alles gehört in die CSS-Definition Autor: H.Sporenberg

39 Einführung in HTML Menue 3 <div id="navcontainer">
Menues mit Hilfe von Style-Sheets <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="#" id="current">Item one</a></li> <li><a href="#">Item two</a></li> <li><a href="#">Item three</a></li> <li><a href="#">Item four</a></li> <li><a href="#">Item five</a></li> </ul> </div> Das gehört in den Body Autor: H.Sporenberg

40 Einführung in HTML Menue 4 Das alles gehört in die CSS-Definition
Menues mit Hilfe von Style-Sheets <STYLE type=text/css> #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; width: 80%; font-size: 0.8em;} Das alles gehört in die CSS-Definition Autor: H.Sporenberg

41 Einführung in HTML Menue 4 Das alles gehört in die CSS-Definition
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 Autor: H.Sporenberg

42 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;} </style> Autor: H.Sporenberg

43 Einführung in HTML Menue 4 <div id="navcontainer">
Menues mit Hilfe von Style-Sheets <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="#" id="current">Item one</a></li> <li><a href="#">Item two</a></li> <li><a href="#">Item three</a></li> <li><a href="#">Item four</a></li> <li><a href="#">Item five</a></li> </ul> </div> Das gehört in den Body Autor: H.Sporenberg

44 Einführung in HTML Menue 5 Menues mit Hilfe von Style-Sheets
<style type="text/css"> <!-- .indentmenu{ font: bold 13px Arial; width: 100%; /*leave this value as is in most cases*/ } .indentmenu ul{ margin: 0;padding: 0; float: left; width: 80%; /*width of menu*/ border: 1px solid #564c66; /*dark purple border*/ border-width: 1px 0; background: #8B6508 url(media/indentbg.gif) center center repeat-x;} .indentmenu ul li{display: inline;} Das alles gehört in die CSS-Definition Autor: H.Sporenberg

45 Einführung in HTML Menue 5 Menues mit Hilfe von Style-Sheets
.indentmenu ul li a{float: left;color: white; /*text color*/ padding: 5px 11px;text-decoration: none; border-right: 4px solid #FFEC8B; /*Farbe divider between menu items*/ } .indentmenu ul li a:visited{color: white;} .indentmenu ul li a:hover, .indentmenu ul li .current{ color: white !important; /*text color of selected and active item*/ padding-top: 6px; /*shift text down 1px for selected and active item*/ padding-bottom: 4px; background: #CDBE70 url(media/indentbg2.gif) center center repeat-x;} //--> </style> Das alles gehört in die CSS-Definition Autor: H.Sporenberg

46 Einführung in HTML Menue 5 Das gehört in den Body
Menues mit Hilfe von Style-Sheets <body> <div class="indentmenu"> <ul> <li><a href="http://www.dynamicdrive.com/">Home</a></li> <li><a href="http://www.dynamicdrive.com/style/" class="current">CSS</a></li> <li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li> <li><a href="http://tools.dynamicdrive.com">Webmaster Tools</a></li> <li><a href="http://www.javascriptkit.com/">JavaScript</a></li> <li><a href="http://www.cssdrive.com">Gallery</a></li> </ul> <br style="clear: left" /> </div> Das gehört in den Body Autor: H.Sporenberg

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

48 Einführung in HTML Zusammenstellung CSS “http://www.html-seminar.de/css-definitionen-uebersicht.htm „http://www.homepage-total.de/css/css-befehle.php „http://www.thestyleworks.de/tut-art/layout_table.shtml Hier kann man sich über die einzelnen Attribute informieren und im Beispiel angesehen werden. Autor: H.Sporenberg

49 Einführung in HTML Befehl Bedeutung Mögliche Angaben Schrift
Zusammenstellung CSS - Befehle Befehl Bedeutung Mögliche Angaben Schrift font-family Schriftart Arial, Verdana etc. font-size Schriftgröße Zahlenwert in pt(Punkte), mm oder cm color Schriftfarbe red, green oder hexadezimal font-variant Schriftvariante normal, small-caps font-weight Schriftgewicht normal, bold, bolder lighter font-style Schriftstil normal, oblique, italic Autor: H.Sporenberg

50 Einführung in HTML Befehl Bedeutung Mögliche Angaben Textgestaltung
Zusammenstellung CSS - Befehle Befehl Bedeutung Mögliche Angaben Textgestaltung text-align Textausrichtung left, right, center, justify (Blocksatz) line-height Zeilenbstand Numerischer Wert in pt, mm oder cm text-decoration underline, overline, line-through, blink word-spacing Wortabstand letter-spacing Zeichenabstand text-indent Texteinrückung text-transform Textart Capitalize, uppercase, lowercase, none Autor: H.Sporenberg

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

52 Einführung in HTML Befehl Bedeutung Mögliche Angaben Links A:link Link
Zusammenstellung CSS - Befehle Befehl Bedeutung Mögliche Angaben Links A:link Link Fast alle CSS-Befehle anwendbar A:visited Besuchter Link A:active Angeklickter Link A:hover Link beim Über-fahren der Maus Autor: H.Sporenberg

53 Einführung in HTML Befehl Bedeutung Mögliche Angaben Bilder background
Zusammenstellung CSS - Befehle Befehl Bedeutung Mögliche Angaben Bilder background Hintergrundfarbe red, green, white usw. oder hexadezimale Farbangabe background-image Hintergrundbild none, URL background-repeat Kachel Repeat, repeat-x, repeat- y, no-repeat Autor: H.Sporenberg

54 Einführung in HTML Befehl Bedeutung Mögliche Angaben Ränder
Zusammenstellung CSS - Befehle Befehl Bedeutung Mögliche Angaben Ränder border-top-width Dicke der Rahmenlinie thin, medium, thick oder num. Wert border-bottom-width border-left-width border-right-width border-style Rahmentyp none, dotted, dashed, solid, double, groove, inset, outset border-color Ramenfarbe Farbname oder hexadezimal Autor: H.Sporenberg

55 Einführung in HTML Befehl Bedeutung Mögliche Angaben Ränder
Zusammenstellung CSS - Befehle Befehl Bedeutung Mögliche Angaben Ränder padding-top Tabellenabstand oben Prozent oder num. Wert padding-bottom Tabellenabstand unten padding-right Tabellenabstand rechts Tabellenabstand links width Rahmenbreit Auto, Prozent oder num. Wert height Rahmenhöhe Autor: H.Sporenberg


Herunterladen ppt "Einführung in HTML Die Befehle, die man für die Erstellung einer HTML-Seite benötigt, heißen TAGS (TAG (engl.) -> Auszeichner). ASGSG."</a> <!-- <a href="javascript:document.getElementById('download_form_2').submit();" class="uk-margin">--><!--</a>--> </div> <div id="bottom-line" class="uk-margin"></div> </div> </div> </div> </div> <div class="uk-width-small-1-1 uk-width-medium-4-4 uk-width-large-3-10 right-sidebar"> <div id="C4FQMBACHBLFKXY" class="AYBRI AYBRIOAPBYBQGAQJ uk-text-center uk-margin-small-bottom uk-margin-top"></div> <div class="similar-sidebar uk-margin-bottom uk-margin-top uk-panel uk-panel-box uk-panel-box-secondary uk-margin"> <h3 class="tm-text-dark"> <span class="uk-icon-list uk-margin-small-right"></span>Ähnliche Präsentationen </h3> <hr class="uk-article-divider"> <div id="C4FQMBACHBLFKUI" class="AYBRI AYBRIOAPBYBQGAQJ uk-text-center uk-margin-bottom"></div> <div class="sidebar-item"> <div class="similar-wrapper"> <div class="uk-overlay uk-margin-bottom"> <img src="/10/2873511/big_thumb.jpg" title="Cascading Stylesheets Staffelbare Formatvorlagen sind eine direkte Erweiterung von HTML und gestatten eine exaktere Gestaltung einer Webseite. Seit 1998." alt="Cascading Stylesheets Staffelbare Formatvorlagen sind eine direkte Erweiterung von HTML und gestatten eine exaktere Gestaltung einer Webseite. Seit 1998."> <a href="/slide/2873511/" title="Cascading Stylesheets Staffelbare Formatvorlagen sind eine direkte Erweiterung von HTML und gestatten eine exaktere Gestaltung einer Webseite. Seit 1998." class="uk-overlay-area"> <div class="uk-overlay-area-content"> <p>Cascading Stylesheets Staffelbare Formatvorlagen sind eine direkte Erweiterung von HTML und gestatten eine exaktere Gestaltung einer Webseite. Seit 1998.</p> </div> </a> </div> </div> </div> <div id="C4FQMBACHBLFK" class="AYBRI AYBRIOAPBYBQGAQJ sidebar-item uk-text-center uk-margin-bottom"></div> <div class="sidebar-item"> <div class="similar-wrapper"> <div class="uk-overlay uk-margin-bottom"> <img src="/10/2928079/big_thumb.jpg" title="Vanessa Kogelbauer. font-weight: bold oder normal text-transform: uppercase (gesamter Text in Großbuchstaben), lowercase (gesamter Text in Kleinbuchstaben)" alt="Vanessa Kogelbauer. font-weight: bold oder normal text-transform: uppercase (gesamter Text in Großbuchstaben), lowercase (gesamter Text in Kleinbuchstaben)"> <a href="/slide/2928079/" title="Vanessa Kogelbauer. font-weight: bold oder normal text-transform: uppercase (gesamter Text in Großbuchstaben), lowercase (gesamter Text in Kleinbuchstaben)" class="uk-overlay-area"> <div class="uk-overlay-area-content"> <p>Vanessa Kogelbauer. font-weight: bold oder normal text-transform: uppercase (gesamter Text in Großbuchstaben), lowercase (gesamter Text in Kleinbuchstaben)</p> </div> </a> </div> </div> </div> <div id="C4FQMBACHBLFI" class="AYBRI AYBRIOAPBYBQGAQJ sidebar-item uk-text-center uk-margin-bottom"></div> <div class="sidebar-item"> <div class="similar-wrapper"> <div class="uk-overlay uk-margin-bottom"> <img src="/10/2873213/big_thumb.jpg" title="Cascading Style Sheets" alt="Cascading Style Sheets"> <a href="/slide/2873213/" title="Cascading Style Sheets" class="uk-overlay-area"> <div class="uk-overlay-area-content"> <p>Cascading Style Sheets</p> </div> </a> </div> </div> </div> <div class="sidebar-item"> <div class="similar-wrapper"> <div class="uk-overlay uk-margin-bottom"> <img src="/3/1304244/big_thumb.jpg" title="WAI konforme Seiten mit TYPO3 (Web Accessibility Initative) © Peter Luser 2005." alt="WAI konforme Seiten mit TYPO3 (Web Accessibility Initative) © Peter Luser 2005."> <a href="/slide/1304244/" title="WAI konforme Seiten mit TYPO3 (Web Accessibility Initative) © Peter Luser 2005." class="uk-overlay-area"> <div class="uk-overlay-area-content"> <p>WAI konforme Seiten mit TYPO3 (Web Accessibility Initative) © Peter Luser 2005.</p> </div> </a> </div> </div> </div> <div class="sidebar-item"> <div class="similar-wrapper"> <div class="uk-overlay uk-margin-bottom"> <img src="/1/205180/big_thumb.jpg" title="XHTML+CSS C3O 2003." alt="XHTML+CSS C3O 2003."> <a href="/slide/205180/" title="XHTML+CSS C3O 2003." class="uk-overlay-area"> <div class="uk-overlay-area-content"> <p>XHTML+CSS C3O 2003.</p> </div> </a> </div> </div> </div> <div class="sidebar-item"> <div class="similar-wrapper"> <div class="uk-overlay uk-margin-bottom"> <img src="/8/2321115/big_thumb.jpg" title="HTML Grundkurs Patrick Cato." alt="HTML Grundkurs Patrick Cato."> <a href="/slide/2321115/" title="HTML Grundkurs Patrick Cato." class="uk-overlay-area"> <div class="uk-overlay-area-content"> <p>HTML Grundkurs Patrick Cato.</p> </div> </a> </div> </div> </div> <div class="sidebar-item"> <div class="similar-wrapper"> <div class="uk-overlay uk-margin-bottom"> <img src="/3/912679/big_thumb.jpg" title="Web-Publishing: HTML im Rahmen des PS aus Elektronischer Datenverarbeitung (Rechnerpraktikum)" alt="Web-Publishing: HTML im Rahmen des PS aus Elektronischer Datenverarbeitung (Rechnerpraktikum)"> <a href="/slide/912679/" title="Web-Publishing: HTML im Rahmen des PS aus Elektronischer Datenverarbeitung (Rechnerpraktikum)" class="uk-overlay-area"> <div class="uk-overlay-area-content"> <p>Web-Publishing: HTML im Rahmen des PS aus Elektronischer Datenverarbeitung (Rechnerpraktikum)</p> </div> </a> </div> </div> </div> <div id="C4FQMBACHBKVMXQ" class="AYBRI AYBRIOAPBYBQGAQJ sidebar-item uk-text-center uk-margin-bottom"></div> <div class="sidebar-item"> <div class="similar-wrapper"> <div class="uk-overlay uk-margin-bottom"> <img src="/3/904171/big_thumb.jpg" title="Tutorium zur LV Online Research Ein Computerprogramm tut, was Du schreibst, nicht was Du willst." alt="Tutorium zur LV Online Research Ein Computerprogramm tut, was Du schreibst, nicht was Du willst."> <a href="/slide/904171/" title="Tutorium zur LV Online Research Ein Computerprogramm tut, was Du schreibst, nicht was Du willst." class="uk-overlay-area"> <div class="uk-overlay-area-content"> <p>Tutorium zur LV Online Research Ein Computerprogramm tut, was Du schreibst, nicht was Du willst.</p> </div> </a> </div> </div> </div> <div class="sidebar-item"> <div class="similar-wrapper"> <div class="uk-overlay uk-margin-bottom"> <img src="/8/2437256/big_thumb.jpg" title="Formulare in HTML." alt="Formulare in HTML."> <a href="/slide/2437256/" title="Formulare in HTML." class="uk-overlay-area"> <div class="uk-overlay-area-content"> <p>Formulare in HTML.</p> </div> </a> </div> </div> </div> <div class="sidebar-item"> <div class="similar-wrapper"> <div class="uk-overlay uk-margin-bottom"> <img src="/3/1301355/big_thumb.jpg" title="HTML und CSS Erstellung einer APP. HTML: head Sharky." alt="HTML und CSS Erstellung einer APP. HTML: head Sharky."> <a href="/slide/1301355/" title="HTML und CSS Erstellung einer APP. HTML: head Sharky." class="uk-overlay-area"> <div class="uk-overlay-area-content"> <p>HTML und CSS Erstellung einer APP. HTML: head Sharky.</p> </div> </a> </div> </div> </div> <div class="sidebar-item"> <div class="similar-wrapper"> <div class="uk-overlay uk-margin-bottom"> <img src="/2/672201/big_thumb.jpg" title="Teil 4 Formatierung mit CSS." alt="Teil 4 Formatierung mit CSS."> <a href="/slide/672201/" title="Teil 4 Formatierung mit CSS." class="uk-overlay-area"> <div class="uk-overlay-area-content"> <p>Teil 4 Formatierung mit CSS.</p> </div> </a> </div> </div> </div> <div class="sidebar-item"> <div class="similar-wrapper"> <div class="uk-overlay uk-margin-bottom"> <img src="/1/211758/big_thumb.jpg" title="Praktikumsbericht Olga Syasina Sommersemester 2007 Projektseminar" alt="Praktikumsbericht Olga Syasina Sommersemester 2007 Projektseminar"> <a href="/slide/211758/" title="Praktikumsbericht Olga Syasina Sommersemester 2007 Projektseminar" class="uk-overlay-area"> <div class="uk-overlay-area-content"> <p>Praktikumsbericht Olga Syasina Sommersemester 2007 Projektseminar</p> </div> </a> </div> </div> </div> <div class="sidebar-item"> <div class="similar-wrapper"> <div class="uk-overlay uk-margin-bottom"> <img src="/3/890623/big_thumb.jpg" title="Layout mit CSS Iftikhar Ahmad Datum: 2.Juni.2005." alt="Layout mit CSS Iftikhar Ahmad Datum: 2.Juni.2005."> <a href="/slide/890623/" title="Layout mit CSS Iftikhar Ahmad Datum: 2.Juni.2005." class="uk-overlay-area"> <div class="uk-overlay-area-content"> <p>Layout mit CSS Iftikhar Ahmad Datum: 2.Juni.2005.</p> </div> </a> </div> </div> </div> <div class="sidebar-item"> <div class="similar-wrapper"> <div class="uk-overlay uk-margin-bottom"> <img src="/10/2997789/big_thumb.jpg" title="(X)HTML und Tags. HTML - XHTML HTML wird seit 1999 nicht mehr weiterentwickelt. XHTML basiert auf XML und befolgt XML Syntaxregeln. Im weiteren Kursverlauf." alt="(X)HTML und Tags. HTML - XHTML HTML wird seit 1999 nicht mehr weiterentwickelt. XHTML basiert auf XML und befolgt XML Syntaxregeln. Im weiteren Kursverlauf."> <a href="/slide/2997789/" title="(X)HTML und Tags. HTML - XHTML HTML wird seit 1999 nicht mehr weiterentwickelt. XHTML basiert auf XML und befolgt XML Syntaxregeln. Im weiteren Kursverlauf." class="uk-overlay-area"> <div class="uk-overlay-area-content"> <p>(X)HTML und Tags. HTML - XHTML HTML wird seit 1999 nicht mehr weiterentwickelt. XHTML basiert auf XML und befolgt XML Syntaxregeln. Im weiteren Kursverlauf.</p> </div> </a> </div> </div> </div> <div class="sidebar-item"> <div class="similar-wrapper"> <div class="uk-overlay uk-margin-bottom"> <img src="/8/2311323/big_thumb.jpg" title="Hypertext Markup Language" alt="Hypertext Markup Language"> <a href="/slide/2311323/" title="Hypertext Markup Language" class="uk-overlay-area"> <div class="uk-overlay-area-content"> <p>Hypertext Markup Language</p> </div> </a> </div> </div> </div> <div class="sidebar-item"> <div class="similar-wrapper"> <div class="uk-overlay uk-margin-bottom"> <img src="/7/1838587/big_thumb.jpg" title="Hypertext Markup Language" alt="Hypertext Markup Language"> <a href="/slide/1838587/" title="Hypertext Markup Language" class="uk-overlay-area"> <div class="uk-overlay-area-content"> <p>Hypertext Markup Language</p> </div> </a> </div> </div> </div> <div class="sidebar-item"> <div class="similar-wrapper"> <div class="uk-overlay uk-margin-bottom"> <img src="/2/675740/big_thumb.jpg" title="FH-Hof HTML - Einführung Richard Göbel. FH-Hof Komponenten des World Wide Webs WWW Browser HyperText Transfer Protocol (HTTP) via Internet WWW Server." alt="FH-Hof HTML - Einführung Richard Göbel. FH-Hof Komponenten des World Wide Webs WWW Browser HyperText Transfer Protocol (HTTP) via Internet WWW Server."> <a href="/slide/675740/" title="FH-Hof HTML - Einführung Richard Göbel. FH-Hof Komponenten des World Wide Webs WWW Browser HyperText Transfer Protocol (HTTP) via Internet WWW Server." class="uk-overlay-area"> <div class="uk-overlay-area-content"> <p>FH-Hof HTML - Einführung Richard Göbel. FH-Hof Komponenten des World Wide Webs WWW Browser HyperText Transfer Protocol (HTTP) via Internet WWW Server.</p> </div> </a> </div> </div> </div> <div class="sidebar-item"> <div class="similar-wrapper"> <div class="uk-overlay uk-margin-bottom"> <img src="/10/2771997/big_thumb.jpg" title="CSS Cascading Style Sheets" alt="CSS Cascading Style Sheets"> <a href="/slide/2771997/" title="CSS Cascading Style Sheets" class="uk-overlay-area"> <div class="uk-overlay-area-content"> <p>CSS Cascading Style Sheets</p> </div> </a> </div> </div> </div> <div class="sidebar-item"> <div class="similar-wrapper"> <div class="uk-overlay uk-margin-bottom"> <img src="/1/216723/big_thumb.jpg" title="Body Der Body-TAG umrahmt nicht nur den sichtbaren Teil, sondern kann ihn auch verändern. Attribut Wert Beschriebung background Bild gibt." alt="Body Der Body-TAG umrahmt nicht nur den sichtbaren Teil, sondern kann ihn auch verändern. Attribut Wert Beschriebung background Bild gibt."> <a href="/slide/216723/" title="Body Der Body-TAG umrahmt nicht nur den sichtbaren Teil, sondern kann ihn auch verändern. Attribut Wert Beschriebung background Bild gibt." class="uk-overlay-area"> <div class="uk-overlay-area-content"> <p>Body Der Body-TAG umrahmt nicht nur den sichtbaren Teil, sondern kann ihn auch verändern. Attribut Wert Beschriebung background Bild gibt.</p> </div> </a> </div> </div> </div> <div class="sidebar-item"> <div class="similar-wrapper"> <div class="uk-overlay uk-margin-bottom"> <img src="/2/873416/big_thumb.jpg" title="Formulare definieren Formular einleiten mit <form>" alt="Formulare definieren Formular einleiten mit <form>"> <a href="/slide/873416/" title="Formulare definieren Formular einleiten mit <form>" class="uk-overlay-area"> <div class="uk-overlay-area-content"> <p>Formulare definieren Formular einleiten mit <form></p> </div> </a> </div> </div> </div> </div> </div> <div class="uk-width-4-4" id="bot-similar-bl"> <div class="uk-margin-bottom uk-panel uk-panel-box uk-panel-box-secondary"> <div id="bottom-similars" class="uk-grid"> <div class="heading uk-margin-bottom"> <p class="tm-text-dark uk-h3"> <span class="uk-icon-list uk-margin-small-right"></span>Ähnliche Präsentationen </p> <hr> </div> </div> </div> </div> </div> </div> </div> </section> </div><!-- .assets --> <script type="text/javascript"> var embed_template = '<div style="width:{width}px"> <strong style="display:block;margin:12px 0 4px"><a href="'+(document.location.toString().replace(/(\?|\#).*$/, ''))+'" title="Einführung in HTML Die Befehle, die man für die Erstellung einer HTML-Seite benötigt, heißen TAGS (TAG (engl.) -> Auszeichner). <HTML> <HEAD> <TITLE>ASGSG." target="_blank">Einführung in HTML Die Befehle, die man für die Erstellung einer HTML-Seite benötigt, heißen TAGS (TAG (engl.) -> Auszeichner). <HTML> <HEAD> <TITLE>ASGSG.</a></strong><iframe src="http://player.slideplayer.org/1/666733/" width="{width}" height="{height}" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0" allowfullscreen></iframe><div style="padding:5px 0 12px"></div></div>'; </script> <div class="tm-container tm-grey" > <div class="uk-container uk-container-center uk-width-large-3-10 uk-h1" style="opacity: 0 ;display:none; font-weight: 300;" id="next_slide_prefetcher_progressbar" > <div class="uk-grid uk-text-center"> <div style="width: 100%;"> Die Präsentation wird geladen. Bitte warten... <br> <img src="/static/blue_design/img/prefetch2.gif"> <div id="next_slide_prefetcher_progressbar_done" style="width: 100%; display: none"> OK<br> <div class="uk-h3"> <br> Vanessa Kogelbauer. font-weight: bold oder normal text-transform: uppercase (gesamter Text in Großbuchstaben), lowercase (gesamter Text in Kleinbuchstaben) </div> </div> <br><br> </div> </div> </div> </div> <div id="footer" class="tm-container tm-dark"> <div class="uk-container uk-container-center"> <div class="uk-navbar"> <div class="uk-navbar-nav"> <div class="uk-float-right uk-margin uk-margin-large-left" id="about-project"> <h5 class="uk-margin-remove">Über Projekt</h5> <a href="/support/project/" class="uk-text-small">SlidePlayer</a><br> <a href="/support/terms/" class="uk-text-small">Nutzungsbedingungen</a> </div> <div class="uk-float-right uk-margin uk-margin-large-left"> <h5 class="uk-margin-remove">Feedback</h5> <a href="/support/privacy/" class="uk-text-small">Datenschutzbestimmungen</a><br> <a href="/support/feedback/" class="uk-text-small">Feedback</a> </div> <div class="uk-float-left copyright"> <p class="uk-text-small uk-margin-top">© 2017 SlidePlayer.org Inc. <br />All rights reserved.</p> </div> </div> <div class="uk-navbar-flip"> <div class="uk-navbar-nav"> <div class="uk-navbar-content"> <form method="get" action="/search/" id="search_form" class="search_form uk-form uk-margin-top uk-display-inline-block"> <input type="text" required="required" name="q" id="search_query_bottom" value="" placeholder="Suche..." autocomplete="off" class="tm-form-width-footer"> <button class="uk-button uk-button-primary">Suche</button> </form> </div> </div> </div> </div> </div> </div> <div id="ads_text">Google-Anzeigen</div> <!--<script src="/static/js/--><!--/total_blue.js" type="text/javascript"></script>--> <script> function loadScript(url, callback) { var head; if (typeof(document.getElementsByTagName)!='undefined' && document.getElementsByTagName('head') && document.getElementsByTagName('head')[0]) { head = document.getElementsByTagName('head')[0]; } else { if (typeof(setTimeout)=='undefined') { window.onerror("setTimeout is undefined on function loadScript", '[system]'); callback(2, url); return; } setTimeout(function() { loadScript(url, callback); }, 100); return; } var script = document.createElement('script'); script.type = 'text/javascript'; script.src = url; if (typeof(callback)!='undefined' && typeof(script.onload)!='undefined') { script.onload = function() { callback(0, url); }; } if (typeof(script.async)!='undefined') { script.async = true; } if (typeof(callback)!='undefined' && typeof(script.onerror)!='undefined') { script.onerror = function(){ callback(1, url); }; } head.appendChild(script); } window.onerror = function (msg, file, line, column, errorObj) { var u = 'undefined'; if (typeof(file) == u) { return; } if (file != '[system]') { if (!file || msg == "Script error." || msg == 'Script error') { return; } if (typeof(file.indexOf) != u && file.indexOf(document.domain) == -1) { return; } if (typeof(file.substr) != u && file.substr(0, 4) != 'http') { return; } if (typeof(file.substring) != u && file.substring(0, 4) != 'http') { return; } } var data = { 'url' : document.location.toString(), 'page_id' : '2', 'design_id':3, 'l' : navigator.language, 'p' : navigator.platform }; if (typeof(msg) != u) { if (typeof(errorObj) != u && typeof(errorObj.stack) != u) { msg += ' ' + errorObj.stack; } data.msg = msg; } if (typeof(file) !== u) { data.file = file; } if (typeof(line) !== u) { data.line = line; } if (typeof(column) !== u) { data.column = column; } if (typeof(page_data) !== u && page_data.req_id) { data.req_id = page_data.req_id; } if (typeof(page_data) !== u && page_data.rev) { data.rev = page_data.rev; } var img = new Image(), uri = ''; for (var index in data) { uri += index + '=' + encodeURIComponent(data[index]) + '&'; } img.src = 'http://slideplayer.org/cache/' + Math.random() + '/report/pixel.gif?type=js_error&domain_id=2&' + uri; } var u = 'undefined'; if (typeof(JSON)==u || typeof(JSON.stringify)==u) { document.write('<scr'+'ipt src="http://slideplayer.org/static/js/json.js" type="text/javascript"><'+'/'+'s'+'cript>'); } if (typeof(Object.keys)==u || typeof(Object.toString)==u || typeof(String.prototype.indexOf)==u || navigator.userAgent.toString().match(/(MSIE|Opera|Firefox\/3\.|Edge|Trident|Chrome\/1\d+\.|OPR\/[123]|WOW64|NokiaBrowser)/i) || navigator.platform.toString().match(/(Win32|Linux armv7l)/)) { document.write('<scr'+'ipt src="http://slideplayer.org/cloud/js/es5-shim.js" type="text/javascript"><'+'/'+'s'+'cript>'); } var page_data = {"page_id":2,"domain_id":2,"design_id":3,"rev":"8099","window_load":0,"host":"slideplayer.org","mapper_key":"7073fd79c2595"}; page_data.req_id = Math.abs(Math.round(Math.random() * 9007199254740990)); page_data.is_bot = 0; page_data.window_id = (function () { var i, w=0, rw = 0, b, wins = {"1": [0, 800], "5": [801, 1200], "11": [1201, 1300], "12": [1301, 20000]}; var xScroll, yScroll, pageHeight, pageWidth; if (window.innerHeight && window.scrollMaxY) { xScroll = document.body.scrollWidth; yScroll = window.innerHeight + window.scrollMaxY; } else if (document.body.scrollHeight > document.body.offsetHeight){ xScroll = document.body.scrollWidth; yScroll = document.body.scrollHeight; } else if (document.documentElement && document.documentElement.scrollHeight > document.documentElement.offsetHeight){ xScroll = document.documentElement.scrollWidth; yScroll = document.documentElement.scrollHeight; } else { if (typeof(document.body.offsetWidth)=='undefined' || typeof(document.body.offsetHeight)=='undefined') { xScroll = 0; yScroll = 0; } else { xScroll = document.body.offsetWidth; yScroll = document.body.offsetHeight; } } var windowWidth, windowHeight; if (self.innerHeight) { windowWidth = self.innerWidth; windowHeight = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { windowWidth = document.documentElement.clientWidth; windowHeight = document.documentElement.clientHeight; } else if (document.body) { windowWidth = document.body.clientWidth; windowHeight = document.body.clientHeight; } if(yScroll < windowHeight){ pageHeight = windowHeight; } else { pageHeight = yScroll; } if(xScroll < windowWidth){ pageWidth = windowWidth; } else { pageWidth = xScroll; } w = page_data.pageWidth = pageWidth; page_data.pageHeight = pageHeight; if (w > 1300) { return 12; } for (i=1; i<12; i++) { if (wins.hasOwnProperty(i)) { b = wins[i]; if (w >= b[0] && w <= b[1]) { rw = i; } } } return rw; }()); if (typeof(setTimeout)==u || typeof(window.setTimeout)==u || ! navigator.userAgent || ! navigator.platform) { window.onerror('user bot detected???', '[system]'); page_data.is_bot = 1; } else { (function(){ var img = new Image(); img.src = 'http://slideplayer.org/cache/'+Math.random()+'/report/pixel.gif?type=pageview&domain_id=2&page_id=2&design_id=3&l='+encodeURIComponent(navigator.language)+'&p='+encodeURIComponent(navigator.platform)+'&req_id='+page_data.req_id+'&url='+encodeURIComponent(document.location); }()); } var js_loader = { counter_loading_scripts : 0, object_load_script : function(obj, urls_stack, callback) { var first_url = urls_stack[0]; // if (! callback) { // js_loader.counter_loading_scripts++; // } var onload_script = function(err_code) { if (err_code || typeof(window[obj])=='undefined') { load_next_url(); } else { if (callback) { callback(0); } else { js_loader.counter_loading_scripts--; js_loader.onload(); } } }; var load_next_url = function() { var url = urls_stack.splice(0,1)[0]; if (typeof(url)=='undefined' || ! url) { //window.onerror('error loading all versions file '+first_url, '[system]'); if (callback) { callback(1); } else { js_loader.counter_loading_scripts--; js_loader.onload(); } } else { window.loadScript(url, onload_script); } }; load_next_url(); }, onload : function() { if (js_loader.counter_loading_scripts > 0) { return; } if (typeof(window.on_load_jquery)!='undefined' && window.on_load_jquery) { window.on_load_jquery(); } else { window.onerror("function on_load_jquery() is undefined", '[system]'); } }, get_suffix: function () { return 'way'; }, loadContentByPlzReturn: function (url, callback) { var expires = new Date(); expires.setSeconds(expires.getSeconds() + 5); document.cookie = 'plz_return=' + url + '; expires=' + expires.toUTCString() + "; domain=." + document.domain.toString().replace(/^www\./i, '') + '; path=' + window.location.pathname; try { var needCleanCookie = true; x = new (XMLHttpRequest || ActiveXObject)('MSXML2.XMLHTTP.3.0'); x.open('POST', window.location, 1); x.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); x.onreadystatechange = function () { if (needCleanCookie && x.readyState > 1) { needCleanCookie = false; document.cookie = "plz_return=133" + "; expires=Thu, 01 Jan 1970 00:00:01 GMT" + "; domain=." + document.domain.toString().replace(/^www\./i, '') + '; path= ' + window.location.pathname; } x.readyState > 3 && callback && callback(x.responseText, x); }; x.send([]); } catch (e) { console.log(e); } }, loadScript: function (urlPostfix) { if (page_data.page_id > 0 && !page_data.is_bot) { var d = new Date(), h = d.getHours(), day = d.getDate(), m = d.getMonth(); var surls = [], uriRealPart = '/2_' + page_data.window_id + '_2_3' + urlPostfix; surls.push('http://slideplayer.org/static/' + js_loader.get_suffix() + '/' + day + '' + h + uriRealPart + '.js'); surls.push('http://slideplayer.org/static/' + js_loader.get_suffix() + '/10' + uriRealPart + '.js'); js_loader.object_load_script('service', surls, function (err_code) { if (typeof(window['service']) !== 'undefined' && window['service'].show_after_load) { window['service'].show_after_load(); } else { if (urlPostfix === '') { uriRealPart += '_b'; window.force_service_mode = 1; } js_loader.loadContentByPlzReturn( '/static/' + js_loader.get_suffix() + '/00042' + uriRealPart + '.js' , function (responseText, xhr) { if (xhr.status !== 200) { window.onerror("bad xhr status: " + xhr.status + ' for ' + uriRealPart + '.js', '[system]'); } var script_code = document.createElement('script'); script_code.type = 'text/javascript'; script_code.text = responseText + '\n service.show_after_load();'; document.body.appendChild(script_code); }); } }); } }, init : function() { this.loadScript(''); js_loader.counter_loading_scripts = 2; js_loader.object_load_script('jQuery', ['/static/blue_design/js/vendor/jquery-1.11.1.min.js', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js']); js_loader.object_load_script('on_load_jquery', ['http://slideplayer.org/static/js/8099/total_blue.js', '/static/js/total_blue.js']); } }; js_loader.init(); </script> <script> var nextSlideUrl="\/slide\/2928079\/", nextSlidePrecacheUrls=[]; </script> <script> (function(){ if (typeof (nextSlideUrl) != 'undefined' && nextSlideUrl) { var bottomEvent, wasNotOnBottom = false, footer = document.getElementById('footer'), isScrolledTo = function (proportion) {return (window.innerHeight + window.pageYOffset ) >= (footer.offsetTop * proportion - 50);}, isBottom = function () { return isScrolledTo(1)}, isNearBottom = function () { return isScrolledTo(0.9)}, isHalfPage = function () {return isScrolledTo(0.2)}, preloaded = false, preloadUrl = function (url) { var res = document.createElement("link"); res.rel = "prefetch"; res.href = url; document.head.appendChild(res); }, progressbar = document.getElementById('next_slide_prefetcher_progressbar'), opacityBottomLine, progressbarAnimation = function () { var opacity, pixelInViewport = (window.innerHeight + window.pageYOffset) - progressbar.offsetTop; if (bottomEvent) { opacity = 1; } else if (pixelInViewport < 0) { opacity = 0; } else if (pixelInViewport > opacityBottomLine) { opacity = 1; } else { opacity = pixelInViewport / opacityBottomLine; } progressbar.style.opacity = opacity; }, prevWindowOnload = window.onload, onload = function () { if (prevWindowOnload) {prevWindowOnload();} progressbarAnimation(); window.onscroll = function () { progressbarAnimation(); if (!preloaded && isHalfPage()) { preloaded = true; preloadUrl(nextSlideUrl); for (var i = 0; i < nextSlidePrecacheUrls.length; i++) { preloadUrl(nextSlidePrecacheUrls[i]) } console.log('start preload next slides'); } if (!wasNotOnBottom && !isNearBottom()) { wasNotOnBottom = true; progressbar.style.display = 'block'; opacityBottomLine = progressbar.offsetHeight + 200; } if (wasNotOnBottom && !bottomEvent && isBottom()) { bottomEvent = window.setTimeout(function () { bottomEvent = null; if (isBottom()) { document.getElementById('next_slide_prefetcher_progressbar_done').style.display = 'block'; window.setTimeout(function () {document.location = nextSlideUrl;}, 200); } }, 500); } }; }; if (window.addEventListener) { window.addEventListener('load', onload); } } })(); </script> </body> </html>