{"id":378,"date":"2020-12-23T19:36:10","date_gmt":"2020-12-23T19:36:10","guid":{"rendered":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/?post_type=chapter&p=378"},"modified":"2021-01-03T15:34:08","modified_gmt":"2021-01-03T15:34:08","slug":"lisalugemine-html","status":"publish","type":"chapter","link":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/chapter\/lisalugemine-html\/","title":{"raw":"Lisalugemine: HTML","rendered":"Lisalugemine: HTML"},"content":{"raw":"

Sissejuhatus<\/h2>\r\nVeebilehtede puhul kasutatakse HTML-keelt (HyperText Markup Language<\/em>). Kui avada HTML-dokument (html- v\u00f5i htm-laiendiga fail) brauseriga, on n\u00e4ha tekstid, pildid, videod jne. Kui aga avada sama fail tekstiredaktoriga (nt Notepad), on n\u00e4ha ka HTML-keele elemente ehk avaneb koodvaade, kus on v\u00f5imalik dokumendi sisu muuta ja t\u00e4iendada. Kui avada \u00fcks ja sama dokument nii brauseri kui ka tekstiredaktoriga, saab p\u00e4rast muudatuse tegemist kohe vaadata, milline on tulemus (p\u00e4rast koodvaates muudatuse tegemist vajutada brauserivaates refresh<\/em>).\r\n\r\nHTML-koodi elemendid kirjutatakse erim\u00e4rkide <<\/code> ja ><\/code> vahele, nt <b><\/code> t\u00e4histab paksus kirjas teksti algust ja <\/b><\/code> l\u00f5ppu. Ei ole oluline, kas elemendid kirjutada suur- v\u00f5i v\u00e4iket\u00e4htedega (<B><\/code> ja <b><\/code> on m\u00f5lemad korrektsed). Samuti ei ole oluline, kas tekstiredaktoris on elemendid j\u00e4rjest v\u00f5i eri ridadele liigendatud. Siiski on m\u00f5istlik koodi parema loetavuse huvides liigendada.\r\n

HTML-dokumendi p\u00f5histruktuur<\/h2>\r\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>Pealkiri, mis on n\u00e4ha dokumendi p\u00e4ises<\/title>\r\n<\/head>\r\n<body>\r\nLehek\u00fclje sisu, sh ka tekstide pealkirjad\r\n<\/body>\r\n<\/html><\/pre>\r\nLihtsa lehek\u00fclje loomiseks avame tekstiredaktori (n\u00e4iteks Notepad) ja lisame sinna HTML-dokumendi p\u00f5histruktuuri ja lehek\u00fclje sisuosasse l\u00fchikese teksti. N\u00fc\u00fcd valime men\u00fc\u00fcst Fail \u2192 Salvesta nimega<\/em>. Avanenud aknas valime kataloogipuust asukoha, kuhu tahame faili salvestada, paneme failile nime ja lisame html-laiendi. Salvestust\u00fc\u00fcbiks valime K\u00f5ik failid<\/em>, kodeeringuks UTF-8 ning vajutame Salvesta<\/em>.\r\n\r\n\"html-faili\r\n\r\nKui me tahame vaadata, kuidas sisu kuvatakse, otsime \u00fcles faili, m\u00e4rgime \u00e4ra, vajutame paremat hiireklahvi. N\u00fc\u00fcd avaneb men\u00fc\u00fc, kust valime Ava programmiga<\/em> ja seej\u00e4rel selle brauseri programmi, millega soovime faili avada.\r\n\r\n\"HTML-faili\r\n\r\nKui me n\u00fc\u00fcd soovime midagi muuta, avame sama faili lisaks ka Notepadis. M\u00e4rgime sama faili uuesti, vajutame paremat hiireklahvi. Avanenud men\u00fc\u00fcst valime Ava programmiga<\/em> ja seej\u00e4rel Notepad. N\u00fc\u00fcd on meil sama fail avatud kahe programmiga. Saame teha Notepadis muudatusi ja minna brauseri programmi vaatesse ja vajutada seal Refresh<\/em> ja n\u00e4ha, mis muutus.\r\n
HTML-failide laadimine serverisse<\/h2>\r\nFailide serverisse laadimiseks on mugav kasutada FTP-programmi. Selleks sobib nt Filezilla, mille saab alla laadida aadressilt https:\/\/filezilla-project.org\/<\/a>)\r\n\r\nP\u00e4rast programmi k\u00e4ivitamist on vaja sisestada serveri nimi, kasutajanimi ja parool. Neid meil veel ei ole. Seega on meil vaja teha konto teenuspakkuja juures, kes pakub veebiruumi. Tasuta veebiruumi pakub n\u00e4iteks Awardspace (https:\/\/www.awardspace.com\/<\/a>).\r\n
    \r\n \t
  1. Registreerime ennast kasutajaks.<\/li>\r\n \t
  2. Logime sisse ja registreerime alamdomeeni (aadressi kujul kasutaja.atwebpages.com, kus s\u00f5na kasutaja asemel on enda alamdomeeni nimi, on vaja Filezillaga sisse logides).\r\n\"HTML-failide\"HTML-failide<\/li>\r\n \t
  3. Registreerime FTP-kasutajakonto (FTP-konto kasutajatunnuseid on vaja Filezilla kaudu serverisse sisse logides).\r\n\"FTP-kasutajakonto\"FTP-kasutajakonto<\/li>\r\n \t
  4. Logime Filezillaga FTP-serverisse, kasutades alamdomeeni nime ja FTP kasutajatunnuseid.\r\nServer: kasutaja.atwebpages.com, kus kasutaja on enda alamdomeeni nimi\r\nKasutajanimi: FTP-konto kasutajanimi\r\nParool: FTP-konto parool<\/li>\r\n<\/ol>\r\n
    Filezilla<\/h2>\r\nNagu eespool juba mainisime, on failide serverisse laadimiseks mugav kasutada FTP-programmi. Selleks sobib nt Filezilla, mille saab alla laadida aadressilt https:\/\/filezilla-project.org\/<\/a>.\r\n\r\nP\u00e4rast programmi k\u00e4ivitamist on vaja sisestada serveri nimi, kasutajanimi ja parool.\r\n\r\nKui Filezilla kaudu serverisse sisselogimine \u00f5nnestus, avaneb vasakul arvuti kataloogipuu ja paremal serveri oma. Arvuti kataloogipuust tuleb leida failid, mida \u00fcles laadida; serveris aga on vaja avada kataloog, kuhu failid panna.\r\n\r\n\"Filezilla\"\r\n
    M\u00f5ned elemendid ja nende t\u00e4hendused<\/h2>\r\n<br><\/code> - reavahetus\r\n<p><\/code> - l\u00f5ik\r\n<b><\/code> - paks kiri\r\n<i><\/code> - kursiivis kiri\r\n<u><\/code> - allajoonitud kiri\r\n<h1><\/code> - esimese taseme pealkiri\r\n<h2><\/code> - teise taseme pealkiri\r\n<h3><\/code> - kolmanda taseme pealkiri\r\n\r\nElemendil on \u00fcldjuhul m\u00e4rgend alguses ja l\u00f5pus. N\u00e4iteks on esimese taseme pealkirja puhul alguses <h1><\/code> ja l\u00f5pus <\/h1><\/code>. Sarnaselt on algus ja l\u00f5pp ka teiste elementide puhul. Erandiks on reavahetus <br><\/code>, mis lisatakse reavahetuse m\u00e4rkimiseks.\r\n
    Elementide kasutamise n\u00e4ited<\/h2>\r\nAllpool on kolm n\u00e4idet elementide \u00f5ppimiseks, kus k\u00f5igepealt on pilt brauserivaatest ja seej\u00e4rel sama dokumendi kood.\r\n\r\nLihtne lehek\u00fclg\r\n\r\n\"Elementide\r\n
    <!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>R\u00e4\u00e4gime lindudest<\/title>\r\n<\/head>\r\n<body>\r\n<p>Lindude klass jaguneb 27. seltsiks.<\/p>\r\nR\u00e4\u00e4gime l\u00e4hemalt neist seltsidest, kelle esindajaid Eestis rohkem elab.<br>\r\nLisaks k\u00f5neleme lennuv\u00f5imetutest lindudest, kes on oma klassi erilised esindajad.\r\n<\/body>\r\n<\/html><\/pre>\r\nPealkirjad ja teksti esiletoomised\r\n\r\n\"Pealkirjad\r\n
    <!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>R\u00e4\u00e4gime lindudest<\/title>\r\n<\/head>\r\n<body>\r\n<h1>Lennuv\u00f5imetud linnud<\/h1>\r\n<h2>Toonekurelised<\/h2>\r\n<h3>Hanelised<\/h3>\r\n<p>Lindude klass jaguneb <i><u><b>27. seltsiks.<\/b><\/u><\/i><\/p>\r\n<b>R\u00e4\u00e4gime l\u00e4hemalt neist seltsidest, kelle esindajaid Eestis rohkem elab.<\/b><br>\r\nLisaks k\u00f5neleme lennuv\u00f5imetutest lindudest, kes on oma klassi erilised esindajad.\r\n<\/body>\r\n<\/html><\/pre>\r\nLoendid\r\n\r\n\"Loendid\"\r\n
    <!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>Loendid<\/title>\r\n<\/head>\r\n<body>\r\n<h3>Nummerdatud loend<\/h3>\r\n<ol>\r\n<li>Esimene rida<\/li>\r\n<li>Teine rida<\/li>\r\n<\/ol>\r\n<h3>Nummerdamata loend<\/h3>\r\n<ul>\r\n<li>Esimene rida<\/li>\r\n<li>Teine rida<\/li>\r\n<\/ul>\r\n<\/body>\r\n<\/html><\/pre>\r\nJ\u00e4rgnevalt tutvustame mitmeid v\u00f5imalusi HTML-koodi kirjutamisel.\r\n
    Teksti suuruse m\u00e4\u00e4ramine<\/h2>\r\nTeksti suuruse m\u00e4\u00e4ramine tekstiosale\r\n
    <span style=\"font-size:14px\">tekst<\/span><\/pre>\r\nTeksti suuruse m\u00e4\u00e4ramine l\u00f5igule\r\n
    <p style=\"font-size:14px\">tekst<\/p><\/pre>\r\n
    Teksti v\u00e4rvi m\u00e4\u00e4ramine<\/h2>\r\nV\u00e4rvi m\u00e4\u00e4ramine tekstiosale\r\n
    <span style=\"color:#7b68ee\">tekst<\/span><\/pre>\r\nV\u00e4rvi m\u00e4\u00e4ramine tekstile l\u00f5igu atribuudina\r\n
    <p style=\"COLOR:red\">tekst<\/p>\r\n<p style=\"COLOR:#7b68ee\">tekst<\/p><\/pre>\r\n \r\n\r\nSobivate v\u00e4rvikoodide leidmiseks on loodud erinevaid vahendeid, n\u00e4iteks HTML Color Picker<\/em> aadressil https:\/\/www.w3schools.com\/colors\/colors_picker.asp<\/a> ja HTML Color Mixer<\/em> aadressil https:\/\/www.w3schools.com\/colors\/colors_mixer.asp<\/a>.\r\n
    Taustale v\u00e4rvi m\u00e4\u00e4ramine<\/h2>\r\n
    <body style=\"background-color:#ccefff\"><\/pre>\r\nKui lisada taustav\u00e4rv, n\u00e4eb HTML-dokumendi p\u00f5histruktuur v\u00e4lja selline:\r\n
    <!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>Pealkiri, mis on n\u00e4ha dokumendi p\u00e4ises<\/title>\r\n<\/head>\r\n<body style=\"background-color:#ccefff\">\r\nLehek\u00fclje sisu, sh ka tekstide pealkirjad\r\n<\/body>\r\n<\/html><\/pre>\r\nNB!<\/strong> Taustav\u00e4rv defineeritakse elemendi <body><\/code> atribuudina. Element <body><\/code> on \u00fche lehek\u00fclje koodis alati \u00fcks kord.\r\n
    Materjali tsentreerimine<\/h2>\r\nTsentreerimiseks saame kasutada elementi <div><\/code>.\r\n
    <div style=\"text-align:center\">tekst<\/div><\/pre>\r\n
    Linkide lisamine<\/h2>\r\nLingid teistele HTML-failidele\r\n\r\nTeistele failidele linkimine on lihtne siis, kui need asuvad samas kataloogis. Sellisel juhul tuleb n\u00e4idata vaid faili nimi:\r\n
    <a href=\"kalad.html\">Kalad<\/a><\/pre>\r\nKasutaja n\u00e4eb linki Kalad ja sellele vajutades j\u00f5uab ta lehele kalad.html.\r\n\r\nLingid teistele kodulehek\u00fclgedele\r\n
    <a href=\"https:\/\/www.ut.ee\/\">Tartu \u00dclikool<\/a><\/pre>\r\nKasutaja n\u00e4eb linki Tartu \u00dclikool, millele vajutades j\u00f5uab aadressile https:\/\/www.ut.ee\/<\/a>\r\n\r\nSelleks, et lingile vajutades avaneks leht uues aknas, tuleb lisada atribuut target=\"_blank\":\r\n
    <a href=\"https:\/\/www.ut.ee\/\" target=\"_blank\">Tartu \u00dclikool<\/a><\/pre>\r\nLinkide v\u00e4rvi m\u00e4\u00e4ramine\r\n
    <a style=\"color:red\" href=\"http:\/\/www.ut.ee\/\">Lingi nimi<\/a><\/pre>\r\n
    Piltide lisamine<\/h2>\r\nSelleks, et pilte veebi lisada, tuleb need esmalt serverisse laadida. Lisaks sellele lisame m\u00e4rgendid ka html-koodi, kus tuleb m\u00e4rkida ka pildi nimi ja laiend, mis peavad kattuma serverisse lisatud pildiga. Veebi panemiseks sobivad pildiformaadid on n\u00e4iteks jpg-, png- ja gif-laiendiga failid. Veebi ei sobi mahukad pildiformaadid, n\u00e4iteks tif- ja bmp-failid.\r\n\r\nKui pildid ja html-failid on serveris samas kaustas, piisab pildi nimest.\r\n
    <img src=\"maja.gif\">\r\n<img src=\"maja.jpg\"><\/pre>\r\nKui pildid ja html-failid on serveris erinevates kaustades, tuleb lisada kausta nimi v\u00f5i kasutada t\u00e4ispikka aadressi. Kui pildid asuvad alamkaustas, tuleb lisada kausta nimi. Kui html-failid asuvad sama tasandi teises alamkaustas (nt on html-failid kaustas html<\/em> ja pildid kaustas pildid<\/em>), tuleb ette lisada ka ..\/<\/code>.\r\n
    <img src=\"pildid\/maja.jpg\">\r\n<img src=\"..\/pildid\/maja.jpg\">\r\n<img src=\"http:\/\/web.zone.ee\/heids\/html\/filezilla.jpg\"><\/pre>\r\nPildi alternatiivtekst\r\n\r\nAlternatiivtekst on vajalik selleks, et kasutaja saaks pildi kohta infot siis, kui pilti mingil p\u00f5hjusel ei kuvata. Nimelt kuvatakse alt-atribuudiga m\u00e4\u00e4ratud tekst sellisel juhul pildi asemel.\r\n
    \u00a0<img src=\"kajakas.gif\" alt=\"Kajakas\"><\/pre>\r\nPildi laius ja k\u00f5rgus\r\n\r\nPildi laius ja k\u00f5rgus pikslites m\u00e4\u00e4ratakse atribuutidega width<\/em> ja height<\/em>.\r\n
    <img src=\"kajakas.gif\" alt=\"Kajakas\" width=\"50\" height=\"100\"><\/pre>\r\nRuum pildi \u00fcmber\r\n\r\nKasutades stiiliatribuuti style, saame m\u00e4\u00e4rata, kui palju ruumi j\u00e4\u00e4b pildist vasakule, paremale, \u00fcles ja alla. Omaduse margin j\u00e4rel n\u00e4itab esimene number, kui palju j\u00e4etakse ruumi pildist \u00fcles ja alla, teine number m\u00e4\u00e4rab ruumi vasakul ja paremal.\r\n\r\nRuum pildi \u00fcmber vasakul ja paremal\r\n
    <img src=\"maja.jpg\" alt=\"Maja\" style=\"margin:0px 30px\"><\/pre>\r\nRuum pildi \u00fcmber \u00fcleval ja all\r\n
    <img src=\"maja.jpg\" alt=\"Maja\" style=\"margin:30px 0px\"><\/pre>\r\n
    Videote vistutamine<\/h2>\r\nYoutube\u2019i video vistutamine\r\n
    <iframe src=\"http:\/\/www.youtube.com\/embed\/vL9ZnBy4yng\" frameborder=\"0\" width=\"600\" height=\"337\" allowfullscreen><\/iframe><\/pre>\r\nVimeo video vistutamine\r\n
    <iframe src=\"https:\/\/player.vimeo.com\/video\/xxx\" width=\"600\" height=\"337\" frameborder=\"0\" webkitallowfullscreen mozallowfullscreen allowfullscreen><\/iframe><\/pre>\r\n
    Lihtsamate tabelite loomine<\/h2>\r\nTabeli loomiseks on meil vaja elementi <table><\/code>, tabelisse tuleb eraldi luua read, mille sisse omakorda lahtrid. Ridade loomiseks saame kasutada elementi <tr><\/code> ja lahtrite jaoks <td><\/code>. Seega on tabeli loomise peamised elemendid j\u00e4rgmised:\r\n\r\n<table><\/code> - tabel\r\n<tr><\/code> - rida\r\n<td><\/code> - lahter\r\n\r\nJ\u00e4rgnevalt loome tabeli, millel on kaks rida ja igas reas kolm lahtrit. Tabeli laiuseks m\u00e4\u00e4rame selles n\u00e4ites 400 pikslit.\r\n
    <table style=\"width:400px\u201d>\r\n<tr>\r\n<td>1. rea 1. lahter<\/td>\r\n<td>1. rea 2. lahter<\/td>\r\n<td>1. rea 3. lahter <\/td>\r\n<\/tr>\r\n<tr>\r\n<td>2. rea 1. lahter<\/td>\r\n<td>2. rea 2. lahter<\/td>\r\n<td>2. rea 3. lahter<\/td>\r\n<\/tr>\r\n<\/table><\/pre>\r\nTulemuseks saame j\u00e4rgneva tabeli:\r\n\r\n\"Tabeli\r\n\r\nKui soovime lisada veergudele pealkirjad, siis lisame algusesse \u00fche rea, kus kasutame lahtri elementide asemel veeru pealkirja elemente ehk <td><\/code> asemel <th><\/code>.\r\n
    <table style=\"width:400px\">\r\n<tr>\r\n<th>1. veeru pealkiri<\/th>\r\n<th>1. veeru pealkiri<\/th>\r\n<th>1. veeru pealkiri<\/th>\r\n<\/tr>\r\n<tr>\r\n<td>1. rea 1. lahter<\/td>\r\n<td>1. rea 2. lahter<\/td>\r\n<td>1. rea 3. lahter<\/td>\r\n<\/tr>\r\n<tr>\r\n<td>2. rea 1. lahter<\/td>\r\n<td>2. rea 2. lahter<\/td>\r\n<td>2. rea 3. lahter<\/td>\r\n<\/tr>\r\n<\/table><\/pre>\r\nTulemuseks saame j\u00e4rgneva tabeli:\r\n\r\n\"Tabeli\r\n\r\nKui soovime, et tabelitel oleksid ka jooned, saame kasutada omadust border. Kui soovime lisada 1 piksli laiuse musta joone, siis lisame HTML-dokumenti j\u00e4rgneva koodi:\r\n
    <style>\r\ntable, th, td {\r\n\u00a0 border: 1px solid black;\r\n}\r\n<\/style><\/pre>\r\nN\u00fc\u00fcd on meie HTML-dokumendi kood j\u00e4rgnev:\r\n
    <!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>Tabelid<\/title>\r\n<style>\r\ntable, th, td {\r\n\u00a0 border: 1px solid black;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<table style=\"width:400px\">\r\n<tr>\r\n<th>1. veeru pealkiri<\/th>\r\n<th>1. veeru pealkiri<\/th>\r\n<th>1. veeru pealkiri <\/th>\r\n<\/tr>\r\n<tr>\r\n<td>1. rea 1. lahter<\/td>\r\n<td>1. rea 2. lahter<\/td>\r\n<td>1. rea 3. lahter<\/td>\r\n<\/tr>\r\n<tr>\r\n<td>2. rea 1. lahter<\/td>\r\n<td>2. rea 2. lahter<\/td>\r\n<td>2. rea 3. lahter<\/td>\r\n<\/tr>\r\n<\/table>\r\n<\/body>\r\n<\/html><\/pre>\r\nTulemuseks on selline tabel:\r\n\r\n\"Tabeli\r\n\r\nKui soovime, et tabelil mitmekordseid jooni ei ole, saame kasutada omadust border-collapse<\/code>:\r\n
    <style>\r\ntable, th, td {\r\n\u00a0 border: 1px solid black;\r\n\u00a0 border-collapse: collapse;\r\n}\r\n<\/style><\/pre>\r\n\"Tabeli\r\n\r\nKui soovime, et tabeli sisu ja joonte vahel oleks ruumi, saame kasutada omadust padding<\/code>, lisades n\u00e4iteks padding: 10px<\/code>;\r\n
    <style>\r\ntable, th, td {\r\n\u00a0 border: 1px solid black;\r\n\u00a0 border-collapse: collapse;\r\n\u00a0 padding: 10px;\r\n}\r\n<\/style><\/pre>\r\n\"Tabeli","rendered":"
    Sissejuhatus<\/h2>\n
    Veebilehtede puhul kasutatakse HTML-keelt (HyperText Markup Language<\/em>). Kui avada HTML-dokument (html- v\u00f5i htm-laiendiga fail) brauseriga, on n\u00e4ha tekstid, pildid, videod jne. Kui aga avada sama fail tekstiredaktoriga (nt Notepad), on n\u00e4ha ka HTML-keele elemente ehk avaneb koodvaade, kus on v\u00f5imalik dokumendi sisu muuta ja t\u00e4iendada. Kui avada \u00fcks ja sama dokument nii brauseri kui ka tekstiredaktoriga, saab p\u00e4rast muudatuse tegemist kohe vaadata, milline on tulemus (p\u00e4rast koodvaates muudatuse tegemist vajutada brauserivaates refresh<\/em>).<\/p>\n
    HTML-koodi elemendid kirjutatakse erim\u00e4rkide <<\/code> ja ><\/code> vahele, nt <b><\/code> t\u00e4histab paksus kirjas teksti algust ja <\/b><\/code> l\u00f5ppu. Ei ole oluline, kas elemendid kirjutada suur- v\u00f5i v\u00e4iket\u00e4htedega (<B><\/code> ja <b><\/code> on m\u00f5lemad korrektsed). Samuti ei ole oluline, kas tekstiredaktoris on elemendid j\u00e4rjest v\u00f5i eri ridadele liigendatud. Siiski on m\u00f5istlik koodi parema loetavuse huvides liigendada.<\/p>\n
    HTML-dokumendi p\u00f5histruktuur<\/h2>\n
    <!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>Pealkiri, mis on n\u00e4ha dokumendi p\u00e4ises<\/title>\r\n<\/head>\r\n<body>\r\nLehek\u00fclje sisu, sh ka tekstide pealkirjad\r\n<\/body>\r\n<\/html><\/pre>\n
    Lihtsa lehek\u00fclje loomiseks avame tekstiredaktori (n\u00e4iteks Notepad) ja lisame sinna HTML-dokumendi p\u00f5histruktuuri ja lehek\u00fclje sisuosasse l\u00fchikese teksti. N\u00fc\u00fcd valime men\u00fc\u00fcst Fail \u2192 Salvesta nimega<\/em>. Avanenud aknas valime kataloogipuust asukoha, kuhu tahame faili salvestada, paneme failile nime ja lisame html-laiendi. Salvestust\u00fc\u00fcbiks valime K\u00f5ik failid<\/em>, kodeeringuks UTF-8 ning vajutame Salvesta<\/em>.<\/p>\n
    \"html-faili<\/p>\n
    Kui me tahame vaadata, kuidas sisu kuvatakse, otsime \u00fcles faili, m\u00e4rgime \u00e4ra, vajutame paremat hiireklahvi. N\u00fc\u00fcd avaneb men\u00fc\u00fc, kust valime Ava programmiga<\/em> ja seej\u00e4rel selle brauseri programmi, millega soovime faili avada.<\/p>\n
    \"HTML-faili<\/p>\n
    Kui me n\u00fc\u00fcd soovime midagi muuta, avame sama faili lisaks ka Notepadis. M\u00e4rgime sama faili uuesti, vajutame paremat hiireklahvi. Avanenud men\u00fc\u00fcst valime Ava programmiga<\/em> ja seej\u00e4rel Notepad. N\u00fc\u00fcd on meil sama fail avatud kahe programmiga. Saame teha Notepadis muudatusi ja minna brauseri programmi vaatesse ja vajutada seal Refresh<\/em> ja n\u00e4ha, mis muutus.<\/p>\n
    HTML-failide laadimine serverisse<\/h2>\n
    Failide serverisse laadimiseks on mugav kasutada FTP-programmi. Selleks sobib nt Filezilla, mille saab alla laadida aadressilt https:\/\/filezilla-project.org\/<\/a>)<\/p>\n
    P\u00e4rast programmi k\u00e4ivitamist on vaja sisestada serveri nimi, kasutajanimi ja parool. Neid meil veel ei ole. Seega on meil vaja teha konto teenuspakkuja juures, kes pakub veebiruumi. Tasuta veebiruumi pakub n\u00e4iteks Awardspace (https:\/\/www.awardspace.com\/<\/a>).<\/p>\n
      \n
    1. Registreerime ennast kasutajaks.<\/li>\n
    2. Logime sisse ja registreerime alamdomeeni (aadressi kujul kasutaja.atwebpages.com, kus s\u00f5na kasutaja asemel on enda alamdomeeni nimi, on vaja Filezillaga sisse logides).
      \n\"HTML-failide\"HTML-failide<\/li>\n
    3. Registreerime FTP-kasutajakonto (FTP-konto kasutajatunnuseid on vaja Filezilla kaudu serverisse sisse logides).
      \n\"FTP-kasutajakonto\"FTP-kasutajakonto<\/li>\n
    4. Logime Filezillaga FTP-serverisse, kasutades alamdomeeni nime ja FTP kasutajatunnuseid.
      \nServer: kasutaja.atwebpages.com, kus kasutaja on enda alamdomeeni nimi
      \nKasutajanimi: FTP-konto kasutajanimi
      \nParool: FTP-konto parool<\/li>\n<\/ol>\n
      Filezilla<\/h2>\n
      Nagu eespool juba mainisime, on failide serverisse laadimiseks mugav kasutada FTP-programmi. Selleks sobib nt Filezilla, mille saab alla laadida aadressilt https:\/\/filezilla-project.org\/<\/a>.<\/p>\n
      P\u00e4rast programmi k\u00e4ivitamist on vaja sisestada serveri nimi, kasutajanimi ja parool.<\/p>\n
      Kui Filezilla kaudu serverisse sisselogimine \u00f5nnestus, avaneb vasakul arvuti kataloogipuu ja paremal serveri oma. Arvuti kataloogipuust tuleb leida failid, mida \u00fcles laadida; serveris aga on vaja avada kataloog, kuhu failid panna.<\/p>\n
      \"Filezilla\"<\/p>\n
      M\u00f5ned elemendid ja nende t\u00e4hendused<\/h2>\n
      <br><\/code> – reavahetus
      \n<p><\/code> – l\u00f5ik
      \n<b><\/code> – paks kiri
      \n<i><\/code> – kursiivis kiri
      \n<u><\/code> – allajoonitud kiri
      \n<h1><\/code> – esimese taseme pealkiri
      \n<h2><\/code> – teise taseme pealkiri
      \n<h3><\/code> – kolmanda taseme pealkiri<\/p>\n
      Elemendil on \u00fcldjuhul m\u00e4rgend alguses ja l\u00f5pus. N\u00e4iteks on esimese taseme pealkirja puhul alguses <h1><\/code> ja l\u00f5pus <\/h1><\/code>. Sarnaselt on algus ja l\u00f5pp ka teiste elementide puhul. Erandiks on reavahetus <br><\/code>, mis lisatakse reavahetuse m\u00e4rkimiseks.<\/p>\n
      Elementide kasutamise n\u00e4ited<\/h2>\n
      Allpool on kolm n\u00e4idet elementide \u00f5ppimiseks, kus k\u00f5igepealt on pilt brauserivaatest ja seej\u00e4rel sama dokumendi kood.<\/p>\n
      Lihtne lehek\u00fclg<\/p>\n
      \"Elementide<\/p>\n
      <!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>R\u00e4\u00e4gime lindudest<\/title>\r\n<\/head>\r\n<body>\r\n<p>Lindude klass jaguneb 27. seltsiks.<\/p>\r\nR\u00e4\u00e4gime l\u00e4hemalt neist seltsidest, kelle esindajaid Eestis rohkem elab.<br>\r\nLisaks k\u00f5neleme lennuv\u00f5imetutest lindudest, kes on oma klassi erilised esindajad.\r\n<\/body>\r\n<\/html><\/pre>\n
      Pealkirjad ja teksti esiletoomised<\/p>\n
      \"Pealkirjad<\/p>\n
      <!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>R\u00e4\u00e4gime lindudest<\/title>\r\n<\/head>\r\n<body>\r\n<h1>Lennuv\u00f5imetud linnud<\/h1>\r\n<h2>Toonekurelised<\/h2>\r\n<h3>Hanelised<\/h3>\r\n<p>Lindude klass jaguneb <i><u><b>27. seltsiks.<\/b><\/u><\/i><\/p>\r\n<b>R\u00e4\u00e4gime l\u00e4hemalt neist seltsidest, kelle esindajaid Eestis rohkem elab.<\/b><br>\r\nLisaks k\u00f5neleme lennuv\u00f5imetutest lindudest, kes on oma klassi erilised esindajad.\r\n<\/body>\r\n<\/html><\/pre>\n
      Loendid<\/p>\n
      \"Loendid\"<\/p>\n
      <!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>Loendid<\/title>\r\n<\/head>\r\n<body>\r\n<h3>Nummerdatud loend<\/h3>\r\n<ol>\r\n<li>Esimene rida<\/li>\r\n<li>Teine rida<\/li>\r\n<\/ol>\r\n<h3>Nummerdamata loend<\/h3>\r\n<ul>\r\n<li>Esimene rida<\/li>\r\n<li>Teine rida<\/li>\r\n<\/ul>\r\n<\/body>\r\n<\/html><\/pre>\n
      J\u00e4rgnevalt tutvustame mitmeid v\u00f5imalusi HTML-koodi kirjutamisel.<\/p>\n
      Teksti suuruse m\u00e4\u00e4ramine<\/h2>\n
      Teksti suuruse m\u00e4\u00e4ramine tekstiosale<\/p>\n
      <span style=\"font-size:14px\">tekst<\/span><\/pre>\n
      Teksti suuruse m\u00e4\u00e4ramine l\u00f5igule<\/p>\n
      <p style=\"font-size:14px\">tekst<\/p><\/pre>\n
      Teksti v\u00e4rvi m\u00e4\u00e4ramine<\/h2>\n
      V\u00e4rvi m\u00e4\u00e4ramine tekstiosale<\/p>\n
      <span style=\"color:#7b68ee\">tekst<\/span><\/pre>\n
      V\u00e4rvi m\u00e4\u00e4ramine tekstile l\u00f5igu atribuudina<\/p>\n
      <p style=\"COLOR:red\">tekst<\/p>\r\n<p style=\"COLOR:#7b68ee\">tekst<\/p><\/pre>\n
       <\/p>\n
      Sobivate v\u00e4rvikoodide leidmiseks on loodud erinevaid vahendeid, n\u00e4iteks HTML Color Picker<\/em> aadressil https:\/\/www.w3schools.com\/colors\/colors_picker.asp<\/a> ja HTML Color Mixer<\/em> aadressil https:\/\/www.w3schools.com\/colors\/colors_mixer.asp<\/a>.<\/p>\n
      Taustale v\u00e4rvi m\u00e4\u00e4ramine<\/h2>\n
      <body style=\"background-color:#ccefff\"><\/pre>\n
      Kui lisada taustav\u00e4rv, n\u00e4eb HTML-dokumendi p\u00f5histruktuur v\u00e4lja selline:<\/p>\n
      <!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>Pealkiri, mis on n\u00e4ha dokumendi p\u00e4ises<\/title>\r\n<\/head>\r\n<body style=\"background-color:#ccefff\">\r\nLehek\u00fclje sisu, sh ka tekstide pealkirjad\r\n<\/body>\r\n<\/html><\/pre>\n
      NB!<\/strong> Taustav\u00e4rv defineeritakse elemendi <body><\/code> atribuudina. Element <body><\/code> on \u00fche lehek\u00fclje koodis alati \u00fcks kord.<\/p>\n
      Materjali tsentreerimine<\/h2>\n
      Tsentreerimiseks saame kasutada elementi <div><\/code>.<\/p>\n
      <div style=\"text-align:center\">tekst<\/div><\/pre>\n
      Linkide lisamine<\/h2>\n
      Lingid teistele HTML-failidele<\/p>\n
      Teistele failidele linkimine on lihtne siis, kui need asuvad samas kataloogis. Sellisel juhul tuleb n\u00e4idata vaid faili nimi:<\/p>\n
      <a href=\"kalad.html\">Kalad<\/a><\/pre>\n
      Kasutaja n\u00e4eb linki Kalad ja sellele vajutades j\u00f5uab ta lehele kalad.html.<\/p>\n
      Lingid teistele kodulehek\u00fclgedele<\/p>\n
      <a href=\"https:\/\/www.ut.ee\/\">Tartu \u00dclikool<\/a><\/pre>\n
      Kasutaja n\u00e4eb linki Tartu \u00dclikool, millele vajutades j\u00f5uab aadressile https:\/\/www.ut.ee\/<\/a><\/p>\n
      Selleks, et lingile vajutades avaneks leht uues aknas, tuleb lisada atribuut target=”_blank”:<\/p>\n
      <a href=\"https:\/\/www.ut.ee\/\" target=\"_blank\">Tartu \u00dclikool<\/a><\/pre>\n
      Linkide v\u00e4rvi m\u00e4\u00e4ramine<\/p>\n
      <a style=\"color:red\" href=\"http:\/\/www.ut.ee\/\">Lingi nimi<\/a><\/pre>\n
      Piltide lisamine<\/h2>\n
      Selleks, et pilte veebi lisada, tuleb need esmalt serverisse laadida. Lisaks sellele lisame m\u00e4rgendid ka html-koodi, kus tuleb m\u00e4rkida ka pildi nimi ja laiend, mis peavad kattuma serverisse lisatud pildiga. Veebi panemiseks sobivad pildiformaadid on n\u00e4iteks jpg-, png- ja gif-laiendiga failid. Veebi ei sobi mahukad pildiformaadid, n\u00e4iteks tif- ja bmp-failid.<\/p>\n
      Kui pildid ja html-failid on serveris samas kaustas, piisab pildi nimest.<\/p>\n
      <img src=\"maja.gif\">\r\n<img src=\"maja.jpg\"><\/pre>\n
      Kui pildid ja html-failid on serveris erinevates kaustades, tuleb lisada kausta nimi v\u00f5i kasutada t\u00e4ispikka aadressi. Kui pildid asuvad alamkaustas, tuleb lisada kausta nimi. Kui html-failid asuvad sama tasandi teises alamkaustas (nt on html-failid kaustas html<\/em> ja pildid kaustas pildid<\/em>), tuleb ette lisada ka ..\/<\/code>.<\/p>\n
      <img src=\"pildid\/maja.jpg\">\r\n<img src=\"..\/pildid\/maja.jpg\">\r\n<img src=\"http:\/\/web.zone.ee\/heids\/html\/filezilla.jpg\"><\/pre>\n
      Pildi alternatiivtekst<\/p>\n
      Alternatiivtekst on vajalik selleks, et kasutaja saaks pildi kohta infot siis, kui pilti mingil p\u00f5hjusel ei kuvata. Nimelt kuvatakse alt-atribuudiga m\u00e4\u00e4ratud tekst sellisel juhul pildi asemel.<\/p>\n
      \u00a0<img src=\"kajakas.gif\" alt=\"Kajakas\"><\/pre>\n
      Pildi laius ja k\u00f5rgus<\/p>\n
      Pildi laius ja k\u00f5rgus pikslites m\u00e4\u00e4ratakse atribuutidega width<\/em> ja height<\/em>.<\/p>\n
      <img src=\"kajakas.gif\" alt=\"Kajakas\" width=\"50\" height=\"100\"><\/pre>\n
      Ruum pildi \u00fcmber<\/p>\n
      Kasutades stiiliatribuuti style, saame m\u00e4\u00e4rata, kui palju ruumi j\u00e4\u00e4b pildist vasakule, paremale, \u00fcles ja alla. Omaduse margin j\u00e4rel n\u00e4itab esimene number, kui palju j\u00e4etakse ruumi pildist \u00fcles ja alla, teine number m\u00e4\u00e4rab ruumi vasakul ja paremal.<\/p>\n
      Ruum pildi \u00fcmber vasakul ja paremal<\/p>\n
      <img src=\"maja.jpg\" alt=\"Maja\" style=\"margin:0px 30px\"><\/pre>\n
      Ruum pildi \u00fcmber \u00fcleval ja all<\/p>\n
      <img src=\"maja.jpg\" alt=\"Maja\" style=\"margin:30px 0px\"><\/pre>\n
      Videote vistutamine<\/h2>\n
      Youtube\u2019i video vistutamine<\/p>\n
      <iframe src=\"http:\/\/www.youtube.com\/embed\/vL9ZnBy4yng\" frameborder=\"0\" width=\"600\" height=\"337\" allowfullscreen><\/iframe><\/pre>\n
      Vimeo video vistutamine<\/p>\n
      <iframe src=\"https:\/\/player.vimeo.com\/video\/xxx\" width=\"600\" height=\"337\" frameborder=\"0\" webkitallowfullscreen mozallowfullscreen allowfullscreen><\/iframe><\/pre>\n
      Lihtsamate tabelite loomine<\/h2>\n
      Tabeli loomiseks on meil vaja elementi <table><\/code>, tabelisse tuleb eraldi luua read, mille sisse omakorda lahtrid. Ridade loomiseks saame kasutada elementi <tr><\/code> ja lahtrite jaoks <td><\/code>. Seega on tabeli loomise peamised elemendid j\u00e4rgmised:<\/p>\n
      <table><\/code> – tabel
      \n<tr><\/code> – rida
      \n<td><\/code> – lahter<\/p>\n
      J\u00e4rgnevalt loome tabeli, millel on kaks rida ja igas reas kolm lahtrit. Tabeli laiuseks m\u00e4\u00e4rame selles n\u00e4ites 400 pikslit.<\/p>\n
      <table style=\"width:400px\u201d>\r\n<tr>\r\n<td>1. rea 1. lahter<\/td>\r\n<td>1. rea 2. lahter<\/td>\r\n<td>1. rea 3. lahter <\/td>\r\n<\/tr>\r\n<tr>\r\n<td>2. rea 1. lahter<\/td>\r\n<td>2. rea 2. lahter<\/td>\r\n<td>2. rea 3. lahter<\/td>\r\n<\/tr>\r\n<\/table><\/pre>\n
      Tulemuseks saame j\u00e4rgneva tabeli:<\/p>\n
      \"Tabeli<\/p>\n
      Kui soovime lisada veergudele pealkirjad, siis lisame algusesse \u00fche rea, kus kasutame lahtri elementide asemel veeru pealkirja elemente ehk <td><\/code> asemel <th><\/code>.<\/p>\n
      <table style=\"width:400px\">\r\n<tr>\r\n<th>1. veeru pealkiri<\/th>\r\n<th>1. veeru pealkiri<\/th>\r\n<th>1. veeru pealkiri<\/th>\r\n<\/tr>\r\n<tr>\r\n<td>1. rea 1. lahter<\/td>\r\n<td>1. rea 2. lahter<\/td>\r\n<td>1. rea 3. lahter<\/td>\r\n<\/tr>\r\n<tr>\r\n<td>2. rea 1. lahter<\/td>\r\n<td>2. rea 2. lahter<\/td>\r\n<td>2. rea 3. lahter<\/td>\r\n<\/tr>\r\n<\/table><\/pre>\n
      Tulemuseks saame j\u00e4rgneva tabeli:<\/p>\n
      \"Tabeli<\/p>\n
      Kui soovime, et tabelitel oleksid ka jooned, saame kasutada omadust border. Kui soovime lisada 1 piksli laiuse musta joone, siis lisame HTML-dokumenti j\u00e4rgneva koodi:<\/p>\n
      <style>\r\ntable, th, td {\r\n\u00a0 border: 1px solid black;\r\n}\r\n<\/style><\/pre>\n
      N\u00fc\u00fcd on meie HTML-dokumendi kood j\u00e4rgnev:<\/p>\n
      <!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>Tabelid<\/title>\r\n<style>\r\ntable, th, td {\r\n\u00a0 border: 1px solid black;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<table style=\"width:400px\">\r\n<tr>\r\n<th>1. veeru pealkiri<\/th>\r\n<th>1. veeru pealkiri<\/th>\r\n<th>1. veeru pealkiri <\/th>\r\n<\/tr>\r\n<tr>\r\n<td>1. rea 1. lahter<\/td>\r\n<td>1. rea 2. lahter<\/td>\r\n<td>1. rea 3. lahter<\/td>\r\n<\/tr>\r\n<tr>\r\n<td>2. rea 1. lahter<\/td>\r\n<td>2. rea 2. lahter<\/td>\r\n<td>2. rea 3. lahter<\/td>\r\n<\/tr>\r\n<\/table>\r\n<\/body>\r\n<\/html><\/pre>\n
      Tulemuseks on selline tabel:<\/p>\n
      \"Tabeli<\/p>\n
      Kui soovime, et tabelil mitmekordseid jooni ei ole, saame kasutada omadust border-collapse<\/code>:<\/p>\n
      <style>\r\ntable, th, td {\r\n\u00a0 border: 1px solid black;\r\n\u00a0 border-collapse: collapse;\r\n}\r\n<\/style><\/pre>\n
      \"Tabeli<\/p>\n
      Kui soovime, et tabeli sisu ja joonte vahel oleks ruumi, saame kasutada omadust padding<\/code>, lisades n\u00e4iteks padding: 10px<\/code>;<\/p>\n
      <style>\r\ntable, th, td {\r\n\u00a0 border: 1px solid black;\r\n\u00a0 border-collapse: collapse;\r\n\u00a0 padding: 10px;\r\n}\r\n<\/style><\/pre>\n
      \"Tabeli<\/p>\n","protected":false},"author":29,"menu_order":9,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-378","chapter","type-chapter","status-publish","hentry"],"part":100,"_links":{"self":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapters\/378","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/wp\/v2\/users\/29"}],"version-history":[{"count":9,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapters\/378\/revisions"}],"predecessor-version":[{"id":380,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapters\/378\/revisions\/380"}],"part":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/parts\/100"}],"metadata":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapters\/378\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/wp\/v2\/media?parent=378"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapter-type?post=378"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/wp\/v2\/contributor?post=378"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/wp\/v2\/license?post=378"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}