:: دوست دارید یه باکس پخش موزیک اتفاقی به شکل زیر در وبسایتتون داشته باشید ؟

۲ - ۳ نفر از دوستان درخواست  کرده بودن که کد جاوا اسکریپت پخش موزیک اتفاقی رو توی سایت قرار بدم .  به همین دلیل امروز این کد رو براتون میزارم . کدی که پس از قرار دادن اون در وبلاگ یا وبسایتتون ، در هر بار لود شدن صفحه یه آهنگ به صورت random پخش بشه .
:: می تونید کد رو از زیر بگیرید :

:: برای دریافت کد ، راست کلیک کنید و Save Target As بزنید .

> توجه کنید که به جای URL Of Music n باید باید آدرس موزیک n و به جای Name Of Music n باید نام موزیک n رو وارد کنید . (منظور از n عددیه که توی کروشه اومده ، یا همون ایندکس آرایه های music و Name )

:: شیوه ی افزودن موزیک های دلخواه به این کد ::

توی این کد دوتا آرایه وجود داره . یکی مربوط به آدرس موزیک ها (به اسم music) و دیگری اسم موزیک ها (Name) . برای اینکه یه موزیک جدید به کد اضافه کنید باید یه عضو به این آرایه ها اضافه کنید .

مثلا کد زیر شامل دو تا آهنگه که من توش گذاشتم :

:: توجه کنید ، عددی که به عنوان ایندکس (عدد درون [ ] ) میزارید باید یکی بیشتر از ایندکس آخرین عضو آرایه باشد . (که در کد بالا ۱ است ) ، برای اضافه کردن آهنگ جدید باید دو سطر اضافه کنید . یکی برای آدرس موزیک و دومی برای اسم آهنگ . مثلا اگر بخواهیم دو آهنگ دیگه توی این کد بزاریم ، باید چهار سطر زیر رو به کد اضافه کنیم :

music[2] = ‘Url Of Music 2′;
Name[2] = ‘Name of Music 2‘;
music[3] = ‘Url Of Music 3′;
Name[3] = ‘Name of Music 3‘;

که کد به شکل زیر در میاد :

برای افزودن آهنگ های بیشتر همین روند رو ادامه بدید .

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

موفق باشید .

:: اگر یادتون باشه دو سال پیش من دو تا قالب به اسم های silver70 و XP طراحی کردم و تو سایتم قرار دادم . که استقبال زیادی  ازشون شد . متاسفانه بدلیل نداشتن یه فضای مطمئن برای آپلود فایل های این دو قالب ، هر از چند گاهی وبلاگهایی که از این قالبها استفاده می کردن به هم ریخته نشون داده می شدند .

:: من یکی از این قالب ها رو بازسازی کردم و فایلهای اون رو در سرور سایت خودم قرار دادم و از این به بعد می تونید کاملا مطمئن باشید که قالب در همه زمان ها به درستی لود میشه .  ضمن اینکه کد این قالب دوباره از اول نوشته شده و کاملا استاندارد و بهینه شده . طراحی قالب قبلی استاندارد نبود و فقط تو مرورگر IE درست نمایش داده میشد ولی این قالب با مرورگرهای IE ، FireFox ، Opera  کاملا تست شده و ظاهرش در هر کدوم از این مرورگرها ثابت و بدون تغیر می مونه . می تونید قالب رو از زیر دریافت کنید .

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

برای دیدن توضیح در مورد هر تگ موس رو روی عکس سمت راست ()  نگه دارید .

توضیح	نمایش مثال	کد مثال	تگ
	۷Learn .Com	7Learn<br>.Com	<br>
	7Learn	<center>7Learn</center>	<center>
	7Learn 7Learn	<b>7Learn</b> <strong>7Learn</strong>	<b> <strong>
	7Learn 7Learn	<i>7Learn</i> <em>7Learn</em>	<i> <em>
	7learn.com	<u>7learn.com</u>	<u>
	7learn.com	<strike>7learn.com</strike>	<strike>
	7Learn	<small>7Learn</small>	<small>
	7Learn	<big>7Learn</big>	<big>
	E=MC 2	E=MC<sup> 2</sup>	<sup>
	C T = C1 + C2	C<sub> T</sub> = C<sub>1</sub> + C<sub>2</sub>	<sub>
:: ww.7Learn.com

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

:: موفق باشید …

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

:: لینک چیست ؟

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

:: تگ لینک دادن

توی ادیتورهای مختلف برای قرار دادن لینک معمولا دکمه ای به شکل زنجیر یا کره زمین ( ) وجود داره ، که با کلیک روی اون و وارد کردن اسم لینک و آدرس اون لینکتون ایجاد میشه . برای اینکه یه کم دقیقتر و عمیقا متوجه بشید که چه چیزی لینک رو بوجود میاره بهتره که با کد لینک دادن آشنا بشید .

ساده ترین کد لینک دادن به شکل زیره :

به جای Link Name اسم لینک و به جای URL آدرس لینک رو قرار می دید . به طور مثال کد زیر یک لینک با نام ۷Learn.com و آدرس www.7Learn.com بوجود میاره . نمایش کد رو در سمت راست کد می بینید .

:: باز شدن لینک در پنجره ی جدید :

اگر بخواید که لینکتون در پنجره ی جدیدی باز بشه باید یه میانکد “target=”_blank به کد لینکتون اضافه کنید :

البته مقادیر دیگه ای مثل self ، top  ،  parent برای ویژگی target وجود دارند که مربوط می شن به کار با فریم ها و زیرپنجره ها که سعی می کنم در پست های آینده توضیح بدم .

:: نمایش توضیح با رفتن موس روی لینک :

:: حتما دیدید که روی بعضی از لینک ها که میرید یه توضیحی در مورد لینک ظاهر میشه . برای اینکه وقتی روی لینک میرید یه توضیحی در مورد اون ظاهر بشه باید یه میانکد “title=”Description به کد لینک اضافه کنید . که به جای Description باید توضیح لینکتون رو بنویسید . می تونید موس رو روی لینک سمت راست کد در زیر نگه دارید تا توضیح لینکو ببینید :

موفق باشید .

:: در ادامه ی بحث آموزش Html امروز تگ های Meta رو براتون آموزش میدم .

تگ های Meta بسیار فراوانند که ما در اینجا فقط به معرفی چند تا از اون ها که پرکاربرد هستند و شما به اون ها نیاز دارید می پردازیم :

● جایگاه تگ Meta :  تو درس قبلی یه اشاره به جایگاه تگ های Meta کردم . اگه درس ها رو دنبال کرده باشید من گفتم که تگ های Meta در بین تگهای Head قرار میگیرند. به شکل زیر :

همونطور که در بالا می بینید تگهای Meta بعد از تگ <head> و قبل از تگ <head/> اومدن .اگر چند تا تگ Meta به کار ببرید همشون در سطرهای زیر هم و در بین تگ های Head قرار میگیرن …

 :: انواع تگ های Meta : در اینجا من به سه نوع از تگ های Meta که بیشترین کاربرد رو دارن اشاره میکنم :

تگ متای توصیفی (Description meta Tags) :

در این گونه تگ های Meta شما در مورد صفحه ی وب ، وبلاگ و یا سایتتون توصیفی رو قرار میدین . شاید بپرسید که این به چه دردی می خوره ؟ خوب باید بگم که موتور های جستجوگر نظیر Google و Yahoo به این تگ اهمیت میدن . یعنی هنگام جستجو کردن ، توصیف درون این تگ رو دریافت می کنن و در صورت مربوط بودن به کلمه ی جستجو شده اون صفحه رو در نتایج جستجو قرار میدن . این تگ و توصیفی که در اون می نویسید می تونه در افزایش آمار بازدیدتون خیلی مؤثر باشه . فقط باید توجه داشته باشید که توصیف بیش از حد در این تگ هیچ تاثیری در بالاتر بردن کارایی اون نداره . سعی کنید یه توصیف کوتاه و دقیق راجع به صفحه رو در اون بگذارید . این تگ به شکل زیره :

تگ متای کلمات کلیدی (Keywords meta Tags) :

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

تگ های متای HTTP-EQUIV :

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

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

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

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

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

!!! از دوستان عزیزی که پستهای بنده یا هر کس دیگه ای رو تو وبسایتشون کپی می کنن تقاضا دارم که لینک منبع رو حتما ذکر کنن . عدم قرار دادن لینک منبع هم خیانت به نویسنده ی مطلب هست و هم اینکه وب نویس هارو برای ادامه ی کارشون بی انگیزه می کنه . 

موفق و سربلند باشید .

:: همونطور که در پست قبلی گفته بودم امروز به معرفی تنه ی اصلی یک فایل Html و تگ ها اصلی اون می پردازم .

یه نکته اول در مورد تگ ها بگم . خیلی ها پرسیده بودن که اصلا تگ چی هست ؟

اینو بگم که یک تگ رو به صورت <Tag> یا <Tag/> نمایش میدن .

هر تگی که مثلا به شکل <Tag> وجود داشته باشه  حتما یه تگ پایانی به شکل <Tag/> داره . مثلا وقتی میگن فلان کد رو بزارید بین تگهای بادی ، یعنی اینکه بزاریدش بین تگ آغازی <Body> و تگ پایانیش که <Body/> هست .

خوب بریم سر اصل مطلب :

 :: تنه ی اصلی یک فایل HTML :

بدنه ی اصلی یک فایل html از چند تا تگ اصلی بوجود میاد . من اول تنه ی اصلی رو براتون میزارم و بعد کاریرد هر جزء اونو براتون توضیح میدم :

تنه ی اصلی یک فایل Html به شکل زیر هست :

:: تگ های Html : این تگ با <html> شروع میشه و با تگ پایانی <html/> تموم میشه .

تمام کدها و تگهای Html و … بین این دو تگ قرار می گیرن . کاربرد تگ <html> اینه که به مرورگر میفهمونه که این یک فایل Html هست و اینکه مروگر اونو چطور نمایش بده .

:: تگ های Head : این تگ هم با <head> شروع میشه و با تگ پایانی <head/> تموم میشه .

در واقع مشخصات ، خصوصیات و تنظیمات یک فایل Html در بین تگ های <head> و<head/> قرار می گیره . مواردی که در بین این دو تگ قرار میگیره در صفحه نمایش داده نمیشه .  از جمله تگ هایی که بین این دو  قرار میگیرن تگهای meta و  Style هستن که بعدا به موقش در مورد اونا هم بحث می کنم .

:: تگ های Title : کلمه یا متنی که بین تگ <title> و <title/> قرار میگیره عنوان صفحه رو مشخص میکنه . همون عنوانی که در بالای پنجره ی اینترنت اکسپلورر نمایش داده میشه . پس اگه خواستید عنوان صفحه ی خود رو عوض کنید باید متن بین این تگ رو تغیر بدید و عنوان مورد نظر رو بین این دو تگ بزارید  . 

:: تگ های Body : شاید بشه گفت اساسی ترین تگ Html همین تگ های بادی هستن که با تگ <body> شروع و با تگ <body/> به پایان میرسه .

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

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

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

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

<body background=”Adress Of Image“>

که باید به جایه Adress Of Image آدرس عکسی رو بزارید که میخواید بره به پس زمینه ی وب . با اینکار این عکس در پس زمینه تکرار میشه .

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

:: برای اینکه تکرار نشه باید تگ بادی به شکل زیر در بیاد :

<body background=”Adress Of Image” style=”background-repeat:no-repeat“>

همونطور که میبینید با اضافه کردن میان کد background-repeat:no-repeat برای تکرار عکس مقدار No رو قرار دادیم . پس عکس تکرار نمیشه .

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

<body background=”Adress Of Image” style=”background-repeat:repeat-x“>

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

<body background=”Adress Of Image” style=”background-repeat:repeat-y“>