فونت ها

فونت ها نقش مهمي در زيبا ساختن و خواناتر كردن وب سايت بازي مي كنند. ظاهرو رنگ فونت به طور كامل بستگي به كامپيوتر و مرورگري دارد كه استفاده مي شود، اما شما مي توانيد از برچسب < font>در HTML براي افزودن استايل، سايز و رنگ به متن خود در وب سايت استفاده كنيد. مي توانيد از يك برچسب< basefont> براي تنظيم تمام متن خود به اندازه، ظاهر و رنگ يكسان استفاده كنيد.
برچسب فونت داراي سه ويژگي به نام هاي size، color و face مي باشد كه فونت شكا را به دلخواه در مي آورد. براي تغيير هركدام از ويژگي هاي فونت در هر زماني در صفحه ي وب خود، به سادگي از برچسب < font> استفاده كنيد. متني كه دنبال مي كند، تغيير يافته با قي مي ماند تا زماني كه شما آن را با < /font> برچسب ببنديد. شما مي توانيد يكي از ويژگي ها يا همه ي ويژگي هاي داخل برچسب < font> را تغيير دهيد.

تنظيم اندازه ي فونت

شما مي توانيد با استفتده از ويژگي size اندازه فونت محتوا را تنظيم كنيد. دامنه ي مقادير قابل قبول از 1 (كوچكترين) تا 7 (بزرگترين) مي باشد. اندازه ي فونت پيش فرض 3 مي باشد.

 مثال:

اگر هيچكدام از فونت هاي ارائه شده نصب نشده باشند، بنابراين فونت پيش فرض Times New Roman نمايش داده خواهد شد.

تنظيم رنگ فونت

شما مي توانيد با استفاده از ويژگي color هر رنگي رابراي فونت تنظيم كنيد. شما مي توانيد رنگ مورد نظر خود را يا با استفاده از نام رنگ و يا با استفاده از كد هگزادسيمال براي آن رنگ تعيين كنيد.

 مثال:

عنصر < basefont>

انتظار مي رود كه عنصر < basefont> يك اندازه، رنگ و ظاهر پيش فرض براي هر بخشي از داكيومنت كه در برچسب < font>قرار نمي گيرند، تنظيم كند. شما مي توانيد از عناصر < font>استفاده كنيد تا تنظيمات < basefont> را انجام دهيد.
برچسب < basefont> همچنين ويژگي هاي رنگ، اندازه و ظاهر را مي گيرد و با دادن مقدار بيشتر از 1+ براي فونت هاي بزرگتر و كمتر از 2- براي فونت هاي كوچكتر، تنظيمات فونت مربوطه را پشتيباني مي كند.

 مثال:

براي مشاهده اين نمونه برروي دوره آموزش طراحي سايت كليك نماييد.

آموزش طراحي سايت - آموزش ساخت جدول در html

آموزش Table در HTML

جدول هاي HTML به نويسندگان وب اجازه مي دهند تا داده هايي مانند متن، تصاوير، لينك ها، جدول هاي ديگر و غيره در رديف ها و ستون ها تنظيم كنيد. جدول هاي HTML با استفاده از برچسب < table> ايجاد مي شوند كه در آن برچسب < tr> براي ايجاد رديف ها و برچسب < td> براي ايجاد داده هاي سلول ها استفاده مي شوند.

 مثال:

ويژگي هاي colspan و rowspan

اگر بخواهيد دو يا بيشتر از دو ستون را با هم تلفيق كنيد از ويژگي colspan استفاده مي كنيد. به طور مشابه اگر بخواهيد دو يا بيشتر از دو رديف را در يك رديف تلفيق كنيد از rowspan استفاده كنيد.

 مثال:

 

پس زمينه ي جدول

مي توانيد به دو روش زير براي جدول خود زمينه اي تنظيم كنيد.

• ويژگي Bg color: مي توانيد رنگ زمينه را براي همه ي جدول و يا تنها براي يك سلول تنظيم كنيد.
• ويژگي background: مي توانيد يك تصوير را براي كل جدول يا تنها يك سلول تنظيم كنيد.

همچنين مي توانيد با استفاده از ويژگي bordercolor رنگ حاشيه را نيز تنظيم كنيد.

 مثال:

در اينجا مثالي در رابطه با استفاده از ويژگي background مي بينيد. در اين مثال ما از تصويري موجود در image directory استفاده كرده ايم.

آموزش html css

طول و عرض جدول

شما مي توانيد طول و عرض جدولي را با استفاده از ويژگي هاي width و height تنظيم كنيد. شما مي توانيد طول و عرض جدول را به پيكسل و يا متناسب با درصد صفحه ي جاري تنظيم كنيد.

 مثال:

شرح جدول

برچسب caption يك توضيح يا يك تيتر براي جدول مي باشد كه در بالاي جدول نمايش داده مي شود. اين برچسب در ورژن هاي جديد HTML/XHTML توصيه مي شود.

 مثال:

   
   

تيتر، بدنه و پاورقي جدول

جدول ها مي توانند به سه بخش تقسيم شوند: تيتر، بدنه و پاورقي جدول. عنوان و فوت(tfoot) در واقع شبيه به تيتر و پاورقي در يك فايل پردازش word مي باشند كه براي هرصفحه يكي مي باشد، در حاليكه بدنه همان نگه دارنده ي محتواي اصلي جدول مي باشد.
سه عنصر براي مجزا كردن عنوان، بدنه و فوت در يك جدول عبارتند از

• < thead> - براي ايجاد يك تيتر مجزا
• < tbody>- براي نشان دادن بدنه ي اصلي جدول
• < tfoot> - براي ايجاد يك پاورقي مجزا در يك جدول

يك جدول براي نشان دادن صفحات و گروه هاي مختلف يك داده، ممكن است داراي عناصر مختلفي باشد، اما ظاهر شدن برچسب هاي و قبل از زياد مهم نيست.

 مثال:

 

جدول هاي تودرتو

آموزش طراحي سايت با html

شما مي توانيد از يك جدول در داخل جدولي ديگر استفاده كنيد. نه تنها جدول ها، بلكه مي توانيد تمام برچسب ها را در داخل برچسب داده ي استفاده كنيد.

 مثال:

در زير مثالي را از استفاده ي يك جدول و برچسب هاي ديگر در داخل يك سلول مشاهده مي كنيد.

براي مشاهده اين مثال برروي آموزش طراحي سايت كليك نماييد.

آموزش طراحي سايت -آموزش درج كردن تصويردر HTML

وارد كردن تصاوير در صفحات HTML

در اين آموزش چگونگي استفاده از تصاوير در صفحات HTML را فرا مي گيريم.زيبا سازي تصاوير و همچنين ترسيم بسياري از مفاهيم پيچيده به يك روش ساده روي صفحه ي وب شما، بسيار مهم مي باشد. اين آموزش مراحل ساده ي استفاده از تصاوير در صفحات وب را به شما آموزش خواهد داد.

وارد كردن تصوير

شما مي توانيد با استفاده از برچسب هر تصويري را وارد صفحه ي وب خود كنيد. در زير تركيب ساده ي استفاده از اين برچسب را مي بينيد:

برچسب يك برچسب خالي مي باشد، يعني تنها مي تواند داراي ليستي از ويژگي ها باشد و داراي برچسب closing نمي باشد.

 مثال:

براي امتحان كردن مثال، زير اجازه بدهيد فايل html خود يعني test.htm و فايل تصوير خود يعني test.png را در يك مسير قرار دهيم.

Using Image in Webpage

Simple Image Insert

شما مي توانيد از فايل تصوير JPEG، PNG يا GIF متناسب با راحتي خود استفاده كنيد، اما مطمئن شويد كه در ويژگي src نام فايل تصوير را به درستي وارد كرديد. نام تصوير هميشه يك مورد هوشمند مي باشد.
ويژگي alt يك ويژگي مي باشد كه اگر تصوير نمايش داده نشود، يك متن جايگزين را براي آن مشخص مي كند.

تنظيم موقعيت تصوير

آموزش html css

معمولا ما تمام تصاوير خود را در يك مسير مجزا قرار مي دهيم. بنابراين اجازه بدهيد فايل test.htm مربوط به HTML را در مسير اصلي نگه داشته و يك مسير فرعي images داخل مسير اصلي، جايي كه تصوير test.png را نگهداري مي كنيم، ايجاد كنيم.
با فرض اينكه موقعيت تصوير ما "image/test.png" مي باشد، مثال زير را امتحان كنيد:

 مثال:

Using Image in Webpage

Simple Image Insert

تنظيم طول و عرض تصوير

مي توانيد طول و عرض تصوير را براساس نياز خود و با استفاده از ويژگي هاي width و height تنظيم كنيد. شما مي توانيد طول و عرض تصوير را به پيكسل يا براساس درصد اندازه ي واقعي آن تنظيم كنيد.

 مثال:

Set Image Width and Height

Setting image width and height

تنظيم حاشيه ي تصوير

به طور پيش فرض تصوير حاشيه اي در اطراف خود خواهد داشت، شما مي توانيد ضخامت اين حاشيه را با استفاده از ويژگي border و به واحد پيكسل تنظيم كنيد. ضخامت 0 يعني هيچ حاشيه اي در اطراف تصوير وجود ندارد.

 مثال:

  Set Image Border

Setting image Border

تنظيم همترازي تصوير

به طور پيش فرض تصوير در سمت چپ صفحه تنظيم مي شود، اما مي توانيد از ويژگي align براي تنظيم تصوير در سمت راست يا مركز صفحه استفاده كنيد.

 مثال:

  Set Image Alignment

Setting image Alignment

   در اين وبلاگ كدها نمايش داده نمي شود جهت مشاهده كدها برروي آموزش طراحي سايت كليك كنيد

آموزش طراحي سايت -توضيحات در HTML

آموزش استفاده از comment در html

در اين مقاله آموزش Html مي خواهيم به چگونگي استفاده از comment در html بپردازيم:
كامنت قطعه اي از كد مي باشد كه توسط مرورگرها ناديده گرفته مي شود. افزودن كامنت به كد HTML خود، تمرين خوبي است، به ويژه در داكيومنت هاي پيچيده براي نشان دادن بخش هايي از يك داكيومنت به هركسي كه كد را نگاه مي كند. كامنت ها به شما و ديگران كمك مي كنند تا كد خود را متوجه شويد و قابليت خواندن آن را افزايش مي دهد.
كامنت هاي HTML بين برچسب هاي واقع مي شوند. بنابراين هر محتوايي كه بين اين برچسب ها واقع شود، مثل كامنت با آن رفتار خواهد شد و توسط مرورگرها به طور كامل ناديده گرفته خواهد شد.

 مثال:

  This is document title

Document content goes here.....

اين مثال نتيجه ي زير را بدون نمايش محتواي ارائه شده به عنوان بخشي از كامنت ها، به دنبال دارد.
Document content goes here.....

كامنت هاي معتبردر مقابل كامنت هاي نامعتبر

كامنت ها تودرتو نمي شوند، يعني اينكه يك كامنت نمي تواند در داخل كامنت ديگري قرار بگيرد. خط تيره ي (dash) دوتايي "--" ممكن نيست در داخل يك كامنت ظاهر شود، به جز در مواردي كه بخشي از برچسب closing باشد. شما بايد مطمئن باشيد كه هيچ فضاي خالي در ابتداي رشته ي كامنت وجود ندارد.

 مثال:

در اينجا كامنت ارائه شده يك كامنت معتبر مي باشد و توسط مرورگر پاك مي شود.

  Valid Comment Example

Document content goes here.....

اما خط زير يك كامنت معتبر نيست و توسط مرورگر نمايش داده خواهد شد. اين به اين خاطر است كه فضايي بين حاشه ي چپ پرانتز و علامت تعجب وجود دارد.

 مثال:

    Invalid Comment Example

    < !--   This is not a valid comment -->   

Document content goes here.....

كامنت هاي چندخطي

تاكنون فقط كامنت هاي تك خطي را مشاهده كرديم، اما HTML كامنت هاي چندخطي را نيز پشتيباني مي كند.
شما مي توانيد كامنت هاي چند خطي داشته باشيد با استفاده از برچسب آغازگر --!> و پايان دهنده ي ،--> كه قبل از اولين خط و در پايان آخرين خط قرار ميگيرد.

 مثال:

كامنت هاي شرطي

كامنت هاي شرطي تنها در اينترنت اكسپلورر روي ويندوز كار مي كنند، اما توسط مرورگرهاي ديگر هم ناديده گرفته مي شوند. اين كامنت ها در Internet Explorer 5 به بالاتر پشتيباني مي شوند و مي توانيد از آنها براي دادن دستورات شرطي به ورژن هاي مختلف IE استفاده كنيد.

 مثال:

    Conditional Comments
   

Document content goes here.....

در جايي كه نياز خواهيد داشت يك صفحه ي طراحي متفاوت بر اساس ورژن هاي مختلف اينترنت اكسپلورر به كار بگيريد، به راه حلي نياز خواهيد داشت. در اين مواقع چنين كامنت هاي شرطي مفيد خواهند بود.

استفاده از برچسب كامنت

مرورگرهاي كمي هستند كه استفاده از برچسب را براي كامنت بخشي از كد HTML استفاده مي كنند.

 مثال:

  Using Comment Tag

This is not Internet Explorer.

اگر از IE استفاده مي كنيد، نتيجه ي زير حاصل خواهد شد:

This is Internet Explorer.

اما اگر در حال استفاده از IE نمي باشد، نتيجه ي زير حاصل مي شود.

This is Internet Explorer.

كد اسكريپت كامنت

شما جاوا اسكريپت را در يك آموزش مجزا با HTML ياد خواهيد گرفت. در اينجا بايد دقت كنيد كه اگر در حال استفاده از java script يا vb script در كد html خود هستيد، بنابراين توصيه مي شود كه آن كد اسكريپت را در داخل كامنت هاي مناسب HTML قرار دهيد طوري كه مرورگرهاي قديمي بتوانند به درستي كار كنند.

 مثال:

كامنت صفحات طراحي

گرچه شما HTML را در يك آموزش مجزا با صفحات طراحي فرا ميگيريد، اما در اينجا بايد دقت داشته باشيد كه اگر از CSS در كد HTML خود استفاده مي كنيد، بنابراين توصيه مي شود كه كد صفحه ي طراحي را در داخل كامنت هاي مناسب HTML قرار دهيد، طوريكه مرورگرهاي قديمي بتوانند كار كنند.

 مثال:

 ممكن است بنا به دلايلي كدها كامل نمايش داده نشود جهت مشاهده برروي دوره آموزش طراحي سايت كليك نماييد