+48 530 588 622

Czym jest HTML i CSS?

W ┼Ťwiecie informatyki do tworzenia program├│w u┼╝ywa si─Ö j─Özyk├│w programowania. Aby stworzy─ç stron─Ö internetow─ů wykorzystuje si─Ö g┼é├│wnie j─Özyk znacznik├│w HTML oraz arkusz styli CSS i to w┼éa┼Ťnie one b─Öd─ů tematem tego wpisu.

HTML ÔÇô podstawa stron internetowych

HTML to z j─Özyka angielskiego HyperText Markup Language, co w dos┼éownym t┼éumaczeniu znaczy hipertekstowy j─Özyk znacznik├│w. Sk┼éada si─Ö on ze znacznik├│w do kt├│rych wpisujemy r├│┼╝ne informacje i dzi─Öki nim tworzymy struktur─Ö dokumentu HTML. S─ů one podstaw─ů przy budowaniu strony internetowej. Dzi─Öki nim mo┼╝emy dodawa─ç na witryn─Ö akapity, hiper┼é─ůcza, nag┼é├│wki, pliki graficzne, formularze i wiele innych. S┼éu┼╝─ů r├│wnie┼╝ do budowania czego┼Ť w rodzaju szkieletu strony, poprzez w┼éa┼Ťciwe interpretowanie ich przez przegl─ůdark─Ö.

Znaczniki w HTML umieszczane s─ů pomi─Ödzy znakami mniejszo┼Ťci oraz wi─Ökszo┼Ťci a tak z┼éo┼╝ony znacznik nazywany jest tagiem. Warto zauwa┼╝y─ç, ┼╝e nie ka┼╝dy znacznik musi zosta─ç zamkni─Öty. Gdy w ┼Ťrodku umie┼Ťcimy jaki┼Ť tekst, zostanie on odpowiednio zinterpretowany i wy┼Ťwietlony w spos├│b zale┼╝ny od znacznika w kt├│rym si─Ö znajduj─Ö. Tagi nie s─ů wy┼Ťwietlane przez przegl─ůdarki s┼éu┼╝─ů tylko do interpretacji ich zawarto┼Ťci i wygl─ůda to mniej wi─Öcej tak:

Tekst w  języku HTML
Lorem ipsum <strong>dolor</strong> sit amet, <i>consectetur</i> adipiscing elit.

Tekst wy┼Ťwietlony przez przegl─ůdark─Ö:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Jak wida─ç powy┼╝ej, znaczniki zosta┼éy otwarte a nast─Öpnie zamkni─Öte, a tekst pomi─Ödzy nimi zosta┼é inaczej wy┼Ťwietlony.

Niekt├│re znaczniki, mog─ů posiada─ç w┼éasne atrybuty, w kt├│rych mo┼╝emy zawrze─ç unikalne warto┼Ťci takie jak klasy czy identyfikator, z kolei te mo┼╝na wykorzysta─ç po po┼é─ůczeniu plik├│w HTML z arkuszami ┬ástyl├│w CSS lub skryptami JavaScript. Taki uk┼éad daje nam wi─Öksze mo┼╝liwo┼Ťci w tworzeniu wygl─ůdu i funkcjonalno┼Ťci strony.

Standard HTML od lat 90ÔÇÖ jest rozwijany przez W3C oraz WHATWG a obecna wersja j─Özyka to ta z numerkiem 5.

Setki realizacji, tysi─ůce rozwi─ůzanych problem├│w

Skontaktuj si─Ö ju┼╝ teraz!

Co to jest CSS?

CSS (ang. Cascading Style Sheets), czyli kaskadowe arkusze styl├│w. Jest u┼╝ywany do formatowania element├│w HTML. M├│wi─ůc wprost, definiujemy w nim wygl─ůd strony. Pisze si─Ö tam w┼éasno┼Ťci styl├│w, kt├│re formatuj─ů klasy i s─ů przypisane znacznikom. Dzi─Öki temu jeste┼Ťmy w stanie bezpo┼Ťrednio odnie┼Ť─ç si─Ö do danego elementu i zmieni─ç jego kolor, wielko┼Ť─ç, po┼éo┼╝enie, efekty i wiele innych rzeczy zwi─ůzanych z wygl─ůdem. Wszystkie w┼éasno┼Ťci musz─ů by─ç zgodne ze standardami j─Özyka i znajdowa─ç si─Ö w selektorach.

Technologia ta zosta┼éa stworzona by oddzieli─ç struktur─Ö dokumentu HTML od formy wygl─ůdu strony. ┬áU┼éatwia to tak┼╝e prac─Ö developerom, tworz─ůcym strony. Jednak┼╝e, istnieje mo┼╝liwo┼Ť─ç wplecenia w┼éasno┼Ťci CSS wprost do kodu HTML. Celem takiego zabiegu jest przyspieszenie ┼éadowania si─Ö strony.

Za pomoc─ů jednego arkusza styl├│w mo┼╝emy zmienia─ç wygl─ůd wielu dokument├│w HTML, co na pewno u┼éatwi zarz─ůdzanie plikami oraz wprowadzanie kolejnych zmian wizualnych na stron─Ö. Jedna klasa tak┼╝e mo┼╝e by─ç przypisana do wielu element├│w co na pewno zredukuje wielko┼Ť─ç pliku oraz poziom skomplikowania kodu.

Obecnie CSS jest obs┼éugiwany przez wszystkie przegl─ůdarki i jest ju┼╝ u┼╝ywany jako standard w procesie tworzenia stron. Jednak┼╝e, niekt├│re przegl─ůdarki nie obs┼éuguj─ů wszystkich w┼éasno┼Ťci j─Özyka, poniewa┼╝ tw├│rcy ci─ůgle wprowadzaj─ů nowe funkcjonalno┼Ťci.

Arkusze styl├│w pomagaj─ů r├│wnie┼╝ renderowa─ç witryny na urz─ůdzeniach o poszczeg├│lnych szeroko┼Ťciach, co pozwala na wczytanie innych styl├│w na telefonie i komputerze. Dzi─Öki temu nie istnieje konieczno┼Ť─ç tworzenia osobnych stron na r├│┼╝ne urz─ůdzenia.

Aktualnie w internecie istnieje wiele bibliotek CSS z gotowymi rozwi─ůzaniami i stylami. Jedn─ů z najbardziej popularnych jest Bootstrap, kt├│ry u┼éatwia prac─Ö dodaj─ůc wiele gotowych klas.

Dzi─Öki temu nie jeste┼Ťmy zmuszeni do pisania wielu w┼éasnych klas. Jednak z drugiej strony, du┼╝a obj─Öto┼Ť─ç tego frameworku mo┼╝e powodowa─ç, ┼╝e nie b─Ödziemy w ca┼éo┼Ťci z niego korzysta─ç, co z kolei mo┼╝e wp┼éyn─ů─ç na optymalizacj─Ö strony.

Kolejn─ů ciekaw─ů rzecz─ů u┼éatwiaj─ůc─ů prace z arkuszami styl├│w s─ů preprocesory. LESS, czy SASS to niekt├│re z nich.

┬áDzia┼éaj─ů one na zasadzie kompilacji wielu plik├│w sk┼éadowych, na jeden ÔÇ×czystyÔÇŁ plik CSS. Korzy┼Ťci w pisaniu z pomoc─ů tych narz─Ödzi jest wiele. Jedn─ů z nich jest korzystanie ze zmiennych, co pozwoli nam na poprawienie czytelno┼Ťci i ┼éatwo┼Ťci edycji kodu. W wynikowym pliku, kompilator ju┼╝ nie zastosuje zmiennych, wi─Öc nie musimy si─Ö tym przejmowa─ç. Technologia ta pozwala tak┼╝e zagnie┼╝d┼╝a─ç selektory, tworzy─ç funkcje, p─Ötle czy instrukcje co jest bardzo pomocne.

Skontaktuj si─Ö ju┼╝ teraz!

Wystarczy, ┼╝e wype┼énisz poni┼╝szy formularz, a z przyjemno┼Ťci─ů Ci pomo┼╝emy!



    Wysy┼éaj─ůc wiadomo┼Ť─ç wyra┼╝asz zgod─Ö na przetwarzanie swoich danych osobowych zgodnie z RODO (Rozporz─ůdzenie 2016/679) przez administratora danych Rekurencja.com Sp. z o.o. (NIP: 5472217092) celem przygotowania oferty. Wi─Öcej informacji znajdziesz w naszej polityce prywatno┼Ťci


    Struktura plik├│w strony internetowej

    Z racji tego, ┼╝e strony internetowe s─ů coraz wi─Öksze i rozbudowane, grupowanie plik├│w jest niezb─Ödne. Opr├│cz plik├│w HTML i CSS wyst─Öpuje tak┼╝e wiele innych typ├│w jak te zwi─ůzane z preprocesorami, czy pliki multimedi├│w a nawet te w innym j─Özyku programowania. Pliki te umieszcza si─Ö w osobnych folderach, co pozwala utrzyma─ç porz─ůdek w strukturze. Nale┼╝y pami─Öta─ç, ┼╝e odnosz─ůc si─Ö do innych plik├│w trzeba doda─ç ich poprawn─ů ┼Ťcie┼╝k─Ö by zosta┼éy poprawnie wczytane. Istniej─ů dobre praktyki i standardy zwi─ůzane z tym tematem.

    Wczytywanie plik├│w na urz─ůdzenie

    Wszystkie pliki strony internetowej znajduj─ů si─Ö na serwerze, kt├│ry ca┼éy czas dzia┼éa i czeka na po┼é─ůczenie. My jako klienci, ┼é─ůczymy si─Ö z nim i dostajemy odpowied┼║ w formie wizualnej prezentacji plik├│w m.in. HTML i CSS. Wszystko to dzieje si─Ö dzi─Öki protoko┼éowi HTTP, obs┼éuguje on po┼é─ůczenie klient-serwer.

    Klient gdy wpisze adres strony internetowej w przegl─ůdarce, wysy┼éa ┼╝─ůdanie na serwer, kt├│re jest obs┼éugiwane przez protok├│┼é HTTP, a ten odpowiada wysy┼éaj─ůc odpowiednie pliki r├│wnie┼╝ poprzez ten sam protok├│┼é. Po stronie klienta, przegl─ůdarki s─ů odpowiedzialne za komunikacj─Ö z serwerem i dzi─Öki nim widzimy poprawnie zinterpretowany kod. Natomiast po stronie serwera dzia┼éaj─ů serwery WWW, kt├│re odpowiadaj─ů za odes┼éanie odpowiednich plik├│w. Najpopularniejszymi z nich s─ů Apache oraz Microsoft IIS.

    ÔÇőRenderowanie HMTL i CSS przez przegl─ůdark─Ö

    Proces ten mo┼╝e odbywa─ç si─Ö po stronie serwera (server-side), wtedy dostarczane s─ů nam gotowe dane do wy┼Ťwietlenia a my nie potrzebujemy specjalnego oprogramowania. Drug─ů mo┼╝liwo┼Ťci─ů jest tworzenie struktury po stronie klienta (client-side), gdzie dane s─ů przetwarzane na urz─ůdzeniu u┼╝ytkownika. W przypadku stron internetowych, serwer tylko przechowuje i wysy┼éa jej kod do klienta, kt├│ry z pomoc─ů przegl─ůdarki interpretuje j─ů i renderuje.

    Przegl─ůdarka etapami przygotowuje nam obraz do wy┼Ťwietlenia. Na samym pocz─ůtku przetwarza znaczniki HTML i CSS, tworz─ůc osobne drzewa renderowania. Nast─Öpnie ┼é─ůczy je w jedno i wyznacza uk┼éad strony na jego podstawie. Wyst─Öpuj─ů przypadki gdzie w┼éasno┼Ťci CSS s─ů wpisane w kod HTML, wtedy przegl─ůdarka nie pobiera i nie przetwarza osobnych plik├│w CSS. Ten spos├│b mo┼╝e poprawi─ç czas ┼éadowania. Na sam koniec odwzorowuje ca┼éy model a my widzimy efekt kt├│rego oczekiwali┼Ťmy.

    Arkusz CSS jest zasobem, kt├│ry blokuje renderowanie dokumentu HTML. Przegl─ůdarka gdy widzi, ┼╝e do dokumentu za┼é─ůczony jest plik ze stylami, wstrzymuje tworzenie widoku i czeka a┼╝ dany plik pobierze si─Ö i dopiero wtedy ┼éadowana jest ca┼éo┼Ť─ç. Dlatego stosuje si─Ö wiele technik przyspieszaj─ůcych dostarczania arkusza CSS co skraca czas ┼éadowania strony.

    Podsumowanie

    Strony internetowe w g┼é├│wnej mierze s─ů oparte na tych dw├│ch technologiach i bez ich znajomo┼Ťci nie zbudujemy ┼╝adnej witryny. Mimo swojej d┼éugiej historii, nadal s─ů aktualne. J─Özyki te s─ů na bie┼╝─ůco wspierane i rozwijane. Jeste┼Ťmy pewnie, ┼╝e jeszcze d┼éugo si─Ö to nie zmieni.

    0 0 vote
    Article Rating
    0
    Would love your thoughts, please comment.x
    ()
    x