Potrebné nástroje
Aby sme rozviedli koncept zarovnania v HTML, musíme spomenúť niektoré potrebné nástroje potrebné na spustenie kódu HTML. Jeden je textový editor a druhý je prehliadač. Pomôcť môže textový editor, napríklad poznámkový blok, vynikajúci súbor, poznámkový blok ++ alebo akýkoľvek iný. V tejto príručke sme ako prehliadač použili poznámkový blok, predvolenú aplikáciu v systéme Windows a Google Chrome.
Formát HTML
Aby sme pochopili zarovnanie, musíme mať najskôr nejaké znalosti základov HTML. Predstavili sme snímku obrazovky so vzorovým kódom.
< html >
< hlava >...</ hlava >
< telo >….</ telo >
</ html >
HTML má dve hlavné časti. Jedna je hlava a druhá telo. Všetky značky sú napísané v hranatých zátvorkách. Hlavná časť sa zaoberá pomenovaním html stránky pomocou tagu title. A tiež použite vyhlásenie o štýle vo vnútri hlavy. Na druhej strane, telo sa zaoberá všetkými ostatnými značkami textu, obrázkov alebo videí atď. Inými slovami, čokoľvek, čo chcete pridať na svoju html stránku, je zapísané v hlavnej časti html.
Jedna vec, ktorú tu musím zdôrazniť, je otváranie a zatváranie značiek. Každá zapísaná značka musí byť zatvorená. Html má napríklad počiatočnú značku a koncovú značku. Je teda zrejmé, že koncová značka má lomku, za ktorou nasleduje názov značky. Podobne všetky ostatné značky tiež používajú rovnaký prístup. Každý textový editor sa potom uloží s príponou html. Použili sme napríklad súbor s názvom example.html. Potom uvidíte, že ikona poznámkového bloku sa zmenila na ikonu prehliadača.
Pretože zarovnanie je obsahom štýlu. Štýl v html je troch typov. In-line štýl, interný a externý štýl. Inline znamená v značke. Vnútorné je napísané vo vnútri hlavy. Externý štýl je zároveň zapísaný v samostatnom súbore CSS.
Inline štýl textu
Príklad 1
Teraz je načase diskutovať o príklade tu. Zvážte obrázok zobrazený vyššie. Do tohto súboru poznámkového bloku sme napísali jednoduchý text. Keď ho spustíme ako prehliadač, zobrazí v prehliadači výstup uvedený nižšie.
Ak chceme, aby sa tento text zobrazoval v strede, značku zmeníme.
Táto značka je vložená značka. Túto značku napíšeme, keď zavedieme značku odseku do tela html. Za textom potom zatvorte značku odseku. Uložte a potom otvorte súbor v prehliadači.
Odsek je zarovnaný v strede tak, ako je zobrazený v prehliadači. Značka použitá v tomto prípade sa používa na akékoľvek zarovnanie, tj na ľavé, pravé a stredové. Ak však chcete zarovnať text iba v strede, použije sa na to konkrétny štítok.
< centrum > …… ..</ centrum >Stredová značka sa používa pred a za textom. Toto tiež ukáže rovnaký výsledok ako predchádzajúci príklad.
Príklad 2
Toto je príklad zarovnania nadpisu namiesto odseku v html texte. Syntax tohto zarovnania nadpisu je rovnaká. To sa dá dosiahnuť pomocou značky alebo vloženým štýlom alebo pridaním značky zarovnania do značky nadpisu.
Výstup sa zobrazí v prehliadači. Značka nadpisu previedla obyčajný text na nadpis a značka ho zarovnala do stredu.
Príklad 3
Zarovnajte text v strede
Zoberme si príklad, v ktorom je v prehliadači zobrazený odsek. Musíme to zarovnať v strede.
Tento súbor otvoríme v poznámkovom bloku a potom ho zarovnáme do strednej polohy pomocou značky.
< p štýl =text-zarovnať: stred;>Po pridaní tejto značky do značky odseku uložte súbor a spustite ho v prehliadači. Uvidíte, že odsek je teraz zarovnaný na stred. Pozrite sa na obrázok nižšie.
Zarovnajte text doprava
Naklonenie textu doprava je podobné ako umiestnenie v strede stránky. Iba stredné slovo je v tagu odseku nahradené pravým.
< p štýl =text-zarovnať: správne;> ……… ..</ p >Zmeny je možné vidieť na obrázku nižšie.
Uložte a obnovte webovú stránku v prehliadači. Text sa teraz presunie na pravú stranu stránky.
Vnútorný štýl textu
Príklad 1
Ako je popísané vyššie, interný CSS (kaskádový štýl) alebo interný štýl je typ CSS, ktorý je definovaný v hlavnej časti html stránky. Funguje to podobne ako interné značky.
Zvážte stránku uvedenú vyššie; obsahuje nadpisy a odseky v ňom. Máme požiadavku vidieť text v strede. Zarovnanie v riadku vyžaduje ručné písanie značiek do každého odseku. Vnútorný štýl však možno automaticky použiť na každý odsek textu uvedením písmena p vo vyhlásení o štýle. Do tagu odseku nie je potom potrebné písať žiadnu značku. Teraz sledujte kód a funguje to.
< štýl >P{Text-zarovnať: stred}
</ štýl >
Táto značka je zapísaná v štýlovej značke v hlavnej časti. Teraz spustite kód v prehliadači.
Po spustení stránky v prehliadači uvidíte, že všetky odseky sú zarovnané v strede stránky. Táto značka sa použije na každý odsek v texte.
Príklad 2
V tomto prípade rovnako ako odsek zarovnáme všetky nadpisy v texte na pravú stranu. Za týmto účelom spomenieme nadpisy vo vyhlásení o štýle vo vnútri hlavy.
H2, h3{
Text-zarovnať: správny
}
Teraz po uložení súboru spustite súbor poznámkového bloku v prehliadači. Uvidíte, že nadpisy sú zarovnané na pravej strane stránky HTML.
Príklad 3
Pri vnútornom štýle môže nastať situácia, že potrebujete zarovnať text iba k niektorým odsekom v texte, zatiaľ čo ostatné zostanú rovnaké. Preto používame koncept triedy. Triedu uvádzame bodovou metódou vnútri značky štýlu. Do značky odseku, ktorú chcete zarovnať, je potrebné pridať názov triedy.
< štýl >.centrum{
Text-zarovnať: stred}
</ štýl >
trieda =centrum> ……</ p >
Triedu sme pridali do prvých troch odsekov. Teraz spustite kód. Na výstupe môžete vidieť, že prvé tri odseky sú zarovnané v strede, zatiaľ čo ostatné nie sú.
Záver
Tento článok vysvetlil, že zarovnanie je možné vykonať rôznymi spôsobmi pomocou vložených a interných značiek.