SpletnaStran.md

Spletna stran - Navodila za nalogo izdelave spletne strani

Naloga je sestavljena iz 4 korakov:

1. premisli, kaj bo vsebina spletne strani
2. orodja in programski jeziki za izdelavo strani
3. oblikovanje
4. javna objava strani na svetovnem spletu

1. Vsebina

Najprej si pripravi vsebino, o kateri želiš pisati. Razmisli o glavnih poudarkih, ki jih želiš predstaviti.

Vsebina je običajno predstavljena v treh sklopih:

• glava strani (kakšna velika slika, slogan),
• osrednja vsebina (besedilo in manjše slike) in
• noga strani (tvoj kontakt, vizitka, osebni opis, povezave na tvoje družbene profile ...).

Glava strani

Primer glave strani:

• naslov, npr. "Mojster Miha", "Domači recepti", "Gasilsko društvo Straža" ...
• slogan oz. en stavkek, lahko je čisto kratek, v katerem je razloženo, kaj je bistvo te spletne strani. Recimo "najboljši recept za kruh", ali "moje motokros tekme" ipd.
• naslovna slika - za boljši vtis jo lahko postaviš čez cel zaslon in v ozadje - pod besedilo

Naslov, slogan in sliko poskušaj oblikovati čez celo stran. Izberi neko barvo za ozadje, pazi, da bo besedilo berljivo (da bo dovolj velika razlika med barvo ozadja in barvo besedila).

V glavo strani se običajno vstavi tudi navigacija (povezave do podstrani ali do poglavja nižje na strani). Razišči tudi, kako narediti navigacijo tako, da je prilepljena na zgornji rob zaslona in ves čas pomikanja po strani vidna na zaslonu.

Osrednja vsebina

Preostala vsebina naj bo urejena z naslovi, podnaslovi in navadnim besedilom. Uporabi vse možnosti oblikovanja in zgradbe besedila, ker je tako vsebina bolj pregledna in spletni iskalniki tako bolje razumejo, kaj se na strani nahaja.

Različna poglavja na strani oblikovno loči: lahko s presledkom, sliko, črto, barvo ozadja ...

Noga strani

Stran zaključi z nogo, v kateri so običajno podatki o avtorju in kontakt, povezave na druge strani. Noga naj bo oblikovno ločena od vsebine, recimo z nekim večjim presledkom in drugačno obliko pisave ali ozadja.

2. Orodja in tehnologija

Razišči osnove spletnih tehnologij:

• HTML (zgradba strani)
• CSS (slog in oblikovanje)
• Javascript (izvajanje programov)

Uporabi Youtube, Google ipd. Nekaj povezav za v pomoč:

• kaj je HTML
• kaj je CSS
• kako deluje Javascript - Vzemi si dovolj časa in poskušaj dobro razumeti vse kar piše. Ne preskakuj nalog. Če česa ne razumeš. Raje se vrni in še enkrat preberi, ali pa vprašaj.

Če zgoraj našteto že poznaš, si poglej še osnove tehnologije Git, ki jo boš potreboval za javno objavo svoje kode in spletne strani.

Za urejanje kode uporabi urejevalnik VSCode.

3. Oblika in urejanje spletne strani

Izvorna koda spletne strani se piše v jeziku HTML. Značilno za HTML je uporaba značk (H1, H2, H3, P ...), ki označujejo, za kakšen element spletne strani gre (naslov, besedilo, slika ...). Elementi že imajo neko osnovno obliko, dodatno vizualno oblikovanje pa se elementom lahko doda z uporabo spletnih slogov (po angl. style) oz. s kratico CSS (bolj napreden dizajn lahko dosežeš samo z uporabo CSS-ja, za osnovni izgled pa CSS ni potreben).

HTML

Začetna datoteka spletne strani se mora obvezno imenovati index.html. Če bo tvoja spletna stran vsebovala več podstrani, lahko ostale datoteke poimenuješ kakor želiš.

Slike lahko shraniš skupaj na eno mesto v mapo npr. slike, slog strani pa datoteko styles.css.

Poskušaj sam napisati celotno HTML datoteko in ne kopirati že narejenih strani. Pravila se nauči s poskušanjem in analiziranjem kode drugih strani.

Za lažji začetek pri prisanju spletne strani, si poglej orodja za pisanje HTML, ki jih vsebuje VS Code.

Za vpogled v kodo spletnih strani uporabi "Razvijalska orodja", ki so del vsakega spletnega brskalnika: https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools

Pravilnost kode svoje spletne strani ves čas preverjaj z orodjem W3 Validator.

CSS

Oblika brez uporabe CSS

Če se odločiš za drugo varianto (brez pisanja CSS-ja), lahko lep izgled spletne strani dosežeš z uporabo že pripravljene CSS zbirke. Ena takih knjižnic je Wind. Še več takih knjižnic lahko najdeš na seznamu strani CSS-Tricks.

Za inštalacijo Wind-a v svojo spletno stran, vpiši znotraj <head> značke spodnjo kodo. Ta <link ... koda iz internetnega strežnika ob vsakem ogledu strani naloži dizajn.

<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css">

<!-- ... nadaljevanje spletne strani -->

Oblika z uporabo CSS

Za osnovno razumevanje, kaj je CSS, si preberi uvod na spletni strani CSS Introduction.

Sloge definiraj v glavi strani <head> znotraj značke <style> ... tu piši sloge ... </style>.

Za poimenovanje slogov uporabljaj class način pisanja. Glej primer, kjer je uporabljen class slogan:

<head>
<!-- v glavi strani definiraj ime class-a in določi, kako naj izgleda -->
  <style>
    .slogan { font-size: 24px }
  </style>
</head>

<!-- v vsebini strani uporabi class na HTML znački, ki jo želiš oblikovat -->
<body>
  <p class="slogan">Najboljši recept za kruh</p>
</body>

Oblika z uporabo že narejenih CSS class-knjižnic

Ko se naučiš uporabljati CSS in kako deluje, lahko pohitriš oblikovanje z uvozom knjižnic, ki že imajo definiranih mnogo class-ov, s katerimi lahko zelo hitro oblikuješ zapletene oblikovne postavitve spletne strani.

Nekaj popularnih CSS knjižnic:

• https://getbootstrap.com/
• https://tailwindcss.com/
• https://bulma.io
• https://milligram.io
• https://materializecss.com/

Navodila za uporabo so na povezavah.

Slike

Slike, ki jih želiš prikazati na svoji spletni strani, lahko naložiš v mapo, kjer je shranjena spletna stran (ne pozabi jih potem tudi naložiti na strežnik).

Lahko pa tudi uporabiš slike, ki so jih že drugi objavili na internetu in jih preko povezave vstaviš v svojo stran.

Pazi, ali imaš dovoljenje za uporabo slik, ki jih objavljaš na internetu, ker ni dovoljeno kopirati čisto vsake vsebine.

Dober vir za lepe slike, ki je dovoljeno uporabljati, je stran https://unsplash.com/

Ko vstavljaš slike v spletno stran, pazi na:

1. velikost datoteke: ta mora biti čim manjša - velike slike čez cel zaslon naj ne bodo večje od 1MB, manjše slike v besedilu pa naj bodo okoli 0.1MB

2. dimenzija slike: slika se meri v dimenziji pixel (oz. ena pika) - sliko vstavljena v spletno stran je običajno potrebno pripraviti z grafičnim programom, tako da se ji popravi dimenzije na točno tako velikost, kot najbolje ustreza dizajnu. Slike za ozadje so lahko večjih dimenzij, recimo 1920px širine, slike v besedilu so običajno manjše, recimo 400pxširine.

   Opomba: sliko v znački img lahko tudi prisiliš, da se prikaže v dimenziji, ki ni točno taka, kot je originalna velikost slike. Primer: imaš sliko širine 1920px, v HTML pa jo vstaviš kot <img width="960"... V tem primeru pride do popačenja izgleda. Ta način uporabi samo kadar sliki vsiliš manjše dimenzije, kot je njen original.

Za grafično pripravo slike uporabi programe za obdelavo slik, kot je recimo profesionalni program Adobe Photoshop, ali brezplačni Gimp. Lahko tudi uporabiš spletne aplikacije za urejanje fotografij, kot je recimo photopea.

Nekaj dodatnih nalog

1. stran naj ima navigacijo, vse povezave v navigaciji naj bodo lepo razporejene ena zraven druge, od leve proti desni (Namig: v HTML boš moral uporabit značke UL in LI), za pomoč glej primer: https://www.w3schools.com/bootstrap5/bootstrap_navbar.php
2. v navigacijo dodaj scrollspy, kaj to pomeni in kako to narediš, si poglej na https://www.w3schools.com/bootstrap5/bootstrap_scrollspy.php
3. v ... dodaj skrite elemente <meta ... /> ki se uporabljajo za šeranje na facebook.
4. V navigacijo (na desno stran) dodaj stikalo za preklop teme (svetla/temna) tako kot je narejen primer na tej profesionalni temi https://silicon.createx.studio/

4. Objava na internetu

Za javno objavo spletne strani potrebuješ prostor na nekem strežniku. Najlažje je za preproste spletne strani tak prostor najti pri brezplačnem ponudniku Netlify. Lahko pa uporabiš tudi druge.

Preprost način z Netlify

• ustvari svoj profil na Netlify
• sledi navodilom za objavo spletne strani (uporabi način prenosa datotek)
• datoteko index.html ter ostale datoteke svoje spletne strani skopiraj na Netlify in počakaj, da bo stran pripravljena
• spletna stran je na voljo na izpisanem URL naslovu

Naprednejši način z objavo kode na GitHub in objavo strani na GitHub Pages

Spletno stran lahko tu

• ustvari profil na GitHub
• sledi navodilom za objavo GitHub Page

Svojo spletno stran boš moral objaviti v nov repozitorij na GitHub.