Popisy sú skvelým spôsobom, ako zobraziť ďalšie informácie jednoduchým umiestnením kurzora myši na text alebo obrázok. Môžu sa použiť napríklad na zobrazenie názvov obrázkov, popisov odkazov alebo akýchkoľvek iných informácií, ktoré môžu byť užitočné pre používateľa vášho zdroja. Porušenie šablóny dizajnu sa nevyžaduje.
V tomto návode sa pozrieme na to, ako vytvoriť jednoduché popisy pomocou HTML a CSS, ktoré budú zobrazovať obsah atribútu title pre odkaz.
Nastavte základný štýl pre triedu popis:
Popis (zobrazenie: vložené; pozícia: relatívna; )
Popis nástroja sa teraz zobrazí na rovnakom riadku ako odkaz pomocou relatívneho umiestnenia. Teraz definujme zaoblené rohy pre blok s popisom a umiestnime ho na vrch odkazu:
Tooltip:hover:after( background: #333; background: rgba(0,0,0,.8); border-radius: 5px; bottom: 26px; color: #fff; content: attr(title); left: 20 %; padding: 5 pixelov 15 pixelov; pozícia: absolútna; z-index: 98; šírka: 220 pixelov; )
Používame pseudotriedu :hover, ktorá vyberie prvok, keď naň prejde myšou, a pseudotriedu :after, ktorá pridá obsah za vybraný prvok. Pozadie je nastavené na čiastočne priehľadné a pre prehliadače, ktoré nepodporujú farebný formát RGBA, nastavíme farbu pozadia na sivú.
Zaoblené rohy sa vytvárajú pomocou atribútu border-radius. Nastavte farbu textu na bielu. Nakoniec napolohujeme hint block a pridáme výplň.
Okrem definovania štýlov a umiestnenia nastavujeme vlastnosť content:
obsah: attr(titul);
Táto vlastnosť vám umožňuje vložiť obsah, ktorým môže byť reťazec alebo atribút prvku. V tomto prípade použijeme atribút title odkazu.
Odkaz na užitočný zdroj
Na dokončenie musíte pridať šípku do spodnej časti nápovedy. Pre rám používame pseudotriedu :before a štýly:
Tooltip:hover:before( border: solid; border-color: #333 transparent; border-width: 6px 6px 0 6px; bottom: 20px; content: ""; left: 50%; position: absolute; z-index: 99 ;)
Na vytvorenie šípky sme použili trik s okrajom: nastavte farbu okraja vľavo a vpravo na priehľadnú a ovládajte šírku okraja. Šípka je tiež umiestnená pod popisom.
V tomto článku chcem diskutovať o niekoľkých možnostiach usporiadania takejto funkcie v akomkoľvek rozložení. Mimochodom, na mojej stránke už mám živý príklad takejto implementácie. Ak prejdete na komentáre na tejto stránke a podržíte kurzor myši nad dátumom komentára, okamžite presne pochopíte, o čo ide. No, ak ešte nie sú žiadne komentáre, môžete to zároveň zanechať.
Vidím dve hlavné metódy na implementáciu tooltipu, toto je na prechode myšou, je to tiež najobľúbenejšie a menej populárne pri kliknutí na akýkoľvek prvok. Začnime prirodzene so zobrazením popisku, keď umiestnite kurzor myši na prvok.
V tomto článku som myslel, že začnem samotným primitívom, zobrazením tooltipu pomocou title , čo nebude v žiadnom prípade fungovať, ale myslím, že sa to dá preskočiť, keďže je to už jasné. Ak vám vyššie uvedené nie je úplne jasné, myslím, že po preštudovaní videa o tom bude všetko oveľa jasnejšie.
Jednoduchý spôsob s dekoráciou, vznášajte sa.
Všetko tu nie je komplikovanejšie ako v metóde, ktorú som vynechal. Len namiesto atribútu title použijem data-title a styling s css štýlmi. Tu je html kód nižšie:
/* Použite pseudoprvok after na úpravu samotného kurzora myši, ale skryte ho, pretože by sa mal zobraziť iba pri umiestnení kurzora myši */ .hover:after (content: attr(data-title); display: none;position: absolute; bottom: 130 %; vľavo: 0px; farba pozadia: #fff; farba: #3aaeda; výplň: 5px; zarovnanie textu: stred; -moz-box-shadow: 0 1px 1px rgba(0,0,0,.16) ;-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16);font-size: 12px;) / * Pridajte vlastnosť tak, aby sa pri umiestnení kurzora myši nad prvok objavil kurzor s nápovedou */ .hover:hover:after(display: block;)
Tu chcem upozorniť na skutočnosť, že toto je len príklad konštrukčných vlastností. Vzhľad taniera si môžete prirodzene upraviť, ako len chcete.
Po umiestnení kurzora myši.
Toto je možno najpopulárnejší spôsob implementácie tejto funkcie. Aspoň ja to tak väčšinou používam.
V tomto príklade tiež nevidím nič zvláštne, ale viac, ale výsledok bude lepší bez použitia atribútu data-title. Kontajner v tomto prípade slúži ako obal pre naše prvky, ktoré budú použité na implementáciu tooltipu. A tiež samotná matrica bude umiestnená vzhľadom na nádobu.
/* nastavenie relatívnej pozície kontajnera */ .block(position:relative;) /* Predvolený štýl skrytého prvku */ .hidden (zobrazenie: žiadne; pozícia: absolútna; dole: 130 %; vľavo: 0px; pozadie -color: # fff; color: #3aaeda; padding: 5px; text-align: center; -moz-box-shadow: 0 1px 1px rgba(0,0,0,.16); -webkit-box-shadow: 0 1px 1px rgba (0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16); font-size: 12px;) /* Dodatočný štýl pre skrytý prvok ( voliteľné) */ .hover + .hidden:before (obsah: " "; pozícia: absolútna; hore: 98 %; vľavo: 10 %; ľavý okraj: -5px; šírka-okraja: 5px; štýl okraja: plný; výška: 0; šírka: 0; okraj: 7px plný priehľadný; pravý okraj: 7px plný #fff; border-color: #fff transparentný transparentný priehľadný; z-index: 2;) /* Dodatočný štýl pre skrytý prvok (voliteľné ) */ .hover + .hidden :after (content: " "; pozícia: absolútna; hore: 100 %; vľavo: 10 %; margin-left: -5px; border-width: 5px; border-style: solid; height : 0; šírka: 0; orámovanie: 7px plné priehľadné; border-right: 7px solid #fff; border-color: rgba(0,0,0,.16) transparent transparent transparent transparent; z-index: 1;) /* Zobraziť skrytý prvok pri umiestnení kurzora myši */ .hover:hover + .hidden(display: block;)
Práve tieto dve možnosti je možné použiť na vašom webe na zobrazenie popisku pri umiestnení kurzora myši.
Existujú ešte dva spôsoby, ale sú takmer totožné, až na to, že prvok sa zobrazí po kliknutí na prvok, ktorý je na stránke vždy zobrazený.
Jednoduchý spôsob s dizajnom, na kliknutie.
V prípade kliknutia bude kód vyzerať úplne rovnako. Jediná vec je, že pre pohodlie som nahradil triedu niektorých prvkov. Používa tiež pseudotriedu zamerania namiesto hover . Tu je tiež potrebné poznamenať, že na to, aby táto metóda fungovala, musí byť nahradená hypertextovým odkazom.
?
Css kód je v tomto prípade podobný vzhľadu hover boxu, iba pre pohodlie sa používajú iné triedy. A pre správnu prácu zmeníme pseudotriedu na focus .
/* Použite pseudotriedu after na úpravu samotného poľa, ale skryte ho, pretože by sa mal zobraziť iba po kliknutí */ .focus:after (content: attr(data-title); display: none;position: absolute; bottom: 130 %; vľavo: 0px; farba pozadia: #fff; farba: #3aaeda; výplň: 5px; zarovnanie textu: stred; -moz-box-shadow: 0 1px 1px rgba(0,0,0,.16) ;-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16);font-size: 12px;) / * Pridajte vlastnosť, aby sa po kliknutí na prvok zobrazilo pole s nápovedou */ .focus:focus:after(display: block;)
Ako vidíte, prakticky neexistuje žiadny rozdiel.
Vyskakovacia nápoveda po kliknutí.
Táto metóda po kliknutí bude tiež relevantnejšia, ak potrebujete navrhnúť nápovedu o niečo lepšie, ako to bolo možné v predchádzajúcej verzii.
A skutočný dizajn dosky:
/* nastavenie relatívnej pozície kontajnera */ .block(position:relative;) /* Predvolený štýl skrytého prvku */ .hidden (zobrazenie: žiadne; pozícia: absolútna; dole: 130 %; vľavo: 0px; pozadie -color: # fff; color: #3aaeda; padding: 5px; text-align: center; -moz-box-shadow: 0 1px 1px rgba(0,0,0,.16); -webkit-box-shadow: 0 1px 1px rgba (0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16); font-size: 12px;) /* Extra štýl pre skrytý prvok ( voliteľné) */ .focus + .hidden:before (obsah: " "; pozícia: absolútna; hore: 98 %; vľavo: 10 %; ľavý okraj: -5px; šírka-okraja: 5px; štýl okraja: plný; výška: 0; šírka: 0; okraj: 7px plný priehľadný; pravý okraj: 7px plný #fff; border-color: #fff transparentný transparentný priehľadný; z-index: 2;) /* Dodatočný štýl pre skrytý prvok (voliteľné ) */ .focus + .hidden :after (content: " "; pozícia: absolútna; hore: 100 %; vľavo: 10 %; margin-left: -5px; border-width: 5px; border-style: solid; height : 0; šírka: 0; orámovanie: 7px plné priehľadné; border-right: 7px solid #fff; border-color: rgba(0,0,0,.16) transparent transparent transparent transparent; z-index: 1;) /* Po kliknutí zobrazí skrytý prvok */ .focus:focus + .hidden(display: block;)
Ako vidíte, nie je nič zložité. Okrem toho môžete usporiadať zmeny stavu, a to ako po umiestnení kurzora myši, tak po kliknutí. Aj keď, aby som bol úprimný, nemôžem povedať, nakoľko relevantná je metóda kliknutia.
Existuje aj napodobenina posledného príkladu pomocou , ale jeho použitie sa mi nezdá úplne správne na usporiadanie popisku na mojej stránke. Ak so mnou silne nesúhlasíte, vitajte v komentároch.
Video tutoriál - Popis bez skriptov.
To je z mojej strany všetko. Veľa šťastia všetkým.
HTML nápoveda je blok s dodatočnými informáciami, ktorý sa zobrazí, keď umiestnite kurzor myši na konkrétny prvok webovej stránky. Dnes si vytvoríme vlastný popis pomocou HTML a CSS:
Zobraziť ukážku | Stiahnite si zdrojový kód
Budeme môcť použiť CSS rady pre väčšinu prvkov, ako sú odkazy, značky, štylizovaný text atď. Budeme musieť použiť nejaké triedy na prvok a pridať atribút data- s textom tooltipu.
Nastavenie dokumentu
Musíme vytvoriť dokument HTML a nastaviť počiatočné označenie:
Pridal som odkaz na Normalize.css, ktorý pomáha obnoviť všetky štýly prehliadača na predvolené hodnoty a zaisťuje, že každý prvok vyzerá rovnako vo všetkých prehliadačoch. Na rozdiel od štandardného resetovania CSS, Normalize.css neodstráni všetky predvolené štýly, takže nemusíte upravovať štýl každého prvku od začiatku.
Vytvoril som div s triedou kontajnera, kde umiestnime základné príklady popisov HTML. Tu sú štýly pre telo a triedu .container:
telo ( font-family: "Work Sans", bezpätkové; font-size: 1,5em; line-height: 1,4em; font-weight: 700; background-color: #28ABE3; color: #fff; ) .container ( šírka: 800 pixelov; okraj: 100 pixelov automaticky; pozadie: radiálny prechod (najvzdialenejší roh kruhu pri 400 pixeloch 250 pixelov, #64BBE0 0%, #28ABE3, #28ABE3 95%); )
Div kontajnera som vycentroval nastavením margin-left a margin-right na auto . Do časti karosérie bol tiež pridaný nejaký štýl, aby vyzerala lepšie.
Rozhodol som sa pridať trochu svetlého gradientu CSS na pozadie. Ak prehliadač nepodporuje prechody CSS ( to platí hlavne pre IE 8 a 9), farba pozadia sa prepne späť na predvolenú modrú ( farba pozadia časti tela).
Budem používať tipy na ukotvenie HTML so značkami ukotvenia, ale triedy môžete priradiť k iným vloženým prvkom, ako je napríklad silná značka alebo rozpätie . Nižšie je obsah kontajnera div:
- Top popis
- Spodná časť popisu
- Popis vľavo
- Popis vpravo
Zoznam s odrážkami obsahuje štyri prvky s kotviacimi značkami. Zmenil som štýly položiek zoznamu tak, aby neobsahovali značky zoznamu, ale boli vykreslené ako inline-block . To nám umožní pridať medzi ne výplň:
Tooltip-wrapper ( padding: 160px 0; text-align: center; ) .tooltip-wrapper li ( list-style: none; display: inline-block; margin: 0 10px; ) .tooltip-wrapper li a ( color: # fff; textová dekorácia: žiadna; )
Pozrime sa bližšie na kotvovú značku:
Popis vľavo
K odkazom som priradil dve triedy. Trieda tooltipu bude zodpovedná za telo tooltipu a druhá bude určovať jeho umiestnenie.
Môžete tiež vidieť atribút data- custom, ktorý obsahuje text nášho HTML tooltipu.
Vytvorenie triedy tooltip
Nižšie je uvedený kód triedy s popisom:
Tooltip ( position: relativní; ) .tooltip:after ( position: absolute; padding: 8px; border: 3px solid #fff; border-radius: 8px; background-color: #1FDA9A; font-size: .9em; font-weight : bold; color: #fff; content: attr(data-tooltip); min-width: 80px; /* width: -moz-max-content; */ /* width: -webkit-max-content; */ opacity : 0; prechod: všetky 0,2 s prechodom von 0,25 s; viditeľnosť: skrytý; z-index: 2; ) .tooltip:hover:after ( nepriehľadnosť: 1; viditeľnosť: viditeľné; )
Samotný popis kurzora HTML je pseudoprvok :after, umiestnený absolútne. Preto je potrebné priradiť relatívnu polohu kotviacemu prvku. Pridal som niekoľko základných štýlov, ako je výplň, orámovanie, veľkosť a šírka písma. Pozrime sa bližšie na vlastnosť content.
Obsahuje attr() , hodnotu, ktorá obsahuje náš vlastný popis údajov a používa ho na zobrazenie textu samotného popisu. Namiesto názvu data-tooltip môžete použiť akýkoľvek iný názov, len sa uistite, že začína reťazcom data- . Viac o týchto atribútoch sa môžete dozvedieť tu.
Telo popisu má minimálnu šírku 80 pixelov. Ak chcete, aby sa obsah popisku roztiahol na jeden riadok, nastavte vlastnosť width na max-content , ktorá je momentálne zakomentovaná. Upozorňujeme, že ide o experimentálnu funkciu, takže musíte použiť predpony -webkit- a -moz-.
Na to, aby sme v popise pri umiestnení kurzora HTML dali efekt animácie snímky, používame vlastnosť prechodu. Všimnite si hodnotu 0,25 s, ktorá určuje oneskorenie pred zobrazením alebo skrytím popisku. Nezobrazí sa teda, ak omylom prejdete myšou na text, ale iba ak nad textom prejdete dlhší čas. Nastavil som aj nepriehľadnosť na 0 a viditeľnosť na skrytú . Nemôžeme použiť display: none; , pretože prvok úplne zmizne a neuvidíme žiadne prechodové efekty. Nepriehľadnosť a viditeľnosť sa zmení, keď umiestnite kurzor myši nad prvok.
výsledok:
Pozri
Poznámka: Zmenil som/odstránil som niektoré značky a štýly v ukážke CodePen. Ak chcete vidieť konečný výsledok, pozrite si ukážku na konci tohto článku.
Pridanie pohybu
Teraz, keď sme implementovali popis zobrazenia/miznutia kurzora HTML, poďme ho presunúť. Vlastnosť animácie sme už priradili a zostáva nám nastaviť počiatočnú pozíciu, odkiaľ sa má objaviť, a konečnú:
/*Počiatočná poloha tipu*/ .tooltip-top:after ( bottom: 150%; left: 0; ) .tooltip-bottom:after ( top: 155%; left: 0; ) .tooltip-left:after ( right: 130 %; min-width: 100px; ) .tooltip-right:after ( left: 130%; min-width: 100px; ) /*Pozícia konca rady*/ .tooltip-top:hover:after ( bottom: 120%; ) .tooltip-bottom:hover:after ( top: 125%; ) .tooltip-left:hover:after ( right: 110%; ) .tooltip-right:hover:after ( left: 110%; )
Rozhodol som sa pridať túto funkciu do ďalších tried. Ak teda priradíte napríklad triedu .tooltip-left , tooltip sa zobrazí naľavo od textu, ak pridáte .tooltip-top , tooltip sa bude zobrazovať navrchu atď.
Zobraziť ukážku
V tejto ukážke používam triedu .tooltip-right. Môžete experimentovať a použiť rôzne triedy na nastavenie rôznych pozícií pre popis HTML.
Vytvorenie trojuholníka
Posledným prvkom popisku je malý trojuholník na jednej strane poľa. Vytvoríme ho pomocou pseudotriedy :before( pseudotrieda :after sa už používa pre samotný popis). Priradíme ho k našim štyrom triedam pozícií tak, že pre každú z nich je trojuholník nakreslený zodpovedajúcim spôsobom:
/** * Trojuholníky */ .tooltip-top:before, .tooltip-bottom:before, .tooltip-left:before, .tooltip-right:before ( content: ""; display: block; position: absolute; border- šírka: 7px; štýl orámovania: plný; farba orámovania: rgba(0, 0, 0, 0); nepriehľadnosť: 0; prechod: všetky 0,2 s nabehnutie von 0,25 s; viditeľnosť: skryté; ) .tooltip- top:hover:before, .tooltip-bottom:hover:before, .tooltip-left:hover:before, .tooltip-right:hover:before ( nepriehľadnosť: 1; viditeľnosť: viditeľné; )
Trojuholník vytvoríme tak, že okraju dáme šírku, keď samotný prvok nemá šírku ani výšku. V tomto prípade je šírka okraja nastavená na 7 pixelov. Farba rámu je úplne priehľadná, čo je veľmi dôležité. V nasledujúcom úryvku kódu priraďujem farbu zodpovedajúcej strane okraja, čo mi umožňuje definovať tvar trojuholníka.
Zvyšok štýlu vyzerá podobne ako to, čo sme urobili pre telo HTML popisku pri umiestnení kurzora myši. Máme rovnaké prechody, pozícia je absolútna, nepriehľadnosť je nastavená na 0 a viditeľnosť je skrytá:
/*Počiatočná poloha trojuholníka*/ .tooltip-top:before (top: -51%; left: 50%; transform: translateX(-50%); border-top-color: #fff; ) .tooltip-bottom:before ( bottom: -56%; left: 50%; transform: translateX(-50%); border-bottom-color: #fff; ) .tooltip-left:before ( left: -31%; top: 15%; border -left-color: #fff; ) .tooltip-right:before ( right: -31%; top: 15%; border-right-color: #fff; ) /* Koncová poloha trojuholníka */ .tooltip-top:hover :before ( top: -21%; ) .tooltip-bottom:hover:before ( bottom: -26%; ) .tooltip-left:hover:before (vľavo: -11%; ) .tooltip-right:hover:before (vpravo: -11%; )
Aby sa trojuholník pohyboval rovnakým spôsobom ako popis, musíte priradiť počiatočnú a koncovú polohu.
Vlad Merževič
HTML už má globálny atribút title, ktorý možno pridať do ľubovoľného prvku na webovej stránke. Tento atribút pridá popis, ktorý sa zobrazí, keď umiestnite kurzor myši na prvok. Písmo textu, veľkosť popisku a jeho vzhľad vo všeobecnosti závisí od operačného systému a nemožno ho zmeniť pomocou štýlov. Okrem toho mnohí vývojári nie sú spokojní s tým, že takýto náznak zmizne pomerne rýchlo. To vás núti hľadať spôsoby, ako vytvoriť svoj popis, ktorý by bol navrhnutý požadovaným spôsobom. Samozrejme, najuniverzálnejší spôsob je , no v niektorých prípadoch stačí aj samotný CSS.
Ako príklad som vybral fotografie, keď na ne nabehnete myšou, zobrazí sa názov fotografie. Samotný textový výstup urobíme pomocou vlastnosti content a hodnotu textu prevezmeme z nejakého atribútu cez attr() . Bohužiaľ obsah nebude v kombinácii s img fungovať podľa želania, takže fotografie sú vložené do prvku
Príklad 1 HTML kód
HTML5 IE Cr Op Sa Fx
Prejdime k štýlu nášho popisku. Najprv je potrebné, aby sa vôbec objavil. Využijeme na to pseudoprvok ::after , ku ktorému pridáme obsah: attr(data-title) .
Photo::after ( content: attr(data-title); )
Ukazuje sa, že po obsahu prvku s triedou fotografie sa zobrazí text z atribútu data-title, čo sme potrebovali. Ale keďže tooltip by sa mal objaviť len vtedy, keď na fotku prejdete myšou, pridajme ďalšiu pseudotriedu :hover.
Photo:hover::after ( content: attr(data-title); )
Zostáva len nastaviť požadovaný štýl nášho popisku, najmä polohu, farbu pozadia, text, rám atď. (príklad 2).
Príklad 2: Štýl popisku
HTML5 CSS3 IE Cr Op Sa Fx
Výsledok tohto príkladu je znázornený na obr. jeden.
Ryža. 1. Typ popisku
Poloha popisku nezávisí od polohy kurzora, zobrazí sa na rovnakom mieste, keď prejdete myšou na obrázok. Môžete nastaviť, aby sa popis zobrazoval v spodnej časti fotografie, takže nezakrýva väčšinu obrázka. Štýl sa mierne zmení (príklad 3).
Príklad 3: Zobrazenie popisu v spodnej časti fotografie
HTML5 CSS3 IE Cr Op Sa Fx
Výsledok tohto príkladu je znázornený na obr. 2.
Ryža. 2. Typ popisku
Bohužiaľ, vlastnosť prechodu, ktorú možno použiť na animáciu popisku, nefunguje s pseudoprvkami. Preto sa budeme musieť uspokojiť s náhlym objavením sa nášho popisku. Tiež to nebude mať žiadny účinok v IE8 a nižších verziách, ktoré nepodporuje ::after . Ak však tento pseudoprvok nahradíte :after , môžete získať viac-menej fungujúcu verziu.
alebo ktoré prvky HTML môžu obsahovať popisky
Kapitola obsahuje príklady popisy z oblasti Hypertext Markup.
V menu vľavo nájdete moderné a veľmi podrobné HTML návody.
Umožnia vám vytvoriť si web od začiatku pri pohľade trochu nižšie.
V tejto kapitole sa pozrieme na
Pred pokračovaním HTML rady Odporúčam vám prečítať si informácie.
Môže to byť zaujímavé.
Hlavné trendy raného internetu
Od roku 1997, po nástupe prvých prehliadačov, sa niektorí spotrebitelia aktívne špecializujú na rôzne oblasti internetu, ako aj na oblasť informačných technológií a počítačovej podpory. Mnohí používatelia sa stávajú webdizajnérmi, začínajú vytvárať osobné a firemné webové stránky, podieľajú sa na budovaní lokálnych počítačových sietí. Takto sa sebavzdelávajú. Tento stav pretrváva dodnes. Dnes je veľmi módne a pohodlné získavať vedomosti prostredníctvom World Wide Web. Dnes a najmä vtedy, v polovici 90. rokov minulého storočia, potrebovali bývalé socialistické krajiny programátorských špecialistov. Je dopyt - bude ponuka. Programátori študujú masovo – niektorí na univerzitách, niektorí doma pred obrazovkou počítača. V týchto rozprávkových časoch sú veľmi populárne programátorské fóra, kde si mladí a nie príliš odborníci vymieňajú svoje skúsenosti a nápady.
Popis pre odkaz HTML
Všetko je tu takmer rovnaké: atribút title="". definuje vyskakovacia html nápoveda .
alt="" obrázka definuje alternatívny text, ktorý sa zobrazí na stránke, ak sa obrázok nezobrazí.
Nenechajte sa zmiasť HTML náznak a alternatívny text, keďže sú to úplne iné veci.
Popup HTML tooltip pre text
HTML popis sa vzťahuje na takmer všetky prvky stránky.
Inak povedané, title="" známy z príkladov vyššie môže mať značky nadpisov na všetkých úrovniach, značky odsekov, značky blokov, obrázky a vložené prvky, ako napr. , a ďalšie.
Mám skúsenosti s umiestnením atribútu title="" do značiek názvu prvej úrovne a do odkazov.
Osobne používam popisy, samozrejme, v rámci nevyhnutných amatérskych experimentov s optimalizáciou textu stránky pre vyhľadávače. Neodvažujem sa posudzovať, nakoľko boli moje experimenty úspešné. Úprimne povedané, výsledok takejto optimalizácie je ťažké vystopovať, ale je veľmi ľahké to preháňať s kľúčovými slovami a frázami. Buďte preto opatrní a nepreháňajte to v propagácii, pretože vždy riskujete, že vás vyhľadávače potrestajú.
Súvisiace články
Rozmýšľame, ako obnoviť Skype na prenosnom počítači
Fixies masters plná verzia Fixies hra plná verzia stiahnutá do vášho počítača
Inštalácia alebo aktualizácia, oprava chýb Net framework 3
Virtuálne meny a virtuálne burzy vo svete
Zlaté čísla Ako predať krásne telefónne číslo