عبارت HTML مخفف Hyper Text Markup Language به معنی زبان نشانه گذاری فوق متن است. Html زبان استاندارد طراحی صفحات وب است و کليه کدهای صفحه اعم از طرف سرور و طرف مشتری در نهايت به کدهای HTML تبديل شده و توسط مرورگر نمايش داده می شوند.به عبارت دیگر مرورگر ها هیچکدام از کدها و کنترل های سمت سرور همچون کدهای asp و php را نمیشناسند و کد قابل فهم برای آنها اچ تی ام ال می باشد.کامپایلر های زبان های برنامه نویسی سروری در نهایت کد های خود را برای نمایش به کد اچ تی ام ال تبدیل میکنند و برای مرورگر میفرستند تا به کاربران نمایش داده شود.HTML یک زبان نشانه گذاری است ، به اين معنی که بخش های مختلف توسط اجزايی به نام تگ از هم جدا شده ، که هر کدام دارای کاربرد و خواص مربوط خود هستند . اين تگ ها به مرورگر اعلام می کنند که هر بخش از صفحه چه نوع عنصری است و بايد به چه صورت نمايش داده شود .در مقاله ی تگ و خواص آن به این موصوع به طور مفصل پرداخته شده است.
در يک صفحه HTML می توان انواع عناصر از قبيل متن ، تيتر ، عکس ، جدول و ... را قرار داد ، که برای هر عنصر بايد از تگ مربوط به آن استفاده کرد . صفحات HTML فقط از کد ها که به صورت متن هستند تشکيل شده اند. بدین معنا که برای تصویر کد مربوط به تمایش تصویر و جدول و ... کدهای اچ تی ام ال مربوط به هر یک را باید نوشت و مرورگر با رسیدن به این کد ها و تگ ها ، المنت های مرتبط با آن را نمایش می دهد. هر یک از برچسب‌های اچ‌تی‌ام‌ال ، معنا و مفهوم خاصی دارند و تأثیر مشخصی بر محتوا می‌گذارند. مثلاً برچسب‌هایی برای تغییر شکل ظاهری متن، نظیر درشت و ضخیم کردن یک کلمه یا برقراری پیوند به صفحات دیگر در اچ‌تی‌ام‌ال تعریف شده‌اند.
یک سند اچ‌تی‌ام‌ال، یک پروندهٔ مبتنی بر متن (Text–based) است که معمولاً با پسوند .htm یا .html نام‌گذاری شده و محتویات آن از برچسب‌های اچ‌تی‌ام‌ال تشکیل میشود. مرورگرهای وب، که قادر به درک و تفسیر برچسب‌های اچ‌تی‌ام‌ال هستند، تک‌تک آنها را از داخل سند اچ‌تی‌ام‌ال خوانده و سپس محتوای آن صفحه را نمایان‌سازی (Render) میکنند.اچ‌تی‌ام‌ال زبان برنامه‌نویسی نیست، بلکه زبانی برای نشانه‌گذاری ابرمتن است و اساساً برای ساخت‌مند کردن اطلاعات و جدایش اجزای منطقی یک نوشتار — نظیرعناوین ،تصاویر ، فهرست‌ها ، بندها و جداول — به کار می‌رود. از سوی دیگر،اچ تی ام ال را نباید به عنوان زبانی برای صفحه‌آرایی یا نقاشی صفحات وب به کار بُرد؛ این وظیفه اکنون بر دوش فناوری‌های دیگری همچون سی اس اس ( Css ) است که در بخش آموزش Css به طور کامل به آن خواهیم پرداخت.امیدواریم در این سلسله آموزش های جامع Html به درک درستی از اچ تی ام رسیده و پایه ی طراحی سایت را که همان کد های Html می باشد را به طور درست فراگرفته و به کار ببرید. طراحی وب سایت
برای نوشتن کدهای HTML ، تنها یک ادیتور متن مانند Notepad ویندوز و یا نرم افزار های مرتبط با HTML همچون فرانت پیج یا ویژوال استودیو نیاز است .در طی این آموزش ها می توانید با نرم افزار Notepad ویندوز کدها را نوشته و سپس ذخیره نمایید.توجه 1 : فایل های تولید شده را با پسوند .htm و یا .html ذخیره نمایید . تفاوتی بین این پسوند ها نمی باشد .بعد از نوشتن کدها در Notepad و ذخیره ی آن با پسوند های ذکر شده ، برای اجرای کد نوشته شده فایل را در نرم افزار های مرورگر وب مانند Internet Explorer و یا Firefox و ... اجرا نمایید.
توجه 2 : نمایش کدها و شکل خروجی آنها بعضا در مرورگرهای مختلف یکسان نمی باشد و یکی از هنرهای برنامه نویسان وب ، نوشتن کدهایی با اجرای یکسان در مرورگر های مختلف است که در این سلسله آموزش ها این امر آموزش داده می شود.طراحی وب سایت
در اين قسمت خصوصيات استاندارد تگ های HTML معرفی شده اند . اين خصوصيات در اکثر تگ های HTML مشترک بوده و دارای کاربرد يکسانی هستند .
اين خصوصيات به دليل مشترک بودن ، فقط در اين قسمت ذکر شده و از تکرار آنها در صفحات ديگر خودداری شده است . خصوصيات اصلی تگ های اچ تی ام ال
نکته : اين خاصيت ها در تگ های base , head , html , meta , param , style , title و script وجود ندارد .
نام خاصيت
نوع خاصيت
شرح
class
نام کلاس عنصر
مشخص کننده کلاس تگ در کد نويسی برنامه است . اين کلاس در کدنويسی CSS و زبان های اسکريپتی کاربرد دارد .
id
id عنصر
مشخص کننده يک شناسه منحصر به فرد برای تگ در درون سند HTML است . id هر تگ در کدنويسی CSS و زبان های اسکرپيتی کاربرد دارد . توسط id می توان به تگ مورد نظر دست يافت .
style
يک خاصيت چند مفدارِي است که خصوصيات قالب دهی و اعمال سبک ها ( CSS ) را برای تگ مورد نظر مشخص می کند .
title
text
متن
متنی است که به صورت tooltip در يک کادر زرد رنگ ، در هنگام قرار گرفتن موس بر روی عنصر نمايش داده می شود .
خصوصيات زبان
نکته : اين خاصيت ها در تگ های base , br , frame , hr , iframe , param و script وجود ندارد .
نام خاصيت
نوع خاصيت
شرح
dir
rtl
ltr
تعيين کننده جهت قرار گرفتن نوشته را تعيين می کند ، که يکی از 2 حالت زير را می تواند داشته باشد :
ltr : چپ به راست
rtl : راست به چپ
language
نام زبان
مشخص کننده زبان برنامه نويسی کد مربوط به تگ است .
خصوصيات صفحه کليد
نام خاصيت
نوع خاصيت
شرح
accesskey
کليد میانبر
يک ميانبر صفحه کليد برای دستيابی به عنصر است .
tabindex
عدد
number
شماره ترتيبی قرار کرفتن فوکوس صفحه بر روی عنصر مورد نظر را در هنگام فشردن کليد tab مشخص می کند .
همانطور که در آموزش تگ و خواص آن گفته شد ، تگ ها میتوانند یک سری خصوصیات را در بر بگیرند که با استفاده از آنها از دیگر تگ های مشابه متمایز گردند.یکی از مهمترین خصوصیات تگ ها ، خصوصیت Style (استایل) می باشد. با استفاده از خصوصیت Style میتوان شکل ظاهری یک تگ را تعیین کرد.قاعده ی نوشتن خصوصیت Style از Css پیروی میکند . در آموزش Css در بخش طریقه نوشتن CSS - خاصیت Style تگ ها به طور مفصل این موضوع توضیح داده شده است.توجه : برای اطلاعات بیشتر در مورد Css و نحوه ی نوشتن دستورات Css به بخش آموزش CSS مراجعه شود.طریقه استفاده از تگ استیل در Html بصورت زیر می باشد :
<p style=" color:white; border:solid 1px red; width:100px; background-color:blue; font-size:10pt; text-align:center; "> متن پاراگراف </p>
با استفاده از این کد ما تگ p ای تعریف کردیم که این تگ و محتوای آن با استفاده از خصوصیت Style ای که نوشته ایم بصورت سفارشی در آورده شده. شکل خروجی این کد بدین صورت می باشد : متن پاراگراف توجه : این خاصیت از جمله خاصیت های تگ ها می باشد که در همه ی تگ ها به جز تگ های base , head , html , meta , param , style , title و script مشترک است.
این تگ مشخص کننده ی شروع و پایان یک سند Html به مرورگر وب است. بدین ترتیب که با <html> شروع شده و باقی کدها را نوشته و در پایان با <html/> سند Html را به پایان می رسانیم. بصورت زیر :<html> .
.
.
</html>
تگ head یا معادل فارسی تگ سرانداز! اولین تگ در بدنه تگ html می باشد که حاوی یک سری اطلاعات برای مرورگر و نیز جستجوگر های وب می باشد. اطلاعات این بخش در قسمت بدنه ی سند html ما نمایش داده نمی شود ولی اطلاعاتی همچون عنوان صفحه ، کلمات کلیدی ، استایل های خارجی و داخلی ، جاوا اسکریپت های خارجی و داخلی ، آیکون صفحه ، توضیحاتی راجع به سازنده و ... را تعریف میکند که برای مرورگر و نیز ایندکس کردن توسط جستجوگرهای وب مانند گوگل و یاهو بسیار مهم است. تگ های مورد استفاده ی این بخش بصورت زیر است: <title>, <meta>, <link>, <script>, <style> در ادامه ی آموزش بصورت کامل این تگ ها را توضیح خواهیم داد. نحوه ی نگارش آن بصورت زیر است:<html> <head>
.
.
.
</head>
.
.
.
</html>
متن و عکس و بطور کلی اطلاعاتی که قرار است در سند html ما به کاربران توسط مرورگرهای وب نمایش داده شود در این بخش نوشته خواهد شد. این تگ بعد از تگ head قرار میگیرد و تمامی تگ های نمایشی در این بخش نوشته می شوند. روش نگارش و محل قرار گیری آن بصورت زیر می باشد :<html> <head>
.
.
.
</head>
<body>
.
.
.
</body>
</html>
نکته ی مهم : یکی از مهمترین مسائلی که برنامه نویسان وب باید دقت کنند استفاده از تگ head و تعریف استایل ها و اسکریپت هایی است که به کم حجم کردن بدنه ی سند html ما در تگ body کمک میکند. بصورت مثال با تعریف یک استایل در تگ head و استفاده از آن در تگهای body از تعریف چند باره ی آن جلوگیری میگردد. در ادامه به این موضوع به طور مفصل می پردازیم .
متاتگ ها (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) :
مهمترین متاتگ برای موتورهای جستجوگر این متاتگ می باشد. استفاده ی درست از آن در رتبه ی موتورجستجوگر گوگل و یاهو و ... بسیار تاثیر گزار است.نکات مهم در استفاده از کلمات کلیدی :1 - محتوای Content این متاتگ نباید در حالت حروف فارسی از 200 کاراکتر و در حالت حروف انگلیسی از 400 تجاوز کند .2 - توصیه می شود که حداکثر از 10 کلمه ی کلیدی مرتبط با متن که فکر میکنید کاربران بیشتر آنها را در موتورهای جستجوگر سرچ میکنند ، استفاده نمایید .برای بدست آوردن این کلمات کلیدی از سایت زیر میتوانید استفاده کنید :
3 - کلمات کلیدی را با ویرگول انگلیسی (,) بدون هیچ فاصله ای (Space) از هم جدا نمایید.توضیحات ریز در مورد این متاتگ در بخش آموزش سئو (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="نام بروز کننده">
این متاتگ صرفا برای دسته بندی زبانی برای موتورهای جستجوگر می باشد و توصیه می شود استفاده گردد .طریقه ی تعریف آن برای زبان فارسی بصورت زیر است : <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 برای کنترل ایندکس کردن صفحه توسط موتورهای جستجوگر می باشد.این متاتگ به 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 که برای انتقال صفحه به یک آدرس و یا بارگزاری مجدد صفحه است استفاده ننماید. در صورت استفاده از این متاتگ موتورهای جستجو سایت شما را تحریم میکنند و رتبه ی شما را کاهش می دهند .
توجه 2 : نمایش کدها و شکل خروجی آنها بعضا در مرورگرهای مختلف یکسان نمی باشد و یکی از هنرهای برنامه نویسان وب ، نوشتن کدهایی با اجرای یکسان در مرورگر های مختلف است که در این سلسله آموزش ها این امر آموزش داده می شود. طراحی وب سایت
نمایندگیهای رسمی موبایل سامسونگ در تهران + مزایای استفاده از خدمات آنها