فیلم آموزش قواعد و نکات اصولی در کدنویسی HTML

نکات کاربردی طراحی سایت در html

یکی از مهمترین مباحث در زمینه ی آموزش طراحی سایت، رعایت قواعد و نکات اصولی کدنویسی html است. همانطور که قبلاً در فیلم آموزشی معرفی سرویس validator کنسرسیوم وب بیان کردیم، مطمئناً اگر قواعد کدنویسی را رعایت نکنید، کدهای شما در W3C نامعتبر خواهند بود. در این فیلم آموزشی html، شما با روش های نامگذاری تگ ها، صفات و فایل هایی که در وب برای آپلود یا آدرس دهی استفاده می کنید، آشنا خواهید شد.

[hdplay id=43]

برای دانلود فیلم آموزشی و اسنیپت های آموزش مربوطه از لینک های زیر استفاده کنید :

[free_vip]
[video_download cat=’html’ url=’http://dl.onliner.ir/html-videos/basic-tips-for-writing-html.mp4′]دانلود فیلم آموزش قواعد و نکات اصولی در کدنویسی HTML [/video_download]
[/free_vip]

دسترسی سریع :

متن فیلم آموزش قواعد و نکات اصولی در کدنویسیHTML

در html قواعدی هستند که باید آن را رعایت کنید تا کد های شما استاندارد باشند :

قواعد اول :

برای معتبر بودن کدها در Html باید تگ ها و صفات را با حروف کوچک بنویسید و از نوشتن حروف بصورت بزرگ خودداری فرمایید. به عنوان مثال اگر ما تگ p را به صورت زیر بنویسیم (بزرگ بنویسیم)

[html]
<P>سلام آنلاینر</P>
[/html]

 

یا اگر صفت class را به صورت زیر بنویسیم (بزرگ بنویسیم )

[html]
<p CLASS="intro">سلام آنلاینر</p>
[/html]

و با http://validator.w3.org کدهای خود را تست کنیم، می بینیم که کد های ما استاندارد نیستند.

قواعد دوم:

برای نوشتن کلاس یا آیدی نمیتوانیم بین کلمات فاصله (space) ایجاد کنیم. ایجاد فاصله در classها به معنای ایجاد یک کلاس مجزا است. به عنوان مثال :

[html]
<p class="intro message">سلام آنلاینر</p>
[/html]

اگر نام کلاس خود را اینگونه وارد کنید به معنی این است که دو class برای تگ p اعمال کرده ایم، یکی intro و یکی message .

برای جداسازی نامها می توانید از گزینه های زیر استفاده کنید :

  1. جدا سازی با dash

    [html]
    <p class="intro-message">سلام آنلاینر</p>
    [/html]

  2. جدا سازی با underscore

    [html]
    <p class="intro_message">سلام آنلاینر</p>

    [/html]

  3. جدا سازی با camelcase

    [html]

    <p class="IntroMessage">سلام آنلاینر</p>
    [/html]

یعنی حروف اول هر کلمه را بزرگ بنویسیم.

نکته : در وب وقتی فایلی را میخواهیم آپلود کنیم یا به آن آدرس بدهیم، نام فایل نباید دارای کاراکتر space باشد و باید از روش های جداسازی بالا استفاده کنیم :

[html]

<link rel="shortcut icon" href="https://onliner.co/favicon-onliner.png" />

[/html]

نکته : در صفاتی مانند alt و title و … میتوان مقادیر را با فاصله از هم جدا کرد، چون مقادیر صفات، متن دلخواه هستند.

قواعد سوم :

ما باید توجه داشته باشیم که بعضی سیستم عامل ها در بزرگی و کوچکی کلمات تفاوت می گذارند، به عنوان مثال اگر ما یک عکس به نام Favicon-onliner.png داریم نمی توانیم در سیستم عامل لینوکس در هنگام آدرس دهی از favicon-onliner.png استفاده کنیم زیرا سیستم عامل لینوکس تک تک کاراکترها را جدا تفسیر می کند و case sensitive است.

پس به عنوان یک عادت خوب بهتر است همیشه فایل های خود را با حروف کوچک بنویسیم تا هنگام آدرس دهی دچار مشکل نشویم.

دسترسی سریع :

به این صفحه رتبه دهید

25 دیدگاه دربارهٔ «فیلم آموزش قواعد و نکات اصولی در کدنویسی HTML»

  1. عالی هستین شما عالییییییی.
    عاشقتونم
    مممنون از این همه اموزش عالی

  2. آواتار monttaghemeh_karrar
    monttaghemeh_karrar

    سلام و خدا قوت.

    فایل های 48 و 49 از آموزش جامع HTML با خطای (NOT F0UND) مواجه میشود،
    اگه ممکنه بنده رو راهنمایی کنید؟
    باتشکر

    1. آواتار گروه آموزش طراحی سایت
      گروه آموزش طراحی سایت

      با عرض سلام و احترام خدمت شما
      لطفا مجدد اقدام به دانلود بفرمایید؛ مشکلی موقت بوده است که برطرف شده است.

  3. سلام خسته نباشید
    بنده تقریبا آشنایی کامل با htmlوcssوjquery را دارم ولی هیچ سابقه ی کاری ندارم و علاقه ی شدیدی به طراحی سایت دارم و میخوام بصورت حرفه ای شروع کنم با سیستم مدیریت محتوا وردپرس هم تقریبا آشنایی دارم
    حتی حاضرم برای یادگیری مدتی را در شرکتی بدون دریافت حقوق هم کار کنم تا اینکه یاد بگیرم
    اگه امکانش هست راهنمایی کنید از کجا شروع کنم
    با تشکر

  4. از ویدیو های خوبتون ممنون
    لظفا در صورت امکان این چنین آموزش های فارسی رو در زمینه های لینوکس – ابونتو قرار بدید
    باتشکر فراوان

  5. آواتار گروه آموزش طراحی سایت
    گروه آموزش طراحی سایت

    با سلام
    گاهی اوقات ممکن است بخاطر ترافیک شبکه این اتفاق بیفتد و یا همچنین ممکن است بخاطر کاربری با پروکسی و یا آی پی غیر ایران باشد. توصیه می کنیم فیلمهای آموزشی را دانلود نموده و سپس تماشا بفرمایید بفرمایید.

  6. آواتار فاطیما
    فاطیما

    سلام
    اتفاقی این سایت رو پیدا کردم، فیلماتونو دانلود کردم چندتاشو دیدم خیلی خوووووووووووب بود. HTML5 هم آموزش میدین؟

    1. آواتار گروه طراحی سایت
      گروه طراحی سایت

      با سلام
      از لطف شما تشکر می کنیم.
      بخش های آموزش جدید نیز خواهیم داشت. شما میتوانید در خبرنامه ی پیامکی و یا ایمیلی سایت عضو بشوید تا به محض انتشار سرفصلی با محتوای آموزشی جدید از آن مطلع شوید.

  7. آواتار رائیکا
    رائیکا

    اینو یه بار دیگه هم گفتم واقعا اموزشاتون فوق العاده هستن خیلی خیلی ممنون هر چی تشکر کنم انصافا کمه

  8. آواتار رائیکا
    رائیکا

    سلام یه سوال داشتم
    میشه داخل فایل php کدای html رو هم نوشت و کلا یک فایل درست کرد؟اگه اره کدوم روش بهتره این که جدا نوشته بشه یا اینکه هم php هم html با هم نوشته شه؟
    احتمال داره اموزش php رو هم تو سایت بذارید؟

    1. آواتار گروه طراحی سایت
      گروه طراحی سایت

      سلام
      در مورد سوال تون، بله این کار رو میشه کرد، منتها اینکه کدوم روش بهتره، باید بگم که سوال اشتباه هست!
      ———
      آموزش های PHP را حتما خواهیم گذاشت. شما حتما در خبرنامه های پیامکی و ایمیلی عضو شوید تا از جدیدترین سرفصل های آموزشی و دوره های آموزشی باخبر شوید.

  9. آواتار رائیکا
    رائیکا

    سلام اموزشاتون بی نظیرن واقعا که عالین خیلی ممنون
    گفته بودید یک سری تمریناتم میذارید اگه این طور بشه که خیلی خوبه.
    ممکنه اموزش جی کوئری و جاوا اسکریپت هم بذارید؟
    بازم ازتون ممنونم

  10. من سایت شما را به تمام شاگرد هایم معرفی کردم.
    امروزه سایتی که رایگان و خوب آموزش بده کم پیدا می شود.
    خدا قوت برادران

  11. کارتون عالیه من همشونو گرفتم خیلی ممنون باید بشیم خوب یاد بگیرم ..
    راستی یه سوال اگر من همه این آموزش ها رو ببینم میتونم html رو کامل یاد بگیرم یا هنوز ادامه داره؟
    اگر میشه آمزوش CSS رو هم کامل کنین D:
    خیلی ممنون …
    یه دنیا ممنون…

    1. آواتار گروه طراحی سایت
      گروه طراحی سایت

      با تشکر از همراهی شما.
      فیلم های آموزشی سی اس اس حدود 80 مورد هستند که در حال انتشار هستند (تولید آن ها قبلا به اتمام رسیده است و در حال مونتاژ و انتشار هستیم)
      برای یادگیری حرفه ای نیاز به انجام یکسری تمرینات دارید؛ که ما در حال تدارک این تمرینات برای کاربران هستیم تا کاربران تمرینات مربوطه را انجام بدهند و سوالات شان را برایمان بفرستند. در حقیقت سورپرایزهای بزرگی ظرف دو هفته ی آینده برای کاربران مان داریم.

    1. آواتار گروه طراحی سایت
      گروه طراحی سایت

      بله، فعلا این سری تمام شده است تا سری های آینده و ویژه ای که برای html منتشر خواهیم کرد.

پاسخ دادن به پوربا زارعی لغو پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مشاوره رایگان
Scroll to Top