Za ubuduće: 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 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

 u VS Code sa File -> Open Folder i kada ga odaberete Select Folder)

Po potrebi potvrdite da verujete da je dati folder siguran za rad

3. Unutar vašeg foldera kreirajte 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 ulesete link ka nekoj slici sa Interneta ili naziv slike koja se nalazi u istom folderu

Ovom 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 yatvara 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

Poslednja izmena: среда, 18. јануар 2023, 18:13