Keskustelu: Nettisivujen teko: Linkitys HTML:llä

Tämä ei kyllä, koske internet ohjelmointia minun mielestäni, mutta kokeilenpa kuitenkin laittaa tänne tämän, kun se näytti minusta sopivan aihepiiriin.

Miten voi linkittää nettisivuja niin, että ne ovat sivulla vierekkäin esim:

google mtv3 ohjelmointiputka msn

Minä osaan vain tässä järjestyksessä linkittää, kun tein kappaleen vaihdolla:

google
mtv3
ohjelmointiputka
msn

Ja kun yrittää laittaa ne vierekkäin niin tulee sivun koko
yhdestä rivistä aktiivinen?

Kokeilitko tällaista?

<p>
<a href="sivu1.htm">sivu 1</a>
<a href="sivu2.htm">sivu 2</a>
<a href="sivu3.htm">sivu 3</a>
</p>

Linkkien väliin voi toki laittaa, mitä mieli tekee.

Hyi, huonoja tapojako se Antti täällä opettaa :)
Oikea, semanttisesti pätevä tapa on laittaa linkit järjestelemättömään listaan, ja säätää ulkoasu sitten kuntoon CSS:llä.

html:

<ul class="linkit">
  <li><a href="sivu1.htm">sivu 1</a></li>
  <li><a href="sivu2.htm">sivu 2</a></li>
  <li><a href="sivu3.htm">sivu 3</a></li>
</ul>

CSS, jossa säädetään linkit näkymään vierekkäin:

.linkit li
{
display: inline;
}

Saanko kysyä mitä hyötyä tuollaisesta tavasta laittaa linkit on?

Saa tehtyä homman "oikein"

Hyöty on se, että Tempfilen antaman esimerkin ulkoasua voi muuttaa css:llä helpommin kuin Antin.

Vaikka html:llä voi itselläänkin luoda ulkoasun, niin pitemmän päälle se luo vain enemmän "turhaa liikennettä". Eli selkeämpää on luoda sisältö html:llä ja ulkoasu css:llä. Tyylit kannattaa säilöä erilliseen css-tiedostoon, jolloin selaimet hyödyntävät välimuistiaan, eivätkä joka kerta lataa tyylejä uudestaan.

Tyylitiedostoilla voidaan määrittää erilaiset tyylit myös eri "laitteille" (esim. kämmennäyttö tai tulostin).

Myös ilman tyylitiedostoa sivun pitäisi olla näytettävissä/käytettävissä.

List-itemeillä (<li>) listattuna valikoista tulee selkeitä myös ilman tyylejä.

Ok, sivuissani on jo muuten kaikki tyylit tehty css:llä. Pitää koittaa vielä tuota. :)

Ja vielä perusteluna tuolle "oikealle tavalle" vois olla se, että navigaatiopalkkihan tosiaan on lista linkkejä. :)

Jokainen taaplaa tyylillään:

<table border="0">
  <tr>
  <td width="250px"><a href="http://www.google.fi" alt="Kuukkeli" title="herr Google">Google</a></td>
  <td width="250px"><a href="http://www.mtv3.fi" alt="Mainos.. tv" title="&AUML;mteevee">MTV3</a></td>
  <td width="250px"><a href="https://www.ohjelmointiputka.net" alt="N&ouml;rttimesta" title="On error goto">Juoppoputka</a></td>
  <td width="250px"><a href="http://www.viruzdownloadzer.microsoft.com.uk.net.warez" alt="Mikki$oftaNerd" title="Joku kapitalistijuttu">MSN</a></td>
  </tr>
</table>

Se joka taaplaa noin, kuluttaa tarpeettomasti omaa, käyttäjän, ja koko verkon kaistaa.

Aivan. Miksi tehdä väärin kun voi saman asian tehdä yhtä vähällä vaivalla oikein? Ahkerana kännykkäsurffaajanakin pukkaa ärsyttämään tuollainen taulukoiden + weppisivujen raiskaaminen.

No voe mahoton. Nykyisenä laajakaistaliittymien kautena ei liene yhdellä nettisivulla olevan juuri latausaikaan (siis hättämölöllä, ei niillä Perkeleestä olevilla flasheilla ja javoilla) sanomista. Tottakai homman voi hoitaa fiksummasti ja ytimekkäämmästi. Kaikkein paras konsti olisi ulkoistaa koko roska tai olla tekemättä - kyse oli mahdollisuudesta.

HellCome kirjoitti:

Nykyisenä laajakaistaliittymien kautena ei liene yhdellä nettisivulla olevan juuri latausaikaan (siis hättämölöllä, ei niillä Perkeleestä olevilla flasheilla ja javoilla) sanomista.

Eip nih, mut kaista (siis se maksimaalinen bittien heilutus tietyn ajan aikana) kumminkin maksaa sivujen omistajalle. Pienempi kaista maksaa vähemmän. Joskus voi olla ihan merkittäväki ero jos tehdään tosi huonosti sivut.

Eihän tuossa taulukkoesimerkissä ole kuin <tr> ja </tr> ja 6 merkkiä enemmän kuin tuossa "oikein" tehdyssä jutussa... (width ja border määritykset voi tunkea CSS-tiedostoon) joten eipä tuo juuri enempää kaistaa kuluta :P
En kyllä itse tuota taulukkotapaa käyttäisi tälläiseen (mikäli ei ollut väliä linkkien välisellä tyhjällä tilalla)...

Antin esimerkki oli kyllä kaistaystävällisin näistä.

Lisäksi se näkökulma, että listana tehtynä otetaan huomioon graafisten selainten käyttäjien lisäksi myös:
- puheselaimet
- esim. vanhojen kännyköiden HTML-selaimet, jotka eivät näytä CSS:ää

Kuitenkin tärkein syy on tietysti se, että monta linkkiä peräkkäin _on_lista_, joten se täytyy semanttisesti myös merkitä listana, koska se on OIKEIN. Kai jokainen haluaa tehdä mieluummin oikein kuin väärin? ;)

sooda kirjoitti:

Eip nih, mut kaista (siis se maksimaalinen bittien heilutus tietyn ajan aikana) kumminkin maksaa sivujen omistajalle. Pienempi kaista maksaa vähemmän. Joskus voi olla ihan merkittäväki ero jos tehdään tosi huonosti sivut.

No juu, totta tuokin puoli. Minä vain vastasin linkkien järjestelemistä koskevaan kysymykseen. Köyhän ei kannata pitää nettisivuja joista joutuu maksamaan, ilmaisiakin kun on. Jos kaistaa halutaan säästää, niin jättää kaiken turhan pois ja kirjoittaa asiansa karsittuun xml formaattiin käyt. mahd. palj. lyh. jst. ymrt. Ei kulu kaistaa turhiin juttuihin..

HellCome kirjoitti:

Köyhän ei kannata pitää nettisivuja joista joutuu maksamaan, ilmaisiakin kun on. Jos kaistaa halutaan säästää, niin jättää kaiken turhan pois

No ho ho ho. Olipas hauska. Tarkoitus todellakin on tehdä sisältö sisältönä ja ulkoasu ulkoasuna. Eli html:llä luodaan sisältö (tässä linkkilista) ja muotoillaan se css:llä, jolloin css:n puuttuessa sivua voidaan silti katsella eri laitteissa (kämmennäyttö, puheselaimet tai tulostin).

Taulukoita käytetään niiden tarkoitukseen eli taulukkojen tekemiseen.

Azure kirjoitti:

Ja kun yrittää laittaa ne vierekkäin niin tulee sivun koko
yhdestä rivistä aktiivinen?

Tämä kohta kiinnitti vielä huomiota.. Ilmeisesti et sitten ole laittanut </a> -tageja linkkien perään. Linkillä on katsos sekä aloitus- että lopetustagi.

<a href="#">Tämä on linkki</a>

Koskapa täällä jo kaikki ovatkin toistensa kurkuissa kiinni, niin minäkin:

HellCome kirjoitti:

No voe mahoton. Nykyisenä laajakaistaliittymien kautena ei liene yhdellä nettisivulla olevan juuri latausaikaan (siis hättämölöllä[...])

Nykyisenä laajakaistaliittymien kautena on lähes mahdotonta saada pääkaupunkiseudulla asuvia ymmärtämään, että Suomessa on yhä paikkoja, joissa korkein saatavilla oleva nopeus on 45 kbps hyvällä säällä (jollei sitten halua 128 kbps ISDN-yhteyttä, joka on erittäin arka ukkoselle), ja jossa netissä olo maksaa euron tunti. Itse en siellä enää asu, mutta ei siitä niin kauaa ole, kun kesällä siellä kävin ja yritin ostaa levyjä Free record shopin sivuilta. Nätit sivut, mitä nyt pari taulukkoa siellä täällä ja puolet teksteistä kuvina - mikäs siinä tänä nykyisenä laajakaistaliittymien aikana.

Arvatkaa, tuliko kaupat?

No ei ne taulukot sitä sivua hidastanut, kuvat sen sijaan.

Nykyisenä laajakaistaliittymien kautena myös täältä Oulun korkeudelta saa valita mieleisensä liittymän. Jokaisen vain on itse päätettävä paljonko on valmis maksamaan nettiselaamisestaan. Motukka-aikana tuli itsekin tarkoin mietittyä, että millä sivuilla surffailee ja kuinka kauan. Elämässä saa hyvin vähän ilmaiseksi. Kun joku kysyy "kuinka voin asetella linkit tietyllä tavalla" niin silloin olen yleensä vastannut ensimmäisellä päähän pälkähtävällä tavalla. Se, että jokukuka saattaa hermostua siitä, on se hänen häpeänsä.

Henkilökohtaisesti en pidä mitään niin tärkeänä, että sitä rupeaisin kännykälläni selaamaan ja siitä riemusta maltaita maksamaan. Toiset tykkää, toiset ei - minä en sille mitään voi. Tietenkin on paras vaihtoehto tehdä sivut siten, että ne ovat kooltansa minimissään. Tosin ylimääräiset tyylitiedostot vievät latautuakseen oman aikansa, samoin kuin isot hättämölösivutkin. Ongelmat näissä "nopeissa" laajakaistaliittymissä ovat johtuneet jostain aivan muusta, kuin yhteyden nopeudesta ja osoitan syyttävän sormeni puhelinyhtiöitä vastaan. Esimerkiksi Oulun Puhelimen laajakaista pätkii milloin mitenkin ja Veikkauksen sivuille pääsystä on usein turha edes haaveilla.

Mahdollisimman simppelit sivut ovat kaikkein nopeimmat latautumiseltaan ja sehän on tosiasia.

<html><body>Terve</body></html>

Tuon tiedostokoko on varsin mitätön verrattuna siihen, että asia esitettäisiin vaikkapa näin:

<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en-US" lang="en-US">
<head profile="http://www.w3.org/2000/08/w3c-synd/#"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="HTML Tidy for Mac OS X (vers 1st March 2004), see www.w3.org" />

<meta name="keywords" content="W3C, World Wide Web, Web, WWW, Consortium, computer, access, accessibility, semantic, worldwide, W3, HTML, XML, standard, language, technology, link, CSS, RDF, XSL, Berners-Lee, Berners, Lee, style sheet, cascading, schema, XHTML, mobile, SVG, PNG, PICS, DOM, SMIL, MathML, markup, Amaya, Jigsaw, free, open source, software" />
<meta name="description" content="The World Wide Web Consortium (W3C) is an international consortium where Member organizations, a full-time staff, and the public work together to develop Web standards. W3C primarily pursues its mission through the creation of Web standards and guidelines designed to ensure long-term growth for the Web. Over 400 organizations are Members of the Consortium. W3C is jointly run by the MIT Computer Science and Artificial Intelligence Laboratory (MIT CSAIL) in the USA, the European Research Consortium for Informatics and Mathematics (ERCIM) headquartered in France, Keio University in Japan, and has additional Offices worldwide." />

<title>World Wide Web Consortium</title>
<link id="meta" rel="rel:meta" href="http://www.w3.org/2000/08/w3c-synd/#meta" />
<link rel="meta" href="/Overview-about.rdf" />
<link rel="stylesheet" type="text/css" href="/StyleSheets/home.css" />
<link rel="bookmark" href="#technologies" title="Technologies |" />
<link rel="bookmark" href="#news" title="News |" />
<link rel="bookmark" href="#search" title="Search |" />

<link rel="contents" href="#contents" title="Contents |" />
<link rel="bookmark" href="#Offices" title="Offices |" />
<link rel="bookmark" href="#systems" title="Systems |" />
<link rel="bookmark" href="#donors" title="Supporters |" />
<link rel="bookmark" href="#footnotes" title="Footnotes |" />
<link rel="alternate" type="application/rss+xml" title="W3C Home Page News RSS Channel" href="http://www.w3.org/2000/08/w3c-synd/home.rss" />
</head>
<body>
Moikkis doikkis!!11! =)=)=)=)=)=)=)=)=)=)=)
</body>
</html>

Tietenkin kyse on siitä, mihin sivuilla tähdätään. Jos on asiaa tai tarvitsee tietoa, niin siitä pitää olla myös valmis maksamaan. Käytännössä latausaika ei juurikaan erotu (edes modeemilla ladattuna) jos sivun koko on 10 kt vai 12 kt. Toki se voi jotakuta rassata, mutta se taas on hänen ongelmansa.

Kai tuossa viestissä jokin pointti on, se jää vain vähän hämärän peittoon...

Aikaisemmissa viesteissä yritettiin korostaa sitä, että ulkoasu ja sisältö eroteltaisiin toisistaan, jolloin eri laitteilla (myös tulevilla) voitaisiin taata mahdollisimman toimiva sisältö. Jos joku tulevaisuudessa surffailee uudella iPod "Invisiblellään" nettisivulle, jonka navigaatio on määritelty tableksi, joka leveys on 100% ja jokaisen solun leveys 250px, niin sitä ei koskaan tiedä miten navigaatio toimii. Tuskin järin toimivasti.

Sitä paetti: "myös täältä Oulun korkeudelta" plx, Oulussa on loistavat valikoimat kun katsotaan yleisesti Suomen tilannetta.

Äh! Pointti on se, että linkit voi lajitella myös tuolla tavalla. Missään ei mainittu halaistua sanaa kaistasta, kännyköistä, mobiilivempaimista, humanoideista tai naapurin juoposta yksinhuoltajasta. Teillä taitaa olla känkkäränkkäpäivät menossa, kun noin paljon ahdistaa. Ottakaa rennommin, niin helpottaa.

Olis kuitenkin kaikkien kannalta parempi jos opetettaisiin tekemään suorilta käsin oikeaoppisesti (nykytiedon mukaan siis). "Kerralla kuntoon."

Toki oikeaoppisesti kannattaa opetella tekemään, mutta tuossa ei kysytty mitään oikeaoppisesta tyylittelystä.

Miten voi linkittää nettisivuja niin, että ne ovat sivulla vierekkäin

Sen voi tehdä tablella, diveillä, välilyönneillä, javascriptillä ja vaikka millä. Katsokaas, meikäläinen ei ole ajatustenlukija. Mutta pannaan nyt niin, että minä olin kaiken aikaa väärässä, niin ei jää paha mieli. Anteeksi, anteeksi.

Kyllä nyt kasvaa e-penori. Ei vaineskaan, päteminen on turha laji. Minua kiinnostaa vain optimaalinen lopputulos. Jollaiseen pyrkiminen on siis oletuksellisesti suotavaa kaikissa tapauksissa.

Oikeaoppisen tavan käyttäminen alusta asti säästää jatkossa paljolta, siksi on hyvä tapa neuvoa myös muita siihen parhaaseen käytäntöön. Pilkunviilaajien tarkoitus ei varmastikaan yleensä ole vain päteä, vaan juurikin antaa kysyjälle parhaat eväät pärjätä paitsi nyt kohdatussa ongelmassa, niin myös tulevissa asioissa.

Hölmöähän tuo olisi antaa kysyjälle huono vastaus jos parempiakin löytyy. Sama kuin joku kysyisi tietä Oulusta Porvooseen ja sinä neuvot menemään Uzbekistanin kautta, sillä "ei kysytty mitään oikeaoppisesta reitistä".