Specifica dell'URL della base del documento con HTML Elemento

I siti web sono costruiti con una serie di collegamenti, che puntano a pagine e fonti come immagini e fogli di stile. Esistono due modi per specificare l'URL che collega a queste fonti : utilizzare un percorso assoluto o un percorso relativo.

Il percorso assoluto fa riferimento a una destinazione specifica, in genere inizia con il nome di dominio (insieme a HTTP) come www.domain.com/destination/source.jpg . Il percorso relativo è l'opposto: la destinazione del collegamento dipende dalla posizione di root o, nella maggior parte dei casi, dal nome di dominio del tuo sito web.

Un tipico percorso relativo dovrebbe apparire come segue:

Ad esempio, se il dominio del tuo sito web è hongkiat.com, il percorso dell'immagine verrebbe risolto in hongkiat.com//hideout-lastation.com/img/tech-design-tips/809/specifying-document-base-url-with-html-base-element.png . Dovresti capire questo se hai sviluppato un sito web per un po '.

Ma molti di voi probabilmente non ne hanno sentito parlare elemento. Questo tag HTML esiste già dall'HTML4, ma si vede ben poco della sua implementazione in natura. W3C descrive questo elemento come:

"L'elemento base consente agli autori di specificare l'URL di base del documento ai fini della risoluzione degli URL relativi e il nome del contesto di esplorazione predefinito ai fini dei seguenti collegamenti ipertestuali."

Questo element fondamentalmente decide l'URL di base per il percorso relativo nelle pagine web. Invece di dipendere dalla posizione di root o dal dominio del tuo sito web, puoi indicarlo altrove, magari come l'URL in cui risiedono le tue risorse in CDN (Content Delivery Network). Vediamo come funziona davvero.

Utilizzando l'elemento base

Il è definito lungo il lato e tag all'interno del . Dato il seguente esempio, impostiamo l'URL di base su Google.

Questa specifica influenzerà tutti i percorsi all'interno del documento, incluso uno che è specificato all'interno dell'attributo href e src delle immagini. Pertanto, supponendo di avere un foglio di stile, immagini e collegamenti nel set di documenti con un percorso relativo come questo, ad esempio:

Anche se la nostra pagina web è in demo.hongkiat.com il percorso relativo farà riferimento a hongkiat.maxcdn.com, seguendo il percorso di base specificato nel etichetta. Prova a passare il mouse sul link e il browser ti mostrerà dove si sta dirigendo esattamente il percorso.

Tutti i percorsi relativi alla fine saranno:

Impostazione del target Link predefinito

Oltre a definire l'URL di base, il il tag può anche impostare il target link predefinito tramite l'attributo target . Di 'che vuoi che tutto il link del documento si apra nella nuova scheda del browser, imposta il target con _blank, in questo modo.

limitazioni

Il tag, tuttavia, contiene un paio di avvertimenti in alcune circostanze:

Prima il il supporto del browser è fantastico; funziona in IE6. Ma, IE6 pensa che richieda un tag di chiusura . Ciò potrebbe causare un problema di gerarchia nel documento, se il tag di chiusura non viene specificato. Un modo semplice e rapido per risolvere questo problema è aggiungere chiudendo all'interno di un commento, .

Se stai usando # in congiunzione con il per collegare alle sezioni all'interno del documento, è possibile che si verifichi un problema in Internet Explorer 9. Anziché saltare alla sezione indicata, Internet Explorer 9 ricaricherà la pagina.

Inoltre, un href vuoto comporterà l'URL di base anziché il collegamento alla directory corrente in cui risiede la pagina (questo è il comportamento predefinito del browser), che potrebbe causare problemi di referenziamento imprevisti.

Incartare

Il è una comoda funzionalità HTML che può semplificare il riferimento ai collegamenti in un documento Web. Utilizzare il tag con attenzione per ridurre al minimo le insidie. Seguire questi riferimenti di seguito per ulteriori informazioni sul etichetta:

• URL assoluti e relativi - MSDN
• HTML Base Element - W3C

30 impressionante animazione SVG per la tua ispirazione

I progettisti hanno usato per creare animazioni in elementi HTML usando CSS. Tuttavia, a causa delle limitazioni degli elementi HTML nella creazione di modelli, forme e altri, si rivolgono naturalmente a SVG, che offre funzionalità più interessanti.Lavorando con SVG, ci godiamo un buon browser supprot per l'animazione SVG e abbiamo più modi per creare nuove animazioni. P

(Consigli tecnici e di design)

Come creare un semplice selettore di numeri di telefono

I numeri di telefono, oltre ai nomi e alle e-mail, sono le informazioni di contatto più utilizzate nei moduli online. I campi del numero di telefono sono generalmente progettati in modo da richiedere agli utenti di digitare i numeri usando le loro tastiere. Questo metodo spesso porta a dati inaccurati.

(Consigli tecnici e di design)