• 536

  • 0

Vota

7

Link e immagini HTML

Segnalibro

In questo articolo, ti parlerò dell'aggiunta di immagini e collegamenti alla tua pagina HTML.
Penso che non hai mai incontrato una singola pagina su Internet che non avesse una singola immagine o collegamento. Pertanto, il materiale in questo articolo è molto importante, allo stesso tempo è molto semplice, quindi anche uno scolaro può dominarlo.

La prima cosa che faremo è aggiungere un link HTML alla nostra pagina.

Per fare ciò, scrivi il seguente codice nel tag <body>:


<a target = "_self" href = "index.html" title = "Link"> Link a questa pagina </a>



Il tag HTML <a> indica l'inizio di un collegamento. Questo tag ha vari attributi. Cominciamo con il "target".

L'attributo "target" può assumere tre valori (ce ne sono leggermente più, ma sono usati raramente, quindi non li menzionerò nemmeno): "_self", "_new", "_blank". In generale, il risultato di questi attributi in diversi browser avviene spesso in modi diversi, quindi dirò cosa significa ogni valore dell'attributo "target" solo in teoria e non in pratica.

Il valore "_self" indica che la pagina si apre nella stessa finestra.

Il valore "_new" indica che la pagina si aprirà in una nuova finestra (alcuni browser non aprono una nuova finestra, ma creano una nuova scheda nel browser).

Il valore "_blank" significa che la pagina verrà aperta in una nuova scheda.

Consiglio vivamente di provare tutti i valori di questo attributo in diversi browser per capire finalmente cosa significa ciascuno di essi.

Il seguente attributo href indica il percorso della pagina. Dato che non abbiamo ancora nulla a cui collegarci, dobbiamo fare riferimento alla stessa pagina. Per quanto riguarda la forma di registrazione, ci sono percorsi assoluti e relativi.

Il percorso assoluto specifica il percorso completo del file, ad esempio, in questo modo: "http://mysite.ru/images/image1.gif". Un percorso relativo indica il percorso relativo alla directory in cui si trova il file corrente. Ad esempio, il nostro file "index.html" si trova nella radice del server e scriviamo: "href = 'images / image1.gif'". Ciò equivale a scrivere: "http://mysite.ru/images/image1.gif". Questo per quanto riguarda i percorsi assoluti e relativi.

Spero che con l'attributo "href" tutto sia diventato chiaro. Certo, puoi collegarti non solo alle pagine HTML, ma anche a qualsiasi file, sia che si tratti di immagini, sia che si tratti di film, che sia musica, sia che si tratti di archivi, sia che si tratti di qualcos'altro.

L'ultimo attributo è "titolo". Qui è tutto molto semplice. Questo attributo imposta il testo che sarà visibile quando passi il mouse sopra il link.

Gli attributi del tag <a> sono terminati. Per quanto riguarda ciò che è all'interno del tag, allora qui c'è solo la tua immaginazione. Nella maggior parte dei casi, questo è un testo semplice, come ad esempio con noi. Molto spesso creano un'immagine all'interno del tag <a>, quindi questo link avrà la forma di un'immagine.

Il tag </a> segna la fine del collegamento ipertestuale.

Puoi anche impostare il colore dei link. Ancora una volta, funzionerà o meno - dipende dal browser. Tuttavia, lascia che ti presenti. Aggiungi tre attributi al tag <body>: "link", "vlink" e "alink". Ognuno di questi tre attributi può assumere un valore di colore. L'attributo link indica il colore del link non visitato. Di conseguenza, "vlink" indica il colore del collegamento visitato. Infine, l'attributo "alink" indica il colore del collegamento al momento del clic diretto. Come puoi vedere, non c'è nulla di complicato neanche qui.

Ora aggiungi le immagini, ma prima di farlo. Immediatamente dopo aver aggiunto il collegamento HTML, inserisci il tag "<br>". Anche questo tag è singolo e significa una nuova riga. Scriveremo il seguente codice nel tag <body>:


<img src = "image1.gif" alt = "Image" width = "100" height = "100">



Il tag <img> significa che vogliamo aggiungere un'immagine qui. Questo tag, come puoi vedere, è singolo, cioè non ha un tag di chiusura. Gli attributi dei tag sono anche molto, molto semplici.

L'attributo src indica il percorso dell'immagine. Ancora una volta, è possibile specificare sia il percorso assoluto che il percorso relativo, a seconda della situazione.

L'attributo "alt" indica il testo che descrive l'immagine. Lo stesso testo verrà visualizzato se per qualche motivo l'immagine non viene trovata o l'utente ha disabilitato la visualizzazione delle immagini nel browser. È molto desiderabile impostare questo attributo, poiché aiuta a ottimizzare il sito (tuttavia, si tratta già di una promozione del sito e non della sua creazione).

Gli attributi "larghezza" e "altezza" indicano rispettivamente la larghezza e l'altezza dell'immagine. Se non li specifichi, l'immagine avrà le stesse dimensioni della fonte.

Ti consiglio di esercitarti a visualizzare varie immagini, basta posizionare i file immagine insieme a "index.html". Ad esempio, creare la cartella "images" nella stessa directory e posizionare lì le immagini. E nell'attributo "src" scrivi il valore "images / Nome file immagine".

Pertanto, il codice della pagina dovrebbe assomigliare a questo:


<Html>
<Head>
</ Head>
<body text = "green" bgcolor = "yellow" link = "green" vlink = "red" alink = "blue">
  <h1> Titolo livello 1 </h1>
  <a target = "_new" href = "index.html" title = "Link"> Link a questa pagina </a>
  <br>
  <img src = "Water Lilies.jpg" alt = "Image" larghezza = "100" height = "100">
</ Body>
</ Html>



Questa è tutta scienza. Come puoi vedere, non c'è nulla di complicato, come tutto nella conoscenza di base dell'HTML e nella conoscenza di base della creazione di un sito.

  • Creato il:
  • 2020-04-08 13:21:15
  • Visualizzazioni
  • 536

  • Comenti
  • 0

asdsadasd

Recensioni mancante

La pubblicazione della recensione aviene dopo il controllo del administratore.



Condivide articolo


Altri articoli ...