Veebisaidid, ajaveebid, veebilehed – meie ajal juba tuttavad mõisted. Interneti arenedes on veebilehtede majutamiseks mõeldud saidid muutunud uskumatult populaarseks ja see pole üllatav: mõne inimese jaoks on oma veebisaidi olemasolu hädavajalik, mõne jaoks on see meeldiv meelelahutus. Esimesel juhul räägime tavaliselt ettevõtetest, korporatsioonidest, eraettevõtjatest, kui nad reklaamivad mis tahes nõutud toodet või teenust. Teine on blogijate kohta.
Lisaks sellele on Interneti-kasutajaid, kes lihts alt otsivad teavet, loevad ajaveebi, vaatavad videoid ja nii edasi.
Kvaliteetse veebisaidi loomiseks on palju võimalusi. Keskendume veebiprogrammeerimisele HTML-i kaudu.
Mis on HTML
HTML tähistab hüperteksti märgistuskeelt. Inglise keelest tõlgituna tähendab see "hüperteksti märgistuskeelt".
Teisisõnu, HTML on koodide komplekt, mille abil saate luua saidi põhielemente, selle raami, näitekskuidas sõnad lausetest koosnevad.
HTML-koodid on kirjutatud eranditult ladina tähtedega ja neid nimetatakse siltideks ning iga kood on suletud nurksulgudesse. Mõned sildid on seotud, mõned on sidumata.
Paaritud tähendab, et neid tuleb tõrgeteta kasutada paarikaupa. Näiteks algusmärgend näitab, kus see veebilehel algab, ja sulgev silt näitab, kus see peatub. Viimane erineb esimesest kaldkriipsu olemasolu pärast avamisnurksulgu. Näiteks on avasilt,on sulgev silt.
Sidemata sildid ei vaja partnerit.
Paljudel siltidel võivad olla atribuudid – lisaelemendid, mis annavad sellele konkreetsema tähenduse. Näiteks silt.
Kus HTML-i kasutatakse
Klassikaline arusaam HTML-i vajalikkusest on veebisaitide loomine.
Praktikas võib sellest piisata, kuna HTML võimaldab luua saidi põhielemente, menüüsid (sh mitmetasandilisi), määrata tausta, sisestada teksti, pilte, heli, videot, muuta fonte ja palju muud.
Kuid on ka teisi keeli, mis võimaldavad lisada veebilehele huvitavamaid ja sageli vajalikke elemente:
- CSS määrab stiilid kogu saidile, ilma et oleks vaja pidev alt ette kirjutada üksikute elementide stiilitunnuseid kasutades silte – näiteks teksti värvi ja fonti.
- Skriptikeel võimaldab teil arendada ja manustada saidile miniprogramme (skripte), mis ulatuvadbanaalsed esteetilised asjad (hiirega üle hõljutades lingi värvi muutmine) ja lõpetades funktsionaalsetega (kliendi meiliaadresside, telefoninumbrite kogumine).
- PHP abil saate arendada oma külalisteraamatut või kommenteerimissüsteemi.
Ka HTML-i kasutatakse levitamiseks mõeldud meilide koostamisel.
Mis on link
Need võimaldavad teil navigeerida teisele veebilehele nii saidi sees kui ka väljaspool.
HTML-linke kasutatakse tavaliselt:
- Välise veebiressursi avamiseks.
- Saidi lehtedel liikumiseks.
- Google'i vormide avamiseks.
Tihti näidatakse ka link HTML-i allikale, eriti kuna teiselt saidilt materjali kopeerimisel tuleb määrata autor. Vastasel juhul võib ilma omistamiseta kopeerimine kuuluda autoriõiguste rikkumise, sisuvarguse ja tagasilöökide määratluste alla. Lisaks vähendab laenatud, mitteunikaalsete materjalide kasutamine SEO jõudlust ja allikale viitamine vähendab riske.
Lingide tüübid
Klassikalises mõttes on link veebiressursi aadress, millele pääsete sellel klõpsates.
Peale selle on hüperlingid: tekst ja pildid. Sellistel juhtudel on HTML-link "peidetud" mõne lause (sõna) või pildi alla ja selle järgimiseks tuleb klõpsata tekstil või pildil.
Muud tüüpi lingid:
- Külastamata – link, millele pole konkreetse seansi ajal veel klõpsatud. Näiteks kui järgisite seda linki eile, siis lülitasite arvuti välja ja täna uuesti sisse, siis nüüd on link uuesti külastamata, kuna on alanud uus seanss.
- Aktiivne – selles olekus salvestatakse link väga lühikest aega: intervall lingil klõpsamise ja selle jälgimise vahel.
- Külastatud – link, mida on ühe seansi jooksul juba vähem alt korra külastatud.
Tavaliste tekstilinkide puhul kipuvad külastatud linkide värvi muutma, kui pole teisiti määratud.
Hüperlingitud pilt ei muuda selle välimust olenemata sellest, kas seda külastatakse või mitte.
Kuidas lisada tavalist linki
Paljud veebiressursid tajuvad saidi aadressi lingina, muudavad selle kohe klõpsatavaks ja tõstavad selle värviga esile. Näiteks kui aadress saadetakse messengeris või e-postiga, saate sellel klõpsates saidile minna.
Kui loote saidi ise, kasutades HTML-i, peate lisama lingi spetsiaalse sildi abil. See näeb välja selline: veebisaidi aadress. HTML-i lingi tekst peab olema täielikult määratud koos protokolliga.
Kuidas lisada teksti hüperlinki
Varem öeldi, et tekstiline hüperlink täidab sama funktsiooni kui tavaline link, kuid näeb esteetiliselt meeldivam välja: saidi aadressi asemel, mis on sageli tarbetult pikk, märgitakse sõna või fraas. Näiteks lauses "Otsi infot siit" saate lingi sisse peitasõna "siin". See tõstetakse esile ja sellel klõpsates suunatakse kasutaja soovitud saidile.
Kuidas teha HTML-linki, on juba varem juttu olnud. Saate sisestada teksti hüperlingi sama sildi abil. Ainus erinevus on see, et peate siltide vahel määrama teksti, mille alla link peidetakse: nähtav tekst.
Kuidas lisada pildi hüperlinki
Siin on natuke keerulisem. Kasutame sama silti, kuid teksti asemel peate määrama pildi tee.
Tee on pildi asukoht. Kui pilt (foto) asub failijagamisteenuses, peate kaldkriipsuga määrama kõik pildi teekonnas olevad kaustad. Võimalusel võite lisada ka lingi pildile.
Märgistamiseks
Lisaks src-le on rakendatavad ka muud atribuudid, mis võimaldavad reguleerida pildi kõrgust, laiust ja asukohta ning palju muud. Mõned neist:
- Src – määrab pildi tee.
- Lowsrc – identne eelmise atribuudiga, kuid määratud madala kvaliteediga piltide jaoks.
- Kõrgus – pildi kõrgus.
- Width – selle laius.
- Alt – pildi kirjeldus. Kui hõljutate kursorit foto või pildi kohal, kuvatakse sellel atribuudil määratud tekst.
- Border – määrab pildi ümber oleva äärise paksuse.
Atribuudid määratakse märgendi järel ja need sisalduvadselle koostis. Atribuudile peab järgnema selle väärtus. Näiteks atribuutide "height" või "width" (kõrgus, laius) jaoks määrab veebilehel oleva pildi kõrguse. Mõõtühikuks on pikslid, kui pole teisiti määratud.
See näeb välja selline: <a href="veebilehe aadress"
. Need atribuudid aitavad määrata pildile sobiva suuruse. Ääris aitab luua pildi ümber nähtamatu äärise.
Ül altoodud atribuudid kehtivad pildi sisestamise sildi kohta eraldi. Näiteks:.
Mis on ankurlingid
Ankurlinkide loomine on väga kasulik oskus. Sageli on vaja veebilehte paigutada pika tekstiplokiga või mitme alajaotusega ühel lehel. Sel juhul saate kohe alustada teksti või veebilehe alajaotiste linkide loendiga ja kui klõpsate sellel, läheb kasutaja otse soovitud jaotisesse.
Ankurlinkide loomine nõuab rohkem atribuudimärgendite kasutamist kui muud tüüpi linkide puhul.
Esm alt peate määrama iga teabeploki või teksti alajaotuse üldise väärtuse, kasutades atribuuti top, ja seejärel seostama selle vastava lingiga.
Nende funktsioonid on ulatuslikumad, seetõttu on soovitatav esm alt selgeks teha lihtsamate linkide loomine ja seejärel liikuda edasi ankurlinkide moodustamise juurde.
Nõuanded
Kogenud abiprogrammeerijad:
- Saate muuta nii, et teave lingi kohta kuvatakse kursoril HTML-is. Selleks võib abiks olla atribuut alt, mida kasutame ka graafiliste elementide puhul.
- HTML-i abil on võimalik koostada linkide loend. Eelkõige võib see olla kasulik ankurlinkide puhul, aga ka siis, kui peate koostama veebiressursside loendi, millele saab järgneda link otse praeguselt veebilehelt.
- CSS-i ja JavaScripti ning mõne HTML-i funktsiooni abil saate luua tekstilinkide ja hüperlinkide tavapärasest erineva kujunduse. Näiteks kui hõljutate kursorit lingi kohal, võib see muuta oma värvi ja naasta eelmisele, kui kursor on sellest eemal. Seda saab teha kohandatud JavaScripti skriptiga. Lisaks saab lingi värviks määrata midagi muud kui sinine (külastamata) või lilla (külastatud). See on CSS-i töö.
- Ärge kuritarvitage linke. Paljude sobimatute linkidega veebileht näeb välja lohakas ja lohakas.
- Veenduge, et kasutaja mõistab, et pildiga hüperlink on tõesti pilt, mitte lihts alt pilt.
Järeldus
HTML-vormingus lehele on väga lihtne linkida. Oluline on järgida kõiki selle keele põhipunkte, sest isegi väike viga võib viia selleni, et tulemust ei tule ja kood ei tööta.
