برنامه نویسی Web GIS را با آموزش HTML، شروع کنید.

آموزش HTML برای برنامه نویس Web GIS

درباره مراحل برنامه نویسی Web GIS و طراحی و پیاده سازی سامانه Web GIS، در نوشته پیشین با عنوان “چگونه برنامه نویس Web GIS شویم؟” با شما سخن گفتیم و توضیح دادیم که برای برنامه نویسی سامانه Web GIS، می بایست اقدامات زیر را انجام دهیم:

ما قصد داریم، در کلاس رایگان آموزش برنامه نویسی Web GIS، نوشته هایی را منتشر کنیم که مراحل فوق را به شما آموزش دهیم. لذا از این نوشته قصد داریم آموزش های عملی را آغاز کنیم. همان طور که در تصویر بالا مشاهده می کنید، اولین گام در برنامه نویسی وب جی آی اس، طراحی و تولید یک Web Site می باشد. ما می بایست، یک وب سایت طراحی کنیم که کاربران سامانه Web GIS، بتوانند از طریق آن با سامانه، تعامل برقرار کنند و امکانات مورد نیاز برای کار با داده های مکانی و نقشه ها را در دسترس داشته باشند. به منظور طراحی و تولید یک واسط کاربری تحت وب (همان Web Site)، از تکنولوژی های HTML, CSS, JavaScript استفاده می شود. ما در این نوشته و نوشته های آتی، این موارد را به شما آموزش خواهیم داد. در این نوشته می خواهیم به آموزش HTML بپردازیم. اگر هنوز در کلاس رایگان آموزش برنامه نویسی Web GIS، ثبت نام نکرده اید و مایل هستید که نوشته های بعدی را در ایمیل خود دریافت نمایید، می توانید هم اینک از طریق لینک زیر، در این کلاس رایگان، ثبت نام نمایید.

HTML چیست؟

واژه HTML، کوتاه شده عبارت Hypertext Markup Language می باشد. معنای لغوی آن، زبان نشانه­گذاری فرامتن، می­باشد. فرامتن یعنی چیزی که بیشتر از متن خالی است. HTML، زبان Web می باشد. وارد هر Web Site که می شوید، صفحه اصلی آن را مشاهده می کنید. این صفحه دارای اجزا و قسمت های گوناگونی می باشد. این اجزا، توسط زبان HTML، ایجاد می شوند. دقت کنید که HTML، زبان برنامه نویسی نیست. HTML، یک زبان نشانه گذاری است. صفحات Web Site را مرورگرهای Web نمایش می دهند. در حقیقت، HTML، به مرورگر Web می گوید که در کجای صفحه Web Site، چه چیزی را نمایش دهد. برای مثال، فرض کنید می خواهیم در یک Site، لیست دانشجویان یک کلاس را به همراه نمرات آن ها نمایش دهیم. اینجا با استفاده از HTML، صفحه ای را ایجاد می کنیم و در آن مشخص می کنیم که این اطلاعات، چگونه باید نمایش داده شوند. به زبان ساده، یک Web Site را می توان به یک ساختمان تشبیه کرد. برای ایجاد یک ساختمان، ابتدا می بایست اسکلت فلزی یا بتنی آن را ایجاد نمایید. HTML، اسکلت یک Web Site را ایجاد می نماید. شما با استفاده از HTML، ساختار و چینش اجزای یک Web Site را مشخص می کنید. اگر در Web Site خود نیاز به یک لیست برای نمایش اسامی دانشجویان دارید، با استفاده از HTML، مشخص می کنید که این لیست در کجای صفحه قرار داده شود و اسامی را چگونه نمایش دهد. اگر در Web Site خود، نیاز به نمایش یک نقشه دارید، توسط HTML، مشخص می نمایید که این نقشه در کجای صفحه Web Site باید نمایش داده شود.

عناصر تشکيل دهنده HTML 

HTML، داراي عناصر (به انگلیسی Elements) گوناگوني است که در کنار هم، تشکيل يک صفحه از Site را مي دهند. اين عناصر عبارتند از:

• متن ها و ليست ها

نوشته هاي داخل يک صفحه را در برمي گيرد. برای مثال، همین نوشته ای که اینک در این صفحه دارید می خوانید.

• عکس ها

عکس هاي داخل يک صفحه که زيبايي خاصي به Web Siteها مي بخشند.

• فرم ها

عناصري که بيننده Site، به کمک آن ها مي تواند اطلاعاتي را وارد کرده تا ذخيره شده يا فرستاده شوند. برای مثال، فرم ثبت نام در کلاس رایگان Web GIS را در این نوشته ببینید.

• پيوندها یا Hyperlinks

اين عناصر، نقطه پيوند و ارتباط بين دو صفحه از يک Site يا دو Web Site متفاوت مي باشند. در حقیقت، هر آنچه که در یک Web Site بر روی آن کلیک می کنید و شما را به یک صفحه دیگر منتقل می کند، یک Hyperlink است.

• چارچوب ها یا Frames

فريم ها يا چارچوب ها، عناصري هستند که با استفاده از آن ها ما مي توانيم، چند صفحه اينترنتي را در يک صفحه جاي دهيم.

• چندرسانه اي یاMultimedia

از ابتدای بروز Web، صوت، فیلم و تصاویر متحرک، باHTML ، همراه نبود و Web Siteها در ابتدا به صورت متن و سپس به صورت تلفیقی از متن و تصویر بودند. اما در حال حاضر، بيشتر مرورگرهاي Web، از اين عناصر، پشتيباني مي کنند و شما مي توانيد در Web Site خود، فيلم و موزيک هم قرار دهید.

• JavaScript

يک نوع کد است که ارتباط نزديکي با HTML دارد. در حقیقت، JavaScript، یک زبان برنامه نویسی می باشد. کدهای JavaScript را بايد داخل کدهايHTML به کار برد تا بتوانيد يک Web Site حرفه اي با جذابيت بالا طراحي کنيد.

• الگوهای نمایش ظاهر صفحه یا Style Sheets

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

• DHTML

کوتاه شده دو کلمهDynamic HTML مي باشد که وظيفه آن روح بخشيدن به صفحات و بالا بردن جذابيت Web Site، مي باشد. در ابتدای ظهور Web، صفحات Web که توسط HTML ایجاد می شدند، به صورت ایستا و ثابت بودند و فقط اطلاعات ثابتی را در اختیار مخاطب، قرار می دادند. برای غلبه بر این مشکل، با هماهنگي کدهاي JavaScript و DHTML، Web Siteهای پويا و زنده به وجود آمدند.

براي يادگيري HTML به چه چيزهايي نياز داريد

• یک ویرایش­گر متن مثلNotepad  یا Notepad++
• یک مرورگر Web مثل Google Chrome یا Firefox و…

به عنوان ویرایش گر سندهای HTML، برنامه هاي پيشرفته ديگري هم هست که محيط گرافيکي دارند. مانند :
Microsoft Frontpage , Macromedia Dreamweaver, Visual Studio و… ولي براي شروع، بهتر است که از همان Notepad استفاده کنيد.

شما به یک مرورگر Web نیاز دارید. می توانید از Microsoft Internet Explorerاستفاده کنید که با سیستم عامل Windows، نصب می شود یا از Opera, Mozilla Firefoxو نرم افزارهای مشابه که اغلب به صورت رایگان برای دانلود در اینترنت وجود دارند، استفاده نمایید.

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

تگ هاي HTML

اولين چيزي که براي طراحی و پیاده سازی HTML بايد بدانيد، اينست که تگ HTML چيست و چه کاري انجام مي دهد.

برچسب یا Tag، اجزای HTML هستند که به مرورگر Web می گویند چگونه رفتار کند. اگر به یاد داشته باشید در نوشته “چگونه برنامه نویس Web GIS شویم؟” یک Web Site را به یک ساختمان تشبیه کردیم و گفتیم با HTML، اسکلت این ساختمان را تشکیل می دهیم. با این تشبیه، در حقیقت، Tagها همانند آجر هستند که یکی یکی روی یکدیگر سوار می شوند و در نهایت یک ساختمان را می سازند. پس شما باید این Tagها را یاد بگیرید تا بتوانید یک صفحه Web را کدنویسی کنید. چند نکته در مورد Tagهای HTML:

• برچسب های  HTMLبرای نشانه گذاری عناصر  HTML استفاده می شوند.
• برچسب های  HTML توسط دو کاراکتر  <  و  >  محاط می شوند.
• برچسب های  HTML معمولا بصورت جفت می آیند. برای مثال: و
• اولین برچسب، برچسب شروع و دومی برچسب پایانی است.
• متن های بین برچسب ابتدایی و انتهایی، محتوای عناصر هستند.
• برچسب های  HTMLبه حروف کوچک و بزرگ حساس نیستند معادل است.

خصوصیات تگ های HTML

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

Name: نام خصوصیت را تعیین می کند.

Value: مقداری است که برای خصوصیت تعیین می شود.

ساختار کلی به کارگیری یک Tag در زیر آورده شده است.

به مثال زیر دقت کنید:

توسط این Tag، ما به مرورگر Web می گوییم که قصد داریم یک پاراگراف با متن “آموزش برنامه نویسی Web GIS”، را نمایش دهیم. توسط خصوصیت dir مشخص می کنیم که متن می بایست از راست به چپ نوشته شود و توسط خصوصیت align مشخص کرده ایم که متن می بایست در وسط صفحه به نمایش درآید. نتیجه اجرای توسط مرورگر Web، به صورت زیر خواهد بود:

اولین صفحه وب

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

نرم افزار notepad را در Windows، اجرا نمایید. برای این منظور، منوی Start را باز کرده و کلمه Notepad را وارد کنید و سپس از لیست، بر روی آن کلیک کنید تا اجرا شود.

متن موجود در زیر را کپی کرده و در نرم افزار Notepad، Past نمایید.

<html>

<body>

این اولین صفحه وب من است

</body>

</html>

از منوی File، گزینه Save را انتخاب کنید و مسیری را برای ذخیره سند HTML مشخص نمایید. نام آن را، test.html قرار دهید و Encoding مربوط به سند را UTF-8 انتخاب نمایید. همانند تصویر زیر:

پس از ذخیره سند، به مسیر ذخیره سازی آن بروید و بر روی سند دوبار کلیک کنید تا با یکی از مرورگرهای Web که بر روی رایانه شما نصب است، باز شود و خروجی را ببینید.

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

در ادامه، به توضیح بخش های مختلف این سند HTML، می پردازیم.

تگ Html

تگ html، مشخص کننده شروع و پایان یک سند HTML می باشد.

بدین ترتیب که باشروع شده و باقی کدها را نوشته و در پایان با برچسب پایانی، سند HTML را به پایان می رسانیم.

تگ Head

تگ head، اولین Tag در بدنه برچسب html می باشد که حاوی یک سری اطلاعات برای مرورگر و نیز جستجوگر های Web می باشد.

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

تگ Body

متن و عکس و به طور کلی، اطلاعاتی که قرار است در مرورگر Web، به کاربران، نمایش داده شوند، در تگنوشته خواهند شد. این تگ، بعد از تگ head، قرار می گیرد و تمامی تگ های نمایشی، در این بخش نوشته می شوند.

تگ عنوان Title

یکی از مهم ترین تگ ها تگ عنوان یا Title، می باشد. متنی که داخل این تگ قرار می گیرد، عنوان صفحه را مشخص می کند که در نوار عنوان مرورگر، به کاربران، نمایش داده می شود.

ایجاد یک پاراگراف

برای پاراگراف بندي متن، از تگ <p></p>  به شکل زیر استفاده می کنیم:

خروجی کد فوق به شکل زیر خواهد بود :

ایجاد یک عنوان یا سرتیتر

براي مشخص کردن سرفصل ها و تيترها، از تگ Heading استفاده می شود . اين تگ از عدد 1 تا 6، درجه بندي دارد که عدد 1، بزرگترين عدد 6 کوچکترين اندازه حروف را نمايش مي دهند.

عنوان ها توسط تگ  <h1>  تا  <h6>ایجاد می شوند که <h1>  بزرگترین عنوان و <h6>  کوچکترین عنوان را ایجاد می کند.  به طور خودکار، یک خط خالی، قبل و بعد از عنوان اضافه می شود.

خروجی کد فوق به شکل زیر خواهد بود :

شکست خطوط یا ایجاد خط جدید

تگ<br> ، هنگامی استفاده می شود که شما می خواهید یک خط را پایان دهید و ادامه متن به خط بعدی برود ولی پاراگراف جدیدی را شروع نکنید.

برخی از تگ ها، دارای تگ انتها نمی باشد و به صورت تکی به کار می روند که تگ<br>  هم از جمله این تگ ها می باشد. این تگ را به دو شکل <br> و <br /> استفاده می کنند

خروجی کد فوق به شکل زیر خواهد بود :

ایجاد خط افقی

برای جدا کردن قسمت هایی از متن، می توانید از تگ<hr> ، استفاده کنید. این تگ، یک خط افقی ایجاد می کند.

خروجی کد فوق به شکل زیر خواهد بود :

ادامه آموزش HTML

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

سخن پایانی

در این نوشته، اولین گام عملی برای آموزش برنامه نویسی Web GIS را برداشتیم. ما تلاش کردیم شما را با HTML به منظور شروع برنامه¬نویسی Web GIS، آشنا کنیم. ما در نوشته بعدی، شما را با CSS آشنا می کنیم و به شما یاد می دهیم که چگونه صفحه HTMLی را که طراحی کرده اید، سیما و ظاهر زیبا و جذاب برای آن، بسازید. در نهایت ما در چند نوشته بعدی، به شما آموزش می دهیم تا یک Web Site، همانند آنچه در تصویر زیر مشاهده می کنید، ایجاد نمایید.