Come Incorporare Un'immagine Su Un Sito Web

Sommario:

Come Incorporare Un'immagine Su Un Sito Web
Come Incorporare Un'immagine Su Un Sito Web

Video: Come Incorporare Un'immagine Su Un Sito Web

Video: Come Incorporare Un'immagine Su Un Sito Web
Video: Guida HTML5 - 1.4 - Inserire immagini in HTML | FoglioDiStile.com 2024, Maggio
Anonim

Tutto ciò che il visitatore vede sulle pagine del sito viene visualizzato dal browser sulla base di dettagliate istruzioni inviategli dal server. Queste istruzioni sono chiamate codice html della pagina e sono costituite da "tag" separati che descrivono il tipo, l'aspetto e la posizione di ciascun elemento singolarmente. Per inserire qualsiasi nuovo elemento (ad esempio un'immagine) in una pagina, è necessario aggiungere un'istruzione corrispondente, un tag, al codice sorgente. Considera il modo più semplice per farlo.

Inserimento di un'immagine in una pagina
Inserimento di un'immagine in una pagina

Istruzioni

Passo 1

Se utilizzi qualsiasi tipo di sistema di gestione dei contenuti, è molto probabile che includa un editor di pagine. Innanzitutto, è necessario aprire la pagina desiderata in questo editor. Ulteriori - le opzioni sono possibili. Nel migliore dei casi, l'editor di pagina avrà una "modalità visiva", in altre parole - "modalità WYSIWYG" (ciò che vedi è ciò che ottieni - "ciò che vedi è ciò che ottieni"). In questa modalità, non dovrai assolutamente occuparti del codice html originale! La pagina nell'editor avrà lo stesso aspetto del sito, sarà sufficiente colpire il mouse nel punto desiderato e premere il pulsante "inserisci immagine" sul pannello dell'editor.

Passo 2

Di conseguenza, si aprirà una finestra di dialogo in cui è necessario selezionare l'immagine desiderata. Se non l'hai ancora caricato, c'è anche un pulsante per selezionare un'immagine sul tuo computer e caricarla sul server. Inoltre, in questa finestra di dialogo è possibile impostare il colore e la larghezza della cornice intorno all'immagine, la distanza e il colore del riempimento tra la cornice e l'immagine, il testo per il suggerimento. Non è necessario specificare qui le dimensioni, ma per velocizzare il caricamento della pagina e per evitare distorsioni del design, è comunque meglio farlo. Quando tutti i campi richiesti della finestra di dialogo sono stati compilati, fare clic su "OK" e quindi salvare la pagina modificata.

Finestra di dialogo Inserisci immagine
Finestra di dialogo Inserisci immagine

Passaggio 3

A causa del fatto che non esiste un unico standard per i sistemi di controllo, la procedura per l'inserimento di un'immagine nella modalità visiva del tuo sistema potrebbe differire leggermente, ma il principio sarà lo stesso. Per lo stesso motivo, la modalità WYSIWYG potrebbe non apparire nel sistema di gestione del tuo sito. Quindi devi ancora modificare il codice sorgente della pagina in HTML (HyperText Markup Language - "hypertext markup language"). Dovrai inserire un tag nel posto giusto nel codice che dice al browser di mostrare l'immagine qui. Nella sua forma più semplice, dovrebbe apparire così: Ecco l'"indirizzo relativo" dell'immagine - a questo indirizzo il browser dovrebbe contattare il server per ottenere il file immagine da esso. Se l'indirizzo è relativo, il browser presumerà che il file si trovi nella stessa cartella del server della pagina stessa (o in una sottocartella). Ma, per non sbagliare, è meglio specificare "l'indirizzo assoluto" - ad esempio, in questo modo: Naturalmente, affinché il server trovi e invii l'immagine al browser, dovrebbe essere caricata nell'indirizzo specificato Posizione. Il modo più semplice per farlo è tramite il file manager, che si trova in ogni sistema di gestione dei contenuti, nonché nel pannello di controllo della tua società di hosting. Puoi anche farlo usando il protocollo FTP (File Transfer Protocol - "file transfer protocol"), usando un programma speciale - FTP-client. Ce ne sono molti, sia a pagamento che gratuiti, ad esempio Cute FTP, FlashFXP, WS FTP, ecc. Ma, ovviamente, l'installazione, il mastering e la configurazione del programma richiederanno tempo, quindi un file manager per scaricare tutto ciò di cui hai bisogno attraverso un browser è un'opzione più semplice.

Passaggio 4

Oltre all'indirizzo nel tag html dell'immagine, puoi specificare ulteriori informazioni - "attributi" del tag. Ad esempio, l'attributo alt="Immagine" contiene il testo per il suggerimento che appare quando si passa il cursore del mouse sull'immagine: Può essere sostituito con l'attributo - titolo: - La dimensione del rettangolo in cui il browser deve visualizza l'immagine è impostata dagli attributi larghezza e altezza: - L'attributo bordo specifica la larghezza del bordo intorno all'immagine (in pixel): Se l'immagine è collegata, il browser disegnerà un bordo blu attorno ad essa. Per eliminarlo, imposta il valore del bordo a zero: - Gli altri due attributi contengono informazioni sulla quantità di rientro dell'immagine da elementi adiacenti (da righe di testo, altre immagini, ecc.) - hspace imposta la dimensione del rientro orizzontalmente (sinistra e destra), vspace - verticalmente (in basso e in alto):

Consigliato: