Skip to content

Commit 531a454

Browse files
elifkuselifkus
committed
Fixed code blocks
1 parent 3dc1a97 commit 531a454

File tree

19 files changed

+1547
-1362
lines changed

19 files changed

+1547
-1362
lines changed

‎tr/css/README.md‎

Lines changed: 142 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,10 @@ Twitter yazılımcıları tarafından geliştirilmeye başlanmış ve şu anda d
1818

1919
Bootstrap kurmak için `.html` dosyanızda `<head>` kısmına şunları eklemeniz gerekli (`blog/templates/blog/post_list.html`):
2020

21-
html
21+
‘’’html
2222
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
2323
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
24+
‘’’
2425

2526

2627
Bu, projemize hiçbir yeni dosya eklemez. Yalnızca internet üzerinde var olan dosyalara işaret eder. Şimdi websitenizi açın ve sayfayı yenileyin. İşte oldu!
@@ -41,25 +42,27 @@ Sunucuda `collectstatic` komutunu çalıştırdığımız zaman gördüğün gib
4142

4243
Bunu blog uygulamamızın içerisinde `static` isimli bir klasör oluşturarak yapacağız:
4344

44-
djangogirls
45-
├── blog
46-
│ ├── migrations
47-
│ └── static
48-
└── mysite
49-
45+
‘’’
46+
djangogirls
47+
├── blog
48+
│ ├── migrations
49+
│ └── static
50+
└── mysite
51+
‘’’
5052

5153
Django uygulama klasörlerinizin altındaki "static" isimli tüm klasörleri otomatik olarak bulacak ve içindekileri statik dosya olarak kullanabilecektir.
5254

5355
## İlk CSS dosyanız!
5456

5557
Şimdi web sayfamıza kendi stilimizi eklemek için bir CSS dosyası oluşturalım. `static` klasörü içinde `css` adlı yeni bir klasör oluşturalım. Şimdi de `css` klasörü içinde `blog.css` adlı yeni bir dosya oluşturalım. Hazır mısınız?
5658

57-
djangogirls
58-
└─── blog
59-
└─── static
60-
└─── css
61-
└─── blog.css
62-
59+
‘’’
60+
djangogirls
61+
└─── blog
62+
└─── static
63+
└─── css
64+
└─── blog.css
65+
‘’’
6366

6467
Şimdi CSS yazma zamanı! `blog/static/css/blog.css` dosyasını kod editöründe açın.
6568

@@ -73,64 +76,64 @@ Ancak az da olsa yapalım. Acaba başlığımızın rengini mi değiştirsek? Bi
7376

7477
`blog/static/css/blog.css` dosyanıza şu kodu eklemelisiniz:
7578

76-
css
77-
h1 a {
78-
color: #FCA205;
79-
}
80-
79+
‘’’css
80+
h1 a {
81+
color: #FCA205;
82+
}
83+
‘’’
8184

8285
`h1 a` bir CSS Seçicisidir (Selector). Bu demek oluyor ki biz stilimizi, bir `h1` öğesi içerisinde olan tüm `a` öğelerine (örneğin kodumuzun içerisinde `<h1><a href="">link</a></h1>` gibi bir şey olduğunda) uyguluyoruz. Bu durumda, rengi `#FCA205` yani turuncu yapmasını söylüyoruz. Elbette, buraya kendi arzu ettiğin rengi koyabilirsin!
8386

8487
Bir CSS dosyasında, HTML dosyasındaki öğeler için stil belirleriz. Öğeler, öğenin ismi (örn. `a`, `h1`, `body`), `sınıf` özniteliği (attribute) ya da `id` özniteliği ile tanımlanırlar. Sınıf ve id (kimlik), bir elemente senin tarafından verilen isimlerdir. Sınıflar bir öğe grubunu tanımlar, id'ler ise belirli bir öğeye işaret ederler. Örneğin şu aşağıdaki etiket CSS tarafından, `a` etiket adı, `external_link` sınıfı ya da `link_to_wiki_page` id'si kullanılarak tanımlanabilir:
8588

86-
html
87-
<a href="proxy.php?url=http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FDjango" class="external_link" id="link_to_wiki_page">
88-
89+
‘’’html
90+
<a href="http://en.wikipedia.org/wiki/Django" class="external_link" id="link_to_wiki_page">
91+
‘’’
8992

9093
Daha fazla bilgi için [w3schools'da CSS seçicileri][4]ni okuyabilirsin.
9194

9295
[4]: http://www.w3schools.com/cssref/css_selectors.asp
9396

9497
Sonrasında, ayrıca HTML şablonumuza (template) bir takım CSS eklemeleri yaptığımızı bildirmemiz gerekiyor. `blog/templates/blog/post_list.html` dosyasını açın ve en başına şu satırı ekleyin:
9598

96-
html
97-
{% load staticfiles %}
98-
99+
‘’’html
100+
{% load staticfiles %}
101+
‘’’
99102

100103
Burada yaptığımız yalnızca statik dosyaları yüklemek. :) Sonrasında, `<head>` ve `</head>`, tagları arasına, Bootstrap CSS dosyalarına yönelik bağlantılardan sonra (web tarayıcımız dosyaları yazıldıkları sırasıyla okuduğundan, bizim dosyamızdaki kodlar Bootstrap dosyasının içerisindekileri geçersiz kılabilir), şu satırı ekleyin:
101104

102-
html
103-
<link rel="stylesheet" href="proxy.php?url=https%3A%2F%2Fgithub.com.%2F%7B%25+static+%27css%2Fblog.css%27+%25%7D">
104-
105+
‘’’html
106+
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
107+
‘’’
105108

106109
Az evvel şablonumuza (template) CSS dosyamızın nerede olduğunu söylemiş olduk.
107110

108111
Dosyanız şu şekilde gözüküyor olmalı:
109112

110-
html
111-
{% load staticfiles %}
112-
<html>
113-
<head>
114-
<title>Django Girls blog</title>
115-
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
116-
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
117-
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
118-
</head>
119-
<body>
113+
‘’’html
114+
{% load staticfiles %}
115+
<html>
116+
<head>
117+
<title>Django Girls blog</title>
118+
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
119+
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
120+
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
121+
</head>
122+
<body>
123+
<div>
124+
<h1><a href="/">Django Girls Blog</a></h1>
125+
</div>
126+
127+
{% for post in posts %}
120128
<div>
121-
<h1><a href="/">Django Girls Blog</a></h1>
129+
<p>yayınlanma tarihi: {{ post.yayinlanma_tarihi }}</p>
130+
<h1><a href="">{{ post.baslik }}</a></h1>
131+
<p>{{ post.yazi|linebreaks }}</p>
122132
</div>
123-
124-
{% for post in posts %}
125-
<div>
126-
<p>yayınlanma tarihi: {{ post.yayinlanma_tarihi }}</p>
127-
<h1><a href="">{{ post.baslik }}</a></h1>
128-
<p>{{ post.yazi|linebreaks }}</p>
129-
</div>
130-
{% endfor %}
131-
</body>
132-
</html>
133-
133+
{% endfor %}
134+
</body>
135+
</html>
136+
‘’’
134137

135138
Tamamdır, dosyayı kaydedip sayfayı yenileyebilirsiniz.
136139

@@ -140,10 +143,11 @@ Tamamdır, dosyayı kaydedip sayfayı yenileyebilirsiniz.
140143

141144
Güzel! Şimdi de sitemizi biraz rahatlatıp sol kenar boşluğunu (margin'i) arttırsak mı? Hadi deneyelim!
142145

143-
css
144-
body {
145-
padding-left: 15px;
146-
}
146+
‘’’css
147+
body {
148+
padding-left: 15px;
149+
}
150+
‘’’
147151

148152

149153
Bunu CSS dosyanıza ekleyin, dosyayı kaydedin ve nasıl çalıştığını görelim!
@@ -154,20 +158,20 @@ Bunu CSS dosyanıza ekleyin, dosyayı kaydedin ve nasıl çalıştığını gör
154158

155159
Belki de başlığımızın yazı tipini özelleştirebiliriz? Aşağıdaki satırı `blog/templates/blog/post_list.html` dosyasının içinde `<head>` bölümüne yapıştırın:
156160

157-
html
158-
<link href="proxy.php?url=http%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DLobster%26amp%3Bsubset%3Dlatin%2Clatin-ext" rel="stylesheet" type="text/css">
159-
161+
‘’’html
162+
<link href="http://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
163+
‘’’
160164

161165
Bu satır *Lobster* adlı bir fontu Google Fonts (https://www.google.com/fonts) sitesinden sayfamıza aktarır.
162166

163167
Şimdi `blog/static/css/blog.css` dosyamızdaki `h1 a` deklarasyon bloğunun içine (`{` ve `}` kodları arasına) `font-family: 'Lobster';` satırını ekleyip sayfayı yenileyin:
164168

165-
css
166-
h1 a {
167-
color: #FCA205;
168-
font-family: 'Lobster';
169-
}
170-
169+
‘’’css
170+
h1 a {
171+
color: #FCA205;
172+
font-family: 'Lobster';
173+
}
174+
‘’’
171175

172176
![Şekil 14.3][7]
173177

@@ -179,105 +183,107 @@ Yukarıda bahsettiğimiz üzere, CSS'te class (sınıf) diye bir kavram var. Cla
179183

180184
Devam edelim ve HTML kodumuzun bir kısmına isim verelim. Başlığı içeren `div`'e `page-header` isimli bir class ekleyelim:
181185

182-
html
183-
<div class="page-header">
184-
<h1><a href="proxy.php?url=https%3A%2F%2Fgithub.com.%2F">Django Girls Blog</a></h1>
185-
</div>
186-
186+
‘’’html
187+
<div class="page-header">
188+
<h1><a href="proxy.php?url=https%3A%2F%2Fgithub.com.%2F">Django Girls Blog</a></h1>
189+
</div>
190+
‘’’
187191

188192
Şimdi de gönderi metnini içeren `div`'e `post` isimli bir sınıf ekleyelim.
189193

190-
html
191-
<div class="post">
192-
<p>yayınlanma tarihi: {{ post.yayinlanma_tarihi }}</p>
193-
<h1><a href="">{{ post.baslik }}</a></h1>
194-
<p>{{ post.yazi|linebreaks }}</p>
195-
</div>
196-
194+
‘’’html
195+
<div class="post">
196+
<p>yayınlanma tarihi: {{ post.yayinlanma_tarihi }}</p>
197+
<h1><a href="">{{ post.baslik }}</a></h1>
198+
<p>{{ post.yazi|linebreaks }}</p>
199+
</div>
200+
‘’’
197201

198202
Şimdi farklı seçicilere (selectors) bildirim (deklarasyon) blokları ekleyeceğiz. `.` ile başlayan seçiciler sınıflara işaret eder. Web'de, aşağıdaki kodu anlamanıza yardımcı olacak pek çok güzel CSS öğreticisi ve açıklama mevcut. Şimdilik sadece bu kodu kopyalayıp `blog/static/css/blog.css` dosyamıza yapıştıralım:
199203

200-
css
201-
.page-header {
202-
background-color: #ff9400;
203-
margin-top: 0;
204-
padding: 20px 20px 20px 40px;
205-
}
204+
‘’’css
205+
.page-header {
206+
background-color: #ff9400;
207+
margin-top: 0;
208+
padding: 20px 20px 20px 40px;
209+
}
210+
206211

207-
.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
208-
color: #ffffff;
209-
font-size: 36pt;
210-
text-decoration: none;
211-
}
212+
.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
213+
color: #ffffff;
214+
font-size: 36pt;
215+
text-decoration: none;
216+
}
212217

213-
.content {
214-
margin-left: 40px;
215-
}
218+
.content {
219+
margin-left: 40px;
220+
}
216221

217-
h1, h2, h3, h4 {
218-
font-family: 'Lobster', cursive;
219-
}
222+
h1, h2, h3, h4 {
223+
font-family: 'Lobster', cursive;
224+
}
220225

221-
.date {
222-
float: right;
223-
color: #828282;
224-
}
226+
.date {
227+
float: right;
228+
color: #828282;
229+
}
225230

226-
.save {
227-
float: right;
228-
}
231+
.save {
232+
float: right;
233+
}
229234

230-
.post-form textarea, .post-form input {
231-
width: 100%;
232-
}
235+
.post-form textarea, .post-form input {
236+
width: 100%;
237+
}
233238

234-
.top-menu, .top-menu:hover, .top-menu:visited {
235-
color: #ffffff;
236-
float: right;
237-
font-size: 26pt;
238-
margin-right: 20px;
239-
}
239+
.top-menu, .top-menu:hover, .top-menu:visited {
240+
color: #ffffff;
241+
float: right;
242+
font-size: 26pt;
243+
margin-right: 20px;
244+
}
240245

241-
.post {
242-
margin-bottom: 70px;
243-
}
246+
.post {
247+
margin-bottom: 70px;
248+
}
244249

245-
.post h1 a, .post h1 a:visited {
246-
color: #000000;
247-
}
250+
.post h1 a, .post h1 a:visited {
251+
color: #000000;
252+
}
253+
‘’’
248254

249255

250256
Sonrasında blog postlarımızı gösteren HTML kodunun etrafını class deklarasyonları ile saralım. Aşağıdaki kodları değiştirin:
251257

252-
html
253-
{% for post in posts %}
254-
<div class="post">
255-
<p>yayınlanma tarihi: {{ post.yayinlanma_tarihi }}</p>
256-
<h1><a href="">{{ post.baslik }}</a></h1>
257-
<p>{{ post.yazi|linebreaks }}</p>
258-
</div>
259-
{% endfor %}
260-
258+
‘’’html
259+
{% for post in posts %}
260+
<div class="post">
261+
<p>yayınlanma tarihi: {{ post.yayinlanma_tarihi }}</p>
262+
<h1><a href="">{{ post.baslik }}</a></h1>
263+
<p>{{ post.yazi|linebreaks }}</p>
264+
</div>
265+
{% endfor %}
266+
‘’’
261267

262268
bununla değiştirelim:
263269

264-
html
265-
<div class="content container">
266-
<div class="row">
267-
<div class="col-md-8">
268-
{% for post in posts %}
269-
<div class="post">
270-
<div class="date">
271-
{{ post.yayinlanma_tarihi }}
272-
</div>
273-
<h1><a href="">{{ post.baslik }}</a></h1>
274-
<p>{{ post.yazi|linebreaks }}</p>
270+
‘’’html
271+
<div class="content container">
272+
<div class="row">
273+
<div class="col-md-8">
274+
{% for post in posts %}
275+
<div class="post">
276+
<div class="date">
277+
{{ post.yayinlanma_tarihi }}
275278
</div>
276-
{% endfor %}
277-
</div>
279+
<h1><a href="">{{ post.baslik }}</a></h1>
280+
<p>{{ post.yazi|linebreaks }}</p>
281+
</div>
282+
{% endfor %}
278283
</div>
279284
</div>
280-
285+
</div>
286+
‘’’
281287

282288
Bu dosyaları kaydedin ve web sayfanızı yenileyin.
283289

0 commit comments

Comments
 (0)