Prosta strona HTML- wstawianie obrazków

pytanie zadane 4 marca 2022 w HTML i CSS przez Radek Żyhałko Nowicjusz (160 p.)

Proszę o pomoc w napisaniu strony HTML w notatniku ( bez css )

Odległość między skrajnymi obrazkami 1000px, szerokość obrazka 200px

Strona ma wyglądać jak na zdjęciu.

komentarz 4 marca 2022 przez ScriptyChris Mędrzec (190,190 p.)

Dlaczego bez użycia CSS?

komentarz 4 marca 2022 przez Radek Żyhałko Nowicjusz (160 p.)

Takie dostałem zadanie

komentarz 4 marca 2022 przez ScriptyChris Mędrzec (190,190 p.)

Czy potrafisz wstawiać obrazki na stronę? Napisałeś już jakiś kod do tego zadania?

komentarz 4 marca 2022 przez Radek Żyhałko Nowicjusz (160 p.)

<!DOCTYPE html>
<html>
    <head>
        <title>zadanie4</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    <div>
         <img src="logo.jpg" alt="logo" width="200" height="200" style="margin-left: 10%;"/>
        <br/>
         <img src="logo.jpg" alt="logo" width="200" height="200" style="margin-left: 50%; margin-top: 50% margin-left: 50%"/>
        <br/>
         <img src="logo.jpg" alt="logo" width="200" height="200" style="margin-top: 90%; margin-right: 100px;"/>
        <br/>
         <img src="logo.jpg" alt="logo" width="200" height="200" style="margin-left: 80%;"/>
    </div>
    </body>

</html>

Próbowałem ustawić obrazki marginesami, ale nie za bardzo to wychodziło

komentarz 4 marca 2022 przez ScriptyChris Mędrzec (190,190 p.)

Przy drugim obrazku brakuje średnika przed margin-left - jak sobie sprawdzisz style tego obrazka w devtoolsach, to margin jest przekreślony i oznaczony na żółto. Poza tym, to na oko wygląda tak, jak chcesz.

komentarz 4 marca 2022 przez VBService Ekspert (253,400 p.)
edycja 4 marca 2022 przez VBService

Napisałeś, że

Proszę o pomoc w napisaniu strony HTML w notatniku ( bez css )

a używasz style="margin-left: 10%;" itp. to są style css tyle, że w zapisie inline.

1 odpowiedź

odpowiedź 4 marca 2022 przez VBService Ekspert (253,400 p.)
wybrane 5 marca 2022 przez Radek Żyhałko

Najlepsza

Może użyj "starego" sposobu z przed css-a, czyli na <table>

<!DOCTYPE html>
<html>
  <head>
    <title>zadanie4</title>
    <meta charset="utf-8">
  </head>
  <body>
    <div>

      <table border="0" cellspacing="0" cellpadding="0" width="1000px" align="center">
        <tr>
          <td width="33.33%" align="left">
            <img src="https://picsum.photos/200/200/?random=1" alt="logo" />
          </td>
          <td width="33.33%">&nbsp;</td> 
          <td width="33.33%" align="right">
            <img src="https://picsum.photos/200/200/?random=2" alt="logo" />
          </td>          
        </tr>

        <tr>
          <td width="33.33%">&nbsp;</td> 
          <td width="33.33%" align="center">
            <img src="https://picsum.photos/200/200/?random=3" alt="logo" />
          </td>
          <td width="33.33%">&nbsp;</td>         
        </tr>

        <tr>
          <td width="33.33%" align="left">
            <img src="https://picsum.photos/200/200/?random=4" alt="logo" />
          </td>
          <td width="33.33%">&nbsp;</td> 
          <td width="33.33%" align="right">
            <img src="https://picsum.photos/200/200/?random=5" alt="logo" />
          </td>          
        </tr>       
      </table>

    </div>
  </body>
</html>