Javascript Örnekleri – 33 ile 1000 arasındaki tek sayıların toplamı ve ortalaması

33 ile 1000 arasındaki tek sayıların toplamını ve 3`e bölünebilen sayıların ortalamasını bulan program

<script type="text/javascript">
        var toplam = 0, adet = 0,toplam2=0;
        for(var i=33;i<=1000;i+=2)
        {
            document.write(i + "<br/>");
            toplam += i;
            if (i % 3 == 0)
            {
                toplam2 += i;
                adet++;
            }
        }
        var ortalama = toplam2 / adet;
        document.write("Sayıların Toplamı.." + toplam + "<br/>");
        document.write("3 'e bölünen sayıların ortalaması.." + ortalama );
    </script>

Css Dersleri – Div Uygulama Örneği Site 2

Bir başka css div uygulaması ile css derslerimize devam ediyoruz aşağıdaki uygulama div ile kutuların yerleşimi esnasında float kullanımı ile kullanılabilecek bir örnek…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#kutu{width:1000px;
height:600px;
background-color:#FF0;
margin:auto;}

#kutu1{width:250px;
height:200px;
background-color:#090;
color:#FFF;
text-align:center;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight:bolder;
line-height:200px;
vertical-align:middle;

float:left;}

#kutu2{width:750px;
height:400px;
background-color:#006;
color:#FFF;
text-align:center;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight:bolder;
line-height:400px;
vertical-align:middle;
float:right;}

#kutu3{width:250px;
height:200px;
background-color:#300;
color:#FFF;
text-align:center;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight:bolder;
line-height:250px;
vertical-align:middle;

float:left;}


#kutu4{width:250px;
height:200px;
background-color:#F63;
color:#FFF;
text-align:center;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight:bolder;
line-height:200px;
vertical-align:middle;

float:left;}

#kutu5{width:250px;
height:200px;
background-color:#F06;
color:#FFF;
text-align:center;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight:bolder;
line-height:200px;
vertical-align:middle;
float:left;}

#kutu6{width:250px;
height:200px;
background-color:#C0F;
color:#FFF;
text-align:center;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight:bolder;
line-height:200px;
vertical-align:middle;

float:left;}

#kutu7{width:250px;
height:200px;
background-color:#30F;
color:#FFF;
text-align:center;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight:bolder;
line-height:200px;
vertical-align:middle;
float:left;}
</style>
</head>

<body>
<div id="kutu">
<div id="kutu1">KUTU1</div>
<div id="kutu2">KUTU2</div>
<div id="kutu3">KUTU3</div>
<div id="kutu4">KUTU4</div>
<div id="kutu5">KUTU5</div>
<div id="kutu6">KUTU6</div>
<div id="kutu7">KUTU7</div></div>
</body>
</html>

Css Dersleri – Div Uygulama Örneği Site 1

Aşağıdaki uygulamayı yaparak css div kullanım uygulama örneklerimize devam ediyoruz.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS - K utu Modeli Özellikleri</title>
<style type="text/css">
	.site_siniri {width: 960px; margin:0 auto;}	
	.turuncu_banner {width: 960px; height: 120px; background-color: orange; line-height:120px;text-align:center; }
	.sol_menu { float:left; width: 260px; height: 350px; background-color: cornflowerblue; line-height:350px;text-align:center;}
	.sag_sinir{ float:left; width:700px; height: 350px; background-color: white; }
	.sag_icerik_ust { width: 700px; height: 200px; background-color: deepskyblue; line-height:200px; text-align:center;}
	.sag_icerik_alt { width:700px; height: 150px; background-color: deeppink; line-height:150px; text-align:center;  }
	.sari_alt { width: 960px; height: 80px; background-color: yellow; line-height:80px; text-align:center; clear:both;}

</style>
</head>

<body>
  <div class="site_siniri">
		<div class="turuncu_banner">BANNER ALANI</div>
   		<div class="sol_menu">MENÜ</div>
		<div class="sag_sinir">
        		<div class="sag_icerik_ust">İÇERİK - ÜST</div>
          		<div class="sag_icerik_alt">İÇERİK - ALT</div>                               
        </div>
   		<div class="sari_alt">ALT</div>
	</div>
</body>
</html>

Online Html Tablo Oluşturma Araçları

Web sayfası hazırlarken eğer gelişmiş bir editör kullanmıyorsanız tablo oluşturmak biraz zahmetli olabilir, bu yazımda bizi bu dertten kurtaracak online html tablo oluşturma sitelerinden bahsedeceğiz
1-Tables Generator http://www.tablesgenerator.com/html_tables
2-Div Table http://divtable.com/generator/
3-Html Clenaer https://html-cleaner.com/html-table-generator/
4-Rapid Tables http://www.rapidtables.com/web/tools/html-table-generator.htm
5-Quackit https://www.quackit.com/html/html_table_generator.cfm
bunlar işimizi gerçekten kolaylaştıracek siteler sizlerde bu siteler yardımı ile html tablolar oluşturabilirsiniz.
Benim en çok hoşuma giden 3 ve 5 numara 🙂 kolay gelsin…

Html Test Soru ve Cevapları 1

1. Web sayfasında resim göstermek için kullanılan etiket hangisidir.?
a. picture
b. image
c.img
d. src

2. < b > etiketi yazıları kalın kazmak için kullanılır, bu etiketten başka hangi etiket yazıları kalın yapar ?
a. < strong >
b. < dar>
c. < black>
d. < emp >

3. Etiketler ve yazılar hangi bölüme yazılırsa direkt olarak görüntülenmez ?
a. < html>
b. < head>
c. < title>
d. < body>

4. Web sayfalarına yatay çizgi eklemek için hangi etiket kullanılır ?
a. < hr>
b. < line>
c. < line direction="horizontal">
d. < tr>

5. Html sayfalarında kullanılan ilk etiket hangisidir ?
a. < head>
b. < title>
c. < html>
d. < document>

6. Tabloya satır eklemek için hangi etiket kullanılır ?
a. < td> bilisimogretmeni.com< /td>
b. < cr> bilisimogretmeni.com< /cr>
c. < th> bilisimogretmeni.com< /th>
d. < tr> bilisimogretmeni.com< /tr>

7. Sırasız liste oluşturmak için kullanılan etiket hangisidir ?
a. < list>
b. < nl>
c. < ul>
d. < ol>

8. Sıralı liste oluşturmak için kullanılan etiket hangisidir ?
a. < dl>
b. < ol>
c. < list>
d. < ul>

9. E-mail linki hangisinde doğru bir şekilde oluşturulmuştur ?
a. < a href="bilisimogretmeni@bilisimogretmeni.com">
b. < mail href="bilisimogretmeni@bilisimogretmeni.com">
c. < mail>bilisimogretmeni@bilisimogretmeni.com< /mail>
d. < a href="mailto:bilisimogretmeni@bilisimogretmeni.com">

10. İtalic (Eğik) yazı etiketi hangisidir ?
a. < ii>
b. < italics>
c. < italic>
d. < i>

11. Zemin rengini değiştirmek için kullanılan etiket hangisidir ?
a. < body color="yellow">
b. < body bgcolor="yellow">
c. < background>yellow< /background>
d. < body background="yellow">

12. En küçük başlık yazma etiketi hangisidir ?
a. < heading>
b. < h6>
c. < h1>
d. < head>

13. Html’de bir alt satıra geçmek için hangi html etiketi kullanılır ?
a. < br>
b. < lb>
c. < break>
d. < newline>

14. Html’de onay kutusu oluşturmak için kullanılan etiket hangisidir ?
a. < checkbox>
b. < input type="checkbox">
c. < input=checkbox>
d. < input checkbox>

15. Hangi html kodu doğru bir şekilde kullanılmıştır.
a. < font colour="red">
b. < font color="red">
c. < red>< font>
d. Hepsi

16. Font etiketi ile beraber kullanılan parametre hangisidir ?
a. size
b. face
c. color
d. Hepsi

Css Dersleri-Div Kullanım Örnekleri

Css ile div kullanım örneklerimize devam ediyoruz uygulamamızda bize verilen aşağıdaki tasarımı oluşturmak için gerekli olan kodlamayı yapacağız.

css_div_kullanim

Bizden istenen div örneğinde yan yana 150px boyutunda 4 kutu ve kutular arasında 10px boşluk olacak aşağıdaki büyük dikdörtgen için ise 630px genişlik ve 80px yükseklik değerlerini kullanacağız.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Bilisimogretmeni.com Css Div Kullanım Örneği</title>
<style type="text/css">
    #kutu1 {
        height:150px;
        width:150px;
        background-color:#000000;
        color:white;
        float:left;
        margin-right:10px;
    }/*http://www.bilisimogretmeni.com/ */
    #kutu2 {
        height:150px;
        width:150px;
        background-color:#996600;
        float:left;
        margin-right:10px;
    }
    #kutu3 {
        height:150px;
        width:150px;
        background-color:#333366;
        float:left;
        margin-right:10px;
    }/*http://www.bilisimogretmeni.com/ */
    #kutu4 {
        height:150px;
        width:150px;
        background-color:#990000;
        float:left;
    }
    #kutu5 {height:80px;
            width:630px;
            background-color:#6633FF;
            margin-top:10px;
            clear:both;
            float:left;
            
    }
</style>
</head>
<body>
    <div id="kutu1"></div>
    <div id="kutu2"></div>
    <div id="kutu3"></div>
    <!--http://www.bilisimogretmeni.com/ -->
    <div id="kutu4"></div>
    <div id="kutu5"></div>
</body>
</html>

Şimdi biraz daha değişik bir örnek yapacağız

css_div_kullanim2

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
     <title>Bilisimogretmeni.com Css Div Kullanım Örneği</title>
<style type="text/css">
    #genel {
        padding:5px;
        width:600px;
        margin:auto;
    }
    #kutu1 {
        height:150px;
        width:150px;
        background-color:#990000;
        color:white;
        font-family:'Century Gothic';
        font-size:35px;
        font-weight:bold;
        text-align:center;
        vertical-align:middle;
        line-height:150px;
        float:left;
    }
    #kutu2 {
        height:150px;
        width:150px;
        background-color:#003366;
        color:white;
        font-family:'Century Gothic';
        font-size:35px;
        font-weight:bold;
        line-height:150px;
        text-align:center;
        vertical-align:middle;
        float:left;
        margin-left:10px;
    }
    #kutu3 {
        height:70px;
        width:590px;
        background-color:#330033;
        color:white;
        font-family:'Century Gothic';
        font-size:35px;
        font-weight:bold;
        text-align:center;
        vertical-align:middle;
        line-height:70px;
        clear:both;
        float:left;
        margin-bottom:10px;
        margin-top:10px;
    }
    #kutu4 {
        height:150px;
        width:150px;
        color:white;
        background-color:#003366;
        font-family:'Century Gothic';
        font-size:35px;
        /*http://www.bilisimogretmeni.com/ */
        font-weight:bold;
        text-align:center;
        vertical-align:middle;
        line-height:150px;
        margin-right:10px;
        float:right;
       
    }
    #kutu5 {
        width:150px;
        height:150px;
        background-color:#990000;
        color:white;
        font-family:'Century Gothic';
        font-size:35px;
        text-align:center;
        vertical-align:middle;
        line-height:150px;
        float:right;
        font-weight:bold;
        margin-right:10px;
        
    }
    #kutu6 {
        background-color:#330033;
        color:white;
        height:70px;
        width:590px;
        font-family:'Century Gothic';
        /*http://www.bilisimogretmeni.com/ */
        font-size:35px;
        font-weight:bold;
        text-align:right;
        vertical-align:middle;
        line-height:70px;
        clear:both;
        float:left;
        margin-top:10px;
    }
</style>
</head>
<body>
    <div id="genel">
        <div id="kutu1">Html</div>
        <div id="kutu2">Css</div>
        <div id="kutu3">Web Tasarım ve Programlama</div>
        <div id="kutu5">Vb.Net</div>
        <div id="kutu4">C#</div><!--http://www.bilisimogretmeni.com/ -->        
        <div id="kutu6">Programlama</div>
    </div>
</body>
</html>

Css Dersleri – Web Sayfası Uygulama Örneği (Şifalı Bitkiler)

web-odev-2-201510
Css uygulama örneklerimize devam ediyoruz resimdeki sayfanın yapılması için gerekli olan bilgileri konu sonundan indirebilirsiniz.

İndir “Css Uygulama Şifalı Bitkiler Sayfası” cssciceksitesi.rar – 3207 defa indirildi – 2 MB

Alıntı…:http://webpanosu.net