Pretty baby spin-doktorer http://1apotekonline.com/cialis/ sterling sølv pille kasse

Skriv korrekt kod / Indentering

Från filmen:

Indentering

 

Hej hörni.

Idag så tänkte jag att jag skulle visa er hur man indenterar sin kod för att lättare hålla koll på den och förstå vad som ingår i vilket och när man har missat en avslutande tagg eller liknande. Detta gör man främst i kodmallen men givetvis så indenterar man också css-kod, alltså det som finns i stilmallen. Det här är jätteviktigt och är det så att ni skulle önska att börja jobba inom webbdesign eller något sådant så är det väldigt viktigt att man indenterar sin text på rätt sätt.

Om man använder en text editor som jag gör på min skoldator, som heter sublime text, så är det väldigt mycket lättare att indentera texten men nu så har vi ju blogg.se:s eget verktyg här så jag tänkte att jag visar hur man gör här och då kommer jag göra det med lite mörkare bakgrund så att ni förhoppningsvis ser lite bättre. Då är det som så att vi har ju olika taggar och de här taggarna kallas antingen för förälder-element eller parent-element eller child-element eller barn-element då. Alltså head till exempel som ligger här uppe. Zoomar in lite till. Head som ligger här, det är det som finns här uppe och i head så har den massa barn. Alltså den har ett efterföljande element och där har vi till exempel title, så title är ett barn till head-elementet. För att man då lättare ska hålla koll på vad som är barn och vad som är förälder och det kan ju finnas en förälder som har en förälder som har en förälder eller att liksom ett barn har ett barn som har ett barn som har ett barn. Vi kommer att komma in på det lite senare här.

I alla fall, då gör man som så att ett element som är ett, vad heter det, ett barn till ett annat element., det tabbar man in så. Det här meta, det också. Allt som är inom head, det ska liksom in ett snäpp och om vi då hade till exempel title-elementet här, title-elementet här, korrekt indentering på det hade egentligen varit att ha det på det här viset. Så indenterar vi ju så klart in innehållet i title också för det innehållet som finns i title, det är ju barn till title. Så det här hade varit korrekt indentering av det här.

Om vi då går ner till body, där är det lite viktigare att ha den här typen av indentering så har vi body där, så har vi <div id=”wrapper”>. Den ska ju börja ett snäpp in för den ligger ju inom body-taggen för body-taggen slutar ju inte förrän längst ner så då vet vi att då är wrapper en del utav body. Sen innanför wrapper så har vi header och vi vet att header ligger inuti wrapper så därför ska det hoppa in. De avslutande div-taggarna, som här har vi <div id=”header”>, de har ju en </div> så i vanliga fall så kanske det står så här, men det blir inte bra därför att om, du ska ha för vana att lägga dem på varsin rad men att de ligger på samma vertikala rad. Vertikal är ju uppifrån och ner och horisontell är från vänster till höger. När vi tabbar in, då tabbar vi in åt höger hela tiden men den här <div id=”header”>, den ligger ju här på den här raden och då har vi </div> som ligger under och då ska den ligga på samma vertikala linje där så att ni ser, de ligger på samma linje där.

Sen har vi ju <div id=”content”> och vi har ju redan avslutat <div id=”header”> här så därför så ligger ju inte <div id=”content”> inuti header utan den ligger bara inuti body som ligger inuti wrapper. Med andra ord så ligger <div id=”content”> också innanför wrapper och då lägger vi den på samma vertikala linje som header för den är lika stort barn som header. Sen inuti header så har vi den här lilla programmeringen och sen så i ett annat tips så la jag in en <div class=”entry-box”> men den är inte child till det här för det är ingen div-tagg eller tagg utan det här är bara lite deklaration av programmering så därför så lägger den sig här så. Men däremot det som efterföljer här, det ska in så att det ligger innanför entry-box för det är ju ett barn till entry-box.

Sen då så har vi <div class=”entrybody”>, det är också ett barn till <div class=”entry-box”> för det är så att <div class=”entry-box”> är samma som <div id=”content”> men jag har lagt in lite mer där. Sen har vi <div class=”entrybody”> och så har vi allt som, eller förlåt <div class=”entrymeta”> och allt som finns inuti <div class=”entrymeta”>, det ska in ytterligare ett steg.

Här uppe då vid <div class=”entrybody”> så hade ju då korrekt indentering varit så här. Inte på en rad för vi vill ha så korta rader som möjligt. Samma sak med <div class=”datum”>, som är en egen kod som jag gjort, ska också se ut så här. Samma sak med <h3>. Ska se ut så här. En tagg ska vara på en rad, därefter så följer innehållet i taggen och därefter följer den avslutande taggen om det inte är så att det kommer mer innehåll.

Sen så har vi då avslutande div-taggen här. Det är därför som vi hela tiden ska hålla koll på att en avslutande div-tagg hela tiden ligger på en egen horisontell rad och att det är på samma vertikala linje som den inledande div-taggen. Så den här taggen, som är här, det är ju den div-taggen som avslutar <div class=”entrymeta”> så därför så ska den ligga på samma vertikala linje. Alltså den som är här. Härifrån och ner dit.

Sen så har vi en till div-tagg här och det är den som jag har avslutat <div class=”entry-box”> så då måste jag se till att de också ligger på samma vertikala linje. Detta är alltså för att undvika att man missar att avsluta en div för om man gör det så blir det generellt väldigt mycket problem. Sen så har vi den här endfor och den ska ju ligga i samma som den där där uppe. Nu ser jag lite dåligt men så ska det väl vara. Man hade önskat att det hade funnits vertikala linjer också. Nu ligger det rätt och sen därefter så börjar man med nästa element och detta är också för att man själv helt enkelt ska hålla koll på, för är det så att menyn hoppar ner då beror det ofta på att det saknas en div-tagg eller att det är en div-tagg för mycket eller vad det nu kan vara. Då måste man gå igenom och kolla, har jag verkligen avslutat <div id=”content”> och varför har jag en extra </div>-tagg här. Det är därför som det är så bra att göra på det här viset då. Så det rekommenderar jag verkligen alla att göra. Indentera upp sin kod så att man ser exakt vad som gör vad och vad som hör ihop med vad och vad som ingår i vad.

Det var den lilla lektionen jag tänkt ha för er idag. Ha det så gott. Hej hej.

24 år, läser till Webbutvecklare, driver eget företag inom design, grafik & SEO samt ett företag som designar posters. På fritiden skapar jag bloggar, hemsidor och gör andra projekt inom webb. Jag har bloggat sedan 2007 under namnet Sannas Rum och har också två egna Youtubekanaler.

Läs mina andra inlägg

1 comment

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *