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>
moi kaikki
5.3.2007 12:31miten helkutissa näit tehää????
7.3.2007 19:44^^ Yleensä ihan tyhjällä tekstitiedostolla aloitetaan koko homma. :]
17.4.2007 14:33Mites sitten kun haluaa, että listan kohtaa klikkaamalla aukeaa uusi alavalikko? Saako tehtyä HTML:llä vai pitääko käyttää jotain muuta?
13.6.2007 14:48Sun täytyy pistää linkki just listaan että se voi avata uuden paikan.
16.8.2007 09:13hjä hjä hjää
4.11.2007 13:42Mitenkäs sitte tota väriä muutetaa noihi teksteihi?
asdf
9.1.2008 08:29asd
17.1.2008 08:58nii just!
28.1.2008 09:43Hazuu, tekstien väri määräytyy tekemäsi tyylitiedoston pohajlta, voit toki myös laittaa eteen <font=#värikoodi">tekstit tähän</font>
23.2.2008 15:32Miksi on tehty mahdolliseksi tuollainen späm. Tämä keskustelu on pian täynnä "asfasdfasdf-kamaa"
18.3.2008 21:38SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM
12.8.2008 17:04Mitenkä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.