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

sdkbyrm

olwα.ɴeт
Üyelik Tarihi
23 Aralık 2020
Mesajlar
813
Beğeniler
1
Puanı
3
Ticaret: 0 / 0 / 0
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ı:

1608732635812.png
 
Üst Alt