HTML in CSS za začetnike.

Kdor želi ustvarjati spletne strani, prej ali slej pride v stik z HTML. Zato bomo v prihajajočih video vadnicah skupaj osvojili lepoto HTML sveta. Korak za korakom boste videli, o čem gre ta jezik in kako lahko z njim v kombinaciji s stili ustvarjate spletne strani. Na začetku pa stoji vprašanje: Kaj sploh pomeni HTML in stili? Na koncu te video vadnice boste izvedeli tudi, katero programsko opremo potrebujete za ustvarjanje in testiranje spletnih strani.

V nasprotju s programskimi jeziki, kot je na primer Java, lahko v HTML brez večjega uvajanja zelo hitro dosežete prve rezultate. Vse, kar potrebujete za začetek, je urejevalnik in brskalnik. V tem videoposnetku se boste naučili, kako ustvariti svoj prvi HTML dokument in takoj dobiti rezultat v brskalniku. In obenem boste izvedeli, kako so sestavljeni HTML dokumenti, torej spletne strani, oziroma kateri osnovni strukturi sledijo.

Povezavo med pojmi Element, oznaka in atribut že poznate iz prvega dela te serije. Sedaj gre za to, kako se te stvari lahko praktično uporabljajo v HTML dokumentih. Na koncu tega videoposnetka pa boste izvedeli, kako lahko preverite svojo HTML kodo glede načinu skladenjske pravilnosti.

Vaše spletne strani bodo zagotovo sestavljene ne le iz slik, ampak tudi iz besedil. In besedila bi morale biti razumno strukturirana, že zaradi dobre berljivosti. Za to HTML ponuja številne elemente. V tem videoposnetku so predstavljeni najpomembnejši strukturi elementi za besedila. Poleg tega boste izvedeli, kako maskirati lastne znake HTML in kako izpisati programsko kodo.

Za dobro berljivost besedil je potrebno razumno oblikovanje. In to presega zgolj strukturirajoče elemente, kot so naslovi in odstavki besedila. Tako je na primer v HTML mogoče označiti citate ter posamezne dele napisati odebeljeno ali poševno. Potrebno orodje za to ponuja ta video tečaj.

Elementi, ki se vam bodo v HTML vedno znova pojavljali, so sezname. To ne velja le za sezname opravil, stike, ampak tudi za opredelitev menijev. Seznami torej igrajo zelo pomembno vlogo v HTML. Dovolj razloga, da si jih podrobneje ogledamo. V tej videopripravi se boste naučili vse možne vrste seznamov, ki jih HTML ponuja. To so naštevni seznami, oštevilčeni seznami, definicijski seznami in meni seznami. Poleg tega boste dobili napotke, kako po potrebi prilagoditi videz seznamov.

Tabele na spletnih straneh še vedno igrajo pomembno vlogo. To velja vendarle samo glede na predstavitev podatkov. Ko še ni bilo CSS-ja oziroma ta ni bil resnično podprt s strani brskalnikov, so tabele služile tudi popolnoma drugačnemu namenu: Nad njimi so postavljali postavitve. Znotraj tabelnih celic so postavili posamezne elemente strani. Tabele postavitve, ki iz tega izhajajo, so s pomočjo CSS-ja srečno preteklost. Danes se tabele v spletnem oblikovanju uporabljajo izključno za to, za kar so bile prvotno namenjene: za pregledno prikazovanje podatkov.

Skladno delujoče tabele niso nujno sestavljene iz enakega števila celic znotraj tabele. V tem video treningu je prikazano, kako lahko združujete tabele med seboj. V drugem delu boste izvedeli nekaj več o označevanju tabel. Ta vidik je pomemben, saj lahko obiskovalcem takoj pokažete, o kakšnih podatkih končno gre. Video trening se zaključi z podrobnim pregledom oblikovanja tabel v HTML. Saj se je še posebej na tem področju v primerjavi s prejšnjimi različicami HTML zelo veliko spremenilo.

Skoraj nobena spletna stran ne more brez grafik. Ni čudno, da ima tema grafik pomemben prostor tudi v tej seriji. V tem in naslednjih videoposnetkih bo prikazano, kako lahko vključite grafike v svoje spletne strani. Na začetku pa je poudarek na drugem vidiku: Kateri slikovni formati sploh koristijo za uporabo na spletu? V drugem delu bo govora o tem, kako se lahko reference slikovnih poti.

Kako se lahko slike načeloma sklicujejo, je bilo prikazano v prejšnjem delu. Konec palice glede na slike pa ni bil dosežen. Dejansko je mogoče slike natančneje opisati s pomočjo ustrezne atribute. To je tisto, o čemer gre na začetku tega videoposnetka. V drugem delu je opisano, kako se lahko podnapisi slik izvedejo s sintakso HTML5.

Sol v juho interneta je možnost povezovanja vsebin med seboj prek hiperpovezav. Brez teh hiperpovezav si ne bi mogli predstavljati interneta v njegovi trenutni obliki. Katere različice vam ponuja HTML glede definicij hiperpovezav, boste izvedeli v tem in naslednjem videoposnetku.

HTML ponuja še veliko več možnosti glede hiperpovezav, kot je bilo prikazano v prejšnjem videu. Na primer lahko določite povezave do e-pošte in ponudite datoteke za prenos. Te in druge vrste hiperpovezav boste spoznali v tem videoposnetku.

Da bom že vnaprej povedal: Ravno v HTML5 so obrazci naredili velik preskok. Zahvaljujoč številnim novim tipom polj je mogoče ustvariti zelo zanimive obrazce. Te nove možnosti boste seveda še spoznali. V tem video izobraževanju pa začnemo z osnovnimi orodji, ki jih potrebujete za opredelitev obrazcev. Na začetku gre za ustvarjanje enovrstičnih polj za vnos. Videli boste, kako jih je mogoče definirati, kako jih je mogoče prednastaviti z vrednostmi in kako jih je mogoče nastaviti na nedostopno za vnos. Prav tako boste spoznali definicijo polj za gesla. To je namreč tip polja, ki ga lahko vedno znova uporabite.

V tem videoposnetku boste spoznali dodatne vrste polj, s katerimi lahko opremite svoje obrazce. Konkretno gre za izbirna polja, izbirne gumbe in potrditvena polja. Vse to so pomembni elementi, ki jih pri obrazcih vedno znova potrebujete. Dovolj razlogov torej, da si podrobneje ogledate te in druge elemente.

Z HTML5 se je veliko spremenilo, zlasti kar zadeva obrazce. Dovolj razlogov, da si podrobneje ogledamo številne nove funkcije obrazca, ki jih je že mogoče uporabljati. Končano je s preprostimi polji za vnos. Končno je mogoče določiti tudi drsnike, polja za datum itd. - in to popolnoma brez uporabe JavaScript-a.

Začetek v svet obrazcev HTML5 je olajšalo prejšnje video usposabljanje. Vendar pa s tem še nismo dosegli konca. Dejansko ima HTML5 na tem področju še veliko več za ponuditi.

V HTML5 obstajajo razen predstavljenih tipov polj tudi številni drugi zanimivi vidiki. Na primer, zdaj je mogoče z zelo malo truda uresničiti funkcijo samodejnega dokončanja za obrazčna polja po vzoru Googla. Te in druge stvari so prikazane v tem videoposnetku.

Kdor se ukvarja s HTML5, se ne more izogniti temi semantike. V tem in v naslednjih video usposabljanjih boste spoznali najpomembnejše elemente, ki jih prinaša HTML5, s katerimi lahko ustrezno strukturirate dokumente. Dejansko je ta logična strukturiranost nujna, če želite svoje spletne strani oblikovati za prihodnost.

HTML5 prinaša številne nove strukturne elemente. Kateri so v osnovi, je bilo že prikazano v prejšnjem videoposnetku. Sedaj gre za praktično uporabo teh elementov. Ti elementi služijo semantični strukturiranju dokumentov. V tem video posnetku boste predstavljeni predvsem dve elementi article in section. Ti zagotavljajo osnovno strukturo HTML dokumentov. Na koncu tega videoposnetka se bo še enkrat pogledalo razlike med div, article in section.

V HTML5 lahko dokumente delimo ne le na članke in odseke. Dejansko obstaja še veliko dodatnih elementov kot so glava, noga in drugi za semantično strukturiranje. Vredno jih je natančneje preučiti.

V tem zadnjem videoučenju iz serije Semantičnih elementov boste spoznali še dodatne strukturne elemente. V HTML5 so namreč na voljo tudi elementi za navigacijska področja, opombe in za povzetke.

V prejšnjih različicah HTML je bila vključitev multimedijskih vsebin nočna mora. Z uporabo kombinacije objektnega in vstavljenega elementa se je poskušalo video in zvok spraviti na spletno stran. Vprašljivo je bilo, ali se je vdelani video dejansko predvajal. Tudi na tem področju je bilo v HTML5 narejeno veliko izboljšav.

Kako lahko vstavljate videoposnetke, ste videli. Seveda videoposnetki niso vse, kar lahko predstavite obiskovalcem na svoji spletni strani. V tej video vadnici je zato opisano, katere možnosti vam HTML5 ponuja pri vstavljanju avdio datotek in Flash filmov. Tudi te stvari je včasih treba prikazati na svoji spletni strani.

V HTML5 ni več okvirjev. Njihovi sorodniki, iFrames, so uspeli priti tudi v novo HTML dobo in so del HTML5. Medtem ko klasični okvirji razdelijo stran na neodvisna območja, je mogoče prek iFrameov vključiti poljubne vire na spletne strani.

HTML je namenjen strukturiranju vsebine. Ko pride na vrsto oblikovanje strani, vstopijo v igro Cascading Style Sheets (CSS). Šele kombinacija CSS in HTML omogoča, da iz preproste HTML strukture nastanejo privlačne spletne strani. Dovolj razlogov torej, da se natančneje osredotočimo na CSS.

Pojem, ki se vam bo v zvezi s CSS vedno znova pojavljal, je "selektorji". Prek teh selektorjev na koncu določite elemente, ki jih želite oblikovati s CSS. V tem video usposabljanju boste spoznali prve selektorje. Predstavljeni so vam elementni, ID in univerzalni selektorji. S temi se boste pri oblikovanju svojih spletnih strani s CSS srečevali vsak dan.

Nekateri selektorji so bili predstavljeni v prejšnjem videoposnetku. Seveda pa CSS ponuja še številne druge selektorje.

V tem zadnjem videoposnetku o selektorjih vam predstavljam zelo posebno obliko selektorjev. To so t. i. lažne razredi in lažni elementi. To so taki selektorji, ki se ne nanašajo na določene HTML elemente, temveč se generirajo iz izhodne naprave.

V tem in prihodnjih videoposnetkih bom predstavil najpomembnejše CSS lastnosti. Pri tem pa se tukaj ne gre za predstavitev CSS referenc. Namesto tega naj bi dobili občutek, kaj vse je mogoče s CSS. Začnemo s oblikovanjem pisave. Predstavljene bodo vse stvari, ki neposredno vplivajo na tako imenovane pisave. Upoštevajte, da obstajajo dodatne lastnosti v zvezi z oblikovanjem pisave, ki bodo prikazane v naslednjem videoposnetku.

V CSS-lastnostih, predstavljenih v tem videoposnetku, je mogoče vizualno prilagoditi besedila in znake. Na primer, lahko se spreminjajo razdalje med posameznimi črkami in usmerjenost besedil. Tudi te lastnosti vam pomagajo, da predstavite besedila privlačno.

Seveda ne smejo manjkati tudi definicije barv in grafične ozadje pri CSS. Ustreznih lastnosti so predstavljene v tem video usposabljanju. Glede na to, da CSS zagotavlja številne možnosti prav na tem področju. Tako je možno določiti ne samo barve in slike, temveč tudi ponavljajoče se ozadje.

Prav tako boste, ko gre za oblikovanje spletnih strani, naleteli na definicijo zunanjih robov in razmikov. V zadnjih video vadnicah te serije bo sicer predstavljen obsežen primer projekta, v katerem bo praktično prikazana uporaba teh in drugih CSS lastnosti.

CSS ponuja nekaj zanimivih lastnosti za besedilne odstavke in bloke, ki si jih želim deliti z vami. Na primer, lahko besedilne odstavke poravnate na levo in desno stran.

Ko se omeni okvir v povezavi s tabelami, večina najprej pomisli na tabele. In dejansko okvirji v povezavi s tabelami igrajo pomembno vlogo. Vendar se lahko tudi druge elemente opremi z okvirji prek CSS. In kako bodo ti okvirji nazadnje izgledali, lahko prav tako določimo z CSS definicijami.

Kako se definirajo sezname, verjetno že dolgo veste. To je bilo namreč izčrpno prikazano v okviru te serije. Seznami sami po sebi niso ravno šik, vendar obstajajo ustrezne CSS lastnosti, ki poskrbijo za njihov vizualni videz. Katere lastnosti to so in kako jih uporabiti, boste izvedeli v tem videoposnetku. Drugi del obravnava t. i. števce, s katerimi je mogoče izvesti tudi kompleksnejše oštevilčenje.

Ko gre za oblikovanje spletnih strani, bo t. i. "box model" vaš stalni spremljevalec. Prav preko tega se v bistvu določa, kako in kje bodo elementi postavljeni.

Za pozicioniranje elementov znotraj spletne strani na želene lokacije boste morali uporabiti določene CSS lastnosti.

V prejšnjem video treningu je bilo že na hitro omenjeno t. i. plavajoče načelo. Tema pa je tako kompleksna, da se bo tukaj ponovno podrobneje pogledalo plavajoče. Gre namreč za ključen koncept v CSS. Šele če razumete to tematiko, lahko dejansko ustvarite spletne strani.

V preteklih video treningih so bile predstavljene osnove dela z HTML in CSS. Seveda je zdaj čas, da začnemo žeti prve sadove. V naslednjih video treningih bo zato postavljena spletna stran po korakih. V tem videu pa boste najprej spoznali različne postavitvene možnosti. Ker izbira ustreznega postavitvenega vzorca vedno mora biti na začetku vaših razmišljanj o oblikovanju spletne strani.

Pri našem praktičnem projektu predpostavljam tipično postavitev stolpcev. Preden pa predstavim ta projekt v živo in v barvah, želim konkretno prikazati, kako sami lahko implementirate postavitve stolpcev. V ospredju bodo dvo- in trostolpčne postavitve, saj še vedno predstavljajo osnovo večine spletnih strani.

V naslednjih videoposnetkih vam bom pokazal, kako postopoma izvesti postavitev spletne strani. Za to obstajajo zelo različni pristopi. Pogosto se postavitve ustvarjajo v programu Photoshop. Posamezne elemente strani nato izrežemo in jih združimo v spletno stran s pomočjo CSS in HTML. Tako se ravna tudi tu. Vendar namesto Photoshopa uporabljam brezplačno dostopen GIMP. Opisani koraki se lahko vendarle izvedejo tudi v Photoshopu.

Prvi koraki proti lastni postavitvi so bili storjeni v prejšnjem videoposnetku. Seveda manjkajo še številni elementi. Ti bodo dodani v tem videoposnetku. Ko bo postavitev končana, se nadaljuje z izrezovanjem, imenovanim sličenje. To je končni korak, ki omogoča praktično izvedbo ustvarjenega dizajna prek HTML in CSS.

Oblikovanje ste ustvarili. Sedaj bomo prešli na njegovo praktično izvedbo. V tem video seminarju bomo skupaj ustvarili osnovno HTML ogrodje spletne strani.

Osnovna struktura strani je postavljena, vendar je še vedno precej skromna. V tej video vadnici bo vsebina strani nadalje razvita. Najprej je v ospredju meni, ki se nahaja v zgornjem delu strani. Sledita mu desni in spodnji meni.

Pomemben vidik za privlačno spletno stran je seveda njena tipografija. V tej seriji ste že spoznali možnosti, ki vam jih HTML in CSS ponujata glede oblikovanja besedila. V tej video vadnici se bomo posvetili temu, kako izboljšati stran. Pri tem se ne bomo osredotočili samo na klasične variante. Čarobna beseda za uporabo "eksotičnih" pisav je @font-face.

Navadno bi obiskovalcem morali ponuditi možnost stika. V najpreprostejšem primeru bi zapisali telefonsko številko in/ali e-poštni naslov. To lahko storimo na ta način, vendar za obiskovalce ni posebej udobno. Zato bomo v tej videopredstavitvi ustvarili obrazec, prek katerega bodo obiskovalci lahko brez težav stopili v stik z nami. Pri tem bomo seveda izkoristili možnosti, ki nam jih ponujata HTML5 in CSS3.

Osnovna struktura in osnovno oblikovanje obrazca sta določena in zaključena. In resnično, obrazec že zdaj izgleda precej privlačno. Zahvaljujoč CSS3 pa je še veliko več možnosti, ko gre za optično izboljšanje obrazca. V tem video usposabljanju bo obrazec zato še dodatno oblikovan.

Že v tem trenutku ste zagotovo vložili veliko časa in dela v razvoj svoje spletne strani. Začenši s konceptom, oblikovanjem postavitve in napredovanjem v HTML in CSS. Zdaj je torej dovolj razlogov, da svetu končno predstavite svojo spletno stran. Točno o tem gre v tem video usposabljanju. Pokazal vam bom, kako lahko svojo spletno stran postavite na splet. Najprej boste izvedeli, kako dobiti pravega ponudnika in primerno paket spletnega prostora. Nato se bodo podatki prenesli na strežnik z znanim FileZilla. In potem, no, potem bo spletna stran dejansko na spletu.

V tem video tečaju vam želim dati kratek vpogled v pravo razvojno okolje za ustvarjanje spletnih strani. Tisti, ki so že napisali celotne spletne strani ali manjše posamezne strani, običajno že imajo te urejevalnike in lahko preskočijo to video predstavitev.

So prikazani:
DreamWeaver
Panic Coda
Panic Transmit: http://panic.com/transmit/
Filezilla: http://filezilla.de/

HTML5-boilerplate je močen predlog za HTML5 in CSS3 spletne strani; naredi HTML5 čim bolj cross-browser kompatibilen in vsebuje nekaj zelo dobrih predlog kod v JavaScriptu, CSS3 in seveda tudi HTML.

V tem video-tečaju vam želim predstaviti prav te funkcije. Za začetek v HTML5 in CSS3 ni boljšega predloga.

V tem videu želim predstaviti nekaj zelo koristnih orodij, s katerimi lahko razvijate HTML5 in CSS3.

Med njimi so:
html5css3box.com
kuler.adobe.com (zdaj https://color.adobe.com/de/create/color-wheel)
css3generator.com
typetester.org
google.com/webfonts
cufon.shoqolate.com
videojs.com