منوی برگه ها
TwitterRssFacebook
منوی دسته ها

ارسال شده توسط در تاریخ ۲۲ مهر ۱۳۹۳ در طراحی وب | ۲ دیدگاه

آموزش جامع HTML» (قسمت اول):

سلام به همه دوستاران هنر طراحی و برنامه نویسی وب .

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

فراموش نکنید برای اینکه زبان HTML را به خوبی یاد بگیرید باید حتما بعد از خواندن هر پست به تمرین آن بپردازید تا به خوبی با این زبان پرکاربرد آشنا شوید.

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

اما این نکته رو باید بدانیم که درواقع HTML قابلیت های متعددی را دارا می باشد که از جمله آنها می توان به موارد زیر اشاره کرد:

۱-      می توان شرایطی را فرآهم کرد تا بتوان به صورت آنلاین عکس و فایل ها و یا داکیومنت های خود را به اشتراک بگذارید.

۲-      با استفاده از بخش فرم ها می توان شرایطی را ایجاد کرد تا توسط آن بتوان مطالبی را به عنوان پیام برای کامپیوتر های راه دور ارسال کرد.

۳-      همچنین می توان فضای مالتی مدیا هم ایجاد کرد و در صفحات وب با استفاده از همین زبان صوت و تصویر و ویدئو را هم به اشتراک گذاشت.

۴-      …..

با آمدن html5 اوضاع کمی فرق کرد و شرایط برای راه اندازی امکانات بیشتر فرآهم شد که در نسخه جدید بیشتر روی WEB APLICATION  ها و همچنین صداو تصویر تمرکز بیشتری شده است و تگهای مربوط به این موارد بهبود بخشیده شده و توانسته منسجم تر و با امکانات بیشتری شرایط را برای طراحان وب به خوبی فرآهم کند.

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

این موضوع را هم بدانید که مرورگرهایی مثل Chrome, IE, Firefox, Safari قابلیت نمایش نتیجه کدهای HTML را دارا می باشند که توصیه می شود برای دریافت نتیجه بهتر از آخرین نسخه مرورگر دلخواه خود استفاده کنید.

نکته دیگری که باید قبل از شروع یادگیری به آن اشاره شود این است که برای درج کدهای HTML می توانید از ویرایشگرهای مخصوص طراحی وب مانند Adobe Dreamweaver  یا Microsoft Expression Webاستفاده کنید البته برای شروع می توانید حتی از نرم افزار Notepad++ استفاده کنید و یا از Notepad ویندوز استفاده کنید .

برای ذخیره کردن صفحات به عنوان یک صفحه HTML و قابل نمایش بودن در مرورگر پس از نوشتن کد در ویرایشگر خود آن رابا پسوند .html ذخیره نمایید به این صورت که به قسمت file و سپس  save as بروید و به صورت زیر کد خود را ذخیره نمایید.

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

نکته بسیار مهم:به یاد داشته باشید که به هنگام ذخیره سازی فایل خود به صورت html  حتما قسمت Encoding را برابر utf-8 قرار دهید تا از فارسی نویسی هم پشتیبانی شود.

نحوه ذخیره سازی فایل html

نحوه ذخیره سازی فایل html

جالب است بدانید HTML  مخفف عبارت Hyper Text Markup Language  می باشد.

 

پیکربندی و ساختار تگ ها در HTML:

در HTML هر آنچه که برای گفتن لازم است را بین دو علامت <> قرار می دهیم که درواقع به هرکدام از این موارد یک تگ گفته می شود مثلا عبارت زیر از یک تگ <H1> تشکیل شده است:

نمونه کد

نمونه کد

همانطور که در بالا هم مشاهده می کنید عبارت بالا از یک تگ شروع <H1> و یک تگ پایان </H1> تشکیل شده است و عبارت مشکی رنگ مابین آن محتوای این تگ را تشکیل می دهد که نتیجه کد بالا عبارت abcdefg به صورت سرتیتر است.

به این نکته هم توجه کنید که هر تگی که باز می شود حتما باید بعد از اتمام محتوای آن بسته شود تا نتیجه درست دهد. همچنین بعضی از تگ ها وجود دارند که به آن ها تگ تهی گفته می شود و نیازی به بستن آن ها نیست که در پست های آینده با آن ها آشنا می شویم.

ساختار اصلی یک صفحه وب:

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

<html>

<head>

<title>Title of the Page</title>

</head>

<body>

<p>This is a Paragraph</p>

</body>

</html>

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

تگ <html> اصلی ترین تگی است که در شروع کار با آن روبرو می شوید و بعد از آن با تگ <head> روبرو می شوید که این تگ دارای محتواییست که می تواند توضیحاتی پیرامون آنچه در بدنه اصلی آمده باشد که درون آن تگی با عنوان <title> وجود دارد که عنوان روی تب صفحه مرورگر را شامل می شود.

اما مهمترین تگی که باید آن را خوب بیاموزیم <body> نام دارد که در بین آن عناصر اصلی سایت قرار می گیرد که در پست های بعدی یکی یکی به معرفی و توضیح آن ها می پردازم.

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

نتیجه کد در مرورگر

نتیجه کد در مرورگر

توضیح دستور doctype :

در واقع این دستور را نمی توان به عنوان یکی از تگ های html  در نظر گرفت بلکه به عنوان یک دستور راهنما برای مرورگر ها محسوب می گردد.

از زمانی که کنسرسیوم جهانی وب (W3c) استاندارد های مختلفی از زبان html  را عرضه کرد و هر کدام از نسخه های آن که به ترتیب عرضه شد دارای تفاوت هایی بود و درنتیجه این موضوع باعث می شد تا مرورگرهای مختلف در برابر سایت شما رفتار های گوناگونی را از خود نشان دهند و در واقع همه مرورگرها به صورت یکسان سایت شما را نمایش نمی دهند .

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

اما سوالی مطرح می شود که آیا استفاده از این دستور اجباری است؟

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

این نکته را هم بدانید که در HTML5که در این دوره قصد آموزش همین نسخه را داریم می توان به صورت زیر از این دستور استفاده کرد:

<!DOCTYPE html>

<html>

<head>

<title>عنوان برگه وب</title>

</head>

<body>

<P>HTML5</P>

</body>

</html>

کاربرد صفت ها در HTML :

به طور عمده تگها از دو نوع المان مهم تشکیل شده است که نام آنها ” صفت های تگ ” نام دارد که توسط آن ها می توان کنترل بیشتری را بر روی تگها داشت که همیشه در تگ آغازین نوشته می شود.

نام این دو نوع المان صفت های اختصاصی و صفت های عمومی نام دارد.

صفت های اختصاصی:این نوع صفت ها به صورت اختصاصی ویژگی هایی را به تگ می بخشد که فقط مخصوص همین تگ خاص می باشد.

صفت های عمومی:اما این نوع صفت ویژگی هایی را به تگ می دهد که می توان در دیگر تگ ها هم از آن بهره برد و درواقع در دیگر تگ ها هم همین عملکرد را دارد.

Name: نام صفتی است که در تگ مورد نظر قصد استفاده آن را داریم.

Value:مقدار صفتی است که قصد استفاده آن را داریم.

به عنوان مثال در زیر نمونه کدی از این ویژگی می بینید:

نمونه کد

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

با تشکر از استاد احمد بادپی

تا پست بعدی خدانگهدار…

۲ دیدگاه

  1. سلام
    بسیار عالی و پر محتوی می باشد
    از زحمات شما کمال تشکر را دارم
    امیدوارم این سلسله آموزش ها ادامه داشته باشه
    سپاسگزارم

  2. سلام

    خواهش می کنم
    قسمت های بعدی رو هم دنبال بفرمایید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.

Pin It on Pinterest

Share This

Share This

Share this post with your friends!