Uno dei modi migliori per attrarre l'interesse di e mantenere l'attenzione su un sito Web è quello di includere elementi visivamente accattivanti come colore e immagini. Poche persone vogliono leggere una pagina Web che si compone di solo testo; immagini forniscono un riferimento visivo che lega il contenuto scritto con una rappresentazione artistica di scopo della pagina. Immagini sono in genere inclusi come parte del codice HTML della pagina Web e sono inclusi e in stile con attributi inclusi con il tag HTML "< img >".
Istruzioni
1
Scegli un'immagine locale o scaricare uno, assicurandosi che sia royalty free e legale da utilizzare. L'immagine deve essere in formato JPEG, che l'estensione di file JPG o JPEG. Prendere nota della larghezza dell'immagine e l'altezza, ad esempio, 737 pixel (W) x 1050 pixel (H).
2
Salvare l'immagine selezionata nella posizione sul server Web o sul disco rigido, che in genere contiene pagine Web. Inserire l'immagine nella stessa posizione come la pagina assicura che la pagina sarà in grado di accedere al file di immagine durante il caricamento.
3
Creare un nuovo file denominato "postPicture.html" e aggiungere alcuni codice HTML di base che include un tag "< html >", un tag "< head >", un tag "< / head >", un "< body >" tag e un tag "< / body >" e un "< / html >" tag.
< html >
< testa >< / testa >
< corpo >< / corpo >
< / html >
4
Aggiungere un tag di immagine ("< img >") tra il file "< body >" e "< / body >" tag. Impostare l'attributo "src" del tag "< img >" a "myimage. jpg", o qualunque è il nome del file di immagine.
< html >
< testa >< / testa >
< corpo >
< img attributo al tag "< img >" e impostare testo dell'attributo "Nome dell'elemento grafico". Se l'immagine non viene caricato correttamente, verrà visualizzato il testo "alt".
< html >
< testa >< / testa >
< corpo >
< img alt = "Nome dell'elemento grafico" >
< / body >
< / html >
6
Aggiungere un attributo di "larghezza" e un "altezza" attributo al tag "< img >". Impostare l'attributo di "larghezza" larghezza di MyImage. jpg e l'attributo "height" all'altezza di MyImage. jpg (ad esempio, 737px di 1050px). Salvare e chiudere postPicture.html.
< html >
< testa >< / testa >
< corpo >
< img alt = "Nome dell'elemento grafico" larghezza = "737px" height = "1050px" >
< / body >
< / html >
7
PostPicture.html aperto in un browser Web. Verificare che l'immagine "myimage. jpg" viene visualizzato con l'altezza e la larghezza appropriata e ha il corretto testo alt.
Consigli & Avvertenze
- L'integrazione di immagini anche in pagine Web esistenti è uno dei più importanti e spesso, uno dei più lunghi, gli aspetti della progettazione di pagine Web. Ci sono molti siti Web disponibili per aiutare con questa abilità, così come molti tag HTML per sostenere lo sviluppo di progettazione della pagina. Vedere la sezione risorse per dettagli e tutorial su questi tag.
- Il tag "< img >" può essere stile utilizzando fogli di stile CSS. Gli stili che possono essere modificati utilizzando i CSS includono altezza, larghezza, bordo e posizione dell'immagine nella pagina web.
- Il tag "< img >" HTML è un singleton. Chiudere il tag con una barra "/" per rendere la pagina Web XHTML compatibile.
- Immagini in pagine Web dovrebbero sempre aggiungere qualcosa alla pagina Web. Se un'immagine non fornire informazioni o migliorare la pagina, è necessario considerare che non dovrebbe essere inclusa.
- Il tag "< img >" può essere inclusi in altri tag HTML, come "centro di < >" o "< div >" tag.
- Immagini sulle pagine Web verranno visualizzate solo se il percorso indicato nell'attributo "src" sia corretto. Se un'immagine non viene caricato correttamente, questo è in genere il primo attributo da controllare.
- Mai utilizzare un elemento grafico in una pagina Web che provoca una violazione del copyright. O pagare per il diritto di utilizzare l'immagine o creare e utilizzare la grafica originale.