Hier ein ganz simples HTML Script zum Einstieg. Dieser Beitrag ist für alle gedacht die davor zurückschrecken sich an die HTML Programmierung zu wagen.
Beispiel Windows XP
Ich starte über Start / Alle Programme / Zubehör / das Programm Editor
Der <> Tag leitet einen Befehl ein, der </> Tag schließt den Befehl ab.
Vorab ist hier der Quellcode
Ich gebe folgendes ein ( ohne Kommentare )
<html> Kommentar: Ich teile mit das es sich um ein html Dokument handelt
<head> Kommentar: Der Kopf, hier stehen die Metaangaben, wichtig für Suchmaschinen
<meta http-equiv=“Content-Type“ content=“text/html; charset=iso-8859-1″> Kommentar: Ich teile dem Browser mit daß ich den deutschen Zeichensatz verwende. Wichtig um Umlaute und Sonderzeichen richtig darzustellen ( ä,ö,ü,ß )
<title>Die beste Seite im Internet</title> Kommentar: Der Titel meiner Seite
<meta name=“description“ content=“Eine bessere Seite wirst du nirgends finden“> Kommentar: Die Beschreibung meiner Seite
<meta name=“keywords“ content=“super,spitze,toll,wahnsinn,irre,fantastisch“> Kommentar: Die Keywords, die nach meiner Meinung auf die Homepage zutreffen.
<meta name=ROBOTS content=“INDEX, FOLLOW“> Kommentar: Die Suchmaschinen sollen meine Index datei und alle folgenden aufnehmen ( spidern)
<meta name=“publisher“ content=“Andi“> Kommentar: Der Herausgeber ( Name des Herausgebers )
</head> Kommentar: Ich schließe den Kopfbereich
<body text=“#000000″ bgcolor=“#ffffff“> Kommentar: Body ( Körper ) leitet den Inhalt der Seite ein. Meine Seite soll einen schwarzen Hintergrund haben und der Text soll weiß sein. Alternativ können auch die englischen Bezeichnungen der Farben eingegeben werden ohne # „white“ „black“ Wenn ich nur body verwende werden die Standartfarben genommen. Weiß für den Hintergrund. Schwarz für die Textfarbe.
<center> Kommentar: Alles was dahinter folgt soll mittig sein
<img src=“super.gif“ width=“800″ height=“50″ border=“0″> Kommentar: Das Bild super.gif, dieses habe ich vorher mit paint.net erstellt und abgespeichert. In meinem Fall ist es 800px breit und 50px hoch und soll ganz oben auf der Seite zu sehen sein, ohne Umrandung ( border ).
<h1>Schön daß du hier bist</h1> Kommentar: Die Überschrift h1 ist die oberste Ebene mit der größten Schrift. Es folgen h2, h3 u.s.w.
Ich gehe auf die Seite von Google, wo mir angeboten wird die Suchmaske von Google zu verwenden => http://www.google.de/searchcode.html
Ich markiere den Code in der Box ( Am Anfang der ersten Zeile die linke Maustaste drücken und festhalten, dann die Maus bis zum Ende des Textes führen und die Maustaste loslassen ). Jetzt ist der gesamte Text blau markiert. Entweder die Tastenkombination strg&c für in die Zwischenablage kopieren oder mit der rechten Maustaste kopieren auswählen.
Im Editor gebe ich in der nächsten leeren Zeile strg&v für einfügen ein oder verwende die rechte Maustaste für einfügen.
Es erscheint folgender HTML Code. Form öffnet ein Formular, table ist eine Tabelle und Input sind die Eingaben die der Anwender später verwendet. Darauf gehe ich jetzt nicht näher ein.
<!– Search Google –>
<center>
<FORM method=GET action=“http://www.google.de/search“>
<TABLE bgcolor=“#FFFFFF“><tr><td>
<A href=“http://www.google.de“>
<IMG src=“http://www.google.de/logos/Logo_40wht.gif“ border=“0″
ALT=“Google“ align=“absmiddle“></A>
<INPUT TYPE=text name=q size=31 maxlength=255 value=““>
<INPUT TYPE=hidden name=hl value=de>
<INPUT type=submit name=btnG VALUE=“Google Search“>
</td></tr></TABLE>
</FORM>
</center>
<!– Search Google –>
<p> Kommentar: Ich füge einen Absatz ein
<strong>Dies ist eine Seite, die angelegt wurde um Personen die sich bisher nicht an HTML herangetraut haben<br />zu zeigen, daß es relativ einfach ist eine simple Seite zu erstellen.<strong> Kommentar: strong bedeutet das der nachfolgende Text fett angezeigt wird. Alternative <b> für bold. Mit <br /> füge ich einen Zeilenumbruch ein, sonst würde der Text sich je nach Auflösung über die ganze Seite strecken. Das sieht nicht so gut aus.
</p> Kommentar: Ende vom Absatz
<p>
HTML macht Spaß Kommentar: Einfacher Text
</p>
<p>
<font size=“3″>Komm mich doch mal wieder besuchen</font> Kommentar: font gibt den Zeichensatz an. Der Text wird in der Schriftgröße 3 angezeigt. Möglich sind Größen von 1-7 . Hier können weitere Angaben hinzugefügt werden z.B. <font size=“3″ color=“red“> für rote Schrift.
</p>
Zum Abschluss:
<p>
<a href=“http://www.andivista.de/blog/?p=304″>
<font size=“3″ color=“red“>
<strong>HTML Einstieg – Beschreibung im Blog</strong>
</font></a>
</p>
Kommentar: Mit a href teile ich mit das ein Link angezeigt wird. In dem Fall zu diesem Beitrag. Der Text wird in der Schriftgröße 3, fett und rot angezeigt. Wenn Ich möchte daß der Link in einem neuen Fenster angezeigt wird, gebe ich ein <a href=“http://www.andivista.de/blog/?p=304″ target=“_blank“>target=ziel Mit </a> schließe ich den Tag. Wichtig !
</center> Kommentar: Ich schließe den Tag „zentrieren“.
</body> Kommentar: Der Body Tag wird geschlossen
</html> Kommentar: Das Ende des HTML Dokuments. Der HTML Tag wird geschlossen.
Jetzt speichere Ich die Datei und vergebe den Namen htmluebung.html, wenn es die Startseite sein soll muß die Datei „index.html“ oder index.htm“ heißen
Hochladen kann Ich diese nun mit Filezilla. Wurde im vorherigen Beitrag beschrieben. Wichtig: Die Bilddatei ( super.gif ) muß auch hochgeladen werden.
So sieht die Seite aus. Um den HTML Code zu sehen, beim Firefox oder IE die rechte Maustaste betätigen und im Kontextmenü „Seitenquelltext anzeigen“ oder „Quelltext anzeigen“ auswählen.
Wer jetzt neugierig geworden ist und mehr lernen möchte geht auf die folgende Seite
Bitte hier klicken
Empfehlung: Nach Möglichkeit die Seite immer mit Firefox und dem Internet Explorer testen. Da man nichts zerstören kann, steht dem experimentieren nichts im Weg. Have Fun 🙂
