HTML ja CSS algajatele

Kes soovib luua veebilehti, puutub varem või hiljem kokku HTML-iga. Seetõttu vallutame tulevastes videokoolitustes koos ilusa HTML-maailma. Te näete samm-sammult, mis selle keelega tegemist on ja kuidas saab sellega stiililehtede abil luua veebilehti. Alguses aga seisab üks küsimus: Mis asi see HTML ja stiililehed ikkagi on? Videokoolituse lõpus saate teada ka, millist tarkvara on vaja veebilehtede loomiseks ja testimiseks.

Erinevalt programmeerimiskeeltest nagu näiteks Java saab HTML-is kiiresti esimesi tulemusi saavutada ilma suurema sissejuhatuseta. Kõik, mida alguseks vajate, on redaktor ja veebibrauser. Selles videosõppekavas loote oma esimese HTML-dokumendi ja saate otse veebibrauseris väljundi. Lisaks saate teada, kuidas HTML-dokumendid ehk veebilehed on üles ehitatud ja millist põhistruktuuri nad järgivad.

Elementi, sildi ja atribuudi mõistete seost olete juba õppinud selle sarja esimeses osas. Nüüd on oluline, kuidas neid asju HTML-dokumentides praktiliselt kasutada. Selle video-koolituse lõpus saate teada, kuidas oma HTML-koodi süntaktilist korrektsust kontrollida.

Teie veebilehed ei koosne kindlasti ainult piltidest, vaid ka tekstidest. Ja tekstid peaksid, hea loetavuse huvides, olema korralikult struktureeritud. Selle jaoks pakub HTML palju elemente. Selles videokoolituses tutvustatakse olulisemaid teksti struktureerimise elemente. Lisaks saate teada, kuidas HTML-i enda märke varjata ja kuidas saab programmeerimisloendeid väljastada.

Heade tekstide loetavuse tagamiseks on vajalik mõistlik vormindamine. See hõlmab rohkem kui lihtsalt struktureerimiselementide nagu pealkirjad ja tekstilõigud. Näiteks HTML-is saab tsitaate märkida ja üksikuid osi esile tuua fettina või kursiivina. Selleks vajaliku ettevalmistuse tagab see videokoolitus.

Elemendid, millega te HTML-is ikka ja jälle kokku puutute, on nimekirjad. Muide, see kehtib mitte ainult tegevuste nimekirjade, kontaktandmete, vaid ka menüüde määratlemise kohta. Nimekirjad mängivad HTML-is seega väga olulist rolli. Põhjus piisav, et neid põhjalikult uurida. Selles videoõppes saate tutvuda kõigi nimekirjade variantidega, mida HTML pakub. Nende hulka kuuluvad loendnimekirjad, nummerdatud loendid, määratletud nimekirjad ja menüünimekirjad. Lisaks saate juhiseid, kuidas vajadusel nimekirju visuaalselt kohandada.

Tabelid mängivad veebisaitidel endiselt olulist rolli. See kehtib aga ainult andmete esitlemise kohta. Kui CSS-i veel ei olnud või seda veel brauserid tõeliselt ei toetanud, siis olid tabelid ka hoopis teisel eesmärgil: selleks kasutati diagrammide paigutamist. Selleks asetati tabelite lahtritesse iga lehelement eraldi. Kuid tänu CSS-ile kuuluvad sellest tulenevad diagrammitabeli koletised õnneks minevikku. Tänapäeval kasutatakse veebidisainis tabeleid ainult selleks, milleks need algselt ette nähtud on: andmete ülevaatlikuks kuvamiseks.

Sobivalt näivate tabelite puhul ei pea tingimata olema võrdne arv rakke ühes tabelireas. Selles videokoolituses õpetatakse, kuidas saate tabelirakke omavahel ühendada. Teises osas saate teada midagi tabelite märgistamise kohta. See aspekt on oluline, kuna nii saab külastajatele kohe näidata, millistest andmetest lõpuks räägitakse. Videokoolitus lõpeb põhjaliku ülevaatega HTML-tabelite kujundamisest. Just selles valdkonnas on võrreldes varasemate HTML-versioonidega palju muutunud.

Vaevalt ükski veebileht saab hakkama ilma graafikateta. Pole siis ime, et graafikateema võtab ka selles seerias olulise koha. Selles ja järgmistel videokoolitustel näidatakse, kuidas saate oma veebilehtedele lisada graafikat. Kuid alguses on oluline teine ​​aspekt: Millised pildiformaadid sobivad üldse veebikasutamiseks? Teises osas räägitakse sellest, kuidas pilditeed viitida saab.

Kuidas pilte üldiselt viidata, näidati eelmises osas. Sellega pole aga piltidega seotud võimalused veel kaugeltki ammendunud. Tegelikult saab pilte täpsemalt kirjeldada vastavate atribuutide abil. Sellest räägitakse sel video alguses. Teises osas kirjeldatakse, kuidas pilte sildid saab realiseerida HTML5 süntaksiga.

Interneti supisool on võimalus sisu hüperlingi abil omavahel ühendada. Kui neid hüperlinke ei oleks, ei oleks tänapäevane internet ette kujutatav. Milliseid variante pakub HTML teile hüperlingi definitsioonide osas, saate teada sellest ja järgmisest videokoolitusest.

HTML pakub hüperlingide osas oluliselt rohkem võimalusi kui seda näidati eelmises videokoolituses. Näiteks saate määratleda e-posti viited ja pakkuda allalaadimiseks faile. Neid ja teisi hüperlingi variante saate sellest videokoolitusest õppida.

Ette ära mainides: Just HTML5-s on vormid teinud hiigelsuure arenguhüppe. Tänu mitmetele uutele väljatüüpidele on võimalik luua väga huvitavaid vorme. Neid uusi võimalusi saate muidugi veel tundma õppida. See videokoolitus alustab aga vajalike tööriistadega, mida vormide defineerimiseks vaja on. Alguses keskendutakse üherida-sisestusväljade loomisele. Näete, kuidas neid defineerida saab, kuidas neile eelnevalt väärtusi määrata ja kuidas neid määramatuks seada. Samuti saate õppida parooliväljade määratlemist. See on lõppkokkuvõttes väljatüüp, mida võib aeg-ajalt vaja minna.

Selles videos õpite tundma veel mõningaid väljavaldajaid, millega saate oma vorme varustada. Konkreetselt on jutt valikuväljadest, raadionuppudest ja märkeruutudest. Kõik need on olulised elemendid, mida vormides ikka ja jälle vaja läheb. Seega tasub neile ja teistele elementidele täpsemalt pilk peale heita.

HTML5-ga on vormide osas toimunud palju muutusi. Piisavalt põhjust selleks, et põhjalikult uurida uusi vormifunktsioone, mis nüüd saavad kasutamiseks. Lõpp on lihtsate sisestusväljadega, sest nüüd on võimalik määratleda ka liugureid, kuupäevavälju jne - ja seda kõike ilma JavaScripti kasutamata.

HTML5-vormide maailmaga sissejuhatuse tegi eelmine videokoolitus. Siiski pole sellel teemal veel kaugeltki lõppu. Tegelikult pakub HTML5 sellel alal märksa rohkem.

HTML5-s on lisaks tutvustatud väljatüüpidele ka mitmeid teisi huvitavaid aspekte. Näiteks on nüüd võimalik väga väikese vaevaga realiseerida vormiväljade automaatne täiendamisfunktsioon Google'i eeskujul. Neid ja teisi asju näidatakse selles videos.

Kes HTML5-ga tegeleb, ei saa semantika teemat vältida. Selles ja järgmistes videos õpite tundma HTML5-s kaasa toodud olulisemaid elemente, millega saate dokumente mõistlikult struktureerida. Tegelikult on see loogiline struktureerimine hädavajalik, kui soovite oma veebilehed tulevikukindlaks teha.

HTML5 toob endaga mitmeid uusi struktureerimiselemente. Millised need põhimõtteliselt on, on eelnevas videos juba näidatud. Nüüd on aeg neid elemente praktiliselt kasutada. Need elemendid tagavad dokumentide semantilise struktureerimise. Selle video koolituse käigus saate esmalt tutvuda kahe elemendiga article ja section. Need tagavad HTML-dokumentide põhjaliku struktuuri. Selle video lõpus vaadatakse veel kord erinevusi, mis on div, article'i ja sectioni vahel.

HTML5-saab dokumente jaotada mitte ainult artiklitesse ja jaotistesse. Tegelikult on olemas pealkiri, jalus ja ka teised paljud lisaelemendid semantilise struktureerimise jaoks. Need on kindlasti väärt lähemalt uurimist.

Selles semantikaelementide seeria viimases videosarjas saate tutvuda täiendavate struktureerimiselementidega. Tegelikult pakub HTML5 ka elemente navigeerimisaladele, märkustele ja kokkuvõtetele.

Eelnevat HTML-versioonides oli multimeedia sisu lisamine pain inimene. Objekti- ja embed-elementide kombinatsiooniga prooviti viia videod ja heli veebilehele. Kas manustatud video saab ka tegelikult taasesitada, oli küsitav. HTML5-s on selles valdkonnas tehtud palju edusamme.

Kuidas lisada videoid, olete näinud. Muidugi pole videod ainus asi, mida saate oma külastajatele veebisaidil esitada. Selles videos treeningus kirjeldatakse, milliseid võimalusi HTML5 pakub teile helifailide ja Flash-filmide lisamiseks. Sest ka neid asju tuleb aeg-ajalt oma lehel kuvada.

HTML5-s ei ole enam raame. Nende nimekaimud, iFrames, on aga jõudnud uude HTML-ajastusse ja on HTML5-s olemas. Samal ajal kui klassikalised raamid jagavad lehte sõltumatutesse piirkondadesse, saab iFrame-de kaudu lisada veebilehtedesse suvalisi ressursse.

HTML on mõeldud sisu struktureerimiseks. Kui aga jõuab lehe kujundamiseni, tulevad mängu kaskaadlehed (CSS). Ainult CSS-i ja HTML-i kombineerimisel on võimalik teha igavast HTML-struktuurist kutsuvaid veebilehti. Seega on põhjust lähemalt uurida CSS-i.

Märksõna, millega CSS-iga seoses ikka ja jälle kokku puutute, on "valijad". Nende valijate abil määratakse lõpuks kindlaks elemendid, mida CSS-iga vormindada tuleb. Selles videos õppides saate tundma esimesi valijaid. Tutvustatakse elemendi-, ID- ja universaalvalijaid. Nendega tuleb teil tegelda iga päev, kui kujundate oma veebilehti CSS-iga.

Mõned selektorid esitati eelmises videosõppevideos. Muidugi pakub CSS aga veel palju teisi selektoreid.

Selles viimases valija videokoolituses tutvustan teile väga erilist valijatüüpi. Need on nn pseudoklassid ja pseudoelemendid. Need on valijad, mis ei viita konkreetsetele HTML-elementidele, vaid genereeritakse väljundseadmest.

Selles ja järgnevates videotreeningutes tutvustan teile kõige olulisemaid CSS omadusi. Sellega ei ole eesmärk tutvustada CSS-i viit, vaid pigem anda aimdus sellest, mida CSS-iga saavutada saab. Alustame siin koos kirjastiiliga. Selles videotreeningus tutvustatakse kõiki neid asju, mis on seotud nn fontidega. Olge teadlikud, et kirjastiiliga on veel muid omadusi, mis näidatakse järgmises videotreeningus.

Selles videos koolitusel esitletud CSS-atribuutide abil saab teksti ja märke visuaalselt kohandada. Näiteks on võimalik muuta tühikuid üksikute tähtede vahel ja joondada teksti. Need atribuudid aitavad teil teksti atraktiivselt esitada.

Loomulikult ei tohi CSS-is puududa ka värvide määratlused ja graafilised taustad. Vastavad omadused tutvustatakse selles videos. Tegelikult pakub CSS selles valdkonnas palju võimalusi. Nii et saab mitte ainult lihtsalt värve ja pilte määratleda. On võimalik luua korduvaid taustagraafikuid.

Eriti tegeledes veebilehtede kujundamisega puutute kokku välismarginaalide ja vahedega seotud määratlustega. Muide, selle seeria viimastes videosõppekursustes viiakse ellu põhjalik näideprojekt, kus näidatakse praktiliselt ka nende ja teiste CSS omaduste kasutamist.

CSS pakub tekstilõikudele ja -plokkidele mõningaid huvitavaid omadusi, mida ma teile ei soovi kuidagi kätte jätta. Näiteks saate tekstilõike vasakule ja paremale välja joondada.

Kui jutt puudutab raame, siis mõtleb enamus kindlasti esmalt tabelitele. Ja tõepoolest, raamid on seoses tabelitega olulises rollis. Ent CSS abil on võimalik raame lisada ka teistele elementidele. Ning kuidas need raamid lõpuks välja näevad, saab samuti CSS määratlustega täpselt määrata.

Kuidas nimekirju määratleda, teate tõenäoliselt juba ammu. See on lõppude lõpuks selles sarjas põhjalikult näidatud. Ehkki loendid ei pruugi vaatamata sellele olla šikid. Et need visuaalselt meeldivamad välja näeksid, on olemas vastavad CSS-omadused. Millised need on ja kuidas neid kasutada, saate teada sellest videokoolitusest. Teises osas keskendutakse nn loenduritele, mis võimaldavad rakendada ka keerulisemaid nummerdusi.

Kui tegemist on veebilehtede kujundamisega, saab nn kastimudelist teie pidev kaaslane. Sest lõppkokkuvõttes määratakse sellega kindlaks, kuidas ja kuhu elemendid paigutatakse.

Saitidel elementide soovitud kohtadesse paigutamiseks peate kasutama teatud CSS-omadusi.

Eelmises videoseminariis mainiti juba lühidalt nn hõljumise põhimõtet. Teema on aga nii kompleksne, et siin visatakse veel üksikasjalik pilk sellele hõljumisele. Tegelikult on see otsustav mõiste CSS-is. Ainult siis, kui seda teemat mõistetakse, on võimalik luua veebilehti.

Senises videosõppe kursuses selgitati HTML-i ja CSS-i töötamise põhimõtteid. Nüüd peaksid muidugi juba saama esimesi vilju korjata. Järgmistes videosõppe kursustes luuakse näidisveebileht samm-sammult. Selles videosõppe kursuses õpite kõigepealt tundma erinevaid paigutusvõimalusi. Õige paigutusvormi valik peaks alati olema teie veebilehe kujundamise mõtete alguspunkt.

Ma eeldan meie praktilise projekti puhul tavapärast veergude paigutust. Enne kui ma aga selle projekti reaalajas ja värviliselt esitlen, tahan teile väga konkreetset näidata, kuidas saate ise veergude paigutusi rakendada. Siin keskendume kaheaegsetele ja kolmeveerulistele paigutustele, kuna need moodustavad endiselt enamus veebisaitide aluse.

Järgmistes videos õpetustes näitan teile, kuidas lehekülje kujundust samm-sammult rakendada. Selleks on mitmesuguseid lähenemisviise. Sageli tehakse kujundused Photoshopis. Iga lehelement tuleb seejärel välja lõigata ja koguda CSS-i ja HTML-i abil uuesti üheks veebileheks. Seda tehakse siin samamoodi. Siiski kasutan Photoshopi asemel tasuta saadaval olevat GIMP-i. Kirjeldatud samme saab aga ka Photoshopis järgida.

Esimene sammud oma paigutuse loomise suunas tehti eelmises videokoolituses. Loomulikult puudub veel mitu elementi. Need lisatakse selles videokoolituses. Kui paigutus on valmis, jätkatakse lõikamisega, nn viilimisega. See on lõpuks samm, mille abil on võimalik loodud disain HTML-i ja CSS-i kaudu praktiliselt ellu viia.

Te olete kujunduse loonud. Nüüd on aeg selle praktiliseks rakendamiseks. Selles videokoolituses loome koos veebilehe HTML-põhiraami.

Lehekülje põhiraamistik on paigas, kuid hetkel on see üsna minimaalne. Selles videosõppe kursuses laiendatakse lehekülje sisu. Esmalt keskendutakse menüüle, mis asub lehe ülaosas. Sellele järgnevad parem ja alumine menüü.

Otsustav aspekt atraktiivse veebilehe loomisel on loomulikult selle tekstikujundus. Selle sarja käigus olete juba tuttavaks saanud võimalustega, mida HTML ja CSS pakuvad teksti kujundamise osas. Selles videos treeningus kasutatakse neid võimalusi, et veebilehte kaunimaks muuta. Muide, me ei pühendu ainult klassikalistele variantidele. "Eksootiliste" fondide kasutamise võlusõna on siin @font-face.

Tavaliselt peaks andma oma külastajatele võimaluse kontakteerumiseks. Kõige lihtsamal juhul saab kirjutada üles telefoni numbri ja/või oma e-posti aadressi. Seda saab teha nii, kuid see ei ole väga mugav külastajatele. Seetõttu loome selles videos treeningus vormi, mille kaudu külastajad saavad meiega kergesti ühendust võtta. Ja loomulikult kasutame HTML5 ja CSS3 poolt pakutavaid võimalusi.

Vormi põhiraamistik ja täielikult põhiline kujundus on määratletud ja lõpule viidud. Ja tegelikult näeb vorm praegu juba üsna veetlev välja. Tänu CSS3-le on aga palju rohkem võimalusi vormi visuaalseks kaunistamiseks. Selles videosõppes kujundatakse vormi veelgi.

Juba praegusel hetkel olete kindlasti oma veebilehe arendusse palju aega ja vaeva panustanud. Alustades kontseptsioonist, kujundades paigutust ning viies selle HTML-i ja CSS-i kujul ellu. Seega on piisavalt põhjust, et lõpuks maailmale oma veebilehte tutvustada. Just sellest räägib see videoõpe. Näitan teile, kuidas saate veebilehe avalikustada. Alguses saate teada, kuidas valida õige teenusepakkuja ja sobiv veebiserveri pakett. Seejärel laaditakse andmed populaarse FileZilla abil serverisse üles. Ja siis, noh, siis on veebileht tõepoolest avalikult kättesaadav.

Antud videos koolitusel soovin teile anda väikese ülevaate õigest arenduskeskkonnast veebilehtede loomiseks. Kes on juba täispikkaid veebilehti või väiksemaid üksiklehti kirjutanud, omab tavaliselt juba neid redaktoreid ja võib selle video vahele jätta.

Näidatakse:
DreamWeaver
Panic Coda
Panic Transmit: http://panic.com/transmit/
Filezilla: http://filezilla.de/

HTML5-Boilerplate on võimas mall HTML5 ja CSS3 veebisaitide jaoks; see teeb HTML5 võimalikult hästi CrossBrowser-ühilduvaks ja sisaldab mõningaid väga häid koodimallisid JavaScripti, CSS3 ja muidugi ka HTML'i valdkonnas.

Selles videos koolituses tahaksin teile neid funktsioone tutvustada. HTML5 ja CSS3 valdkonnas pole praegu paremat malli alustamiseks.

Käesolevas videosõnastikus sooviksin teile tutvustada mõningaid väga kasulikke tööriistu, millega saab arendada HTML5 ja CSS3 koodi.

Selle hulka kuuluvad:
html5css3box.com
kuler.adobe.com (nüüd https://color.adobe.com/de/create/color-wheel)
css3generator.com
typetester.org
google.com/webfonts
cufon.shoqolate.com
videojs.com