نحوه افزودن متن به HTML
افزودن متن به صفحه HTML ما با استفاده از عنصری که با برچسب <p> باز میشود و یک پاراگراف جدید ایجاد میکند ساده است. ما تمام متن منظم خود را درون عنصر <p> قرار می دهیم.
هنگامی که متن را بصورت HTML مینویسیم، تعدادی عنصر دیگر نیز داریم که می توانیم از آنها برای کنترل متن یا نمایش آن به روشی خاص استفاده کنیم.
سایر عناصر کلیدی
| عنصر | معنا | هدف |
|---|---|---|
| b | بولد | برجسته کردن اطلاعات مهم |
| strong | قوی | به طور بولد، برای برجسته کردن متن اصلی |
| i | ایتالیک | مورب کردن متن |
| em | متن تأکید شده | معمولاً به عنوان زیرنویس تصویر استفاده می شود |
| mark | متن علامتگذاری شده | برجسته کردن پس زمینه متن |
| small | متن کوچک | برای کوچک کردن متن |
| strike | خط خوردگی | برای قرار دادن یک خط افقی روی متن |
| u | متن زیرخط دار | برای لینکها یا موارد برجسته متن استفاده میشود |
| ins | متن درج شده | با زیرخط نمایش داده می شود تا متن درج شده نشان داده شود. |
| sub | متن زیرنویس | انتخاب سبک تایپوگرافی |
| sup | متن فوق خطی | سبک ارائه دیگری از تایپوگرافی |
این برچسبها باید در اطراف متن مورد نظر باز و بسته شوند.
نحوه افزودن متن به HTML
اجازه دهید آن را امتحان کنیم. در یک خط جدید در ویرایشگر HTML، کد HTML زیر را تایپ کنید:
|
1 |
<p>Welcome to <em>my</em> brand new website. This site will be my <strong>new<strong> home on the web.</p> |
فراموش نکنید که برای دیدن نتایج ، ذخیره را فشار داده و سپس صفحه را در مرورگر خود Refresh کنید.
نحوه افزودن لینک در HTML
همانطور که ممکن است متوجه شده باشید، اینترنت از لینکهای متعددی تشکیل شده است.
لینکها در ویژگی باز شده توسط برچسب <a> وجود دارد. این عنصر اولین موردی است که ما با آن آشنا شدهایم و از یک ویژگی استفاده میکند و بنابراین با برچسب های ذکر شده قبلی متفاوت به نظر میرسد.
برچسب لنگر (Anchor)
برچسب باز <a> (یا لنگر) به صورت زیر نوشته میشود:
|
1 |
<a href="https://blogging.com/how-to-start-a-blog/">Your Link Text Here </a> |
قسمت اول ویژگی، به صفحهای باز میشود (میرود) که با کلیک روی لینک باز میشود.
در همین حال، قسمت دوم ویژگی شامل متنی است که برای بازدیدکننده نمایش داده میشود تا وی را ترغیب کند تا روی آن لینک کلیک نماید.
اگر وبسایت خود را ایجاد میکنید، به احتمال زیاد تمام صفحات خود را در میزبانی وب حرفهای میزبانی خواهید کرد. در این حالت، لینکهای داخلی در وب سایت شما <a href=23mylinkedpage.htmlUP> اینجا لینک میشوند </a>.
بیایید یک برچسب لنگر ایجاد کنیم
اجازه دهید آن را امتحان کنید. از صفحه index.html فعلی خود یک کپی از کد ایجاد کنید. آن را در یک پنجره جدید در ویرایشگر HTML خود کپی / جایگذاری کنید.
این صفحه جدید را به عنوان “page2.html” ذخیره کنید و مطمئن شوید که در همان پوشه صفحه index.html شما ذخیره شده است.
در page2.html کد زیر را اضافه کنید:
|
1 |
<a href="http://www.google.com">Google</a> |
با این کار پیوندی به Google در page2 ایجاد میشود. ذخیره را انجام داده و به صفحه index.html خود بازگردید.
در یک خط جدید در index.html کد زیر را اضافه کنید:
|
1 |
<a href="*folder(s)*/page2.html">Page2</a> |
مطمئن شوید مسیر پوشه به پرونده صحیح است (page2.html). ذخیره و پیش نمایش index.html را در مرورگر خود وارد کنید.
اگر همه چیز درست باشد، لینکی مشاهده خواهید کرد که شما را به صفحه دوم خود هدایت میکند. در صفحه دوم، لینکی وجود دارد که شما را به google.com هدایت میکند.
نحوه افزودن تصاویر به HTML
در دنیای مدرن دیجیتال امروز، تصاویر همه چیز هستند. برچسب <img> هر آنچه برای نمایش تصاویر در سایت خود نیاز دارید را دارد. دقیقاً مانند <a> عنصر لنگر، <img> همچنین دارای یک ویژگی است.
این ویژگی اطلاعات مربوط به منبع، ارتفاع، عرض و ارتفاع متن تصویر را برای رایانه شما ارائه میدهد.
طراحی و قالببندی
با کلیک راست روی مورد و انتخاب “Properties” می توانید نوع فایل تصویر را بررسی کنید.
با استفاده از ویژگی کلاس میتوانید حواشی و سبکهای دیگر را در اطراف تصویر تعریف کنید. با این حال، ما در آموزش بعدی به این موضوع خواهیم پرداخت.
انواع پروندههایی که به طور آنلاین برای پروندههای تصویری بصورت آنلاین استفاده میشوند عبارتند از: .jpg ،png و gif.
متن Alt برای اطمینان از رتبهبندی صحیح سایت شما در سایتهای جستجو و همچنین بازدیدکنندگان کمبینای سایت از اهمیت برخوردار است.
برچسب <img> به صورت زیر نوشته میشود:
|
1 |
<img src="yourimage.jpg" alt="Describe the image" height="X" width="X"> |
اجازه دهید آن را امتحان کنید.
تصویر خود را با متن Alt ایجاد کنید.
تصویری (.jpg ، .png ، .gif) به انتخاب خود را در همان پوشه ای که index.html و page2.html را ذخیره کرده اید ذخیره کنید.
در یک خط جدید در ویرایشگر HTML خود کد زیر را وارد کنید:
|
1 |
<img src="testpic.jpg" alt="This is a test image" height="42" width="42"> |
آن را ذخیره کرده و پیشنمایش صفحه index.html را در مرورگر خود، مشاهده کنید.
منبع: HTML.com
دیدگاهتان را بنویسید