آموزش طراحی سایت

« آموزش ساختار اصلی سند HTML »

تگ اسکریپت (Script) :

این تگ برای تعریف اسکریپت های ( scripts ) مورد استفاده در صفحه از قبیل جاوا اسکریپت ، جی کوئری و … می باشد.

نکته ۱ : از تگ script ، میتوان در هر جای صفحه استفاده کرد اما توصیه میگردد در بخش head تعریف نشوند و در یک فایل خارجی جدا از سایت باشند و در صورت امکان آخرین کد html ، قرار داده شوند تا سرعت بارگزاری اولیه ی سایت بالا برود.

نکته ۲ : از این تگ برعکس متاتگ ها میتوان چند بار استفاده نمود و مشکلی بوجود نمی آید.

به دو روش میتوان از تگ اسکریپت (Script) استفاده نمود :

۱- تعریف اسکریپت داخلی :

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

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

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

طریقه ی استفاده از آن برای کد جاوا اسکریپت :

<script type="text/javascript" >

   .

   . محل کدهای جاوا اسکریپت

   .

</script>

۲ – تعریف اسکریپت خارجی :

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

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

توصیه میشود از این روش استفاده گردد اما تمامی کدهای اسکریپت را در صورت امکان در یک فایل ذخیره کنید تا از درخواست های اضافی برای بارگزاری فایل ها جلوگیری و در نتیجه سرعت بالاتر برود.

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

طریقه ی تعریف آن بصورت زیر می باشد:

<script language="JavaScript" src="آدرس فایل خارجی" />

<script language="JavaScript" src="./Scripts/functions.js" />

تگ استایل صفحه ( Style )

تگ استایل صفحه ( Style ) :

یکی از روش های تعریف استایل Css ، استفاده از تگ استایل ( تگ Style ) در بخش head صفحات html است ، که با تعریف آن میتوان در تمام صفحه برای ظاهر سایت استفاده نماییم.

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

طریقه ی تعریف آن بصورت زیر می باشد :

<style   type="text/css" >

   .

   . Css Code

   .

</style>

تگ لینک ( Link )

تگ لینک ( Link ) :

این تگ حاوی خصیصه های مختلفی برای ارتباط با فایل های خارجی می باشد. توصیه می شود که تگ لینک ( تگ Link ) در بخش head سایت استفاده گردد.

مهمترین استفاده های آن :

۱ – تعریف استایل ( Style ) خارجی :

مهمترین کاربرد این تگ تعریف استایل (Style) خارجی حاوی کدهای Css می باشد. یکی از روش های دیگر تعریف Css برای ظاهر و Style صفحه Html استفاده از فایل خارجی حاوی کد Css و تعریف آن در تگ Link در بخش Head صفحه می باشد.

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

برای تعریف Style خارجی فایل حاوی Css از کد زیر استفاده نمایید :

<link   rel=”Stylesheet”   type=”text/css” href=”آدرس فایل سی اس اس”    />

<link   rel=”Stylesheet”   type=”text/css” href=”../Css/theme1.css” />

<link   rel=”Stylesheet”   type=”text/css” href=”../Css/theme2.css” />

۲ – تعریف آیکون صفحه :

– برای تعریف آیکون صفحه در بخش آدرس بار مرورگر وب نیز ، از تگ لینک استفاده میشود :

<link rel="icon" href="./Design/ICON.ICO" type="image/x-icon" />

تگ عنوان Title

یکی از مهمترین تگ ها هم برای کاربران و بازدید کننده های سایت و هم برای جستجوگرهای وب تگ عنوان ( تگ Title ) می باشد . متنی که داخل این تگ قرار میگیرد عنوان صفحه را مشخص میکند که در title bar مرورگر به کاربران نشان داده می شود.

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

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

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

<html>

    <head>

      <title> متن عنوان صفحه </title>

      .

      .

   </head>

   <body>

      .

      .

      .

   </body>

</html>

متا تگ ها ( Meta Tag )

Meta Tag ها

متاتگ ها ( Meta Tag ) در واقع اطلاعاتی هستند که برای موتور های جستجوگر وب مانند گوگل و یاهو نوشته می شنود تا در هرچه بهتر ایندکس کردن صفحات استفاده شوند.

استفاده ی درست از این متاتگ ها تاثیر بسیار زیادی بر ایندکسینگ و شناخت بهتر موتور های جستجو مثل گوگل و یاهو و … از سایت ما دارد تا با این روش که در بخش آموزش سئو (Seo) و بهینه سازی سایت برای موتور های جستجو به طور کامل به ان پرداخته می شود ، سایت شما و صفحات شما در رتبه ی بالایی در گوگل و یاهو و … قرار بگیرند.

نکته ی مهم : بیش از ۷۰ % بازدید کنندگان سایت ها به طور متوسط از طریق موتور های جستجو مثل گوگل و یاهو وارد سایت ها می شوند.

شکل کلی آن و خصوصیات مشترک آنها بصورت زیر است :

<meta http-equiv="مقدار" name="مقدار" content="مقدار" />

در ادامه لیست کاملی از اصلی ترین متاتگ ها ( Meta Tag ) به همراه نحوه ی نگارش و دلیل استفاده ی آن ها را می آوریم :

متاتگ فارسی سازی صفحه (Utf-8) :

برای تعیین نوع رمزنگاری صفحه یا encoding صفحه از این متاتگ استفاده میشود. در صورت استفاده ننمودن از این متاتگ و encoding utf-8 ، در بعضی از مرورگرها و یا سیستم های کاربرانی که encoding فارسی ندارند ، متن های فارسی به صورت علامت سوال (؟) نشان داده می شوند.

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

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

متاتگ کلمات کلیدی (Keyword) :

یکیمتاتگ ها برای موتورهای جستجوگر این تگ Meta می باشد. استفاده ی درست از آن در رتبه ی موتورجستجوگر گوگل و یاهو و … تاثیر گزار است.

نکات مهم در استفاده از کلمات کلیدی :

۱ – محتوای Content این متاتگ نباید در حالت حروف فارسی از ۲۰۰ کاراکتر و در حالت حروف انگلیسی از ۴۰۰ تجاوز کند .

۲ – توصیه می شود که حداکثر از ۱۰ کلمه ی کلیدی مرتبط با متن که فکر میکنید کاربران بیشتر آنها را در موتورهای جستجوگر سرچ میکنند ، استفاده نمایید .

برای بدست آوردن این کلمات کلیدی از سایت زیر میتوانید استفاده کنید :

http://www.webconfs.com/keyword-density-checker.php

۳ – کلمات کلیدی را با ویرگول انگلیسی (,) بدون هیچ فاصله ای (Space) از هم جدا نمایید.

۴ – در الگوریتم های جدید گوگل ، تاثیر این تگ meta ، بسیار کم و حتی نادیده گرفته شده است. ولی موتورهای جستجوگر دیگر این Meta Tag را هنوز در نظر میگیرند.

توضیحات ریز در مورد این متاتگ در بخش آموزش سئو (Seo) بیان شده است.

طریقه ی استفاده از آن بصورت زیر است :

<meta name="keyword" content="کلمه۱,کلمه۲,کلمه۳,…" >

متاتگ توضیحات (Description) :

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

با این توضیح باید متنی که در این بخش انتخاب میکنید توضیحی باشد در مورد صفحه.

نکته ی مهم این است که در جملاتی که استفاده میکنید از کلمات موجود در کلمه های کلیدی (Keyword) صفحه ی خود استفاده نمایید.

بهتر است تعداد کاراکتر در این بخش حداقل ۱۵۰ و حداکثر ۲۰۰ کاراکتر در حالت فارسی انتخاب شود.

تاثیر این متاتگ در الگرویتم های جدید گوگل بسیار افزایش پیدا کرده و یکی از اصلی ترین موارد در سئو است.

طریقه ی استفاده از آن بصورت زیر می باشد :

<meta name="description" content="این متن توضیحی در مورد صفحه ی جاری می باشد">

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

این متاتگ ها صرفا برای آشنایی با سازنده ی صفحه ، نرم افزار سازنده و بروز کننده ی صفحه می باشد.

طریقه ی تعریف آنها بصورت زیر است :

<meta   http-equiv="Designer"   content="نام نرم افزار سازنده">

<meta   name="Generator"   content="نام سازنده صفحه">

<meta   name="Author"   content="نام بروز کننده">

متاتگ زبان مورد استفاده (Content-Language) :

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

طریقه ی تعریف آن برای زبان فارسی بصورت زیر است :

<meta http-equiv="Content-Language" content="Fa">

متاتگ کنترل کش (cache-control) :

این متاتگ برای عدم ذخیره ی صفحه در کش مرورگر می باشد. متاتگ کنترل کش (cache-control) برای آن دسته صفحاتی مفید است که بطور دایم اطلاعات آن به روز می شود و باید اطلاعات بصورت مداوم از سرور فراخوانی گردد.

طریقه ی استفاده از متاتگ کنترل کش (cache-control) برای عدم کش کردن و ذخیره در مرورگر بصورت زیر می باشد :

<meta http-equiv="cache-control" content="no-cache" />

یا

<meta http-equiv="pragma" content="no-cache" />

متاتگ روبوت های جستجوگر (ROBOTS) :

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

این متاتگ به ۳ صورت استفاده میشود :

۱ – حالت پیش فرض : ایندکس کردن صفحه و لینک ها توسط موتورهای جستجوگر :

<meta NAME="ROBOTS "CONTENT="ALL" />

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

<meta NAME="ROBOTS" CONTENT="INDEX,NOFOLLOW" />

۳ – متاتگ Robots زیر برای صفحات مدیریت و یا صفحاتی که نمیخواهید در موتورهای جستجوگر ایندکس شوند استفاده میشود. بدین صورت که به Robots های جستجوگر میفهمانید که صفحه ایندکس نشود :

<meta NAME="ROBOTS" CONTENT="NONE" />

یا

<meta NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW" />

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

تگ های ساختار Html , Head , Body

تگ Html

تگ html مشخص کننده ی شروع و پایان یک سند Html به مرورگر وب است.

بدین ترتیب که با <html> شروع شده و باقی کدها را نوشته و در پایان با <html/> سند Html را به پایان می رسانیم. بصورت زیر :

<html>

   .

   .

   .

</html>

تگ Head

تگ head یا معادل فارسی تگ سرانداز! اولین تگ در بدنه تگ html می باشد که حاوی یک سری اطلاعات برای مرورگر و نیز جستجوگر های وب می باشد.

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

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

در ادامه ی آموزش بصورت کامل این تگ ها را توضیح خواهیم داد.

نحوه ی نگارش آن بصورت زیر است:

<html>

    <head>

      .

      .

      .

   </head>

   .

   .

   .

</html>

تگ Body

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

این تگ بعد از تگ head قرار میگیرد و تمامی تگ های نمایشی در این بخش نوشته می شوند. روش نگارش و محل قرار گیری آن بصورت زیر می باشد :

<html>

    <head>

      .

      .

      .

   </head>

   <body>

      .

      .

      .

   </body>

</html>

نکته ی مهم : یکی از مهمترین مسائلی که برنامه نویسان وب باید دقت کنند استفاده از تگ head و تعریف استایل ها و اسکریپت هایی است که به کم حجم کردن بدنه ی سند html ما در تگ body کمک میکند. بصورت مثال با تعریف یک استایل در تگ head و استفاده از آن در تگهای body از تعریف چند باره ی آن جلوگیری میگردد. در ادامه به این موضوع به طور مفصل می پردازیم .

کدهای HTML و چگونگی تولید و اجرا

برای نوشتن کدهای HTML ، تنها یک ادیتور متن مانند Notepad ویندوز و یا نرم افزار های مرتبط با HTML همچون فرانت پیج یا ویژوال استودیو نیاز است .

در طی این آموزش ها می توانید با نرم افزار Notepad ویندوز کدها را نوشته و سپس ذخیره نمایید.

توجه ۱ : فایل های تولید شده را با پسوند .htm و یا .html ذخیره نمایید . تفاوتی بین این پسوند ها نمی باشد .

بعد از نوشتن کدها در Notepad و ذخیره ی آن با پسوند های ذکر شده ، برای اجرای کد نوشته شده فایل را در نرم افزار های مرورگر وب مانند Internet Explorer و یا Firefox و … اجرا نمایید.

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

How-to-generate-HTML-code-and-run

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

تگ های HTML

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

< تگ انتها / > محتويات < تگ ابتدا >

تگ ابتدايی مشخص کننده آغاز تگ و تگ پايانی ، مشخص کننده انتهای تگ است . هر تگ HTML ، بايد حتما در ادامه توسط تگ پايانی بسته شود . کليه نوشته ها و تگ های ديگری که در بين تگ ابتدا و پايان نوشته می شوند ، محتويات تگ را تشکيل می دهند .

انواع تگ های Html :

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

تگ‌های یکه. مانند ‎<HR>‎ که خط رسم می‌کند.
تگ‌هایی که شروع و پایان دارند. مثل: ‎<head></head>‎
تگ‌هایی که دارای ویژگی می‌باشند. مثل:

‎<a href=”http://www.w3.org”>متن</a>

توجه ۱ : تگ های یکه را میتوان به دو شکل نوشت که حالت دوم آن استاندارد می باشد :

حالت ۱ : <hr>

حالت ۲ : <hr / >

نکته ۱ : تگ های HTML نسبت به بزرگ و کوچک بودن حروف حساس نيستند ، يعنی تگ های < b > با < B > برابر هستند .

نکته ۲ : هر تگ HTML محتویات درون خود را تحت تاثير قرار می دهد . برای مثال تگ < b > برای توپر کردن ( bold ) نوشته به کار می رود و چنانچه متنی بين تگ باز و بسته < b > قرار بگيرد ، توپر می شود .

خواص تگ های HTML :

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

<p border=”1″> متن پاراگراف </p>

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

در صورتی که برای تگی بخواهیم از چندین خواص استفاده کنیم انها را با فاصله (Space) از هم جدا میکنیم :

<p id=”P1″ border=”1″ title=”test” > متن پاراگراف </p>

HTML چیست ؟

عبارت HTML ( اچ تی ام ال ) مخفف Hyper Text Markup Language به معنی زبان نشانه گذاری فوق متن است. Html زبان استاندارد طراحی صفحات وب است و کليه کدهای صفحه اعم از طرف سرور و طرف مشتری در نهايت به کدهای HTML تبديل شده و توسط مرورگر نمايش داده می شوند.

به عبارت دیگر مرورگر ها هیچکدام از کدها و کنترل های سمت سرور همچون کدهای asp و php را نمیشناسند و کد قابل فهم برای آنها اچ تی ام ال می باشد.

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

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

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

هر یک از کدهای html ، معنا و مفهوم خاصی دارند و تأثیر مشخصی بر محتوا می‌گذارند. مثلاً برچسب‌هایی برای تغییر شکل ظاهری متن، نظیر درشت و ضخیم کردن یک کلمه یا برقراری پیوند به صفحات دیگر در اچ‌تی‌ام‌ال تعریف شده‌اند.

یک سند اچ‌تی‌ام‌ال، یک پروندهٔ مبتنی بر متن (Text–based) است که معمولاً با پسوند .htm یا .html نام‌گذاری شده و محتویات آن از برچسب‌های اچ‌تی‌ام‌ال تشکیل می‌شود. مرورگرهای وب، که قادر به درک و تفسیر برچسب‌های اچ‌تی‌ام‌ال هستند، تک‌تک آن‌ها را از داخل سند اچ‌تی‌ام‌ال خوانده و سپس محتوای آن صفحه را نمایان‌سازی (Render) می‌کنند.

اچ‌تی‌ام‌ال زبان برنامه‌نویسی نیست، بلکه زبانی برای نشانه‌گذاری ابرمتن است و اساساً برای ساخت‌مند کردن اطلاعات و جدایش اجزای منطقی یک نوشتار — نظیر عناوین ، تصاویر ، فهرست‌ها ، بندها و جداول — به کار می‌رود. از سوی دیگر، اچ تی ام ال را نباید به عنوان زبانی برای صفحه‌آرایی یا نقاشی صفحات وب به کار بُرد؛ این وظیفه اکنون بر دوش فناوری‌های دیگری همچون سی اس اس ( Css ) است که در بخش آموزش Css به طور کامل به آن خواهیم پرداخت.

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