اسکریپت باران
بزرگترین مرجع دانلود سورس و اسکریپت های برنامه نویسی
در طراحی صفحات html در موارد زیادی همچون تعیین رنگ پس زمینه ، رنگ فونت های متن و … می توانیم از رنگ های مختلف استفاده کنیم . برای تعیین یک رنگ مشخص در html ، سه روش وجود دارد که در ادامه هر یک را شرح خواهیم داد .
چنانچه رنگ پس زمینه سایت را مشخص نکنید ، رنگ پس زمینه به طور پیش فرض به صورت سفید نمایش داده می شود . به مثال زیر توجه کنید :
1 2 3 4 5 6 7 8 9 10 11 12 |
<html> <head> </head> <body> <p> this is a paragraph . </p> </body> </html> |
مشاهده می کنید که رنگ پس زمینه همان رنگ پس زمینه پیش فرض ، یعنی رنگ سفید ، می باشد .
برای آنکه رنگ پس زمینه دیگری غیر از رنگ سفید انتخاب کنیم ( مثلا سبز ) می توانیم از مشخصه bgcolor برای تگ body استفاده کنیم . به مثال زیر توجه کنید :
1 2 3 4 5 6 7 8 9 10 11 12 |
<html> <head> </head> <body bgcolor="green"> <p> this is a paragraph . </p> </body> </html> |
مشاهده می کنید که رنگ پس زمینه به صورت سبز رنگ نمایش داده شده است .
برای تعیین رنگ در html ، چندین روش وجود دارد که این روش ها را در مبحث بعدی شرح خواهیم داد .
همان طور که قبلا گفتم ، اگر قصد ساخت یک سایت خیلی خوب را دارید لازم نیست که حتما همه قواعد ساخت سایت را یاد بگیرید یا اینکه چندین هفته بر روی آن کار کنید ، بلکه برای آنکه انگیزه خود را از دست ندهید باید ابتدا اسکلت و ساختار اصلی سایت را بسازید و آن را بر روی اینترنت قرار بدهید . شاید ظاهر و محتوای سایت شما دارای مشکلاتی باشد اما مهم نیست و به مرور زمان این مشکلات را برطرف خواهید نمود . وقتی صفحات سایت شما تنها بر روی کامپیوتر شخصیتان باشد انگیزه چندان زیادی برای بهتر کردن آن ندارید اما اگر سایت شما بر روی اینترنت قرار داشته باشد چون می دانید افراد دیگری آن را خواهند دید ، انگیزه فراوانی برای ارتقای سطح سایت خود خواهید داشت .
برای قرار دادن سایت خود بر روی اینترنت باید یک نام دامنه و یک هاست داشته باشید . در ادامه خواهم گفت که نام دامنه و هاست چیست و چگونه یک نام دامنه و یک هاست را انتخاب و خریداری نمایید . شاید شخصی یک هاست مجانی را به شما معرفی کند اما من با این انتخاب مخالفم زیرا بهتر است دل به دریا بزنید و وارد میدان واقعی نبرد سایت ها برای به دست آوردن مخاطب بشوید . از اشتباه کردن نترسید ، فقط کسی اشتباه نمی کند که هیچ تلاشی نکند . من خود از خدمات سایت زیر استفاده کرده ام :
اکنون آماده هستید که اسکلت یک سایت کامل را بسازید . کار من این است که کدهای مربوط به اسکلت یک سایت کامل را به شما بدهم و کار شما تنها یک چیز است و آن ((خرابکاری)) می باشد . نخندید کاملا جدی گفتم ، شما باید این کدها را کپی کرده و نتیجه را مشاهده کنید که یک اسکلت کامل برای سایت است سپس باید بخش های مختلف آن را دستکاری کنید و ببینید چه چیزهایی خراب می شود . تنها با این روش است که می توانید به چگونگی شکل گرفتن این اسکلت پی ببرید . نگران خرابکاری نباشید هر وقت که بخواهید کدهای صحیح در این صفحه در اختیار شما می باشد . البته من نیز توضیحاتی را در مورد کدها ارائه خواهم کرد .
همانطور که در مبحث قبلی گفتم ، نوشتن مشخصه style درون تگ div انتخاب مناسبی نیست و ما به جای آن روش بهتری را پیشنهاد می کنیم . در این روش برای هر تگ div یک نام اختصاصی ( یک id ) در نظر می گیریم و سپس ویژگی هایی را که می خواهیم به آن تگ div نسبت دهیم را در قسمت head از فایل html قرار می دهیم . همان مثال مبحث قبل را این بار با این روش می نویسیم :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<html> <head> <style type="text/css"> #column1 { float:left; padding-right:100px; } #column2 { float:left; } </style> </head> <body> <div id="column1"> <p>paragraph number 1</p> </div> <div id="column2"> <p>paragraph number 2</p> </div> </body> </html> |
paragraph number 1
paragraph number 2
مشاهده می کنید که نتیجه دقیقا همان نتیجه مثال مبحث قبلی است . این روش بسیار کارآمد است که باعث می شود با گذشت زمان که صفحه شما شلوغ تر می شود ، گیج نشوید و راحت تر بتوانید مشخصه های هر تگ را تغییر دهید .
در کدنویسی بالا ، ابتدا برای تگ div اول یک id با نام column1 و برای تگ div دوم یک id با نام column2 مشخص کرده ایم . حال باید کدهای CSS را بنویسیم . محل کدهای CSS باید بین تگ های <head> و <head/> باشد . شروع کدهای CSS را با تگ شروع <style type=”text/css”> اعلام می کنیم و پایان کدهای CSS را نیز با تگ پایانی <style/> اعلام می کنیم ، سپس بین این دو تگ ، کدهای CSS را می نویسیم . برای تگ های div ، نام هایی اختصاصی ( id ) ساختیم تا بتوانیم در این محل به آنها ویژگی هایی را اختصاص دهیم . برای اینکه هر تگ div را مشخص کنیم ابتدا علامت # را نوشته و سپس نام id مربوط به آن را می نویسیم . سپس بین دو علامت { و } تمامی مشخصه هایی را که می خواهیم برای آن تگ div می نویسیم .
من قبل از اینکه طراحی سایت را یاد بگیرم چندین بار آموزش های مختلف html را در مراجع مختلف خوانده بودم اما آنقدر آن مراجع در مورد تگ ها و مشخصه های تگ ها توضیح می دادند که در نیمه راه خسته می شدم و آن را رها می کردم . تا اینکه در مرجعی که برای آموزش طراحی قالب سایت بود با تگ div آشنا شدم و یاد گرفتم که ابتدا با تگ های div ، اسکلت و ساختار اصلی سایت خود را بسازم و سپس هرگاه از بخشی از ظاهر این ساختار خوشم نیامد به سراغ یادگیری تگ های جدید بروم و با آنها سایت خود را بهتر و زیباتر کنم .
نرم افزار Dreamweaver ساخت شرکت adobe می باشد که محیط بسیار مناسبی برای نوشتن کدهای html فراهم کرده است . این نرم افزار تمامی زبان های مربوط به طراحی سایت و اینترنت را پشتیبانی می کند . در ادامه برخی ویژگی های جالب این نرم افزار را برایتان شرح می دهم .
همان طور که قبلا شرح دادیم در html هر تگ برای منظور خاصی به کار می رود . مثلا تگ <p> برای ایجاد یک پاراگراف به کار می رود . اما فرض کنید که هنگام ایجاد یک پاراگراف ، بخواهیم مشخصه و ویژگی خاصی را برای آن پاراگراف مشخص کنیم . در اینگونه موارد این مشخصه را باید در تگ شروع وارد کنیم .
در مثال های قبل دیدید که آنچه را می خواستیم در مرورگر اینترنت نمایش داده شود ، بین دو تگ <html> و <html/> قرار دادیم . اما نکته مهمی وجود دارد و آن این است که در اینترنت معمولا مرورگرهای اینترنتی به اطلاعاتی اضافه بر اطلاعاتی که نمایش داده می شود نیاز دارند که طراح سایت باید این اطلاعات را برای مرورگرها در بخشی از فایل html قرار دهد . این اطلاعات در مرورگر نمایش داده نمی شوند بنابراین روش استانداردی وجود دارد که فایل html را به دو بخش تقسیم می کند ، یک بخش بین دو تگ <head> و <head/> قرار می گیرد که در مرورگر نمایش داده نخواهند شد و بخش دیگر بین دو تگ <body> و <body/> قرار می گیرد که محتویاتی است که باید در مرورگر نمایش داده شود . به مثال زیر توجه کنید :
1 2 3 4 5 6 7 8 9 10 11 |
<html> <head> </head> <body> <p>this is a paragraph</p> </body> </html> |
this is a paragraph
چنانچه قصد داشته باشیم بخشی از متن به صورت یک پاراگراف نمایش داده شود و از بخش های دیگر متن جدا بوده و فاصله داشته باشد باید از زوج تگ <p> و <p/> استفاده کنیم . متنی که بین این دو تگ قرار بگیرد به صورت یک پاراگراف نمایش داده می شود . به مثال زیر توجه کنید :
1 2 3 4 5 6 7 |
<html> the text before paragraph .<br> another text . <p>this is a paragraph</p> the text after paragraph .<br> another text . </html> |
the text before paragraph .
another text .
this is a paragraph
the text after paragraph .
another text .
مشاهده می کنید که یک خط خالی قبل از پاراگراف و یک خط خالی بعد از پاراگراف قرار داده شده است تا پاراگراف از سایر متن ها جدا شود .
کانال تلگرامی اسکریپت باران
برای اطلاع از آپدیت های این سورس و سورس های دیگر اسکریپت باران، در کانال تلگرام ما عضو شویدبرنامه نویسی را معنایی دوباره بخشیم !