undefined
021 33328750 © THE ART OF PROGRAMMING -
بخش دوم : برنامه اولین صفحه وبتان را خودتان بنویسید

هنگامی که شما برای نوع وب سایتی که می خواهید ایجاد کنید، تصمیم گرفتید، باید نوشتن HTML و CSS را شروع کنید.

HTML  یک زبان نشانه گذاری است که فقط برای ساختن صفحات وب ایجاد شده است. هسته ایده این است که صفحات وب صرفاً شامل مقادیری متن و تصویر است که فقط به روش های مختلف بر روی صفحه نمایش مرتب شده اند و نشانه گذاری فوق فقط یک راه برای اعمال دستورالعملهای چگونگی ساخت این متن و تصاویر است.

برای مثال فرض کنید قصد طراحی صفحه زیر را دارید:

حالا خیلی راحت تربه نظر می رسد. تنها تفاوت بین این دو این است که در تصویر دوم، ما تمام کدهای CSS را حذف کردیم و فقط کد HTML را باقی گذاشتیم:

 

 

کلمات "PathsCourses" و "Screencasts" فقط متن هستند، اما با قرار دادن آنها در داخل تگ <nav>و <li>، مرورگر وب می داند که آنها را به عنوان لیست دلخواه نمایش دهد. تگ <img> برای بارگذاری تصویر استفاده می شود. در این مثال عکس مد نظر آیکون دایره ای است.  <h2>به معنای "heading2" است. شما می توانید تگ های heading را به عنوان بخش های اصلی یک صفحه را در نظر بگیرید. سرانجام، <p> مخفف «پاراگراف» است و هر بار که شما نیاز دارید یک متن ساده را در یک صفحه وب نشان دهید، احتمالاً در یک تگ <p> قرار می گیرد.

برچسب های<main>  و<section>  فقط یک راه برای گروه بندی این محتواها در یک سطح حتی بالاتر است. برای مثال، هر تگ <img>، <h2>، و <p> در یک تگ <section>  محصور می شوند تا نشان دهند که این سه شامل اطلاعات مرتبط هستند. هر یک از این بخشها بخشی از حیطه اصلی صفحه هستند، بنابراین در یک برچسب <main>  جای می گیرند. بیش از 100 تگ HTML خاص وجود دارند که همگی اهداف متفاوت دارند و حداقل دانستن چگونگی یافتن برچسب مناسب که نیاز خاص شما را برآورده می کند، بخش مهمی از توسعه وب است.

از کدام مرورگر استفاده کنیم؟

مرورگر وب می داند چگونه تمام این برچسب ها و محتویات داخل آن را برداشته و آنها را به عنوان یک صفحه وب نمایش دهد. اما اگر تمام مرورگرها توانایی نمایش صفحات وب را دارند، پس چرا فقط یک نسخه ارائه نمی شود و موارد متعدد وجود دارد؟ پاسخ این است که هر مرورگر تفسیری کمی متفاوت از دیگری در HTML  و CSS دارد.

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

شکل دهی صفحه

در حالی که HTML یک زبان نشانه گذاری است که برای درج محتوای یک صفحه استفاده می شود، CSS  یک زبان جداگانه برای تغییر سبک نحوه نمایش این تگ هاست. ما در اولین نمونه تمام CSSرا حذف کردیم.حال نگاهی به چگونگی استفاده از CSS خواهیم داشت.

 بهترین روش برای ذخیره کد CSS ایجاد آن در یک فایل جداگانه از کد HTML است. سپس می توانیدHTML  خود را به آن پیوند دهید. به عنوان مثال، اگر یک فایل CSS به نام main.css در همان پوشه ایکه یک فایلHTML  به نام index.html ساخته اید، داشته باشید، می توانید به آن از طریق<head> فایل index  مرتبط شوید، مانند:

 

 

سپس، در main.css، شما می توانید قوانین CSS را تغییر دهید که تگ های HTML را در یک مرورگر به گونه ای خاص نمایش دهد. فراموش نکنید که صفحه ما در ابتدا مانند جعبه ها با یک تصویر و متن درونشان، ظاهر شدند، اما زمانی که فایل CSS را حذف کردیم، این جعبه ها ناپدید شدند. ما می توانیم آنها را به این صورت اضافه کنیم:

section {

display: inline-block;

border-radius: 4px;

max-width: 400px;

border: 1px solid lightgray;

}

 

این CSS شامل انتخاب تمام تگ های بخش و استفاده از چهار خاصیت برای آنهاست.
درباره منوی navigation ، ما می خواهیم Paths/Courses/Screencasts به جای بالا به پایین از سمت چپ به راست دیده شود، برای این مورد ما می توانیم این گونه عمل کنیم:

nav {

list-style-type: none;

}

nav li {

display: inline;

}

این CSS نقاط موجود قبل از هر آیتم در لیست را حذف می کند و سپس display: inline; آنها را به نمایش سطری از چپ به راست تبدیل می کند.

مانند تگ های HTML، صدها ویژگی در CSS وجود دارد و همچنین چندین روش مختلف برای انتخاب تگ های HTML برای اعمال آن قوانین وجود دارد. در حالی که یک توسعه دهنده یا برنامه نویس وب لزوماً نیازی به یادگیری تمام آن ویژگی ها ندارد، اما باید با آنها آشنا باشد که چگونه آنها را مورد بررسی قرار داده و آنها را در عمل اجرا کند.