محتوا

• مراحل
• روش 1 از 2: کار در HTML 4.01
• روش 2 از 2: کار در CSS / HTML5

این مقاله نحوه افزودن یک خط افقی در HTML را به شما نشان می دهد. از خط افقی می توان برای تفکیک مطالب سایت استفاده کرد. کد ایجاد خط بسیار ساده است. با این حال ، در HTML 4.01 ، امکان تغییر طرح یک خط با استفاده از دستورات داخلی وجود دارد. در HTML5 ، شما باید از CSS برای استایل دادن به خط استفاده کنید.

مراحل

روش 1 از 2: کار در HTML 4.01

1. 1 یک سند موجود را باز کنید یا یک سند جدید HTML ایجاد کنید. اسناد HTML را می توان با ویرایشگر متنی مانند Notepad یا ویرایشگر کد تخصصی مانند Adobe Dreamweaver ویرایش کرد. این مراحل را برای باز کردن یک سند HTML در برنامه دلخواه خود دنبال کنید:
   • دفترچه یادداشت یا ویرایشگر متن / کد دیگر را باز کنید.
   • منو را باز کنید فایل.
   • بر روی کلیک کنید باز کن.
   • فایل HTML را انتخاب کنید.
   • بر روی کلیک کنید باز کن
2. 2 مکانی را که می خواهید خط را وارد کنید انتخاب کنید. پایین بروید تا خطی را که بالای آن خط باید ظاهر شود پیدا کنید ، و سپس با کلیک بر روی سمت چپ آن خط ، مکان نما را مستقیماً به ابتدای آن خط منتقل کنید.
3. 3 یک خط خالی اضافه کنید دو تا ضربه ی آهسته بزن وارد کنیدبرای پایین آوردن متنی که می خواهید یک خط در آن وارد کنید ، و سپس مکان نما را روی یک خط خالی قرار دهید.
4. 4 برچسب hr> را اضافه کنید. وارد ساعت> به فضای خالی در ابتدای خط. برچسب زدن ساعت> به شما امکان می دهد یک خط افقی در کل صفحه بکشید.
5. 5 با فشار دادن مکان نما را بعد از برچسب "hr" به خط جدیدی منتقل کنید وارد کنید. حالا برچسب ساعت> باید در یک خط جداگانه باشد
6. 6 ویژگی ها را به خط افقی اضافه کنید (اختیاری). ویژگی هایی مانند طول ، ضخامت ، رنگ و تراز را اضافه کنید. بلافاصله بعد از "ساعت" آنها را در بریس های مجعد قرار دهید. برای افزودن چند ویژگی ، آنها را با فاصله جدا کنید.
   • وارد hr size = "#">برای تغییر ضخامت خط "#" را با ضخامت عددی جایگزین کنید (برای مثال ، اندازه = "10").
   • وارد hr width = "#">برای تغییر عرض خط "#" را با تعداد پیکسل ها یا درصدی از عرض صفحه جایگزین کنید (به عنوان مثال ، width = "200" یا width = "75٪").
   • وارد hr color = "#">برای تغییر رنگ خط "#" را با نام رنگ یا کد هگزا دسیمال آن جایگزین کنید (برای مثال ، رنگ = "قرمز" یا رنگ = "# FF0000").
   • وارد hr align = "#">برای تراز کردن خط "#" را با "راست" (راست) ، "چپ" (چپ) ، یا "مرکز" (مرکز) جایگزین کنید (برای مثال ، hr width = "50٪" align = "center">).
7. 7 فایل HTML را ذخیره کنید. برای ذخیره یک فایل متنی به عنوان یک سند HTML ، باید پسوند فایل (.txt، .docx) را به ".html" تغییر دهید. برای ذخیره سند HTML خود مراحل زیر را دنبال کنید:
   • منو را باز کنید فایل.
   • بر روی کلیک کنید ذخیره به عنوان.
   • در قسمت File name یک نام برای فایل وارد کنید.
   • اضافه کردن .html بعد از نام فایل
   • بر روی کلیک کنید صرفه جویی.
8. 8 سند HTML خود را بررسی کنید. برای بررسی فایل HTML ، روی آن راست کلیک کرده و Open With را انتخاب کنید. سپس مرورگر وب خود را انتخاب کنید. یک خط جامد باید در جایی که برچسب "hr" را وارد کرده اید ظاهر شود. کد HTML چیزی شبیه به این خواهد بود:

   ! DOCTYPE html> html> body> h1> Heading / h1> hr size = "6" width = "50٪" align = "left" color = "green"> p1> این خط باید با یک خط از عنوان جدا شود . / P1> / body> / html>

روش 2 از 2: کار در CSS / HTML5

1. 1 یک سند موجود را باز کنید یا یک سند جدید HTML ایجاد کنید. اسناد HTML را می توان با ویرایشگر متنی مانند Notepad یا ویرایشگر کد تخصصی مانند Adobe Dreamweaver ویرایش کرد. این مراحل را برای باز کردن یک سند HTML در برنامه دلخواه خود دنبال کنید:
   • دفترچه یادداشت یا ویرایشگر متن / کد دیگر را باز کنید.
   • منو را باز کنید فایل.
   • بر روی کلیک کنید باز کن.
   • فایل HTML را انتخاب کنید.
   • بر روی کلیک کنید باز کن
2. 2 یک عنوان به سند HTML خود اضافه کنید. اگر سند HTML شما در حال حاضر عنوان ندارد ، مراحل زیر را برای افزودن یکی دنبال کنید. عنوان باید بعد از تگ html> و قبل از تگ body> باشد.
   • وارد سر> در بالای سند
   • دو تا ضربه ی آهسته بزن وارد کنیدبرای اضافه کردن دو خط جدید
   • وارد / head>برای بستن عنوان
3. 3 وارد style type = "text / css"> داخل سرصفحه برچسب سبک بین دو تگ عنوان قرار می گیرد تا مکانی ایجاد کند که در آن می توانید از CSS برای تغییر طراحی HTML استفاده کنید.
   • متناوبا ، می توانید از یک استایل شیت خارجی استفاده کنید. مقاله را بخوان "نحوه درج یک فایل CSS در HTML»برای یادگیری نحوه پیوند دادن یک فایل CSS خارجی به یک فایل HTML.
4. 4 وارد ساعت {. این برچسب CSS برای حالت دادن به خط افقی است. آن را بعد از برچسب "style" در هدر یا فایل CSS خارجی خود اضافه کنید.
5. 5 استایل های CSS را برای تگ hr> اضافه کنید. آنها باید بعد از برچسب "hr {" بیایند. یک خط افقی را می توان به طرق مختلف طراحی کرد. در زیر چند مورد از آنها ذکر شده است.
   • وارد عرض: ## پیکسل؛برای تنظیم عرض خط "##" را با عرض خط در پیکسل جایگزین کنید. به جای پیکسل (px) ، می توانید از درصد (٪) استفاده کنید.
   • وارد ارتفاع: ## پیکسل؛برای تنظیم وزن خط "##" را با عرض خط در پیکسل جایگزین کنید.
   • وارد رنگ پس زمینه: ##؛برای تعیین رنگ خط "##" را با نام رنگ یا هش (#) و به دنبال آن کد رنگ هگزا دسیمال جایگزین کنید.
   • وارد margin-right: ## px؛برای تعیین تعداد پیکسل ها از لبه سمت راست. "##" را با یک عدد پیکسل یا کد "خودکار" جایگزین کنید. برای تراز خط به چپ یا مرکز "auto" را وارد کنید.
   • وارد margin-left: ## px؛برای تعیین تعداد پیکسل ها از لبه سمت چپ. "##" را با یک عدد پیکسل یا کد "خودکار" جایگزین کنید. "auto" را وارد کنید تا خط به راست یا مرکز تراز شود.
   • وارد margin-top: ## px؛ بالشتک بالای خط را مشخص کنید. "##" را با یک عدد مربوط به پد در پیکسل جایگزین کنید.
   • وارد margin-bottom: ## px؛پد پایین را برای خط مشخص کنید. "##" را با یک عدد مربوط به پد در پیکسل جایگزین کنید.
   • وارد border-width: ## px؛برای کشیدن یک جعبه در اطراف خط (اختیاری). "##" را با عددی مربوط به عرض حاشیه در پیکسل جایگزین کنید.
   • وارد رنگ لبه: ##؛برای تعیین رنگ حاشیه (اختیاری). "##" را با نام رنگ یا هش (#) و به دنبال آن کد رنگ هگزا دسیمال جایگزین کنید.
6. 6 وارد } بعد از ویژگیهای style برای تکمیل حالت دهی برای برچسب hr>.
7. 7 وارد ساعت> در هر نقطه از متن سند HTML برای اضافه کردن یک خط افقی. هر بار که از برچسب hr> در سند HTML خود استفاده می کنید ، تنظیمات سبک CSS اعمال می شود. کد شما باید چیزی شبیه به این باشد:

   ! DOCTYPE html> html> head> style type = "text / css"> ساعت {عرض: 50٪؛ ارتفاع: 20 پیکسل ؛ رنگ پس زمینه: قرمز ؛ margin-right: auto؛ margin-left: auto؛ margin-top: 5px؛ margin-bottom: 5px؛ border-width: 2px؛ حاشیه رنگ: سبز ؛ } / style> / head> body> h1> Heading / h1> hr> p1> این خط باید با یک خط افقی از عنوان جدا شود / p1> / body> / html>