diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:45 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:45 -0500 |
| commit | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (patch) | |
| tree | 0dd8b084480983cf9f9680e8aedb92782a921b13 /files/fi/web/html | |
| parent | 4b1a9203c547c019fc5398082ae19a3f3d4c3efe (diff) | |
| download | translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.gz translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.bz2 translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.zip | |
initial commit
Diffstat (limited to 'files/fi/web/html')
| -rw-r--r-- | files/fi/web/html/element/body/index.html | 166 | ||||
| -rw-r--r-- | files/fi/web/html/element/head/index.html | 108 | ||||
| -rw-r--r-- | files/fi/web/html/element/index.html | 109 | ||||
| -rw-r--r-- | files/fi/web/html/element/title/index.html | 122 | ||||
| -rw-r--r-- | files/fi/web/html/index.html | 99 | ||||
| -rw-r--r-- | files/fi/web/html/reference/index.html | 23 |
6 files changed, 627 insertions, 0 deletions
diff --git a/files/fi/web/html/element/body/index.html b/files/fi/web/html/element/body/index.html new file mode 100644 index 0000000000..d4470f538b --- /dev/null +++ b/files/fi/web/html/element/body/index.html @@ -0,0 +1,166 @@ +--- +title: '<body>: Dokumentin Body elementti' +slug: Web/HTML/Element/body +tags: + - Elementti + - HTML + - Osioiva pääelementti + - Osiot + - Referenssi + - Web +translation_of: Web/HTML/Element/body +--- +<p>{{HTMLRef}}</p> + +<p><strong>HTML <code><body></code> elementti</strong> edustaa HTML-asiakirjan sisältöä. Dokumentissa voi olla vain yksi <code><body></code> elementti.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Sisältökategoriat</a></th> + <td><a href="/en-US/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document#Sectioning_roots">Sectioning root</a>.</td> + </tr> + <tr> + <th scope="row">Sallittu sisältö</th> + <td><a href="/fi/docs/Web/HTML/Content_categories#Flow_content">Virtaussisältö</a>.</td> + </tr> + <tr> + <th scope="row">Tagin pois jättäminen</th> + <td>Aloitustagi voidaan jättää pois jos ensimmäinen asia elementin sisällä ei ole välilyönti, kommentti, {{HTMLElement("script")}} elementti tai {{HTMLElement("style")}} elementti. Lopetustagi voidaan jättää pois jos body elementillä on sisältöä tai on aloitustagi ja kommentti ei ole välittömästi sen jälkeen.</td> + </tr> + <tr> + <th scope="row">Sallitut vanhemmat</th> + <td>Sen on oltava jälkimmäinen elementti {{HTMLElement("html")}} elementistä.</td> + </tr> + <tr> + <th scope="row">Sallitut ARIA roolit</th> + <td>Ei mitään.</td> + </tr> + <tr> + <th scope="row">DOM rajapinta</th> + <td>{{domxref("HTMLBodyElement")}} + <ul> + <li><code><body></code> elementti paljastaa {{domxref("HTMLBodyElement")}} rajapinnan.</li> + <li>Voit käyttää body elementtiä {{domxref("document.body")}} ominaisuuden kautta.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<h2 id="Ominaisuudet">Ominaisuudet</h2> + +<p>Tämä elementti sisältää <a href="/en-US/docs/Web/HTML/Global_attributes">globaalit ominaisuudet</a>.</p> + +<dl> + <dt>{{htmlattrdef("alink")}} {{obsolete_inline}}</dt> + <dd>Tekstin väri hyperlinkeille kun valittuna. <em>Tämä menetelmä on epäyhdenmukainen, käytä CSS {{cssxref("color")}} ominaisuutta yhdessä {{cssxref(":active")}} pseudoluokan kanssa sen sijaan.</em></dd> + <dt>{{htmlattrdef("background")}} {{obsolete_inline}}</dt> + <dd>Taustakuvan URI. <em>Tämä menetelmä on epäyhdenmukainen, käytä CSS {{cssxref("background")}} ominaisuutta elementissä sen sijaan.</em></dd> + <dt>{{htmlattrdef("bgcolor")}} {{obsolete_inline}}</dt> + <dd>Taustaväri dokumentille. <em>Tämä menetelmä on epäyhdenmukainen, käytä CSS {{cssxref("background-color")}} ominaisuutta elementissä sen sijaan.</em></dd> + <dt>{{htmlattrdef("bottommargin")}} {{obsolete_inline}}</dt> + <dd>Kehon pohjamarginaali. <em>Tämä menetelmä on epäyhdenmukainen, käytä CSS {{cssxref("margin-bottom")}} ominaisuutta elementissä sen sijaan.</em></dd> + <dt>{{htmlattrdef("leftmargin")}} {{obsolete_inline}}</dt> + <dd>Kehon vasen marginaali. <em>Tämä menetelmä on epäyhdenmukainen, käytä CSS {{cssxref("margin-left")}} ominaisuutta elementissä sen sijaan.</em></dd> + <dt>{{htmlattrdef("link")}} {{obsolete_inline}}</dt> + <dd>Tekstin väri avaamattomille hyperlinkeille. <em>Tämä menetelmä on epäyhdenmukainen, käytä CSS {{cssxref("color")}} ominaisuutta yhdessä {{cssxref(":link")}} pseudoluokan kanssa sen sijaan.</em></dd> + <dt>{{htmlattrdef("onafterprint")}}</dt> + <dd>Funktio, jota kutsua kun käyttäjä on tulostanut dokumentin.</dd> + <dt>{{htmlattrdef("onbeforeprint")}}</dt> + <dd>Funktio, jota kutsua kun käyttäjä pyytää tulostusta dokumentista.</dd> + <dt>{{htmlattrdef("onbeforeunload")}}</dt> + <dd>Funktio, jota kutsua kun dokumentti aiotaan purkaa.</dd> + <dt>{{htmlattrdef("onblur")}}</dt> + <dd>Funktio, jota kutsua kun dokumentti menettää kohdistuksen.</dd> + <dt>{{htmlattrdef("onerror")}}</dt> + <dd>Funktio, jota kutsua kun dokumentti ei lataudu kunnolla.</dd> + <dt>{{htmlattrdef("onfocus")}}</dt> + <dd>Funktio, jota kutsua kun dokumentti vastaanottaa kohdistuksen.</dd> + <dt>{{htmlattrdef("onhashchange")}}</dt> + <dd>Funktio, jota kutsua kun dokumentin fragmenttitunnisteosa (alkaen (<code>'#'</code>) risuaitamerkillä) dokumentin nykyisestä osoitteessa on muuttunut.</dd> + <dt>{{htmlattrdef("onlanguagechange")}} {{experimental_inline}}</dt> + <dd>Funktio, jota kutsua kun haluttu kieli muuttuu.</dd> + <dt>{{htmlattrdef("onload")}}</dt> + <dd>Funktio, jota kutsua kun dokumentti on lopettanut lataamisen.</dd> + <dt>{{htmlattrdef("onmessage")}}</dt> + <dd>Funktio, jota kutsua kun dokumentti on vastaaottanut viestin.</dd> + <dt>{{htmlattrdef("onoffline")}}</dt> + <dd>Funktio, jota kutsua kun verkkoyhteys on epäonnistunut.</dd> + <dt>{{htmlattrdef("ononline")}}</dt> + <dd>Funktio, jota kutsua kun verkkoyhteys on palautunut.</dd> + <dt>{{htmlattrdef("onpopstate")}}</dt> + <dd>Funktio, jota kutsua kun läyttäjä on navigoinut istuntohistoriaa.</dd> + <dt>{{htmlattrdef("onredo")}}</dt> + <dd>Funktio, jota kutsua kun käyttäjä on liikkunut eteenpäin kumoa transaktiohistoriassa.</dd> + <dt>{{htmlattrdef("onresize")}}</dt> + <dd>Funktio, jota kutsua kun dokumentin kokoa on muutettu.</dd> + <dt>{{htmlattrdef("onstorage")}}</dt> + <dd>Funktio, jota kutsua kun tallennusalue on muuttunut.</dd> + <dt>{{htmlattrdef("onundo")}}</dt> + <dd>Funktio, jota kutsua kun käyttäjä on liikkunut taaksepäin kumoa transaktiohistoriassa.</dd> + <dt>{{htmlattrdef("onunload")}}</dt> + <dd>Funktio, jota kutsua kun dokumentti on menossa pois.</dd> + <dt>{{htmlattrdef("rightmargin")}} {{obsolete_inline}}</dt> + <dd>Kehon oikea marginaali.<em> Tämä menetelmä on epäyhdenmukainen, käytä CSS {{cssxref("margin-right")}} ominaisuutta elementissä sen sijaan.</em></dd> + <dt>{{htmlattrdef("text")}} {{obsolete_inline}}</dt> + <dd>Tekstin etualan väri. <em>Tämä menetelmä on epäyhdenmukainen, käytä CSS {{cssxref("color")}} ominaisuutta elementissä sen sijaan.</em></dd> + <dt>{{htmlattrdef("topmargin")}} {{obsolete_inline}}</dt> + <dd>Kehon ylämarginaali. <em>Tämä menetelmä on epäyhdenmukainen, käytä CSS {{cssxref("margin-top")}} ominaisuutta elementissä sen sijaan.</em></dd> + <dt>{{htmlattrdef("vlink")}} {{obsolete_inline}}</dt> + <dd>Tekstin väri vierailluille hyperlinkeille. <em>Tämä menetelmä on epäyhdenmukainen, käytä CSS {{cssxref("color")}} ominaisuutta yhdessä {{cssxref(":visited")}} pseudoluokan kanssa sen sijaan.</em></dd> +</dl> + +<h2 id="Esimerkki">Esimerkki</h2> + +<pre class="brush: html"><html> + <head> + <title>Dokumentin otsikko</title> + </head> + <body> + <p>Tämä on kappale</p> + </body> +</html> +</pre> + +<h2 id="Tekniset_tiedot">Tekniset tiedot</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Määritelmä</th> + <th scope="col">Tila</th> + <th scope="col">Kommentti</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-body-element', '<body>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Muutetu listaa epäyhdenmukaisista ominaisuuksista.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-body-element', '<body>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Poistettu käytöstä aikaisemmin vanhentuneet ominaisuudet. Määritelty epäyhdenmukaisten käyttäytymienen ja ei-koskaan standardoitu <code>margintop</code>, <code>marginleft</code>, <code>marginright</code> ja <code>marginbottom</code>. Lisätty <code>on*</code> ominaisuudet.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.1', '<body>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Vanhennutettu <code>alink</code>, <code>background</code>, <code>bgcolor</code>, <code>link</code>, <code>text</code> ja <code>vlink</code> ominaisuudet.</td> + </tr> + </tbody> +</table> + +<h2 id="Selainyhteensopivuus">Selainyhteensopivuus</h2> + + + +<p>{{Compat("html.elements.body")}}</p> + +<h2 id="Katso_myös">Katso myös</h2> + +<ul> + <li>{{HTMLElement("html")}}</li> + <li>{{HTMLElement("head")}}</li> +</ul> diff --git a/files/fi/web/html/element/head/index.html b/files/fi/web/html/element/head/index.html new file mode 100644 index 0000000000..165583a167 --- /dev/null +++ b/files/fi/web/html/element/head/index.html @@ -0,0 +1,108 @@ +--- +title: '<head>: Dokumentin metadata (Header) elementti' +slug: Web/HTML/Element/head +tags: + - Elementti + - HTML + - 'HTML:Metadata sisältö' + - Referenssi + - Web +translation_of: Web/HTML/Element/head +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><head></code> elemetti</strong> tarjoaa yleisen informaation (metadatan) dokumentista, mukaan lukien sen otsikon sekä linkit skripteihin ja tyylitiedostoihin.</p> + +<table class="properties"> + <tbody> + <tr> + <th><a href="/fi/docs/Web/HTML/Content_categories">Sisältökategoriat</a></th> + <td>Ei mitään.</td> + </tr> + <tr> + <th>Sallittu sisältö</th> + <td>Jos dokumentti on {{HTMLElement("iframe")}} {{htmlattrxref("srcdoc", "iframe")}} dokumentti, tai jos otsikkoinformaatio on saatavilla korkeamman tason protokollasta, nolla tai enemmän metadata elementtejä.<br> + Muutoin, yksi tai enemmän metadata elementtejä missä täsmälleen yksi on {{HTMLElement("title")}} elementti.</td> + </tr> + <tr> + <th>Tagin pois jättäminen</th> + <td>Aloitusmerkki voidaan jättää pois jos ensimmäinen asia head elementin sisällä on elementti.<br> + Päätymerkki voidaan jättää pois jos head elementin jälkeen ensimmäinen asia ei ole välilyönti tai kommentti.</td> + </tr> + <tr> + <th>Sallitut vanhemmat</th> + <td>{{HTMLElement("html")}} elementti, jonka ensimmäisenä lapsena.</td> + </tr> + <tr> + <th>Sallitut ARIA roolit</th> + <td>Ei mitään.</td> + </tr> + <tr> + <th>DOM rajapinta</th> + <td>{{domxref("HTMLHeadElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Ominaisuudet">Ominaisuudet</h2> + +<p>Tämä elementti sisältää <a href="/en-US/docs/Web/HTML/Global_attributes">globaalit ominaisuudet</a>.</p> + +<dl> + <dt>{{htmlattrdef("profile")}} {{obsolete_inline}}</dt> + <dd>Metadata profiilien URI osoitteet välilyöntien erottamana.</dd> +</dl> + +<h2 id="Esimerkki">Esimerkki</h2> + +<pre class="brush: html"><html> + <head> + <title>Dokumentin otsikko</title> + </head> +</html> +</pre> + +<h2 id="Huomatukset">Huomatukset</h2> + +<p>Modernit, HTML5-yhteensopivat selaimet automaattisesti rakentavat <code><head></code> elementin jos tagit on jätetty merkitsemättä. <a class="external" href="https://www.stevesouders.com/blog/2010/05/12/autohead-my-first-browserscope-user-test/">Tätä käytöstä ei voida taata muinaisissa selaimissa</a>.</p> + +<h2 id="Tekniset_tiedot">Tekniset tiedot</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Määrittely</th> + <th scope="col">Tila</th> + <th scope="col">Kommentti</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-head-element', '<head>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Ei muutosta viimeisestä snapshotista</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-head-element', '<head>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Käytöstä poistettiin <code>profile</code></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.1', '<head>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Selainyhteensopivuus">Selainyhteensopivuus</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("html.elements.head")}}</p> + +<h2 id="Katso_myös">Katso myös</h2> + +<ul> + <li>Elementit joita voidaan käyttää <code><head></code> elementin sisällä: {{HTMLElement("title")}}, {{HTMLElement("base")}}, {{HTMLElement("link")}}, {{HTMLElement("style")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("noscript")}}, {{HTMLElement("template")}}</li> +</ul> diff --git a/files/fi/web/html/element/index.html b/files/fi/web/html/element/index.html new file mode 100644 index 0000000000..7d2c18afaa --- /dev/null +++ b/files/fi/web/html/element/index.html @@ -0,0 +1,109 @@ +--- +title: HTML elements reference +slug: Web/HTML/Element +tags: + - Basic + - Element + - HTML + - NeedsTranslation + - Reference + - TopicStub + - Web + - 'l10n:priority' +translation_of: Web/HTML/Element +--- +<div>{{HTMLSidebar("Elements")}}</div> + +<p><span class="seoSummary">This page lists all the {{Glossary("HTML")}} {{Glossary("Element","elements")}}, which are created using {{Glossary("Tag", "tags")}}.</span> They are grouped by function to help you find what you have in mind easily. An alphabetical list of all elements is provided in the sidebar on every element's page as well as this one.</p> + +<div class="note"> +<p>For more information about the basics of HTML elements and attributes, see <a href="/en-US/docs/Web/Guide/HTML/Introduction#Elements_%E2%80%94_the_basic_building_blocks">the section on elements in the Introduction to HTML article</a>.</p> +</div> + +<h2 id="Main_root">Main root</h2> + +<p>{{HTMLRefTable("HTML Root Element")}}</p> + +<h2 id="Document_metadata">Document metadata</h2> + +<p>Metadata contains information about the page. This includes information about styles, scripts and data to help software ({{Glossary("search engine", "search engines")}}, {{Glossary("Browser","browsers")}}, etc.) use and render the page. Metadata for styles and scripts may be defined in the page or link to another file that has the information. </p> + +<p>{{HTMLRefTable("HTML Document Metadata")}}</p> + +<h2 id="Sectioning_root">Sectioning root</h2> + +<p>{{HTMLRefTable("Sectioning Root Element")}}</p> + +<h2 id="Content_sectioning">Content sectioning</h2> + +<p>Content sectioning elements allow you to organize the document content into logical pieces. Use the sectioning elements to create a broad outline for your page content, including header and footer navigation, and heading elements to identify sections of content. </p> + +<p>{{HTMLRefTable("HTML Sections")}}</p> + +<h2 id="Text_content">Text content</h2> + +<p>Use HTML text content elements to organize blocks or sections of content placed between the opening {{HTMLElement("body")}} and closing <code></body></code> tags. Important for {{Glossary("accessibility")}} and {{Glossary("SEO")}}, these elements identify the purpose or structure of that content. </p> + +<p>{{HTMLRefTable("HTML Grouping Content")}}</p> + +<h2 id="Inline_text_semantics">Inline text semantics</h2> + +<p>Use the HTML inline text semantic to define the meaning, structure, or style of a word, line, or any arbitrary piece of text.</p> + +<p>{{HTMLRefTable("HTML Text-Level Semantics")}}</p> + +<h2 id="Image_and_multimedia">Image and multimedia</h2> + +<p>HTML supports various multimedia resources such as images, audio, and video.</p> + +<p>{{HTMLRefTable("multimedia")}}</p> + +<h2 id="Embedded_content">Embedded content</h2> + +<p>In addition to regular multimedia content, HTML can include a variety of other content, even if it's not always easy to interact with.</p> + +<p>{{HTMLRefTable({"include":["HTML embedded content"], "exclude":["multimedia"]})}}</p> + +<h2 id="Scripting">Scripting</h2> + +<p>In order to create dynamic content and Web applications, HTML supports the use of scripting languages, most prominently JavaScript. Certain elements support this capability.</p> + +<p>{{HTMLRefTable("HTML Scripting")}}</p> + +<h2 id="Demarcating_edits">Demarcating edits</h2> + +<p>These elements let you provide indications that specific parts of the text have been altered.</p> + +<p>{{HTMLRefTable("HTML Edits")}}</p> + +<h2 id="Table_content">Table content</h2> + +<p>The elements here are used to create and handle tabular data.</p> + +<p>{{HTMLRefTable("HTML tabular data")}}</p> + +<h2 id="Forms">Forms</h2> + +<p>HTML provides a number of elements which can be used together to create forms which the user can fill out and submit to the Web site or application. There's a great deal of further information about this available in the <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML forms guide</a>.</p> + +<p>{{HTMLRefTable({"include": ["HTML forms"], "exclude":["Deprecated"]})}}</p> + +<h2 id="Interactive_elements">Interactive elements</h2> + +<p>HTML offers a selection of elements which help to create interactive user interface objects.</p> + +<p>{{HTMLRefTable("HTML interactive elements")}}</p> + +<h2 id="Web_Components">Web Components</h2> + +<p>Web Components is an HTML-related technology which makes it possible to, essentially, create and use custom elements as if it were regular HTML. In addition, you can create custom versions of standard HTML elements.</p> + +<p>{{HTMLRefTable({"include":["Web Components"],"elements":["shadow"]})}}</p> + +<h2 id="Obsolete_and_deprecated_elements">Obsolete and deprecated elements</h2> + +<div class="warning"> +<p><strong>Warning:</strong> These are old HTML elements which are deprecated and should not be used. <strong>You should never use them in new projects, and should replace them in old projects as soon as you can.</strong> They are listed here for informational purposes only.</p> +</div> + +<p>{{HTMLRefTable({"include":["Deprecated","Obsolete"]})}}</p> diff --git a/files/fi/web/html/element/title/index.html b/files/fi/web/html/element/title/index.html new file mode 100644 index 0000000000..d53e81e109 --- /dev/null +++ b/files/fi/web/html/element/title/index.html @@ -0,0 +1,122 @@ +--- +title: '<title>: Dokumentin otsikkoelementti' +slug: Web/HTML/Element/title +tags: + - Elementti + - HTML + - HTML dokumentin metadata + - 'HTML:Metadata sisältö' + - Ikkunan nimi + - Ikkunan otsikko + - Otsikko + - Referenssi + - Sivun nimi + - Sivun otsikko + - Välilehden nimi + - Välilehden otsikko + - Web +translation_of: Web/HTML/Element/title +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML otsikkoelementti</strong> (<strong><code><title></code></strong>) määrittelee dokumentin otsikon, joka näkyy selaimen otsikkopalkissa tai sivun välilehdessä. Se usein sisältää tekstiä ja tagit sen sisällä on jätetty huomiotta.</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/fi/docs/Web/HTML/Content_categories">Sisältökategoriat</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content">Metadata sisältö</a>.</td> + </tr> + <tr> + <th scope="row">Sallittu sisältö</th> + <td>Teksti, joka ei ole elementtien välinen välilyönti.</td> + </tr> + <tr> + <th scope="row">Tagin pois jättäminen</th> + <td>Molemmat avaus- ja sulkumerkit ovat pakollisia. Huomaa, että selainten pitäisi jättää loput sivusta huomiotta, jos <code></title></code> on jäänyt merkitsemättä.</td> + </tr> + <tr> + <th scope="row">Sallitut vanhemmat</th> + <td>{{ HTMLElement("head") }} elementti joka ei sisällä toisia {{ HTMLElement("title") }} elementtejä.</td> + </tr> + <tr> + <th scope="row">Sallitut ARIA roolit</th> + <td>Ei mitään.</td> + </tr> + <tr> + <th scope="row">DOM rajapinta</th> + <td>{{domxref("HTMLTitleElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Ominaisuudet">Ominaisuudet</h2> + +<p>Tämä elementti sisältää vain <a href="/en-US/docs/Web/HTML/Global_attributes">globaalit ominaisuudet</a>.</p> + +<h2 id="Käyttöohjeet">Käyttöohjeet</h2> + +<p><code><title></code> elementtiä käytetään aina sivun {{HTMLElement("head")}} lohkossa.</p> + +<h2 id="Esimerkki">Esimerkki</h2> + +<pre class="brush: html"><title>Mahtava sivun otsikko</title> +</pre> + +<h2 id="Koskien_esteettömyyttä">Koskien esteettömyyttä</h2> + +<p>On tärkeää antaa <code>title</code> elementille arvo joka kuvaa sivun tarkoitusta. </p> + +<p>Avustavan tekniikan käyttäjille tarkoitettu tavallinen navigointitekniikka on lukea sivun otsikko ja päätellä, mitä sisältöä se sisältää. Tämä johtuu siitä, että sivun navigoiminen sen sisällön määrittelemiseksi voi olla aikaa vievää ja mahdollisesti sekavaa.</p> + +<h4 id="Esimerkki_2">Esimerkki</h4> + +<pre><title>Valikko - Kiinalainen ravintola - RuokaNam: Verkko-ostoksia tänään!</title> +</pre> + +<p>Voit auttaa käyttäjiä päivittämällä sivun <code>title</code> arvon vastaamaan merkittäviä sivun tilamuutoksia (kuten lomakkeiden vahvistusongelmia).</p> + +<h4 id="Esimerkki_3">Esimerkki</h4> + +<pre><title>2 virhettä - Tilauksesi - Kiinalainen ravintola - RuokaNam: Verkko-ostoksia tänään!</title> +</pre> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_—_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN Understanding WCAG, Guideline 2.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html">Understanding Success Criterion 2.4.2 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Tekniset_tiedot">Tekniset tiedot</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Määrittely</th> + <th scope="col">Tila</th> + <th scope="col">Kommentti</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-title-element', '<title>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-title-element', '<title>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.2', '<title>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Selainyhteensopivuus">Selainyhteensopivuus</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("html.elements.title")}}</p> diff --git a/files/fi/web/html/index.html b/files/fi/web/html/index.html new file mode 100644 index 0000000000..5f508bf107 --- /dev/null +++ b/files/fi/web/html/index.html @@ -0,0 +1,99 @@ +--- +title: 'HTML: HyperText Markup Language' +slug: Web/HTML +translation_of: Web/HTML +--- +<div>{{HTMLSidebar}}</div> + +<p class="summary"><span class="seoSummary"><strong>HTML</strong> (HyperText Markup Language) on verkon yksinkertaisin rakennuspalikka. Se määrittelee merkityksen ja rakenteen verkkosisällölle. Muita teknologioita käytetään yleisesti kuvailemaan verkkosivun ulkonäkö/tyyli (<a href="/fi/docs/Web/CSS">CSS</a>) tai toiminnallisuus/käyttäytyminen (<a href="/fi/docs/Web/JavaScript">JavaScript</a>).</span></p> + +<p>"HyperText" viittaa linkkeihin, jotka yhdistävät verkkosivut toisiin, joko yhden sivuston sisällä tai toiselle sivustolle. Linkit ovat keskeisiä verkolle. Kun lataat sisältöä Internetiin ja yhdistät sen muiden käyttäjien luomiin sivuihin, sinusta tilee aktiivinen osallistuja World Wide Websissä.</p> + +<p>HTML käyttää merkintää (eng. markup) tekstin, kuvien, ja muun sisällön merkitsemiseen Web-selaimessa. HTML-merkintä sisältää erityisiä "elementtejä", kuten {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("datalist")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("nav")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("video")}} ja monia muita.</p> + +<p>HTML tagit toimivat samoin kirjainkoosta riippumatta. Eli nei voidaan kirjoittaa isoilla kirjaimilla, pienillä kirjaimilla, tai näiden seoksella. Esimerkiksi <strong><title> </strong>tagi voidaan kirjoittaa myös <Title>,<TITLE> tai muulla tapaa.</p> + +<p>Artikkelit alla kertovat sinulle lisää HTML:sta.</p> + +<section class="cleared" id="sect1"> +<ul class="card-grid"> + <li><span>HTML esittely</span> + + <p>Mikäli olet uusi Web-kehityksessä, muista lukea <a href="/fi/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML perusteet</a> artikkeli oppiaksesi mitä HTML on ja miten sitä käytetään.</p> + </li> + <li><span>HTML oppaat</span> + <p>HTML-oppimateriaalia käsitteleviä artikkeleita, oppaita, sekä täydellisiä esimerkkejä löytyy <a href="/fi/docs/Learn/HTML">HTML oppimisalueestamme</a>.</p> + </li> + <li><span>HTML referenssit</span> + <p>Laajassa <a href="/fi/docs/Web/HTML/Reference">HTML referenssi</a>osiossamme löydät HTML-elementtien ja attribuuttien yksityiskohdat.</p> + </li> +</ul> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Tools" id="Aloittelijan_oppaat">Aloittelijan oppaat</h2> + +<p>Our <a href="/fi/docs/Learn/HTML">HTML oppimisalueemme</a> sisältää useita moduuleja, jotka opettavat HTML:n alusta loppuun — aikaisempaa osaamista ei vaadita.</p> + +<dl> + <dt><a href="/fi/docs/Learn/HTML/Introduction_to_HTML">HTML esittely</a></dt> + <dd>Tämä moduuli totuttaa sinut tärkeisiin konsepteihin ja syntakseihin kuten HTML-koodin soveltamista tekstiin, miten luoda hyperlinkkejä, sekä kuinka käyttää HTML:ää verkkosivun rakenteeseen.</dd> + <dt><a href="/fi/docs/Learn/HTML/Multimedia_and_embedding">Multimedia ja upottaminen</a></dt> + <dd>Tämä moduuli tutkii HTML:n käyttöä multimedian sisällyttämiseen verkkosivuihin, mukaan lukien eri tavat, joilla kuvia voidaan sisällyttää, ja miten videoita, ääntä, ja jopa toisia verkkosivuja upotetaan.</dd> + <dt><a href="/fi/docs/Learn/HTML/Tables">HTML taulukot</a></dt> + <dd>Verkkosivun taulukkotietojen esittäminen ymmärrettävällä, helposti saatavilla olevilla tavoilla voi olla haaste. Tämä moduuli kattaa perustaulukon merkinnän sekä monimutkaisempia ominaisuuksia kuten kuvaukset ja tiivistelmät.</dd> + <dt><a href="/fi/docs/Learn/HTML/Forms">HTML lomakkeet</a></dt> + <dd>Lomakkeet ovat erittäin tärkeä osa verkkoa — ne tarjoavat paljon toimintoja, joita tarvitset vuorovaikuttaaksesi verkkkosivuja, kuten rekisteröidä ja kirjautua sisään, lähettää palautetta, ostaa tuotteta, ja paljon muuta. Tämän moduulin avulla pääset alkuun asiakaspuolen lomakkeiden luomisessa. </dd> + <dt><a href="https://developer.mozilla.org/fi/docs/Learn/HTML/Howto">Use HTML to solve common problems</a></dt> + <dd>Provides links to sections of content explaining how to use HTML to solve very common problems when creating a web page: dealing with titles, adding images or videos, emphasizing content, creating a basic form, etc.</dd> +</dl> + +<h2 id="Edistyneet_aiheet">Edistyneet aiheet</h2> + +<dl> + <dt class="landingPageList"><a href="/fi/docs/Web/HTML/CORS_enabled_image">CORS enabled image</a></dt> + <dd class="landingPageList">The <code><a href="/fi/docs/Web/HTML/Element/img#attr-crossorigin">crossorigin</a></code> attribute, in combination with an appropriate <a class="glossaryLink" href="/fi/docs/Glossary/CORS">CORS</a> header, allows images defined by the {{HTMLElement("img")}} element to be loaded from foreign origins and used in a {{HTMLElement("canvas")}} element as if they were being loaded from the current origin.</dd> + <dt class="landingPageList"><a href="/fi/docs/Web/HTML/CORS_settings_attributes">CORS settings attributes</a></dt> + <dd class="landingPageList">Some HTML elements that provide support for <a href="/fi/docs/HTTP/Access_control_CORS">CORS</a>, such as {{HTMLElement("img")}} or {{HTMLElement("video")}}, have a <code>crossorigin</code> attribute (<code>crossOrigin</code> property), which lets you configure the CORS requests for the element's fetched data.</dd> + <dt class="landingPageList"><a href="/fi/docs/Web/HTML/Focus_management_in_HTML">Focus management in HTML</a></dt> + <dd class="landingPageList">The <code><a href="/fi/docs/Web/API/Document/activeElement">activeElement</a></code> DOM attribute and the <code><a href="/fi/docs/Web/API/Document/hasFocus">hasFocus()</a></code> DOM method help you track and control a user's interactions with elements on a web page.</dd> + <dt class="landingPageList"><a href="/fi/docs/Web/HTML/Using_the_application_cache">Using the application cache</a></dt> + <dd class="landingPageList">Application caching lets web-based applications run offline. You can use the <strong>Application Cache</strong> (<em>AppCache</em>) interface to specify resources that the browser should cache and make available to offline users. Applications that are cached load and work correctly even if users click the refresh button when they are offline.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/fi/docs/Web/HTML/Preloading_content">Preloading content with rel="preload"</a></dt> + <dd class="landingPageList">The <code>preload</code> value of the {{htmlelement("link")}} element's {{htmlattrxref("rel", "link")}} attribute allows you to write declarative fetch requests in your HTML {{htmlelement("head")}}, specifying resources that your pages will need very soon after loading, which you therefore want to start preloading early in the lifecycle of a page load, before the browser's main rendering machinery kicks in. This ensures that they are made available earlier and are less likely to block the page's first render, leading to performance improvements. This article provides a basic guide to how <code>preload</code> works.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Documentation" id="Referenssit">Referenssit</h2> + +<dl> + <dt class="landingPageList"><a href="/fi/docs/Web/HTML/Reference">HTML reference</a></dt> + <dd class="landingPageList">HTML consists of <strong>elements</strong>, each of which may be modified by some number of <strong>attributes</strong>. HTML documents are connected to each other with <a href="/fi/docs/Web/HTML/Link_types">links</a>.</dd> + <dt class="landingPageList"><a href="/fi/docs/Web/HTML/Element">HTML element reference</a></dt> + <dd class="landingPageList">Lista kaikista <a class="glossaryLink" href="/fi/docs/Glossary/HTML">HTML</a> <a class="glossaryLink" href="/fi/docs/Glossary/Element">elementeistä</a>.</dd> + <dt class="landingPageList"><a href="/fi/docs/Web/HTML/Attributes">HTML attribute reference</a></dt> + <dd class="landingPageList">Elements in HTML have <strong>attributes</strong>. These are additional values that configure the elements or adjust their behavior in various ways.</dd> + <dt class="landingPageList"><a href="/fi/docs/Web/HTML/Global_attributes">Global attributes</a></dt> + <dd class="landingPageList">Global attributes may be specified on all <a href="/fi/docs/Web/HTML/Element">HTML elements</a>, <em>even those not specified in the standard</em>. This means that any non-standard elements must still permit these attributes, even though those elements make the document HTML5-noncompliant.</dd> + <dt class="landingPageList"><a href="/fi/docs/Web/HTML/Inline_elements">Inline elements</a> and <a href="/fi/docs/Web/HTML/Block-level_elements">block-level elements</a></dt> + <dd class="landingPageList">HTML elements are usually "inline" or "block-level" elements. An inline element occupies only the space bounded by the tags that define it. A block-level element occupies the entire space of its parent element (container), thereby creating a "block."</dd> + <dt class="landingPageList"><a href="/fi/docs/Web/HTML/Link_types">Link types</a></dt> + <dd class="landingPageList">In HTML, various link types can be used to establish and define the relationship between two documents. Link elements that types can be set on include <a href="/fi/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fi/docs/Web/HTML/Element/area"><code><area></code></a> and <a href="/fi/docs/Web/HTML/Element/link"><code><link></code></a>.</dd> + <dt class="landingPageList"><a href="/fi/docs/Web/HTML/Supported_media_formats">Media formats supported by the HTML audio and video elements</a></dt> + <dd class="landingPageList">The <a href="/fi/docs/Web/HTML/Element/audio"><code><audio></code></a> and <a href="/fi/docs/Web/HTML/Element/video"><code><video></code></a> elements allow you to play audio and video media. These elements provide a browser-native alternative to similar capabilities found in Adobe Flash and other plug-ins.</dd> + <dt class="landingPageList"><a href="/fi/docs/Web/HTML/Kinds_of_HTML_content">Kinds of HTML content</a></dt> + <dd class="landingPageList">HTML is comprised of several kinds of content, each of which is allowed to be used in certain contexts and is disallowed in others. Similarly, each has a set of other content categories they can contain and elements which can or can't be used in them. This is a guide to these categories.</dd> + <dt class="landingPageList"><a href="/fi/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">Quirks mode and standards mode</a></dt> + <dd class="landingPageList">Historical information on quirks mode and standards mode.</dd> +</dl> + +<h2 class="landingPageList" id="Liittyvät_aiheet">Liittyvät aiheet</h2> + +<dl> + <dt><a href="/fi/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></dt> + <dd>This article covers most of the ways you use CSS to add color to HTML content, listing what parts of HTML documents can be colored and what CSS properties to use when doing so. Includes examples, links to palette-building tools, and more.</dd> +</dl> +</div> +</div> +<span class="alllinks"><a href="/fi/docs/tag/HTML">View All...</a></span></section> diff --git a/files/fi/web/html/reference/index.html b/files/fi/web/html/reference/index.html new file mode 100644 index 0000000000..2e7444a505 --- /dev/null +++ b/files/fi/web/html/reference/index.html @@ -0,0 +1,23 @@ +--- +title: HTML referenssi +slug: Web/HTML/Reference +translation_of: Web/HTML/Reference +--- +<div>{{HTMLSidebar}}</div> + +<p>Tämä <a href="/fi-fi/docs/Web/HTML">HTML</a> referenssi kuvaa kaikki <strong>elementit</strong> ja <strong>ominaisuudet</strong> HTML:stä, mukaan lukien <strong>globaalit ominaisuudet</strong> jotka koskevat kaikkia elementtejä.</p> + +<dl> + <dt><a href="/fi-fi/docs/Web/HTML/Element">HTML elementtireferenssi</a></dt> + <dd>Tällä sivulla luetellaan kaikki HTML elementit, jotka on luotu tageilla.</dd> + <dt><a href="/fi-fi/docs/Web/HTML/Attributes">HTML ominaisuusreferenssi</a></dt> + <dd>HTML-elementeissä on ominaisuuksia. Nämä ovat lisäarvoja, jotka <span class="tlid-translation translation"><span title="">määrittävät elementit tai säätävät niiden käyttäytymistä eri tavoin käyttäjien haluamiin kriteereihin.</span></span></dd> + <dt><a href="/fi-fi/docs/Web/HTML/Global_attributes">Globaalit ominaisuudet</a></dt> + <dd><span class="tlid-translation translation"><span title="">Globaalit ominaisuudet ovat ominaisuuksia, jotka ovat yhteisiä kaikille HTML-elementeille;</span> <span title="">niitä voidaan käyttää kaikissa elementeissä, vaikka niillä ei ehkä ole vaikutusta joihinkin elementteihin.</span></span></dd> + <dt><a href="/fi-fi/docs/Web/HTML/Link_types">Linkkityypit</a></dt> + <dd><span class="tlid-translation translation"><span title="">HTML:ssä seuraavat linkityypit osoittavat kahden asiakirjan välistä suhdetta, jossa toinen linkkaa toiseen asiakirjaan käyttämällä <a>, <area> tai <link> -elementtiä.</span></span></dd> + <dt><a href="/fi-fi/docs/Web/Guide/HTML/Content_categories">Sisältökategoriat</a></dt> + <dd><span class="tlid-translation translation"><span title="">Jokainen HTML-elementti on yhden tai useamman sisältökategorian jäsen - nämä kategoriat ryhmittävät elementtejä, jotka jakavat yhteisiä ominaisuuksia</span></span>.</dd> +</dl> + +<p><span class="alllinks"><a href="/fi-fi/docs/tag/HTML" title="Article tagged: HTML">Katso kaikki sivut tagilla "HTML"...</a></span></p> |