Číslovaný zoznam veľmi podobné označeným. Jediným rozdielom je, že pred každú položku v očíslovanom zozname sa namiesto grafických značiek automaticky umiestnia poradové čísla alebo písmená.

Očíslovaný zoznam je určený pomocou značiek. Rovnako ako v prípade zoznamu s odrážkami je každá položka identifikovaná značkou

kľúčové slovo PÁSKA.

TAPE = 1 - Štandardné číslovanie (1,2,3,4,5, ...)

TAPE = A - veľké písmená (A, B, C, D, ...)

TAPE = a - Naliehavé písmená (a, b, c, d, ...)

TAPE = I - rímske číslice (I, II, III, IV, ...)

TAPE = i - rímske malé číslice (i, ii, iii, iv, ...)

Zoznamy definícií sa mierne líšia od ostatných typov zoznamov. V tomto prípade sa na opis každej položky v zozname používajú dva tagy, a nie jeden tag.

1. ... Označiť
   určuje jeden prvok, tj definovaný výraz a značku
   - ostatné informácie, ktoré sú zobrazené na nasledujúcom riadku, sú odsadené. Druhý riadok informácií sa nazýva definícia. Zoznam definícií je špecifikovaný rovnakým spôsobom ako ostatné zoznamy. Jediným rozdielom je, že každý prvok vyžaduje dve značky.

   Jednou z veľkých vecí, ktoré zoznamy prinášajú, je možnosť navzájom ich vnoriť. Vnorenie zoznamu do zoznamu je rovnaké ako jednoduché vytvorenie zoznamu. Na to nie sú žiadne špeciálne. HTML tagy... Aby ste zabránili zámene prehliadača, zatvorte každý vnútorný zoznam značkou... Môžete do seba dokonca investovať Rôzne druhy zoznamy.

   Prehrajte všetky vyššie uvedené zoznamy

   Zoznamy majú jednu nevýhodu - sú jednorozmerné. To znamená, že informácie môžete vkladať iba do po sebe nasledujúcich riadkov. Tabuľky vám naopak umožňujú usporiadať údaje nielen do riadkov, ale aj do stĺpcov.

   Na definovanie tabuliek sa používa množstvo značiek. Tagy:

   a zarámovať celú tabuľku a množstvo ďalších značiek určuje, ako sa budú informácie zobrazovať. Tabuľka ukazuje Úplný popisštítky na stôl.

   
   
   

   HTML značky na vytváranie tabuliek:

   Popis značiek

   a Tieto štítky pokrývajú stôl. Označiť

   hovorí prehliadačom, že nasleduje popis tabuľky. Ak chcete, aby bola viditeľná mriežka oddeľujúca riadky a stĺpce, pridajte kľúčové slovo BORDER.

   zobrazené ako názov. Na nastavenie názvu môžete použiť aj značky a.

   Štítky zobrazujú text s nadpismi riadkov alebo stĺpcov o niečo väčším tučným písmom.

   a Značky definujú každý riadok tabuľky. Označiť voliteľné, ale robí váš kód HTML úplnejším a zrozumiteľnejším.

   Táto dvojica značiek oddeľuje text každej bunky v tabuľke.

   Vytvorte súbor, v ktorom vytvoríte tabuľku s piatimi riadkami a piatimi stĺpcami.

   Existuje niekoľko značiek, ktoré vám umožňujú nastaviť farby pozadia a mriežky tabuľky. V prvom prípade je do značky vložené kľúčové slovo BGCOLOR

   a text označený týmito značkami,

   a
   a

   nasledujúce obrázky:

   Okrem kľúčového slova BGCOLOR existujú aj ďalšie spôsoby ovládania farby:

   BORDERCOLOR Zmeňte farbu mriežky tabuľky

   BORDERCOLORDARK / Používa sa na zmenu siete z

   BORDERCOLORLIGHT dodatočný 3D efekt

   Zmeňte farbu mriežky tabuľky s 3D efektom.

   Lekcia 12-13. Použitie grafiky

   Obrázky a grafika sú pre WWW veľmi dôležité. Je to jediný internetový nástroj, ktorý vám umožňuje prezerať obrázky aj text na obrazovke súčasne.

   Ak chcete umiestniť obrázok na webovú stránku, musíte vedieť, ako použiť značku ... Zadajte značku a kľúčové slovo SRC = na označenie grafiky, ktorú chcete stiahnuť.

   

   Pri zadávaní tejto značky pamätajte na to, že súbor musí byť umiestnený v rovnakom priečinku ako váš súbor HTML.

   Dobrý deň, milí čitatelia blogu! V tomto článku sa dozviete všetko o ako vložiť obrázok na stránku html... Máte niekoľko obrázkov, ktoré chcete vložiť na svoju stránku, alebo chcete na svoje webové stránky umiestniť logo? To všetko je jednoduché. Po prečítaní tohto článku budete môcť bez problémov vkladať obrázky na svoje html stránky. Aby sme to urobili, budeme o tom podrobne hovoriť img tag a jeho atribúty, pozrite sa rýchlo na formáty grafických súborov, ako sú gif, jpeg a png, a pozrite sa na nové funkcie HTML5, ktoré uľahčujú vkladanie videa a zvuku na váš server.

   Vzhľadom na to, že grafické údaje a html text nie je možné skombinovať do jedného súboru, na ich zobrazenie na webe sa používa iný prístup ako pri iných prvkoch html stránok. V prvom rade sú grafické obrázky a ďalšie multimediálne údaje uložené v samostatných súboroch. Na ich vloženie na webovú stránku sa používajú špeciálne značky, ktoré na ne obsahujú odkazy samostatné súbory... Najmä taká značka je img tag... Keď sa prehliadač stretne s takouto značkou s adresou, najskôr si vyžiada zodpovedajúci súbor s obrázkom, zvukom alebo videom z webového servera a až potom ho zobrazí na webovej stránke.

   Volajú sa všetky grafické obrázky a vo všeobecnosti všetky údaje uložené v súboroch oddelene od webovej stránky implementovaná prvky stránky.

   Pred vložením obrázkov a podrobným preštudovaním značky „img“ stojí za to naučiť sa trochu o grafických formátoch.

   Formáty grafických obrázkov.

   Existuje mnoho rôznych grafických formátov, ale prehliadače podporujú iba niektoré. Pozrime sa na tri z nich.

   1. Formát JPEG(Spoločná skupina fotografických expertov). Docela populárny formát používaný na ukladanie obrázkov. Podporuje 24-bitové farby a ponecháva všetky poltóny na fotografiách nezmenené. Jpeg však nepodporuje priehľadnosť a skresľuje malé detaily a text v obrázkoch. JPEG sa používa hlavne na ukladanie fotografií. Súbory tohto formátu majú jpg rozšírenia, jpe, jpeg.

   2. Formát GIF(Formát výmeny grafiky). Hlavnou výhodou tohto formátu je možnosť uložiť niekoľko obrázkov naraz do jedného súboru. To vám umožní vytvárať celé animované videá. Za druhé, podporuje transparentnosť. Hlavnou nevýhodou je podpora iba 256 farieb, čo nie je dobré na ukladanie fotografií. GIF sa používa hlavne na ukladanie log, bannerov, obrázkov s priehľadnými oblasťami a textom. Súbory tohto formátu majú príponu gif.

   3. Formát PNG(Prenosná sieťová grafika). Tento formát bol vyvinutý ako náhrada za starší GIF a tiež do istej miery za JPEG. Podporuje priehľadnosť, ale neumožňuje animáciu. Tento formát má príponu png.

   Pri vytváraní stránok zvyčajne používajú obrázky vo formáte JPEG alebo GIF, ale niekedy používajú PNG. Hlavnou vecou je zistiť, v ktorých prípadoch je lepšie použiť tento formát. V skratke:

   JPEG sa najlepšie používa na ukladanie fotografií alebo obrázkov v odtieňoch sivej, ktoré neobsahujú text;

   • GIF sa používa predovšetkým na animáciu;
   • PNG je formát pre všetko ostatné (ikony, tlačidlá atď.).

   Vkladanie obrázkov na html stránky

   Ako teda vložíte obrázok na webovú stránku? Vložiť obrázok umožňuje singel img tag... Prehliadač umiestni obrázok na miesto, kde narazí na značku img na webovej stránke.

   Vložte obrázok do html stránka vyzerá takto:

   Tento html kód umiestni na webovú stránku obrázok, ktorý je uložený v súbore image.jpg, ktorý sa nachádza v rovnakom priečinku ako webová stránka. Ako ste si mohli všimnúť, adresa obrázku je uvedená v atribút src... Čo som vám už povedal. Atribút src je teda povinný atribút, ktorý slúži na označenie adresy súboru s obrázkom. Bez atribútu src nemá značka img význam.

   Uvediem niekoľko ďalších príkladov zadania adresy súboru s obrázkom:

   

   tento html kód vloží na stránku obrázok s názvom image.jpg, ktorý je uložený v priečinku s obrázkami umiestnenom v koreňovom adresári webovej stránky.

   Atribút src vám umožňuje zadať viac než len relatívne odkazy na obrázky. Keďže obrázky sú uložené na webe spolu s html stránkami, každý súbor s obrázkom má svoju vlastnú URL. Preto je možné adresu URL obrázku vložiť do atribútu src. Napríklad:

   Tento kód vloží na stránku obrázok z webu mysite.ru. Adresa URL adpec sa zvyčajne používa, keď smerujete na obrázok, ktorý je na inom webe. Pre obrázky uložené na vašom webe je najlepšie použiť relatívne odkazy.

   Značka img je vložený prvok, takže je lepšie ho umiestniť do prvku bloku, napríklad do značky „P“ - odsek:

   Poďme si to precvičiť a prilepiť na našu stránku z predchádzajúcich článkov o html obrázok... Vytvorím priečinok „images“ vedľa html súboru mojej stránky a vložím tam súbor s obrázkom „bmw.jpg“, ktorý vyzerá takto:

   

   Potom bude html kód stránky s vloženým obrázkom nasledujúci:

   

   Pozrime sa na výsledok zobrazenia v prehliadači:

   

   Ako vidíme, umiestnenie obrázkov na webové stránky nie je nič ťažké. Ďalej sa pozrime na niekoľko ďalších dôležitých atribútov značky "img".

   Atribút alt je záložný

   Pretože sú obrazové súbory uložené oddelene od webových stránok, prehliadač musí na ich načítanie odoslať samostatné požiadavky. A čo keď je na stránke veľa obrázkov a rýchlosť sieťového pripojenia je nízka, potom sťahovanie ďalšie súbory bude to trvať značné množstvo času. A ešte horšie je, ak bol obrázok odstránený zo servera bez vášho vedomia.

   V týchto prípadoch sa samotná webová stránka úspešne načíta, namiesto obrázkov sa zobrazia iba biele obdĺžniky. Preto, aby bol používateľ informovaný o informácii, čo je to obrázok, použije sa. Tento atribút určuje takzvaný náhradný text, ktorý sa zobrazí v prázdnom obdĺžniku, kým sa nenačíta obrázok:

   A niečo také vyzerá takto:

   

   Veľkosť obrázku

   Stále by ste mali vedieť o niekoľkých atribútoch značiek img. Toto je niekoľko atribútov šírka a výška... Pomocou nich môžete určiť rozmery obrázku:

   Oba atribúty označujú veľkosť v pixelov... Atribút width udáva prehliadaču, aký široký by mal byť obrázok, a atribút height ako vysoký. Tieto dva atribúty je možné použiť spoločne alebo oddelene. Ak napríklad zadáte iba atribút width, prehliadač automaticky vyberie výšku v pomere k zadanej šírke a tiež v prípade použitia iba atribútu height. Ak tieto atribúty vôbec neurčíte, prehliadač automaticky určí veľkosť obrázka pred jeho zobrazením na obrazovke. Stojí za zmienku, že zadanie veľkosti obrázkov mierne zrýchli prehliadač pri vykresľovaní stránky.

   Ide zatiaľ o vkladanie obrázkov na stránky, potom zvážime, ako na stránku vložiť zvuk alebo video ...

   Vkladanie videa a zvuku pomocou HTML 5

   Nová špecifikácia html5 prináša niekoľko nových značiek, ktoré veľmi uľahčujú vkladanie mediálnych súborov. Platí to predovšetkým pre video a zvuk.

   Vložiť zvuk HTML5 poskytuje spárovanú značku AUDIO... Adresa súboru, v ktorom je zvukový klip uložený, je zadaná pomocou už známeho atribútu src:

   Značka „audio“ vytvára na stránke prvok bloku. V predvolenom nastavení prehliadač neprehráva zvukový klip. Aby to mohol urobiť, musí byť v zvukovej značke uvedený špeciálny atribút. automatické prehrávanie... Zvláštne, pretože na tom nezáleží. Prítomnosť tohto atribútu v značke stačí na to, aby sa prejavil.

   Zvukový klip sa v predvolenom nastavení na webovej stránke nijako nezobrazuje. Ak však do značky „audio“ vložíte atribút bez hodnoty ovládacie prvky, prehliadač zobrazí v mieste webovej stránky, kde je nastavená zvuková značka, ovládacie prvky na prehrávanie zvukového klipu. Patria sem tlačidlo prehrávania / pozastavenia, lišta na prehrávanie a ovládanie hlasitosti.

   Existujú stovky formátov obrázkov, ale len niektoré sú podporované webovými prehliadačmi. V tomto článku popíšeme rôzne formáty grafických súborov, ktoré sú k dispozícii webovým dizajnérom, a kedy by sa mali použiť.

   Formáty grafických súborov, ktoré podporuje väčšina populárnych webových prehliadačov, sú: Graphic Interchange Format (GIF), Joint Photographic Experts Group (JPEG), Portable Network Graphics (PNG) a vektorová grafika. Niektoré vlastnosti grafických súborov:

   • Priehľadnosť - táto vlastnosť umožňuje, aby bol obrázok v rôznom stupni priehľadnosti od plného po úplne priehľadný.
   • Kompresia - Táto vlastnosť umožňuje uložiť obrázok do oveľa menšieho súboru pomocou matematických algoritmov na spracovanie skupiny pixelov ako jedného prvku.
   • Tkanie - umožňuje načítanie obrázku najskôr na nepárne riadky a potom na párne riadky. To umožňuje návštevníkovi vidieť obrázok rýchlejšie.
   • Animácia - vytvára dojem pohybu zhotovením série sekvenčných záberov. Animovaný GIF nevyžaduje doplnok prehliadača a môže fungovať takmer na všetkých zariadeniach.
   • Progresívne načítavanie - Podobné ako tkanie v tom, že spočiatku sťahuje iba časť obrázka, ale nie na základe prekladania.

   GIF bol založený v roku 1980 a bol prijatý webovými dizajnérmi na začiatku 90. rokov ako hlavný prúd grafický formát pre webové stránky. Súbory GIF používajú kompresný algoritmus, ktorý zmenšuje veľkosť súboru na rýchle načítanie. GIF je obmedzený na 256 farieb (8-bitových), podporu priehľadnosti a prekladanej grafiky. V tomto formáte je tiež možné vytvárať animované grafiky. Všetky prehliadače môžu bez problémov zobrazovať súbory GIF.

   Výhody GIF:

   • Najrozšírenejší podporovaný grafický formát
   • V tomto formáte diagramy vyzerajú lepšie
   • Podpora transparentnosti

   Súbory sú komprimované, ale podporujú „skutočné farby“ (24-bitové) a sú preferovaným formátom pre fotografie, kde je kvalita problémom. JPEG podporuje progresívny formát, ktorý vám umožní vidieť obrázok takmer okamžite, čo po dokončení sťahovania zlepší kvalitu.

   Na rozdiel od súborov GIF môžu weboví dizajnéri manipulovať s komprimovanými súbormi JPEG, čo umožňuje rôzne úrovne kvality obrazu a veľkosti súborov.

   Výhody formátu JPEG:

   • Väčšia kompresia znamená rýchlejšie sťahovanie.
   • Produkuje skvelá kvalita pre fotografie a zložité kresby.
   • Podpora 24-bitových farieb.

   PNG je relatívne nedávny formát, ktorý bol zavedený ako alternatíva k súborom GIF. PNG podporuje až 24-bitové farby, priehľadnosť, prekladanie a môže obsahovať krátky textový popis obrázku, ktorý používajú vyhľadávacie nástroje.

   Výhody PNG:

   • Prekonáva obmedzenia 8-bitových farieb v GIF
   • Umožňuje textový popis obrázkov pre vyhľadávače
   • Podporuje transparentnosť
   • Schémy vyzerajú lepšie ako JPEG

   Vektorová grafika

   Väčšina webovej grafiky je bitová mapa alebo kresba, ktorá pozostáva z mriežky farebných pixelov. Ilustrácie by mali byť vytvárané vo vektorovej grafike, ktorá pozostáva z matematického popisu každého prvku, ktorý tvorí tvary čiar a farby obrázku. Vektorová grafika je vytvorená pútavými programami ako napr Adobe ilustrátor alebo CorelDRAW. Ak chcete použiť webovú stránku, vektorovú grafiku je potrebné skonvertovať do akéhokoľvek formátu GIF, JPEG alebo PNG.

   Aký formát by ste mali použiť?

   Webový dizajnér si pre väčšinu aplikácií môže vybrať formát GIF alebo JPEG. Ale od veľkosti Súbory GIF v porovnaní s veľkosťou spravidla malé Súbor JPEG Väčšina webových dizajnérov použije GIF na pozadie, boxy, rámy a akúkoľvek inú grafiku, ktorá vyzerá skvele s 8-bitovými farbami.

   Väčšina návrhárov zvolí formát JPEG pre fotografie a ilustrácie, kde kompresia neohrozuje vizuálnu kvalitu obrázku.

   Tento tutoriál vám ukáže, ako ozdobiť webovú stránku pridaním grafiky. Zoznámime sa s najbežnejšími formátmi obrázkov, zistíme, ktorá značka slúži na pridávanie obrázkov na stránku, zaoberáme sa alternatívnymi titulkami a zarovnaním textu a grafiky. Tiež sa zoznámime s hlavnými atribútmi obrázkov a naučíme sa upravovať šírku a výšku obrázku. Ďalej pár slov o používaní obrázkov ako odkazov a o tom, čo sú miniatúry obrázkov. Nakoniec existuje niekoľko všeobecných tipov na používanie grafiky na webovej stránke.

   Pridávanie obrázkov na webovú stránku
   Pokiaľ webová stránka obsahuje iba textové informácie, môže sa to niekomu zdať zaujímavé, vďaka informáciám na nej uvedených, ale je nepravdepodobné, že by niekoho lákalo označiť ju za atraktívnu. Pridávanie obrázkov na webovú stránku je veľmi jednoduché. Pridanie grafiky, ktorá môže stránke dodať profesionálny vzhľad, vyžaduje určité znalosti. Čomu sa vlastne dnešná lekcia venuje.

   Dva najčastejšie používané grafické formáty na internete sú GIF a JPEG. Formát vyvinutý a pomenovaný skupinou Joint Photographic Experts Group (JPEG) sa zvyčajne používa na ukladanie fotografií s plynulými farebnými prechodmi, ako sú napríklad fotografie.

   Takmer všetky ostatné grafické prvky sú uložené vo formáte GIF (Graphics Interchange Format), formáte na výmenu grafických údajov. V súčasnej dobe si získava na popularite ďalší nový grafický formát: PNG (Portable Network Graphics). Očakáva sa, že nakoniec nahradí formát GIF. Neponáhľajte sa však znova uložiť všetky grafické súbory v tomto formáte, aj keď ho stále nepodporujú všetky prehliadače.

   Všetky obrázky sa na webovú stránku pridávajú pomocou rovnakej značky, ktorá sa nazýva značka zdroja obrázka ... Teraz pravdepodobne môžete sami určiť, že tento záznam pozostáva zo samotnej značky , jeho atribút (scr) a hodnotu tohto atribútu (umiestnenie). Pretože je však povinné používať atribút scr, je vhodnejšie chápať tento záznam ako jednu generickú značku. Pravdepodobne ste si tiež všimli, že značka zdroja obrázka nemá zodpovedajúcu koncovú značku. Toto je samostatná, samostatná značka, preto na koniec pridajte lomku: .

   # 1058; D XHTML 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DТD/xhtml1/transitional.dtd "> Prvé obrázky f> Tento obrázok bol pridaný na moju prvú webovú stránku.>

   

   Pridanie alternatívnych štítkov
   Pri surfovaní na internete ste si pravdepodobne všimli rôzne nápisy, ktoré sa zobrazujú, keď umiestnite kurzor myši na nejaký grafický prvok webovej stránky. Tieto nápisy zvyčajne naznačujú nejaký druh Ďalšie informácie o samotnom obrázku alebo o oblasti stránky, ktorú zaberá.

   

   Nasledujúci HTML kód ukazuje, ako sa do značky pridáva atribút alt. ... Rovnako ako atribút src, aj alt ukazuje webovému prehliadaču niekoľko ďalších informácií o obrázku a môže byť tiež vždy použitý spoločne so značkou. .

   Atribút alt definuje alternatívny text pre grafický prvok pridaný na webovú stránku. Tento text sa nazýva alternatívny, pretože ho možno zobraziť na obrazovke ako alternatívu k samotnému obrázku. Atribút alt má ešte jeden veľmi dôležitý účel. Mnoho návštevníkov internetu, ktorí používajú kanály s nízkou prenosovou rýchlosťou, môže dať svojim prehliadačom pokyn, aby nesťahovali ani nezobrazovali grafické informácie. To im umožňuje urýchliť načítanie webových stránok do počítača.

   Nezabudnite tiež, že nie všetky prehliadače môžu vo svojich oknách zobrazovať grafiku. Napríklad prehliadač Lynx túto funkciu vôbec nepodporuje. Atribút alt teda umožňuje webovému návrhárovi mať istotu, že ak návštevník jeho webovej stránky nevidí na svojej obrazovke obrázok, môže vidieť aspoň textové informácie pridané k tomuto obrázku.

   Hoci atribút alt je možné definovať pre každú značku , dávajte pozor, aby ste niektorým grafickým prvkom nepriradili nevhodné textové správy. Nemá napríklad zmysel pridávať alternatívne textové štítky k rôznym prvkom externého dizajnu webovej stránky. Aby ste sa vyhli takýmto chybám, môžete atribút alt týchto prvkov nastaviť na prázdnu hodnotu (alt = ""). Ak nenastavíte žiadne ďalšie atribúty, prehliadač vykreslí obrázok v pôvodnej veľkosti a zarovná horný okraj obrázku s horným okrajom susedného textového riadka. Oba tieto parametre môžete zmeniť pomocou značiek štýlov.

   Atribúty obrázku
   Pre značku atribúty slúžia na zmenu veľkosti obrázku. Niektoré z týchto atribútov sú uvedené nižšie.
   výška- Určené v pixeloch alebo percentách - Určuje výšku obrázku
   šírka- Určené v pixeloch alebo percentách - Určuje šírku obrázka.

   Úprava výšky a šírky obrázku
   Rozmery obrázku umiestneného na webovej stránke je možné určiť pomocou atribútov výška a šírka. Hodnoty týchto atribútov sú špecifikované buď ako pevný počet pixelov, alebo ako percento vzhľadom na veľkosť stránky. Pozrite sa na nižšie uvedený kód HTML. Prvá značka nastavuje rozmery pôvodného obrázku, ktorý ste videli na predchádzajúcich obrázkoch tohto tutoriálu, na 60 pixelov vertikálne a 60 pixelov horizontálne. Druhá značka nastaví šírku rovnakého obrázku na 6% šírky stránky a výšku na 10% výšky stránky. Obrázok ukazuje, ako sa oba tieto obrázky zobrazujú v okne prehliadača.

   

   Zobrazovaním obrázka v jeho okne prehliadač rovnako dobre zvláda hodnoty nastavené v pixeloch aj percentách. Uvedomte si však, že počítače návštevníkov vašich webových stránok môžu mať nastavené iné rozlíšenie obrazovky než nainštalovaný pre váš monitor. Čo z toho vyplýva? Monitor má napríklad rozlíšenie 800x600. V predchádzajúcom príklade bol obrázok pridaný na webovú stránku nastavený na šírku 6% šírky stránky, čo by pri tomto rozlíšení bolo 48 pixelov. Ak zobrazíte rovnaký obrázok na monitore s rozlíšením 1024 x 800, uvedených 6% šírky stránky bude zodpovedať šírke rovnajúcej sa 61 pixelom.

   Pri zmene veľkosti obrázku nezabudnite nastaviť obe hodnoty zodpovedajúce jeho výške a šírke. Ak zmeníte iba jednu z týchto hodnôt, samotný obrázok sa na obrazovke roztiahne zvisle alebo vodorovne. Alternatívna možnosť spočíva v úprave veľkosti obrázku pomocou grafického editora.

   Môžete si vytvoriť ilúziu rýchleho načítania obrázku. Bez ohľadu na to, či je veľkosť obrázka zmenená alebo nie, vždy zadajte hodnoty atribútov výška a šírka, pretože prehliadaču poskytnú dôležité informácie o tom, koľko miesta by malo byť na stránke vyhradené na umiestnenie. tohto obrázku... V takom prípade bude prehliadač schopný určiť miesto potrebné pre obrázok a pokračovať v vytváraní ďalších prvkov stránky bez zastavenia sťahovania samotného obrázka. Pôsobí to dojmom, že sa stránka načítava rýchlejšie, pretože jej návštevníci nemusia čakať, kým sa obrázok úplne načíta, aby konečne videli ďalšie informácie na stránke.

   Ak naozaj chcete, aby sa obrázok zmestil presne do správneho priestoru na šírku stránky, použite percentá. V takom prípade obrázok na obrazovke akéhokoľvek monitora zaberie rovnakú časť stránky ako na vašej obrazovke. Ak chcete, aby rozlíšenie samotného výkresu (jeho veľkosť v pixeloch) zostalo konštantné, použite hodnoty vyjadrené v pixeloch.

   Zarovnajte text a grafiku
   Atribút zarovnania značiek Umožňuje zarovnať obrázok na pravý (pravá hodnota) alebo ľavý (ľavá hodnota) okraj textového riadku. Príklady použitia tohto atribútu sú uvedené na obrázku.

   Rovnaký atribút je možné použiť na vertikálne zarovnanie obrázku (opäť vzhľadom na textový reťazec). Môže mať tri ďalšie hodnoty, hore, dole a v strede. Ak je atribút zarovnania nastavený na začiatok, horná časť obrázku bude zarovnaná s hornou časťou okolitého textu. Ak je atribút zarovnania nastavený na spodok, spodná časť obrázku je zarovnaná so spodnou časťou okolitého textu. Ak je atribút zarovnania nastavený na stred, stred obrázku je zarovnaný so stredom textového riadku.

   Použitie obrázkov ako odkazov
   Obrázky nie sú vhodné len na návrh webových stránok. Dajú sa úspešne použiť ako hypertextové odkazy na iné dokumenty. V. HTML danéúloha je jednoduchá, pretože obrázky sa na hypertextové odkazy menia úplne rovnakým spôsobom ako štítky. Na tento účel musíte použiť aj značku, ktorá obklopí prvok webovej stránky a ktorá by sa mala stať odkazom na iný dokument. Ak by sa teda mal prechod na hypertextový odkaz vykonať po kliknutí na nejaký obrázok, je potrebné do značky vložiť značku tohto obrázku.

   a>

   V takom prípade sa po umiestnení kurzora myši na tento obrázok zobrazí textová správa „Toto je môj autoportrét!“ Vedľa kurzora. Po kliknutí na obrázok sa otvorí dokument DOC2.htm, ktorý je označený hypertextovým odkazom.

   Miniatúry obrázkov
   Ďalším bežným využitím schopnosti hypertextových odkazov HTML je použiť niektoré obrázky na navigáciu k iným. Načo to je? Faktom je, že obrázky, ktoré chcete zverejniť na webovej stránke, sú často príliš veľké a neexistuje žiadna istota, že návštevníci budú mať trpezlivosť čakať, kým sa načítanie nedokončí. V takýchto prípadoch sa vytvorí malá kópia pôvodného obrázku, nazývaná miniatúra, s ktorou sa prehliadač vyrovná s načítaním oveľa rýchlejšie. Ak má návštevník záujem o obrázok a chce si stiahnuť jeho úplnú kópiu, bude musieť iba kliknúť na túto miniatúru. Takto vyzerajú zodpovedajúce kódy HTML.

   a>

   Ako vidíte, kliknutím na obrázok miniatúry.jpg sa otvorí ďalší súbor obrázku (obrázok.jpg). Textový reťazec určený ako hodnota atribútu alt hovorí návštevníkovi, ako otvoriť hlavný obrázok.

   Tajomstvo úspešného používania obrázkov
   Obrázky sú zaujímavé a atraktívne, obsahujú množstvo vizuálnych informácií a dajú sa veľmi ľahko pridávať na webové stránky. Ak však skutočne chcete vytvoriť web, ktorý sa stane obľúbeným medzi používateľmi internetu, mali by ste dodržiavať niektoré z nasledujúcich pravidiel.

   Čím väčšia je veľkosť súboru s obrázkom, tým dlhšie trvá jeho stiahnutie do počítača používateľa. Pretože väčšina návštevníkov internetu stále používa na prístup do siete nízke komunikačné kanály priepustnosť, veľkosti stiahnutých súborov majú pre nich stále zásadný význam. Nezabudnite na to a snažte sa, aby boli obrázky na vašich webových stránkach čo najmenšie.

   Dôležitá je nielen veľkosť súboru jednotlivého obrázku, ale aj celková veľkosť súboru ako celku HTML dokument... Čím viac obrázkov sa na webovú stránku pridá, aj keď sú malé, tým väčšia bude veľkosť súboru konečného dokumentu. Vykonať Náhľad vaša stránka v rôzne prehliadače a odhadnite, ako dlho bude trvať načítanie každého prehliadača.

   Pretože atribút alt je taký dôležitý (odporúča sa, aby ste ho definovali pre každú značku , buďte opatrní pri jeho použití. Uistite sa, že obsah textová správa vždy zodpovedá samotnému obrázku, inak môžu byť návštevníci vašich stránok zmätení. Tá istá poznámka platí aj opačným smerom: uistite sa, že obrázky zodpovedajú textovým informáciám uvedeným na webovej stránke. Fotografia lietadla by bola vhodná na mieste leteckej dopravy a na mieste s voľne žijúcimi zvieratami by bola úplne zbytočná.

   Na internete môžete nájsť veľa zaujímavých obrázkov a ľahko si ich uložiť do počítača. Mnoho z týchto obrázkov je však chránených autorskými právami. Ak nájdete na komerčnom webe obrázok, ktorý sa vám páči, skontrolujte, či tam nie sú nejaké správy o autorských právach a či je tento obrázok k dispozícii na bezplatné použitie.

   Ak obrázok na webovej stránke nie je chránený autorskými právami, môžete ho skopírovať do počítača. Ak to chcete urobiť, jednoducho kliknite na tento obrázok. kliknite pravým tlačidlom myši myšou a v ponuke, ktorá sa otvorí, vyberte príkaz Uložiť obrázok ako. Po uložení obrázku do počítača ho môžete ďalej používať ako ostatné kresby.

   Väčšina webových stránok obsahuje grafiku. Umožňuje vám farebne a prehľadne prezentovať informácie. V mnohých prípadoch je lepšie ukázať obrázok ako dlhý textový popis.

   Existujú dva spôsoby umiestnenia grafiky na stránku:

   • vkladanie jednotlivých obrázkov;
   • vyplnenie pozadia obrázkom.

   V každom prípade je grafika prevzatá zo súboru.

   Vkladanie grafiky

   Na stránku sa pomocou značky vloží grafický obrázok zo súboru v grafickom formáte (z angličtiny, obrázok - obrázok) s uvedením adresy súboru ako argumentu pre atribút SRC:

   < IMG SRC = "адрес_графического_файла" >

   Adresa grafický súbor- je to buď adresa URL, alebo názov súboru, prípadne s cestou. Ak chcete napríklad zobraziť grafický súbor logotip.jpg, napíšte značku:

   < IMG SRC = "logotip.jpg" >

   Na zvýšenie prenosovej rýchlosti grafického obrázku v značke môžete použiť atribút ( dodatočný parameter) LOWSRC, ktorý ako argument berie adresu grafického súboru. Môžete vytvoriť dva grafické súbory: jeden (napríklad logotip.jpg) obsahuje obrázok s vysokým rozlíšením a druhý (napríklad logotip.gif) obsahuje obrázok s nízkym rozlíšením. Potom je značka:

   < IMG SRC = "logotip.jpg" LOWSRC = "logotip.gif" >

   ... dá prehliadaču pokyn, aby najskôr prevzal súbor logotip.gif a potom ho po prijatí nahradil súborom logotip.jpg.

   Ďalším spôsobom, ako urýchliť načítanie grafiky, je nastaviť veľkosť obdĺžnikovej oblasti, v ktorej bude grafika umiestnená, pomocou atribútov ŠÍRKA(šírka) a VÝŠKA(výška) merané v pixeloch. Ak zadáte tieto atribúty, prehliadač najskôr vyhradí priestor pre grafiku, pripraví rozloženie dokumentu, zobrazí text a až potom načíta grafiku. Upozorňujeme, že prehliadač zmenší alebo roztiahne obrázok tak, aby zodpovedal rámcom zadanej veľkosti. Príklad zadania veľkosti obrázka:

   < IMG SRC = "logotip.gif" WIDTH = 40 HEIGHT = 20 >

   Obrázky sa zvyčajne používajú v spojení s textom, takže vzniká úloha zarovnania textu a grafiky. Táto úloha sa vykonáva pomocou atribútu ZARADIŤ tag pomocou rôznych argumentov. Môžeme napríklad chcieť, aby text pretekal okolo obrázku doprava alebo doľava. Obrázok je zvyčajne vložený blízko textu, čo môže byť škaredé. Aby ste tomu zabránili, môžete okolo obrázku nastaviť prázdne okraje. Polia sa vytvárajú pomocou atribútov VSPACE pre horný a dolný okraj a НMESTO pre bočné okraje v značke ... Argumenty pre tieto atribúty sú zadané ako čísla, ktoré určujú veľkosť polí v pixeloch. Ak chcete zrušiť tok textu okolo grafiky, použite značku
   .

   Nasledujúca značka nastavuje tok grafiky zo súboru logotip.jpg doprava (obrázok bude vľavo od textu):

   < IMG SRC = "logotip.jpg" ALIGN = LEFT >

   Ak chcete umiestniť obrázok napravo od textu, potrebujete atribút ZARADIŤ priradiť argument SPRÁVNY:

   < IMG SRC = "logotip.jpg" ALIGN = RIGHT >

   Ak chcete nastaviť polia okolo obrázku, musíte napísať značku ako:

   < IMG SRC = "logotip.jpg" ALIGN = LEFT HSPACE = 20 VSPACE = 10 >

   Tu čísla 20 a 10 určujú veľkosti polí.

   Uvažujme o príklade zdieľanie grafika a texty. Otvoriť Poznámkový blok ( textový editor Poznámkový blok) Windows. Napíšte doň kód HTML pomocou vyššie uvedených značiek. Nasleduje program, ktorý zobrazuje určitý text a grafiku. Všetky súbory, ktoré máte, môžu byť použité ako grafický súbor. Používa sa súbor logotip.gif.

   < HTML >

   < HEAD >

   < TITLE >Cvičenie 1< / TITLE >

   < / HEAD >

   < BODY BGCOLOR = "YELLOW" >

   < IMG SRC = "logotip.gif " ALIGN = LEFT >

   < H1 >Text sa obtáča okolo grafiky vpravo< / H1 >

   Ryža. 657... Text sa zalomí okolo obrázku vpravo

   Poskytuje dostatok príležitostí na presné umiestnenie obrázkov (ako aj iných prvkov) na stránke stoly a štýlov... Títo Prvky HTML bude prediskutované neskôr. Môžete napríklad definovať tabuľku bez viditeľných rámcov a do buniek tejto tabuľky umiestniť obrázky, texty a ďalšie prvky.

   Copyright © 2021 win-keys.ru - Všetko o operačnom systéme Windows