Hur man skriver en HTML-sida (med bilder) - Tips

Video: HTML Introduction: How to Code a Simple Web Page

Innehåll

Steg
Del 1: Hur jag upptäckte HTML
Råd
Varning
Vad du behöver

HTML (HyperText Markup Language) är ett grundläggande språk för att bygga webbsidor. Det skapades som ett enkelt och flexibelt kodningsspråk. Nästan varje webbsida på Internet är utvecklad med någon form av denna kod (ColdFusion, XML, XSLT). HTML är lätt att förstå, men du kan fortsätta lära dig om det länge om du är intresserad av dess omfattande funktionalitet. För att lägga till färg och kul på din webbplats kan du lära dig grundläggande CSS så fort du vänjer dig vid en grundläggande HTML-sida.

Steg

Del 1 av 4: Bygga ett dokument

Öppna en enkel textredigerare. NotePad är ett bra alternativ och kan laddas ner gratis. Du kan skriva HTML med de flesta textredigerare, men mer komplex programvara med automatiska formateringsfunktioner kan göra det svårt att organisera din HTML-sida.
- Använd inte TextEdit, eftersom det vanligtvis sparar filen i ett format som din webbläsare kanske inte känner igen som HTML.
- Du kan också använda en online HTML-redigerare. Dedikerade HTML-redigeringsprogram rekommenderas inte för nybörjare.
Spara en fil som en webbsida. Välj Arkiv → Spara som i menyn högst upp. Ändra filformatet till "Webbsida", ".html" eller ".htm". Spara filen där du lätt kan hitta den.
- Det finns ingen skillnad mellan dessa tre alternativ.
Öppna filen i en webbläsare. Dubbelklicka på filen så öppnas den automatiskt som en tom webbsida i din webbläsare. Alternativt kan du öppna en webbläsare, som Firefox eller Internet Explorer, och sedan använda Arkiv → Öppna fil för att välja dokument.
- Denna webbplats är inte online. Den kan endast visas på din dator.
Uppdatera webbsidan och se de ändringar som gjorts. Skriv in följande i ditt tomma dokument: Hallå. Spara dokumentet. Uppdatera den tomma webbsidan i din webbläsare och ordet "Hej" i fetstil visas högst upp på sidan. När du vill testa din nya HTML under den här självstudien, spara .htm-dokumentet och uppdatera sedan webbläsarfönstret för att se hur HTML kompileras.
- Om du ser orden ""och"'' Visas i din webbläsare, filen har inte sammanställts korrekt i HTML. Prova en annan textredigerare eller en annan webbläsare.
Lär dig taggarna. HTML-kommandon är skrivna i "taggar" som berättar för webbläsaren hur du kompilerar och visar din webbsida. De är alltid skrivna i enstaka citat
och visas inte på webbsidan som du använde dem i exemplet ovan:
- är ett "startkort" eller "öppningskort". Allt som skrivs efter denna tagg kommer att definieras som "fet" (fet på en webbsida).
- är en "slutkod" eller "slutkod", som du kan särskilja med symbolen / tecknet. Det anger slutet på fet text. De flesta (inte alla) taggar behöver en slutkod för att fungera, så se till att inkludera den.
Bygg ditt dokument. Ta bort allt i ditt HTML-dokument. Börja om med följande text, precis som den skrevs (minus punktpunkterna). Denna HTML-kod berättar webbläsaren vilken typ av HTML du använder och att all din HTML kommer att placeras i taggarna. och .
Lägg till huvudet (huvudet) och kroppstaggarna. HTML-dokument är uppdelade i två delar. Avsnittet "överst" är för specialinformation, som sidans titel. Avsnittet "body" innehåller huvudinnehållet på sidan. Lägg till båda dessa avsnitt i ditt dokument och kom ihåg att ta med sluttaggarna. Den nyligen tillagda texten är fet:
Ge din sida en titel. De flesta av korten i huvudsektionen är oviktiga att lära sig med en nybörjare. Titeltaggen är dock lätt att använda och kommer att avgöra vad som visas som namnet på webbläsarfönstret eller på webbläsarfliken. Placera rubrikens start- och slutkoder i huvudkoderna och skriv eventuella rubriker mellan taggarna:
- Min första HTML-sida.
annons

Del 2 av 4: Textformatering

Lägg till text i din kropp. För det här avsnittet kommer vi bara att arbeta med body tags. Den andra texten kommer fortfarande att finnas i ditt dokument, men vi sparar utrymme genom att inte upprepa det i den här självstudien. Skriv vad du vill mellan korten och , och det kommer att visas som det första innehållet på din sida. Till exempel:
- Jag följde wikiHow-instruktioner för att skriva en HTML-sida.
Lägg till rubriker för texten. Organisera din sida med rubriktaggar, som instruerar webbläsaren att visa text mellan dem i större teckenstorlek. Dessa taggar används också av sökmotorer och andra verktyg för att avgöra vad din webbplats handlar om och hur den är organiserad.

är den största rubriken, och du kan skapa mindre rubriker upp till

. Testa dem på din sida:
- Välkommen till min sida.
- Jag följde wikiHow-instruktioner för att skriva en HTML-sida.
- Mitt mål idag:
- Slutförda mål:
- Lär dig hur du använder rubriker.
- Oavslutade mål:
- Lär dig mer textformateringstaggar.
Lär dig mer textformateringstaggar. Du har redan sett den "starka" taggen, men det finns många andra sätt att formatera din text på. Prova dessa taggar, eller med flera taggar samtidigt för samma textsträng. Kom ihåg att lägga till avslutande taggar på baksidan!
- Viktig text, visas i fetstil i webbläsaren.
- Betonad text, visas i kursiv stil i webbläsaren.
- Sms lite mindre än vanligt. Denna text ändras automatiskt om den används i en rubrik.
- ~~Text är inte längre relevant, visas med ett brödtext.~~
- Text infogas senare än andra dokument, visas med understrykningar.
Ordna text på din sida. Du kanske märker att det inte räcker med att trycka på "enter" för att texten ska visas på en annan rad. Dessa taggar kan hjälpa dig att skapa stycken och radbrytningar eller ordna din text på andra sätt:
- Förkortning för "avsnitt" (stycke) -taggen kommer att hålla all text mellan dessa taggar i ett stycke och skilja den från texten ovanför och under den.
- Den här taggen genererar radbrytningar. Lägg inte till en slutkod till den, eftersom den inte stör något annat innehåll. Använd den här taggen i dikter eller adressrader, inte stycken.
- ```
Om du behöver visa texten mycket exakt sätter den här taggen texten inuti den till ett teckensnitt med fast bredd (varje bokstav har samma bredd) och låter dig skapa intervall Tomt och radavbrott som du vill för vanlig redigering istället för taggar.
```
- Den här taggen definierar vilken typ av text som citeras från en källa.
  Du kan beskriva källan senare med citera kort.
Lägg till osynlig texttext. Kommentartaggar visas inte på webbsidan. De låter dig kommentera dig själv i HTML-dokumentet utan att påverka innehållet. Lägg inte till en slutkod.
- Korten som går ensamma utan att avsluta taggar kallas "tomma taggar."
Kombinera dem tillsammans. Det bästa sättet att komma ihåg dessa taggar är att använda dem på din webbplats. Här är ett exempel som använder korten i de steg du har lärt dig hittills. Försök att förutsäga hur de kommer att visas i webbläsaren, kopiera dem sedan till ditt dokument och ta reda på det.
- Min första HTML-sida.
- Välkommen till min webbplats.
- Hoppas du gillar den här sidan!
  Jag gjorde det bara för dig.
- Del 1: Hur jag upptäckte HTML
- Jag har lärt mig HTML redan i ~~ett~~ tvåtimmar, så nu är jag expert.
annons

Del 3 av 4: Lägga till länkar och bilder

Lär dig om attribut. Taggar kan ha ytterligare information skrivna inuti dem, så kallade attribut. Dessa attribut representeras av ytterligare ord i själva taggarna, i form fastighetsnamn = "specifikt värde". Till exempel kan alla HTML-taggar ha titelattributet:
- Inledningsavsnittet är här.
  Titelavsnittet "Om", som kommer att visas när du svävar över avsnittet på webbsidan.
Länkar till andra webbplatser. Användning av kort för att skapa en hyperlänk till någon annan webbsida. Infoga webbadressen till webbsidan som du vill länka till med attributet href. Här är ett exempel som länkar till den webbsida du läser:
- Dina besökare på din webbplats kan klicka på den här texten för att följa länken.
Lägg till ett id-attribut i taggen. Ett annat attribut som alla HTML-taggar kan använda är elementet "id". Skriv på vilket kort som helst id = "vidu" eller använd något namn som inte innehåller mellanslag. Det ger ingen synlig effekt, men vi kommer att använda den i nästa steg.
- Lägg till exempel till följande i ditt dokument:
  Denna stycke används som ett exempel för att beskriva hur id-attributet fungerar.
Länk till ett element med ett visst id. Nu kan vi använda hyperlänkstaggen, , för att länka till en annan plats på samma sida. I stället för en URL använder vi symbolen #, följt av id-värdet vi vill länka till. Till exempel, Denna text kommer att länka till texten med id "vidu".
- Alla HTML-värden är skiftlägeskänsliga. "#VIDU" och "#vidu" länkar båda till samma plats.
- Om din sida är tillräckligt kort för att visa hela sidan på en gång kommer du förmodligen inte att märka att något händer när du klickar på länken i din webbläsare. Ändra storlek på fönstret tills rullningsfältet visas och försök sedan igen.
Lägg till foton. Kort är en tom tagg, vilket innebär att ingen sluttagg behövs. All information som webbläsaren behöver för att visa bilden läggs till med hjälp av attribut. Här är ett exempel för att visa wikiHow-logotypen, med en beskrivning för varje attribut bakom:
- Egenskaper src = "" berättar webbläsaren var fotot är. (Observera att publicering av ett foto från någon annans webbplats anses vara olämpligt - och bilden försvinner när sidan inte längre är aktiv.)
- Egenskaper stil = "" Det kan göra många saker, men viktigast av allt används det för att ställa in bredden och höjden på en bild i pixlar. (Du kan också använda de separata attributen width = "" och height = "" istället, men det kan leda till konstiga storleksproblem om du använder CSS.)
- Egenskaper alt = "" är en kort beskrivning av bilden som användaren kommer att se om bilden inte kan laddas. Detta anses vara ett krav, eftersom det används för skärmläsare för blinda webbplatsbesökare.
annons

Del 4 av 4: Läs mer Lägga till och få din webbplats online

Bekräfta din HTML. HTML-validering söker efter fel i din kod. Om din webbplats inte visas korrekt kan valideringen hjälpa dig att hitta det fel som orsakar problemet. Det kan också lära dig mer om HTML genom att bestämma att koden ser bra ut på skärmen, men den rekommenderas inte längre på grund av nya uppdateringar i HTML-standarden. Att använda ogiltig HTML gör din webbplats inte värdelös, men kan orsaka problem eller visa instabil i olika webbläsare.
- Testa en gratis online-valideringstjänst från W3C, eller sök efter ett annat HTML 5-valideringsverktyg online.
Läs mer om taggar och attribut. Det finns många andra HTML-taggar och attribut och många ställen att lära sig dem:
- Prova w3schools och HTML Dog för mer självstudier och kompletta listor med taggar.
- Hitta en webbsida som du gillar hur den ser ut, använd sedan webbläsarens funktion "Visa sidkälla" för att få HTML-koden själv. Kopiera det till ditt dokument och studera hur det fungerar.
- Läs andra artiklar och lär dig mer om hur du skapar tabeller i HTML, använder metataggar för att öka dina chanser att hitta det via sökmotorer eller använda en division. ställa in ett område på sidan) och span (används för att ange textelementets stil) för att hjälpa till med stil genom CSS.
Få din webbplats online. Välj en tjänst som är värd för din webbplats och sedan kan du ladda upp så många HTML-sidor som du vill till din personliga webbdomän. För att göra detta måste du använda programvara för FTP-uppladdning, men många tjänster för webbuthyrning erbjuder också den här tjänsten.
- När du länkar till sidor eller bilder som finns direkt på din webbplats måste du använda hela adressen. Till exempel, om ditt domännamn är www.chuyengiahtmlsieudang.com, då texten finns i dessa taggar kommer att länka till "www.chuyengiahtmlsieudang.com/nhatky/thuhai.html"
Lägg till stilar med CSS. Om din HTML-sida ser lite monoton ut, försök lära dig grunderna i CSS för att lägga till färger, olika teckensnitt och bättre kontroll över var element placeras. Genom att länka ett CSS-formatmall till en HTML-sida kan du göra drastiska förändringar direkt och dynamiskt justera stilen för all text i en viss tagg. Du kan leka med det grundläggande formateringslagret lite här eller dyka in i mer detaljerade handledning i HTML Dogs CSS-handledning.
Lägg till JavaScript på din webbplats. JavaScript är ett programmeringsspråk som används för att lägga till mycket funktionalitet på dina HTML-sidor. JavaScript-kommandona infogas mellan start- och sluttaggarna , och kan användas för att lägga till interaktiva knappar, beräkna matematiska problem och mer. Ta reda på mer i w3c-exemplen. annons

Råd

Doktypdeklarationen (Document Type Declaration used) som används i denna handledning är "lös HTML 4.0.1 övergång" (HTML 4.0.1 inte snäv övergång), ett enkelt format. för nybörjare att använda. Använda sig av () ett alternativ för webbläsaren att kompilera den i strikt HTML 5-format, vilket är den rekommenderade (men mindre vanliga) standardstilen.

Varning

Syftet med HTML är att hålla innehåll i ett globalt format. Den har ingen kontroll över presentationen av din webbplats, såsom bakgrundsfärg och den exakta placeringen av elementen. Även om det fortfarande finns taggar som låter dig göra det, är det en bra idé att använda CSS för att skapa en mer kontrollerbar och konsekvent webbplats.

Vad du behöver

En enkel textredigerare, som NotePad eller TextEdit
En webbläsare, till exempel Internet Explorer eller Mozilla Firefox
(Valfritt) En HTML-redigerare som Adobe Dreamweaver, Aptana Studio eller Microsoft Expression Web