https://virgool.ir/feed/@belearn.irآموزش طراحی سایت، آموزش html و css، آموزش برنامه نوسی و آموزش سئو در کمترین زمانfa2026-11-11 21:46:12https://files.virgool.ir/upload/users/1894787/avatar/Rg0rTu.pnghttps://virgool.ir/@belearn.irhttps://virgool.ir/@belearn.ir/تگ-body-در-html-چیست-و-چه-کاربردی-دارد-uutce0hwcekmدر مطلب قبل درباره تگ head در html صحبت کردیم. در این مطلب از آمورش html و css می خواهیم درباره تگ body در html صحبت کنیم. تگ <body> تعیین کننده محتوای اصلی سند شماست که در مرورگر نمایش داده می شود. این تگ نیز جز جدایی ناپذیر و اصلی تمام کدهای html و صفحات وب است. بنابراین لازم است تا به طور جامع و کاربردی با تگ body در html آشنا شوید تا بتوانید به راحتی در کدهای سایت خود بکار ببرید.تگ body در html چیست؟تگ body در html چیست؟تگ body در html یکی از مهمترین تگ های HTML می باشد که می توان گفت ستون اصلی یک سند HTML یا صفحه وب می باشد. تگ <body> بدنه سند را تعریف می کند که به تگ بدنه سایت نیز معروف است و شامل تمام محتویات یک سند HTML مانند متن، لینک ها، تصاویر، جداول، لیست ها و… می باشد.بطور کلی اطلاعاتی مانند متن و عکس که قرار است در سند html ما به کاربران توسط مرورگرهای وب نمایش داده شود در این بخش نوشته خواهد شد. به عبارت دیگر چارچوب دیداری سایت شما شامل تگ های زیادی است. همه این تگ های بصری داخل تگ body در html قرار دارند. شما می توانید سایز قلم،رنگ قلم و سایر مواردی که در صفحات وب دیده می شود را در این تگ تعیین کنید.ساختار تگ body در html چیست و کجا نوشته می شود؟تگ body بعد از تگ head در html و قبل از تگ بسته HTML قرار می گیرد و سایر عناصر بصری را بین دو تگ باز و بسته <body></body> قرار می دهد. همانطور که گفته شد هر تگ بصری مثل تگ heading یا تگ p یا تگ img، با حضور در بین تگ باز و بسته عنصر body در مرورگر ها به نمایش در خواهند آمد. فراموش نکنید که در هر فایل html، می بایست تنها یک بار از این تگ استفاده شود. نحوه کدنویسی این تگ به صورت زیر می باشد:<body>Place your Content here</body>مثال از تگ body در html<!DOCTYPE html><html><head><title>Body Tag</title></head><body><h2>Example of body tag</h2><p>This paragraph is written between the body tag</p></body></html>خروجی تگ body در html مثال بالا می شود:صفات تگ body در htmlدر جدول زیر می توانید صفات به همراه مقادیری را که می توان در تگ <body> استفاده کرد را مشاهده نمایید.( علامت یعنی در HTML5 منسوخ شده )نام ویژگیمقدارتوضیحات Alinkرنگ رنگ لینک فعال در سند را تعیین می کند. (در HTML5 پشتیبانی نمی شود)Background URL تصویر پس زمینه سند را تعیین می کند. (در HTML5 پشتیبانی نمی شود) Bgcolorرنگ رنگ پس زمینه محتوا را تعیین می کند. (در HTML5 پشتیبانی نمی شود) Linkرنگ رنگ لینک بازدید نشده را تعیین می کند. (در HTML5 پشتیبانی نمی شود) Text رنگ رنگ متن موجود در سند را تعیین می کند. (در HTML5 پشتیبانی نمی شود) Vlink رنگ رنگ لینک بازدید شده را تعیین می کند. (در HTML5 پشتیبانی نمی شود) تابع را هنگام بارگیری صفحه فراخوانی می کند. هنگامی که کاربر صفحه را ترک می کند، تابع را فراخوانی می کند. هنگامی که سند توسط کاربر فوکوس را دریافت می کند، تابع را فراخوانی می کند. هنگامی که سند فوکوس کاربر را از دست می دهد، تابع را فراخوانی می کند.چطور در در تگ body از صفت background استفاده کنیم؟برای استفاده از صفت background در تگ body در html می بایست از ساختار موجود در کادر زیر استفاده کنید. شما به کمک صفت background می توانید برای تگ body یک تصویر را به عنوان بک گراند انتخاب کنید.<body background=”image.gif”></body>چطور در در تگ تگ body در html از صف bgcolor استفاده کنیم؟برای استفاده از صفت bgcolor در تگ body می بایست از ساختار موجود در کادر زیر استفاده کنید. شما به کمک صفت bgcolor می توانید برای تگ body یک رنگ خاص را به عنوان بک گراند انتخاب کنید.<body bgcolor=”color”></body>کافی است در کد بالا فقط بجای color رنگ دلخواه یا کد رنگ هگزا دسیمال مربوطه را قرار دهید.چطور در در تگ body از صفت text استفاده کنیم؟برای استفاده از صفت text در تگ body در html می بایست از ساختار موجود در کادر زیر استفاده کنید. شما به کمک صفت text می توانید برای متون موجود در تگ body یک رنگ خاص را انتخاب کنید.<body text=”color”></body>کافی است در کد بالا فقط بجای color رنگ دلخواه یا کد رنگ هگزا دسیمال مربوطه را قرار دهید.<body text=”blue”></body><body text=”#۰۰۰۰CC”></body>چطور در در تگ بادی از صف link استفاده کنیم؟برای استفاده از صفت link در تگ body در html می بایست از ساختار موجود در کادر زیر استفاده کنید. شما به کمک صفت link می توانید برای لینک های موجود در تگ body قبل از کلیک خوردن یک رنگ خاص را انتخاب کنید.<body link=”color”></body>کافی است در کد بالا فقط بجای color رنگ دلخواه یا کد رنگ هگزا دسیمال مربوطه را قرار دهید.<body link=”red”></body>چطور در تگ body در html از صف alink استفاده کنیم؟برای استفاده از صفت alink در تگ body می بایست از ساختار موجود در کادر زیر استفاده کنید. شما به کمک صفت alink می توانید برای لینک های موجود در تگ body بعد از کلیک خوردن یک رنگ خاص را انتخاب کنید.<body alink=”color”></body>دقیقا مثل صفت linkچطور در در عنصر body از صف vlink استفاده کنیم؟برای استفاده از صفت vlink در تگ بادی می بایست از ساختار موجود در کادر زیر استفاده کنید. شما به کمک صفت vlink می توانید برای مشخص کردن لینک های موجود در تگ body که از قبل کلیک خورده اند یک رنگ خاص را انتخاب کنید.<body vlink=”color”></body>دقیقا مثل دو صفت قبلیتفاوت عنصر body در HTML 4.01 و HTML5در HTML5 تمام ویژگی های طرح (layout attributes) حذف شده است. یعنی کلیه خصیصه های تگ body در HTML5 کار نمی کنند و باید به جای آن از CSS استفاده کرد.پشتیبانی تگ body در html از صفات و خصوصیاتتگ body در html، از همه صفات عمومی یا Global Attributes و نیز همه رویداد ها یا Event Attributes حمایت و پشتیبانی می کند.کدام مرورگر ها از تگ body در html پشتیبانی می کنند؟مرورگر هایی که از تگ body در html پشتیبانی می کنند.دستورات CSS پیش فرض تگ body در htmlbody {display: block;margin: ۸px;}body:focus {outline: none;}سخن پایانیدر این مطلب به طور جامع و کاربردی از تگ body در html، ساختارش، نحوه کدنویسی آن و معرفی تمامی صفت های تگ بادی صحبت کرده ایم. با مطالعه این مطلب تسلط کافی به مبحث تگ <body> پیدا خواهید کرد.برای دریافت پاسخ سوالات خود و بهره مند شدن از تجربه اساتید خبره و دیگر دوستانتان در کمپین آموزشی بی لرن می توانید سوالات خود را در کافه گپ و گفت مطرح نمایید و در سریعترین زمان، پاسخ سوال خود را دریافت نمایید. همچنین می توانید با عضویت در کمپین آموزشی بی لرن، از دوره های آموزشی رایگان و کاربردی در زمینه های مختلف به صورت تخصصی و حرفه ای بهره مند شوید.اگر از مطالعه این مطلب لذت بردید، می توانید آن را در شبکه های اجتماعی خود به اشتراک بگذارید تا دوستان شما نیز از آن بهره ببرند.کمپین آموزشی بی لرنکمپین آموزشی بی لرنMon, 16 Jan 2023 10:06:50 +0330https://virgool.ir/@belearn.ir/تگ-head-در-html-چیست-و-چه-کاربردی-دارد-ry2x1o6hujjxدر مطلب قبل درباره تگ Doctype در html صحبت کردیم. در این مطلب از آموزش html و css می خواهیم به طور جامع به تگ head در html بپردازیم. همانطور که می دانید تگ head در html، از تگ های کلیدی و بسیار مهم است که در تمام صفحات وب وجود دارد. این تگ همانند یک ظرف برای نگهداری برخی از تگ های مهم و پرکاربرد دیگر مورد استفاده قرار می گیرد. بنابراین لازم است که به طور کامل با این تگ آشنا شوید. تا انتهای مطلب با ما همراه باشید.تگ head در html چیست؟تگ head در html چیست؟تگ head یکی از مهمترین تگ های html و اساسی ترین بخش یک صفحه وب می باشد. تگ head در html را می توان به مغز یک صفحه وب تشبیه کرد، چرا که در این قسمت یکسری اطلاعات مربوط به مرورگرها و موتورهای جستجوگر (برای بحث سئو) قرار می گیرد. تگ head در بالای کدهای html سایت و بعد از بخش اول تگ <html> و قبل از تگ body قرار می گیرد.عنصر head محفظه ای برای metadata ها است یعنی درون تگ head تگ های دیگری قرار می گیرند که جهت ایجاد توضیحات متادیتا (metadata)، اسکریپت ها (script)، استایل ها (style) و لینک (link) به برخی از فایل های خروجی استفاده می شوند. اطلاعاتی که در تگ head قرار می‌ گیرند، در خروجی نمایش داده نمی‌ شوند. شما اگر بخواهید اطلاعاتی را در خروجی یا مرورگر نمایش دهید باید آن‌ ها را در تگ <body> قرار دهید.نکته جالب اینجاست که در HTML4.01 استفاده و وجود تگ head در html در یک صفحه وب ضروری است، ولی در HTML5 این امکان وجود دارد که می توانید از این تگ در یک صفحه وب استفاده نکنید.آموزش کار با تگ head در htmlعنصر head در یک سند HTML بعد از تگ HTML و قبل از تگ body قرار می گیرد. این تگ با کمک دو تگ باز و بسته <head></head> بین دو تگ اصلی <html> و <html/> می‌ گیرد. به این عمل, یعنی قرار دادن یک تگ در دل تگ دیگر، nest می‌ گویند. تگ head در html در بردارنده عناصر مهم برای ربات های گوکل و کد های مربوط به CSS است.دوره پیشنهادی : یادگیری آموزش grid در cssساختار تگ head در htmlساختار و نحوه کدنویسی تگ head به صورت زیر می باشد:<!doctype html><html><head>Document head related tags</head><body>Document body related tags</body></html>تگ های پراستفاده در قسمت تگ head در htmlتگ ها و زیر تگ هایی که بین تگ هد قرار می گیرند شامل موارد زیر می باشد:توضیحاتنام تگ برای مشخص کردن عنوان یک صفحه وب بوده، و برای ربات های جتسجوگر بسیار مهم است.Title برای اضافه کردن یکسری اطلاعات اضافی در مورد یک صفحه وب بوده و برای مرورگرها و موتورهای جستجوگر مهم است.Meta برای اضافه کردن دستورات جاوا اسکریپت به صفحه وب استفاده می شود. Scriptبرای اضافه کردن دستورات css خطی به یک صفحه وب کاربرد دارد. Style برای فراخوانی فایل های خارجی مثل css در یک صفحه وب به کار می رود. Link برای مشخص کردن یک لینک پایه برای تمامی لینک های موجود در یک صفحه وب به کار می رود.Baseنحوه استفاده از تگ <title> در HTMLیکی از موارد ضروری و مهم برای صفحات وب، قرار دادن عنوان یا همان title برای آن‌هاست. این عنوان در تگ <title> و در درون تگ head در html قرار می‌ گیرد. مشخص کردن عنوان سند HTML ضروری و الزامی است. این موضوع برای زمانی مهم می‌ شود که شما بخواهید در یک سایت چندین صفحه را باز کنید و بعد آن‌ ها را مطالعه کنید.حال برای اینکه به یک صفحه خاص مراجعه کنید باید تمامی تب را بررسی کنید تا صفحه مورد نظر خود را پیدا کنید اما در صورتی که در هر صفحه، از تگ title استفاده کنید از عنوان هر صفحه که در تب‌ ها مشخص شده است، موضوع هر صفحه را متوجه خواهید شد. عنوان صفحات وب در تب مرورگرها به صورت زیر نشان داده می‌ شود:همچنین تگ title برای موتورهای جستجو نیز بسیار مهم هستند. محتوای عنوان صفحه برای بهینه سازی موتورهای جستجو (سئو) بسیار حائز اهمیت است. عنوان صفحه توسط الگوریتم های موتور جستجو برای تعیین ترتیب هنگام فهرست بندی صفحات در نتایج جستجو استفاده می شود. تگ عنوان ممکن است شما را با تگ‌های Heading> h> یا تیترها به اشتباه بیندازد. اما این دو با یکدیگر متفاوت هستند.تگ‌ های Heading در واقع عنوانی را برای محتوا و متن‌ های موجود در صفحه در تگ <body> مشخص می‌ کنند در حالی که تگ title، برای صفحه وب در تب مرورگر عنوانی را مشخص می‌ کند و در تگ head در html قرار دارد. در مثال زیر می توانید نحوه استفاده از تگ تایتل را برای یک صفحه وب، مشاهده کنید:<!DOCTYPE html><html><head><title>اینجا عنوان تایتل شما قرار می گیرد.</title></head><body><p>www.belearn.ir</p><script src="https://belearn.ir/wp-content/cache/min/1/d617d73899701154e88414869b450261.js" data-minify="1" defer></body></html>نحوه استفاده از تگ <meta> در HTMLتگ <meta> عموما برای تعیین Character set، مشخص کردن نویسنده سند (author)، کلمات کلیدی (keywords)، آخرین تغییرات، توضیحاتی در مورد صفحه (page discription)، و تنظیمات viewport و دیگر داده های Meta استفاده می شوند. این تگ دارای یک سری صفت (attribute) است که هر کدام کاری خاص را انجام می دهند.Metadata ها در صفحه نمایش داده نمی شوند اما داده های meta (متا دیتا) توسط مرورگر ها (جهت نحوه نمایش محتویات یا بار گذاری مجدد صفحه)، موتور های جستجو (جهت تعیین کلمات کلیدی) و دیگر سرویس های وب استفاده می شود. اما توسط مرورگرها (نحوه نمایش محتوا و یا بارگذاری مجدد صفحه)، موتورهای جستجو (کلمات کلیدی) و سایر خدمات وب استفاده می شوند.این عنصر از تگ head در html نیز مانند تگ title یک تگ تاثیرگذار و مهم در سئو و رتبه گیری صفحات وب است. متا تگ ها انواع مختلفی دارند به طوری که حدود سی متا تگ وجود دارد. متا تگ ها نقش پر رنگی در مسائل مربوط به سئو ایفا می کنند. چندین نمونه از پرکاربردترین و مهمترین متا تگ ها به شرح زیر است:متای charsetاگر شما از فونت فارسی استفاده می کنید، برای جلوگیری از بهم ریختی هنگام نمایش در مرورگرهای می بایست از متای charset استفاده کنید. در واقع این صفت کار تعریف نوع کاراکترهای مورد استفاده در یک صفحه وب را مشخص می کند.کدی که می بایست به تگ متای خود اضافه کنید کد روبرو است: meta charset=”UTF-8″متای descriptionکار این صفت، ارائه یک توضیح کوتاه یا شرحی درباره صفحه وب برای موتورهای جستجوگر و مخاطبان است. این توضیحات توسط موتور های جستجوگر هنگام سرچ به مخاطبان نمایش داده می شوند.کدی که می بایست به تگ متای خود اضافه کنید کد روبرو است: meta name=”description” content=”belearn the best”متای keywordsشما به کمک این متا، کلمات کلیدی مربوط به یک صفحه وب را برای موتورهای جستجوگر تعریف می کنید. این متا هم از متا های مهم در سئو سایت است که می بایست در تگ head در html قرار گیرد.کدی که می بایست به تگ متای خود اضافه کنید کد روبرو است: meta name=”keywords” content=”HTML, CSS, JavaScript, HTMLTags”متای authorاین صفت مشخص کننده نویسنده صفحه وب برای موتورهای جستجوگر است.کدی که می بایست به تگ متای خود اضافه کنید کد روبرو است: meta name=”author” content=”negin miri”متای robotsاین متا برای ایندکش یا نوایندکس کردن صفحات استفاده می شود. این صفت به موتورهای جستجوگر (مثل گوگل یا بینگ) می فهماند که این صفحه باید ایندکس شود یا خیر.کدی که می بایست به تگ متای خود اضافه کنید کد روبرو است: meta name=”robots” content=”noindex, follow”نحوه استفاده از تگ در HTMLتگ در تگ head در html برای ایجاد یا لود کردن دستورات زبان جاوا اسکریپت (JavaScript) سمت client به‌ کار می‌ رود. در واقع یعنی تگ یا حاوی دستورات JavaScript است یا به یک فایل خارجی که شامل دستورات JavaScript است، اشاره می‌ کند. دستورات جاوا اسکریپت برای ایجاد تغییرات پویا و بهبود صفحات وب استفاده می‌ شوند. تگ می‌تواند به طور مکرر در قسمت <body> یا <head> مورد استفاده قرار بگیرد.در مثال زیر از تگ در بخش <body> برای ایجاد دستورات JavaScript درون صفحه وب استفاده شده است.<!DOCTYPE html><html><head><title>script tag</title></head><body><h1 id="belearn">belearn</h1>document.getElementById("belearn") = "Hello belearn.ir!";</body>در مثال زیر از تگ در تگ head در html برای ایجاد دستورات JavaScript درون صفحه وب استفاده شده است.<!DOCTYPE html><html><head><title>script tag</title>";document.getElementById("belearn") = "Hello belearn.ir!</head><body><h1 id="belearn">belearn</h1></body></html>نحوه استفاده از تگ <style> در HTMLهمان‌ طور که در آموزش html5 و css3 بی لرن یاد گرفتید، بعد از ایجاد صفحات وب برای رنگ و لعاب دادن به آن‌ ها یا به عبارتی اختصاصی کردن صفحات وب باید از دستورات CSS استفاده کنیم. این دستورات در تگ <style> در تگ head در html قرار می‌ گیرند.استفاده از کدهای CSS در تگ استایل به عنوان روش جاسازی درون سندی یا Embed Syles معروف است. البته در کد نویسی CSS دو روش دیگر به نام های روش درون خطی یا Inline و همچنین برون سندی یا External وجود دارند. اما پیشنهاد می کنیم هیچ وقت از این نوع css نویسی استفاده نکنید. چرا که استفاده از تگ link و سی اس اس دهی خارجی بسیار استاندارد تر است.در صفحات وب از دستورات CSS به ۲ صورت می‌ توان استفاده کرد:درون همان کد HTML در قسمت <head> با استفاده از تگ <style> می‌ توان دستورات را اضافه نمود.فایل جداگانه در Notepad با پسوند css. ایجاد نموده و دستورات را در آن ذخیره نمایید. سپس در کد HTML با دستور <link> که در ادامه توضیح می‌ دهیم، دستورات CSS را اضافه نمایید.نحوه استفاده از تگ <link> در HTMLهنگامی که دستورات HTML را می‌ نویسید، برای ارتباط برقرار کردن بین یک فایل جداگانه و صفحه دیگر، از تگ <link> استفاده می‌ کنید .با استفاده از تگ link شما می توانید به راحتی فایل سی اس اس خارجی یا External خود را که به صورت مجزا ایجاد شده است را فراخوانی یا اصطلاحا به صفحه وب خود متصل کنید. در کد زیر شیوه استفاده از این عنصر را در تگ head در html را مشاهده می کنید:<“link rel=”stylesheet” type=”text/css” href=”layout.css>نحوه استفاده از تگ <base> در HTMLتگ base برای اتصال URL پایه (base URL) به همه URL های وابسته (relative URLs) در صفحه استفاده می شود. با استفاده از عنصر لینک در تگ head در html یک صفحه وب، می توان بیس یا پایه اصلی مقصد تمامی لینک های موجود در یک صفحه وب را مشخص کرد. عنصر base باید دارای یک ویژگی href و یا ویژگی target و یا هر دو باشد. به عنوان مثال اگر شما ۳ لینک زیر را داشته باشید:www.belearn.ir/categorywww.belearn.ir/category/htmlwww.belearn.ir/category/accounting-articlesمقصد، لینک یا url اصلی یعنی www.belearn.ir/category پایه و بیس اصلی مقصد دو لینک دیگر است. بنابراین می توانید از آن به عنوان لینک مقصد پایه به شکل زیر استفاده کنید.<!DOCTYPE html><html><head><base href="https://www.belearn.ir/category" target="_blank"></head><body><h3>Free Educational WebSite</h3><a href="html">آموزش اچ تی ام ال</a> <br><br><a href="accounting-articles">آموزش حسابداری</a><script src="https://www.belearn.ir/wp-content/cache/min/1/d617d73899701154e88414869b450261.js"data-minify="1" defer></body></body></html>برای استفاده از این تگ به ۳ نکته زیر توجه کنید:تگ <base> را به عنوان اولین عنصر در داخل عنصر <head> قرار دهید.اگر تگ base وجود داشته باشد، باید دارای یک خاصیت href یا یک خاصیت target، یا هر دو باشد.در یک سند حداکثر از یک تگ base استفاده می شود.دوره پیشنهادی : یادگیری آموزش flexbox در cssکدام مرورگر ها از تگ head در html پشتیبانی می کنند؟مرورگر هایی که از تگ head در html پشتیبانی می کنندجدول صفات تگ head در htmlتگ head تنها از صفات عمومی در HTML پشتیبانی می کند و صفت مخصوص به خود را ندارد.عدم استفاده از تگ head در html5در html5 این امکان فراهم شده که شما از تگ head در html استفاده نکنید و به هیچ وجه استفاده آن پیشنهاد نمی شود.دستورات CSS مخصوص تگ headمعمولا مرورگرها تگ head را به صورت پیش فرض با دستورات CSS زیر نمایش می دهند:head{display: none;}</html>سخن پایانیدر این مقاله به طور کامل در مورد تگ head در html، ساختار آن، متاتگ های آن صحبت کرده ایم. با مطالعه این مطلب شما تسلط کامل به مفاهیم تگ <head> دارید و به راحتی می توانید کدنویسی را شروع کنید.برای دریافت پاسخ سوالات خود و بهره مند شدن از تجربه اساتید خبره و دیگر دوستانتان در کمپین آموزشی بی لرن می توانید سوالات خود را در کافه گپ و گفت مطرح نمایید و در سریعترین زمان، پاسخ سوال خود را دریافت نمایید. همچنین می توانید با عضویت در کمپین آموزشی بی لرن، از دوره های آموزشی رایگان و کاربردی در زمینه های مختلف به صورت تخصصی و حرفه ای بهره مند شوید.اگر از مطالعه این مطلب لذت بردید، می توانید آن را در شبکه های اجتماعی خود به اشتراک بگذارید تا دوستان شما نیز از آن بهره ببرند.کمپین آموزشی بی لرنکمپین آموزشی بی لرنMon, 16 Jan 2023 09:57:32 +0330https://virgool.ir/@belearn.ir/تگ-doctype-در-html-چیست-uw0wkn1q3zqlدر این مطلب از آموزش html و css می خواهیم درباره تگ Doctype در html صحبت کنیم. شما به کمک این تگ می توانید به مرورگر بگویید که از کدام نسخه استفاده می کنید تا صفحات شما برای کاربر به درستی نمایش یابد. بنابراین ساختاز تگ Doctype در html و نحوه کدنویسی آن در ورژن های مختلف html بسیار حائز اهمیت است که در ادامه به تمامی موضوعات پراخته می شود.تگ Doctype در html چیست؟تگ Doctype در html چیست؟دستور <doctype!> مخفف Document Type بوده و در اولین سطر از کد صفحه وب می باشد. دستور <DOCTYPE!> به عنوان یکی از مهمترین تگ های html به مرورگر نوع و نسخه استفاده شده از زبان برنامه نویسی HTML یا XHTML را اعلام می کند. یعنی مشخص کننده نوع و نسخه آن صفحه وب یا فایل HTML می باشد. مهمترین نکته ای که باید بدانید این است که دستور <DOCTYPE!> تگ نیست.بنابراین اگر در ادامه توضیحات از کلمه تگ برای این دستورالعمل استفاده شده صرفا برای استفاده از اصطلاحات مورد تایید عامه است. هر صفحه فقط می تواند یک نوع تگ Doctype داشته باشد. تگ Doctype در html تنها تگی است که تگ انتهایی ندارد و در تگ ابتدایی هم توسط علامت / بسته نمی شود.چرا دستورالعمل Doctype به وجود آمد؟کنسرسیوم جهانی وب یعنی w3c، استاندارد های مختلفی از زبان HTML را ارائه نموده که هر کدام از آنها در مقایسه با یکدیگر دارای تفاوت هایی هرچند اندک می باشند. همین موضوع باعث می شود که مرورگر های وب، در برخورد با صفحات مختلف نتوانند در حالت عادی، استاندارد صحیح را شناسایی کنند.بنابراین به جای پردازش متناسب با استاندارد اصلی، عملیات پیش فرض خود را برای نمایش صفحه انجام می دهند که این موضوع ممکن است با آنچه مورد نظر شما بوده باشد، فرق کند و یا از مرورگری به مرورگر دیگر، صفحات شما به چند شکل مختلف پردازش شوند. به همین دلیل برای جلوگیری از بروز چنین مشکلاتی، از دستور راهنمای تگ Doctype در html استفاده می شود تا نوع نسخه HTML استفاده شده را برای مرورگر مشخص کند.آیا استفاده از تگ Doctype در html ضروری است؟کنسرسیوم جهانی وب (W3C) نسب به استفاده از این کد توصیه اکید دارد. مخصوصا در صفحاتی که از نسخه HTML 4.01 یا XHTML 1.0 استفاده می کنند. بنابراین به خاطر رعایت استانداردهای توصیه شده W3C می توان گفت که استفاده از آن تقریبا الزامی است، در غیر این صورت علاوه بر اینکه ممکن است صفحات، به درستی در مرورگرهای مختلف نمایش داده نشوند، از نظر اعتبار سنجی نیز معتبر نیستند، که این امر در امتیاز و رتبه سایت یا وبلاگ در موتورهای جستجو (سئو) تاثیر منفی خواهد داشت.اما اگر هم از آن استفاده نشود، صفحه و اطلاعات آن همچنان در مرورگر بارگذاری شده و قابل استفاده می باشد. برای اعتبارسنجی کدهای خود و اطمینان از استفاده صحیح DOCTYPE می توانید به آدرس http://validator.w3.org مراجعه کنید.کاربرد تگ DOCTYPEکاربرد تگ Doctype در html صرفا برای معرفی نوع سند اچ تی ام ال به مرورگرهای مختلف است. تگ داک تایپ از این لحاظ مهم است که به مررگرها می فهماند سند HTML ای که شما نوشته اید، چه نوع سندی است. بنابراین اعتبارسنج های HTML به اعلان doctype نیاز دارند. اگر یک سند HTML شامل اعلان DOCTYPE نباشد، مرورگرها صفحات را در حالت Quirks، رندر می کنند.ساختار تگ Doctype در htmlساختار کلی تگ Doctype در html به صورت زیر می باشد:<!DOCTYPE html><html><head></head><body>---Some Front End logic ,codes,tags,elements---</body></html>برای اینکه به یک طراح سایت حرفه ای تبدیل شوید، لاطم است که آموزش flexbox در css را یاد بگیرید.تعریف تگ Doctype در html نسخه های قدیمیHTMLزبان HTML سه حالت کلی دارد:StrictTraditionalFramesetکدهای زیر باید در قسمت تگ Doctype در html جهت استفاده از هر یک از حالت های بالا نوشته شود.تگ Doctype در html، در این نسخه مرورگر از استاندارد یک فایل با نام strict.dtd پیروی می کند و طبق قوانین این فایل، استفاده از استایل CSS برای کدنویسی استاندار صفحات وب مجاز بوده و توصیه شده، در مقابل استفاده از تگ فریم ست (frameset)، نوشتن متون در خارج از چارچوب تگ های استاندارد، استفاده از صفت هایی مانند bgcolor، استفاده از برخی تگ های HTML منسوخ شده (مانند font) و… به لحاظ استاندارد کدنویسی مجاز نیست و نباید در سورس صفحه وب استفاده شود. برای تعریف این استاندارد باید متن راهنمای زیر را در بالاترین قسمت صفحه درج کنیم:HTML Strict DTDنامزمانی مورد استفاده قرار می گیرد که طراح بخواهد از شیوه قالب دهی به صفحات (CSS) استفاده نماید. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd” >تگ Doctype در html نسخه Transitional در مقایسه با استاندارد Strict محدودیت کمتری دارد و استفاده از خاصیت های معرف ویژگی های ظاهری مانند bgcolor، background و… در آن مجاز است. (البته تا آنجا که می شود بهتر است برای جلوه های ظاهری از استایل CSS به جای خاصیت های تگ های HTML استفاده کنید) این استاندارد برای سازگاری با مرورگرهای خیلی قدیمی که از CSS پشتیبانی نمی کنند نیز مناسب است. همچنین استفاده از تگ فریم ست (frameset) در این نسخه مجاز نمی باشد. برای تعریف این استاندارد باید متن راهنمای زیر را در بالاترین قسمت صفحه درج کنیم:HTML Traditional DTDزمانی مورد استفاده قرار می گیرد که طراح می خواهد از قابلیت های جدید HTML استفاده نکند، زیرا مرورگر بازدید کنندگان سایت ممکن است از شیوه قالب دهی صفحات (CSS) پشتیبانی نکند.< !DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd” >دستورالعمل فایل DTD در این نسخه دقیقا مشابه نسخه HTML 4.01 Transitional است، با این تفاوت که در اینجا استفاده از تگ frameset مجاز است. تگ frameset برای صفحاتی به کار می رود که مبتنی بر فریم یا صفحات خارجی هستند و با قرار دادن تگ های frame در درون تگ frameset امکان فرمت بندی و تنظیم موقعیت سطرها و ستون ها میسر می شود. به طور مثال:HTML Frameset DTDزمانی مورد استفاده قرار می گیرد که بخواهید در صفحات از قاب ها (Frames) استفاده کنید.< !DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd” >XHTMLزبان XHTML نیز مانند HTML سه حالت کلی دارد :StrictTraditionalFramesetکدهای زیر باید در قسمت تگ Doctype در html  جهت استفاده از هر یک از حالت های بالا نوشته شود.کنسرسیوم جهانی وب (W3C) با هدف توسعه و انعطاف پذیری بیشتر HTML و پشتیبانی از قابلیت های زبان XML در صفحات وب نسخه ترکیبی از HTML و XML را با نام XHTML (مخفف Extensible HyperText Markup Language) معرفی کرده است. در این استاندارد قواعد زبان HTML ساده توسعه یافته و با قواعد XML ترکیب شده است. از آنجایی که HTML خود از استاندارد SGML پیروی می کند و به این خاطر نسبت به XML محدودیت هایی دارد استفاده از XHTML به جهت سازگاری و در اختیار قرار دادن امکانات بیشتر توسط W3C توصیه شده است.در استاندارد XHTML 1.0 Strict تقریبا تمام قواعد HTML 4.01 Strict به طور یکسان وجود دارد، ضمن اینکه سند XHTML باید از اصول نگارشی XML نیز پیروی کند. (به طور مثال تگ های یکتا باید با یک / بسته شوند مانند </ br>)، همچنین امکان استفاده از قابلیت هایی مانند CDATA وجود دارد. CDATA برای ترکیب کدهای JavaScript و XHTML استفاده می شود و به این شیوه امکان تجزیه صحیح سورس کدها برای برنامه ها ممکن می شود.HTML Strict DTDزمانی مورد استفاده قرار می گیرد که طراح بخواهد از شیوه قالب دهی به صفحات (CSS) استفاده نماید.<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd” > این استاندارد نیز مشابه HTML 4.01 Transitional است، ضمن اینکه سند XHTML باید از اصول نگارشی XML نیز پیروی کند. برای تعریف این استاندارد باید متن راهنمای زیر را در بالاترین قسمت صفحه درج کنیم:HTML Traditional DTDزمانی مورد استفاده قرار می گیرد که طراح می خواهد از قابلیت های جدید XHTML استفاده نکند، زیرا مرورگر بازدید کنندگان سایت ممکن است از شیوه قالب دهی صفحات (CSS) پشتیبانی نکند.< !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd” >این استاندارد نیز مشابه HTML 4.01 Frameset است، ضمن اینکه سند XHTML باید از اصول نگارشی XML نیز پیروی کند. برای تعریف این استاندارد باید متن راهنمای زیر را در بالاترین قسمت صفحه درج کنیم:HTML Frameset DTDزمانی مورد استفاده قرار می گیرد که بخواهید در صفحات از قاب ها (Frames) استفاده کنید. < !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd” > مثال از تگ Doctype در html<!DOCTYPE html><html><head><title>سایت من</title></head><body><h2>سایت آموزشی بی لرن</h2></body></html>دستور العمل <DOCTYPE!> در HTML5همانطور که می دانید نسخه HTML5 از استاندارد SGML یا به اصطلاح (Standard Generalized Markup Language) پیروی نمی کند، بنابراین به فایل های DTD احتیاجی ندارد و تنها در سند HTML5 کافی است DOCTYPE را به شکل زیر به کار ببرید:<DOCTYPE html!>نمونه استفاده از تگ Doctype در html5<!DOCTYPE html><html><head><title>Title of the document</title></head><body>The content of the document......</body></html>وظایف DOCTYPE چیست؟هنگام انجام آزمون اعتبار سنجی HTML روی یک صفحه وب، اعلام < DOCTYPE!> به اعتبار سنج HTML اعلام می کند که از استاندارد کدام نسخه HTML یا XHTML در کدنویسی صفحه استفاده شده است. هنگامی که شما صفحه وب خود را اعتبارسنجی می کنید، اعتبار سنج HTML، کد ها را با توجه به استاندارد قابل انطباق چک کرده و پس از آن بخش هایی از کد را که در اعتبار سنجی رد شده، گزارش می کند.به مرورگر می گوید که چگونه صفحات را در حالت استانداردهای قابل انطباق رندر کند.کدام مرورگرها از تگ <DOCTYPE!> پشتیبانی می کنند؟مرورگرهایی که از تگ doctype پشتیبانی می کنند.مشکلات استفاده از تگ doctype html برای اولین باربسیار افرادی که تا الان بدون استفاده از doctype مشغول کار بوده اند، ممکن است با استفاده از این دستورالعمل دچار مشکل شوند. البته قطعا مشکل، استفاده از این دستورالعمل نیست بلکه مرورگرهای قدیمی شما نمی تواند قوانین موجود در این اعلان ها را به درستی نمایش دهد. فراموش نکنید که تگ Doctype در html می بایست در اولین خط کدنویسی شما قرار گیرد. می توانید برای عیب یابی کد از سایت https://validator.w3.org/ استفاده کنید.سخن پایانیدر این مطلب به طور کامل در مورد تگ Doctype در html، ساختارش، انواع <Doctype!>، کاربرد و کدهای تگ داک تایپ در ورژن های مختلف صحبت شده است. با مطالعه این مطلب چیزی از تگ doctype باقی نمی ماند که آن را ندانید.برای دریافت پاسخ سوالات خود و بهره مند شدن از تجربه اساتید خبره و دیگر دوستانتان در کمپین آموزشی بی لرن می توانید سوالات خود را در کافه گپ و گفت مطرح نمایید و در سریعترین زمان، پاسخ سوال خود را دریافت نمایید. همچنین می توانید با عضویت در کمپین آموزشی بی لرن، از دوره های آموزشی رایگان و کاربردی در زمینه های مختلف به صورت تخصصی و حرفه ای بهره مند شوید.اگر از مطالعه این مطلب لذت بردید، می توانید آن را در شبکه های اجتماعی خود به اشتراک بگذارید تا دوستان شما نیز از آن بهره ببرند.کمپین آموزشی بی لرنکمپین آموزشی بی لرنTue, 03 Jan 2023 16:00:30 +0330https://virgool.ir/@belearn.ir/مهمترین-تگ-های-html-که-باید-بدانید-h2bufuxrh98lاگر می خواهید در سریعترین زمان ممکن بتوانید آموزش html و css را یاد بگیرید و یک سایت طراحی کنید، لازم است تا با مهمترین تگ های html آشنا باشید. این کدها به شما کمک می کنند هم در زمان صرفه جویی شود و هم راحت تر بتوانید طراحی سایت کنید. پس مهم است که به عنوان یک طراح سایت مهمترین تگ های html را بشناسید. لیست کاملی از تگ های html را برایتان آورده ایم. پس تا انتهای مطلب با ما همراه باشید.تگ html چیست؟قبل از اینکه در مورد مهمترین تگ های html صحبت کنیم لازم است تا تعریف کوتاهی از تگ های html داشته باشیم. تگ (Tag) در زبان فارسی با عنوان ”برچسب” مورد استفاده قرار می گیرد. تگ ها در زبان HTML که زبان نشانه گذاری است مهمترین نقش را بر عهده دارند. در واقع تگ های HTML نشانه های دستوری از پیش تعریف شده در زبان اچ تی ام ال هستند که نقش نشانه گذاری محتویات صفحات نوشته شده با html را بر عهده دارند و هر کدام معنا و مفهوم خاصی را به نمایش می گذارند.تگ های HTML به مرورگرهای وب کمک می کنند تا اسناد HTML را به صفحات وب تبدیل کنند. به عنوان مثال، تگ <p> برای سازماندهی محتوای متن به عناصر پاراگراف و تگ <img> برای جاسازی عناصر تصویر استفاده می شود.انواع تگ htmlتگ های html ازجمله مهمترین تگ های html عموما بشکل جفتی استفاده می شوند. یعنی یک تگ باز دارند یک تگ بسته که در نهایت یک ساختار جدید به نام عناصر (elements) را ایجاد می کنند. همانطور که گفتیم برای نمایش عناصر در وب سایت از دو نوع تگ استفاده می شود:تگ های باز (Opening Tag)تگ های بسته (Closing Tag)برخی از عناصر برای نمایش داده شدن در صفحات وب سایت به هر دو تگ احتیاج دارند و برخی دیگر تنها با تگ باز نمایش داده می شوند.ساختار مهمترین تگ های htmlدر کاربرد مهمترین تگ های html مهم است که ساختار آن ها را بدانید. ساختار تگ های html به ۳ قسمت تقسیم می شوند:۱ – علامت کوچکتر > : قبل از نوشتن نام تگ باید علامت > نوشته شود.۲ – نام تگ : بعد از قرار دادن علامت کوچکتر، نام تگ قرار می گیرد.۳ – علامت بزرگ تر < : در آخر پس از نوشتن نام تگ علامت بزرگتر < نوشته می شود.در نهایت شکل کلی تگ به این صورت می باشد : <tag name>نحوه نوشتن مهمترین تگ های HTMLزمانی که می خواهید به کمک مهمترین تگ های html یک سایت طراحی کنید، نحوه درست نوشتن آن ها بسیار حائز اهمیت است. بخش ابتدایی نوشتن تگ HTML به کمک دو علامت کوچکتر و بزرگتر <…>شروع می شود. برای مثال تگ باز <html>. بخش دوم و انتهایی نیز همانند بخش اول است، با این تفاوت که قبل از نام تگ می بایست از یک اسلش استفاده کنید </> که به معنی انتهای کد نویسی آن تگ می باشد. برای مثال تگ بسته <html/>.تعداد مهمترین تگ های htmlتعداد تگ های html به صورت کلی ۱۳۲ مورد است که تعدادی از این تگ ها منسوخ شده اند و امروزه اصلا کاربردی ندارند. لذا سایت W3schools.com کل تعداد تگ های html را ۱۰۷ تا عنوان کرده است. همچنین با آمدن html5 بسیاری از تگ های قدیمی Html دیگر استفاده نمی شوند، بنابراین بهترین کار این است که چند پروژه طراحی سایت واقعی از صفرتاصد کدنویسی کنید و ببینید پرکاربردترین و مهمترین تگ های html کدام است.خبر خوب اینکه در Html5 دیگر نیازی به حفظ کردن تگ ها هم ندارید، چرا که در تمام تگ های html5 همه چیز مشخص است و از اسامی تگ ها کاربرد و نقش آن تگ ها کاملا مشخص می باشد.لیست کامل مهمترین تگ های htmlمهمترین تگ های htmlتگ doctype در htmlدستور <doctype!> مخفف Document Type بوده و در اولین سطر از کد صفحه وب می باشد. تگ Doctype در html به عنوان یکی از مهمترین تگ های html به مرورگر، نوع و نسخه استفاده شده از زبان برنامه نویسی HTML یا XHTML را اعلام می کند. یعنی مشخص کننده نوع و نسخه آن صفحه وب یا فایل HTML می باشد. مهمترین نکته ای که باید بدانید این است که دستور <DOCTYPE!> تگ نیست. هر صفحه فقط می تواند یک نوع تگ Doctype داشته باشد. تگ Doctype تنها تگی است که تگ انتهایی ندارد و در تگ ابتدایی هم توسط علامت / بسته نمی شود.تگ head در htmlتگ head یکی از مهمترین تگ های html و اساسی ترین بخش یک صفحه وب می باشد. تگ head در html را می توان به مغز یک صفحه وب تشبیه کرد، چرا که در این قسمت یکسری اطلاعات مربوط به مرورگرها و موتورهای جستجوگر (برای بحث سئو) قرار می گیرد. تگ head در بالای کدهای html سایت و بعد از بخش اول تگ <html> و قبل از تگ body قرار می گیرد.تگ body در htmlتگ body در html یکی از مهمترین تگ های HTML می باشد که می توان گفت ستون اصلی یک سند HTML یا صفحه وب می باشد. تگ <body> بدنه سند را تعریف می کند که به تگ بدنه سایت نیز معروف است و شامل تمام محتویات یک سند HTML مانند متن، لینک ها، تصاویر، جداول، لیست ها و… می باشد. بطور کلی اطلاعاتی مانند متن و عکس که قرار است در سند html ما به کاربران توسط مرورگرهای وب نمایش داده شود در این بخش نوشته خواهد شد.تگ footer در htmlتگ footer در HTML یکی از مهمترین تگ های HTML می باشد. تگ فوتر یک پانویس برای یک سند یا یک بخش تعریف می کند. تگ <footer> باید شامل اطلاعاتی مربوط به عنصر حاوی اش باشد. تگ فوتر به طور معمول شامل نام نویسنده سند، کپی رایت، لینک ها به واژه های مورد استفاده، اطلاعات تماس و … می باشد. به طور کلی تگ footer در کنار تگ هایی مثل تگ header، تگ article، تگ section، تگ nav، تگ aside، تگ details و تگ summary جهت ایجاد ساختار و طرح بندی حرفه ای برای محتوای سایت استفاده می شود.تگ header در htmlتگ header در HTML یکی از مهمترین تگ های html است که با استفاده از آن می توان قسمت هدر یا سربرگ را در یک صفحه وب ایجاد نمود. تگ <header> باید به عنوان یک ظرف برای محتوای مقدماتی و یا مجموعه ای از لینک های navigation استفاده شود.تگ Div در htmlتگ Div در HTML یکی از مهمترین تگ های html است که در طراحی صفحات وب بسیار کاربرد دارد. با استفاده از این تگ می توان صفحات وب سایت را به بخش های مختلف تقسیم کرد. به طور کلی تگ div مانند یک ظرف (Container) می ماند که برای نگهداری دیگر تگ ها به کار می رود. یعنی عملا هر چیزی را می شود داخل تگ div گذاشت.تگ section در htmlتگ section در HTML یکی از مهمترین تگ های html است که با استفاده از آن می توان یک بخش یا (Section) را در یک صفحه وب ایجاد کرد. معمولا از این تگ برای مشخص کردن یک محتوای مستقل استفاده می شود. لذا بهتر است که هر بخش دارای یک عنوان باشد و عنوان را نیز می توانید از طریق تگ های تیتر H1-H6 ایجاد نمایید. استفاده از این تگ نیاز به دقت بالایی دارد، زیرا بسیاری از طراحان وب این تگ را جایگزین تگ div می دانند. اما تگ section جایگزینی برای تگ div نیست.تگ main در htmlتگ main در HTML یکی از مهمترین تگ های html می باشد که در نسخه HTML5 تعریف شده و جهت درج محتوای اصلی و منحصر به فرد برای سند HTML می باشد. با استفاده از تگ <main> می توان بخش اصلی  یا محتوای اصلی و منحصر بفرد موجود در یک صفحه  را ایجاد کرد.تگ Nav در htmlتگ Nav در HTML یکی از مهمترین تگ های html است که برگفته از کلمه Navigation می باشد. با کمک تگ nav می توانید یک منوی ناوبری یا Navigation Menu که متشکل از تعدادی لینک است را ایجاد کنید.مهمترین تگ های HTML برای سئو چیست؟تگ های HTML به موتورهای جستجوگر اطلاع می دهند که چگونه محتوای شما را به درستی ایندکس کنند. در واقع، شما می توانید با افزودن مهمترین تگ های html در سئو، دید موتورهای جستجوگر را بهبود ببخشید تا آنها بتوانند ساده تر مطالب شما را ایندکس و به کاربران نمایش دهند.زمانی که خزنده های موتور جستجو با محتوای شما روبه رو می شوند، در ابتدا تگ های HTML سایت شما را مشاهده می کنند. این اطلاعات به موتورهای جستجوگر مانند گوگل کمک می کند تا بهتر درک کنند که چگونه مطالب شما را فهرست بندی کنند.به طور کلی می توان گفت؛ تگ‌ های HTML برای سئو کردن سایت بسیار مهم هستند و روی عملکرد وب سایت شما تاثیر فراوانی ایجاد می کنند. قطعا بدون اعمال این برچسب ها در سایت، نه تنها نمی توانید ترافیک سایتتان را افزایش دهید، بلکه رتبه مناسبی هم در نتایج جستجو دریافت نمی کنید. به همین منظور شما باید مهمترین تگ های html در سئو را بشناسید و از آنها در سایت خود استفاده کنید.در ادامه مهم ترین تگ های html در سئو را به شما معرفی می کنیم که با بکارگیری آنها می توانید رتبه و ترافیک سایت خود را افزایش دهید.تگ عنوانمتاتگ توضیحاتتگ های هدرتگ Alt در تصاویرتگ robotsتگ کنونیکالسخن پایانیدر این مطلب به طور کامل در مورد تگ های html صحبت کردیم. مهمترین تگ های html که باعث سرعت بخشیدن و بهبود طراحی سایت شما می شوند را معرفی کردیم و لیست کامل تگ های html را برایتان قرار داده ایم.کمپین آموزشی بی لرنکمپین آموزشی بی لرنTue, 03 Jan 2023 12:02:00 +0330