Avatar billede per1291 Nybegynder
10. august 2008 - 11:09 Der er 12 kommentarer og
1 løsning

Indrykninger i en HTML-kode

Baggrund:
En HTML-kode kan skrives mere eller mindre kryptisk, alt efter om man ønsker at gøre det svært eller let for andre at gennemskue den.
Hvis koden er let for andre at forstå, er den også let for en selv at forstå – og at rette i senere.
En af de ting som kan gøre HTML-koden lettere at forstå, er at indsætte indrykninger som afspejler kodestrukturen.

Eksempel på en kode uden indrykninger:

<div id=overskrift><span><h1>En overskrift</h1></span>Tryk venligst på denne knap:<br><input type=button value=”Klik her”><table><tr><td>Dette er en tabel</td></tr></table></div>

Samme kode opsplittet i linjer:

<div id=overskrift>
<span>
<h1>
En overskrift
</h1>
</span>
Tryk venligst på denne knap:
<br>
<input type=button value=”Klik her”>
<table>
<tr>
<td>
Dette er en tabel
</td>
</tr>
</table>
</div>

Og koden forsynet med indrykninger:

<div id=overskrift>
<span>
  <h1>
  En overskrift
  </h1>
</span>
Tryk venligst på denne knap:
<br>
<input type=button value=”Klik her”>
<table>
  <tr>
  <td>
    Dette er en tabel
  </td>
  </tr>
</table>
</div>

Jeg søger et Javascript-program som indsætter disse indrykninger automatisk.
Programmet må gerne kunne foretage indrykninger i Javascript også.
Hvis det ikke findes, vil jeg selv forsøge at lave det.

Med venlig hilsen
Per Kejser-Andersen
Avatar billede keysersoze Guru
10. august 2008 - 11:53 #1
hvor er det du vil ændre i koden? i en editor eller det der sendes til klienten?
Avatar billede per1291 Nybegynder
10. august 2008 - 12:04 #2
I en editor.
Jeg havde engang adgang til et program der formaterede Pascal-kode på den måde.
"Spruce" hed det.
Det er nyttigt når man læser andres kode.

Hilsen Per
Avatar billede per1291 Nybegynder
10. august 2008 - 12:20 #3
Nej, jeg ved ikke om det skal være en editor - hvis man derved forstår et program som også kan bruges til manuel redigering.
Der var forresten osse et "Anti-Spruce" program - det hed måske "Trim".
Det fjernede alt "overflødigt" whitespace.

Hilsen Per
Avatar billede olebole Juniormester
10. august 2008 - 13:08 #4
<ole>

Selvom indrykninger er en rigtig god ting, så er det dog en ligegyldig detalje i forhold til dit eksempel med indrykket kode. Dels er koden i eksemplet ikke valid - og dels vil den resultere i utilsigtet rendering.

Du kan under ingen omstændigheder have et h1-element liggende i et span. Spannet er et inline element - og sådan et kan ikke indeholde et block element.

Dernæst vil koden:
  <td>
    Dette er en tabel
  </td>

- resultere i ekstra luft i bunden af cellen, når siden vises i IE. Hvis det sidste indhold i et block eller 'block-agtigt' element er inline-indhold, skal block elementets sluttag trækkes helt op i slutningen af indholdet:
  <td>
    Dette er en tabel</td>

Ellers vil der som sagt introduceres noget ekstra luft under indholdet.

Hvad indrykninger angår, så er det ikke noget, man laver efter koden er skrevet. Der bør rykkes ind, _mens_ koden skrives.
Indrykning er noget, man selv foretager - forstået på den måde, at når man tabber en linje, tabber programmet selv til samme position, når der skiftes linje næste gang ... og det gør enhver seriøs editor. De fleste editors kan også tabbe blokke af tekst både ind og ud.

Hvormeget og hvor der skal tabbes/indrykkes er et privat anliggende, som afviger fra koder til koder, så det ville være noget rod, hvis editoren selv står for det. Dog er det sådan, at hvis du i f.eks. DreamWeaver indsætter en tabel i design-view, vil koden automatisk være indrykket i kode-view.
Skriver man derimod selv koden, må man altså delvist selv tabbe, hvilket de fleste kodere nok foretrækker  ;o)

/mvh
</bole>
Avatar billede olebole Juniormester
10. august 2008 - 13:10 #5
Du kunne prøve at kikke på HTML Tidy:
    http://tidy.sourceforge.net/
Avatar billede olebole Juniormester
10. august 2008 - 13:15 #6
Jeg lavede selv engang en 'kodevaskemaskine' til brug sammen med online editors:
    http://www.dengodekode.dk/laundry/

Den er ikke perfekt, men den virker ret okay. Dog vil du nok ikke kunne bruge den direkte i din situation uden lidt ændringer  =)
Avatar billede per1291 Nybegynder
11. august 2008 - 19:28 #7
En kender vil nok påskønne din kode mere end jeg. Jeg har kun lært Javascript vha. klippe-klistre, og de rigtige eksperter kender mange flere hjørner af sproget end jeg.

Du påpeger nogle fejl i mit eksempel. Fint nok, jeg var ikke opmærksom på dem. Men i virkeligheden forestiller jeg mig en programstump, som kun bekymrer sig om en overfladisk del af syntaksen. Den skal ikke finde fejl.

Indrykningsprogrammet skal kunne skelne mellem start-tag og slut-tag (f.eks. <h1> og </h1>).

Men programmet må for min skyld gerne lave indrykninger i en fejlbehæftet kode som denne:

<table><h1></table></h2><dummy></dymmu>

Der skal jo nok laves en lille ordbog ligesom i dit program: Hvilke start-tags kræver et slut-tag? (Tilfældet <p> må behandles specielt, fordi </p> kan bruges men ikke er obligatorisk.)

Hilsen Per
Avatar billede roenving Novice
12. august 2008 - 00:25 #8
-- hrm, nu begynder vi altså også at nærme os hvilken flavour din mark-up-kode kan indeholde, for undgå p-lukketags kan du zq kun i de rigtig gamle html-udgaver (omend det accepteres i html4.01 transitional, men absolut ikke kan anbefales !-)
Avatar billede per1291 Nybegynder
14. august 2008 - 14:48 #9
Hej roenving,

Du glemte at fortælle hvorfor det ikke kan anbefales.

Hilsen Per
Avatar billede roenving Novice
15. august 2008 - 01:23 #10
-- fordi det er deprecated (hvilket gælder _alle_ tags med indhold, fordi de ikke lever op til den generelle definition af taggede koder !-)

-- begrebet deprecated skal nærmest oversættes til 'bør ikke bruges, da det principielt ikke lever op til forudsætningerne i denne standard, men først vil blive taget endeligt ud i forbindelse med en kommende/nyere/mere udviklet standard' ...

-- og allerede html4.01 strict, der er defineret samtidigt, tillader ikke åbne tags med indhold ...
Avatar billede per1291 Nybegynder
15. august 2008 - 19:57 #11
Okay, roenving - tak for info.

Det er nyttig viden, at mine hjemmesider på et tidspunkt måske ikke længere kan læses, hvis jeg fortsætter med 4.01 loose frem for 4.01 strict.

Jeg har nu siddet og puslet med én af mine sider, for at få det samme layout frem i strict. Men det er godt nok et hulens bøvl, og jeg ved ikke rigtig hvor meget energi jeg vil bruge på det - for de ser jo rigtige ud i browseren i forvejen. Nå, jeg fortsætter nok alligevel - en anden nørd har tidligere kritiseret mig for at bruge loose, men først nu har jeg fået en begrundelse. Jeg synes det virker lidt arrogant blot at sige: "Lad være med dét" - uden at fortælle hvorfor. Som om jeg burde vide alting på forhånd.

Et HTML "Spruce-program" kunne sagtens koncentrere sig om ikke-loose HTML-definitioner. Det ville gøre programmeringen en hel del nemmere.

Men derefter kommer Javascript-formateringen. Og her ville jeg egentlig gerne give brugeren valgmulighed imellem eksperternes og min egen foretrukne "indryknings-metode". Som nævnt har jeg lært en del Pascal, og her er det sædvane at lade et "begin" have samme indrykning som det tilhørende "end". Men den mest udbredte Javascript-typografi lader IKKE et "{" have samme indrykning som det tilhørende "}". F.eks. skriver eksperterne således:

function xxx() {
[...]
}

- hvilket jeg synes er mindre informativt.

Hilsen Per
Avatar billede roenving Novice
16. august 2008 - 01:32 #12
Tjah, et godt spørgsmål, men egentlig synes jeg, at det giver den bedste information at lave indrykning på den måde, for det viser, at den pågældende funktion er afsluttet på det niveau, hvor den er påbegyndt, selve deklarationen bør vel ikke skabe en indrykning ...

-- f.eks. kan man have en deklaration af en funktion, hvor der er rigtig mange parametre, og lige efter det en funktion uden parametre, de bør vel ikke syntaktisk adskilles med en tilfældig indrykning ?-)

-- skriver du f.eks. i Visual Studio, rykkes funktions-start-Tuborgen ned på næste linje, hvilket i den sammenhæng er ganske rimeligt, men bare et tegn (eller flere !-) i overskud i webkode, der skal sendes til en browser !o]
Avatar billede per1291 Nybegynder
23. november 2009 - 09:49 #13
Jeg svarer lige selv for at få dette gamle indlæg ud af verden.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester