html و css چیست – راهنمای یادگیری html و css + معرفی منابع آموزشی

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

HTML چیست؟

HTML اولین بار توسط تیم برنرز لی، رابرت کالیو در سال ۱۹۸۹ ایجاد شد و مخفف عبارت Hyper Text Markup Language است. Hyper Text یا فرامتن به این معنی است که صفحه ما دارای لینک‌ها و یا پیوندهایی است که به خواننده اجازه می‌دهد به مکان‌ها دیگر صفحه یا به صفحات دیگر بروند. آخرین نسخه با نام HTML5 شناخته می شود. HTML زبانی برای توصیف ساختار صفحات وب است. با استفاده از HTML نویسندگان سایت‌ها به موارد زیر دسترسی خواهند داشت:

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

بدین ترتیب HTML را می‌توانیم مهم‌ترین ابزار در طراحی ساختار یک صفحه در دنیای وب بدانیم که محتوای صفحه را برای مخاطب قابل فهم می‌کند. در یادگیری html و css ما ابتدا تگ‌ها و اتریبیوت‌ها را خواهیم آموخت.

تگ در html چیست؟

در زبان html ما از تگ‌های متنوعی برای مشخص کردن بخش‌های مختلف نوشته خود استفاده می‌کنیم؛ به طور مثال زمانی که در نوشته خود از تگ title استفاده می‌کنیم، به مرورگر نشان می‌دهیم که آنچه که در این تگ نوشته شده، عنوان صفحه است و باید آن را مشخصاً به مخاطب یا ربات‌هایی که در حال بازدید صفحه هستند، نشان دهد. در زبان HTML ما تگ‌های فراوانی داریم که از هر کدام برای نمایش خصوصیت ویژه‌ای در متن استفاده می‌شود. برخی از این تگ‌ها head، title، body، header، footer، article، section، p، div، span aside، audio، canvas، datalist، details، embed، nav، output، video، ul، ol ، li هستند.

اتریبیوت Attribute چیست؟

زمانی که می‌خواهیم به یک تگ ویژگی خاصی دهیم، مثلاً می‌خواهیم منبع آن را مشخص کنیم یا مثلاً به یک لینک بگوییم که در تب جدید باز شود، از اتریبیوت‌ها استفاده می‌کنیم. در زیر اتریبیوت‌های موجود در تگ image یا تصویر را مشاهده می‌کنید:

<img src="mydog.jpg" alt="A photo of my dog.">

در این مثال، منبع تصویر (src) و متن جایگزین (alt) است که ویژگی‌های خاص تگ img را برای ما مشخص می‌کنند. شما تمامی تگ‌های موجود در HTML را به خوبی در آموزش فرادرس خواهید آموخت، اگر به این حوزه علاقه‌مند هستید، پیشنهاد می‌کنیم تا وارد لینک زیر شوید و آموزش اچ تی ام ال HTML مقدماتی فرادرس را ببینید و از یادگیری با آن لذت ببرید:

• آموزش اچ تی ام ال – طراحی وب با HTML – مقدماتی – کلیک کنید

XHTML چیست؟

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

CSS چیست؟

CSS را می‌توانیم زبانی برای ارائه ظاهر مناسب برای مخاطب بدانیم. در CSS رنگ‌ها، طرح بندی و فونت‌ها و سایر موضوعات ظاهری صفحه مشخص می‌شوند. در این زبان نحوه نمایش عناصر مختلف صفحه در دستگاه‌های مختلف (مانند دسکتاپ و یا موبایل) بر اساس اندازه و بزرگی و کوچکی صفحه تعیین می‌شود. ما غالباً html و css را مکمل هم و در کنار هم می‌دانیم ولی جالب است بدانید که شما می‌توانید از CSS در تمام زبان‌هایی که مبتنی بر زبان XML نوشته شده‌اند، استفاده کنید.

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

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

• مجموعه آموزش وردپرس – کلیک کنید

ویرایشگرهای مناسب برای html و css

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

ویرایشگر Sublime Text

ویرایشگر Sublime Text یکی از بهترین ویرایشگرها برای شروع کار کد نویسی است. این ویرایشگر رایگان است و در سیستم عامل‌های ویندوز، مک و لینوکس قابل نصب می‌باشد.

مزایای کار با سابلایم

• نصب و راه‌اندازی آن آسان است.
• برای افراد مبتدی مناسب است.
• در کدنویسی از طرح‌های رنگی خوبی بهره می‌برد.
• به راحتی قابل تنظیم است

معایب سابلایم

• این ویرایشگر قابلیت چاپ اسناد و کدها را ندارد.
• در سابلایم هیچ نوار ابزار یا داشبوردی در دسترس نیست.

ویرایشگر ++Notepad

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

مزایای کار با ویرایشگر ++Notepad

• رابط کاربری ساده‌ای دارد و این موضوع جلوی پرت شدن حواس کدنویس علی الخصوص برنامه نویسان مبتدی در html و css را می‌گیرد.
• این ویرایشگر قابلیتا تکمیل کردن کدها را به صورت خودکار دارد.
• این ویرایشگر از پلاگین‌های متنوعی برای توسعه دهنده‌ها برخوردار است.

معایب کار با ویرایشگر ++Notepad

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

ویرایشگر کد Komodo Edit

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

مزایای کار با کوکودو ادیت

• رابط برنامه نویسی آن ساده و آسان است.
• امکان نصب آن در انواع سیستم عامل‌های مک، ویندوز و لینوکس موجود است.
• از زبان‌های برنامه نویسی متنوعی پشتنیبانی می‌کند.

معایب کار با کومودو

• در کومودو امکان تکمیل کدها به صورت خودکار وجود ندارد.
• انجام تغییرات در تنظیمات بصری آن دشوار است.

شروع کار با HTML

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

• !DOCTYPE html – این تگ مشخص کننده زبانی است که شما در صفحه آن را می‌نویسید. به طور مثال برای شروع نوشتن کد HTML باید در این بخش زبان HTML 5 را قرار دهید.
• html – این تگ نشان می‌دهد که از اینجا به بعد می‌خواهیم با کد HTML بنویسیم.
• head – اینجا جایی است که تمام داده‌های اصلی صفحه ما در آن قرار می‌گیرند. از این داده‌ها برای شناخته شدن صفحه در موتورهای جستجو و اجزای صفحه در مرورگرها و برنامه‌های مختلف استفاده می‌شود.
• body – در این تگ آنچه را که می‌خواهیم در صفحه نمایش داده شود، در کدها قرار می‌گیرد.

در بالا تگ‌های اصلی را برای شما معرفی کردیم. در ادامه به تگ‌های اضافی که داخل هر کدام از این تگ‌های اصلی قرار می‌گیرند، می‌پردازیم. در داخل تگ head، یک تگ همیشه وجود دارد و آن هم تگ title است. تگ تایتل را می‌توانیم مهم‌ترین تک هر صفحه بنامیم که عنوان آن صفحه در آن قرار می‌گیرد. تگ دیگر تگ متا meta است که این جایی است که اطلاعات مربوط به سند یا صفحه ما در آن ذخیره می‌شود. در این تگ رمزگذاری کاراکتر، نام (زمینه صفحه)، توضیحات و سایر اطلاعات قرار داده می‌شوند. در ادامه نمونه‌ای از این تگ‌ها را داخل تگ head با هم می‌بینیم:

<head>
<title>My First Webpage</title>
<meta charset="UTF-8">
<meta name="description" content="This field contains information about your page. It is usually around two sentences long.".>
<meta name="author" content="Conor Sheils">
</header>

اضافه کردن محتوا در صفحه

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

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

• h1
• h2
• h3
• h4
• h5
• h6

نحوه اضافه کردن متن در صفحه

افزودن متن به صفحه HTML با استفاده از تگ p انجام می‌شود. تگ p نمایانگر یک پاراگراف جدید در نوشته است و ما تمام متن معمولی خود را در عنصر p قرار می‌دهیم. همچنین در زمان قرار دادن محتواهای خود ما از عناصر و تگ‌های دیگری در نوشته خود استفاده می‌کنیم؛ مثلاً زمانی که می‌خواهیم کلمه خود را به ولد کنیم، از تگ b استفاده می‌کنیم. در زیر برخی از این تگ‌ها را می‌بینید:

• b – برای به ولد کردن نوشته به کار می‌رود.
• strong – برای مشخص و برجسته کردن کلمه یا عبارتی در نوشته علی‌الخصوص برای موتورهای جستجو از این تگ استفاده می‌شود. عمدتاً کلماتی که در این تگ قرار می‌گیرند، در مرورگرهای مختلف به صورت به ولد نمایش داده می‌شوند.
• i – برای ایتالیک کردن عبارت است.
• em – معمولاً برای نوشتن کپشن یا توضیحات تصویر به کار می‌رود.
• a – برای قرار دادن یک لینک یا پیوند در نوشته از آن استفاده می‌شود.

چگونه تصاویر را در HTML به وب سایت خود اضافه کنیم؟

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

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

<img src="yourimage.jpg" alt="Describe the image" height="X" width="X">

شروع کار با CSS

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

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

h2 {
  color: red;
  text-align: center;
}

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

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

• مجموعه آموزش طراحی سایت – کلیک کنید