آموزش کامل HTML – قسمت 13: المان div

توسط با بدون دیدگاه آموزش کامل HTML

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

قبل از آشنایی با این المان باید با مفاهیم بلاک و اینلاین در html آشنا می شویم.

المان های بلاک و اینلاین

المان های html به دو دسته بلاک و  اینلاین یا درون خطی تقسیم می شوند. در المان بلاک، المان مورد نظر کل فضایی را که در اختیار دارد را اشغال می کند و اجازه نمی دهد المان دیگری در کنار آن قرار بگیرد. مثلا المان پاراگراف را امتحان کنید؛ متوجه خواهید شد که نمی توانید همزمان دو المان پاراگراف را در یک خط به کار ببرید. یعنی هر المانی که بعد از تگ <p> بیاید در خط بعدی قرار می گیرد. به همین خاطر به این نوع از المان ها بلاک گفته می شود.

نوع دیگر، المان های اینلاین هستند که یک خط کامل را برای خود اشغال نمی کنند. در واقع کل فضایی را که در اختیار دارند اشغال نمی کنند. از جمله این المان ها می توان به <link> ، <img> ، <a> ، <td> و <b> اشاره کرد.

المان div

المان <div> از نوع المان های بلاک است. در عین حال این المان همان طور که در بالا گفتیم مانند یک جعبه برای تقسیم بندی عمل می کند و می توانیم در آن المان های دیگر را قرار دهیم. تصویر زیر نمونه ای از کاربرد المان <div> را نشان می دهد:

تگ div - پردیس وردپرس

برای ایجاد این المان تنها کافی است که <div></div> را بنویسیم. اما این المان به خودی خود ظاهر و شکل خاصی ندارد و باید به آن استایل و اندازه بدهیم. برای درک بهتر این موضوع تصویر فوق را در نظر بگیرید. مثلا المان هدر در تصویر فوق به صورت زیر نوشته شده است:

<div style="background-color:کد رنگ;">
      <h1 style=" text-align:center">عنوان</h1>
</div>

در مثال فوق دیدید که از اتربیوت استایل برای شکل ظاهری المان استفاده کردیم.

تا اینجا با مفهوم کلی المان div برای تقسیم بندی صفحات وب آشنا شدیم. برای استفاده بیشتر باید با css آشنا باشید. بنابراین به آموزش کامل css در سایت مراجعه کنید.

آموزش کامل HTML – قسمت یازدهم: تغییرات در جدول

توسط با بدون دیدگاه آموزش کامل HTML

در قسمت قبل با جدول ها در html آشنا شدیم. جدول هایی که در جلسه قبل تولید می کردیم از ظاهر زیبایی برخوردار نبودند. در این جلسه قصد داریم تغییراتی در ظاهر و زیبایی جدول هایمان داشته باشیم. در این قسمت از آموزش قصد داریم شما را با دو تغییر اساسی در جداول آشنا کنیم.

اضافه کردن قاب

برای قرار دادن قاب دور جدول ها تنها کافی است که از اتربیوت border در تک <table> استفاده کنیم. در مثال زیر ما یک قاب یک پیکسلی دور جدول کشیده ایم که این قاب بین تمام سلول ها نیز اعمال می شود.

<table  border="1px" >

    <tr><!-- شروع خط اول  -->

          <td>خط اول - ستون اول </td>          

          <td>خط اول - ستون دوم</td>  

         <td>خط اول - ستون سوم</td>       

   </tr><!-- پایان خط اول  -->

    <tr> <!-- شروع خط دوم -->

            <td>خط دوم - ستون اول </td>      

           <td>خط دوم- ستون دوم</td>        

            <td>خط دوم - ستون سوم</td>    

   </tr><!-- پایان خط دوم -->

 <tr> <!-- شروع خط سوم-->

            <td>خط سوم - ستون اول </td>      

           <td>خط سوم - ستون دوم</td> 

           <td>خط سوم - ستون سوم</td>

</tr><!-- پایان خط سوم-->

</table>

نکته: می توانیم از طریق اضافه کردن استایل نیز قاب دور جدول را رسم کنیم.

<table style=”border:1px;”>

تیتر های جدول

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

<table  border="1px" >

    <tr><!--    - شروع خط مربوط به عناوین  -->

          <th>خط عنوان - نام </th>          

          <th>خط عنوان - نام خانوادگی</th>  

         <th>خط عنوان - سن</th>       

   </tr> <!--    - پایان خط مربوط به عناوین  -->

    <tr> <!-- شروع خط دوم -->

            <td>خط دوم - ستون اول </td>      

           <td>خط دوم- ستون دوم</td>        

            <td>خط دوم - ستون سوم</td>    

   </tr><!-- پایان خط دوم -->

 <tr> <!-- شروع خط سوم-->

            <td>خط سوم - ستون اول </td>      

           <td>خط سوم - ستون دوم</td> 

           <td>خط سوم - ستون سوم</td>

</tr><!-- پایان خط سوم-->

</table>

همان طور که در مثال فوق دیدید تگ <th> مربوط به تیتر ها یا همان عناوین جدول است و بهتر است که در خط اول جدول قرار گیرد. ولی ما می توانیم عنوان های مختلف را برای هر سطر و به صورت جداگانه استفاده کنیم. بدین ترتیب هر ستون جدول می تواند یک هدر مخصوص داشته باشد.

خاصیت colspan

گاهی اوقات پیش می آید که می خواهیم ستون های یک سطر جدول را یکی کنیم. این کار مشابه عمل مرج کردن در نرم افزار ورد آفیس است. برای این کار از اتربیوت colspan استفاده می کنیم. به مثال زیر توجه کنید:

<table  border="1px" >

    <tr><!-- شروع خط اول  -->

          <td>خط اول - ستون اول </td>          

          <td>خط اول - ستون دوم</td>  

         <td>خط اول - ستون سوم</td>       

   </tr><!-- پایان خط اول  -->

    <tr> <!-- شروع خط دوم -->

            <td>خط دوم - ستون اول </td>      

           <td>خط دوم- ستون دوم</td>        

            <td>خط دوم - ستون سوم</td>    

   </tr><!-- پایان خط دوم -->

 <tr> <!-- شروع خط سوم-->

            <td  colspan="3">خط سوم و یکپارچه کردن سه ستون در یک ستون </td>      

    

</tr><!-- پایان خط سوم-->

</table>

عددی که در مقابل colspan قرار می گیرد نشان دهنده تعداد ستون هایی است که می خواهیم در سطر مورد نظر یکی شوند.

آموزش کامل HTML – قسمت دهم: جدول ها

توسط با بدون دیدگاه آموزش کامل HTML

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

چگونه در html جدول ایجاد کنیم؟

برای ایجاد جدول در صفخحات وب از تگ <table> استفاده می کنیم. همان طور که می دانید هر جدول از سطر ها و ستون هایی تشکیل شده است.

مراحل ایجاد جدول در html

  1. بعد از تگ <table> تگ <tr> را برای تولید یک سطر جدول می نویسیم.
  2. با استفاده از تگ <td> فیلد های سطر جاری یا عناوین هر ستون جدول را مشخص می کنیم.

توجه داشته باشید که برای هر سطر جدول باید یک تگ <tr> بنویسیم که به ازای هر فیلد یک تگ <td> در داخل آن قرار می گیرد.

<table>

<tr> <--شروع خط اول-->

<td>خط اول - ستون اول</td>


<td>خط اول - ستون دوم</td>

</tr>

<tr> <--شروع خط دوم-->

<td>خط دوم - ستون اول</td>

<td>خط دوم - ستون دوم</td>

</tr>

</table>

در اچ تی ام ال از علامت <– متن مورد نظر –> برای کامنت گذاری استفاده می شود. هر چیزی که در کامنت قرار دهیم توسط مرورگر در نظر گرفته نمی شود. از کامنت ها برای توضیح در کدها استفاده می کنیم.

در مورد جداول در اچ تی ام ال نکات بیشتری وجود دارد که در جلسات آینده به آن ها اشاره می کنیم.

آموزش کامل HTML – قسمت نهم: فارسی نوشتن در html

توسط با بدون دیدگاه آموزش کامل HTML

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

فارسی نویسی در html

مراحل فارسی نویسی به صورت زیر می باشد:

  1. ابتدا کد <“meta charset=”utf-8> را در بین تگ <head></head> قرار می دهیم. این کار باعث می شود تا حروف فارسی توسط مرورگر پردازش شوند.
  2. با یکی از روش هایی که توضیح خواهیم داد المان های خود را راست چین یا راست به چپ کنید.

راست چین کردن جهت متن

با استفاده از المان direction می توانیم سایر المان ها را راست چین یا چپ چین کنیم. مثال:

  • ابتدا تگ دلخواه خود را باز کنید. در این جا ما تگ p را باز می کنیم.
  • در مرحله دوم استایل را به تگ اضافه می کنیم.
  • خصوصیت direction را به استایل اضافه می کنیم و عبارت rtl را در مقابل آن قرار می دهیم. rtl برای راست چین و ltr برای چپ چین می باشد.
  • تگ p را می بندیم.

<p style=”direction:rtl;”>متن</p>

نکته: شما می توانید بدون نوشتن استایل کلمه dir را در کنار المان مورد نظرتان به کار ببرید.

<p dir=”rtl”>متن</p>

راست چین کردن کل صفحه

شما می توانید با استفاده از به کار بردن خاصیت dir در تگ html کل صفحه را راست به چپ کنید. با این کار تمام المان های صفحه راست چین می شود. به مثال زیر توجه کنید.

<!DOCTYPE html>

<html dir="rtl" lang="fa">

<head>

    <meta charset="utf-8">

    <title>صفحه راست به چپ</title>

</head>

     <body>

تمامی المان‌های صفحه به صورت راست به چپ ایجاد می‌شود

    </body>

</html>

تغییر رنگ پس زمینه المان ها

تغییر رنگ پس زمینه تقریبا در تمام المان ها امکان پذیر است. یک روش برای تغییر رنگ پس زمینه استفاده از خاصیت background-color در کنار المان است. مثال:

<p style=”background-color:red;”>متن با پس زمینه قرمز</p>

در مثال بعدی رنگ پس زمینه صفحه را به طور کامل خاکستری می کنیم:

<!DOCTYPE html>

<html>

<head>

<title>صفحه با تم خاکستری</title>

</head>

<body style="background-color: gray">

باقی المان های صفحه در پشت زمینه خاکستری دیده خواهند شد

</body>

</html>

پایان قسمت نهم

آموزش کامل HTML – قسمت هشتم: فونت ها

توسط با بدون دیدگاه آموزش کامل HTML

فونت ها

برای ایجاد تغییرات در فونت ها باید از استایل در html استفاده کنیم. روش استفاده از استایل به صورت زیر است:

<tagname style = “style1; style2;”>محتوا</tagname>

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

<h1 style = “font-family: tahoma; color: blue;”>متن عنوان</h1>

font-family نوع فونت و color رنگ آن را مشخص می کند. توجه داشته باشید که امکان نمایش فونت پیش فرض در صورت اشتباه نوشتن نام فونت وجود دارد. برای رنگ ها از کد آن ها نیز می توانید استفاده کنید.

برای تغییر در اندازه فونت از خاصیت font-size استفاده می کنیم. اندازه فونت را معمولا بر حسب پیکسل px بیان می کنیم. البته معیارهای دیگری مانند em نیز وجود دارند.

در مثال زیر متنی با فونت تاهما رنگ 11111# و اندازه 12 پیکسل نمایش می دهیم.

<p style = “font-family: tahoma; color: #11111; font-size: 12px;”>متن مورد نظر</p>

هم تراز کردن متن

اتربیوت مورد نظر برای هم تراز کردن متن text-align می باشد. این خصوصیت به شما کمک می کند که متن خود را راست چین، وسط چین یا چپ چین کنید.

<p style = “text-align: right;”>متن راست چین</p>

<p style = “text-align: center;”>متن وسط چین</p>

<p style = “text-align: left;”>متن چپ چین</p>

پر رنگ کردن متن

برای پر رنگ کردن متن از تگ های <b></b> و <strong></strong> استفاده می کنیم و متن مورد نظر را در بین این تگ ها قرار می دهیم.

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

<p> آموزش <em>اچ تی ام ال</em> با <b>پردیس وردپرس</b> </p>

پایان جلسه هشتم

آموزش کامل HTML – قسمت هفتم: لیست ها

توسط با بدون دیدگاه آموزش کامل HTML

لیست ها در html

لیست ها در اچ تی ام ال کاربرد فراوانی دارند. از منو ها گرفته تا بسیاری دیگر از داده های منظم را با استفاده از لیست در متن قرار می دهیم. در html سه نوع لیست داریم:

  • لیست های نامنظم یا unorderd که دارای ترتیب دلخواه است
  • لیست های منظم یا orderd که دارای ترتیب خاصی مثلا بر اساس اعداد یا حروف الفبا مرتب می شود
  • نوع سوم نیز لیست توضیحات است که بعد از عنوان، توضیحات نوشته می شود و چندان کاربردی ندارد

لیست نامنظم

<ul>

<li>متن آیتم اول</li>

<li>متن آیتم دوم</li>

<li>متن آیتم سوم</li>

</ul>

اگر لیست های html را دیده باشید حتما متوجه شده اید که در کنار لیست ها معمولا یک علامت دایره توپر دیده می شود. این علامت یا آیکون را می توان با استفاده از صفت list-style-type تغییر داد. این اتربیوت به تگ ابتدایی <ul> اضافه می شود.

<ul list-style-type: “آیکون موردنظر”>

  • disc دایره تو پر پیش فرض
  • circles دایره
  • squares مربع
  • noun بدون آیکون

لیست منظم

<ol>

<li>آیتم اول</li>

<li>آیتم دوم</li>

<li>آیتم سوم</li>

</ol>

از خاصیت list-style-type در لیست های ترتیبی می توان به صورت زیر زیر استفاده کرد:

  • 1 برای مرتب سازی بر اساس اعداد
  • A مرتب سازی بر اساس حروف بزرگ
  • a مرتب سازی بر اساس حروف کوچک
  • I مرتب سازی با اعداد یونانی
  • i مرتب سازی با اعداد یونانی کوچک

توجه داشته باشید که موارد فوق هم مانند آیکون در کنار لیست ها نمایش داده می شود و ترتیب را نشان می دهد. برای مثال لیست زیر بر حسب اعداد مرتب شده:

<ul list-style-type: “1”>

 پایان قسمت هفتم

آموزش کامل HTML – قسمت ششم: لینک در عکس

توسط با یک دیدگاه آموزش کامل HTML

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

اضافه کردن لینک به تصاویر

تا این جای کار نحوه اضافه کردن لینک و عکس به صفحات html را یاد گرفته ایم. حال می خواهیم یک عکس را لینک کنیم.

ابتدا یک تگ لینک باز می کنیم و برای مثال آن را به پردیس وردپرس لینک می کنیم.

<a href = “http://pardiswp.com”>

این بار به جای نوشتن متن بین تگ های لینک یک تگ تصویر قرار می دهیم.

<a href = “http://pardiswp.com”> <img src = “http://www.pardiswp.com/wp-content/uploads/2016/05/learning-html.png”/>

و در آخر تگ لینک را می بندیم و کار تمام است، عکس مورد نظر لینک شده است.

<a href = “http://pardiswp.com”> <img src = “http://www.pardiswp.com/wp-content/uploads/2016/05/learning-html.png”/> </a>

نتیجه کد فوق نمایش عکس مورد نظر در مرورگر می باشد که با کلیک بر روی عکس به لینک درج شده در کد منتقل می

آموزش کامل HTML – قسمت پنجم: عکس ها

توسط با بدون دیدگاه آموزش کامل HTML

در قسمت چهارم آموزش html با لینک ها آشنا شدیم. در این قسمت در مورد عکس ها و اضافه کردن آن ها به صفحات وب صحبت می کنیم.

اضافه کردن عکس

برای اضافه کردن عکس در اچ تی ام ال از تگ <img> استفاده می کنیم. بعد از img آدرس عکس را وارد می کنیم. برای این کار از اتربیوت src به صورت زیر استفاده می کنیم.

<img src=”آدرس عکس”/>

همان طور که مشاهده می کنیم تگ فوق نیاز به بستن با تگ جداگانه ندارد. برای نمایش دادن عکس باید نام و فرمت عکس را دقیقا با آدرس عکس بنویسیم.

اتربیوت alt

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

<img src=”url” alt=”کلمه یا متن مورد نظر”/>

تنظیم ابعاد تصویر

برای تنطیم اندازه تصویر از صفت style استفاده می کنیم. اندازه تصاویر را بر حسب پیکسل مشخص می کنیم.

<img src=”url” style=”width:250px; height:350px;”/>

استفاده از اتربیوت style همیشه ضروری نیست و می توانید طول و عرض را به صورت مستقیم بنویسید. مثلا کد زیر مانند فوق عمل می کند:

<img src=”url” width=”350px” height=”250px”/>

پایان قسمت پنجم

آموزش کامل HTML – قسمت چهارم: لینک ها

توسط با بدون دیدگاه آموزش کامل HTML

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

نحوه قرار دادن لینک در صفحات HTML

لینک ها یکی از پر استفاده ترین المان های اچ تی ام ال هستند. با استفاده از لینک ها می توانیم کاربران خود را به صفحات دلخواه خود انتقال دهیم. استفاده از لینک ها در اچ تی ام ال به صورت زیر است:

<a href = “http://pardiswp.com”>متن لینک</a>

نتیجه ای که مروگر نشان می دهد به صورت زیر است:

متن لینک

بنابراین تگ <a> برای نمایش دادن یک لینک در صفحه به کار می رود و نحوه استفاده از آن به صورت فوق است. کلمه href در واقع مقصد لینک مورد نظر است و آدرس لینک را در مقابل آن قرار می دهیم. متن لینک هم همان نام لینک است و متن یا نامی که می خواهیم نماینده لینک باشد را مشخص می کند.

شاید این سوال برای شما پیش بیاید که کلمه href چیست، این کلمه در واقع یک صفت یا attribute است. بعضی از تگ ها در اچ تی ام ال دارای اتربیوت هستند که نقش توضیحی یا تکمیل کننده را برای آن تگ بازی می کنند. در تگ لینک هم href صفتی است که آدرس لینک را در خود قرار داده و آن را تکمیل می کند.

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

حال اگر بخواهیم که لینک ما در صفحه ای جدید بدون بسته شدن صفحه جاری باز شود باید از صفتی دیگر به نام target به صورت زیر استفاده کنیم.

<a href = “http://pardiswp.com” target = “_blank”>پردیس وردپرس</a>

پایان قسمت چهارم

آموزش کامل HTML – قسمت سوم: تگ های عنوان

توسط با بدون دیدگاه آموزش کامل HTML

در قسمت دوم آموزش html با تگ پاراگراف آشنا شدیم. در این قسمت از آموزش اچ تی ام ال با تگ های عنوان آشنا خواهیم شد.

به کمک تگ های عنوان می توانیم عنوان هایی برای متن هایمان در صفحه در نظر بگیریم. تگ عنوان را با h نمایش می دهیم.

تگ های عنوان <h>

تگ های عنوان در واقع 6 نوع هستند که آن ها را از <h1> تا <h6> نام گذاری می کنیم. تفاوت این تگ ها در اندازه آن ها می باشد. این تگ ها به ترتیب از بزرگ به کوچک از <h1> شروع می شوند تا <h6> که کوچکترین آن ها می باشد. برای ایجاد یک عنوان بزرگ از تگ <h1/> متن عنوان <h1> استفاده می کنیم. ویژگی پر رنگ بودن در هر 6 تگ از بزرگ به کوچک قابل مشاهده است.

برای تمرین و آشنایی بیشتر یک صفحه html طراحی کنید و هر 6 تگ را در آن امتحان کنید و خروجی را مشاهده کنید.

اهمیت تگ های عنوان

عناوین در زبان اچ تی ام ال از اهمیت بسیار زیادی برخوردار هستند. چرا که موتورهای جستجو برای ایندکس کردن سایت شما از عناوین به عنوان یکی از المان‌های مهم استفاده می‌کنند. همچنین تا حد امکان سعی کنید تا از عناوین برای بولد کردن کلمات در متن استفاده نکنید، چرا که آن ها تگ مخصوص خود را دارند و به آن تگ <b> می‌گوییم. (در رابطه با این تگ در آینده بیشتر می گوییم)

علاوه  بر این, ترتیب در استفاده از  عناوین هم مهم است. در واقع مهمترین مطالب با <h1> و مطالب زیر مجموعه و با اهمیت کمتر با <h2> و به ترتیب کم اهمیت ترین عناوین‌ با <h6> نوشته می‌شوند.

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