HTML ir CSS pradedantiesiems

Kas nori kurti tinklalapius, anksčiau ar vėliau susiduria su HTML. Todėl ateinančiuose vaizdo mokymuose bendrai išsiaiškinsime gražią HTML pasaulį. Žingsnis po žingsnio pamatysite, ką reiškia ši kalba ir kaip su ja galima kurti tinklalapius kartu su stiliaus lapais. Tačiau pradžioje stovi klausimas: kuo iš tikrųjų yra HTML ir stiliaus lapai? Be to, šio vaizdo mokymo pabaigoje sužinosite, kokią programinę įrangą reikia turėti, norint kurti ir testuoti tinklalapius.

Priešingai nei programavimo kalbos, tokios kaip Java, HTML be didelių pastangų galite labai greitai pasiekti pirmuosius rezultatus. Viskas, ko jums reikia pradžiai, yra redaktorius ir naršyklė. Šioje vaizdo pamokoje jūs sukursite pirmąjį HTML dokumentą ir tiesiai naršyklėje gausite išvestį. Be to, šaliai sužinosite, kaip HTML dokumentai, vadinasi, interneto svetainės, yra sudaryti arba kokia pagrindinė struktūra joms būdinga.

Sąsają tarp sąvokų Elementas, Žymė ir Atributas jūs jau žinote iš šios serijos pirmojo dalies. Dabar svarbu, kaip šias dalykas praktiškai galima naudoti HTML dokumentuose. Šio vaizdo mokymo pabaigoje sužinosite, kaip galite patikrinti savo HTML kodą dėl sintaksinės teisingumo.

Jūsų svetainės tikrai bus sudarytos ne tik iš paveikslėlių, bet ir iš teksto. Ir tekstai, nuo pat geros skaitymo patirties, turėtų būti racionaliai struktūrizuoti. Tam HTML turi daugybę elementų. Šiame vaizdo mokymo kurse bus pristatyti svarbiausi tekstų struktūrizavimo elementai. Be to, sužinosite, kaip masquioti HTML specifinius simbolius ir kaip išvesti programos sąrašus.

Geram tekstų skaitymui būtina tinkama formatavimo sistema. Tai reiškia daugiau nei tik struktūros elementai, tokiu kaip antraštės ar teksto paragrafai. Pavyzdžiui, HTML kalboje galite žymėti citatus ir paryškinti tam tikras teksto dalis. Šį reikalingą įrankį pateikia šis vaizdo kursas.

Elementai, su kuriais dažnai susidursite HTML yra sąrašai. Tai galioja ne tik užduočių sąrašams, kontaktams, bet taip pat ir meniu apibrėžimams. Sąrašai turi labai svarbią rolę HTML. Pakankamai priežasčių atidžiai jų pažvelgti. Šiame vaizdo mokymo materiale susipažinsite su visomis sąrašų variantais, kuriuos siūlo HTML. Tai yra punktuoti sąrašai, numeruoti sąrašai, apibrėžimų sąrašai ir meniu sąrašai. Be to, gausite patarimų, kaip atitinkamai pritaikyti sąrašus pagal poreikį.

Lentelės vis dar atlieka svarbų vaidmenį interneto svetainėse. Tačiau tai taikoma tik pristatant duomenis. Kuomet dar nebuvo CSS, arba jis nebuvo tinkamai palaikomas naršyklėse, lentelės turėjo visiškai kitą paskirtį: buvo naudojamos išdėstymams kurti. Lentelės langeliuose buvo dedami atskiri puslapio elementai. Dėl to kylančios iš šio proceso išdėstymų lentelės-monstrai dėka CSS dabar laimei priklauso praeičiai. Šiandien interneto dizaine lentelės naudojamos tik tam, kam iš tikrųjų buvo numatytos: duomenų aiškiam atvaizdavimui.

Der neteisingas rodantis lentelių struktūros klausimo poreikis nepavalda privalėti būti sudarytas iš pačiai identiškos eilučių skaičiaus. Šiame vaizdo mokymo įraše pavaizduota, kaip galite sujungti lentelių ląsteles. Antrajame ruože sužinosite apie lentelių antraštės rašymą. Šis aspektas yra svarbus, nes taip galima parodyti lankytojams, apie kokių duomenų galiausiai yra kalba. Vaizdo mokymas užbaigiamas išsamūs pažvelgimas į lentelių projektavimą naudojant HTML. Nes būtent šioje srityje labai daug pasikeitė palyginus su ankstesnėmis HTML versijomis.

Beveik nė viena svetainė neapsieina be grafikos. Nepersigalvojant, grafikos tema taip pat užima svarbų vietą šioje serijoje. Šiame ir būsimuose vaizdo mokymuose bus parodyta, kaip įtraukti grafiką į jūsų svetaines. Bet pradžioje iškyla kita svarbi problema: kokios vaizdo formos iš viso tinka interneto naudojimui? Antrame dalyje bus aptariama, kaip nurodyti vaizdų kelią.

Kaip pagrindiniu būdu nuorodos gali būti susietos su paveikslėliais, buvo parodyta ankstesniame skyriuje. Tačiau paveikslėlių atžvilgiu tai dar nėra galutinis rezultatas. Iš tikrųjų, paveikslėlius galima papildomai aprašyti naudojant atitinkamus atributus. Apie tai daugiau bus kalbama šio vaizdo pradžioje. Antrajame skyriuje bus aprašyta, kaip galima naudoti paveikslėlio aprašus naudojant HTML5 sintaksę.

Interneto sūrio pagrindas yra galimybė susieti turinį naudojant hiperlinks. Jei neegzistuotų šie hiperlinks, dabartinis internetas nėra įsivaizduojamas. Kokių galimybių suteikia jums HTML hiperlinksų apibrėžimuose, sužinosite šioje ir sekančioje vaizdo pamokoje.

HTML teikia daug daugiau galimybių hiperparinktims nei tai, kas buvo parodyta ankstesniame vaizdo mokymesi. Taigi galite apibrėžti, pavyzdžiui, el. pašto nuorodas ir siūlyti failus parsisiųsti. Šias ir kitas hiperparinkčių variantus išmoksite šiame vaizdo mokymesi.

Norėdamas tai iš anksto paminėti: Lygiai HTML5 formos padarė kvantinį šuolį. Dėka daugelio naujų laukų tipų galima kurti labai įdomias formas. Šias naujas galimybes jūs, žinoma, dar išmoksite. Bet šiame vaizdo mokymo įraše pradedame su būtinu įrankių rinkiniu, kurį reikia formoms apibrėžti. Pradžioje aptariamas vienos eilutės įvesties laukų kūrimas. Matysite, kaip juos apibrėžti, kaip juos užpildyti reikšmėmis ir nustatyti, kad jie nebūtų redaguojami. Taip pat išmoksite apibrėžti slaptažodžio laukų apibrėžimą. Galų gale tai svarbus laukų tipas, kurį galima naudoti laikui bėgant.

Šiame vaizdo įraše jūs sužinosite daugiau lauko tipų, kuriuos galite pridėti savo formoms. Konkrečiau, čia kalbama apie pasirinkimo laukus, radijo mygtukus ir žymimieji langeliai. Visi šie elementai yra svarbūs komponentai, kurių formose dažnai reikia. Pakankamai pagrindo taigi atkreipti dėmesį į šiuos ir kitus elementus.

Su HTML5 daug pasikeitė, ypač formas. Pakaks pasižvalgyti ir susipažinti su naujomis formas ne naudojant JavaScript.

HTML5 formų pasaulio pradžią atvėrė ankstesnis vaizdo įrašų mokymas. Tačiau galų gale dar neatėjo laikas pasistūmėti į priekį. Iš tikrųjų, HTML5 šioje srityje turi daug daugiau pasiūlymų.

HTML5 be dalyvaujantys laukų tipai taip pat turi daug kitų įdomių aspektų. Taip pat galima labai lengvai įdiegti automatinio užpildymo funkciją formų laukams pavyzdžiu iš Google. Šios ir kitos svarbios funkcijos bus aptartos šiame vaizdo kursų.

Kas susipažinęs su HTML5, negali išvengti semantikos temos. Šiame ir kituose vaizdo treniruotėse jūs išmoksite svarbiausius HTML5 elementus, su kuriais galėsite nuosekliai struktūruoti dokumentus. Iš tikrųjų, ši loginė struktūravimas yra būtinas, jei norite, kad jūsų svetainės būtų apsaugotos ateityje.

HTML5 pristato daugybę naujų struktūros elementų. Pagrindiniai iš jų jau buvo parodyti ankstesniame vaizdo mokymo įraše. Dabar tikslas yra praktiškai naudoti šiuos elementus. Nes tai yra elementai, kurie užtikrina dokumentų semantinę struktūrizavimą. Šiame vaizdo mokyme jūs iš pradžių susipažinsite su dviem elementais: article ir section. Tie suteikia pagrindinę HTML dokumentų struktūrą. Be to, šio vaizdo įrašo pabaigoje bus dar kartą aptariami skirtumai tarp div, article ir section elementų.

HTML5 dokumentuose ne tik gali būti suskaidyti į straipsnius ir sekcijas. Iš tikrųjų yra daugybė papildomų elementų, tokie kaip antraštė, poraštė ir kt., skirtų semantinei struktūrizacijai. Jie tikrai verti būti išsamiau ištirti.

Šio semantikos elemento serijos paskutiniame vaizdo mokyme jūs išmoksite kitus struktūravimo elementus. Iš tikrųjų HTML5 taip pat siūlo elementus navigacijos sričioms, žymėjimams ir santraukoms.

Anksčiau HTML versijose įterpti daugiamedžio turinio buvo tikras iššūkis. Bandydama įtraukti vaizdo įrašus ir garsą į tinklalapį, buvo naudojama objekto ir įterpimo elementų kombinacija. Ar pavyko sėkmingai atkurti įterptą vaizdo įrašą, buvo abejotina. HTML5 srityje taip pat įvyko daug pokyčių.

Kaip įtraukti vaizdo įrašus, jūs matėte. Aišku, vaizdo įrašai nėra vienintelė informacija, kurią galite rodyti savo svetainės lankytojams. Šiame vaizdo kursė 's apmokymai aprašo, kokių galimybių HTML5 suteikia jums įtraukti garso failus ir Flash filmus. Todėl šie dalykai kartais turėtų būti rodomi jūsų svetainėje.

Raštai HTML5 nebėra. Jų vardai draugai, išoriniai raštai, tačiau taip pat pavyko į HTML5 era ir jie yra laive. Klasikiniai raštai dalija puslapį į nepriklausomus plotus, o per iFrames galima įtraukti bet kokias išteklius į tinklalapius.

HTML tarnauja turinio struktūrą. Kai einate prie puslapių dizainavimo, suka Cascading Stylesheets (CSS) Į žaidimą. Nors tik derinys tarp CSS ir HTML leidžia paversti nuobodžią HTML struktūrą į patrauklias tinklalapių. Pakankamai pagrindo, kad bent išsamiau pažvelgtume į CSS.

Vienas iš terminų, su kuriais dažnai susidursite, dirbdami su CSS, yra „selektoriai“. Šiais selektoriais galiausiai nustatomi elementai, kuriems bus apibrėžiamos CSS formatavimo taisyklės. Šiame vaizdo mokymo kursu jums bus pristatyti pirmieji selektoriai. Čia jums bus pateikti elementų, ID ir universalūs selektoriai. Su jais rasite rūpesčių kiekvieną dieną, kai kuriate savo tinklalapius naudodami CSS.

Kai kurie selektoriai buvo pristatyti ankstesniame vaizdo mokyme. Žinoma, CSS siūlo daugybę kitų selektorių.

Šiame paskutiniame selektorių vaizdo mokyme pristatysiu jums labai specialią selektorių formą. Tai yra vadinamosios pseudo klasės ir pseudo elementai. Tai yra toki kokie selektoriai, kurie nenurodo konkrečių HTML elementų, o yra sukuriama išvesties įrenginio.

Šiame ir ateinančiuose vaizdo mokymuose aš jums pristatysiu svarbiausias CSS savybes. Šiuo atveju svarbu pažymėti, kad čia nepristatysiu jums CSS žodynėlio. Priešingai, turėtumėte įgyti supratimą, ką galima padaryti su CSS. Pradėkime čia su teksto dizainu. Šiame vaizdo mokyme bus pristatyti visi dalykai, tiesiogiai susiję su taip vadinamais šriftais. Nepamirškite, kad dėl teksto dizaino yra daugiau savybių, kurios bus rodomos sekančiame vaizdo mokyme.

Šiame vaizdo mokymo įraše pristatytomis CSS savybėmis galima vizualiai pritaikyti tekstus ir ženklus. Pavyzdžiui, galima keisti atstumus tarp atskirų raidžių ir lygiuoti tekstą. Taip pat šios savybės jums padės pristatyti tekstus patraukliai.

Žinoma, CSS taip pat neturėtų trūkti spalvų apibrėžimų ir grafinių fono elementų. Atitinkami savybės bus pristatytos šiame vaizdo kursėlyje. Iš tiesų, CSS šioje srityje siūlo daugybę galimybių. Taigi ne tik galima nustatyti spalvas ir paveikslus. Taip pat galimos kartojančios fono grafikos.

Ypač kai kalbama apie tinklalapių maketavimą, jums teks susidurti su išoriniais paraštais ir atstumais. Beje, šios serijos paskutiniuose vaizdo įrašuose bus įgyvendintas išsamus pavyzdinis projektas, kuriame bus praktiškai parodytas šių ir kitų CSS savybių panaudojimo būdas.

CSS siūlo keletą įdomių savybių teksto paragrafams ir blokams, kurias norėčiau jums parodyti. Pavyzdžiui, galite paragrafus suvienodinti kairėje ir dešinėje pusėje.

Kai kalba eina apie rėmelius, daugelis turbūt pirmiausia pagalvoja apie lentelės. Ir iš tiesų rėmeliai kartu su lentelėmis atlieka svarbų vaidmenį. Tačiau naudojant CSS galima aprūpinti rėmais ir kitus elementus. Ir kaip galiausiai atrodys šie rėmai, taip pat galima aiškiai nustatyti naudojant CSS apibrėžimus.

Kaip apibrėžti sąrašus, jūs turbūt jau seniai žinote. Galų gale šiame serijos kontekste tai buvo išsamiai parodyta. Tačiau sąrašai iš prigimties nėra būtinai stilingi. Kad jie atrodytų patraukliai, yra atitinkamos CSS savybės. Kurių, ir kaip jas naudoti, sužinosite šiame vaizdo mokymo filme. Antrasis dalis bus apie tūkstančio, kurie leidžia įgyvendinti ir sudėtingesnius numeracijos būdus.

Kai kalbama apie tinklalapių maketavimą, vadinamasis dėžių modelis taps jūsų nuolatinė palyda. Galų gale tai nulems, kaip ir kur bus padėti elementai.

Norint galėti padėti elementus į norimus puslapio vietus, turėsite pasinaudoti labai konkrečiomis CSS savybėmis.

Ankstesniame vaizdo mokyme buvo trumpai aptartas taip vadinamas plūdantis principas. Vis dėlto, tema yra tokia sudėtinga, kad čia dar kartą būtų plačiau išnagrinėjamas tas plūdėjimas. Iš tikrųjų tai yra svarbus sąvoka CSS. Nes tik tada, kai suprantate šią temą, galite iš tikrųjų kurti tinklalapius.

Šiose iki šiol atliekamose vaizdo pamokose buvo aprašyti pagrindai, kaip dirbti su HTML ir CSS. Šiuo metu, žinoma, turėtų būti paimtos pirmosios vaisių. Todėl kitose vaizdo pamokose pavyzdinė svetainė bus kuriami žingsnis po žingsnio. Šioje vaizdo pamokoje tačiau, jūs pirmiausia susipažinsite su įvairiomis maketų variantais. Nes tinkamo maketavimo formos pasirinkimas visada turėtų būti pradinis jūsų svetainės dizaino koncepcijoje.

Aš mūsų praktikos projekte numatau tipišką stulpelių išdėstymą. Prieš pristatydama šį projektą tiesiogiai ir spalvotai, norėčiau labai konkretiškai parodyti, kaip patys galite įgyvendinti stulpelių išdėstymus. Čia bus sutelkta dėmesio į dvi- ir trisstulpės išdėstymus, galų gale jie iki šiol yra pagrindas daugumai tinklalapių.

Kituose vaizdo mokymuose parodysiu jums, kaip žingsnis po žingsnio įgyvendinti tinklapio išdėstymą. Tai galima padaryti keliais skirtingais būdais. Dažnai išdėstymai sukuriama naudojant „Photoshop“. Po to atskirus puslapio elementus iškirpti ir vėl juos sujungti į vieną tinklalapį naudojant CSS ir HTML. Taip pat tai yra daroma čia. Tačiau vietoj „Photoshop“ aš naudoju nemokamą „GIMP“. Aprašyti žingsniai tačiau gali būti atlikti ir naudojant „Photoshop“.

Pirmieji žingsniai link savo maketo buvo padaryti prieš tai buvusiame vaizdo mokyme. Žinoma, trūksta daugybės elementų. Šie bus pridėti šiame vaizdo mokyme. Kai maketas yra pasiruošęs, eikite prie iškirpimo, taip vadinamo "Slicen". Kadangi tai galiausiai yra darbo etapas, per kurį galima įgyvendinti sukurtą dizainą per HTML ir CSS.

Jūs sukūrėte išdėstymą. Dabar einame prie jo praktinio įgyvendinimo. Šiame vaizdo mokymo kurse kartu sukursime tinklapio HTML pagrindo struktūrą.

Puslapio pagrindinė struktūra stovi, tačiau vis dar atrodo ganėtinai susitaupęs. Šiame vaizdo mokymo metu, puslapio turinys bus toliau plėtojamas. Pirma šioje srityje yra meniu, kuris yra viršutiniame puslapio regione. Toliau sekasi dešinysis ir apatinis meniu.

Svarbus aspektas patraukliai interneto svetainei, žinoma, yra jos šrifto dizainas. Šioje serijoje jūs jau sutikote su galimybėmis, kurias jums siūlo HTML ir CSS dėl šrifto kūrimo. Šiame vaizdo mokymo kūrinyje šios galimybės bus išnaudotos siekiant pagerinti svetainę. Beje, susitelksime ne tik į klasikinius variantus. Raktinis žodis eksotiškų šriftų naudojimui čia yra @font-face.

Įprastai turėtume suteikti savo lankytojams galimybę susisiekti. Paprasčiausiu atveju, užrašote telefono numerį ir/arba el. pašto adresą. Tai galite padaryti, tačiau tai nėra itin patogu lankytojams. Todėl šiame vaizdo mokymo įraše mes sukursime formą, per kurią lankytojai galės labai paprastai susisiekti su mumis. Žinoma, naudosime HTML5 ir CSS3 mums suteikiamas galimybes.

Formos pagrindas ir visiškai pagrindinis formos dizainas yra apibrėžtas ir baigtas. Iš tiesų forma jau dabar atrodo gana patraukliai. Tačiau dėka CSS3 yra daugiau galimybių, jei kalbama apie formos vizualinį pagerinimą. Todėl šiame vaizdo mokyme forma bus šiek tiek pagražinta.

Jau dabar, tikrai jūs labai daug laiko ir darbo investavote į savo svetainės kūrimą. Pradedant nuo koncepto, pradedant iki maketavimo ir pritaikymo HTML ir CSS. Tai pakankama priežastis pristatyti visam pasauliui jūsų svetainę. Būtent apie tai kalba šis vaizdo mokymas. Aš jums parodysiu, kaip jūs galite patalpinti svetainę internete. Pirma, sužinosite, kaip pasirinkti tinkamą tiekėją ir tinkamą svetainės talpyklą. Tada duomenys bus įkelti į serverį su labai populiariuoju FileZilla. Ir tada, taip, tada svetainė iš tikrųjų bus internete.

Šiame vaizdo mokymo kurse norėčiau suteikti jums nedidelį įžvalgą į tinkamą kūrimo aplinką, skirtą interneto svetainių kūrimui. Kas jau sukūrė visiškai interneto svetaines arba mažesnes atskiras svetaines, paprastai jau turi šiuos redaktorius ir gali praleisti šį vaizdo įrašą.

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

HTML5-Boilerplate yra galingas šablonas HTML5 ir CSS3 svetainėms; jis padaro HTML5 kiek įmanoma kryžminio naršyklės suderinamu ir įtraukia keletą labai gerų kodo šablonų JavaScript, CSS3 ir žinoma HTML.

Šiame vaizdo mokymo kurse noriu jums pristatyti tuos pačius funkcijas. HTML5 ir CSS3 srityje šiuo metu nėra geresnio šablono pradedantiesiems.

Šiame vaizdo mokymo įraše noriu jums pristatyti keletą labai naudingų įrankių, skirtų HTML5 ir CSS3 kūrimui.

Tarp jų yra:
html5css3box.com
kuler.adobe.com (dabar https://color.adobe.com/de/create/color-wheel)
css3generator.com
typetester.org
google.com/webfonts
cufon.shoqolate.com
videojs.com