HTML5 ile Web Sayfası Örneği -1-

sdkbyrm · 23 Aralık 2020

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

HTML5 ile Web Sayfası Örneği -1-

sdkbyrm