طراحی وب سایت

آشنایی با کد مرتبط با تعیین نسخه اچ تی ام ال (html)

به طور کلی ساختار یک صفحه اچ تی ام ال به صورت زیر است: <!DOCTYPE html> <html> <head> <title>Title of Your Page</title> </head> <body> </body> </html> در اولین خط از کد دستوری تحت عنوان می بینیم (عبارت DOCTYPE مخفف واژگان Document Type به معنی "نوع سند" است). اگر از این دستور در صفحات خود استفاده نکنیم باز هم صفحه در مرورگر نمایش داده می شود اما این در حالی است که این دستور به مرورگر کمک می کند تا صفحه وب را به طور کامل و بدون هیچ مشکلی نمایش داده و نوع و نسخه مورد استفاده اچ تی ام ال را نیز برای مرورگر مشخص می کند. به طور مثال همانطور که در کد فوق ملاحظه می شود اگر بخواهیم از آخرین نسخه اچ تی ام ال که 5 است استفاده کنیم می بایست این دستور را به صورت بنویسیم. از این پس کلیه مرورگرها متوجه خواهند شد که با یک صفحه ای از وب رو به رو هستند که با زبان اچ تی ام ال 5 نوشته شده است. در اینجا نیاز است تا با مفهوم Parse آشنا شویم. در واقع در برنامه نویسی زمانیکه برنامه، اپلیکیشن و یا حتی مرورگر که این نوع برنامه است چیزی را تجزیه و تحلیل می کند، به این فرایند Parse شدن می گویند (لازم به ذکر است که معنی لغوی این واژه نیز "تجزیه شدن" است). لازم به ذکر است که دستور DOCTYPE را هم می توان با حروف بزرگ و هم با حروف کوچک به صورت doctype نوشت (توجه داشته باشیم که علامت ! را پیش از دستور DOCTYPE به هیچ وجه فراموش نکنیم). حال زمانیکه مرورگری مثل فایرفاکس با صفحه ای از جنس اچ تی ام ال رو به رو شود که حاوی دستور است، متوجه می شود که با یک سندی رو به رو است که با زمان اچ تی ام ال 5 نوشته شده است بنابراین از این پس کلیه تگ ها را بر اساس نسخه 5 اچ تی ام ال اصطلاحاً Parse می کند و سپس به کاربر نمایش می دهد. اگر بخواهیم کد فوق را برای نسخه 4.01 بازنویسی کنیم کدی به شکل زیر خواهیم داشت: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Title of Your Page</title> </head> <body> </body> </html> و اگر بخواهیم مثلاً کد فوق را برای xhtml 1.0 بازنویسی کنیم کد فوق به صورت زیر در خواهد آمد: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Title of Your Page</title> </head> <body> </body> </html> نکته ای که همواره در مورد تعیین نسخه اچ تی ام ال می بایست مد نظر قرار دهیم این است که این خط از کد می بایست پیش از هر کد دیگری قرار گرفته و حتی یک فاصله هم پیش از آن قرار نگیرد. در ضمن به هیچ وجه نمی بایست حتی کامنت هم پیش از این خط از کد قرار دهیم. از آن جا که آخرین نسخه زبان اچ تی ام ال نسخه 5 است بنابراین در این سری از آموزش ها همواره از دستور استفاده خواهیم کرد زیرا نه تنها نوشتن آن ساده تر است بلکه با استفاده از آن به کلیه امکانات اضافه شدن در نسخه 5 زبان اچ تی ام ال دسترسی خواهیم داشت.
نقاط ضعف محیط های یکپارچه برنامه نویسی

به طور کلی از نقطه نظر سهولت در استفاده، سرعت در کدنویسی، خطایابی و ... IDE ها یا همان محیط های برنامه نویسی یکپارچه آنقدر امکانات فراوانی در اختیار برنامه نویسان قرار می دهند که به سختی می توان نقطه ضعفی برای آن ها متصور شد. اما اگر از نقطه نظر اصول برنامه نویسی بخواهیم به این قضیه نگاه کنیم، کلیه IDE ها دارای یک نقطه ضعف بزرگ هستند و آن هم این که برنامه نویسان مبتدی را «تنبل» می کنند.به عبارت دیگر برنامه نویسان مبتدی شاید در ابتدای راه برنامه نویسی استفاده از IDE هایی همچون دریم ویور را خیلی مفید ببینند، اما این در حالی است که در دراز مدت این گروه از برنامه نویسان آنقدر به نرم افزار مربوطه عادت می کنند که اگر بخواهند روزی بخشی ازکدهای خود را با نرم افزاری همچون Notepad ویرایش کنند از عهده این کار بر نخواهند آمد چرا که بیشتر به یک محیط بصری عادت کرده اند و از ماهیت و ساختار کدها خیلی با خبر نیستند.طبق گزارش هایی که از برنامه نویسان حرفه ای در سرتاسر دنیا به دست آمده است، مشخص شده است که اکثر ایشان نه تنها در ابتدای راه فراگیری یک زبان برنامه نویسی از نرم افزارهای ویرایش متنی همچون Notepad استفاده کرده اند، بلکه پس از تسلط به زبان مد نظرشان باز هم استفاده از نرم افزارهای ویرایش متن ساده را کاربردی تر دیده اند.از سوی دیگر با صحبت با شرکت های برنامه نویسی مطرح ایرانی، متوجه شدیم که اکثر ایشان حتی اجازه نصب یک IDE پیشرفته را هم به برنامه نویسان خود در شرکت نمی دهند.بنابراین در این سری از آموزش ها مبنا را بر یک ویرایشگر متن ساده همچون Notepad++ یا Brackets قرار می دهیم به طوری که مجبور شویم کلیه کدهای مد نظر را به صورتی دستی وارد کنیم.
نرم افزارهای مورد نیاز برای برنامه نویسی به زبان اچ تی ام ال (html)

نکته ای که در ارتباط با فراگیری زبان اچ تی ام ال وجود دارد این است که برای فراگیری این زبان و بالتبع ساخت یک وب سایت استاتیک به هیچ نوع نرم افزار غیر رایگانی و یا نرم افزار خاصی نیاز نداریم که می شود گفت این یکی از محاسن فراگیری این زبان است.به عبارت دیگر برای نوشتن کدهای اچ تی ام ال نیاز به یک نرم افزار ویرایش متن و برای نمایش کدهایی که می نویسیم نیاز به یک مرورگر وب داریم. خوشبختانه هر دو نرم افزاری که در بالا به آن ها اشاره شد در هر سیستم عاملی به صورت پیش فرض وجود دارند. اگر سیستم عامل ما ویندوز باشد نرم افزاری تحت عنوان Notepad وجود دارد که می توان برای ویرایش کدهای اچ تی ام ال از آن استفاده کرد. در این سیستم عامل مروگری تحت عنوان اینترنت اکسپلورر وجود دارد که کار نمایش صفحات وب را برای ما انجام خواهد داد. برای دسترسی به نرم افزار Notepad می توان طبق تصویر زیر عمل کنیم: همانطور که در تصویر فوق مشخص است، پس از ورود به بخش Start ویندوز وارد All Programs شده سپس گزینه Accessories را انتخاب می کنیم. زیر شاخه این منوی گزینه ای وجود دارد تحت عنوان Notepad که با یک بار کلیک کردن روی آن این برنامه اجرا خواهد شد: می بینیم که با نرم افزاری بسیار ساده اما در عین حال فوق العاده قدرتمند رو به رو هستیم.چنانچه از سیستم عامل مکینتاش استفاده می کنیم، می توانیم از نرم افزار ویرایش متنی تحت عنوان TextEdit استفاده نماییم.به منظور نمایش نتایج صفحات وبی که طراحی می کنیم می توانیم از هر مرورگری که روی سیستم عامل خود نصب داشته باشیم استفاده کنیم. به طور مثال در سیستم عامل ویندوز می توان از مرورگر اینترنت اکسپلورر و در سیستم عامل مکینتاش از مرورگر سافاری استفاده کرد. مرورگرهای دیگری هم وجود دارند که قابلیت نصب برای اکثر سیستم عامل ها را دارند که از آن جمله می توان به مرورگر های فایرفاکس، گوگل کروم و اپرا اشاره کرد.
نرم افزارهای تخصصی طراحی وب

علاوه بر نرم افزارهای ساده ای که برای کدنویسی صفحات وب می توان مورد استفاده قرار داد، شرکت های مطرح تولید نرم افزار اقدام به طراحی نرم افزارهایی نموده اند که فرایند کدنویسی را بسیار ساده نموده بطوریکه برنامه نویس به هیچ وجه نیاز حفظ کردن کلیه دستوارت ندارد. گاهی اوقات شرایط از این هم به مراتب راحت تر شده بطوری که برنامه نویس به جای آن که کدهای مرتبط با مثلا یک دکمه را وارد کند، به سادگی می تواند به صورت کاملاً «بصری» روی یک دکمه کلید کرده و آن دکمه ایجاد شود.به طور کلی این دست از نرم افزارها تحت عنوان IDE شناخته می شوند. این اصطلاح مخفف واژگان Integrated Development Environment به معنی "محیط توسعه یکپارچه" است.از جمله این IDE ها می توان به نرم افزار شرکت معروف ادوبی تحت عنوان Adobe Dreamweaver اشاره کرد که آخرین نسخه آن (در زمان نوشتن این آموزش که سال 1392 است) نسخه CC است و این در حالی است که این نرم افزار غیر رایگان است. در حقیقت با استفاده از این نرم افزار می توان به سرعت یک وب سایت را طرحی نموده و روی شبکه اینترنت قرار داد: این نرم افزار امکان نمایش بصری صفحات اچ تی ام ال را نیز علاوه بر نمایش کدها برای برنامه نویس فراهم آورده است بطوری که بدون نیاز به مرورگر می توان خروجی کدهای اچ تی ام ال را مشاهده کرد (لازم به ذکر است که نتایجی صفحات وب که داخل این نرم افزار مشاهده می کنیم خیلی دقیق نیستند و برای دیدن نتیجه اصلی می بایست از یک مرورگر استفاده کرد).شرکت مایکروسافت یک IDE قدرتمند تحت عنوان Microsoft Expression Web به دنیا معرفی کرده است که علاوه بر زبان های .NET از زبان های اچ تی ام ال، سی اس اس و پی اچ پی هم پشتیبانی می کند: شرکت ادوبی که غالب محصولات آن غیر رایگان است، اقدام به طراحی یک ویرایشگر متن تحت عنوان Brackets نموده است که علاوه بر آن که رایگان است از زبان های اچ تی ام ال، سی اس اس، و پی اچ پی به خوبی پشتیبانی می کند و همچنین دارای محیط گرافیکی ساده و جذابی می باشد: علاوه بر این نرم افزار، می توان به نسخه پیشرفته نرم افزار Notepad تحت عنوان Notepad++ اشاره کرد که به صورت رایگان قابل استفاده است: همانطور که می بینیم رابط گرافیکی این نرم افراز بسیار شبیه به نرم افزار Notepad است با این تفاوت که امکانات بیشتری در اختیار برنامه نویس قرار می گیرد (ممکن است که این سوال برای برنامه نویسان مبتدی پیش آید که آیا این نرم افزار نسخه Notepad+ هم دارد یا خیر. در حقیقت در برنامه نویسی زمانیکه بخواهیم یک واحد بیشتر را نمایش دهیم از دو علامت به علاوه پشت سر هم استفاده می کنیم. مثلا زمانیکه زبان برنامه نویسی C تکمیل شد و امکانات بیشتری به آن اضافه شد زبان C++ آمد. این بدان معنی است که زبان C++ نسخه بعدی زبان C است. بنابراین نرم افزار Notepad++ نسخه پیشرفته نرم افزار Notepad است).از برخی ویژگی های نرم افزار Notepad++ می توان به موارد زیر اشاره کرد:• رایگان بودن• پشتیبانی از اکثر زبان های برنامه نویسی• سهولت در استفاده از آن• Code Hinting • Code Highlighting به طور کلی منظور از Code Hinting این است که نرم افزار در حین کدنویسی به برنامه نویس کدهای مرتبط با کدی که می نویسد را نشان می دهد.منظور از Code Highlighting این است که نرم افزار بخش های مختلف کد را به رنگ های مختلفی نشان می دهد تا برنامه نویس بتواند به سادگی کدهایی را که نوشته را تشخیص دهد. چرا نمی توان از نرم افزای همچون Word استفاده کرد؟در کدنویسی ما صرفاً نیاز به متن ساده یا اصطلاحاً Plain Text داریم. در اسنادی که با نرم افزاری همچون Word شرکت مایکروسافت نوشته می شوند اطلاعاتی اضافی همچون Bold, Italic و ... به کدهایی که می نویسیم اضافه می شوند که کاملاً غیر ضروری هستند. بنابراین به هیچ وجه استفاده از این نرم افزار برای کدنویسی استفاده نخواهیم کرد.
موارد تکمیلی زبان اچ تی ام ال (html): زبان پی اچ پی (PHP)

پس از آن که توانستیم وب سایتی کاملاً جذاب با استفاده از زبان های اچ تی ام ال و جاوا اسکریپت به علاوه سی اس اس طراحی کنیم باز هم وب سایت ما یک وب سایت استاتیک خواهد بود. در صورتی که بخواهیم تمایزی مابین یک وب سایت استاتیک با یک وب سایت دینامیک قائل شویم بایستی بگوییم که یک وب سایت استاتیک به هیچ وجه با کاربر تعامل نخواهد داشت. به عبارت دیگر کاربر فقط و فقط این امکان را خواهد داشت تا اطلاعاتی که برای مشاهده در نظر گرفته شده اند را روئیت نماید اما این در حالی است که وب سایت های دینامیک این امکان را به کاربران می دهند تا بتوانند در سایت ثبت نام کنند، وارد ناحیه کاربری خود شوند، در خبرنامه ثبت نام کنند، به پایگاه داده مرتبط با سایت دسترسی پیدا کنند و بسیاری امکانات دیگر.برای آنکه بخواهیم وب سایت دینامیک طراحی کنیم مجبور به استفاده از زبان های دیگری هستیم که برای این کار طراحی شده اند که از آن جمله می توان به زبان های پی اچ پی، دات نت، جاوا، کلدفیوژن و ... اشاره کرد. محبوب ترین زبانی که برای طراحی وب سایت های دینامیک مورد استفاده قرار می گیرد زبان پی اچ پی است که متن باز بوده، رایگان است، فراگیری آن راحت است و در نهایت به خوبی با زبان اچ تی ام ال قابل ادغام می باشد.زبان پی اچ پی هم به مانند زبان جاوا اسکریپت زبانی Scripting است. به عبارت دیگر در پاسخ به یک رویداد یا درخواست کاری را انجام می دهد. تنها تفاوتی که زبان پی اچ پی با زبان جاوا اسکریپت دارد این است که زبان جاوا اسکریپت یک زبان سمت کاربر است اما این در حالی است که زبان پی اچ پی یک زبان سمت سرور است. به عبارت دیگر زبان جاوا اسکریپت در مرورگر کاربر اجرا می شود اما زبان پی اچ پی وب اپلیکیشنی تحت عنوان پی اچ پی اجرا می گردد که روی سرور نصب است.در واقع از آنجا که زبان پی اچ پی ساختار خاص خود را دارا است و به کارگیری از آن نیازمند آشنایی با مفاهیم دیگری همچون وب سرور، برنامه نویسی شیئ گرا، لوکال هاست و ... دارد، در این دوره مورد بررسی قرار نخواهد گرفت.
موارد تکمیلی زبان اچ تی ام ال (html): زبان جاوا اسکریپت (JavaScript)

پس از آن که توانستیم با موفقیت زبان اچ تی ام ال و سی اس اس را فرا بگیریم، در واقع توانسته ایم حداقل های طراحی یک سایت استاتیک را فرا بگیریم. در این مرحله اگر بخواهیم عناصر قرار گرفته روی صفحات سایت خود را متحرک ساخته و به نوعی از انیمیشن در صفحات سایت خود استفاده کنیم نیاز به زبانی تحت عنوان JavaScript داریم (به خاطر داشته باشیم که زبان جاوا اسکریپت با زبان جاوا فرق می کند).در واقع زبان جاوا اسکریپت یک زبان Scripting و یک زبان برنامه نویسی محسوب نمی شود. به طور کلی منظور از زبان های Scripting این است که این زبان ها در پاسخ به یک رویداد یا درخواست کاری را انجام می دهند اما این در حالی است که یک زبان برنامه نویسی این امکان را به ما می دهد تا بتوانیم بدون وجود یک درخواست نیز کاری را انجام دهیم. نمونه دیگری از زبان های Scripting زبان پی اچ پی است که در ادامه با آن بیشتر آشنا می شویم.به طور مثال اگر بخواهیم وب سایتی که در آن از زبان جاوا اسکریپت استفاده شده است را نام ببریم می توان به سایت http://www.howarths.nl اشاره کرد که در آن منوها با استفاده از زبان جاوا اسکریپت به گونه ای زیبا طراحی شده اند.لازم به ذکر است که تسلط به زبان جاوا اسکریپت نیازمند دوره ای اختصاصی است و مسلماً چنانچه بخواهیم در طول این دوره به آن اشاره کنیم فقط موجبات سر در گمی برنامه نویسان مبتدی را فراهم خواهیم آورد بنابراین در طول این دوره به زبان جاوا اسکریپت نخواهیم پرداخت.
موارد تکمیلی زبان اچ تی ام ال (html): الگوهای آبشاری (CSS)

چنانچه بخواهیم صفحاتی از وب که با زبان اچ تی ام ال نوشته می شوند را با مثالی از دنیای واقعی مقایسه کنیم به نظر می رسد که بهترین مثال یک ساختمان است. در واقع زمانی که یک ساختمان می سازیم، چارچوب اصلی ساختمان جایگاه در، پنجره ها، اتاق ها و ... را مشخص می سازد اما این در حالی است که اگر صرفاً به سازه ساختمان اکتفا کنیم ساختمانی خواهیم داشت که از هرگونه زیبایی ظاهری عاری است: به عبارت دیگر وقتی وارد اتاقی شویم آجرهای سازنده ساختمان را مشاهده خواهیم کرد. در و پنجره ها اگرچه که از ساختمان مواقبت می کنند اما این در حالی است که رنگ نشده اند و اصلا زیبا نیستند. حال برای آنکه ساختمان ما زیبا تر به نظر برسد، نمای ساختمان را سنگ می کنیم، دیوارها را ابتدا گچ کاری کرده سپس رنگ می کنیم و در کل هر آنچه که به زیباتر شدن ساختمان کمک کند را در اختیار خواهیم گرفت: در مورد زبان اچ تی ام ال هم قضیه به همین صورت است. در واقع با استفاده از اچ تی ام ال فقط می توانیم متون را روی یک صفحه مرورگر وب به نمایش در آوریم بدون آنکه رنگ و اندازه و شکل خاصی برای متون، جداول، فرم ها، منوها و ... بتوانیم در نظر بگیریم. چیزی که در اینجا به کمک ما می آید CSS است که مخفف واژگان Cascading Style Sheet است. الگوهای آبشاری یا همان سی اس اس ها در کنار زبان اچ تی ام ال این امکان را به برنامه نویس یا طراح وب می دهند تا بتواند چیدمان، رنگ، اندازه، نوع فونت و بسیاری از امکانات دیگر را در مورد عناصر اچ تی ام ال اعمال کند و بالتبع صفحات به مراتب زیباتری نسبت به صفحاتی که صرفاً با زبان اچ تی ام ال طراحی می شوند را ایجاد کند. برای آنکه به اهمیت سی اس اس در طراحی وب بیشتر پی ببریم در ادامه یک صفحه اچ تی ام ال ساده را خواهیم دید که به هیچ وجه سی اس اس در آن استفاده نشده است: می بینیم که متون به خوبی نمایش داده شده اند اما اصلا زیبا به نظر نمی رسند. حال با استفاده از کمی کدهای سی اس اس سعی می کنیم که صفحه را کمی زیباتر جلوه دهیم: می بینیم که فقط با استفاده از 5 دستور ساده سی اس اس صفحه وب ما چقدر زیباتر به نظر می رسد.لازم به ذکر است که در این دوره آموزشی تکنیک های کاربردی سی اس اس نیز به منظور بهینه کردن ظاهر صفحات وب نیز مورد بررسی دقیق قرار خواهند گرفت.
تاریخچه زبان اچ تی ام ال (html)

آقای تیم برنرز لی در سال 1989 شبکه جهانی وب را طرح ریزی کرد. در واقع هدف اصلی وی فراهم آوردن ساز و کاری بود که از آن طریق محقیق بتوانند نتایج تحقیقات خود را با یکدیگر به اشتراک بگذارند. سپسزبان نشانه گذاری فرامتنی یا HyperText Markup Language که به صورت مختصر HTML خوانده می شود را طرح ریزی نمود و در نهایت در سال 1991 این زبان به طور رسمی به دنیا معرفی شد و این زبان به جایی رسید که دنیای اینترنت بدون آن بی معنا است. به طور کلی زبان اچ تی ام ال زبان قابل فهم برای کلیه مرورگرها است. در حقیقت مرورگر کدهای اچ تی ام ال را تفسیر نموده و به متونی تبدیل می کند که برای کاربر قابل مشاهده باشند. عبارت Hyper در مقابل عبارت Linear قرار دارد. منظور از Linear ساختاری "خطی" است. به عبارت دیگر فرض کنیم یک زبان برنامه نویسی است که ساختاری خطی دارد و در آن کارها یکی پس از دیگری انجام می شوند. فرض کنیم دو دستور داریم: دستور الف و دستور ب. حال مادامیکه دستور الف انجام نشده باشد قادر نخواهیم بود دستور ب را اجرا کنیم. اما قضیه در مورد زبان اچ تی ام ال که یک زبان Hyper است فرق می کند به این شکل که در هر کجای وب و در هر زمانی که باشیم می توانیم به بخش دیگری رفته و به هیچ وجه نیاز نیست تا دستورات یکی پس از دیگری انجام شوند. به طور مثال اصلاً نیازی نیست تا اول به سایت گوگل رفته سپس وارد سایت یاهو شویم (لازم به ذکر است که معنی لغوی Hyper عبارت است از ماوراء، فوق، بالا و ...). کلمه Text که گویا است و به معنی "متن" است. به طور کلی Hypertext به منزله متنی است که با کلیک روی آن می توان به صفحه دیگری رفت. منظور ازLanguageMarkup زبانی است که در آن، متن کاری بیش از قرار گرفتن روی صفحه مروگر انجام می دهد و از سوی دیگر به جای متون می توان از تصاویر، لینک ها، جداول، منوها و ... استفاده کرد. همانطور که پیش از این توضیح داده شد زبان اچ تی ام ال یک زبان Markup است. به عبارت دیگر برخلاف زبان های Scripting یا Programming که برای انجام کارهای مختلف از دستورات خاصی استفاده می کنند، زبان اچ تی ام ال از تگ ها برای انجام کارهای خود استفاده می کنند (منظور از زبان Scripting زبانی است که اپلیکیشن های نوشته شده با آن فقط در صورت مشاهده یک درخواست کاری را انجام می دهد اما یک زبان Programming زبانی است که برنامه های نوشته شده با آن بدون نیاز به دریافت درخواست از طرف کاربر هم می توانند دستوری را اجرا کنند). پس از معرفی اولین نسخه این زبان، در هر نسخه جدید قابلیت های فراوانی به این زبان اضافه شد بطوریکه سیر پیشرفت این زبان در جدول زیر نشان داده شده است: همانطور که در جدول فوق مشاهده می شود نسخه ای تحت عنوان XHTML 1.0 و XHTML5 در لیست دیده می شوند. سازمانی به آدرس http://www.w3c.com/ متولی ارتقاء و انتشار زبان اچ تی ام ال است تقریباً در سال 2000 نسخه جدیدی از زبان اچ تی ام ال را تحت عنوان اکس اچ تی ام ال را را منتشر کرد ( لازم به ذکر است که w3c مخفف World Wide Web Consortium به معنی کنسرسیوم شبکه جهانی وب می باشد). به طور کلی منظور از اکس اچ تی ام ال ترکیبی از زبان اچ تی ام ال با زبان اکس ام ال است. در واقع پس از ترکیب دو زبان با یکدیگر زبان اچ تی ام ال توسعه پذیر تر شد و به طور کلی دست برنامه نویسان به مراتب باز تر شد. در نسخه اول این زبان کلیه تگ ها شبیه به تگ های نسخه اچ تی ام ال 4 بود با این تفاوت که یکسری تگ های تکمیلی به آن اضافه شده و یکسری قوانینی هم به آن اضافه شده است که می شود گفت قوانین سخت گیرانه ای بودند. همانطور که در جدول بالا مشخص است، آخرین نسخه از زبان اچ تی ام ال نسخه 5 است که در این سری از آموزش ها نیز این نسخه را مد نظر قرار خواهیم داد. به طور کلی نسخه 5 این زبان به منزله نسخه تکمیلی نسخه 4 است با این تفاوت که یکسری تگ های تکمیلی به آن اضافه شده است که به مراتب برنامه نویس را در ساخت صفحات وب یاری می رسانند. علاوه بر این در نسخه 5 از زبان اچ تی ام ال یک تفاوت عمده می بینیم و آن هم اینکه نسخه 5 زبان اچ تی ام ال این امکان را به برنامه نویسان می دهد تا علاوه بر صفحات وب بتوانند وب اپلیکیشن نیز طراحی کنند.
پیش نیازهای برنامه نویسی اچ تی ام ال (html)

به طور کلی در این سری از آموزش ها مبنا را بر آن خواهیم گذاشت که مخاطبین دوره هیچ گونه زمینه ای در برنامه نویسی نداشته و صرفاً با نحوه کار با سیستم عاملی همچون ویندوز، نصب نرم افزار، اجرای نرم افزار و ... آشنایی دارند. به هر حال از دید بنده، برنامه نویسی اچ تی ام ال دو پیش نیاز دارد که از اهمیت بسزایی برخوردارند: 1. تایپ ده انگشتی لاتین: در برنامه نویسی بیش از آنکه با موس سر و کار داشته باشیم، به استفاده از صفحه کلید سیستم خود خواهیم پرداخت و همانگونه که از نام آن پیدا است با کلیدهای صفحه کلید سر و کار داریم. به عبارت دیگر بایستی کدهای خود را «تایپ» کنیم. اگر بخواهیم به صورت دو انگشتی و به عبارت دیگر غیر حرفه ای کدهای خود را وارد نماییم، فرایند برنامه نویسی برای ما کار دشواری خواهد بود و به هیچ وجه از کاری که انجام می دهیم لذت نخواهیم برد و شاید هم انگیزه خود را تا حدی از دست بدهیم و دوره طراحی سایت را در نیمه راه رها کنیم. بنابراین توصیه می شود از ابتدای راه، تایپ ده انگشتی را یا با استفاده از نرم افزارهای موجود در بازار و یا به صورت تمرین آزمون و خطا فرا بگیریم. 2. فراگیری زبان انگلیسی: در واقع از آنجا که کلیه اسناد زبان های برنامه نویسی دنیا از جمله زبان اچ تی ام ال و همچنین واژگان مورد استفاده در زبان های برنامه نویسی به زبان انگلیسی است، توصیه می شود با این زبان بین المللی نه در حد خیلی زیاد بلکه در حدی که بتوانیم متون انگلیسی تخصصی را بخوانیم و متوجه شویم و همچنین به زبان انگلیسی مکاتبه نماییم کفایت می کند. در اینترنت Forum های زیادی هستند که به سادگی می توانیم سوالات خود را در آن ها مطرح کرده و پاسخ مناسب را دریافت کنیم که از مهم ترین آنها می توان به سایت www.stackoverflow.com اشاره کرد. بنابراین برخورداری از دانشی نسبی در زمینه زبان انگلیسی به طرز قابل توجهی می تواند فرایند یادگیری یک زبان برنامه نویسی را تسهیل نماید. از سوی دیگر هر آموزشی مباحث خاصی را پوشش می دهد و بالتبع فراگیری جنبه های مختلف یک زبان برنامه نویسی نیازمند استفاده از کتب و مقالات مرجع است که غالباً به زبان انگلیسی هستند. بنابراین با فراگیری زبان انگلیسی خواهیم توانست دانش برنامه نویسی خود را همواره به روز نگه داشته و مهارت های خود را گسترش دهیم.
رویکرد آموزشی دوره اچ تی ام ال 5 (html5) و سی اس اس (CSS) نت شهر

اینترنت علاوه بر خدمات گسترده ای که در اختیار کاربرانش در سرتاسر دنیا قرار داده است، دید کاربران را نیز به مطالعه تغییر داده است. برای روش شدن این مطلب مثالی می زنیم. زمانیکه یک کتاب مثلاً 87 صفحه ای را می خواهیم مطالعه کنیم، این 87 صفحه خیلی زیاد به نظر ما نخواهد آمد اما اگر یک کتاب تحت وب باشد که به همین میزان صفحه داشته باشد احتمال قریب به یقین حوصله خواندن آن را نداشته باشیم. اگر بخواهیم به دلایل چنین اتفاقی در اینترنت اشاره کنیم، موارد زیادی را می توان برشمرد که به طور حتم یکی از آنها استفاده از خود کامپیوتر است. در حقیقت زمانیکه می خواهیم یک کتاب بخوانیم به سادگی کتاب را باز کرده و شروع به خواندن می کنیم اما این در حالی است که اگر بخواهیم همین کتاب را تحت وب بخواهیم چند چیز نیاز است: اول آنکه کامپیوتر را روشن کنیم، وارد اینترنت شویم، آدرس وب سایت مد نظر را وارد کنیم و در نهایت روی هر فصلی که بخواهیم کلیک کنیم. علاوه بر این اگر از لپ تاپ، موبایل و یا تبلت برای اتصال به اینترنت استفاده نکنیم، نیاز به توضیح ندارد که برای استفاده از کامپیوتر های معمولی در بیشتر مواقع می بایست پشت میز بنشینیم (مگر آنکه کسی کامپیوتر خود را روی زمین قرار دهد!). همین پشت میز نشستن خود موجب تحلیل رفتن انرژی کاربر می شود بنابراین کاربر در استفاده از کامپیوتر نسبت به خواندن یک کتاب به مراتب بیشتر خسته می شود. اگر بخواهیم دلایل زودتر خسته شدن در استفاده از کامپیوتر را نسبت به کتاب خواندن برشمریم مسلماً به موارد بیشتری نیز خواهیم رسید. به همین دلیل رویکرد موفقی که در ارتباط با آموزش های اینترنتی می توان اتخاذ کرد این است که آموزش ها کوتاه و کاربردی باشند. منظورمان از کوتاه این است که برای خواندن هر آموزش بیش از 10 دقیقه زمان نیاز نخواهیم داشت و علاوه بر این منظورمان از کاربردی این است که در هر قسمت یک نکته آموزشی مورد بررسی قرار خواهد گرفت که در ادامه نکات آموزشی قبل بوده و در صورتی که نکات آموزشی قبل را به خوبی مطالعه کرده باشیم هیچ نیازی به مرور مطالب دیگر نخواهیم داشت. بنابراین با اتخاذ چنین رویکردی این انتظار را می توان داشت که کاربر برای مطالعه هر قسمت از آموزش های طراحی سایت فقط نیاز است تا 10 دقیقه پشت میز کامپیوتر خود نشسته و یک نکته جدید را بیاموزد. علاوه بر این شاید شنیده باشید که خیلی ها می گویند زبان فرار است. خب منظور ایشان زبان برنامه نویسی نیست بلکه زبانی است که با آن ارتباط برقرار می سازیم. به عقیده بنده زبان فرار نیست بلکه "زبانی که استفاده نشود" فرار است. فرض کنیم می خواهیم برای ادامه زندگی به کشور آلمان برویم. برای این منظور در کلاس های زبان آلمانی شرکت کرده و این زبان را تا حد متوسطه فرا می گیریم. حال تا ویزای خود را دریافت کنیم تقریباً 18 ماه زمان صرف خواهد شد و ما هم به این امید که زبان آلمانی را تا حد متوسطه بلد هستیم دیگر کلاس های خود را ادامه نمی دهیم. پس از گرفتن ویزای آلمان خود پس از یک سال و نیم، زمانیکه در فرودگاه فرانکفورت از هواپیما پیاده می شویم به خود می آییم که خیلی از چیزها را فراموش کرده ایم. علت این مسئله هم کاملاً واضح است: "تمرین کردن را رها کرده ایم". در زبان های برنامه نویسی هم قضیه کاملاً به همین صورت است. در واقع با استفاده از زبان های برنامه نویسی ما با کامپیوتر خود به جای آدم ها ارتباط برقرار می سازیم، دستور می دهیم، درخواست می کنیم و ... بنابراین اگر شروع به فراگیری یک زبان برنامه نویسی نماییم و به طور مداوم آن را تمرین نکنیم به طور حتم آن را فراموش خواهیم کرد. در واقع بایستی آنقدر کدهای زبان مد نظر خود را بنویسیم که ملکه ذهنمان شوند که در آن صورت همچون زبان فارسی، آذری، کردی، گیلکی، مازنی، عربی و ... (قابل توجه تمام اقوام ایرانی) که اگر آن را به مدت یکسال هم مورد استفاده قرار ندهیم فراموش نخواهیم کرد، به زبان برنامه نویسی مد نظر خود کاملاً مسلط خواهیم شد. با مد نظر قرا دادن موارد فوق الذکر امیدواریم این دوره برای شما کاربر گرامی سایت نت شهر مفید واقع گردد.