Helt siden jeg begynte å lære om HTML tilbake på 90-tallet, har jeg alltid funnet det nesten umulig å finne gode, solide HTML-eksempler på internett. Det ville vært fint å ha noen nettsteder som tilbyr de nyeste, kuleste dynamiske nettstedkodingseksemplene.
Vel, mye har endret seg siden 90-tallet, og adventen av dynamiske web kodende språk som PHP og CSS gjør virkelig HTML old-school. Så igjen må du forstå old-school HTML før du kan forstå språkene som dynamisk lager HTML-koden som nettleserne viser.
Heldigvis er det nå noen fantastiske nettsteder som tilbyr godt utformede og nyttige HTML-kodende eksempler og opplæringsprogrammer. Det er sikkert fortsatt mange ganske dårlige HTML-opplæringswebsteder der ute, så jeg bestemte meg for å trekke sammen åtte av mine favorittwebsteder.
Jeg bør nevne at MUO er sannsynligvis det første stedet å starte med kule artikler om grunnleggende HTML 5 trinn for å forstå grunnleggende HTML-kode 5 trinn for å forstå grunnleggende HTML-kode Les mer, kule HTML-effekter 7 Kule HTML-effekter som noen kan legge til på deres nettside 7 Kule HTML-effekter som noen kan legge til på deres nettside Ikke fortvil! Du trenger ikke å vite CSS eller PHP for å bygge et fancy nettsted. Noen gode gamle HTML og vite hvordan du kopierer og limer vil gjøre. Les mer og HTML-tips 5 HTML-tips for å lage en rask innlasting av gratis webside 5 HTML-tips for å lage et raskt lastet gratis nettsted Les mer for å hjelpe nettstedet ditt til å laste raskere.
Følgende åtte nettsteder gir ikke bare et godt og solid grunnlag for HTML-koding, men de tilbyr også det beste læringsmiljøet, med verktøy du kan bruke til å teste ut hva du lærer.
1. HTML Dog
En av mine favorittsteder som jeg vanligvis sjekker først når jeg glemmer den grunnleggende syntaksen for HTML-setninger, er HTML Dog. Nettstedet er godt designet, i motsetning til 90 prosent av webdesign nettsteder der ute som ser ut som de ble bygget på 1990-tallet og aldri oppdatert. Formatet er enkelt og raskt - bare klikk på eksempler-lenken på hovedsiden, og du finner en liste over HTML-elementer som layout, fargelegging, tekst og mer.
HTML Dog gir klare eksempler i hvite kodebokser som du kan kopiere og lime inn i din egen HTML-kode. Du kan se den faktiske live HTML-utgangen av prøvekoden på ruten til høyre.
2. W3Schools
Nå, mens HTML Dog er min favoritt når det gjelder å sjekke grunnleggende syntaks, er W3Schools stedet jeg vanligvis går når jeg vil ha litt fancy med webkoding. Det er en av de mest populære ressursene for alle enkle og dynamiske kodende eksempler, fra PHP til JQuery og Javascript - men du finner også en fantastisk del fylt med grunnleggende HTML-kodende eksempler.
Den kule tingen om W3Schools er at, som HTML Dog, har de innarbeidet et nyttig delt skjermverktøy der du kan teste koden du lærer i hver leksjon. Bare tweak HTML litt, klikk " Kjør " og du vil se resultatene i området til høyre. Veldig nyttig!
3. Quackit
Et annet nettsted som er på samme nivå som W3Schools når det gjelder nytte og moderne design er Quackit. Ja, navnet er litt dumt, men nettstedet gir mange nyttige eksempler.
I HTML-området finner du mange eksempler i tekstbokser som du kan markere og kopiere - med den faktiske visningseffekten som vises i kolonnen " Eksempel ".
4. Landofcode.com
Et annet nettsted som tilbyr det nyttige skjermverktøyet for å teste HTML-koden, er LandOfCode. Hovedstedet tilbyr et stort antall HTML-eksempler, alt fra HTML-tekstformatering og riktig kobling til HTML-skjemaer, stilark og metatagger. Men den ekte perlen på denne nettsiden er PractiCode Online Code Editor.
Denne er faktisk litt mer avansert enn W3Schools og HTML Dog-verktøyet fordi den har flere knapper som lar deg se resultatene i et nytt vindu, ikke bare i visningsområdet til høyre.
5. Codecademy
En av de mest kjente nettstedene for å lære noe språk er åpenbart Codecademy. Og når det gjelder å lære grunnleggende HTML, skuffer Codecademy ikke med sin første nettside ved hjelp av HTML og CSS kurs.
Kursets arbeidsområde, som resten av Codecademy, er ganske avansert og gir deg fleksibilitet til å leke rundt i kodeområdet og se din realtids webside på riktig oppdatering når du gjør endringer. Du kan også bytte den til fullskjerm for å se hvordan nettstedet ditt ser ut i et fullstendig nettleservindu.
Den fine tingen om dette kurset er at den også inneholder læring om bruk av CSS for å formatere sidene dine 10 Enkle CSS-kodeeksempler Du kan lære om 10 minutter 10 enkle CSS-kodeeksempler du kan lære om 10 minutter Vi skal gå over hvordan du lager en inline stylesheet slik at du kan øve dine CSS ferdigheter. Da flytter vi på 10 grunnleggende CSS eksempler. Derfra er fantasien din grense! Les mer, som alle som lærer grunnleggende HTML, bør lære samtidig som de lærer HTML.
6. EchoEcho
Et par flere nettsteder jeg ønsket å berøre er ikke det beste av det beste - men de står over andre HTML-kodesider fordi de er godt skrevet, godt formatert og dekker emnet grundig. Den første er EchoEcho. Dette nettstedet har en HTML-seksjon som sannsynligvis er en av de mest uttømmende lister over HTML-elementer for å lære på ett sted.
Hver av disse gir et veldig klart eksempel på hvordan HTML-koden skal struktureres, sammen med en forklaring på alle tilgjengelige parametere og alternativer du kan bruke.
Dette nettstedet er faktisk viet til å tilby mye mer enn opplæringsprogrammer - sin online D-Zine! er i hovedsak et nettmagasin viet til alle ting relatert til webdesign.
7. Java2s
HTML / CSS-delen av Java2s nettsted er som en encyklopedi av HTML-koder for både nybegynnere og eksperter. Oppsettet er perfekt, spesielt for folk som kanskje allerede vet hvilke HTML-koder de vil bruke, men kan ikke helt huske den nøyaktige syntaksen.
Listen over tagger er ren og alfabetisert slik at du raskt kan bla ned for å finne den du vil ha. Når du klikker på taggen, ser du en liste over eksempelbrukstilfeller, og når du klikker på en av disse, ser du den nøyaktige kodestykket du trenger for å implementere den.
Du kan klikke på Prøv dette eksempelet for å se den resulterende HTML-siden i et nytt nettleservindu.
8. Awwwards
Til slutt, fordi det alltid er en god ide å lære å kode ved å se eksempler på utmerket kode, må jeg gi kudos til en av de mest nyttige nettstedene på internett at alle studenter som er nye til HTML, bør bokmerke. Nettstedet heter Awwwards.
Awwwards gir priser for årets, månedens og dagens nettsted, og gir til og med noen tommelen opp til de beste utviklerne og mobilnettstedene. Bla gjennom disse valgene gir deg mange ideer for hvilke elementer og layout som fungerer best når du setter sammen dine egne nettsider.
Gå frem og lag
Det er ikke noe så spennende som å tilbringe dager, eller til og med måneder, å kode ditt eget nettsted og til slutt avsløre mesterverket ditt til verden. Hvis du er en god student i HTML og god HTML-design praksis, kan du sikkert bli med i rangeringen av webutviklere som har bidratt til det beste nettverket har å tilby.
Ikke glem å sjekke ut MakeUseOfs egen liste over HTML-eksempler 17 Enkle HTML-kodeeksempler Du kan lære om 10 minutter 17 Enkle HTML-kodeeksempler Du kan lære om 10 minutter Hvis du kjenner de følgende 17 HTML-kodene (og de ekstra få som går med dem), vil du kunne lage en grunnleggende nettside fra bunnen av eller justere koden som er opprettet av en app som ... Les mer som vil komme deg i gang på vei.
Kjenner du til andre virkelig nyttige HTML-eksempelressurser for webprogrammerere som bare lærer å lage websider? Del dine egne ressurser i kommentarfeltet nedenfor.