Näitä ohjeita noudattamalla saat sivuston päivittämisen helpoksi ja onnistuvaksi. Jos teet jotain muuta kuin tässä ohjeessa olevia toimenpiteitä, en voi ottaa mitään vastuuta asiasta, mutta neuvon kyllä kun ongelmia tulee.
Tämä sivusto koostuu kuudesta html tiedostosta ja yhdestä tyylitiedostosta, jotka kaikki ovat samassa hakemistossa. Tiedostoja olisi voinut jakaa myös alikansioihin, mutta näin ne löytyvät muokkausta varten kaikkein helpoimmin. Tiedostot ovat:
Etusivu on jaettu kahteen framesetiin ja kolmeen frameen eli kehykseen. Kehykset ovat vmenu johon avautuu vmenu.html, kommenu johon avautuu komennot.html ja sivu johon aluksi avautuu johdanto.html ja linkkien kautta muut sivut.
<frameset cols="25%,*" border="1"> <frameset rows="30%,*" border="1"> <frame name="vmenu" src="vmenu.html" noresize> <frame name="kommenu" src="lista.html"> </frameset> <frame name="sivu" src="johdanto.html"> </frameset>
Johdanto.html on sivuston ns. varsinainen etusivu, eli sivu jonka katselija saa eteensä ensimmäiseksi. Tällä sivulla on hyvä kertoa jotain sivuston tarkoituksesta tai sen omistajasta tai ihan mistä vain. Kannattaa hyödyntää varsinkin siinä vaiheessa kun siirrät sivuston nettiin.
Tavallisia tekstikappaleita on helppo lisätä käyttämällä kappaleen aloitus ja lopetusmerkkejä. Lopetusmerkki ei ole pakollinen, mutta mielestäni selkeyttää koodia paljon. Jos haluat laittaa kuvia sivulle on sitä varten johdanto.html alussa kommenttien sisällä kolme kopioitavaa kuvan asetus koodia ja tyyli.css tiedostossa niitä vastaavat luokat kuvien sijoitteluun. Alla on esimerkki oikealle sijoitettavan kuvan koodista.
<img class="oikkuva" src="kansiopolku/kuva.jpg" alt="kuvan kuvaus">
Tällä ja kaikilla muillakin sivuilla on linkki etusivulle eli index.html tiedostoon. Tämä varmuustoimi on tehty siltä varalta että jos laitat sivuston nettiin ja joku tulee vaikka hakukoneen kautta sivustollesi. Mahdollista on, että esim vmenu.html löytyy hakukoneella ja sittenhän sitä vierailija onkin ihmeissään kun minnekään ei pääse. Eli linkki etusivulle on hyvä olla olemassa.
<div class="pie"> <a href="index.html" target="_top">etusivulle</a> </div>
Sivuston linkit sijaitsevat vmenu.html tiedostossa ja tiedoston alussa on tyhjän linkin kopioitava koodi siltä varalta, että teet lisää sivuja tai vaikka linkität ulos sivustosta. Linkkilista on järjestetty lista jossa jokaisessa listan jäsenessä on yksi linkki jonnekin. Huomaa uusia linkkejä tehdessäsi käyttää sivuston sisäisissä linkeissä koodia jossa target="sivu" ja uloslinkittäessäsi target="_top" jolloin uusi sivu ladataan kyseiseen ikkunaan, tai target="_blank" jolloin uusi sivu avautuu uuteen ikkunaan
<ol> <li><a href="johdanto.html" target="sivu">Johdanto</a> <li><a href="komennot.html" target="sivu">Komennot</a> <li><a href="ohje.html" target="sivu">Ohjeistus</a> </ol>
Jos teet paljon uloslinkityksiä voi olla järkevää tehdä oma linkkisivunsa, joka avautuu sivu kehykseen ja vasta kyseiseltä linkit.html tms. sivulta ulos.
Tällä sivulla on lista linuxkomennoista joita olet lisännyt sivustolle. Lista on järjestämätön lista jonka jokaisessa listanjäsenessä on linkki komennot.html tiedostossa olevaan komennon ankkuriin. Eli alapuolisessa esimerkissä lukevilla komento1 ja komento2 on komennot.html tiedostossa vastineensa joihin ne viittaavat.
<ul> <li><a href="komennot.html#komento1" target="sivu">komento1</a> <li><a href="komennot.html#komento2" target="sivu">komento2</a> . . .
Aakkosjärjestyksestä ja linkkien oikeellisuudesta olet tietenkin itse vastuussa. Ohjeita tähän löytyy myöhemmin.
Tällä sivulla tapahtuu se varsinainen asia, jota varten sivusto on luotu. Komennot.html alussa on kommentoituna ns. tyhjä komento, jonka voit kopioida aina haluamaasi paikkaan. Sivu yläreunassa on aakkosellinen hakemisto, eli kirjaimet A-Z jotka toimivat linkkeinä kyseisen kappaleen alkuun. Tähän tuskin tarvitsee kajota.
<a href="komennot.html#a" target="sivu">A</a> <a href="komennot.html#b" target="sivu">B </a> . . . <a name="a"></a> <h2>A:lla alkavat komennot</h2> <a name="b"></a> <h2>B:llä alkavat komennot</h2>
Komentojen lisäämisestä enemmän kohdassa Komentojen lisääminen
Tästä ei tarvinne kertoa juuri mitään, sillä ohje.html on tämä ohejeistus. Silmillä katselu ja eteenpäin luku auttaa eniten.
Tyylitiedostssa tyyli.css on erinäisiä sivujen ulkonäköön liittyviä määrityksiä. Värit, fonttikoot otsikoissa, kappaleiden tasaus komentoriviesimerkkien muotoilu yms. löytyy sieltä. Alla on muutama esimerkki muotoiluista. Näihin voimme palata myöhemmin jos muotoiluja tarvitsee muuttaa.
/*HIIRI LINKIN PÄÄLLÄ*/
a:hover{
color: #556b2f;
background-color: transparent;
}
/* KOMENTORIVIESIMERKKI */
pre{
color: #ffffff;
background-color:#000000;
padding: 6pt;
}
/*KESKITETTY TEKSTI*/
.keski{
text-align:center;
}
Lisättäessä komento kuvauksineen tulee muokata kahta tiedostoa. Tietenkin komennot.html, missä komentojen kuvaukset ovat ja lista.html, missä on lista komennoista. Oletetaan että halutaan lisätä komento poXtor listaan (ei varmaankaan oikea komento). Muokataan ensin komennot.html tiedostoa. Sivun alusta kopioidaan tyhjä komentokoodi oikeaan paikkaan, eli tässä tapauksessa p:llä alkaviin komentoihin:
<a name="p"></a> <h2>P:llä alkavat komennot</h2> <a name="komento"></a> komento <p> komennon kuvaus tähän kappaleeseen </p> <pre>komentoriviesimerkki tähän kappaleeseen </pre> <hr>
Kun koodi on sopivassa paikassa muokataan se kyseisen komennon tiedoilla. Erityisen oleellista on käyttää ankkurissa oikeaa muotoa.
<a name="poXtor"></a> <b>poXtor</b> <p> poXtor estää käyttäjiä katselemasta pornoa X-ikkunointi systeemin nettiselaimilla. Komento ajetaan palvelimelta ja tarvitsee määreikseen tiedon mistä tarvittava estolista löytyy ja mitä sivutyyppejä suodatetaan. Jos tyyppejä ei määritellä suodatetaan vain oletustyyppi .html. Polku voi olla paikallinen tai myös netissä oleva. </p> <pre>poXtor palvelin/polku/Polku/estolista.lst .html .php .jsp poXtor http://tiukkanuttura.org/synti/itsesaastutus/porno/pahatsivut.lst </pre> <hr>
Kun kuvauksen sisältö on valmis pitää vielä muokata lista.html tiedostoa, jotta tietoa voidaan hakea myös komennon nimellä eikä vain aakkosten mukaan.
<ul> <li><a href="komennot.html#komento1" target="sivu">komento1</a> <li><a href="komennot.html#komento2" target="sivu">komento2</a> <li><a href="komennot.html#Momento8" target="sivu">Momento8</a> <li><a href="komennot.html#poXtor" target="sivu">poXtor</a> <li><a href="komennot.html#sos" target="sivu">sos</a> <li><a href="komennot.html#Sos" target="sivu">Sos</a> </ul>
Tässä tulee huomata pari asiaa ensimmäinen ja tärkein on, että <a href="komennot.html#poXtor" target="sivu"> on oikein eli linkki komennot.html#poXtor todellakikomennotn sisältää merkin #, sillä se toimii erottimena tiedostonimen ja ankkurin välillä. em. linkki viittaa nyt ankkuriin <a name="poXtor"></a> komennot.html sivulla.
Toinen asia on kirjainkoko. Windows järjestelmä ei ole kirjainkokoherkkä jolloin käytettäessä IE selainta yllä olevat linkit komentoihin sos ja Sos avaavat kohdan <a name="sos"></a>. Opera selain sen sijaan tunnistaa ainakin ensimmäisen kirjaimen koon oikein. Tällä ei kuitenkaan ole juurikaan merkitystä, sillä sos ja Sos ovat kuitenkin komennoissa perätysten joten toiminnallinen haitta on minimaalinen. Unix/Linux järjestelmissä kumpikin luultavasti menee omaan ankkuriinsa.
Näillä ohjeilla sitä pitäisi nyt sitten tulla toimeen. Tämä on helppoa kun siihen ryhtyy. Ei kuitenkaan ole maailman tyhmin ajatus varmaankaan pitää varmuuskopiota toisessa kansiossa siltä varalta, että muokatessa käsi lipsahtaa.