Skip to content

Commit 69294e3

Browse files
kyznkyzn
committed
Fixed code blocks for markdown
1 parent 058af36 commit 69294e3

19 files changed

Lines changed: 1572 additions & 1391 deletions

File tree

‎tr/css/README.md‎

Lines changed: 149 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +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
22-
<link rel="stylesheet" href="proxy.php?url=https%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F3.2.0%2Fcss%2Fbootstrap.min.css">
23-
<link rel="stylesheet" href="proxy.php?url=https%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F3.2.0%2Fcss%2Fbootstrap-theme.min.css">
24-
21+
```html
22+
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
23+
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
24+
```
2525

2626
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!
2727

@@ -41,25 +41,27 @@ Sunucuda `collectstatic` komutunu çalıştırdığımız zaman gördüğün gib
4141

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

44-
djangogirls
45-
├── blog
46-
│ ├── migrations
47-
│ └── static
48-
└── mysite
49-
44+
```
45+
djangogirls
46+
├── blog
47+
│ ├── migrations
48+
│ └── static
49+
└── mysite
50+
```
5051

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

5354
## İlk CSS dosyanız!
5455

5556
Ş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?
5657

57-
djangogirls
58-
└─── blog
59-
└─── static
60-
└─── css
61-
└─── blog.css
62-
58+
```
59+
djangogirls
60+
└─── blog
61+
└─── static
62+
└─── css
63+
└─── blog.css
64+
```
6365

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

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

7476
`blog/static/css/blog.css` dosyanıza şu kodu eklemelisiniz:
7577

76-
css
77-
h1 a {
78-
color: #FCA205;
79-
}
80-
78+
```css
79+
h1 a {
80+
color: #FCA205;
81+
}
82+
```
8183

8284
`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!
8385

8486
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:
8587

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-
88+
```html
89+
<a href="http://en.wikipedia.org/wiki/Django" class="external_link" id="link_to_wiki_page">
90+
```
8991

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

@@ -99,38 +101,38 @@ Sonrasında, ayrıca HTML şablonumuza (template) bir takım CSS eklemeleri yapt
99101

100102
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:
101103

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

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

108110
Dosyanız şu şekilde gözüküyor olmalı:
109111

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>
112+
```html
113+
{% load staticfiles %}
114+
<html>
115+
<head>
116+
<title>Django Girls blog</title>
117+
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
118+
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
119+
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
120+
</head>
121+
<body>
122+
<div>
123+
<h1><a href="/">Django Girls Blog</a></h1>
124+
</div>
125+
126+
{% for post in posts %}
120127
<div>
121-
<h1><a href="/">Django Girls Blog</a></h1>
128+
<p>yayınlanma tarihi: {{ post.published_date }}</p>
129+
<h1><a href="">{{ post.title }}</a></h1>
130+
<p>{{ post.text|linebreaks }}</p>
122131
</div>
123-
124-
{% for post in posts %}
125-
<div>
126-
<p>yayınlanma tarihi: {{ post.published_date }}</p>
127-
<h1><a href="">{{ post.title }}</a></h1>
128-
<p>{{ post.text|linebreaks }}</p>
129-
</div>
130-
{% endfor %}
131-
</body>
132-
</html>
133-
132+
{% endfor %}
133+
</body>
134+
</html>
135+
```
134136

135137
Tamamdır, dosyayı kaydedip sayfayı yenileyebilirsiniz.
136138

@@ -140,11 +142,11 @@ Tamamdır, dosyayı kaydedip sayfayı yenileyebilirsiniz.
140142

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

143-
css
144-
body {
145-
padding-left: 15px;
146-
}
147-
145+
```css
146+
body {
147+
padding-left: 15px;
148+
}
149+
```
148150

149151
Bunu CSS dosyanıza ekleyin, dosyayı kaydedin ve nasıl çalıştığını görelim!
150152

@@ -154,20 +156,20 @@ Bunu CSS dosyanıza ekleyin, dosyayı kaydedin ve nasıl çalıştığını gör
154156

155157
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:
156158

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-
159+
```html
160+
<link href="http://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
161+
```
160162

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

163165
Ş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:
164166

165-
css
166-
h1 a {
167-
color: #FCA205;
168-
font-family: 'Lobster';
169-
}
170-
167+
```css
168+
h1 a {
169+
color: #FCA205;
170+
font-family: 'Lobster';
171+
}
172+
```
171173

172174
![Şekil 14.3][7]
173175

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

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

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-
184+
```html
185+
<div class="page-header">
186+
<h1><a href="/">Django Girls Blog</a></h1>
187+
</div>
188+
```
187189

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

190-
html
191-
<div class="post">
192-
<p>yayınlanma tarihi: {{ post.published_date }}</p>
193-
<h1><a href="">{{ post.title }}</a></h1>
194-
<p>{{ post.text|linebreaks }}</p>
195-
</div>
196-
192+
```html
193+
<div class="post">
194+
<p>yayınlanma tarihi: {{ post.published_date }}</p>
195+
<h1><a href="">{{ post.title }}</a></h1>
196+
<p>{{ post.text|linebreaks }}</p>
197+
</div>
198+
```
197199

198200
Ş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:
199201

200-
css
201-
.page-header {
202-
background-color: #ff9400;
203-
margin-top: 0;
204-
padding: 20px 20px 20px 40px;
205-
}
206-
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-
213-
.content {
214-
margin-left: 40px;
215-
}
216-
217-
h1, h2, h3, h4 {
218-
font-family: 'Lobster', cursive;
219-
}
220-
221-
.date {
222-
float: right;
223-
color: #828282;
224-
}
225-
226-
.save {
227-
float: right;
228-
}
229-
230-
.post-form textarea, .post-form input {
231-
width: 100%;
232-
}
233-
234-
.top-menu, .top-menu:hover, .top-menu:visited {
235-
color: #ffffff;
236-
float: right;
237-
font-size: 26pt;
238-
margin-right: 20px;
239-
}
240-
241-
.post {
242-
margin-bottom: 70px;
243-
}
244-
245-
.post h1 a, .post h1 a:visited {
246-
color: #000000;
247-
}
248-
202+
```css
203+
.page-header {
204+
background-color: #ff9400;
205+
margin-top: 0;
206+
padding: 20px 20px 20px 40px;
207+
}
208+
209+
.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
210+
color: #ffffff;
211+
font-size: 36pt;
212+
text-decoration: none;
213+
}
214+
215+
.content {
216+
margin-left: 40px;
217+
}
218+
219+
h1, h2, h3, h4 {
220+
font-family: 'Lobster', cursive;
221+
}
222+
223+
.date {
224+
float: right;
225+
color: #828282;
226+
}
227+
228+
.save {
229+
float: right;
230+
}
231+
232+
.post-form textarea, .post-form input {
233+
width: 100%;
234+
}
235+
236+
.top-menu, .top-menu:hover, .top-menu:visited {
237+
color: #ffffff;
238+
float: right;
239+
font-size: 26pt;
240+
margin-right: 20px;
241+
}
242+
243+
.post {
244+
margin-bottom: 70px;
245+
}
246+
247+
.post h1 a, .post h1 a:visited {
248+
color: #000000;
249+
}
250+
```
249251

250252
Sonra da blog gönderilerimizi gösteren HTML kodunu sınıf bildirimleriyle saralım. <0>blog/templates/blog/post_list. html</0> dosyasındaki şu kodu atıp:
251253

252-
html
253-
{% for post in posts %}
254-
<div class="post">
255-
<p>yayınlanma tarihi: {{ post.published_date }}</p>
256-
<h1><a href="">{{ post.title }}</a></h1>
257-
<p>{{ post.text|linebreaks }}</p>
258-
</div>
259-
{% endfor %}
260-
254+
```html
255+
{% for post in posts %}
256+
<div class="post">
257+
<p>yayınlanma tarihi: {{ post.published_date }}</p>
258+
<h1><a href="">{{ post.title }}</a></h1>
259+
<p>{{ post.text|linebreaks }}</p>
260+
</div>
261+
{% endfor %}
262+
```
261263

262264
bununla değiştirelim:
263265

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.published_date }}
272-
</div>
273-
<h1><a href="">{{ post.title }}</a></h1>
274-
<p>{{ post.text|linebreaks }}</p>
266+
```html
267+
<div class="content container">
268+
<div class="row">
269+
<div class="col-md-8">
270+
{% for post in posts %}
271+
<div class="post">
272+
<div class="date">
273+
{{ post.published_date }}
275274
</div>
276-
{% endfor %}
277-
</div>
275+
<h1><a href="">{{ post.title }}</a></h1>
276+
<p>{{ post.text|linebreaks }}</p>
277+
</div>
278+
{% endfor %}
278279
</div>
279280
</div>
280-
281+
</div>
282+
```
281283

282284
Bu dosyaları kaydedin ve web sayfanızı yenileyin.
283285

0 commit comments

Comments
 (0)