آموزش HTML قسمت اول ( آنامیسی ها)
آموزش HTML قسمت اول
آشنایی
با سلام به تمامیه افرادی که سایت آنامیسی ها رو دنبال میکنند.من در این آموزش سعی دارم.که به شما یاد بدهم که چگونه کد HTML بزنید و بخشی از برنامه نویسی تحت وب را یاد بگیرید.
این آموزش در دو قسمت نوشته شده است. که شما به راحتی می تونید از آن استفاده کنید و یاد بگیرد.
برنامه مورد نیاز واسه این آموزش Visual studio code هستش که پیشنهاد میکنم آن را دانلود کنید.
HTML چیست؟
HTML یک زبان نشانه گذاری است که برای ساخت و ارائه مطالب در شبکه جهانی وب استفاده می شود. و بااین زبان شما میتوانید بخشی از برنامه نویسیه تحت وب را انجام دهید.
کد های html از دو تگ باز و بسته html شکل میگیرند. <html><html/>
که ما هرچه بخواهیم از HTML بنویسیم در درون این کد مینویسیم.
شروع آموزش
شما اول باید Visual studio code را باز کنید.و بعد گزینه open file را کلیک کنید. و قبلا فایلی که با فرمت HTML ساختید را باز میکنید.
یک همچین صحفه ای واسه شما باز می شود.این صحفه html است و هیچ کد html در آن وجود ندارد.
خب در این مرحله اگر شما اون بالا یک علامت تعجب بزارید{ ! } و بعد دکمه اینتر را بزنید. ساختار کل HTML واسه شما شکل میگیرد. به این صورت
و اگر شما در پایین صحفه گزینه GO live رو بزنید. میبینید که الان شما یک صحفه اصلی دارید که خالی است.و ما میخواهیم با کد هایی که مینویسیم در این صحفه محتوا ایجاد کنیم. حالا چه متن چه عکس و چه فیلم.
بخش head
اگر ما در تگ head دقت کنیم یه تگ به نام title داریم که اسم صحفه اصلی ما هست.
حالا ما می آییم در تگ title اسم اصلی صحفه خودمان را مینویسیم. برای مثال: <title/> آنامیسی ها <title>
و میبینید که اسم صحفه اصلی ما تغییر کرد به آنامیسی ها
بخش body
ما هرچی در HTML داریم در تگ body قرار میگیرد.
حالا ما میخواهیم برای صحفه خودمون عنوان انتخاب کنیم. که در تگ body از تگ های
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
هرچه عداد بزرگ تر باشد. عنوان ما کوچک تر میشود.[البته باید بین یک تا شیش باشند]
حالا شما میتوانید عنوان های خودتان را ببینید.
پاراگراف
خب حالا ما یک تگ دیگه به شما معرفی میکنیم که تگ P هستش تگ P به معنای پاراگراف هستش.<p></p>
که شما هر متنی دارید درون تگ P مینویسید. برای مثال این طوری مینویسیم.
<p>
ا سلام به تمامیه افرادی که سایت آنامیسی ها رو دنبال میکنند.من در این آموزش سعی دارم.که به شما یاد بدهم که چگونه کد HTML بزنید و بخشی از برنامه نویسی تحت وب را یاد بگیرید.
</p>
وبعد اگه صحفه خودمان را را باز کنیم اینجوری به ما نمایش داده میشود.
خب تگ بعدی ما یک نوع تگ است که برای بلد کردن {پر رنگ کردن} جمله استفاده میشود.<strong></strong>
برای مثال
<p>
سلام به تمامیه افرادی که سایت آنامیسی ها رو دنبال میکنند.<strong> من در این آموزش سعی دارم که به شما یاد بدهم که چگونه کد HTML بزنید. <strong/>و بخشی از برنامه نویسی تحت وب را یاد بگیرید.
</p>
و بعد جمله بالایی که در تگ strong هست بلد میشود یا همون پر رنگ خودمون.
تگ بعدی که می خواهم به شما آموزش بدهم تگ em هستش که باعث میشود. جمله ای که در این تگ میزاریم به صورت ایتالیک{کج} به ما نشون بدهد. <em></em>
برای مثال:
<p>
ا سلام به تمامیه افرادی که سایت آنامیسی ها رو دنبال میکنند.<em>من در این آموزش سعی دارم.</em>که به شما یاد بدهم که چگونه کد HTML بزنید و بخشی از برنامه نویسی تحت وب را یاد بگیرید.
</p>
بعد از این کار جمله ای که در تگ em گذاشتید. به صورت ایتالیک به شما نشان داده میشود.
ایجاد لینک
خب این هم از تگ em حالا تگ بعدی که می خوام به شما یاد بدم تگ a href هستش. که واسه لینک دادن به کلمه یا جمله استفاده میشود.
<a href></a >
برای مثال:
<p>
ا سلام به تمامیه افرادی که سایت آنامیسی ها رو دنبال میکنند.<a />من در این آموزش سعی دارم< a href =https://anamisiha.ir/> .که به شما یاد بدهم که چگونه کد HTML بزنید و بخشی از برنامه نویسی تحت وب را یاد بگیرید.
</p>
خب بعد از تگ a href میرسیم به تگ ul که برای شما ردیفی نشان داده میشود و در یک بند به پایین می آیند.<ul><ul/>
تگ ul بیشتر برای لیست استفاده میشود. و آنهارا در یک راستا قرار میدهد.تگ ul خودش به تنهایی کاربردی نیست ما باید در درون تگ ul از تگ li باید استفاده کنیم. تا لیستمان کامل شود.
برای مثال:
<ul>
<li> آنامیسی ها</li>
<li>آنامیسی ها</li>
<li>آنامیسی ها</li>
<ul/>
و بعد لیست ما شکل میگیرد.
خب تگ بعدی هم به همین شکل هست. فقط به جای ol ul می نویسیم.<ol></ol>
برای مثال:
<ol>
<li> آنامیسی ها</li>
<li>آنامیسی ها</li>
<li>آنامیسی ها</li>
</ol>
فرق تگ ol با تگ ul اینکه در ul پشت کلمه آنامیسی ها نقطه میگذارد ولی در ol شماره گذاری میکند.
ساخت جدول
خب حالا میریم سراغ تگ بعدی تگ بعدی table هست. که ما با تگ table میتوانیم جدول بسازیم. <table><table/>
تگ table همانند تگ ol و ul خالی بدون معنی هست. و ما باید درون تگ table از تگ thead استفاده کرد. <thead><thead/>
که خود تگ thead تنها کاره ای نیست. و باید از tr استفاده کنیم تا جمله هایی که می نویسیم در زیر آن قرار بگیرد. و جمله خود را درون تگ th می نویسیم . و لیست ما کامل میشود.
برای مثال:
<table>
<thead>
<tr>
<th>اسم <th/>
<th>فامیل <th/>
<th> سن<th/>
<th> ایمیل <th/>
<tr/>
<thead/>
<table/>
خب در تگ بعدی میخواهیم به شما بگیم. که چگونه زیر اسم-فامیل-سن-ایمیل را پر کنیم.
در اینجا باید از تگ tbody استفاده کنیم.و در تگ tbody باید مانند تگ thead از تگ tr استفاده کنیم.
و در درون تگ tr باید از تگ td استفاده کنیم. و اعطلاعات خود را در تگ td بنویسیم تا جدولمون کامل شود.
برای مثال:
<table>
<tbody>
<tr>
<td>مبینا<td/>
<td>سلطانی <td/>
<td> 29<td/>
<td> mobina.s.1188@gmail.com <td/>
<tr/>
<tbody/>
<table/>
خب در این قسمت آموزش جلسه اول تمام می شود. اومید وارم از این آموزش راضی باشید و کامل یاد گرفته باشید.
جلسه بعدی این آموزش در روز پنجشنبه مورخ 99/7/10 انشار داده میشود.
