آموزش تگ footer در html
تگ footer در html
فهرست موضوعات در این آموزش
تگ footer برای ایجاد پابرگ یک صفحه وب، یا بخشی از یک صفحه وب استفاده میشود. یعنی چه بخواهیم فوتر اصلی وبسایت را ایجاد کنیم و چه بخواهیم فوتر بخشی از یک وبسایت را ایجاد کنیم باید از تگ footer استفاده کنیم.
تگ footer
تگ footer که از اسمشم مشخصه چیه! تگی است که ما با استفاده از اون میتونیم ( فوتر یا Footer ) یک بخش خاص از صفحه یا هم کل صفحه رو مشخص کنیم.
اینو دیگه خودتونم میدونید ، به پایینی ترین بخش یک تگ یا هم کل صفحه فوتر گفته میشه، مثلا الان همینجا تو سایت فری لرن، پایین سایت میشه فوتر تموم شد رفت.
در HTML خب ما تگ های مختلفی داریم و هرکدوم هم برای کار خاصی استفاده میشه، مثلا تگ header برای ایجاد کردن قسمت بالایی یا هم هدر استفاده میشه یا مثلا تگ footer برای ایجاد کردن بخش پایینی یا هم فوتر استفاده میشه.
آموزش استفاده از تگ footer
تگ footer در کنار تگ هایی مثل تگ header ، تگ article ، تگ section ، تگ nav ، تگ aside ، تگ details و تگ summary جهت ایجاد ساختار و طرحبندی حرفه ای برای محتوای سایت استفاده میشود.
این تگ در کنار تگ های فوق در اصل خاصیت معناگرایانه یا Semantic داشته و برای رتبه بندی در موتورهای جستجو دارای اهمیت زیادی می باشند.
از این تگ جهت ایجاد پانویس در صفحه وب و یا برای یک بخش دلخواه استفاده میشود.
در این تگ اطلاعاتی از قبیل اطلاعات مربوط به نویسنده ، اطلاعات مربوط به حق کپی رایت ، اطلاعات چاپ ، بازگشت به بالای صفحه ، لینک اسناد مرتبط با صفحه فعلی ، نقشه سایت و لینک ارتباط با ما را قرار می دهند.
شما میتوانید از چندین تگ footer در صفحه وب استفاده کنید.
نکته مهمی که باید در زمان استفاده از این تگ بدانید این است که جهت وارد کردن اطلاعات مربوط به تماس در این تگ ، باید این اطلاعات را درون تگ address قرار دهید.
نکته مهم بعدی که در زمان کار با این تگ بابد بدانیم این است که از این تگ می‌توانیم درون یک تگ header یا حتی تگ footer دیگر استفاده کنیم ، اما نباید درون این تگ از یک تگ header استفاده نماییم.
یک مثال برای استفاده از تگ footer
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>پاسخ وردپرس مرجع آموزش html</title> </head> <body> <header> <h1>آموزش طراحی وب حرفه ای در پاسخ وردپرس</h1> </header> <article class="test-style"> <h1>آموزش html</h1> <article class="replywp-style"> <h2>طراحی قالب وردپرس</h2> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, dignissimos. </p> </article> <article class="replywp-style"> <h2>طراحی قالب حرفه ای html css </h2> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam repellat ad velit sint. Beatae, maxime? </p> </article> </article> <br /> <footer> <p> تمامی حقوق وب سایت برای پاسخ وردپرس محفوظ می باشد ، کپی برداری و انتشار مطالب با ذکر لینک منبع مجاز است.<br /> <a href="https://replywp.com">درباره ما</a> <br /> <a href="https://replywp.com">تماس با ما</a> </p> </footer> </body> </html> |
استایل مورد نظر در صورت نیاز برای زیبا سازی
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
.test-style { margin: 0; padding: 5px; background-color: #00d8fb; } .test-style > h1, .replywp-style { margin: 10px; padding: 5px; } .replywp-style { background: white; } .replywp-style > h2, p { margin: 4px; font-size: 90%; } footer { text-align: center; padding: 3px; background-color: rgb(0 216 251 / 56%); color: rgb(44 44 43); } |
برای نصب نرم افزار برای کد نویسی html از لینک زیر استفاده فرمایید.
آموزش نرم افزار های مورد نیاز طراحی وب سایت
در صورت که به طراحی وب آشنایی ندارید میتوانید از آموزش زیر استفاده فرمایید .
در صورت که میخواهید به صورت حرفه ای طراحی وب را فرا بگیرید از لینک زیر استفاده فرمایید .
آموزش css html آموزش HTML5 CSS3
در یافت تمام جلسات آموزش مرحله به مرحله html از لینک زیر استفاده فرمایید.
هنوز بررسی‌ای ثبت نشده است.