Cześć!
W tym artykule postaram się wam przybliżyć, czym właściwie jest HTML, CSS i JavaScript.
1. HTML
Html to skrót od HiperText Markup Language. To tak naprawdę nie jest język programowania, ale język kodowania. Ma za zadanie zbudować całą strukturę Interfejsu aplikacji. Za pomocą takich znaczników jak <div> czy <p> definiuje, jak ma wyglądać drzewo DOM, czyli struktura wszystkich elementów na stronie.
2. CSS
CSS to skrót od Cascading Style Sheets, czyli tworzy style danych elementów. Pozwala nam wystylizować dane elementy html tak, by wyglądały bardziej ludzko 🙂 Podobnie jak html, jest to język kodowania, choć całkiem przyjemny i prosty. Do czego go można użyć? Na przykład do zmiany koloru tła, dodania obrazka w backgroundzie czy zaokrąglenia boków diva na stronie internetowej.
3. JavaScript
Jest to język programowania skryptowego, który umożliwia nam interakcję pomiędzy elementami html, pozwala nimi manipulować w dowolny sposób. Służy nie tylko do budowania interakcji na stronie, ale i również do testowania, a także ma wiele więcej praktycznych zastosowań.
Wartościowy kurs z języka JavaScript znajdziesz pod linkiem: https://www.udemy.com/course/javascript-typescript-w-praktyce/?referralCode=E4DE403E0696CADC8556
4. Podstawy w praktyce
Aby zbudować aplikację, pierwsze co robimy to budowanie drzewa DOM w html. Wiadomo, że gdy budujemy dom, najpierw muszą powstać fundamenty i szkielet 😉 Więc przystępujemy do tworzenia naszego ‘szkieletu’:
| <!DOCTYPE html> <html> <head> <title>Moja strona</title> <link rel=”stylesheet” type=”text/css” href=”styles.css”> </head> <body> <h1>Witaj na mojej stronie!</h1> <p>To jest przykładowy paragraf.</p> <script src=”script.js”></script> </body> </html> |
Jak zauważyliście, mamy już w tym szkielecie podpięty CSS i JavaScript. Ale zanim przejdziemy do bardziej skomplikowanej rzeczy, pokażmy, jak wyglądają CSSy dla tej naszej małej aplikacji:
| h1 { color: blue; } p { font-size: 18px; } |
h1 to nagłówek strony, natomiast p to paragraph. W tym przypadku kolor czcionki na h1 zmieniliśmy na niebieski, a rozmiar czcionki na p: 18px.
A teraz najprzyjemniejsza rzecz! (przynajmniej wg. mnie 😉):
Kod js dla tej aplikacji będzie wyglądał tak:
| var header = document.querySelector(‘h1’); header.addEventListener(‘click’, function() { header.style.color = ‘red’; }); |
To jest kod, który w przypadku kliknięcia na h1, zmieni to kolor na czerwony.
Są to tylko podstawy, ale warto się ich nauczyć. Więcej możesz się dowiedzieć z naszych artykułów na stronie, lub wykorzystać do nauki darmowe zasoby takie jak: https://www.w3schools.com/css/ (dla CSS), https://www.w3schools.com/html/default.asp (dla html) czy https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide (dla JavaScriptu).
