| |
Aktuell: |
|
Hallo
an alle,
hier nun eine 
Webseite
mit euren bisher erstellen (animierten) Bildern.
Ein
Tutorial zum Erstellen von Maskeneffekten mit dem Graphikprogramm
"Fireworks" 
------------------------------------------------------------------------------------------------
Der
Server finalhost existiert nicht mehr! Eure Webseiten sind
nun auf folgendem Server (ww.funpic.de):
Bewertungskriterien
für eure Webseiten
(Word-Dokument)(Dezember 2006)
Eure bisherigen
Seiten:
NVU-COMPOSER
Da der Dreamweaver nicht kostenlos erhältlich ist (es
gibt allerdings eine 30-Tage-Testversion) empfehle ich euch
den Nvu
- HTML-Editor: Professioneller Freeware-HTML-Editor
mit vielen Funktionen (http://www.nvu-composer.de/)
| |
Kapitel 1: HTML - Grundlagen
und erste Übungen |
|
Kapitel 1.1:
HTML
HTML
In HTML (HyperText Markup
Language) werden Web-Seiten geschrieben.
Homepage
Eine Homepage besteht
aus mehreren Webseiten.
Wie bringe ich meine Seite ins Internet:
FTP
Das File Transfer Protocol
(engl. für „Dateiübertragungsverfahren“,
kurz FTP), ist ein 1985 entwickeltetes Netzwerkprotokoll zur
Dateiübertragung über TCP/IP-NetzwerkE: Damit ihr
eure Webseiten ins Netz stellen könnt, braucht ihr ein
sogenanntes FTP-Programm (auch FTP-Uploader genannt):
- LeechFTP
(Programm zum Upload von Dsateien auf einen Server)(Freeware)
- WS_FTP
LE 5.08 (Programm zum Upload von Dsateien auf einen
Server)(Freeware)
Werkzeuge zum Erstellen von WWW-Seite
- Herkömmlichen Text-Editor:
-> Notepad (Winx), Edit (DOS), SimpleText (Mac), vi
(UNIX) ...
- Konverter (das betreffende Programm
schreibt den HTML-Code. Es sind also keine HTML-Kenntnisse
notwendig):
-> Word/Excel/Powerpoint-Export
- HTML-Editoren (das betreffende
Programm schreibt den HTML-Code. Es sind also keine HTML-Kenntnisse
notwendig) :
-> Dreamweaver, Frontpage, Netscape Composer, ...(
verfügbarer HTML-Editor
http://aktuell.de.selfhtml.org/links/html_editoren.htm)
Nvu
- HTML-Editor: Professioneller Freeware-HTML-Editor
mit vielen Funktionen.
Kapitel 1.2:
Der Quelltext (HTML-Code)
1.2.1 Darstellung des Codes als WWW-Seite:
WWW-Browser (Firefox, Internet Explorer, ...) muß HTML-Code
(auf seine Weise) interpretieren. Dadurch können Webseiten
in verschiedenen Browsern unterschiedlich aussehen!
1.2.2 Tags
- Beispiel: p-Tag (paragraph, Textabsatz):
<p> Absatz</p>
- Tags sind meist Paare aus Anfangs- und
Endtag
- Ein Tag wird mit < und > markiert
- Groß- und Kleinschreibung spielen
keine Rolle
Einige Tags:
- Absatz: p
- Überschriften: h1, h2, h3, h4, h5,
h6
- Hyperlink: a (anchor, Anker)
- Inline-Elemente (erzeugen keinen eigenen
Block):b (bold), i (italics), u (underline), em (emphasize),strong,
small, big
- Stand-alone Tags ("leere Elemente",
treten nicht alsPaar auf): br (break, erzwungener Zeilenwechsel),hr
(horizontal rule, Linie), img (image, Bild)
- Hintergrundbild
<BODY BACKGROUND="beispiel.gif">
- Hintergrundfarbe
<BODY BGCOLOR="#$$$$$$">
- Fett
<B></B> (Beispiel)
- Kursiv
<I></I> (Kursiv)
- Unterstrichen
<U></U> (Unterstrichen)
- Durchgestrichen
<S></S>(
Durchgestrichen)
- Tiefgestellt<SUB></SUB>
(Tiefgestellt)
- Hochgestellt
<SUP></SUP> (Hochgestellt)
- Schreibmaschine
<TT></TT> (Schreibmaschine)
- Zentriert
<CENTER></CENTER>
- Blinkend
<BLINK></BLINK> ()
- Schriftgrösse
<FONT SIZE=?></FONT> ? von 1-7
- <FONT
COLOR="#$$$$$$"></FONT>
- Listenpunkt
<li></li>
- Horizontale
Linie <hr>
-
Zeilenumbruchk <BR>
- Absatz
<p></p>
- Link:
<a href=“seitennamen.dateiendung“>
klicktext</a>
-
Anker:
Um z.B. in einem Text hin- und herspringen
zu können, benötigt man sogenannte Anker:
(1) <a name="ankername"></a>
(2) Link zum Anker <a href=„#ankername“>klicktext</a>
- Tabelle
(hier eine Zeile und zwei Spalten, Breite 50%, mit Rahmen):
<table width="50%"
border="1">
<tr>
<td>Text Spalte 1</td>
<td>Text Spalte 2</td>
</tr>
</table>
Weitere Tags:
http://www.onlyfree.de/htmltags.php
1.2.3 HTML-Struktur: Head & Body
Drei Tags beschreiben die Grundstruktur eines HTML-Dokuments:
<html> - umschließt
den kompletten HTML-Quelltext
<head> - beschreibt den
Datei-Header, der Meta-Angaben enthält(z.B. Zeichensatz,
Autor, Einträge für Suchmaschinen, usw.), die
nicht im Dokument selberangezeigt werden. Muss mindestens
den title-Tag enthalten
<body> - das eigentliche
Dokument
Beispiel: <html><head><title>Titel
der Seite</title></head><body>Inhalt des
Dokuments ...</body></html>
Also:
- Head = das, was nicht in der Seite auftaucht
(keywords, title usw)
- HTML-Tag:
<head></head>
- Body = der eigentliche Seitentext. Generelle
Einstellungen (Farben usw.) werden im Tag
<body>
gemacht
1.2.4 Links sind Hyper!
- Auch URL = Uniform Resource Locator genannt
- Macht das WWW erst stark (und unübersichtlich)
- Verbindungen von einer Textstelle zu
einer anderen
Arten von Links:
- Servername: Internetdomainname (z.B.
www.chemikus.com)
- Pfad: Z.B. file:///C|/wahlpflichtkurs_web_2006/
- Datei: Z.B. Name.ext (.htm, .html ...)
- Groß/Kleinschreibung beachten!
(.GIF nicht gleich .gif!))
......Absolute
und relative Links:
- Absoluter Link: http://www.chemikus.com/kurs_web/index.htm
- Relativer Link: ../kurs_web/index.htm
(../ bedeutet: Aus dem Ordner raus. Dann
geht es in den Ordner kurs_web)
Arbeite wenn möglich mit relativen
Links! Ansonsten mußt Du, wenn deine Homepage auf
einen anderen Server umzieht, alle Links neu setzen.
Link im ...
- gleichen Verzeichnis (nur Dateiname)
<a href=“zweite.html“>klicktext</a>
- anderen Verzeichnis = relativer Pfad:
<a href=“gif/web.gif“>klicktext</a>
- anderer Server:
<a href=“http://www.chemikus.com/php“>
klicktext</a>
Anker:
Um z.B. in einem Text hin- und herspringen
zu können, benötigt man sogenannte Anker:
(1) <a name="ankername"></a>
(2) Link zum Anker <a href=„#ankername“>klicktext</a>
1.2.5 Farben in HTML
- RGB-Konzept (Rot-Grün-Blau), Mischung
per Wert von 00 (=keine Farbe), FF (= Maximum)
- Referenz für WWW-Farben mit browser
– safe – colors: kein dithern (mischen) notwendig
- Hintergrundfarbe z.B blauer Hintergrund,
roter Text:
<body bgcolor=“#0000FF“
text=“#FF0000“>
1.2.6 Web-Bild-Dateiformate (im Browser
anzeigbar)
- Gif: Graphics Interchange Format (mit
verlustfreier Komprimierung), aber nur 256 Farben, dafür
transparent und interlaced
- Jpg: Joint Photographic Experts Group:
Komprimierung mit Verlusten, aber 16,7 Mio Farben darstellbar
- Png: Portable Network Graphic: verlustfrei,
16,7 Mio Farben, interlacing, Transparenz über Alpha-Kanal
1.2.7 Graphiken einbauen
In den Body kommt folgender Tag:
<img src="beispiel.jpg"
/>
Du mußt sowohl den richtigen Dateinnamen
(hier beispiel) wie auch die Dateiendung (hier jpg) angeben.
Achte auch auf den richtigen Pfad!
1.2.8 Web-Schriften (im Browser anzeigbar)
- Nur die bekannten Schriften sind im
Browser anzeigbar: Times New Roman, Arial, Verdena,
Courier New
- Die Schriftart "Verdena"
wurde speziell für das WWW entwickelt!
Schriftgestaltung:
- Tag für
Schriftart, hier bz.B. Arial <font face="Arial">Text</font>
- Tag für
die Schriftfarbe
<font color="#Deine Farbe">Text</font>
- Tag für
die Schriftgröße
<font size="2"">Text</font>
Nun Schriftart, -farbe und -größe in einem
Tag:
Beispiel <font face="Verdana" size="2"
color="#000099">Text</font>
1.2.9 Dateinamen für Webseiten
- Alles kleinschreiben!
- Keine Leerzeichen lassen!
Verboten sind:
- Umlaute: also NIE: übung.htm anlegen.
- Leerzeichen: also NIE: meine homepage.htm
- Scharfes S: ß: also NIE: meinesüßehomepage
- Dateiendung immer: .html oder .htm
Diese Regeln gelten auch
für Graphikdateien (nur das da die Dateiendungen natürlich
anders sind)!
1.2.9 Was sind Frames
Anzeigebeispiel
- Aufteilung des Browsers in mehrere Fenster,
jedes Fenster enthält eine WWW-Seite
- Für alle Links muß man ein
Zielfenster („target“) definieren
- Probleme beim Anzeigen (und Ausdrucken)
sind häufig, darum:
Frames sind nichts für Anfänger!
1.2.10 Was ist ein Frameset?
- Eine Frameset-Seite ist zusammengesetzt
aus mehreren HTML-Dateien, den Frames
- Die Art der Zusammensetzung wird über
die Frameset-Datei bestimmt. Sie bildet den Rahmen, in
dem die anderen HTML-Dateien dargestellt werden.
1.2.11 Eingebetteter Frame - iframe
Anzeigebeispiel
Seit einiger Zeit besteht nun die Möglichkeit,
Frames als sogenannte iframes direkt in die Webseite einzubauen:
- Vorteil:Eingebettete Frames (iframes)
kommen ohne Frameset-Datei aus
- Nachteil: Iframes werden nicht von jedem
Browser akzeptiert!
1.2.12 Guter Stil: Make it so!
- Bei längeren Dokumenten: Inhaltsverzeichnis
- alle Links testen
- Wer ist der Autor / wie alt ist die Seite?
Schlechter Stil:
- Bilder größer als 100 Kb ohne
Vorwarnung
- Ticker, blinken, „under construction“
- Links NICHT mit Textinhalt (kein:
dann klicken Sie „hier“!)
- Weiß auf Schwarz (Ausdruckbar?)
- bunte Hintergrundbilder (so daß
man den Text nicht mehr lesen kann)
- Frames: Inhalte fremder Seiten im eigenen
Frame darzustellen, ist Schwindel!
| |
Beispiele & Übungen zu Kapitel 1
(Übungen 1-6) |
|
|
Übungen, basierend
auf dem Text-Editor (HTML-Code schreiben):
Übung 1:
Erste eigene Webseite
HTML-Code mit einem Texteditor schreiben
und als .html oder .htm -Dokument (Eingabe z.B. index.htm)
in einem eigenen Ordner (Ordner anlegen, deinen Namen
verwenden) innerhalb des Ordners "wahlpflichtkurs9_web"
speichern (um die Webseite dann mit einem Browser
zu öffnen).
Grundstruktur:
<html><head><title>Titel
der Seite</title></head><body>Inhalt
des Dokuments ...</body></html>
Tags einbauen und Hintergrund sowie
Textfarbe wählen:
Hintergrund und Textfarbe:
Übung
2: Webseite nachbauen
Baue
folgende Webseite nach (hier als Bild, damit ihr euch
nicht den Quelltext anschaut :o)
Klicke das Bild an!!!
Lösung
(passwortgeschützt)
Übung 3:
Zwei Webseiten verlinken
Erstelle
eine zweite Webseite und speichere sie als index.htm
in einem neuen Unterordner anab. Verlinke dann beide
Webseiten (relativer Link!).
In die
eine Webseite fügst Du ein Hintergrundbild ein,
dass Du vorher im gleichen Ordner wie die Webseite
gespeichert hast. Das Einfügen geschieht im Body-Tag:
Hintergrundbild: <body background=„dein_bild.gif“>
Übung 4: Frameset und Frames:
Mehrer HTML-Dokumente in einem!
Dir ist sicher schon mal aufgefallen, dass sich beim
Anklicken eines Linkes nicht die ganze Seite verändert,
sondern nur ein Teil der Seite. Ein Inhaltsverzeichnis
oder Menü bleibt jederzeit eingeblendet. Eine
solche Webseite besteht aus mehreren Webseiten! Jeder
Frame (engl. Rahmen) besteht aus einer einzelnen Webbseite.
(1) Grundgerüst einer HTML-Datei
mit Framesets
Um eine Seite in Frames zugliedern, brauchen Sie eine
spezielle HTML-Datei, in der ein Frameset, d.h. die
Anordnung und Größe der einzelnen Frames
definiert wird. Das Frameset bestimmt also die Aufteilung
der Webseite!
Anzeigebeispiel:
Nun die einzelnen Dateien!
Frameset (index.htm):
<html>
<head>
<title>Frameset mit Sitemap</title>
</head>
<frameset cols="250,*">
<frame src="navigation.htm" name="navigation">
<frame src="seite1.htm" name="seite1">
</frameset>
</html>
Welcher normalerweise wichtige Tag fehlt hier?
Die einzelnen Frames:
Der Menüfrane (navigation.htm):
<html>
<head>
<title>Menü</title>
</head>
<body>
<p>Menü:</p>
<p><a href="seite1.htm" target="seite1">Link
1</a></p>
<p><a href="seite2.htm" target="seite1">Link
2</a></p>
<p><a href="seite3.htm" target="seite1">Link
3</a></p>
</body>
</html>
Seite 1 (seite1.htm):
<html>
<head>
<title>Seite 1</title>
</head>
<body bgcolor="#3399CC">
<p><font size="2" face="Arial,
Helvetica, sans-serif"><b>
<font color="#FFFFFF">Seite
1</font></b></font></p>
</body>
</html>
Seite 2 (seite2.htm):
<html>
<head>
<title>Seite 2</title>
</head>
<body bgcolor="#FF3333">
<p><font face="Arial, Helvetica, sans-serif"
size="2" color="#FFFFFF"><b>
Seite
2</b></font></p>
</body>
</html>
Seite 3 (htm):
<html>
<head>
<title>Seite 3</title>
</head>
<body bgcolor="#FF9999">
<p>
<font size="2"><b><font color="#FFFFFF"
face="Arial, Helvetica, sans-serif">Seite
3</font></b></font></p>
</body>
</html>
Übungen
4 bis 6
Übung 5: Eingebetteter
Frame - iframe
Anzeigebeispiel
Seit einiger Zeit besteht nun die
Möglichkeit, Frames als sogenannte iframes direkt
in die Webseite einzubauen:
- Vorteil:Eingebettete Frames (iframes)
kommen ohne Frameset-Datei aus
- Nachteil: Iframes werden nicht
von jedem Browser akzeptiert!
Seite iframe.htm:
<html>
<head>
<title>Eingebetter Frame</title>
</head>
<body bgcolor="#FFFFFF">
<div align="left"><a href="seite1.htm"
target="iframe">Seite 1</a> I
<a href="seite2.htm" target="iframe">Seite
2</a> I <a href="seite3.htm"
target="iframe">Seite 3</a></div>
<iframe src="seite1.htm" width="50%"
height="300" name="iframe"></iframe>
</body>
</html>
Übungen
4 bis 6
Übung 6: Javascripte - ein
Beispiel: Rollover-Bilder
Anzeigebeispiel:
- Lade die Bilder roll1.gif und roll2.gif
in deinen Webordner.
- Erstelle ein neues Htm-Dokument:
roll.htm
- Kopiere folgenden Text in den head-Bereich:
<script language="JavaScript">
<!--
browser_name = navigator.appName;
browser_version = parseFloat(navigator.appVersion);
if (browser_name == "Netscape" && browser_version
>= 3.0)
{ rollover = 'true'; }
else if (browser_name == "Microsoft Internet Explorer"
&& browser_version >= 4.0)
{ rollover = 'true'; }
else { rollover = 'false'; }
if (rollover == 'true') {
grafik1=new Image();grafik1.src="roll1.gif";
grafik2=new Image();grafik2.src="roll2.gif";
}
function rein1(img,ref) { if (rollover == 'true')
{ document.images[img].src = ref; } }
function raus1(img,ref) { if (rollover == 'true')
{ document.images[img].src = ref; } }
//-->
</script>
Und in den Body-Bereich:
<a href="ziel.htm"
onMouseOver="rein1('platzhalter1',grafik2.src);"
onMouseOut="raus1('platzhalter1',grafik1.src);">
<img src="roll1.gif" width="60" height="40" border="0"
name="platzhalter1" alt="Es klappt" >
</a>
(Quelle: http://www.grammiweb.de/anleitungen/ka_rollover.shtml)
Übungen
4 bis 6
|
| |
Kapitel 2: Hochladen
von Webseiten auf einen Server |
|
Euer
Webspace:
- Host:
wpuads.wp.funpic.de
- Benutername:
wpuads
- Passwort:
Nur
per Email erhaltbar
- Ordner
mit Vornamen erstellen, in dem sich die Webseiten befinden!
- Webseiten:
Ordner bitte ablegen im Ordner "htfiles"
-
WWW-Adresse:http://wpuads.wp.funpic.de/Ordner
des Benutzers, z.B. http://wpuads.wp.funpic.de/laura/index.htm
-
Zum
Upload benötigt ihr ein FTP-Programm
Umgang mit LeechFTP:
Das Startfenster:
Verbinden:
Bookmark für
eine Verbindung anlegen:
"Buch"
anklicken:
Neuen
Ordner erstellen und benennen:
Rechter
Mausklick in das rechte Fenster:
Nun
gibt man auf dem ersten Karteireiter die Domain und die
Zugangsdaten an, die man vom Domainbetreiber erhalten oder
bei ihm für einen FTP-Zugang evtl. eingerichtet hat.
Hier z.B.:
Dieses Bookmark kann man jetzt mit rechter Maustaste anklicken
und Verbinden wählen. Hat man evtl. falsche Zugangsdaten
angegeben, kann man sie so auch nachbearbeiten:
Wenn
die Verbindung funktioniert, sieht man im LeechFTP im rechten
Teilfenster den Domain-Server. Jetzt kann man vom lokalen
PC ganze Ordner oder auch markierte Dateien "uploaden"
durch einen Doppelklick:
Will
man eine bestehende Verbindung trennen, klickt man in der
Symbolleiste den Stecker an. Die Funktionen der Symbole
werden übrigens durch eine kleine Infoblase kurz eingeblendet.
Eine
ausführliche Anleitung findet ihr unter:
http://www.big-foot.de/leechftp_anleitung.htm
| |
Kapitel 3:
Arbeiten mit dem HTML-Editor "Dreamweaver" |
|
Wähle beim Starten des Programmes
im Arbeitsbereich-Setup die Option "Designer":
Die Menüleiste:
Durch Anklicken des kleines schwarzen
Pfeiles neben "Allgemein" könnt ihr weitere
Fenster öffnen (z.B. das Fenster Formulare für
ein späteres Gästebuch)
Das Eigenschaftsfenster:
Im Eigenschaftsfenster
könnt Ihr die Eigenschaften eines markierten Objektes
(eines Text, eines Bild, etc.) ändern (z.B. im Falle
eines Textes eine andere Schriftart wählen oder einen
Link einfügen).
Das Aussehen des Eigenschaftsfenster ändert
sich je nach markiertem Objekt. Hier das Eigenschaftsfenster
für ein Bild:
Erstellen eines Framesetes
Entfernen vordefinierter Site-Definitionen
(Sind Seiten definiert, so werden alle Dateien in einem
bestimmten Stammordner gespeichert. Dies kann aber zu Problem
bei Verlinkungen führen)
Klicke nacheinander "Site" -> "Sites definieren"
an. Markiere im Fenster alle vorhandene Seiten und klicke
nun auf "Entfernen"!
Frames einfügen:
Klicke nacheinander folgende Optionen
an:
(1) "Modifizieren" -> "Frameset"
- "Frame oben teilen"
(2) "Modifizieren" -> "Frameset"
- "Frame oben teilen"
Der Frame-Inspektor:
Öffnen des Frame-Inspektors: "Fenster"
-> "Frames" aktivieren
Der Frame-Inspektor bietet eine Darstellung
der Frames einer Seite!
Markiere den äußeren
Rahmen durch Klicken auf den Rahmen im Frame-Inspektor.
Damit ist das Frameset ausgewählt!
Frameset speichern:
"Datei/Frameset speichern unter" -> Dateiname:
Gebe "index" ein (die Endung "htm" fügt
Dreamweaver automatisch rein. Es können aber auch andere
Endungen gewählt werden)
Frameeigenschaften einstellen:
Im Frame-Inspektor den Rahmen
markieren und im Eigenschaftsfenster die Namen (topframe,
linkerframe, rechterframe) eingeben:
Soll das Frameset keine
Rahmen haben, so wähle im Eigenschaftsfenster statt
Rahmen Standard -> Rahmen Nein:
Seitentitel und Seiteneigenschaften
der einzelnen Frames eingeben:
Wenn Du einen betreffenden
Frame im Frame-Inspektor anklickst, wird dieser ausgewählt.
Um die einzelnen Frame-Seiteneigenschaften
festzulegen, markiere nacheinander die Frames im Frame-Inspektor
und gebe jeweils über "Modifizieren" ->
"Seiteneigenschaften" die Seitentitel ein. Bitte
verwende auch für jeden Frame eine andere Hintergrundfarbe!
Speichern nun die Frames: "Datei"
-> "Alle Frames speichern"
Um
die Darstellung im Browser zu überprüfen, klicke
auf F12 oder
"Datei" -> "Vorschau in Browser"
Sechs neue Seiten anlegen:
Wähle "Datei" -> "Neu".
Erstelle und speichere nacheinander sechs neue Html-Seiten
(Titel: Schule, Privat, Gästebuch, ...).
Menüframe bearbeiten:
Der linke Frame soll dein
Menüframe werden. Gebe dazu den Text für die Links
zu deinen 6 Seiten ein und den Text "Startseite"
Markiere nun nacheinander
die einzelnen Linktexte und verlinke sie zu deinen eben
erstellten Seiten:
Weiter geht es hier:
http://www.lehrerfortbildung-bw.de/werkstatt/anleitung/
internet/dreamweaver_mx04/index.html
| |
Kapitel 4:
Guter Still - Cascading Style Sheets |
|
Guter Stil: CSS
Cascading Style Sheets (Word-Dokument)
I Style Sheet Datei
1 I Style Sheet
Datei 2
---------------------------------------------------------------------------------------------------------------------------------
Hier
eine Sammlung von Programmen, unter denen sich u.a. ein
"Scrollbareditor" befindet. Mit diesem könnt
ihr das Farblayout von Scrollbalken entwerfen und das Programm
generiert einen entsprechenden Code (nach dem Entwurf den
Pfeil anklicken!):
Toolbox mit Scrollbareditor
(.zip, 297kb)(von http://www.grammiweb.de)
| |
Kapitel 5:
Passwortschutz mit HT-ACCESS |
|
Tutorial
"Passwortschutz mit HT-ACCESS"
Kopierbare Skripte als Textdatei
Anzeigebeispiel
(Weitere
Informationen: http://www.funpic.de/htaccess.php)
| |
Kapitel 6:
Programmieren lernen - ein erstes Gästebuch |
|
Tutorial (Word-Dokument)
I
Alle Skripte
(zum Kopieren und Einfügen)
I Hier die einzelnen Dateien (bis auf die Datenbank): http://wpuads.wp.funpic.de/php/
I
Schema -
Vorlage
So
sieht das fertige Gästebuch aus!
| |
Kapitel 7:
Eine
kostenlose Besucherstatistik einbinden |
|
Einen
kostenlosen Counter mit einer umfassenden Besucherstatistik
gibt es bei www.webstats4u.com:
Anzeigebeispiel
(diese Homepage www. chemikus.com) I Beispielcode
zum Einfügen
Registrierung
Tutorial
(Word-Dokument)
---------------------------------------------------------------------------------------------------------
Nach der Registrierung wird der Code
via Email zugesendet. Er muss mit Notepad zwischen die beiden
zwischen <body> und </body> Tags eingefügt
werden:
Den Code auf Ihre Seite
einfügen:
Das Einfügen des webstats4U Zählers in Ihre Webseite
ist sehr einfach. Sie müssen den vollständigen
Zähler-Code in den body des html-codes Ihrer Webseite
(zwischen <body> und </body> Tags) einfügen.
Falls Sie einen HTML Editor benutzen, müssen Sie den
Code als Script einfügen. Weil dieses manchmal nicht
funktioniert, raten wir Ihnen, den Zähler mit einem
vereinfachendem Programm wie Notepad einzufügen. Öffnen
Sie den html-Code Ihrer Webseite und suchen Sie den </body>
Tag, setzen Sie dann den Zähler-Code über dem
</body> Tag ein.
| |
Kapitel 8:
Suchmaschinen
/ Suchmaschinenoptimierung |
|
Tutorial"Was
nützt die schönste Website, wenn sie niemand findet?
Einträge für Suchmaschinen" (Word-Dokument)
I kopierbare
Meta-Tags
<TITLE>Die großen Entdecker</TITLE>
<META NAME="keywords" content="Chemie,
Erdkunde, Geschichte, Online-Spiele, Unterricht, Unterrichtsmaterialien">
<META NAME="description" content="Unterrichtsmaterialien
für den Chemie-, Erdkunde- und Geschichtsunterricht.">
<META NAME="Content-Language" content="de">
<META NAME="author" content="Christoph
Blaschke">
<META NAME="ROBOTS" CONTENT="INDEX, FOLLOW">
<META NAME="revisit-after" CONTENT="20
days">
---------------------------------------------------------------------------------------------------------
Links:
Meta-Tag
Generator
| |
Kapitel 9:
Graphik |
|
| 
Ich wünsche euch ein super
Schuljahr 
