Per creare pagine Web e persino interi siti comeÈ noto che viene utilizzato uno speciale linguaggio di markup HTML (Hypertext Markup Language), ma senza fotografie e varie immagini ogni sito sarebbe semplicemente strutturato e testo noioso. Ecco perché viene utilizzato un codice speciale per aggiungere immagini al sito, che è estremamente facile da usare e consente di inserire un'immagine in HTML in un punto specifico della pagina o usarla come sfondo.
Per scrivere il codice, devi deciderein quale programma farlo. Ora ce ne sono moltissimi, uno dei più famosi è NotePad ++. Ha una serie di funzioni che sono molto utili durante la scrittura di codice, consente di identificare errori e non confondersi nei tag. Tuttavia, se non si ha la possibilità di ricorrere a programmi specializzati, è possibile utilizzare un semplice blocco note, il codice non cambierà.
Avendo deciso un programma per scrivere codice,devi capire cosa scrivere in essa, come inserire un'immagine in HTML nel blocco note o in qualsiasi altro programma. Dovresti iniziare con il tag . Questo tag annuncia l'immagine nel documento HTML, è singolo e non richiede la chiusura.
Abbiamo dichiarato nel codice che useremoimmagine, ma non l'abbiamo ancora specificata. Quindi, come inserire un'immagine in HTML? Per fare ciò, abbiamo bisogno dell'attributo src, che viene utilizzato con il nostro tag. Questo attributo imposta la posizione della nostra immagine, indipendentemente dal fatto che sia su qualsiasi sito o sul nostro computer.
Il tag ha un altro attributo: alt.Usalo in modo che la descrizione dell'immagine sia visibile nel browser se, per qualsiasi motivo, l'immagine stessa non può essere caricata. La sua presenza è anche desiderabile in modo che le persone ipovedenti possano sapere quale tipo di immagine è presente sul sito, perché il testo nel valore di questo attributo è espresso dagli screen reader. Il codice risultante con gli attributi src e alt sarebbe simile al seguente:
Tra le altre cose, il tag ne ha un altroattributo titolo. Grazie a questo attributo, quando passi con il mouse sopra un'immagine, un testo alternativo verrà visualizzato in una descrizione comandi. Tuttavia, questa funzione è supportata solo da Internet Explorer, pertanto tali prompt verranno visualizzati in altri browser, saranno richiesti plug-in speciali. Le descrizioni comandi vengono utilizzate insieme all'attributo alt, sono facoltative, ma quando vengono utilizzate, il codice sarà simile al seguente:
Con come inserire un'immagine nel testo con HTML, noicapito. E se volessimo rendere l'immagine un po 'più grande o più piccola? Per questo, HTML fornisce attributi speciali: larghezza (larghezza) e altezza (altezza). I valori di questi attributi possono essere in percentuale o in pixel. Se imposti la larghezza in pixel e l'altezza in percentuale, il codice assumerà la seguente forma:
Se si specifica solo uno degli attributi di dimensione, quindiil secondo verrà calcolato automaticamente, ma in modo da mantenere le proporzioni dell'immagine. Quando si specificano entrambi i parametri, è importante ricordare che se le dimensioni superano l'originale, l'immagine si allungherà e, se le dimensioni sono più piccole, si ridurrà.
E se volessimo usare l'immagine non presentetesto e inserire un'immagine sullo sfondo in HTML, come si fa? Per fare ciò, abbiamo bisogno del tag
, senza il quale nessun documento HTML può fare. Comprende tutti i contenuti visibili del documento e i suoi attributi possono specificare le dimensioni, il colore del carattere, incluso lo sfondo. Inserire un'immagine in HTML come immagine di sfondo è molto semplice, per questo avremo bisogno di usare l'attributo di sfondo. Questo codice sarà simile al seguente:
...
Quando si modella lo sfondo della pagina Web è meglioutilizzare tali immagini con le quali è possibile ottenere interessanti effetti visivi, ma che non interferirebbero con la normale percezione del testo. Tuttavia, tieni presente che potrebbe essere necessario modificare le dimensioni e il colore del carattere per semplificarne la lettura.
A volte è necessario che l'immagine sia accantotesto che lo aggirerebbe in un modo o nell'altro. Ma se inserisci l'immagine appena all'interno della linea, quindi graficamente sembrerà brutta, il testo verrà rotto in modo impreciso. Quindi, come inserire un'immagine in HTML in modo che l'immagine si adatti organicamente al design della pagina? Per fare ciò, abbiamo bisogno dell'attributo align del tag . Questo attributo può assumere due valori: sinistra e destra.
Quando si utilizza il valore sinistro, l'immagine verrà posizionata a sinistra del testo e quando si utilizza l'attributo destro, rispettivamente, a destra. Questo codice sarà simile al seguente:
o
Se dobbiamo posizionare il testo tra due immagini, il codice sarà simile al seguente:
E dopo questo codice verrà posizionato il testo che deve essere racchiuso tra queste due immagini.
Le immagini ti consentono di diversificare il sito, creareè più luminoso, più attraente e più memorabile, ma non dimenticare che troppe immagini rallentano il caricamento del sito e distraggono il testo.
