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.375   Beiträge: 428.051   Mitglieder: 27.717   Aktive Mitglieder: 80
      Willkommen an unser neuestes Mitglied, Oldiebumser.

      Online-Benutzer

      Einklappen

      673 Benutzer sind jetzt online. Registrierte Benutzer: 2, Gäste: 671.

      Mit 1.625 Benutzern waren am 17.03.2018 um 18:52 die meisten Benutzer gleichzeitig online.

      Die neuesten Themen

      Einklappen

      • daniel5959
        Antwort auf Hallo, ein Neuer!
        Hallo,

        bei den Websites Nr. 1 und 3 sind mir rechtliche Probleme aufgefallen - Hinweise an die Mailadressen der Betreiber verschickt.

        Allerdings bin ich kein Jurist und habe deshalb auch nicht alle möglichen rechtlichen Fehlerquellen überprüft.

        Optisch sind...
        Gestern, 18:55
      • TheBablegum
        Antwort auf Meine Webseite, eure Meinung!
        Danke für ihre Meinung, ich werde versuchen dies umzusetzen.
        Natürlich ist mir klar das man Geld investieren muss, dass geht allerdings erst wenn man genug Geld hat
        Gestern, 16:11
      • arnego2
        Antwort auf Meine Webseite, eure Meinung!
        Webseiten die noch nicht fertig sind ins Netz zu stellen ohne ihre Indexierung zu verhindern ist grob Fahrlässig, die Suchmaschinen sehen das nicht gern den es gibt Mittel und Wege die Bots am Indexieren zu hindern.

        Na ja eventuell sind diejenigen die Geldnebenbei verdienen wollen weniger...
        Gestern, 14:21
      • hubix
        Antwort auf Hallo, ein Neuer!
        Wow, krass, wie die Zeit vergeht!

        Von den Foren habe ich keines mehr. Aber dafür sind hier und da neue Homepages und auch 2 Online-Shops dazu gekommen...

        Für unseren Taekwondo-Verein:
        Kampfsport Neustadt

        Im Aufbau ein Blog über die grieschiche Urlaubsinsel...
        Gestern, 09:00
      • arnego2
        Antwort auf hreflang Tags
        2 Domains eins für Französisch eins für Deutsch.
        Bei den Franzosen bin ich recht sicher das ihnen eine voll Französische Seite mehr gefallen würde als eine mit Deutschen geteilte. Das meinte ich mit dem Eigensinn der Menschen.

        Eine Webseite muss dem User gefallen, ihm was abzunehmen,...
        24.03.2019, 16:13

      Kostenlose Homepage bei Jimdo!

      Einklappen

      Jimdo

      Die neuesten Beiträge

      Einklappen

      • daniel5959
        Antwort auf Hallo, ein Neuer!
        Hallo,

        bei den Websites Nr. 1 und 3 sind mir rechtliche Probleme aufgefallen - Hinweise an die Mailadressen der Betreiber verschickt.

        Allerdings bin ich kein Jurist und habe deshalb auch nicht alle möglichen rechtlichen Fehlerquellen überprüft.

        Optisch sind...
        Gestern, 18:55
      • TheBablegum
        Meine Webseite, eure Meinung!
        Mooin,
        ich betreibe nun seit geraumer Zeit meine eigene Webseite zum Thema Paidmailer und Werbemöglichkeiten.
        Da ich noch relativ weit am Anfang stehe und das meine erste Webseite ist, suche ich auch immer wieder Meinungen und Verbesserungsvorschläge.
        Sei es jetzt zum Layout, der...
        24.03.2019, 15:30
      • TheBablegum
        Antwort auf Meine Webseite, eure Meinung!
        Danke für ihre Meinung, ich werde versuchen dies umzusetzen.
        Natürlich ist mir klar das man Geld investieren muss, dass geht allerdings erst wenn man genug Geld hat
        Gestern, 16:11
      • arnego2
        Antwort auf Meine Webseite, eure Meinung!
        Webseiten die noch nicht fertig sind ins Netz zu stellen ohne ihre Indexierung zu verhindern ist grob Fahrlässig, die Suchmaschinen sehen das nicht gern den es gibt Mittel und Wege die Bots am Indexieren zu hindern.

        Na ja eventuell sind diejenigen die Geldnebenbei verdienen wollen weniger...
        Gestern, 14:21
      • hubix
        Antwort auf Hallo, ein Neuer!
        Wow, krass, wie die Zeit vergeht!

        Von den Foren habe ich keines mehr. Aber dafür sind hier und da neue Homepages und auch 2 Online-Shops dazu gekommen...

        Für unseren Taekwondo-Verein:
        Kampfsport Neustadt

        Im Aufbau ein Blog über die grieschiche Urlaubsinsel...
        Gestern, 09:00
      • Atlan
        hreflang Tags
        Hallo,
        habe immer noch ein Problem mit den hreflang Tags

        unsere Seite: https://www.*****.com, besteht aus dem Deutschen Teil unter *****.com und dem französischen Teil unter *****.com/fr/.
        -----------
        <!DOCTYPE html>
        <html lang="de">
        ...
        23.03.2019, 16:41
      • arnego2
        Antwort auf hreflang Tags
        2 Domains eins für Französisch eins für Deutsch.
        Bei den Franzosen bin ich recht sicher das ihnen eine voll Französische Seite mehr gefallen würde als eine mit Deutschen geteilte. Das meinte ich mit dem Eigensinn der Menschen.

        Eine Webseite muss dem User gefallen, ihm was abzunehmen,...
        24.03.2019, 16:13
      • Fragman
        Ausgabe als Link
        Hallo...

        habe eine Datenbank mit Songtexten mit Ausgabe auf einer Webseite. Es gibt eine Vorauswahl der Titel nach Buchstaben.
        Angezeigt wird dann eine Liste der Titel und des Interpreten.
        Wie mache ich aus der Ausgabe der Titel einen Link der dann den entsprechenden Text anzeigt??...
        21.03.2019, 21:05
      • Sempervivum
        Antwort auf Ausgabe als Link
        Danke für den Hinweis, PHP und Datenbanken sind weniger meine Stärke. Wenn man eine ID verwendet, wird das Ganze dann wesentlich einfacher.
        24.03.2019, 14:22
      • Rudolfo
        Antwort auf Online Speicherplatz / Storage / Cloud gesucht!
        Also ich bin auch ein überzeugter Cloud-Nutzer. Deswegen würde ich dir die Ratgeber von G Data empfehlen. Dieser zeigt alle Angebote, wichtige Information und erklärt auch ein paar Hintergründe. Ich bin selber auch durch den Ratgeber auf die Option der Cloud aufmerksam geworden und er hat mich überzeugt....
        ☁ Fotos, Videos, Dokumente: Einfach in die Cloud laden und teilen.☀ Wir zeigen Ihnen, wie sie funktioniert und wie im Cloud-Speicher alles sicher bleibt! ☁
        24.03.2019, 14:20
      Lädt...
      X