Website möglichste mit HTML programmieren, doch wir haben ein paar Probleme...

[Gast12345]

Hallo zusammen!

Ich bin neu hier im Forum, und hoffe mal, dass ich das Thema am richtigen Ort unterbringe!

Mein Problem: Ich und ein Freund möchten gerne eine Datenbank erstellen, auf welcher wir auf einfachen Wegen unsere Bilder (aus der Luftfahrt) hochladen können. Dabei haben wir aber einige Probleme, da wir uns auch nicht extrem gut mit Programmierung auskennen. Daher wären wir froh, möglichst einfache Tipps zu erhalten. :)
Unser erstes Problem ist es, einen Code zu erstellen, welcher zufällig drei Bilder innerhalb einer Tabellenzelle anordnet und wo möglich noch skalliert. So zum Beispiel wie dies auf den Gallerie-Seiten von http[://]www[dot]airplane-pictures[dot]net funktioniert! Wir wären sehr sehr dankbar, wenn uns jemand mit seinem Wissen bei unserem Projekt unterstützen könnte! Sollten noch Fragen auftauchen, weil ich etwas vergessen habe zu erwähnen, bitte einfach nachhaken. :p

Danke viel mal im Voraus!

Mike

[Mod-Edit: URL entlinkt]

 

[Pascal - Schefer IT]

Hallo Mike

Ich weiss zwar nicht ob dieses Thema für Dich noch aktuell ist, doch gerne versuche ich Dir ein paar Tips zu geben.

Mein Problem: Ich und ein Freund möchten gerne eine Datenbank erstellen, auf welcher wir auf einfachen Wegen unsere Bilder (aus der Luftfahrt) hochladen können. Dabei haben wir aber einige Probleme, da wir uns auch nicht extrem gut mit Programmierung auskennen. Daher wären wir froh, möglichst einfache Tipps zu erhalten. :)

Ich verstehe Eure Idee. Du schreibst jedoch im Titel "möglichst in HTML" und zu gleich "möchten gerne eine Datenbank erstellen". Wenn Du HTML und Datenbank googlest kommst Du ziemlich schnell auf eine Zauberwort mit Namen MySQL welches in Verbindung mit PHP genutzt wird.


Kurz und knapp erklärt bedeutet dies folgendes:

HTML ist eine statische Programmiersprache die keine Platzhalter kennt. In Deinem Fall benötigst Du jedoch solche Platzhalter (in Deinem Fall Bildcontainer welche das jeweilige Bild enthalten das von der Datenbank ausgelesen wird). Nehmen wir also an Du zeichnest Deine Webseite als Skizze, dann steht darauf wohl irgendwo "Bild 1", "Bild 2", usw. Diese Platzhalter dienen nur zur Positionierung auf der Seite und werden dann später mit dem richtigen Bild ausgewechselt. Genau das selbe ist mittels PHP möglich. Dort kannst Du eine sogenannte Variable für die Bilder definieren (z.Bsp. <img src="<?php echo $bildpfad1 ?>" alt="<?php echo $bildbeschreibung1 ?>">) Zuvor musst Du jedoch diese Informationen aus Deiner MySQL-Datenbank auslesen damit diese Variablen auch den korrekten Wert enthalten, und genau da kannst Du dann eine zufällige Auswahl dieser Datensätze definieren.

Ich möchte Dir nichts vormachen, ganz so einfach wie Du es Dir vorgestellt hast wird es nicht werden. Wenn Du allerdings schon fortgeschrittene Erfahrungen mit HTML hast und genügend Zeit und Bock hast noch mehr dazu zu lernen, dann solltest Du Dich unbedingt den Themen PHP und MySQL widmen. Vor allem PHP hat auch bei einfacheren Programmierungen unglaublich viele Vorteile.

Unser erstes Problem ist es, einen Code zu erstellen, welcher zufällig drei Bilder innerhalb einer Tabellenzelle anordnet und wo möglich noch skalliert. So zum Beispiel wie dies auf den Gallerie-Seiten von http[://]www[dot]airplane-pictures[dot]net funktioniert!

Verzeih mir wenn ich etwas schmunzle, aber wen das erste Problem bei einer Webseite der Code ist, dann ist das Hauptproblem wohl eher die gesamte Webseite

Das mit dem skalieren der Webseite funktioniert dann relativ einfach mittels CSS. Dort kann man einzelne Elemente der Webseite formatieren. Wenn die Tabelle also eine fixe grösse hat und das Elternelement des beinhalteten Bildes darstellt, kannst Du die automatische anpassung wie folgt definieren:

table img {
max-width: 100%;
height: auto;
}

Ich hoffe das hat etwas geholfen und Ihr habt die nötigen Stichworte um einen Schritt weiter zu kommen.

Beste Grüsse
Pascal

[Mod-Edit: URL im Zitat entlinkt]

 

[Gast12345]

Hallo Pascal

Vielen Dank für deine Antwort!

In der Zwischenzeit sind wir etwas schlauer geworden. Die SQL Verknüpfungen funktionieren. Man könnte sagen, das mechanische an der Website geht, jetzt müsste sie nurnoch etwas ästethischer werden!
Hauptsächlich programmiert mein Kollege (er hat eine kleine Grundbildung und versteht die Dinge relativ schnell), doch er kommt mit html nicht soweit zurecht, dass wir es schaffen, das Design so zu "basteln" wie wir es gerne haben möchten. Uns hat sich auch schon die Frage gestellt, ob dies überhaupt mit html machbar ist... Wie Ihr seht, sind wir ziemlich unbeholfen :D
Es geht um 1. eine Home seite (anbei ein Foto wie es aussehen könnte) und zweitens eine BIldergalerie, wozu ich einen Link hier hin gepackt habe: http[://]www[dot]airplane-pictures[dot]net/last-24-hours.php
Wie schafft man es, dass die Website die Bilder selber so anordnet, dass sie in ein viereckiges Feld passen, obwohl es verschiedene Grössen beinhaltet? Könnte uns jemand mit Hilfe eines Beispielcodes die ganze Sache für "Dummies" erklären? Wir sind euch allen sehr sehr dankbar!
Mit den anderen Problemen melden wir uns dann wieder. :)

Gruss

Mike

[Mod-Edit: URL entlinkt]

 

[Pagnol]

Wie schafft man es, dass die Website die Bilder selber so anordnet, dass sie in ein viereckiges Feld passen, obwohl es verschiedene Grössen beinhaltet?

Man kann im Image-Tag <img> Höhe und Breite eines Bildes festlegen. Das Bild wird dann auf diese Masse skaliert. Das sieht aber nicht immer gut aus. Besser ist es, die Bilder gleich in den passenden Abmessungen bereitzustellen.
Beispiel (mit minimalen Attributen, gibt ja noch mehr); Höhe und Breite in Pixeln:

<img src="Pfad/Bild.jpg" width="400" height="200">

 

[Pascal - Schefer IT]

Sorry für die späte Antwort!

Bilder formschön in ein bestimmtes Format zu verfrachten ist in der Tat mit reinem HTML nicht möglich. Aber wenn Du eine CSS-Datei dazu verwendest, was ohnehin notwendig sein wird bei diesem Design, gehts.

Ist auch keine grosse Hexerei. Kurz zusammengefasst.

1. Erstelle einen Ordner mit dem Namen "CSS" im Hauptverzeichnis der Webseite.
2. Erstelle im gerade angelegten Ordner "CSS" eine Datei mit Namen "style.css".
3. Füge Deiner HTML-Datei im Kopfbereich vor dem Ende (</head>) die folgende Zeile ein:
<link rel="stylesheet" href="css/style.css">
4. Schreibe in der "style.css" Datei folgenden Code exakt so hinein:
.bild {
width: 100px;
height: 100px;
background-size: cover;
background-position: center center;
}
5. Schreibe in der HTML-Datei folgenden Code anstelle des <img>:
<div class="bild" style="background-image:url('img/testbild.jpg');"></div>
6. Öffne die HTML-Datei im Browser, siehe und staune!


ERKLÄRUNG
Ein sogenanntes Cascade Style Sheet ist dafür da verschiedene Objekte im HTML-Code mittels Classes und IDs zu formatieren. In unserem Fall haben wir im HTML-Code zuerst einmal festgelegt wo diese Datei zu finden und laden ist. Danach haben wir in der CSS-Datei eine Class mit dem Namen "bild" erstellt. WICHTIG: Classes starten im CSS immer mit einem Punkt (.) und ID's mit einem Nummernzeichen (#)! In der Class "bild" haben wir dann gesagt, das besagte Element (in unserem Fall ein Div) soll 100px breit und hoch sein. Zudem soll es den Hintergrund proportional in das Element einfügen ([background-size: cover]: das Bild wird automatisch entweder rechts und links beschnitten oder oben und unten, je nach Format) und es soll das Bild horizontal und vertikal zentrieren ([background-position: center center;]).

Eine CSS-Class oder ID muss zudem immer in sogenannte Brackets ({}) gesetzt werden und am Ende eines jeden Befehls muss ein semikolon (;) stehen.

Mehr Infos zu CSS und seinen Möglichkeiten findest Du hier:
http://code.makery.ch/library/html-css/de/

Ich hoffe das hilft Dir!

Gruss
Pascal