Moje błedy html- prosze o poprawkę i wytłumaczenie

pytanie zadane 6 listopada 2021 w HTML i CSS przez Posejdon Początkujący (490 p.)
zamknięte 7 listopada 2021 przez Posejdon

<!DOCTYPE html>
<html>
<head>
<title> Tytuł strony</title>
<meta name="description" content=" opis strony www">
<meta name="keywords" slowa kluczowe, nie wpływają na wyszukiwarki>
<meta name="robots" content="nofolow">

<style>

h1{
text-align: center;}

#pojemnik 
{
width:1000px;
background-color:white;
padding:10px;
padding-top:5px;
margin-left:auto;
margin-right:auto;
}
#logo
{height:40px;
background-color:red;
text-decoration:blink; 
width:1000px;
}

#column1
{
height:40px;
background-color:#C0C0C0;
padding:1px;
width:248px ;
text-align:center;
float:left;
}
#column2
{
height:40px;
background-color:#C0C0C0;
padding:1px;
width:248px ;
float:left;
text-align:center

}
#column3
{
height:40px;
background-color:#C0C0C0;
padding:1px;
width:248px;
text-align:center;
float:left;
}
#column4
{
height:40px;
background-color:#C0C0C0;
padding:1px;
width:248px;
text-align:center;
float:left;
}



</style>

</head>
<body>

<div id="pojemnik">

<div id="logo"> 
 <h1>Ewolucja strony</h1>
</div>


<div id="column1">
<h3><em>kolumna </h3></em>

</div>
<div id="column2">
<h3><em>kolumna2 <em></h3>

</div>
 <div id="column3">
<h3><em>kolumna3<em></h3>
</div>
 <div id="column4">
<h3><em>kolumna4<em></h3>

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

Sory za to że pisze sobie tam po polsku, mam problemy z angielskim. - uczę się.

Chcę by jak zmieniam rozdzielczość automatycznie się dostosowywała do ekranu.

I tak szerokość ustawiłem na 1000px..... Jest na to jakiś sposób?

komentarz zamknięcia: Otrzymałem statysfakcjonującą odpowiedź. Błedy zostały naprawione.

2 odpowiedzi

odpowiedź 6 listopada 2021 przez Mihoteo Bywalec (2,420 p.)
wybrane 7 listopada 2021 przez Posejdon

Najlepsza

To o co pytasz to "Responsywność" dopisz sobie:

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

choć jeśli dobrze pamiętam nie jest to wymagane, i możesz spokojnie używać procentów zamiast pixeli. Jak usuniesz pixele i zastąpisz je procentami to zacznie ci automatycznie się dostosowywać np zamiast width:1000px daj width:100%

komentarz 6 listopada 2021 przez Mihoteo Bywalec (2,420 p.)

Wiadomo przy jakis paddingach marginach możesz zostawić sobie pixele jak są to wartości typu 5px jak w przykładzie. Ale dla większych elementów polecałbym zastąpić to procentami aby samo się przeliczało.

komentarz 6 listopada 2021 przez Posejdon Początkujący (490 p.)

W końcu coś zaczyna działać !

Miałeś rację - DZIĘKUJĘ.

Mniej dobry dzień :)

odpowiedź 7 listopada 2021 przez VBService Ekspert (252,660 p.)
edycja 7 listopada 2021 przez VBService

Rozważ dodanie atrybutu lang do <html>, aby zadeklarować język dla Twojej strony.
Declaring language in HTML
```
<html lang="pl">
```
Dopisz do elementu <head>, metadane na temat kodowania znaków
HTML Character Sets
```
<meta charset="UTF-8">
```
w <meta name="keywords" ...> zapomniałeś o atrybucie content="...", czyli
8 HTML Tags Essential for SEO
```
<meta name="keywords" content="słowa kluczowe, nie wpływają na wyszukiwarki">
```
jak już wspomniał @Mihoteo, nie zaszkodzi dodać
Is the viewport meta tag really necessary?
```
<meta name="viewport" content="width=device-width, initial-scale=1">
```

tu masz błąd

<div id="column1">
  <h3><em>kolumna </h3></em>
</div>

domknięcie elementu <em> powinno nastąpić przed domknięciem <h3>

<div id="column1">
  <h3><em>kolumna</em></h3>
</div>

zapomniałeś użyć znaku domknięcia </em>

<div id="column2">
<h3><em>kolumna2 <em></h3>
 
</div>
 <div id="column3">
<h3><em>kolumna3<em></h3>
</div>
 <div id="column4">
<h3><em>kolumna4<em></h3>
 
</div>

<div id="column2">
<h3><em>kolumna2 </em></h3>
 
</div>
 <div id="column3">
<h3><em>kolumna3</em></h3>
</div>
 <div id="column4">
<h3><em>kolumna4</em></h3>
 
</div>

staraj się używać "wcięć" (spacji, tabulatora), poprawi to czytelność kodu np.

<div id="pojemnik">

  <div id="logo"> 
    <h1>Ewolucja strony</h1>
  </div>

  <div id="column1">
    <h3><em>kolumna1</h3></em>
  </div>
  <div id="column2">
    <h3><em>kolumna2</em></h3>
  </div>      
  <div id="column3">
    <h3><em>kolumna3</em></h3>
  </div>      
  <div id="column4">
    <h3><em>kolumna4</em></h3>
  </div>

</div>

właściwość css text-decoration: blink; nie jest już zalecane. Zamiast tego można użyć np. animacji css lub javascript.

Pokaż 9 poprzednich komentarzy

komentarz 7 listopada 2021 przez Posejdon Początkujący (490 p.)

Ja pierdzielę co się tutaj wyrabia .....

Przetestowałem to co mi pokazałeś ..... WTF ! WoooooW !!!!!

Jak to zrobiłeś na jakiej zasadzie to działa.

Słuchaj na tej stronie co pokazałeś dzieją się cuda.

Raz takie zdjęcia raz inne zdjęcie .

Teraz mam pytanie jeżeli sobie zrobię 10 zdjęć i po lewej stronie wkleję np. logo to będę miał taką animację .

Czy chodzi o kwestię też tego url - który wkleiłeś. po prostu link do folderu i to w tedy z folderu bierze z automatu czy jak, tego nie kumam.

komentarz 7 listopada 2021 przez VBService Ekspert (252,660 p.)

I spróbuję zrobić inny szablon - spróbuję zrobić szachownicę.

jestem ciekaw jak udało się Tobie to "napisać".

komentarz 7 listopada 2021 przez VBService Ekspert (252,660 p.)

Czy chodzi o kwestię też tego url - który wkleiłeś. po prostu link do folderu i to w tedy z folderu bierze z automatu czy jak, tego nie kumam.

to jest strona https://picsum.photos, która zwraca losowy obrazek przy każdym jej wywołaniu.

komentarz 7 listopada 2021 przez Posejdon Początkujący (490 p.)

Spoko szkoda że nie mogę sobie tak samemu wstawić obrazków, by mi się tak robiło.

Chyba że istnieje jakiś na to patent że podaje 5 url do grafik i mi CSS będzie robił losowania.

Jeżeli chodzi o szachownice to nie wiem czy mi się to uda. Tak sobie chce poćwiczyć ustawienia kolumn i zabawę w # zbiorcze. By to wytrenować.

Czytałem że może mi się nie udać tyle kratek stworzyć na stronie z tą szachownicą . Bo w książce też pokazywali przykładowe układy formatowania <div>.

No ale jest to trudne zadanie jak dla mnie.

Ja tylko chcę trenować pisanie kodu.

komentarz 7 listopada 2021 przez VBService Ekspert (252,660 p.)
edycja 7 listopada 2021 przez VBService

Spoko szkoda że nie mogę sobie tak samemu wstawić obrazków, by mi się tak robiło.

Chyba że istnieje jakiś na to patent że podaje 5 url do grafik i mi CSS będzie robił losowania.

jak masz stronę na serwerze to możesz taki efekt ustawić za pomocą np. skryptu napisanego w php (lub innym języku programowania dostępnym na serwerze)
lokalnie (na komputerze domowy, bez serwera) za pomocą javascript lub triku w css z animation na background-image: url(...);

np.: working with images in JavaScript: [ 1 ] [ 2 ]