Keskustelu: Nettisivujen teko: Apua nettisivujen tekoon...

Jatkoa numerosta https://www.ohjelmointiputka.net/keskustelu/19651-ohjelmointiapua-kuviin-ja-ääkkösiin ...

Minulla on vieläkin joitakin ongelmia nettisivujen toteuttamisen ja koodauksen kanssa. Tässä vielä kysymyksiä:

Kuinka tekstiä saa sijoitettua eri kohtiin samalla rivillä? Haluaisin öseuraava sivuö -tekstin olevan rivin oikealla reunalla ja öedellinen sivuö -tekstin saman rivin vasemmalla reunalla. Tämä näyttäisi paremmalta kuin se, että ko. tekstit ovat eri riveillä.

Kuinka tekstiä saa keskitettyä? Haluaisin keskittää otsikot.

Kuinka fontteja voi muotoilla? Eli miten muutetaan fontin tyyppiä ja kokoa?

Haluaisin sivun logon olevan vähän näyttävämmän kuin pelkkä perusfontilla kirjoitettu teksti. Osaisiko joku suositella jotain ilmaista ja helppokäyttöistä logonsuunnitteluohjelmaa?

Kuinka sivulle saa Google-mainoksia? Haluaisin niitä oikeanpuolimmaiselle palstalle, koska se ammottaa tyhjyyttään.

Heikki-Johannes kirjoitti:

Kuinka tekstiä saa sijoitettua eri kohtiin samalla rivillä? Haluaisin öseuraava sivuö -tekstin olevan rivin oikealla reunalla ja öedellinen sivuö -tekstin saman rivin vasemmalla reunalla. Tämä näyttäisi paremmalta kuin se, että ko. tekstit ovat eri riveillä.

<elementti style="text-align: left|right"></elementti>

Heikki-Johannes kirjoitti:

Kuinka tekstiä saa keskitettyä? Haluaisin keskittää otsikot.

<center><h1>Otsikko</h1></center>

Heikki-Johannes kirjoitti:

Kuinka fontteja voi muotoilla? Eli miten muutetaan fontin tyyppiä ja kokoa?

<elementti style="font-size: px|pt; font-family: tekstin tyyppi"></elementti>

Macro kirjoitti:

<center><h1>Otsikko</h1></center>

http://www.w3schools.com/TAGS/tag_center.asp:

The <center> tag is supported in all major browsers. However, it is deprecated and should be avoided!

Eli tuossakin tapauksessa mieluummin käyttäisi CSS:sää (text-align).

Heikki-Johannes kirjoitti:

Kuinka tekstiä saa sijoitettua eri kohtiin samalla rivillä? Haluaisin öseuraava sivuö -tekstin olevan rivin oikealla reunalla ja öedellinen sivuö -tekstin saman rivin vasemmalla reunalla. Tämä näyttäisi paremmalta kuin se, että ko. tekstit ovat eri riveillä.

CSS

foo
{
  text-align: left;
}

Heikki-Johannes kirjoitti:

Kuinka fontteja voi muotoilla? Eli miten muutetaan fontin tyyppiä ja kokoa?

CSS

p
{
  font-family: Verdana, Arial, sans-serif;
  font-weight: bold;
  font-size: 12px;
}

Heikki-Johannes kirjoitti:

Haluaisin sivun logon olevan vähän näyttävämmän kuin pelkkä perusfontilla kirjoitettu teksti. Osaisiko joku suositella jotain ilmaista ja helppokäyttöistä logonsuunnitteluohjelmaa?

Helppokäyttöisyys on kiinni käyttäjän taidoista. Netissä voi käyttää Sumopaint-"ohjelmaa" tai voit ladata koneelle Gimpin.

Heikki-Johannes kirjoitti:

Kuinka sivulle saa Google-mainoksia? Haluaisin niitä oikeanpuolimmaiselle palstalle, koska se ammottaa tyhjyyttään.

[offtopic]Itse en ainakaan pidä erityisesti mistään mainoksista. Esimerkiksi Googlen mainokset suodattuvat automaattisesti pois. Jospa kehittelet vielä ajatusta jollekkin sisällölle oikeaan reunaan tai teet muusta sisällöstä leveämpää?[/offtopic]

jos haluat esm sanoihin pitkiä välejä, tee väliin saman väristä tekstiä kuin taustasi. eli <font color="#ffffff">aaaaaaaaaa</font> antaisi a-merkkien pituisen välin.

Höpö höpö. :D Kannattaisi itse opetella omat asiat ennen kuin neuvoo. Hyvä etten penkiltä tippunut, kun luin viestisi.

sammakkomies kirjoitti:

jos haluat esm sanoihin pitkiä välejä, tee väliin saman väristä tekstiä kuin taustasi. eli <font color="#ffffff">aaaaaaaaaa</font> antaisi a-merkkien pituisen välin.

Sinä vasta huumorimiehiä olet!!!

Itse käytän tuota. Mun sivulle tulee nuolia niin se on aivan mahtavan hyvä. ainaski jos ei ota kaikkia välilyöntejä

Juu, mut se on todella huono tyyli.

toinen tyyli on tehdä kuva joka linkkaa hlutulle sivulle ja asettaa se sinne minne se halutaan. Tai sitten käyttä välilyöntejä

Ei sivulla - ainakaan normaalilla - kuulu olla pitkiä välilyöntejä.

sammakkomies kirjoitti:

jos haluat esm sanoihin pitkiä välejä, tee väliin saman väristä tekstiä kuin taustasi. eli <font color="#ffffff">aaaaaaaaaa</font> antaisi a-merkkien pituisen välin.

Paljon parempi käyttää css..mieti nyt jos katsot sivua esim. kännykällä jossa on pieni näyttö ja sivu tulee täyteen outoja välilyöntejä normaalisti näkymisen sijasta.

&nbsp;-tagikin on keksitty =)

Macro kirjoitti:

&nbsp;-tagikin on keksitty =)

Se ei ole tagi vaan entiteetti (merkkiviittaus). Nbsp eli non-breaking space on välilyönti, jonka kohdalta riviä ei saa katkaista. Sitä ei ole tarkoitettu pitkien välien tekemiseen tai edes kooditagien toteuttamiseen vaan typografisesti niihin tilanteisiin, joissa riviä ei todella haluta katkaistavan. Esimerkkejä oikeasta käytöstä ovat 12 µm ja 95 %.

Ylimääräisiä välilyöntejä saa CSS:n white-space-ominaisuudella. Ainoat järkevät käyttötilanteet ovat oikeastaan kooditagit ja ASCII-taide.

<p>Saako<span style="white-space: pre;">     </span>välejä?</p>
<pre>
Tämä on valmiiksi muotoiltua tekstiä...
    Sisennyskin toimii.
  Tagi 'pre' on hyvä esimerkiksi kooditageille.
</pre>

Itse ongelmaan ehdottaisin inline-block-elementtiä, mutta tuki taitaa joissain selaimissa olla heikko. Toinen mahdollisuus on yhden pikselin kokoinen läpinäkyvä GIF-kuva, jota venytetään CSS:llä.

<p>Väli <span style="display: inline-block; width: 3em;"></span> toimii</p>
<p>Väli <img src="pikseli.gif" alt="" style="height: 1px; width: 3em;" /> toimii</p>

Ei semmoista tilannetta käytännössä olekkaan, jossa täytyy saada ylimääräisiä välilyöntejä, siis OIKEASTI.

alottelija/noob kirjoitti:

Paljon parempi käyttää css..mieti nyt jos katsot sivua esim. kännykällä jossa on pieni näyttö ja sivu tulee täyteen outoja välilyöntejä normaalisti näkymisen sijasta.

Olet oikeassa. Puhelimella yleensä menee kaikki teksti ja kuvat päin vi... hanuria. Ei kannata tehdä välilyöntejä.

sammakkomies. Tässä alkaa sun kanssas hermot mennä. Kannattaa painaa sitä virtanappulaa ja mennä lukemaan joku hyvä kirja.

sammakkomies menee lukemaan nyt niitä css-oppaita, ennen kuin rupeaa opettamaan koodaamista yhtään kenellekään.

Tästä menee idea ku teen jotain muuta ku pelaan niin sit vaan tyrkytetään et mene pois mene pois luem kirja opettele oppaat. Ei jää päähän ne teidän oppaanne niinkuin ei mikään muukaan joka on suunnilleen pakotettu tekemään.

Lue uudestaan.

Valitettavasti aika on rahaa ja raha on leipää, joten samojen perusasioiden henkilökohtaiseen opettamiseen vapaaehtoisvoimin pyöritettävällä keskustelusivustolla ei millään riitä resursseja. Varmasti kaikki oppaiden kirjoittajat kuitenkin tekevät oppaista mieluusti helppolukuisia ja helposti ymmärrettäviä, joten rakentavaa kehityspalautetta voi ja onkin suotavaa antaa.

Oppaita ei käytetä niin, että ne luetaan kerran läpi ja sitten osataan kaikki, vaan ajatuksella, ja kokeillen samalla kaikkia jänniä juttuja. Pidä vaikka editori auki samalla kun luet.

no esm php oppaassa jää epäselväksi että mitä väliä sillä on että käyttääkö php tä vai ei. Saman näköistä tulee kuitenkin. Siis mitä eroa sillä on?

Kyllä sillä on väliä käyttääkö PHP:tä sivuilla vai ei. Koita tehdä foorumi HTML:ää käyttäen.

mutta oppaassi ei 3 ekassa kappaleessa ollut selkeästi sen kielen järkevyyttä. Enkä varmana ala enään puhelimella opettelemaan.

Voit kirjoittaa ja lukea tiedostoja (myös salaisia), käsitellä tietokantoja, lähettää sähköpostia, jne. Esimerkiksi foorumin toteuttaminen olisi mahdotonta ilman PHP:tä, tai jotakin muuta palvelimella suoritettavaa ohjelmointikieltä. CGI:kin toki käy, mutta PHP on sen verran hyvä kieli, että sen käyttö on suositeltavaa.

Edit: Printtaapas ne oppaat ja lue vaikka iltalukemiseksi, niin alat sitten pikku hiljaa oppia. Mutta ensin luet HTML-oppaita netistä, etkä kysele näitä tyhmiä kysymyksiä.

Vielä on ongelmia jäljellä... Alla on style.css-tiedosto ja sivu.html-tiedosto, jotta voitte neuvoa minua paremmin.

Tuo tekstin sijoittaminen saman rivin vasempaan ja oikeaan reunaan ei tunnu millään onnistuvan. Yritin kyllä sitä temppua css-koodilla div#keskipalsta p.vasen {text-align: left;} ja sen sijoittamisella html-tekstiin yllä linkkaamassani ketjussa ollutta ohjetta mukaillen (<p class="vasen">), mutta "Edellinen sivu" ja "Seuraava sivu" ovat eri riveillä, vaikka "Seuraava sivu" -tekstin saakin sinne oikeaan reunaan. Eli millaisella koodilla ko. tekstit saisi SAMALLE RIVILLE, toisen vasempaan ja toisen oikeaan reunaan? Voisitteko antaa ihan sen konkreettisen koodipätkän (css-tiedostoa varten) ja sen sijainnin koodiin (html-tiedostoa varten)?

Keskitys kyllä onnistui tuolla parjatulla <center>-komennolla, muttei komennolla div#keskipalsta p.keski {text-align: center;} ja sen sijoittamisella html-koodiin. Ongelma on siis periaatteessa sama kuin edellisessä kohdassa. Mitä teen väärin? (Tämä ei tosin sinänsä haittaa minua, koska tuo toinen komento jo keskitti tekstin.)

Haluaisin sivuston logon hyvin lähelle sivun ylälaitaa, niin kuin logot useimmilla saiteilla ovat, ja lisäksi yhtä palstaa leveämpänä (palstattomana). Kuinka saan raivattua logolle oman palstattoman tilan ylhäälle ja palstajaon (palstoja on kolme) alkamaan vasta logon alapuolelta? Kuinka kuvalogon (esim. jpg-kuvan) tai tekstilogon voi sijoittaa tarkalleen haluamaansa kohtaan (välittämättä tavanomaisista tekstin tasauksista ja muun sivun palstajaosta)? Ja pyytäisin jälleen konkreettista koodipätkää ja sen sijoittamista html-koodiin.

Onko tuo tekstin katkaisu ilman väliä ja uuden rivin aloitus oikein kooditettu? Eli:

<p>Tekstiä tekstiä tekstiä tekstiä tekstiä...
<br>tekstiä tekstiä tekstiä</p>

style.css

body {
    line-height: 140%;
    margin: 5em auto;
    width: 90%;
    padding: 0 1em;
}
div#oikeapalsta {
    width: 20%;
    float: right;
    margin-left: 1em;
    text-align: justify;
}
div#keskipalsta {
    margin-left: 23%;
    margin-right: 23%;
}
div#keskipalsta p {
    text-align: justify;
}
div#keskipalsta p.keski {
    text-align: center;
}
div#keskipalsta p.oikea {
    text-align: right;
}
div#vasenpalsta {
    width: 20%;
    float: left;
    margin-right: 1em;
    text-align: justify;
}
img.kuva-oikea {
    float: right;
    margin: 1em;
}
img.kuva-vasen {
    float: left;
    margin: 1em;
}
img.kuva-keski {
    float: middle;
    margin: 1em;
}

sivu.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-15">
<title>Otsikko</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="oikeapalsta">

</div>
<div id="vasenpalsta">
<a href="index.html">Etusivu</a>
</div>
<div id="keskipalsta">

<center><h1>Otsikko</h1></center>

<p>Tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä...
<br>tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä</p>

<p class="oikea"><a href="sivu3.html">Seuraava sivu</a>
<p><a href="sivu1.html">Edellinen sivu</a>
</div>
</body>
</html>

testaa tätä:

edellinen<font color="#ffffff">aaaaaaaaaaaaaaa</font>seuraava

lisää tai vähennä a kirjaimia niin että on sopiva. Nopea mutta monien selainten vuoksi vaikea tapa jos joku näyttää myös kirjaimet esm. Sivun ulkopuolella. Ei paras ratkaisu

Ei, ei, ei! Ei missään nimessä tehdä noin. Tässä sinulle sellainen hyvä tapa. Nuo sammakkomiehen neuvot ovat tähän mennessä olleet ihan huuhaata. Ja sammakkomiehelle. Sinulle on huomautettu tuosta "välilyönti"tavasta aivan miljoona kertaa. Kannattaa opetella ensin omat asiat kuntoon, ennen kuin alkaa neuvomaan toisia. ;)

*** style.css
#edellinen {
	float: left
}

#seuraava {
	text-align: right;
}

*** sivu.html
<div id="edellinen">Edellinen</div>
<div id="seuraava">Seuraava</div>

Ei kannata käyttää näitä elementtikohtaisia id/class lohkoja css-koodissa. Laitat noiden div#...-juttujen tilalle #idnimi, ja sinne laitat sitten text-align: center tms. mitä haluat.

Logon saat niin yläreunaan kuin mahdollista, kun kirjoitat css-tiedostoon seuraavasti:

body {
	margin-top: 0px;
}

sammakkomies kirjoitti:

testaa tätä:

edellinen<font color="#ffffff">aaaaaaaaaaaaaaa</font>seuraava

lisää tai vähennä a kirjaimia niin että on sopiva. Nopea mutta monien selainten vuoksi vaikea tapa jos joku näyttää myös kirjaimet esm. Sivun ulkopuolella. Ei paras ratkaisu

Ei näin.

Eikös tässä tilanteessa voisi tehdä näin:

<div style="display: inline;"><p style="text-align: left;">Edellinen</p><p style="text-align: right;">Seuraava</p></div>

Kokeneemmat korjaa. :) En oo ite koskaa tommosta tarvinnu mut jotai tuohon tyylii :)

Edit: Damn, Metabolix oli nopeempi :DD

Edit2: Oi, anteeksi oli jäänyt vähän koodi kesken :D

Mielestäni sammakkomiehen voisi pännäillä ihan suosiolla :-P

Sinulla on aika metkasti ripoteltu tuota p-tagia tuonne. Eli p-tagi tekee kappalejaon. Joten jos on niin kuin sinun koodissasi tuolla nuo linkit ja niiden välissä p niin tietysti se heittää toiselle riville. Muutenkin nuo p-tagit tulisi sulkea.

HTML

<p>
  <a id="prev" href="sivu3.html">Seuraava sivu</a>
  <a id="next" href="sivu1.html">Edellinen sivu</a>
</p>

CSS

#prev{ float: left; }
#next{ float: right; }

Keskittäminen center-tagilla ei ole suositeltavaa. Kannattaa tarkistaa tuota syntaksia, jota noissa viittauksissa käytät (en muista itsekään täysin miten se menee). Esimerkiksi tässä tapauksessa voit käyttää suoraan h1-tagia. Kannattaa testata vaikka värittämällä kohdetta tai sen taustaa, että viittaus tosiaan kohdistuu haluttuun elementtiin.

CSS

h1{ text-align: center; }

ok. Olen vain tottunut siihen että pitää käyttää huonoja keinoja koska aloitin koodauksen wiki sivuilla.

Wiki-sivutkin tottelevat CSS-koodia. MediaWikissä on Järjestelmäviesti:Common.css, ja lisäksi koodiin voi upottaa divejä ja niille style-attribuutti.

eli saisin wikisivuilla toimimaan kaikki html jutut niillä tageilla joilla haluan? Jee

<div style="css-koodia tähän">tähän tekstiä</div>

Ihan kaikki määrittelyt eivät toimi, mutta suurin osa kyllä.

mutta esm kun (kirotussa)hikipediassa on <right> tagi niin voinko leikkiä ja määrittää saman lopputuloksen mutta vaikka silleen et se toimii <jee> tagilla? Vähän siistiä. Mietinki et miksi ne ei toiminu wikipediassa(, kirotun otrfanin käyttämällä sivulla) ku hikipediassa toimi. :) kiitos.

Ei voi laittaa niin. Esimerkki-sanan lyhenne on muuten esim. eikä esm. Aloita uusi aihe näille kysymyksillesi, sammakkomies.

right-tagia ei ole olemassa, se on jokin laajennus. Voit käyttötarkoituksesta riippuen tehdä sen float: right; -jutulla (koko div tms), tai text-align: right; (sisällön teksti)

Kaikki MediaWiki softan artikkelit ajetaan PHP-tulkin läpi (Kuten Ohjelmointiputkan viestit), niin näissä muutetaan kaikki [ b]-ja sellaiset tagit html-koodiksi.

kiitos. Tuo php oli erittäin kiinostava ohjeistus. Nyt voin tehdä vaikka mitä ku muistas ne koodit

apua. Nyt pitäisi saada tarkat ohjeet että miten wiki-site sivulle saa right tagin. Pliis. Oon pulassa. Menee juttu pieleen jos en saa jotaki neuvoa. Tarvitaanko css sivun koskettelua nyt? Apuaa

sain jo

Tuo css-tiedostoni muuttui uuteen uskoon, joten tässä se tulee uudelleen kommentoitavaksi. Jos siinä on jotakin huomautettavaa, antakaa palaa:

body {
    line-height: 140%;
    margin: 5em auto;
    width: 90%;
    padding: 0 1em;
    margin-top: 0em;
}

#logo {margin-left: 30%;
    margin-right: 23%;
    margin-top: 0em;
    text-align: justify;}

#oikeapalsta {
    width: 20%;
    float: right;
    margin-left: 1em;
    text-align: justify;
    margin-top: 0em;
}
#keskipalsta {
    margin-left: 23%;
    margin-right: 23%;
    margin-top: 0em;
    text-align: justify;
}

#edellinen { float: left; }
#seuraava { float: right; }
h1 { text-align: center; }
h2 { text-align: center; }
h3 { text-align: center; }

#vasenpalsta {
    width: 20%;
    float: left;
    margin-right: 1em;
    margin-top: 0em;
    text-align: justify;
}
img.kuva-oikea {
    float: right;
    margin: 1em;
}
img.kuva-vasen {
    float: left;
    margin: 1em;
}
img.kuva-keski {
    float: middle;
    margin: 1em;
}
img.logo {
    float: middle;
    margin: 0em;
}

Sivu.html-tiedosto on suht' sama kuin tuossa yllä, paitsi että loppuosa on muuttunut:

<p><a div id="edellinen" href="sivu1.html">Edellinen sivu</a>
<a div id="seuraava" href=sivu3.html">Seuraava sivu</a></p>
<p><a div id="edellinen" href="lisäsivu.html">Lisää tietoa</a></p>

Nyt ongelmana on se, että tuo Lisää tietoa -linkkiteksti menee jostain syystä heti tuon Edellisen sivun perään (Seuraavaa sivua ennen, samalle riville), vaikka siinä pitäisi kaiken järjen (=koodin) mukaan olla riviväli. Sama tapahtuu koodilla <p><a href="lisäsivu.html">Lisää tietoa</a></p>. Mitä teen väärin? Eli kuinka tuon Lisää tietoa saisi omalle uudelle rivilleen vasempaan reunaan?

Ongelma ainakin näennäisesti häviää poistamalla (tai vaihtoehtoisesti korvaamalla)

#edellinen{ float: left; }

koodilla

#edellinen { text-align: left; }

Mikä ihmeen <a div ...>? Nyt on kyllä jokin aivan perusasia hukassa, ota div pois. :) Lisäksi sama id saa olla vain yhdellä elementillä koko sivulla, eli ota se lisätietolinkiltä pois. (Usean elementin tyyleihin kuuluu käyttää luokkia.)

Yksi mahdollisuus olisi tällainen:

<ul id="linkit">
  <li><a id="edellinen" href="...">Edellinen</a></li>
  <li><a id="seuraava" href="...">Seuraava</a></li>
  <li><a href="...">Lisää tietoa</a></li>
</ul>

#linkit, #linkit li {
  margin: 0.5em 1em;
  padding: 0;
  list-style-type: none;
}
#linkit li {
  display: block;
  text-align: center;
}
#edellinen {
  float: left;
}
#seuraava {
  float: right;
}

Tässä linkit on laitettu listaelementtiin, jolloin CSS-tiedoston (tai koko CSS-tuen) puuttuessa ne näytetään tavallisena listana.