Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

Hur bör html skrivas, tabbar osv för att se proffsigt ut

1
Skriv svar
Permalänk
Medlem
●

Hur bör html skrivas, tabbar osv för att se proffsigt ut

Tänkte fixa till min hemsida lite, eliminera den gamla dreamweaver-kod som fortfarande finns kvar på sina ställen osv osv.
Tänkte att man kanske då också skulle snygga till utseendet på koden så den inte bara står rakt upp och ner

Kikade runt lite på olika proffsiga sidor nyss och ser att alla verkar göra helt hur som helst. En del skiter helt i indrag/tabbar, medans andra använder det helt inkonsekvent.

Tex indrag efter <td> och <tr> men inte efter <table> eller <div> osv osv. Och ibland verkar det helt inkonsekvent som sagt med indrag lite här och var

Nån som vet om det finns nån sorts konvention för hur html bör se ut?
Eller iallafall nåt tips på hur det INTE ska se ut

Tänkte att man kanske skulle köra tabbar som indrag på varenda tag/sluttags-stycke, vilket kan bli jobbigt om det är många nivåer i koden, men iallafall enkelt att fixa, men vet inte om det är att rekommendera?

Edit: 2-3 mellanslag kanske är bättre....fast lite jobbigare förståss

Senast redigerat
Visa signatur

CCNA sedan juni 2006

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jag brukar försöka indentera varje nivå, se http://henrik.nyh.se:

  <div id="content">
  
    <div id="col1">
    
      <h2>Detaljer</h2>
      
        <table>
          <tr>
            <th>
              Född
            </th>
            <td>
              Tisdag 26 juli, 1983
            </td>
          </tr>
          <tr>
...

Sedermera har jag ställt in min redigerare (EditPad Pro) att indentera med 3 mellanslag. Förut blandade jag tabb och 2 mellanslag enligt vissa principer. Kuriosa.

Jag tror många som genererar sin HTML med typ PHP/ASP struntar i hur den blir, men jag brukar göra en ansats där också. Det blir ju lättare att felsöka om inget annat.

Visa signatur

Personlig webbplats Talman2Batmanizer Slänko Remindera
Greasemonkey-script Artwork of Johanna Öst

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Jag intenderar som Malesca, dvs vid alla element förutom html och body. Dock kladdar jag ut en tabb (4 mellanslag i min editerare) istället för 2 mellanslag.

Malesca: Det är svårare att intendera korrekt med scriptspråk, iallafall med PHP då den automatiskt tar bort lite mellanrum/radbrytningar/tabbar framför och bakom <?php ?>.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jag vet att det är svårt, och det gör väl som sagt att många inte bryr sig om hur den genererade HTML-koden blir strukturerad. Därtill har man ju fullt sjå med att indentera scriptspråkets kod snyggt.

Visa signatur

Personlig webbplats Talman2Batmanizer Slänko Remindera
Greasemonkey-script Artwork of Johanna Öst

Redigera
Citera flera Citera
Permalänk
Medlem
●

ok, jag brukar köra notepad för det mesta....inte så praktiskt alltid kanske men snabbt och enkelt att starta och inget tjafs

Menar ni att kod skriven i php tappar lite kod-struktur när den översätts och visas på sidan?
Inget jag tänkt på, fast jag brukar ju inte "visa källa" på sidorna för att kontrollera utan bara kolla mina egna kod-filer

Kanske kör med tabbar då i notepad. Stora blir dom men då blir det ju också tydligt (så länge det inte blir alltför många nivåer hehe)

Visa signatur

CCNA sedan juni 2006

Redigera
Citera flera Citera
Permalänk
Testpilot
●

Jag kör också lika dant som Malesca fast jag kör med en tabb vid varje nivå. Dock har jag ställt in EditPlus att den ska visa en tabb som 2 mellanslag så kollar man källkoden med ett annat program så ser det ju lite annorlunda ut.

Visa signatur

Kolla gärna in min RGB-LED-ljusstake i galleriet
[Gigabyte GA-Z97MX-Gaming 5][Intel Core i5 4690K][Corsair XMS3 16GB][Asus GeForce RTX 2060 Super Dual Evo OC]

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jag har ställt in (i texteditorn) så att tabb-tangenten gör (tre) mellanslag istället, så blir det lika överallt.

Senast redigerat
Visa signatur

Personlig webbplats Talman2Batmanizer Slänko Remindera
Greasemonkey-script Artwork of Johanna Öst

Redigera
Citera flera Citera
Permalänk
Medlem
●

jag använder alltid tabb i Dreamweaver...
blir alltid snyggast tycker jag

inte kul när kodblocken ligger ihop... mycket snyggare och lättare
att läsa om man använder ordentligt med "tabbar" och det är mycket
lätt att ta sig igenom koden och lägga till nya rader på rätt ställen

Redigera
Citera flera Citera
Permalänk
Medlem
●

Usch, att tabb-tangenten gör mellanslag är bland det jobbigaste som finns i min mening :). Är ju omöjligt att modifiera indenteringarna efteråt :(. Kanske är för att jag har tabb = tabb, medan koden jag fick var med mellanslag? Kanske det funkar bättre om man ställer in samma inställningar som koden är skriven i.. Jaja.

Visa signatur

CTMod Developer (WoW UI Mod)
http://www.CTMod.net

Redigera
Citera flera Citera
Permalänk
Medlem
●

I EditPad Pro kan man indentera med tabb eller Ctrl+I och "utdentera" med Shift+Tab eller Ctrl+O. Inte så svårt att modifiera med andra ord.

Visa signatur

Personlig webbplats Talman2Batmanizer Slänko Remindera
Greasemonkey-script Artwork of Johanna Öst

Redigera
Citera flera Citera
Permalänk
Medlem
●

Mycket enklare att trycka backspace i min mening dock ;).

Visa signatur

CTMod Developer (WoW UI Mod)
http://www.CTMod.net

Redigera
Citera flera Citera
Permalänk
Medlem
●

samma sak med Dreamweaver... Tabb = Tabulera framåt... Shift-Tabb = Tabulera bakåt...

fast tabb är alltid tabb i DW... kanske går o ställa in... men varför ??

Redigera
Citera flera Citera
Permalänk
Medlem
●

Indenterar för varje nivå, det är väl det vanligaste sättet. Gör man inte det så har man ju ingen ordning på koden för fem öre.

Visa signatur

"Kärlek är sådant som växer på träd och ibland trillar ner."
nicklas.gummesson.net

Redigera
Citera flera Citera
Permalänk
Medlem
●

En tabb kommer identiferas olika beroende på texteditor, och användarkonifuguration

Redigera
Citera flera Citera
Permalänk
Medlem
●
<?php 
$var = "sträng";
$var = "sträng";
$var = "sträng";

function funktion() {
    Indenterat
}

if() {
    Indenterat
}

for() {
    Indenterat
}

if() {
    if() {
        Indenterat
    }
}

echo $var
echo $var
echo $var
?>

Brukar väl jag köra.

Visa signatur

//Iceberg - In Trance We Trust!
www.iceberg.se

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Citat:

Ursprungligen inskrivet av iceberg 

<?php 
$var = "sträng";
$var = "sträng";
$var = "sträng";

function funktion() {
    Indenterat
}

if() {
    Indenterat
}

for() {
    Indenterat
}

if() {
    if() {
        Indenterat
    }
}

echo $var
echo $var
echo $var
?>

Brukar väl jag köra.

Hur bör html skrivas, tabbar osv för att se proffsigt ut

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jag är alltid noga med att alltid avsluta t ex en tagg på precis samma ställe som den började, samt kommentarer där en viss div slutar. T ex:

      <div class="file" style="width: 70px;">
        <font class="main">
          <b>15 kB</b>
        </font>
      </div>

På så vis kan man sätta markören vid en </div> och följa den uppåt för att hitta taggen. Det är bra tycker jag

Redigera
Citera flera Citera
Permalänk
Medlem
●

Ok, jag gör nog så att jag kör med vanliga tabbar, det verkar inte vara fel iallafall, även om det blir långa indenteringar men det blir ju också tydligt då jämfört med ett par fjuttiga mellanslag för varje nivå.

Tackar

Visa signatur

CCNA sedan juni 2006

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av Krunaldo
En tabb kommer identiferas olika beroende på texteditor, och användarkonifuguration

men det visas ändå korrekt i 90% av alla texteditorer... fast enligt programmets egna
inställningar... det är ju inte som så att en rad får längre indentering, heter det verkligen så?,
än en annan som har lika många tabb

Citat:

Ursprungligen inskrivet av Fr0hike
Jag är alltid noga med att alltid avsluta t ex en tagg på precis samma ställe som den började, samt kommentarer där en viss div slutar. T ex:

      <div class="file" style="width: 70px;">
        <font class="main">
          <b>15 kB</b>
        </font>
      </div>

På så vis kan man sätta markören vid en </div> och följa den uppåt för att hitta taggen. Det är bra tycker jag

det är så ^^ jag menade fast med tabb istället då

Redigera
Citera flera Citera
Permalänk
Medlem
●

CC01: Jo, jag vet.
Men det började tjatas om php så jag skrev lite där istället.
Jag indenterar html med en tabb per underelement anyways.

Visa signatur

//Iceberg - In Trance We Trust!
www.iceberg.se

Redigera
Citera flera Citera
Permalänk
Medlem
●
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html;charset=iso-8859-1"/>
	<title>p0pz.com</title>
	<link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body>
	<div id="content">
		<div id="space"></div>
		<div id="logga">
			<span class="status">popz.com > Start</span>	
		</div>
		<div id="space"></div>
		<div id="meny">
			<span class="rubrik">Navigering</span>
			<ul>
				<li></li>
			</ul>
		</div>
		<div id="main"></div>
		
	</div>	
</body>
</html>

så brukar det se ut när jag skriver (x)html

nån sokm vet en editor som e lika enkel och clean som notepad fast man kan ha olika syntax highlightening på koden?

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem
●

nystan: Ett förslag, lägg till ett space mellan taggen och / (eller hur jag ska uttrycka mig) i xhtml-taggarna. <meta /> istället för <meta/> och <br /> istället för <br/>. Detta för att koden ska bli mer kompitabel i olika läsare.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jag använder tabbar inställt på att visa 4 mellanslag i Editplus, då jag tycker <4 är för litet och 4> för mycket

Koden jag skriver brukar se ut lite olika, saker som head-info, logo-diven, menu-listan och footer-diven är sånt jag intenderar, medan huvudinnehållet alltid ligger lägnst till vänster, jag intenderar alltså inte vid <body>, #wrapper eller liknande, utan det är först vid huvudinnehållet indentering gäller om man bortser från ovanstående delar.

om ni inte förstår vad jag menar, ta en titt på http://vigge.ath.cx , så får ni se hur jag brukar göra

Redigera
Citera flera Citera
Permalänk
Avstängd
●

En tabbb = 8 mellanslag annars har ni en dålig editor! och om det inte passar er så har ni en dålig editor.

Visa signatur

lyckegard: Ditt beteende i denna tråd gör att du skrapar ihop till en varning.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av lyckegard
En tabbb = 8 mellanslag annars har ni en dålig editor! och om det inte passar er så har ni en dålig editor.

En tab=valfritt antal mellanslag, annars har ni en dålig editor.
Jag anser att man alltid ska använda tab för indentering, då kan alla användare själv välja hur mycket indenteringen ska vara på, personligen kör jag med 4, andra kanske vill köra med 8 (som ovanstående) eller 3. Det ska vara upp till var och en.

Själv brukar jag börja med att skriva allt dåligt indenterat medans jag skriver första gången, sen indenterar jag allt på lämpligt vis, det varierar beroende på vad för kod det är. Genererad kod brukar jag bara se till att den har radbrytningar.

Visa signatur

Python-IRC på svenska: #python.se

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av nystan 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html;charset=iso-8859-1"/>
	<title>p0pz.com</title>
	<link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body>
	<div id="content">
		<div id="space"></div>
		<div id="logga">
			<span class="status">popz.com > Start</span>	
		</div>
		<div id="space"></div>
		<div id="meny">
			<span class="rubrik">Navigering</span>
			<ul>
				<li></li>
			</ul>
		</div>
		<div id="main"></div>
		
	</div>	
</body>
</html>

så brukar det se ut när jag skriver (x)html

nån sokm vet en editor som e lika enkel och clean som notepad fast man kan ha olika syntax highlightening på koden?

det ser genererat ut:)

en mkt bra editor, (den bästa jag testat) är den i adobeGolive.... lite dyrt kanske...

Visa signatur

www.hoglind.org | roligsida | braprogram? | Boka hotell?

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av nystan
nån sokm vet en editor som e lika enkel och clean som notepad fast man kan ha olika syntax highlightening på koden?

Jag har inte stött på någon mer ren och samtidigt funktionsrik editor än SciTE.
Den känns lite som Media Player Classic: har allt, utan att kännas bloatad.

Visa signatur

Python-IRC på svenska: #python.se

Redigera
Citera flera Citera
Permalänk
Medlem
●

näj det har jag skrivet själv

sciTE värkade ju intressant, det funkade ju ganska bra också tacksåmkt!

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av Sebastianj
Jag anser att man alltid ska använda tab för indentering, då kan alla användare själv välja hur mycket indenteringen ska vara på, personligen kör jag med 4, andra kanske vill köra med 8 (som ovanstående) eller 3. Det ska vara upp till var och en.

Det tänkte jag aldrig på, men det är ju sant, och gör ju tab 10ggr bättre än att sitta och trycka mellanslag
Tur jag bestämde mig för att tabba, och nu har hela hemsidan fått finare kod (och helt ny design också i samma veva....jobbig helg blev det hehe)

Tack för all feedback

Visa signatur

CCNA sedan juni 2006

Redigera
Citera flera Citera
1
Skriv svar