Ei bine, totul este clar aici. Acum, când dați clic pe conținut, pagina dorită se va deschide într-o fereastră nouă. Acest lucru este foarte necesar, deoarece dacă nu îl înregistrați, utilizatorul va părăsi pur și simplu pagina dvs. Și așa, în orice caz, va rămâne pe el, doar dacă nu îl închide în mod specific. Încercați să faceți totul singur, doar să faceți totul frumos cu propriile mâini. Nu este nevoie să copiați și să lipiți.

Cumva așa. Se pare că v-am spus toate cele mai importante lucruri, dar dacă doriți să mergeți în această direcție și să învățați HTML și CSS pentru a crea site-uri web profesionale, bloguri și chiar magazine online, atunci asigurați-vă că le verificați. curs video excelent despre această temă. Lecțiile sunt cu adevărat excelente și sunt într-adevăr spuse pentru oameni care sunt încă puțin familiarizați cu construirea site-ului web sau nu sunt familiarizați deloc.

Ei bine, asta încheie lecția noastră de astăzi. Sper că ți-a plăcut articolul meu și te vei bucura dacă vei deveni cititorul meu obișnuit. Așa că nu uitați să vă abonați la actualizările blogului meu pentru a nu pierde nimic interesant. Ei bine, vă doresc succes în toate eforturile voastre. Pa! Pa!

Salutări, Dmitri Kostin.

Hyperlinkurile sunt una dintre cele mai importante componente ale documentelor HTML. Datorită acestei componente, precum și a linkurilor obișnuite, Internetul este atât de ușor de utilizat. Ne vom uita la cele mai simple opțiuni de inserare a hyperlink-urilor, care vă vor ajuta, ca programatori începători, să stăpâniți această lecție.

Cum se creează un hyperlink în html?

Acest cod va funcționa numai pe site-ul dvs. web; nu va funcționa pentru link-uri externe.

< a href=" *** ">***** < /a>

Exemplu:

< a href="https://сайт/">Revista Cum să faci totul< /a>

În browser va arăta astfel:

< a href="https://сайт/prigotovlenie-edy/368-kak-sdelat-malosolnye-ogurcy.html">Cum să faci castraveți ușor sărați?< /a>

În browser vom putea vedea următoarele:

Cum se creează un hyperlink în html către un site extern?

Pentru link-urile externe, codul ar trebui să fie ușor modificat. Pentru a crea un link către un alt site, foloseste codul:

< a href="*** ">***** < /a>

< a href="https://vk.com/kaksdelatvse">Suntem în contact „Cum să facem totul”< /a>

În lecția anterioară, am analizat etichetele de marcare logice: titluri, paragrafe și am învățat despre crearea listelor și cum să le formatăm. Acum vom vedea cum să inserăm imagini într-o pagină și să setăm stilul elementelor folosind atribute. Și mai important, vom învăța cum să creăm un site web - vom lega paginile noastre html educaționale cu link-uri.

Avem deja o pagină, să creăm alta: index.html- acesta este numele standard al paginii principale a site-ului. Dacă aveți de gând să vă faceți un site web, atunci este util să introduceți codul manual. Iar pentru leneși și practici: deschideți pagina html de antrenament anterioară în Notepad și setați numele: index.html (Fișier - Salvare ca).

Nu uitați de tipul și codificarea fișierului - UTF-8 (vezi prima lecție despre crearea unei pagini HTML în Notepad). Apoi deschideți fișierul index.html în Notepad și editați-l astfel încât să arate astfel:

Pentru cei care nu au cunoștințe de calculator: faceți dublu clic cu butonul stâng al mouse-ului pe fișier .htmlîl va deschide în browserul dvs. principal. Pentru a-l deschide într-un alt browser, trebuie să faceți clic dreapta pe el, să selectați „Deschide cu” din meniu și să selectați numele browserului. Acolo puteți selecta Notepad sau alt editor pentru a edita fișierul.

Acum să vedem ce avem în browser. Culoarea de fundal verde deschis a întregii pagini este setată de atributul bgcolor al etichetei Body:

La fel ca multe etichete, Body are mai multe atribute care specifică un anumit stil de elemente aflate în această etichetă. De exemplu, culoarea textului poate fi specificată cu atributul text. Deoarece Corpul este întreaga parte vizibilă a paginii, apoi parametrul se va aplica întregului text al paginii.

Pentru a seta culoarea elementelor individuale, cum ar fi paragraful P sau titlurile, puteți utiliza atributul de stil universal, de exemplu:

...

Cum să inserați imagini

Plasați orice imagini în același folder ca cele două pagini HTML de tutorial. Dosarul în sine poate fi numit, de exemplu, Site1. Schimbați numele fișierelor imagine în img1, img2, img3, ca în captura de ecran. Sau schimbați aceste nume în codul nostru cu numele imaginilor dvs. și, dacă este necesar, modificați extensiile (formatul fișierului). Am aceste imagini cu oameni 3D, în format .jpg:

Probabil ați auzit expresia „Director rădăcină site” - acesta este directorul (dosarul) în care se află toate fișierele site-ului. Poate conține și alte foldere: cu imagini, cu fișiere script, cu secțiuni individuale ale site-ului. Pentru a nu fi confundat mai târziu într-o grămadă de fișiere cu extensii diferite, este indicat să creați, de exemplu, un folder separat pentru imagini. Și pentru site-uri mari - mai multe foldere de imagini pentru diferitele sale secțiuni.

Dacă imaginile dvs. sunt plasate într-un folder separat, de exemplu, cu numele „papka”, atunci calea către acesta (valoarea atributului scr necesar) va arăta astfel: . Dacă imaginile dvs. nu sunt afișate în browser, atunci există doar două motive: a fost specificată o cale greșită a fișierului sau o greșeală de scriere. Ați observat deja că elementul Img nu are o etichetă de închidere. Să ne uităm la alte atribute aplicate ale etichetei Img.

În a doua imagine img2.jpg: alt atribut - valoarea este text care este vizibil dacă browserul, dintr-un motiv oarecare, nu a putut afișa imaginea. Este recomandat să folosiți atributul alt și să includeți cuvinte cheie în el. A treia imagine este plasată în eticheta P, iar locația sa în dreapta textului paragrafului este determinată de valoarea „dreapta” a atributului de aliniere, care servește la alinierea imaginii.

De asemenea, este de remarcat faptul că, pe lângă formatul jpg, formatele gif și png sunt folosite în grafica web. Este recomandabil să învățați cum să optimizați imaginile pentru web și să utilizați Photoshop. Imaginile optimizate, mai ușoare, încetinesc mai puțin încărcarea paginii în browser.

Apropo, vedeți indentări (diverse numere de spații) la începutul fiecărei linii de cod - nu sunt necesare. Acest lucru se face pentru comoditate vizuală, pentru a facilita editarea documentului de către webmaster în viitor. Dar dacă nu faceți o mulțime de omisiuni și nu lăsați rânduri goale, pagina html va fi mai mică ca dimensiune.

Din link: cum să legați paginile html într-un site web

Link-uri (hyperlink-uri) - eticheta A cu atributul href, a cărui valoare este calea către fișier (URL), am plasat-o în elementele listei Li, pe care le vedem în captura de ecran (a 2-a) a paginii din browser. Există trei tipuri de link-uri: primele link-uri către site-ul pe care vă aflați în prezent. Dacă faceți clic pe el dacă aveți o conexiune la Internet, veți fi dus la pagina principală a site-ului meu. Dacă adăugați „/index.html” la adresa URL, rezultatul va fi același.

Al doilea link, de exemplu, duce la o pagină inexistentă spravochnik.html, aflată în folderul „papka” al site-ului meu. Aceste două legături au căi complete către documentele la care se leagă. Al treilea hyperlink are o cale relativă. Pentru ca acesta să funcționeze, trebuie să aveți o pagină index.html în același folder cu pagina în care se află acest link. În acest caz, se leagă la aceeași pagină (la ea însăși).

Acestea. Linkurile care duc la pagini de pe alte site-uri pot include numai adresa URL completă. Iar linkurile către paginile interne ale aceluiași site pot avea atât o adresă completă, cât și o adresă relativă. Despre atribute: valoarea atributului titlu (a nu se confunda cu eticheta) este textul care apare atunci când treci cu mouse-ul peste un element, vezi a doua captură de ecran. Titlul este un atribut universal; poate fi folosit pentru aceleași imagini. Atributul țintă cu valoarea „blank” deschide pagina într-o filă nouă de browser.

Acum să conectăm cele două pagini educaționale ale noastre într-un singur site. Să adăugăm la ambele pagini, imediat după eticheta Body, două astfel de rânduri (aici a 8-a și a 9-a) - două hyperlink-uri:

Primul link duce la pagina de index de azi, celălalt la a doua pagină educațională (pentru mine este formatirovanie_teksta.html, poți avea orice alt nume). În esență, am creat un site de două pagini, iar aceste link-uri sunt meniul site-ului. Am adăugat trei spații fără rupere între legături pentru a crea o indentare pentru a separa legăturile. Faceți clic pe linkurile din browserul dvs.

Un hyperlink poate lega pagini dintr-un singur site sau poate indica orice pagină de pe Internet. Când construiți link-uri către paginile altor persoane, ar trebui să utilizați întotdeauna adresa absolută a paginii (http://www.site.com/page.html). Dacă creați un link către o pagină dintr-un site, este de preferat să utilizați o adresă URL relativă (page.html, catalog/page.html). Când creați un hyperlink grafic, rețineți că este posibil ca elementele grafice să nu fie accesibile anumitor utilizatori, așa că asigurați-vă că includeți elemente de text adecvate.

Exemplu:

Hyperlink într-o pagină html

Uneori este necesar să se creeze un hyperlink într-o singură pagină. De exemplu, pe această pagină există hyperlinkuri la începutul lecției, permițându-vă să accesați o anumită întrebare și chiar în partea de jos a paginii, permițându-vă să mergeți în partea de sus a paginii.

Exemplu:

hyperlink poștal

Exemplu:

Deschiderea paginilor html într-o fereastră nouă

Folosind atributul TARGET, puteți încărca pagina într-o nouă fereastră de browser. Acest atribut este destinat să specifice numele ferestrei. Numele ferestrei este folosit în scopuri oficiale. Pentru a deschide o pagină într-o fereastră nouă, trebuie să utilizați constanta _blank.

Exemplu:

Culoarea textului hyperlinkului

Atributele LINK, ALINK, VLINK specifică culoarea fontului hyperlinkurilor.

Atributul LINK este folosit pentru a evidenția hyperlinkuri care nu au fost încă vizitate de utilizator.

Procedura pentru următoarele hyperlinkuri

Trebuie spus că atributul TABINDEX poate fi folosit pentru a selecta alte obiecte, de exemplu, imagini grafice.

Bună ziua, dragi vizitatori!

În acest articol vă voi arăta cum să adăugați un link către un site web sub forma unui hyperlink simplu, o imagine și, de asemenea, un buton pe care îl puteți seta propriul design folosind stiluri CSS. Toate cele 3 opțiuni sunt foarte des folosite și au un efect destul de bun atunci când sunt folosite de vizitatori.

Să începem cu cel mai simplu și să ajungem la complex.

Link obișnuit și hyperlink

http://site/poleznoe/kak-sdelat-ssylku-na-sait.html

Această opțiune își are locul, dar există un dezavantaj semnificativ dacă vorbim despre eficiența unei astfel de legături. Nu se poate face clic, adică nu poți accesa el cu un simplu clic al mouse-ului. Această opțiune este destul de dificil de perceput de vizitatori.

Un alt lucru este un hyperlink, care, atunci când se dă clic, redirecționează către un alt document de pe Internet, atât intern (în cadrul aceluiași site), cât și extern (un alt site). Un exemplu de astfel de link poate fi văzut mai jos. Încercați să dați clic pe link.

Pagina principală a resursei mele ar trebui să se deschidă într-o filă nouă. Pentru a implementa această opțiune, trebuie fie să utilizați instrumentele motorului dvs., fie să scrieți următoarea linie în codul HTML.

Click aici

Dacă ai un site simplu realizat în HTML, atunci ar trebui să scrii exact acest cod în editorul de pagini, schimbându-mi adresa cu a ta și specificând ancora ta. Va arata asa.

Acest lucru este, de asemenea, foarte important, este indicat să nu aruncați vizitatorul din resursă, ci să-l părăsiți. Folosind acest atribut, te vei asigura că un vizitator, făcând clic pe mai multe link-uri dintr-o singură pagină, nu va părăsi cea actuală, dar în același timp va deschide multe alte pagini. Acest lucru este important dacă promovați un site web.

Puteți adăuga un atribut de titlu la link, care este o etichetă de titlu și le permite motoarele de căutare să știe unde duce linkul. De asemenea, această etichetă este afișată (dacă este înregistrată) atunci când indicăm un link sub forma unui tooltip.

Când utilizați un motor, cum ar fi WordPress, adăugarea unui link către un site este foarte simplă, fără modificări în modul html. Editorul de postare are o pictogramă specială cu o pictogramă de conexiune.

În imagine am arătat întregul proces de adăugare a unei conexiuni între text și altă pagină.

1. Mai întâi, selectați fraza cu care doriți să faceți un link;
2. Faceți clic pe pictograma adăugare conexiune;
3. Setăm parametrii linkului (adresa paginii în care doriți să redirecționați utilizatorul, precum și titlul linkului, adică ancora, dacă este necesar).

Nu trebuie să introduceți titlul linkului, deoarece acesta va fi textul care a fost selectat în prima etapă. În imagine am arătat adăugarea de link-uri din paginile site-ului existente. Puteți face acest lucru, apoi când faceți clic pe una dintre intrările din listă, URL-ul și titlul vor fi introduse automat.

URL-ul poate fi introdus și pe un site extern. Dacă este necesar, introduceți adresa completă (absolută) a paginii. Pentru a deschide o pagină într-o filă nouă, nu este nevoie să introduceți manual atributul. Motorul oferă această opțiune folosind o casetă de selectare (vezi imaginea de mai sus).

Un pic mai sus am spus despre adresa absolută. Aceasta înseamnă că adresa completă a paginii către care trebuie să redirecționezi este scrisă în interiorul linkului, indiferent dacă este resursa noastră sau alta.

Există și o adresă relativă, când nu este necesară introducerea adresei complete. Este suficient doar să introduceți calea către un director sau o pagină a site-ului, fără a specifica numele domeniului. Astfel de link-uri funcționează numai pentru pagini dintr-o singură resursă. Nu te poți referi la un astfel de proiect extern.

Dacă doriți să vă aprofundați în procesul de creare a adreselor relative, vă recomand cu căldură citeste acest articol pe o altă resursă. Totul este foarte cool aranjat acolo.

Legătură poză

Link-urile sub formă de imagini sunt, de asemenea, utilizate pe scară largă, deși ar trebui să fie utilizate numai în scopul propus. Dacă suntem simple link-uri către alte pagini din site-ul nostru, atunci este mai bine să nu le facem cu imagini, deoarece nu este întotdeauna clar că trebuie să faceți clic pe imagine pentru a ajunge la o anumită pagină.

Este recomandabil să faceți acest lucru atunci când doriți să faceți publicitate cuiva, de exemplu, cursul video al cuiva. În acest caz, furnizați un hyperlink obișnuit, urmat imediat de un link imagine. În acest caz, va fi mai clar că imaginea duce la site-ul cursului de unde poate fi achiziționată.

Dacă luăm modul html, atunci principiul construirii structurii link-ului este exact același, incluzând toate atributele. Singura diferență este ancora link-ului, care arată ca codul pentru imagine în sine. În cazul precedent a existat un text simplu.

În practică, va arăta așa.

După cum puteți vedea, în interiorul etichetelor de deschidere și de închidere există un cod de imagine, care are și propriile sale caracteristici. Trebuie să includeți aceeași etichetă de titlu în ea, să indicați calea către imagine pe găzduire sau pe altă resursă. De asemenea, merită să specificați dimensiunile imaginii (lățime - lățime, înălțime - înălțime). Și cu siguranță ar trebui să includeți atributul alt, care servește ca descriere a imaginii. Dacă notați totul, atunci optimizarea imaginii va fi la egalitate.

Iată cum arată în modul html. Am împărțit codul în 3 părți pentru a face structura linkului mai ușor de înțeles (imaginea pe care se poate face clic).

Singura dificultate aici este să introduceți corect codul imaginii, care este folosit ca ancoră.

Butonul de link folosind stiluri CSS

Dacă vrei să faci ceva diferit, atunci această opțiune are și un loc în care să fii. Mai mult, vă permite să schimbați stilurile, astfel încât atunci când treceți cu mouse-ul peste un buton, atât butonul în sine, cât și culoarea inscripției care va fi în interiorul acestuia se vor schimba. Dacă faci o poză, atunci nu este întotdeauna posibil să realizezi acest lucru. Cu stiluri, orice este posibil.

Un alt avantaj foarte bun este că putem plasa butonul strict în centru și va putea fi clicat doar în zona butonului. Dacă luăm o imagine, atunci când o plasăm în centru, toată lățimea zonei de conținut din jurul imaginii va fi clicabilă. Uneori, un astfel de defect are ca rezultat un clic accidental pe imagine și, sincer, este enervant.

De exemplu, am creat un buton simplu care duce la pagina principală a site-ului. Puteți verifica funcționalitatea acestuia.

Iată structura butonului în sine.

Principiul este clar, așa că vă ofer stilurile pe care le-am adăugat la acest buton de link.

/* stiluri de buton în modul normal */ #button ( afișare: bloc; lățime: 550px; /* lățime buton */ înălțime: 60px; /* înălțime */ culoarea fundalului: #ff4343; /* culoarea fundalului */ text- umbră: 1px 1px #800909; /* umbra text */ culoare: #fff; /* culoarea textului */ stil chenar: solid; /* tip linie chenar buton */ lățime chenar: 1px; /* chenar buton grosime ( cadru) linie */ culoare-chenar: #db3a3a; /* culoare chenar (cadru) butonului */ dimensiunea fontului: 18px; /* dimensiunea textului */ înălțimea liniei: 60px; /* înălțimea textului liniar * / font- greutate: normal; /* greutate text */ font-family: arial; /* tip font */ text-align: center; /* text alignment */ text-decoration: none; /* text subliniat */ margin: 40px automat ; /* indentați butonul din alte elemente din pagină */ text-transform: majuscule; /* astfel încât toate literele să fie scrise cu majuscule. Dacă nu este necesar, eliminați linia */ ) /* stilurile butoanelor când treceți cursorul mouse-ului */ # buton:hover (culoarea fundalului: #f23333; dimensiunea fontului: 19px; )