S HTML in CSS-jem so že pred davnimi leti začele delovati prve spletne strani, ki res niso bile tako dobre kot v današjih časih. Tukaj boste spoznali kako se naredi spletno stran in potem popravlja s CSS-jem
Malo zgodovine ne škodi :
Tim Berners Lee je leta 1989 razvil prvi strežnik in tudi prvi HTTP naslov. Kasneje leta 1990 v CERNU razvije prvi HTTP, ki se poveže s strežnikom preko interneta.
World Wide Web Consortium (okrajš. w3c). Je bilo ustavnoljeno leta 1994 in je izvršilo ali bo koda sprejeta ali ne, da ne bi bila zmešnajva so naredili nek standard.
No, ker vem, da vas zgodovina ne zanima, bomo začeli z našim HTML-jem. Pri tem upam, da vam bom vsaj malo olajšal delo. Naj še povem, da se bo sama tema razvijala bolj počasi, zaradi šole, a se bom vseeno maximalno potrudil, da vam razložim po mojih najboljših močeh.
Kaj pomeni ?
HTML - Hyper Text Markup Language
CSS - Cascada Style Sheets
S HTML kodo normalno pišemo kot, da bi pisali text v word a zato obstajajo neka pravila, da lahko zapišeš ta text npr. za odebeljeno je znak <b> .
V HTML-ju se piše text in lahko še kakšne tabele. S CSS lahko lepo oblikujemo vpisano kodo, ki je v HTML in s tem npr. obarvamo, dodajamo fonte, velikost itd...
CSS koda tukaj je primer zgornje slike kaj vse lahko z njim narediš
in tukaj je kako bi zgledalo brez CSS-ja dolgočasno mar ne? .
Kaj rabimo za delo? Za delo rabimo samo malo volje in eno beležko. Lahko uporabljate tudi navadno beležko, a pri navadni je slaba vidljivost, ker ni pobarvano zato je bolje, da uporabite kakšno od bolj naprednih beležk kot so Notepad++, PsPad in drugi.
Link do PsPad beležke: http://www.pspad.com/
Sedaj, ko ste izbrali beležko, enkrat počasi vdihnite in izdihnite in bomo počasi začeli.
Prvo greste kamor želite in naredite novo mapo sam sem jo poimenoval z moja prva spletna stran v to mapo bomo shranjevali vse datoteke. Ko smo v tej mapi kliknemo z desno tipko na miški in potem naredi nov Text Document. Sedaj to še ponovno naredimo, da imamo dva text dokumenta. Za zdaj bomo samo enega uporabili. Bravo vsaj ni bilo težko
.Zlata pravila vsega:
- Znanje ne pade kar iz neba
- Povečaj sliko tako, da na njo klikneš
- Veliko brskaj. Tako boste boljši (išči, sprobavaj)
- Priporočam tudi spletno stran kot so W3schools.com, TheNewBoston in drugi.
- Piši kode z malimi črkami, boljša preglednost.
- Bodi pozoren na zaključevanje kod npr. <a> pomembno zaključek </a>
- Če kaj ne veš, vprašaj.
Naredili smo Text Document
in odprli z beležko
Sedaj ste odprli beležko, odprite jo in shranite kot Index.html.
Shranite kot (Save as).
Shranili smo kot Index.html
Naredili smo "nekajjetukaj".html kodo in jo bo računalnik prepoznal, nekakšna pravila, ki se končajo s .html zato lahko sedaj začnemo pisati glavno kodo , če nebi dodali index.HTML kode nebi zaznalo. Lahko dodamo karkoli npr. pohištvo.html
Še posnetek : Glavna zgradba HTML
Glavna koda HTMLja :
<html>
<head>
<title>Pika</title>
</head>
<body>
<H1>To bo malo opisano na moji spletni strani</H1>
Hojla to sem jaz!
</body>
</html>
Zgoraj je glavna koda (obarvana rdeče) naj povem malo v tem kaj je in zakaj se uporablja:
Koda se začne v HTML-ju in potem se mora(!) tudi zaključiti, če pogledamo na spletno stran Sestavi. si vidiš spodnjo sliko, ki kaže <title> kodo. Tako si potem tvoji obiskovalci lažje zapomnejo spletno stran in jo pridejo zopet obiskati.
To naredi title (glej sliko). Kasneje bomo tudi sporobali, da dobimo malo občutka kako in kaj .
V sam<head> vpišeš kodo za ...CSS, meta podatke to so ključni podatki, da je spletna stran bolj ovrščena itd, a o tem bomo govorili kasneje.
Najbolj zanimiva je pa seveda <Body> ves text, ki ga boste napisali gre sem noter.
Samo besedilo, če naredite "space" se nebo spreminjalo, ker brskalnik vse znake upošteva kot enega samega, da greš v novo vrstico je posebna kodo, ki mu daste, da brskalnik misli, da je tam nek drug text. Že v naslednjih vajah bo to prikazano kako narediti.
Videoposnetek za glavno kodo : Naredimo HTML dokument
Že sam primer kaže značko "<h1> " s tem smo napisali nekaj texta in </h1>in tudi zaključili. To je zelo pomembno, da vsako med kod zaključite!. npr. <p> to je paragraph </p>
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Sedaj pojdimo nazaj v beležko in odprimo svoj index.html, ki smo ga naredili. Lahko kopirate zgorjno kodo a priporočam, da napišete še enkrat, da si boste zapomnili.
Samo kodo sem napisal in dal shrani. (Shranil sem čez index.html)
Sedaj odprite z brskalnikom (Chrome, Firefox itd.. )
Takole bi pa mogla zgledati koda ko jo napišete. Rdeče obkroženo je TITLE.
Naredili smo svojo prvo HTML kodo, čestitam!.
Če znaš vsaj delno to nalogo si pripravljen iti naprej drugače probajte še malo povaditi.
No, ker vemo, da je programiranje cel kup nekih pravil in tako naprej je isto pri HTML-ju, ki se jih bo potrebno naučiti, ker smo že osvojili glavne znake in kako odpreti spletno stran, da jo prikazuje bom začel s kodami, ki jih pišemo v glavno kodo body.
Naj ponovim v body se piše text in še kakšne tabele lahko naredite, ki jih kasneje s CSS-jem uredite (polepšate).
Kode, kode in še enkrat kode :
Sedaj se začne tisti strah, ko slišite koda in se sprašuješ ali bo res težko ali ne... ali bom zmogel ?.
Jaz pravim seveda, da boste, ker ste pripravljeni in vem, da zmorete. Boste videli na koncu si boste rekeli "kaj samo to?".
H1: ta značka je za naslove. Imamo naslove od H1 do H6 pri tem je H1 največja velikost črk in H6 najmanjša. (Glej spodnjo sliko)
<p> To so odstavki </p> angl. ( paragraph).
Prej sem omenjal kako narediti blank space in zakaj se uporablja, da lahko naredite presledke še dodatno uporabite :
In, če napišete npr. 3-krat pride takole levo izgled desno koda (glej spodnjo sliko) .
Pri tem kakor koli napišete lahko tudi v eni vrstici ti bo zmeraj šlo v novo vrstico .
----------------------------------------------
Dodajanje Povezav je skrajno lahko pri tem moraš poznati samo to kodo in dodati znotraj URL naslov imamo dva sklicevanja relativni in absolutni način.
Relativni način je sklicevanje iz datoteke.
Absolutni način je sklicevanje direkntno iz URL naslova.
Prvo se bomo sklicevali relativno.
Za ločila med imeni map uporabljamo ../
Sklic na datoteko : <a href="mapa/mapa.html"> Ta mapa</a>
Sklicevanje je bilo na mapo, ki je bila narejena še ena mapa, ki se si mogel sklicati na to mapo.
Izgled: 
Sedaj pa še absolutno:
<a href="http://www.racunalni...570-html-in-css"> Klikni me in greš na RN.</a>
Koda bo napisana takole : Klikni me in greš na RN. (z modro barvo). Ko boste kliknili vas bo avtomatsko preusmerilo na Računalniške Novice to velikokrat prav pride, če imate kakšen blog ali kaj podobnega in se sklicujete na druge strani.
(šumniki za enkrat še ne delajo, kasneje pokažem kako nastaviti. )
Takole naj bi zgledala koda.
<a href=" dodaj URL "> Dodaj text </a> URL- nebo viden. Vidno bo samo modro obarvana povezava Dodaj text.
---------------------------------------------------------
Naredili smo majhen korak a veliko, če hočemo narediti prelom vrstice angl. (Brake Line).
Uporablja se ta koda : <br /> , ki je ni treba zaključevati kot druge. tukaj je potrebno navesti samo, da je <br in potem />.
Zapomnite si, da se Brake line ne zaključi tako, kot drugi ampak se direktno zaključi <br />
Sedaj vidite kako izgleda. Dodaš dva preloma, ki je viden text nižje.
(Z rumeno samo ponazarja kako bi zgledalo brez preloma.)
( Rdeča številka 2= 2 preloma.)
Z Brake linom lahko narediš tudi tako, da prestaviš text nižje
npr: <p> To je koda <br/> ta bo šla nižje <br/> ta pa še nižje
Izgledalo bi takole: To je koda
ta bo šla nižje
ta pa še nižje
Še priložena slika za boljšo predstavo:
---------------------------------------------------------
Kdo še ni videl vsaj kakšno črto na kakšni spletni strani. Najbrž ste tudi že kdaj videli horizontalno črto, angl. (horizontal line).
Koda zato je: <hr />
Sama koda naredi črto spodaj ali zgoraj odvisno kam postavite kodo, če kodo postavite pred npr. <p> to je text </p> bo na vrhu, če spodaj bo spodaj.
Za boljše razumevanje sem vam priložil sliko: (Rdeče obarvan HR je na vrhu , modro obarvan spodaj.)
Sedaj poglejmo za boljšo predstavo kaj bi bilo, če <hr /> pustimo samo na vrhu. (Glej spodnjo sliko)
Tukaj se dobro vidi, da je tisti <a href ... > spodaj zato je <hr /> črta na vrhu.
---------------------------------------------------
No tudi komentar se naredi podobno kot, da bi si zapisal nekaj na list in te potem opominja, da se boš spomnil čez npr. 5 let kaj si sploh delal in je tudi zaradi preglednosti.
HTML komentar se napiše z : <!-- Znotraj tega je komentar -->
Ta komentar se nevidi na spletni strani! Vidi se samo v tvoji kodi.
Izgled komentarja:
---------------------------------------------------
Za sedaj smo spoznali:
- Glavna koda HTML-ja
- Title (naslov)
- H1-H6 (naslovi oz. angl. heading)
- Odstavke angl.(paragraphs to je <p>)
- <a href="URL naslov"> Klikni me </a> / Spoznali smo kako dodajati povezave.
- Prelom vrstice angl. (brake line) <br />
- vodoravna črta angl.(horizontal line) piše se z <hr/>
- Komentar <!--Notri je komentar-->
Sedaj bomo spoznali kako narediš :
- odebeljen text
- močan text
- velik text
- italiac text
- poudarjen text
- računalniški text
- text spodaj in na vrhu.
Da naredite odebeljen text napišete <p> in znotraj tega napište <b> Ta text je odebeljen</b></p>
Takole: <p><b> Ta text je odebeljen </p> </b>
Potem imamo tukaj močan text <strong>, ki naredi da je...</strong>
Takole npr: <p><strong> Ta text je močan</strong></p>
Sedaj imam vam predstavim še te kode potem bom vam pokazal sliko kako bi moglo vse izgledati. Zato, kar brez strahu probavaj in boš videl, če si prav naredil.
Tukaj imamo še Italiac to je nekakšen ležeči text.
Takole bi se pa napisal: <p><i>Ta text je italic</i></p>.
Imamo samo še tri kode do konca tega. Zato ne obupajte
.Zem <em> Poudarite text
Izgled kode: <p><em>Ta text je poudarjen</em></p>
še računalniški text, ki se napiše s <code>
in sedaj res zadnja koda, ki se napiše z <sub> in druga z <sup>
<sub> : naredi, da je text spodaj
<sup> : naredi, da je text na vrhu
Na hitro kaj vse je:
- Odebeljen text z <b>
- Močan text z <strong>
- Velik text <big>
- Italic text <i>
- Poudarjen text <em>
- text spodaj in zgoraj <sup> in <sub> (glej spodnjo sliko za boljšo predstavo)
Ste probavali, če vam deluje ?. No sedaj lahko pogledamo kako izgleda. ( spodnja slika)
Naj povem, da je teh kod res zelo veliko zato nebom druge izpostavljal, ker so manj uporabljene, če vas pa res zanimajo vse kode vam pa priporočam tale link: http://www.w3schools..._formatting.asp . A ko vadite kode pišite zmeraj v beležko samo tako se boste naučili. Ne priporočam, da pišete s tem urejavalnikom na tej spletni strani.
---------------------------------------------------
Text lahko pobarvate tudi s HTML-jem a tega ne priporočam, ker se to, da s CSS-jem lažje ampak vseeno vam bom pokazal.
HTML barvanje npr : <p> <font size="5" face="Times New Roman" color="red"> Ta text bo rdeč s Times New Roman fontom in velikostjo 5px.</p>
Px = Pixel
Font-size : Velikost Texta(5 px)
Face: Kakšen Font (Arial, Times New Roman in drugi... )
Color : Rdeča barva texta
Zaradi tehnične napake, ker se je veliko zbrisalo se oproščam!. Upam, da bo kmalu vse urejeno.
