جلسه چهارم css- پشت زمینه در CSS

پشت زمینه در CSS

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

چگونگی اضافه کردن رنگ در سی‌اس‌اس: 

 روش اول -از طریق کد HEX:

در این مثال ابتدا علامت # قرار می‌دهیم و در جلوی آن کد شش رقمی رنگ را می‌نویسیم. برای به دست آوردن کد رنگ می‌توانید از فوتوشاپ یا سرویس‌های آنلاین استفاده کنید.  مثال" ff0000 #"

روش دوم - کد RGB رنگ:

در این حالت باید کد RGB‌ رنگ را بدهید. ابتدا کلمه rgb را می‌نویسیم. سپس یک پرانتز باز می‌کنیم و رنگ را به صورت کد آر‌جی‌بی در پرانتز و بین "" می‌نویسیم."(rgb(255,0,0"

روش سوم - نوشتن نام رنگ‌های پیش‌فرض:

ساده‌ترین راه انتخاب رنگ، نوشتن نام رنگ است. البته در این حالت انتخاب شما به رنگ‌های پیش‌فرض معمول محدود می‌شود.  - مثال : "red" برای رنگ قرمز یا blue برای رنگ آبی.

رنگ پس زمینه:

• نام : background-color 
• این ویژگی چه کاری انجام می‌دهد؟‌  تغییر رنگ پس‌زمینه المان‌های اچ‌تی‌ام‌ال
• چه چیزهایی را در مقابلش بنویسیم؟ رنگ‌ها که به هر ۳ صورتی که در بالاتر مرور کردیم قابل استفاده هستند. 
• نمونه نوشتن:  رنگ مورد نظر# : background-color  مثال۲ -  background-color:  #ff0000  مثال ۳- "(background-color: "rgb(255,0,0 مثال ۴- background-color: blue
• خب حالا که با نوع دستور آشنا شدیم، وقت آن رسیده تا رنگ پس زمینه یک المان را تغییر دهیم. 

HTML

<div class="bg-yelllow"><p>یک متن که داخل یک صفحه زرد قرار دارد</p></div>

CSS

bg-yellow {

background-color: yellow;

}

یک متن که داخل یک صفحه زرد رنگ قرار دارد

 

عکس پس‌زمینه:

شما در سی‌اس‌اس و اچ تی ام ال می‌توانید تصویر پس زمینه یک المان را تغییر دهید. عکس پس زمینه در سی اس اس و اچ تی ام ال بدین صورت نوشته می‌شود:

• نام: background-image
• این ویژگی چه کاری انجام می‌دهد؟‌   تغییر تصویر پس زمینه  هر نوع المانی در اچ تی ام ال 
• چه چیزهایی را در مقابلش بنویسیم؟ در این جا باید آدرس عکس مورد نظرتان را به سی‌اس‌اس بدهید. 
• نمونه نوشتن:    ('آدرس دقیق و کامل عکس در اینترنت') background-image:   url
• مثال:  ("background-image:    url ("zoomit.ir/axshoma.jpg

background-image: url("zoomit.ir/axshoma.jpg");

HTML

<div class="bg-img"><p>یک متن که داخل یک صفحه با تصویر زمینه قرار دارد</p></div>

CSS

bg-img {

background-image: url('http://www.zoomit.ir/media/k2/items/..ax.jpg');"

}

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

حتما دقت کنید که آدرس تصویر مورد نظر شما به صورت دقیق و با ذکر پسوند عکس در داخل پرانتز و بین "" نوشته شود.("url.png")

تکرار تصویر پس زمینه:

شما می‌توانید عکس پس زمینه را به صورت افقی یا عمودی تکرار کنید.این قابلیت برای نمایش تصاویر با ابعاد کوچکتر استفاده می‌شود.

background-image: url("zoomit.ir/bg.png");

background-repeat: repeat-x;

در اینجا ما بعد از وارد کردن دستور تصویر پس زمینه، گفته‌ایم که تصویر ما در جهت افقی x تکرار شود. این موضوع در حالتی که تصویر شما ابعاد کوچکتری‌ دارد آنقدر تکرار می‌شود تا کل پس زمینه شما را اشغال کند.

برای تکرار تصویر در جهت عمودی نیز تنها کافیست تا این کد را برای راستای y بنویسیم.  

background-image: url("zoomit.ir/bg.png");

background-repeat: repeat-y;

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

background-repeat:  no repeat;

 

جلسه سومcss - نحوه انتخاب المان‌های HTML

CSS Selector چیست؟

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

برای صدا کردن یک المان اچ تی ام ال، نیاز داریم که اسم آن را صدا بزنیم. المان‌های اچ تی ام ال هر کدام نام عمومی اختصاصی خود را دارند. مثلا متون با تگ p شناخته می‌شوند و لینک‌ها با تگ a شناخته می‌شوند. در واقع تگ‌های اچ تی‌ ام‌ ال نام‌های عمومی هستند و اگر شما از آن‌ها استفاده کنید به نوعی با کلی مخاطب روبرو خواهید شد.

مثلا در زیر ما نوشته‌ایم p و بدین ترتیب هر نوع پاراگرافی که در متن وجود دارد را انتخاب کرده‌ایم.

HTML

<p>متن اول</p>

<p>متن دوم</p>

<p>متن سوم</p>

CSS

 p {

color: #99CC00;

}

متن اول

متن دوم

متن سوم

حالا از خودتان می‌پرسید اگر ما قصد تغییر همه پاراگراف‌ها را نداشته باشیم و تنها بخواهیم یکی از المان‌ها، مثلا پاراگراف سوم را تغییر دهیم چکار باید کنیم؟ اینجاست که استفاده از id و class‌ به کار می‌آید. کلاس و id در واقع بهترین روش برای انتخاب المان‌ها در سی اس و اچ تی ام ال است. 

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

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

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

اضافه کردن ID به المان‌های اچ تی‌ ام ال: 

در قدم اول ما باید المان‌های اچ تی ام ال‌مان را دارای یک آی‌دی منحصر به فرد کنیم. مثلا  برای پاراگراف <"p id="hi> می‌نویسیم که با <p> تفاوت دارد.  چرا که <"p id="hi> دارای یک آی دی منحصر به فرد با نام hi است که توسط شما و با اضافه کردن اتریبیوت id به دست آمده است.  

پس برای اضافه کردن ID به هر المان اچ تی ام ال کلمه ID را در تگ مورد نظر یادداشت کرده و در مقابل آن"نام آی‌دی"= را می‌نویسیم:

ID = " نام آی‌دی مورد نظر"

حالا که با نحوه‌ی اضافه کردن id به المان‌های اچ تی‌ام‌ال آشنا شدیم؛ در قدم دوم وقت آن رسیده است تا آن‌ها را با سی‌اس‌اس انتخاب کنیم. برای انتخاب یک آی دی خاص در سی اس اس باید علامت # و سپس نامی که به عنوان آی‌دی به المان داده‌ایم را بنویسیم.  

برای مثال ما در زیر المان‌هایی که دارای آی‌دی منحصر به فرد hi# هستند،  انتخاب کرده‌ایم و قوانین دلخواهمان را بر روی آن اعمال کرده‌ایم. 

HTML

<p id ="hi"> متنی که دارای آی‌دی hi است را توسط سی‌اس‌اس انتخاب می‌کنیم تا آن را تغییر دهیم.</p>

CSS

#hi{
    text-align: center;
    color:  #ff6600;
}

متنی که دارای آی‌دی hi است را توسط سی‌اس‌اس انتخاب می‌کنیم تا آن را تغییر دهیم.

انتخاب از طریق کلاس: 

راه حل دیگر برای تغییر همزمان چند المان استفاده از قابلیت کلاس است. کلاس مانند فامیلی برای همان مثال آدم‌ها و خیابان است. بدین ترتیب که شما این دفعه فامیلی فرد را صدا می‌زنید و ممکن است یک یا چند نفر مخاطب شما باشند. شما با اضافه کردن اتریبیوت class به المان‌های اچ‌تی‌ام‌ال خود می‌توانید به صورت همزمان یک استایل و شمایل دلخواه به همه آن‌ها بدهید. مثلا فرض کنید می‌خواهید تیترهای مطلب را با رنگ آبی نشان دهید و تیترهایی که در کنار صفحه و بالای منوها قرار دارند را با همان رنگ مشکی پیش‌فرض نشان داده شود. 

در قدم اول، المان‌های صفحه اچ تی ام ال (هر چند تا که دوست داریم تغییر کنند)‌ کلاس اضافه می‌کنیم. 

در این مثال باید به تمامی هدرهایی که در متن قرار دارد کلاس دلخواه را بدهیم. بدین ترتیب تمامی این هدرها که دارای این کلاس شوند از چنین استایلی بهره‌مند خواهند شد. 

HTML

<p  class="ghermez"> هر تگی که دارای کلاس ghermez است را توسط سی‌اس‌اس انتخاب می‌کنیم تا آن را تغییر دهیم.</p>  

<h2 class="ghermez">عنوان دارای کلاس قرمز</h2>

<h3 class="ghermez">عنوان دارای کلاس قرمز</h3>

CSS

.ghermez{
    color:  red;
}

هر تگی که دارای کلاس ghermez است را توسط سی‌اس‌اس انتخاب می‌کنیم تا آن را تغییر دهیم.

 عنوان دارای کلاس قرمز

 عنوانی دیگر دارای کلاس قرمز

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

HTML

<p class="abi">من یک متن با کلاس آبی هستم</p>

<h3 class="abi">من یک عنوان با کلاس آبی هستم.</h3>

<p  class="red">من هم یک متن با کلاس قرمز هستم.</p>

 

CSS

p.abi{
    color: #00CCFF;
}

 من یک متن با کلاس آبی هستم

من یک عنوان با کلاس آبی هستم.

من هم یک متن با کلاس قرمز هستم.

 

بدین ترتیب تگ‌هایی h1 یا دیگر تگ‌هایی که دارای همین کلاس ABI هستند دیگر مخاطب شما نخواهند بود و تنها المان‌های پاراگراف مورد تغییر قرار خواهند گرفت.

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

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

جلسه دوم CSS- قواعد اولیه نوشتن به زبان CSS

قانون کلی نوشتن سی اس اس:

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

نوشتن در سی اس اس سه مرحله کلی دارد: 

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

مرحله‌ی دوم: المان‌هایی که در اچ تی ام ال نام گذاری کرده‌اید را در فایل سی‌اس‌اس خود صدا بزنید و آن‌ها را مخاطب قرار دهید. 

مرحله‌ی پایانی: حالا تنها کافیست تا تغییراتی که می‌خواهید را در جلوی نام‌ المان‌ها بنویسید تا این تغییرات بر روی آن المان‌ها اعمال شود.

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

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

p

مرحله دوم: در جلوی المان انتخاب شده یک علامت } باز می‌کنیم:

p {

قدم سوم : بعد از کروشه، آن چیزی که قصد داریم در این المان تغییر کند را می‌نویسیم. مثلا اگر قصد تغییر در رنگ المان را داریم، کلمه Color به معنای رنگ را نوشته و جلوی آن :‌ می‌گذاریم. 


p {

color: رنگ دلخواه شما!

قدم چهارم: در جلوی دو نقطه، آن تغییری که قصد داریم بر روی صفحه اعمال شود را می‌گوییم: مثلا در رابطه با تغییر رنگ، نام یا کد شش رقمی رنگ مورد نظر را می‌نویسیم. مثلا در این مثال روبروی عبارت color: کلمه قرمز red نوشته می‌شود. بدین ترتیب ما با نوشتن color: red رنگ تمامی متن‌های داخل اچ تی ام ال را به قرمز تغییر داده‌ایم.  دقت کنید که بعد از تمام شدن هر استایل، علامت ; قرار دهید. در غیر این صورت استایل‌های شما خوانده نمی‌شود. 

p {

color: red ;

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

p {

color:   red;

}

HTML

<p>متنی که قرار است با رنگ قرمز نوشته شود</p>

CSS

p {

color:   red;

}

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

 

نکته بسیار مهم: حتما دقت کنید که در انتهای هر دستور که داخل کروشه {} قرار می‌گیرد، یک علامت ; قرار دهید. بدین ترتیب سی‌اس‌اس می‌فهمد که کار شما با این المان تمام شده و دستور بعدی(یا همان خط بعدی) را اجرا می‌کند. در غیر این صورت اعمال تغییرات شما از جایی که دیگر علامت ; وجود ندارد، قطع می‌شود.

مثال دیگری را با هم مرور کنیم.  فرض کنید بعد از قرمز کردن رنگ متن‌ها، در قدم بعدی می‌خواهیم علاوه بر رنگ متن را نیز با فونت tahoma به نمایش در بیاوریم.

برای اینکار باید یک خط دیگر به داخل {} که باز کرده‌ایم اضافه کنیم. این خط در واقع دستور تغییر فونت را نیز اعمال می‌کند. بنابراین نتیجه‌ی نهایی به صورت زیر می‌شود.

HTML

<p>متنی که قرار است با رنگ قرمز و  فونت تاهما نمایش داده شود</p>

CSS

p {

color:   red;

font-family:   tahoma;

}

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

 

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

جلسه اولCSS - آشنایی کلی با زبان CSS و نحوه اضافه کردن CSS به صفحه

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

CSS یا Cascading Style Sheets چیست؟

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

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

نمونه CSS: 

body {
     background-color: linen;
     }

h1  {
     color: maroon;
     margin-left:  40px;
   } 

مزایای وجود CSS:

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

اما با روی کار آمدن سی‌اس‌اس همه چیز عوض شد. چرا که حالا می‌توانیم یک سایت کامل را با تمامی صفحاتش تنها با یک خط کد تغییر دهیم.

چگونه می‌توانیم در صفحات وب از سی‌اس‌اس استفاده کنیم؟

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

روش اول: CSS خطی

نحوه استفاده از سی‌اس‌اس در وب به چند صورت متفاوت است. یک حالت استفاده از مشخصه استایل در تگ اچ‌تی‌ام‌ال است که آن را در دوره اچ‌تی‌ام‌ال یادگرفته‌ایم. این حالت تنها برای تغییرات محدودی که قصد داریم یک المان را تغییر دهیم مناسب است و در کل بهتر است برای جلوگیری از شلوغی صفحه و کدها و همچنین افزایش سرعت  از این نوع استایل دادن خودداری کنیم. به این نوع CSS اصطلاحا inline یا خطی گفته می‌شود(چون در همان خط اچ‌تی‌ام‌ال نوشته می‌شود)

مثال:‌  <p style="color: red; ">متن با رنگ قرمز </p>

روش دوم: CSS داخلی

نحوه دیگر استفاده از سی‌اس‌اس، استفاده از تگ <style> </style> در صفحه و در بین تگ <head></head> است. این نوع سی‌اس‌اس را internal یا همان داخلی می‌نامند. در استفاده از این نوع سی‌اس‌اس باید توجه داشته باشید که استایل‌های شما تنها در همان صفحه خوانده می‌شود و نمی‌توانید از آن‌ها در دیگر صفحات استفاده کنید.

<head>
<style>
body {
    background-color:  blue;
     }

h1 {
    color: red;
    margin-left:  40px;
   } 
</style>
</head>

روش سوم: فایل خارج از صفحه CSS:

بهترین نحوه استفاده از CSS که ما در این دوره آن را آموزش خواهیم داد و به شما هم پیشنهاد می‌کنیم که در پروژه‌هایتان از آن استفاده کنید، استفاده از یک فایل مجزای CSS  است. برای ساخت یک فایل CSS، ابتدا در ادیتور کد خود (که در اولین جلسه اچ‌تی‌ام‌ال آن‌ را معرفی کرده‌ایم)، یک فایل جدید ایجاد کرده و آن را با نام دلخواه و با پسوند CSS. ذخیره کنید. 

خب حالا صفحه اچ‌تی‌ام‌ال جدیدی را باز کنید. در بین دو تگ <head></head> باید کد  زیر را ا ضافه کنید و آدرس فایل سی‌اس‌اس را در آن وارد کنید.

نکته: برای به دست آوردن آدرس فایل ذخیره شده در ویندوز، بر روی فایل .css کلیک راست کرده و در منوی باز شده وارد تب general شوید و آدرس فایل را کپی کنید. سپس در انتهای این آدرس علامت / قرار داده و نام فایل را با پسوند .cssوارد کنید. برای درک بهتر به مثال زیر توجه کنید:

<link rel="stylesheet" type="text/css" href="/آدرس فایل CSS شما">

 

<head>

<link rel="stylesheet" type="text/css" href="/mystyle.css">

</head>

تمام! شما حالا یک سی‌اس‌اس خارجی دارید که صفحه اچ‌تی‌ام‌ال شما قوانین را از روی این صفحه می‌خواند. مزیت این کار به روش‌های دیگر سرعت لود بهتر صفحه و رندر شدن بهتر صفحه و همچنین امکان استفاده از این فایل برای دیگر صفحات است. اما صبر کنید! چگونه می‌توانیم از این سی‌اس‌اس در صفحات دیگر استفاده کنیم؟‌ برای این کار نیز تنها کافی است تا آدرسی که در بالا وارد کردیم را در بین تگ <head></head> صفحات دیگر قرار دهیم.

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

کدام روش بهتر است؟

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

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

امکان تماس تلفنی ،ارسال اس ام اس ،فکس از طریق اچ تی ام ال

امکان تماس تلفنی ،ارسال اس ام اس ،فکس از طریق کد اچ تی ام ال

با سلام خدمت کابران عزیز :

امروز با آموزش ساخت لینکی با تگ Href در خدمت شما هستیم که در سایت های ایرانی تا بحال  ندیده اید 

حتما شما برنامه نویسان و طراحان سایت و یا دانشجویان و دانش طلبان کامپیوتر با تگ Href آشنایی دارید این تگ باعث ایجاد لینک و پیوند می شود .

پس با این مقدمه شروع می کنیم آموزشمونو

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

<a href=http://alinemone.blog.ir/>alinemone</a>

با درج این کد در اچ تی ام ال با کلیک روی متنalinemone به سایت alinemone.blog.ir ارجاع داده می شوید به مثال دیگر نیز توجه کنید :

<a href="[e-mail] subject=ایمل ">Email</a>

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

<a href="tel:"[phone]">Call</a>

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

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

<a href="sms:[phone]">Message</a>

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

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

<a href="fax:[phone]">Fax</a>

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

توجه ممکن است Url فکس درست کار نکنه . . .

یا علی موفق  باشید

اموزش ساخت جدول با HTML

آیا شما می خواهید یک جدول (table) در صفحه خود ایجاد کنید؟ برای ایجاد یک جدول باید از این تگ استفاده کنید:

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

برای ایجاد یک جدول باید تگ ابتدایی آن یعنی <table> را در جایی که می خواهید جدول وارد شود، قرار دهید. و در پایان جدول هم از تگ پایانی آن یعنی <table/> استفاده کنید.
برای افزودن محتویات به جدول باید از تگ <td> استفاده کنید. نام این تگ مخفف table data است. محتویات جدول چیزهایی هستند که شما بعد از این تگ قرار می دهید. در پایان هم باید پس از محتویات جدول از تگ پایانی <td/>قبل از تگ پایانی جدول استفاده کنید. مانند زیر:

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

جدول به دست آمده مانند زیر به نظر می رسد:

........محتویات جدول......

البته این یک جدول ساده است و شاید در ظاهر زیاد تفاوتی با یک نوشته ساده نداشته باشد.

می توانیم برای جدول کادر (border)  هم تعریف کنیم. برای این کار باید شناسه مربوطه را در تگ جدول قرار دهیم. مانند زیر:

<table border="3">
<td>
........محتویات جدول......
</td>
</table>

حالا جدول ما کمی مشخص تر شد، به آن نگاه کنید:

........محتویات جدول......

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

تا اینجا هر چه گفتیم درباره جدولی با یک سلول بود. برای اینکه جدولی با تعداد بیشتری سلول داشته باشیم، مثلاً بخواهیم یک سلول دیگر در همان خط ایجاد کنیم، باید دوباره از تگ td استفاده کنیم. مانند زیر:

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

می توانید سلولهای ایجاد شده را در اینجا مشاهده کنید:

سلول اول

سلول دوم

حالا فرض کنید می خواهیم به خط بعدی یا به اصطلاح به ردیف بعدی برویم. برای این کار باید از تگ tr استفاده کنیم. این تگ با <tr> شروع و با <tr/> پایان می پذیرد. مانند زیر:
 

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

نتیجه به این صورت مشاهده می شود:
 

سطر اول و سلول اول	سطر اول و سلول دوم
سطر دوم و سلول اول	سطر دوم و سلول دوم

 

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

• cellspacing : 
  برای ایجاد فاصله بین سلولها عدد مورد نظر خود را در این فرمان وارد کنید.

  ---

• cellpadding : 
  از این فرمان برای افزودن فضا به داخل یک سلول استفاده کنید. مقدار فضای مورد نظر خود را در این فرمان وارد کنید.

فرض کنید می خواهیم در مثال قبل بین سلولها یک فاصله به اندازه 10 ایجاد کنیم. تگ جدول را مطابق زیر تغییر می دهیم:

<table border="3" cellspacing="10">

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

سطر اول و سلول اول	سطر اول و سلول دوم
سطر دوم و سلول اول	سطر دوم و سلول دوم

حالا فرض کنید می خواهیم یک فاصله به اندازه 10 را به داخل سلولهای جدول مثال قبل اضافه کنیم. تگ جدول را به این صورت تغییر می دهیم:

<table border="3" cellpadding="10">

جدول به دست آمده به صورت زیر خواهد بود:

سطر اول و سلول اول	سطر اول و سلول دوم
سطر دوم و سلول اول	سطر دوم و سلول دوم

حالا می خواهیم هر دو مثال قبل را با هم امتحان کنیم، یعنی تگ جدول را مطابق زیر تغییر دهیم:

<table border="3" cellspacing="10" cellpadding="10">

نتیجه را ملاحظه کنید:

سطر اول و سلول اول	سطر اول و سلول دوم
سطر دوم و سلول اول	سطر دوم و سلول دوم

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

<table border="2">
<td>
<a href="../javascript/index.html">آموزش جاوا اسکرپت</a>
</td>
</table>

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

آموزش جاوا اسکرپت

برای وارد کردن عکس نیز می توانیم به این صورت عمل کنیم:

<table border="2">
<td>
<img src="learn_html.gif">
</td>
</table>

این هم نتیجه کد:

کد ساخت جدول با HTML

<html>

<body link='green' alink='blue' vlink='violet' >

<title> alinemone </title>

<table border="3" cellspacing="20"  border="20">

<td>

<font face"b zar" color="Red" size="+2">

<h1> Ali </h1>

</font>

</td>

<td>

<font face"b zar" color="blue" size="+2">

<h1> Sheyda </h1>

</font>

</td>

<td>

<font face"b zar" color="green" size="+2">

<h1> Fateme </h1>

</font>

</td>

<tr>

<td>

<font face"b zar" color="Maroon" size="+2">

<h1> Zahra </h1>

</font>

</td>

<td>

<font face"b zar" color="black" size="+2">

<h1> Marziye </h1>

</font>

</td>

<td>

<font face"b zar" color="Chocolate" size="+2">

<h1> ali as </h1>

</font>

</td>

</tr>

<tr>

<td>

<font face"b zar" color="Medium Spring Green" size="+2">

<h1> mehdi </h1>

</font>

</td>

<td>

<font face"b zar" color="Aqua" size="+2">

<h1> mohammad </h1>

</font>

</td>

<td>

<font face"b zar" color="Medium Slate Blue" size="+2">

<h1> Amir </h1>

</font>

</td>

<body/>

</html>