آموزش طراحی یک صفحه ساده وبسایت با HTML و CSS برای مبتدیان

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

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

آشنایی با HTML و CSS و کاربردهای آن‌ها

پیش از ورود به بحث آموزش طراحی سایت به زبان ساده با HTML و CSS بهتر است به صورت مختصر با این دو زبان و کاربردهای آن‌ها آشنا شویم. اسکلت اصلی تمام وب‌سایت‌هایی که در دنیای اینترنت مشاهده می‌کنید زبان HTML است که به عنوان یک زبان نشانه‌گذاری شناخته می‌شود. HTML زبان برنامه‌نویسی محسوب نمی‌شود و تنها ابزاری برای نمایش محتوا در ساختارهای از پیش تعیین شده است. این زبان هیچ ظاهری ندارد و این CSS است که به عنوان مکمل ظاهر و شکل و شمایل به آن می‌دهد.

بیشتر بخوانید: رشته مهندسی کامپیوتر مناسب چه کسانی است؟

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

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

آموزش طراحی وب سایت با HTML و CSS

به صفحاتی که در اینترنت و در مرورگرهای اینترنتی به نمایش درمی‌آید صفحه وب (Web Page) نام دارد که امکان تعامل با کاربران را فراهم می‌کند. URL آدرس دسترسی به صفحات وب است که توسط زبان HTML کدنویسی شده است. در واقع صفحه وب یک سند است که قابلیت نمایش در مرورگرهای اینترنتی را دارد. این صفحات می‌توانند حاوی متن، تصویر، لینک و فایل‌های چندرسانه‌ای باشند. آموزش طراحی ساده وب سایت با HTML و CSS برای افراد مبتدی در رشته کامپیوتر به شرح زیر انجام می‌شود.

گام اول: نصب ادیتور مناسب

اولین گام در آموزش طراحی سایت به زبان ساده با HTML و CSS نصب یک ادیتور مناسب بر روی سیستم است. یکی از ساده‌ترین و ابتدایی‌ترین ادیتورهایی که برای کدنویسی می‌توان مورد استفاده قرار داد، نرم‌افزار Notepad است که به صورت پیش‌فرض بر روی ویندوز نصب بوده و می‌توان از آن استفاده کرد. البته پیشنهاد می‌شود که از یک ادیتور با امکانات بیشتر مانند Visual Studio Code استفاده کنید. این ویرایشگر بسیار کاربرپسند بوده و از امکانات و قابلیت‌های حرفه‌ای دارد که شما از داشتن بک ویرایشگر کد بی‌نیاز می‌کند. یکی از مهم‌ترین مزایای این ادیتور قابلیت تکمیل خودکار آن است.

گام دوم: ایجاد فایل HTML

پس از نصب ویرایشگر VSC وارد برنامه شده تا بتوانید یک فایل HTML ایجاد کنید. در صفحه برنامه به قسمت بالا و سمت چپ مراجعه کرده و از سربرگ File گزینه New را انتخاب کرده و یک فایل جدید با پسوند .html ایجاد کنید. کافی است برای فایل خود یک نام انتخاب کنید تا به راحتی فایل مورد نظر ایجاد شود.

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

گام سوم: ایجاد کدهای صفحه HTML

در این قسمت از آموزش طراحی وب سایت با HTML و CSS پس از ایجاد فایل وارد صفحه شده و با فشردن کلیدهای Shift+1 و کلیک بر روی (!) کدهای صفحه ‌HTML را به صورت خودکار ایجاد کنید.

گام چهارم: نوشتن تگ‌های HTML

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

تگ HTML اولین تگی است که در سند ایجاد شده می‌تواند مشاهده کرد. این تگ دارای خصوصیت Lang بوده و می‌توان زبان را به فارسی تغییر دارد. تگ‌ Head به تگ‌هایی گفته می‌شود که می‌توان در آن کدهای جاوا اسکریپت، فونت‌ها یا فایل‌های CSS را بارگذاری کرد. تگ‌های Body مهم‌ترین تگ‌ها در یک صفحه HTML هستند که کدهای اصلی مربوط به محتوای سایت که برای کاربران قابل مشاهده هستند، در این تگ‌ها قرار می‌گیرند.

در آموزش طراحی وب سایت با HTML و CSS به منظور طراحی یک صفحه وب سایت ساده از تک H1 شروع می‌کنیم که مربوط به عنوان سایت می‌شود. برای این کار ابتدا <h1> را تایپ کرده و پس از آن عنوان سایت را درج می‌کنیم و مجدد در پاپان <h1> را تایپ می‌کنیم تا متن وارد شده به عنوان تگ H1 شناخته شود. به طور کلی برای نوشتن همه تگ‌ها به این صورت باید عمل کرد تا متن بین دو تگ توسط کامپیوتر شناخته شود.

تگ‌های هد از H1 تا H6 قابل تغییر هستند و می‌توانند برای نشان دادن تیترهای مختلف در سایت مورد استفاده قرار بگیرند. یکی از تگ‌های مهمی که در کدنویسی سایت با زبان HTML می‌توان مورد استفاده قرار داد، تگ Section است که برای قسمت‌بندی کردن صفحات وب‌سایت مورد استفاده قرار می‌گیرد.

بیشتر بخوانید: درآمد مهندس کامپیوتر در ایران چقدر است؟

پس از استفاده از تگ H1 (<h1>) و درج عنوان سایت و همچنین استفاده از تگ Section (<section>) برای جداسازی این دو قسمت، در مرحله بعدی آموزش طراحی وب سایت با HTML و CSS از تگ H2 (<h2>) برای عنوان مطلبی که قرار است در سایت منتشر شود استفاده می‌کنیم. در نهایت با استفاده از تگ P (<p>) و قرار دادن متن مطلب مورد نظر در بین این تگ آن را به عنوان محتوای اصلی سایت معرفی می‌کنیم. به راحتی و با استفاده از این چند تگ می‌توان یک صفحه وب‌سایت ساده و حاوی عنوان و متن ساخت و در اینترنت به نمایش درآورد.

ایجاد فایل CSS

اگر قصد طراحی و شکل‌دهی به صفحه وب‌سایت ایجاد شده دارید باید یک فایل CSS ایجاد کنید. برای ایجاد این فایل در آموزش طراحی ساده وب سایت با HTML و CSS از منوی File گزینه New File را انتخاب کرده و با کلیک بر روی گزینه Select a Language زبان مورد نظر را بر روی CSS قرار دهید. می‌توانید این فایل را با عنوان Style ذخیره کرده و به صورت زیر در تگ <head> قرار دهید:

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

درج عکس در سند HTML

در این قسمت از آموزش طراحی سایت به زبان ساده با HTML و CSS اگر قصد دارید در کنار متن در صفحه سایت طراحی شده از تصویر نیز استفاده کنید باید از تگ Section استفاده کرد و به صورت زیر کدنویسی کرد:

<section>

<img src=”./html.png” alt=” تصویر لگوی html “>

</section>

سخن آخر

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