Ankündigung

Einklappen
Keine Ankündigung bisher.

[Sammelthread] Erstellen einer Homepage - Schritt für Schritt

Einklappen
Das ist ein wichtiges Thema.
X
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [Sammelthread] Erstellen einer Homepage - Schritt für Schritt

    Nachdem ich einen weiteren Thread gelesen habe, der ungefähr anfing wie "Ich bin ein totaler Anfänger und möchte mir eine Homepage bauen. Wie geht das?", dachte ich mir, ich mache mir mal die Mühe eine Art Sammelthread zu erstellen, wo ich versuchen möchte, eine genaue Anleitung bzw. die ersten Schritte für die eigene Homepage zu erklären. Kritik und Anregungen sowie Erweiterungen sind erwünscht!

    Überlegungen
    1. Welches Thema soll meine Homepage haben?
      • Private Seite
      • Clan-Page
      • Forum
      • etc.
    2. Wer soll sie sehen dürfen?
      • Gibt es eine Seite mit Login-Bereich?
      • Soll man die Seite nur mit Login betreten dürfen?
      • Soll es eine öffentliche Seite sein?
    3. Welchen Seitettyp möchte ich haben?
      • Alle Unterseiten einzeln erstellen (anfangs empfehlenswert)
      • C-M-S
      • Gegebenenfalls Forensoftware


    Nötige Software

    Zum erstellen einer einfachen HTML-Seite benötigt ihr im Grunde genommen nur den (Windows)-Editor. Damit wird das Ganze aber relativ schwierig für Anfänger und ich empfehle entweder den kostenlosen NVU-Composer oder wenn es denn etwas kosten soll Dreamweaver oder Microsoft Expression Web. Beide kostenpflichtigen Programme können als Vorabdemo getestet werden. So könnt ihr herausfinden, welches der Programme besser zu euch passt. Natürlich gibt es noch tausende Weitere, aber dies sind (meiner Meinung nach) die Bekanntesten.

    Grundkenntnisse

    Natürlich kann ich euch hier nicht anfangen, HTML zu erklären. Dabei helfen euch aber einige Seiten, die ich weiter unten auflisten werde. Zu Beginn jedoch möchte ich euch einige Infos geben, bevor ihr anfangt. Wenn ihr euch eine Homepage macht, werdet ihr um "Stylesheets" kaum herumkommen. In diesen Css-Stylesheets werden (wie der Name schon sagt) bestimmte Styles für Objekte auf der späteren Seite festgelegt. Beispielsweise gebe ich mit Hilfe von Css dem Objekt 1 die Eigenschaft, den Text grün zu färben. Auf der Hauptseite gebe ich einem Html-Tag den class-Wert "1". Nun wird in diesem Tag der Text grün angezeigt.

    Beispiel in Css&Html:
    Css
    Code:
    .1 {
    color: green;
    }
    Html
    HTML-Code:
    <span class="1"> Der Text  ist grün </span>
    Ausgabe:
    Der Text ist grün

    Mit Hilfe von Css lassen sich Objekte formatieren, positionieren, in ihrer Größe verändern und vieles Mehr.

    Hier einige Links, die euch weiterhelfen werden. Bitte durchsucht vorerst die Seiten und informiert euch ausreichend, bevor ihr Fragen stellt. Das soll auf keinen Fall heißen, dass die Community keine Fragen beantwortet, doch meißt hilft es euch mehr, wenn ihr eure eigenen Fehler findet und verbessert, als wenn euch der perfekte Code einfach vor die Nase gelegt wird.


    Einige Fälle...

    ...Fall private, öffentliche Homepage:
    Das ist so ziemlich der einfachste Fall. Schaue dir einfach die o.g. Seiten genau an und versuche einmal mit Hilfe dieser Seiten anzufangen, deine Homepage zu erstellen. Bei Fragen, suche wie gesagt vorerst auf den gegebenen Seiten oder auch hier im Forum. Erst wenn du nichts genaues findest, stelle die Frage als Thread!

    ...Fall private Seite mit Login:
    Du möchtest eine eigene Seite mit Login erstellen und weißt nicht wie? Einen eigenen Login zu erstellen ist wieder etwas schwieriger und Html+Css reicht hier nicht ganz aus. Was du benötigst (und was du sicherlich schon gehört/gelesen) hast, ist PHP. Dazu gibt es auch viele Links, die ich weiter unten nochmal aufführen werde. Die Homepage an sich einfach wie o.b. erstellen. Stichworte für den Login und Html: Formular, Post

    ...Fall C-M-S:
    Jetzt habe ich oben einfach einen Begriff verwendet, den einige warscheinlich garnicht kennen. CMS steht für ContentManagementSystem. Das Prinzip ist folgendes: Es gibt eine Datenbank, in der bestimmte Texte und INhalte der Seite gespeichert werden (MySql-Datenbanken). Aus diesen Datenbanken werden dann für bestimmte Seiten, bestimmte Inhalte aufgerufen. Einfaches Beispiel: In der Datenbank ist ein Eintrag mit der ID 1. IN dem Eintrag steht ein bestimmter Text. Wenn der User also die Homepage aufruft (www.deine-seite.de/index.php?id=1), dann läd PHP die Inhalte mit der ID 1, also auch unseren Text und zeigt sie an.
    Vorteil:
    • Inhalte-Verwaltung findet ausschließlich im Internet statt, kein Hochladen mehr.
    • Kaum Html-Css Kentnisse benötigt
    • Viele kostenlose Systeme im Netz (siehe Links unten)

    Das Thema CMS ist sehr sehr groß und schwierig genau zu erklären. Wikipedia hilft!

    ...Fall Forum:
    Bei einem Forum benötigst du eine Foren-Software. Hier gibt es viele verschiedene, teils kostenpflichtige, Anbieter. Dieses homepage-forum läuft beispielsweise mit der Software von vBulltein(Seite z.Zt. offline). Kostenlose Anbieter findest du zu Hauf im Internet. Einfach mal googeln.

    Domain, Webspace &Co.
    Ich habe hier jedoch etwas vorausgesetzt. Und zwar fragt sich sicherlich der ein oder Andere, wo er seine Homepage im Internet anschauen kann? hierzu benötigst du Webspace und eine (damit meißt verbundene) Domain. Kostenloser (werbefreier) Anbieter ist hier beispielsweise bPlaced. Eine "normale" Domain gibts schon relativ billig bei Strato etc. Auch hier hilft Google weiter!
    Wichtig ist, dass ihr FTP bereitgestellt bekommt. Mit FTP (File Transfer Protocoll) lassen sich die Dateien bzw die Homepage auf den Webspace laden. Weitere Infos hier.

    Links PHP

    Links CMS


    Allgemeines
    Noch ein paar allgemeine Dinge zur Homepage und Homepagegestaltung. Oft scheint es für Anfänger einfacher, eine Homepage mit Hilfe von Tabellen zu erstellen, weil so die Darstellung einfacher zu handeln ist. Doch Tabellen sind keine Methode, um Homepages zu erstellen, sondern um eine Statistik oder Ähnliches geordnet darzustellen. Finger weg von Tabellen! Es gibt noch etwas (meines Erachtens viel viel schlimmeres): Frames. (Beispiel) Diese Metode stammt von vor 10-15 Jahren und it vollkommen veraltet. Es gibt zwar hin und wieder noch Seiten mit Frames, doch auch hiervon solltet ihr eure Finger lassen. Probiert es ganz einfach mal mit "div"'s.
    Um eine Startseite für eure Internetseite zu erstellen, müsst ihr die Datei "index.html" oder "index.php" nennen. Der Server sucht automatisch nach diesen Dateien und ruft sie dann als erste Seite auf. Wenn eine Datei mit "php" endet, kann in dieser Datei auch PHP verwendet werden. Ansonsten darf man nur Html verwenden. Php wird ignoriert bzw. als Text ausgegeben.

    Ich hoffe ich konnte euch einigermaßen weiterhelfen. An alle, die noch Erweiterungen oder Verbesserungen haben, schreibt sie doch einfach als Antowort!
    Sollten Fragen entstehen, schreibt mir eine PN oder besucht meine Homepage und kontaktiert mich dort.

    Ich wünsche euch viel Erfolg mit eurer ersten eigenen Homepage!
    www.urlaubsliste.eu | Die Packliste für den Urlaub - Nichts mehr zu Hause liegen lassen!

  • #2
    AW: [Sammelthread] Erstellen einer Homepage - Schritt für Schritt

    Gute Beschreibung.

    Ich hake mich mal beim Tipp geben "div's" ein. Tabellen sind wirklich keine gute Idee, und div's sind eigentlich auch einfacher. Machen wir doch mal ein Grundgerüst zusammen.

    Einen Header, eine Navi, ein Content sowie ein Footer:

    <div id="head">***</div>
    <div id="navi">***</div>
    <div id="content">***</div>
    <div id="footer">***</div>

    Somit hab ich eigentlich schon das, was ich brauche. Allerdings ohne Inhalt. Dort, wo ich die Sterne *** drin habe, kommen dann HTML-Codes rein. Beispielsweise für ein Logo im Header oder Navigationspunkte in der Navi.

    Diese div's kann ich nun mit CSS (Cascade Style Sheet) ansprechen. Beispiel?

    div id="head" z.B. ergibt im CSS die "Anweisung" #head

    Nun brauch ich eine externe style.css, welche ich anlegen und in der index.php(.html) definieren muss, Beispiel: <link href="/style.css" rel="stylesheet" type="text/css" media="screen">.

    Die style.css kann ich nun so aufbauen:

    #head {
    width: 800px;
    height: 100px;
    }
    #navi {
    width: 800px;
    height: 30px;
    }

    und so weiter... Es gibt auch andere Lösungsansätze, aber am Anfang sollte dies das leichteste sein.

    Will ich nun einen Rahmen um die div's haben, kommt folgende Sache hinzu:

    #head {
    width: 800px;
    height: 100px;
    border: 1px solid rgb(0, 0, 0); oder border: 1px solid #000; (das erste sind RGB-Farbcodes, das zweite HEX-Codes)
    }

    Somit ist meine div (#head) nun 800px (pixel) weit, 100px hoch und mit einem schwarzen Rahmen (rgb(0, 0, 0); #000) versehen.

    Habe ich aber nun etwas, was ich mehrmals nutzen möchte und gleich benennen will, muss ich statt <div id="test"> folgendes anlegen: <div class="test">. Eine ID kann ich nur einmal eindeutig benennen (#head), wohingegen ich eine class (.test) mehrmals anlegen und nutzen kann.

    Ich hoffe, das konnte das "Wunder von div" etwas erklären

    ChristophNitschke
    Zuletzt geändert von ChristophNitschke; 09.09.2013, 10:01.

    Kommentar


    • #3
      Hi Prexioc,
      du musst mehr Infos über deine Internetseite geben. Mit deiner Frage kann man nicht viel anfangen. Die Frage ist, wie ist deine Seite aufgebaut?, was benutzt du, um die Seite zu erstellen, verwalten: Ein CMS, Ein Website-Baukasten? Das sind Dinge die du mit angeben musst, damit wir dir weiterhelfen können.
      Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt.
      Albert Einstein

      Kommentar

      homepage-forum.de - Hilfe für Webmaster! Statistiken

      Einklappen

      Themen: 56.459   Beiträge: 428.482   Mitglieder: 27.877   Aktive Mitglieder: 60
      Willkommen an unser neuestes Mitglied, jorna2a.

      Online-Benutzer

      Einklappen

      636 Benutzer sind jetzt online. Registrierte Benutzer: 1, Gäste: 635.

      Mit 2.057 Benutzern waren am 14.07.2019 um 11:45 die meisten Benutzer gleichzeitig online.

      Die neuesten Themen

      Einklappen

      SimpleSite

      Die neuesten Beiträge

      Einklappen

      Lädt...
      X