{"id":563,"date":"2020-05-01T20:37:14","date_gmt":"2020-05-01T20:37:14","guid":{"rendered":"https:\/\/ramk.ee\/opikud\/veebidisain\/?post_type=chapter&p=563"},"modified":"2020-05-12T06:08:39","modified_gmt":"2020-05-12T06:08:39","slug":"html-atribuudid","status":"publish","type":"chapter","link":"https:\/\/ramk.ee\/opikud\/veebidisain\/chapter\/html-atribuudid\/","title":{"rendered":"HTML atribuudid"},"content":{"raw":"
\r\n

HTML atribuudid<\/p>\r\n\r\n<\/header>\r\n

\r\n
    \r\n \t
  • K\u00f5ik HTML elemendid v\u00f5ivad omada atribuute<\/strong><\/li>\r\n \t
  • Atribuudid pakuvad elementide kohta lisateavet<\/strong><\/li>\r\n \t
  • Atribuudid lisatakse elemendi algusm\u00e4rgendisse<\/strong><\/li>\r\n \t
  • Atribuudid kirjutatakse enamasti kujul: atribuudi_nimi=\"v\u00e4\u00e4rtus\"<\/strong><\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/div>\r\nK\u00f5ik HTML elemendid v\u00f5ivad lisaks nimele omada ka atribuute, mis pakuvad elemendi kohta lisateavet. M\u00f5nikord on need valikulised, aga mitmel elemendil on ka kohustuslikke atribuute. Atribuudid lisatakse elemendi algusm\u00e4rgendisse<\/strong> kujul:\r\n\r\natribuudi_nimi=\"v\u00e4\u00e4rtus\"<\/code>\r\n\r\nNii v\u00f5ib m\u00f5ni element olla kirjutatud j\u00e4rgmisel kujul:\r\n\r\n<elemendinimi atribuut1=\"v\u00e4\u00e4rtus\" atribuut2=\"v\u00e4\u00e4rtus\"> Elemendi sisu <\/elemendinimi><\/code>\r\n

    Lingi aadressi atribuut (href)<\/h2>\r\nLingid HTML koodis m\u00e4\u00e4ratletakse <a><\/code> m\u00e4rgendiga. Lingi viide, kuhu kasutaja suunatakse, t\u00e4psustatakse href<\/code> (hypertext refrence<\/em>) atribuudiga:\r\n
    <a\u00a0href=\"https:\/\/ramkool.edu.ee\">See on lingi tekst<\/a><\/pre>\r\nLinkide loomisest tuleb t\u00e4psemalt juttu hilisemas peat\u00fckis.\r\n
    Allika atribuut (src)<\/h2>\r\nPildid HTML-koodis m\u00e4\u00e4ratletakse <img><\/code> m\u00e4rgendiga. Pildi allikas ja failinimi t\u00e4psustatakse src<\/code> (source<\/em>) atribuudiga:\r\n
    <img src=\"ramk_logo.png\"><\/pre>\r\n
    Alternatiivteksti atribuut (alt)<\/h2>\r\nalt <\/code>(alternative text<\/em>) atribuuti kasutatakse juhul, kui mingil p\u00f5hjusel ei saa kuvada veebilehele lisatud pilti. alt<\/code> atribuudiga m\u00e4\u00e4ratletakse alternatiivtekst, mida kuvatakse sellisel juhul pildi asemel. Sellest atribuudist on kasu ka vaegn\u00e4gijatele, sest ekraanilugerid saavad pildi asemel vajadusel ette lugeda alt<\/code> atribuudiga lisatud teksti.\r\n
    <img src=\"ramk_logo.png\" alt=\"Rocca al Mare Kooli logo\"><\/pre>\r\n
    Laiuse ja k\u00f5rguse atribuudid (width\/height)<\/h2>\r\nPiltidel v\u00f5ivad olla ka laiuse (width<\/code>) ja k\u00f5rguse (height<\/code>) atribuudid, mis m\u00e4\u00e4ravad \u00e4ra pildi laiuse ja k\u00f5rguse:\r\n
    <img src=\"ramk_logo.png\" width=\"300\" height=\"100\"><\/pre>\r\nLaius ja k\u00f5rgus on vaikimisi m\u00e4\u00e4ratud pikslites, seega laius = \"300\" t\u00e4hendab 300 pikslit.\r\n
    Stiili atribuut (style)<\/h2>\r\nstyle<\/code> atribuuti kasutakse elemendi stiliseerimiseks. Sellega saab muuta n\u00e4iteks elemendi v\u00e4rvi, suurust, kirjat\u00fc\u00fcpi vms.\r\n
    <p style=\"color:blue\">See tekstil\u00f5ik on sinist v\u00e4riv<\/p><\/pre>\r\n
    Keele atribuut (lang)<\/h2>\r\nAtribuut lang<\/code> (language<\/em>) on kasutusel tervel veebilehel v\u00f5i selle osades kasutatava keele deklareerimiseks! Keele deklareerimisest on kasu ekraanilugeritele ja otsingumootoritele.\r\n\r\nIgas HTML dokumendis kasutatav keel tuleks deklareerida elemendi <html><\/code> algusm\u00e4rgendis. N\u00e4iteks eesti keele deklareerimiseks kasutatakse l\u00fchendit et<\/strong>.\r\n
    <!DOCTYPE html>\r\n<html lang=\"et\">\r\n<body>\r\n...\r\n<\/body>\r\n<\/html><\/pre>\r\n
    Pealkirja atribuut (title)<\/h2>\r\ntitle<\/code> atribuudi lisamisel elemendile kuvatakse kasutajale hiirega elemendi peale liikudes v\u00e4ikeses h\u00fcpikaknas title<\/code> atribuudi v\u00e4\u00e4rtuseks kirjutatud tekst.\r\n
    <p title=\"esimene l\u00f5ik\">Siin on tekstil\u00f5ik<\/p><\/pre>\r\n
    Enesekontroll (3 k\u00fcsimust)<\/h3>\r\n[h5p id=\"7\"]\r\n
    \r\n
    Kokkuv\u00f5tteks<\/p>\r\n\r\n<\/header>\r\n
    \r\n
      \r\n \t
    • K\u00f5ik HTML elemendid v\u00f5ivad omada atribuute<\/strong><\/li>\r\n \t
    • Atribuudid kirjutatakse enamasti kujul: atribuudi_nimi=\"v\u00e4\u00e4rtus\"<\/strong><\/li>\r\n \t
    • href<\/code> atribuut m\u00e4\u00e4rab \u00e4ra viite, millele link kasutaja suunab<\/li>\r\n \t
    • src<\/code> atribuudiga m\u00e4\u00e4ratakse \u00e4ra pildi allikas<\/li>\r\n \t
    • width<\/code> ja height<\/code> atribuudid t\u00e4psustavad pildi laiuse ja k\u00f5rguse<\/li>\r\n \t
    • alt<\/code> atribuudiga lisatakse pildile alternatiivtekst<\/li>\r\n \t
    • style<\/code> atribuuti kasutatakse elemendi stiliseerimiseks<\/li>\r\n \t
    • lang<\/code> atribuudiga deklareeritakse dokumendis kasutatud keel<\/li>\r\n \t
    • title<\/code> atribuudiga saab kasutajale n\u00e4idata elemendi kohta lisainfot<\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/div>\r\n