آموزش صفت HTML به زبان ساده

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

توجه: برخی عناصر تگ پایان و محتوا ندارند. این عناصر، عناصر خالی یا عناصر منفرد یا عناصر تهی نامیده می شوند.

به عنوان مثال:

    <p> Hello world!!! </p>

1	<p> Hello world!!! </p>

مثال

فهرست عناوین

    <!DOCTYPE html>

    <html>

    <head>

        <title>WebPage</title>

    </head>

    <body>

       <h1>This is my first web page</h1>

        <h2> How it looks?</h2>

         <p>It looks Nice!!!!!</p>

    </body>

    </html>

<!DOCTYPE html>

<html>

<head>

<title>WebPage</title>

</head>

<body>

<h1>This is my first web page</h1>

<h2> How it looks?</h2>

<p>It looks Nice!!!!!</p>

</body>

</html>

برای یادگیری تمامی محبث های این دوره میتوانید اینجا کلیک کنید.

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

Void element: تمام عناصر موجود در HTML نیاز به تگ شروع و پایان ندارند. برخی از عناصر دارای محتوا و تگ پایان نیستند، این عناصر با نام elements Void (عناصر تهی) یا عناصر خالی شناخته می شوند. همچنین به عنوان unpaired tag ( تگ غیر جفت) نیز خوانده می شوند.

بعضی از عناصر تهی عبارتند از: <br> (شکستن خط)، <hr> (کشیدن یک خط افقی) و … .

عناصر Nested (تودرتو): HTML: می تواند تودرتو باشد، به این معنی که یک عنصر می تواند عنصر دیگری را در خود جای دهد.

عناصر بلوکی و خطی

عناصر براساس نمایش پیش فرض به دو دسته تقسیم می شوند:

عنصر بلوکی (Block-level element)
عنصر خطی (Inline element)

عناصر بلوکی

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

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

<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> and <video>.

1	<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> and <video>.

مثال

    <!DOCTYPE html>

    <html>

     <head>

        </head>

    <body>

        <div style=”background-color: lightblue”>This is first div</div>

        <div style=”background-color: lightgreen”>This is second div</div>

        <p style=”background-color: pink”>This is a block level element</p>

    </body>

    </html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div style=”background-color: lightblue”>This is first div</div>

<div style=”background-color: lightgreen”>This is second div</div>

<p style=”background-color: pink”>This is a block level element</p>

</body>

</html>

خروجی

بیشتر بخوانید:

آموزش رایگان HTML مقدماتی تا پیشرفته بخش عناصر

مثال

عناصر بلوکی و خطی

عناصر بلوکی

مثال

خروجی

مطالب زیر را حتما مطالعه کنید

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

مثال

عناصر بلوکی و خطی

عناصر بلوکی

مثال

خروجی

مطالب زیر را حتما مطالعه کنید

نحوه اضافه کردن کد PHP در وردپرس

دوره رایگان طراحی فروشگاه اینترنتی!

آموزش ایجاد لیست کشویی وابسته به هم در HTML

ساده و بدون هزینه ترفند های عکاسی حرفه ای با موبایل را یاد بگیرید

DOM چیست و چه کاربردی دارد؟

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

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