Successivamente, diamo un'occhiata a come inserire un'immagine in un documento html e personalizzarne la visualizzazione. Per funzionare, hai solo bisogno dell'editor e del browser sopra menzionati.

Se, tuttavia, non hai Notepad ++ o c'è un problema con il download e sei tormentato dalla domanda: come inserire un'immagine in html nel Blocco note?

La risposta è semplice, lavorare in un normale blocco note differisce solo dal fatto che non vi è alcun codice evidenziato in esso. colori differenti, per la leggibilità e la separazione del codice dal testo stesso.

Come inserire un'immagine in una pagina HTML

Dopo aver installato l'editor, in menù contestuale, menu a tendina facendo clic con il tasto destro su qualsiasi file, apparirà l'elemento corrispondente.

Ora, per modificare un file del genere, è sufficiente chiamare il menu di scelta rapida facendo clic con il pulsante destro del mouse su di esso, quindi "Modifica con Blocco note ++".

Verrà utilizzata una pagina di prova per osservare i risultati delle modifiche al codice.

Per inserire un'immagine nel codice html, usa un singolo tag in linea img... Il suo attributo principale è la fonte della foto.

Può essere un qualsiasi file, su un disco rigido, o un collegamento a un'immagine esistente in rete. Incorniciato con etichette < p> p>.

Per aggiungere una foto, è necessario inserire la seguente riga:

Ecco come apparirà nell'editor:

Ed è così che verrà visualizzata la sua presenza nella pagina:

Src indica la fonte dell'immagine. Un nome di file è sufficiente se il file di immagine si trova nello stesso documento html directory.

Se la foto si trova in un'altra directory, è necessario specificare il percorso, iniziando dalla cartella in cui si trova il file html.

Consigli!È importante considerare che sulla strada per dato file la foto non deve contenere caratteri cirillici. Inoltre, il caso è importante quando si scrive il nome del file.

Come fonte, puoi utilizzare un'illustrazione dalla rete. Per fare ciò, devi solo specificare un collegamento ad esso nell'attributo, invece di trovarti sul disco rigido.

Tabella di formattazione del percorso del file

Per ridimensionare l'immagine, è necessario aggiungere due attributi: larghezza e altezza... Il valore è formattato come per qualsiasi attributo.

Dopo il segno di uguale, è necessario specificare la dimensione in pixel.

Se disponibile, chiaramente date le dimensioni illustrazioni, verrà visualizzato nella pagina come segue:

Allineare e modificare un'immagine

Come inserire foto in html centrata? Per assegnare la posizione dell'immagine sulla pagina, utilizzare allineare relativo al tag P.

Diversi valori sono consentiti per questo: centro(Centro), sinistra(bordo sinistro) e Giusto(bordo destro).

Ecco l'immagine sulla pagina, centrata e allineata a destra.

Importante! Per posizionare la foto rispetto al testo e non alla pagina, nel tag img deve essere utilizzato l'attributo align, i valori sono gli stessi dell'attributo tag p.

Dipende da valore impostato, l'immagine cambierà la sua posizione rispetto al testo.

Per inserire un'immagine nel testo, basta inserire il tag img(con tutte le inquadrature) in blocco di testo v.

Per aggiungere un bordo, usa l'attributo border con un valore numerico che indica lo spessore del bordo in pixel.

Per impostare i margini verticali e orizzontali, utilizzare vspazio e hspazio... Il loro valore numerico indica la distanza dal testo all'immagine, direttamente in pixel.

Nell'esempio, l'attributo vspazio impostato su 50 pixel.

La quantità di riempimento orizzontale indicherà la distanza alla quale il testo sarà quando scorre intorno all'immagine.

Altri due attributi utili sono: alt e titolo... Il primo set testo alternativo Immagine.

Con esso, se l'immagine per qualche motivo non viene caricata, verrà invece visualizzato il testo specificato nel valore dell'attributo.

Per provare le capacità dell'attributo, puoi spostare il file dalla directory specificata nel codice.

Il testo specificato come valore dell'attributo titolo, visualizzerà un suggerimento quando si passa il mouse direttamente sull'immagine. Nel codice, il suo design non differisce dagli altri attributi.

Dopo aver aggiornato la pagina, il risultato sarà simile a questo:

Tabella attributi tag img

Aggiungere immagini al tuo sito web o profilo sui social media è ottimo modo decorare la tua pagina. HTML (Hypertext Markup Language) è diverso grande quantità caratteristiche dello sviluppo web e il codice necessario per aggiungere immagini è abbastanza semplice.

Quindi come si inserisce un'immagine in HTML?

Carica la tua foto su un sito di hosting di immagini gratuito come Photobucket o TinyPic, che garantisce che il file caricato sia sempre disponibile. Dopo la copia, il link all'immagine apparirà direttamente sul sito ospitante. Tuttavia, se paghi per i servizi premium di un tale servizio, è meglio usare caratteristiche aggiuntive... Questo è più affidabile perché hosting gratuito le immagini a volte le immagini non si aprono a causa di un sovraccarico. Dopo aver caricato l'immagine su uno dei servizi online, apri sul tuo computer nuovo documento v editor di testo(ad esempio, in Blocco note) o vai al pannello di modifica pagina desiderata il tuo sito (dove puoi modificare il codice HTML).

Scrivere tag

Mentre continuiamo a parlare di come inserire un'immagine in HTML, inizia con il tag IMG. Dopo di ciò, è necessario aggiungere uno spazio e una barra prima del carattere di chiusura. Quindi, devi digitare la seguente combinazione -< img />... Inoltre, ci sono molti attributi disponibili, ma solo uno di essi è assolutamente necessario. Questo è l'indirizzo o l'URL della tua immagine. È specificato come segue -< img src ="URL_вашей_картинки" / >.

Testo alternativo

Successivamente, quando si tenta di inserire un'immagine in HTML, è necessario aggiungere l'attributo Alt. Questo definisce il testo alternativo nel caso in cui l'immagine non venga caricata. Questo testo è destinato anche agli utenti ipovedenti che utilizzano lettori di schermo. Se passi con il mouse sull'immagine, il testo alternativo viene visualizzato nella descrizione comando, ma questa funzione è presente solo in Internet Explorer... Per vederlo in altre applicazioni, hai bisogno di plugin speciali. Per inserire un suggerimento di questo tipo, inseriscilo oltre a Alt. (Facoltativamente puoi saltare questo passaggio). Se utilizzi questa funzione, il collegamento sarà simile a questo:

< img src ="URL_вашей_картинки" alt ="tooltip_text" title ="Descrizione comando" />

Dimensioni e parametri dell'immagine

Continuando a seguire le istruzioni su come inserire un'immagine in HTML, puoi inoltre specificare la dimensione dell'immagine utilizzando gli attributi di altezza e larghezza, indicando in pixel o in percentuale. Si prega di notare che l'immagine verrà visualizzata ridimensionando una volta caricata. Il browser utilizzerà ancora inizialmente la dimensione effettiva dell'immagine. Per questo motivo, se la tua foto è troppo grande, è meglio ridimensionarla utilizzando programmi di fotoritocco, non solo nell'url del collegamento. Ora il tuo codice potrebbe assomigliare a questo:

< img src = "URL вашей картинки" alt = "testo del tooltip" title = "Descrizione comando" height ="50%" width ="50%" />

< img src ="URL вашей картинки" alt ="testo del tooltip" title ="Descrizione comando" height ="25px" width="50px" / >

Altri attributi

Il valore per questi attributi è un valore di pixel positivo o una percentuale rispetto all'originale (1-100%). Parlando di come inserire un'immagine in HTML, puoi anche notare che può essere posizionata ovunque su una pagina web con un attributo di allineamento: in alto, in basso, al centro, a destra, a sinistra, ecc. L'attributo HSPACE viene utilizzato per inserire immagini orizzontalmente lungo la sinistra e lato destro, VSPACE - per caricare verticalmente tra la parte superiore e parte inferiore pagina e relativi ad altri contenuti. In generale, parlando di HTML: come inserire un'immagine e come aggiungere contenuto alla pagina, l'importante è non esagerare. Altrimenti, la tua risorsa sembrerà sciatta e troppo "colorata". Per visualizzare loghi o animazioni Formato GIF volere la migliore soluzione e per immagini e foto di alta qualità, il formato JPEG è più adatto.

Ciò rende possibile visualizzare il contenuto di un'altra pagina all'interno di una pagina. Per esempio:

La maggior parte delle immagini che una persona vede sui siti sono anche il contenuto di un'altra pagina. Ecco, in particolare, l'indirizzo dell'emoticon in formato .gif:

Ed ecco i modi per aggiungere un'immagine al sito, che possono essere evidenziati se guardi il codice della pagina:

HTML: tag
http://photos1.blogger.com/x/blogger2/6533/1672822190093/320/140728/plain.gif"alt =" (! LANG: smiley" height="30" width="30"> !}
CSS: proprietà e
CSS: pseudo-elementi e
HTML: tag grafica vettoriale
CSS: nessun URL

Come scoprire l'indirizzo di una foto e copiarla

Esistono diversi modi per copiare l'indirizzo dell'immagine:

1. Sposta il cursore sulla foto, clicca su tasto destro mouse, nel menu contestuale che compare, ti verrà chiesto di copiare l'URL, clicca sulla voce richiesta.
   Fig. 1 Se passi con il mouse sopra la foto e premi il tasto destro del mouse, quindi in Mozilla Firefox si aprirà un menu contestuale con tali elementi
2. Sposta il cursore sulla foto, premi il tasto destro del mouse, nel menu contestuale che appare, ti verrà chiesto di studiare le caratteristiche della foto, fai clic sulla voce richiesta (in Fig. 1, vedi la voce "Informazioni sull'immagine" ; in Internet Explorer, vedere la voce "Proprietà"), nella finestra che si apre, selezionare l'indirizzo dell'immagine,
   • premere il tasto destro del mouse, nel menu contestuale che compare, cliccare sulla voce "Copia".
   
   Fig.2 Se, in Mozilla Firefox, si passa con il mouse su una foto, si preme il tasto destro del mouse, si seleziona la voce "Informazioni immagine" nel menu contestuale apparso, si aprirà una finestra dove è possibile visualizzare un elenco delle immagini utilizzate nella pagina, il loro indirizzo, testo alternativo (contenuto nell'attributo alt), dimensioni effettive e scala utilizzate
3. Sposta il cursore sulla foto, premi il tasto destro del mouse, nel menu contestuale che appare, ti verrà chiesto di andare alla pagina dell'immagine, fare clic sulla voce richiesta (in Fig. 1, vedi la voce "Apri immagine") . Si aprirà una pagina con una sola immagine come contenuto. V a tutta altezza se è stato precedentemente ridotto con o con usando i CSS... Seleziona l'indirizzo della pagina aperta in barra degli indirizzi browser,
   • premere la combinazione di tasti tastiera Ctrl+ c.
   
   Fig. 3 Ecco come appare la pagina delle emoticon.
   Il suo URL: http://photos1.blogger.com/x/blogger2/6533/1672822190093/320/140728/plain.gif
4. Sopra dispositivi touch(smartphone, tablet) tieni il dito a lungo sulla foto senza muoverti, nel menu contestuale che appare, ti verrà chiesto di andare alla pagina dell'immagine, fare clic sulla voce richiesta (potrebbe chiamarsi "Visualizza immagine" ). Si aprirà una pagina con una sola immagine come contenuto. Lunghezza intera se precedentemente ridimensionata con o con CSS. Quindi premere a lungo sull'indirizzo nella barra degli indirizzi del browser. Dopo che i cursori sono apparsi e l'intero URL è evidenziato (se necessario, i cursori possono essere spostati alla distanza richiesta), fai clic sul pulsante "Copia" nel pannello che appare.
5. Sposta il cursore sulla foto, premi il tasto destro del mouse, nel menu contestuale che appare, ti verrà chiesto di andare alla pagina immagine di sfondo, fare clic sull'elemento richiesto. Si aprirà una pagina con una sola immagine come contenuto. Lunghezza intera se precedentemente ridimensionata con CSS. Selezionare l'indirizzo della pagina aperta nella barra degli indirizzi del browser (vedi Fig. 3),
   • premere il tasto destro del mouse, selezionare la voce "Copia" nel menu contestuale apparso.
   • premi la scorciatoia da tastiera Ctrl + C.
   
   

Come salvare un'immagine

Sposta il cursore sulla foto, premi il tasto destro del mouse, nel menu contestuale che appare, ti verrà chiesto di salvare l'immagine, fare clic sull'elemento richiesto (in Fig. 1, vedere la voce "Salva immagine con nome ... "), nella finestra che si apre, seleziona una cartella sul tuo computer, dove verrà salvato il disegno.

Se la foto è immagine di sfondo, quindi devi prima andare alla pagina delle immagini (vedi Fig. 3).

Come aggiungere un'immagine a una pagina web

Innanzitutto, l'immagine deve essere caricata dal computer al sito di hosting, in rete sociale(In contatto con, Google+ ecc.), Yandex.Disk o Google.Disk, in modo che l'immagine abbia il proprio indirizzo su Internet.

Se è presente un editor visivo, la sequenza di azioni è solitamente la seguente:

1. posiziona il cursore del mouse nel punto in cui dovrebbe apparire la foto,
2. fare clic su un'icona simile a o,
3. seleziona un file dal tuo computer,
4. se possibile, inserisci il testo alternativo (ovvero la descrizione dell'immagine).

In conclusione: l'immagine verrà inserita nella pagina del sito Web e, soprattutto, verrà caricata sul server del progetto Web. Ora avrà il suo indirizzo su Internet. E ora, nella scheda "HTML", puoi correggere il codice fornito dall'editor visivo, poiché l'editor visivo spesso aggiunge tag non necessari e le possibilità di HTML e CSS sono incomparabilmente grandi.

Se l'URL esiste già, ma da un altro sito poco noto, è comunque meglio salvare tale foto sul computer e quindi caricarla sul server del sito, se questa azione consentito dal proprietario della foto, in modo da non violare il copyright, poiché

• alcuni siti potrebbero vietare l'uso dell'URL delle immagini su altre risorse (ulteriori informazioni sul divieto di hotlinking).
• i siti hanno vita breve e dopo un po' con la cancellazione del progetto web, l'immagine sul tuo sito scomparirà, lasciando invece se stessa in caso migliore solo testo alternativo.

Altrimenti editor visivo, quindi la sequenza di azioni è solitamente la seguente:

1. creare una cartella di immagini,
2. creare un file .htaccess nella cartella delle immagini, il cui contenuto sarà # chiudi l'accesso a http: //site.ru/image/ Opzioni -Indici # chiudi l'accesso a http: //site.ru/image/.htaccess ordinare consentire, negare negare da tutti
3. carica nella cartella immagine immagine, che si chiama, diciamo, plain.gif (in futuro, tutte le immagini verranno caricate anche in questa cartella),
4. nella pagina HTML, usa un URL come http: //sayt.ru/image/plain.gif, ad esempio, http: //sayt.ru/image/plain.gif"alt =" (! LANG: smiley" height="30" width="30">!}

Ciao cari lettori del blog! In questo articolo imparerai tutto su come inserire un'immagine su pagina html ... Hai diverse immagini che vuoi inserire nella tua pagina o vuoi mettere un logo sul tuo sito web? Tutto questo è facile. Dopo aver letto questo articolo, sarai in grado di inserire immagini nelle tue pagine html senza alcuna difficoltà. Per fare questo, parleremo in dettaglio di etichetta e i suoi attributi, diamo una rapida occhiata ai formati file grafici come gif, jpeg e png, oltre a vedere le nuove funzionalità HTML5 che semplificano l'inserimento di video e audio nel tuo sito.

A causa del fatto che i dati grafici e testo htmlè impossibile combinare in un unico file, per la loro visualizzazione sul sito viene utilizzato un approccio diverso rispetto ad altri elementi delle pagine html. Prima di tutto, immagini grafiche e altri dati multimediali vengono archiviati in file separati. E per incorporarli in una pagina web, usa tag speciali che contengono collegamenti a questi file separati... In particolare, tale tag è etichetta ... Dopo aver incontrato un tale tag con un indirizzo, il browser richiede prima il file corrispondente con un'immagine, audio o video dal server Web e solo allora lo visualizza sulla pagina Web.

Tutte le immagini grafiche e, in generale, tutti i dati che sono archiviati in file separati dalla pagina web sono denominati implementato elementi della pagina.

Prima di inserire le immagini e considerare il tag in dettaglio , vale la pena imparare qualcosa sui formati grafici.

Formati di immagini grafiche.

Ce ne sono molti diversi formati grafici ma i browser ne supportano solo alcuni. Diamo un'occhiata a tre di loro.

1. Formato JPEG(Gruppo congiunto di esperti fotografici). Un formato abbastanza popolare utilizzato per la memorizzazione di immagini. Supporta colori a 24 bit e mantiene invariati tutti i mezzitoni nelle foto. Ma jpeg non supporta la trasparenza e distorce i piccoli dettagli e il testo nelle immagini. JPEG viene utilizzato principalmente per memorizzare fotografie. I file di questo formato hanno estensioni jpg, jpe, jpeg.

2. Formato GIF(Formato di interscambio grafico). Il vantaggio principale di questo formato è la possibilità di memorizzare più immagini contemporaneamente in un unico file. Questo ti permette di creare interi video animati. In secondo luogo, supporta la trasparenza. Il principale svantaggio supporta solo 256 colori, il che non va bene per la memorizzazione delle foto. Le GIF vengono utilizzate principalmente per archiviare loghi, banner, immagini con aree trasparenti e contenenti testo. I file di questo formato hanno l'estensione gif.

3. Formato PNG(Grafica di rete portatile). Questo formato è stato sviluppato in sostituzione del GIF obsoleto e anche, in una certa misura, del JPEG. Supporta la trasparenza, ma non consente l'animazione. Questo formato ha un'estensione png.

Quando si creano siti, le immagini vengono solitamente utilizzate in Formato JPEG o GIF, ma a volte viene utilizzato PNG. La cosa principale è capire in quali casi quale formato è meglio usare. In breve:

JPEG è l'ideale per memorizzare fotografie o immagini in scala di grigi che non contengono testo;

• GIF viene utilizzato principalmente per l'animazione;
• PNG è il formato per tutto il resto (icone, pulsanti, ecc.).

Inserimento di immagini in pagine html

Quindi, come si incorpora un'immagine in una pagina web? Inserire un'immagine consente un singolo etichetta ... Il browser posiziona l'immagine nel punto della pagina web in cui incontra il tag .

Incorpora codice immagine in html la pagina si presenta così:

Questo codice html posizionerà un'immagine nella pagina web, che è memorizzata nel file image.jpg, che si trova nella stessa cartella della pagina web. Come avrai notato, l'indirizzo della foto è indicato in attributo src... Quello che ti ho già detto. Quindi, l'attributo src attributo richiesto, che serve per indicare l'indirizzo del file con l'immagine. Senza l'attributo src, il tag img non ha senso.

Darò alcuni altri esempi per specificare l'indirizzo di un file con un'immagine:

- questo codice html inserirà un'immagine chiamata image.jpg nella pagina, che è memorizzata nella cartella delle immagini situata nella radice del sito web.

Nell'attributo src, puoi specificare non solo link relativi sulle immagini. Poiché le immagini sono archiviate sul Web insieme alle pagine html, ogni file immagine ha il proprio URL. Pertanto, l'URL dell'immagine può essere inserito nell'attributo src. Per esempio:

Questo codice inserirà un'immagine dal sito Web mysite.ru nella pagina. Un adpec URL viene solitamente utilizzato quando si punta a un'immagine che si trova su un altro sito. Per le immagini memorizzate sul tuo sito, è meglio utilizzare i collegamenti relativi.

Etichetta è un elemento in linea, quindi è meglio posizionarlo all'interno di un elemento di blocco, ad esempio all'interno di un tag

- paragrafo:

Facciamo pratica e incolliamo nella nostra pagina da articoli precedenti su immagine html... Creerò una cartella "immagini" accanto al file html della mia pagina e inserirò un file con un'immagine "bmw.jpg", che assomiglia a questo:

Quindi il codice html della pagina con l'immagine inserita sarà così:

Sito sulle auto.

Benvenuti nel nostro sito web per auto. Qui troverai molti articoli interessanti e utili sulle auto, sulle loro caratteristiche tecniche e caratteristiche.

Linguaggio scientifico automobile questo è:

Strada senza pista del motore meccanico veicolo con almeno 4 ruote.

Classificazione auto

Le auto sono dei seguenti tipi:

• Passeggeri;


• Carico;


• fuoristrada;


• passeggino;


• Raccogliere;


• Gli sport;


• Da corsa.

Tutti i diritti riservati. anno 2010.
Sito sulle auto.

E guardiamo il risultato della visualizzazione nel browser:

Come possiamo vedere, non c'è niente di difficile nel posizionare le immagini nelle pagine web. Successivamente, diamo un'occhiata ad alcuni altri importanti attributi dei tag. .

L'attributo alt è un fallback

Poiché i file di immagine sono archiviati separatamente dalle pagine Web, per ottenerli, il browser deve farlo richieste separate... E se ci sono molte immagini sulla pagina e la velocità della connessione di rete è bassa, allora il download? file aggiuntivi ci vorrà una quantità significativa di tempo. È anche peggio se l'immagine è stata rimossa dal server a tua insaputa.

In questi casi, la pagina Web stessa verrà caricata correttamente, verranno visualizzati solo rettangoli bianchi anziché immagini. Pertanto, al fine di informare l'utente di informazioni su quale sia l'immagine, viene applicata. Questo attributo specifica il cosiddetto testo sostitutivo, che verrà visualizzato in un rettangolo vuoto fino al caricamento dell'immagine:

E qualcosa del genere assomiglia a:

Ridimensiona l'immagine

Ci sono ancora un paio di attributi del tag img di cui dovresti essere a conoscenza. Questi sono un paio di attributi larghezza e altezza... Puoi usarli per specificare le dimensioni dell'immagine:

larghezza = "300" altezza = "200">

Entrambi gli attributi indicano la taglia in pixel... L'attributo larghezza indica al browser quanto deve essere larga l'immagine e l'attributo altezza quanto è alta. Questi due attributi possono essere applicati insieme o separatamente. Ad esempio, se specifichi solo l'attributo larghezza, il browser selezionerà automaticamente l'altezza in proporzione alla larghezza specificata e anche nel caso di utilizzo solo attributo altezza... Se non specifichi affatto questi attributi, il browser determinerà automaticamente la dimensione dell'immagine prima di visualizzarla sullo schermo. Vale solo la pena notare che specificando la dimensione delle immagini si velocizzerà leggermente il browser durante la visualizzazione della pagina.

Si tratta di inserire immagini nelle pagine per ora, poi valuteremo come inserire audio o video nel sito...

Incorporamento di video e audio utilizzando HTML 5

La nuova specifica HTML5 introduce diversi nuovi tag che rendono molto facile incorporare file multimediali. Questo vale principalmente per video e audio.

Inserire Audio HTML5 fornisce tag accoppiato L'indirizzo del file in cui è memorizzata la clip audio viene specificato utilizzando il già familiare attributo src:

Etichetta

Per impostazione predefinita, la clip audio non viene visualizzata in alcun modo nella pagina web. Ma se nel tag

Per inserire un video in una pagina web, usa un tag abbinato ... Tutto è uguale con questo tag come con il tag

Non c'è molto altro da dire sull'inserimento di immagini e contenuti multimediali nelle pagine html. spero in una domanda "Come inserire un'immagine in una pagina html?" ti ho risposto. quindi solo per riassumere:

per inserire immagini in html la pagina utilizza un singolo tag e specificare l'indirizzo del file con l'immagine nell'attributo src: ;

• usando attributo alt etichetta puoi impostare il testo sostitutivo nel caso in cui l'immagine non venga caricata;
• usando gli attributi larghezza e altezza puoi impostare la dimensione dell'immagine sulla pagina web;
• ci sono tag accoppiati per inserire audio e video in html5

Se qualcosa non è chiaro, chiedi nei commenti e non dimenticare di iscriverti agli aggiornamenti sul mio blog. Ci vediamo nei prossimi post!

Le immagini sono forse quelle che danno forma al nostro idea generale oh rete mondiale... D'accordo che informazioni grafiche una persona ricorda in generale molto meglio del testo. Pertanto, le immagini sono una parte importante di qualsiasi sito e pagina web. E quindi voglio dirti come inserire un'immagine in html.

Inserimento di un'immagine in html utilizzando un tag

Probabilmente sai che tutti i comandi in html vengono eseguiti utilizzando i tag. Quindi hanno inventato il loro tag per le immagini - ... È singolo, cioè non ha una parte coprente.

Il più importante l'attributo img tag è src (source) - il percorso dell'immagine. In esso, annoti l'indirizzo in cui si trova l'immagine. Può essere scritto come assoluto ( sito / immagini / immagini2 / immagine.jpg) o come parente ( immagini / immagini2 / immagine.jpg).

Entrambi questi percorsi portano allo stesso file image.jpg che si trova nella cartella image2. Questo, a sua volta, si trova nella directory delle immagini e quello - nella cartella principale. Se scrivi tutto è relativo, quando cambi il nome di dominio per il tuo sito, tutto rimarrà funzionante. Per esempio, editor di wordpress per default inserti indirizzi assoluti... Ma personalmente, non ho intenzione di cambiare il dominio e mi si addice.

Attributi aggiuntivi e stile tramite css

Quindi, divagando dall'argomento: per visualizzare un'immagine, è sufficiente che specifichi l'attributo src, ma ci sono molti altri attributi per il suo design.

• larghezza e altezza - larghezza e altezza dell'immagine. Può essere impostato negli attributi corrispondenti nel tag img
• allinea - allineamento dell'immagine rispetto al testo. Allineato a sinistra per impostazione predefinita. Puoi anche mettere a destra e al centro (a destra, al centro)
• alt - testo alternativo che verrà visualizzato se l'utente ha disabilitato la visualizzazione delle immagini nel browser. È utile compilarlo
• il titolo è più o meno lo stesso. Una sorta di descrizione dell'immagine, che verrà visualizzata quando ci passi sopra con il mouse
• vspace e hspace - rientro verticale e orizzontale dell'immagine dal resto del contenuto. Attenzione! Gli attributi sono già deprecati ed è meglio impostare questi rientri tramite il foglio di stile.
• class - una classe di stile che si lega a un'immagine e vi applica alcuni stili

Inserisci un'immagine così carina. Qui abbiamo riattaccato la classe di anteprima e ora con css attraverso di essa possiamo fare riferimento ad essa e scrivere qualsiasi stile. Ad esempio, tale:

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

riassumerò

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

E infine, idealmente, tutto questo dovrebbe essere scritto tramite CSS. Cioè, non impostare le dimensioni negli attributi, ma appendere una classe di stile aggiuntiva sull'immagine, che determinerà le dimensioni. Stessa cosa con l'allineamento, che in css può essere fatto con proprietà di allineamento del testo così come galleggianti galleggianti.