Bare Bones webbsida: 10 steg

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:46

Idag ska vi skapa en mycket enkel, tom ben webbsida från grunden. Vi kommer att prata om HTML -element, utforma din webbsida (färger, teckensnitt, anpassning, etc.), och slutligen hur du sätter in en bild på din webbsida!

I slutet av denna instruerbara har du de grundläggande färdigheterna för att skapa en webbsida från grunden och upptäcka att kodning inte är så svårt som det verkar!

Steg 1: Använda Anteckningar

Vi kommer att använda Anteckningar på Windows för att skapa vår första webbsida. Även om någon textredigerare kommer att göra, kommer anteckningsblock förinstallerat på Windows-maskiner så det är en bra utgångspunkt.

För att öppna anteckningsblock, gå till sökfältet i det nedre vänstra hörnet av skärmen och skriv "Anteckningsblock". Välj sedan programmet "Anteckningar" som visas i sökresultaten. Ett nytt fönster bör öppnas.

Steg 2: Lägga till det grundläggande HTML -dokumentträdet

Alla webbsidor måste följa en vanlig skelettstruktur för att din webbläsare (Chrome, Firefox, Edge, Internet Explorer, Safari …) ska kunna bearbeta och visa din webbsida.

Detta kallas html -dokumentträdet. I Anteckningar skriver du in html "element" eller "taggar" som visas i skärmdumpen. Kopiera och klistra gärna in också:

Steg 3: Spara som en.html -sida

Nu när vi har vår grundläggande html -struktur i Anteckningar, låt oss spara den så att vi inte förlorar något arbete och så att vi kan se våra förändringar när vi går framåt i instruktionsboken.

1. Välj "Arkiv"> "Spara som …" (Skärmdump 1)
2. Ändra filtypen till 'Alla filer' (skärmdump 2)
3. Ge din fil ett valfritt namn. Var noga med att notera var du sparar dokumentet på din dator så att du kan öppna det senare. OBS: Den viktigaste delen av att spara den här filen är att lägga till ".html" i slutet av filnamnet. Detta gör att din dator kan känna igen den som en webbsida. Så om du vill namnge din fil "min_webbsida", se till att lägga till.html i slutet av det, t.ex. "min_webbsida.html"

Steg 4: Lägga till en titel på din webbsida

Så vi har den grundläggande html -strukturen som behövs för att webbläsare ska kunna tolka och visa vår webbsida, men vi har inget innehåll. Låt oss ändra det!

Det första vi bör göra är att ge en titel till vår webbsida. De flesta webbsidor har en titel. Detta är vad som visas på fliken i din webbläsare (se skärmdump). Jag ska ge min webbsida titeln "Taylors webbplats". För att göra detta måste vi lägga till ett "titel" -element.

Taylors webbplats

Vid denna tidpunkt kommer du att märka att varje tagg har en "öppnande" tagg och en "stängande" tagg. Till exempel

och.

Detta för att urskilja var titeln börjar och var den slutar. Nästan alla html -taggar följer detta, men det finns några undantag.

Steg 5: Lägga till innehåll på din webbsida

Tja, vi har en titel för vår webbsida, men vi har fortfarande inget egentligt innehåll för den. Låt oss lägga till lite stil!

Vi har lagt till en titel på vår webbsida med hjälp av ett "titel" -element. Låt oss ge vår webbsida en stor, uppmärksamhetsfångande rubrik med hjälp av ett "h1" -element som är ett rubrikelement.

Taylors webbplats

Välkommen till min webbsida

Steg 6: Se våra förändringar hittills

Vi har en titel, vi har lite innehåll, låt oss titta på vår webbsida för hur det kommer så långt.

1. Spara din fil i anteckningsblock
2. Gå till där du sparade filen och dubbelklicka på den. Den ska automatiskt öppnas i din standardwebbläsare. Ser bra ut!

Steg 7: Lägga till en stycke -tagg

Vi har en titel, en rubrik, låt oss nu lägga till ett stycke med lite mer text. Elementnamnet för ett stycke är "p". Du kan se hur den används nedan:

Taylors webbplats

Välkommen till min webbsida

Idag lär vi oss hur man skapar denna mycket enkla webbsida!

Obs! Du kan se dina ändringar när som helst genom att spara anteckningsblock och öppna filen.

Steg 8: Ge det lite färg

Vi har vår webbsida rullande direkt, men det är ganska vanligt. Låt oss ge vår paragraftagg lite färg!

Vi kan färga olika element genom att lägga till ett "style" -attribut till "p" -taggen enligt beskrivningen nedan:

Taylors webbplats

Välkommen till min webbsida

Idag lär vi oss hur man skapar denna mycket enkla webbsida!

Steg 9: Lägga till en bild

Vad är en webbplats utan bilder? Låt oss lägga till en bild på vår webbplats!

Första steget är att hitta en bild som du gillar. Jag använde google -bilder för att söka efter en golden retriever. Dra upp bilden och se till att webbadressen slutar med.jpg,.png,.gif,.jpg, etc.

När du har valt din bild måste vi lägga till den på html -sidan med hjälp av en "img" -tagg. Min bild är:

Lägg till den på din sida med en "img" -tagg med attributet "src":

Taylors webbplats

Välkommen till min webbsida

Idag lär vi oss hur man skapar denna mycket enkla webbsida!

Steg 10: Visa den slutliga produkten

Spara anteckningsfilen och öppna den slutliga produkten. Du borde se din webbsida!