La fel ca în HTML, introduceți o imagine grafic, fundal. Cum să inserați o imagine în HTML din computer, în centru, în tabel

Partea vizuală este una dintre cele mai importante atunci când lucrați cu site-uri. Desigur, este inferior funcționalului, dar nu trebuie aruncat. Să vorbim despre cum să instalați o imagine HTML de pe computer pe site-ul dvs. O posibilitate pentru acest lucru este furnizată sau câteva? Cum să inserați o imagine în HTML pentru ca alți oameni să o vadă? Ce este mai bine să folosiți - un computer sau un server?

Ce este HTML?

Limbajul de marcare pentru documentele hipertext - așa stau abrevierea. Cu ajutorul său, se formează coloana vertebrală a site-ului viitor, aici este elaborată amplasarea elementelor principale. Apoi, foile de stil cascadă și fișierele php responsabile pentru transferul de date sunt deja configurate. Dar în centrul oricărei pagini este HTML. Cu ajutorul lui, apropo, imaginile sunt ajustate. Puteți și în alte moduri, dar dacă aveți nevoie să asigurați încărcarea inițială a unui lucru simplu, de exemplu, un desen, atunci folosiți-l. Și acum ne întoarcem la întrebarea cum să inserați o imagine în HTML.

Utilizând eticheta img

Începem să folosim grafică. Cum introduc o imagine de fundal într-un document HTML? Și în primul rând, aceasta înseamnă inserarea unui fișier ca obiect de pagină. Pentru o astfel de adăugare, se utilizează img. Această etichetă este un element rând în care există un conținut înlocuibil. Pentru a purta doar patru părți ale limbajului de marcare hipertext. Unul este src, înălțime și lățime, acestea vor fi discutate mai târziu. Celelalte trei sunt obiect, embed (pentru a încorpora conținut media) și iframe (utilizarea flăcărilor). Eticheta funcționează ca și cum ar conține un element cu litere mici. Singura diferență este că se folosește un conținut extern extern, care este afișat. Cu toate acestea, trebuie să existe un fișier terță parte, care, de fapt, va fi încărcat. Dacă aveți o întrebare despre cum să inserați o imagine de fundal în HTML, atunci este mai bine să o renunțați. Deoarece va fi afișat numai când se execută computerul însuși, pe care se află imaginea.

Utilizând atributele src

Deci, lucrăm la întrebarea cum să inserați o imagine grafică într-un document HTML. Pentru a specifica calea către imaginea care ar trebui încărcată, utilizați src. Schema generală este următoarea: trebuie să utilizați acest atribut, semnul egal și să specificați adresa.

Odată ce browserul ajunge la etichetă atunci când analizează codul HTML, acesta creează imediat o zonă în care elementul rând va fi afișat. Este în el și va fi încărcat fișier extern. Calea nu trebuie să conțină erori, deoarece va fi programul care va funcționa pe ea. Și dacă nu găsește fișierul, se va afișa pictograma de eroare, care nu arată prea estetică. Cum să inserați o imagine în tabelul de documente HTML? Este necesar să notați tot codul necesar în celula dorită.

Configurarea imaginii pe server: înălțime și lățime în eticheta img

Deci știm cum să inserăm o imagine în HTML. O să ne dăm seama acum, cum să ne pregătim. Imediat ce fișierul începe să fie descărcat pe calculatorul utilizatorului, dimensiunea imaginii va fi determinată imediat. Și dacă parametrii inițiali nu se potrivesc cu ceea ce vrei? În acest caz, parametrii de înălțime și lățime (în pixeli) pot ajuta. În acest caz, codul va fi scris după cum urmează: mai întâi src și adresa fișierului. Apoi, un design similar specifică lățimea și ce ar trebui să fie lățimea. Și ultimul - înălțimea și înălțimea. Webmasterii fac adesea o astfel de greșeală: încarcă un fișier mare pe server, a cărui mărime este de mai multe megaocteți. Calea este prescrisă și imaginea este corectată la dimensiunea necesară. Drept urmare, utilizatorul poate vedea modul în care o imagine mică este încărcată destul de încet. Acest aspect nu este foarte atractiv din exterior.

Recomandări pentru muncă

Pentru a evita negativitatea, reduceți dimensiunea imaginii în avans. Dacă nu sunteți sigur care parametri sunt necesari pentru un aspect atractiv, creați o copie și experimentați-o. De asemenea, trebuie avut grijă să optimizați greutatea. Este necesar să se reducă greutatea fișierelor grafice fără pierderi de calitate prin transferarea lor către alte extensii sau prin utilizarea unor servicii și programe online speciale. Acest lucru va fi apreciat nu numai de către utilizatorii site-ului, ci și de către webmasterul - la urma urmei, astfel de fișiere vor fi încărcate mai repede și vor avea mai puțin spațiu pentru a ocupa gazdele.

Exemplu de capabilități de înregistrare

Să ne uităm la modul în care puteți seta calea spre imagine:

1. Un nume de fișier.

2. Specificați adresa imaginii localizată pe un computer local (server).

3. Calea detaliată a locației fișierului pe cealaltă gazdă.

Când utilizați exemplul din primul paragraf, imaginea trebuie să fie în același director ca imaginea. A doua locație este un subfolder referitor la pagina curentă. Cel de-al treilea exemplu specifică calea absolută în care poate fi găsită imaginea dorită. În acest din urmă caz, rețineți că imaginea poate fi pe orice server (dacă această utilizare nu este interzisă în fișierul .htaccess). Cu toate acestea, dacă este șters, atunci imaginea de pe site-ul dvs. va dispărea. Particularitatea HTML este că aveți nevoie doar de documentul de marcare în sine și că orice altceva poate fi încărcat de pe servere de la terțe părți. Aceste metode sunt adesea folosite pentru a crește viteza de descărcare (dar aici trebuie să știți cum să utilizați acest instrument).

Alocarea altului și a titlului la img?

Ce ar trebui să fac atunci când un fișier grafic nu este încărcat cu un document HTML din anumite motive? Dacă calea sau altceva este incorect scrisă, trebuie să utilizați atributul alt. El îndeplinește sarcina reprezentării alternative a imaginii. Să presupunem că programul nu este încărcat. Dar browserul va forma încă zona din imagine. De asemenea, este necesar în cazurile în care utilizatorul așteaptă o încărcătură și este necesar să îi arătăm că programul se pregătește să accepte programul.

Pentru a afișa textul însoțitor, utilizați atributul titlul special. De fapt, asta tooltip și îl puteți folosi pentru aproape orice element vizibil al codului HTML. Acest lucru este bun pentru că ne permite să explicăm anumite aspecte. Utilizarea celor două atribute afișate în această subtitrare arată astfel: la exemplul de mai sus, după înălțime, altul este mai întâi adăugat, urmat de titlu.

Și aceste atribute nu pot servi doar pentru a crea comoditate pentru vizitator. Acestea pot afecta pozitiv promovarea site-ului. Deci, pentru asta ar trebui să utilizați întotdeauna cuvinte cheie în ele. Va fi îmbunătățirea clasamentului resurse în clasamentul site-urilor și serviciilor de imagini ale motoarelor de căutare. Dar în tot ceea ce trebuie să fii atent și rațional.

Aliniați fotografiile

Pentru imagini și, în general, toate cele 4 elemente ale limbajului de marcare care au fost menționate anterior, a fost introdus atributul align. Cu aceasta puteți schimba locația imaginii. Implicit, este aliniat la marginea de jos. Pentru aceasta, partea de jos este responsabilă. Și cum să faci pe partea de sus? Acest lucru necesită partea de sus. În practică, va arăta astfel: după src, unde este specificată adresa imaginii, adăugați alinierea atributului și valoarea sa.

În linia în care este amplasată imaginea, va fi aliniată la marginea superioară. Cum să inserați imaginea în centru în HTML? Există încă o posibilitate de înregistrare - mijloc. Cu utilizarea sa, nimic nu se schimbă fundamental. Dacă utilizați acest cod, imaginea va fi aliniată în mijloc. De asemenea, puteți face textul să se înfășoare în jurul imaginii. Pentru a face acest lucru, se aplică atributele din dreapta și din stânga. În astfel de cazuri, imaginea devine "plutitoare". Offsetul spre stânga arată la fel ca celelalte variante de ortografie. Utilizarea dreptului va da un rezultat similar cu diferența că imaginea va fi plasată în partea dreaptă. Aplicarea acestor instrucțiuni are propriile nuanțe. Deci, o problemă semnificativă este poziția foarte apropiată a textului de imagine. Din acest motiv, se creează un efect de aderență, care este destul de neplăcut pentru ochi. Dar puteți rezolva această problemă cu o foaie de stil cascadă sau un cod HTML. Utilizați atributele vspace și hspace pentru astfel de modificări. Prima setează indentarea de jos și de sus, iar cea de-a doua este la dreapta și la stânga.

Realizarea fundalului

Cum să inserați o imagine în pagina HTML a site-ului? Atributul de fundal este foarte util pentru atingerea acestui obiectiv. Este parte a elementului corpului. Scopul său - pentru a arăta calea către fișierul de imagine, care ar trebui să umple pagina, o masă sau o singură celulă. În practică, utilizarea este după cum urmează: Adresa imaginii, registre au un parametru de valoare bodybackground. Imaginea de fundal este setată astfel încât repetat de-a lungul axelor ordonate și abscise, pornind de la colțul din stânga sus. Anteriorul doc aici cu următoarele. Dacă există dorința de a umple ceva cu o singură culoare și de a nu utiliza o imagine, puteți utiliza această scurtă descriere: numărul gamma este indicat ca o caracteristică pentru parametrul bgcolor al corpului. Au existat mici schimbări. După cum puteți vedea, atributul bgcolor este deja utilizat. Pentru aceasta, trebuie să specificați doar culoarea pe care o va completa pagina sau partea acesteia. Iată cum a insera o imagine în HTML cu un computer pentru a face fundalul și schimba culoarea. În general, pentru a stăpâni pe deplin codul HTML, este suficient să-i dați o săptămână de timp, și asta e suficient cu o răzbunare.

concluzie

HTML, deși nu poate pretinde un limbaj de programare deplină, este totuși extrem de valoros atunci când creează un site web. El este adevăratul schelet. Și putem spune cu încredere că acum știți cum să lucrați cu imagini de fundal și staționare și să le atașați de asemenea. Prin urmare, răspunsul la întrebarea cum să inserați o imagine în HTML ar trebui să fie clar.