Ciao, oggi parleremo di collegamenti ipertestuali, o collegamenti,
come sono più comunemente chiamati.
E come puoi usarli per collegare il tuo documento ad altri là fuori.
Ora, i collegamenti sono davvero ciò che rende il web un web.
E 'tutta questa idea che diversi collegamenti costruiti insieme creano questo tipo di
conoscenza che i motori di ricerca o voi stessi
possono ottenere andando di pagina in pagina, e con materiale speriamo correlato.
Quindi, entriamo subito in come crei un link sulla tua pagina.
I collegamenti sono chiamati link di ancoraggio ed è lì che otteniamo il a per nel tag a.
Quando usi un tag di ancoraggio,
il tag a che ti servirà per assicurarti di avere due parti diverse.
Hai bisogno di un riferimento ipertestuale e hai bisogno di contenuti.
Quindi il riferimento iper è solo il riferimento alla posizione
del nuovo contenuto.
Quindi in questo caso ho usato http://www.umich.edu.
Questo dice a un browser,
se qualcuno fa clic su questo link questo è dove voglio richiedere la nuova pagina.
Dobbiamo anche avere dei contenuti.
Il contenuto è ciò che chiamiamo la parte cliccabile.
In questo caso, è un messaggio.
Vorrei in realtà fare clic su un testo sottolineato che dice, Università del Michigan.
Ma in alcuni casi, potrebbe invece essere un'immagine.
Quindi quali tipi di link possiamo avere?
Alcuni dei più comuni sono chiamati collegamenti assoluti.
Abbiamo anche collegamenti relativi.
Collegamenti interni
e collegamenti grafici e vi mostrerò esempi di ognuno di questi.
Con un riferimento assoluto nella sezione a href abbiamo bisogno di inserire un url completamente formato.
È necessario avere http o https l'indirizzo e
qualsiasi tipo di nome di documento aggiuntivo che si desidera.
Quindi, se ti ricordi che ci sono tre parti per URL,
hai il protocollo, l'host e il documento.
Devi includere tutti quelli se hai un riferimento assoluto, giusto?
Tutto il resto è ancora più o meno lo stesso.
Per un riferimento relativo, cambiamo leggermente ciò che entra nell'href.
Invece di collegarsi a una
pagina web esterna o addirittura interna, inseriremo solo, in questo caso, il nome del file.
Quindi in questo caso andremo a collegare a page2.html.
Potresti ottenere un po 'più approfondito di quello,
dove puoi includere anche una sorta di nome di cartella.
Quindi in questo caso andremmo al file chiamato page2.html ma
è in una cartella diversa chiamata docs il terzo
modo in cui possiamo usare un riferimento relativo è quello che chiamiamo usare il tag ID.
Quindi, quando hai href uguale a sterlina hash o cronologia, stiamo
dicendo che c'è un'altra posizione all'interno dello stesso file e si chiama cronologia.
Quindi, collegamenti assoluti contro relativi.
Quando utilizzeresti i collegamenti assoluti rispetto a quando utilizzeresti i collegamenti relativi?
Con collegamenti assoluti, stai fondamentalmente dicendo, non sono responsabile di questa pagina,
qualcun altro lo è.
Quindi, se stai collegando alla pagina di qualcun altro,
usa assolutamente il link assoluto con il riferimento completo lì dentro.
Per relativo è quando si sta sviluppando il proprio sito.
Ed è davvero utile usare collegamenti relativi invece
che assoluti, quindi se sposti la pagina su un server diverso
o la sposti in una cartella diversa, non devi rinominare tutto.
E così questi sono alcuni dei vantaggi dell'utilizzo di collegamenti locali,
è solo l'idea che non è necessario aggiornare tanto.
Ora, una delle cose che devi assicurarti di non fare mai
è avere un link che includa una sorta di struttura di file, lo chiameremo.
Quindi controlla i tuoi link.
Assicurarsi che non dice mai, c:Page o myDocumentsPage o
qualsiasi cosa che è molto specifico per il computer.
Il motivo per cui non vuoi farlo e'.
Se metti la tua pagina sul web.
Se hai finito lo hai messo su un server o un hosting e
vuoi che altre persone facciano clic.
Beh, non ha senso che siano in grado di accedere alle pagine che si trovano sul
tuo computer.
Quindi non avere mai un riferimento che includa qualcosa di locale alla tua macchina.
Tutto bene? Una delle altre cose che puoi fare è
usare le immagini come link.
Quindi il componente cliccabile non deve essere testo.
L' hai visto molto.
Può essere icone, immagini.
cose diverse lungo quella linea.
In questo caso, sono entrato e uso il normale riferimento H e
quello che stiamo cambiando ora, non è il riferimento h, ma il
contenuto che va tra il tag di apertura e di chiusura.
e sono andato avanti e ho messo in un'immagine invece.
Assicurati di utilizzare il testo alternativo per accompagnare l'immagine.
E un altro caso ho fatto qualcosa di molto simile,
l'unica differenza è che invece di usare un riferimento locale proprio qui per
l'immagine, ho usato un riferimento assoluto.
Ho inserito l'intero URL.
Parliamo quindi di problemi di usabilità e di accessibilità.
Se hai intenzione di utilizzare un componente cliccabile,
vuoi assicurarti che abbia un nome informativo.
C' è un software là fuori che può elencare tutti i link all'interno di una pagina per
le persone che sono alla ricerca di cose, che non possono usare tipiche.
mezzi tipici di accesso alla pagina.
Non è affatto utile per loro se tutti i link sono etichettati, clicca qui, clicca qui,
clicca qui, clicca qui, giusto?
Vuoi dargli una specie di nome informativo.
Vuoi anche assicurarti che se stai usando un'immagine per
la parte cliccabile del tuo link.
L' immagine deve avere una sorta di testo alternativo o
altre informazioni a disposizione di coloro che non possono vedere l'immagine.
Quindi, lascia che ti mostri qualche esempio codificato di questi tipi di link.
Tutto bene?
Come puoi vedere qui, ho un riferimento a riferimenti assoluti,
riferimenti relativi, immagini come collegamenti e quindi anche alcuni collegamenti incorporati.
Quindi, se dovessi fare clic su Washtenaw Dairy o Rosie's Coffee Bar and Bakery, o
Dexter's Bakery ecc., in realtà mi porterebbe alle loro pagine.
Davanti indietro.
Uno dei trucchi che voglio sottolineare mentre sto facendo questo è,
mentre passo il mouse su ciascuno di questi link, se guardi la
parte inferiore del mio browser, e non posso davvero mostrare allo stesso tempo, ma
come lo evidenzi, ti mostra quale URL stai andando a.
E penso che questo sia molto prezioso per la
gente da sapere, perché se mai stai passando sopra un link, e
le informazioni che vedi in fondo alla pagina non corrispondono a quello che hai detto.
Quindi riferimenti assoluti ti portano via dal tuo sito.
I riferimenti relativi possono portarti a qualcosa che si trova all'interno della tua cartella.
Quindi proprio qui ho un'immagine di alcune ciambelle, e sono andato avanti e
sono nella mia cartella nel mio fascicolo.
Quindi sono stato in grado di collegarmi a loro solo usando il nome dell'immagine.
Tutto bene?
Possiamo anche usare le immagini come link.
Invece di scrivere ciambelle dal negozio Squire, sono andato avanti e
fatto in modo che si può fare clic sull'immagine per ottenere la vista più grande.
Quest' ultima idea di collegamenti incorporati è un po 'interessante.
Quindi lascia che ti porti al codice solo per un secondo e te lo mostri.
Scrivi qui,
ho qualcosa chiamato riferimenti relativi con un ID uguale a relativo.
Ho collegamenti incorporati con un ID che dice incorporato e
quassù, all'inizio puoi vedere che ho div id = «assoluto».
Con i link incorporati, posso fare clic su uno di questi e navigare all'interno della stessa pagina.
Quindi non andro' a un'altra pagina.
Non apriro' un nuovo conto.
Invece saltero' in posti diversi all'interno della pagina.
Così sono andato in assoluto.
Sono andato a relativo ora se provo a fare riferimenti incorporati
, non sembra che si sia spostato ma lo ha fatto davvero.
E' solo che siamo gia' li'.
Ok, quindi e' cosi' che funzionano questi collegamenti incorporati o interni, giusto?
Ora se in qualsiasi momento ti confondi su come funziona il codice.
Voglio solo ricordarti che possono sempre andare a vedere.
Sviluppatore e vista sorgente per avere un'idea migliore
di come le persone stanno creando le loro pagine e i loro link.
Prossimo, parliamo di obiettivi, va bene?
Anche le ancore possono assumere un attributo target diverso.
Abbiamo la fonte, aggiungiamo ancora.
Quindi siamo il bersaglio.
Quindi potresti avere un obiettivo uguale a te stesso.
Questa è una specie di azione predefinita.
Succedera' se non metti niente.
Se non includi nemmeno target, e ciò che significa è quando fai clic su un link,
apri nella stessa scheda o finestra che stai guardando in questo momento.
Se metti il bersaglio uguale a vuoto.
Si sta andando a lasciare la pagina corrente in cui si trova esattamente la stessa, e
aprire una nuova scheda o finestra per dove si desidera aprire la nuova pagina.
Ora questo ha il suo lato positivo e negativo.
Il lato positivo è che il tuo sito è ancora aperto nella finestra di qualcuno.
Lo svantaggio è che a molte persone non piace quando continua ad aggiungere e
aggiungere, e
mentre progrediscono attraverso la tua pagina, li stai facendo aprire sempre più schede.
Ci sono altre due opzioni di cui non parleremo davvero qui, ma
puoi vederle nella lettura, e quelle sono top e parent, e
che si occupa se stai davvero prendendo l'idea di avere più finestre,
cornici, eccetera aperte.
Quindi, andiamo avanti e rivedere, perché assicurarsi di comprendere i collegamenti è di
vitale importanza per il vostro successo in questo corso o anche solo per capire l'HTML.
Quindi, la prima cosa che devi sapere è una pagina senza link è estremamente rara.
E ad essere onesti, non è quasi nemmeno una pagina web.
E' solo un documento.
I collegamenti possono essere assoluti, relativi e interni.
E interno, di nuovo, era il tipo in cui aveva il segno di hash in esso.
Penso di averli riferiti come relativi, ma
voglio assicurarmi di essere chiaro che il segno hash lo rende interno.
Si desidera usare cautela quando si utilizzano immagini nei collegamenti.
Non e' che non siano una grande cosa da fare, e non sto dicendo che dovresti farlo.
Sto solo dicendo assicurati di farlo con attenzione per garantire che tutti coloro che stanno
visualizzando la tua pagina possano ottenere lo stesso contenuto e la stessa esperienza di tutti gli altri.