In Aptana Studio 3, Create Web Page With CSS Method 2 – Turkish Tutorial

in utopian-io •  7 years ago  (edited)

**We will continue the previous lessos and I will show you make the web page with CSS method in Aptana Studio 3 and The professional, open source development tool for the open web.

Aptana Studio 3 programında bugün birönceki dersimize kaldığımız yerden devam ediyoruz.Bu dersimde CSS yöntemi ile filtreleri, sayfalara geçiş işlemlerini ve buton işlemlerini ekleyip site hazırlama işlemimizi sonlandıracağız. Bu yöntem hem pratik hemde çok kullanışlıdır. İstediğiniz yerde oynama imkanı vermektedir. Lütfen dikkatle takip edip sizlerde uygulayınız.



Source

** Son şekillerini verceğimiz sayfamıza yazı ekleme işlemiyle videomuza devam edip çok faydalı işlemleri göstereceğim. Hadi videoya geçelim.**


NEW Index.html Kodları

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Main Page</title>
        <meta charset ="utf-8">
    <link rel="stylesheet" href="stil.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
    </head>
    
    <body>
    <nav>
        <a href="#gor1">HOME</a>
        <a href="#say1">SERVICES</a>
        <a href="#gor2">WORKS</a>
        <a href="#say2">ABOUT</a>
        <a href="#gor3">SUPPORT</a>
        <a href="#say3">CONTACT</a>
    </nav>
    <div id="gor1" class="gorsel">
        <div class="anasayfa anayazi">
            <h1>APTANA STUDIO 3</h1>
            <p>Aptana Studio 3.6.1 is our code base and complete environment that includes extensive capabilities to build. 
                <br>Ruby and Rails, PHP, and Python applications, along with complete HTML, CSS and JavaScript editing.</p>
                <span>Get more info</span>
        </div>
        <div class="anasayfa anafiltre"></div>  
    </div>  
    <div id="say1" class="sayfa"></div>     
    <div id="gor2" class="gorsel"></div>        
    <div id="say2" class="sayfa"></div> 
    <div id="gor3" class="gorsel"></div>        
    <div id="say3" class="sayfa"></div>
    
    </body>
        </html>



NEW Stil.css Kodları

*{
    margin: 0px;
    padding: 0px;   
}
body, html{
    height: 100%;
}
nav{
    z-index: 2;
    position: absolute;
    height: 100px;
    width: 100%;
    text-align: center;
    line-height: 100px;
}
nav a{
    color: #fff;
    font-family: 'Roboto Slab', serif;
    font-size: 20px;
    margin-left: 15px;
    text-decoration: none;
    padding: 12px 12px;
}
nav a:hover{
    background-color: #000;
}
.gorsel{
    height: 100%;
    background-color: lightblue;
    background-size: cover;
    background-attachment: fixed;
}
.sayfa{
    height: 50%;
    background-color: lightgreen;
}
#gor1{
    background-image: url("1.jpg");
}
#gor2{
    background-image: url("2.jpeg");
}
#gor3{
    background-image: url("3.jpg");
}
.anasayfa{
    position: absolute;
    float: left;
}
.anayazi{
    height: 100%;
    width: 100%;
    z-index: 1;
    text-align: center;
    margin-top: 280px;
}
.anayazi h1{
    font-family: 'Oswald', sans-serif;
    font-size:70px;
    color: black;
}
.anayazi p{
    font-family: 'Oswald', sans-serif;
    font-size:20px;
    color: red;
    margin-bottom: 20px;
}
.anayazi span{
    font-family: 'Oswald', sans-serif;
    font-size:20px;
    color: #fff;
    padding: 10px 10px;
    border-radius: 5px
    border: 1px solid orange;
    background-color: orange;
}
.anayazi span:hover{
    background-color: #fff;
    color: orange;
    cursor: pointer;
}
.anafiltre{
    height: 100%;
    width: 100%;
    background-color: #000;
    z-index: 0;
    opacity: 0.35;
}

Bir sonraki aşamada görüşmek üzere…

Githup link: Aptana Studio 3
İndirme Link Sitesi: Aptana Studio 3



Posted on Utopian.io - Rewarding Open Source Contributors

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Faydalı Bilgiler. Teşekkür ederiz.

Sağolun eksik olmayın..

Çok güzel olmuş hocam ellerine sağlık

Teşekkür ederim...

html öğrenmeye başlarken her şey çok güzeldi. Ta ki css girene kadar

Bence bu iki videomu not defteri ile yazarak uygulayın fikriniz değişecektir

Muhtemelen gelecek dönem yazılıma devam edeceğim. Html değil phyton düşünüyordum ama bilgisayar mühendisisiniz daha iyi bilirsiniz, ne önerirsiniz ? :D

python iyidir yol dogru devam ediniz...

Thank you for the contribution. It has been approved.

You can contact us on Discord.
[utopian-moderator]

Thank you for return

Hey @tarikhakan55 I am @utopian-io. I have just upvoted you!

Achievements

  • You have less than 500 followers. Just gave you a gift to help you succeed!
  • Seems like you contribute quite often. AMAZING!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

mooncryption-utopian-witness-gif

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x