Så här skapar du en enkel webbsida med HTML: 9 steg (med bilder)

Thistaaches du hur man skriver en enkel webbsida med HTML (HyperText Markup Language). HTML är en av kärnkomponenterna i World Wide Web, vilket gör upp strukturen på webbsidor. När du har skapat din webbsida kan du spara det som ett HTML-dokument och visa det i din webbläsare. Att skapa en HTML-sida är möjlig med hjälp av grundläggande textredaktörer som finns på både Windows och Mac-datorer.

Steg

Del 1 av 6:

Lägger till ett huvud till din HTML

1. Öppna en textredigerare. På en dator som kör Windows-operativsystemet använder du vanligtvis Anteckningsblock, eller Notepad ++ medan MacOS-användare använder TextEdit och ChromeOS-användare kommer att använda text:

Fönster - Öppna Start

, Skriv in anteckningsblock, eller anteckningsblock++ och klicka på Anteckningsblock eller "Anteckningsblock ++ eller sublim" På toppen av fönstret.

Mac OS - Klick Strålkastare

, Skriv in textport, och dubbelklicka Textport På toppen av resultaten.

Chromeos - Öppna launcher, klicka sedan på Text. (Ikonen säger kodpad).

2. Skriv in och tryck på ↵ Ange. Detta berättar webbläsaren att det här är ett HTML-dokument.

3. Skriv och tryck på ↵ Ange. Den här öppningsetiketten för din HTML-kod.

4. Skriv in och tryck på ↵ Ange. Detta är taggen som öppnar ditt HTML-huvud. HTML-huvudinformationen som vanligtvis visas på din webbsida. Denna information kan innehålla titeln, meta-data, CSS-stilark och andra skriptspråk.

5. Skriv in . Det här är taggen för att lägga till en titel på din sida.

6. Skriv en titel för din webbsida. Det här kan vara vilken titel du vill namnge din webbsida.

7. Skriv in och tryck på ↵ Ange. Detta är taggen för att stänga din titel tagg.

8. Skriv och tryck på ↵ Ange. Detta är taggen för att stänga huvudet. Din HTML-kod ska se ut så här.

Del 2 av 6:

Lägger till en kropp och text till din HTML

1. Skriv in under det stängda "Huvud" märka. Den här taggen öppnar kroppen i ditt HTML-dokument. Allt som går i HTML-kroppen visas på webbsidan.

2. Skriv in . Det här är taggen för att lägga till en rubrik till ditt HTML-dokument. En rubrik är stor djärvt text som vanligtvis går högst upp i ditt HTML-dokument.

3. Skriv en rubrik för din sida. Detta kan vara titeln på din sida eller en hälsning.

4. Skriv efter din rubriktext och tryck på ↵ Ange. Den här taggen stänger din rubrik.

Lägg till ytterligare rubriker när du går. Det finns sex olika rubriker som du kan skapa med hjälp av THREFT-taggarna. Dessa skapar rubriker av olika storlekar. Till exempel, för att skapa tre rubriker i olika storlek i följd, kan du skriva följande:

Rubrikerna visar prioriteten eller betydelsen av texten. Men det är inte nödvändigt att använda en högre rubrik om du vill använda någon nedre rubrik. Man kan direkt använda H3, även om det inte finns något H1 i ditt inlägg.

5. Typ . Detta är taggen för att öppna en paragraf. Punkttext används för att visa normal storlek.

6. Skriv lite text. Det här kan vara en beskrivning för din webbsida eller någon annan information du vill dela med.

7. Skriv efter din text och tryck på ↵ Ange. Detta taggar för att stänga avsnittet Text. Följande är ett exempel på stycke Text i HTML:

Du kan lägga till flera stycke rader i rad för att skapa en rad stycken under en rubrik.

Du kan ändra färgen på vilken text som helst genom att inrama texten med och taggarna. Var noga med att skriva in din önskade färg "Färg" avsnitt (du håller citat). Du kan vända någon text (e.g., rubriker) i en annan färg med denna uppsättning taggar. Till exempel, för att vända ett stycke text Blue, skulle du skriva följande kod: Valar är majestätiska varelser.

Du kan lägga till fetstörningar, kursiv och andra textformat med hjälp av HTML.Följande är exempel på hur du kan formatera text med HTML-taggar:

Om du använder djärv och kursiv text för betoning, inte bara för styling, använd och element istället för och . Detta gör din webbsida enklare att förstå när du använder teknik som en skärmläsare eller läsarens läge som finns i vissa webbläsare.

Del 3 av 6:

Lägger till ytterligare element till din HTML

1. Lägg till en bild på din sida. Du kan lägga till en bild i din HTML med följande steg:

Typ För att öppna din bildmärke.
Kopiera och klistra in bildadressen efter "=" Logga in Quotation Marks.
Typ > Efter bildadressen för att stänga din bildmärke. Till exempel, om bildens URL är "http: // min bild.com / sjö", Du skulle skriva följande:

2. Länk till en annan sida. Du kan lägga till en länk till din HTML med följande steg:

Typ För att öppna din länk tagg.

Kopiera och klistra in webbadressen efter "=" Logga in Quotation Marks.

Typ > Efter webbadressen för att stänga länkdelen av HTML.

Skriv ett namn för länken efter stängningsfästet.

Skriv efter länknamnet för att stänga HTML-länken. Följande är ett exempel på en länk till Facebook.

3. Lägg till en radbrytning till din HTML. Du kan lägga till en radbrytning genom att skriva till din HTML. Detta skapar en horisontell linje som kan användas för att dela bort olika delar av din sida.

Del 4 av 6:

Anpassa färger

1. Kolla in listan över officiella HTML-färgnamn och koder. World Wide Web Consortium (W3C) hanterar en officiell lista över färger som du hittar på https: // w3.Org / Wiki / CSS / Egenskaper / Färg / Nyckelord. Varje färg har ett officiellt namn, 6-siffrigt hexadecimal kod och ett decimaltvärde. Du kan använda något av dessa värden för att lägga till färg till element i din webbsida. För det här exemplet använder vi de officiella färgnamnen.

2. Ställ bakgrundsfärgen i taggen. Du gör det här genom att lägga till stil Attribut till taggen. Låt oss säga att du ville göra bakgrundsfärgen på hela sidan lavendel-:

3. Ställ in textfärgen för alla taggar. Du kan också använda stil Attribut för att ange vilken färg du vill ha all text inom en viss tagg som ska vara. Till exempel, låt oss säga att du ville göra texten i en av dina taggar midnattsblå:

Färgförändringen påverkar endast texten inom den taggen. Om du startar en annan tagg senare borde det också vara midnattsblå, Du måste ställa in stilattributet där också.

4. Ställ bakgrundsfärgen för en rubrik eller stycke. Liknande hur du ställer in bakgrundsfärgen för kroppsmärket kan du också ställa in bakgrundsfärger för andra taggar. Låt oss säga att du ville göra bakgrundsfärgen på en ljusgrå, och bakgrundsfärgen på en H1-stilhuvud ljuskål, du skulle använda:

Del 5 av 6:

Stänger ditt HTML-dokument

1. Skriv för att stänga din kropp. När du har lagt till all din text, bilder och andra element i ditt HTML-dokument, lägg till den här taggen längst ner i ditt HTML-dokument för att stänga kroppen i ditt HTML-dokument.

2. Skriv för att stänga ditt HTML-dokument. Den här taggen går under taggen för att stänga din HTML-kropp i slutet av ditt HTML-dokument. Detta berättar webbläsaren Det finns ingen HTML-kod efter den här taggen. Hela HTML-dokumentet ska se ut så här:

Del 6 av 6:

Spara och öppna din webbsida

1. Konvertera ditt dokument till vanlig text (endast Mac-användare). Klicka på Formatera Menyalternativ längst upp på skärmen, klicka sedan på Göra vanlig text I den resulterande rullgardinsmenyn.

Detta steg är inte nödvändigt eller möjligt på Windows.

2. Klick Fil. Det finns i menyraden längst upp på skärmen.

3. Klick Spara som. Det är i rullgardinsmenyn nedan "Fil".

Alternativt kan du trycka på Ctrl+S (Windows) eller ⌘ kommando+S (Mac) att göra det.

4. Ange ett namn för ditt HTML-dokument. Skriv vad du vill namnge ditt dokument till "Filnamn" (Windows) eller "namn" (Mac) textruta.

5. Ändra dokumentets filtyp. Du måste ändra dokumentet från en textfil till en HTML-fil. Använd följande steg för att ändra filtypen:

Fönster - Klicka på "Spara som typ" rullgardinsmenyn, klicka på Alla filer, och skriv sedan .html I slutet av filens namn.

Mac OS - Ersätt .Text i slutet av filens namn med .html istället.

Chromeos - Klicka på "Spara som" knapp. Namnge filen med .html i slutet. Början är upp till dig.

6. Klick Spara. Det ligger längst ner i fönstret. Om du gör det kommer du att skapa en HTML-fil.

HTML-filer öppnas vanligtvis med din standardwebbläsare.

7. Stäng din textredigerare. Vid denna tidpunkt är du redo att öppna din HTML-fil i din webbläsare så att du kan visa din webbsida.

8. Öppna HTML-dokumentet med din webbläsare. I de flesta fall kan du dubbelklicka på HTML-dokumentet för att göra det här. Om du dubbelklickar på dokumentet resulterar i ett fel, gör följande:

Fönster - Högerklicka på dokumentet, välj Öppna med, och klicka på din önskade webbläsare.

Mac - Klicka på dokumentet en gång, klicka på Fil, Välj Öppna med, och klicka på din önskade webbläsare.

9. Redigera HTML-dokumentet om det behövs. Du kanske märker ett fel på din HTML-sida. För att ändra det kan du redigera HTML-dokumentets text:

På Windows kan du högerklicka på dokumentet och klicka på Redigera I den resulterande rullgardinsmenyn (om du har anteckningsblock ++ installerad, kommer det att säga Redigera med anteckningsblock++ istället).

På Mac vill du klicka på dokumentet för att välja det, klicka på Fil, Välj Öppna med, och klicka på Textport. Du kan också dra dokumentet till TextEdit.

På Chromebook, stäng textappen, öppna filer, hitta din fil och klicka sedan på den.

Prov HTML

HTML Cheat Sheet

Prov webbsida med HTML

Video.

Genom att använda den här tjänsten kan viss information delas med YouTube.

Tips

Taggar ska alltid stängas i en spegelbild av sina öppna motsvarigheter. Till exempel, bör stängas som .

Du kan lägga till sido-rullningstext till din webbplats med taggen, men kom ihåg att den här taggen kanske inte känns igen av vissa webbläsare.

Många människor Använd anteckningsblock++ att skriva och sammanställa sin kod.

Om du vill centrera en bild på din sida kan du skriva efter bildens namn i img Tag (till exempel).

Varningar

Det är bäst att vara värd för dina egna bilder på IMGUR eller liknande om du planerar att ladda upp bilder på din webbsida. Att skicka andras bilder kan leda till upphovsrättsintrång.

Dela på det sociala nätverket:

Så här skapar du en enkel webbsida med html

Steg

Prov HTML

Video.

Tips

Varningar