In Aptana Studio 3, Create Web Page With CSS Method 2 – Turkish Tutorial
**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.
** 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
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
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
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