لوگوی آفتاب گردون |
لوگوی byatoo2
|
لوگوی Farzadnsr
|
لوگوی گیم لایف
|
باکس با کادر ساده
باکس نقطه چین
باکس خط چین
باکس با کادر دو خطی
باکس با خط کلفت
امیدوارم به دردتون بخوره.
در ضمن بچه ها من لوگو هم طراحی میکنم هر کی خواست بگه تا براش بسازم
چند تن از عزیزان گله کردند که آموزش های طراحی و Html رو دیر به دیر آپدیت میکنم که واقعا هم حق داشتند . منو ببخشید . از این به بعد سعی می کنم دراین زمینه بیشتر پست بدم .
حالا من با یک مقاله ی جالب شروع می کنم دوباره . توصیه میکنم این آموزش رو حتما بخونید . از نظر خودم که یکی از بهترین مقاله های اموزشیم بوده .
تگ <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 پیکسل رو گذاشتم .
نکته : جا به جایی میانکدها تاثیری در نمایش کد نداره .
در آخر من یک سوال می کنم . شما سوال رو پاسخ بدید و پاسخ خود رو با جواب صحیح مطابقت بدید و ببینید که تا چه اندازه یاد گرفتید . من لینک جواب صحیح رو در زیر سوال گذاشتم . فقط بچه ی خوبی باش و تقلبی نکن . اول خودت جواب بده و بعد جواب صحیح رو ببین و با هم مقایسه کن . در آخر هم تو قسمت نظرات بگو که چیکار کردی .
خوب فکر کنم کافی باشه تا اینجا . البته کامل که نبود ولی اگه بخوام کامل بنویسم هم خودم از حال میرم و هم اینکه اینقدر طولانی میشه که حال شما هم گرفته میشه . البته فکر کنم چیزهایی که لازم بود رو گفتم . شما هم نظرتون رو در مورد این آموزش ها و نحوه ی آموزش ها بیان کنید .
درس جدید آموزش قرار دادن عکس در پس زمینه ی وبلاگ یا صفحه ی 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 بزنید . آدرس لینک می تونه آدرس یه صفحه یا یه فایل برا دانلود باشه .
موفق و پیروز باشید .