CSS Ve HTML Ile Web Sayfası Yapımı - Tasarım Kodlama

Trang chủ » Html Kodu Ile Web Sitesi Yapımı » CSS Ve HTML Ile Web Sayfası Yapımı - Tasarım Kodlama

Có thể bạn quan tâm

Bu yazıda HTML ve CSS kullanarak bir web sitesinin bir bölümünü yapacağız. Uygulamada temel CSS komutlarının yanı sıra son zamanlarda sık sık karşımıza çıkan FLEX, CSS variable(CSS Değişkenler) gibi kavramlarıda tasarımın bir kısmında kullanacağız.

Tasarımda güncel CSS kodlarının yanı sıra HTML5 ile hayatımıza giren yeni HTML etiketlerine de yer verilmektedir. Uygulamanın yapılış videosu ve kaynak kodlarına yazının devamından ulaşabilirsiniz.

Sayfayı hazırladığımızda aşağıdaki gibi görünecektir.

Tasarımda kullanılan görselleri  web tasarım  ve  arkaplan  bağlantılarına tıklayarak indirebilirsiniz.

Uygulamanın yapılış videosu

HTML Kodu:

<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"> <link rel="stylesheet" href="tasarim.css"> <title>TasarimKodlama</title> </head> <body> <div class="sayfa"> <header> <div id="logo"> <a href="index.html"> <img src="gorsel/web.png" alt="logo"> </a> </div> <nav id="ust-menu"> <ul> <li><a href="#">Sayfa</a></li> <li><a href="#">Sayfa</a> <ul> <li><a href="#">Alt Sayfa</a></li> <li><a href="#">Alt Sayfa</a></li> <li><a href="#">Alt Sayfa</a></li> <li><a href="#">Alt Sayfa</a></li> </ul> </li> <li><a href="#">Sayfa</a></li> <li><a href="#">Sayfa</a></li> </ul> </nav> </header> <main> <article> <h2> Word Rastgele Başlık </h2> <p> Video, size görüşünüzü kanıtlamak için güçlü bir yol sunar. Çevrimiçi Video'ya tıkladığınızda, eklemek istediğiniz videoya ait ekleme kodunu yapıştırabilirsiniz. Belgenize en iyi uyan videoyu çevrimiçi olarak aramak için bir anahtar sözcük de yazabilirsiniz. </p> <p> Word, belgenizin profesyonelce üretilmiş görünmesini sağlamak için birbirini tamamlayan üst bilgi, alt bilgi, kapak sayfası ve metin kutusu tasarımları sağlar. Örneğin, birbiriyle uyumlu bir kapak sayfası, başlık ve kenar çubuğu ekleyebilirsiniz. Ekle'ye tıklayın ve ardından farklı galerilerden eklemek istediğiniz öğeleri seçin. </p> </article> <div class="yatay-cizgi"></div> <article> <h2> Word Rastgele Başlık </h2> <p> Video, size görüşünüzü kanıtlamak için güçlü bir yol sunar. Çevrimiçi Video'ya tıkladığınızda, eklemek istediğiniz videoya ait ekleme kodunu yapıştırabilirsiniz. </p> <p> Örneğin, birbiriyle uyumlu bir kapak sayfası, başlık ve kenar çubuğu ekleyebilirsiniz. Ekle'ye tıklayın ve ardından farklı galerilerden eklemek istediğiniz öğeleri seçin. </p> </article> <div class="yatay-cizgi"></div> <article> <h2> Word Rastgele Başlık </h2> <p> Word, belgenizin profesyonelce üretilmiş görünmesini sağlamak için birbirini tamamlayan üst bilgi, alt bilgi, kapak sayfası ve metin kutusu tasarımları sağlar. </p> </article> </main> <footer> <p>Tüm Telif Hakları Saklıdır</p> </footer> </div> </body> </html>
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889 <!DOCTYPE html><html lang="tr"> <head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible"content="ie=edge"><link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"rel="stylesheet"><link rel="stylesheet"href="tasarim.css"><title>TasarimKodlama</title></head> <body><div class="sayfa"><header><div id="logo"><a href="index.html"><img src="gorsel/web.png"alt="logo"></a></div><nav id="ust-menu"><ul><li><a href="#">Sayfa</a></li><li><a href="#">Sayfa</a><ul><li><a href="#">Alt Sayfa</a></li><li><a href="#">Alt Sayfa</a></li><li><a href="#">Alt Sayfa</a></li><li><a href="#">Alt Sayfa</a></li></ul></li><li><a href="#">Sayfa</a></li><li><a href="#">Sayfa</a></li></ul></nav></header><main><article><h2> Word Rastgele Başlık</h2><p> Video, size görüşünüzü kanıtlamak için güçlü bir yol sunar. Çevrimiçi Video'ya tıkladığınızda, eklemek istediğiniz videoya ait ekleme kodunu yapıştırabilirsiniz. Belgenize en iyi uyan videoyu çevrimiçi olarak aramak için bir anahtar sözcük de yazabilirsiniz.</p><p> Word, belgenizin profesyonelce üretilmiş görünmesini sağlamak için birbirini tamamlayan üst bilgi, alt bilgi, kapak sayfası ve metin kutusu tasarımları sağlar. Örneğin, birbiriyle uyumlu bir kapak sayfası, başlık ve kenar çubuğu ekleyebilirsiniz. Ekle'ye tıklayın ve ardından farklı galerilerden eklemek istediğiniz öğeleri seçin.</p></article><div class="yatay-cizgi"></div><article><h2> Word Rastgele Başlık</h2><p> Video, size görüşünüzü kanıtlamak için güçlü bir yol sunar. Çevrimiçi Video'ya tıkladığınızda, eklemek istediğiniz videoya ait ekleme kodunu yapıştırabilirsiniz. </p><p> Örneğin, birbiriyle uyumlu bir kapak sayfası, başlık ve kenar çubuğu ekleyebilirsiniz. Ekle'ye tıklayın ve ardından farklı galerilerden eklemek istediğiniz öğeleri seçin.</p></article><div class="yatay-cizgi"></div><article><h2> Word Rastgele Başlık</h2><p> Word, belgenizin profesyonelce üretilmiş görünmesini sağlamak için birbirini tamamlayan üst bilgi, alt bilgi, kapak sayfası ve metin kutusu tasarımları sağlar.</p></article></main><footer><p>Tüm Telif Hakları Saklıdır</p></footer></div></body> </html>

CSS: (tasarim.css)

*{ box-sizing: border-box; } /*CSS Değişken Kullanımı*/ /*değişken tanımlama ve değer atama*/ :root{ --yazi-renk:#fff; --bg-renk:#ff6b81; --bg-aktif-renk:#ff4757; } h1, h2, p, ul, li, body{ margin:0; padding:0; } body{ background: url(gorsel/bg2.jpg) fixed; /*fixed arkaplanı sabitler*/ font-family: 'Montserrat', sans-serif; } .sayfa{ width: 960px; margin:10px auto; background: var(--yazi-renk); border:3px solid var(--bg-renk); border-radius: 15px; overflow: hidden;/*taşan kısımlar temizleniyor*/ } #logo img{ width: 100%; vertical-align: middle; } #ust-menu > ul{ position: relative; list-style: none; display: flex; background: var(--bg-renk); justify-content: space-around; } #ust-menu > ul > li{ position: relative; flex-grow: 1; } #ust-menu > ul ul{ display: none; list-style: none; position: absolute; background: var(--bg-renk); width: 100%; border-radius: 0 0 10px 10px; overflow: hidden; } #ust-menu > ul > li:hover ul{ /*display: block; yada flex kullanılabilir*/ display: flex; flex-direction: column; } #ust-menu ul li:hover{ background:var(--bg-aktif-renk); } #ust-menu ul li a{ text-align: center; display: block; /*bulunduğu alanın içinde 100% olarak duracak*/ height: 40px; line-height: 40px; color:var(--yazi-renk); text-decoration: none; font-size: 1.2em;; } main{ padding:20px;/*margin de kullanılabilir*/ } main p{ margin:5px 0; } footer{ background:var(--bg-renk); padding:15px; text-align: center; color:var(--yazi-renk); } /*diğer css kodları*/ .yatay-cizgi{ border-bottom:1px solid #a4b0be; margin:10px 0; }
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100 *{box-sizing:border-box;} /*CSS Değişken Kullanımı*//*değişken tanımlama ve değer atama*/:root{--yazi-renk:#fff;--bg-renk:#ff6b81;--bg-aktif-renk:#ff4757;} h1,h2,p,ul,li,body{margin:0;padding:0;} body{background:url(gorsel/bg2.jpg)fixed;/*fixed arkaplanı sabitler*/font-family:'Montserrat',sans-serif;}.sayfa{width:960px;margin:10pxauto;background:var(--yazi-renk);border:3pxsolidvar(--bg-renk);border-radius:15px;overflow:hidden;/*taşan kısımlar temizleniyor*/}#logo img{width:100%;vertical-align:middle;}#ust-menu > ul{position:relative;list-style:none;display:flex;background:var(--bg-renk);justify-content:space-around;} #ust-menu > ul > li{position:relative;flex-grow:1;} #ust-menu > ul ul{display:none;list-style:none;position:absolute;background:var(--bg-renk);width:100%;border-radius:0010px10px;overflow:hidden;}#ust-menu > ul > li:hover ul{/*display: block; yada flex kullanılabilir*/display:flex;flex-direction:column;}#ust-menu ul li:hover{background:var(--bg-aktif-renk);}#ust-menu ul li a{text-align:center;display:block;/*bulunduğu alanın içinde 100% olarak duracak*/height:40px;line-height:40px;color:var(--yazi-renk);text-decoration:none;font-size:1.2em;;}main{padding:20px;/*margin de kullanılabilir*/}main p{margin:5px0;} footer{background:var(--bg-renk);padding:15px;text-align:center;color:var(--yazi-renk);} /*diğer css kodları*/.yatay-cizgi{border-bottom:1pxsolid#a4b0be;margin:10px0;}
EtiketlerCSS ve Div Kullanarak Web Sayfası Örneği CSS Web Sayfa Örnekleri HTML ve CSS ile Web Sayfası Yapımı Web Sayfası Örneği

Từ khóa » Html Kodu Ile Web Sitesi Yapımı