دسته بندی
×
آگهی
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 مطالب بیشتر:
» کار با تگ های ایجاد کننده لیست در HTML
» ایجاد جدول با تگ table در HTML
» کاربرد تگ font و ویژگی های فونت در HTML
» لایه بندی در HTML با تگ div و span
» کاربرد تگ img و نمایش تصاویر در HTML
commentنظرات (۲۵ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: احسایدر
زمان: ۱۸:۵۷:۰۵ - تاریخ: ۱۳۹۸/۰۵/۲۲
شما از چه روشی برای لینک دادن به قسمت‌های نوشته استفاده کردید که با کلیک کردن چیزی به آدرس نوشته اضافه نمیشه؟
پاسخ: 
این امکان مبتنی بر تگ h1 و h2 موجود در متن مطالب است و پارامترهای هر لینک با نمونه کد PHP زیر استخراج و به صورت داینامیک ایجاد می شود:
<?php
function findTextBetweenTags($string, $tag){
$pattern = "/<$tag>(.*?)<\/$tag>/s";

preg_match_all($pattern, $string, $matches);

return $matches[1];
}

$tags_array = findTextBetweenTags($db_post, 'h2');

$count = count($tags_array);
for($i = 0; $i < $count; $i++){
echo '<a href="#" title="' . strip_tags($tags_array[$i]) . '" onclick="return scrollToTag(\'h2\', $i);">' . strip_tags($tags_array[$i]) . '</a>';

if($i < ($count - 1)){
echo '<hr />';
}
}
?>
در نهایت باید لینک را به صورت نمونه زیر خروجی دهیم:
<a href="#" title="HTML" onclick="return scrollToTag('h2', 1);">HTML</a>
و تابع جاوا اسکریپتی با نام scrollToTag در صفحه داشته باشیم:
<script>
function scrollToTag(tag, num){
var elm = document.getElementsByTagName(tag)[num];

if(elm){
document.getElementsByTagName(tag)[num].scrollIntoView();
}

return false;
}
</script>
به این صورت با کلیک بر روی هر لینک مرورگر به محدوده نمایش تگ مورد نظر اسکرول می کند.
نویسنده: رضا
زمان: ۰۱:۱۵:۰۷ - تاریخ: ۱۳۹۸/۰۸/۱۰
خسته نباشید
این جلسه آخر html بود؟؟؟؟
پاسخ: 
خیر، تا این لحظه مباحث پایه HTML در سایت منتشر شده که برای تسلط در سطح مقدماتی تا متوسط کفایت می کند، فعلا در وضعیت بازبینی و تکمیل مطالب گذشته قرار داریم و پس از اتمام این کار مجددا مباحث جدید و پیشرفته در سایت منتشر خواهد شد.
نویسنده: مصطفی
زمان: ۰۸:۰۳:۳۵ - تاریخ: ۱۳۹۸/۰۹/۰۷
سلام ادرس سایت من
www.ory.ir
است من 2 تا قالب درست کردم در دو پوشه اما با دستور زیر در روت مشکل دارم و عکس های قالب اینکلود نمیشه در صورتی که به ادرس پوشه رو باز کنیم مانند زیر بدون مشکل باز میشه
www.ory.ir/t1
www.ory.ir/t2

<?
include ("config.php");
?>
<?php
$status = $config['poosteh'];
if($status == t1) {
include 't2/index.php';
} else{
include 't1/index.php';
}
?>
پاسخ: 
سایتتان بررسی شد، ظاهرا مشکل بر طرف شده است؟!
نویسنده: مصطفی
زمان: ۲۱:۵۶:۰۱ - تاریخ: ۱۳۹۸/۰۹/۰۷
سلام نه هر چه کردم کد درست عمل نکرد و مجبور شدم یک ایندکس بسازم لینک بزارم با این کار قصد دارم هم بتونم سایت رو مسدود کنم هم بتونم بگم کدوم قالب رو لود کنه...
کد زیر خطا نمیده اما هرچه در دیتابیس چه بنویسم y چه بنویسم o بازم صفحه off.php اینکلود میشه... لطفا راهنمایی کنید
ممنون
<?
include ("config.php");
?>
<?php
$status = $config['off'];
if($status == "y") {
include ("on.php");
} else{
include ("off.php");
}
?>
پاسخ: 
قاعدتا به هر دلیل متغیر status برابر مقدار مقایسه شده نیست که قسمت else اجرا می شود، برای اطمینان با دستور var_dump متغیر را بررسی کنید:
$status = $config['off'];
var_dump($status);
مقدار اصلی از متغیر config دریافت می شود که ظاهرا یک آرایه است، باید ببینید ایندکس off در آرایه چه مقداری دارد.
نویسنده: مصطفی
زمان: ۰۰:۱۹:۰۳ - تاریخ: ۱۳۹۸/۰۹/۰۸
ببخشید چرا قسمت جستجوی سایتتون عمل نمیکنه!؟ دنبال مقاله راجع سشن ها و ساخت پنل مدیریت برای سی ام اسم میگردم یادمه یه مقاله قبلا نوشته بودین سال 92 بود
ممنون
پاسخ: 
الگوریتم فعلی جستجو خیلی قوی نیست و عمدتا صرفا تیتر مطالب را تطبیق می دهد، پس از اینکه جستجو نتیجه ای نداشت از فیلد "جستجو در وبگو با گوگل" استفاده کنید، مطلب در سایت وجود دارد و احتمالا به بحث پنل ورود و خروج مربوط می شود.
نویسنده: محمد صادق نصرتی رامش
زمان: ۱۶:۰۵:۳۴ - تاریخ: ۱۳۹۸/۰۹/۱۱
چکونه لینک بگذارم و پول در بیاورم؟
پاسخ: 
برای کسب درآمد از طریق لینک قبل از هر چیز باید سایت یا وبلاگ با بازدید مناسب داشته باشید، سپس می توانید با جذب مستقیم آگهی یا استفاده از سایت های نمایش تبلیغات هوشمند، کلیکی و... کسب درآمد کنید.
نویسنده: مصطفی
زمان: ۱۶:۴۸:۲۲ - تاریخ: ۱۳۹۸/۰۹/۱۸
سلام لطفا بررسی کنید کد زیر چه مرگشه عمل نمی کنه
ممنون
<?php     $servername = "localhost";     $username = "iranpak";     $password = "*************";     $dbname = "cp3859";     $conn = new mysqli($servername, $username, $password, $dbname);      if ($conn->connect_error) {         die("Connection failed: " . $conn->connect_error);     }       $sql = "UPDATE Counter SET visits = visits+1 WHERE id = 1";     $conn->query($sql);      $sql = "SELECT visits FROM Counter WHERE id = 1";     $result = $conn->query($sql);      if ($result->num_rows > 0) {         while($row = $result->fetch_assoc()) {             $visits = $row["visits"];         }     } else {         echo "try again";     }          $conn->close(); ?>  <!doctype html>   <html lang="en">     <head>         <meta charset="utf-8">         <meta http-equiv="x-ua-compatible" content="ie=edge">         <title>Visit counter</title>     </head>     <body>         Visits: <?php print $visits; ?></body> </html>
پاسخ: 
لطفا سوالات مربوط به دیتابیس را در آموزش های مرتبط مطرح کنید.
کد از نظر Syntax مشکلی ندارد، برای خطایابی نیاز به اجرا و تست اسکریپت و همچنین امکان اتصال واقعی به دیتابیس است.
نویسنده: احمدی
زمان: ۰۲:۰۱:۱۵ - تاریخ: ۱۳۹۸/۰۹/۳۰
سلام
اول یه تشکر از ادمین سایت که سالهاست بهم کمک کرده و عرض کنم خدمتتون سایت زیر رو فقط و فقط 0 تا 100 کدنویسی به غیر از قالبش رو از اموزش های این سایت موفق شدم بنویسم ضمنا اگه کسی جهت اموزش سورس سایت منو خواست بگه با افتخار تقدیمش میکنم
www.afra.ory.ir
البته اموزش های سایت ساده و قابل درک برا افراد عادیه که من با مقداری تحقیق از جاهای دیگه و تلاش تونستم کدها رو سر هم کنم و ارتقا بدم تا سورسم کامل تر بشه...
به جرات میتونم بگم ساده ترین و قابل فهم ترین سورسی که تو ایران وجود داره با اختلاف خیلی زیادی من نوشتم و یه اسکریپت مدیریت محتوای ساده و سبک درست شده
مجدد از مدیر سایت وبگو تشکر می کنم که به رایگان علمشون رو در اختیار دیگران قرار میدن
ممنون
نویسنده: مهدی
زمان: ۲۰:۲۹:۰۸ - تاریخ: ۱۳۹۸/۱۰/۲۹
سلام میشه به من کمک کنید من چجوری برای وب سایتم لینک بزارم؟
اگه میشه برای ایمیلم جواب را ارسال کنید.
پاسخ: 
لطفا آدرس سایتتان را درج یا مشخص کنید از چه برنامه ای برای مدیریت سایت استفاده می کنید (جوملا، وردپرس و...).
نویسنده: mahdi
زمان: ۱۹:۴۶:۴۰ - تاریخ: ۱۳۹۸/۱۲/۲۹
سلام استاد عزیز و گرامی و با معرفت ، سال نو رو تبریک میگم بهت امیدوارم خودت و خانوادت سالم و سلامت و همدل و موفق باشید و سال جدید انشالله برات پر از مهر و سلامتی و پول و توجه خدا باشه .. خیلی مخلصیم
پاسخ: 
سپاس فراوان از این همه لطف شما، متقابلا ما هم سال جدید رو پیشاپیش خدمت شما تبریک عرض میکنیم و سلامتی و موفقیت برایتان و آرامش و دلخوشی برای همه از صمیم قلب آرزو می کنیم.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ کوتاه و مختصر داده خواهد شد!
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.





4 × 9
 refresh
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
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 علی
در:
ممنون از پاسختون اما روش بالا جهت دانلود فایل کاربرد داره . من میخواستم به صورت استریم ویدئو پخش بشه اما آدرس مستقیم ویدئو...
۰۰:۳۷:۴۶ ۱۳۹۹/۰۳/۲۷
form محمد
در:
سلام مجدد ببخشید طبق فرمایش شما من در دیتابیس جدولی ساخته بودم فقط مشکلم اینجاست چطوری میتونم توسط کوکی یا سیشن با تابع دیت انقضا...
۲۲:۳۸:۰۳ ۱۳۹۹/۰۳/۲۵
form محمد
در:
با عرض سلام ببخشید چطوری میشه واسه اشتراک خریدن زمان ۱ ماهه گذاشت که بعد از گذشت ۱ ماه پیام بده دوباره اشتراک تهیه کنید...
۱۳:۱۳:۵۵ ۱۳۹۹/۰۳/۲۵
form ehsan
در:
سلام و خسته نباشید. من قالب جدید تهیه کردم ولی ایکن هاش کار نمیکنن. اگه وبلاگم نگا کنین متوجه میشین. ایکن شبکه های اجتماعی...
۱۷:۱۹:۴۰ ۱۳۹۹/۰۳/۲۴
در انتظار بررسی: ۰