نویسنده : پلين اسدي ; ساعت ۱۱:٥٦ ‎ب.ظ روز شنبه ۱٢ دی ،۱۳۸۳

 

 

  
نویسنده : پلين اسدي ; ساعت ۸:۳٤ ‎ب.ظ روز شنبه ۱٢ دی ،۱۳۸۳

آموزش اچ تی ام ال

واينهم قانون تشکيل رنگها در اچ تی ام ال :

در زبان اچتمل رنگها بر اساس ترکیب سه منبع نوری قرمز(Red)، سبز(Green) و آبی(Blue) تعریف میشوند و هر منبع نوری شدتی بین 0 تا 255 را میتواند داشته باشد. در این استاندارد نور سفید رنگی است حاصل از تداخل سه منبع نوری با شدت کامل یعنی 255 و رنگ سیاه حاصل تداخل سه نور با شدت 0 خواهد بود.(در واقع هر نقطه رنگی يا پیکسل بر روی صفحه مانیتور حاصل برخورد سه اشعه نوری قرمز، سبز و آبی ساخته شده توسط لامپ تصویر میباشد.)

توجه داشته باشید که مطابق تعریف ذکر شده امکان استفاده از 256 x 256 x 256 یا حدود 16 میلیون (16,777,216) رنگ مختلف وجود داشته و در شناسه های مختلف به یکی از سه روش زیر قادر به تعیین رنگ متن یا ناحیه ای خواهید بود:

  1. استفاده از مقادیر شدت نور در مبنای 16 با فرمت #RRGGBB که RR، GG, BB مقادیر مبنای شانزده نورهای قرمز، سبز و آبی میباشند.
  2. استفاده از مقادیر شدت نور در مبنای 10 با فرمت rgb(RRR,GGG,BBB) که RRR، GGG, BBB مقادیر مبنای ده نورهای قرمز، سبز و آبی میباشند.
  3. استفاده از نامهای استاندارد رنگها مانند red ، green و ... مطابق جدول انتهائی این صفحه
جدول زیر حاوی جندین مثال و رنگ ترکیبی در مبنای ده و شانزده میباشد:


Color مبنای 16 (Color HEX) مبنای 10 (Color RGB) نام رنگ
   #000000 rgb(0,0,0) Black
   #FF0000 rgb(255,0,0) Red
   #00FF00 rgb(0,255,0) Lime
   #0000FF rgb(0,0,255) Blue
   #FFFF00 rgb(255,255,0) Yellow
   #00FFFF rgb(0,255,255) Cyan
   #FF00FF rgb(255,0,255) Fuchsia
   #FFFFFF rgb(255,255,255) White
   #C0C0C0 rgb(192,192,192) Silver


مثالهائی از نحوه استفاده از رنگها در اچتمل:
<p style="color:#FF00FF">Hello!</p> استفاده از مقدار در مبنای 16
<p style="color:rgb(255,0,255)">Hello!</p> استفاده از مقدار در مبنای 10
<p style="color:Fuchsia">Hello!</p> استفاده از نام رنگ
body{ color: #444400; } تعیین رنگ نوشته المان body در Style sheet ها
body{ background-color:#FFFFFF; } تعیین رنگ زمینه صفحه در Style sheet ها
HR { color : #EEEECC;} تعیین رنگ خطوط افقی در Style sheet ها
a:link {color:#c00B09;} تعیین رنگ پیوندها در Style sheet ها
p {color:Yellow;} تعیین رنگ متون پاراگرافها در Style sheet ها



جدول رنگهای پايه اچتمل بر اساس مقادير هگز


#EEEEEE   #DDDDDD   #CCCCCC   #BBBBBB   #AAAAAA   #999999  
#888888   #777777   #666666   #555555   #444444   #333333  
#000000   #000033   #000066   #000099   #0000CC   #0000FF  
#330000   #330033   #330066   #330099   #3300CC   #3300FF  
#660000   #660033   #660066   #660099   #6600CC   #6600FF  
#990000   #990033   #990066   #990099   #9900CC   #9900FF  
#CC0000   #CC0033   #CC0066   #CC0099   #CC00CC   #CC00FF  
#FF0000   #FF0033   #FF0066   #FF0099   #FF00CC   #FF00FF  
#003300   #003333   #003366   #003399   #0033CC   #0033FF  
#333300   #333333   #333366   #333399   #3333CC   #3333FF  
#663300   #663333   #663366   #663399   #6633CC   #6633FF  
#993300   #993333   #993366   #993399   #9933CC   #9933FF  
#CC3300   #CC3333   #CC3366   #CC3399   #CC33CC   #CC33FF  
#FF3300   #FF3333   #FF3366   #FF3399   #FF33CC   #FF33FF  
#006600   #006633   #006666   #006699   #0066CC   #0066FF  
#336600   #336633   #336666   #336699   #3366CC   #3366FF  
#666600   #666633   #666666   #666699   #6666CC   #6666FF  
#996600   #996633   #996666   #996699   #9966CC   #9966FF  
#CC6600   #CC6633   #CC6666   #CC3399   #CC66CC   #CC66FF  
#FF6600   #FF6633   #FF6666   #FF6699   #FF66CC   #FF66FF  
#009900   #009933   #009966   #009999   #0099CC   #0099FF  
#339900   #339933   #339966   #339999   #3399CC   #3399FF  
#669900   #669933   #669966   #669999   #6699CC   #6699FF  
#999900   #999933   #999966   #999999   #9999CC   #9999FF  
#CC9900   #CC9933   #CC9966   #CC9999   #CC99CC   #CC99FF  
#FF9900   #FF9933   #FF9966   #FF9999   #FF99CC   #FF99FF  
#00CC00   #00CC33   #00CC66   #00CC99   #00CCCC   #00CCFF  
#33CC00   #33CC33   #33CC66   #33CC99   #33CCCC   #33CCFF  
#66CC00   #66CC33   #66CC66   #66CC99   #66CCCC   #66CCFF  
#99CC00   #99CC33   #99CC66   #99CC99   #99CCCC   #99CCFF  
#CCCC00   #CCCC33   #CCCC66   #CCCC99   #CCCCCC   #CCCCFF  
#FFCC00   #FFCC33   #FFCC66   #FFCC99   #FFCCCC   #FFCCFF  
#00FF00   #00FF33   #00FF66   #00FF99   #00FFCC   #00FFFF  
#33FF00   #33FF33   #33FF66   #33FF99   #33FFCC   #33FFFF  
#66FF00   #66FF33   #66FF66   #66FF99   #66FFCC   #66FFFF  
#99FF00   #99FF33   #99FF66   #99FF99   #99FFCC   #99FFFF  
#CCFF00   #CCFF33   #CCFF66   #CCFF99   #CCFFCC   #CCFFFF  
#FFFF00   #FFFF33   #FFFF66   #FFFF99   #FFFFCC   #FFFFFF  

 

جدول رنگهای نامگذاری شده و مقادير معادل هگز آن به ترتیب حروف الفباء


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
  Darkgreen
#006400
  Darkkhaki
#BDB76B
 
Darkmagenta
#8B008B
  Darkolivegreen
#556B2F
  Darkorange
#FF8C00
 
Darkorchid
#9932CC
  Darkred
#8B0000
  Darksalmon
#E9967A
 
Darkseagreen
#8FBC8F
  Darkslateblue
#483D8B
  Darkslategray
#2F4F4F
 
Darkturquoise
#00CED1
  Darkviolet
#9400D3
  Deeppink
#FF1493
 
Deepskyblue
#00BFFF
  Dimgray
#696969
  Dodgerblue
#1E90FF
 
Firebrick
#B22222
  Floralwhite
#FFFAF0
  Forestgreen
#228B22
 
Fuchsia
#FF00FF
  Gainsboro
#DCDCDC
  Ghostwhite
#F8F8FF
 
Gold
#FFD700
  Goldenrod
#DAA520
  Gray
#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
  Lightgreen
#90EE90
  Lightgrey
#D3D3D3
 
Lightpink
#FFB6C1
  Lightsalmon
#FFA07A
  Lightseagreen
#20B2AA
 
Lightskyblue
#87CEFA
  Lightslategray
#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
#688E23
 
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
 
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
     

  
نویسنده : پلين اسدي ; ساعت ۱۱:۳۳ ‎ق.ظ روز چهارشنبه ٥ شهریور ،۱۳۸٢

آموزش اچ تی ام ال

امروز براتون تمامی تگهايی که در اچ تی ام ال نويسی کاربرد داردند را برای شما می ذارم...در ضمن کاربرد بسيار زيادی نيز در وبلاگ نويسی دارند.

تگهای اصلی (Basic Tags)
<html></html> ايجاد سندی اچتمل
<head></head> ایجاد اطلاعات شناسنامه ای سند مانند عنوان و ...
<body></body> ایجاد بدنه و قسمت قابل مشاهده سند اچتمل

تگهای ناحيه Header
<title></title> تعيين عنوان سند

شناسه های مهم تگ body
<body bgcolor=?> تعيين رنگ زمينه بر اساس نام رنگ يا معادل هگز
<body text=?> تعيين رنگ نوشته بر اساس نام رنگ يا معادل هگز
<body link=?> تعيين رنگ پیوندها بر اساس نام رنگ يا معادل هگز
<body vlink=?> تعيين رنگ پیوندهای بازدیدشده بر اساس نام رنگ
<body alink=?> تعيين رنگ پیوند فعال بر اساس نام رنگ يا معادل هگز

تگهای متن و نوشته
<pre></pre> نمایش متن های از قبل فرمت شده (preformatted)
<hl></hl> ایجاد بزرگترین سر تیتر
<h6></h6> ایجاد کوچکترین سر تیتر
<b></b> ایجاد متن توپر
<i></i> ایجاد متن مورب و ایتالیک
<tt></tt> ایجاد متن از نوع تله تایپی
<cite></cite> ایجاد citation معمولا ایتالیک
<em></em> نمایش تاکید شده متن (توپر یا مورب)
<strong></strong> نمایش تاکید شده متن (توپر یا مورب)
<font size=?></font> تعیین اندازه قلم از 1 تا 7
<font color=?></font> تعیین رنگ قلم بر اساس نام رنگ یا مقدار هگز آن

پیوندها
<a href="URL"></a> ایجاد پیوند
<a href="mailto:EMAIL"></a> ایجاد پیوندی از نوع mailto
<a name="NAME"></a> ایجاد پیوندی نامگذاری شده در یک سند
<a href="#NAME"></a> ارجاع به یک پیوند نامگذاری شده

فرمت دهی
<p></p> ایجاد پاراگرافی جدید
<p align=?> ترازبندی پاراگراف در سمت left, right, or center
<br> رفتن سر سطر جدید
<blockquote> </blockquote> عنوان سازی متن
<dl></dl> ایجاد فهرستهای تعریفی
<dt> ایجاد عنصری از یک فهرست تعریفی
<dd> ایجاد شرح و توصیف یک عنصر فهرست تعریفی
<ol></ol> ایجاد فهرستهای مرتب
<li></li> ایجاد یک قلم اطلاعاتی از یک فهرست
<ul></ul> ایجاد فهرستی نامرتب
<div align=?> تگی برای فرمت دهی بلوکی بزرگ از کدهای اچتمل

المانهای گرافیکی
<img src="name"> ایجاد یک تصویر
<img src="name" align=?> تراز بندی تصویر (left, right, center; bottom, top, middle)
<img src="name" border=?> تعیین ضخامت مرز یک تصویر
<hr> درج خطی افقی
<hr size=?> تعیین ارتفاع خط افقی
<hr width=?> تعیین عرض خط بر اساس مقدار واقعی یا درصدی
<hr noshade> ایجاد خطی افقی بدون سایه

جداول
<table></table> ایجاد جدول
<tr></tr> ایجاد ردیف در جداول
<td></td> ایجاد خانه های جداول
<th></th> ایجاد عنوان ستونهای یک جدول

شناسه های جداول
<table border=#> تعیین مقدار ضخامت مرزهای یک جدول
<table cellspacing=#> تعیین فاصله بین خانه های جدول
<table cellpadding=#> تعیین فاصله بین محتوای یک خانه و مرزهای آن
<table width=# or %> تعیین عرض جدول بر اساس پیکسل و یا درصدی
<tr align=?> or <td align=?> تعیین ترازبندی خانه های جدول (left, center, right)
<tr valign=?> or <td valign=?> ترازبندی عمودی خانه های جدول (top, middle, bottom)
<td colspan=#> تعیین تعداد ستون هائی که باید یکی شوند.
<td rowspan=#> تعیین تعداد سطر هائی که باید یکی شوند.
<td nowrap> باعث جلوگیری از شکسته شدن متن در خانه جدول میشود.

فریمها
<frameset></frameset> تعریف و ایجاد مجموعه ای از فریمها
<frameset rows="value,value"> شناسه ای برای تعریف ردیفهای یک مجموعه فریم بر اساس اندازه واقعی بر حسب پیکسل و یا ابعاد درصدی
<frameset cols="value,value"> شناسه ای برای تعریف ستونها یک مجموعه فریم بر اساس اندازه واقعی بر حسب پیکسل و یا ابعاد درصدی
<frame> تعریف فریمی از مجموعه فریمها
<noframes></noframes> تعیین متنی که باید در صورت عدم پشتیبانی مرورگر از فریمها باید نمایش داده شود.

شناسه های فریمها
<frame src="URL"> تعیین سند اچتمل داخل فریم
<frame name="name"> تعیین نام برای یک فریم
<frame marginwidth=#> تعیین عرض حاشیه راست و چپ فریم
<frame marginheight=#> تعریف طول حاشیه بالا و پایین فریم بر اساس پیکسل
<frame scrolling=VALUE> تعیین اینکه فریمی از Scroll bar استفاده کند یا نه. مقادیر ممکن: yes، no و auto (حالت پیش فرض)
<frame noresize> سبب جلوگیری از تغییر اندازه یک فریم میشود.

فرمها
<form></form> ایجاد یک فرم
<select multiple name="NAME" size=?></select> ايجاد یک منوی کرکره ای و تعیین تعداد اقلامی که قبل از scrolling نمایش داده خواهند شد.
<option> تعیین هر یک از اقلام منو کرکره ای
<select name="NAME"></select> ایجاد منوی کرکره ای
<option> تعیین هر یک از اقلام منو کرکره ای
<textarea name="NAME" cols=40 rows=8></textarea> ایجاد المانی برای ورود متن در بیش از یک خط با تعیین تعداد سطر و ستون ناحیه
<input type="checkbox" name="NAME"> ایجاد چک باکسی با تعیین متن و عنوان آن
<input type="radio" name="NAME" value="x"> ایجاد رادیو باتن با تعیین متن و عنوان آن
<input type=text name="foo" size=20> ایجاد المانی برای ورود متن با حداکثر یک سطر به همراه تعیین ابعاد بر اساس نویسه
<input type="submit" value="NAME"> ایجاد دکمه ای از نوع ارسال و Submit
<input type="image" border=0 name="NAME" src="name.gif"> ایجاد دکمه ای از نوع ارسال با کمک یک تصویر
<input type="reset"> ایجاد دکمه خلاصی !! یا Reset

  
نویسنده : پلين اسدي ; ساعت ۱۱:٢٧ ‎ق.ظ روز چهارشنبه ٥ شهریور ،۱۳۸٢

آموزش اچ تی ام ال

فصل ششم :فرمت دهی (Formatting)

وظيفه گروهی از تگ های اچتمل فرمت دهی و تعيين شکل نمايش متون ( مثلا ضخیم و bold بودن و يا مورب و ايتاليک بودن ) ميباشد و در اين درس با اين گروه از تگهای formating آشنا خواهيد شد:

<b> , <big> , <code> , <del> , <em> , <i> , <ins> , <kbd> , <pre> , <s> , <samp> , <small> , <strike> , <strong> , <sub> , <sup> , <tt> , <u> , <var>

مثالهای شکل دهی متون (Text Formatting)
در مثالهای زير نحوه استفاده از عناصر و تگهای شکل دهی متون شرح داده شده اند:

شکل دهی متون
شکلهای مختلف نمايش متون با کمک عناصر b , strong , big , em , i , small , sub , sup

متون از قبل شکل دهی شده
نمايش متون از قبل شکل دهی شده با کمک عنصر pre يا pre Formatted
برای نمايش اشعار فارسی استفاده از عنصر pre بهترين انتخاب ميباشد.

عناصر ديگر شکل دهی متن
نمايش متون deleted، underline و ... با کمک عناصر code , kbd , tt , samp , var , del , ins


نحوه ديدن سورس کدهای اچتمل (HTML Source)

  • اگر ميخواهيد که سورس کدهای اچتمل صفحات وب را ببينيد کافی است که در منوی View مرورگرتان حالت Source يا Page Source را انتخاب کرده و مرورگر کد اچتمل را درون اديتوری باز کرده و قابل ذخيره توسط شما برای استفاده های بعدی ميباشد.
  • اگر صفحه مورد نظر از مجموعه فريمها (Frameset) استفاده کرده باشد برای ديدن سورس کد اصلی فريمها کافی است که ابتدا با کمک روش بالا به مشاهده سورس کدهای اچتمل پرداخته (لازم به توضيح است که در اين حالت فقط تعاريف کلی فريمها قرار دارند.) و سپس برای ديدن کد اچتمل اختصاصی هر صفحه بايد پس از "Right Click" روی هر صفحه "View Source" کرده و کد اچتمل هر فريم را جداگانه ببينيد.
  • اگر طراح سايت با کمک Java Script مانع ديدن سورس توسط شما ميشود، ابتدا در منوی Tools/Internet Options.../Security/Custom Level مرورگرهای اکسپلورر امکانات جاواسکريپت مرورگر را غير فعال کرده (disable) و سپس مراحل بالا را تکرار کنيد!!!

چند نکته کاربردی:

  1. در استفاده از Underline دقت كنيد چون در اكثر مرورگرها، پيوندها با اين خطوط نشان داده مي شوند و اين مساله ميتواند كاربران را دچار اشتباه كند .
  2. به كارگيري تگهاي EM و STRONG كه جايگزين تگهاي I و B هستند ، اين اطمينان را مي دهد كه صفحه شما توسط همه مرورگرها بصورت صحيح نمايش داده خواهد شد .
  3. به ترتيب بسته شدن تگهاي پاياني در مثال زير دقت كنيد، همان گونه كه مشاهده مي كنيد عنصر STRONG بعد از عنصر U شروع شده است ، به همين خاطر تگ خاتمه دهنده آن قبل از تگ خاتمه دهنده U قرار مي گيرد.
    <U>version <STRONG>2.0</STRONG></U>

تگهای فرمت دهی متون
Start Tag Purpose کاربرد
<b> Defines bold text نمايش توپر
<big> Defines big text نمايش در اندازه بزرگ
<em> Defines emphasized text  نمايش بصورت تاکيد شده
<i> Defines italic text نمايش ايتاليک يا کج
<small> Defines small text نمايش در اندازه کوچک
<strong> Defines strong text نمايش قوی ؟!
<sub> Defines subscripted text نمايش پايين تر از خط افقی
<sup> Defines superscripted text نمايش بالاتر از خط افقی
<ins> Defines inserted text نمايش به صورت خط زير
<del> Defines deleted text نمايش به صورت خط خورده
<s> Deprecated. Use <del> instead از رده خارج
<strike> Deprecated. Use <del> instead از رده خارج
<u> Deprecated. Use styles instead از رده خارج

Start Tag Purpose کاربرد
<code> Defines computer code text نمايش کدهای برنامه نويسی
<kbd> Defines keyboard text  نمايش متن بصورت صفحه کليدی
<samp> Defines sample computer code نمايش کدهای نمونه برنامه نويسی
<tt> Defines teletype text نمايش تله تايپ
<var> Defines a variable نمايش متغييرها
<pre> Defines preformatted text نمايش متون از قبل فرمت شده

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


 
  
نویسنده : پلين اسدي ; ساعت ٧:٢٩ ‎ب.ظ روز یکشنبه ٢ شهریور ،۱۳۸٢

آموزش اچ تی ام ال

فصل چهارم :تگ های اصلی (Basic Tags)

 

تگ ها ( tags ) اجزا تشکيل دهنده عناصر يا elements های اچتمل هستند و در اين فصل با عناصر و تگ های پايه و مهم:
<hr> , <br> , <h1> .... <h6> , <!-- comment --> , <p>
آشنا خواهيد شد . يکی از بهترين روش های يادگيری تگ های اچتمل ديدن مثالها و تغيير آنها ميباشد و با کمک اديتور اختصاصی ما و با استفاده از امکانات فارسی نويسی آن به صورت آنلاين ميتوانيد به مطالعه و يادگيری مثالها پرداخته، کدهای اچتمل را تغییر داده و با کليک روی دکمه "نمايش نتايج" به مشاهده نتايج بپردازيد.


مثالها :

مثالی ساده از يک صفحه اچتمل
در اين مثال بسيار ساده جمله "!Hellow World" در صفحه مرور گر نمايش داده ميشود و در واقع محتوا و متن عنصر body تماما نمايش داده خواهد شد.

پاراگرافهای ساده:
چگونگی نمايش متون با کمک تگ <p> و بصورت پاراگرافی

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

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


سر تيترها (Headings)
سر تيترها با کمک تگ های <h1> تا <h6> تعيين ميشوند. <h1> معرف بزرگترين سر تيتر و <h6> معرف کوچکترين سر تيتر است. مرورگر به هنگام نمايش يک سر تيتر بصورت اتوماتيک يک سطر خالی قبل و بعد از هر سر تيتر اضافه خواهد کرد.
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
مثال بالا در صفحه مرورگر بدين شکل نمايش داده خواهد شد.
پاراگرافها (Paragraphs)
پاراگرافها با کمک تگ <p> معرفی ميشوند.مرورگر به هنگام نمايش يک پاراگراف بصورت اتوماتيک يک سطر خالی قبل و بعد از آن اضافه خواهد کرد.
<p>This is a paragraph</p> 
<p>This is another paragraph</p>
مثال بالا در صفحه مرورگر بدين شکل نمايش داده خواهد شد.

سطر جديد (Line Breaks)

برای رفتن سر سطر جديد از تگ <br> استفاده ميشود.در اينحالت يک پاراگراف جديد ايجاد نميشود. تگ <br> از نوع تگ های خالی بوده و دارای تگ انتهائی (مثلا <br/> ) نميباشد.


 

<p>This <br> is a para<br>graph with line breaks</p>
مثال بالا در صفحه مرورگر بدين شکل نمايش داده خواهد شد.
کامنت ها در اچتمل (Comments)

برای نوشتن شرح و توضيحات در مورد کدهای اچتمل بايد از تگ خاصی استفاده کنيد. برای اينکار بايد متن و شرحتان را درون علائم <-- و --!> قرار دهيد. مرور تگ های comment را در نظر نگرفته و محتوی آنها را نمايش نخواهد داد و فقط شرح و توضيحات برای برنامه نويس و ديگر افرادی که احتمالا در آينده با کد اچتمل کار خواهند کرد مفيد خواهد بود. (به محل نويسه "!" توجه کنيد! فقط يکی و آنهم در ابتدا)

<!-- This is a comment -->
مثالی در مورد comments و نحوه استفاده از آن
چند نکته کاربردی:

توجه داشته باشيد که بدليل وجود مرورگرهای متفاوت (اکسپلورر، نت اسکيپ، ..) و به دليل تفاوت دقت نمايش صفحه نمايش کامپيوترها، صفحات اچتمل با اندکی تفاوت در حالتهای مختلف نمايش داده ميشوند و هميشه سعی کنيد که صفحاتتان را نه تنها با اکسپلورر که معروفترين مرورگر است بلکه با نت اسکيپ و حتی مرورگرهای کامپيوترهای مکينتاش چک کرده و همچنين در دقت های نمايش 800x600 و 1024X768 آن را امتحان کنيد.

از نظر فاصله و سطر بندی، متنی که در صفحه اديتورتان تايپ ميکنيد با چيزی که مرورگر نمايش خواهد داد متفاوت خواهد بود.هميشه به ياد داشته باشيد که فاصله های اضافی (space) و خطهای خالی متن در صفحه اديتور توسط مرورگر در نظر گرفته نشده و نمايش داده نخواهد شد.

برای نمايش بيش از يک فاصله خالی بايد از نويسها يا ترکيب کاراکتری خاصی (None Breaking Space) استفاده کنيد. در بخش ( Entities ) نهادها به اين مطلب بيشتر پرداخته خواهد شد.

فاصله های اضافی بين کلمات در يک متن اچتمل توسط مرورگرها ديده نخواهد شد و در نمايش هميشه تبديل به يک فاصله (space) خواهد شد. در ضمن يک خط خالی در متن اديتور بصورت يک فاصله يا space نمايش داده خواهد شد.

برای ايجاد يک سطر جديد هيچگاه از يک تگ <p> خالی استفاده نکنيد و به جای آن از تگ <br> استفاده کنيد..

مرورگرها به هنگام نمايش بعضی عناصر بصورت اتوماتيک يک سطر خالی قبل و بعد از آن عنصر نمايش خواهند داد. برای نمونه اين گروه از عنصرها ميتوان از پاراگراف (<p>) و سرتيترها (<h..>) نام برد.

تگ <hr> يا Horizontal Roler سبب نمايش يک خط افقی خواهد شد و در واقع بخش های مختلف مطالب اين صفحات با کمک اين تگ از هم جدا شده اند.


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

باز هم مثال پاراگرافها
اين مثال بعضی از مقادير قراردادی عناصر پاراگراف را شرح ميدهد.

ترازبندی پاراگراف ها
اين مثال نحوه تراز بندی يک پاراگراف را با کمک شناسه يا attribute ای به نام align نشان ميدهد. در اين حالت پاراگراف در وسط ناحيه نمايش داده خواهد شد.
( "align="center )

رفتن سر سطر جديد
اين مثال نحوه استفاده از تگ <br> را در يک متن اچتمل نشان ميدهد.

سر تيترها
اين مثال نحوه استفاده از تگهای <h1> .... <h6> را در يک متن اچتمل نشان ميدهد.

ترازبندی سر تيترها
اين مثال نحوه تراز بندی يک سر تيتر را با کمک شناسه يا attribute ای به نام align نشان ميدهد. در اين حالت سر تيتر در وسط ناحيه نمايش داده خواهد شد.
( "align="center )

نمايش خطوط افقی
اين مثال نحوه نمايش خطوط افقی با استفاده از تگ <br> ميباشد.

استفاده از comment
اين مثال نحوه استفاده از comment در کدهای اچتمل را نمايش ميدهد.

تعيين رنگ زمينه صفحه
اين مثال نحوه تعيين رنگ زمينه صفحه را با کمک يکی از شناسه های (attribute ) عنصر body با نام bgcolor نشان ميدهد. (Background Color)
( "bgcolor ="blue )


تگهای اصلی
در جدول زير عناصر معرفی شده در اين فصل به همراه لينکهای مربوطه جهت مطالعه بيشتر آورده شده است. توجه داشته باشيد که برای هر عنصر فهرستی از شناسه ها يا Attributes موجود است و همچنين به شناسه های کنارگذاشته شده (Deprecated) در نسخه های آينده اچتمل توجه داشته باشيد و سعی کنيد که از آنها استفاده نکنيد.


 

:

Start Tag Purpose کاربرد
<html> Defines a html document نشان شروع متن اچتمل
<body> Defines the document's body تعيين بدنه و قسمت اصلی صفحه اچتمل
<h1>-<h6> Defines heading 1 to heading 6 تعريف سر تيترهای h1 تا h6
<p> Defines a paragraph تعريف پاراگراف
<br> Inserts a single line break رفتن سر خط جديد
<hr> Defines a horizontal rule نمايش خط افقی
<!--> Defines a comment in the HTML source code نوشتن شرح و comment

  
نویسنده : پلين اسدي ; ساعت ۳:٤٦ ‎ب.ظ روز شنبه ۱ شهریور ،۱۳۸٢

آموزش اچ تی ام ال

فصل سوم :عناصر(Elements)

يک فايل اچتمل متنی از نوع text است که از عناصر يا element ها تشکيل ميشود و برای ايجاد عناصر از تگ ها يا tags استفاده ميشود. در اين فصل با عناصر و تگ ها اچتمل آشنا خواهيد شد.

تگ های اچتمل (HTML Tags)

  • با کمک تگ های اچتمل عناصر و يا Elements ساخته ميشوند.
  • در زبان اچتمل حدود 80 عنصر تعريف شده است.
  • تگ های اچتمل بوسيله دو نويسه (char) > و < ساخته ميشوند.
  • تگ های اچتمل معمولا بصورت زوج ظاهر ميشوند، مانند <b>test</b>
  • تگ اول در يک زوج تگ مثلا <b> تگ شروع و تگ دوم مثلا <b/> تگ پايانی نام دارد.
  • متن بين تگ اول و تگ دوم در يک زوج تگ محتوای عنصر يا element content ناميده ميشود، مثلا "test"
  • تگ های اچتمل را ميتوانيد بوسيله حروف لاتين کوچک (lower case) و يا بزرگ (upper case) بنويسيد و case sensitive نيستند. برای مثال دو تگ <b> و <B> معادل هم هستند ولی شديدا توصيه ميشود که به خاطر سازگاری با XHTML از حروف کوچک استفاده شود.

عناصر اچتمل (HTML Elements)

مثال بخش مقدمه را در نظر بگيريد:

<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first html page. <b>This text is bold</b>
</body>
</html>

*** نمونه ای از يک عنصر اچتمل:

<b>This text is bold</b>
عنصر اچتمل بالا با تگ <b> شروع شده و با تگ <b/> پايان می يابد. محتوای اين عنصر عبارت "This text is bold" است. لازم به ذکر است که کاربرد تگ <b> نمايش توپر يا bold متون است.

*** مثال دوم يک عنصر اچتمل (معلوم الحال) :

<body>
This is my first homepage. <b>This text is bold</b>
</body>
عنصر اچتمل بالا با تگ <body> شروع شده و با تگ <body/> پايان می يابد. همانطور که ميبينيد گاهی يک عنصر حاوی يک يا چند تگ ديگر ميباشد.وظيفه تگ <body> تعيين بدنه اصلی يا body يک متن اچتمل است.لازم به يادآوری است که تنها اطلاعات بخش <body> يک فايل اچتمل در صفحه مرورگر نمايش داده خواهد شد.
شناسه های يک تگ (Tag Attributes)

تگ ها ميتوانند حاوی اطلاعات اضافی ديگر باشند، به اين اطلاعات شناسه يا Attribute ميگويند و وظيفه آنها بيان ديگر اطلاعات يک عنصر يا Element ميباشد. مثلا در مورد تگ <body> شناسه ای به نام bgcolor وجود دارد که رنگ زمينه متن (background) را تعيين ميکند برای نمونه اگر ميخواهيد که رنگ زمينه صفحه اچتملتان سياه باشد کافی است که به شکل زير عمل کنيد :

<body bgcolor="black">

در مثال زير تگ <body> دارای چهار شناسه مختلف با نامهای width، height ، align و border و مقادير center، 60، 100 و 0 ميباشد.
<table border="0" width="100" height="60" align="center" >
......
</table>

شناسه ها به صورت کلی "مقدار=نام" يا "name=value" نوشته ميشوند و هميشه به تگ شروع يک عنصر يا Element اضافه ميشوند و نهايتا اگر در يک عنصر يا Element شناسه ها قيد نشوند از مقادير قراردادی يا default آنها استفاده خواهد شد مثلا در تگ body اگر شناسه bgcolor نوشته نشود از رنگ سفيد برای زمينه صفحه استفاده خواهد شد.
مقدار يک شناسه را ميتوانيد داخل نويسه های " و يا ' بنويسيد و اختيار دست شما است فقط در مواردی که مقدار يک شناسه شامل نويسه " هم ميشود بايد از نويسه ' استفاده شود.

  
نویسنده : پلين اسدي ; ساعت ۱٠:٥٦ ‎ق.ظ روز پنجشنبه ۳٠ امرداد ،۱۳۸٢

 

امروز چند تا عکس از گروه Linkin Park می ذارم .چون خودم خيلی باهاشون حال می کنم ...

اين عکسها از توری است که اين گروه حدود ۲ ماه پيش به اروپا داشتن .

 

چه طور بود؟؟؟

  
نویسنده : پلين اسدي ; ساعت ۸:۳۸ ‎ق.ظ روز چهارشنبه ٢٩ امرداد ،۱۳۸٢

صورتک ها...

اينم يه سری Smileysهستش که همون سر ی اصلی Yahoo messengerهستش فقط متحرکه...

اگه می خواين Download کنين برين اينجا(البته ۲ سری File وجود داره )

۱-new smileysکه واسه کسايی هست که yahoo messenger رو دارن.

۲-Originalکه فقط همون سری اصلی رو به صورت متحرک می کنه و البته کسانی که Yahoo messenger رو ندارن بايد اين فايل هم قبل از فايل بالايی download کنن.

برای گرفتن اين فايلهاروی گزينه های new smileysوOriginalکليک کنيد.

  
نویسنده : پلين اسدي ; ساعت ٢:٥٩ ‎ب.ظ روز سه‌شنبه ٢۸ امرداد ،۱۳۸٢

قيمت قطعات کامپيوتر

سلام به همه بروبچه های باحال ...يه لحظه فکر نکنين اون آموزش htmlورداشته شد نه فقط بينش برای اينکه يکنواخت  نباشه يه نوشته هايی می ذارم وسطش (حالا خوب و بدش با شما).

بگذريم امروز می خواستم يه سايتی رو براتون معرفی کنم که قيمت تمامی قطعات کامپيوتر در اون وجود داره (واقعا کامل اين سايت )حتما يه سری بهش بزنين ...

اين راهش :قيمت آنلاين قطعات کامپيوتر انيجاست ...

موفق باشين ...

  
نویسنده : پلين اسدي ; ساعت ۱٢:٠۱ ‎ق.ظ روز سه‌شنبه ٢۸ امرداد ،۱۳۸٢

← صفحه بعد