Czas zacząć pierwszy artykuł z serii „kurs HTML dla zielonych”.

Czy nie zastanawiało Cię jak powstają te wszystkie strony internetowe, które odwiedzasz każdego dnia?

Jeśli nigdy nie miałeś z tym do czynienia, pewnie powiesz, że to setki linijek skomplikowanego kodu, którego nikt nie rozumie? Na szczęście jest kompletnie na odwrót.

W tym artykule – jako wstęp do całej przygody z tworzeniem stron internetowych – przedstawię Ci podstawową wiedzę na temat HTML5.

Język HTML jest obecny na każdej stronie, więc myślę, że warto nauczyć się chociaż jego podstaw. Wiele osób twierdzi, że samo programowanie pomaga nauczyć się logicznego myślenia i rozwiązywania problemów, a umiejętności techniczne są coraz bardziej przydatne przy pracy z komputerami.

Zobacz też: jak nauczyć się programować?

Cały ten mini kurs HTML zorganizowałem tak, byś dowiedział się jak nauczyć się tego języka, jak zacząć będąc początkującym oraz byś poznał podstawowe znaczniki, które pozwolą Ci na tworzenie i modyfikowanie stron internetowych.

Kurs HTML dla Zielonych 1

​Chcesz ​nauczyć ​się ​czegoś ​nowego?​

​Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron i aplikacji ​- kursy dla początkujących i zaawansowanych

Czym jest język HTML?

Z definicji jest to „hipertekstowy język znaczników” wykorzystywany do tworzenia stron internetowych.

Nie jest to jednak język programowania, bo nie posiada żadnych zaawansowanych funkcji, takich jak operatory, zmienne, instrukcje warunkowe itd., więc można się go nauczyć w całkiem krótkim czasie. Myślę, że na podstawy wystarczy od kilku godzin do kilku dni.

Najprościej HTML można wytłumaczyć jako sposób opisywania strony, ponieważ w samym kodzie wygląda to tak, że znaczniki umieszczamy w odpowiedniej kolejności, a chwilę potem widzimy już rezultaty.

 

Czy trudno nauczyć się HTML?

HTML jest bardzo prosty do opanowania, nawet dla początkujących, między innymi dlatego, że nie posiada żadnych bardziej skomplikowanych struktur.

Myślę, że w ciągu kilku godzin jesteś w stanie poznać go na tyle, by stworzenie prostej strony internetowej nie było dla Ciebie kłopotem.

Oczywiście do dokumentu HTML możemy też dołączać inne pliki, takie jak style CSS czy skrypty JavaScript (na przykład okienko popup w JavaScript).

Tutaj warto dodać, że podczas tworzenia strony stosuje się pewną regułę, która mówi o oddzielaniu treści strony od jej wyglądu. Treścią strony jest wszystko napisane w HTML, natomiast za wygląd odpowiadają style CSS – nie warto mieszać tych 2 technologii, bo zazwyczaj wychodzi z tego bałagan.

Jak zacząć naukę języka HTML?

Praktycznie każdy kurs HTML wspomina o tym, że warto korzystać z dobrego edytora kodu.

Czasy tworzenia stron w Notatniku już dawno się skończyły i aktualnie mamy dostęp do wielu ciekawych narzędzi, które bardzo przyspieszają pracę i sprawiają, że jest po prostu przyjemnością.

Poniżej przedstawiam listę narzędzi, z których możesz korzystać przy tworzeniu stron, nie tylko w tym kursie:

  • Edytor Brackets – darmowy i często aktualizowany edytor (co około 2 tygodnie) stworzony w JavaScript, HTML5 i CSS3. Podświetla składnię, posiada wbudowany tryb podglądu na żywo, masę dodatków i motywów graficznych. Korzystam z niego i polecam – myślę, że na początek będzie świetnym wyborem.
  • Sublime Text 3 – płatny edytor dostępny na Windowsa, Linuxa oraz Mac OS X. Podobnie jak Brackets posiada dużo dodatków i motywów, i według mnie pracuje się w nim wygodniej. Posiada funkcje, które dopiero pojawiają się w darmowym Bracketsie.
  • Notepad++ – darmowy i szybki edytor, często aktualizowany,  z którego korzystałem przez jakiś czas. Obsługuje wiele języków i ma prosty w obsłudze interfejs. Jest dostępna wersja portable – bez instalacji.
  • Adobe Dreamweaver – płatne, profesjonalne narzędzie od Adobe, czyli twórców Photoshopa. Posiada rozbudowane opcje tworzenia stron oraz tryb WYSIWYG, czyli tworzenie strony na żywo. Dostępny dla Windowsa oraz Maca.


Następnym ważnym elementem jest przeglądarka.
Wybierz jedno z tych 3 czołowych narzędzi, a praca z kodem będzie czystą przyjemnością:

  • Firefox – najpopularniejsza przeglądarka w Polsce. Ma wbudowany menadżer pobierania plików i całą masę rozszerzeń i motywów graficznych.
  • Chrome – szybka i lekka przeglądarka od Google, posiada prosty w obsłudze interfejs. Zobacz też Chromium, czyli przeglądarkę, na bazie której powstaje Google Chrome.
  • Opera – jedna z najpopularniejszych przeglądarek. Ostatnie aktualizacje przyniosły zmianę silnika na Webkit, czyli rozwiązanie stosowane m.in. w Google Chrome.


Wszystkie te przeglądarki posiadają dodatki, więc w miarę potrzeb można rozszerzyć ich funkcjonalność. W tym momencie nie potrzebujesz już niczego więcej, jeśli chodzi o narzędzia do rozpoczęcia pracy ze stronami.

Teraz czas na praktykę. Sama wiedza niestety tutaj nie wystarczy – musisz działać, by nabyć doświadczenia.

Przejdź do kolejnej części kursu, by poznać podstawowe znaczniki HTML

Kurs HTML dla Zielonych 1

​Chcesz ​nauczyć ​się ​czegoś ​nowego?​

​Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron i aplikacji ​- kursy dla początkujących i zaawansowanych

Jakub Jurkian

Pracuję jako Front End Developer w Londynie. Od ponad 11 lat jestem programistą-pasjonatem, a strony (i wszystko co z nimi związane) tworzę od 6 lat. Jestem też autorem kursów wideo - od 2013 roku prowadzę kanał na YouTube i tego bloga. Zaczynałem od pisania artykułów dla jednego z czołowych polskich portali IT - benchmark.pl. Prywatnie od 10 lat jestem związany z kulturą hip-hop (głównie taniec breakdance).

  • Witam,
    mam pytanie, jak zrobić żeby Brackets otwierał również strony w innym niż utf-8 systemie kodowania?
    Pozdrawiam,

  • >