Kliknite tukaj, da si ogledate profil, kot ga vidijo drugi

Enostavna spletna stran v HTML-ju

Delite vsebino na Facebooku
Delite vsebino na Twitterju
  Ustvarili bomo (zelo) enostavno spletno stran v HTML-ju, ji dodali različno besedilo, povezave, slike, ozadje in YouTube video posnetek.
 
 
1
 
 
Za pisanje lahko uporabljamo kar Beležnico (Ang. Notepad), ki prihaja s sistemom Windows, ampak jaz bom uporabljal program Notepad++, ki je na voljo v slovenščini in ga lahko dobite tukaj.
 
 
2
 
 
Odprite Notepad++ in vpišite naslednjo kodo, ki predstavlja osnovno strukturo HTML strani:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
 
 
3
 
 
Sedaj pa med <TITLE> in </TITLE> vpišite naslov vaše spletne strani. To se bo prikazalo kot ime strani.
 
 
4
 
 
Zdaj bomo napisali tekst, ki bo viden na naši spletni strani.
Med <BODY> in </BODY> bomo napisali tekst. Začnemo z <P> in končamo z </P>.

Npr. jaz sem napisal "To je primer strani v HTML-ju".
 
 
 
 
 
5
 
 
Če želimo, da je naše besedilo večje, uporabimo značko <H1> in </H1>. Če želimo, da bo besedilo manjše, lahko namesto H1 vpišemo npr. H2 ali H3.

Te številke lahko uporabimo od 1 (največje) do 6 (najmanjše). Jaz sem kopiral stavek iz prejšnje slike 6-krat in tudi napisal <H1> do <H6> na začetku vsakega stavka in </H1> do </H6> na koncu vsakega stavka.
 
 
6
 
 
Sedaj pa na urejanje besedila.

Če želimo, da je besedilo krepko, napišemo <B> na začetku stavka in </B>.

Če želimo, da je besedilo ležeče, namesto <B> in </B>  uporabimo znački <I> in </I>.

Če želimo, da je besedilo podčrtano, namesto <B> ali <I>  in </B> in </I> vpišemo <U> in </U>.
 
 
7
 
 
Če želimo, da besedilo na določenem mestu gre v naslednjo vrstico napišemo <BR /> na želenem mestu in besedilo bo prikazano v naslednji vrstici.
 
 
8
 
 
Da postavimo tekst na sredino spletne strani, uporabimo značko <CENTER> eno vrstico pod <BODY> in </CENTER> eno vrstico nad </BODY>.
 
 
9
 
 
Da dodamo povezavo, vpišimo naslednjo kodo pod besedilo:
<a href="(Tukaj je naslov spletne strani npr.)http://www.zmaga.com">Tukaj pa tekst, ki bo prikazan kot povezava.</a>

Vse kode so primeri in prosim, da spremenite besedilo obarvano v drugačni barvi kot je koda.
Koda je v oranžni barvi in besedilo, ki ga naj spremenite je v vijolični barvi.
Prosim, da ne vpisujete besedila z oklepajem v kodi.
 
 
10
 
 
Da v besedilo dodamo slike, si moramo narediti mapo v kateri bodo slike. Jaz sem si na namizju ustvaril mapo "Spletna stran v HTML" in v njej naredil mapo "slike".
Sedaj, da vstavimo sliko vpišemo naslednjo kodo:
<img src="slike/ime slike.(npr.)jpg>
 
Tam kjer je shranjena index.html datoteka naj bo tudi mapa "slike".
Vse kode so primer in prosim, da spremenite besedilo obarvano v drugačni barvi kot je koda.
Koda je v oranžni barvi in besedilo, ki ga naj spremenite je v vijolični barvi.
Prosim, da ne vpisujete besedila z oklepajem v kodi.
 
 
11
 
 
Da bo naša stran lepša, bomo uporabili barvo ozadja in besedila. Najbolje je, da poznamo HEX vrednost določene barve. To lahko izvemo na tej strani, kjer izberemo barvo, kopiramo HEX vrednost barve v naslednjo kodo:
pri <BODY bgcolor=#(npr.)808383 text=#(npr.)FFFFFF>
Če želimo, da je namesto ozadja slika uporabimo naslednjo kodo:
<BODY text=#(npr.)FFFFFF background="slike/ime slike.(npr.)jpg>

"bgcolor" je barva ozadja in "text" je barva besedila.
Vse kode so primer in prosim, da spremenite besedilo obarvano v drugačni barvi kot je koda.
Koda je v oranžni barvi in besedilo, ki ga naj spremenite je v vijolični barvi.
Prosim, da ne vpisujete besedila z oklepajem v kodi.
 
 
12
 
 
Če želimo dodati YouTube posnetek, gremo na YouTube in poiščemo video posnetek in kopiramo kodo "Vdelaj".

Jaz sem uporabil kodo od svojega video posnetka "Novo leto 2011".
 
 
13
 
 
Shranite datoteko v mapo "Spletna stran v HTML" kot index.html. Bodite pozorni, da je vrsta datoteke "All types".
 
 
14
 
 
Sedaj smo končali.

Če odprete spletno stran in pogledate vir strani, boste videli ves HTML, ki ste ga napisali.

Sedaj si še poglejte lekciji:
s katerimi boste svojo (zelo) enostavno spletno stran postavili na svetovni splet.

Stran, ki sem jo jaz naredil v tej lekciji je na voljo tukaj.
Kako spraviti vašo stran na svetovni splet, pa lahko najdete v moji lekciji  Brezplačno spletno gostovanje na 000space.com.
 
 
Komentiraj
 
 
 
 
 
11.4.2011, 0:14
Ko boš drugič delal ti predlagam, da daš v lekciji samo dodajanje video posnetka s strani Youtube na svojo stran (pa tudi to je že bilo objavljeno).

Za vse, ki vas zanima HTML si poglejte spodnjo lekcijo in seveda povezavo, ki je podana v zadnjem koraku lekcije:
http://zmaga.com/ucenje.php?t=0&id=1....

To, kar si naredil ti v lekciji je zgolj nek programerski peskovnik, kjer vadiš pisanje kode na roko in se s tem seveda nekaj naučiš.

Drugič raje pokaži kakšen trik v programu NVU, ki še ni bil predstavljen. Koda v programu bo vsaj približno pravilna, pa še sama lekcija bo veliko bolj uporabna za tiste, ki se želijo nekaj naučiti.
 
 
 
 
11.4.2011, 6:41
Nekaj res osnovnih zadev je predstavil Jonas v spodnjem videu:


realife:
Za vse, ki vas zanima HTML si poglejte spodnjo lekcijo in seveda povezavo, ki je podana v zadnjem koraku lekcije:
http://zmaga.com/ucenje.php?t=0&amp;....
Drugič raje pokaži kakšen trik v programu NVU, ki še ni bil predstavljen. Koda v programu bo vsaj približno pravilna, pa še sama lekcija bo veliko bolj uporabna za tiste, ki se želijo nekaj naučiti.

Se strinjam, da je v tisti lekciji koda veliko bolje razložena in predstavljena.
NVU-ja že nekaj časa ne razvijajo več, zato predlagam uporabo naslednika KompoZer. In mislim, da je prav, da se pokaže tudi kako se kaj napiše s kodo, ne pa samo dela v programih z grafičnim vmesnikom, ki sami tvorijo kodo. Če sam pišeš kodo, se ponavadi tudi bolj znajdeš, ko je treba kaj popravljati in ni neke odvečne kode.
 
 
 
 
11.4.2011, 11:54
Že v redu, da kodo ročno pišeš. Vendar moraš za primer lekcije vsaj preveriti, če je koda pravilna. Na njegovi strani je 14 napak in 6 opozoril (zgolj 1 za Youtube, kjer pač ni vpliva).

Drugače pa osebno tudi v grafičnem vmesniku delam kombinirano, tako da grem praktično po vsakem vstavljenem elementu preveriti tudi kodo. Res pa je, da vsi ne delajo tako.
 
 
 
 
11.4.2011, 14:46
realife:
Že v redu, da kodo ročno pišeš. Vendar moraš za primer lekcije vsaj preveriti, če je koda pravilna. Na njegovi strani je 14 napak in 6 opozoril (zgolj 1 za Youtube, kjer pač ni vpliva).
Drugače pa osebno tudi v grafičnem vmesniku delam kombinirano, tako da grem praktično po vsakem vstavljenem elementu preveriti tudi kodo. Res pa je, da vsi ne delajo tako.

Koliko napak je v lekciji ne vem, ker sem na hitro preletel in je nisem podrobno gledal. Drugače pa tudi sam delam v Dreamweaverju v kombiniranem načinu, saj je včasih kakšne zadeve enostavnejše napisati kar s kodo, kakor preko grafičnega vmesnika. Za kakšne enostavne primere, pa zadostuje tudi že navadna Beležnica, ki je del Oken.
 
 
 
 
11.4.2011, 15:21
tdrumlic, brez zamere, ampak tukaj bom res moral podpreti realifa.

Značka header ?!
Poleg tega značke kot so center, u, i, b ... postajajo zastarele in se uporavlja nove <strong > <em > ... Pa seveda oblikovanje z divi ipd.
 
 
 
 
11.4.2011, 16:31
Osebno se mi zdi lep primer popolnoma osnovnih ukazov, ki jih seveda težje uporabimo za spletno stran, vendar pa je zelo fajn, da jih poznamo saj jih lahko uporabljamo drugov po forumih ali pa popolni začetniki, ki bi radi prikazali hitro besedilo na svoji strani vkolikor nimajo namena narediti težavnejšo stran
 
Prijava in registracija
 
 
 
Zmaga.com ponuja brezplačno in razumljivo učenje računalniških programov, vas na enkraten način spozna z različnimi svetovnimi jeziki, s podrobno obrazloženimi recepti prikaže čare kulinarike in vam prežene strahove pred domačimi opravili.
 
 
Poleg tega lahko prebirate poučne članke, ki so namenjene širjenju naše splošne razgledanosti ter preverite svoje znanje z priljubljenim in enostavnim sistemom za preverjanje znanja. Če med vsebinami, ki se dodajajo vsak dan, ne najdete želenega znanja, je za vaša vprašanja na voljo dobro obiskan forum, kjer lahko tudi aktivno sodelujete. V primeru, da bi radi svoje praktično znanje delili z ostalimi, pa to lahko storite preko preprostega vmesnika za dodajanje vsebin. Zmagajte z znanjem z Zmaga.com!