طراحی وب

نحوه افزودن متن به HTML

افزودن متن به صفحه HTML ما با استفاده از عنصری که با برچسب <p> باز می‌شود و یک پاراگراف جدید ایجاد می‌کند ساده است. ما تمام متن منظم خود را درون عنصر <p> قرار می دهیم.

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

سایر عناصر کلیدی

عنصرمعناهدف
bبولدبرجسته کردن اطلاعات مهم
strongقویبه طور بولد، برای برجسته کردن متن اصلی
iایتالیکمورب کردن متن
emمتن تأکید شدهمعمولاً به عنوان زیرنویس تصویر استفاده می شود
markمتن علامت‌گذاری شدهبرجسته کردن پس زمینه متن
smallمتن کوچکبرای کوچک کردن متن
strikeخط خوردگیبرای قرار دادن یک خط افقی روی متن
uمتن زیرخط داربرای لینک‌ها یا موارد برجسته متن استفاده می‌شود
insمتن درج شدهبا زیرخط نمایش داده می شود تا متن درج شده نشان داده شود.
subمتن زیرنویسانتخاب سبک تایپوگرافی
supمتن فوق خطیسبک ارائه دیگری از تایپوگرافی

این برچسب‌ها باید در اطراف متن مورد نظر باز و بسته شوند.

نحوه افزودن متن به HTML

اجازه دهید آن را امتحان کنیم. در یک خط جدید در ویرایشگر HTML، کد HTML زیر را تایپ کنید:

فراموش نکنید که برای دیدن نتایج ، ذخیره را فشار داده و سپس صفحه را در مرورگر خود Refresh کنید.

نحوه افزودن لینک در HTML

همانطور که ممکن است متوجه شده باشید، اینترنت از لینک‌های متعددی تشکیل شده است.

لینک‌ها در ویژگی باز شده توسط برچسب <a> وجود دارد. این عنصر اولین موردی است که ما با آن آشنا شده‌ایم و از یک ویژگی استفاده می‌کند و بنابراین با برچسب های ذکر شده قبلی متفاوت به نظر می‌رسد.

برچسب لنگر (Anchor)

برچسب باز <a> (یا لنگر) به صورت زیر نوشته می‌شود:

قسمت اول ویژگی، به صفحه‌ای باز می‌شود (می‌رود) که با کلیک روی لینک باز می‌شود.

در همین حال، قسمت دوم ویژگی شامل متنی است که برای بازدیدکننده نمایش داده می‌شود تا وی را ترغیب کند تا روی آن لینک کلیک نماید.

اگر وب‌سایت خود را ایجاد می‌کنید، به احتمال زیاد تمام صفحات خود را در میزبانی وب حرفه‌ای میزبانی خواهید کرد. در این حالت، لینک‌های داخلی در وب سایت شما <a href=23mylinkedpage.htmlUP> اینجا لینک می‌شوند </a>.

بیایید یک برچسب لنگر ایجاد کنیم

اجازه دهید آن را امتحان کنید. از صفحه index.html فعلی خود یک کپی از کد ایجاد کنید. آن را در یک پنجره جدید در ویرایشگر HTML خود کپی / جایگذاری کنید.

این صفحه جدید را به عنوان “page2.html” ذخیره کنید و مطمئن شوید که در همان پوشه صفحه index.html شما ذخیره شده است.

در page2.html کد زیر را اضافه کنید:

با این کار پیوندی به Google در page2 ایجاد می‌شود. ذخیره را انجام داده و به صفحه index.html خود بازگردید.

در یک خط جدید در index.html کد زیر را اضافه کنید:

مطمئن شوید مسیر پوشه به پرونده صحیح است (page2.html). ذخیره و پیش نمایش index.html را در مرورگر خود وارد کنید.

اگر همه چیز درست باشد، لینکی مشاهده خواهید کرد که شما را به صفحه دوم خود هدایت می‌کند. در صفحه دوم، لینکی وجود دارد که شما را به google.com هدایت می‌کند.

نحوه افزودن تصاویر به HTML

در دنیای مدرن دیجیتال امروز، تصاویر همه چیز هستند. برچسب <img> هر آنچه برای نمایش تصاویر در سایت خود نیاز دارید را دارد. دقیقاً مانند <a> عنصر لنگر، <img> همچنین دارای یک ویژگی است.

این ویژگی اطلاعات مربوط به منبع، ارتفاع، عرض و ارتفاع متن تصویر را برای رایانه شما ارائه می‌دهد.

طراحی و قالب‌بندی

افزودن متن به HTMLبا کلیک راست روی مورد و انتخاب “Properties” می توانید نوع فایل تصویر را بررسی کنید.

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

انواع پرونده‌هایی که به طور آنلاین برای پرونده‌های تصویری بصورت آنلاین استفاده می‌شوند عبارتند از: .jpg ،png و gif.

متن Alt برای اطمینان از رتبه‌بندی صحیح سایت شما در سایت‌های جستجو و همچنین بازدیدکنندگان کم‌بینای سایت از اهمیت برخوردار است.

برچسب <img> به صورت زیر نوشته می‌شود:

اجازه دهید آن را امتحان کنید.

تصویر خود را با متن Alt ایجاد کنید.

تصویری (.jpg ، .png ، .gif) به انتخاب خود را در همان پوشه ای که index.html و page2.html را ذخیره کرده اید ذخیره کنید.

در یک خط جدید در ویرایشگر HTML خود کد زیر را وارد کنید:

آن را ذخیره کرده و پیش‌نمایش صفحه index.html را در مرورگر خود، مشاهده کنید.

منبع: HTML.com

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

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

همچنین ببینید
بستن
دکمه بازگشت به بالا