هر آنچه از HTML باید بدانید تا بهتر در در وردپرس بنویسید

html-article

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

خوب قبل از شروع به مرور کدها، لازم است بدانید که در کجا کدها وارد می شود. در ویرایشگر نوشته‌ها از بالا سمت چپ بر روی تب متن که در کنار دیداری قرار دارد کلیک کنید تا از ویرایشگر دیداری به متنی بروید.

Selection_093

اصول اولیه HTML

یادگیری HTML  بسیار ساده‌است، ۲۴ سال است که این زبان برای نمایش وبسایت‌ها به کار می‌رود.

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

HTML از یک سری تگ تشکیل شده است که در داخل علامت های کوچکتر و بزرگتری نوشته می شود مثل :

<span>
که در ادامه با این تگ‌ها بیشتر آشنا خواهید شد.
  • بیشتر تگ‌های HTML هم دارای تگ آغازین و هم تگ پایانی هستند.

اکثر تگ‌های HTML یک تگ آغازین (مثال: <html> ) و یک تگ پایانی (مثال: <html/>) هستند. همانطور که می‌بینید تگ پایانی همانند تگ آغازین هست اما در تگ پایانی یک اسلش (slash / ) در ابتدای تگ قرار دارد.

HTML هر آنچه که در میان تگ‌ها قرار می‌گیرد، قالب بندی می‌کند مثلا متنی را برجسته یا مورب می‌کند و یا اندازه فونتی را تغییر می‌دهد.

بعضی از تگ ها هستند که نیازی به تگ پایانی ندارند که این تگ ها در قالب بندی به کار نمی‌روند و برای مثال برای درج عنصری به کار می‌روند، مثل تگ تصویر که نیازی به تگ پایانی ندارد.

  • تگ‌های HTML باید به ترتیب بسته شوند

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

برای مثال شما می خواهید که متنی داشته باشید که هم برجسته باشد و هم مورب. کد زیر این کار را انجام می‌دهد:

<strong><em>Text</em></strong>

المان‌های HTML

به تگ آغازین و تگ پایانی و محتویات میان آن‌ها ، یک المان HTML می گویند. (HTML Element) برای مثال تگ پاراگراف را درنظر بگیرید یک المان پاراگراف به صورت زیر است:

<p>This is a paragraph</p>

پس تا اینجا متوجه شدید که تگ و المان در HTML دو چیز متفاوت هستند.

برای بعضی از تگ ها می‌توان صفت تعیین کرد

صفت ها(attribute) در HTML برای تغییر دادن یک المان به کار می‌رود. صفت ها در تگ آغازین و و بعد از فاصله‌ای بعد از نام تگ نوشته می شود، اول نام صفت و بعد مقدار صفت مشخص می‌شود. الگوی نوشتن صفت را در مثال زیر می‌توانید ببینید:

<TAG ATTRIBUTE="VALUE">

صفت‌ها  دلخواه هستند و می توان برای تگی هیچ صفتی تعیین نکرد اما المان‌هایی هستند که برای نمایش به صورت درست حتما نیاز است تا صفتی را تعیین کنید برای مثال المان تصویر، دارای صفتی برای تعیین مسیری که تصویر قرار دارد با نام SRC هست که باید مشخص شود تا تصویر را مرورگر بتواند بیابد و نمایش دهد کاربرد این صفت را در مثال زیر که لوگوی گوگل را نمایش می‌دهد می‌توانید ببینید:
<img src=”http://www.google.com/logo.jpg” alt=”Google”>

 

صفت ALT هم در مثال بالا به کار رفته است که برای نمایش متن زمانی که تصویر با مشکل مواجه می‌شود و بارگذاری نمی‌شود نمایش داده می‌شود.

HTML فضاهای خالی را حذف می‌کند

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

البته بعضی مواقع لازم است که فضایی بین متن قرار بگیرد که تگ هایی برای ایجاد پاراگراف و ایجاد خط بعد وجود دارد که در ادامه خواهید دید.

در HTML می توانید دیدگاه بگزارید

بسیاری از پوسته‌های وردپرس در میان طراحیشان دیدگاه‌(comment) وجود دارد. این به شما کمک می‌کند که بدانید هر قسمت از کد چه کاری انجام می‌دهد.

برای گذاشتن کامنت از تگ آغازین –!> و تگ پایانی <– می‌توانید استقاده کنید برای مثال در کد زیر یک نمونه دیدگاه را مشاهده می‌کنید:

<!--This is an HTML Comment-->

معرفی تگ‌ها

متن برجسته

برای عنوان ها و عبارات کلیدی می‌توان متن را برجسته کرد و برای برجسته کردن متن دو تگ وجود دارد، تگ اولی، تگ <b>  است که در استانداردهای گذشته HTML به کار می رفته است به صورت زیر به کار می‌رفته است:

<b>This text is bold</b>

از استاندارد html4 و xml به بعد استفاده از تگ <strong> توصیه شد. تگ strong علاوه بر برجسته کردن متن ماهیت معنایی هم دارد یعنی متنی که که با تگ strong  مشخص شده علاوه بر نمایش آن بصورت برجسته، از نظر معنایی هم مهم‌تر است پس این دو تگ در نمایش باهم تفاوتی ندارند. تفاوت معنایی آن‌ها با برنامه‌هایی که متن را می خوانند و یا موتور های جستحو مشخص می‌شود.

در آخر یک مثال از کد با تگ <strong> :

<strong>This text is styled using the strong tag</strong>

خوب حالا یک مثال تصویری هم بزنیم : این یک متن برجسته شده با تگ strong است.

لینک‌ها

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

ساختار ساده یک لینک به صورت زیر است:

<a href="http://www.hamyarwp.com">Link Text</a>

دستور بالا یک لینک ساده تولید می کند. ( به این شکل Link Text ) صفت HREF  برگه‌ وبی را که لینک باز می‌کند را مشخص می‌کند.

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

صفت TARGET یا هدف مشخص می کند که لینک در کجا باز شود. پنج مقدار برای این صفت وجود دارد: _BLANK و _SELF و _PARENT و _TOP و نام قالب. که مشهور ترین آنها _SELF و _BLANK است. _SELF که در همان پنجره‌ای که لینک قرار دارد صفحه جدید را باز می‌کند و _BLANK که لینک را در یک پنجره یا تب جدید از مرورگر باز می‌نماید.

مثال زیر استفاده از دو صفت TITLE و TARGET را نشان می‌دهد:

<a href="http://www.hamyarwp.com" title="Click here to visit our website" target="_blank">Link Text</a>

خروجی این مثال به این شکل است : Link Text

  با کدهای میانبر پست حرفه ای ایجاد کنید !

همانطور که گفته شد لینک به یک قسمتی از مطلب در داخل همان برگه هم می‌توان ایجاد کرد. کاربرد این کار برای مقالات طولانی است که می توان در اول مطلب فهرستی ایجاد که با کلیک بر روی هر لینک از فهرست کاربر به قسمت خاصی از مطلب برود.

برای پیوند در یک مطلب شما نیاز دارید تا یک بوکمارک (bookmark) ایجاد کنید و به آن لینک دهید. این کار با استفاده از صفت ID صورت می‌گرد.

برای ایجاد بوکمارک، کافی است که برای قسمتی که می خواهید لینک دهید یک لینک با صفت ID به صورت زیر ایجاد کنید:

<a id="overview">Text</a>

و بعد شما باید به این قسمت لینک دهید، این کار را می توانید با ایجاد یک لینک معمولی و تعریف صفت href  که مقدار آن حاوی نام (id) بوکمارک که اول آن یک علامت هش (#) قرار دارد ایجاد کنید. به این صورت :

<a href="#text">Click Here to Read The Text</a>

توجه کنید که به بوکمارک‌ها از هر جایی می توان لینک داد و لازم نیست که حتما لینک و بوکمارک در داخل یک برگه باشند. برای لینک دادن از خارج برگه که بوکمارک قرار دارد کافی است تا URL آن برگه را قبل از نام و هش وارد کنید به صورت زیر:

<a href="http://www.mywebsite.com/bigarticle.html#overview">Click Here to Read Our Overview</a>

به ایمیل هم می شود لینک داد، اما لینک به ایمیل باعث می‌شود که برنامه ایمیل باز گردد. الگوی لینک به ایمیل به صورت زیر است:

<a href="mailto:info@myemail.com?Subject=Email%20Us">Email Us</a>

نقل قول

تگ <blockquote> برای نقل قول مطالب به کار می‌رود، برای نقل قول کردن کافی‌است که متن داخل تگ <blockquote> گذاشته شود:

<blockquote>This is a blockquote</blockquote>

که به صورت زیر نمایش داده می‌شود:

This is a blockquote

تصاویر

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

تگ تصویر <img> با صفت SRC و ALT نوشته شود. صفت‌های width  و height برای تعیین عرض و ارتفاع تصویر به کار می‌روند. خوب است که مثال زیر را ببنید تا نحوه کار تگ تصویر را مشاهده کنید:

<img src="http://www.google.com/logo.jpg" alt="Google" width="370" height="144">

نمایش کد بالا به صورت زیر است:

logo11w

در وردپرس افزودن تصاویر خیلی راحت از طریق دکمه ” افزودن پرونده چندرسانه‌ای” انجام می‌شود اما اگر بدانید که تگ <img> چگونه کار می‌کند به راحتی می‌توانید خطاهایی که پیش می‌آید را بر طرف کنید.

لیست‌ها

لیست‌ها در HTML کاربردهای زیادی دارند یکی از این کاربردها وقتی است که لیست را با css قالب‌بندی می کنید به صورتی که از آن به عنوان یک منوی عمودی یا افقی استفاده شود. که البته در اینجا فقط به معرفی تگ html آن می‌پردازیم.

دو نوع لیست در html موجود است، لیست مرتب و نامرتب، ساختار هر دو یکسان است اما در لیست مرتب آیتم ها با شماره مشخص می‌گردد ولی در لیست نامرتب با دایره یا هر شکلی دیگر. تگ <ul> برای ایجاد لیست نامرتب و تگ <ol> برای ایجاد لیست مرتب به کار می‌رود و هر آیتم در داخل تگ <li> قرار می گیرد که کل آیتم‌ها با تگ <ul> و یا <ol> در بر گرفته می شود.

کد زیر یک مثال از لیست نامرتب را نشان می‌دهد:

<ul>
<li>New York</li>
<li>Los Angeles</li>
<li>Boston</li>
</ul>

که خروجی این مثال به این صورت است :

  • New York
  • Los Angeles
  • Boston

برای ایجاد لیست مرتب کافی است در مثال بالا به جای تگ <ul> از تگ <ol>  استفاده شود. کد زیر این تغییر را نشان می‌دهد:

<ol>
<li>New York</li>
<li>Los Angeles</li>
<li>Boston</li>
</ol>

که خروجی این کد نیز به صورت زیر است:

  1. New York
  2. Los Angeles
  3. Boston

عنوان ها

تگ‌های عنوان برای تعیین عنوان‌ها و تیترها در HTML به کار می‌رود. تگ‌های عنوان شامل شش تا تگ است که از <h1> شروع می شود تا <h6> که به ترتیب اولویت <h1> برای تعیین مهم‌ترین عنوان به کار می‌رود و <h6> کم اهمیت ترین عنوان. اندازه و نوع فونت و رنگ عنوان ها در css تعیین می شود اما تنها ویژگی که با تگ ها ظاهر می شود اندازه عنوان‌ها است که h1 بزرگترین اندازه است و تا h6 به نسبت اهمیت کوچک تر می شود.

یک مثال از استفاده عنوان ها را در کد زیر می‌توانید ببینید:

<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>

که کد بالا به صورت زیر نمایش داده می‌شود:

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

پاراگراف‌ها

در وردپرس و در هر ویرایشگر دیگر برای ایجاد پاراگراف جدید کافی است تا دکمه Enter زده شود. که در ویرایشگر وردپرس با زدن enter تگ <p> ایجاد می شود. تگ <p> برای ایجاد پاراگراف به کار می رود کاربرد این تگ را در مثال زیر مشاهده می کنید:

<p>This text will be placed inside a paragraph.</p>

افزودن خط جدید

ممکن است گه بخواهید درون المان پاراگراف یک خط جدید ایجاد کنید بدون اینکه از تگ <p> استفاده کنید. تگ <br> برای این منظور به کار می‌رود. البته در برون المان پاراگراف هم این تگ را می توانید استفاده نمایید.

خوب الان نوبت مثال این تگ است :

Hello there.
<br>My name is Kevin.
<br>What is your name?

که کد بالا خروجی به صورت زیر دارد:

Hello there.

My name is Kevin.

What is your name?

تقسیم بندی

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

تگ html که برای تقسیم بندی به کار می‌رود <div> است. که یک المان بلوکی است به این معنی که هر المان تقسیم بندی قبل و بعدش یک خط فاصله ایجاد می شود که از بقیه محتوا جدا می‌گردد، البته این ویژگی را با css  می توان داد.

تقسیم بندی بسیار در پوسته های وردپرس به کار می رود به عنوان مثال یک نوار کناری به صورت زیر می توان نشان داد:

<div id="sidebar">
<!-- Sidebar Content Here-->
</div>

تقسیم بندی ها برای جایگزاری المان ها در صفحه به کار می روند.
محدوده
محدوده‌ها همانند تقسیم بندی است که فرق آن در این است که محدوده یک المان خطی است و در یک خط می توانید قرار گیرد بدون آنکه یک خط بین المان ها فاصله بیافتد. این تگ برای تغییر ظاهر قسمت‌هایی از متن بکار می‌رود. (البته که ظاهر با css تعیین می شود.)
تگ محدوده است که در مثال زیر کاربرد آن را مشاهده می کنید:

David wanted the <span style="color:green;">green</span> t-shirt.

مثال فوق خروجی زیر را تولید می کند:
David wanted the green t-shirt.

حرف پایانی

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

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

اگر می‌خواهید از آخرین و محبوب‌ترین مقالات ما در ایمیل خود مطلع شوید، همین الان ایمیل خود را در کادر زیر وارد کنید:

تعداد علاقه‌مندانی که تاکنون عضو خبرنامه ما شده‌اند:

331,406 نفر

پاسخی بگذارید

دیدگاه‌های این نوشته جدید ترین ها شاخص

  1. 5 سال عضو همیار وردپرس

    نمونه کد در ارتباط با سوال قبلی

    Untitled Document

  2. 5 سال عضو همیار وردپرس

    با سلام و احترام
    عذر خواهم که مزاحم شدم
    من یک فایل html دارم که در آن استانهای نقشه ایران را نمایش می دهد حالا می خواهم این فایل را یک برگه مستقل وردپرس نمایش دهم حالا چگونه اقدام کنم؟
    آیا برای ابتدا و انتهایش نیاز به تگ خاصی است؟

  3. سلام،
    میشه بگید از کجا میشه اندازه و نوع فونت هدر ها رو تغییر داد؟ این css کجاست؟
    من برنامه نویسی بلد نیستم، اگه مسیر و اقداماتی که باید انجام بشه رو توضیح بدین ممنون میشم.

  4. با سلام
    من تو همین مبحث یه مشکلی دارم
    وقتی دکمه ی اینتر رو میزنم که یه پاراگراف جدید ایجاد بشه فاصله ها رو رعایت نمیکنه تقریبا هرچی آموزش بود تو اینترنت انجام دادم ولی هیچکدوم عمل نکردم
    منظور من اینه
    مثلا مینویسم :
    تست ۱

    تست ۲

    ولی نشون میده
    تست ۱
    تست۲

    فاصله هارو صلا خودش حذف میکنه که نمیخوام اینطوری بشه
    ممنون میشم راهنماییم کنین

  5. با سلام و خسته نباشید
    من توی سایتتون نتونستم راه حل مشکلم رو پیدا کنم،ممنون میشم به مشکلم جواب بدید.من وقتی تصاویر رو اپلود میکنم یا به روز رسانی افزونه ها رو انجام میدم هیچ کدوم انجام نمیشه حتی نمیتونم افزونه ی دیگه ای هم نصب کنم و این اخطار ظاهر میشه!
    “نوشتن پرونده روی دیسک با خطا مواجه شد.”

  6. خیلی مفید بود
    یه سوال داشتم
    چجوری میشه یه لینک رو در تب جدید مرورگر باز کرد ولی نشون داده نشه؟یعنی همون blank اما بیننده رو به اون صفحه هدایت نکنه و فقط لینک رو باز کنه

  7. سلام.
    یه سوال ! تو وردپرس تابعی هست که از http://hamyarwp.com/example فقط example رو در اختیار ما قرار بده؟

  8. ممنون مطالب جالبی بود

  9. بسیار عالی !!!

    ولی کاش میگفتین از نظر سئو استفاده از برای تیتر مطالب بهتره یا تگ

  10. سلام خسته نباشید. مطلب مفیدی بود. یک نکته ی تکمیلی میمونه و به نظر من خیلی از همکاران زیاد با اون آشنایی ندارند و اون تاثیر HTML در قضیه ی SEO هستش، البته این مساله بیشتر به HTML5 مربوط میشه، تگ هایی مثل article و section و footer میتونن به موتورهای جوستجو کمک کنند به عنوان مثال تگ article این مطلب را میرسونه که متون میان این تگ به عنوان توضیح یک مساله هست و موتور های جوستجو گر این مساله را در نظر میگیرن. به طور کل HTML یکی از مهمترین مسائل در طراحی وب هست و خیلی خوبه که شما به این موضوع پرداختید. موفق باشید

  11. خیلی خوبه مهران جان

  12. 6 سال عضو همیار وردپرس

    بسیار عالی بود
    جامع و دقیق …
    موفق باشید

مطالب زیر را حتما بخوانید

دوره‌های آموزشی