Sayfalar - Pages

▼

9 Ocak 2014 Perşembe

Periyodik Tablonun HTML Kısmı


HTML KISMI (Periyodik Tablo)


<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="elements.css">
        <title>Elementler Tablosu</title>
    </head>
    <body>
        <section>
            <div id="container">
            <div id="panelOne">
                <a href="hidrojen.html"><div class="box"> H  </div></a>
                <a href="lityum.html"><div class="box"> Li </div></a> 
                <a href="sodyum.html"><div class="box"> Na </div></a> 
                <a href="potasyum.html"><div class="box"> K  </div></a> 
                <a href="#"><div class="box"> Rb </div></a> 
                <a href="#"><div class="box"> Cs </div></a>
                <a href="#"><div class="box"> Fr </div></a> 
            </div>
            <div id="panelTwo">
                <a href="berilyum.html"><div class="box"> Be </div></a>
                <a href="magnezyum.html"><div class="box"> Mg </div></a>
                <a href="kalsiyum.html"><div class="box"> Ca </div></a>
                <a href="#"><div class="box"> Sr </div></a>
                <a href="#"><div class="box"> Ba </div></a>
                <a href="#"><div class="box"> Ra </div></a>
            </div>
            <div class="panelThree">
                <a href="#"><div class="box"> Sc </div></a>
                <a href="#"><div class="box"> Y  </div></a>
                <a href="#"><div class="box"> X*  </div></a>
                <a href="#"><div class="box"> X*  </div></a>
            </div>
            <div class="panelThree">
                <a href="#"><div class="box"> Ti </div></a>
                <a href="#"><div class="box"> Zr </div></a>
                <a href="#"><div class="box"> Hf </div></a>
                <a href="#"><div class="box"> Rf </div></a>
            </div>
            <div class="panelThree">
                <a href="#"><div class="box"> V  </div></a>
                <a href="#"><div class="box"> Nb </div></a>
                <a href="#"><div class="box"> Ta </div></a>
                <a href="#"><div class="box"> Db </div></a>
            </div>
            <div class="panelThree">
                <a href="#"><div class="box"> Cr </div></a>
                <a href="#"><div class="box"> Mo </div></a>
                <a href="#"><div class="box"> W  </div></a>
                <a href="#"><div class="box"> Sg </div></a>
            </div>
            <div class="panelThree">
                <a href="#"><div class="box"> Mn </div></a>
                <a href="#"><div class="box"> Tc </div></a>
                <a href="#"><div class="box"> Re </div></a>
                <a href="#"><div class="box"> Bh </div></a>
            </div>
            <div class="panelThree">
                <a href="#"><div class="box"> Fe </div></a>
                <a href="#"><div class="box"> Ru </div></a>
                <a href="#"><div class="box"> Os </div></a>
                <a href="#"><div class="box"> Hs </div></a>
            </div>
            <div class="panelThree">
                <a href="#"><div class="box"> Co </div></a>
                <a href="#"><div class="box"> Rh </div></a>
                <a href="#"><div class="box"> Ir </div></a>
                <a href="#"><div class="box"> Mt </div></a>
            </div>
            <div class="panelThree">
                <a href="#"><div class="box"> Ni </div></a>
                <a href="#"><div class="box"> Pd </div></a>
                <a href="#"><div class="box"> Pt </div></a>
                <a href="#"><div class="box"> Ds </div></a>
            </div>
            <div class="panelThree">
                <a href="#"><div class="box"> Cu </div></a>
                <a href="#"><div class="box"> Ag </div></a>
                <a href="#"><div class="box"> Au </div></a>
                <a href="#"><div class="box"> Rg </div></a>
            </div>
            <div class="panelThree">
                <a href="#"><div class="box"> Zn </div></a>
                <a href="#"><div class="box"> Cd </div></a>
                <a href="#"><div class="box"> Hg </div></a>
                <a href="#"><div class="box"> Cn </div></a>
            </div>
            <div class="panelFour">
                <a href="bor.html"><div class="box"> B  </div></a>
                <a href="aluminyum.html"><div class="box"> Al </div></a>
                <a href="#"><div class="box"> Ga </div></a>
                <a href="#"><div class="box"> In </div></a>
                <a href="#"><div class="box"> Ti </div></a>
                <a href="#"><div class="box"> Uut </div></a>
            </div>
            <div class="panelFour">
                <a href="karbon.html"><div class="box"> C </div></a>
                <a href="silisyum.html"><div class="box"> Si </div></a>
                <a href="#"><div class="box"> Ge </div></a>
                <a href="#"><div class="box"> Sn </div></a>
                <a href="#"><div class="box"> Rb </div></a>
                <a href="#"><div class="box"> Fl </div></a>
            </div>
            <div class="panelFour">
                <a href="azot.html"><div class="box">N </div></a>
                <a href="fosfor.html"><div class="box">P </div></a>
                <a href="#"><div class="box">As </div></a>
                <a href="#"><div class="box">Sb </div></a>
                <a href="#"><div class="box"> Bi </div></a>
                <a href="#"><div class="box"> Uup </div></a>
            </div>
            <div class="panelFour">
                <a href="oksijen.html"><div class="box"> O </div></a>
                <a href="kukurt.html"><div class="box"> S </div></a>
                <a href="#"><div class="box"> Se </div></a>
                <a href="#"><div class="box"> Te </div></a>
                <a href="#"><div class="box"> Po </div></a>
                <a href="#"><div class="box"> Lv </div></a>
            </div>
            <div class="panelFour">
                <a href="flor.html"><div class="box"> F </div></a>
                <a href="klor.html"><div class="box"> Cl </div></a>
                <a href="#"><div class="box"> Br </div></a>
                <a href="#"><div class="box"> I </div></a>
                <a href="#"><div class="box"> At </div></a>
                <a href="#"><div class="box"> Uus </div></a>
            </div>
            <div id="panelFive">
                <a href="helyum.html"><div class="box"> He </div></a>
                <a href="neon.html"><div class="box"> Ne </div></a>
                <a href="argon.html"><div class="box"> Ar </div></a>
                <a href="#"><div class="box"> Kr </div></a>
                <a href="#"><div class="box"> Xe </div></a>
                <a href="#"><div class="box"> Rn </div></a>
                <a href="#"><div class="box"> Uuo </div></a>
            </div>
        </div>
        <div id="lowerContainer">
            <div class="bottom">
                <div class="box"> * </div>
                <div class="box"> * </div>
            </div>
            <div class="bottom">
                <a href="#"><div class="box"> La </div></a>
                <a href="#"><div class="box"> Ac </div></a>
            </div>
            <div class="bottom">
                <a href="#"><div class="box"> Ce </div></a>
                <a href="#"><div class="box"> Th </div></a>
            </div>
            <div class="bottom">
                <a href="#"><div class="box"> Pr </div></a>
                <a href="#"><div class="box"> Pa </div></a>
            </div>
            <div class="bottom">
                <a href="#"><div class="box"> Nd </div></a>
                <a href="#"><div class="box"> U  </div></a>
            </div>
            <div class="bottom">
                <a href="#"><div class="box"> Pm </div></a>
                <a href="#"><div class="box"> Np </div></a>
            </div>
            <div class="bottom">
                <a href="#"><div class="box"> Sm </div></a>
                <a href="#"><div class="box"> Pu </div></a>
            </div>
            <div class="bottom">
                <a href="#"><div class="box"> Eu </div></a>
                <a href="#"><div class="box"> Am </div></a>
            </div>
            <div class="bottom">
                <a href="#"><div class="box"> Gd </div></a>
                <a href="#"><div class="box"> Cm </div></a>
            </div>
            <div class="bottom">
                <a href="#"><div class="box"> Tb </div></a>
                <a href="#"><div class="box"> Bk </div></a>
            </div>
            <div class="bottom">
                <a href="#"><div class="box"> Dy </div></a>
                <a href="#"><div class="box"> Cf </div></a>
            </div>
            <div class="bottom">
                <a href="#"><div class="box"> Ho </div></a>
                <a href="#"><div class="box"> Es </div></a>
            </div>
            <div class="bottom">
                <a href="#"><div class="box"> Er </div></a>
                <a href="#"><div class="box"> Fm </div></a>
            </div>
            <div class="bottom">
                <a href="#"><div class="box"> Tm </div></a>
                <a href="#"><div class="box"> Md </div></a>
            </div>
            <div class="bottom">
                <a href="#"><div class="box"> Yb </div></a>
                <a href="#"><div class="box"> No </div></a>
            </div>           
        </div>
        </section>
    </body>
</html>

Hiç yorum yok:

Yorum Gönder