سلام دوستان در این مقاله می خواهیم درباره موضوعی صحبت کنیم که امروزه تمامی وب سایت های اینترنتی دنیا، به نوعی توسط این مبحث ساخته و پرداخته شده اند. زبان طراحی سایت HTML.

ما در طی روز بار ها به وب سایت هایی سر میزنیم و شاید برایمان جالب و جذاب باشد که این سایت ها چگونه به وجود آمده اند؟سایت هایی با افکت های عجیب و غریب و طرح های شیک و حرفه ای!!! اگر به سایت های ساخته شده در گذشته نگاهی بیاندازیم متوجه می شویم که آن ها ساختاری ساده و ابتدایی دارند. اما سایت هایی که امروز وارد اینترنت می شوند به صورتی کاملا شکیل و بروز ساخته می شوند.

از قدیم تا به الان، تکنولوژی های مختلف و تاثیر گذاری در فرآیند طراحی وب تاثیر گذار بوده اند، اما جالب است که بدانید تمامی این تکنولوژی ها در نهایت به زبان html  بر می گردند. اگر می خواهید راز زبان Html  که این همه سال در عرصه کدنویسی جولان می دهد را بدانید ادامه دهید.

زبانhtml  چیست و چه کاربردی دارد ؟

Html  مخفف عبارت Hyper Text Markup Language است که در زبان فارسی به آن زبان نشانه گذاری ابرمتن می گویند. در اینجا باید دقت کامل را داشته باشید که زبان درواقع زبان برنامه نویسی html  یک زبان برنامه نویسی نیست بلکه یک زبان نشانه گذاری یا markup Language  می باشد . یعنی از آن برای تولید متن و نهایتا، گرافیک داخلی سایت استفاده می شود.

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

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

کد های html فاقد جنبه ظاهری می باشند و تنها یک متن خام هستند در این نقطه هست که زبان css و javascript وارد می شوند و به شما کمک می کنند که با کمک html اقدام به ایجاد افکت ها و رنگ ها و طرح های مختلف برای سایت خود کنید.

در ادامه این مقاله بیشتر به این موضوع خواهیم پرداخت.

تفاوت زبان نشانه گذاری با زبان برنامه نویسی ؟

بگذارید اینگونه بگویم: تفاوت زبان html با زبان برنامه نویسی؟

در توضیحی مفید می توان گفت که زبان برنامه نویسی زبانی است که به وسیله آن می توانیم با کامپیوتر ها حرف بزنیم. زبان های برنامه نویسی به کمک دستور  ها و کدهایی که برای کامپیوتر ها قابل درک است  با آن ها ارتباط برقرار می کند و دستور های خود را به کامپیوتر می فهماند.

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

زبان های نشانه گذاری متعددی وجود دارد که از معروف ترین آن ها می توان به زبان html  اشاره کرد. با دقت کردن به واژه زبان نشانه گذاری متوجه خواهید شد که این زبان با زبان برنامه نویسی فرق دارد و شامل ساختار های اصلی و رایج برنامه نویسی مانند حلقه و تکرار و ... نیست.

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

تاریخچه زبان html

در سال 1991 فردی به نام Tim Berners Lee اولین نسخه html را با 18 تگ یا همان برچسب طراحی کرد.

به مرور زمان ورژن های جدید تری از این نسخه به دنیای اینترنت وارد می شد که امکانات بیشتر و پیشرفته تری را به همراه خود داشت.

در طی زمان، بروزرسانی های بهتری برای این زبان نشانه گذاری ارائه می شد که هرکدام از این بروزرسانی ها باگ های قبلی خود را برطرف و امکانات بیشتری را به این زبان اضافه می کردند.

معرفی زبان برنامه نویسی php

به صورت کامل با زبان برنامه نویسی php و کاربرد های آن در دنیای وب آشنا شوید

سیر تکامل html

Html 3.0


زبان html انواع و سری های متفاوتی دارد که هر کدام از آن ها برای ایجاد وب سایت هایی با امکانات و زیبایی بیشتر پا به عرصه می گذاشتند.
Html 1.0 اولین نسخه منتشر شده از این زبان نشانه گذاری در جهان بود که کار های کاملا ابتدایی و محدود را انجام می داد ( البته باید به این نکته توجه کرد که درآن زمان تعداد برنامه نویسان وب چندان زیاد نبود).تنها قابلیتی که این نسخه داشت این بود که می توانست متنی ساده را در وب قرار دهد.
بعد از html 1.0  نسخه جدید تری به نام html 2.0 وارد بازار شد که تمامی ویژگی های محدود ورژن 1 و نیز قابلیت های جدیدی را به همراه خود داشت. از این نسخه به عنوان نسخه استاندارد برای طراحی سایت یاد می کردند.

html 4.01


با توجه به افزایش محبوبیت html، نسخه های موجود برای وب مستر ها محدودیت هایی را ایجاد می کرد و آن به را به مشکل می انداخت.
در همان زمان، گروه حرفه ای و خبره html،  پیش نویس جدیدی از این زبان به عنوان html 3.0  ارائه کردند. این نسخه شامل قابلیت های خیلی بیشتری نسبت به ورژن قبلی خود بوده و تبدیل به ابزاری قدرتمند برای برنامه نویسان آن زمان گردید.
اما با توجه به مشکل به ظاهر خنده دارد ولی مهم آن زمان، یعنی پشتیبانی نکردن مرورگر های آن دوره و سرعت بسیار پایین بارگذاری آن ها، تنها بخشی از این ویژگی ها قابل استفاده بود و به مرور زمان برنامه نویسان این زمینه استفاده از نسخه html 3.0  را به فراموشی سپرده و با نسخه قبلی این زبان کار می کردند.
کمی بعد کنسرسیوم وب جهانی اولین ورژن خود را که به html 3.2 معروف شد و تغییراتی نسبتا اندک نسبت به نسخه پیشین خود را داشت ارائه کرد. در ابتدا بسیاری از تگ های قبلی در این نسخه کار نمی کرد و دارای استاندارد های جدید نبود اما سریعا در ژانویه سال 1997 این نسخه به نسخه استاندارد تبدیل شد و در زمان حال تمامی مرورگر ها زا این ویژگی ها به صورت کامل پشتیبانی می کنند.

html5


نسخه html 4.01 انقلابی بزرگ در این زبان به شمار می رفت، بیشتر امکانات و ویژگی های جدید این نسخه درواقع ارتقای همان امکاناتی بود که در نسخه پیشین یعنی html 3.0  به درستی کار نمی کرد و همینطور امکاناتی ویژه و پیشرفته دیگر که مخصوص همین نسخه بود.
این نسخه در دسامبر 1997 توسط کنسرسیوم وب جهانی به همه برنامه نویسان پیشنهاد و نیز در آوریل 1998 به استاندارد رسمی طراحی سایت تبدیل شد.
پشتیبانی تگ های جدید این نسخه توسط مرورگر محبوب شرکت مایکروسافت به نام IE5 صورت گرفت.


تا سال 2008 بازار html 4  داغ بود و تمامی انتظار های برنامه نویسان را برآورده می کرد و به طور وسیعی مورد استفاده آنها قرار میگرفت. اما یه وضوح مشخص بود که هر نسخه ای بعد از مدتی دارای مشکل ها و عیب هایی می شود که html 4  از این قاعده مستثنی نبود.
به همین دلیل کمپانی WHATWG ادامه توسعه این زبان را در دست گرفت و استاندارد های آن ره به طور کلی ارتقا داد. از اصلی ترین مشکلات آن نسخه مربوطه به ویژگی چند رسانه ای (multimedia) و همچنین گرافیک بود.
Html 5  در سال 2014 یک بروزرسانی بزرگ و اساسی را تجربه کرد که در این بروزرسانی تگ های html  جدیدی وارد کار شد که تاثیر بسزایی را در بالا بردن کیفیت و نیز بهبود تجربه کاربران در سایت را داشت.
بعد از این اپدیت طراحی کردن سایت ها ساختار منظم و دقیقی را پیدا کرد و با توجه به این موضوع مفاهیم قدیمی مانند table  از دستور کار این زبان کنار گذاشته شد.

html چگونه کار می کند ؟

html  با کمک عناصر مختلفی که در خود دارد مانند: پاراگراف، لیست، عکس ، صوت چهارچوب اصلی یک صفحه وب را ایجاد می کند.

به زبان ساده html برای ساخت بدنه صالی صفحه به کار می رود. در مثالی دیگر اگر html  را به ساختار بدن یک انسان تشبیه کنیم. به ساختار کلی بدن مانند استخوان html  می گویند و زبان css برای درست کردن شکل ظاهری بدن انسان به کار می رود. که البته در دنیای امروزی وظیفه کد نویسی html  و css  به عهده یک نفر می باشد.

تگ های html

زبان html به کمک برچسب ها (Tags) عناصر مختلف را در کنار هم می چیند کاربر به دلخواه و با توجه به نیاز خود از آن ها بهره می برد، تگ ها وظایف گوناگونی دارند که برای استفاده از آن ها باید آن را فراخوانی و در انتهای کار با بستن تگ آن ها کارشان را تمام می کنید.

به طور مثال برای قرار دادن متن در html شما باید از تگ p  استفاده کنید و زمانی که پاراگراف خود را تمام کردید تگ p  را ببندید.مثال:

     
     

Hello world

تگ های Html  در واقع دستور هایی هستند که به مرورگر می گویند در صفحه نمایشگر چه چیزی به نمایش در آید.  هر کدام از این تگ ها برای کاربری به وجج=ود آمده اند و وظیفه و مفهوم خاصی برای خود دارند. که به کاربر امکان ساخت متن ها، جدول ها، فرم ها و .... را می دهد.

از دیگر تگ های مهم در html  می توان به تگ div  اشاره کرد که این تگ برای تقسیم کردن بخش های مختلف سایت و صفحه شما استفاده می شود. و با جرعت می توان گفت که این تگ از ستون های اصلی طراحی سایت به شمار می رود.

مزایای زبان html

زبان html در کنار زبان های دیگر مانند css و js هسته اصلی صفحه وب را تشکیل می دهند. در این بخش می خواهیم به مزایای زبان html  اشاره کنیم تا متوجه شوید که چرا زبان html با وجود مشکلاتی که دارد هنوز هم از زبان های اصلی نشانه گذاری در دنیای کدنویسی است. از مهم ترین مزایای زبان html می توان به موارد زیر اشاره کرد:

·        یادگیری آسان و ساده و همینطور جالب و لذت بخش

·        اجرا شدن آن در تمامی مرورگر های موجود

·        کاملا رایگان و کاربردی

·        ارتباط گرفتن بدون دردسر با زبان های سمت سرور مثل php

زبان html چه رابطه ای با css و js دارد؟

با صحبت کردن درباره زبان html ذهن همه به صورت ناخوداگاه به سمت زبان های css و  javascript می رود. تا اینجای کار متوجه شدیم که زبان html  چیست و کاربرد آن در طراحی سایت به چه شکل است. اما خاطر نشان باشد که امروزه زبان html  به تنهایی کاربردی ندارد و با ادغام کردن آن به زبان های دیگر مانند css و js می توان خروجی های زیبا و کاربردی گرفت.

به این دلیل که html  فقط ساختار صفحه را شکل می دهد و کاری به زیبایی ظاهر آن ندارد. به عبارت ساده صفحه هایی که با html ساخته می شوند ارزش منتشر شدن ندارند ولی زمانی که از css و js در آن بهره برده می شود، زیبایی و جذابیت خود را بدست می آورد و در حد و اندازه های صفحه قابل منتشر در می آیند.

زبان css چیست

به صورت کامل با زبان css و کاربرد های آن آشنا شوید

فرانت اند چیست ؟

Html از بزرگترین و پرکاربرد ترین زبان ها در طراحی فرانت اند است. به تمامی امکانات و ویژگی هایی که روی ظاهر و گرافیک سایت تاثیر گذاشته می گذارد و هیچ ارتباطی با عملکرد و نحوه عملکرد آن ندارد فرانت اند می گویند.

تمامی تغییراتی که در فرانت اند انجام می شود فقط فقط بر روی ظاهر سایت تاثیر می گذارد و هر بستر فرانت اند هر چه تغییر ایجاد کنیم در وجه ظاهری سایت نمایان و مشخص می شود.

از دیگر زبان های اصلی فرانت اند می توان به CSS و JavaScript اشاره کرد.

حال قصد داریم مثالی بزنیم که هرچه تا به اینجا یاد گرفته ایم به خاطر بسپارید:

شما می توانید html را مانند یک انسان برهنه در نظر بگیرید، css را می توان مانند کت و شلوار درنظر گرفت که ظاهر فرد را آراسته و مرتب می کند. و در نهایت قوه و منبعی که آن فرد را به حرکت در می آورد و باعث می شود که با بقیه افراد صحبت کند را جاوا اسکریپ می گوییم.

پس:

1.    زبان html به کمک تگ هایی که از قبل تعریف شده است ، ساختار و ماهیت صفحه سایت را مشخص می کند

2.    زبان css  به ما کمک می کند که ظاهر صفحه را تغییر دهیم، رنگ هارا عوض کنیم سایز ها را عوض کنیم به جا به جایی برخی از آیتم ها بپردازیم و یک صفحه را برای انتشار کردن آماده کنیم

3.     و اما زبان javascript به ما این امکان را می دهد که صفحه های ساخته شده با html  و css را به صورت پویا طراحی کنیم. ما با کمک js  می توانیم عوامل مختلفی را مثل اسلایدر ها ، pop up ، عکس و یا گالری و این چنین تغییرات را اعمال کنیم.

جمع بندی

اگر می خواهید که وارد دنیای برنامه نویسی تحت وب شوید، باید وقت و انرژی بزارید. در هرکاری برای پیشرفت در مرحله اول باید فقط شروع کرد. بله فقط شروع کنید و اولین قدمی که باید برای شروع بردارید یادگیری Html است.

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

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

باید قدم های اول را محکم بردارید زیرا اگر از پایه قوی پیش برید، مباحث بعدی را راحت تر فرا می گیرید. موفق باشید :)

مقالات مرتبط