Come inserire un'immagine in una pagina html

Per inserire un'immagine (foto o qualsiasi elemento grafico) nel sito, è necessario specificare il percorso della fonte (del file immagine) utilizzando il tag img.Il tag img è l'abbreviazione dell'immagine inglese (immagine, immagine). Fonte - in inglese fonte, abbreviata src
Importante: peso e dimensioni immagini (piccole), nome del file(senza spazi e solo lettere e numeri latini), formato immagine(estensioni: GIF, JPG, JPEG, PNG. È possibile utilizzare immagini animate (GIF).
Il percorso dell'immagine è indicato assoluto o relativo, a seconda di dove si trova l'immagine sul tuo sito o su Internet su risorse di terze parti (quindi è necessario specificare l'URL)

Nebbia. L'artista Vladimir Knyagnitsky

Codice. Il codice contiene un indirizzo relativo (relativo alla cartella sul mio server)

Codice. Il codice contiene l'indirizzo assoluto dell'immagine

Dimensioni dell'immagine e spessore della cornice

La dimensione effettiva di questa immagine: Larghezza (larghezza) = "499" Altezza (altezza) = "434". Senza ricorrere a Photoshop, puoi far sembrare l'immagine sullo schermo più grande o più piccola delle sue dimensioni reali. A questo scopo vengono utilizzati gli atiribut larghezza E altezza. Ad esempio, per far sembrare l'immagine 2 volte più piccola, specifica la larghezza (width)="250" e l'altezza (height)="217" . E aggiungi una cornice spessa 4 pixel ( confine="4"). A sinistra c'è un'immagine con cornice, a destra, per confronto, senza cornice

Attributi del tag IMG

src-Attributo obbligatorio che indica l'URL dell'immagine (il suo indirizzo, posizione)
IMG SCR= "img/kartinka.gif"

allineare- Allinea l'immagine a un lato del documento
align="left" - Allineamento a sinistra
align="right" Allineamento a destra
align="bottom" Allineamento inferiore
align="top" Allineamento superiore
align="middle" Allineamento centrale

alt- Visualizza il testo nell'immagine. Alternativa alla grafica se non si caricano
confine- Imposta lo spessore della cornice attorno all'immagine in pixel. Per impostazione predefinita, non viene utilizzato alcun frame.

larghezza larghezza dell'immagine in pixel o percentuale
altezza- altezza dell'immagine in pixel o percentuale

hspace rientro orizzontale
vspace spazio verticale

Esempi di allineamento di immagini con testo utilizzando HTML

L'immagine viene posizionata prima del testo senza indicare alcun attributo. Nessuna formattazione del testo. Il risultato è quello che vedi. L'immagine si trova a sinistra del testo utilizzando l'attributo align con il valore left. allinea="sinistra" .
Questo, ovviamente, è molto meglio dell'opzione precedente per organizzare un'immagine con il testo. Ma non credo che piaccia a nessuno quando l’immagine viene premuta vicino al testo. L'immagine mostra una farfalla, farfalla, farfalla. E testo, testo, testo su una farfalla, farfalla, farfalla. Troppo vicino alla foto. L'immagine non dovrebbe fondersi con il testo, anche se il testo è scritto semplicemente come testo, per dimostrare chiaramente il testo che scorre attorno all'immagine. È molto importante che l'immagine sullo schermo non si fonda con il testo in modo che non irriti, sia gradevole alla vista e sia al suo posto. Una quantità sufficiente di testo decostruirà chiaramente l'esempio.
Esistono regole per il layout nella pubblicazione di libri e dovrebbero esserci regole per il layout nella creazione di siti Web. L'immagine si trova a sinistra del testo sull'utilizzo dell'attributoallineare con il valore SINISTRA, rientro dal testo - 20 pixel in orizzontale.
align="left" hspace=20 I rientri vengono aggiunti utilizzando gli attributi HSPACE(rientro orizzontale) e VSPACE(rientro verticale). In questo caso, il riempimento verticale è pari a zero, in modo che la parte superiore dell'immagine sia a filo con la riga superiore del testo. Se il rientro è zero, non è indicato. Bene, l'offset verticale è indicato nell'attributo. E sebbene i webmaster siano attualmente invitati ad abbandonare gli attributi HTML e passare interamente ai CSS, mi sembra che la semplicità di questo metodo gli dia il diritto di esistere.
CODICE L'immagine si trova a destra del testo sull'utilizzo di un attributo allinearsi sul valoreGIUSTO, aggiunti rientri utilizzando gli attributi HSPACE(rientro orizzontale). E VSPACE(rientro verticale). In linea di principio, tutto è uguale alla versione precedente, solo che invece Sinistra, indicato Giusto e l'immagine viene inserita non prima del testo, ma approssimativamente al centro. Formattazione con attributi allineare(allineamento lineare) e l'utilizzo dei rientri orizzontali e verticali fornisce un risultato del tutto normale. L'immagine è circondata da testo a sinistra, in alto e in basso (se è presente molto testo). Il rientro del testo dell'immagine a sinistra, in alto e in basso è di 20 pixel. Tutto è come indicato nel codice.
Più spesso vengono utilizzati due tipi di allineamento (sinistra e destra) e il resto... Quasi tutti gli altri sono considerati obsoleti. Sui siti Web moderni, tutte le immagini (e in effetti l'intero design) sono formattate utilizzando fogli di stile a cascata (CSS)

Testo, testo, testo continuazione del testo

L'immagine viene posizionata utilizzando l'attributo align con significato mezzo. Aggiunto rientro utilizzando gli attributi HSPACE(rientro orizzontale) e VSPACE. Sembra così, il codice è scritto sotto... Qui finiamo con gli attributi di posizionamento dell'immagine

Come utilizzare gli attributi alt e titolo.

Gli attributi alt e title contengono il titolo dell'immagine. ALT è un'alternativa a un'immagine se per qualche motivo non viene caricata. Il titolo è l'iscrizione del titolo sull'immagine. Appare quando passi il mouse sull'immagine.
Se stai creando un sito web solo per te stesso, non devi utilizzare questi attributi. Se il sito è destinato alle persone, questi attributi devono essere compilati con una descrizione chiara e accurata dell'immagine.
In primo luogo, è conveniente per i visitatori e, in secondo luogo, è necessario per i motori di ricerca. È il testo all'interno del tag IMG che consente ai robot di ricerca di indicizzare le immagini, ordinarle per parole chiave e restituirle in base alle richieste dell'utente. A proposito, Yandex avverte anche che se un'immagine non ha una descrizione significativa, non verrà inclusa nella ricerca. Vengono indicizzate solo le immagini nei formati grafici standard (JPEG, GIF e PNG). Le immagini di sfondo e le immagini aperte utilizzando uno script non vengono indicizzate.

CODICE di un'immagine con alt e titolo compilati

Come trasformare un'immagine in un collegamento

Qualsiasi collegamento viene creato utilizzando il tag A e l'attributo href (se si tratta di un collegamento ipertestuale) o il nome se (un collegamento a un paragrafo o elemento situato nella stessa pagina).
Inizia etichetta Fonte dell'immagine cartellino di chiusura

Viaggiando su Internet, ovviamente su molti siti vedi varie immagini, banner, fotografie e immagini grafiche. Oggi impareremo come inserire immagini in una pagina HTML.

L'aggiunta di un'immagine avviene in due fasi: prima viene preparato un file grafico delle dimensioni e del formato richiesti, quindi viene aggiunto alla pagina web tramite il tag: . Il documento HTML stesso ha lo scopo solo di visualizzare l'immagine richiesta, mentre senza cambiarlo affatto.

Ci sono alcune cose da considerare quando prepari le tue immagini.

1. Poiché la pagina Web viene caricata sulla rete, un fattore significativo lo è dimensione ("peso") del file grafico, incorporato in un documento Web. Più è piccolo, più velocemente verrà visualizzata l'immagine.

2. Molto spesso, le dimensioni fisiche di un'immagine (larghezza e altezza) devono essere limitate (ridotte) dalla larghezza e dall'altezza. Ad esempio, imposta la larghezza su un valore non superiore a 700-800 pixel. In caso contrario, l'intera immagine non entrerà nella finestra del browser e verranno visualizzate le barre di scorrimento.

Formati grafici per siti web

I due formati principali più utilizzati per la grafica web sono: GIF E JPEG. Qualità come la multifunzionalità, la versatilità, un piccolo volume di file sorgente con una qualità sufficientemente buona hanno servito bene questi formati, definendoli come lo standard per le immagini web.

Esiste anche un formato: PNG, che è supportato anche dai browser durante l'aggiunta di immagini ed è disponibile in due versioni: PNG-8 E PNG-24. Tuttavia, la popolarità del formato PNG è molto inferiore in termini di riconoscimento rispetto ai formati GIF e JPEG.

Di solito, viene creata una cartella separata per le immagini (immagini) nella directory principale e tutte le immagini del sito vengono inserite in essa. A volte ci sono diverse cartelle di questo tipo (se la struttura del sito lo richiede o se è più facile per te navigare). Questa cartella viene spesso chiamata: imm O immagini (immagini). Nel codice della pagina web, scrivi il percorso completo del file grafico (dove si trova l'immagine), così come il nome di questo file (immagine) che desideri inserire nel documento html.

Scriviamo il codice per inserire un'immagine in una pagina web

Per inserire immagini in un documento HTML, utilizzare la costruzione specificata in Listato 8.1. Questo codice viene inserito nel punto desiderato della pagina web (dove vuoi vedere l'immagine).

Nella nostra pagina web dedicata alle auto ho preparato e inserito due immagini. Puoi vedere il codice di incorporamento per la prima immagine nel Listato 8.1.

Listato 8.1.

Ecco come apparirà la prima immagine inserita nella pagina web del sito:

E ora commenterò più in dettaglio ciò che è scritto Listato 8.1.

L'immagine stessa viene “inserita” utilizzando il tag: imm src. La voce completa è simile alla seguente: img src="img/mers1.jpg", Dove "img/mers1.jpg"– indica che la nostra immagine è nella cartella: imm e il nome del file grafico (immagine): mers1.jpg.

In linea di massima questo è già sufficiente per inserire un'immagine in una pagina web, i restanti parametri sono facoltativi, ma consiglio comunque di registrarli sempre, in caso contrario l'immagine potrebbe essere soggetta a distorsioni geometriche.

Diamo un'occhiata alle opzioni aggiuntive:

bordo="0"– indica che non c'è cornice intorno all'immagine, prova a cambiare 0 con un altro numero, ad esempio in 1 , - corrisponde allo spessore della cornice attorno all'immagine in 1 pixel, 2 – corrisponde allo spessore della cornice attorno all'immagine di due pixel, ecc.

Importante! Se intendi trasformare un'immagine in un collegamento, assicurati di indicare il valore: bordo="0".

larghezza="400"– indica che la larghezza dell’immagine è: 400 pixel(inserisci un numero reale per la larghezza delle tue immagini).

altezza="209"- indica che l'altezza dell'immagine è: 209 pixel(inserisci un numero reale per l'altezza delle tue immagini).

Se non specifichi i parametri: larghezza E altezza, l'immagine potrebbe presentare distorsioni geometriche.

hspazio="20"– indica un rientro di testo di 20 pixel attorno all'immagine.

allinea="sinistra"– questo è un tag che ti è già familiare….. Esatto, significa allineamento a sinistra, può anche assumere il significato: Giusto- giusto allineamento.

alt="Vista frontale dell'auto" !}– Qui viene scritto il testo alternativo, che viene visualizzato quando si passa il mouse sopra l'immagine.

Esattamente allo stesso modo, “inseriremo” la seconda immagine nella pagina web, con l'unica differenza che sarà allineata a destra.

Commenti su questo articolo (lezione):

Per favore dimmi dove dovrei creare esattamente la cartella img?

La cartella img è solo un nome convenzionale, puoi chiamarla come vuoi, purché lo capisca in seguito. Puoi crearlo ovunque, per semplicità, crealo nella directory principale e inserisci lì tutte le immagini.

Il fatto è che non viene visualizzata l'immagine, ma solo l'iscrizione. Cosa può esserci di sbagliato? Grazie.

Dai un'occhiata da vicino al Listato 8.1 sopra. Prendi tutto per te. Nella directory principale (dove si trovano tutti i file HTML del tuo sito), crea una cartella img. Inserisci tutte le tue immagini in questa cartella. Nell'elenco, cambia mers1.jpg con il nome del tuo file. Modifica anche i valori di larghezza e altezza in base alle dimensioni effettive del tuo file. Buona fortuna.

Grazie mille, tutto ha funzionato.

Ciao, ho la stessa situazione del relatore precedente: scrivo il codice come il tuo, cambio solo il nome del file: al posto di mers.1/jpeg inserisco il link Mercedes/jpeg, nella pagina appare solo una finestra con il scritta in alto "Vista frontale dell'auto", e non c'è immagine. Secondo me il browser non riesce a trovare il percorso della foto oppure non è scritta correttamente. ECCO IL MIO CODICE: B

Osserva attentamente il tuo codice img/mercedes/jpeg. Hai capito bene, il browser non trova il percorso del file grafico. 2. Il nome del file non è corretto, guarda come ho mers1.jpg

Bene, ho copiato il codice e incollato, ho un ovale senza immagine, nell'ovale c'è un collegamento in alto!

Ciao, il problema è lo stesso, ho creato una cartella che si chiama img nello stesso posto dei documenti del sito, in questa cartella vengono salvate le immagini con il nome 1.jpg, scrivo tutto come nel tuo esempio.

Se hai notato che la mia foto è nella cartella img

Un articolo molto utile per i webmaster principianti. L'unico avvertimento sull'attributo "alt". In relazione alla figura l'articolo dà la seguente interpretazione: "alt="Vista frontale della vettura" – здесь прописывается альтернативный текст который высвечивается при наведении мыши на картинку." Не совсем точно: для рисунка - это прорегатива атрибута title. alt - альтернативный текст, который отобразится, если у пользователя графика отключена или картинка не загрузилась; title - атрибут, позволяющий отображать всплывающее пояснение к картинке при наведении на неё курсора.!}

ecco il mio codice Allora perché l'immagine viene messa di lato quando il compito è al centro?

E se prendo un’immagine dal sito di qualcun altro, non sarà una violazione del diritto d’autore?

Spiega perché, quando si carica un documento HTML sul server, nel frame sono presenti spazi vuoti al posto delle immagini. Anche se prima della visualizzazione le immagini erano come dovrebbero essere.

Dmitry, i miracoli non accadono, hai fatto un errore da qualche parte, controlla tutti i percorsi che portano alle immagini, ad es. come sono scritte le immagini nel codice.

Questo è il mio codice, nella pagina è svelato tutto tranne l'immagine, ho provato tutto il giorno in tutti i modi possibili ma niente. per favore dimmi cosa fare

AndreyK, per favore contattatemi nella mia lettera, non riesco in nessun modo a inserire un'immagine, inserisco tutto correttamente ma niente, appare solo la cornice e la scritta

Elvira, ho letto la tua lettera, così come tutti gli altri commenti e lettere. Ma dove dovrei rispondere...al villaggio di mio nonno???

Non so perché sono tutti così arrabbiati!? Basta non copiare e incollare i codici, ma scriverli tu stesso e tutto funzionerà... ecco il testo della mia immagine

Ho copiato la tua inserzione, incollato i miei valori - c'è un'immagine, poi digito la stessa cosa qui sotto (manualmente) non c'è immagine - che miracolo?

AndreyK, per favore dimmi dov'è l'errore? Non importa quante volte ci provo, non funziona((

Andrey, dimmi perché non riesco a vedere la foto. Il mio codice: C'è un'iscrizione, ma nessuna immagine. Il mio indirizzo: [e-mail protetta] Grazie.

Ho anche sofferto a lungo, ma ha funzionato! Infatti la cartella imj deve essere aperta in un documento HTML.

Lo proverò sicuramente, grazie

eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

Anch'io ho sofferto a lungo, si scopre che la cartella con le immagini dovrebbe essere nello stesso posto di index.html, grazie Elena

Andrey inserisco:

Andrey inserisco: e non ho una foto nel documento, solo un'iscrizione!!! Il mio indirizzo: [e-mail protetta]

il mio codice...nessuna immagine neanche. La cartella img si trova nella stessa cartella di index... per favore aiutatemi. [e-mail protetta] Grazie!

Beh non lo so. Ho letto tutti i commenti. Ho provato di tutto. Ho copiato e incollato le mie informazioni. Niente funziona. La cartella con le immagini (img) si trova nello stesso posto di index.html. Ma non c'è nessuna immagine. Invece c'è una croce rossa e un'iscrizione Lavoro nel browser IE. Ecco cosa ho inserito:

Ho guardato il codice HTML della pagina al posto della foto nella lezione: Il codice sulla pagina è diverso da quello presente nell'elenco. Perché? e tra l'altro nella pagina il codice “mers1.jpg” è sottolineato. Copia con sottolineatura non riuscita. Ho provato ad inserirlo così. Ancora nessuna foto. Qual è il problema?

Ci chiediamo, ci rispondiamo. Ho sofferto a lungo e la foto non è stata inserita. Si è scoperto: 1, invece del tag src avevo srk 2. Mi sono confuso mentre stavo componendo il percorso dell'immagine. Ho rinominato la cartella in IMG e tutto ha funzionato. Ci ho messo quasi due giorni, ma ne è valsa la pena.

Amore, ma ora lo ricorderai per il resto della tua vita :) Sto scherzando, ovviamente, non offenderti. Ma sul serio, se una persona non lascia l'indirizzo del mittente, è quasi impossibile per me aiutarla.

Ciao, dimmi come posizionare un'immagine in alto, la seconda in basso a sinistra e la terza in basso a destra))))

..........qual è il mio errore di immagine mancante?

Tutto nel codice è corretto, se nulla è incasinato, tutto dovrebbe funzionare. Ma scrivi il nome del file (immagine) in lettere inglesi. Molti server non accettano l'alfabeto latino.

Ma ecco la cosa strana... mentre chiamavo la cartella con nomi diversi, l'immagine non voleva apparire, anche se il percorso era scritto correttamente. Non appena ho chiamato IMG, è apparsa immediatamente. Qual è il problema?

Marina, non c'è nessun trucco o provocazione :). Nel codice del Listato 8.1. si indica che questa immagine è nella cartella: img. Se cambi il nome della cartella per le immagini sul tuo host, quindi lo cambi nell'elenco, il trucco è tutto qui.

Sto cercando di inserire un'immagine!!! Scrivo tutto usando un blocco note, sto facendo tutto correttamente, forse non vale la pena usare un blocco note??

E apro tutto nell'ultimo Mozilla Fire Fox))

Il percorso della mia immagine è C:Documents and SettingsdenisDesktopkoffevinogradwwwImg e l'immagine stessa si chiama gif, inoltre il nome include 1.gif...lo faccio nel blocco note L'ho fatto e non esce il percorso completo, mozilla non vede la foto dell'esploratore e la evidenzia con una croce rossa

Denis, rinomina la cartella Img in img, ad es. tutto in maiuscolo e rinominare anche il percorso. Molti server non visualizzano correttamente le maiuscole.

Ho ancora la stessa domanda: perché non le immagini, ma solo l'iscrizione. Ho creato una cartella separata per il sito: contiene una pagina Web e un disegno. Inserito: AIUTO QUAL È IL MIO ERRORE MAIL: [e-mail protetta]

Come realizzare un'immagine in modo che possa essere ingrandita o ridotta?

Per qualche motivo l’immagine non centra neanche per me. Qual è il problema?... Il codice è così:

Le immagini sono forse quelle che formano la nostra idea generale del World Wide Web. Concordo sul fatto che le persone generalmente ricordano le informazioni grafiche molto meglio delle informazioni testuali. Pertanto, le immagini sono una parte importante di qualsiasi sito Web e di qualsiasi pagina Web. Ed è per questo che voglio dirti come inserire un'immagine in html.

Inserimento di un'immagine in html utilizzando un tag

Sicuramente sai che tutti i comandi in html vengono eseguiti utilizzando i tag. Quindi abbiamo creato il nostro tag per le immagini: . È unico, cioè non ha una parte conclusiva.

L'attributo più importante del tag img è src (source) – il percorso dell'immagine. In esso scrivi l'indirizzo in cui si trova l'immagine. Può essere scritto come assoluto ( sito web/images/images2/image.jpg) o come relativo ( immagini/immagini2/immagine.jpg).

Entrambi questi percorsi portano allo stesso file image.jpg, che si trova nella cartella image2. Questo, a sua volta, è nella directory delle immagini e quello è nella cartella principale. Se scrivi tutto in modo relativo, quando cambi il nome di dominio del tuo sito, tutto rimarrà operativo. Ad esempio, l'editor di WordPress inserisce indirizzi assoluti per impostazione predefinita. Ma personalmente non cambierò dominio e questo mi va bene.

Attributi aggiuntivi e design tramite CSS

Quindi divaghiamo dall'argomento: per visualizzare un'immagine è sufficiente specificare l'attributo src, ma ci sono molti altri attributi per la sua progettazione.

• larghezza e altezza: la larghezza e l'altezza dell'immagine. Può essere impostato negli attributi corrispondenti nel tag img
• align – allineamento dell'immagine rispetto al testo. Per impostazione predefinita è allineato a sinistra. Puoi anche metterlo a destra e al centro (destra, centro)
• alt – testo alternativo che verrà visualizzato se l'utente ha disabilitato la visualizzazione delle immagini nel browser. È utile compilarlo
• il titolo è quasi lo stesso. Una sorta di descrizione dell'immagine che verrà visualizzata quando si posiziona il cursore su di essa
• vspace e hspace – spazio verticale e orizzontale dell'immagine rispetto al resto del contenuto. Attenzione! Gli attributi sono già obsoleti ed è meglio impostare questi rientri tramite un foglio di stile
• classe – una classe di stile collegata all'immagine e che applica alcuni stili ad essa

Inserisci un'immagine così carina. Qui abbiamo aggiunto la classe di anteprima e ora con CSS possiamo accedervi attraverso di essa e specificare eventuali stili. Ad esempio, questi:

Anteprima (imbottitura: 20px; margine: 10px; bordo: 5px arancione fisso; trasformazione: skewX(10deg); box-shadow: 0 0 15px 10px viola)

Lasciatemi riassumere

Quindi, per visualizzare un'immagine, devi solo scrivere un tag img e includere al suo interno l'attributo src, che specifica il percorso dell'immagine. Tutto il resto sono funzionalità aggiuntive: allineamento, dimensioni, testo alternativo, rotazioni, cornici, ecc.

E infine, idealmente, tutto questo dovrebbe essere scritto tramite CSS. Cioè, non impostare le dimensioni negli attributi, ma aggiungere all'immagine una classe di stile aggiuntiva, che determinerà le dimensioni. Lo stesso vale per l'allineamento, che può essere eseguito nei CSS utilizzando la proprietà text-align, così come i blocchi mobili float.

Speriamo che questo articolo ti sia utile. Buona lettura!

Le immagini ci fanno capire istantaneamente quanto possa essere interessante per noi un determinato sito o articolo, creano un'atmosfera e possono rivelare un argomento in un modo nuovo. A volte una foto vale più di mille parole.

Ma non dovresti usufruirne se non hai Instagram o un negozio online. È consigliabile che le immagini:

• erano informativi
• abbinare la combinazione di colori del tuo sito
• erano appropriati

Se non hai una foto adatta, puoi utilizzare la cosiddetta photostock (banca fotografica) - 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 i download sono a pagamento.

Per coloro a cui non piace pagare più del dovuto, abbiamo preparato alla fine dell'articolo bonus- un elenco di diverse banche fotografiche in cui puoi scaricare un'enorme quantità di bellissimi materiali di alta qualità in modo assolutamente gratuito :)

Formati di immagine

Ci sono principalmente 3 tipi di immagini utilizzate nel World Wide Web:

gif(Formato di interscambio grafico - formato di scambio di immagini)

Questo è il primo formato che ha iniziato ad essere utilizzato su Internet. I vantaggi di questo formato sono la disponibilità animazioni e di piccole dimensioni, la pagina si carica velocemente. Inoltre, supporta la trasparenza. Svantaggio: usato solo 256 colori(ecco perché la dimensione è piccola), ad es. non può essere utilizzato per immagini a colori.

jpeg, ovvero jpg(Gruppo congiunto di esperti fotografici - Gruppo congiunto di esperti fotografici - questo è il nome dell'organizzazione di sviluppo)

adatto per creare immagini a colori di alta qualità, fotografie. La dimensione di tali immagini è elevata, quindi di solito comportano un carico elevato sul server. Se devi comprimere un jpeg (per un peso dell'immagine inferiore), ti consigliamo di prendere le dimensioni dell'immagine finale multiplo di otto , quindi la perdita di qualità sarà minima.

png(Grafica di rete portatile - Grafica di rete portatile. Si pronuncia allo stesso modo di ping, ad es. )

questo formato è stato originariamente sviluppato per il web, ad es. L'immagine solitamente pesa poco 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 la gif, utilizza solo 256 colori. Formato png-24 supporta 16 milioni di colori, anche se è già piuttosto pesante. PNG-32 contiene lo stesso numero di colori di png-24 e in più ti consente 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 nella qualità del colore.

Riassumiamo

gif- per l'animazione

jpeg- per le fotografie

png- per icone, pulsanti, sfondi, loghi, screenshot, disegni, testi, fotografie con sfondo trasparente

Inserimento di un'immagine in un file html

Per aggiungere un'immagine alla pagina, utilizzare etichetta (dall'immagine inglese - immagine, immagine). Questo è un tag singolo e non necessita di un tag di chiusura. Questo tag contiene attributi al suo interno.

Attributo src(dall'inglese source - source) indica il percorso del file (il luogo in cui si trova l'immagine). Se l'immagine è sul tuo computer (il sito è ancora in fase di sviluppo) o sul tuo server, usa il link relativo. Se l'immagine proviene dalla rete, è 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 alt(dall'inglese alternative - alternative) indica il testo che l'utente vedrà se l'immagine non viene caricata. Il percorso è indicato in modo errato, l'immagine è stata cancellata, Internet non funziona bene: le ragioni possono essere molte ed è auspicabile che la persona capisca cosa si nasconde dietro questa odiata icona.

I motori di ricerca prestano molta attenzione a garantire che questo attributo sia compilato. 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 sarà compilato e, se possibile, conterrà anche parole chiave: la visibilità del tuo sito aumenterà in modo significativo, ad es. verrà mostrato più spesso nelle ricerche. Questo viene dal campo del SEO, e in questa fase ci basta sapere che esiste un tale attributo e che un sito "live" deve averlo compilato. Mentre il sito è sul nostro disco, è del tutto possibile lasciarlo vuoto.

Nell'esempio seguente abbiamo deliberatamente specificato un percorso inesistente per l'immagine in modo che tu possa 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 utilizzando CSS o attributo di stile , come questo:

In questo esempio abbiamo preso il 30% della larghezza, non dell'immagine originale, ma della dimensione della finestra del browser. Quando larghezza = 100%, l'immagine si apre per l'intera larghezza del browser. Ricorda questa funzione per cento, come unità di misura.

A proposito, se avessimo scritto solo la larghezza, il risultato sarebbe stato lo stesso, prova:

< img src = "https://site/tutorials/wp-content/uploads/2016/07/panda.jpg" alt = "panda sull'albero" stile = "larghezza: 30%;" >

Puoi anche impostare la larghezza e l'altezza in pixel. Nel caso del nostro panda, le cui dimensioni originali sono 1196 x 796 pixel, affinché l'animale non soffra quando viene compresso, dobbiamo mantenere le proporzioni, e qui non si può fare a meno di una calcolatrice. Diciamo che vogliamo ridurre le dimensioni dell'immagine di 3 volte, quindi dobbiamo impostare le dimensioni su 399 x 265 pixel.

Tieni presente che se ingrandiamo l'immagine proporzionalmente, è sufficiente specificare un solo parametro, ad esempio. larghezza. Il browser intelligente stesso calcolerà la dimensione intera dell'immagine.

Prova a eseguire questo codice e guarda il risultato:

< img src = "https://site/tutorials/wp-content/uploads/2016/07/panda.jpg" alt = "panda sull'albero" stile = "larghezza: 399px;" >

Imposta sempre le dimensioni dell'immagine. In genere, il caricamento delle immagini richiede più tempo rispetto al resto del codice html. Se il browser sa quanto spazio riservare per le immagini, può continuare a caricare il sito senza attendere il caricamento delle immagini.

Un po' di naftalina

Se ti capita di armeggiare con il codice di un sito creato in HTML-4 o anche prima, noterai che le dimensioni delle immagini vengono impostate utilizzando speciali attributi di larghezza E altezza. Questo è un metodo deprecato, sebbene ancora valido in HTML5. Tuttavia, ti consigliamo di utilizzare lo stile, perché Gli attributi larghezza e altezza possono essere influenzati da stili interni o esterni che vivranno nel browser o nel file CSS. Entreremo più in dettaglio a questo proposito quando esamineremo i CSS, ma per ora guarda solo un esempio di come gli stili influenzano gli attributi di altezza e larghezza.

Ci sono 3 schede in questa finestra: nella prima vedi il codice html, nella seconda il codice CSS e nell'ultima, come sempre, il risultato. Funziona come se la prima scheda fosse un file index.html, la seconda un file style.css e la terza un browser. Quindi ora il nostro CSS dice che tutti gli elementi con il tag img hanno una larghezza del 100%. Le dimensioni predefinite degli attributi larghezza e altezza sono in pixel, quindi non è necessario aggiungere alcuna unità qui.

La differenza nei risultati è evidente :)

Anche nelle versioni precedenti di html venivano utilizzati i seguenti attributi:

allineare, che veniva utilizzato per allineare l'immagine orizzontalmente o verticalmente.

hspace- rientro a sinistra e a destra dell'immagine rispetto al contenuto circostante (ad esempio testo o immagine adiacente)

vspace- rientro sopra e sotto dall'immagine al contenuto circostante.

confine- imposta lo spessore della cornice attorno all'immagine (per impostazione predefinita è zero)

Al giorno d'oggi, tutta questa manipolazione (e molto altro) viene eseguita utilizzando i CSS, quindi abbiamo deciso di non disturbarti qui. Se sei ancora interessato a come lavorare con questi attributi, scrivi nei commenti, aggiungeremo questo articolo :)

Inserimento di un'immagine nel codice

Da dove posizioniamo 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 un elemento di blocco, ad esempio un paragrafo, verrà spostato alla riga successiva.

Esempio n. 2 - all'inizio del paragrafo

Questo è un elemento in linea, si inserisce all'interno di un elemento blocco e non inizia una nuova riga. Nell'esempio sopra, il testo si avvolge attorno all'immagine perché il codice registrato all'interno

Didascalie per le illustrazioni

Per contrassegnare o firmare una foto su una pagina, utilizzare etichetta

(dall'inglese figura - disegno). Questo tag indica che al suo interno verranno inseriti contenuti come illustrazioni, fotografie, diagrammi, ecc.

Etichetta