HTML5 Ile Web Sayfası Örneği -1 - Web Tasarım & Programlama

Trang chủ » Html Kodları örnek Site » HTML5 Ile Web Sayfası Örneği -1 - Web Tasarım & Programlama

Có thể bạn quan tâm

HTML5 ile basit bir web sayfası örneği.

ornek.html kodları:

<!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>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748 <!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ı:

/* 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; }
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 /* CSS Document */article{padding:5px;border:solid3px#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:double3px#b200ff;} section{padding:5px;border:solid3px#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ı:

Bunu paylaş:

  • X
  • Facebook

Từ khóa » Html Kodları örnek Site