html css podstawowe różnice

HTML oraz CSS to podstawowe języki programowania, służące do tworzenia stron internetowych i aplikacji webowych. Czy wiesz czym się różnią od siebie?

Często można usłyszeć, że ktoś programuje w „hateemelu” albo w „ceesesie”. Mogłoby się wydawać po usłyszeniu takiego hasła, że można nauczyć się jednego z języków – HTML lub CSS i dzięki temu będziemy potrafili tworzyć strony. Rzeczywistość jest jednak inna – oba te języki są potrzebne aby stworzyć sprawnie funkcjonującą stronę internetową.

Podstawową różnicą obu języków jest to, że HTML jest odpowiedzialny za strukturę strony, treści czy zdjęcia umieszczane na niej, natomiast CSS odpowiedzialny jest za prawidłowe wyświetlanie się strony na różnych urządzeniach (komputer, tablet, telefon), za stronę wizualną naszej strony, za użyte na stronie kroje pisma.


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

 

! Możesz użyć kodu CSS w pliku HTML, ale nie możesz użyć kodu HTML w pliku CSS !

 


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.

 


Przykłady

HTML składa się ze ZNACZNIKÓW otaczających TREŚĆ
<znacznik> treść </znacznik>

<h1> To jest nagłówek pierwszego stopnia </h1>

 

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 składa się z SELEKTORÓW zawierających BLOKI DEKLARACJI
{ właściwość: wartość; }

h1 {color: blue; font-size: 12px;}

 

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.

 


Źródło: Coding Dojo

Wczytaj więcej
Wczytaj więcej wpisów autora Wierzchu
  • blog Za Darmo

    Blog za darmo, czyli publikacje bez kosztów

    Wiele osób często zastanawia się, czy jest możliwe prowadzenie bloga bez ponoszenia dodatk…
  • landing page

    Landing Page – Co to takiego?

    Landing Page to ostatnimi czasy w internecie bardzo popularne hasło, szczególnie wśród mar…
Wczytaj więcej w Tworzenie Stron WWW

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Sprawdź także

Blog za darmo, czyli publikacje bez kosztów

Wiele osób często zastanawia się, czy jest możliwe prowadzenie bloga bez ponoszenia dodatk…