Hur lär jag mig HTML?

Skriv How to learn HTML - guide — Mellan taggarna och, skriv How to learn HTML - guide.

HTML är förkortningen för Hyper text markup språk, och är koden eller språket som används för att skapa grundläggande webbplatslayouter. Det kan se lite skrämmande ut om du aldrig har gjort någon kodning förut, men allt du behöver för att prova är en vanlig textredigeringsapplikation och en webbläsare. Du kanske till och med känner igen HTML som används för att ändra text i onlineforum, anpassade onlineprofiler eller till och med några guideartiklar. HTML är ett användbart verktyg för alla som använder internet, och att lära sig grunderna kan ta dig mindre tid än du tror.

Del 1 av 2: lära sig grundläggande HTML

1
Öppna ett HTML-dokument. De flesta textredigeringsprogram, inklusive Notepad eller Notepad ++ för Windows, TextEdit för Mac och gedit för GNU / Linux kan användas för att skriva HTML-dokument. Öppna ett nytt dokument och använd Arkiv → Spara som i toppmenyn för att spara det som en "webbsida" eller för att ändra filtillägget till ".html" istället för ".doc," ".rtf" eller något annat förlängning.
- Du kan se en varning om att ditt dokument kommer att ändras till "vanlig text" istället för "rik text", eller att särskild formatering och bilder inte kommer att sparas ordentligt. Det här är okej; HTML-dokument använder inte dessa alternativ.
2
Visa ditt dokument med en webbläsare. Spara ditt tomma dokument, hitta sedan dokumentikonen på din dator och dubbelklicka för att öppna det. Den ska öppnas som en tom webbsida i din webbläsare. Om den inte gör det, dra filikonen till webbläsarens URL-adress (adress). När du redigerar ditt HTML-dokument i den här självstudien kan du fortsätta kontrollera och se hur din webbsida förändras.
- Observera att detta faktiskt inte skapar en webbplats online. Det kommer inte att vara tillgängligt för andra människor, och du behöver inte en internetanslutning för att testa. Detta använder bara en webbläsare för att "läsa" ditt HTML-dokument som om det var en webbplats.
3
Förstå markeringstaggar. Markeringstaggar visas inte på en webbsida som vanlig text. Istället berättar de för din webbläsare hur du visar sidan och dess innehåll. "Start-taggen" innehåller instruktioner. Det kan till exempel berätta för webbläsaren att visa text som fetstil. Du behöver också en "slutkod" för att meddela webbläsaren var instruktionerna gäller: i det här exemplet kommer all text mellan startkoden och slutkoden att vara fet. Skriv slutkoder även i vinkelfästen, men börja med ett snedstreck efter den första klammern.
- Skriv starttaggar mellan vinkelparenteserna: <starttaggen går här >
- Skriv slutkoder mellan vinkelparenteserna, men lägg ett snedstreck efter den första parentesen: </slutkod går här >)
- Fortsätt läsa för att lära dig att skriva funktionella markeringstaggar. För detta steg är allt du behöver komma ihåg det grundformat de är skrivna i: <> och </>
- Om du också använder andra HTML-självstudier kanske du ser dem hänvisa till taggarna som "element" och texten mellan start- och sluttaggar som "elementinnehåll."
4
Skriv din första <html> -tagg. Varje html-dokument börjar med en <html>tagg och slutar med en </html>tagg. Detta berättar för webbläsaren att allt mellan dessa taggar är i HTML. Lägg till dessa taggar i ditt dokument:
- Ofta startas HTML-filer med en <!DOCTYPE html>rad som indikerar att filen som helhet ska läsas som en HTML-fil av webbläsare. Det behövs inte, men kan hjälpa till att lösa kompatibilitetsproblem.
- Skriv <html> högst upp i dokumentet.
- Tryck på Enter eller Retur flera gånger för att ge dig lite utrymme, skriv sedan </html>
- Kom ihåg att skriva allt annat i denna handledning mellan dessa två taggar.
5
Fyll i <head> -delen av ditt dokument. Mellan taggarna <html> och </html>, skriv en <head> starttagg och en </head> sluttagg. Ge dig själv utrymme att skriva mellan dem. Allt mellan dessa huvudtaggar visas faktiskt inte på själva sidan. Prova följande och se var det visas istället:
- Mellan taggarna <head> och </head> skriver du <title> och </title>
- Mellan taggarna <title> och </title>, skriv How to learn HTML - guide.
- Spara dokumentet och öppna det i en webbläsare (eller spara dokumentet och uppdatera sedan webbläsarens sida om det redan är öppet.) Ser du vad du skrev högst upp i webbläsaren, ovanför adressfältet?
6

Skapa ett avsnitt <body>. Allt annat i detta nybörjardokument kommer att visas i en kroppsdel, som faktiskt visas på webbsidan. Efter </ head> sluttaggen, men före taggen </html>, skriv <body> och </body>. Under resten av denna handledning går allt du skriver mellan dessa kroppstaggar. Du bör nu ha ett dokument som ser ut så här:
<html> <head> <title>How to Learn HTML - guide</title> </head> <body> </body> </html>
7
Lägg till text i olika stilar. Nu är det dags att skriva något du faktiskt kan se i din webbläsare! Allt du skriver i body-taggarna kommer att dyka upp i din webbläsare när du har sparat HTML-dokumentet och uppdaterat webbläsarens sida. Inte skriva något med < eller > symboler, men eftersom din webbläsare kommer att försöka tolka det som en HTML instruktion i stället för vanlig text. Försök skriva Hello world! (eller något annat du gillar), lägg sedan till dessa nya taggar runt det och se vad som händer varje gång:
- <em>Hello world!</em>kommer att visas som "betonad text:" Hej världen!
- <strong>Hello world!</strong>kommer att visas som "stark text:" Hello world!
- <s>Hello world!</s>kommer att dyka upp med en genomstrykning: ~~Hej värld!~~
- <sup>Hello world!</sup>kommer att visas som superscript: ^{Hello world!}
- <sub>Hello world!</sub>kommer att visas som prenumeration: _{Hello world!}
- Prova kombinationer av dessa: Hur <em><strong>Hello world!</strong></em>ser det ut?
8
Dela upp din text i stycken. Om du försöker skriva flera textrader i ditt HTML-dokument kanske du märker att raden inte visas i din webbläsare. Du måste koda dessa i dig själv:
- <p>This is a separate paragraph.</p>
- This sentence is followed by a line break.<br>before this sentence begins.
  Detta är den första taggen du har sett som inte behöver en slutkod! Dessa kallas "tomma taggar."
- Gör rubriker för att visa namnen på sektioner::
  <h1>header text</h1>den största rubriken
  <h2>header text</h2>(2: ^a nivåhuvudet)
  <h3>header text</h3>(den ^tredje nivåhuvudet)
  <h4>header text</h4>(den 4: ^e nivåhuvudet)
  <h5>header text</h5>(den minsta rubriken)
9
Lär dig hur man skapar listor. Det finns flera olika sätt att skriva listor på din webbsida. Testa följande typer av kod och se vilken du gillar. Observera att ett par taggar går runt hela listan (som <ul> och </ul> taggarna för "oordnad lista"), medan enskilda objekt på listan omges av ett annat par taggar, till exempel <li> och </li>.
- Använd den här koden för att skapa punktlistor:
  <ul><li>One item</li><li>Another item</li><li>Another item</li></ul>
- Eller den här koden för att skapa numrerade listor:
  <ol><li>Item 1</li><li>Item 2</li><li>Item 3</li></ol>
- Eller den här koden för att skapa en lista som definierar termer:
  <dl><dt>Coffee</dt><dd>- Hot Beverage</dd><dt>Leite</dt><dd>- Cold Beverage</dd></dl>
10
Spruce upp din sida med radbrytningar, horisontella linjer och bilder. Nu är det dags att försöka lägga till saker förutom text på din sida. Testa följande taggar eller klicka på länkarna för mer information. Du måste använda en webbhotellstjänst så att du har en URL att länka till i bildtaggen:
- Infoga en rad i HTML: <br>eller <hr>
- Lägg till bilder: <img src="_image_url">
11
Länk 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 för tillfället, eftersom du kanske inte har en webbplats ännu, kommer vi att fokusera på "ankare" eller specifika platser på sidan som du kan länka till:
- Gör först ett ankare med <a> taggen vid den punkt på sidan som du vill länka till. Namnge det något beskrivande och lätt att komma ihåg:
  <a name="Tips">This is the text you put the anchor around.</a>
- Använd <href> för att länka till dessa ankare eller till en annan webbsida:
  <a href=" of webpage, or name of anchor within this page">Write the text or image that will be displayed as a link here.</a>
- För att länka till ett ankare på en annan webbsida, lägg till # -tecknet efter webbadressen följt av namnet på ankaret. Till exempel länkar [denna webbadress] till avsnittet Tips på denna sida.

När du redigerar ditt HTML-dokument i den här självstudien kan du fortsätta kontrollera och se hur din webbsida förändras.

Del 2 av 2: lära dig mer avancerad html

1
Lär dig om attribut. Attribut placeras i själva taggen, vilket gör ytterligare ändringar av "elementinnehållet" mellan start- och sluttaggen. De står aldrig ensamma. De är skrivna i formatet name = "value", där namnet är namnet på attributet (till exempel "färg"), och värdet beskriver denna specifika instans (till exempel "röd").
- Du har faktiskt sett attribut tidigare, om du följde handledningen i det grundläggande HTML-avsnittet. <img> -taggar använder attributet src, ankare använder attributet namn och länkar använder attributet href. Se hur alla följer formatet __ = "__"?
2
Experimentera med HTML-tabeller. Att skapa en tabell eller diagram kräver flera olika taggar. Spela med dessa taggar, eller lär dig mer om HTML-tabeller mer detaljerat.
- Börja med tabelltaggar runt hela bordet: <table></table>
- Radetiketter runt innehållet i varje rad: <tr>
- Kolumnrubriker i första raden: <th>
- Celler i efterföljande rader: <td>
- Här är ett exempel på hur allt passar ihop:
  <table><tr><th>Column 1: Month</th><th>Column 2: Money Saved</th></tr><tr><td>January</td><td>75€</td></tr></table>
3
Lär dig de olika huvudetiketterna. Du har redan lärt dig taggen <head> som visas i början av varje dokument. Förutom <title> -taggen kan den innehålla följande typer av taggar:
- Metataggar, som används för att tillhandahålla metadata om en webbsida. Dessa data kan användas av sökmotorer när roboten letar efter internet för att hitta och lista webbplatser. För att göra din webbplats mer synlig i sökmotorer, använd en eller flera <meta> starttaggar (inga sluttaggar behövs), var och en med exakt ett namnattribut och ett innehållsattribut, till exempel: <meta name = "description" content = " skriv en beskrivning här ">; eller <meta name = "sökord" content = "skriv en lista med nyckelord, var och en åtskilda med ett komma">
- <link> -taggar används för att associera andra filer till sidan. Detta används främst för att länka till CSS-formatmallar, som är gjorda med en annan typ av kodning för att ändra din HTML-sida genom att lägga till färg, justera din text och många andra saker.
- <script> -taggar används för att länka sidan till Javascript- filer, vilket kan göra att sidan ändras när användaren interagerar med den.
4
Spela med HTML som finns på webbplatser. Ett bra sätt att utöka din kunskap är genom att titta på HTML-källan på webbsidor. Du kan göra detta genom att högerklicka på sidan och välja "Visa källa", "Visa sidkälla" eller ett liknande alternativ eller genom att gå till avsnittet Visa i webbläsarens toppmeny. Försök ta reda på vad varje okänd HTML-tagg gör, eller leta upp det online för svaret.
- Även om du inte kan redigera andras webbplatser kan du kopiera den HTML du hittar i ditt eget dokument och sedan spela med den för att se vad olika alternativ gör. Observera att utan CSS-formatmallen som webbplatsen länkar till kanske du inte kan se alla färger eller formatering.
5

Lär dig mer avancerad webbdesign från omfattande guider. Det finns olika resurser på internet som du kan använda för att lära dig om många fler HTML-taggar, till exempel W3schools eller Codecademy. Du kan också hitta böcker med handledning om HTML, men se till att du använder en som publicerades under de senaste åren, eftersom det ibland finns uppdateringar och ändringar. Bättre än, lär dig CSS för att ha mycket mer kontroll över din webbsides layout och utseende. När du har CSS nere är nästa steg för webbdesigners vanligtvis Javascript.

Det finns olika resurser på internet som du kan använda för att lära dig om många fler HTML-taggar, till exempel W3schools eller Codecademy.

Tips

Notepad ++ är ett utmärkt, gratis program som fungerar som ett vanligt anteckningsblock, men du kan spara och testa din kod live i en webbläsare. ((Det tillåter också nästan vilket kodningsspråk som helst. HTML, CSS, python, Javascript, etc.))
Du kanske vill försöka hitta en enkel webbsida på Internet och leka med koden. Försök att flytta lite text, ändra teckensnitt, ändra bilder, allt som passar dig!
Du kan få en anteckningsbok och skriva ner alla koder så att om du behöver påminna kan du bara öppna din anteckningsbok och se. Du kan också skriva ut den här sidan som en bra referenspunkt.
När du kodar, se till att du lägger ut koden snyggt så att det är möjligt för dig och andra att förstå den. Använd <! - Sätt in kommentar här -> för HTML-kommentarer, som inte visas på webbsidan, men som görs i koden.
XML och RSS blir allt vanligare på webbplatser idag. Deras kod kan verka tuff att läsa och förstå för den mänskliga observatören, särskilt när den ses i en HTML-källkodfil, men de har sina egna effekter för dem.
Markeringstaggarna själva i HTML är inte skiftlägeskänsliga, men att använda alla gemener (som används på denna sida) rekommenderas starkt för standardiseringsändamål och för kompatibilitet med XHTML.

Allt du skriver i body-taggarna kommer att dyka upp i din webbläsare när du har sparat HTML-dokumentet och uppdaterat webbläsarens sida.

Varningar

Vissa taggar har upphört att gälla under de senaste åren och har ersatts med andra alternativ för att producera samma effekter och till och med lägga till olika effekter om du så önskar.
Om du är intresserad av att validera dina sidor, gå till W3-webbplatsen och lär dig giltig HTML! HTML-standarder förändras över tiden, och vissa taggar ersätts av olika taggar som fungerar bättre i moderna webbläsare.

Saker du behöver

Textredigeringsprogram, t.ex. anteckningsblock (Windows) eller TextEdit (Mac)
Anteckningsbok för papper / skrivning (valfritt)
HTML-redigeringsprogram som Notepad ++ (Windows) eller TextWrangler (Mac) (valfritt)

Läs också: Hur letar jag efter uppdateringar i Mozilla Firefox?

Hur lär jag mig HTML?

Steg

Del 1 av 2: lära sig grundläggande HTML

Del 2 av 2: lära dig mer avancerad html

Tips

Varningar

Saker du behöver

Frågor och svar

Kommentarer (16)