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

To co robi teraz jest lepsze od tego co robił pół roku temu, ale co będzie robił za pół roku będzie jeszcze lepsze niż to, co robi teraz – w każdej dziedzinie, którą się zajmuje, ponieważ jak twierdzi, jak się nie rozwija to się zwija. Uważa, że na wszystkim jesteśmy w stanie zarabiać, cokolwiek przychodzi nam do głowy, cokolwiek lubimy robić, jesteśmy w stanie mieć z tego zysk.

Artysta, autor bloga, projektant, grafik komputerowy, barista. Na codzień mieszka we Wrocławiu, prowadzi bloga BrainDesign, robi to co lubi i ma z tego frajdę. Fan pozytywnego myślenia, standupu, rozwoju osobistego oraz dobrej kawy. W wolnych chwilach łapie chwile na zdjęciach, czyta ciekawe książki, bawi się w Social Mediach, a także przegląda YouTube’a podziwiając występy sztuki Flair czy inspirujące wystąpienia z TED/TEDx’owych konferencji.

Wczytaj więcej

Dodaj komentarz

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Sprawdź także

MyPhone Prime 18×9 LTE – Testy aparatu

Podczas Festiwalu Fotografii Mobilnej YesImMobile miałem okazję testować najnowszy model m…