تبلیغات
پرتال فناوری اطلاعات ایران - مطالب آموزش Html
 
پرتال فناوری اطلاعات ایران
SKype:reza.arefan www.facebook.com/reza.arefan
درباره وبلاگ



مدیر وبلاگ : رضا عارفان
موضوعات
مطالب اخیر
پیوندهای روزانه
آمار وبلاگ
  • کل بازدید :
  • بازدید امروز :
  • بازدید دیروز :
  • بازدید این ماه :
  • بازدید ماه قبل :
  • تعداد نویسندگان :
  • تعداد کل پست ها :
  • آخرین بازدید :
  • آخرین بروز رسانی :

کتاب آموزش HTML با زبان ساده – مبتدی تا پیشرفته

پس از اتمام آموزش های HTML که در ده قسمت تقدیم شما دوستان گردید و پس از نظرات و پیشنهادات دلگرم کننده شما دوستان تصمیم به جمع آوری و ویرایش این آموزشها در قالب یک کتاب (eBook) گرفتیم. امیدواریم این مجموعه با ارزش مورد استفاده شما دوستان قرار گیرد . منتظر نظرات و پیشنهادات خوب و سازنده شما دوستان هستیم. با تشکر - امیر سروری

قسمت اول

  • تگ چیست؟
  • چه چیزی احتیاج دارید؟
  • ساخت اولین صفحه وب
  • html. یا htm
  • سرفصل و یا Head Line
  • پاراگراف
  • پیوندها و یا link ها
  • تصاویر
  • عناصر HTML
  • تگهای HTML تو در تو (Nested)
  • تگهای پایانی را فراموش نکنید
  • عناصر HTML خالی
  • حروف بزرگ یا کوچک؟

قسمت دوم

  • تواناییها و خصوصیات عناصر HTML
  • تگهای Head Line و یا سرفصلها
  • اهمیت تگهای Head Line
  • تگهای خط کشی و یا خط (line)
  • نوشتن توضیحات برای کدها HTML
  • چگونه کدهای HTML یک صفحه وب را ببینیم؟
  • تگهای پاراگراف (Paragraph)
  • تگهای شکستن خط (Line Breaks)
  • تگهای نوع نمایش نوشته ها (Text Formatting)

قسمت سوم

  • Style ها
  • Style چیست؟
  • تغییر رنگ BackGround پس زمینه با استفاده از Style ها
  • تغییر Font نوشته ها با استفاده از Style ها
  • تغییر نوع چینش نوشته ها

قسمت چهارم

  • Hyper Link, Anchors, Link لینکها و یا پیوندها
  • لینکهای خارجی
  • لینکهای داخلی
  • نشانه ها

قسمت پنجم

  • وارد کردن تصاویر در صفحات HTML
  • Align چیست؟
  • Alt چیست؟

قسمت ششم

  • Table ها
  • طول و عرض Table ها
  • خصوصیت Border
  • Align و یا چینش در سطرها و ستون ها
  • Table های تو در تو
  • Background color (رنگ پس زمینه)

قسمت هفتم

  • رنگها
  • آیا می توان از این تعداد رنگ در طراحی وب استفاده کرد؟
  • لیست ها

قسمت هشتم

  • آشنایی با ورژن های مختلف HTML
  • Document Type Definition - DTD
  • Cascading Style Sheet چیست؟
  • نحوه استفاده از آن چگونه است؟
  • آشنایی با تگ Head و خصوصیات آن
  • تگ head چیست؟

قسمت نهم

  • تگ چیست و نحوه تنظیمات آن چگونه است؟
  • فواید تگ های و نحوه تنظیم آن چگونه است؟
  • تفاوت مابین تگهای با خاصیت HTTP-EQUIV و NAME چیست؟
  • اما HTTP headers چیست؟
  • چگونگی استفاده از Script ها درصفحات وب

قسمت دهم

  • کارکترهای خاص
  • URL - Uniform Resource Locators چیست؟
  • رمزگذاری URL ها
  • URL Encoding
  • XHTML چیست و چرا XHTML؟

دانلود کتاب

منبع: تیم آی تی تی (ITTutorial.ir)





نوع مطلب : آموزش Html، 
برچسب ها :
لینک های مرتبط :

       نظرات
پنجشنبه 8 دی 1390
رضا عارفان
همانطور که می دانید شما در کد نویسی HTML هم می توانید از شماره رنگ استفاده کنید و هم می توانید از نام رنگ استفاده کنید.
مثال: در اینجا ما رنگ پشت صفحه را قرمز کردیم ما این کار را هم می توانیم با دادن کد HEX انجام دهیم و هم با نوشتن نام رنگ.

<body bgcolor="Red">
یا
<body bgcolor="#FF0000">
در زیر نام رنگ ها به همراه کدهایشان آورده شده است

HTML Color Names

HTML Color Name Color HEX Color
AliceBlue #F0F8FF  
AntiqueWhite #FAEBD7  
Aqua #00FFFF  
Aquamarine #7FFFD4  
Azure #F0FFFF  
Beige #F5F5DC  
Bisque #FFE4C4  
Black #000000  
BlanchedAlmond #FFEBCD  
Blue #0000FF  
BlueViolet #8A2BE2  
Brown #A52A2A  
BurlyWood #DEB887  
CadetBlue #5F9EA0  
Chartreuse #7FFF00  
Chocolate #D2691E  
Coral #FF7F50  
CornflowerBlue #6495ED  
Cornsilk #FFF8DC  
Crimson #DC143C  
Cyan #00FFFF  
DarkBlue #00008B  
DarkCyan #008B8B  
DarkGoldenRod #B8860B  
DarkGray #A9A9A9  
DarkGrey #A9A9A9  
DarkGreen #006400  
DarkKhaki #BDB76B  
DarkMagenta #8B008B  
DarkOliveGreen #556B2F  
Darkorange #FF8C00  
DarkOrchid #9932CC  
DarkRed #8B0000  
DarkSalmon #E9967A  
DarkSeaGreen #8FBC8F  
DarkSlateBlue #483D8B  
DarkSlateGray #2F4F4F  
DarkSlateGrey #2F4F4F  
DarkTurquoise #00CED1  
DarkViolet #9400D3  
DeepPink #FF1493  
DeepSkyBlue #00BFFF  
DimGray #696969  
DimGrey #696969  
DodgerBlue #1E90FF  
FireBrick #B22222  
FloralWhite #FFFAF0  
ForestGreen #228B22  
Fuchsia #FF00FF  
Gainsboro #DCDCDC  
GhostWhite #F8F8FF  
Gold #FFD700  
GoldenRod #DAA520  
Gray #808080  
Grey #808080  
Green #008000  
GreenYellow #ADFF2F  
HoneyDew #F0FFF0  
HotPink #FF69B4  
IndianRed #CD5C5C  
Indigo #4B0082  
Ivory #FFFFF0  
Khaki #F0E68C  
Lavender #E6E6FA  
LavenderBlush #FFF0F5  
LawnGreen #7CFC00  
LemonChiffon #FFFACD  
LightBlue #ADD8E6  
LightCoral #F08080  
LightCyan #E0FFFF  
LightGoldenRodYellow #FAFAD2  
LightGray #D3D3D3  
LightGrey #D3D3D3  
LightGreen #90EE90  
LightPink #FFB6C1  
LightSalmon #FFA07A  
LightSeaGreen #20B2AA  
LightSkyBlue #87CEFA  
LightSlateGray #778899  
LightSlateGrey #778899  
LightSteelBlue #B0C4DE  
LightYellow #FFFFE0  
Lime #00FF00  
LimeGreen #32CD32  
Linen #FAF0E6  
Magenta #FF00FF  
Maroon #800000  
MediumAquaMarine #66CDAA  
MediumBlue #0000CD  
MediumOrchid #BA55D3  
MediumPurple #9370D8  
MediumSeaGreen #3CB371  
MediumSlateBlue #7B68EE  
MediumSpringGreen #00FA9A  
MediumTurquoise #48D1CC  
MediumVioletRed #C71585  
MidnightBlue #191970  
MintCream #F5FFFA  
MistyRose #FFE4E1  
Moccasin #FFE4B5  
NavajoWhite #FFDEAD  
Navy #000080  
OldLace #FDF5E6  
Olive #808000  
OliveDrab #6B8E23  
Orange #FFA500  
OrangeRed #FF4500  
Orchid #DA70D6  
PaleGoldenRod #EEE8AA  
PaleGreen #98FB98  
PaleTurquoise #AFEEEE  
PaleVioletRed #D87093  
PapayaWhip #FFEFD5  
PeachPuff #FFDAB9  
Peru #CD853F  
Pink #FFC0CB  
Plum #DDA0DD  
PowderBlue #B0E0E6  
Purple #800080  
Red #FF0000  
RosyBrown #BC8F8F  
RoyalBlue #4169E1  
SaddleBrown #8B4513  
Salmon #FA8072  
SandyBrown #F4A460  
SeaGreen #2E8B57  
SeaShell #FFF5EE  
Sienna #A0522D  
Silver #C0C0C0  
SkyBlue #87CEEB  
SlateBlue #6A5ACD  
SlateGray #708090  
SlateGrey #708090  
Snow #FFFAFA  
SpringGreen #00FF7F  
SteelBlue #4682B4  
Tan #D2B48C  
Teal #008080  
Thistle #D8BFD8  
Tomato #FF6347  
Turquoise #40E0D0  
Violet #EE82EE  
Wheat #F5DEB3  
White #FFFFFF  
WhiteSmoke #F5F5F5  
Yellow #FFFF00  
YellowGreen #9ACD32  






نوع مطلب : آموزش Html، 
برچسب ها :
لینک های مرتبط :

       نظرات
جمعه 11 آذر 1390
رضا عارفان

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

HTML (زبان نشانه‌گذاری ابرمتنی) سنگ بنای وب است، یک زبان برای نشانه‌گذاری ابر متن که برای تدوین قالب و طراحیصفحه‌های وب به کار می‌برند. دستورعمل‌های این زبان، برچسب (Tag) نام دارند که محتوای یک صفحهٔ وب، با آن‌ها، نشانه‌گذاری شده و بدین‌ترتیب، نحوهٔ نمایش آن صفحه برای مرورگرهای وب، توصیف می‌شود.

هر یک از برچسب‌های اچ‌تی‌ام‌ال، معنا و مفهوم خاصی دارند و تأثیر مشخصی بر محتوا می‌گذارند، مثلاً برچسب‌هایی برای تغییر شکل ظاهری متن، نظیر درشت و ضخیم کردن یک کلمه یا برقراری پیوند به صفحات دیگر در اچ‌تی‌ام‌ال تعریف شده‌اند.

یک سند HTML ، یک پروندهٔ مبتنی بر متن (Text–based) است که معمولاً با پسوند .htm یا .html نام‌گذاری شده و محتویات آن از برچسب‌های HTML تشکیل می‌شود. مرورگرهای وب، که قادر به درک و تفسیر برچسب‌های HTML هستند، تک‌تک آن‌ها را از داخل سند HTML خوانده و سپس محتوای آن صفحه را نمایان‌سازی (Render) می‌کنند.

HTML زبان برنامه‌نویسی نیست، بلکه زبانی برای نشانه‌گذاری ابرمتن است و اساساً برای ساخت‌مند کردن اطلاعات و جدایش اجزای منطقی یک نوشتار نظیر عناوین، تصاویر، فهرست‌ها، بندها و جداول به کار می‌رود. از سوی دیگر، اچ‌تی‌ام‌ال را نباید به عنوان زبانی برای صفحه‌آرایی یا نقاشی صفحات وب به کار برد، این وظیفه اکنون بر دوش فناوری‌های دیگری همچون سی‌اس‌اس است.

گفتنی است HTML شکلی از زبان دیگری بنام اس‌جی‌ام‌ال است و کنسرسیوم وب جهان‌شمول آن را به عنوان استانداردی برای نشانه‌گذاری مستندات ابرمتنی برای عرضه در وب، تدوین کرده‌است.

کتاب HTML همراه با مثالهای کاربردی در ۴۸ صفحه به آموزش این زبان پرداخته است، این کتاب با بیان ساده و مثال های متعدد آموزش این زبان را بسیار ساده و لذت بخش کرده است.

 


دانلود  دانلود مستقیم : کتاب HTML همراه با مثالهای کاربردی


tag  حجم فایل : 644 کیلوبایت 




نوع مطلب : آموزش Html، 
برچسب ها :
لینک های مرتبط :

       نظرات
چهارشنبه 13 مهر 1390
رضا عارفان

HTML مخفف Hypertext markup language زبانی است که در اینترنت کاربرد دارد و با پروتکل HTTP در ارتباط مستقیم است. شما با استفاده از این پروتکل می‌‌توانید صفحات وب را در اینترنت مشاهده فرمائید. زبان های مختلفی در صفحات وب بکار رفته اند که مشخص می‌‌کنند که چه برنامه‌ای آن‌ها را Render می‌‌کند اما آنچه که بطور معمول در وب سایت‌ها و وبلاگ‌ها مشاهده می‌‌فرمائید این زبان است.

این مجموعه با معرفی‌ و آموزش زبان برنامه نویسی HTML به همراه مثال های متنوع سعی دارد با شما گام به گام تا تسلط کامل بر این زبان پیش ‌‌رود. این مجموعه بهترین و کامل ترین مجموعه آموزش برنامه نویسی HTML به زبان فارسی است که علاوه بر HTML، تمام آیتم های برنامه نویسی CSS را نیز توضیح می دهد و همچنین زبان JavaScript را هم تا حدودی مورد بحث قرار می دهد .


دانلود  دانلود مستقیم : بخش اول   |   بخش دوم   |   بخش سوم   |   بخش چهارم   |   بخش پنجم   |   بخش ششم   |  بخش هفتم   |   بخش هشتم   |   بخش نهم 


tag  حجم فایل : 518 مگابایت 




نوع مطلب : آموزش Html، 
برچسب ها :
لینک های مرتبط :

       نظرات
دوشنبه 28 شهریور 1390
رضا عارفان
آیا تا کنون دقت کرده اید که برنامه های ویرایشگر اچتمل مانند دریم ویور و فرانت پیج در ابتدای صفحات ، یک تگ DOCTYPE قبل از تگ html مینویسند که برداشتن آن نیز تاثیر خاصی در صفحه ندارد ؟

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

 

اما کار این تگ چیست ؟ این خط به برنامه مرورگر می فهماند که شما قصد استفاده از HTML نسخه 4 را برای طراحی صفحه وب خود دارید . در صورتی که بخواهید از XHTML جهت طراحی صفحه وب خود استفاده کنید باید کد فوق را کمی تغییر دهید . پس چرا حذف آن تاثیری در صفحه وب ما ندارد ؟ این کد در ایجاد صفحات HTML اختیاری و در صفحات XHTML اجباری است . اگر این تگ را به همراه یک URL در بالای صفحه وب خود اعلان کنید ، سبب میشود که برنامه های مرورگر فعلی ، هنگام باز کردن صفحه شما در مد standards کنار کنند . بدین صورت میتوانید کدهای خود را مطابق استاندارد نوشته و کنترل بیشتری بر چگونگی نمایش این صفحه در برنامه های مرورگر مختلف داشته باشید. در صورت نگذاشتن این کد ، مرورگر از روش های قدیمی تر برای نمایش صفحه شما استفاده می کند . یک مثال عملی :در هنگام تعیین رنگ با شماره های هگزادسیمال ، یک علامت شارپ (#) در ابتدای شماره رنگ قرار میگیرد که حذف آن باعث نادیده گرفتن این رنگ در زمان نمایش صفحه میشود . اما اگر کد DOCTYPE را از ابتدای صفحه پاک کنید ،مرورگرتان از این مورد ایراد نمی گیرد و آن رنگ را نشان میدهد . برای تست این مثال از مرورگر فایرفاکس استفاده کنید . چون مرورگر Internet Explorer بطور معمولی هم از حذف علامت # ایراد نمی گیرد و ممکن است شما فکر کنید علامت # اختیاری است !




نوع مطلب : آموزش Html، 
برچسب ها :
لینک های مرتبط :

       نظرات
یکشنبه 27 آذر 1384
رضا عارفان

روش کدگزاری UTF-8
اکیدا توصیه میشود که برای تایپ و تمایش متون فارسی از استاندارد یونیکد و روش کدگزاری UTF-8 اسنفاده شود و این روشی است که مطالب این سایت و ادیتور آنلاینش از آن استفاده میکند.نکته مهم در نمایش صحیح متون فارسی تعیین نوع کدگزاری یا encoing صفحات فارسی است که برای اینکار باید از متاتگ خاصی به نام http-equiv در بخش head صفحات اچتمل به شکل زیر استفاده شود:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

در اینصورت مرورگر یا Browser قبل از نمایش صفحه از روی متاتگ فوق نوع کدگزاری (Encoding) را تشخیص داده و دیگر مثلا نیازی به تعیین دستی (دراکسپلورور 5 : View/Encoing/Unicode / UTF-8 ) نوع Encoing توسط بازدیدکننده سایت نخواهد بود.

  شناسه یا attribute ی به نام dir
جهت نمایش متون لاتین به صورت پیش فرض و default از چپ به راست (ltr) میباشد.در مورد متون و جملات فارسی باید با کمک روشی جهت نمایش پیش فرض را به "راست به چپ" تغییر دهید. شناسه یا attribute ی به نام dir یا همان direction این کار را برای شما انجام میدهد. این شناسه دارای دو مقدار ممکن میباشد :


dir="ltr" , Left-to-right text. -
چپ به راست
dir="rtl" , Right-to-left text. -
راست به چپ

مثلا برای نمایش جمله فارسی "سلام بر دنیای وب!" با کمک عناصر p یا div کافی است که به یکی از شکلهای زیر عمل شود:

<p dir="rtl"> سلام بر دنیای وب </p>
<div dir="rtl">
سلام بر دنیای وب </div>

در بسیاری از عناصر و تگ های اچتمل امکان استفاده از شناسه dir میسر بوده و به عنوان نمونه میتوان از عناصر زیر نام برد:

<p> , <div> , <html> , <body> , <table> , <tr> , <td> , <h1 ... h6> , <input> , <pre> , <select> , <span> , ...





نوع مطلب : آموزش Html، 
برچسب ها :
لینک های مرتبط :

       نظرات
شنبه 2 مهر 1384
رضا عارفان

در نسخه جدید(4/0) اچتمل امکان جداسازی کامل فرمت دهی از ساختار صفحات اچتمل فراهم شده است. در این نسخه توصیه میشود که تمامی اطلاعات مربوط به نمایش و ترازبندی به فایلهائی مجزا از صفحه اچتمل منتقل شوند. بخشی از صقحات اچتمل که مربوط به نمایش، ترازبندی و فرمت دهی است، استایل شیت یا "Style Sheet" نامید شده و معمولا به صورت فایلی مجزا درون بخش <head> صفحات اچتمل معرفی میگردند. در این درس به صورت بسیار خلاصه با روشهای مختلف استفاده از استایل شیتها در صفحات اچتمل آشنا خواهید شد.


مثالها

استیلها در اچتمل
در این مثال نحوه تعریف استایل شیتها درون بخش <head> صفحات اچتمل شرح داده شده است. (Internal Style Sheet)

پیوندی بدون خط افقی زیری
در این مثال نحوه ایجاد پیوندی بدون "خط افقی زیری" شرح داده شده است. (Inline Styles)

اتصال به فایلهای استایل شیت خارجی
در این مثال نحوه استفاده از تگ <link> جهت اتصال به فایلهای استایل شیت خارجی شرح داده خواهد شد. (External Style Sheet)


چگونگی استفاده از استایل شیتها:

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

1)استایل شیتهای خارجی (external style sheet) :

در این روش تمامی استیلها و تعاریف نمایشی درون فایلی جداگانه قرار گرفته و بسیار مناسب حالتهائی است که قرار است که استایلی به بیش از یک صفحه اچتمل اعمال شود. مزیت این روش سهولت در تغییر ظاهر صفحات یک وب سایت میباشد و برای یک تغییر کلی در سایت کافی است که فایل استایل شیت کل سایت که معمولا یک فایل واحد است تغییر داده شود. (باید توجه داشت که در این حالت تمامی صفحات سایت باید به یک فایل استایل شیت واحد لینک شده باشند.) استایل شیتهای خارجی توسط تگ <link> که درون بخش head صفحات اچتمل قرار میگیرد، معرفی میشوند.
در مثال زیر با کمک شناسه href از تگ link نام و در حالت کلی url فایل در برگیرنده استایلهای تعریف شده تعیین میگردد:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

2)استایل شیتهای داخلی (Internal Style Sheet) :

کاربرد این روش در حالتهائی است که صفحه اچتمل نیازمند تعریف استایلی منحصر به فرد و مجزا بوده و استایل طراحی شده فقط بدرد آن صفحه خواهد خورد. در این حالت باید کدهای حاوی تعریف استایل درون تگ های <style> و <style/> قرار گرفته و معمولا نتیجه درون بخش head صفحه اچتمل گذاشته میشود.مثال:

<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

3)استایل شیتهای درجا (Inline Styles) :
کاربرد این روش در مواردی است که باید برای یک المان (یا گروهی) خاص استایلی اعمال شود. در این حالت باید از شناسه ای به نام style که تقریبا در تمامی تگها قابل اعمال است استفاده شود. مثال:

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>


تگ های استایل
Start TagPurposeکاربرد
<style>Defines a style in a documentتعریف استیلها درون یک سند
<link>Defines the relationship between two linked documents تعیین و تعریف فایل استایل شیت خارجی
<font>Deprecated. Use styles insteadکنار گذاشته شده.از استایل شیتها استفاده شود.
<basefont>Deprecated. Use styles instead کنار گذاشته شده.از استایل شیتها استفاده شود.
<center>Deprecated. Use styles insteadکنار گذاشته شده.از استایل شیتها استفاده شود.

مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها 


تغییرات در نسخه جدید اچتمل (4/0) :
هدف اولیه از طراحی زبان اچتمل ایجاد زبانی برای تعریف اطلاعات محض بدون در برداشتن جزئیات مربوط به فرمت و نمایش بود ولی با ایجاد نسخه 3/2 زبان اچتمل و اضافه شدن تگهای فرمت دهی مانند <font> و یا شناسه هائی مانند color و Align محتوا و نمایش در صفحات اچتمل ادغام گردیده و همین امر سبب بروز مشکلات عدیده ای برای طراحان و برنامه نویسان وب گردید. برای رفع این مشکل در نسخه 4/0 اچتمل توصیه بر جداسازی کامل این دو گروه از اطلاعات بوده و در نسخه های آینده اچتمل این جداسازی اجباری خواهد گردید و توصیه مدرسه وب نیز استفاده از استایل شیتها برای هر نوع تعریف فرمت و ترازبندی میباشد. برای مثال در کد اچتمل زیر که بر اساس نسخه 3/2 اچتمل میباشد، ساختار و محتوا (تگی از نوع پاراگراف با محتوای "This is a paragraph") با اطلاعات نمایش یعنی رنگ و ترازبندی (رنک قرمز متن و ترازبندی در وسط صفحه) همزمان و در کنار هم آورده شده اند و این ادغام امکان تغییر و توسعه کد را بسیار محدود خواهد کرد:

<p align="center"><font color="red">This is a paragraph</font></p>

کد معادل مثال فوق با استفاده از استایل شیتها در این مثال شرح داده شده است.(هر چند که این مثال از تمامی امکانات استایل شیتها و ایجاد فایلی کاملا مستقل برای تعریف استایل استفاده نکرده است.)






نوع مطلب : آموزش Html، 
برچسب ها :
لینک های مرتبط :

       نظرات
دوشنبه 3 مرداد 1384
رضا عارفان

با وجودیکه هنوز بعضی از اچتمل کاران از تگ <font> برای تعیین نام و نوع قلم، رنگ و اندازه متون استفاده میکنند ولی در استاندارد جدید اچتمل (نسخه 4) و همچنین XHTML از تگ <font> پشتیبانی نمیشود و استفاده از Style Sheet ها به عنوان جایگزین معرفی شده است.


تگ <font>

در نسخه های 3.2 و قبلی تر زبان اچتمل از تگ <font> برای تعیین نام قلم، رنگ و اندازه متون استفاده میشود. در این تگ شناسه face نام قلم ، شناسه size انداره قلم و شناسه color معرف رنگ متن خواهد بود. مثالهای زیر کاربرد تگ <font> خدابیامرز را نشان میدهند:

کد اچتمل نمایش کد روبرو توسط مرورگر
<p>
<font size="2" face="Verdana">
This is a paragraph.
</font>
</p>

This is a paragraph.

<p dir="rtl">
<font size="1" face="Times" color="#FF9900">
متنی با قلم Times و اندازه 1 و رنگ FF9900
</font>
</p>

متنی با قلم Times و اندازه 1 و رنگ FF9900

<p dir="rtl">
<font size="2" face="Tahoma" color="red">
این متنی با قلم Tahoma و اندازه 2 و رنگ قرمز 
</font>
</p>

متنی با قلم Tahoma و اندازه 2 و رنگ قرمز

شناسه های تگ <font>
AttributeExampleکاربرد
size="number"size="2"تعیین اندازه قلم
size="+number"size="+1"افزایش اندازه قلم
size="-number"size="-1"کاهش اندازه قلم
face="face-name"face="Times"تعیین نام قلم
color="color-value"color="#eeff00"تعیین رنگ قلم
color="color-name"color="red"تعیین رنگ قلم

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


دیگر از تگ <font> استفاده نکنید!

تگ <font> از رده خارج محسوب میشود و کنسرسیوم جهانی تعیین استانداردهای وب (World Wide Web Consortium, W3C) این تگ را از مجموعه تگهای استاندارد اچتمل کنار گذاشته است و اکیدا توصیه میشود که از Style Sheet ها برای تعریف هر گونه خواص نمایشی و آرایشی (layout & Presentation) المانها در اچتمل استفاده شود.


روش صحیح تعیین نام قلم، اندازه و رنگ متون با کمک Style Sheet ها:

هر چند که مبحث و کلاسهای درس Style Sheet ها در "مدرسه وب" در دست تهیه بوده و امیدواریم که بزودی ارائه شوند ولی تا قبل از آن استفاده از شناسه ای به نام style در بسیاری از المانها کار گشا خواهد بود. مثالهای ساده زیر نحوه تعیین نام قلم، اندازه و رنگ متون را با کمک شناسه style به نمایش خواهند گذاشت:

تعیین نام قلم
مثالی در مورد تعیین نام قلم در یک استیل درجا (inline)

تعیین اندازه قلم
مثالی در مورد تعیین اندازه قلم در یک استیل درجا (inline)

تعیین رنگ قلم
مثالی در مورد تعیین رنگ قلم در یک استیل درجا (inline)

تعیین نام، اندازه و رنگ قلم
مثالی در مورد تعیین نام، اندازه و رنگ قلم در یک استیل درجا (inline)

مثال کاربردی در مورد Style Sheet ها
مثالی در مورد نحوه تعریف استیلهای مختلف نمایش متون در جداول


تگ <span>
تگ <span> سبب تعریف محدوده و گستره ای مشخص میشود. تمامی المان هائی که درون تگهای <span> و <span/> قرار خواهند گرفت خواص آنرا به ارث خواهند برد، خواصی از قبیل استیل (Style) و یا سمت و جهت نمایش متون(dir).
بر خلاف تگ های <p> و <div> مرورگرها هیچ سطر جدیدی به اول یا آخر المان <span> اضافه نمی کنند.

مثال:
کد اچتمل نمایش کد روبرو توسط مرورگر
<p>Some text <span style="color:#0000AF;">another text</span> again text...</p>

Some text another text again text...

id, class, title, style, dir, lang شناسه های استاندارد المان span

مثالهائی از نحوه استفاده از المان span و Style sheet ها:
روش قدیمیروش صحیح
<font color="#FF00FF">Hello!</font><span style="color:#FF00FF">Hello!</span>
<font color="rgb(255,0,255)">Hello!</font><span style="color:rgb(255,0,255)">Hello!</span>
<font style="color:Fuchsia">Hello!</font><span style="color:Fuchsia">Hello!</span>
<font color="#FF00FF" size="3">Hello!</font><span style="color:#FF00FF;font-size:100%">Hello!</span>


تگ <div>
تگ <div> سبب تعریف محدوده و گستره ای مشخص میشود. تمامی المان هائی که درون تگهای <div> و <div/> قرار خواهند گرفت خواص آنرا به ارث خواهند برد، خواصی از قبیل استیل (Style) و یا سمت و جهت نمایش متون(dir).
بر خلاف تگ <span> مرورگرها یک سطر جدید به اول و آخر المان <div> اضافه می کنند.

مثال:
کد اچتمل نمایش کد روبرو توسط مرورگر
<p>Some text <div style="color:#0000AF;">another text</div> again text...</p>

Some text

another text
again text...

id, class, title, style, dir, lang شناسه های استاندارد المان div

تعیین جهت نمایش متون
مثالی در مورد استفاده از تگ div و اعمال "جهت نمایش متون" به بخشی از صفحه اچتمل


Start TagPurposeکاربرد
<div>Defines a division/section in a documentتعریف بخش و ناحیه ای از صفحه اچتمل
<span>Defines a section in a documentتعریف بخش و ناحیه ای از صفحه اچتمل

مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها 






نوع مطلب : آموزش Html، 
برچسب ها :
لینک های مرتبط :

       نظرات
دوشنبه 3 مرداد 1384
رضا عارفان

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


مثالها:

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

رنگ متن و زمینه نامتناسب
مثالی از انتخاب نامناسب رنگ متن و پس زمینه

مثالهای بیشتر 


رنگ و تصویر زمینه در صفحات اچتمل:

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

شناسه bgcolor برای رنگ پس زمینه (background color)

شناسه bgcolor رنگ پس زمینه را تعیین میکند. مقدار رنگ پس زمینه میتواند نام رنگ (مثل red یا blue ) ، مقدار آن بر اساس استاندارد RGB و یا حتی مقدار هگزادسیمال (Hexadecimal) باشد.

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

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

شناسه Background برای تصویر پس زمینه:

برای تعیین تصویری که به عنوان پس زمینه صفحه نمایش داده میشود از شناسه background استفاده میشود.مقدار این شناسه URL یا آدر س تصویر (image) میباشد.اگر ابعاد تصویر کوچکتر از ابعاد صفحه مرورگر باشد، تصویر زمینه تکثیر خواهد شد تا حدی که تمام صفحه نمایش از تصویر زمینه پوشانده شود.

<body background="bg.gif">
<body background="http://www.khaterat.com/images/bg.gif">

در مثال اول از آدرس دهی نسبی (relative) برای تعیین URL یا آدرس تصویر استفاده شده و در واقع در این مثال فایل اچتمل و تصویر bg.gif باید در یک دایرکتوری قرار گیرند. در مقابل مثال دوم از آدرس دهی مطلق (absolute) برای تعیین آدرس تصویر استفاده شده است و همانطور که میدانید آدرس تصویر در هر نقطه از فضای وب میتواند باشد.

نکات مهم: اگر از تصاویر پس زمینه در صفحات اچتمل استفاده میکنید به نکات زیر توجه کنید :

  • هرتصویری با فرمت gif و یا jpg قابل استفاده به عنوان تصویر زمینه میباشد.
  • از تصاویر بزرگتر از ده کیلوبایت ظرفیت به هیچ وجه استفادا نکنید، در غیر این صورت سرعت load صفحه بشدت پایین خواهد آمد.
  • از تصاویر زمینه هماهنگ با دیگرتصاویر صفحه استفاده کنید.
  • از تصاویر زمینه هماهنگ با متون صفحه استفاده کنید.
  • در رزولوشنهای مختلف به دیدن و آزمایش تصاویر پس زمینه بپردازید.
  • پر مصرف ترین رنگهای زمینه وب سایتها، رنگهای سفید، سیاه و خاکستری میباشند.
  • اغلب سایتهای وب از تصاویر پس زمینه استفاده نمی کنند! مثلا همین سایت!!!

نکته مهم در سازگاری با نسخه های جدید اچتمل و XHTML

شناسه های bgcolor و background در تگ <body> در نسخه 4 اچتمل و XHTML پشتیبانی نمیشوند و در واقع از رده خارج محسوب میشوند. در عوض کنسرسیوم W3C استفاده از Style Sheet ها را توصیه میکند و در واقع در نسخه 4 اچتمل و استاندارد جدید XHTML تمامی اطلاعات مربوط به نمایش یا presentation و layout باید در style sheet ها قرار گیرند.


مثالهای بیشتر

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

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

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

استفاده از تصویر زمینه با آدرس مطلق
در این مثال آدرس تصویر زمینه بصورت مطلق و کامل آورده شده است.

تعیین رنگ زمینه با Style Sheet ها
در این مثال چگونگی استفاده از Style Sheet ها برای تعیین رنگ زمینه آورده شده است.






نوع مطلب : آموزش Html، 
برچسب ها :
لینک های مرتبط :

       نظرات
دوشنبه 3 مرداد 1384
رضا عارفان

در این درس با تگ img ، شناسه src و alt ، تگهای Map و Area و چگونگی نمایش تصاویر و همچنین تنظیم محل آنها در سندهای اچتمل آشنا خواهید شد.

مثالها:

درج تصویر
نحوه درج تصاویر با کمک تگ img

درج تصویری واقع در فضای آدرسی دیگر
درج تصویری واقع در دایرکتوریی غیر از آدر س صفحه اچتمل و یا تصویری واقع در فضای آدرسی دیگر سایتها

مثالهای بیشتر 


تگ img و شناسه src یا source

در زبان اچتمل تصاویر را با کمک تگ <img> تعریف میکنند. تگ <img> از نوع تگهای خالی است، بدین معنا که فقط دارای یک یا چند شناسه و attribute بوده و دارای تگ انتهائی یا <img/> نیست.

مهمترین شناسه برای درج و تعریف یک تصویر src یا source نام دارد و مقدار این شناسه آدرس یا URL تصویر میباشد. تصاویری که مرورگر در یک صفحه وب نمایش میدهد میتوانند در همان دایرکتوری صفحه اچتمل، در دیگر دایرکتوریهای همان سایت و یا در فضای بیکران وب قرار داشته باشند.

شکل ساده درج یک تصویر:

<img src="url">

مقدار url آدرس اینترنتی تصویر میباشد و مثلا اگر تصویری که قرار است که در صفحه درج شود در همان دایرکتوری قرار دارد و نامش me.jpg ، کافی است که به جای url فقط نام تصویر یعنی me.jpg را بنویسید و اگر تصویر در سایتی دیکر قرار دارد url کامل آنرا بنویسید. مثلا تصویر لوگو سایت google.com دارای url ی برابر http://www.google.com/images/logo.gif است.در این url نام تصویر logo.gif بوده، در دایرکتوری images قرار داشته و روی وب سایت google.com قرار دارد.


شناسه های width و height در تگ img

کاربرد شناسه های width و height تعیین عرض و ارتفاع نمایش تصویر است. اگر از این شناسه ها استفاده نکنید، مرورگر ابتدا تصویر را لود کرده و سپس طول و عرض آنرا یافته و در نهایت نمایش میدهد. با نوشتن مقادیری غیر از مقادیر واقعی طول و عرض تصویر میتوانید به تغییر شکل و ابعاد آن بپردازید و آنرا مثلا کوچکتر، بزرگتر و یا کشیده تر نمایش دهید. مثال زیر نحوه درج تصویری را با قید ابعاد آن شرح میدهد:

<img src="http://www.google.com/images/logo.gif" width="276" height="110" >

توصیه میشود که حتما ابعاد تصویر را با کمک شناسه های width و height قید کنید، اینکار سبب کمک به مرورگر در تسریع شروع نمایش صفحه خواهد شد.(در واقع با قید ابعاد تصویر، مرورگر قبل از لود تصویر میداند که چه مقدار از صفحه نمایش باید به تصویر باید اختصاص داده شود و قبل از لوذ شدن تمامی تصاویر مرورگر شروع به نمایش قالب و چارچوب کلی صفحه خواهد کرد.)


شناسه Alt یا "alternate text" یا متن جایگزین

اگر مرورگر به هر دلیلی نتواند که یک تصویر را نمایش دهد و یا مرورگر از نوع مرورگرهائی باشد که فقط متن را نمایش میدهند، متن و text ی که با کمک شناسه alt تعیین شده است نمایش داده خواهد شد. همچنین در اغلب مرورگرها با قرارگرفتن ماوس بروی یک تصویر، متن تعیین شده توسط شناسه alt نمایش داده خواهد شد. با کمک alt اطلاعات اضافی مربوط به تصویر قابل نمایش میباشد.مثال زیر نحوه درج تصویری را با قید متن جایگزین آن شرح میدهد:

<img src="images/ganjafzar.gif" alt="Iran Developers!" >


وبلاگها و اضافه کردن تصاویر:
اگر وبلاگی داشته و میخواهید که تصویری به آن اضافه کنید دو حالت مختلف ممکن است که پیش آید:
  • الف) تصویر روی سایتی دیگر قرار داشته و شما هم میخواهید از آن تصویر که در سایتی دیگر قرار دارد استفاده کنید. در این حالت از آدرس مستقیم تصویر در شناسه src استفاده کنید، مانند :
    <img src="http://www.google.ca/images/hp0.gif" width=258 height=78 >
    در این مثال تصویر روی سایت google.ca قرار داشته و لزومی به ذخیره آن توسط شما نیست.

  • ب) تصویر روی هارد کامییوتر شما است و هنوز بروی وب منتقل نشده است. در این حالت چون اغلب سیستم های وبلاگ امکان ذخیره تصاویر را به شما نمی دهند باید ابتدا تصویرتان را با کمک FTP یا روشهای دیگر به روی سایتی دیگر منتقل کنید. شرکتهای مختلفی فضای مجانی برای ساخت صفحات وب و ذخیره اطلاعات و تصاویر در اختیار شما قرار میدهند و در یکی از سؤالهای این FAQ فهرست این شرکتها را میتوانید ببینید. بنابراین ابتدا فضائی در وب تهیه کرده، سپس تصویرتان را Upload کرده (با کمک FTP یا روشهاس دیگر ) و سپس در شناسه src از تگ img آدرس جدید تصویر را قید کنید.

    چند نکته مهم:

    • اگر در یک صفحه اچتمل از 10 تصویر استفاده شده باشد، مرورگر باید 11 فایل را لود کند.( خود صفحه به علاوه 10 تصویر)
    • استفاده از تصاویر، سرعت لود شدن صفحات را پایین می آورد.با احتیاط از تصاویر استفاده کنید و به اندازه و حجم تصویر توجه داشته باشید.
    • لود تصویری با حجم 50 کیلوبایت برای کسی که از مودمی با سرعت 28kbps استفاده میکند حداقل 15 ثانیه طول خواهد کشید.
    • برای دیدن مشخصات تصاویر در وب کافی است که روی تصویر Right click کرذه و سپس در بخش properities آدرس،ابعاد و ظرفیت تصویر را ببینید.
    • برای ذخیره تصاویر در وب کافی است که روی تصویر Right click کرذه و سپس در بخش "Save picture as" آنرا ذخیره کنید.

    مثالهای بیشتر

    تصاویر زمینه
    مثالی در مورد نحوه تعیین تصاویر زمینه با کمک شناسه background در تگ body

    ترازبندی تصاویر
    این مثال نحوه ترازبندی تصاویر در کنار متون را نشان میدهد.

    تصاویر شناور در متن
    آزاد گذاشتن تصویر در سمت چپ یا راست

    نمایش تصاویر در ابعاد مختلف
    مثالی در مورد استفاده از شناسه های width و height و نمایش تصاویر در ابعاد مختلف

    نمایش متن جایگزین برای تصاویر
    مثالی در مورد استفاده از شناسه alt

    استفاده از تصاویر هنگام ایجاد پیوند ها
    مثالی در مورد نحوه استفاده از تصاویر هنگام ایجاد پیوند ها

    ایجاد image map ها
    مثالی در مورد ایجاد image map . در این مثال هر بخش از نواحی تعریف شده قابل کلیک بوده و به پیوندی اختصاصی اشاره میکند.


  • تگ های تصاویر

    Start TagPurposeکاربرد
    <img>Defines an imageدرج تصویر
    <map>Defines an image mapتعریف Image map یا ؟؟؟
    <area>Defines an area inside an image mapتعریف ناحیه ای در داخل Image map





    نوع مطلب : آموزش Html، 
    برچسب ها :
    لینک های مرتبط :

           نظرات
    یکشنبه 2 مرداد 1384
    رضا عارفان


    ( کل صفحات : 3 )    1   2   3