Wie mache ich sowas mit HTML und CSS?

wansmet  27.11.2024, 19:59

du meinst die Bildteilung?

Alex08147 
Beitragsersteller
 27.11.2024, 20:00

Ja

3 Antworten

Hi Alex08147,

sowas kannst du mithilfe von HTML und CSS erstellen. Dabei ist HTML das Grundgerüst und um dieses Gerüst zu gestalten, verwendest du CSS. Ich kann dir entweder empfehlen zu dem Thema Lernvideos zu holen z.B. bei udemy.com oder Fachbücher vom Rheinwerk Verlag zu holen. Hier die Links:

https://www.rheinwerk-verlag.de/einstieg-in-html-und-css/

https://www.rheinwerk-verlag.de/schroedinger-lernt-html5-css-und-javascript/

https://www.udemy.com/

Es gibt auch sehr gute Quellen im Netz über HTML, CSS, JavaScript und weiteren Technolgien die du nutzen kannst. Unter Selfhtml findest du viele Lernunterlagen:

https://wiki.selfhtml.org/wiki/SELFHTML

HTML ist eine Sprache um unter anderem Webseiten zu erstellen. Diese kannst du auch als Datei direkt von deinem PC testen über einen Browser wie Chrome oder Firefox.

Viel Erfolg beim lernen und umsetzen

Woher ich das weiß:Berufserfahrung – Ich bin gelernter Mediengestalter Digital und Print(IHK)

So weit ich weiß kannst du, die Bilder in einen Container einfügen und dann die Größe bestimmen, mit Width und so, ich weiß es gerade aber nicht genau. auf so welchen "professionellen Websiten" wird sowas oft durch Wordpress oder ähnlich Programme gemacht also nicht mehr durch das manuelle coden. Wenn du sowelche Fragen hast empfehle ich dir dich erstmal an Chat GPT zuwenden :), da dieser Bot eine große Datenbank zu Themen im Fachbereich Informatik hat und dir fast alle Fragen beantworten kann, außerdem kannst du auch Nachfragen stellen
Viele Grüße

Woher ich das weiß:eigene Erfahrung

Dafür kannst du ein CSS Grid einsetzen. Folgend ein Beispiel.

HTML:

<div class="container">
  <div class="left">left</div>
  <div class="right-top">right top</div>
  <div class="right-bottom">right bottom</div>
</div>

CSS:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 100px;
}

.left {
  background: yellow;
  grid-row: 1 / span 2;
}

.right-top {
  background: blue;
}

.right-bottom {
  background: red;
}

slaxxer  28.11.2024, 11:50

mit flexbox brauchs weniger code , aber grid tuts genauso