۱۶+۱ نمونه کد HTML ساده که می توانید سریع یاد بگیرید
آیا می خواهید یک صفحه وب اساسی ایجاد کنید؟ این کد های HTML را یاد بگیرید و آنها را در یک ویرایشگر متن امتحان کنید تا ببینید در مرورگر شما چه اتفاقی می افتد.
حتی اگر وبسایتهای مدرن معمولاً با رابطهای کاربرپسند ساخته میشوند، دانستن برخی از تگ های ساده و اولیه HTML مفید است. اگر ۱۷ تگ نمونه HTML زیر (و چند مورد اضافی) را میشناسید، میتوانید یک صفحه وب اولیه را از ابتدا ایجاد کنید یا کد ایجاد شده توسط برنامهای مانند وردپرس را تغییر دهید.
ما نمونه های ساده کد HTML را با خروجی تگ ها ارائه کرده ایم. اگر می خواهید آنها را برای خودتان آزمایش کنید، نمونه کد HTML را در سند خود کپی کنید. می توانید با آنها در یک ویرایشگر متن بازی کنید و فایل خود را در مرورگر بارگذاری کنید تا ببینید تغییرات شما چه کار می کنند.
۱. <!DOCTYPE html>
شما در ابتدای هر سند HTML که ایجاد می کنید به این تگ نیاز دارید. این کد html تضمین می کند که مرورگر وب می داند که در حال خواندن HTML است و انتظار دارد HTML5، آخرین نسخه باشد. اگرچه این یک تگ HTML نیست، اما دانستن آن هنوز هم مهم است.
۲. <html>
این تگ دیگری است که به مرورگر می گوید که در حال خواندن HTML است. تگ <html> مستقیماً بعد از تگ DOCTYPE قرار می گیرد و شما آن را با یک تگ </html> درست در انتهای فایل خود می بندید. هر چیز دیگری در سند شما بین این برچسب ها قرار می گیرد.
۳. <head>
تگ <head> بخش هدر فایل شما را شروع می کند. مواردی که در اینجا وارد می شوند در صفحه وب شما ظاهر نمی شوند. که حاوی ابرداده برای موتورهای جستجو و اطلاعات برای مرورگر شما است. اگر میخواهید در سایت خود تبلیغات داشته باشید، کد AdSense Google نیز در اینجا قرار میگیرد.
برای صفحات اصلی، تگ <head> حاوی عنوان شما خواهد بود . اما چند مورد تگ دیگر نیز وجود دارد که می توانید آنها را بگنجانید .
۴. <title>
این تگ عنوان صفحه شما را تعیین می کند. تنها کاری که باید انجام دهید این است که عنوان خود را در تگ قرار دهید و آن را مانند کدزیر ببندید (برای مثال کد ، تگ های سرصفحه را نیز اضافه کرده ایم):
<head> <title>لرن پارسی</title> </head>
این همان نامی است که وقتی در مرورگر باز می شود به عنوان عنوان برگه نمایش داده می شود.
۵. <meta>
مانند تگ عنوان، meta در قسمت هدر صفحه شما قرار می گیرد. ابرداده (کدهای متا) در درجه اول توسط موتورهای جستجو استفاده می شود و اطلاعاتی در مورد آنچه در صفحه شما وجود دارد است. چندین متا فیلد وجود دارد، اما اینها برخی از رایج ترین آنها هستند:
description : توضیحات اولیه از صفحه شما.
keywords : مجموعه ای از کلمات کلیدی قابل استفاده برای صفحه شما (اگرچه در حال حاضر موتورهای جستجو معمولاً آنها را نادیده می گیرند).
author : نویسنده صفحه شما.
viewport : برچسبی برای اطمینان از اینکه صفحه شما در همه دستگاه ها خوب به نظر می رسد.
در اینجا یک مثال زدم که ممکن است برای این صفحه اعمال شود:
<meta name="description" content="A basic HTML tutorial"> <meta name="keywords" content="HTML,code,tags"> <meta name="author" content="ahmad-kalhor"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
برچسب “viewport” همیشه باید دارای “width=device-width, first-scale=1.0” به عنوان محتوا باشد تا مطمئن شوید صفحه شما به خوبی در دستگاه های تلفن همراه و دسکتاپ نمایش داده می شود.
۶. <body>
پس از بستن قسمت هدر، به بدنه می رسید. شما بدنه صفحه وب را با تگ <body> باز می کنید و با تگ </body> می بندید. درست در انتهای فایل شما، درست قبل از تگ </html> قرار می گیرد.
تمام محتوای صفحه وب شما بین این تگ های بدنه قرار می گیرد. به همان اندازه که به نظر می رسد ساده است:
<body> هرچیزی که در وسط صفحه می خواهید نمایش دهید </body>
۷. <h1> (و سایر برچسبهای سرصفحه)
تگ <h1> یک هدر سطح یک در صفحه شما تعریف می کند. و معمولا عنوان خواهد بود و در حالت ایده آل فقط یک عنوان در هر صفحه وجود خواهد داشت.
<h2> سرصفحه های سطح دو را مانند سرصفحه های بخش، <h3> سطح سه فرعی تا <h6> را تعریف می کند. به عنوان مثال، نام تگ ها در این مقاله هدر سطح دو هستند.
<h1> سربرگ بزرگ و مهم </h1> <h2> عنوان کمی کمتر </h2> <h3> عنوان فرعی </h3>
نتیجه:
همانطور که می بینید، این تگ ها در هر سطح کوچکتر می شوند. موتورهای جستجو آنها را به ترتیب اهمیت رتبه بندی می کنند.
۸. <p>
تگ پاراگراف یک پاراگراف جدید را شروع می کند. معمولاً دو شکست خط را وارد می کند.
به عنوان مثال، به فاصله بین خط قبلی و این یکی نگاه کنید. این کاری است که یک تگ <p> انجام خواهد داد.
<p> اولین پاراگراف شما </p>
<p> پاراگراف دوم شما </p>
نتیجه:
همچنین می توانید از سبک های CSS در تگ های پاراگراف خود استفاده کنید، مانند این مقال که اندازه متن را تغییر می دهد:
<p style="font-size: 150%;">This is 50% larger text.</p>
نتیجه:
۹. <br>
تگ br شکست خط را وارد می کند، بدون فاصله بین خطوط:
<p>خط اول. <br> خط دوم (نزدیک به خط اول). </p>
نتیجه:
کار به روشی مشابه تگ <hr> است. این کد html یک خط افقی روی صفحه شما می کشد و برای جدا کردن بخش های متن خوب است.
۱۰. <strong>
این تگ متن مهم را تعریف می کند. به طور کلی، این بدان معناست که متن داخل این تگ پررنگ خواهد بود، اگرچه می توان از CSS برای نمایش متن <strong> متفاوت استفاده کرد.
با این حال، به طور پیش فرض، می توانید با خیال راحت از <strong> برای متن پررنگ استفاده کنید.
<strong>چیزهای بسیار مهمی که می خواهید بگویید</strong>
نتیجه:
اگر با برچسب <b> برای متن پررنگ آشنا هستید، این کد همچنان کار می کند، اما دیگر توصیه نمی شود. همیشه باید به جای آن از تگ <strong> استفاده کنید.
۱۱. <em>
مانند <b> کدهای <strong>، <em> و <i> مرتبط هستند. تگ <em> متن تاکید شده را مشخص می کند، که به طور کلی به این معنی است که به صورت مورب در می آید. باز هم، این احتمال وجود دارد که CSS نمایش متن تاکید شده را متفاوت کند.
<em>یک خط تاکید شده</em>
نتیجه:
تگ <i> همچنان کار می کند، اما باز هم توصیه نمی شود و ممکن است در نسخه های بعدی HTML منسوخ شود.
۱۲. <a>
تگ <a> یا لنگر به شما امکان می دهد پیوند ایجاد کنید. یک لینک ساده شبیه این است:
<a href="https://www.learnparsi.com/">به لرن پارسی بروید</a>
نتیجه:
ویژگی “href” مقصد پیوند را مشخص می کند. در بیشتر موارد، این یک وب سایت دیگر خواهد بود. همچنین می تواند یک فایل باشد، مانند یک تصویر یا یک PDF.
سایر ویژگی های مفید عبارتند از “target ” و “title“. ویژگی target تقریباً به طور انحصاری برای باز کردن پیوند در یک تب یا پنجره جدید استفاده می شود، مانند این:
<a href="https://www.learnparsi.com/" target="_blank"> به لرن پارسی بروید در یک تب جدید</a>
ویژگی “title” یک راهنمای ابزار ایجاد می کند. ماوس را روی پیوند زیر نگه دارید تا ببینید چگونه کار می کند:
<a href="https://www.learnparsi.com/" title="This is a tooltip">برای دیدن راهنمای ابزار، ماوس را روی آن نگه دارید </a>
نتیجه:
۱۳. <img>
اگر می خواهید تصویری را در صفحه خود جاسازی کنید، باید از تگ تصویر استفاده کنید. شما معمولاً از آن در ارتباط با ویژگی “src” استفاده می کنید. این بخش کد منبع تصویر را مشخص می کند، مانند زیر:
<img src="wp-content/uploads/2019/04/sunlit-birds.jpg">
سایر ویژگیها مانند “height“، “width” و “alt” در دسترس هستند:
<img src="wp-content/uploads/2019/04/sunlit-birds.jpg" alt="یک توضیح برای تصویر">
همانطور که انتظار دارید، ویژگی های “height” و “width” ارتفاع و عرض تصویر را تعیین می کنند. به طور کلی، ایده خوبی است که فقط یکی از آنها را تنظیم کنید تا تصویر به درستی مقیاس شود. اگر از هر دو مقدار استفاده می کنید، می توانید با یک تصویر کشیده شده مواجه شوید.
تگ “alt” به مرورگر می گوید که اگر تصویر نمایش داده نمی شود، چه متنی را نمایش دهد و باید با هر تصویری اضافه شود. این یک ویژگی دسترسپذیری است و موتورهای جستجو متن جایگزین را با صدای بلند میخوانند.
برای رفتن یک گام فراتر و بهبود عملکرد سایت خود، نگاهی به راهنمای ما در مورد نحوه ایجاد تصاویر ریسپانسیو در HTML بیندازید .
۱۴. <ol>
تگ لیست ol به شما امکان می دهد به طور پیش فرض یک لیست شماره گذاری شده ایجاد کنید. هر مورد در لیست به یک تگ آیتم لیست نیاز دارد (<li>)، بنابراین کد لیست شما به شکل زیر خواهد بود:
<ol> <li>اولین گزینه</li> <li>دومین گزینه</li> <li>سومین گزینه</li> </ol>
نتیجه:
در HTML5 می توانید از <ol reversed> برای تغییر ترتیب اعداد استفاده کنید. و می توانید مقدار شروع را با ویژگی “start” تنظیم کنید.
ویژگی “type” به شما امکان می دهد به مرورگر بگویید از کدام نوع نماد برای آیتم های لیست، از جمله اعداد، حروف و اعداد رومی استفاده کند. میتوان آن را روی «۱»، «A»، «a»، «I» یا «i» تنظیم کرد و فهرست را با نماد نشاندادهشده به صورت زیر نمایش داد:
<ol type="A">
۱۵. <ul>
لیست ul بسیار ساده تر از همتای سفارش شده خود است. این به سادگی یک لیست گلوله ای است.
<ul> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul>
نتیجه:
مورد اول
مورد دوم
مورد سوم
لیست های نامرتب دارای ویژگی «type» نیز هستند و می توانید آن را روی «disc»، «circle» یا «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> برای داده های ستون پیچیده شده است. برای هر ستون در هر سطر به یکی از اینها نیاز دارید.
نتیجه:
۱۷. <blockquote>
هنگامی که از وب سایت یا شخص دیگری نقل قول می کنید و می خواهید نقل قول را از بقیه سند خود جدا کنید، از تگ blockquote استفاده کنید. تنها کاری که شما باید انجام دهید این است که نقل قول را در باز و بسته کردن برچسب های بلوک blockquote قرار دهید:
<blockquote>آینده خیلی بزرگتر از گذشته است.</blockquote>
قالب بندی دقیقی که استفاده می شود ممکن است به مرورگری که استفاده می کنید یا CSS سایت شما بستگی داشته باشد. اما برچسب ثابت می ماند.
- مطالب مرتبط : کدهای جالب و باحال HTML
به کدهای ساده و پرکاربرد HTML مسلط شوید
با این ۱۷ مثال کد نویسی HTML، باید بتوانید یک وب سایت ساده ایجاد کنید. میتوانید هماکنون همه آنها را در یک ویرایشگر متن آنلاین یا حتی NotePad آزمایش کنید تا از نحوه عملکرد آنها مطلع شوید. پس از تسلط بر اصول اولیه، می توانید شروع به اضافه کردن سایر ویژگی ها و جلوه های جالب کنید تا صفحات خود را حرفه ای تر نشان دهید.
در صورتی که نیاز به یادگیری کامل این مبحث دارید ، ما در لرن پارسی یک دوره رایگان در این زمینه داریم که می توانید استفاده کنید. همین الان آموزش رایگان html با بهترین دوره آموزشی از وب سایت لرن پارسی دنبال کنید.
دیدگاه ها