دوشنبه ۰۷ خرداد ۱۴۰۳

Monday, May 27, 2024 GMT +3:30
دسته بندی
×

آشنایی با مفهوم 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
دسته بندی: آموزش مقدماتی » HTML
related مطالب بیشتر:
ایجاد جدول با تگ table در HTML
نحوه ایجاد لینک در HTML
متاتگ ها (Meta Tags) و کاربرد آنها در صفحات وب (HTML)
آشنایی با HTML، زبان پایه کدنویسی وب
فرمت بندی و کار با متن و پاراگراف در HTML
دیدگاه
more ۵۵ دیدگاه برای این مطلب ارسال شده است.
more دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.
پـــرتو
۱۷:۰۲ ۱۴۰۰/۱۱/۲۸
سلام خسته نباشید اون مشکلی که داشتم حل شد فقط یه مشکل دیگه دارم اونم اینکه این منوی افقی ای که درست کردم رفته بالای هدر من می خام زیر هدر و بالای منوی وسط باشه شما نمی دونید چیکار کنم ؟ (البته خودم درست نکردم توی نت سرچ کردم) متاسفانه این دفعه نمی تونم کد رو براتون ارسال کنم چون اجازه ندارم چون این یه کده دیگه هستش ، فقط لطفا بهم بگین که چیکار کنم که منو بیاد زیر هدر باید ازش اجازه بپرسم اونم خیلی دیر جواب می ده ، ممنون میشم جواب بدین منتظر جوابتون هستم ... یه راهنمایی کوچیک فقط لطفا بکنید که چیکار کنم خودم روی کد انجام می دم
کد HTML منو باید در قسمت درستی از کدهای قالب زیر هدر و بالای منوی وسط درج شده و فضای کافی برای آن در نظر گرفته شده باشد، در گام دوم باید استایل CSS مربوط به منو بررسی شود و اگر نیاز بود با خاصیت هایی مانند clear، display، margin یا position منو را در جای مناسب تثبیت کنیم، بدون دیدن و بررسی سورس کدها نمی شود دقیقتر راهنمایی کرد.
پـــرتو
۲۳:۴۵ ۱۴۰۰/۱۱/۲۸
ممنونم جناب تشکر مشکلم حل شد من کد رو در کامنت بعد براتون میفرستم کد منو رو میفرستم منو رو می تونم بفرستم لطفا بگین برای اندازه هاش چیکار کنم ممنون میشم منظورم اینکه برای اینک طول منو رو تغییر بدم چیکار کنم منتظر پاسخ شما هستم
یادداشت شما به بخش کدنویسی ارجاع داده شد، لطفا طی ساعات ۱۶ الی ۲۰ پاسخ را چک کنید.
پـــرتو
۰۰:۰۱ ۱۴۰۰/۱۱/۲۹
کد منو:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<div style="padding-left:16px">
<h2>Top Navigation Example</h2>
<p>Some content..</p>
</div>
</body>
</html>
و اینک یه عکس واستون میفرستم برای اینکه اندازه هاشو بهم بگین
http://www.upsara.com/images/q190908_.jpg
و اینک اگه به این عکس نگاه کنید منوی من یه حالت بُعد داره نمی خام این حالتی باشه میشه بگید چیکار کنم این حالتی نباشه و معمولی باشه ، ممنون میشم بگین منتظر پاسختون هستم
منظورتان از بعد مشخص نیست؟! در کدهای منو خاصیتی برای تعیین بعد دیده نمی شود، برای تغییر اندازه ها باید از خاصیت width برای استایل CSS منو استفاده کنید، چه تغییری در اندازه می خواهید اعمال کنید؟ در حال حاضر منو به اندازه عرض تگ والد خود کشیده می شود یعنی width آن به صورت پیش فرض و 100 درصد است.
پرتو
۱۵:۵۵ ۱۴۰۰/۱۱/۲۹
منظورتان این هستش که خودش تغییر اندازه کرده؟ یعنی من دیگه لازم نیست تغییر اندازه بدم؟ منظورم از بعد این هستش که راستش نمیدونم فقط میدونم یه حالتی داره که نمیخام این حالتی باشه و میخاستم اگ میشه معمولی و ساده ی ساده باشه منظورم از ساده و معمولی متوجه میشین؟ منظورم همینه .... یعنی افکت خاصی نداشته باشه
منو با استایل فعلی که درج کرده اید در هر بلاکی قرار بگیرد به حداکثر عرض آن بلاک کشیده می شود یعنی به فرض اگر بلاکی که منو را در آن قرار می دهید 800 پیکسل عرض داشته باشد منو هم 800 پیکسل عرض پیدا می کند، اگر منو خارج از بلاک دیگری درج شود کل عرض صفحه نمایش را دربر می گیرد، در مورد بُعد در کدهایی که درج کرده اید جز رنگ هیچ افکت یا جلوه خاصی دیده نمی شود که بخواهیم حذفش کنیم.
پـــرتو
۱۵:۰۶ ۱۴۰۰/۱۱/۳۰
اوکی ممنون از جوابتون تشکر
۱۶:۱۶ ۱۴۰۲/۰۳/۱۹
ممنون از این مقاله کامل جامع
پـــرتو
۲۲:۵۲ ۱۴۰۲/۰۶/۱۱
سلام خسته نباشید ببخشید مزاحم شدم می خواستم بگم که یه کدی داده بودین قبلا برای بلاگفا که آی پی کسایی که بهمون توهین می کردن رو می تونستیم بلاک کنیم اونو می گم ندارینش دوباره بزارینش چون من لازمش دارم ولی چون نمی دونم کجا گذاشتینش یعنی پیداش نمی کنم نمی دونم کجا هست پس اگه میشه دوباره بزارینش لطفا و لطفا بگین که کجای وبم بزارمش مرسی
ایمیل شده بود یا در یادداشت ها ارسال شده بود؟ چه تاریخی بود؟
پـــرتو
۲۱:۱۵ ۱۴۰۲/۰۶/۱۴
سلام فکنم در یادداشت ها ارسال شده بود و تاریخشم یادم نیست ولی من واقعا نمی دونم کامنتش کجاست که برم برش دارم
ممنون میشم برام بزارینش لطفا مرسی
برای مسدود کردن IP کاربر در وبلاگ ها می توانید از نمونه کد زیر استفاده کنید (کد را در قسمت ویرایش قالب یا اسکریپت های اختصاصی درج کنید):
<script>
var banned_ip = new Array();
banned_ip[0] = '8.132.554.180';
banned_ip[1] = '8.132.654.181';
banned_ip[2] = '8.132.754.182';
function getIP(json) {
if(banned_ip.indexOf(json.ip) >= 0) {
window.location.href = 'https://google.com';
} else {
//ok
}
}
</script>
<script src="https://api.ipify.org?format=jsonp&callback=getIP"></script>
در این نمونه کد سه IP جهت نمونه تنظیم شده که باید آنها را ویرایش و IP کاربران مد نظرتان را قرار دهید (IP را می توانید از ابزارهای نمایش آمار بازدیدکننده ها به دست آورید)، این کد کاربر مسدود شده را از وبلاگ بیرون و به سایت گوگل ارجاع می دهد!
پـــرتو
۱۵:۳۶ ۱۴۰۲/۰۷/۰۳
سلام جناب خسته نباشید شرمنده مزاحم میشم
عه جناب ببخشید من دو سه تا وبلاگ دارم که یکیش یا دوتاشون هک میشن یعنی فکنم که هک می شن چون هر چی پسوورد میزنم می نویسه اشتباهه بعد که به مدیر بلاگفا ایمیل دادم گفتش که وب شما در چند ماهه اخیر پسووردش تغییر نکرده والله بخدا نمی دونم چی بگم هعی پسووردم عوض میشه و من باید هعی پسوورد عوض کنم ممنون میشم که راهنماییم کنید که از کجا بفهمم هکر کیه و چطوری بیرونش کنم ممنونم گفتم شاید شما بدونید و بتونید کمکم کنید ممنونم منظور من توی بلاگفا هست
برای تغییر پسورد وبلاگ لازم است که پسورد قبلی را وارد کنیم پس احتمال هک به این شیوه خیلی مطرح نیست مگر اینکه شخصی به پسوردهای ذخیره شده در مرورگر دسترسی داشته باشد، در هر صورت به تجربه باید احتمال هک را گزینه آخر در نظر بگیریم بخصوص اگر تغییر دیگری در محتوای وبلاگ ایجاد نشده است، ممکن است به هر دلیل پسورد را اشتباه وارد می کنید، به فرض روشن یا خاموش بودن دکمه Caps Lock یا فارسی بودن صفحه کلید، حتی گاهی کپی رمز و مواردی از این دست.
javascript
۰۰:۰۹ ۱۴۰۲/۰۷/۰۶
سلام 🙌
توی جاوا اسکریپت چطور تگ آپشن رو پیش فرض بزاریم
مثلا : تگ آپشن _استان محل صدور : همدان - باشه و _شهر محل صدور : مثلا یکی از شهرهای زیر مجموعه استان همدان _پیش فرض باشه مثلا ملایر این دو یعنی استان محل صدور و شهر محل صدور بهم وابسته هستند.
بدین شکل که وقتی با موس استان رو انتخاب میکنی مثلا استان البرز و شهر رو انتخاب میکنی کرج اوکی هست. منظورم اینه که اصلا وقتی البرز رو با موس انتخاب میکنی تمام شهرهای زیر مجموعش توی تگ آپشن بعدی هستند و یکی از اونا رو انتخاب میکنیم اما بصورت پیش فرض استانش اوکی میشه ولی شهر زیر مجموعش نمیشه. خواسته من اینه که شهر زیر مجموعه استان هم با خود استان هر دو پیش فرض باشن.
نکته : به غیر از این (استان محل صدور و شهر محل صدور) استان محل تولد و شهر محل تولد - استان محل سکونت و شهر محل سکونت هم داریم
ممنون میشم راهنمایی کنید 🤷‍♀️
برقراری ارتباط بین دو فیلد select به ساختار کدنویسی برنامه، نحوه بارگذاری محتوا در صفحه، مقادیر value مربوط به option ها و... بستگی دارد که هر کدام می توانند در شرایط مختلف راه حل متفاوتی داشته باشند، جهت نمونه در کد زیر بین آپشن های دو تگ select ارتباط برقرار شده:
<select id="my-select-1" onchange="getRealatedOption('my-select-1', 'my-select-2');">
<option value="A">A</option>
<option value="B" selected="selected">B</option>
<option value="C">C</option>
</select>
<select id="my-select-2">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
<script>
function getRealatedOption(select_1, select_2){
var related_array = {'A':'a', 'B':'b', 'C':'c'};
var elm_select_1 = document.getElementById(select_1).selectedOptions[0];
var elm_select_2 = document.getElementById(select_2);

elm_select_2.value = related_array[elm_select_1.value];
}
getRealatedOption('my-select-1', 'my-select-2');
</script>
مبنای این ارتباط بررسی مقادیر value از سلکت اول (پس از اجرای رویداد onchange) به فرض B و انتخاب مقادیر متناظر (با توجه به الگوی تعریف شده در آبجکت related_array) از سلکت دوم یعنی b است، به این صورت option مورد نظر که value آن b باشد در سلکت دوم به حالت انتخاب شده تبدیل می شود.
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.



 refresh
10 × 10
6 × 4
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
پرتو
سلام خوبید؟ بلاکفا باز دچار مشکل شده یا فقط برای من دچار مشکل شده؟ منظورم اینکه خیلی دیر باز میشه و فقط برای فایرفاکس هم...
۱۴۰۳/۰۳/۰۱

سعیدی
سلام می تونید اینو اصلاح کنید؟ چون من با توضیحات شما یاد نگرفتم خیلی ممنون اگه یکبار اصلاح کنید واسه بعد یاد...
۱۴۰۳/۰۲/۲۲

سعیدی
دست شما درد نکنه وقتی اینطوری تغییر میدم و به class می نویسم کار نمی کنه و ارور میده
۱۴۰۳/۰۲/۲۱

سعیدی
دست شما درد نکنه خیلی خوب بود این یکی رو چطوری فراخوانی کنم؟ این واسه مناسبت هاست خیلی ممنون
۱۴۰۳/۰۲/۱۹

سعیدی
با سلام آیا می شه این تابع رو بصورت class نوشت؟ میخوام وقتی کد ملی میدم با این تابع فراخوانی بشه و شهر...
۱۴۰۳/۰۲/۱۹

پرتو
مگه شما دارین اموزشش رو؟ آدرسش رو میزارید؟ یا اگر سایتی رو میشناسید که آموزش داده باشه معرفی کنید ممنون میشم من خیلی گشتم توی...
۱۴۰۳/۰۲/۱۸

پــرتو
سلام خوبید ؟ خسته نباشید گوشی پدرم شیاومی هست ایمیلمو ثبت کردم داخلش بعد می خواستم حذفش کنم نمیشد می گفت همه داده های توی...
۱۴۰۳/۰۲/۱۶

vip
خیلی ممنونم از شما خیلی عالی شد میشه مثل تبلیغ بلاگفا باشه یعنی زیر صفحه نمایش داده بشه و صفحه رو سیاه نکنه که تا...
۱۴۰۳/۰۲/۰۵

vip
با سلام و خسته نباشید استاد چند وقت پیش این کد رو از شما گرفتم این کد خیلی خوبه و کاربر رو هم...
۱۴۰۳/۰۲/۰۴

پـــرتو
سلام خسته نباشید شرمنده مزاحم میشم یه سوال داشتم می خواستم بپرسم که چرا بلاگفا باز نمیشه برام؟ کلا هر وبلاگی که مربوط به بلاگفا...
۱۴۰۳/۰۲/۰۲

هادی عبداله زاده
با تشکر از شما دوست عزیز با order_id درستش کردم موقع برگشت order_id رو بر می گردونه اینطوری کردم که از طریق اون شناسه...
۱۴۰۳/۰۱/۲۲

هادی عبداله زاده
با تشکر از شما برای ارسال درخواست درست بود و به بانک هم وصل شد فقط برای وریفای چیکارش کنم؟
۱۴۰۳/۰۱/۲۲

هادی عبداله زاده
با سلام و خسته نباشید سال نو شما مبارک من یه کد واسه انتقال به درگاه دارم واسه زرین پال هست ...
۱۴۰۳/۰۱/۲۰

پـــرتو
ببخشید ممنون از جوابتون ولی یه سوال اگر بخوام همون شماره رو با حساب کاربری جدید با همون شماره رو داشته باشم داده های قبلی...
۱۴۰۳/۰۱/۱۹

حسین بلاگ
من یه صفحه ارسال متن دارم میخوام کاربرها وقتی واسه م پیام میدن وقتی روی اون دکمه کلیک می کنن بهشون بگه لطفا صبر...
۱۴۰۳/۰۱/۱۹

شریفی
سلام و عرض احترام سال نو رو بهتون تبریک میگم انشالله سال خوبی داشته باشین یه سرویس وبلاگدهی داریم که قصد داریم به...
۱۴۰۳/۰۱/۱۵

فرهادی
سلام ببخشید یه مشکل دارم این صفحه رو نگاه کنید چند بار توی سورس تکرار شده نمی تونم الگوی توضیحاتش رو استخراج...
۱۴۰۳/۰۱/۱۰
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.