Prva web stranica (koristimo VS Code)
Pažnja: kad god je to moguće koristićemo softverske olakšice prilikom pisanja programskog koda.
U daljem radu ćemo koristiti VS Code (a u njemu je već ugrađena podrška za HTML).
1. Pokrenite VS Code
Prilikom poketanja programa,
ako je neko radio nešto ranije, a nije zatvorio folder, može da se desi i
da je otvoren neki folder koji nam nije potreban ili da se otvori jedan
ili više fajlova od prethodnog korisnika.
2. Otvorite folder u kojem ćete raditi
Biramo VS Code i u njemu File -> Open Folder (kada ga odaberete vaš folder klikne se na Select Folder)
Po potrebi potvrdite da verujete da je dati folder siguran za rad 🙂
(🙂koraci 1 i 2 mogu da se izvedu odjednom - samo prevući vaš folder na ikonicu VS Code-a🙂)
3. Unutar vašeg foldera kreirati novi fajl
u levom delu, gde se vidi sadržaj vašeg foldera, klik na desni taster miša -> New File i unesita naziv fajla: zadatak.html
Time ste kreirali prazan fajl sa nazivom zadatak.html, koji se ujedno sa desne strane i otvori za dalji rad.
4. Koristite skraćenice da vam se unese ceo šablon za html:
ili ukucajte ! pa pritisnite Enter
ili ukucajte html (bez tagova) i odaberite html:5
Time ste uneli osnovni kostur fajla u verziji html 5 - i dalje radite sa tim fajlom
Kombinacijom tastera Ctrl+S sačuvajte sve što ste radili (ovo radite što češće)
5. Unutar body-ja uneti naslov, podnaslov, liniju između, kao i neku sliku
Radimo između tagova <body> i </body>:
ako samo ukucate h1 i pritisnete Enter, program će uneti i otvarajući i zatvarajući tag. Isto važi i za sve ostale html tagove
kod koji dodajemo:
<h1> Naslov </h1>
<hr>
<h2> pesmica </h2>
<p> Zima ide, ide zima <br> mali zeka bundu ima </p>
6. Sa leve strane prоzora aplikacije nalaze se sličice od kojih nas interesuje poslednja (na dnu ) - proverite koje ekstenzije su dodate. Za početak koristimo Beautify i Live Server:
Klikom na F1 pojavljuje se linija gde počinjemo da kucamo Beau... i na ponuđeni tekst Beautify treba da se klikne - da nam se kod malo bolje formatira
Ako nemate tu ekstenziju - instalirajte je
U donjem desnom delu prozora pronađite opciju Go Live - da vam se pokrene Live Server , i da možete i realnom vremenu da vidite bilo koju promenu koju ste uneli u vaš html kod.
Ako nemate ekstenziju Live Server - instalirajte je - za postavljanje ekstenzija nije potrebna admin privilegija
Najbolje bi bilo da se VS Code nalazi na levoj strani ekrana a sa desne da je browser na kojem je Live Server prikazao vašu web stranicu. Prilikom kucanja teksta u VS Code sa leve strane, u isto vreme ćete primetiti da se sve to pojavljuje i sa desne strane.
7. Na dnu vaše web stranice postavite jednu sliku
dovoljno je da kucate img i da pritisnete Enter - dobićete šablon img taga gde treba samo između navodnika za href da unesete link ka nekoj slici sa Interneta ili naziv slike koja se nalazi u istom folderu
Sada bi trebalo i da se slika pojavi na vašoj web stranici
8. Kreirati u folderu CSS fajl u kojem se jedino postavlja pozadinska boja za vašu web stranicu
Kreirati novi fajl u istom folderu pod nazivom stil.css i u njemu samo postaviti stil za pozadinsku boju:
body {
background-color: aqua;
}
9. Povezati ga sa html-om
Unutar head dela, nakon svega prethodnog, a pre taga kojim se head zatvara krenuti kucati: link
Kada se dobije predlog link:css odabrati to - automatski će se ubaciti ceo tag sa linkom ka css fajlu pa unesite ime vašeg css fajla umesto onog koje je u šablonu