Sveikas, interneto žmogau! Ši puslapis skirtas mano žavingiesiems studentams. Jame yra visa esminė informacija ir pavyzdžiai, reikalingi pradėti interneto puslapių kūrimą.

Čia rasite HTML, CSS, JavaScript pavyzdžius, nuorodas, kur ieškoti daugiau informacijos. Norėdami sužinoti, kaip viskas padaryta, lengviausias būdas yra peržiūrėti puslapio kodą. Jei naršote per Chrome naršyklę (rekomenduoju), šone esančios nuorodos atidaro puslapio kodą, kuriame yra labai daug komentarų ir paaiškinimų.

Rekomenduoju pirma perskaityti viską nežiūrint į kodą, o tuomet perskaityti visą kodą ir jame esančius komentarus. Šone esančios nuorodos tiesiog peršoka į šio puslapio sekcijas. Tikiuosi, čia esantys pavyzdžiai, jų kodas ir komentarai padės išspręsti didžiąją dalį bėdų ir neaiškumų. Keli patarimai prieš šokant į medžiagą:

  • Esminis patarimas: rašykite kodą kuo tvarkingiau. Taip išvengsite 80% klaidų. HTML, CSS ir JavaScript nėra labai atlaidžios technologijos: praleistas kampinis skliaustas, dvigubas dvitaškis ar neparašytas kabliataškis gali sugriauti beveik visą dizainą. Rašykite kodą atidžiai, tvarkingai, atitraukinėdami nuo kraštų pagal hierarchiją... Kodo redaktoriai jums gali šiek tiek padėti nuspalvindami kodą, bet jie neparodys visų klaidų.
  • Nepradėkite nuo pačių originaliausių ir kosminių idėjų. Geriau veikiantis paprastesnis puslapis, nei neveikiantis ekspresyvus Photoshop paveiksliukas. Pradėkite nuo paprastų dalykų, nuo elementaraus išdėstymo, ir tada ant viršaus dėliokite gražią tipografiją, animacijas, jQuery pluginus. Interneto dizaine viskas įmanoma, bet ne viskas paprasta - kai kuriems sprendimams reikia ne vienų metų patirties.
  • Siūlau ieškoti atsakymų tokia tvarka: pirma, pažiūrėti ar šiame puslapyje nėra nieko panašaus. Čia esantis pavyzdinis kodas parašytas jums! Nusikopijuokite reikiamas dalis, pabandykite keisti, žiūrėti, kas sugriūna ir kas ne. Jei čia nėra jūsų norimo dalyko, Googlinkite. Jei ieškoti informacijos apie specifinį HTML ar CSS žymenį, pridėkite "MDN" prie paieškos frazės. Galiausiai, jei niekas neišeina, parašykite jonas@lekevicius.com. Sėkmės!

Puslapio kodas

Parsisiuntimai

Puslapio sekcijos

Prezentacijos

Žemiau yra nuorodos į visų paskaitų prezentacijas. Šios prezentacijos yra mažai naudingos be mano gyvo pristatymo, bet gal kam nors bus naudingos prisiminti tam tikrą informaciją.

Kurso apžvalga, interneto istorija ir dabartinės tendencijos.

42 patarimai, kaip kurti gerą vartotojo patirtį ir informacijos architektūrą. Literatūros rekomendacijos.

Įvadas į HTML: dokumento su struktūra idėja, vaidmuo, elementai.

Įvadas į CSS: selektoriai, atstumų, dydžių ir tipografijos taisyklės.

CSS išdėstymo būdai naudojant fiksuotas pozicijas, float, Bootstrap sistemą.

CSS sudėtingesnės taisyklės: web šriftai, animacijos, perėjimai, filtrai.

Strategija ir praktiniai patarimai kaip kurti tinklapių dizainą ir grafiką.

Apie preprocesorius, Jade ir SCSS kaip alternatyvas HTML ir CSS.

JavaScript ir programavimo pagrindai: kintamieji, reikšmės, funkcijos.

Darbas su tekstiniais failais

Atom programos langas. Joje galima kurti naujus failus, redaguoti HTML, CSS ir JS.

HTML, CSS ir JavaScript (JS) failai yra tekstiniai failai. Jie skiriasi nuo .doc, .psd, .pdf ir panašių failų, tuo, jog šių failų turinį mes redaguojame tiesiogiai, ir tam nebūtinos konkrečios programos (kaip Word būtinas redaguoti .doc failus). Šiuose failuose nėra nieko magiško, jų kodą visada galima pamatyti ir perskaityti, kitaip nei, pavyzdžiui, Photoshop failo, kurio "kodas" yra neperskaitomas ir atidaromas tik per Photoshop programą.

Nors specialios programos nėra būtinos, yra patogu naudotis programa, kuri padeda rašyti HTML, CSS, JavaScript kodą. Šias programas naudoja programuotojai. Visos jos panašios savo funkcionalumu, kai kurios kainuoja, kai kurios veikia tik Windowsuose arba tik Mac. Rekomenduojamos programos:

Pavyzdinė failų struktūra.

Paskutinis aspektas, kurį reikia suprasti dirbant su tekstiniais failais, yra jų "adresai". Kadangi failai yra paprasti ir tekstinai, jie negali turėti kitų failų "savo viduje" - dirbdami su Word ar Photoshop galime nutempti paveiksliuką ant failo, ir tada tas paveiksliukas bus mūsų .doc arba .psd viduje. Tekstiniuose failuose vienas failas nurodo adresą į kitą jam reikalingą failą. Adresai detaliai aptarti šio failo komentaruose. Du pavyzdžiai:

  1. index.html esantis adresas css/bootstrap.css nurodo į "css" folderyje esantį failą "boostrap.css".
  2. css/style.css esantis adresas ../images/logo.png nurodo į "images" folderyje esantį failą "logo.png". Du taškeliai reiškia "vienu folderiu aukščiau". ../images/logo.png reiškia pakilti vienu folderiu aukščiau į pagrindinį folderį, tada nusileisti į "images" folderį ir iš ten pasiimti "logo.png".

HTML

HTML dokumentas - tai turinys su struktūra. Čia antraštės, paragrafai ir sąrašai
aprašomi žymenimis, kurie turi prasmę, tačiau neturi dizaino.

HTML (HyperText Markup Language) yra kalba, skirta aprašyti turinį ir jo struktūrą. Visas turinys dėliojamas į žymenis. Pavyzdžiui, paragrafas prasideda <p> ir baigiasi </p>. Žymenys gali turėti kitus žymenis savo viduje, taip sukurdami į medį panašią informacijos struktūrą (šis medis vadinamas DOM - Document Object Model). Žymenys taip pat gali turėti atributus: peržiūrėkite šio puslapio kodą ir rasite apsčiai pavyzdžių. Labai svarbu suprasti, kad HTML paskirtis yra aprašyti elementus pagal prasmę, o ne pagal tai kaip jie atrodo. Jei pagal teksto struktūrą reikėtų dėti trečio lygio antraštę, nors penkto lygio antraštė "atrodytų gražiau", derėtų dėti trečio lygio antraštę ir pakeisti jos dizainą per CSS.

Antraštės

Puslapiuose antraštės žymimos šešiais skirtingo lygio žymenimis, nuo <h1> (pirmo lygio antraštė, tokia turėtų būti tik viena puslapyje) iki <h6> (šešto lygio antraštė, retai kada turinys turi tokią sudėtingą struktūrą, kad jos prireikia). Čia matomi žodžiai "HTML esminai žymenys" yra antro lygio antraštė, o "Antraštės" yra trečio lygio antraštė.

Blokiniai turinio elementai

Vieni svarbiausių yra blokiniai turinio elementai. <p> žymi paragrafą. Ne visas tekstas privalo būti paragrafuose, tačiau yra prasminga teksto paragrafus dėti į paragrafų žymenis. Beveik visi HTML žymenys ignoruoja naujas eilutes, kurios yra kode. Jei pažiūrėtumėte šio paragrafo kodą, pamatytumėte, kad tekstas yra išskaidytas į atskiras eilutes, ir tai neatsispindi matomame vaizde. Norint įdėti naują eilutę (naudinga poezijoje ir pan.) galima naudoti <br> žemynį. Šis žymuo neturi savo uždarymo, t.y., </br> neegzistuoja.

Kiti dažni turinio žymenys yra <ul>, <ol> ir <li>. <ul> apima paprastą sąrašą su taškiukais. <ol> apima sunumeruotą sąrašą. <li> yra šių abiejų sąrašų vieno punkto žymė: <ul> žymės viduje gali būti daug <li> žymenų.

Beveik visų šių blokinių turinio žymenų pavyzdžius galima rasti šio puslapio kode. Jie vadinami blokiniais žymenimis nes jie eina žemyn vienas po kito, pradėdami naujas eilutes. Du blokiniai elementai, net jei abu yra po vieną žodį, vis tiek bus vienas po kitu, kaip blokeliai. Be to, visi blokiniai elementai automatiškai turi CSS taisyklę display: block;.

Tekstiniai elementai

Priešingai nei blokiniai elementai, tekstiniai elementai skirti paskiriems žodžiams ir frazėms. <strong> pastorina tekstą, <em> palenkia tekstą, <a href="http://example.com"> padaro tekstą nuoroda. Tekstiniai elementai automatiškai turi CSS taisyklę display: inline;.

Blokiniai elementai gali viduje turėti kitus blokinius elementus ir tekstinius elementus. Tekstiniai elementai viduje gali turėti kitus tekstinius elementus (tekstas gali būti pastorintas ir palenktas), bet negali turėti blokinių elementų. Antraštės yra blokiniai elementai. Vadinasi, nuoroda antraštėje <h2><a> ... </a></h2> yra teisinga, o antraštė nuorodoje <a><h2> ... </h2></a> - neteisinga.

Kiti elementai

Farm truck

Paveikslėliai yra pusiau tekstiniai, pusiau blokiniai, ir įterpiami su <img src="http://example.com/logo.png"> žyme. Paveikslėliai neturi savo uždarymo žymens, t.y., </img> neegzistuoja.

Vieni dažniausių HTML elementų yra <div> ir <span>. Jie naudojami ten, kur reikia kažkokio elemento dėl stilistinės priežasties, bet tas elementas neturi turinio prasmės. <div> yra toks "beprasmis" blokinis elementas, o <span> yra analogiškai beprasmis tekstinis elementas. Žemiau esančiame JavaScript laikrodžio pavyzdyje rodyklės ir jų šešėliai yra <div> elementai: norint sukurti tokį efektą reikėjo kažkokio elemento, bet paragrafai ar antraštės netiktų, nes tai nėra paragrafas ar antraštė.

Galiausiai, du paskutiniai svarbūs elementai yra <link rel="stylesheet" href="..."> (be uždarymo) ir <script src="..."></script>. <link> pakrauna nurodytą CSS failą, o <script> pakrauna JavaScript failą. Šio puslapio kodo komentaruose tai aprašyta detaliau.

Galiausiai, detalią informaciją apie kiekvieną žymenį, su naudojimo pavyzdžiais, galimais atributais ir t.t. galima rasti Mozilla Developer Network portale, HTML sekcijoje.

CSS

CSS yra aprašomasis dizainas. Čia kuriame vaizdą ne vizualiai dėliodami
elementus ar pasirinkdami šriftą iš sąrašo, o aprašydami tai kodu.
Ir nors tai sudėtingiau, tai leidžia sukurti galingas dizaino sistemas

CSS (Cascading Style Sheets) yra kalba, skirta aprašyti elementų išvaizdą. HTML savyje neturi jokio dizaino - visas dizainas gyvena CSS failuose. Su CSS galima keisti spalvas, šriftus, dydžius, tarpus, lygiavimą... CSS turi daugiau nei šimtą įvairių taisyklių, kurias galima pritaikyti elementams. CSS failo struktūra yra labai paprasta, ir susideda iš kodo blokelių, kurių kiekvino pradžioje yra selektorius, po jo seka {, taisyklės, ir uždarantis }: 

selektorius, kitas selektorius {
  taisyklė: reikšmė;
  kita-taisyklė: jos-reikšmė kartais-gali-būti iš-kelių-žodžių;
}

Tad iš tiesų norint suprasti CSS, reikia išmokti vos du dalykus: kokie yra galimi selektoriai, ir kokios yra galimos taisyklės. Jei trumpai, elementus galima pasirinkti pagal HTML žymės pavadinimą (p { ... } selektorius pritaiko dizainą visiems paragrafams), HTML klasę (.intro { ... } pritaiko dizainą visiems elementams, turintiems class="intro" atributą) ir HTML id (#menu { ... } pritaiko dizainą elementui, turinčiam id="menu" atributą). Mano rekomenduojamas būdas išmokti pasirinkti elementus per CSS yra žaidžiant CSS Diner žaidimą iki 12 lygio. Siūlau pažaisti kelis kartus, kol suprasite kaip skirtingi selektoriai susiję tarpusavyje.

Dydžių ir tarpų taisyklės

George R.R. Martin A Game of Thrones

Vienos dažniausiai reikalingų taisyklių yra panaudotos šiame pavyzdyje. Šio ir kitų pavyzdžių CSS kodas yra detaliai pakomentuotas, ir jį galima patogiai peržiūrėti naudojantis Chrome naršykle.

Šios taisyklės yra dydžio (width ir height), atstumų ir tarpų (margin sukuria tarpus aplink elementą, o padding elemento viduje), rėmelio (pavyzdys turi viršaus rėmelį - raudoną juostelę - su border-top taisykle), spalvos (color keičia teksto spalvą) ir fono (tiek su spalva, tiek su tekstūra, per background taisyklę). Paskutinis elemento pagražinimas yra šešėlis, kurį lengva aprašyti su box-shadow taisykle. Viskas detaliai pakomentuota CSS faile.

Tipografijos taisyklės

The morning had dawned clear and cold, with a crispness that hinted at the end of summer. They set forth at daybreak to see a man beheaded, twenty in all, and Bran rode among them, nervous with excitement. This was the first time he had been deemed old enough to go with his lord father and his brothers to see the king's justice done. It was the ninth year of summer, and the seventh of Bran's life.

CSS turi labai galingas tipografijos galimybes. Tekstui galima keisti šriftą su font-family, šrifto dydį su font-size, eilutės aukštį su line-height, pastorinti su font-weight: bold;, palenkti su font-style: italic;... Taip pat šis pavyzdys demonstruoja float taisyklę, kuri paima elementą ir numeta jį į nurodytą pusę, sulaužydama standartinį teksto bloką. Taip pasiektas didelės pirmosios raidės efektas.

Retesnės taisyklės ir Web šriftai

  • House Stark
  • House Lannister
  • House Targaryen
  • House Baratheon
  • House Martell
  • House Tyrell
  • House Bolton
  • House Tully
  • House Greyjoy
  • House Arryn
  • House Frey
  • House Baelish

Dar vienas pavyzdys parodo kelias įdomesnes CSS galimybes. CSS paslėpė <ul> sąrašo taškelius ir nuėmė atitraukimą nuo krašto, sudėjo tekstą į tris kolonas ir pakeitė lygiavimą. Kiekvienam punktui uždėtas apatinis rėmelis. Be to, tekstas naudoja specialų šriftą "Metamorphous", kuris pačioje pirmoje CSS failo eilutėje pakraunamas iš Google Web Fonts.

CSS perėjimai, animacijos, transformacijos, filtrai

Hear Me Roar

– House Lannister –

Užvesk pelę ant bloko viršuje. Visai nieko? Šis pavyzdys yra pats sudėtingiausias ir kartu pats įspūdingiausias. Jis demonstruoja perėjimus (animatuotą pasikeitimą tarp skirtingų būsenų), transformacijas (elementų išdidinimą, pajudininimą) ir filtrus (blur'inimą). Visos šiame pavyzdyje panaudotos CSS taisyklės yra detaliai pakomentuotos CSS faile, tačiau, kaip galima įtarti, šis pavyzdys nėra lengviausiai suprantamas.

Bootstrap

Bootstrap yra populiauriausia pasaulyje CSS biblioteka.
Ji supaprastina išdėstymą, dizainą, leidžia naudotis
labai naudingais JavaScript pluginais.

Išdėstymas ir tinklelio sistema

col-md-6
col-md-4
col-md-2
col-md-2 col-xs-4
col-md-2 col-xs-4
col-md-2 col-xs-4
col-md-2 col-xs-4
col-md-2 col-xs-4
col-md-2 col-xs-4

Boostrap turi labai lanksčią išdėstymo tinklelyje sistemą. Ji yra labai detaliai ir su daug pavyzdžių aprašyta Bootstrap puslapyje, Grid sekcijoje. Būtent ją ir rekomenduoju naudoti kuriant puslapio išdėstymą: su ja paprasta sukonstruoti daug skirtingų išdėstymų, kurie labai lengvai gali adaptuotis prie skirtingų ekrano dydžių.

Jei trumpai: visas tinklelis turi būti įdėtas į elementą, kuris turėtų class="container". Tuomet visą dizainą reikia suskaidyti į horizontalius pjūvius. Kiekvienam tokiam pjūviui sukurti naują elementą su class="row". Galiausiai, šios eilutės viduje galima dėlioti vertikalius pjūvius, kolonas su class="col-md-8".

Ką reiškia col-md-8? Pirma dalis, "col", reiškia, kad tai yra kolona, vertikalus pjūvis. Nereikia nurodyti šių blokelių aukščių, tik plotį, todėl jie neretai atrodo kaip kolonos. "md" yra sunkiausiai perkandama, bet esminė dalis: ji reiškia, kad šita taisyklė (bloko plotis) galios tik tuomet, kai ekranas yra "medium arba didesnis". Jei taisyklė "negalioja", blokas yra pilno pločio, ir užima tiek vietos, kiek tik leidžia jį laikantis elementas. "Medium" yra vienas iš keturių ekrano dydžių etapų. "xs" yra pats mažiausias, "xs" taisyklės galioja visada. "lg" yra pats didžiausias, šios taisyklės galioja tik prie labai didelių langų. Galiausiai, "8" nurodo plotį. "12" yra maksimalus plotis, 100%. "8" yra du trečdaliai (8/12). Vienas elementas gali turėti kelias taisykles: pavyzdžiui, žemiau esantys šokantys bananai yra blokeliuose, kurie turi tiek col-md-2, tiek col-xs-4. Vadinasi, kai langas yra "medium arba didesnis", galioja taisyklė, kuri padaro blokelį šeštadalio ploto. Bet kai langas susiaurėja, lieka galioti tik "xs" taisyklė, ir blokelis tampa trečdalio pločio. Pabandyk susiaurinti šį langą, ir pamatysi, kaip viskas persidėlioja.

Visas šis puslapis sudėliotas per Bootstrap Grid sistemą, tad jame yra daug pavyzdžių. Dar kartą rekomenduoju perskaityti Bootstrap Grid dokumentaciją.

Kiti naudingi dalykai

Bootstrap, be tinklelio sistemos, turi dar labai daug naudingų dalykų. Visų pirma, jis suvienodina elementų išvaizdą tarp skirtingų naršyklių. Taip pat Boostrap turi ne vieną tiesiog naudingą klasę. Paveikslėliai su class="img-responsive" niekada nebus platesni nei juos laikantis elementas. Tai labai naudinga, nes tai leidžia turėti įvairaus dydžio paveikslėlius, kurie niekada nesugriauna dizaino ir neišlipa iš jiems skirtų rėmų. Analogiška klasė yra ir prie pločio prisitaikantiems video.

Dar vienas smulkus dalykėlis, kurį turi pilnai įdiegtas Bootstrap (šalia CSS folderio įdėjus Fonts folderį), yra ikonos.

Manau, kad kitą bilietą pirksiu per ir mokėsiu . Man labai patinka į iš viršaus.

Bootstrap jQuery pluginai

Nors JavaScript ir jQuery detaliau aprašytas žemiau, verta paminėti, kad Bootstrap turi nemažai labai gerų jQuery pluginų. Tarp jų pluginai atidaryti modalinius langus, sukurti tabus, parodyti informacinius burbuliukus, prikabinti elementus fiksuotoje vietoje...

Vienas galingiausių Bootstrap pluginų yra Karuselė. Ji leidžia rodyti turinį lyg skaidres, kurios juda horizontaliai.

JavaScript ir jQuery

JavaScript yra interneto puslapių programavimo kalba, su kuria galima
sukurti dinamiškas elgsenas, pluginus, reaguojančias animacijas...
Beveik viską, ką tik galima sugalvoti.
jQuery yra darbą su JavaScript suspaprastinanti biblioteka.

HTML yra turinio aprašymo kalba, CSS yra dizaino aprašymo kalba, tačiau nei HTML, nei CSS nėra "programavimo kalbos" tradicine prasme, nes su jomis negalima sukurti gyvos, veikiančios, reaguojančios programos. JavaScript yra tikra programavimo kalba, su kuria galima sukurti įdomius, dinamiškus tinklapius. Tačiau dėl savo galingumo JavaScript yra žymiai sudėtingesnė technologija nei HTML ar CSS, tad rekomenduoju pirma susigaudyti šiose technologijose. O jei esi pasiruošęs pridėti kažką tikrai originalaus ir gyvo savo puslapyje, išmokime programavimą!

Vienas geriausių būdų interaktyviai pažaisti ir išbandyti JavaScript yra "Web Console". Ją Chrome naršyklėje galima atsidaryti per meniu punktą "View → Developer → JavaScript Console". Atsidaro langas, panašus į chat'o. Jame galima vesti komandas, ir JavaScript jas įvykdo.

Kintamieji ir reikšmės

Programavime kintamieji yra lyg dėžutės su pavadinimais, kuriose gyvena reikšmės. Naują dėžutę pavadinimu "miestas" galima susikurti parašius var miestas;. Tuomet reikšmę į dėžutę galima "įdėti" parašius miestas = "Vilnius";. Galima ta pačia eilute ir sukurti dėžutę, ir į ją įrašyti reikšmę: var miestas = "Vilnius";.

JavaScript kintamieji gali turėti kelių skirtingų tipų reikšmes:

  • var tekstas = "Žodis"; - tekstinės reikšmės įrašomos į kabutes.
  • var skaicius = 3; - Pilnas (sveikasis) skaičius yra tiseiog skaičius.
  • var desimtainis = 3.14; - Skaičiai su dešimtosiomis dalimis rašomi su tašku vietoje kablelio.
  • Yra ir daugiau tipų (sąrašai, žodynai ir t.t.)

Veiksmai ir funkcijos

Su reikšmėmis galima atlikti veiksmus ir funkcijas. Su skaičiais galima atlikti matematinius veiksmus: var suma = 15 + (16 / 2);. Su tekstu galima galima atlikti įvairias transformacijas, paiešką ir panašiai. Atlikus var vardas = "Jonas".toUpperCase();, kintamojo "vardas" reikšmė bus "JONAS".

JavaScript programų esmė yra funkcijos. Funkcija yra kodo gabalėlis su pavadinimu. Funkcijas galima iškviesti, vienos funkcijos gali iškvieti kitas. Paprasta funkcija atrodo taip: 

function sudetis(pirmasSkaicius, antrasSkaicius) {
  var suma = pirmasSkaicius + antrasSkaicius;
  return suma;
}

Tokia funkcija nėra labai naudinga, bet ji turi visas funkcijai būdingas dalis: pavadinimą ("sudetis"), įvesties reiškmes ("pirmasSkaicius", "antrasSkaicius"), kodo gabaliuką (kartais funkcijos būna kelių šimtų eilučių ilgio) ir išvesties reikšmę ("return" grąžina reiškmę).

JavaScript pavyzdys

Šis pavyzdys demonstruoja visas pagrindines JavaScript galimybes: kintamuosius, jų reikšmes, funkcijas ir HTML elementų pasirinkimą per document.getElementById. Kiekvieną sekundę įvykdoma funkcija atnaujina laikrodžio rodyklių posūkio kampus.

Norint pilnai suprasti, kaip veikia JavaScript pavyzdys, reikia peržiūrėti tiek HTML kodą (jame yra elementai kiekvienai rodyklei), tiek CSS kodą (jame aprašytas visas laikrodžio dizainas), tiek JavaScript kodą (ten yra visas veikimas su daug komentarų).

jQuery

jQuery yra naudingų JavaScript funkcijų rinkinys, specialiai sukurtas jog palengvintų dinamiškų tinklapių kūrimą.

jQuery itin supaprastina vieną sudėtingiausių aspektų JavaScript: elementų pasirinkimą. Jei norime per CSS pakeisti paragrafo ar antraštės dizainą, naudojame selektorius prieš taisyklių bloką. CSS selektoriuose galima paprastai pasirinkti elementus pagal žymens tipą, klasę ar id atributą. JavaScript kode dažniausiai irgi norisi dirbti su konkrečiais elementais, tačiau pasirinkti norimą elementą nėra taip paprasta kaip CSS. Standartiškai tenka rinktis objektus pagal id atributą naudojantis document.getElementById funkcija... Tai nepatogu ir labai ribota.

Kai jQuery biblioteka įdedama į puslapį (kaip ji įdėta į šį), galima naudotis funkcija, kuri vadinasi $. Ji skirta pasirinkti elementus naudojantis tokiais pačiais selektoriais, kokie naudojami CSS: $("p.intro") pasirinks ir leis kode keisti visus paragrafus, kurie turi klasę "intro". jQuery selektoriai veikia taip pat, kaip CSS.

Pasirinktus elementus galima keisti, trinti, animuoti... jQuery turi labai daug funkcijų, kurios visos aprašytos su pavyzdžiais.

Galiausiai, jQuery yra labai praktiškai naudingas todėl, kad jam sukurta labai daug pluginų. Jų yra tūkstančiai, įvairiausioms reikmėms: animuotoms knygoms, galerijoms, vartotojo sąsajoms, įdomiam scrollinimui ir t.t. Net Boostrap savyje turi kelis jQuery pluginus. Pavyzdys žemiau naudoja jQuery pluginą Magnific Popup.

Kiti dalykai

Ši informacija turėtų praversti beieškant atsakymo:
pilno puslapio pavyzdys, Web Inspector, ir nuorodos į puslapius, kurie pravers.

Tinklapio pavyzdys: Portfolio

Žemiau esantis fragmentas yra puslapio pavyzdys. Nors jis neturi nepriklausomo CSS ar JavaScript failo (jam reikalingas CSS ir JS kodas yra kartu su visu kitu šio puslapio kodu), demonstruoja esminius puslapio sudedamuosius komponentus: Boostrap išdėstymą, paveikslėlių įterpimą, šriftus, animacijas ir net jQuery pluginą (paspaudus ant paveiksliuko, jis atsidaro ant užtamsėjusio fono - tai daro Magnific Popup pluginas).

Visas šio fiktyvaus puslapio turinys yra sukurtas Timothy J. Reynolds.

Timothy J. Reynolds

3D Illustrator

Animal Kingdom

Animal exploration and research. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis ipsam maxime esse illum, quam earum nam culpa reiciendis animi fuga fugit numquam, saepe deserunt iure atque in excepturi accusantium, sapiente.

Eksperimentavimas su Web Inspector

Labai galingas įrankis eksperimentavimui, klaidoms atrasti ir naujiems dalykams išbandyti yra "Web Inspector". Jį galima iškviesti Chrome right-clickinus bet kokį elementą ir pasirinkus “Inspect Element”. Atsidariusiame lange galima keisti puslapio turinį, dizainą, parsisiųsti naudojamus resurus, išbandyti JavaScript konsolę ir t.t.

Elements tabas yra skirtas interaktyviam HTML ir CSS keitimui. Galima keisti turinį, klases, dydžius, visų CSS taisykių reikšmes. Pakeitimai bus matomi gyvai, tačiau nebus išsaugoti į HTML ar CSS failą: jei norite išsaugoti, reikia tuos pačius pakeitimus atlikti kode, per redagavimo programą.

Resources tabas leidžia pamatyti visus puslapio naudojamus resursus: paveikslėlius, fontus, CSS failus ir t.t. Tai patogu tyrinėjant kitų sukurtus puslapius.

Console tabas yra interaktyvus chat'as su JavaScriptu. JavaScript įvykdys visas komandas, parašytas į esantį laukelį. Komandos vykdomos tiesiai puslapyje, tad taip galima eksperimentuoti su JavaScript ir jQuery galimybėmis, funkcijomis, pluginais.

Puslapio kūrimo darbų sąrašas

Žemiau esantis sąrašas nurodo darbus ir jų tvarką, kuria rekomenduoju kurti puslapius. Vienas žingsnis remiasi kitu, ir palengva vykdant darbus tokia, problemos neturėtų susikrauti į per didelę ar neįveikiamą krūvą.

  • Struktūra ir turinys

    Labai rekomenduoju pradėti ne nuo dizaino, o nuo turinio. Bet kokioje programoje siūlau susirašyti visą būsimą puslapio tekstą, susirinkti paveikslėlius. Tuomet turinys nulems dizainą, o ne atvirščiai.

  • Dizainas ant popieriaus

    Susirinkus visą turinį siūlau pradėti nuo dizaino ant popieriaus. Šio etapo tikslas yra išspręsti dizaino problemas dar prieš bandant visas mintis paversti į kodą. Dizainą taip pat galima kurti ir Photoshop, Illustrator ir t.t. Svarbu fokusuotis ne į detales, o dizaino problemų sprendimą.

  • Išdėstymas

    Apsibrėžus dizainą verta iš karto išspręsti vieną sudėtingiausių CSS problemų: išdėstymą. Verta naudotis Bootstrap, šiuo puslapiu ir t.t.

  • Turinio įdėjimas

    Kai puslapio išdėstymas veikia su darbiniu turiniu, verta sukurti visus puslapius su tikruoju turiniu. Tuomet puslapis turėtų būti naviguojamas, nors ir neatrodo nuostabiai.

  • Spalvos, šriftai ir grafika

    Kitas etapas yra dizaino sukūrimas. Čia jau verta kreipti dėmesį į detales, susikurti reikiamą grafiką, ir viską įgyvendinti su CSS.

  • Įdomybės: animacijos, efektai

    Kai puslapis atitinka statinę dizaino viziją, verta eiti žingsneliu į priekį ir sukurti dinamiką: elementams pridėti animacijas, perėjimus, prijungti norimus jQuery pluginus.

Domenai, talpinimas, statistika

Norint patalpinti sukurtą puslapį į internetą, jog visi galėtų atsidaryti ir pamatyti, reikia dviejų dalykų: adreso (domeno, kaip lekevicius.com) ir talpinimo (išsinuomuoti serverį, kuriame bus laikomi jūsų puslapio failai). Abu šie dalykai kainuoja pinigus: už adresus standartiškai mokama kas metus, o už talpinimą - kas mėnesį.

Adresai (domenai) yra registruojami specialiuose puslapiuose, ir kainuoja nuo 30Lt iki kelių šimtų litų per metus. Adresai yra registruojami centriniame registre, ir vieną adresą tiems metams gali užregistruoti tik vienas savininkas. Todėl patys geriausi, trumpiausi ir aiškiausi adresai neretai būna jau užregistruoti - pavyzdžiui, visi angliški žodžiai su '.com' galūne jau yra užregistruoti. Adresą galima registruoti daugiau nei vieneriems metams. Svetainės, kurias rekomenduoju adresų registravimui yra Interneto Vizija ir NameCheap.

Kitas reikalingas komponentas yra serveris talpinimui. Serveris yra specialus kompiuteris, paruoštas failų saugojimui ir pajungtas prie greito interneto. Tokius kompiuterius (arba dažniau tiesiog šiek tiek vietos viename iš tokių kompiuterių) galima išsinuomoti, dažniausiai mokant mėnesinį mokestį. Šiais laikais talpinimas neretai būna neribotos disko vietos ir neriboto duomenų srauto. Mano rekomenduojami serverių nuomos tiekėjai yra Serveriai.lt ir NameCheap.

Užsisakius adresą ir talpinimą juos reikia sujungti: jog adresas vestų į jūsų serverį. Tai daroma adreso nustatymuose keičiant NS (NameServer) įrašus. Konkretūs veiksmai ir reikšmės, į kurias reikia nustatyti NS įrašus, priklauso nuo adreso ir talpinimo tiekėjo. Jei tiek adresą, tiek talpinimą užsisakote iš to paties tiekėjo (Interneto Vizijos, NameCheap), sujungimas turėtų būti žymiai paprastesnis, gal net automatinis.

Kai viskas sujungta, belieka įkelti savo tinklapio failus į serverį. Tai dažniausiai daroma su FTP programomis. Geriausia iš blogų yra FileZilla. FTP prisijungimo informaciją turėtumėte gauti iš savo talpinimo tiekėjo. Tuomet beliks tik prisijungti prie serverio per FileZilla ir sutempti failus iš savo kompiuterio į serverį.

Galiausiai, sukūrus puslapį gali būti įdomu ar kas nors į jį ateina, ir jei ateina, iš kokio puslapio, kokios šalies, ko ieškodami. Tam naudojami statistikos rinkimo įrankiai. Iš jų pats populiariausias yra Google Analytics. Jis yra nemomakas, ir jį gana lengva įdiegti į puslapį: užtenka įklijuoti kelias jų duotas JavaScript kodo eilutes į puslapio HTML. Tuomet kiekvieną dieną galėsite detalią statistiką apie lankytojus.