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.413   Beiträge: 428.240   Mitglieder: 27.798   Aktive Mitglieder: 69
      Willkommen an unser neuestes Mitglied, planaigeist.

      Online-Benutzer

      Einklappen

      194 Benutzer sind jetzt online. Registrierte Benutzer: 3, Gäste: 191.

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

      Die neuesten Themen

      Einklappen

      • arnego2
        Antwort auf Suche Filehoster
        mega und hidive Mega (nz) komplett umsonst bis 5gb glaub ich....
        Heute, 13:42
      • andi656
        Suche Filehoster
        hallo,

        welche Anbieter gibt es momentan die günstig oder sogar kostenlos ihren Dienst anbieten?
        Ich bin da noch etwas ratlos, da ich sowas noch nie genutzt habe und bin daher über jeden Ratschlag dankbar....
        Heute, 10:34
      • Sempervivum
        Antwort auf Zusätzliche fusszeile
        Wenn Du also beide Boxen, #footer und #bereich, untereinander anzeigen willst, brauchst Du sie ja nur nacheinander in deine HTML-Seite einzufügen. Durch
        Code:
        display: flex;
        flex-direction: column;
        werden sie dann untereinander angeordnet. Woran scheiterst Du dabei denn?
        BTW: float_center...
        Gestern, 22:08
      • föni
        Antwort auf Zusätzliche fusszeile
        Um die Codes auseinander zu halten, hab ich diese einfach anders benannt.

        den...
        HTML-Code:
        #footer {
            width: 95%;
        ...hab ich ja bereits mit eingepackt. Es erschein aber nicht mal einen Rahmen oder sonst was... als wäre der Code nicht da...

        Weiss da auch nicht mehr w...
        Gestern, 21:01
      • Sempervivum
        Antwort auf Zusätzliche fusszeile
        Wenn Du den Footer über (fast) die ganze Breite haben willst, sieht dies doch vernünftig aus:
        Code:
        #footer {  
         width: 95%;
        Ich bin nur ein wenig verwirrt, weil Du zunächst vom Footer schreibst und dann von #bereich? Soll diese Box zusätzlich zum Footer angezeigt werden?
        Gestern, 19:39

      Kostenlose Homepage bei Jimdo!

      Einklappen

      Jimdo

      Die neuesten Beiträge

      Einklappen

      • andi656
        Suche Filehoster
        hallo,

        welche Anbieter gibt es momentan die günstig oder sogar kostenlos ihren Dienst anbieten?
        Ich bin da noch etwas ratlos, da ich sowas noch nie genutzt habe und bin daher über jeden Ratschlag dankbar....
        Heute, 10:34
      • arnego2
        Antwort auf Suche Filehoster
        mega und hidive Mega (nz) komplett umsonst bis 5gb glaub ich....
        Heute, 13:42
      • föni
        Zusätzliche fusszeile
        Hallo Leute

        Ich hab eine html Seite am laufen mit folgendem Code:

        HTML-Code:
         <!DOCTYPE HTML>
        <html lang="de">
        <head>
            <link rel="icon" href="bim/favicon.ico" type="image/x-icon" />
        <title>x.ch</title>
        ...
        17.05.2019, 22:00
      • Sempervivum
        Antwort auf Zusätzliche fusszeile
        Wenn Du also beide Boxen, #footer und #bereich, untereinander anzeigen willst, brauchst Du sie ja nur nacheinander in deine HTML-Seite einzufügen. Durch
        Code:
        display: flex;
        flex-direction: column;
        werden sie dann untereinander angeordnet. Woran scheiterst Du dabei denn?
        BTW: float_center...
        Gestern, 22:08
      • föni
        Antwort auf Zusätzliche fusszeile
        Um die Codes auseinander zu halten, hab ich diese einfach anders benannt.

        den...
        HTML-Code:
        #footer {
            width: 95%;
        ...hab ich ja bereits mit eingepackt. Es erschein aber nicht mal einen Rahmen oder sonst was... als wäre der Code nicht da...

        Weiss da auch nicht mehr w...
        Gestern, 21:01
      • Sempervivum
        Antwort auf Zusätzliche fusszeile
        Wenn Du den Footer über (fast) die ganze Breite haben willst, sieht dies doch vernünftig aus:
        Code:
        #footer {  
         width: 95%;
        Ich bin nur ein wenig verwirrt, weil Du zunächst vom Footer schreibst und dann von #bereich? Soll diese Box zusätzlich zum Footer angezeigt werden?
        Gestern, 19:39
      • föni
        Antwort auf Zusätzliche fusszeile
        Vielen Dank für Deine hilfreiche Antwort.

        Ich hab nun den Code wie folgt ergänzt und möchte eigentlich unten gerne auch die selbe box quer (ca. 95% breit) über die Seite haben. (wie im Bild oben)

        HTML-Code:
        #footer {
        width: 95%;
        min-height: 560px;
        margin: 0 auto;
        ...
        Gestern, 19:07
      • Sempervivum
        Antwort auf Zusätzliche fusszeile
        Dann versuche es mit...
        Gestern, 07:27
      • föni
        Antwort auf Zusätzliche fusszeile
        Die Fusszeile sollte normal in die Seite eingebaut werden und nicht immer fix zu sehen sein....
        Gestern, 07:13
      • Sempervivum
        Antwort auf Zusätzliche fusszeile
        Soll die Fußzeile denn ganz normal in die Seite eingebettet sein oder soll sie beim Scrollen fixiert sein? In jedem Fall ist float:left der falsche Weg. Wenn ersteres zutrifft, ist es wahrscheinlich schon ausreichend, wenn Du es weglässt und beim body flex-direction:column und align-items:center hinzu...
        Gestern, 06:27
      Lädt...
      X