- TEKSTINTASAUS:

Tasaus molemmille reunoille: "text-align:justify"

oikealle: "text-align:right"

vasemmalle: "text-align:left"

keskelle: "text-align:center"

Sisennys: <p style="margin-left:100px;">

• Katso lisää esim: https://takku.net/forum/viewtopic.php?showtopic=25581 

TEKSTITYKSET - ESIMERKKIKOODIT

 - Tekstitasaus: 

<p style="text-align:justify"> =Tekstin tasaus molemmille reunoille </p>
<p style="text-align:right"> =Tekstin tasaus oikealle </p>
<p style="text-align:left"> =Tekstin tasaus vasemmalle </p>
<p style="text-align:center"> =Tekstin tasaus keskelle </p>

 - Korostukset

Lihavoitu teksti  <B>
Alleviivattu teksti  <U>
Kursiivoitu teksti <I>
Yliviivattu teksti <strike>
alaindeksiteksti <sub>
yläindeksiteksti <sup>

ESIMERKKIKOODI:

   <B> Lihavoitu teksti </B>
<U> Alleviivattu teksti </U>
<I> Kursiivoitu teksti </I>
<strike> Yliviivattu teksti </strike>
_{alaindeksiteksti}
^{ylaindeksiteksti}

Taulukko:

1. rivi 1. Solu 1. rivi 2. Solu
2. rivi 1. Solu 2. rivi 2. Solu
3. rivi 1. Solu 3. rivi 2. solu

KOODIESIMERKKI:

<TABLE BORDER =1 WIDTH=50%>

<CAPTION>Taulukko-esimerkki </CAPTION>
<TR>
<TD WIDTH=50%>1. rivi 1. Solu</TD>
<TD WIDTH=50%>1. rivi 2. Solu</TD>
</TR><TR>
<TD WIDTH=50%>2. rivi 1. Solu</TD>
<TD WIDTH=50%>2. rivi 2. Solu</TD>
</TR>
<TR>
<TD WIDTH=50%>3. rivi 1. Solu</TD>
<TD WIDTH=50%>3. rivi 2. solu</TD>
</TR>
</TABLE>

 - KUVA: 

     <img style="width: 30%;" alt="" src="http://www.pasikallio.com//html-koodaus/esimerkki.png">

 - KUVASTA LINKKI UUTEEN IKKUNAAN: 

     <a href="http://www.linkinosoite" target="_blank">
    <img style="width: 30%;" alt="" src="http://www.pasikallio.com/html-koodaus/esimerkki.png">
    </a>

 - KUVAN ASETTELUT:

    OIKEALLE: align="right", 
    KESKELLE: align="center", 
    VASEMMALLE: align="left"

     ESIM. KOODI: 

     <img style="width: 30%;" alt="" src="http://www.pasikallio.com//html-koodaus/esimerkki.png"align="right"><br>

- ALIGN -parametrin avulla kerrotaan, miten kuva asetellaan suhteessa ymparoivaan tekstiin: 

     top - teksti kirjoitetaan kuvan ylareunan tasalle
    middle - teksti kirjoitetaan kuvan keskelle
    bottom - teksti kirjoitetaan kuvan alareunan tasalle
    left - kuva "kelluu" selaimen vasemmassa reunassa ja teksti kiertaa sita oikealta
    right - kuva "kelluu" selaimen oikeassa reunassa ja teksti kierta sita vasemmalta

     ESIM: 

     <IMG SRC="http://www.pasikallio.com//html-koodaus/esimerkki.png" ALT="logo" ALIGN="TOP">

Katso myös HTML-opas: hy-tsoha.github.io/materiaali/html_opas/ 

SIVULLE IKKUNAKOODI:

<iframe src=”http://www..."></iframe>

ÄÄKKÖSET JA ÖÖKKÖSET:

- Avaa Notepad++

- Liitä koodi

- Muuta: "Tiedostomuoto" > "Koodaus UTF-8I"

Vieritä sivua hitaasti KOODI

<script language="JavaScript1.2">

/*

Advanced window scroller script-

By JavaScript Kit (www.javascriptkit.com)

Over 200+ free JavaScripts here!

*/

var currentpos=0,alt=1,curpos1=0,curpos2=-1

function initialize(){

startit()

}

function scrollwindow(){

if (document.all)

temp=document.body.scrollTop

else

temp=window.pageYOffset

if (alt==0)

alt=1

else

alt=0

if (alt==0)

curpos1=temp

else

curpos2=temp

if (curpos1!=curpos2){

if (document.all)

currentpos=document.body.scrollTop+1

else

currentpos=window.pageYOffset+1

window.scroll(0,currentpos)

}

else{

currentpos=0

window.scroll(0,currentpos)

}

}

function startit(){

setInterval("scrollwindow()",150)

}

window.onload=initialize

</script>

Vieritä ikkunaa hitaasti

<script language="JavaScript1.2">

/*

Advanced window scroller script-

By JavaScript Kit (www.javascriptkit.com)

Over 200+ free JavaScripts here!

*/

var currentpos=0,alt=1,curpos1=0,curpos2=-1

function initialize(){

startit()

}

function scrollwindow(){

if (document.all)

temp=document.body.scrollTop

else

temp=window.pageYOffset

if (alt==0)

alt=1

else

alt=0

if (alt==0)

curpos1=temp

else

curpos2=temp

if (curpos1!=curpos2){

if (document.all)

currentpos=document.body.scrollTop+1

else

currentpos=window.pageYOffset+1

window.scroll(0,currentpos)

}

else{

currentpos=0

window.scroll(0,currentpos)

}

}

function startit(){

setInterval("scrollwindow()",150)

}

window.onload=initialize

</script>

VAIHTUVA TEKSTI LINKKIIN HIIRI PÄÄLLÄ / POIS:

<STYLE><!-- A:visited { text-decoration: none; color: #FF0000;} A:active { text-decoration: underline; color: #s3fadc;} A:hover { text-decoration: underline; color: #s3fadc;} //--></STYLE>

Vaihtuva kuvaesityskoodi

<!--Tästä alkaa kuvaesityskoodi-->

<SCRIPT language=JavaScript1.1>

var specifyimage=new Array() //Your images

specifyimage[0]=" http://www..../1.jpg"

specifyimage[1]=" http://www..../2.jpg"

specifyimage[2]=" http://www. /3.jpg"

specifyimage[3]=" http://www. /4.jpg"

specifyimage[4]=" http://www. /5.jpg"

specifyimage[5]=" http://www. /6.jpg"

specifyimage[6]=" http://www. /7.jpg"

specifyimage[7]=" http://www. /8.jpg"

specifyimage[8]=" http://www. /9.jpg"

specifyimage[9]=" http://www. /10.jpg"

specifyimage[10]=" http://www. /11.jpg"

specifyimage[11]=" http://www. /12.jpg"

var delay=3000 //3 seconds

//Counter for array

var count =1;

var cubeimage=new Array()

for (i=0;i<specifyimage.length;i++){

cubeimage[i]=new Image()

cubeimage[i].src=specifyimage[i]

}

function movecube(){

if (window.createPopup)

cube.filters[0].apply()

document.images.cube.src=cubeimage[count].src;

if (window.createPopup)

cube.filters[0].play()

count++;

if (count==cubeimage.length)

count=0;

setTimeout("movecube()",delay)

}

window.onload=new Function("setTimeout('movecube()',delay)")

</SCRIPT>

<IMG

style="FILTER: progid:DXImageTransform.Microsoft.Stretch(stretchStyle='PUSH')"

src="http://www.netikka.net/pasi.kallio/thumbnails/1.jpg" border=0

name=cube> </A></FONT>

<P></P>

<!--Tähän päättyy kuvaestyskoodi-->

Vaakasuora viiva

<hr> 

TUNNISTAA MOBIILILAITTEEN:

<!--Mobiilitunnistuskoodi...-->

 <SCRIPT language="JavaScript">

 <!--

 if ((screen.width>=1024))

 {

 }

 else

 {

   window.location="http://www.pasikallio.com/index.m";

 }

 //-->

 </SCRIPT>

<!--...Mobiilitunnistuskoodi päättyy-->

Taulukot

Taulukko <TABLE> </TABLE>

ALIGN=left|center|right, WIDTH=n|p%, BORDER[=n], CELLSPACING=n, CELLPADDING=n

Taulukon otsikko <CAPTION> </CAPTION>

ALIGN=top|bottom

Taulukon rivi <TR> [</TR>]

ALIGN=left|right|center, VALIGN=top|middle|bottom|baseline

Taulukon soluotsikko <TH> [</TH>]

ROWSPAN=n, COLSPAN=n, NOWRAP, ALIGN=left|right|center, VALIGN=top|middle|bottom|baseline, WIDTH=n, HEIGHT=n

Taulukon solu <TD> [</TD>]

ROWSPAN=n, COLSPAN=n, NOWRAP, ALIGN=left|right|center, VALIGN=top|middle|bottom|baseline, WIDTH=n, HEIGHT=n

Taulukot ja solut

Koodi ennen tekstiä ja jälkeen: Laita teksti taulukkoon seuraavan kaavan mukaisesti

<TABLE cellSpacing=0 cellPadding=0 width="100% "border=1><TBODY> <TR><TD>

<P class=MsoNormal style="MARGIN: 0cm 0cm 0pt">Taulukon sisältö tähän

</TD></TR></TBODY></TABLE>

Taulukkokoodi:

   <!-- Taulukko-->

<table style="text-align: left; width: 100%;" border="0" cellpadding="2" cellspacing="2"> <tbody><tr><td style="vertical-align: top;">

  tekstiä

<br></td><td style="vertical-align: top;">

  tekstiä

    <br></td></tr></tbody></table><br>

   <!-- Taulukko päättyy-->

Sivun teksti optimoituu mobiililaitteille: METAT:

<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">

<meta name="viewport" content="width=device-width"/>

Sivun taustan ja tekstin muuttaminen Teksti Linkki "Käytetty" linkki Aktiivinen linkki 

<BODY BGCOLOR="navy" TEXT="white" LINK="yellow" ALINK="red" VLINK="lime">

Tässä esimerkissä sivun taustan väriksi on määritelty "navy", tekstin väriksi "white", linkkejen väriksi "yellow", aktiivisten linkkien väriksi "red" ja "käytettyjen" linkkejen väriksi "lime".

Sivua ei tallenneta tietokoneen muistiin, koodi:

<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">

<!-- piiloteksti !-->

PIILOTA OSA TEKSTISTÄ KOODI: (Onnistuu vain yhden kerran samalla sivulla)

<!-- -- -- PIILOTETUN TEKSTIN KOODI -- -- -->

<script language="javascript" type="text/javascript">function showHide(shID) {if (document.getElementById(shID)) {if (document.getElementById(shID+'-show').style.display != 'none') {document.getElementById(shID+'-show').style.display = 'none';document.getElementById(shID).style.display = 'block';}else {document.getElementById(shID+'-show').style.display = 'inline';document.getElementById(shID).style.display = 'none';}}}</script>

<style type="text/css">/* This CSS is just for presentational purposes. */body {background-color: ; }#wrap {font: ;width: ;margin: 0 auto;padding: ;background-color: }h1 {font-size: ; }/* This CSS is used for the Show/Hide functionality. */.more {display: none;border-top: 1px solid border-bottom: 0px solid }a.showLink, a.hideLink {text-decoration: none;color: ;padding-left: px;background: transparent url(down.gif) no-repeat left; }a.hideLink {background: transparent url(up.gif) no-repeat left; }a.showLink:hover, a.hideLink:hover {border-bottom: 1px dotted #; } </style>

<div id="wrap"><p>

NÄKYVÄ TEKSTI TÄHÄN

<a class="showLink" href="#" id="example-show" onclick="showHide('example');return false;">

...Lue lisää

</a></p><div class="more" id="example"><p>

PIILOTETTU TEKSTI TÄHÄN

</p><p><a class="hideLink" href="#" id="example-hide" onclick="showHide('example');return false;">

Näytä vähemmän...

</a></p></div></div>

<!-- -- -- PIILOTETTU TEKSTIKOODI PÄÄTTYY -- -- -->