وبلاگ آموزشی پویاگستر

بهترین آموزش ها -کتب الکترونیک-اموزش آشپزی-آموزش فتوشاپ و ...

وبلاگ آموزشی پویاگستر

بهترین آموزش ها -کتب الکترونیک-اموزش آشپزی-آموزش فتوشاپ و ...

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

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



لوگوی mp888


لوگوی byatoo2



لوگوی رام ایران



لوگوی عکس دختران 1


لوگوی Farzadnsr


لوگوی SaeedPoltic



لوگوی عکس دختران 2


لوگوی گیم لایف



لوگوی USB Group


کد لینک باکس

کد باکس های مختلف
بنا به درخواست تعدادی از دوستان انواع باکس ها رو براتون گذاشتم. کد هر باکس درون همن باکس است. فونت همه ی باکس ها روی Tahoma و اندازه ی آن نیز ۸ است. در هر کد به جای ستاره ها می توانید کد محتوی باکس را قرار دهید.
 
باکس ساده بدون کادر

باکس با کادر ساده

باکس نقطه چین

باکس خط چین

باکس با کادر دو خطی

باکس با خط کلفت

امیدوارم به دردتون بخوره.

در ضمن بچه ها من لوگو هم طراحی میکنم هر کی خواست بگه تا براش بسازم

معرفی تگ P : ایجاد و ویرایش پاراگراف

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

حالا من با یک مقاله ی جالب شروع می کنم دوباره . توصیه میکنم این آموزش رو حتما بخونید . از نظر خودم که یکی از بهترین مقاله های اموزشیم بوده .

معرفی تگ <P> :

تگ <P> یکی از پرکاربردترین تگ های html هست . با استفاده از این تگ شما می تونید یک پاراگراف ایجاد کنید که این پاراگراف با تگ <P> شروع و با <P/> تموم میشه . حالا من در زیر بهتون یاد میدم که چطور یک پاراگراف رو ایجاد کنید و یا ویرایش کنید . مثلا فاصله ی بین سطر ها رو کم یا زیاد کنید ، نحوه ی قرار گیری پاراگراف چطور باشه ( چپ چین ، راست چین یا وسط بودن) و ...

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

<p>متن پاراگراف</p>                                                       ======>                                                   متن پاراگراف

 برای تغیر نحوه ی قرار گیری پاراگراف در صفحه از میانکد align استفاده میکنیم . در زیر به مقدار هایی که باید برای میانکد align قرار بدید اشاره کردم و نمایش هر کدوم رو در زیرش گذاشتم :

اگر خواستید پاراگرافتون راست چین باشه ( ) باید به میانکد align مقدار right رو بدید . مثل زیر :

<p align="right">متن پاراگراف</p>

   متن پاراگراف

اگر خواستید پاراگرافتون چپ چین باشه ( ) باید به میانکد align مقدار left رو بدید . مثل زیر :

<p align="left">متن پاراگراف</p>

متن پاراگراف

اگر خواستید پاراگرافتون وسط باشه ( ) باید به میانکد align مقدار center رو بدید . مثل زیر :

<p align="center">متن پاراگراف</p>

متن پاراگراف

حالا اگه خواستید پاراگرافتون از دو طرف میزون باشه ( ) باید به میانکد align مقدار justify رو بدید . مثل زیر :

<p align="justify">متن پاراگراف</p>

متن پاراگراف متن پاراگراف متن پاراگراف متن پاراگراف متن پاراگراف متن پاراگراف متن پاراگراف متن پاراگراف متن پاراگراف متن پاراگراف متن پاراگراف متن پاراگراف متن پاراگراف

برای متن های فارسی که از راست به چپ نوشته میشن از میانکد dir استفاده کنید و مقدار اون رو rtl بزارید که مخفف  right to left هست یعنی راست به چپ .

<p dir="rtl">متن پاراگراف</p>               <===            برای متون فارسی

برای متن های انگلیسی که از چپ به راست نوشته میشن بازم از میانکد dir استفاده می کنید و حتما حدس میزنید که مقدارش رو چی باید گذاشت . آره ، مقدار اون رو ltr بزارید که مخفف  left to right هست یعنی چپ به راست .

<p dir="ltr">متن پاراگراف</p>               <===         برای متون انگلیسی

 

حالا بریم سراغ فاصله ی بین سطر ها :

برای تنظیم فاصله ی بین سطرها از میان کد Style استفاده میکنیم . این میانکد تقریبا در همه ی تگ ها کاربرد داره و خیلی مهمه . این میانکد مقدارهای زیادی رو میتونه در خودش جا بده که این مقادیر با یک علامت ; (نقطه کاما) از همدیگه جدا میشن . یادم باشه یه پست رو فقط به این میانکد اختصاص بدم . اینجا برای تنظیم فاصله ی بین سطر های یک پاراگراف به میانکد style یک مقدار به شکل زیر میدیم و فاصله ی بین سطرها رو به صورت درصدی مشخص میکنیم :

<p style="line-height: 100%;">متن پاراگراف</p>

با بیشتر کردن مقدار 100% فاصله ی بین سطرها بیشتر میشه و با کمتر کردن اون فاصله ی بین سطر ها کمتر میشه .

فاصله ی پاراگراف از راست و چپ :

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

<p style="line-height: 100%; margin-left:3; margin-right:3" >متن پاراگراف</p>

مقدار margin-right فاصله از راست و مقدار margin-left فاصله از چپ رو مشخص میکنه که بر حسب پیکسل هست . که در کد بالا برای فاصله از چپ و راست مقدار 3 پیکسل رو گذاشتم .

نکته : جا به جایی میانکدها تاثیری در نمایش کد نداره .

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

سوال شما کد پاراگرافی که میگم ایجاد کنید : یک پاراگراف با متن فارسی ، وسط چین ، فاصله ی بین سطرها 120% ، فاصله از چپ 3 پیکسل و فاصله از راست 5 پیکسل باشه .

 جواب صحیح       

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

آموزش کامل قرار دادن عکس در پس زمینه ی صفحه

  درس جدید آموزش قرار دادن عکس در پس زمینه ی وبلاگ یا صفحه ی 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">

آموزش قرار دادن لینک

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

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

لینک چیست ؟

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

ساختار لینک

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

<a href="Link Adress">Link Name</a>



که  شما در قسمتhref باید آدرس لینک رو وارد کنید و نام لینک رو پس از بسته شدن تک اولیه ی لینک وارد کنید و در آخر تگ پایانی <a/> رو بکار ببرید . مثلا به نحوه ی نمایش این لینک زیر توجه کنید :

<a href="http://www.poyagostar.blogsky.com">poyagostarوبلاگ</a>        

 


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

شما می تونید با اضافه کردن یه میان کد به صورت "target="_blank  در تگ اولیه ی لینک دادن این امکان رو به اون لینک بدید که در صفحه ی جدید باز بشه . به نحوه ی قرار گرفتن این میان کد در کد لینک دادن توجه کنید :

<a target="_blank" href="Link Adress">Link Name</a>



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

به طور مثال با کلیک بر روی لینک زیر می بینید که در یک صفحه ی جدید باز میشه :

<a  target="_blank" href="http://www.poyagostar.blogsky.com">poyagostarوبلاگ</a>    


چکار کنیم که وقتی موس رو رو لینک می بریم یه توضیحی در مورد اون لینک ظاهر بشه ؟

برا اینکار هم باید از یک میان به صورت "title="tozih استفاده کنید . که باید به جای tozih ، توضیحی از لینک رو قرار بدید. این میان کد هم به صورت زیر در کد لینک دادن قرار میگیره :

<a title="tozih" href="Link Adress">Link Name</a>



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

<a  title="بهترین سایت آموزشی" href="http://www.poyagostar.blogsky.com">poyagostar وبلاگ</a>

 


فکر کنم فعلا همین کافی باشه . بعدا میان کدهای بیشتری رو معرفی می کنم .

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

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


موفق و پیروز باشید .