Wie in einer HTML Website Text neben ein Bild machen?

Hi, ich programmiere gerade für eine Präsentation in der Schule eine Mini Website. Ich mach mal ein Bild vom Code des Bildes und von der ausgeführten Seite.

Ich will, dass das Bild rechts ist und links der Text, ohne das genau neben dem Bild Platz ist.

Bild zum Beitrag

3 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

Prowect

25.02.2023, 10:05

Hallo,

es gibt verschiedene Ansätze wie du das bewerkstelligen kannst.

Du kannst entweder das Bild über CSS (float: right) rechts positionieren
Du kannst via HTML eine Tabelle machen, bestehend aus 2 Spalten und links den Text und rechts das Bild einfügen
Du kannst via CSS ein Grid machen bestehend aus 2 Spalten und links den Text und rechts das Bild einfügen

Woher ich das weiß:Berufserfahrung – Fullstack Webdeveloper/in

NackterGerd

25.02.2023, 10:16

Am besten machst du das mit Grid

https://www.w3schools.com/css/css_grid.asp

Einfache und logische Anordnung und größter Vorteil für Responsable Design (Anpassung an Mobil) dass man dann einfach alles untereinander anordnen kann mit einer einfachen Styleanpassung für kleine Display Auflösung

Woher ich das weiß:Berufserfahrung

MagisterSamael

25.02.2023, 12:26

Flexbox ist simpler und besser.

Grid ist in der Hinsicht kein guter Ansatz (mehr) und völlig überholt.

NackterGerd

25.02.2023, 13:13

@MagisterSamael

Unsinn mit Grid hat man das genaue aussehen besser im Griff

Grid ist ganz simple

Auch Fehlersuche ist einfacher da das Grid auch im Developer Mode des Browsers einfach und klar angezeigt wird.

Flex ist da lange noch nicht so weit uns erfordert mehr Zeit bei Fehlersuche

Und überholt ist da ganz und gar nichts

LeBonyt

25.02.2023, 10:06

Du musst schon deinen Quelltext per copy und paste hier einstellen.

Ich kenne nicht die präzisen Vorgaben. Daher nur ein Ansatz. Du kannst das oldschoolmässig mit einer Tabelle machen. Oder eleganter ist es, die beiden Blöcke also Text und Bild in div Layers zu packen und dann entsprechend den Vorgaben zu floaten.

Woher ich das weiß:Berufserfahrung – Web Developer bei einem mittelständischen Portalbetreiber

Ähnliche Fragen

Besucherzähler in Website einbauen?

Wie macht man das am besten über HTML, da ich nur HTML Codes in IONOS einfügen kann? Und funktioniert dies überhaupt?

Grüße

...zur Frage

Bild als Hintergrund Bild in Website einbinden (HTML , CSS )?

Hallo,

Ich Programmiere gerade eine Website in Visual Studio Code und will hinter den Buttons(siehe Bild 2) ein Bild als Hintergrund haben. Nun habe ich das ganze so programmiert (siehe Bild 1) und auch das Bild in die Website Datei eingefügt und alles gemacht. Dennoch sieht das ganze wenn man den liveserver öffnet, so (siehe Bild 2 ) aus und es ist anstatt dem Foto nur das Foto jpg Symbol klein zu sehen . Wie kann ich das ändern so das ich das Bild sehen?

Vielen Dank

...zur Frage

Erstellte website nicht aufrufbar?

Bin Anfänger im Thema Webseiten und programmieren und habe mir mal ein Tutorial angeschaut. In dem wurde mir erzählt, dass ich mit dem Editor und HTML eine Website erstellen kann. Wenn ich aber nach abspeichern des Editors etc. den Link, der in der Suchtleiste bei Chrome steht bei einem anderen Gerät eingebe, finde ich diese Seite nicht. Ich hatte auch nicht erwartet, dass das erstellen von einer Website auf diese Weise funktioniert, aber was fehlt mir, dass diese Seite, auch wenn es nur eine Testseite sein soll im Internet aufrufbar ist?

...zur Frage

Html und Css; Wieso wird der Text am Ende als Link dargestellt?

Hallo,

es geht um folgenden Code:

<!doctype html>
<html lang="de">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="widt=device-width, initale-scale=1">
        <meta name="description" content="Beschreibung">
        <title>Test html Grundgeruest</title>
    </head>
    <body>
    </body>
</html>

</br>
</br>
</br>

ERSTELLUNG EINES LINKS</br>
<a href="irgendwohin.html">Hier Klicken</a>
Nach "href=" steht die Datei, die aufgerufen werden soll, diese muss in Gänsefüsschen stehen.</br>
"Hier Klicken" ist der für den Benutzer sichtbare Text, der angeklickt </br>
werden soll. Achtung Attribute wie href stehen immer nur im Start-Tag, nie im End-Tag.</br>
</br>
</br>
</br>

EINFÜGEN VON BILDERN</br>
<img src="https://localhost/Schulung_Html_und_Css/Html/Vorgang_02_HTML_Grundgeruest/Bilder/test.jpeg" alt="kurzbeschreibung" width="50px" height="50px">
</br>
</br>



    <!--
    - Beachte dass das Bild im selben Ordner liegen muss oder ein eindeutiger Link erzeugt werden muss.
    Wobei darauf zu achten ist, in welche die "/" schauen.
    -->
</br>
</br>
</br>
</br>



<p> Hier kann ein Text dargestellt werden </P>
<p> Hier kann ein weiterer Text dargestellt werden </p>
    <!--
    - Hat den Vorteil dass mit einem Stylesheet alle mit <p> gekennzeichneten "Container" mit einer Eingabe oder Umstellung Formatiert werden können.
    -->



<ul>
    <li><a href="https://www.google.com/">Google</></li>
    <li><a href="https://www.youtube.com/">Youtube</></li>
    <li><a href="https://www.bing.com/">Bing</></li>
    <li><a href="https://www.y-informer.com">y-informer.com</></li>
</ul>    

</br>
</br>
</br>

<p> Dies ist die Xampp installation</p>


    <!-- so wird ein Kommentar eingefügt. Dieser ist für den Besucher der Webseite nicht lesbar.
        Innerhalb des kommentars können auch html Befehle  eingegeben werden. Diese sollen zumindest
        keine auswirkungen auf die Eingabe haben.
        
        - Fehler der mir unterlaufen ist. Beim Einfügen von Bildern, sofern dieser im selben Ordner liegt muss hinter dem
        <img src noch ein "=" Zeichen. Wenn das Bild in einem leserlichen Format ist klappt es.
        -- Sofern das Bild an einem anderen Ort liegt, klappt es aber nicht, an der Lösung wird noch gearbeitet.
        
        Beachte:
        - Dateifadsangaben im internet -> "/"
        - Dateifadsangaben im Betriebssystem -> "\"
        - Die Angabe "localhost" beinhaltet bereits die "htdocs" entsprehcend ist im weiteren nur noch der Projektordner anzugeben.
        
        Merke: bei dem eigentlichen Turtorial:
        - Die Xamp Installation und Konfiguration durchgehen
        - kurze einführung wie das funktioniert mit dem Webspace -> PC -> Server -> Webspace -> Domain und so weiter.
        
    -->

Wenn ich mir den Code im Browser ansehe wird der Teil unten:


<p> Dies ist die Xampp installation</p>

als Link dargestellt wieso ist das so?

...zur Frage

Projektideen für Programmier- Anfänger?

Hallo, ich absolviere für 4 Monate mein Praktikum im Bereich Informatik. In meiner Abteilung geht es um Websiteentwicklung und ich soll demnächst selbst eine Website programmieren (mit C#, JavaScript, HTML, Ajax und CSS).

Meine Frage ist, ob ihr so Ideen habt, was man als Anfänger (wirklich Anfänger mit 1% Grundkenntnis🥲) programmieren kann für 3 Monate ungefähr? Bin so 30 Stunden der Woche bei dem Unternehmen.

Eine weitere Frage ist, ob ihr gute Tutorials, Websites, YT- Videos, etc. zum Thema kennt? Ich soll nämlich selbst recherchieren und mir das selber beibringen.

Danke im Voraus für eure Antworten

...zur Frage

Welches Programm zum programmieren?

Hallo zusammen,
ich wollte mich mal erkundigen, welches Programm ihr zum Code schreiben verwendet.
Derzeit nutze ich nur die Spielwiesen der Programme, mit welchen ich das coden lerne. Allerdings hätte ich ganz gerne auch schon einmal ein richtigen Code-Editior, mit welchem ich dann in der Zukunft arbeiten kann.
Ich suche einen gutes Tool, zum hauptsächlichen bearbeiten von HTML, CSS & JavaScript.
Wenn das Programm zeitgleich noch die Möglichkeit bietet, Python und Java zu programmieren, wäre das umso besser.
Ich freue mich auf eure Empfehlungen und wünsche allen einen schönen Sonntag!
Mfg
Luis

...zur Frage

Text unter Bild in HTML hinzufügen?

Ich habe ein Bild. Darunter habe ich ein Text platziert. Allerdings geht der Horizontal von links nach rechts, was es auch soll. Nur soll er da anfangen, wo auch das Bild beginnt und enden, wo das Bild endet. In den zwei Bildern könnt ihr erkennen, wie es es gerade habe und nicht will und wie ich es gerne haben würde.

<!DOCTYPE html>
<html>
<head>
    <title>Film- und Serienbeschreibungen</title>
  


  <style>
    img {
        display: block;
        margin: 0 auto;
        width: 1000px;
        border-radius: 10px;
    }


    body {
        text-align: center;
    }


    p {
        
    }
  </style>
</head>
  <body>
    <img src="mrrobotscene.jpg">
    <h1>Mr. Robot - Beschreibung</h1>
    <p>Mr. Robot ist eine US-amerikanische Fernsehserie, die von Sam Esmail entwickelt wurde. Die Serie handelt von Elliot Alderson, einem jungen Programmierer, der für eine Cyber-Sicherheitsfirma arbeitet und in seiner Freizeit zum Hacker wird. Elliot leidet unter sozialen Ängsten und Depressionen und verfällt in eine Art Schizophrenie, die von seinem imaginären Freund, Mr. Robot, ausgelöst wird</p>
    
  </body>
</html>

...zur Frage

Urheberrecht auf HTML Codes?!

Hallo, gilt das Urheberrecht auch auf HTML Codes.

BSP: Ich würde eine Website "programmieren", dürfte dann eine x beliebige Person diese kopieren, die Grafiken, Texte und Links austauschen und diese Website dann als seine benutzen?

Auf welchen Sprachen gibt es Copyright? HTML, CSS, HTML, Javascript?

Vielleicht kennt ihr euch da besser aus. Mit Goolge hab ich auch nichts gefunden.

...zur Frage

Wo kann man eine Internetseite selber programmieren (selbst HTMLund CSS Code schreiben)?

...zur Frage

Programmiersprachen für Neulinge?

Hi! Ich möchte mich bald als Informatiker bewerben, nun habe ich mir gedacht (um mich von der Konkurrenz abzuheben), dass ich mir eine eigene ‚mini-website‘ mache, um dort bisschen über mich zu erzählen. Ich weiss jedoch nicht, welchen Sprache ich dafür verwenden soll… Im Praktikum habe ich einmal html kennengelernt, also habe ich schonmal angefangen mit html was zu basteln. Gibt es etwas leichteres oder bin ich mit html auf dem richtigem weg?

Danke schonmal im voraus!!

...zur Frage

Website-Änderungen werden nicht angezeigt wegen Browser-Cache?

Hallo zusammen,

ich habe folgendes Problem:

Ich hoste meine Website bei Ionos. Dort habe ich meine Codes (HTML, CSS, JavaScript und PHP) im Webspace abgelegt, der mit der Domain verbunden ist.

Nun habe ich an der Website Änderungen vorgenommen und z.B. eine mobile Ansicht implementiert. Ich habe die alten Code-Dateien überschrieben.

Auf der Website werden diese Änderungen aber nicht angezeigt, wenn man die Website vor kurzem bereits besucht hatte, da der Browser-Cache die alten Daten noch gespeichert hat.

Gibt es hier eine Möglichkeit, das zu verhindern und für die Nutzer direkt die neue Version anzeigen zu lassen?

Ich danke für eure Rückmeldungen :)

...zur Frage

HTML Code für Weiterleitung nachdem schauen eines Videos?

Also ich möchte in meine Website ein Video einbauen das dich erst nachdem man es ganz zu Ende geguckt hat ohne zu Skippen automatisch auf eine andere Website weitergeleitet wird kennt jemand den HTML Code dafür?

...zur Frage

Wie kann ich den Abstand zwischen HTML-Tags entfernen?

HI, ich programmiere gerade einen Taschenrechner in HTML/CSS/JavaScript und möchte den Abstand zwischen den Elementen entfernen. Margin, Padding und Border sind bereits auf 0 gestellt. Der Abstand ist auch nur horizontal zwischen den Elementen. Vielen Dank im Voraus :-)

...zur Frage

Hilfe mit CSS Flexbox?

wie kann ich die 4 Bilder wie folgt anordnen?

ich code noch nicht so lange, doch hier der code den ich bis jetzt habe. Also bitte nicht auslachen ^^

CSS:

/* Dienstleistungen*/

.dienstleistungen{

justify-content: center;

width: 75%;

}

.mofa-zündung-service{

height: 50%;

width: auto;

}

.mofa-getriebe-revisionen{

height: 25%;

width: auto;

align-self: top;

}

.mofa-vergaser-tuning{

height: 25%;

width: auto;

align-self: top;

}

.mofa-kolben-ersatzteile{

height: 25%;

width: 50%;

}

/*!Dienstleistungen*/

HTML:

<h3>Dienstleistungen</h3>

<li><a href="#">Service</a></li>

<li><a href="#">Revisionen</a></li>

<li><a href="#">Tuning</a></li>

<li><a href="#">Ersatzteile</a></li>

</div>

so sieht es bis jetzt aus:

Ich verstehe vor allem nicht wie ich die Bilder untereinander und gleichzeitig neben einem anderen Bild anordnen kann. (kolben)

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen