Den grundläggande HTML-frågan du bör lägga märke till

HTML har funnits länge nu, så det är dags att lära dig grunderna. Vad är det, hur det fungerar, och hur man skriver några vanliga element i HTML.

Innan du börjar, se till att du läser vår guide till gratis online HTML-redaktörer. 5 Bästa gratis HTML-redigerare på internet för att testa din kod. 5 Bästa gratis HTML-redigerare för HTML för att testa din kod För tillfällen när du bara vill fitta runt med ett litet HTML-kod du kan tweak det till din smak, en HTML-redigerare på nätet hjälper dig bättre. Läs mer och de bästa webbplatserna för HTML-exempel på god kvalitet 8 Bästa webbsidor för kvalitets HTML-kodningsexempel 8 Bästa webbsidor för kvalitets HTML-kodningsexempel Det finns några fantastiska webbplatser som erbjuder väl utformade och användbara HTML-kodande exempel och handledning. Här är åtta av våra favoriter. Läs mer .

Vad är HTML?

HTML är det språk som används för att konstruera webbsidor. HTML står för Hypertext Markup Language och är enkelt en uppsättning instruktioner för din webbläsare. Med hjälp av dessa instruktioner visar din webbläsare hur en webbsida ska se ut.

Det är viktigt att förstå att det är en markup språk, inte en programmering språk. Programmeringsspråk låter dig lösa problem, som matematikekvationer, manipulera data eller flytta ett videospelskaraktär.

Du kan inte skriva någon logik i HTML. Det handlar bara om layout.

Vad ser HTML ut som?

HTML består av flera element som kallas “taggar”. Taggar är anvisningar för styling en viss del av din webbsida. Kommer tillbaka till konstruktion, HTML är planerna, och taggar är specifika funktioner som fönster eller dörrar.

Så här ser en väldigt grundläggande webbsida ut i HTML:

Taggar i HTML är fördefinierade och ange gemensamma funktioner som bilder, länkar till andra webbsidor, knappar och mer.

De allra flesta taggar måste vara öppna och stängd. Detta definierar helt enkelt någon funktion, med text, bilder eller andra taggar inuti den, och avslutar sedan definitionen. Tänka tillbaka till hus, öppna taggen är som att säga “starta fönstret här”, och att stänga taggen är som att säga “här är där fönstret slutar”.

HTML-taggar kommer inte att dyka upp på din webbplats. Din webbläsare följer anvisningarna, men visar aldrig den till besökare. Det är dock inte hemligt. Vem som helst kan titta på din HTML när du publicerar dina webbsidor.

Medan det finns ett stort antal olika HTML-taggar behöver du inte lära dem alla innan du kan koda en webbplats. Idag lär du dig att skriva några vanliga taggar och vad de kan användas till.

Vad är HTML-taggen attribut?

En sista sak att veta om taggar är attribut. Attribut definierar specialfunktioner för taggar. Om taggar är fönster och dörrar anger attributen specifika byggnadsdetaljer. Detta kan vara rammens bredd och höjd, oavsett om fönstret öppnas eller om dörren har ett lås.

Egenskaper ingår i öppningsetiketten, så här:

Du kan inte bara skapa egna taggar eller attribut. Attribut och taggar är fördefinierade av World Wide Web Consortium (W3C).

Vad är HTML5?

HTML5 är den senaste versionen av HTML. Den innehåller flera nya taggar, attribut och funktioner.

Eftersom HTML är en uppsättning instruktioner, tolkar olika webbläsare ibland det annorlunda. En webbläsare kan bestämma att fönster och dörrar ska målas svart om du inte säger något annat.

Medan webbläsare äntligen har blivit ganska konsekventa med varandra kan du fortfarande fånga ut ibland med mycket nya funktioner. Kanske Google Chrome har implementerat en ny tagg, men Microsofts internet Explorer har ännu inte.

För det mesta ser dina webbsidor ut över alla större webbläsare, men det är fortfarande värt att göra ett snabbtest innan du publicerar någonting, särskilt om du använder nya taggar, som kanske inte stöds av alla webbläsare än.

Om du vill veta mer om HTML5, ta en titt på vår HTML5 startguide. Kom igång med HTML5 Kom igång med HTML5 Du har hört talas om HTML5. Alla använder det. Den heter som frälsare på Internet, vilket gör det möjligt för människor att skapa rika och engagerande webbsidor utan att tillgripa Flash och Shockwave. Läs mer .

Så här kommenterar du HTML

Liksom många andra språk, markup eller programmering, har HTML förmågan att “kommentera” blockering av markup. En kommentar är något som ignoreras av webbläsaren. Detta kan vara en anteckning för att påminna dig om vad den här delen av din webbplats gör.

Genom att kommentera utmarkering instruerar du webbläsaren att ignorera en eller flera taggar. Det kan vara användbart att ta bort funktionalitet, eller att dölja en del av din webbplats utan att radera koden.

När en webbläsare ser en kommentar förstår den det som “använd inte dessa instruktioner tills jag säger något annat”. Kommentarer består av en “öppning” kommentar och a “stängning” kommentar-precis som taggar.

Här är ett exempel:

Kommentera kod är gjort exakt samma sätt:

Snarare än ett meddelande, sätt din markering mellan kommentarkoderna.

Så här lägger du in bilder i HTML

Infoga bilder i din HTML görs med bildtaggen:

Lägg märke till hur etikettnamnet heter img, och det finns två attribut. De src attribut anger när du ska hitta bilden och alt tagg är en alternativ textbeskrivning, om bilden inte kan laddas av någon anledning.

Bildtaggen behöver inte stängas, till skillnad från de flesta andra taggar.

Så här byter du teckensnitt i HTML

Teckensnitt kan ändras med hjälp av font taggen och ansikte attribut:

MUO Arial Text

Teckenstorlek kan enkelt ändras med hjälp av storlek attribut:

MUO stor text

Om du vill ändra teckensnittsfärgen kan det enkelt göras med Färg attribut:

MUO röd text

Dessa attribut är unika för font märka. Om du vill använda en annan tagg kan du bo taggar, genom att placera en inuti den andra:

MUO röd text

Så här lägger du till en länk i HTML

Länkar kan läggas till med hjälp av en märka:

MakeUseOf.com

De href Attributet är destinationen för din länk.

Hur man gör ett bord i HTML

HTML-tabeller involverar att nesta flera olika taggar. Du måste börja med en tabell märka:

Lägg nu till några rader med hjälp av tr märka:

Slutligen, använd td tagg för att skapa dina bordsceller, vilket också kommer att skapa kolumnerna:

Det är möjligt att gå överbord och gå ganska vild med din bordslayout, men det är oftast bäst att hålla sakerna enkla om möjligt. Tidigare användes tabeller för att strukturera en webbsida, men denna övning är daterad och ser hemskt ut. Håll tabeller helt enkelt för att vidarebefordra data till läsaren.

Använda CSS med HTML

Dessa exempel har täckt grunderna, men om du vill bli riktigt kreativ måste du använda CSS. Cascading Style Sheets ger dig mycket större kontroll över din webbdesign och låter dig återanvända en hel del kod mellan olika delar av din webbplats.

Medan vi har tutorials om att lära CSS 5 Baby Steps to Learning CSS och bli en Kick-Ass CSS Sorcerer 5 Baby Steg för att lära CSS och bli en Kick-Ass CSS Sorcerer CSS är de enskilt viktigaste förändringswebbsidorna har sett under det senaste decenniet, och det banade vägen för separation av stil och innehåll. På det moderna sättet definierar XHTML den semantiska strukturen ... Läs mer och snabba CSS-exempel 10 Enkla CSS-kodsexempel Du kan lära dig om 10 minuter 10 enkla CSS-kodsexempel Du kan lära dig om 10 minuter Vi går över hur du skapar ett inline-stilark så du kan öva dina CSS-färdigheter. Sedan flyttar vi till 10 grundläggande CSS-exempel. Därifrån är din fantasi gränsen! Läs mer, det finns fortfarande vissa inställningar du kan göra i HTML.

Om du vill skriva CSS tillsammans med din HTML, kan du använda stil attribut. Detta attribut applicerar helt enkelt CSS till taggen den används på:

Medan det här sättet fungerar bra, hittar du det svåra arbetet att behålla om du har mycket markup vilket kräver liknande styling.

Det bättre sättet är att använda stil tagg, placerad inuti huvud märka. Här kan du definiera CSS för hela din sida:

Stiltaggen har ett attribut på text / css. Detta är nödvändigt för att låta din webbläsare känna till den exakta stilen som kan förväntas i taggen.

Det tredje och sista sättet att använda CSS är genom en extern fil, med hjälp av länk märka. Detta länkar din HTML till CSS lagrad i sin egen fil, vilket är bra om du har en stor del av det:

Det finns flera attribut som används här. De rel attributet förklarar din länk som ett stilark. Typen av “text / css” definieras återigen i typ attribut och href attributet är var att hitta den externa filen.

Hur gör du en webbplats med HTML?

Som du har sett är HTML verkligen inte så illa, är det? Med några enkla taggar och attribut kan du snabbt montera en webbsida, även om du aldrig har skrivit HTML tidigare!

Om du vill skriva en komplett webbplats, se till att du tittar på vår nybörjarguide för att göra en hemsida. Hur man gör en hemsida: För nybörjare. Hur man gör en hemsida: För nybörjare idag ska jag styra dig igenom processen att göra en komplett webbplats från början. Oroa dig inte om det här låter svårt. Jag leder dig igenom det hela steget. Läs mer .

Utforska mer om: CSS, FAQ, HTML, webbutveckling.