Ako urobiť krásny nápis v html. Ako urobiť krásne písmo v html: veľkosti, farby, značky html písma. Text je predvolene zarovnaný doľava.

Nariaďujem pánom senátorom, aby svoj prejav ponechali nepísaný,
ale vlastnými slovami, aby každý videl tie nezmysly!
Petra Veľkého.

v súčasnosti text v html je hlavným spôsobom prezentácie informácií. Prevažná väčšina webových stránok na internete pozostáva z textového obsahu. To znamená, že so schopnosťou môžete aspoň čítať a maximálne písať (na každom vtipe je niečo pravdy).

Povedzme, že ste zadali text v editore, naformátovali ho (zvýraznili niektoré slová tučný alebo kurzívou), alebo s tým urobil niečo iné. Potom som skopíroval a vložil text do môjho html kódu. Otvoríte html stránku v a všetko vaše formátovanie niekam zmizlo. Stáva sa to preto, že textový editor používa na formátovanie textu svoje vlastné špeciálne znaky (v podstate rovnaké značky, ktoré sa používajú iba v textových editoroch), ktoré predvolene nevidíte.

V okne editora vidíte iba text. Ale v skutočnosti existujú aj ovládacie špeciálne znaky, pomocou ktorých editor „rozumie“, ako zobraziť ten alebo ten text. To znamená, opakujem, je to to isté, len "nabrúsené" pre použitie v textových editoroch.

Napriek tomu však existuje spôsob, ako preniesť text z editora a vložiť ho do html kódu v jeho pôvodnej podobe. A keďže hovoríme o tomto, začneme študovať formátovanie textu z tejto značky. Tak poďme na to.

§ 2. Samotné značky na formátovanie

Vopred naformátovaný text je možné vložiť na html stránku pomocou značiek a. Prehliadač zobrazí text uzavretý medzi týmito značkami tak, ako bol textový editor. Aby som bol úprimný, nikdy som túto značku v praxi nepoužíval, takže o nej nemôžem povedať nič iné.

Medzi najobľúbenejšie značky na formátovanie textu patria:

• - používa sa na zvýraznenie textu tučný.


• - zvyknutý dostať kurzíva text. Namiesto tejto značky sa odporúča použiť značku.


• - dovolí zdôrazniť text. Tu ide hlavne o to, aby si používateľ nemýlil podčiarknutý text s odkazom.


• - prečiarkne text.


• - určený na zvýraznenie textu dolného indexu (dolného indexu). Tento tag môže byť užitočný napríklad pri písaní chemických vzorcov. Tu je kód

  H20

  Dáva nám tento vzorec



• - potrebné na zvýraznenie textu horného indexu (horného indexu). Napríklad napísať umocňovanie: píšeme

  (a+b)2,

  Dostaneme

  (a+b) 2.

Vo všetkých týchto značkách na formátovanie textu môžete použiť jeden po druhom alebo niekoľko naraz. To sa dosiahne vložením značiek do seba. Napríklad nasledujúci html kód:

H2O je vzorec pre vodu.

pri prezeraní

H2O- toto je vzorec vody.

§ 3. Odseky

V HTML sa odseky vytvárajú pomocou . Použitím tejto značky sa vloží jeden prázdny riadok a viditeľný prvok html stránky sa umiestni za ním na ďalší riadok. Napríklad, ak napíšeme:

Bude to vyzerať takto:

A nie je potrebné používať uzatváraciu značku, pretože prehliadač sa domnieva, že začiatok nasledujúceho odseku znamená koniec predchádzajúceho, ale je žiaduce vyhnúť sa zmätku.

§ 4. Zarovnanie textu

Atribút sa používa na zarovnanie textu. zarovnať s možnými hodnotami stred, vľavo, vpravo a ospravedlniť. Zarovnáva text na stred, doľava, doprava a súčasne pozdĺž dvoch okrajov naraz. Napríklad html kód:

align="center">Text na stred

zarovnať text na stred:

Stred textu

A tento kód:

vpravo">

zarovnať text doprava

Zarovnať text vpravo

E if atribút zarovnať nepoužívaný, text bude zarovnaný doľava. Toto sa deje štandardne. Príklad, kód:

zarovnať text doľava

Text je predvolene zarovnaný doľava.

§ 5. Zalomenie riadku a vodorovná čiara

Ak je potrebné zabezpečiť prechod na nový riadok bez vloženia prázdneho riadku (stane sa to pri stlačení Enter v textovom editore), použije sa značka
. Napríklad html kód

1. Prvý riadok.
2. Druhý riadok.

v prehliadači to bude vyzerať takto:

1. Prvý riadok.
2. Druhý riadok.

O
žiadna koncová značka. Pravdepodobne ste už uhádli, že ak chcete vložiť niekoľko prázdnych riadkov, musíte napísať značku
niekoľkokrát za sebou.

Pomocou značky môžete tiež vizuálne oddeliť časti textu. Táto značka vytvára na stránke oddeľovaciu lištu (ako je napríklad zelená na začiatku tohto článku). Značka má nasledujúce atribúty:

• veľkosť- hrúbka pásu;


• šírka- šírka čiary;


• zarovnať- zarovnanie;


• farba- farba pruhu;


• noshade- vlastnosť, ktorá nemá žiadnu hodnotu. Ak je zadané, vytvorí sa plný čierny pruh bez tieňa.

Napríklad html kód:

align="center" size="5" width="50%" color="#3399ff">

v prehliadači to bude vyzerať

Šírka a hrúbka môžu byť špecifikované v pixeloch (vtedy bude hodnota konštantná) alebo v percentách (vtedy sa bude hodnota meniť v závislosti od rozlíšenia obrazovky).

§ 6. Nadpisy

Ak chcete nastaviť názvy sekcií a podsekcií v HTML, použite titulné značky. Existuje šesť úrovní nadpisov a sú označené takto:

• - nadpis prvej úrovne


• - nadpis druhej úrovne


• - nadpis tretej úrovne


• - nadpis štvrtej úrovne


• - nadpis piatej úrovne


• - nadpis šiestej úrovne

Nadpisy sú tučné a oddelené od zvyšku textu prázdnym riadkom. Najväčší nadpis (s ním je zvýraznený názov tejto lekcie) a najmenší . Značky nadpisov majú atribúty:

• zarovnať- zarovnanie textu nadpisu na stránke (hodnoty sú rovnaké ako pri bežnom zarovnaní textu);


• titul- popis, ktorý sa zobrazí, keď umiestnite kurzor myši na nadpis.

Napríklad kód HTML:

align="center" title="(!LANG:Tip s tipom. Ak ho chcete zobraziť, umiestnite kurzor myši na nadpis.">Заголовок 4 уровня !}

v prehliadači to bude vyzerať takto:

Nadpis úrovne 4

§ 7. Práca s písmom

Na priame formátovanie písma má HTML značku. Táto značka má nasledujúce atribúty:

• farba- farba textu písma;


• tvár- typ písma;


• veľkosť- veľkosť textu písma. Dá sa nastaviť na absolútne (od 1 do 6) resp relatívna hodnota(+1 až +6 a -1 až -6). Štandardne je veľkosť textu 3. Ak zadáte size="+1"

§ 8. Vytváranie zoznamov v HTML

AT HTML zoznamy sú vytvorené pomocou značiek a. V prvom prípade sa vytvorí usporiadaný (číslovaný) zoznam, v druhom nezoradený (označený) zoznam. Každý prvok zoznamu je označený značkou. Prehliadač zobrazí položky zoznamu s Nový riadok ako stĺpec s odsadením a odrážkami. Typ značky je určený atribútom typu.

V usporiadanom zozname sú značky (hodnoty atribútu typu):

• 1 - číslovanie arabskými číslicami (štandardne);


• A- veľké písmená v abecednom poradí;


• a- malé latinské písmená;


• ja- veľké rímske číslice;


• i- malé rímske číslice.

Napríklad HTML kód

Prvý prvok.
Druhý prvok.
Tretí prvok.

prehliadač to zobrazí.

Stáva sa, že potrebujete zobraziť obrázok a priradiť meno (krátka fráza). Na to existujú nasledujúce možnosti:

Align="top" - zarovná text k hornej časti obrázka.
align="bottom" - zarovná text nadol.
align="middle" - zarovná text na stred.

Nižšie je uvedený kód, ktorý demonštruje fungovanie vyššie uvedených parametrov.

krásna včela

Veľmi milá včielka

Tiež nič.

Teraz sa pozrime, ako zobraziť obrázok s veľkým množstvom textu.
Sú dve možnosti:

Align="left" – obrázok sa zalomí okolo textu vľavo.
align="right" – obrázok sa vpravo "obtáča okolo textu".

Pre prehľadnosť napíšte nasledujúci kód:

Tvar Slnka sa približuje ideálnej gule s priemerom 1 392 000 km. Obsahuje obežnú dráhu Mesiaca a je tam ešte veľa miesta. V skutočnosti by sa do Slnka bez problémov zmestilo viac ako milión planét podobných Zemi. Taktiež, ak by ste mohli jazdiť autom po jeho povrchu rýchlosťou 88 km/h, trvalo by vám 5 a pol roka, kým by ste raz obleteli Slnko (a bez zastavenia). Ale veľkosť Slnka nie je konštantná. Moderný výskum ukazujú, že priemer Slnka sa zmenšuje asi o 1 meter za hodinu. Ak sa tento jav odohral aj v minulom storočí, tak Slnko, ktoré vidíme teraz, je o 800 km menšie ako to, ktoré videli naši predkovia. Možno je táto slnečná kontrakcia súčasťou dlhodobého kolísania, ktoré pomáha stabilizovať masívne uvoľňovanie energie.

Mesiac

Je to jediný prirodzený satelit Zeme. Hmotnosť Mesiaca je 0,0123 hmotnosti Zeme (približne 1/81) alebo 7,6,1022 kg. Priemer Mesiaca je o niečo viac ako štvrtina zemského (0,273) alebo 3 476 km. Mesiac osvetľuje Zem 500 000-krát slabšie ako Slnko). Na Mesiaci nie je známa atmosféra, nie sú tu žiadne rieky a jazerá, vegetácia a živé organizmy. Gravitačná sila na Mesiaci je šesťkrát menšia ako na Zemi. Deň a noc s poklesom teploty až o 300 stupňov trvajú dva týždne.

ale ako vidíte, môže sa stať, že text a obrázok sú príliš blízko seba. Aby ste to vyriešili, stačí nastaviť požadovanú hrúbku a farbu rámu, napríklad pozadie.

Astronomický jav, pri ktorom Mesiac úplne alebo čiastočne zakrýva (zatmí) Slnko pred pozorovateľom na Zemi. Zatmenie Slnka je možné iba na novom mesiaci, keď strana Mesiaca privrátená k Zemi nie je osvetlená a samotný Mesiac nie je viditeľný. Zatmenie je možné len vtedy, ak sa nový mesiac vyskytne v blízkosti jedného z dvoch mesačných uzlov (priesečník viditeľných dráh Mesiaca a Slnka), nie viac ako 12 stupňov od jedného z nich.

Vzhľad textu na obrazovke závisí len od značiek, nezávisí od medzier a zalomení riadkov.

Všetky prvky návrhu dokumentov HTML sú rozdelené do dvoch typov: vložené a blokové.

Vložené prvky môžu byť súčasťou riadku a prvky bloku vždy zaberajú svoj vlastný priestor na webovej stránke a vždy začínajú na novom riadku. Samozrejme, blokové prvky môžu obsahovať ďalšie blokové prvky a vložené prvky. Zo zrejmých dôvodov vložené prvky nemôžu obsahovať prvky bloku.

Kombinovanie prvkov webovej stránky do blokov vám umožňuje použiť na ne jeden dizajn a implementovať rozloženie. Bude stačiť zmeniť umiestnenie bloku zmenou jedného zjednocujúceho tagu. Prirodzene, je to pohodlnejšie ako meniť umiestnenie každého prvku webovej stránky jednotlivo.

Vložené prvky sú orámované značkami ... .

Pár sa používa na zarámovanie prvkov blokového typu.

Prehliadače rámčeky div so zalomením riadkov.

Blokovať

).

Používa sa pre špeciálne typy textu, kde je dôležité formátovanie.  Text v tejto značke sa na stránke zobrazuje presne tak, ako sa zobrazuje v kóde stránky.  Zachováva všetky medzery a zlomy riadkov.  Text je zobrazený jednoliatym písmom, ale to sa dá zmeniť pomocou štýlov.

Výber textu
HTML má značky na zvýraznenie textu.  Tagy a vytvorte tučné písmo.  Hoci tieto značky majú určité rozdiely, zvyčajne vyzerajú na stránke rovnako.  Tagy a zvýraznite text kurzívou.  Je tam štítok , čím sa text podčiarkne, no jeho použitie je nežiaduce.

Príklad výberu textu:
21
22
23
24

 Tučné písmo
Tučné písmo
Kurzíva
Kurzíva

Text je možné zvýrazniť pomocou štýlov.  Každý sa rozhodne, ako zvýrazniť text pomocou značiek alebo štýlov.
Ďalšie značky
Pozreli sme sa na špeciálne značky HTML pre text.  Ale text môže obsahovať aj mnoho ďalších značiek, ktoré pridávajú obsah na stránku.  Môžete dokonca vložiť text mimo akýchkoľvek značiek, stále sa bude zobrazovať na obrazovke.  Ale v praxi to nikto nerobí, pretože mimo značiek sa text nedá kontrolovať.  Preto musí byť všetok text samozrejme vo vnútri značiek.  A keď sa naučíte CSS, budete vedieť definovať vzhľad text.
Vo všeobecnosti samotná otázka nie je náročná.  Na položení jedného bloku na druhý nie je nič zložité.  V tejto veci však stále existuje niekoľko bodov, ktoré si zaslúžia diskusiu.  Myslím, že sú ľudia, ktorých to bude zaujímať.
Cieľom je len prekryť nejaký text na obrázku.  Text je prezentovaný ako bloky s premenlivou dĺžkou, má byť umiestnený na ľavej strane s hladkou výplňou okolo textu.  Napríklad ako na tomto obrázku:
Schéma dokumentu

HTML značky
 

 
 
Film v parku: 
Kung fu panda

Samozrejme, bolo by jednoduchšie použiť prvok div na zobrazenie obrázka ako obrázka na pozadí, ale v tomto prípade vychádzam z toho, že obrázok je obsahom dokumentu a teda patrí do HTML.  Prvok div sa použije ako kontajner na absolútne umiestnenie textu v ňom.
css
.image ( pozícia: relatívna; šírka: 100 %; /* pre IE 6 */ ) h2 ( pozícia: absolútna; hore: 200px; vľavo: 0; šírka: 100 %; ) 
Text sme teda umiestnili priamo na vrch obrázka.  Našou ďalšou úlohou je urobiť pozadie pre text.  Vzhľadom k tomu, prvok 
je blokový prvok, nemôžeme ho použiť na tieto účely.  Použime vložený prvok .  V ňom zalomíme text vo vnútri nadpisu.

 
Film v parku: 
Kung fu panda
Tento rozsah použijeme na štýl textu a pozadia:
Rozpätie H2 ( farba: biela; písmo: tučné 24px/45px Helvetica, Sans-Serif; medzera medzi písmenami: -1px; pozadie: rgb(0, 0, 0); /* v prípade, že ďalší riadok nefunguje */ pozadie: rgba(0, 0, 0, 0,7); výplň: 10px; )
Problémy

Ako môžete vidieť na obrázku, na konci riadku sa blok textu končí hneď za posledným znakom v riadku a začína okamžite zarovnaný doľava na ďalšom riadku.  Vlastnosť výplne pre rozpätie nám v tomto prípade nepomôže.
Ak chcete problém vyriešiť, musíte použiť ďalšie rozpätia na oboch stranách značky 
, v takom prípade už môžeme použiť výplň.

 

 Film v parku: 
 

  Kung fu panda

Pomocou týchto nových rozsahov nastavíme vlastnosť výplne:
H2 span.spacer ( výplň: 0 5px; )
A čo sémantika?
V tejto fáze je návrh hotový, no jeden problém zostáva.  Totiž obrovské množstvo doplnkových HTML prvky pridané len na účely dizajnu.  Myslím rozpätia.  Na vyriešenie tohto problému použite jQuery.  Ak to chcete urobiť, odstráňte všetky rozsahy v značke a pridajte ich dynamicky:

 
Film v parku: 
Kung fu panda
$(funkcia() ( $("h2").wrapInner(" "); $("h2 br").before(" ").po(" ");
});