حتما شنیده اید که در گفتگوهای روزمره می گویند فلان خبر یا فلان شخص تیتر یک شد. این یعنی آن خبر یا شخص به قدری اهمیت دارد که در بهترین و مهم ترین بخش خبرها قرار گرفت. اهمیت عناوین و تیترها یا به انگلیسی Heading در صفحات HTML غیر قابل انکار است. لذا در این جلسه قصد داریم به چگونگی اضافه کردن تیترها و تگ های مرتبط, متن و لینک ها در HTML بپردازیم.
برای اضافه کردن تیترها از تگ های H1 تا H6 استفاده میشود. تگ H1 دارای بیشترین اعتبار و ارزش است و سایر تگ ها به ترتیب از ارزش هایی کمتر از آن برخوردارند.

برای دسترسی به جلسه 2 آموزش HTML از این لینک استفاده کنید.

چگونه عناوین 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

افزودن متن به صفحه HTML با استفاده از تگ <p> بسیار ساده است. خیلی راحت تمام متن خود را درون عنصر <p> قرار می دهیم.

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

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

برای استفاده از این تگ ها, لازم است تا آنها دراطراف متن مورد نظر باز و بسته شوند.

اگر قصد دارید که آنها را استفاده کنید, در یک خط جدید در ویرایشگر ، کد HTML زیر را تایپ کنید:

<p>Welcome to <em>my</em> brand new website. This site will

be my <strong>new<strong> home on the web.</p>

برای دیدن نتیجه ی حاصل شده, لازم است که تغییرات را ذخیره و صفحه را رفرش کنید.

🧐🤗 یک نکته ی مهم اینکه برای یادگیری بهتر میتوانید از دوره ی آموزشی مقدماتی HTML  و CSS که در سایت افق وب به صورت رایگان در اختیار شما قرار گرفته است استفاده کنید. 🤗🧐

چگونگی اضافه کردن لینک ها در HTML

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

تگ Anchor

عنصر لنگر (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>.

در اینجا قصد داریم یک تگ Anchor ایجاد کنیم.

در ابتدا از صفحه 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