Innehåll

• Att gå
• Del 1 av 2: Lär dig grunderna i HTML
• Del 2 av 2: Lär dig avancerad HTML
• Tips
• Varningar
• Förnödenheter

HTML är förkortningen för Hyper Text Markup Language, det är koden eller språk som används för att skapa webbplatser. Det kan se komplicerat ut om du aldrig har programmerat förut, men att prova allt du behöver är ett enkelt ordbehandlingsprogram och en webbläsare. Du kanske känner igen viss HTML från forum, onlineprofiler eller wikiHow-artiklar. HTML är en användbar resurs för alla som använder Internet, och att lära sig HTML kan ta kortare tid än man förväntar sig.

Att gå

Del 1 av 2: Lär dig grunderna i HTML

1. Öppna ett HTML-dokument. De flesta ordbehandlingsprogram, inklusive Notepad eller Word för Windows och Text Editor för Mac, kan användas för att skapa HTML-dokument. Öppna ett nytt dokument och välj Arkiv → Spara som från toppmenyn för att spara ditt dokument som en webbsida, eller ändra filtillägget från ".doc", ".rtf" eller något annat till ".html" eller ".htm ".
   • Du kan nu se en varning om att ditt dokument ändras från RTF (Rich Text Format) till "vanlig text" och att vissa formateringsalternativ och bilder inte sparas ordentligt. Du kan ignorera denna varning; HTML-dokument använder inte dessa alternativ.
   • .html- och .htm-filer är desamma. Det fungerar båda.
2. Visa ditt dokument med en webbläsare. Spara ditt tomma dokument, stäng det och dubbelklicka sedan på dokumentet på platsen där det sparades för att öppna det igen. Ditt dokument ska nu öppnas av din webbläsare som en tom webbsida. Om det inte fungerar drar du filens ikon till webbläsarens adressfält. Senare, om du redigerar ditt HTML-dokument enligt stegen i den här artikeln, fortsätter du tillbaka till webbläsaren för att kontrollera hur ändringarna i koden ser ut.
   • Obs! Din webbsida är inte online ännu. Sidan är inte tillgänglig för andra och du behöver inte ha en fungerande internetanslutning för att testa den. Du använder bara din webbläsare för att "läsa" HTML-dokumentet som om det vore en webbplats.
3. Förstå vad "taggar" är. Taggar är inte synliga på den sista webbsidan, som vanlig text kan. Taggarna berättar för din webbläsare hur du visar sidan och innehållet på sidan. Starttaggen innehåller instruktioner. Det kan till exempel be webbläsaren att visa texten i fetstil. Sluttaggen behövs för att berätta för webbläsaren var instruktionerna gäller: i det här exemplet är all text mellan start- och sluttaggen fet. Sluttaggar placeras också inom parentes, men ett snedstreck följer den första parentesen.
   • Skriv starttaggar inom parentes: det här är startdagen>
   • Skriv slutkoder inom parentes, men lägg ett snedstreck efter den första parentesen: /detta är den avslutande taggen>)
   • Läs senare i artikeln hur man skriver funktionella taggar. I det här steget behöver du bara komma ihåg vilket sätt du ska skriva taggar:> och />.
   • I andra HTML-kurser kallas taggar också som "element" och texten mellan öppnande och stängande taggar kallas också "elementinnehåll".
4. Skriv din första html> -tagg. Varje HTML-dokument börjar med en html>tagg och slutar med en / html>märka. Detta berättar för webbläsaren att allt mellan dessa taggar är skrivet i HTML. Lägg till dessa taggar i ditt dokument:
   • Skriva html> högst upp i dokumentet.
   • Tryck på Enter eller återvänd flera gånger för att ge dig lite utrymme och skriv sedan / html>
   • Kommer ihåg dig allt i den här artikeln mellan dessa två taggar.
5. Gör huvudet> till en del av ditt dokument. Mellan taggarna html> och / html> skriver du en huvud>starttagg och a / huvud>-änd tagg. Gör lite utrymme igen mellan dessa taggar. Allt som skrivs mellan dessa taggar kommer inte att synas på själva webbsidan. Prova följande steg och se om du kan se var informationen dyker upp:
   • Skriv mellan taggarna head> och / head>: titel> och / titel>
   • Mellan taggarna titeln> och / titeln> skriver du: Hur man lär sig HTML (med bilder) - wikiHow.
   • Spara dokumentet och öppna det i en webbläsare (eller spara dokumentet och uppdatera sidan i webbläsaren om sidan fortfarande var öppen). Ser du vad du just skrev högst upp på sidan, ovanför adressfältet?
6. Skapa en kropp> avsnitt. Allt annat i detta nybörjardokument placeras i avsnittet body> och visas på webbsidan. Efter taggen / head>, men framför taggen / html> du skriver kropp> och / kropp>. Allt vi diskuterar vidare i den här artikeln, placerar vi mellan kroppstaggarna. Du bör nu ha ett dokument som ser ut så här (utan kulor):
   • html>
   • huvud>
   • titel> lär dig HTML - wikiHow / title>
   • / huvud>
   • kropp>
   • / kropp>
   • / html>
7. Lägg till text i olika stilar. Nu är det dags att du börjar skriva något som faktiskt kommer att synas i webbläsaren! Allt du skriver i body-taggarna kommer att synas i webbläsaren när du har sparat ändringarna och uppdaterat sidan i webbläsaren. Skriva inte något med skyltarna och >eftersom din webbläsare tolkar det som HTML-instruktion istället för vanlig text. Skriv till exempel Hej världen! (Engelska för "Hello world!", Detta är den globala standardtexten som det första exemplet i en programmeringskurs på ett visst programmeringsspråk) eller något annat, och lägg följande taggar före och efter texten och se vad som händer:
   • em> Hej världen! / em> ser ut som kursiv text: Hej världen!
   • stark> Hej värld! / stark> ser ut som fet text: Hej världen!
   • s> Hej världen! / s> ser ut som genomskinlig text: Hej världen!
   • sup> Hej världen! / sup> ser ut som superscript:
   • sub> Hej värld! / sub> ser ut som bildtext: _{Hej världen!}
   • Testa kombinationer: Hur ser em> stark> Hej värld! / stark> / em> gå ut?
8. Dela upp din text i stycken. Om du lägger till olika textrader i ditt dokument ser du att alla rader placeras efter varandra. Du måste själv programmera nya rader och tomma rader:
   • p> Detta är ett separat avsnitt. / p>
   • Denna mening är på första raden och den här meningen på nästa.
     Det här är den första taggen vi stöter på som inte behöver en slutkod! Vi kallar en sådan tagg en tom tagg.
   • Skapa rubriker för att göra namnen på avsnitten tydliga:
     h1> rubrik / h1>: den största möjliga rubriken
     h2> rubrik / h2> (rubriken på två nivåer)
     h3> rubrik / h3> (3-nivå rubriken)
     h4> rubrik / h4> (rubriken med 4 nivåer)
     h5> rubrik / h5> (minsta möjliga rubrik)
9. Lär dig hur man skapar listor. Det finns flera sätt att skapa listor på en webbsida. Prova följande metoder för att ta reda på vad du gillar bäst. Observera att ett par taggar placeras runt hela listan (t.ex. ul> och / ul> taggar för oordnade listor) och att ett annat par taggar placeras runt varje objekt i listan, t.ex. li> och / li> .
   • Använd följande kod för att skapa punktlistor:
     ul> li> Ett objekt / li> li> Ett annat objekt / li> li> ett annat objekt / li> / ul>
   • Eller den här koden för att skapa numrerade listor:
     ol> li> Punkt 1 / li> li> artikel 2 / li> li> artikel 3 / li> / ol>
   • Eller den här koden för att skapa en så kallad definitionslista:
     dl> dt> Kaffe / dt> dd> - Varm dryck / dd> dt> Mjölk / dt> dd> - Kall dryck / dd> / dl>
10. Gör din sida mer attraktiv med nya linjer, horisontella linjer och bilder. Nu är det dags att börja lägga till andra saker på din sida. Prova följande taggar (bilden måste läggas ut online så att du kan använda en länk till bilden):
    • Infoga en rad: br> eller hr>
    • Infoga bilder: img src = "the_url_of_your_image">
11. Infoga länkar till andra platser på sidan. Du kan också använda den här koden för att länka till andra sidor och webbplatser, men eftersom du inte har en webbplats ännu kommer vi att fokusera på "ankare", som är specifika platser på sidan som du kan länka till:
    • Skapa först ett ankare med taggen a> vid den punkt på sidan du vill länka till. Ge ditt ankare ett tydligt namn som är lätt att komma ihåg:
      
      a name = "Tips"> Detta är texten runt vilken du placerar ditt ankare. / a>
    • Använd taggen href> för att länka till ditt ankare eller till en annan webbsida:
      
      a href = "url på webbsidan eller namnet på ankaret på den här sidan"> Skriv texten eller bilden som visas som länk här. / a>
    • För att länka till ett ankare på en annan sida, lägg till # -tecknet efter webbadressen följt av namnet på ditt ankare. Till exempel http://www.wikihow.com/HTML-leren#Tips tar dig direkt till avsnittet "Tips" på den här sidan.

Del 2 av 2: Lär dig avancerad HTML

1. Lär dig om attribut. Attribut placeras i taggen och används för att göra ytterligare justeringar av "elementinnehållet" mellan start- och sluttaggen. De står aldrig ensamma. De skrivs på följande sätt: namn = "värde". namn representerar namnet på attributet (till exempel "färg") och värde beskriver just detta fall (t.ex. "rött").
   • Om du har tittat noggrant i föregående del av den här artikeln har du redan stött på attribut. Taggen img> använder attributet src, använder ett ankare attributet namn och länkar använder attributet href. Du kan se att de är alla stora ___='___’ att följa.
2. Experimentera med HTML-tabeller. För att skapa en tabell eller ett diagram behöver du flera taggar:
   • Börja med tabelltaggarna ("tabellen" på engelska) runt hela bordet:tabell> / tabell>
   • Placera taggar runt innehållet i varje rad: tr>
   • Placera kolumnrubriker i första raden: th>
   • Placera celler i på varandra följande rader: td>
   • Detta är ett exempel på hur allt detta sammanfaller:
     
     tabell> tr> th> Kolumn 1: Månad / th> th> Kolumn 2: Pengar sparade / th> / tr> tr> td> Januari / td> td> 100 € / td> / tr> / tabell>
3. Lär dig de andra taggarna som används i huvudavsnittet. Du har redan lärt dig tagghuvudet> som du placerar i början av varje dokument. Förutom titeln> taggen kan det finnas andra taggar i huvudavsnittet:
   • Metataggar används för att skapa metadata om en webbsida. Denna information används av sökmotorer för att kategorisera webbsidor. För att göra din sida synlig för sökmotorer kan du placera en eller flera metataggar (sluttaggar är inte nödvändiga), varje tagg måste innehålla exakt ett namnattribut och innehållsattribut, till exempel: metanamn = "beskrivning" innehåll = "lägg här beskrivning ">; eller meta name = "sökord" content = "skriv en lista med nyckelord här, alltid åtskilda med ett komma">
   • länk> taggar används för att länka andra filer till sidan. Vanligtvis används för att associera CSS-stilark med HTML-sidor, dessa sidor är konstruerade med en annan typ av kod och används för att bestämma den övergripande stilen för en sida.
   • skript> taggar används för att associera javascript-filer till HTML-sidan. Javascript gör att sidan kan ändras om användaren gör något på sidan.
4. Spela med HTML från befintliga sidor. Att visa källkoden för webbsidor är ett utmärkt sätt att utöka din HTML-kunskap. Högerklicka på sidan och välj "Visa källa", "Visa sidkälla" eller liknande. Ta reda på vad en viss tagg du inte vet gör eller sök online efter svaret.
   • Du kan inte redigera andras webbplatser, men du kan kopiera HTML-koden till ditt eget dokument och leka med den för att se vad olika justeringar gör. Obs! Eftersom många webbplatser använder CSS-formatmallar kanske du inte kan se många färger eller andra stilar.
5. Lär dig mer om HTML genom att läsa mer fördjupade artiklar. Det finns många resurser på internet för att bemästra fler HTML-taggar som W3Schools eller Codecademy. Det finns också många HTML-böcker tillgängliga, men se till att du använder en ny utgåva när HTML-standarden ändras då och då. När du väl har behärskat HTML till en bra nivå kan du vända dig till CSS för mer kontroll över utformningen och stilen på din webbsida. Därefter är vanligtvis nästa steg javascript.

Tips

• Det kan vara användbart att hitta en enkel webbsida på Internet och sedan börja krossa med koden. Försök att flytta lite text, ändra teckensnitt, ändra bilder, vad du än vill!
• Du kan använda en anteckningsbok för att skriva ner koden så att du har något att falla tillbaka på om du inte kommer ihåg det ett ögonblick. Du kan också skriva ut den här sidan och behålla den för referens.
• XML och RSS används alltmer på webbplatser idag. Koden kan se oåtkomlig ut för det mänskliga ögat, särskilt när den ses i källkoden, men funktionaliteten kan vara användbar.
• Taggarna som används i HTML är inte skiftlägeskänsliga, men standard är att använda små bokstäver (som vi gör i den här artikeln). Små bokstäver för taggarna rekommenderas starkt, även för kompatibilitet med XHTML.

Varningar

• Vissa taggar används inte längre och har ersatts av andra taggar som gör detsamma, men erbjuder ofta fler alternativ.
• Om du vill se till att din sida överensstämmer med HTML-standarden, gå till W3-webbplatsen för att testa din kod mot den nuvarande standarden. Många taggar har blivit föråldrade och har ersatts med taggar som fungerar bättre i moderna webbläsare.

Förnödenheter

• Ett ordbehandlingsprogram, till exempel Anteckningar (Windows) eller Textredigerare (Mac).
• ett pappersark eller anteckningsbok (frivillig)
• Ett program speciellt utformat för att skriva HTML, till exempel Notepad ++ för Windows eller TextWrangler för Mac (frivillig)