Penso che tu abbia già capito di cosa si parlerà in questo capitolo .. e sai cos'è un link, in caso contrario clicca qui .. Esistono diversi tipi di link, oltre a "meccanismi" per seguirli. In questo capitolo cercherò di spiegarti in dettaglio come registrare i link, oltre a dedicare le complessità del lavoro con essi.
Digressione lirica:
Una volta nell'esercito, il capo di stato maggiore si è avvicinato a me e ha dato un ordine, cito:
Portami quel documento, anche se non so dove e cosa sia!! Cosa stai in piedi? Corriamo!! Sono in ritardo!!!
Allora, perché faccio in modo che il browser, come ho fatto allora, non cada in uno stupore, ha bisogno di sapere: il nome esatto del documento, il percorso del documento e il luogo dove portarlo, o meglio dove aprirlo.
Al momento, con l'aiuto del blocco note, abbiamo creato un solo documento HTML, ce l'ho con il nome index.html (perché ho scelto un nome così strano index.html e perché devo guardare) Non non so con quale, hai inventato tu stesso il nome, ma penso, te lo ricordi e sai dove si trova, a meno che ovviamente tu non sia il mio capo di stato maggiore :). In questo documento cercheremo di creare un collegamento ad un altro documento che non abbiamo ancora.. Quindi prima di fare riferimento ad esso, devi crearlo Bene, sai già come.
- Apri il blocco note.
- Scriviamo il codice in html. Ad esempio, una pagina con un numero di foto.
- La salviamo come pagina html nella stessa cartella di lavoro in cui esiste già il primo documento che abbiamo creato. Chiamiamolo, per non confonderci, primer.html, e magari rinominiamo anche il primo in index.html
Ora so che hai due documenti html index.html e primer.html e che ora hai un set minimo per ulteriori apprendimenti.
Collegamenti testuali.
Fai conoscenza tag (da anchor - anchor), puoi racchiudere un testo o un'immagine al suo interno, che diventerà un collegamento a determinati documenti. Attributo tag href specifica il nome e il percorso del documento a cui punta il collegamento.
Tutto insieme è scritto così:
Ecco le mie foto!!Come probabilmente avrai capito, primer.html è il nome del nostro secondo documento html e la scritta "Ecco le mie foto!!" questo è un pezzo di testo dal file index.html.
Per analogia con il tag immagini
il percorso del collegamento al documento che si sta aprendo è scritto nello stesso modo:
Ecco le mie foto!!- E questo significa che il file primer.html è posizionato un livello più in alto rispetto al documento
Ecco le mie foto!!- il documento si trova sul sito www.site.ru..
Bene, proviamo? Di seguito è riportato un esempio di due documenti contemporaneamente in cui sono registrati i collegamenti che puntano l'uno all'altro.
file index.html:
Dimmi, bambina cara: in quale orecchio ronza il mio?
A legge o sinistra?
file primer.html:
L'esempio mostra che i link sono evidenziati a colori, di default il blu è il link, e il rosso è il link già visitato, questi colori possono essere cambiati usando il tag di apertura a noi già noto < body > e i suoi attributi.
collegamento- colore del collegamento.un collegamento- il colore del link attivo cliccato.
vlink- il colore del link visitato.
Si scrive così:
>Continuando a parlare del colore di un link testuale, vale la pena ricordare che, se necessario, puoi forzare il colore evidenziando sia l'intero link che le sue singole parti (frasi, parole, lettere) con un tag familiare e il suo attributo colore. Tuttavia, questo vale non solo per il colore, ma anche separatamente puoi impostare la dimensione, lo stile e il carattere del testo. Ma ricorda che la manipolazione del colore deve essere eseguita all'interno del tag qui e non fuori bordo, altrimenti il colore del collegamento sarà di default o come scritto nel tag
file index.html:
link="#008000" alink="#ff0000" vlink="#ffff00">
Cerca una frase che ti aiuti a ricordare i luoghi dei colori nell'arcobaleno.
R
MA
D
In
G
MA
file primer.html:
link="#008000" alink="#ff0000" vlink="#ffff00">
Tutti
cacciatore
auguri
sapere
dove
è seduto
fagiano
Torna alla pagina principale
Una delle tue pagine sul sito necessariamente dovrebbe essere chiamato indice.htmlÈ il file con questo nome sul tuo sito che il programma robot cercherà quando una persona inserisce il nome del tuo sito. Dal momento che la pagina indice.html si aprirà per primo, rendilo quello principale. Puoi chiamare il resto delle pagine come preferisci ... non ci sono più sfumature con i nomi.
Informazioni sul caso Quando scrivi il percorso e i nomi dei documenti, ricorda che, ad esempio: Page.html, page.html e PAGE.html sono i nomi di documenti diversi! Lo stesso vale per i nomi e i disegni dei segnalibri. Fai sempre distinzione tra maiuscole e minuscole quando scrivi il codice, ci sono buone probabilità che tali nomi non vengano riconosciuti da un particolare browser. Prendi una regola per scrivere tutto e chiamare i nomi in minuscolo latino, quindi il rischio del fattore umano e dei capricci dei programmi si ridurrà a zero.
Regola dei tre clic.
Cerca di formare un "albero dei collegamenti" in modo tale che il visitatore del sito possa arrivare da una qualsiasi delle sue pagine a qualsiasi punto del sito per il numero minimo di clic sui collegamenti. Più di tre transizioni nel posto giusto sul sito non vanno più bene .. Il caricamento infinito di pagine di cui una persona non ha bisogno può portare a un esaurimento nervoso e alla chiusura prematura del sito. Risparmia tempo, denaro e nervi delle persone.
I collegamenti ipertestuali sono stati inventati per collegare tra loro i documenti sulla rete e se il tuo sito non è composto da una pagina, ma da più pagine, puoi collegarli insieme solo creando collegamenti ipertestuali. Diamo un'occhiata direttamente a un esempio di come appare.
Crea un semplice collegamento ipertestuale
Vai a un'altra pagina
Apertura di un collegamento in una nuova pagina
C'è un altro attributo interessante che potresti trovare utile:
Vai a un'altra pagina
L'attributo target con un valore di _blank apre il collegamento in una nuova finestra, questo viene spesso utilizzato se non vuoi che la persona perda la tua pagina e allo stesso tempo ottenga le informazioni di cui ha bisogno solo in una nuova scheda o finestra.
Collegamenti immagine
Risultato nel browser:
In sostanza, tutto è semplice qui, metto il tag dell'immagine tra il tag del collegamento ipertestuale di apertura e quello di chiusura , ma ripeto, non ho semplicemente inserito due immagini, ho assegnato la classe img a una in cui ho resettato la cornice attorno all'immagine, dato che quando diventa un collegamento ipertestuale appare, ma non in tutti i browser, ad esempio IE lo farai vedi, ma non in Google Chrome.
Sottolineatura nei link
Vai a un'altra pagina
Vai a un'altra pagina
Per chiarezza, ho fornito due opzioni per risolvere questo problema, l'ho assegnato a un selettore di classe e prescrivendo questa classe rimuoverai le sottolineature non necessarie in punti specifici. La seconda soluzione al problema è rimuovere la sottolineatura da tutti i collegamenti nel tag<а>, che ovviamente raramente provoca un bisogno, ma la conoscenza non è comunque superflua.
Collegamenti all'interno di un documento
Non è raro che un documento sia abbastanza lungo e all'inizio della pagina viene creato un piccolo menu con collegamenti a sottosezioni di questa pagina. Questi collegamenti sono chiamati collegamenti all'interno del documento e tutto ciò viene implementato in modo molto semplice. Per cominciare, le ancore vengono posizionate nel documento, questi sono segni, vengono posizionati nel documento dove sarà necessario spostarsi quando si fa clic su un collegamento interno, di norma si tratta di intestazioni di sezione, l'etichetta è simile a questa:
E l'ultima cosa che dobbiamo sapere sui collegamenti ipertestuali sono i collegamenti alle caselle di posta elettroniche, è implementato in modo molto semplice, basta aggiungere un mailto: voce all'attributo href e all'indirizzo della casella di posta:
Questo conclude la lezione "Creazione di collegamenti ipertestuali in html", come avrai notato, qui non abbiamo fatto a meno dei CSS, in generale, il materiale è abbastanza semplice, penso che tutto sarà semplice e chiaro per te, scrivi domande.
Data di pubblicazione: 2014-04-23
I collegamenti ipertestuali sono uno dei componenti più importanti dei documenti html. È grazie a questo componente, oltre ai soliti collegamenti, che Internet è così facile da usare. Esamineremo le opzioni più semplici per inserire collegamenti ipertestuali che ti aiuteranno, come programmatore alle prime armi, a padroneggiare questa lezione.
Come creare un collegamento ipertestuale in html?
Questo codice funzionerà solo sul tuo sito, non funzionerà per i link esterni.
< a href=" *** ">***** < /a>
Esempio:
< a href="https://сайт/">rivista come fare tutto< /a>
Nel browser apparirà così:
< a href="https://сайт/prigotovlenie-edy/368-kak-sdelat-malosolnye-ogurcy.html">Come fare i cetrioli salati?< /a>
Nel browser potremo vedere quanto segue:
Come creare un collegamento ipertestuale in html a un sito esterno?
Per i link esterni, il codice dovrebbe essere leggermente modificato. Per collegarsi a un altro sito, usa il codice:
< a href="*** ">***** < /a>
< a href="https://vk.com/kaksdelatvse">Siamo in contatto "Come fare tutto"< /a>
Un collegamento ipertestuale può collegare pagine all'interno dello stesso sito o puntare a qualsiasi pagina su Internet. Quando si crea un collegamento alle pagine di altre persone, è necessario utilizzare sempre l'indirizzo assoluto della pagina (http://www.site.com/page.html). Se si sta creando un collegamento ad una pagina all'interno di un sito, è preferibile utilizzare un URL relativo (pagina.html, catalogo/pagina.html). Quando crei un collegamento ipertestuale grafico, tieni presente che la grafica non è disponibile per alcuni utenti, quindi assicurati di includere elementi di testo appropriati.
Esempio:
Collegamento ipertestuale all'interno della pagina html
A volte è necessario creare un collegamento ipertestuale all'interno della stessa pagina. Ad esempio, in questa pagina, questi sono collegamenti ipertestuali all'inizio della lezione, che ti consentono di andare a visualizzare una domanda specifica, e in fondo alla pagina, che ti consentono di andare all'inizio della pagina.
Esempio:
Collegamento ipertestuale di posta
Esempio:
|
Codice HTML: [email protetta] |
Visualizza nel browser: |
Apertura di pagine html in una nuova finestra
Utilizzando l'attributo TARGET, puoi caricare la pagina in una nuova finestra del browser. Questo attributo viene utilizzato per impostare il nome della finestra. Il nome della finestra viene utilizzato per scopi di servizio. Per aprire una pagina in una nuova finestra, usa la costante _blank.
Esempio:
Colore del testo del collegamento ipertestuale
Gli attributi LINK, ALINK, VLINK impostano il colore del carattere per i collegamenti ipertestuali.
L'attributo LINK viene utilizzato per evidenziare i collegamenti ipertestuali che non sono stati ancora visitati dall'utente.
Ordine di collegamento ipertestuale
Alcuni browser possono supportare la possibilità di seguire i collegamenti ipertestuali utilizzando il tasto Tab. In questo caso, il browser predefinito evidenzia i collegamenti ipertestuali nell'ordine in cui appaiono nel testo della pagina. È possibile modificare l'ordine di transizione utilizzando l'attributo TABINDEX del tag . Per includere un collegamento ipertestuale nell'elenco che descrive il nuovo ordine di navigazione, impostare l'attributo TABINDEX su un numero intero positivo compreso tra 1 e 32767. Per escludere un collegamento ipertestuale dall'elenco, impostare l'attributo su un numero negativo. Quando l'utente preme il tasto TAB, il cursore si sposta sul collegamento ipertestuale con il valore di indice positivo più basso. Se a più collegamenti ipertestuali viene assegnato lo stesso valore di indice, il primo selezionato sarà quello più in alto nel testo della pagina.
Va notato che l'attributo TABINDEX può essere utilizzato per selezionare altri oggetti, come la grafica.
"Collegamenti ipertestuali in HTML" è la quinta lezione del tutorial HTML. Questa lezione si concentrerà sull'uso dei collegamenti ipertestuali. Qualsiasi documento web è basato su collegamenti ipertestuali, quindi ogni web master deve essere in grado di lavorare con i collegamenti.
Regole per l'uso dei collegamenti ipertestuali.
Collegamenti ipertestuali in HTML sono necessari per la connessione di più documenti, sia all'interno dello stesso sito che all'interno dell'intera Internet. Per creare collegamenti ipertestuali (collegamenti ipertestuali), viene utilizzato un descrittore :
L'attributo href viene utilizzato per passare l'indirizzo del documento a cui punta il collegamento.
Un'ampia varietà di oggetti può fungere da collegamenti ipertestuali, comprese le immagini:
– meta tag in HTML.
Puoi fare riferimento non solo a documenti diversi, ma anche a parti diverse di questi documenti. Per fare ciò, in alcune parti del documento, è necessario posizionare il cosiddetto anchor - una costruzione del form , e quindi fare riferimento ad esso specificando il seguente codice nell'attributo href:
href="http://www.site.#nome dell'ancora"
Se il browser non riesce a trovare l'ancora denominata specificata nella pagina chiamata, la transizione andrà semplicemente all'inizio del documento e non si verificheranno errori.
I collegamenti ipertestuali possono essere implementati su una varietà di protocolli. I più comunemente usati sono elencati di seguito:
- HTTP– protocollo – un protocollo standard per i collegamenti ipertestuali, progettato per la trasmissione una tantum di blocchi di informazioni.
- FTP– protocollo – protocollo di trasferimento file universale. Richiede autorizzazione.
- MAILTO– protocollo di trasferimento della posta standard.
Configurazione di collegamenti ipertestuali in HTML.
L'attributo di destinazione del tag determina come si aprirà una nuova pagina e assume i seguenti valori:
- _self - il documento si aprirà nella finestra corrente
- _parent - nel frame - il genitore del frame corrente
- _top - nella finestra principale dell'intera struttura del frame
- _blank - il documento si aprirà in una nuova finestra
Ad esempio, per aprire una pagina con i contatti in una nuova finestra, è necessario utilizzare il seguente codice:
- Link: definisce l'aspetto dei link non visitati.
- Alink - determina l'aspetto dei link già visitati.
- Vlink: definisce l'aspetto dei collegamenti selezionati.
Nella prossima lezione parleremo di lavorare con la grafica in HTML: impareremo come inserire immagini, personalizzarne l'aspetto, ecc.
