مرورگرهای مدرنبه شما امکان می دهد به عنصر اضافه کنید شماره دلخواهتصاویر پس‌زمینه، فهرستی از پارامترهای هر پس‌زمینه که با کاما از هم جدا شده‌اند. برای استفاده کافی است دارایی جهانیپس زمینه و ابتدا یک پس زمینه برای آن مشخص کنید و یک پس زمینه را که با کاما از هم جدا شده اند.
چگونه پس زمینه را به عرض کامل پنجره بکشم؟
ویژگی background-size برای مقیاس بندی پس زمینه در نظر گرفته شده است، 100٪ به عنوان مقدار آن مشخص می شود، سپس پس زمینه تمام عرض پنجره مرورگر را اشغال می کند. همانطور که در مثال 1 نشان داده شده است، برای مرورگرهای قدیمی، باید از ویژگی های پیشوند خاصی استفاده شود.
چگونه می توانم یک تصویر پس زمینه به یک صفحه وب اضافه کنم؟
برای افزودن یک تصویر پس‌زمینه به یک صفحه وب، مسیر تصویر را در داخل مقدار url ویژگی پس‌زمینه سبک تنظیم کنید، که به نوبه خود به انتخابگر بدنه اضافه می‌شود.
آیا می توانم پس زمینه متحرک بسازم؟
انیمیشن یک تکنیک به اندازه کافی قوی است که می تواند هر سندی را زنده کند، بنابراین تعجب آور نیست که فناوری فلش محبوبیت زیادی به دست آورده است که کارتون ها را به صفحات وب و علاوه بر آن موارد تعاملی اضافه می کند. فرمت گرافیکی GIF نیز پشتیبانی می کند ساده ترین انیمیشنبا تغییرات متوالی فریم بنابراین، با استفاده از یک تصویر در این فرمت، می توان نه تنها تصاویر فردی، بلکه پس زمینه یک صفحه وب یا یک عنصر خاص را متحرک کرد.
ابتدا باید یک تصویر متحرک در آن ایجاد کنید فرمت GIFکه برای آن می توانید از برنامه استفاده کنید فتوشاپیا دیگری مناسب برای این منظور. همچنین کتابخانه هایی از فایل های متحرک آماده وجود دارد که می توان از آنها به عنوان تصویر پس زمینه استفاده کرد. سپس، همانطور که در مثال 1 نشان داده شده است، تصویر با استفاده از ویژگی پس زمینه سبک به عنوان پس زمینه اضافه می شود.
چگونه می توانم تصویر پس زمینه را در گوشه سمت راست پایین صفحه قرار دهم؟
برای کنترل موقعیت تصویر پس زمینهویژگی سبک پس زمینه در صفحه اعمال می شود، به طور همزمان مختصات افقی و عمودی تصویر را تنظیم می کند. برای جلوگیری از تکرار یک تصویر پس زمینه، از ویژگی background-position با مقدار no-repeat استفاده کنید.
چگونه از تکرار پس زمینه جلوگیری کنم؟
به‌طور پیش‌فرض، تصویر پس‌زمینه به‌صورت افقی و عمودی تکرار می‌شود و به‌صورت موزاییکی در سراسر صفحه وب قرار می‌گیرد. با این حال، این رفتار پس‌زمینه همیشه مورد نیاز نیست، مخصوصاً در مورد قرار دادن یک تصویر، بنابراین مقدار بدون تکرار اضافه شده به ویژگی پس‌زمینه سبک کمک می‌کند.
چگونه می توانم پس زمینه را فقط به صورت عمودی تکرار کنم؟
تکرار پس‌زمینه معمولاً برای ایجاد خطوط یا شیب‌های تزئینی که به ارتفاع یک عنصر یا پنجره صفحه وب متصل می‌شوند، مورد نیاز است. در چنین مواردی، تکرار پس‌زمینه به صورت عمودی، تصویری بدون درز بدون در نظر گرفتن اندازه عناصر ارائه می‌دهد. اولین کاری که باید انجام دهید این است که مطمئن شوید تصویر پس زمینهبدون همپوشانی تکرار شد
برای ایجاد یک سایت، یک مسئله مهم نحوه ایجاد پس زمینه در html است. این روش شامل استفاده از تگ های خاص − است کلمات رمزیو نامه ها با تشکر از آنها، شما می توانید قرار دهید پس زمینه متفاوت، آن را تک رنگ کنید - آن را پر کنید یا هر تصویری را به جای پس زمینه قرار دهید. چنین اقداماتی برای همه طراحان چیدمان و برای کسانی که تصمیم دارند سایت خود را به تنهایی "لباس" کنند بسیار مفید خواهد بود.
ساخت پس زمینه
قبل از اینکه پس‌زمینه سایت html را بسازید، باید آن را باز کنید ویرایشگر متنکد صفحات html. به یاد داشته باشید که تگ های صفحه به صورت عمودی قرار می گیرند. سپس، بین برچسب ها
… ، باید یک تگ قرار دهید- این برچسب ها برای روشن شدن سبک عناصر این صفحه وب مورد نیاز است. در مکان سهنقطه ها باید نوشته شوند - بدن (پس زمینه:) . این تنظیماتی است که به شما امکان می دهد تنظیم کنید سبک های متفاوتبرای پس زمینه صفحه شما می توانید عملیات تنظیم رنگ را به دو صورت انجام دهید. اولین:بدنه (پس‌زمینه:#000000) - پس‌زمینه صفحه باید سیاه باشد.
این روش برای تنظیم رنگ و تصویر پس زمینه نیز مناسب است. بعد از دو نقطه است که می توانید یک کد رنگ یا پیوند به یک تصویر قرار دهید. یا می توانید از روشی استفاده کنید که فقط به معنای تنظیم یک رنگ است - یک پر کردن خاص برای صفحه. پس از کولون، باید به اصطلاح پارامتر - رنگ را ثبت کنید. و بعد از آن کد خود رنگ را قرار دهید. این روش اگر به عنوان یک الگو استفاده شود خوب است. آن را ثبت کنید و ذخیره کنید، و در صورت لزوم - رنگ را تنظیم کنید، آن را در صفحه قرار دهید.
می توان به جای آن قرار داد پس زمینه ساده، تصویر اگر باید بدانید: در html، چگونه یک تصویر را به پس‌زمینه تبدیل کنید، پس باید عملیات مشابهی را انجام دهید. ثبت برچسب ها، قرار دادن بدن (پس زمینه: پیوند به تصویر). باید به خاطر داشت که خود تصویر می تواند در هر جایی باشد. و در یک وب سایت در اینترنت، اما بهتر است یک پوشه در ریشه سند ایجاد کنید. در پوشه ای که در آن تمام اطلاعات مربوط به صفحه سایت ذخیره می شود، باید یکی دیگر را ایجاد کنید - برای تصاویر. عملیات به شکل زیر خواهد بود:
اکنون تصویری که انتخاب کرده اید پس زمینه کل صفحه سایت خواهد بود. امیدواریم نحوه ساخت پس زمینه در html را درک کرده باشید. فقط آن را امتحان کنید و مطمئناً موفق خواهید شد!
تنظیم رنگ پس‌زمینه و/یا تصویر برای یک صفحه یا یک عنصر بسیار ساده است. نکته اصلی این است که بدانید کجا و چگونه می توان این کار را انجام داد و همچنین یک کد رنگی و / یا تصویر پس زمینه داشته باشید. ممکن است که از این مقاله چیزهای زیادی یاد بگیرید، اما من آن را به طور خاص برای مبتدیان ایجاد کردم. بنابراین، همه چیز تا حد امکان کوتاه و در عین حال مفصل خواهد بود. نکته اصلی این است که شما نه تنها دریافت خواهید کرد ایده کلیو نمونه های آماده، اما همچنین درک نحوه ایجاد پس زمینه در HTML.
برای تنظیم پس زمینه در HTML از DOCTYPE متوسط استفاده کنید
و من با این واقعیت شروع می کنم HTML5هیچ راهی برای تنظیم وجود ندارد. تصمیم گرفته شد که این ویژگی را به CSS بیاوریم. بنابراین، اگر قصد دارید از موارد زیر استفاده کنید و می خواهید یک کد معتبر (درست) دریافت کنید، باید در نوع سند انتقالی توقف کنید. برای انجام این کار، صفحه وب شما باید با خط زیر شروع شود:
انتقالی//EN" "http://www.w3.org/TR/html4/loose.dtd">
اکنون که این موضوع را پوشش دادیم، بیایید به درک چگونگی ایجاد پس‌زمینه برویم. و اولین چیزی که در اینجا باید به آن توجه کرد تفاوت بین آنهاست رنگ پس زمینهو تصویر پس زمینه. در آغاز می رود رنگ پس زمینهکه همه چیز را پر می کند فضای موجودصفحه یا عنصر روی آن یک تکرار قرار داده شده است تصویر پس زمینه. از نظر بصری، این را می توان به صورت زیر نشان داد:
پس زمینه یک سند HTML و عناصر آن
دومین چیزی که باید بدانید تفاوت بین آنهاست بدنه سندو عنصر سند. بدنه سنددر کد HTML صفحه وب با تگ BODY نشان داده می شود که شامل تمام محتوای صفحه وب است. بدیهی است که پیشینه بدنه سند نمی تواند شفاف باشد. اگر پس‌زمینه بدنه سند تنظیم نشده باشد، از مقدار پیش‌فرض تنظیم‌شده در تنظیمات مرورگر استفاده می‌شود.
عناصر صفحهداخل تگ BODY هستند. قابل توجه است که برای تنظیم رنگ و / یا تصویر پس زمینه HTMLاین امکان وجود دارد نه برای همه عناصر سند. به عنوان مثال، یک تصویر پس زمینه فقط برای جداول قابل تعیین است. به طور پیش فرض، آنها معمولا یک پس زمینه شفاف دارند.
ویژگی bgcolor برای ایجاد رنگ پس زمینه
برای پرسیدن رنگ پس زمینهسند یا عناصر آن از ویژگی bgcolor استفاده می کنند، به عنوان مثال:
V این موردرنگ پس زمینه را برای کل صفحه تنظیم می کنیم. و در اینجا مثالی از نحوه تنظیم رنگ پس زمینه برای یک جدول در تگ TABLE آورده شده است:
| متن با پس زمینه |
قابل ذکر است که رنگ پس زمینه در جدول را می توان هم برای ردیف های تگ TR و هم برای سلول های آنها در تگ TD مشخص کرد.
چگونه کد رنگ را پیدا کنیم؟
احتمالاً قبلاً متوجه شده اید که رنگ در HTML توسط یک خاص تنظیم می شود کدبه عنوان مثال: #ec008c. برای اینکه کد رنگ مورد نیاز خود را پیدا کنید، می توانید از یکی از ویرایشگرهای گرافیکی استفاده کنید. به عنوان مثال، در فتوشاپ می توانید از " ابزار قطره چشم» (پیپت) برای گرفتن رنگ از نقطه ای در تصویر. سپس، باید روی رنگ به دست آمده در نوار ابزار و در پنجره ای که باز می شود کلیک کنید. انتخاب کننده رنگ» (انتخاب رنگ) کد رنگ را کپی کنید.
توجه شما را به این نکته جلب می کنم که این کد در ابتدا بدون علامت پوند (#) خواهد بود، این علامت باید به صورت دستی اضافه شود.
شما همچنین می توانید از تعداد زیادی استفاده کنید سرویس های آنلاین، مثلا:
- و غیره.
اصل عملکرد آنها حتی ساده تر است - کلیک کنید رنگ مورد نظرو کد او را دریافت کنید.
ویژگی پس زمینه برای ایجاد یک تصویر پس زمینه
و همچنین در مورد رنگ پس زمینه، و در مورد تصویر پس زمینه، باید استفاده کنید ویژگی خاص، به عنوان مثال، پس زمینه:
در این مورد، تصویر پس زمینه را برای صفحه به عنوان یک کل تنظیم می کنیم. قابل ذکر است که به دلیل محدودیت در اندازه تصویر تکرار خواهد شد به عنوان مثال:
همانطور که می بینید، هنگام تکرار، انتقال بین تصاویر قابل توجه است. بنابراین، آنها اغلب استفاده می شوند عکس های خاص، جایی که این لحظه در نظر گرفته شده است.
و در اینجا مثالی از نحوه تنظیم یک تصویر پس زمینه برای یک جدول در تگ TABLE آورده شده است:
| متن با پس زمینه |
قابل توجه است که تصویر پس زمینه را فقط می توان برای جدول به عنوان یک کل و / یا سلول جداگانه آن تنظیم کرد. برای یک رشته کار نخواهد کرد.
مسیر مطلق و نسبی به تصویر پس زمینه
باید توجه ویژه ای شود آدرس تصویر پس زمینه. در این مورد، یک مسیر نسبی به تصویر استفاده می شود، i.e. آدرس نسبت به محل فایل تصویری فایل صفحه وب است. این گزینه را نمی توان به ویژه موفق نامید. بهترین استفاده مسیر مطلقبه تصویر، یعنی آدرس کامل آن، مثلا:
در این صورت هیچ مشکل مرتبطی نخواهید داشت. می توانید در این مورد بیشتر بخوانید.
جمع بندی
استفاده از ویژگی‌های bgcolor و پس‌زمینه منسوخ شده است، بنابراین باید از DOCTYPE انتقالی برای معتبر کردن کد HTML خود استفاده کنید. برای یک کار رنگ پس زمینهدر HTML استفاده می کند کدهای خاصکه می توانید در آن پیدا کنید ویرایشگر گرافیکییا استفاده از خدمات آنلاین ویژه تصویر پس زمینه در ناحیه اختصاص داده شده به آن کپی شده و در بالای رنگ پس زمینه قرار دارد. برای تعیین تصویر پس زمینه بهتر است از URL کامل آن استفاده کنید. این همه برای من است. با تشکر از توجه شما. موفق باشید!
| ساعت 22:37 | تغییر پیام |
V پس زمینه htmlبرای سایت تنظیم نشده است، از طریق سبک های css نوشته شده است، اما این فقط یک فرمال نظری است. حال بیایید دریابیم که چگونه این پس زمینه را تعریف کنیم.
پس زمینه برای یک سایت یا یک بلوک جداگانه
از آنجایی که برای رسیدن به این هدف به یک فایل css نیاز داریم، باید آن را ایجاد کرده و به html متصل کنیم. این در نوشته شده است. پس از آن، شما می توانید به کار بروید. ابتدا باید تصمیم بگیرید که پس زمینه را روی چه چیزی تنظیم کنید. اگر کل صفحه به عنوان یک کل است، می توانید این کار را به صورت زیر انجام دهید:
بدنه (رنگ پس زمینه: سفید؛ )
یعنی به تگ body اشاره می کنیم که کل صفحه ما را نشان می دهد. از ویژگی background-color برای تنظیم رنگ پس زمینه استفاده می شود. اما اگر بخواهید پس زمینه را به جای یک رنگ ثابت روی یک تصویر تنظیم کنید، چه؟ پس ارزش نوشتن را دارد:
بدنه (پس زمینه-تصویر: آدرس اینترنتی (مسیر به تصویر. پسوند تصویر))
برای وضوح، پیشنهاد می کنم همه چیز را با یک مثال با جزئیات بیشتری در نظر بگیریم. برای این کار از تصویر زیر استفاده خواهم کرد:
برای مثال، background-image: url (comp.png). در این مثال، ما یک تصویر پس زمینه به نام comp (این چیزی است که من آن را نامیده ام) تنظیم کرده ایم. فرمت pngکه در همان پوشه فایل css قرار دارد.
در html یک بلوک دلخواه با ابعاد خاص ایجاد می کنیم تا کار خواص css روی آن را نشان دهیم.
و در اینجا سبک هایی برای آن وجود دارد:
#ct(پس‌زمینه-تصویر: url(comp.png)؛ عرض: 600 پیکسل؛ ارتفاع: 400 پیکسل؛ )
این چیزی است که ما به دست آوردیم:
چرا اینطور است؟ واقعیت این است که به طور پیش فرض مرورگر تصویر را چندین بار تکرار می کند تا بلوک را کاملاً پر کند. گاهی اوقات این لازم است، به عنوان مثال، هنگام استفاده از زیور آلات بدون درز، اما در مورد ما باید یک تصویر وجود داشته باشد. خوشبختانه این امر به راحتی قابل کنترل است.
تکرار پس زمینه
اگر تصویری به عنوان پس‌زمینه دارید، به طور پیش‌فرض به صورت افقی و عمودی تکرار می‌شود تا کل فضای صفحه را پر کند. برای حذف این مورد، از ویژگی background-repeat و مقدار no-repeat آن استفاده کنید. چنین مقادیری نیز وجود دارد:
- Repeat-x - فقط به صورت افقی تکرار کنید
- Repeat-y - فقط عمودی
بیایید به ویژگی های پس زمینه گرافیکی خود اضافه کنیم:
Background-repeat: no-repeat;
موقعیت
ویژگی background-position تعیین می کند که عکس در کجا قرار گیرد. دو مقدار در اینجا تنظیم شده است - افقی و عمودی. مثال: پس زمینه-موقعیت: پایین سمت راست- موقعیت در گوشه پایین سمت راست، بالا-چپ - در بالا پایین (و به طور پیش فرض به همین ترتیب)، 250 پیکسل 500 پیکسل - افست از سمت چپ گوشه بالاسمت راست 250 پیکسل و پایین تر از 500.
بیایید نگاه بهتری به مثال ها بیندازیم:
موقعیت پس زمینه: بالا سمت راست.
تصویر به لبه سمت راست بالا منتقل می شود. همچنین برای نمایش لبه ها به بلوک یک پس زمینه زرد دادم.
پس زمینه موقعیت: 50% 50%;
تصویر دقیقاً در مرکز بلوک خود ظاهر شد. بله، این نیز به لطف درصد ثبت موقعیت امکان پذیر است.
پس زمینه موقعیت: 70% 20%;
پس زمینه 70 درصد به صورت افقی و 20 درصد به صورت عمودی جابجا می شود.
همچنین مجاز به تعیین یک مقدار موقعیت منفی در پیکسل است. این کار را می توان انجام داد، برای مثال، زمانی که از یک تصویر اسپرایت بزرگ استفاده می کنید و باید قسمت مورد نیاز این اسپرایت را در بلوک قرار دهید.
پس زمینه را لنگر بزنید
من همچنین یک ویژگی به نام Background-attachment را دوست دارم. این فقط دو مقدار دارد و اولین مقدار پیش فرض (پیمایش) است. این بدان معنی است که وقتی صفحه اسکرول می شود، پس زمینه نیز اسکرول می شود و اگر از یک تصویر بدون تکرار استفاده کنید، در پایان تمام می شود و سپس فقط یک رنگ ثابت جلوتر می رود.
برای جلوگیری از این اتفاق، Background-attachment: fixed نوشته شده است و اکنون پس‌زمینه ما به طور ایمن در جای خود ثابت شده است. این را می توان با نحوه تعریف یک بلوک با موقعیت ثابت مقایسه کرد و هنگامی که پیمایش می شود از صفحه محو نمی شود.
گزارشی مختصر از این همه خوبی
ما ویژگی های زیادی را تجزیه و تحلیل کرده ایم که به شما امکان می دهد پس زمینه ایجاد کنید، اما اگر همه آنها را اعمال کنید، یک رکورد دست و پا گیر خواهید داشت. یک راه حل بسیار زیبا وجود دارد. ویژگی پس زمینه به شما امکان می دهد از طریق یک فاصله بنویسید تنظیمات مورد نظربه این ترتیب:
پس زمینه: تصویر رنگی تکرار موقعیت اتصال.
و اکنون همه چیز را می توان اینگونه نوشت:
پس زمینه: آدرس اینترنتی زرد (comp.png) بدون تکرار 20% 100 پیکسل.
اگر برخی از ویژگی ها نیازی به تعریف نداشته باشند، به سادگی حذف می شوند (در مورد ما، ما پس زمینه-ضمیمه ننوشتیم).
پس زمینه های زیادی
اگر به چندین مورد نیاز دارید چه می شود تصاویر پس زمینه? اتفاق می افتد، چه باید کرد. امروزه css از این ویژگی پشتیبانی می کند. بیا و ما تلاش می کنیم. بیایید این نماد را برداریم
اسمشو گذاشتم لپ تاپ
و این هم کد برای قرار دادن چند تلفن:
پس زمینه: url(comp.png) بدون تکرار 20% 100px، url(laptop.png) بدون تکرار 50% 50%؛ رنگ پس زمینه: زرد;
همانطور که می بینید، فقط باید بعد از تصویر اول یک کاما قرار دهید و تنظیمات تصویر دوم را بنویسید. در این صورت بهتر است یک رنگ ثابت را جداگانه ست کنید.
به همین ترتیب، می توانید هر تعداد عکسی که دوست دارید ضبط کنید، اما زیاده روی نکنید - گرافیک زیاد خیلی خوب نیست.
اینجاست که می خواهم این مقاله را به پایان برسانم. شما می توانید بسیاری از کارهای جالب دیگر را با پس زمینه انجام دهید، من سعی خواهم کرد در آینده در مورد آنها بنویسم (و قبلاً چیزی نوشته ام - برای مثال).
2 رایبه وبلاگ من خوش آمدید. ما به درک ادامه می دهیم اصول اولیه html. این درس به قدری ساده و جالب خواهد بود که امیدوارم بخواهید بیشتر در مورد زبان های برنامه نویسی بیاموزید. فقط در چند دقیقه یاد می گیرید که چگونه یک تصویر را به صورت پس زمینه در html بسازید و به یک نتیجه عالی برسید.
من همچنین در مورد برخی از تفاوت های ظریف صحبت خواهم کرد که پس زمینه را یکدست ترین و زیباترین می کند. خوب، شروع کنیم؟
انتخاب تصویر
من می خواهم با انتخاب یک تصویر شروع کنم. به طوری که در صفحه یکنواخت تر و زیباتر به نظر می رسید و نیازی به زحمت اندازه ها و ترازها نباشید. پیشنهاد می کنم فوراً به دنبال بافت های بدون درز باشید. چیست؟
متأسفانه، غیرممکن است که یک تصویر را در html به حالت تمام صفحه بکشید. عکس در اندازه اصلی استفاده شده است. اگر تصویر کوچک است، مانند تصویر زیر، کل منطقه را پوشش می دهد. برای کشش تصویر، باید یک تصویر اضافی ایجاد کنید سند css، بدون آن کار نخواهد کرد.
اگرچه، شما این امکان را دارید که سیستم را دور بزنید. برای این کار از فتوشاپ و تصاویر تا عرض صفحه (1280x720) استفاده کنید. اگرچه در این حالت، هنگام اسکرول کردن به پایین، تصویر را به دیگری تغییر می دهد.
خیلی بهترین گزینهاگر نمی خواهید از css استفاده کنید، از بافت های بدون درز استفاده خواهید کرد. هیچ درزی نمی بینند. آنها از نظر طراحی مانند کاغذ دیواری یا کاشی های مدرن هستند. یکی جایگزین دیگری می شود و هیچ مفصلی دیده نمی شود.
اگر شما نیز علاقه مند به عدم وجود عواقب قانونی برای استفاده از آنها هستید، توصیه می کنم در سایت جستجو کنید pixabay.com .
HTML
حالا بیایید با کد کار کنیم. فوراً باید توجه داشته باشم که اکنون ما در حال کار با html هستیم ، یعنی تصویر را نه برای کل سایت، بلکه فقط برای یک مورد تغییر می دهیم. صفحه خاص، که کد برای آن نوشته می شود. اگر به تغییرات در کل منبع علاقه دارید، باید با آن کدنویسی کنید css، اما بیشتر در مورد آن بعدا.
بنابراین، شما می توانید در Notepad کار کنید، من NotePad++ را ترجیح می دهم. کار در آن بسیار راحت تر است: کد برای شما نوشته شده است، برچسب ها برجسته می شوند. این برنامه رایگان است و حدود 3 مگابایت وزن دارد. به شدت توصیه می شود، به خصوص اگر مبتدی هستید.
بنابراین در برچسب بدنباید ویژگی را اضافه کنید زمینهو یک لینک به تصویری که عکس از آنجا گرفته می شود را مشخص کنید. در اینجا چیزی است که در برنامه به نظر می رسد.
شما فقط می توانید دفترچه یادداشت را باز کنید و این کد را کپی کنید. در گیومه، لینک تصویری را که دوست دارید قرار دهید.
| <html> <سر> <عنوان>تصویر پس زمینه</title> </ سر> <پس زمینه بدن = "https://pixabay.com/static/uploads/photo/2015/05/05/09/59/triangle-753534_960_720.png"> </ بدن> </ html> |
من می خواهم برای مبتدیان توجه داشته باشم، این لحظه است. اگر از pixabay عکس می گیرید، باید پیوند را نه در صفحه با تصویر وارد کنید، بلکه تصویر را در تب بعدی باز کنید.
دقیقا این URL را کپی کنید.
سند را ذخیره کنید. فراموش نکنید که اگر از notepad استفاده می کنید، باید از افزونه استفاده کنید .html . برای مثال، فقط سند را نام ببرید، back.html . در غیر این صورت، به عنوان ذخیره می شود سند متنیو مرورگر متوجه نمی شود که چه کاری باید انجام دهد.
تمام شد، صفحه با رنگ دیگری پر شده است.
اگر می خواهید در مورد html بیشتر بدانید، توصیه می کنم دانلود کنید دوره رایگاناوگنیا پوپووا . از آن برچسب ها، ویژگی های زبان بیشتری یاد می گیرید، ترفندهای جدید را امتحان می کنید و بیشتر می دانید.
نمی توانم بگویم که دوره های یوگنی پوپوف بسیار محبوب است. بسیاری از کارشناسان او را سرزنش می کنند و اگر با چنین اظهاراتی برخورد کردید، این نظر من است. این دروس به صورت رایگان ارائه می شوند و با وجود این آنها کار اصلی خود را انجام می دهند - نشان دادن اصول اولیه به مبتدی، به روز کردن او.
همانطور که هر نویسنده روش خود را برای نوشتن دارد، برنامه نویسان نیز سبک خاص خود را دارند. شما می توانید در تمام عمر خود یاد بگیرید که چگونه وب سایت ایجاد کنید، اما باید از جایی شروع کنید. از کتاب ها؟ فقط این نیست بله، آنها حاوی اطلاعات قابل اعتمادتر، اطلاعات مرتبط هستند، اما تسلط بر آنها بسیار دشوار است.
با من موافق نیستی؟ من می توانم یک جایگزین پیشنهاد کنم. کتاب الیزابت و اریک فریمن آموزش HTML، XHTML و CSS ". یک پرفروش خیلی خسته کننده نیست و چندی پیش، در سال 2016 منتشر شد. اطلاعات هنوز قدیمی نشده است.
CSS
اگر به پس زمینه ای نیاز دارید که در تمام صفحات سایت شما تکرار شود، CSS ضروری است. البته می توانید مانند فصل قبل هر بار مسیر را بنویسید. اما تصور کنید که با گذشت زمان نیاز به تعویض آن داشته باشید: پیوند قدیمی می شود یا فقط می خواهید طراحی را تغییر دهید. به هر صفحه بروید و کد را تغییر دهید؟ کار نخواهد کرد.
CSS به حل این مشکل کمک می کند. شما باید یک فایل css بسازید و کد زیر را وارد کنید:
بیایید کمی در مورد خود کد صحبت کنیم. در پرانتز بعد از آدرس اینترنتی می توانید پیوندی به تصویری از آن وارد کنید منبع شخص ثالث، یا فقط نام سند، اگر تصویر در همان پوشه با این فایل باشد.
برای کسانی که می خواهند بهتر بدانند
با css می توانید کشش دهید تصویر پس زمینه ، آن را طوری بسازید که تکرار نشود، یک انیمیشن gif و خیلی چیزهای دیگر اضافه کنید.
شما نمی توانید همه چیز را در یک مقاله بنویسید. بله، و من چنین وظیفه ای را برای خودم تعیین نکردم. ظرافت های زیادی وجود دارد، و اگر به شما قول داده شود که همه چیز را در یک مقاله به شما گفته شود، پس این چیزی بیش از یک فریب نیست.
آیا می خواهید نحوه صحیح نوشتن وب سایت ها را یاد بگیرید؟ توصیه می کنم زبان های برنامه نویسی را مطالعه کنید. من می توانم دوره آندری برناتسکی را راهنمایی کنم. HTML5 و CSS3 از صفر تا حرفه ای ". من این نویسنده را خیلی دوست دارم. من به طور خاص این دوره را نگذراندم، چند سال پیش قبلاً چیزی مشابه وجود داشت، اما کمتر مدرن.
نویسنده بسیار زیبا و قابل درک است. نکته برجسته این دوره این است که شما فقط در حال مطالعه نیستید، بلکه در حال ایجاد یک سایت خاص همراه با یک معلم هستید. در نتیجه کارت ویزیت، وبلاگ و حتی فروشگاه اینترنتی دریافت خواهید کرد. خیلی باحاله شما می توانید سه درس اول تئوری HTML5 از این دوره را همین حالا و اینجا تماشا کنید.
به هر حال، همراه با این دوره، 7 جایزه دریافت می کنید: اصول اولیه html و css توسط آندری برناتسکی، طرح بندی برای مبتدیان، ایجاد صفحه فرود در یک شب و موارد دیگر. قبل از اینکه درگیر آموزش جدی شوید، دوره رایگان را احساس کنید. تمرین HTML5 و CSS3 ».
خب، اساساً همین است. برای کسب اطلاعات بیشتر در خبرنامه مشترک شوید. به زودی کمی بیشتر در مورد آن به شما خواهم گفت طرح تطبیقی، افزایش درآمد از هر وبلاگ و مجموعه بانوان نکات مفیددر مورد آسان کردن کار تا دفعه بعد و موفق باشید در تلاش.
