Innehåll

• Steg
• Del 1 av 2: Learning HTML Basics
• Del 2 av 2: Avancerad HTML
• Tips
• Varningar
• Vad behöver du

HTML är en förkortning för engelska Hyper Text Markup Language (hypertextmarkeringsspråk). Detta är koden, eller språket, i vilket den grundläggande markeringen av webbplatser skapas. Inlärning kan verka skrämmande om du aldrig har programmerat, men i verkligheten är allt du behöver för att komma igång en grundläggande textredigerare och webbläsare. Du kanske till och med känner igen några exempel på HTML -markeringar som du har stött på på internetforum, anpassade anpassade sidor eller wikiHow -artiklar. HTML är ett användbart verktyg för alla internetanvändare, och att lära sig grunderna tar mindre tid än du tror.

Steg

Del 1 av 2: Learning HTML Basics

1. 1 Öppna ett HTML -dokument. De flesta textredigerare (Anteckningar eller Anteckningar ++ för Windows, TextEdit för Mac, gedit för GNU / Linux) kan användas för att generera HTML -filer. Skapa ett nytt dokument och spara det med Arkiv → Spara som i webbformat, eller ändra filtillägget till .html eller .htm istället för .doc, .rtf eller ett annat tillägg.
   • Du kan få en varning om att filen kommer att sparas som "ren text" istället för RTF -format, eller att formatering och bilder inte sparas. Det här är okej; För HTML behövs inte dessa alternativ.
2. 2 Öppna den genererade filen i en webbläsare. Spara den tomma filen, hitta den på din dator och dubbelklicka på den för att öppna den. En tom sida ska öppnas i webbläsaren. Om den inte gör det, dra filen till adressfältet i din webbläsare. När du redigerar HTML -filen kan du uppdatera den här sidan för att se ändringarna.
   • Observera att du på detta sätt inte skapar en webbplats på Internet. Andra människor har inte tillgång till den här sidan, och du behöver inte en internetanslutning för att testa din lokala sida. Webbläsaren tolkar helt enkelt HTML -koden, "läser" den som om det vore en webbplats.
3. 3 Förstå vad markeringstaggar är. Till skillnad från vanlig text visas inte taggar på sidan. Istället berättar de för webbläsaren hur man visar sidan och dess innehåll. "Öppnings" -taggen innehåller instruktioner. Det kan till exempel berätta för webbläsaren att texten ska visas som djärv... Det behöver också en "slut" -tagg för att visa webbläsaren var instruktionen slutar. I det här exemplet visas texten mellan start- och sluttaggarna med fet stil. Etiketter skrivs inuti ojämlika tecken, men sluttaggen börjar med ett snedstreck.
   • Öppningstaggen skrivs mellan ojämlikhetstecknen: öppnande tagg>
   • I den avslutande taggen placeras ett snedstreck före tagbeskrivningen (namn): /sluttagg>
   • Läs vidare för att ta reda på hur de olika taggarna används. För detta steg behöver du bara komma ihåg inspelningsformatet. Etiketter skrivs mellan ojämlikhetstecknen:> och />
   • I vissa självstudier kallas HTML -taggar element, och texten mellan öppnings- och stängningstaggarna kallas elementinnehåll.
4. 4 Skriv html> -taggen i redigeraren. Varje HTML -fil måste börja med en tagg html> och avsluta med en tagg / html>... Dessa taggar berättar för webbläsaren att allt innehåll mellan taggarna är i HTML. Lägg till dessa taggar i ditt dokument:
   • Ofta börjar HTML -filer med raden ! DOCTYPE html>vilket innebär att webbläsare måste känna igen hela filen som HTML. Den här raden är inte nödvändig, men den kan hjälpa dig att felsöka kompatibilitetsproblem.
   • Ringa html> högst upp i dokumentet.
   • Tryck på Retur eller Retur flera gånger för att skapa flera tomma rader och skriv sedan / html>
   • kom ihåg det hela koden du skapar i den här artikeln måste skrivas mellan dessa två taggar.
5. 5 Skapa ett huvud> avsnitt i filen. Mellan html> - och / html> -taggarna skapar du en öppningstagg huvud> och den avslutande taggen / huvud>... Lägg till några tomma linjer mellan dem. Innehåll skrivet mellan taggarna head> och / head> visas inte på själva sidan. Följ dessa steg så ser du vad den här taggen är till för:
   • Mellan taggarna head> och / head> skriver du titel> och / titel>
   • Mellan titlarna> och / title> skriver du Hur man lär sig HTML - wikiHow.
   • Spara dina ändringar och öppna filen i en webbläsare (eller uppdatera sidan om filen redan är öppen). Ser du texten som visas i sidtiteln ovanför adressfältet?
6. 6 Skapa en kropp> sektion. Alla andra taggar och text i det här exemplet skrivs i kroppsdelen, vars innehåll visas på sidan. Efter stängande tagg / huvud>, men innan tag / html> lägg till taggar kropp> och / kropp>... För resten av den här artikeln, arbeta med kroppsdelen. Din fil ska se ut ungefär så här:
   html>
   huvud>
   title> Hur man lär sig HTML - wikiHow / title>
   / huvud>
   kropp>
   / kropp>
   / html>
7. 7 Lägg till text med olika stilar. Det är dags att lägga till det riktiga innehållet på sidan! Allt du skriver mellan kroppstaggarna visas på sidan efter att ha uppdaterats i webbläsaren. Använd inte symboler eller >eftersom webbläsaren försöker tolka innehållet som en tagg istället för text. Skriva Hallå! (eller vad du vill), försök sedan lägga till dessa taggar i texten och se vad som händer:
   • em> Hej alla! / em> gör texten "kursiv": Hallå!
   • stark> Hej alla! / stark> gör texten "fet": Hallå!
   • s> Hej alla! / s> genomtänkt text: Hallå!
   • sup> Hej alla! / sup> visar teckensnittet som ett överskrift:
   • sub> Hej alla! / sub> visar teckensnittet som ett abonnemang: _Hallå!
   • Prova olika taggar tillsammans. Hur det kommer att se ut em> strong> Hej alla! / strong> / em>?
8. 8 Dela upp texten i stycken. Om du försöker skriva flera textrader i en HTML -fil märker du att radbrytningar inte visas i webbläsaren. För att dela upp text i stycken måste du lägga till taggar:
   • p> Detta är ett separat stycke. / p>
   • Denna mening följs av en radbrytning br> före början av denna rad.
     Detta är den första taggen som inte kräver en sluttagg. Dessa taggar kallas "tomma" taggar.
   • Skapa rubriker för att visa sektionstitlarna:
     h1> rubriktext / h1>: största titel
     h2> rubriktext / h2> (rubrik på andra nivå)
     h3> rubriktext / h3> (rubrik på tredje nivå)
     h4> rubriktext / h4> (rubrik på fjärde nivå)
     h5> rubriktext / h5> (minsta titel)
9. 9 Lär dig att skapa listor. Det finns flera sätt att skapa listor på en webbsida. Prova alternativen nedan och bestäm vilken du gillar bäst. Observera att ett par taggar behövs för listan som helhet (till exempel ul> och / ul> för en punktlista), och varje listobjekt markeras med ett annat par taggar, till exempel li> och / li>.
   • Punktlista:
     ul> li> Första raden / li> li> Andra raden / li> li> Och så vidare / li> / ul>
   • Numrerad lista:
     ol> li> One / li> li> Två / li> li> Tre / li> / ol>
   • Definitionslista:
     dl> dt> Kaffe / dt> dd> - varm dryck / dd> dt> Lemonade / dt> dd> - kall dryck / dd> / dl>
10. 10 Layout sidan med radbrytningar, horisontella linjer och Bilder. Det är dags att lägga till något annat än text på sidan. Prova följande taggar eller följ länkarna för mer information. Använd en webbhotell för att skapa en länk till bilden du vill lägga upp:
    • Vågrät linje: hr>
    • Infoga bild: img src = "bildlänk">
11. 11 Lägg till länkar. Du kan använda dessa taggar för att skapa hyperlänkar till andra sidor och webbplatser, men eftersom du inte har en webbplats än lär du dig nu hur du skapar ankarlänkar, det vill säga länkar till specifika platser på en sida:
    • Skapa ett ankare med a> -taggen där du vill länka på sidan. Kom med ett tydligt och minnesvärt namn:
      
      a name = "Tips"> Texten du länkar till. / a>
    • Använd href> -taggen för att skapa en relativ länk eller länk till en extern resurs:
      
      a href = "länk till sidan eller ankarnamnet på sidan"> Text eller bild som fungerar som länk. / a>
    • För att länka till en relativ länk på en annan sida, lägg till ett # -tecken efter huvudlänken och ankarets namn. Till exempel https://en.wikihow.com/learn-HTML#Tips länkar till tipsavsnittet på den här sidan.

Del 2 av 2: Avancerad HTML

1. 1 Lär känna attributen. Attribut skrivs inuti taggen, vilket indikerar ytterligare information. Formatet för attributen är följande: namn = "värde", var titel definierar ett attribut (t.ex. Färg för ett färgattribut), och värdet anger dess värde (t.ex. röd för rött).
   • Attribut har faktiskt använts i det föregående avsnittet om HTML -grunder. Img> -taggen använder attributet src, relativa länkankare använder attributet namnoch länkarna använder attributet href... Som du redan har märkt skrivs alla attribut i formatet ___='___’.
2. 2 Experimentera med HTML -tabeller. Skapandet av en tabell innebär användning av olika taggar. Du kan experimentera eller läsa mer detaljerade instruktioner.
   • Skapa tabelltaggar:tabell> / tabell>
   • Bifoga innehållet i varje rad i tabellen i taggar: tr>
   • Kolumnrubriken definieras av taggen: th>
   • Celler i efterföljande rader: td>
   • Ett exempel på att använda dessa taggar:
     
     tabell> tr> th> Kolumn 1: månad / th> th> Kolumn 2: besparingar / th> / tr> tr> td> januari / td> td> 5000 rubel / td> / tr> / tabell>
3. 3 Lär dig ytterligare taggar för huvudavsnitt. Du har redan lärt dig head> -taggen som kommer i början av varje html -fil. Förutom titeln> taggen finns det andra taggar för det här avsnittet:
   • Metataggar som innehåller metadataanvänds av sökmotorer för att indexera webbplatsen. För att göra din webbplats lättare att hitta i sökmotorer, använd en eller flera öppnande metataggar (stängningstaggar krävs inte).Använd ett attribut och ett värde per tagg: meta name = "description" content = "page description">; eller meta name = "nyckelord" content = "kommaseparerade sökord">
   • Länk> taggar som pekar på tredjepartsfiler, till exempel formatmallar (CSS), som skapas med en annan typ av kodning och låter dig ändra HTML-sidan med färg, textjustering och många andra funktioner.
   • Skriptet> taggar som används för att bifoga JavaScript -filer till sidan. Dessa filer behövs för att modifiera sidan interaktivt (som svar på användaråtgärder).
4. 4 Experimentera med HTML -koden för andra webbplatser. Att se källkoden för andra webbsidor är ett bra sätt att lära sig HTML. Du kan högerklicka på sidan och välja Visa källa eller något liknande från toppmenyn i din webbläsare. Försök ta reda på vad en obekant tagg gör, eller sök på Internet efter information om den.
   • Även om du inte kan redigera andras webbplatser kan du kopiera källkoden till din fil för att experimentera med taggar senare. Observera att CSS -märkning kanske inte är tillgänglig och färger och formatering kan se annorlunda ut.
5. 5 Börja utforska mer detaljerade guider. Det finns många webbplatser på Internet som är dedikerade till HTML -taggar, till exempel W3Schools eller HTMLbook. Det finns också pappersböcker till salu, men försök hitta den senaste upplagan när standarder förändras och utvecklas. Ännu bättre, behärska CSS för att ha mycket mer kontroll över layouten och utseendet på din webbplats. Efter att ha lärt sig CSS lär sig webbdesigners vanligtvis JavaScript.

Tips

• Notepad ++ är ett bra gratisprogram, liknande det vanliga Anteckningsblock, men du kan spara och testa din kod i din webbläsare online. (Det stöder också nästan alla språk - HTML, CSS, Python, JavaScript och så vidare.)
• Hitta en enkel sida på nätet, spara koden på din dator och experimentera med den. Prova att flytta text, ändra teckensnitt, ersätta bilder - oavsett!
• Du kan behålla en anteckningsbok där du skriver taggar så att du alltid har dem till hands. Du kan också skriva ut den här sidan och hänvisa till den.
• När du skriver kod, gör det försiktigt så att du och andra människor kan förstå det. Använd! - Infoga kommentar här -> för HTML -kommentarer: de kommer inte att reflekteras på sidan, men kommer att synas i koddokumentet.
• XML och RSS blir allt populärare. Koden för sidor som innehåller XML- och RSS -teknik är svårare för en oerfaren användare att läsa och förstå, men dessa verktyg är ganska användbara.
• Markeringstaggar i HTML är skiftlägeskänsliga, men vi rekommenderar att du endast använder små bokstäver (som i exemplen i denna artikel) för både standardisering och XHTML-kompatibilitet.

Varningar

• Vissa taggar har tagits ur bruk de senaste åren och har ersatts av nya som ger samma eller några ytterligare effekter.
• Om du vill testa din sida, gå till W3 -webbplatsen och kolla in de moderna HTML -kraven. HTML -standarder ändras med tiden, och vissa taggar ersätts med nya som fungerar bättre i moderna webbläsare.

Vad behöver du

• En textredigerare som Anteckningar (Windows) eller TextEdit (Mac)
• Papper / anteckningsblock (inte nödvändigt)
• HTML -redigerare som Anteckningar ++ (Windows) eller TextWrangler (Mac) (inte nödvändigt)