فری نکس

اموزش کد نویسی > طراحی سایت

سلام، به فری نکس خوش امدید!! اینجا می تونی یک دوره ی کامل از اموزش برنامه نویسی رو تجربه کنی. پس تا اخر سایت با ما باش تا طراحی سایت را کامل یاد بگیری.

اولین کد ما، ساختار کد های طراحی سایت است

تست

<html>
    <head>

    </head>

    <body>

    </body>
</html>

<html> ساختار اصلی صفحه را مشخص می‌کند و تمام بخش‌های دیگر داخل آن قرار می‌گیرند، <head> برای قرار دادن اطلاعات و تنظیمات مربوط به صفحه استفاده می‌شود، </head> پایان بخش head را مشخص می‌کند، <body> محتوای اصلی و چیزهایی که کاربر در صفحه می‌بیند را در خود قرار می‌دهد و </body> پایان بخش body را مشخص می‌کند، در نهایت </html> پایان ساختار کامل صفحه را مشخص می‌کند.

با تگ <title> عنوان صفحه را مشخص می‌کنیم. این عنوان معمولاً در تب مرورگر نمایش داده می‌شود و می‌تواند در نتایج موتورهای جستجو نیز استفاده شود.

تست

<html>
    <head>
        <title>فری نکس</title>
    </head>

    <body>

    </body>
</html>

بعد از درست کردن اسم صفحه، برای قرار دادن محتوا در صفحه، از تگ‌های مختلف HTML داخل <body> استفاده می‌کنیم. برای مثال یک توضیح کوچیکی از سایت.

تست

<html>
    <head>
        <title>فری نکس</title>
    </head>

    <body>
        <div>سلام! این صفحه ی فری نکس هست</div>
        <p>سلام! این صفحه ی فری نکس هست</p>
    </body>
</html>

ما برای نوشتن یک متن در صفحه، داخل <body> تگ هایی مخصوص می نویسیم. مثلا <div> یا <p>.

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

تست

<html dir="rtl">
    <head>
        <title>فری نکس</title>
    </head>

    <body>
        <div>سلام! این صفحه ی فری نکس هست</div>
        <p>سلام! این صفحه ی فری نکس هست</p>
    </body>
</html>

با ویژگی dir جهت نمایش متن را مشخص می‌کنیم. مقدار rtl یعنی راست به چپ (Right to Left) و مقدار ltr یعنی چپ به راست (Left to Right).

ما می توانیم برای چپ به راست کردن هم از ltr استفاده کنیم.

css

قدم بعدی تنظیم کردن ظاهر سایت هست که بخش مهمی از سایت به این بخش مربوط می شود.

اول از همه، باید در خود <head> برای css کد بزنیم و کم کم باید بریم سمت فایل جدا.

برای شروع، فقط یک رنگ پس زمینه ی ساده می دهیم.

تست

<html dir="rtl">
    <head>
        <title>فری نکس</title>
        <style>
            body{
                background: red;
            }
        </style>
    </head>

    <body>
        <div>سلام! این صفحه ی فری نکس هست</div>
        <p>سلام! این صفحه ی فری نکس هست</p>
    </body>
</html>

داخل <style> می‌توانیم ظاهر بخش‌های مختلف سایت را تغییر بدهیم. اول اسم بخشی که می‌خواهیم تغییرش بدهیم را می‌نویسیم، مثلاً <body>. بعد داخل { } ویژگی‌ای که می‌خواهیم تغییر کند را می‌نویسیم. اینجا با background رنگ پس‌زمینه را مشخص کردیم و با red گفتیم رنگ آن قرمز باشد.

بعد تعیین کردن بکگراند برای body باید مقادیر دیگر هم استایل بگیرند. برای این موضوع، اول باید از class استفاده بکنند.

تست

<html dir="rtl">
    <head>
        <title>فری نکس</title>
        <style>
            body{
                background: red;
            }
        </style>
    </head>

    <body>
        <div class="firstDiv">سلام! این صفحه ی فری نکس هست</div>
        <p>سلام! این صفحه ی فری نکس هست</p>
    </body>
</html>

بعد دادن کلاس به تگ، باید در <style> ان را صدا بزنیم.

تست

<html dir="rtl">
    <head>
        <title>فری نکس</title>
        <style>
            body{
                background: red;
            }
            .firstDiv{
                background: blue;
            }
        </style>
    </head>

    <body>
        <div class="firstDiv">سلام! این صفحه ی فری نکس هست</div>
        <p>سلام! این صفحه ی فری نکس هست</p>
    </body>
</html>

برای صدا زدن کلاس ها باید در <style>، قبل اسم کلاس یک نقطه بگذاریم

بعد نوشتن css در خود html، باید فایل مربوط به css را جدا بکنیم. برای این کار، یک فایل style.css می سازیم و در ان کد ها را وارد می کنیم.

تست


        body{
            background: red;
        }
        .firstDiv{
            background: blue;
        }

در فایل جدید، باید به مرورگر بگیم تا صفحه را کامل به مانیتور بچسپوند پس از یک کد * استفاده می کنیم.

تست


        *{
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body{
            background: red;
        }
        .firstDiv{
            background: blue;
        }

↑رفتن به بالای صفحه