1. بالاخره صندلی داغ برای کاربران ، این ماه برگذار شد!
    صندلی داغ آبان ماه ۹۵ رو هلیا با نام کاربری ( haleya ) مهمان این برنامس!
    برای اطلاعات بیشتر حتما به صندلی داغ در موضوعات آزاد سر بزنید.
    رد اعلامیه

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

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

  1. salavati1

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

    تاریخ عضویت:
    ‏15 آگوست 2016
    ارسال ها:
    619
    تشکر شده:
    157
    جنسیت:
    زن
    ساخت اولین صفحه وب سایت شما
    در هر جای كامپیوتر كه دوست دارید فلدری به نام my-first-webpage بسازید.
    textEditor خودتان را كه در جلسات قبل توضیح دادیم باز كنید كد زیر را در آن كپی كنید
    <!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>The Most Basic Web Page in the World</title>
    <meta http-equiv=”Content-Type”
    content=”text/html; charset=utf-8″/>
    </head>
    <body>
    <h1>The Most Basic Web Page in the World</h1>
    <p>This is a very simple web page to get you started.
    Hopefully you will get to see how the markup that drives
    the page relates to the end result that you can see on
    screen.</p>
    <p>This is another paragraph, by the way. Just to show how it
    works.</p>
    </body>
    </html>

    از textEditor گزینه file>save as را بزنید
    مسیر فلدر قبل را بدهید تا در آنجا ذخیره شود.
    نام فایل را انتخاب نمایید البته با پسوند html مانند my-first-webpage.html
    از منوی كشویی save as type گزینه all files را انتخاب نمایید
    از منوی كشویی Encoding گزینه UTF-8 را انتخاب نمایید.
    و حالا دكمه save را بزنید.
    حالا در فلدر مورد نظر فایلتان را با مرورگر باز نمایید . تبریك شما اولین صفحه وب خودتان را ساختید!
    اهمیت UTF-8
    این كاراكتر ست (Character Set) اجازه می دهد زبان های دیگر هم بتوانند به درستی صفحه شما را ببینند. فرض كنید یك كاربر كره ای كه زبان انگلیسی ندارد بخواهد صفحه شما را ببیند ، این كاراكتر ست است كه اجازه میدهد شما با مشكلی مواجه نشوید.
    اولین آنالیز شما
    یك مقایسه و یك آنالیز ساده بین كد شما و ظاهری كه در مرورگر می بینید ، می تواند در یادگیری شما كمك شایانی كند:
    زمان مناسبی است كه در مورد 2 تگ p و h1 و البته عناصر دیگر صحبت كنیم.
    تیترها و سلسله مراتب آن (H)
    تیترها عناصر بلاك و بسته شونده (container)هستند و سلسله مراتب مخصوص به خود را دارند و از h1 تا h6 وجود دارند.
    از h1 برای مهم ترین تیتر از h2 برای تیتر كم ارزش تر و از h3 برای تیتر كم ارزش تر از h2 و به همین ترتیب تا h6
    پاراگراف (p)
    یك تگ بلاك و بسته شونده (container) است و برای یك بلوك متنی استفاده می شود این بدان معنی است كه متن های خوتان را باید داخل این تگ قرار دهید.
    لیست (list)
    فرض كنید می خواهید لیست وب سایت های طراحی شده خودتان را نمایش دهید لیست ها دو گونه اند:
    Ol-order list : برای لیست های ترتیبی
    Ul-unorder list: برای لیستهای غیر ترتیبی
    به مثال زیر دقت كنید:
    <!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>Lists – an introduction</title>
    <meta http-equiv=”Content-Type”
    content=”text/html; charset=utf-8″/>
    </head>
    <body>
    <h1>Lists – an introduction </h1>
    <p>Here’s a paragraph. A lovely, concise little paragraph.</p>
    <p>Here comes another one, followed by a subheading.</p>
    <h2>A subheading here</h2>
    <p>And now for a list or two:</p>
    <ul>
    <li>This is a bulleted list</li>
    <li>No order applied</li>
    <li>Just a bunch of points we want to make</li>
    </ul>
    <p>And here’s an ordered list:</p>
    <ol>
    <li>This is the first item</li>
    <li>Followed by this one</li>
    <li>And one more for luck</li>
    </ol>
    </body>
    </html>
    و حالا خروجی كار رو در مرورگر ببینید تا تفاوت های دو نوع لیست را ببینید
    ظاهر همه لیست ها به همین سادگی نیستند و امروزه در طراحی وب سایت حرفه ای استفاده زیادی دارد.
     

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

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