Css Ve Html İle Forum Teması Yapımı

pikachu · 24 Şub 2021

Merhaba değerli forum üyeleri bu gün sizlerle bir forum teması nasıl yapılır bunu öğreneceğiz:

(Bu konuda css ve html anlatmadım. Html dersleri için Trker4ktas moderatörün konularına bakın css bu gün ilerleyen saatlerde gelecek

bütün kodları kopyalayın ve index.html diye bir dosya oluşturp onun içine koyun daha sonra dosyayı sürükleyerek tarayıcının içine koyun ve temamızın nasıl olduğuna bakın)

ilk başta html taglarını giriyoruz

HTML:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Forum Teması</title>
</head>
<body>
  
</body>
</html>

daha sonra <body> taglarının arasına kodlarımız

HTML:

<html>
<head>
    <title>Developers Area</title>
    <meta charset="utf-8">
    <meta name="author" content="The61">
    <meta name ="keywords" content="dev,develop,geliştiriciler,platform,java,python,c,c++,web,türk">
    <meta name ="description" content="Developers Forum">
    <meta name ="viewport" content="width=device-width,initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">                                 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
      



      
    </script>
</head>

<!-- bu kısım css  taglarını girdiğimiz -->

<style type="text/css">
*{
    margin:0;
    padding:0;
}
body{
    background:lightgray;
    font-size:14px;
    font-family:arial;
}
.main{
    width:100%;
    height:100%;
    background:gray;
}
.main > .navbar{
    width:100%;
    height:6%;
    background:#333333;
}
.main > .navbar > .icons{
    float: left;
    padding:13px 0px 0px 50px;
}
.main > .navbar > .icons > a{
    color:white;
    padding: 15px;
}
.main > .navbar > .src{
    float: right;
    margin: 13px 30px 0px 0px;
}
.main > .navbar > .src > a{
    color:white;
    padding: 5px;
    text-decoration: none;
}
.main > .navbar > .src > #lv > #lg{
    padding-left: 3px;
}

.main > .header{
    width:100%;
    height:10%;
    background:#FFFFFF
}
.main > .header > .logo{
    float:left;
    margin:20px 0px 0px 50px;
}
.main > .header > .menu{
    float:right;
    padding:30px 20px 0px 0px;
}
.main > .header > .menu > a{
    color:black;
    padding:6px;
    text-decoration: none;
    transition: all 500ms;
}
.main > .header > .menu > a:hover{
    color:white;
    background:#328BC2;
    transition: all 500ms;
}
.main >  #day{
    width:100%;
    height:5%;
    background:#348BC1;
}
.main > #day > p{
    color:#F7F9F9;
    font-size:14px;
    padding:10px 0px 0px 50px;
}
.main > #day > a{
    float:right;
    margin:-15px 10px 0px 0px;
    color:#F7F9F9;
    font-size: 14px;
    text-decoration: none;
}
.main > .banner{
    width:100%;
    height: 35%;
    background:linear-gradient(to right bottom,#2975B3,#348BC1);
}
.main > .banner > #bannertext > h1{
    text-align: center;
    color: white;
    padding-top: 30px;
    font-size: 50px;
    font-weight:200;
}
.main > #banneralt{
    width:100%;
    height:10%;
    background:#333333;
}
.main > #banneralt > p{
    color:#55585F;
    text-align: center;
    padding-top: 15px;
}
.main > .content{
    width:100%;
    height:100%;
    background:none;
}
.main > .content > .left-column{
    float: left;
    width:900px;
    height:%100;
    background:lightgray;
}
.main > .content > .right-column{
    float:left;
    width: 449px;
    height: 700px;
    background:lightgray;
}
.main > .content > .left-column > .cat-1{
    width:700px;
    height:300px;
    border-radius:5px;
    margin:10px auto;
    background:white;
    overflow:hidden;
}
.main > .content > .left-column > .cat-1 > #topic{
    width:%100;
    height:15%;
    background:#348BC1;
    border-radius:5px 5px 0px 0px;
}
.main > .content > .left-column > .cat-1 > #topic > h2{
    color:white;
    font-size:18px;
    font-weight: lighter;
    padding:15px 0px 0px 15px;
}
.main > .content > .left-column > .cat-1 > #timeline{
    width:%100;
    height:8%;
    background:#333333;
}
.main > .content > .left-column > .cat-1 > #timeline > #fr{
    float:left;
    margin:5px 0px 0px 40px;
    font-size:12px;
    text-decoration: none;
    color:white;
}
.main > .content > .left-column > .cat-1 > #timeline > a{
    float:right;
    color:white;
    font-size:12px;
    text-decoration: none;
    margin:5px 50px 0px 0px;
}
.main > .content > .left-column > .cat-1 > #post{
    width:%100;
    height:20%;
    background:white;
    border-bottom:1px solid lightgray;
}
.main > .content > .left-column > .cat-1 > #post > #post-img{
    float:left;
    margin:12px 10px 0px 6px;
}
.main > .content > .left-column > .cat-1 > #post > #post-name{
    padding:10px 0px 0px 0px;
}
.main > .content > .left-column > .cat-1 > #post > #post-name > p{
    font-size:12px;
}
.main > .content > .left-column > .cat-1 > #post > #post-top{
    float:left;
    margin:-25px 10px 0px 410px;
}
.main > .content > .left-column > .cat-1 > #post > #post-posts{
    float:left;
    margin:-25px 0px 0px 500px;
}
.main > .content > .left-column > .cat-1 > #post > #last{
    float:left;
    margin:-35px 0px 0px 570px;
}
.main > .content > .right-column > .newp{
    width:300px;
    height:300px;
    margin:10px 0px 0px 50px;
    border-radius:5px;
    background:white;
    overflow: hidden;
}
.main > .content > .right-column > .newp > #topico{
    width:%100;
    height:15%;
    border-radius:5px 5px 0px 0px;
    background:#348BC1;
}
.main > .content > .right-column > .newp > #topico > h2{
    color:white;
    font-size:18px;
    font-weight: lighter;
    padding:15px 0px 0px 15px;
}
.main > .content > .right-column > .newp > #post2{
    width:%100;
    height:25%;
    margin-top:0px;
    background:none;
    border-bottom:1px solid lightgray;
}
.main > .content > .right-column > .newp > #post2 > #post-img{
    float:left;
    width:60px;
    height:60px;
    margin:10px 0px 0px 10px;
    background-image:url(https://s3.amazonaws.com/uifaces/faces/twitter/getsocial_now/128.jpg);
    background-size:cover;
    background-position:center;
}
.main > .content > .right-column > .newp > #post2 > #post-text{
    float:left;
    margin:15px 0px 0px 10px;
}
.main > .content > .right-column > .newp > #post2 > #post-text > h4{
    font-size:13px;
}
.main > .content > .right-column > .newp > #post2 > #post-text > p{
    font-size:12px;
}
</style>

<!-- css tagları burada bitiyor -->

<body>
    <div class ="main">
        <div class ="navbar">
         <div class ="icons">
             <a href ="#"><i class="fab fa-facebook-f"></i></a>
             <a href ="#"><i class="fab fa-twitter"></i></a>
             <a href ="#"><i class="fab fa-google"></i></a>
             <a href ="#"><i class="fas fa-rss"></i></a>
         </div>
         <div class ="src">
          <a href ="#"><i class="fas fa-search"></i></a>
          <a id="lv" href="#">Login<i id="lg" class="fas fa-sign-in-alt"></i></a>
         </div>
        </div>
        <div class ="header">
        <div class ="logo">
          <h1><span style ="color:#2975B3;">FORUM</span>PLUS</h1>
      </div>
      <div class ="menu">
          <a href ="#">FORUMS</a>
          <a href ="#">ARTICLES</a>
          <a href ="#">BLOGS</a>
          <a href ="#">WHATS'NEW</a>
          <a href ="#">COLOR</a>
          <a href ="#">CONTACT</a>
        </div>
    </div>
    <div id ="day">
        <p>Saturday,September 17.2016</p>
        <a href ="#">FAQ</a>
        <a href ="#">Calendar</a>
    </div>
    <div class ="banner">
     <div id ="bannertext">
         <h1>Welcome To Forum Plus</h1>
    </div>
</div>
    <div id ="banneralt">
        <p>İf this is your first visit be sure to check out the FAQ by clicking the link above.You may have to register before you can post click the register link <br>proceed.To start viewing messages select the forum that you want to visit from the selection below</p>
    </div>
    <div style ="clear:both;"></div>
        <div class ="content">
         <div class  ="left-column">
          <div class ="cat-1">
           <div id="topic">
               <h2>HELPS SUPPORTS</h2>
           </div>
           <div id ="timeline">
               <a id ="fr" href ="#">FORUM</a>
               <a href ="#">LAST POSTS</a>
               <a href ="#">POSTS</a>
               <a href ="#">TOPİCS</a>
           </div>
            <div id ="post">
                <div id ="post-img">
                    <i class="fas fa-file fa-2x"></i>
                </div>
                <div id ="post-name">
             <h4>POST İNSTALLATİON</h4>
             <p>Post installation</p>
         </div>
         <div id ="post-top">
             <p>2</p>
          </div>
          <div id ="post-posts">
              <p>2</p>
          </div>
          <div id ="last">
              <p>Learn D7 coding..<br>
                  by <a href ="#">admin</a></p>
          </div>
      </div>
           <div id ="post">
                <div id ="post-img">
                    <i class="fas fa-file fa-2x"></i>
                </div>
                <div id ="post-name">
             <h4>POST İNSTALLATİON</h4>
             <p>Post installation</p>
         </div>
         <div id ="post-top">
             <p>2</p>
          </div>
          <div id ="post-posts">
              <p>2</p>
          </div>
          <div id ="last">
              <p>Learn D7 coding..<br>
                  by <a href ="#">admin</a></p>
          </div>
      </div>
           <div id ="post">
                <div id ="post-img">
                    <i class="fas fa-file fa-2x"></i>
                </div>
                <div id ="post-name">
             <h4>POST İNSTALLATİON</h4>
             <p>Post installation</p>
         </div>
         <div id ="post-top">
             <p>2</p>
          </div>
          <div id ="post-posts">
              <p>2</p>
          </div>
          <div id ="last">
              <p>Learn D7 coding..<br>
                  by <a href ="#">admin</a></p>
          </div>
      </div>
           <div id ="post">
                <div id ="post-img">
                    <i class="fas fa-file fa-2x"></i>
                </div>
                <div id ="post-name">
             <h4>POST İNSTALLATİON</h4>
             <p>Post installation</p>
         </div>
         <div id ="post-top">
             <p>2</p>
          </div>
          <div id ="post-posts">
              <p>2</p>
          </div>
          <div id ="last">
              <p>Learn D7 coding..<br>
                  by <a href ="#">admin</a></p>
          </div>
      </div>
  </div>
           <div class ="cat-1">
           <div id="topic">
               <h2>GENERAL DİSCUSSION</h2>
           </div>
           <div id ="timeline">
               <a id ="fr" href ="#">FORUM</a>
               <a href ="#">LAST POSTS</a>
               <a href ="#">POSTS</a>
               <a href ="#">TOPİCS</a>
           </div>
                <div id ="post">
                <div id ="post-img">
                    <i class="fas fa-file fa-2x"></i>
                </div>
                <div id ="post-name">
             <h4>POST İNSTALLATİON</h4>
             <p>Post installation</p>
         </div>
         <div id ="post-top">
             <p>2</p>
          </div>
          <div id ="post-posts">
              <p>2</p>
          </div>
          <div id ="last">
              <p>Learn D7 coding..<br>
                  by <a href ="#">admin</a></p>
          </div>
      </div>
           <div id ="post">
                <div id ="post-img">
                    <i class="fas fa-file fa-2x"></i>
                </div>
                <div id ="post-name">
             <h4>POST İNSTALLATİON</h4>
             <p>Post installation</p>
         </div>
         <div id ="post-top">
             <p>2</p>
          </div>
          <div id ="post-posts">
              <p>2</p>
          </div>
          <div id ="last">
              <p>Learn D7 coding..<br>
                  by <a href ="#">admin</a></p>
          </div>
      </div>
           <div id ="post">
                <div id ="post-img">
                    <i class="fas fa-file fa-2x"></i>
                </div>
                <div id ="post-name">
             <h4>POST İNSTALLATİON</h4>
             <p>Post installation</p>
         </div>
         <div id ="post-top">
             <p>2</p>
          </div>
          <div id ="post-posts">
              <p>2</p>
          </div>
          <div id ="last">
              <p>Learn D7 coding..<br>
                  by <a href ="#">admin</a></p>
          </div>
      </div>
           <div id ="post">
                <div id ="post-img">
                    <i class="fas fa-file fa-2x"></i>
                </div>
                <div id ="post-name">
             <h4>POST İNSTALLATİON</h4>
             <p>Post installation</p>
         </div>
         <div id ="post-top">
             <p>2</p>
          </div>
          <div id ="post-posts">
              <p>2</p>
          </div>
          <div id ="last">
              <p>Learn D7 coding..<br>
                  by <a href ="#">admin</a></p>
          </div>
      </div>

          </div>
                     <div class ="cat-1">
           <div id="topic">
               <h2>GENERAL DİSCUSSION</h2>
           </div>
           <div id ="timeline">
               <a id ="fr" href ="#">FORUM</a>
               <a href ="#">LAST POSTS</a>
               <a href ="#">POSTS</a>
               <a href ="#">TOPİCS</a>
           </div>
                <div id ="post">
                <div id ="post-img">
                    <i class="fas fa-file fa-2x"></i>
                </div>
                <div id ="post-name">
             <h4>POST İNSTALLATİON</h4>
             <p>Post installation</p>
         </div>
         <div id ="post-top">
             <p>2</p>
          </div>
          <div id ="post-posts">
              <p>2</p>
          </div>
          <div id ="last">
              <p>Learn D7 coding..<br>
                  by <a href ="#">admin</a></p>
          </div>
      </div>
           <div id ="post">
                <div id ="post-img">
                    <i class="fas fa-file fa-2x"></i>
                </div>
                <div id ="post-name">
             <h4>POST İNSTALLATİON</h4>
             <p>Post installation</p>
         </div>
         <div id ="post-top">
             <p>2</p>
          </div>
          <div id ="post-posts">
              <p>2</p>
          </div>
          <div id ="last">
              <p>Learn D7 coding..<br>
                  by <a href ="#">admin</a></p>
          </div>
      </div>
           <div id ="post">
                <div id ="post-img">
                    <i class="fas fa-file fa-2x"></i>
                </div>
                <div id ="post-name">
             <h4>POST İNSTALLATİON</h4>
             <p>Post installation</p>
         </div>
         <div id ="post-top">
             <p>2</p>
          </div>
          <div id ="post-posts">
              <p>2</p>
          </div>
          <div id ="last">
              <p>Learn D7 coding..<br>
                  by <a href ="#">admin</a></p>
          </div>
      </div>
           <div id ="post">
                <div id ="post-img">
                    <i class="fas fa-file fa-2x"></i>
                </div>
                <div id ="post-name">
             <h4>POST İNSTALLATİON</h4>
             <p>Post installation</p>
         </div>
         <div id ="post-top">
             <p>2</p>
          </div>
          <div id ="post-posts">
              <p>2</p>
          </div>
          <div id ="last">
              <p>Learn D7 coding..<br>
                  by <a href ="#">admin</a></p>
          </div>
      </div>

          </div>
                     <div class ="cat-1">
           <div id="topic">
               <h2>GENERAL DİSCUSSION</h2>
           </div>
           <div id ="timeline">
               <a id ="fr" href ="#">FORUM</a>
               <a href ="#">LAST POSTS</a>
               <a href ="#">POSTS</a>
               <a href ="#">TOPİCS</a>
           </div>
                <div id ="post">
                <div id ="post-img">
                    <i class="fas fa-file fa-2x"></i>
                </div>
                <div id ="post-name">
             <h4>POST İNSTALLATİON</h4>
             <p>Post installation</p>
         </div>
         <div id ="post-top">
             <p>2</p>
          </div>
          <div id ="post-posts">
              <p>2</p>
          </div>
          <div id ="last">
              <p>Learn D7 coding..<br>
                  by <a href ="#">admin</a></p>
          </div>
      </div>
           <div id ="post">
                <div id ="post-img">
                    <i class="fas fa-file fa-2x"></i>
                </div>
                <div id ="post-name">
             <h4>POST İNSTALLATİON</h4>
             <p>Post installation</p>
         </div>
         <div id ="post-top">
             <p>2</p>
          </div>
          <div id ="post-posts">
              <p>2</p>
          </div>
          <div id ="last">
              <p>Learn D7 coding..<br>
                  by <a href ="#">admin</a></p>
          </div>
      </div>
           <div id ="post">
                <div id ="post-img">
                    <i class="fas fa-file fa-2x"></i>
                </div>
                <div id ="post-name">
             <h4>POST İNSTALLATİON</h4>
             <p>Post installation</p>
         </div>
         <div id ="post-top">
             <p>2</p>
          </div>
          <div id ="post-posts">
              <p>2</p>
          </div>
          <div id ="last">
              <p>Learn D7 coding..<br>
                  by <a href ="#">admin</a></p>
          </div>
      </div>
           <div id ="post">
                <div id ="post-img">
                    <i class="fas fa-file fa-2x"></i>
                </div>
                <div id ="post-name">
             <h4>POST İNSTALLATİON</h4>
             <p>Post installation</p>
         </div>
         <div id ="post-top">
             <p>2</p>
          </div>
          <div id ="post-posts">
              <p>2</p>
          </div>
          <div id ="last">
              <p>Learn D7 coding..<br>
                  by <a href ="#">admin</a></p>
          </div>
      </div>

          </div>
         </div>
         <div class ="right-column">
          <div class ="newp">
          <div id ="topico">
              <h2>New Forum Posts</h2>
          </div>
          <div id ="post2">
           <div id ="post-img"></div>
           <div id ="post-text">
               <h4>Learn D7 Coding..</h4>
               <p>by <a href ="#">admin</a><br>
            Sun Oct 04,2015 05:30pm
               </p>
           </div>
          </div>
                   <div id ="post2">
           <div id ="post-img"></div>
           <div id ="post-text">
               <h4>Learn D7 Coding..</h4>
               <p>by <a href ="#">admin</a><br>
            Sun Oct 04,2015 05:30pm
               </p>
           </div>
          </div>
                   <div id ="post2">
           <div id ="post-img"></div>
           <div id ="post-text">
               <h4>Learn D7 Coding..</h4>
               <p>by <a href ="#">admin</a><br>
            Sun Oct 04,2015 05:30pm
               </p>
           </div>
          </div>
         </div>
        </div>
    </div>
</body>
</html>

storyman · 24 Şub 2021

Ellerinize sağlık?? Bu arada head'daki "lang=en" ' i tr yapın, ikide bi çeviri sorar yoksa tarayıcı ?

pikachu · 25 Şub 2021

Trker4ktas' Alıntı:
d

düzenledim

Trker4ktas o dururken bana düşmez düzenlemek

Css Ve Html İle Forum Teması Yapımı

pikachu

www.teknoleo.com

storyman

Hızlı üye

pikachu

www.teknoleo.com

Yasal

İletişim

Bizi Takip Edin

Youtube : Webmaster Forum

Instagram : @webmasterforum.com.tr

Facebook : Webmaster Forum

Twitter : @WebmasterForum_

Css Ve Html İle Forum Teması Yapımı

pikachu

www.teknoleo.com

storyman

Hızlı üye

pikachu

www.teknoleo.com

Yasal

İletişim

Bizi Takip Edin

Youtube : Webmaster Forum Instagram : @webmasterforum.com.tr Facebook : Webmaster Forum Twitter : @WebmasterForum_

Youtube : Webmaster Forum

Instagram : @webmasterforum.com.tr

Facebook : Webmaster Forum

Twitter : @WebmasterForum_