فرهاد خانلری
کارشناس ارشد شبکه مایکروسافت

آموزش رایگان طراحی صفحات وب (HTML)

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

دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران

همانطور که میدانید صفحات وب صفحاتی هستند که بیشتر در اینترنت به کار برده میشوند در حقیقت تمام صفحات وب با HTML نوشته میشود اگر صفحه نیز با استفاده از Php , ASP یا زبان های دیگر ساخته شده باشد خروجی آن فقط دستورات Html و Javascript می باشد . Html یا Hyper Text Markup Language به ما توانایی تعیین فرمت متن ، اضافه کردن تصاویر ، صدا و ویدئو و ... در صفحات اینترنت را میدهد.یک صفحه وب چیزی جز یک فایل از نوع متن با پسوند Htm نیست با باز کردن این فایل توسط یک ویرایشگر ساده مثل notepad شما میتوانید کد های HTML رو ببینید و همچنین برای دیدن خروجی اصلی HTML میتوانید از مرورگرهای اینترنتی همانند Internet Explorer ، Mozila و ... استفاده کنید.

تگ یا Tag در HTML چیست؟

به دستورات برنامه نویسی توسط HTML تگ یا TAG گفته میشود و در علامت های “ < ” یا “ > ” قرار میگیرند.این تگ ها به صورت های مختلف نوشته میشوند یک دسته از این تگها تگ هایی هستند که در هر جایی از صفحه ممکن است درج شود مانند تگ <HR> و هر وقت این کد درج شود بلافاصله یک خط افقی درج میگردد.

یک سری تگ یا TAG هستند که باید ابتدا و انتهای مشخصی داشته باشند یعنی این تگ ها دارای ابتدا و انتها هستند و از این نوع تگ ها زیاد استفاده میشود مانند تگ <B> که زمانی این تگ باز میشود تا بسته شدن این تگ هر نوشته ای که مابین این دو تگ باشد BOLD میشود و انتهای تمام تگ ها با یک اسلش به پایان میرسد مانند <B/> یک سری تگ دیگر هستند که علاوه بر اینکه ابتدا و انتهای آن مشخص است این تگ ها وجودشان مستلزم داشتن یک سری پارامتر است مانند تگ Font که دارای پارامتر های گوناگون است به صورت مثال:

<Font Face =”Tahoma” Size =20>www.tosinso.com</Font>

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

آشنایی با برخی از تگ ها در HTML

  • تگ <Hn> : از این تگ معمولاً برای استفاده از عناوین استفاده میشود البته به جای n باید یک عدد به کار برده شود این اعداد از 1 تا 6 هستند h1 یعنی بزرگترین حالت و h6 یعنی کوچکترین حالت برای متن ها به کار برده میشود.
  • تگ <I> یا <em>یا <address> : این تگ نیز باید با اسلش به پایان برسد وظیفه این تگ مورب کردن یا ایتالیک متن است .
  • تگ <B> یا <Strong> : این تگ برای Bold کردن متن به کار برده میشود.
  • تگ <U> : برای نمایش متن به صورت زیر خط دار این تگ به کار می آید
  • تگ <Strike> : این تگ نیز برای این به کار میرود که یک خط را روی متن میکشد
  • تگ <Font> : برای اینکه بتوانیم فونت یا قلم یک متن را مشخص کنیم از این تگ استفاده میکنیم ، اما اگر از این تگ استفاده نکنیم مرورگر اینترنت از فونت پیشفرض برای نمایش متن ها نشان میدهد و اگر فونتی را انتخاب کنیم که آن فونت در سیستم موجود نباشد باز هم همان فونت پیشفرض را برای ما به نمایش میگذارد.این تگ نیز دارای پارامتر هایی است مثلاً پارامتر Face برای تعیین نوع فونت به کار میرود شما میتوانید در این پارامتر با کاما چندین فونت را به کار ببرید تا اگر فونت ها در سیستم مقابل موجود نبود از یک فونت دیگر استفاده کند ، یکی دیگر از پارامتر های این تگ پارامتر Size است که اندازه فونت را نمایش میدهد حتی میتوان با استفاده از پارامتر color=red مثلاً رنگ قرمز را برای فونت انتخاب نمود :
  • تگ <BR> : این تگ از جمله تگ هایی است که نیاز به پایان ندارد اما با پیدایش این تگ خط شکسته میشود به عبارتی متن به خط بعدی ادامه پیدا میکند
  • تگ <Center> : نتیجه استفاده از این تگ این است که متن داخل این تگ وسط چین می شود و در وسط مرورگر به نمایش در می آید
  • تگ <P> : از این تگ برای ایجاد پاراگراف استفاده میشود در انتهای متن این تگ باید بسته شود.
  • تگ <Pre> : کلاً HTML با فاصله رابطه خوبی ندارد یعنی فاصله ها را در نظر نمیگیرد و خصوص خالی میان کلمات را نمیبیند و کلمات را پشت سر هم قرار میدهد این تگ که باید پایان هم داشته باشد برای این منظور است که هر کلمه یا پاراگرافی را در این تگ قرار دهید همانگونه که تایپ می شوند نمایش داده میشود و فاصله ها را هم در نظر میگیرد.
  • تگ <Ul> : این تگ مخفف Unordered List یا لیست هایی که به ترتیب موارد در آنها تاثیر ندارد می باشد هر لیست از آیتم یا مواردی تشکیل شده است که هر یک از این موارد با تگ <Li> (که این تگ نیز دارای پایان است در در داخل تگ <Ul> نوشته میشود .تگ Li مخفف ListItem یا همان موارد لیست است.
آموزش  html

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

learning html
  • تگ <Ol> : این تگ مخفف Ordered List یا لیست هایی که ترتیب موارد در آنها تاثیر دارد می باشد هر لیست از آیتم یا مواردی تشکیل شده است که هر یک از این موارد بین تگ های <Ol> , </Ol> با تگ <Li> , </Li> نوشته میشود تگ Li مخفف listeItem است. برای این تگ نیز مثالی میزنیم:
amoozesh Html

تصویر بالا برگرفته از کد زیر است

آموزش قدم به قدم HTML
  • تگ <bdo> : این تگ نیز دارای انتها است و برای راستچین یا چپ چین نوشتن متن به کار برده میشود اگر
dir="rtl"

تعریف شود حروف از راست به چپ قرار میگیرد یعنی کلمه بر عکس می شود و اگر dir برابر با ltr باشد تغییری در کلمه ایجاد نمی شود به عنوان مثال:

Html آموزش

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

آموزش طراحی سایت
  • تگ <div> و <span> : این دو تگ از مهمترین تگ های طراحی صفخات وب هستند این دو تگ را برای دسته بندی متون و سپس استایل دادن مناسب به این دسته ها میتوان استفاده نمود یک کلاس در CSS میتواند به div و Span نسبت داده شود و این دو تگ از نظر ظاهری هیچ شکل خاصی ندارند و تنها با استایل شکل ظاهری شان تغییر میکند و تنها تفاوت div نسبت یه span در این است که div جدا کننده صفحه است زیرا div مانند پاراگراف ابتدا و انتهای متن را می بندد.
  • تگ<sup> و <sub> : از تگ sup برای نمایش توان و از تگ sub برای نمایش اندیس استفاده میشود البته برای فرمول های شیمیایی و ریاضی بیشتر کاربرد دارد مثال زیر را دقت کنید هم کد و هم خروجی را در تصویر نمایان است
آموزش ظراحی سایت
  • تگ <Object> : از این تگ برای قراردادن یک فایل خارجی در فایل HTML استفاده می شود ، میتوان از این تگ برای قراردادن فایل های فلش و یا انواع فایل های ویدئویی استفاده نمود مثال زیر را ببینید

با پارامتر زیر آدرس فیلم خود را میتوانید معرفی نمایید

<param name="src" value="example.mpg"/>

با پارامتر زیر فیلم را به صورت خودکار میتوانید پخش کنید

<param name="autoplay" value="true"/>

و اما یک مثال عملی برای این تگ که کد و نحوه نمایش را میتوانید در تصویر زیر ببینید

آموزش گام به گام طراحی سایت
  • تگ <img> : این تگ از پرکاربرد ترین تگ ها می باشد و از جمله تگ هایی است که پایان ندارد کاربرد این تگ برای نمایش عکس در صفحات وب است استفاده از crs یا source همان آدرس تصویر است و alt نوشته ای است که Tooltip موس برای آن تصویر به نمایش در می آید
قدم به قدم با طراحی سایت
  • تگ <a> : این تگ نیز دارای پایان است و از این تگ برای ایجاد لینک ارتباطی به یک صفحه دیگر استفاده می شود این تگ دارای خاصیت target است که به مکان باز شدن صفحه جدید اشاره دارد و این خاصیت مقادیر Blank یعنی باز شدن در یم صفحه جداگانه و parent یعنی باز شدن در صفحه اصلی و self یعنی باز شدن در همان صفحه و در نهایت top یعنی باز شدن در یک صفحه که بالا تر از صفحات دیگر است را دارا است. به عنوان مثال
مقدمات یادگیری طراحی وب

ضمناً برای ساختن لینک ایمیل کافی است از دستور زیر استفاده شود:

<a href="mailto:webmaster@mywebsite.com">send feedback</a>
  • تگ <table> : هر جدول از سط و ستون تشکیل شده است در HTML سطر هر جدول را با تگ <tr> و ستون ها را با تگ <td> یا به عبارتی محتویات داخل هر سلول را مشخص میکنیم. مانند:
<table>
<tr>
   <td> row 1 cell 1 </td>
   <td> row 1 cell 2 </td>
   <td> row 1 cell 3 </td>
</tr>
<tr>
<td> row 2 cell 1 </td>
<td> row 2 cell 2 </td>
<td> row 2 cell 3 </td>
</tr>
</table>

یکی از مشکلاتی که زبان HTML دارد ایستا بودن آن است یعنی شما نمیتوانید هیچ برنامه ای بنویسید که بتواند پردازشی روی مطالب داشته باشد یعنی نمیتوانید صفحه لاگینی داشته باشید که بفهمد آیا کاربر مجاز است برای ورود یا خیر اما برای حل این مشکل ما باید از زبان های ASP.Net یا جاوا اسکریپت یا vb Script را در کنار HTML به کار بگیریم .حتماً شنیدید که با برنامه Notepad هم میتوان برنامه نوشت اما بیایید با هم این داستان را عملی پیاده کنیم یک مثال بسیار ساده برنامه Notepad را باز میکنیم و کد های زیر را داخل این ویرایشگر دوست داشتنی تایپ میکنیم

وب سایت توسینسو

در نهایت موقع save کردن باید با پسوند html یا html ذخیره کنید سپس با یک مرورگر باز میکنیم و خروجی را مشاهده مینماییم.

آموزش گام به گام HTML
آموزش قدم به قدم HTML
آموزش کامل HTML

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

  • نکته: تو رفتگی های کد ها و همچنین فاصله ها در این کد ها اصلاً ربطی به نمایش این کد ها ندارد و فقط صرفاً جهت تسهیل در کد نویسی می باشد.اما اگر بخواهیم محتویات یک صفحه وب را ببینیم میتوانیم از منوی View گزینه Source را انتخاب میکنیم مانند تصاویر زیر تا با کد هایی که این صفحه را تشکیل دادند آشنا شویم البته همین مرورگر ها نیز کمک میکنند تا راحت تر کد ها را ویرایش کنیم و از همین منو و گزینه Source بتوانیم Notepad را باز کنیم و اطلاعات را تغییر بدهیم.
گام به گام با HTML
آموزش صفحات وب و HTML

امیدوارم با نظر هاتون و کمک هاتون بتونم این آموزش رو پیوسته ادامه بدم ، پایدار باشید.

انواع تگ

در بخش قبلی با انواع تگ (tag) ها آشنا شدیم در ادامه میخواهیم به ادامه این تگ ها بپردازیم. با آموزش این زبان در واقع شما پایه های ورود به وب خودتون رو مستحکم تر میکنید و آماده میشوید چگونه صفحات وبتون رو چگونه طراحی کنید ، برنامه های بسیار زیادی هستند که شما میتونید برنامه نویسی یا کد نویسی با HTML را با انواع برنامه ها شروع کنید مانند Html Pad یا Front Page یا حتی Note Pad اما برنامه های مختلف به ما کمک میکنند تا کد هامون رو سریع تر و دسته بندی تر بنویسیم من در این سری از آموزش ها بیشتر با برنامه front Page که در داخل بسته Office مایکروسافت موجود هست استفاده میکنم.

وقتی برنامه front Page را باز میکنید در ابتدا مانند تصویر زیر کد هایی را برای شروع خواهید دید و همینطور زمانی که علامت کوچکتر را تایپ میکنید پنجره ای یا منویی باز میشود به نام intellisense که این منو برای برنامه نویسان بسیار پر کاربرد و حیاتی می باشد مخصوصاً افرادی که با Visual Studio کار میکنند با intellisense آشنایی زیادی دارند ، خب به هر حال میبینید که در این منو تمام تگ هایی که ممکن است شما بخواهید از آن استفاده کنید لیست میشوند

آموزش HTML

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

قدم به قدم با HTML

پس از تایپ کد هامون همونطور که در قسمت قبلی دیدیم من از پسوند Htm یا HTML استفاده میکنم چون نیازی به رندر کرن نداره و صرفاً میخوام با مرورگر هایی مثل Mozilla یا IE به نمایش در بیان البته شما در سطح اینترنت پسوند های زیادی رو ممکنه مشاهده کنید مثل Asp , Jsp , Php , Mspx , Aspx , Prl اینها تماماً برنامه هایی هستند که اصطلاحاً سرور سایت هستند یعنی در داخل این تگ های HTML کد هایی دیگه ای هم مینویسن که این کد ها رو اون سروری که برای ما داره میفرسته اجرا میکنه

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

در بالای مرورگر خودتون متنی رو به نمایش در بیارید میتونید در داخل این تگ از تگی دیگر به نام Title استفاده کنید که در داخل این تگ میتوان متنی قرار داد مثلاً عنوان صفحه یا اسم صفحه تا بالای مرورگرتون به نمایش در بیاد و هر آن چیزی که شما در صفحه مرورگر خودتون خواهید دید در تگی قرار داره به نام تگ Body و تقریباً تمام تگ هایی رو که در قسمت قبلی عنوان شد در داخل این تگ به کار گرفته میشوند.

اما تقریباً تمام برنامه نویسان به Comment گزاری عادت کرده اند باید بدونید این زبان نیز از کامنت گزاری پشتیبانی میکند و شما میتوانید برای کد های خودتون کامنت هایی رو در نظر بگیرید و این کامنت ها هیچ تاثیری در کد ها ندارند و فقط برای برنامه نویس یا کسانی که بعداً میخواهند کد ها را بخوانند مفید است تا بدانند کدام خط یا کدام تگ یا دستور چه وظیفه ای را دارد و برای درج کامنت از کد زیر استفاده میشود.

<body>
	   <!-- this is a comment -->
</body>

ادامه آشنایی با برخی از تگ ها

  • تگ <del> : اگر میخواهید در جمله ای که استفاده میکنید یک خط روی کلمه یا جمله تان کشیده شود از این تگ استفاده کنید
  • تگ <ins> : اگر میخواهید یک UnderLine یا یک زیر خط بر روی کلمه یا جمله تان که نمایانگر اضافه شدن یک متن است استفاده کنید از این تگ میتوان استفاده کرد در ادامه خروجی دستور زیر را در تصویر خواهید دید
<body>
	web site <del>itprogram</del>change name <ins>itpro</ins> my favorites
</body>
قدم به قدم با دستورات و تگ های HTML
  • تگ <ol>و attribute ای ب ه نام type : در بخش قبلی در مورد تگ OL صحبت شد اما در این قسمت با استفاده از attribute ای به نام type که میتوان به دلخواه نام گزاری و شماره گزاری ها را ایجاد نمود در ادامه کد مورد نظر را خواهید دید و خروجی این تکه کد را در تصویر زیر مشاهده خواهید نمود.
<body>
		<ol type="I">
		<li>Major Point
		<ol type="A">		
		<li>Sub Point</li>
		
		<li>Sub Point</li>
		</ol>
		</li>
		
		<li>Major Point
		
		<ol type ="A">
		<li>Sub Point</li>
		<li>Sub point</li>
		</ol>
		</li>
		</ol>
</body>
اموزش HTML
  • تگ <dt> و <dd> : در definition List ها وظیفه اشون اینه که تعاریف را مثل یک دیکشنری یا لیست یا ایندکس به ما نمایش میدهند و کار اصلی definition ها تعاریف هست dt مخفف definition terms هست که قرار هست توضیحات این قسمت داده شه و dd مخفف definition description دقیقاً پشت سر اون کلمه توضیحش داده خواهد شد (هر dt یک dd دارد) مثال زیر را دقت کنید:
<body>
<h1>Html Terms</h1> this is a sample test , this type of list lends itself most readily for use on web site.
<dl>
	<dt>Html</dt>
	<dd>Hyper Text Markup Language</dd>
	
	<dt>Attribute</dt>
	<dd>Identifies a characteristic of an element</dd>
	
	<dt>itpro</dt>
	<dd>the best web site</dd>
</dl>
</body>
آموزش tag در HTML
  • Entity : کارکتر هایی هستند کا ما نمی توانیم مستقیم توسط کیبورد آنها را تایپ کنیم پس به ناچار باید کد هایی را تایپ کنیم بگزارید entity ها را با یک مثال جامع جلو ببریم:
entity ها در HTML

البته تعداد این کارکتر هایی که به کد اسکی معروف هستند زیاد میباشد بنابر این میتوانید اطلاعات بیشتر را در لینک زیر دنبال کنید

  • تگ <blockquote> به همراه استفاده از تگ <br>

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

<body>
<blockquote>
123<br>
456<br>
ABCD<br>
EFGH<br>
</blockquote>
</body>
با سلام و درود و عذر خواهی از بابت دیر آماده شدن قسمت دوم مباحث پیوسته HTML ، CSS ، Java Script ، در *|بخش قبلی::http://web.tosinso.com/articles/19962|* با انواع تگ (tag) ها آشنا شدیم در ادامه میخواهیم به ادامه این تگ ها بپردازیم.
با آموزش این زبان در واقع شما پایه های ورود به وب خودتون رو مستحکم تر میکنید و آماده میشوید چگونه صفحات وبتون رو چگونه طراحی کنید ، برنامه های بسیار زیادی هستند که شما میتونید برنامه نویسی یا کد نویسی با HTML را با انواع برنامه ها  شروع کنید مانند Html Pad یا Front Page یا حتی Note Pad اما برنامه های مختلف به ما کمک میکنند تا کد هامون رو سریع تر و دسته بندی تر بنویسیم من در این سری از آموزش ها بیشتر با برنامه front Page که در داخل بسته Office مایکروسافت موجود هست استفاده میکنم.
وقتی برنامه front Page را باز میکنید در ابتدا مانند تصویر زیر کد هایی را برای شروع خواهید دید و همینطور زمانی که علامت کوچکتر را تایپ میکنید پنجره ای یا منویی باز میشود به نام intellisense که این منو برای برنامه نویسان بسیار پر کاربرد و حیاتی می باشد مخصوصاً افرادی که با Visual Studio کار میکنند با intellisense آشنایی زیادی دارند ، خب به هر حال میبینید که در این منو تمام تگ هایی که ممکن است شما بخواهید از آن استفاده کنید لیست میشوند
||آموزش HTML::http://tosinso.com/files/get/8bf24ac7-afc6-48d5-af1c-7312b0e00839||
زمانی که از یک تگ استفاده میکنید attribute های اون تگ برای شما به نمایش در می آید پس بنا بر این زمانی که ما برخی از تگ ها یا attribute ها را فراموش کردیم این منو یاد آور خوبی برای ما است.
||قدم به قدم با HTML::http://tosinso.com/files/get/d2b136d3-a40d-4053-a057-23a86a8f26d4||
پس از تایپ کد هامون همونطور که در قسمت قبلی دیدیم من از پسوند Htm یا HTML استفاده میکنم چون نیازی به رندر کرن نداره و صرفاً میخوام با مرورگر هایی مثل Mozilla یا IE به نمایش در بیان البته شما در سطح اینترنت پسوند های زیادی رو ممکنه مشاهده کنید مثل Asp , Jsp , Php , Mspx , Aspx , Prl اینها تماماً برنامه هایی هستند که اصطلاحاً سرور سایت هستند یعنی در داخل این تگ های HTML کد هایی دیگه ای هم مینویسن که این کد ها رو اون سروری که برای ما داره میفرسته اجرا میکنه و نیاز به رندر کردنش داره ، اما ما در این مبحث فعلاً بر پایه ترین مبحث یعنی HTML میخواهیم کار کنیم ، شاید کمی در قسمت قبلی توضیح داده باشم اما ترجیح میدم اینجا مفصل تر ادامه بدم و بگم تمام تگ های HTML داخل یک تگی قرار دارد به نام HTML پس از این تگ ما تگی داریم به نام Head که اطلاعات محتوایی رو برای ما در نظر میگیره اما برای کاربران چیزی رو به نمایش در نمیاره و اگر میخواهید در بالای مرورگر خودتون متنی رو به نمایش در بیارید میتونید در داخل این تگ از تگی دیگر به نام Title استفاده کنید که در داخل این تگ میتوان متنی قرار داد مثلاً عنوان صفحه یا اسم صفحه تا بالای مرورگرتون به نمایش در بیاد و هر آن چیزی که شما در صفحه مرورگر خودتون خواهید دید در تگی قرار داره به نام تگ Body و تقریباً تمام تگ هایی رو که در قسمت قبلی عنوان شد در داخل این تگ به کار گرفته میشوند.
اما تقریباً تمام برنامه نویسان به Comment گزاری عادت کرده اند باید بدونید این زبان نیز از کامنت گزاری پشتیبانی میکند و شما میتوانید برای کد های خودتون کامنت هایی رو در نظر بگیرید و این کامنت ها هیچ تاثیری در کد ها ندارند و فقط برای برنامه نویس یا کسانی که بعداً میخواهند کد ها را بخوانند مفید است تا بدانند کدام خط یا کدام تگ یا دستور چه وظیفه ای را دارد و برای درج کامنت از کد زیر استفاده میشود.
<htm>
<body>
	   <!-- this is a comment -->
</body>
<htm>
--
ادامه آشنایی با برخی از تگ ها
* تگ <del>
اگر میخواهید در جمله ای که استفاده میکنید یک خط روی کلمه یا جمله تان کشیده شود از این تگ استفاده کنید
* تگ <ins>
اگر میخواهید یک UnderLine یا یک زیر خط بر روی کلمه یا جمله تان که نمایانگر اضافه شدن یک متن است استفاده کنید از این تگ میتوان استفاده کرد در ادامه خروجی دستور زیر را در تصویر خواهید دید
<htm>
<body>
	web site <del>itprogram</del>change name <ins>itpro</ins> my favorites
</body>
<htm>
||قدم به قدم با دستورات و تگ های HTML::http://tosinso.com/files/get/4237a3e8-7c26-4a15-a9a5-5088ea6e6b52||

* تگ <ol>و attribute ای به نام type 
در *|بخش قبلی::http://web.tosinso.com/articles/19962|* در مورد تگ OL صحبت شد اما در این قسمت با استفاده از attribute ای به نام type که میتوان به دلخواه نام گزاری و شماره گزاری ها را ایجاد نمود در ادامه کد مورد نظر را خواهید دید و خروجی این تکه کد را در تصویر زیر مشاهده خواهید نمود.
<htm>
<body>
		<ol type=I>
		<li>Major Point
		<ol type=A>		
		<li>Sub Point</li>
		
		<li>Sub Point</li>
		</ol>
		</li>
		
		<li>Major Point
		
		<ol type =A>
		<li>Sub Point</li>
		<li>Sub point</li>
		</ol>
		</li>
		</ol>
</body>
<htm>
||اموزش HTML::http://tosinso.com/files/get/e9afefc5-4add-4c28-92dc-7d5c59341e6b||

* تگ <dt> و <dd> 
definition List ها وظیفه اشون اینه که تعاریف را مثل یک دیکشنری یا لیست یا ایندکس به ما نمایش میدهند و کار اصلی definition ها تعاریف هست  dt مخفف definition  terms هست که قرار هست توضیحات این قسمت داده شه و dd مخفف definition description دقیقاً پشت سر اون کلمه توضیحش داده خواهد شد (هر dt  یک dd دارد) مثال زیر را دقت کنید:

<htm>
<body>
<h1>Html Terms</h1> this is a sample test , this type of list lends itself most readily for use on web site.
<dl>
	<dt>Html</dt>
	<dd>Hyper Text Markup Language</dd>
	
	<dt>Attribute</dt>
	<dd>Identifies a characteristic of an element</dd>
	
	<dt>itpro</dt>
	<dd>the best web site</dd>
</dl>
</body>
<htm>
||آموزش tag در HTML::http://tosinso.com/files/get/425857a6-ce9a-4a6a-8b12-64f7218c96dd||

* Entity : کارکتر هایی هستند کا ما نمی توانیم مستقیم توسط کیبورد آنها را تایپ کنیم پس به ناچار باید کد هایی را تایپ کنیم بگزارید entity ها را با یک مثال جامع جلو ببریم:
||entity ها در HTML::http://tosinso.com/files/get/f474387a-941c-465d-a88e-8d30229a8606|| 
البته تعداد این کارکتر هایی که به کد اسکی معروف هستند زیاد میباشد بنابر این میتوانید اطلاعات بیشتر را در لینک زیر دنبال کنید
* |htmlcodes::http://www.ascii.cl/htmlcodes.htm|

* تگ <blockquote> به همراه استفاده از تگ <br>
این تگ کمک میکند متن مربوطه کمی جلوتر از ما بقی متن ها به نمایش در بیاید که در ادامه تصویر کد زیر را مشاهده خواهید کرد.
<htm>
<body>
<blockquote>
123<br>
456<br>
ABCD<br>
EFGH<br>
</blockquote>
</body>
<htm>
||http://tosinso.com/files/get/5469ea9c-14c4-4c94-8ccf-3b82cd609f57||
این مباحث همچنان با حمایت های شما دوستان ادامه خواهد داشت.

نویسنده : فرهاد خانلری
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر نام منبع و نویسنده اشکال اخلاقی دارد.

این مباحث همچنان با حمایت های شما دوستان ادامه خواهد داشت.

لینک ها

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

  • تگ <a> : این تگ Link ها ‌در تمام مرورگرها به شرح زیر نمایش داده می شوند
  1. یک لینک فعال که دارای زیر خط (UnderLine) است و به رنگ قرمز می باشد.
  2. یک لینک بازدید نشده که دارای زیرخط (UnderLine) و به رنگ آبی می باشد.
  3. یک لینک بازدید شده که دارای زیرخط (UnderLine) و به رنگ بنفش می باشد.

شکل کلی استفاده از این تگ بسیار ساده می باشد , href موقعیت مقصد را معین میکند.

<a href="url">Link text</a> 

نکته : url مخفف Uniform Resource Locator است شاید بار ها این نام را شنیده باشید URL یعنی آدرس اما نه آدرسی که ما در کامپیوتر خود داریم بلکه آدرسی که در سطح اینترنت یا صفحات وب شناخته شده است ، یادتان باشد در دنیای وب فاصله معنی نمیدهد یعنی مابین آدرس های اینترنتی یا همان URL هیچ فاصله ای نیست اگر دیدید در آدرستان علامت 20% آمده بدانید که این نمایانگر Space یا همان فاصله است که خود مرورگر این کارکتر را ایجاد میکند.

آموزش HTML
<a href="http://tosinso.com/">  tosinso.com مشاهده </a> 

کد فوق باعث میشود لینک مورد نظر مانند متن روبرو نمایش داده شود : مشاهده tosinso.com  با کلیک بر روی لینک بالا (مشاهده tosinso.com) به صفحه اول سایت توسینسو  هدایت می شوید ، البته این پیوند ها یا لینک ها الزاماً یک متن میتواند نباشد و نسبت به سیاست کاری شما تغییر کند مثلاً یک تصویر شما میتوانید به یک عکس لینک دهید تا اگر روی عکس کلیک کنید به سایت یا صفحه دیگری منتقل شوید .

از نظر باز شدن صفحه جدید یا target چند حالت برای باز شدن لینک وجود دارد که این خاصیت را target مینامند. به عبارتی دیگر صفت target به صورت خاص عنوان میکند که لینک مورد نظر چطور و کجا باز شود، البته به صورت پیش فرض لینک ها در همان صفحه باز میشوند . به عنوان مثال در زیر لینکی را مشاهده خواهید نمود که target با عنوان Blank نوشته شده و این یعنی پس از کلیک بر روی لینک صفحه جدید در یک پنچره جدید یا یک Tab جدید در همان مرورگر باز خواهد شد.

<a href="http://web.tosinso.com/articles/25276" target="_blank">Visit web.tosinso.com!</a> 

نکته : همیشه یک اسلش / به آخر آدرس مورد نظرتان اضافه کنید در این صورت یک باری از روی سرور مورد نظر برداشته اید چون اگر این اسلش را اضافه نکنید خود سرور این کار را خواهد کرد

 href="http://www.web.tosinso.com/" 

قبلاً خیلی مختصر در مورد لینک های ایمیلی صحبت شده است هنکامی که بر بر روی این لینک ها کلیک میکنید برنامه هایی نظیر Gmail یا Outlook باز شده و منتظر ارسال ایمیل شما میمانند ، کد زیر دقیقاً مربوط به ارسال ایمیل در وب سایت ها به کار میرود

<a href="mailto:name@example.com"> name@example.com </a>

محتوای داخل تگ a مانند انواع دیگر لینک ها می تواند یک متن هم باشد بنا بر این میتوان از کد زیر هم برای ارسال ایمیل استفاده نمود

<a href="mailto:name@example.com"> E-mail Me</a>

کمی پیشرفته تر از کد های فوق را میتوان در کد زیر دید یعنی علاوه بر مشخص کردن آدرس Email دریافت کننده می توان Subject یا موضوع و گزینه های CC و BCC و حتی قسمتی از متن ایمیل را نیز مشخص کرد کد زیر را مد نظر قرار داده و پارامترهای subject، CC ، body راه به دلخواه تغییر دهید با این کار کمک زیادی به کاربر کرده تا بتوانند سریع تر به هدف خود برسند.

<a href="mailto:name@example.com?subject=Network And Programing CC=name2@example.com&body=Please send me a copy of your new Email!"> Email For Me </a>
تگ a در HTML
  • ایجاد کردن لینک ها به صورت رنگی

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

ضمناً اگر میخواهید مشخص کنید که چه لینک هایی توسط کاربر کلیک شده است از ویژگی vlink می توان استفاده کرد،که حرف v مخفف visited می باشد. اگر تمایل دارید وقتی نشانگر موس بر روی لینک میرود رنگ لینک تغییر کند و کاربر را متوجه این سازد که این متن یک لینک است از ویژگی alink می توان استفاده کرد. که حرف a مخفف active می باشد.

به عنوان مثال کد زیر را دقت کنید :

<body alink "red" vlink="#0000FF"|>
<a href="http://tosinso.com" target="_blank">tosinso.com</a>
</body>

اگر بر روی این لینک کلیک کنیم رنگ آن تغییر کرده و ما را از اینکه قبلاً این لینک را بازدید کردیم آگاه می سازد ، همانگونه که در کد فوق دیدید تگ body هم دارای صفت هایی است و همچنین استفاده از رنگ ها هم به صورت درج عدد هایی که نمایانگر رنگ است مشخص میشود و هم نام رنگ که بعداً در بخش های بعدی این مورد را دنبال خواهیم نمود.اما روش فوق جهت تغییر در تمام لینک های صفحه بود برای اینکه رنگ لینک های خاصی را در صفحه تغییر دهیم میتوان از دو روش زیر بهره برد:

  1. استفاده از تگ <font>
  2. استفاده از ویژگی style داخل تگ لینک <a>

این دو روش را با مثال آغاز میکنم در روش اول یعنی استفاده از تگ Font:

<body>
<a href="http://tosinso.com"><font color ="Blue"> www.tosinso.com</font></a>
</body>

تگ فونت را باید در دو طرف عبارت مورد نظر همراه با انتخاب Color مناسب میتوان تعیین کنیم رنگ لینک مورد نظر چطور باشد ، در روش دوم همانگونه که گفتیم میتوان از ویژگی style داخل تگ لینک <a> استفاده نمود مثال زیر را ببینید:

<body>
<a href ="http://tosinso.com" style=color:"red" > www.tosinso.com</a>
</body>

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

این ویژگی در tabindex موجود است و این ویژگی در تگ <a> به کار میرود ، در مقابل tabindex عددی قرار میگیرد که مشخص کننده این است که با فشاردادن چند بار tab میتوان به این لینک رسید و دوستان برنامه نویس حتماً در برنامه هایی نظیر C شارپ و Visual studio این مورد را در برنامه های windows Application رعایت میکنند.

<body>
<a href ="http://web.tosinso.com" tabindex ="1" > www.web.tosinso.com</a>
<br/>
<a href ="http://dbo.tosinso.com" tabindex ="2" > www.dbo.tosinso.com</a>
</body>

توسط کد فوق میتوان این ویژگی را برای لینک های صفحه به دلخواه و به آن صورتی که تمایل دارید توسط Tab صفحه کیبورد حرکت کنید یادتان باشد این عدد میتواند از 0 تا 32767 باشد.همانگونه که مطلع هستید attribute های تگ a کار کنترل جزئیات لینک ها را به عهده دارند میخواهیم با برخی از این صفت ها آشنا شویم.

  • href : در مورد این صفت قبلاً هم صحبت شده است و یکی از مهمترین صفت های این تگ به حساب می آید ، این صفت آدرسی که لینک به آن اشاره می کند را مشخص کرده و این آدرس می تواند آدرس صفحه ای مربوط به سایتی دیگر یا در همان مسیر یا مکانی در صفحه جاری و یا آدرس هر نوع فایل دیگری(مانند ارجاع به صفحات دانلود یا انواع فایل ها با پسوند های MKV , jpg , PDF و ... ) باشد.
  • target : در مورد این صفت نیز صحبت هایی شد کلاً نمایانگر این است که صفحه جدید چگونه باز شود و حالت های زیر را میتواند به خود اختصاص دهد:
  • top : لينک در همان پنجره ای که کليک شده است به طور کامل باز خواهد شد .
  • self : لينک در همان پنجره يا قابی که کليک شده است باز خواهد شد .
  • parent : لينک در قاب اصلی يا مادر باز خواهد شد .
  • blank : لينک در يک پنجره جديد باز خواهد شد .
  • hreflang : یک از کاربرد هایی که لینک ها دارند معرفی منبع برای مطلب مورد نظر است این صفت مشخص کننده نوع زبان به کار رفته در منبعی که لینک به آن اشاره دارد است و یکی از کدهای زبانی مانندen ,(Farsi) fa , (Ferench)fr مخفف english و... را به عنوان مقدار می پذیرد.
  • rel یا relationship : این صفت رابطه صفحه مقصد با صفحه مبدا لینک را مشخص میکند.
  • rev یا reverse : این صفت برعکس rel عمل میکند و نوع رابطه صفحه مبدا با مقصد لینک را مشخص میکند و

حالت های زیر تعيين کننده نوع ارتباط بين صفحه جاری و صفحه مقصد لینک یا پیوند است:

  • start : ابتدا
  • next : بعدی
  • pre : صفحه قبلی
  • index : صفحه آغازين
  • alternate : يک در ميان
  • designates : انتخاب شده
  • contents : صفحه محتویات
  • section : بخشی از برنامه
  • chapter : بخش
  • appendix : ضميمه
  • help : صفحه يا فايل راهنما
  • stylesheet : صفحه قالب دهی (CSS)
  • bookmark : يک لنگر در همان صفحه يا صفحه ای ديگر
  • name

میتوان یک نام برای پیوند یا لینک خود مشخص کرد و این نام باید Uniq و منحصر به فرد باشد و ضمناً انتخاب نام نباید با اعداد 0-9 و - و _ و : یا . (نقطه) شروع شود.

لینک و تصاویر

حتماً در سایت توسینسو دیدید که وقتی به انتهای مطلب میرسیم اگر اون مطلب طولانی باشد نیازی نیست تا Scroll کرده و مجدد به بالای صفحه برگردیم زمانی که به پایین صفحات سایت scroll میکنیم یک فلش ای پدید می آید که کمک میکند ما به راحتی به اول صفحه منتقل شویم این قابلیت با کمک Java script بسیار شیک و ساده پیاده سازی میشه

اما در این مطلب میخواهم در مورد HTML صحبت کنم این ویژگی در HTML با صفت id در تگ <Hn> قابل پیاده سازی است قبلاً در مورد تگ H صحبت شده است.البته این بخش به عنوان ادامه بخش قبلی که در مورد تگ a و لینک ها بود صحبت میشه در واقع این بخش مرتبط با بخش قبلی استفاده میشه.

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

ابتدا باید در لینک مشخص کنید که Href به یک نام مشخص شده ولی با این تفاوت که قبل از این نام یک شارپ # نوشته شده است و اون نام میتونه در واقع ID یک بخش باشد مثل H2 ، یا یک نام برای H2 T من دراین مثال برای هر H2 یک name قرار دادم که دقیقاً معادل نامی هست که برابر با href لینک ها هست البته شما میتوانید از صفت Id هم استفاده کنید و نام href را به id یک بخشی مثل H2 یکی کنید.

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>The global structure of an HTML document</title>
</head>
<body>
<h1 align="center"><a name="h-7">7</a> The global structure of an HTML
document</h1>

<div class="subtoc">
<p><strong>Contents</strong></p>

<li><a class="tocxref" href="#h-7.1">Introduction to the structure of an HTML
document</a></li>

<li><a class="tocxref" href="#h-7.2">HTML version information</a></li>

<li><a class="tocxref" href="#h-7.3">The <samp class="einst2">HTML</samp>
element</a></li>

<h2><a name="h-7.1">7.1</a> Introduction to the structure of an HTML
document</h2>

<p>An HTML 4 document is composed of three parts:</p>


<p>White space (spaces, newlines, tabs, and comments) may appear before or

<h2><a name="h-7.2">7.2</a> <a name="version-info">HTML version
information</a></h2>

<p>HTML 4.01 specifies three DTDs, so authors must include one of the following
document type declarations in their documents. The DTDs vary in the elements
they support.</p>

<p><em><strong>Note.</strong> As of the 24 December version of HTML 4.01, the
HTML Working Group commits to the following policy:</em></p>

<ul>
<li><em>Any changes to future HTML 4 DTDs will not invalidate documents that
conform to the DTDs of the present specification.</em> The HTML Working Group
reserves the right to correct known bugs.</li>

<li><em>Software conforming to the DTDs of the present specification may ignore
features of future HTML 4 DTDs that it does not recognize.</em></li>
</ul>

</div>

<h2><a name="h-7.3">7.3</a> The <a name="edef-HTML"><samp class="edef">
HTML</samp></a> element</h2>

<p>After document type declaration, the remainder of an HTML document is
contained by the element. Thus, a typical HTML document has this
structure:</p>

</body>
</html>

کد فوق را در note pad با یک نام دلخواه و با پسوند Html ذخیره کنید و خروجی را ببینید:

استفاده از تگ ها در HTML

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

  • Title : یکی از صفت های دیگری که برای لینک ها استفاده میشود attribute Title هست که مشخص میکند زمانی که موس را روی یک لینک می برید یک Tooltip برای آن لینک ایجاد کنید و این کمک میکند تا قبل از اینکه لینک کلیک شود کاربر بداند صفحه ای که میخواهد برود چیست مثال زیر را با هم دنبال میکنیم:
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
</head>

<body>
Give Link Details with the title Attribute : <a href="http://www.web.tosinso.com" title="انجمن تخصصی فناوری اطلاعات ایران">www.web.tosinso.com</a>
</body>
</html>

کد فوق را زمانی که اجرا کنید با تصویر زیر روبرو می شوید که میتوانید روی لینک مشخص شده بروید و Tooltip را مشاهده کنید

استفاده از Tooltip در تگ های HTML
  • تگ < area > : از این تگ جهت تهیه و ایجاد نقشه تصویری یا بهتر بگویم عکس یا تصویری که قرار است آن را ناحیه بندی کرده و هر ناحیه لینک مخصوص بخود را داشته باشد استفاده میشود البته این تگ به تنهایی نمتواند کار مفیدی انجام دهد و تگ های <img> و <map> باید در کنار این تگ قرار بگیرند ، مانند نقشه ایران که ما میتوانیم تمام شهر ها را ناحیه بندی کرده و زمانی که در مرورگر نقشه ایران را دیدیم روی هر شهر که رفتیم یک Tooltip خاص خود را داشته باشد و هر شهر لینک (پیوند) شود به قسمت مربوطه خودش ، برای استفاده از این تگ ما shape را داریم که میتواند انواع مختصات را روی نقشه پیاده سازی کند و همچنینن این مختصات را با Attribute coords روی HTML پیاده میکنیم به عبارتی دیگر Coords برای درج مختصات صفحه استفاده میشود که هر یک از مختصات با علاوت کاما (,) از همدیگر جدا میشوند و Shape تعیین کننده شکل هندسی نقشه تصویری است و این خصوصیت Shape حالت های rect , rectangle یعنی مربع يا مستطيل و circ , circle یعنی دایره يا بيضی وpoly , polygon یعنی چند ضلعی را در بر دارد. تگ area از آن دسته از تگ هایی است که پایان ندارد و برای استفاده از این تگ باید آن را درون تگ < map > قرار داد که میتواند تعيين کننده يک ناحيه مجزا و با قابل کليک شدن باشد و با مشخص کردن مختصات آن بر روی تصویر آن ناحیه مشخص میگردد . برای ایجاد یک نقشه تصویری به کمک تگ < img > نیازمندیم در خصوص تگ IMG : این تگ نیز از پرکاربرد ترین تگ ها می باشد و از جمله تگ هایی است که پایان ندارد و کاربرد این تگ برای نمایش عکس در صفحات وب است استفاده از crs یا source همان آدرس تصویر است و alt نوشته ای است که Tooltip موس برای آن تصویر به نمایش در می آید ، این تگ دارای صفت هایی است اگر از خصیصه usemap در تگ < img > استفاده کنیم میتوانیم یک نقشه تصویری بسازیم یعنی دقیقاً چیزی که ما بهش نیاز داریم ، تگ < img> نیز دارای دارای 2 خصیصه مهم برای این کار است که در ادامه توضیح خواهم داد:
  • usemap : این صفت زمانی به کار می رود که بخواهیم تصویر مورد نظر به صورت یک پیوند یا لینک عمل کند یعنی با کلیک بر روی آن یک آدرس یا URL توسط مرور گر باز میشود. مقدار usemap قبلا باید توسط تگ < MAP > در فایل HTML تعریف شده باشد
  • ismap : همانطور که میدانید یک نقظه در صفحه مانیتور دارای مشخصات X و Y است که این نقطه به صورت by Default از سمت چپ بالای صفحه مانیتور آغاز میشود و به آن نقطه 0,0 گفته میشود برای به دست آوردن مختصات یک نقطه این خصوصیت میتواند مفید باشد و البته زمانی این نقاط به درستی محاسبه میشوند که تگ img بین دو تگ a قرار گیرد .
  • تگ <map> :همانگونه که پیش تر گفتیم از این تگ جهت ايجاد يک نقشه تصويری استفاده می شود ، ابتدا به وسيله تگ < map > و تگ های درونی < area > يک نقشه تصويری با نواحی مجزا و مختلف قابل کليک شدن ايجاد و سپس آن نقشه را به يک عکس بر روی صفحه لینک میدهیم ، این تگ نیز دو صفت بارز دارد به نام های id و name که کاربرد این دو خصوصیت یکسان است با این تفاوت که هر کدام در مرورگر های قدیمی و جدید کار میکنند. اما برای اینکه نقشه تصویری را لینک دهیم خاصيت usemap که قبلاً توضیح دادیم را در تگ < img > عکس مورد نظر برابر با نام Name يا id ، نقشه تصويری ايجاد شده قرار می دهيم . مثال زیر را دقت کنید:
<html>
     <head>
       <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
     </head>
<body>
 <img src="itpro.jpg" alt="learner" usemap="#taglist" />
 <map id="taglist" >
  <area id="table" alt="web" shape="rect" coords="1, 2, 194, 122" href="http://www.web.tosinso.com" />
  <area id="body" alt="dbo" shape="rect" coords="194, 0, 386, 119" href="http://www.dba.tosinso.com" />
  <area id="link" alt="icdl" shape="rect" coords="0, 121, 193, 242" href="http://www.icdl.tosinso.com" />
  <area id="p" alt="linux" shape="rect" coords="192, 119, 386, 242" href="http://www.linux.tosinso.com" />
</map >
</body>
</html>

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

استفاده از تگ area  و تگ map

سئوی تصاویر

بر میگردیم سراغ ادامه مباحث HTML این بار در این مطلب بر روی تصاویر کار رو ادامه میدیم و همچنین اشاره ای میکنیم به(سئو) Seo تصاویر ، پس با ما همراه باشید.همانگونه که در بخش قبلی هم اشاره شد برای قرار دادن تصاویر بر روی صفحه کافی هست از تگ <img> که مخفف Image هست و در بخش اول آموزش HTML تا حدودی بهش اشاره ای شد.

  • صفت scr : تگ img دارای attribute های مختلفی هست و یکی از این صفت ها که به کاربردن این تگ اجباری هست src هست که مخفف source هست یعنی آدرس یک تصویر این آدرس میتواند در سطح اینترنت باشد یا در سطح لوکال یعنی کامپیوتر خودتان ما در این درس بر روی لوکال مثال رو جلو میبریم به این صورت که در درایو D یک پوشه ای به نام itpro ایجاد کرده و تصاویر مربوط به این درس را در آنجا قرار میدهم. در کد زیر همانگونه که میبینید در نرم افزار Front page توسط تگ img عکس ها رو از درایو مربوطه فراخانی کردم ، یادتون باشه پسوند تصویر هم باید درج بشه و این خیلی مهم هست
<body>
<img src ="D:/itpro/1.jpg" /> <br />
<img src ="D:/itpro/2.jpg" /> <br />
<img src ="D:/itpro/3.png" /> <br />
</body>

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

آموزش HTML

سپس از منو File گزینه Save as رو انتخاب میکنیم و مطابق تصویر با پسوند htm یا html ذخیره میکنیم.

قدم به قدم با HTML
قرار دادن تصویر در HTML

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

آموزش سریع HTML

در پنجره فوق شما میتوانید ادرس تصاویر را با فایل htm یکی کرده یا آدرس آنها را جابجا کنید و در یک پوشه مشخص قرار دهید و یا اینکه پسوند آنها را در همین جا یکسان کرده و حتی میتوانید کیفیت تصویر را دستخوش تغییرات دهید تا برای تمام تصاویرتان یکسان سازی انجام گیرد. به عنوان مثال من با دگمه Picture File Type و انتخاب گزینه Gif تصاویر را با این پسوند انتخاب کردم و پس از ok کردن تصاویر با تغییرات خواسته شده در محلی قرار میگیرند که فایل اصلی ما که با پسوند htm ذخیره شده بود قرار میگیرند و بلافاصه تغییری در آدرس url تصاویر ایجاد شده که در کد زیر میتوانید ببینید

<body>
<img src ="1.gif" /> <br />
<img src ="2.gif" /> <br />
<img src = "3.gif" /> <br />
</body>

همانگونه میبینید آدرس ها خلاصه شده چون دقیقاً در محل ذخیره فایل اصلی قرار گرفته اند البته شما میتوانید تصاویر را در همان درایو و با همان آدرس ذخیره کنید حتی شما میتوانید از تصاویری استفاده کنید که در سطح اینترنت ذخیره شده اند ولی در آن حالت باید آدرس کامل URL را قرار دهید در ادامه فایل test.htm را با مرورگر IE باز میکنم.

تگ تصاویر برای html
  • صفت Title : این صفت یک عنوان برای تصویر مورد نظر تعیین می کند ، و در صورتی که موس را بر روی تصویر مورد نظر نگه داریم متن جلوی title به عنوان توضیحات یا Tooltip نمایش داده خواهد شد
<img src ="4.jpg" height="90" width="140" title="this is a test" /><br />
  • صفت alt : گاهاً در دنیای اینترنت یا صفحات وب پیش می آید که یک تصویر به هر دلیلی نمیتواند load شود اگر شما برنامه نویس خوبی باشید از این صفت استفاده میکنید به عنوان متن ثانویه عکس در صفت یعنی اگر به هر دلیلی عکس مورد نظر در سیستم کاربر نشان داده نشود این متن به جای عکس نشان داده خواهد شد ، با وجود اینکه alt اجباری نمی باشد ولی برای XHTML باید از این صفت استفاده نمود.
<img src ="2.gif" alt ="my name is farhad"/> <br />
صفت alt برای تگ img
  • صفت های Height و Width : این صفت ها کمک میکنند تا تصاویر را با ابعاد و سایز های دلخواه معرفی کنیم یعنی اگر تصویر با بیش از حد بزرگ باشد میتوان آن را با این صفت ها به اندازه دلخواه تغییر داد و این تغییر فقط برای مشاهده تصویر بر روی مرورگر صدق میکند و ماهیت تصویر همچنان بزرگ است ، ضمناً اعداد نوشته شده در قسمت عرض و ارتفاع به واحد پیکسل هستند.
<img src ="1.gif" height="110" width="120" /><br />
تگ ها در آموزش طراحی سایت
  • صفت Border : یکی دیگر از صفت های img حاشیه تصاویر است که با نام border میتوانید به آند دست پیدا نمایید این صفت در حالت By default صفر(0) است ولی اگر شما آن را تغییر دهید دور تصویر شما را نسبت به اندازه ای که تایین میکنید فرا خواهد گرفت البته اگر میخواهید تصویری را به صورت لینک اضافه کنید این حاشیه نسبت به مرورگر تغییر رنگ میدهد و اگر میخواهید border را بردارید باید این صفت را برابر با 0 قرار دهید.
<body>
this is attribute border:<br />
<img src ="4.jpg" height="90" width="140" border="5" /><br />
</body>
صفت border برای تگ img در HTML
  • تلفیق تگ های <img> و <a> : حتماً دیدید که در برخی صفحات وب روی یک سری تصاویر وقتی کلیک میکنید به صفحه دیگری میروید پس این الزام وجود ندارد که حتماً لینک ها روی نوشته ها تنظیم شوند پس وقتی موس را روی تصویری میبریم موس به شکل دست در می آید و پس از کلیک به لینک دیگری میرود ، برای این منظور عکس رو باید به عنوان TEXT یک لینک معرفی نمود ، مثال زیر گویای این داستان است:
<body>
use image a link:<a href ="http://www.web.tosinso.com"><img src="4.jpg"></a><br />
<a href ="http://www.tosinso.com"><img src="8.jpeg"></a><br />
</body>
استفاده از تصاویر در html

تصاویر فوق هر کدام یک لینک هستند به صفحات دیگر فقط کافی است با موس روی آنها رفته و کلیک کنید.

SEO برای تصاویر (search engine optimization)

شاید با این واژه آشنایی داشته باشید ولی قبل از شروع بهتر است لینک زیر را بخوانید تا آشنایی شما با Seo بیشتر شود.

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

ولی در این مطلب بنده به ذکر سئوو در تصاویر اشاره میکنم ، این مطالب باعث میشود تصاویرتان در موتور های جستجو به سادگی یافت شوند .قدم اول برای این مهم استفاده از صفت alt در تگ img است همان صفتی که در همین مقاله به آن اشاره شد که این صفت یکی از معیار ها و فاکتور های مهم در موتور های جستجو مثل گوگل است

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

Seo  برای تصاویر
<body>
<pre><img src="Flower.jpg" alt="گل قرمز" />
</body>

قدم بعدی این است که حتماً نامی برای تصاویرتان استفاده کنید که دقیقاً هم موضوع با تصویر است زیرا موتور های جستجو از نام فایل ها نیز کمک میگیرند برای کارشان پس به این موضوع هم دقت کنید.گام بعدی در Seo تصاویر سرعت(Loading) یا لود صفحه است یادتان باشد

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

و آن را از منو فایل و سپس save For Werb ذخیره کنید یا اینکه یک تصویر کوچک قرار دهید و آن تصویر را لینک کنید به تصویر بزرگتر خودش دقیقاً همان تلفیق تگ های <img> و <a> پس همواره سعی بر این داشته باشید صفحات ساده و کم حجم و مرتبی داشته باشید که این موضوع کمک بزرگی است برای دیده شدن سایتتان در دنیای مجازی .

ضمناً همانگونه که شاهد هستید سایت توسینسو برای قرار دادن تصویر از کلید ترکیبی Ctrl+G یا "تصویر" در سایت استفاده میکند و پس از اینکه شما تصویرتان را قرار دادید پایین پنجره قسمتی قرار دارد به نام توضیحات و این برابر با صفت ALT در آموزش ما هست و اگر متنی را در آن کادر قرار دهید این متن به موتور های جستجو کمک میکندتا موضوع و مطلب شما در فهرست قرار گیرند و همچنین این خود یک SEO محسوب میشود.

قرار دادن تصویر در سایت

طراحی جدول

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

  • تگ Table :قبلاً در بخش اول این دوره آموزشی در باره این تگ اشاره ای شد در این مطلب بیشتر و مفصل تر و البته کاربردی تر در خصوص جداول صحبت میکنیم ، یکی دیگر از تگ های HTML تگ table می باشد که برای درج جدول مورد استفاده قرار میگیرد اجازه بدید با مثالی در نرم افزار Word این کار رو ادامه بدیم ، در نرم افزار Word از منو insert شما میتوانید یک جدول ایجاد کنید همانند تصاویر زیر:
آموزش HTML

همانطور که در تصویر فوق مشاهده میشود ستون ها را با نام column و ردیف ها یا سطر ها را با row نامگذاری میکنند در HTML ستون ها را با تگ <TD> و سطر ها را با تگ <TR> مینویسند . ما در نرم افزار Word میتوانیم برخی از سلول ها یا خانه های جدول رو با هم ترکیب کنیم توسط Merge Cells که هم میتوانیم ستون ها را با هم ترکیب کنیم و هم ردیف ها را دقیقاً مشابه تصویر زیر ، و همانطور که در تصویر زیر ملاحضه میکنید دقیقاً ما در HTML هم میتوانیم این کار را پیاده کنیم.

کار با جداول HTML

تگ table دارای attribute زیادی هست که جلوتر خدمتتان توضیح خواهم داد ، پس از نوشتن تگ <table> با هر بار نوشتن تگ <tr> میتوانید یک خط ایجاد کنید پس tr به نشانه table row می باشد پس به ازا< هر چند ردیفی که میخواهید باید tr را اضافه کنید و قبل از اینکه تگ tr بسته شود

یعنی در داخل تگ <TR> باید تعداد ستون هایی را مشخص کنید در کد زیر ملاحضه میکنید که در سطر اول ما سه ستون داریم که داخل هر ستون را به x1 تا x3 نام گذاری کردیم. در ادامه کد ها یعنی دقیقاً پس از پایان تگ <tr//> من میخواهم یک ردیف دیگر با سه ستون ایجاد کنم که هر ستون را با y1 تا y3 نام گذاری میکنم ، و در نهایت تگ table را میبندیم.

<body>
<table>
<tr>
<td>X1</td>
<td>X2</td>
<td>X3</td>
</tr>

<tr>
<td>y1</td>
<td>y2</td>
<td>y3</td>
</tr> 

</table>
</body>

خروجی کد بالا به صورت زیر می باشد

تگ table در html

همانطور که در تصویر نمایان است حاشیه های جدول دیده نمیشوند چون جدول ما دارای Border نیست در ادامه جدول را دارای border میکنیم برای این منظور فقط کافی است در جلو تگ table مقدار border را وارد کنیم ، اگر مقدار border برابر 0 باشد یعنی همان تصویر بالایی که بدون حاشیه بود پس توسط کد زیر به جدولمان حاشیه ای به اندازه 2 میدهیم

<body>
<table border="2">
<tr>
<td>X1</td>
<td>X2</td>
<td>X3</td>
</tr>

<tr>
<td>y1</td>
<td>y2</td>
<td>y3</td>
</tr> 
</table>
</body>

آموزش HTML و اصول اولیه طراحی سایت
  • تگ <th> : این تگ در اولین سطر جدول به کار میرود و مخفف table header است بنابر این میتوانیم سر ستون های table را توسط این تگ مشخص کنیم خاصیت th این است که value خودش را به صورت BOLD نمایش میدهد پس برای عنوان نویسی در جدولمان th گزینه خوبی است در ادامه مثالی را خواهیم دید
<body>
<table border="2">
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>

<tr>
<td>X</td>
<td>X</td>
<td>X</td>
</tr> 
</table>
</body>

خروجی کد بالا به صورت تصویر زیر نمایان میگردد

قدم به قدم با آموزش HTML
  • تگ caption : شما میتوانید یک تیتر یا عنوان فرعی برای جدول خود معرفی کنید بدین صورت که بلافاصله پس از تگ table و قبل از اینکه tr را باز کنید میتوانید از تگ Caption استفاده کنید و این تگ نیز مانند سایر تگ ها در HTML دارای Style می باشد بنابر این وقتی از caption استفاده کنید آن متن در داخل table نمایش داده نمیشود همانند مثال زیر:
<body>
<table border="2">
<caption style="font-weight:bold">
How to Use caption in table...
</caption>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>

<tr>
<td>X</td>
<td>X</td>
<td>X</td>
</tr> 
</table>
</body>

کد زیر را با پسوند html ذخیره کرده و آن را با مرورگر باز میکنم

استفاده از تگ table در html
  • align : این Attribute جهت align text در داخل جدول هست یعنی جهتی که text در جدول قرار میگیرد یا به عبارتی تمایل text به سمت چپ ، راست یا وسط که این سه جهت به صورت زیر بیان میشود
<body>
<table border="2" width="307">
<tr>
<td align="left" width="81">Left cell</td>
<td align ="right" width="93">Right cell</td>
<td align="center">Center cell</td>
</tr> 
</table>
</body>
آموزش طراحی سایت

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

  • valign : این Attribute مخفف Vertical هست یعنی تمایل عمودی Text رو به سه حالت بالا ، پایین و همچنین وسط و به صورت کد زیر بیان میشود
<body>
<table border="2" height="59" width="312">
<tr>
<td valign="top" width="80">top cell</td>
<td valign="bottom">Bottom cell</td>
<td valign="middle" width="102">middle cell</td>
</tr> 
</table>
</body>
آموزش HTML

Valign دو خاصیت دیگه هم داره یکی baseLine به معنای خط زمینه و همچنین در برخه نسخه های HTML شما justify را خواهید دید و Center را که در واقع بیشتر به سمت چپ میرود جایی که text در آن محل بهترین محل را پیدا میکند.

قدم به قدم با آموزش HTML

البته شما میتونید در معرفی TR از Style جهت اندازه طول و عرض جدول استفاده کنید و فکر میکنم این قابلیت برای شما راحت تر باشه چون یک بار در tr مینویسید و هر چند تا td در سطر وجود داشته باشه بهش اعمال میشه مثال زیر رو با هم ببینیم

<body>
<table border="2">
<tr style=width:"80px">
<td align="left">www.</td>
<td align="center">itpro</td>
<td align="right">.ir</td>
</tr> 
</table>
</body>

همانطور که میبینیم tr با style ای انتخاب شده که کل ستون ها را برابر با عرض یا (width) برابر 80 پیکسل نمایش میدهد

طراحی پایه ای وب سایت با HTML

کار با جداول و رنگ های آن را در قسمت بعدی دنبال خواهیم کرد.

استفاده از رنگ ها

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

  • bgcolor : رنگ ها در جداول : من سعی میکنم کار با رنگ ها رو بعداً بیشتر توضیح بدم ولی برای رنگ داخل سلول های جداول یک مثال جامع میزنم امیدوارم به کارتون بیاد
<body>
<table border="2" width="350">
<tr style=width:"800px">
<td align="left" bgcolor="cc.ff.33">www.</td>
<td align="center" bgcolor="#FF0066">itpro</td>
<td align="right" bgcolor="yellow">.ir</td>
</tr> 
</table>
</body>

همونطور که در کد فوق میبینید من bgcolor رو به سه صورت اومدم رنگ هاش رو مشخص کردم اولی که در ستون LEFT پیاده شده با کد هگزا نوشتم این همون RGB خودمون هست که R مخفف Red (قرمز) و G مخفف Green (سبز) و B مخفف Blue (آبی) هست و این اعداد میتونن از 00 شروع شدن تا FF که به ترتیب از کم به بیشتر این رنگ رو سوق میده.

در سلول یا ستون Center میبینید که bgcolor با یک عدد هگزادسیمال نوشته شده که این اعداد داخل کوتیشن کمتر از 0 و بیشتر از F نمیتونن باشن و این اعداد از 6 کارکتر تشکیل میشن.در نهایت سلول right با نام یک رنگ نوشته شده که نیازی به توضیح نداره

همونطور که در تصویر پایین هم مشاهده میکنید رنگ ها به این سه حالت میتونن پیاده سازی بشن شاید به خودتون بگید این رنگ ها رو و این اعداد رو ما نمیتونیم حفظ کنیم باید در جواب بگم سخت نگیرید نرم افزار های طراحی سایت مثلاً مثل Front Page که در حال حاظر این آموزش ها رو با اون دارم مینویسم کار ما رو راحت میکنن و خودشون کادری یا پنجره ای باز میکنن که میتونیم رنگمون رو به راحتی و با یک کلیک پیدا کنیم و پیاده سازی کنیم : تصاویر زیر رو ببینید

رنگ ها در HTML

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

رنگ ها در HTML
bgcolor در HTML

اگر میخواهید یک ستون کاملاً از یک رنگ ایجاد شود باید در tr از bgcolor استفاده کنید دقیقاً کاری که برای اندازه سلول انجام دادیم کد زیر را ببینید

<body>
<table border="2">
<tr bgcolor="aqua">
<td>R=Red</td>
<td>G=Green</td>
<td>B=Blue</td>
</tr>
</table>
</body>
استفاده از رنگ ها در HTML
  • cellspacing و cellpadding : در cellspacing فاصله بین سلول ها را به ما نمایش میدهد و cellpadding در واقع فاصله گوشه های یک سلول تا اونجایی که text ما قرار دارد رو تعیین میکند ، در ادامه مثالی رو دنبال میکنیم.
<body>
<table border="3" bgcolor="magenta" cellspacing="10" cellpadding="15" >
<caption>
How to use Tables
</caption>
<tr bgcolor="yellow">
<th>col 1</th>
<th>col 2</th>
<th>col 3</th>
</tr>
<tr>
<td align="center">x</td>
<td align="center">x</td>
<td align="center">x</td>
</tr>
<tr>
<td align="center">x</td>
<td bgcolor=#009900 align="center">x</td>
<td align="center">x</td>
</tr>
<tr>
<td align="center">x</td>
<td align="center">x</td>
<td align="center">x</td>
</tr>
</table>
</body>
استفاده از cellpadding در HTML
  • rowspan و colspan : کاری که در نرم افزار Word انجام دادیم را به یاد آورید یک سری سلول را با هم Merge کردیم و گفتیم این کار در HTML هم امکان پذیر است و این کار با rowspan انجام میشود به این صورت کار میکند که در مقابل rowspan یک عددی قرار میگیرد که نمایانگر این است که چند تا ستون را باید با هم merge کند ، در مثالی که در ادامه برای شما خواهم نوشت در ردیف اول که th ها هستند کاری نداریم و در ردیف دوم که اولین td هست مقدار rowspan را برابر با 2 قرار میدهیم این یعنی به مقدار 2 سلول ستونی را merge کند وقتی tr بسته شد و در tr بعدی که سطر بعدی نیز میباشد ما باید تعداد ستون هایمان را یکی کم کنیم در واقع اگر tr اول 3 تا td داشت tr بعدی آن باید یکی کمتر باشد و این دقیقاً به خاطر merge کردن یک سلول از سطر دوم ماست و این موضوع در مثالی که میزنم کاملاً قانع کننده است . برای Merge کردن یک ردیف از colspan استفاده میکنیم و دقیقاً مشابه حرف قبلی اگر از colspan استفاده کردید از تعداد td ها یکی کمتر میشود چون یکی از td ها خودش تبدیل به دو تا td شده است
<body>
<table border="2">
<tr bgcolor="yellow">
<th>col 1</th>
<th>col 2</th>
<th>col 3</th>
</tr>
<tr>
<td rowspan="2">x</td>
<td>x</td>
<td>x</td>
</tr>
<tr>
<td>x</td>
<td bgcolor=#009900>x</td>
</tr>
<tr>
<td>x</td>
<td colspan="2">x</td>
</tr>
</table>
</body>
استفاده از merge در HTML
  • Frame: یکی دیگر از Attribute های Table می باشد و وظیفه frame تغییراتی در حاشیه جدول است حاشیه جدول را با frame مشخص میکنیم این Frame در حالت های مختلفی آمده است که در پایین این حالت ها را با هم بررسی میکنیم و مثالی را خواهم زد.
  • void: اگر frame ما در این حالت باشد یعنی حاشیه های دور تا دور جدول را نخواهیم داشت.
  • above : اگر frame ما در این حالت باشد یعنی فقط حاشیه بالایی جدول را خواهیم داشت .
  • below: اگر frame ما در این حالت باشد یعنی فقط حاشیه پایینی جدول را خواهیم داشت .
  • lhs: اگر frame ما در این حالت باشد یعنی فقط حاشیه چپ جدول را خواهیم داشت .(مخفف Left Hand Side)
  • rhs: اگر frame ما در این حالت باشد یعنی فقط حاشیه چپ جدول را خواهیم داشت .(مخفف Rigth Hand Side)
  • vsides: اگر frame ما در این حالت باشد یعنی فقط حاشیه عمودی جدول را خواهیم داشت .(مخفف Vertical)
  • hsides: اگر frame ما در این حالت باشد یعنی فقط حاشیه افقی جدول را خواهیم داشت .(مخفف Horizontal)
<table frame="void" border="2">
  • rules : در مثال بالا یعنی frame ما فقط میتوانستیم بر روی حاشیه کل جدول کار کنیم ولی اگر بخواهیم حاشیه های هر سلول را مورد تغییر قرار دهیم باید از Attribute ای به نام rules استفاده نماییم.
<body>
<table  rules="cols" border="2">
<tr bgcolor="yellow">
<th>col 1</th>
<th>col 2</th>
<th>col 3</th>
</tr>
<tr>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
<tr>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
<tr>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
</table>
<ul>
<li>برای نمایش خط های عمودی rules="cols"</li>
<li>برای نمایش خطوط افقی  rules="rows"</li>
<li>اگرمیخواهید هیچ چیزی نمایش داده نشود rules="none"</li>
<li>برای استفاده از تیبل گروپ ها و یک حاشیه کلی از این گزینه استفاده میشود rules="groups"</li>
</ul>
</body>
استفاده از rues در HTML

موجودیت ها و کارکتر های خاص

||http://tosinso.com/files/get/65872f41-7626-47ac-bf52-ca8e23bfb332||
با سلام و تبریک سال 1394 به همه دوستان و itpro ای های عزیز و مشتاق علم و فناوری و دانش در ادامه یادگیری مباحث پیوسته HTML امروز میخوام کمی در مورد کد ها و موجودیت ها و کارکتر های خاص در HTML  صحبت کنم  همانطور که در بخش های قبلی دیدید زبان HTML که طراحی پایه وب هست با تگ های بخصوصی کار میکند و تقریباً هر کاری که میخواهید انجام دهید را باید در تگ مخصوص به خودش تایپ کنید اما در این بین برخی از کاراکترها در زبان HTML دارای معنی متفاوت و خاصی هستند به عنوان مثال اگر بخواهیدکاراکتری مثل  کوچکتر > را تایپ کنید به راحتی امکان پذیر نیست برای اینکه این کارکتر را زمانی که در نرم افزاری مانند Front page تایپ کنید یک لیستی از تگ های موجود برای شما باز میشود چون سر آغاز تمام تگ ها با این کارکتر است اما اگر بخواهيم در متن صفحات وب از اين نوع کاراکترها استفاده کنیم تکلیف چیست؟ برای یادگیری هرچه ساده تر این موضوع با ما در itpro باشید.
جهت نمايش هر کاراکتر خاص باید از يک ترکیب سه قسمتی استفاده نمود ، قسمت اول علامت (&) و در قسمت دوم که در ادامه علامت قبلی ظاهر میشود يک نام (این نام از قبل در HTML رزرو شده و هر نامی نمیتواند قرار گیرد) يا علامت # به همراه يک عدد (این عدد هم همانند نام رزرو شده html است ) و در نهایت در قسمت سوم با علامت سمیکالن (;) این ترکیب را پایان میدهیم.
به عنوان مثال جهت نمايش کاراکتر > بايد کد زیر را بنويسيم :
&lt;     or     &#60;
نکته 1: اگر دقت کرده باشید هیچ وقت در آدرس های اینترنتی Space یا همان فاصله وجود ندارد و اگر علامت 20% را دیدید این نماد همان فاصله در لینک ها ی مرورگر هست.
نکته 2: در زبان HTML ، اگر هنگام وارد کردن متن ، بين حروف با space یک فاصله ايجاد کنيد در هنگام نمايش صفحه وبتان در مرورگر اين فاصله ها از بين رفته و حداکثر يک فاصله یا یک space نمايش داده می شود  ولی اگر میخواهید فاصله ها به تعدادی مشخص باشند برای افزودن فاصله بايد از کد یا کاراکتر ;nbsp& استفاده کرد با هر بار وارد کردن اين کد یا کاراکتر ، يک space یا فاصله خالی به وجود می آيد.
نکته 3: فراموش نکنید تمامی نام های نمايش کاراکترهای خاص که در همین مطلب به صورت جدول مینویسم به حروف بزرگ و کوچک حساس هستند.
نکته 4: در بیشتر مرورگر ها موجودیت کارکتر ها به خوبی پشتیانی میشود منظورم موجودیت های عددی هست و این در حالی است که برخی از مرورگر ها از موجودیت هایی که با نام هستند به خوبی پشتیبانی نمیگردد ولی به خاطر سپردن یک نام بسیار ساده تر است ، برخی از این کارکتر ها و موجودیت ها را در تصاویر زیر میتوان دید.
||قدم به قدم با آموزش HTML::http://tosinso.com/files/get/6a036d5a-cbe6-47df-9e67-4a5c987973b0||

||قدم به قدم با آموزش HTML::http://tosinso.com/files/get/db226a32-298a-4209-a6cb-484abf23b420||

! رنگ ها در HTML
رنگ ها هم در HTML و هم در CSS (که این دوره هم پس از اتمام HTML شروع خواهم کرد) ، دارای کد ها و موجودیت هایی است که در قسمت تنظیم کردن رنگ متن ، همچنین رنگ پس زمینه و رنگ حاشیه ها وجود دارد ، کد ها در رنگ ها شبیه به #66FF00 هست ولی کار با رنگ ها در HTML به سه روش امکان پذیر هست چون میدونم برای شما هم حفظ کردن چنین اعدادی سخت هست پس سه روش رو در همین مطلب خدمتتون میگم تا کاملاً به این موضوع تسلط پیدا کنید
* در روش اول که ساده ترین اون هست استفاده از نام رنگ هست مثلاً (زرد ) Yellowیا black (سیاه) تقریباً بیش از 147 نام رنگ تعریف شده در CSS و Html استفاده می شود
* روش بعدی استفاده از کد ترکیبی (عدد ده دهی) هست که به این ترکیب میگن RGB مخفف RED , Green , Blue هست که هر کدوم  از این اعداد رو با کاما جدا میکنیم و این اعداد برای این رنگ ها شدت رنگ ها را مشخص میکند که این اعداد میتواند بین 0 تا 255 تغییر کند و هر چه عدد انتخاب شده بیشتر یا به سمت 255 برود شدت آن رنگ درترکیب قرمزسبزآبی بیشتر است مثلاً(rgb(0,0,0 که این عدد مخصوص رنگ سیاه است و همچنین(rgb(255.0,0 رنگ قرمز هم نمایانگر این کد هست.
* روش آخر استفاده از کد ترکیبی (عدد مبنای 16) البته بیشتر برنامه نویسان به دلیل کوتاه و ساده بودن کد رنگ بیشتر از این روش استفاده میکنند این روش به صورت#rrggbb نشان داده می شود و تنها تفاوت آن با روش قبلی که مطرح شد استفاده از اعداد مبنای 8 هگزا دسیمال (HexaDecimal) به جای اعداد ده دهی است . که rr و gg و bb به ترتیب نشان دهنده مقدار عددی شدت رنگ های قرمز ، سبز و آبی رو هست البته این که میگیم هگزا دسیمال یعنی مقادیری که میتونید در روش سوم رنگ ها به کار ببرید میتونن بین 00 تا FF که معادل همون 0 تا 255 ده دهی هست قرار بگیرن.
به عنوان مثال #000000 و #FF0000 به ترتیب نمایانگر رنگ های سیاه و قرمز می باشد.
در خصوص اعدادی که در مبنای هگزا دسیمال یا همین روش آخری که مطرح شد باید کمی اطلاعات داشته باشید گفتیم که این روش از rr , bb , gg استفاده میشه رقم های اعداد r ، از 0 هستند تا r-1  به عنوان مثال در مبنای پرکاربرد 10 که به صورت روزانه استفاده می کنید ، رقم ها 0 تا 9 هستند و در مبنای 16 ارقام 0 تا 15 هستند ولی کلاً در کامپیوتر و مبناهای اعداد و برای قابل فهم بودن برای برنامه نویسان و کامپیوتر در اعداد مبنای 16 رقم های 10 تا 15 را با حروف لاتین A تا F نشان میدهند یعنی A عدد 10 است و F عدد 15 است .اما فرض کنید که اینچنین نبود ، مثلا عدد 213 رو به سه شکل می توان نوشت و تفسیر کرد اول اینکه عدد 213 از سه رقم 2 و 1 و 3 تشکیل شده یا از دو رقم 21 و 3 و یا اینکه از دو رقم 2 و 13 خب ما کدام حالت را در نظر بگیریم؟ اما وقتی قانونی ایجاد میشود که از 10 تا 15 را با A تا F جایگزاری میتوان کرد این مورد کاملاً حل میشود و این سه تفسیر رو به صورت 2D میتوان شناخت ، شانزده رقم مبنای گفته شده به صورت زیر است.
0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , F , E , D , C , B , A
با ترکیب این 16 کاراکتری که در بالا گفته شد شما می توانید 16.7 میلیون رنگ بسازید .شاید برای تازه کاران باورش سخت باشد ولی فقط ما در رنگ ها از 1 تا 100 نوع رنگ مشکی داریم این فقط برای رنگ مشکی نست بلکه برای تمام رنگ ها 1 تا 100 نوع طیف رنگی وجود دارد البته دستگاه های چاپ از 5 تای اول آن را تشخیص نمیدهند ولی تعداد این رنگ ها بسیار زیاد است، در سیستم عامل هاو مرورگر های اینترنتی فقط 256 رنگ هست که سازگاری داردند یعنی رنگهای غیر از آنها در سیستمهای مختلف با هم فرق دارند. ضمناً جهت آگاهی رنگهای سازگار از ترکیب 00,33,66,99,CC,FF تشکیل شده اند که به آنها palette-safe colorsنیز می گویند. دوستان طراح وب دقت کنند استفاده از رنگ ها در صفحات وب بسیار بسیار تاثیر گذار است ، از رنگ های استاندارد جهانی استفاده کنید تا وبسایت شما در تمام نقاط جهان دارای رنگی باشد که در آن سیستم عامل و آن مرورگر یکی باشد همچنین استفاده از فونت مناسب و استاندارد جهانی میتواند به پویایی وبسایت شما کمک کند.
در تصویر زیر چند رنگ معروف را با با سه روش گفته شده میبینید
||استفاده از رنگ ها در HTML::http://tosinso.com/files/get/dffa34ea-9ecc-4624-9f9e-906ce182171f||
در سایت *|w3schools ::http://www.w3schools.com/tags/ref_color_tryit.asp?color=White|*میتونید نام رنگ همچنین کد و RGB این رنگ ها رو ببینید.
تصویر زیر هم نمونه رنگ ها و کد های هزادسیمالی است که میتوانید استفاده کنید فقط فراموش نکنید از حروف بزرگ در مقداردهی رنگها استفاده کنید و علامت # را در انتهای کد درج کنید.
||رنگ ها در HTMl::http://tosinso.com/files/get/022f8be0-0422-4d17-8617-e778e778e9e1||
دوستان باز هم تکرار میکنم نگران حفظ کردن رنگ و شماره های آن نباشید در نرم افزار های طراحی کدHTMl مثل Front page یا HTML pad انتخاب کننده رنگ یکی از ابزار های نرم افزار هست که میتوانید به راحتی رنگ مورد نظرتون رو انتخاب کنید و جهت اطلاع کد و مقادیر استفاده شده هر کدوم از رنگ های (RGB) قرمز و سبز و آبی ببینید، در تصویر پایین رنگ قرمز گویای همه چیز است
||کد رنگ ها در طراحی سایت::http://tosinso.com/files/get/f2c33ba1-259e-48bc-9be4-5be2619f37f5||
در ادامه تصویری هایی قرار میدهم که رنگهای نامگذاری شده و مقادیر معادل هگزادسیمال آن به ترتیب حروف الفباء آمده است
||جدول کد رنگ ها در HTML::http://tosinso.com/files/get/8a843148-5a8f-417b-a28e-d899ebf62b76||
||رنگ ها و آموزش HTML::http://tosinso.com/files/get/990e6101-51f4-4483-844e-e9ed756cfcec||
||قدم به قدم با آموزش HTML::http://tosinso.com/files/get/61a0fe13-0aa1-4e9a-aa9e-98bce0efd397||
||آموزش HTML::http://tosinso.com/files/get/f4525823-6895-41fe-8268-d4b119159a99||
همانگونه که دیدید رنگ ها طیف وسیعی دارند امیدوارم مورد توجه شما قرار گرفته باشه.

نویسنده : فرهاد خانلری
منبع : |جزیره طراحی و توسعه وب وب سایت توسینسو::https://web.tosinso.com|
هرگونه نشر و کپی برداری بدون ذکر نام منبع و نویسنده اشکال اخلاقی دارد.

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

و تقریباً هر کاری که میخواهید انجام دهید را باید در تگ مخصوص به خودش تایپ کنید اما در این بین برخی از کاراکترها در زبان HTML دارای معنی متفاوت و خاصی هستند به عنوان مثال اگر بخواهیدکاراکتری مثل کوچکتر > را تایپ کنید به راحتی امکان پذیر نیست

برای اینکه این کارکتر را زمانی که در نرم افزاری مانند Front page تایپ کنید یک لیستی از تگ های موجود برای شما باز میشود چون سر آغاز تمام تگ ها با این کارکتر است اما اگر بخواهيم در متن صفحات وب از اين نوع کاراکترها استفاده کنیم تکلیف چیست؟ برای یادگیری هرچه ساده تر این موضوع با ما در itpro باشید.

جهت نمايش هر کاراکتر خاص باید از يک ترکیب سه قسمتی استفاده نمود ، قسمت اول علامت (&) و در قسمت دوم که در ادامه علامت قبلی ظاهر میشود يک نام (این نام از قبل در HTML رزرو شده و هر نامی نمیتواند قرار گیرد) يا علامت # به همراه يک عدد (این عدد هم همانند نام رزرو شده html است ) و در نهایت در قسمت سوم با علامت سمیکالن (;) این ترکیب را پایان میدهیم.به عنوان مثال جهت نمايش کاراکتر > بايد کد زیر را بنويسيم :

&lt; or &#60;
  1. نکته 1: اگر دقت کرده باشید هیچ وقت در آدرس های اینترنتی Space یا همان فاصله وجود ندارد و اگر علامت 20% را دیدید این نماد همان فاصله در لینک ها ی مرورگر هست.
  2. نکته 2: در زبان HTML ، اگر هنگام وارد کردن متن ، بين حروف با space یک فاصله ايجاد کنيد در هنگام نمايش صفحه وبتان در مرورگر اين فاصله ها از بين رفته و حداکثر يک فاصله یا یک space نمايش داده می شود ولی اگر میخواهید فاصله ها به تعدادی مشخص باشند برای افزودن فاصله بايد از کد یا کاراکتر ;nbsp& استفاده کرد با هر بار وارد کردن اين کد یا کاراکتر ، يک space یا فاصله خالی به وجود می آيد.
  3. نکته 3: فراموش نکنید تمامی "نام های" نمايش کاراکترهای خاص که در همین مطلب به صورت جدول مینویسم به حروف بزرگ و کوچک حساس "هستند".
  4. نکته 4: در بیشتر مرورگر ها موجودیت کارکتر ها به خوبی پشتیانی میشود منظورم موجودیت های عددی هست و این در حالی است که برخی از مرورگر ها از موجودیت هایی که با نام هستند به خوبی پشتیبانی نمیگردد ولی به خاطر سپردن یک نام بسیار ساده تر است ، برخی از این کارکتر ها و موجودیت ها را در تصاویر زیر میتوان دید.
قدم به قدم با آموزش HTML
قدم به قدم با آموزش HTML
  • رنگ ها در HTML

رنگ ها هم در HTML و هم در CSS (که این دوره هم پس از اتمام HTML شروع خواهم کرد) ، دارای کد ها و موجودیت هایی است که در قسمت تنظیم کردن رنگ متن ، همچنین رنگ پس زمینه و رنگ حاشیه ها وجود دارد ، کد ها در رنگ ها شبیه به #66FF00 هست ولی کار با رنگ ها در HTML به سه روش امکان پذیر هست چون میدونم برای شما هم حفظ کردن چنین اعدادی سخت هست پس سه روش رو در همین مطلب خدمتتون میگم تا کاملاً به این موضوع تسلط پیدا کنید

  • در روش اول که ساده ترین اون هست استفاده از نام رنگ هست مثلاً (زرد ) Yellowیا black (سیاه) تقریباً بیش از 147 نام رنگ تعریف شده در CSS و Html استفاده می شود
  • روش بعدی استفاده از کد ترکیبی (عدد ده دهی) هست که به این ترکیب میگن RGB مخفف RED , Green , Blue هست که هر کدوم از این اعداد رو با کاما جدا میکنیم و این اعداد برای این رنگ ها شدت رنگ ها را مشخص میکند که این اعداد میتواند بین 0 تا 255 تغییر کند و هر چه عدد انتخاب شده بیشتر یا به سمت 255 برود شدت آن رنگ درترکیب قرمزسبزآبی بیشتر است مثلاً(rgb(0,0,0 که این عدد مخصوص رنگ سیاه است و همچنین(rgb(255.0,0 رنگ قرمز هم نمایانگر این کد هست.
  • روش آخر استفاده از کد ترکیبی (عدد مبنای 16) البته بیشتر برنامه نویسان به دلیل کوتاه و ساده بودن کد رنگ بیشتر از این روش استفاده میکنند این روش به صورت#rrggbb نشان داده می شود و تنها تفاوت آن با روش قبلی که مطرح شد استفاده از اعداد مبنای 8 هگزا دسیمال (HexaDecimal) به جای اعداد ده دهی است . که rr و gg و bb به ترتیب نشان دهنده مقدار عددی شدت رنگ های قرمز ، سبز و آبی رو هست البته این که میگیم هگزا دسیمال یعنی مقادیری که میتونید در روش سوم رنگ ها به کار ببرید میتونن بین 00 تا FF که معادل همون 0 تا 255 ده دهی هست قرار بگیرن.

به عنوان مثال #000000 و #FF0000 به ترتیب نمایانگر رنگ های سیاه و قرمز می باشد.در خصوص اعدادی که در مبنای هگزا دسیمال یا همین روش آخری که مطرح شد باید کمی اطلاعات داشته باشید گفتیم که این روش از rr , bb , gg استفاده میشه رقم های اعداد r ، از 0 هستند تا r-1 به عنوان مثال در مبنای پرکاربرد 10 که به صورت روزانه استفاده می کنید

رقم ها 0 تا 9 هستند و در مبنای 16 ارقام 0 تا 15 هستند ولی کلاً در کامپیوتر و مبناهای اعداد و برای قابل فهم بودن برای برنامه نویسان و کامپیوتر در اعداد مبنای 16 رقم های 10 تا 15 را با حروف لاتین A تا F نشان میدهند یعنی A عدد 10 است و F عدد 15 است .

اما فرض کنید که اینچنین نبود ، مثلا عدد 213 رو به سه شکل می توان نوشت و تفسیر کرد اول اینکه عدد 213 از سه رقم 2 و 1 و 3 تشکیل شده یا از دو رقم 21 و 3 و یا اینکه از دو رقم 2 و 13 خب ما کدام حالت را در نظر بگیریم؟ اما وقتی قانونی ایجاد میشود که از 10 تا 15 را با A تا F جایگزاری میتوان کرد این مورد کاملاً حل میشود و این سه تفسیر رو به صورت 2D میتوان شناخت ، شانزده رقم مبنای گفته شده به صورت زیر است.

0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , F , E , D , C , B , A

با ترکیب این 16 کاراکتری که در بالا گفته شد شما می توانید 16.7 میلیون رنگ بسازید .شاید برای تازه کاران باورش سخت باشد ولی فقط ما در رنگ ها از 1 تا 100 نوع رنگ مشکی داریم این فقط برای رنگ مشکی نست بلکه برای تمام رنگ ها 1 تا 100 نوع طیف رنگی وجود دارد

البته دستگاه های چاپ از 5 تای اول آن را تشخیص نمیدهند ولی تعداد این رنگ ها بسیار زیاد است، در سیستم عامل هاو مرورگر های اینترنتی فقط 256 رنگ هست که سازگاری داردند یعنی رنگهای غیر از آنها در سیستمهای مختلف با هم فرق دارند.

ضمناً جهت آگاهی رنگهای سازگار از ترکیب 00,33,66,99,CC,FF تشکیل شده اند که به آنها palette-safe colorsنیز می گویند. دوستان طراح وب دقت کنند استفاده از رنگ ها در صفحات وب بسیار بسیار تاثیر گذار است ، از رنگ های استاندارد جهانی استفاده کنید تا وبسایت شما در تمام نقاط جهان دارای رنگی باشد که در آن سیستم عامل و آن مرورگر یکی باشد همچنین استفاده از فونت مناسب و استاندارد جهانی میتواند به پویایی وبسایت شما کمک کند.در تصویر زیر چند رنگ معروف را با با سه روش گفته شده میبینید

استفاده از رنگ ها در HTML

در سایت w3schools میتونید نام رنگ همچنین کد و RGB این رنگ ها رو ببینید.تصویر زیر هم نمونه رنگ ها و کد های هزادسیمالی است که میتوانید استفاده کنید فقط فراموش نکنید از حروف بزرگ در مقداردهی رنگها استفاده کنید و علامت # را در انتهای کد درج کنید.

رنگ ها در HTMl

دوستان باز هم تکرار میکنم نگران حفظ کردن رنگ و شماره های آن نباشید در نرم افزار های طراحی کدHTMl مثل Front page یا HTML pad انتخاب کننده رنگ یکی از ابزار های نرم افزار هست که میتوانید به راحتی رنگ مورد نظرتون رو انتخاب کنید و جهت اطلاع کد و مقادیر استفاده شده هر کدوم از رنگ های (RGB) قرمز و سبز و آبی ببینید، در تصویر پایین رنگ قرمز گویای همه چیز است

کد رنگ ها در طراحی سایت

در ادامه تصویری هایی قرار میدهم که رنگهای نامگذاری شده و مقادیر معادل هگزادسیمال آن به ترتیب حروف الفباء آمده است

جدول کد رنگ ها در HTML
رنگ ها و آموزش HTML
قدم به قدم با آموزش HTML
آموزش HTML

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

صفحه وب با جدول و لینک

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

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

<table>
...محتویات جدول...
</table>

سپس برای اضافه کردن و افزودن محتویات به جدول از تگ <td> که قبلاً مورد بحث قرار گرفته استفاده میکنیم ، که td مخفف کلمه table data است ، برای جدول هم از border استفاده میکنیم که حاشیه ها را برای ما ایجاد کند ، تکه کد زیر نیز جدولی ساده با border که دو سلول دارد را مشخص میکند

<table border="3">
<td>
سلول اول
</td>
<td>
سلول دوم
</td>
</table>

اگر میخواهید به خط بعدی یا ردیف بعدی بروید باید توسط تگ tr این کار را انجام دهیم ، یادتان باشد که در انتها باید تگ ها بسته شوند و کد زیر دقیقاً یک جدولی با دو ستون و دو ردیف را برای ما ایجاد میکند.ضمناً شما می توانید هر چیزی را در داخل سلول ها ایجاد کنید مانند تصویر ، لینک، پاراگراف یک متن یا ... و برای این منظور فقط کافی است متن یا کد لینک یا تصویر را داخل و بین تگ <td> و <td/> وارد کنید.

<table border="3">
<tr>
<td>
سطر اول و سلول اول
</td>
<td>
سطر اول و سلول دوم
</td>
</tr>
<tr>
<td>
سطر دوم و سلول اول
</td>
<td>
سطر دوم و سلول دوم
</td>
</tr>
</table>

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

<table width ="100%" border ="1" cellpadding="0" cellspacing ="0">
<colgroup>
<col width="15%"/>
<col width="85%"/>
</colgroup>

در کد فوق جدول ما با table آغاز میشه و همونطور که میبینید تمام ستون های جدول با درصد کار میکنن برای همین با هر مرورگری و هر درصد رزولوشنی این درصد ها متغیر میشن و شما به درستی میتونید صفحه رو ببینید Border جدول رو عدد 1 دادم همچنین از cellpadding و cellspacing که در بخش هفتم در مورد این دو توضیح دادم استفاده نکردم

  • تگ &lt;colgroup&gt; : همونطور که میدونید و در بخش های اول و دوم هم گفتم HTML تگ های زیادی دارد و به علت کثرت بالای این تگ ها در هر درس نسبت به آموزشمون تگی جدید رو باید به تگ هایی که قبلاً یاد گرفتیم اضافه کنیم تگ colgroup گروهی از یک یا چند ستون در یک جدول را جهت قالب بندی مشخص می کند ، همچنین از این تگ برای سبک یا style دادن به کل ستون،استفاده می شود.
  • نکته 1: این تگ باید در پایین تگ table باشد وحتماً قبل از thead ، tbody ، tfoot و tr قرار گیرد.
  • نکته 2: برای تعریف خصوصیت های مختلف به یک ستون در colgroup از عنصر <col> در داخل آن تگ استفاده میشود.

خصوصیات تگ colgroup: در مورد خوصوصیات تگ colgroup تصویر زیر کاملاً گویا هست.

قدم به قدم با آموزش HTML

خب بر میگردیم به ادامه آموزشمون پس از تگ colgroup ما میخواهیم از عنصر های thead و tfoot و tbody استفاده کنیم که همگی اینها زیر مجموعه های تگ table هستند و جهت ایجاد بخش های مختلف جدول و همچنین خوانایی بهتر این جداول از این عناصر استفاده میشود ، کد زیر را ببینید

<thead>
<tr>
<td align="center" colspan="2">
<img src= "baner.jpg" height="100%" width="100%" alt="how to do "/></td>
</tr>
</thead>

خب با توجه به اینکه ما میخواهیم از جدولی استفاده کنیم که دو خونه ای هست پس colspan رو برابر 2 قرار میدهیم و ضمناً در بالای صفحه یک تصویر رو به عنوان Header قرار دادم که در کد فوق با آدرس baner.jpg مشخص شده هست.

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

<tfoot>
<tr>
<td style ="font-family:arial;fontsize:.75em;" align="center" colspan="2">web Design by itpro &#169; copyright 2015.</td>
</tr>
</tfoot>

در کد بالا که سلول آخر هم هست و توسط tfoot ایجاد کردیم بهش میگن Footer که معمولاً راجع به copyrighth و ایجاد کننده صفحه صحبت میشه همونطور که در کد بالا مشاهده میشه از علامت یا کد &#169 استفاده کردیم برای نمایش کارکتر های خاص که در بخش قبلی در موردش صحبت کردیم.

کد زیر هم table body هست که دارای دو td هست یکی برای درج لینک ها و دیگری برای درج متن یا تصاویری که به دلخواه میتوان در داخل سایت قرار داد

<tbody>
<tr>
<td bgcolor = "#FF9933" align="left">
<ul>
<li><a href="http://web.tosinso.com">web</a></li>
<li><a href="http://dba.tosinso.com">dba</a></li>
<li><a href="http://network.tosinso.com">network</a></li>
<li><a href="http://gsm.tosinso.com">gsm</a></li>
<li><a href="http://linux.tosinso.com">linux</a></li>
<li><a href="http://security.tosinso.com">security</a></li>
<li><a href="http://hardware.tosinso.com">hardware</a></li>
<li><a href="http://icdl.tosinso.com">icdl</a></li>
<li><a href="http://programing.tosinso.com">programing</a></li>
<li><a href="http://graphic.tosinso.com">graphic</a></li>
<li><a href="http://virtualization.tosinso.com">virtualization</a></li>
</ul>
</td>
<td>
<p style="font-size: 2em"><center><b>insert images and text...</b></center></p>
</td>
</tr>
</tbody>
</table>

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

ایجاد یک جدول برای صفحه وب

استفاده از FrameSet

فریم ها در HTML

با سلام ، همانطور که در قسمت اول و دوم در مورد تگ Body صحبت شد دیدیم که بدنه یک قالب را این تگ به عهده داره و تمامی تگ های دیگه باید داخل این تگ نوشته بشن اما به جای این تگ شما میتوانید از تگ frameset استفاده کنید ، ضمناً توجه کنید نمی توانید به صورت همزمان از تگ های frameset و body استفاده کنید.در ادامه این تگ رو بیشتر توضیح خواهم داد.با کمک فريمها یا Frames شما میتوانید نمایش همزمان بیش از یک پنجره را در مرورگر فعال کنید ، هر صفحه در مرورگر به نام یک فريم frame معرفی میشود و اگر قرار است چند فریم با هم در یک صفحه باشند آنها کاملا مستقل از هم هستند.

  • تگ frameset : این تگ میاد یک صفحه HTML رو به چند صفحه تقسیم میکنه یا به عبارتی دیگه برای ایجاد صفحات چند گانه مورد استفاده قرار میگیره که داخل هر کدوم یک صفحه رو دیگه رو Load میکنه و از صفت های معروفش میتونیم به rows و cols اشاره کنیم: همچنین صفت های border , bordercolor,frameborder از دیگر صفت های این تگ هستند که در ادامه به معرفی هر کدوم میپردازیم.
  • rows : جهت ایجاد frame های افقی استفاده میشه این صفت میتونه معین کنه تعداد و اندازه هر فریم چقدر میتونه باشه که این مقدار ها با درصد و پیکسل مشخص میشوند.
  • cols : جهت ایجاد frame های عمودی استفاده میشه این صفت میتونه معین کنه تعداد و اندازه هر فریم چقدر میتونه باشه که این مقدار ها با درصد و پیکسل مشخص میشوند.
<html>
<head>
<title>Test web Page</title>
</head>
<frameset rows="50%,50%" cols="50%,50%">
	<frame src="www.linux.tosinso.com"/>
	<frame src="www.web.tosinso.com"/>
    <frame src="www.icdl.tosinso.com"/>
	<frame src="www.network.tosinso.com"/>
</frameset>
</html>

کد فوق میگه Row که ردیف هست دو تا 50 درصد داره یعنی صفحه رو از سمت ردیف به دو قسمت مساوی تقسیم کن همچنین در Col این تقسیم رو مشاهده میکنیم پس نتیجه میگیریم کد فوق صفحه رو به چهار قسمت مساوی داره تقسیم میکنه که شما میتونید چهار تا Frame رو داخل این کد ببینید که هر کدوم میتونند به یک صفحه مجزا لینک شوند که این Frame ها یک Attribute به نام SRC دارن که در این تگ باید اجباراً ازشون استفاده کنید

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

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

اما چرا من اینجا در itpro دارم اینا رو میگم ؟ فقط به خاطر اینه که مطلبی از HTML ناگفته باقی نمونه و اگر جایی در خصوص فریم ها خوندید زیاد تعجب نکنید ، ضمناً کد فوق رو میتونید به صورت زیر هم تایپ کنید که این نشون میده ما میتونیم چندین Frameset رو صدا بزنیم که هر کدومشون از Frame های جداگانه ای تشکیل بدن یا یک frame رو مجداً به چندین صفحه جداگانه تخصیص دهیم.

<html>
<head>
<title>Test web Page</title>
</head>
<frameset rows="50%,50%">
	<frameset cols="50%,50%">
	<frame src="http://www.linux.tosinso.com"/>
	<frame src="http://www.web.tosinso.com"/>
    </frameset>
	<frameset cols="50%,50%">
    <frame src="http://www.icdl.tosinso.com"/>
	<frame src="http://www.network.tosinso.com"/>
	</frameset>
</frameset>
</html>

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

<body>
<frameset cols="20%, 80%">
  <frameset rows="100, 200">
      <frame src="frame1.html">
      <frame src="frame2.gif">
  </frameset>
  <frame src="frame3.html">
</body>
Frame ها در HTML

یادتون باشه که تگ frame در HTML5 پشتیبانی نمیشه و از مهمترین خصوصیاتی یا attribute هایی که این تگ در HTML4 داره میتونیم به موارد زیر اشاره کنیم:

  • name : نامی برای فریم مشخص می کند ، که البته باید یونیک یا منحصر به فرد باشد که میتوانید name را به عنوان پنجره هدف لینک ها نام گزاری کنید.
  • src : یا همان سورس یا آدرس مقصدی که قرار است در فریم نمایش داده شود البته مثال های بالا اکثراً این خصوصیت را معرفی کرده اند.
  • frameborder :نمایش یا عدم نمایش حاشیه frame ، اگر بخواهید حاشیه رو نشون بدید باید مقدارش رو برابر 1 و در غیر این صورت این خصوصیت رو با عدد 0 که عدم نمایش Border هست پر کنید.
  • border : ضخامت بین هر یک از فریم ها رو مشخص میکنه که شما میتونید جلوی border عددی بر حسب پیکسل قرار بدید.
  • bordercolor : رنگ حاشیه اطراف فریم ها رو میتونید مشخص کنید.
  • framespacing : فاصله frame ها رو نسبت به هم میتونید نشون بدید .
  • marginwidth : فاصله ی محتویات داخل فریم را از حاشیه های چپ و راست (در عرض Frame) را کنترل می کند. این صفت یک عددی بر حسب پیکسل یا % درصد را قبول میکند.
  • marginheight : فاصله ی محتویات داخل فریم را ازحاشیه های بالا و پایین (در ارتفاع Frame) را کنترل می کند. این صفت یک عددی بر حسب پیکسل یا % درصد را قبول میکند.
  • noresize : که این خصوصیت رو میتونید با نام sizeable در ذهن خودتون بسپارید ،به صورت دیفالت شما میتوانید تغییر اندازه فریم را داشته باشید ولی این خصوصیت میتونه کاری کنه که کاربر دیگه نتونه اندازه فریم ها رو تغییر بده.
  • scrolling :عدم یا عدم نمایش اسکرول های یک فریم با مقادیر زیر بیام خواهد شد:
    1. auto : در صورت لزوم scroll را برای فریم نمایش خواهد داد یعنی اگر کحنویات فریم به اندازه ای باشد که اسکرول نیاز داشته باشد خودش اتوماتیک این قابلیت را فعال میکند.
    2. yes : همیشه ابزار اسکرول را برای فریم نمایش خواهد داد (حتی اگر محتویات بیش از اندازه کلی فریم نباشد)
    3. no : هرگز ابزار اسکرول را برای فریم نمایش نخواهد داد (حتی اگر محتویات بیش از اندازه کلی فریم باشد)

تگ iframe :

این تگ مخفف inline frame هست و در HTML 5 پشتیبانی میشه ، توسط تگ iframe فروم های درون خطی را میتواند ایجاد کنید از این تگ معمولاً جهت درج یک صفحه در داخل صفحه ای معمولی و در کنار سایر عنصر ها مانند تصاویر متن لینک و ... استفاده می شود. که به جز صفت noriesize از مابقی صفت های بالا پشتیبانی میکنه همچنین صفت های width و height که مشخصات عرض و ارتفاع یک فریم هست رو میتونید در این تگ استفاده کنید .

تگ noframes :

برخی از مرورگر ها از فریم پشتیبانی نمیکنند پس قائدتاً شما نمیتونید از frameset و frame استفاده کنید پس شما مجبور به استفاده از تگ noframes هستید اگر از این تگ استفاده کنید ، اگرچه در در ابتدای این مطلب گفتم از تگ body نمیتوانید در کنار تگ Frameset بهره ببرید اما برای استفاده از این تگ باید متن را در بین تگ های body قرار دهید به عنوان مثال کاربرد تگ iframe را در بخش آموزش html نشان می دهد.

<iframe src="http://www.web.tosinso.com"></iframe>

فرهاد خانلری
فرهاد خانلری

کارشناس ارشد شبکه مایکروسافت

فرهاد خانلری ، مدرس شبکه و برنامه نویسی مبتنی بر زیرساخت های مایکروسافت ، سابقه فعالیت در موسسات و مراکز دولتی در قالب پروژه ، مشاوره و تدریس ، برنامه نویسی ++C ، سی شارپ و دات نت ، متخصص و مدرس شبکه های مبتنی بر سیستم عاملهای مایکروسافت و سرویس های مربوطه ، سخت افزار و ...

نظرات