In questo articolo ti parlerò di tag HTML molto importanti per inserire immagini e grafica in una pagina, perché senza questo è difficile creare un sito bello e buono.
Le immagini renderanno il tuo sito unico e si distingueranno dalla massa. Tuttavia, ricorda che l'uso eccessivo della grafica su un sito Web può essere un fattore negativo.
Non premiare la pagina html con immagini, la pagina dovrebbe essere leggera e non spaventare i visitatori. Il visitatore deve sempre assimilare le informazioni principali e non lasciarsi distrarre, inserire immagini in HTML solo dove necessario.
Nella pagina Attributi del tag BODY ho già detto che le immagini possono essere lo sfondo di una pagina html, e ora vi dirò come queste stesse immagini possono essere utilizzate ad un livello superiore rispetto allo sfondo.
E quindi, per inserire un'immagine in una pagina HTML, è necessario il tag che ha l'attributo SRC più importante. Questo attributo è necessario per indicare l'indirizzo all'immagine. Diciamo che devi mettere l'immagine image.jpg da qualche parte nella pagina html e la nostra immagine sarà nella stessa cartella (directory)) con la pagina, quindi devi scrivere il seguente codice html:
Se l'immagine e la pagina html si trovano in cartelle o directory diverse, è necessario scrivere il percorso dell'immagine relativo alla pagina. Ad esempio la nostra pagina html si trova nella cartella o directory news, la sottodirectory pop (cartella) si trova nella stessa directory o cartella, in cui si trova il nostro image.jpg, quindi per inserirlo è necessario scrivere così:
Oltre all'attributo src del tag ci sono un altro paio di attributi facoltativi ma importanti:
- larghezza - larghezza dell'immagine (è possibile specificare pixel o percentuali);
- altezza - altezza dell'immagine (è possibile specificare pixel o percentuali).
Se non specifichi questi attributi, il browser caricherà le dimensioni effettive dell'immagine. Tuttavia, non dovresti esagerare con i valori di questi attributi, perché un aumento della lunghezza o della larghezza di un'immagine può distorcerlo, il che lo rovinerà, ad esempio una fotografia di una persona, dove le proporzioni di un cambiamento di persona.
Come ho già scritto, la dimensione dell'immagine può essere specificata sia in pixel che in percentuale. Ti faccio solo un esempio:
un altro esempio di codice html:
Ci sono momenti in cui la possibilità di visualizzare la grafica, comprese le immagini, è disabilitata nel browser, e affinché la tua pagina non perda il suo significato, viene utilizzato l'attributo alt, in cui scriviamo testo alternativo se l'immagine non è stata caricata sul pagina. codice html per esempio:
- a sinistra: l'immagine si troverà a sinistra e il testo accanto ad essa sarà a destra;
- a destra: l'immagine si troverà a destra e il testo accanto sarà a sinistra.
Ecco il codice HTML:
Testo, accanto all'immagine.
e il browser visualizzerà quanto segue:
Testo, accanto all'immagine.
Codice HTML per il valore corretto:
Testo, accanto all'immagine.
nella pagina html sarà così:
Testo accanto all'immagine.
Per evitare che il testo scorra intorno all'immagine, puoi utilizzare il tag BR menzionato in precedenza nella pagina Formattazione del testo in HTML. A proposito, il tag BR ha un attributo chiaro, con i suoi valori:
- sinistra - non avvolgere il testo, che sarà allineato a sinistra;
- a destra - non avvolgere il testo, che sarà allineato a destra;
- all - non avvolgere il testo, che sarà allineato ai bordi sinistro e destro.
Senza l'attributo align, il testo va a capo per impostazione predefinita a destra dell'immagine e quasi a filo. Se vuoi che il testo non vada a capo dell'immagine, puoi utilizzare i seguenti attributi:
- vspace - rende i margini superiore e inferiore in pixel;
- hspace - crea i margini laterali (sinistro e destro) in pixel.
Darò un semplice codice html ad esempio:
Ecco una foto così bella.
Prova a vedere cosa risulterà secondo questo esempio.
Puoi anche creare un bordo attorno all'immagine utilizzando l'attributo border e specificarne le dimensioni in pixel. Più alto è il valore, più grande è la cornice intorno all'immagine. Il codice HTML sarà così:
nella pagina html sarà simile a questo:
Ho scritto i tag HTML di base necessari per inserire immagini in una pagina html. Successivamente, ti mostrerò come creare collegamenti in HTML e come trasformare un'immagine in un collegamento.
Data di pubblicazione: 15 maggio 2012La maggior parte delle pagine Web contiene elementi grafici. Ti consente di presentare le informazioni in modo colorato e chiaro. In molti casi, è meglio mostrare un'immagine piuttosto che dare una lunga descrizione testuale.
Esistono due modi per posizionare la grafica in una pagina:
- inserimento di singole immagini;
- riempiendo lo sfondo con un'immagine.
In ogni caso la grafica è presa dal file.
Un'immagine grafica da un file in formato grafico viene inserita nella pagina utilizzando il tag
(dall'inglese, image - image) specificando l'indirizzo del file come argomento dell'attributo SRC:
L'indirizzo del file immagine è un URL o un nome file, possibilmente con un percorso. Ad esempio, per visualizzare il file grafico logotip.jpg, scrivi il tag
Per aumentare il bit rate di un'immagine grafica in un tag
è possibile utilizzare l'attributo (opzionale) LOWSRC, che prende come argomento l'indirizzo di un file grafico. È possibile creare due file grafici: uno (ad esempio, logotip.jpg) contiene un'immagine ad alta risoluzione e un altro (ad esempio logotip.gif) contiene un'immagine a bassa risoluzione. Poi il tag
Indica al browser di scaricare prima il file logotip.gif, quindi di sostituirlo con il file logotip.jpg non appena ricevuto.
Un altro modo per velocizzare il caricamento della grafica è dimensionare l'area rettangolare in cui verrà posizionata la grafica utilizzando gli attributi WIDTH (larghezza) e HEIGHT (altezza), misurati in pixel. Se si specificano questi attributi, il browser prima allocherà lo spazio per la grafica, preparerà il layout del documento, visualizzerà il testo e solo dopo caricherà la grafica. Si noti che il browser riduce o allunga l'immagine per adattarla ai frame della dimensione specificata. Un esempio per specificare la dimensione di un'immagine:
La grafica viene solitamente utilizzata insieme al testo, quindi sorge il compito di allineare testo e grafica. Questo compito viene eseguito utilizzando l'attributo ALLINEARE etichetta
utilizzando vari argomenti. Ad esempio, potremmo volere che il testo scorra intorno all'immagine a destra oa sinistra. Di solito l'immagine è incorporata vicino al testo, il che può essere brutto. Per evitare ciò, puoi impostare margini vuoti attorno all'illustrazione. I campi vengono creati utilizzando gli attributi VSPACE per i margini superiore e inferiore e SPAZIO per i margini laterali nel tag
... Gli argomenti per questi attributi sono specificati come numeri che specificano la dimensione dei margini in pixel. Per annullare il flusso di testo intorno alla grafica, usa il tag
.
Il tag seguente imposta il flusso della grafica dal file logotip.jpg a destra (l'immagine sarà a sinistra del testo):
Se vuoi posizionare l'immagine a destra del testo, allora hai bisogno dell'attributo ALLINEARE assegna un argomento GIUSTO:
Per impostare i campi intorno all'immagine, devi scrivere un tag come questo:
Qui i numeri 20 e 10 determinano le dimensioni dei campi.
Consideriamo un esempio di condivisione di grafica e testi. Apri Blocco note (editor di testo Blocco note) Windows. Scrivi il codice HTML in esso utilizzando i tag discussi sopra. Di seguito è riportato un programma che emette del testo e della grafica. Qualsiasi file in tuo possesso può essere utilizzato come file grafico. Questo utilizza il file logotip.gif.
<Н1>Il testo si avvolge intorno alla grafica a destra
Questo è un esempio di combinazione di testo e grafica.
Il testo del programma HTML può essere scritto in qualsiasi editor di testo. Questo utilizza tag di markup di testo.
Questo testo viene visualizzato con un nuovo paragrafo. Per fare ciò, abbiamo utilizzato un tag speciale.
Prova a ridimensionare la finestra del browser. Notare come cambia il layout del testo.
Riso. 657. Il testo si avvolge intorno all'immagine a destra
Ampie opportunità per il posizionamento preciso delle immagini (così come di altri elementi) sulla pagina forniscono tavoli e stili... Questi elementi HTML verranno discussi in seguito. Ad esempio, puoi definire una tabella senza cornici visibili e inserire immagini, testi e altri elementi nelle celle di questa tabella.
Speriamo che questo articolo ti sia utile. Buona lettura!
Le immagini ci fanno immediatamente sapere quanto può essere interessante per noi un determinato sito o articolo, creano uno stato d'animo e possono rivelare un argomento in un modo nuovo. A volte una foto vale più di mille parole.
Ma non dovresti aggiungerli troppo spesso, se non sei Instagram o un negozio online. È auspicabile che le immagini:
- erano informativi
- abbinato alla combinazione di colori del tuo sito
- erano appropriati
Se non hai una foto adatta, puoi usare il cosiddetto fotostock (banca di foto) - un luogo in cui sono archiviate molte fotografie, illustrazioni e grafica vettoriale. Esistono molte di queste risorse, potresti anche aver sentito parlare di una delle più grandi: Shutterstock, ma ci sono download a pagamento.
Per chi non ama pagare in eccesso, alla fine dell'articolo abbiamo preparato bonus- un elenco di diverse banche di foto in cui è possibile scaricare gratuitamente un'enorme quantità di bellissimi materiali di alta qualità 🙂
Formati immagine
Il World Wide Web utilizza principalmente 3 tipi di immagini:
gif(Formato di interscambio grafico - formato di scambio di immagini)
è il primo formato ad essere utilizzato su Internet. I vantaggi di questo formato sono la presenza animazioni e di piccole dimensioni, la pagina si carica rapidamente. Inoltre, supporta la trasparenza. Svantaggio - usato solo 256 colori(in realtà perché la dimensione è piccola), ad es. non può essere utilizzato per immagini a colori.
jpeg lui è jpg(Gruppo congiunto di esperti fotografici - Gruppo congiunto di esperti fotografici - questo è il nome dell'organizzazione degli sviluppatori)
adatto per creare immagini a colori di alta qualità, fotografie... La dimensione di tali immagini è grande, quindi di solito caricano pesantemente il server. Se hai bisogno di comprimere jpeg (per un peso dell'immagine inferiore), ti consigliamo di prendere la dimensione dell'immagine finale multiplo di otto , quindi la perdita di qualità sarà minima.
png(Grafica di rete portatile - Grafica di rete portatile... Pronunciato come ping, ad es. )
questo formato è stato originariamente sviluppato per il web, ad es. l'immagine è solitamente leggera e non rallenta la pagina durante il caricamento. Questo formato è stato creato per sostituire la gif obsoleta, ma a differenza di essa, non supporta l'animazione. PNG-8 come gif usa solo 256 colori. Formato png-24 supporta 16 milioni di colori, anche se il peso è già piuttosto grande. Png-32 contiene lo stesso numero di colori di png-24 e inoltre ti permette di ottenere un'immagine con sfondo trasparente e puoi regolare il grado di trasparenza. Quando si riduce la dimensione del png, non si verifica alcuna perdita di qualità del colore.
Riassumiamo
gif- per l'animazione
jpeg- per le foto
png- per icone, pulsanti, sfondi, loghi, screenshot, disegni, testi, foto con sfondo trasparente
Inserisci l'immagine nel file html
Per aggiungere un'immagine alla pagina, usa etichetta
(dall'immagine inglese - un'immagine, un'immagine). Questo è un singolo tag, non ha bisogno di un tag di chiusura. Questo tag contiene attributi.
Attributo src(dalla fonte inglese - fonte) indica il percorso del file (il luogo in cui si trova l'immagine). Se l'immagine è sul tuo computer (per ora il sito è solo in fase di sviluppo) o sul tuo server, usa un link relativo. Se l'immagine proviene dal Web, è necessario un collegamento assoluto. Leggi come farlo nell'articolo "Link".
Quindi, per collegare un'immagine alla tua pagina web, devi scrivere un codice come questo:
Attributo alternativo(dall'inglese alternative - alternative) indica il testo che l'utente vedrà se l'immagine non è caricata. Il percorso è indicato in modo errato, l'immagine è stata eliminata, Internet è pessimo: possono esserci molte ragioni ed è auspicabile che la persona capisca cosa si cela dietro questa odiata icona.
I motori di ricerca prestano molta attenzione a garantire che questo attributo sia popolato. E il validatore html (una risorsa per verificare la correttezza del codice) percepirà l'assenza dell'attributo alt come un errore. Se tutti gli attributi
Nell'esempio seguente, abbiamo deliberatamente specificato un percorso dell'immagine inesistente in modo da poter vedere come funziona l'attributo alt.
Altezza e larghezza delle immagini
Puoi anche impostare l'altezza e la larghezza dell'immagine, se l'immagine originale è ad es. più del necessario.
In HTML5 si consiglia di farlo con CSS o attributo di stile
, come questo:
In questo esempio, abbiamo preso il 30% della larghezza, ma non l'immagine originale, ma la dimensione della finestra del browser. Quando larghezza = 100%, l'immagine si apre all'intera larghezza del browser. Ricorda questa caratteristica per cento come unità di misura.
A proposito, se scrivessimo solo la larghezza, il risultato sarebbe lo stesso, prova:
< img src = "https: //site/tutorials/wp-content/uploads/2016/07/panda.jpg" alt = "panda su un albero" stile = "larghezza: 30%;" > |
Inoltre, la larghezza e l'altezza possono essere impostate in pixel. Nel caso del nostro panda, che ha le dimensioni originali di 1196 x 796 pixel, in modo che l'animale non soffra durante la compressione, dobbiamo mantenere le proporzioni, ma qui non puoi fare a meno di una calcolatrice. Diciamo che vogliamo ridurre la dimensione dell'immagine di 3 volte, quindi dobbiamo registrare le dimensioni di 399 x 265 pixel.
Si prega di notare che se ingrandiamo l'immagine in modo proporzionale, è sufficiente specificare un solo parametro, ad esempio. larghezza. Il browser intelligente calcolerà la dimensione completa dell'immagine stessa.
Prova a eseguire il codice in questo modo e guarda il risultato:
< img src = "https: //site/tutorials/wp-content/uploads/2016/07/panda.jpg" alt = "panda su un albero" stile = "larghezza: 399 px;" > |
Imposta sempre le dimensioni dell'immagine. Le immagini di solito richiedono più tempo per il caricamento rispetto al resto del codice html. Se il browser sa quanto spazio riservare alle immagini, può continuare a caricare il sito senza attendere il caricamento delle immagini.
Un po' di naftalina
Se ti capita di curiosare nel codice di un sito creato in HTML-4 o anche prima, noterai che le dimensioni delle immagini sono impostate utilizzando speciali attributi di larghezza e altezza... Questo è un metodo deprecato, sebbene ancora valido in HTML5. Tuttavia, ti consigliamo di usare lo stile, perché gli attributi di larghezza e altezza possono essere influenzati da stili interni o esterni che rimarranno nel browser o nel file CSS. Ci soffermeremo su questo in modo più dettagliato quando esamineremo i CSS, ma per ora vediamo solo un esempio di come gli stili influenzano gli attributi di altezza e larghezza.
Ci sono 3 schede in questa finestra: sulla prima vedi il codice html, sulla seconda il codice CSS e sull'ultima vedi il risultato come sempre. Funziona come se la prima scheda fosse il file index.html, la seconda fosse il file style.css e la terza fosse il browser. Quindi, ora nel nostro CSS è scritto che tutti gli elementi con il tag img hanno una larghezza del 100%. Le dimensioni predefinite degli attributi di larghezza e altezza sono in pixel, quindi non è necessario aggiungere alcuna unità qui.
La differenza nel risultato è evidente 🙂
Inoltre, le versioni precedenti di html utilizzavano i seguenti attributi:
allineare con cui allineare l'immagine orizzontalmente o verticalmente.
hspazio- rientro a sinistra e a destra dell'immagine rispetto al contenuto circostante (es. testo o immagine adiacente)
vspazio- rientro dall'alto e dal basso dall'immagine al contenuto intorno.
frontiera- imposta lo spessore della cornice attorno all'immagine (di default è uguale a zero)
Ora tutte queste manipolazioni (e molto altro) vengono eseguite utilizzando i CSS, quindi abbiamo deciso di non disturbarti con questo qui. Se sei ancora interessato a come lavorare con questi attributi, scrivi nei commenti, aggiungeremo questo elemento 🙂
Inserimento di un'immagine nel codice
Da dove mettiamo il nostro tag dipende da come verrà visualizzato nel browser.
Esempio n. 1 - prima del paragrafo:
Elementi come
E
fare riferimento a elementi di blocco
... Iniziano sempre su una nuova riga e occupano l'intera larghezza disponibile della finestra del browser. Se sei al primo posto ![]()
, e dopo di esso un elemento di blocco, ad esempio un paragrafo, verrà spostato alla riga successiva.
Esempio numero 2 - all'inizio del paragrafo
è un elemento in linea, è posizionato all'interno di un elemento di blocco e non inizia una nuova riga. Nell'esempio sopra, il testo si avvolge intorno all'immagine, poiché il codice
registrato all'interno
Didascalie delle illustrazioni
Per taggare o firmare una foto sulla pagina, usa etichetta
Etichetta
Tieni presente che per impostazione predefinita il browser ha alcune impostazioni di stile per il tag
Quindi, io e te abbiamo imparato
- aggiungi immagine alla pagina: con etichetta
- appreso gli attributi richiesti per questo tag: src per indicare il percorso e alt per descrivere l'immagine
- capito quale formato è meglio per cosa usare: jpeg per le foto, png per loghi e screenshot, gif per l'animazione
- il modo migliore per impostare la dimensione dell'immagine: usando attributo di stile con parametri larghezza e altezza
- capito come verrà visualizzata l'immagine a seconda della posizione nel codice: separatamente, se davanti a un elemento di blocco e con wrapping, se all'interno di un elemento di blocco (ad esempio
)
E per avere qualcosa con cui lavorare, dobbiamo ottenere queste immagini da qualche parte, senza violare il copyright di nessuno.
Quindi è il momento per un bonus 🙂
Elenco dei photobank gratuiti
Prima di iniziare, tieni presente che ogni screenshot qui è un collegamento a un sito. Come creare immagini come collegamenti, leggi l'articolo "Link".
Su pixabay trovi 680 mila immagini gratuite su qualsiasi argomento, che sono distribuite sotto licenza Creative Commons CCO (CC Zero), es. possono essere utilizzati, distribuiti, modificati per qualsiasi scopo, anche commerciale.
La banca di foto contiene 390 mila foto e immagini gratuite. È più difficile trovare un'immagine interessante qui, ma ci sono anche esemplari abbastanza buoni. La pubblicità di photobank a pagamento è piuttosto fastidiosa. Mettiamo questa risorsa al secondo posto per numero di immagini, ma per cordialità sarà probabilmente all'ultimo posto nella nostra classifica.
Lo stock fotografico conta oltre 250mila foto gratuite, per lo più di alta qualità. Puoi scaricare anche senza registrazione. Disponibile solo in inglese.
Molte foto eleganti concesse in licenza con CC Zero. Puoi scaricare senza registrazione. Questa banca di foto ti capisce anche solo in inglese.
Il sito è stato creato da un web designer indiano che capisce quanto possa essere difficile trovare una foto di qualità. Tutte le foto sono state scattate personalmente da lui e puoi farci qualsiasi cosa. Gli piace fotografare cibo, scrivania, computer e ogni genere di cose. Cerca - solo in inglese.
Immagini HTML vengono aggiunti alle pagine web utilizzando un tag ... L'uso della grafica rende le pagine web visivamente più accattivanti. Le immagini aiutano a trasmettere meglio l'essenza e il contenuto di un documento web.
Utilizzo di tag HTML
Inserimento di immagini in un documento HTML
1. Etichetta ![]()
Elemento rappresenta un'immagine e il suo contenuto di riserva, che viene aggiunto utilizzando l'attributo alt. Poiché l'elemento
è in linea, si consiglia di posizionarlo all'interno di un elemento di blocco, ad esempio,
o
Etichetta ha l'attributo src richiesto, il cui valore è il percorso assoluto o relativo all'immagine:
Per tag sono disponibili i seguenti attributi:
| Attributo | Descrizione, valore accettato |
|---|---|
| alt | L'attributo alt aggiunge un testo alternativo per l'immagine. Viene visualizzato nel punto in cui l'immagine appare prima di essere caricata o quando la grafica è disabilitata e viene anche visualizzato come suggerimento quando si passa il cursore del mouse sull'immagine. Sintassi: alt = "(! LANG: descrizione immagine" . !} |
| origine incrociata | L'attributo crossorigin consente di caricare immagini da risorse su un dominio diverso utilizzando le richieste CORS. Le immagini caricate sulla tela utilizzando le richieste CORS possono essere riutilizzate. Valori ammessi: anonimo: la richiesta tra le origini viene effettuata utilizzando un'intestazione HTTP e non vengono passate credenziali. Se il server non fornisce le credenziali al server da cui viene richiesto il contenuto, l'immagine sarà danneggiata e il suo utilizzo sarà limitato. use-credentials: la richiesta tra le origini viene effettuata con le credenziali passate. Sintassi: crossorigin = "anonimo". |
| altezza | L'attributo height specifica l'altezza dell'immagine. Può essere specificato in px o%. Sintassi: altezza: 300 px. |
| ismap | L'attributo ismap indica che l'immagine fa parte di un'immagine-mappa ospitata dal server (l'immagine-mappa è un'immagine con aree cliccabili). Quando fai clic sull'immagine della mappa, le coordinate vengono inviate al server come stringa di query URL. L'attributo ismap è consentito solo se l'elemento Sintassi: ismap. |
| longdesc | L'URL per una descrizione estesa dell'immagine, oltre all'attributo alt. Sintassi: longdesc = "http://www.example.com/description.txt". |
| src | L'attributo src specifica il percorso dell'immagine. Sintassi: src = "fiore.jpg". |
| taglie | Imposta la dimensione dell'immagine in base ai parametri di visualizzazione. Funziona solo quando viene specificato l'attributo srcset. Il valore dell'attributo è una o più stringhe separate da virgole. |
| srcset | Crea un elenco di sorgenti di immagini da selezionare in base alla risoluzione dello schermo. Può essere usato insieme o al posto dell'attributo src. Il valore dell'attributo è una o più stringhe, separate da virgole. 
|
| mappa d'uso | L'attributo usemap specifica l'immagine come mappa immagine. Il valore deve iniziare con un carattere #. Il valore è associato al valore dell'attributo name o id del tag |
| larghezza | L'attributo width imposta la larghezza dell'immagine. Può essere specificato in px o%. Sintassi: larghezza: 100%. |
1.1. Indirizzo immagine
L'indirizzo dell'immagine può essere specificato per intero (URL assoluto), ad esempio:
URL (http://anysite.ru/images/anyphoto.png)
O tramite un percorso relativo da documento o root directory posto:
url (../images/anyphoto.png) - percorso relativo dal documento,
url (/images/anyphoto.png) è il percorso relativo dalla directory principale.
Questo è interpretato come segue:
../ - significa salire di un livello, alla directory principale,
immagini / - vai alla cartella con le immagini,
anyphoto.png - Punta a un file immagine.
1.2. Dimensioni dell'immagine
Senza impostare le dimensioni dell'immagine, il disegno viene visualizzato sulla pagina in dimensioni reali. È possibile modificare le dimensioni dell'immagine utilizzando gli attributi di larghezza e altezza. Se viene impostato solo uno degli attributi, il secondo verrà calcolato automaticamente per mantenere le proporzioni dell'immagine.
1.3. Formati di file grafici
Formato JPEG (Gruppo congiunto di esperti fotografici)... Le immagini JPEG sono ideali per le fotografie; possono contenere milioni di colori diversi. Comprime le immagini meglio delle GIF, ma il testo e le grandi aree a tinta unita possono essere macchiate.
Formato GIF (Formato di interscambio grafico)... Ideale per comprimere immagini con aree a tinta unita, come i loghi. Le GIF ti consentono di impostare uno dei colori in modo che sia trasparente in modo che lo sfondo di una pagina Web possa apparire attraverso parte dell'immagine. Le GIF possono includere anche semplici animazioni. Le GIF contengono solo 256 sfumature, facendo apparire le immagini macchiate e irrealistiche come i poster.
Formato PNG (Grafica di rete portatile)... Include le migliori caratteristiche dei formati GIF e JPEG. Contiene 256 colori e consente di rendere trasparente uno dei colori, comprimendo le immagini a una dimensione inferiore rispetto a un file GIF.
Formato APNG (Grafica di rete portatile animata)... Formato immagine basato sul formato PNG. Consente di memorizzare l'animazione e supporta anche la trasparenza.
Formato SVG (Grafica vettoriale scalabile)... Un disegno SVG è costituito da un insieme di forme geometriche descritte in formato XML: linea, ellisse, poligono, ecc. Sono supportate sia la grafica statica che quella animata. L'insieme di funzioni include varie trasformazioni, maschere alfa, effetti filtro, la possibilità di utilizzare modelli. Le immagini SVG possono essere ridimensionate senza perdita di qualità.
formato BMP (Immagine bitmap)... È una bitmap non compressa (originale) modellata con una griglia rettangolare di pixel. Un file bitmap è costituito da un'intestazione, una tavolozza e dati grafici. L'intestazione contiene informazioni sull'immagine grafica e sul file (profondità pixel, altezza, larghezza e numero di colori). La tavolozza è specificata solo in quei file Bitmap che contengono immagini della tavolozza (8 o meno bit) e sono costituiti da non più di 256 elementi. I dati grafici rappresentano l'immagine stessa. La profondità del colore in questo formato può essere 1, 2, 4, 8, 16, 24, 32, 48 bit per pixel.
formato ICO (icona di Windows)... Il formato di archiviazione per le icone dei file in Microsoft Windows. Inoltre, l'icona di Windows viene utilizzata come icona sui siti Internet. È un'immagine di questo formato che viene visualizzata accanto all'indirizzo del sito o al segnalibro nel browser. Un file ICO contiene una o più icone, le cui dimensioni e colore sono impostate separatamente. La dimensione dell'icona può essere di qualsiasi dimensione, ma le icone più comuni sono icone quadrate con lati di 16, 32 e 48 pixel.
2. Etichetta
Etichetta
L'attributo name è disponibile per il tag, che specifica il nome della mappa. Il valore dell'attributo name per il tag
Elemento
3. Etichetta
Etichetta descrive solo un hotspot all'interno di una mappa immagine lato client. L'elemento non ha tag di fine. Se un hotspot si sovrappone a un altro, verrà implementato il primo collegamento dall'elenco degli ambiti.
| Attributo | Breve descrizione |
|---|---|
| alt | Specifica il testo alternativo per l'area attiva della mappa. |
| coords | Determina la posizione dell'area sullo schermo. Le coordinate sono specificate in unità di lunghezza e separate da virgole: per cerchio- coordinate del centro e raggio del cerchio; per rettangolo- coordinate degli angoli in alto a sinistra e in basso a destra; per poligono- le coordinate dei vertici del poligono nell'ordine desiderato, si consiglia inoltre di indicare le ultime coordinate, uguali alla prima, per il completamento logico della figura. |
| Scarica | Integra l'attributo href e indica al browser che la risorsa deve essere caricata nel momento in cui l'utente fa clic sul collegamento, invece di, ad esempio, pre-aprirlo (come un file PDF). Dando un nome all'attributo, diamo così un nome all'oggetto caricato. È consentito utilizzare l'attributo senza specificarne il valore. |
| href | Specifica l'URL per il collegamento. È possibile specificare un indirizzo di collegamento assoluto o relativo. |
| hreflang | Specifica la lingua del documento Web collegato. Utilizzato solo in combinazione con l'attributo href. I valori accettati sono un'abbreviazione costituita da una coppia di lettere che denota un codice di lingua. |
| media | Determina per quali tipi di dispositivi verrà ottimizzato il file. Il valore può essere qualsiasi media query. |
| rel | Integra l'attributo href con informazioni sulla relazione tra il documento corrente e il documento collegato. Valori accettati: alternativo: un collegamento a una versione alternativa del documento (ad esempio, una pagina stampabile, una traduzione o un mirror). autore - collegamento all'autore del documento. bookmark è un URL persistente utilizzato per i segnalibri. aiuto - link per aiutare. licenza - un collegamento alle informazioni sul copyright per questo documento web. next/prev - indica la relazione tra i singoli URL. Grazie a questo markup, Google può determinare che il contenuto di queste pagine è collegato in una sequenza logica. nofollow - impedisce a un motore di ricerca di seguire i collegamenti in questa pagina o un collegamento specifico. noreferrer - indica che a seguito di un collegamento, il browser non deve inviare un'intestazione di richiesta HTTP (Referrer), che registra informazioni sulla pagina da cui proviene il visitatore del sito. prefetch - indica che il documento di destinazione deve essere memorizzato nella cache, ad es. il browser in background carica il contenuto della pagina nella sua cache. ricerca - Indica che il documento di destinazione contiene uno strumento di ricerca. tag - indica la parola chiave per il documento corrente. |
| forma | Imposta la forma dell'hotspot sulla mappa e le sue coordinate. Può assumere i seguenti valori: rect - area attiva di forma rettangolare; cerchio - area attiva sotto forma di cerchio; poli - area attiva sotto forma di poligono; default - l'area attiva occupa l'intera area dell'immagine. |
| obbiettivo | Indica dove verrà caricato il documento quando si segue il collegamento. Assume i seguenti valori: _self - la pagina viene caricata nella finestra corrente; _blank - la pagina si apre in una nuova finestra del browser; _parent - la pagina viene caricata nel frame genitore; _top - la pagina viene caricata nella finestra del browser completa. |
| genere | Specifica il tipo MIME dei file di riferimento, ad es. estensione del file. |
4. Un esempio di creazione di una mappa immagine
1) Segniamo l'immagine originale sulle aree attive della forma desiderata. Le coordinate delle aree possono essere calcolate utilizzando un programma di elaborazione fotografica, ad esempio, Adobe Photoshop o Dipingere.
Riso. 1. Un esempio di markup dell'immagine per la creazione di una mappa 2) Imposta il nome della mappa aggiungendola al tag
Jpg "alt =" (! LANG: flowers_foto" width="680" height="383" usemap="#flowers">
!}
Riso. 2. Un esempio di creazione di un'immagine-mappa, quando si preme il cursore del mouse su un fiore, si accede a una pagina con una descrizione
Le immagini sulle pagine web possono essere utilizzate in due modi: come sfondo e come immagine a sé stante. Ti consigliamo di utilizzare tre formati grafici: JPEG, GIF e PNG. Tutti i browser li supportano; altri formati potrebbero richiedere strumenti speciali.
In genere, tutte le immagini di un sito vengono archiviate in una cartella separata, ad esempio le immagini. E i percorsi delle immagini sono scritti allo stesso modo dei collegamenti. Se ti sei dimenticato, dai un'occhiata.
In tutti gli esempi successivi, i percorsi delle immagini verranno scritti in base al fatto che le immagini si trovano nella cartella delle immagini e le pagine si trovano nella cartella del sito, che è allo stesso livello.
Immagini di sfondo
L'immagine di sfondo riempie l'intero spazio dell'elemento per cui è specificata. Quindi, specificando nel tag attributo sfondo = "fon.gif", fon.gif riempirà l'intera finestra del browser.
Codice di esempio: Risultato
Quando si imposta l'immagine di sfondo del documento, non dimenticare di specificare anche il parametro bgcolor... Ciò è dovuto al fatto che l'utente potrebbe aver disabilitato il caricamento delle immagini e non vedrà il tuo bellissimo sfondo. Quindi il browser utilizzerà il parametro bgcolor.
Incorporamento di immagini
Per posizionare le immagini nella pagina, viene utilizzato il tag
che ha un singolo parametro richiesto src specificando l'URL dell'immagine.
Codice d'esempio:
Tag Img Resto del contenuto del documento
Risultato:
Il resto del contenuto del documento
D'accordo, il testo accanto all'immagine non sembra molto carino.
Affinché le nostre immagini appaiano nel modo in cui vogliamo che siano allineate. E il parametro ci aiuterà in questo allineare.
Questo parametro ha diversi valori. Consideriamoli tutti con esempi.
Esempio di codice con parametro allinea = "sinistra"
Il tag img con il parametro align = "left" L'immagine è a sinistra e il testo scorre intorno ad essa a destra e questo testo può occupare più righe.
Risultato:
L'immagine è a sinistra e il testo scorre attorno ad essa a destra e questo testo può occupare diverse righe.
Esempio di codice con parametro allinea = "a destra"
Il tag img con il parametro align = "right" L'immagine si trova a destra e il testo scorre intorno ad essa a sinistra e questo testo può occupare diverse righe.
Risultato:
L'immagine è a destra e il testo scorre attorno ad essa a sinistra e questo testo può occupare diverse righe.
Esempio di codice con parametro allinea = "in alto"
Il tag img con il parametro align = "top" Il bordo superiore dell'immagine è allineato con l'elemento più alto della riga corrente. L'immagine è, per così dire, incorporata nella linea. Se l'immagine è grande, la linea viene spostata di questa altezza.
Risultato:
Il bordo superiore dell'immagine è allineato con l'elemento più alto della riga corrente. L'immagine è, per così dire, incorporata nella linea. Se l'immagine è grande, la linea viene spostata di questa altezza.
Esempio di codice con parametro allinea = "texttop"
Il tag img con il parametro align = "texttop" Il bordo superiore dell'immagine è allineato con l'elemento di testo più alto della riga corrente (la lettera maiuscola della riga).
Risultato:
Il bordo superiore dell'immagine è allineato con l'elemento di testo più alto sulla riga corrente (la lettera maiuscola della riga).
Esempio di codice con parametro allinea = "medio"
Il tag img con il parametro align = "middle" Allinea il centro dell'immagine alla linea di base della linea corrente.
Risultato:
Allinea il centro dell'immagine con la linea di base della linea corrente. * la stampa grande è fatta per chiarezza della differenza tra absmiddle centrale
Esempio di codice con parametro allineare = "assoluto"
Il tag img con il parametro align = "absmiddle" Allinea il centro dell'immagine al centro della riga corrente.
Risultato:
Allinea il centro dell'immagine al centro della riga corrente.
Esempio di codice con parametro allinea = "in basso"
Il tag img con il parametro align = "bottom" Allinea il bordo inferiore dell'immagine con la linea di base della riga corrente.
Risultato:
Allinea il bordo inferiore dell'immagine con la linea di base della linea corrente.
Esempio di codice con parametro allineare = "absbottom"
Il tag img con il parametro align = "absbottom" Allinea il bordo inferiore dell'immagine al bordo inferiore della riga corrente.
Risultato:
Allinea la parte inferiore dell'immagine alla parte inferiore della riga corrente.
Se vogliamo che il testo si trovi sotto l'immagine, allora dobbiamo usare il tag
con parametro chiaro che disabilita il wrapping. Il wrapping può essere disabilitato sul lato destro (destro), sul lato sinistro (sinistro) e su entrambi i lati (tutti).
Codice d'esempio:
Prevenire avvolgere un'immagine
Altri elementi del documento
Risultato:
Altri elementi del documento
Dimensioni dell'immagine
Qualsiasi immagine ha una dimensione specificata in pixel. Quando si incorpora un'immagine in una pagina, potrebbe essere necessario ridurre le dimensioni dell'immagine originale.
Per fare questo, il tag
ci sono parametri larghezza- larghezza e altezza- altezza. Sono impostati in pixel o in percentuale (percentuale della larghezza dello schermo)
Quando l'immagine viene caricata, il browser ridimensionerà automaticamente l'immagine in base ai parametri di larghezza e altezza specificati. Tieni presente che un'impostazione imprecisa dei parametri può portare a una modifica delle proporzioni dell'immagine e quindi alla sua distorsione.
Codice d'esempio:
Risultato:
Separare le immagini dal testo
Probabilmente avrai notato che il testo si attacca molto alle immagini. Non è sempre carino. Per risolvere questo problema, ci sono opzioni hspazio- rientro orizzontale e vspazio- rientro verticale. I margini sono impostati in pixel.
Codice d'esempio:
Tag img rientrato Il resto del documento non è più appiccicoso all'immagine.
Risultato:
Testo alternativo
Se l'utente ha disabilitato la modalità di caricamento delle immagini, invece di un'immagine vedrà una croce rossa (in Internet Explorer) o un'altra icona (in altri browser). Sarebbe bello dargli un suggerimento come mostrato nella foto. Per fare ciò, utilizzare il parametro alt... Il testo di questo parametro verrà visualizzato al posto dell'immagine (se la modalità di caricamento delle immagini è disabilitata). Se l'immagine viene visualizzata, questo parametro fornisce un suggerimento quando il puntatore del mouse è in bilico, tuttavia, non in tutti i browser.
