diff options
| author | Ryan Johnson <rjohnson@mozilla.com> | 2021-04-29 16:16:42 -0700 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-04-29 16:16:42 -0700 |
| commit | 95aca4b4d8fa62815d4bd412fff1a364f842814a (patch) | |
| tree | 5e57661720fe9058d5c7db637e764800b50f9060 /files/fa/learn/getting_started_with_the_web | |
| parent | ee3b1c87e3c8e72ca130943eed260ad642246581 (diff) | |
| download | translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2 translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip | |
remove retired locales (#699)
Diffstat (limited to 'files/fa/learn/getting_started_with_the_web')
8 files changed, 0 insertions, 1382 deletions
diff --git a/files/fa/learn/getting_started_with_the_web/css_basics/index.html b/files/fa/learn/getting_started_with_the_web/css_basics/index.html deleted file mode 100644 index 476aa382b9..0000000000 --- a/files/fa/learn/getting_started_with_the_web/css_basics/index.html +++ /dev/null @@ -1,285 +0,0 @@ ---- -title: CSS basics -slug: Learn/Getting_started_with_the_web/CSS_basics -translation_of: Learn/Getting_started_with_the_web/CSS_basics ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</div> - -<div class="summary"> -<p>CSS (Cascading Style Sheets) is the code you use to style your webpage. <em>CSS basics</em> takes you through what you need to get started. We'll answer questions like: How do I make my text black or red? How do I make my content show up in such-and-such a place on the screen? How do I decorate my webpage with background images and colors?</p> -</div> - -<h2 id="So_what_is_CSS_really">So what is CSS, really?</h2> - -<p>Like HTML, CSS is not really a programming language. It is not a <em>markup language</em> either — it is a <em>style sheet language</em>. This means that it lets you apply styles selectively to elements in HTML documents. For example, to select <strong>all</strong> the paragraph elements on an HTML page and turn the text within them red, you'd write this CSS:</p> - -<pre class="brush: css">p { - color: red; -}</pre> - -<p>Let's try it out: paste those three lines of CSS into a new file in your text editor, and then save the file as <code>style.css</code> in your <code>styles</code> directory.</p> - -<p>But we still need to apply the CSS to your HTML document. Otherwise, the CSS styling won't affect how your browser displays the HTML document. (If you haven't been following on with our project, read <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> and <a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a> to find out what you need to do first.)</p> - -<ol> - <li>Open your <code>index.html</code> file and paste the following line somewhere in the head (that is, between the {{HTMLElement("head")}} and <code></head></code> tags): - - <pre class="brush: html"><link href="styles/style.css" rel="stylesheet"></pre> - </li> - <li>Save <code>index.html</code> and load it in your browser. You should see something like this:</li> -</ol> - -<p><img alt="A mozilla logo and some paragraphs. The paragraph text has been styled red by our css." src="https://mdn.mozillademos.org/files/9435/website-screenshot-styled.png" style="display: block; height: 832px; margin: 0px auto; width: 711px;">If your paragraph text is now red, congratulations! You've just written your first successful CSS.</p> - -<h3 id="Anatomy_of_a_CSS_ruleset">Anatomy of a CSS ruleset</h3> - -<p>Let's look at the above CSS in a bit more detail:</p> - -<p><img alt="CSS p declaration color red" src="https://mdn.mozillademos.org/files/9461/css-declaration-small.png" style="display: block; height: 480px; margin: 0px auto; width: 850px;"></p> - -<p>The whole structure is called a <strong>rule set </strong>(but often "rule" for short). Note the names of the individual parts:</p> - -<dl> - <dt>Selector</dt> - <dd>The HTML element name at the start of the rule set. It selects the element(s) to be styled (in this case, {{HTMLElement("p")}} elements). To style a different element, just change the selector.</dd> - <dt>Declaration</dt> - <dd>A single rule like <code>color: red;</code> specifying which of the element's <strong>properties</strong><strong> </strong>you want to style.</dd> - <dt>Properties</dt> - <dd>Ways in which you can style a given HTML element. (In this case, <code>color</code> is a property of the {{htmlelement("p")}} elements.) In CSS, you choose which properties you want to affect in your rule.</dd> - <dt>Property value</dt> - <dd>To the right of the property, after the colon, we have the <strong>property value</strong>, which chooses one out of many possible appearances for a given property (there are many <code>color</code> values besides <code>red</code>).</dd> -</dl> - -<p>Note the other important parts of the syntax:</p> - -<ul> - <li>Each rule set (apart from the selector) must be wrapped in curly braces (<code>{}</code>).</li> - <li>Within each declaration, you must use a colon (<code>:</code>) to separate the property from its values.</li> - <li>Within each rule set, you must use a semicolon (<code>;</code>) to separate each declaration from the next one.</li> -</ul> - -<p>So to modify multiple property values at once, you just need to write them separated by semicolons, like this:</p> - -<pre class="brush: css">p { - color: red; - width: 500px; - border: 1px solid black; -}</pre> - -<h3 id="Selecting_multiple_elements">Selecting multiple elements</h3> - -<p>You can also select multiple types of elements and apply a single rule set to all of them. Multiple selectors are separated by commas. For example:</p> - -<pre class="brush: css">p, li, h1 { - color: red; -}</pre> - -<h3 id="Different_types_of_selectors">Different types of selectors</h3> - -<p>There are many different types of selectors. Above, we only looked at <strong>element selectors</strong>, which select all elements of a given type in the given HTML documents. But we can make more specific selections than that. Here are some of the more common types of selectors:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Selector name</th> - <th scope="col">What does it select</th> - <th scope="col">Example</th> - </tr> - </thead> - <tbody> - <tr> - <td>Element selector (sometimes called a tag or type selector)</td> - <td>All HTML element(s) of the specified type.</td> - <td><code>p</code><br> - Selects <code><p></code></td> - </tr> - <tr> - <td>ID selector</td> - <td>The element on the page with the specified ID. On a given HTML page, it's best practice to use one element per ID (and of course one ID per element) even though you are allowed to use same ID for multiple elements.</td> - <td><code>#my-id</code><br> - Selects <code><p id="my-id"></code> and <code><a id="my-id"></code></td> - </tr> - <tr> - <td>Class selector</td> - <td>The element(s) on the page with the specified class (multiple class instances can appear on a page).</td> - <td><code>.my-class</code><br> - Selects <code><p class="my-class"></code> and <code><a class="my-class"></code></td> - </tr> - <tr> - <td>Attribute selector</td> - <td>The element(s) on the page with the specified attribute.</td> - <td><code>img[src]</code><br> - Selects <code><img src="myimage.png"></code> but not <code><img></code></td> - </tr> - <tr> - <td>Pseudo-class selector</td> - <td>The specified element(s), but only when in the specified state (e.g. being hovered over).</td> - <td><code>a:hover</code><br> - Selects <code><a></code>, but only when the mouse pointer is hovering over the link.</td> - </tr> - </tbody> -</table> - -<p>There are many more selectors to explore, and you can find a more detailed list in our <a href="/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">Selectors guide</a>.</p> - -<h2 id="Fonts_and_text">Fonts and text</h2> - -<p>Now that we've explored some CSS basics, let's start adding some more rules and information to our <code>style.css</code> file to make our example look nice. Let's start by getting our fonts and text to look a little better.</p> - -<ol> - <li>First of all, go back and find the <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Font">output from Google Fonts</a> that you stored somewhere safe. Add the {{htmlelement("link")}} element somewhere inside your <code>index.html</code>'s head (again, anywhere between the {{HTMLElement("head")}} and <code></head></code> tags). It'll look something like this: - - <pre class="brush: html"><link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"></pre> - This code links your page to a stylesheet that downloads the Open Sans font family along with your web page and enables you to set it on your HTML elements using your own style sheet.</li> - <li>Next, delete the existing rule you have in your <code>style.css</code> file. It was a good test, but red text doesn't actually look very good.</li> - <li>Add the following lines in its place, replacing the placeholder line with the actual <code>font-family</code> line you got from Google Fonts. (<code>font-family</code> just means the font(s) you want to use for your text.) This rule first sets a global base font and font size for the whole page (since {{HTMLElement("html")}} is the parent element of the whole page, and all elements inside it inherit the same <code>font-size</code> and <code>font-family</code>): - <pre class="brush: css">html { - font-size: 10px; /* px means "pixels": the base font size is now 10 pixels high */ - font-family: "Open Sans", sans-serif; /* this should be the rest of the output you got from Google fonts */ -}</pre> - - <div class="note"> - <p><strong>Note</strong>: Anything in a CSS document between <code>/*</code> and <code>*/</code> is a <strong>CSS comment</strong>, which the browser ignores when it renders the code. This is a place for you to write helpful notes on what you are doing.</p> - </div> - </li> - <li>Now we'll set font sizes for text-containing elements inside the HTML body ({{htmlelement("h1")}}, {{htmlelement("li")}}, and {{htmlelement("p")}}). We'll also center the text of our heading and set some line height and letter spacing on the body content to make it a bit more readable: - <pre class="brush: css">h1 { - font-size: 60px; - text-align: center; -} - -p, li { - font-size: 16px; - line-height: 2; - letter-spacing: 1px; -}</pre> - </li> -</ol> - -<p>You can adjust these <code>px</code> values to whatever you like to get your design looking how you want, but in general your design should look like this:</p> - -<p><img alt="a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered" src="https://mdn.mozillademos.org/files/9447/website-screenshot-font-small.png" style="display: block; height: 1020px; margin: 0px auto; width: 921px;"></p> - -<h2 id="Boxes_boxes_its_all_about_boxes">Boxes, boxes, it's all about boxes</h2> - -<p>One thing you'll notice about writing CSS is that a lot of it is about boxes — setting their size, color, position, etc. Most of the HTML elements on your page can be thought of as boxes sitting on top of each other.</p> - -<p><img alt="a big stack of boxes or crates sat on top of one another" src="https://mdn.mozillademos.org/files/9441/boxes.jpg" style="display: block; height: 463px; margin: 0px auto; width: 640px;"></p> - -<p>Not surprisingly, CSS layout is based principally on the <em>box model. </em>Each of the blocks taking up space on your page has properties like this:</p> - -<ul> - <li><code>padding</code>, the space just around the content (e.g., around paragraph text).</li> - <li><code>border</code>, the solid line that sits just outside the padding.</li> - <li><code>margin</code>, the space around the outside of the element.</li> -</ul> - -<p><img alt="three boxes sat inside one another. From outside to in they are labelled margin, border and padding" src="https://mdn.mozillademos.org/files/9443/box-model.png" style="display: block; height: 450px; margin: 0px auto; width: 574px;"></p> - -<p>In this section we also use:</p> - -<ul> - <li><code>width</code> (of an element).</li> - <li><code>background-color</code>, the color behind an element's content and padding.</li> - <li><code>color</code>, the color of an element's content (usually text).</li> - <li><code>text-shadow</code>: sets a drop shadow on the text inside an element.</li> - <li><code>display</code>: sets the display mode of an element (don't worry about this yet).</li> -</ul> - -<p>So, let's get started and add some more CSS to our page! Keep adding these new rules to the bottom of the page, and don't be afraid to experiment with changing values to see how it turns out.</p> - -<h3 id="Changing_the_page_color">Changing the page color</h3> - -<pre class="brush: css">html { - background-color: #00539F; -}</pre> - -<p>This rule sets a background color for the whole page. Change the color code above to whatever color <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Theme_color">you chose when planning your site</a>.</p> - -<h3 id="Sorting_the_body_out">Sorting the body out</h3> - -<pre class="brush: css">body { - width: 600px; - margin: 0 auto; - background-color: #FF9500; - padding: 0 20px 20px 20px; - border: 5px solid black; -}</pre> - -<p>Now for the {{htmlelement("body")}} element. There are quite a few declarations here, so let's go through them all one by one:</p> - -<ul> - <li><code>width: 600px;</code> — this forces the body to always be 600 pixels wide.</li> - <li><code>margin: 0 auto;</code> — When you set two values on a property like <code>margin</code> or <code>padding</code>, the first value affects the element's top <strong>and</strong> bottom side (make it <code>0</code> in this case), and the second value the left <strong>and</strong> right side (here, <code>auto</code> is a special value that divides the available horizontal space evenly between left and right). You can also use one, three, or four values, as documented <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin#Syntax">here</a>.</li> - <li><code>background-color: #FF9500;</code> — as before, this sets the element's background color. We've used a sort of reddish orange for the body as opposed to dark blue for the {{htmlelement("html")}} element, but feel free to go ahead and experiment.</li> - <li><code>padding: 0 20px 20px 20px;</code> — we have four values set on the padding, to make a bit of space around our content. This time we are setting no padding on the top of the body, and 20 pixels on the left, bottom and right. The values set top, right, bottom, left, in that order. As with <code>margin</code>, you can also use one, two or three values, as documented on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding#Syntax">padding syntax</a>.</li> - <li><code>border: 5px solid black;</code> — this takes values for the width, style and color of the border, in our case simply setting a 5-pixel–wide, solid black border on all sides of the body.</li> -</ul> - -<h3 id="Positioning_and_styling_our_main_page_title">Positioning and styling our main page title</h3> - -<pre class="brush: css">h1 { - margin: 0; - padding: 20px 0; - color: #00539F; - text-shadow: 3px 3px 1px black; -}</pre> - -<p>You may have noticed there's a horrible gap at the top of the body. That happens because browsers apply some <strong>default styling</strong> to the {{htmlelement("h1")}} element (among others), even when you haven't applied any CSS at all! That might sound like a bad idea, but we want even an unstyled webpage to have basic readability. To get rid of the gap we overrode the default styling by setting <code>margin: 0;</code>.</p> - -<p>Next up, we've set the heading's top and bottom padding to 20 pixels, and made the heading text the same color as the HTML background color.</p> - -<p>One rather interesting property we've used here is <code>text-shadow</code>, which applies a text shadow to the text content of the element. Its four values are as follows:</p> - -<ul> - <li>The first pixel value sets the <strong>horizontal offset</strong> of the shadow from the text — how far it moves across: a negative value should move it to the left.</li> - <li>The second pixel value sets the <strong>vertical offset</strong> of the shadow from the text — how far it moves down, in this example; a negative value should move it up.</li> - <li>The third pixel value sets the <strong>blur radius</strong> of the shadow — a bigger value will mean a more blurry shadow.</li> - <li>The fourth value sets the base color of the shadow.</li> -</ul> - -<p>Again, try experimenting with different values to see what you can come up with!</p> - -<h3 id="Centering_the_image">Centering the image</h3> - -<pre class="brush: css">img { - display: block; - margin: 0 auto; -}</pre> - -<p>Finally, we'll center the image to make it look better. We could use the <code>margin: 0 auto</code> trick again as we did earlier for the body, but we also need to do something else. The {{htmlelement("body")}} element is <strong>block level</strong>, meaning it takes up space on the page and can have margin and other spacing values applied to it. Images, on the other hand, are <strong>inline</strong> elements, meaning they can't. So to apply margins to the image, we have to give the image block-level behavior using <code>display: block;</code>.</p> - -<div class="note"> -<p><strong>Note</strong>: The instructions above assume that you're using an image smaller than the width set on the body (600 pixels). If your image is larger, then it will overflow the body and spill out to the rest of the page. To rectify this, you can either 1) reduce the image's width using a <a href="https://en.wikipedia.org/wiki/Raster_graphics_editor">graphics editor</a>, or 2) size the image using CSS by setting the {{cssxref("width")}} property on the <code><img></code> element with a smaller value (e.g., <code>400 px;</code>).</p> -</div> - -<div class="note"> -<p><strong>Note</strong>: Don't worry if you don't yet understand <code>display: block;</code> and the block-level/inline distinction. You will as you study CSS in more depth. You can find out more about the different available display values at our <a href="/en-US/docs/Web/CSS/display">display reference page</a>.</p> -</div> - -<h2 id="Conclusion">Conclusion</h2> - -<p>If you have followed all the instructions in this article, you should end up with a page that looks something like this (you can also <a href="http://mdn.github.io/beginner-html-site-styled/">view our version here</a>):</p> - -<p><img alt="a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip." src="https://mdn.mozillademos.org/files/9455/website-screenshot-final.png" style="display: block; height: 1084px; margin: 0px auto; width: 940px;"></p> - -<p>If you get stuck, you can always compare your work with our <a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">finished example code on GitHub</a>.</p> - -<p>Here, we have only really scratched the surface of CSS. To find out more, go to our <a href="https://developer.mozilla.org/en-US/Learn/CSS">CSS Learning topic</a>.</p> - -<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</p> - -<h2 id="In_this_module">In this module</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/fa/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/fa/learn/getting_started_with_the_web/dealing_with_files/index.html deleted file mode 100644 index 909367a03f..0000000000 --- a/files/fa/learn/getting_started_with_the_web/dealing_with_files/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: سر و کله زدن با فایل ها -slug: Learn/Getting_started_with_the_web/Dealing_with_files -translation_of: Learn/Getting_started_with_the_web/Dealing_with_files ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</div> - -<div class="summary" dir="rtl"> -<p> یک وب سایت شامل فایل های زیادی است : مانند محتوای متنی,کد ها,صفحه بندی ها ,محتوای رسانه ای و موارد دیگر .<br> - وقتی شما در حال ساختن یک وب سایت هستید,شما باید تمام این فایل ها و محتوا را در یک ساختار درست و منطقی در رایانه خودتان بکار ببرید و مطمئن شوید که با یک دیگر ارتباط برقرار می کنند و تمام محتوا درست به نظر می رسند , قبل از اینکه به آن ها را به سرور اصلی آپلود کنید. <br> - سر و کله زدن با فایل ها ممکن است مشکلاتی به وجود بیاورد بنابرین شما باید آگاهانه یک ساختار محتاطانه برای خود درست کنید که مشکلات کمتری ظاهر شوند.</p> -</div> - -<h2 dir="rtl" id="وب_سایت_شما_باید_در_کجای_رایانه_قرار_بگیرد؟">وب سایت شما باید در کجای رایانه قرار بگیرد؟</h2> - -<p dir="rtl"> وقتی شما به صورت محلی(در رایانه خودتان) مشغول کار بر روی سایتی هستید,شما باید تمام فایل های مرتبط با سایت شما باید در یک پوشه جمع آوری و نگهداری شوند که ساختار فایل سایت شما را در سرور شامل میشود.<br> - این پوشه می تواند در هر جایی قرار بگیرد ولی توصیه می شود که در مکانی که به راحتی قابل دسترس باشد قرار بگیرد مثل دسکتاپ و ....</p> - -<ol dir="rtl"> - <li>یک مکان برای ذخیره سازی پروژه سایت خود انتخاب کنید.در آنجا یک پوشه جدید به نام پروژه-وب یا چیزی شبیه آن انتخاب کنید. این جایی است که پروژه وب سایت شما ساخته می شود.</li> - <li>در پوشه اول (پروژه-وب) یک پوشه دیگر برای ذخیره سازی اولین سایت خود ایجاد کنید به نام سایت-آزمایشی یا چیزی شبیه آن.</li> -</ol> - -<h2 dir="rtl" id="قرار_دادن_جای_خالی_را_کنار_بگذارید">قرار دادن جای خالی را کنار بگذارید</h2> - -<p dir="rtl">شما در حین مطالعه این مقاله متوجه می شوید که در انتخاب نام پوشه و فایل هایتان باید از حروف کوچک و بدون فاصله (space) و جای خالی استفاده کنید.</p> - -<ol dir="rtl"> - <li>بسیاری از رایانه ها بخصوص رایانه های سرور به حروف حساس اند . برای مثال اگر شما عکسی را در سایتتان قرار دهید test-site/MyImage.jpg و بعدا در در فایل دیگری بخواهید از ان استفاده کنید مثل test-site/myimage.jpg ممکن است که کار نکند.</li> - <li>مرورگرها,وب سرور ها, زبان های برنامه نویسی نمی توانند جای خالی (space) را پردازش کنند. برای مثال اگر شما از جای خالی در نامگذاری فایل هایتان استفاده کرده باشد بعضی از سیستم ها ان را به عنوان دو فایل جدا گانه در نظر می گیرند. بعضی از سرور ها ان را با %20 (کد کاراکتر space در url) جایگزین می کنند که باعث خرابی می شود .بهتر است از - به جای space استفاده کنید مثل <code>my-file.html </code>یا <code>my_file.html (خط تیره از اندر لاین بهتر است)</code></li> -</ol> - - - -<p dir="rtl">کوتاه ترین جواب این است که از خط تیره برای اسم فایل های خود استفاده کنید . موتور جست و جوی گوگل خط تیره را به عنوان جدا کننده کلمه به حساب می آورد ولی با آندرلاین اینگونه برخورد نمی کند . برای همین دلایل بهتر است عادت کنیم که نام فایل ها و فولدر ها را با حروف کوچک و بدون فاصله و با جداکننده خط تیره بنویسیم . حداقل حالا که می دونید چه کار می کنید . این راه شما را در آینده در این مسیر با مشکلات کمتری مواجه خواهد کرد .</p> - -<h2 dir="rtl" id="ساختار_وب_سایت_شما_چگونه_باید_باشد؟">ساختار وب سایت شما چگونه باید باشد؟</h2> - -<p dir="rtl"></p> - -<ol> - <li><code><strong>index.html</strong></code>: This file will generally contain your homepage content, that is, the text and images that people see when they first go to your site. Using your text editor, create a new file called <code>index.html</code> and save it just inside your <code>test-site</code> folder.</li> - <li><strong><code>images</code> folder</strong>: This folder will contain all the images that you use on your site. Create a folder called <code>images</code>, inside your <code>test-site</code> folder.</li> - <li><strong><code>styles</code> folder</strong>: This folder will contain the CSS code used to style your content (for example, setting text and background colors). Create a folder called <code>styles</code>, inside your <code>test-site</code> folder.</li> - <li><strong><code>scripts</code> folder</strong>: This folder will contain all the JavaScript code used to add interactive functionality to your site (e.g. buttons that load data when clicked). Create a folder called <code>scripts</code>, inside your <code>test-site</code> folder.</li> -</ol> - -<div class="note"> -<p><strong>Note</strong>: On Windows computers, you might have trouble seeing the file names, because Windows has an annoying option called <strong>Hide extensions for known file types</strong> turned on by default. Generally you can turn this off by going to Windows Explorer, selecting the <strong>Folder options...</strong> option, unchecking the <strong>Hide extensions for known file types</strong> checkbox, then clicking <strong>OK</strong>. For more specific information covering your version of Windows, do a Yahoo search!</p> -</div> - -<h2 id="File_paths">File paths</h2> - -<p>To make files talk to one another, you have to provide a file path between them — basically a route so one file knows where another one is. To demonstrate this, we will insert a little bit of HTML into our <code>index.html</code> file, and make it display the image you chose in the article <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">"What will your website look like?"</a></p> - -<ol> - <li>Copy the image you chose earlier into your <code>images</code> folder.</li> - <li>Open up your <code>index.html</code> file, and insert the following code into the file exactly as shown. Don't worry about what it all means for now — we'll look at the structures in more detail later in the series. - <pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>My test page</title> - </head> - <body> - <img src="" alt="My test image"> - </body> -</html> </pre> - </li> - <li>The line <code><img src="" alt="My test image"></code> is the HTML code that inserts an image into the page. We need to tell the HTML where the image is. The image is inside the <em>images</em> directory, which is in the same directory as <code>index.html</code>. To walk down the file structure from <code>index.html</code> to our image, the file path we'd need is <code>images/your-image-filename</code>. For example, our image is called <code>firefox-icon.png</code>, so the file path is <code>images/firefox-icon.png</code>.</li> - <li>Insert the file path into your HTML code between the double quote marks of the <code>src=""</code> code.</li> - <li>Save your HTML file, then load it in your web browser (double-click the file). You should see your new webpage displaying your image!</li> -</ol> - -<p><img alt="A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world" src="https://mdn.mozillademos.org/files/9229/website-screenshot.png" style="display: block; height: 542px; margin: 0px auto; width: 690px;"></p> - -<p>Some general rules for file paths:</p> - -<ul> - <li>To link to a target file in the same directory as the invoking HTML file, just use the filename, e.g. <code>my-image.jpg</code>.</li> - <li>To reference a file in a subdirectory, write the directory name in front of the path, plus a forward slash, e.g. <code>subdirectory/my-image.jpg</code>.</li> - <li>To link to a target file in the directory <strong>above</strong> the invoking HTML file, write two dots. So for example, if <code>index.html</code> was inside a subfolder of <code>test-site</code> and <code>my-image.jpg</code> was inside <code>test-site</code>, you could reference <code>my-image.jpg</code> from <code>index.html</code> using <code>../my-image.jpg</code>.</li> - <li>You can combine these as much as you like, for example <code>../subdirectory/another-subdirectory/my-image.jpg</code>.</li> -</ul> - -<p>For now, this is about all you need to know.</p> - -<div class="note"> -<p><strong>Note</strong>: The Windows file system tends to use backslashes, not forward slashes, e.g. <code>C:\windows</code>. This doesn't matter in HTML — even if you are developing your web site on Windows, you should still use forward slashes in your code.</p> -</div> - -<h2 id="What_else_should_be_done">What else should be done?</h2> - -<p>That is about it for now. Your folder structure should look something like this:</p> - -<p><img alt="A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file" src="https://mdn.mozillademos.org/files/9231/file-structure.png" style="display: block; height: 577px; margin: 0px auto; width: 929px;"></p> - -<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/fa/learn/getting_started_with_the_web/html_basics/index.html b/files/fa/learn/getting_started_with_the_web/html_basics/index.html deleted file mode 100644 index 7369897a74..0000000000 --- a/files/fa/learn/getting_started_with_the_web/html_basics/index.html +++ /dev/null @@ -1,228 +0,0 @@ ---- -title: HTML basics -slug: Learn/Getting_started_with_the_web/HTML_basics -translation_of: Learn/Getting_started_with_the_web/HTML_basics ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</div> - -<div class="summary"> -<p dir="rtl">اچ تی ام ال (زبان نشانه گذاری ابرمتن) کدی است که از آن برای ساختن یک صفحه وب و محتوای آن استفاده میشود. به طور مثال، محتوا را میتوان در مجموعه ای از پاراگرافها، لیست ها یا با استفاده از تصاویر و جداول داده ساختاربندی کرد. همانطور که عنوان نشان میدهد، این مقاله به شما یک درک اولیه از HTML و عملکرد آن خواهد داد.</p> -</div> - -<h2 id="So_what_is_HTML_really">So what is HTML, really?</h2> - -<p>HTML is not a programming language; it is a <em>markup language</em> that defines the structure of your content. HTML consists of a series of <strong>{{Glossary("element", "elements")}}</strong>, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing {{Glossary("tag", "tags")}} can make a word or image hyperlink to somewhere else, can italicize words, and can make font bigger or smaller, and so on. For example, take the following line of content:</p> - -<pre>My cat is very grumpy</pre> - -<p>If we wanted the line to stand by itself, we could specify that it is a paragraph by enclosing it in paragraph tags:</p> - -<pre class="brush: html"><p>My cat is very grumpy</p></pre> - -<h3 id="Anatomy_of_an_HTML_element">Anatomy of an HTML element</h3> - -<p>Let's explore this paragraph element a bit further.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p> - -<p>The main parts of our element are:</p> - -<ol> - <li><strong>The opening tag:</strong> This consists of the name of the element (in this case, p), wrapped in opening and closing <strong>angle brackets</strong>. This states where the element begins, or starts to take effect — in this case where the paragraph begins.</li> - <li><strong>The closing tag:</strong> This is the same as the opening tag, except that it includes a <em>forward slash</em> before the element name. This states where the element ends — in this case where the end of the paragraph is. Failing to include a closing tag is one of the common beginner errors and can lead to strange results.</li> - <li><strong>The content:</strong> This is the content of the element, which in this case is just text.</li> - <li><strong>The element:</strong> The opening tag, the closing tag, and the content together comprise the element.</li> -</ol> - -<p>Elements can also have attributes, which look like this:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p> - -<p>Attributes contain extra information about the element that you don't want to appear in the actual content. Here, <code>class</code> is the attribute <em>name</em>, and <code>editor-note</code> is the attribute <em>value</em>. The <code>class</code> attribute allows you to give the element an identifier that can be later used to target the element with style information and other things.</p> - -<p>An attribute should always have:</p> - -<ol> - <li>A space between it and the element name (or the previous attribute, if the element already has one or more attributes).</li> - <li>The attribute name, followed by an equals sign.</li> - <li>Opening and closing quote marks wrapped around the attribute value. </li> -</ol> - -<h3 id="Nesting_elements">Nesting elements</h3> - -<p>You can put elements inside other elements too — this is called <strong>nesting</strong>. If we wanted to state that our cat is <strong>very</strong> grumpy, we could wrap the word "very" in a {{htmlelement("strong")}} element, which means that the word is to be strongly emphasized:</p> - -<pre class="brush: html"><p>My cat is <strong>very</strong> grumpy.</p></pre> - -<p>You do however need to make sure that your elements are properly nested: in the example above we opened the {{htmlelement("p")}} element first, then the {{htmlelement("strong")}} element, therefore we have to close the {{htmlelement("strong")}} element first, then the {{htmlelement("p")}}. The following is incorrect:</p> - -<pre class="example-bad brush: html"><p>My cat is <strong>very grumpy.</p></strong></pre> - -<p>The elements have to open and close correctly so that they are clearly inside or outside one another. If they overlap like above, then your web browser will try to make a best guess at what you were trying to say, which can lead to unexpected results. So don't do it!</p> - -<h3 id="Empty_elements">Empty elements</h3> - -<p>Some elements have no content, and are called <strong>empty elements</strong>. Take the {{htmlelement("img")}} element we already have in our HTML:</p> - -<pre class="brush: html"><img src="images/firefox-icon.png" alt="My test image"></pre> - -<p>This contains two attributes, but there is no closing <code></img></code> tag, and no inner content. This is because an image element doesn't wrap content to have an effect on it. Its purpose is to embed an image in the HTML page in the place it appears.</p> - -<h3 id="Anatomy_of_an_HTML_document">Anatomy of an HTML document</h3> - -<p>That wraps up the basics of individual HTML elements, but they aren't very useful on their own. Now we'll look at how individual elements are combined to form an entire HTML page. Let's revisit the code we put into our <code>index.html</code> example (which we first met in the <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> article):</p> - -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>My test page</title> - </head> - <body> - <img src="images/firefox-icon.png" alt="My test image"> - </body> -</html></pre> - -<p>Here we have:</p> - -<ul> - <li><code><!DOCTYPE html></code> — the doctype. In the mists of time, when HTML was young (about 1991/2), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things. However, these days no one really cares about them, and they are really just a historical artefact that needs to be included for everything to work right. For now, that's all you need to know.</li> - <li><code><html></html></code> — the {{htmlelement("html")}} element. This element wraps all the content on the entire page, and is sometimes known as the root element.</li> - <li><code><head></head></code> — the {{htmlelement("head")}} element. This element acts as a container for all the stuff you want to include on the HTML page that <em>isn't</em> the content you are showing to your page's viewers. This includes things like {{Glossary("keyword", "keywords")}} and a page description that you want to appear in search results, CSS to style our content, character set declarations, and more.</li> - <li><code><body></body></code> — the {{htmlelement("body")}} element. This contains <em>all</em> the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks, or whatever else.</li> - <li><code><meta charset="utf-8"></code> — this element sets the character set your document should use to UTF-8, which includes most characters from the vast majority of human written languages. Essentially it can now handle any textual content you might put on it. There is no reason not to set this, and it can help avoid some problems later on.</li> - <li><code><title></title></code> — the {{htmlelement("title")}} element. This sets the title of your page, which is the title that appears in the browser tab the page is loaded in. It is also used to describe the page when you bookmark/favourite it.</li> -</ul> - -<h2 id="Images">Images</h2> - -<p>Let's turn our attention to the {{htmlelement("img")}} element again:</p> - -<pre class="brush: html"><img src="images/firefox-icon.png" alt="My test image"></pre> - -<p>As we said before, it embeds an image into our page in the position it appears. It does this via the <code>src</code> (source) attribute, which contains the path to our image file.</p> - -<p>We have also included an <code>alt</code> (alternative) attribute. In this attribute, you specify descriptive text for users who cannot see the image, possibly because:</p> - -<ol> - <li>They are visually impaired. Users with significant visual impairments often use tools called screen readers to read out the alt text to them.</li> - <li>Something has gone wrong causing the image to not display. For example, try deliberately changing the path inside your <code>src</code> attribute to make it incorrect. If you save and reload the page, you should see something like this in place of the image:</li> -</ol> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9349/alt-text-example.png" style="display: block; height: 36px; margin: 0px auto; width: 108px;"></p> - -<p>The key words about alt text are "descriptive text". The alt text you write should provide the reader with enough information to have a good idea of what the image conveys. In this example, our current text of "My test image" is no good at all. A much better alternative for our Firefox logo would be "The Firefox logo: a flaming fox surrounding the Earth."</p> - -<p>Try coming up with some better alt text for your image now.</p> - -<div class="note"> -<p><strong>Note</strong>: Find out more about accessibility at <a href="/en-US/docs/Web/Accessibility">MDN's Accessibility landing page</a>.</p> -</div> - -<h2 id="Marking_up_text">Marking up text</h2> - -<p>This section will cover some of the basic HTML elements you'll use for marking up text.</p> - -<h3 id="Headings">Headings</h3> - -<p>Heading elements allow you to specify that certain parts of your content are headings — or subheadings — of your content. In the same way that a book has a main title, chapter titles and subtitles, an HTML document can too. HTML contains six heading levels, {{htmlelement("h1")}}–{{htmlelement("h6")}} although you'll commonly only use 3–4 at most:</p> - -<pre class="brush: html"><h1>My main title</h1> -<h2>My top level heading</h2> -<h3>My subheading</h3> -<h4>My sub-subheading</h4></pre> - -<p>Now try adding a suitable title to your HTML page just above your {{htmlelement("img")}} element.</p> - -<h3 id="Paragraphs">Paragraphs</h3> - -<p>As explained above, {{htmlelement("p")}} elements are for containing paragraphs of text; you'll use these frequently when marking up regular text content:</p> - -<pre class="brush: html"><p>This is a single paragraph</p></pre> - -<p>Add your sample text (you should have it from <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like"><em>What should your website look like?</em></a>) into one or a few paragraphs, placed directly below your {{htmlelement("img")}} element.</p> - -<h3 id="Lists">Lists</h3> - -<p>A lot of the web's content is lists, and HTML has special elements for these. Marking up lists always consist of at least two elements. The most common list types are ordered and unordered lists:</p> - -<ol> - <li><strong>Unordered lists</strong> are for lists where the order of the items doesn't matter, like a shopping list. These are wrapped in a {{htmlelement("ul")}} element.</li> - <li><strong>Ordered lists</strong> are for lists where the order of the items does matter, like a recipe. These are wrapped in an {{htmlelement("ol")}} element.</li> -</ol> - -<p>Each item inside the lists is put inside an {{htmlelement("li")}} (list item) element.</p> - -<p>For example, if we wanted to turn the part of the following paragraph fragment into a list:</p> - -<pre class="brush: html"><p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p></pre> - -<p>We could modify the markup to this:</p> - -<pre class="brush: html"><p>At Mozilla, we’re a global community of</p> - -<ul> - <li>technologists</li> - <li>thinkers</li> - <li>builders</li> -</ul> - -<p>working together ... </p></pre> - -<p>Try adding an ordered or unordered list to your example page.</p> - -<h2 id="Links">Links</h2> - -<p>Links are very important — they are what makes the web a web! To add a link, we need to use a simple element — {{htmlelement("a")}} — the "a" being short for "anchor". To make text within your paragraph into a link, follow these steps:</p> - -<ol> - <li>Choose some text. We chose the text "Mozilla Manifesto".</li> - <li>Wrap the text in an {{htmlelement("a")}} element, like so: - <pre class="brush: html"><a>Mozilla Manifesto</a></pre> - </li> - <li>Give the {{htmlelement("a")}} element an <code>href</code> attribute, like so: - <pre class="brush: html"><a href="">Mozilla Manifesto</a></pre> - </li> - <li>Fill in the value of this attribute with the web address that you want the link to link to: - <pre class="brush: html"><a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a></pre> - </li> -</ol> - -<p>You might get unexpected results if you omit the <code>https://</code> or <code>http://</code> part, called the <em>protocol</em>, at the beginning of the web address. After making a link, click it to make sure it is sending you where you wanted it to.</p> - -<div class="note"> -<p><code>href</code> might appear like a rather obscure choice for an attribute name at first. If you are having trouble remembering it, remember that it stands for <em><strong>h</strong>ypertext <strong>ref</strong>erence</em>.</p> -</div> - -<p>Add a link to your page now, if you haven't already done so.</p> - -<h2 id="Conclusion">Conclusion</h2> - -<p>If you have followed all the instructions in this article, you should end up with a page that looks like the one below (you can also <a href="http://mdn.github.io/beginner-html-site/">view it here</a>):<br> - <br> - <img alt="A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text" src="https://mdn.mozillademos.org/files/9351/finished-test-page-small.png" style="display: block; height: 838px; margin: 0px auto; width: 716px;"></p> - -<p>If you get stuck, you can always compare your work with our <a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">finished example code</a> on GitHub.</p> - -<p>Here, we have only really scratched the surface of HTML. To find out more, go to our <a href="/en-US/Learn/HTML">HTML Learning topic</a>.</p> - -<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</p> - -<p> </p> - -<h2 id="In_this_module">In this module</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> - -<p> </p> diff --git a/files/fa/learn/getting_started_with_the_web/index.html b/files/fa/learn/getting_started_with_the_web/index.html deleted file mode 100644 index 963acd5a17..0000000000 --- a/files/fa/learn/getting_started_with_the_web/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: شروع برنامه نویسی وب -slug: Learn/Getting_started_with_the_web -tags: - - Beginner - - CSS - - Design - - Guide - - HTML - - Index - - NeedsTranslation - - TopicStub - - publishing - - theory - - انتشار - - ترجمه - - راهنما - - طراحی - - مقدماتی -translation_of: Learn/Getting_started_with_the_web ---- -<p dir="rtl">{{LearnSidebar}}</p> - -<p class="summary" dir="rtl">در این سری از مقالات، به طور مختصر و کوتاه به معرفی برنامه نویسی وب می پردازیم. سپس شیوه ی نصب ابزارهای مورد نیاز برای ساخت یک وب سایت ساده را می آموزیم و کدهای ساده و اولیه ی نوشته شده را اجرا می کنیم. </p> - -<h2 dir="rtl" id="مقدمه_ای_در_مورد_ساخت_اولین_سایت_توسط_شما">مقدمه ای در مورد ساخت اولین سایت توسط شما</h2> - -<p dir="rtl">برای ساختن یک وب سایت حرفه ای، کارهای بسیاری باید انجام دهید؛ بنابراین اگر شما در حرفه ی طراحی سایت تازه کار هستید، توصیه می کنیم که ذره ذره آن را بیاموزید و ناامید نشوید. <br> - ساختن سایتی مثل فیسبوک کار دشواری است و تجربه میخواهد، اما ساختن وبسایت ساده خودتان سخت نیست ، بنابراین خودتان را برای انجام این کار آماده کنید. </p> - -<p dir="rtl">با تمرین و مطالعه مقالاتی که در لیست زیر به ترتیب آمده، شما بدون هیچ پیش زمینه ای قادر به ساخت اولین صفحه وبتان خواهید بود.بزن بریم!</p> - -<h3 dir="rtl" id="آموزش_نصب_نرم_افزارهای_مورد_نیاز"><a href="/fa/docs/Learn/Getting_started_with_the_web/نصب_نرم_افزارهای_پایه">آموزش نصب نرم افزارهای مورد نیاز</a></h3> - -<p dir="rtl">نرم افزارهای بسیار زیادی برای طراحی وب وجود دارد. از این رو اگر شما تازه شروع به برنامه نویسی وب کرده باشید، ممکن است این ویرایشگرها، فریمورکها و ابزارهای تست موجب سردرگمی شما شده باشند. <br> - در بخش <a href="/fa/docs/Learn/Getting_started_with_the_web">آموزش نصب نرم افزارهای مورد نیاز</a>، به صورت گام به گام به نصب نرم افزارهای مورد نیاز جهت طراحی وب برای مبتدیان می پردازیم. </p> - -<h3 dir="rtl" id="می_خواهید_ظاهر_سایت_شما_چگونه_باشد؟"><a href="/fa/docs/Learn/Getting_started_with_the_web/وب_سایت_شما_چه_شکلی_است؟">می خواهید ظاهر سایت شما چگونه باشد؟</a></h3> - -<p dir="rtl">قبل از اینکه شروع به کدنویسی برای سایت خود کنید، خوب است که طرح آن را در ذهن خود مجسم کنید.چه اطلاعاتی را قراراست نمایش دهید؟ چه فونتها و رنگهایی را استفاده می کنید؟ و اینکه <a href="/fa/docs/Learn/Getting_started_with_the_web">می خواهید ظاهر سایت شما چگونه باشد</a>. در ادامه ی این مقاله، روش ساده ای را به شما توضیح میدهیم تا بتوانید نقشه محتوا و طرح سایت خود را دنبال کنید.</p> - -<h3 dir="rtl" id="کار_با_فایل_ها"><a href="/fa/docs/Learn/Getting_started_with_the_web/Dealing_with_files">کار با فایل ها</a></h3> - -<p dir="rtl">یک وبسایت از فایلهای زیادی تشکیل شده است: محتوای متنی، کد، شیوه نامه ها(stylesheets)، محتوای رسانه و ... . شما نیاز دارید این فایلها را با ساختاری معقول گرد هم بیاورید وازاینکه با هم ارتباط برقرار میکنند اطمینان حاصل کنید.بخش <a href="/fa/docs/Learn/Getting_started_with_the_web/Dealing_with_files">کار با فایل ها</a> روش ساخت یک ساختار فایل منطقی برای وبسایتتان و مشکلاتی که از آنها بهتراست مطلع باشید را توضیح می دهد.<a href="/fa/docs/Learn/Getting_started_with_the_web/Dealing_with_files"> </a></p> - -<h3 dir="rtl" id="مقدمات_HTML"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/HTML_basics">مقدمات HTML</a></h3> - -<p dir="rtl">Hypertext Markup Language یا به اختصار HTML، کدی است که برای ساخت محتوای وب سایت خود از آن استفاده می کنید و به آن معنا و روح می بخشد. مثلاً تعیین می کند که محتوای اینجا مجموعه ای از پاراگراف ها است یا لیستی از بولت پوینت(bullet point)؟ آیا در صفحه ام تصویری الحاق شده است؟ آیا جدول داده دارم؟ بطور خلاصه <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/HTML_basics">مقدمات HTML</a> شما را به صورت کلی با HTML آشنا می کند.</p> - -<h3 dir="rtl" id="مقدمات_CSS"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/CSS_basics">مقدمات CSS</a></h3> - -<p dir="rtl">Cascading Stylesheets یا بصورت خلاصه CSS کدی است که برای ساخت ظاهر وب سایتتان از آن استفاده می کنید. مثلاً می خواهید متن سیاه باشد یا قرمز؟ محتوا در کجای صفحه نمایش قرار بگیرد؟ چه تصاویر پس زمینه یا رنگ هایی برای <span dir="ltr" lang="fa">تزئین</span> وب سایتتان استفاده شود؟ <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/CSS_basics">مقدمات CSS</a> دقیقا می گوید که برای شروع چه کار باید انجام دهید.</p> - -<h3 dir="rtl" id="مقدمات_JavaScript"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">مقدمات JavaScript</a></h3> - -<p dir="rtl">JavaScript زبان برنامه نویسی است که از آن برای افزودن قابلیت های تعاملی به وب سایتتان استفاده می کنید. مثلاً در بازی ها، بعد از زدن یک کلید یا وارد کردن اطلاعات در فرم ها، چیزی اتفاق می افتد، قسمتی تغییر ظاهر می دهد، انیمیشنی صورت می گیرد، و خیلی چیز های دیگر. <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">مقدمات JavaScript</a> ایده اولیه که با این زبان مهیج چه کارهایی را می توانید انجام دهید و چطور کار با آن را شروع کنید را در اختیارتان قرار می دهد.</p> - -<h3 dir="rtl" id="انتشار_وب_سایت"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">انتشار وب سایت</a></h3> - -<p dir="rtl">بعد از پایان نوشتن کدها و سازماندهی فایل های سازنده وب سایت، لازم است که وب سایت خود را بصورت آنلاین قرار دهید تا بقیه هم بتوانند آن را ببینند. در قسمت <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">انتشار کد نمونه خودتان</a> نحوه آنلاین کردن کدهای ساده خود با کمترین زحمت را یاد می گیرید.</p> - -<h3 dir="rtl" id="وب_چطور_کار_می_کند"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">وب چطور کار می کند</a></h3> - -<p dir="rtl">وقتی که به وب سایت مورد علاقه خود سر می زنید، چیزهای پیچیده زیادی درزمینه رخ می دهد که ممکن است از آن بی خبر باشید. در قسمت <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">وب چطور کار می کند</a> توضیح می دهیم زمانی که صفحه وبی را در کامپیوتر خود مشاهده می کنید چه اتفاقاتی می افتد.</p> diff --git a/files/fa/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/fa/learn/getting_started_with_the_web/installing_basic_software/index.html deleted file mode 100644 index d2b8988862..0000000000 --- a/files/fa/learn/getting_started_with_the_web/installing_basic_software/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: نصب نرم افزارهای پایه -slug: Learn/Getting_started_with_the_web/Installing_basic_software -translation_of: Learn/Getting_started_with_the_web/Installing_basic_software -original_slug: Learn/Getting_started_with_the_web/نصب_نرم_افزارهای_پایه ---- -<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" dir="rtl"> -<p><em>در نصب نرم افزار پایه</em>، نشان می دهیم که برای توسعه وب به چه ابزارهایی نیاز دارید و چگونه آنها را نصب نمایید.</p> -</div> - -<h2 dir="rtl" id="حرفه_ای_ها_از_چه_ابزارهایی_استفاده_می_کنند؟">حرفه ای ها از چه ابزارهایی استفاده می کنند؟</h2> - -<ul> - <li dir="rtl"><strong>یک کامپیوتر</strong>. شاید خیلی واضح به نظر برسد ولی هستن کسانی که این مقاله را از تلفن همراه خود و یا کامپیوتر کتابخانه می خوانند. برای شروع توسعه وب بصورت جدی، بهتر است که یک کامپیوتر شخصی یا لپ تاپ (ویندوز، مکیناش یا لینوکس) داشته باشید.</li> - <li dir="rtl"><strong>یک text editor یا ویرایشگر متن</strong> برای نوشتن کد در آن.این مورد می تواند یک text editor (مثل <a href="http://brackets.io/">Brackets</a>، <a href="https://atom.io/">Atom</a> یا<a href="https://code.visualstudio.com/">Visual Studio Code</a>)باشد یا یک hybrid editor (مثل <a href="https://www.adobe.com/products/dreamweaver.html">Dreamweaver</a>). ویرایشگرهای Office برای این کار نیستند، چرا که به عناصر مخفی وابسته اند که در موتور رندر مرورگرها اختلال ایجاد می کند.</li> - <li dir="rtl"><strong>مرورگرهای وب</strong>, برای تست کدها. در حال حاضر مرورگرهای <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox </a>، <a href="https://www.google.com/chrome/browser/">Chrome</a>، <a href="http://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> و <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a> بیشترین کاربرد را دارند. همچنین باید نحوه نمایش وب سایت خود در موبایل و همه مرورگرهای قدیمی که مخاطبین شما ممکن است از آنها استفاده نمایند (مثل IE 6–8) نیز تست کنید.</li> - <li dir="rtl"><strong>یک graphics editor یا ویرایشگر گرافیکی</strong>, مثل <a href="http://www.gimp.org/">GIMP</a>، <a href="http://www.getpaint.net/">Paint.NET</a>، یا <a href="https://www.adobe.com/products/photoshop.html">Photoshop</a>، برای ساخت تصاویر صفحات وب سایتتان..</li> - <li dir="rtl"><strong>یک version control system یا سیستم مدیریت نسخه</strong>, برای مدیریت فایل های روی سرور، همکاری تیمی بر روی یک پروژه، اشتراک گذاری کد و منابع، و جلوگیری از مشکل در ویرایش ها. هم اکنون <a href="http://git-scm.com/">Git</a> محبوب ترین ابزار کنترل نسخه است و سرویس نگه داری کد <a href="https://github.com/">GitHub</a>، که بر اساس Git است، نیز بسیار محبوب می باشد .</li> - <li dir="rtl"><strong>یک برنامه FTP </strong>،که حساب های کاربری میزبانی های وب قدیمی تر برای مدیریت فایل ها استفاده می شد (برای این منظور <a href="http://git-scm.com/">Git</a> بطور فزاینده ای در حال جایگزین شدن بجای FTP است). برنامه های FTP زیادی وجود دارد مثل <a href="https://cyberduck.io/">Cyberduck</a>، <a href="http://fetchsoftworks.com/">Fetch</a>، و <a href="https://filezilla-project.org/">FileZilla</a>.</li> - <li dir="rtl"><strong>یک سیستم اتوماتیک سازی یا automation system</strong>، مثل <a href="http://gruntjs.com/">Grunt</a> یا<a href="http://gulpjs.com/">Gulp</a>، برای انجام خودکار کارهای تکراری، مثلا minify کردن کد و اجرای تست ها.</li> - <li dir="rtl">قالبها، کتابخانه ها، فریم ورک ها و غیره، برای سریعتر انجام دادن کارها .</li> - <li dir="rtl">بعلاوه ابزارهای دیگر!</li> -</ul> - -<h2 dir="rtl" id="در_حال_حاظر_به_چه_ابزارهایی_نیاز_دارید؟">در حال حاظر به چه ابزارهایی نیاز دارید؟</h2> - -<p dir="rtl">لیست بالا شاید به نظر ترسناک برسد، ولی خوشبختانه توسعه وب را تقریبا بدون دونستن هیچ چیز در مورد موارد بالا می توان شروع کرد. در این مقاله با حداقل ها شروع خواهیم کرد — یک text editor و چندتا مرورگر جدید.</p> - -<h3 dir="rtl" id="نصب_یک_ویرایشگر_متن">نصب یک ویرایشگر متن</h3> - -<p dir="rtl">احتمالا بر روی کامپیوتر خود یک text editor خیلی ساده دارید. بطور پیش فرض <a href="https://en.wikipedia.org/wiki/Microsoft_Notepad">Notepad</a> در ویندوز و <a href="https://en.wikipedia.org/wiki/TextEdit">TextEdit</a> در مکیناش هستند. در توزیع های مختلف لینوکس، اوضاع متفاوت است; مثلا در ابونتو(Ubuntu) ، <a href="https://en.wikipedia.org/wiki/Gedit">gedit</a> به صورت پیش فرض وجود دارد.</p> - -<p dir="rtl">برای توسعه وب می توان چیزی بهتر از Notepad یاTextEdit داشت. توصیه ما این است که با <a href="http://brackets.io">Brackets</a> شروع کنید، که ویژگی هایlive previews و code hints را ارائه می کند.</p> - -<h3 dir="rtl" id="نصب_مرورگرهای_جدید_وب">نصب مرورگرهای جدید وب</h3> - -<p dir="rtl">در حال حاضر، ما فقط دوتا از مرورگرهای وب را برای تست کدهایمان نصب خواهیم کرد. در لیست زیر با توجه به سیستم عامل خود، روی لینک های مرورگر مورد نظر خود کلیلک کنید تا آن را نصب کنید:</p> - -<ul> - <li dir="rtl">لینوکس: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a> , <a href="https://www.google.com/chrome/browser/">Chrome</a> , <a href="http://www.opera.com/">Opera</a> .</li> - <li dir="rtl">ویندوز: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://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/windows/microsoft-edge"><font color="#0066cc">Microsoft Edge</font></a> ( Edge بصورت پیش فرض در ویندوز 10 وجود دارد،اگر که ویندوز 8 و بعد از آن ،این مرورگر را دارید، می توانید IE 10 یا بیشتر را هم نصب کنید; در غیر اینصورت باید از مرورگرهای جایگزین استفاده کنید)</li> - <li dir="rtl">مکینتاش: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a> ( Safari مرورگر پیش فرض در iOS و OS X می باشد)</li> -</ul> - -<p dir="rtl">قبل از دادمه، باید حداقل دوتا از این مرورگرها را نصب کرده و برای تست آماده شده باشند.</p> - -<h3 dir="rtl" id="نصب_یک_وب_سرور_محلی">نصب یک وب سرور محلی</h3> - -<p>بعضی از مثال ها برای اینکه بتوانند به خوبی کار کنند باید از طریق وب سرور اجرا شوند. در قسمت <a href="/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">چگونه یک وب سرور محلی برای تست نصب کنیم؟</a> نحوه انجام این کار را فرا خواهید گرفت.</p> - -<p>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/fa/learn/getting_started_with_the_web/javascript_basics/index.html b/files/fa/learn/getting_started_with_the_web/javascript_basics/index.html deleted file mode 100644 index 4a78cabd8f..0000000000 --- a/files/fa/learn/getting_started_with_the_web/javascript_basics/index.html +++ /dev/null @@ -1,421 +0,0 @@ ---- -title: مقدمات جاوااسکریپت -slug: Learn/Getting_started_with_the_web/JavaScript_basics -tags: - - آموزش - - جاوا اسکریپت - - مقدماتی - - وب -translation_of: Learn/Getting_started_with_the_web/JavaScript_basics -original_slug: Learn/Getting_started_with_the_web/مقدمات_جاوااسکریپت ---- -<p>{{PreviousNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website")}}</p> - -<div class="summary" dir="rtl"> -<p>جاوااسکریپت یک زبان برنامه نویسی است که تعاملات را به وبسایت شما می آورد (مانند بازی ها، پاسخ به کلیک شدن یک دکمه یا پر شدن فرم ها، طرح های پویا و پویانمایی). این مقاله به شما کمک میکند، کار با این زبان هیجان انگیز را شروع کنید و درکی از کارهای ممکن توسط آن را به شما میدهد.</p> -</div> - -<h2 dir="rtl" id="جاوااسکریپت_واقعا_چیست؟">جاوااسکریپت واقعا چیست؟ </h2> - -<p dir="rtl">{{Glossary("جاوااسکریپت")}} یک زبان برنامه نویسی کاملا داینامیک است که زمانیکه به اسناد {{Glossary("HTML")}} اعمال میشود، تعامل پویا با وبسایت را ممکن میکند. جاوااسکریپت توسط برندان ایخ یکی از موسسین پروژه موزیلا، بنیاد موزیلا و شرکت موزیلا، ساخته شد.</p> - -<p dir="rtl">با جاوااسکریپت انجام هر چیزی امکان پذیر است. ابتدا شما با خصوصیات ساده و کاربردی این زبان مانند کار با حلقه ها، گالری تصاویر، تغییر قالب بندی و واکنش به کلیک دکمه ها شروع خواهید نمود. به مرور زمان و با کسب مهارت در جاوااسکریپت شما قادر به ساخت بازی ها، انیمشن های دو بعدی و سه بعدی، برنامه ها و... خواهید شد.</p> - -<p dir="rtl">جاوااسکریپت ذاتا خیلی فشرده اما در عین حال انعطاف پذیر است و توسعه دهندگان با استفاده از همین خصوصیت انعطاف پذیری جاوااسکریپت ابزارهای بسیاری را نوشته اند که برروی هسته زبان جاوااسکریپت قرار می گیرند و به کمک آنها می توان با تلاش کم به قابلیت های بیشتر دست یافت. این قابلیت ها شامل موارد زیر می گردد:</p> - -<p dir="rtl">واسط های برنامه نویسی کاربردی ({{Glossary("API","APIs")}}) — APIs ، در داخل مرورگر تعبیه شده اند تا کارهایی مانند ایجاد پویایه HTML و تنظیم استایل های CSS ، یا گرفتن و دستکاری یک استریم ویدئو از وب کم کاربر، یا ایجاد گرافیک های سه بعدی و نمونه های صوتی را فراهم کنند.</p> - -<ul> - <li dir="rtl">API های مختلف به توسعه دهندگان اجازه میدهند که کارایی های مختلف را به نرم افزار هایشان با اضافه کردن قابلیت سایت های دیگر مانند توییتر یا فیسبوک بیفزاییند.</li> - <li dir="rtl">فریمورک های مختلف و کتابخانه ها را می توانید به html تان اضافه کنید تا به شما اجازه ساخت سریع سایت و اپلیکیشنتان را بدهد.</li> -</ul> - -<h2 dir="rtl" id="یک_مثال_ساده">یک مثال ساده</h2> - -<p dir="rtl">قسمت بالا واقعا هیجان انگیز به نظر میرسد و باید هم اینطور باشد -جاوا اسکریپت یکی از مهیجترین تکنولوژی های شبکه اینترنت است وقتی شما شروع به پیدا کردن مهارت در آن میکنید وب سایت شما وارد یک بعد جدید از قدرت و خلاقیت میگردد.</p> - -<p dir="rtl">اما راحت بودن با جاوا اسکریپت از راحت بودن با HTML و CSS مقداری سخت تر است. شاید شما مجبور باشید که با قدم های استوار از کارهای کوچک شروع کنید. برای شروع، ما به شما نشان میدهیم چطور کدهای جاوا اسکریپت ساده و ابتدایی به صفحه تان اضافه کنید. ساختن مثال "hello world!"(<a href="http://en.wikipedia.org/wiki/%22Hello,_world!%22_program">the standard in basic programming examples</a>.)</p> - -<div class="warning" dir="rtl"> -<p><strong>نکته مهم : اگر تازه به مجموعه آموزش ما پیوسته اید برای شروع<a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip"> کدهای مثال را از اینجا دانلود</a> کنید</strong></p> -</div> - -<ol> - <li dir="rtl">ابتدا, به صفحه وب آزمایشی خود بروید و یک فایل جدید با نام main.js بسازید و آن را در فولدر scripts خود ذخیره کنید.</li> - <li dir="rtl">سپس به فایل index.htm رفته و عناصر زیر را در یک خط جدید و پیش از <code></body></code> بنویسید.</li> -</ol> - -<pre class="brush: html"><script src="scripts/main.js"></script></pre> - -<p dir="rtl">3. این دقیقا همان کاری است که با عنصر {{htmlelement("link")}} برای وارد کردن CSS میکنیم.— با این کار دستوزات جاوااسکریپت را به سند HTML خود اضافه می کنید بنابراین روی HTML,CSS و سایر عناصر صفحه تاثیر خواهد گذاشت.</p> - -<p dir="rtl">4. اکنون کد زیر را به فایل main.js اضافه کنید: </p> - -<pre class="brush: js">var myHeading = document.querySelector('h1'); -myHeading.innerHTML = 'Hello world!';</pre> - -<p dir="rtl">5. حالا مطمئن شوید فایل های HTML و Javadcript ذخیره شده اند. سپس index.html را در مرورگر باز کنید. باید چیزی مشابه تصویر زیر مشاهده کنید. 7</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9543/hello-world.png" style="display: block; height: 236px; margin: 0px auto; width: 806px;"></p> - -<div class="note" dir="rtl"> -<p><strong>توجه </strong>: دلیل اینکه ما از تگ {{htmlelement("script")}} در پایان محتوا فایل HTML استفاده می کنیم این است که کد جاوااسکریپت مستقیم از درون فایل HTML توسط مرورگر لود شود . اگر کد جاوااسکریپت را در بالای محتوای موجود در فایل HTML قرار دهیم در اینصورت محتوای زیرین HTML تحت تاثیر عملکرد کد جاوااسکریپت خواهند بود و به همین دلیل کد جاوااسکریپت را در پایینترین بخش محتوا صفحه HTML می گذاریم .</p> -</div> - -<h3 dir="rtl" id="قدم_بعدی_چیست_؟">قدم بعدی چیست ؟</h3> - -<p dir="rtl">خوب همانطور که امتحان کردید شما با کمک جاوااسکریپت متن موجود در سرتیتر (تگ H1) را به متن "Hello World" تغییر دادید. این عمل را با صدا زدن تابع {{domxref("Document.querySelector", "querySelector()")}} بمنظور ارجاع دادن به سرتیتر H1 و ذخیره آن در متغییر <code>myHeading</code> انجام داده اید. این عمل بسیار به شبیه کاری است که ما selectors در CSS انجام می دهیم. زمانی که می خواهید روی یک تگ یا المان عملی را انجام دهید احتیاج است اول آن را انتخاب کنید.</p> - -<p dir="rtl">بعد از آن متن یا محتوا مورد نظر را به متغییر <code>myHeading</code> که توسط تابع {{domxref("Element.innerHTML", "innerHTML")}} تعریف شده است ٫ به ویژگی محتوای متن تگ H1 محتوای "Hello World" مقدار دهی می شود.</p> - -<h2 dir="rtl" id="توضیح_پایه_ای_زبان">توضیح پایه ای زبان</h2> - -<p dir="rtl">برویم سراغ اصول و ویژگی پایه ای و اصلی زبان برنامه نویسی جاوااسکریپت, بررسی ویژگی های عمومی در تمام زبان های برنامه نویسی بويژه این ویژگی ها در زبان جاوا اسکریپت باعث درک بهتر از روش کار کرد آن خواهد شد. اگر شما اصول پایه را بدانید می توانید برنامه نویسی را شروع کنید</p> - -<div class="warning" dir="rtl"> -<p><strong>نکته مهم</strong>: سعی کنید در زمان مطالعهی این مقاله کدهای مثال را در کنسول مرورگر خود اجرا کنید تا نتیجهی کار را بهتر درک کنید . برای جزئیات بیشتر برای کار کردن با کنسول مرورگر اینجا <a href="https://developer.mozilla.org/en-US/Learn/Discover_browser_developer_tools"><< بررسی ابزارهای توسعه مرورگر>> کلیک کنید</a> .</p> -</div> - -<h3 dir="rtl" id="متغییرها">متغییرها</h3> - -<p dir="rtl">{{Glossary("Variable", "Variables")}} نگهدارنده هایی هستند که شما میتوانید مقادیر را درون آن ها نگهداری کنید. با تعریف یک متغیر با استفاده از کلمه کلیدی <code>var</code> شروع کنید، سپس با یک نام دلخواه کار را ادامه دهید:</p> - -<pre class="brush: js">var myVariable;</pre> - -<div class="note" dir="rtl"> -<p><strong>توجه</strong>: نقطه ویرگول ( ; ) در پایان هر خط نشاندهندهی پایان عبارت است و تنها در صورتی لزوما باید استفاده شود که بخواهید عبارتهای مختلف در یک سطر را از هم جدا کنید. هرچند برخی اعتقاد دارند که گذاشتن آن در پایان هر سطر، شیوهی مناسبی است. قوانین دیگری برای لزوم استفاده و لزوم عدم استفادهی آن وجود دارد (برای جزییات بیشتر <a href="https://news.codecademy.com/your-guide-to-semicolons-in-javascript/">راهنمای نقطهویرگول در جاوااسکریپت</a> را مشاهده کنید).</p> -</div> - -<div class="note"> -<p dir="rtl"><strong>توجه</strong>: شما می توانید تقریبا هر نامی به یک متغییر بدهید اما محدودیت هایی برای تعریف نام وجود دارد (<a href="http://www.codelifter.com/main/tips/tip_020.shtml">برای آشنای بیشتر با قوانین نام گذاری متغیرها اینجا را کلیک کنید </a>)</p> -</div> - -<div class="note"> -<p dir="rtl"><strong>نکته</strong>: جاوااسکریپت به حروف کوچک و بزرگ حساس است و نام متغییر<code>myVariable</code> با نام <code>myvariable</code> از نظر جاوااسکریپت متفاوت است. اگر مشکلی در فراخوانی و بدست آوردن مقدار از یک متغییر تعریف شده دارید بزرگ یا کوچک بودن حروف نام متغییر را چک کنید !</p> -</div> - -<p dir="rtl">پس از تعریف یک متغیر شما می توانید به آن یک مقدار بدهید:</p> - -<pre class="brush: js">myVariable = 'Bob';</pre> - -<p dir="rtl">شما میتوانید مقداررا تنها با فراخوانی نام متغیر بدست آورید:</p> - -<pre class="brush: js">myVariable;</pre> - -<p dir="rtl">شما میتوانید اگر بخواهید هر دوی این عملیات ها را روی یک خط انجام دهید:</p> - -<pre class="brush: js">var myVariable = 'Bob';</pre> - -<p dir="rtl">پس از دادن یک مقدار به متغیر شما میتوانید آن را تغییر دهید:</p> - -<pre>var myVariable = 'Bob'; -myVariable = 'Steve';</pre> - -<p dir="rtl">دقت کنید که متغیرها<a href="/en-US/docs/Web/JavaScript/Data_structures"> انواع مختلفی از داده ها را </a> میتوانند داشته باشند:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="row">متغییر</th> - <th scope="col">توضیح</th> - <th scope="col">مثال</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">{{Glossary("String")}}</th> - <td> - <p dir="rtl">متغییر رشته ای برای نگهداری مقدار متن استفاده می شود. حتمی برای مقدار دهی به متغییر متنی باید متن یا محتوا در کوتیشن قرار دهید.</p> - </td> - <td><code>var myVariable = 'Bob';</code></td> - </tr> - <tr> - <th scope="row">{{Glossary("Number")}}</th> - <td> - <p dir="rtl">متغییر عددی . برای مقدار دهی به متغییر عددی احتیاج به استفاده از کوتیشن نیست.</p> - </td> - <td><code>var myVariable = 10;</code></td> - </tr> - <tr> - <th scope="row">{{Glossary("Boolean")}}</th> - <td> - <p dir="rtl">متغییر درست یا غلط . کلمات <code>true</code>/<code>false</code> بعنوان کلیداصلی در JS تعریف شده اند و در زمان مقدار دهی نیاز به استفاده از کوتیشن ندارند</p> - </td> - <td><code>var myVariable = true;</code></td> - </tr> - <tr> - <th scope="row">{{Glossary("Array")}}</th> - <td> - <p dir="rtl">این ساختار(آرایه) اجازه می دهد چندین مقدار را با یک نام ذخیره کنید.</p> - </td> - <td> - <p><code>var myVariable = [1,'Bob','Steve',10];</code><br> - هر عضو از متغییر(آرایه) مانند زیر می توان صدا زد:</p> - - <p><code>myVariable[0]</code>, <code>myVariable[1]</code>, ... .</p> - </td> - </tr> - <tr> - <th scope="row">{{Glossary("Object")}}</th> - <td> - <p dir="rtl">اساسا در جاوا اسکریپت همه چیز یک آبجکت است و شما می توانید آن را دریک متغییر ذخیره کنید. این نکته را در ذهن داشته باشید تا در آینده با آن بیشتر آشنا خواهید شد.</p> - - <p>n.</p> - </td> - <td><code>var myVariable = document.querySelector('h1');</code><br> - مثال های بالای در این مقاله.</td> - </tr> - </tbody> -</table> - -<p dir="rtl">اگر شما تازه برنامه نویسی را شروع کرده باشید حتمی از خودتان می پرسید چرا به متغییرها نیاز داریم ؟ خوب٫ ما به متغییرها نیاز داریم تا همه کارهای جالب را انجام بدیم. اگر نتوانیم مقدار را تغییر دهیم پس نمی توانیم هیچ چیز داینامیک یا پویایی را بسازیم مانند یک پیام تبریک خصوصی یا نمایش یک عکس از مجموعه گالری عکس ها . در هر عمل پویایی نیاز به متغییر داریم.</p> - -<h3 dir="rtl" id="نظر_ها_یادداشت_ها">نظر ها (یادداشت ها)</h3> - -<p dir="rtl">در کد جاوااسکریپت مانند سی اس اس می توانید نظر (یادداشت) بگذارید :</p> - -<pre class="brush: js">/* -Everything in between is a comment. -*/</pre> - -<p dir="rtl">اگر نظر یا یادداشت شما فقط یک خط است می توانید از ساختار دو اسلش مانند مثال زیر استفاده کنید:</p> - -<pre class="brush: js" style="font-size: 14px;">// This is a comment -</pre> - -<h3 dir="rtl" id="عملیات_ها">عملیات ها</h3> - -<p dir="rtl">{{Glossary("operator")}} نماد یک عمل ریاضی است که نتیجه را بر اساس دو مقدار (یا متغییر) تولید می کند. در جدول زیر بعضی از عملیات های ساده لیست شده اسند که می توانید در کنسول مرورگر آنها را امتحان کنید.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="row">عمل</th> - <th scope="col">توضیح</th> - <th scope="col">نماد(ها)</th> - <th scope="col">مثال</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">بعلاوه / جمع</th> - <td> - <p dir="rtl">زمان جمع دو مقدار عددی و یا برای بعلاوه ( پیوست دادن) دو رشته استفاده می شود.</p> - </td> - <td><code>+</code></td> - <td><code>6 + 9;<br> - "Hello " + "world!";</code></td> - </tr> - <tr> - <th scope="row">تفریق, ضرب, تقسیم</th> - <td> - <p dir="rtl">عمل های پایه ریاضی را انجام می دهند و فقط روی مقدار عدد قابل استفاده هستند.</p> - </td> - <td><code>-</code>, <code>*</code>, <code>/</code></td> - <td><code>9 - 3;<br> - 8 * 2; // multiply in JS is an asterisk<br> - 9 / 3;</code></td> - </tr> - <tr> - <th scope="row">مقدار دهی</th> - <td dir="rtl">در مثال می بینید با کمک مساوی مقدار به متغییر داده شده است.</td> - <td><code>=</code></td> - <td><code>var myVariable = 'Bob';</code></td> - </tr> - <tr> - <th scope="row">عمل تطابق</th> - <td> - <p dir="rtl">در یک آزمایش خواهید دید وقتی دو مقدار باهم برابر نباشند مقدار بازگشت داده شده از عمل مقایسه مقدار صحیح یا غلط (<code>true</code>/<code>false</code>) خواهد بود. </p> - </td> - <td><code>===</code></td> - <td><code>var myVariable = 3;<br> - myVariable === 4;</code></td> - </tr> - <tr> - <th scope="row">عدم تساوی / نه منطقی</th> - <td> - <p dir="rtl"> (<code>true</code> )عدم تساوی یا نه منطقی (نات منطقی) زمانی مقدار صحیح برمی گردادند که دو طرف تساوی باهم مساوی نباشند. اگر دو طرف تساویی مساوی باشند مقدار غلط (<code>false) </code> بر می گرداند</p> - </td> - <td><code>!</code>, <code>!==</code></td> - <td> - <p>The basic expression is <code>true</code>, but the comparison returns <code>false</code> because we've negated it:</p> - - <p><code>var myVariable = 3;<br> - !myVariable === 3;</code></p> - - <p>Here we are testing "is <code>myVariable</code> NOT equal to 3". This returns <code>false</code>, because it IS equal to 3.</p> - - <p><code><code>var myVariable = 3;</code><br> - myVariable !== 3;</code></p> - </td> - </tr> - </tbody> -</table> - -<p dir="rtl">عمل های زیادی وجود دارد اما برای شروع تا همین جا کافی است اما اگر می خواهید <a href="/fa/docs/Web/JavaScript/Reference/Operators">لیست تمامی عمل و عبارت ها را مشاهده کنید اینجا را کلیک</a> کنید.</p> - -<div class="note"> -<p dir="rtl"><strong>نکته مهم</strong>: ترکیب چند نوع متفاوت از متغییرها در زمان محاسبه باعث ایجاد نتایج عجیبی می شود ٫ پس مراقب باشید متغییرها را به درستی استفاده کنید تا نتیجه صحیح بگیرید. برای مثال در کنسول خود عبارت <code>"35" + "25"</code> وارد کنید. چرا نتیجه ای که فکر می کنید را نخواهید ؟ زیرا اعداد بین دوتا نماد نقل قول است پس کامپایلر مثل جمع رشته با آن برخورد می کند نه بعلاوه عدد صحیح. اگر شما <code>35 + 25</code> در کنسول وارد کنید نتیجه صحیح را خواهید دید.</p> -</div> - -<h3 id="شرط_ها">شرط ها</h3> - -<p dir="rtl">شرط ها در ساختار کد به شما اجازه می دهند در صورت صحیح یا غلط بودن یک عبارت مقدار یا فرمانی اجرا شود و اجرای ٫ بستگی به خروجی شرط دارد . رایج ترین ساختار شرطی : <code>if ... else</code> است بصورت نمونه :</p> - -<pre class="brush: js">var iceCream = 'chocolate'; -if (iceCream === 'chocolate') { - alert('Yay, I love chocolate ice cream!'); -} else { - alert('Awwww, but chocolate is my favorite...'); -}</pre> - -<p dir="rtl">عبارت درون <code>if ( ... )</code> یک شرط است - این شرط می گوید اگر مقدار متغیر <code>iceCream</code> برابر با مقدار رشته یی <code>chocolate</code> بود پس نتیجه شرط <code>true</code> (صحیح) است در نتیجه تکه کد درون {} اجرا می شود و اگر شرط برقرار نبود یا به عبارتی غلط بود از تکه کد اول می گذرد و تکه کد بعد از <code>else</code> اجرا خواهد شد. </p> - -<h3 dir="rtl" id="توابع">توابع </h3> - -<p dir="rtl">{{Glossary("Function", "Functions")}} یک روش برای بسته بندی دستورات است که می خواهید برای چند بار از آن استفاده کنید ٫ فارغ از اینکه چه زمان می خواهید از این مجموعه دستورات استفاده کنید با صدا زدن نام تابعی که این دستورات در درون آن قرار دارند می توانید آنها را بارها بدون تکرار اجرا کنید. شما نمونه ای از توابع را در مثال های قبل دیدید. بصورت نمونه:</p> - -<ol> - <li> - <pre class="brush: js">var myVariable = document.querySelector('h1');</pre> - </li> - <li> - <pre class="brush: js">alert('hello!');</pre> - </li> -</ol> - -<p dir="rtl">توابع بالا در درون بروزر وجود دارند و هر زمان بخواهید می توانید آنها را صدا بزنید.</p> - -<p dir="rtl">اگر شما چیزی شبیه نام متغییر دیدید که جلوی آن پرانتز های باز و بسته <code>()</code> وجود دارد آن چیز حتمی تابع است. توابع معمولا پارامترهایی ({{Glossary("Argument", "arguments")}} ) را به عنوان ورودی می گیرند و این اطلاعات را لازم دارند تا بتواند کار خود را انجام دهند. پارامترهای ورودی در در بین علامت های پرانتز قرار می گیرند و در صورتی که بیشتر از یک پارامتر ورودی وجود داشته باشد با علامت کاما از یک دیگر جدا می شوند.</p> - -<p dir="rtl">برای نمونه تابع <code>alert()</code> باعث می شود که باکس پاپ آپ در پنجره مرورگر نمایش داده شود ولی برای نمایش دادن باکس پاپ آپ نیاز هست مقداری به عنوان پارمتر ورودی توسط تابع دریافت ٫ تا عمل انجام گردد.</p> - -<p dir="rtl">خبر خوب این است شما هم می توانید توابع خود را بسازید. در مثال بعدی ما یک تابع ساده با دو پارامتر ورودی نوشته ایم که در درون تابع عمل ضرب را بر روی دو متغییر ورودی انجام و نتیجه را به عنوان خروجی بر می گرداند :</p> - -<pre class="brush: js">function multiply(num1,num2) { - var result = num1 * num2; - return result; -}</pre> - -<p dir="rtl">بهتر است برای یاد گیری تابع بالا را در کنسول مرورگر اجرا کنید و بعد از آن کدهای زیر را برای دیدن نتیجه خروجی تابع در کنسول در ادامه وارد کنید :</p> - -<pre class="brush: js">multiply(4,7); -multiply(20,20); -multiply(0.5,3);</pre> - -<div class="note"> -<p dir="rtl"><strong>توجه</strong>: عبارت <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> به مرورگر می گوید مقدار درون متغییر <code>result</code> به عنوان خروجی یا نتیجه محاسبه تابع در نظر بگیر. این عمل اجباری است زیرا متغییرهای تعریف شده در درون تابع فقط در دسترس داخل همان تابع خواهد بود . به موضوع تعیین قوانین و شرایط دسترسی به متغییرهای درون تابع {{Glossary("Scope", "scoping")}} می گویند. برای اطلاعات بیشتر در مورد<a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variable_scope"> اسکوپینگ متغییرها ( محدود دسترسی به متغییر) به اینجا</a> مراجعه کنید.</p> -</div> - -<h3 dir="rtl" id="رویداد_ها">رویداد ها</h3> - -<p dir="rtl">بدون رویدادها نمی توان یک وبسایت تعاملی ساخت . این ساختار از کد گوش بزنگ می مانند تا عکس العمل یا اتفاقی در مرورگر پیش آید و بعد کدی تحت پاسخ به آن عکس العمل تعریف شده اجرا می شود. مشهود ترین مثال <a href="/en-US/docs/Web/Events/click">رویداد کلیک</a> در زمانی که روی چیزی در مرورگر انجام می شود. برای امتحان کد زیر را در کنسول وارد کنید و در صفحه وبی که در همان پنجره کنسول وجود دارد کلیک کنید تا نتیجه را ببنید:</p> - -<pre class="brush: js">document.querySelector('html').onclick = function() { - alert('Ouch! Stop poking me!'); -}</pre> - -<p dir="rtl">روش های زیادی وجود دارد که برای المان یا تگ یک رویداد تعریف کرد. در کد زیری ما المان (تگ) HTML را توسط یک رویداد با نام <code><a href="/en-US/docs/Web/API/GlobalEventHandlers.onclick">onclick</a></code> بدون تعریف یک نام به بصورت مستقیم تابعی بدون نام به آن نسبت داده ایم ٫ محتوا تابع همان کدهای خواهند بود که زمان عمل کلیک می خواهیم اجرا شوند.</p> - -<p dir="rtl">به این کد توجه کنید:</p> - -<pre class="brush: js">document.querySelector('html').onclick = function() {};</pre> - -<p dir="rtl">نتیجه اجرای کد بالا با پایین یکی است:</p> - -<pre class="brush: js">var myHTML = document.querySelector('html'); -myHTML.onclick = function() {};</pre> - -<p dir="rtl">این بهینه تر است!</p> - -<h2 dir="rtl" id="یک_مثال_فوق_العاده_از_وبسایت">یک مثال فوق العاده از وبسایت</h2> - -<p dir="rtl">تا الان با مقدمات جاوااسکریپت آشنا شدیم٫ زمان آن رسیده به سراغ مثال های جالب برویم تا دید مناسبی به شما بدهد که چه چیزهای را می توانید بعد از یادگیری زبان جاوااسکریپت پیاده سازی کنید.</p> - -<p dir="rtl"></p> - -<h3 dir="rtl" id="تعویض_کننده_تصویر">تعویض کننده تصویر</h3> - -<p dir="rtl">در این بخش شما خواهید دید که در وبسایت مثالی ما چگونه می تواند با یک تکه کد ساده جاوااسکریپت یک تعویض کننده تصویر با قابلیت تعویض عکس بعد از هر کلیک روی عکس ساخت.</p> - -<ol dir="rtl"> - <li> اول از همه عکس مورد علاقه خود را که می خواهید در سایت شما نمایش داده شود پیدا کنید فقط در نظر بگیرید با عکس اول هم اندازه باشد یا در حد امکان سایز آن نزدیک به تصویر قبلی باشد .</li> - <li>تصویر را در فولدر <code>images</code> ذخیره کنید.</li> - <li>فایل <code>main.js</code> باز کنید و کد زیر را وارد کنید (اگر کد سلام دنیا شما در فایل وجود دارد آن را پاک کنید):</li> -</ol> - -<pre class="brush: js">var myImage = document.querySelector('img'); - -myImage.onclick = function() { - var mySrc = myImage.getAttribute('src'); - if(mySrc === 'images/firefox-icon.png') { - myImage.setAttribute ('src','images/firefox2.png'); - } else { - myImage.setAttribute ('src','images/firefox-icon.png'); - } -}</pre> - -<p dir="rtl">تمام تغییرات را در فایل ها باز را ذخیره کنید و فایل <code>index.html</code> را توسط مرورگر اجرا کنید. حالا زمانی که روی تصویر کلیک می کنید باید تصویر بعدی را به شما نمایش دهد.</p> - -<p dir="rtl">کاری که در کد بالا کردیم ٫ المان <span style="">image </span> را در متغییر <code style="">myImage</code> بعنوان منبع ذخیره کردیم . در مرحله بعد توسط رویداد <code style="">onclick</code><span style=""> به ویژگی مربوط به گرفتن محل یک تابع نوشتم که بعد از هر کلیک اتفاقات زیر برای المان تصویر پیش می آید:</span></p> - -<ol dir="rtl"> - <li>مقدار ویژگی <code>src</code> را در درون متغییر ریختیم.</li> - <li>مقدار درون متغییر را با شرط مقایسه کردیم و اگر مقدار برابر با <code>src</code> بود کد درون شرط اجرا می شود .</li> - <li> اگر شرط صحیح بود مقدار ویژگی <code>src</code> به تصویر دوم تغییر داده می شود و تصویر در درون المان {{htmlelement("image")}} نمایش در می آید.</li> - <li>اگر شرط صحیح نبود یعنی تصویر به تازگی تغییر کرده است و مقدار ويژگی <code>src</code> به محل ذخیره سازی تصویر اول(اصلی) می بایست تغییر نشانی دهد .</li> -</ol> - -<h3 id="اضافه_کردن_یک_پیام_خوش_آمد_گویی">اضافه کردن یک پیام خوش آمد گویی</h3> - -<p dir="rtl">در ادامه تعدادی کد اضافه خواهیم کرد که باعث می شود عنوان سایت بعد از دیدن(مرور) سایت توسط کاربر به یک پیام خوش آمدید تغییر کند. این پیام زمانی که کاربر برای بار دوم به سایت مراجعه می کند به او نمایش داده خواهد شد همچنین این اختیار را به کاربر می دهیم تا هر زمان مجددا به صحفه مراجعه کرد پیام خوش آمدگوئی خود را ببنید</p> - -<ol> - <li dir="rtl"> در فایل <code>index.html</code> را بعد از المان (تگ) {{htmlelement("script")}} وارد کنید </li> - <li> - <pre class="brush: html"><button>Change user</button></pre> - </li> - <li dir="rtl">در فایل <code>main.js</code> در پایین ترین بخش فایل دقیقا تک کد زیر را وارد کنید .در کد زیر یک رونوشت مانند از المان های button (دکمه) و heading (عنوان) در متغییر ها ریخته شده .</li> - <li> - <pre class="brush: js">var myButton = document.querySelector('button'); -var myHeading = document.querySelector('h1');</pre> - </li> - <li dir="rtl">تابع زیر را در فایل اضافه کنید . در حال حاضر کاری انجام نمی دهد اما بعدا خواهید دید</li> - <li dir="rtl"> - <pre class="brush: js">function setUserName() { - var myName = prompt('Please enter your name.'); - localStorage.setItem('name', myName); - myHeading.innerHTML = 'Mozilla is cool, ' + myName; -}</pre> - تابع <a href="/en-US/docs/Web/API/Window.prompt"><code>prompt()</code></a> یک جعبه دریافت متن نمایش می دهد مانند <code>alert()</code> با این تفاوت در <code>prompt()</code> از کاربر اطلاعاتی را به عنوان ورودی می گیرد و در ادامه در متغییری بعد از زدن دکمه اوکی ذخیره می کند. ما در اینجا از کاربر خواسته ایم نام خود را وارد کند و در ادامه با کمک API و صدا زدن تابع <code>localStorage</code> اطلاعات وارد شده (نام) را در حافظه داخلی مرورگر ذخیره می کنیم . ما از حافظه محلی (حافظه محلی مرورگر) بوسیله تابع <code>setItem()</code> و اختصاص دادن اسم <code>'name'</code> به اطلاعاتی که در درون متغیر <code>myName</code> می باشدرا ذخیره کردیم و این اطلاعات ذخیره شده همان نامی است که توسط کاربر وارد شده است.</li> - <li dir="rtl">کد <code>if ... else</code> را اضافه کنید بهتر ایست این قسمت از کد را بخش مقدار دهی اولیه نام گذاری کنیم زیرا در اینجا مشخص می شود چه زمان باید چه اتفاقی پیش آید</li> - <li dir="rtl"> - <pre class="brush: js">if(!localStorage.getItem('name')) { - setUserName(); -} else { - var storedName = localStorage.getItem('name'); - myHeading.innerHTML = 'Mozilla is cool, ' + storedName; -}</pre> - کد درون شرط نه منطقی زمانی اجرا می شود که اطلاعاتی برای <code>name</code> در ذخیره سازی محلی وجود نداشته باشد و در نتیجه تابع <code>setUserName()</code> فراخوانی می شود( نامی که کاربر در بازدید قبلی داده است ست می شود) این نام از طریق استفاده از تابع <code>getItem()</code> و مقدار دریافت مقدار بازگشتی از تابع و دادن این مقدار برای تنظیم (ست کردن) بوسیله <code>innerHTML</code> صورت می گیرد.</li> - <li dir="rtl">در پایان رویداد <code>onclick</code> که برای دکمه تعیین شده است تابع <code>setUserName()</code> فراخوانی می کند . این عمل به کاربر اجازه می دهد هر زمان که بخواهد با کلیک روی این دکمه بتواند هر نام جدیدی که می خواهد وارد کند</li> - <li> - <pre class="brush: js">myButton.onclick = function() { - setUserName(); -} -</pre> - </li> -</ol> - -<p dir="rtl">حالا اگر برای اولین بار از صحفه وبسایت دیدار(ویزیت) کنید ٫ از شما می خواهد نام خود را برای دریافت پیام شخصی وارد کنید و شما می توانید هر زمان که تمایل داشته باشید با کلیک کردن روی دکمه درون صحفه این نام را تغییر دهید . این ویژگی به کمک ذخیره سازی محلی در درون مرورگر انجام می شود و بعد از بستن صفحه و مجددا باز کردن آن پیام به شما نمایش داده خواهد شد.</p> - -<h2 dir="rtl" id="نتیجه_گیری">نتیجه گیری</h2> - -<p dir="rtl">اگر تمام دستورالعمل های مقاله را دنبال کرده باشید باید چیزی مشابه صفحه زیر مشاهده کنید ( شما می توانید <a href="http://mdn.github.io/beginner-html-site-scripted/">خروجی کار ما را از اینجا مشاهده </a>ببینید )</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9539/website-screen-scripted.png" style="display: block; height: 995px; margin: 0px auto; width: 800px;"></p> - -<p dir="rtl">اگر به مشکلی بر خوردید می توانید کار خود را با نسخه نهایی مثال ما که<a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js"> کد آن روی گیتهاب موجود است</a> مقایسه کنید.</p> - -<p dir="rtl">در این مقاله فقط مثال ساده ای از عملکرد جاوا اسکریپت آورده شد اگر از این آموزش لذت بردید و می خواهید بصورت دقیق تر و حرفه ای تر به یاد گیری ادامه دهید به راهنمای <a href="/fa/docs/Web/JavaScript/راهنما">جاوااسکریپت</a> ما مراجعه کنید.</p> - -<p>{{PreviousNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website")}}</p> diff --git a/files/fa/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/fa/learn/getting_started_with_the_web/publishing_your_website/index.html deleted file mode 100644 index c4fe62434f..0000000000 --- a/files/fa/learn/getting_started_with_the_web/publishing_your_website/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: منتشر کردن وبسایت شما -slug: Learn/Getting_started_with_the_web/Publishing_your_website -tags: - - آموزش - - اف تی پی - - انتشار - - مقدماتی - - وب - - وبسرور - - گوگل اپ انجین - - گیتهاب -translation_of: Learn/Getting_started_with_the_web/Publishing_your_website -original_slug: Learn/Getting_started_with_the_web/منتشر_کردن_وبسایت_شما ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</div> - -<div class="summary"> -<p dir="rtl">بعد از اتمام کد نویسی و سازماندهی و ساخت وبسایت ٫ زمان انتشار آن بصورت آنلاین فرا می رسید تا مردم بتوانند به وبسایت شما مراجعه کنند. در این مقاله روش انتشار کدهای که شما نوشته اید بصورت آنلاین را توضیح می دهد.</p> -</div> - -<h2 id="گزینه_ها_چیست_؟">گزینه ها چیست ؟</h2> - -<p>انتشار وبسایت یک موضوع (مبحث) ساده ای نیست . زیرا روش های متفاوتی برای این عمل وجود دارد . در این مقاله تمام روش های موجود پوشش داده نشده است بلکه رایج ترین روش های که یک فرد مبتدی به راحتی از آن استفاده کند توضیح داده شده ست .</p> - -<h3 id="گرفتن_فضا_و_دامنه">گرفتن فضا و دامنه</h3> - -<p>اگر می خواهید روی تمام فرایند انتشار وبسایتان کنترل داشته باشید باید پول خرج کنید تا موارد زیر را برای انتشار وبسایت بدست آورید:</p> - -<ul> - <li dir="rtl">فضا (هاست) : اجاره فضا از یک شرکت خدمات دهنده فضا که خدمات <a href="/en-US/Learn/What_is_a_web_server">وبسرور </a>را می دهند. شما بعد از خرید فایل های وبسایت خود را در فضای خریداری شده بارگذاری می کنید و وبسرور وبسایت شما را در اختیار هرکسی که در خواست بازدید داشته باشد می گذارد.</li> - <li dir="rtl">نام دامنه :یک آدرس یکتا برای رسیدن به وبسایت شما است مانند <code>http://www.mozilla.org</code> یا <code>http://www.bbc.co.uk</code> . شما نام دامنه را برای حداقل یک سال یا بیشتر از یک مرکز ثبت دامنه اجاره می کنید.</li> -</ul> - -<p dir="rtl">بسیار از از حرفه ها از این طریق وبسایت خود را بارگذاری می کنند.</p> - -<p>In addition, you will need a {{Glossary("FTP", "File Transfer Protocol (FTP)")}} program (see <a href="/en-US/Learn/How_much_does_it_cost#Software">How much does it cost: software</a> for more details) to actually transfer the website files over to the server. FTP programs vary widely, but generally you have to log on to your web server using details provided by your hosting company (e.g. username, password, host name). Then the program shows you your local files and the web server's files in two windows, so you can transfer them back and forth:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9469/ftp.jpg" style="display: block; height: 487px; margin: 0px auto; width: 800px;"></p> - -<h4 id="Tips_for_finding_hosting_and_domains">Tips for finding hosting and domains</h4> - -<ul> - <li>We don't promote specific commercial hosting companies or domain name registrars here. To find hosting companies and registrars, just search for "web hosting" and "domain names". All registrars will have a feature to allow you to check if the domain name you want is available, or if someone else has already registered it.</li> - <li>Your home or office {{Glossary("ISP", "internet service provider")}} may provide some limited hosting for a small website. The available feature set will be limited, but it might be perfect for your first experiments — contact them and ask!</li> - <li>There are a few free services available like <a href="https://neocities.org/">Neocities</a>, <a href="https://www.blogger.com">Blogger</a>, and <a href="https://wordpress.com/">WordPress</a>. Again, you get what you pay for, but they are ideal for your initial experiments. Free services mostly don't require FTP software for uploads either — you can just drag and drop right inside their web interface.</li> - <li>Sometimes companies provide both hosting and domains in one package.</li> -</ul> - -<h3 id="استفاده_از_ابزارهای_آنلاین_مثل_گیتهاب_و_گوگل_اپ_انجین">استفاده از ابزارهای آنلاین مثل گیتهاب و گوگل اپ انجین</h3> - -<p>Some tools let you publish your website online:</p> - -<ul> - <li><a href="https://github.com/">GitHub</a> is a "social coding" site. It allows you to upload code repositories for storage in the <a href="http://git-scm.com/">Git</a> <strong>version control system. </strong>You can then collaborate on code projects, and the system is open-source by default, meaning that anyone in the world can find your GitHub code, use it, learn from it, and improve on it. GitHub has a very useful feature called <a href="https://pages.github.com/">GitHub Pages</a>, which allows you to expose website code live on the web.</li> - <li><a href="https://cloud.google.com/appengine/" title="App Engine - Build Scalable Web & Mobile Backends in Any Language | Google Cloud Platform">Google App Engine</a> is a powerful platform that lets you build and run applications on Google’s infrastructure — whether you need to build a multi-tiered web application from scratch or host a static website. See <a href="/en-US/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">How do you host your website on Google App Engine?</a> for more information.</li> -</ul> - -<p>Unlike most hosting, such tools are usually free to use, but you only get a limited feature-set.</p> - -<h3 dir="rtl" id="استفاده_از_IDE_مثل_Thimble">استفاده از IDE مثل Thimble</h3> - -<p>There are a number of web apps that emulate a website development environment, allowing you to enter HTML, CSS and JavaScript and then display the result of that code when rendered as a website — all in one browser tab. Generally speaking these tools are quite easy, great for learning, and free (for basic features), and they host your rendered page at a unique web address. However, the basic features are pretty limited, and the apps usually don't provide hosting space for assets (like images).</p> - -<p>Try playing with some of these examples, and see which one you like the best:</p> - -<ul> - <li><a href="https://jsfiddle.net/">JSFiddle</a></li> - <li><a href="https://thimble.mozilla.org">Thimble</a></li> - <li><a href="http://jsbin.com/">JS Bin</a></li> - <li><a href="https://codepen.io/">CodePen</a></li> -</ul> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9471/jsbin-screen.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p> - -<h2 id="انتشار_در_مقابل_گیتهاب">انتشار در مقابل گیتهاب</h2> - -<p>Now let's take you through how to easily publish your site via GitHub Pages.</p> - -<ol> - <li>First of all, <a href="https://github.com/">sign up for GitHub</a> and verify your email address.</li> - <li>Next, you need to <a href="https://github.com/new">create a repository</a> for your files to go in.</li> - <li>On this page, in the <em>Repository name</em> box, enter <em>username</em>.github.io, where <em>username</em> is your username. So for example, our friend bobsmith would enter <em>bobsmith.github.io</em>.<br> - Also check <em>Initialize this repository with a README</em> and then click <em>Create repository</em>.<img alt="" src="https://mdn.mozillademos.org/files/9479/github-create-repo.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></li> - <li>After that, drag and drop the content of your website folder into your repository and then click <em>Commit changes</em>.<br> - - <div class="note"> - <p><strong>Note</strong>: Make sure your folder has an <code>index.html</code> file.</p> - </div> - </li> - <li> - <p>Now navigate your browser to <em>username</em>.github.io to see your website online. For example, for the username <em>chrisdavidmills</em>, go to <a href="http://chrisdavidmills.github.io/"><em>chrisdavidmills</em>.github.io</a>.</p> - - <div class="note"> - <p><strong>Note</strong>: It may take a few minutes for your website to go live. If it doesn't work immediately, you may have to wait a few minutes and then try again.</p> - </div> - </li> -</ol> - -<p>To learn more, see <a href="https://help.github.com/categories/github-pages-basics/">GitHub Pages Help</a>.</p> - -<h2 id="مطالعه_بیشتر">مطالعه بیشتر</h2> - -<ul> - <li><a href="/en-US/Learn/What_is_a_web_server">What is a web server</a></li> - <li><a href="/en-US/Learn/Understanding_domain_names">Understanding domain names</a></li> - <li><a href="/en-US/Learn/How_much_does_it_cost">How much does it cost to do something on the web?</a></li> - <li><a href="https://www.codecademy.com/learn/deploy-a-website">Deploy a Website</a>: A nice tutorial from Codecademy that goes a bit further and shows some additional techniques.</li> - <li><a href="http://alignedleft.com/resources/cheap-web-hosting">Cheap or Free Static Website Hosting</a> by Scott Murray has some useful ideas on available services.</li> -</ul> - -<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</p> - -<h2 id="مرتبط_به_مقاله">مرتبط به مقاله</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/fa/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/fa/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html deleted file mode 100644 index 7a3e83cb82..0000000000 --- a/files/fa/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: وب سایت شما چه شکلی است؟ -slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like -tags: - - آموزش - - طراحی - - طرح - - فونت - - محتوا - - مقدماتی - - منابع -translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like -original_slug: Learn/Getting_started_with_the_web/وب_سایت_شما_چه_شکلی_است؟ ---- -<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" dir="rtl"> -<p>وب سایت شما چه شکلی است؟ در مورد کار برنامه ریزی و طراحی وب سایتتان <em>قبل از</em> نوشتن کدهای آن بحث می کنند. که شامل این موارد می شود، "چه اطلاعاتی وب سایت من نیاز دارد؟" "چه فونت ها و رنگ هایی را می خواهم؟" "سایت من چه کار قرار هست انجام دهد؟"</p> -</div> - -<h2 dir="rtl" id="قبل_از_شروع_کار_برنامه_ریزی">قبل از شروع کار: برنامه ریزی</h2> - -<p dir="rtl">قبل از انجام هر کاری ایده نیاز دارید. وب سایتتان چه کاری باید انجام دهد؟ یک وب سایت عموماً هر کاری می تواند انجام دهد، ولی برای شروع باید یک چیز ساده را انتخاب کنید. در اینجا شروع می کنیم یک صفحه ساده وب با یک سربرگ، یک تصویر، و چندتا پاراگراف بسازیم.</p> - -<p dir="rtl">برای شروع لازم هست که به سوالات زیر پاسخ دهید:</p> - -<ol> - <li dir="rtl"><strong>وب سایتتان در مورد چیست؟ </strong>حیوانات را دوست دارید یا،شهر اصفهان، یا بازی شبگرد؟</li> - <li dir="rtl"><strong>در مورد این موضوع چه اطلاعاتی را رائه می کنید؟ </strong>یک عنوان و چندتا پاراگراف بنویسید، و بعد از آن در مورد تصویری فکر کنید که می خواهید در صفحه خود نمایش دهید.</li> - <li dir="rtl">به صورت خیلی کلی، <strong>وب سایت شما چه شکلی است</strong>. رنگ پس زمینه چه شکلی است؟ چه سبکی از فونت مناسب کار شماست: رسمی، کارتونی، ضخیم و شلوغ، ظریف.</li> -</ol> - -<div class="note"> -<p dir="rtl"><strong>توجه</strong>: پروژه های خیلی پیچیده به دستورالعمل (guidelines) جزئی تری نیاز دارند که تمامی جزئیات مربوط رنگها، فونت ها، فاصله بین موارد داخل صفحه، حالت مناسب نوشته ها، و ... را تعیین کند. گاهی اوقات آن را راهنمای طراحی (design guide) یا کتاب برند (brand book) می گویند، که می توانید نمونه از آن را در <a href="https://www.mozilla.org/en-US/styleguide/products/firefox-os/">دستورالعمل های سیستم عامل فایرفاکس (Firefox OS Guidelines)</a> ببینید.</p> -</div> - -<h2 dir="rtl" id="طراحی_خود_را_بکشید">طراحی خود را بکشید</h2> - -<p dir="rtl">قدم بعدی، برداشتن قلم و کاغذ و کشیدن یک چیز تقریبی است که قرار هست وب سایت شما آن شکلی باشد. برای نخستین صفحه وب ساده یتان، چیز زیادی برای کشیدن وجود ندارد، ولی برای عادت کردن به این کار باید از همین الان آن را انجام دهید. واقعاً کمک کننده است --توجه کنید که قرار نیست کمال المک باشید!</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 dir="rtl"><strong>توجه</strong>: حتی در وب سایت های پیچیده که داراری تیم های طراحی جداگانه هستند، کار با کشیدن طرح های دستی روی کاغذ شروع می شود و بعداً برای طرح نهایی از یک ویرایشگر گرافیکی یا تکنولوژی های وب استفاده می کنند.</p> - -<p dir="rtl">تیم های وب اغلب شامل هم یک طراح گرافیکی و یک طراح {{Glossary("UX", "user-experience")}} (UX) هستند. طراح های گرافیکی یا graphic designers، مشخص است که چه کاری انجام می دهند، قرار دادن اجزاء وب سایت کنار یکدیگر. <span id="result_box" lang="fa"><span>طراحان UX</span> <span>نقش</span> <span>تا حدودی</span> <span>انتزاعی تر</span></span>ی دارند که باید به تجربه کاربران و نحوه تعامل آنها با وب سایت بپردازند.</p> -</div> - -<h2 dir="rtl" id="منابع_خود_را_تعیین_کنید">منابع خود را تعیین کنید</h2> - -<p dir="rtl">در این لحظه خوب است محتوایی که قرار است بر روی صفحه وب شما ظاهر شود را کنار یکدیگر قرار دهیم.</p> - -<h3 dir="rtl" id="متن">متن</h3> - -<p dir="rtl"><span id="result_box" lang="fa"><span>باز هم باید</span> <span>پاراگراف ها</span> <span>و عنوان خود را</span> <span>از</span> <span>قبل داشته باشید</span></span>. پس آن را در نظر بگیرید.</p> - -<h3 dir="rtl" id="قالب_رنگ">قالب رنگ</h3> - -<p dir="rtl">برای انتخاب رنگ، به قسمت <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool">انتخاب کننده رنگ(the Color Picker) </a>رفته و رنگ مورد نظر خود را پیدا کنید. هر زمان که بر روی رنگی کلیک می کنید، یک کد شش حرفی عجیب شبیه <code>#660066</code> را می بینید. به این کد هگز (دسیمال) گفته می شود و نشان دهنده رنگ شماست. این کد را فعلاً در جای مطمئنی کپی کنید.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8975/Screenshot%20from%202014-11-03%2017:40:49.png" style="height: 262px; width: 448px;"></p> - -<h3 dir="rtl" id="تصاویر">تصاویر</h3> - -<p dir="rtl">برای انتخاب یک تصویر، به <a href="https://www.google.com/imghp?gws_rd=ssl">تصاویر گوگل (Google Images)</a> رفته و چیز مناسبی را جستجو کنید.</p> - -<ol> - <li dir="rtl">وقتی تصویر مناسبی را پیدا کردید، روی آن کلیک کنید.</li> - <li dir="rtl">کلید <em>View image</em> را بزنید.</li> - <li dir="rtl">در صفحه بعدی روی تصویر راست کلیک کنید (در مکینتاش از Ctrl + click استفاده کنید) و <em>Save Image As...</em> را انتخاب کنید، و بعد از آن مکان مناسبی را برای ذخیره تصویر خود انتخاب کنید. علاوه بر آن، آدرس وب تصویر را هم از قسمت آدرس بار مرورگر، برای استفاده های بعدی کپی کنید.</li> -</ol> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8985/Screenshot%20from%202014-11-04%2015:09:21.png" style="height: 293px; width: 420px;"></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8989/Screenshot%20from%202014-11-04%2015:20:48.png" style="height: 292px; width: 340px;"></p> - -<p dir="rtl">توجه داشته باشید که اکثر عکس های موجود در سرچ گوگل دارای حق کپی رایت هستند . برای اینکه تصادفا این قانون نقض نشود شما می توانید از فلتر لایسنس گوگل استفاده کنید .</p> - -<p dir="rtl">۱ روی دکمه tools کلیک کنید و ۲ در منوی انتخاب شده گزینه label for reuse را انتخاب کنید تا تصاویر برای استفاده مجدد در جست و جو ظاهر شوند.</p> - -<div class="note"> -<p><img alt="" src="https://mdn.mozillademos.org/files/8981/Screenshot%20from%202014-11-04%2014:27:45.png" style="height: 195px; width: 587px;"></p> -</div> - -<h3 dir="rtl" id="فونت">فونت</h3> - -<p dir="rtl">برای انتخاب فونت:</p> - -<ol> - <li dir="rtl">به <a href="http://www.google.com/fonts">گوگل فونت(Google Fonts)</a> بروید و در لیست فونت مورد نظر خود را پیدا کنید. برای اعمال فیلترهای بیشتر بر روی نتایج می توانید از قسمت سمت راست استفاده کنید.</li> - <li dir="rtl">بعد از انتخاب فونت بر روی آیکن "بعلاوه" (Add to) کلیک کنید.</li> - <li dir="rtl">در پنل پایین صفحه بر روی کلید "* Family Selected"<em> کلیک کنید</em> ("*" بستگی به این دارد که چه تعداد فونت انتخاب کرده باشید).</li> - <li dir="rtl">در پنجره ظاهر شد یا به اصطلاح popup box ، می توانید کدهای Google را ببینید که برای استفاده های آینده آنها را کپی و ذخیره کنید.</li> -</ol> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13871/font1.png" style="height: 359px; width: 600px;"></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13873/font2.png" style="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> |