۱۰ نکته مهم در کار با HTML برای مبتدیان

در این پست می خواهیم برای تازه کارها ۱۰ نکته و ترفند مهم درمورد کار با HTML بیان کنیم. اگر شما نیز به تازگی ساخت صفحات وب را آغاز کرده اید؛ این تکنیک ها به کارتان خواهد آمد.

۱- همیشه تگ های HTML تان را ببندید.

زمانی که با تایپ یک تگ HTML، آن را باز می کنید (برای مثال <b>، <p>) همیشه در انتهای بخش مورد نظر، دستور بستن آن تگ را تایپ بکنید تا در بخش بعدی، اجرا نشود. برای مثال:

• <b> اسب ها و فیل ها حیوانات مورد علاقه من هستند. </b>
• <p> اسب ها و فیل ها حیوانات مورد علاقه من هستند. </p>
• <h2> اسب ها و فیل ها حیوانات مورد علاقه من هستند. </h2>

این کار باعث می شود تا صفحات HTML شما در همه مرورگرها به درستی کار کنند، و به شما کمک می کند تا از بروز هرگونه مشکل عجیب در صفحات خود جلوگیری کنید. این امر به ویژه در مورد تگ هایی مانند <div> ،<span> ، <table> ، <tr> و <td> از اهمیت ویژه ای برخوردار است.

برخی از تگ ها دارای فرمان بستن تگ نیستند – از این تگ ها باید به تنهایی استفاده کنید که عبارتند از:

• تگ <br> برای ایجاد شکستگی در خط و رفتن به خط بعدی
• تگ <img> برای قرار دادن یک تصویر

با استفاده از XHTML، شما حتی می توانید تگ هایی مانند br و img را با قرار دادن “/” قبل از بسته شدن (“<“)ببندید. به عنوان مثال ، <br/> و <img…/> در مورد XHTML می توانید در مقاله های آموزشی XHTML ما، اطلاعات بیشتری کسب کنید.

۲- سبک HTML را با استفاده از استایل شیت در هر کجا امکان پذیر است، تغییر بدهید.

استایل شیت ها، سبک کدگذاری HTML شما را بسیار آسان تر می کند. دیگر نیازی نیست که در همه جا از تگ <font> استفاده کنید. شما همچنین می توانید بر سبک و مدل دیده شدن صفحات؛ کنترل بهتری داشته باشید و می توانید ظاهر صفحات خود را فقط با ویرایش یک فایل استایل شیت تغییر دهید.

۳- از یک اعتبارسنج HTML استفاده کنید.

ایده خوبی است که قبل از انتشار صفحات در وب سایت خود، آنها را از طریق اعتبار سنج HTML اجرا کنید. این برنامه ها مشکلات احتمالی مانند عدم استفاده از عبارت بستن تگ ها در جداول و استفاده از تگ هایی که به درستی در همه مرورگرها کار نمی کنند؛ نشان می دهند. فراموش نکنید – فقط به این دلیل که صفحه شما در مرورگرخودتان عالی به نظر می رسد، به این معنی نیست که در مرورگرهای دیگر هم کار می کند!

اعتبار سنج های HTML همچنین یک روش خوب برای یادگیری در مورد روش صحیح استفاده از تگهای HTML هستند و می توانید از اشتباهات خود بیاموزید!

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

۴- از کامنت های HTML عاقلانه استفاده کنید.

برای آنکه کد HTML برای شما (و برای دیگران) واضح تر شود، می توانید کامنت هایی را به کد خود اضافه کنید. کامنت ها کدهای کوچکی هستند که توسط مرورگرهای وب نادیده گرفته می شود، بنابراین می توانند برای افزودن یادداشت کوتاه و یادآوری در داخل کد مفید باشند:

<!– Navigation area: Highlight a menu item with the “hi” class –>

<div id=”nav”>

<ul>

<li><a href=”/”>Home</a></li>

<li class=”hi”><a href=”/about/”>About</a></li>

</ul>

</div>

۵- قرار دادن تصاویر در HTML

اشاره صحیح به تصاویر با استفاده از تگ <img> مانعی متداول برای مبتدیان است. اغلب صفحه وب شما روی دسکتاپ کامپیوتر شما عالی به نظر می رسد ، اما وقتی صفحه را در سایت خود بارگذاری می کنید ، تمام تصاویر خراب می شوند!

این مشکل توسط برخی از ویرایشگرهای صفحه وب که به اشتباه آدرس های تصویر “file://” را به جای استفاده از URL های نسبی قرار می دهند، حل نمی شود.

این قوانین ساده را دنبال کنید تا مطمئن شوید که تصاویر HTML هر بار به درستی ظاهر می شوند.

A) در صورت امکان، از URL های نسبی استفاده کنید.

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

<img src=”myphoto.jpg”>

اگر تصویر در فولدر image در همان سطح به عنوان صفحه وب قرار دارد؛ از کد زیر استفاده کنید:

<img src=”images/myphoto.jpg”>

B) روش دیگر ، از URL های مربوط به ریشه داکیومنت استفاده کنید

اگر تمام تصاویر شما در یک پوشه image در سطح بالاتر از سایت تان قرار داشته باشد (سند داکیومنت یا وب) ، می توانید به این تصاویر با استفاده از کدهای زیر دسترسی پیدا کنید:

<img src=”/images/myphoto.jpg”>

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

نقطه ضعف این رویکرد آن است که فقط وقتی صفحات وب شما از طریق یک سرور وب (با استفاده از //:http) نمایش داده می شود ، کار می کند، نه وقتی که مستقیم از هارد دیسک شما مشاهده شود (با استفاده از //:file).

c) از URL های قطعی استفاده نکنید!

در صورت امکان ، از استفاده از URL های قطعی در سایت خود خودداری کنید. یک URL مطلق که با //:http یا //:file شروع می شود. به طور خاص، اگر صفحه وب در هارد دیسک شما حاوی URL تصویری مانند این است:

طراحی رابط کاربری UI UX رو قورت بده! بدون کلاس، سرعت 2 برابر، ماندگاری 3 برابر، پولسازی عالی با طراحی جذاب اپلیکیشن، نرم افزار وبسایت... دانلود:

<img src=”file:///C:|/mywebsite/images/myphoto.jpg”>

یا:

<img src=”../images/myphoto.jpg”>

همان طور که در قانون A در بالا توضیح داده شده است.

۶- عرض و ارتفاع تصاویر HTML را می توانید مشخص کنید.

ایده خوبی است که width و height یک تصویر را هنگام استفاده از تگ <img> مشخص کنید. مثلا:

<img src=”myphoto.jpg” width=”234″ height=”123″>

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

بیشتر بسته های گرافیکی (فوتوشاپ، Paint Shop Pro و غیره) به شما امکان می دهند تا عرض و ارتفاع یک تصویر را ( برحسب پیکسل ها) مشاهده کنید تا بتوانید مقادیر را در تگ <img> قرار بدهید. همچنین می توانید بر روی تصویر راست کلیک کرده و Properties (در مرورگر Internet Explorer) را انتخاب کنید یا تصویر را در یک پنجره به تنهایی مشاهده کنید و عرض و ارتفاع را در نوار عنوان (در اکثر مرورگرهای دیگر) مشاهده کنید.

۷- فضاهای بدون فاصله در HTML

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

&nbsp;

برای مثال، لغات زیر اگر در انتهای خط قرار بگیرند؛ از هم جدا نمی شوند.

<p>The quick brown fox</p>

چون در این مثال، از فضای غیر مجزا استفاده می کند، کلمات “fox” و “brown” را در کنار هم نگه می دارد ، حتی اگر در انتهای یک خط قرار بگیرند:

<p>The quick brown&nbsp;fox</p>

۸- از جدول برای داده های جدولی و CSS برای طرح استفاده کنید

جداول به طور سنتی برای درج مطالب در صفحه استفاده می شوند. اما این امر به تنهایی، مورد استفاده ی آنها نیست. آنها واقعاً برای نمایش داده های جدولی (مانند داده های صفحات اسلاید) استفاده می شوند.

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

موقعیت یابی CSS همچنین می تواند ترفندهای بسیار جالبی را انجام دهد که به کار بردن آن تکنیک ها با جداول بسیار سخت است، و همچنین می توانید تغییر ظاهر سایت خود را فقط با تغییر استایل شیت خود انجام دهید (نمونه بارز این امر CSS Zen Garden است).

۹- ایجاد خانه های خالی جدول

بعضی اوقات ترجیح می دهید سلول های خالی در جدول (s<td>) ایجاد کنید که هیچ چیز در آنها وجود نداشته باشد. به خصوص هنگامی که یک ردیف خاص هیچ داده ای برای یکی از ستون های آن در اختیار نداشته باشد. معمولاً بهترین راه برای ایجاد یک خانه خالی در جدول با فضای غیر شکسته به شرح زیر است:

<td>&nbsp;</td>

فقط از <td> </td> استفاده نکنید زیرا این امر باعث می شود جداول شما در بعضی از مرورگرها بسیار عجیب به نظر برسد!

۱۰- ترفند فاصله گذاری GIF

برای این که کنترل دقیقی روی صفحه داشته باشید، و اگر هنوز به موقعیت یابی CSS مسلط نشده اید ، نمی توانید ترفند قدیمی فاصله گذاریGIF را استفاده کنید. این شامل استفاده از یک GIF 1پیکسل x 1 پیکسل است که در صفحات وب شما نامرئی خواهد بود و با استفاده از ویژگی های width و height برای کنترل دقیق بین عناصر صفحه مانند تصاویر، متن و سلول ها استفاده می شود. به عنوان مثال کد:

یک شکاف افقی ۱۰ پیکسلی بین دو تصویر ، یکی و دو Tweet ایجاد خواهد کرد.

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

<img src=”one.gif” width=”20″ height=”20″ border=”0″>

<img src=”space.gif” width=”10″ height=”1″ border=”0″>

<img src=”two.gif” width=”20″ height=”20″ border=”0″>

یک شکاف افقی ۱۰ پیکسلی بین دو تصویر one.gif و two.gif. ایجاد خواهد کرد.

می توانید از GIF های فاصله گذاری در خانه های یک جدول استفاده کنید تا آن خانه ی جدول را ببندید و مطمئن شوید که اندازه عرض یا ارتفاع آن ها کاسته نمی شود. در این کد مثال:

<td><img src=”space.gif” width=”1″ height=”20″ border=”0″></td>

سلول جدول حداقل به اندازه ۲۰ پیکسل ارتفاع خواهد داشت. تهیه یک GIF فضاگذاری در بسته های گرافیکی شما کار ساده ای است – یک تصویر جدید ۱پیکسل x 1 پیکسل ایجاد کنید و سپس آن را به عنوان GIF با پس زمینه نامرئی ذخیره کنید.

دانلود رایگان ۸ تا از بهترین جزوه های PDF آموزش Html

امیدوارم که از این نکات HTML لذت برده باشید و آنها را مفید بدانید و در استفاده از آنها در وب سایت خود موفق باشید!