وبلاگ آسیا آی تی » html https://blog.asiait.ir آی تی | معرفی سایت ها | نقد برسی | آموزش | دانلود Sun, 18 Sep 2016 07:04:56 +0000 fa-IR hourly 1 http://asiait.ir/?v=4.1 چگونگی ساخت فن پیج فیسبوک https://blog.asiait.ir/%da%86%da%af%d9%88%d9%86%da%af%db%8c-%d8%b3%d8%a7%d8%ae%d8%aa-%d9%81%d9%86-%d9%be%db%8c%d8%ac-%d9%81%db%8c%d8%b3%d8%a8%d9%88%da%a9/ https://blog.asiait.ir/%da%86%da%af%d9%88%d9%86%da%af%db%8c-%d8%b3%d8%a7%d8%ae%d8%aa-%d9%81%d9%86-%d9%be%db%8c%d8%ac-%d9%81%db%8c%d8%b3%d8%a8%d9%88%da%a9/#comments Sun, 03 Jan 2016 09:08:17 +0000 http://blog.asiait.ir/?p=1321

آموزش به ترتیب و کامل:

۱.ابتدا وارد اکانت خودشوید بعد از ورود به اکانت خود شما آماده ساخت یک صفحه برای کارهای شخصی تجاری یا … یا همان fan page می باشید

۲.دنبال آیکونی باشید که نشان دهنده ساخت صفحه یا create page l می باشد البته شما می توانید از آدرس زیر نیز استفاده کنید

http://www.facebook.com/pages/create.php

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

۴.بعد از ساخت صفحه حالا نوبت به خوشگل کردن اون میرسه ازجمله اضافه کردن عکس توضییحات اضافی و ….
۵.خوب حالا نوبت به اضافه کردن این لینک به صفحه اصلی برای بازدید دیگران و در نهایت بالا رفتن آمار صفحه می شه که خوب در این صورت دکمه زیر رو فشار دهید
Promote this Page on your website

موفق  باشید.

]]> https://blog.asiait.ir/%da%86%da%af%d9%88%d9%86%da%af%db%8c-%d8%b3%d8%a7%d8%ae%d8%aa-%d9%81%d9%86-%d9%be%db%8c%d8%ac-%d9%81%db%8c%d8%b3%d8%a8%d9%88%da%a9/feed/ 0 نکات پایه ای – اطلاعات مفید در html https://blog.asiait.ir/%d9%86%da%a9%d8%a7%d8%aa-%d9%be%d8%a7%db%8c%d9%87-%d8%a7%db%8c-%d8%a7%d8%b7%d9%84%d8%a7%d8%b9%d8%a7%d8%aa-%d9%85%d9%81%db%8c%d8%af-%d8%af%d8%b1-html/ https://blog.asiait.ir/%d9%86%da%a9%d8%a7%d8%aa-%d9%be%d8%a7%db%8c%d9%87-%d8%a7%db%8c-%d8%a7%d8%b7%d9%84%d8%a7%d8%b9%d8%a7%d8%aa-%d9%85%d9%81%db%8c%d8%af-%d8%af%d8%b1-html/#comments Thu, 19 Nov 2015 08:17:06 +0000 http://blog.asiait.ir/?p=1295 نکات پایه ای – اطلاعات مفید

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

نکات پایه ای – اطلاعات مفید

همیشه یک علامت “/” به منابع زیر پوشه ها اضافه کنید. اگر شما پیوندی مثل این درست کنید

href=”http://www.html.ir/links.html”

شما دو تقاضا برای سرور درست کرده اید ، چون سرور یک علامت “/” به انتهای آدرس اضافه کرده و یک تقاضای جدید درست می کند. مثل این:

href=”http://www.html.ir/links.html/”

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

نکات پایه ای-اطلاعات مفید

اگر یک قاب حاشیه پدیدار داشته باشد کاربر می تواند با کشیدن حاشیه آن ، اندازه آن را تغییر دهد. برای جلوگیری از این عمل کاربر ، شما می توانید “noresize=”noresize را به برچسب <frame> اضافه کنید. اگر برچسب <noframes> را اضافه کنیم ، مرورگر قاب را پشتیبانی نمی کند.
مهم:شما نمی توانید برچسب های <body> </body> و <frame> </frame> را با هم استفاده کنید. هر چند اگر شما برچسب <noframes> را در مرورگر هایی که قابها را پشتیبانی نمی کنند و حاوی مقداری متن نیز باشد اضافه کنید شما باید متن را بین برچسب های <body> </body> قرار دهید.

نکته های پایه ای-اطلاعات مفید

عناصر <thead>، <tbody>و <tfoot>به دلیل پشتیبانی بد مرورگر ها به ندرت مورد استفاده قرار می گیرند. انتظار می رود که در نسخه های بعدی XHTML این روند تغییر کند.

نکات پایه ای – اطلاعات مفید

اگر یک فایل HTML حاوی 10 تصویر باشد ، برای نمایش کامل صفحه به 11 فایل احتیاج است. بارگیری تصاویر وقت گیر است ، بنابر این بهترین توصیه من اینست که از تصاویر به دقت استفاده کنید.

نکات پایه ای-اطلاعات مفید

bg color, background و موجودیت های متن در برچسب <body> در آخرین نسخه HTML بد دانسته شده است. کنسرسیوم شبکه گسترده جهانی(w3c) این موجودیت ها را از نظریه های خود حذف کرده.
به جای آن از CSS باید استفاده کرد(برای معرفی طرح بندی و نمایش خواص عناصر).

]]> https://blog.asiait.ir/%d9%86%da%a9%d8%a7%d8%aa-%d9%be%d8%a7%db%8c%d9%87-%d8%a7%db%8c-%d8%a7%d8%b7%d9%84%d8%a7%d8%b9%d8%a7%d8%aa-%d9%85%d9%81%db%8c%d8%af-%d8%af%d8%b1-html/feed/ 0 یک فایل HTML چیست؟ https://blog.asiait.ir/%db%8c%da%a9-%d9%81%d8%a7%db%8c%d9%84-html-%da%86%db%8c%d8%b3%d8%aa%d8%9f/ https://blog.asiait.ir/%db%8c%da%a9-%d9%81%d8%a7%db%8c%d9%84-html-%da%86%db%8c%d8%b3%d8%aa%d8%9f/#comments Thu, 19 Nov 2015 07:53:34 +0000 http://blog.asiait.ir/?p=1289 یک فایل HTML چیست؟
  • HTML مخفف زبان نشانه گذاری فرا متنی است (hyper text markup language).
  • یک فایل HTML یک فایل متنی حاوی برچسب های کوچک نشانه گذاریست
  • بر چسب های نشانه گذاری به مرورگرهای وب بیان می کنند که صفحه را چگونه نشان دهد
  • یک فایل HTML باید دارای پسوند htm. یا html. باشد
  • یک فایل HTML می تواند توسط یک ویرایشگر متنی ساده ساخته شود

پسوند htm. یا html. ?

هنگامی که شما یک فایل HTML را ذخیره می کنید شما می توانید هرکدام از پسوندهای htm. یا html. را انتخاب کنید.ما در مثال هایمان از پسوند htm. استفاده می کنیم. این ممکن است یک رفتار بد موروثی از گذشته باشد که بیشتر نرم افزارهایی که استفاده می شوند فقط پسوند سه حرفی را قبول می کنند.با نرم افزار جدیدتر ما فکر می کنیم که اگر از پسوند html. استفاده کنیم بسیار ایمن تر خواهیم بود.

برچسب های HTML

  • برچسب های HTML برای نشانه گذاری عناصر HTML استفاده می شوند
  • بر چسب های HTML توسط دو کاراکتر < و > محاط می شوند
  • این کاراکتر های محاط کننده قلاب نامیده می شوند
  • بر چسب های HTML معمولا بصورت جفت می آیند <b> , <b/>
  • اولین برچسب دوتایی برچسب شروع و دومی برچسب پایانی است
  • متن های بین برچسب ابتدایی و انتهایی محتوای عناصر هستند
  • برچسبهای HTML به حروف کوچک و بزرگ حساس نیستند <b> معادل <B>
]]> https://blog.asiait.ir/%db%8c%da%a9-%d9%81%d8%a7%db%8c%d9%84-html-%da%86%db%8c%d8%b3%d8%aa%d8%9f/feed/ 0 طراحی سایت به سبک HTML6 https://blog.asiait.ir/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%a8%d9%87-%d8%b3%d8%a8%da%a9-html6/ https://blog.asiait.ir/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%a8%d9%87-%d8%b3%d8%a8%da%a9-html6/#comments Fri, 15 May 2015 18:48:38 +0000 http://blog.asiait.ir/?p=1049 طراحی سایت به سبک HTML6

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

introduction-to-html6

مفهوم HTML5:

در این نسخه امکان مدیریت برنامه های وب با دقت و نظم بالایی وجود دارد و این قابلیت با  ابزارهای <header>, <menu>,<nav> , <menuitem> و … . بوجود آمده است.

توسعه­ دهندگان می­توانند برخی از ویژگی های شاخص  HTML5 که  شامل: آهنگ، ویدئو، ذخیره در حالت آفلاین و … را با اصول بهینه سازی سایت(سئو) همراه کنند. همچنین HTML6 این امکان را برای کاربران خود بوجود آورده است که از خاصیت و ویژگی نوعی از برچسب ها را استفاده کنند، مانند برچسب link و script؛ و حتی امکان استفاده از برچسب­ های <article> و> <section را در بهترین حالت ممکن ساخته است. تاکنون ترفند های زیادی ابداع نشده است که بتوان به وسیله ی آن ها به نتایج مطلوب رسید، به همین دلیل هنگام استفاده باید هوشمندانه عمل کرد.

مفهوم HTML 6:

ورژن HTML6 نسخه ی ارتقا یافته ­­ی  HTML ها است که دارای NameSpaces با ساختار XML می باشد. از ویژگی های مهم NameSpaces این است که با استفاده از برچسب­های <logo/>< logo>  و <toolbar/>< toolbar> قادر خواهید بود امکانی فراهم کنید که سایت قادر به شناسایی و تشخیص لوگو در صفحات وب سایت باشد. یکی دیگر از امکانات HTML6  این است که توسعه دهندگان وب و برنامه­ نویسان در طراحی سایت مورد نظرشان می توانند ار برچسب <container> به جای <div id =’container’> استفاده کنند.

maxresdefault

در حالت کلی  HTML6 دارای دو نوع برچسب منفرد حامل اطلاعات و ویژگی ها است، اما داده ها شامل متن نمی­ باشند، همچنین برچسب­ های جفتی می­توانند همراه با متن باشند. برخی از برچسب­های منفرد که در HTML6 قرار دارند که می­ توانند دارای namesapec   های زیر باشند:

<html:html>

<html:head>

<html:title>

<html:meta>

<html:link>

<html:a>

<html:media>

<html:body>

<html:button>

چند ویژگی که HTML6 را متمایز می کند:

  • امکان تغییر سایز تصاویر در مرورگر ها
  • زبان­های قابل اجرا
  • مدیریت بهتر در کنترل اشیای ویدئویی
  • پیش پردازنده های جایگزین
  • دسترسی امن به اطلاعات
]]> https://blog.asiait.ir/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%a8%d9%87-%d8%b3%d8%a8%da%a9-html6/feed/ 1 اشتباهات بزرگ در زبان HTML که هرگز نباید مرتکب شوید https://blog.asiait.ir/%d8%a7%d8%b4%d8%aa%d8%a8%d8%a7%d9%87%d8%a7%d8%aa-%d8%a8%d8%b2%d8%b1%da%af-%d8%af%d8%b1-%d8%b2%d8%a8%d8%a7%d9%86-html-%da%a9%d9%87-%d9%87%d8%b1%da%af%d8%b2-%d9%86%d8%a8%d8%a7%db%8c%d8%af-%d9%85%d8%b1/ https://blog.asiait.ir/%d8%a7%d8%b4%d8%aa%d8%a8%d8%a7%d9%87%d8%a7%d8%aa-%d8%a8%d8%b2%d8%b1%da%af-%d8%af%d8%b1-%d8%b2%d8%a8%d8%a7%d9%86-html-%da%a9%d9%87-%d9%87%d8%b1%da%af%d8%b2-%d9%86%d8%a8%d8%a7%db%8c%d8%af-%d9%85%d8%b1/#comments Fri, 01 May 2015 12:59:00 +0000 http://blog.asiait.ir/?p=1014 آموزش اصول کدنویسی و طراحی سایت کار بسیار پیچیده و سختی نیست اما آشنایی و تسلط بر این قوانین و رعایت اصول استاندارد و صحیح در کدنویسی نیاز به تجربه و کار بسیار دارد . در این مجموعه به بررسی ده اشتباه بزرگ در نوشتن کدهای HTML میپردازیم که رعایت آنها می تواند در استاندارد سازی کدهای HTML شما تاثیر بسیاری داشته باشد . شاید بتوان گفت تفاوت یک طراح وب سایت حرفه ای و آماتور در رعایت همین اصول و قوانین است که در زیر به چند مورد از آنها اشاره میشود .

گذاشتن تگ های Block در بین تگ های Inline

عناصر  HTML  به دو گروه inline و block گروه بندی می شوند . هر تگ به صورت پیش فرض دارای خصوصیت inline و یا block است . عناصر block تگهایی مانند div , p و مواردی دیگر را شامل میشند که بیشتر در ایجاد ساختار صفحات مورد استفاده قرار میگیرند . عناصر Inline با توجه به نوع و خصوصیت شان باید در درون عناصر block قرار بگیرند تا بتوانند با استفاده از این نوع از تگها در جریان صفحه قرار بگیرند .

ایا استفاده از عناصر block در بین تگهای inline کار اشتباهیست ؟ جواب  بله است و هرگز نباید انجام دهید .

اما میتوانید  عناصر inline به راحتی درون عناصر block قرار خواهند گرفت .

html
html
1
2
<a href="http://www.asiait.ir" > <h1>طراحی سایت</h1> </a>
<h1><a href="http://www.asiait.ir" >طراحی سایت</a></h1>

 خصوصیت تگ alt به تصاویر اضافه نکنید

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

استفاه نکردن از خصوصیت alt برای تصاویر یک اشتباه بزرگ است .

.

1
2
3
<img src="logo.png" />
<img src="logo.png" alt="asiait.ir logo"  />
<img src="logo.png" alt=""/>

استفاده نکردن از لیست ها – ul , ol – در جای لازم

تگهای ul,ol,li برای لیست کردن مطالب ساخته شده اند و کار با آنها بسیار ساده و راحت است و توانایی های بسیاری را برای کنترل لیست به وسیله css ایجاد خواهد نمود . استفاده از تگهای p , br و هر نوع دیگر از کدهای HTML به غیر از تگهای تعریف شده لیست ها ، برای شکل دهی یک لیست کار اشتباهیست که هرگز نباید انجام شود .

1
2
3
4
5
<p>
    طراحی سایت <br/>
    بهینه سازی سایت <br/>
    طراحی وب سایت  </br>
</p>
1
2
3
4
5
<ul>
  <li>طراحی سایت </li>
  <li>بهینه سازی سایت </li>
  <li>طراحی وب سایت  </li>
</ul>

استفاده از تگهای b,I,strong,em برای bold و italic کردن متن بدون در نظر گرفتن موتورهای جستجو

تگهای b و i میتوانند یک متن و یا کلمه را به حالت bold و Italic تغییر دهند . شاید با وجود CSS و توانائیهای فوق العاده در کنترل متن ها به ذهن شما برسد که از این ابزار برای راحتی کار خود استفاده نمائید . توانائیهای font-weight و font-style میتوانند جایگزین خوبی برای b و i باشند اما مشکلاتی را نیز خواهد داشت . در مواردی مخاطبان شما از مرورگرهای متنی بدون استفاده از style ها استفاده خواهند کرد که در اینصورت تفاوتی مابین کلمات bold و italic شده توسط CSS با سایر کلمات نخواهند دید و این مشکل باعث کاهش خوانایی مطالب شما می شود و کلمات با درجه اهمیت بیشتر مورد توجه مخاطب قرار نخواهد گرفت .

اگر شما به بهینه سازی وب سایت خود برای موتورهای جستجو اهمیت می دهید بهتر است از تگهای strong و em به صورت مستقیم در کد HTML به جای تگهای b و i و همچنین style ها استفاده نمائید . به این نکته بسیار مهم توجه داشته باشید که تگ های b و i تگهای نمایشی هستند و تگهای strong و em تگهای مفهومی و نمایشی هستند .

مفهوم این جمله این خواهد بود که متن ها به وسیله b و i فقط یک تغییر حالت ظاهری پیدا کرده اند و به همین دلیل مورد توجه موتورهای جستجو قرار نخواهند گرفت . اما با استفاده از تگهای strong و em شما به همراه تغییرات ظاهری یک شخصیت نیز به متن خود خواهید بخشید و اعلام خواهید کر که این متن در داخل این نوع از تگها از اهمیت بیشتری برخوردار خواهد بود .

بنابراین سعی کنید از این نوع از تگها در جای مناسب خود استفاده نمائید .از b و i در زمانی که نیازی به پر اهمیت کردن متن داخل این تگها نیست و فقط می خواهید شکل ظاهری را تغییر دهید و از strong و em در مواردی که علاوه بر شکل ظاهری می خواهید درجه اهمیت متن داخل آن را نیز نسبت به سایر کلمات افزایش دهید استفاده نمائید .

1
2
3
4
5
6
<b>asiait.ir</b>
<i>asiait.ir</i>
<span style="font-weight:bold"> asiait.ir </span>
<span style="font-style:italic"> asiait.ir </span>
<strong> asiait.ir </strong>
<em> asiait.ir </em>

استفاده بیش از حد از تگ br

تگ br برای ایجاد فاصله و شکست تنها یک خط در متن مورد استفاده قرار می گیرد . استفاده از تگ br برای ایجاد فاصله هایی بیشتر از یک خط در بین خطوط و یا عناصر دیگر اشتباه است . برای ایجاد فاصله بیشتر از یک خط در بین خطوط می توانید به راحتی از تگهای p و یا خصویت padding و margin و حتی line-height استفاده نمائید .

1
2
3
4
<p>
asiait.ir <br/><br/>
طراحی سایت 
</p>
1
2
<p>aasiait.ir</p>
<p>طراحی سایت  </p>

استفاده از تگهای s , strike برای نمایش متن های حذف شده

در نسخه های قدیمی تری از HTML از این دو نوع تگ برای نشان دادن کلمات حذف شده ( Strikethrough ) – با ایجاد یک خط بر روی آنها – استفاده می شده است . این نوع از تگ ها با ورود نسخه های جدیدی از HTML دگرگون شده اند و تگهای strike و s که قبلا برای این منظور استفاده می شده اند دیگر کاربردی نخواهند داشت و استفاده از آنها غیر استاندارد خواهد بود .

در نسخه های جدید از تگهای del – برای نشان دادن متن حذف شده – و از تگ ins – برای نشان دادن متن وارد شده به جای متن حذف شده – به همراه هم استفاده می شود .

بنابراین دچار اشتباه نشوید و از strike و s استفاده نکنید .

1
2
<s>کلمه حذف شده</s>
<stricke> کلمه حذف شده</stricke>
1
<del>کلمه حذف شده</del><ins>کلمه جایگزین شده</ins>

استفاده از inline style

هر چند که از style ها می توان به سه روش متفاوت استفاده نمود و یکی از این سه روش استفاده از style های inline در داخل هر تگ است . اما توصیه میشود که از inline style استفاده کمتری نمائید . استفاده از style های inline یک کار غیر استاندارد نیست اما دارای مشکلات و معایبی است که میتواند ما را برای استفاده از این نوع از style منصرف کند .

  • ویرایش این نوع از style با توجه به خطی بودن آنها بسیار مشکل است و با افزایش تعداد سندهای HTML گاهی به کار غیر ممکنی تبدیل می شود .
  • این نوع از style حجم صفحات را به شدت افزایش می دهد و این نکته ای بسیار منفی است .
  • کدها را به هم ریخته و ناخوانا خواهند کرد و ویرایش کد ها را – از نظر خوانایی – بسیار سخت خواهد نمود .
  • گاهی کدهای CSS خارجی را دچار مشکل می کنند – کدهای inline بر کدهای CSS خارجی تقدم دارند –

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

اما به صورت عمومی استفاده از inline style توصیه نمی شود .

1
<h2 style="color:red;">asiait.ir</h2>

اضافه و حذف کردن border در تگ HTML

Border ها یکی دیگر از خصوصیات تعدادی از عناصر HTML هستند که شما می توانید با استفاده از این خصوصیت به صورت مستقیم در تعدادی از تگهای HTML آنها را حذف ، اضافه و ویرایش نمائید .

در استاندارد های امروزی استفاده از این نوع خصوصیت به صورت مستقیم در تگهای HTML توصیه نمی شود و بهتر است به جای استفاده از این خصوصیت در تگهای HTML چشم پوشی نمائید و تغییرات مورد نظر خود را با استفاده از خصوصیت border در CSS انجام دهید . شما با استفاده از CSS توانایی بیشتری در کنترل این خصوصیت خواهید داشت .

1
<img  src="logo.png"  border="0" alt="" />
1
2
<img  src="logo.png" alt="" />
Img { border:none; }

استفاده نکردن از تگهای Heading

حتما از اهمیت تگ های heading – h1,h2,h3,h4,h5,h6 – با خبر هستید . قبلا مطالبی در مورد اهمیت این تگها در چینش صفحات و همچنین اهمیت آنها برای موتورهای جستجو منتشر شده است .

استفاده مناسب از عنوان ها – آموزش بهینه سازی سایت

اهمیت تگ های h1,h2,h3,h4,h5,h6 در چینش صفحات وب سایت

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

استفاده از انواع تگهای دیگر و استفاده از CSS برای تغییر ظاهری عناصری غیر از تگهای heading ، برای ایجاد سرفصل اشتباه بزرگی خواهد بود . سر فصل هایی که با تگهایی غیر از تگهای Heading ایجاد شده اند در مرورگرهای متنی قابل تشخیص نخواهند بود و همچنین از نظر موتورهای جستجو اهمیتی نخواهند داشت .

1
<p><strong>یک متن برای سر فصل</strong></p>
1
<h3>یک متن برای سر فصل</h3>

استفاده از تگهای blink و marquee

جدای از غیر استاندارد اعلام شدن این تگ ها توسط سازمان جهانی استانداردهای وب wc3 ، استفاده از این نوع از تگها در طراحی شما میتواند فاجعه ساز شود !!

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

طراحی سایت |  بهینه سازی سایت | طراحی وب سایت |  طراحی پرتال

1
2
<blink> به من نگاه کنید  </blink>
<marquee  width="100%" behavior="alternate" bgcolor="yellow" >This is an example..</ marquee >
]]> https://blog.asiait.ir/%d8%a7%d8%b4%d8%aa%d8%a8%d8%a7%d9%87%d8%a7%d8%aa-%d8%a8%d8%b2%d8%b1%da%af-%d8%af%d8%b1-%d8%b2%d8%a8%d8%a7%d9%86-html-%da%a9%d9%87-%d9%87%d8%b1%da%af%d8%b2-%d9%86%d8%a8%d8%a7%db%8c%d8%af-%d9%85%d8%b1/feed/ 0 مقدمه ای بر HTML https://blog.asiait.ir/%d9%85%d9%82%d8%af%d9%85%d9%87-%d8%a7%db%8c-%d8%a8%d8%b1-html/ https://blog.asiait.ir/%d9%85%d9%82%d8%af%d9%85%d9%87-%d8%a7%db%8c-%d8%a8%d8%b1-html/#comments Fri, 13 Mar 2015 17:02:48 +0000 http://blog.asiait.ir/?p=481 این مقاله شامل مقدمه ای بر HTML و تعریف، کاربرد و نحوه کلی استفاده از آن است. با HTML شما می توانید وب سایت خود را بسازید. زبان HTML بسیار ساده و روان است و شما از یادگیری آن لذت خواهید برد.

html5

HTML چیست؟

HTML یک زبان نشانه گذاری برای توصیف نوشته ها و اسناد وب است.

  • HTML مخفف عبارت Hyper Text Markup Language است.
  • یک زبان نشانه گذاری مجموعه ای از تگ های نشانه گذاری است.
  • اسناد HTML با تگ های HTML می گردند.
  • هر تگ HTML یک محتوای خاص را توصیف می‌کند.

نمونه کد HTML

<!DOCTYPE html>
<html>
<head>
<title>عنوان صفحه</title>
</head>
<body>
<h1>تیتر شماره 1</h1>
<p>پاراگراف شماره 1</p>
</body>
</html>

توضیح مثال

  • اعلان DOCTYPE نوع سند را به صورت HTML تعریف می‌کند.
  • متن بین <html> و <html/> سند HTML را توصیف می‌کند.
  • متن بین <head> و <head/> اطلاعاتی درباره سند ارائه می‌دهد.
  • متن بین <title> و <title/> یک عنوان برای سند قرار می‌دهد.
  • متن بین <body> و <body/> محتوای قابل نمایش داخل صفحه را تهیه میکند.
  • متن <h1> و <h1/> سرتیتر یا بزرگ ترین تیتر داخل محتوای قابل نمایش را توصیف می‌کند.
  • متن بین <p> و <p/> یک پاراگراف را توصیف می‌کند.

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

تگ‌های HTML

تگ های HTML کلمات کلیدی هستند که داخل <> قرار میگیرند.

<tagname>محتوا</tagname>

  • تگ‌های HTML معمولا به صورت یک جفت هستند که اولی درون <> و دومی درون</> نوشته می‌شوند.
  • تگ اول را تگ شروع و تگ دوم را تگ پایان می‌نامند.

نکته 1

نکته 1

گاهی اوقات تگ شروع را تگ بازکردن و تگ پایان را تگ بستن می‌نامند.

مرورگرها

یکی از اهداف مرورگرها توانایی خواندن و نمایش مستندات HTML است.

مرورگرها تگ‌های HTML را نمایش نمی‌دهند. آن‌ها تنها محتوای داخل تگ‌ها را تخمین زده و درصورت لزوم نمایش می‌دهند.

نحوه نمایش سند HTML در مرورگر
نحوه نمایش سند HTML در مرورگر

 ساختار صفحه HTML

<html>
<head>
<title>عنوان صفحه</title>
</head>
<body>
<h1>تیتر شماره 1</h1>
<p>پاراگراف شماره 1</p>
<p>پاراگراف شماره 2</p>
</body>
</html>

همانطور که مشاهده فرمودید فقط ساختار <body> که به رنگ قرمز است درون مرورگر نشان داده می‌شود.

<!DOCTYPE>اعلان

 اعلان <!DOCTYPE> به مرورگر کمک می‌کند که صفحه وب را به درستی نمایش دهد. انواع مختلفی از اسناد تحت وب وجود دارد که یکی از آن‌ها HTML است.  برای اینکه صفحه وب به طرز صحیحی نمایش داده شود، مرورگر باید نوع و ورژن سند را بداند.

doctype یا همان نوع سند به حروف کوچک و بزرگ حساس نیست و به شکل های زیر می تواند نمایش یابد.

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

اعلان های رایج

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

نسخه‌های HTML

نسخه سال
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014

پایان بخش اول

]]> https://blog.asiait.ir/%d9%85%d9%82%d8%af%d9%85%d9%87-%d8%a7%db%8c-%d8%a8%d8%b1-html/feed/ 4