.

طراحی سایت با html و css

هرآنچه باید درباره طراحی سایت با html و CSS بدانید!

تهیه شده توسط رضا گلچین

محمدرضا گلچین | کارشناس سئو و دیجیتال مارکتینگ در شرکت تابان شهر

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

آشنایی با  انواع خدمات طراحی سایت تابان شهر

طراحی سایت با html و css

طراحی سایت با html و CSS

بگذارید اول از همه یک چیز را به شما بگوییم. طراحی سایت با html و CSS کاملا یک مفهوم بدیهی است. آخر مگر طراحی سایت با مفهوم دیگری هم به این حجم انجام می شود؟ بدون HTML و CSS طراحی سایت رسما امکان پذیر نیست و سایت هایی هم که از این دو زبان استفاده نکنند (اگر چنین سایت هایی اصلا وجود داشته باشند) کار خاصی نمی توانند انجام بدهند. HTML و CSS درست است که یک “زبان” هستند، اما در نظر داشته باشید که این زبان ها، زبان برنامه نویسی نیستند. کسی با این زبان ها برنامه نویسی نمی کند، همه با این زبان ها طراحی سایت انجام می دهند. یادتان باشد که سایت، صرفا یک Program نیست، بلکه سایت، یک صفحه در دنیای وب است که باید با HTML و CSS به آن ساختار بدهیم. پس خوب است که این مورد را حتما بدانیم.

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

HTML چیست؟

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

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

CSS چیست؟

برای طراحی سایت با html و CSS مفهوم HTML را شناختیم و حالا نوبت به CSS می رسد. CSS مخفف Cascading Style Sheets است و می شود گفت که یک زبان برنامه نویسی حساب می شود. این زبان برنامه نویسی در واقع به المان های HTML دیکته می کند که چگونه باید در بخش ظاهری سایت خودشان را نشان بدهند. در واقع این HTML است که ساختار بندی یک سایت را انجام می دهد و در طرف دیگر، CSS به آن ساختار شکل و ظاهر می دهد و استایل آن را مشخص می کند. این دو زبان از یکدیگر جدا هستند. به این خاطر که اگر قرار بشود که ساختار یک سایت تغییر کند و فرمت آن عوض بشود، به راحتی بتوانیم این دو را از یکدیگر تفکیک کنیم و در طراحی سایت ما اشتباهی رخ ندهد.

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

طراحی سایت با html و CSS چگونه انجام می شود؟

شما یک صفحه Editor باز می کنید که برنامه های آن در سرتاسر وب وجود دارد. اگر هم نخواستید، می توانید صرفا Notepad ویندوز را باز کنید و کار را روی آن انجام بدهید. کد های HTML  سایت خودتان را در آن قرار می دهید. سپس در صفحه دیگری از همان Editor کد های CSS را قرار می دهید و آن ها را به تگ مخصوص HTML خودتان مرتبط می کنید. کد های ادیت شده را با یک فایل مرورگر باز می کنید و سایت شما نمایش داده می شود. خیلی به نظر ساده می رسد درست است؟ بله ساده هست اما برای یادگیری HTML، شما باید Tag ها و Syntax های مختلف را بلد باشید، منطق کد را آرام آرام یاد بگیرید و از همه مهمتر اینکه باید تمرین کنید. برای این کار بهترین سایت، W3schools می باشد و خیلی ها از همین سایت شروع کردند.

برای یادگیری طراحی سایت با html و CSS چه چیز هایی لازم داریم؟

زمان، حوصله و علاقه تنها چیز هایی هستند که طراحی سایت با html و CSS لازم دارند. این سه مورد را شما داشته باشید، دیگر نیازی نیست دانش دیگری را از قبل داشته باشید. (البته بد نیست که زبان انگلیسیتان هم تا حدی خوب باشد) به این خاطر که HTML و CSS نقطه شروع شما در دنیای کد و برنامه نویسی می باشند. اگر به برنامه نویسی علاقه مند باشید، احتمالا مانند بنده نویسنده، از یک برنامه نویس پرسیده اید که اگر بخواهم برنامه نویسی را از صفر شروع کنم، باید چه کاری انجام دهم؟ 90 درصد برنامه نویس ها، طراحان سایت و وب مستر ها یک جواب را به شما می دهند: “از HTML و CSS شروع کن که منطق کد را متوجه بشوی.” و بی راه هم نمی گویند. HTML و CSS با وجود کار های بزرگی که انجام می دهند، ساده هستند.

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

شمایل HTML به چه صورت می باشد؟

همانطور که به شما گفتیم HTML کارش ساختار بندی صفحه می باشد و ما نیز می خواهیم یک مورد از آن را برای شما نمایش بدهیم. پس طراحی سایت با HTML در طراحی سایت با html و CSS به این صورت می باشد:

<!DOCTYPE html>

<html>

<head>

    <title>

        Simple web Development Template

    </title>

</head>

<body>

    <nav class=”navbar background”>

        <ul class=”nav-list”>

            <div class=”logo”>

                <img src=”logo.png”>

            </div>

            <li><a href=”#web”>Web Technology</a></li>

            <li><a href=”#program”>C Programming</a></li>

            <li><a href=”#course”>Courses</a></li>

        </ul>

        <div class=”rightNav”>

            <input type=”text” name=”search” id=”search”>

            <button class=”btn btn-sm”>Search</button>

        </div>

    </nav>

    <section class=”firstsection”>

        <div class=”box-main”>

            <div class=”firstHalf”>

                <h1 class=”text-big” id=”web”>

                    Web Technology

                </h1>

                <p class=”text-small”>

                    HTML stands for HyperText Markup

                    Language. It is used to design

                    web pages using a markup language.

                    HTML is the combination of Hypertext

                    and Markup language. Hypertext

                    defines the link between the web

                    pages. A markup language is used

                    to define the text document within

                    tag which defines the structure of

                    web pages. HTML is a markup language

                    that is used by the browser to

                    manipulate text, images, and other

                    content to display it in the required

                    format.

                </p>

            </div>

        </div>

    </section>

    <section class=”secondsection”>

        <div class=”box-main”>

            <div class=”secondHalf”>

                <h1 class=”text-big” id=”program”>

                    C Programming

                </h1>

                <p class=”text-small”>

                    C is a procedural programming language.

                    It was initially developed by Dennis

                    Ritchie as a system programming

                    language to write operating system.

                    The main features of C language include

                    low-level access to memory, simple set

                    of keywords, and clean style, these

                    features make C language suitable for

                    system programming like operating system

                    or compiler development.

                </p>

            </div>

        </div>

    </section>

    <section class=”section”>

        <div class=”paras”>

            <h1 class=”sectionTag text-big”>Java</h1>

            <p class=”sectionSubTag text-small”>

                Java has been one of the most

                popular programming language

                for many years. Java is Object

                Oriented. However it is not

                considered as pure object oriented

                as it provides support for primitive

                data types (like int, char, etc) The

                Java codes are first compiled into byte

                code (machine independent code). Then

                the byte code is run on Java Virtual

                Machine (JVM) regardless of the

                underlying architecture.

            </p>

        </div>

        <div class=”thumbnail”>

            <img src=”img.png” alt=”laptop image”>

        </div>

    </section>

    <footer class=”background”>

        <p class=”text-footer”>

            Copyright ©-All rights are reserved

        </p>

    </footer>

</body>

</html>

 

به همین صورت شما می توانید ساختار یک سایت را در HTML پیاده سازی کنید و البته این موضوع را هم دقت کنید که داخل Tag ها باید آن چیزی باشد که شما در نظر دارید و چیزی که ما اینجا برای شما قرار داده ایم یک مثال است.

ساختار CSS به چه صورت است؟

برای اینکه متوجه ساختار CSS در طراحی سایت با html و CSS بشوید ما یک مثال هم از CSS برای شما آماده کرده ایم که به این صورت می باشد:

<style>

    * {

        margin: 0;

        padding: 0;

    }

    .navbar {

        display: flex;

        align-items: center;

        justify-content: center;

        position: sticky;

        top: 0;

        cursor: pointer;

    }

    .background {

        background: black;

        background-blend-mode: darken;

        background-size: cover;

    }

    .nav-list {

        width: 70%;

        display: flex;

        align-items: center;

    }

    .logo {

        display: flex;

        justify-content: center;

        align-items: center;

    }

    .logo img {

        width: 180px;

        border-radius: 50px;

    }

    .nav-list li {

        list-style: none;

        padding: 26px 30px;

    }

    .nav-list li a {

        text-decoration: none;

        color: white;

    }

    .nav-list li a:hover {

        color: grey;

    }

    .rightnav {

        width: 30%;

        text-align: right;

    }

    #search {

        padding: 5px;

        font-size: 17px;

        border: 2px solid grey;

        border-radius: 9px;

    }

    .firstsection {

        background-color: green;

        height: 400px;

    }

    .secondsection {

        background-color: blue;

        height: 400px;

    }

    .box-main {

        display: flex;

        justify-content: center;

        align-items: center;

        color: black;

        max-width: 80%;

        margin: auto;

        height: 80%;

    }

    .firsthalf {

        width: 100%;

        display: flex;

        flex-direction: column;

        justify-content: center;

    }

    .secondhalf {

        width: 30%;

    }

    .secondhalf img {

        width: 70%;

        border: 4px solid white;

        border-radius: 150px;

        display: block;

        margin: auto;

    }

    .text-big {

        font-family: ‘Piazzolla’, serif;

        font-weight: bold;

        font-size: 35px;

    }

    .text-small {

        font-size: 18px;

    }

    .btn {

        padding: 8px 20px;

        margin: 7px 0;

        border: 2px solid white;

        border-radius: 8px;

        background: none;

        color: white;

        cursor: pointer;

    }

    .btn-sm {

        padding: 6px 10px;

        vertical-align: middle;

    }

    .section {

        height: 400px;

        display: flex;

        align-items: center;

        justify-content: center;

        max-width: 90%;

        margin: auto;

    }

    .section-Left {

        flex-direction: row-reverse;

    }

    .paras {

        padding: 0px 65px;

    }

    .thumbnail img {

        width: 250px;

        border: 2px solid black;

        border-radius: 26px;

        margin-top: 19px;

    }

    .center {

        text-align: center;

    }

    .text-footer {

        text-align: center;

        padding: 30px 0;

        font-family: ‘Ubuntu’, sans-serif;

        display: flex;

        justify-content: center;

        color: white;

    }

</style>

سخن پایانی

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

شاید دوست داشته باشید بدانید

نظرات شما (0 comments)

0 Comments

ارسال نظر

نشانی ایمیل شما منتشر نخواهد شد.