Fondamenti HTML - Visualizzazione di immagini

• Aprile 19, 2024

Una volta che il testo del tuo sito web è stato pubblicato e formattato a tuo piacimento, è il momento di ravvivare la pagina con alcune immagini. Non solo le immagini possono aggiungere colore e vita alle tue pagine, ma puoi anche usarle per generare effetti di testo che sarebbero difficili o impossibili da fare con il testo e la formattazione regolari. Ad esempio, le tue scelte di carattere saranno in genere limitate al piccolo numero di caratteri che puoi essere sicuro che siano installati sui computer dei visitatori, poiché se non hanno il carattere installato non possono vederlo sul tuo sito! Ogni volta che pubblichi un testo in un carattere non disponibile, i computer dei visitatori lo renderanno nel tipo di carattere disponibile più vicino allo stile, che spesso può rovinare il caos nel design del tuo sito web.

D'altra parte, se usi un programma di modifica delle immagini per catturare il testo in un carattere elaborato e pubblicarlo come GIF o JPEG sul tuo sito, qualsiasi visitatore lo vedrà esattamente come previsto, poiché ora è un'immagine del testo piuttosto che testo stesso. Questo può liberarti dall'uso di caratteri fantasiosi nelle intestazioni e raggrupparli in modi insoliti.

Il tag di base utilizzato per visualizzare le immagini è il seguente:



Il codice sopra funzionerà perfettamente in HTML. Se stai usando XHTML o vuoi essere sicuro che il tuo sito sia pronto per XHTML, dovresti aggiungere una barra per chiudere il tag, dal momento che in XHTML non puoi usare tag aperti:



'Src' è l'abbreviazione di source e lo userai per specificare il percorso del file alla tua immagine - in altre parole, per dire al tuo browser dove è possibile trovare l'immagine sul tuo sito. Se mantieni le tue immagini nella stessa cartella delle tue pagine web, non è necessario elencare la cartella nel testo 'src', puoi semplicemente digitare il nome del file immagine.

Dopo aver specificato la fonte dell'immagine, è possibile migliorare questo framework di base con vari attributi opzionali per ottenere il massimo dalle immagini. Un attributo che dovresti quasi sempre usare è l'attributo 'alt'. Ciò consente di specificare il testo che il browser deve visualizzare se non è in grado di mostrare l'immagine per qualche motivo. Il testo "alt" è preparato come segue:



Un altro utile set di attributi sono i tag 'width' e 'height'. Questi consentono di visualizzare immagini di dimensioni diverse rispetto alle dimensioni effettive dell'immagine. Puoi usarli per modificare l'immagine in modo che si adatti perfettamente al design complessivo della pagina. Tuttavia, è generalmente preferibile modificare le dimensioni effettive dell'immagine utilizzando i programmi di modifica delle immagini e quindi pubblicare l'immagine online, per due motivi. In primo luogo, il software di modifica delle immagini ti darà quasi sempre un risultato migliore rispetto all'ottimizzazione manuale delle dimensioni. In secondo luogo, la modifica dei tag "larghezza" e "altezza" non modifica la dimensione del file dell'immagine effettiva, quindi se si dispone di un'immagine enorme che si visualizza come anteprima, l'immagine impiegherà altrettanto tempo a caricarsi e si mastica esattamente come molta larghezza di banda come se l'avessi visualizzata a grandezza naturale.

Quando si specifica la dimensione di un'immagine è possibile elencare l'altezza, la larghezza o entrambi. Le dimensioni sono specificate dal pixel come puoi vedere di seguito:



Puoi anche "allineare" le tue immagini per farle funzionare in modo uniforme con il flusso del testo. Se si sceglie l'allineamento a sinistra, il testo inizierà a destra dell'immagine. Se si sceglie l'allineamento a destra, l'immagine verrà visualizzata sul lato destro della pagina e il testo verrà visualizzato sul lato sinistro dell'immagine per poi passare a una nuova riga.

L'allineamento dell'immagine è impostato come segue:



Puoi anche impostare l'allineamento su "in alto", "in basso" o "al centro" per allineare l'immagine con la parte superiore o inferiore della riga di testo. Se non specifichi l'allineamento, l'impostazione predefinita sarà "in basso".

Come nota a margine, puoi includere gli attributi dell'immagine (src, align, alt, ecc.) In qualsiasi ordine all'interno dei tag immagine. La mia preferenza personale è di elencare prima l'attributo 'src', poiché è l'attributo più basilare e deve essere incluso in ogni tag di immagine, ma puoi usare qualunque sequenza ti sembri più naturale.

Istruzioni Video: Javascript - 12 - Slider di immagini (Aprile 2024).