8 bästa webbplatser för kvalitets HTML kodning exempel

Ända sedan jag började lära mig HTML om 90-talet har jag alltid funnit det nästan omöjligt att hitta bra, solida HTML-exempel på internet. Det skulle ha varit trevligt att ha några webbplatser som erbjuder de senaste, coolaste dynamiska webbplatsens kodande exempel.

Tja, mycket har förändrats sedan 90-talet, och tillkomsten av dynamiska webbkodningsspråk som PHP och CSS gör verkligen HTML-grundskolan. Då måste du förstå old-school HTML innan du kan förstå de språk som dynamiskt skapar HTML som webbläsare visar.

Lyckligtvis finns det nu några fantastiska webbplatser som erbjuder väl utformade och användbara HTML-kodande exempel och handledning. Det finns verkligen en hel del ganska dåliga HTML-handledning webbplatser där ute, så jag bestämde mig för att dra åtta av mina favoritwebbplatser.

Jag bör nämna att MUO är förmodligen den första platsen att börja med coola artiklar om grundläggande HTML 5 steg för att förstå grundläggande HTML-kod 5 steg för att förstå grundläggande HTML-kod Läs mer, coola HTML-effekter 7 Coola HTML-effekter som någon kan lägga till på deras hemsida 7 Coola HTML-effekter som någon kan lägga till på deras hemsida Förtvivlan inte! Du behöver inte veta CSS eller PHP för att bygga en fancy webbplats. Några bra gamla HTML och veta hur man kopierar och klistrar kommer att göra. Läs mer och HTML-tips 5 HTML-tips för att skapa en snabb, laddningsfri webbplats 5 HTML-tips för att skapa en snabb, laddningsfri webbplats Läs mer för att hjälpa din webbplats att ladda snabbare.

Följande åtta webbplatser erbjuder inte bara en bra, solid grund för HTML-kodning, men de erbjuder också den bästa lärmiljön, med verktyg du kan använda för att testa vad du lär dig.

1. HTML Dog

En av mina favoritwebbplatser som jag brukar kontrollera först när jag glömmer den grundläggande syntaxen för HTML-satser är HTML Dog. Webbplatsen är väl utformad, till skillnad från 90 procent av webbdesign webbplatser där ute som ser ut som de byggdes på 1990-talet och aldrig uppdaterades. Formatet är enkelt och snabbt - klicka bara på länken Exemplar på huvudsidan, och du hittar en lista med HTML-element som layout, färg, text och mer.

HTML Dog ger tydliga exempel i vita kodrutor som du kan kopiera och klistra in i din egen HTML-kod. Du kan se den faktiska live-HTML-utmatningen av provkoden i rutan till höger.

2. W3Schools

Nu, medan HTML Dog är min favorit när det gäller att kontrollera grundläggande syntax, är W3Schools den plats jag brukar gå när jag vill bli lite fin med min webkodning. Det är en av de mer populära resurserna för alla enkla och dynamiska kodningsexempel, från PHP till JQuery och Javascript - men du hittar också en fantastisk sektion fylld med grundläggande HTML-kodande exempel.

Den snygga delen om W3Schools är att, liksom HTML Dog, har de tagit med sig ett användbart verktyg för split-skärm där du kan testa koden du lär dig i varje lektion. Bara tweak HTML lite, klicka “Springa” och du ser resultaten i området till höger. Mycket användbart!

3. Quackit

En annan webbplats som ligger på samma nivå som W3Schools när det gäller användbarhet och modern design är Quackit. Ja, namnet är lite goofigt, men webbplatsen ger volymer av användbara exempel.

I HTML-området hittar du massor av exempelkod i textrutor som du kan markera och kopiera - med den faktiska visningseffekten som visas i “Exempel” kolumn.

4. Landofcode.com

En annan webbplats som erbjuder det användbara skärmverktyget för att testa HTML-koden är LandOfCode. Huvudsidan erbjuder ett antal HTML-exempel, allt från HTML-textformatering och korrekt länkning till HTML-formulär, stylesheets och metataggar. Men den riktiga pärlan på denna webbplats är PractiCode Online Code Editor.

Den här är faktiskt lite mer avancerad än W3Schools och HTML Dog-verktyget eftersom den har ytterligare knappar som låter dig se resultaten i ett nytt fönster, inte bara i visningsområdet till höger.

5. Codecademy

En av de mest kända webbplatser för att lära sig något språk alls är uppenbarligen Codecademy. Och när det gäller att lära sig grundläggande HTML, besviker Codecademy inte med sin första hemsida med hjälp av HTML och CSS-kurs [borttagen borttagen länk].

Kursens arbetsområde, som resten av Codecademy, är ganska avancerad och ger dig flexibiliteten att spela runt i kodområdet och se din realtids webbsida till rätt uppdatering när du gör ändringar. Du kan också byta till helskärm för att se hur din webbplats ser ut i ett helt webbläsarfönster.

Det trevliga med denna kurs är att det också innehåller lärande om hur du använder CSS för att formatera dina sidor. 10 Enkla CSS-kodsexempel Du kan lära dig om 10 minuter 10 enkla CSS-kodexempel Du kan lära dig om 10 minuter Vi går över hur du skapar en inline stylesheet så att 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, som alla som lär sig grundläggande HTML ska lära sig samtidigt som de lär sig HTML.

6. EchoEcho

Ett par fler webbplatser som jag ville röra på är inte det bästa av det bästa - men de står över andra HTML-kodsajter eftersom de är välskrivna, välformaterade och täcker ämnet noggrant. Den första av dem är EchoEcho. Den här sidan har en HTML-sektion som förmodligen är en av de mest uttömmande listorna med HTML-element för att lära sig på ett ställe.

Var och en av dessa ger ett mycket tydligt exempel på hur HTML-koden ska struktureras, tillsammans med en förklaring av alla tillgängliga parametrar och alternativ som du kan använda.

Denna sida ägnas egentligen till att erbjuda mycket mer än tutorials - det är online D-Zine! är i grunden en online-tidning som ägnas åt alla saker som är relaterade till webbdesign.

7. Java2s

HTML / CSS-delen av Java2s webbplats är som en encyklopedi av HTML-taggar för både nybörjare och experter. Layouten är perfekt, speciellt för personer som kanske redan vet vilka HTML-taggar de vill använda, men kan inte riktigt komma ihåg den exakta syntaksen.

Listan med taggar är ren och alfabetiserad så att du snabbt kan rulla ner för att hitta den du vill ha. När du klickar på taggen ser du en lista med exempel på användarfall, och när du klickar på någon av dem ser du exakt kodbiten som du behöver använda för att implementera det.

Du kan klicka på Prova detta exempel för att se den resulterande HTML-sidan i ett nytt webbläsarfönster.

8. Awwwards

Slutligen, eftersom det alltid är en bra idé att lära sig hur man kodar genom att se exempel på utmärkt kod, måste jag ge kudos till en av de mest användbara webbplatser på internet att alla studenter som är nya för HTML bör bokmärke. Webbplatsen heter Awwwards.

Awwwards ger utmärkelser till årets, månadens och dagens webbplats, och ger även några tummar upp till de bästa utvecklarna och mobila webbplatser. Genom att bläddra genom dessa val kommer du att få massor av idéer för vilka element och layouter som är bäst när du sätter ihop dina egna webbsidor.

Gå framåt och skapa

Det finns inget så exhilarating som att spendera dagar, eller till och med månader, kodning av din egen hemsida och slutligen avslöja ditt mästerverk till världen. Om du är en bra student i HTML och bra HTML-designpraxis kan du säkert gå med i räkenskaperna hos webbutvecklare som har bidragit till det bästa som webben har att erbjuda.

Glöm inte att kolla in MakeUseOfs egen lista med HTML-exempel 17 Enkla HTML-kodexempel Du kan lära dig om 10 minuter 17 Enkla HTML-kodexempel Du kan lära dig om 10 minuter Om du känner till följande 17 HTML-taggar (och de extra få som går med dem) kan du skapa en grundläggande webbsida från början eller tweak koden som skapats av en app som ... Läs mer så börjar du på väg.

Känner du till några andra riktigt användbara HTML-exempelresurser för webbprogrammerare som bara lär sig att skapa webbsidor? Dela dina egna resurser i kommentarfältet nedan.

Utforska mer om: HTML, webbutveckling, verktyg för webbansvariga.