این آموزش در تاریخ ۱۴۰۲/۰۶/۱۸ آپدیت شده است.
آموزش قدم به قدم زبان HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش قدم به قدم زبان HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
آموزش قدم به قدم زبان HTML
خب شما الان در آموزش قدم به قدم زبان HTML قرار دارید، این آموزش میشه اولین آموزش و یا اولین جلسه آموزش طراحی وب در سایت فری لرن و در واقع میشه اولین قدم برای یادگیری طراحی و برنامه نویسی وب
اگه تازه واردی و عملا هیچ آشنایی با طراحی وب نداری و حتی اصطلاحات طراحی وب رو باهاشون آشنا نیستی حتما و حتما این بخش رو با دقت مطالعه کن.
اون بخش بالارو که مطالعه کردی دیدت نسبت به طراحی وب خیلی بازتر میشه و یجورایی تکلیفت باخودت روشن تر میشه، حالا علی یارت ، بسم الله بگو و شروع کن
اول باید زبان HTML رو یاد بگیری بعدش زبان CSS و بعدش جاوااسکریپت ، اینکه بخوای یضرب بری سراغ جاوااسکریپت فقط وقتتو الکی هدر میدی آخرشم میگی هیچی متوجه نمیشم و ول میکنی میری. هیچی به هیچی ( شایدم خب برای همه به این شکل نباشه ولی چیزی که ثابت شده متاسفانه همینه که گفتم )
اول باید زبان HTML که زبان مادر هست رو بطور کامل یاد بگیری، تمرین کنی تمرین کنی و بارها تمرین کنی تا بتونی تسلط کامل روی این زبان داشته باشی، بعدش میری سراغ زبان CSS ( میشه هم زبان HTML و CSS رو همزمان یاد گرفت ولی من پیشنهاد نمیکنم و بازم خب بستگی داره به خودتون ) و در آخر میری سراغ زبان جاوااسکریپت .
Free-Learn
تعریف زبان HTML
در ادامه آموزش قدم به قدم زبان HTML میخواهیم با تعریف زبان HTML آشنا بشیم و ببینم اصلا این زبان چیه و کاربردش چیه!؟
زبان HTML ( که بهش میگن زبان نشانه گذاری ) یا اچ تی ام ال یا به انگلیسی HTML که مخفف Hyper Text Markup Language می باشد، زبان مادر و یکی از ۳ هسته اصلی طراحی وب جهت ساخت و ایجاد صفحات وب می باشد.
دستورات زبان HTML رو بهش میگیم برچسب یا تگ ( Tag ) یا هم عناصر ( Elements ) که با استفاده از این عناصر میتونیم مثلا تصاویر و متن ، ویدئو و.. رو درون یک صفحه وب قرار بدیم و خروجی شون رو در مرورگرهایی همچون موزیلا فایرفاکس ، گوگل کروم و.. به نمایش درآوریم.
بطور کلی اینجوری میتونیم بگیم که زبان HTML دقیقا زبانی هس که میشه باهاش با مرورگرها صحبت کرد، یعنی مثلا اگه من الان به شما بگم سلام ، خب اگه شما زبان فارسی رو بلد باشید میدونید که من گفتم سلام و میدونید که این کلمه سلام ینی چی و منظورم چی بوده.
خب حالا زبان مرورگرها HTML هس و ما باید دقیقا با همین زبان با مرورگرها صحبت کنیم، مثلا اگه بخوام یک لینک درون صفحه ایجاد کنم ، منکه نمیتونم همینجوری بهش بگم یک لینک برام درست کن، مرورگر بیچاره رو چه به این حرفا.
پس اگه بخوام یک لینک یا یک عکس بزارم تو صفحه خب باید از تگ هایی که برای اینکار از قبل تعریف شدن، استفاده کنم، مثلا از تگ a برای ایجاد لینک و از تگ img برای گذاشتن عکس در صفحه. اونموقع مرورگرم متوجه میشه که شما یک لینک و عکس گذاشتید تو صفحه.
و در نهایت مرورگرهایی مثه فایرفاکس یا کروم که وظیفشون تحلیل کردن همین تگ هاس، آخرسر چیزی که به کاربر ( منو شما ) نشون میدن محتوا و ظاهر کاره نه خوده دستورات یا سورس کد.
مثلا همینجا که الان شما هستید و دارید این متن رو میخونید خب در پشت پرده کلی کد و دستور نوشته شده ولی چیزی که شما به چشم میبینید یه ظاهر مرتب و تمیز هستش. به همین سادگی
Free-Learn
زبان HTML ذاتا سازنده یک صفحه وب می باشد
یعنی مهم نیست شما از زبان های سمت سرور ( بَک اِند یا BackEnd ) استفاده کرده باشید یا نه! در هرصورت موقع نمایش یک صفحه وب و در مجموع موقع نمایش داده ها در مرورگر ما باید از دستورات HTML استفاده کنیم.
مثال :
فرض میکنیم میخوایم نام و ایمیل یکی از کاربران ثبت نام شده در سایتمون رو بدست آوریم، خب اینجا ما با استفاده از زبان های سمت سرور مثه PHP اول دستوری مینویسیم که میره و از پایگاه داده نام و ایمیل کاربر رو میگیره و میاره. خب این تموم شد رفت کاری دیگه بهش نداریم
حالا برای نمایش مثلا نام و ایمیل همین کاربر دیگه ما از HTML استفاده میکنیم و در نهایت در خروجی کارمون در مرورگر نام و ایمیل اون کاربر رو میتونیم مشاهده کنیم.
|
1 2 3 4 5 6 7 8 9 |
<?php $UserName = "Ali"; $UserEmail = "Ali@yahoo.com"; ?> <ul> <li><?php echo $UserName; ?></li> <li><?php echo $UserEmail; ?></li> </ul> |
- خروجی کار در مرورگر : و در نهایت چیزی که مرورگر به ما نشون میده میشه این
- و حالا اگه سورس کد همین صفحه رو مشاهده کنیم میشه این : ( یادتون باشه دستورات زبان های سمت سرور یا همون بک اند هیچوقت در مرورگر و در سورس کد صفحه قابل مشاهده نیست )
Free-Learn
پسوند یک فایل HTML
خب در ادامه آموزش قدم به قدم زبان HTML میخوام شمارو با پسوند یا فرمت یک فایل HTML آشنا کنم.
فایل HTML یک فایل مبتنی بر متن ( Text-Based )می باشد که با پسوند یا فرمت htm. یا html. نامگذاری میشود، فرقی نمیکنه htm. یا html. هردوتاش میشن یه فایل HTML ولی خب معمولا و بیشتر از html. استفاده میشه، شما هم سعی کنید همیشه فایل های HTML تون رو با پسوند html. ذخیره کنید.
مرورگرهای اینترنتی همچون موزیلا فایرفاکس ، گوگل کروم و غیره ، این مرورگرها این قدرت و قابلیت رو دارند که تگ های موجود در یک صفحه وب رو تفسیر کنن و در نهایت خروجی رو به ما در مرورگر نشون بدن.
مثلا ما اومدیم از تگ img استفاده کردیم و میخوایم یه عکس درون صفحه نمایش بدیم، خب میایم و کدشو مینویسیم و در نهایت اون فایل رو با پسوند html. ذخیره میکنیم و در آخر در مرورگر اجرا میکنیم.
خب مرورگر که کدهارو ببینه تفسیر و بررسی شون میکنه و در آخر چیزی که در خروجی نشون میده اون خوده عکسه هست نه کدهاش، پس مرورگر یک عامل برای نمایش خروجی کدها میباشد.
Free-Learn
زبان HTML یک زبان برنامه نویسی نیست
خب یعنی چی زبان برنامه نویسی نیست!؟ خب ببینید سادس، زبان HTML صرفا یه چنتایی تگ یا دستور از قبل تعریف شده داره که هرکدوم هم کاری انجام میدن ، همین تموم شد رفت
این دستورات یا تگ ها از قبل تعریف شده هستن، یعنی مثلا من بخوام عکس بزارم تو صفحه خب از تگ IMG استفاده میکنم ، یا مثلا بخوام جدول بزارم تو صفحه از تگ Table استفاده میکنم، به همین سادگی
ولی یک زبان برنامه نویسی زبانی هست که با استفاده از اون میتونیم برنامه درست کنیم یا یه چیزی درست کنیم که عملیاتی رو انجام بده، بفرض مثال من میخوام یه عدد از کاربر بگیرم بعد با کلیک بروی دکمه بگه که آیا اون اون عدد وارد شده زوج هست یا فرد.
الان این برنامه رو زبان HTML که نمیتونه درست کنه یعنی قدرتشو نداره، ولی با جاوا اسکریپت به راحتی میشه این برنامه رو درست کرد.
زبان HTML فقط ساختار یا اسکلت یک صفحه رو میتونه ایجاد کنه، مثلا همون برنامه که گفتم ، زبان HTML اون باکس اینپوت که عدد رو بشه داخلش وارد کرد و مثلا اون دکمه که روش کلیک کرد اینارو با استفاده از HTML ایجاد میکنیم ولی دیگه بخش عملیاتی ( گرفتن عدد از کاربر و انجام محاسبات ) رو با جاوااسکریپت و مثلا رنگ بندی و استایلش رو با زبان CSS انجام میدیم.
پیشنهاد میکنم بعد از یادگیری HTML زبان جذاب CSS را یاد بگیرید، مشاهده آموزش CSS از اینجا .
Free-Learn
نسخه های زبان HTML
زبان HTML که تحت نظر کنسرسیوم وب جهانی ( مخفف شده W3C ) می باشد، هرگونه تغییراتی که در این زبان بخواهد ایجاد شود باید از طرف این نهاد و زیرنظر آنها ایجاد شود.
این نهاد تا به الان چندین نسخه / ورژن از زبان HTML ارائه داده است، که آخرین نسخه این زبان بصورت رسمی ۵ می باشد، یعنی HTML5 که بطور کلی در این نسخه یکسری تگ و صفت های جدیدی به HTML اضافه شده است.
در ادامه ی این جلسه ( آموزش قدم به قدم زبان HTML ) میتوانید جدول نسخه های مختلف زبان HTML را مشاهده نمایید :
| سال | نسخه |
| ۱۹۸۹ | آقای تیموتی جان برنرز لی www رو اختراع کرد |
| ۱۹۹۱ | آقای تیموتی جان برنرز لی HTML رو اختراع کرد |
| ۱۹۹۳ | آقای دیو راگت ( Dave Raggett ) نسخه پیش نویس +HTML رو ارائه داد |
| ۱۹۹۵ | یک کار گروهی نسخه HTML 2.0 رو ارائه داد |
| ۱۹۹۷ | توصیه HTML 3.2 توسط W3C |
| ۱۹۹۹ | توصیه HTML 4.01 توسط W3C |
| ۲۰۰۰ | توصیه XHTML 1.0 توسط W3C |
| ۲۰۰۸ | ارائه اولین نسخه پیش نویس HTML5 توسط WHATWG |
| ۲۰۱۲ | ارائه نسخه استاندارد HTML5 توسط WHATWG |
| ۲۰۱۴ | ارائه نسخه HTML5 بطور رسمی توسط W3C |
| ۲۰۱۶ | توصیه HTML 5.1 توسط W3C |
| ۲۰۱۷ | توصیه HTML 5.1 ویرایش دوم توسط W3C |
| ۲۰۱۷ | توصیه HTML 5.2 توسط W3C |
Free-Learn
کدام نسخه را یاد بگیرم؟ HTML4 یا HTML5
کدام نسخه را باید یاد بگیرم نداریم ! یعنی اینکه شما بخواید فقط و فقط HTML5 رو یاد بگیرید ( که فقط چنتایی تگ و صفت جدید اضافه شده ) کاره اشتباهی می باشد.
در هرصورت زبان HTML دارای تعدادی تگ و صفت می باشد و لیست همشون رو در ادامه بهتون نشون میدم پس اصلا نگران نباشید و فقط کافیه همین لیست هارو کامل بخونید. ( تو این لیست ها دیگه از نسخه اول تا آخرش یعنی همین HTML5 وجود داره )
در نتیجه شما باید وقتی نسخه ی جدیدی از این زبان منتشر میشه، موارد اضافه شده در نسخه جدید رو نیز بلد باشید، به همین دلیل از شمایی که طراح وب هستید انتظار میره صفحاتی را که طراحی میکنید از آخرین فناوری ، نکات و دستورات آخرین نسخه های زبان HTML باشد.
Free-Learn
آموزش قدم به قدم زبان HTML
در فری لرن شما بطور کامل و جامع میتوانید زبان HTML را یاد بگیرید، از تگ های HTML بگیرید تا صفت های تگ های HTML و رویدادها و صفات عمومی و هرچیزی که در رابطه با HTML باشد.
در هر یک از آموزش ها مثال های آنلاین مختلفی وجود دارند که شما میتوانید به راحتی آنها را مشاهده نمایید و حتی میتوانید خودتان بصورت آنلاین کدنویسی نمایید و نتیجه کدهایتان را مشاهده نمایید.
برای مشاهده هر یک از مثال های آنلاین ، در همان مطلب آموزشی میتوانید بروی دکمه امتحان کنید کلیک نمایید و مثال مربوط به آن آموزش را مشاهده نمایید.
پشنهاد میکنم لیست کامل تمامی تگ های زبان HTML را مشاهده نمایید.
پشنهاد میکنم لیست کامل تمامی صفات تگ های HTML را مشاهده نمایید.
پشنهاد میکنم لیست کامل تمامی رویدادهای HTML را مشاهده نمایید.
مشاهده مجموعه ای از مثال های کاربردی زبان HTML.
برای تمرین داشتن پیشنهاد میکنم از قسمت تمرین آنلاین HTML بصورت آنلاین تمرین نمایید.
وقتی HTML را بطور کامل یاد گرفتید پیشنهاد میکنم در آزمون آنلاین HTML شرکت و خودتان را محک بزنید.
خب دوستان به پایان اولین جلسه از ( آموزش قدم به قدم زبان HTML ) رسیدیم، لطفا برای یادگیری قدم به قدم زبان اچ تی ام ال و همچنین بهمراه مثال های عملی و کاربردی [ آنلاین ] در بخش های بعدی با من همراه باشید.
