خبر و ترفند روز

خبر و ترفند های روز را اینجا بخوانید!

۱۷ نمونه کد HTML ساده که می توانید در ۱۰ دقیقه یاد بگیرید

ارشیا یوسفی ادیب ۸ اردیبهشت, ۱۴۰۳ ۴ min read

آیا می خواهید یک صفحه وب اساسی ایجاد کنید؟ این نمونه های HTML را یاد بگیرید و آنها را در یک ویرایشگر متن امتحان کنید تا ببینید در مرورگر شما چگونه به نظر می رسند.

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

ما نمونه های ساده کد HTML را با خروجی بیشتر تگ ها ارائه کرده ایم. اگر می خواهید آنها را برای خودتان آزمایش کنید، نمونه کد HTML را در سند خود کپی کنید. می توانید با آنها در یک ویرایشگر متن بازی کنید و فایل خود را در مرورگر بارگذاری کنید تا ببینید تغییرات شما چه کار می کنند. بیا شروع کنیم!

1.

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

2.

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

۳. <سر>

تگ

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

برای صفحات اصلی، تگ

حاوی عنوان شما خواهد بود و همین. اما چند مورد دیگر وجود دارد که می توانید آنها را بگنجانید که ما در یک لحظه به آنها خواهیم پرداخت.

4.

تگ عنوان html

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

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

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

5.

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

  • توضیحات: توضیحات اولیه از صفحه شما.
  • کلمات کلیدی: مجموعه ای از کلمات کلیدی قابل استفاده برای صفحه شما (اگرچه در حال حاضر موتورهای جستجو معمولاً آنها را نادیده می گیرند).
  • نویسنده: نویسنده صفحه شما.
  • viewport: برچسبی برای اطمینان از اینکه صفحه شما در همه دستگاه ها خوب به نظر می رسد.

در اینجا یک مثال است که ممکن است برای این صفحه اعمال شود:

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

برچسب “viewport” همیشه باید دارای “width=device-width, first-scale=۱.۰” به عنوان محتوا باشد تا مطمئن شوید صفحه شما به خوبی در دستگاه های تلفن همراه و دسکتاپ نمایش داده می شود.

مطلب مرتبط:   13 دستورات و پرس و جوهای اساسی SQL که برنامه نویسان باید بدانند

6.

پس از بستن قسمت هدر، به بدنه می رسید. این را با تگ

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

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

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

7.

(و سایر برچسب‌های سرصفحه)

تگ

یک هدر سطح یک در صفحه شما تعریف می کند. این معمولا عنوان خواهد بود و در حالت ایده آل فقط یک عنوان در هر صفحه وجود خواهد داشت.

سرصفحه های سطح دو مانند سرصفحه های بخش،

سطح سوم زیر سرصفحه ها و غیره را تا

تعریف می کند. به عنوان مثال، نام تگ ها در این مقاله هدر سطح دو هستند. 
<h1>Big and Important Header</h1>
<h2>Slightly Less Big Header</h2>
<h3>Sub-Header</h3>

نتیجه:

تگ های هدر html

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

8.

تگ پاراگراف یک پاراگراف جدید را شروع می کند. این معمولاً دو شکست خط را وارد می کند.

به عنوان مثال، به فاصله بین خط قبلی و این یکی نگاه کنید. این کاری است که یک تگ

انجام خواهد داد.

<p>Your first paragraph.</p>
<p>Your second paragraph.</p>

نتیجه:

اولین پاراگراف شما

پاراگراف دوم شما

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

<p style="font-size: 150%;">This is 50% larger text.</p>

نتیجه:

بزرگتر کردن متن در html

9.

تگ شکست خط یک شکست خط را وارد می کند، بدون فاصله بین خطوط:

<p>The first line.

The second line (close to the first one).</p>

نتیجه:

شکست خط در html

کار به روشی مشابه تگ

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

10.

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

با این حال، به طور پیش فرض، می توانید با خیال راحت از برای متن پررنگ استفاده کنید.

<strong>Very important things you want to say.</strong>

نتیجه:

چیزهای بسیار مهمی که می خواهید بگویید.

اگر با برچسب برای متن پررنگ آشنا هستید، همچنان کار می کند، اما دیگر توصیه نمی شود. همیشه باید به جای آن از تگ استفاده کنید.

11.

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

<em>An emphasized line.</em>

نتیجه:

یک خط تاکید شده

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

12.

تگ یا لنگر به شما امکان می دهد پیوند ایجاد کنید. یک لینک ساده شبیه این است:

<a href="https://www.muo.com/>Go to MUO</a>

نتیجه:

به MUO بروید

ویژگی “href” مقصد پیوند را مشخص می کند. در بیشتر موارد، این یک وب سایت دیگر خواهد بود. همچنین می تواند یک فایل باشد، مانند یک تصویر یا یک PDF.

سایر ویژگی های مفید عبارتند از “هدف” و “عنوان”. ویژگی target تقریباً به طور انحصاری برای باز کردن پیوند در یک تب یا پنجره جدید استفاده می شود، مانند این:

<a href="https://www.muo.com/" target="_blank">Go to MUO in a new tab</a>

نتیجه:

در یک تب جدید به MUO بروید

ویژگی “title” یک راهنمای ابزار ایجاد می کند. ماوس را روی پیوند زیر نگه دارید تا ببینید چگونه کار می کند:

<a href="https://www.muo.com/" title="This is a tooltip">Hover over this to see the tooltip</a>

نتیجه:

برای دیدن راهنمای ابزار، نشانگر را روی آن نگه دارید

13.

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

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

نتیجه:

نمونه ای از تگ img html در حال استفاده

سایر ویژگی‌ها مانند “ارتفاع”، “عرض” و “alt” در دسترس هستند. در اینجا چگونه ممکن است به نظر برسد:

<img src="wp-content/uploads/2019/04/sunlit-birds.jpg" alt="the name of your image">

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

تگ “alt” به مرورگر می گوید که اگر تصویر نمایش داده نمی شود، چه متنی را نمایش دهد و باید با هر تصویری اضافه شود. این یک ویژگی دسترس‌پذیری است و صفحه‌خوان‌ها متن جایگزین را با صدای بلند می‌خوانند.

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

14.

    تگ لیست مرتب به شما امکان می دهد به طور پیش فرض یک لیست شماره گذاری شده ایجاد کنید. هر مورد در لیست به یک تگ آیتم لیست نیاز دارد (

  1. )، بنابراین کد لیست شما به شکل زیر خواهد بود: 
    <ol>
    <li>First thing</li>
    <li>Second thing</li>
    <li>Third thing</li>
    </ol>

    نتیجه:

    1. اولین چیز
    2. مورد دوم
    3. مورد سوم

    در HTML5 می توانید از

      برای تغییر ترتیب اعداد استفاده کنید. و می توانید مقدار شروع را با ویژگی “شروع” تنظیم کنید.

      ویژگی “type” به شما امکان می دهد به مرورگر بگویید از کدام نوع نماد برای آیتم های لیست از جمله اعداد، حروف و اعداد رومی استفاده کند. می‌توان آن را روی «۱»، «A»، «a»، «I» یا «i» تنظیم کرد و فهرست را با نماد نشان‌داده‌شده به شکل زیر نمایش داد:

      <ol type="A">

      15.

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

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

        نتیجه:

      • مورد اول
      • مورد دوم
      • مورد سوم

      لیست های نامرتب دارای ویژگی «نوع» نیز هستند و می توانید آن را روی «دیسک»، «دایره» یا «مربع» تنظیم کنید.

      ۱۶. <جدول>

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

      تگ های

      و

      شروع و پایان جدول را مشخص می کنند. تگ

      حاوی تمام محتوای جدول است.

      هر ردیف از جدول در یک تگ

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

      نتیجه:

      ستون ۱

      ستون ۲

      ردیف ۱، ستون ۱

      ردیف ۱، ستون ۲

      ردیف ۲، ستون ۱

      ردیف ۲، ستون ۲

      17.

      هنگامی که از وب سایت یا شخص دیگری نقل قول می کنید و می خواهید نقل قول را از بقیه سند خود جدا کنید، از تگ 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>

      نتیجه:

      وب را همانطور که من تصور می کردم، هنوز آن را ندیده ایم. آینده هنوز خیلی بزرگتر از گذشته است.

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

      بر این نمونه ها و نمونه های کد HTML مسلط شوید

      با این ۱۷ مثال کد نویسی HTML، باید بتوانید یک وب سایت ساده ایجاد کنید. می‌توانید هم‌اکنون همه آن‌ها را در یک ویرایشگر متن آنلاین آزمایش کنید تا از نحوه عملکرد آن‌ها مطلع شوید.

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

      1. Tags: