HTML5 ile basit bir web sayfası örneği.
ornek.html kodları:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<!DOCTYPE html> <html> <head> <title>CSS-DIV Örnekleri -5-</title> <link href="css-5.css" rel="stylesheet" /> <meta charset="utf-8"> </head> <body> <header> <h1>Örnek Web Sayfası Tasarımı</h1> </header> <nav> <ul> <li><a href="#">Anasayfa</a></li> <li><a href="#">Hakkımda</a></li> <li><a href="#">İletişim</a></li> </ul> </nav> <article> <h1>Başlık1</h1> <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. 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> <aside> <figure> <img src="images/ahmetcansever.jpg" height="100px" width="100px" /> <figcaption>www.yazilimkodlama.com</figcaption> </figure> <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> </aside> <section> <h1>Başlık</h1> <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> </section> <footer> <hr /> Tüm hakları saklıdır. </footer> </body> </html> |
css-5.css CSS dosyası:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
/* CSS Document */ article { padding:5px; border:solid 3px #ff006e; margin-top:5px; } header { padding:0px; text-align:center; } aside { margin-top:5px; background-color:#F0BCBD; padding:5px; text-align:center; font-style:italic; border:double 3px #b200ff; } section { padding:5px; border:solid 3px #0026ff; margin-top:5px; } footer { padding:5px; text-align:center; font-weight:bold; } nav { text-align:center; } ul li { display:inline; padding-left:5px; padding-right:5px; text-align:left; font-size:16px; font-weight:bold; } |
Ekran Çıktısı:
hocam merhabalar ben istiyorum ki hakkımızda yazısına tıklandığında site hakkında olan yere gitsin veya iletişime tıklandığında iletişim ile alakalı yere gitsin ben bunu nasıl yapabilirim
Ahmet Bey size Nereden Ulaşabilirim.
Mail
ahmet.cansever@yandex.com.tr
Hocam ben konuya hakim değilim, HTML’den başlayarak anlamaya çalışıyorum.
Size sormak istediğim ise siz sitenizde de yeni bir başlık oluştururken her seferinde kodlamalara girerek mi yazıyorsunuz, yoksa başlık oluşturmak için “yeni konu aç” gibi bişey mi hazırlanıyo? evet ise bunun kodları nedir?
teşekkürler
Merhaba.Bu site wordpress. Hazir bir sistem. Direk yönetim panelinden basit bir sekilde ekleme yapiyorum.
kardeşim
başlık oluşturmak için önceden oluşturduğun projeyi açarsın kodlamada ise oluşturmak istediğin başlığı:
başlık
böyle yazarsın