ساخت نمونه سایت ساده با HTML از صفر تا صد

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

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

کدنویسی وب‌ سایت چقدر طول می‌ کشد؟

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

فیلم آموزش اچ تی ام ال – طراحی وب با HTML – مقدماتی در فرادرس

کلیک کنید

آیا برای ساخت وبسایت کدنویسی لازم است؟

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

HTML‌ چیست؟

«HTML» یا «Hyper Text Markup Language»، نوعی زبان ضروری برای ایجاد صفحات وب است. HTML در اصل به عنوان اجزای سازنده برای هر وب‌سایتی که در اینترنت وجود دارد، عمل می‌کند. HTML در حقیقت ساختار اصلی یک وب‌سایت را تشکیل می‌دهد. هنگامی‌که کدهای HTML سایت نوشته شد به دنبال آن می‌توان صفحات ساخته‌شده را با افزودن کدهای زبان‌های دیگر مانند CSS و جاوا اسکریپت، بهبود بخشید.

فیلم آموزش پروژه محور اچ تی ام ال و سی اس اس HTML و CSS در فرادرس

کلیک کنید

HTML ساختار و طرح‌بندی وب‌سایت را ایجاد می‌کند. این ساختار با استفاده از عناصر مختلف تعریف می‌شود. برای اینکه مرورگر محتوای مورد نظر را نمایش دهد، هر قسمت از محتوا باید به‌صراحت مشخص شود. به‌عبارتی‌دیگر HTML وسیله ارتباطی است که به مرورگر آموزش می‌دهد که چگونه محتوا را بر روی صفحه‌نمایش دهد. می‌توان کد منبع HTML هر وب‌سایتی را با کلیک راست بر روی مرورگر و رفتن به بخش «مشاهده منبع» (View Source)، دید. این عمل صفحه‌ای را نشان می‌دهد که مبانی HTML آن سایت را با جزئیات نشان می‌دهد.

اصطلاحات کلیدی HTML

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

• «عنصر» (Element): عنصر در اصل جزئی مجزا از صفحات وب است که معانی سند HTML را نشان می‌دهد. به عنوان مثال، عنصر title نشان‌دهنده عنوان صفحه است.
• «معناشناسی» (Semantics): به معنای عنصر خاصی اشاره دارد.
• «سینتکس» (Syntax): به ساختار زبان برنامه‌ نویسی اشاره دارد.

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

• p : پاراگرافی را توصیف می‌کند.
• img : تصویر را به صفحه اضافه می‌کند.
• h1 : متن را در بزرگ‌ترین اندازه تنظیم کرده و در اصل عنوان اصلی صفحه وب محسوب می‌شود.
• a : این تگ لینکی به سایر فایل‌های HTML ایجاد می‌کند.

برای استفاده از تگ‌ها باید محتوا یا عناصر مد نظر را بین تگ باز (<>) و  تگ بسته (</>) قرار داد. تگ بسته شدن شامل علامت اسلش «/» روبه‌جلو است ولی تگ آغازین این ویژگی را ندارد. تگ‌های HTML به حروف بزرگ و کوچک حساس نیستند. مثال زیر برای نشان دادن نحوه نوشتن تگ مهم است:

1<p>This is a paragraph element.</p>

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

1<p><strong>These tags are nested properly.</strong></p>
2<p>This tag is not nested.</p>

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

ویژگی ها و هایپر لینک در HTML

در HTML، ویژگی‌ها اطلاعات اضافی در مورد عناصر ارائه می‌دهند و مانند ویژگی‌هایی برای آن عناصر عمل می‌کنند. ویژگی‌ها در تگ آغازین قرار می‌گیرند. برای این هدف از علامت مساوی = استفاده شده و مقدار ویژگی در علامت بک تیک " " قرار خواهد گرفت. مثال زیر برای بیان این هدف است:

1<tagName attribute_name="attribute_value"></tagName>

ویژگی‌ها می‌توانند کارهای مختلفی مانند جاسازی تصاویر، افزودن رنگ، اعلام زبان صفحه یا ارائه عنوان انجام دهند. به عنوان مثال، برای  رنگی کردن متن، می‌توان از ویژگی style با فرمت زیر استفاده کرد:

1<h1 style="color:green">Hello, World!</h1>

توجه: رنگ را می‌توان با استفاده از کدهای رنگ «Hex» یا یکی از ۱۴۰ نام رنگ متنی که در HTML تعبیه شده است مشخص کرد.

رایج‌ترین مورد استفاده از ویژگی‌ها، لینک کردن صفحات به همدیگر است. تگ A در ‌HTML همراه با ویژگی href پیوند یا به اصطلاح لینکی بین صفحات ایجاد می‌کند که مثال زیر برای بیان این هدف است:

1<a href="http://www.blog.faradars.org">Faradars</a>

تگ بالا لینکی به نام Faradars ایجاد می‌کند که کاربر با کلیک بر روی آن، به URL مشخص‌شده (در این مورد، https://blog.faradars.org/ ) هدایت می‌شود.

تایتل ها و لیست ها در HTML

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

1<h1>Heading Level 1</h1>
2<h2>Heading Level 2</h2>
3<h3>Heading Level 3</h3>
4<h4>Heading Level 4</h4>
5<h5>Heading Level 5</h5>
6<h6>Heading Level 6</h6>

برای ایجاد فهرست یا لیست، HTML از تگ ul برای لیست‌های نامرتب و تگ ol برای لیست‌های مرتب‌شده استفاده می‌کند. هر مورد در لیست با تگ li نشان داده می‌شود. نمونه‌ای از لیست نامرتب به صورت زیر است:

1<h1>Faradars Courses</h1>
2<ul>
3    <li>Javascript</li>
4    <li>Html</li>
5    <li>Css</li>
6    <li>Python</li>

همچنین نمونه‌ای از لیست سفارشی به صورت زیر است:

1<h1>Shopping Instructions</h1>
2<ol>    
3    <li>Go to the store.</li>
4    <li>Locate eggs, apples, carrots, and noodles.</li>
5    <li>Go to checkout counter.</li>
6    <li>Scan and purchase items.</li>

این ساختارها به سازمان‌دهی محتوا به صورت سلسله مراتبی کمک می‌کند و دسترسی و خوانایی سند HTML را بهبود می‌بخشد.

افزودن تصاویر به صفحه وب

برای افزودن تصاویر به صفحه وب، می‌توان از تگ img استفاده کرد. این تگ به ویژگی SRC نیاز دارد که مسیر فایل را به تصویری که کاربر می‌خواهد نمایش دهد را شامل می‌شود. علاوه بر این ، می‌توان نوعی ویژگی به نام alt به معنای متن جایگزین درج کرد. این متن تصویر را در صورت عدم بارگیری برای کاربر توصیف خواهد کرد. در اینجا مثالی برای استفاده از تگ img آورده شده است.

1<!DOCTYPE html>
2<html>
3<head>
4</head>
5<body>
6<h1 style="font-family: Vazirmatn" align="right" dir="rtl">لوگوی فرادرس</h1>
7<div class="imgContainer" dir="rtl">
8<img src="https://blog.faradars.org/logo/faradars-logo.svg" alt="این تصویر لوگوی فرادرس است">
9<h4 class="caption" style="font-family: Iransans" align="right" dir="rtl"> به این آموزش از مجله فرادرس خوش آمدید</h4>
10</body>
11</html>

خروجی کدهای بالا در مرورگر به صورت زیر است:

توجه: تگ img نیازی به تگ بسته شدن ندارد و در عنصر div با یک ویژگی کلاس به نام imgcontainer برای اهداف ظاهر طراحی شده قرار می‌گیرد. منبع تصویر ( SRC ) مسیر فایل به تصویر است و متن جایگزین ( alt ) توضیحی از تصویر را ارائه می‌دهد.

ساخت جدول HTML

در این بخش از ساخت نمونه سایت ساده با HTML به بررسی نحوه ساخت جدول در HTML خواهیم پرداخت تا در سناریوهایی که لازم است از این جداول بتوانیم به نحو احسن استفاده کنیم. برای ایجاد جدول در HTML ، از تگ table استفاده می‌شود. در این نوع جداول ردیف‌ها با تگ tr اضافه می‌شوند و در هر سطر از تگ td برای مشخص کردن سلول‌ها استفاده خواهد شد. مثال زیر برای بیان این هدف است:

1  <table>
2     <tr>
3       <th>Name</th>
4       <th>Date of Birth</th>
5       <th>Weight</th>
6     </tr> 
7     <tr>
8       <td>Kamel</td>
9       <td>12/13/1994</td>
10       <td>70</td>
11     </tr>    
12   </table>

در مثال بالا، Th برای هدر جدول (ردیف اول) استفاده می‌شود و td برای سلول‌های داده واقعی استفاده خواهد شد. جدول فوق سبک و استایل خاصی ندارد و برای استایل بخشیدن به آن باید از زبان شیوه‌نامه CSS استفاده کرد.

قالب بندی سند HTML

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

1<DOCTYPE! html>
2<html> 
3  <head>
4    <title>A Basic Web Page</title>
5  </head>
6  <body>
7    <h1>First HTML File</h1>
8    <p>Congratulations! You're learning how to create a webpage.</p>
9  </body>
10</html>

تجزیه کد بالا به صورت زیر است:

• اعلامیه DOCTYPE : اعلامیه ! doctype html  نسخه HTML را مشخص می‌کند (HTML5 در این مورد).
• عنصر ریشه: تگ html عنصر ریشه را نشان می‌دهد و همه عناصر دیگر در داخل آن قرار دارند.
• عنصر Head : عنصر Head حاوی ابرداده در مورد سند بوده و شامل عنصر title برای تنظیم عنوان صفحه است.
• عنصر body : عنصر body حاوی محتوای اصلی صفحه وب است. عناصر قابل‌مشاهده صفحه در این بخش قرار می‌گیرند.
• محتوای صفحه: در داخل body ، عنوان h1 داریم که نشان‌دهنده بالاترین سطح است. همچنین تگ p برای پاراگراف وجود دارد که حاوی پیغامی است.
• عناصر سطح بلوک و درون‌خطی: عناصر سطح بلوک (مانند h1 و p ) عرض کامل صفحه را می‌گیرند. عناصر درون‌خطی (مانند TITE ) عرض کامل را نمی‌گیرند و در جریان متن ظاهر می‌شوند.

درک این عناصر ساختاری اساسی به ایجاد سند HTML کمک می‌کند. هر کدام از عناصر بالا هدف خاص در سازمان‌دهی و ارائه محتوا در یک صفحه وب‌ دارند.

مراحل ساخت نمونه سایت ساده با HTML

مراحل ایجاد نمونه سایت ساده با HTML به صورت زیر است:

1. انتخاب «ویرایشگر کد» (Code Editor) مناسب
2. ایجاد ساختار HTML سایت
3. نوشتن کدهای شیوه‌نامه CSS برای بهبود ظاهر سایت
4. ایجاد پیوند بین کدهای HTML و CSS
5. کدنویسی وب‌سایت واکنش‌گرا
6. تعاملی کردن وب‌سایت

فیلم آموزش طراحی وب با HTML اچ تی ام ال – تکمیلی در فرادرس

کلیک کنید

در ادامه تمامی مراحل گفته شده در بالا به صورت قدم به قدم ارائه خواهند شد.

۱. انتخاب کد ادیتور مناسب

انتخاب نوعی ویرایشگر کد مرحله‌ای ضروری برای توسعه‌دهندگان جدید است زیرا این ابزارها ویژگی‌هایی را ارائه می‌دهند که فرآیند کدنویسی را ساده می‌کند. به عنوان مثال، انتخاب ترجیحی بسیاری از کاربران، ویرایشگر کد ویژوال استودیو است که پیشنهاد‌های نحوی را برای جلوگیری از اشتباهات تایپی رایج که می‌تواند باعث ایجاد مشکل در کد شود، ارائه می‌کند. همچنین این «محیط توسعه یکپارچه» (IDE) تکمیل خودکار برای بستن تگ‌های HTML و نشانگرهای بصری در فایل‌های کاربر را ارائه می‌دهد که تشخیص بخش‌های مختلف کد را آسان‌تر می‌کند.

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

۲. ایجاد ساختار HTML سایت

HTML مخفف «Hypertext Markup Language» بوده و اساس و پایه توسعه و طراحی سایت است. این زبان نشانه‌گذاری ساختار اصلی سایت را شکل می‌دهد. برای درک بهتر وظیفه HTML بیایید فرایند ساخت خانه را بررسی کنیم. هنگامی‌که خانه‌ای ساخته می‌شود، مهندسان قبل از اینکه به فکر دکوراسیون خانه باشند، از پی، دیوارها، ستون‌ها و سقف خانه کار را شروع می‌کنند. به طور مشابه، با HTML، ساختار اصلی وب‌سایت شکل می‌گیرد. حال در این مرحله از آموزش ساخت نمونه سایت ساده با HTML، بعد از اینکه ابزار مناسب (ویرایشگر کد) انتخاب شد و هدف خود را درک کردیم نوبت به کدنویسی بخش HTML سایت می‌رسد که مراحل این کار در ادامه آمده است.

ایجاد فایل HTML

تمام کارهای کدنویسی ما در فایل‌های جداگانه‌ای که در دستگاه محلی خود ذخیره می‌کنیم انجام می‌شود. فایل اولیه‌ای که ایجاد خواهد شد همان سند HTML است. با ایجاد پوشه‌ای جدید برای فایل‌های وب‌سایت خود، کار را شروع خواهیم کرد و نام آن را Faradars-test خواهیم گذاشت. اکنون، باید پوشه را در ویرایشگر کد انتخابی خود باز کرده و در مرحله بعد فایلی به نام، .index.html ایجاد و در این فایل کدهای HTML خود را بنویسم. توجه به این نکته مهم است که نام‌هایی که برای فایل و پوشه‌های این آموزش انتخاب می‌شوند کاملاً فرضی هستند و کاربر به‌دلخواه خود می‌تواند آن‌ها را تغییر دهد. فقط باید پسوند فایل‌ها دقت کرد و برای فایل‌های HTML، پسوند .html و برای فایل‌های CSS، پسوند .css انتخاب کرد.

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

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4  </head>
5  <body>
6  </body>
7  	</head>
8  	<body>
9</html>

تشریح هریک از این عناصر به صورت زیر است:

• !DOCTYPE html : اعلامیه‌ای به مرورگر که نشان می‌دهد این فایل نوعی سند HTML است و نحوه پردازش کد را به آن آموزش می‌دهد.
• html : نوعی تگ باز که تمام کدهای HTML را در برمی‌گیرد و به مرورگر اجازه می‌دهد بداند کد از کجا شروع می‌شود و کجا به پایان می‌رسد.
• Head : تگی باز که حاوی تمام اطلاعات غیرقابل‌مشاهده در مورد صفحه وب است که به عنوان ابرداده نیز شناخته می‌شود.
• body : تگی باز که حاوی تمام محتوای قابل‌مشاهده در صفحه وب است. بعداً در این آموزش عناصری را به این تگ اضافه خواهیم کرد.

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

اضافه کردن عناصر ابر داده به صفحه سایت

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

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4  	<meta charset="UTF-8">
5  	<title>Test WebSite - Faradars Blog</title>
6  </head>
7  <body>
8  </body>
9  	</head>
10  	<body>
11</html>

عنصر  title در کد بالا به مرورگر در مورد نام موردنظر برای صفحه وب اطلاع می‌دهد. به عنوان مثال، اگر فایل در مروگر باز شود، برگه مرورگر Test WebSite - Faradars Blog را نمایش می‌دهد، همانطور که در تصویر مثال نشان داده شده است:

افزودن محتوا به تگ Body

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

1<!DOCTYPE html>
2<html lang="en">
3  
4   <!-- Metadata for the page -->
5   <head>
6       <!-- Title of webpage in the browser -->
7       <title>Test Website - Faradars Blog</title>
8       <meta charset="UTF-8">
9   </head>
10  
11   <!-- All visible content on the page -->
12   <body>
13       <!-- Main page heading -->
14       <h1 dir="rtl"> صفحه اصلی وبسایت آزمایشی -  مجله فرادرس </h1>
15     
16       <!-- A paragraph -->
17       <p dir="rtl" align="right">به این آموزش ساخت وبسایت از مجله فرادرس خوش آمدید</p>
18     
19       <!-- Image of smiley face -->
20       <img alt="Smiley face" src="https://blog.faradars.org/wp-content/uploads/2024/01/smiley-face.jpg">
21   </body>
22</html>

تشریح کارهای انجام شده در کد بالا به صورت زیر است:

• h1 : عنوان اصلی صفحه وب است. HTML دارای سطوح مختلف هدینگ‌ یا سرفصل‌های مختلف از یک تا ۶ است. به‌طور پیش‌فرض h1 بزرگ‌ترین هدینگ‌ را نمایش می‌دهد و بهترین ایده در طراحی سایت داشتن تنها یک h1 در صفحه است.
• p : نوعی عنصر پاراگراف برای افزودن متن به صفحه است.
• img : این تگ برای درج عنصر تصویر است. باید به این نکته توجه داشت که img تگ بسته شدن ندارد.

خروجی کدهای بالا به صورت زیر است:

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

توجه: ترتیب ویژگی‌های داخل تگ HTML تا زمانی که همه آن‌ها داخل تگی واحد باشند، مهم نیست.

۳. استایل بخشیدن به صفحه با CSS

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

فیلم آموزش پروژه محور اچ تی ام ال و سی اس اس HTML و CSS در فرادرس

کلیک کنید

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

ساخت فایل CSS و اضافه کردن قانون های آن

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

1p {
2    color: red;
3}

انتخاب‌گر p به CSS می‌گوید که کاربر می‌خواهد تمام پاراگراف‌های داخل HTML خود را هدف قرار داده و ویژگی‌های فهرست شده در {} را روی آن‌ها عمال کند. در مثال بالا، ویژگی color  آورده شده که روی مقدار red تنظیم شده است. با این حال، می‌توان طبق قانون‌های CSS به تعداد موردنیاز، ویژگی اضافه کرد. ممکن است متوجه شوید که پس از افزودن این قانون CSS به فایل، هیچ‌چیز در صفحه تغییر نمی‌کند. دلیلش این است که باید HTML و CSS به هم پیوند داده شوند که در مرحله بعد به این موضوع خواهیم پرداخت.

۴. ایجاد ارتباط بین HTML و CSS

برای اینکه کدهای CSS نوشته‌شده بر HTML تأثیر بگذارد، باید به مرورگر دستور داد که CSS را اعمال کند. روند این کار ساده بسیار است. باید به سادگی تگ link را به head کدهای HTML اضافه کرد.

1<link rel="stylesheet" href="style.css">

گنجاندن تگ link بدون ویژگی‌های rel و href به هیچ نتیجه‌ای منجر نمی‌شود، زیرا مرورگر نوع پیوند و مکان یافتن آن (style.css) را نمی‌داند. توجه به این نکته ضروری است که اگر به فایل CSS نام دیگری داده شده باشید، باید مقدار ویژگی href را در داخل بک تیک ( " " ) به‌روز کرد تا با نام فایل ساخته شده مطابقت داشته باشد. در غیر این صورت، مرورگر استایل‌بندی را اعمال نخواهد کرد. با ایجاد ارتباط بین فایل HTML و فایل CSS این بار خروجی برنامه به صورت زیر خواهد بود:

اعمال قوانین CSS بیشتر

برای درک بهتر نحوه کار قوانین CSS بهتر است که کمی بیشتر با آن‌ها دست و پنجه نرم کنیم که در این بخش از آموزش ساخت نمونه سایت ساده با HTML به این موضوع خواهیم پرداخت. برای این هدف قوانین CSS را به صورت زیر به روز خواهیم کرد:

1p {
2    color: red;
3}
4
5/* Additional CSS rules */
6body {
7  background-color: lightgray;
8}
9
10h1 {
11  font-size: 24px;
12}
13
14.text {
15  color: green;
16}
17
18#smiley {
19  width: 300px;
20  height: auto;
21}

تشریح قوانین فوق به صورت زیر است:

• قانون Body : رنگ پس‌زمینه صفحه وب را از سفید به خاکستری روشن تغییر می‌دهد.
• قانون H1 : اندازه فونت عنوان صفحه اصلی را کاهش می‌دهد.
• قانون Text Class : رنگ هر عنصری را که با ویژگی class تگ شده است به سبز تغییر می‌دهد و قانون پاراگراف بالای آن را لغو می‌کند.
• قانون ID Smiley : عرض تصویر ایموجی را روی ۳۰۰ پیکسل تنظیم می‌کند و به طور خودکار ارتفاع را تغییر می‌دهد.

توجه: هرگونه قوانین کلاس یا شناسه‌ای که در CSS نوشته شود به این معنی است که باید عناصر خاصی را که می‌خواهید در HTML خود هدف قرار دهید با ویژگی class یا id مربوطه، همراه با نامی که در CSS نوشته‌شده است، تگ کنید. قطعه کد به روز شده HTML ما این بار به صورت زیر است:

1<!DOCTYPE html>
2<html lang="en">
3    <head>
4        <link rel="stylesheet" href="style.css">
5     <title>Test Website - Faradars Blog</title>
6        <meta charset="UTF-8">
7    </head>
8    <body>
9        <h1 dir="rtl"> صفحه اصلی وبسایت آزمایشی -  مجله فرادرس </h1>
10        <p dir="rtl" align="right" class="text">به این آموزش ساخت وبسایت از مجله فرادرس خوش آمدید</p>
11        <img id="smiley" alt="Smiley face" src="https://blog.faradars.org/wp-content/uploads/2024/01/smiley-face.jpg">
12    </body>
13</html>

حال خروجی کدهای بالا با اعمال قوانین CSS ارائه شده به صورت زیر خواهد بود:

۵. واکنش گرا کردن سایت ساخته شده

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

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

اما مسئله این است که چرا واکنشگرایی آن‌قدر اهمیت دارد؟ طبق گزارش «StatCounter»، در سال ۱۴۰۰ (2021 میلادی)، ترافیک ارسال‌شده از سوی گوشی‌های تلفن همراه به وب‌سایت‌های موجود بیش از ۵۵ درصد از کل ترافیک اینترنت را تشکیل داد که این آمار روز به روز در حال افزایش است. اگر وب‌سایت نتواند از صفحه‌نمایش‌های کوچک تلفن تا تلویزیون‌های هوشمند پشتیبانی کند، کاربران زیادی را به احتمال زیاد از دست خواهد داد. علاوه بر این، موتور جستجوی گوگل، به عنوان یکی از فاکتورهای مهم بهینه‌سازی وب‌سایت برای موتورهای جستجو یا همان سئو، از سازگاری وب‌سایت با تلفن همراه به عنوان یکی از فاکتورهای مهم یاد می‌کند.

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

متا تگ Viewport در ساخت نمونه سایت ساده با HTML

قبل از ادامه فرایند ساخت سایت ساده با اچ تی ام ال، بررسی تگ مهم دیگر که باید به بخش head خود اضافه کرد، خالی از لطف نیست. این تگ، Viewport نام دارد که سینتکس آن به صورت زیر است:

1<meta name="viewport" content="width=device-width, initial-scale=1">

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

مدیا کوئری یا پرس و جوی رسانه ای در CSS

«پرس‌وجو رسانه‌ای» (Media Query) نوعی قانون CSS است که به CSS می‌گوید بر اساس عرض درگاه صفحه‌نمایش (عرض صفحه‌نمایش یا مرورگری که در آن صفحه وب نمایش داده می‌شود) متفاوت رفتار کند. کاربر آن عرض را مشخص کرده که این قابلیت نحوه تغییر CSS را مشخص خواهد کرد. به عنوان مثال در زیر ما عرض ایموجی را به ۴۰۰ پیکسل افزایش دادیم تا در صفحه‌نمایش‌های بزرگ‌تر نمایش بهتری داشته باشد. با این حال، باید اطمینان حاصل شود که در صفحه‌های کوچک‌تر هم نمایش مطلوبی داشته باشد؛ بنابراین، باید با نوشتن نوعی پرس‌وجوی رسانه‌ای به این هدف دست یابیم. در این پرس‌وجو اعلام‌شده است که وقتی صفحه‌نمایش دارای ۴۰۰ پیکسل عرض یا کوچک‌تر است، عرض ایموجی به ۳۰۰ پیکسل کاهش یابد. قطعه کد انجام این کار به صورت زیر است:

1@media only screen and (max-width: 400px) {
2  #smiley {
3  	width: 300px;
4  }
5}

در کدهای بالا پرس‌وجوی رسانه‌ای به انتهای فایل شیوه‌نامه CSS اضافه شده است. بهتر است همیشه این نوع قوانین را بعد از قوانین CSS معمولی خود قرار داد و آن‌ها را به ترتیب سازمان‌دهی کرد. به عنوان مثال، نوعی پرس‌وجو رسانه‌ای ۵۰۰ پیکسلی باید قبل از پرس‌وجو رسانه‌ای ۴۰۰ پیکسلی باشد. خروجی ساخت سایت ساده با HTML با اضافه کردن کدهای بالا این بار به صورت زیر است:

طراحی سایت روان یا Fluid Design

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

رویکردی جایگزین برای این هدف «طراحی روان» (Fluid Design) است که بر واحدهای نسبی متکی است. تاکنون، ما از واحدهای پیکسل مطلق استفاده کرده‌ایم. صرف‌نظر از اندازه صفحه‌نمایش، پیکسل همیشه اندازه یکسان را نشان می‌دهد. برای مثال، ۹۶ پیکسل برابر با یک اینچ، ۱۹۲ پیکسل برابر با ۲ اینچ و غیره است. واحدهای نسبی متناسب با محیط خود هستند. در کد ارائه‌شده، محیط عنصر تصویر ایموجی، body است که ظرف یا کانتینری است که کل صفحه را در برمی‌گیرد. واحد نسبی که ما استفاده خواهیم کرد درصد است که ایموجی را به نسبت مشخصی از عرض body تنظیم می‌کند. به عنوان مثال، اگر body ۴۰۰ پیکسل عرض داشته باشد و ایموجی روی ۵۰ درصد عرض تنظیم‌شده باشد، عرض آن ۲۰۰ پیکسل خواهد بود. قطعه کد زیر برای انجام این هدف است:

1body {
2    background-color: lightgray;
3}
4  
5p {
6    color: red;
7}
8  
9h1 {
10    font-size: 24px;
11}
12  
13.text {
14    color: green;
15}
16  
17#smiley {
18    /* Percentage width instead of pixels to make smiley face scale fluidly */
19    width: 50%;
20    height: auto;
21}

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

استفاده از پرس و جوی رسانه ای و طراحی روان برای ساخت نمونه سایت ساده با HTML

اگرچه ممکن است به عنوان متضاد ظاهر شوند، پرس‌وجوهای رسانه‌ای و طراحی روان برای رسیدن به طراحی واکنشگرا یکدیگر را تکمیل می‌کنند. یکی از تکنیک‌های مؤثر شامل استفاده از ویژگی CSS "max-width" بوده که روی حداکثر تعداد پیکسل تنظیم شده است. همچنین به همراه استفاده از ویژگی width به عنوان درصد استفاده می‌شود که مثال استفاده از این ویژگی به صورت زیر است:

1body {
2    background-color: lightgray;
3}
4  
5p {
6    color: red;
7}
8  
9h1 {
10    font-size: 24px;
11}
12  
13.text {
14    color: green;
15}
16  
17#smiley {
18    width: 400px;
19    height: auto;
20}
21
22/* Media query to shrink smiley face to 300px when viewport is equal to or smaller than 400px */
23@media only screen and (max-width: 400px) {
24  #smiley {
25    width: 300px;
26  }
27}
28
29/* Media query to set smiley face's width to percentage when viewport is equal to or smaller than 300px */
30@media only screen and (max-width: 300px) {
31  #smiley {
32    max-width: 300px;
33    width: 100%;
34  }
35}

در مثال بالا، ابتدا ایموجی روی عرض ثابت ۴۰۰ پیکسل تنظیم شده است. سپس، زمانی که Viewport ، ۴۰۰ پیکسل یا کوچک‌تر است، آن را به ۳۰۰ پیکسل کاهش می‌دهد. در نهایت، برای صفحه‌های ۳۰۰ پیکسل یا کوچک‌تر، حداکثر عرض روی ۳۰۰ پیکسل تنظیم شده و اطمینان حاصل می‌شود که مقیاس آن همیشه ۱۰۰ درصد از عرض موجود در کانتینر را اشغال کند.

۶. تعاملی کردن وبسایت در ساخت نمونه سایت ساده با HTML

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

فیلم آموزش پروژه محور HTML و CSS – ساخت مگامنو یا منوی چند سطحی در فرادرس

کلیک کنید

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

تاریخچه مختصری از جاوا اسکریپت

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

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

نمونه تعامل ساده با جاوا اسکریپت

در این مطلب به جزئیات سینتکس و نحوه عملکرد جاوا اسکریپت نمی‌پردازیم. در عوض، ما برنامه‌ای از پیش نوشته‌شده ارائه خواهیم کرد تا نشان دهیم چگونه می‌توان طراحی‌های خود را تعاملی کنیم. برای مثال قطعه کد زیر مدنظر است:

1// Identifying our image
2const smiley = document.querySelector("#smiley");
3// Adding reaction when image is clicked
4smiley.addEventListener("click", () => {
5	alert(`Smiley says "Welcome!"`);
6});

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

استفاده از جاوا اسکریپت برای تعاملی کردن سایت ساخته شده با HTML

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

1<!DOCTYPE html>
2<html lang="en">
3    <head>
4       <meta name="viewport" content="width=device-width, initial-scale=1">
5        <link rel="stylesheet" href="style.css">
6     <title>Test Website - Faradars Blog</title>
7        <meta charset="UTF-8">
8    </head>
9    <body>
10        <h1 dir="rtl"> صفحه اصلی وبسایت آزمایشی -  مجله فرادرس </h1>
11        <p dir="rtl" align="right" class="text">به این آموزش ساخت وبسایت از مجله فرادرس خوش آمدید</p>
12        <img id="smiley" alt="Smiley face" src="https://blog.faradars.org/wp-content/uploads/2024/01/smiley-face.jpg">
13        <!-- Adding our JavaScript in the script tag -->
14<script>
15  // Identifying our image
16  const smiley = document.querySelector("#smiley");
17
18  // Adding reaction when image is clicked
19  smiley.addEventListener("click", () => {
20     alert(`سلام، به مجله فرادرس خوش آمدید"`);
21  });
22</script>
23    </body>
24</html>

با کلیک روی ایموجی، متنی به نمایش درمی‌آید که می‌توانید روی دکمه «OK» کلیک کنید. این عمل همان تعاملی کردن سایت است.

ساخت نمونه صفحه ساده دیگر با HTML

در این بخش از ساخت نمونه سایت ساده با HTML به ایجاد نوع دیگری از صفحات HTML خواهیم پرداخت. این سند HTML نیز طی فرایند ۶ مرحله‌ای ساخته خواهد شد.

فیلم آموزش کاربردی HTML5، CSS3 و jQuery در طراحی وب – بخش یکم در فرادرس

کلیک کنید

این مثال در واقع ساخت یک نمونه رزومه با HTML است که مهارت‌های کاربری را نشان می‌دهد و شامل موارد زیر است:

• عنوانی با نام کاربر فرضی
• توصیف کاربر دریک  پاراگراف
• فهرست مهارت‌های کاربر
• لینک به وب سایت مورد علاقه یا وبسایت شخصی کاربر
• جدول سابقه کار کاربر

۱. باز کردن ویرایشگر کد HTML

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

۲. تشکیل ساختار HTML صفحه

پس از باز کردن ویرایشگر HTML، باید فایل جدید ایجاد و در آن ساختار اصلی صفحه HTML نوشته شود که این شامل موارد زیر است:

• اعلامیه نوع سند
• عنوان صفحه
• هدر ( h1 ) با عنوان نام کاربر
• پاراگرافی حاوی چند جمله در مورد کاربر

قطعه کد اولیه انجام این کار به صورت زیر است:

1<!DOCTYPE html>
2<html>
3<head>
4<title>HTML example</title>
5</head>
6<body>
7<h1 dir="rtl">صفحه رزومه من</h1>
8<p dir="rtl">این رزومه شخصی من است. من یک برنامه نویس کامپیوتر هستم.</p>
9</body>
10</html>

در کد بالا، dir="rtl" نوعی ویژگی برای راست چین کردن در HMTL است. خروجی اولیه کد بالا به صورت زیر خواهد بود:

۳. لینک کردن صفحه به سایت مورد علاقه

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

1<!DOCTYPE html>
2<html>
3<head>
4 <title>HTML example</title>
5</head>
6<body>
7  <h1 dir="rtl">صفحه رزومه من</h1>
8  <p dir="rtl">این رزومه شخصی من است. من یک برنامه نویس کامپیوتر هستم.</p>
9
10  <!-- Hyperlink to Faradars.Blog -->
11  <a href="https://blog.faradars.org/" dir="rtl">blog.faradars.org</a>
12</body>
13</html>

خروجی قطعه کد بالا این بار به صورت زیر خواهد بود:

۴. اضافه کردن فهرست مهارت ها

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

1<!DOCTYPE html>
2<html>
3<head>
4  <title>HTML Example</title>
5</head>
6<body>
7  <h1 dir="rtl">صفحه رزومه من</h1>
8  <p dir="rtl">این رزومه شخصی من است. من یک برنامه نویس کامپیوتر هستم.</p>
9  
10  <!-- Hyperlink to Faradars.Blog -->
11  <a href="https://blog.faradars.org/" dir="rtl">blog.faradars.org</a>
12
13  <!-- My Skills -->
14  <h3 dir="rtl">مهارت‌های من</h3>
15  <ul dir="rtl">
16    <li>HTML</li>
17    <li>CSS</li>
18    <li>جاوا اسکریپت</li>
19    <li>تولید محتوا</li>
20  </ul>
21</body>
22</html>

خروجی قطعه کد بالا به صورت زیر است:

۵. ایجاد جداول نمونه کارها

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

1<!DOCTYPE html>
2<html>
3<head>
4  <title>HTML Example</title>
5</head>
6<body>
7  <h1 dir="rtl">صفحه رزومه من</h1>
8  <p dir="rtl">این رزومه شخصی من است. من یک برنامه نویس کامپیوتر هستم.</p>
9  
10  <!-- Hyperlink to Faradars.Blog -->
11  <a href="https://blog.faradars.org/" dir="rtl">Faradars.Blog</a>
12
13  <!-- My Skills -->
14  <h3 dir="rtl">مهارت‌های من</h3>
15  <ul dir="rtl">
16    <li>HTML</li>
17    <li>CSS</li>
18    <li>جاوا اسکریپت</li>
19    <li>تولید محتوا</li>
20  </ul>
21
22  <!-- Work Experience Table -->
23  <h3 dir="rtl">تجربه‌های شغلی من</h3>
24  <table>
25    <tr dir="rtl">
26      <th>کارفرما</th>
27      <th>عنوان شغلی</th>
28      <th>سال‌ها</th>
29    </tr>
30    <tr dir="rtl">
31      <td>شرکت الف</td>
32      <td>برنامه‌نویس وب</td>
33      <td>2</td>
34    </tr>
35    <tr dir="rtl">
36      <td>شرکت ب</td>
37      <td>تحلیلگر داده</td>
38      <td>3</td>
39    </tr>
40    <tr dir="rtl">
41      <td>شرکت ج</td>
42      <td>مدیر پروژه</td>
43      <td>4</td>
44    </tr>
45  </table>
46</body>
47</html>

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

۶. ذخیره فایل و اجرا در مرورگر

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

قدم های بعدی در طراحی سایت

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

فیلم مجموعه آموزش طراحی سایت با HTML و CSS – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

یادگیری کامل HTML و CSS

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

یادگیری جاوا اسکریپت

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

فیلم مجموعه آموزش جاوااسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

یادگیری Git و GitHub

«Git» محبوب‌ترین سیستم کنترل نسخه صنعت نرم‌افزار است که به کاربر امکان می‌دهد کد خود را برای آزمایش تغییرات آماده کرده و در عین حال کد اصلی را تا تأیید تغییرات حفظ کند. GitHub که پیرامون Git ساخته شده است، نوعی محیط میزبان ابری برای پشتیبان گیری از کد و همکاری با دیگران در پروژه‌های مختلف فراهم می‌کند.

سخن پایانی

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

فیلم مجموعه آموزش طراحی و برنامه ‌نویسی سایت – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

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