اگر می‌خواهی عکسی را در یک صفحه‌ی وب قرار بدهی، تنها چیزی که لازم داری HTML است. اگر می‌خواهی عکسی را به‌عنوان پس‌زمینه‌ در یک صفحه‌ی وب قرار بدهی به HTML و همچنین CSS نیاز داری. HTML مخفف عبارت Hypertext Markup Language (زبان نشانه‌گذاری ابرمتن) و کدی است که به مرورگر می‌گوید چه چیزی را در صفحه‌ی وب نمایش بدهد.[۱] CSS مخفف عبارت Cascading Style Sheets (شیوه‌نامه‌ی آبشاری) است و برای تغییر ظاهر و طرح یک صفحه‌ی وب مورد استفاده قرار می‌گیرد.[۲] برای تنظیم عکس پس‌زمینه به یک تصویر که می‌خواهی در وب‌سایت خودت از آن استفاده کنی نیاز داری.

بخش 1 از 4:
تنظیم کردن فایل‌ها

  1. 1
    پوشه‌ای ایجاد کن و فایل HTML و تصویر پس‌زمینه‌ی مورد‌نظرت را داخل آن قرار بده. پوشه‌ای داخل کامپیوترت ایجاد کن و برای آن اسمی درنظر بگیر تا بتوانی بعداً آن را به‌راحتی پیدا کنی.
    • می‌توانی روی پوشه‌ات هر اسمی که می‌خواهی بگذاری ولی بهتر است هنگام کار کردن با HTML، خودت را به نامگذاری پوشه‌ها و فایل‌ها به‌صورت کلمات کوتاه، ساده و اسامی قابل تشخیص عادت بدهی.
  2. 2
    تصویر پس‌زمینه را در پوشه‌ی HTML قرار بده. تصویری که می‌خواهی از آن به‌عنوان پس‌زمینه استفاده کنی را در پوشه‌ی HTML قرار بده.
    • اگر خیلی نگران این نیستی که وب‌سایت تو در دستگاه‌های قدیمی‌تر و با ارتباط اینترنت کند‌‌تر خوب کار کند، می‌توانی با خیال راحت از عکس‌هایی که کیفیت بالایی دارند برای پس‌زمینه استفاده کنی. همچنین تصاویر ساده با الگو‌های سبک و تکراری، گزینه‌ی مناسبی برای عکس‌های پس‌زمینه هستند چرا‌که در‌صورت قرار گرفتن متن روی آن‌ها، متن به‌راحتی قابل خواندن است.

    نکته: اگر تصویر مناسبی برای این کار نداری می‌توانی یک تصویر پس‌زمینه‌ی رایگان را دانلود کنی. در‌صورت دانلود کردن عکس، آن را داخل پوشه‌ی HTML که ایجاد کرده‌ای قرار بده.

  3. 3
    یک ویرایشگر متن یا ویرایشگر HTML را باز کن. می‌توانی فایل HTML مورد‌نظرت را با استفاده از یک ویرایشگر ساده‌ی متن مثل NotePad در ویندوز یا TextEdit در مک ایجاد کنی. همچنین می‌توانی از ویرایشگرهای HTML که برپایه‌ی what-you-see-is-what-you-get (WYSIWYG) (آنچه که می‌بینی همان است که به‌دستت می‌رسد) مانند برنامه‌ی Adobe Dreamweaver استفاده کنی.
    • اگر از ویرایشگر‌های WYSIWYG استفاده می‌کنی، در شروع صفحه روی گزینه‌‌‌ای که برای باز کردن فایل HTML جدید است، کلیک کن.
  4. 4
    روی File کلیک کن. این گزینه داخل نوار منوی بالای صفحه قرار دارد.
  5. 5
    روی Save As (ذخیره به عنوان) در Notepad یا Save (ذخیره) در TextEdit کلیک کن. این گزینه در منوی فایل قرار دارد. اگر از کامپیوتر ویندوزی استفاده می‌کنی، روی Save As (ذخیره به عنوان) در منوی کشویی "File" کلیک کن. اگر از مک استفاده می‌کنی روی Save (ذخیره) در منوی کشویی کلیک کن.
  6. 6
    برای سند HTML خودت اسمی انتخاب کن. به‌طورکلی صفحه‌ی اول یک وب‌سایت، "index" (فهرست) نامیده می‌شود ولی تو می‌توانی هر اسمی که خواستی را برای آن انتخاب کنی. اسم موردنظرت را در کادر متنی کنار "File Name" (اسم فایل) بنویس.
  7. 7
    نوع فایل را به سند HTML تغیر بده. اگر از ویرایشگر WYSIWYG استفاده می‌کنی، فقط کافی است تا فایل را ذخیره کنی. ولی اگر برای ساختن HTML از NotePad یا TextEdit استفاده می‌کنی، مراحل زیر را برای ذخیره‌ی سند با قالب HTML دنبال کن.
    • در Notepad: افزونه‌ی فایل را که در انتهای نام فایل به‌صورت "txt." نوشته شده است به "html." تغییر بده.
    • در TextEdit: از منوی کشویی که در کنار "File Format" (قالب فایل) قرار دارد، Wep page (.html) را انتخاب کن.
  8. 8
    روی Save (ذخیره) کلیک کن. این گزینه در گوشه‌ی سمت راست و پایین پنجره قرار دارد. با انجام این کار سند متنی تو در قالب فایل HTML ذخیره خواهد شد.

بخش 2 از 4:
نوشتن فایل HTML

  1. 1
    کد <!DOCTYPE html> را در بالای فایل HTML تایپ کن. کد‌های HTML از تگ‌های باز و بسته ساخته شده‌اند. هر صفحه‌ی HTML که به‌درستی ساخته شده باشد، باید با <DOCTYPE html!> شروع شود. این کد به مرورگر وب می‌گوید که این فایل یک فایل HTML است.
  2. 2
    کد <!DOCTYPE html> را در خط بعدی تایپ کن. این کد، تگ آغازین HTML تو است. این کد به مرورگر وب می‌گوید که کد HTML از اینجا شروع می‌شود.
  3. 3
    کد <head> را در سطر بعدی تایپ کن. این کد، تگ آغازین قسمت Head (سرانداز) فایل HTML است. قسمت Head (سرانداز) شامل اطلاعاتی است که در مرورگر وب نمایش داده نمی‌شود. این قسمت شامل اطلاعاتی مانند عنوان صفحه و همچنین شیوه‌نامه‌ی آبشاری (CSS) است که ظاهر کد HTML را قالب‌بندی می‌کند.
  4. 4
    کد <title>Page Title</title> را تایپ کن. این کد HTML شامل عنوان صفحه‌ی وب تو است. تگ "<title>"، تگ آغازین کد HTML عنوان صفحه‌ است. تگ"<title/>" نیز تگ پایانی آن است. عبارت "Page Title" (عنوان صفحه) را با هر عنوانی که برای صفحه‌ی HTML انتخاب کرده‌ای جایگزین کن. این عنوان در زبانه‌ی مرورگر که در قسمت بالای مرورگر قرار دارد نمایش داده خواهد شد.
  5. 5
    کد <head/> را در سطر بعدی تایپ کن. این کد، تگی است که بخش head (سرانداز) سند HTML را می‌بندد. اگر می‌خواهی اطلاعات دیگر و استایل شیت‌ها یا همان شیوه‌نامه‌هایی را به سند HTML اضافه کنی، باید آن‌ها را بعد از تگ بازشونده "<head>" و قبل از تگ بسته شونده‌ی "<head/>" بنویسی.
  6. 6
    کد <body> را در سطر بعدی تایپ کن. این کد، تگ ابتدایی بخش body (بدنه‌) سند HTML تو است. بخش body (بدنه) جایی است که تمام عناصر بصری صفحه‎‌ی وب در آنجا قرار می‌گیرند. این عناصر شامل متن، تصاویر، دکمه‌ها و سایر عناصر‌ قابل مشاهده در صفحه‌ی وب هستند.
  7. 7
    کد <div style="background-image:url('[image url]');">را در سطر بعد تایپ کن. این تگ HTML، تصویر را به پس‌زمینه‌ی صفحه‌ی وب تو اضافه می‌کند. قسمت "[image url]" را با آدرس url یا آدرس محل قرارگفتن عکسی که می‌خواهی اضافه کنی جایگزین کن. این آدرس می‌تواند محل عکس بارگذاری شده در سرور آنلاین یا یک پوشه در کامپیوتر شخصی تو باشد. [۳]
    • همچنین می‌توانی تصویر پس‌زمینه را با استفاده از CSS تنظیم کنی.
    • وقتی به‌جای آدرس فایل یا URL عکس فقط از اسم فایل استفاده می‌کنی (به‌عنوان مثال، background-image: url("background.png"))، مرورگر وب پوشه‌ی صفحه‌ی‌‌ وب مورد‌نظر را برای پیدا کردن عکس جستجو می‌کند. اگر فایل عکس در پوشه‌ی دیگری در کامپیوترت باشد، باید آدرس کامل آن فایل را اضافه کنی.
  8. 8
    قسمت‌های دیگر سند HTML را تکمیل کن. اگر می‌خواهی عناصر دیگری مثل متن، عکس‌، ویدئو‌، لینک‌، دکمه‌ و غیره را به صفحه‌ی HTML خودت اضافه کنی، باید آن‌ها را در قسمت "Body" (بدنه‌ی) سند HTML وارد کنی.
  9. 9
    کد <body/> را در خط آخر بنویس. این کد، تگ انتهایی بخش body (بدنه‌ی) سند HTML تو است. وقتی‌که تمام عناصری که می‌خواهی در HTML باشند را وارد کردی، این تگ را به انتهای خط آخر اضافه کن.
  10. 10
    کد <html/> را در آخرین خط تایپ کن. این کد همان تگی است که با آن کل سند HTML بسته می‌شود. این تگ را در خط آخر اضافه کن.
  11. 11
    فایل HTML را ذخیره کن. وقتی کارت تمام شد، روی File و سپس روی Save (ذخیره) کلیک کن تا فایلت ذخیره شود. کل سند HTML تو باید چیزی شبیه به این باشد:
      <!DOCTYPE html>
      <html>
      <head>
      <title>Page Title</title>
      </head>
      <body>
      <div style="background-image: url('https://www.website.com/images/image_background.jpg');">
      </body>
      </html>
      

بخش 3 از 4:
با استفاده از CSS

  1. 1
    یک سند HTML ایجاد کن. برای انجام این کار از مراحلی که در قسمت ۲ برای نوشتن سند HTML به آن اشاره شد استفاده کن. سند تو باید شامل تگ آغازین و پایانی HTML، تگ آغازین و پایانی head (سرانداز) و همچنین تگ آغازین و پایانی body (بدنه) باشد. برای اضافه کردن عکس نیازی به افزودن تگ HTML نیست. در این قسمت یاد می‌گیری که چگونه تصویر پس‌زمینه‌ را به‌جای HTML با استفاده از CSS تنظیم کنی.
  2. 2
    کد <style> را در بخش head (سرانداز) سند HTML تایپ کن. این کد، تگ آغازین شیوه‌نامه‌ی (CSS) است. این تگ بعد از "<head>" و قبل از "<head/>" قرار می‌گیرد.
    • همچنین می‌توانی CSS را در یک سند CSS مجزا ایجاد کرده و سپس آن را به سند HTML خودت ارتباط بدهی.
  3. 3
    کد } body را در خط بعدی تایپ کن. این کد، کد آغازین CSS است که به بدنه‌ی سند HTML تو شکل و رنگ می‌دهد.
  4. 4
    کد background-image: url('[image url]'); را در سطر بعدی تایپ کن. این خط مشخص‌کننده تصویر پس‌زمینه‌ای است که می‌خواهی استفاده کنی. قسمت "[image url]" را با آدرس url صحیح عکسی که می‌خواهی استفاده کنی جایگزین کن.
    • وقتی به‌جای آدرس فایل یا URL عکس فقط اسم فایل را استفاده می‌کنی (به‌عنوان مثال، background-image: url("background.png"))، مرورگر وب پوشه‌ی صفحه‌‌ وب مورد‌نظر را برای پیدا کردن عکس جستجو می‌کند. اگر فایل عکس در پوشه‌ی دیگری در کامپیوترت قرار داشته باشد، باید آدرس کامل آن فایل را اضافه کنی.
  5. 5
    کد ;background-repeat:no-repeat را در سطر بعدی تایپ کن. این خط به مرورگر وب می‌گوید که تصویر مورد‌نظر را به‌جای نمایش مکرر فقط یک بار نمایش دهد.
  6. 6
    کد ;background-size: cover را در سطر بعدی تایپ کن. این کد به مرورگر وب می‌گوید تا کل پس‌زمینه را با عکس موردنظرت پوشش دهد.
  7. 7
    علامت } را در انتهای بخش "Body" (بدنه‌ی) فایل HTML تایپ کن. اگر می‌خواهی خطوط CSS دیگری که در قسمت Body (بدنه‌ی) سند HTML تو تغییراتی را ایجاد می‌کنند اضافه کنی، باید آن‌ها را اینجا بنویسی. برای بستن قسمت بدنه، "{" را در آخرین خط قسمت "Body" (بدنه) CCS وارد کن.
  8. 8
    کد <style/> را در انتهای CSS تایپ کن. بعد از اینکه تمام CSS‌هایی که می‌خواستی را اضافه کردی، در انتها کد "<style/>" را تایپ کن. این کد CSS را می‌بندد.
  9. 9
    فایل HTML را ذخیره کن. وقتی‌ کارت تمام شد، برای ذخیره‌ی فایل، روی File و سپس روی Save (ذخیره) کلیک کن. کل سند HTML تو باید به‌شکل زیر باشد:
      <!DOCTYPE html>
      <html>
      <head>
      <title>Page Title</title>
      
      <style>
      body {
              background-image: url("https://www.website.com/images/image_background.jpg");
              background-repeat:no-repeat;
             background-size:cover;
      } 
      </style>
      </head>
      <body>
      
      </body>
      </html>
      

بخش 4 از 4:
مرور فایل HTML

  1. 1
    روی سند HTML راست کلیک کن. با انجام این کار منویی در سمت راست آن نمایش داده می‌شود.
  2. 2
    روی گزینه‌ی Open with (بازکردن به‌وسیله‌ی) کلیک کن. با انجام این کار لیستی از برنامه‌هایی که می‌توانی فایل HTML را در آن‌ها باز کنی نمایش داده می‌شود.
  3. 3
    مرورگر وب موردنظرت را انتخاب کن. می‌توانی فایل HTML مورد‌نظرت را در هر مرورگری که خواستی باز کنی.
  4. 4
    فایل HTML را مرور کن. نگاهی به فایل HTML بینداز و مطمئن شو که همه‌چیز درست است.
    • اگر مرورگر را باز کردی و به‌جای تصویر پس‌زمینه، کد‌های HTML را مشاهده کردی، احتمالاً فایل HTML را به‌جای ذخیره به‌عنوان HTML در قالب فایل txt. یا rtf ذخیره کرده‌ای. لازم است تا فایل HTML را در ویرایشگر دیگری ویرایش کنی.

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

  5. 5
    ویرایش‌هایی در فایل HTML انجام بده. در ویرایشگر متنی ویندوز، نشانگر ماوس را بین تگ‌های <body> </body> ببر و عبارت !Hello world (سلام دنیا!) را تایپ کن. برای دیدن متن بالای تصویر پس‌زمینه، پنجره‌ی مرورگر را دوباره بارگذاری کن.

مقالات مرتبط ویکی‌هاو

چگونه

گوگل کروم را دانلود و نصب کنیم

چگونه

همه‌ی توییت‌ها را یک‌باره حذف کنیم

چگونه

به حافظه‌ی کلیپ‌بورد اندروید دسترسی پیدا کنیم

چگونه

پروفایل اسنپ‌چت را ببینیم

چگونه

فایل‌های EXE را باز کنیم

چگونه

AdBlock را غیرفعال کنیم

چگونه

فایل‌های Exe را در مک باز کنیم

چگونه

یک صفحه‌ی خالی را در Word حذف کنیم

چگونه

مشکل DNS Server Not Responding (سرور DNS پاسخ نمی‌دهد) را برطرف کنیم

چگونه

رزروهای پرواز را استعلام و پیگیری کنیم

چگونه

نرم‌افزار‌ها را در Ubuntu حذف کنیم

چگونه

افراد را وادار کنیم به پیام ما جواب دهند

چگونه

مین‌روب بازی کنیم

چگونه

بفهمیم چه کسی در اسنپ‌چت آنلاین است

در مورد ویکی‌هاو

کادر فنی ویکی‌هاو
مشارکتی نوشته‌شده توسط
ویراستارِ عضو کادر فنی ویکی‌هاو
این مقاله توسط تیم آموزش‌دیده‌ی ویراستاران و پژوهشگرانی که صحت و جامعیت آن را تأیید کرده‌اند، به‌طور مشارکتی نوشته شده است. تیم مدیریت محتوای ویکی‌هاو با دقت کار ویراستاران را زیر نظر دارد تا اطمینان حاصل شود که تمامی مقالات طبق پژوهش‌های معتبر صحیح هستند و استانداردهای بالای کیفی ما را دارند.
از این صفحه ۶۶بار بازدید شده‌است.

آیا این مقاله کمکتان کرد؟