آموزش ساخت هدر و فوتر با HTML و CSS

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

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

اهمیت فوتر در وب سایت

فوتر نه تنها از نظر زیبایی اهمیت دارد بلکه کاربردهای مختلفی نیز دارد. از مهمترین مزایای داشتن یک فوتر خوب عبارتند از:

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

معرفی مفاهیم HTML و CSS

قبل از اینکه بخواهیم ساخت فوتر را آغاز کنیم بهتر است بدانیم فوتر بر پایه چه زبانی ساخته می‌شود. برای ساخت فوتر لازم است با دو زبان پایه وب یعنی HTML و CSS آشنا باشید. HTML مخفف HyperText Markup Language است و برای ساختاردهی محتوای وب سایت استفاده می شود. CSS مخفف Cascading Style Sheets است و برای استایل دهی به عناصر HTML و طراحی ظاهری وب سایت استفاده می شود.

به صورت کلی HTML بدنه و اسکلت وب سایت است و CSS وظیفه استایل دهی به این بدنه را بر عهده دارد. دقیقا مانند بدن انسان. اسکلت بدن انسان به مثابه HTML و CSS مانند پوست و گوشت بدن انسان.

ساختار پایه فوتر

برای ساختن فوتر، ابتدا یک بخش div با استفاده از تگ div در انتهای کد HTML صفحه خود ایجاد کنید. در باید ID خاصی را برای انتخاب کنید که در بخش استایل دهی از همین نام استفاده کنید.

<div id=”footer”> <div/>

افزودن عناصر جدید به فوتر

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

<div id=”footer”>

               Enter your Code Here

 </div>

درج لوگو در فوتر

برای درج لوگو در فوتر خود باید از تگ img استفاده کنید.

<img  src=”URl” alt=”width:”150”>

• در قسمت URL باید مسیر یا لینک عکس خود را وارد کنید.
• با ویژگی های alt و width می توانید متن جایگزین و عرض لوگو خود را تعیین کنید.

درج شبکه های اجتماعی در فوتر

لینک شبکه‌های اجتماعی به مخاطبان وب سایت شما کمک می کند تا بتوانند شما را در شبکه‌های اجتماعی دیگر پیدا کنند و بتوانند با شما در ارتباط باشند. برای اضافه کردن لینک شبکه های اجتماعی به فوتر خود، می توانید از تگ a و li به همراه آیکون های آن استفاده کنید. (اضافه کردن آیکون ها نیز با استفاده از تگ Img خواهد بود)

<ul class=”social-links”>

<li><a href=”#”><i class=”fab fa-facebook-f”></i></a></li>

<li><a href=”#”><i class=”fab fa-twitter”></i></a></li>

<li><a href=”#”><i class=”fab fa-instagram”></i></a></li>

</ul>

• در داخل بخش div فوتر، یک لیست بی نظم (ul) که با تگی به همین اسم تولید می شود.
• برای هر شبکه اجتماعی یک آیتم لیست با استفاده از تگ li ایجاد کنید.
• در داخل هر آیتم لیست، یک تگ a با خصوصیت href وجود دارد که به آدرس همان اشاره دارد. شما در این قسمت باید Url شبکه اجتماعی موردنظرتان را وارد کنید.
• در داخل تگ a می‌توانید از آیکون شبکه اجتماعی مربوطه استفاده کنید.

درج اطلاعات تماس و آدرس

برای نمایش اطلاعات تماس می توانید به ترتیب از تگ های p و address استفاده کنید.

<p>اطلاعات تماس</p>

<address>

  ایمیل: <a href=”mailto:info@example.com”>info@example.com</a><br>

  تلفن: 123-456-7890<br>

  آدرس: خیابان آزادی، تهران، ایران

</address>

دوره آموزش HTML و CSS

روز و ساعات برگزاری : یکشنبه ها ساعت 10 الی 12

هزینه : 2,000,000 تومان

طول آموزش : 24:00 ساعت

مشاهده و ثبت نام در دوره

قرار دادن کپی رایت در فوتر با HTML و CSS

کپی رایت یکی از بخش های مهم هر وب سایتی است که اطلاعات مربوط به مالکیت و یا حق چاپ ومحتوا را ارائه می دهد. برای قرار دادن بخش کپی رایت در فوتر وب سایت خود می توانید از تگ p  استفاده کنید. میتوانید سال، نماد کپی رایت را به تگ خود اضافه کنید.

<p>©2024 DARKOOB</p>

استایل دهی به فوتر با CSS  

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

1. موقعیت یابی:

• Position: با استفاده از این خصوصیت در CSS می توانید موقعیت فوتر در صحفه تنظیم کنید. این attribute برای خود property های خاص دارد که بتوانید آن را با توجه به نیاز خود شخصی سازی کنید.
• Static: فوتر در محل پیش فرض حفظ خواهد شد.
• Fixied: فوتر در پایین صفحه ثابت شده و با اسکرول کردن فوتر حرکت نمی کند.
• Absoulute: فاصله فوتر را می توانید با اختیار کامل از چهار جهت اصلی Top ,Left, Right, Bottom تنظیم کنید.

مثال: در این مثال فاصله فوتر از پایین صفر شده است.

#footer {

  position: fixed;

  bottom: 0;

  width: 100%;

}

2. رنگ و پس زمینه:

• background-color: با استفاده از این خصوصیت می توانید رنگ پس زمینه را فوتر را تغییر دهید. که فرمت های متفاوتی دارد. (rgb ,#hex ,rgba)
• color: با این خصوصیت می توانید رنگ متن را عوض کنید.

مثال:

#footer {

  background-color: #333;

  color: #fff;

}

3. قالب بندی متن:

• Font-family : با استفاده از این خصویت می توانید فونت مورد نظر خود را روی متن اعمال کنید.
• Font-size : با این خصوصیت اندازه فونت متن فوتر تنظیم می‌شود.
• Font-weight: با این خصوصیت وزن یا ضخامت متن را تنظیم می‌کنید. (normal,bold,extrabold)
• Line-height : با این خصوصیت می توانید فاصله بین خطوط متن فوتر را تنظیم کنید.
• Text-align: با استفاده از این خصوصیت می توانید جهت چیدمان متن فوتر را در سمت چپ یا راست یا Justify قرار دهید.

مثال:

#footer h2 {

  font-family: Arial, sans-serif;

  font-size: 18px;

  font-weight: bold;

  text-align: center;

}

4. فاصله گذاری:

• Margin: با این خصوصیت شما می توانید فاصله بیرونی را تنظیم کنید. منظور از فاصله بیرونی محتوا همان فاصله چهار جهت Top ,Left, Right, Bottom با بیرون از خود است. با چنین ویژگی شما قادر خواهید بود فاصله محتوای فوتر و لبه های آن را تنظیم کنید.
• padding: تغییر فاصله داخلی Top ,Left, Right, Bottom بین محتوای فوتر و لبه های آن.

مثال:

#footer {

  padding: 20px;

}

افکت های بصری

• Border: با استفاده از چنین خصوصیتی در CSS می توانید یک حاشیه دور فوتر خود اضافه کنید. تنظیمات داخل آن نیز قابلیت تغییر داد. مانند ضخامت خط، نوع خط و رنگ آن.
• Box-shadow: با این خصوصیت می توانید دور فوتر خود یک سایه اضافه کنید. تنظیمات داخلی چنین ویژگی شامل شدت سایه، پراکندگی سایه و رنگ آن است.
• Border-radius: با این ویزگی می توانید گوشه های پیکسل را هر مقدار که بخواهید گرد کنید.

#footer {

  border: 1px solid #ccc;

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

  border-radius: 5px;

}

تنظیمات ساخت فوتر با  HTML CSS به صورت ریسپانسیو

برای ساخت فوتر ریسپانسیو با CSS روش مختلفی را می‌توان پیاده سازی کرد. در این بخش، به دو روش رایج و کابردی خواهیم پرداخت:

روش اول: استفاده از Media queries

ابزارهایی قدرتمند در CSS هستند که به شما این امکان را داده تا استایل سازی‌های وب سایت خود را متناسب با اندازه های نمایگشرهای مختلف  تنظیم کنید. هر قسمتی که در صورت افزایش یا کاهش سایز نیاز به تغییر دارد (نقطه شکست) یک Media queries  نیاز خواهد داشت.

شما این اختیار را دارید که هر چقدر بخواهید Media queries تعیین کنید که آن بستگی به نیازتان دارد. در نقاط شکست  نیز به تغییر استایل فوتر نیاز خواهید داشت. به عنوان مثال، برای استایل دهی به فوتر در صفحه نمایش های کوچکتر از 768 پیکسل می توانید از این media query استفاده کنید.

@media (max-width: 768px)

{/*استایل های فوتر برای صفحه نمایش های کوچکتر*/}

مثال کامل:

HTML

<div id=”footer”>

<h2>نام وب سایت شما</h2>

<p>&copy; 2024 نام وب سایت شما</p>

</div>

CSS

#footer {

   background-color: #333; 

color: #fff;

  text-align: center;

  padding: 20px;

  position: fixed;

  bottom: 0;  width: 100%;}

 #footer h2 { 

font-family: Arial, sans-serif;

  font-size: 18px;

  font-weight: bold;}

 #footer p {

  margin-bottom: 0;

} @media (max-width: 768px) { 

#footer h2 {  

  font-size: 14px;

  } 

#footer p { 

   display: none;  }

}

• در این کد از media queries برای تنظیم استایل فوتر برای نمایشگرهای کوچکتر استفاده شده است. که این سایز معمولا تلفن های همراه را شامل می شود.
• برای ظاهر بهتر متن در نمایشگرهای کوچک، اندازه فونت به 14 پیکسل کاهش پیدا می‌کند.
• برای اینکه در فضا صرفه جویی شود، پاراگراف کپی رایت در نمایشگرهای کوچکتر پنهان می‌شود.

روش دوم: استفاده از flexbox

• Flexbox یک روش جدید برای چیدمان عناصر صفحات وب است که به ما این امکان را می دهد تا فوتر خود را به صورت منعطف تر طراحی کنیم. در این روش عناصر را در یک Container قرار می‌دهد که یا به صورت ردیفی یا ستونی مرتب می شود. در این روش شما می توانید عناصر را به صورت خودکار با توجه به فضای موجود توزیع کنید.
• Flexbox کاربردهای متنوعی در طراحی وب سایت های مدرن دارد.
• ساخت گالری تصاویر مدرن و ریسپانسیو
• طراحی منوهای ناوبری منعطف با تغییر سایز و…
• ساخت فرم های چند ستونی
• چیدمان داشبورد های کاربر
• و….

برای مثال

HTML

<div class=”container“>

  <div class=”item”>عنصر 1</div>

  <div class=”item”>عنصر 2</div>

  <div class=”item”>عنصر 3</div></div>

CSS

.container { 

display: flex; /* فعال کردن Flexbox */ 

flex-direction: row; /* چیدمان ردیفی */ 

justify-content: space-between; /* توزیع فضای بین عناصر */ 

align-items: center; /* تراز عمودی عناصر */}

.item {

flex: 1; /* توزیع فضای مساوی بین عناصر */ 

padding: 10px; 

border: 1px solid #ccc;}

در این مثال Flex box چیدمان عناصر را به صورت ردیفی انجام می‌دهد.

• display: flex; : در این قسمت برای Container  ّFlexbox را فعال کردیم.  
• flex-direction: row; : عناصر را در یک ردیف مرتب می کند. عناصر را در یک ردیف مرتب می کند.
• justify-content: space-between; : بافعال کردن این ویژگی فضای بین عناصر به صورت مساوی تقسیم خواهد شد.
• align-items: center; : عناصر به صورت عمودی در وسط Container تراز خواهد شد.  عناصر را به صورت عمودی در وسط container تراز می کند.
• flex: 1; : با فعالسازی این ویژگی هر عنصر فضایی مساوی را در Container خواهد داشت.