[TuT] Podstawowy szablon strony, porady na początek

Hans Kloss PL · 15 Października 2015

Z racji tego, że często na forum pojawiają się kwiatki w stylu stron pisanych w technologii sprzed 15 lat wrzucam tutaj podstawowy szablon jednostronicowej witryny, wykonany wg aktualnych standardów (komentarze w środku):

<!DOCTYPE html>
<html lang="pl">
<head>
    <!--
    Sekcja head służy do zamieszczania informacji o witrynie,
    ładowania zasobów (css, fonty, biblioteki Javascript)
    nie wolno tu zamieszczać znaczników definiujących strukturę i treść strony
    -->

    <!--KODOWANIE ZNAKÓW (najlepiej zawsze uzywać tego co tutaj)-->
    <meta charset="UTF-8">

    <title>Tytuł strony</title>

    <!--ZAMIESZCZANIE WEWNĘTRZNEGO ARKUSZA STYLÓW:-->
    <style>
        /*
        tu dajesz wszystkie rzeczy związane z wyglądem strony
        i ułożeniem elementów,
        możesz odnosić się do konkretnych znaczników,
        klas lub id elementów zamieszczonych w sekcji <body>:
        */

        /*odwołanie do wszystkich elementów o podanym znaczniku html:
            nazwa_znacznika {
                wlasciwosc1: wartosc;
                wlasciwosc2: wartosc;
                ... i tak dalej
            }
        */

        /*realny przykład:*/
        p {
            color: #333;
            background: #eee;
        }

        /*odwołanie do elementów o określonej klasie (nadawanej w html za pomocą class="nazwa_klasy")*/
        /*(uwaga: tą samą nzawę klasy możesz nadać wielu elementom):*/
        .nazwa_klasy{
            /*tu wypisujesz właśiwości jak wyżej, np:*/
            font-weight: bold;
        }

        /*odwołanie do elementów o określonej klasie (nadawanej w html za pomocą id="id_elementu")*/
        /*(uwaga: tą samą nzawę klasy możesz nadać wielu elementom):*/
        #id_elementu{
            /*tu wypisujesz właśiwości jak wyżej, np:*/
            background-color: #268bd2;
        }
    </style>

    <!--MOŻNA TAKŻE ZAŁADOWAĆ ARKUSZ Z OSOBNEGO PLIKU:-->
    <link rel="stylesheet" href="/sciezka_do/pliku.css">

    <!--ZAMIESZCZANIE WEWNĘTRZNEGO SKRYPTU JAVASCRIPT
    zwyczajowo wczytuje się tutaj biblioteki i funkcje do późniejszego wykorzystania
    (lepiej umieścić to na samym końcu tuż przed znacznikiem </body>, aby nie blokować ładowania strony):-->
    <script>
        // treść sktyptu
    </script>

    <!--MOŻNA TAKŻE ZAŁADOWAĆ ARKUSZ Z OSOBNEGO PLIKU:-->
    <script src="/sciezka_do/pliku.js"></script>


</head>
<body>
    <!--
    Sekcja body służy do definiowania struktury i treści strony,
    nie wolno tu zamieszczać informacji o wyglądzie, a jedynie odwołania do odpowiednich klass w css
    -->

    <!--TYPOWA STRUKTURA PROSTEJ STRONY:-->

    <header>
        <!--tresc nagłówka, można tu wrzucić nawigację (lub dać znacznik <nav></nav> osobno po </header>-->
        <a href="/"><img src="/sciezka_do/obrazka.png" alt="logo"/></a>

        <nav id="id_elementu">
            <ul>
                <li><a href="#pierwsza_sekcja">link 1</a></li>
                <li><a href="#druga_sekcja">link 2</a></li>
            </ul>
        </nav>

    </header>

    <main>
        <!--główna treść witryny-->

        <section id="pierwsza_sekcja">
            <h1>Tytuł sekcji</h1>
            <img src="/sciezka_do/obrazka.png" alt="nazwa_obrazka"/>
            <p class="nazwa_klasy">
                Paragraf z treścią z nadana klasą.
            </p>
            <p>
                Kolejny paragraf, bez żadnej dodatkowej klasy...
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>
                Architecto atque consectetur dolor eaque fugiat illum labore mollitia nemo nobis praesentium,
                quis, saepe sit voluptate. Ab aliquam dolorem facere facilis numquam.
            </p>
        </section>

        <!--jeśli twoja treść to typowy artykuł to powinieneś zamiast section dać:-->
        <article id="druga_sekcja">
            <h1>Tytuł artykułu</h1>
            <img src="/sciezka_do/obrazka.png" alt="nazwa_obrazka"/>
            <p class="nazwa_klasy">
                Paragraf z treścią z nadana klasą.
            </p>
            <p>
                Kolejny paragraf, bez żadnej dodatkowej klasy...
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>
                Architecto atque consectetur dolor eaque fugiat illum labore mollitia nemo nobis praesentium,
                quis, saepe sit voluptate. Ab aliquam dolorem facere facilis numquam.
            </p>
        </article>

    </main>

    <footer>
        <!--treść stopki-->
    </footer>

    <!--ZAMIESZCZANIE WEWNĘTRZNEGO SKRYPTU JAVASCRIPT
    zwyczajowo zamieszcza się tu kod sterujący i modyfikujący wygląd strony
    (można też zamieścić go w sekcji <head>, mniej polecane):-->
    <script>
        // treść sktyptu
    </script>

</body>
</html>

Podgląd -> http://kapitalny.com/projects/examples/basic_template.html

Oczywiście najlepiej nauczyć się samemu od podstaw html 5 i css3, ale powyższy szablon może się przydać jak nie ma na to czasu.

Żeby nie uczyć się bzdur polecam korzystać z następujących źródeł:

https://developer.mozilla.org/pl/ - świetne źródło - [pl] (jeszcze nie wszystko spolszczone),
http://www.w3schools.com/ - bardzo popularne, choć gorsze źródło od wyżej wymienionego - [eng],
https://www.codecademy.com/ - świetne, darmowe, interaktywne kursy online - [eng],
http://www.kurshtml.edu.pl/ - dobry polski portal (uwaga! należy korzystać tylko z działów html5 i css3) [pl]
http://how2html.pl/ - dobry, przejrzysty tutorial html5 [pl]

Podstawą efektywnej pracy jest dobry edytor z kolorowaniem i podpowiadaniem składni, na początek polecam:

Atom -> https://atom.io/ (darmowy) (polecam także pluginy opisane w tym artykule -> klik )
Visual Studo Code -> https://code.visualstudio.com (darmowy, sam używam)
Notepad++ -> https://notepad-plus-plus.org/ (darmowy)
Sublime Text -> http://www.sublimetext.com/ (płatny, bardzo dobry)

Jeśli chcecie coś bardziej zaawansowanego to możecie wybrać jedno z poniższych IDE:

Eclipse PDT -> https://eclipse.org/pdt/ (darmowe)
WebStorm / PhpStorm -> https://www.jetbrains.com (płatne, najlepsze)

15 Października 2015

Atom.io według mnie najlepszy edytor, obsługuję wszystko czego nam trzeba(autocomplete,kolorki,githuba,remote connection itp). I czesem lang="pl" nie pisało się w <html>?

Nawet fajny poradnik!

Hans Kloss PL · 15 Października 2015

@Lord Tytan

Najlepszy to jest PhpStorm, no ale to już całe IDE (Atoma odkryłem niedawno jak szukałem czegoś do Rusta, od lat korzystałem z Notepad++ do prostych rzeczy i nie szukałem nic innego)

Tutek ma mi służyć głównie jako źródło, do którego będę odsyłał gdy zabraknie mi cierpliwości

Co do lang - racja, już poprawione.

Discredited# · 15 Października 2015

Brackets też fajny edytor, polecam też ten kurs w zamian za standardowy: http://how2html.pl/

Hans Kloss PL · 15 Października 2015

@Discredited#

Całkiem niezłe, dodałem do listy.

Co do Brackets - nie dodaję, gdyż nie ma domyślnie dobrego autouzupełniania / snippetów (podobnie Light Table). Notepadd++ co prawda też nie ma, ale jest najlżejszy, więc może się komuś przydać. Mógłbym jeszcze Vima zaproponować, którego bardzo lubię, no ale nie będę straszył ludzi

Burned123 · 16 Października 2015

Tut spoko, dobrze napisany a komentarze pomogą zrozumieć pewne kwestie, ale skrypty js ładujemy na końcu strony

Hans Kloss PL · 16 Października 2015

Tut spoko, dobrze napisany a komentarze pomogą zrozumieć pewne kwestie, ale skrypty js ładujemy na końcu strony

Nie do końca, można i tu i tu, ważne żeby nie przeplatać z kodem html, zwyczajowo w head ładuje się funkcje do późniejszego wykorzystania, a na końcu body kod kontrolujący, modyfikujący stronę (no ale to tylko konwencja, jak wrzucisz cały kod w head to też zadziała - o ile wstrzymasz jego wykonanie do załadowania strony). Mogłem to opisać w sumie w przykładzie.

Rogetenek · 16 Października 2015

Kod js wrzucasz zawsze na koniec strony żeby nie blokować ladującej sie strony i kropka.

Nie wiem czy chciałbyś wchodząc na strone widzieć przez 10 sek ( przy slabym internecie ) biała strone.

Hans Kloss PL · 16 Października 2015

Kod js wrzucasz zawsze na koniec strony żeby nie blokować ladującej sie strony i kropka.

Nie wiem czy chciałbyś wchodząc na strone widzieć przez 10 sek ( przy slabym internecie ) biała strone.

No jak kropka to nie ma co dyskutować :makka:

Jeesup · 18 Października 2015

Wydaje mi się że brakuje tu jedynie często i gęsto stosowanego <div>.

18 Października 2015

Wydaje mi się że brakuje tu jedynie często i gęsto stosowanego <div>.

Tylko że tak zwany blok (div) nie jest zawszę najlepszym rozwiązaniem. Używajmy całego html a nie tylko bloków.

Hans Kloss PL · 18 Października 2015

Wydaje mi się że brakuje tu jedynie często i gęsto stosowanego <div>.

Poradnik miał pokazywać semantykę budowania strony. Divów używa się obficie, ale raczej do uzyskania pożądanego wyglądu, co nie było treścią poradnika (bo o tym można całą serię zrobić).

Ogólnie warto zacząć właśnie od takiego szkieletu a potem ewentualnie opakowywać w divy elementy, które tego wymagają.

Tak jak pisze wyżej @Lord Tytan - divy są często nadużywane (to się nawet ładnie nazywa - "divitis").

Writen · 19 Października 2015

Polecałbym z tego tematu wyrzucić link do w3schools. Jak się wielu przekonało, nie jest to wiarygodne źródło wiedzy. Wiele rzeczy jest tam uproszczone w taki sposób, że aż są przekłamane i niezgodne ze specyfikacją.

Aktualnie najlepszą dokumentacją jest MDN, ale warto też wpaść na ta oficjalną webplatform.org

Hans Kloss PL · 19 Października 2015

@Writen

Też miałem wątpliwości czy podawać w3schools, ale tak czy inaczej każdy trafi na tą stronę prędzej czy później, więc lepiej ją wymienić, lecz przy okazji zwrócić uwagę, że są lepsze źródła (dodam adnotację).

Fennec · 9 Listopada 2015

@Hans Kloss PL dodaj dodatki do zwiększenia wydajności, jak emmet.io.

Hans Kloss PL · 9 Listopada 2015

@Fennec Przy linku do Atoma jest już link do artykułu opisującego przydatne pluginy (w tym Emet).

IAmBoskiM · 5 Grudnia 2015

Emm, a gdzie DTD? Co jak co, ale to jest konieczne. Normalnie samoistnie ustawia się transitional, ale ja bym odradzał bazowania się na ustawieniach domyślnych, zmienią się i będzie lipa.

Jakub · 5 Grudnia 2015

Emm, a gdzie DTD? Co jak co, ale to jest konieczne. Normalnie samoistnie ustawia się transitional, ale ja bym odradzał bazowania się na ustawieniach domyślnych, zmienią się i będzie lipa.

Ale ten temat dotyczy HTML5, o ile się nie mylę DTD używa się praktycznie tylko w xml i XHTML.

Writen · 5 Grudnia 2015

Emm, a gdzie DTD? Co jak co, ale to jest konieczne. Normalnie samoistnie ustawia się transitional, ale ja bym odradzał bazowania się na ustawieniach domyślnych, zmienią się i będzie lipa.

A pan to się zatrzymał w czasie?

IAmBoskiM · 6 Grudnia 2015

Aaa no tak, tutaj nie trzeba. Sorka.

NaczelnyNieuk · 14 Grudnia 2015

Te zamykanie pojedynczych znaczników można nazwać tylko jednym ... zbędnymi bajtami. W rzeczywistości są to pozostałości po xHTML i nie są tutaj potrzebne.

Jeżeli jednak już z nich korzystasz to wszystkie zamykaj.

np.

Tutaj img zamknąłeś:

<img src="/sciezka_do/obrazka.png" alt="nazwa_obrazka"/>

a tutaj br już nie:

<p>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>
</p>

Warto też uwzględnić znacznik

<aside></aside>

Dobrym zwyczajem jest też rezerwowanie ID dla js, natomiast html stylizować klasami.

Writen · 15 Grudnia 2015

Dobrym zwyczajem jest też rezerwowanie ID dla js, natomiast html stylizować klasami.

Że co? Dobrym zwyczajem? Ale żeś se wymyślił. To co napisałeś jest zupełnie bez sensu. ID to unikalny identyfikator elementu i należy go używać według jego przeznaczenia, a nie według jakiegoś "widzimisię". Jeżeli jest tylko jedna sekcja danego typu to należy użyć id. Jeśli w JS'ie chcesz wykonać coś na grupie taki samych lub podobnych elementów, to logiczne, że musisz użyć klasy. W przykładzie identyfikatory i klasy zostały użyte prawidłowo.

Hans Kloss PL · 15 Grudnia 2015

Te zamykanie pojedynczych znaczników można nazwać tylko jednym ... zbędnymi bajtami. W rzeczywistości są to pozostałości po xHTML i nie są tutaj potrzebne.

Jeżeli jednak już z nich korzystasz to wszystkie zamykaj.

np.

Tutaj img zamknąłeś:
<img src="/sciezka_do/obrazka.png" alt="nazwa_obrazka"/>
a tutaj br już nie:
<p>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>
</p>

Mało tego - tak też jest poprawnie:

<p>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<p>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<p>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit.

ba, tak jeszcze mniej bajtów zużyję:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Rzeczywiście, poruszyłeś bardzo istotny w programowaniu webowym problem.

Co do id to @Writen ładnie to podsumował. Pobieranie pojedynczych elementów zamiast kolekcji to dopiero by było marnotrawstwo bajtów.

Skupiasz się na rzeczach nieistotnych (tym bardziej, że obie formy są poprawne), a nie widzisz tego co ważne.

Co do uwagi do aside - jasne mógłbym to zawrzeć, ale wtedy musiałbym dopisać dużo cssa by pokazać to wizualnie w przykładzie, a nie chciałem zaciemniać przykładu.

NaczelnyNieuk · 15 Grudnia 2015

Jakie marnotractwo bajtów ?

Nie przesadzajmy w 2 strone, te twoje zamkniecia znaczników są akurat w ogóle nie potrzebne i to jest marnotractwo bajtów.

Natomiast podział na klasy -> css id -> js, daje dobrą przejrzystość kodu.

Hans Kloss PL · 15 Grudnia 2015

@NaczelnyNieuk

Ok, idź trollować gdzie indziej.

Zaloguj się

👋 Witaj na MPCForum!

[TuT] Podstawowy szablon strony, porady na początek

Rekomendowane odpowiedzi

Gość

Gość

Gość

Gość

Zarchiwizowany