Koda en webbsida med HTML på Neocities
I denna guide ska jag, Vfred, lära dig grunderna inom html!
Börja koda med html
Så du vill börja skriva kod, men du vet inte hur? "Var ska jag skriva koden?" hör jag dig fråga. Det finns en del sätt du kan göra det på. Jag rekommenderar att göra din sida på Neocities. Det är bra för att det har en bra kod-redigerare och så är det roligt att andra kan se din webbsida.
Om du inte vill att vem som helst kan se den eller att du letar efter något annat sätt kan du testa en online-html-redigerare, till exempel OneCompiler, W3Schools HTMl Editor eller Programiz. Jag har använt Programiz en del och det är rätt så bra, så den rekommenderar jag! Om du vill ha en mer seriös approach kan du koda i VSCode med Live-server tillägget. Du kan också köpa en domän men det rekommenderar jag inte att börja med. I denna guide använder jag neocities så att du borde använda det också.
Börja koda
Nu när du vet var du ska koda och har gjort all det, är det dags att börja skapa din webbsida. Skapa ett konto på Neocities. Sedan så går du till din sida och trycker på "Edit Site" När du väl är inne där borde du se en del filer. Detta är din filhanterare. Här förvaras all din kod, dina bilder, och allt sådant. Du borde se en fil som heter "index.html". Index filen är den fil som öppnas direkt när du går in på sidan. Så funkar det alltid, oavsett om du är på neocities eller inte. Håll muspekaren över filen och tryck på "Edit".
Nu borde din kod öppnas. Det är här du skriver allting. Din kod ser nog ut såhär:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The web site of vfred</title>
<!-- The style.css file allows you to change the look of your web pages.
If you include the next line in all your web pages, they will all share the same look.
This makes it easier to make new pages for your site. -->
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<h1>Welcome to my Website!</h1>
<p>This is a paragraph! Here's how you make a link: <a href="https://neocities.org">Neocities</a>.</p>
<p>Here's how you can make <strong>bold</strong> and <em>italic</em> text.</p>
<p>Here's how you can add an image:</p>
<img src="/neocities.png">
<p>Here's how to make a list:</p>
<ul>
<li>First thing</li>
<li>Second thing</li>
<li>Third thing</li>
</ul>
<p>To learn more HTML/CSS, check out these <a href="https://neocities.org/tutorials">tutorials</a>!</p>
</body>
</html>
Här visar neocities dig lite hur man gör olika saker. Du hittar detta i varje fil från början du skapar på neocities. Det du borde börja med att ta bort allt som är mellan <body> och </body>. Din kod ska nu se ut ungefär så här:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The web site of vfred</title>
<!-- The style.css file allows you to change the look of your web pages.
If you include the next line in all your web pages, they will all share the same look.
This makes it easier to make new pages for your site. -->
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<!--SKRIV DIN KOD HÄR!!!-->
</body>
</html>
Jag har skrivit var i koden du ska skriva. Du kan börja med att skriva en rubrik. I HTML så är varje element inom <såna här>. Så att du skriver <h1>. h1 betyder rubrik. h1 är en stor rubrik, h2 är en mindre rubrik och så vidare. Nu när du skrivit det skriver du texten som du vill ha i rubriken. Stäng rubriken med </h1>. Nu kan du göra samma sak fast skriv <p> istället. Det blir en text. Såhär:
<h1>Hejsan!</h1>
<p>Välkommen till min sida</p>
Tryck på "Save". Nu kan du skriva in länken till din sida i en ny flik och se hur det ser ut.