طراحی وب سایت
درباره سایت
آخرین مطالب
امکانات وب
مفهوم کامنت و لزوم استفاده از آن
کاراکترها وسمبل ها و نحوه استفاده در XHTML
نقطه شروع براي هر وب سايتي
لينک براي ارسال ايميل
درج تصاوير در سند
نظم در برنامه نويسي ارزش بالايي دارد به طوري که مي بايست برنامه نوشته شده توسط شما قابل دنبال کردن توسط برنامه نويس ديگري باشد. يکي از ابزارهايي که در اين زمينه به ما کمک مي کند گذاشتن کامنت است.
کامنت در واقع نوشته هايي است که در سورس برنامه وجود دارند ولي در نمايش خروجي ظاهر نمي شوند . کامنت گذاري در HTML و CSS و JavaScript کاربرد زيادي دارند. به مثال زير دقت کنيد:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Comment example</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
</head>
<body>
<p>I really, <em>really</em> like this XHTML stuff.</p>
<!-- Added emphasis using the em element. Handy one, that. -->
</body>
</html>
و خروجي بدين صورت است:
در واقع با کامنت توضيح داده است که چرا از تگ em استفاده کرده است. کامنت گذاري در HTML بيشتر براي جدا کردن قسمت هاي مختلف وب سايت مي باشد به طور مثال قسمت منو را با کامنت مشخص مي کنيم و مي گويم مثلا اين قسمت از HTML براي منو است.
نحوه نوشن کامنت در HTML بدين صورت است:
<!-- Begi Navigation -->
در جاوا اسکريپت به 2 صورت زير صورت :
/* comment */
// comment
و در CSS :
/* comment */
بگذاريد يک ذره جلوتر برويم و يک استفاده حرفه اي تر کامنت را هم براتون توضيح بدهم :
استفاده ديگر کامنت زماني است که مي خواهيد قسمتي از کد خودتونو نمايش نديد و يا براي مدتي پنهان کنيد در آن زمان است که قسمت مربوطه را کامنت مي کنيد که بعدا هم قابل برگشت است .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Commenting out XHTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<h1>Current Stock</h1>
<p>The following items are available for order:</p>
<ul>
<li>Dark Smoke Window Tinting</li>
<li>Bronze Window Tinting</li>
<!-- <li>Spray mount</li>
<li>Craft knife</li> -->
</ul>
</body>
</html>
و حالا خروجي برنامه
دقت کنيد که 2 آيتم li نمايش نمي يابد ولي حذف نشده تا شايد در آينده دوباره فعال شوند.
کاراکترها وسمبل ها و نحوه استفاده در XHTML
بسياري موارد پيش مي آيد که مي خواهيد در متن خود مانند نوشتن همين مقاله از کاراکترهايي مثل > ويا & و يا هر کاراکتر خاص ديگري استفاده کنيد. در XHTML ما به جاي درج مستقيم اين کاراکترها از کد خاصي که براي آنها تعريف شده استفاده مي کنيم.
براي آگاهي از اين کد ها ميتوانيد به اين آدرس رجوع کنيد.
صفحه اول ، نقطه شروع هر وب سايت
نقطه شروع هر وب سايت صفحه اول آن است که با نام index ويا default شناخته خواهد شد. ما در يک مثال کاربردي تگ هايي که تا به حال آموختيم به اضافه دو خصوصيت جديد اضافه کردن تصوير و ارسال ايميل را خواهيم آموخت.
مثال زير را در اديتور خود بنويسيد و با نام index.html ذخيره نماييد
</head>
<body>
<h1>BubbleUnder.com</h1>
<p>Diving club for the south-west UK - let's make a splash!</p>
<h2>Welcome to our super-dooper Scuba site</h2>
<p>Glad you could drop in and share some air with us! You've
passed your underwater navigation skills and successfully
found your way to the start point - or in this case, our home
page.</p>
<h3>About Us</h3>
<p><img src="divers-circle.jpg" width="200" height="162"
alt="A circle of divers practice their skills"/></p><p>When we're not diving, we often meet up in a local pub
to talk about our recent adventures (any excuse, eh?).</p>
<h3>Contact Us</h3>
<p>To find out more, contact Club Secretary Bob Dobalina
on 01793 641207 or <a
href="contacttest@test,com">email
[email protected]</a>.</p> </body>
</html>
حالا خروجي را ببينيم :
در مورد تگ هاي p و h قبلا صحبت کرده ايم ولي اينجا در قسمت contact متن آبي رنگي را مي بينيد که لينک است .
صفحاتي که تا به حال درست کرده ايم به صورت متني و بسيار کسل کننده است و براي جذابيت بيشتر مي بايست از عکس ها استفاده کرد . با استفاده از تگ img مي توان تصاوير را به صفحه اضافه کرد. بدين ترتيب :
<img src="divers-circle.jpg" width="200" height="162" alt="A circle of divers practice their skills" />
src براي آدرس عکس
alt براي توضيح تصوير
width عرض تصوير به پيکسل
height ارتفاع تصوير به پيکسل
فقط دقت نماييد که آدرس از جايي که صفحه شما قرار دارد حساب ميشود يعني اگر تصوير در همان فولدري باشد که صفحه شما قرار دارد به طريق بالا آدرس مي گيرد.
Alt هم متني است که عکس را توصيف مي کند و در مرورگرهاي متني و يا زماني که مرورگر تصاوير را نشان نميدهد به جاي نمايش عکس اين متن نمايش مي يابد و اما فايده ديگر اهميتش براي موتورهاي جستجو است.
اين نکته را هم در پايان اضافه کنم که براي Valid شدن در XHTML صفحه وجود alt الزامي است .
برچسب: طراحی وب سایت,طراحی سایت,طراحی وب,
نویسنده: ali