• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Podstawowy kod i układ strony www

VPS Starter Arubacloud
+1 głos
290 wizyt
pytanie zadane 24 sierpnia 2021 w HTML i CSS przez Przemo_J Początkujący (320 p.)

Witam

Ostatnio eksperymentuje hobbystycznie z kodowaniem w HTML / CSS. Będę wdzięczny za wszelkie uwagi na temat poziomu, poprawności kodu i układu prostego motywu który znajduje się tu: http://webtest24.pl/ . Czy możecie zaproponować jakieś źródła gdzie można podejrzeć poprawny kod HTML / CSS lub zweryfikować własny?

Z góry dziękuje

P.J.

2 odpowiedzi

+3 głosów
odpowiedź 25 sierpnia 2021 przez mb-dir Mądrala (6,710 p.)
wybrane 15 września 2021 przez Przemo_J
 
Najlepsza

Pierwsza rzecz, która rzuca mi sie w oczy to nieprawidłowe wykorzystanie <h1>, tag <h1> ma reprezentować najwyższy poziom nagłówka, ma być tylko jeden taki tag w kontekście strony, i ma być on na samej górze hierarchii nagłówków, podczas, gdy u ciebie <h1> znajduje się na tej samej wysokości co <h2> :

    <section class="sect-1">
        <div class="top">
            <h1>Sekcja 1</h1>    
        </div>
    </section>
    <section class="sect-2">
        <div class="wrap-h2">
            <h2>Sekcja 2</h2>
        </div>
        <div class="wrap-box">
            <div class="box box-m box-1">
                <h3>Box</h3>
            </div>
            <div class="box box-m box-2">
                <h3>Box</h3>
            </div>
            <div class="box box-m box-3">
                <h3>Box</h3> 
            </div>
        </div>
    </section>

W twoim kodzie, <h1> nie jest bardziej ważny("wyższy") niż <h2>, jeden i drugi to nagłówek dla sekcji, <h1> powinien określać główną tematyke strony, więc na stronie głównej tag<h1> powinien zawierać logo/tytuł strony

 

Druga sprawa to użycie <span> jako przycisk do menu, span to nie jest przycisk(nawet jeśli dzięki css'owi tak wygląda), "przycisk" zbudowany jako span jest niefocusowalny(nie można go zaznaczyć przy pomocy np tabulatora), ponadto użycie <span> sprawia, że przycisk taki nie jest widzialny dla czytników ekranowych - więcej o tym tutaj

 

Kolejna rzecz, to użycie <span> jako kontenera dla tekstu w stopce, z MDN'owskiej definicji wynika, że <span> jest podstawowym wbudowanym kontenerem dla frazowania treści, który z natury nie reprezentuje niczego. Może być używany do grupowania tekstu w celu stylizacji - obecnie w stopce znajduje się tylko napis "Footer", ale gdyby w takiej stopce w <span> było coś bardziej ważnego np jakiś adres, wtedy nie ma wskazania na to, że dana zawartość jest adresem

 

Kolejna sprawa to nazewnictwo klas, jest to kwestia indiwidualna, ale zobacz:

    <section class="sect-1">
        <div class="top">
            <h1>Sekcja 1</h1>    
        </div>
    </section>

klasa "top" jest mało znacząca, "top" czego? Wiecej znacząca nazwa klasy w tym przypadku to np "sect-1__header", ktoś kto zobaczy nazwe takiej klasy z automatu skojarzy, że chodzi o nagłówek jakiejś sekcji, natomiast, gdy ktoś widzi klase "top" to taka nazwa na nic kontretnego nie wskazuje. Zachęcam do zapoznania się z BEM'em.

 

Co do stylowania przy pomocy REM, należy pamiętać, że każda przeglądarka ma troche inny domślny font-size dla root elementu, więc na przeglądarce x 2rem = 32px, ale na przeglądarce y 2 rem może być równe 36px

 

Tak ogólnie to jeszcze brak <main>, który miał by "otaczać" główną zawartość strony, w <section> można by zamiast divów stosować <article>, porównaj sobie strone WWW do jednej strony z gazety, gazeta ma główną zawartość, podzieloną na sekcje(sekcja sportowa, kulinarna itp) i każda z tych sekcji ma kilka artykułów w sobie(i oczywiście dochodzą do tego nagłówki)

 

Przykładowa poprawna struktura strony, zobacz, każdy znacznik z punktu widzenia semantyki "coś" znaczy, tak ogólnie to dla ludzkiego oka nie ma znaczenia czy główna treść strony znajduje się w <div>, czy w <main>(jeżeli są tak samo ostylowane), ale dla przeglądarki/czytnika ma to kolosalne znaczenie. Polecam wpisać w google fraze "Comandeer semantyka" i poczytać kilka wpisów na ten temat.

 

Co do podlinkowanego wcześniej walidatora, to sprawdza on tylko składnie języka(czy tagi są domknięte itp), natomiast nie sprawdza on semantyki(wykorzystania znaczników zgodnie z ich przeznaczeniem), wg tego walidatora nie ma żadnych błędów, co nie jest prawdą, bo np implemantacja przycisku jest nieprawidłowa.

 

Co do układu strony to ciężko coś powiedzieć, jest to tylko jakiś szablon, ale na pewno + za to, że układ ten dostosowuje się rozmiaru urządzenia

komentarz 25 sierpnia 2021 przez Przemo_J Początkujący (320 p.)
Dziękuję za ważne uwagi, być może źle zadałem pytanie. Miałem na myśli poprawność podstawowego szkieletu dokumentu html/css, bez wnikania w przyciski fonty i spany - te elementy zamieściłem w celu zobrazowania układu szablonu. Czy układ sekcji i flexbox jest ok?
1
komentarz 25 sierpnia 2021 przez qax Dyskutant (8,060 p.)

Tak się składa, że zacząłem pisać artykuł o podstawach semantyczności języka HTML i niedługo ukaże się na moim blogu (lubię poruszać takie ogólne tematy), tak więc zapraszam niebawem smiley

komentarz 25 sierpnia 2021 przez mb-dir Mądrala (6,710 p.)

Miałem na myśli poprawność podstawowego szkieletu dokumentu html/css

 Nie powiedziałbym, że HTML jest poprawny, ze względu na to, że nie zawsze wykorzystujesz znaczniki zgodnie z ich przeznaczeniem.

Co do układu sekcji,to nie za bardzo rozumiem o co chodzi, jeżeli taki wizualny układ strony jest z jakichś względów wymagany to jest on prawidłowy, ale równie dobrze sekcja nr 3 mogłaby mieć 4 boxy, a sekcja nr 4 2 boxy, nic nie stoi temu na przeszkodzie.

A co do flexboxa, no to on po prostu działa, nic się niespodziewanie nie rozjeżdża, wszystko trzyma się kupy, więc jest ok

0 głosów
odpowiedź 25 sierpnia 2021 przez SzkolnyAdmin Szeryf (86,280 p.)

Weryfikacja poprawności -> skorzystaj z walidatora online.

Co do wyglądu, to zależy, co się komu podoba. Nie obraź się, ale to chyba tylko szkielet strony z tymczasowymi kolorami, itp.

 

pytanie zadane 25 sierpnia 2021 w HTML i CSS przez Przemo_J Początkujący (320 p.) Układ sekcji i flexbox

Podobne pytania

0 głosów
1 odpowiedź 819 wizyt
pytanie zadane 4 września 2017 w HTML i CSS przez Apper97 Obywatel (1,380 p.)
0 głosów
1 odpowiedź 146 wizyt
0 głosów
1 odpowiedź 560 wizyt
pytanie zadane 2 listopada 2016 w HTML i CSS przez niezalogowany

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...