ohjeita web-sivuston tekijälle
Koska HTML-kieli luotiin alusta alkaen tehokkaaksi tavaksi jakaa tietoa, on sillä varsin yksinkertaista toteuttaa informatiivisia listoja. Tässä kappaleessa tutustutaan niistä tärkeimpiin, eli järjestämättömään ns. mylbyrälistaan ja järjestettyyn numerojärjestettyyn listaan.
Erittäin käyttökelpoinen ja helppo tehdä. Rakenne:
<ul> <li>asia yksi <li>asia kaksi <li>asia kolme </ul>
Valmiina selaimessa lista näyttää seuraavalta:
Huomaa, että tarvetta <p>- ja </p>- tai <br>-tageille ei ole. Jotkut selaimet saattavat näyttää listan myös ranskalaisilla viivoilla:
- asia yksi
- asia kaksi
- asia kolme
Teknisesti hyvin samankaltainen, mutta ulkoasultaan ja käyttökohteiltaan erilainen.
<ol> <li>asia yksi <li>asia kaksi <li>asia kolme </ol>
Ainoa ero on <ul>:n muuttuminen <ol>:ksi (unordered vs. ordered)
Esimerkki näyttää selaimessa seuraavalta:
Silloin tällöin tarvitaan listaa, jonka ensimmäisellä rivillä oleva termi selostetaan sitä seuraavilla, sisennetyillä, riveillä. Listaa voidaan käyttää myös sisällysluettelon luomiseen.
HTML:llä tämä luodaan käyttämällä <DL>-tagilla luotavaa määritelmälistaa. Perusrakenne on seuraava:
<DL> <DT>Otsikko, eli termi joka selostetaan <DD>Selitys </DL>
Luodaanpa nyt dokumentti, jossa käytetään kaikkia edellä esiteltyjä listatyylejä:
<HTML> <HEAD> <TITLE>Listat</TITLE> </HEAD> <BODY> <H1>Listojen käyttäminen HTML:ssä</H1> <p>Järjestämätön lista:</p> <ul> <li>asia yksi <li>asia kaksi <li>asia kolme </ul> <P>Järjestetty lista:</p> <ol> <li>asia yksi <li>asia kaksi <li>asia kolme </ol> <p>Määritelmälista:</p> <DL> <DT>Ensimmäinen otsikko <DD>Selitys otsikon aiheelle <DT>Toinen otsikko <DD>Selitys otsikon aiheelle </DL> </BODY> </HTML>
Selain näyttää dokumentin seuraavasti:
Listat ovat erittäin tehokas ja käyttökelpoinen tapa jakaa informaatiota. Käytä niitä mielummin kun epäselviä <br>-tagilla muodostettuja listoja.
Seuraava sivu: Taulukot.
Moikkelis! Miten oikeen saan oman tekstini exploreriin se on tämmöinen:
<html>
<title>omat.html</title>
</html>
<body bgcolor="#oo8ooo">
<h1 align=center>Tää otsikko on keskellä VAUU!!!</h1>
<p>Katos tehään <a href="http://www.freewebs.com/liuskakala">LINKKI</a><br>Tai lähetä vaikka <a href="mailto:petterizitting@luukku.com">Mailia mulle.</p>
<p>Tähän asioita</p>
<ol>
<li>Jee
<li>Vautsi!
<li>Vau
</ol>
<ul>
<li>Jee!
<li>Vautsi
<li>Vau!
<li>COOLIA!
</ul>
<p>Määritelty</p>
<dl>
<dt>VAU
<dd>hianoa
<dt>Vau
<dd>hienoa
</dl>
<p align=right> katos tää tekstikappale<br>oikeesee tasattu</p>
<p> tehään vaikka <b>VAHVISTUSTA</b> tai vaikka <i>kursivoitua</i><br>Ja kun kirjotat tt jne. <tt>niin saat kirjotuskone tyylii...</tt></p>
<p> <font size=20> Taikka vaikka ISOO TEKSTII!!!</font><br>Tai vaikka <font color="#rrggbg">Värillistä</font></p>
<p>Miksei vaikka <font size=10>I</font>so<font size=15>A</font></p>
<p>Tai tee vaikka ® iimi
<h1>Tos on Bodyn juttujaa...</h1>
<h3>Ja näin ikään saatiin väliotsikko</h3>
<h2>Ja nyt saatiin pienempää kokoo tätä väliotsikkoo...:D</h2>
<p>Ja nyt kun laitan br nii tää katkee<br>Eikö vaan???</p>
<p>Elikkäs... aloita vaikkapa title (<>) ja loppupääte on / kauttamerkki</p>
<p>Ja noin kun laitettiin se p ja /p lopuksi NIIN SAATIN KAPPALE</p>
<p>Tähän kuva: <img src="ollo.jpg">Näetkö??</p>
</body>
</html>
Se ei aukea explorerissa kuin TÄNÄ SAMANA TIEDOSTONA (teksti)!!!!!!!!!!! Mitä tehdä? Mailaa mulle.
Määritelmän mukaan <li>-tagit kuuluu sulkea (</li>), vaikka ne toimivat sulkemattakin. Eli aivan validisti nuo listasi olisivat esim.
<ul>
<li>asia yksi</li>
<li>asia kaksi</li>
<li>asia kolme</li>
</ul>
miten saa oman kuvan listan merkiksi?
9.11.2005 09:47Omia kuvia listamerkeiksi saa CSS:llä.
<ul style="list-style-image: url('pallo.png');">
<li>merkintä</li>
<li>toinen</li>
</ul>
Mitenkäs saisi sellaisen listan, jossa on useita listattuja, joilla kaikilla on monta arvoa.
Tyyliin:
Nimi NO. Hinta Saatavana Alennus
Auto 1 10 000€ Ei 5%
Televisio 2 2000€ Kyllä 10%
MP3-Soitin 3 500€ Kyllä 30%
DVD-Soitin 4 800€ Ei 9%
Tietokone 5 2500€ Ei 20%
Ja jotka saisi järjestettyä minkä tahansa arvon mukaan arvoa napauttamalla (nyt järjestetty numeron mukaan)
Järjestäminen ja arvon nimen laittaminen kehyksen yläpalkkiin tällä hetkellä ongelmana.
Kiitos.
No nyt se nakkasi välit poissa, listan tarkoitus näyttää lähinnä tältä
Nimi ------- NO. Hinta --- Saatavana Alennus
Auto ------- 1 - 10 000€ - Ei ------- 5%
Televisio -- 2 - 2000€ --- Kyllä ---- 10%
MP3-Soitin - 3 - 500€ ---- Kyllä ---- 30%
DVD-Soitin - 4 - 800€ ---- Ei ------- 9%
Tietokone -- 5 - 2500€ --- Ei ------- 20%
Toivottavasti nyt näyttää jo fiksummalta.