Vinnaren i pepparkakshustävlingen!
  1. Dator och IT
  2. Systemutveckling
  3. Webbutveckling och javascript

Varför funkar inte denna HTML-kod?

Svara
  • 1
  • 2
2017-10-02, 17:25
  #1
rudimentarperson
Medlem
Det är något som är fel med den, men jag hittar inte vad jag gjort fel, hjälp snälla, blir frustrerad..

Min lärare sa till mig att koden var något som hetter "bad practice" och att jag behövde ta bort dessa..
Men jag hittar inga svagheter som jag tycker att jag behöver eliminera (men uppenbarligen finns de)..

<html lang="en">
<head>
<title>OMG HTML</title>
</head>
<body>
<div id="container" style="width:1000px; margin-left:auto; margin-right:auto">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Cats in hats</h1>
</div>
<div id="menu" style="background-color:#FFD700; width:10%;float:left;">
<b>Menu</b><br>
* Cats<br>
* Hats<br>
* Cats &amp; Hats
</div>
<div id="content" style="background-color:#EEEEEE;width:90%;float:left;"> Content goes
here </div>
<div id="footer" style="background-color:#FFA500; clear:both; text-align:center;">
Footer
</div>
</div>
</body>
</html>
__________________
Senast redigerad av rudimentarperson 2017-10-02 kl. 17:54.
Citera
2017-10-02, 17:37
  #2
RulleRivare
Medlem
Vad förväntar du dig att den ska göra? Vad gör den istället?
Citera
2017-10-02, 17:52
  #3
rudimentarperson
Medlem
Citat:
Ursprungligen postat av RulleRivare
Vad förväntar du dig att den ska göra? Vad gör den istället?

Det var dåligt förklarat av mig..

Min lärare sa till mig att koden var något som hetter "bad practice" och att jag behövde ta bort dessa..
Men jag hittar inga svagheter som jag tycker att jag behöver eliminera (men uppenbarligen finns de)..
Citera
2017-10-02, 19:12
  #4
xituno
Medlem
xitunos avatar
Det första jag skulle ändra på är att använda CSS istället för att ange style.

Det andra är att ändra din meny till att använda
HTML-kod: 
<ul>
  <li>Cats</li>
  <li>Hats</li>
  <li>Cats &amp; Hats</li>
</ul>
Citera
2017-10-02, 19:49
  #5
Nich
Medlem
Din lärare syftar förmodligen främst på att du skriver CSS-koden inline, det vill säga i style-attributet. Det är att rekommendera att skriva CSS i en extern fil.
Citera
2017-10-02, 20:13
  #6
rudimentarperson
Medlem
Citat:
Ursprungligen postat av Macatho
DE

Citat:
Ursprungligen postat av xituno
Det första jag skulle ändra på är att använda CSS istället för att ange style.

Det andra är att ändra din meny till att använda
HTML-kod: 
<ul>
  <li>Cats</li>
  <li>Hats</li>
  <li>Cats &amp; Hats</li>
</ul>

Stort tack!

Och varför ändrar jag denna till <li>?
Citera
2017-10-02, 20:18
  #7
xituno
Medlem
xitunos avatar
Citat:
Ursprungligen postat av rudimentarperson
Stort tack!

Och varför ändrar jag denna till <li>?

<ul> = unorded list (finns även <ol> = orded list, numrerad lista)
<li> = list item, de saker som finns i listan (samma element används i både <ul> och <ol>)

Varför? För att det är en lista du har, och då bör du göra det till en lista istället för att stapla upp dem och radbryta med <br>.

Om du tror att du har behov av att använda <br> gör du nästan alltid fel.
Citera
2017-10-02, 20:24
  #8
rudimentarperson
Medlem
Citat:
Ursprungligen postat av xituno
<ul> = unorded list (finns även <ol> = orded list, numrerad lista)
<li> = list item, de saker som finns i listan (samma element används i både <ul> och <ol>)

Varför? För att det är en lista du har, och då bör du göra det till en lista istället för att stapla upp dem och radbryta med <br>.

Om du tror att du har behov av att använda <br> gör du nästan alltid fel.

Bra förklaring!

Jag måste även addera <html> först och ta bort en del <div/> (plural) också va?
Citera
2017-10-02, 20:51
  #9
xituno
Medlem
xitunos avatar
Citat:
Ursprungligen postat av rudimentarperson
Bra förklaring!

Jag måste även addera <html> först och ta bort en del <div/> (plural) också va?

Du har redan <html> i din kod... Antalet <div> taggar är ok. Eftersom du är nybörjare antar jag att du inte känner till flexbox ännu, vilket du hade haft nytta av med din layout.

Citera
2017-10-02, 21:43
  #10
recyclebin2
Medlem
Citat:
Ursprungligen postat av Nich
Din lärare syftar förmodligen främst på att du skriver CSS-koden inline, det vill säga i style-attributet. Det är att rekommendera att skriva CSS i en extern fil.
Bara för du lyckats lära dig att man kan använda externa resurser betyder det inte att du kan någonting.. Vill man ha en så snabb sida som möjligt så vill man inte ha externa resurser.. filhantering betyder alltid sökning på disk vilket ger mertid.. även om det kommer cachas.. tönt
Citera
2017-10-03, 16:31
  #11
Nich
Medlem
Citat:
Ursprungligen postat av recyclebin2
Bara för du lyckats lära dig att man kan använda externa resurser betyder det inte att du kan någonting.. Vill man ha en så snabb sida som möjligt så vill man inte ha externa resurser.. filhantering betyder alltid sökning på disk vilket ger mertid.. även om det kommer cachas.. tönt

Charmig.
Du vet också att det inte är god praktik att skriva CSS inline, så vad är problemet? Sedan behöver man såklart nödvändigtvis inte ha en extern fil. Slarvigt uttryckt av mig.
Citera
2017-10-04, 12:58
  #12
ecli
Medlem
Koden är fruktansvärt fult skrivet och inte semantisk för fem öre. <br> är inget man ska använda alls utan fixa margin och padding via CSS istället, om det inte är ett alternativ kör style direkt på dina element.

<!DOCTYPE html>
<html>
<head>
<title>Din titel</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="">
</head>
<body>
<header>
<h1>Cats in hats</h1>
</header>
<main>
<ul>
<li>Cats</li>
<li>Hats</li>
<li>Cats &amp; Hats</li>
</ul>

</main>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
Citera
Svara
  • 1
  • 2

Stöd Flashback

Flashback finansieras genom donationer från våra medlemmar och besökare. Det är med hjälp av dig vi kan fortsätta erbjuda en fri samhällsdebatt. Tack för ditt stöd!

Stöd Flashback