اولین قدم برای طراحی صفحات وب

اولین قدم برای طراحی صفحات وب
چکیده مقاله : انتشار : ۱۳۹۶/۰۵/۰۱ ۰ نظر ۳۲۷ بازدید

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

در واقع ما می‌خواهیم در یک سری مقالات منظم به شما بیاموزیم چگونه به وسیله HTML، CSS و JavaScript در ابتدا یک وب‌سایت سازگار با موبایل و در نهایت یک نرم‌افزار قابل نصب در تلفن‌های همراه سازگار با سیستم عامل iOS و یا Android را بسازید.


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

هر چند که نباید فراموش کرد هر یک از این زبان‌های نامرده خود دارای امکاناتی مختلف می‌باشد و این مثال صرفا برای درک بهتر بیان شده و نه توضیح کامل توانایی کارکرد این زبان‌ها.

همانطور که گفتیم در ابتدا می‌خواهیم روش ساختن یک وب‌سایت سازگار با موبایل را آموزش دهیم، پس در ابتدا می‌خواهیم یادبگیریم چطور یک صفحه ساده بسازیم و آرام آرام به سمت صفحات حرفه‌ای تر پیش برویم. اگر از سیستم عامل ویندوز استفاده می‌کنید ما توصیه می‌کنیم نرم افزار ++notepad را نصب کنید (برای دانلود از آدرس https://notepad-plus-plus.org/download/) استفاده کنید.

پس از نصب نرم افزار ++notepad ابتدا یک فایل با نام test و پسوند html بسازید (test.html) و در محتوای آن متن زیر را نوشته و ذخیره را بزنید:
<b>Hello World</b>
هم‌اکنون کافی است بر روی فایل test.html دو بار کلیک کنید تا نتیجه را در مرورگر خود مشاهده کنید، همانطور که می‌بینید جمله Hello World بصورت توپر یا Bold شده نمایش داده می‌شود، توجه کنید جمله Hello World در ما بین دو b قرار گرفته و در اینجا b به معنی Bold می‌باشد، پس ما به html می‌گویم این جمله را Bold کن!

هر چند کد نوشته شده در بالا صحیح است، اما اگر بخواهیم نحوه صحیح‌تر همین کد را پیاده کنیم باید به این روش اقدام کرد:
<!DOCTYPE html>
<html>
<head>
<title>Hello World - Title Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>first example</p>
</body>
</html>

به کد بالا با دقت نگاه کنید، همان طور که مشاهده می‌کنید متن‌ها ما بین علامت های بزرگتر و کوچک‌تر قرار دارند، توجه داشته باشید هر متنی که درون <> قرار می‌گیرد به معنی یک تگ است، تگ همان ساختار اصلی می‌باشد و هر کدام برای کار خاصی ساخته شده اند. برای نمونه تگ <h1> برای عنوان و البته بزرگ کردن یک متن استفاده می‌شود، تگ <p> برای مشخص کردن یک پاراگراف. اگر توجه داشته باشید تمامی تگ‌ها با </> به پایان می‌رسند، برای نمونه تگ <p> با <p/> به پایان می‌رسد، و یا تگ <h1> با <h1/> به پایان می رسد. و در واقع هر متنی که در بین یک تگ قرار بگیرد جزوی از آن ساختار می‌باشد، همچنین هر تگ می‌تواند زیر مجموعه داشته باشید. برای مثال:
<p>
Test
<p>My Tag</p>
</p>

مثل این است که شما یک میز دارید و بر روی میز خود یک گلدان قرار می‌دهید و یا آنکه درون کمد خود لباس قرار می‌دهید، پس تگ‌های HTML نیز می‌توانند برای خود زیر مجموعه داشته باشند. اگر مجددا به مثال بالا نگاه کنید خواهید دید که در ابتدا ما تگی با نام <DOCTYPE html!> داریم که انتهایی نیز برای آن در نظر گرفته نشده، در واقع این یک تگ خاص است و به مرورگر می‌گوید نوع این فایل html5 می‌باشد. و در زیر همین قسمت تگ اصلی <html></html> را قرار داده‌ایم که در واقع تمامی تگ‌های دیگر شامل همین تگ خواهد شد، این تگ در حال عادی شامل دو تگ اصلی head و body است، در تگ head کلی اطلاعاتی که مربوط به پس زمینه مروگر است را قرار می‌دهیم، برای نمونه عنوان صفحه، بارگزاری فایل‌های جاوااسکریپت، سی‌اس‌اس و غیره، و در تگ body هر آن چیزی که می‌خواهیم در صفحه به نمایش بگزاریم را قرار می‌دهید همانند تگ‌های b، p و h1 که تا به حال با آن اشنا شدید.

حالا برویم سراغ تگ‌های بیشتر، فرض کنید می‌خواهید به یک وب‌سایت لینک بدهید، کافی است از تگ a استفاده کنید، برای نمونه:

<a href="http://www.google.com" target="_blank">Click Here</a>

حالا اگر کد بالا در صفحه خود قرار دهید و ذخیره کنید، مشاهده می‌کنید که در مرورگر شما واژه Click Here ظاهر شده که با کلیک بر روی آن در صفحه‌ای جدید وب‌سایت گوگل باز می‌شود. در تگ a آدرسی که می‌خواهیم کاربر وارد آن بشود را درون href می‌نویسیم و نحوه هدایت شدن کاربر را درون target مشخص می‌کنیم، شما می‌توانید از blank_ برای باز شدن در صفحه جدید و parent_ باز شدن در صفحه جاری استفاده کنید، همانطور که مشخص است متن را نیز در وسط دو تگ قرار می‌دهید.

پس از لینک می‌رویم سراغ افزودن یک تصویر به صفحه شما، پس کد زیر را در صفحه خود قرار داده و ذخیره کنید:
<img src=”myphoto.jpg” border=”0” alt=”My Photo” />


همانطور که در کد بالا مشاهده می‌کنید ما درخواست باز شدن تصویری با نام myphoto.jpg را داده‌ایم، در نتیجه اگر می‌خواهید این تصویر باز شود باید یک عکس با همین نام را در پوشه‌ای که فایل test.html شما وجود دارد قرار دهید و یا آنکه در مقابل ””=src آدرس مورد نظر خود را بنویسید، حتی می‌توانید آدرس c:\Documents\best.jpg را وارد کنید، پس از آدرس می‌توانید در قسمت ”0”=border اندازه کادر دور عکس را تعیین کنید، برای نمونه ما ۰ وارد کرده‌ایم پس کادری نمایش داده نمی‌شود، اگر شما بخواهید می‌توانید با قرار دادن عداد مختلف کادر را بزرگ و یا کوچک کنید، همچنین در مقابل alt ما متنی را که می‌خواهیم در صورت رفتن موشواره بر روی عکس نمایش دهیم را می‌نویسیم. همچنین می‌توانید به عکس خود اندازه نیز بدهید که از width و height استفاده می‌کنید، برای مثال:
<img src=”myphoto.jpg” border=”0” alt=”My Photo” width=”150px” height=”120px” />
بیایید از تگ‌ها که تا به حال آموخته‌ایم یک صفحه‌ای پیشرفته‌تر بسازیم:
<!DOCTYPE html>
<html>
<head>
<title>My Gallery</title>
</head>
<body>
<h1>Hello, This is my photo</h1>
<img src=”myphoto.jpg” border=”0” alt=”My Photo” width=”150px” height=”120px” />

Click Here for search in google

</body>

</html>

نتیجه:



حالا فرض کنید می‌خواهید فهرست دوستان خود، به همراه سن، مدرک تحصیلی را بصورت یک جدول درآورد. پس به این روش پیش می‌رویم.
<table border=”1”>
<tr>
<td>Name</td> <td>Age</td> <td>Degree</td>
</tr>
<tr>
<td>Nima</td> <td>30</td> <td>Master</td>
</tr>
<tr>
<td>Milad</td> <td>28</td> <td>Bachelor</td>
</tr>
</table>

در واقع هر جدول یا فهرست یک ساختار اصلی دارد که آن را با <table></table> مشخص می‌کنیم، سپس فهرست خود را به سطر های گوناگون تقسیم که هر سطر را با <tr></tr> نشان می‌دهیم، و حالا کافی است ستون های فهرست خود را مشخص کنیم که از <td></td> استفاده می‌کنیم. با این حساب اگر بخواهیم جدول بسازید ابتدا table را همانند بالا ساخته، سپس درون آن به تعداد سطر های مورد نظر <tr></tr> قرار می‌دهید و در نهایت درون هر tr به تعداد مورد نظر ستون از <td></td> استفاده می‌کنید. جدول بالا دارای ۳ سطر و ستون می‌باشد. همانطور که در بالا مشاهده می‌کنید جدول نیز همانند تصویر خصیصه border دارد که می‌توانید با عدد مورد نظر خود اندازه کادر جدول را تعیین کنید.


اگر بخواهیم جدول را کمی بهتر کنیم کافی است عنوان هر ستون را مشخص کنیم، برای اینکار کافی است نوع ستون‌های عنوان را بجای td از نوع th قرار دهیم. که در نهایت می‌شود همانند زیر:
<table border=”1”>
<tr>
<th>Name</th> <th>Age</th> <th>Degree</th>
</tr>
<tr>
<td>Nima</td> <td>30</td> <td>Master</td>
</tr>
<tr>
<td>Milad</td> <td>28</td> <td>Bachelor</td>
</tr>
</table>



پس از جدول به سراغ فهرست‌های متفاوت می‌رویم، برای نمونه می‌خواهیم فهرست نا منظم نام‌های دوستان خود را بنویسیم، می‌توانید از روش زیر استفاده کنید:
<ul>
<li>Nima</li>
<li>Behrooz</li>
<li>Ghasem</li>
<li>Soroosh</li>
</ul>

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


سپس به سراغ فهرست منظم می‌رویم، در واقع تفاوت فهرست منظم با نامنظم استفاده از عدد بجای دایره در کنار هر نام می‌باشد و تنها کافی است شما بجای ul از ol استفاده کنید و باقی موارد کاملا مشابه هم است.
<ol>
<li>Nima</li>
<li>Behrooz</li>
<li>Ghasem</li>
<li>Soroosh</li>
</ol>


و آخرین تگ فهرست مربوط به فهرست توضیحات می‌باشد که به وسیله این فهرست می‌توانید برای هر عنوان یک توضیح نیز قرار دهید.
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>JavaScript</dt>
<dd>dynamic computer programming language</dd>
</dl>
برای ساخت فهرست توضیحات ابتدا با dl ابتدا و انتها را مشخص می‌کنیم و برای هر عنوان یک تگ dt و توضیحات آن را در تگ dd دقیقا زیر تگ dt قرار می‌دهیم.


حالا بیایید یک جدول با یک سطر و سه ستون بسازیم که هر ستون دارای محتویات یک نوع خاص فهرست است، مثال پایین بطور واضح نشان می‌دهد شما می‌توانید بطور نامحدود تگ‌های مختلف را با هم ادغام کنید و نتیجه مورد نظر خود را ایجاد کنید که در آینده بیشتر با آنها آشنا خواهیم شد.
<table border=”1”>
<tr>
<td>
<ul>
<li>Nima</li>
<li>Behrooz</li>
<li>Ghasem</li>
<li>Soroosh</li>
</ul>
</td>
<td>
<ol>
<li>Nima</li>
<li>Behrooz</li>
<li>Ghasem</li>
<li>Soroosh</li>
</ol>
</td>
<td>
<dl>

<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>JavaScript</dt>
<dd>dynamic computer programming language</dd>
</dl>
</td>
</tr>
</table>



دانلود نسخه PDF مقاله

دوستانی که این مقاله را مطالعه کرده اند، از دوره های آموزشی زیر نیز استقبال کرده اند:

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

نظرات

به این مقاله امتیاز دهید

۳ نفر (امتیاز مقاله ۴.۷)