![[HTML] Grundlagen 3/3](https://www.elitepvpers.com/forum/iconimages/coding-tutorials/html-grundlagen-3-3-a_ltr.gif "[HTML] Grundlagen 3/3"){kind=small}
Hallo
ElitePVPers
Jetzt ich auch schließlich das 3/3 Tutorial draußen, von dem ihr sehr sehr viel über eure eigene Website lernt!
INHALT :
Meta Tags
Die Meta Tags sind im eigentlichen Kopf der HTML Seite zu finden. Da sind auch die Urheber Rechte und der Inhalt der Seite zu finden. Die Basis aller Meta Angaben ist das Tag - <meta>. Es muss sich zwischen <head> und </head> befinden. Innerhalb der Meta Tags werden verschiedene Informationen mit mehreren Attributen definiert.
Hier mal ein kleines Beispiel :
Content ist der Inhalt des :
Wenn man ein bisschen englisch kann sollte das kein Problem sein!
Seite Online Stellen
Nun kommen wir zu dem Wichtigen Punkt!
Deine Seite Online Stellen
Ich empfehle einen FTP-Server z.B
Um deine Dateien aber auf den Server zu pakcen, brauchst du
Ihr öffnet Filezilla, und bekommt links eure Dateien Angezeigt! Nun loggt ihr euch oben in FIlezilla mit den Account daten von Ohost.de ein, die ihr dann auf Ohost.de bekommt, wenn ihr euc angemeldet habt!
Nun sollte er zu Server verbinden und links werden die Serverfiles angezeigt! Dort ist aber nichts, denn du hast ja noch keine Daten drauf! Auf Unsere Programmierten Daten machen wir Doppelklick, und nun sollten die Files auf Dem Server sein! Aufrufen kannst du deine Seite unter :
Alle Tags auf einen Blick
Hier eine Liste mit allen Tags :
Kleinigkeiten
FarbCodes :
Flash einbinden
Einfach diesen Code Einfügen, aber das Fett & rote ist Eure Textdatei!
Wie binde ich CSS ein?
Eine eigene Uhr!
Um eine Eigene Uhr zu programmieren braucht man diesen Code :
Erläuterung :
Im Körper der HTML-Datei im Beispiel werden insgesamt zwei div-Bereiche definiert. Beide Bereiche erhalten einen id-Namen und erhalten über den jeweiligen id-Namen im style-Bereich im Dateikopf entsprechende CSS-Eigenschaften zugewiesen. Beide Bereiche werden absolut positioniert. Ohne diesen Trick wäre die ganze Sache mit Netscape 4.x nicht realisierbar. Der erste Bereich dient zur Anzeige von Datum und Uhrzeit, und der zweite Bereich enthält den gesamten restlichen Inhalt der Datei, weshalb er auch den Namen RestDerSeite trägt.
Der erste Bereich enthält zunächst nur ein geschütztes Leerzeichen. So sieht man zunächst noch nichts von dem Bereich, aber das Leerzeichen ist wichtig, damit der Bereich einen Inhalt hat. Ansonsten würde beim ersten dynamischen Zugriff auf seinen Inhalt mit DOM-fähigen Browsern und den Funktionen der DHTML-Bibliothek ein Fehler erzeugt.
Die Beispieldatei enthält ferner zwei JavaScript-Bereiche im Dateikopf. Im ersten, leeren JavaScript-Bereich wird die DHTML-Bibliothek eingebunden, im zweiten steht die Funktion ZeitAnzeigen(), die für die Zeitanzeige verantwortlich ist. Im einleitenden <body>-Tag ist der Event-Handler onload, der eintritt, wenn die Datei und alle ihre eingebundenen Ressourcen vollständig geladen sind. Diesem Event-Handler ist ein Funktionsaufruf zugeordnet. Er startet die Funktion ZeitAnzeigen(), jedoch eingebettet in eine setTimeout-Anweisung, die den Aufruf um 1 Sekunde bzw. 1000 Millisekunden verzögert. In der ersten Sekunde wird also noch nichts angezeigt.
Innerhalb der Funktion ZeitAnzeigen() wird zunächst ein Array für die deutschen Wochentage definiert. Anschließend ermittelt die Funktion mit Hilfe des Date-Objekts die aktuelle Zeit. Mit Hilfe diverser Formatierbefehlen erzeugt sie dann eine Zeichenkette, die eine ordentliche Datums-/Uhrzeitdarstellung Konvention nach deutscher Konvention enthält. Diese Zeichenkette wird in der Variablen mit dem Namen Gesamt gespeichert. All diese Dinge haben noch nichts mit der Anzeige zu tun.
Der eigentliche DHTML-Teil ist dank der eingebundenen DHTML-Bibliothek kein großes Problem. Mit if (DHTML) wird zunächst abgefragt, ob überhaupt Dynamisches HTML verfügbar ist. Der gesamte Code zum dynamischen Schreiben in den div-Bereich wird davon abhängig gemacht. So werden Fehlermeldungen in Browsern vermieden, die zwar JavaScript, aber kein Dynamisches HTML beherrschen. Dann wird abgefragt, ob mit dem älteren Netscape-Modell gearbeitet wird. Wenn ja, sieht das dynamische Schreiben in den div-Bereich ein klein wenig anders aus als in den übrigen Fällen. Der Grund ist eine weitere Schwäche des Netscape-4-Browsers. Er würde die CSS-Klasse Uhr im einleitenden div-Tag ignorieren, wenn man sie ihm nicht noch mal in Form eines span-Elements mit in den dynamischen Bereich schreiben würde. Nur so erhält die Datums-/Uhrzeitanzeige die CSS-Formatierungen, die im Dateikopf im style-Bereich für die Uhr-Klasse festgelegt werden. Das dynamische Ändern des div-Inhalts geschieht durch Aufruf der Bibliotheksfunktion setContent(), die sich um alle weiteren Einzelheiten kümmert.
In der letzten Anweisung innerhalb der Funktion ZeitAnzeigen() ruft sich die Funktion selber wieder auf, und zwar wieder mit einer durch window.setTimeout() bewirkten Zeitverzögerung von 1000 Millisekunden oder einer Sekunde. Dadurch passiert eine Sekunde lang nichts, und dann wird die Zeit erneut geschrieben.
Lauf Text
Das wars von mir
Also das war der 3/3 Teil meiner Trilogie
MFG Jusikid
ElitePVPers
Jetzt ich auch schließlich das 3/3 Tutorial draußen, von dem ihr sehr sehr viel über eure eigene Website lernt!
INHALT :
- Meta Tags
- Seite Online Stellen
- Alle Tags auf einen Blick
- Kleinigkeiten
- Rumspielen mit den Codes
Meta Tags
Die Meta Tags sind im eigentlichen Kopf der HTML Seite zu finden. Da sind auch die Urheber Rechte und der Inhalt der Seite zu finden. Die Basis aller Meta Angaben ist das Tag - <meta>. Es muss sich zwischen <head> und </head> befinden. Innerhalb der Meta Tags werden verschiedene Informationen mit mehreren Attributen definiert.
Hier mal ein kleines Beispiel :
HTML Code:
<head> <title>BSP. für MEta Tags</title> <meta name="author" content="[B]Name des Herstellers[/B]" /> <meta name="description" content="[B]Beschreibung der HP[/B]" </head>
- author
- description
- publisher
- keywords
- date
- Copyright
- noindex
- robots
Wenn man ein bisschen englisch kann sollte das kein Problem sein!
Seite Online Stellen
Nun kommen wir zu dem Wichtigen Punkt!
Deine Seite Online Stellen
Ich empfehle einen FTP-Server z.B
Um deine Dateien aber auf den Server zu pakcen, brauchst du
Ihr öffnet Filezilla, und bekommt links eure Dateien Angezeigt! Nun loggt ihr euch oben in FIlezilla mit den Account daten von Ohost.de ein, die ihr dann auf Ohost.de bekommt, wenn ihr euc angemeldet habt!
Nun sollte er zu Server verbinden und links werden die Serverfiles angezeigt! Dort ist aber nichts, denn du hast ja noch keine Daten drauf! Auf Unsere Programmierten Daten machen wir Doppelklick, und nun sollten die Files auf Dem Server sein! Aufrufen kannst du deine Seite unter :
Alle Tags auf einen Blick
Hier eine Liste mit allen Tags :
HTML Code:
<!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <b> <base> <basefont> <bdo> <big> <blockquote> <body> <br> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <font> <form> <frame> <frameset> <head> <h1> - <h6> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <meta> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <param> <pre> <q> <s> <samp> <script> <select> <small> <span> <strike> <strong> <style> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <title> <tr> <tt> <u> <ul> <var>
FarbCodes :
Flash einbinden
Einfach diesen Code Einfügen, aber das Fett & rote ist Eure Textdatei!
Code:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550px" height="400px" codebase="http://active.macromedia.com/flash5/cabs/swflash.cab" id="Shockwaveflash1" VIEWASTEXT> <param name="Align" value="Center"> <param name="Movie" value="[B][COLOR="#ff0000"]mein-flash.swf[/COLOR][/B]"> <param name="Loop" value="True"> <param name="Menu" value="True"> <param name="Play" value="True"> <param name="Quality" value="Best"> <param name="SAlign" value="Center"> <param name="Scale" value="Showall"> <param name="SWLiveConnect" value="False"> <param name="WMode" value="Transparent"> <embed pluginspace="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" width="550px" height="400px" align="Center" src="[B][COLOR="Red"]mein-flash.swf[/COLOR][/B]" loop="True" menu="True" play="True" quality="Best" salign="Center" scale="Showall" swliveconnect="False" wmode="Transparent"> </embed> </Object>
HTML Code:
<style type="text/css"> [B]Hier kommt dein CSS Code rein[/B] </style>
Um eine Eigene Uhr zu programmieren braucht man diesen Code :
HTML Code:
<html><head> <title>Test</title> <script type="text/javascript" src="dhtml.js"></script> <script type="text/javascript"> function ZeitAnzeigen () { var Wochentagname = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"); var Jetzt = new Date(); var Tag = Jetzt.getDate(); var Monat = Jetzt.getMonth() + 1; var Jahr = Jetzt.getYear(); if (Jahr < 999) Jahr += 1900; var Stunden = Jetzt.getHours(); var Minuten = Jetzt.getMinutes(); var Sekunden = Jetzt.getSeconds(); var WoTag = Jetzt.getDay(); var Vortag = (Tag < 10) ? "0" : ""; var Vormon = (Monat < 10) ? ".0" : "."; var Vorstd = (Stunden < 10) ? "0" : ""; var Vormin = (Minuten < 10) ? ":0" : ":"; var Vorsek = (Sekunden < 10) ? ":0" : ":"; var Datum = Vortag + Tag + Vormon + Monat + "." + Jahr; var Uhrzeit = Vorstd + Stunden + Vormin + Minuten + Vorsek + Sekunden; var Gesamt = Wochentagname[WoTag] + ", " + Datum + ", " + Uhrzeit; if (DHTML) { if (NS4) { setContent("id", "Uhr", null, '<span class="Uhr">' + Gesamt + "<\/span>"); } else { setContent("id", "Uhr", null, Gesamt); } window.setTimeout("ZeitAnzeigen()", 1000); } } </script> <style type="text/css"> #Uhr { position:absolute; top:10px; left:10px; } #RestDerSeite { position:absolute; top:50px; left:10px; } .Uhr { font-family:Arial; font-size:24px; color:blue; } .RestDerSeite { font-family:Arial; color:black; } </style> </head> <body onload="window.setTimeout('ZeitAnzeigen()', 1000)"> <div id="Uhr" class="Uhr"> </div> <div id="RestDerSeite" class="RestDerSeite"> <h1>Willkommen auf dieser Seite</h1> <p>hier gehts ganz normal weiter</p> </div> </body> </html>
Im Körper der HTML-Datei im Beispiel werden insgesamt zwei div-Bereiche definiert. Beide Bereiche erhalten einen id-Namen und erhalten über den jeweiligen id-Namen im style-Bereich im Dateikopf entsprechende CSS-Eigenschaften zugewiesen. Beide Bereiche werden absolut positioniert. Ohne diesen Trick wäre die ganze Sache mit Netscape 4.x nicht realisierbar. Der erste Bereich dient zur Anzeige von Datum und Uhrzeit, und der zweite Bereich enthält den gesamten restlichen Inhalt der Datei, weshalb er auch den Namen RestDerSeite trägt.
Der erste Bereich enthält zunächst nur ein geschütztes Leerzeichen. So sieht man zunächst noch nichts von dem Bereich, aber das Leerzeichen ist wichtig, damit der Bereich einen Inhalt hat. Ansonsten würde beim ersten dynamischen Zugriff auf seinen Inhalt mit DOM-fähigen Browsern und den Funktionen der DHTML-Bibliothek ein Fehler erzeugt.
Die Beispieldatei enthält ferner zwei JavaScript-Bereiche im Dateikopf. Im ersten, leeren JavaScript-Bereich wird die DHTML-Bibliothek eingebunden, im zweiten steht die Funktion ZeitAnzeigen(), die für die Zeitanzeige verantwortlich ist. Im einleitenden <body>-Tag ist der Event-Handler onload, der eintritt, wenn die Datei und alle ihre eingebundenen Ressourcen vollständig geladen sind. Diesem Event-Handler ist ein Funktionsaufruf zugeordnet. Er startet die Funktion ZeitAnzeigen(), jedoch eingebettet in eine setTimeout-Anweisung, die den Aufruf um 1 Sekunde bzw. 1000 Millisekunden verzögert. In der ersten Sekunde wird also noch nichts angezeigt.
Innerhalb der Funktion ZeitAnzeigen() wird zunächst ein Array für die deutschen Wochentage definiert. Anschließend ermittelt die Funktion mit Hilfe des Date-Objekts die aktuelle Zeit. Mit Hilfe diverser Formatierbefehlen erzeugt sie dann eine Zeichenkette, die eine ordentliche Datums-/Uhrzeitdarstellung Konvention nach deutscher Konvention enthält. Diese Zeichenkette wird in der Variablen mit dem Namen Gesamt gespeichert. All diese Dinge haben noch nichts mit der Anzeige zu tun.
Der eigentliche DHTML-Teil ist dank der eingebundenen DHTML-Bibliothek kein großes Problem. Mit if (DHTML) wird zunächst abgefragt, ob überhaupt Dynamisches HTML verfügbar ist. Der gesamte Code zum dynamischen Schreiben in den div-Bereich wird davon abhängig gemacht. So werden Fehlermeldungen in Browsern vermieden, die zwar JavaScript, aber kein Dynamisches HTML beherrschen. Dann wird abgefragt, ob mit dem älteren Netscape-Modell gearbeitet wird. Wenn ja, sieht das dynamische Schreiben in den div-Bereich ein klein wenig anders aus als in den übrigen Fällen. Der Grund ist eine weitere Schwäche des Netscape-4-Browsers. Er würde die CSS-Klasse Uhr im einleitenden div-Tag ignorieren, wenn man sie ihm nicht noch mal in Form eines span-Elements mit in den dynamischen Bereich schreiben würde. Nur so erhält die Datums-/Uhrzeitanzeige die CSS-Formatierungen, die im Dateikopf im style-Bereich für die Uhr-Klasse festgelegt werden. Das dynamische Ändern des div-Inhalts geschieht durch Aufruf der Bibliotheksfunktion setContent(), die sich um alle weiteren Einzelheiten kümmert.
In der letzten Anweisung innerhalb der Funktion ZeitAnzeigen() ruft sich die Funktion selber wieder auf, und zwar wieder mit einer durch window.setTimeout() bewirkten Zeitverzögerung von 1000 Millisekunden oder einer Sekunde. Dadurch passiert eine Sekunde lang nichts, und dann wird die Zeit erneut geschrieben.
Lauf Text
HTML Code:
<marquee scrollamount="50" scrolldelay="5"> <b>Dieser Text wird ziemlich schnell bewegt</b> </marquee> <marquee behavior="alternate"> <b>Dieser Text wird hin und her bewegt</b> </marquee>
Das wars von mir
Also das war der 3/3 Teil meiner Trilogie
MFG Jusikid
