HTML SAYFA TASARIMI

Html ve Css kullanarak baist ve şık bir sayfa tasarımı yapacağız. Tasarımda web uygulamalarına resim, link ve metin eklemenin ve web sayfalarını biçimlendirmenin temelini görmüş olacağız.



Html Sayfası Nasıl Oluşturulur.

Visual Studio programında File > New >Web Site Adımlarıyla açılan pencerede Empty Web Site seçin ve uygulamanıza bir isim verin. Boş bir uygulama ekranı gelecektir. Solution explorerde fareyi sağ tıklayarak veya üst menülerden WEB SİTE menüsünü tıklayarak açılan alt menülerden Add New Item menüsünü tıklatarak New Item penceresini açıp burada yer alan seçeneklerden Html Page seçeneğini seçip bir isim vererek bir html sayfası oluşturabilirsiniz.

Dreamveawer uygulaması ile bir html sayfası oluşturabilirsiniz.

Not Defteri ile bir HTML sayfası oluşturabilirsiniz. Eğer not defteri ile HTML sayfası oluşturacaksanız dosyanızı kaydederken uzantısı, .html olacak şekilde kaydedin.

Uygulamanız ile ana dizinde Img adında bir klasör oluşturun ve resimlerinizi bu klasöre kopyalayın. Böylece bu resimleri kullanabileceksiniz.

Benim yazdığım uygulamadaki resim isimlerini sizinkiyle değiştirebilirsiniz.

Resim ekleme

<img class="imgclass" src="Img/N1.jpg" />

Koduyla yapılır. Src özelliği resmin bulunduğu yeri, class ise bu resmin stil özelliklerinin tutulduğu sınıf ismini gösterir.

Metin Ekleme

<p></p> veya <span></span> tagları arasına yazarak ekleyebilirsiniz. Aslında bu taglar arasına yazmasanız da yazı görülür fakat bu taglara yazmak seo ve kontrol açısından avantaj sağlar.

Link Ekleme

<a class="linkler1" href="ayrinti.html">Ayrıntılı Bilgi İçin Tıklayın</a>

a tagı link tagıdır. Href ifadesi tıkladığımızda gideceğimiz sayfanın adresini verir. class ifadesi etiketin stil özelliklerini ayarladığımız sınıf adını gösterir.

Div Tagı

Bunlar sayfayı bağımsız bölümlere ve parçalara ayırmamızı ve bu parçalar üzerinde göstereceğimiz içeriğe göre tasarım yapmamızı sağlar. Her biri ayrı bir pencere gibi işlev görür.


     


    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>SİTE BAŞLIĞI</title>
    <style type="text/css">
        .Form2
        {
            text-align:center;
            float:left;
        }
        h1 
        {
            color: #055c36;
            font-size: 18pt;
        }
        .imgclass
        {
            width:250px;
            height:200px;
            margin:15px;
            float:left;
        }
        .ResimDiv
        {
            width:310px;
            height:310px;
            background:#760a0a;
            float:left;
            text-align:left;
        }
        .yazi
        {
            color:#00ff21;
            font-size:13pt;
            font-style:italic;
            float:left;
        }
        .linkler1
        {
            text-decoration:none;
            font-weight:bold;
            color:#ffd800;
        }
    </style>
</head>
<body>
        <div class="Form2">
            <h1>SANATSAL BİLGİ HTML SAYFASI</h1>
            <div class="ResimDiv">
                <img class="imgclass" src="Img/N1.jpg" />
                <span class="yazi">Ağaçlar yaşamdır. Ağaçları ve yeşilliği sevin sevdirin</span>
                <a class="linkler1" href="ayrinti.html">Ayrıntılı Bilgi İçin Tıklayın</a>
            </div>
            <div class="ResimDiv">
                <img class="imgclass" src="Img/N2.jpg" />
                <span class="yazi">Ağaçlar yaşamdır. Ağaçları ve yeşilliği sevin sevdirin</span>
                <a class="linkler1" href="ayrinti.html">Ayrıntılı Bilgi İçin Tıklayın</a>
            </div>
            <div class="ResimDiv">
                <img class="imgclass" src="Img/N3.jpg" />
                <span class="yazi">Ağaçlar yaşamdır. Ağaçları ve yeşilliği sevin sevdirin</span>
                <a class="linkler1" href="ayrinti.html">Ayrıntılı Bilgi İçin Tıklayın</a>
            </div>
            <div class="ResimDiv">
                <img class="imgclass" src="Img/N4.jpg" />
                <span class="yazi">Ağaçlar yaşamdır. Ağaçları ve yeşilliği sevin sevdirin</span>
                <a class="linkler1" href="ayrinti.html">Ayrıntılı Bilgi İçin Tıklayın</a>
            </div>
            <div class="ResimDiv">
                <img class="imgclass" src="Img/N5.jpg" />
                <span class="yazi">Ağaçlar yaşamdır. Ağaçları ve yeşilliği sevin sevdirin</span>
                <a class="linkler1" href="ayrinti.html">Ayrıntılı Bilgi İçin Tıklayın</a>
            </div>
            <div class="ResimDiv">
                <img class="imgclass" src="Img/N6.jpg" />
                <span class="yazi">Doğa yaşamdır. Doğayı sevin sevdirin</span>
                <a class="linkler1" href="ayrinti.html">Ayrıntılı Bilgi İçin Tıklayın</a>
            </div>
            <div class="ResimDiv">
                <img class="imgclass" src="Img/N7.jpg" />
                <span class="yazi">Ağaçlar yaşamdır. Ağaçları ve yeşilliği sevin sevdirin</span>
                <a class="linkler1" href="ayrinti.html">Ayrıntılı Bilgi İçin Tıklayın</a>
            </div>
            <div class="ResimDiv">
                <img class="imgclass" src="Img/N8.jpg" />
                <span class="yazi">Yaban hayvanlarını öldürmek artık masum bir insanı öldürmekle eşdeğer olmuş durumda</span>
                <a class="linkler1" href="ayrinti.html">Ayrıntılı Bilgi İçin Tıklayın</a>
            </div>
        </div>
</body>
</html>




SANATSAL BİLGİ

31/08/2016

  • YORUM YAZ
  • ADI SOYADI(veya nick)
  • YORUM

YÜZ YÜZE ÖZEL DERS

Evinizde veya kendi belirleyeceğiniz bir yerde özel öğretmenlerden yüz yüze Bilgisayar Programlama, Matematik, Fizik, Kimya, Biyoloji ve Elektrik dersleri alabilirsiniz İletişim Formu nu doldurarak bizimle iletişime geçebilirsiniz

YÜZ YÜZE ÖZEL DERS

Evinizde veya kendi belirleyeceğiniz bir yerde özel öğretmenlerden yüz yüze Bilgisayar Programlama, Matematik, Fizik, Kimya, Biyoloji ve Elektrik dersleri alabilirsiniz İletişim Formu nu doldurarak bizimle iletişime geçebilirsiniz

  • BİLGİSAYAR - ELEKTRİK
  • YGS - LYS KONULARI
  • 8. SINIF
  • 7. SINIF
  • 6. SINIF
  • GENEL MATEMATİK
  • BİRİM ÇEVİRİCİLER
COPYRIGHT© HER HAKKI SAKLIDIR
Sitede Yer Alan Bilgi Belge Ve Materyallerin İzinsiz olarak Kopyalanması ve Alıntılanması Yasaktır

SANATSAL BILGI