ویدئو آموزشی ساخت یک صفحه کلکسیون ساعت(درس9)

6گام ساخت یک صفحه کلکسیون ساعت(درس9)

چگونه یک سایت طراحی میشود؟

چگونه یک سایت طراحی میشود؟

در درس های قبل گفته شد که یک سایت با زبان  html ساخته می شود که مجموعه ای از تَگ ها را شامل میگردد.

برای زیبا سازی سایت از استایل نویسی style یا کُد CSS استفاده میکنیم.

نکات مهمی که تا کنون یاد گرفتیم:

نام هر تَگ بین علامت کوچکتر< و بزرگتر>  قرار میگیرد.

به طور استاندارد در درون تَگ html ، دو تگ head و body قرار دارند.

برای نوشتن پاراگراف یا متن از تَگ p استفاده میکنیم <p>

برای زیبا سازی از استایل نویسی یا css استفاده میکنیم که درون هر تَگ " "=style قرار میدهیم و خصوصیت مورد نظر را مینویسیم.

برای ایجاد کلمات از تَگ <span> استفاده میکنیم و میتوان برای کلمات جداگانه استایل نویسی کرد.

برای ایجاد فاصله در هر سطر از تگ </br> استفاده میکنیم.

برای ایجاد یک خط افقی از تَگ </hr> استفاده میکنیم.

برای زیباسازی متن ازاستایل های زیر استفاده میکنیم:

  • استایل color برای تغییر رنگ متن
  • استایل background-color برای تغییر رنگ پس زمینه متن
  • استایل font-family برای تغییر فونت متن
  • استایل font-weight برای درشت کردن متن

 برای قرار دادن عکس در سایت از تَگ <img> استفاده می کنیم که میتوانیم عرض و ارتفاع آن را در استایل عکس بنویسیم.
تَگ های مورد نیاز برای ساخت کلکسیون ساعت

تَگ های مورد نیاز برای ساخت کلکسیون ساعت

برای ساخت کلکسیون ساعت به تَگ های زیر نیاز داریم:

1. تَگ <html> که شامل تَگ های <head> و <body> میباشد.

2. تَگ <p> برای نوشتن عنوان صفحه

3. تَگ </br> برای فاصله

4. تَگ </hr> برای خط افقی

5. چند تَگ <img> برای چند عکس ساعت

 
نوشتن کُد استاندارد یک صفحه سایت

نوشتن کُد استاندارد یک صفحه سایت

ابتدا نیاز داریم کُد یک صفحه خالی را بنویسیم که همان کُد html میباشد.

کُد html ، کُد استاندارد تمامی سایت ها میباشد که از دو تگ head و body تشکیل شده است.

این دو تگ را درون تگ باز و بسته html می نویسیم.

ابتدا تگ باز و بسته head ( سَر)  

سپس تگ باز و بسته body ( بدنه )

همانند زیر:

<html>

    <head>

    </head>

 

    <body>  

    </body>

</html>
قرار دادن عنوان صفحه

قرار دادن عنوان صفحه

برای نوشتن عنوان صفحه نیاز به تَگ <p> داریم.

عنوان صفحه را بین تَگ باز و بسته p قرار میدهیم.

توجه داشته باشید تمامی تَگ ها بین تگ باز و بسته body قرار میگیرند.

کُد نوشته شده مرجله قبل را به صورت زیر تکمیل میکنیم:

<html>

    <head>

    </head>

    <body>  

        <p> کلکسیون سایت من  </p>

    </body>

</html>
نوشتن کُد فاصله و رسم یک خط

نوشتن کُد فاصله و رسم یک خط

برای ایجاد یک فاصله از تَگ </br> و برای ایجاد خط افقی از تَگ </hr> استفاده میکنیم.

کُد مرحله قبل را به صورت زیر تکمیل میکنیم:

<html>

    <head>

    </head>

    <body>  

        <p> کلکسیون سایت من  </p>

        <br/>

        <hr/>

    </body>

</html>
نوشتن کُد کلکسیون چند ساعت

نوشتن کُد کلکسیون چند ساعت

برای قراردادن چند ساعت مختف، چند تَگ <img> با نام عکس ساعت ها قرار میدهیم.

نام عکس ساعت ها در خصوصیت src نوشته می شود.

کُد مرحله قبل را به صورت زیر تکمیل میکنیم:

<html>

    <head>

    </head>

    <body>  

        <p> کلکسیون سایت من  </p>

        <br/>

        <hr/>

       <img src="clock1.jpg" >

       <img src="clock2.jpg" >

       <img src="clock3.jpg" >

       <img src="clock4.jpg" >

    </body>

</html>

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

توجه کنید هنوز شما در حال یادگیری اصول پایه ای هستید.

 

آفرین بر شما که با پشت کار و علاقه تا اینجا پیش آمدین

خوشحالیم بتوانیم آینده متفاوتی برای شما خلق کنیم.

 

لطفا این درس را چندین بار تکرار کنید.