جلسه سوم » معرفی تگ های HTML | آموزش رایگان طراحی سایت

سه شنبه , ۲۸ شهریور ۱۳۹۶ ساعت ۲۲:۵۷
1 امتیاز2  امتیاز3  امتیاز4 امتیاز5 امتیاز (تعداد آرا : 15٫005)
Loading...

در ادامه کارگاه آموزشی با جلسه سوم در خدمت شما هستیم. در این جلسه قصد داریم تا تگ های HTML رو براتون آموزش بدیم. نحوه کلاس دهی به تگ ها رو بگیم و البته به شما خواهیم گفت که هر کدام از تگ های HTML چطور در مرورگر نمایش داده می شوند. پس ادامه کار رو شروع می کنیم. 

 

تگ های html

 

برای اینکه بتوانیم متون، عنوان ها، تصاویر، لینک، فرم ها، جداول، لیست، دکمه ها و دیگر موارد رو مرورگر نمایش دهیم می بایست که از یک سری استانداردهای طراحی به زبان HTML بنویسیم. در غیر اینصورت نمایش موارد بالا با استفاده از HTML امکانپذیر نخواهد بود. در اینجا قصد نداریم تمام تگ های HTML رو معرفی کنیم اما تا جایی که می شود و پرکاربرد هستند معرفی خواهند شد.

 

  • تگ title : این تگ برای این است که شما بتوانید عنوانی برای سایت خود بنویسید. مثلا صفحه ای که در مرورگر باز می شود چه نامی داشته باشد و یا می تواند نام سایت شما باشد. نمایش این تگ در مروگر به شکل زیر است و نمونه کد صحیح آن هم در زیر قابل مشاهده می باشد.

 

تگ های html

 

<title>صفحه اصلی</title>

 

  • تگ بعدی تگ p می باشد. در HTML برای اینکه یک متن را نمایش دهیم از تگ p استفاده می کنیم. به این ترتیب که ابتدا دستور تگ p را باز می کنیم که بصورت <p> می باشد. متن مورد نظر را قرار می دهیم و در انتها حتما و حتما باید تگ را ببندیم و برای این کار هم </p> استفاده می کنیم. نمایش درست این تگ را در نمونه کد زیر مشاهده کنید.

 


<p>ما بین تگ P ما متنی را قرار دادیم که شکل درست باز و بسته شدن تگ رو هم میتونید مشاهده کنید.</p>

 

  • تگ بعدی تگ h می باشد که می توانید در عنوان ها از این تگ ها استفاده کنید. تگ h دارای چند حالت می باشد که برای خودشان تعریف کوچکی از نحوه استفاده در قالب رو هم دارند. تگ های h1/h2/h3/h4/h5/h6 تگ های استانداردی هستند که در زبان HTML تعریف شده اند و برای نوشتن تیتر ها مورد استفاده قرار می گیرند.

    نحوه ی استفاده این تگ ها در کد نویسی باید دقت شود که بصورت سلیقه ای نباشد. مثلا نمی توانید از تگ h1 چندین بار در قالب استفاده کنید. این تگ ها برای استفاده قرار گرفتن الویت دارند و همچنین محدودیت هم دارند که در هر صفحه از سایت چه تعدادی می تواند استفاده شود که در بخش های بعدی کاملا توضیح خواهیم داد که چطور استفده می شوند.

    نمایش این کد ها در مرورگر و نرم افزار Atom به شکل زیر است.



<h1>تگ قرار دادن برای عنوان</h1>
<h2>تگ قرار دادن برای عنوان</h2>
<h3>تگ قرار دادن برای عنوان</h3>
<h4>تگ قرار دادن برای عنوان</h4>
<h5>تگ قرار دادن برای عنوان</h5>
<h6>تگ قرار دادن برای عنوان</h6>


تگ های html

تگ های html

 

  • تگ a یکی دیگر از تگ های HTML می باشد که می تواند به متن یا تیتر شما لینک دهد. توجه داشته باشید باز و بسته شدن تگ ها در HTML همگی یک ساختار دارند. پس همیشه وقتی شروع می کنید و تگی رو باز می کنید توجه داشته باشید تگ رو در آخر ببندید. در زیر نمونه تگ a رو مشاهده خواهید کرد که تیتری را تگ h1 می قرار می دهیم و آن تیتر را با تگ a لینک دار می کنیم.

 

<a href="محل قرار گرفتن لینک مورد نظر">
  

<h1>تگ قرار دادن برای عنوان</h1>
</a>

 

تگ های html

 

  • تگ دیگری که با استفاده از اون میشه عکس و تصاویر با فرمت jpg,gif,png رو قرار داد تگ img می باشد. با استفاده از این تگ میشه تصاویر رو به مرورگر فراخوانی کرد. تگ بسیار ساده دارد و البته می شود به این تگ ها شاخو برگ هم داد که در جلسات بعدی حتما به آن ها اشاره خواهیم کرد. 

نمونه کد تگ img و اجرا شده کد رو در زیر مشاهده کنید.

 

  • تگ دیگری که با استفاده از اون میشه عکس و تصاویر با فرمت jpg,gif,png رو قرار داد تگ img می باشد. با استفاده از این تگ میشه تصاویر رو به مرورگر فراخوانی کرد. تگ بسیار ساده دارد و البته می شود به این تگ ها شاخو برگ هم داد که در جلسات بعدی حتما به آن ها اشاره خواهیم کرد. 

نمونه کد تگ img و اجرا شده کد رو در زیر مشاهده کنید.

 

<a href="محل قرار گرفتن لینک مورد نظر">
  

<h1 style="text-align:center;margin:0 auto;">تگ قرار دادن برای عنوان</h1>
</a>
<img src="https://itech24.ir/wp-content/uploads/2017/09/ads-anetwork-1.png" alt="">

 

تگ های html

 

  • تگ بعدی تگ li و تگ ul می باشد که این نمونه تگ برای ایجاد لیست کاربرد دارد. نمونه کد و خروجی این کد در مرورگر به شکل زیر می باشد که مشاهده می کنید.

 



<ul>
	<li>لیست شماره یک</li>
	<li>لیست شماره دو</li>
	<li>لیست شماره سه</li>
	<li>لیست شماره چهار</li>
</ul>


 

تگ های html

 

یکی از مهمترین بخش یادگیری HTML این است که شما به درستی به تگ هایی که می نویسید کلاس دهید. کلاس دادن به تگ ها دقیقا بدین معنی می باشد که برای هر کلاس شما نشان و اسمی قرار دهید. برای طراحی یک سایت نیاز ۱۰۰ درصد هست که به تمامی کلاس ها و تگ های HTML شما استایل دهید. برای استایل دادن به تگ ها باید ابتدا اسم کلاس رو در فایل style.css فراخوان کنید و بعد به اون تگ استایل دهید.

توجه: باید با دقت کلاس دهید که بعدا در فراخوانی تگ ها تداخل هم اسم بودن ایجاد نشود. حتما و حتما این نکته رو توجه کنید. تمرین کنید که کلاس دادن در HTML رو به خوبی یاد بگیرید.

برای کلاس دادن از div ها استفاده می شود و برای هر div هم کلاسی (class) تعریف می کنیم. این باعث میشه که کدهایی که نوشتید براحتی از هم تفکیک می شوند. در نمونه زیر مشاهده کنید که یک کلاس کلی به نام کلاس total تعریف کردیم. (کلاس ها هم همانند تگ ها دستور باز شدن و بسته شدن دارن)

<div class=”total”></div>

نمونه کدهای زیر رو بهش توجه کنید و برای خودتون تفسیرش کنید.

 


<div class="total">
  

<div class="h-tags">
<h1 style="text-align:center;margin:0 auto;">تگ قرار دادن برای عنوان</h1>
<h2>تگ قرار دادن برای عنوان</h2>
<h3>تگ قرار دادن برای عنوان</h3>
<h4>تگ قرار دادن برای عنوان</h4>
<h5>تگ قرار دادن برای عنوان</h5>
<h6>تگ قرار دادن برای عنوان</h6>
</div>
<div class="link-tags">
  <a href="محل قرار گرفتن لینک مورد نظر">
<h1 style="text-align:center;margin:0 auto;">تگ قرار دادن برای عنوان</h1>

  </a>
</div>
<div class="images-tags">
  <img src="https://itech24.ir/wp-content/uploads/2017/09/ads-anetwork-1.png" alt="تگ های html">
</div>
<div class="ul-li-tags">
<ul>
	<li>لیست شماره یک</li>
	<li>لیست شماره دو</li>
	<li>لیست شماره سه</li>
	<li>لیست شماره چهار</li>

  </ul>
</div>
</div>

 

تگ های HTML پرکاربرد در این جلسه برایتان معرفی شد. برای اینکه شما هم تمرینی داشته باشید، با جستجو در اینترنت نمونه های دیگر تگ های HTML رو میتونید مشاهده کنید. البته باید بگم که اصلا نگران نباشید برای اینکه تمام کدها گفته نشد چرا که در جلسه ای که شروع میکنیم طرح گرافیکی خودمون رو کد بزنیم بیش از ۹۵ درصد کدها گفته می شه وتکرار و مکررات بسیاری هم داره و همش رو قطعا یاد خواهید گرفت. 

 

امیدوارم این جلسه رو به نحو احسن یاد گرفته باشید تا برسیم به جلسه بعدی. اوقاتتون خوش، خدا نگهدارتون.

1357
برچسب ها : , ,
نظرات کاربران (۰)

افزودن نظر