Helsingin yliopisto Tietojenkäsittelytieteen laitos
 

Tietojenkäsittelytieteen laitos

Tietoa laitoksesta:

 

HTML (=Hypertext Markup Language)

HTML-dokumentin perusrakenne

<HTML>

<HEAD>

<TITLE>

Kotisivuni

</TITLE>

</HEAD>

<BODY TEXT=white>

Olli Opiskelija


Tervetuloa kotisivulleni. Nimeni on Olli Opiskelija ja opiskelen Helsingin yliopistossa.


Tämä on ensimmäinen versio kotisivustani.

</BODY>


</HTML>



<BODY>:n tarkentimet

Taustakuva



BACKGROUND="taustakuva.jpg"



Taustaväri



BGCOLOR=white



Tekstin väri



TEXT=black



Linkkien väri



LINK=blue



Vierailtujen linkkien väri



VLINK=red



Aktivoidun linkin väri



ALINK=yellow



TEKSTIN RAKENTEEN KUVAUS



Pääotsikko



<H1> ... </H1>



Alaotsikot



<H2> ... </H2>



<H6> ... </H6>



Rivin vaihto



<BR>



Vaakatasoinen poikkiviiva



<HR>



Kappaleen vaihto ja kappaleen reunojen tasaus



<P>



ALIGN=left|center|right



Keskittäminen yleensä



<CENTER> ... </CENTER>



KOROSTUKSET



Lihavointi



<B> ... </B>



Kursivointi



<I> ... </I>



<EM> ... </EM>



<STRONG> ... </STRONG>



<DFN> ... </DFN>



<CITE> ... </CITE>



<BLOCKQUOTE> ... </BLOCKQUOTE>





LISTAT



Listan tyyppi:



<UL> ... </UL>



<OL> ... </OL>



TYPE=1|a|A|i|I



Listan alkio:



<LI> ... </LI>



TYPE=disc|square|circle (järjestämätön)







Määrittelylista (Definition List)



vrt. sanakirjat









Esimerkki (hierarkkinen lista):



<UL>



...



<LI>Phone:

<UL>

<LI TYPE=square>Home: 0987654321</LI>

<LI TYPE=disc>Mobile: 1234567890</LI>

</UL>

</LI>



...



</UL>

KIRJASINLAJIN KOKO JA VÄRI

<FONT> ... </FONT>



Tarkentimet:



SIZE



Kokoa voidaan muuttaa joko suhteellisesti (SIZE="+1") tai absoluuttisesti (SIZE=4)



COLOR



Esimerkki:



<LI>

<FONT SIZE = 4 COLOR=RED>

Olli Opiskelija

</FONT>

</LI>

LINKIT

<A> ... </A>



Dokumentissa



<A Name="Alku"><H1>...</H1></A>



<A HREF="#Alku">Alkuun</A>





Toiseen dokumenttiin



<A HREF="http://www.helsinki.fi/">

University of Helsinki

</A>





Sähköpostilinkki



<A HREF="mailto:Olli.Opiskelija@helsinki.fi">

Olli.Opiskelija@helsinki.fi

</A>





KUVAT

<IMG SRC="http://www.helsinki.fi/hy/yliop1.gif">



Kuvan koon muuttaminen



<IMG HEIGHT=150 WIDTH=60 SRC="http://www.helsinki.fi/hy/yliop1.gif">

TAULUKOT

Taulukon voi esittää valmiiksi muotoiltuna tekstinä



<PRE>



sarake 1 sarake 2

________________________

solu 1 solu 2

solu 3 solu 4



</PRE>





<TABLE> ... </TABLE>



<TH>



ROWSPAN, COLSPAN



<TR> ... </TR>



ALIGN, VALIGN



<TD> ... </TD>



NOWRAP, ALIGN, VALIGN, WIDTH, HEIGHT



Esimerkki: 2 riviä, 3 saraketta



<TABLE BORDER=2>



<TR>

<TD> ... </TD>

<TD> ... </TD>

<TD> ... </TD>

</TR>



<TR>

<TD> ... </TD>

<TD> ... </TD>

<TD> ... </TD>

</TR>



</TABLE>

ERIKOISMERKIT

å &aring



ä &auml



ö &ouml



Å &Aring



Ä &Auml



Ö &Ouml







WWW-sivuja HTML:stä



http://www.helsinki.fi/ohjeet/wwwopas/html-opas.html