5 steg för att förstå grundläggande HTML-kod
Annons
HTML är en viktig del av webben som vi känner till. Och medan få webbdesigners skapar sidor genom att manuellt skriva HTML, är det fortfarande praktiskt att veta lite om det.
Vi ska titta på några grunder i språket, inklusive vad HTML egentligen är, några grundläggande begrepp och hur det interagerar med andra språk. Tänk på detta som en "HTML för dummies" kraschkurs.
Grunderna i HTML: Vad är HTML?
HTML står för Hypertext Markup Language . Och även om det ibland klumpas in med programmeringsspråk, är detta inte korrekt.
Som markeringsspråk låter HTML bara skapa visningslayouten för sidor. Ett riktigt programmeringsspråk, som Java eller C ++, innehåller logik och kommandon som utförs.
Även om det är enkelt, är HTML ryggraden på varje sida på webben. Det ansvarar för vilken text som visas som fetstil, lägger till bilder och länkar till andra sidor. Vi har en HTML-FAQ De väsentliga HTML-frågorna som du bör bokmärka De väsentliga HTML-frågorna om du bör bokmärka HTML har funnits ett tag, så det är dags att du lär dig grunderna. Här är vad det är, hur det fungerar och hur du kan skriva några vanliga element i HTML idag! Läs mer som förklarar mer.
Du kan högerklicka på de flesta webbsidor i din webbläsare och välja Visa sidkälla eller liknande för att se HTML bakom dem. Detta kommer sannolikt också att innehålla en hel del kod som inte är HTML, men du kan bläddra igenom det.
Även om du har noll erfarenhet av markering eller programmeringsspråk kommer du att bli en mer informerad webbanvändare om du lär dig lite om HTML. Låt oss gå igenom fem grundläggande steg för att hjälpa dig förstå hur HTML fungerar. Vi ger exempel på vägen.
Steg 1: Förstå begreppet taggar
HTML använder ett system med taggar för att kategorisera olika delar av dokumentet.
De flesta taggar kommer i par för att linda in den drabbade texten inuti dem. Här är ett enkelt exempel (taggen gör texten fet ; vi diskuterar detta mer på ett ögonblick.)
This is some bold text . Lägg märke till hur den stängande taggen börjar med ett snedstreck (/). Detta betyder en avslutande tagg, vilket är viktigt. Om du inte stänger en tagg kommer allt från början och framåt attributet.
Men inte alla taggar har ett par. Vissa HTML-element, kallade tomma element, har inget innehåll och finns på egen hand. Ett exempel är
Steg 2: Skelett HTML-layouten
Ett korrekt HTML-dokument måste ha vissa taggar definierade så det läggs ut korrekt. Dessa är de väsentliga delarna:
- Varje HTML-dokument måste börja med
att förklara sig själv som sådan. Således är dess avslutande tagg,, är det sista objektet i en HTML-fil. - Nästa,
avsnittet innehåller information som sidtitel, olika skript som körs på sidan och liknande. Som namnet antyder kommer detta vanligtvis direkt efter initialenmärka. Slutanvändaren ser inte mycket av innehållet i dessa taggar. - Slutligen,
tagg innehåller texten på sidan som läsaren ser (plus mycket mer). Här hittar du bilder, länkar och mer.
Sedan avsnittet utgör huvuddelen av ett HTML-dokument, resten av vårt genomgång tittar på element som hör till det.
Steg 3: Grundläggande HTML-taggar för formatering
Låt oss nu titta på några vanliga taggar som utgör HTML-dokument. Naturligtvis är det inte möjligt att täcka alla element, så vi granskar några av de viktigaste. Vi har täckt många fler HTML-exempel 17 enkla HTML-kodexempel som du kan lära dig på 10 minuter 17 Enkla HTML-kodexempel som du kan lära dig på 10 minuter Vill du skapa en grundläggande webbsida? Lär dig dessa HTML-exempel och prova dem i en textredigerare för att se hur de ser ut i din webbläsare. Läs mer om dessa inte tillfredsställer dig.
Om dessa taggar verkar ganska grundläggande, kom ihåg att HTML skapades hela vägen tillbaka 1993. Webben var mycket textbaserad då i dess tidiga stadier.
Enkel textformatering
HTML stöder grundläggande textstilar som du hittar i Microsoft Word:
- taggar gör texten fet .
- taggar (som står för ”betoning”) kommer att kursivera texten.
HTML stöder också den äldre taggen för fetstil och för kursiv. Det är dock att föredra att använda ovanstående.
Kort sagt och visa hur något ska förstås, medan de senare taggarna bara berättar hur det ska se ut. Dessa tidigare taggar är mer tillgängliga för skärmläsare som används av synskadade.
Punkt och andra avdelningar
HTML-s tagg låter dig definiera en del av dokumentet. Vanligtvis är detta parat med CSS (se nedan) för att formatera ett avsnitt på ett visst sätt.
De
tagg låter dig dela text i stycken. Webbläsare lägger automatiskt lite utrymme före och efter dessa, så att du naturligtvis delar upp text.
Du kan lägga till rubriker till ditt dokument och göra det lättare att följa med
genom taggar. H1 är den viktigaste rubriken, medan H6 är minst viktigt. Nästan varje MakeUseOf-artikel använder H2- och H3-rubriker för att organisera information.
Om du trycker på Enter för att lägga till rader i ditt HTML-dokument kommer de inte att visas. Istället kan du använda
Här är ett exempel som använder alla dessa:
Exempelrubrik
Detta är ett stycke.
Det här är en sekund
stycke delat mellan två rader.
Steg 4: Infoga bilder
Bilder är en viktig del av de flesta webbsidor. Du kan lägga till dem enkelt med HTML och till och med ställa in olika egenskaper för dem.
Du sätter in en bild med src attributet kan du ange var du vill att bilden ska laddas från.
Ett annat viktigt attribut till alt . Med Alt-text kan du beskriva bilden för skärmläsare eller om bilden inte laddas ordentligt. Du kan musa över en bild för att se alt-texten.
Använd width och height att ange antalet pixlar bilden visas på.
Sätt ihop allt och en bildtagg ser ut så här:
Steg 5: Lägga till länkar
World Wide Web skulle inte vara mycket av en webb utan länkar till andra sidor. Använda tagg, kan du länka till andra sidor i valfri text.
Inuti tagg, href attributet berättar vart du länkar. Att helt enkelt klistra in webbadressen fungerar bra. Du kan använda titelelementet för att lägga till lite text som visas när någon svävar över länken.
En grundlänk ser så här ut:
Visit Google De taggen har många andra möjliga element, men vi dyker inte in dem här.
Hur HTML ansluter till CSS och JavaScript
Vi har tittat på det grundläggande i HTML och hur det skapar en webbsida. Men som du kan föreställa dig, HTML bara inte klippa det för den moderna webben. Enkla HTML-webbsidor var vanliga under "Web 1.0" -dagarna, då de flesta webbplatser var något annat än statisk text.
Men nu har vi mycket mer. CSS (Cascading Style Sheets) De väsentliga CSS3-egenskaperna Cheat Sheet De väsentliga CSS3-egenskaperna Cheat Sheet Behöver essentiella CSS-syntax med våra CSS3-egenskaper fuskark. Läs mer är ett språk som används för att beskriva hur texten du förberett i HTML ska se ut. Kom ihåg tagg vi diskuterade? Inuti detta (och andra taggar) kan du definiera ett klassattribut. Sedan kan du i ditt bifogade CSS-dokument skriva instruktioner för hur den class ska se ut.
Du kan definiera dessa stilelement inline i din HTML-kod, men detta anses vara dålig praxis eftersom det är mycket svårare att underhålla. Lär dig mer med dessa enkla CSS-exempel 10 enkla CSS-kodexempel som du kan lära dig på 10 minuter 10 Enkla CSS-kodexempel som du kan lära dig på 10 minuter Vi ska gå igenom hur du skapar ett inline stilark så att du kan öva dina CSS-färdigheter. Sedan går vi över på 10 grundläggande CSS-exempel. Därifrån är din fantasi gränsen! Läs mer .
JavaScript
Vi har sett att HTML definierar innehållet och CSS avgör utseendet. JavaScript, den sista medlemmen i den trio som är viktig för webben, tillåter webbsidor att svara på människors handlingar utan att ladda en ny sida varje gång.
Till exempel tillåter JavaScript en webbplats att varna dig för att lösenordet du angav inte uppfyller dess krav innan du försöker skicka det. En webbdesigner kan använda JavaScript för att bläddra igenom bilder i ett bildspel eller be användaren om inmatning.
Dessa är bara några elementära exempel. JavaScript är ett skriptspråk som kan göra mycket, och är jämförelsevis mycket mer komplicerat än HTML och CSS. Se vår översikt över JavaScript Vad är JavaScript och hur fungerar det? Vad är JavaScript och hur fungerar det? Vad är Javascript? Det är ett programmeringsspråk som används för att förbättra webbsidor. Det inkluderar dynamisk uppdatering av webbsidor, användargränssnitt och mer. Låt oss dyka in i vad Javascript handlar om. Läs mer för mycket mer.
Att titta på hela webbdesignens omfattning ligger utanför denna artikel, men det räcker med att säga att HTML interagerar med andra språk för att skapa de webbsidor vi känner idag.
Utvecklingen av HTML
Det är viktigt att notera att HTML inte är statisk. HTML har genomgått flera revisioner, den senaste är HTML 5. Denna standard stöder särskilt inbyggd videoinbäddning istället för att förlita sig på proprietära format som Adobe Flash.
Nya iterationer av HTML förklarar också att vissa arkaiska taggar avskrivs då och då. Dessa inkluderar fruktansvärda taggar som och (den rullande respektive flashtexten) som vanligtvis ses på 1990-talets webbplatsdesign. Så kom ihåg att standarder förändras över tid.
Lite HTML-kunskap går långt
Vi har tagit en kort rundtur i hur ett HTML-dokument fungerar. Nu vet du grunderna i hur webbsidor är strukturerade. Även om du inte fortsätter att bygga webbsidor är du lite mer medveten om webben du använder varje dag.
För att lära dig mer, uppgradera dina webbutvecklingsfärdigheter med viktiga verktyg Uppgradera dina webbutvecklingsfärdigheter med dessa 10 väsentliga verktyg Uppgradera dina webbutvecklingsfärdigheter med dessa 10 väsentliga verktyg Redo att börja utveckla webbplatser? Dessa onlineverktyg för nya och experter webbutvecklare garanterar att öka dina färdigheter! Läs mer och kolla sedan i vår guide om hur du utformar din första webbplats. Hur skapar jag en webbplats: för nybörjare Hur man skapar en webbplats: för nybörjare Idag guidar jag dig genom processen att skapa en komplett webbplats från grunden. Oroa dig inte om det låter svårt. Jag leder dig igenom det varje steg på vägen. Läs mer .
Bildkredit: Belyaevskiy / Depositphotos
Utforska mer om: HTML, HTML5, JavaScript, programmering, webbutveckling, webbansvariga verktyg.
