Kur punoni me një faqe interneti, e para nga etiketat që has një programues në HTML është
Si dhe ku ta përdorni?
Në HTML
Shembuj të përdorimit
Praktika e punës me etiketën do t'ju lejojë të kuptoni plotësisht parimet e funksionimit.
Një nga mënyrat për të vendosur "titullin" e një faqeje duke përdorur një etiketë është
HTML5
Përveç titullit, këtu mund të shtoni edhe çdo element dhe etiketë të dëshiruar, përveç
Në kryet e mia projektet e informacionit Së pari, një specialist i temës harton strukturën e artikullit (titujt dhe nëntitujt), dhe më pas shkrimtarët e kopjimit shkruajnë tekstin bazuar në to.
Struktura është në fakt shumë e rëndësishme nëse kujdeseni për cilësinë. Dhe për të krijuar një strukturë normale, duhet të kuptoni se si funksionojnë etiketat h.
h1 është nëntitulli kryesor në një artikull, zakonisht i vendosur mbi tekst.
Titulli i parë duhet të jetë vizualisht më i madh se titujt e tjerë në faqe.
h2-h6 janë nëntituj të vegjël që vendosen sipas parimit të foleve.
Për çfarë janë edhe kokat?
Për ata që nuk janë shumë të njohur me temën, këtu është, në parim, një video e mirë në lidhje me bazat e kompozimit të nëntitujve h1-h6. Nëse nuk e konsideroni veten ekspert, hidhini një sy:
Dhe për të konsoliduar materialin, një video pak më e dobët:
Titujt janë krijuar për të theksuar në një frazë apo edhe një fjalë thelbin kryesor, idenë e tekstit pasues. Zakonisht një person e kthen vëmendjen tek ata së pari, duke vendosur nëse do të lexojë pjesën tjetër të materialit. Titujt janë veçanërisht të rëndësishëm në tekstet dhe letrat reklamuese dhe shërbejnë si mjeti kryesor për të tërhequr vëmendjen e audiencës së synuar.
Në kod, etiketa duket si kjo:
, ku shkronja h vjen nga fjala "header", që do të thotë "titull". Çdo nivel tregohet nga një numër përkatës.
Etiketat H përmes syve të njerëzve
Teksti i ndarë në nëntituj duket më i pastër dhe është më i lehtë për t'u lexuar. Përdorues modern Unë kam mësuar prej kohësh të skanoj artikuj në vetëm disa sekonda dhe të nxjerr shpejt përfundime nëse ia vlen të lexohet i gjithë teksti, nëse ai përmban atë informacione të dobishme të cilën ai po e kërkon. Titujt bien në sy, duke theksuar gjënë kryesore dhe duke i dhënë përdoruesit mundësinë për të analizuar materialin.
Etiketat h1, h2, h3, h4, h5, h6 ju lejojnë të krijoni një lloj harte për lexuesin, duke përdorur të cilën ai mund të lundrojë shpejt në tekst. Dhe nëse këto pika arrijnë të tërheqin vëmendjen, atëherë personi do të mbetet në faqe dhe ndoshta do të lexojë të gjithë artikullin. Ju mund ta kontrolloni rezultatin duke faktorët e sjelljes. Nëse njerëzit qëndrojnë në faqe dhe ndërmarrin disa veprime, kjo do të thotë se puna e SEO nuk është bërë më kot.
Etiketat H përmes syve të motorëve të kërkimit
Robotët e kërkimit mbledhin informacion prej tyre për analizë semantike. Nivelet e titujve h1, h2, h3 janë të një rëndësie të veçantë për robotët. Zbatimi i tyre i paqëndrueshëm ose i gabuar mund të ndikojë negativisht në renditjen e faqes. Nëse nuk ka fare etiketa h në kodin HTML, atëherë faqja do të ketë vështirësi në promovimin. Nivelet h4, h5, h6 janë më pak të rëndësishme.
Hierarkia e etiketave H
Rregulli kryesor në rregullimin e titujve është hierarkia e tyre. Nuk është e nevojshme që etiketat të ndjekin njëra-tjetrën në madhësi, por është e papranueshme të përdorni, për shembull, h3 në tekst nëse nuk keni askund meta h2, ose përdorni h6 pa h5.
Ja si duket hierarkia me folenë e saktë:
Çfarë është një etiketë h1?
Etiketa h1 është tabela e përmbajtjes së tekstit (si titulli i një libri ose titulli i një artikulli gazete).
Çdo faqe duhet të ketë një dhe vetëm një etiketë h1.
Për sa i përket atraktivitetit për përdoruesin, ai është i një rëndësie parësore. Por për promovimin e SEO, .
Titulli është gjithashtu një titull, por shkruhet jo vetëm për njerëzit, por edhe për robotët. Ai nuk shfaqet në vetë faqen, por vetëm në skedën e shfletuesit dhe në fragment si një lidhje aktive në sitin. Në fakt, titulli është një alternativë, por titulli kryesor për një dokument HTML. Nëse mungon, atëherë motori i kërkimit merr h1 si bazë dhe e përdor atë në drapër.
Pse h1 duhet të jetë i ndryshëm nga Titulli?
Është mjaft e rëndësishme të kuptohet se h1 dhe Titulli janë tituj të ndryshëm. Dhe në përputhje me rrethanat, ato duhet të kombinohen me mjeshtëri. Këtu janë bazat për këtë temë:
Neglizhimi i rregullave të veçantisë dhe rëndësisë së titujve mund të çojë në rënien e faqes nën filtër. Kohët e fundit motorët e kërkimit filluan t'i kushtojnë vëmendje Vëmendje e veçantë cilësinë e përmbajtjes dhe cilësimet e saj SEO. Dublikatat, mbispam-et, vendosja kaotike e titujve dhe mospërputhja e tyre me përmbajtjen janë të dënueshme.
Kërkesat për gjatësi H1
Rekomandohet ta bëni H1 më konciz se Titulli, duke mos e tejkaluar numrin e karaktereve më shumë se 50. Por nuk do të jetë një fatkeqësi nëse titulli rezulton të jetë më i gjatë, kur nuk është e mundur të shtrydhni të gjithë thelbin në atë të treguar numri.
Shtojcat speciale për WordPress ju lejojnë të analizoni mbushje e saktë të gjitha metat direkt në redaktues.
Rregullat për të shkruar saktë h1
- Duhet të jetë unik për të gjithë sitin dhe absolutisht i lexueshëm;
- Nuk përsëritet etiketa e titullit, por edhe nuk e kundërshton atë;
- Nuk duhet ta zgjatni shumë (mund ta bëni titullin më voluminoz);
- Përdoret vetëm një herë për faqe;
- Përputhet me tekstin dhe pasqyron thelbin semantik të materialit;
- Interesante dhe tërheqëse për përdoruesin;
- Ju nuk mund të vendosni një pikë në fund dhe rekomandohet të përdorni shenjat e pikësimit në minimum.
Aplikimi i çelësave
Kryesor frazat kryesore, para së gjithash, duhet të përmbajë titullin. Por ato duhet të shkruhen edhe në h1. Në të dyja rastet është më mirë ta bëni këtë që në fillim. Por do të ishte më mirë që fjalët kyçe të mos kopjojnë njëra-tjetrën në këto dy etiketa. Ju duhet të përdorni forma të ndryshme fjalësh ose dukuri të holluara në h1 dhe dukuritë e drejtpërdrejta në titull.
Disa marrin të gjithë çelësat në faqe dhe i përdorin për të krijuar një strukturë artikulli. Ju lutemi vini re menjëherë se pa PF-të e lezetshme, një shpërndarje e tillë e çelësave në nëntituj do të ndëshkohet nga filtri për mbispam.
Teknika psikologjike për të shkruar një titull tërheqës
Titulli duhet të jetë tërheqës. Këtu është një video nga Maxim Ilyakhov, një specialist në fushën e medias, rektor i Shkollës së Redaktorëve dhe krijues i shërbimit Glavred:
Këtu janë disa "mashtrime" të tjera që përdoren kur shkruani titujt.
Zgjidhje
Mos harroni se një person nuk kërkon gjithmonë informacion ose mallra, por, para së gjithash, një zgjidhje për problemet, dëshirat, nevojat e tij. Adresoni saktësisht problemin e synuar të audiencës së synuar
Një shembull i një titulli të mirë: “Po ju bien flokët? Ndaloni rënien e flokëve brenda një jave”.
Një shembull i një titulli të keq: "A mund të ndalohet humbja e flokëve?"
Në rastin e parë, ne identifikojmë qartë problemin dhe propozojmë zgjidhje specifike. Në rastin e dytë, problemi preket në mënyrë indirekte dhe opsionet për zgjidhjen e tij janë të paqarta.
Intriga
Një shembull i një titulli të mirë: "Zbulimi i sekretit të recetës më efektive për humbjen e flokëve."
Një shembull i një titulli të keq: " Receta më e mirë për rënien e flokëve”.
"provimi" i pritjes
Një fjali e shkruar në këtë formë sfidon lexuesin, duke e ftuar atë të provojë veten.
Një shembull i një titulli të mirë: "A jeni i sigurt që po luftoni siç duhet humbjen e flokëve?"
Një shembull i një titulli të keq: "A dini gjithçka rreth rënies së flokëve?"
Sigurisht, këto nuk janë të gjitha metodat që ndihmojnë në ndikimin e perceptimit të një personi dhe tërheqjen e interesit të tij. Lexoni libra mbi marketingun për të mësuar më shumë nëse jeni të interesuar për këtë temë. Nga rruga, titulli mund të jetë gjithashtu "joshës". Për më tepër, ka shumë të ngjarë që është ai që theksohet në rezultatet e kërkimit. Mund të kontrolloni shfaqjen e saj pasi faqja të indeksohet.
Pse nevojiten nëntitujt h2-h6?
Etiketat nga h2 në h6 janë të vendosura në trupin e vetë artikullit, duke e ndarë atë në mënyrë strukturore në paragrafë tematikë dhe në kodin e dokumentit HTML, duke e theksuar atë elemente të rëndësishme. Janë identifikuar gjithashtu robotët e kërkimit për analizën semantike të faqes.
Nevojitet për të përcaktuar në mënyrë hierarkike gjithçka të rëndësishme dhe ia vlen të shikohet përdorues në faqe. Kjo strukturë ndihmon një person të lundrojë shpejt në informacion dhe të vlerësojë përputhjen e tij me nevojat e tyre.
h2 – fokuson vëmendjen e përdoruesve dhe Motorë kërkimi mbi përmbajtjen kryesore të artikullit. Tregon gjërat më domethënëse në tekst.
h3 është një nën-artikull për informacionin nën H2, duke e zbuluar atë edhe më thellë.
h4, h5, h6 - përcaktohen si nëntituj të ndërthurur (zbulojnë në detaje thelbin e H2 ose H3) dhe përdoren në tekst për të theksuar pikat e vogla dhe fjalë kuptimplote, si dhe në menunë, shiritin anësor dhe komponentët e tjerë të dokumentit në ueb.
Të gjitha etiketat h duhet të jenë brenda 50 karaktereve në gjatësi.
Si të shkruani saktë nëntitujt h2-h6
- Është e pamundur që nëntitulli më i vogël të jetë i pranishëm pa një më të madh. Kjo do të thotë, nëse teksti përmban një meta etiketë h4, atëherë duhet të paraprihet nga h2 dhe h3.
- Sa më i lartë të jetë niveli i titullit, aq më i madh duhet të jetë fonti. Në WordPress, cilësimet e paracaktuara zakonisht vendosen në mënyrë që etiketat të formatohen automatikisht saktë.
- Të gjitha etiketat h duhet të korrespondojnë me përmbajtjen e përmbajtjes dhe të pasqyrojnë thelbin e informacionit.
- Është e papranueshme të përdoret h1-h6 si ankorë ose lidhje aktive.
- Nuk mund të shkruani etiketa të tjera brenda etiketës h.
- Vetëm teksti dhe shenjat e pikësimit lejohen në etiketat h.
- Nuk duhet të ketë spam në nëntituj fjalë kyçe. Është mirë të përdorni fjalë kyçe në titull, h1, h2, dhe në ato më të vogla, si h3, h5, h6, fokusohuni në një diskutim të detajuar të temës.
Nëse faqosja e faqes përmban titullin dhe titullin kryesor H1, por vetë teksti i artikullit nuk është shumë i madh dhe nuk përmban nëntituj, ky nuk është një gabim. Ka mjaft faqe në TOP ku përmbajtja është pothuajse një shirit i vazhdueshëm, ndoshta i ndarë në paragrafë. Ju mund të merrni një pozicion udhëheqës pa "magji" mbi shënimin e tekstit, duke i vënë më shumë theks. Faqet e WordPress indeksohen lehtësisht nga motorët e kërkimit. Por megjithatë, përdorimi i këtyre etiketave jo vetëm që e bën detyrën më të lehtë, por edhe e bën përmbajtjen më të lehtë dhe më të këndshme për perceptimin vizual.
Si të plotësoni etiketat h në WordPress
h1 zakonisht plotësohet në fushën sipër tekstit në postim:
Për të bërë nëntitujt h2-h6, duhet të theksoni element i nevojshëm dhe, duke lëvizur kursorin mbi skedën "titujt", zgjidhni atë që ju nevojitet duke klikuar mbi të. Bëni të njëjtën gjë për secilin nga nëntitujt, duke i përfshirë në formatin e dëshiruar.
Ekziston një mënyrë edhe më e thjeshtë - mund të shkruani tekst në Word duke përdorur shenjat e nevojshme dhe thjesht kopjoni dhe ngjisni artikullin në redaktorin e WordPress. I paraqitur në Titujt e fjalëve do të shfaqet automatikisht në përmasat e duhura. Nëse është e nevojshme, mund t'i korrigjoni ato duke përdorur mjetet e redaktuesit të WordPress CMS.
Ne liruam libër i ri"Marketimi i përmbajtjes në mediat sociale: Si të futeni në kokat e ndjekësve tuaj dhe t'i bëni ata të dashurohen me markën tuaj."
Kreu i faqes së internetit është pjesa e sipërme siti, me fjalë të tjera, titulli i faqes, një komponent i rëndësishëm i burimit të uebit, i cili është i pari që ju tërheq vëmendjen.
Më shumë video në kanalin tonë - mësoni marketingun në internet me SEMANTICA
Çfarë është një titull në internet duke përdorur jetën tonë si shembull? Për shembull, në kokën e një ndërtuesi shohim një përkrenare, dhe në kokën e një kuzhinieri shohim një kapak të bardhë. Koka e nuses është e zbukuruar me mbulesë, dhe gruaja muslimane është e mbuluar me një hejab. Mund të shohim kurorën në kokën e mbretit. Ata thonë se veshja e kokës ndikon në sjelljen dhe është ajo që ne shpesh mund të përcaktojmë me saktësi se çfarë lloj personi qëndron para nesh.
Kreu i faqes është në secilën nga faqet e tij dhe mund të jetë i njëjtë në secilën faqe ose i ndryshëm. Nëse përdorni tituj të ndryshëm në faqe, atëherë mbani mend se dizajni i kokës është faqe e brendshme duhet të jetë një version i shkurtuar i kokës faqen kryesore. Ky është një rregull i formës së mirë në hartimin e faqes në internet.
Çfarë duhet të shkruhet në kokën e faqes
Ashtu si për vizitorët, edhe për motorët e kërkimit, faqja juaj e internetit fillon me një kokë. Prandaj, në kokë ka:
- emri i kompanisë (ose faqes së internetit);
- kontaktet;
- tjera elemente të rëndësishme: slogani, orari i hapjes, Përshkrim i shkurtër aktivitete etj.;
- krye menu horizontale- kjo është ajo që duhet të plotësojë kokën.
Vini re se elementët e kokës që duhet të jenë të pranishëm në çdo sajt janë emri dhe kontaktet.
Mos harroni për rolin prezantues të kokës, kështu që dizajni i tij duhet të tërheqë vëmendjen, por nuk duhet të shkëpusë vizitorin nga kërkimi informacionin e nevojshëm. Një kokë e keqe mund të çaktivizojë vizitorët dhe ata do të shkojnë në një faqe tjetër që mund të ketë përmbajtje më të keqe se e juaja.
Pse është e rëndësishme vendosja e kontakteve në kokë?
Motori i kërkimit i cakton çdo faqeje një rajon specifik, njëri prej të cilëve është kryesori. Para së gjithash, ai fokusohet në kontaktet e treguara në kokën e faqes. Pas kësaj, ai kërkon faqen "Kontaktet", ku mund të specifikoni rajone shtesë.
Kreu i faqes në internet dhe rregullat HTML
Për promovim i suksesshëm një sajt duhet të zbatojë disa rregulla kur zhvillon një kokë.
- Emri dhe kontaktet nuk duhet të shfaqen kurrë si foto. Vetëm tekst që një motor kërkimi mund ta kuptojë.
- Të kesh një kokë H1 që është e njëjtë në të gjitha faqet e faqes suaj do të ndërhyjë në promovimin e burimeve.
- Mos përdorni imazhe të rënda, blic ose shumë grafika. Kjo e bën faqen të vështirë për t'u ngarkuar dhe mërzit shumë përdorues.
- Mos e futni një meny horizontale në Flash, mos e shfaqni menunë në formën e fotografive. Përdorni vetëm tekst. Përndryshe, nëse keni nevojë të bëni ndryshime në artikujt e menysë, mund të hasni disa vështirësi.
- Krijoni titujt HTML. Poshtë me titujt që përbëhen tërësisht nga foto ose animacion flash! Pse ta vështirësoni punën tuaj? Nëse doni të dalloheni, mund të përdorni pa vëmendje elementë dinamikë të dizajnit që funksionojnë në skriptet.
- Titulli duhet të jetë i një lartësie që nuk ndërhyn në perceptimin e përmbajtjes. Për burimet e informacionitËshtë logjike të bësh një kokë të ulët (100-200 piksele). Për faqet e uljes dhe faqet e kartave të biznesit të prezantimit, madhësia e kokës mund të jetë pak më e lartë.
Si të krijoni kokën e duhur
Nëse keni një libër të gatshëm të markës, atëherë të gjitha faqet e faqes, përfshirë kokën, duhet të dizajnohen në përputhje me të. Një detyrë e rëndësishme e një web designer është të arrijë stil uniform midis titullit, fushës së përmbajtjes dhe fundit të faqes.
Jepini përparësi imazheve pozitive: njerëzit me buzëqeshje në fytyrat e tyre, vajzë e bukur, natyra. Për të krijuar një atmosferë serioze, përdorni imazhe pa fytyrë në heshtje skema e ngjyrave, gjithmonë me logo.
Le të themi se na duhet një titull për një faqe interneti lavanderie. Zgjidhni një foto Makinë larëse(duhet t'i tregoni menjëherë vizitorit se në cilën faqe ka ardhur dhe çfarë mund t'i ofrojnë këtu). Përndryshe, mund të përdorni një foto të një vajze tërheqëse duke larë rroba, si dhe elemente të dizajnit që ngjallin një ndjenjë pastërtie dhe freskie. Çdo foto duhet të jetë unike, ose të paktën të përdoret unike redaktues grafik. Ju mund të krijoni një logo, për shembull, një daulle larës skematike dhe një valë brenda saj. Pranë logos tregojmë emrin.
Faqja përshëndetet nga titulli i saj, është unik kartëvizita. Prandaj, kur zhvilloni një faqe interneti, kushtojini vëmendje maksimale kokës!
Shpesh, detyrat në dukje të thjeshta të paraqitjes kërkojnë një strukturë komplekse të shënjimit HTML dhe përdorimin e trukeve CSS. Përqendrimi i elementeve ose rreshtimi i përmbajtjes mund të jetë shumë i lodhshëm. Një detyrë e tillë është rreshtimi i elementeve në krye të faqes në mënyrë që logoja të jetë në të majtë dhe artikujt e menusë në të djathtë. Mund të përdorni float dhe pozicion:absolute, dhe për shtrirje vertikale mund të shtoni margjina dhe mbushje elemente të ndryshme. Duket se nuk është asgjë e komplikuar. Por nëse faqja duhet të shfaqet si duhet në pajisje celulare, lindin shumë probleme.
Më poshtë është një mënyrë koncize për të zgjidhur këtë problem.
Shënimi HTML është aq i thjeshtë sa të jetë e mundur:
Shume keq
Lartësia e kokës është e fiksuar, shtoni text-align: justifikoj, për elementët fëmijë:
Titulli (rreshtimi i tekstit: justifikoni; hapësira midis shkronjave: 1 px; lartësia: 8em; mbushja: 2em 10%; sfondi: #2c3e50; ngjyra: #fff; )
Shtoni ekran: inline-block për të gjithë elementët nav në mënyrë që t'i rregulloni ato njëra pas tjetrës:
Header h1, navigimi i kokës (ekrani: inline-block; )
Për të atribuar text-align: justifikoj funksionoi ashtu siç duam, duhet të përdorim një truk të vogël me pseudo-elementë, i cili u gjet në artikullin Teknika e rrjetit CSS e justifikuar në mënyrë perfekte duke përdorur bllokun inline, nga Jelmer de Maat:
Header::after (përmbajtja: ""; shfaqja: inline-block; gjerësia: 100%; )
Rezultati ishte shtrirja horizontale, pa përdorur noton Dhe pozicioni: absolut. Tani ju duhet të rreshtoni elementët vertikalisht. Duke përdorur vertikal-rreshtoj për elementet nav do të ketë një varësi nga lartësia e bllokut prind - kokës. Dhe kjo nuk është shumë e saktë. Shembuj të përdorimit vertikal-align: lart dhe vertikal-align: mes në jsbin. Më poshtë është ndoshta më mënyrë e përshtatshme shtrirje vertikale.
Le të përdorim përsëri pseudo elementë. duke përdorur një shembull nga artikulli Përqendrimi në të panjohurën, i përmendur nga Michał Czernow:
Koka h1 (lartësia: 100%; ) titulli h1::para (përmbajtja: ""; shfaqja: blloku i linjës; rreshtimi vertikal: mes; lartësia: 100%; )
Rezultati është ai që ju nevojitet:
Kanë mbetur dy probleme për t'u zgjidhur: shfaqja e saktë në sasi të mëdha teksti në kokë dhe përshtatshmëria. Nëse titulli i faqes është shumë i gjatë, faqosja do të fillojë të rrëshqasë:
Duke përdorur mashtrimin pseudo-element në kokë:
Kodi CSS
header ( text-align: justify; lartësia: 15em; mbushje: 2em 5%; sfond: #2c3e50; ngjyra: #fff; ) header::after (përmbajtja: ""; shfaqja: inline-block; gjerësia: 100%; ) header > div, header nav, header div h1 ( shfaqja: inline-block; vertikal-lin: mes; ) header > div ( gjerësia: 50%; lartësia: 100%; rreshtimi i tekstit: majtas; ) header > div: :para (përmbajtja: ""; ekrani: blloku inline; rreshtimi vertikal: mes; lartësia: 100%; )
Duket shumë më mirë:
Tani le të kalojmë te përshtatshmëria. Ka disa mënyra për të zgjidhur këtë problem; thjesht nuk mund të vendosni lartësinë e kokës, dhe të gjithë elementët e brendshëm do të përshtaten me lartësinë. Kjo nuk do të kërkojë mashtrimin e dytë me pseudo-elemente, shembull live në jsbin.
Kodi CSS
koka (përafrimi i tekstit: justifikoj; mbushja: 2em 5%; sfondi: #2c3e50; ngjyra: #fff; ) koka::pas (përmbajtja: ""; shfaqja: blloku i linjës; gjerësia: 100%; ) koka h1, navigimi i kokës (ekrani: blloku i linjës; rreshtimi vertikal: në mes; ) koka h1 ( gjerësia: 50%; rreshtimi i tekstit: majtas; mbushja e sipërme: 0,5em; ) navigimi i kokës (mbushje-lart: 1em; )
Nëse keni nevojë të vendosni lartësinë e kokës, atëherë do të duhet të përdorni mashtrimin e dytë me pseudo-elemente dhe të shtoni një pyetje mediatike për ekranet madhësive të ndryshme:
Ekrani @media dhe (gjerësia maksimale: 820 px) ( header ( lartësia: automatik; ) header > div, header >
Rezultati është përshtatës dhe duket si ky në pajisjet celulare:
Në shembull, 820px përdoret për qartësi; në një faqe të drejtpërdrejtë, vlera natyrisht duhet të jetë e ndryshme, në përputhje me kërkesat. Për mbështetje Internet Explorer 8 është e nevojshme të përdoret ":" në vend të "::" për pseudo-elemente.
Kodi përfundimtar CSS
@import url(http://fonts.googleapis.com/css?family=Lato:400,700 italic); * ( mbushje: 0; margjina: 0; ) trupi ( sfondi: #1abc9c; font-familja: "Lato", sans-serif; transformimi i tekstit: shkronja të mëdha; hapësira midis shkronjave: 1 px;) koka (përafrimi i tekstit: justify ; lartësia: 8em; mbushja: 2em 5%; sfondi: #2c3e50; ngjyra: #fff; ) koka::pas (përmbajtja: ""; shfaqja: blloku i linjës; gjerësia: 100%; ) koka > div, koka > div::para, navigimi i kokës, koka > div h1 ( shfaqja: blloku në linjë; rreshtimi vertikal: mes; rreshtimi i tekstit: majtas; ) koka > div ( lartësia: 100%; ) koka > div:: përpara (përmbajtja : ""; lartësia: 100%; ) header > div h1 ( madhësia e shkronjave: 3em; stili i shkronjave: italic; ) header nav a ( mbushje: 0 0.6em; hapësirë e bardhë: nowrap; ) header nav a:last -child ( mbushje-djathtas: 0; ) ekran @media dhe (gjerësia maksimale: 720 pikselë) ( header (lartësia: automatik; ) header > div, header > div h1, header nav (lartësia: automatik; gjerësia: automatik; ekrani : bllok; rreshtimi i tekstit: në qendër; ) )
Rezultati:
Siç e dimë, nuk ka asnjë shans të dytë për të bërë një përshtypje të parë. Në fushë dizajn dixhital kjo e vërtetë përforcohet konkurrencë e lartë dhe shumëllojshmërinë e gjerë të zgjidhjeve të disponueshme. Për më tepër, është mjaft e qartë se kur krijoni një përshtypje të parë, disa pjesë të një faqe në internet janë më të rëndësishme se të tjerat, për shembull, titulli për një sajt (titulli i faqes). Sot do të shikojmë të gjitha nuancat që lidhen me këtë term:
Shënimi është një përkthim i një artikulli nga uxplanet, shumë faleminderit autorëve për të.
Çfarë është titulli i faqes në internet?
Në paraqitjen klasike, blloku i kokës ndodhet në krye. Kjo është ajo që njerëzit shohin së pari kur vijnë në projektin tuaj. Duke qenë në një farë kuptimi një ftesë, ajo përmban informacion bazë për produktin dhe vendndodhjen me të cilën ka lidhje faqja - është e rëndësishme që përdoruesit të kuptojnë brenda pak sekondash se për çfarë bëhet fjalë.
Dizajni i kokës së faqes në internet ka shumë hapësirë për kreativitet, por gjithashtu duhet të jetë tërheqës, konciz dhe i dobishëm. Këtu ndodhen elementet kryesore navigacion.
Pamja e ekranit tregon Faqja kryesore Dyqani online i librave komik: në krye të kokës së faqes do të gjeni logon, menunë kryesore, si dhe ikonat e karrocave dhe kërkimit.
Çfarë përfshihet në kokën e faqes?
Ky bllok mund të përfshijë objekte të ndryshme:
- tiparet e markës: logoja, emri, emri i markës, slogani, nusja, fotografia e kompanisë ose drejtuesit të saj, etj.;
- informacion në lidhje me produktin ose shërbimin që prezantohet;
- lidhje me elementë të rëndësishëm të përmbajtjes ();
- lidhje me profilet e rrjeteve sociale;
- kontaktet (telefon, Email dhe etj.);
- ndërrimi i gjuhëve me një ndërfaqe shumëgjuhëshe;
- blloku i kërkimit;
- fusha e abonimit;
- lidhjet me produktin: shkarkoni versionin demo, adresën në AppStore, etj.
Jo të gjitha pikat e mësipërme duhet të përdoren. Sigurohuni që dizajni i kokës për sitin të mos jetë i mbingarkuar informacione të panevojshme, e cila i pengon vizitorët të përqendrohen në aspektet kryesore.
Më poshtë janë shembuj të vendosjes së elementeve të tillë:
Faqja e internetit e Bjorn (projekt i studios së dizajnit të brendshëm)
Në krye të paraqitjes është një kokë e fiksuar (ngjitëse) në faqe, e cila lejon që ajo të mbetet vazhdimisht e dukshme ndërsa lëvizni. Në të majtë përmban logon e markës, dhe në të djathtë ka lidhjet "Produkte", "Studio", "Lajme" + ikona "Dyq". Një zonë qendrore e zbrazët ndan vizualisht dy blloqet.
Këtu kreu i faqes ka një qasje të ndryshme: logoja dhe marka janë në qendër, dhe majtas dhe Ana e djathte secila ka dy lidhje që i lejojnë përdoruesit të hidhen shpejt në seksionet që u nevojiten.
Pse është e rëndësishme titulli për një faqe interneti?
Kjo është për shkak të një sërë arsyesh. Së pari, kur njerëzit vizitojnë një burim të caktuar ueb (sidomos për herë të parë), ata nuk e shikojnë të gjithë faqen me kujdes dhe në detaje, por e kalojnë shpejt atë, duke kërkuar diçka që do të tërheqë vëmendjen dhe do t'i bindë ata të qëndrojnë. Eksperimente të ndryshme kanë treguar praninë modele tipike lëvizjet e syve të përdoruesit. Tre opsione kryesore janë përmendur:
Skema e parë është tipike për faqet me një paraqitje uniforme të informacionit dhe një hierarki të dobët vizuale. Ai dallon katër zona aktive, dy prej të cilave janë të lidhura me zonën e kokës së faqes.
Z-model
Një model tjetër i lëvizjes së syve është në formë Z dhe është tipik për faqet me ndarje vizuale të blloqeve të përmbajtjes. Këtu, sytë e lexuesit shkojnë nga këndi i sipërm i majtë në të njëjtën të djathtë, duke parë fillimisht këtë titull.
Shumë shpesh, përdoruesit demonstrojnë qasjen e mëposhtme:
- Fillimisht, syri lëviz horizontalisht, zakonisht përgjatë majës - shiriti i parë i modelit në formë F.
- Vështrimi i vizitorit më pas lëviz më poshtë dhe faqja përsëri "skanohet" horizontalisht, por mbulon më shumë zonë e shkurtër sesa në lëvizjen e parë. Ky është një element shtesë i skemës F.
- Më në fund, syri lëviz në anën e majtë të ekranit, i cili shihet vertikalisht. Ndonjehere këtë proces mjaft i ngadalshëm dhe sistematik, i cili shfaqet si një brez solid në hartën e nxehtësisë së lëvizjes së syrit. Në raste të tjera, shikimi lëviz më shpejt. Kjo elementi i fundit, duke krijuar rrënjën e shkronjës F.
Të tre opsionet tregojnë se shikimi fillon në zonën e sipërme horizontale. Kështu, kreu i faqes në faqet e një projekti në internet luan njëkohësisht dy role: përdoruesit i jepet mundësia të gjejë shpejt informacionin kryesor, dhe zhvilluesi ka një shans për ta paraqitur atë me kompetencë. Kjo është arsyeja pse blloku i kokës është kaq i rëndësishëm për specialistët e promovimit të përmbajtjes dhe produktit.
Siç thekson Bogdan Sandu në një artikull, "një faqe duhet të bie menjëherë në sy, përndryshe do të jetë thjesht një dështim i madh".
Pavarësisht të gjithave shënime të rëndësishme nga artikulli, duhet të theksohet se jo çdo burim në internet ka nevojë këtë element. Në shumë dizajne krijuese, koka dhe funksionet e saj janë të lidhura me zona të tjera të paraqitjes.
Dizajni i kokës së faqes në internet
Lexueshmëria dhe hierarkia vizuale
Ky artikull luan rol i rendesishem, kështu që ju duhet një qasje e kujdesshme ndaj kokës dhe ngjyrës së sfondit të saj. Përdoruesi duhet të vërejë dhe të perceptojë të gjitha informacionet sa më shpejt dhe pa mundim.
Në konceptin e shabllonit aktual të lajmeve, do të shihni një menu në kokën e faqes me dy lidhje aktive në kategorinë e publikimeve, një lidhje me transmetimin "live" dhe një fushë kërkimi. Logoja është në qendër, si në një nga shembujt e mësipërm.
Këtu ne përdorim një popullor me një rrjet abstrakt të thyer, dhe titulli për faqen e plotëson me sukses: pjesa e majtë është vizualisht më e gjatë, përbëhet nga një logo dhe tre lidhje; e djathta është më e shkurtër, me elementë kërkimi dhe abonimi.
Duhet të mbani mend se ndërsa përdoruesi lëviz nëpër faqe, titulli i faqes mund të sillet ndryshe:
- disa zhvillues përdorin një bllok "ngjitës" (fiks), gjithmonë të dukshëm dhe aktiv;
- të tjerët thjesht e fshehin atë;
- Ekziston gjithashtu një opsion kur koka nuk zhduket plotësisht, por zvogëlohet në një mënyrë të caktuar në , duke lënë në dispozicion vetëm informacionin bazë të rëndësishëm.
Menuja e hamburgerit
Një zgjidhje e njohur e projektimit që fsheh lidhjet bazë me seksionet pas butonit përkatës. Në blog ne kemi diskutuar tashmë këtë veçori në një artikull rreth dhe alternativat e tij.
Ky buton sot është shpesh një element i plotë në kokën e faqes, dhe shumë përdorues tashmë janë të vetëdijshëm se menyja kryesore fshihet pas tij. Kjo qasje liron hapësirën, duke e bërë paraqitjen minimaliste dhe të lehtë, duke lejuar gjithashtu më shumë hapësirë për objektet e tjera. Përveç kësaj, kjo ju lejon të krijoni një ndërfaqe harmonike për lloje të ndryshme pajisje.
Këtu tregohet një version i një menuje "kompakt" në kokën e faqes, që përmban shumë lidhje dhe ruan një stil të thjeshtë të përgjithshëm të shabllonit. Përveç tij, ka dy zona në kokë: në të majtë, marka dhe informacion të shkurtër rreth projektit; Ikona e kërkimit ndodhet gjithashtu në zonën e duhur. Pjesa qendrore lihet e lirë, duke shtuar butësi dhe ekuilibër në të gjithë paraqitjen.
Ka shumë në strukturën e faqes në të majtë hapësirë boshe, dhe logoja dhe emri i kompanisë janë në këndi i sipërm, ku fillon lëvizja e syve. Më tej në dizajnin e kokës ka lidhje me seksionet kryesore. Ky opsion ju lejon të fshehni shumë lidhje dhe të organizoni një hierarki të mirë vizuale.
Dhe megjithëse këtë vendimështë ende subjekt i debatit aktiv, ai ende përdoret si navigimi i kokës së faqes. Kundërshtarët e tij theksojnë se ky bllok mund të ngatërrojë përdoruesit e papërvojë dhe të rinj të internetit. Kjo është arsyeja pse këshillohet që të vendosni për futjen e një butoni "hamburger" vetëm pasi të keni studiuar audiencën e synuar.
Koka e fiksuar (ngjitëse) e faqes në internet
Këtu faqosja ka një bllok fiks në krye që nuk fshihet kur lëviz. Ai përmban titullin, një ikonë xham zmadhues për kërkim dhe një buton "hamburger".
Më poshtë është një shembull tjetër i një qasjeje krijuese ndaj dizajn efektiv titujt e faqeve. Kur hyni për herë të parë, mund të shihni vetëm zbatimin e tij minimalist me ikona të rrjeteve sociale dhe kërkimit (pa menu, etj.). Por ndërsa lëvizni, formohet një shirit fiks me një grup tradicional elementësh.
Menu e dyfishtë
Lundrimi në kokën e faqes mund të përbëhet nga dy menu të ndryshme. Në kohët moderne kjo është një lëvizje standarde.
Në GIF më poshtë do të shihni një kokë "ngjitëse" të përbërë nga dy "rreshta":
- Në krye ka lidhje me mediat sociale butoni , kërkimi, ruajtja dhe menuja; në qendër është logoja.
- Linja e dytë fokusohet në seksionet kryesore të projektit: katalogun e produkteve, vendndodhjen e pikave të shitjes, lajmet dhe ofertat, shërbimet dhe kontaktet.
Hierarkia e kokës i bën të gjithë elementët të qartë dhe të lehtë për t'u lexuar, duke ofruar një përvojë të fortë përdoruesi.
Total
Kreu i faqes së internetit është një zonë strategjike e rëndësishme në hartimin e paraqitjes. Natyrisht, çdo rast specifik kërkon një qasje të ndryshme dhe (ndoshta) kërkime të përdoruesit, por nuancat bazë të diskutuara më sipër duhet të merren gjithmonë parasysh.
Nëse keni diçka për të shtuar në artikull nga përvoja juaj personale e punës, shkruani më poshtë - është interesante të lexohet. Cili zbatim i kokës ju pëlqeu më shumë?
