خواندن ۴ دقیقه·۸ ماه پیش

آموزش طراحی وب: صفحه نتایج گوگل با HTML و CSS

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

ساخت صفحه نتایج گوگل با HTML و CSS

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

مرحله ۱ ساختار اچ‌تی‌ام‌ال

ابتدا باید ساختار HTML صفحه را ایجاد کنیم. کد زیر را در یک فایل HTML جدید ذخیره کنید:

<!DOCTYPE html>
<html>
<head>
  <title>صفحه نتایج جستجو</title>
  <style>
    /* استایل های خود را اینجا قرار دهید */
  </style>
</head>
<body>
  </body>
</html>

مرحله ۲: اضافه کردن استایل

در ادامه، باید استایل های CSS را برای طراحی صفحه نتایج جستجو اضافه کنیم. کد زیر را به بخش style تگ head اضافه کنید:

body {
            font-family: Arial, sans-serif;
        }

        #header {

            display: flex;
            flex-direction: row;
            align-items: center;
        }

        #logo {

            margin: 20px 20px;
            width: 92px;
            height: 30px;
        }

        #searchbox {

            color: #4285f4;
            fill: currentColor;
            max-width:500px;
            width: 60%;
            max-height: 35px;
            border-radius: 25px;
            box-shadow: 0 0 1px 1px #e2e2e2;
        }

        #searchbox svg {
            display: block;
            position: relative;
            float: right;
            width: 20px;
            height: 20px;
            margin: 8px 15px 0 5px;
        }

        #search-text {
            color: black;
            position: relative;
            display: block;
            float: right;
            bottom: 8px;
            margin: 0 15px 0 30px;
        }

        #search-text::before {
            float: right;
            color: #b9b6b6;
            position: relative;
            z-index: 5;
            content: '|';
            font-size: 20px;
            width: 5px;
            height: 16px;
            top: 12px;
            right: -15px
        }

        #menu {
            color: gray;
            position: relative;
            left: 10%;
            top: -8px;
            width: 100%;
            display: flex;
            flex-direction: row;
            font-size: 12px;
            user-select: none;
        }

        #menu a {
            text-decoration: none;
            color: unset;
        }

        #menu a:hover {
            color: #4285f4;
        }

        #menu svg {
            width: 14px;
            fill: currentColor;
            margin-bottom: 5px;
        }

        #menu p {
            margin-right: 16px;
            padding-bottom: 5px;
        }

        #menu-line {
            display: block;
            content: '';
            position: relative;
            background-color: gray;
            opacity: 0.3;
            width: 100%;
            height: 1px;
            bottom: 20px;
        }

        #results {
            user-select: none;
            position: relative;
            left: 10%;
            width:90%
        }

        .result{
            position: relative;
            margin-bottom: -10px;
        }

        .top {
            display: flex;
            align-items: center;
        }

        .fav svg {
            width: 25px;
            opacity: 0.7;
        }

        .website {
            margin-left: 10px;
            color: black;
            line-height: 5px;
            font-size: 12px;
        }

        .title {
            left:2%;
            position: relative;
            font-size: 20px;
            top: -20px;
            text-decoration: none;
        }

        .title a,.title a:visited {
            text-decoration: none;
            color:blue
        }

        .title a:hover {
            text-decoration: underline;
        }

        .desc {
            color: rgb(78, 78, 78);
            font-size: 13px;
            position: relative;
            top: -40px;
            direction: rtl;
            left:2%;
        }

مرحله ۳: اضافه کردن محتوای نتایج جستجو

در نهایت، باید محتوای نتایج جستجو را اضافه کنید. کد زیر را به بخش body اضافه کنید:

<div id=&quotheader&quot>
            <img id=&quotlogo&quot src=&quotlogo.png&quot />
            <div id=&quotsearchbox&quot>
                <svg focusable=&quotfalse&quot xmlns=&quothttp://www.w3.org/2000/svg&quot viewBox=&quot0 0 24 24&quot>
                    <path
                        d=&quotM15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z&quot>
                    </path>
                </svg>
                <div id=&quotsearch-text&quot>
                    <p>افزایش بازدید وبسایت</p>
                </div>
            </div>
        </div>

        <div id=&quotmenu&quot>
            <a href=&quot#&quot><p style=&quotcolor:#4285f4; border-bottom:2px solid #4285f4;&quot>All</p></a>
            <a href=&quot#&quot><p>Images</p></a>
            <a href=&quot#&quot><p>Shopping</p></a>
            <a href=&quot#&quot><p>Videos</p></a>
            <a href=&quot#&quot><p>News</p></a>
            <svg focusable=&quotfalse&quot xmlns=&quothttp://www.w3.org/2000/svg&quot viewBox=&quot0 0 24 24&quot>
                <path
                    d=&quotM12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z&quot>
                </path>
            </svg>
            <a href=&quot#&quot><p>More</p></a>
        </div>

        <span id=&quotmenu-line&quot></span>

        <div id=&quotresults&quot>
            <div class=&quotresult&quot>
                <span class=&quottop&quot>
                    <span class=&quotfav&quot>
                        <svg focusable=&quotfalse&quot xmlns=&quothttp://www.w3.org/2000/svg&quot viewBox=&quot0 0 24 24&quot>
                            <path
                                d=&quotM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z&quot>
                            </path>
                        </svg>
                    </span>
                    <span class=&quotwebsite&quot>
                        <p>بهبود رتبه گوگل - گلدراش | جنون طلا</p>
                        <p style=&quotcolor:rgb(78, 78, 78)&quot>https://goldrush.ir > بهبود سئو</p>
                    </span>
                </span>
                <span class=&quottitle&quot><a href=&quot#&quot>
                        <p>بهبود رتبه‌ی وبسایت در موتورهای جستجو</p>
                    </a></span>
                <span class=&quotdesc&quot>با استفاده از خدمات شتاب‌دهنده‌ی گلدراش، رتبه‌ی وبسایتتان را در گوگل و سایر موتورهای جستجو افزایش دهید و به جایگاه مورد نظرتان برسید...</span>
            </div>

توضیح کد اچ‌تی‌ام‌ال صفحه نتایج جستجوی گوگل

آخرین کد ارائه شده در قسمت قبل،‌ از سه بخش اصلی تشکیل شده است:

قسمت هدر با آیدی header: این قسمت حاوی لوگوی گوگل و جعبه متن است.
منو با آیدی menu: این قسمت حاوی منوی زیر جعبه متن است. شما می‌توانید این قسمت را با افزودن گزینه‌های دیگر ویرایش کنید.
بخش نتایج جستجو با آیدی results: این قسمتی است که محتوای جستجو را نمایش می‌دهد. هر نتیجه‌ی جستجو درون تگ div با کلاس result قرار گرفته است. برای افزودن موارد دیگر کافی است این تگ را کپی کنید.

توجه: این کد برای استفاده در صفحه شتاب‌دهنده وبسایت و شبکه‌های اجتماعی گلدراش طراجی شده‌است. با استفاده از شتاب‌دهنده‌ی ما می‌توانید بازدید وبسایت، وبلاگ، پیج اینستاگرام یا کانال یوتیوبتان را افزایش دهید.

اگر در مورد هر قسمت از این کد سوالی دارید، حتماً در بخش نظرات سوالتان را از ما بپرسید تا در اسرع وقت شما را راهنمایی کنیم.

طراحی وب html css برنامه نویسی

AIPersia

مقالاتی در مورد هوش مصنوعی، وب و کسب درآمد آنلاین

شاید از این پست‌ها خوشتان بیاید