Wykryto działanie AdBlocka!

Prawdopodobnie masz właczonego Adblocka. Korzystanie z bloga jest całkowicie darmowe. Jeśli jednak chcesz docenić prace autora, wyłacz blokowanie reklam dla tej witryny, aby jeszcze bardziej zmotywowac autora do dalszej pracy oraz częstszej publikacji artykułów.

Dziękuje :)

Treść główna bloga

Artykuły

Prosta strona oparta o HTML i CSS


HTML & CSSPoradnik ten dedykuje dla osób, które dopiero zaczynają swoją przygodę z tworzeniem stron internetowych oraz chcą się dowiedzieć jak powinien wyglądać kod takiej witryny internetowej. Przedstawię oraz wyjaśnię jak stworzyć w pełni semantyczna stronę w HTML 5 oraz CSS 2.1.
Pokazany tu kod jest całkowicie zgodny z dotychczasowymi standardami, np. brak tu zdeprecjonowanych elementów, które zostały zastąpione kodem CSS.

Kod na Githubie

Na początek przedstawię strukturę katalogów:

  • index.html
  • css/style.css
  • images/example.jpg

No to zaczynamy!

Plik index.html

Plik style.css

Mamy dwa główne pliki: index.html oraz style.css.

Plik index.html zawiera kod odpowiedzialny za strukturę dokumentu, natomiast w pliku style.css możemy dowolnie edytować wygląd strony.

Część pierwsza: HTML

W pliku index.html dokument zaczęliśmy od deklaracji kodowania – to dzięki niej na naszej stronie mn.i polskie znaki wyświetlają się poprawnie.

Następnie mamy znacznik:

Rozpoczyna on zawartość strony dokumentu. Dodatkowo atrybut lang deklaruje język użyty na stronie WWW.

Kolejnym znacznikiem jest <head>:

Umieszczamy w nim tzn. nagłówki – w naszym przypadku są to kolejno podstawowe nagłówki:

  1. Meta tag określający sposób kodowania znaków – UTF-8
  2. Link do zewnętrznego arkusza stylów
  3. Tytuł strony – bardzo ważny pod względem SEO
  4. Meta tag description – zawiera on opis zawartości witryny

Kolejnym bardzo ważnym znacznikiem jest:

Określa on „ciało” dokumentu – to w nim wpisujemy wszystkie znaczniki określające strukturę dokumentu. Grupując elementy strony, używamy mn.i znaczników:
<div>, <section>, <aside>, <figure> przypisując im odpowiednio id (identyfikator) lub class (klasę). Czym się różnią powiem w dalszej części kursu.

Nasz kod składa się z trzech głównych znaczników:

  1. <header id=”header”> </div> – obejmuje górną cześć witryny
  2. <section id=”content”> </div> – obejmuje właściwą treść strony
  3. <footer id=”footer”> </div> – obejmuje treść zawartą w stopce

W pierwszym znaczniku <header> z identyfikatorem header widzimy znaczniki:

Znaczniki <h1></h1> oznaczają tytuł strony – to co strona zawiera. Mają one największe znaczenie dla SEO.

Tego typu znaczników mamy 6: <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6>. Poszczególne znaczniki różnią się mn.i znaczeniem pod względem SEO oraz rozmiarem – im większy indeks tym mniejsza czcionka.

Wracając do naszego znacznika <header>, umieściłem w nim znacznik:

Jest to najzwyklejszy odnośnik do podstrony lub innej strony internetowej.

Atrybut Title=”” zawiera tytuł linka, nie jest on wymagany..

Pomiędzy

umieszczamy nazwę linka, np. strona główna lub portfolio.

Menu ZAWSZE robimy za pomocą listy. Może to być lista <dl><dt><dd> lub <ul> <li>
Znaczniki <nav> informują, że kod pomiędzy nim jest nawigacją strony(menu).
Więcej na ten temat powiem omawiając plik style.css.

Cześć kodu odpowiadająca odpowiednio stopce witryny:

Mamy tu znacznik <footer> obejmującego stopkę, a w nim dwa znaczniki grupujące tekst – <p>.
W pierwszym <p> Mamy informacje o autorze. Natomiast w drugim mamy link prowadzący do strony autora.

Część druga: Style

CSS służy do kreowania wizerunku witryny. Oto najważniejsze funkcje:


  1. – służy do ustawiania marginesów witryny np. margin-left:10px odstęp o 10px od lewej część rodzica

  2. – służy do wewnętrznego ustawiania odległości od elementów strony,np padding-top:14px; – odstęp,np tekstu o 14px od górnej część rodzica

  3. – służy do ustawiania tła witryny (background-color:red – kolor tła lub background-image: url(‚zdjęcie.jpg’) – tło obrazkowe)

  4. – służy do ustawiania długości dokumentu (istnieją przedrostki min- oraz max- czyli minimalna oraz maksymalna długość)

  5. – służy do ustawiania wysokości dokumentu (istnieją przedrostki min- oraz max- czyli minimalna oraz maksymalna wysokość)

  6. – służy do określenia jak mają zostać wyświetlone elementy,np display:block – wyświetlanie elementów w bloku lub display:inline – wyświetlanie elementów w jednej linii

Funkcje używanie do ostylowania tekstu:


  1. – służy do ustawienia koloru tekstu

  2. – służy do ustawienia tekstu względem boxu, np text-align:center -> wyśrodkowanie tekstu

  3. – służy do ‚dekorowania’ tekstu, np underline – podkreślenie lub none – bez żadnego efektu

  4. – służy do ustawiania kursywy tekstu, np italic – pochylenie

  5. – służy do określania odległości (wysokości) pomiędzy wierszami tekstu,

  6. – służy do określania odległości pomiędzy literami w tekście

  7. – służy do określania „grubości” tekstu, font-weight: bold to tekst pogrubiony

Bardzo ważne jest dodanie

lub znacznika obejmującego całą stronę, gwarantuje to, że strona zawsze będzie po środku ekranu.
Poza tym dobrą praktyką jest wyzerowanie wszystkich elementów poprzez kod lub ściągnięcie odpowiedniego pliku z resetem:

Poczytaj o normalize.css oraz reset.css.

W kodzie CSS pojawiły się również inne elementy takie jak: :link, :visited:first-letter

  • a:link mówi nam,że ten blok stylów jest przypisany do odsyłaczy będących linkiem.
  • a:visited oznacza,że ten blok stylów jest przypisany do odsyłacza, który był już wcześniej odwiedzony, tj. link, który został kliknięty.
  • p:first-letter odnosi się do pierwszej litery akapitu p, który znajduje się w <section> o id=”content”

  • Daniel

    Witam. Właśnie rozocząłem naukę HTMLa. Chciałbym dowiedzieć się co oznaczają te wyrazy w pliku css. Chodzi mi o: „a” i „P” przy h1, menu, content, footer oraz „ul” i „li” przy menu.

    • Dzięki temu nie musimy nadać osobnych klas lub identyfikatorów dla poszczególnych elementów, np.
      Mamy odnośnik <a href=”” title=””>Anhor</a> – możemy się do niego odwołać za pomocą css:

      a {
      /* Jakieś style */
      }

      Tak samo w przypadku listy i jej elementów

      <ul>
      <li&element listy;</li>
      </ul>

      i css:

      ul
      {
      list-style-type:none;
      }

      li
      {
      display:block;
      }

  • Daniel

    witam, mam problem z wyświetlaniem poszczególnych elementów obok siebie, np chciałbym żeby element logo witryny i menu znajdowały się obok siebie, a nie jedno pod drugim. Jak to zrobic?

    • Wystarczy nadać odpowiednie width i height i do tego display:inline-block.

  • Kewin

    jak dodac zamiast napisu jakies zdjecie jako logo?

    • Robi się to głównie za pomocą nagłówka h1.
      Wygląda to mniej więcej tak:
      <h1><a href=”index.html” title=”strona główna”><img src=”logo.jpg” alt=”Opis obrazka”></a></h1>

      • mim

        No dodałem w kodzie html, ale nie wyświetla się ten obrazek. Scieżka podana jest prawidlowo

        • Jeśli nie wyświetla obrazka to na 100% jest zła ścieżka. Możesz pokazać kawałek tego kodu?

  • Krystian

    Bardzo przydatny poradnik dla osób, które coś tam o html i css już wiedzą. Mam pytanie dotyczące #menu ul
    {
    list-style-type:none;
    margin-top:50px;
    }
    W jakim celu jest tam margin-top:50px? Do czego się to odwołuje, do header? Jakkolwiek bym tym parametrem nie manipulował, menu wygląda tak samo.

    • W wersji demonstracyjnej nie ma margin-top:50px;. Obecność regułki w tutorialu spełniała inne zadanie, zupełnie nie związane z poradnikiem. Już usuwam.

  • Witam,
    chcialem podziekowac za ten tutorial iz dzieki niemu stworzylem wlasna strone i dzieki lekkiemu kombinowaniu doszlem do tego co jest do czego. 🙂
    Tutorial tez mi duzo pomogl. 🙂

    Pozdrawiam
    IIC13 @ http://www.iic13.com

    • Cieszę się z tego powodu 🙂

  • Mam problem związany z polskimi znakami zamiast przykładowego Ł , Ń , Ó wyświetla mi się znak zapytania . W czym tkwi problem ?

    • Problem tkwi w kodowaniu znaków, w edytorze musisz ustawić sposób kodowania na UTF-8.

  • Witam, jest sprawa, czy mogę użyć tego kodu styl.css wraz z index.html na pożytek własnej strony? Nie chodzi mi tutaj o kopiowanie poradnika, tylko o ten sam kod 😉

    • Oczywiście że możesz 🙂

  • Korzystając (między innymi) z tego kursu zrobiłem prostą stronkę. Zapraszam :), lajka też można dać jeżeli komuś się spodoba 😉
    http://www.agnesis.net

  • Witek

    No tak, ale kiedy czasu nie ma na naukę htmla? Wiem, nazwiecie mnie leniem, ale… Co powiecie o kreatorach stron? Może warto zacząć i zrobić sobie stronę na webwave, czy innym. A później uczyć się?

    • Moim zdaniem kod tworzony przez kreatory stron jest po prostu tragiczny. Jeśli nie masz czasu na to to po co uczyć się właśnie tego gorszego sposobu?

  • Arq

    Prosił bym o pomoc z utworzeniem podstron na powyższym przykładzie. Mamy menu i co dalej? Jak doprowadzić do tego, aby treść podstrony wyświetlała się w miejscu „”?

  • Rob

    Warto wypróbować kreatory stron www, ja próbowałem już chyba wszystkich i tak zdecydowałem się w końcu na https://webwavecms.com/?ref=2922004 – WebWave hosting w cenie, wszystko szybko się układa w całość, nie trzeba znać języków, no i nie jestem skazany na szablon tylko jedynie moja wyobraźnia mnie ogranicza. szczerze polecam, stworzyłem dzięki nim już kila stron i zawsze mogę liczyć na pomoc, używałem również innych serwisów takich jak Wix czy Weebly, ale brak wsparcia i wysoka cena to ich duże wady.