Annons:
Etikett09-skaffa-hemsida
Läst 4199 ggr
dijete
8/21/09, 11:23 PM

Skaffa hemsida: HTML-grunder

Bild 1. Klicka för att öppna i full storlek.

I andra delen av vår artikelserie "Skapa hemsida" går vi igenom hur du börjar sakta men säkert koda din egna hemsida i en enkel texteditor.

Vad är HTML?

HTML är en förkortning av orden HyperText Markup Language. HTML är den grundläggande koden som används för en hemsida. Du kan dock inte få ut allt i en HTML-kod utan måste oftast kompliteras med t ex CSS för att få ut maximala funktionen i koderna.

grunder.jpg

Börja bygga en sida med HTML

När du ska bygga din hemsida behöver du en texteditor. I detta fall kommer vi använda Notepad (Anteckningar) som finns i Windows som standard. Det finns även WYSIWYG (What You See Is What You Get, På svenska: Vad du ser är vad du får) editorer som skriver koden åt dig i programmet ett av dom är Frontpage. Även om du använder en WYSIWYG editor är det viktigt att du har grundkunskaper om HTML som du kommer lära dig i denna guide. Anledningen till varför du behöver grundkunskaper även om du använder en WYSIWYG editor är att t ex om du vill lägga till ett javascript som t ex förhindrar högerklick behöver du veta inom vilken tag du ska sätta koden.

HTML används i taggar och avslutar ofta med , HTML är inte känslig för små eller stora bokstäver så det spelar ingen roll om du skriver </strong> eller <strong><title></strong>,<strong><HTML></strong> Anger att koden och sidan är ett HTML-dokument.</p> <blockquote> <p><strong><HEAD></strong> Denna del av HTML-dokumentet är ''osynlig'', information här under ger information till din webbläsare,sökmotorer,osv. Inget som du skriver här syns på din sida som text.</p> <p><strong><TITLE></strong> Din hemsidas titel.</p> <p><strong><BODY></strong>Allt som skrivs under Body syns i Webbläsaren, det är som hemsidans kropp.</p> </blockquote> <h5 id="steg1grunderna">**STEG 1. - GRUNDERNA</h5> <p>**</p> <p>Att skriva HTML och visa på din webbplats/i en webbläsare.</p> <ol> <li><p>Skriv in koden i bilden nedan i ett nytt textdokument i Notepad (Anteckningar). Var noga med att skriva exakt alla tecken! </p> <p><img src="http://www.ifokus.se/ShowUserFile.aspx?BinaryId=5d25a7e8-dfdc-4ff0-84ba-8fa4f8f8216b" alt="start.jpg" /></p></li> <li><p>Spara din sida med namnet: min_sida.html </p></li> <li><p>Starta sedan din webbläsare och öppna ditt HTML-dokument. Tryck CTRL + O och bläddra dig fram till ditt dokument: min_sida.html</p></li> </ol> <p>Grattis! Du har nu skapat din första sida!</p> <h5 id="steg2textformatering">**STEG 2. - TEXTFORMATERING</h5> <p>**</p> <p>Nu ska du lära dig att formatera hur din text ska se ut det finns flera olika alternativ, här kommer några exempel: </p> <p><img src="http://www.ifokus.se/ShowUserFile.aspx?BinaryId=ac6f3ca7-3549-492a-869f-8eecc7e9929e" alt="text.jpg" /></p> <p><strong>h1:</strong> <h1>Din text</h1> <br /> <strong>h2:</strong> <h2>Din text</h2> <br /> <strong>h3:</strong> <h3>Din text</h3> </p> <p>För den vanliga texten behöver du bara avsluta föregående koder ordentligt. Alltså inte glömma tex: </h3> efter du skrivit din text inom taggarna.</p> <p>Såhär ser det ut i själva HTML-koden när jag kodat ihop det som i bilden ovan. </p> <p><img src="http://www.ifokus.se/ShowUserFile.aspx?BinaryId=55eca551-28a8-4469-9b3b-cc18a918331d" alt="rubriker.jpg" /> <br /> <em>Ursäkta att min mus satt precis vid <body></em> </p> <p><strong>Nu har vi gått igenom grunderna för HTML, tredjedelen kommer handla om: Färger & Teckensnitt.</strong></p></div></div></div><div style="margin-left:0" class="jsx-1772908323 comment-buttons"><span class="jsx-1772908323"></span><button type="button" style="color:#005f86" class="jsx-863189090 ">Svara</button></div></div></div></div></div></div><div style="margin-bottom:10px;min-height:300px" class="jsx-219919778 ad"><div class="jsx-219919778 ad-label">Annons:</div><div class="jsx-219919778 ad-content"><div id="ifokus_mpu1" class="jsx-219919778"></div></div></div></section><section class="jsx-2684761777"><div><div id="1"><div class="jsx-2684761777 "><div class="jsx-1772908323 root comment"><header class="jsx-3c40cd579ba45109 head"><div class="jsx-3c40cd579ba45109 avatar"><div class="jsx-3524429949 root"><div class="jsx-3524429949 avatar-container"><img src="http://ifokus-assets.se/uploads/dbb/dbb360edc2f92e5bb36cb88e29b02d7e/ifokusporfil.jpg" loading="lazy" style="width:50px;height:50px" alt="dijete" class="jsx-3524429949 avatar-img"/></div></div></div><div class="jsx-3c40cd579ba45109 meta"><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109 username"><a class="jsx-3c40cd579ba45109" href="/user/7312/dijete">dijete</a></span></div><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109">8/22/09, 2:41 AM</span></div></div><div class="jsx-3c40cd579ba45109 likes"><div role="button" aria-label="Gilla (0 gilla-markeringar)" title="Gilla (0 gilla-markeringar)" aria-disabled="false" tabindex="0" class="jsx-3943312008 likes"><svg width="20" height="16" viewBox="0 0 20 16" fill="transparent" xmlns="http://www.w3.org/2000/svg" class="jsx-3943312008"><path d="M16.027 9.48255C12.7449 11.385 11.193 12.5756 10.2992 13.8762C10.1917 14.0358 10.0922 14.2008 10.0013 14.3704C9.92348 14.2292 9.82653 14.0557 9.70329 13.8762C8.68265 12.3901 6.75505 11.0931 3.97551 9.48255C1.81219 8.22858 0.84421 6.27226 1.38863 4.25012C1.58354 3.41653 2.04676 2.67 2.70716 2.12525C3.36755 1.58051 4.18857 1.26769 5.04402 1.23486C8.24727 1.23486 10.0018 5.77896 10.0018 5.77896C10.0018 5.77896 11.5942 2.34085 12.9291 1.75055C13.5458 1.40123 14.245 1.22358 14.9537 1.23606C15.8091 1.26889 16.6301 1.58171 17.2905 2.12645C17.9509 2.6712 18.4142 3.41772 18.6091 4.25132C19.1583 6.27225 18.1915 8.22858 16.027 9.48255Z" stroke="#017eb3" class="jsx-3943312008"></path></svg><span class="jsx-3943312008 likes-count">0</span></div></div></header><div class="jsx-1772908323 "><div class="jsx-1738796669 jsx-3449298264 message-body message-body-comment"><span class="jsx-1738796669 jsx-3449298264 index">#<!-- -->1</span><div class="jsx-1738796669 jsx-3449298264 body user-background"><div class="jsx-1738796669 jsx-3449298264"><p>Nu är andra delen av Skaffa hemsida artikelserien ute. Inom kort kommer även Färger & Teckensnitt, längre fram planerar vi CSS.</p></div></div></div><div style="margin-left:40px" class="jsx-1772908323 comment-buttons"><span class="jsx-1772908323"></span><button type="button" style="color:#005f86" class="jsx-863189090 ">Svara</button></div></div></div></div></div></div></section><section class="jsx-2684761777"><div><div id="2"><div class="jsx-2684761777 "><div class="jsx-1772908323 root comment"><header class="jsx-3c40cd579ba45109 head"><div class="jsx-3c40cd579ba45109 avatar"><div class="jsx-3524429949 root"><div class="jsx-3524429949 avatar-container"><img src="http://ifokus-assets.se/c1ccefa2512f328c25475bd55483a4c9/klarpicture0679_thumb-64x64.jpg?thumb=64x64&source=http%3A%2F%2Fuploads.ifokus.se%2Fuploads%2Fbc7%2Fbc741c86406bb188bd8f2c05c474c303%2Fklarpicture0679.jpg" loading="lazy" style="width:50px;height:50px" alt="IdaSH" class="jsx-3524429949 avatar-img"/></div></div></div><div class="jsx-3c40cd579ba45109 meta"><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109 username"><a class="jsx-3c40cd579ba45109" href="/user/13909/idash">IdaSH</a></span></div><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109">8/22/09, 2:43 AM</span></div></div><div class="jsx-3c40cd579ba45109 likes"><div role="button" aria-label="Gilla (0 gilla-markeringar)" title="Gilla (0 gilla-markeringar)" aria-disabled="false" tabindex="0" class="jsx-3943312008 likes"><svg width="20" height="16" viewBox="0 0 20 16" fill="transparent" xmlns="http://www.w3.org/2000/svg" class="jsx-3943312008"><path d="M16.027 9.48255C12.7449 11.385 11.193 12.5756 10.2992 13.8762C10.1917 14.0358 10.0922 14.2008 10.0013 14.3704C9.92348 14.2292 9.82653 14.0557 9.70329 13.8762C8.68265 12.3901 6.75505 11.0931 3.97551 9.48255C1.81219 8.22858 0.84421 6.27226 1.38863 4.25012C1.58354 3.41653 2.04676 2.67 2.70716 2.12525C3.36755 1.58051 4.18857 1.26769 5.04402 1.23486C8.24727 1.23486 10.0018 5.77896 10.0018 5.77896C10.0018 5.77896 11.5942 2.34085 12.9291 1.75055C13.5458 1.40123 14.245 1.22358 14.9537 1.23606C15.8091 1.26889 16.6301 1.58171 17.2905 2.12645C17.9509 2.6712 18.4142 3.41772 18.6091 4.25132C19.1583 6.27225 18.1915 8.22858 16.027 9.48255Z" stroke="#017eb3" class="jsx-3943312008"></path></svg><span class="jsx-3943312008 likes-count">0</span></div></div></header><div class="jsx-1772908323 "><div class="jsx-1738796669 jsx-3449298264 message-body message-body-comment"><span class="jsx-1738796669 jsx-3449298264 index">#<!-- -->2</span><div class="jsx-1738796669 jsx-3449298264 body user-background"><div class="jsx-1738796669 jsx-3449298264"><p>Intressant artikel <img src="http://hemsidortemp.ifokus.se/tiny3/plugins/emotions/img/smiley-smile.gif" alt="Glad" title="Glad" /></p></div><div class="jsx-1738796669 jsx-3449298264 signature"><p>Mvh Ida</p> <p><em>www.krusfoto.se</em></p></div></div></div><div style="margin-left:40px" class="jsx-1772908323 comment-buttons"><span class="jsx-1772908323"></span><button type="button" style="color:#005f86" class="jsx-863189090 ">Svara</button></div></div></div></div></div></div></section><section class="jsx-2684761777"><div><div id="3"><div class="jsx-2684761777 "><div class="jsx-1772908323 root comment"><header class="jsx-3c40cd579ba45109 head"><div class="jsx-3c40cd579ba45109 avatar"><div class="jsx-3524429949 root"><div class="jsx-3524429949 avatar-container"><img src="http://ifokus-assets.se/uploads/00c/00cade019518a82a91e7db38a0bfc827/velvet.jpg" loading="lazy" style="width:50px;height:50px" alt="AnneN" class="jsx-3524429949 avatar-img"/></div></div></div><div class="jsx-3c40cd579ba45109 meta"><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109 username"><a class="jsx-3c40cd579ba45109" href="/user/3176/annen">AnneN</a></span></div><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109">8/22/09, 2:44 AM</span></div></div><div class="jsx-3c40cd579ba45109 likes"><div role="button" aria-label="Gilla (0 gilla-markeringar)" title="Gilla (0 gilla-markeringar)" aria-disabled="false" tabindex="0" class="jsx-3943312008 likes"><svg width="20" height="16" viewBox="0 0 20 16" fill="transparent" xmlns="http://www.w3.org/2000/svg" class="jsx-3943312008"><path d="M16.027 9.48255C12.7449 11.385 11.193 12.5756 10.2992 13.8762C10.1917 14.0358 10.0922 14.2008 10.0013 14.3704C9.92348 14.2292 9.82653 14.0557 9.70329 13.8762C8.68265 12.3901 6.75505 11.0931 3.97551 9.48255C1.81219 8.22858 0.84421 6.27226 1.38863 4.25012C1.58354 3.41653 2.04676 2.67 2.70716 2.12525C3.36755 1.58051 4.18857 1.26769 5.04402 1.23486C8.24727 1.23486 10.0018 5.77896 10.0018 5.77896C10.0018 5.77896 11.5942 2.34085 12.9291 1.75055C13.5458 1.40123 14.245 1.22358 14.9537 1.23606C15.8091 1.26889 16.6301 1.58171 17.2905 2.12645C17.9509 2.6712 18.4142 3.41772 18.6091 4.25132C19.1583 6.27225 18.1915 8.22858 16.027 9.48255Z" stroke="#017eb3" class="jsx-3943312008"></path></svg><span class="jsx-3943312008 likes-count">0</span></div></div></header><div class="jsx-1772908323 "><div class="jsx-1738796669 jsx-3449298264 message-body message-body-comment"><span class="jsx-1738796669 jsx-3449298264 index">#<!-- -->3</span><div class="jsx-1738796669 jsx-3449298264 body user-background"><div class="jsx-1738796669 jsx-3449298264"><p>Ännu en superbra artikel <img src="http://hemsidortemp.ifokus.se/tiny3/plugins/emotions/img/smiley-smile.gif" alt="Glad" title="Glad" /> Har du skrivit allt ur eget huvud eller har du använt några källor?</p></div><div class="jsx-1738796669 jsx-3449298264 signature"><p>_**/Mvh Anne<br /> **~Sajtvärd på Blandrashundar ~Medarbetare på Support<br /> _Hundägare i Norrbotten? Välkommen till oss på Hundhuset!</p></div></div></div><div style="margin-left:40px" class="jsx-1772908323 comment-buttons"><span class="jsx-1772908323"></span><button type="button" style="color:#005f86" class="jsx-863189090 ">Svara</button></div></div></div></div></div></div></section><section class="jsx-2684761777"><div><div id="4"><div class="jsx-2684761777 "><div class="jsx-1772908323 root comment"><header class="jsx-3c40cd579ba45109 head"><div class="jsx-3c40cd579ba45109 avatar"><div class="jsx-3524429949 root"><div class="jsx-3524429949 avatar-container"><img src="http://ifokus-assets.se/uploads/dbb/dbb360edc2f92e5bb36cb88e29b02d7e/ifokusporfil.jpg" loading="lazy" style="width:50px;height:50px" alt="dijete" class="jsx-3524429949 avatar-img"/></div></div></div><div class="jsx-3c40cd579ba45109 meta"><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109 username"><a class="jsx-3c40cd579ba45109" href="/user/7312/dijete">dijete</a></span></div><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109">8/22/09, 2:48 AM</span></div></div><div class="jsx-3c40cd579ba45109 likes"><div role="button" aria-label="Gilla (0 gilla-markeringar)" title="Gilla (0 gilla-markeringar)" aria-disabled="false" tabindex="0" class="jsx-3943312008 likes"><svg width="20" height="16" viewBox="0 0 20 16" fill="transparent" xmlns="http://www.w3.org/2000/svg" class="jsx-3943312008"><path d="M16.027 9.48255C12.7449 11.385 11.193 12.5756 10.2992 13.8762C10.1917 14.0358 10.0922 14.2008 10.0013 14.3704C9.92348 14.2292 9.82653 14.0557 9.70329 13.8762C8.68265 12.3901 6.75505 11.0931 3.97551 9.48255C1.81219 8.22858 0.84421 6.27226 1.38863 4.25012C1.58354 3.41653 2.04676 2.67 2.70716 2.12525C3.36755 1.58051 4.18857 1.26769 5.04402 1.23486C8.24727 1.23486 10.0018 5.77896 10.0018 5.77896C10.0018 5.77896 11.5942 2.34085 12.9291 1.75055C13.5458 1.40123 14.245 1.22358 14.9537 1.23606C15.8091 1.26889 16.6301 1.58171 17.2905 2.12645C17.9509 2.6712 18.4142 3.41772 18.6091 4.25132C19.1583 6.27225 18.1915 8.22858 16.027 9.48255Z" stroke="#017eb3" class="jsx-3943312008"></path></svg><span class="jsx-3943312008 likes-count">0</span></div></div></header><div class="jsx-1772908323 "><div class="jsx-1738796669 jsx-3449298264 message-body message-body-comment"><span class="jsx-1738796669 jsx-3449298264 index">#<!-- -->4</span><div class="jsx-1738796669 jsx-3449298264 body user-background"><div class="jsx-1738796669 jsx-3449298264"><p><span class="comment-mention" data-index="3">#3</span> Jag har skrivit allt ur eget huvud! </p> <p>Tack så mycket! <img src="http://hemsidortemp.ifokus.se/tiny3/plugins/emotions/img/smiley-smile.gif" alt="Glad" title="Glad" /></p></div></div></div><div style="margin-left:40px" class="jsx-1772908323 comment-buttons"><span class="jsx-1772908323"></span><button type="button" style="color:#005f86" class="jsx-863189090 ">Svara</button></div></div></div></div></div></div></section><section class="jsx-2684761777"><div><div id="5"><div class="jsx-2684761777 "><div class="jsx-1772908323 root comment"><header class="jsx-3c40cd579ba45109 head"><div class="jsx-3c40cd579ba45109 avatar"><div class="jsx-3524429949 root"><div class="jsx-3524429949 avatar-container"><img src="http://ifokus-assets.se/uploads/dbb/dbb360edc2f92e5bb36cb88e29b02d7e/ifokusporfil.jpg" loading="lazy" style="width:50px;height:50px" alt="dijete" class="jsx-3524429949 avatar-img"/></div></div></div><div class="jsx-3c40cd579ba45109 meta"><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109 username"><a class="jsx-3c40cd579ba45109" href="/user/7312/dijete">dijete</a></span></div><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109">8/22/09, 2:49 AM</span></div></div><div class="jsx-3c40cd579ba45109 likes"><div role="button" aria-label="Gilla (0 gilla-markeringar)" title="Gilla (0 gilla-markeringar)" aria-disabled="false" tabindex="0" class="jsx-3943312008 likes"><svg width="20" height="16" viewBox="0 0 20 16" fill="transparent" xmlns="http://www.w3.org/2000/svg" class="jsx-3943312008"><path d="M16.027 9.48255C12.7449 11.385 11.193 12.5756 10.2992 13.8762C10.1917 14.0358 10.0922 14.2008 10.0013 14.3704C9.92348 14.2292 9.82653 14.0557 9.70329 13.8762C8.68265 12.3901 6.75505 11.0931 3.97551 9.48255C1.81219 8.22858 0.84421 6.27226 1.38863 4.25012C1.58354 3.41653 2.04676 2.67 2.70716 2.12525C3.36755 1.58051 4.18857 1.26769 5.04402 1.23486C8.24727 1.23486 10.0018 5.77896 10.0018 5.77896C10.0018 5.77896 11.5942 2.34085 12.9291 1.75055C13.5458 1.40123 14.245 1.22358 14.9537 1.23606C15.8091 1.26889 16.6301 1.58171 17.2905 2.12645C17.9509 2.6712 18.4142 3.41772 18.6091 4.25132C19.1583 6.27225 18.1915 8.22858 16.027 9.48255Z" stroke="#017eb3" class="jsx-3943312008"></path></svg><span class="jsx-3943312008 likes-count">0</span></div></div></header><div class="jsx-1772908323 "><div class="jsx-1738796669 jsx-3449298264 message-body message-body-comment"><span class="jsx-1738796669 jsx-3449298264 index">#<!-- -->5</span><div class="jsx-1738796669 jsx-3449298264 body user-background"><div class="jsx-1738796669 jsx-3449298264"><p>Kan tillägga också att Ida även har skrivit lite i denna artikel, dock mest jag.</p></div></div></div><div style="margin-left:40px" class="jsx-1772908323 comment-buttons"><span class="jsx-1772908323"></span><button type="button" style="color:#005f86" class="jsx-863189090 ">Svara</button></div></div></div></div></div></div></section><div class="jsx-8d952b170aa82f59 comment-login"><button class="jsx-2505901327 ">Logga in för att kommentera!</button></div><a href="#site-top" class="jsx-2684761777 scroll-to-top">Upp till toppen</a><div style="margin-bottom:10px;min-height:300px" class="jsx-219919778 ad"><div class="jsx-219919778 ad-label">Annons:</div><div class="jsx-219919778 ad-content"><div id="ifokus_mpu1_2" class="jsx-219919778"></div></div></div></div></article><div style="height:100px"></div><div> </div></div></div></div></main></div><aside class="jsx-3713795938 sidebar sidebar-visible"><div class="jsx-3713795938 sidebar-content"><aside class="jsx-7c0db07d1cc8c84e"><div role="tablist" aria-label="Aktiv visning" class="jsx-2447797273 segments"><div role="tab" aria-selected="true" tabindex="0" class="jsx-2447797273 item selected">Bli medlem</div><div role="tab" aria-selected="false" tabindex="0" class="jsx-2447797273 item ">Våra sajter</div></div><div class="jsx-7c0db07d1cc8c84e content"><h2 class="jsx-7c0db07d1cc8c84e blue-text content-heading">Hundratals sajter med samma medlemskap</h2><p class="jsx-7c0db07d1cc8c84e"><em class="jsx-7c0db07d1cc8c84e">Skapa ett gratis konto och delta i diskussionerna.</em></p><div role="tablist" aria-label="Aktiv visning" class="jsx-2447797273 segments"><div role="tab" aria-selected="true" tabindex="0" class="jsx-2447797273 item selected">Logga in</div><div role="tab" aria-selected="false" tabindex="0" class="jsx-2447797273 item ">Skapa konto</div></div><form class="jsx-1311562031"><div class="jsx-2270570846 form-field"><label class="jsx-2270570846">Användarnamn</label><input type="text" required="" autoComplete="username" placeholder="Användarnamn" id="username" aria-label="Användarnamn" class="jsx-1012317222 " value=""/></div><div class="jsx-2270570846 form-field"><label class="jsx-2270570846">Lösenord</label><input type="password" required="" autoComplete="current-password" placeholder="Lösenord" id="password" aria-label="Lösenord" class="jsx-1012317222 " value=""/></div><div class="jsx-1489059234 form-field-checkbox"><label class="jsx-1489059234"><div class="jsx-1489059234 checkbox"><input type="checkbox" class="jsx-1489059234 " checked=""/><span class="jsx-1489059234"></span></div>Kom ihåg mig</label></div><div class="jsx-1311562031"><button type="submit" class="jsx-2505901327 ">Logga in</button></div></form><div class="jsx-7c0db07d1cc8c84e footer"><p class="jsx-7c0db07d1cc8c84e">Inte medlem?<span role="button" class="jsx-7c0db07d1cc8c84e link"> <!-- -->Bli medlem!<!-- --> </span></p><p class="jsx-7c0db07d1cc8c84e"><a class="jsx-7c0db07d1cc8c84e" href="/user/forgot-password">Glömt lösenord?</a></p></div></div></aside><div style="min-height:270px" class="jsx-3713795938"><div style="min-height:250px" class="jsx-219919778 ad"><div class="jsx-219919778 ad-label">Annons:</div><div class="jsx-219919778 ad-content"><div id="ifokus_tws1_2" class="jsx-219919778"></div></div></div></div></div></aside></div><div id="sitemap" class="jsx-1142688426 sitemap"></div><footer class="jsx-1142688426"><nav class="jsx-1142688426"><a href="https://www.ifokus.se/about" class="jsx-1142688426">Om iFokus</a><a href="https://blog.ifokus.se" class="jsx-1142688426">Bloggen</a><a href="https://support.ifokus.se" class="jsx-1142688426">Support</a><a href="https://www.ifokus.se/about/user_agreement" class="jsx-1142688426">Användaravtal</a><a href="https://www.ifokus.se/about/rules_of_conduct" class="jsx-1142688426">Skrivregler</a></nav><div class="jsx-1142688426 branding-bg"><div class="jsx-1142688426 branding"><img src="https://www.ifokus.se/images/ifokus-text-blue.svg" style="width:106px;height:23px" alt="Logotyp" class="jsx-1142688426"/><span class="jsx-1142688426 byline">Sveriges största intressenätverk</span></div></div><div class="jsx-1142688426 copyright">© Copyright <!-- -->2024<!-- --> <!-- -->iFokus</div></footer><div id="toolbar" class="jsx-3739181486"><button title="Upp till toppen" class="jsx-3739181486 img-button"><img src="/images/up.svg" style="width:20px;height:20px" alt="Upp till toppen" class="jsx-3739181486"/></button></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"discussionId":434452,"discussionResponse":{"id":434452,"accessRequired":10,"discussion":{"id":434452,"siteId":1504,"userId":7312,"accessRequired":10,"title":"Skaffa hemsida: HTML-grunder","abstractText":"I andra delen av vår artikelserie \"Skapa hemsida\" går vi igenom hur du börjar sakta men säkert koda din egna hemsida i en enkel texteditor.","tags":["09-skaffa-hemsida"],"readCounter":4199,"postCount":6,"importance":0,"sticky":false,"publishedAt":1250889780,"commentedAt":1250902163},"posts":[{"id":6413019,"discussionId":434452,"userId":7312,"markdown":null,"html":"\u003ch4 id=\"vadrhtml\"\u003eVad är HTML?\u003c/h4\u003e\n\u003cp\u003e\u003cem\u003eHTML\u003c/em\u003e är en förkortning av orden \u003cem\u003eHyperText Markup Language\u003c/em\u003e. HTML är den grundläggande koden som används för en hemsida. Du kan dock inte få ut allt i en HTML-kod utan måste oftast kompliteras med\u0026nbsp;t ex\u0026nbsp;CSS för att få ut maximala funktionen i koderna.\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"http://www.ifokus.se/ShowUserFile.aspx?BinaryId=ee4fe9c7-4a61-44ae-8294-fc1633ded34a\" alt=\"grunder.jpg\" /\u003e\u003c/p\u003e\n\u003ch4 id=\"brjabyggaensidamedhtml\"\u003eBörja bygga en sida med HTML\u003c/h4\u003e\n\u003cp\u003eNär du ska bygga din hemsida behöver du\u0026nbsp;en texteditor. I detta fall kommer vi använda Notepad (Anteckningar) som finns i Windows som standard. Det finns även \u003cstrong\u003eWYSIWYG\u003c/strong\u003e (\u003cstrong\u003eW\u003c/strong\u003ehat \u003cstrong\u003eY\u003c/strong\u003eou \u003cstrong\u003eS\u003c/strong\u003eee \u003cstrong\u003eI\u003c/strong\u003es \u003cstrong\u003eW\u003c/strong\u003ehat \u003cstrong\u003eY\u003c/strong\u003eou \u003cstrong\u003eG\u003c/strong\u003eet, På svenska: \u003cstrong\u003eVad du ser är vad du får\u003c/strong\u003e) editorer som skriver koden åt dig i programmet ett av dom är Frontpage. Även om du använder en \u003cstrong\u003eWYSIWYG\u003c/strong\u003e editor är det viktigt att du har grundkunskaper om \u003cstrong\u003eHTML\u003c/strong\u003e som du kommer lära dig i denna \u003cstrong\u003eguide\u003c/strong\u003e. Anledningen till varför du behöver grundkunskaper även om du använder en \u003cstrong\u003eWYSIWYG\u003c/strong\u003e editor är att t ex om du vill lägga till ett javascript som t ex förhindrar högerklick behöver du veta inom vilken tag du ska sätta koden.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eHTML\u003c/strong\u003e används i taggar \u003cstrong\u003e\u003ctags\u003e\u003c/strong\u003e och avslutar ofta med \u003cstrong\u003e\u003c/tags\u003e\u003c/strong\u003e, \u003cstrong\u003eHTML\u003c/strong\u003e är inte känslig för \u003cstrong\u003esmå\u003c/strong\u003e eller \u003cstrong\u003estora\u003c/strong\u003e bokstäver så det spelar ingen roll om du skriver \u003cstrong\u003e\u003cTITLE\u003e\u003c/strong\u003e eller \u003cstrong\u003e\u003ctitle\u003e\u003c/strong\u003e,\u003cstrong\u003e\u003cHTML\u003e\u003c/strong\u003e Anger att koden och sidan är ett HTML-dokument.\u003c/p\u003e\n\u003cblockquote\u003e\n \u003cp\u003e\u003cstrong\u003e\u003cHEAD\u003e\u003c/strong\u003e Denna del av HTML-dokumentet är ''osynlig'', information här under ger information till din webbläsare,sökmotorer,osv. Inget som du skriver här syns på din sida som text.\u003c/p\u003e\n \u003cp\u003e\u003cstrong\u003e\u003cTITLE\u003e\u003c/strong\u003e Din hemsidas titel.\u003c/p\u003e\n \u003cp\u003e\u003cstrong\u003e\u003cBODY\u003e\u003c/strong\u003eAllt som skrivs under Body syns i Webbläsaren, det är som hemsidans kropp.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003ch5 id=\"steg1grunderna\"\u003e**STEG 1. - GRUNDERNA\u003c/h5\u003e\n\u003cp\u003e**\u003c/p\u003e\n\u003cp\u003eAtt skriva HTML och visa på din webbplats/i en webbläsare.\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e\u003cp\u003eSkriv in koden i bilden nedan i ett nytt textdokument i Notepad (Anteckningar). Var noga med att skriva exakt alla tecken! \u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"http://www.ifokus.se/ShowUserFile.aspx?BinaryId=5d25a7e8-dfdc-4ff0-84ba-8fa4f8f8216b\" alt=\"start.jpg\" /\u003e\u003c/p\u003e\u003c/li\u003e\n\u003cli\u003e\u003cp\u003eSpara din sida med namnet: min_sida.html \u003c/p\u003e\u003c/li\u003e\n\u003cli\u003e\u003cp\u003eStarta sedan din webbläsare och öppna ditt HTML-dokument. Tryck CTRL + O och bläddra dig fram till ditt dokument: min_sida.html\u003c/p\u003e\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003eGrattis! Du har nu skapat din första sida!\u003c/p\u003e\n\u003ch5 id=\"steg2textformatering\"\u003e**STEG 2. - TEXTFORMATERING\u003c/h5\u003e\n\u003cp\u003e**\u003c/p\u003e\n\u003cp\u003eNu ska du lära dig att formatera hur din text ska se ut det finns flera olika alternativ, här kommer några exempel: \u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"http://www.ifokus.se/ShowUserFile.aspx?BinaryId=ac6f3ca7-3549-492a-869f-8eecc7e9929e\" alt=\"text.jpg\" /\u003e\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eh1:\u003c/strong\u003e \u003ch1\u003eDin text\u003c/h1\u003e \u003cbr /\u003e\n\u003cstrong\u003eh2:\u003c/strong\u003e \u003ch2\u003eDin text\u003c/h2\u003e \u003cbr /\u003e\n\u003cstrong\u003eh3:\u003c/strong\u003e \u003ch3\u003eDin text\u003c/h3\u003e \u003c/p\u003e\n\u003cp\u003eFör den vanliga texten behöver du bara avsluta föregående koder ordentligt. Alltså inte glömma tex: \u003c/h3\u003e efter du skrivit din text inom taggarna.\u003c/p\u003e\n\u003cp\u003eSåhär ser det ut i själva HTML-koden när jag kodat ihop det som i bilden ovan. \u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"http://www.ifokus.se/ShowUserFile.aspx?BinaryId=55eca551-28a8-4469-9b3b-cc18a918331d\" alt=\"rubriker.jpg\" /\u003e \u003cbr /\u003e\n\u003cem\u003eUrsäkta att min mus satt precis vid \u003cbody\u003e\u003c/em\u003e \u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eNu har vi gått igenom grunderna för HTML, tredjedelen kommer handla om: Färger \u0026 Teckensnitt.\u003c/strong\u003e\u003c/p\u003e","images":["9bf068fa38677f5dc4553c4bad0a732e"],"attachments":[],"likes":1,"postedAt":1250889780,"anonymous":false},{"id":6413020,"discussionId":434452,"userId":7312,"markdown":null,"html":"\u003cp\u003eNu är andra delen av Skaffa hemsida artikelserien ute. Inom kort kommer även Färger \u0026amp; Teckensnitt, längre fram planerar vi CSS.\u003c/p\u003e","attachments":[],"likes":0,"postedAt":1250901665,"anonymous":false},{"id":6413021,"discussionId":434452,"userId":13909,"markdown":null,"html":"\u003cp\u003eIntressant artikel \u003cimg src=\"http://hemsidortemp.ifokus.se/tiny3/plugins/emotions/img/smiley-smile.gif\" alt=\"Glad\" title=\"Glad\" /\u003e\u003c/p\u003e","attachments":[],"likes":0,"postedAt":1250901828,"anonymous":false},{"id":6413022,"discussionId":434452,"userId":3176,"markdown":null,"html":"\u003cp\u003eÄnnu en superbra artikel \u003cimg src=\"http://hemsidortemp.ifokus.se/tiny3/plugins/emotions/img/smiley-smile.gif\" alt=\"Glad\" title=\"Glad\" /\u003e Har du skrivit allt ur eget huvud eller har du använt några källor?\u003c/p\u003e","attachments":[],"likes":0,"postedAt":1250901895,"anonymous":false},{"id":6413023,"discussionId":434452,"userId":7312,"markdown":null,"html":"\u003cp\u003e\u003cspan class=\"comment-mention\" data-index=\"3\"\u003e#3\u003c/span\u003e Jag har skrivit allt ur eget huvud! \u003c/p\u003e\n\u003cp\u003eTack så mycket! \u003cimg src=\"http://hemsidortemp.ifokus.se/tiny3/plugins/emotions/img/smiley-smile.gif\" alt=\"Glad\" title=\"Glad\" /\u003e\u003c/p\u003e","attachments":[],"likes":0,"postedAt":1250902126,"anonymous":false},{"id":6413024,"discussionId":434452,"userId":7312,"markdown":null,"html":"\u003cp\u003eKan tillägga också att Ida även har skrivit lite i denna artikel, dock mest jag.\u003c/p\u003e","attachments":[],"likes":0,"postedAt":1250902163,"anonymous":false}],"users":{"3176":{"id":3176,"networkId":1,"username":"AnneN","usernameNormalized":"annen","signature":"\u003cp\u003e_**/Mvh Anne\u003cbr /\u003e\n**~Sajtvärd på Blandrashundar ~Medarbetare på Support\u003cbr /\u003e\n_Hundägare i Norrbotten? Välkommen till oss på Hundhuset!\u003c/p\u003e","avatarUrl":"http://ifokus-assets.se/uploads/00c/00cade019518a82a91e7db38a0bfc827/velvet.jpg","createdAt":1174147569,"emailValidatedAt":1174147569,"lastLoginAt":1688915512.909,"loginCount":23909,"sites":[]},"7312":{"id":7312,"networkId":1,"username":"dijete","usernameNormalized":"dijete","signature":"","avatarUrl":"http://ifokus-assets.se/uploads/dbb/dbb360edc2f92e5bb36cb88e29b02d7e/ifokusporfil.jpg","createdAt":1219088285,"emailValidatedAt":1219088285,"lastLoginAt":1599268187.833,"loginCount":6481,"sites":[]},"13909":{"id":13909,"networkId":1,"username":"IdaSH","usernameNormalized":"idash","signature":"\u003cp\u003eMvh Ida\u003c/p\u003e\n\u003cp\u003e\u003cem\u003ewww.krusfoto.se\u003c/em\u003e\u003c/p\u003e","avatarUrl":"http://ifokus-assets.se/c1ccefa2512f328c25475bd55483a4c9/klarpicture0679_thumb-64x64.jpg?thumb=64x64\u0026source=http%3A%2F%2Fuploads.ifokus.se%2Fuploads%2Fbc7%2Fbc741c86406bb188bd8f2c05c474c303%2Fklarpicture0679.jpg","createdAt":1222193092,"emailValidatedAt":1222193092,"lastLoginAt":1599268187.833,"loginCount":3891,"sites":[]}},"feature":null,"decisions":{},"edits":{},"linkPreviews":{}},"isLoadedOnServer":true},"communityResponse":{"network":{"id":1,"name":"iFokus","domain":"ifokus.se","email":"info@ifokus.se","language":"sv","ga":"G-N0ZDQJWLPJ","settings":{"logos":{"largeLight":"https://www.ifokus.se/images/ifokus-textonly.svg","mediumLight":"https://www.ifokus.se/images/ifokus-text.svg","mediumDark":"https://www.ifokus.se/images/ifokus-text-blue.svg","round":"https://www.ifokus.se/images/i-ifokus-inv.svg"},"ads":{"scriptId":"108_1451","panorama":"4484","module":"5103","insider":"4486","insiderRight":"4708"},"apiKeys":{"googleClientId":""},"favicon":"https://www.ifokus.se/images/i-ifokus.svg"}},"site":{"id":1504,"networkId":1,"categoryId":3,"subdomain":"hemsidor","name":"Hemsidor","siteType":0,"active":false},"siteCategory":{"id":3,"networkId":1,"name":"Datorer \u0026 Prylar","color":"#999999","sort":30,"adId":"7205099367"},"community":{"id":1504,"metaDescription":"Hemsidor iFokus finns för dig som har något intresse för just hemsidor och dess uppbyggnad. Har du problem med din kodning? tveka inte att fråga! Det är 100% gratis att bli medlem.","metaKeywords":"handikapp hetlänkning gratis webbhotell hemsidor Regler formulär dynsamisk css iFokus komprimera design lightbox firebug Månadens medlem twitter Domän Webbhotell meny css anpassad php webs.com html webs layout enkelt förminska js Hemsidor iFokus bilder spcifik Clearbox text förminska bilder one.com favicon manufrog.com flickr xampp galleri webb.se Skaffa Hemsida nyckelord Skrivregler Lytebox måndagstips recension snippets javascript tillgänglighet säkerhet hemsida google gratis domän dot.tk .tk formatering wordpress freewebs standard simplepie freewebs.com screencast Sökmotoroptimering grunder Manufrog textformatering box model problem indentering jquery","bannerUrl":"http://process.ifokus.se/uploads/69b/69b54120a35bcbfdf893b2f7e3a08883/hemsidor.jpg","activityBase":5,"activityTime":1680206608.567,"colors":["#3582a9","#1d698f","#024568"]},"settings":{"network_wikiwords":"true"},"lexicon":[],"networkLexicon":[{"networkId":1,"word":"Användaravtal","targetUrl":"/about/useragreement/"},{"networkId":1,"word":"Avatar","targetUrl":"/about/avatar/"},{"networkId":1,"word":"Guldmynt","targetUrl":"/about/goldcoins/"},{"networkId":1,"word":"Guldmyntshoppen","targetUrl":"/about/goldcoinshop/"},{"networkId":1,"word":"iFokus","targetUrl":"/about/ifokus2/"},{"networkId":1,"word":"iFokus-bloggen","targetUrl":"/about/ifokusblog/"},{"networkId":1,"word":"iFokus utan reklam","targetUrl":"/about/adfree2/"},{"networkId":1,"word":"Insider","targetUrl":"/about/insider2/"},{"networkId":1,"word":"Intressesajt","targetUrl":"/about/interestsite/"},{"networkId":1,"word":"Kluring","targetUrl":"/about/kluring/"},{"networkId":1,"word":"Lexikon","targetUrl":"/about/lexicon/"},{"networkId":1,"word":"Medaljer","targetUrl":"/about/medals/"},{"networkId":1,"word":"Medarbetare","targetUrl":"/about/assistant/"},{"networkId":1,"word":"Sajtvärd","targetUrl":"/about/sitehost/"},{"networkId":1,"word":"Skrivregler","targetUrl":"/about/rules/"},{"networkId":1,"word":"Starta en sajt","targetUrl":"/about/startsite/"},{"networkId":1,"word":"Support iFokus","targetUrl":"/about/support/"}],"owner":{"id":140524,"networkId":1,"username":"Sajtvärd saknas","usernameNormalized":"sajtvärd saknas","signature":"","avatarUrl":"http://ifokus-assets.se/images/avatar.png","createdAt":1329998510,"emailValidatedAt":1329998510,"lastLoginAt":1599268187.833,"loginCount":4,"sites":[]},"ownerActive":false,"activityIndex":1.1573793314876873e-16,"isIpBlocked":false,"ipAddress":"192.168.28.140"},"useragent":{"isMobile":false,"isDesktop":true},"showAds":true},"page":"/discussion/[id]/[slug]","query":{"id":"434452","slug":"skaffa-hemsida-html-grunder"},"buildId":"BCvDzzKIrIYSYO7dILp9Y","isFallback":false,"isExperimentalCompile":false,"dynamicIds":[80119,39219,19445],"gip":true,"appGip":true,"scriptLoader":[]}</script></body></html>