Reklāma
Tīmekļa lapas izveidošana ar HTML un CSS ir diezgan vienkārši Kā izveidot vietni: iesācējiemŠodien es sniegšu jums norādījumus par pilnīgas vietnes izveidi no nulles. Neuztraucieties, ja tas izklausās grūti. Es jums to caurskatīšu ik uz soļa. Lasīt vairāk . Bet kļūdīties ir viegli, un ir diezgan daudz lietu, par kurām varētu nedomāt. Lielākoties šīs mazās kļūdas neko daudz nemainīs.
Bet ilgtermiņā tie var padarīt jūsu dzīvi grūtāku. Šīs deviņas kļūdas ir viegli pieļaut, taču, ja jūs tās atcelsit agrāk, nevis vēlāk, jūsu lapa izskatīsies labāk, to būs vieglāk uzturēt un darbosies tā, kā vēlaties.
1. Iekšējais stils
Viena no HTML un CSS lieliskajām lietām ir tā, ka jūs varat formatēt jebkuru teksta rindu - jebkuru vārdu, tiešām - kad vien vēlaties. Bet tas nenozīmē, ka jums vajadzētu izmantot šīs iespējas.
Šis ir iekļauta stila piemērs, kuru jūs varētu izmantot, lai padarītu rindkopu lielāku par apkārtējām rindkopām un izceltu to citā krāsā:
Jūsu teksts šeit.
Tas dod a punktu CSS stils Uzziniet HTML un CSS, izmantojot šīs soli pa solim apmācības Vai vēlaties uzzināt par HTML, CSS un JavaScript? Ja domājat, ka jums ir zināšanas par to, kā iemācīties izveidot vietnes no jauna - šeit ir dažas lieliskas soli pa solim apmācības, kuras vērts izmēģināt. Lasīt vairāk kas beidzas ar rindkopas noslēgšanu. Šķiet diezgan efektīva, vai ne?
Tam ir viena liela problēma: ja vēlaties mainīt daudz ko savā vietnē, jums būs jāmeklē un jāatrod katrs inline stila veidošanas gadījums un tas jāmaina. Ja jums ir 100 dažādu rindkopu, kuru teksta lielums ir 120% un zils, jums būs jāatrod visi 100 un tie jāmaina uz jebkuru, ko esat nolēmis, ir labāks formāts.
Tā vietā izmantojiet CSS stila lapu. Šis ir stils, kuru izmantojāt iepriekšējai daļai:
p.svarīgs {lielums: 120%; krāsa: zila; }Tagad tā vietā, lai izmantotu iekļauto stilu, varat vienkārši izmantot šo līniju:
Jūsu teksts šeit.
Un jūsu rindkopa būs liela un zila. Un, kad CSS mainīsit “svarīgo” klasi, tie visi mainīsies.
2. Izkārtojuma tabulas
Lapas izkārtojuma formatēšanai cilvēki mēdza izmantot tabulas. Izmantojot tabulu, jūs varat organizēt savas lapas elementus kolonnās un rindās, kā arī pielietot dažādas izlīdzināšanas un stilus. Pat vienšūnas tabulas tiktu izmantotas, lai saturs būtu pareizi izlīdzināts. Bet šī tabulu izmantošana parasti tiek sarauta.
Līdzīgi kā iebūvētie stili, CSS, nevis HTML tabulu izmantošana izkārtojumam ir vieglāk uzturējama. Atkal, ja vēlaties veikt izmaiņas desmitiem vai simtiem lappušu, rediģēt stila lapu ir daudz vieglāk, nekā iziet cauri katrai lapai un pielāgot tabulas.
Papildus vienkāršākai uzturēšanai CSS izkārtojumu lasīšana ir diezgan vienkārša nekā HTML tabulu lasīšana. It īpaši, ja jūs galu galā ligzdo daudz dažādu līmeņu tabulas savā starpā. Iespējams, nav pārāk viegli pārvietoties starp HTML dokumentu un stila lapu, lai precīzi redzētu notiekošo, taču jūsu lapas saturs būs skaidrāks un vieglāk rediģējams.
Šeit un tur tabulu izmantošana lapu sadalīšanai kolonnās nav mirstīgs grēks. Dažreiz tas ir vienkāršāk un ātrāk, nekā sajaukties ar CSS. Bet, ja jūs veidojat gigantiskas, daudzpakāpju tabulas, jums jāapsver formatēšana CSS.
3. Novecojis HTML
Tāpat kā jebkura valoda, HTML mainās regulāri. Oficiāli atzīti tagi mainās, un daži kļūst novecojuši. Pat ja šie tagi joprojām darbojas, vislabāk ir no tiem izvairīties.
Piemēram, ja esat pieradis lietot atzīme treknrakstā un slīprakstā, jūs esat aizkavējies. un (“uzsvars”) tagad ir standarta tagi.
Lielākā daļa novecojušo tagu tika aizstāti ar CSS, tāpēc, lai iegūtu tādu pašu efektu, jums būs jāizmanto stili (vēlams, nevis inline). Ja neesat pārliecināts, kā nomainīt novecojušu tagu vai ja joprojām tiek izmantots noteikts tags, pārbaudiet oficiāla HTML dokumentācija vai vienkārši izpildiet ātro meklēšanu.
4. Iekļauts JavaScript
Dažās tīmekļa lapās tiek izmantots JavaScript pievienot papildu funkcionalitāti JavaScript un tīmekļa izstrāde: dokumenta objekta modeļa izmantošanaŠis raksts jūs iepazīstinās ar dokumentu skeletu, ar kuru darbojas JavaScript. Kam ir zināšanas par šo abstrakto dokumentu objekta modeli, jūs varat rakstīt JavaScript, kas darbojas jebkurā tīmekļa lapā. Lasīt vairāk . Tas var padarīt tīmekļa lapas interaktīvas, apstiprināt tekstu tā ievadīšanas laikā, pievienot animācijas, sniegt atbildes uz lietotāja darbībām utt. Īsāk sakot, tas var padarīt lapu noderīgāku, nodrošinot papildu izturēšanos.
Līdzīgi kā CSS, HTML vari pievienot inline JavaScript. Tāpat kā CSS, tas parasti tiek atturēts. Papildus tam, ka to ir grūtāk uzturēt, ir arī daži citi iemesli, kas attaisno šo aicinājumu.
Iekšējais JavaScript var izmantot lielāku joslas platuma daudzumu nekā skripts, kas piesaistīts no cita faila. Process, ko sauc par minifikāciju, pirms nosūtīšanas lietotājam saspiež HTML un CSS, pieprasot mazāku joslas platumu platjoslas vai mobilajos savienojumos. Iekšējo JavaScript tomēr nevar saīsināt. Tas netiks arī kešatmiņā, bet atsevišķs JavaScript fails var jābūt kešatmiņā.
Visas šīs lietas padara iebūvēto JavaScript lielāku joslas platumu.
Tas ir arī grūtāk atkļūdojams, jo JavaScript failam varat izmantot JavaScript apstiprinātāju... bet tas nedarbosies ar ievietotiem skriptiem. Un tas atkal padara tīrāku un vieglāk uzturētu HTML.
5. Vairāki H1 tagi
Pozīciju tagi ir lieliski. Viņi padara lapas vieglāk izmantojamas, tās var sniegt SEO uzlabojumu, un tās var izmantot, lai uzsvērtu noteiktus punktus.
Bet iemesla dēļ ir seši līmeņu tagu līmeņi. Jūsu lapai tiešām vajadzētu būt tikai vienai H1 atzīmei. Un tas bieži ir lapas nosaukums (īpaši emuāros un līdzīgās vietnēs). Jūs varētu domāt, ka, ievietojot H1 tagos virkni atslēgvārdu, Google, visticamāk, tos izvēlēsies un jūsu vietni vērtēs augstāk rezultātos.
Bet tas, kas tas patiesībā padara jūsu lapu mulsinošāku un grūtāk lasāmu. Kas anulēs visas SEO priekšrocības, kuras jūs varētu redzēt.
Izmantojiet H2, H3 un pārējos virsrakstu tagus, lai labāk izceltu savu lapu. Virsraksta līmenim vajadzētu dot lasītājam priekšstatu par to, cik svarīga ir šī sadaļa. Ja esat viņus maldinājis, viņi to zina un viņi nebūs priecīgi.
6. Izlaist attēlu Alts
Katram attēlam var piešķirt atribūtu “alt”, kas parāda noteiktu teksta rindu, ja attēlu nevar parādīt. Tas, iespējams, nešķiet liels darījums, it īpaši ar modernām pārlūkprogrammām (gan galddatoriem, gan mobilajām ierīcēm), kas var parādīt gandrīz jebko.
Bet alt atribūtu nepievienošana ir liela kļūda, it īpaši pastāvīgas mobilo pārlūkošanas laikmetā. Mobilie savienojumi ne vienmēr ir lieliski, un, ja pārlūkprogramma nevar ielādēt attēlu, lasītājam nav ne jausmas, ko viņiem tur vajadzētu redzēt. Alt atribūts to var labot.
Un, ja kāds izmanto ekrāna lasītājs VoiceOver padara Apple ierīces pieejamākas nekā jebkadAmerikas Neredzīgo fonda prezidents uzskata, ka "Apple līdz šim ir paveicis vairāk piekļuves nodrošināšanai nekā jebkurš cits uzņēmums" - un VoiceOver tajā spēlēja lielu lomu. Lasīt vairāk vai citu piekļuves funkciju, šis alt atribūts varētu būt viss, kas viņiem iziet no attēla.
Protams, ir arī potenciālas SEO priekšrocības. Meklētājprogrammas var indeksēt īsus, aprakstošus alt atribūtus. Bet lielākais ieguvums šeit ir palīdzības sniegšana saviem lasītājiem.
7. Neslēdzot tagus
Ir daži HTML tagi, no kuriem varat atbrīvoties, neaizverot, piemēram
un
Pirmkārt, neskatoties uz pārlūka tehnikas attīstību, noteikti pastāv iespēja, ka pārlūks jūsu saturu parādīs nepareizi, ja neesat aizvēris tagus. Un stilu piemērošana varētu dot dažus neparedzamus rezultātus, piemēram Stack Exchange lietotājs robertc demonstrē.
No tā izriet, ka pārlūkprogrammas gaida aizvēršanas tagus. Viņiem tie nav absolūti nepieciešami…, taču, mēģinot parādīt jūsu lapu, viņiem noteikti būs labums, ja viņiem būs pareizs HTML.
Par laimi tagu aizvēršana neprasa daudz, it īpaši, ja jūs izmantojat labu HTML redaktoru.
8. Neiekļaujot DOCTYPE
HTML dokumentu sākumā parasti tiek parādīta DOCTYPE deklarācija, piemēram:
Tas ir kaut kas, par ko nerunā bieži, bet tas ir svarīgs elements jūsu lapā. DOCTYPE deklarācijā pārlūkam ir norādīts, kāda veida HTML jūs izmantojat. Tas ļauj tai pareizi atveidot HTML.
Ja izlaižat DOCTYPE deklarāciju, lapa tiks parādīta “quirks režīmā”. Šī ir mūsdienu pārlūka aizsardzība pret novecojušām tīmekļa lapām. Un tas maina jūsu lapas parādīšanas veidu. Īss ieskats Firefox quirks režīms parāda, ka reģistrjutības izmaiņas mainās, fonta rekvizīti netiek mantoti tabulās, fontu lielumi tiek aprēķināti atšķirīgi, un attēli bez alt atribūtiem dažreiz tiek parādīti nepareizi.
Lielākā daļa no šīm lietām ir salīdzinoši nelielas. Bet, ja vēlaties, lai jūsu lapa tiktu parādīta pareizi, jums jāpārliecinās, ka pārlūkprogrammā ir iespējots pilns standartu režīms.
Un, lai to izdarītu, jums ir nepieciešams DOCTYPE. (Ja nezināt, ko izmantot, vienkārši izmantojiet .)
9. Novārtā shēmas atzīmi
Shēmas iezīmēšana palīdz meklētājprogrammām gūt labāku priekšstatu par to, kas atrodas jūsu lapā. Precīzāk, šis marķējums norāda meklētājprogrammām, par ko jūs rakstāt katrā sadaļā.
Piemēram, rakstā varat izmantot shēmas iezīmēšanu, lai meklētājprogrammai pateiktu raksta nosaukumu, autoru, datumu, izdevēju un citu noderīgu informāciju.
Ir shēmas filmām, grāmatām, organizācijām, cilvēkiem, restorāniem, produktiem, vietām, darbībām, dažādiem veidiem datu, mūzikas, skulptūru, rezervāciju, pakalpojumu, bankomātu, alus darītavu un gandrīz visa cita, par ko jūs varat iedomāties. Tas ir diezgan pārsteidzoši.
Jūs noteikti varat atbrīvoties, neizmantojot shēmas marķējumu. Jūsu lapa bez tās tiks parādīta pareizi. Jūsu lasītāji pat nezina, ka tas tur atrodas. Bet, iekļaujot šo iezīmēšanu, ir daudz kas jāiegūst. Meklētājprogrammas varēs sniegt daudz detalizētāku, noderīgu informāciju par jūsu lapu, ieskaitot bagātīgos fragmentus.
Izmantojot Google shēmas marķēšanas rīku, process faktiski ir diezgan viegls.
Pieradieties pie HTML paraugprakses
Šīs paraugprakses padarīšana par ieradumu var aizņemt kādu laiku. Un dažreiz var šķist, ka jūs patērējat daudz papildu laika kaut kam, kas jūs ļoti nesagādā. Bet pārliecinoties, ka jūsu HTML un CSS Uzziniet HTML un CSS, izmantojot šīs soli pa solim apmācībasVai vēlaties uzzināt par HTML, CSS un JavaScript? Ja domājat, ka jums ir zināšanas par to, kā iemācīties izveidot vietnes no jauna - šeit ir dažas lieliskas soli pa solim apmācības, kuras vērts izmēģināt. Lasīt vairāk ir labi izstrādāti, ar kuriem ir viegli strādāt, un uzturējami ilgtermiņā ietaupīs daudz laika.
Kādus citus labos ieradumus esat uzskatījis par noderīgiem, veidojot tīmekļa lapas? Vai jūs nepiekrītat nevienai no iepriekšminētajām praksēm? Dalieties savās domās komentāros zemāk!
Dann ir satura stratēģijas un mārketinga konsultants, kurš palīdz uzņēmumiem radīt pieprasījumu un ved. Viņš arī blogus par stratēģiju un satura mārketingu vietnē dannalbright.com.
