Hur man skriver en HTML-sida?
För alla HTML-dokument som du skapar startar du dokumentet med en "dokumenttyp" -tagg (), en HTML-tagg () och en BODY-tagg ().
Den här guiden lär dig hur du skapar en webbsida med hjälp av HTML. Vissa delar av din webbsida kan innehålla text, länkar och bilder.
Del 1 av 7: förbereder sig för att skriva
- 1Öppna en enkel textredigerare. På Windows-datorer är standard enkel textredigerare Notepad, medan Mac-användare har ett program som heter TextEdit:
- Windows - Klicka på Start, skriv in notepad och klicka på Anteckningar.
- Mac - Klicka på Spotlight, skriv in textedit och klicka på Textedit i resultaten.
- 2Förstå HTML-taggar. När du skriver i HTML indikeras olika element på sidan med öppna taggar (<>) och stängda taggar (</>), med texten för ett element som passar mellan taggarna.
- Till exempel skapas ett stycke genom att skriva den öppna stycke-taggen (<p>), ange texten som du vill använda och sedan ange en stängd stycke-tagg </p>.
- Varje kodrad måste gå på sin egen rad, så du kommer normalt att trycka på ↵ Enterefter att du har skrivit en kodrad.
- 3Granska det grundläggande HTML-formatet. För alla HTML-dokument som du skapar startar du dokumentet med en "dokumenttyp" -tagg (<!DOCTYPE html>), en HTML-tagg (<html>) och en BODY-tagg (<body>). Du kommer också att avsluta dokumentet med en stängd BODY-tagg och sedan en stängd HTML-tagg. Till exempel:
<!DOCTYPE html><html><body></body></html>
- 4Överväg att lära dig mer om css. CSS är ett språk som fungerar som ett komplement till HTML; det täcker sidformatering (t.ex. färger, centrerad text, etc.) och andra visuella aspekter på webbsidan.
Del 2 av 7: skapa en text sida
- 1Ställ in dokumentet. Lägg till dokumentets ursprungliga HTML-text:
<!DOCTYPE html><html><body>
- 2Skapa din webbsides titel. Detta kallas också "huvudet" och det definierar texten som visas på webbläsarens flik. Lägg till följande text i ditt dokument för att göra det, se till att du ersätter "Din titel" med din önskade text:
<head><title>Your Title</title></head>
- 3Lägg till en rubrik. Skriv in <h1>Text</h1> och tryck ↵ Enter. Du kan placera text som du vill använda mellan
<h1>och</h1>taggar.- Rubriker kan staplas över hela sidan. För varje rubrik du använder efter den första, bara öka antalet (t.ex. för den andra rubriken, använd
<h2></h2>).
- Rubriker kan staplas över hela sidan. För varje rubrik du använder efter den första, bara öka antalet (t.ex. för den andra rubriken, använd
- 4Skapa ett stycke. Skriv in <p>Text</p> och tryck på ↵ Enter, se till att du ersätter "Text" med ditt styckes text.
- Du kan placera varje textrad på en ny rad genom att upprepa
<p></p>taggarna för varje textrad.
- Du kan placera varje textrad på en ny rad genom att upprepa
- 5Upprepa rubrik- och styckeprocessen. Du kan lägga till så många rubriker och stycken på din webbsida som du vill.
- 6Lägg till raster på din sida. Skriv in <br>Text</br> och tryck ↵ Enter. Detta skapar sidluckor mellan dina stycken om du vill placera olika delar ut.
- 7Formatera dina styckenas text. Du kan använda olika taggar inuti
<p></p>taggarna (till exempel<p><em></em></p>) för att ange formatering:<em>text</em>- Skapar kursiv text.<strong>text</strong>- Skapar fet text.<ins>text</ins>- Skapar understruken text.<del>text</del>- Skapar text med en rad genom den.<small>text</small>- Skapar liten text.<! - -text - ->- Skapar osynlig text. Används för att lägga till anteckningar på din webbsida.
- 8Stäng dokumentets BODY- och HTML-taggar. När du är klar med att lägga till text skriver du in </body> och trycker på ↵ Enteroch skriver sedan in för </html> att stänga dokumentet. Nu när din text sida är tekniskt komplett kan du lägga till andra saker som länkar, punktpunkter och bilder till den.
Du kommer också att avsluta dokumentet med en stängd BODY-tagg och sedan en stängd HTML-tagg.
Del 3 av 7: lägga till länkar
- 1Hitta en plats på din webbsida för att lägga till en länk. Om du till exempel vill lägga till en länk till en webbsida mitt i ett stycke, går du till det stycket och hittar ordet eller frasen som du vill använda som länk.
- 2Kopiera webbplatsens URL. Gå till webbplatsen som du vill länka till och välj dess adress i fältet högst upp i fönstret och tryck på Ctrl+ C(Windows) eller ⌘ Command+ C(Mac).
- 3Ange en tagg för öppen länk. Skriv <a href=> in mellanslaget direkt före ordet eller frasen som du vill använda som länk.
- 4Klistra in webbplatsens URL. Klicka mellan
href=och>och tryck sedan på Ctrl+ V(Windows) eller ⌘ Command+ V(Mac). Du bör se länken visas till höger omhref=texten.- Om du till exempel länkar till YouTube kan du se
<a href=https://youtube.com/>här.
- Om du till exempel länkar till YouTube kan du se
- 5Lägg till den stängda länktaggen. På den andra sidan av texten som du vill använda som länk, skriv in </a>. Till exempel, i en rad som säger "Följ mig på Twitter" där du länkar till Twitter och använder "på Twitter" som länk, skulle din kod likna följande:
<a href=https://twitter.com/>on Twitter</a>
- 6Lägg till en ID-tagg. Med ID-taggar kan du länka en bit text till ett annat avsnitt i ett annat stycke på samma sida. Att göra så:
- Byt ut
<p>taggen med<p id=text> - Hitta texten som du vill använda som länk.
- Skriv <a href=#text> före texten. Se till att texten efter "#" matchar texten efter "id =" här.
- Skriv </a> efter texten.
- Byt ut
Del 4 av 7: lägga till punktpunkter
- 1Hitta en plats där du kan lägga till punktpunkter. Kulpunkter är bäst lämpade för att lista information eller skapa organiserade steg. När du har hittat ett stycke under vilket du vill lägga till punktpunkter fortsätter du.
- 2Lägg till en sidbrytning. Ovanför den plats där du vill placera din punktlista, skriv in <br> och tryck ↵ Enter.
- 3Skapa den första punkten. Skriv in <li>text</li> och tryck på ↵ Enter, se till att du ersätter "text" med din punkt.
- 4Lägg till fler punkter. Så länge du använder
<li></li>taggarna runt textrader formateras texten mellan taggarna som en punkt. - 5Skapa en underpunkt. Skriv in <ul>text</ul> och tryck ↵ Enter. Din text visas indragen under föregående punkt.
- Text med
<ul></ul>taggarna har ingen punkt innan den.
- Text med
- 6Stäng sidbrytningen. Om du valde att använda en sidbrytning tidigare skriver du in </br> och trycker på ↵ Enter. Din punktlista kommer att stå ensam på sidan.
CSS är ett språk som fungerar som ett komplement till HTML; det täcker sidformatering (t.ex. färger, centrerad text osv.) och andra visuella aspekter på webbsidan.
Del 5 av 7: lägga till bilder
- 1Hitta en plats för att infoga en bild. Bilden visas på webbsidan varhelst du sätter in koden för bilden.
- 2Skapa bildtaggen. För att göra det, skriv in
<imgmen tryck inte ↵ Enter. Eftersom taggen "bild" är en komplett tagg i sig behöver den inte en stängningstagg. - 3Lägg till källkoden. Skriv in src= efter
<imgtaggen och se till att placera ett mellanrum mellan "img" och "src". - 4Ange en bilds adress. Kopiera webbadressen för bilden som du vill lägga till och klistra in den till höger om källkoden.
- 5Lägg till "stil" -taggen. Skriv in style= och skriv sedan in width:px;height:px.
- 6Ange bildens mått. Skriv in bildens bredd i pixlar efter "bredd:" och skriv sedan bildens höjd i pixlar efter "höjd:".
- 7Ange den alternativa beskrivningen. Det här är texten som visas om bilden inte laddas. För att göra det, skriv in alt= och skriv in beskrivningen.
- 8Stäng bildtaggen. Placera en > parentes efter det sista tecknet i den alternativa beskrivningen för att göra det.
- 9Granska bildens kod. Det bör likna följande:
<img src=https://w3schools.com/w3css/img_fjords.jpg style=width:600px;height:400px alt=Fjord>
Läs också: Hur installerar jag Gmail-enheten?
Del 6 av 7: Spara dokumentet i Windows
- 1Klicka på Arkiv. Det är längst upp till vänster i anteckningsfönstret. En rullgardinsmeny visas.
- 2Klicka på Spara som.... Du hittar detta nära toppen av rullgardinsmenyn Arkiv.
- 3Välj en spara plats. Klicka på en mapp till vänster i fönstret (t.ex. Desktop).
- 4Ange ett HTML-namn för din fil. Skriv vilket namn du vill använda för filen följt av i .html textfältet "Filnamn".
- För en fil med namnet "meow", till exempel, skulle du ange meow.html här.
- 5Klicka på listrutan "spara som typ". En rullgardinsmeny visas.
- 6Klicka på Alla filer. Det finns i rullgardinsmenyn.
- 7Klicka på Spara. Du kommer att se detta i det nedre högra hörnet av fönstret. Om du gör det sparas din textfil som en HTML-sida.
- Du kan öppna HTML-sidfilen i de flesta webbläsare genom att klicka och dra filen till ett öppet webbläsarfönster.
När du skriver i HTML indikeras olika element på sidan med öppna taggar () och stängda taggar (), med texten för ett element som passar mellan taggarna.
Del 7 av 7: Spara dokumentet på Mac
- 1Klicka på Textedit. Det är längst upp till vänster på skärmen. En rullgardinsmeny visas.
- 2Klicka på Inställningar.... Du hittar detta nära toppen av rullgardinsmenyn. Inställningsfönstret öppnas.
- 3Klicka på fliken Öppna och spara. Det är högst upp på sidan.
- 4Avmarkera rutan "lägg till".txt "tillägg till vanliga textfiler". Detta ligger under rubriken "När du sparar en fil".
- 5Stäng inställningsfönstret. Klicka på den röda cirkeln i det övre vänstra hörnet av fönstret för att göra det.
- 6Klicka på Format. Det är ett menyalternativ högst upp på skärmen.
- 7Klicka på Skapa vanlig text. Det här alternativet finns i rullgardinsmenyn.
- 8Klicka på Arkiv. Det är längst upp till vänster på skärmen.
- 9Klicka på Spara. Detta är nära toppen av rullgardinsmenyn.
- 10Ange ett HTML-namn för din fil. Byt ut namnet i "Spara som" textfältet med vilket namn du vill följt av .html.
- Till exempel, för ett dokument som heter "min_website", skulle du ange my_website.html här.
- 11Klicka på Spara. HTML-dokumentet kommer att sparas i din standard spara plats (t.ex. skrivbordet).
- Du kan öppna HTML-sidfilen i de flesta webbläsare genom att klicka och dra filen till ett öppet webbläsarfönster.
- Att använda en dedikerad kodredigerare som Notepad ++ gör att skriva i HTML mycket enklare och mer intuitivt än att använda Notepad eller TextEdit.
- Dubbelkolla alltid din kod innan du laddar upp den till en levande webbplats.
Frågor och svar
- finns det två metoder för att skriva HTML?Tyvärr finns det bara en metod. Du kanske tänker på CSS, men det är ett annat språk och inte HTML.
- Kan jag koda HTML på en Android-enhet?Ja, du kan, men för det måste du installera en textredigerare (i.apk-format).
- Hur kan jag använda taggbakgrundsfärg eller textfärg?Du kan inte göra det med HTML. Du måste använda CSS, ett språk som du kan hitta många handledning för på den här webbplatsen.
- Hur laddar jag upp HTML till en offentlig webbplats?Logga in på webbsidan CLI, initialisera din värdtjänst och distribuera den där.
- Hur kan jag skriva HTML-taggar i HTML?Du kan skriva HTML-taggar mellan vinkelparenteser och med stora bokstäver. Om du vill skriva en slutande HTML-tagg, lägg ett snedstreck framåt mellan vinkelparenteserna och skriv taggen efter det.
Obesvarade frågor
- Hur laddar jag upp saker till min HTML-sida?
- Hur kodar jag HTML på min Android-enhet?
- Hur laddar jag upp min HTML-sida?
Kommentarer (2)
- Fantastiskt, 5 stjärnor.
- Det här var fantastiskt, och tack för att du gav ett exempel.
Relaterade artiklar
