Jak zostać Web Developerem – od czego zacząć naukę?
Chciałbyś tworzyć strony internetowe i rozwijać się jako web developer, ale nie wiesz od czego zacząć? W tym artykule przedstawię podstawy, które pomogą ci zrozumieć jakie możliwości daje ci poszczególny język oraz w jakiej kolejności najlepiej je opanować. Nie będzie to typowy poradnik, a raczej przedstawienie zastosowania danego języku wraz z krótkim przykładem jego możliwości.
HTML
HTML to język znaczników używany do tworzenia struktury naszej strony. Zawiera on zestaw znaczników, dzięki którym możesz ułożyć elementy na stronie według własnej wizji.
Najważniejsze znaczniki HTML, które pozwolą ci zbudować stronę internetową
- <!DOCTYPE html>: Definiuje najnowszą wersję HTML, czyli HTML5
- <html> </html>: Określa początek i koniec dokumentu.
- <head> </head>: Zawiera informacje o dokumencie, takie jak tytuł, metadane, skrypty, czy arkusze stylów.
- <title> </title>: Określa tytuł dokumentu, który pojawia się w pasku tytułowym przeglądarki.
- <body></body>: Zawiera treść dokumentu, taką jak tekst, obrazy, linki, formularze, itp.
- <h1>, <h2>, …, <h6>: Określają nagłówki od najważniejszego (h1) do najmniej ważnego (h6).
- <p></p>: Definiuje paragraf tekstu.
- <a></a>: Tworzy link do innej strony lub do zasobu w Internecie.
- <img/>: Wstawia obraz do strony.
- <ul></ul>, <ol></ol>, <li></li>: Odpowiednio tworzą listę nieuporządkowaną, uporządkowaną
i elementy listy. - <div></div>: Jest używany do grupowania elementów w bloki (kontenery), co ułatwia ich stylizację za pomocą CSS.
CSS
Jednak sam HTML nie wystarczy, ponieważ strona musi też wyglądać, dlatego należy pamiętać o CSS, czyli języku stylów używanym do nadawania właściwości wybranym elementom. Dzięki CSS można kontrolować kolorystykę, rozkład, czcionki, odstępy między elementami, animacje i wiele innych aspektów wyglądu strony.
Najważniejsze właściwości CSS
- color: Określa kolor tekstu.
- font-family: Ustala rodzaj czcionki dla tekstu.
- font-size: Określa rozmiar czcionki.
- font-weight: Ustala grubość czcionki (normal, bold).
- text-align: Ustala położenie tekstu w obrębie elementu.
- margin i padding: Kontroluje marginesy i wewnętrzne odstępy.
- border: Określa styl, grubość i kolor obramowania elementu.
- background-color: Ustala kolor tła element.
- width i height: Kontroluje szerokość i wysokość elementu.
- display: Określa sposób wyświetlania elementu.
- position: Kontroluje sposób pozycjonowania elementu na stronie.
- Do pozycjonowanie elementów na stronie przyda ci się Display: Flex oraz Display:Grid.
Przykładowa strona z wykorzystaniem HTML i CSS
Znacznik link służy do podłączenia zewnętrznego arkuszu stylów. Div ma przypisane id, które jednoznacznie go identyfikuje,
a w arkuszu stylów odwołujemy się do niego poprzez #. Div ten ma również klasę, do której odwołujemy się poprzez . . Taką klasę możemy nadawać innym elementom, jeżeli mają mieć wspólny styl, a dane id może być tylko na jednym elemencie. W arkuszu stylów możemy się również odwoływać bezpośrednio do elementów, ale należy pamiętać, że będzie to styl dla każdego z nich na naszej stronie.
JavaScript
JavaScript to wszechstronny język programowania stosowany głównie do tworzenia interaktywnych i dynamicznych elementów na stronach internetowych. Jest on wykonywany przez przeglądarkę klienta. Jego największą zaletą jest możliwość manipulowania DOM (Document Object Model), czyli strukturą naszego pliku, dzięki czemu zawartość naszej strony może się dynamicznie zmieniać w zależności od tego co klient zrobi na stronie. Dodatkowo JS pozwala na obsługę zdarzeń takich jak kliknięcia, bądź najechania myszą. Jako web developer na pewno się z nim spotkasz.
Funkcję służące do manipulowania DOM
- Pobranie elementu:
- getElementById(id) – pobranie elementu za pomocą id
- getElementsByClassName(className) – pobranie elementu za pomocą klasy
- getElementsByTagName(tagName) – pobranie elementu za pomocą znacznika
- querySelector(element) – pobranie elementu za pomocą id/klasy/tagu
- Pobranie/edycja tekstu danego elementu
- innerHTML – wewnętrzna zawartość
- innerText – tekst w elemencie
- Stworzenie nowego elementu
- createElement(tagName)
- Dodawanie i usuwanie klas
- classList.add(className) – nadanie klasy
- classList.remove(className) – usunięcie klasy
- Dodanie obsługi zdarzenia
- getElementById(id).addEventListener(zdarzenie, function() {
alert(„Uwaga!”);
})
Dodanie zdarzenia do naszej strony
Do naszej strony dołączamy skrypt JS za pomocą znacznika script. Atrybut defer uruchomi skrypt dopiero, gdy wszystkie elementy się załadują, dzięki czemu unikniemy błędów podczas ładowania naszej strony. W naszym skrypcie przypisujemy element menu do stałej zmiennej menu, a następnie dodajemy do niego obsługę zdarzenia mouseover, czyli najechanie myszą.
Funkcja, która jest wywoływana przez nasze zdarzenie, zmienia kolor tła menu na czerwony.
PHP
PHP (Hypertext Preprocessor) to skryptowy język programowania, który jest stosowany do tworzenia dynamicznych stron internetowych i aplikacji webowych. Najczęściej jest używany do łączenia z bazą danych i wysłania do niej danego zapytania, co umożliwia np.: dodawanie kont do serwisu.
Obsługa bazy danych MySQL i MariaDB w PHP
- mysqli_connect(serwer, uzytkownik, haslo, nazwa_bazy) – nawiązanie połączenia z bazą.
- mysqli_close(id_polaczenia) – zamknięcie połączenia z bazą.
- mysqli_query(id_polaczenia, zapytanie) – wysłanie zapytania do bazy danych.
- mysqli_fetch_array(wynik_zapytania) – Tablica zawierająca kolejny wiersz z podanych w wyniku .zapytania lub FALSE, jeżeli nie ma więcej wierszy
w wyniku zapytania. - mysqli_num_rows(wynik_zapytania) – Liczba wierszy w podanym zapytaniu.
MySQL
MySQL to popularny system zarządzania relacyjnymi bazami danych, które pozwalają przechowywać powiązane ze sobą elementy danych. Relacyjne bazy danych są oparte na modelu relacyjnym — jest to prosty i intuicyjny sposób przedstawiania danych w tabelach. W relacyjnej bazie danych, dane są przechowywane w różnych tabelach, które są ze sobą połączone w logiczny sposób. Jako web developer możesz go nie potrzebować, ponieważ możesz zajmować się frontendem, ale i tak warto nauczyć się jego podstaw, aby wiedzieć jak to wszystko działa.
Zapytania SQL:
SELECT – pobranie rekordów z bazy.
INSERT INTO – wstawienie rekordów do tabeli.
DELETE FROM – usunięcie rekordu z tabeli.
UPDATE – edycja rekordu.
Nawiązanie połączenia z bazą danych
Nawiązujemy połączenie z serwerem, następnie sprawdzamy czy zostało ono poprawnie nawiązane. Wysyłamy przygotowane zapytanie SQL do bazy danych i dzięki pętli while i funkcji mysqli_fetch_array możemy je z łatwością wypisać na stronie. Należy również pamiętać o zamknięciu połączenia po wykonaniu wszystkich operacji.
Brzmi ciekawie?
A to tylko podstawy. Tworzenie stron internetowych jest bez wątpienia przyjemnym zajęciem, którego warto się nauczyć, ponieważ daje to również wiele możliwości w karierze zawodowej jako web developer. Nawet jeśli po czasie stwierdzisz, że to nie dla ciebie, to ten czas i tak nie będzie zmarnowany, ponieważ podczas programowania rozwijasz też swoją kreatywność oraz logiczne myślenie. Jeśli chciałbyś spróbować, a nie wiesz jak zacząć to możesz przejrzeć naszą ofertę, która zawiera szkolenia oraz kursy z zakresu web developingu.
Chciałbyś dowiedzieć się jak stworzyć stronę bez znajomości programowania? Sprawdź systemy CMS