گوگل همیشه نقش خود را برای ساخت تبلت‌های نکسوس با قیمت مناسب به خوبی ایفا کرده است. پس از همکاری با ایسوس برای ساخت تبلت ۷ اینچی نکسوس این بار ظاهرا نوبت به اچ‌تی‌سی رسیده تا با همکاری گوگل، تبلت ۸ اینچی نکسوس خود را برای عرضه به بازار آماده کند.
تا این مرحله از آموزش مقدماتی html، تگ های اصلی و کلیدی این زبان پایه برنامه نویسی وب را شناختیم و با متاتگ ها و انواع گوناگون آنها آشنا شدیم، گفتیم که به کار بردن برخی از متاتگ ها در صفحات وب اجتناب ناپذیر است و برخی نیز جنبه اختیاری دارند، اکنون و در ادامه آموزش های مقدماتی، می خواهیم در رابطه با عناصر و تگ های مرتبط با فرمت بندی، متن و پاراگراف در html صحبت کنیم و به بررسی تگ های <p>،<b>،<br>،<pre>،<strong>،<i>،<em> و <hr> خواهیم پرداخت.
متن در 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://geeklearning.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://geeklearning.Ir --> </head> <body> <p> متن در یک پاراگراف </p> </body> </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://geeklearning.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://geeklearning.Ir --> </head> <body> <em> متن کج شده </em> </body> </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://geeklearning.Ir --> </head> <body> خط جدید <hr /> <br /> فاصله با br <pre> فاصله با pre </pre> </body> </html>
نمایش یک تصویر در صفحات سایت ها، وبلاگ ها و در کل امکان نمایش تصویر در وب را میسر می کند، در کنار تگ img به عنوان تگی کلیدی، می توان از عناصر دیگری از جمله alt، title، map، area، border و... استفاده کرد که قابلیت های بیشتری در نحوه نمایش و کنترل رفتارهای رویدادی (مانند تعیین محل کلیک کاربر) در اختیارمان قرار می دهند، از این رو در ادامه آموزش های مقدماتی HTML، این مطلب را اختصاص داده ایم به نحوه کاربرد تگ img و نمایش تصاویر در HTML.
از تگ img برای نمایش یک تصویر در وب استفاده می شود، این تگ معمولا به همراه src می آید و src در واقع مخفف source یا منبع تصویر است که در اینجا معمولا آدرس کامل تصویر یا آدرس آن به صورت دایرکتوری مد نظر است، مثال زیر نحوه نمایش یک تصویر ساده را در وب نشان می دهد.
<img src="example-image.jpg" />
برای اینکه مرورگر به نحو درستی تصاویر را نشان دهد، باید در کنار تگ img از خاصیت های جانبی آن استفاده کنیم، اولین خاصیت، ویژگی alt یا متن جایگزین تصویر است، alt در واقع متنی است که اگر تصویر به هر دلیل نشان داده نشود، داخل کادر خالی آن، به نمایش در می آید و به نوعی راهنمای کاربران است تا از محتوای آن تصویر، با خبر شوند.
<img src="example-image.jpg" alt="example-image" />
علاوه بر alt که متن جایگزین تصویر است، از عنصر title می توان برای هنگامی که کاربر ماوس را روی تصویر می برد، جهت نمایش یک پیام به صورت توصیف (tooltip) استفاده کرد، درون این ویژگی از متنی برای توضیح ماهیت تصویر استفاده کنید
<img src="example-image.jpg" alt="example-image" title="نمایش تصویر در html" />
برای اینکه ارتفاع و عرض تصویر خود را تعریف کنید، از دو ویژگی width و height در کنار سایر ویژگی های تگ img استفاده کنید، این کار مخصوصا از نظر سئو و موتورهای جستجو اهمیت زیادی دارد.
<img src="example-image.jpg" alt="example-image" title="نمایش تصویر در html" height="100" width="200" />
از border مخصوصا در مواقعی که به تصویر خود لینک می دهید، می توان برای حذف حاشیه ها استفاده کرد، در برخی مرورگر ها وقتی یک تصویر را به صورت لینک شده درمی آورید، به صورت پیش فرض نواری آب رنگ به عنوان حاشیه تصویر در نظر گرفته می شود، برای حذف این حالت می توانید مقدار صفر را برای border در نظر بگیرید، به مثال زیر توجه کنید.
<img src="example-image.jpg" alt="example-image" title="نمایش تصویر در html" height="100" width="200" border="0" />
ویژگی هایی که پیش تر گفتیم، معمولا برای تصاویر معمولی در صفحات وب کفایت می کنند، اما برای مواردی پیشرفته تر می توان از خاصیت 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 برای ترسیم محیط قابل کلیک شدن به شکل دایره کاربرد دارد.
برای اینکه نقاط قابل کلیک شدن را به درستی برای تصاویر تعریف کنید، باید با نحوه مقدار دهی صحیح برای شکل های متفاوت، آشنا باشید.
- برای اشیاء rect یا مربع مستطیلی شکل، از چهار عدد به عنوان گوشه چپ - بالا و راست - پائین استفاده می شود، در واقع شما میزان فاصله سمت چپ و بالای تصویر و همچنین سمت راست و پائین تصویر را برای قابل کلیک بودن تعریف می کنید.
<area shape="rect" coords="0,0,13,16" href="http://www.geeklearnimg.ir">
- برای اشیاء چندگانه یا poly باید از 6 مقدار استفاده کنید، این مقادیر موقعیت محل قابل کلیک شدن را نشان می دهند.
<area shape="poly" coords="13,0,11,3,7,12" href="http://wwwgeeklearning.ir">
- نهایتا برای اشیاء دایره ای شکل یا circle کافی است دو مقدار را تعیین کنید، البته برای تعیین انحراف از مرکز دایره، مقدار سومی نیز می توان تنظیم کرد که به فرض دایره را به شکل بیضی تبدیل می کند.
<area shape="circle" coords="30,14,3" href="http://www.geeklearning.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.geeklearning.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.geeklearning.ir" /> </map> <hr /> برای دیدن ویژگی map و area کافی است ماوس خود را بر روی گوشه بالای سمت چپ تصویر ببرید. </body> </html>
