طراحی وب سایت
درباره سایت
آخرین مطالب
امکانات وب
در اين قسمت مطالب زير را با هم بررسي خواهيم کرد:
مفهوم کامنت و لزوم استفاده از آن
کاراکترها وسمبل ها و نحوه استفاده در 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 -->
و در 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>
و حالا خروجي برنامه
بسياري موارد پيش مي آيد که مي خواهيد در متن خود مانند نوشتن همين مقاله از کاراکترهايي مثل > ويا & و يا هر کاراکتر خاص ديگري استفاده کنيد. در XHTML ما به جاي درج مستقيم اين کاراکترها از کد خاصي که براي آنها تعريف شده استفاده مي کنيم. مثلا به جاي & از & استفاده مي کنيم و اين يکي از تفاوت هاي HTML با XHTML است ، يعني اگر بدين صورت عمل نکنيم سند ما Valid نخواهد شد.
براي آگاهي از اين کد ها ميتوانيد به اين آدرس رجوع کنيد.
صفحه اول ، نقطه شروع هر وب سايت
نقطه شروع هر وب سايت صفحه اول آن است که با نام index ويا default شناخته خواهد شد. ما در يک مثال کاربردي تگ هايي که تا به حال آموختيم به اضافه دو خصوصيت جديد اضافه کردن تصوير و ارسال ايميل را خواهيم آموخت.
مثال زير را در اديتور خود بنويسيد و با نام index.html ذخيره نماييد
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</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 متن آبي رنگي را مي بينيد که لينک است يعني تگ a ولي يک لينک معمولي نيست .اين يک لينک براي ارسال ايميل است و اگر در ويندوز خود برنامه مديريت ايميل داشته باشيد مانند outlook با آن مي توانيد به شخص مورد نظر ايميل ارسال نماييد.
صفحاتي که تا به حال درست کرده ايم به صورت متني و بسيار کسل کننده است و براي جذابيت بيشتر مي بايست از عکس ها استفاده کرد . با استفاده از تگ img مي توان تصاوير را به صفحه اضافه کرد. بدين ترتيب :
<img src="divers-circle.jpg" width="200" height="162" alt="A circle of divers practice their skills" />
اين تگ يک تگ empty است و داراي attribute هاي زير است :
src براي آدرس عکس
alt براي توضيح تصوير
width عرض تصوير به پيکسل
height ارتفاع تصوير به پيکسل
Alt هم متني است که عکس را توصيف مي کند و در مرورگرهاي متني و يا زماني که مرورگر تصاوير را نشان نميدهد به جاي نمايش عکس اين متن نمايش مي يابد و اما فايده ديگر اهميتش براي موتورهاي جستجو است.
اين نکته را هم در پايان اضافه کنم که براي Valid شدن در XHTML صفحه وجود alt الزامي است .
برچسب: طراحی وب سایت,طراحی سایت,طراحی وب,
نویسنده: farkhonde