diff options
Diffstat (limited to 'files/sv-se/web/html/index.html')
| -rw-r--r-- | files/sv-se/web/html/index.html | 110 |
1 files changed, 110 insertions, 0 deletions
diff --git a/files/sv-se/web/html/index.html b/files/sv-se/web/html/index.html new file mode 100644 index 0000000000..2b16e39a60 --- /dev/null +++ b/files/sv-se/web/html/index.html @@ -0,0 +1,110 @@ +--- +title: HTML +slug: Web/HTML +tags: + - HTML-handledning + - HTML-lektion + - HTML-programmering + - HTML5 + - Hyper text + - Hypertext + - Lär dig + - Referens + - Referenser + - Vad är HTML + - Webb + - 'i10n:prioritet' +translation_of: Web/HTML +--- +<div>{{HTMLSidebar}}</div> + +<p class="summary"><span class="seoSummary"><strong>HTML</strong> (HyperText Markup Language) är webbens mest grundläggande byggsten. <strong>HTML</strong> beskriver och definierar <em>strukturen</em> på en webbsida. Andra tekniker utöver HTML används vanligen för att beskriva en webbsidas utseende (<a href="/en-US/docs/Web/CSS">CSS</a>) eller funktionalitet/beteende (<a href="/en-US/docs/Web/JavaScript">JavaScript</a>).</span></p> + +<p>"HyperText" refererar till länkar som binder samman webbsidor med varandra, antingen inom en enskild webbsajt eller mellan olika webbsajter. Länkar är en grundläggande aspekt av webben. Genom att ladda upp innehåll på internet och länka det till sidor som skapats av andra människor blir du en aktiv deltagare i World Wide Web.</p> + +<p>HTML använder sig av "uppmärkning" vid annotering av text, bilder och annat innehåll för visning i en webbläsare. HTML märkspråk inkluderar speciella "element" såsom {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, och många andra.</p> + +<p>Taggar i HTML är inte skiftlägeskänsliga. De kan alltså skrivas med stora bokstäver, små bokstäver eller blandat. Exempelvis kan taggen <strong><title> </strong>skrivas som <Title>,<TiTlE>eller på vilket annat sätt som helst.</p> + +<p>Artiklarna nedan hjälper dig att lära dig mer om HTML.</p> + +<section class="cleared" id="sect1"> +<ul class="card-grid"> + <li><span>HTML-introduktion</span> + + <p>Om du är ny inom webbutveckling, se till att läsa vår artikel <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">Grunderna i HTML</a> för att lära dig vad HTML är och hur du använder det.</p> + </li> + <li><span>HTML-handledning</span> + <p>För artiklar om hur du använder HTML, handledning/tutorials och fullständiga exempel, kolla in vår <a href="/en-US/docs/Learn/HTML">HTML Learning Area</a>.</p> + </li> + <li><span>HTML-referenser</span> + <p>I vår omfattande <a href="/en-US/docs/Web/HTML/Reference">HTML-referenser</a>-sektion hittar du detaljerad information om alla element och attribut i HTML.</p> + </li> +</ul> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Tools" id="Tools" name="Tools">Nybörjarhandledning</h2> + +<p>Vår <a href="/en-US/docs/Learn/HTML">HTML Learning Area</a> innehåller ett flertal moduler som lär ut HTML från grunden — inga förkunskaper krävs.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduktion till HTML</a></dt> + <dd>Denna modul lägger grunden, och introducerar viktiga koncept och syntax, såsom att applicera HTML till text, skapa hyperlänkar och att använda HTML för att strukturera en webbsida.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia och inbäddning</a></dt> + <dd>Denna modul utforskar hur du kan använda HTML för att inkludera multimedia i dina webbsidor, och även de olika sätt som bilder kan inkluderas, samt hur du bäddar in video, ljud, och även kompletta andra hemsidor.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Tables">HTML-tabeller</a></dt> + <dd>Att representera tabelldata på en webbsida på ett förståeligt och tillgängligt sätt kan vara en utmaning. Denna modul innefattar grundläggande tabell-uppmärkning, såväl som mer komplexa funktioner såsom tillämpning av tabellrubriker och sammanfattningar.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Forms">HTML-formulär</a></dt> + <dd>Formulär är en väldigt viktig del av webben — de bidrar med mycket av den funktionaliteten som du behöver för att kunna interagera med webbsajter, t.ex. registrering och inloggning, skicka feedback, köpa produkter och mycket mer. Med denna modul kan du komma igång med att skapa de delar av formulär som hör till klient-sidan/front-end.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto">Använda HTML för att lösa vanliga problem</a></dt> + <dd>Erbjuder länkar till sektioner av innehåll som förklarar hur man använder HTML för att lösa mycket vanliga problem som uppstår när man skapar en webbsida: hantera titlar, lägga till bilder eller videos, betona innehåll, skapa ett enkelt formulär, etc.</dd> +</dl> + +<h2 id="Avancerade_ämnen">Avancerade ämnen</h2> + +<dl> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/CORS_enabled_image">CORS enabled image</a></dt> + <dd class="landingPageList"><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Attributet </span></font><a href="/en-US/docs/Web/HTML/Element/img#attr-crossorigin">crossorigin</a></code>, kombinerat med en lämplig <a class="glossaryLink" href="/en-US/docs/Glossary/CORS">CORS</a> -rubrik tillåter bilder definierade av elementet {{HTMLElement("img")}} att laddas upp från främmande källor och användas i ett {{HTMLElement("canvas")}} element som att de vore hämtade från den egna källan.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS attributinställningar</a></dt> + <dd class="landingPageList">Visssa HTML-element som stödjer <a href="/en-US/docs/HTTP/Access_control_CORS">CORS</a>, såsom {{HTMLElement("img")}} eller {{HTMLElement("video")}}, har ett <code>crossorigin</code> attribut (<code>crossOrigin</code> egendom), som låter dig konfigurera CORS-begäran för elementets hämtade data.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Focus_management_in_HTML">Fokushantering i HTML</a></dt> + <dd class="landingPageList"><code><a href="/en-US/docs/Web/API/Document/activeElement">activeElement</a></code> DOM-attributet och <code><a href="/en-US/docs/Web/API/Document/hasFocus">hasFocus()</a></code> DOM-metoden hjälper dig att spåra och kontrollera en användares interagerande med element på en webbsida. </dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Using_the_application_cache">Använda application-cachen</a></dt> + <dd class="landingPageList">Applikations-caching låter webb-baserade applikationer köras offline. Du kan använda <strong>Application Cache</strong> (<em>AppCache</em>)-gränssnittet för att specificiera resurser som webbläsaren ska cachea och göras tillgängliga för offlineanvändare. Cacheade applikationer laddas och fungerar som de ska även om användare laddar om sidan när de är offline.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content">För-uppladda innehåll med rel="preload"</a></dt> + <dd class="landingPageList"><code>preload</code> värdet för {{htmlelement("link")}} elementets {{htmlattrxref("rel", "link")}} attribut, låter dig skriva deklarativa fetch-begäranden i ditt HTML {{htmlelement("head")}}, som specificierar resurser som dina sidor kommer behöva väldigt snart efter att de laddats, vilka du därför vill börja föruppladda tidigt i livscykeln i en sidladdning, innan webbläsarens huvudmaskineri går igång. Detta säkrar att resurserna är tillgängliggjorda tidigare och då är mindre troliga att blockera sidans första laddning, vilket ger en prestandaförbättring. Denna artikel ger en grundläggande guide till hur <code>preload</code> fungerar.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Documentation" id="Referenser">Referenser</h2> + +<dl> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Reference">HTML-referenser</a></dt> + <dd class="landingPageList">HTML består av <strong>element</strong>, som vart och ett kan modifieras med ett visst antal <strong>attribut</strong>. HTML-dokument är sammanbundna med varandra med hjälp av <a href="/en-US/docs/Web/HTML/Link_types">länkar</a>.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Element">HTML-elementreferenser</a></dt> + <dd class="landingPageList">Bläddra igenom en lista på alla <a class="glossaryLink" href="/en-US/docs/Glossary/HTML">HTML</a>-<a class="glossaryLink" href="/en-US/docs/Glossary/Element">element</a>.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Attributes">HTML-attributreferenser</a></dt> + <dd class="landingPageList">Element i HTML har olika <strong>attribut</strong>. Dessa är kompletterande värden som konfigurerar elementen eller justerar deras beteenden på olika sätt.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Global_attributes">Globala attribut</a></dt> + <dd class="landingPageList">Globala attribut kan specifieras för alla <a href="/en-US/docs/Web/HTML/Element">HTML element</a>, <em>även de som inte är specifierade i standarden</em>. Detta betyder att alla icke-standardelement ändå måste tillåta dessa attribut, även om de gör dokumentet icke-kompatibelt med HTML5.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Inline_elements">Inline-element</a> och <a href="/en-US/docs/Web/HTML/Block-level_elements">block-level-element</a></dt> + <dd class="landingPageList">HTML-element är vanligtvis "textnivå"- ("inline") eller "blocknivå"-element ("block level"). Ett textnivåelement tar inte upp mer plats än vad som ryms mellan de taggar som definierar det. Ett blocknivåelement tar upp hela sitt föräldraelements (containers) yta, och skapar på så sätt ett "block".</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Link_types">Länktyper</a></dt> + <dd class="landingPageList">I HTML kan flera länktyper användas för att etablera och definiera förhållandet mellan två dokument. Länkelement som länktyper kan användas på inkluderar <a href="/en-US/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/en-US/docs/Web/HTML/Element/area"><code><area></code></a>, och <a href="/en-US/docs/Web/HTML/Element/link"><code><link></code></a>.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Supported_media_formats">Mediaformat som stöds av HTML-audio- och videoelement</a></dt> + <dd class="landingPageList">Elementen <a href="/en-US/docs/Web/HTML/Element/audio"><code><audio></code></a> och <a href="/en-US/docs/Web/HTML/Element/video"><code><video></code></a> låter dig spela upp ljud och video. Dessa element erbjuder ett webbläsarnativt alternativ till liknande funktioner i Adobe Flash och andra plug-ins.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Kinds_of_HTML_content">Olika typer av HTML-innehåll</a> (Avancerat)</dt> + <dd class="landingPageList">HTML består av flera typer av innehåll, som vart och ett är tillåtet att använda i viss kontext och förbjudet i andra. På samma sätt har alla dessa typer varsin uppsättning av andra innehållskategorier som de kan innehålla och element som kan eller inte kan användas i dem. Detta är en guide till dessa kategorier.</dd> +</dl> + +<h2 class="landingPageList" id="Relaterade_ämnen">Relaterade ämnen</h2> + +<dl> + <dt><a href="/en-US/docs/Web/HTML/Applying_color">Applicera färg på HTML-element med CSS</a></dt> + <dd>Denna artikel tar upp de flesta sätt som du kan använda CSS för att addera färg till HTML-innehåll. Den listar vilka delar av HTML-dokument som kan färgas och vilka CSS-egenskaper som används då. Den inkluderar exempel, länkar till palettbyggarverktyg, m.m.</dd> +</dl> +</div> +</div> +<span class="alllinks"><a href="/en-US/docs/tag/HTML">View All...</a></span></section> |