HTML: "Kuinka teen sivut?" -opas
41 viestiä • Sivu 3, 3:sta • 1, 2, 3
Re: HTML: "Kuinka teen sivut?" -opas
Futsii_ 10 Joulu 2007 21:59
Oon venannu tätä niin vitun kauan! Nyt vihdoin opin (toivottavasti) tekemään sivut. Editoin sitte loput mitä pitää sanoa ku oon lukenu tän..
E: tuli vähä viiveel mut eise mitää. Iha gj opas mut tietoo sais enemmä löytyy.
E: tuli vähä viiveel mut eise mitää. Iha gj opas mut tietoo sais enemmä löytyy.
Re: HTML: "Kuinka teen sivut?" -opas
d-hunter 12 Joulu 2007 23:00
Auttamatta vanhentunut ja muutenkin vähän kiikun-kaakun opas tässä vaiheessa. Voin kirjoittaa paremman kun sopivaa aikaa löytyy.
Re: HTML: "Kuinka teen sivut?" -opas
Futsii_ 13 Joulu 2007 21:51
Tästä kuitenkin pääsin alkuun koko hommassa! kiitos!
Re: HTML: "Kuinka teen sivut?" -opas
Blessed 14 Huhti 2008 17:15
Puma kirjoitti:hmm laitetaaks noi johonki muistioo?
Jep, Windowsin muistiokin kelpaa. Tallenna TIEDOSTON_NIMI.html
Intel(R) Pentium(R) 4 CPU 3.00GHz - 2 GB DDR2 - 80 GB HDD - Intel Integrated Graphics Controller 82945G/GZ - Ubuntu 9.04 - Logitech Media Keyboard 600 - Logitech MX 518 - Logitech X-230 - Buffalo Drivestation 500 GB - Creative Zen 4GB. 
Re: HTML: "Kuinka teen sivut?" -opas
Lehtipuhallin 19 Touko 2008 20:56
Joo, nämä asiat tulevat sitten 7.luokan lopussa, että viimeistään silloin oppii. Kasin valinnaisessa opetellaan HTML-kieltä vielä perusteellisemmin.
Mielestäni opas oli OK, jos ei ole ennen HTML kieltä nähnytkään. Osaavammalle opas on jo täysin turha.
Mielestäni opas oli OK, jos ei ole ennen HTML kieltä nähnytkään. Osaavammalle opas on jo täysin turha.
-
Lehtipuhallin - Viestit: 352
Re: HTML: "Kuinka teen sivut?" -opas
•,• 25 Touko 2008 16:19
Tässä on hyvä opas aloittelialle, mutta kyllä netissä on paljon parempia. Mutta kuitenkin hyvä opas.
Menkää tästä ja rekatkaa sisään siitä. sinä saat bonusta ja mu1ku1la1 saa 1 sentin sinun klikkaamastasi mainoksesta. Todell helppoa rahaa!
Re: HTML: "Kuinka teen sivut?" -opas
mackara 09 Syys 2008 19:31
Jes jos arvostella saan niin tulee kyllä puhdas 10 tästä sain ainankin selvän
Re: HTML: "Kuinka teen sivut?" -opas
The-Final-Day 03 Loka 2009 19:30
En ihan ymmärtänyt....d-hunter kirjoitti:Nyt on noita "kuinka teen sivut?!?!?" -aiheita tullut siihen malliin, että päätinpä pikaisesti väsätä ohjeet sivujen tekoon.
Jätän tässä nyt kielenmäärittelyt väliin ihan selkeyden vuoksi.
Aloitetaan.
Aloitamme sivun <html>-tagilla. Laitetaan samalla loppuunkin lopetustagi jo valmiiksi.
Tagi lopetetaan </html>
- Koodi: Valitse kaikki
<html>
</html>
Nyt teemme head-"alueen" (<head>....</head>. Siellä määritetään mm. sivun otsikko ja css-tyylimäärittelyt.
Asetamme tässä samalla sivulle otsikon.
- Koodi: Valitse kaikki
<html>
<head>
<title>Mallisivu</title>
<!--Kommentointi tapahtuu näin. Tämä ei vaikuta sivuun mitenkään. Sivun otsikko on nyt "Mallisivu"--->
</head>
</html>
Sitten varsinaiseen sisältöalueeseen (<body>...</body>). Tähän alueeseen laitetaan kaikki, minkä haluat näkyvän sivuilla.
Tässä vielä muutama tagi tekstin ulkoasun muokkaamiseen:
<h1>Teksti</h1> - Otsikoissa voidaan käyttää <h_> tagia. Korvaa _ numerolla 1-6 niin saat erikokoista tekstiä.
...
<h6>Teksti</h6> - 1 = isoin, 6 = pienein
<b>Teksti</b> - paksu
<u>Teksti</u> - alleviivattu
<i>Teksti</i> - kursiivi
<center>Teksti</center> - teksti keskelle
Muuta:
<br> - Rivinvaihto (pelkkä enter ei riitä).
<p>...</p> - Kappale
<a href="http://www.google.com">Googleen!</a> - Linkki
<a href="mailto:d-hunter@mbnet.fi">Email</a> - Emaillinkki
<img src="osoitekuvaan.jpg" alt=""> - Kuva
<font color="blue"></font> - sininen tekstin väri. Korvaa blue millä vain värillä. Tähän käyvät myös värikoodit.
- Koodi: Valitse kaikki
<html>
<head>
<title>Mallisivu</title>
<body bgcolor="green"> <!--Teemme taustasta vihreän-->
<h2><font color="blue">Mallisivu</font></h2> <!--Tässä ”näyttävä” otsikko-->
</body>
</head>
</html>
Jotta saamme sivulle hieman näyttävyyttä ja selkeyttä, käyttäkäämme taulukoita(<table>...</table>.
Ne eivät todellakaan ole niin vaikeita, mitä voisi aluksi luulla.
Teen tässä ensin simppelin taulukon, ja kommentoin sitä oheella käytän selkeyden parantamiseksi termiä ”rivi”.
- Koodi: Valitse kaikki
<!---Aloitamme taulukon, ja määritämme että siinä ei ole näkyviä reunoja--->
<table border=”0”>
<!---<tr> aloittaa uuden vaakarivin--->
<tr>
<!---Teemme tähän em vaakariviin 2 pystyriviä (<td>...</td>). Toinen on leveydeltään 30% ruudun pinta-alasta, toinen 70%. Kirjoitamme toiseen paksulla Navigaatio ja toiseen Sisältö-->
<td width="30%" valign="top"><b>Navigaatio</b></td>
<td width="70%" valign="top"><b>Sisältö</b></td>
<!---Lopetetaan vaakarivi ja taulukko--->
</tr>
</table>
Nyt teemme vielä äsken tehtyjen pystyrivien sisälle toiset taulukot. Näin saamme 2 toisistaan riippumattomasti venyvää ”laatikkoa”.
- Koodi: Valitse kaikki
<table border=”0”>
<tr>
<!---Ensimmäinen pystyrivi--->
<td width="30%" valign="top">
<b>Navigaatio</b>
<!--Leveys on 95%, jotta homma näyttäisi tyylikkäämmältä ^^-->
<table border="0" bgcolor="#8C8C8C" width="95%"><tr>
<!---Tässä nyt on uuden laatikkomme tarjoama tekstitila--->
<td></td>
</tr></table>
</td>
<!---Toinen pystyrivi--->
<td width="70%" valign="top">
<b>Sisältö</b>
<!--Leveys on 95%, jotta homma näyttäisi tyylikkäämmältä ^^-->
<table border="0" bgcolor="#8C8C8C" width="95%"><tr>
<!---Tässä nyt on uuden laatikkomme tarjoama tekstitila--->
<td></td>
</tr></table>
</td>
</tr>
</table>
Lisätkäämme taulukko nyt aiemmin tekemäämme sivuun.
- Koodi: Valitse kaikki
<html>
<head>
<title>Mallisivu</title>
<body bgcolor="green"> <!--Teemme taustasta vihreän-->
<h2><font color="blue">Mallisivu</font></h2>
<table border="0">
<tr>
<!---Ensimmäinen pystyrivi--->
<td width="30%" valign="top">
<b>Navigaatio</b>
<!--Leveys on 95%, jotta homma näyttäisi tyylikkäämmältä ^^-->
<table border="0" bgcolor="#8C8C8C" width="95%"><tr>
<!---Tässä nyt on uuden laatikkomme tarjoama tekstitila--->
<td></td>
</tr></table>
</td>
<!---Toinen pystyrivi--->
<td width="70%" valign="top">
<b>Sisältö</b>
<!--Leveys on 95%, jotta homma näyttäisi tyylikkäämmältä ^^-->
<table border="0" bgcolor="#8C8C8C" width="95%"><tr>
<!---Tässä nyt on uuden laatikkomme tarjoama tekstitila--->
<td></td>
</tr></table>
</td>
</tr>
</table>
</body>
</head>
</html>
Laitetaanpa vähän sisältöä sivuun. Teimme ne 2 laatikkoa edellisessä vaiheessa. Toinen navigaatiolle, toinen sisällölle. Mietitäänpä, mitä sivuja haluat sivuillesi. Tässä esimerkissä haluaisimme: Etusivu(index.htm), Päiväkirja(pkirja.html), Linkkilista(lista.htm).
Tehkäämme näin:
- Koodi: Valitse kaikki
<!---Ensimmäinen pystyrivi(eli se navigaatio)--->
<td width="30%" valign="top">
<b>Navigaatio</b>
<table border="0" bgcolor="#8C8C8C" width="95%"><tr>
<td>
<a href="index.htm">Etusivu</a><br>
<a href="pkirja.htm">Päiväkirja</a><br>
<a href="lista.htm">Linkkilista</a><br>
</td>
</tr></table>
</td>
Lisätään tämä jälleen sivuumme:
- Koodi: Valitse kaikki
<html>
<head>
<title>Mallisivu</title>
<body bgcolor="green"> <!--Teemme taustasta vihreän-->
<h2><font color="blue">Mallisivu</font></h2>
<table border="0">
<tr>
<!---Ensimmäinen pystyrivi(eli se navigaatio)--->
<td width="30%" valign="top">
<b>Navigaatio</b>
<table border="0" bgcolor="#8C8C8C" width="95%"><tr>
<td >
<a href="index.htm">Etusivu</a><br>
<a href="pkirja.htm">Päiväkirja</a><br>
<a href="lista.htm">Linkkilista</a><br>
</td>
</tr></table>
</td>
<!---Toinen pystyrivi--->
<td width="70%” valign="top">
<b>Sisältö</b>
<!--Leveys on 95%, jotta homma näyttäisi tyylikkäämmältä ^^-->
<table border="0" bgcolor="#8C8C8C" width="95%"><tr>
<!---Tässä nyt on uuden laatikkomme tarjoama tekstitila--->
<td></td>
</tr></table>
</td>
</tr>
</table>
</body>
</head>
</html>
Nyt on aika tallentaa sivu.
Tee vaikka työpöydälle kansio, johon tallennat tämän sivun nimellä index.htm.
Sen jälkeen kopioi tämä tiedosto 2 kertaa ja nimeä uudet tiedostot pkirja.htm ja lista.htm .
Enää on tehtävänäsi lisätä sisältöä sivuille!
Tässä nyt malliksi mahdollinen index.htm:
- Koodi: Valitse kaikki
<html>
<head>
<title>d-hunterin mallisivu</title>
<body bgcolor="green"> <!--Teemme taustasta vihreän-->
<h2><font color="blue">D-hunterin mallisivu!</font></h2>
<table border="0">
<tr>
<!---Ensimmäinen pystyrivi(eli se navigaatio)--->
<td width="30%" valign="top">
<b>Navigaatio</b>
<table border="0" bgcolor="#8C8C8C" width="95%"><tr>
<td >
<a href="index.htm">Etusivu</a><br>
<a href="pkirja.htm">Päiväkirja</a><br>
<a href="lista.htm">Linkkilista</a><br>
</td>
</tr></table>
</td>
<!---Toinen pystyrivi--->
<td width="70%" valign="top">
<b>Sisältö</b>
<!--Leveys on 95%, jotta homma näyttäisi tyylikkäämmältä ^^-->
<table border="0" bgcolor="#8C8C8C" width="95%"><tr>
<!---Tässä nyt on uuden laatikkomme tarjoama tekstitila--->
<td><h2>Tervetuloa sivuilleni</h2>
<p>Toivottavasti viidyt. Sivuillani on päiväkirja ja linkkilista.</p>
<p>Yritän saada vieraskirjaa, joten malttakaahan tovi</p></td>
</tr></table>
</td>
</tr>
</table>
</body>
</head>
</html>
Toivottavasti mukaan ei eksynyt virheitä.
Kommenttia sitten oppaan laadusta ja virheistä
---The-Final-Day--- Henkilökunta Moderaattori*
Moderaattori
Re: HTML: "Kuinka teen sivut?" -opas
Mahori 04 Loka 2009 10:27
The-Final-Day kirjoitti:En ihan ymmärtänyt....d-hunter kirjoitti:Nyt on noita "kuinka teen sivut?!?!?" -aiheita tullut siihen malliin, että päätinpä pikaisesti väsätä ohjeet sivujen tekoon
[/code]
Toivottavasti mukaan ei eksynyt virheitä.
Kommenttia sitten oppaan laadusta ja virheistä
---The-Final-Day--- Henkilökunta Moderaattori*
Eka sä lainaat koko paskan, sit sanot ettet ymmärtänyt?? Lue huolella, tee samalla, kokeile toimiiko (tallennat, avaa selaimella) Ja näin ehkä ymmärrät. There is troll somewhere
Kenopää kirjoitti:Nörttitestin mukaan 14,2%, tosin nyt se laskee reilusti, koska lopetin travianin pelaamisen.
[piilotettu kuva]
Re: HTML: "Kuinka teen sivut?" -opas
Superdiscount 04 Loka 2009 13:50
The-Final-Day kirjoitti:---The-Final-Day--- Henkilökunta Moderaattori*
Tää on vissiin samaa sarjaa sen Valvoja-tyypin kanssa, jonka isälliset neuvot Grand Theft Autojen ikärajoista ohjasivat toimiamme täällä Jwebissä vähän aikaa sitten.
JácK_Ráckham kirjoitti:Homoja transukääpiöitä jotka ratsastavat viritetyillä yksisarvisilla.
[piilotettu kuva]
[piilotettu kuva]
[piilotettu kuva]
-
Superdiscount - Viestit: 258
41 viestiä • Sivu 3, 3:sta • 1, 2, 3
Palaa alueelle Oppaat & artikkelit