Różnice między
HTML a CSS

HTML oraz CSS to podstawowe języki programowania, służące do tworzenia stron internetowych i aplikacji webowych. Różnią się jednak pod wieloma względami oraz zasadą działania.

Podstawy

HTML

Jest odpowiedzialny za treść i strukturę strony internetowej.
Hyper Text Markup Language – hipertekstowy język znaczników

CSS
Jest odpowiedzialny za wygląd i wyświetlanie się elementów HTMLowych.
Cascading Style Sheets – kaskadowe arkusze stylów

Zastosowania

HTML

  • Publikacja dokumentów w internecie – mogą zawierać nagłówki, treści, zdjęcia, tabele, listy itp;
  • Odnajdywanie informacji online – przez linki tekstowe, przyciski;
  • Projektowanie formularzy – do odnajdywania informacji, rezerwacji online, zamawiania produktów itp;
  • Umieszczanie aplikacji w dokumentach – arkuszy kalkulacyjnych, nagrań video, audio itp.

CSS
  • Określenie kolorów projektu, Fontów, układu elementów – włącznie z: nagłówkami, tekstem, zdjęciami, tabelami, listami itp;
  • Dostosowanie wyświetlania strony na różnych platformach – różne rodzaje urządzeń, tj. duże monitory, małe telefony itp;
  • Łatwiejsze utrzymanie i modyfikacje strony – pliki CSS mogą być edytowane bez edycji plików HTML;
  • Dostosowywanie stron – modyfikacja wielu podstron używając tylko jednego pliku CSS.

Budowa

HTML

HTML składa się ze ZNACZNIKÓW otaczających TREŚĆ

<znacznik> treść </znacznik>

  • Element HTML – pojedynczy komponent dokumentu html, używany do opisania konkretnej sekcji na stronie. Przykładowo: „h1” określa najważniejszy nagłówek, nagłówek pierwszego stopnia na Twojej stronie.
  • Treść – tekst, odnośniki, obrazki czy inne elementy bądź informacje wyświetlane na Twojej stronie.
  • Znacznik otwierający – element html otoczony nawiasami ostrokątnymi; wskazuje otwarcie elementu html.
  • Znacznik zamykający – zamyka element html aby oddzielić go od innych. Składnia jest podobna jak przy znaczniku otwierającym z tą różnicą, że po otwarciu nawiasu dodajemy backslash „/”.

CSS

CSS składa się z SELEKTORÓW zawierających BLOKI DEKLARACJI

{ właściwość: wartość; }

  • Selektory – określają który element HTML chcesz stylować, edytować.
  • Deklaracje – zawierają właściwość i wartość oddzieloną dwukropkiem.
  • Blok deklaracji – zawiera pojedyncze deklaracje oddzielone średnikami.
  • Właściwości – grupa z konkretnymi nazwami odpowiadająca różnym stylom i formatom.
  • Wartości – specyficzne dla poszczególnych właściwości, odpowiadają różnym stylom i formatom.


Przykład

Poniżej zamieszczono przykład strony stworzonej wyłącznie w języku HTML oraz dla porównania strona tworzona w połączeniu HTML i CSS. Strony dostępne są pod adresami:
center
Strona tworzona w języku HTML

center
STrona tworzona w języku HTML oraz CSS