Zarovnanie stránok HTML: tipy a triky

Na usporiadanie pracoviska musia zabezpečiť všetky položky tak, aby tvorili ucelenú štruktúru a sú ľahko pochopiteľné koncovému užívateľovi. Spustite rozloženie webových jazykov v jazyku HTML - najjednoduchší spôsob, ako urobiť stránku jednoduchou a čitateľnou.

usporiadanie prvkov stránky

Vyrovnávacia nástroj vo formáte HTML vám umožní určiť umiestnenie textového bloku alebo prvky stránky na pravý a ľavý okraj obrazovky. Tým sa vytvorí integrálna štruktúra lokality, v ktorej sú všetky bloky usporiadané tak, že používateľ môže pohodlne vnímať informácie na stránke. V prípade, že text je napísaný na strane bez formátovania, je vidieť oveľa horšie a spôsobuje túžbu návštevníka uzavrieť stránku bez ďalšieho čítania. Takže prvá vec, ktorú rozdeliť informácie do logických jednotiek a následne ich distribuovať tak, aby bol vytvorený jednotný a ľahko zrozumiteľný obraz.


Napríklad text hlavičky môže poskytnúť nielen tučné alebo väčšie písmo, ale umiestnený v strede a v ponuke bloku posúva doľava alebo doprava, pomáha presne určiť hlavné odkaz. Najjednoduchší spôsob, ako zosúladiť šírku, je pomocou značiek HTML alebo nástrojov CSS.

Vyrovnanie pomocou HTML

Existujú štyri základné spôsoby, ako zariadiť textových prvkov na webovej stránke:
  • vľavo - text bude umiestnený na ľavej strane;
  • doprava -zodpovedá za vyrovnanie pravého okraja;
  • center - text alebo prvky sa zobrazia v strede;
  • ospravedlňujte - zarovnávajte HTML v hranách, po celej šírke stránky s rovnakými zárezmi na oboch okrajoch.
  • V predvolenom nastavení, ak sa nepoužívajú prvky formátovania, informačný blok bude zarovnaný s ľavou stranou, pravý riadok sa bude líšiť pre dĺžku riadkov.


    Nižšie nájdete príklad kódu, ktorý zobrazí príklady základných formátovacích metód na zarovnanie v šírke v jazyku HTML. Umiestnenie textu zodpovedá atribútu align, ktorý pracuje s takými značkami ako ,,

    a ďalšími. Syntax je nasledovná:


    prvý titul v tomto príklade je vyrovnaný vo vzdialenosti


    prispôsobenie titulkov na pravej strane


    (28 ) Pri dlhom prvku textu, ktorý pozostáva z niekoľkých viet, je vhodná možnosť s šírkou zarovnania.
    To zlepšuje čitateľnosť textu.


    V nasledujúcej titulky left


    Kopírovanie vyššie uvedený príklad v Poznámkový blok a uložiť ako HTML súbor. Tým, že ho otvoríte v každom prehliadači, uvidíte v praxi, ako pracovať so zarovnaním.

    Môže byť použitý nielen text, ale aj obrázky, potom kód bude vyzerať takto:

    V tomto príklade, nesený na stred v HTML. Pokúste sa experimentovať a presunúť obrázok doprava alebo doľava pomocou príslušných hodnôt atribútov.zarovnať.


    & lt; script type = "text /javascript" & gt;
    var blockSettings2 = {blockId: "R-A-271049-5", renderTo "yandex_rtb_R-A-70350 - 39", async:! 0};
    , ak (document.cookie.indexOf ("abmatch =") väčšie alebo rovné 0) blockSettings2.statId = 70350;
    ! Funkcie (a, b, c, d, e) {a [c] = a [c] || [], a [c] .push (funkcia () {Ya.Context.AdvManager.render (blockSettings2)}), e = b.getElementsByTagName ("scenár") , d = b.createElement ("scenár"), d.type = "text /javascript", d.src = "//an.yandex .ru /systém /context.js "d.async = 0e.parentNode.insertBefore (d, e)} (to, this.document ,!" yandexContextAsyncCallbacks ");

    prispôsobenie za použitia

    CSS

    Usporiadať prvky webových stránok správne môže nielen za použitia HTML, ale aj pomocou CSS. Ak chcete splniť túto úlohu, použije sa vlastnosť štýlu, ako je textové zarovnanie. On predpísal alebo v značke priamo do tela HTML dokumentu alebo si je samostatný súbor s príponou CSS štýlov, ktorý je potom pripojený.

    Prvou možnosťou je najlepšie používať na stránkach, ktoré zle načítaných štýlov. Ak je počet CSS kódu je veľmi veľký, odporúčame vytvoriť samostatný dokument obsahujúci štýlov.

    Syntax pre zarovnanie textových prvkov bude vyzerať takto.


    p {
    text-align: center; /* Zarovnanie centrum * /
    }
    {H1
    , text-align: vpravo; /* Zarovnanie vpravo * /
    }
    H2 {
    , text-align: left; /* Vyrovnajte ľavú * /
    }

    Je možné poznamenať, že táto vlastnosť bude podobné tým, ktoré sú, ak sa stredom v HTML. To isté platí pre umiestnenie textu na pravom a ľavom okraji alebo na celú šírku stránky.

    Vytvorte textový dokument a skopírujte tam kód. V tomto príklade sú hlavné odseky priložené k tagu

    bude umiestnené v strede stránky, nadpisy prvej úrovne sa zobrazia vpravo a titulky druhej úrovne sú vľavo.


    Okrem vyššie uvedených spôsobov prevedenia odôvodnenie v HTML existujú aj iné označenie, podľa ktorého môže byť umiestnený do potrebnej.

    Napríklad značka vám umožňuje odchyľovať sa od ľavej strany stránky. Ak chcete pochopiť, ako to funguje, skopírujte nasledujúci príklad.


    Zvýšená odsadenie zľava

    Je podobný spôsob, aký veľký ústup od nastavenej hodnoty ľavej použitia CSS. Použite nasledujúcu vlastnosť štýlu.

     

    Zvýšená odsadenie zľava



    Pri použití tejto metódy sám môže predpísať hodnotu, ktorá zodpovedá šírke ústupe. Vyskúšajte túto metódu a zmeňte veľkosť odsadenia na inú, aby ste pochopili princíp konania. Ďalšia zaujímavá značka, ktorá sa dá použiť na formátovanie textu, ale vnáš čas takmer úplne stratil svoj význam - to je. Jeho úlohou je vypnúť automatickú linkovú dopravu, aj keď je táto čiara väčšia ako šírka okna prehliadača.

    Záver

    Tento článok považuje za hlavné spôsoby zosúladenia textu a iných štrukturálnych prvkov webovej stránky pomocou nástrojov HTML a CSS. Ktorý spôsob výberu? Toto by malo byť riešené v závislosti od toho, aké ciele a ciele stanovené počas rozloženia stránky.

    Súvisiace publikácie