diff options
Diffstat (limited to 'files/hu/learn')
| -rw-r--r-- | files/hu/learn/html/bevezetes_a_html-be/index.html | 58 | ||||
| -rw-r--r-- | files/hu/learn/html/index.html | 58 | ||||
| -rw-r--r-- | files/hu/learn/index.html | 130 | ||||
| -rw-r--r-- | files/hu/learn/ismerkedés_a_világhálóval/alapvető_programok_telepítése/index.html | 78 | ||||
| -rw-r--r-- | files/hu/learn/ismerkedés_a_világhálóval/hogy_fog_kinézni_a_weboldalunk/index.html | 92 | ||||
| -rw-r--r-- | files/hu/learn/ismerkedés_a_világhálóval/index.html | 60 | ||||
| -rw-r--r-- | files/hu/learn/javascript/első_lépések/index.html | 66 | ||||
| -rw-r--r-- | files/hu/learn/javascript/index.html | 56 | ||||
| -rw-r--r-- | files/hu/learn/server-side/index.html | 59 |
9 files changed, 657 insertions, 0 deletions
diff --git a/files/hu/learn/html/bevezetes_a_html-be/index.html b/files/hu/learn/html/bevezetes_a_html-be/index.html new file mode 100644 index 0000000000..d5f2c7239a --- /dev/null +++ b/files/hu/learn/html/bevezetes_a_html-be/index.html @@ -0,0 +1,58 @@ +--- +title: Bevezetés a HTML-be +slug: Learn/HTML/Bevezetes_a_HTML-be +translation_of: Learn/HTML/Introduction_to_HTML +--- +<div>{{LearnSidebar}}</div> + +<div>A {{glossary("HTML")}} alapvetően egy egyszerű nyelv. Olyan <a href="/hu/docs/Glossary/Element">elemekből</a> áll, amelyekkel különböző jelentést társíthatunk szövegrészleteknek (például egy bekezdés, egy számozott lista, egy táblázat sora), struktúrálhatjuk a dokumentumot logikai részekre (például fejléc, navigációs sáv, három oszlopos tartalom), vagy beilleszthetünk más tartalmakat az oldalunkba (például képeket vagy videót).</div> + +<div>Ez a modul bemutatja ezek közül az első kettőt, és megismertet az alapvető fogalmakkal és a szintaxissal, amiket tudnod kell a HTML megértéséhez.</div> + +<h2 id="Előfeltételek">Előfeltételek</h2> + +<p>Mielőtt elkezded ezt a modult, tudnod kell pár dolgot.<br> + A kezdéshez nincs szükséged előzetes HTML ismeretekre, ugyanakkor legalább alapszinten ismerned kell a számítógép és az internet használatát. Létre kell hoznod egy alapvető munkakörnyezetet (amit az <a href="/hu/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Alapvető szoftverek telepítése</a> útmutatónk részletesen ismertet), és tudnod kell, hogyan hozhatsz létre és kezelhetsz fájlokat (amit a <a href="/hu/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Fájlok kezelése</a> útmutatónk részletesen ismertet). Mindkettő része a <a href="/hu/docs/Learn/Getting_started_with_the_web">Kezdő lépések</a> modulnak.</p> + +<div class="note"> +<p><strong>Megjegyzés</strong>: Ha olyan számítógépen / táblagépen / vagy egyéb eszközön dolgozol, amelyen nem tudsz fájlokat létrehozni, próbáld ki (a legtöbb) példa kódot valamelyik online programban, mint amilyen a <a href="http://jsbin.com/">JSBin</a> vagy a <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Útmutatók">Útmutatók</h2> + +<p>Ez a modul olyan útmutatókat tartalmaz, amelyek végigvezetnek a HTML nyújtotta összes lehetőségen, és bőséges lehetőséget nyújtanak a képességeid tesztelésére.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML Alapok</a></dt> + <dd>Magában foglalja a HTML abszolút alapjait — definiáljuk az elemeket, attribútumokat, és más fontos paramétereket, valamint megmutatjuk hol illeszkednek a nyelvhez. Azt is megmutatjuk, hogy egy tipikus HTML oldal hogyan van struktúrálva illetve egy HTML elem hogyan van struktúrálva, valamint elmagyarázzuk milyen egyéb fontos nyelvi funkciók vannak. Útközben játszunk is egy kicsit a HTML-el, hogy felkeltsük az érdeklődésedet.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Mi van a head-ben? Metaadatok HTML-ben</a></dt> + <dd>A HTML-dokumentum feje (<a href="/en-US/docs/Glossary/Head">head</a>) az a rész, amely nem jelenik meg a webböngészőben az oldal betöltésekor. Olyan információkat tartalmaz, mint például az oldal címe ({{htmlelement("title")}}), linkek a {{glossary("CSS")}} fájlokra, az egyedi ikonok elérési útvonalai, illetve a metaadatok (adatok a HTML-ről, például arról, hogy ki írta, vagy a dokumentumot leíró fontos kulcsszavakat).</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML szöveg alapjai</a></dt> + <dd>A HTML egyik fő feladata, hogy jelentést adjon a szövegnek (más néven <a href="/en-US/docs/Glossary/Semantics">szematika</a>), hogy a böngésző tudja, hogyan kell helyesen megjeleníteni. Ez a cikk megmutatja hogyan tördelheted fel a szöveget fejlécekre és bekezdésekre, hogyan hangsúlyozhatsz szavakat, vagy készíthesz listákat és egyebeket HTML segítségével..</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Hivatkozások létrehozása</a></dt> + <dd>A hivatkozások (hyperlinks) nagyon fontosak — ők teszik az internetet internetté. Ez a cikk egy link elkészítéséhez szükséges szintaxist mutat be, illetve bemutat néhány praktikát.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Speciális szövegformázás</a></dt> + <dd>Rengeteg elem van a HTML-ben a szövegek formázására, amelyeket a <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML szöveg alapjai</a> cikkben nem találsz meg. Ezek az elemek kevésbé ismertek, pedig ismeretük még mindig hasznos lehet. Ebben a cikkben megtanulhatod az idézetek, a leírási listák, a számítógépes kódok és egyéb kapcsolódó szövegek, úgy mint indexek, felső indexek vagy kapcsolati adatok megjelölését.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Dokumentum- és weboldalszerkezet</a></dt> + <dd>Az oldal egyes részeinek (például bekezdés vagy kép) meghatározása mellett a HTML-t arra is használják, hogy meghatározza webhely területeit (például fejléc, lábléc, navigációs sáv, tartalom). Ez a cikk megvizsgálja, hogyan kell megtervezni egy alapvető webhelystruktúrát, illetve hogyan kell megírni HTML-ben.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Hibakeresés HTML-ben</a></dt> + <dd>HTML-t írni szuper, de mi van akkor, ha valamit elromlik és nem találod a hibát? Ez a cikk bemutat néhány eszközt, amely segíthet.</dd> +</dl> + +<h2 id="Tesztek">Tesztek</h2> + +<p>Ezekkel a tesztekkel ellenőrizheted, hogy mennyire sikerült megértened a fenti útmutatókban leírtakat.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Egy levél írása </a></dt> + <dd>Mindannyian megtanulunk egy levelet írni előbb vagy utóbb; ez egy hasznos példa a szövegformázási készségek tesztelésére. Ebben a tesztben egy levelet kell megformázni.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Egy tartalom oldalának strukturálása</a></dt> + <dd>Ez a tesz ellenőrzi hogyan tudsz struktúrálni HTML-el egy oldalt, amely tartalmaz fejlécet, láblécet, navigációs sávot, egy fő tartalmat és egy oldalsávot.</dd> +</dl> + +<h2 id="Kapcsolódó_témakörök">Kapcsolódó témakörök</h2> + +<dl> + <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">A webes műveltség alapjai 1</a></dt> + <dd>Egy kiváló Mozilla alapítványi tanfolyam, amely a <a href="https://developer.mozilla.org/hu/docs/Learn/HTML/Bevezetes_a_HTML-be">Bevezetés a HTML-be</a> c. útmutatóban bemutatott sok készség vizsgálatára és tesztelésére szolgál. A tanulók megismerkedhetnek az olvasással, az írással és a weben való részvételellel ebben a hat részből álló modulban. Fedezze fel a web alapjait a alkotás és az együttműködés révén.</dd> +</dl> diff --git a/files/hu/learn/html/index.html b/files/hu/learn/html/index.html new file mode 100644 index 0000000000..df97989e28 --- /dev/null +++ b/files/hu/learn/html/index.html @@ -0,0 +1,58 @@ +--- +title: 'Learning HTML: Guides and tutorials' +slug: Learn/HTML +tags: + - Beginner + - Guide + - HTML + - Intro + - Learn + - NeedsTranslation + - Topic + - TopicStub +translation_of: Learn/HTML +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">To build websites, you should know about {{Glossary('HTML')}} — the fundamental technology used to define the structure of a webpage. HTML is used to specify whether your web content should be recognized as a paragraph, list, heading, link, image, multimedia player, form, or one of many other available elements or even a new element that you define.</p> + +<h2 id="Learning_pathway">Learning pathway</h2> + +<p>Ideally, you should start your learning journey by learning HTML. Start by reading <a href="/en-US/docs/Web/Guide/HTML/Introduction">Introduction to HTML</a>. You may then move on to learning about more advanced topics such as:</p> + +<ul> + <li><a href="/en-US/docs/Learn/CSS">CSS</a>, and how to use it to style HTML (for example alter your text size and fonts used, add borders and drop shadows, layout your page with multiple columns, add animations and other visual effects.)</li> + <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, and how to use it to add dynamic functionality to web pages (for example find your location and plot it on a map, make UI elements appear/disappear when you toggle a button, save users' data locally on their computers, and much much more.)</li> +</ul> + +<p>Before starting this topic, you should have at least basic familiarity with using computers and using the web passively (i.e. just looking at it, consuming the content). You should have a basic work environment set up as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, and understand how to create and manage files, as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> — both are parts of our <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> complete beginner's module.</p> + +<p>It is recommended that you work through <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web </a>before attempting this topic, however, it isn't absolutely necessary; much of what is covered in the <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a> article is also covered in our <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module, albeit in a lot more detail.</p> + +<h2 id="Modules">Modules</h2> + +<p>This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a></dt> + <dd>This module sets the stage, getting you used to important concepts and syntax, looking at applying HTML to text, how to create hyperlinks, and how to use HTML to structure a webpage.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding</a></dt> + <dd>This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Tables">HTML Tables</a></dt> + <dd>Representing tabular data on a webpage in an understandable, {{glossary("Accessibility", "accessible")}} way can be a challenge. This module covers basic table markup, along with more complex features such as implementing captions and summaries.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Forms">HTML Forms</a></dt> + <dd>Forms are a very important part of the Web — these provide much of the functionality you need for interacting with websites, e.g. registering and logging in, sending feedback, buying products, and more. This module gets you started with creating the client-side parts of forms.</dd> +</dl> + +<h2 id="Solving_common_HTML_problems">Solving common HTML problems</h2> + +<p><a href="/en-US/docs/Learn/HTML/Howto">Use HTML to solve common problems</a> provides links to sections of content explaining how to use HTML to solve very common problems when creating a webpage: dealing with titles, adding images or videos, emphasizing content, creating a basic form, etc.</p> + +<h2 id="See_also">See also</h2> + +<div class="document-head" id="wiki-document-head"> +<dl> + <dt><a href="/en-US/docs/Web/HTML">HTML (HyperText Markup Language)</a> on MDN</dt> + <dd>The main entry point for HTML documentation on MDN, including detailed element and attribute references — if you want to know what attributes an element has or what values an attribute has, for example, this is a great place to start.</dd> +</dl> +</div> diff --git a/files/hu/learn/index.html b/files/hu/learn/index.html new file mode 100644 index 0000000000..55b880bac6 --- /dev/null +++ b/files/hu/learn/index.html @@ -0,0 +1,130 @@ +--- +title: A webfejlesztés megtanulása +slug: Learn +tags: + - CSS + - HTML + - Kezdő + - Tanulás + - Web + - bevezetés + - tartalomjegyzék +translation_of: Learn +--- +<div>{{LearnSidebar}}</div> + +<div></div> + +<div> +<p class="summary">Üdvözlünk az MDN tanulórészlegén! Az itt található témakörök elsődleges célja, hogy kezdő fejlesztők könnyedén megtalálhassák azokat az információkat, amelyek szükségesek az egyszerű weboldalak elkészítéséhez.</p> +</div> + +<p>Nem az a célunk, hogy kezdőből szakértőt faragjunk belőled, hanem kezdőből középhaladót. Onnantól kezdve már elindulhatsz a saját utadon, ahonnan már könnyedén tanulhatsz az <a href="https://developer.mozilla.org/en-US/">MDN többi részéből</a> és más középhaladó és haladó anyagokból, amelyekhez már sok előzetes tudás szükséges.</p> + +<p>Ha abszolút kezdő vagy, akkor a webfejlesztés nagy kihívás lehet, de segítünk neked, és biztosítjuk számodra a szükséges információkat ahhoz, hogy kényelmesen és jól megtanuld a különböző témákat. Érezd magad otthon akkor is, ha csak diákként böngészel, ha tananyagot keresel a diákjaidnak, vagy csak hobbiként szeretnél többet megtudni a webes technológiák működéséről!</p> + +<h2 id="Újdonságok">Újdonságok</h2> + +<p>A tanulórészleg tartalma rendszeresen bővül. A változások követéséhez elindítottuk a <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Release_notes">Tanulórészleg kiadási megjegyzései</a> oldalt – nézz vissza rendszeresen.</p> + +<p>Ha kérdésed van az itt tárgyalt témákkal kapcsolatban, vagy úgy érzed, hogy valami hiányzik, akkor küldj nekünk egy üzenetet a <a href="https://discourse.mozilla.org/c/mdn">Discourse fórumunkon</a>.</p> + +<h3 id="Front-end_webfejlesztő_szeretnél_lenni">Front-end webfejlesztő szeretnél lenni?</h3> + +<p>Összeraktunk egy oktatóanyagot, amely tartalmazza az összes alapvető információt, amire szükséged lesz a cél elérése érdekében.</p> + +<p><a class="cta primary" href="https://wiki.developer.mozilla.org/docs/Learn/Front-end_web_developer">Fogj hozzá</a></p> + +<h2 id="Hol_kezdjük">Hol kezdjük?</h2> + +<ul class="card-grid"> + <li><span>Teljesen kezdő:</span> Ha abszolút kezdő vagy, akkor ajánljuk neked a <a href="/en-US/docs/Learn/Getting_started_with_the_web">Kezdjük a Webbel</a> modult, amely jó alapot nyújt a webfejlesztés megértéséhez.</li> + <li><span>Az alapokon túl:</span> Ha már kapizsgálod már valamennyire a webfejlesztést, akkor a következő lépés a {{glossary("HTML")}} és a {{glossary("CSS")}} : Kezdd a <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Bevezetés a HTML-be</a> modullal és haladj tovább a <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Bevezetés a CSS</a> modullal.</li> + <li><span>Tovább a szkripteléshez:</span> Ha már úgyérzed hogy HTML és CSS a barátod, vagy inkább a kódolás érdekel, akkor haladj tovább a {{glossary("JavaScript")}} vagy kiszolgálóoldali (server-side) fejlesztés felé. Kezdd a <a href="/en-US/docs/Learn/JavaScript/First_steps">Első lépések a JavaScripttel </a> és a <a href="/en-US/docs/Learn/Server-side/First_steps">Első lépések kiszolgálóoldalon</a> modullal.</li> + <li><span>Keretrendszerek és eszközök:</span> Miután elsajátítottad a HTML, CSS és JavaScript alapjait, ismerkedj meg a <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools">kliensoldali webfejlesztő eszközökkel</a>, és fontold meg, hogy beleásod magad a <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">kliensoldali JavaScript keretrendszerekbe</a>, és a <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side">kiszolgálóoldali weboldal-programozásba</a>.</li> +</ul> + +<div class="note"> +<p><strong>Megjegyzés</strong>: <a href="/en-US/docs/Glossary">Szószedetünkben</a> megtalálhatod a szaknyelvi definíciókat.<strong> </strong>Emellett pedig ha konkrét kérdésed van a webfejesztésről, akkor a <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Common_questions">Gyakori kérdések</a> szakaszunk lehet, hogy segíteni fog.</p> +</div> + +<p>{{LearnBox({"title":"Véletlenszerű bejegyzés a szószedetből"})}}</p> + +<h2 id="Lefedett_témakörök">Lefedett témakörök</h2> + +<p>Itt egy lista az MDN tanuló oldal által lefedett témakörökről.</p> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Ismerkedés a webfejlesztéssel</a></dt> + <dd>Gyakorlati bevezető a webfejlesztésbe teljesen kezdőknek.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML">HTML – a web szerkezetének kialakítása</a></dt> + <dd>A HTML nyelv segítségével alakítjuk ki oldalaink szerkezetét és adunk jelentést, illetve célt a tartalmunknak. Ez a témakör részletesen bemutatja a HTML nyelvet.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS – a web dizájnolása</a></dt> + <dd>A CSS nyelv segítségével tudjuk a weboldalaink stílusát, elrendezését megadni, valamint viselkedést rendelhetünk oldalunkhoz, például animációkkal. Ez a témakör átfogó képet nyújt a CSS-ről.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript – dinamikus kliensoldali programozás</a></dt> + <dd>A Javascript szkript nyelv dinamikus funkcionalitást ad a weboldalakhoz. Ez a témakör megtanítja azokat az alapvető dolgokat, amelyek ahhoz szükségesek, hogy magabiztosan megértsük és írjunk Javascript kódot.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility">Akadálymentesítés – tegyük mindenki számára elérhetővé a webet</a></dt> + <dd>Az akadálymentesítés az a gyakorlat, amellyel a webes tartalmakat minél szélesebb rétegek számára elérhetővé tesszük fogyatékosság, használt eszköz, földrajzi elhelyezkedés vagy egyéb megkülönböztető tényezőktől függetlenül. Itt mindent megtanulhatsz, amit tudnod kell erről a témáról.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing">Eszközök és tesztelés</a></dt> + <dd>Ebben a témakörben megismerheted a fejlesztők mindennapi munkája során használt eszközöket, mint például a különböző böngészők tesztelésére használt eszközök.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side">Kiszolgálóoldali webfejlesztés</a></dt> + <dd>Még ha a kliensoldali fejlesztés is a fő fókuszod, akkor is érdemes tudnod róla hogyan működnek a kiszolgálók, illetve a kiszolgálóoldali kódok. Ez a témakör általános leírást ad a kiszolgálóoldal működéséről, és részletes bemutatót találhatsz arról, hogyan kell felépíteni egy kiszolgálóoldali alkalmazást két népszerű keretrendszer segítsével: a Djangóval (Python) és az Expressel (node.js).</dd> +</dl> + +<h2 id="Példakódok_megszerzése">Példakódok megszerzése</h2> + +<p>A tanulórészlegen található összes kódpélda <a href="https://github.com/mdn/learning-area/">elérhető GitHubon</a>. Ha le akarod másolni őket a számítógépedra, akkor a legegyszerűbb megoldás a <a href="https://github.com/mdn/learning-area/archive/master.zip">master ág legfrissebb verziójának letöltése ZIP-fájlként</a>.</p> + +<p>Ha inkább a tárolót másolnád le, amely rugalmasabb és lehetővé teszi az automatikus frissítéseket, akkor kövesd a bonyolultabb utasításokat:</p> + +<ol> + <li><a href="https://git-scm.com/downloads">Telepítsd a Gitet</a> a számítógépre. Ez a verziókezelő rendszer, amelyre a GitHub is épít.</li> + <li>Nyisd meg a számítógép <a href="https://www.lifewire.com/how-to-open-command-prompt-2618089">parancssorát</a> (Windows) vagy a terminált (<a href="https://help.ubuntu.com/community/UsingTheTerminal">Linux</a>, <a href="https://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line">macOS</a>).</li> + <li>A tanulórészleg tárolójának egy „learning-area” mappába másolásához a jelenlegi munkakönyvtárban, használd a következő parancsot: + <pre class="brush: bash notranslate">git clone https://github.com/mdn/learning-area</pre> + </li> + <li>Beléphetsz a könyvtárba, és kikeresheted a megfelelő fájlokat (vagy a Finderrel/Fájlkezelővel, vagy a <a href="https://en.wikipedia.org/wiki/Cd_(command)"><code>cd</code> paranccsal</a>).</li> +</ol> + +<p>A következő lépésekkel frissítheted a <code>learning-area</code> tárolót a GitHubon lévő „master” verzió módosításaival:</p> + +<ol> + <li>A parancssorban/terminálban válts a <code>learning-area</code> könyvtárra a <code>cd</code> segítségével. Például, ha a szülőkönyvtárban vagy: + + <pre class="brush: bash notranslate">cd learning-area</pre> + </li> + <li>Frissítsd a tárolót a következő paranccsal: + <pre class="brush: bash notranslate">git pull</pre> + </li> +</ol> + +<h2 id="Lépj_kapcsolatba_velünk">Lépj kapcsolatba velünk</h2> + +<p>Ha szeretnél kapcsolatba lépni velünk bármivel is kapcsolatban, a legjobb módszer arra ha dobsz egy üzenetet a <a href="https://discourse.mozilla.org/c/mdn">Discourse fórumunkra</a>. Ha bármi észrevételed lenne, hiányzik valami az oldalról, valami nem állja meg a helyét, szeretnél egy új témát, nem értesz valamit, vagy bármi, nyugodtan írj nekünk.</p> + +<p>Ha szeretnéd a tartalmat bővíteni, vess egy pillantást a <a href="/en-US/Learn/How_to_contribute">hogyan tudok segíteni</a> oldalra vagy lépj velünk kapcsolatba! Csupa öröm ha felveszitek velünk a kapcsolatot legyél akár tanár, diák, vagy tapasztalt webfejlesztő.</p> + +<h2 id="Lásd_még">Lásd még</h2> + +<dl> + <dt><a href="https://www.mozilla.org/en-US/newsletter/developer/">Mozilla fejlesztői hírlevé developer newsletter</a></dt> + <dd>A hírlevelünk webfejlesztők számára, ami kiváló információforrás minden tapasztalati szinten.</dd> + <dt><a href="https://learnjavascript.online/">Learn JavaScript</a></dt> + <dd>Egy kiváló forrás jövőbeli webfejlesztők számára – a Learn JavaScript egy interaktív környezet, rövid leckékkel és interaktív tesztekkel, melyet automata értékelés segít. Az első 40 lecke ingyenes, a teljes kurzus kis összegű, egyszeri fizetés fejében érhető el.</dd> + <dt><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web demystified</a></dt> + <dd>Egy nagyszerű videósorozat a web alapjairól, kifejezetten azokat célozva, akik abszolút kezdők a webfejlesztésben. Készítette: <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a>.</dd> + <dt><a href="https://www.codecademy.com/">Codecademy</a></dt> + <dd>Nagyszerű interaktív oldal programozási nyelvek az alapoktól történő tanulására.</dd> + <dt><a href="https://www.bitdegree.org/learn/">BitDegree</a></dt> + <dd>Alapvető kódoláselmélet játékosított tanulási folyamattal. Főleg kezdőket céloz.</dd> + <dt><a href="https://code.org/">Code.org</a></dt> + <dd>Alapvető kódoláselmélet játékosított tanulási folyamattal. Főleg gyerekeket és teljesen kezdőket céloz.</dd> + <dt><a href="https://exlskills.com/learn-en/courses">EXLskills</a></dt> + <dd>Ingynes és nyílt kurzusok műszaki készségek tanításához, mentorálással és projektalapú tanulással.</dd> + <dt><a href="https://www.freecodecamp.org/">freeCodeCamp.org</a></dt> + <dd>Interaktív oldal oktatóanyagokkal és projektekkel a webfejlesztés elsajátításához.</dd> + <dt><a href="https://foundation.mozilla.org/en/initiatives/web-literacy/core-curriculum/">Webes írástudási térkép</a></dt> + <dd>Egy keretrendszer belépőszintű webes írástudáshoz és 21. századi készségekhez, amelyek kategóriánkénti oktatási tevékenységeket is biztosítanak.</dd> + <dt><a href="https://edabit.com/challenges/javascript">Edabit</a></dt> + <dd>Interaktív JavaScript kihívások ezrei.</dd> +</dl> diff --git a/files/hu/learn/ismerkedés_a_világhálóval/alapvető_programok_telepítése/index.html b/files/hu/learn/ismerkedés_a_világhálóval/alapvető_programok_telepítése/index.html new file mode 100644 index 0000000000..463216fd9f --- /dev/null +++ b/files/hu/learn/ismerkedés_a_világhálóval/alapvető_programok_telepítése/index.html @@ -0,0 +1,78 @@ +--- +title: Alapvető programok telepítése +slug: Learn/Ismerkedés_a_Világhálóval/Alapvető_programok_telepítése +tags: + - Kezdő + - böngésző + - ezközök + - kódszerkesztő + - programok + - szövegszerkesztő +translation_of: Learn/Getting_started_with_the_web/Installing_basic_software +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p><span style="">Ebben a cikkben megmutatjuk milyen programokra lesz szükségünk egyszerű weboldalak fejlesztéséhez.</span></p> +</div> + +<h2 id="Milyen_eszközöket_használnak_a_profi_webfejlesztők">Milyen eszközöket használnak a profi webfejlesztők?</h2> + +<ul> + <li><strong>Modern számítógépet</strong>. Némelyeknek magátólértetődőnek tűnhet, de biztosan vannak, akik telefonról vagy könyvtárból olvassák ezt a cikket, ezért le kell szögezzük: a komoly webfejlesztéshez muszáj befektetni egy modern Windows, Linux vagy macOS futtatására képes számítógépbe.</li> + <li><strong>Kódszerkesztőt</strong>. Ez lehet egy egyszerűbb kódszerkesztő (pl. <a href="https://code.visualstudio.com/">Visual Studio Code</a>, <a href="https://notepad-plus-plus.org/">Notepad++</a>, <a href="https://www.sublimetext.com/">Sublime Text</a>, <a href="https://atom.io/">Atom</a>, <a href="https://www.gnu.org/software/emacs/">GNU Emacs</a>, esetleg <a href="https://www.vim.org/">VIM</a>), vagy egy hibrid megoldás (pl. <a href="https://www.adobe.com/products/dreamweaver.html">Dreamweaver </a>vagy <a href="https://www.jetbrains.com/webstorm/">WebStorm</a>). A hétköznapokból ismert irodai szövegszerkesztők nem alkalmasak erre a feladatra, mivel a dokumentum formázásához olyan rejtett adatokat ír a fájlba, amik megzavarják a böngészőket.</li> + <li><strong>Modern böngészőket</strong>, a kód tesztelése. A legelterjedtebb böngészők ma a <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="https://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> és a <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>. Erősen ajánlott a weboldalunkat különböző mobilkészülékeken, valamint a közönségünk által esetlegesen használt régebbi böngészőkben is tesztelni (például IE 8–10.) A gyengénlátó felhasználók böngészési élményét segíthet feltérképezni a <a href="https://lynx.browser.org/">Lynx</a>, egy grafikus felülettel nem rendelkező, karakter alapú, parancssoros böngésző.</li> + <li><strong>Grafikus szerkesztőt</strong>, mint például a <a href="https://www.gimp.org/">GIMP</a>, <a href="https://www.figma.com/">Figma</a>, <a href="http://www.getpaint.net/">Paint.NET</a>, <a href="https://www.adobe.com/products/photoshop.html">Photoshop</a>, vagy <a href="https://www.adobe.com/products/xd.html">XD</a>, hogy a weboldalunkra szánt képeket optimalizálni tudjuk a Világhálóra.</li> + <li><strong>Verziókövetőt</strong>, amely segít nyomonkövetni a kód változását és elkerülni, hogy egymás lábára lépjünk a közös munkavégzés során. Jelenleg a <a href="http://git-scm.com/">Git</a> az egyik legnépszerűbb verziókövető, a <a href="https://github.com/">GitHub</a> és <a href="https://gitlab.com">GitLab</a> pedig közkedvelt online Git szolgáltatók.</li> + <li><strong>FTP programot.</strong> Régebbi webtárhelyeken használatos módszer a fájlok kezelésére, manapság egyre jellemzőbb, hogy FTP helyett Gitet használnak speciálisan erre a célra. Számtalan FTP/SFTP program közül választhatunk, például a <a href="https://cyberduck.io/">Cyberduck</a>, <a href="http://fetchsoftworks.com/">Fetch</a> vagy a <a href="https://filezilla-project.org/">FileZilla</a>.</li> + <li><strong>Automatizációs eszközöket,</strong> mint a <a href="https://webpack.js.org/">Webpack</a>, <a href="http://gruntjs.com/">Grunt</a>, vagy a <a href="http://gulpjs.com/">Gulp</a>. Ezek a szoftvereszközök a fejlesztés során gyakran ismétlődő folyamatok automatizálására valóak, mint például a kódtömörítés (<em>minifying</em>), vagy a tesztek futtatása.</li> + <li>Könyvtárakat, keretrendszereket, egyéb újrafelhasználható szoftvercsomagokat, amelyek felgyorsítják a fejlesztést. A könyvtárak (<em>library</em>) valamilyen hasznos funkciót biztosítanak, amit beépíthetünk az alkalmazásunkba, míg a keretrendszerek (<em>framework</em>) komplett rendszerek, amelyekre a saját alkalmazásunkat alapozzuk.</li> + <li>És még számtalan egyéb, valamilyen konkrét problémát megoldó szoftvereszközt!</li> +</ul> + +<h2 id="Mire_van_feltétlenül_szükségem_a_kezdéshez">Mire van feltétlenül szükségem a kezdéshez?</h2> + +<p>Habár a fenti lista elsőre rémisztőnek tűnhet, a jó hír az, hogy ezeknek csupán egy töredéke szükséges a kezdéshez.</p> + +<p>A továbbiakban a két legszükségesebbre fókuszálunk: egy alkalmas szövegszerkesztőre és böngészőkre.</p> + +<h3 id="Kódszerkesztő">Kódszerkesztő</h3> + +<p>Szinte bizonyos, hogy már van valamilyen kódolásra alkalmas szövegszerkesztő a számítógépünkön. Windowson a <a href="https://hu.wikipedia.org/wiki/Jegyzettömb">Jegyzettömb</a>, macOS esetén a <a href="https://en.wikipedia.org/wiki/TextEdit">TextEdit</a> elő van telepítve. Linux esetén disztribúciófüggő az alapértelmezett szerkesztő, Ubuntu esetén ez a <a href="https://hu.wikipedia.org/wiki/Gedit">gedit</a>.</p> + +<p>Habár ezekkel a programokkal lehetséges kódot írni, vannak jobb alternatívák. A <a href="https://code.visualstudio.com/">Visual Studio Code</a> egy igen népszerű ingyenes kódszerkesztő, kimondottan programozást támogató funkciókkal.</p> + +<h3 id="Modern_böngészők">Modern böngészők</h3> + +<p>Tekintsük az operációs rendszerünknek megfelelő böngészők listáját és telepítsük őket a megadott linkek segítségével. Erősen ajánlott legalább két böngészőt telepíteni, mielőtt elkezdjük a tanulást, de a későbbi teszteléshez javasolt mindegyiknek a telepítése.</p> + +<ul> + <li>Linux: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="https://www.opera.com/">Opera</a>, <a href="https://brave.com">Brave</a>.</li> + <li>Windows: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="https://www.opera.com/">Opera</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a>, <a href="https://www.microsoft.com/en-us/edge">Microsoft Edge</a>, <a href="https://brave.com">Brave</a> (Windows 10 esetén az Edge előtelepítve van; Windows 7-től kezdődően telepíthetjük az Internet Explorer 11 verzióját; egyéb esetben válasszunk más böngészőt).</li> + <li>macOS: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="https://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, <a href="https://brave.com">Brave</a> (macOS és iOS esetén a Safari az alapértelmezett böngésző).</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Figyelem</strong>: Az Internet Explorer nem kompatibilis némely modern webes technológiákkal, így előfordulhat, hogy nem tudja futtatni a projektünket. Általánosságban azonban elmondható, hogy nem kell aggódnunk az Internet Explorer miatt, mivel manapság nagyon kevesen használják — ugyanakkor az is előfordulhat, hogy olyan projektbe botlunk, ahol fontos az Internet Explorer támogatása.</p> +</div> + +<h3 id="Helyben_futó_webszerver">Helyben futó webszerver</h3> + +<p>Egyes példák futtatásához egy működő webszerverre lesz szükségünk. A <a href="/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">How do you set up a local testing server?</a> cikk részletesen bemutatja, hogyan tudunk konfigurálni egyet.</p> + +<p>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</p> + +<h2 id="Modul_tartalomjegyzék">Modul tartalomjegyzék</h2> + +<ul> + <li id="Installing_basic_software"><a href="/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a></li> + <li id="What_will_your_website_look_like"><a href="/en-US/Learn/Getting_started_with_the_web/What_will_your_website_look_like">What will your website look like?</a></li> + <li id="Dealing_with_files"><a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a></li> + <li id="HTML_basics"><a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a></li> + <li id="CSS_basics"><a href="/en-US/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a></li> + <li id="JavaScript_basics"><a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript basics</a></li> + <li id="Publishing_your_website"><a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your website</a></li> + <li id="How_the_web_works"><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a></li> +</ul> diff --git a/files/hu/learn/ismerkedés_a_világhálóval/hogy_fog_kinézni_a_weboldalunk/index.html b/files/hu/learn/ismerkedés_a_világhálóval/hogy_fog_kinézni_a_weboldalunk/index.html new file mode 100644 index 0000000000..374aae6c40 --- /dev/null +++ b/files/hu/learn/ismerkedés_a_világhálóval/hogy_fog_kinézni_a_weboldalunk/index.html @@ -0,0 +1,92 @@ +--- +title: Hogy fog kinézni a weboldalunk +slug: Learn/Ismerkedés_a_Világhálóval/Hogy_fog_kinézni_a_weboldalunk +translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p><span style="">Ebben a cikkben áttekintjük a weboldalunk kódolása előtt szükséges alapvető tervezési lépéseket. Milyen tartalmat fogunk megjeleníteni? Milyen betűtípusokat és színeket képzelünk el? Egyáltalán, mi a weboldal legfőbb célja?</span></p> +</div> + +<h2 id="Első_lépés_tervezés">Első lépés: tervezés</h2> + +<p>Miről fog szólni a weboldalunk? Mi lesz a célja? Kezdésnek valami egyszerűre törekedjünk, például egy cím, egy kép és néhány bekezdés valamilyen konkrét dologról.</p> + +<p>Alapvető kérdések:</p> + +<ol> + <li><strong>Miről szóljon?</strong> Mi az ami érdekel? Kutyák? New York? Pac-Man?</li> + <li><strong>Mi lesz a konkrét megjelenített tartalom?</strong> Írjunk néhány bekezdést, találjunk ki egy címet és keressünk egy képet.</li> + <li><strong>Hogy fog kinézni az oldal?</strong> Nem kell mindent részletesen kitalálni előre, de jó, ha legalább az elrendezést, a háttérszíneket és a betűstílust nagyvonalakban meghatározzuk. Milyen kisugárzást szeretnénk? Hivatalosat? Vicceset? Figyelemfelhívót? Esetleg valami diszkrétet?</li> +</ol> + +<div class="note"> +<p><strong>Megjegyzés</strong>: A komplex projektek tervezése nagyságrendekkel bonyolultabb. Méretek, térközök, fogalmazási stílus, és így tovább. Ezeket az előírásokat egy úgynevezett design systemben (vagy más néven brand bookban) szokás összefoglalni. Íme egy példa, a <a href="https://design.firefox.com/photon/">Firefox Photon Design System</a>.</p> +</div> + +<h2 id="Vázlatos_arculati_terv">Vázlatos arculati terv</h2> + +<p>Ragadjunk papírt és ceruzát és skicceljük fel a weboldalunkat. Habár egy kép és néhány bekezdés esetén ez feleslegesnek tűnhet, valójában nagyon sokat segít, ha van egy hozzávetőleges ábránk arról, hogy mit is szeretnénk pontosan, ezért nem árt, ha már most hozzászokunk a folyamathoz.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9239/website-drawing-scan.png" style="display: block; height: 460px; margin: 0px auto; width: 640px;"></p> + +<div class="note"> +<p><strong>Megjegyzés</strong>: Még egy nagy, összetett weboldal esetén is gyakran ilyen egyszerű papíros vázlatokkal kezdődik a tervezés és az alapvető elképzelések megszilárdulása után készülnek digitális tervek, kattintható prototípusok.</p> + +<p>A webes csapatoknak sokszor tagja egy grafikus és egy {{Glossary("UX", "user experience")}} (UX, felhaszálói élmény) designer. A grafikus felel a megjelenés részletes megtervezéséért, míg a UX designer a weboldal megjelenési és működési alapvetéseit határozza meg úgy, hogy az felhasználóbarát legyen váljon.</p> +</div> + +<h2 id="Weboldal_elemeinek_összeállítása">Weboldal elemeinek összeállítása</h2> + +<p>Eljött az idő, hogy összeszedjük, pontosan mit is tartalmazzon a weboldalunk.</p> + +<h3 id="Szöveges_tartalom">Szöveges tartalom</h3> + +<p>Írjuk meg a konkrét szöveges tartalmat, ha még nem tettük volna meg.</p> + +<h3 id="Szín_téma">Szín téma</h3> + +<p>Nyissuk meg az MDN színválasztó <a href="/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool">segédeszközét</a> és válasszunk egy színt a weboldal általános szín témájának. Miután kiválasztottunk egy színt, egy <code>#660066</code> alakú kódot fogunk látni. Ez egy <em>hexa-kód</em> (hexadecimális, tizenhatos számrendszerbeli). Ez azonosítja a kiválasztott színt. Írjuk fel valahova.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8975/Screenshot%20from%202014-11-03%2017:40:49.png" style="border-style: solid; border-width: 1px; height: 262px; width: 448px;"></p> + +<h3 id="Képek">Képek</h3> + +<p>Keressünk felhasználható képeket az Interneten (pl. Google Képek segítségével).</p> + +<ol> + <li>Az egyes képekre kattintva egy előnézetet kapunk, egyéb adatokkal (pl. felbontás)</li> + <li>Mentsük el a képet a számítógépre.</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16599/updated-google-images.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>Ne feledjük, hogy a legtöbb kép, így azok is, amelyeket a Google keresőjén keresztül találunk, jogvédettek. Használjuk a kereső licensz szűrőjét, hogy csökkentsük a szerzői jogok megsértésének valószínűségét.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16598/updated-google-images-licensing.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<h3 id="Betűtípus">Betűtípus</h3> + +<p>Látogassunk el a <a href="http://www.google.com/fonts">Google Fonts</a> oldalra és keressünk egy nekünk tetsző betűtípust. Használjuk a szűrőbeállításokat a keresés megkönnyítésére.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13871/font1.png" style=""></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13873/font2.png" style="border-style: solid; border-width: 1px; height: 608px; width: 600px;"></p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</p> + +<h2 id="Modul_tartalomjegyzék">Modul tartalomjegyzék</h2> + +<ul> + <li id="Installing_basic_software"><a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a></li> + <li id="What_will_your_website_look_like"><a href="/en-US/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">What will your website look like?</a></li> + <li id="Dealing_with_files"><a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a></li> + <li id="HTML_basics"><a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a></li> + <li id="CSS_basics"><a href="/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a></li> + <li id="JavaScript_basics"><a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript basics</a></li> + <li id="Publishing_your_website"><a href="/en-US/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your website</a></li> + <li id="How_the_web_works"><a href="/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a></li> +</ul> diff --git a/files/hu/learn/ismerkedés_a_világhálóval/index.html b/files/hu/learn/ismerkedés_a_világhálóval/index.html new file mode 100644 index 0000000000..38c28abba1 --- /dev/null +++ b/files/hu/learn/ismerkedés_a_világhálóval/index.html @@ -0,0 +1,60 @@ +--- +title: Ismerkedés a Világhálóval +slug: Learn/Ismerkedés_a_Világhálóval +tags: + - CSS + - HTML + - Kezdő + - útmutató +translation_of: Learn/Getting_started_with_the_web +--- +<div>{{LearnSidebar}}</div> + +<div class="summary"> +<p>Az Ismerkedés a Világhálóval egy rövid cikksorozat, amelyben a webfejlesztés gyakorlati mibenlétét mutatjuk be. Áttekintjük a szükséges eszközöket, írunk egy egyszerű weboldalt és publikáljuk a munkánkat.</p> +</div> + +<h2 id="Első_weboldalunk_születése">Első weboldalunk születése</h2> + +<p>Egy professzionális weboldal elkészítése rengeteg munka, így a tanulást mindenképpen kicsiben érdemes kezdeni. Nem fogunk rögtön egy újabb Facebookot írni, de egy egyszerű weboldal elkészítése meglepően könnyű feladat, úgyhogy ezzel indítunk.</p> + +<p>Az alábbi cikkek úgy vannak összeállítva, hogy sorban haladva segítsenek minket megírni és közzétenni első weboldalunkat, teljesen nulláról. Fogjunk hát hozzá!</p> + +<h3 id="Alapvető_programok_telepítése"><a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Alapvető programok telepítése</a></h3> + +<p>Számtalan program és eszköz áll rendelkezésre a weboldalak fejlesztéséhez és teszteléséhez. Az <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a> cikkben segítünk eligazodni ezek között és bemutatjuk a kezdés szempontjából legfontosabb eszközöket.</p> + +<h3 id="Hogy_fog_kinézni_a_weboldalunk"><a href="/en-US/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Hogy fog kinézni a weboldalunk?</a></h3> + +<p>Mielőtt nekilátunk a weboldalunk lekódolásának, meg kell terveznünk azt. Milyen tartalmat akarunk pontosan megjeleníteni? Milyen betűtípust és színeket akarunk használni? A <a href="/en-US/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">What will your website look like?</a> cikkben lépésről lépésre végigvezetünk egy alapvető tervezési folyamaton.</p> + +<h3 id="Fájlokkal_való_munka"><a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Fájlokkal való munka</a></h3> + +<p>Egy weboldal sok-sok különféle fájlból áll: szöveges fájlok, programkód, síluslapok, képek, videók, és még sorolhatnánk. Hogyan tudjuk ezt a sok fájlt egy összefüggő weboldallá gyúrni? És hogyan rendszerezzük a fájljainkat hatékonyan? Ezekre a kérdésekre válaszol a <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> cikk.</p> + +<h3 id="HTML_alapok"><a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML alapok</a></h3> + +<p>A HTML (Hypertext Markup Language, hiperszöveg jelölőnyelv) kód segítségével strukturálhatjuk a weboldalunk tartalmát, azaz megadhatjuk, hogy melyek a címsorok, hogy a szöveget miként tagoljuk bekezdésekre, felsorolásokra, mit kell táblázatosan megjeleníteni, hova kell képet beilleszteni és így tovább. A <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a> cikkben a legfontosabb HTML elemeket tekintjük át.</p> + +<h3 id="CSS_alapok"><a href="/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS alapok</a></h3> + +<p>A CSS (Cascading Stylesheets, lépcsőzetes stíluslapok) kód segítségével tudjuk színezni, méretezni, háttérképekkel dísziteni, pozícionálni, egyszóval formázni a weboldalunk tartalmát. A <a href="/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a> cikkben elmagyarázzuk az alapvető fogalmakat és bemutatunk néhány CSS formázási példát.</p> + +<h3 id="JavaScript_alapok"><a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript alapok</a></h3> + +<p>A JavaScript programozási nyelv teszi lehetővé, hogy dinamikus, interaktív weboldalakat hozzunk létre. Néhány példa a JavaScript alkalmazására: komplett játékok, kattintásra megjelenő elemek, űrlapok ellenőrzése, dinamikusan változó színek, animációk. A <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript basics</a> cikk ismerteti a JavaScript programozás alapjait és egy példán keresztül bemutatja, mi minden lehetséges a használatával.</p> + +<h3 id="Weboldalunk_közzététele"><a href="/en-US/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Weboldalunk közzététele</a></h3> + +<p>Miután végeztünk a weboldalunk lekódolásával, elérhetővé kell tennünk az Interneten. A <a href="/en-US/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your sample code</a> cikk bemutatja a lehetőségeinket és segít közzétenni az oldalunkat egy egyszerű módszerrel.</p> + +<h3 id="Hogy_működik_a_Világháló"><a href="/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Hogy működik a Világháló?</a></h3> + +<p>Amikor megnyitunk egy weboldalt, egy sor bonyolult folyamat zajlik a háttérben. A <a href="/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a> cikk ezeket a folyamatokat mutatja be nagyvonalakban.</p> + +<h2 id="Lásd_még">Lásd még</h2> + +<ul> + <li><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web Demystified</a>: Egy kiváló videósorozat a Világháló működéséről, teljesen kezdők részére. <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a> munkája.</li> + <li><a href="/en-US/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">The web and web standards</a>: Hasznos háttérismeretek a Világháló történetéről és működéséről, a kialakult szabványokról és a jó gyakorlatokról, valamint arról, hogy miért érdemes webfejlesztéssel foglalkozni. </li> +</ul> diff --git a/files/hu/learn/javascript/első_lépések/index.html b/files/hu/learn/javascript/első_lépések/index.html new file mode 100644 index 0000000000..7276a4541c --- /dev/null +++ b/files/hu/learn/javascript/első_lépések/index.html @@ -0,0 +1,66 @@ +--- +title: Első lépések JavaScript-ben +slug: Learn/JavaScript/Első_lépések +tags: + - Cikk + - JavaScript + - Kezdő + - Modul + - Operátorok + - Számok + - Tömbök + - Változók + - matek + - stringek + - Érkező + - Értékelés + - útmutató +translation_of: Learn/JavaScript/First_steps +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Az első JavaScript modulunkban, először válaszolunk néhány alapvető kérdésre mint például "mi a JavaScript?", "hogyan is néz ki?", és "mit is csinál?", mielőtt továbblépne az első gyakorlati tapasztalatának megszerzéséhez a JavaScript-ről. Ezután, megvitatunk néhány kulcsfontosságú épitőelemet, mint a változók, stringek, számok és tömbök.</p> + +<h2 id="Előfeltételek">Előfeltételek</h2> + +<p>A modul elkezdése előtt nem szükséges bármiféle előzetes JavaScript tudás, de ajánlott tisztában lennie a HTML- és CSS-sel. Javasoljuk, hogy nézze át a következő modulokat a JavaScript elkezdése előtt:</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Kezdjünk a Web-el</a> (ami tartalmazza az igazi <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">alap JavaScript bevetést</a>).</li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Bevezetés a HTML-be</a>.</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Bevezetés a CSS-be</a>.</li> +</ul> + +<div class="note"> +<p><strong>Jegyzet</strong>: Ha olyan számítógépen/tableten/más eszközön dolgozik, ahol nem nem tud saját fájlokat készíteni, akkor ki tudja próbálni (a legtöbb) a kód példákat egy online kódoló programmal, mint a <a href="http://jsbin.com/">JSBin</a> vagy a <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Útmutatók">Útmutatók</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">Mi a JavaScript</a></dt> + <dd>Üdvözöljük az MDN kezdő JavaScript kurzusán! Ebben az első cikkben a JavaScriptet magas szintről fogjuk megtekinteni, válaszolni kérdésekre, mint "mi ez?", és "mit csinál?", és meggyőződni arról, hogy kényelmes-e a JavaScript szándéka.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">Az első merülés a JavaScript-be</a></dt> + <dd>Most, hogy tanult valamit a JavaScript elméletéről, és hogy mit tud vele csinálni, adunk önnek egy "crash" kurzust a JavaScript alapvető tulajdonságairól egy teljes gyakorlati oktatás során. Itt el fog készíteni egy egyszerű "Találd ki a számot" játékot lépésről lépésre.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">Mi romlott el? Hibaelhárítás JavaScript-ben</a></dt> + <dd>Amikor elkészítette a "Találd ki a számot" játékot az előző cikkben, talán észrevette hogy nem működik. Sose féljen — ez a cikk arra törekszik, hogy megmentse önt a haj tépéstől az ilyen problémák miatt azzal, hogy ellátja önt néhány egyszerű tippel, hogy hogyan tudja megkeresni, és kijavítani a hibákat JavaScript programokban.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Szükséges információk tárolása - Változók</a></dt> + <dd>Az előző cikkek elolvasása után mostmár tudnia kell mi is a JavaScript, mit tud önért csinálni, hogyan használja azt más webes technológiák mellett, és mik a főbb jellemzői magasabb szintől nézve. Ebben a cikkben leereszkedünk az igazi alapokhoz, és megnézzük hogyan dolgozzunk a JavaScript legalapabb építőelemeivel — Változók.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Alapvető matematika JavaScriptben — számok és operátorok</a></dt> + <dd>A kurzus ezen pontján megvitatjuk a matematikát JavaScript-ben — hogy tudunk kombinálni operátorokat és más jellemzőket, hogy sikeresen manipuláljunk számokat parancsunk végrehajtásához.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Szöveg kezelés — stringek JavaScript-ben</a></dt> + <dd>Ezután a stringekre fordítjuk figyelmünket — ez az, amit szövegnek nevezünk a programozásban. Ebben a cikkben sorra vesszük az összes gyakori dolgot amit valóban tudnia kell a stringekről amikor JavaScript-et tanul, mint például stringet létrehozni, idézőjelek elhagyása stringben, és egyesíteni őket.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Hasznos string metódusok(eljárások)</a></dt> + <dd>Már megnéztük a stringek alapjait, lépjünk egy szinttel feljebb és kezdjünk gondolkodni arról, milyen hasznos eljárásokat tudunk végrehajtani stringeken a beépített methódusokkal, mint megkeresni a hosszát egy szövegnek, egyesíteni és szétválasztani stringeket, helyettesíteni egy karaktert egy stringben egy másikra, és még sok más.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Tömbök</a></dt> + <dd>A modul utolsó cikkében a tömböket vesszük szemügyre — elegáns módja egy lista elemeinek tárolására egy egyszerű változó név alatt. Megnézzük miért is olyan hasznos, ezután felfedezzük hogyan csináljunk tömböket, kapjunk, hozzáadjunk, és töröljünk elemeket amelyek tömbben vannak tárolva, és ezen kívül sok más.</dd> +</dl> + +<h2 id="Felmérés">Felmérés</h2> + +<p>A következő felmérés tesztelni fogja, hogy megértette a JavaScript alapjait, amelyeket a fenti útmutatóban lefedünk.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Ostoba történet generálása</a></dt> + <dd>Ebben a felmérésben tesztelve lesz, amelyben szükség lesz a tudására, amelyet elsajátított ennek a modulnak a cikkeiben, hogy ezeket felhasználva készítsen egy vicces app-ot, ami véletleszerűen generál ostoba történeteket. Jó szórakozást!</dd> +</dl> diff --git a/files/hu/learn/javascript/index.html b/files/hu/learn/javascript/index.html new file mode 100644 index 0000000000..7a81dde404 --- /dev/null +++ b/files/hu/learn/javascript/index.html @@ -0,0 +1,56 @@ +--- +title: JavaScript +slug: Learn/JavaScript +translation_of: Learn/JavaScript +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">{{Glossary("JavaScript")}} egy programozási nyelv, mely segítségével összetett dolgokat hozhatunk létre weboldalakon.— Minden alkalommal mikor a böngésző többet tesz annál hogy csak ül és néz ki a fejéből, valamint statikus információkat jeleníti meg, akkor már JavaScriptről beszélünk.</p> + +<h2 id="A_hosszú_út">A hosszú út</h2> + +<p>JavaScript vitathatatlanul nehezebb megtanulni, mint jóbarátait, <a href="/en-US/docs/Learn/HTML">HTML</a>-t és <a href="/en-US/docs/Learn/CSS">CSS</a>-t. Mielőtt nekivágnál a JavaScript tanulásának, erősen ajánlott hogy ismerd, tudd használni a fent említett web technológiákat. Kezd a következő modulok ismeretének elsajátításával:</p> + +<ul> + <li><a href="/en-US/docs/Learn/Getting_started_with_the_web">Kezdjük a webbel</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Introduction">Bevezetés a HTML-be</a></li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Bevezetés a CSS-be</a></li> +</ul> + +<p>Ha rendelkezel tapasztalatokkal előző nyelvekből, az csak előnyödre válhat.</p> + +<p>Miután megismerkedtél a JavaScript alapjaival, ajánljuk a következő haladó szintű témakörökkel, mint például.: </p> + +<ul> + <li>JavaScript mélyebben, ahogy tanultuk a <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript útmutatóban</a></li> + <li><a href="/en-US/docs/Web/API">HTML5 APIs</a></li> +</ul> + +<h2 id="Modulok">Modulok</h2> + +<p>Mostani cikkünk sorrendben tartalmazza azokat a modulokat, amiket érdemes kidolgoznod, átdolgoznod. </p> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript első lépések</a></dt> + <dd>Mielőtt belevágnál a gyakorlati tapasztalatszerzének, ebben a cikkben szeretnénk válaszolni pár alapvető kérdésre, mint például "Mi az a JavaScript?", "Hogyan is néz ki?", "Mire használhatom?". Azután, átbeszélünk néhány fontos JavaScript tulajdonságot,jellegzetességet, mint a változók (variables), stringek, számok, és tömbök (arrays).</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript épitő kockák</a></dt> + <dd>Ebben a modulban folytatjuk a JavaScript tulajdonságainak felfedezését, figyelmünket a leggyakrabban előforduló kód blokkok felé irányítjuk, többek között feltételek, állítások, loopok, függvények, és eseményekre.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects">Bevezetés a JavaScript objektumokba</a></dt> + <dd>A JavaScriptben a legtöbb dolog objektum, az alapvető JavaScript sajátosságoktól kezdve, mint például a stringek, vagy tömbök . Te is elkészítheted a saját objektumodat, objektumjaidat, amiben eltárolhatod az objektumhoz tartozó függvényeidet, változóidat. A JavaScript természetéből adódódan (Objektum orientált) fontos megértenünk, hogy az objektumok ismerete hasznos a hatékony kódok előállításához. Ebben sokat fog segíteni ez a modul. Itt megtanítjuk mindazt ami szükséges számodra az objektumok megértéséhez, többek között a szinktaktikáját, hogyan készíthetsz saját objektumot, valamint elmagyarázzuk mi is az a JSON adat, és hogyan dolgozunk vele.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Kliens oldali web API-k</a></dt> + <dd>Amikor kliens oldali JavaScriptet írsz a weboldalod vagy applikációd számára, biztos lehetsz benne hogy nem fogsz távol állni az API-k használatától - Interfészek a böngésző, valamint az operációs rendszer sajátosságainak manipulálására, vagy akár más adatok használata különböző weboldalakról. Ebben a modulban megismerkedünk az API-kal, valamint azzal, hogy mégis hogyan használjuk őket.</dd> +</dl> + +<h2 id="Gyakran_előforduló_JavaScript_hibák_megoldása">Gyakran előforduló JavaScript hibák megoldása</h2> + +<p><a href="/en-US/docs/Learn/JavaScript/Howto">Használj JavaScriptet gyakori problémák megoldására</a> cikkünk segítségével megértheted, hogyan oldhatsz meg gyakran előforduló hibákat mikor weboldalakat készítesz. </p> + +<h2 id="További_csemege">További csemege</h2> + +<h2 id="JavaScript_on_MDN"><a href="/en-US/docs/Web/JavaScript" style="font-size: 14px;">JavaScript on MDN</a></h2> + +<dl> + <dd>Ütőkártya a JavaScript magjának felkutatására. Itt elég jól kiterjesztett dokumentációt találhatsz minden tulajdonságra, aspektusra, és néhány haladó szintű cikk is jó szívvel említi, és beszél róla.</dd> + <dt><a href="https://www.youtube.com/user/codingmath">Coding math</a></dt> + <dd>Hasznos videó alapú gyakorlatok <a href="https://twitter.com/bit101">Keith Peters</a> által, melyek megtanítják azt a matematikát, amit meg kell értened hogy hatékony programozó váljon belőled.</dd> +</dl> diff --git a/files/hu/learn/server-side/index.html b/files/hu/learn/server-side/index.html new file mode 100644 index 0000000000..8fcc639d2c --- /dev/null +++ b/files/hu/learn/server-side/index.html @@ -0,0 +1,59 @@ +--- +title: Server-side website programming +slug: Learn/Server-side +tags: + - Beginner + - CodingScripting + - Intro + - Landing + - Learn + - NeedsTranslation + - Server + - Server-side programming + - Topic + - TopicStub +translation_of: Learn/Server-side +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">The <strong><em>Dynamic Websites </em></strong>–<em><strong> Server-side programming</strong></em> topic is a series of modules that show how to create dynamic websites; websites that deliver customised information in response to HTTP requests. The modules provide a general introduction to server-side programming, along with specific beginner-level guides on how to use the Django (Python) and Express (Node.js/JavaScript) web frameworks to create basic applications.</p> + +<p>Most major websites use some kind of server-side technology to dynamically display data as required. For example, imagine how many products are available on Amazon, and imagine how many posts have been written on Facebook. Displaying all of these using different static pages would be extremely inefficient, so instead such sites display static templates (built using <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>), and then dynamically update the data displayed inside those templates when needed, such as when you want to view a different product on Amazon.</p> + +<p>In the modern world of web development, learning about server-side development is highly recommended.</p> + +<h2 id="Learning_pathway">Learning pathway</h2> + +<p>Getting started with server-side programming is usually easier than client-side development, because dynamic websites tend to perform a lot of very similar operations (retrieving data from a database and displaying it in a page, validating user-entered data and saving it in a database, checking user permissions and logging users in, etc.), and are constructed using web frameworks that make these and other common web server operations easy.</p> + +<p>Basic knowledge of programming concepts (or of a particular programming language) is useful, but not essential. Similarly, expertise in client-side coding is not required, but a basic knowledge will help you work better with the developers creating your client-side web "front end".</p> + +<p>You will need to understand "how the web works". We recommend that you first read the following topics:</p> + +<ul> + <li><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">What is a web server</a></li> + <li><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">What software do I need to build a website?</a></li> + <li><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">How do you upload files to a web server?</a></li> +</ul> + +<p>With that basic understanding, you'll be ready to work your way through the modules in this section. </p> + +<h2 id="Modules">Modules</h2> + +<p>This topic contains the following modules. You should start with the first module, then go on to one of the following modules, which show how to work with two very popular server-side languages using appropriate web frameworks. </p> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a></dt> + <dd>This module provides technology-agnostic information about server-side website programming such as "what is it?", "how does it differ from client-side programming?", and "why is it useful?". This module also outlines some of the more popular server-side web frameworks and gives guidance on how to select the best one for your site. Lastly, an introduction to web server security is provided.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django">Django Web Framework (Python)</a></dt> + <dd>Django is an extremely popular and fully featured server-side web framework, written in Python. The module explains why Django is such a good web server framework, how to set up a development environment and how to perform common tasks with it.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a></dt> + <dd>Express is a popular web framework, written in JavaScript and hosted within the node.js runtime environment. The module explains some of the key benefits of this framework, how to set up your development environment and how to perform common web development and deployment tasks.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/Node_server_without_framework">Node server without framework</a></dt> + <dd>This article provides a simple static file server built with pure Node.js, for those of you not wanting to use a framework.</dd> +</dl> |