<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="https://peda.net/:static/533/atom.xsl"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>18. HTML lukitut ja avoimet elementit</title>
<id>https://peda.net/id/64c927b2209</id>
<updated>2016-05-23T07:42:13+03:00</updated>
<link href="https://peda.net/id/64c927b2209:atom" rel="self" />
<link href="https://peda.net/p/jamspe/omat-atk-t/html5/1hkjy#top" rel="alternate" />
<logo>https://peda.net/:static/533/peda.net.logo.bg.svg</logo>
<rights type="html">&lt;div class=&quot;license&quot;&gt;Tämän sivun lisenssi &lt;a rel=&quot;license&quot; href=&quot;https://peda.net/info&quot;&gt;Peda.net-yleislisenssi&lt;/a&gt;&lt;/div&gt;&#10;</rights>

<entry>
<title>&lt;div&gt; Elementti</title>
<id>https://peda.net/id/c5e4e23220a</id>
<updated>2016-05-23T07:54:24+03:00</updated>
<link href="https://peda.net/p/jamspe/omat-atk-t/html5/1hkjy/div-elementti#top" />
<content type="html">&lt;p&gt;&amp;lt;div&amp;gt; elementti on &lt;b&gt;lukittu elementti&lt;/b&gt; jota usein käytetään säilömään muita HTML elementtejä.&lt;/p&gt;&#10;&lt;p&gt;&amp;lt;div&amp;gt; elementti ei tarvitse erillisiä atribuutteja, mutta &lt;strong&gt;style&lt;/strong&gt; ja &lt;strong&gt;class &lt;b&gt;tyylit&lt;/b&gt;&lt;/strong&gt; ovat yleisesti käytössä&lt;br/&gt;&#10;&lt;br/&gt;&#10; CSS:än kanssa kun käytetään yhdessä niin &amp;lt;div&amp;gt; elementtiä voidaan käyttää tyylittelemään sisältöjä:&lt;/p&gt;&#10;&lt;div class=&quot;w3-example&quot;&gt;&#10;&lt;h3&gt;Esimerkki&lt;/h3&gt;&#10;&lt;div class=&quot;w3-code notranslate htmlHigh&quot;&gt;&lt;span&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;div&lt;span&gt; style&lt;span&gt;=&amp;quot;background-color:black; color:white; padding:20px;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br/&gt;&#10;&lt;br/&gt;&#10;&lt;span&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;h2&lt;span&gt;&amp;gt;Lontoo&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;/h2&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br/&gt;&#10;&lt;span&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;p&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;Lontoo on Englannin pääkaupuni. Se on Englannin suosituin kaupunki, jonka metropoli alueella asuu yli 13 miljoonaa asukasta.&lt;span&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;/p&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br/&gt;&#10;&lt;br/&gt;&#10;&lt;span&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;/div&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&#10;&lt;/div&gt;&#10;&lt;h2&gt;&amp;lt;span&amp;gt; Elementti&lt;/h2&gt;&#10;&lt;p&gt;&amp;lt;span&amp;gt; elementti on &lt;b&gt;avoin elementti&lt;/b&gt; jota ylein käytetään teksteissä.&lt;/p&gt;&#10;&lt;p&gt;&amp;lt;span&amp;gt; elementti ei myöskään tarvitse atribuutteja, mutta &lt;strong&gt;style ja&lt;/strong&gt; &lt;strong&gt;class&lt;/strong&gt; ovat tässäkin yleisiä.&lt;/p&gt;&#10;&lt;p&gt;CSS:än kanssa käytettäessä &amp;lt;span&amp;gt; elementtiä, voit tyylitellä tekstiä:&lt;/p&gt;&#10;&lt;div class=&quot;w3-example&quot;&gt;&#10;&lt;h3&gt;Esimerkki&lt;/h3&gt;&#10;&lt;div class=&quot;w3-code notranslate htmlHigh&quot;&gt;&lt;span&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;h1&amp;gt; Minun&lt;/span&gt; &lt;span&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;span&lt;span&gt; style&lt;span&gt;=&amp;quot;color:red&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;gt; Tärkeä &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;/span&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt; otsikko &lt;span&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;/h1&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&#10;&lt;/div&gt;&#10;</content>
<published>2016-05-23T07:49:46+03:00</published>
</entry>

<entry>
<title>HTML lukitut ja avoimet elementit</title>
<id>https://peda.net/id/aada8cfe20a</id>
<updated>2016-05-23T07:43:59+03:00</updated>
<link href="https://peda.net/p/jamspe/omat-atk-t/html5/1hkjy/hljae#top" />
<content type="html">&lt;p&gt;Jokaisella html elementillä on oletus näyttö arvo riippuen minkä tyypin elementti se on. Oletuksena useimmilla elementeillä arvot ovat joko lukittu tai avoin.&lt;/p&gt;&#10;&lt;h2&gt;Lukittu Elementti&lt;/h2&gt;&#10;&lt;p&gt;Lukittu elementti aloittaa aina uuden rivin ja vie aina riviltä kaiken tilan.&lt;/p&gt;&#10;&lt;div class=&quot;w3-theme-border&quot;&gt;&amp;lt;div&amp;gt; elementti on lukittu elementti.&lt;/div&gt;&#10;&lt;p&gt;Esimerkkejä lukituista elementeistä:&lt;/p&gt;&#10;&lt;ul&gt;&#10;&lt;li&gt;&amp;lt;div&amp;gt;&lt;/li&gt;&#10;&lt;li&gt;&amp;lt;h1&amp;gt; - &amp;lt;h6&amp;gt;&lt;/li&gt;&#10;&lt;li&gt;&amp;lt;p&amp;gt;&lt;/li&gt;&#10;&lt;li&gt;&amp;lt;form&amp;gt;&lt;/li&gt;&#10;&lt;/ul&gt;&#10;&lt;h2&gt;Avoimet elementit&lt;/h2&gt;&#10;&lt;p&gt;Avoin elementti ei ala uudelta riviltä ja vie tilaa vain sen verran mitä koodin pätkässä tekstiä on.&lt;/p&gt;&#10;&lt;p&gt;Tämä on avoin&lt;span class=&quot;w3-theme-border&quot;&gt; &amp;lt;span&amp;gt; elementti kappaleen sisässä&lt;/span&gt;&lt;/p&gt;&#10;&lt;p&gt;Esimerkkejä avoimista elementeistä:&lt;/p&gt;&#10;&lt;ul&gt;&#10;&lt;li&gt;&amp;lt;span&amp;gt;&lt;/li&gt;&#10;&lt;li&gt;&amp;lt;a&amp;gt;&lt;/li&gt;&#10;&lt;li&gt;&amp;lt;img&amp;gt;&lt;/li&gt;&#10;&lt;/ul&gt;&#10;&lt;p&gt;&lt;br/&gt;&#10;&lt;br/&gt;&#10;&lt;/p&gt;&#10;</content>
<published>2016-05-23T07:41:51+03:00</published>
</entry>


</feed>