# Grober Aufbau einer HTML Seite



## alex r3 (25. November 2009)

Kann mir jemand mal so einen kleinen Quelltext aufschreiben?

Hatte mir das so in etwa vorgestellt:

http://i48.tinypic.com/2505k5j.jpg

Soll ein Shop werden, für die Schule. :]


----------



## midnight (25. November 2009)

Äh ja und dann? Das Gerüst kannste dir so runterladen, das braucht dir niemand erstellen. Nur einen Shop hast du davon noch lange nicht. Wenn du schon kein HTML kannst, wie willst du den dann realisieren?

so far


----------



## alex r3 (25. November 2009)

midnight schrieb:


> Äh ja und dann? Das Gerüst kannste dir so runterladen, das braucht dir niemand erstellen. Nur einen Shop hast du davon noch lange nicht. Wenn du schon kein HTML kannst, wie willst du den dann realisieren?
> 
> so far



Das ganze muss nicht richtig funktionieren.

Ich brauche im Grunde nur die Startseite, 2-3 Produkte, Registrations- u. Bestellformular. 

Wir bekommen das Ganze leider nicht wirklich beigebracht, sondern sollen einfach mal ein bisschen rumprobieren.

.. Wo könnte Ich mir denn so eine grobe Struktur herunterladen?

Ich hätte am liebsten einfach einen simplen Quelltext, den Ich mir durchlesen kann und das ganze dabei vll. auch ein bisschen verstehe .. 

Ansonsten könnte Ich mir ja auch einfach z.B den Quelltext von Amazon o.Ä angucken nur bringt mir halt nix, da Ich da wirklich 0 verstehe.


----------



## midnight (25. November 2009)

alex r3 schrieb:


> Ich brauche im Grunde nur die Startseite, 2-3 Produkte, Registrations- u. Bestellformular.



Und selbst dafür brauchst du Programmierkenntnisse.

Wenn du Layouts suchst: CSS Layout: A collection of 224 Grid and CSS Layouts Nur eine von vielen Seiten (=

so far


----------



## King_Sony (25. November 2009)

Ohne Php kenntnisse wirds nix mit dem bestellformular etc.
LG Sony


----------



## Aholic (25. November 2009)

Für die Seite an sich wirst du nur html/css verwenden müssen.
Wenn du eine Registrierung willst, kommt PHP dazu, denn irgendwie musst du dem Server sagen was er tun soll.

Und damit das ganze auch gespeichert bleibt und leichter zu handhaben ist, brauchst du eine Datenbank, zb Mysql.

+Shop der auch nochmal aus einem Haufen PHP files und Datenbankverbindungen besteht, wirst du wohl ein paar Wochen/ Monate brauchen, vorrausgesetzt du beherscht php und mysql 

Lad dir am besten eine Art CMS runter, dort gibt es auch für Shops etliche im Netz.



> Ansonsten könnte Ich mir ja auch einfach z.B den Quelltext von Amazon o.Ä angucken nur bringt mir halt nix, da Ich da wirklich 0 verstehe.


PHP wirst du dort zb kaum finden, da die Daten vom Browser bereits verarbeitet ausgegeben werden. Such dir am besten Codeschnipsel.

Ansonsten kann ich dir nur http://de.selfhtml.org/ ans Herz legen


----------



## Jared566 (26. November 2009)

Aholic schrieb:


> PHP wirst du dort zb kaum finden, da die Daten vom Browser bereits verarbeitet ausgegeben werden. Such dir am besten Codeschnipsel.



"kaum"? Man findet garkeinen PHP Quelltext im Browser, da php nicht wie html vom Browser interpretiert wird, sondern auf dem Apache Webserver 

Es sei denn, das Amazon dir den Quelltext verrät, was ich aber nicht glaube ^^

und ohne Grundkenntnisse in HTML / PHP wirst du dein Script (welches auch immer) nicht installiert bekommen 

Dazu brauchst du auch erstmal einen Webserver geschweige denn eine MySQL Datenbank.

um einen einstieg in HTML hinzubekommen empfehle ich dir: http://www.selfhtml.org
und um einen einstieg in PHP hinzubekommen empfehle ich dir: das

aber nur als Tipp: Selbst mit grundkenntnissen wirst du einen Shop nicht bauen können


----------



## DarkMo (26. November 2009)

hehehe, also wenn ihr das nich wirklich beigebracht bekommt und du nichmal weisst wie ne html aufgebaut usw (html head title /title /head body <inhalt> /body /html), dann kann das von deinem lehrer doch nur als grober scherz gemeint sein *g*

ich würd da einfach mich mit formularen in html beschäftigen, mal sone registrierungsseite nachbauen (also das reine statische html) und mich mit den elementen dort befassen. was gibt es (textfelder, passwortfelder, checkboxen, radiofelder... das formular an sich), wie arbeitet es (was is POST was is GET, wie übergebe ich werte und in welcher form kommen die irgendwo an...) und zu jedem nen paar beispiele dort liefern. ohne php un mysql zum bsp is da zwar kein leben drin, aber du zeigst zumindest, das du dich mit den grundlagen schonmal beschäftigt hast ^^

also mehr würde mir dazu jetz ned einfallen. und die 2 3 beispiel artikel zu präsentieren soll dich sicherlich damit beschäftigen, wie man ein layout gebastelt bekommt. problematik einer hübschen farbgebung, anordnung der einzelnen elemente durch div's zum bsp, wie kann man diese anordnung/darstellung beeinflussen/manipulieren etc. das genannte selfhtml ist hier eine wunderbare referenz.

und wenns dich dann wirklich gepackt hat: link zu php gibts ja auch schon *g* zum grundverständnis: php führt der server aus - dort wird quasi die endgültige wiederrum statische html seite (dynamisch) generiert. sprich: drück ich diesen link, wird mir dieser inhalt angezeigt, drück ich einen anderen, dann wird mir ein anderer angezeigt (geht ja auch scho mit normalem html super  aber das lässt sich eben weit verfeinern). was bei dir als client im browser erscheint is wieder nur herkömmliches statisches html - vom php siehst du da dann garnix mehr.


----------



## alex r3 (26. November 2009)

DarkMo schrieb:


> hehehe, also wenn ihr das nich wirklich beigebracht bekommt und du nichmal weisst wie ne html aufgebaut usw (html head title /title /head body <inhalt> /body /html), dann kann das von deinem lehrer doch nur als grober scherz gemeint sein *g*
> 
> ich würd da einfach mich mit formularen in html beschäftigen, mal sone registrierungsseite nachbauen (also das reine statische html) und mich mit den elementen dort befassen. was gibt es (textfelder, passwortfelder, checkboxen, radiofelder... das formular an sich), wie arbeitet es (was is POST was is GET, wie übergebe ich werte und in welcher form kommen die irgendwo an...) und zu jedem nen paar beispiele dort liefern. ohne php un mysql zum bsp is da zwar kein leben drin, aber du zeigst zumindest, das du dich mit den grundlagen schonmal beschäftigt hast ^^
> 
> ...



<html>

<title></title>

<body>

<div></div>

</body>

</html>

Die Dinge kenne Ich jetzt bereits 

Naja, wir müssen in dem Fach 5-10 minütige Vorträge über HTML halten.. daraus sollen wir dann genug Erkenntnisse sammeln um so eine Seite aufzusetzen...

Wie gesagt Ich muss keinen richtigen funktionalen Onlineshop erstellen.. was Ich brauche ist nur die Startseite (vll mit Suche und Anmeldeformular), und 2-3 Produkte die man dort ordern kann (Bestellformular) 

Was Ich halt nicht wirklich hinbekomme sind z.B die Boxen wie in meiner Skizze.

So eine Leiste zur Navigation kriege Ich gerade so mit <div> hin aber da hört es auch schon auf ..

Es wäre toll wenn mir irgendjemand einfach mal die Startseite basteln könnte .. einfach so:

http://i48.tinypic.com/2505k5j.jpg

Keine Ahnung was Ich da jetzt von euch verlangen ;s Ich hoffe einfach mal, dass es für jemanden der sich auskennt, keine große Arbeit wäre.


----------



## Aholic (26. November 2009)

Euer Lehrer muss euch wirklich hassen 
Es wird dir wenig bringen wenn ich dir eine solche Seite erstelle du aber dann nichts vortragen kannst weil du nicht weist wies funktioniert


----------



## DarkMo (26. November 2009)

hmm, da wirste erstmal nen paar mehr div's brauchen. nen div is sone art container, nen bereich der seite, in dem man irgendwas zusammenfassen kann/reinpacken kann. so kannste in diesen container auch wieder andere container packen usw usf. so richtig warm bin ich mit den teilen au noch ned, da das bissl was ich bisher weis meist ausgereicht hat ^^

nimmst also am besten nen 3er layout als ganz grobe vorlage. sprich einen "über" (root) div in den du 3 weitere packst:

```
...
<div>
    <div></div>
    <div></div>
    <div></div>
</div>
```

damit haste jetz noch nix gekonnt, das is einfach die socken in richtung schrank geworfen - mutti wird sicher noch nich zufrieden sein ^^ also müssen nochn paar formatierungen her:

```
...
<div>
    <div style="width: 100%; height: 15%;"></div>
    <div style="width: 20%; height: 85%; float: left;"></div>
    <div style="width: 80%; height: 85%; float: left; overflow: auto;"></div>
</div>
```

jetz sollte es schon ordentlicher aussehen (nich getestet ^^). mit width gibste die breite an - 100% für den "banner"-bereich - also gesamte breite, die andern beiden werden also drunter gesetzt, da sie nich mehr daneben passen. die 2 anderen teilen sich die volle breite ein, nämlich zu 20% für den "menu"-teil und die restlichen 80% für den "main"-bereich. in der höhe sind se auch noch aufeinander abgestimmt, muss aber nich sein. das float gibt die fließrichtung quasi an. die is jetz auf linksbündig, sprich der container wird an die linke seite gehängt und der nächste dann au wieder an den ersten. wäre das ganze rechtsbündig, müsste der fette hauptbereich dann glaube links sein, aber das habsch noch garnich getestet (da der menu teil ja zuerst nach rechts an den rand kommt un dann der main hinterher - kannste ja ma testen ^^). mit dem overflow gibste nur an, das der haupt-div da nen scrollbalken erzeugt, falls der inhalt zu groß wird. so bleibt dein logo/banner und das menü immer wos sein soll un man muss nich wieder hochscrollen zum navigieren.

wenn du das ganze jetz noch bissl mit farben aufbohrst um das besser zu sehn mit der aufteilung (weis neben weis unterscheidet sich so mieserabel ^^), kannste auch so noch bissl damit experimentieren. dazu musste "background-color: red;" zum bsp mit bei den style-attributen mit angeben. da zum bsp dann einma red, einma blue un einma green - is zwar augenkrebs pur, aber zur veranschaulichung durchaus brauchbar ^^ statt des farbnamens kannst du auch das ganze als hexadezimal code angeben, wenn du magst ^^ is nich ganz so handlich, aber bietet viel mehr möglichkeiten (32 mio farben statt 16? kA) statt red könntest du zum bsp eben auch #FF0000 schreiben.

joa, und dann haste das gröbste schonma. dann schauste im netz nach son paar lustigen css menüs zum bsp (eines was so von oben nach unten geht und eines was von links nach rechts eiert) und baust dir die eben im banner/logo div bzw im menü/navi div ein. und da du den main bereich noch aufgeteilt haben wölltest, kannst du entweder die inhalte einfach untereinander klatschen, oder da nochmal 2 divs reinquetschen. das es dann ungefähr so aussähe:

```
...
<div>
    <div style="width: 100%; height: 15%; background-color: red;">logo/banner + horizontales menü</div>
    <div style="width: 20%; height: 85%; float: left; background-color: green;">normales navigations menü</div>
    <div style="width: 80%; height: 85%; float: left;">
        <div style="width: 100%; height: 50%; float: left; background-color: #FF8800; overflow: auto;">hauptbereich oben - neuheiten</div>
        <div style="width: 100%; height: 50%; float: left; background-color: blue; overflow: auto;">hauptbereich unten - topseller</div>
    </div>
</div>
```

mit den 100% breite hier musste mal schauen. ich weis grad leider nich so genau, ob die sich auf das ganze fenster oder nur den übergeordneten div beziehen. aber da kannste ja selfhtml zum bsp mal bissl quälen oder einfach rumprobieren.

naja, versuch erstma damit dein glück


----------



## Snade (26. November 2009)

Ja hier mal ein beispiel wie du mail verschickst aber anhand dieses beispiels kann dir jemand auch ne mail schicken z.B. ne Bestellmail musst halt die sachen nur erweitren um ein paar Textboxen und die Variablen umändern.

HTML Datei:

```
<form action="e-mail.php" method="post">
<body bgcolor="green">
<FONT COLOR="black">

<label>E-mail<input type="text" name="email" /></label>

<input type="submit" />
```
und hier die PHP Datei die e-mail.php heißen muss:

```
<?php
$empfaenger = $_POST['email']; //Mailadresse
$absender   = $empfaenger;
$betreff    = "HALLO";
$mailtext   = "Hallo";
$antwortan  = $empfaenger;

$i = 1;

mail( $empfaenger,
      $betreff,
      $mailtext,
      "From: $absender\nReply-To: $antwortan");

echo "Mail wurde gesendet!";   

?>
```
So für ihrgendwelche Spammer würde ich noch nen simplen IP Ban einbauen:

```
<form action="ban_script.php" method="post">
<body bgcolor="green">
<FONT COLOR="black">
 
<label>IP <input type="text" name="ip_info" /></label>
 
 
<input type="submit" />
```
diese Datei muss ban_script.php heißen:

```
<?php
    $ip = $_POST['ip_info']; 
    $datei = fopen("ip_ban.txt","a");
    fwrite($datei, $ip. "\n"); 
    fclose($datei); 
    echo "BANNED ".$ip. " !!!"; 
?>
```
Und um die IP zu kriegen/protikulieren und zu bannen einfach das in die index.php oder index.html oder sonstige Startdatei eben.


```
$datei = fopen("ip_log.txt","a");
fwrite($datei, $today = date("d.m.y H:i:s")." - ");
fwrite($datei, $_SERVER['REMOTE_ADDR']." - ");
fwrite($datei, gethostbyaddr($_SERVER["REMOTE_ADDR"])."\n");
fclose($datei);

$bannedips1 = file("ip_ban.txt");
if(in_array($_SERVER['REMOTE_ADDR'],$bannedips1)) die("Banned!");
```


----------



## zcei (26. November 2009)

Lol überforder ihn doch net gleich 
Ich denke mal, dass das so laufen soll wie bei mir in Info auch 
Du codest die seiten aber funktionell müssen die nicht sein. Heißt Anmeldescript ohne dass sich wirklich einer einloggen kann, Suche ohne Funktion und nur 3 Komponenten die man so anklicken kann aber nichts dynamisch ist.
Ist das richtig!?

Wenn du willst kannste mich bei ICQ/MSN adden (PN)
Dann kann ich dir nen bissl helfen.

MfG zcei

P.S.: nice Lehrer


----------



## Snade (26. November 2009)

ist doch langweilig


----------



## zcei (26. November 2009)

Wie ich sehe auch ein Berliner 
Jaaa langweilig wärs, aber nicht so "überfordernd"
Ich hab deinen Source schon verstanden 

MfG zcei


----------



## DarkMo (27. November 2009)

zcei schrieb:


> Du codest die seiten aber funktionell müssen die nicht sein. Heißt Anmeldescript ohne dass sich wirklich einer einloggen kann, Suche ohne Funktion und nur 3 Komponenten die man so anklicken kann aber nichts dynamisch ist.


genau das denk ich mir auch. die kerls sollen sich sicher erstmal bissel mit den html elementen beschäftigen - php is da quasi die atombombe auf ne kakerlake (die das warscheinlich sogar noch überlebt ).


----------



## JayKey (27. November 2009)

fürs erlernen kann ich erstmal das gute alte SELFHTML empfehlen und dort kann man sich einiges erlesen

hier findest du schonmal was zu divs und wie sie funktionieren http://de.selfhtml.org/html/text/bereiche.htm


----------



## alex r3 (27. November 2009)

Danke Leute, genau sowas hatte Ich gesucht 

Werde da jetzt mal bisschen was probieren. ;D

Und zcei vll komme Ich auf dein Angebot nochmal zurück :] 

Habe leider grade kein Internet an meinem PC und kann hier leider kein msn/icq installieren. 

Tausend Dank !


----------



## King_Sony (27. November 2009)

Noch eine tipp von meiner seite:
du schaust dir html css ein bisschen an, dass du auch weist wovon du redest machst aber deine Seite mit Joomla CMS Downloads - Templates und Erweiterungen - Joomla 1.5.15 Stable Core Deutsch
Dafür gibt es viele designs(kostenlos) und viele foren die sich auf joomla spezialiesiert haben. Weil für ein referat mal eben schnell php lernen is nicht.
LG Sony


----------

