bejáratKépek a weboldalakon. Grafika a html weblapján
A kép beillesztése a weboldal szövegébe, használjon egyetlen címkét (Táblázat. P 1). A címke attribútumai Állítsa be az oldalra közzétett kép összes paraméterét. Kötelező az SRC attribútum, amely meghatározza a grafikai fájl címét és nevét. Ha az SRC attribútum nincs telepítve, csak üres képikon jelenik meg.
Címke szerkezet Az SRC attribútum:
.
Ha az Intézet nevű grafikus fájl ugyanabban a mappában van, mint a weboldal, meg kell írni az elhelyezésre:
.
Fájlnévformátum
A Minsk névvel rendelkező grafikus fájl befogadására a D címen: \\ Collection \\ City \\ Minsk.gif, akkor rögzítenie kell .
A címke használata A weblap egy grafikus fájlt egy másik számítógépen található a globális internetes "Internet".
Hozzon létre egy weboldalt az Intézetünk fotójával, amelyet az 1. ábrán mutatunk be. 4.1, meg kell adnia a következő HTML-kódot:
Intézetünk
Ábra. 4.1. WEB PAGE a fotóintézettel
A fenti példában a fotó magassága (magasság) 200 pixel, és a szélesség (szélesség) 300 pixel. A fénykép elhelyezéséhez egy bekezdés a központban való illesztéssel jön létre.
Vízszintes vonalak
A vízszintes vonal weboldalán található szállás egyetlen címkével történik
. Az attribútumok mérete, szélessége, színe és igazítása, a vastagság, szélesség, szín és a vonalak összehangolásának módját ennek megfelelően módosítják.
Tekintsünk néhány példát, amely elmagyarázza a gori esernyővonalak elhelyezését:
1.
- vízszintes vonal a teljes oldalhoz 2 pixel vastagságú.
2.
Szélesség \u003d "200" Align \u003d "Jobb"\u003e - Vízszintes zöld színű 15 képpont, 200 pixel szélessége és a jobb szélen hagyva.
3.
- Vízszintes kék vonal a teljes oldalon 25 képpont vastagságú.
4.
Szélesség \u003d "300" Align \u003d "Bal"\u003e - Vízszintes vonal piros szín 20 képpont vastag, 300 pixel szélesség és igazítás a bal szélen.
A négy felvett példát mutató vonalakat a 2. ábrán mutatjuk be. 4.2.
Ábra. 4.2. Vonalak a weblapon
Asztalok
Táblázatok létrehozása
A táblázat létrehozása pár címkével történik
A HTML-kódban.
Bármely táblázat vonalakból áll, és a vonalak a sejtekből származnak. A formátumú sorok és sejtsejtek esetében a következő címkéket használjuk:
Ezeket a címkéket a pár címke belsejében rögzítik
A táblázat kialakulása a sorokon következik be - egy sor van megadva, és a szükséges számú sejt meghatározása van, majd a második vonal stb.
Annak érdekében, hogy egy táblázatot kapjunk az 1. ábrán látható weboldalon. 5.1, meg kell tárcsáznia a következő HTML-kódot:
| Autók | Ár | Fordulat | 5000 | Golf | 6000 |
|---|
a külső határ vastagsága 6 képponttal egyenlő lesz. Az asztalhatárok nem jelennek meg, a határ-attribútumnak 0 értéket kell rendelni, vagy egyszerűen csak az attribútum kihagyásához.
Helló Kedves blogolvasók! Ebben a cikkben mindent megtudsz a kép behelyezése a HTML oldalra. Van-e több képed, amelyet az oldalára szeretnél elhelyezni, vagy szeretnél logót helyezni a webhelyére? Mindez könnyű. A cikk elolvasása után a HTML oldalainkat nehézségek nélkül beillesztheti. Ehhez beszéljünk részletesen Img címke tulajdonságait, illetve röviden megvizsgálni a formátumok grafikus fájlok, mint a GIF, JPEG és PNG, valamint lássuk az új funkciók a HTML5, amely egyszerűsíti a beiktatása video és audio a helyszínen.
Annak a ténynek köszönhetően, hogy a grafikus adatok és a HTML szöveg nem kombinálható egy fájlban, egy másik megközelítést használnak a webhelyen, nem pedig más HTML oldalakkal. Először is, a grafikus képeket és más multimédiás adatokat külön fájlokban tárolják. És megvalósításuk során speciális címkéket használnak a weboldalon, amelyek linkeket tartalmaznak ezekhez az egyes fájlokhoz. Különösen a címke img címke. Miután találkozott egy ilyen címkével a címmel, a böngésző először kéri a megfelelő fájlt a kép, audió vagy videó, és csak akkor jeleníti meg a weboldalon.
Minden grafikus kép általában minden olyan adat, amelyet az egyes fájlok tárolnak a weboldalon végrehajtott Oldalelemek.
A képek beillesztése előtt és az "IMG" címkét részletesen figyelembe veszi, érdemes egy kis tanulást a grafikus formátumokról.
Grafikus képformátumok.
Számos különböző grafikus formátum létezik, de a böngészők csak néhányat támogatnak. Tekintsük három közülük.
1. JPEG formátum(Közös fotográfiai szakértői csoport). A képek tárolására használt szép népszerű formátum. Támogatja a 24 bites színt, és megőrzi az összes féltónusot a fotókban változatlanok. De a JPEG nem támogatja az átláthatóságot és torzítja a kis részleteket és a szövegeket a képeken. A JPEG főként a fotótároláshoz használják. Ez a formátumú fájlok jpg, jpe, jpeg kiterjesztésekkel rendelkeznek.
2. GIF formátum(Grafika Interchange formátum.). Ennek a formátumnak a fő előnye, hogy egyszerre több képet tárolhat egy fájlban. Ez lehetővé teszi az egész animációs görgők létrehozását. Másodszor, támogatja az átláthatóságot. A fő hátrány csak 256 színt támogat, amely nem alkalmas fotók tárolására. A GIF-t főként logók, bannerek, átlátszó helyszínekkel és szöveget tartalmazó képek tárolására használják. Ez a formátumú fájlok GIF kiterjesztéssel rendelkeznek.
3. Png formátum(Hordozható hálózati grafika.). Ezt a formátumot az elavult gif, valamint bizonyos mértékig, JPEG helyettesítésére fejlesztették ki. Támogatja az átláthatóságot, de nem teszi lehetővé az animáció létrehozását. Ez a formátum kiterjesztése a PNG-nek.
Amikor a webhelyek létrehozása általában képeket használ JPEG vagy GIF formátumban, de néha használja a PNG-t. A legfontosabb dolog, hogy megértsük, milyen esetekben milyen formátumban használható. Ha röviden, akkor:
- A GIF főként az animációhoz használják;
- A PNG formátum a többi (ikonok, gombok stb.).
A JPEG-t legjobban a fényképek vagy a féltónusú képek tárolására használják, amelyek nem tartalmaznak szöveget;
Képek beillesztése a HTML oldalakba
Szóval hogyan helyezze be a képet a weboldalon? Helyezze be a képet img címke. A böngésző a képet a weboldal helyére helyezi, ahol az img találkozik.
Helyezze be a kód képeit HTML-ben Az oldal ilyen jellegű:
Ez a HTML kód a képen tárolt képet a weboldalon tárolja, amely ugyanabban a mappában van egy weboldalon. Hogyan észlelte a jelzett kép címét sRC attribútum. Amit mondtam. Tehát az SRC attribútum egy kötelező attribútum, amely megadja a fájl címét a képen. Az SRC attribútuma nélkül az IMG-címke nem értelme.
Néhány példát adok a fájlkép címének megadására:
ez a HTML-kód egy képet helyez be a képre. JPG névvel az oldalra, amelyet a weboldal gyökerében található képek mappájában tárol.
Az SRC attribútumban nemcsak a képekre vonatkozó relatív linkeket adhatja meg. Mivel a képek a HTML oldalak mellett vannak tárolva, így minden képzel rendelkező fájl rendelkezik saját URL-címével. Ezért az SRC attribútum behelyezheti a kép URL-jét. Például:
Ez a kód beilleszti a képet a mysite.ru-ről az oldalra. Az URL ADPEC-t általában alkalmazzák, ha egy másik webhelyen egy képet ad meg. A webhelyén tárolt képekhez jobb relatív linkek használata.
Az IMG-címke kisbetűs elem, így jobb, ha a blokkelembe helyezhető, például a "P" címke belsejében - bekezdés:
Gyakoroljuk, és helyezze be a képet az előző cikkekről a HTML képen. Az oldal "Képek" mappájának HTML-fájlja mellett fogok létrehozni, és a fájlt a "bmw.jpg" képre helyezi, amely így néz ki:
Ezután az oldal HTML oldala a beillesztett képhez hasonló lesz:
És megnézzük a megjelenítési eredményt a böngészőben:
Amint nem látunk semmit bonyolult a képek elhelyezésében a weboldalakon. Ezután fontolja meg az "IMG" címke több más fontos attribútumát.
Alt attribútum - tartalék opció
Mivel a képfájlok külön tárolódnak a weboldalaktól, majd az átvételükért, a böngészőnek külön kéréseket kell tennie. És mi van, ha az oldalon található képek sokat lesznek, és a hálózathoz való csatlakozás sebessége kicsi, akkor a további fájlok letöltése jelentős időt igényel. És még rosszabb, ha a képet a tudás nélkül eltávolították a szerverről.
Ezekben az esetekben a weboldal maga sikeresen betöltődik, csak a képek helyett csak fehér téglalapok jelennek meg. Ezért tájékoztatja a felhasználói információkat, amelyeket a kép használ. Ezzel az attribútummal az úgynevezett csere szöveg jelenik meg, amely egy üres téglalapban jelenik meg, miközben a kép nem indul el:
És ez így néz ki:
Állítsa be a kép méretét
Még mindig van pár IMG tag attribútum, amit tudnia kell. Ez egy attribútumpár szélesség és magasság. Használhatja őket a képméretek megadásához:
Mindkét attribútumban a méret látható képpontok. A szélességi attribútum azt jelzi, hogy a böngésző milyen szélességnek kell lennie, és a magasság attribútuma. Ez a két attribútum együtt alkalmazható és külön alkalmazható. Ha például csak a szélességi attribútumot adja meg, a böngésző kiválasztja a megadott szélességgel arányos magasságot, és ha csak a magasság attribútumot használ. Ha egyáltalán nem adja meg ezeket az attribútumokat, akkor a böngésző automatikusan meghatározhatja a kép méretét a képernyőn a képernyőn. Érdemes megjegyezni, hogy a képméret meghatározza kissé felgyorsítja a böngésző munkáját, amikor az oldal megjelenik.
Ezen az oldalakon lévő képek beillesztéséről minden, akkor fontolja meg, hogyan kell beilleszteni audiót vagy videót a webhelyre ...
Videó és hang beillesztése HTML 5
Az új HTML5 specifikációban több új címke jelenik meg, amellyel könnyen beillesztheti a multimédiás fájlokat. Ez elsősorban videót és hangot érint.
Betétre hang- A HTML5 pár címkét biztosít Hang.. Az a fájl címét, amelyben az audiofűrűt tárolják, a már ismerős SRC attribútum jelzi:
Az "Audio" címke blokk elemet hoz létre az oldalon. Alapértelmezés szerint a böngésző nem reprodukálja az audiogyűrűt. Bármi is volt, az audio címkén, meg kell adnia egy speciális attribútumot automatikus lejátszás. Különleges, mert nem számít. Az egyik attribútum jelenléte a címkén, hogy elkezdett cselekedni.
Alapértelmezés szerint az audiogyűrű nem jelenik meg a weboldalon. De ha az "audio" címke egy attribútumot jelentené ellenőrzések.A böngésző megjelenik a weboldal helyén, ahol az audiocímke található, az audiogyűrű lejátszási vezérlése. Ezek közé tartozik a Start gomb és szüneteltetni a lejátszást, a lejátszási mérlegeket és a hangerőszabályozást.
Meghatározás 1.
A weboldal egy szöveges fájl, amelyet a HTML-ben hoztak létre, és a World Wide Web (WWW) található. A szöveg kivételével a weboldal olyan hipertext linkeket tartalmazhat, amelyekhez átállhat más weboldalakra, és megtekintheti azokat, valamint a grafika, animációk, videoklipek és zenék formájában lévő betéteket.
A HTML nyelv használatával:
- Weboldalak létrehozása és szerkesztése.
- HTML-formátumú dokumentumok szerkesztése az internetről, figyelembe véve a dokumentumban végrehajtott összes objektum működését (képek, animációk stb.).
- Segítségével hipertext hivatkozások és a képesség, hogy vezessenek be egy dokumentumot HTML formátumú rajzok, ábrák, animációk, videoklipek, zenei és beszéd kíséretében, szöveg speciális effektusok, ami a multimédiás prezentációk, diavetítések, demonstrációs projektek.
1. megjegyzés.
A grafikus képeket általában külön fájlokban tárolják. A HTML-ben speciális címkék vannak, amelyek segítségével a weboldalak kódjaiban előírt linkek, amelyek az interneten lévő fájlok tényleges címe. Az ilyen címkékkel való találkozás során a webböngésző kérést tesz a webszerverhez a megfelelő fájlhoz a képhez, audióhoz vagy videóhoz, és a weboldalhoz a címke helyére hozza. Bármely adat (kép, hang- és videó stb.), Amelyeket a weboldalon egyedi fájlokban tárolnak, beágyazott weboldalaknak nevezik. Tekintsünk többet a kép hozzáadásának folyamatát a weboldalhoz.
Képek hozzáadása a weboldalhoz
A weboldalak vonzereje pontosan a grafikákban és más különböző tárgyakban. Kép hozzáadása az oldalra nem nehéz. És add grafika képes arra, hogy a külső megjelenés a weboldal több szalonképes és a szakmai, sokkal nehezebb, speciális tudásra lesz szükség.
Kép hozzáadása az oldalhoz egy olyan képforráscímkével használható, amely úgy néz ki:
hol - maga a címke, és az SCR az az attribútuma. Mivel az SCR attribútum kötelező, elmondható, hogy ez a bejegyzés egy közös címke. A forráscímkén a megfelelő záró fél nem használható, mivel a forráscímke önellátó, és ezért használatos, akkor szükség van egy záró ferde vonalra a végén :.
Alternatív feliratok hozzáadása
Az interneten nagyon gyakran találhat olyan különböző feliratokat, amelyek megjelennek, amikor az egérmutatót a weboldal bármely grafikus objektumához húzza. Ezek a feliratok általában további információkat tartalmaznak a képről vagy az oldalán található oldalról.
Az alábbiakban az NTML-kód, amelyben az ALT attribútum a címkén belül kerül hozzáadásra. Ez az attribútum hasonló az SRC attribútumban tájékoztatja a böngészőt néhány további információra a képről, és a TEG-vel együtt is használható.
alt \u003d "(! Lang: Ez egy kép!" />!}
Az ATTRIBUTE funkció ALT az, hogy meghatározza a weboldalhoz hozzáadott alternatív szöveg grafikus elemét. Alternatívnak nevezik, mert a képernyőn a kép alternatívájaként jelenik meg. Az ALT attribútum egy másik fontos funkciót végez. Lehetővé teszi az internetes tervező számára, hogy biztos legyen benne, hogy ha az oldal látogatója nem látja a képet a képernyőn, akkor is legalábbis megismerheti magát a képhez hozzáadott szöveges információkkal.
Az egyes címkék ALT attribútumának használatakor fontos figyelni, hogy ne hozzárendelje a szöveges üzeneteket grafikus elemekben. Például nincs értelme alternatív szöveg feliratok hozzáadásában az oldal megjelenésének elemeihez. Az ilyen hibák elkerülése érdekében ezeknek az elemeknek az üres érték attribútumát rendelhet (Alt \u003d "). Ha nem adja meg az értékeket más attribútumokra, akkor a böngésző az eredeti méretben reprodukálja a képet, míg a kép felső szélét egy szöveges karakterlánc felső szélével vonja be. Mindazonáltal megváltoztathatja mindkét paramétert a stíluscímkék segítségével.
Kép attribútumok
A címke olyan attribútumokkal rendelkezik, amelyek lehetővé teszik a képek méretének megváltoztatását. Itt van néhány közülük:
- magasság - vele, azt a kép magassága képpontokban vagy százalékban határozza meg;
- szélesség - A kép szélessége pixelben vagy százalékban van meghatározva.
A kép magassága és szélességének beállítása
A weboldalakon közzétett képek méretei a fenti attribútumok segítségével állíthatók be. Ezenkívül értékeiket meghatározott számú képpontként vagy az oldal méretéhez viszonyított százalékként határozzák meg. Az alábbi HTML-kódban az első címke tartalmazza az eredeti kép méretét képpontokban (60 képpont függőlegesen és 60 pixel vízszintesen), a második címke szélessége ugyanazon képkészletek egyenlő az oldal szélességének 6% -ával, és a A magasság 10% az oldal magasságához képest.
alt \u003d "Ez egy kép!" Súly \u003d "60" szélesség \u003d "60" /\u003e
alt \u003d "Ez egy kép!" Magasság \u003d "10%" szélesség \u003d "6%" /\u003e
Jegyzet 2.
Az ablakban lévő képek lejátszásakor a böngésző ugyanolyan jól kezelhető a két faj értékének feldolgozásával. Azonban meg kell emlékezni, hogy a számítógépeken lévő weboldalak látogatói a képernyőn kívüli képernyőn telepíthetők. Ezért, amikor a képméret megváltozik, mindenképpen be kell állítania mindkét képértéket (magasság és szélesség). Ha csak egy ilyen értéket változtat, a kép a képernyőn vagy vízszintesen nyújtható.
Használhatja a gyorsabb kép betöltésének illúziójának létrehozását. Ehhez mindig meg kell adnia a magasság és a szélességi attribútumok értékeit, függetlenül attól, hogy a képméretek megváltoztak-e vagy sem. Mivel tájékoztatják a böngészőt fontos információkat a kép elhelyezéséhez szükséges hely számáról. Válaszul a böngésző jelzi a képhez szükséges helyet, és továbbra is építi az oldal más elemeit, anélkül, hogy megállná a kép letöltését. Ebben a tekintetben úgy tűnik, hogy az oldal gyorsabban van betöltve, mivel a látogatóknak nem kell várniuk a kép teljes terhelését, hogy más információkat találjanak az oldalon.
Annak érdekében, hogy a kép bármely képernyőn, függetlenül annak engedélyétől, pontosan egy adott helyet vett igénybe az oldal szélessége fölött, akkor százalékos értékeket kell használnia. Ha szükséges, hogy az állandó a rajz engedélye (mérete pixelben), akkor az értékeket pixelben kell használni.
Szöveg és grafika kiegyenlítése
A kép jobbra (jobbra) vagy balra (balra), a szöveges karakterlánc széle az Align tag attribútumot használja. Például:
alt \u003d "Ez egy kép!" Súly \u003d "60" szélesség \u003d "60" Align \u003d "Jobb" /\u003e
A kép igazítását képest függőlegesen a szöveget, akkor is használja ezt az attribútumot, amely eltarthat felső, alsó és Központ értékeket. A felső érték jelzi a kép felső szélét a környező szöveg felső szélén. Az alsó érték jelzi a kép alsó szélét a környező szöveg alsó szélén. A középérték jelzi a kép középső igazítását a szöveges karakterláncban.
Képek használata referenciaként
A képeket a hiperhivatkozások más dokumentumokhoz is tervezték. A HTML-ben a kép hiperhivatkozásgá válik, valamint a felirat. Ehhez a TEG-t használják, amelyben az oldal eleme (esetünkben, a képen), amely referenciaként kell lennie. A következő linkre lesz kapcsolva a képre.
A képek miniatúrája
A fenti módszer mellett, amelyben a kép hiperhivatkoziként működik, akkor hiperhivatkozásként is használható, amely egy képből a másikra átmennek. Ez olyan esetekben van szükség, ahol a weboldalon megjelenő képméret meglehetősen nagy, és nagyon hosszú ideig fognak betölteni, ami sok látogató számára elfogadhatatlan. Ezért hozzon létre egy csökkentett másolatot a képen (miniatűr) és képviseli a hiperhivatkozást. Ha az oldal látogatója érdekli ezt a képet, akkor a miniatűrre kattintva megnézheti a teljes körű kép megtekintését. Adunk példát:
alt \u003d "Kattintson a normál kép megtekintéséhez."
súly \u003d "60" szélesség \u003d "60" /\u003e
A képek sikeres használatának titkai
A képek sok vizuális információt hordoznak a látogatók számára, és vonzóvá teszik őket, ráadásul nagyon szépek ahhoz, hogy hozzáadják a weboldalt, de ugyanakkor be kell tartaniuk a webhely létrehozására vonatkozó bizonyos szabályokat, ha azt szeretnénk népszerűvé válik a hálózaton.
Ha oldalak létrehozása, akkor megpróbálja helyre képek kis méretben azokat, mivel a nagy kétdimenziós kép igényel sok időt letölteni, és néhány felhasználó még mindig alacsony sávszélességű csatorna hozzáférni a hálózathoz, így a méret a letöltött A fájlok alapvető fontosságúak.
3. megjegyzés.
A teljes HTML dokumentumfájl teljes mérete fontos, ami viszont nemcsak a benne lévő képek méretétől, hanem a mennyiségüket is függ. Az Alt attribútum használatakor figyelni kell, hogy a szöveges üzenetek tartalma mindig megfelel-e a képnek. És az ellenkező esetben: Biztosítani kell, hogy a kép megfeleljen az oldalon bemutatott szöveges adatoknak.
Az interneten kölcsönzött képek használatakor az alaplapon meg kell vizsgálnia, ellenőriznie kell, hogy ezeket a képeket szerzői joggal védi-e.
HTML képek hozzáadva a weboldalakhoz címkével . A grafika használata a weboldalakat vizuálisan vonzóbbá teszi. A képek jobban közvetítik a webdokumentum lényegét és tartalmát.
HTML-címkék segítségével
Helyezze be a képeket HTML dokumentumba
1. címke ![]()
Elem Az Alt attribútum segítségével hozzáadja a képet és biztonsági mentési tartalmát. Elemként
egy vonal, akkor javasoljuk, hogy a blokk elembe helyezzük, például,
Vagy
Címke Kötelező SRC attribútummal rendelkezik, amelynek értéke abszolút vagy relatív út a képhez:
A címkén A következő attribútumok állnak rendelkezésre:
| Tulajdonság | Leírás |
|---|---|
| Alt. | Az Alt attribútum alternatív szöveget ad a képhez. A webhely megjelenése előtt jelenik meg, mielőtt betölti, vagy ha a grafikon le van tiltva, és megjelenik egy előugró hegyvel is, amikor az egérmutatót a képre mozgatja. Szintaxis: alt \u003d "(! Lang: Kép leírása" . !} |
| Crossarigin. | A Crossarigin attribútum lehetővé teszi, hogy képeket töltsön fel más tartományi erőforrásokból az Cors lekérdezéseivel. A Cors lekérdezések használatával betöltött képek újrafelhasználhatók. Megengedett értékek: Anonymous - keresztező eredetű lekérdezés HTTP fejléc segítségével történik, és a hitelesítő adatok nem kerülnek továbbításra. Ha a kiszolgáló nem adja meg a hitelesítő adatokat a kiszolgálónak, ahonnan a tartalom kérte, a kép megsérül, és a használat korlátozott lesz. Használati hitelesítő adatok - A keresztes eredetű lekérdezés a hitelesítő adatok átadásával történik. Szintaxis: Crossarigin \u003d "Anonymous". |
| Magasság | A magasság attribútum a képmagasságot px-ben állítja be. Szintaxis: magasság \u003d "300". |
| ismap | Az ISMAP attribútum azt jelzi, hogy a kép része a kiszolgálón található képkártya (térképkép - interaktív területek képe). Ha rákattint a képtérképre, a koordinátákat a kiszolgálóra továbbítják, mint lekérdezési karakterláncot. Az ISMAP attribútum csak akkor engedélyezett, ha az elem Szintaxis: Ismap. |
| Longdesc. | Extended Image Leírás URL, amely kiegészíti az Alt attribútumot. Szintaxis: LongDESC \u003d "http://www.example.com/description.txt". |
| Src | Az SRC attribútum beállítja a kép elérési útját. Szintaxis: src \u003d "flower.jpg". |
| Méretek. | Megadja a képméretet a megjelenítési paraméterek függvényében. Csak egy meghatározott srcset attribútummal működik. Az attribútum értéke egy vagy több vonal a vesszőn keresztül. |
| Srcset. | A képernyő felbontás alapján kiválasztott képforrások listáját hozza létre. Használható együtt vagy az SRC attribútum helyett. Az attribútum értéke egy vagy több sor, amelyet a vessző elválaszt. 
|
| uhatéria | Az Usemap attribútum a képet térképképként határozza meg. Az értéknek meg kell kezdődnie a # szimbólummal. Az érték a név attribútumértékhez vagy a címkeazonosítóhoz tartozik |
| szélesség | A szélességi attribútum a kép szélességét px-ben állítja be. Szintaxis: Szélesség \u003d "500". |
1.1. Képcím
A képcím teljesen feltüntethető (abszolút URL), például:
URL (http://anysite.ru/images/anyphoto.png)
Vagy a relatív útvonalon keresztül dokumentum vagy gyökérkatalógus Webhely:
URL (../ képek / anyphoto.png) - relatív útvonal a dokumentumból,
URL (/images/anyphoto.png) a gyökérkatalógus relatív útja.
Ezt az alábbiak szerint értelmezik:
../ - azt jelenti, hogy felmászhat egy szintre, a gyökérkatalógusra,
Képek / - menj a kép mappájába,
anyphoto.png - A képfájlt jelzi.
1.2. Képméretek
A képméret megadása nélkül a rajz egy valós méretű oldalon jelenik meg. A képméreteket a szélesség és a magasság attribútumok segítségével szerkesztheti. Ha csak az egyik attribútum van megadva, akkor a második automatikusan kiszámításra kerül, hogy megőrizze a minta arányokat.
1.3. A grafikus fájlok formátuma
JPEG formátum (Közös fotográfiai szakértői csoport). A JPEG képek ideálisak a fotókhoz, több millió különböző színt tartalmazhatnak. A képek jobbak, mint a GIF, de a szöveg és a nagyméretű, szilárd színű területek foltokkal boríthatók.
GIF formátum Grafika Interchange formátum). Ideális olyan képek tömörítéséhez, amelyekben vannak olyan területek, amelyek szilárd színűek, például logók. A GIF-fájlok lehetővé teszik, hogy az egyik színt átlátszóvá tegye, hogy a weboldal háttere a kép egy részét mutatja be. A GIF fájlok is tartalmazhatnak egyszerű animációt. A GIF-képek csak 256 árnyalatot tartalmaznak, amiből a képek foltos és irreális színűek, mint poszterek.
Png formátum Hordozható hálózati grafika). Tartalmazza a GIF és a JPEG formátumok legjobb jellemzőit. 256 színt tartalmaz, és lehetővé teszi, hogy az egyik szín átlátszó legyen, miközben a képeket kisebb méretre tömöríti, mint a GIF fájl.
Apng formátum Animált hordozható hálózati grafika). Képformátum PNG formátum alapján. Lehetővé teszi az animáció tárolását, és támogatja az átláthatóságot is.
SVG formátum Skálázható vektoros grafika). Az SVG rajz egy XML formátumban leírt geometriai formákból áll: vonal, ellipszis, sokszög stb. Támogatott mind a statikus, mind animált grafika. A funkciókészlet különböző konverziókat, alfa maszkokat, szűrési hatásokat, sablonok használatának képességét tartalmazza. A SVG formátumban lévő képek a minőség csökkentése nélkül változhatnak.
BMP formátum (Bitmap kép). Ez egy tömörítetlen (eredeti) bitkép, amelynek sablonja egy téglalap alakú pixel rács. A bitmap fájl egy fejléc, paletta és grafikus adatokból áll. A cím tárolja a grafikákat és a fájlinformációkat (pixelek mélysége, magasság, szélesség és színek száma). A paletta csak olyan bitmap fájlok jelenik meg, amelyek paletta képeket (8 és kevesebb biteket) tartalmaznak, és legfeljebb 256 elemből állnak. A grafikus adatok maguk képezik. A formátum színmélysége 1, 2, 4, 8, 16, 24, 32, 48 bit / pixel.
ICO formátum (Windows ikon). Fájl ikonok tárolása a Microsoft Windows rendszerben. A Windows ikonját az interneten található webhelyek ikonjaként is használják. Ez a formátum képe, amely a böngésző webhelycíme vagy könyvjelzője mellett jelenik meg. Az egyik ICO fájl egy vagy több ikont tartalmaz, amelyek mindegyikének mérete és kromatikussága külön-külön van beállítva. Az ikon mérete lehet bármilyen, de leginkább használt négyzet ikonok 16, 32 és 48 képponttal.
2. címke
Címke
A címke a név attribútumban érhető el, amely meghatározza a térkép nevét. Név attribútum érték a címkéhez
Elem
3. címke
Címke Csak egy aktív területet ír le az ügyféloldalon lévő képkártyák részeként. Az elemnek nincs zárócímke. Ha egy aktív terület átfedi a másikat, az első linket a területek listájából hajtják végre.
| Tulajdonság | Rövid leírás |
|---|---|
| Alt. | Megadja az Alternatív szöveget az aktív térképhez. |
| Koordok. | Meghatározza a képernyő helyét a képernyőn. A koordinátákat hossznövi, és vesszővel elválasztják: -ért kör - a kör középső koordinátái és sugara; -ért téglalap - a bal felső és a jobb alsó sarkok koordinátái; -ért poligon - Az koordinátáit a sokszög csúcsai a kívánt sorrendben, akkor is ajánlott, hogy jelezze a legújabb koordinátákat megegyezik az első, a logikai befejezése az ábra. |
| Letöltés | Kiegészíti a HREF attribútumot, és megmondja a böngészőt, hogy az erőforrást be kell tölteni abban az időben, amikor a felhasználó rákattint a linkre, például ahelyett, hogy előzetesen megnyitja (PDF fájlként). Az attribútum nevének megadásával így beállítottuk a nevét a letölthető objektumra. Az attribútumot az érték megadása nélkül használhatja. |
| href. | Megadja az URL-t referenciaként. Meghatározható abszolút vagy relatív kapcsolat cím. |
| hreflang. | Megadja a kapcsolódó webes dokumentum nyelvét. Csak a href attribútummal használják. A fogadott értékek rövidítés, amely a nyelvi kódot jelző betűből álló rövidítés. |
| Média | Meghatározza, hogy melyik típusú eszközöket optimalizálják. Az érték lehet bármilyen média lekérdezés. |
| Rel. | Kiegészíti a href attribútumot az aktuális és a kapcsolódó dokumentum közötti kapcsolatról. Teljes értékek: Az alternatív egy hivatkozás a dokumentum alternatív változatára (például egy oldal, fordítás vagy tükör nyomtatott formája). Szerző - Link a dokumentum szerzőjéhez. A könyvjelző a könyvjelzők számára használt állandó URL. Segítség - referencia hivatkozás. Licenc - Hivatkozás a szerzői jogi információkra ezen a webdokumentumban. Következő / Előző - Meghatározza az egyes URL közötti kapcsolatot. Ennek a jelölésnek köszönhetően a Google megállapíthatja, hogy az oldaladatok tartalma logikai sorrendben van csatlakoztatva. Nofollow - Megakadályozza, hogy a keresőmotor az ezen az oldalon vagy egy adott kapcsolaton keresztül menjen. Noreferrer - Azt jelzi, hogy a böngésző linkje nem küldheti el a HTTP kérés fejlécét (referrer), amely rögzíti a webhely látogatóját, amelyből az oldal. Előzetes - Azt jelzi, hogy a céldokumentumnak meg kell gyorsítani, azaz A háttérben lévő böngésző betölti az oldal tartalmát a gyorsítótárba. Keresés - azt jelzi, hogy a céldokumentum egy keresőeszközt tartalmaz. TAG - Megadja az aktuális dokumentum kulcsszavát. |
| alak | Megadja a térképen és koordinátái aktív területének formáját. A következő értékeket veheti igénybe: Téglalap alakú rect - aktív terület; A kör egy kör alakú aktív terület; A Poly egy poligon formájában aktív terület; Alapértelmezés - Az aktív terület a kép teljes területét veszi igénybe. |
| cél. | Megadja, hogy a dokumentum letölthető, ha a link megjelenik. A következő értékeket veszi: _Self - az oldal betöltődik az aktuális ablakba; _blank - Az oldal új böngészőablakban nyílik meg; _Parent - az oldal betöltődik a szülőszülőkbe; A _top - az oldal be van töltve a teljes böngészőablakba. |
| típus | Megadja a hivatkozási fájlok MIME típusát, azaz fájlkiterjesztés. |
4. Példa a térképkép létrehozására
1) Helyezze el az eredeti képet a kívánt űrlap aktív területén. A területek koordinátái például a fotók feldolgozására szolgáló program segítségével számíthatók ki, Adobe Photoshop. vagy Festék..
Ábra. 1. Példa egy képmegjelölésre egy térkép létrehozásához 2) A kártya nevét a címke hozzáadásával kérjük
Jpg "alt \u003d" (! Lang: flowers_foto" width="680" height="383" usemap="#flowers">
!}
Ábra. 2. Példa egy térképkép létrehozására, amikor megnyomja az egér kurzort a virágon, átáll az oldalra leíró oldalra
Színek a táblázatban
Hogyan építsünk az asztaltáblán
Listák listákban
A definíciók listája
Számozott lista
Lista
Hogyan lehet létrehozni a listát
Három fő listája található: megjelölt, számozott és definíciós listák. A felsorolt \u200b\u200btípusok fő különbsége a számozás és a szerkezet módja.
Leggyakrabban nem mért, vagy jelzett lista. A címkelistát címkék állítják be, és a címkék közötti lista pontok - a címke használatával
Számozott lista Nagyon emlékeztet. Az egyetlen különbség az, hogy a számozott listát, mielőtt minden pontja helyett grafikus markerek, sorozatszám vagy betű automatikusan elhelyezve.
A számozott lista címkékkel van beállítva. A megjelölt listánként minden elemet a címke határozza meg
- Kulcsszószalag.
- . Címke
- Megadja egy külön elemet, azaz a meghatározott kifejezést és a címkét
- - a következő sorban megjelenő információk többi része a francia bekezdéssel. A második információvonalat hívják meghatározás. A definíciók listája ugyanúgy van megadva, mint más listák. Az egyetlen különbség az egyes elemek két címke.
A listák egyik csodálatos tulajdonsága az, hogy képesek egymásra fektetni őket. A lista listájának melléklete ugyanúgy történik, mint a könnyű létrehozás egy lista. Ehhez nincsenek különleges HTML-címkék. Hogy ne keverje össze a böngészőt, győződjön meg róla, hogy a címkével zárja be az egyes belső listát. Különböző típusú listákat is befektethet.
Játsszon a fenti listákat
A listáknak van egy hátránya - ezek egydimenziósok. Ez azt jelenti, hogy csak a következő sorokról van szó. A táblázatok lehetővé teszik, hogy ne csak vonalak, hanem oszlopok is megtalálják az adatokat.
A táblázatok beállításához számos címkét használjon. Címkék
és
Keret az egész tábla, és számos más címke meghatározza, hogyan jelenik meg az információk. A táblázat a táblázatcímkék teljes leírását mutatja.HTML-címkék táblázatok létrehozásához:
Címkék leírása
És ezek a címkék lefedik az asztalt. Címke
Tape \u003d 1 - Standard számozás (1,2,3,4,5, ...)
Tape \u003d A - tőke betűk (A, B, C, D, ...)
Tape \u003d A - sürgős levelek (A, B, C, D, ...)
Tape \u003d I - Római számok (I, II, III, IV, ...)
Tape \u003d I - kisbetűk Római számok (I, II, III, IV, ...)
A definíciók listája kissé eltér, mint más listák. A lista minden elemének leírása ebben az esetben két címkét alkalmazunk, és nem egy címke