کد نویسی در طراحی صفحات وب

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

coding and programming langs

اما پس از گذشت یک برهه زمانی اولین زبان های برنامه نویسی، مانند (Assembly language) بوجود آمدند. این زبان ها، دستورات کوتاه شده ای داشتند که قادر بودند پس از دریافت آن دستورات و همچنین پس از اعمال عملیات کامپایل یا تفسیر بر روی آنها، توالی 0 و 1 را تولید کنند و آن را به برنامه نویس یا سخت افزار تحویل دهند.
اگر کمی دقت کنیم متوجه می شویم که یک تحول عظیم در این صنعت اتفاق افتاد که در واقع منجر به پیشرفت جهان شد. چرا که کامپیوتر ها تبدیل به ابزاری فوق العاده قدرتمند در دستان انسان ها شدند و می توانستیم بسیاری از کار های دیگر را که شاید از دست انسان بر نمی آمد، به آنها بسپریم و با کمترین خطا ها و در کوتاه ترین زمان ها، نتایج دقیقی را تحویل بگیریم.

اگر بخواهیم تعریف جامعی از کد نویسی داشته باشیم می توانیم بگوییم: کد نویسی به انجام عملیات نوشتن بر اساس دستورات تعیین شده در زبان برنامه نویسی و با هدف استخراج یک نتیجه مشخص در یک برنامه یا یک سخت افزار می گویند.
در اینجا شرحی از تعداد معدودی از کد های مربوط به یک زبان نشانه گذاری یا (Markup Language) را برای شما مثال می زنیم.
HTML یا HyperText Markup Language که به معنی زبان نشانه گذاری ابر متنی می باشد، برای طراحی و ساخت صفحات وبسایت ها کاربرد دارد .

بوسیله مجموعه قواعد این زبان نشانه گذاری، می توانیم مرورگر های موجود بر روی کامپیوتر ها را، وادار به ساخت اشکال ، متن ها، رنگ ها و عمل به دستورات کنیم.
برای مثال؛ این صفحه ای که شما در حال حاضر آن را مطالعه می کنید، حاصل دستورات HTML است که به مرورگر شما ارسال شده و مرورگر شما پس از درک و تبدیل آن به یک سلسله دستورات دیگر و همچنین استفاده از سخت افزار کامپیوتر شما، آن را تبدیل به صفحه پیش رو می کند.

بنابراین اگر قصد دارید تا در آینده یک صفحه وبسایت را طراحی کنید، اولین کار یاد گرفتن HTML است.
تگ ها: دستورات HTML در درون دو علامت کوچک تر و بزرگتر "< >" قرار میگیرند و البته بیش تر تگ ها به دو شکل تگ شروع یا Opening tag و تگ انتهایی یا Closing tag نوشته می شوند. تگ های انتهایی، به همراه یک علامت اسلش نوشته می شوند و فرم کلی آن ها به این شکل است:
"< نام تگ/ > < نام تگ >"

تگ <p> </p>
در اچ تی ام ال برای اینکه بتوانیم یک پاراگراف را در صفحه بنویسیم، از تگ p استفاده می کنیم. البته در داخل تگ های p علاوه بر متن، می توانیم از انواع خاص دیگری از تگ ها هم استفاده کنیم.

تگ <img>
این تگ یکی از تگ هایی است که تنها opening tag دارد و در داخل آن باید مشخصات مربوط به عکسی که قرار است در درون صفحه HTML ما قرار بگیرد نوشته شود. شکل کلی تک img :
<img src="testimage" alt="for test image" height="42" width="42">
نمونه بالا، علاوه بر src که آدرس عکس در روی سرور یا کامپیوتر طراح را نشان می دهد، دارای 3 خصوصیت : alt , height و width هم هست که بترتیب : موضوع عکس ، طول عمودی و عرض افقی عکس را نشان می دهند.
نکته مهم در این تگ این است که مقدار یا Value تمام خصوصیت های تگ ها، پس از علامت مساوی ریاضی و در درون یک جفت کوتیشن (" ") قرار می گیرند.
بر روی عکس زیر کلیک راست کنید و گزینه Inspect یا Inspect Element را انتخاب کنید تا بیش تر با این تگ آشنا شوید.
نکته : Inspect یا Inspect Element قابلیت مهمی در مرورگر های اینترنتی است که به برنامه نویسان و طراحان کمک می کند تا از رویداد های موجود در صفحات مطلع شوند و در واقع یک ابزار مهم برای طراحان و یا به اصطلاح (Developer tools) می باشد. که معمولا با دکمه F12 نیز نمایش داده می شود.

تگ <strong> </strong>
تگ strong که یکی از تگ های معنایی یا به اصطلاح Semantic tag در دنیای html هم می باشد، کمک می کند تا شما لغات و عبارت های مهم و کلیدی موجود در متن صفحه را علامت گذاری کنید. توجه داشته باشید که این تگ، عبارتی را که در میان خود جای داده است را به حالت Bold و خوانا تر نمایش می دهد. که البته با روش های دیگری نیز می توانیم کاری کنیم تا ظاهر نوشته تغییری نکند.
تگ های strong از آن دسته از تگ هاست که می توانیم در داخل تگ هایی همچون p از آن ها استفاده کنیم. نکته مهم دیگری که در مورد این تگ وجود دارد. تاثیر نسبی این تگ بر SEO صفحه ما می باشد ، که برای درک بهتر مفهوم SEO پیشنهاد میکنم مقاله های مربوط به الگوریتم های مرغ مگس خوار و پاندا که مرتبط با مفهوم سئو هستند را مطالعه فرمایید.

مجموعه تگ های <h1> </h1> تا <h6> </h6>
این تگ های شماره گذاری شده که به heading tags هم معروف می باشند، کمک می کنند تا اندازه فونت و نوشتار عناوین هر قسمت از صفحات را تعیین کنیم. برای توضیح بهتر یک مثال از یک صفحه خبری می زنیم که در ابتدا و بالای آن عنوان اصلی خبر مربوط به آن صفحه نوشته شده است، این عنوان اصلی باید در داخل تگ <h1> </h1> قرار بگیرد، چرا که این تگ بیشترین اندازه و سایز فونتی را در مقایسه با 5 نوع دیگر دارد و به عبارتی برای اصلی ترین عناوین در نظر گرفته شده است. اما مثلا در داخل این صفحه و در طی توضیحات خبر اصلی، رویداد های دیگری هم نوشته شده است که هر کدام از آنها عنوان منحصر بخود را دارند، که می توان از سایر heading ها استفاده کرد.

تگ <br>
تگ br از آن دسته از تگ هاست که می توانیم از آن در داخل تگ های p هم استفاده کنیم. وظیفه این تگ که البته قسمت Closing و انتهایی ندارد، انتقال ادامه نوشته ها به خط بعد می باشد. بعبارتی، بوسیله <br> می توانیم ادامه نوشته را که در داخل یک پاراگراف قرار دارد، بشکنیم و به خط بعد منتقل کنیم.

تگ <a href=" link addres "></a>
تگ a یا انکر (Anchor) یکی از مهم ترین تگ های HTML است. بوسیله این تگ می توانیم سایر صفحات و فایل های موجود در اینترنت را در صفحه خود، به اصطلاح لینک کنیم.
تگ a خصوصیت های بسیار زیادی دارد که مهم ترین و اصلی ترین آن href می باشد که مقدار آن آدرس است و به عبارتی پس از کلیک بر روی متن قرار گرفته شده در بین این تگ، به آدرس موجود در href هدایت خواهیم شد.
یکی دیگر از خصوصیت های این تگ، خصوصیت target می باشد که اگر مقدار آن را برابر new قرار دهیم، پس از کلیک کاربر یک tab جدید با آدرس موجود در href در مرورگر باز خواهد شد همچنین از تگ a می توانیم همچنان در سایر قسمت ها و تگ ها استفاده کنیم.

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