Keskustelu: Nettisivujen teko: Nettisivut CSS:ää käyttäen

zurban [13.10.2009 16:18:03]

Morjes. Eli pitäis saada css:sää käyttäen aikaiseksi nettisivut, jossa olis jtn seuraavista asioista:

- Joku taustaväri tai kuva
- Tekstin koon, tyylin tai merkkilajin muutokset
- Jonkin näköset sisennykset ja välitykset
- Reunukset
- Tekstin leveys joku sopiva px
- ja teksti olisi hyvä esim sijoittaa sivun keskelle

Tollaseen pitäis saada apua, että sais tehtyä tollasen rungon ja sitten siitä itse lähteä muotoilemaan tekstiä ja noita atribuutteja.

Kiitos!

vehkis91 [13.10.2009 16:20:43]

Mitäs jos lukisit jotain html opasta?

Macro [13.10.2009 16:24:49]

Niin, kannattaa lukea HTML-oppaita. Esimerkiksi sivut.org-sivustolla on hyvä HTML-opas aloittelijalle.

Tässä sinulle kuitenkin pähkäiltävää. Ei se sitten loppuen lopuksi ole vaikeaa.

<html>
	<head>
		<title>Sivusi nimi</title>
		<style type="text/css">
			body {
				background-image: url("kuva.gif") repeat-x;
				font-family: verdana, arial;
			}

			#sisalto {
				width: 80%;
				text-align: center;
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<div id="sisalto">
			<h1>Otsikko</h1>

			Sisältö
		</div>
	</body>
</html>

Teuro [13.10.2009 16:34:36]

Ja ne koulutehtävät pitäisi tehdä kyllä itse ei niistä muutoin oikein opi mitään. Macron koodikaan ei ole ihan täysin oikein, koska doctype puuttuu, sekä tekstisolmu ei saa esiintyä ilman tagia.

Macro [13.10.2009 16:36:52]

Mikä tekstisolmu?

Teuro [13.10.2009 16:38:57]

"Sisältö" teksti siis joka on yksinään heti otsikkosolmun jälkeen.

TeNDoLLA [13.10.2009 16:41:13]

Herjaako esim. validaattorit nykyään tuommosista? Vai tuleeko ongelmia vasta sitten JOS käyttää sivun parsimiseen/luomiseen DOMDocumenttia? Vai onko tuolle kenties joku muu syy miksi täytyisi olla noin tarkkaan kaikki määritetty?

vehkis91 [13.10.2009 16:42:04]

Eiköhän se oo xhtml, miss kaikki pitää olla tarkkaan määritetty.

Metabolix [13.10.2009 16:46:37]

Tässä on pieni esimerkki, jossa on suurin osa pyydetyistä asioista.

<!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" lang="fi" xml:lang="fi">
<head>
<title>&#77;&#105;&#107;&#115;&#101;&#116; &#101;&#116;&#115;&#105; &#105;&#116;&#115;&#101;&#63; &gt;_&gt;</title>
<meta http-equiv="Content-Type" content="text/html; charset=ASCII" />
<style type="text/css">
/* <![CDATA[ <!-- */
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #f0f;
}
#sisalto {
  position: absolute;
  left: 5%;
  top: 5%;
  width: 90%;
  height: 90%;
  overflow: auto;
  background-color: #0f0;
}
h1 {
  text-align: center;
  font-size: 500%;
  font-weight: bold;
  font-family: "Comic Sans", Monospace;
  text-decoration: underline blink;
  color: #f60;
}
p {
  font-size: 300%;
  letter-spacing: 0.2em;
  text-indent: 1em;
}
/* --> ]]> */
</style>
</head>
<body>
<div id="sisalto">

<h1>&#71;&#111;&#111;&#103;&#108;&#101;&#116;&#97; &#34;&#88;&#72;&#84;&#77;&#76;&#45;&#111;&#112;&#97;&#115;&#34; &#106;&#97; &#34;&#67;&#83;&#83;&#45;&#111;&#112;&#97;&#115;&#34;&#33;</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt, nisl vitae pretium blandit, velit magna adipiscing nibh, eget feugiat lorem turpis et ligula. Etiam tristique nisl dignissim ipsum pretium dignissim. Sed neque ligula, rutrum vel gravida at, fringilla eget diam.</p>

<p>Koeteksti</p> <p>Koeteksti</p> <p>Koeteksti</p> <p>Koeteksti</p> <p>Koeteksti</p> <p>Koeteksti</p> <p>Koeteksti</p> <p>Koeteksti</p> <p>Koeteksti</p>

</div>
</body>
</html>

Teuro: Teksti saa kyllä esiintyä divin sisällä. Sen sijaan bodyn sisällä ei saa.

Teuro [13.10.2009 16:47:21]

Pahoitteluni
Muistin väärin teksti saa olla yksinään.

Esimerkiksi dokumentin osien hakeminen on melko helppoa, kun tiedetään sen olevan validia kamaa. Muutoin joudutaan parsimaan dataa ja arvaamaan millä kohtaa haluttu tieto onkaan.

Tästä on mulla ihan omakätistä kokemusta. Kokeilin hakea kennelliiton sivuilta tulevia koiranäyttelyitä. Dokumentit on rakennettu ihan miten sattuu, sekä ne eivät ole edes samanlaisia, vaan jokainen vuosi on omanlainen.

<?php
$sivu = new DOMDocument();
$sivu->Load("validi_xml_dokumentti.xml");
/* Haetaan dokumentin toinen kappale */
$kpl = $sivu->getElementsByTagName("p")->item(0);
echo "<p>" . $kpl->textContent . "</p>";
?>

Sivun alkuun

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Kirjautuminen

Haku

Tehtävät