HTML un CSS iesācējiem

Cilvēks, kurš vēlas izveidot mājas lapas, agrāk vai vēlāk saskarsies ar HTML. Tāpēc nākamajos video apmācības nodarbībās kopā izpētīsim skaisto HTML pasauli. Jūs pakāpeniski ieraudzīsiet, kas īsti ir šī valoda un kā izveidot mājas lapas, izmantojot to kopā ar stilu lapām. Tomēr sākumā ir jautājums: Kas patiesībā ir ar HTML un stilu lapām? Šī video apmācību beigās jūs arī uzzināsiet, kādu programmatūru ir nepieciešama, lai izveidotu un pārbaudītu mājas lapas.

Atšķirībā no programmēšanas valodu piemēram, Java, HTML var ļoti ātri sasniegt pirmos rezultātus bez lielām iepazīšanās. Viss, kas jums ir nepieciešams sākumam, ir redaktors un pārlūks. Šajā video apmācībā jūs izveidosiet savu pirmo HTML dokumentu un tūlītēji saņemsiet rezultātus pārlūkā. Un vienlaikus jūs uzzināsiet, kā HTML dokumenti, citiem vārdiem sakot, tīmekļa vietnes, ir uzbūvēti un kādu pamata struktūru tie seko.

Jūs jau zināt saistību starp vārdiem Element, Tag un atribūts no šī sērijas pirmās daļas. Tagad ir laiks uzzināt, kā šīs lietas var praktiski izmantot HTML dokumentos. Šī video apmācības noslēgumā jūs uzzināsiet, kā pārbaudīt savu HTML kodu, lai nodrošinātu sintaktisko korektumu.

Jūsu tīmekļa vietnes droši vien saturēs ne tikai attēlus, bet arī tekstus. Un teksti jāstrukturē saprātīgi, lai tie būtu viegli lasāmi. Šim nolūkam HTML nodrošina vairākas elementu iespējas. Šajā video apmācībā tiks iepazīstināti svarīgākie teksta strukturēšanas elementi. Turklāt tiks skaidrots, kā var paslēpt HTML rakstzīmes un kā izvadīt programmu sarakstus.

Labai lasāmo tekstu labai lasāmajībai nepieciešama saprātīga formatēšana. Un tā iet pāri vienkāršai struktūrēšanas elementiem kā virsrakstiem un teksta rindkopām. Piemēram, HTML ir iespējams atzīmēt citātus un atzīmēt atsevišķas daļas padziļināti vai slīprakstā. Nepieciešamās zināšanas šajā virzienā nodrošina šī video apmācība.

Elementi, kas jums HTML vienmēr atkal uzrodas, ir saraksti. Starp citu, tas attiecas ne tikai uz uzdevumu sarakstiem, kontaktinformāciju, bet arī uz izvēlnes definīciju. Saraksti tāpēc ieņem ļoti centrālu nozīmi HTML. Pārāk daudz pamata, lai rūpīgi izpētītu tos. Šajā video apmācībā jūs iepazīsieties ar visām HTML piedāvātajām sarakstu variācijām. Tie ir uzskaitīšanas saraksti, numurētie saraksti, definīciju saraksti un izvēlnes saraksti. Turklāt jūs saņemsiet norādes par to, kā vizuāli pielāgot sarakstus pēc vajadzības.

Tabulas joprojām spēlē nozīmīgu lomu tīmekļa lapās. Tomēr tas attiecas tikai uz datu prezentāciju. Kad vēl nebija CSS vai pārlūkiem tas nebija pienācīgi atbalstīts, tabulām bija pavisam citi mērķi: tās tika izmantotas izkārtojumu veidošanai. Tabulu šūnās tika ievietoti atsevišķi lapas elementi. Tomēr šādi izveidoti izkārtojuma tabulas potvēros pateicoties CSS, kas tagad pieder pagātnei. Šodien tiek izmantotas tikai datu pārskatīšanai, kāds bijis to sākotnējais mērķis.

Līdzsvaroti izskatīgi tabulas ne vienmēr ir jāsastāv no identiska skaita šūnām rindiņā. Šajā video apmācībā tiek parādīts, kā jūs varat savienot tabulas šūnas. Otrajā daļā jūs uzzināsiet kaut ko par tabulu apzīmējumu. Šis aspekts ir svarīgs, jo tādējādi apmeklētājiem var rādīt, ar kādiem datiem ir runa. Video apmācība tiek noslēgta ar detalizētu skatījumu uz tabulu noformēšanu HTML. Jo šajā jomā ir daudz kas mainījies, salīdzinot ar iepriekšējām HTML versijām.

Gandrīz neviena tīmekļa vietne neiztiek bez grafikas. Nav brīnums, ka grafikas tēma šajā sērijā arī ieņem svarīgu vietu. Šajā un nākamajos video apmācības tiek parādīts, kā jūs varat iekļaut grafikas savās tīmekļa vietnēs. Taču sākumā galvenais ir cita aspekta: kādas attēlu formāti vispār ir piemēroti tiešsaistes izmantošanai? Otrajā daļā tiks skaidrots, kā attēlu ceļi var tikt atsaukti.

Kā pamatā attēli var tikt atsaukti, tika parādīts iepriekšējā sadaļā. Tomēr attēliem vēl nav sasniegts beigu punkts. Patiesībā attēlus var aprakstīt detalizētāk, izmantojot atbilstošus atribūtus. Par to ir runa šī video sākumā. Otrajā daļā tiek aprakstīts, kā attēla virsrakstus var izveidot, izmantojot HTML5 sintaksi.

Interneta galvenais elements ir saturs, kas tiek savienots viens ar otru, izmantojot hiperlinks. Ja nebūtu šo hiperlinku, šodienas internets nebūtu iedomājams. Kādas iespējas HTML piedāvā saites definēšanai, jūs uzzināsiet šajā un nākamajā videomateriālā.

HTML piedāvā hiper saites daudz plašāk nekā tas, kas tika parādīts iepriekšējā video apmācībā. Piemēram, jūs varat definēt e-pasta saites un piedāvāt lejupielādējamus failus. Šīs un citas hipersaistes iespējas jūs iemācīsieties šajā video apmācībā.

Lai to pirmo iepriekšbūtu: Īpaši HTML5 gadījumā formāri ir cēlušies uz kvantu līmeni. Pateicoties daudziem jauniem lauku tipiem, ir iespējams radīt ļoti interesantas formas. Šīs jaunās iespējas jūs, protams, vēl apgūsiet. Šajā video apmācībā sākat ar nepieciešamo apgādi, kas nepieciešams veidlapu definēšanai. Sākumā ir runa par vienas rindiņas ievades lauku izveidi. Jūs redzēsiet, kā tos definēt, kā tos iepriekš aizpildīt ar vērtībām un kā tos var iestatīt kā neatļaujamus. Tāpat jūs apgūsit paroles lauku definēšanu. Tas, gala galā, ir lauka tips, ko var noderēt ik pa laikam.

Šajā video jūs iepazīsieties ar citiem lauku tipiem, ar kuriem var aprīkot savus formas. Konkrēti tiek minēti izvēles lauki, radio pogas un karšu rūtiņas. Tas viss ir svarīgs elementi, ko formās vienmēr atkārtoti izmanto. Tāpēc ir pietiekami iemesli rūpīgāk aplūkot šos un citus elementus.

Ar HTML5 ir noticis daudz uzlabojumu attiecībā uz veidlapām. Piekārši klāt tā ir īstā laika, lai aplūkotu visus jaunos veidlapu funkcijus, kas ir pieejamas izmantot. Ir beidzot gana ar parastajām ievades laukumiem. Tagad ir iespējams definēt arī slīdnējus, datumu laukus utt. - un tas pilnīgi bez JavaScript izmantošanas.

HTML5 formas pasaulē ievadu ir veicinājis iepriekšējais video apmācību kurss. Tomēr tas vēl joprojām nav galējais mērķis. Praksē HTML5 šajā jomā tiešām sniedz daudz vairāk.

HTML5, papildus iepriekšminētajiem lauku tipiem, ir arī daudzi citi interesanti aspekti. Piemēram, tagad ir iespējams ļoti viegli izveidot automātisko pabeigu funkciju veidlapas laukiem, kā Google piemērā. Šīs un citas lietas tiks parādītas šajā video apmācībā.

Kas nodarbojas ar HTML5, neiztikš bez semantikas tēmas. Šajā un nākamajos video treniņos jūs iepazīsieties ar svarīgākajiem elementiem, ko HTML5 piedāvā, ar kuriem jūs varat saprātīgi strukturēt dokumentus. Patiesībā šī loģiskā strukturēšana ir neaizvietojama, ja vēlaties nodrošināt savas tīmekļa lapas ar nākotnes noturīgumu.

HTML5 nes līdzi daudzus jaunus strukturēšanas elementus. Pamata apmācībās tika parādīts, kuri tieši tie ir. Tagad ir jāizmanto šos elementus praktiski. Jo šie elementi veicina dokumentu semantisko strukturēšanu. Šajā apmācību video galvenokārt jūs iepazīstat divus elementus - article un section. Šie elementi nodrošina HTML dokumentu pamata struktūru. Šajā video beigās skatīsies uz atšķirībām starp div, article un section.

HTML5 dokumentos nav tikai iespējams iedalīt rakstus un sadaļas. Patiesībā ir daudz papildu elementu, piemēram, header, footer u.c., kas nodrošina semantisko struktūru. Noteikti ir vērts vēlreiz detalizēti izpētīt šos elementus.

Šajā pēdējā Semantik-Elementu sērijas video apmācībā jūs iepazīsieties ar vēl citiem strukturēšanas elementiem. Patiesībā HTML5 piedāvā elementus navigācijas jomai, margainēm un kopsavilkumiem.

Iepriekšējās HTML versijās multivides saturu iekļaut bija briesmīgi. Ar objekta un iegultā elemenšu kombināciju tika mēģināts ievietot video un skaņu mājaslapā. Vai iekļautais video patiešām tika uzturēts, bija apšaubāms. Arī šajā jomā HTML5 ir paveikusi daudz labu darbu.

Kā ievietot video, jūs esat redzējuši. Tagad protams video nav vienīgais, ko var piedāvāt saviem apmeklētājiem uz savas tīmekļa vietnes. Šajā video apmācībā tiks aprakstītas HTML5 iespējas, kas saistītas ar audio failu un Flash filmu ievietošanu. Jo arī šīs lietas laiku pa laikam ir jāparāda savā vietnē.

HTML5 vairs nelieto rāmjus. Tomēr viņu vārdi brāļi, iRāmji, ir atgriezušies jaunajā HTML laikmetā un ir pieejami HTML5 sistēmā. Kamēr klasiskie rāmji sadala lapu neatkarīgās daļās, iRāmjos var iegult jebkādus resursus tīmekļa lapās.

HTML ir paredzēts saturam strukturēt. Kad sākas lapas dizains, iestājas Kaskādes Stilu Lapiņas (CSS) loma. Jo tikai CSS un HTML kombinācija ļauj no parasta HTML struktūras izveidot pievilcīgas tīmekļa lapas. Tāpēc ir pietiekami labs iemesls apskatīt CSS tuvāk.

Viens jēdziens, ar kuru CSS saistībā jums atkal un atkal būs darīšana, ir "selektori". Ar šiem selektoriem galu galā tiek noteikti elementi, kas jāformatē ar CSS. Šajā video apmācībā jūs iepazīsiet pirmos selektorus. Jums tiks iepazīstināti ar elementu, ID un vispārīga selektori. To izmantojot, ikdienā, veidojot sava veida mājas lapas ar CSS, jums būs darīšana.

Daudzi selektori tika iepazīstināti iepriekšējā video treniņā. Protams, CSS piedāvā vēl daudz citu selektoru.

Šajā pēdējajā atlasītāju videomācībā es jums iepazīstināšu ar ļoti īpašu atlasītāju formu. Šie ir tā sauktie pseudoklases un pseido-elementi. Tie ir tie atlasītāji, kas neatbilst konkrētiem HTML elementiem, bet tiek ģenerēti no izvades ierīces.

Šajos un nākamajos video treniņos es jums iepazīstināšu ar svarīgākajām CSS īpašībām. Šeit, starp citu, neprotams jums sniegt CSS atsauci. Drīzāk jums vajadzētu iegūt sajūtu par to, kas ar CSS viss ir iespējams. Šodien sāksim ar tekstveida noformējumu. Šajā video treniņā visu tā saukto fontu saistīto lietu tiks iepazīstinātas. Ņemiet vērā, ka attiecībā uz tekstveida noformējumu pastāv arī citas īpašības, kas tiks parādītas nākamajā video treniņā.

Par šajā videomācību programmā iepazīstinātajām CSS īpašībām ir iespējams vizuāli pielāgot tekstus un rakstzīmes. Piemēram, ir iespējams mainīt attālumu starp atsevišķajiem burtiem un pielīdzināt tekstu. Arī šīs īpašības palīdz jums padarīt tekstus pievilcīgākus.

Protams, CSS arī nedrīkst palikt bez krāsu definīcijām un grafiskajiem foniem. Attiecīgās īpašības tiek izskaidrotas šajā video apmācībā. Jo, patiesībā, CSS tieši šajā jomā ir daudz iespēju. Tāpēc nav iespējams tikai vienkārši definēt krāsas un attēlus. Ir iespējamas arī atkārtojošas fona grafikas.

It īpaši, ja runa ir par tīmekļa lapu izstrādi, jums būs jāsaskaras ar ārējo malu un atstarpju definēšanu. Pēdējos šīs sērijas video apmācības tiks īstenots visaptverošs piemēra projekts, kurā praktiski tiks demonstrēta šo un citu CSS īpašību izmantošana.

CSS ir izveidojis dažas interesantas īpašības teksta rindkopām un blokiem, kuras es gribētu jums neatturēt. Piemēram, jūs varat izvietot teksta rindkopas pa labi un pa labi.

Kad runa ir par rāmjiem, lielākā daļa droši vien vispirms domā par tabulām. Un patiešām, rāmji, saistībā ar tabulām, spēlē svarīgu lomu. Tomēr ar CSS var aprīkot ar rāmjiem arī citus elementus. Un kā šie rāmji tad visbeidzot izskatīsies, arī var noteikt izmantojot CSS definīcijas.

Kā definēt sarakstus, jūs, visticamāk, jau sen zināt. Tas tika detalizēti parādīts šī sērijas ietvaros. Tomēr saraksti no paša sākuma nav īpaši eleganti. Lai tie izskatās vizuāli pievilcīgi, ir pieejami attiecīgie CSS īpašības. Kuras tās ir un kā tās izmantot, jūs uzzināsiet šajā video apmācībā. Otrajā daļā tiks runāts par tā sauktajiem skaitītājiem, ar kuriem var īstenot arī sarežģītākus numerācijas veidus.

Kad runa ir par tīmekļa lapu izvietošanu, būsiet pazīstami ar tā saukto kastes modeli, kas būs jūsu pastāvīgais pavadoņš. Jo, pateicoties tam, galu galā tiks noteikts, kā un kur tiks novietoti elementi.

Lai varētu novietot elementus mājaslapas vēlamajās vietās, jums jāizmanto īpašas CSS īpašības.

Iepriekšējā video apmācībā tika īsi apspriesta tā sauktā peldošā princips. Tomēr šī tēma ir tik kompleksa, ka šeit vēlreiz tiks rīkots detalizēts skats uz šo peldošumu. Jo faktiski tas ir svarīgs CSS koncepts. Tikai tad, ja saprotat šo tēmu, jums patiešām ir iespēja veidot tīmekļa lapas.

Iepriekšējos videomācību treniņos tika izskaidroti pamati darbam ar HTML un CSS. Tagad, protams, ir jāsāk novākt pirmie augļi. Nākamajos video treniņos tiks pakāpeniski izveidota piemēru tīmekļa vietne. Šajā video - mācībā jūs vispirms iepazīstaties ar dažādajām izkārtojuma variantēm. Jo atbilstošā izkārtojuma izvēle vienmēr būtu jūsu mājaslapas izveides domu sākumā.

Es esmu mūsu praktiskajā projektā pieņēmis, ka darbosimies ar tipisku kolonnu izkārtojumu. Tomēr pirms es prezentēšu šo projektu tiešsaistē un krāsās, es gribu jums konkrēti parādīt, kā jūs varat izveidot kolonnu izkārtojumus. Fokuss būs uz divkolonnu un trīskolonnu izkārtojumiem, jo šie joprojām veido lielāko daļu no tīmekļa lapām.

Nākamajos video apmācību materiālos es jums parādīšu, kā pakāpē pēc pakāpes var realizēt tīmekļa lapas izkārtojumu. Tam ir dažādi pieejas veidi. Bieži izkārtojumi tiek izveidoti Photoshop programmā. Tālāk katru lapas elementu izgriež un pievieno, izmantojot CSS un HTML, atkal kopā kā vienotu tīmekļa lapu. Tas tiek darīts šeit tāpat. Tomēr man izmanto par brīvu pieejamo GIMP vietā. Aprakstītie soļi var būt izpildīti arī Photoshop programmā.

Pirmie soļi pret pašreizējās izkārtojuma virzienā tika ņemti iepriekšējā video treniņā. Protams, joprojām trūkst daudzas elementus. Šie tiks pievienoti šajā video treniņā. Kad izkārtojums ir gatavs, turpinās izgriešana, tā sauktā šķēršļa adīšana. Jo tas ir gala darbības solis, caur kuru tiek iespējams praktiski ieviest izveidoto dizainu, izmantojot HTML un CSS.

Jūs esat izveidojuši izkārtojumu. Tagad mēs uzsākam tā praktisko īstenošanu. Šajā video apmācībā kopā izveidosim tīmekļa lapas HTML pamatu.

Vietalas struktūra ir izveidota, taču tā joprojām izskatās diezgan sērīga. Šajā video treniņā tīmekļa vietnes saturs tiks paplašināts. Uzsvars tiek likts uz sākumā esošo izvēlni, kas atrodas lapas augšdaļā. Tam seko labā un apakšējā izvēlne.

Svarīgs aspekts skaistai tīmekļa vietnei ir tās fonta izskats. Šajā virknē jūs jau esat iepazinušies ar iespējām, ko jums piedāvā HTML un CSS attiecībā uz fontu veidošanu. Šajā video apmācībā tās tiks izmantotas, lai pamodētu lapu. Starp citu, mēs nevērsīsimies tikai pie klasiskajiem veidiem. Burtu veidam "eksotiskajiem" fontiem pievienotais burvisaitis ir @font-face.

Parasti apmeklētājiem vajadzētu piedāvāt iespēju sazināties. Vienkāršākajā gadījumā to var izdarīt, ierakstot tālruņa numuru un/vai e-pasta adresi. To var paveikt tā, bet tas nav pārāk ērti apmeklētājiem. Tāpēc šajā video apmācībā izveidosim veidlapu, caur kuru apmeklētāji var pasniedz ganske viegli sazināties ar mums. Un protams, izmantosim HTML5 un CSS3 piedāvātās iespējas.

Pamatformas pamatstruktūra un pilnīgi pamatīgais formas izveidojums ir definēts un pabeigts. Un patiešām, forma jau šobrīd izskatās diezgan pievilcīga. Pateicoties CSS3, tomēr ir daudz vairāk iespēju, ja runa ir par formu vizuālo uzlabošanu. Šajā video apmācībā forma tiks nedaudz pielāgota.

Jau pat šajā brīdī, jums droši vien ir ieguldīti daudz laika un darba jūsu mājas lapas attīstībā. Sākot no koncepcijas un tās izstrādes līdz tās izkārtojuma veidošanai un pārveidošanai HTML un CSS formātā. Tāpēc pietiekami būtu laika savu lapu tagad beidzot pasaulē prezentēt. Tieši par to ir šajā video apmācībā. Es jums parādīšu, kā izvietot lapu tiešsaistē. Vispirms jūs uzzināsiet, kā atrast piemērotu pakalpojumu sniedzēju un tīmekļa vietni. Pēc tam dati tiks augšupielādēti uz serveri ar iecienīto failu pārvaldības programmu FileZilla. Un pēc tam, nu, tad jūsu mājas lapa patiešām būs tiešsaistē.

Šajā video treniņā es vēlos jums sniegt nelielu ieskatu pareizajā izstrādes vidē tīmekļa lapu izveidei. Kamēr jums jau ir pilnas tīmekļa lapas vai sīkākas vienas lapas, parasti jums jau ir šie redaktori un jūs varat šo video palaist garām.

Tiks demonstrēts:
DreamWeaver
Panic Coda
Panic Transmit: http://panic.com/transmit/
Filezilla: http://filezilla.de/

HTML5-Boilerplate ir spēcīgs veidne HTML5 un CSS3 tīmekļa vietnēm; tas padara HTML5 pēc iespējas labāk saderīgu ar CrossBrowser un satur dažas ļoti labas koda veidnes JavaScript, CSS3 un protams arī HTML jomā.

Šajā video apmācībā es gribu jums iepazīstināt ar šīm funkcijām. Pašlaik nav labākas veidnes HTML5 un CSS3 sākumam.

Šajā video apmācībā es vēlos jums iepazīstināt ar dažiem ļoti noderīgiem rīkiem, ar kuriem varat izveidot HTML5 un CSS3.

Tai skaitā:
html5css3box.com
kuler.adobe.com (tagad https://color.adobe.com/de/create/color-wheel)
css3generator.com
typetester.org
google.com/webfonts
cufon.shoqolate.com
videojs.com