Eigene Homepage in drei Schritten: HTML-Dateien erstellen
Den ersten Schritt, Domain registrieren und Webspace mieten, haben wir also mit Ach und Krach hinter uns gebracht. Ab jetzt wird es einfacher.
HTML-Dateien erstellen:
Wer 10 Minuten Zeit hat, eignet sich den Umgang mit den nachfolgend beschriebenen wenigen HTML-Befehlen an, die wir für unsere Seite benötigen; wer nur 5 Minuten Zeit hat, lädt das Zip herunter [Link zum Download der Zip-Datei unter dem Artikel], in dem sich ein Ordner mit den 3 untereinander verlinkten HTML-Dateien befindet. Diese mit einem Text-Editor (z. B. MS Notepad) öffnen, den eigenen Text und die eigenen Daten einsetzen, fertig. So sieht sie erstmal aus. Ab ins Netz damit.
Wichtig ist, erstmal da zu sein. Was macht man, bevor man sich hinsetzt und ein Theaterstück schreibt? Genau: Den Premierentermin festlegen. Also zuerst die Seite hochladen, dann nach und nach mit Inhalten füllen und dann erst vergrafiken.
Jede HTML-Datei verfügt über einen head-Bereich <head>, der den Title <title> enthält [Anmerkungen zum Title-Tag] und einen body-Bereich <body> mit den sichtbaren Inhalten.
Das Layout unserer Seite basiert auf einer einzeiligen Tabelle mit 2 Spalten. In der linken Spalte mit festgelegter Breite befindet sich die Navigation. In der rechten Spalte, die den Rest des Bildschirmfensters einnimmt, der Text, bestehend aus einer Überschrift ersten Grades <h1> und einem Absatz <p>
Jedes HTML-Element besteht aus einem öffnenden <tag> und einem schließenden </tag>. Wie anhand der Tabelle <table> gut nachvollzogen werden kann, können HTML-Elemente verschachtelt werden, sodass eine hierarchische Struktur entsteht.
Ein Link besteht aus einem öffnenden Tag <a> und einem schließenden </a> (a = anchor). Das im öffnenden <a> enthaltene Attribut href (href = hyper reference) definiert das Verweisziel. Die Links im Navigationsmenü unserer Seite verweisen auf die Dateien index.html, profil.html und kontakt.html”. Zwischen <a> und </a> steht der sichtbare Linktext:
<a href=”kontakt.html”>Kontakt</a>.
<br /> ist ein Zeilenumbruch.
Suchmaschinen lesen den sichtbaren Text einer Seite aus, ziehen daraus Schlüsse hinsichtlich der Relevanz einer Seite für bestimmte Suchbegriffe. Taucht der Suchbegriff im Titel der Seite auf, gibt das natürlich richtig Punkte, weitere Punkte für den Suchbegriff gibt es, wenn dieser in den Überschriften und Linktexten erscheint, <b>fett</b> und <em>kursiv</em> ausgezeichnet ist.
Die wohl beste und umfassendste deutschsprachige Einführung in HTML ist Selfhtml von Stefan Münz. In der dort zu findenden Kurzreferenz kann man alle HTML-Elemente nachschlagen.
Noch 2 Kleinigkeiten!
In die erste Zeile des Dokuments gehört die Dokumenttyp-Deklaration:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
Einfach in jede einzelne Seite kopieren und vergessen.
In den head-Bereich gehört die Angabe der verwendeten Zeichenkodierung:
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
Einfach in jede einzelne Seite kopieren und vergessen.
Und ab damit ins Netz!
Download: Beispielseite (Zip 1,5 Kb)
 |
|
Eigene Webseite in drei Schritten |
|
| Teil I: Domain registrieren, Webspace mieten | |
 |
Teil II: HTML-Dateien erstellen |
 |
Teil III: Webseite auf den Server laden |
|
Ola!
Warum die Frischlinge noch mit Tabellenlayout anfixen? Lieber gleich mit Div-Layout arbeiten. Früher oder später kommst du um das Thema CSS eh nichtmehr rum
Mit hanfigen Grüßen
Steffen
Ist für jemanden, der wirklich gar keine Grundlagen hat, wie die Leser an die mich hier ja wende, einfach der schnellste Weg, um erstmal was im Netz zu haben. Das Thema CSS ist ja im “Workshop” auch schon behandelt.
Hanfige Grüße zurück
Dirk
Ich denke auch das es für Anfänger einfacher ist mit Tabellen-Design zu arbeiten, schon allein deswegen weil man jedem ohne Probleme erklären kann “Das ist eine Tabelle, das ist eine Reihe, das ist eine Spalte. Fertig ist eine Tabelle”. Und jeder “Depp” wird sich etwas darunter vorstellen können, weil jeder weiß was eine Tabelle ist und wie sie aussieht.
CSS ist da einfach abstrakter und schwerer zu verstehen…
“Niedlich” dieser Beitrag… HTML für Anfänger… Süß
P.S.:
Und wann gibt es den PHP-Workshop der erklärt wie einfach man Kopf und Fuss einer Seite automatisch integriert?
@Heiko,
ich will natürlich was für meine Übersetzerkollegen tun, die ihr ganzes Geschäft online abwickeln, aber immer noch keine eigene Webseite, oder eine völlig idiotische Webseite haben, die kein suchender potenzieller Kunde finden kann. Daher der kleine Dreiteiler “Eigene Webseite in 3 Schritten”, der erklärt, wie wenig Zeit und Geld es kostet, eine Domain anzumelden, ein paar HTML-Dateien zu erstellen und sie ins Netz zu schicken. Ich versuche den denkbar einfachsten und schnellsten Weg dahin möglichst jedem Laien verständlich zu beschreiben.
Wenn die allerdings mal einen automatisch generierten Seitenkopf und Fuss benötigen, muss ich sie zu Dir schicken und müsste auch selbst zu Dir kommen.
Vielleicht gibts den entsprechenden Workshop ja irgendwann mal im Programmierer-Blog.
Mmmh…. Wenn du das so sagst…. Auf jedenfall eine nette Anregung für den Programmierer-Blog.
Ich werde mal darüber nachdenken.
ach gott, tabellenlayouts
@suit
Ja, sind wieder ganz groß im Kommen!