گوگل همیشه نقش خود را برای ساخت تبلت‌های نکسوس با قیمت مناسب به خوبی ایفا کرده است. پس از همکاری با ایسوس برای ساخت تبلت ۷ اینچی نکسوس این بار ظاهرا نوبت به اچ‌تی‌سی رسیده تا با همکاری گوگل، تبلت ۸ اینچی نکسوس خود را برای عرضه به بازار آماده کند.
در مطالب قبلی از بخش آموزش مقدماتی html، با مباحث زیادی آشنا شدیم، از تگهای اصلی و کلیدی صفحات وب گرفته تا کار با پاراگراف و متن، اما در این مطلب می خواهیم آموزش ها را با بحث فونت و استایل خطی در html ادامه دهیم، البته بد نیست متذکر شویم که این بخش از آموزش html جنبه کاربردی کمتری دارد، چرا که امروزه بیشتر از css برای تعریف فونت و از استایل خارجی به جای استایل خطی استفاده می کنند، با این حال دانستن مسائل از مقدمات، لازمه گام نهادن به مراحل بالاتر است، لذا اگر می خواهید مباحث را به طور کامل بیاموزید با ادامه آموزش همراه ما باشید.
فونت در html به صورت تگ های خطی قابل تعریف است، تگی که برای تعریف فونت استفاده می شود <font> و <font/> هستند، به مثال زیر توجه کنید:
<font>متن داخل تگ فونت</font>
درون این تگ می توان ویژگی هایی را اضافه کرد که عبارتند از ویژگی face، dir، color، lang، size، class و id که به تفصیل راجب آنها خواهیم گفت.
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 برای مشخص کردن جهت نوشتاری حروف به کار می رود، برای حروف از راست به چپ (مثل زبان فارسی) از مقادیر rtl و برای حروف چپ به راست (مثل زبان انگلیسی) از مقادیر ltr استفاده می شود، این ویژگی در css با direction تنظیم می شود
<font face="Arial, Helvetica, sans-serif" dir="rtl"> این یک متن جهت آزمایش نحوه تعریف فونت در html است! </font>
برای نسبت دادن رنگ های مختلف به متن داخل تگ font از عنصر color استفاده می کنیم، مقادیر این عنصر می تواند رنگ های عادی مثل red، blue، green و ... یا مقادیری به صورت کدهای هگز باشد مثلا 666666# یا 3366CC# و...، این ویژگی نیز در css با نامی مشابه یعنی color قابل تعریف است.
<font face="Arial, Helvetica, sans-serif" dir="rtl" color="#666666"> این یک متن جهت آزمایش نحوه تعریف متن در html است! </font>
از این تگ برای مشخص کردن زبان متنی که در تگ font به کار رفته است استفاده می کنند، البته به کار بردن آن جزء در مواردی استثنایی الزامی نیست، مقادیر آن نیز با استاندارد نماد دو حرفی زبان رسمی کشورها تکمیل می شود.
<font face="Arial, Helvetica, sans-serif" dir="rtl" color="#666666" lang="fa"> این یک متن جهت آزمایش نحوه تعریف فونت در 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>
اکثر تگ های 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 قابلیت استفاده از استایل 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>
در زیر کد و پیش نمایشی از آن را جهت آشنایی بیشتر با نحوه استفاده از تگ 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.geeklearning.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>
اچ تی ام ال (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://geeklearning.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 به مرورگر انتقال دهیم.
چندین ماه پیش بود که تصویری در جی پلاس share شده بود؛ تصویر یک gif در مورد زندگی برنامه نویسان بود، خیلی برایم جالب بود. طبق معمول دنبال ریشه و منبع عکس گشتم و عاقبت منبع عکس را یافتم و با تصاویر دیگری روبرو شدم، واقعاً هجان زده شده بودم. فوق العاده جالب بود، خیلی خندیدم(یم)!
در واقع این تصاویر چندین دست گشته است، ولی من از وبلاگ مارتین والاسک(برنامه نویس و توسعه دهنده دروپال) تصاویر را استخراج کرده ام. نمیدانم در وبسایتها یا وبلاگهای فارسی پخش شده یا نه؟! ولی چون خودم خیلی لذت بردم، خواستم آن را با شما به اشتراک بگذارم. البته به این نکته توجه کنید که این تصاویر برای همه جالب و خنده دار نیست؟! اگر برنامه نویس، توسعه دهنده نرم افزار یا کارمند شرکت کامپیوتری هستید با بسیاری تصاویر ارتباط تنگاتنگی برقرار کرده و خواهید خندید؟!!!
نکته آخر: ابتدا صبر کنید تا تمامی تصاویر بصورت کامل لود شده(تصاویر متحرک gif) و سپس به تماشا آنها بپردازید.
