برای اینکه به صورت آنلاین قابل فروش و انعطاف پذیر باشید، فقط باید بدانید که چگونه یک مقاله کامل HTML را قالب بندی کنید، یا چگونه چیزها را تغییر دهید.
نکات کلیدی
- HTML برای نویسندگانی که مقالاتشان به صورت آنلاین منتشر می شود ضروری است زیرا وب سایت ها از HTML برای ارائه محتوا به صورت بصری و ساختار آن برای خزنده های موتورهای جستجو استفاده می کنند.
- تگهای عنوان، تگهای پررنگ و مورب و تگهای پاراگراف، تگهای کلیدی HTML هستند که نویسندگان باید بدانند تا بر قالببندی و ظاهر بصری محتوای خود کنترل کامل داشته باشند.
- فهرستها، جدولها و برچسبهای تصویری شمارهدار و گلولهای برای سازماندهی اطلاعات و افزایش جذابیت بصری مقالات مفید هستند، در حالی که لینکها زمینه را اضافه میکنند و رتبه موتور جستجو را افزایش میدهند.
بسیاری از نویسندگان، حتی در میان کسانی که فناوری را پوشش می دهند، فکر می کنند که نیازی به دانستن HTML ندارند. اما اگر مقالات شما به صورت آنلاین منتشر شوند، بیش از آنچه فکر می کنید به HTML نیاز دارید.
به این دلیل که وب سایت ها از HTML برای ارائه محتوای شما استفاده می کنند. در حالی که بسیاری از ویرایشگرهای نشانه گذاری، سازندگان وب سایت و سیستم های مدیریت محتوا به شما اجازه می دهند مقالات خود را به صورت بصری ویرایش کنید، آنها همچنان از تگ های HTML در زیر استفاده می کنند.
بنابراین، اگر می خواهید کنترل کامل خروجی خود را در دست بگیرید و قالب بندی آن را به دقت تنظیم کنید، اینها تگ های اساسی HTML هستند که باید در مورد آنها بدانید.
۱. تگ های عنوان
تگ های عنوان به شما این امکان را می دهند که یک بخش یا زیربخش از مقاله خود را خلاصه کنید. به طور پیشفرض، مرورگر آنها را با فونت بزرگتر و پررنگتر نمایش میدهد که باعث میشود عناوین شما بسیار متمایزتر از بقیه مطالب شما باشند.
با این حال، جدا از این نشانه های بصری، تگ های عنوان نیز ساختار و سلسله مراتب محتوای شما را ارائه می دهند و درک صفحه را برای خزنده های موتورهای جستجو آسان تر می کنند.
شش تگ سرفصل شماره دار وجود دارد که اعداد بزرگتر نشان دهنده عناوین پایین تر هستند. به عنوان مثال، از تگ
برای نشان دادن عنوان اصلی صفحه، از تگ های
برای هر بخش و از تگ
برای هر زیربخش استفاده کنید.
برای هر زیربخش استفاده کنید.
اطمینان حاصل کنید که از ساختار معقولی برای نوع صفحه و مخاطبان خود استفاده می کنید. تگهای
و
ممکن است برای اسناد بسیار فنی یا قانونی مناسب باشند، اما پیگیری آنها برای یک خواننده معمولی دشوار است.
از سوی دیگر، سرفصلها میتوانند مقاله شما را به تکههای قابل هضم تقسیم کنند. دیواری از متن می تواند برای خواندن آنلاین آزاردهنده باشد و بسیاری از خوانندگان چنین مطالبی را پنهان می کنند. تگهای عنوان به خواننده شما اجازه میدهد تا کمی استراحت کند – دقیقاً مانند یک سخنران که قبل از غوطهور شدن در موضوع دیگر، استراحت کوتاهی میکند.
فراموش نکنید که برای پایان دادن به عنوان از یک تگ پایانی (به عنوان مثال
) استفاده کنید.
۲. پررنگ، کج، و دیگر قالب بندی متن
تگ های عنوان به طور قابل توجهی بر ساختار صفحه شما تأثیر می گذارد، اما سایر برچسب ها جزئیات بسیار دقیق تری را هدف قرار می دهند. برای مثال، وقتی میخواهید روی قسمت کوچکی از جمله تأکید کنید، میتوانید از چندین تگ قالببندی برای این کار استفاده کنید. این تگ ها ظاهر متن شما را بدون تأثیر بر سلسله مراتب محتوای شما تغییر می دهند.
در اینجا برخی از متداول ترین تگ های قالب بندی استفاده می شود:
- برای متن پررنگ.
- برای متن ایتالیک.
برای متن خط خطی.
میتوانید از اینها برای تأکید بر مفاهیم، توضیح تعاریف و علامتگذاری متن بهعنوان نامرتبط استفاده کنید. دقیقاً مانند تگ عنوان، شما به یک جفت تگ باز/بسته نیاز دارید تا متنی را که روی آن اعمال می شود شناسایی کنید.
هنگامی که متنی را از برنامه دیگری جایگذاری میکنید، ابزارهای Markdown و مدیریت محتوا اغلب روی قالببندی کپی میشوند. میتوانید با حذف این برچسبها از منبع یا با حذف قالببندی هنگام کپی و چسباندن متن، آن را پاک کنید.
۳. پاراگراف ها و فاصله
جدا از استفاده از تگ های عنوان برای گروه بندی متن خود در بخش ها، می توانید از تگ های
و
نیز برای اعلام پاراگراف ها یا شکست های خط استفاده کنید.
بسیاری از ویرایشگرهای بصری این تگ ها را به طور خودکار هنگام نوشتن اضافه می کنند – به عنوان مثال، وقتی Enter را فشار می دهید. با این حال، اگر در نمای منبع می نویسید، می توانید آنها را به صورت دستی به HTML خود اضافه کنید.
اگر نمیخواهید پاراگراف جدیدی ایجاد کنید، اما همچنان برای جدا کردن خطوط متن به یک خط شکن نیاز دارید، از تگ
استفاده کنید. به عنوان مثال، بگویید که در حال نوشتن یک شعر هستید. شما برای هر خط نیازی به تگ
ندارید زیرا از همان تفکر پیروی می کند. بنابراین، به جای آن باید از تگ
استفاده کنید.
تگ
یکی از معدود تگ هایی است که تگ نزدیک منطبق ندارد، بنابراین فقط از آن به تنهایی استفاده کنید. این به این دلیل است که محتوایی ندارد که بر آن تأثیر بگذارد یا توصیف کند.
این تگها میتوانند به شما کمک کنند تا قوانین طراحی اسناد و وبسایتهایی که ظاهر حرفهای دارند را دنبال کنید و به صفحه شما در چشم خوانندگان (و موتورهای جستجو) قابل اعتمادتر به نظر برسد.
۴. اعداد و گلوله ها
لیست های شماره گذاری شده و گلوله ای نیز برای سازماندهی محتوا مفید هستند. اگر گروهی از آیتمها را ارائه میدهید، مانند مجموعهای از مواد تشکیل دهنده یا یک سری مراحل که باید دنبال کنید، فهرستها برای این کار عالی هستند.
برای ایجاد یک لیست شماره دار یا مرتب شده، از تگ
- استفاده کنید. از طرف دیگر، از تگ
- – که مخفف لیست نامرتب است – برای ایجاد یک لیست با نقاط گلوله استفاده کنید. هنگامی که نوع لیست را انتخاب کردید، از تگ
- برای “مورد لیست” استفاده کنید تا هر مورد را در لیست شناسایی کنید.
در اینجا چند نمونه نشانه گذاری برای یک لیست مرتب شده با پنج مورد آورده شده است:
<ol>
<li>alpha</li>
<li>bravo</li>
<li>charlie</li>
<li>delta</li>
<li>echo</li>
</ol>یک مرورگر این نشانه گذاری را چیزی شبیه به زیر نشان می دهد:
اگر می خواهید به جای آن از نقاط گلوله استفاده کنید، به سادگی
- را با
- جایگزین کنید تا یک لیست گلوله ای دریافت کنید.
همچنین میتوانید تگهای
- و
- را در صورت داشتن چندین سطح اطلاعات، تودرتو کنید. به عنوان مثال، فرض کنید می خواهید یک لیست مانند این ایجاد کنید:
با نشانه گذاری زیر می توانید این کار را انجام دهید:
<ol>
<li>alpha</li>
<li>
bravo
<ol>
<li>Hip</li>
<li>Hip</li>
<li>Hooray</li>
</ol>
</li>
<li>charlie</li>
<li>
delta
<ul>
<li>Difference</li>
<li>River mouth</li>
</ul>
</li>
<li>echo</li>
</ol>میتوانید فهرستها، از جمله فهرستهایی از انواع مختلف، را برای نمایش ساختارهای پیچیدهتر و سازماندهی اطلاعات به گونهای که خوانندگان شما بتوانند موضوع را بهتر درک کنند، قرار دهید.
۵. ساخت جدول
در حالی که لیست های گلوله ای و شماره گذاری شده راه بسیار خوبی برای سازماندهی مقدار کمی از اطلاعات هستند، گاهی اوقات شما باید با چندین قطعه داده مرتبط کار کنید. هنگامی که این مورد است، اغلب منطقی است که داده های خود را در یک جدول قرار دهید.
ابتدا با تگ
شروع کنید. این شامل تمام اطلاعاتی است که می خواهید در جدول ارائه دهید. در داخل آن، از تگ
برای نمایش هر ردیف استفاده کنید. در هر ردیف، از تگ برای نمایش یک سلول استفاده کنید. مخفف “داده های جدول” است. می توانید به جای از برای نشان دادن سرصفحه جدول استفاده کنید. فراموش نکنید که برچسب های بسته شدن را برای جدول، ردیف ها و سلول های خود اضافه کنید. در اینجا یک جدول مثال با دو ستون، چهار سطر و سرصفحه در سطر اول آمده است:
<table>
<tr>
<th>Group 1</th>
<th>Group 2</th>
</tr>
<tr>
<td>Mark</td>
<td>Belle</td>
</tr>
<tr>
<td>Ralph</td>
<td>Shane</td>
</tr>
<tr>
<td>John</td>
<td>Josie</td>
</tr>
</table>جدول در مرورگر شما باید به این صورت باشد:
شما می توانید به تعداد دلخواه سطر و ستون اضافه کنید. فقط به یاد داشته باشید که هنگام ساخت جدول با استفاده از HTML، شما روی آن سطر به سطر کار می کنید، نه ستون به ستون. می توانید از CSS مدرن برای استایل دادن به جداول خود با حاشیه ها، ردیف های رنگی و موارد دیگر استفاده کنید.
۶. اضافه کردن تصاویر
درج یک تصویر در صفحه شما کمی با علامت گذاری محتوای متنی متفاوت است. از آنجایی که دادههای تصویر معمولاً با متن نمایش داده نمیشوند، باید آنها را در یک فایل جداگانه ذخیره کنید، و به روشی برای نشان دادن مکان آن فایل در کنار یک برچسب نیاز دارید.
شما می توانید از تگ
برای درج یک تصویر در سند خود استفاده کنید، اما باید از یک ویژگی HTML به نام “ویژگی ها” برای تعیین محل فایل تصویر استفاده کنید. شما می توانید ویژگی ها را بعد از نام تگ، اما قبل از براکت زاویه بسته اضافه کنید. صفات دارای یک نام و یک مقدار با علامت تساوی بین آنها هستند. از دو نقل قول در اطراف مقادیر ویژگی استفاده کنید.
در اینجا یک مثال است:
<img alt="tree leaves and branches"
src="https://images.unsplash.com/photo-1532365673558-f9bb768644e7">در این مورد، ویژگی “src” (مخفف “منبع”) نشان دهنده URL تصویری است که باید گنجانده شود. این می تواند یک URL نسبی یا مطلق باشد، که اغلب به این بستگی دارد که یک تصویر خارجی باشد یا روی همان سرور.
در همین حال، ویژگی “alt” مخفف “متن جایگزین” است و باید محتوای تصویر را توصیف کند. معمولاً باید این ویژگی را لحاظ کنید زیرا برای صفحه خوان ها و موتورهای جستجو به طور یکسان ارزشمند است. هر کسی – انسان یا ماشین – که به هر دلیلی نمی تواند تصویر اصلی را ببیند، می تواند از متن جایگزین استفاده کند که به آنها بگوید چه چیزی حاوی آن است.
مرورگرها تگ
را با تصویری که در نشانی اینترنتی که در ویژگی src ارائه میدهید جایگزین میکنند و آن را به شکل زیر در صفحه جاسازی میکنند:
اگر فایل موجود در URL src یک تصویر معتبر نیست، از جمله اگر اصلا وجود نداشته باشد، مرورگر معمولاً یک مستطیل خالی با متن جایگزین در داخل آن نمایش میدهد.
۷. افزودن لینک از طریق HTML
در نهایت، یکی از ویژگی های متمایز HTML: لینک. پیوندها به صفحات دیگر در سایت شما و آنهایی که در وب سایت های خارجی هستند، می توانند زمینه را به اطلاعاتی که ارائه می کنید اضافه کنند و رتبه آن را در نتایج موتورهای جستجو افزایش دهند.
برای افزودن پیوند، از تگ با ویژگی “href” استفاده کنید که حاوی URL است که باید هدف پیوند باشد. متن (یا محتوای دیگری) که با تگ و تطبیق آن ضمیمه می کنید، قابل کلیک خواهد بود، بنابراین خوانندگان می توانند برای تغییر صفحه ای که مشاهده می کنند، پیوند را دنبال کنند.
در اینجا نمونه ای از نشانه گذاری پیوند در HTML آمده است:
<a href="https://www.makeuseof.com/author/jowi-morales">
Jowi Morales MUO Page
</a>دانستن HTML زندگی شما را آسان تر می کند
در حالی که اکثر ویرایشگرهای نشانه گذاری و سیستم های مدیریت محتوا به شما امکان می دهند به صورت بصری کار کنید، اما دانستن HTML پایه هنوز ارزش دارد.
درک نحوه عملکرد HTML می تواند به شما امکان عیب یابی مشکلات محتوای خود را در صورتی که کاملا درست به نظر نمی رسد، می دهد. ویرایشگرهای بصری به ندرت همه جنبههای HTML را پوشش میدهند، بنابراین اگر بدانید چگونه نشانهگذاری آنها را مستقیماً ویرایش کنید، اسناد شما میتوانند گویاتر و دقیقتر باشند.