HTML

Du startest auf Opencaching.de durch, aber hast noch Fragen zum "WIE"?
Hier helfen Dir erfahrene User und OC Vereinsmitglieder weiter. Rund um das Anlegen, Veröffentlichen oder auch Suchen von Geocaches.

Moderator: mic@

Antworten
Rabarba
Beiträge: 1
Registriert: 16.04.2019, 14:54

Vielleicht kann mir jemand in Sachen HTML weiterhelfen, alleine komme ich auch mit den vielen Online-Anleitungen nicht weiter.
Bei OC gibt es den praktischen Editor zum Einfügen von Bildern, bei GC z. B. nicht. Da benutze ich immer dieselbe HTML-Zeichenfolge zum Einfügen eines Bildes, dessen Adresse ("https...") ich jeweils einfüge.
Beispiel: <p><img src="https://s3.amazonaws.com/gs-geo-images/ ... 0dfdfc.jpg" /><br /></p>

Eine entsprechende HTML-Zeichenfolge, um zwei oder mehr Bilder nebeneinander auf einer Höhe einfügen zu können, fehlt mir und kann ich auch nicht alleine zusammenstellen.
Ist das jemand bekannt, kann mir jemand helfen?

Vielen Dank
Rabarba
Benutzeravatar
mic@
Vereinsmitglied
Vereinsmitglied
Beiträge: 6623
Registriert: 04.12.2009, 00:31

[quote="Rabarba"]Eine entsprechende HTML-Zeichenfolge, um zwei oder mehr Bilder nebeneinander auf einer Höhe einfügen zu können, fehlt mir und kann ich auch nicht alleine zusammenstellen.
Ist das jemand bekannt, kann mir jemand helfen?[/quote]

Das <br/> sorgt ja für eine neue Zeile. Wenn Du das wegläßt, so wird das Bild NICHT darunter dargestellt.
HTH, Mic@
Benutzeravatar
Jiver78
Nano
Nano
Beiträge: 88
Registriert: 26.09.2016, 10:26

[quote="mic@"]
Das <br/> sorgt ja für eine neue Zeile. Wenn Du das wegläßt, so wird das Bild NICHT darunter dargestellt.
HTH, Mic@
[/quote]

Jein. <br> erzwingt einen Zweilenumbruch. Es wegzulassen bedeutet, dass alle Bilder hintereinander in einer Zeile gesetzt werden. Ist die Seite nicht breit genug, erfolgt ein automatischer Zeilenumbruch.

Bilder gezwungenermaßen in einer Zeile zu bringen dürfte mWn nur mit einer Tabelle gehen:
<table>
<tr>
<td> <img 1> </td>
<td> <img 2> </td>
...
</tr>
</table>
Benutzeravatar
fraggle_DE
Vereinsmitglied
Vereinsmitglied
Beiträge: 106
Registriert: 01.10.2018, 17:58

Hallo Rabarba,

zum Ausprobieren nutze ich immer gerne einen Online HTML-Editor, bei dem man das Ergebnis sofort anschauen kann und Quellcode sowie Ergebnis nebeneinander sieht. Zum Beispiel diesen hier (w3schools Onlineeditor).
Um mehrere Bilder nebeneinander zu bekommen, müssen auf jeden Fall die <br/> und auch die beiden <p>-Tags weg. Beide verursachen (ganz salopp gesagt) einen Zeilenumbruch. Ohne sieht es zum Beispiel so aus:

Code: Alles auswählen

<img src="https://..Bild1.jpg" />
<img src="https://..Bild2.jpg" />
Wenn deine Bilder nicht breiter sind, als die Webseite, dann werden sie im Normalfall automatisch nebeneinander angeordnet. Sollten sie zu breit sein, kannst du sie in der Breite beschränken:

Code: Alles auswählen

<img src="https://..Bild1.jpg" style="width:300px""/>
<img src="https://..Bild2.jpg" style="width:250px"/>
Statt 'px' (Pixel) gehen auch relative Breiten in %. Nähere Infos siehe hier (SelfHTML Wiki).

Falls du nicht weiterkommst, zeige am besten hier ein Beispiel und wie es am Ende aussehen soll. Wir kriegen das schon hin.  ;)
BudSidewinder
Nano
Nano
Beiträge: 23
Registriert: 19.01.2019, 19:15

Oh, ein HTML Lehrgang. Da werde ich mich doch auch gelegentlich einklinken.

Also kann ich im Nachhinein noch die Größe des Bildes verändern???

<center>
<p><img src="https://spynetwork.de/data/_uploaded/ex ... 9-tftc.jpg" alt="GC85CG9" width="600" height="300" /></p>
</center>

Das ist mir nämlich ein wenig zu groß...

Gesendet von meinem WAS-LX1A mit Tapatalk
Benutzeravatar
fraggle_DE
Vereinsmitglied
Vereinsmitglied
Beiträge: 106
Registriert: 01.10.2018, 17:58

[quote="BudSidewinder"]
Also kann ich im Nachhinein noch die Größe des Bildes verändern???[/quote]

Ja, das ist kein Problem. In deinem Beispiel ändere einfach die Angaben hinter "width" und/oder "height". Wenn du das originale Seitenverhältnis des Bildes beibehalten willst, genügt auch eine der beiden Angaben.

p.s. Damit das nicht falsch verstanden wird: die obigen Angaben im HTML verändern nicht das Bild an sich und auch nicht den benötigten Speicherplatz, sondern nur die Anzeigegröße im Browser.
BudSidewinder
Nano
Nano
Beiträge: 23
Registriert: 19.01.2019, 19:15

[quote="fraggle_DE"]
[quote="BudSidewinder"]
Also kann ich im Nachhinein noch die Größe des Bildes verändern???[/quote]

Ja, das ist kein Problem. In deinem Beispiel ändere einfach die Angaben hinter "width" und/oder "height". Wenn du das originale Seitenverhältnis des Bildes beibehalten willst, genügt auch eine der beiden Angaben.

p.s. Damit das nicht falsch verstanden wird: die obigen Angaben im HTML verändern nicht das Bild an sich und auch nicht den benötigten Speicherplatz, sondern nur die Anzeigegröße im Browser.
[/quote]Ahh, okay. Danke.
Was wäre dann sinnvoll? Soll ich die Werte für Höhe und Breite einfach halbieren?

Gesendet von meinem WAS-LX1A mit Tapatalk
Benutzeravatar
fraggle_DE
Vereinsmitglied
Vereinsmitglied
Beiträge: 106
Registriert: 01.10.2018, 17:58

[quote="BudSidewinder"]Was wäre dann sinnvoll? Soll ich die Werte für Höhe und Breite einfach halbieren?[/quote]

Das hängt davon ab, was du damit machen möchtest. (Sofern es um GC85CG9 geht, kann ich nicht draufschauen, da es noch nicht veröffentlicht wurde.) Spiel ein wenig mit den Werten herum und schau, was mit dem Bild/Listing passiert. Kaputt machen kannst du damit nix.

Als Bannerbild zum Beispiel wäre es mir allerdings vornherein schon zu groß, da würde ich die Größe mit einem Bildbearbeitungsprogramm verkleinern und neu hochladen. Ich halte es auch bei Bildern im Listing so, dass sie eine passende Größe haben oder nur geringfügig größer sind. Die Nutzer mit Smartphone und begrenztem Datenvolumen werden es hoffentlich danken. :-}
Antworten