بسم الله الرحمن الرحیم
هر کاری بدون بسم الله شروع شود ابتر است.
با سری آموزش Html در خدمت شما هستم بنده علی ابراهیمی مدرس دانشگاه آزاد کرج هستم و خوشحالم این افتخار را دارم در فضای مجازی در خدمت دانشجویان و علاقه مندان علم Html باشم.
بدون مقدمه میریم سراغ آموزشهامون لطفا در طول تدریس هواستان جمع و تمامی هوش و هواستان در حوزه درس باشد مانند زمان هایی که واقعا در کلاس تشریف دارید.
دسترسی سریع به جلسات مقدماتی Html ->
شروع جلسه اول
آشنایی با HTML، زبان پایه برنامه نویسی وب
اچ تی ام ال (HTML) یا hypertext markup language، زبانی است که تقریبا تمام کسانی که دستی در دنیای وب دارند با آن آشنا هستند یا لااقل اسم آن را بارها شنیده اند، زبانی که به جرات می توان گفت یکی از آسان ترین و کاربردی ترین ها در جهان است که از سال 1980 میلادی تا امروز همواره روندی رو به رشد داشته، در اهمیت آن همین بس که حاصل کدنویسی برنامه نویسان وب، نهایتا به صورت خروجی HTML و در مرورگر کاربران نشان داده خواهد شد؛ لذا نقطه آغاز یادگیری برنامه نویسی وب، آموزش این زبان است، برای آشنایی بیشتر چند تگ ساده را در ادامه بررسی می کنیم.
اولین صفحه با کدهای 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، تگ ها به معنی کدهای تعریف شده این زبان هستند که معمولا به صورت دو قسمتی به کار می روند، قسمت اول نشانگر شروع تگ و قسمت دوم نشانگر پایان آن است، هر قسمت نیز بین علامت های <> محصور شده است، ذکر این نکته نیز ضروری است که بعضی تگ های html تک قسمتی و یکتا هستند، مانند تگ های مربوط به خط یا فاصله.
- تگ head ، title ، html و body
کدهای وب بین تگ های html و body ساخته می شوند و تگ head دارای قابلیتهایی خاص جهت معرفی آن صفحه، قرار دادن تیتر صفحه (تگ title)، ایمپورت فایل های css و جاوا اسکریپت (javascript)، متاتگ ها (metatags) و... است، تقریبا در تمام صفحات وب، این تگ ها را خواهید یافت، چرا که چارچوب اصلی یک صفحه وب را تعریف می کنند و از اهمیت زیادی برخوردارند.
<!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>
این یک سند اچ تی ام ال ساده است!
</body>
</html>
- تگ 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>
- تگ های ایجاد کننده خط و فاصله
br و hr دو تگی هستند که از آنها برای ایجاد فاصله و خط استفاده می شود، استفاده از این دو تگ به جهت موارد کاربرد زیاد، در صفحات html به وفور تکرار می شود، از طرفی همانطور که پیش تر گفتیم، این تگ ها یکتا هستند و قسمت دوم ندارند.
<!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>
<br />
<h2>این یک متن اچ تی ام ال تیتر شده با h2 است!</h2>
<hr />
</body>
</html>
پایان جلسه دوم
شروع جلسه سوم
آشنایی با متاتگ ها (Meta tags) و کاربرد آنها در صفحات وب (HTML)
پیش از این و در مطالب قبلی از بخش آموزش مقدماتی html با کلیاتی از این زبان پایه برنامه نویسی وب، آشنا شدیم و تا حدودی مسیرمان را به سوی کدنویسی پیشرفته تر هموار کردیم، تگ های اصلی و سازنده فرم و اسکلت بندی صفحات را شناختیم و با مثال هایی از آنها تمرین کردیم و به قدرت این زبان ساده ولی کاربردی بیشتر پی بردیم؛ اکنون و در این مطلب می خواهیم در ادامه مباحث و آموزش های مقدماتی، نحوه استفاده از متاتگ ها (Meta Tags) و کاربرد آنها در صفحات وب (HTML) را با هم مرور کنیم.
به طور کلی متاتگ ها، جزء عناصر اصلی صفحات وب به شمار می روند که در بین تگ head گنجانده می شوند و بسته به میزان اهمیتشان ممکن است وجودشان ضروری (Necessary) یا انتخابی و اختیاری (Optional) باشد که در ادامه به طور جزئی تر به آنها اشاره خواهیم کرد.
متاتگ http-equiv:
این متاتگ به مرورگر خواهد گفت که صفحه شما از چه ساختاری استفاده می کند و کاراکترهای آن از چه یونیکدی (یونیکد به زبان ساده یعنی روشی استاندارد که با آن کاراکترهای به فرض زبان فارسی، برای سیستم یا مرورگر تبدیل به کد و قابل فهم می شوند) پیروی می کنند، یک مثال برای استفاده از این متاتگ:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
متاتگ description:
بعد از تگ title و http-equiv در html، متاتگ description از بالاترین اهمیت برای موتورهای جستجو برخوردار است، برای اینکه ربات های جستجوگر را نسبت به محتوای صفحه خود راهنمایی کنید، حتما این متاتگ را به صورت زیر در کد خود (بین تگ head و بعد از title و http-equiv) به کار ببرید:
<meta name="description" content="توضیحی برای مطلب شما" />
متاتگ keywords:
keywords نیز یکی دیگر از متاتگ های کلیدی صفحات html است که مربوط به موتورهای جستجو است؛ نحوه کابرد آن به شکل زیر است:
<meta name="keywords" content="کلمات, کلیدی, شما" />
برای جدا سازی کلمات کلیدی، از علامت ویرگول به صورت انگلیسی استفاده کنید، دقت کنید که تعداد کلمات کلیدی و همچنین توضیحات نباید خیلی کم یا خیلی زیاد باشند.
متاتگ robots:
این متاتگ برای اعمال دستوراتی روی ربات های جستجوگر است، البته همه ی ربات ها از این متاتگ پیروی نمی کنند، اما بد نیست که در صفحه اول سایت خود آن را به صورت زیر استفاده کنید:
<meta name="robots" content="index, follow" />
با تکه کد بالا، به ربات ها خواهید گفت که صفحه شما را index (ذخیره شدن در لیست جستجو) کرده و از لینک های موجود در آن پیروی (follow) کنند؛ چند نمونه دیگر از این متاتگ که تنها در موارد خاصی مورد استفاده قرار می گیرد:
<meta name="robots" content="noindex, follow" />
<meta name="robots" content="noindex, nofollow" />
<meta name="robots" content="index, nofollow" />
با توجه به عبارت موجود در قسمت content، رفتار ربات هایی که از این متاتگ پیروی می کنند نسبت به صفحه و لینک های آن متفاوت خواهد بود.
متاتگ generator:
از generator برای مشخص کردن اینکه صفحه مورد نظر از چه برنامه یا خدماتی جهت انتشار محتوا استفاده می کند، استفاده می شود؛ به کار بردن این متاتگ اختیاری است و تاثیر زیادی در رتبه و عملکرد شما در موتورهای جستجو ندارد:
<meta name="generator" content="Dreamweaver CS" />
متاتگ author:
برای مشخص کردن نویسنده مطلب، از این متاتگ می توانید استفاده کنید، البته بودن یا نبودن آن چندان فرقی ندارد، ولی برای سایت ها و وبلاگهایی که چند مدیر و کاربر مجزا دارند می تواند مفید باشد:
<meta name="author" content="name family" />
متاتگ expires:
تاریخ انقضای یک صفحه را مشخص می کند، کاربرد آن اختیاری است و تاثیر زیادی بر روی عملکرد سایت یا وبلاگ شما در موتورهای جستجو ندارد:
<meta name="expires" content="tue, 21 Jun 1999" />
<meta name="expires" content="never" />
متاتگ copyright:
برای مشخص کردن اینکه محتوای صفحات شما دارای کپی رایت یا حقوق مولف است، از این متاتگ در کدهای خود استفاده کنید، البته استفاده از آن هیچ تضمینی برای سوء استفاده نکردن دیگران از محتوای شما ایجاد نمی کند و متاسفانه همواره هستند کسانی که می خواهند نابرده رنج گنج میسر کنند!:
<meta name="copyright" content="your copyright text here" />
متاتگ refresh:
از refresh برای انتقال یک کاربر از صفحه ای به صفحه ای دیگر یا همان صفحه، به طور خودکار می توانید استفاده کنید، به این عمل در اصطلاح ریدایرکت (redirect) می گویند:
<meta http-equiv="refresh" content="10; URL=http://unit-sardroud.blog.ir/" />
عددی که در این متاتگ ملاحظه می کنید، مقدار زمان به ثانیه ای است که بعد از آن کاربر به آدرس جدید منتقل خواهد شد.
متاتگ Cache-control:
این متاتگ برای مدیریت نحوه ذخیره یا به اصطلاح Cache شدن صفحات شما در مرورگر کاربران می تواند مفید باشد، در حالت معمولی اکثر مرورگرها محتویات صفحه شما، از جمله تصاویر و فایل ها را در حافظه موقت خود ذخیره می کنند تا در مراجعات بعدی سریع تر به آنها دست پیدا کنند، اما گاهی نیاز می شود که محتوای صفحات شما از این عمل مصون بمانند، بدین منظور از متاتگ Cache-control به یکی از شیوه های زیر استفاده کنید:
<meta http-equiv="Cache-control" content="public" />
<meta http-equiv="Cache-control" content="private" />
<meta http-equiv="Cache-control" content="no-cache" />
<meta http-equiv="Cache-control" content="no-store" />
مقادیر این متاتگ به قرار زیر است:
- public: محتوای شما در حافظه مشترک تمام کاربران یک سیستم ذخیره می شوند.
- private: محتوای شما تنها در حافظه نام کاربری شما ذخیره می شود.
- no-Cache: هیچ ذخیره ای از محتوای شما در حافظه صورت نمی گیرد.
- no-Store: در محدوده زمانی کوتاهتری محتوای شما ذخیره و نگهداری می شوند و به صورت آرشیو در نمی آیند.
تعداد متاتگ ها به مواردی که گفتیم محدود نمی شود، ولی مهم ترین آنها بعد از title و http-equiv متاتگ های keywords و description هستند که استفاده از آنها برای هدایت موتورهای جستجو و کسب نتایج بهتر ضروری است؛ علاوه بر این دقت کنید که استفاده از علامت / در انتهای متاتگ ها برای صفحاتی است که ساختار xhtml دارند، برای صفحات با ساختار html از علامت / در انتهای متاتگ ها استفاده نکنید، چون ممکن است از نظر سرویس اعتبار سنجی validator.w3.org کد شما معتبر نباشد.
پایان جلسه سوم
شروع جلسه چهارم
در مطالب قبلی از بخش آموزش مقدماتی html، با مباحث زیادی آشنا شدیم، از تگهای اصلی و کلیدی صفحات وب گرفته تا کار با پاراگراف و متن، اما در این مطلب می خواهیم آموزش ها را با بحث فونت و استایل خطی در html ادامه دهیم، البته بد نیست متذکر شویم که این بخش از آموزش html جنبه کاربردی کمتری دارد، چرا که امروزه بیشتر از css برای تعریف فونت و از استایل خارجی به جای استایل خطی استفاده می کنند، با این حال دانستن مسائل از مقدمات، لازمه گام نهادن به مراحل بالاتر است، لذا اگر می خواهید مباحث را به طور کامل بیاموزید با ادامه آموزش همراه ما باشید.
نحوه تعریف فونت در 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>
ویژگی lang در html font
از این تگ برای مشخص کردن زبان متنی که در تگ font به کار رفته است استفاده می کنند، البته به کار بردن آن جزء در مواردی استثنایی الزامی نیست، مقادیر آن نیز با استاندارد نماد دو حرفی زبان رسمی کشورها تکمیل می شود.
<font face="Arial, Helvetica, sans-serif" dir="rtl" color="#666666" lang="fa">
این یک متن جهت آزمایش نحوه تعریف فونت در 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>
ویژگی class و id در html font
اکثر تگ های html این قابلیت را دارند که با کدها و استایل های css تنظیم شوند، لذا تگ font نیز از این قاعده مستثنی نیست و همانطور که پیشتر گفتیم، اصولا کار با ویژگی هایی که با css قابل تعریف هستند، به صورت تگ های html کاربردی و مورد قبول نیست (و باید آنها را با css تنظیم نمود)، اما جهت آگاهی از چند و چون کار بد نیست با آنها آشنایی داشته باشیم.
<font face="Arial, Helvetica, sans-serif" dir="rtl" color="#666666" lang="fa" size="+1" class="your-class" id="your-id">
این یک متن جهت آزمایش نحوه تعریف فونت در html است!
</font>
استایل خطی در html font
همانطور که پیشتر گفتیم، تگ های html قابلیت استفاده از استایل css را درون خود دارند، استایل های css نیز به سه شیوه قابل تعریف هستند، به صورت خطی و درون تگ html، به صورت غیر خطی اما درون کدهای html و نهایتا به صورت ایمپورت فایل خارجی در صفحه؛ آنچه در این آموزش به آن خواهیم پرداخت، استایل خطی درون تگ های html است.
درون تگ های html استایل خطی را با قرار دادن style و تنظیم مقادیر داخل آن، تعریف می کنند، تمام ویژگی هایی که در css قابل دسترسی هستند، در داخل stlye خطی نیز قابل تعریف شدن است.
<font style="font-family:Tahoma, Geneva, sans-serif; direction:rtl; color:#333; font-size:14px; display:block;">
این یک متن جهت آزمایش نحوه تعریف استایل در html است!
</font>
نحوه تعریف فونت و استایل در html
در زیر کد و ی از آن را جهت آشنایی بیشتر با نحوه استفاده از تگ font و style در html قرار داده ایم که می توانید از آن استفاده کنید.
<!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>گروه کامپیوتر دانشگاه آزاد | نحوه تعریف فونت و استایل در html</title>
<!-- http://www.unit-sardroud.blog.ir -->
</head>
<body>
<font face="Arial, Helvetica, sans-serif" dir="rtl" color="#666666" lang="fa" size="+1" class="your-class" id="your-id">
این یک متن جهت آزمایش نحوه تعریف فونت در html است!
</font>
<br />
<font style="font-family:Tahoma, Geneva, sans-serif; direction:rtl; color:#333; font-size:14px; display:block;">
این یک متن جهت آزمایش نحوه تعریف استایل در html است!
</font>
</body>
</html>
پایان جلسه چهارم
شروع جلسه پنجم
نمایش یک تصویر در صفحات سایت ها، وبلاگ ها و در کل امکان نمایش تصویر در وب را میسر می کند، در کنار تگ 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" width="200" border="0" />
ویژگی usemap در تگ img
ویژگی هایی که پیش تر گفتیم، معمولا برای تصاویر معمولی در صفحات وب کفایت می کنند، اما برای مواردی پیشرفته تر می توان از خاصیت usemap و area برای تعریف نقاط قابل کلیک در یک تصویر استفاده کرد، گاهی نیاز به این داریم که بیش از چند لینک را در یک تصویر قرار دهیم یا بخش خاصی از آن را قابل کلیک شدن کنیم، این دسته از تنظیمات با ویژگی usemap و area در تگ img بر روی تصاویر قابل اعمال هستند.
<img src="example-image.jpg" alt="example-image" title="نمایش تصویر در html" height="100" width="200" border="0" usemap="#img-map" />
<map name="img-map" id="img-map">
<area shape="circle" coords="100,20,0" alt="تصویر دایره ای" href="image-html.html" />
<area shape="poly" coords="130,20,4,8,0,3" alt="تصویر چند ضلعی" href="image-html.html" />
<area shape="rect" coords="130,20,4,0" alt="تصویر مستطیل مربع" href="image-html.html" />
</map>
نکته مهم در این حالت، استفاده درست از شکل اشیائی است که می خواهیم قابل کلیک شدن باشند، سه مقدار circle ،poly و rect برای قسمت shape در area کاربرد دارند.
- rect به معنی rectangle یا مربع مستطیل است.
- poly یک شیء چند ضلعی است.
- circle برای ترسیم محیط قابل کلیک شدن به شکل دایره کاربرد دارد.
نحوه تنظیم مقادیر area در map
برای اینکه نقاط قابل کلیک شدن را به درستی برای تصاویر تعریف کنید، باید با نحوه مقدار دهی صحیح برای شکل های متفاوت، آشنا باشید.
- برای اشیاء rect یا مربع مستطیلی شکل، از چهار عدد به عنوان گوشه چپ - بالا و راست - پائین استفاده می شود، در واقع شما میزان فاصله سمت چپ و بالای تصویر و همچنین سمت راست و پائین تصویر را برای قابل کلیک بودن تعریف می کنید.
<area shape="rect" coords="0,0,13,16" href="http://www.unit-sardroud.blog.ir">
- برای اشیاء چندگانه یا poly باید از 6 مقدار استفاده کنید، این مقادیر موقعیت محل قابل کلیک شدن را نشان می دهند.
<area shape="poly" coords="13,0,11,3,7,12" href="http://www.unit-sardroud.blog.ir">
- نهایتا برای اشیاء دایره ای شکل یا circle کافی است دو مقدار را تعیین کنید، البته برای تعیین انحراف از مرکز دایره، مقدار سومی نیز می توان تنظیم کرد که به فرض دایره را به شکل بیضی تبدیل می کند.
<area shape="circle" coords="30,14,3" href="http://www.unit-sardroud.blog.ir">
برای دیدن تمام ویژگی هایی که در این آموزش مرور کردیم به صورت آنلاین، می توانید از کد و زیر استفاده کنید.
<!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://www.unit-sardroud.blog.ir -->
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
</style>
</head>
<body>
<img src="example-image.jpg" alt="example-image" title="نمایش تصویر در html" height="194" width="259" border="0" usemap="#img-map" />
<map name="img-map" id="img-map">
<area shape="rect" coords="0,0,100,100" alt="تصویر مستطیل مربع" href="http://www.unit-sardroud.blog.ir" />
</map>
<hr />
برای دیدن ویژگی map و area کافی است ماوس خود را بر روی گوشه بالای سمت چپ تصویر ببرید.
</body>
</html>
پایان جلسه پنجم
شروع جلسه ششم
فرمت بندی و کار با پاراگراف و متن در HTML
تا این مرحله از آموزش مقدماتی html، تگ های اصلی و کلیدی این زبان پایه برنامه نویسی وب را شناختیم و با متاتگ ها و انواع گوناگون آنها آشنا شدیم، گفتیم که به کار بردن برخی از متاتگ ها در صفحات وب اجتناب ناپذیر است و برخی نیز جنبه اختیاری دارند، اکنون و در ادامه آموزش های مقدماتی، می خواهیم در رابطه با عناصر و تگ های مرتبط با فرمت بندی، متن و پاراگراف در html صحبت کنیم و به بررسی تگ های <p>،<b>،<br>،<pre>،<strong>،<i>،<em> و <hr> خواهیم پرداخت.
متن در html:
متن در html هم می تواند به صورت ساده مورد استفاده قرار گیرد و هم بین تگ های html؛ در کد زیر متنی فرضی بدون استفاده از تگی خاص در صفحه نشان داده می شود.
<!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>
متن بدون فرمت بندی
</body>
</html>
فرمت بندی با پاراگراف:
در html از تگ <p> برای فرمت بندی و نمایش یک پاراگراف استفاده می شود، ویژگی های پاراگراف را نیز می توان با کدهای css به صورت مورد نظر درآورد، مثال زیر متنی در یک پاراگراف است.
<!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>
<p>
متن در یک پاراگراف
</p>
</body>
</html>
برجسته کردن متن در html:
رای متمایز نمودن یک نوشته از سایر کلمات در html، از تگ های خاصی استفاده می شود، برای متون برجسته از <b> و برای متون کج یا italic از <i>؛ اما چیزی به نام html semantic یا معنایی وجود دارد که توصیه می کند به جای استفاده از این تگ ها به عنوان استایل متن، از <strong> و <em> استفاده کنیم.
<!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>گروه کامپیوتر دانشگاه آزاد | متن برجسته با strong</title>
<!-- http://Unit-Sardroud.Blog.Ir -->
</head>
<body>
<strong>
متن برجسته
</strong>
</body>
</html>
متن کج شده با تگ em:
<!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>گروه کامپیوتر دانشگاه آزاد | متن کج شده با em</title>
<!-- http://Unit-Sardroud.Blog.Ir -->
</head>
<body>
<em>
متن کج شده
</em>
</body>
</html>
ایجاد خط و فاصله در html:
برای ایجاد خط در html به طور ساده از تگ hr استفاده می شود، ویژگی های این تگ نیز به وسیله css قابل تغییر است، علاوه بر این از تگ های br و pre برای ایجاد سطر جدید یا line break استفاده می شود، البته pre کمی نسبت به br تفاوت دارد و از استحکام بیشتری برخوردار است، مثلا اگر بخواهید همان گونه که تایپ می کند به همان شکل نیز متن خود را ببینید، بهتر است که از pre به جای br استفاده کنید، چرا که مرورگرها هرکدام فاصله پیش فرض متفاوتی برای br در نظر می گیرند، اما pre را همه به یک صورت پردازش می کنند.
<!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>گروه کامپیوتر دانشگاه آزاد | ایجاد خط و فاصله در html</title>
<!-- http://Unit-Sardroud.Blog.Ir -->
</head>
<body>
خط جدید
<hr />
<br />
فاصله با br
<pre>
فاصله با pre
</pre>
</body>
</html>
پایان جلسه ششم
شروع جلسه هفتم
ایجاد جدول با تگ table در html
آموزش ایجاد جدول و تگ 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>
ویژگی cellpadding
ویژگی cellpadding میزان فاصله محتوای سلول ها، از خطوط کناری (حاشیه) آنها را مشخص می کند، هر چه مقدار آن بیشتر باشد، فضای داخلی سلول ها نیز بیشتر شده و محتوای درون آنها با فاصله بیشتری از خطوط دربرگیرنده، نمایش داده می شود.
<table border="1" cellpadding="4">
</table>
ویژگی cellspacing
ویژگی cellspacing میزان فضا و فاصله بین سلول های داخل یک جدول را مشخص می کند، مقادیر آن نیز به صورت اعداد 1 ، 2 ، 3 و... تعیین می شود.
<table border="1" cellpadding="4" cellspacing="4">
</table>
ویژگی height
برای تنظیم ارتفاع کلی جدول، از ویژگی height استفاده می کنیم، مقادیر آن می تواند به صورت اعداد 1 ، 2 ، 3 و... باشد که در واقع نمایانگر تعداد پیکسل است.
<table border="1" cellpadding="4" cellspacing="4" height="600">
</table>
ویژگی width
ویژگی width نیز جهت تعیین عرض کلی جدول مورد استفاده قرار می گیرد، مقادیر آن نیز به صورت اعداد 1 ، 2 ، 3 و... تعیین می شود.
<table border="1" cellpadding="4" cellspacing="4" height="600" width="800">
</table>
ویژگی rules
ویژگی rules برای تعیین نحوه ترسیم خطوط میانی جدول به کار می رود، در حالت معمول، برای تمام سلول ها، ردیف ها و ستون ها، خطوط پیش فرض ترسیم می شود، اما با تعیین ویژگی rules، می توان نمایش خطوط را سفارشی کرد، ویژگی rules با چند مقدار زیر تنظیم می شود.
all: خطوط در راستای ردیف ها و ستون ها ایجاد می شود.
cols: خطوط در راستای ستون ها ترسیم می شود.
rows: خطوط در راستای ردیف ها ترسیم می شود.
groups: خطوط برای گروهی از ردیف ها یا ستون ها ترسیم می شود.
none: هیچ خطی داخل جدول ترسیم نمی شود.
<table border="1" cellpadding="4" cellspacing="4" height="600" width="800" rules="all">
</table>
ویژگی title
از ویژگی title برای ایجاد یک متن جهت معرفی جدول استفاده می شود، این متن در هنگامی که ماوس را داخل آن جدول ببریم، به صورت یک بالن (tooltip) در کنار نشانه گر ظاهر می شود.
<table border="1" cellpadding="4" cellspacing="4" height="600" width="800" rules="all" title="عنوانی برای جدول">
</table>
ایجاد یک سطر جدید در جدول با تگ tr
از تگ tr برای ایجاد سطر جدید در جدول استفاده می شود که شباهت زیادی به عملکرد تگ پرکاربرد br در صفحات وب دارد، البته تگ tr یکتا نیست و باید پایان آن، با یک تگ دیگر بسته شود.
<table border="1">
<tr>
</tr>
</table>
ایجاد سرتیتر ها با تگ th
تگ th در جداول، نشانگر سرتیتر ها است، با استفاده از این ویژگی به راحتی می توان انبوهی از اطلاعات را به زیبایی دسته بندی کرد.
<table border="1">
<tr>
<th>تیتر جدول</th>
</tr>
</table>
ویژگی های فرعی تگ th
در زیر به صورت مختصر اشاره ای می کنیم به برخی ویژگی های فرعی تگ th و معنی آنها.
abbr: عبارت abbr مخفف abbreviation یا اختصار است و کاربرد آن در سرتیترهای جداول، به جهت تعیین یک متن مختصر و معرفی آن تیتر است، این ویژگی در حالت معمول قابل رویت نیست اما برای موارد خاص مانند موتورهای جستجو، می تواند مفید باشد.
<th abbr="abbr text">تیتر جدول</th>
axis: ویژگی axis (به معنی محور، قطب) برای تیترهای جداول، معرف دسته بندی آنها است و در حالت معمول کاربرد خاصی ندارد، اما مانند abbr می تواند برای موارد خاص مورد استفاده قرار گیرد
<th axis="category">تیتر جدول</th>
colspan: ویژگی colspan در واقع طول یک تیتر را نسبت به تگ ها td زیرمجموعه خود مشخص می کند، به فرض ممکن است یک تیتر برای دو سلول به کار رود، لذا با تنظیم colspan با مقدار 2، آن تیتر به اندازه دو سلول کشیده می شود.
<table border="1">
<tr>
<th colspan="2">تیتر جدول</th>
</tr>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
</table>
نکته: تنظیم colspan با عدد صفر تنها برای موارد ستون های گروهی کاربرد دارد. rowspan: ویژگی rowspan ارتفاع تیتر را نسبت به ردیف ها تعیین می کند، به فرض تنظیم عدد 2 برای مقادیر آن، تیتر را به اندازه دو ردیف ارتفاع می دهد
<tr>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
<th rowspan="3">تیتر rowspan</th>
</tr>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
</table>
valign: عنصر valign برای تیتر جداول به جهت تنظیم محل نمایش آنها از لحاظ موقعیت عمودی (vertical) کاربرد دارد، valign می تواند مقادیر زیر را دارا باشد.
- top (بالا)
- baseline (خط مبنا)
- bottom (پائین)
- middle (وسط)
<th valign="middle">تیتر جدول</th>
ایجاد سلول با تگ td
همانطور که پیش تر گفتیم، table به تنهایی معمولا کاربرد خاصی ندارد و سلول های ساخته شده با th و td هستند که به آن فرم می دهند، تگ td سلول های داخلی و در واقع محتوای داخل یک جدول را دربرمی گیرد.
<table border="1" bordercolor="#FF6600">
<tr>
<th>تیتر جدول</th>
</tr>
<tr>
<td>محتوای درون سلول های جدول</td>
</tr>
</table>
یشتر مواردی که در مورد تگ th گفتیم، در باره تگ td نیز به همان صورت کاربرد دارند، افزون بر این، ویژگی nowrap با مقادیر nowrap را نیز می توان به آن افزود، از nowrap برای نمایش یک متن، در یک سطر، بدون شکستگی استفاده می شود، البته این ویژگی ممکن است در برخی نسخه های html معتبر نباشد و بهتر است به جای آن از css استفاده کنید (white-space: nowrap).
ایجاد عنوان با تگ caption
تگ caption در جداول، برای ایجاد یک عنوان (سرلوحه) استفاده می شود، این عنوان در قسمت بالای جدول قرار می گیرد و معرف آن است، برای هر جدول تنها می توان از یک caption استفاده کرد و این تگ باید بلافاصله بعد از تگ table قرار گیرد.
<table border="1" cellpadding="4" cellspacing="4">
<caption>عنوان جدول</caption>
<tr>
<th rowspan="2" valign="middle">تیتر جدول</th>
</tr>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
</table>
گروه بندی ستون ها با تگ colgroup و col
از تگ colgroup و col برای فرمت بندی ستون های جدول به صورت تفکیک شده و گروهی استفاده می شود، به فرض در یک جدول با سه ستون و سه ردیف متفاوت، می توان سه فرمت بندی متفاوت داشت، تگ colgroup و col را باید بلافاصله بعد از تگ table قرار داد، از colgroup می توان بدون col یا با آن استفاده کرد.
<table border="1">
<colgroup style="background-color:#6CF"></colgroup>
<colgroup style="background-color:#CCC"></colgroup>
<colgroup style="background-color:#FC0;"></colgroup>
<tr>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
</tr>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
استفاده از colgroup به همراه تگ col:
<table border="1">
<colgroup>
<col style="background-color:#6CF"></colgroup>
<col style="background-color:#CCC"></colgroup>
<col style="background-color:#FC0;"></colgroup>
</colgroup>
<tr>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
</tr>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
</table>
فرمت بندی با تگ های thead، tbody و tfoot
سه تگ thead، tbody و tfoot شیوه ی دیگری از فرمت بندی را در جداول html ارائه می کنند، با thead می توان سرتیترها را به صورت گروهی و متمایز نشان داد، تگ tbody بر روی عناصر داخلی جدول تاثیر گذار است و tfoot ردیف پایانی یک جدول را تحت تاثیر قرار می دهد، تگ های مذکور به خودی خود تغییر خاصی ایجاد نمی کنند و باید با ویژگی های css تنظیم شوند.
<table border="1">
<thead style="color:#F60;">
<tr>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
</tr>
</thead>
<tbody style="color:#FC0">
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
</tbody>
<tfoot style="color:#CCC">
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
</tfoot>
</table>
برای آشنایی بیشتر با نحوه ترسیم جداول و خواص آنها، چند جدول متفاوت را در مثال زیر ترسیم کرده ایم که می توانید به صورت آنلاین، کد و آن را ملاحظه کنید.
<!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>
<table width="400" border="1" cellspacing="2" cellpadding="2" style="text-align:center;" align="center">
<caption>
جدول شماره 1
</caption>
<tr>
<th bgcolor="#CCCCCC">تیتر 1</th>
<th bgcolor="#CCCCCC">تیتر 2</th>
<th bgcolor="#CCCCCC">تیتر 3</th>
</tr>
<tr>
<td>سلول 1</td>
<td>سلول 2</td>
<td>سلول 3</td>
</tr>
<tr>
<td>سلول 4</td>
<td>سلول 5</td>
<td>سلول 6</td>
</tr>
</table>
<!-- جدول شماره 2 -->
<table border="1">
<caption>
جدول شماره 2
</caption>
<colgroup style="background-color:#6CF"></colgroup>
<colgroup style="background-color:#CCC"></colgroup>
<colgroup style="background-color:#FC0;"></colgroup>
<tr>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
</tr>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
</table>
<!-- جدول شماره 3 -->
<table border="1" align="left">
<caption>
جدول شماره 3
</caption>
<tr>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
<th rowspan="3">تیتر rowspan</th>
</tr>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
</table>
<!-- جدول شماره 4 -->
<table width="400" border="1" cellspacing="2" cellpadding="2" style="text-align:center;" align="center">
<caption>
جدول شماره 4
</caption>
<tr>
<th bgcolor="#CCCCCC">تیتر 1</th>
<td>سلول 1</td>
<td>سلول 2</td>
</tr>
<tr>
<th bgcolor="#CCCCCC">تیتر 2</th>
<td>سلول 3</td>
<td>سلول 4</td>
</tr>
<tr>
<th bgcolor="#CCCCCC">تیتر 3</th>
<td>سلول 5</td>
<td>سلول 6</td>
</tr>
</table>
</body>
</html>
پایان جلسه هفتم
شروع جلسه هشتم
همانطور که پیش تر گفتیم، در HTML برای ایجاد هر خاصیتی از تگ های استاندارد و تعریف شده ی خاصی استفاده می شود که بنا بر نیاز سنجی، توسط کنسرسیوم جهانی وب (w3c) تعریف شده اند، یکی از این نیاز ها، امکان ایجاد مطالب و محتوا، به صورت لیست شده و زیرمجموعه ای است که w3c برای آن تگ های استاندارد ul li ol dl dd و dt را در نظر گرفته است، این تگ ها همه از یک خانواده هستند که برای ایجاد و مدیریت لیست در صفحات وب کاربرد دارند، از این رو در ادامه آموزش های مقدماتی HTML، این بار می خواهیم بپردازیم به مبحث کار با تگ های ایجاد کننده لیست در صفحات وب.
انواع لیست در HTML
قبل از پرداختن به ادامه آموزش، بد نیست اشاره ای هم داشته باشیم به انواع مختلف لیست در HTML.
لیست ها در وب تقریبا در دو دسته اصلی طبقه بندی می شوند، لیست های شماره ای (لیست هایی که در ابتدای آیتم های آن شماره قرار می گیرد و به صورت خودکار مرتب می شوند) که به آنها در اصطلاح ordered یا سفارشی و مرتب شده می گویند، و در مقابل لیست هایی که بدون شماره بوده و به جای آن، از علائم دیگر نظیر نقطه های مشکی تو پُُر یا تو خالی و... استفاده می شود، به این نوع لیست ها، unordered یا نامرتب می گویند که البته برخلاف نام آن، تفاوت عمده این دو لیست، تنها در شمار دار بودن یا نبودن آیتم های آنها است.
ایجاد لیست های مرتب شده با تگ ol و li
برای ایجاد لیست ها با آیتم های شماره بندی شده، از دو تگ ol و li استفاده می شود، تگ ol یک تگ کلیدی است و به مفسر مرورگر تفهیم می کند که منظور ما از لیست، لیستی با آیتم های شماره دار است، به مثال زیر توجه کنید.
<ol>
<li>آموزش</li>
<li>مقدماتی</li>
<li>تگ ها</li>
<li>html</li>
</ol>
برای دیدن مثال ها، به انتهای این مطلب مراجعه کنید.
در حالت پیش فرض، مرورگر از اعداد برای مرتب سازی آیتم های لیست استفاده می کند (به فرض از شماره 1، 2، 3 ...)، اما اگر بخواهید نمایش عناوین آیتم ها را سفارشی کنید، می توانید از چند مقدار متفاوت برای خاصیت type تگ ol استفاده کنید، این مقادیر می تواند به صورت زیر باشد:
- لیست آیتم ها به صورت شماره ای (1، 2، 3 و...) با مقدار 1 برای type.
- لیست آیتم ها به صورت حروف کوچک (c، b، a و...) با مقدار a برای type.
- لیست آیتم ها به صورت حروف بزرگ (C، B، A و...) با مقدار A برای type.
- لیست آیتم ها به صورت شماره های رومی کوچک (iii، ii، i و...) با مقدار i برای type.
- لیست آیتم ها به صورت شماره های رومی بزرگ (III، II، I و...) با مقدار I برای type.
به مثال زیر توجه کنید.
<ol type="I">
<li>آموزش</li>
<li>مقدماتی</li>
<li>تگ ها</li>
<li>html</li>
</ol>
ایجاد لیست های بدون شماره با تگ ul و li
برای ایجاد لیست هایی با آیتم های فاقد شماره در صفحات وب، از تگ ul و li استفاده می شود، در اینجا ul تگ کلیدی است که به مرورگر می گوید آیتم های لیست را بدون شماره نشان دهد و از li نیز برای ایجاد آیتم ها استفاده می شود، به مثال زیر توجه کنید.
<ul>
<li>آموزش</li>
<li>مقدماتی</li>
<li>تگ ها</li>
<li>html</li>
</ul>
برای دیدن مثال ها، به انتهای این مطلب مراجعه کنید.
در حالت پیش فرض، مرورگر برای نمایش آیتم های لیست، از یک علامت (معمولا نقطه های تو پُر) استفاده می کند، برای اینکه این رفتار مرورگر را کنترل کرده و نحوه نمایش آیتم های لیست را سفارشی کنیم، می توانیم همانند تگ ol از ویژگی type استفاده کنیم، با این تفاوت که در اینجا تنها سه مقدار زیر قابل تعیین است.
- ایجاد نقطه های تو خالی با مقدار circle برای type.
- ایجاد نقطه های تو پر با مقدار disc برای type.
- ایجاد نقطه های مربعی با مقدار square برای type.
به مثال زیر توجه کنید.
<ul type="square">
<li>آموزش</li>
<li>مقدماتی</li>
<li>تگ ها</li>
<li>html</li>
</ul>
خوشبختانه علاوه بر مقادیر و خاصیت های فوق، کنترل عناصر تگ های ul و li با css نیز کاملا مقدور است، علاوه بر این، css امکانات خیلی بیشتری برای سفارشی سازی لیست های وب در اختیارمان قرار می دهد که در آموزش های مقدماتی css و در مطلب زیر به طور مفصل در این رابطه گفته ایم:
نحوه تنظیم لیست با تگ ul li در css (بزودی بعد از اتمام آموزش اچ تی ام ال آموزش سی اس اس قرار خواهد گرفت که ای لینک بعد از آن فعال خواهد شد)
ایجاد لیست های تو در تو با تگ ul و li
کاربرد لیست های وب به موارد ساده محدود نمی شود، بلکه با پیروی از اصول HTML می توان لیست هایی تو در تو یا به اصطلاح nested نیز ایجاد کرد، اینگونه لیست ها می توانند برای توصیف مواردی که به صورت زیر مجموعه ای و طبقه بندی شده هستند، مانند منوهای وب کاربرد داشته باشند، ساختار کلی یک منوی زیر مجموعه ای و تو در تو را می توانید در مثال زیر مشاهده کنید.
<ul>
<li>لیست اصلی بدون زیر مجموعه</li>
<li>
لیست اصلی با زیر مجموعه
<ul><li>لیست فرعی و زیر مجموعه اول
<ul><li>لیست فرعی و زیر مجموعه دوم</li></ul></li></ul>
</li>
</ul>
ساخت لیست های تعریف شده با تگ dl، dt و dd
در HTML می توان با استفاده از تگ های dl، dt و dd لیست هایی با قابلیت های توصیفی ایجاد نمود که می تواند کاربرد های خاص خود را داشته باشد، در این شیوه، تگ dl به عنوان تگ کلیدی، تگ dt برای ایجاد آیتم های لیست و تگ dd برای توصیف هر آیتم کاربرد دارد؛ به مثال زیر توجه کنید.
<dl>
<dt>آموزش</dt>
<dd>آموزش برنامه نویسی</dd>
<dt>مقدماتی</dt>
<dd>آموزش مقدماتی</dd>
<dt>تگ ها</dt>
<dd>آموزش تگ های html</dd>
<dt>html</dt>
<dd>آموزش html</dd>
</dl>
مثال و آنلاین
در زیر کد و آنلاین نحوه استفاده از تگ های ایجاد کننده لیست در صفحات وب را ملاحظه می کنید که می توانید از آن استفاده نمائید.
<!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>
لیست های شماره ای:<br />
<!-- شروع یک لیست -->
<ol type="I">
<li>آموزش</li>
<li>مقدماتی</li>
<li>تگ ها</li>
<li>html</li>
</ol>
<!-- پایان یک لیست -->
<hr />
لیست های عادی:<br />
<!-- شروع یک لیست -->
<ul type="square">
<li>آموزش</li>
<li>مقدماتی</li>
<li>تگ ها</li>
<li>html</li>
</ul>
<!-- پایان یک لیست -->
<hr />
لیست های توصیفی:<br />
<!-- شروع یک لیست -->
<dl>
<dt>آموزش</dt>
<dd>آموزش برنامه نویسی</dd>
<dt>مقدماتی</dt>
<dd>آموزش مقدماتی</dd>
<dt>تگ ها</dt>
<dd>آموزش تگ های html</dd>
<dt>html</dt>
<dd>آموزش html</dd>
</dl>
<!-- پایان یک لیست -->
<hr />
لیست های تو در تو:<br />
<!-- شروع یک لیست -->
<ul>
<li>لیست اصلی بدون زیر مجموعه</li>
<li>
لیست اصلی با زیر مجموعه
<ul><li>لیست فرعی و زیر مجموعه اول
<ul><li>لیست فرعی و زیر مجموعه دوم</li></ul></li></ul>
</li>
</ul>
<!-- پایان یک لیست -->
</body>
</html>
پایان جلسه هشتم
شروع جلسه نهم
در ادامه آموزش های مقدماتی آشنایی با زبان پایه برنامه نویسی وب یعنی html، این بار می خواهیم به دو تگ کلیدی، مخصوصا در زمینه لایه بندی (فرمت بندی) صفحات وب بپردازیم، این دو تگ div و span نام دارند و کمتر صفحه وبی وجود دارد که در سورس کدهای خود از آنها استفاده نکرده باشد، به طور خلاصه از div برای ایجاد بلاک های غیر هم سطح نگهدارنده (container) سایر عناصر صفحه و از span برای ایجاد بلاک های هم سطح (inline) و معمولا برای نگهداری محتوای متنی استفاده می شود که در ادامه آموزش، به طور جزئی تری با آنها آشنا خواهیم شد.
کاربرد تگ div در html
همان طور که گفتیم، تگ div در زبان html برای ایجاد بلاک ها یا لایه های نگهدارنده جهت فرمت بندی قسمت های مختلف صفحه مورد استفاده قرار می گیرد، در واقع اکثر صفحاتی که در وب مشاهده می کنیم، از بلاک هایی تو در تو تشکیل شده اند که به کمک ویژگی های css به شکل منطقی و نظم یافته ای به نظر می رسند، پیش از این طراحان وب برای رسیدن به مقاصد خود در زمینه فرمت بندی صفحات از تگ table استفاده می کردند که امروزه به دلایلی توصیه شده تنها از جداول جهت مقاصد آماری یا اطلاعاتی که نیاز به جدول بندی دارند استفاده شود نه برای فرمت بندی.
تگ div در حالت پیش فرض توسط مرورگر ها به صورت غیر هم سطح پردازش می شود، یعنی در ابتدا و انتهای آن خطی جدا کننده (به صورت فرضی) در نظر گرفته می شود، در مثال زیر با نحوه تعریف و کاربرد این تگ آشنا می شویم.
<!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>گروه کامژیوتر دانشگاه آزاد | کاربرد تگ div در html</title>
<!-- http://webgoo.ir -->
</head>
<body>
<div dir="rtl">این یک بلاک div است.</div>
</body>
</html>
توضیح:
- برای تعریف بلاک های div کافی است آنها را به صورت تگ های جفتی در html ایجاد کنید:
<div></div>
- ملاحظه می کنید که برای نمایش صحیح حروف فارسی از dir با مقادیر rtl استفاده کرده ایم، البته در کدنویسی پیشرفته، توصیه می شود در حد امکان از استایل های خطی html اجتناب شده و اینگونه تنظیمات با css انجام شود که در آموزش های مربوطه در این مورد گفته ایم.
یک مثال کاربردی با div
استفاده از تگ div در html به موارد ساده ختم نمی شود، در کدنویسی پیشرفته معمولا نیاز به تعریف بلاک های div تو در تو وجود دارد که به دلیل یکپارچه و وابسته بودن زبان های html و css در وب، برای ایجاد تنظیمات ظاهری، علاوه بر تگ div از استایل css نیز در کنار آن استفاده می شود.
در مثال کاربردی زیر، نحوه ایجاد چند بلاک div فرمت بندی شده را ملاحظه می کنید.
<!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>گروه کامپیوتر دانشگاه آزاد | کاربرد تگ div در html</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
direction:rtl;
font-size:12px;
}
</style>
</head>
<body>
<!-- بلاک اصلی -->
<div style="display:block; width:600px; height:auto; border:1px solid #999; background-color:#9CF; margin:0 auto; direction:rtl; padding:4px;">
بلاک div شماره 1
<!-- بلاک زیر مجموعه -->
<div style="display:block; width:200px; height:200px; border:1px solid #999; background-color:#6C9; display:inline-block; float:left; margin:4px;">
بلاک div شماره 2
</div>
<!-- بلاک زیر مجموعه -->
<div style="display:block; width:200px; height:200px; border:1px solid #999; background-color:#FC0; display:inline-block; float:left; margin:4px;">
بلاک div شماره 3
</div>
<!-- بلاک جدا کننده -->
<div style="clear:both;"></div>
<!-- بلاک زیر مجموعه -->
<div style="display:block; width:590px; height:50px; border:1px solid #999; background-color:#CCC; display:block; margin:4px;">
بلاک div شماره 4
</div>
<!-- بلاک جدا کننده -->
<div style="clear:both;"></div>
<!-- بستن بلاک اصلی -->
</div>
<hr />
با استفاده از تنظیم بلاک های div به صورت تو در تو و بهره بردن از css، طراحان وب قالب ها و طرح های خود را فرمت بندی می کنند.
</body>
</html>
توضیح:
- در کد بالا در کنار استفاده از تگ div از استایل css نیز استفاده کرده ایم، چرا که تگ های div معمولا به تنهایی قابلیت های خاصی ندارند و در کنار ویژگی های css است که قدرت و انعطاف پذیری آنها مشخص می شود.
- همان طور که در آموزش های مقدماتی css گفته ایم، استایل ها به چند صورت قابل تعریف هستند (به صورت خطی، درون صفحه ای و ایمپورت فایل خارجی در صفحه)، در اینجا برای تگ body از استایل css درون صفحه ای و برای بلاک های div از استایل های خطی استفاده کرده ایم.
- برای آشنایی با ویژگی های css، لطفا مباحث مربوط به آموزش های آن را ملاحظه کنید.
کاربرد تگ span در html
تگ span در صفحات وب کاربردهای خاصی دارد، به طور مثال از آنجایی که این تگ توسط مرورگرها به طور پیش فرض به صورت بلاک های هم سطح یا inline تفسیر می شود (یعنی اگر از تگ span در کنار سایر عناصر استفاده کنیم، در یک سطح با آنها قرار می گیرد و به طور مثال به پائین سایر بلاک ها منتقل نمی شود)، برای نمایش دکمه های صفحه به صفحه، برجسته کردن (highlight) بخشی از یک متن به فرض در هنگام جستجو و... کاربرد دارد.
ویژگی های تگ span با استفاده از خاصیت های css کامل می شود که در زیر نمونه ای از آن را ملاحظه می کنید.
<!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>گروه کامپیوتر دانشگاه آزاد | کاربرد تگ span در html</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
.paged{
display:inline-block;
padding:4px;
border:1px solid #09C;
margin:2px;
text-align:center;
}
.light{
color:#69F;
text-decoration:blink;
}
</style>
</head>
<body>
<span class="paged">صفحه 1</span>
<span class="paged">صفحه 2</span>
<span class="paged">صفحه 3</span>
<span class="paged">صفحه 4</span>
<span class="paged">صفحه 5</span>
<span class="paged">صفحه 6</span>
<hr />
تگ <span class="light">span</span> به طور پیش فرض به صورت هم سطح یا inline پردازش می شود و به این دلیل در برخی موارد بهترین گزینه برای طراحان وب است.
</body>
</html>
توضیح:
- مانند تگ div، تگ span نیز قابلیت های css را به خوبی می پذیرد و می توان به کمک آن به اهداف خود در طراحی وب دست یافت.
- در کد بالا از کلاس های css برای ایجاد قابلیت های ظاهری تگ span استفاده کرده ایم، دلیل این کار این است که تگ های html به خودی خود معمولا توانایی ایجاد جلوه ها و تنظیمات پیشرفته را ندارند و باید در کنار آنها از css استفاده شود.
- در مثال بالا دو کاربرد رایج از تگ span را ملاحظه می کنید، دکمه های هم سطح و همچنین برجسته کردن بخشی از یک متن با رنگ و ویژگی خاص.
پایان جلسه نهم
شروع جلسه دهم
(قسمت آخر آموزش مقدماتی)
همان طور که اطلاع داریم، ایجاد لینک یا پیوند در صفحات وب امری عادی و مرسوم است، بدین معنی که مدیران وبلاگ ها و وبسایت های مختلف معمولا آدرس صفحات همکاران یا دوستان خود را در قسمتی خاص به نحوی درج می کنند که اگر بر روی آنها کلیک کنیم، وارد آدرس مورد نظر خواهیم شد، این حالت اغلب به صورت سیستماتیک (بدون کدنویسی) انجام می شود، یعنی کافی است آدرس صفحه (سایت، وبلاگ و...) را در قسمت درج لینک به همراه سایر مشخصات وارد کنیم تا آن لینک به لیست پیوندهای ما اضافه شود، اما باید بدانیم هنگامی که صفحه وب خود را مشاهده می کنیم، خروجی نهایی به صورت کدهای 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 فرم داد و به اصطلاح سفارشی نمود.
