آشنایی با کدنویسی html5 و css |روش فراخوانی و استایل دهی

اگر تاکنون در زمینه طراحی سایت و برنامه‌نویسی فعالیت داشته‌اید، بدون شک می‌دانید که اولین گام برای تبدیل شدن به یک برنامه نویس حرفه‌ای، کدنویسی است. به عبارتی دیگر، اگر بخواهید به صورت فعالانه در حوزه برنامه نویسی فعالیت داشته باشید، باید زبان‌های برنامه نویسی را آموخته و بتوانید با آن‌ها کدنویسی کنید. همان‌طور که می‌دانید، زبان‌های برنامه نویسی متعددی در بازار کار موجود است. اما از بین این زبان‌‎ها، تنها چند مورد از بیشترین کارآیی و محبوبیت در بین برنامه نویسان برخوردارند. در این مطلب قصد داریم درمورد دو مورد از بهترین زبان‌های برنامه نویسی و مهارت کدنویسی صحبت کرده و از صفر تا صد آن‌ها را برای شما شرح دهیم. اگر به تازگی تصمیم گرفته‌اید به حوزه برنامه نویسی وارد شوید، توصیه می‌کنیم تا انتهای این مطلب که درمورد کدنویسی html5 و css است، با آرنیکاوب همراه باشید.

از کدنویسی چه می‌دانید؟

امروزه تمام کسانی که به گونه‌ای با امور کامپیوتری سروکار دارند، حداقل یک بار کلمه کدنویسی به گوششان خورده است. اما سوالاتی مانند کدنویسی چیست و به چه دردی می‌خورد، تنها برای افراد مشتاق پیش می‌آید. به خصوص اگر این افراد به برنامه نویسی و مسائل پیرامون آن علاقمند باشند!

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

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

برخلاف انسان‌ها، رایانه‌ها و ماشین‌ها دقیقا همان کاری را انجام می‌دهند که از آن‌ها خواسته می‌شود! این موضوع شاید در ابتدا فوق‌العاده به نظر برسد، اما گاهی اوقات ممکن است مشکل ساز شود! مثلا اگر به یک کامپیوتر دستور شمارش از عدد یک را بدهید، چنانچه دستور توقف برای آن صادر نشده باشد، تا ابد این شمارش ادامه پیدا خواهد کرد! بنابراین یک برنامه نویس کاربلد باید بداند که چگونه دستورات را بی عیب و نقص به کامپیوتر منتقل کند.

برنامه نویسی و زبان‌های آن!

برخلاف آن چیزی که تاکنون در فیلم‌ها دیده‌اید، برنامه‌نویسی اقدامات خلافکارانه نیست و در زمینه هک سایت سازمان‌های بزرگ فعالیت ندارد! برنامه‌نویسی نوعی روش حل مسائل به کمک کامپیوتر است. شبیه این شغل را می‌توان در جایگاه‌های مختلف جامعه و با ابزارهای متفاوت مشاهده کرد. با این تفاوت که تخصص برنامه‌نویسی به کمک کامپیوتر مشکلات را حل می‌کند.

برنامه نویسی یک علم است که به کمک آن می‌توان دستورات موردنظر را در قالب کدهایی که در بخش قبل توضیح دادیم، به کامپیوتر انتقال داد. این دستورات در کامپیوتر پردازش شده و خروجی آن به کاربر نشان داده می‌شود. واضح است که کامپیوترها زبان انسان را درک نمی‌کنند. به همین دلیل آن‌ها اطلاعاتی که دریافت می‌کنند را به صورت اعداد صفر و یک می‌خوانند. از طرفی دیگر انسان هم نمی‌تواند به زبان صفر و یک صحبت کند، پس راه چاره چیست؟!

متخصصان حوزه برنامه نویسی با پدید آوردن زبان‌های مربوط به آن توانسته‌اند فاصله بین بشر و کامپیوترها را کم کرده و آن‌ها را به یکدیگر پیوند دهند. بدین ترتیب زبان‌های متعددی مانند کدنویسی html5 و css و… پدید آمده است. هریک از این زبان‌ها کاربرد خاص خود را دارند و بسیار متعدد و متنوع هستند. با این حال تنها چند مورد از آن‌ها به عنوان محبوب‌ترین و پرکاربردترین زبان‌ها شناخته شده‌اند. در بخش‌های بعدی بیشتر با زبان‌های برنامه نویسی آشنا خواهید شد.

چرا باید برنامه نویسی یاد بگیریم؟

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

خیلی از مردم تصور می‌کنند که با یادگیری کدنویسی و به دنبال آن برنامه نویسی، تنها یک مهارت فنی و تخصصی آموخته‌اند که در کسب و کارشان موثر است. اما واقعیت طور دیگری است! یادگیری برنامه نویسی دارای مزایای بی‌شماری است که نه تنها در فضای کار، بلکه در زندگی شخصی افراد هم کاربرد دارد. چند مورد از این مزایا به شرح زیر هستند:

برای هر مسئله‌ای راه حلی وجود دارد!

با یادگیری برنامه نویسی به زبان‌های مختلف از جمله کدنویسی html5 و css می‌آموزید که در حین مواجه با مشکلات، جا نزنید و نا امید نشوید! شما به عنوان یک برنامه نویس در فرآیند توسعه نرم افزار، همواره در حال دست و پنجه نرم کردن با باگ‌ها و مشکلات احتمالی هستید. در این بین خواهید فهمید که برای پیش رفتن کارها باید تمامی راه حل‌های موجود را بررسی کنید تا به بهترین آن‌ها برسید. این کار باعث می‌شود تا ذهن یک متخصص برنامه نویس تبدیل به یک ذهن پرسش‌گر شود و هر زمان و در هر شرایطی که با مشکل خاصی روبرو شد، بتواند آن را از سر راه بردارد.

برنامه نویس یک تولید کننده و مشکل گشا است!

یکی دیگر از جذابیت‌های شغل برنامه نویسی، توانایی تولید کنندگی است. در واقع شما با ورود به عرصه کدنویسی و برنامه نویسی تبدیل به یک تولید کننده و حلال مشکلات می‌شوید! با به کارگیری این مهارت‌ها می‌توان یک چیزی به جهان هستی اضافه نمود و دنیا را به جای بهتری برای زندگی تبدیل کرد.

درواقع یک برنامه نویس با استفاده از مهارت خود می‌تواند مشکلات زیادی از زندگی انسان‌های اطراف خود را حل کند. به عنوان مثال، اپلیکیشن‌هایی مانند اسنپ و… در بهبود روند زندگی مردم نقش به‌سزایی داشته‌اند. برنامه نویسی یک شغل فوق‌العاده‌ای است که با اشتغال به آن هم می‌توانید به درآمد برسید و هم در حال بهبود دنیا و خدمت به بشر باشید.

ورزش ذهنی

حتما شما هم شنیده‌اید که افراد برای این که در پیری دچار بیماری آلزایمر و یا زوال عقل نشوند، اقدام به کارهایی مانند حل جدول، یادگیری زبان و… می‌کنند. یکی از کارهایی که منجر به فعال نگه داشتن ذهن انسان می‌شود، یادگیری مهارت برنامه نویسی است. زمانی که شما بتوانید به صورت مداوم به مشکلات و راه حل آن‌ها فکر کنید، ذهنتان فعال شده و به حالت ورزش درمی‌آید. علاوه بر آنچه تا این قسمت مطلب درمورد مزایای یادگیری مهارت برنامه نویسی گفته شد، موارد زیر نیز می‌‎توانند جزو بهترین دلایل برای کسب دانش درمورد برنامه نویسی باشند:

• آینده درخشان تخصص برنامه نویسی
• کسب توانایی اجرایی کردن ایده‌هایی که در ذهن دارید

آشنایی با زبان‌های برنامه نویسی

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

در پاسخ به این سوال، لازم است بدانید که هر یک از زبان‌های برنامه نویسی، در یک گروه خاص جای می‌گیرد. به بیانی دیگر، برای این که بدانید کدام یک از زبان‌ها مناسب شما هستند، باید در ابتدا حوزه فعالیت خود را مشخص کنید. به عنوان مثال اگر شما قرار است طراح فرانت‌اند شوید، باید به سراغ یادگیری زبان‌هایی مانند: html،css ،javascript  و… بروید. در ادامه قصد داریم درمورد کدنویسی html5 و css بیشتر صحبت کنیم. این دو زبان معمولا در حوزه برنامه نویسی فرانت اند مورد استفاده قرار می‌گیرند. پس اگر شما هم به این حوزه علاقمند هستید، در قسمت‌های بعدی با ما همراه باشید.

با html5 بیشتر آشنا شوید

جدیدترین نسل زبان برنامه نویسی Hyper Text Market)، html5) است. همان‌طور که گفتیم، این زبان در طراحی سایت و در بخش طراحی سمت کاربر (فرانت اند) کاربرد دارد. پیش نویس اولیه html5 در سال 2008 ارائه شد. اما تا سال 2011 تغییر و تحولات خاصی در آن اعمال نشد. در سال 2011 بود که html5 به صورت رسمی روانه بازار شد و از همان روز به بعد مورد استقبال برنامه نویسان قرار گرفت. لازم به ذکر است که در ابتدای کار، مرورگرهای اندکی از این زبان جدید پشتیبانی می‌کردند. اما در حال حاضر اصلی‌ترین مرورگرها مانند کروم، سافاری، فایر فاکس و… از این زبان پشتیبانی می‌کنند.

خوب است بدانید که html5 براساس همان html4.01 تولید شده است. درواقع برای استفاده از این زبان، می‌توانید از اطلاعات پیشین خود استفاده کنید. دلیل این امر این است که شما در هنگام کار با html5 با یک زبان جدید روبرو نیستید. بنابراین برای استفاده از html5 تنها لازم است تغییرات آن نسبت به نسخه‌های قبلی را بشناسید تا بتوانید از امکانات آن بهره‌مند شوید.

هدف از انتشار زبان برنامه نویسی html5

انتشار آخرین ورژن زبان html با اهداف ویژه‌ای صورت گرفت که این اهداف به اختصار عبارتند از:

• امکانات جدید بایستی براساس DOM، CSS، HTML و جاوا اسکریپت باشند
• نیاز مبرم به کاهش افزونه‌های خارجی و جانبی نظیر فلش تا حد امکان
• سهولت رفع مشکلات و خطاهای احتمالی در html5 نسبت به نسخه‌های پیشین
• جایگزینی اسکریپت با نشانه گذاری در کدنویسی با استفاده از این زبان
• مستقل بودن html5 از دستگاه و قابل اجرا بودن آن بر روی هر نوع کامپیوتر و گجتی
• متن باز بودن مراحل پیشرفت و به روز رسانی html5

چرا کدنویسی با html5؟!

شاید تا این قسمت از مقاله برایتان این سوال پیش آمده که چرا در صورت وجود چندین زبان دیگر، استفاده از html5 توصیه شده است؟! درواقع کدنویسی با استفاده از این زبان، مزایای زیادی در اختیار کاربران قرار می‌دهد که با استفاده از آن‌ها می‌توان به اهداف برنامه نویسی نزدیک و نزدیک‌تر شد. چند مورد از مهم‌ترین این مزایا عبارتند از:

• افزوده شدن تگ < canvas > به منظور طراحی اشیا و اشکال هندسی به صورت دوبعدی
• افزوده شدن تگ < video > و < audio > به منظور اجرا شدن فایل‌های صوتی و تصویری
• افزوده شدن کنترل‌های جدید فرم مانند calendar , email , date و time  که طراحی فرم‌ها را راحت‌تر می‌کند
• امکان ذخیره سازی دیتا بر روی مرورگر کاربران و…

با css بیشتر آشنا شوید

هروقت که صحبت از طراحی سایت و به خصوص طراحی فرانت اند (سمت کاربر) می‌شود، ناخودآگاه ذهن طراحان حرفه‌ای سایت به سمت کدنویسی html5 و css روانه می‌شود. در بخش قبل به شرح html5 و مزایای آن پرداختیم و در این قسمت درمورد css توضیحات لازم را ارائه خواهیم داد.

Css هم مانند چندین زبان دیگر جزو زبان‌های برنامه نویسی محبوب و پرکاربرد می‌باشد. این زبان شامل دستوراتی است که به کمک آن‌ها می‌توانیم تمام خصوصیات ظاهری وب‌سایت را تعیین کنیم. درواقع ارتباطی که کدنویسی html5 و css با یکدیگر دارند، در این است که به کمک کدهای html5 می‌توان اسکلت صفحه سایت را پیاده سازی کرد. اما عناصر ظاهری سایت توسط کدهای css تعریف می‌شوند. طراحان سایت قادر هستند با استفاده از زبان برنامه نویسی css بسیاری از کارهای تکراری را کاهش داده و زمان طراحی و حجم کدهای سایت را به حداقل برسانند.

تاریخچه css

زبان برنامه نویسی css برای اولین بار در سال 1996 معرفی شد. هدف از معرفی این زبان، برطرف کردن مشکلاتی بود که طراحان تا آن دوره با HTML3.2 داشتند. مشکل اصلی طراحان سایت در آن زمان این بود که آن‌ها مجبور بودند از ویژگی‌ها و تگ‌های زیادی در جهت ارائه محتوا استفاده کنند. درواقع قبل از ایجاد زبان css، از HTML به منظور زیباسازی هم استفاده می‌شد. با روی کار آمدن css کم کم و به مرور زمان طراحان قادر شدند تا سایت‌‎هایی با دست‌یابی پذیری بالا طراحی کنند. به این معنا که امکان نمایش وب‌سایت طراحی شده در تمامی دستگاه‌های موجود نظیر تلفن‌های هوشمند، تبلت‌ها و… ایجاد شد.

چرا کدنویسی با css؟!

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

• صرفه جویی در وقت
• سهولت در تغییرات مجدد تگ‌های مربوط به HTML
• طراحی صفحه بدون نیاز به تگ‌های قالب بندی HTML
• طراحی صفحه دینامیک با استفاده از جاوا اسکریپت و…

روش‌های فراخوانی CSS در HTML:

برای فراخوانی CSS در HTML و اتصال آن‌ها به یکدیگر سه روش وجود دارد:

1. استایل خطی یا Inline
2. استایل داخلی یا Internal
3. استایل خارجی یا External

که در اینجا به بررسی هریک از این روش‌ها می‌پردازیم.

1. روش inline:

زمانی که قصد داریم یک استایل خاص را بر روی یک المنت خاص در صفحه اعمال کنیم از این روش استفاده می‌کنیم. نحوه استفاده از CSS به صورت خطی:

<body>

<p style=”color:green;”>Salam Khobi?</p>

<p style=”color:blue;”>Man Sadegh</p>

<p style=”color:red;”>Hastam</p>

</body>

و یا

<h1 style=”color:red;”>This is a test</h1>

اما مهم‌ترین ایرادی که در این روش وجود دارد، این است که موجب به هم ریختگی کدها می‌شود.

2. روش internal:

در این روش می‌توانیم دستورات CSS  را درون یک فایل HTML قرار دهیم که به آن internal یا استایل داخلی می‌‌گویند.

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

در این روش تمام کدهای CSS مربوط به صفحه در تگ head و در داخل تگ style قرار می گیرند. یعنی:

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: #2196F3;

}

h3 {

color: yellow;

}

p {

color: white;

}

</style>

</head>

<body>

<h3>Www.Free-Learn.Ir</h3>

<p>My WebSite Is Free</p>

</body>

</html>

3. روش External:

در میان این سه روش، روش External از بهینه‌ترین روش‌ها می‌باشد. اکثر وبسایت‌های موجود دارای یک فایل CSS از External می‌باشند. این موضوع نشان می‌دهد که تمامی دستورات ‌CSS  یک سایت درون یک فایل به صورت مجزا نوشته می‌شود و پس از آن به راحتی و با نوشتن یک دستور یک خطی فایل CSS به فایل HTML متصل می‌شود. و به وسیله این روش می‌توان یک فایل css را به چند صفحه متصل نمود.

برای اینکه یک سایت با سرعت بالاتری داشته باشید سعی کنید تا جایی که می‌توانید از روش‌های درون خطی (Inline) و داخلی (Internal) استفاده نکنید.

در این روش تمامی کدهای css مربوط به صفحه، در تگ head و در داخل تگ style قرار می گیرد.

<head>

<link rel=”stylesheet” href=”styleTest.css”>

</head>

چگونگی استایل‌دهی html به روش external

قدم اول: ایجاد فایل CSS

در پوشه project خود که فایل index.html درون آن قرار دارد، فایل دیگری به نام style.css ایجاد می‌کنیم. به این پوشه که تمام فایل‌های اصلی سایت html، css، جاوا اسکریپت و … در آن قرار می‌گیرد root سایت می گویند.

قدم دوم: نوشتن کد در سند HTML

تگ link را به تگ head اضافه می کنیم:

<!DOCTYPE html>
<html>
<head>
<title>
اینجا عنوان سایت است
</title>
</head>
<body>
<p> نوشتن هر متنی که دلتون میخواد</p>
</body>
</html>

قدم سوم: ایجاد پیوند میان CSS و HTML

• فایل css را از طریق تگ <link> در فایل html  فراخوانی می کنیم.
• در سند html، تگ <link> در داخل تگ <head></head> بنویسید.

از نمونه زیر برای لینک دادن فایل css به سند html استفاده کنید:

<link   href=”مسیر فایل سی اس اس“   rel=”stylesheet”   type=”text/css”>

قدم چهارم: نوشتن کد در CSS

به طور کلی برای کد زدن در css از الگوی زیر استفاده می‌شود:

selector { property:value;    property:value;   …   }

هر قانون استایل در CSS شامل یک selector  و یک بلاکی از یک یا چند تعریف (ویژگی و مقدار) می باشد. هر تعریف با “نقطه سمیکالن ” از هم جدا می‌شوند. در فایل CSS سه نوع selector وجود دارد که یزای استایل دادن، به وسیله آن‌ها می‌توان فایل‌های HTML را صدا زد:

• صدا زدن المان بر حسب نام
• صدا زدن المان برحسب class(که با نقطه نشان می‌دهیم)
• صدا زدن المان بر حسب id (که با # نشان می‌دهیم)

از هر سه روش می‌توان استفاده نمود ولی فعلا در اینجا از روش اول یعنی صدا زدن بر حسب نام استفاده می‌کنیم. حالا فایل style.css که در قدم اول ایجاد کرده بودیم را با Notepad باز کرده و اولین خط کدهای css رو اینجا وارد می کنیم:

body{
background:red;
}
p{
color:blue;
}

چیزی که در نتیجه اجرای کد می‌بینیم، این است که رنگ بک‌گراند قرمز و رنگ پشت متن آبی شده است.

جمع بندی

در دنیای تکنولوژی امروز، زبان‌های برنامه نویسی متعددی وارد بازار شده است. هریک از این زبان‌ها متناسب با حوزه کاری خاصی پدید آمده‌اند. خوب است بدانید، از بین تمامی این زبان‌ها، تنها چند مورد آن‌ها توانسته‌اند جای خود را در بین طراحان سایت و برنامه نویسان باز کنند. دو مورد از این زبان‌های محبوب css و html5 هستند. در این مقاله همه چیز را درمورد کدنویسی html5 و css شرح دادیم. اگر قصد دارید در حوزه طراحی سایت و به خصوص طراحی فرانت اند فعالیت کنید، پیشنهاد ما به شما یادگیری این دو زبان برنامه نویسی می‌باشد.