آموزش کامل تگ header در html – جلسه 7 - آموزش طراحی و سئو سایت

Hrader در html چیست؟

Hrader در html عنصری است که در بالای صفحه وب قرار دارد. هدر اولین جایی است که کاربران هنگام دسترسی به وب سایت شما می بینند. بنابراین باید هدر را با دقت و واضح طراحی کنید تا تاثیر خوبی داشته باشد و پیام مورد نظر خود را به راحتی به کاربر منتقل کنید.

فهرست مطالب

در هدر، معمولاً عناصر زیر وجود دارد:

لوگوی وب سایت.
نوار پیمایش به پیوندهای مهم.
موتور جستجو برای اطلاعات در وب سایت ها.
معرفی مختصری از وب سایت.
دکمه های تماس برای اقدام مانند ثبت نام ایمیل…
تصاویری از محصولات محبوب در سایت.

تگ Hrader در html برای تعریف هدر یک سند یا یک بخش استفاده می شود و حاوی اطلاعات مربوط به عنوان سایت و عنوان محتوای مرتبط است. Hrader در html معمولاً حاوی عنوان بخش (یک عنصر h1-h6 یا یک عنصر <hgroup>) است. تگ <header> یک تگ جدید در HTML5 است و یک تگ کانتینری است، یعنی شامل یک تگ شروع، محتوا و تگ پایان است.محتویات موردنظر اینجا قرار می گیرد

ادامه مطلب تگ article در html

قدرت گرفته از افزونه نوشته‌های مرتبط هوشمند

ادامه مطلب آموزش ساخت منو nav و زیرمنو subnavبا html و css - جلسه 6

قدرت گرفته از افزونه نوشته‌های مرتبط هوشمند

ممکن است چندین عنصر <header> در یک سند وجود داشته باشد. این تگ را نمی توان در یکfooter، address یا دیگر عنصر <header> قرار داد.

تگ Hrader در صفحه

می توان تگ header را در تگ article نیز استفاده کردَ

نمایش کپی در حافظه

تگ Hrader در محتوا

نمایش کپی در حافظه

فیلم آموزش ایجاد تگ header در html

ایجاد تگ header در html

جهت ایجاد تگ header در html فایل header که قبلا ایجاد کرده ایم را باز کرده و تکه کد زیر را در آن ذخیره می کنیم.

هدف ما ایجاد هدر بالاست.

برای header یک id به نام mainHeader جهت دست رسی منحصر به فرد تعریف می کنیم.

نمایش کپی در حافظه

فیلم آموزش کول بندی تگ header در html

کول بندی تگ header در دسک تاپ و گوشی

ابتدا باید با استفاده از کول بندی های css اکسترنال اندازه هر جایگاه (لوگو-سرچ-منو-رسانه های اجتماعی) را مشخص کنیم.

کول بندی header در دسک تاپ

کول بندی header مبایل

کدهای زیر را وارد کنید

نمایش کپی در حافظه

یک کلاس continer که قبلا در فایل css اکسترنال ایجاد کرده ایم به تگ header اضافه می کنیم

نمایش کپی در حافظه

فیلم آموزشی اضافه کردن لوگو – سرچ باکس – منو – رسانه های اجتماعی

اضافه کردن لوگو header در html

جهت اضافه کردن لوگو header در html از یک تگ img استفاده می کنیم.برای پوش بندی عکس های سایت ابتدا یک پوشه به نام image در روت هاست یا لوکال هاست مان ایجاد می کنیم و لوگو سایت را در آن آپلود یا کپی می کنیم سپس دستور زیر را به ستون مربوط به لوگی سایت اضافه می کنیم

نکته:

دقت کنید که ممکن است اسم لوگوی شما با logo1.webp متفاوت باشد

نمایش کپی در حافظه

اضافه کردن فرم search به header در html

فرم ها در html جهت گرفتن داده از کاربر و بازگشت اطلاعات به آن در وب استفاده می شوند که در آموزش مربوط به ajax و php به طور مفصل به آنها خواهیم پرداخت.

لذا برای داشتن فرم جستجو تگ های زیر را به قسمت مربوط به search در header اضافه کنید.

ادامه مطلب آموزش بررسی نسخه PHP - سئوکان

قدرت گرفته از افزونه نوشته‌های مرتبط هوشمند

نمایش کپی در حافظه

اضافه کردن منو به header در html

منوی را که در جلسه مربوط به ایجاد نوار منو در html ,css استفاده کرده ایم را در قسمت menu کپی میکنیم

ادامه مطلب آموزش تگ aside در html5 - جلسه 8

قدرت گرفته از افزونه نوشته‌های مرتبط هوشمند

نمایش کپی در حافظه

<i id="icoMenu"  class="fa fa-reorder"></i>
            <nav class=" menu" >
                <ul>
                    <li class="subNav" ><a href="#" >خانه</a></li>
                    <li class="subNav"><a href="#">علمی</a>
                        <ul class="subNav-content">
                            <li><a href="#">ریاضیات</a> </li>
                            <li><a href="#">ادبیات</a> </li>
                        </ul>
                    </li>
                    <li class="subNav"><a href="#">فرهنگی</a></li>
                    <li class="subNav"><a href="#">هنری</a></li>
                    <li class="subNav">
                        <a href="#" >ورزشی</a>
                        <ul class="subNav-content ">
                            <li><a href="#">فوتبال</a> </li>
                            <li><a href="#">کشتی</a> </li>
                        </ul>
                    </li>
                    <li class="subNav"><a href="#">خبر</a></li>
                    <li class="subNav"><a href="#">بیوگرافی</a></li>
                </ul>
            </nav>

اضافه کردن رسانه های اجتماعی به header در html

رسانه های اجتماعی فعالیت کسب و کار شما در شبکه های اجتماعی را مشخص می کند که موتورهای جستجو آن را به عنوان یک فاکتور مهم در رنک دهی مورد استفاده قرار می دهند.

پس کد های زیر را به قسمت social media اضافه می کنیم

نمایش کپی در حافظه

نتیجه تا این لحضه باید به صورت زیر باشد

در ادامه تکه کد css زیر را از style اینترنال حذف می کنیم.

توجه:این کد فقط جهت آزمایش قرار داده شده است.

نمایش کپی در حافظه

فیلم آموزش استفاده از فونت آیکون font awesome 5 در صفحات وب

آموزش استفاده از فونت آیکون font awesome 5 در صفحات وب

استفاده از cdn

روش ساده و سریع استفاده از cdn مربوط به font awesome است لینک دسترسی به آخرین ورژن font awesome

نمایش کپی در حافظه

این لینک cdn را به تگ head اضافه می منیم

استفاده از font awesom6 دانلود شده

باید توجه داشت استفاده از cdn به جهت لود از سایت مرجع ممکن است با خطا مشکل شود و یا سرعت لود شدن سایت را بالا ببرد پس بعضی افاد ترجیح می دهند تا فایل مربوط به font awesome را دانلود کردن و اکسترک کنند و با استفاده از لینک رد تگ هدر از آن استفاده کنند

ابتدا به لینک بالا مراحعه کنید و فایل مربوطه را دانلود کنید
فایل دانلود شده را در پوشه js که در روت هاست یا لو کال هاست ایجاد کرده اید اکسترک کنید
آدرس های زیر را به تگ head خود اضافه کنید

نمایش کپی در حافظه

اضافه کردن css به header در مدیای بالاتر از 1200 پیکسل

فیلم اضافه کردن css لوگو به header در مدیای بالاتر از 1200 پیکسل

اضافه کردن css لوگو به header در مدیای بالاتر از 1200 پیکسل

نمایش کپی در حافظه

فیلم اضافه کردن css سرچ باکس به header در مدیای بالاتر از 1200 پیکسل

اضافه کردن css سرچ باکس به header در مدیای بالاتر از 1200 پیکسل

نمایش کپی در حافظه

فیلم اضافه کردن css سوشیال مدیا به header در مدیای بالاتر از 1200 پیکسل

اضافه کردن css سوشیال مدیا به header در مدیای بالاتر از 1200 پیکسل

نمایش کپی در حافظه

فیلم اضافه کردن css به header در مدیای گوشی افقی

کد css مربوط به مدیای بالاتر از 1200

ادامه مطلب آموزش ساخت فرم لاگین با html و css - جلسه 11

قدرت گرفته از افزونه نوشته‌های مرتبط هوشمند

نمایش کپی در حافظه

@media (min-width: 576px) and (max-width: 767.98px) {
        .subNav{float: none}
        .subNav-content{display: none;position: relative}
        .menu a{background: #353b48;display: block;width: 100%;color: white;
            padding: 5px 5px;font-size: 20px;border-bottom: 2px solid #8D9A84}
        .menu a:hover{background:#8D9A84}
        .subNav:hover .subNav-content{display: block}
        .menu li{list-style: none}
        .menu{display: none;position:relative}
        #icoMenu{display: block;font-size: 30px;color: white;margin-right: 20px}
        .menu{position: fixed;width: 96%;margin-top: 10px}
        .menu a{background: #353b48;display: block;}
        #mainHeader{background: #353b48;border-radius: 5px}
        #logSit img{width: 60px;margin-top: 10px}
        .serBox{margin-top: 20px}
        .serBox input{width: 350px;height: 30px;font-size: 16px;}
        .serBox button{width: 40px;height: 30px;font-size: 16px;}
        .socMed li{float: left;list-style: none}
        .socMed a{color: white;font-size: 20px;margin-left: 20px}
        .socMed a:hover{color: red;}
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://seokan.ir/creating-a-registration-form-with-php/" target="_blank" rel="nofollow" class="IRPP_minimalist"><style> .IRPP_minimalist { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#ECF0F1; border:0!important; border-left:4px solid #7F8C8D!important; text-decoration:none; } .IRPP_minimalist:active, .IRPP_minimalist:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .IRPP_minimalist { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .IRPP_minimalist .ctaText { font-weight:bold; color:#16A085; text-decoration:none; font-size: 16px;float:left; } .IRPP_minimalist .postTitle { color:#34495E; text-decoration: underline!important; font-size: 16px; } .IRPP_minimalist:hover .postTitle { text-decoration: underline!important; } </style><div style="padding-left:1em; padding-right:1em;"><span class="ctaText">ادامه مطلب</span>  <span class="postTitle">آموزش ساخت فرم ثبت‌ نام با PHP- سئوکان</span></div></a><div style="width:100%; text-align:left; font-weight:normal;"><div style="font-size:10px;"><span class="poweredByText">قدرت گرفته از</span> <a rel="nofollow" style="font-weight:bold;" href="https://mihannevis.com/inline-related-posts" target="_blank">افزونه نوشته‌های مرتبط هوشمند</a></div></div><div style="clear:both"></div></div>
    }

اضافه کردن css به header در html

در قدم اول خط زیر که فقط جهت تفهیم مثال بود را حذف کنید.

نمایش کپی در حافظه

در ادامه تنظیمات css مربوط به header در html که بیشتر آنها در جلسات قبلی ارائه شده و همچنین تنظیمات جدید را به استایل اینترنال اضافه کنید.

نمایش کپی در حافظه

@media (min-width: 1200px) {
        .subNav{float: right;position: relative}
        .subNav:hover .subNav-content{display: block}
        .subNav-content{display: none;position: absolute}
        .menu a{font-size: 35px;padding: 10px 14px;text-decoration: none;color: white;
            display: block;margin: 0px 0px 0px 10px}
        .menu li{list-style: none}
        .menu a:hover{color: #ff253a}
        .subNav-content a{background: #353b48}
        #icoMenu{display: none}
        .menu{display: block}
   #mainHeader{background: #353b48;border-radius: 5px}
   #logSit img{width: 90px;margin-top: 10px}
   .serBox{margin-top: 10px}
   .serBox input{width: 60%;height: 45px;font-size: 20px;font-weight: bold}
   .serBox button{width: 5%;height: 45px;font-size: 20px;font-weight: bold}
   .socMed{position: relative}
   .socMed li{float: left;list-style: none}
   .socMed a{color: white;font-size: 30px;margin-left: 30px}
   .socMed a:hover{color: red;}
    }
    @media (min-width: 576px) and (max-width: 767.98px) {
        .subNav{float: none}
        .subNav-content{display: none;position: relative}
        .menu a{background: #353b48;display: block;width: 100%;color: white;
            padding: 5px 5px;font-size: 20px;border-bottom: 2px solid #8D9A84}
        .menu a:hover{background:#8D9A84}
        .subNav:hover .subNav-content{display: block}
        .menu li{list-style: none}
        .menu{display: none;position:relative}
        #icoMenu{display: block;font-size: 30px;color: white;margin-right: 20px}
        .menu{position: fixed;width: 96%;margin-top: 10px}
        .menu a{background: #353b48;display: block;}
        #mainHeader{background: #353b48;border-radius: 5px}
        #logSit img{width: 60px;margin-top: 10px}
        .serBox{margin-top: 20px}
        .serBox input{width: 350px;height: 30px;font-size: 16px;}
        .serBox button{width: 40px;height: 30px;font-size: 16px;}
        .socMed li{float: left;list-style: none}
        .socMed a{color: white;font-size: 20px;margin-left: 20px}
        .socMed a:hover{color: red;}
    }

اضافه کردن کد jquery

کد زیر را به انتهای فایل header خود اضافه می کنیم جهت دریافت رویداد کلیک و تغییر حالت منو در مدیا های مختلف

نمایش کپی در حافظه

دانلود فایل منبع ایجاد header در html5

دانلود منبع

آموزش کامل تگ header در html – جلسه 7

Hrader در html چیست؟

در هدر، معمولاً عناصر زیر وجود دارد:

تگ Hrader در صفحه

تگ Hrader در محتوا

فیلم آموزش ایجاد تگ header در html

ایجاد تگ header در html

فیلم آموزش کول بندی تگ header در html