تهیه شده توسط : علیرضا الهامی پور

Hey there guys, my name's Amit and welcome to DevDreamer. So then in this lesson we're
 سلام بچه‌ها، من آمیتم و خوش اومدید به DevDreamer. در این درس می‌خواهیم...
taking a look at the syntax of HTML and that basically means how HTML is written. And
 نگاهی به نحو HTML می‌اندازیم که در واقع یعنی HTML چطور نوشته می‌شود. و
also we're going to be looking at the document structure of a HTML file. So all HTML
 همچنین ما به ساختار سند یک فایل HTML نگاهی خواهیم انداخت. بنابراین تمام HTML
files start life out as a basic shell and I'm going to be showing you how to write that.
 فایل‌ها از یک پوسته‌ی اولیه شروع می‌شوند و من به شما نحوه‌ی نوشتن اون رو نشون می‌دم.
And as you see it is very, very simple. So in the previous lesson then we looked at text
 و همونطور که می‌بینید خیلی، خیلی ساده‌ست. در درس قبلی به متن پرداختیم.
editors. So you should now have your text editor downloaded and you should now be ready
 ویرایشگرها. حالا باید ویرایشگر متن خود را دانلود کرده باشید و باید آماده باشید.
to start writing some HTML. So the first thing we want to do is we want to go ahead and
 برای شروع نوشتن HTML، اولین کاری که می‌خواهیم بکنیم اینه که بریم جلو و...
create a new folder on our desktop. So do right click, new folder and I'm just going to rename
 یک پوشه جدید روی دسکتاپ‌مون بسازیم. پس راست کلیک می‌کنم، پوشه جدید و فقط می‌خوام نامش رو عوض کنم.
this HTML lessons. You can call it anything you like. Now the reason we're creating this
 این درس‌های HTML هست. می‌تونی هر چیزی که دوست داری بهش بگی. حالا دلیل اینکه داریم اینو می‌سازیم اینه که...
folder is because this is where our HTML file is going to live. And as you'll see further
 پوشه به این دلیله که اینجا جاییه که فایل HTML ما قرار می‌گیره. و همونطور که ادامه می‌بینید...
down the line when you start learning other languages such as CSS and JavaScript you'll see
 وقتی که شروع به یادگیری زبان‌های دیگه‌ای مثل CSS و JavaScript می‌کنی، در آینده متوجه می‌شی که...
that you're going to be keeping all your files in the same folder. Now technically for
 که قراره همه فایل‌هات رو توی یه پوشه نگه‌داری. حالا از نظر فنی برای
this example we don't need to create a folder because we're only working with a single
 در این مثال نیازی به ایجاد یک پوشه نداریم چون فقط با یک دونه کار می‌کنیم.
file, a single HTML file. And however it is good to get into the practice of doing this.
 یک فایل، یک فایل HTML ساده. و هرچند خوب است که به این کار عادت کنید.
So then we've got our folder and now we need to create our HTML file. And to do this we
 پس حالا که پوشه‌مون رو داریم، باید فایل HTML‌مون رو بسازیم. برای این کار، ما...
simply need to open up our text editor. So go ahead and open up your text editor we're using
 فقط کافیه ویرایشگر متن‌مون رو باز کنیم. پس بریم و ویرایشگر متن‌مون رو باز کنیم. ما داریم از
brackets in this tutorial. And what we want to do is we want to create our file in here our
 قاب‌های موجود در این آموزش. و چیزی که ما می‌خواهیم انجام بدهیم این است که فایل‌مون رو اینجا بسازیم.
HTML file and then we want to save it into this folder. Let's just open this up and of course
 فایل HTML رو داریم و حالا می‌خواهیم توی این پوشه ذخیره‌اش کنیم. بیایید این رو باز کنیم و البته...
it's blank. There's nothing in there. And what we're going to do is we're going to create that HTML
 خالیه. هیچ چیزی توش نیست. و ما قراره اون HTML رو بسازیم.
file here and then we're going to save it into this folder. So in your text editor go to file
 فایل رو اینجا قرار می‌دیم و بعد می‌خواهیم توی این پوشه سیو کنیم. پس در ویرایشگر متنتون به قسمت فایل برید.
and then new or you can do the keyboard shortcut command N on the Mac. I believe it's control N on
 و بعد می‌تونید از میان‌بر کلیدی فرمان N در مک استفاده کنید. فکر می‌کنم در ویندوز هم control N هست.
Windows. And then what you want to do is you want to save this and you want to make sure that you
 ویندوز. حالا چیزی که می‌خواید انجام بدید اینه که اینو ذخیره کنید و مطمئن بشید که شما...
save and get within that folder we created. So it's HTML lessons. So I'll double click that.
 ذخیره کن و برو داخل اون پوشه‌ای که درست کردیم. پس اینجا درس‌های HTML هست. حالا دو بار روی اون کلیک می‌کنم.
And now you want to save this file as index.html. Now that that HTML probably makes sense because
 و حالا می‌خواهید این فایل را به عنوان index.html ذخیره کنید. حالا که این HTML احتمالاً منطقی به نظر می‌رسد چون
of course we're writing HTML so we can use the HTML file extension. But why index? Well most websites
 البته که داریم HTML می‌نویسیم، پس می‌توانیم از پسوند فایل HTML استفاده کنیم. اما چرا "index"؟ خوب، بیشتر وب‌سایت‌ها...
don't just have a single page. They have multiple pages. And so the browser needs to know which page
 تنها یک صفحه ندارند. چندین صفحه دارند. بنابراین مرورگر باید بداند که کدام صفحه...
to go to as a sort of default. And so that's why we use index.html to let the browser know which page
 به عنوان یک نوع پیش‌فرض به آنجا بروید. و به همین دلیل است که ما از index.html استفاده می‌کنیم تا به مرورگر بگوییم کدام صفحه را بارگذاری کند.
to go to first. So save it as index.html and then click on save. So as you can see then we've got
 برای شروع، اینو به عنوان index.html ذخیره کن و بعد روی ذخیره کلیک کن. همونطور که می‌بینی، حالا ما داریم
our index.html file now within our folder. And if we go back to our text editor we can see
 فایل index.html ما حالا داخل پوشه‌مون هست. و اگه به ویرایشگر متن‌مون برگردیم، می‌تونیم ببینیم
that here on the left hand side we've got index.html. So then now that we've got our HTML file created
 که اینجا در سمت چپ، ما index.html داریم. حالا که فایل HTML رو ایجاد کردیم،
we can now start writing our HTML code. And so the first thing we're going to look at then is syntax.
 حالا می‌تونیم کدنویسی HTML خودمون رو شروع کنیم. پس اولین چیزی که بهش می‌پردازیم، سینتکس هست.
In other words, how is HTML actually written? So if you're called from previous lessons we said
 به عبارت دیگه، HTML چطور نوشته میشه؟ اگر به درس‌های قبلی مراجعه کنید گفتیم
that HTML is all about putting elements onto a web page. And the way that we write those elements
 HTML تماماً درباره قرار دادن عناصر در یک صفحه وب است. و نحوه‌ای که ما این عناصر را می‌نویسیم
is through the use of tags. So you have an open tag and a closing tag. Let's take a look at an example.
 این کار از طریق استفاده از تگ‌ها انجام می‌شه. شما یک تگ باز و یک تگ بسته دارید. بیایید یک مثال رو بررسی کنیم.
So the opening tag consists of a lesson sign. And then the name of the tag let's just go for
 بنابراین تگ باز شامل یک علامت درس است. و سپس نام تگ، بیایید فقط ادامه بدیم.
p which stands for paragraph and then a more than sign. So what we have here then is an
 p که مخفف پاراگراف است و سپس یک علامت بزرگتر. بنابراین آنچه که ما اینجا داریم این است که یک
opening tag and a closing tag. Now you notice I didn't actually have to write this out,
 تگ شروع و تگ پایان. حالا متوجه می‌شید که نیازی نبود اینو به طور کامل بنویسم،
brackets did it for me. And that's actually going to be a really big help for you because you'll
 براکت‌ها برای من کار کردند. و این واقعاً می‌تونه کمک بزرگی برای تو باشه چون که تو...
see that it really speeds up the process of coding. But as you can see then we've got an opening tag
 ببینید که واقعاً روند کدنویسی رو سرعت می‌بخشه. اما همونطور که می‌بینید، حالا یک تگ باز داریم.
here and a closing tag here. And the difference between the two is basically this forward slash.
 اینجا یه تگ باز داریم و اینجا یه تگ بسته. و فرق بین این دو در واقع همون خط مایل به جلوه.
So the look basically identical only difference is this forward slash here for the closing tag.
 پس این دو تقریباً شبیه هم هستند، تنها تفاوتش این خط مایل برای تگ بسته‌ست.
So let's take a look at another example. So let's go for a h1 which stands for heading one.
 پس بگذارید نگاهی به یک مثال دیگه بیندازیم. بریم سراغ h1 که به معنی عنوان یک هست.
So we do our opening tag. So we've got lesson sign h1 and then more than sign.
 پس ما تگ بازشو رو می‌زنیم. پس ما درس رو داریم، تگ h1 و بعد علامت بزرگ‌تر.
And again as you can see we have our opening tag and our closing tag. And again for the closing tag
 و باز هم همون‌طور که می‌بینید ما تگ باز و تگ بسته‌مون رو داریم. و دوباره برای تگ بسته
before we write the actual element we need to put this forward slash in. So that's basically how
 قبل از اینکه عنصر اصلی رو بنویسیم، باید این اسلش (/ ) رو بزنیم. در واقع این هم همون طوریه که...
you write elements in HTML. The other thing to know about HTML is that HTML is actually a nested
 شما عناصر را در HTML می‌نویسید. نکته دیگری که باید درباره HTML بدانید این است که HTML در واقع یک ساختار تو در تو است.
language meaning that you can actually have elements within elements. So for example we can have
 زبان به این معنی است که می‌توانیم عناصر را درون عناصر دیگر داشته باشیم. برای مثال، ما می‌توانیم داشته باشیم
div and don't worry if you don't know what any of these are we look at these later on.
 دیگه نگران نباشید اگه نمی‌دونید اینا چی هستن، بعداً بهشون می‌پردازیم.
And inside our deal we can have let's say we can have paragraph. And here we can just say hello.
 و توی توافق‌مون می‌تونیم بگیم یه پاراگراف داریم. و اینجا می‌تونیم فقط سلام بگیم.
Well, so as you can see then here we've got our div tag and then inside the div tag we have
 خب، همونطور که می‌بینید، اینجا تگ دیو ما رو داریم و داخل این تگ دیو، ما داریم
paragraph tag. Okay so that's the basics of HTML syntax. Now then let's take a look at how to
 برچسب پاراگراف. خب، این هم مبانی نحوه نوشتن HTML. حالا بیایید نگاهی بیندازیم به اینکه چطور...
write our first HTML file. So we're going to look at the document structure of a HTML file.
 اولین فایل HTML خودمون رو می‌نویسیم. پس می‌خواهیم به ساختار سند یک فایل HTML نگاه کنیم.
So the first thing we need then is we need something called a declaration. Okay so we need to tell
 پس اولین چیزی که نیاز داریم، یک اعلامیه است. خوب، پس باید بگوییم
the browser that this is a HTML file and the way that we do that is less inside, exclamation mark,
 مرورگری که این یک فایل HTML است و ما این کار را به این صورت انجام می‌دهیم، داخل علامت تعجب.
and then the word duck type, which sounds for document type,
 و بعد عبارت "duck type" رو داریم که به معنی نوع سند هست.
and then space and then the word HTML. And then finally more than that.
 و بعد فضا و بعد کلمه HTML. و در نهایت بیشتر از اون.
Okay so this basically just just declares that this is a HTML file that we're working with.
 خب، این basically فقط اعلام می‌کنه که این یک فایل HTML هست که داریم باهاش کار می‌کنیم.
Okay so before you do any HTML coding you actually need to put this in first.
 خب، قبل از اینکه هر کد HTML رو بنویسی، باید اینو اول بذاری.
Now let's go into a new line. And now we're going to write our first HTML tag.
 حالا بیایید به یک خط جدید برویم. و حالا می‌خواهیم اولین تگ HTML خود را بنویسیم.
And that is HTML. So let's do our open tag and then the closing tag. And then what we do is just
 و این HTML است. حالا بیایید تگ باز را بزنیم و بعد تگ بسته را. بعد از اون فقط کافیه که ما...
if you just press enter so that you bring it down to a new line. Now within our HTML tags we need
 اگر فقط دکمه Enter رو بزنی تا به خط جدید بری. حالا داخل تگ‌های HTML ما نیاز داریم
two other tags. And those are the head tag. And finally the body tag. Now notice a few things.
 دو تا تگ دیگه داریم. و اون‌ها تگ هِد و در نهایت تگ بادی هستن. حالا چندتا نکته رو دقت کنید.
Everything is contained within our HTML tags. We have our head tag and we have our body tag.
 همه چیز در تگ‌های HTML ما قرار داره. ما تگ هِد داریم و تگ بادی هم داریم.
Notice also that the head tag and the body tag are next to each other. So for example the body tag
 توجه کنید که تگ head و تگ body کنار هم قرار دارند. پس برای مثال، تگ body
isn't inside the head tag and the head tag isn't inside the body tag. So these two tags here are not
 داخل تگ هد نیست و تگ هد هم داخل تگ بدی نیست. پس این دو تگ اینجا نیستند.
as siblings. And the parent would be HTML. And this is a basic HTML document structure. Okay so let's go
 به عنوان خواهر و برادر. و والد هم HTML خواهد بود. و این ساختار پایه‌ای یک سند HTML است. خب، حالا بیایید برویم.
over it again. So you've got your doc type. Then you have your HTML tags. And then within your HTML tags you
 دوباره ازش عبور کن. پس نوع سندت رو داری. بعد تگ‌های HTML رو داری. و بعد داخل تگ‌های HTMLت
have the head tag and the body tag. And we'll look at exactly what these are used for a bit later on.
 تگ سر و تگ بدن رو داریم. و کمی بعد دقیقاً بررسی می‌کنیم که این‌ها برای چه چیزی استفاده می‌شوند.
But let's just put something into the body section here. So I can just press enter. And let's put in
 اما بیایید یه چیزی تو بخش بدنه اینجا قرار بدیم. پس می‌توانم فقط Enter رو بزنم. حالا بیایید وارد کنیم
paragraph tag which is p. Let's just say hello world. And I'm going to use the live preview button
 تگ پاراگراف که همون p هست. بیایید فقط بگیم سلام دنیا. و من دکمه پیش‌نمایش زنده رو استفاده می‌کنم.
which will open at the browser. And oh we just need to save it. And as you can see there it says hello
 که در مرورگر باز می‌شود. و اوه، فقط کافی است آن را ذخیره کنیم. و همان‌طور که می‌بینید، نوشته hello است.
world. So this is how you write a basic HTML file. In fact all HTML files will start life out like
 دنیا. پس اینجوری یک فایل HTML پایه می‌نویسید. در واقع همه فایل‌های HTML از اینجا شروع می‌شوند.
this. They'll have a doc type. And then next we'll have the HTML tags. And then inside those
 این. یه نوع داک داریم. بعدش تگ‌های HTML رو خواهیم داشت. و بعد داخل اون‌ها
you'll have the head tag and the body tag. Okay guys so that's how to write HTML and create a
 شما تگ سر (head) و تگ بدنه (body) خواهید داشت. خوب بچه‌ها، اینطوری HTML رو می‌نویسید و یک...
basic document structure. Please subscribe and I'll see you on the next one.
 ساختار پایه سند. لطفاً سابسکرایب کنید و تا ویدیو بعدی می‌بینمتون.