Log In
Home
March 27, 2003
Offline
Nu vill/ska jag göra en korrekt hemsida. Jag vill därför lära mig XHTML, CSS, W3C och allt vad det heter. Är Webdesignskolan en bra sida? Sist jag besökte sidan va väl över 5 år sedan, då för att lära mig tabellen. Finns det bättre sidor?
Länken till http://www.w3.org/ uppskattas inte, jag söker en sida/flera sidor som är lättare och intressantare att läsa...
March 14, 2001
Offline
http://www.w3schools.com/ kan du kolla på..
March 27, 2003
Offline
Tackar... Verkar vara en bra sida. Men om vi börjar i en annan ände; Vad är XHTML jämfört med HTML? Vad är bäst? XHTML + CSS eller?
October 10, 2002
Offline
är lite ute eftersamma sak, så ajg uppskattar också det ni skriver här 🙂
March 25, 2005
Offline
html med tabeller + css1 och egen-designade bilder
March 27, 2003
Offline
Niclas R wrote: html med tabeller + css1 och egen-designade bilder
Va? Är inte tabeller helt fel nu för tiden? Egendesignade bilder?
September 11, 2002
Offline
Tabeller är inte fel om man använder dem för att visa saker som ska ställas upp i tabellform. Däremot anses det vara fult att använda tabeller för sidlayout. Men det visste du tydligen redan 🙂
Vet inte riktigt vad Niclas R menade.
För skillnad mellan HTML och XHTML kan du kolla här eller här eller söka i google efter difference html xhtml. Det ger många fina resultat.
March 27, 2003
Offline
Jo, skillnaden där har jag nog snappat upp. Antar att det bara är att börja koda... :-S
Här är en sida som ser ut ungefär så som jag önskar min. Hur kodar jag grunderna? (Antar att länkarna till vänster, toppen med namnet och huvudsidan är tre skilda sidor...)
September 11, 2002
Offline
Om du använder HTML/XHTML+CSS så behöver det inte vara tre delar. Det är en nackdel att använda frames i hemsidor.
När du använder CSS för layout så kan man se det som att man placerar ut olika boxar på en hemsida. Man kan använda en box för topp och meny, en box för vänstermenyn, och en box för huvudinnehåll.
Här är ett riktigt grundexempel. Titta på det så kommer du igång snabbt tror jag:
Här kommer index.html
<html>
<head>
<title>Min hemsida</title>
<link href="general.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="top">
Meny:</p>
hotmailNH
</div>
<div class="left">
Leftmenu:
</div>
<div class="main">
Main content area:
</div>
</body>
</html>
Här kommer general.css
body {
background-color: grey;
}
.top {
position: absolute;
top: 10px;
left: 10px;
height: 100px;
width: 600px;
background-color: white;
border: 1px solid black;
}
.left {
position: absolute;
top: 120px;
left: 10px;
height: 500px;
width: 100px;
background-color: white;
border: 1px solid black;
}
.main {
position: absolute;
top: 120px;
left: 120px;
height: 500px;
width: 490px;
background-color: white;
border: 1px solid black;
}
Så här ser det ut i en websida
Observera att HTML-koden inte innehåller någon information alls om hur eller var innehållet ska ritas upp. Det sköts helt och hållet ifrån general.css, och det är det som är tricket med det hela.
Sen måste jag också säga att det finns många olika tekniker för att koda hemsidor på. Om man bara utgår ifrån ovanstående så kan det bli tungt i längden, särskilt om man har 10 olika undersidor. Varje sida måste nämligen innehålla samma grundstomme, och förändrar man grundstommen i en fil måste det göras i samtliga filer för att bibehålla samma struktur.
Se det alltså bara som en snabb grundkurs i hur man kan placera ut lådor med CSS.
September 11, 2002
Offline
Förresten, här kommer ett jättetips!
Om du gillar en hemsida så dra helt enkelt hem den och kika på exakt hur den är uppbyggd! Om du sen skriver din egen kod eller inte är upp till dig, men man tjänar otroligt mycket på att kolla på hur andra har kodat sina hemsidor.
Så länge som sidan inte använder något serverbaserat skriptspråk (PHP och liknande) så kan du dra hem hela sidstrukturen enkelt. Vet inte vilka verktyg som finns för det under Windows. Jag använder wget -r http://url.com, och eftersom just den här hemsidan är HTML-baserad så får man hem hela sidan på det viset. Tror förresten att wget finns för Windows också, men det finns säkert en massa fina grafiska verktyg man kan använda.
Det är nog ett av de viktigaste tipsen jag kan ge.
March 27, 2003
Offline
Grymt bra svar! Tackar! Precis lagom djup förklaring på CSS. 🙂
Nu har jag o göra hela natten!
Räkna med att jag kommer med fler frågor. 😉
September 11, 2002
Offline
I allmänhet så finns det hur mycket information på nätet som helst om HTML+CSS. Det brukar räcka med att söka efter en fras som beskriver det man vill åstadkomma tillsammans med sökordet CSS så hittar man en miljard sidor med kodexempel och förklaringar. Mycket bra! Om du använder google flitigt så kommer du garanterat bara att behöva fråga efter hjälp om det dyker upp riktiga godbitar till problem eller om du inte vet alls hur du ska åstadkomma något.
Till exempel om man undrar hur jag ska skapa fet text med CSS:
bold text css
Det räcker för att hitta rätt! Till och med så att man vågar använda "I'm feeling lucky" funktionen i Firefox/Google när man söker 🙂
Sen kommer du stöta på de vanliga problemen som att FF, IE och Opera inte tyder CSS likadant. Borders är ett helvete, särskilt om man använder borders och padding på lådor i designen... du märker varför första gången du ska positionera ett par lådor med ram intill varandra och jämför resultatet i IE och FF.
Ett annat exempel är att FF automatiskt lägger till margin och padding medan IE inte gör det. Sen finns det tusen andra problem runt just det att webläsare inte tolkar sidor likadant. Finns workarounds för det mesta, och det brukar gå lätt att hitta dem eftersom alla stöter på samma problem 🙂
Ofta handlar det om att hitta kompromisser. "Om jag flyttar den boxen 2px uppåt och minskar storleken på boxen med 1px så ser det ut så i FF och så i IE..."
Pust och stön med andra ord 😕
March 27, 2003
Offline
Mmm google funkar fint i de flesta situationer men dina exempel är bäst hittills... 😉
Testade med din kod och byggde på lite... Det verkar funka fint i både FF och IE6. Funkar det hyffsat i IE6 är jag nöjd... 🙂
Förresten, du körde med en punkt framför "objekten" i CSS-filen. En del kör med #, vad är skillnaden?
September 11, 2002
Offline
De används lite olika
# kallas för ID selector och används i html-koden så här:
<div id="top"></div>
. kallas för CLASS selector och används som du har sett så här:
<div class="top"></div>
Det finns en del rätt bra förklaringar på det där
http://www.bernzilla.com/item.php?id=416
http://www.w3.org/TR/CSS21/sel.....-selectors
http://www.w3.org/TR/CSS21/sel.....class-html
ID identifierar unika element på en sida som man vill ge någon särskilt egenskap. Till exempel skulle man kunna tänka sig att man har en rubrik som inte ska se ut som något annat på sidan - då använder man ID. Det går förstås lika bra att använda CLASS i det fallet.
Man använder det också för att skilja två objekt av samma typ från varandra. Till exempel så kanske du har använt CSS för att se till att alla tabeller ska se ut på ett visst sätt, men sen finns det en särskild tabell på en sida som ska se annorlunda ut. Då använder man ID för att märka den tabellen så att den använder en annan style. Det är väl så här som de flesta använder ID antar jag. Åtminstone så jag gör.
March 27, 2003
Offline
Okej... Då har jag lärt mig det också! Tackar 🙂
January 20, 2002
Offline
Jag lärde mig först genom att använda Designläget i Dreamweaver. Sedan när man kommer till det stadiet då hemsidorna ska ha en bättre struktur och design så blir man tvungen att koda. Jag har lärt mig all kod genom att designa i designläget i DW och sedan kollat i kodläge vad som händer. Sedan har jag googlat efter vad som behövs. Webdesignskolan har varit ganska användbar samt w3schools.com .. Man lär sig nya saker hela tiden då man designar eller kodar hemsida. Jag tror att man måste testa skapa lite sidor ifall man vill lära sig bäst istället för att bara plugga in saker.
March 27, 2003
Offline
Titta på annan kod är ju grymt bra... Ni som har välkodade sidor (med xhtml & CSS) får gärna posta länkar. (Behöver även tips på struktur/upplägg). 😉
December 26, 2003
Offline
En sida jag kan rekommendera är Den Autistiska Göken. Där står det mycket matnyttigt om CSS och X/HTML. 🙂
1 Guest(s)
