.

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:

1. táblázat: Tag attribútumok

Tulajdonság	Leírás
Alt.	Az Alt attribútum alternatív szöveget ad a képhez. Ez jelenik meg a helyszínen megjelenése betöltés előtt, vagy ha a grafikon van kapcsolva, és akkor is megjelenik egy pop-up tip, ha lebeg a kurzort a kép. Szintaxis: alt \u003d "(! Lang: Kép leírása" . !}
Crossarigin.	A Crossorigin tulajdonság lehetővé teszi, hogy képeket feltölteni a többi tartomány erőforrásai CORS lekérdezések. 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 szerver nem ad a hitelesítő adatokat a kiszolgáló, ahonnan a tartalmat kérik, akkor a képet a sérült és annak használata 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 Ez egy leszármazott elem A tényleges href attribútummal. 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). JPEG képek Ideális 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 alapján png formátum. 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. Színmélység B. ez a formátum Talán 1, 2, 4, 8, 16, 24, 32, 48 bit pixelenként.

ICO formátum (Windows ikon). Fájltároló ikonok Microsoft Windows.. 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 elérhető a név attribútumban, amely meghatározza a kártya 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.

2. táblázat: Tag attribútumok

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 nevet 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: Alternatív - hivatkozás a dokumentum alternatív változatára (például, nyomtatási űrlap Oldalak, fordítás vagy tükör). 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 webdokumentumról. 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 - tiltja keresőmotor Menjen az oldalon található linkekre vagy egy adott linkre. Noreferrer - Azt jelzi, hogy a böngésző a linket ne küldjön a HTTP kérés fejlécében (hivatkozó), amely rögzíti a látogató, amelyből oldalt. 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 - jelzi kulcsszó Az aktuális dokumentumhoz.
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. A kártya létrehozásához egy példa

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

A legtöbb weboldal ütemezett. Lehetővé teszi a színt és egyértelműen bemutathatja az információkat. Sok esetben jobb képet mutatni, mint egy hosszú szöveges leírás megadása.

Kétféleképpen helyezhetjük el a képoldalakat az oldalon:

• egyedi képek behelyezése;
• a háttér feltöltése képzel.

Mindenesetre a grafikus kép a fájlból származik.

Ábrázolja a grafikus képeket

A grafikus formátumú fájl grafikus oldalán lévő beillesztése címkével történik (angolul, kép - kép), a fájl címét az SRC attribútum érveként:

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

A grafikus fájl címe egy Etolybo URL, vagy a fájlnév, amely feltünteti az utat. Például egy grafikus fájl megjelenítéséhez lOGOTIP.jpg kell írni címke:

< IMG SRC = "logotip.jpg" >

A grafikus kép átvitelének sebességének növelése a címkében Használhatja az attribútumot ( további paraméter) LowSRC, amely a grafikus fájl címét érvként veszi igénybe. Két grafikus fájlt hozhat létre: egy (például a lOGOTIP.jpg) egy nagy felbontású képet tartalmaz, a másik (például a logotip.gif) egy alacsony felbontású kép. Ezután címke:

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

... Ez preize a böngésző, és töltse le a logotip.gif fájlt, majd ahogy megkapja helyette a logotip.jpg fájlt.

A grafika letöltésének felgyorsításának másik módja az, hogy meghatározza a négyszögletes terület méretét, amelyben a grafikus képet attribútumokkal kell elhelyezni Szélesség. (szélesség) és Magasság (Magasság) pixelben mérve. Ha megadja ezeket az attribútumokat, a böngésző először kiemeli az ütemterv alatt lévő helyet, előkészíti a dokumentum elrendezését, megjeleníti a szöveget, és csak akkor töltse be az ütemtervet. Ne feledje, hogy a böngésző tömöríti vagy kinyújtja a képet, beágyazva a keretbe meghatározott méret. Példa a képméret jelzésére:

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

A grafikákat általában a szöveggel használják, így a szövegbeállítás feladat és grafikus kép következik be. Ezt a feladatot az attribútum segítségével oldják meg Igazítsa. Címke. Különböző érvek használatával. Például a szöveg jobbra vagy balra fekszik. Általában a kép szorosan beágyazódik a szöveggel, amely csúnya lehet. Ennek elkerülése érdekében üres mezőket állíthat be az illusztráció körül. A mezőket attribútumok segítségével hozták létre VSRAS Felső és alsó mezőkre és Nspace. A címke oldalsó mezőkhöz . Ezeknek az attribútumoknak az argumentumai olyan számok formájában vannak feltüntetve, amelyek meghatározzák a pixelek mezők méretét. A grafika körüli áramlás megszakításához a szöveg címkét szolgál fel
.

A következő címke beállítja a grafika áramlását a logotip.jpg fájlról jobbra (a kép a szöveg marad):

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

Ha meg szeretné keresni a képet a szöveg jobb oldalán, akkor szüksége van egy attribútumra Igazítsa. Rendeljen hozzárendel Jobb:

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

A képek körüli mezők beállítása, meg kell írnia az űrlap címkéjét:

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

Itt a 20. és 10-es számok meghatározzák a mezők méretét.

Tekintsünk egy példát a grafika és a szövegek megosztására. Nyissa meg a Notepad (Text Editor Notepad) ablakokat. Írja be az IT HTML kódot a fent tárgyalt címkék segítségével. Az alábbiakban egy olyan program, amely néhány szöveget és grafikát jelenít meg. Grafikus fájlként használhatja a rendelkezésre álló fájlokat. Itt használják logotip.gif.

< HTML >

< HEAD >

< TITLE > 1. Feladat< / TITLE >

< / HEAD >

< BODY BGCOLOR = "YELLOW" >

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

< H1 > A szöveg jobbra irányítja a menetrendet< / H1 >

Ábra. 657.. A szöveg erősíti a jobb oldali képet

A képek pontos pozicionálásának széles lehetősége (valamint más elemek) az oldalon asztalok és stílusok. Ezeket a HTML elemeket később tárgyaljuk. Például lejátszhat egy táblázatot látható képkockák nélkül, és a táblázat sejtjeiben képek, szövegek és egyéb elemek.

Több száz grafikus formátum van, de csak néhányat támogatnak a webböngészők. Ebben a cikkben leírjuk a webes tervezők számára rendelkezésre álló fájlok különböző grafikus formátumait, és fordítottan, ezeket kell használni.

A legtöbb népszerű böngésző által támogatott fájlok grafikus formátuma: Grafikus Interchange formátum (GIF), Közös fotográfiai szakértői csoport (JPEG), hordozható hálózati grafika (PNG) és vektoros grafika. A grafikus fájlok bizonyos tulajdonságai:

• Átlátszóság - Ez a tulajdonság lehetővé teszi, hogy a kép különböző mértékű átlátszóságú, szilárd állapotból teljesen átlátható legyen.
• Compression olyan tulajdonság, amely lehetővé teszi, hogy a képet tárolni sokkal kisebb fájlt, matematikai algoritmusok feldolgozására pixelcsoport egyetlen elemként.
• Weave - Lehetővé teszi a kép betöltését először páratlan vonalakkal, majd még. Ez lehetővé teszi a látogató számára, hogy többet láthasson.
• Animáció - a mozgás láthatóságát az egymást követő pillanatfelvételek sorozatával hozza létre. Animált GIF esetén a böngészőben lévő plugin nem szükséges, és szinte minden eszközön dolgozik.
• Progresszív betöltés hasonló átszövi az a tény, hogy betölti csak egy része a kép kezdetben, de nem a váltakozó sorok.

A GIF-t 1980-ban alapították, és az 1990-es évek elején a webes tervezők elfogadták, mint a weboldalak fő grafikus formátumát. A GIF fájlok a tömörítési algoritmust használják, amely a gyors letöltéshez kicsi méretét teszi lehetővé. A GIF 256 színre korlátozódik (8 bit), támogatja az átláthatóságot és a firmware-t. Az animált grafika létrehozása is lehetséges ez a formátum alkalmazásával. Minden böngésző problémamentesen megjelenítheti GIF fájlokat.

GIF előnyei:

• A legszélesebb körben támogatott grafikus formátum
• A rendszerek jobban néznek ki ebben a formátumban
• Támogatás az átláthatóság

Fájlok tömörítve, de támogatja a „valódi színek” (24 bit), és a kívánt formátumot fotókat, ahol a minőség nagyon fontos kérdés. A JPEG támogatja a progresszív formátumot, amely lehetővé teszi, hogy szinte azonnal megjelenjen egy olyan kép, amely javítja a minőséget, amikor a letöltés véget ér.

Ellentétben GIF fájlok, webes tervezők vezérelheti JPEG fájlokat, amely lehetővé teszi, hogy különböző szintű képminőség és fájlméret.

JPEG Előnyök:

• A nagy tömörítés gyorsabb letöltési sebességet jelent.
• Kiváló minőségű fényképeket és összetett rajzokat készít.
• Támogatja a 24 bites színt.

A PNG viszonylag új formátum, amelyet a GIF fájlok alternatívájaként adtak meg. A PNG akár 24 bites színt, átláthatóságot, interlacingot támogat, és tartalmazhat egy rövid szöveges leírását a keresőmotorokban.

A PNG előnyei:

• Legyőzi a korlátozások 8-bites színét GIF-ben
• Lehetővé teszi a képek szöveges leírását a keresőmotorokhoz
• Támogatja az átláthatóságot
• A rendszerek jobban néznek ki, mint a jpeg

Vektoros grafika

A legtöbb webes grafika van raszteres kép Vagy olyan mintázat, amely a színes képpontok rácsából áll. Illusztrációk kell létrehozni egy vektorgrafikus, amely egy matematikai leírást minden egyes elem teszi ki vonalak és a kép színei. A vektoros grafikát olyan programok vonzza, mint az Adobe Illustrator vagy a CorelDraw. A vektoros grafikát bármely GIF, JPEG vagy PNG formátumra kell átalakítani a weboldalakon.

Milyen formátumot kell használni?

A webes tervező a legtöbb alkalmazáshoz választhat GIF-t vagy JPEG formátumot. De mivel a GIF fájlok mérete általában kicsi a mérethez képest jpeg fájlA legtöbb webes tervező fogja használni gIF formátum A háttér, dobozok, keretek és bármely más grafikai elemek, amelyek tökéletesen használnak egy 8 bites színt.

A legtöbb tervező választja jPEG formátum Fényképek és illusztrációk esetén, ahol a tömörítés nem veszélyezteti a vizuális képminőséget.

Mint említettük, a HTML ma a World Wide Web weboldalának megírásához képezi. A CSS használatakor a HTML nyelvű kódok radikálisan változnak. Búcsút mondhatsz az ügyetlen felújítására Html tagov csak egy vagy másik elérése vizuális effektek. Néhány HTML-címkén vagy attribútumokon, például például egy elavult címke ...

a fő

Rendelje meg a webhelyet és foglalkozzon az üzleti tevékenységgel!

Ez a kifejezés hallható és láthat sok webhelyen, és ez nem hiábavaló!

Weboldal — Ez a vállalat arca. És ez a legmodernebb és hatékony kommunikációs csatorna potenciális fogyasztóval. Csak az internetes oldal képességei lehetővé teszik, hogy teljes mértékben kihasználhassák az információs üzenetet a felhasználónak. A szöveg, a hang- és videoinformációk egy webhelyen belül benyújthatók, hogy megismerhessék a fogyasztókat.

Keresztül szoftver A helyszínen lehet fogni kifizetések beszélni a telefonon, adatbázis, faxok küldésére és fogadására, csere SMS, és sok más intézkedéseket. A modern internetes oldal egy információs központ nemcsak bármely cég, hanem bármely internet-felhasználó is.

És ez egy win-win eljárás hatékony és ugyanakkor egyszerű és vizuális jelentések eszméiket vagy fejlemények a legszélesebb közönséget. És ma a HTML Hypertext Markup nyelven írt webes dokumentumok továbbra is továbbra is a webes környezetben az adatok bemutatásának fő formája.

A HTML legfontosabb előnyei:

• Könnyű, lehetővé téve, hogy a HTML-t a legrövidebb időre tanulja.
• Képes létrehozni saját weboldalait
• És a HTML teljesen ugyanolyan működik minden meglévő platformon ma, további felszerelés vásárlása nem szükséges. És elegendő bármilyen rendelkezésre szöveg szerkesztőpéldául jegyzettömb.

Ezen a honlapon, megpróbáltam részletesen leírják az egész folyamatot a weboldal készítés saját honlapján, azaz kiadói kész projekt az interneten annak érdekében, hogy hozzáférést biztosít minden felhasználó számára.

Remélem, hogy sok cikkem nagyon hasznos lesz, mert nem vagyok programozó magam, de ez a munka nagyon inspirált.