HTML är omöjligt, kodning är omöjligt! Behöver hjälp!

Avdelningen för webbrelaterad programmering och grafisk design.
Post Reply
User avatar
meminus
Posts: 1055
Joined: 2003-01-18 2:02:36
Location: Snål-land
Contact:

HTML är omöjligt, kodning är omöjligt! Behöver hjälp!

Post by meminus »

Hej!

HTML är verkligen inte min grej... försöker skapa en basic-index sida med EN bild och TVÅ länkar.... No-Can-Do. Det blir ingenting av det...jag orkar inte hålla på mer helt enkelt ;(

Någon som har lite lust att hjälpa till? Det borde gå på 2-3 minuter för en som vet vad han gör...


Image
Så här skulle jag vilja att det slutliga resultatet blev (ungefär)

Där "meminus blog" ska vara länkat till:
http://www.meminus.co.uk/meminus

Där "Sassas blog" ska vara länkat till:
http://www.meminus.co.uk/sassa

Bilden (Logotypen) hittar ni här:
http://www.meminus.co.uk/meminus_skullflower.png

Jag skulle bli så lättad och så tacksam om någon kunde fixa ihop en, simpel, "HTML-INDEX-fil" till mig.
"Varje gång en PC dör får en ängel sina vingar"
"Drivrutiner är rutiner som driver en till vansinne"
User avatar
Raspberry
Posts: 1808
Joined: 2006-06-16 19:51:58

Post by Raspberry »

Index.htm

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>meminus.co.uk</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link href="mall.css" rel="stylesheet" type="text/css">
 </head>
 <body>
  <table width="100%" height="100%">
   <tr>
    <td valign="top" height="50%" width="20%">
     <img src="http://www.meminus.co.uk/meminus_skullflower.png">
    </td>
    <td valign="centre" height="50%" width="80%">
     <a href="http://www.meminus.co.uk/meminus">Meminus Blog</a><p>
     <a href="http://www.meminus.co.uk/sassa">Sassas Blog</a>
    </td>
   </tr>
   <tr>
    <td colspan="2">
    </td>
   </tr>
  </table>
 </body>
</html>
mall.css (bara att kopiera in i anteckningar, och spara som mall.css i samma mapp som Index.htm)

Code: Select all

a:link {color: #000000; text-decoration: none; font-family: Verdana [bara att ändra font här];}
a:hover {color: #000000; font-weight: bold; font-family: Verdana [bara att ändra font här];}
Denna kod ska nog fungera för dig, utan att göra det för komplicerat och så :P
Last edited by Raspberry on 2008-11-05 23:14:14, edited 2 times in total.
Win7 Ulti x64 | 22" Wide | E8400@3.0GHz | 4GB | HD4850 | Raptor 34GB; Spinpoint F3 1TB; My Book Essential 1TB; My Passport Essential 250 GB; Barracuda 750 GB
kqr
Posts: 3077
Joined: 2005-09-05 17:23:20
Location: Stockholm

Post by kqr »

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>meminus.co.uk</title>
    <style type="text/css">
      a:link {
        color: #000000;
        text-decoration: none;
        font-family: Verdana;
      }
      a:hover {
        color: #000000;
        font-weight: bold;
        font-family: Verdana;
      }
      a:active {
        color: #000000;
        font-weight: bold;
        font-family: Verdana;
      }
      a:visited {
        color: #000000;
        font-family: Verdana;
      }

      table {
        margin-left: 100px;
        margin-top: 50px;
      }

      .left_td {
      }

      .middle_td {
        width: 50px;
      }

      .right_td {
        vertical-align: top;
      }
    </style>

 </head>
 <body>
  <table>
   <tr>
    <td class="left_td">
     <img src="http://www.meminus.co.uk/meminus_skullflower.png" alt="Meminus Skullflower" />
    </td>
    <td class="middle_td">&nbsp;</td>
    <td class="right_td">
     <p><br />&nbsp;<br /><a href="http://www.meminus.co.uk/meminus">Meminus Blog</a><br />
     <a href="http://www.meminus.co.uk/sassa">Sassas Blog</a></p>
    </td>
   </tr>
  </table>
 </body>
</html>
Här är min version av det hela. Bara en fil, och dessutom är den validerad som strikt xhtml 1.0. (:

(Och så snyggade jag till länkarna lite. ;))
User avatar
madr
Posts: 998
Joined: 2004-08-24 11:12:39
Contact:

Post by madr »

http://www.456bereastreet.com/archive/2 ... practices/
http://www.456bereastreet.com/archive/2 ... ot_enough/

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>The online home of Meminus and Sassa, blogs included | Meminus.co.uk</title>
<meta name="description" content="The online home of Meminus and Sassa, blogs included">
<meta name="language" content="English, GB">
<link rel="shortcut icon" type="image/ico" href="/favicon.ico">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
	<h1><img src="http://www.meminus.co.uk/meminus_skullflower.png" alt="meminus.co.uk" width="300" height="278"></h1>
	<ul>
		<li><a href="/meminus">Meminus blog</a></li>
		<li><a href="/sassa">Sassas blog</a></li>
	</ul>
</body>
</html>

Code: Select all

/*=index.css*/
* {margin:0;padding:0}

body {
	padding:13px 28px;
	font:normal 1.2em/1.4 "Okänd font","Gill Sans",Geneva,"Trebuchet MS","Lucida Grande",sans-serif;
	text-transform:capitalize;
}

h1 {
	float:left;
	margin:0 95px 0 0;
}

ul {
	list-style:none;
	margin:60px 0;
}

a:link, a:visited, a:hover, a:active {
	color:#444;
	text-decoration:none;
}

a:active {
	position:relative;
	top:2px;
	left:2px;
}

a:visited:after {
	content:" √";
	padding:0 5px;
	color:#ccc;
}

a:hover:after, a:active:after {
	content:" »";
	padding:0 5px;
	color:#a33;
}
antlion: 3,2 GHz i7 | 32GB | 180GB+120GB SSD SATA III | 2TB SATA III | Dell u2410 | GF 5600ti Arch linux + Win 7
kqr
Posts: 3077
Joined: 2005-09-05 17:23:20
Location: Stockholm

Post by kqr »

User avatar
meminus
Posts: 1055
Joined: 2003-01-18 2:02:36
Location: Snål-land
Contact:

Post by meminus »

Fy faan va bra det blev! Tack så hemskt mycket för hjälpen - helt oslagbart! Tusen tack alla! :D
"Varje gång en PC dör får en ängel sina vingar"
"Drivrutiner är rutiner som driver en till vansinne"
User avatar
madr
Posts: 998
Joined: 2004-08-24 11:12:39
Contact:

Post by madr »

kr1sse wrote:
Intressant läsning, om än lite off-topic. (:
Kände mig tvungen när du validerar mot elitist-doctype samtidigt som du bryter mot alla best practices. Inget illa ment.
antlion: 3,2 GHz i7 | 32GB | 180GB+120GB SSD SATA III | 2TB SATA III | Dell u2410 | GF 5600ti Arch linux + Win 7
kqr
Posts: 3077
Joined: 2005-09-05 17:23:20
Location: Stockholm

Post by kqr »

madr wrote:
kr1sse wrote:
Intressant läsning, om än lite off-topic. (:
Kände mig tvungen när du validerar mot elitist-doctype samtidigt som du bryter mot alla best practices. Inget illa ment.
Misstänkte att du menade något sånt. Självklart strävar jag efter att skriva så snyggt som möjligt, så jag undrar vad du ser som osnyggt? :P
(Förutom att jag inte kör separat fil för css.)
User avatar
Peter Wall
Hedersbit
Posts: 7026
Joined: 2002-03-08 0:52:56
Location: Stockholm
Contact:

Post by Peter Wall »

Jag tänker inte uttala mig om vad madr ser men om du vill även ha min kritik så är det tabellstrukturen som bara ska användas vid presentation av data som ska vara i just rutnät likt en tabell. Dessutom positionerar du saker med hjälper av brytpunkter och tomma rader. I din CSS har du satt font-family'n lite överallt till Verdana och hållt dig till en, om du ser på madr's lösning är den även bättre där.

O andra sidan vet jag inte varför madr valde att lägga styrningen av img-taggen direkt i html-filen. Men det var ett tag sen jag hackade html.

Vi har alla vår egna val när vi skapar en sida, svårt att vara enhetlig när nästan ingen av webbläsarna eller målgrupperna är det. Sålänge man håller sig ifrån tabeller där det inte behövs och frames som aldrig behövs så är jag glad :)
Diplomerad webbutvecklare
Microsoft Certified Professional Windows 2003
Microsoft Certified Technology Specialist Windows Vista
"Did you know kidneys and applesauce are a delicacy in Sweden? I'm gonna get my applesauce back!"
User avatar
madr
Posts: 998
Joined: 2004-08-24 11:12:39
Contact:

Post by madr »

kr1sse wrote:
madr wrote:
kr1sse wrote:
Intressant läsning, om än lite off-topic. (:
Kände mig tvungen när du validerar mot elitist-doctype samtidigt som du bryter mot alla best practices. Inget illa ment.
Misstänkte att du menade något sånt. Självklart strävar jag efter att skriva så snyggt som möjligt, så jag undrar vad du ser som osnyggt? :P
(Förutom att jag inte kör separat fil för css.)
Det är inte fråga om osnyggt eller ej. Du använder tabeller för layout, vilket är dåligt exempel på bra semantik. <table> ska hantera tabulär data, punkt slut. Du har i din lösning uppmärkt meminus startsida som en tabell, vilket den inte är.

Sidan meminus ville ha innehåller två komponenter: en logo och en meny. Logon blir en <h1> då den är "huvudrubrik"; den har högst prioritet och identifierar löpet. Genom att lägga den i en bild med alt-text kommer det alltid finnas en rubrik på sidan, avsett avsaknad av css- och bildsstöd.

Då menyn innehåller en lista över val oberoende på ordning, är en <ul> det korrekta valet.

Det är semantiskt och beskriver innehållet på meminus startsida.
antlion: 3,2 GHz i7 | 32GB | 180GB+120GB SSD SATA III | 2TB SATA III | Dell u2410 | GF 5600ti Arch linux + Win 7
User avatar
Peter Wall
Hedersbit
Posts: 7026
Joined: 2002-03-08 0:52:56
Location: Stockholm
Contact:

Post by Peter Wall »

\o/

-ge madr en kanelbulle-
Diplomerad webbutvecklare
Microsoft Certified Professional Windows 2003
Microsoft Certified Technology Specialist Windows Vista
"Did you know kidneys and applesauce are a delicacy in Sweden? I'm gonna get my applesauce back!"
User avatar
Raspberry
Posts: 1808
Joined: 2006-06-16 19:51:58

Post by Raspberry »

Haha, får hålla med om att madrs sida var bra ^^
Men har en fråga, jag tar kursen Webbdesign nu i skolan, så vet inte så mycket, så jag undrar hur du positionerade länkarna utan tabell (inte lärt mig tillräkligt för att se det direkt i koden)?
Win7 Ulti x64 | 22" Wide | E8400@3.0GHz | 4GB | HD4850 | Raptor 34GB; Spinpoint F3 1TB; My Book Essential 1TB; My Passport Essential 250 GB; Barracuda 750 GB
kqr
Posts: 3077
Joined: 2005-09-05 17:23:20
Location: Stockholm

Post by kqr »

Madr && Peter: Lite av det ni påpekade (främst tabell-utformningen) var för att göra det lättförstått för en som just börjat webdesign. Fast när jag rannsakar mig inser jag att jag förmodligen hade använt divs om jag gjort det mer seriöst, vilket ju inte är lika semantiskt som det du skrev. Något som inte tilltalar mig är att du positionerar saker genom att använda marginaler. Att du dessutom inte använder klasser utan låter alla taggar av samma typ bli på det viset styrda ter sig för mig främmande, eftersom det kan lätt hända att man vill lägga till en till rubrik alt. oordnad lista, som då får samma egenskaper. Men finns det någon speciell anledning för det? Eller, någon speciell anledning att /inte/ använda klasser/identifiers?

Oavsett trettio guldstjärnor till dig madr, du har fått mig att tänka på ett nytt sätt.
*Börjar gå igenom de sidor jag har efter eventuella fula grejer*

Raspberry wrote:Haha, får hålla med om att madrs sida var bra ^^
Men har en fråga, jag tar kursen Webbdesign nu i skolan, så vet inte så mycket, så jag undrar hur du positionerade länkarna utan tabell (inte lärt mig tillräkligt för att se det direkt i koden)?
Genom att sätta marginal till vänster om dem, så de hamnade en bit från.
User avatar
madr
Posts: 998
Joined: 2004-08-24 11:12:39
Contact:

Post by madr »

kr1sse wrote:Något som inte tilltalar mig är att du positionerar saker genom att använda marginaler.
Det beror helt på hur man är orienterad. Jag har jobbat med floats ett tag och är bekväm med det, därför valde jag att göra så.

En långsökt fördel är att marginaler och floats bryter snyggare vid små skärmar, små fönster eller låg upplösning. Kan vara avgörande i vissa uppdrag, men triviala i andra. Troligtvis trivialt i detta fall.
kr1sse wrote:Att du dessutom inte använder klasser utan låter alla taggar av samma typ bli på det viset styrda ter sig för mig främmande, eftersom det kan lätt hända att man vill lägga till en till rubrik alt. oordnad lista, som då får samma egenskaper. Men finns det någon speciell anledning för det? Eller, någon speciell anledning att /inte/ använda klasser/identifiers?
Tumregeln är "keep it simple"; gör det inte mer avancerat än vad det är. Det här projektet innefattade en rubrik och lista och behövde därför ingen ful komprimiss i uppmärkningen för att uppnå önskad presentation.

I ett mer utmanande HTML-dokument hade det eventuellt varit nödvändigt att lägga till en klass eller ett id, det är sant. Det är dock viktigt att komma ihåg att klasser och id inte finns för presentationens skull: de finns för att berika semantiken på sidans innehåll.

Hade alla webbläsare haft stöd för CSS2 hade vi inte behövt klasser och id annat än för att berika semantik. Tills dess får vi göra de komprimisser som är nödvändiga. Hade variabler funnits i CSS hade det varit ännu enklare att slippa skriva ful HTML för presentationens skull.

Roliga test i ämnet:
http://www.456bereastreet.com/archive/2 ... knowledge/
http://friendlybit.com/css/levels-of-css-knowledge/
antlion: 3,2 GHz i7 | 32GB | 180GB+120GB SSD SATA III | 2TB SATA III | Dell u2410 | GF 5600ti Arch linux + Win 7
kqr
Posts: 3077
Joined: 2005-09-05 17:23:20
Location: Stockholm

Post by kqr »

madr wrote:En långsökt fördel är att marginaler och floats bryter snyggare vid små skärmar, små fönster eller låg upplösning. Kan vara avgörande i vissa uppdrag, men triviala i andra. Troligtvis trivialt i detta fall.
Inte långsökt alls utan rent av hemskt logiskt. Men frågan är då hur bra det egentligen är med margin-left? Det skulle innebära att vid riktigt låga upplösningar så hamnar allt en bra bit från kanten. Vore det möjligt att göra med samma sak fast med margin-right istället, så hamnar innehållet intill kanten vid riktigt låga upplösningar?
madr wrote:Tumregeln är "keep it simple"; gör det inte mer avancerat än vad det är. Det här projektet innefattade en rubrik och lista och behövde därför ingen ful komprimiss i uppmärkningen för att uppnå önskad presentation.
Fast, har lite svårt för att köpa det där. Jag är van vid att en kod ska vara lätt att utöka.
(:
Jag är nog nivå fyra i både html och css. Så jag har lite kvar att lära. (:



EDIT: Oj, vad quotesen blev fuckade. (:
User avatar
madr
Posts: 998
Joined: 2004-08-24 11:12:39
Contact:

Post by madr »

kr1sse wrote:Inte långsökt alls utan rent av hemskt logiskt. Men frågan är då hur bra det egentligen är med margin-left? Det skulle innebära att vid riktigt låga upplösningar så hamnar allt en bra bit från kanten. Vore det möjligt att göra med samma sak fast med margin-right istället, så hamnar innehållet intill kanten vid riktigt låga upplösningar?
Genom att utnyttja margin collapsing går det att komma undan rätt bra med tungan rätt i munn. Testa att grabba tag i hörnet på webbläsarfönstret med http://www.meminus.co.uk/ och se vad som händer när det blir radbryt.

Annars går det att leka med media-queries eller media="handheld" för att overrida screen-CSS. Det ger troligtvis bäst kontroll.
kr1sse wrote:Fast, har lite svårt för att köpa det där. Jag är van vid att en kod ska vara lätt att utöka.

[...]

(:
Jag är nog nivå fyra i både html och css. Så jag har lite kvar att lära. (:
css2-selektorer stöds av ie7 och kommer även finnas med i ie8, så det är strategiskt att börja kika på dessa nu i takt med att ie6 tappar användare. Det är inte svårt att säga ifrån till klasser och id om man vet hur det går till. Återigen: gör det inte mer avancerat än vad som krävs.

Läs på litet om hur klok HTML ser ut och liknande resurser så kommer du snart i mål.

Om du har web developer toolbar, testa också att stänga av bilder och css för att se hur koden skalar på meminus sida. Gör sedan detsamma med din kod.
antlion: 3,2 GHz i7 | 32GB | 180GB+120GB SSD SATA III | 2TB SATA III | Dell u2410 | GF 5600ti Arch linux + Win 7
User avatar
Lyngan
Posts: 580
Joined: 2002-10-14 9:32:14
Location: Småland / Sverige

Re: HTML är omöjligt, kodning är omöjligt! Behöver hjälp!

Post by Lyngan »

meminus wrote:Hej!

HTML är verkligen inte min grej... försöker skapa en basic-index sida med EN bild och TVÅ länkar.... No-Can-Do. Det blir ingenting av det...jag orkar inte hålla på mer helt enkelt ;(
Hej. Om du nu är såpass osäker på HTML så rekommenderar jag att du börjar med en html editor så som Front Page 2003.

Du kan göra allt du nyss sa och mycket mer som t ex interaktiva knappar.

Lycka till
Gamestation: 4400+, 936GB, 2024mb, 256mb
Workstation: 2,8ghz, 80gb, 512mb, 64mb
Server: IBM Netfinity 5500
User avatar
Raspberry
Posts: 1808
Joined: 2006-06-16 19:51:58

Re: HTML är omöjligt, kodning är omöjligt! Behöver hjälp!

Post by Raspberry »

Lyngan wrote:
meminus wrote:Hej!

HTML är verkligen inte min grej... försöker skapa en basic-index sida med EN bild och TVÅ länkar.... No-Can-Do. Det blir ingenting av det...jag orkar inte hålla på mer helt enkelt ;(
Hej. Om du nu är såpass osäker på HTML så rekommenderar jag att du börjar med en html editor så som Front Page 2003.

Du kan göra allt du nyss sa och mycket mer som t ex interaktiva knappar.

Lycka till
Eller Dreamweaver, och pröva på http://www.webdesignskolan.com/
Win7 Ulti x64 | 22" Wide | E8400@3.0GHz | 4GB | HD4850 | Raptor 34GB; Spinpoint F3 1TB; My Book Essential 1TB; My Passport Essential 250 GB; Barracuda 750 GB
User avatar
madr
Posts: 998
Joined: 2004-08-24 11:12:39
Contact:

Re: HTML är omöjligt, kodning är omöjligt! Behöver hjälp!

Post by madr »

Raspberry wrote:
Lyngan wrote:
meminus wrote:Hej!

HTML är verkligen inte min grej... försöker skapa en basic-index sida med EN bild och TVÅ länkar.... No-Can-Do. Det blir ingenting av det...jag orkar inte hålla på mer helt enkelt ;(
Hej. Om du nu är såpass osäker på HTML så rekommenderar jag att du börjar med en html editor så som Front Page 2003.

Du kan göra allt du nyss sa och mycket mer som t ex interaktiva knappar.

Lycka till
Eller Dreamweaver, och pröva på http://www.webdesignskolan.com/
Webdesignskolan lär ut alla dåliga vanor som nämns i denna tråd. Undvik den.

Jag kan rekommendera http://www.sitepoint.com/books/html1/ .
antlion: 3,2 GHz i7 | 32GB | 180GB+120GB SSD SATA III | 2TB SATA III | Dell u2410 | GF 5600ti Arch linux + Win 7
User avatar
Raspberry
Posts: 1808
Joined: 2006-06-16 19:51:58

Re: HTML är omöjligt, kodning är omöjligt! Behöver hjälp!

Post by Raspberry »

madr wrote:
Raspberry wrote:
Lyngan wrote:
meminus wrote:Hej!

HTML är verkligen inte min grej... försöker skapa en basic-index sida med EN bild och TVÅ länkar.... No-Can-Do. Det blir ingenting av det...jag orkar inte hålla på mer helt enkelt ;(
Hej. Om du nu är såpass osäker på HTML så rekommenderar jag att du börjar med en html editor så som Front Page 2003.

Du kan göra allt du nyss sa och mycket mer som t ex interaktiva knappar.

Lycka till
Eller Dreamweaver, och pröva på http://www.webdesignskolan.com/
Webdesignskolan lär ut alla dåliga vanor som nämns i denna tråd. Undvik den.

Jag kan rekommendera http://www.sitepoint.com/books/html1/ .
Tack, ska kolla där isf :)
Bra att det är den vi ska använda enligt läraren! >.<
Win7 Ulti x64 | 22" Wide | E8400@3.0GHz | 4GB | HD4850 | Raptor 34GB; Spinpoint F3 1TB; My Book Essential 1TB; My Passport Essential 250 GB; Barracuda 750 GB
kqr
Posts: 3077
Joined: 2005-09-05 17:23:20
Location: Stockholm

Post by kqr »

I min webdesignkurs får vi lära oss ungefär nivå fyra i både HTML och CSS. No good, no good. :/

Kanske skulle belysa andra aspekter för läraren. :S
User avatar
lither
Hedersbit
Posts: 9507
Joined: 2002-03-09 21:12:13
Location: Göteborg
Contact:

Re: HTML är omöjligt, kodning är omöjligt! Behöver hjälp!

Post by lither »

Raspberry wrote:Tack, ska kolla där isf :)
Bra att det är den vi ska använda enligt läraren! >.<
Dags att läxa upp läraren.
1. Nigger guy, two words which by themselves are harmless, but when combined they form a verbal missile of hate.
2. Vivaldi
3. Buffalos ...
User avatar
madr
Posts: 998
Joined: 2004-08-24 11:12:39
Contact:

Post by madr »

Det är snarare skolverkets fel. Deras kursplaner för "webbdesign" är rena skämtet.

http://keryx.se/wasp/
antlion: 3,2 GHz i7 | 32GB | 180GB+120GB SSD SATA III | 2TB SATA III | Dell u2410 | GF 5600ti Arch linux + Win 7
Post Reply