You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
> Ez az anyag Creative Commons Attribution-ShareAlike 4.0 International License jogvédelme alatt áll. A licenc megtekintéséhez látogass el ide: http://creativecommons.org/licenses/by-sa/4.0/
8
6
7
+
## Fordítás
8
+
A tutorial magyar fordítását egy csapat lelkes önkéntes készítette el: Czapári Dóri, Hanna Kollo, Erő Julcsi, Bónis Balázs, Kádár Szilvi, Szelle Erika, Téglássy Anna, Szabó Adrienn, Nádudvari György. Köszönjük nekik! <3
9
+
9
10
## Bevezetés
10
11
11
12
Érezted már úgy hogy a világ egyre inkább a technológiáról szól, és te valahogy kimaradsz belőle? Gondolkoztál már azon, hogyan kell egy weblapot létrehozni, de soha nem volt elég erőd elkezdeni? Érezted úgy, hogy a szoftveres világ túl bonyolult ahhoz, hogy egyáltalán megpróbálj valamit létrehozni benne magadtól?
@@ -26,7 +27,7 @@ Körülbelül így fog kinézni:
26
27
27
28
[2]: images/application.png
28
29
29
-
> Ha egyedül dolgozol a tutorialon és nincs melletted coach, aki segíthetne, ha bármi probléma felmerül, használd a chatet, amit neked tartunk fenn: [!\[Gitter\](https://badges.gitter.im/Join Chat.svg)][1]. Megkértük a segítőinket és korábbi résztvevőket, hogy legyenek fent, ahogy idejük engedi, és segítsenek másoknak a tutorialban. Kérdezz tőlük bátran!
30
+
> Ha egyedül dolgozol a tutorialon és nincs melletted coach, aki segíthetne, ha bármi probléma felmerül, használd a chatet, amit neked tartunk fenn: [](https://gitter.im/DjangoGirls/tutorial?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge). Megkértük a segítőinket és korábbi résztvevőket, hogy legyenek fent, ahogy idejük engedi, és segítsenek másoknak a tutorialban. Kérdezz tőlük bátran!
Ezzel nem adsz hozzá új fájlokat a projektedhez, csak az Interneten létező fájlokra hivatkozol. Nyisd meg újra a weboldaladat, és frissítsd! Itt is van!
27
27
@@ -73,41 +73,41 @@ De azért egy pár dolgot megmutatunk. Például megváltoztathatnánk a header
73
73
74
74
A `blog/static/css/blog.css` fájlba írd bele a következő kódot:
75
75
76
-
css
76
+
```css
77
77
h1a {
78
78
color: #FCA205;
79
79
}
80
-
80
+
```
81
81
82
82
A `h1 a` egy CSS szelektor. Ez azt jelenti, hogy alkalmazzuk a stílusunkat minden olyan `a` elemre, ami egy `h1` elemen belül van (például, mikor valami ilyesmi van a kódban: `<h1><a href="">link</a></h1>`). Ebben az esetben azt mondjuk, hogy változtasd meg a kiválasztott elem színét `#FCA205`-re, ami narancssárgát jelent. Természetesen nyugodtan használd a saját színedet itt!
83
83
84
84
A CSS fájlban mondjuk meg, hogy nézzenek ki a HTML fájl elemei. Az egyes elemek beazonosíthatók az elemek nevei alapján (pl. `a`, `h1`, `body`), és a `class` vagy az `id` attribútumaik alapján. A class és az id olyan nevek, amelyeket te adhatsz meg az elemeknek. A class attribútum elemek egy csoportjára vonatkozik, míg az id-val kifejezetetten egy elemet tudunk beazonosítani. A következő tag például beazonosítható akár az "`a`" tag névvel, az `external_link` class-szal vagy a `link_to_wiki_page` id-val:
Mindezek után közölnünk kell a HTML fájlunkkal is, hogy hozzáadtunk pár CSS-t. Nyisd meg a `blog/templates/blog/post_list.html` fájlt és add a következő sort a fájl legelejére:
95
95
96
-
html
96
+
```html
97
97
{% load staticfiles %}
98
-
98
+
```
99
99
100
100
Itt csak betöltünk pár statikus fájlt :). Ezután a `<head>` és a `</head>` tagek közé, a Bootstrap CSS fájlok linkjei után (a böngésző olyan sorrendben olvassa az egyes fájlokat, amilyenben követik egymást, tehát a mi fájlunkban lévő kód lehet, hogy felülír pár kódot a Bootstrap fájlban), a következő sort add:
Most megmondtuk a template-ünknek, hol találja a CSS fájlokat.
107
107
108
108
Így kellene kinéznie a fájlodnak:
109
109
110
-
html
110
+
```html
111
111
{% load staticfiles %}
112
112
<html>
113
113
<head>
@@ -130,6 +130,7 @@ Most megmondtuk a template-ünknek, hol találja a CSS fájlokat.
130
130
{% endfor %}
131
131
</body>
132
132
</html>
133
+
```
133
134
134
135
135
136
Oké, mentsd el a fájlt és frissítsd be az oldalt!
@@ -140,11 +141,11 @@ Oké, mentsd el a fájlt és frissítsd be az oldalt!
140
141
141
142
Szép munka! Lehet, hogy jó lenne adni egy kis "teret" a weboldalunknak és növelni a bal oldali margót. Próbáljuk meg!
142
143
143
-
css
144
+
```css
144
145
body {
145
146
padding-left: 15px;
146
147
}
147
-
148
+
```
148
149
149
150
Írd hozzá a CSS fájlodhoz, mentsd el és lássuk, működik-e!
150
151
@@ -154,20 +155,20 @@ Szép munka! Lehet, hogy jó lenne adni egy kis "teret" a weboldalunknak és nö
154
155
155
156
Lehet, hogy testre szabhatnánk a betű stílusát a header-ünkben. A következő sort másold bele a `<head>`-be a `blog/templates/blog/post_list.html` fájlon belül:
Ez a sor beimportál egy *Lobster* nevű betűtípust a Google Fonts-ból (https://www.google.com/fonts).
162
163
163
164
Most add hozzá a `font-family: 'Lobster';` sort a `blog/static/css/blog.css` fájlodban, a `h1 a` stílusát meghatározó blokkhoz (ez a `{` kapcsos zárójel `}` közötti kód) és frissítsd az oldalt:
164
165
165
-
css
166
+
```css
166
167
h1a {
167
168
color: #FCA205;
168
169
font-family: 'Lobster';
169
170
}
170
-
171
+
```
171
172
172
173
![14.3 ábra][7]
173
174
@@ -179,25 +180,25 @@ Ahogy fentebb említettük, a CSS-ben van egy "class" nevű fogalom, ami alapvet
179
180
180
181
Menj végig és nevezd el egy részét a HTML kódodnak. Adj egy `page-header` nevű class-t a `div`-edhez, amelyik a header-t tartalmazza, akárcsak így:
181
182
182
-
html
183
+
```html
183
184
<divclass="page-header">
184
185
<h1><ahref="/">Django Girls Blog</a></h1>
185
186
</div>
186
-
187
+
```
187
188
188
189
És most adj egy `post` class-t a `div`-hez, ami a blog postokat tartalmazza.
189
190
190
-
html
191
+
```html
191
192
<divclass="post">
192
193
<p>published: {{ post.published_date }}</p>
193
194
<h1><ahref="">{{ post.title }}</a></h1>
194
195
<p>{{ post.text|linebreaks }}</p>
195
196
</div>
196
-
197
+
```
197
198
198
199
Most pedig adjunk stílusblokkokat a különböző szelektorokhoz. A `.` -tal kezdődő szelektorok classokra utalnak. Rengeteg szuper tutorial és magyarázat található a weben a CSS-ről, ami segít megérteni a következő kódot. Most csak másold ki és illeszd be a `blog/static/css/blog.css` fájlodba:
199
200
200
-
css
201
+
```css
201
202
.page-header {
202
203
background-color: #ff9400;
203
204
margin-top: 0;
@@ -245,23 +246,23 @@ Most pedig adjunk stílusblokkokat a különböző szelektorokhoz. A `.` -tal ke
245
246
.posth1a, .posth1a:visited {
246
247
color: #000000;
247
248
}
248
-
249
+
```
249
250
250
251
Ezután jelöld ki a HTML kódot, ami a post-okat jeleníti meg egy class="post" attribútummal. Cseréld le ezt:
251
252
252
-
html
253
+
```html
253
254
{% for post in posts %}
254
255
<divclass="post">
255
256
<p>published: {{ post.published_date }}</p>
256
257
<h1><ahref="">{{ post.title }}</a></h1>
257
258
<p>{{ post.text|linebreaks }}</p>
258
259
</div>
259
260
{% endfor %}
260
-
261
+
```
261
262
262
263
a `blog/templates/blog/post_list.html` fájlban ezzel:
263
264
264
-
html
265
+
```html
265
266
<divclass="content container">
266
267
<divclass="row">
267
268
<divclass="col-md-8">
@@ -277,7 +278,7 @@ a `blog/templates/blog/post_list.html` fájlban ezzel:
0 commit comments