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

What has gone on guys, my name is Amit and welcome to DevDreamer.
 چه خبر بچه‌ها، من آمت هستم و به کانال DevDreamer خوش آمدید.
So in this first tutorial series, we're taking a look at HTML and this first lesson is
 در این سری آموزش‌های اولیه، داریم به HTML نگاهی می‌اندازیم و این اولین درس است.
what is HTML.
 HTML چیست؟
So what is HTML?
 پس HTML چیه؟
HTML stands for Hypertext Marker Planguage and that's exactly what it is.
 HTML مخفف زبان نشانه‌گذاری ابرمتن است و دقیقاً همین است که هست.
It is a language that is used to mark up or describe the different elements on the web page.
 این زبانیه که برای نشانه‌گذاری یا توصیف عناصر مختلف در صفحه وب استفاده میشه.
Now don't worry if you don't know what I mean by elements, we'll take a look at that
 حالا نگران نباشید اگر نمی‌دونید منظورم از عناصر چیه، ما بهش نگاهی می‌اندازیم.
bit later on in this video, but understand that HTML is nothing difficult, that's all
 کمی بعد در این ویدیو توضیح می‌دم، اما فقط بدونید که HTML چیز سختی نیست، همین.
it is.
 اینطوره.
It's just a markup language.
 این فقط یک زبان نشانه‌گذاری است.
It's used to actually put things onto a web page.
 این برای اینه که واقعا چیزها رو روی یک صفحه وب قرار بدیم.
Now any web site you've ever been to started life out as HTML because HTML is the basic
 هر وب‌سایتی که تا به حال به آن مراجعه کرده‌اید، در ابتدا به عنوان HTML شروع به کار کرده چون HTML پایه و اساس همه چیز است.
building block for all websites out there.
 بخشی اساسی برای تمام وب‌سایت‌های موجود.
So then let's take a look at HTML in the overall web development process.
 پس بیایید نگاهی به HTML در کل فرآیند توسعه وب بیندازیم.
So there are three main ingredients that make up a web site, you've got HTML, CSS and
 پس سه عنصر اصلی وجود داره که یک وب‌سایت رو تشکیل می‌ده: HTML، CSS و
JavaScript.
 جاوا اسکریپت.
HTML is basically the structure of the web site.
 HTML اساساً ساختار وب‌سایت است.
So we have this plain old boring square here, CSS is where the styling comes in, CSS stands
 پس اینجا یک مربع ساده و خسته‌کننده داریم، CSS جاییه که استایل‌ها وارد میشن، CSS به ما کمک می‌کنه تا...
for cascading style sheets.
 برای شیوه‌نامه‌های آبشاری.
So we've taken that same square and we've actually given it a border and we've colored it
 پس همون مربع رو برداشتیم و یه حاشیه براش گذاشتیم و رنگش کردیم.
in, we've shrunk it down inside a little bit and we've just slightly rotated it as well.
 داخلش رو کمی کوچیک کردیم و به آرامی هم چرخوندیمش.
And then finally we have JavaScript.
 و در نهایت به جاوا اسکریپت می‌رسیم.
JavaScript is all about the interactivity, so this is when the user does things and JavaScript
 جاوا اسکریپت همه‌چیز درباره تعامل است، یعنی وقتی کاربر اقداماتی انجام می‌دهد و جاوا اسکریپت...
is all about responding to the user events, so things such as clicking on a button or scrolling
 همه چیز درباره‌ی پاسخ دادن به رویدادهای کاربر هست، مثل کلیک کردن روی یک دکمه یا اسکرول کردن.
the page.
 صفحه.
So for example, we can have that same square and the user clicks the button or scrolls and
 برای مثال، می‌تونیم همون مربع رو داشته باشیم و کاربر روی دکمه کلیک می‌کنه یا اسکرول می‌کنه و
it disappears.
 از بین میره.
So what do we need to know before we start learning HTML?
 پس قبل از اینکه یادگیری HTML رو شروع کنیم، چه چیزهایی رو باید بدونیم؟
What are some of the prerequisites ready for the big list?
 چه پیش‌نیازهایی برای لیست بزرگ آماده شده‌اند؟
Just kidding, there's none.
 فقط شوخی می‌کنم، هیچ چیزی نیست.
Nothing, there are not prerequisites, remember guys HTML is the starting point of the web
 هیچی، پیش‌نیاز خاصی نیست، یادتون باشه بچه‌ها HTML نقطه شروع وب هست.
development process, so you don't need to learn anything else, this is where things start.
 فرایند توسعه، پس نیازی به یادگیری چیز دیگری نداری، اینجا جاییه که همه چیز شروع میشه.
So now let's take a look at a quick example of live HTML.
 بیایید حالا نگاهی به یک مثال سریع از HTML زنده بندازیم.
Okay, so here we are then on our website, we should all be familiar with Facebook.com.
 خب، حالا ما در وب‌سایت‌مون هستیم، باید همه با Facebook.com آشنا باشیم.
And as I promised, I'm going to show you a live example of HTML.
 و همونطور که وعده دادم، می‌خوام یک نمونه زنده از HTML رو به شما نشون بدم.
So if we take a look at this page then a bit more closely, we start to see that actually
 پس اگه به این صفحه یه نگاهی دقیق‌تر بندازیم، می‌فهمیم که در واقع
it's built up using different elements.
 این با استفاده از عناصر مختلف ساخته شده.
So here we have a text element, we have another text element here which is slightly smaller
 پس اینجا یک عنصر متنی داریم، و اینجا یک عنصر متنی دیگه داریم که کمی کوچیک‌تره.
than this one here.
 بیشتر از این یکی.
We've got some input fields, we have some drop down lists, okay.
 ما چندتا فیلد ورودی داریم، چندتا لیست کشویی هم داریم، باشه؟
We have the selection buttons here which are on those radio buttons, we have another button
 ما دکمه‌های انتخاب رو اینجا داریم که روی این دکمه‌های رادیویی هستند، و یک دکمه دیگه هم داریم.
here, we've got all the links down here which go to different pages on the site.
 اینجا، تمام لینک‌ها رو پایین داریم که به صفحات مختلف سایت می‌رن.
We have an image element here, so I can just right click this, click on open image and tab,
 اینجا یک عنصر تصویر داریم، پس می‌تونم روش راست کلیک کنم، بعد روی "باز کردن تصویر" کلیک کنم و برم تو تب.
and as you can see it's just an image with a PNG file extension.
 و همونطور که می‌بینی، این فقط یه تصویر با پسوند فایل PNG هست.
We have another text element here, we have input fields on the top here, we've got this
 ما یک عنصر متنی دیگه داریم، اینجا بالای صفحه فیلدهای ورودی داریم، اینجا هم داریم.
element, this link, so as you can see the entire page is built up using these different
 این عنصر، این لینک، همونطور که می‌بینید کل صفحه با استفاده از این موارد مختلف ساخته شده.
elements, and the way that we put those elements on the page is we use something called HTML.
 عناصر، و طرز قرار دادن این عناصر روی صفحه اینه که از چیزی به نام HTML استفاده می‌کنیم.
So then let me just right click on this page, I mean Google Chrome, I'm going to right click
 پس بذارید روی این صفحه کلیک راست کنم، یعنی تو گوگل کروم، می‌خوام کلیک راست کنم.
and then click on inspect, and this brings up the Google Chrome developer tools, and what
 و بعد روی "بازرسی" کلیک کن، این ابزارهای توسعه‌دهنده گوگل کروم رو باز می‌کنه و چه...
I'm going to do is just delete the head section.
 فقط می‌خوام قسمت هدر رو پاک کنم.
I don't worry if you don't know what that is, we'll be taking a look at that a bit later
 نگران نباش، اگه نمی‌دونی اون چیه، بعداً بیشتر درباره‌ش حرف می‌زنیم.
on in this series, let's just close the DevTools, and go ahead and take a look at this,
 در این سری، بیایید DevTools رو ببندیم و بریم سراغ این موضوع.
we're still on Facebook.com, what we're looking at is the raw HTML, and it looks horrible
 ما هنوز روی Facebook.com هستیم، چیزی که داریم می‌بینیم خام HTML هست و خیلی هم زشت به نظر میاد.
in comparison, and that's because there's been no styling or anything else on this page.
 در مقایسه، این به خاطر اینه که روی این صفحه هیچ استایل یا چیز دیگه‌ای وجود نداره.
We've still got all those elements there, so we've got our image, input fields, buttons,
 ما هنوز همه این عناصر رو داریم، پس تصویر، فیلدهای ورودی و دکمه‌ها رو داریم.
the dropdown list is still there, all those links are still there, but it looks different
 لیست کشویی هنوز وجود داره، همه اون لینک‌ها هنوز هستن، ولی به نظر متفاوت میاد.
because what we're looking at is just the HTML, and as I said this is where all those start
 چون چیزی که داریم بهش نگاه می‌کنیم فقط HTML هست و همونطور که گفتم اینجا جاییه که همه چیز شروع میشه.
out their lives.
 زندگی‌اشون رو.
As you know later you'll now have to take this and turn it into this, okay?
 همون‌طور که می‌دونی، بعداً باید این رو بگیری و تبدیلش کنی به این، باشه؟
So there you have it guys, that was a very quick introduction to HTML.
 خب دوستان، این هم یک معرفی خیلی سریع به HTML بود.
In the next lesson I'll be showing you some of the things that you need to download in order
 در درس بعدی به شما نشون می‌دم که چه چیزهایی رو باید دانلود کنید تا...
to start writing HTML for yourselves and following along with these lessons as we progress.
 برای شروع نوشتن HTML برای خودتان و همراهی با این درس‌ها در حین پیشرفت‌مان.
So please subscribe guys and I'll see you on the next one.
 پس لطفاً سابسکرایب کنید بچه‌ها و در ویدیو بعدی می‌بینمتون.