8 bedste websteder til kvalitetskodeksempler

Lige siden jeg først begyndte at lære om HTML tilbage i 90'erne, har jeg altid fundet det næsten umuligt at finde gode, solide HTML-eksempler på internettet. Det ville have været dejligt at have et par websteder, der tilbyder de nyeste, sejeste dynamiske webstedskodningseksempler.

Nå, meget er ændret siden 90'erne, og fremkomsten af ​​dynamiske webkodningssprog som PHP og CSS virkelig gør HTML old-school. Derefter skal du igen forstå HTML i old school, før du kan forstå de sprog, der dynamisk opretter HTML, som browsere viser.

Heldigvis er der nu nogle fantastiske websteder, der tilbyder veludformede og nyttige HTML-kodningseksempler og tutorials. Der er bestemt stadig en hel masse temmelig dårlige HTML-tutorial-websteder derude, så jeg besluttede at samle otte af mine yndlingswebsteder.

Jeg skal nævne, at MUO sandsynligvis er det første sted at starte, med seje artikler på grundlæggende HTML 5 trin til at forstå grundlæggende HTML-kode 5 trin til at forstå grundlæggende HTML-kode HTML er rygraden på hver webside. Hvis du er nybegynder, så lad os lede dig gennem de grundlæggende trin til forståelse af HTML. , cool HTML-effekter 7 Cool HTML-effekter, som enhver kan tilføje til deres websted 7 Cool HTML-effekter, som enhver kan tilføje til deres websted Fortvivl ikke! Du behøver ikke at kende CSS eller PHP for at opbygge et fancy sted. Nogle gode gamle HTML og at vide, hvordan man kopierer og indsætter, vil gøre det. , og HTML-tip 5 HTML-tip til oprettelse af et hurtigt indlæst gratis websted 5 HTML-tip til oprettelse af et hurtigt indlæst gratis websted for at hjælpe dit websted med at indlæse hurtigere.

De følgende otte websteder tilbyder ikke kun et godt, solidt grundlag for HTML-kodning, men de tilbyder også det bedste læringsmiljø, med værktøjer, du kan bruge Opgrader dine webudviklingsfærdigheder med disse 10 væsentlige værktøjer Opgrader din webudviklingsfærdigheder med disse 10 væsentlige værktøjer Klar til at begynde at udvikle websteder? Disse online værktøjer til nye og ekspert webudviklere er garanteret at øge dine evner! at teste, hvad du lærer.

1. HTML-hund

Et af mine foretrukne websteder, som jeg normalt tjekker først, når jeg glemmer den grundlæggende syntaks for HTML-sætninger, er HTML Dog. Webstedet er godt designet i modsætning til 90 procent af webdesignwebstederne derude, der ligner de blev bygget i 1990'erne og aldrig opdateret. Formatet er enkelt og hurtigt - bare klik på linket Eksempler på hovedsiden, så finder du en liste over HTML-elementer som layout, farvelægning, tekst og mere.

HTML Dog giver klare eksempler i hvide kodefelt, som du kan kopiere og indsætte i din egen HTML-kode. Du kan se den faktiske live HTML-output af prøvekoden i ruden til højre.

2. W3Schools

Selvom HTML Dog er min favorit, når det kommer til at kontrollere grundlæggende syntaks, er W3Schools det sted, jeg normalt besøger, når jeg vil være lidt smuk med min webkodning. Det er en af ​​de mere populære ressourcer til alle enkle og dynamiske kodningseksempler, fra PHP til JQuery og Javascript - men du kan også finde et fantastisk afsnit fyldt med grundlæggende HTML-kodningseksempler.

Det seje ved W3Schools er, at de ligesom HTML Dog har indarbejdet et nyttigt split-screen værktøj, hvor du kan teste den kode, du lærer i hver lektion. Bare juster HTML'en lidt, klik “Løb” og du vil se resultaterne i området til højre. Meget brugbar!

3. Quackit

Et andet sted, der er på samme niveau som W3Schools med hensyn til brugbarhed og moderne design, er Quackit. Ja, navnet er lidt klodset, men webstedet indeholder mængder af nyttige eksempler.

I HTML-området finder du masser af eksempler i tekstbokse, som du kan fremhæve og kopiere - med den faktiske visningseffekt vist i “Eksempel” kolonne.

4. Landofcode.com

Et andet sted, der tilbyder det nyttige split-screen værktøj til test af HTML-kode er LandOfCode. Hovedwebstedet tilbyder et rimeligt antal HTML-eksempler, alt fra HTML-tekstformatering og korrekt link til HTML-formularer, stilark og metatags. Men den ægte perle på dette websted er PractiCode Online Code Editor.

Denne er faktisk lidt mere avanceret end værktøjet W3Schools og HTML Dog, fordi det har yderligere knapper, der giver dig mulighed for at se resultaterne i et nyt vindue, ikke kun i displayområdet til højre.

5. Codecademy

Et af de mest kendte websteder til overhovedet at lære noget sprog er selvfølgelig Codecademy. Og når det kommer til at lære grundlæggende HTML, skuffer Codecademy ikke med sit første websted ved hjælp af HTML- og CSS-kursus [Broken Link Removed].

Kursusarbejdsområdet er, ligesom resten af ​​Codecademy, ret avanceret og giver dig fleksibilitet til at lege rundt i kodeområdet og se din realtids webside på den rigtige opdatering, når du foretager ændringer. Du kan også skifte det til fuld skærm for at se, hvordan dit websted ser ud i et fuldt browservindue.

Det dejlige ved dette kursus er, at det også inkluderer læring om at bruge CSS til at formatere dine sider. 10 enkle CSS-kodeeksempler, du kan lære på 10 minutter 10 Enkle CSS-kodeeksempler, du kan lære på 10 minutter. Vi vil undersøge, hvordan man opretter en inline stilark, så du kan øve dine CSS-færdigheder. Derefter går vi over på 10 grundlæggende CSS-eksempler. Derfra er din fantasi grænsen! , som enhver, der lærer grundlæggende HTML, skal lære på samme tid, de lærer HTML.

6. EchoEcho

Et par flere websteder, som jeg ønskede at røre ved, er ikke de bedste af de bedste - men de står over andre HTML-kodewebsteder, fordi de er godt skrevet, godt formateret og dækker emnet grundigt. Den første af dem er EchoEcho. Dette sted har en HTML-sektion, der sandsynligvis er en af ​​de mest udtømmende lister over HTML-elementer, du kan lære et sted.

Hver af disse giver et meget klart eksempel på, hvordan HTML-koden skal struktureres, sammen med en forklaring af alle de tilgængelige parametre og muligheder, du kan bruge.

Dette sted er faktisk dedikeret til at tilbyde meget mere end tutorials - dets online D-Zine! er i det væsentlige et online magasin, der er viet til alt, hvad der vedrører webdesign.

7. Java2s

HTML / CSS-sektionen på Java2s webstedet er som et leksikon af HTML-tags til både begyndere og eksperter. Layouten er perfekt, især for folk, der muligvis allerede ved, hvilke HTML-tags de vil bruge, men ikke helt kan huske den nøjagtige syntaks.

Listen med tags er ren og alfabetiseret, så du hurtigt kan rulle ned for at finde den ønskede. Når du klikker på tagget, ser du en liste med eksempler på brugssager, og når du klikker på et af disse, ser du det nøjagtige kodestykket, du skal bruge til at implementere det.

Du kan klikke på Prøv dette eksempel for at se den resulterende HTML-side i et nyt browservindue.

8. Awwwards

Endelig, fordi det altid er en god ide at lære at kode ved at se eksempler på fremragende kode, er jeg nødt til at give kudoer til et af de mest nyttige sider på internettet, som alle studerende, der er nye til HTML, skal bogmærke. Webstedet kaldes Awwwards.

Awwwards giver priser for årets, månedens og dagens site og giver endda nogle tommelfingre op til de bedste udviklere og mobilwebsteder. Gennemse disse valg giver dig masser af ideer til, hvilke elementer og layout der fungerer bedst, når du sammensætter dine egne websider.

Gå frem og opret

Der er ikke noget så spændende som at tilbringe dage eller endda måneder, at kode dit eget websted og til sidst afsløre dit mesterværk for verden. Hvis du er en god studerende af HTML og god HTML-designpraksis, kan du bestemt deltage i rækkerne af webudviklere, der har bidraget til det bedste, som internettet har at tilbyde.

Glem ikke at tjekke MakeUseOfs egen liste over HTML-eksempler, der får dig i gang på din vej.

Har du udviklet en smag til kodning? Disse kodningsudfordringer kan hjælpe dig med at tjene en bedre løn, og sørg for at tage et kig på disse browser-IDE'er, som programmører bør vide om.

Vil du have kodeeksempler til andre programmeringssprog? Du finder masser af dem på disse professionelle kodeeksemplerwebsteder Top 10 Professionelle eksempler på koder Websteder for programmerere Top 10 Professionelle eksempler på koder Websteder til programmerere Leder du efter at lære og oprette applikationer med eksempelkodestykker? Her er de bedste gratis kodeeksempelwebsteder til at begynde med. .