5 steg för att förstå grundläggande HTML -kod

5 steg för att förstå grundläggande HTML -kod

HTML är en viktig del av webben som vi känner den. Och medan få webbdesigners skapar sidor genom att skriva HTML manuellt, ä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.



HTML Basics: Vad är HTML?

HTML står för Hypertext Markup Language . Och även om det ibland stöter på programmeringsspråk är det inte korrekt.





Som en markeringsspråk , HTML låter dig bara skapa visningslayout för sidor. En sann programmeringsspråk , liksom 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 är ansvarigt för vilken text som visas som fet, lägger till bilder och länkar till andra sidor. Vi har en HTML -fråga som förklarar mer.



Du kan högerklicka på de flesta webbsidor i din webbläsare och välja Visa sidans källa eller liknande för att se HTML bakom dem. Detta kommer sannolikt också att innehålla mycket kod som inte är HTML, men du kan se igenom det.

Även om du har noll erfarenhet av markup eller programmeringsspråk, kommer du att bli en mer informerad webbanvändare genom att lära dig lite om HTML. Låt oss gå igenom fem grundläggande steg för att hjälpa dig att förstå hur HTML fungerar. Vi kommer att ge exempel längs vägen.



Steg 1: Förstå begreppet taggar

HTML använder ett system av taggar att kategorisera olika delar av dokumentet.

De flesta taggar kommer i par för att linda in den berörda texten inuti dem. Här är ett enkelt exempel (



tagg gör text djärv ; vi diskuterar detta mer om ett ögonblick.)

This is some bold text .

Lägg märke till hur sluttaggen börjar med ett snedstreck (/). Detta betyder en avslutande tagg, vilket är viktigt. Om du inte stänger en tagg har allt från början och framåt det attributet.

krom med mycket minne

Alla taggar har dock inte ett par. Några HTML -element, kallade tomma element , har inget innehåll och finns på egen hand. Ett exempel är


tag, vilket är en radbrytning. Du kan 'stänga' sådana taggar genom att lägga till ett snedstreck (t.ex.


) men det är inte absolut nödvändigt.

Steg 2: Skelett HTML -layout

Ett korrekt HTML -dokument måste ha vissa taggar definierade så att det läggs upp korrekt. Dessa är de väsentliga delarna:

  • Varje HTML -dokument måste börja med | _+_ | att förklara sig som sådan. Således är dess sluttag, | _+_ | , är det sista objektet i en HTML -fil.
  • Därefter, | _+_ | avsnittet innehåller information som sidtitel, olika skript som körs på sidan och liknande. Som namnet antyder kommer detta vanligtvis direkt efter initialen | _+_ | märka. Slutanvändaren ser inte mycket av innehållet i dessa taggar.
  • Slutligen, | _+_ | tag innehåller texten på sidan som läsaren ser (plus mycket mer). Här hittar du bilder, länkar och mer.

Sedan

avsnitt utgör huvuddelen av ett HTML -dokument, resten av vår genomgång tittar på element som hör till det.

Steg 3: Grundläggande HTML -taggar för formatering

Låt oss sedan titta på några vanliga taggar som utgör HTML -dokument. Naturligtvis är det inte möjligt att täcka varje element, så vi kommer att granska några av de viktigaste. Vi har täckt många fler HTML -exempel om dessa inte tillfredsställer dig.

Om dessa taggar verkar ganska grundläggande, kom ihåg att HTML skapades ända tillbaka 1993. Webben var mycket textbaserad då i sina tidiga skeden.

Enkel textformatering

HTML stöder grundläggande textstilar som du skulle hitta i Microsoft Word:

  • | _+_ | taggar gör text djärv .
  • | _+_ | taggar (som står för 'betoning') kommer kursivera text.

HTML stöder också de äldre

tag för fet och

för kursiv. Det är dock att föredra att använda dem ovan.

Kortfattat,

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.

Stycke och andra divisioner

HTML

tag kan du definiera en del av dokumentet. Vanligtvis är detta parat med CSS (se nedan) för att formatera en sektion på ett visst sätt.

De

tag kan du dela upp text i stycken. Webbläsare lägger automatiskt till lite utrymme före och efter dessa, så att du naturligtvis kan bryta upp text.

Du kan lägga till rubriker i ditt dokument och göra det lättare att följa med hjälp av

genom

taggar. H1 är den viktigaste rubriken, medan H6 är minst viktig. Nästan varje MakeUseOf -artikel använder H2- och H3 -rubriker för att organisera information.

Slår Stiga på att lägga till radbrytningar i ditt HTML -dokument kommer inte att visa dem faktiskt. Istället kan du använda

för att lägga till en radbrytning.

Här är ett exempel som använder alla dessa:

Steg 4: Infoga bilder

Bilder är en viktig del av de flesta webbsidor. Du kan enkelt lägga till dem med HTML och till och med ange olika egenskaper för dem.

Du sätter in en bild med

märka. Kombinera detta med

attribut kan du ange varifrån du vill ladda bilden.

En annan viktig egenskap hos

hur man spelar in video från webbplatsen

taggar är

. Alt -text låter dig beskriva bilden för skärmläsare eller om bilden inte laddas korrekt. Du kan hålla muspekaren över en bild för att se dess alt -text.

Använd

och




element för att ange antalet pixlar bilden visas på.

Lägg ihop allt och en bildtagg ser ut så här:


Example Heading


This is one paragraph.


This is a second
paragraph split between two lines.



World Wide Web skulle inte vara mycket av en webb utan länkar till andra sidor. Använda

tag, kan du länka till andra sidor på valfri text.

Inuti

src

tagg, the

attribut berättar var du länkar. Att klistra in webbadressen fungerar bra. Du kan använda

alt

element för att lägga till lite text som visas när någon svävar över länken.

En grundlänk ser ut så här:

width

De

height

taggen har många andra möjliga element, men vi kommer inte att dyka in i dem här.

Hur HTML ansluter till CSS och JavaScript

Vi har tittat på grundläggande HTML och hur det skapar en webbsida. Men som du kan föreställa dig, skär HTML inte ensam för den moderna webben. Enkla HTML -webbsidor var vanliga under 'Web 1.0' -dagarna, då de flesta webbplatser inte var mer än statisk text.

Men nu har vi mycket mer. CSS (Cascading Style Sheets) är ett språk som används för att beskriva hur texten du förberett i HTML ska se ut. Kom ihåg

Dr. Phil

tag som vi diskuterade? Inuti denna (och andra taggar) kan du definiera a

attribut. Sedan kan du i ditt medföljande CSS -dokument skriva instruktioner för hur det går till

borde titta.

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äs mer med dessa enkla CSS -exempel . Kolla också in hur du optimerar dina CSS -filer .

JavaScript

Vi har sett att HTML definierar innehållet och CSS avgör utseendet. JavaScript, den sista medlemmen i trion vital för webben, gör att webbsidor kan svara på människors handlingar utan att ladda en ny sida varje gång.

Till exempel tillåter JavaScript att en webbplats varnar 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 uppmana användaren att mata in.

Detta är bara några elementära exempel. JavaScript är ett skriptspråk som kan göra mycket, och är relativt mycket mer komplicerat än HTML och CSS. Ser vår översikt över JavaScript för mycket mer.

Att titta på den fullständiga omfattningen av webbdesign 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 versioner, den senaste är HTML 5. Den här standarden har särskilt stöd för 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å vissa arkaiska taggar som utfasade då och då. Dessa inkluderar hemska taggar som

href

och

title

(den rullning respektive flash -texten) som vanligtvis ses på 1990 -talets webbdesign. Så kom ihåg att standarder förändras över tiden.

Lite HTML -kunskap går långt

Vi har tagit en kort rundtur i hur ett HTML -dokument fungerar. Nu vet du grunderna för hur webbsidor är uppbyggda. Även om du inte fortsätter att bygga webbsidor är du lite mer medveten om webben du använder varje dag.

ansluten till nätverket men ingen internetanslutning

För att lära dig mer, uppgradera dina webbutvecklingskunskaper med viktiga verktyg och kolla sedan in vår guide om hur du utformar din första webbplats .

Bildkredit: Belyaevskiy/ Depositphotos

Dela med sig Dela med sig Tweet E-post 5 tips för att ladda dina VirtualBox Linux -maskiner

Trött på den dåliga prestanda som erbjuds av virtuella maskiner? Här är vad du bör göra för att öka din VirtualBox -prestanda.

Läs Nästa Relaterade ämnen
  • Programmering
  • HTML
  • Webbutveckling
  • JavaScript
  • Verktyg för webbansvariga
  • Programmering
  • HTML5
Om författaren Ben Stegner(1735 artiklar publicerade)

Ben är biträdande redaktör och Onboarding Manager på MakeUseOf. Han lämnade sitt IT-jobb för att skriva heltid 2016 och har aldrig tittat tillbaka. Han har täckt tekniska handledning, videospelrekommendationer och mer som en professionell författare i över sju år.

Mer från Ben Stegner

Prenumerera på vårt nyhetsbrev

Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!

Klicka här för att prenumerera