جستجو برای:
سبد خرید 0
  • خانه
  • دوره هاداغ
    • آموزش صفر تا صد html css
    • هوش برنامه نویسی نوین
    • آموزش تدوین ویدیو
    • همه ی محصولات
  • دوره ی حضوری
    • آموزش وردپرس
    • آموزش html css
    • آموزش php
    • آموزش جاوا اسکریپت
  • ویدیو های آموزشی
  • تماس با ما
    • تبریز - نصف راه روبروی شهرداری جنب نمایندگی ایران خودرو ساختمان مهدیه طبقه ی 6 واحد B (ملاقات حضوری فقط با هماهنگی قبلی)

      09338776735

      info@wppush.ir

      اینستاگرام
      کانال آپارات
  • آموزش رایگان

برای یاد گیری طراحی سایت از اینجا شروع کن

روز
ساعت
دقیقه
ثانیه
جشنواره فروش ویژه دوره ی html css به پایان رسید
مشاهده ی دوره

ورود

گذرواژه خود را فراموش کرده اید؟

ارسال مجدد رمز عبور یکبار مصرف (00:30)

ثبت نام

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

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

ارسال مجدد رمز عبور یکبار مصرف (00:30)
  • 09338776735
  • info@wppush.ir
0
آموزش طراحی سایت در تبریز | آموزش وردپرس در تبریز | 09141107278 | آموزش وردپرس pdf
  • خانه
  • دوره هاداغ
    • آموزش صفر تا صد html css
    • هوش برنامه نویسی نوین
    • آموزش تدوین ویدیو
    • همه ی محصولات
  • دوره ی حضوری
    • آموزش وردپرس
    • آموزش html css
    • آموزش php
    • آموزش جاوا اسکریپت
  • ویدیو های آموزشی
  • تماس با ما
    • تبریز - نصف راه روبروی شهرداری جنب نمایندگی ایران خودرو ساختمان مهدیه طبقه ی 6 واحد B (ملاقات حضوری فقط با هماهنگی قبلی)

      09338776735

      info@wppush.ir

      اینستاگرام
      کانال آپارات
  • آموزش رایگان
آخرین اطلاعیه ها
جهت نمایش اطلاعیه باید وارد سایت شوید
عضویت و وورد

وبلاگ

آموزش طراحی سایت در تبریز | آموزش وردپرس در تبریز | 09141107278 | آموزش وردپرس pdfوبلاگآموزش html cssآموزش تگ div در HTML

آموزش تگ div در HTML

12 شهریور 1401
ارسال شده توسط علی نریمانی
آموزش html css
آموزش تگ div در HTML+وردپرس پوش

آموزش تگ div در HTML

دوست من سلام امیدوارم حالتون عالی و پر از انرژی باشید. توی این بخش از آموزش html css قراره که با آموزش تگ div در HTML به صورت کامل آشنا بشید.

تگ Div در HTML

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

این نکته رو در نظر داشته باش که تگ div مثل یه ظرف و قالب به اصطلاح ( Container ) عمل میکنه و برای نگهداری دیگر تگ ها درون خودش بکار میره، این یعنی در واقع هرتگی رو میشه درونش نوشت همین و بس.

در زمان های قدیم که هنوز HTML اینقد پیشرفت نکرده بود، خیلی جالبه که بدونید طراحان و برنامه نویسان وب سایت برای طرح بندی ( یا همون قالب بندی وبسایت ) از جدول استفاده میکردند ، یعنی با استفاده از جدول بخش های یک وبسایت رو تعیین میکردند. ( مثلا بخش هدر ، مطالب اصلی ، منو ، فوتر و … )

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

راستی اگر دنبال آموزش html css پروژه محور هستید می توانید از دوره ی آموزش وردپرس پوش استفاده کنید. جهت مشاهده ی 28 ساعت ویدیو آموزشی با پشتیبانی مادام العمر روی این لینک کلیک کنید.

در نتیجه با وجود تگ هایی مثل header ، footer ، div و … ما به سهولت میتوانیم بخش های مختلف صفحه ی یک وبسایت رو طراحی کنیم و به این طراحی ما میگن یه طراحی مدرن و همین طور طراحی حرفه ای و مورد قبول مرورگرها و موتورهای جستجوگر برای بحث سئو.

مثال از تگ div در HTML

در ادامه ی آموزش html و css میتوانید یک مثال از این تگ را مشاهده نمایید.

مثال شماره یک : برای طرح بندی ساده، بدون پیچیدگی و زیبایی یک صفحه با استفاده از جدول ( در این مثال فقط میخوام بهت نشون بدم که قبلا با جدول چطور صفحه طراحی میکردن اما شما هیچ وقت به این شکل صفحه ای رو طراحی نکن )

<body>
 <table>
  <tr>
   <td width="120">
    <a href="https://wppush.ir//">
     <img src="files/logo.png" width="70">
    </a>
   </td>
   <td>
    <h2>هدر من در اینجا</h2>
   </td>
  </tr>
  <tr>
   <td colspan="2">
    <p>محتوای اصلی من</p>
    <p>محتوای اصلی من</p>
    <p>محتوای اصلی من</p>
    <p>محتوای اصلی من</p>
    <p>محتوای اصلی من</p>
   </td>
  </tr>
  <tr>
   <td colspan="2">
    <h2>فوتر من در اینجا</h2>
   </td>
  </tr>
 </table>
</body>

اما مثال شماره دو : استفاده عادی از تگ div ( با استفاده از صفت class به div مون کلاس دادیم )

<body dir="rtl">
<div class="mydiv bg-green">
 <h2>بخش اول</h2>
 <p>سایت آموزشی وردپرس پوش</p>
</div>
<div class="mydiv bg-blue">
 <h2>بخش دوم</h2>
 <p>سایت آموزشی وردپرس پوش</p>
</div>
</body>

در مثال شماره سه : طرح بندی خیلی ساده یک قالب ( دارای هدر – باکس محتوای اصلی و فوتر )

<body dir="rtl">
<div class="my-header">
 ...
</div>
<div class="my-content">
 ...
</div> 
<div class="my-footer">
 ...
</div>
</body>

و مثال شماره چهار : طرح بندی کمی پیشرفته تر یک قالب HTML با استفاده از تگ DIV

<body>
 برای مشاهده دستورات لطفا بروی دکمه امتحان کنید کلیک نمایید
</body>

پشتیبانی مرورگرها

در جدولی که در پایین مشاهده می کنید به این نتیجه می رسید که آیا مرورگرهای اینترنتی از تگ div در HTML پشتیبانی میکنند یا خیر.

 

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

 

پشتیبانی از صفات و رویدادهای عمومی

تگ div قابلیت پشتیبانی از تمام صفات عمومی و رویدادهای عمومی در HTML دارد.

نکات و توضیحات

  • تگ DIV در حالت عادی یا به عبارتی پیش فرض استایل خاصی ندارد ولی ما میتونیم به آسانی با استفاده از CSS بهش استایل بدیم و اون رو سفارشی سازی کنیم. ( مانند مثال ها )
  • به سهولت و آسانی میتونیم درون تگ div از ID ها و Class ها  استفاده کنیم. ( مانند مثال ها )
  • عملا تگ div قالبی هست برای نگهداری سایر تگ ها و هرتگی که نیاز باشه رو میتونید درونش بنویسید ( استثنایی برای قرار دادن سایر تگ ها درون این تگ وجود نداره )

دستورات CSS پیش فرض

غالبا مرورگرها تگ div را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند شما هم می توانید از این دستورات استفاده کنید.

div {
  display: block;
}

توصیه ما به شما دوست عزیزم این است که با شرکت در دوره ی آموزشی html css در این موارد بسیار مهارت پیدا کنید.

 

برای امتیاز به این نوشته کلیک کنید!
[کل: 0 میانگین: 0]

در صورتی که مشکلی دارید و قادر به حل آن نیستید می توانید با ما در تماس باشید

فرم درخواست پشتیبانی (فرم زیر پست ها)

برچسب ها: آموزش cssآموزش css3آموزش htmlآموزش html cssآموزش html css پروژه محورآموزش html و cssآموزش html و css رایگانآموزش html5آموزش تگ divآموزش تگ div در HTMLتگ divتگ div در HTML
قبلی آموزش تگ dt در HTML
بعدی آموزش تگ dialog در HTML

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

تمامی حقوق این وبسایت متعلق به وردپرس پوش می باشد.
اشتراک گذاری در شبکه های اجتماعی
ارسال به ایمیل
https://wppush.ir/?p=10570
ورود ×
کد تأیید
لطفا کد تأیید ارسال شده به را وارد کنید
ثبت
ورود با رمز عبور یکبار مصرف
ارسال مجدد رمز عبور یکبار مصرف(00:30)
حساب کاربری ندارید؟
ثبت نام

ارسال مجدد رمز عبور یکبار مصرف (00:30)
بازگشت به ورود
  • (+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 پشتیبانی نمی کند.

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

تماس با ما

پاسخگوی شما هستیم

  • 09338776735
  • همه روزه از ساعت 9 صبح تا 12 شب
  • info@wppush.ir
question