-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
345 lines (321 loc) · 24.8 KB
/
index.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
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
<!DOCTYPE html>
<html lang="hu">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2P7D1TPGND"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-2P7D1TPGND');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="reset.css">
<title>HTML összefoglaló</title>
</head>
<body class="background">
<header>
<div class="margin-left header-content margin-right" role="navigation">
<a tabindex="1" rel="footer" id="beginning" href="#end" class="link-header">Ugrás a végére</a>
<div class="input-group mb-3 search-input-container" role="search">
<input tabindex="2" id="search_input" type="text" class="form-control search-input" placeholder="Keresés"
aria-label="Keresés">
<div class="input-group-append">
<span class="input-group-text search-btn-margin-padding">
<button tabindex="3" class="btn btn-outline-secondary" type="button" onclick="searchAndHighlight()">
<i class="fas fa-search"></i>
</button>
</span>
</div>
</div>
<button tabindex="4" id="theme-toggle" class="btn btn-primary">Megjelenítési téma váltás</button>
</div>
</header>
<div id="content_container" role="main">
<article>
<h1 class="title_1">HTML összefoglaló</h1>
<p class="margin-left paragraph" id="estimated_reading_time_container"></p>
<p class="margin-left paragraph" id="p01">
A HTML (HyperText Markup Language) a weboldalak alapvető építőeleme. Ez a nyelv határozza meg a weboldalak
szerkezetét és tartalmát, lehetővé téve a böngészők számára, hogy megjelenítsék azokat. A HTML segítségével
meghatározhatjuk a szövegek, képek, linkek és egyéb elemek elrendezését a weboldalon. Az első HTML verziók
óta a
nyelv jelentős fejlődésen ment keresztül, és ma már számos új funkcióval rendelkezik. A HTML dokumentumok
hierarchikus szerkezetűek, ami azt jelenti, hogy egyes elemek más elemekbe ágyazhatók, ezzel lehetővé téve a
komplex
elrendezések kialakítását. A HTML használatával könnyedén hozhatunk létre táblázatokat, listákat, formokat,
és egyéb
interaktív elemeket, amelyek gazdagítják a felhasználói élményt. Továbbá a HTML kompatibilis más webes
technológiákkal, mint például a CSS és a JavaScript, amelyekkel együttesen dinamikus és stílusos
weboldalakat
készíthetünk. Ahogy a webfejlesztés tovább fejlődik, a HTML is folyamatosan új elemekkel és funkciókkal
bővül, hogy
megfeleljen az egyre növekvő igényeknek és elvárásoknak. A HTML alapvetően egy egyszerű nyelv, amelyet
könnyű
megtanulni, de mélyreható ismeretekkel rendkívül hatékony eszközzé válhat a webfejlesztők kezében. A jól
strukturált
HTML kód alapvető fontosságú a keresőoptimalizálás (SEO) szempontjából is, mivel a keresőmotorok a HTML
szerkezetét
és tartalmát elemzik a találati rangsorok meghatározásához. A HTML5 szabvány bevezetése óta számos új
funkció és
elem vált elérhetővé, amelyek lehetővé teszik a modernebb és interaktívabb weboldalak készítését. A HTML
tehát a
webfejlesztés egyik legfontosabb alapköve, amely nélkülözhetetlen a sikeres online jelenléthez.
<a tabindex="5" rel="next" href="#p02" target="_blank" class="par-anchor link">Következő bekezdés megnyitása új lapon</a>
<a tabindex="6" rel="external" href="https://developer.mozilla.org/en-US/docs/Learn/HTML" target="_blank"
class="par-anchor link">Bővebben</a>
</p>
<p class="margin-left paragraph" id="p02">
A HTML dokumentumok alapvető szerkezete néhány kulcsfontosságú elemet tartalmaz: a <code><!DOCTYPE html></code>
deklarációt, a <code><html></code> elemet, amely az egész dokumentumot körülveszi, a <code><head></code>
részt, ahol metaadatokat helyezünk el, és a <code><body></code> részt, ahol a tényleges tartalom
található.
Ezek az elemek biztosítják, hogy a böngészők helyesen értelmezzék és jelenítsék meg az oldalunkat. A <code><head></code>
rész további elemeket tartalmazhat, mint például a <code><title></code>, amely meghatározza az oldal
címét,
valamint a <code><meta></code> elemeket, amelyek különféle metaadatokat definiálnak, például a
karakterkódolást és a viewport beállításokat. A <code><body></code> részben található az összes
tartalom,
amelyet a felhasználó látni fog, beleértve a szövegeket, képeket, linkeket, táblázatokat, és egyéb
médiaelemeket.
Fontos megérteni, hogy a HTML dokumentum hierarchikus szerkezetű, ahol az elemek egymásba ágyazhatók,
lehetővé téve
a bonyolultabb struktúrák létrehozását. Az alapvető HTML szerkezet ismerete elengedhetetlen a hatékony
webfejlesztéshez, mivel ez adja az oldal gerincét, amelyre a további stílusokat és funkciókat építhetjük. A
<code><html></code>
és a <code><body></code> elemek köré épül az oldal minden tartalma és funkciója, biztosítva, hogy a
böngészők
helyesen értelmezzék és jelenítsék meg az oldalt. A HTML szerkezetének helyes kialakítása nem csak a
böngészők
számára fontos, hanem a keresőmotorok számára is, amelyek a HTML struktúráját használják az oldal
tartalmának
értelmezéséhez. A jól megtervezett HTML szerkezet javítja az oldal hozzáférhetőségét is, különösen a
fogyatékkal élő
felhasználók számára, akik különféle segédeszközöket használnak a weboldalak böngészéséhez. Az alapvető HTML
szerkezet megértése és alkalmazása tehát kulcsfontosságú a sikeres webfejlesztéshez, és alapot nyújt a
további
technológiák, mint például a CSS és a JavaScript használatához.
<a tabindex="7" rel="next" href="#p03" target="_blank" class="par-anchor link">Következő bekezdés megnyitása új lapon</a>
<a tabindex="8" rel="external" href="https://developer.mozilla.org/en-US/docs/Learn/HTML" target="_blank"
class="par-anchor link">Bővebben</a>
</p>
<p class="margin-left paragraph" role="img">
<img src="img/dom-tree.png" alt="HTML Tag-ek fa struktúrában kirajzolva" loading="lazy">
</p>
<p class="margin-left paragraph" id="p03">
A HTML elemek hierarchikus szerkezetet alkotnak, ami azt jelenti, hogy egyes elemek más elemekbe ágyazhatók.
Például
egy <code><div></code> elem tartalmazhat <code><p></code> (bekezdés) elemeket,
<code><ul></code>
(rendezett listák) elemeket, vagy akár más <code><div></code> elemeket is. Ez a hierarchia lehetővé
teszi a
bonyolultabb weboldalak létrehozását és a tartalom logikai elrendezését. Az elemek közötti hierarchikus
kapcsolat
nemcsak a vizuális megjelenítés szempontjából fontos, hanem a keresőmotorok és az akadálymentesítési
eszközök
számára is, mivel ezek az eszközök a HTML struktúrájára támaszkodnak az oldal tartalmának értelmezéséhez. Az
elemek
helyes használata és elrendezése javítja a weboldal használhatóságát és hozzáférhetőségét. A HTML elemek
különféle
típusokba sorolhatók, mint például a szöveges elemek, listaelemek, formok és médiaelemek. Ezek az elemek
együttműködve biztosítják, hogy a weboldal minden aspektusa jól szervezett és könnyen kezelhető legyen. A
hierarchikus struktúra alkalmazása segít abban, hogy az oldal tartalma logikusan és érthetően legyen
felépítve, ami
különösen fontos a nagyobb, összetettebb weboldalak esetében. A HTML elemek közötti kapcsolatok és azok
helyes
használata hozzájárul a jobb keresőoptimalizáláshoz is, mivel a keresőmotorok a jól strukturált és logikusan
felépített oldalakat előnyben részesítik a találati listákban. A hierarchikus struktúra megértése és
alkalmazása
tehát alapvető fontosságú a hatékony webfejlesztéshez, és segít abban, hogy az oldalunk könnyen navigálható
és
felhasználóbarát legyen. Ezen kívül a jól szervezett HTML kód hozzájárul a gyorsabb betöltési idők
eléréséhez, mivel
a böngészők könnyebben és gyorsabban tudják feldolgozni a logikusan felépített struktúrákat. Összességében a
HTML
elemek helyes használata és hierarchikus elrendezése alapvető fontosságú a professzionális és hatékony
webfejlesztéshez.
<a tabindex="9" rel="next" href="#p04" target="_blank" class="par-anchor link">Következő bekezdés megnyitása új lapon</a>
<a tabindex="10" rel="external" href="https://developer.mozilla.org/en-US/docs/Learn/HTML" target="_blank"
class="par-anchor link">Bővebben</a>
</p>
<p class="margin-left paragraph" id="p04">
A HTML5 bevezetésével számos új elem és attribútum vált elérhetővé, amelyek egyszerűsítik a webfejlesztést
és
javítják a felhasználói élményt. Például az <code><article></code>, <code><section></code>, és
<code><nav></code>
elemek segítségével könnyebben strukturálhatjuk a tartalmat, míg az <code><audio></code> és <code><video></code>
elemek lehetővé teszik multimédiás tartalmak beágyazását további pluginok nélkül. Az új szintaktikai elemek,
mint a
<code><header></code>, <code><footer></code>, és <code><aside></code> lehetővé teszik a
tartalom
jobb szervezését és a weboldal szerkezetének átláthatóbbá tételét. A HTML5 támogatja az offline alkalmazások
készítését is a <code><canvas></code> és a <code><svg></code> elemek révén, amelyek lehetővé
teszik a
vektorgrafikák és a dinamikus vizuális tartalmak
megjelenítését. Az új API-k, mint a geolokációs API és a web storage API, további funkcionalitásokat
kínálnak, amelyek lehetővé teszik a fejlesztők számára, hogy gazdagabb és interaktívabb élményeket
nyújtsanak a felhasználóknak. A HTML5 szabványok folyamatos fejlődése biztosítja, hogy a
webfejlesztők mindig naprakész technológiákat használhassanak, amelyek megfelelnek a modern webes
alkalmazások igényeinek és elvárásainak. A HTML5 egyik legnagyobb előnye, hogy visszafelé
kompatibilis, vagyis a régebbi HTML verziókban írt kódok is működőképesek maradnak az új szabvány
mellett. A HTML5 továbbá nagy hangsúlyt fektet a mobilbarát és reszponzív dizájn támogatására, így a
weboldalak könnyedén alkalmazkodhatnak a különböző képernyőméretekhez és eszközökhöz. A HTML5
multimédiás képességei lehetővé teszik, hogy a fejlesztők könnyedén integráljanak videókat, audiókat
és egyéb interaktív elemeket, amelyek gazdagabbá és vonzóbbá teszik a weboldalakat. Az új szabvány
támogatja a webes alkalmazások fejlesztését is, amelyek képesek offline módban is működni, tovább
növelve a felhasználói élményt és az elérhetőséget. A HTML5 tehát számos új lehetőséget kínál a
fejlesztők számára, hogy innovatív és felhasználóbarát weboldalakat és alkalmazásokat hozzanak
létre, amelyek megfelelnek a modern technológiai követelményeknek és a felhasználói igényeknek. A
HTML5 használata révén a fejlesztők képesek olyan weboldalakat készíteni, amelyek nemcsak vizuálisan
vonzóak, hanem technológiailag is fejlettek és funkcionálisak, ezáltal hozzájárulva a web
fejlődéséhez és a felhasználói élmény javításához.
<a tabindex="11" rel="next" href="#p05" target="_blank" class="par-anchor link">Következő bekezdés megnyitása új lapon</a>
<a tabindex="12" rel="external" href="https://developer.mozilla.org/en-US/docs/Learn/HTML" target="_blank"
class="par-anchor link">Bővebben</a>
</p>
<p class="margin-left paragraph" id="p05">
A HTML önmagában nem rendelkezik stílusinformációkkal, ezért a CSS (Cascading Style Sheets)
használatával formázhatjuk a HTML elemeket. A CSS segítségével beállíthatjuk az elemek színeit,
betűtípusait, méreteit és elrendezését, ami segít abban, hogy a weboldalunk vizuálisan vonzó és
felhasználóbarát legyen. A CSS szabályok külön fájlban is tárolhatók, ami megkönnyíti a stílusok
kezelését és újrahasznosítását több oldalon. A CSS három fő részből áll: szelektorok,
tulajdonságok és értékek. A szelektorok meghatározzák, hogy mely HTML elemekre vonatkoznak a
stílusok, a tulajdonságok megadják, hogy milyen stílusokat alkalmazunk, és az értékek határozzák
meg a stílus konkrét megjelenését. A CSS lehetővé teszi a reszponzív dizájn kialakítását is,
amely biztosítja, hogy az oldal különböző eszközökön, mint például mobiltelefonokon, tableteken
és asztali számítógépeken is megfelelően jelenjen meg. Emellett a CSS támogatja az animációkat
és átmeneteket, amelyek segítségével interaktív és dinamikus elemeket hozhatunk létre. A CSS
grid és flexbox modulok különösen hasznosak a modern weboldalak elrendezésében, mivel rugalmas
és könnyen kezelhető módszereket kínálnak a tartalom elrendezésére. A CSS használata lehetővé
teszi a fejlesztők számára, hogy a HTML kódot és a stílusokat elkülönítsék, ami tisztább és
karbantarthatóbb kódot eredményez. A CSS előfeldolgozók, mint például a Sass és a LESS, további
lehetőségeket kínálnak a stíluslapok kezelésére, mint a változók, mixinek és beágyazott
szabályok használata. A modern CSS eszközök és technikák segítségével a fejlesztők képesek
összetett és dinamikus dizájnokat létrehozni, amelyek rugalmasan alkalmazkodnak a különböző
képernyőméretekhez és eszközökhöz. A CSS3 bevezetésével számos új stíluslehetőség vált
elérhetővé, beleértve a több oszlopos elrendezéseket, a szövegárnyékokat és a komplex
szelektorokat, amelyek még nagyobb rugalmasságot biztosítanak a weboldalak stílusának
kialakításában. A CSS használata tehát alapvető fontosságú a professzionális és vonzó weboldalak
létrehozásához, amelyek megfelelnek a modern webes követelményeknek és felhasználói
elvárásoknak.
<a tabindex="13" rel="next" href="#p06" target="_blank" class="par-anchor link">Következő bekezdés megnyitása új lapon</a>
<a tabindex="14" rel="external" href="https://developer.mozilla.org/en-US/docs/Learn/HTML" target="_blank"
class="par-anchor link">Bővebben</a>
</p>
<p class="margin-left paragraph" id="p06">
A HTML és a CSS mellett a JavaScript használata teszi lehetővé az interaktív és dinamikus
weboldalak létrehozását. A JavaScript segítségével különböző eseményeket kezelhetünk,
animációkat hozhatunk létre, és kapcsolatot létesíthetünk a szerverrel aszinkron kéréseken
keresztül. Ezek az eszközök együtt biztosítják, hogy a weboldalak nemcsak információt
nyújtsanak, hanem gazdag, interaktív élményt is kínáljanak a felhasználóknak. A JavaScript
lehetővé teszi az oldalon található elemek manipulálását, például a DOM (Document Object Model)
segítségével hozzáadhatunk, eltávolíthatunk vagy módosíthatunk HTML elemeket. Emellett a
JavaScript segítségével validálhatjuk a felhasználói bemeneteket, kezelhetjük az űrlapok
adatainak elküldését, és interaktív tartalmakat hozhatunk létre, mint például diavetítések,
galériák és interaktív térképek. A modern JavaScript keretrendszerek, mint például a React,
Angular és Vue.js, tovább növelik a fejlesztők lehetőségeit, mivel ezek a keretrendszerek
strukturáltabb és hatékonyabb fejlesztési módszereket kínálnak. A JavaScript használatával
készült webalkalmazások képesek valós idejű adatokat megjeleníteni, felhasználói interakciókat
kezelni, és összetett logikát végrehajtani a böngészőben, ami hozzájárul a gazdag és dinamikus
felhasználói élményhez. A JavaScript lehetővé teszi az aszinkron műveletek végrehajtását is,
amely lehetővé teszi a felhasználói élmény javítását azáltal, hogy az oldal nem fagy le vagy
frissül újra, amikor adatokat küldünk vagy fogadunk a szerverről. Az AJAX (Asynchronous
JavaScript and XML) technológia révén a JavaScript képes dinamikusan frissíteni az oldalt
anélkül, hogy újratöltené azt, ami gyorsabb és gördülékenyebb felhasználói élményt biztosít. A
JavaScript továbbá lehetővé teszi a komplex animációk és interakciók létrehozását, amelyek
gazdagítják a weboldal vizuális és interaktív élményét. A JavaScript használata tehát alapvető
fontosságú a modern webfejlesztésben, mivel lehetővé teszi a dinamikus és interaktív elemek
létrehozását, amelyek növelik a weboldalak funkcionalitását és felhasználói élményét.
<a tabindex="15" rel="next" href="#p07" target="_blank" class="par-anchor link">Következő bekezdés megnyitása új lapon</a>
<a tabindex="16" rel="external" href="https://developer.mozilla.org/en-US/docs/Learn/HTML" target="_blank"
class="par-anchor link">Bővebben</a>
</p>
<p class="margin-left paragraph" id="p07">
A HTML és a CSS mellett a webfejlesztésben egyre fontosabb szerepet kapnak a különböző backend technológiák
is,
amelyek a szerver oldalon futnak, és biztosítják a webalkalmazások működését. A backend technológiák közé
tartozik
például a PHP, a Python, a Ruby és a Node.js, amelyek segítségével dinamikus és adatvezérelt
webalkalmazásokat
fejleszthetünk. A PHP egy széles körben használt szerveroldali nyelv, amely különösen népszerű a
tartalomkezelő
rendszerek (CMS) fejlesztésében, mint például a WordPress. A Python, különösen a Django és a Flask
keretrendszerek
révén, lehetővé teszi a gyors és hatékony webfejlesztést, míg a Ruby on Rails a gyors prototípus-készítést
támogatja. A Node.js, amely a JavaScript szerveroldali futtatókörnyezete, lehetővé teszi az egységes
fejlesztést a
kliens és a szerver oldalon is, ami egyszerűsíti a fejlesztési folyamatot. A backend technológiák használata
lehetővé teszi az adatbázisok kezelését is, például a MySQL, PostgreSQL vagy a MongoDB segítségével, amelyek
tárolják a webalkalmazások adatait. Az adatbázisok lehetővé teszik a dinamikus tartalom kezelését, és
biztosítják,
hogy a felhasználók mindig naprakész információkat kapjanak. Az API-k (Application Programming Interfaces)
használata szintén egyre fontosabbá válik a webfejlesztésben, mivel lehetővé teszik a különböző rendszerek
és
szolgáltatások közötti kommunikációt. Az API-k segítségével integrálhatunk külső szolgáltatásokat, például
fizetési
rendszereket, térképeket vagy közösségi média funkciókat, amelyek növelik a webalkalmazások funkcionalitását
és
felhasználói élményét. A backend technológiák tehát alapvető szerepet játszanak a modern webfejlesztésben,
mivel
biztosítják a webalkalmazások megbízható és hatékony működését, valamint lehetővé teszik a dinamikus és
interaktív
tartalmak kezelését.
<a tabindex="17" rel="external" href="https://developer.mozilla.org/en-US/docs/Learn/HTML" target="_blank"
class="par-anchor link">Bővebben</a>
<a tabindex="18" rel="next" href="#p01" class="par-anchor link">Első bekezdés</a>
</p>
</article>
</div>
<div role="contentinfo" id="author_container" class="margin-left paragraph author_container">
</div>
<h2 class="title_2">Küldés ismerősnek</h2>
<div class="sender-form-container">
<form action="#">
<div class="mb-3 row">
<label class="form-label sender-form-label-align sender-form-label" for="name">Név:</label>
<input tabindex="19" class="form-control sender-form-input" type="text" id="name" name="name" aria-describedby="A címzett neve akinek küldjük a cikket"
placeholder="Add meg a neved!" required >
</div>
<div class="mb-3 row">
<label class="form-label sender-form-label-align sender-form-label" for="phone_number">Telszám:</label>
<input tabindex="20" class="form-control sender-form-input" type="tel" id="phone_number" name="phone_number"
placeholder="Add meg a telefonszámod!" aria-describedby="A címzett telefonszáma">
</div>
<div class="mb-3 row">
<label class="form-label sender-form-label-align sender-form-label" for="email">E-mail:</label>
<input tabindex="21" class="form-control sender-form-input" type="email" id="email" name="email" aria-describedby="A címzett email címe"
placeholder="Add meg az email címed!" required>
</div>
<div class="mb-3 row">
<label class="form-label sender-form-label-align sender-form-label" for="age">Kora:</label>
<input tabindex="22" class="form-control sender-form-input" type="number" id="age" name="age" aria-describedby="A címzett korát kell megadni ebben a mezőben"
placeholder="Add meg a korod!" min="10" max="100">
</div>
<div class="mb-3 row">
<label class="form-label sender-form-label-align sender-form-label" for="message">Üzenet:</label>
<textarea tabindex="23" class="form-control sender-form-textarea" id="message" name="message" aria-describedby="Ebben a mezőben lehet üzenetet írni a címzettnek"></textarea>
</div>
<div>
<button tabindex="24" type="submit" class="btn btn-primary">Küldés</button>
</div>
</form>
</div>
<footer class="margin-left footer margin-right">
<a tabindex="25" rel="header" id="end" href="#beginning" class="link">Ugrás az elejére</a>
</footer>
<script src="author.js"></script>
<script src="theme-handler.js"></script>
<script src="calculator.js"></script>
<script src="search.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>
</html>