Czym jest HTML i CSS?
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!
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.