یکی از مهمترین مباحث در زمینه ی آموزش طراحی سایت، رعایت قواعد و نکات اصولی کدنویسی 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]
دسترسی سریع :
- آموزش قبلی : فیلم آموزشی آشنایی با تگ object در HTML
- آموزش بعدی : دوره مجازی آموزش حرفه ای طراحی صفحات وب (تبدیل PSD به HTML)
- لیست فیلم ها : فیلم های آموزش جامع HTML
متن فیلم آموزش قواعد و نکات اصولی در کدنویسی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 .
برای جداسازی نامها می توانید از گزینه های زیر استفاده کنید :
- جدا سازی با dash
[html]
<p class="intro-message">سلام آنلاینر</p>
[/html] - جدا سازی با underscore
[html]
<p class="intro_message">سلام آنلاینر</p>[/html]
- جدا سازی با 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 است.
پس به عنوان یک عادت خوب بهتر است همیشه فایل های خود را با حروف کوچک بنویسیم تا هنگام آدرس دهی دچار مشکل نشویم.
دسترسی سریع :
- آموزش قبلی : فیلم آموزشی آشنایی با تگ object در HTML
- آموزش بعدی : دوره مجازی آموزش حرفه ای طراحی صفحات وب (تبدیل PSD به HTML)
- لیست فیلم ها : فیلم های آموزش جامع HTML
25 دیدگاه دربارهٔ «فیلم آموزش قواعد و نکات اصولی در کدنویسی HTML»
عالی هستین شما عالییییییی.
عاشقتونم
مممنون از این همه اموزش عالی
سلام و خدا قوت.
فایل های 48 و 49 از آموزش جامع HTML با خطای (NOT F0UND) مواجه میشود،
اگه ممکنه بنده رو راهنمایی کنید؟
باتشکر
با عرض سلام و احترام خدمت شما
لطفا مجدد اقدام به دانلود بفرمایید؛ مشکلی موقت بوده است که برطرف شده است.
خیلی خوبه ، ایشالله این روند ادامه داشته باشه
فوق العاده بود ممنون
سلام خسته نباشید
بنده تقریبا آشنایی کامل با htmlوcssوjquery را دارم ولی هیچ سابقه ی کاری ندارم و علاقه ی شدیدی به طراحی سایت دارم و میخوام بصورت حرفه ای شروع کنم با سیستم مدیریت محتوا وردپرس هم تقریبا آشنایی دارم
حتی حاضرم برای یادگیری مدتی را در شرکتی بدون دریافت حقوق هم کار کنم تا اینکه یاد بگیرم
اگه امکانش هست راهنمایی کنید از کجا شروع کنم
با تشکر
سلام.از طریق فرم تماس با ما رزومه تون رو ارسال کنید.
از ویدیو های خوبتون ممنون
لظفا در صورت امکان این چنین آموزش های فارسی رو در زمینه های لینوکس – ابونتو قرار بدید
باتشکر فراوان
با سلام
گاهی اوقات ممکن است بخاطر ترافیک شبکه این اتفاق بیفتد و یا همچنین ممکن است بخاطر کاربری با پروکسی و یا آی پی غیر ایران باشد. توصیه می کنیم فیلمهای آموزشی را دانلود نموده و سپس تماشا بفرمایید بفرمایید.
عالی بود ممنونم
با سلام و احترام
لطفا بر اساس لیست صفحه ی https://onliner.co/html-video-tutorials/ شماره و عنوان فیلم آموزشی ای که مشکل دارد را اعلام بفرمایید تا بررسی شود.
سلام
اتفاقی این سایت رو پیدا کردم، فیلماتونو دانلود کردم چندتاشو دیدم خیلی خوووووووووووب بود. HTML5 هم آموزش میدین؟
با سلام
از لطف شما تشکر می کنیم.
بخش های آموزش جدید نیز خواهیم داشت. شما میتوانید در خبرنامه ی پیامکی و یا ایمیلی سایت عضو بشوید تا به محض انتشار سرفصلی با محتوای آموزشی جدید از آن مطلع شوید.
اینو یه بار دیگه هم گفتم واقعا اموزشاتون فوق العاده هستن خیلی خیلی ممنون هر چی تشکر کنم انصافا کمه
عالی عالی عالی عالی عالی
سلام یه سوال داشتم
میشه داخل فایل php کدای html رو هم نوشت و کلا یک فایل درست کرد؟اگه اره کدوم روش بهتره این که جدا نوشته بشه یا اینکه هم php هم html با هم نوشته شه؟
احتمال داره اموزش php رو هم تو سایت بذارید؟
سلام
در مورد سوال تون، بله این کار رو میشه کرد، منتها اینکه کدوم روش بهتره، باید بگم که سوال اشتباه هست!
———
آموزش های PHP را حتما خواهیم گذاشت. شما حتما در خبرنامه های پیامکی و ایمیلی عضو شوید تا از جدیدترین سرفصل های آموزشی و دوره های آموزشی باخبر شوید.
ممنون
سلام اموزشاتون بی نظیرن واقعا که عالین خیلی ممنون
گفته بودید یک سری تمریناتم میذارید اگه این طور بشه که خیلی خوبه.
ممکنه اموزش جی کوئری و جاوا اسکریپت هم بذارید؟
بازم ازتون ممنونم
من سایت شما را به تمام شاگرد هایم معرفی کردم.
امروزه سایتی که رایگان و خوب آموزش بده کم پیدا می شود.
خدا قوت برادران
ایول
کارتون عالیه من همشونو گرفتم خیلی ممنون باید بشیم خوب یاد بگیرم ..
راستی یه سوال اگر من همه این آموزش ها رو ببینم میتونم html رو کامل یاد بگیرم یا هنوز ادامه داره؟
اگر میشه آمزوش CSS رو هم کامل کنین D:
خیلی ممنون …
یه دنیا ممنون…
با تشکر از همراهی شما.
فیلم های آموزشی سی اس اس حدود 80 مورد هستند که در حال انتشار هستند (تولید آن ها قبلا به اتمام رسیده است و در حال مونتاژ و انتشار هستیم)
برای یادگیری حرفه ای نیاز به انجام یکسری تمرینات دارید؛ که ما در حال تدارک این تمرینات برای کاربران هستیم تا کاربران تمرینات مربوطه را انجام بدهند و سوالات شان را برایمان بفرستند. در حقیقت سورپرایزهای بزرگی ظرف دو هفته ی آینده برای کاربران مان داریم.
سپاس فراوان از شما
سری html تکمیل شده ؟
بله، فعلا این سری تمام شده است تا سری های آینده و ویژه ای که برای html منتشر خواهیم کرد.