Programmeerimise algõpe: HTML ankrud
Viide teisele lehele
editMe kõik teame, et linke (hyperlink) klõpsates saab mugavalt ühelt lehelt teisele liikuda.
Hüperlingi moodustab <a sildiga element (HTML tag). Otsime siis selle sama lehe koodist mõne lingi.
Näiteks:
<a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution/Share-Alike License</a>
See koosnebki ainult
- <a sildipaarist
- href atribuudist , mille väärtus http://creativecommons.org/licenses/by-sa/3.0/ määrab, kuhu klõpsijad edasi suunatakse.
- siltide vahelisest tekstist Creative Commons Attribution/Share-Alike License.
Kujundus
edit- Hüperlingi tekstile teeb veebilehitseja joone alla, aga teksti värv sõltub külastaja toimingutest.
- Sinine märgib uut lehte, mille aadressi prauseri mälus pole.
- Lilla märgib nähtud lehte, mille aadress on juba prauseri mälus.
- Punaseks teeb mõni prauser lingi, mida viimati vajutasid või millele jõudsid tabulaatorklahvi toksides.
Oma kodulehe linkide kujundust saab küll ise määrata, aga sest tõuseb rohkem segadust kui tulu. Näiteks värvipimedad võivad pidada lingiks igat allajoonitud sõna, ega pruugi leida linke, millel pole joont all. Üks huvitavamaid leiutisi tegi lingi nähtamatuks (kiri sai tausta värvi) just sel hetkel, kui sa kavatsesid teda vajutada.
Hoiatus
edit- title atribuudiga [2] saad anda kasutajale lisateavet selle HTML elemendi kohta, mille kohal arvutihiir (cursor) peatub.
Selgitav jutt ilmub mõne hetke pärast elemendi kõrvale kollaka taustaga raami ja kaob, kui hiir selle elemendi pealt lahkub. Nii saame vältida oma kallite külastajate vihastamist asjadega, mis neid ei huvita.
Näiteks selline kood:
<a
href="http://www.w3schools.com/"
title="Kui sa seda linki vajutad, siis lähed inglise keelsele lehele, kus ei ole tänaseid uudiseid. Lehe aadress on: 'http://www.w3schools.com/' "
>Näed lingi aadressi, kui hoiad hiirt siin mõne sekundi
</a>
loob lingi, mis hoiatab lugejat, kuhu ta satub, kui lingile vajutab.
Tabulaator
editLinke, nuppe ja muid tundlikke prauseriakna osi pidi saab liikuda ka toksides tabulaatorklahvi.
|<-- -->|
Kui oled toksides jõudnud õigele kohale ja vajutad [Enter] klahvi, siis peaks sel olema sama toime, kui hiire vasakklõpsul.
- accesskey atribuudiga [3] saad määrata, mis järjekorras sa tabulaatorklahviga lehte mööda liigud. Sel on mõtet keerukama paigutuse puhul.
Järjehoidja
edit- name atribuudiga [4] <a elemendiga saad panna järjehoidjaid oma lehele, kui tahad, et mõni link tooks kohe õige lõigu juurde ega jääks pidama lehekülje algusse.
- Järjehoidjal endal href atribuuti pole.
- Järjehoidja leidmiseks lisatakse hüperlingi href atribuudi ehk lehe aadressi lõppu # märgi järele järjehoidja nimi (name atribuudi väärtus).
Näiteks selline kood:
<a
href="#esimenePeatükk"
>Siia kliksates saad esimese peatüki juurde.
</a>
loob lingi, millele vajutamine viib samal lehel sinna, kus on koodis selline järjehoidja:
<a
name="esimenePeatükk"
/>
Kui aadress algab # märgiga, tähendab see, et liigume ringi samal lehel, kus oleme.
Aga selline kood:
<a
href="http://wikimediafoundation.org/wiki/Frequently_Asked_Questions#Who_are_the_members_of_the_Wikimedia_Foundation_Staff.3F"
>Siia kliksates jõuad "Who are the members of the Wikimedia Foundation Staff?" alapealkirja juurde ühel teisel lehel.
</a>
loob lingi, millele vajutamine viib meid hoopis teisele lehele http://wikimediafoundation.org/wiki/Frequently_Asked_Questions järjehoidja juurde, mille name atribuudiks on Who_are_the_members_of_the_Wikimedia_Foundation_Staff.3F.
Ülesanne
edit- 1. Uuri, mis juhtub, kui lisad lingile atribuudi target="_blank" [5] !
- 2. Võta tekst sellelt samalt või mõnelt muult Creative Commons Attribution/Share-Alike-litsentsi tingimustel kasutatavalt leheküljelt ja salvesta oma kodulehe kausta võimalikult sarnase kujundusega HTML lehena aga ilma CSS'i abita. Lisa ka lingid ja järjehoidjad.
- Paranda alati vead (, kui neid on), et failid valideeruksid [6] ! Kasuta sellist standardit:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="et" xml:lang="et" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title> Lingid ja järjehoidjad </title>
</head>
<body>
Oma kood kirjuta siia!
</body>
</html>
Vastused
edit- õpilane : "
- see ei tööta miskipärast <a href="http://www.hot.ee/mikihiir/abc.html#akepladi>"Siia ... </a>
- kas seal on üldse see link lõpus? minule ei näita - ei oma arvutis ega hotis "
- õpetaja : "
- Näen ainult koodis miskipärast.
- See on liiga vigane kood: <Tee...</p>
- Prauser arvab, et <Tee... on mingi xml element ja </p> on mingi arusaamatu jupp selle elemendi sees.
- Selleks ongi hea valideerida.
- õpetaja : "
- õpilane : " valideerimisel õiendab ka selle lingi kallal, mida ei näita, aga ma ei saa aru, mida ta must tahab "
- õpetaja : "
- href="http://www.hot.ee/mikihiir/abc.html#akepladi>"
- Loe aga, mispärast ta kurjustab ja ENAMASTI ongi kõik selge.
- õpetaja : "
"
- õpilane : "
- ma ei saanud päris täpselt aru, mida ma sealt veel otsima pidin?
- Võta tekst sellelt samalt või mõnelt muult Creative Commons Attribution/Share-Alike-litsentsi tingimustel kasutatavalt leheküljelt ja salvesta oma kodulehe kausta võimalikult sarnase kujundusega HTML lehena aga ilma CSS'i abita. Lisa ka lingid ja järjehoidjad.
"
- õpetaja : "
- Püüa mingi taoline paigutus saada atribuutide abil, aga ilma CSS'ita! Kui sa selle lehe koodi vaatad siin, siis see on igasugu rämpsu täis, aga saab kujundada ka vähemaga. Tekst on suva. Võid mõne tühjema lehe võtta.
- õpetaja : "
"
- õpilane : "
- aga esialgu püüan nende ülesannetega hakkama saada... siis proovin neid praktikas rakendama hakata
"
- õpetaja : "
- See mõte oligi.
- õpetaja : "
"