Meniul
AcasăWindows 7

Opțiuni pentru stilarea link-urilor în CSS. Includerea CSS în HTML (pagina 3). Pot fi formulate câteva reguli simple

Între etichetele de deschidere și de închidere pot exista elemente inline și inline-block, cum ar fi: span, code, strong, img .. ,
și, de asemenea, întrerupere de linie

Avertizare!

Atributele linkului

Eticheta a poate conține mai multe atribute. Împreună cu etichetele de clasă, stil și id care sunt comune pentru majoritatea etichetelor, acestea sunt utilizate cu anumite atribute specifice.

href

URL (Locator uniform de resurse)- indice de resurse universale.

Valoarea href poate fi orice adresă URL absolută sau relativă validă, inclusiv un ID de fragment sau un fragment de cod JavaScript.

ţintă

Nu este necesar. De obicei, acest atribut are 2 valori:

target="_self" este valoarea implicită pentru eticheta a. Documentul cu hyperlink trebuie să fie afișat în aceeași fereastră.

target="_blank" - Documentul indicat de hyperlink va fi deschis într-o nouă fereastră fără nume.

titlu

Atribut opțional. Vă permite să definiți textul pe care doriți să-l afișați ca un sfat explicativ atunci când treceți cu mouse-ul peste un hyperlink.

Valoarea atributului este un șir arbitrar cuprins între ghilimele. Poate fi folosit pentru a afișa titlul unui document sau, atunci când este utilizat împreună cu atributul target="_blank", avertizați politicos că documentul se va deschide într-o fereastră nouă

„se deschide într-o fereastră nouă”> <span"titlul imaginii"/ > </a>

Alte atribute, dacă este necesar, pot fi găsite în director. Nu sunt folosite foarte des, așa că nu sunt discutate aici.

cale/document.html

De obicei, o adresă URL relativă va omite numele serverului și va furniza o adresă scurtă a documentului care este combinată automat cu adresa de bază.

× Adresa URL de bază
Trebuie să fie definit în document folosind o etichetă .

Să ne dăm seama cum se va forma URL relativă, în funcție de locația fișierelor. Este mai ușor de înțeles cu un exemplu.

Document principal- documentul de referință în care se află linkul

Dosarul curent- unde se află documentul principal?

Subfolder- în interiorul celui actual

Dosarul din apropiere- împreună cu cel actual, situat în părintele comun

Dosarul părinte- extern celui actual

Golul-1</a> „imbricat/target-2.html”> Golul-2</a> „../neighbor/target-3.html”> Golul-3</a> Golul-4</a>

Mai sunt opțiuni complexe Cu un numar mare niveluri de cuibărit.

Se pot formula câteva reguli simple:

Dacă ținta se află într-un alt folder al directorului curent (subdosar),
cale = dirname/țintă

Numele directorului extern (față de directorul curent) nu este specificat, iar la începutul căii sunt 2 puncte și o bară oblică - ../ și apoi calea

Legături absolute

Dacă documentul solicitat se află pe un alt server, atunci trebuie să specificați o adresă URL absolută

http://server/path/document.html

Tip URL http

Cea mai comună adresă URL, folosită cel mai adesea ca țintă a unui hyperlink. Ar putea arăta astfel:

http://www.site-name.com

ÎN vedere generala acest tip Are următorul format: http://server:port/cale

cale este o secvență ierarhică care indică locația documentului pe server.
Unul sau mai multe nume separate printr-o bară oblică. Toate numele, cu excepția ultimului, sunt nume de directoare. Numele de familie este numele documentului (în mod implicit, serverele web acceptă numele fișierului index.html)

Server - sistem informatic, care stochează și oferă o resursă web la cerere externă și are o adresă IP unică. Numele constă din mai multe părți, inclusiv numele propriu al serverului și o secvență de nume de domenii separate prin puncte.

Port- (de obicei poate fi omis, rar indicat) - numărul portului de comunicare server prin care se conectează browser-ul client.

fișier de tip URL

Adresa URL a unui fișier indică un fișier stocat pe un computer, fără a restricționa protocolul utilizat pentru a-l descărca. Acest lucru vă permite să încărcați și să afișați un document local.

File://server/cale

Serverul de fișiere, ca și serverul http, trebuie să fie numele domeniului sau adresa IP a computerului care conține fișierul descărcat. Diferența este că protocolul de conectare nu este specificat. Server de fișiere poate fi necalificat, dar nume unic computer în rețea personală, sau un dispozitiv de stocare.
Calea către fișierul solicitat pe serverul specificat poate varia în funcție de sistem de operare pe server

„fișier://D:\cale\nume fișier.html”> link pentru sistemele Windows</a> „fișier://D:/cale/nume fișier.html”> link pentru sisteme Unix</a> „fișier://localhost/home/document.html”> Document</a> „fișier://nume-server.com/document.html”> Document</a>

URL pentru mailto

 scrisoare către mine</a> "mailto:fоg@fоgnsnow.ru?subject=Test mailto"> e-mail-mi + subiect</a>

tip URL ftp

Indicatorul de resurse de tip ftp este utilizat pentru a prelua documente de pe serverele FTP. In general arata asa:

ftp://utilizator:parolă@server:port/cale;tip=cod_tip

FTP(Eșuează Protocolul de transfer) este un serviciu care necesită autentificare. Aceasta înseamnă că pentru a primi un document de pe server, trebuie să fii utilizator înregistrat și să cunoști parola.
Multe servere FTP oferă acces limitat toată lumea își poate accesa conținutul sub autentificare - anonim sau căutare și, uneori, fără nicio autentificare (implicit implicit)

Nu!
Nu puneți URL-ul ftp cu numele de utilizator și parola în niciun document!
Browserul însuși vă va solicita să le introduceți după conectarea la server

Serverul și portul sunt specificate în conformitate cu aceleași reguli ca în URL http(dacă portul nu este specificat, atunci portul 21 este atribuit implicit)

Calea este o secvență de directoare separate printr-un caracter oblic care duce la fișierul solicitat.
Transfer_type_code - în mod implicit, fișierele sunt transferate ca binare. Dacă specificați tip=
d - numele directorului
a - fișier care conține text ASCII
vezi restul in manual...

„ftp://www.site-name.ru/my_files/file_1”> „ftp://[email protected]/ctl_name;type=d”> „ftp://user:mу[email protected]/file_2;type=a”>

Link-uri într-o singură pagină

  1. Creați un fragment care va servi drept țintă pentru un hyperlink
  2. Creați un link către acest fragment

Pentru a crea un fragment, folosim atributul id, pe care îl folosim pentru a plasa ținta linkului direct într-o etichetă definitorie, cum ar fi un titlu.

Structura etichetei ...

Puteți observa că eticheta - pereche: este necesară eticheta de închidere.

href — atribut etichetă, indică scopul link-ului.

https://google.com/ - valoare de atribut, care conține adresa URL a resursei către care va avea loc tranziția. Este inclusă între ghilimele duble sau simple. Aceasta depinde de structura de imbricare a etichetelor conform regulilor HTML.

Pagina de pornire Google

toată această structură se numește element document web.

Conform regulilor HTML, unele elemente pot conține alte elemente. Etichetă nu o excepție. Dacă un programator trebuie să evidențieze cuvântul Google cu caractere aldine, atunci acest lucru se face folosind o etichetă conform regulilor generale de formatare a textului, respectând secvența de imbricare a etichetelor. Un webmaster trebuie să știe să creeze un hyperlink în HTML fără erori, altfel nu vor funcționa. Link-urile rupte sunt numite „rupte” în argou informatic.

pagina principala Google

Aici: element

pagina principala Google

conține un element imbricat

Google

hyperlinkuri absolute

protocol://numele de domeniu/calea către fișier

Un exemplu de adresă pentru un motor de căutare comun în America: https://aol.com - absolut, deoarece conține numele de domeniu.com.

Hyperlinkurile absolute sunt folosite pentru a naviga către pagini de pe alte site-uri sau pentru a accesa resurse aflate pe un alt server. Tranziția se realizează folosind protocoale Internet. Protocoalele nu fac subiectul acestui articol, dar, deoarece sunt implicate în crearea de hyperlinkuri, este necesar să le menționăm cel puțin pe scurt:

  • httpȘi https - cel mai comun; sunt folosite pentru a naviga între paginile de internet ale diferitelor site-uri;
  • ftp - protocol pentru încărcarea fișierelor pe server sau descărcarea de către utilizator de pe site;
  • mailto - un protocol de e-mail care trimite e-mail direct de pe site fără a introduce e-mailul personal.

Există câteva alte protocoale cu scop special (gopher, telnet), care sunt destul de rare, a căror utilizare necesită cunoștințe speciale în programare sau administrare de sistem.

hyperlinkuri relative

Cu adresare relativă, utilizarea hyperlinkurilor în HTML servește la navigarea în cadrul resursei și nu duce dincolo de granițele acesteia. Dacă pagina este atât de mare încât funcționează o bară de defilare verticală, uneori foarte lungă, ca, de exemplu, în dicționare, atunci este foarte convenabil și recomandabil să folosiți linkuri relative pentru a sări rapid la litera dorită.

La crearea unui dicționar online, programatorul plasează alfabetul la începutul paginii, iar dacă nu ar fi folosirea link-urilor, utilizatorul ar trebui să rotească roata mouse-ului pentru o perioadă foarte lungă de timp pentru a ajunge la litera „I ”.

Treci la litera I

Unde da numit ancoră, A Treci la litera I- ancoră destinație. Pentru a afișa corect ancorele, este recomandat să folosiți litere și cifre latine, deci nu trebuie să scrieți „I”, deși ar fi mai clar.

Acum, pentru a trece de la alfabetul de la începutul paginii la litera „I”, trebuie să ancorați ancora în locul din documentul HTML unde încep cuvintele care încep cu litera „I”:

litera I

există un semn hash în fața ancorei, fără de care trecerea la literă nu va funcționa.

Adresarea relativă la crearea unui site

Un algoritm convenabil și cel mai general acceptat pentru crearea unui site web de către un programator:

  • crearea unui folder pe computer și plasarea acestuia într-o locație cu acces rapid pentru comoditate;
  • crearea folderului principal în acest folder;
  • crearea de pagini web secundare (index.html/page2);
  • și plasarea fișierelor grafice în acesta;
  • crearea unui folder și plasarea altor obiecte în el (fișiere pentru descărcare, de exemplu);
  • umplerea site-ului cu conținut;
  • găzduiește fișierele site-ului.

Cu siguranta va trebui sa folositi link-uri pentru a conecta intre elementele site-ului si va fi foarte util sa stii cum sa inserati un hyperlink in HTML catre o alta pagina a aceluiasi site. Dacă fișierele site-ului se află în același director, pe același server, atunci nu este nevoie să folosiți adresarea absolută. La transferul fișierelor site-ului în găzduire, conexiunea dintre obiecte va fi păstrată, deoarece acestea vor fi și ele plasate în același director pe găzduire.

Să presupunem că un programator a creat pagina principală a site-ului index.html, care are un link către o altă pagină page2.html, decorată cu o imagine img.png. Apoi calea relativă către această imagine va arăta astfel:

imagine

Sfat: Când studiezi acest subiect, cel mai bine este să folosești un editor de text simplu, deoarece trebuie să câștigi abilități în scrierea corectă a adreselor de salt și să înveți cum să înțelegi codul altor persoane. În această etapă, un rezultat bun fără erori va fi un hyperlink scris într-un bloc de note,HTML nu le iartă și produce erori.

Metode de urmărire a hyperlink-urilor

În mod implicit, o nouă pagină se deschide în fereastra curentă a browserului atunci când utilizatorul face clic pe un hyperlink. Dar un programator web poate schimba valoarea implicită și poate forța pagina să se deschidă, de exemplu, într-o fereastră nouă. Există un atribut pentru asta ţintă cu un anumit sens. Acest lucru poate fi exprimat cel mai clar într-un tabel.

Sintaxa atributelor ţintă:

Pagina de pornire Google

Pagina de pornire Google se va deschide într-o fereastră nouă.

Notă: pentru a deschide pagini într-o filă nouă, nu există valori pentru acest atribut, dar este setat de utilizator însuși în setările browserului.

Culoare hyperlink

Un utilizator de internet experimentat ar fi trebuit să observe de-a lungul timpului că hyperlinkurile au o culoare diferită față de textul din jur și, de obicei, sunt albastre. Linkurile pe care le-a urmat și apoi au revenit la pagina anterioară devin violete. Utilizarea hyperlinkurilor în HTML într-o schemă de culori non-standard este mică, dar face ca site-ul să iasă în evidență de restul.

Setați culorile linkurilor în etichetă folosind atribute și valorile acestora, în care culoarea HTML apare în sistemul rgb (#00FF00) sau cu indicarea directă a numelui culorii („verde”). Există trei tipuri de atribute pentru linkuri:

  • link — setează culoarea unui link nevizitat;
  • vlink - setează culoarea link-ului pe care utilizatorul l-a urmat deja;
  • alink - setează culoarea link-ului în momentul tranziției către o altă pagină. Acest lucru se întâmplă rapid, așa că nu este întotdeauna posibil să prindem acest efect.

Exemplu de marcare:

Dacă aplicați aceste atribute într-o etichetă , linkurile către acest document web vor fi albastru închis, linkurile vizitate vor fi violet, iar linkurile active vor fi portocaliu-roșu.

Hiperlinkuri grafice

Progresul și dezvoltarea web design-ului necesită să știi cum să inserezi un hyperlink în HTML ca imagine. Este clar că imaginea trebuie să corespundă conținutului paginii de destinație. De exemplu, pagina principală a unui site despre plante medicinale poate fi prezentată sub formă de fotografii cu plante, făcând clic pe care utilizatorul va fi redirecționat către o pagină care descrie proprietățile medicinale ale plantei.

O metodă utilizată pe scară largă pentru înlocuirea butoanelor statice ( ) la o grafică frumoasă creată de un designer web în editori de grafică (GIMP, Photoshop).

Pentru a insera elemente grafice ca hyperlinkuri către paginile site-ului, se folosește aceeași sintaxă, dar în loc de text, se folosește o etichetă de inserare a imaginii conform regulilor HTML:

Același lucru este valabil și pentru atributele pentru setarea textului alternativ, lățimea, înălțimea și altele.

Apeluri de pe site

Standardul html5 a extins funcționalitatea utilizării Internetului, iar acum puteți efectua apeluri nu numai de pe telefon, ci direct de pe site. De asemenea, puteți utiliza hyperlinkuri într-un document HTML în acest scop și au următoarea sintaxă:

...abonat...

În loc de cuvântul „abonat”, este scris un contact care este pe înțelesul apelantului, ca într-o carte de telefon. De asemenea, puteți plasa un fișier grafic (fotografie a abonatului).

Pentru ca apelurile să poată fi efectuate de pe site, este necesar să aveți nu doar un link către numărul de telefon al abonatului, ci și o cască (microfon, căști), un program VoIP instalat pe computer, iar viteza internetului trebuie să depășească 0,5 Mb/sec. Plata apelurilor se face pe baza consumului de trafic. Prin urmare, dacă internetul este nelimitat, apelurile sunt gratuite.

Etica creării de hyperlinkuri

Atunci când plasează un site web pe Internet, un webmaster trebuie să știe ce tipuri de hyperlinkuri există în HTML și nu numai să le aplice corect și profesional, ci și să respecte următoarele prevederi:

  • Hyperlinkul trebuie să fie clar vizibil și distinct de textul din jur. Utilizatorul trebuie să știe că acesta este un hyperlink.
  • Ar trebui să fie clar pentru utilizator unde va merge atunci când face clic pe link. Pentru aceasta este recomandabil să folosiți un alt atribut titlu, care descrie succint pagina de tranziție. Sintaxa pentru utilizarea atributului este:

Yandex

  • Utilizatorul trebuie să primească informații adevărate despre fișierul care va fi descărcat atunci când face clic pe link.

Dacă utilizatorul ajunge pe o pagină care nu este cea la care se aștepta sau descarcă fișierul greșit, în 99% din cazuri utilizatorul va părăsi imediat site-ul și nu îl va mai vizita niciodată în viitor.

Anti-Seo la crearea de hyperlinkuri

Pe lângă latura tehnică a întrebării cum să inserați un hyperlink în HTML, ar trebui acoperit și aspectul moral. Există multe site-uri pe care utilizatorii nu le poate accesa de către programe de securitate (antivirus) sau chiar de către guvern. Acestea sunt site-urile care au fost create de programatori web necinstiți.

Unul dintre trucurile la care recurg este inserarea de hyperlinkuri „invizibile” într-o pagină web. Escrocii știu cum să creeze un hyperlink în HTML și folosesc atribute pentru a elimina sublinierea linkului și îi atribuie culoarea textului din jur, astfel încât utilizatorul obișnuit să nu-l vadă. Și cu ajutorul altor instrumente de tehnologie web (CSS, JavaScript, PHP) le puteți programa comportamentul. De exemplu, evenimentul JavaScript OnMouseOver declanșează o acțiune pe un element de pagină web. Când un utilizator trece cu mouse-ul peste un link invizibil, este direcționat către o pagină de publicitate de pe alt site. Sau și mai rău, atunci când există o legătură invizibilă către fișier și software-ul inutil începe să fie descărcat și instalat pe computerul său. De obicei, aceștia sunt viruși care schimbă pagina de pornire a browserului, aglomera hard disk-ul cu o mulțime de programe și așa mai departe.

În curând, astfel de site-uri vor ajunge pe „lista neagră” a bazelor de date cu viruși, a sistemelor de securitate și printre utilizatorii de internet. Astfel de site-uri nu durează mult și trebuie să-și schimbe numele, să migreze la nesfârșit pe Internet, schimbând furnizorii de gazdă. Acest lucru nu contribuie la promovarea site-ului, ceea ce creatorul său se străduiește întotdeauna și nu îl va transforma niciodată într-un mega-portal, cum ar fi, de exemplu, rețelele sociale. Printre altele, astfel de trucuri provoacă o mulțime de emoții negative la persoanele afectate de aceste acțiuni.

Foi de stil externe

Acum imaginați-vă că creați un site web cu o duzină de pagini și fiecare pagină trebuie să aibă o foaie de stil care îi specifică designul. După cum am spus mai devreme, toate paginile unui site arată adesea la fel, ceea ce înseamnă că pentru a le proiecta sunt folosite foi de stil similare. Cel mai adesea, un site are o singură foaie de stil care descrie toate elementele sale. Pentru a evita duplicarea întregului tabel între etichete pe fiecare pagină Web, acesta poate fi plasat într-un fișier separat cu extensia .cssși conectați-vă la documentul HTML dacă este necesar. Aceste foi de stil sunt numite foi de stil externe.

Avantajul tabelelor externe este că, odată încărcate, browserul memorează informațiile în cache și, atunci când este descărcat din nou, le preia nu de pe serverul Web, ci de pe discul local. Astfel, la încărcarea paginilor de site Web cu o singură foaie de stil, economisim timpul de încărcare a foii de stil externe, adică. fisierul care o contine .css. Al doilea avantaj este din nou ușurința de a edita astfel de pagini. Este suficient să corectați stilul de design al elementului într-un singur loc - în fișierul care conține foaia de stil și pe toate paginile HTML care folosesc aceste stiluri, aspectul elementelor se va schimba.

După cum știți deja, în aceste scopuri este folosit un element LINK gol, care se află în secțiunea de cap. Să ne uităm la un exemplu când trebuie să conectăm o foaie de stil aflată într-un fișier la un document HTML stil.css.


Conform specificației HTML, autorii site-urilor web pot conecta mai multe tabele externe la un singur document. Ele se pot completa reciproc, apoi principiul în cascadă este utilizat pentru a determina proprietățile obiectelor. Intră în vigoare dacă mai multe tabele au o descriere pentru același element.

Tabelele pot fi întocmite în așa fel încât să se excludă reciproc unul de celălalt, caz în care se numesc alternative, i.e. utilizatorul poate alege ce masă să folosească. De exemplu, pentru a afișa pe dispozitive cu lățime limitată, puteți utiliza fonturi mai mici. Și pentru persoanele cu deficiențe de vedere, puteți, dimpotrivă, să măriți dimensiunile fonturilor și să le aranjați sub forma unei foi de stil separate. Autorul are posibilitatea de a indica care dintre tabele este de preferat. Descrierea și scopul fiecărei foi de stil sunt specificate în atributul title. Acest lucru ar fi convenabil: te duci pe site, vezi ce foi de stil au fost scrise pentru el, o selectezi pe cea mai potrivită pentru tine și o folosești. Dar pentru a face acest lucru, browserele trebuie să ofere posibilitatea de a selecta foaia de stil preferată.

Doar browserele oferă această opțiune. Netscape versiunea 6.x(Și Mozilla respectiv), Opera 5și mai în vârstă. Acestea oferă posibilitatea de a mări dimensiunea fontului, chiar dacă este setată în pixeli. Deci, de fapt, nu sunt necesare foi de stil alternative. Internet Explorer, deși este cel mai comun browser, nu oferă o astfel de oportunitate. Vă permite să măriți dimensiunea fontului numai dacă fontul este specificat folosind cuvinte cheie sau folosind dimensiuni standard ale limbajului HTML, de exemplu. numere de la 1 la 7. Acesta este probabil motivul pentru care dezvoltatorii nu scriu mai multe tabele alternative.

Acum să revenim la elementul LINK. A

Omagiu href trebuie să fie prezent și să conțină ca valoare URL-ul foii de stil care urmează să fie conectată.

Atribut rel indică modul în care fișierul inclus se referă la documentul HTML dat. Pentru a adăuga o foaie de stil principală, utilizați valoarea foii de stil, cu descrierea în atribut titlu nu e nevoie sa intrebi. Pentru a permite utilizatorului să selecteze tabelul preferat al utilizatorului dintre multe tabele alternative, specificați atributul rel="foaia de stil"și setați descrierea acesteia în atribut titlu. Pentru a specifica o foaie de stil alternativă, setați atributul rel="foaia de stil alternativă"și descriere în atribut titlu.

Aici sunt cateva exemple:

Această linie include o foaie de stil alternativă cu o dimensiune mai mică a fontului, tabelul este stocat în fișier mic-font.css.

Folosind această linie, este conectată o foaie de stil alternativă cu cea mai mare dimensiune de font, tabelul este stocat într-un fișier big-font.css.

Ultima linie specifică foaia de stil principală, care este utilizată implicit.

Atribut tip spune browserului în ce limbă este scrisă foaia de stil și permite să nu fie descărcată pe computer dacă această limbă nu este acceptată de browser.

Importul foilor de stil

Există o altă modalitate de a include o foaie de stil stocată într-un fișier separat într-un document HTML. Acest lucru se face folosind o directivă specială @importîn felul următor.

În acest caz, toate intrările din tabelele realizate în interiorul documentului sunt îmbinate cu tabelul importat din fișierul style.css. Situațiile conflictuale sunt rezolvate folosind un mecanism în cascadă.

Trebuie remarcat faptul că directiva @import nu acceptă browser Netscape Navigator 4.0, dar este instalat pe cel mult 0,1% dintre utilizatorii de Internet, astfel încât aceștia pot fi neglijați.

Cum să ascundeți informațiile de stil din browser

Pentru a ascunde informațiile de stil din browserele mai vechi care nu acceptă elementul STIL(Din dreptate, trebuie remarcat că practic nu mai au rămas), puteți folosi același lucru ca atunci când ascundeți codul de script - comentarii:

Etichetele nefamiliare sunt pur și simplu ignorate de browser, iar descrierile de stil plasate în interiorul unui comentariu HTML nu vor fi afișate.

ȘI . Markup este folosit și aici.

Note de subsol CSS

Nu este nevoie să numerotați notele de subsol CSS. Acest lucru se face folosind o listă numerotată și un contor CSS. Markup HTML5 este, de asemenea, folosit aici.

  1. ↩ Conform w3.org lângă articol
  2. , situat în interiorul listei
      , browserul trebuie să introducă un număr de serie.
    1. ↩ Contorul CSS determină numărul ordinal al etichetei în cadrul părintelui specificat, iar pseudo-elementul afișează acest număr.
    2. ↩ Etichetă
      poate fi folosit de mai multe ori pe o pagină și
    3. este posibil să nu aibă o etichetă de închidere.

Etichete HTML pentru abreviere (cuvânt prescurtat) și definiție (cuvânt neclar)



Exemplu

O modalitate mai ușoară este doar în HTML.

  1. Elementele au ID-uri individuale. Nu poate avea aceeași valoare pentru două sau mai multe etichete. Un link cu un hash (#) nu numai că va deschide pagina specificată (dacă nu există nimic înainte de #, atunci pagina curentă), dar o va derula și la id-ul elementului solicitat (ceea ce este indicat după #). Puteți afla mai multe detalii și.

O modalitate mai ușoară folosind numai HTML .