Millaisella koodilla HTML-koodille tulee "ilmoittaa", jos on koodannut CSS-kielellä, sillä tietääkseni CSS ei näy netissä ?
Nyt oli vähän epäselvä kysymys, mutta erillinen CSS -tiedosto liitetään HTML dokumenttiin tagilla
<link rel="stylesheet" href="tyyli.css" type="text/css" />
olettaen, että tyylitiedoston nimi on tyyli.css
Ja se näkyy netissä siinä missä mikä tahansa tiedosto, eli jos syötät selaimen osoitekenttään tyylitiedoston URL:n, niin saat eteesi CSS koodin.
css-tyylitiedosto liitetään html-sivulle esim. näin
<head> <!-- lisäksi muut head-tägin väliin kuuluvat tägit --> <link rel="stylesheet" href="css/tyylit.css" type="text/css" /> </head> <body> <! -- sisältö alkaisi tästä -->
tyylit.css -tiedosto sisältäisi sitten vaikka perustyylit kuten
*{
margin: 0;
padding: 0:
}
h1{
font-size:72px;
color:#FF0000;
}
a{
color:#000000;
}
a:hover{
color:#FFFFFF;
background-color:#000000;
}Kettunen kirjoitti:
Kiitos vastauksista. Mutta voisiko joku vielä kertoa mitä on nuo head -tägin väliin kuuluvat tägit? :O
Minkä verran oot opiskellu näitä juttuja? :D
^Siis älkää tosiaan luulko että tiedän koodaamisesta paljon mitään. Harjoitteluvaiheessa ollaan, mutta älkääs nyt kuitenkaan sanoko että "siirry oppaiden kimppuun":D
Mutta saisinko vastauksen äskeiseen kysymykseen?
muoks. Vastaus löytyi.
Mutta koodi ei lähde toimimaan vaikka miten olen yrittänyt. -.-
Mikä on vikana:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSSeasy.com example page</title>
<link rel="stylesheet" href="css/tyylit.css" type="text/css" />
</head>
<body>
/*
You are allowed to do whatever you want with this layout. Though I would be pleased if you placed a link on your site to csseasy.com or to profit42.com (best "blog about hacking" ever). Donations are also welcome: paypal@profit42.com (or follow the donation button on csseasy.com)
*/
body {
width:750px;
margin:0 auto;
margin-top:30px;
}
/* ----- HEADER ----- */
#header {
width:750px;
height:150px;
background-color:#333333;
}
/* FAUX LAYOUT WRAPPER */
/*
This div is optional: When you delete it the navigation bar and the content block won't have the same size when one of them has a larger height then the other. I recommend you to leave this faux layout wrapper here.
IMPORTANT: In order to make this work you have to download http://csseasy.com/layouts/fixed/background_3.gif (copy past in your address bar) and place it in the same folder as this html file. DON'T HOTLINK to this file.
*/
#wrapper{
width:750px;
background:url(background_3.gif) repeat-y; /* WARNING: IF YOU CHANGE THE COLORS OF THE LAYOUT YOU HAVE TO CHANGE THIS IMAGE! */
overflow:auto; /* USE FIREFOX GUYS! WE ONLY NEED THIS LINE BECAUSE INTERNET EXPLODER ISN'T READING CODE PROPERLY */
margin-top:10px;
}
/* ----- NAVIGATION ----- */
#navigation {
width:200px;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
background-color:#333333;
float:left;
}
/* ----- MAIN CONTENT ----- */
#content {
margin-left:210px;
width:540px;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
background-color:#333333;
margin-top:10px;
}
/* ----- FOOTER ----- */
#footer {
margin-top:10px;
width:750px;
height:100px;
background-color:#333333;
}
</style>
</head>
<body>
<div id="header">
</div>
<div id="wrapper">
<div id="navigation">
</div>
<div id="content">
</div>
</div>
<div id="footer">
</div>
</body>
</html>...Koodi on lähdekoodi seuraavalta sivulta: http://csseasy.com/layouts/fixed/2column_left.
Mod. lisäsi kooditagit
Toi nyt on ihan sekasin.
Suljet head -elementin kahdesti, style -elementin kerran, muttet avaa sitä missään. Lisäksi sulla on kaksi body -avaustagia.
Kyllä mä nyt mieluusti neuvoisin sua tutustumaan oppaisiin, on toi koodi siinä määrin päätöntä. Sori nyt vain...
Tuo sivu nyt yrittää käyttää upotettua tyyliarkkia, joka kuuluu laittaa html -koodiin head -elementtiin style -elementin sisään.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSSeasy.com example page</title>
<link rel="stylesheet" href="css/tyylit.css" type="text/css" />
</head>
/*
You are allowed to do whatever you want with this layout. Though I would be pleased if you placed a link on your site to csseasy.com or to profit42.com (best "blog about hacking" ever). Donations are also welcome: paypal@profit42.com (or follow the donation button on csseasy.com)
*/
body {
width:750px;
margin:0 auto;
margin-top:30px;
}
/* ----- HEADER ----- */
#header {
width:750px;
height:150px;
background-color:#333333;
}
/* FAUX LAYOUT WRAPPER */
/*
This div is optional: When you delete it the navigation bar and the content block won't have the same size when one of them has a larger height then the other. I recommend you to leave this faux layout wrapper here.
IMPORTANT: In order to make this work you have to download http://csseasy.com/layouts/fixed/background_3.gif (copy past in your address bar) and place it in the same folder as this html file. DON'T HOTLINK to this file.
*/
#wrapper{
width:750px;
background:url(background_3.gif) repeat-y; /* WARNING: IF YOU CHANGE THE COLORS OF THE LAYOUT YOU HAVE TO CHANGE THIS IMAGE! */
overflow:auto; /* USE FIREFOX GUYS! WE ONLY NEED THIS LINE BECAUSE INTERNET EXPLODER ISN'T READING CODE PROPERLY */
margin-top:10px;
}
/* ----- NAVIGATION ----- */
#navigation {
width:200px;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
background-color:#333333;
float:left;
}
/* ----- MAIN CONTENT ----- */
#content {
margin-left:210px;
width:540px;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
background-color:#333333;
margin-top:10px;
}
/* ----- FOOTER ----- */
#footer {
margin-top:10px;
width:750px;
height:100px;
background-color:#333333;
}
<body>
<div id="header">
</div>
<div id="wrapper">
<div id="navigation">
</div>
<div id="content">
</div>
</div>
<div id="footer">
</div>
</body>
</html>^Olisiko tuo jo lähempänä oikeata, edelleenkään ei näytä toimivan.
Mod. lisäsi kooditagit
Tyylit pitää olla määriteltynä head-tagin sisässä tyyliin
<head>
<style type="text/css">
body {
/* tyyliä */
}
</style>
</head>Vieläkään et ole tehnyt niin.
Tai sitten vaihtoehtoisesti kopsaat vaan noi kaikki tyylit siihen tyylit.css tiedostoosi ja pitäisi toimia.
Jos kopioin tuon näyttämäsi esimerkin koodiini (ja tietenkin poistan tieltä vanhan head -tagin ja sen sisällön, niin pitäisikö koodin siinä tapauksessa toimia? Eli onko koodi siis muuten kunnossa?
Ainakin siltä se minusta näyttää :P
Tietty, jätä siihen omat merkintäsi, eli link-, title- ja meta-tagit. Jos siis kopioit sen siihen tyylit.css tiedostoon. Muutoin laita tuo csspätkäsi siihen niin kuin näytin.
Pääset vähemmällä jos vain etsit itsellesi (x)html -oppaan. Tässä on yksi:
http://gimp-suomi.org/phpBB3/viewtopic.php?f=9&t=3
Sisältää sekä XHTML:n että CSS:n perusteet.
Tässä on XHTML-sivun perusrakenne, jossa ei liitetä mukaan ulkopuolista CSS-tiedostoa:
<!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="fi"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title></title> <style type="text/css">/*<![CDATA[*/ /*]]>*/</style> </head> <body> </body> </html>
Ensin tulee DOCTYPE, joka kertoo että käytössä on XHTML Strict. Sen jälkeen tulee HTML-tagi, joka sisältää kaiken muun mitä tulee. Jotta pysyt hyvin järjestyksestä selvillä, sisennä koodia nätisti, jolloin näet selvemmin milloin tagi alkaa ja missä se päättyy.
Seuraavaksi tulee HEAD-tagi, joka sisältää otsiketietoja ja semmoista tietoa ylipäätään, jota ei näytetä sivulla. Tänne siis tulee sivun otsikko, metatietoja, linkitykset tyylitiedostoihin tai tyylitagi, jonka sisällä on CSS:ää. Käytin LINK-tagin sijaan STYLE-tagia, jonka väliin voidaan laittaa CSS-määritykset. Huomaa että laitoin sekaan myös XML:n CDATA:n, tämä estää validaattoria sekä huonosti toteutettuja selaimia luulemasta CSS:ää XHTML:ksi. Se näyttää vähän hassulta, koska CDATA on kommentoitu CSS:n kommenttimerkinnällä, jotta se ei sitä vastoin joutuisi CSS-parserin kynsiin. Tämä pieni häröily johtuu lähinnä siitä, että STYLE-tagin sisältö on aikoinaan virheellisesti määritelty muuksi kuin CDATA:ksi, jolloin XML-parserit yrittävät käsitellä tagin sisällön (sama vika HTML:n puolella toisella tavalla, huonosti toteutetut selaimet saattoivat näyttää CSS-määritykset sivulla jos niitä ei kommentoitu).
Lopuksi HEADin jälkeen tulee BODY-tagi, jonne tulee kaikki se minkä haluat näkyvän sivulla, mutta ei sitä millä tavalla se esitetään: sen puolen hoitaa CSS.
Loppujen lopuksi kaikki on vaan kiinni siitä, että pidät järjestykset kurissa ja pidät huolta siitä että jos avaat jotakin, niin suljet sen myös. Sisentäminen helpottaa tässä. Kannattaa myös tutustua HTML-elementteihin, jotta tiedät mitä kaikkea kielestä löytyy, jolloin voit paremmin suunnitella sivun. XHTML:ää tehdessä kannattaa sitten jättää huomiotta nuo optional-jutut, ne eivät ole valinnaisia, deprecated- ja loose-juttuja ei kannata käyttää tai opetella ollenkaan.
Muoks! Heh, kopsasin epähuomiossa tuohon HTML 4.01 Strict -sivun pohjan, enkä XHTML 1.0 Strictiä, korjattu.
Onkohan tuo strict paras aloittelijalle? Se rajoittaa valtavasti, ja aloittelijalle hankalaa. Itselläni on jo transitionalin kanssa vaikeuksia, ja vaikka se tukee monia html-tageja mitä strict ei tue, siinäkin joutuu joka käänteessä aina laittaa muotoilut ihan css:nä. Mitä luulet miten hankalaa aloittelijalla on, kun lukee kaikenlaisia eri stantardityypeille tehtyjä oppaita ja yrittää strictillä niitä käyttää. Ei varmasti toimi.
kray kirjoitti:
Onkohan tuo strict paras aloittelijalle?
On. Miksi suotta opetella tekemään asioita väärin, jos ne voi samantien opetella tekemään oikein?
GimPeltzi kirjoitti:
Kettunen kirjoitti:
Kiitos vastauksista. Mutta voisiko joku vielä kertoa mitä on nuo head -tägin väliin kuuluvat tägit? :O
Minkä verran oot opiskellu näitä juttuja? :D
head -tagin väliin laitetaan esimerkiksi sivun title, metatagit, icon, jne. Eli Kaikki, mitä ei periaatteessa näy itse dokumentissa.
Aihe on jo aika vanha, joten et voi enää vastata siihen.