ohjeita web-sivuston tekijälle
BODY-osassa on varsinainen dokumentin sisältö. Jos kirjoitat sinne tekstiä, näkyy se selaimessa vakiomuotoisena, yhtenä pötkönä olevana tekstimassana. Tässä kappaleessa tutustutaan menelmiin, joilla tekstin rakennetta voidaan muokata ja ulkoasua vaihtaa. Myöhemmät kappaleet keskittyvät lähinnä muiden elemettien lisäämiseen (kuvat jne.)
Tässä vaiheessa on jo viisasta huomata, ettei isoilla ja pienillä kirjaimilla tageissa ole eroa, vaikkakin usein suositellaan käytettäväksi isoja kirjaimia. Tämä puhtaasti ulkonäön vuoksi, toiminnallista eroa ei ole. HTML:ssä pelkillä rivinvaihdoilla ei ole väliä. Seuraavat dokumentit näkyvät selaimessa täsmälleen samalla tavalla.
<HTML> <HEAD> <TITLE>Teksti-esimerkki 1</TITLE> </HEAD> <BODY> Hello world! </BODY> </HTML> <HTML> <HEAD> <TITLE>Teksti-esimerkki 2</TITLE> </HEAD> <BODY> Hello world! </BODY> </HTML> <HTML> <HEAD> <TITLE>Teksti-esimerkki 3</TITLE> </HEAD> <BODY> Hello world! </BODY> </HTML>
Kaikki edellä olevat dokumentit näyttävät seuraavalta:
HTML-koodissa olevia ylimääräisiä välilyöntejä ja rivinvaihtoja ei siis huomioida.
Kuten mainittua, teksti ilman mitään lisätageja, esitetään BODY-osassa sellaisenaan. Ensin tutustutaan tapoihin järjestää tekstimassa kappaleisiin.
Tutkitaan seuraavaa dokumenttia:
<HTML> <HEAD> <TITLE>Tekstikappale-esimerkki</TITLE> </HEAD> <BODY> Tämä dokumentti esittelee HTML-kielen mahdollisuuksia esittää tekstiä. Erityisen suurella mielenkiinnoon kohdistamme tämän toisen kappaleen esittämistapaan. </BODY> </HTML>
Tämä dokumentti näyttää seuraavalta:
Kun teksti halutaan jakaa kappaleisiin, sijoitetaan se <P>- ja </P>-tagien väliin. Eli jokainen kappale jaetaan näiden tagien avulla omaksi kokonaisuudekseen BODY-osan sisälle.
<HTML> <HEAD> <TITLE>Tekstikappale-esimerkki 2</TITLE> </HEAD> <BODY> <p>Tämä dokumentti esittelee HTML-kielen mahdollisuuksia esittää tekstiä.</p> <p>Erityisen suurella mielenkiinnoon kohdistamme tämän toisen kappaleen esittämistapaan.</p> </BODY> </HTML>
Nyt dokumentti näyttää seuraavalta:
Teksti on kauniisti omissa kappaleissaan. Huomaa, että aina käyttäessäsi <P>- ja </P>-tageja, selain käyttää korkeussuunnassa tilaa, näin dokumentista tulee ilmava.
Otsikot ovat HTML-kielessä luonteeltaan tekstikappaleita. Ne esitetään automaattisesti suuremmassa koossa. Asiaa voidaan hahmottaa ajattelemalla, että jos jokin tekstikappale (joka siis olisi <p>- ja </p>-tagien välissä) halutaan otsikoksi, sijoitetaan se tässä esiteltävien otsikko-tagien väliin.
<H1> </H1> <H2> </H2> <H3> </H3> jne...
Alaotsikoita varten löytyy lisää. Käytännössä tarvetta ei ole <H3>-tasoa alhaisemmille otsikoille, sillä monet selaimet esittävät ne leipätekstiä pienemmällä kirjaisinkoolla, joka ei ole ulkoasun loogisuutta ajatellen hyvä asia. Tietenkin niitä voidaan käyttää muissa yhteyksissä, mutta käytännössä ne ovat turhia.
Tutkitaanpa tilannetta käytännössä seuraavalla dokumentilla:
<HTML> <HEAD> <TITLE>Otsikot-esimerkki</TITLE> </HEAD> <BODY> <H1>Pääotsikko</H1> <p>Tämä dokumentti esittelee HTML-kielen mahdollisuuksia esittää tekstiä ja otsikoita.</p> <H3>Väliotsikko, taso 3</H3> <p>Erityisen suurella mielenkiinnoon kohdistamme otsikoiden esittämistapaan.</p> </BODY> </HTML>
Se näyttää selaimessa seuraavalta:
Tähän mennessä esitetyillä muotoiluilla selviää jo varsin pitkälle, mikäli tarkoituksena on tuottaa informatiivista tekstiä, jonka tärkein edellytys on selkeä jaoittelu aiheittain.
Mikäli on tarpeen katkaista jokin tekstirivi, voidaan käyttää <br>-tagia. Esimerkiksi seuraava dokumentti:
<HTML> <HEAD> <TITLE>Rivivaihto-esimerkki</TITLE> </HEAD> <BODY> <p>Tämä rivi katkeaa tästä<br> eikö totta?</p> </BODY> </HTML>
Se näyttää selaimessa seuraavalta:
Edellä esitellyt tekstikappaleet sijaitsevat kaikki vasemmassa reunassa, jättäen oikealla ns. liehureunan. On mahdollista määrittää kappaleille muukin tasaus. Tämä tapahtuu käyttämällä ALIGN-attribuuttia:
<H1 ALIGN=center>Tämä otsikko on keskellä</H1> <H2 ALIGN=right>Tämä otsikko on oikealla</H2> <p ALIGN=right>Tämä tekstikappale on tasattu oikeaan reunaan.</p>
Kaikkein vanhimmat selaimet eivät tue näitä tasauksia. Huomaa, että molempia arvoja (center ja right) voidaan käyttää kaikissa edellä mainituissa kappalekomennoissa.
Esimerkin vuoksi tutkimme seuraavaa dokumenttia:
<HTML> <HEAD> <TITLE>Tekstikappaleiden tasaus</TITLE> </HEAD> <BODY> <H1 ALIGN=center>Tämä otsikko on keskellä</H1> <p ALIGN=right>Tämä tekstikappale on tasattu oikeaan reunaan.</p> </BODY> </HTML>
Selaimessa edellä oleva dokumentti näyttää seuraavalta:
Nyt tutustumme lihavoinnin ja kursiivin käyttämiseen HTML-dokumenteissa.
Lihavoinnin lisääminen on hyvin helppoa. Sijoitetaan teksti vain tagien väliin:
<B>lihavoitava teksti</B>
Kursiivi saadaan yhtä yksinkertaisesti:
<I>kursivoitava teksti</I>
Saamme kätevästi myös muutettua tekstin kirjoituskone-tyyliseksi (tekstin jokainen kirjain on yhtä leveä):
<tt> </tt>
Tällaista tekstiä voidaan käyttää mm. listauksissa ja harkittuna tehokeinona muulloinkin. Kokeillaan edellä esiteltyjä muotoilutapoja seuraavalla dokumentilla:
<HTML> <HEAD> <TITLE>Tekstin perusmuotoilut</TITLE> </HEAD> <BODY> <p>Tässä tekstikappaleessa on hieman <B>lihavoitua</B>, <I>kursivoitua</I> ja <TT>kirjoituskone-tyylistä</TT> tekstiä.</p> </BODY> </HTML>
Se näyttää selaimessa seuraavalta:
Tässä tutustutaan muutamaan kappaletyylin, joista on tietyissä tapauksissa kovasti iloa.
Joissain tapauksissa on kätevää käyttää esimuotoiltua tekstiä. Se esitetään tasavälisellä kirjaisinlajilla ja siinä voidaan käyttää ilman eri komentoija myös useampia väleja ja rivinvaihtoja. Esimuotoiltu teksti toteutetaan <pre>- ja </pre>-tageilla.
Esimuotoiltua tekstiä käytettäessä tulee kiinnittää huomiota muutamaan hyvin keskeiseen seikkaan. Ensinnäkin, selain ei rivitä tekstirivejä ollenkaan. Onkin syytä pitää rivit hyvin lyhyinä. Toiseksi, myöhemmin tutustumme taulukoihin, joilla useimmissa tapauksissa voidaan esimuotoiltu teksti korvata huomattavasti elegantimmin, seikka jota WWW-sivuja tehdessä ei saa missään tapuksessa unohtaa. Yhteenvetona voitaisiin sanoa, että esimuotoiltu teksti on monilta osiltaa normaalin tekstin täydellinen vastakohta. Siitä on joskus etua, mutta usein haittaa.
<HTML>
<HEAD>
<TITLE>Esimuotoiltu teksti</TITLE>
</HEAD>
<BODY>
<pre>
Tässä on piehenkö esimerkki esimuotoillun
tekstin käyttökohteista.
Myynti (mk)
94 95 96 97
omenat 1000 1100 2000 3500
appelsiinit 2500 2400 1000 0
====================
yhteensä: 3500 3500 3000 3500
</pre>
</BODY>
</HTML>
Se näyttää selaimessa seuraavalta:
Osoite-kappaleen käyttö vastaa <p>- ja </p>-tagien käyttämistä.
<HTML> <HEAD> <TITLE>Osoitteen esittäminen</TITLE> </HEAD> <BODY> <H1>Osoitteen esittäminen</H1> <p>Halutessasi voit esittää osoitteen käyttäen tätä kappaletyyppiä.</p> <address> Matti Meikäläinen<br> Suomentie 3<br> 00000 Helsinki </address> </BODY> </HTML>
Se näyttää selaimessa seuraavalta:
Osoite-kappaletyylille löytyy harvoin järkevää käyttöä.
HTML-kielessä on kometo lainauksien esittämiseksi. Suurin osa nykyisistä selaimista esittää sen sisennettynä, muuten perustekstiä vastaavana, joten käytän siitä tässä yhteydessä sisennyksen luomiseksi.
<HTML> <HEAD> <TITLE>Sisennetty kappale</TITLE> </HEAD> <BODY> <H1>Sisennetty kappale</H1> <p>Alla oleva kappale on sisennetty</p> <BLOCKQUOTE>Vai mitä?</BLOCKQUOTE> </BODY> </HTML>
Se näyttää selaimessa seuraavalta:
Tekstin kokoa, tyyppiä (eli kirjaisinlajia) ja väriä voidaan säädellä käyttämällä <font>- ja </font>-tageja.
Koko määritellään antamalla SIZE-attribuutille numeroarvo 1-7. Kokoarvo voi olla absoluuttinen (esimerkiksi size=5), joka ilmoittaa mikä koko on tai suhteellinen (esimerkiksi size=+1), joka taas ilmoitetaan mihin suuntaan ja kuinka paljon kokoa muutetaan. Koko kolme vastaa normaalia tekstin kokoa. "Yhden"-kokoinen teksti on jo useimmiten hankalaa lukea. Seuraavassa kaksi esimerkkiä:
<FONT SIZE=4>asettaa tekstin kooksi 4</FONT> <FONT SIZE=+2>muuttaa tekstin peruskokoa kaksi pykälää suuremmaksi</FONT>
Tekstin värittämiseksi voidaan käyttää color-attribuuttia:
<FONT COLOR="#RRGGBB" tai COLOR=väri>...</FONT>
Esimerkiksi seuraavasti:
<FONT COLOR=#ff0000>Tämä on punaista</FONT>
tai
<FONT COLOR=Red> Tämä on myös punaista </FONT>
Tekstissä käytettyä kirjaisinlajia voidaan myöskin vaihtaa käyttämällä FACE-attribuuttia. Jos käytettävää (tai vaihtoehtoista) kirjaisinlajia surffaajan laitteesta ei löydy, käytetään tilalla tuiki tavallista fonttia. Siksi ei kannatakaan käyttää erityisen eksoottisia kirjaisinlajeja.
Esimerkiksi:
<FONT FACE="Arial","Lucida Sans"> Siinä on parikin vaihtoehtoa tälle tekstille</FONT>
Tyylipohjat, eli Style Sheetit tuovat paljon tehokkaampia tapoja tekstin muotoiluun, joten <FONT>-tagia käytettäneen jatkossa vain yhteensopivuuden takaamiseksi vanhojen selainten kanssa.
Esimerkkinä edellisistä muotoiluista on seuraava dokumentti.
<HTML> <HEAD> <TITLE>Esimerkki tekstin erikoismuotoiluista</TITLE> </HEAD> <BODY> <H1>Erikoismuotoilut</H1> <p><FONT SIZE=5 COLOR="#0000FF"> Tässä on isoa sinistä </FONT>. <FONT SIZE=3 COLOR="red"> Tässä on pientä punaista </FONT></p> <p><FONT SIZE=7 COLOR="#8000FF" FACE="Courier New,Arial">T</FONT&g tässä on <FONT SIZE=6>e</FONT>ri <FONT SIZE=6>k</FONT>oi <FONT SIZE=6>s</FONT>ta tekstiä.</p> </BODY> </HTML>
Se näyttää selaimessa seuraavalta:
HTML-dokumentissa tarvitaan ajoittain merkkejä, joita ei voi kielen luonteesta johtuen syöttää muuten kuin erikoismerkkejä käyttäen. Esimerkiksi seuraavat merkit joudutaan syöttämään koodein:
Joskus verkossa törmää skandinaavisten merkkien korvattuihin versioihin. Niiden käyttäminen ei ole tarpeellista, jos kehitystyö tehdään Windows-koneella. Muissa ympäristöissä konversio voi osoittautua välttämättömäksi. Ko. ympäristöissä toimivissa editoireissa on todennäköisesti tarvittavat toiminnot muunnoksen suorittamiseen.
Isot kirjaimet saadaan korvaamalla toinen merkki isolla (Ä = Ä).
Koodimerkintöjen käyttö on helppoa, kirjoitetaan koodi ko. merkin tilalle.
Seuraava sivu: Kuvat.
Ihan hyvät sivut html aloittelijoille.
tein tämän kommentin koulussa ja äkytin teidän sivuja apuna työssäni
Kiitos!
Hyvät ja selkeät sivut.Käytin näitä,kun tein sivujani.
30.4.2003 21:44Selkeät ja helppotajuiset esimerkit ja todella paljon hyödyllisiä komentoja. Aina kun tulee ongelmia sivujen teossa niin tulen tänne.
Kiitos sille kuka tällaiset sivut on jaksanut tehdä!
Helppo.
Yksinkertainen opas mutta ei kerro
kuinka tekstin väri lisätään
<BODY> kohdan sisään tänne
<BODY * > tuohon väliin.
Muuten ihan ok sivut, mutta ainakin omalla koneellani teksti näkyy niin surkean pienellä, että vanhat 22v silmäni eivät tahdo nähdä lukea..
14.12.2003 01:48hyvät sivut. sain apua tehdessäni omia sivujani. kiitos paljon.
12.1.2004 20:13Ellulle: "Teksti on liian pientä"
Selaimestasi voit zoomata tekstiä isommaksi. Omassa selaimessani (Mozilla) se onnistuu valikosta View- Increase Text Size tai näppäinyhdistelmällä Ctrl + +
Otsolle: "Väriä tähän ja tuohon"
Teet sen samalla tavalla kuin esimerkissä on kirjoitettu erikokoisia kirjaimia yhteen sanaan. Nyt vain sizen tilalle color...
Ihan kivasti tietoo, mutta tästä ei vieläkään löydy minne pitäis mennä ja mitä pitäis heti aluksi tehdä ja mitä pitäis muistaa... ainakaan mä en löytänyt..=(
14.2.2004 21:54Eihän tossa selitetty kuinka väli tehään, vai selitettiinkö? No viitsiikö kukaan selittää miten se tehään
15.2.2004 16:59Väli tehdään vaakasuunnassa rivinvaihdoilla br-elementillä (merkintä <br>).
Välilyöntejä saa merkkikoodilla &#nbsp; (engl. non-breaking space). Tämä merkki ei tarkoita täsmälleen välilyöntiä, vaan sitä, ettei siitä välilyönnistä saa pistää riviä poikki vaikka selinikkunan leveys loppuisi kesken.
näistä sivuista oli mulle tosi paljon hyötyä..
28.6.2004 12:57miten se euromerkki tehdään?
28.6.2004 16:06Euromerkin saa entiteetillä € .
7.10.2004 19:02Erikoismerkkien "entiteettikoodaus" päättyy aina puolipisteeseen.
Koodit ovat siis < &t; & " jne. puolipisteen kanssa. Selain, jossa ne toimivat ilman puolipistettä, toimii virheellisesti ja epäluotettavasti.
Valitettavasti (ainakin osa) tämän sivun esimerkeistä johtaa harhaan: HTML on nimenomaan sivujen rakennetta kuvaava kieli - siispä muotoilua koskevat asiat kannattaa jättää aivan muualle: nimenomaan CSS-tyylitiedostojen hoidettavaksi.
Yhdistettäessä CSS:ää ja HTML:ää saadaan rakenteellisesti puhdasta koodia, jolloin lopputulos näkyy varmasti joka paikassa oikein.
HTML:n ei siis tule ottaa kantaa esim. siihen, onko teksti lihavoitua tai kursivoitua - sen sijaan kannattaakin käyttää vaikkapa strong- ja em-tägejä.
Tällöin jopa puhesyntetisaattori ymmärtää korostaa tekstin oikeassa kohdassa. Lisäksi, jos jossakin ympäristössä ei tekstin näyttäminen lihavoituna tai kursivoituna ole mahdollista, selain pystyy sopeutumaan tilanteeseen muin keinoin.
voisikohan tänne saada koodin pätkän jolla esim:
pienennetään tuota sivun kokoa...?
Niin että,
koko sivua ei tulisi käyttöön vaan vaikka puolet sivusta
miten ihmees otsikon saa keskel ku oon yrittäny mut se ei toimi samoin ku taustakaan ei toimi??????? kyl teksti kursivoituu ja kokoo muuttaa mut ei mee keskel:( ja ku laitan sen tausta koodin nii se jää vaan lukeee sinne eikä mitää taustaa tuuu:( voiks joku auttaaaaaaa!!!!!!!!!
15.9.2005 20:13non-breaking space:n entiteetti on ' ' eikä '&#nbsp;'
20.9.2005 15:43miten pystyy katsoa miltä sivut oieasti näyttävät??
9.11.2005 21:07Hmm ettiskelin noita kirjotus tyylejä (vertical jne.) mutta niitä ei tunnu löytyvn...
3.12.2005 11:42Kysyisin vaan miten saan otsikon alleviivattua...En löytänyt tuolta teksti osuudesta ainakaan.
8.12.2005 13:38Saat otsikon alleviivattua, kun laitat U:n (underline) heti otsikkotagin perään. Esim.
<H1><U>Alleviivattu otsikko</U></H1>
voisitko lähettää vaikka hmm.. jotai koodeja että saisin edes jotain sivuilleni ja myös mihin laitan niitä koodeja ja onko äliä missä kohtaa se koodi on?
kun saisin edes jotain sivuilleni niin saan sitten niinkuin osaan sitten jo melkein kaikki
(teen urliin)
Miten saa alueen johon voi laittaa tekstiä? sellasen johon saa päättää fontin ja sen koon.
2.2.2006 21:14jumaleissön ku on hyvät ja selkeet sivut.
ISO KIITOS TEKIJÄLLE...
Miten voin keskittää esimuotoildun tekstin?
En osaa sijoittaa tageja oikein.
Vastaus mikko:
kirjoita <center>tähän haluamasi tekstit yms.</center>
Noin sen pitäisi pelittää
Milläs koodilla saan liikkuvaa tekstiä?
Sivuista on ollut tosi paljon hyötyä, täältä olen löytänyt lähes kaikki tarvittavat koodit! ^^ Mua vaan mietityttää, kun on toi <br>, </p> rivinvaihto, niin esimerkissä se on vaan tavallan enter, mutta itselläni siihen tulee oikein yksi rivi väliä! o__O Missä vika? o__O'
30.3.2006 14:07K@isu,tarkoititko tuollaista ---> <MARQUEE>vierivä teksti</MARQUEE>. Vierittää muuten myös kuvia.
9.4.2006 00:01kuinka saa html muotoisen tekstin sivuille ilman että selain lukee sitä html tiedostona? laittaisin sivustolleni buttonin jonka muut voivat ladata.
tosi hyvät sivut, näistä on ollut tosi paljon apua ainakin minulle, todella selvät ja tosi helppo lukea. sivujen tekijältä/tekijöiltä tosi ihailtaavaa jälkeä, kiitos! :>
13.6.2006 16:32Vaikka kirjoitin koodien alkupuolelle html kieleksi suomen, niin ä:t näkyvät epämääräisinä söheröinä.
Yritin myöskin käyttää koodia korvaamaan ä:t mutta kun niitä laittaa monta peräkkäin esim. lainsäädännäiset, ä:t eivät näy.
Miten saan nämä valkoiset kehysten reuna"viivat" pois? Olen jo mielestäni ottanut sen koodin käyttöön jolla ne palkit häiviävät.
Tässä voit katsella ongelmia:
http://geocities.com/kissatsisalle/
Kiitos tästä on ollut todella paljon apua, iso plussa tekijälle. Itse opettelen vasta HTML-koodikieltä
22.6.2006 18:36Jenna, <br> on normaali rivinvaihto <p> on kappaleenvaihto, jolloin tulee yksi rivi tyhjää.
30.9.2006 12:14Niin.. jos teen kirjoitusta h1 tagilla, niin miten saan vaihdettua sen väriä, ku se on normaalisti musta.. ei onnistu jos kirjotan
<h1 color="red" align=center>...voitte vaikka lisätä mun sähkö postin, ja auttaa sit sielä
miten saan tekstin rullaamaan laidasta laitaan.. ?
kuin liukuhihnalla??
tää on siistii halun lisäää tiettoa jooko
niin siitä tekstin rullaamisesta? :D
7.12.2006 17:23ku noita tekstejä voi keskittää align=center jutulla niin voiko sitä tekstiä sijoittaa mitenkään alhaalle sivua?
13.12.2006 20:51Mitenkäs teksti laitetaan just siihen paikkaan minne ite haluaa, että ei tarvii olla ihan vasemmalle eikä ihan oikeella vaan vasemman ja keskipisteen välissä?
Toivottavasti ymmärsitte.
MATIN
2.1.2007 08:59kiitos näistä :D lisää vaa
13.1.2007 15:01Minullekin jäi vähän puutteelliseksi juuri se tieto, miten tekstiä saa haluamaansa kohtaan, ei kiinni laatikon seiniin tai joko vasemmalle tai oikealle reunalle missä sitten sitä onkaan. Tarvitsisin vain kymmenisen pikseliä irti laatikon reunoista, miten onnistuisi? Teksti on vasemmalla puolella.
Kiitoksia näistäkin, sivut ovat hyvää vauhtia kokoontumassa. ^^
Miten saisin tehtyä niin, että saan sijoitettua linkit vasemmalle ja tekstiä vähän keskemmälle (ei täysin keskelle). Tekstini menee joko ylös tai alas, en saa sitä linkkieni viereen. Niin, ja linkkini ovat sellasia kuvia, mistä pitää painaa.
26.1.2007 21:14Näistä oli apua kun tässä palauttelee parin vuoden tauon jälkeen sivujenteon kieltä mieleen..Kiitos vaan että joku jaksaa tälläisiakin tehdä! :D
19.2.2007 23:55wamb
Tässä pitää käyttää joka css tyylejä tai taulukoita, jos oikein ymmärsin
Kuinkas jos haluan esim. vasempaan reunaan tekstin mutta en ihan kiinni reunukseen niin pitääkö koko ajan käyttää sisennystä vai..?
16.4.2007 16:55Krrhmm...
Sulla on tossa pien virhe:
<FONT COLOR=#ff0000>Tämä on punaista</FONT>
vaikka sen tulis olla näin:
<FONT COLOR="#ff0000">Tämä on punaista</FONT>
Huomaatko mitä puuttuu?
Jep nämä ""
Samoin toi toinen. Siinäkin on virheitä:
<FONT COLOR=Red> Tämä on myös punaista </FONT>
Ton tulis myös olla näin:
<FONT COLOR="Red"> Tämä on myös punaista </FONT>
Ja tästäkin puuttuu ne "" merkit.
Ootkohan sä ollu unissas ku teit nä jutut?
Ei pahalla :o)
Teksti saadaan rullaamaan näin
<marquee direction="right tai left">teksti tähän</marquee>
Voiko sitä saada menemään ylös tai alas, siis rullaamalla?
14.6.2007 22:23Unohtui lisätä:Voiko tekstiä laittaa viistoon??Siis Align systeemillä?(tai jollain toisella systeemillä/koodilla)
18.6.2007 10:14Miten saa Pääotsikon väriä vaihettua?
ja linkkien?
miten saa kaksi taulukkoa vierekkäin, samalle riville?
Miten saan sijoitettua tekstin tuohon kohtaan missä lukee Sisältö..?katsokaapas..www.freewebs.com/dragonballplaneetta/Leiska.jpg
14.7.2007 13:32Esim näin:Sijoita kuva vasemmalle sivulle.
<ul>
<li>(Tähän linkki)
<li>(Tähän linkki)
</ul>
Yritä saada tuo oikeeseen kohtaan niin kaikki onnistuu!
Pelle:
Pää otsikko?esim. näin <font color="väri ihan sama">
<h1>päläpälä</h1></font>
Linkki:<font color=<a href="linkin URL"><font color="väri tähän">Ihan sama mitä laitat tähän </font></a>
Unohda tuo Font color tuosta linkki koodin edestä, jooko!
17.8.2007 14:39Kertokaas omia sivujanne että pääsen kattelen.
22.10.2007 22:23Tässä pieni virhe kanssa:
<p><FONT SIZE=7 COLOR="#8000FF"
FACE="Courier New,Arial">T</FONT&g
tässä on <FONT SIZE=6>e</FONT>ri
Näin se pitäisi olla:
<P><FONT SIZE=7 COLOR="#8000FF"
FACE="Courier New,Arial">T</FONT>
ässä on <FONT SIZE=6>e</FONT>ri
Tajusin kyllä mitä toi tarkoitti, mutta mulla ei toiminut Firefoxilla tuo merkki.
7.1.2008 12:48Ihan hyvä on tää opas.Paitsi kun kokeilin esim.Vaihtaa otsikon väriä ei toimi..
20.1.2008 10:26<ul>
<li> (tekstiä)
<li> (tekstiä)
</ul>
Tuossa on se huono puoli että tulee se piste siihen eteen.
Pisteen voi muuttaa erilaiseksi kuvan avulla.
Esim. Aku Ankan pääksi, tälläisellä koodilla:
<style type="text/css">
li
{
list-style-image:url('www.osoitemissäkuvaon.fi/img.jpg')
}
</style>
Toki on myös keino saada piste pois kokonaan, vaikka näin:
<div id="poll">
(tekstiä) <br>
(tekstiä) <br>
</div>
Pidäppäs huoli että sivutilallasi (esim. jouluserver.com) toimii css -koodit.
taulukon saa laittamalla koodin : <b><bgh>TEKSTI</b></bgh>
6.2.2008 21:29Tänää alko koulussa ATK ohjelmointi kurssi. Aluks aattelin et ei täst tuu mitää, mut ku kattelin täält netist vähä apuja ni johan rupes onnistuu.
1.3.2008 17:38Miten saisi tekstiä joka vaihtelee väriä?
4.4.2008 10:48Täyttä paskaa!
4.4.2008 10:50saatanan kusipäät laittakaa pallit hiirenloukkuun jos teillä sellasia löytyy mulla on isot tissit tuutteko kattoo
<3
kyrpäpääät tappakaa ittenne
15.4.2008 08:43JESTAS! Tää on kyllä ehrottomasti #1, siis aivan kamalan selkeä ja hyvä sivu. Onnittelut tekijälle
17.6.2008 12:24Upeaa että tälläiset on tehty, että tälläinen kuin minä, ei tajua html:ää sataprosenttisesti tajuaa näistä! Hyvät sivut! Kaikkien aikojen paras HTML- apusivu 8)
21.7.2008 21:06Elikkäs.. Onko tekstin taustaväriä mahdollista muuttaa? Siis ei sitä taustan väriä. vaan sitä mikä on kirjainten takana.
Selkeät ja helppokäyttöiset sivut muutes!
Hei sinä,joka sanoit että et nää luke tekstiä tältä sivulta 22v vanhoilla silmilläsi niin ehdottaisin että pienetäisit näytösi resoluutiota esim. 1280X1024 niin näkyy....
LOISTAVT SIVUT!!!nämä saivat minut opettelemaan html koodia.Tosin olen vasta urakkani toella alku metreillä.
Mutta kiitos loistavasta oppasta :)
Kantsii korjata tää kohta:
<HTML>
<HEAD>
<TITLE>Esimerkki tekstin erikoismuotoiluista</TITLE>
</HEAD>
<BODY>
<H1>Erikoismuotoilut</H1>
<p><FONT SIZE=5 COLOR="#0000FF">
Tässä on isoa sinistä
</FONT>.
<FONT SIZE=3 COLOR="red">
Tässä on pientä punaista
</FONT></p>
<p><FONT SIZE=7 COLOR="#8000FF"
FACE="Courier New,Arial">T</FONT&g
tässä on <FONT SIZE=6>e</FONT>ri
<FONT SIZE=6>k</FONT>oi
<FONT SIZE=6>s</FONT>ta tekstiä.</p>
</BODY>
</HTML>
Korjattu versio:
<HTML>
<HEAD>
<TITLE>Esimerkki tekstin erikoismuotoiluista</TITLE>
</HEAD>
<BODY>
<H1>Erikoismuotoilut</H1>
<p><FONT SIZE=5 COLOR="#0000FF">
Tässä on isoa sinistä
</FONT>.
<FONT SIZE=3 COLOR="red">
Tässä on pientä punaista
</FONT></p>
<p><FONT SIZE=7 COLOR="#8000FF"
FACE="Courier New,Arial">T</FONT>ässä on <FONT SIZE=6>e</FONT>ri<FONT SIZE=6>k</FONT>oi<FONT SIZE=6>s</FONT>ta tekstiä.</p>
</BODY>
</HTML>
Kiitos sinä ihana ihminen joka oot tehny nämä sivut! Pelastit mun tietotekniikan kurssin! Inhoan tietotekniikaa yli kaiken, mutta täähän oliki ihan kivaa ku oli hyvät ohjeet! :O WAU!
2.4.2009 21:01Moro. Hyvät sivut on.
Semmonen tieto jäi vielä uupumaan, että mitenkä mä saan tehtyä mun sivuihin lisäsivuja. Mulla on nyt vaan etusivu, ja pitäs tehä toinenki sivu, ku tulee muuten ihan tyhmä..
Onko täällä missään kuvateksteistä?
8.12.2009 14:23ihan hyvät sivut, oli paljo jelppii atk-tunnil :)
9.12.2009 16:38Jos haluaa saada liikkuvaa tekstiä sen voi tehdä näin
<marquee direction="up">tämä teksti nousee ylös</marquee>
<marquee direction="down">tämä teksti laskee alas</marquee>
<marquee direction="left">tämä teksti liikkuu vasemmalle</marquee>
<marquee direction="right">tämä teksti kulkee oikealle</marquee>
Joo, eli olisikohan millään koodilla mahdollista saada sivuston tekstiä tasattua reunoilta, eli siten samalla tavoin kuin tekstinkäsittely-ohjelmissakin?
Kiitokset etukäteen!
Kiitos näistä sivuista. Tarvitsin apua HTML-kielessä koska en siinä kovin hyvä ole. Näistä on paljon apua kun alan rakentaa sivuja kasaan.
29.1.2010 17:43Miten saa taustakuvan keskitettyä niin että reunojen väriä voi vielä muuttaa? Voiko liikkuvan tekstin nopeutta muuttaa? Hieno sivusto. Auttoi minutkin alkuun webbisivujen tekemisessä.
29.1.2010 22:34Taustakuvan sain, mutta liikkuvan tekstin nopeuden muuttaminen on vielä arvoitus. O.o
21.2.2010 13:32Hei, mitenkähän tekstin saa läpinäkyväksi? Jos on vaikka jokin kuva taustana niin tekstin värin vaihto ei auta kuin yksivärisellä pohjalla.
Vastaukset mielellään sähköpostiin.
Kiitos!
MIten saa kuvatekstis lisättyä???
9.12.2010 21:10Ääkkösiä ja useimpia muita erikoismerkkejä ei tarvitse kirjoittaa koodeilla, mikäli laittaa seuraavan koodin head-tagin sisään:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
Olen kuullut, että tiedosto pitäisi myös tallentaa tässä utf 8 -muodossa, mutta hyvin toimii ilmankin.
Minua nämä html-koodit ovat kyllä auttaneet. (: Suosittelen kaikille!
21.2.2011 14:38Jaho tykkää Mirkasta <3
10.5.2011 08:45hirveetä p*skaa tämmöne lopettakaa tällai p*ska jauhamine
Kiitoksia! erittäin hyvät ohjeet ja suosittelen kaikille... Erittäin helppo ymmärtää ja kaikkea muuta paskaa :D
Todella hyödylliset sivut =)
Itse käytän tehdessäni Geocaching.com kätkötiedotteita.