{"id":2653,"date":"2015-02-10T15:20:02","date_gmt":"2015-02-10T13:20:02","guid":{"rendered":"http:\/\/jml.kapsi.fi\/jussi\/?page_id=2653"},"modified":"2019-11-14T12:04:31","modified_gmt":"2019-11-14T10:04:31","slug":"www-julkaiseminen-html","status":"publish","type":"page","link":"https:\/\/jml.kapsi.fi\/jussi\/www-julkaisemisen-perusteet\/www-julkaiseminen-html\/","title":{"rendered":"WWW-julkaisemisen perusteet &#8211; HTML"},"content":{"rendered":"\n<ul class=\"www-julkaiseminen-navi wp-block-list\"><li><a title=\"WWW-julkaisemisen perusteet\" href=\"\/jussi\/www-julkaisemisen-perusteet\/\">Etusivu<\/a><\/li><li><span class=\"current\">HTML<\/span><\/li><li><a title=\"WWW-julkaisemisen perusteet \u2013 CSS\" href=\"\/jussi\/www-julkaisemisen-perusteet\/www-julkaiseminen-css\/\">CSS<\/a><\/li><li><a title=\"WWW-julkaisemisen perusteet \u2013 Design\" href=\"\/jussi\/www-julkaisemisen-perusteet\/www-julkaisemisen-perusteet-design\/\">Design<\/a><\/li><li><a title=\"WWW-julkaisemisen perusteet \u2013 Linkit\" href=\"\/jussi\/www-julkaisemisen-perusteet\/www-julkaisemisen-perusteet-linkit\/\">Linkit<\/a><\/li><\/ul>\n\n\n\n<p>Tehd\u00e4\u00e4n aluksi muutama yksinkertainen www-sivun HTML-merkkauskielt\u00e4 k\u00e4ytt\u00e4en. HTML (<em>Hypertext Markup Language<\/em>) on tapa tehd\u00e4 rakenteellisesti merkittyj\u00e4 dokumentteja, jotka voivat sis\u00e4lt\u00e4\u00e4 esimimerkiksi teksti\u00e4, kuvia ja linkkej\u00e4 muihin tiedostoihin. HTML-merkinn\u00f6ill\u00e4 eli niin sanotuilla <em>tageilla<\/em> <strong>kuvataan dokumentin rakenne<\/strong>.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><strong>Tunnilla:<\/strong> HTML-dokumentin ja tagien rakenne ja eri elementtien k\u00e4ytt\u00e4minen sis\u00e4ll\u00f6n rakenteen m\u00e4\u00e4ritt\u00e4misess\u00e4.<\/p><\/blockquote>\n\n\n\n<p>Esimerkiksi tagiparin <code class=\"language-markup\">&lt;h1&gt;<\/code> ja <code class=\"language-markup\">&lt;\/h1&gt;<\/code> rajaama elementti on merkitty ensimm\u00e4isen tason otsikoksi (header 1), kun taas <code class=\"language-markup\">&lt;p&gt;<\/code> ja <code class=\"language-markup\">&lt;\/p&gt;<\/code> sulkevat sis\u00e4\u00e4ns\u00e4 tekstikappaleen (paragraph).<\/p>\n\n\n\n<p>Hyvin yksinkertaisen HTML-sivun HTML-merkkaus voisi n\u00e4ytt\u00e4\u00e4 seuraavalta:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html>\n&lt;head>\n&lt;meta charset=\"UTF-8\">\n&lt;title>Sivun otsikko&lt;\/title>\n&lt;\/head>\n\n&lt;body>\n\n&lt;h1>Ensimm\u00e4isen tason otsikko&lt;\/h1>\n\n&lt;p>Tekstikappale&lt;\/p>\n\n&lt;\/body>\n&lt;\/html><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Title-elementti<\/h2>\n\n\n\n<p><em>Title<\/em> kannattaa valita huolellisesti siten, ett\u00e4 se antaa selke\u00e4n kuvan dokumentin sis\u00e4ll\u00f6st\u00e4. Title n\u00e4kyy yleens\u00e4 muun muassa hakukoneiden tuloksissa l\u00f6ydetyn sivun kuvauksena, joten hyvin valittu title voi lis\u00e4t\u00e4 sivuille l\u00f6yt\u00e4vien vierailijoiden m\u00e4\u00e4r\u00e4\u00e4. Esimerkiksi <em>Etusivu<\/em> on <strong>huono title<\/strong>, koska se ei kerro mit\u00e4\u00e4n sivun tai sivuston sis\u00e4ll\u00f6st\u00e4.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Kolme toisiinsa linkitetty\u00e4 HTML-tiedostoa<\/h2>\n\n\n\n<p>Edellisen pohjalta luomme kolme HTML-tiedostoa omaan julkiseen www-hakemistoon. P\u00e4\u00e4sivu tallennetaan nimell\u00e4 <em>index.html<\/em>, ja kaksi alasivua esimerkiksi <em>cv.html<\/em> ja <em>portfolio.html<\/em>.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><strong>Tunnilla:<\/strong> Kuinka sivut saa webiin? Mit\u00e4 eri tapoja on saada tiedostot www-palvelimelle. Jos opiskelijoilla on esimerkiksi kodin internet-yhteyteen sis\u00e4ltyv\u00e4\u00e4 kotisivutilaa, voimme jossain vaiheessa kurssia tutkia niiden k\u00e4ytt\u00f6\u00f6nottoa.<\/p><\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Navigaatio<\/h2>\n\n\n\n<p>Luomme sivuille yksinkertaisen navigaatio-osion, jossa n\u00e4kyv\u00e4t aina kaikkien kolmen sivun viittaukset siten, ett\u00e4 kahden sivun linkit ovat aktiivisia, mutta sen sivun &#8221;linkki&#8221;, joka parhaillaan on auki, ei ole aktiivinen. Teemme navigaation <code class=\"language-markup\">&lt;ul&gt; <\/code>&#8211; eli listaelementti\u00e4 k\u00e4ytt\u00e4en esimerkiksi etusivulle seuraavasti:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;ul>\n&lt;li>etusivu&lt;\/li>\n&lt;li>&lt;a href=\"portfolio.html\">portfolio&lt;\/a>&lt;\/li>\n&lt;li>&lt;a href=\"cv.html\">CV&lt;\/a>&lt;\/li>\n&lt;\/ul><\/code><\/pre>\n\n\n\n<p>Etusivulla on siis aktiiviset linkit CV- ja linkit-sivuille. Linkki rakentuu yksinkertaisimmillaan seuraavasti:<\/p>\n\n\n\n<p><code class=\"language-markup\">&lt;a href=\"kohdetiedoston_nimi\"&gt;linkkiteksti&lt;\/a&gt;<\/code><\/p>\n\n\n\n<p>Lis\u00e4\u00e4mme viel\u00e4 sivuillemme muutamia muita HTML-elementtej\u00e4, esim. pari erilaista listaa ja jonkin kuvan. Jos haluat tutustua muihinkin HTML-elementteihin, katso dokumentti <a href=\"http:\/\/www.w3schools.com\/tags\/default.asp\">HTML Tags Ordered Alphabetically<\/a>, jossa kaikki k\u00e4ytett\u00e4viss\u00e4 olevat elementit on listattu aakkosj\u00e4rjestyksess\u00e4.<\/p>\n\n\n\n<p>Kun kolmen sivun rakenne ja alustava sis\u00e4lt\u00f6 on valmis, tutustumme erilaisiin tapoihin list\u00e4t\u00e4 dokumentteihin ulkoasum\u00e4\u00e4rityksi\u00e4.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Etusivu HTML CSS Design Linkit Tehd\u00e4\u00e4n aluksi muutama yksinkertainen www-sivun HTML-merkkauskielt\u00e4 k\u00e4ytt\u00e4en. HTML (Hypertext Markup Language) on tapa tehd\u00e4 rakenteellisesti merkittyj\u00e4 dokumentteja, jotka voivat sis\u00e4lt\u00e4\u00e4 esimimerkiksi teksti\u00e4, kuvia ja linkkej\u00e4 muihin tiedostoihin. HTML-merkinn\u00f6ill\u00e4 eli niin sanotuilla tageilla kuvataan dokumentin rakenne. Tunnilla: HTML-dokumentin ja tagien rakenne ja eri elementtien k\u00e4ytt\u00e4minen sis\u00e4ll\u00f6n rakenteen m\u00e4\u00e4ritt\u00e4misess\u00e4. Esimerkiksi tagiparin &lt;h1&gt; [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":2668,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2653","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jml.kapsi.fi\/jussi\/wp-json\/wp\/v2\/pages\/2653","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jml.kapsi.fi\/jussi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jml.kapsi.fi\/jussi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jml.kapsi.fi\/jussi\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/jml.kapsi.fi\/jussi\/wp-json\/wp\/v2\/comments?post=2653"}],"version-history":[{"count":19,"href":"https:\/\/jml.kapsi.fi\/jussi\/wp-json\/wp\/v2\/pages\/2653\/revisions"}],"predecessor-version":[{"id":4184,"href":"https:\/\/jml.kapsi.fi\/jussi\/wp-json\/wp\/v2\/pages\/2653\/revisions\/4184"}],"up":[{"embeddable":true,"href":"https:\/\/jml.kapsi.fi\/jussi\/wp-json\/wp\/v2\/pages\/2668"}],"wp:attachment":[{"href":"https:\/\/jml.kapsi.fi\/jussi\/wp-json\/wp\/v2\/media?parent=2653"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}