-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcss.html
197 lines (178 loc) · 10.6 KB
/
css.html
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="style/style.css">
<title>DevHub | HTML5</title>
<link rel="icon" type="image/x-icon" href="img/programming.ico">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a style="font-size: 30px; font-weight: 700; color: #e1b2f0;" class="navbar-brand"
href="index.html">DevHUB.com</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="index.html">Ana Sayfa</a>
</li>
<li class="nav-item">
<a class="nav-link" href="devhub.html">DevHUB nedir?</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Kategoriler
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="yazilim.html">Temel Yazılım</a></li>
<li><a class="dropdown-item " href="html.html">HTML</a></li>
<li><a class="dropdown-item" href="css.html">CSS</a></li>
<li><a class="dropdown-item" href="js.html">JavaScript</a></li>
<li><a class="dropdown-item" href="react.html">React</a></li>
<li><a class="dropdown-item" href="python.html">Python</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">İletişim</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</header>
<main>
<div class="row">
<div class="col-4">
<nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end">
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">HTML Nedir?</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-1-1">HTML Temel Yapısı</a>
<a class="nav-link ms-3 my-1" href="#item-1-2">Metin ve Bağlantılar</a>
<a class="nav-link ms-3 my-1" href="#item-1-3">Görseller</a>
<a class="nav-link ms-3 my-1" href="#item-1-4">Listeler</a>
<a class="nav-link ms-3 my-1" href="#item-1-5">Formlar</a>
<a class="nav-link ms-3 my-1" href="#item-1-6">1-6</a>
<a class="nav-link ms-3 my-1" href="#item-1-7">1-7</a>
</nav>
<a class="nav-link" href="#item-2">Item 2</a>
<a class="nav-link" href="#item-3">Item 3</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
<a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
</nav>
</nav>
</nav>
</div>
<div class="col-8">
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true"
class="scrollspy-example-2" tabindex="0">
<div id="item-1">
<h4>HTML Nedir?</h4>
<p>HTML, "Hypertext Markup Language" kısaltmasıdır ve web sayfalarını oluşturmak için kullanılan
bir işaretleme dilidir. HTML, metin, bağlantılar, görseller, ses, video ve diğer içerikleri
tarayıcıda görüntülemek için kullanılır. Web tarayıcıları, HTML belgelerini okuyarak
sayfaları düzenler ve kullanıcılara görsel içerik sunar.
HTML, bir dizi etiket kullanılarak yapılandırılmış bir belgeyi tanımlar. Her etiket, belirli
bir görevi yerine getirir ve bir öğeyi veya öğe grubunu belirtir. Örneğin, metin paragrafını
tanımlamak için
"< p >" etiketi kullanılır, bağlantı eklemek için "< a >" etiketi kullanılır.
HTML, genellikle CSS (Cascading Style Sheets) ve JavaScript gibi diğer teknolojilerle
birlikte kullanılır. CSS, sayfanın görünümünü düzenlemek için kullanılırken, JavaScript
sayfanın dinamik özelliklerini kontrol etmek için kullanılır. Bu üç teknoloji bir araya
gelerek modern web geliştirmenin temelini oluşturur.</p>
</div>
<div id="item-1-1">
<h5>HTML Temel Yapısı:</h5>
<p>HTML belgeleri, "< html >" etiketi ile başlar ve "< /html >" etiketi ile son bulur.
Sayfanın başlığını "< head >" etiketi içinde tanımlanan "< title >" etiketi ile belirlersiniz. Tarayıcı sekmesinde görünen metni içerir.
Sayfanın görsel içeriği "< body >" etiketi içine yerleştirilir.</p>
</div>
<div id="item-1-2">
<h5>Metin ve Bağlantılar:</h5>
<p>Metin içeriği için genellikle "< p >" (paragraf), "< h1 > - < h6 >" (başlık), "< span >" (genel metin) gibi etiketler kullanılır.
Bağlantılar "< a >" etiketi ile oluşturulur.</p>
</div>
<div id="item-1-3">
<h5>Görseller:</h5>
<p>Görseller "< img >" etiketi kullanılarak eklenir. src özelliği ile görselin dosya yolu belirtilir.</p>
</div>
<div id="item-1-4">
<h5>Listeler:</h5>
<p>Sırasız listeler "< ul >" ve "< li >" etiketleri ile, sıralı listeler ise "< ol >" ve "< li >" etiketleri ile oluşturulur.</p>
</div>
<div id="item-1-5">
<h5>Formlar:</h5>
<p>Kullanıcı girişi ve veri iletimi için formlar kullanılır. "< form >", "< input >", "< select >", "< textarea >" gibi etiketlerle form elemanları oluşturulur.</p>
</div>
<div id="item-1-6">
<h5>...</h5>
<p>HTML, web geliştirmenin temelini oluşturan bir yapıdır ve genellikle CSS ve JavaScript ile birlikte kullanılır. CSS, sayfanın stilini belirlerken, JavaScript sayfa üzerindeki etkileşimleri kontrol etmek ve dinamik içerik eklemek için kullanılır. Birlikte kullanıldıklarında, bu üç teknoloji zengin ve etkileşimli web sayfalarının oluşturulmasına olanak tanır.</p>
</div>
<div id="item-1-7">
<h5>...</h5>
<p>...</p>
</div>
<div id="item-2">
<h4>Item 2</h4>
<p>...</p>
</div>
<div id="item-3">
<h4>Item 3</h4>
<p>...</p>
</div>
<div id="item-3-1">
<h5>Item 3-1</h5>
<p>...</p>
</div>
<div id="item-3-2">
<h5>Item 3-2</h5>
<p>...</p>
</div>
</div>
</div>
</div>
</main>
<footer>
<div class="category-links">
<h2>Kategoriler</h2>
<ul>
<li><a href="yazilim.html">Temel Yazılım</a></li>
<li><a href="html.html">HTML</a></li>
<li><a href="css.html">CSS</a></li>
<li><a href="js.html">JS</a></li>
<li><a href="react.html">React</a></li>
<li><a href="python.html">Python</a></li>
</ul>
<div class="copyright">
<p> <strong>DevHUB.com @ copyright-All Rights Reserved | Anil ONGAN 2023 </strong> </p>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
</body>
</html>