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

Okay, here are the guys, my name is Amit and welcome to DevDreamer.
 خوب، بچه ها اینجا هستند، اسم من آمیت است و به DevDreamer خوش آمدید.
So in this lesson, we're looking at elements and attributes in HTML.
 بنابراین در این درس، ما به عناصر و ویژگی ها در HTML نگاه می کنیم.
In the previous lesson, we looked at how to write the basic document structure for a
 در درس قبل، نحوه نوشتن ساختار سند پایه برای a را بررسی کردیم
HTML file, which basically looked like this.
 فایل HTML که اساساً شبیه این بود.
So we had our doc type, and we had our HTML tags, and then inside that we had the head tag
 بنابراین ما نوع doc خود را داشتیم و تگ های HTML خود را داشتیم و سپس در داخل آن تگ head را داشتیم
and the body tag.
 و برچسب بدن
And we also looked at syntax as well for HTML, in other words, how to write HTML.
 و همچنین سینتکس را برای HTML، به عبارت دیگر، نحوه نوشتن HTML را نیز بررسی کردیم.
So that consisted of an open tag, and then a closing tag.
 بنابراین شامل یک تگ باز و سپس یک تگ بسته می شود.
And that closing tag had this forward slash before the tag name.
 و آن تگ بسته دارای این اسلش جلو قبل از نام تگ بود.
So you see here as well with the closing head tag and the closing HTML tag.
 بنابراین شما اینجا را نیز با تگ سر بسته و تگ HTML بسته می بینید.
So in this lesson, we're looking at elements and attributes.
 بنابراین در این درس، عناصر و ویژگی ها را بررسی می کنیم.
Let's start with elements.
 بیایید با عناصر شروع کنیم.
What exactly is an element?
 عنصر دقیقا چیست؟
Let's look at an example.
 بیایید به یک مثال نگاه کنیم.
Let's write an opening paragraph tag.
 بیایید یک تگ پاراگراف آغازین بنویسیم.
Then we have our closing paragraph tag and let's put some content in here.
 سپس ما تگ پاراگراف پایانی خود را داریم و اجازه دهید مقداری محتوا را در اینجا قرار دهیم.
So let's just type in the document.
 پس بیایید فقط سند را تایپ کنیم.
So we know that this is an opening tag, we know that this is the content, and we know that
 بنابراین ما می دانیم که این یک برچسب آغازین است، می دانیم که این محتوا است، و ما می دانیم که
this here is the closing tag.
 این در اینجا برچسب بسته شدن است.
So one exactly is an element.
 بنابراین یکی دقیقا یک عنصر است.
Well, this whole thing collectively is known as a paragraph element, okay?
 خوب، کل این چیز در مجموع به عنوان یک عنصر پاراگراف شناخته می شود، خوب؟
So we can have another element on here as well.
 بنابراین ما می توانیم عنصر دیگری را نیز در اینجا داشته باشیم.
So we can say another paragraph flag, and it's just typing HTML.
 بنابراین می‌توانیم پرچم پاراگراف دیگری را بگوییم، و فقط در حال تایپ HTML است.
So our web page then currently consists of two elements, two paragraph elements.
 بنابراین صفحه وب ما در حال حاضر از دو عنصر، دو عنصر پاراگراف تشکیل شده است.
We have one here, and we have one here, and we can put another thing on the page.
 ما یکی اینجا داریم و یکی اینجا داریم و می توانیم چیز دیگری را در صفحه قرار دهیم.
Let's go for a H1, and we look at all these tags a bit later on.
 بیایید سراغ یک H1 برویم، و کمی بعد به همه این برچسب ها نگاه می کنیم.
So we can say this is a H1 tag.
 بنابراین می توان گفت که این یک تگ H1 است.
So now our web page consists of three different elements, well, three elements.
 بنابراین اکنون صفحه وب ما از سه عنصر مختلف تشکیل شده است، خوب، سه عنصر.
We have two paragraph elements, and we have one H1 element.
 ما دو عنصر پاراگراف داریم و یک عنصر H1 داریم.
So an element is basically the name given to the whole thing.
 بنابراین یک عنصر اساساً نامی است که به کل چیز داده شده است.
So we have opening tag, content, and then the closing tag, okay?
 بنابراین، ما تگ باز، محتوا، و سپس تگ بسته شدن را داریم، خوب؟
So that's basically what an element is.
 بنابراین اساساً یک عنصر همین است.
So what is an attribute?
 پس صفت چیست؟
Well, an attribute is basically something that gives our elements additional information.
 خوب، یک ویژگی اساسا چیزی است که به عناصر ما اطلاعات اضافی می دهد.
And we write that additional information in the opening tag section.
 و آن اطلاعات اضافی را در قسمت تگ باز می نویسیم.
So for example, let's take this first one here.
 برای مثال، اجازه دهید این مورد اول را در اینجا در نظر بگیریم.
Let me just get rid of this H1 here.
 اجازه دهید من فقط از شر این H1 در اینجا خلاص شوم.
So in this first paragraph element here, that says dev dreamer,
 بنابراین در این عنصر پاراگراف اول در اینجا، که می گوید برنامه نویس رویاپرداز،
in the opening tag, I want to just click here, and then do space.
 در تگ افتتاحیه، می‌خواهم اینجا کلیک کنم و سپس فضا را انجام دهم.
And then I want to put some additional information into this first element.
 و سپس من می خواهم اطلاعات اضافی را در این عنصر اول قرار دهم.
So I'm going to write in here title, and then we have equals,
 بنابراین من می خواهم در اینجا عنوان بنویسم، و سپس ما برابر خواهیم کرد،
and then in quotation marks, we write, let's just write, hey there, okay?
 و سپس در گیومه، می نویسیم، بیایید فقط بنویسیم، سلام، باشه؟
Now, well, what has that done?
 خوب، چه کار کرده است؟
Well, if we go back to our web page, if I now hover over this,
 خوب، اگر به صفحه وب خود برگردیم، اگر اکنون ماوس را روی آن نگه دارم،
you can see the little tooltip pops up that says, hey there, okay?
 می‌توانید راهنمایی کوچک ابزاری را ببینید که ظاهر می‌شود که می‌گوید: سلام، باشه؟
And that's because I've given this first paragraph element,
 و این به این دلیل است که من این عنصر پاراگراف اول را داده ام،
the attribute of title, hey there.
 صفت عنوان، هی وجود دارد.
If I was to hover over our second paragraph element, that says HTML,
 اگر بخواهم ماوس را روی عنصر پاراگراف دوم خود نگه دارم، HTML می گوید،
nothing, nothing happens.
 هیچی، هیچ اتفاقی نمی افته
I can say they're all day, and nothing will happen.
 می توانم بگویم آنها تمام روز هستند و هیچ اتفاقی نمی افتد.
That's because I haven't given this one an additional attribute.
 دلیلش این است که من به این یکی ویژگی اضافی نداده ام.
Now, there are many different attributes, and depending on what element used,
 در حال حاضر، بسیاری از ویژگی های مختلف وجود دارد، و بسته به اینکه چه عنصری استفاده می شود،
this will determine what attributes you can actually use.
 این مشخص می کند که شما واقعاً می توانید از چه ویژگی هایی استفاده کنید.
So, for example, let's look at an anchor tag, a, and this is basically used
 بنابراین، برای مثال، بیایید به یک برچسب لنگر، a نگاه کنیم، و این اساسا استفاده می شود
for adding links to a page.
 برای افزودن لینک به یک صفحه
So let's just type in here, let's just say, click me.
 پس بیایید اینجا را تایپ کنیم، بیایید فقط بگوییم، روی من کلیک کنید.
And we'll look at this, again, all these tags we're looking at guys,
 و ما دوباره به این نگاه خواهیم کرد، همه این برچسب‌ها را که به بچه‌ها نگاه می‌کنیم،
we're going to look at them in later videos.
 ما در ویدیوهای بعدی آنها را بررسی خواهیم کرد.
I just want to get you used to understanding the syntax, and what different
 من فقط می‌خواهم شما را به درک نحو و تفاوت آن عادت دهم
things mean, like the elements and attributes.
 چیزها معنی دارند، مانند عناصر و صفات.
So for this A tag, and then here, we can go to our web page, we can click,
 بنابراین برای این تگ A، و سپس در اینجا، می توانیم به صفحه وب خود برویم، می توانیم کلیک کنیم،
and then it's going to see nothing happens.
 و سپس می بیند که هیچ اتفاقی نمی افتد.
That's because what we have defined this text here as an anchor, as a link,
 این به این دلیل است که آنچه ما این متن را در اینجا به عنوان یک لنگر، به عنوان یک پیوند تعریف کرده ایم،
we haven't actually said where we want this to go.
 ما واقعاً نگفته‌ایم که می‌خواهیم به کجا برود.
We do that with an attribute.
 ما این کار را با یک ویژگی انجام می دهیم.
So in the opening tag here, we simply type in Href, equals,
 بنابراین در تگ افتتاحیه اینجا، ما به سادگی Href را تایپ می کنیم، برابر است،
and then in our quotation marks, we can write HGTP, call on,
 و سپس در علامت نقل قول خود، می توانیم HGTP بنویسیم، فراخوانی کنید،
process for slash, and then we can type in google.com.
 اسلش را پردازش کنید و سپس می توانیم در google.com تایپ کنیم.
So now you can see it's actually turned into a link, okay?
 بنابراین اکنون می توانید ببینید که در واقع به یک پیوند تبدیل شده است، خوب؟
This looks like a link we can click on.
 این شبیه لینکی است که می توانیم روی آن کلیک کنیم.
And before I click it, I'm actually going to put some more attributes into this
 و قبل از اینکه روی آن کلیک کنم، در واقع قصد دارم چند ویژگی دیگر را در این مورد قرار دهم
opening tag here.
 برچسب باز کردن اینجا
I'm going to give this also a title.
 من قصد دارم به این نیز عنوانی بدهم.
And then I'm going to say, click me to go to Google.
 و سپس می‌خواهم بگویم، روی من کلیک کنید تا به Google بروید.
Okay, so again, we can hover over it now, and it will say,
 بسیار خوب، پس دوباره، اکنون می‌توانیم ماوس را روی آن نگه داریم، و می‌گوید:
click me to go to Google.
 برای رفتن به گوگل روی من کلیک کنید.
And then finally, I'm actually going to say target, equals,
 و در نهایت، در واقع می‌خواهم بگویم هدف، برابر است،
and then this is basically how we want to open, do we want to open in the same tab,
 و سپس اساساً اینگونه است که می خواهیم باز کنیم، آیا می خواهیم در همان برگه باز کنیم،
in a new tab, I'm going to go for a new tab, and do that we do underscore blank.
 در یک برگه جدید، من به سراغ یک تب جدید می روم، و این کار را انجام می دهیم که زیر خط خالی انجام دهیم.
So now we've got all that information in here.
 بنابراین اکنون ما تمام آن اطلاعات را در اینجا داریم.
So I'm going to click on this, and as you can see, it's taken me to Google
 بنابراین من روی این کلیک می کنم، و همانطور که می بینید، من را به گوگل برد
and to open it up in a new tab, okay?
 و برای باز کردن آن در یک برگه جدید، خوب است؟
So that's basically then the difference between elements and attributes,
 بنابراین اساساً تفاوت بین عناصر و ویژگی ها این است،
how we use them.
 چگونه از آنها استفاده می کنیم
So very quick, very simple, in the next lesson, we're going to be looking at
 خیلی سریع، خیلی ساده، در درس بعدی، به بررسی آن خواهیم پرداخت
these two sections in a bit more detail.
 این دو بخش با کمی جزئیات بیشتر
We're going to look at the head, let's go to this, we're going to look at the head section,
 ما به سر نگاه می کنیم، بیایید به این برویم، ما می خواهیم به بخش سر نگاه کنیم،
all the head tag, and we're going to look at the body tag as well.
 تمام برچسب سر، و ما قصد داریم به تگ بدن نیز نگاه کنیم.
So please subscribe guys, and I'll see you on the next one.
 پس لطفا مشترک شوید بچه ها، و من شما را در مورد بعدی می بینم.