1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
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>
|
