1. بالاخره مسابقه کاربر برتر با جوایز ارزشمند برای فعالترین کاربران!
    هر ماه ربع سکه بهار آزادی و چندین فلش مموری به کاربران برتر به انتخاب شما!
    برای اطلاعات بیشتر حتما به انجمن مسابقات و جوایز سر بزنید.
    رد اعلامیه

آموزش طراحی وب سایت قسمت چهارم

شروع موضوع توسط salavati1 در ‏7 اکتبر 2016 در انجمن مقالات عمومي

  1. salavati1

    salavati1 کاربر تایید شده

    تاریخ عضویت:
    ‏15 آگوست 2016
    ارسال ها:
    662
    تشکر شده:
    158
    جنسیت:
    زن
    با قسمت چهارم آموزش طراحی وب سایت از پایه در خدمت شما هستیم. در این قسمت مطالب زیر را با هم بررسی خواهیم کرد:مفهوم کامنت و لزوم استفاده از آن
    کاراکترها وسمبل ها و نحوه استفاده در 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>

    نحوه نوشن کامنت در HTML بدین صورت است:
    <!– Beginn 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>
    کاراکترها وسمبل ها و نحوه استفاده در XHTML
    بسیاری موارد پیش می آید که می خواهید در متن خود مانند نوشتن همین مقاله از کاراکترهایی مثل > ویا & و یا هر کاراکتر خاص دیگری استفاده کنید. در XHTML ما به جای درج مستقیم این کاراکترها از کد خاصی که برای آنها تعریف شده استفاده می کنیم. مثلا به جای & از &amp; استفاده می کنیم و این یکی از تفاوت های 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=”mailto:test@test,com”>email
    bob@bubbleunder. com</a>.</p> </body>
    </html>

    صفحاتی که تا به حال درست کرده ایم به صورت متنی و بسیار کسل کننده است و برای جذابیت بیشتر می بایست از عکس ها استفاده کرد . با استفاده از تگ 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 الزامی است .
     

    موضوعات مشابه

    Last edited by a moderator: ‏7 اکتبر 2016
    دل آرا از این پست تشکر کرده است.
XenForo Add-ons by Brivium ™ © 2012-2013 Brivium LLC.