Wiki

Käyttäjän työkalut

Sivuston työkalut

Jäljet:
html

Erot

Tämä näyttää erot valitun ja nykyisen version kesken tästä sivusta.

Linkki vertailunäkymään

Both sides previous revisionEdellinen revisio
Seuraava revisio		Edellinen revisio
html [2010/03/25 20:31] – moverstihtml [2019/09/16 10:58] (nykyinen) – [Elementtikohtaisesti] moversti
Rivi 12: Rivi 12:
 </html> </html>
 </code> </code>
 +
 +
 +===== Elementtikohtaisesti =====
 +
 +Jokaisen elementin kohdalla määritellään tyyli. Esim. <code><H1 style="font-family:serif; font-weight:bold; color:blue">Otsikko</H1></code>
 +===== Otsikkolohkossa =====
 +
 +Jokainen käytetty tyyli määritellään otsikkolohkossa ''<STYLE> </STYLE>'' elementtien sisällä. Esimerkiksi 
 +<code html4strict>
 +<HTML>
 +<HEAD> 
 +<TITLE>Tyylittelyä</TITLE> 
 +<STYLE> 
 +P {font-family:serif} 
 +H1 {background:black; border:thin}
 +</STYLE> 
 +</HEAD> 
 +
 +<BODY> 
 +Tekstiä 
 +</BODY> 
 +</HTML>
 +</code>
 +
 +===== Erillisessä tyylitiedostossa =====
 +
 +Kirjoitetaan erillinen tiedosto (vaikkapa tyyli.css), joka linkitetään tekstiin. Samaa tiedostoa voi käyttää useissa dokumenteissa ja monen sivun tyylin muuttaminen käy helposti muuttamalla tyyli.css-tiedostoa. Linkittäminen tapahtuu otsikkolohkossa <code><link href="tyyli.css" rel="stylesheet" type="text/css"> </code>
 +
 +===== CSS-ohjeita =====
 +
 +Käy katsomassa osoitteesta [[http://www.2kmediat.com/css/liite_mediatyyppi_screen.asp]] mahdollisia selektoreita ja niiden arvoja. Osoitteesta [[http://kuler.adobe.com/#create/fromacolor]] löytyy Adoben Kuler-työkalu, jolla saa toisiinsa sointuvia värejä. Käytä työkalun antamia HEX-arvoja ja laita niiden eteen #-merkki, siis esimerkiksi värin red tilalle #ff0000.
 +
 +Jos koneessasi ei ole flashia, niin voit käyttää
 +
 +   * http://www.ficml.org/jemimap/style/color/wheel.html
 +   * http://www.colorschemer.com/online.html
 +   * http://johndyer.name/lab/colorpicker/
 +
 +Lisää CSS-ominaisuuksia löytyy osoittteesta http://www.edu.haapavesi.fi/~moversti/html/tyyliarkit.php
 +
 +===== Valikkosivujen tekeminen =====
 +
  
 <code html4strict> <code html4strict>
Rivi 77: Rivi 119:
 </body> </body>
  
 +</html>
 +</code>
 +
 +<code html4strict>
 +<html>
 +<head>
 +<title>Sivurakenteen harjoittelua...</title>
 +
 +<style>
 + body{
 + background-color: silver;
 + font-family: Helvetica, Arial, sans-serif; //vs serif
 + }
 + .otsikko{
 + width: 100%;
 + text-align: center;
 + font-size: 20px;
 + color: red;
 + font-variant: bold;
 + }
 + .navigointi{
 + float: left;
 + }
 +
 + .navigointi ul{
 + list-style: none;
 + }
 + .navigointi ul li{
 + width: 200px;
 + height: 30px;
 + border: thin solid black;
 + padding-left: 5px;
 + padding-top: 5px;
 + }
 + .navigointi ul li:hover{
 + background-color: red;
 + }
 + .navigointi ul li a{
 + width: 200px;
 + text-decoration: none;
 + }
 + .navigointi ul li a:hover{
 + text-decoration: none;
 + background-color: red;
 + }
 +
 + .sisalto{
 + margin-left: 255px;
 + padding-top: 10px;
 + font-size: 1.1em;
 + line-height: 1.4em;
 + }
 + .sisalto p{
 + padding-bottom: 10px;
 + }
 + .footer{
 + border-top: 2px solid blue;
 + color: green;
 + text-align: right;
 + padding-top: 5px;
 + font-style: italic;
 + }
 +</style>
 +
 +</head>
 +
 +<body>
 +
 +<div class="otsikko">
 +Otsikko
 +</div>
 +
 +<div class="navigointi">
 + <ul>
 + <li><a href="#">Linkki</a></li>
 + <li><a href="#">Linkki</a></li>
 + <li><a href="#">Linkki</a></li>
 + </ul>
 +</div>
 +
 +<div class="sisalto">
 +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse risus enim, congue sed lobortis vitae, scelerisque nec quam. Nullam tempor vehicula nulla ut vehicula. Maecenas eros elit, dapibus id malesuada ut, facilisis a arcu. Vestibulum sit amet vestibulum leo. Aenean pharetra, nulla vitae fermentum porta, massa dui cursus nisi, sit amet pulvinar mi justo et lacus. Sed in dignissim magna. Donec in erat odio. In hac habitasse platea dictumst. Maecenas ut ligula quam, quis mattis arcu. Nulla ligula augue, fringilla id vehicula at, feugiat a nisi. Vivamus aliquam cursus eros et convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
 +
 +<p>Donec tempus elementum suscipit. Fusce interdum, risus ac ultricies vulputate, dolor urna ornare urna, a congue massa ligula in diam. Suspendisse vitae leo magna. Morbi consequat tortor at libero fringilla et faucibus ligula mollis. Proin varius vehicula lectus eu auctor. Vivamus scelerisque mollis varius. Duis mattis tortor quis tortor consectetur malesuada. Aliquam sollicitudin pellentesque eros. Maecenas massa nisl, consectetur vel sagittis id, accumsan ut nisi. Quisque egestas sapien a neque sollicitudin eu ullamcorper enim dictum. Nam consequat nisi sit amet orci mattis nec ornare neque consequat. Nulla nulla nisi, feugiat et venenatis id, convallis ut nunc. Praesent tincidunt fermentum nibh, nec ultricies diam ornare et. Sed at est et elit vehicula hendrerit ut vitae dolor. Curabitur ultricies enim nec nisi gravida gravida.</p>
 +
 +<p>Donec pellentesque rutrum enim, in tincidunt orci faucibus non. In hac habitasse platea dictumst. Suspendisse aliquam, augue sit amet malesuada scelerisque, purus sapien convallis magna, id dictum arcu justo id orci. Donec gravida quam sit amet risus tempus tincidunt. Mauris elementum nulla id magna congue dictum eu quis ligula. Maecenas sodales dignissim tempor. Pellentesque dui magna, molestie a consectetur porta, iaculis eu purus. Curabitur vitae pulvinar ipsum. Sed gravida tortor quis justo vestibulum id bibendum lacus posuere. Integer ac nisl sit amet augue aliquam commodo. Quisque imperdiet facilisis odio, ut vehicula urna pharetra porta. Nullam quis lorem blandit mi commodo ullamcorper. Cras consequat sodales porta.</p>
 +
 +<p>Sed dapibus, est sed posuere commodo, diam urna suscipit ligula, ac molestie urna libero eget nunc. Nullam et erat non sem consequat gravida. In sit amet lectus eu tortor tincidunt facilisis eget vitae libero. Etiam nunc purus, rutrum et posuere a, fringilla a mi. Maecenas felis tortor, porta at aliquet sit amet, egestas a nisl. Nunc accumsan vehicula purus vitae interdum. Vestibulum at nulla id erat pellentesque suscipit in non tortor. Integer vulputate lorem at augue rhoncus eu tincidunt augue vehicula. Donec varius leo a felis blandit at egestas ante porta. Morbi sollicitudin urna in metus laoreet at rhoncus felis blandit. Integer lorem erat, laoreet id elementum ac, vulputate quis enim.</p>
 +
 +<p>Praesent varius ultrices sapien, et pretium risus mattis vel. Duis ac enim eu lacus accumsan euismod ut nec tortor. Pellentesque sed felis sit amet magna ullamcorper ultrices nec blandit lectus. Ut tincidunt, elit in cursus rutrum, mi metus tempus lacus, non fermentum elit ipsum a diam. Duis imperdiet euismod dapibus. Pellentesque dui turpis, auctor vitae vulputate a, dictum id est. Proin augue nulla, posuere sed ullamcorper in, rhoncus vitae lacus. Donec vel placerat magna. Ut semper bibendum leo, in porttitor arcu placerat non. Vestibulum quis nulla felis, sed dictum urna. Mauris ac feugiat libero. Praesent diam magna, lobortis quis dapibus ut, auctor vitae quam. Sed ullamcorper vulputate lobortis. Donec tincidunt mauris sed nisl sodales sollicitudin. Cras dui odio, rhoncus quis placerat sed, porta ut sem. Suspendisse tincidunt aliquet diam quis pretium. Vivamus nec aliquet diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam vehicula quam ultrices orci consequat imperdiet. </p>
 +</div>
 +
 +<div class="footer">
 + 26.3.2010 &copy; Markus Översti
 +</div>
 +
 +</body>
 </html> </html>
 </code> </code>
html.1269541870.txt.gz · Viimeksi muutettu: 2015/08/13 07:18 (ulkoinen muokkaus)