Eftersom jag har en bakgrund i tryck, är jag alltid ivrig efter att hjälpa designers från andra områden få en start i webbdesign och grundläggande utveckling. Jag vet från erfarenheten att övergången är en extremt skrämmande som många enkelt inte tror att de kan hantera.

Lyckligtvis kan jag också bevisa att det förmodligen inte är så svårt som du kan tänka dig. I världen av hardcore-kodning rankas HTML och CSS ganska lågt på hinder för inträde skala.

Idag ska vi starta en serie som granskar de grundläggande byggstenarna i webbutveckling. HTML, CSS, JavaScript; om du är en komplett och helt nybörjare som kanske inte ens har en grundläggande förståelse för vad dessa tekniker är mycket mindre hur man kan använda dem, så är den här serien för dig.

Vad är HTML?

Det finns en miljon sätt att jag kunde starta denna diskussion. Vi kunde gå in i spetsen av hur HTML står för Hypertext Markup Language eller hur det uppfanns 1980 av fysiker Tim Berners-Lee som ett system för delning av dokument, men du kan få allt det från Wikipedia. Om du är intresserad av World Wide Webs historia rekommenderar jag starkt att undersöka ämnet vidare, men det hjälper oss inte mycket i vår diskussion om vad HTML är idag och hur du behöver använda den.

Vad du verkligen behöver förstå är det begreppsmässiga syftet med HTML. Vad är det för? Varför behöver du det? Hur jämför det och relaterar till annan teknik som CSS och JavaScript?

HTML: Den viktigaste delen

Längs dessa linjer kan HTML betraktas som webbens grundläggande byggblock som du vet. Det finns en underliggande arkitektur av komplicerad teknik som utgör? Internet? men den goda ol WWW är till stor del beroende av HTML.

I själva verket tekniskt sett, HTML är allt du behöver för att skapa en webbsida. Några extremt enkla linjer HTML som laddas upp till en webbserver skulle utgöra en webbsida, vilket definitivt inte är något som kan sägas om CSS och vanligtvis inte något som kan sägas om JavaScript. Poängen här är att medan alla dessa tekniker är nära besläktade är HTML det pusliga stycket av pusslet.

Nu, innan du blir för upphetsad betyder det inte att du kan komma undan med att bara lära HTML. Du skulle vara svårt att hitta en modern webbsida som inte använder minst en kombination av HTML och CSS.

Markup Languages

För att verkligen förstå vad HTML är, måste du förstå vilka markeringsspråk som är och varför de finns (jag snubblar i det där steget).

I grund och botten är webben skrivet i vanlig text. Nu, med? Vanlig text? Jag menar inte bara en brist på bilder, jag menar brist på rik formatering av något slag. Till skillnad från i Microsoft Word där du enkelt kan skapa fet kursiv text vid valfri punktstorlek är skrivkoden mer som att använda WriteRoom eller IA Writer; allt du får är vanligt gamla bokstäver och symboler.

Skrivmaskinmetafonen

Föreställ dig att komponera en uppsats på en antik skrivmaskin och sedan skicka den uppsatsen till någon så att de kunde komma in i en dator. Din skrivmaskin har inga formateringsfunktioner, men när din medarbetare går in i din uppsats i den moderna ordbehandlaren vill du ha rubriker, fet text, kursiv text, punktlista och mer. Hur skulle du berätta för personen där du ska implementera dessa funktioner?

Svaret är givetvis att du skulle? Markera? ditt dokument och sätt in extra indikatorer på hur du vill att texten ska formateras. Dessa skulle inte vara närvarande i slutresultatet men är bara avsedda att berätta för tolken hur man gör allt ser ut som du tänker. Det här är precis hur ett markup språk fungerar. Med HTML, uppnås denna markering via taggar.

Tag, du är den

När jag skriver den här artikeln gör jag det i vanlig HTML-text. Det betyder när jag vill djärv något, jag kan inte bara slå en knapp. Istället lägger jag in en fet etikett:

Det sista ordet kommer att vara i <b>djärv</b>.

Se hur jag använde?? för att ange var den modiga texten skulle börja? Observera också hur jag använde?? för att ange var den fetstilte texten skulle sluta. För att kursivera något använder jag samma teknik.

<i>Detta är kursiv.</i> Detta är inte.

De fäste delarna är kända som taggar, och varje uppsättning taggar har en start- och stopppunkt. Med dessa berättar du tolken, i en webbläsare som Firefox, hur du vill att innehållet ska formateras. När vi placerar innehåll mellan en öppnings- och nära tagg, säger vi vanligtvis att vi har? det i en tagg.

Exempel Taggar

Nu när du vet vilka taggar är här några mer grundläggande exempel på vissa HTML-taggar:

• paragraf

• rubrik

  (h2, h3, h4 etc. skapar inkrementellt mindre rubriker)

• liten text

Länkar, Taggar och attribut

Det är här? Hypertext? i? Hypertext Markup Language? en del kommer in. En av de viktigaste delarna om att skriva HTML, och faktiskt om att använda webben i allmänhet, är länkande. Så fungerar det hela rätt? Om det finns en webbsida laddad i din webbläsare och du vill komma till en annan sida, vad gör du? Klicka på en länk! Detta system är fantastiskt för att ansluta alla olika bitar och bitar av information lagrad på webben.

För att länka något i HTML använder vi naturligtvis en tagg. Den här taggen kommer att se lite mer komplex ut än de flesta. Låt oss titta på ett exempel som länkar till Design Shacks hemsida.

Läs Design Shack dagligen för fantastiska bitar av design godhet.

Här har vi inte bara en märka men en attribut också. Taggen () berättar för webbläsaren att det finns en länk och attributet (href) berättar för webbläsaren där länken ska gå. Syntaxen för denna typ av struktur är som följer:

Text, bilder etc.

I vårt tidigare exempel är allt mellan? A? taggar blir en länk Så orden? Design Shack? skulle ha varit en aktiv textlänk som, vid klickning, riktade användaren till href-URL, vilken var Design Shack-hemsidan.

Att placera en bild via HTML fungerar på samma sätt. Vi använder? Src? attribut att peka webbläsaren till platsen för bilden och? alt? attribut för text som visas i stället för bilden om den inte kan visas. Lägg märke till att stängningskodstrukturen är lite annorlunda den här gången med alla? Img? info placerad inom en enda tagg.

<img src="//lesptitesaffairesdemayl.be/img/images_1/what-is-html-back-to-basics_4.jpg"> <p>Vi har nu en bra uppfattning om hur HTML är ett märkningsspråk och vad det betyder. Vi vet att det i grund och botten är ett sätt att ge webbläsaren vanlig text och få den att leverera riktformaterad och till och med aktivt innehåll som kan klickas på i slutet. Det sista vi behöver förstå är hur det passar in i den övergripande bilden av en färdig webbsida.</p> <p>Som vi har sett i exemplen ovan, HTML <em>för det mesta</em> avser direkt inmatning av innehåll på en sida. Den faktiska underliggande strukturen på en webbsida är den typ av taggade uttalanden som vi just lärt oss om. De flesta text och länkar som du ser på en viss sida, liksom många av bilderna, implementeras direkt med HTML. </p> <h3>HTML är tänkt att vara Boring</h3> <p>Som jag sa ovan är HTML tekniskt allt du behöver för en webbsida. Men det här HTML-innehållet är självklart ganska vanligt. Observera att ingenstans i exemplen ovan har vi berättat för vilken bakgrundsfärg vi vill använda, vilken storlek texten ska vara, vilka teckensnitt som ska tillämpas var, hur stora vissa portioner ska vara och hur de ska rada upp etc. </p> <p>Vi har helt enkelt kastat in innehållet utan någon verklig tanke mot hur det kommer att se ut. Titta på någon sida på webben kan du se att ingen slutar här. Varje sida har sin egen utseende, sitt eget färgschema, typografi, layout etc.</p> <p>Tänk dig att din lokala nyhetssida hämtar en historia från Associate Press. De kan skriva ut historien ordentligt och har därför samma grundläggande HTML-struktur för det innehållet, men det skulle troligen se ganska annorlunda ut än versionen på AP-webbplatsen. Varför?</p> <h3>CSS är hud, hår och kläder</h3> <p>Svaret är att modern HTML inte brukar användas för att styra estetisk stil och layout. För detta har vi antagit något som heter Cascading Style Sheets, eller CSS.</p> <p>Den typiska webbutvecklarens arbetsflöde kan vara att sätta in alla de olika rena innehållen först i ett HTML-dokument, sedan hoppa över till CSS och börja skapa det här innehållet på ett mer visuellt tilltalande och användbart sätt. Ett år senare kunde utvecklaren komma tillbaka och kasta i en helt ny CSS-fil som gör att webbplatsen ser helt annorlunda ut, utan att behöva röra HTML. </p> <p>JavaScript hoppar in i det här spelet genom att ta en mer aktiv roll i hur sidan <em>uppför sig</em>. Animationer, formulärinsändningar, dynamiskt innehåll, dessa är domänen för JavaScript. På senare tid har CSS inkräktat på detta område, men det är ett ämne för en annan dag. </p> <h2>Vad är HTML5?</h2> <img src="//lesptitesaffairesdemayl.be/img/images_1/what-is-html-back-to-basics_5.jpg"> <p>Innan vi lägger upp det här undrar du förmodligen hur mycket det här HTML5-talet handlar om. HTML5 är exakt vad det låter som: den femte stora iterationen av HTML.</p> <p>Webteknologin är inte stängd, de utvecklas ständigt och expanderar. Precis som trycksignalister måste i allmänhet hålla koll på de nyaste klockorna och visselpiporna i den senaste versionen av Photoshop, så webbdesigners måste hålla koll på ändringar i webbstandarder. </p> <p>HTML5 ger många nya funktioner till bordet medan du skär ut lite onödigt fett från tidigare betalning. Till exempel har HTML5-utvecklare några nya taggar att arbeta med som gör grundstrukturen på en webbsida mer logisk. </p> <p>För mer information om HTML5, kolla in vår kompletta serie om ämnet:</p> <ul> <li>HTML5: Grunderna</li> <li>HTML5: Nya element</li> <li>HTML5: Semantiska ändringar</li> <li>HTML5: Få det att fungera idag</li> </ul> <h2>Slutsats: Mer att komma!</h2> <p>Denna artikel var avsedd att ge dig en grundläggande begreppsmässig översikt över HTML. Om du började läsa utan aning om vilken HTML som är och hur den används, förhoppningsvis har du nu en grundläggande förståelse för dessa begrepp.</p> <p>När vi tittar på framtiden kommer jag att expandera detta ämne och gå igenom grundläggande anatomi i ett HTML-dokument och sedan gå vidare till en annan viktig fråga: Vad är CSS? </p> <p>Var noga med att checka tillbaka snart för mer om dessa ämnen!</p> <p><em>Bildkällor: xlibber, Ryan Amos, Dave Parker</em></p>