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

یک سند اچ تی ام ال ( html ) تشکیل شده است از هدر سربار و بدنه اصلی.
در زیر میتوانید با تعاریف این قسمت به طور کامل آشنا شوید و مثال هایی در رابطه با ساختار اصلی سند html را مشاهده نمایید :

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

تگ لینک ( تگ Link )

تگ Html

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

<html> .
.
.
</html>

تگ Head
تگ head یا معادل فارسی تگ سرانداز! اولین تگ در بدنه تگ html می باشد که حاوی یک سری اطلاعات برای مرورگر و نیز جستجوگر های وب می باشد.
اطلاعات این بخش در قسمت بدنه ی سند html ما نمایش داده نمی شود ولی اطلاعاتی همچون عنوان صفحه ، کلمات کلیدی ، استایل های خارجی و داخلی ، جاوا اسکریپت های خارجی و داخلی ، آیکون صفحه ، توضیحاتی راجع به سازنده و … را تعریف میکند که برای مرورگر و نیز ایندکس کردن توسط جستجوگرهای وب مانند گوگل و یاهو بسیار مهم است.
تگ های مورد استفاده ی این بخش بصورت زیر است:
<title>, <meta>, <link>, <script>, <style>
در ادامه ی آموزش بصورت کامل این تگ ها را توضیح خواهیم داد.
نحوه ی نگارش آن بصورت زیر است:

<html> <head>
.
.
.
</head>
.
.
.
</html>

تگ Body

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

<html> <head>
.
.
.
</head>
<body>
.
.
.
</body>
</html>

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

تگ عنوان Title

یکی از مهمترین تگ ها هم برای کاربران و بازدید کننده های سایت و هم برای جستجوگرهای وب تگ عنوان ( تگ Title ) می باشد . متنی که داخل این تگ قرار میگیرد عنوان صفحه را مشخص میکند که در title bar مرورگر به کاربران نشان داده می شود.
توجه داشته باشید متن داخل این تگ در صورت زیاد بودن ادامه ی آن توسط مرورگر حذف میشود پس از عناوین کوتاه استفاده کنید.
در بخش آموزش سئو (seo) استفاده ی مناسب از این تگ و اینکه چه کلماتی استفاده شود بطور کامل توضیح داده شده است.
نحوه ی استفاده از آن بصورت زیر می باشد :

<html>    <head>
<title> متن عنوان صفحه </title>
.
.
</head>
<body>
.
.
.
</body>
</html>

Meta Tag ها

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

<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 می باشد. استفاده ی درست از آن در رتبه ی موتورجستجوگر گوگل و یاهو و … تاثیر گزار است.
نکات مهم در استفاده از کلمات کلیدی :
1 – محتوای Content این متاتگ نباید در حالت حروف فارسی از 200 کاراکتر و در حالت حروف انگلیسی از 400 تجاوز کند .
2 – توصیه می شود که حداکثر از 10 کلمه ی کلیدی مرتبط با متن که فکر میکنید کاربران بیشتر آنها را در موتورهای جستجوگر سرچ میکنند ، استفاده نمایید .
برای بدست آوردن این کلمات کلیدی از سایت زیر میتوانید استفاده کنید :
http://www.webconfs.com/keyword-density-checker.php
3 – کلمات کلیدی را با ویرگول انگلیسی (,) بدون هیچ فاصله ای (Space) از هم جدا نمایید.
4 – در الگوریتم های جدید گوگل ، تاثیر این تگ meta ، بسیار کم و حتی نادیده گرفته شده است. ولی موتورهای جستجوگر دیگر این Meta Tag را هنوز در نظر میگیرند.
توضیحات ریز در مورد این متاتگ در بخش آموزش سئو (Seo) بیان شده است.
طریقه ی استفاده از آن بصورت زیر است :

<meta   name=”keyword”   content=”کلمه1,کلمه2,کلمه3,…” >

متاتگ توضیحات (Description) :
در صورتی که کاربران با استفاده از سرچ در موتورهای جستجوگر به لینک سایت شما در آنها بر بخورند ، توضیحی که در زیر لینک سایت شما به آنها نمایش داده می شود متنی است که شما در متاتگ توضیحات (Description) صفحه وارد نموده اید.
با این توضیح باید متنی که در این بخش انتخاب میکنید توضیحی باشد در مورد صفحه.
نکته ی مهم این است که در جملاتی که استفاده میکنید از کلمات موجود در کلمه های کلیدی (Keyword) صفحه ی خود استفاده نمایید.
بهتر است تعداد کاراکتر در این بخش حداقل 150 و حداکثر 200 کاراکتر در حالت فارسی انتخاب شود.
تاثیر این متاتگ در الگرویتم های جدید گوگل بسیار افزایش پیدا کرده و یکی از اصلی ترین موارد در سئو است.
طریقه ی استفاده از آن بصورت زیر می باشد :

<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 برای کنترل ایندکس کردن صفحه توسط موتورهای جستجوگر می باشد.
این متاتگ به 3 صورت استفاده میشود :
1 – حالت پیش فرض : ایندکس کردن صفحه و لینک ها توسط موتورهای جستجوگر :

<meta   NAME=“ROBOTS   “CONTENT=“ALL” />

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

<meta NAME=“ROBOTS”   CONTENT=“INDEX,NOFOLLOW”   />

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

<meta   NAME=“ROBOTS”   CONTENT=“NONE” />یا
<meta   NAME=“ROBOTS”   CONTENT=“NOINDEX,NOFOLLOW”   />

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

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

این تگ برای تعریف اسکریپت های ( scripts ) مورد استفاده در صفحه از قبیل جاوا اسکریپت ، جی کوئری و … می باشد.
نکته 1 : از تگ script ، میتوان در هر جای صفحه استفاده کرد اما توصیه میگردد در بخش head تعریف نشوند و در یک فایل خارجی جدا از سایت باشند و در صورت امکان آخرین کد html ، قرار داده شوند تا سرعت بارگزاری اولیه ی سایت بالا برود.
نکته 2 : از این تگ برعکس متاتگ ها میتوان چند بار استفاده نمود و مشکلی بوجود نمی آید.
به دو روش میتوان از تگ اسکریپت (Script) استفاده نمود :
1- تعریف اسکریپت داخلی :
در این روش کدهای اسکریپتی ما بطور مستقیم در داخل این تگ تعریف میگردند.
عیب این روش، نیاز به کدنویسی مجدد در دیگر صفحات مورد استفاده از توابع (function) استفاده شده در این قسمت می باشد که در صورت تغییر در کد مجبور به تغییر در همه ی صفحات خواهیم بود. اصطلاحا عدم کپسوله سازی را در پی دارد.
مزیت این نوع ، سرعت بالاتر آن نسبت به استفاده از اسکریپت خارجی و عدم نیاز به بارگزاری فایل خارجی می باشد.
طریقه ی استفاده از آن برای کد جاوا اسکریپت :

<script type=“text/javascript” >   .
. محل کدهای جاوا اسکریپت
.
</script>

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

<script language=“JavaScript” src=“آدرس فایل خارجی” /> <script language=“JavaScript” src=“./Scripts/functions.js” />

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

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

<style   type=”text/css” >   .
. Css Code
.
</style>

تگ لینک ( Link ) :

این تگ حاوی خصیصه های مختلفی برای ارتباط با فایل های خارجی می باشد. توصیه می شود که تگ لینک ( تگ Link ) در بخش head سایت استفاده گردد.
مهمترین استفاده های آن :
1 – تعریف استایل ( 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” />

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

<link   rel=“icon”   href=“./Design/ICON.ICO” type=“image/x-icon” />و
<link   rel=“shortcut icon”   href=“./Design/ICON.ICO”   type=“image/x-icon” />
مشکلات رایانه ای
سوالات رایانه ای
پاسخگویی به سوالات رایانه ای

مشکلات رایانه ای
سوالات رایانه ای
پاسخگویی به سوالات رایانه ای

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