شروع طراحی سایت با یادگیری html
برای طراحی سایت ابتدا باید از یادگیری html شروع کنید. html سادگی خاصی دارد اما دانستن تگ‌های معروف و کاربرد آنها از پیش‌نیازهای اصلی هر طراح وب است.
html چیست؟
اگر بخواهید بدانید html که “اچ تی ام ال” خوانده می‌شود، چیست؟ در پاسخ باید گفت که HTMLدر واقع مخفف عبارت Hyper Text Markup Language است که معادل فارسی زبان نشانه‌گذاری فرامتن است. این زبان نشانه‌گذاری دارای یک سری Tag یا تگ است که با قرارگیری آنها در کنار هم و تعاملات بین آنها، طبق قواعد خاص و استانداردی که نیاز است، در مرورگر تشکیل یک صفحه وب را می‌دهند. در واقع html، استخوان‌بندی یا اسکلت اصلی یک صفحه از سایت را تشکیل می‌دهد و همانند مصالح موردنیاز برای ساخت یک ساختمان (سیمان، گچ، میلگرد، سنگ، چوب و ...) است که باید از ابتدا تهیه شود تا سپس بتوان با در کنار هم قرار دادن آنها و همچنین شکل و قالب دادن به هر یک توسط سایر امکانات یا تکنولوژی‌های رایج در دسترس مانند css، جاوا اسکریپت و … (که در آینده و پس از یادگیری html آنها را یاد خواهیم گرفت) بتوان یک وبسایت را در حدی که بتواند نیازها را براورده کند ساخت.
اگر بخواهید با یک مثال به صورت فیلم آموزشی مطالبی که در ادامه گفته خواهد شد؛ از جمله نصب و استفاده از visual studio code را ببینید، می‌توانید ویدئوی زیر را مشاهده کنید. در واقع با دیدن این فیلم کوتاه آموزشی و یا با مطالعه ادامه این مقاله، اگر بخواهید بدانید که چگونه می‌توانید در ویژوال استودیو کد html بنویسید می‌تواند راهنمای خوبی برای شما باشد.
برای یادگیری html چه چیز نیاز است؟
اگر بخواهید بدانید که برای یادگیری html چه چیزی نیاز است؟ باید گفت که برای ساخت یک صفحه html نیاز به برنامه‌های پیچیده ای ندارید و حتی این صفحه را با یک فایل notepad هم می‌توانید بسازید و در نهایت، پسوند فایل را از .txt به .html تغییر دهید و با کلیک بر روی آن نتیجه را در مرورگر ببینید. اما برای اینکه کمی راحت‌تر و حرفه‌ای‌تر کار کنید، لازم است تا یک ادیتور یا ویرایشگر html را ابتدا نصب کنید. با یک سرچ اولیه متوجه می شودید که ویرایشگرهای متعددی در بستر اینترنت به این منظور فراهم شده‌اند که دو نمونه از معروف‌ترین آنها Atom و Visual Studio Code هستند. در اینجا ما قصد نداریم تا مقایسه‌ای بین این دو بکنیم و تنها به معرفی آنها پرداختیم؛ اما ما برای آموزش از Visual Studio Code (ویژوال استودیو کد) که یک ویرایشگر بسیار خوب و حرفه‌ای html است و به جرئت می‌توان گفت که بیشتر طراحان و توسعه‌دهندگان وب از این ویرایشگر استفاده می‌کنند، بهره خواهیم گرفت.
چگونه Visual Studio Code را نصب کنیم؟
اگر بخواهید Visual Studio Code را نصب کنید، باید ابتدا روی لینک دانلود فایل نصب ویژوال استودیو کد مراجعه کنید، سپس یکی از سیستم‌عامل‌های ویندوز، لینوکس یا مک و سایر جزئیات مانند نسخه 32 یا 64 بیت و … را انتخاب کنید و شروع به دانلود کنید و سپس با کلیک روی آن مراحل نصب را سپری کنید تا روی سیستم شما نصب گردد.
چگونه اولین کد html بنویسیم؟
بسیاری از دوستان که یک ویرایشگر html را نصب می‌کنند، بلافاصله دنبال این هستند که اولین کد html خود را بنویسند؛ اما چگونه؟ برای نوشتن اولین کد html با ویژوال استودیو کد لازم است ابتدا یک فولدر در جایی که می‌خواهید پروژه‌های خود را ثبت کنید، ایجاد کنید. نام آن را مثلا 001 بگذارید، چرا که این اولین پروژه شما است. وارد ویژوال استودیو کد شوید، از منوی بالا روی File و سپس گزینه Open Folder کلیک کنید. فولدری که با نام 001 ساخته بودید را انتخاب کنید. حالا هر عملیاتی که انجام دهید در همین فولدر انجام می‌شود. از بخش سمت چپ ویرایشگر، روی Explorer کلیک کنید تا چنانچه آن را نمایش نمی‌دهد، ظاهر شود؛ حالا در همین پنجره Explorer و از قسمت بالای آن، روی گزینه New File که یک علامت بعلاوه (+) هم در کنار خود دارد کلیک کنید. در باکس ظاهر شده نام فایل را قرار دهید (مثلا Index.html). به این ترتیب یک فایل html با نام Index در فولدر 001 ایجاد می‌شود که محتوای داخل آن در پنجره سمت راستی مشاهده می‌شود. به دلیل اینکه هنوز چیزی در آن ننوشته اید، خالی است اما نگران نباشید چرا که می‌خواهیم آن را با کدهای ساده و اولیه پر کنیم.
در اینجا لازم به توضیح است که یک فایل استاندارد html بخش‌های مشخصی با ترتیب مشخص باسد داشته باشد. برای مثال ابتدا نوع فایل را که به صورت html است به مرورگر اعلام می‌کنند که با DOCTYPE مشخص می‌شود؛ سپس خود تگ اصلی <html> نوشته شده و آنگاه بخش <head> و سپس <body> هم آورده می‌شود. البته دقت کنید که همه این تگ‌ها باید بسته شوند که این کار با یک اسلش (/) قبل از پایان محل بسته شدن تگ نشانه گذاری می‌شود و به این ترتیب محدوده هر تگ مشخص می‌شود. اگر بخواهید بدانید که تاکنون چه چیزهایی را گفته ایم به پنل زیر دقت کنید:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
کدهای بالا در واقع از جمله ضروریات هر فایل html هستند که نوشته شدند. البته بزرگ یا کوچک بودن حروف اهمیتی ندارد، اما توصیه ما این است که این استاندارد را رعایت کنید. در خصوص دندانه‌گذاری یا Indenting یا پیش‌آمدگی برخی تگ‌ها اجباری وجود ندارد، اما برای فهم محدوده هر تگ و افزایش خوانایی، پیشنهاد می‌شود حتما آن را رعایت کنید. فواصل خالی بین هر تگ هم نادیده گرفته می‌شود و شما حتی می‌توانید باز شدن و بسته شدن هر تگ را در یک خط نیز نشان دهید. البته خود نرم افزار ویژوال استودیو کد در بخش Outline ترتیب و محتویات هر کد را نیز نشان می‌دهد که می‌توانید به آن نیز توجه کنید. چنانچه در یافتن بخش‌هایی از ادیتور ویژوال استودیو کد که در بالا گفته شد، مشکلی داشتید، می‌توانید تصویر زیر را مشاهده کنید که تمام ابزارهایی که در این آمورش گفته شد را با فلش‌های جهت‌دار و راهنما مشخص کرده است.
بله دوستان به همین سادگی؛ ورود اولین گامتان را به دنیای طراحی وب و سایت تبریک می‌گوییم؛ با نیوسان‌وب همراه باشید تا در آینده درخصوص تگ‌های دیگر، کاربردها و روش کار با هر یک توضیحات لازم را ارائه نماییم.
در پایان اگر احساس کردید که نیاز به اطلاعات بیشتری دارید، می‌توانید ویدئوی آموزشی راهنمای دانلود و نصب ویژوال استودیو کد برای شروع برنامه‌نویسی از یوتیوب را هم مشاهده نماییید.
جمع‌بندی
اگر بخواهیم مطالب را جمع‌بندی کنیم باید بگوییم که در این مقاله در خصوص چیستی html نکاتی را ارائه کردیم؛ گفتیم که باید از یک ویرایشگر به منظور کار با فایل های html استفاده کنیم که به این منظور ما visual studio code را نصب کردیم. طریقه پیکر بندی اولیه یک فایل html را گفتیم و در نهایت توصیه‌هایی را برای افزایش خوانایی کدهای شما انجام دادیم که در آینده و با مقالات تکمیلی، شما را با تگ‌های بیشتر و همینطور کاربردهای آنها آشنا خواهیم کرد.
لینک این مقاله را در شبکه‌های اجتماعی به اشتراک بگذارید.