جستجو برای:
  • صفحه نخست
  • مقالات آموزشی
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
  • قالب رایگان وردپرس
    • قالب فروشگاهی
    • قالب ویژه مشاغل
    • قالب آموزشی
    • قالب پزشکی
    • قالب شرکتی
    • قالب نمونه کار
    • قالب وبلاگی
    • قالب مجله خبری
    • قالب چند منظوره
    • قالب تک صفحه ای
  • افزونه وردپرس
    • آموزش رایگان المنتور
    • آموزش های ووکامرس
  • دوره های آموزشی
    • آموزش کسب درآمد اینترنتی
    • آموزش طراحی سایت با المنتور
    • آموزش جامع وردپرس
    • آموزش فارسی سازی قالب وردپرس
    • آموزش HTML-CSS مقدماتی
    • آموزش ووکامرس مقدماتی
 
افق وب
  • صفحه نخست
  • مقالات آموزشی
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
  • قالب رایگان وردپرس
    • قالب فروشگاهی
    • قالب ویژه مشاغل
    • قالب آموزشی
    • قالب پزشکی
    • قالب شرکتی
    • قالب نمونه کار
    • قالب وبلاگی
    • قالب مجله خبری
    • قالب چند منظوره
    • قالب تک صفحه ای
  • افزونه وردپرس
    • آموزش رایگان المنتور
    • آموزش های ووکامرس
  • دوره های آموزشی
    • آموزش کسب درآمد اینترنتی
    • آموزش طراحی سایت با المنتور
    • آموزش جامع وردپرس
    • آموزش فارسی سازی قالب وردپرس
    • آموزش HTML-CSS مقدماتی
    • آموزش ووکامرس مقدماتی
ورود / عضویت

وبلاگ

افق وب > بلاگ > مقالات آموزشی > برنامه نویسی > HTML-CSS > آموزش رایگان HTML – جلسه 3

آموزش رایگان HTML – جلسه 3

تیر 14, 1400
HTML-CSS, برنامه نویسی

حتما شنیده اید که در گفتگوهای روزمره می گویند فلان خبر یا فلان شخص تیتر یک شد. این یعنی آن خبر یا شخص به قدری اهمیت دارد که در بهترین و مهم ترین بخش خبرها قرار گرفت. اهمیت عناوین و تیترها یا به انگلیسی 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 - جلسه 3|لینک ها در HTML
آموزش رایگان HTML – جلسه 3|لینک ها در HTML

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

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

 

دوره ی آموزش 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 ایجاد کنیم.

آموزش رایگان html - جلسه 3|لینک ها در HTML
آموزش رایگان HTML – جلسه 3|لینک ها در HTML

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

 

5/5 - (1 امتیاز)
برچسب ها: htmlآموزش رایگان htmlتگ های html
درباره پروین رستمی

عضو تیم تحریریه افق وب

جدیدتر 12 قانون طلایی برای ارائه خدمات به مشتریان
قبلی قالب رایگان چند منظوره وردپرس Flash

1 Comment

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

  • میثم گفت:
    مرداد 10, 1400 در 6:09 ب.ظ

    سلام
    خسته نباشید بسیار عالی بود

    پاسخ

دیدگاهتان را بنویسید لغو پاسخ

تازه های آموزش
  • تقویم محتوا چیست؟ (جلسه 33)
  • استراتژی تولید محتوا (جلسه 32)
  • عادت‌ نویسندگان مشهور و سرشناس (جلسه 31)
  • راهنمای کامل تغذیه محتوا نویس (جلسه 30)
  • چگونه یک محتوای تصویری خوب بسازیم؟ (جلسه 29)
  • 10 تکنیک برای افزایش فالوور اینستاگرام (جلسه 28)
  • راه اندازی کمپین در شبکه های اجتماعی (جلسه 27)
  • آموزش 0 تا 100 ایمیل نویسی (جلسه 26)
آموزش رایگان ووکامرس
آموزش رایگان المنتور
آموزش رایگان html -css
درباره افق وب

ما در افق وب آرزو داریم هرکسی بتواند وبسایت خودش را مطابق سلیقه دلخواه خودش طراحی کند و در این مسیر تمامی آموزش های لازم را از پایه و با بالاترین کیفیت ممکن به صورت کاملا کاربری ارائه میدهیم

دسترسی بیشتر
  • قوانین و شرایط
  • ارتباط با ما
  • استخدام
  • تدریس خصوصی وردپرس
ارتباط با ما
  • تهران، رباط کریم، مجتمع اداری پردیسان
  • 02156434684
  • info@ofoghweb.com
تمامی حقوق برای افق وب محفوظ می باشد.
اشتراک گذاری در شبکه های اجتماعی
ارسال به ایمیل
https://ofoghweb.com/?p=13200
ورود به سیستم ×

ورود با کد یکبارمصرف
واتساپ
ارسال مجدد کد یکبار مصرف(00:30)
آیا حساب کاربری ندارید؟
نام‌نویسی

ارسال مجدد کد یکبار مصرف (00:30)
برگشت به صفحه ورود به سایت
  • (+98) جمهوری اسلامی ایران
مرورگر شما از HTML5 پشتیبانی نمی کند.