دسته بندی
×
آگهی
article

آشنایی با مفهوم Semantic در HTML

html-semantic

تا این قسمت از آموزش های مقدماتی HTML، آموختیم که این زبان در واقع یک زبان قراردادی (Markup یا نشانه گذاری) با اصول و شیوه مشخص و قانونمند برای شکل دهی بنیان و اسکلت بندی صفحات وب و ارائه محتوا در آن است که از زمان معرفی تا به امروز همواره به فراخور نیاز و بر اساس تکنولوژی های نوین وب روند روبه رشدی را طی کرده و قابلیت ها و مفاهیم جدیدی در خود جای داده است، از این رو به واسطه ارائه ایده ها و استانداردهای جدید در بستر شبکه جهانی وب، صرف آشنایی با تگ ها و نحوه کدنویسی متداول HTML به تنهایی نمی تواند دانش ما را در این زمینه کامل و ما را بی نیاز نماید و ناگزیر باید با یک مفهوم دیگر تحت عنوان HTML معنایی یا Semantic آشنا شویم، اینکه این عبارت چیست و چه معنا و کاربردی دارد موضوعی است که در ادامه در حد مقدور به آن خواهیم پرداخت.

Semantic و HTML


عبارت Semantic در لغت یعنی "معنایی" و Semantics یعنی "علم معنی شناسی" اما منظور از HTML Semantic یعنی کدهای صفحات وب و ساختار آن باید طوری نوشته شوند که تا حد امکان برای دستگاه ها (Machines) مختلف قابل فهم و استفاده باشند، به طور مثال سورس یک مقاله وب باید طوری کدنویسی شود که در پردازش توسط یک دستگاه، قسمت های مختلف آن (از جمله عنوان، محتوا، نویسنده و...) از یکدیگر متمایز و خود مقاله نیز از سایر قسمت های یک سایت اینترنتی قابل تفکیک باشد، از آنجایی که در نسخه های ابتدایی HTML، هدف، بیشتر ارائه محتوایی قابل استفاده جهت کاربران حقیقی (انسان) بود، لذا تمرکز اصلی عمدتا بر روی ظاهر صفحات وب معطوف می شد و اینکه این ظاهر با چه سبک کدنویسی بدست بیاید اهمیت چندانی نداشت، به طور مثال کاربر حقیقی می توانست از توضیحات متنی، رنگ و اندازه فونت ها یا طرح بندی صفحه، قسمت های مختلف محتوا مانند مطلب اصلی، عنوان، نویسنده و... را تفکیک کند، اما این خصوصیات برای یک دستگاه (به طور مثال یک ربات کاوشگر وب) حداقل به راحتی قابل درک و پردازش نبود، با این حال ذات پیدایش HTML با مبحث Semantic هیچگاه بیگانه نبوده، به طور مثال تگ h1 را در نظر بگیرید، این تگ اگرچه محتوای داخل خود را معمولا به شکل برجسته تری برای مخاطب نمایش می دهد (و این مفهوم را القا می کند که این عبارت به عنوان تیتر و دارای اهمیت است)، برای دستگاه ها (غیر انسان) نیز به وجود محتوایی با ارزش به عنوان تیتر یک صفحه وب اشاره دارد، چرا که به فرض یک ربات وب می تواند با کلید واژه h1 محتوای درون این تگ را استخراج کرده و به عنوان سرتیتر استفاده نماید، همچنین است در خصوص تگ هایی مانند strong، با این حال قاعدتا آنطور که صفحات وب برای انسان ها قابل فهم بوده برای دستگاههای ساخت بشر قابل تشخیص نبودند، اگرچه به دلیل کاربردهای اولیه و ساده وب، این مشکل در ابتدا چندان هم مشکل نبود اما رفته رفته با پیشرفت وب و معرفی ایده هایی مانند Web 2.0  و لزوم تعامل بین سیستم های مختلف مبتنی بر وب که به صورت خودکار عمل می کردند، توسعه دهندگان وب را یک گام به جلو سوق داد تا با معرفی CSS بخش ظاهری (طراحی) را از کدنویسی HTML جدا کنند، لذا در این برهه که اکنون نیز کم و بیش به همان منوال ادامه دارد، تصمیم بر این شد که ویژگی های مربوط به ظاهر تگ ها تا حد امکان توسط کلاس های CSS تعریف شود، برنامه نویسان وب نیز عموما بر حسب عادت یا سلیقه برای کلاس های مختلف CSS عناوین مورد نظر خود را انتخاب می کردند، از جمله برای بخش سرصفحه به فرض از کلاسی با نام header یا برای قسمت نویسنده مطالب از کلاس فرضی author، برای بخش کپی رایت و انتهای صفحات از کلاس های copyright، footer و... استفاده می کردند، برای مثال به تگ زیر توجه کنید:
<div class="footer">فوتر سایت</div>
اما با توجه به اینکه این عبارات تماما دلخواه کاربران و سلیقه ای بود نمی توانست استانداردی فراگیر برای بحث Semantic باشد و نقص را به طور کامل برطرف نماید (تگ هایی مانند div و span به این دلیل غیر معنایی یا non-Semantic هستند)، لذا در نسخه 5 HTML تگ های بیشتری برای راحتی کار دستگاهای خودکار ارائه شد تا به راحتی بتوانند بخش های مختلف یک صفحه وب را از هم تفکیک کرده و هر قسمت که مورد نیاز آنها باشد را استخراج نمایند، ظاهرا نامگذاری این تگ ها با همکاری شرکت گوگل بوده که در حدود یک میلیارد صفحه وب را مورد کنکاش قرار داده تا سلیقه کاربران در نامگذاری تگ های قسمت های مخلف را با کلاس های CSS بدست آورد.
علاوه بر توضیحات گفته شده، HTML Semantice رعایت استاندارد کدنویسی را نیز در دل خود جای داده، به عبارتی صفحه وبی به لحاظ استاندارد مورد قبول است که هر تگ در جایگاه خاص خودش استفاده شده باشد، به طور مثال از نظر کدنویسی استاندارد، نمی توانید تگ p را درون تگ h1 جای دهید زیرا تگ h1 نمی تواند یک پاراگراف را درخود جای دهد و صرفا اشاره به تیتر دارد، لذا به طور معمول صفحه وبی که اصول Semantic را رعایت کرده باشد، در سنجش استاندارد کدنویسی نیز امتیاز بهتری کسب خواهد کرد.

لزوم استفاده از Semantic در HTML


همان طور که اشاره شد، HTML هیچگاه از مفهوم Semantic دور نبوده و از ابتدا تگ های آن برای پردازش توسط ماشین نیز در نظر گرفته شده، به طور مثال تگ form همیشه یک فرم را در خود دارد یا تگ img همیشه نشانگر یک تصویر است، این تگ ها می توانند برای یک ماشین خودکار کلیدواژه ای باشند که با آن بتواند به راحتی محتوا را استخراج و دسته بندی کند که در واقع هدف نهایی بحث Semantic در وب است یعنی ارائه محتوایی قابل فهم برای ماشین ها، اگرچه HTML در نسخه های ابتدایی خود (تا نسخه 4) تگ های معنایی بدین منظور ارائه نمود، اما رفته رفته مشخص شد که این تگ ها نمی توانند به نیازهای امروزی آنطور که باید و به اندازه کافی پاسخ دهند، رشد شبکه های اجتماعی مبتنی بر تکنولوژی Web 2.0 که عمدتا کاربران در آنها به اشتراک گذاری آدرس های اینترنتی می پرداختند، نیاز موتورهای جستجو به پردازش دقیقتر اطلاعات صفحات وب و ارائه نتیجه مطلوب تر به کاربران، لزوم نوشتن کدهایی با ساختار بهتر جهت تسهیل تعامل توسعه دهنده گان وب به طور مثال در پروژه های گروهی و...  همه لزوم معرفی تگ های بیشتر جهت ساختاربندی مفهومی تر محتوای وب را یادآور می شد، به طور مثال تگ table را در نظر بیگرید، این تگ با هدف نمایش محتوای قابل ارائه در جدول مانند آمار و اطلاعات طبقه بندی شده در HTML معرفی شد، اما به مرور برخی از طراحان وب از جدول برای فرمت بندی صفحات وب استفاده کردند که اشتباه و با هدف Semantic آن در تضاد بود، این دو یا چندکارکردی شدن تگ ها کار پردازش و تصمیم گیری را برای سیستم های خودکار دچار مشکل می کرد، به فرض اگر برنامه نویسی تصمیم می گرفت که رباتی جهت کاوش وب طراحی کرده و صرفا اطلاعات آماری را تهیه کند، ممکن بود با پردازش تگ table به عنوان مبنا، اطلاعات نادرستی دریافت کند که در نهایت برنامه او را با خطاهای مختلفی مواجه می کرد، در مجموع اگرچه استفاده از تگ های Semantic اجباری نیست، اما با توجه به اینکه آینده وب به سمت معنایی شدن پیش می رود، بهتر است برای به روز بودن، رعایت استاندارد کدنویسی و قابل استفاده شدن محتوای سایت در برنامه های مختلف، تا حد امکان از اصول آن پیروی کنیم.

Semantic در HTML نسخه 5


HTML در نسخه 5 خود تگ های جدیدی برای مبحث Semantic معرفی کرده که به اختصار آنها را توضیح می دهیم:
- تگ section، برای ایجاد بخش های مجزا در سند HTML کاربرد دارد، به طور مثال برای ارائه مطالب گروه بندی شده که معمولا یک عنوان خاص و مرتبط با یک ریشه واحد (thematic) دارند، خود تگ section می تواند به صورت تو در تو (nested) مورد استفاده قرار گیرد، به عبارتی یک بخش می تواند زیرمجموعه های دیگری نیز با section های بیشتر داشته باشد، هر section می تواند یک یا چند تگ هدر (h1 تا h6) داشته باشد، اگر درون section به طور مثال در ابتدا تگ h2 باشد، تگ های h بعدی باید از h3 یا h های کوچکتر باشند (هرچه عدد h بزرگتر باشد، در واقع اولویت آن کمتر و کوچکتر است!) و نمی تواند h2 یا h1 بعد از خود داشته باشد، در بیان ساده تر هر section می تواند تگ های h خود را داشته باشد اما به صورت منحصر بفرد (از هرکدام فقط یک تگ) و سلسه مراتب (hierarchy) تگ ها نیز باید رعایت شود، دقت کنید که بالاترین h هر section در واقع عنوان آن را مشخص می کند، تگ section الزاما باید در تگ body صفحه استفاده شود، تگ section می تواند تگ های معنایی دیگری مانند header و footer را به صورت مستقل در خود جای دهد، مثال:
<section>
<h1>تیتر</h1>
<p>متن مورد نظر</p>
</section>

<section>
<h1>برنامه نویسی وب</h1>
<p>آموزش برنامه نویسی وب</p>
<section>
<h1>HTML</h1>
<p>آموزش HTML</p>
<img src="html.jpg" alt="html">
</section>
</section>
نکته: تفاوت section و div در این است که div حالت عمومیت دارد و هرجا که نتوانیم از section (یا سایر تگ های معنایی) استفاده کنیم، div می تواند جایگزین آن شده و با استفاده از پارامترهایی مانند class و تعریف استایل CSS، فرمت بندی صفحات وب را با آن انجام دهیم، به عبارتی section برای تعیین محتوای گروه بندی شده قسمتی از صفحه وب (به طور مثال قسمت مربوط به یک مقاله) است و معمولا نمی توان با هدف پیاده سازی ساختار کل صفحه از آن استفاده کرد، اما div برای طراحی قسمت هایی که حالت Semantic خاصی ارائه نمی کنند، انتخاب مناسبی است و معمولا طراحان وب بخش های کلی و بالادستی صفحه را با div فرمت بندی کرده و قسمت های محتوایی و درونی را با تگ های معنایی مانند section برای دستگاه ها قابل پردازش و فهم می کنند، لذا این دو تگ می توانند در کنار هم و به صورت ترکیبی استفاده شوند.
- تگ article، برای ایجاد یک مطلب مجزا در سند HTML کاربرد دارد، این مطلب کاملا از سایر بخش های صفحه مستقل و جامع بوده و خود می تواند شامل تگ های section و article زیرمجموعه باشد، به طور مثال فرض کنید در بخش مقالات، بخش علمی، مقاله ای در خصوص برنامه نویسی داشته باشید که خود بخش های مجزایی مانند برنامه نویسی وب، برنامه نویسی موبایل و... داشته باشد، همچنین هر مطلب می تواند شامل بخش نویسنده، اطلاعات نگارش، یادداشت های کاربران و... باشد، لذا همان طور که ملاحظه می کنید استفاده به جا و درست از تگ های div، section و article نیاز به دقت بالایی دارد و ممکن است این موارد را با هم اشتباه بگیریم، اما اگر خوب توجه کنیم همه چیز بستگی به ساختار و نوع محتوایی دارد که ارائه می کنیم، تگ div در جایی استفاده می شود که هیچ محتوای قسمت بندی شده دارای مفهوم خاصی وجود نداشته باشد، به طور مثال اینکه صفحه شما چند سایدبار یا چند قسمت کلی برای نمایش محتوا داشته باشد می تواند با div مشخص گردد، تگ section یک گام از div فراتر می رود و آن حالت عمومیت را ندارد، به طور مثال در قسمتی که محتوا ارائه می شود، بخش محتوای مربوط به اخبار سایت با بخش محتوای مربوط به اخبار محصولات جدید می تواند در دو section مجزا نمایش داده شوند، تگ article نوع خاصتری از section است و به طور مثال بخش اخبار کالاهای جدید می تواند معرفی یک محصول را در خود جای دهد، ضمن اینکه خود article می تواند به صورت تو در تو تگ های section دیگر داشته باشد و همین طور تگ section می تواند تگ های article زیرمجموعه داشته باشد، مهم این است کارکرد هر قسمت را متناسب با محتوای آن مشخص کنیم، توجه کنید که همه این موارد قراردادی هستند و توسط خود شما به عنوان خالق یا برنامه نویس صفحه مشخص می شوند، اما قطعا اگر تگ ها را به جا استفاده کنید تاثیر مثبتی بر میزان کاربر پسند (user–friendly) بودن سایت و کسب رتبه بهتر در موتورهای جستجو دارد، مثال:
<article>
<h1>نام کالا</h1>
<p>این <strong>محصول</strong> دارای کیفیت و قیمت مناسب است...</p>
</article>

<section>
<h1>مقالات بخش آموزش</h1>
<article>
<h2>مبحث توابع در برنامه نویسی</h2>
<p>توابع در برنامه نویسی مانند ماشین هایی هستند که مواد خام را به عنوان ورودی گرفته و یک یا چند محصول به عنوان خروجی تولید می کنند...</p>
</article>   
</section>
- تگ header، برای تعیین سرتیترها در سند HTML کاربرد دارد، header تگ عمومی است و می توان از آن در هر قسمت از صفحه که باید یک سرتیتر یا مجموعه ای از عناصر مرتبط با سرصفحه (مانند تگ های h، لوگوی صفحه، فرم جستجو و...) قرار گیرند، استفاده کرد،  در واقع این تگ راهنمای خوبی است که می توان با آن مشخص کرد هر قسمت به چه نحوی ساختاربندی شده، به فرض سرصفحه از سایر بخش های یک سایت مشخص می شود یا عنوان و توضیحات یک مقاله از محتوای آن متمایز می گردد، مثال:
<header>
<h1>تیتر اصلی صفحه</h1>
<img src="site-logo.png" alt="logo">
</header>

<section>
<header>
<h1>مقالات بخش آموزش</h1>
<img src="learn-logo.jpg" alt="learn-logo">
</header>   
</section>
- تگ footer، برای تعیین پا صفحه یا زیر نویس در سند HTML کاربرد دارد، footer نیز مانند header تگ عمومی است و می توان از آن در هر قسمت از صفحه که باید یک پاصفحه یا مجموعه ای از عناصر مرتبط با پاصفحه (مانند اطلاعات مربوط به نرم افزار سایت، حقوق مولف، قوانین سایت و...) قرار گیرند، استفاده کرد، همان طور که پیش از این دیدیم، تگ های Semantic می توانند به دفعات و به صورت تو در تو استفاده شوند که البته باید با یک هدف و منطق مشخص باشد، مثال:
<footer>
<div class="copyright">&copy; 2017 https://webgoo.ir</div>
</footer>

<section>
<header>
<h1>مقالات بخش آموزش</h1>
<img src="learn-logo.jpg" alt="learn-logo">
</header>  
<footer>
<div class="author">منبع: webgoo.ir</div>
</footer>
</section>
- تگ main، مشخص کننده اصلی ترین محتوا در سند HTML است، معمولا هر صفحه وب جدای از بخش هایی مانند سرصفحه، منو ها، بخش های کناری، پاصفحه و... یک قسمت اصلی دارد که هدف اصلی کاربر نیز می باشد، به طور مثال کاربری که عنوان مزتبط با یک مقاله را در وب جستجو می کند، پس از رسیدن به سایتتان ممکن است زمان لازم برای بررسی کل جزئیات سایت را نداشته باشد، در اینجاست که می توان به فرض با ایجاد لینک هدایت به مطلب اصلی، ضمن رعایت اصول Semantic، رابط کاربری بهتری طراحی کرد، باید دقت کنیم بر خلاف سایر تگ های مشابه، درهر صفحه وب تنها استفاده از یک تگ main مجاز است، همچنین تگ main نمی تواند زیرمجموعه (فرزند) تگ هایی مانند article ،aside ،footer ،header ،nav باشد، مثال:
<header>
<h1>تیتر اصلی صفحه</h1>
<img src="site-logo.png" alt="logo">
</header>
<nav>
<ul>
<li><a href="/home">صفحه نخست</a></li>
<li><a href="/about">درباره ما</a></li>
<li><a href="/contact">اطلاعات تماس</a></li>
<li><a href="/learn">آموزش آنلاین</a></li>
</ul>
</nav>
<main>
<section>
<h1>مقالات بخش آموزش</h1>
<article>
<h2>مبحث توابع در برنامه نویسی</h2>
<p>توابع در برنامه نویسی مانند ماشین هایی هستند که مواد خام را به عنوان ورودی گرفته و یک یا چند محصول به عنوان خروجی تولید می کنند...</p>
</article>   
</section>
</main>
<footer>
<div class="copyright">&copy; 2017 https://webgoo.ir</div>
</footer>
- تگ nav، برای ایجاد مجموعه لینک های راهنمای سایت (navigation bar) در سند HTML کاربرد دارد، لینک هایی که در این قسمت قرار می گیرند معمولا شامل بخش های اصلی یک سایت هستند که در تمام یا اکثر صفحات باید در دسترس کاربر باشند، مانند لینک صفحه نخست، درباره ما، تماس با ما، بخش های اصلی و...، این مجموعه لینک ها می توانند به فراخور نیاز و سلیقه در هر قسمت از صفحه وب و به دفعات قرار گیرند، مثال:
<nav>
<ul>
<li><a href="/home">صفحه نخست</a></li>
<li><a href="/about">درباره ما</a></li>
<li><a href="/contact">اطلاعات تماس</a></li>
<li><a href="/learn">آموزش آنلاین</a></li>
</ul>
</nav>
- تگ aside، برای ایجاد یک قسمت مجزای مستقل ولی مرتبط با محتوای اصلی در سند HTML کاربرد دارد، واژه aside در لغت به معنی "جداگانه، بکنار و..." است، در واقع تگ aside شامل مواردی مرتبط با محتوای اصلی خود اما به صورت جداگانه است، به فرض یک مقاله می تواند نکات برجسته خود را در تگ aside به صورت یادآوری داشته باشد، یا در یک مطلب آموزشی در خصوص کامپیوتر، می توان روش های فرعی جایگزین روش اصلی را در تگ aside به صورت نکات اضافی درج کرد، مثال:
<article>
<p>برای نصب ویندوز باید وارد تنظیمات بایوس شوید و در قسمت بوت، گزینه اول را بر روی دی وی دی رام تنظیم نمائید.</p>
<aside>نصب ویندوز از طریق حافظه های جانبی مانند فلش مموری نیز امکانپذیر است.</aside>
</article>
- تگ figure، جهت تعریف محتوای دارای توضیح در سند HTML کاربرد دارد، منظور از محتوای دارای توضیح مواردی مانند تصاویر، نمودارها، کدها و... می توانند باشند که معمولا در کنار خود، متنی جهت توضیح یا عنوان دارند، این تگ با تگ زیرمجموعه دیگری تحت عنوان figcaption تکمیل می شود که توضیحات را در خود دارد، به فرض همان طور که با تگ img آدرس تصویر و سایر خاصیت های آن در وب مشخص می شود، با تگ figcaption، اطلاعات و توضیحات مربوط به آن تصویر قابل درج است، مثال:
<figure>
<img src="http://yoursite.com/image/html.png" alt="HTML Semantic">
</figure>
<p>نمونه متن</p>
<figure>
<img src="http://yoursite.com/image/html.jpg" alt="HTML Semantic">
<figcaption>HTML Semantic</figcaption>
</figure>
- تگ time، برای مشخص کردن زمان یا تاریخ و زمان در سند HTML کاربرد دارد، با استفاده از این تگ می توان تاریخ و زمان قابل پردازش توسط ماشین را در کدهای HTML قرار داد، این تگ به صورت معمول شامل زمان و با خاصیت datetime برای نمایش تاریخ و زمان استاندارد استفاده می شود، مثال:
<p>ساعات کاری این فروشگاه از<time>08:00</time>صبح الی<time>22:00</time>شب می باشد.</p>

<p>این فروشگاه در تاریخ<time datetime="2017-03-11T19:00">بیست و یکم اسفند ساعت 19</time>افتتاح خواهد شد.</p>
همان طور که ملاحظه می کنید، وقتی از ویژگی datetime استفاده می کنیم، متن درون تگ های time می تواند دلخواه باشد (نه الزاما یک زمان یا تاریخ استاندارد)، همچنین فرمت تاریخ برای ویژگی datetime باید یکی از نمونه حالت های زیر باشد:
1000-10-10T10:00

1000-10-10 10:00
- تگ details و summary، تگ details برای ایجاد توضیحات اضافه در سند HTML کاربرد دارد، با این تگ می توان برای مثال در یک مقاله توضیحات اضافی قرار داد که در حالت عادی مخفی و با کلیک کاربر نمایش داده می شوند، تگ details با تگ دیگری به نام summary (به معنی خلاصه یا مختصر) تکمیل می شود که خلاصه ای قابل رویت برای کاربر نمایش می دهد، کاربر با کلیک بر روی آن می تواند توضیحات اضافی را مشاهده کند، مثال:
- تگ mark، برای برجسته (highlight) کردن قسمتی از متن با پس زمینه ای به رنگ متمایز در سند HTML کاربرد دارد، از جمله کاربردهای این تگ می توان به برجسته کردن متن جستجو شده در بین نتایج اشاره کرد، مثال:
<p>این فروشگاه در تاریخ<mark>بیست و یکم اسفند ساعت 19</mark>افتتاح خواهد شد.</p>
تگ های HTML به موارد گفته شده محدود نمی شوند، می توانید لیست کاملی از این تگ ها (Semantic و non-Semantic) را در آدرس زیر مشاهده کنید:
https://developer.mozilla.org/en/docs/Web/HTML/Element
sectionدسته بندی: آموزش مقدماتی » HTML
related مطالب بیشتر:
» متاتگ ها (Meta Tags) و کاربرد آنها در صفحات وب (HTML)
» لایه بندی در HTML با تگ div و span
» کاربرد تگ img و نمایش تصاویر در HTML
» تگ های اصلی و کلیدی HTML
» آشنایی با HTML، زبان پایه کدنویسی وب
commentنظرات (۲۵ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: Alireza
زمان: ۰۹:۰۲:۵۱ - تاریخ: ۱۳۹۵/۱۲/۳۰
سلام ، آموزش خوبی بود ولی کمی دیر گذاشتید چنین تکنیکی رو .
و باید بگم واقعا دیگه این سایت داره واسم نوستالژیک میشه :)
حدود 4 سالی فک کنم میشه که اینجا رو میشناسم و هر از چند گاهی بخاطره حس نوستالژیک قدیمی که داره میام سر میزنم و مطالب رو میخونم و باید بگم بیشتر تجربه و مهارت هامو از همینجا یاد گرفتم و وقتی توی پروژه هام استفاده میکنم یاد اینجا میوفتم . ولی کاش حداقل یه قالب حرفه ایی متریال واسش طراحی کنید و نرم افزارش رو هم ارتقا بدید .
پاسخ: 
ممنون از نظر لطف شما، مطالب در این سطح برای ادامه آموزش های مقدماتی و تکمیل دوره آموزشی تهیه و منتشر می شوند، نسخه جدید سایت در حال آماده سازی است که روند پیشرفت پروژه به صورت درصدی در صفحه اصلی مشخص است.
نویسنده: ساحل
زمان: ۲۱:۳۴:۱۱ - تاریخ: ۱۳۹۶/۰۷/۱۷
سلام ..
خسته نباشید
قبلا درمورد سوالی که داشتم به شما ایمیل دادم اما پاسخی دریافت نکردم . ممنون میشم بررسی کنید و پاسخم بدید ..
با کد php من میخواستم همزمان وقتی داخل یک تکست باکس اسمی تایپ میکنم . از دیتابیس جست و جو کنه و رکوردها نمایش بده مثلا اگر اسم علیرضا تایپ میکنم لحظه اولیه که "عل" تایپ میشه ... تمامی رکوردها که اسم اولشون عل هست نمایش بده تازمانی که اسم کامل تایپ میشه .
ممنون میشم راهنماییم کنید.... منتظر پاسختون هستم .
پاسخ: 
با توجه به اینکه به تمام پیام های کاربران رسیدگی می شود، تا آنجا که اطلاع داریم ایمیلی در این خصوص به دستمان نرسیده، به هر صورت برای منظور شما باید سیستم لیست پیشنهاد کلمات و تکمیل خودکار (autocomplete suggestions list) در هنگام جستجو ایجاد کنید، آموزشی در این خصوص در سایت وجود دارد که با جستجوی عبارت "لیست داینامیک پیشنهاد کلمات، مبتنی بر Ajax، PHP و MySQL" در وب در دسترس است، همچنین برای مشاهده نمونه های بیشتر می توانید عبارت "PHP Ajax autocomplete suggestions list" را در وب جستجو نمائید.
نویسنده: ساحل
زمان: ۱۸:۱۹:۳۴ - تاریخ: ۱۳۹۶/۰۷/۱۸
سلام
ممنون :)
نمیدونستم برای رسیدن به این چنین کدهای دقیقا چه کلمه ای سرچ کنم
کمک بزرگی کردید ...
نویسنده: آوروپلاست
زمان: ۱۸:۳۷:۴۳ - تاریخ: ۱۳۹۶/۱۲/۰۳
باسلام مدتی است eset ورود به سایت avroplast.com را مسدود میکند و هشدار امنیتی میدهد لطفا اگر امکان پذیر است لطفا اگر مشکلی در کدهای سایت وجود دارد به ما اطلاع دهید تا آنها را کاملا حذف کنیم با سپاس فراوان از سایت عالیتان.
پاسخ: 
با توجه به بررسی های ما مشکلی در کدهای سایت وجود ندارد، ممکن است دامنه شما قبلا در لیست سیاه ESET قرار گرفته باشد، در هر حال با پیروی از دستورالعمل موجود در آدرس زیر ایمیلی به این شرکت ارسال کنید تا آدرس سایتتان پس از بررسی از لیست سیاه خارج شود.
https://support.eset.com/kb141/
نویسنده: آوروپلاست
زمان: ۱۳:۱۳:۰۳ - تاریخ: ۱۳۹۶/۱۲/۰۹
با سلام و تشکر از سایت خوبتان راهنمایی های شما به ما کمک فراوانی کرد، ما برای سایت avroplast.com ، ابزار مترجم (انتهای باکس اطلاعات) در نظر گرفتیم که کاربر با کلیک روی زبان مورد نظر به صفحه مترجم گوگل هدایت میشود، اما متاسفانه تمامی کلیک هایی که در سایت انجام میشود با آدرس مترجم است و ما نمیتوانیم در یک پست، چیزی به نسخه اصلی سایت لینک کنیم مثلا نمیتوانیم یک لینک تعبیه کنیم که کاربر را به صفحه اصلی و یا حتی صفحه دیگری هدایت کند (حتی با وجود استفاده از تگ blank که لینک را در صفحه جدیدی باز میکند باز هم کاربر از شر صفحه ترنزلیت در نسخه ترجمه شده رهایی پیدا نمیکند!) چرا که در صفحه مترجم باز میشود و url گوگل ترنزلیت را دارد شما راهکاری سراغ دارید؟
سابقا از راهنمایی های شما کمال تشکر داریم.
پاسخ: 
سیستم ترجمه گوگل به نحوی است که یک کپی از محتوای آدرس URL درخواستی را ترجمه کرده و به کاربر نشان می دهد، در واقع با کلیک بر روی آیکن ترجمه کاربر از سایت شما خارج و به سایت گوگل منتقل می شود و در این شرایط نمی توانیم در خروجی گوگل دخل و تصرف کنیم، پیشنهاد ما این است که اگر قرار بر چند زبانه بودن سایت است به طور مستقیم این کار را انجام دهید یعنی برای هر زبان بخش جدا داشته و مطلب ترجمه شده را مانند یک پست عادی ارسال کنید، البته قاعدتا CMS شما باید از قابلیت چندزبانی پشتیبانی کند.
نویسنده: آوروپلاست
زمان: ۱۲:۱۹:۲۶ - تاریخ: ۱۳۹۷/۰۱/۰۹
با درود و تبریک سال نو خدمت تیم محترم وبگو؛
آیا کدی وجود دارد که بشود به آن درصد خاصی داد و بعد هرگاه سایت ریلود میشود آن درصد از صفر شروع شود و تا درصد معین شده پیش برود؟ (انگار که آمار آن نمودار در حال محاسبه و بروز رسانی است) همانند آنچه در بالای سایت شما وجود دارد
* منظور کدهای لودینگ سایت نیست بلکه چیزی مانند نمودار متغیر که بشود به آن درصدهای متفاوتی را وارد نمود.
پیشاپیش از شما بابت راهنمایی هایتان کمال قدردانی و سپاس را داریم
پاسخ: 
ضمن تبریک سال جدید و با آرزوی بهترین ها...
لطفا به این آدرس مراجعه کنید، انواع نمودارهای مختلف به همراه سورس کد وجود دارد:
https://codepen.io/collection/hsyFa/
نویسنده: آوروپلاست
زمان: ۱۹:۱۷:۲۹ - تاریخ: ۱۳۹۷/۰۲/۰۸
درود بر تیم محترم وبگو، وقت بخیر
لطفا این کد زیر و که در واقع یه نوع مخفی کننده بخشی از متنه رو چک میکنید (قبلا صحیحا عمل میکرد، الان عمل نمیکنه):
حذف شد
نویسنده: آوروپلاست
زمان: ۱۹:۲۱:۴۸ - تاریخ: ۱۳۹۷/۰۲/۰۸
* بابت سوال قبلی
ضمن عرض پوزش بابت گرفتن وقتتان مشکل حل شد . سپاس از شما
نویسنده: آوروپلاست
زمان: ۰۹:۰۲:۲۱ - تاریخ: ۱۳۹۷/۰۲/۲۰
درود بر تیم محترم وبگو، وقت بخیر؛
اختصاص یک آدرس مشخص برای یک عنصر خاص (مثلا فرضا یک کامنت خاص) در قالب صفحات جهت ارجاع آدرس به آن چگونه ممکن است ؟ فرضا بصورت
webgoo.ir/1#part2
که با ارجاع به آن، باکس مورد نظر ما اواسط صفحه نمایش داده شود آیا روش ساده ای وجود دارد؟
پاسخ: 
تنها کاری که باید انجام دهیم اختصاص پارامتر ID به تگ های مورد نظر است، به فرض تگی که دربرگیرنده خروجی مورد نظر در صفحه است را به صورت زیر تنظیم می کنیم:
<div id="part2">
دقت کنید که ID ها در هر صفحه مشابه نباشند، یعنی هر عنصر باید ID منحصربفرد خودش را داشته باشد.
نویسنده: kayhan
زمان: ۱۵:۴۲:۵۹ - تاریخ: ۱۳۹۷/۰۵/۱۵
سلام
با تشکر از سایت خوبتون
ایا میشه به یک متن در قسمت <style> لینک داد.
دادن لینک به متن در قسمتی که توضیح دادید یکم مشکله.
پاسخ: 
خیر، تگ style برای درج کدها و دستورات CSS در صفحات HTML در نظر گرفته شده است، استفاده از تگ a و درج لینک در این قسمت امکانپذیر نیست!
نویسنده: شوکا
زمان: ۱۵:۱۳:۰۸ - تاریخ: ۱۳۹۷/۰۶/۰۳
مطلب مفیدی بود
متشکرم
موفق باشید.
نویسنده: محمد
زمان: ۲۰:۴۵:۴۱ - تاریخ: ۱۳۹۷/۰۶/۲۵
سلام
هفته قبل در بخشی از پروژه در یک فرم که به صورت Ajax ارسال میشد به یک باگ خورده بودیم به این صورت که با کلیک بر روی دکمه ارسال باید به صورت Ajax یک فایل json به سرور ارسال میشد ولی با کلیک بر روی دکمه ارسال ( تگ Button) در بعضی مرورگرها مصداقا فایرفاکس ، به جای ارسال و نمایش پیغام ، واکنش اینگونه بود که فایل json مثل نمایش یک فایل txt در مرورگر باز میشد . من با کمی تحقیق در وب متوجه شدم که این به دلیل استفاده از از button , submit هست (البته دقیق متوجه نشدم قضیه چیه ، لطف کنید یک توضیح مختصر بدید). برای حل مشکل خصوصیت type را برابر با button قرار دادم و مشکل حل شد ، ولی باز هم یک سری مشکلات بودم که یکی از همکاران به جای تگ button از div استفاده کرد و مشکل به طور کامل حل شد !
من وقتی این حرکتو دیدم واکنش نشون دادم و گفتم استفاده از تگ div مناسب این کار نیست و همین بحث تگهای معنایی را مطرح کردم ولی همکار قانع نشد و گفت فعلا باگ با تگ div اوکی شد و الزامی وجود نداره !!!
در کل نتونستم قانعش کنم که باید با روش دیگه ای مشکل را مرتفع کنیم ، نه با پاک کردن صورت مسئله ، ولی نشد .
بعد با کمی جستجو به مفاهیمی مثل event.preventDefault آشنا شدم لطف میکنید یک توضیح کلی در این رابطه بدید
Form 
submit
button
در پس پرده این سه مورد چیه که در باگی که ما بهش خوردیم اتفاقات اینچنینی رخ میده و اینکه preventDefault راه حل مسئله ما هست ؟ یا .....
تشکر...
پاسخ: 
شاید باگ نبوده و رفتار عادی مرورگر باشد، در هر حال بدون بررسی سورس کدها صرفا می توان توضیح کلی داد، نوع submit معمولا برای ارسال مستقیم فرم کاربرد دارد، یعنی حتی بدون تنظیم تابع جاوا اسکریپتی در رویداد (به فرض onclick) نیز با کلیک کاربر بر روی submit فیلدهای فرم به صورت پیش فرض به آدرس در نظر گرفته شده در قسمت action ارسال می شوند، تنها با در نظر گرفتن کدهای جاوا اسکریپت مانند return false می توانیم عملیات پیش فرض (ارسال فرم) را از نوع submit منع کنیم که در جای خود باید توضیح داده شود، اما در مورد button این نوع به خودی خود کاربردی ندارد و باید یک تابع جاوا اسکریپتی را برای آن در رویداد به فرض onclick در نظر بگیریم که تابع را فراخوانی کند و این تابع می تواند مسئول ارسال درخواست Ajax باشد، در مورد ارسال فایل JSON باید در تابع ای جکس ابتدا محتوای فایل را به صورت JSON Object یا به صورت متن ساده دریافت کنیم، سپس این مقدار را می توانیم با Ajax و متد POST ارسال نمائیم، البته برای اینکه مرورگر فایل را نمایش ندهد بسته به هر روش باید تنظیماتی را اعمال کنیم، مثال در مورد جی کئوری:
https://gabrieleromanato.name/jquery-sending-json-data-to-php-with-ajax
در مورد استفاده از div باید سورس کدها را دید، شاید محتویات فایل JSON را به div اختصاص داده اید که به صورت متنی ارسال کنید که در این صورت اشکال خاصی ندارد و روش عملی است!
نویسنده: بهسا وب
زمان: ۱۷:۰۸:۱۰ - تاریخ: ۱۳۹۷/۰۸/۰۹
بسیار عالی و کاربردی بود با تشکر از شما
نویسنده: یاری
زمان: ۲۱:۴۳:۵۳ - تاریخ: ۱۳۹۷/۱۰/۰۷
سلام
میشه لطفا سریعا بهم بگید چجوری تصویر متحرک یا گیف در وبلاگ بلاگفام قرار بدم ممنوننن؟؟؟؟؟؟
پاسخ: 
لطفا در گوگل عبارت "نحوه درج تصویر در وبلاگ + وبگو" را جستجو کنید، آموزش های جداگانه در این خصوص وجود دارد.
نویسنده: آی دولوپر
زمان: ۲۰:۰۲:۲۰ - تاریخ: ۱۳۹۸/۰۲/۱۹
ممنون برای وقتی که واسه این مقاله گذاشتین مفید بود
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ کوتاه و مختصر داده خواهد شد!
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.





8 × 4
 refresh
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form sepideh
در:
سلام. من یک لندینگ پیج رو به صفحه اصلی سایت ریدایرکت 301 کردم. اگر بخوام تمام لینک های داخلی لندینگ رو (صفحات دنباله) رو...
۱۷:۱۱:۴۰ ۱۳۹۹/۰۴/۲۳

form ا
در:
ببخشید کدها رو کجا میزنیم؟
۱۵:۳۲:۵۷ ۱۳۹۹/۰۴/۲۳

form نیلوفر
در:
سلام. من تازه کار هستم و توی سایتی که طراحی کردم یه سرچ باکس گذاشتم. ارتباط با پایگاه داده هم داره و نتایج رو نشون...
۱۲:۵۳:۴۳ ۱۳۹۹/۰۴/۲۳

form مهدی
در:
سلام من از کد زیر استفاده کردم ولی وقتی که اعمال میشه کل css های سایتم میپره.. چه باید بکنم
۰۹:۵۵:۵۰ ۱۳۹۹/۰۴/۲۳

form سلماسی
در:
سلام ایا اگر از وبسایت شخصی کسی بازدید کنیم صاحب وبسایت شماره ی ما را می بیند
۲۱:۳۱:۵۳ ۱۳۹۹/۰۴/۲۲

form mahdi
در:
سلام استاد اگه براتون زحمتی نیست یه نگاه دیگه بهش بندازید ، الان ریموو ادیت درست هستن فقط برای نمایش کلیشون که وقتی رفرش میکنیم...
۱۹:۱۳:۱۵ ۱۳۹۹/۰۴/۲۲

form mahdi
در:
سلام استاد عزیز ، میتونید یه نمونه که فقط با جاوا اسکریپت کار شده نه با فریمورکاش بهم معرفی کنید ببینم؟ من هرچی گشتم پیدا...
۱۴:۴۶:۲۴ ۱۳۹۹/۰۴/۲۲

form mahdi
در:
سلام استاد عزیز و گرامی ، یه دفتر چه یادداشت با localstorage میخوام بنویسم ولی مشکل دارم، دو تا سوال دارم ممنون میشم راهنماییم...
۱۲:۰۵:۰۷ ۱۳۹۹/۰۴/۲۲

form اریا
در:
سلام و درود بزرگوار چه دستوری باید بنویسیم تا فقط مقدارهای خاصی از ارایه بتونیم نمایش بدیم. مثلا یک ارایه 6 خونه ای...
۱۶:۴۷:۳۱ ۱۳۹۹/۰۴/۲۰

form کافه کتاب
در:
سپاس خیلی وقت بود دنبالش بودم مرسی از سایت عالیتون
۱۴:۵۱:۴۳ ۱۳۹۹/۰۴/۲۰

form سجاد
در:
دمتون گرم. خیلی زحمت کشیدید
۱۳:۴۳:۱۱ ۱۳۹۹/۰۴/۲۰

form KhashayarPrk
در:
سلام. میخوام الگو تمام کلمات داخل پرانتز رو بدون پرانتز بریزه ارایه با این کد فقط یک پرانتز رو جواب میده.
۱۳:۱۳:۴۷ ۱۳۹۹/۰۴/۲۰

form Oliver
در:
چطوری دستور background رو برای جدلمون عکسش رو تنظیم کنیم و بهش طول و عرض بدیم
۱۶:۰۷:۱۷ ۱۳۹۹/۰۴/۱۸

form محمد
در:
با عرض سلام ببخشید چطوری میتونم واسه اشتراک کاربر انقضا بزارم مثلا یک ماه داخل دیتابیس ردیف تایم رو درست کردم البته تاریخ رو تبدیل...
۱۹:۱۴:۵۹ ۱۳۹۹/۰۴/۱۵

form آیدا
در:
سلام من در حال طراحی با html هستم اما طبق فیلم آموزشی پیش میرم از یه جایی به بعد هم تغییرات اعمال نمیشه...
۲۲:۴۷:۴۴ ۱۳۹۹/۰۴/۱۴
form علی
در:
سلام اگه میشه یه تکه کدی بفرستید که کاربر نتونه عکس مورد نظر رو دانلود کنه و با نگه داشتن روی عکس فقط لینکو ببینه...
۰۹:۳۰:۴۹ ۱۳۹۹/۰۴/۱۴
form sina2000
در:
با سلام و خسته نباشید طبق کد زیر استفاده میگه متغیر Pdc برای PDO است لطفا نمونه کد برای لایبرری...
۱۵:۰۳:۵۱ ۱۳۹۹/۰۴/۱۳
form محمد امین
در:
سلام ممنون از مطلبتون ببخشید من یه سایتی با شی گرایی کامل زدم الان میخوام آدرسشو بهینه کنم آدرس الان من به این صورته:...
۱۸:۲۸:۲۴ ۱۳۹۹/۰۴/۱۱
form ترنم
در:
سلام وقتتون بخیر ببخشید من کدهای مربوط منو و زیر منو رو نوشتم ولی موقع اجرا منوی اصلی رو میاره ولی زیر منوها رو...
۱۱:۰۶:۲۹ ۱۳۹۹/۰۴/۱۱
form ا
در:
سلام چرا وقتی مطالب مربوط که تو وبلاگم هست رو جستجو میکنم نمیاره ؟؟؟
۲۰:۳۱:۰۸ ۱۳۹۹/۰۴/۰۷
form amir
در:
سلام من اگه بخوام با وارد کردن یه id داخل یک text کل اون ردیف پاک بشن باید چه کنم مثلا یک text دریافت میکنم...
۰۱:۴۸:۰۵ ۱۳۹۹/۰۴/۰۷
form محمدباقر حسیبیان
در:
من این مشکل برام پیش اومده که موقع ورود به پروژه م توی لوکال هاست wamp صفحه سفیده و هیچی رو نشون نمیده و کد...
۱۶:۴۲:۳۸ ۱۳۹۹/۰۴/۰۶
form ...
در:
سلام دو سایت نوشته ای مربوط به من رو چند سال قبل لینک دانلود قرار دادن من ازشون خواستم بردارنش ولی اینکارو نکردن سایت...
۱۷:۲۶:۴۲ ۱۳۹۹/۰۴/۰۵
form مجتبی
در:
سلام میشه یک کد جاوا رو به php تبدیل کرد تا لود سایت سریع تر بشه؟
۱۳:۰۴:۲۳ ۱۳۹۹/۰۴/۰۴
form متین
در:
سلام ؛ من تازه شروع به یادگیری کردم ؛ مطلب بسیار کاربردی بود ؛ ممنون از شما دوست عزیز.
۰۱:۵۰:۰۵ ۱۳۹۹/۰۴/۰۴
form mahdi
در:
سلام استاد عزیز و گرامی امیدوارم که حالتون خوب باشه ، اگه براتون ممکنه لطفا یه آموزش خوب در زمینه وردپرس بهم معرفی کنید ،...
۲۱:۴۸:۱۳ ۱۳۹۹/۰۴/۰۳
form امید
در:
در برنامه نویسی کاربر با چه دستوری میتواند به صفحه اصلی برگردد
۱۹:۰۶:۵۶ ۱۳۹۹/۰۴/۰۳
form ali
در:
با سلام من یک پروژه طراحی کردم میخوام که وقتی کاربر روی ادامه مطلب کلیک کرد در خود صفحه بقیه مطالب را ببینه...
۱۸:۴۷:۲۲ ۱۳۹۹/۰۴/۰۳
form علی
در:
سلام و تشکر از زحمات ارزشمند شما احتراما بنده امروز از یک شماره تلفن ثابت از طریق یک رایانه و یک موبایل به طور...
۱۸:۰۱:۱۰ ۱۳۹۹/۰۴/۰۳
form oscar
در:
درود. اگر بخوایم در نمایش تاریخ و زمان که به صورت لحظه ای خودش در صفحه رفرش میشه، فقط عبارت " Mon Jun 22 2020...
۱۵:۵۹:۳۲ ۱۳۹۹/۰۴/۰۲
form علی
در:
با سلام چطور میشه فقط یک صفحه مورد نظرمون رفرش بشه نه همه صفحات سایت
۰۰:۰۳:۴۱ ۱۳۹۹/۰۳/۳۱
form Farzad
در:
الان وقتی فایل رو میخواد دانلود بکنه از خودش فایل میسازه ، به این صورت یعنی بعد از پوشه file هر پوشه ای باشه...
۱۸:۵۶:۲۱ ۱۳۹۹/۰۳/۳۰
form Farzad
در:
سلام ، خسته نباشید من فایل هایی که در هاست میزارم به این شکل هست: یعنی مشخص نیست فایل ها تو چه پوشه...
۱۳:۳۳:۴۰ ۱۳۹۹/۰۳/۳۰
form شیما طیبی
در:
سلام خیلی مطلب مفیدی بود . همیشه به وبلاگ نویسی به چشم یه کار خسته کننده نگاه میکردم ولی خب یه مقدار نظرم تغییر کرد....
۲۳:۵۲:۳۲ ۱۳۹۹/۰۳/۲۹
form احسان
در:
سلام من یک کد اسکریپت دارم که به صورت عددی تبدیل شده است. میخواستم بپرسم چطوری میتونم اسکریپت به حالت اولیه نوشته شده برگردانم و...
۲۱:۰۲:۱۳ ۱۳۹۹/۰۳/۲۷
form علی
در:
ممنون از پاسختون اما روش بالا جهت دانلود فایل کاربرد داره . من میخواستم به صورت استریم ویدئو پخش بشه اما آدرس مستقیم ویدئو...
۰۰:۳۷:۴۶ ۱۳۹۹/۰۳/۲۷
در انتظار بررسی: ۰