1. Wprowadzenie

> Dodaj do ulubionych

Z j─Özykami HTML i CSS ka┼╝dy spotyka si─Ö na co dzie┼ä, zazwyczaj nawet nie zdaj─ůc sobie z tego sprawy. Stanowi─ů on podstaw─Ö praktycznie wszystkich stron internetowych i aplikacji sieciowych, z kt├│rych korzystamy na tabletach, laptopach, komputerach stacjonarnych oraz w smartfonach.

Bez ┼╝adnej przesady mo┼╝na powiedzie─ç, ┼╝e HTML jest j─Özykiem internetu. Bazuj─ů na nim wszystkie istniej─ůce strony internetowe i bez niego nic by nie uda┼éo nam si─Ö opublikowa─ç w ┼Ťwiatowej sieci. Ten kurs HTML i CSS nauczy Ci─Ö biegle w┼éada─ç tymi j─Özykami, aby tworzy─ç poprawne semantycznie i efektowne wizualnie strony internetowe dost─Öpne dla jak najszerszego grona odbiorc├│w.

Je┼Ťli ten kr├│tki wst─Öp zach─Öci┼é Ci─Ö do dalszego zg┼é─Öbiania tematu, to do┼é─ůcz do naszej kompanii, aby razem z nami pozna─ç technologie HTML i CSS!

Grupa żołnierzy

HTML ÔÇô j─Özyk znacznik├│w

Prosty przykład struktury dokumentu HTML

Z bardziej technicznego punktu widzenia HTML to j─Özyk znacznik├│w, z kt├│rych s─ů zbudowane strony internetowe. S┼éu┼╝y do opisu struktury strony internetowej. Bazuje na elementach (zwanych te┼╝ potocznie znacznikami, cho─ç te poj─Öcia wyra┼║nie si─Ö r├│┼╝ni─ů ÔÇô zobacz Element, znacznik, czy tag), kt├│re mog─ů mie─ç r├│┼╝ne atrybuty okre┼Ťlaj─ůce pewne cechy, wprowadzaj─ůce dodatkowe informacje i maj─ůce jeszcze par─Ö innych zastosowa┼ä, o kt├│rych b─Ödzie jeszcze mowa p├│┼║niej.

Je┼Ťli do Twojej wyobra┼║ni nie bardzo przemawiaj─ů okre┼Ťlenia typu ÔÇ×opis struktury strony internetowejÔÇŁ, to sp├│jrz na ilustracj─Ö po prawej stronie, a pewnie wiele si─Ö rozja┼Ťni.

To jest przyk┼éadowa, bardzo uproszczona struktura dokumentu. Gdyby┼Ťmy tylko wpisali tekst np. w Notatniku, a nawet w Wordzie, to przegl─ůdarka nie by┼éaby w stanie go odpowiednio zinterpretowa─ç i wy┼Ťwietli┼éaby wszystko jako jeden ci─ůg znak├│w. Dopiero oznaczenie poszczeg├│lnych cz─Ö┼Ťci odpowiednimi znacznikami (ukazanymi dla orientacji w nawiasach) sprawia, ┼╝e przegl─ůdarka ÔÇ×wieÔÇŁ, co z nimi zrobi─ç.

Skoro HTML jest j─Özykiem znacznik├│w, warto wiedzie─ç, czym w og├│le jest znacznik. Poni┼╝ej znajduj─ů si─Ö podstawowe informacje na ten temat, a w kolejnych rozdzia┼éach tego podr─Öcznika poznasz wiele znacznik├│w bardzo szczeg├│┼éowo (w HTML5 jest ich dobrze ponad 100, wi─Öc b─Ödziesz mie─ç sporo pracy).

Czym jest element HTML

Elementy HTML to cegie┼éki u┼╝ywane do budowy strony internetowej. Informuj─ů przegl─ůdark─Ö internetow─ů o tym, jak─ů funkcj─Ö w dokumencie pe┼éni dany fragment tre┼Ťci, np. akapit, sekcja, tre┼Ť─ç wpisu, nag┼é├│wek, czy nawigacja. Poni┼╝ej znajduj─ů si─Ö przyk┼éadowe elementy HTML. P├│┼║niej szczeg├│┼éowo poznasz ich budow─Ö oraz zasady ich definiowania i u┼╝ywania.

<p>To jest akapit</p>
<article>To jest tre┼Ť─ç wpisu na stronie internetowej</article>
<h1>To jest ważny nagłówek</h1>
<abbr title="Hypertext Markup Language">To jest element z atrybutem title</abbr>

Stosowanie w┼éa┼Ťciwych element├│w HTML do oznaczania sekcji tre┼Ťci strony internetowej jest wa┼╝ne z wielu powod├│w zar├│wno technicznych jak i nietechnicznych.

U┼éatwia prac─Ö nad stron─ů, poniewa┼╝ pozwala odnosi─ç si─Ö do poszczeg├│lnych cz─Ö┼Ťci podczas jej budowy w celu okre┼Ťlenia ich wygl─ůdu i po┼éo┼╝enia w oknie przegl─ůdarki.

Ponadto zwi─Öksza wygod─Ö os├│b niedowidz─ůcych, kt├│re korzystaj─ů z czytnik├│w ekranu czytaj─ůcych tekst na g┼éos. Programy te nie maj─ů takich mo┼╝liwo┼Ťci rozpoznawania tre┼Ťci jak ludzki m├│zg, wi─Öc musz─ů polega─ç na podpowiedziach podsuwanych im przez tw├│rc├│w tre┼Ťci. Rozpoznaj─ů znaczenie poszczeg├│lnych cz─Ö┼Ťci stron w┼éa┼Ťnie na podstawie semantyki element├│w.

HTML i CSS ÔÇô papu┼╝ki nieroz┼é─ůczki

Papuga

Elementy HTML okre┼Ťlaj─ů og├│ln─ů struktur─Ö strony internetowej, natomiast o ich wygl─ůdzie decyduj─ů Kaskadowe arkusze styl├│w (CSS). Ten kurs HTML pozwoli Ci zapozna─ç si─Ö tak┼╝e z t─ů technologi─ů, a na razie wystarczy wiedzie─ç, ┼╝e HTML s┼éu┼╝y do definiowania ram konstrukcyjnych strony internetowej i okre┼Ťlania znaczenia (semantyki) jej poszczeg├│lnych element├│w, natomiast CSS pozwala okre┼Ťli─ç po┼éo┼╝enie i wygl─ůd tych element├│w.

Na przyk┼éad poni┼╝szy element bez zastosowania jakichkolwiek arkuszy CSS w przegl─ůdarce internetowej wygl─ůda┼éby mniej wi─Öcej tak, jak na ilustracji poni┼╝ej.

<p>Richard Feynman urodził się 11 maja 1918 roku.</p>

Wynik: przyk┼éadowy wygl─ůd akapitu bez zastosowania jakichkolwiek styl├│w zdefiniowanych przez u┼╝ytkownika.

Wygl─ůd akapitu bez zastosowania CSS ÔÇö kurs HTML

Nic ciekawegoÔÇŽ Za pomoc─ů CSS mo┼╝emy to jednak zmieni─ç, definiuj─ůc rozmiar, po┼éo┼╝enie, kolor tekstu i dowolne inne cechy wybranego elementu. Sp├│jrz na poni┼╝szy przyk┼éadowy arkusz styl├│w CSS (nie przejmuj si─Ö, ┼╝e na razie nie bardzo go rozumiesz, to w tej chwili ma┼éo istotne):

p {
  color: red;
  font-size: 110%;
  font-style: italic;
  text-decoration: underline;
  width: 300px;
  background-color: black;
}

Teraz nasz akapit ma czcionk─Ö o kolorze czerwonym, o rozmiarze o 10% wi─Ökszym od otaczaj─ůcej tre┼Ťci, pochylon─ů i podkre┼Ťlon─ů. Dodatkowo ma szeroko┼Ť─ç 300 pikseli i czarne t┼éo. Mo┼╝e to nie wygl─ůda pi─Öknie, ale wyra┼║nie pokazuje r├│┼╝nic─Ö mi─Ödzy HTML i CSS.

Akapit po zastosowaniu CSS

Na HTML i CSS ┼Ťwiat si─Ö nie ko┼äczy

Student siedz─ůcy na kuli ziemskiej

Jak ju┼╝ wiesz, dwie podstawowe technologie u┼╝ywane do tworzenia stron internetowych to HTML i CSS. To jednak nie wszystko. Aby stworzy─ç zaawansowan─ů i profesjonaln─ů witryn─Ö internetow─ů, potrzebne s─ů jeszcze inne j─Özyki i technologie.

Aby zrozumie─ç, po co tyle tego wszystkiego, nale┼╝y zna─ç poj─Öcia frontend i backend. Frontend to widoczna cz─Ö┼Ť─ç witryny, z kt├│r─ů u┼╝ytkownik wchodzi w bezpo┼Ťredni─ů interakcj─Ö. Do najwa┼╝niejszych j─Özyk├│w u┼╝ywanych do budowy frontendu zaliczaj─ů si─Ö w┼éa┼Ťnie HTML i CSS oraz JavaScript. Z kolei backend to tzw. zaplecze serwisu, czyli wszystkie mechanizmy i programy dzia┼éaj─ůce na serwerze i nie maj─ůce bezpo┼Ťredniej styczno┼Ťci z u┼╝ytkownikiem. Do tej kategorii zalicza si─Ö bardzo wiele technologii i j─Özyk├│w programowania, np. PHP, Python, Java, Go, Perl, a nawet C++ oraz bazy danych.

Do stworzenia prostej statycznej strony internetowej wystarcz─ů HTML i CSS, ale du┼╝e serwisy zazwyczaj wykorzystuj─ů wiele r├│┼╝nych technologii. Na przyk┼éad Facebook do r├│┼╝nych cel├│w wykorzystuje m.in. j─Özyki PHP, Python, Java, Erlang, D, Haskell i C++.

Najpopularniejszym frontendowym j─Özykiem programowania jest JavaScript, natomiast backend bardzo cz─Östo implementuje si─Ö przy u┼╝yciu j─Özyka PHP.

Do czego służy JavaScript

JavaScript to obiektowy skryptowy j─Özyk programowania o szerokim zastosowaniu, kt├│ry najcz─Ö┼Ťciej jest wykorzystywany do tworzenia skrypt├│w wzbogacaj─ůcych funkcjonalno┼Ť─ç stron internetowych. Za jego pomoc─ů implementuje si─Ö na przyk┼éad mechanizmy sprawdzania poprawno┼Ťci danych w przegl─ůdarce u┼╝ytkownika (kiedy np. po klikni─Öciu przycisku zatwierdzenia formularza pojawia si─Ö okienko z informacj─ů, ┼╝e nale┼╝y wype┼éni─ç wszystkie pola, to zazwyczaj odpowiada za to w┼éa┼Ťnie skrypt JavaScript dzia┼éaj─ůcy na danej stronie). Czasami u┼╝ywa si─Ö go te┼╝ do tworzenia r├│┼╝nych efekt├│w wizualnych, np. padaj─ůcy ┼Ťnieg na niekt├│rych stronach w okresie zimowym.

Oto przyk┼éad u┼╝ycia JavaScriptu. Kiedy klikniesz poni┼╝szy przycisk, kolor tekstu znajduj─ůcego si─Ö pod nim akapitu zmieni si─Ö na zielony. Za ten efekt odpowiada w┼éa┼Ťnie skrypt JavaScript dzia┼éaj─ůcy na tej stronie.

Je┼Ťli masz ochot─Ö, to w poni┼╝szym oknie mo┼╝esz si─Ö pobawi─ç tym bardzo prostym skryptem. Na karcie HTML znajduje si─Ö kod przycisku, a na karcie JS znajdziesz funkcj─Ö JavaScript obs┼éuguj─ůc─ů klikni─Öcie tego przycisku. W kodzie JavaScript mo┼╝esz zmieni─ç kolor na inny, np. na czerwony (wpisz red zamiast green). ┼Ümia┼éo pobaw si─Ö chwil─Ö, wypr├│buj inne kolory, tylko pami─Ötaj, ┼╝e trzeba je wpisywa─ç po angielsku.

See the Pen KursHTMLR1PrzykladJS by Łukasz Piwko (@shebangpl) on CodePen.


W tym kursie nie zajmujemy si─Ö j─Özykiem JavaScript, ale je┼Ťli masz ochot─Ö go pozna─ç, to z pewno┼Ťci─ů spodoba Ci si─Ö dost─Öpny w naszym serwisie kurs JavaScript. I wszystko jasne autorstwa Marijna Haverbeke.

JavaScript to nie Java

Gro┼║ny nauczyciel

Wiele os├│b, zw┼éaszcza pocz─ůtkuj─ůcych w ┼Ťwiecie programowania i pokrewnych technologii, myli j─Özyki JavaScript i Java albo nie wie, czym si─Ö r├│┼╝ni─ů.

JavaScript to j─Özyk skryptowy, a wi─Öc, podobnie jak HTML i CSS (kt├│re, przypomn─Ö, nie s─ů jednak technicznie j─Özykami programowania), wymaga do pracy tylko edytora tekstu i przegl─ůdarki internetowej. Inaczej m├│wi─ůc, programista mo┼╝e wpisa─ç skrypt JavaScript bezpo┼Ťrednio w specjalnym elemencie script w kodzie ┼║r├│d┼éowym strony i gotowe. Ten skrypt b─Ödzie robi┼é, co ma robi─ç bez ┼╝adnych dodatkowych zabieg├│w.

Natomiast Java to wysokopoziomowy obiektowy j─Özyk programowania og├│lnego przeznaczenia, kt├│ry wymaga kompilacji kodu ┼║r├│d┼éowego do postaci tzw. kodu bajtowego. Programy w tym j─Özyku s─ů wykonywane w tzw. Maszynie wirtualnej Javy, dzi─Öki czemu mog─ů by─ç uruchamiane w dowolnym systemie operacyjnym.

Java ma bardzo wiele zastosowa┼ä, w┼Ťr├│d kt├│rych mo┼╝na wymieni─ç m.in. tworzenie aplikacji na urz─ůdzenia mobilne, np. aplikacje Androida s─ů pisane w tym j─Özyku, tworzenie oprogramowania dla system├│w wbudowanych, czy budowa aplikacji u┼╝ywanych w bran┼╝y finansowej.

Do czego służy PHP

PHP to tak┼╝e j─Özyk skryptowy, ale dzia┼éaj─ůcy po stronie serwera (backend), tzn. jego kod jest wykonywany nie w przegl─ůdarce internetowej tylko na serwerze, kt├│ry nast─Öpnie wysy┼éa wyniki do przegl─ůdarki. Najcz─Ö┼Ťciej jest wykorzystywany do tworzenia dynamicznych serwis├│w internetowych, takich jak aplikacje sieciowe czy sklepy internetowe. Jest wykorzystywany przez ponad 70% wszystkich stron internetowych na ┼Ťwiecie. Do jego konkretnych zastosowa┼ä nale┼╝y na przyk┼éad sprawdzanie czy login i has┼éo wpisane przez u┼╝ytkownika w formularzu internetowym s─ů prawid┼éowe i pasuj─ů do siebie.

Zwięzła historia języka HTML

Centraln─ů postaci─ů w historii j─Özyka HTML jest Tim Berners Lee, kt├│ry odegra┼é g┼é├│wn─ů rol─Ö zar├│wno w tworzeniu systemu WWW, jak i samego j─Özyka HTML. Pierwsza specyfikacja tego j─Özyka zawiera┼éa 22 elementy, nazywa┼éa si─Ö HTML Tags i zosta┼éa umieszczona w internecie przez Tima Bernersa-Lee w 1991 roku. Obecnie najnowsza wersja j─Özyka HTML nazywa si─Ö HTML5.2, a jej szczeg├│┼éowa dokumentacja znajduje si─Ö na stronie https://html.spec.whatwg.org/multipage/.

RokWersja
1991HTML Tags
1993HTML+
1995HTML 2
1997HTML 3
1997HTML 4
1999HTML 4.1
2014HTML5
2016HTML5.1
2017HTML5.2

Istnieje te┼╝ odmiana j─Özyka HTML o nazwie XHTML, w kt├│rej obowi─ůzuj─ů ┼Ťci┼Ťlejsze zasady zgodne z wymogami j─Özyka XML. Jednak nie jest ona ju┼╝ rozwijana.

Je┼Ťli chcesz bardziej szczeg├│┼éowo pozna─ç histori─Ö j─Özyka HTML, dowiedzie─ç si─Ö czym s─ů WHATWG i W3C oraz pozna─ç meandry powstawania zbioru technologii okre┼Ťlanych wsp├│lnym mianem HTML5, przeczytaj kurs pt. HTML5. Rzeczowo i na temat autorstwa Marka Pilgrima.

Wiesz ju┼╝, czym s─ů HTML i CSS oraz wiesz, ┼╝e s┼éu┼╝─ů do tworzenia stron internetowych. W nast─Öpnym rozdziale poznasz podstawowe narz─Ödzia niezb─Ödne do tworzenia stron internetowych. Mi┼éej zabawy!

Najpierw jednak podsumujemy zdobyte do tej pory wiadomo┼Ťci.

Podsumowanie

Sum
  • Akronim HTML pochodzi od angielskich s┼é├│w Hypertext Markup Language oznaczaj─ůcych J─Özyk znakowania hipertekstu.
  • Semantyka to dziedzina wiedzy zajmuj─ůca si─Ö znaczeniem symboli.
  • J─Özyk HTML bazuje na elementach zwanych potocznie znacznikami lub tagami.
  • HTML s┼éu┼╝y do budowy ram konstrukcyjnych strony internetowej.
  • CSS s┼éu┼╝y do okre┼Ťlania wygl─ůdu i rozmieszczenia element├│w na stronie internetowej.
  • JavaScript to j─Özyk skryptowy dzia┼éaj─ůcy w przegl─ůdarce i u┼╝ywany m.in. do obs┼éugi r├│┼╝nych zdarze┼ä, takich jak klikni─Öcie mysz─ů, na stronie internetowej.
  • PHP to j─Özyk skryptowy dzia┼éaj─ůcy po stronie serwera i u┼╝ywany m.in. do sprawdzania poprawno┼Ťci danych wprowadzonych przez u┼╝ytkownika w formularzu internetowym.
  • J─Özyk├│w JavaScript i Java opr├│cz nazwy nic nie ┼é─ůczy.
  • Technologie frontendowe to technologie bezpo┼Ťrednio wchodz─ůce w interakcj─Ö z u┼╝ytkownikiem.
  • Technologie backendowe to technologie dzia┼éaj─ůce na serwerze i nie wchodz─ůce w bezpo┼Ťredni─ů interakcj─Ö z u┼╝ytkownikiem.

  • Pionierem i wynalazc─ů og├│lno┼Ťwiatowej sieci WWW jest Tim Berners-Lee.