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

Here are the guys, it's Amit and welcome to Dev Prima.
 این بچه ها هستند، آمیت است و به Dev Prima خوش آمدید.
So then welcome to lesson number five and in this lesson I'm taking a look at the head
 پس به درس شماره پنج خوش آمدید و در این درس نگاهی به سر می‌اندازم
section and body section of our HTML file.
 بخش و بخش بدنه فایل HTML ما.
So let's begin.
 پس بیایید شروع کنیم.
So first let's take a look at the head section.
 بنابراین ابتدا اجازه دهید نگاهی به بخش سر بیاندازیم.
So let's just move this down a little and open this up and we can write our code in here.
 پس بیایید این را کمی پایین بیاوریم و آن را باز کنیم و می توانیم کد خود را در اینجا بنویسیم.
So what exactly is the head section of our HTML file?
 بنابراین دقیقاً قسمت head فایل HTML ما چیست؟
Well, this is where we put all the background information on our site.
 خوب، اینجا جایی است که ما تمام اطلاعات پس زمینه را در سایت خود قرار می دهیم.
So things such as who the author is, keywords that relate to our website, a basic description
 بنابراین مواردی از قبیل اینکه نویسنده کیست، کلمات کلیدی که به وب سایت ما مربوط می شود، توضیحات اساسی
on the site, the title, also any sort of links to other files as well, such as CSS will
 در سایت، عنوان، همچنین هر نوع پیوند به فایل های دیگر نیز مانند CSS خواهد بود
all go in our head section.
 همه به بخش سر ما بروید.
Basically, anything that we don't want to show up in the main browser window will go in
 اساساً، هر چیزی که نمی خواهیم در پنجره اصلی مرورگر نشان داده شود، وارد می شود
our head section.
 بخش سر ما
So just think of it as the background information.
 بنابراین فقط به عنوان اطلاعات پس زمینه فکر کنید.
So then let's take a look at some examples.
 پس بیایید به چند نمونه نگاهی بیندازیم.
First we're going to look at is the title tag.
 ابتدا به تگ عنوان نگاه می کنیم.
So at the moment, then you can see on our tab here, we've got a bunch of numbers and indexed
 بنابراین در حال حاضر، سپس می‌توانید در برگه ما اینجا ببینید، ما تعداد زیادی اعداد و نمایه‌سازی شده‌ایم
that HTML, which looks horrible, right?
 آن HTML که وحشتناک به نظر می رسد، درست است؟
Not used for any at all.
 اصلا برای هیچ کدوم استفاده نمیشه
How do we change that?
 چگونه آن را تغییر دهیم؟
Pretty simple.
 خیلی ساده
In our head section, we simply use a title tag.
 در بخش head ما به سادگی از یک برچسب عنوان استفاده می کنیم.
And inside that, we simply type in what we want this page to be called.
 و در داخل آن، ما به سادگی تایپ می کنیم که می خواهیم این صفحه چه نامیده شود.
So I'm just going to type in, let's go for the div, freemer, and then usually have this
 بنابراین من فقط قصد دارم تایپ کنم، بیایید برای div، freemer، و سپس معمولاً این را داشته باشیم
sort of pipe sort of symbol on you in naming tabs, and we'll type in HTML lessons.
 در نامگذاری برگه ها، نوعی علامت لوله بر روی شما وجود دارد، و ما در درس های HTML تایپ می کنیم.
Okay.
 باشه
So now you can see up here in our tab, we have the title DevDreamer, HTML lessons.
 بنابراین اکنون می توانید اینجا در برگه ما ببینید، ما عنوان DevDreamer، درس های HTML را داریم.
Very simple.
 خیلی ساده
Now the next one we're going to look at is the meta character set tab.
 حالا مورد بعدی که می خواهیم به آن نگاه کنیم، تب مجموعه متا کاراکتر است.
And this is just basically for character encoding, in other words, what sort of characters
 و این اساساً برای رمزگذاری کاراکترها، به عبارت دیگر، چه نوع کاراکتری است
that we're using.
 که ما از آن استفاده می کنیم.
To write it, we simply do an open bracket.
 برای نوشتن آن، به سادگی یک براکت باز انجام می دهیم.
And for now, I'm going to refer to these as open and closing brackets because that's essentially
 و در حال حاضر، من قصد دارم به آنها به عنوان براکت های باز و بسته اشاره کنم زیرا اساساً اینطور است
what they've been used as in HTML.
 آنچه که در HTML استفاده شده است.
So our open bracket, in the word meta, META, space, class it, which is basically an amalgamation
 بنابراین براکت باز ما، در کلمه متا، متا، فضا، کلاس آن را، که در اصل یک ادغام است
of the words character and set.
 از کلمات شخصیت و مجموعه.
And then in here, the one that is used universally and the one that you're going to be using is
 و سپس در اینجا، موردی که به طور جهانی استفاده می شود و موردی که قرار است از آن استفاده کنید، است
UTF, hyphen 8, okay, and then we close it off.
 UTF، خط فاصله 8، بسیار خوب، و سپس آن را می بندیم.
Now at this point, you're saying, hang on a second, I thought you told me that tags in HTML
 حالا در این مرحله، شما می گویید، یک لحظه صبر کنید، فکر کردم شما این برچسب ها را در HTML به من گفتید
have open tags and closing tags.
 برچسب های باز و بسته شونده داشته باشید.
So why then have you not included a closing meta tag here like this?
 پس چرا یک متا تگ پایانی را در اینجا قرار نداده اید؟
Right?
 درسته؟
And why is this coming up with an error?
 و چرا این با خطا روبرو می شود؟
Why is this all gone red?
 چرا این همه قرمز شده است؟
Well, there are a handful of tags in HTML that don't actually require a closing tag, and
 خوب، تعداد انگشت شماری از تگ ها در HTML وجود دارند که در واقع نیازی به تگ بسته شدن ندارند، و
that's because we're not actually putting anything in those tags.
 این به این دلیل است که ما در واقع چیزی در آن برچسب ها قرار نمی دهیم.
So for example, this meta tag here, we're not actually putting anything inside the tag,
 به عنوان مثال، این متا تگ در اینجا، ما در واقع چیزی را در داخل تگ قرار نمی دهیم،
it just goes inside the opening part of the tag.
 فقط داخل قسمت باز تگ می رود.
So we can just close it off like this, okay, whereas with the title, we actually had something
 بنابراین ما می‌توانیم آن را به این شکل ببندیم، خوب، در حالی که با عنوان، ما واقعاً چیزی داشتیم
in here, that's why we had to close it off with a closing tag.
 در اینجا، به همین دلیل است که ما مجبور شدیم آن را با یک برچسب بسته شدن ببندیم.
Okay, so let's take a look at another one.
 خوب، پس بیایید به یکی دیگر نگاه کنیم.
Let's take a look at some other meta tags, so we do meta, and then we do name.
 بیایید نگاهی به برخی متا تگ های دیگر بیندازیم، بنابراین متا را انجام می دهیم و سپس نام را انجام می دهیم.
And let's go for author, and this is of course just who the author on the site is, so we can
 و بیایید سراغ نویسنده برویم، و این البته نویسنده سایت است، بنابراین ما می توانیم
do content.
 انجام محتوا
And then in here, we can write with the author it, so I'm just going to put my name in,
 و سپس در اینجا، می‌توانیم با نویسنده آن را بنویسیم، بنابراین من فقط می‌خواهم نام خود را در آن قرار دهم،
kind of give it a close that off.
 به نوعی آن را ببندید که خاموش است.
Let's go for another meta tag.
 بیایید سراغ یک متا تگ دیگر برویم.
So meta name equals, now let's go for description, do space, content.
 بنابراین نام متا برابر است، حالا بیایید سراغ توضیحات، فضا، محتوا برویم.
And this is going to be, let's just do a very simple one, let's see, this site is about HTML,
 و این خواهد شد، بیایید یک کار بسیار ساده انجام دهیم، بیایید ببینیم، این سایت در مورد HTML است،
right?
 درست است؟
So the very basic, I'm just going to minimize this a bit.
 بنابراین بسیار اساسی، من فقط قصد دارم این را کمی به حداقل برسانم.
So we put everything on one line, and in fact, that's just, that looks a bit small,
 بنابراین ما همه چیز را در یک خط قرار می دهیم، و در واقع، این فقط، کمی کوچک به نظر می رسد،
let's just bump this up now, okay, how about better, and let's go for another meta tag,
 بیایید همین الان به این موضوع بپردازیم، خوب، چه بهتر، و بیایید سراغ متا تگ دیگری برویم،
let's name equals, and let's go for an keyword, content, and then we just put some comma separate
 اجازه دهید نام برابر است، و بیایید به دنبال یک کلمه کلیدی، محتوا برویم، و سپس فقط مقداری کاما را جدا کنیم
to keywords, so we can just say HTML, tutorial, and then we can just close that off.
 به کلمات کلیدی، بنابراین ما فقط می توانیم HTML، آموزش را بگوییم، و سپس می توانیم آن را ببندیم.
Okay, so these are the basic meta tags that you can be using, and there is another one
 خوب، پس اینها متا تگ های اساسی هستند که می توانید از آنها استفاده کنید، و یکی دیگر وجود دارد
actually as well, which I'll share with you, and this is basically used for ensuring that
 در واقع همینطور، که من با شما به اشتراک خواهم گذاشت، و این اساساً برای اطمینان از آن استفاده می شود
the site looks good on a mobile.
 سایت روی موبایل خوب به نظر می رسد.
So it's a bit lengthy, so just bear with me, but you will find that because you'll be writing
 بنابراین کمی طولانی است، پس فقط من را تحمل کنید، اما متوجه خواهید شد زیرا شما می نویسید
this over and over and over again, it will just become second H to you, and you'll just
 این بارها و بارها، فقط برای شما H دوم خواهد شد و شما فقط خواهید شد
know how to write it.
 می دانم چگونه آن را بنویسم
So again, we start with meta, and we'll say name equals, and what viewport, and then content
 بنابراین، دوباره با متا شروع می‌کنیم، و می‌گوییم نام برابر است، چه viewport، و سپس محتوا
equals, with equals device, hyphen with comma, initial hyphen scale equals one, we can
 برابر، با دستگاه برابر، خط فاصله با کاما، مقیاس خط فاصله اولیه برابر با یک، ما می توانیم
write like this as well, zero, and then we'll just close that off.
 همینطور بنویسید، صفر، و سپس آن را می بندیم.
So again, as I said, it's a bit lengthy, so it's a bit lengthy, but as I said, as you keep
 پس باز هم همانطور که گفتم، کمی طولانی است، پس کمی طولانی است، اما همانطور که گفتم، همانطور که شما نگه دارید
writing this out, you'll get used to it, and it will become second H to you, let's have
 با نوشتن این، به آن عادت خواهید کرد و برای شما H دوم خواهد شد
a look at something else, and let's go for changing this.
 نگاهی به چیز دیگری بیندازیم، و اجازه دهید این را تغییر دهیم.
So at the moment that we don't actually have an icon on our page, so if we went to a site
 بنابراین در لحظه ای که ما واقعاً نمادی در صفحه خود نداریم، بنابراین اگر به سایتی رفتیم
such as Facebook, we can see that with Facebook, there's a logo here, this little icon, so how
 مانند فیس بوک، ما می توانیم ببینیم که با فیس بوک، یک لوگو در اینجا وجود دارد، این نماد کوچک، پس چگونه
do we add that?
 آیا آن را اضافه کنیم؟
It's very simple, we'll do link, I'm going to say rel, icon, and then basically we need to
 خیلی ساده است، ما پیوند را انجام می دهیم، می خواهم بگویم rel، نماد، و سپس اساساً باید
put an image in here.
 یک تصویر در اینجا قرار دهید
So at the moment, if we drag this down, open this up, we can see all we've got in our file
 بنابراین، در حال حاضر، اگر این را به پایین بکشیم، این را باز کنیم، می‌توانیم همه چیزهایی را که در فایل خود داریم ببینیم
is in our folder, so it's just an index.hcmile file, so let's just drag this image in here, close
 در پوشه ما قرار دارد، بنابراین فقط یک فایل index.hcmile است، بنابراین اجازه دهید این تصویر را به اینجا بکشید، ببندید
it out, and now if I just move this across, you'll see we have our logo here, okay?
 آن را بیرون بیاورم، و حالا اگر من فقط آن را جابه جا کنم، خواهید دید که ما لوگوی خود را اینجا داریم، خوب؟
So how do we use this logo then as our icon image?
 پس چگونه از این لوگو به عنوان تصویر نماد خود استفاده کنیم؟
Well, it's very simple, we do link, rel, icon, and then we just simply say href, we reference
 خوب، خیلی ساده است، ما پیوند، rel، نماد را انجام می دهیم، و سپس به سادگی می گوییم href، مرجع می کنیم
it to that, and it's ddlogo.png, okay, right here, we can close this up, and now as you
 آن را به آن، و آن را ddlogo.png، خوب، همین جا، ما می توانیم این را ببندیم، و اکنون به عنوان شما
can see, we now have our icon, we now have our icon here, okay, very simple, so that's basically
 می توانید ببینید، ما اکنون نماد خود را داریم، اکنون نماد خود را اینجا داریم، بسیار ساده است، بنابراین اساساً
things that go in the head tag, let me show you actually another one, something you're
 چیزهایی که در تگ head قرار می گیرند، اجازه دهید در واقع یکی دیگر را به شما نشان دهم، چیزی که شما هستید
going to be using quite a lot, it's basically when you learn CSS, we're going to be putting
 بسیار زیاد استفاده خواهد شد، اساساً زمانی است که شما CSS را یاد می گیرید، ما قرار است آن را قرار دهیم
our CSS in a separate file, so let me try to do that, it's link, rel, equals style sheet,
 CSS ما در یک فایل جداگانه، بنابراین اجازه دهید من سعی کنم این کار را انجام دهم، پیوند، rel، برابر با شیوه نامه است،
and then before HTML5 you had to do something called type, and then text slash CSS, but with
 و سپس قبل از HTML5 باید کاری به نام type و سپس متن CSS اسلش انجام می دادید، اما با
HTML5, you don't need to put this in anymore, you can simply go to the href, and this is going
 HTML5، دیگر نیازی به قرار دادن آن ندارید، می توانید به سادگی به href بروید، و این در حال انجام است
to be style.css, now you can name this whatever you like, so this could be anything.css, you
 برای اینکه style.css باشد، اکنون می توانید نام آن را هر چه دوست دارید، نامگذاری کنید، بنابراین این می تواند هر چیزی باشد.css، شما
don't need to name it style.css, but this file we haven't actually created yet, so you
 نیازی نیست نام آن را style.css بگذارید، اما این فایل را ما هنوز ایجاد نکرده ایم، بنابراین شما
would actually go ahead and create this in your folder, so I'm going to let me show you how
 در واقع پیش می رود و این را در پوشه شما ایجاد می کند، بنابراین من به من اجازه می دهم چگونه به شما نشان دهم
to do that, so let's do grand end, create a new file, save this, make sure we're saving
 برای انجام این کار، پس بیایید پایان بزرگ را انجام دهیم، یک فایل جدید ایجاد کنیم، این را ذخیره کنید، مطمئن شوید که ذخیره می کنیم
the in, I HTML essence folder, and it was called style.css, save, and now we can see that
 پوشه in, I HTML essence، و نام آن style.css، ذخیره شد و اکنون می توانیم آن را ببینیم
we have a style.css file here, and we'll look at CSS, of course, later on down the line,
 ما در اینجا یک فایل style.css داریم و البته بعداً به CSS نگاه خواهیم کرد.
but just to give you a quick example, let's just do a body, select in the body, and I'm
 اما فقط برای ارائه یک مثال سریع، بیایید فقط یک بدن انجام دهیم، در بدنه انتخاب کنید، و من هستم
saying I want the background color to be red. Now, as you can see, now the background color
 گفتن میخوام رنگ پس زمینه قرمز باشه اکنون، همانطور که می بینید، اکنون رنگ پس زمینه است
has gone red, okay, so this external style sheet here, CSS file, is used for our styling,
 قرمز شده است، خوب، بنابراین این شیوه نامه خارجی در اینجا، فایل CSS، برای استایل ما استفاده می شود،
and it's linked, using this tag here, and the link rel style sheet, and then a reference
 و با استفاده از این تگ در اینجا، و شیوه نامه پیوند rel و سپس یک مرجع پیوند داده شده است
to it, and it goes in the head section. Okay, so I'm just going to delete this for now.
 به آن، و آن را در بخش head می رود. خوب، پس فعلاً می خواهم این را حذف کنم.
Okay, so that's basically the head section, so again, it's just all the information that
 خوب، پس این اساساً بخش سر است، بنابراین دوباره، فقط تمام اطلاعات آن است
goes in the background, and as I said, as you continue to build sites and practice and learn,
 در پس زمینه می رود، و همانطور که گفتم، همانطور که به ساختن سایت ها و تمرین و یادگیری ادامه می دهید،
this is going to become second H2U, and you'll be writing this out literally in 30 seconds.
 این به H2U دوم تبدیل خواهد شد و شما این را به معنای واقعی کلمه در 30 ثانیه خواهید نوشت.
So then let's just close this out, or by the way, you can close tags down or collapse
 پس بیایید این را ببندیم، یا به هر حال، می‌توانید برچسب‌ها را ببندید یا جمع کنید
them rather by clicking on this little arrow here, okay, that actually closes it up. So then
 آنها را با کلیک بر روی این فلش کوچک در اینجا، بسیار خوب، در واقع آن را می بندد. پس پس
now let's move on to the body section, and the body section is quite soft explanatory really.
 حالا بیایید به بخش بدنه برویم، و بخش بدن واقعاً توضیحی بسیار نرم است.
Everything that we actually want to show up on the web page will go in the body section,
 هر چیزی که واقعاً می‌خواهیم در صفحه وب نشان داده شود در بخش بدنه قرار می‌گیرد،
so things such as the paragraph tag that you've taken a look at, and other tags as well,
 بنابراین مواردی مانند تگ پاراگراف که به آن نگاه کرده اید و سایر برچسب ها نیز،
such as image tag will go in here as well. It's going to be quite big, yeah, it's huge
 مانند برچسب تصویر در اینجا نیز وارد خواهد شد. بسیار بزرگ خواهد بود، بله، بزرگ است
because this is quite a big file, just do style equals with 200 pixels. Okay, so we can put
 از آنجا که این یک فایل بسیار بزرگ است، فقط استایل را با 200 پیکسل انجام دهید. باشه پس میتونیم بذاریم
images in here as well like that, okay? So that's it for this lesson guys, so again, a quick
 تصاویر در اینجا نیز مانند آن، خوب؟ پس بچه ها برای این درس تمام شد، پس دوباره، سریع
recap, anything that goes in the head section is basically the background information for the
 خلاصه، هر چیزی که در قسمت head قرار می گیرد اساساً اطلاعات پس زمینه برای آن است
site, so things such as description, keywords, with authories, title, et cetera, links to other
 سایت، بنابراین مواردی مانند توضیحات، کلمات کلیدی، با مقامات، عنوان، و غیره، پیوند به سایر موارد
files as well, and then for the body section, it's basically what we want to show up in the
 فایل‌ها نیز، و سپس برای بخش بدنه، اساساً چیزی است که می‌خواهیم در آن نشان دهیم
actual browser window. Okay guys, thanks for watching, hope you enjoyed it, and hope it was useful,
 پنجره واقعی مرورگر بسیار خوب بچه ها، از تماشای آن متشکرم، امیدوارم از آن لذت برده باشید و امیدوارم مفید بوده باشد،
please subscribe, and I'll see you on the next one.
 لطفا مشترک شوید، و من شما را در مورد بعدی می بینم.