حتما شنیده اید که در گفتگوهای روزمره می گویند فلان خبر یا فلان شخص تیتر یک شد. این یعنی آن خبر یا شخص به قدری اهمیت دارد که در بهترین و مهم ترین بخش خبرها قرار گرفت. اهمیت عناوین و تیترها یا به انگلیسی Heading در صفحات HTML غیر قابل انکار است. لذا در این جلسه قصد داریم به چگونگی اضافه کردن تیترها و تگ های مرتبط, متن و لینک ها در HTML بپردازیم.
برای اضافه کردن تیترها از تگ های H1 تا H6 استفاده میشود. تگ H1 دارای بیشترین اعتبار و ارزش است و سایر تگ ها به ترتیب از ارزش هایی کمتر از آن برخوردارند.
برای دسترسی به جلسه 2 آموزش HTML از این لینک استفاده کنید.
در HTML ، عناوین در عناصر زیر نوشته می شوند:
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
بله کاملا درست حدس زدید از <h1> و <h2> باید برای مهمترین عناوین استفاده کنید, در حالی که از تگ های باقیمانده باید برای عنوان های فرعی و متن های کم اهمیت تر استفاده شود.
ربات های موتور جستجو هنگام رمزگشایی از مهمترین اطلاعات یک صفحه ، از این ترتیب استفاده می کنند. پس بسیار مهم است که برای انتخاب درست آنها وقت بگذارید.
حال بیایید نوشتن عنوان را امتحان کنیم. در یک خط جدید در ویرایشگر HTML ، تایپ کنید:
<h1>Welcome to My Page</h1>
و ذخیره را بزنید. ما این پرونده را به عنوان “index.html” در پوشه جدیدی به نام “my webpage” ذخیره می کنیم.
روی پرونده ای که ایجاد کردید, کلیک کنید. خب اولین صفحه وب شما باید در مرورگر پیش فرضتان باز شود. شاید خیلی زیبا نباشد چون فقط یک عنوان است اما شما آن را نوشتید و این یعنی یک شروع 🤗 .
بله . طبق معیارهای گوگل از تگ H1 فقط باید یک بار استفاده کرد. استفاده ی بیش از یک بار از این تگ برای موتورهای جستجو اصلا معیار خوبی محسوب نمی شود و ممکن است شما را با مشکلاتی برای دریافت رتبه مواجه کند.
از سایر تگ ها نیز باید به اندازه و در جای مناسب استفاده کرد. قطعا یک متن 200 کلمه ای نباید دارای 6 یا 7 تگ تیتر باشد. پس استفاده ی درست و منطقی از تگ های تیتر به زیباتر شدن متن, کمک به خوانایی بهتر آن برای کاربر و در نتیجه دریافت رتبه ی خوب در موتورهای جستجو کمک خواهد کرد.
افزودن متن به صفحه HTML با استفاده از تگ <p> بسیار ساده است. خیلی راحت تمام متن خود را درون عنصر <p> قرار می دهیم.
هنگامی که متن را به HTML می نویسیم ، تعدادی عنصر دیگر نیز داریم که می توانیم از آنها برای کنترل متن و یا نمایش آن به روش خاصی استفاده کنیم. مانند مواردی که در جدول زیر آمده است.
|
هدف |
معنی |
عنصر |
|
برجسته کردن اطلاعات مهم |
بولد(برجسته, پررنگ) | <b> |
| مانند بولد عمل می کند, برای برجسته کردن متن های کلیدی | قوی |
<strong> |
|
برای نشان دادن متن |
ایتالیک(مورب) | <i> |
| معمولاً به عنوان توضیحات تصویراستفاده می شود | متن تأکید شده |
<em> |
|
برجسته کردن پس زمینه متن |
متن علامت گذاری شده | <mark> |
| برای کوچک کردن متن | متن کوچک |
<small> |
|
برای قرار دادن یک خط افقی روی متن |
متن خط خورده | <strike> |
| برای پیوندها یا متن ها نشان گذاری شده, استفاده می شود | متن زیرخط دار |
<u> |
|
با زیرخط نمایش داده می شود تا متن درج شده نشان داده شود |
متن درج شده | <ins> |
|
انتخاب سبک تایپوگرافی |
متن زیرنویس |
<sub> |
| یک سبک تایپوگرافی دیگر | متن بالانویس |
<sup> |
برای استفاده از این تگ ها, لازم است تا آنها دراطراف متن مورد نظر باز و بسته شوند.
اگر قصد دارید که آنها را استفاده کنید, در یک خط جدید در ویرایشگر ، کد HTML زیر را تایپ کنید:
<p>Welcome to <em>my</em> brand new website. This site will
be my <strong>new<strong> home on the web.</p>
برای دیدن نتیجه ی حاصل شده, لازم است که تغییرات را ذخیره و صفحه را رفرش کنید.
همانطور که میدانید لینک ها بخش های مهمی از یک وب سایت هستند. تقریباً هر چیزی که هنگام وبگردی روی آن کلیک می کنید ، به عنوان پیوند شما را به صفحه دیگری در وب سایتی که بازدید می کنید یا به یک سایت خارجی هدایت می کند.
عنصر لنگر (ancher): تگ لنگر HTML پیوندی را تعریف می کند که یک صفحه را به صفحه دیگر پیوند می دهد. این می تواند پیوند به صفحه وب دیگر و همچنین پرونده ها ، موقعیت مکانی یا هر URL دیگر باشد.
تگ باز <a> به صورت زیر نوشته میشود:
<a href=”https://blogging.com/how-to-start-a-blog/”>Your Link Text Here </a>
قسمت اول که با عنوان href که ویژگی تگ <a> است به صفحه ای اشاره دارد که با کلیک روی پیوند, به آن منتقل میشویم.
در حالی که قسمت دوم متنی است که برای بازدید کننده نمایش داده می شود تا وی را فریب دهد 😒 و روی لینک کلیک کند.
اگر در حال ساخت وب سایت خود هستید و از میزبانی حرفه ای وب استفاده می کنید در این حالت ، پیوندهای داخلی وب سایت شما
<”a href=”mylinkedpage.html> اینجا لینک می شوند </a>.
در ابتدا از صفحه index.html فعلی خود یک کپی از کد تهیه کنید و آن را در یک پنجره جدید در ویرایشگر HTML کپی / جایگذاری کنید.
این صفحه جدید را به عنوان “page2.html” ذخیره کنید و مطمئن شوید که در همان پوشه صفحه index.html ذخیره شده است.
در page2.html کد زیر را اضافه کنید:
<a href=”http://www.google.com“>Google</a>
با این کار پیوندی به Google در صفحه 2 ایجاد می شود. ذخیره را انجام داده و به صفحه index.html خود بازگردید.
در یک خط جدید در index.html کد زیر را اضافه کنید:
<a href=”*folder(s)*/page2.html”>Page2</a>
بابت مسیر پوشه به فایل (page2.html) مطمئن شوید. سپس ذخیره و پیش نمایش index.html را در مرورگر خود وارد کنید.
اگر همه چیز درست پیش رفته باشد، پیوندی را مشاهده می کنید که شما را به صفحه دوم خود هدایت می کند و در صفحه دوم ، پیوندی وجود دارد که شما را به google.com هدایت می کند.
با ما در جلسات بعد همراه باشید تا قدم به قدم شما را به یک HTML کار حرفه ای تبدیل کنیم.✌
😊✌ از بقیه‌ی جلسات آموزش رایگان HTML جا نمونید✌😊
منبع؛ www.html.com
سلام
خسته نباشید بسیار عالی بود