جستجو برای:
سبد خرید 0
  • مداد سبز
  • دوره های آموزشی
    • آموزش برنامه نویسی
    • آموزش پایتون
    • آموزش PHP
    • آموزش متلب
    • آموزش SQl
    • آموزش سالیدیتی
    • آموزش Asp.net core
    • آموزش ++C
    • آموزش vue js
  • وبلاگ
    • مقالات آموزش برنامه نویسی
    • مقالات پایتون
    • مقالات PHP
    • مقالات آموزش جاوا اسکریپت
    • مقالات آموزش فلاتر
    • مقالات کسب درآمد
  • کسب درآمد با مداد سبز
  • درباره مداد سبز
  • تماس با مداد سبز
  • 09920882904
  • info@medadsabz.com
0
مداد سبز
  • مداد سبز
  • دوره های آموزشی
    • آموزش برنامه نویسی
    • آموزش پایتون
    • آموزش PHP
    • آموزش متلب
    • آموزش SQl
    • آموزش سالیدیتی
    • آموزش Asp.net core
    • آموزش ++C
    • آموزش vue js
  • وبلاگ
    • مقالات آموزش برنامه نویسی
    • مقالات پایتون
    • مقالات PHP
    • مقالات آموزش جاوا اسکریپت
    • مقالات آموزش فلاتر
    • مقالات کسب درآمد
  • کسب درآمد با مداد سبز
  • درباره مداد سبز
  • تماس با مداد سبز
آخرین اطلاعیه ها
جهت نمایش اطلاعیه باید وارد سایت شوید
ورود / عضویت

آموزش راست چين كردن قالب html

2023-02-12
ارسال شده توسط support
برنامه نویسی، HTML
آموزش راست چين كردن قالب html

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

آموزش راست چين كردن قالب html

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

  1. متون و المان هایی که به نام به متن شناخته می شوند که لینک ها و همینطور تصواویر در این دسته قرار می گیرند.
  2. تگ های اچ تی ام ال و المان های بلاکی هم دسته دوم هستند که از جمله آنها میتوانیم به جدول ها و همینطور تگ div یا سایر تقسیم بندی ها اشاره کنیم.

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

  • پاراگراف ها
  • جدول ها
  • لیست ها
  • تگ های عنوان
  • فرم ها

در ادامه با هم میبینیم که موقعیت افقی هر کدام از این المان های html به چه صورت مشخص می شود.

مطالعه مقاله
بهترین ide برای پایتون

1. استفاده از ویژگی align در تگ <p>

استفاده از ویژگی align در تگ <p>

نخستین روشی که برای آموزش راست چين كردن قالب html معرفی میکنیم استفاده از ویژگی به نام align است که در تگ <p> می توانید به ان دست پیدا کنید. همانطور که می دنید در حالت کلی متن ها درر اچ تی ام ال درداخل یک تگ پی قرار می گیرند که به ان تگ پاراگراف هم گفته می شود.

 این تگ یک مشخصه ییا همان attribute دارد که align نامیده می شود. این مشخصه می تواند مقدارهای left, right و center را گرفته و با توجه به مشخصه دریافت شده متن موجود در تگ پی را چپ چین، راست چین و یا وسط چین کند.

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

در صورتی که شما برای مشخصه align در تگ p هیچ مقداری مشخص نکنید انگاه به صورت پیش فرض مقدار آن left خواهد بود. تگ <p> یک ویزگی کاربردی دیگر هم در این زمینه دارد و آن هم dir است. در این ویژگی شما می توانید جهت نوشته و متنتان را مشخص کنید که می تواند چپ به راست یا راست به چپ باشد.

مثلا برای زبان انگلیسی این مشخصه می بایست به صورت ltr: left to right و برای زبان فارسی rtl: right to left باشد. این atribiute به صورت پیش فرض روی حالت چپ به راست یا ltr قرار دارد.

2. بهره‌گیری از CSS برای راست چین کردن قالب html

css & html

در این قسمت نوبت به دومین روش آموزش راست چين كردن قالب html میرسد که به کمک css انجام می شود. در حال حاضریکی از بهترین راهکارهایی که برای چگونگی به نمایش درآوردن المان ها و تگ های داخل یک صفحه وب وجود دارد استفاده از css است.

مطالعه مقاله
آموزش نصب فلاتر در اندروید استودیو

علاوه بر المان ها و تگ ها شما می توانید از سی اس اس به منظور راست چین یا چپ چین کردن پاراگراف ها هم استفاده کنید. این ویژگی در سی اس اس به نام text-align شناخته می شود و عملکرد آن دقیقا شبیه به تگ <p> و مشخصه align است.

حتی مفادیری که برای این مشخصه تعریف شده اند هم دقیقا همان مقادیر مشخصه align در تگ پی هستند. ویژگی dir در تگ پی در سی اس اس جای خود را به مشخصه direction داده است و کارایی آن هم دقیقا مشابه همین ویژگی است. مقادیری که برای direction تعریف شده اند هم مثل dir دو مقدار rtl و ltr است.

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

راست چين كردن قالب html با استفاده از css برای المان های بلاکی

راست چين كردن قالب html با استفاده از css برای المان های بلاکی

اجازه دهید از پاراگراف ها بیرون آمده و کمی به مشکل بزرگ تازه کارهای اچ تی ام ال در این زمینه بپردازیم که المان های بلاکی نظیر جدول ها هستند که در تگ div قرار می گیرند. شاید اولین راه حلی که برای این کار به ذهن میرسدم غیر استانداردترین انها باشد به این صورت که شما جدول و یا هر المانی که نیاز دارید آن را راست چین کنید را در یک تگ دیگر بگذارید.

 سپس نحوه چینش تگ والد را مطابق میل خودتان تنظیم کنید (مثلا راست چین) و به این شکل تلاش کنید که المان مورد نظر را راست چین کنید. علاوه بر غیر استاندارد بودن این روش، برخی مرورگرها هم از ان پشتیبانی نمی کنند و در نتیجه این روش کارآمد نیست.

مطالعه مقاله
سی شارپ چیست؟ از کاربرد و مزایا C# بیشتر بدانید!

بهترین کاری که در این زمینه می توانید انجام دهید استفاده از سی اس اس است. شما می بایست به المانی که قصد دارید نحوه چینش آن را تغییر دهید مشخصه های سی اس اس را نسبت دهید. توصیه میکنیم این بار به جای ویژگی align از مشخصه float در سی اس اس استفاده کنید.

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

اگر قصد وسط چین کردن المان های بلاکی را دارید بهترین انتخاب و در عین حال استانداردترین آنها استفاده از مشخصه margin است. تنها کافیست مقدار آن را از هر طرف به 50 درصد کاهش دهید و به راحتی المان مورد نظرتان را درست وسط صفحه ببینید.

خلاصه

نحوه چینش پاراگراف ها و به طور کلی المان ها یکی از مباحث ساده اما مهم در اچ ی ام ال است که معمولا در آموزش HTML به آن پرداخته می شود. در این مطلب بررسی کردیم که به چه روش هایی می توانیم قالب اچ تی ام ال را راست چین، چپ چین و یا وسط چین کنیم و یا آن را به صورت justify شده –یعنی از هر طرف به یک اندازه مساوی فاصله داشته باشد- چیدمان کنیم.

به علاوه در این آموزش راست چين كردن قالب html در مورد المان های بلاکی هم صحبت کردیم و گفتیم که چطور می توانید آنها را به صورت راست چین شده و یا چپ چین و وسط چین درآورید. امیدواریم که این مطلب برای شما مفید واقع شده باشد.

قبلی نقشه راه برنامه نویسی پایتون در سال 2022
بعدی آموزش ویجت های فلاتر چیست و چه کاربردی دارد؟

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

جستجو برای:
دسته‌ها
  • #C
  • ++C
  • CSS
  • HTML
  • PHP
  • SQL server
  • اندروید
  • برنامه نویسی
  • پایتون
  • جاوا
  • جاوا اسکریپت
  • دارت
  • دلفی
  • سوئیفت
  • فلاتر
  • متلب
  • وبلاگ
  • یادگیری ماشین
  • محبوب
  • جدید
  • دیدگاه ها

لوگو مدادسبز    مداد سبز

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

دسترسی سریع
  • مداد سبز
  • درباره مداد سبز
  • تماس با مداد سبز
  • کسب درآمد
  • حریم خصوصی
  • شرایط بازگشت وجه

شبکه های اجتماعی

مجوز های مداد سبز

اینماد
logo-samandehi
تمامی حقوق سایت متعلق به پلتفرم آموزش آنلاین مداد سبز می باشد.
اشتراک گذاری در شبکه های اجتماعی
ارسال به ایمیل
https://medadsabz.com/?p=22853
ورود ×
کد تایید
لطفاً کد تأیید ارسال شده به را تایپ کنید
ثبت
ورود با گذرواژه یکبار مصرف
ارسال مجدد گذرواژه یکبار مصرف(00:180)
آیا حساب کاربری ندارید؟
ثبت نام

ارسال مجدد گذرواژه یکبار مصرف (00:180)
بازگشت به ورود
  • (+93) Afghanistan
  • (+355) Albania
  • (+213) Algeria
  • (+1) American Samoa
  • (+376) Andorra
  • (+244) Angola
  • (+1) Anguilla
  • (+1) Antigua
  • (+54) Argentina
  • (+374) Armenia
  • (+297) Aruba
  • (+61) Australia
  • (+43) Austria
  • (+994) Azerbaijan
  • (+973) Bahrain
  • (+880) Bangladesh
  • (+1) Barbados
  • (+375) Belarus
  • (+32) Belgium
  • (+501) Belize
  • (+229) Benin
  • (+1) Bermuda
  • (+975) Bhutan
  • (+591) Bolivia
  • (+599) Bonaire, Sint Eustatius and Saba
  • (+387) Bosnia and Herzegovina
  • (+267) Botswana
  • (+55) Brazil
  • (+246) British Indian Ocean Territory
  • (+1) British Virgin Islands
  • (+673) Brunei
  • (+359) Bulgaria
  • (+226) Burkina Faso
  • (+257) Burundi
  • (+855) Cambodia
  • (+237) Cameroon
  • (+1) Canada
  • (+238) Cape Verde
  • (+1) Cayman Islands
  • (+236) Central African Republic
  • (+235) Chad
  • (+56) Chile
  • (+86) China
  • (+57) Colombia
  • (+269) Comoros
  • (+682) Cook Islands
  • (+225) Côte d'Ivoire
  • (+506) Costa Rica
  • (+385) Croatia
  • (+53) Cuba
  • (+599) Curaçao
  • (+357) Cyprus
  • (+420) Czech Republic
  • (+243) Democratic Republic of the Congo
  • (+45) Denmark
  • (+253) Djibouti
  • (+1) Dominica
  • (+1) Dominican Republic
  • (+593) Ecuador
  • (+20) Egypt
  • (+503) El Salvador
  • (+240) Equatorial Guinea
  • (+291) Eritrea
  • (+372) Estonia
  • (+251) Ethiopia
  • (+500) Falkland Islands
  • (+298) Faroe Islands
  • (+691) Federated States of Micronesia
  • (+679) Fiji
  • (+358) Finland
  • (+33) France
  • (+594) French Guiana
  • (+689) French Polynesia
  • (+241) Gabon
  • (+995) Georgia
  • (+49) Germany
  • (+233) Ghana
  • (+350) Gibraltar
  • (+30) Greece
  • (+299) Greenland
  • (+1) Grenada
  • (+590) Guadeloupe
  • (+1) Guam
  • (+502) Guatemala
  • (+44) Guernsey
  • (+224) Guinea
  • (+245) Guinea-Bissau
  • (+592) Guyana
  • (+509) Haiti
  • (+504) Honduras
  • (+852) Hong Kong
  • (+36) Hungary
  • (+354) Iceland
  • (+91) India
  • (+62) Indonesia
  • (+98) Iran
  • (+964) Iraq
  • (+353) Ireland
  • (+44) Isle Of Man
  • (+972) Israel
  • (+39) Italy
  • (+1) Jamaica
  • (+81) Japan
  • (+44) Jersey
  • (+962) Jordan
  • (+7) Kazakhstan
  • (+254) Kenya
  • (+686) Kiribati
  • (+965) Kuwait
  • (+996) Kyrgyzstan
  • (+856) Laos
  • (+371) Latvia
  • (+961) Lebanon
  • (+266) Lesotho
  • (+231) Liberia
  • (+218) Libya
  • (+423) Liechtenstein
  • (+370) Lithuania
  • (+352) Luxembourg
  • (+853) Macau
  • (+389) Macedonia
  • (+261) Madagascar
  • (+265) Malawi
  • (+60) Malaysia
  • (+960) Maldives
  • (+223) Mali
  • (+356) Malta
  • (+692) Marshall Islands
  • (+596) Martinique
  • (+222) Mauritania
  • (+230) Mauritius
  • (+262) Mayotte
  • (+52) Mexico
  • (+373) Moldova
  • (+377) Monaco
  • (+976) Mongolia
  • (+382) Montenegro
  • (+1) Montserrat
  • (+212) Morocco
  • (+258) Mozambique
  • (+95) Myanmar
  • (+264) Namibia
  • (+674) Nauru
  • (+977) Nepal
  • (+31) Netherlands
  • (+687) New Caledonia
  • (+64) New Zealand
  • (+505) Nicaragua
  • (+227) Niger
  • (+234) Nigeria
  • (+683) Niue
  • (+672) Norfolk Island
  • (+850) North Korea
  • (+1) Northern Mariana Islands
  • (+47) Norway
  • (+968) Oman
  • (+92) Pakistan
  • (+680) Palau
  • (+970) Palestine
  • (+507) Panama
  • (+675) Papua New Guinea
  • (+595) Paraguay
  • (+51) Peru
  • (+63) Philippines
  • (+48) Poland
  • (+351) Portugal
  • (+1) Puerto Rico
  • (+974) Qatar
  • (+242) Republic of the Congo
  • (+40) Romania
  • (+262) Runion
  • (+7) Russia
  • (+250) Rwanda
  • (+290) Saint Helena
  • (+1) Saint Kitts and Nevis
  • (+508) Saint Pierre and Miquelon
  • (+1) Saint Vincent and the Grenadines
  • (+685) Samoa
  • (+378) San Marino
  • (+239) Sao Tome and Principe
  • (+966) Saudi Arabia
  • (+221) Senegal
  • (+381) Serbia
  • (+248) Seychelles
  • (+232) Sierra Leone
  • (+65) Singapore
  • (+1) Sint Maarten
  • (+421) Slovakia
  • (+386) Slovenia
  • (+677) Solomon Islands
  • (+252) Somalia
  • (+27) South Africa
  • (+82) South Korea
  • (+211) South Sudan
  • (+34) Spain
  • (+94) Sri Lanka
  • (+1) St. Lucia
  • (+249) Sudan
  • (+597) Suriname
  • (+268) Swaziland
  • (+46) Sweden
  • (+41) Switzerland
  • (+963) Syria
  • (+886) Taiwan
  • (+992) Tajikistan
  • (+255) Tanzania
  • (+66) Thailand
  • (+1) The Bahamas
  • (+220) The Gambia
  • (+670) Timor-Leste
  • (+228) Togo
  • (+690) Tokelau
  • (+676) Tonga
  • (+1) Trinidad and Tobago
  • (+216) Tunisia
  • (+90) Turkey
  • (+993) Turkmenistan
  • (+1) Turks and Caicos Islands
  • (+688) Tuvalu
  • (+1) U.S. Virgin Islands
  • (+256) Uganda
  • (+380) Ukraine
  • (+971) United Arab Emirates
  • (+44) United Kingdom
  • (+1) United States
  • (+598) Uruguay
  • (+998) Uzbekistan
  • (+678) Vanuatu
  • (+58) Venezuela
  • (+84) Vietnam
  • (+681) Wallis and Futuna
  • (+212) Western Sahara
  • (+967) Yemen
  • (+260) Zambia
  • (+263) Zimbabwe
مرورگر شما از HTML5 پشتیبانی نمی کند.