سه شنبه ۲۸ دی ۱۴۰۰

Tuesday, January 18, 2022 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 مطالب بیشتر:
تگ های اصلی و کلیدی HTML
آشنایی با HTML، زبان پایه کدنویسی وب
ایجاد جدول با تگ table در HTML
کار با تگ فرم (form) در HTML
کاربرد تگ img و نمایش تصاویر در HTML
دیدگاه
more ۴۰ دیدگاه برای این مطلب ارسال شده است.
more دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.
نویسنده: پـــرتو
۱۸:۰۲ ۱۴۰۰/۰۹/۱۳
چشم الان کد بلاگفایی براتون می فرستم فقط خواهشا و لطفا بهم یاد بدین که چطوری میشه هدر و رنگ بکگراندش رو تغییر داد ممنونم منتظرم
پاسخ: 
پاسخ به ایمیلتان ارسال شد.
نویسنده: پـــرتو
۲۲:۵۵ ۱۴۰۰/۰۹/۱۳
خیلی ممنون از پاسخ ایمیلتان فقط در ایمیلتون نگفتین که این کد border پست ها و خط زیر عنوان رو کجا بزارم؟
پاسخ: 
مشابه کدهای پس زمینه یعنی بالای قسمتی که تگ head بسته می شود.
نویسنده: پـــرتو
۱۱:۳۳ ۱۴۰۰/۰۹/۱۴
سلام خسته نباشید من همه ی کدهایی که دادین انجام دادم و شد درستم بود فقط یه ایرادی داشت این بود که border پست ها و خط زیر عنوانش بد بود نه که کد ایراد داشته باشه ها نه یه خورده ظاهرش بد بود مثلا من منظورم این بودش که عنوان بره داخل border و یه خطم زیر عنوانش باشه همین منظورم بود و ممنون میشم راهنمایی بفرمایید که چیکار کنم اگر بکگراندم زیر عنوانش باشه قشنگتر هم میشه .... منتظر جوابتون هستم
پاسخ: 
کدنویسی HTML قالب مطابق با سلیقه طراح اولیه به صورتی نوشته شده که نمی شود بدون اعمال تغییرات کلی در سورس کدها و ساختار قالب شکل مد نظرتان را ایجاد کرد، برای اینکه حالت مد نظرتان ایجاد شود باید علاوه بر قسمت CSS بخش کدنویسی HTML هم ویرایش و کم و زیاد شود که قاعدتا زمانبر است، به همین دلیل گفتیم HTML و CSS بلد باشید چون در این صورت هر ایده ذهنی را می توانید به شکل ظاهری تبدیل کنید، در هر صورت تغییرات مد نظر به بخش طراحی ارجاع شد و تا آخر وقت امروز کد جدید برایتان از طریق ایمیل ارسال می شود.
نویسنده: پـــرتو
۱۲:۴۴ ۱۴۰۰/۰۹/۱۴
خیلی ممنونم منتظرم چشم سعی می کنم html و css رو یاد بگیرم البته تا حدودی بلد هستم اما نیستم اون قدر حرفه ای که بتونم یه کد طولانی بنویسم راستی در مورد آپلود سی اس اس از پیکوفایل هم استفاده کردم اما نشد :( نمی دونم چرا نمیشه یا من زیاد وارد نیستم یا مشکل از پیکوفایل هست، هاست برا چی خوبه؟ هاست بخرم فقط برای اینکه بتونم فایل های سی اس اس رو آپلود کنم؟
پاسخ: 
استایل جدید به ایمیلتان ارسال شد، سایت picofile قبلا لینک مستقیم ارائه می کرد، احتمال دارد قابلیت لینک مستقیم را حذف کرده باشند یعنی برای دانلود فایل ها حتما باید به صفحه این سایت مراجعه شود (مدت زیادی است که از خدمات این سرویس ها استفاده نکرده ایم!)، داشتن دامنه و هاست شخصی برای راه اندازی سایت و وبلاگ (به فرض با وردپرس) یا نگهداری و اشتراک فایل های آنلاین و در کل فعالیت در وب مناسب است، با خرید هاست و دامنه می توانیم یک فضای آنلاین مستقل داشته باشیم و از محدودیت های سرویس های رایگان دوری کنیم البته کیفیت و قیمت شرکت های هاستینگ متفاوت است که باید در انتخاب میزبان مناسب دقت کافی داشته باشیم.
نویسنده: پـــرتو
۲۱:۵۹ ۱۴۰۰/۰۹/۱۴
ببخشید توی وردپرس می شه فایل های استایل دات سی اس اس آپلود کرد یا نه؟
پاسخ: 
وردپرس یک سیستم مدیریت محتوا (CMS) است، به عبارت ساده تر با این برنامه می توانید سایت یا وبلاگ شخصی ایجاد کنید، در سرویس های رایگان وبلاگی سیستم مدیریت محتوا توسط سرویس دهنده ارائه می شود که همان پنل مدیریت وبلاگ است اما در سایت ها و وبلاگ های شخصی باید از یک سیستم مدیریت محتوای اختصاصی مثل وردپرس استفاده کنید، فایل های CSS و ... را در هاستتان آپلود می کنید و آدرس URL آنها در وردپرس یا در وبلاگ ها قابل استفاده است، به فرض:
http://example.com/file/style.css
که این آدرس یعنی در سایت example.com در فولدر file فایل style.css را آپلود کرده ایم.
نویسنده: پـــرتو
۲۲:۵۱ ۱۴۰۰/۰۹/۱۴
خیلی عجیبه با هر سایت آپلودری که پسوند مجاز سی اس اس کار می کنه آپلود می کنم ولی بازم اشتباه میشه
عجیبه.... احتمالا مشکل از منه ..... خودتون ببینید:
https://www.uplooder.net/files/702eab6a1b6b4ae8352a7bcffe8be4a2/style6.css.html
کجای کار ایراد داره که نمیشه؟ ممنون میشم راهنمایی بفرمایید اینو با اون قالبی که بهتون دادم با هدرش جایگزین کنید و ببینید لطفا
پاسخ: 
برای فایل های CSS نیاز به لینک مستقیم داریم، یعنی لینکی که پس از وارد کردن آن در نوار آدرس مستقیم به محتوای فایل مورد نظر هدایت شویم، معمولا این سبک آدرس ها باید به پسوند فایل ختم شوند اما اگر دقت کنید انتهای آدرس به جای css به html ختم شده است که یعنی لینک مستقیم نیست و باید ابتدا به سایت مورد نظر مراجعه و سپس فایل را دانلود کنیم.
نویسنده: پـــرتو
۱۲:۲۴ ۱۴۰۰/۰۹/۱۵
دست شما درد نکنه خیلی ممنون که کمکم کردین ، ایرادات کارم رو متوجه شدم و تونستم یه سایت آپلود خوب پیدا کنم که بتونم فایل هامو اونجا آپلود کنم ، خیلی ممنونم ازتون ، انشاالله بتونم جبران کنم ، دست شما درد نکنه تشکر البته توی وردپرس نه یک جای دیگه ...
پاسخ: 
خواهش، خوشحالیم که راهنمایی ها مفید بوده.
نویسنده: پـــرتو
۱۲:۱۲ ۱۴۰۰/۰۹/۲۳
سلام خسته نباشید شرمنده مزاحم شدم ، یه کد قالب گیرم اومده که یه سوال در موردش داشتم سوالمم اینکه از هدرش تا بدنش یکم ارتفاع داره یکم که نه خیلی یعنی هدرش و بدنش بهم چسبیده نیستن ، همچین حالتی داره و اینکه کد رو متاسفانه نمی تونم براتون بفرستم چون بهم گفتن برا کسی نفرستم ولی فقط بهم لطفا بگین که کدوم قسمت باید برم که تغییرش بدم خودم تغییرش می دم فقط یه راهنمایی کنید که کدوم قسمت باید برم ممنونم منتظر جواب شما هستم
پاسخ: 
بدون دیدن سورس کدها امکان راهنمایی دقیق میسر نیست، به صورت کلی باید کدهای استایل CSS قالب را پیدا کنید که معمولا یا به صورت فایل خارجی با تگ link در قالب درج شده و در این حالت اگر آدرس قسمت href را در مرورگر وارد کنید دستورات CSS مشخص است، یا اینکه کدهای استایل CSS در خود قالب وجود دارد و به صورت فایل خارجی نیست که در این صورت ویرایش آنها ساده تر است، بعد از پیدا کردن استایل باید قسمت HTML یعنی کدنویسی تگ های قالب را بررسی کنید چون ظاهر و نحوه نمایش تگ ها با CSS کنترل می شود، بر این اساس ممکن است نیاز به تغییر چینش تگ ها یا حتی حذف و اضافه مواردی باشد و ممکن است به صرف تغییر کلاس و آی دی مرتبط با تگ ها در استایل CSS مشکل رفع شود.
نویسنده: پـــرتو
۱۷:۰۰ ۱۴۰۰/۰۹/۲۶
سلام خسته نباشید این کدی که من دارم اینم دوره پستاش border نداره آیا می تونم همون کدی که قبلا دادینو بزارم یا نه باید کد رو بفرستم تا ببینید؟ ممنون میشم جواب بدین منتظر جواب شما هستم اگر اجازه داد کد رو براتون میفرستم
پاسخ: 
خاصیت های CSS قالب ها عمدتا با توجه به عنوان کلاس و آی دی آنها بر روی تگ های HTML تاثیر دارند، اگر عنوان کلاس ها بین دو قالب یکسان نباشد باید استایل اختصاصی و جدید تعریف شود که نیاز به بررسی دقیق سورس کدها است.
نویسنده: پـــرتو
۱۶:۲۲ ۱۴۰۰/۱۰/۱۷
سلام خسته نباشید ببخشید مزاحم میشم من قالبی ک بهتون دادم یادتون میاد؟کدش رو دارین؟میشه براش لطفا اگه میشه عنوان بزارین؟چون عنوان نداره ممنون میشم براش عنوان بزارین و به ایمیلم بفرستین اگ میشه ممنون میشم
پاسخ: 
خیر متاسفانه کد قالب حذف شده است، منظورتان عنوان متنی بالای هدر وبلاگ است؟ ترجیحا یک نمونه معرفی کنید.
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده می شود.
- کدها و اسکریپت های طولانی را در یک صفحه وب آنلاین قرار دهید تا امکان بررسی دقیق و خطایابی میسر باشد.
- ممکن است پاسخ سوالتان نیاز به کدنویسی داشته باشد، در این موارد مدت زمان بیشتری برای پاسخگویی مورد نیاز است.
- تمام دیدگاه ها خوانده شده و زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا تا هنگام انتشار دیدگاه شکیبا باشید.



 refresh
10 × 10
3 × 1
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
Bahar
در:
سلام ،کدام لیست ترتیب قرارگیری انها اهمیت نداره؟ ازبین اینها؟
۱۴۰۰/۱۰/۲۷

حدیثه یدی
در:
سلام خسته نباشید ، خیلی وبلاگ خوبی دارید، مطالبتون واقعا مفید بود .. من یک سوالی داشتم می‌خوام برای وبلاگم فونت های مختلف پیدا کنم...
۱۴۰۰/۱۰/۲۶

Fatemeh
در:
سلام چه طوری داخل این کادرهای که ایجاد میشه با این کد متن txt1, txt2 ,... نوشته شود؟
۱۴۰۰/۱۰/۲۵

Fatemeh
در:
سلام وقت بخیر چطوری میتونم موارد زیر رو انجام بدم؟! میشه کمک کنید ممنون! پوسته تارنمای فروشگاه آنالین لوازم خانگی را به صورت زیر...
۱۴۰۰/۱۰/۲۵

سپیده
در:
سلام مجدد لینک صفحه خدمت شما ممنون میشم راهنمایی کنید کدی که توی پیام قبلی ارسال کردین رو کجا باید بگذارم؟
۱۴۰۰/۱۰/۲۳

سپیده
در:
سلام و درود سایتم وردپرس هست و با المنتور طراحی کردم توی صفحه ویرایش حساب کاربران، میخوام فیلد تغییر آدرس ایمیل رو حذف کنم....
۱۴۰۰/۱۰/۲۲

حسین
در:
سلام ببخشید یک سوال داشتم چجوری میشه با زدن یک دکمه کمی بالاتر یا پایین تر برود یا با زدن نوشته ای...
۱۴۰۰/۱۰/۲۲

سپهر
در:
سلام استاد ضمن تشکر از آموزش خوب شما عرض شود بنده دارم یک ربات چت ساده می‌سازم که در بانک اطلاعات خود دو ستون...
۱۴۰۰/۱۰/۲۱

Fatemeh
در:
سلام روز بخیر این کد مشکلش چیه؟!
۱۴۰۰/۱۰/۱۹

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

مهلا
در:
من یه تکه کدی نوشتم با زبان php که 9 عکس دادم با سه سطر و ستون می‌خوام در خروجی این عکسها بطور تصادفی...
۱۴۰۰/۱۰/۱۵

امیرحسین
در:
سلام وقت بخیر بنده یه سوال خیلی مهمی داشتم که اگر کمک کنید و راهکاری به من بدید سوالم اینه که من دارم یه ربات...
۱۴۰۰/۱۰/۱۴

وحید
در:
سلام خسته نباشید و ممنون از شما من میخواستم بدونم چطوری میشود فیلم های طولانی در وبلاگ بگذاریم ممنون
۱۴۰۰/۱۰/۱۴

Fatemeh
در:
وقت بخیر متاسفانه من هر کدی مینویسم یه اشکالی داره این کد مشکلش چیه؟🤦🏻‍♀️
۱۴۰۰/۱۰/۱۲

نازنین
در:
اسکریپتی بنویسید که نام و نام خانوادگی و سال تولد شخص را دریافت کرده، علاوه بر نمایش نام و‌ نام خانوادگی در مرورگر، سن فرد...
۱۴۰۰/۱۰/۱۲

عباس صلاحی
در:
با سلام خدمت شما و تشکر از سایت خوبتون بنده یک table درام که سه ستون در کنار هم داره می خوام که وقتی...
۱۴۰۰/۱۰/۱۲

Fatemeh
در:
سلام وقت بخیر خسته نباشید این تیکه کد با دستور if چه مشکلی داره!؟
۱۴۰۰/۱۰/۱۲

بابایی
در:
سلام وقت بخیر این آدرس یکی از مقالاتی هست که داخل سایت گذاشتم میخوام یه تغییری بدم که این اعداد وسط لینک آدرس نباشه...
۱۴۰۰/۱۰/۱۲

elahe
در:
سلام وقتتون بخیر من در جدول پایگاه داده کتابخانه 4 تا ستون دارم که میخوام هر فیلد رو در یک لیبل بریزم در واقعه یک...
۱۴۰۰/۱۰/۱۲

m.b
در:
سلام مجدد تشکر بابت راهنمایی من یک مشکل دیگه برام بوجود آمد و اون اینکه بعد از ارسال اطلاعت به صفحه questions.php بر...
۱۴۰۰/۱۰/۱۱

m.b
در:
سلام من یک فرم طراحی کردم جهت ارسال سوال با صفحه questions.php با متد post به صفحه dbquestions.php ارسال میشود. این نمونه کد های...
۱۴۰۰/۱۰/۱۱

m.b
در:
با سلام ضمن تشکر از وب سایت خوبتان من مطابق کدهای شما عمل کردم و تمامی کدها رو کپی کردم و...
۱۴۰۰/۱۰/۱۱

fateme
در:
سلام ممنون از سایت خوبتون من سوالم اینه که چجوری داخل منو که با li هست لینک بزاریم تگه لطف کنید بگید ممنون میشم
۱۴۰۰/۱۰/۱۱

مهلا
در:
میخام با php دو تا عدد بنویسم که اگه عدد اول بزرگتر بود 5 بار چاپ کنه که عدد اول بزرگتراست. ممنون میشم جواب بدید...
۱۴۰۰/۱۰/۱۱

Fatemeh
در:
ممنون از پاسخگویی مشکل این یکی کد چیه ؟
۱۴۰۰/۱۰/۱۱

Fatemeh
در:
سلام وقت بخیر مشکل این کد چیه اجرا نمیشه؟
۱۴۰۰/۱۰/۱۱

Fatemeh
در:
سلام وقت بخیر چطوری میتونم یه کد با prompt.window بنویسم که هنگام باز شدن صفحه وب یک عدد از کاربر بگیره و رقم...
۱۴۰۰/۱۰/۱۰

zahra
در:
سلام وقتتون بخیر باشه من میخام از 1 تا 30 روز و برام چاپ کنه یعنی اگر ماه 31 روز بود 1 تا 31 را...
۱۴۰۰/۱۰/۰۸

پوریا
در:
سلام url سایت که گفتم بعد از نصب پلاگین دچار مشکل شد:
۱۴۰۰/۱۰/۰۵

پوریا
در:
سلام وقتتون بخیر اساتید محترم من پلاگین مرغ مگسخوار hummingbird رو روی سایتم نصب کردم (قالب استودیار) و دیدم که پولی شده و هیچیش...
۱۴۰۰/۱۰/۰۴

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