با سلام خدمت دانش آموزان عزیز :

امروز با آموزش ویژوال بیسیک 6 در خدمت شماییم . . .

1-آشنائی با اچ تی ام ال

2-اولین صفحه اچ تی ام ال

3-تگ چیست؟

4-تگ متنی H1 تا h6

5-نحوه تعریف فونت در اچ تی ام ال

6-تگ عکس

7-ایجاد جدول در اچ تی ام ال

8-لینک اچ تی ام ال

سرفصل اول  - آشنائی با اچ تی ام ال

اچ تی ام ال (HTML) یا hypertext markup language، زبانی است که تقریبا تمام کسانی که دستی در دنیای وب دارند با آن آشنا هستند یا لااقل اسم آن را بارها شنیده اند، زبانی که به جرات می توان گفت یکی از آسان ترین و کاربردی ترین ها در جهان است که  از سال 1980 میلادی تا امروز همواره روندی رو به رشد داشته،  در اهمیت آن همین بس که حاصل کدنویسی برنامه نویسان وب،  نهایتا به صورت خروجی HTML  و در مرورگر کاربران نشان داده خواهد شد؛ لذا نقطه آغاز یادگیری برنامه نویسی  وب، آموزش این زبان است، برای آشنایی بیشتر چند تگ ساده را در ادامه بررسی می کنیم.

سرفصل دوم  - اولین صفحه اچ تی ام ال

برنامه Notepad را باز کنید و کد زیر را در آن کپی نمائید:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>من یک صفحه اچ تی ام ال هستم </title>
<!-- http://Unit-Sardroud.blog.ir -->
</head>
<body>
<h1>اولین صفحه من</h1>
<p>اولین پاراگراف من</p>
</body>
</html>

پیش نمایش

اکنون فایلتان را با پسوند html و با یونیکد utf-8 ذخیره نمائید (برای این کار به جای پسوند txt، پسوند html را جایگزین کنید و در قسمت Encoding عبارت UTF-8 را انتخاب کنید)، حاصل اولین کدتان را در یک مرورگر وب ببینید!
توضیح:
- عبارت DOCTYPE html PUBLIC و مقادیر آن برای راهنمایی کردن مرورگرهای وب جهت پردازش صحیح صفحه مورد نظر است.
- تگ head و body جز اصلی ترین تگ های اچ تی ام ال است که سازنده یک صفحه به شمار می روند، درون تگ head می توان از مقادیر meta تگ ها استفاده کرد.
- تگ title برای نمایش عنوان صفحه در مرورگر لازم است.
- تگ h1 نشان گر سرتیتر ها است که می تواند مقادیری تا h6 داشته باشد.
- تگ p در کدهای اچ تی ام ال نشانگر پاراگراف است.
- اکثر تگ های اچ تی ام ال با افزودن یک (/) بسته می شوند و البته برخی نیز یکتا هستند (مثلا </ br>).
نکته 1: هدف از ایجاد زبانی به نام html یا hypertext markup language در وب، در واقع به ضرورت ایجاد استانداردی تعریف شده برای یکسان سازی و سهولت کار برمی گردد، این زبان توسط کنسرسیوم جهانی وب یا w3c توسعه یافته و امروزه تبدیل به استانداردی فراگیر گشته است که توسط انواع مختلف مرورگرها و واسطه های کاربری (کامپیوتر، تلفن همراه و...)، قابل پردازش است.
نکته 2: html در حقیقت یک زبان برنامه نویسی نیست، بلکه بیشتر شبیه یک قرار داد با پیروی از اصولی منظم است، چرا که محدود به تگ ها و دستور عمل های خاصی است و خارج از چارچوب تعریف شده خود، قدرت مانور ندارد، اما از این جهت که زبان تفهیم خواسته های برنامه نویس از مرورگر تلقی می شود، اهمیت زیادی دارد، یعنی وقتی در وب برنامه ای به یک زبان که در سرور اجرا می شود (مانند php) می نویسیم، هدف، هر چه که باشد، نهایتا معمولا باید خروجی خود را در بستر html به مرورگر انتقال دهیم.

سرفصل سوم  - تگ چیست؟

تگ از نظر لغوی به معنی برچسب است، اما در زبان های برنامه نویسی و از جمله در html، تگ ها به معنی کدهای تعریف شده این زبان هستند که معمولا به صورت دو قسمتی به کار می روند، قسمت اول نشانگر شروع تگ و قسمت دوم نشانگر پایان آن است، هر قسمت نیز بین علامت های <> محصور شده است، ذکر این نکته نیز ضروری است که بعضی تگ های html تک قسمتی و یکتا هستند، مانند تگ های مربوط به خط یا فاصله.
- تگ head ، title ، html و body
کدهای وب بین تگ های html و body ساخته می شوند و تگ head دارای قابلیتهایی خاص جهت معرفی آن صفحه، قرار دادن تیتر صفحه (تگ title)، ایمپورت فایل های css و جاوا اسکریپت (javascript)، متاتگ ها (metatags) و... است، تقریبا در تمام صفحات وب، این تگ ها را خواهید یافت، چرا که چارچوب اصلی یک صفحه وب را تعریف می کنند و از اهمیت زیادی برخوردارند.

سرفصل چهارم- تگ متنی h1 تا h6

سرتیترهاتگ های فوق جهت معرفی سرتیترها (header) به کار می روند و نشان دهنده میزان اهمیت محتوای درون خود هستند، تگ h1 بیشترین اهمیت و به ترتیب تا h6 کم ترین اهمیت را دارند، امروزه به دلیل اینکه موفقیت در وب تا حدود زیادی به سازگاری یک سایت با موتورهای جستجو بستگی دارد، توصیه می شود حتما از تگ های مربوط به سرتیترها جهت قابل فهم شدن مطالب مهم برای ربات های خزنده، استفاده شود، ذکر این نکته نیز ضروری است که در استفاده از تگ های h1 تا h6، ترتیب آنها باید از با اهمیت ترین (h1) به کم اهمیت ترین (h6) از بالای صفحه به پائین آن باشد.
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>آموزش اچ تی ام ال گروه کامپیوتر دانشگاه آزاد </title>
<!-- http://Unit-Sardroud.blog.ir -->
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
</style>
</head>
<body>
<h1>این یک متن اچ تی ام ال تیتر شده است!</h1>
</body>
</html>

پیش نمایش

سرفصل پنجم- تعریف فونت در اچ تی ام ال

فونت در html به صورت تگ های خطی قابل تعریف است، تگی که برای تعریف فونت استفاده می شود <font> و <font/> هستند، به مثال زیر توجه کنید:

<font>متن داخل تگ فونت</font>

درون این تگ می توان ویژگی هایی را اضافه کرد که عبارتند از ویژگی face، dir، color، lang، size، class و id که به تفصیل راجب آنها خواهیم گفت.

ویژگی face در html font

face در html در واقع عملکردی شبیه عنصر font-family در css دارد، هر دوی این عناصر برای ایجاد و تعریف خانواده ای از فونت ها و نسبت دادن آن به عبارات و متن زیر مجموعه خود کاربرد دارند، چون بحث ما در اینجا آموزش html است، از طرح مبحث css آن خودداری می کنیم و توجه شما را به نحوه به کار بردن این عنصر در مثال زیر جلب می کنیم.

<font face="Tahoma, Geneva, sans-serif">
این یک متن جهت آزمایش نحوه تعریف فونت در html است!
</font>

مقادیر font face می تواند از خانواده فونت های وب باشد، مثلا مقادیر Arial, Helvetica, sans-serif یا Tahoma, Geneva, sans-serif و...

ویژگی dir در html font

dir برای مشخص کردن جهت نوشتاری حروف به کار می رود، برای حروف از راست به چپ (مثل زبان فارسی) از مقادیر rtl و برای حروف چپ به راست (مثل زبان انگلیسی) از مقادیر ltr استفاده می شود، این ویژگی در css با direction تنظیم می شود

<font face="Arial, Helvetica, sans-serif" dir="rtl">
این یک متن جهت آزمایش نحوه تعریف فونت در html است!
</font>

ویژگی color در html font

برای نسبت دادن رنگ های مختلف به متن داخل تگ font از عنصر color استفاده می کنیم، مقادیر این عنصر می تواند رنگ های عادی مثل red، blue، green و ... یا مقادیری به صورت کدهای هگز باشد مثلا 666666# یا 3366CC# و...، این ویژگی نیز در css با نامی مشابه یعنی color قابل تعریف است.

<font face="Arial, Helvetica, sans-serif" dir="rtl" color="#666666">
این یک متن جهت آزمایش نحوه تعریف متن در html است!
</font>

ویژگی size در html font

برای تعیین اندازه متن داخل تگ font از عنصر size استفاده می کنند، مقادیر این عنصر به صورت اعداد صحیح معمولا از یک تا هفت (1 2 3 و... 7) و یا به صورت اعداد صحیح به اضافه + از یک تا شش (1+ 2+ 3+ و... 6+) و همچنین به صورت منفی از منفی یک تا منفی 6 (1- 2- 3- و... 6-) قابل تنظیم است، این ویژگی در css با عنصر font-size تعریف می شود.

<font face="Arial, Helvetica, sans-serif" dir="rtl" color="#666666" lang="fa" size="+1">
این یک متن جهت آزمایش نحوه تعریف فونت در html است!
</font>

سرفصل ششم- تگ عکس img

نمایش یک تصویر در صفحات سایت ها، وبلاگ ها و در کل امکان نمایش تصویر در وب را میسر می کند، در کنار تگ img به عنوان تگی کلیدی، می توان از عناصر دیگری از جمله alt، title، map، area، border و... استفاده کرد که قابلیت های بیشتری در نحوه نمایش و کنترل رفتارهای رویدادی (مانند تعیین محل کلیک کاربر) در اختیارمان قرار می دهند، از این رو در ادامه آموزش های مقدماتی HTML، این مطلب را اختصاص داده ایم به نحوه کاربرد تگ img و نمایش تصاویر در HTML.

 

 

تگ img در HTML

از تگ img برای نمایش یک تصویر در وب استفاده می شود، این تگ معمولا به همراه src می آید و src در واقع مخفف source یا منبع تصویر است که در اینجا معمولا آدرس کامل تصویر یا آدرس آن به صورت دایرکتوری مد نظر است، مثال زیر نحوه نمایش یک تصویر ساده را در وب نشان می دهد.

 

 

<img src="example-image.jpg" />

ویژگی alt در تگ img

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

<img src="example-image.jpg" alt="example-image" />

ویژگی title در تگ img

علاوه بر alt که متن جایگزین تصویر است، از عنصر title می توان برای هنگامی که کاربر ماوس را روی تصویر می برد، جهت نمایش یک پیام به صورت توصیف (tooltip) استفاده کرد، درون این ویژگی از متنی برای توضیح ماهیت تصویر استفاده کنید

<img src="example-image.jpg" alt="example-image" title="نمایش تصویر در html" />

ویژگی height و width در تگ img

برای اینکه ارتفاع و عرض تصویر خود را تعریف کنید، از دو ویژگی width و height در کنار سایر ویژگی های تگ img استفاده کنید، این کار مخصوصا از نظر سئو و موتورهای جستجو اهمیت زیادی دارد.

<img src="example-image.jpg" alt="example-image" title="نمایش تصویر در html" height="100" width="200" />

ویژگی border در تگ img

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

<img src="example-image.jpg" alt="example-image" title="نمایش تصویر در html" height="100" w

سرفصل هفتم- تگ جدول table

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

کاربرد جدول در صفحات html

فلسفه اصلی به کارگیری جداول در صفحات وب، دسته بندی و نمایش محتوایی است که به اصطلاح به صورت جدول بندی شده (tabular) و یا اطلاعات آماری هستند، البته پیش تر از جداول به دلیل استحکام و راحتی کار، در امر طراحی لایه ها و فرم بندی صفحات وب نیز استفاده می شد که امروزه به دلایلی توصیه می شود از آن (حداقل در پروژه هایی که به سئو یا بهینه سازی برای موتورهای جستجو متکی هستند) اجتناب کنید، به هر صورت از جداول به فرض می توان برای نمایش نتایج یک آزمون، نمایش برنامه های زمان بندی شده، اطلاعات آماری و... استفاده کرد.

ایجاد جدول با تگ table

عنصر اصلی ایجاد کننده یک جدول در صفحات وب، تگ کلیدی table است، البته این تگ به تنهایی کار خاصی انجام نمی دهد، ولی با افزودن مواردی درون آن، از جمله تگ های زیر مجموعه th، td و tr به ردیف ها و سلول های جانبی تقسیم می شود.

<table>
</table>

ویژگی های زیادی را می توان به تگ table نسبت داد که در ادامه به آنها اشاره می کنیم.

ویژگی align

ویژگی align در یک جدول، تنظیم کننده موقعیت آن در سمت راست، چپ یا وسط صفحه است و با سه عنصر زیر تعریف می شود.
center: تنظیم جدول در وسط صفحه
left: تنظیم جدول در سمت چپ صفحه
right: تنظیم جدول در سمت راست صفحه

<table align="right">
</table>

ویژگی background

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

<table background="../html.jpg">
</table>

ویژگی bgcolor

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

<table bgcolor="#CCCCCC">
</table>

ویژگی border

ویژگی border برای نمایش خط حاشیه و سلول های داخلی جدول مورد استفاده قرار می گیرد، مقادیر آن با اعداد، به صورت 1 ، 2 ، 3 و... تعیین می شود.

<table border="1">
</table>

ویژگی bordercolor

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

<table border="1" bordercolor="#FF6600">
</table>

ایجاد یک سطر جدید در جدول با تگ tr

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

<table border="1">
<tr>
</tr>
</table>

ایجاد سرتیتر ها با تگ th

تگ th در جداول، نشانگر سرتیتر ها است، با استفاده از این ویژگی به راحتی می توان انبوهی از اطلاعات را به زیبایی دسته بندی کرد.

<table border="1">
<tr>
<th>تیتر جدول</th>
</tr>
</table>

سرفصل هفتم- ایجاد لینک href

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

ایجاد لینک با تگ a و href


تگی که در HTML و در واقع در صفحات وب برای ایجاد لینک به سایر صفحات استفاده می شود تگ a است که در کنار href کامل می شود، عبارت a مخفف anchore یا لنگر است و href مخفف Hypertext Reference یا ابر متنی است که حاوی لینک (hyperlink) به صفحه دیگری است، به مثال زیر توجه کنید.

<a href="http://unit-sardroud.blog.ir">کلیک کنید</a>

در لینک ساده بالا، عبارتی که برای مقادیر href در نظر گرفته می شود، در واقع همان آدرس URL مقصد است که می خواهیم کاربر پس از کلیک بر روی متن "کلیک کنید" به آن هدایت شود.
نکته: محتوای لینک ها در حالت پیش فرض در همان صفحه فعلی نمایش داده می شوند، به عبارتی جایگزین صفحه فعلی می شوند، اما با تنظیم پارامتر target که در ادامه خواهیم دید، می توان رفتار آنها را تغییر داد.

ایجاد عنوان برای لینک یا title


تگ a با خاصیت های دیگری کامل تر می شود که از آن جمله می توان title را نام برد، استفاده از title اجباری نیست، اما می تواند از نظر بهینه بودن لینک های سایت مفید باشد.

<a href="http://unit-sardroud.blog.ir" title="این یک لینک است">کلیک کنید</a>

کنترل پنجره لینک یا target


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

<a href="http://unit-sardroud.blog.ir" title="این یک لینک است" target="_blank">کلیک کنید</a>

پارامتر target مقادیر متفاوتی می پذیرد که به صورت تیتروار در زیر ملاحظه می کنید.
- blank_ : نمایش محتوای لینک در پنجره جدید.
- parent_ : نمایش محتوای لینک در پنجره والد (معمولا در حالتی استفاده می شود که لینک از یک frame فراخوانی شود).
- self_ : نمایش محتوای لینک در پنجره فعلی (حالت پیش فرض).
- top_ : نمایش محتوای لینک در بالاترین سطح (معمولا در حالتی استفاده می شود که چند frame در صفحه وجود داشته باشد و بخواهیم محتوای لینک خارج از فریم ها و در بالاترین سطح نمایش داده شود).
- نام frame : برای پارامتر terget می توان نام یک frame را نیز قرار داد، بدین ترتیب محتوای لینک در داخل فریم نمایش داده خواهند شد.

ایجاد لینک به یک تصویر


hypertext یا متن حاوی لینک می تواند به صورت محتوای غیر متنی نیز باشد، به طور مثال می توان یک تصویر را با استفاده از تگ img در این قسمت درج کرد، به مثال زیر توجه کنید.

<a href="http://unit-sardroud.blog.ir" title="این یک لینک است" target="_blank"><img src="image/your-img.jpg" alt="your-alt"  width="100" height="100"></a>

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