۱۷ کد HTML ساده که می‌توانید در عرض ۱۰ دقیقه بیاموزید!
1398/03/05 11:18 , میلاد صاحب نظر

۱۷ کد HTML ساده که می‌توانید در عرض ۱۰ دقیقه بیاموزید!

اگرچه وبسایت‌های مدرن عمدتاً با واسط‌های کاربر پسند ساخته شده‌اند، اما شناختن و دانستن چند کد HTML ساده خالی از لطف نیست. اگر ۱۷ تگ زیر (و چند مورد دیگر) را بیاموزید، خواهید توانست یک صفحه وب ساده را خودتان از ابتدا ایجاد کنید یا کدی که توسط برنامه‌ای مانند WordPress ایجاد شده‌ است را کمی دست کاری کنید.

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

۱. <DOCTYPE html!>

این تگ را در ابتدای هر سند HTML که ایجاد می‌کنید نیاز دارید. این تگ اطمینان می‌دهد که مرورگر می‌داند که در حال خواندن یک سند HTML است و برای استفاده از این تگ حتماً به HTML5 یعنی آخرین نسخه HTML نیاز است.

اگرچه این کد واقعاً یک تگ HTML نیست، اما با این حال دانستن و شناختن آن ضروری است.

۲. <html>

این یک تگ دیگر است که به مرورگر می‌گوید در حال خواندن HTML است. تگ <html> دقیقاً پس از تگ DOCTYPE قرار می‌گیرد و در پایان سند یا فایل با یک تگ <html/> بسته می‌شود. هر کد دیگری در سند شما بین این دو تگ قرار می‌گیرد.

۳. <head>

تگ <head> بخش سر تیتر فایل شما را آغاز می‌کند. کدهایی که درون این تگ قرار می‌گیرند در صفحه وب شما ظاهر نمی‌شوند. در عوض، این تگ شامل متاداده برای موتورهای جستجو و اطلاعات برای مرورگر شما است.

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

۴. <title>

نمایش عنوان صفحه

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

<head>
<title>My Website</title>
</head>

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

۵. <meta>

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

- description یک توضیح ساده در مورد صفحه شما.

- keywords منتخبی از کلیدواژه‌های کاربردی برای صفحه شما.

- author ناشر صفحه شما.

- viewport یک تگ برای اطمینان از اینکه صفحه شما در همه دستگاه‌ها ظاهر خوبی داشته باشد.

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

<meta name="description" content="A basic HTML tutorial">
<meta name="keywords" content="HTML,code,tags">
<meta name="author" content="MUG">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

تگ “viewport” برای محتوای شما باید همیشه دارای “width=device-width, initial-scale=1.0” باشد، تا مطمئن باشید که صفحه وب شما در موبایل و دستگاه‌های دسکتاپی درست نمایش داده می‌شود.

۶. <body>

بعد از اینکه بخش هدر را کامل کردید و بستید، به بخش body می‌رسید. این بخش با تگ <body> باز می‌شود و با تگ <body/> بسته می‌شود. این تگ را همانند تگ <html/> در انتهایی‌ترین قسمت کد باید بنویسید.

تمام محتوای صفحه وب شما بین این دو تگ قرار می‌گیرد. دقیقاً به همین سادگی:

<body>
Everything you want displayed on your page.
</body>

۷. <h1>

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

<h2> هدرهای سطح دو را تعریف می‌کند که معمولاً برای هدرهای بخش‌های مختلف متن مورد استفاده قرار می‌گیرد، <h3> هدر سطح سه برای عنوان زیر بخش‌ها و همین‌طور الی آخر ادامه می‌یابد تا برسیم به <h6>. به عنوان مثال، اسامی تگ‌ها در این مقاله همه از نوع هدرهای سطح دو هستند:

<h1>Big and Important Header</h1>
<h2>Slightly Less Big Header</h2>
<h3>Sub-Header</h3>

نتیجه:

نمایش تگ‌های هدر h1 تا h6

همان‌طور که مشاهده می‌کنید، هر چه سطح بیشتر می‌شود، متن کوچک‌تر می‌شود.

۸. <p>

تگ پاراگراف، یک پاراگراف جدید ایجاد می‌کند. این تگ معمولاً دو فاصله برای هر خط ایجاد می‌کند.

برای مثال، به فاصله بین خط قبلی و این خط دقت کنید. این کاری است که تگ <p> انجام می‌دهد.

<p>.اولین پاراگراف</p>
<p>.دومین پاراگراف</p>

نتیجه:

اولین پاراگراف.

دومین پاراگراف.

همچنین می‌توانید از استایل‌های CSS در تگ‌های پاراگراف خود استفاده کنید، مثل این یکی که سایز متن را تغییر می‌دهد:

<p style="font-size: 120%;">.متن ۲۰ درصد بزرگ‌تر</p>

نتیجه:

متن ۲۰ درصد بزرگ‌تر.

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

۹. <br>

تگ line break یک فاصله برای خط ایجاد می‌کند:

<p>.اولین خط<br>
.(دومین خط (نزدیک به اولین خط</p>

نتیجه:

اولین خط.

دومین خط (نزدیک به اولین خط).

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

۱۰. <strong>

این تگ یک متن مهم را تعریف می‌کند. در کل، این تگ باعث می‌شود متن bold شود. می‌توانید از CSS استفاده کنید تا به صورت متفاوتی یک متن <strong> ایجاد کنید.

به هر حال، می‌توانید خیلی راحت از <strong> برای bold کردن متن استفاده کنید.

<strong>.چیزهای خیلی مهمی که می‌خواهید بگویید</strong>

نتیجه:

چیزهای خیلی مهمی که می‌خواهید بگویید.

اگر به تگ <b> برای bold کردن متن عادت کرده‌اید، هنوز هم می‌توانید از همین تگ استفاده کنید. هیچ تضمینی وجود ندارد که این تگ در نسخه‌های آینده HTML هم کار کند، اما فعلاً که کار می‌کند.

۱۱. <em>

همانند تگ‌های <b> و <strong>، تگ‌های <em> و <i> نیز به هم مربوط هستند. تگ <em> یک متن مؤکد را مشخص می‌کند، که در کل یعنی باعث می‌شود متن italic شو د. دوباره تکرار می‌کنم، این امکان وجود دارد که با استفاده از CSS روی متن به شکل متفاوتی تأکید کنید.

<em>.یک متن موکد</em>

نتیجه:

یک متن موکد.

تگ <i> هنوز هم عمل می‌کند، اما همانند تگ <b>، ممکن است در نسخه‌های آینده HTML منسوخ شود.

۱۲. <a>

تگ <a> یا anchor، به شما اجازه می‌دهد لینک ایجاد کنید. یک لینک ساده شبیه به این خواهد بود :

<a href="//www.mug.ac/> MUG.ac برو به</a>

نتیجه:

برو به MUG.ac

اتریبیوت href مقصد لینک را مشخص می‌کند. در بسیاری از موارد، این مقصد ممکن است یک سایت دیگر باشد. همچنین ممکن است یک فایل، یا مثلاً یک تصویر یا یک PDF باشد.

اتریبیوت‌های مفید دیگر عبارت‌اند از “target” و “title”. اتریبیوت target تقریباً به صورت اختصاصی برای باز کردن یک لینک در یک تب یا پنجره جدید مورد استفاده قرار می‌گیرد، مانند این:

<a href="//www.mug.ac/" target="_blank"> برو MUG.ac در یک تب جدید به</a>

نتیجه:

در یک تب جدید به MUG.ac برو

اتریبیوت “title” یک متن راهنما ایجاد می‌کند. برای مثال اگر موس را روی لینک زیر نگه دارید، متن راهنما را مشاهده می‌کنید:

<a href="//www.mug.ac/" title="This is a tool tip">موس را روی این لینک نگه دارید تا .متن راهنما را ببینید</a>

نتیجه:

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

۱۳. <img>

اگر می‌خواهید یک تصویر در صفحه خود قرار دهید، باید از تگ تصویر استفاده کنید. معمولاً این تگ همراه با اتریبیوت “src” به کار می‌رود. این اتریبیوت منبع تصویر را مشخص می‌کند:

<img src="wp-content/uploads/2019/04/sunlit-birds.jpg">

نتیجه:

نتیجه استفاده از تگ img

اتریبیوت‌های دیگری هم وجود دارند، مانند “width”، “height” و “alt”. که استفاده از آن‌ها این‌چنین است:

<img src="wp-content/uploads/2019/04/sunlit-birds.jpg" alt="نام تصویر">

همان‌طور که حتماً حدس زده‌اید، اتریبیوت‌های “height” و “width”، ارتفاع و عرض تصویر را مشخص می‌کنند. در کل، بهترین کار این است که فقط یکی از آن‌ها را مشخص کنید تا تصویر سایز متناسبی داشته باشد. اگر از هر دو استفاده کنید، ممکن است تصویر کشیده یا پهن شود.

تگ “alt” به مرورگر شما می‌گوید که اگر تصویر موفق به بارگذاری و نمایش نشد (مثلاً به خاطر کندی سرعت اینترنت کاربر)، در عوض باید چه متنی نمایش داده شود و بهترین کار این است که برای تمام تصاویر موجود در سایتتان یک اتریبیوت alt به کار ببرید.

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

۱۴. <ol>

تگ لیست ترتیبی به شما امکان ایجاد یک لیست ترتیبی را می‌دهد. به طور کلی، این بدان معنا است که یک لیست عدد دار به دست خواهید آورد. هر آیتم در لیست به یک تگ آیتم لیست (<il>) نیاز خواهد داشت، بنابراین لیست شما این‌گونه خواهد بود:

<ol>
<li>First thing</li>
<li>Second thing</li>
<li>Third thing</li>
</ol>

نتیجه:

لیست ترتیبی

در HTML5، می‌توانید از تگ <ol reversed> برای برعکس کردن ترتیب عدد‌ها استفاده کنید. همچنین می‌توانید مقدار آغازین را با اتریبیوت Start مشخص کنید.

اتریبیوت “type” به شما اجازه می‌دهد به مرورگر بگویید چه نوع نشانه‌ای برای آیتم‌های لیست به کار ببرد. این نشانه‌ها می‌توانند یکی از “I”، “a”، “A”، “1” یا “I” بوده و باعث می‌شود لیست با این نشانه مشخص شده نمایش داده شود. مانند این کد:

<ol type="A">

۱۵. <ul>

لیست غیر ترتیبی خیلی ساده‌تر از مدل ترتیبی آن است. این لیست به سادگی فقط آیتم‌ها را پشت هم می‌آورد.

<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>

نتیجه:

لیست غیر ترتیبی

لیست‌های بدون ترتیب همچنین دارای اتریبیوت‌های “type” نیز هستند و می‌توانید این اتریبیوت را روی “circle”، “disc” یا “square” تنظیم کنید.

۱۶. <table>

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

<table>
<tbody>
<tr>
<th>1st column</th>
<th>2nd column</th>
</tr>
<tr>
<td>Row 1, column 1</td>
<td>Row 1, column 2</td>
</tr>
<td>Row 2, column 1</td>
<td>Row 2, column 2</td>
</tbody>
</table>

تگ‌های <table> و <table/> آغاز و پایان جدول را مشخص می‌کنند. تگ <tbody> حاوی تمام محتوای جدول است.

هر ردیف از جدول با تگ <tr> محصور شده است. هر سلول داخل هر ردیف یا در تگ‌های <th> برای هدرهای ستون قرار گرفته یا در تگ‌های <td> برای داده‌های ستون. برای هر ستون در هر ردیف به یکی از این دو تگ نیاز دارید.
نتیجه:

     1st column               2nd column

Row 1, column 1      Row 1, column 2

Row 2, column 1      Row 2, column 2

۱۷. <blockquote>

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

<blockquote>The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.</blockquote>

نتیجه:

.The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past

فرمتی که مورد استفاده قرار می‌گیرد ممکن است به مرورگری که استفاده می‌کنید، یا CSS سایت شما بستگی داشته باشد. اما تگ به همین شکل استفاده می‌شود.

پیش به سوی پیشرفت

با این ۱۷ تگ (و چند تگ دیگر که در حین توضیح آن‌ها آموختید) باید بتوانید یک وبسایت ساده ایجاد کنید. برای آموختن بیشتر در مورد هر کدام آن‌ها و چگونگی برقراری ارتباط HTML و CSS پیشنهاد می‌کنیم حتماً دوره آموزشی HTML و CSS را بررسی کنید. البته اگر می‌خواهید خیلی سریع یک وبسایت ساده و کاربردی برای کار خود ایجاد کنید و

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

با MUG همراه باشید!

منبع: makeusof

 مطالب مرتبط

تعامل با فایل‌ها در HTML5
ایجاد یک فرم HTML و قابلیت تکمیل خودکار فرم‌ها
 ۵ قالب رایگان HTML برای ایجاد آسان و سریع وبسایت‌ها!
۹ چیز که باید در مورد HTML5 بدانید
آموزش گام به گام #C
برنامه نویسی شیءگرا چیست؟

از آخرین دوره های آموزشی و تخفیف ها مطلع شوید

با تکمیل فرم زیر ، از اخبار و اطلاعات به روز برنامه نویسی و تکنولوژی عقب نمانید

آخرین مطالب

آموزش جامع SQL Server (جلسه ۱۲)
آموزش جامع SQL Server (جلسه ۱۲)

دستور UPDATE در SQL Server برای تغییر داده‌های موجود در یک جدول، از دستور UPDATE به شکل زیر استفاده ...

آموزش جامع SQL Server (جلسه ۱۵)
آموزش جامع SQL Server (جلسه ۱۵)

دستور DROP TABLE در SQL Server گاهی، لازم است یک جدول که دیگر استفاده‌ای ندارد را حذف کنید. برای ...

آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)
آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)

بخش اول از آخرین مبحث دوره جامع آموزش SQL Server در جلسه قبلی بررسی شد. این مبحث که ...

آخرین دیدگاه ها

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

فرم ارسال نظرات