تگ های از رده خارج شده

شناسه های bgcolor و background در تگ در نسخه 4 اچتمل و XHTML پشتيبانی نميشوند و

 در واقع از رده خارج محسوب ميشوند. در عوض کنسرسيوم W3C استفاده از Style Sheet ها را توصيه

 ميکند و در واقع در نسخه 4 اچتمل و استاندارد جديد XHTML تمامی اطلاعات مربوط به نمايش يا

 presentation و layout بايد در style sheet ها قرار گيرند.

* درصد بسيار کمی از مرورگرها از تگهای مربوط به frame و frameset پشتيبانی نميکنند. برای اين موارد

 بايد از تگ <noframes> جهت نمايش صفحه جايگزين استفاده شود. کاربرد اصلی تگ <frame> تعيين

 source يا نام صفحه ای است که بايد در فريم ها نمايش داده شود.

با وجودیکه هنوز بعضی از اچتمل کاران از تگ <font> برای تعیین نام و نوع قلم، رنگ و اندازه متون

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

نمیشود و استفاده از Style Sheet ها به عنوان جایگزین معرفی شده است.

تگ <font> از رده خارج محسوب میشود و کنسرسیوم جهانی تعیین استانداردهای وب (World Wide

 Web Consortium, W3C) این تگ را از مجموعه تگهای استاندارد اچتمل کنار گذاشته است و اکیدا

توصیه میشود که از Style Sheet ها برای تعریف هر گونه خواص نمایشی و آرایشی (layout &

 Presentation) المانها در اچتمل استفاده شود.

attribute

سلام

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

 ویژگی های دسته ی border :

    1- border-color : این ویژگی یا با کلمات از پیش تعیین شده و یا با مدل RGB مقدار دهی میشود.
       16 کلمه ی کلیدی داریم :aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.

             مثال                                                        {  H2 { border-color: olive

       در مدل RGB به چهار روش میتوانیم مقدار دهی کنیم. که مثالها را در سطر بعد مشاهده می کنید .

/*EM { border-color: #f00 }              /* #rgb 
/*EM { border-color: #ff0000 }           /* #rrggbb
/*EM { border-color: rgb(255,0,0) }      /* integer range 0 - 255
/*EM { border-color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0%

           اگر چهار مقدار به این ویژگی نسبت دهیم رنگ border های top, right, bottom,  left  به

ترتیب طبق داده های ورودی تغییر میکنند.

     2-border-style  : این ویژگی دارای مقادیر زیر میباشد .

none | dotted | dashed | solid | double | groove | ridge | inset | outset

اینکه هر کدوم از این مقادیر چه تاثیری دارند رو بهتره خودتون امتحان کنید و ببینید.

      3-border-width  : این ویژگی دارای مقادیر زیر میباشد .

thin | medium | thick | یا اینکه به صورت دقیقتر با عدد بیان میشود .
هر عدد باید همراه با مقیاس اندازه گیری بیان شود .
این مقیاسها عبارتند از em,ex,px,in,cm,mm,pt,pc باید در نظر داشت که بین عدد و مقیاس هیچ فاصله

ای نباشد.

مثال:                                                               {  H4 { border-width: 1px

    اگر یک تا چهار مقدار به این ویژگی نسبت دهیم طبق مثال های زیر مقداردهی می شود.
   توجه داشته باشید ترتیب کلمات داخل   /*     */ همان top, right, bottom,  left است.

/*H1 { border-width: thin }                   /* thin thin thin thin
/*H1 { border-width: thin thick }             /* thin thick thin thick
/*H1 { border-width: thin thick medium }      /* thin thick medium thin

/*H1 { border-width: thin thick medium thin } /* thin thick medium thin

      4-border-top-width  :  پهنای خط بالای border را کنترل میکند و دارای همان مقادیر گزینه ی 3

می باشد.

       5-border-right-width  :  پهنای خط سمت راست border را کنترل میکند و دارای همان مقادیر

گزینه ی 3 می باشد.

        6-border-bottom-width  :  پهنای خط پایین border را کنترل میکند و دارای همان مقادیر گزینه ی 3 می باشد.

        7-border-left-width  :  پهنای خط سمت چپ border را کنترل میکند و دارای همان مقادیر گزینه ی 3 می باشد.

        8-border-top : خط بالای border را کنترل میکند و دارای سه مقدار میباشد که مشاهده می کنید.

             {  H1 { border-top: border-top-width  border-style  color
                                  { H1 { border-top: thick solid red

        9-border-right  : خط سمت راست border را کنترل میکند و مقادیر آن مشابه گزینه ی 8 می

باشد.

        10-border-bottom  :  خط پایین border را کنترل میکند و مقادیر آن مشابه گزینه ی 8 می باشد.

        11-border-left  :  خط سمت چپ border را کنترل میکند و مقادیر آن مشابه گزینه ی 8 می باشد.

         12-border : این  ویژگی کلی ترین ویژ گی میباشد که هر چهار border  را شامل می شود و دارای سه مقدار border-width , border-style و color میباشد .

 مثال:                                            {  A:active  { border: thick double red

ویژ گی  cursor :
گاهی می بینیم که ضمن حرکت روی یک متن شکل مکان نما تغییر میکند ( مثلا شبیه به ساعت شنی میشود )
در css میتوان این خاصیت را کنترل کرد.
برای این کار از ویژ گی  cursor استفاده میکنیم . که دارای مقادیر زیر میباشد.

auto  |  crroshair  |  default  |  hand  |  move  |  e-resize  |  ne-resize  |  nw-resize  |
n-resize   |  se-resize  |  s-resize  |  wait  |  w-resize  |  text  |  help  |

باز هم پیدا کردن شکل این مقادیر رو به عهده ی خودتون میذارم .

ویژ گی های background  :
     
      برای کنترل background  در body  بهتر است از این ویژ گی در style  استفاده کنیم . این ویژ گی 

      سایر قالب ها را هم در بر می گیرد .

   1-background-color  :  همانطورکه از اسم این ویژ گی پیداست می توان بوسیله ی آن رنگ زمینه را انتخاب کرد. و مقادیر آن هم همان اسامی از پیش تعیین شده یا مقادیر RGB میباشد که قبلا به طور مفصل توضیح داده شده است.

   2-background-image  : این ویژ گی دارای دو مقدار میباشد .
    none که هیچ عکسی را در زمینه نشان نمی دهد که البته در حالت default است و استفاده از آن

ضرورتی ندارد.
    url که بعد آن آدرس عکس مورد نظر را در پرانتز می نویسیم .

مثال 
                           { (BODY { background-image: url (/ images/foo.gif
{(P    { background-image: url (http://www.htmlhelp.com/bg.png 

    3-background-repeat  : تعداد تکرار شدن را کنترل می کند و دارای سه مقدار است .
        اگر بخواهیم تصویرمان در امتداد افقی یا عمودی تکرار شود از مقادیر repeat-x و repeat-y         استفاده می کنیم و اگر نخواهیم تکرار شود از no-repeat استفاده می کنیم.
  
      مثال                                      { BODY   {  background-repeat: repeat-x
     4- background-attachment : این ویژ گی مشخص می کند که background همراه متن حرکت

کند یا اینکه ثابت بماند که بر همین اساس دارای دو مقدار scroll و fixed میباشد . مقدار scroll آن را

متحرک و مقدار fixed آن را ثابت میکند .
      
     5-background-position : بوسیله این ویژ گی مکان قرار گرفتن background را در بلوک مورد

نظر تعیین می کنیم . مقادیر آن عبارتند از (در محور عمودی)[top,center,bottom]  و (در محور افقی)

[left,center,right]
 مثال                                   { name{ background-position: bottom right . 
  
   یک روش دیگر استفاده از در صد است مثلا  0% 0% گوشه ی سمت چپ است و 100% 100% گوشه

ی سمت راست می باشد. ( از سایر واحد های اندازه گیری مثل px هم می توان استفاده کرد.
  
     6- background : این  ویژ گی هم که در بر گیرنده ی تمام موارد بالاست . مثال زیر این تمام مقادیر و

ترتیب آنها را مشخص می کند.
                                               , TABLE {   background-color, background-image
            { background-repeat , background-attachment , background-position 

    {  TABLE      { background: #0c0 url(leaves.jpg) no-repeat scroll bottom right    

                                                 
 در آخر از توجهتون کمال سپاس رو دارم . و سایر attribute ها  در مطالب بعدی ( توسط خودم یا بقیه ی

دوستان ) درج خواهند شد .

کتاب برنامه سازی پیشرفته!

با سلام حضور دوستان عزیز

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

http://www.miran.ir/qomit/cppBook/CppSlides_01.zip

http://www.miran.ir/qomit/cppBook/CppSlides_02.zip

http://www.miran.ir/qomit/cppBook/CppSlides_03.zip

http://www.miran.ir/qomit/cppBook/CppSlides_04.zip

http://www.miran.ir/qomit/cppBook/NoorC__Book.zip

شیوه نامه ها(style sheet)

با عرض سلام و خسته نباشید خدمت دوستان عزیز و گرامی

حتما با نگاه اول مطالب این صفحه به نظرتون تکرار میادچرا که این مطالب در کلاس مطرح شدند ولی از اونجایکه من خودم موقع مرور مطالب در تفکیک ان ها دچار مشکل شدم و روش های استفاده از شیوه نامه ها (style sheet) تفاوت های ظریفی با هم دارند سعی کردم مطالب را به صورت خلاصه و دسته بندی شده بنویسم.

اگر شما با چنین مشکلی مواجه نشدید که خدا رو شکر در غیر این صورت مطلب زیر را بخوانید تا شاید به شما هم در درک وبه خاطرسپاری ان ها کمک کند.

همان طور که که می دانید شیوه نامه ها به ۴ گروه تقسیم می شوند که ۳ روش ان ها کاربرد بیشتری دارندکه ما در این جا به بررسی ان ها می پردازیم.

۱.شیوه نامه دستوری:برای استفاده از شیوه نامه ی دستوری باید شیوه نامه در بدنه یعنی بین دو دستور <body>و<body/> و در یکی از دستورات html مانندp وspan به کار برده شود.

به مثال زیر توجه کنید:

<"p style="background:yellow;font_weight:bold;color:black>

متن مورد نظر

<p/>

باید توجه داشت که این شیوه نامه فقط برای این دستورp عمل می کند و چنان چه بار دیگر از دستورp استفاده کردیم خاصیت های این شیوه نامه را نخواهد داشت.

۲.شیوه نامه ی صفحه ای:در این روش از دستورات <style><style/>استفاده می گردد که در بین دو دستور <head><head/>قرار می گیرند.باید فرمت شیوه نامه مشخص گردد به این صورت که در دستور <style> عبارت"type="text/css را قرار می دهیم.

نکته:شیوه نامه را داخل دستور توضیحات قرار دهید<--توضیحات--!>زیرا بعضی از مرورگرهای قدیمیاز شیوه نامه  پشتیبانی نمی کنند.در این صورت نه تنها دستورات شیوه نامه در صفحه اعمال نمی شود بلکه متن شیوه نامه عینا در صفحه نمایش داده می شود وما می توانیم با این اقدام ساده حد اقل از نمایش داده شدن ان ها جلوگیری کنیم.

شیوه نامه ی صفحه ای به صورت زیر است:

<html>

<head>

<title/>....<title>

<"style type="text/css>

--!>

شيوه نامه ها

<--

<style/>

<head/>

<body>

محتويات صفحه ي وب

<body/>

<html/>

3.شیوه نامه ی خارجی:برای استفاده از این شیوه نامه ۱ـشیوه نامه را در یک فایل متنی ساده نوشته و با پسوند css ذخیره می کنیم.۲ـبا استفاده از دستور <link> بین فایل css  و html پیوند برقرار می کنیک.در این دستورعبارت"type="text/css"  REL="stylesheet   "ادرس فايلHREF="css را قرار می دهیم.

شیوه نامه خارجی به صورت زیر است:

<html>

 <head>

<title>.....</title>

                                                <""  type="text/cssادرس فايل <link REL=SYLESHEET HREF="css

<head/<

<body/>

محتويات صفحه ي وب

<body/>

<html/>

                                                                           امید وارم این مطالب براتون مفید واقع شده باشه                    

لطفا نظر یادتون نره                                                                                                           

معرفی چندتا دستور

سلام به همه ی دوستان

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

• دستور<strong>

    با استفاده از این دستور میتونیممتن تاکیدی رو مشخص کنیم این دستور یک دستور منطقی(فیزیکی نیست)است که متن ما رو پررنگ میکنه ببینید:

<strong>text</strong>      

• دستور<span>

     با این دستور میتونیم ویژگی خاصی رو به متن بدیم مثلا اونو گروهبندی کنیم وروی اون متن صفات خاصی به وجود بیاریم ببینید:

   <h1> <span class="black>css</span>     

<span class="white">fun<span></h1>    

• دستور <em>

     این دستور برای تاکید بر روی یک متن به کار میره متنی که بین <em> و</em>قرار بگیره برای مرورگر بعنوان تاکید محسوب میشه واونو به شیوه ی خاصی نمایش میده ببینید:

<em>hmportant point</em> 

• دستور  <blockquote>    

     اگه بخواهیم متنی رو داخل کوتیشن قرار بدیم و اونو از بقیه ی متنها جدا کنیم از این دستور استفاده میکنیم که به متن ما تورفتگی میده اینم ببینید:

< blockquote>this text hmportant</blockquote>  

امیدوارم این مطالب مفید واقع بشه.

رده بندی و شبه رده بندی و خصوصیات font

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

 

سلام

از اونجایی که دوستانم سید نورانی و مطهری نسب مطالب اولیه css را خیلی خوب و کامل توضیح دادند به معرفی ویژگی های هر دسته از تگ ها(انتخاب کننده ها) می پردازم.

ولی قبل از اینکه به این بحث بپردازم رده بندی و شبه رده بندی رو به درخواست یکی از دوستان توضیح میدم.

منظور از رده بندی تعیین یک class برای تگ هاست که به دو صورت انجام می شه:

 

1. tag name.class name{attrib1:value1;attrib2:value2;…}:

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

 

b.att1{color: pink;  text-decoratin: underline}

i.att2{color: pink;  text-decoratin: underline}

 

2. .class name{attrib1:value1;attrib2:value2;…}  :

 این شیوه ایراد بالا را رفع میکند. با این روش یک class به صورت آزاد ایجاد می شود و به هر تگی که ویژگی های این class را نیاز داشته باشد نسبت داده می شود. به این صورت:

 

.att1{color:pink; text-decoration:underline}

…

…

…

<body>

<b class="att1">……</b>

<i class="att1">……</i>

</body>

که هر دو تگ بالا خصوصیات att1 را در متن اعمال می کنند.

 

منظور از شبه رده بندی نوعی رده بندی خاص برای لینک ها(تگ a) است که در ادامه اشاره می شود:

a.class name    or     a:class name:link

a.class name:visited

a.class name:hover

a.class name:active

 

برای توضیح بیشتر در مورد مطالب بالا به مطلب آقای سید نورانی مراجعه کنید

 

لازم است که به این نکته اشاره کنم که بعضی از ویژگی ها همزمان می توانند چند مقدار داشته باشند که با یک فاصله از هم برای آن ویژگی تعریف می شوند.مثل:

 

{Text-decoration: underline overline}

که یک خط در زیر و یک خط در بالای متن قرار میدهد

 

حال به ویژگی دستۀ فونت در css می پردازم

1. font: اگر بخواهیم چند ویژگی قلم را با هم بر روی یک متن اعمال کنیم از این ویژگی استفاده می کنیم

{font: font-style font-vatiant font-weight font-size/line-height font-family}

مقادیر این ویژگی باید به ترتیبی که در بالا اشاره شده نوشته شوند در غیر این صورت عمل نمی کنند.به عنوان مثال:

div

{

font: italic small-caps 500 24px/50px arial

}

            مقدار line-height ارتفاع هر خط از متن را مشخص می کند

2. font-style:این ویژگی دارای دو مقدار normal, italic است
3. font-variant:این ویژگی دارای یک مقدار است.small-caps که تمام حروف کوچک را به حروف بزرگ ولی قدری کوچکتر از معمول(small-capitals) تبدیل می کند
4. font-weight:ضخامت خط ما را مشخص می کند و دارای مقادیر زیر است:

bold, bolder, normal, lighter, 100, 200,…, 900

5. font-size: اندازه فونت را مشخص می کند. دارای مقادیر زیر است:

xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger,                   length( word سیستم), (num) %

6. font-family:نام قلمی است که می خواهیم استفاده شود.

 

در آخر ویژگی text-indent که برای تحقیق گفته شده بود فاصله سطر اول متن را با حاشیه تنظیم می کند.

مقدمه ای برای css

سلام

امروز میخوام یه متن خیلی ساده واسه شروع CSS بنویسم که در اون سعی میکنم مطالب آقای سید نورانی رو هم به زبان ساده تر بیان کنم .بنابر این بهتره ابتدا متن ایشون رو مطالعه کنید. پیشاپیش به خاطر تکراری بودن این بحث از تمام اساتید پوزش میخوام.

cascading style sheets فایل های متنی هستند یا میشه گفت فایل های متنی خاصی در فایل html هستند که به ما اجازه میدن style ها صفت ها ( attributes) و مکان قرار گرفتن item ها را در صفحه یhtml کنترل کنیم و به سلیقه ی خودمون اونها را تغییر بدیم .

در واقع بعضی از این کار ها در html هم امکان پذیره اما بیشتر اونها پیش از این در html قابل اجرا نبود . پس css در این رابطه توانایی بیشتری داشته و در طراحی ظاهر صفحات کمک بیشتری میکنه.

سه روش برای درج css در صفحه وجود داره:

1. درج کدها در head و بین تگهای <style> و <style/>.
2. درج کدها در فایل جداگانه و رجوع به اونها از فایل های html.
3. درج کدها در خود تگ های html که تقریبا مثل درج صفت هاست .

در روش اول بعد از اینکه در قسمت head تگهای <style type="text/css> و <style/> را نوشتیم بین این دو شروع به اعلان تگ های استفاده شده در قسمت body و مشخص کردن صفت ها و خصوصیاتشون میکنیم.

برای این کار تگ مورد نظر رو بدون <> نوشته و در عوض جلوی تگ از } و بعد از درج صفت ها از { استفاده میکنیم که این همون بخش اول قانون style بوده که به عنوان انتخاب کننده شناخته شده و بعد هم کافیه برای بخش دوم یا همون اعلان اسم هر صفت رو با مقدارش قرار بدیم.

باید توجه کرد که برای جدا کردن اعلانها از علامت ; استفاده بشه.

{ مقدار۲:ويژگي۲;مقدار:ويژگي} انتخاب كننده

این روش باعث میشه تمام تگ های مشابه انتخاب کننده خصوصیات مشابه ذکر شده رو داشته باشن بنابر این واسه اینکه تگهای دلخواه رو خودمون تعیین کنیم باید از صفت CLASS یا  id استفاده کنیم یعنی اول تو قسمت body به تگهای مورد نظرمون به شیوه ی زیر یک اسم بدیم.

< "class="name   نام تگ>

< "id="name   نام تگ>

سپس اگر از صفت CLASS استفاده کرده باشیم در قسمت style بعد از نام  انتخاب کننده یک نقطه میذاریم و بعد name رو مینویسیم.و اگر از صفت id استفاده کرده باشیم بین نقطه و name علامت #رو میذاریم.با این روش فقط تگهای هم کلاس دارای خصوصیات ذکئ شده میشن.

گاهی هم میخواهیم که چند تگ متفاوت از نظر نوع چند خاصیت مشترک داشته باشن که در اینجا باز هم ابتدا به تگ های دلخواه صفت های CLASS یا id رو داده و بعد در قسمت style دیگه نام  انتخاب کننده رو نمیاریم بلکه فقط از نقطه و name استفاده میکنیم.

 {.............;............} name  .

 
در روش دوم درج کدهای CSS یه فایل با پسوند CSS در   notepad ساخته و درونش فقط کلاسها یا تگ ها رو با صفت هاشون مینویسیم. بعد از ذخیره کردن این فایل کافیه متن زیر رو همون جایی که قبل از این تگهای <style type="text/css> و <style/> رو مینوشتیم  بنویسیم. 

<LINK REL=STYLESHEET TYPE="text/css" HREF="style.css">

به جای کلمه ی style اسمی رو که به فایل css داده بودیم رو مینویسیم.

در روش سوم در تگ مورد نظر که میخواهیم effect ها روی اون اعمال بشه بعد از نوشتن کلمه ی style  و " = صفات رو به همون ترتیبی که قبلا مینوشتیم درج میکنیم. و دیگه لازم نیست اونها رو در قسمت head درج کنیم.

< "........ ; tag  style=" font_family: arial >

 البته روش چهارمی هم وجود داره که ترکیبی از دو روش اول و دومه و در آن ابتدا آدرس style sheet ارجاع داده شده و سپس کد های اضافه شده نوشته میشن که فعلا از تشریح  دقیق اون صرف نظر می کنم.

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

سوال

به نام دوست

مطرب عشق عجب ساز و نوایی دارد         نقش هر نغمه که زد راه به جایی دارد

عالم از ناله عشاق مبادا خالی         که خوش آهنگ و فرح بخش هوایی دارد

سلام به همه

راستش امروز به جای یه مطلب درسی یه سوال درسی دارم.

اما قبل از اون میخوام یه چیز دیگه بگم

آخه میدونین الان که اومدم یه سر به وبلاگ زدم و نظرهای دوستان رو خوندم 3تا نظر دیدم که 2تاشون واسه 2نفرازدوستان بود که هردوشون به من لطف داشتن. منم همینجا ازشون تشکر می کنم که زحمت کشیدن و با نظراشون منو شاد کردن.

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

به همه پیشنهاد میکنم که به وبش یه سری بزنید ببینید یه پسر 18ساله چه مهارتی تو برنامه نویسی داره! (حداقل واسه من که از پاسکال فقط program نوشتنش رو بلدم خیلی جالب بود)

میخوای وبش رو ببینی اینجا کلیک کن

بگذریم...

اما اون سوالی که داشتم:

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

متن درست شد اما بعضی جاهاش نقص داشت. مثلا به جای بعضی از حروف علامت؟ چاپ شده بود.

بعدش اومدم اون متاتگ رو توی قسمت head قرار دادم. اما این بار کل حروف تبدیل شد به مربع و علامت هایی مثل همون علامت؟...! حالا من چیکار کنم؟

حالا اگردوستانی که متوجه سوال من شدن و جوابی واسش دارن لطف کنن و جواب بدن ازشون ممنون میشم.

ساختار كلي style

سلام

حتما همه دوستان تا حالا طرز ساختن یک style را یاد گرفته اند. ولی خوب! باید از یک جایی مطالب CSS را شروع کنیم و من بهتر دونستم از همون اولش شروع کنم.

 

ساختن style

تگ <style> تگي است كه درون تگ اصلي <head> تعريف مي شود و داراي يك ويژگي اجباري مي‌باشد.آن ويژگي را اينگونه بايد در تگ style نوشت:                          <style    type="text/css">

بعد از اين مرحله بايد قوانين مورد نظر را درج كرد و در انتها </style> را بنويسيم.

 

هر قانون style‌ از دو بخش اصلي تشكيل مي شود:

 

1)      انتخاب كننده : كه مشخص مي كند كدام قسمت مورد فرمت دلخواهمان قرار گيرد.

2)      اعلان : كه از يك يا چند جفت – ويژگي/مقدار- تشكيل شده است.

 

براي ساختن يك قانون style ابتدا انتخاب كننده را مي نويسيم و بعد درون آكولاد ويژگي و مقدار آن را كه با (:) از هم جدا مي شوند را تايپ مي كنيم.                                    {مقدار:ويژگي} انتخاب كننده

 

            اگر براي يك انتخاب كننده چند –ويژگي/ مقدار- داشتيم آنها را با ; از هم جدا مي كنيم.

 

ساختن انتخاب كننده ها

 

انتخاب كننده به واسطه محدوده اجراي هر قانون style به صورت هاي مختلف ساخته مي شود. براي مثال گاهي مي خواهيم يك قانون روي همه ي تگ هاي p اجرا شود و گاهي هم مي خواهيم روي تگ هاي خاصي از p اجرا شود و يا مي خواهيم روي بخشي از محتواي تگ p اجرا شود نه روي همه ي محتوا. براي اين منظور 5 معيار وجود دارد که در این مطلب به ۳ مورد آن اشاره می کنم.

 

            1- ساختن انتخاب كننده توسط نوع يا نام آن تگ:

 

ساده ترين انتخاب كننده است كه فقط از نام همان تگ تشكيل مي شود. محدوده اجرايي اين قانون روي همه ي تگ هاي مشابه نام انتخاب كننده است. براي مثال:      

با اين تعريف زمينه همه ي تگ هاي div سبز مي شود. Div{backgrund:green}                           

 

            2- ساختن انتخاب كننده توسط class يا id

 

در اين روش بايد تگ هاي مورد نظر را كه مي خواهيم ويژگي هاي اين انتخاب كننده روي آن ها اجرا شود را با class‌ يا id مشخص كرده باشيم.

براي ساختن انتخاب كننده توسط class ابتدا نقطه و سپس بدون فاصله نام class مورد نظر را مي نويسيم و براي كامل شدن قانون، بقيه مراحل را به روش عادي تعريف مي كنيم.

اگر براي ساختن انتخاب كننده از id‌ استفاده مي‌كنيم بايد بعد از نقطه علامت # و سپس بدون فاصله نام id مورد نظر را بنويسيم.

محدوده اعمال اين قانون تمام تگ هايي است كه id يا class آنها با id‌ يا class نوشته شده در انتخاب كننده مشابه است.

اگر بخواهيم براي تگ خاصي  با استفاده از class يا id يك انتخاب كننده بسازيم قبل از تايپ نقطه، آن تگ مورد نظر را مي‌نويسيم. در اين صورت محدوده اعمال اين قانون تمام تگ هايي است كه اولا درون آن تگ خاص هستند و ثانيا class يا id آن مشابه class يا id تعريف شده در انتخاب كننده است. براي مثال :

اگر بخواهيم درون تگ p1 ،محتواي تگ هايي كه id آنها ۰۷  مي باشد را سبز كنيم بايد بنويسيم:

          p1.#07{color:green}                                                                                                                                                                                                  

            3- انتخاب كننده لينك ها براساس وضعيت آنها

 

ما با style ها اين امكان را پيدا مي كنيم كه لينك ها را بر اساس وضعيت فعلي آنها فرمت كنيم.

براي اين كار ابتدا a: را مي نويسيم و سپس براي مشخص كردن وضعيت لينك ها يكي از قسمت هاي زير را مي نويسيم:

1)      link: براي انتخاب لينك هايي است كه هنوز ديده نشده اند و با ماوس روي آنها قرار نگرفته است. براي مثال قانون زير لينك هايي كه هنوز ديده نشده اند را به رنگ آبي نشان مي دهد.

                                                                                                        a:link{color:blue} 

 

2)      Visited: براي انتخاب لينك هايي كه كاربر قبلا آنها را مشاهده كرده است. براي مثال قانون زير لينك هاي ديده شده توسط كاربر را به رنگ قرمز در مي آورد.   a:visited{color:red}             

 

3)    Focus: براي لينك هايي است كه توسط كليد هاي ميانبر انتخاب شده و آمادة فعال شدن مي باشند.

 

4)      Hover: براي انتخاب لينك هايي كه اشاره گر ماوس روي آنها قرار دارد. براي مثال قانون زير لينك هايي كه ماوس روي آنها قرار گرفته است را به رنگ سبز درمي آورد. a:hover{color:green}

 

5)      Active: براي تغيير دادن شكل ظاهري لينك ها در حالتي كه روي آنها كليك مي شود.

 

چون هر لينك مي تواند در در چندين وضعيت قرار داشته باشد(براي مثال هم فعال باشد و هم ماوس روي آن قرار بگيرد) بهتر است اين قوانين به ترتيب كه در بالا گفته شد تعريف شوند.

 

اين مطلب ساده تر از اين هست كه من توضيح دادم. يعني به نظر خودم كمي پيچيده شده. هر كس از رفقا كه تونست اين مطلب را به زبون ساده تري بنويسه ممنون مي شم كه بنويسه تا همگي استفاده كنيم.

بخونید متوجه میشید

به نام دوست

بارها گفته ام و بار دگر میگویم      که من دلشده این ره نه به خود میپویم

   در پس آینه طوطی صفتم داشته اند          آنچه استاد ازل گفت بگو میگویم

سلام به همه دوستان

بالاخره من هم اومدم که یه چیزی بنویسم فقط قبلش باید به خاطر دو تا مسئله عذر خواهی کنم

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

دوم اینکه ببخشید که من تا امروز به غیر از اون 2تا مطلب حاشیه ای چیزی ننوشتم و یه سری حرف و حدیث به وجود اومد. البته دلایلی داشتم اما مهم نیست.

یه نکته دیگه اینکه شما رو به خدا بیاین نظر بدین که منم افسرده نشم . مثل دفه قبل نشه که من هی بیام خودم نظربدم تا یه کم حفظ آبرو کنم.

اون دفه که یه شعر نوشتم یه نفر که اسمشون رو هم ننوشته بودن لطف کردن و حالا یا به شوخی یا به جد منو تشویق کردن وخواستن که بازم از این کارا بکنم.

اگه حرفشون جدی بود باید ازشون تشکر کنم که به من لطف دارن. اگه هم که شوخی و مسخره بود بازم باید ازشون تشکر کنم که حداقل زحمت کشیدن و نظر دادن.

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

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

بیاین یه کاری کنیم که خیلی ها که دانشگاه پیام نور رو کوچیک میبینن بهشون ثابت شه که اینجا پیام نور قمه و حداقل بچه های IT اینجا از هم رشته ای های خودشون تو خیلی دانشگاههای دیگه (که شاید اسم دانشگاشون خیلی گنده ترازاسم دانشگاه ما باشه) هم خلاقترن هم فعالترن هم سطح علمیشون بالاتره! (خوب خودمونو تحویل میگیرما)

بگذریم...! من خیلی وقته که میخواستم یه مطلب خیلی ساده و کم کاربرد رو که احتمالا همه دوستان خودشون بلد هستند رو بنویسم اما نشد.

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

 حروف نهادی

بعضی از حروف مانند < درHTML معنی و مفهوم خاصی دارن.واسه همینم نمیشه توی متنمون ازشون استفاده کنیم.

حالا واسه نمایش این حروف باید چیکار کنیم؟ باید از قاعده زیر استفاده کنیم:

;یک نام نهادی& یا ;یک عدد نهادی&

مثلا واسه نمایش " " (space) باید از &nbsp; استفاده کنیم. ضمنا چون به خاطر سپردن نام از عدد راحت تره توصیه میکنم حتی الامکان از نامهای نهادی استفاده کنید.

یه نکته هم که باید بگم اینه که این نامها به کوچکی و بزرگی حروف حساسند.

بعضی از حروف نهادی رایج

نتیجه	اسم کاراکتر	نام نهادی	عدد نهادی
	non-breaking space	;nbsp&	;160#&
>	less than	;lt&	;60#&
<	greater than	;gt&	;62#&
&	ampersand	;amp&	;38#&
"	quotation mark	;quot&	;34#&
'	apostrophe		;39#&
÷	division	;divide&	;247#&
×	multiplication	;times&	;215#&
²	superscript 2	;sup2&	;178#&

امکانات دیگری از جدول

تا کنون از دستورات <TABLE>,<TR>,<TD>, <TH> برای رسم جدول استفاده شده است  اما دستورات دیگری نیز وجود دارند که برای کنترل بیشتر جدولها اعمال میشوند از جمله:

• یک یا چند گروه  از سطرها ممکن است حاوی بخش راس باشند که با دستور<THEAD> مشخص میشود
• ممکن است حاوی بخش زیر نویس باشند که با دستور<TFOOT> مشخص میشود
• ممکن است شامل بخش بدنه باشند که با دستور<TBODY> مشخص میشود

گرچه تمام این دستورات اختیاری اند جدول باید حداقل شامل یک راس یا خانه مربوط به داده ها باشد که به ترتیب توسط<TH> و <TD>مشخص میشوند.

صفت FRAME

این صفت دارای تصاویر زیر میباشد:

• مفهوم مقدارBOX این است که فریم دور جدول فعال است
• AVOBEفقط لبه بالایی را مشخص میکند
• BELOWلبه پایینی را مشخص میکند
• BORDER و BOXتمام لبه ها را مشخص میکند
• HSIDEفقط لبه های بالایی و پایینی را مشخص میکند
• LHS لبه سمت چپRHS لبه سمت راستVSIDES لبه های سمت چپ و راست را مشخص میکند و مقدار تعیین میکند که هیچ مرزی رسم نشود

صفت RULES

این صفت قواعدی را مشخص میکند که ممکن است در بین سلول های واقعی جودل ظاهر گردد مقادیر این صفت عبارتند از:

• مقدارRULES خطوط بین گروههای سطر یا ستون جدول را نمایش میدهد
• مقدارCOLS قواعد تقسیم را فقط برای ستونها مشخص میکند
• مقدارALL قواعد تقسیم بین سطرها و ستونها  را مشخص میکند
• مقدار GROUPSقواعد تقسیم را بین گروههای سلولهای جدولی که توسط دستورات< THEAD>,<TBODY>,<TFOOT> یا<COLGROUP> تعریف شده اند مشخص میکند
• مقدارROWS قواعد تقسیم را فقط برای سطرها مشخص میکند
• مقدارNONE مشخص میکند هیچ قاعده ی تقسیمی وجود ندارد

ادامه جدول

به نام دوست

 

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

در ضمن برای خصوصیاتی که در مطلب قبلی توضیح دادم در این مطلب برای اختصار توضیحی داده نشده و دوستان می توانند به مطلب قبل مراجعه کنند .

 

برای ایجاد یک سطر جدول از تگ <tr> استفاده می شود که دومین رکن در table است.

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

 

برای وارد کردن اطلاعات و مشخص کردن خانه های جدول از تگ <td> استفاده می شود.

 

برای وارد کردن اطلاعات و مشخص کردن خانه های جدول جهت تیترها وheader ها از <th> استفاده می شود.(منظور از تیتر این نیست که حتما باید در سطر بالایی قرار گیرد)

 

این تگ دو ویژگی بصورت پیش فرض دارد:

1. کلمات بصورت bold نمایش داده می شوند
2. align در این تگ برابر cener است (align="center")

 در بقیه ویژگی ها با <td> مشترک است.

 

ویژگی های زیر در <tr>,<td>,<th> مشترک است:

• Align 
•  Bgcolor
• Border
• Bordercolor
• Borderdarkcolor
• Borderlightcolor
• Title
• Valign: این ویژگی طرز قرار گیری (تراز کردن) اطلاعات داخل سطرها یا خانه ها بصورت عمودی را به عهده دارد که خود دارای چهار مقدار است.

1. top
2. middle
3. bottom
4. baseline:مطالب را در سطر ابتدایی (سطر بالای خانه ها) قرار می دهد.

 و  ویژگیهایی که فقط برای <th> و <td> استفاده می شوند عبارتند از:

• Background
• Height
• Width
• Colspan: با این ویژگی میتوان چند خانه از یک سطر را با هم ادغام کرد و یک خانه به دست آورد ولی برای تنظیم جدول این خانه ادغام شده، چند خانه(به همان تعدادی که در colspan مقدار دهی شده) به حساب می آید.

<tr><td>&nbsp;</td>

       <td>&nbsp;</td>

       <td>&nbsp;</td></tr>

<tr><td colspan="2">&nbsp;</td>

       <td>&nbsp;</td></tr>

در این مثال سطر اول 3 خانه دارد و در سطر دوم خانه اول و دوم با هم ادغام شده و تشکیل یک خانه را می دهد.پس در سطر دوم دوخانه داریم.

 

• Rowspan: این ویژگی مانند colspan است ولی بر خلاف آن خانه های یک ستون را با هم ادغام می کند و خانه های سطر پایین در شمارش محسوب شده ولی در آن سطر هیچ تگی برایش نوشته نمی شود.

<tr><td rowspan="2">&nbsp;</td>

       <td>&nbsp;</td>

       <td>&nbsp;</td></tr>

<tr><td>&nbsp;</td>

       <td>&nbsp;</td></tr>

در این مثال خانه اول سط اول و دوم با هم ادغام شده تشکیل یک خانه را می دهند. حال وارد کردن اطلاعات در سطر دوم از خانه دوم شروع می شود.

ادامه دارد...

زمان برگزاری جلسه جدید

سلام

پیرو پیام قبلی در مورد هماهنگی با مسئولین دانشگاه و برگزاری جلسه جدید، به اطلاع همه دوستان میرسونم که جلسه بحث جدید دوره آشنایی با طراحی صفحات وب، در تاریخ پنجشنبه مورخ ۱۶/۱/۸۶ از ساعت ۱۰ صبح تا ۲ بعد از ظهر در محل مرکز ۲ برگزار میشه. لذا از همه دوستانی که این جلسات رو پیگیری کردند تقاضا دارم راس ساعت ۱۰ در محل مرکز ۲ حاضر بشن تا بتونیم جلسات رو حتی با کیفیتی بهتر از گذشته ادامه بدیم. در ضمن دوستانی که به میل خودشون تمرین یا همون پروژه تمرینی دلخواه رو در ایام تعطیلات به انجام رسوندن، اگر مایلند کارهایی که انجام دادن رو همراه خودشون به جلسه بیارن تا ضمن بحث در مورد کیفیت و در صورت نیاز رفع اشکال کارها، آمادگی لازم رو برای انجام کارهای بعدی کسب کنند.

با آرزوی موفقیت، حسینی

ساخت نقشه تصویری

ساخت نقشه تصويری  ( image map )

در بسياری از مواقع در يک صفحه وب مجبوريم قسمتی از يک عکس را به صفحه ای لينک کنيم. برای اين کار در html از Image Map استفاده می کنيم.مثلا می خواهیم یک نقشه داشته باشیم به طوری که با کلیک کردن روی

هر قسمت آن به صفحه ی دیگری هدایت شویم.

برای این کار ابتدا عکس مورد نظر را در صفحه قرار میدهیم و خصوصیت usemap=” “ را به آن اضافه می کنیم.

              <img src="images/mypic.gif" usemap="#map1">

                                          

                   به علامت # دقت کنيد که بايد نوشته شود.

حالا تگهای نقشه را اضافه می کنیم.

 

<map name="map01">

<area shape="rect" coords="25,25,55,50"href="page.htm">

<area shape="circle" coords="124,243,40"  href=

"www.yahoo.com">

<area shape="poly"  

coords="22,30,76,90,147,199,289,270,140,111,44,67"

href="pages/first.html">

  </map>

 

 تگ <map> با خصوصیت name مشخص میکند که چه عکسی باید این خاصیت را داشته باشد.

حالا نوبت به تعيين قسمتهاي مختلف عکس رسيده که هر قسمت در چه اندازه اي و به کجا بايد لينک شود. اين قسمتها ميتوانند اشکال هندسي نظيردايره، چهارگوش وچند ضلعي باشند. اين اطلاعات در تگ <area> مشخص ميشوند، اين تگ داراي سه خصوصيت ميباشد:

   ۱-"Shape="   مشخص ميکند که هر قسمت داراي چه شکل هندسي ميباشد. اگر چهارگوش rectangle باشد آنرا برابر با "rect"  قرار ميدهيم، اگر دايره circle بخواهيم برابر با "circle" و اگر چند ضلعي polygon بخواهيم برابر با "poly"   قرار ميدهيم.

   ۲-"  "=Coords اين خصوصيت، مختصات نقاط تشکيل دهنده  شکلها را مشخص ميکند که مختصات هر نقطه بر اساس محورy,x در مقياس پيکسل ميباشد. براي تشکيل يک لينک به شکل چهارگوش بايد مختصات دو نقطه گوشه چپ طرف بالاوگوشه راست طرف پايين آنرا بدست بياوريم ، چون هر نقطه داراي دو مختصات ميباشد يکي بر روي محورx ها و دیگری y ها پس چهار عدد بايد بنويسيم و هر عدد را با علامت کاما جدا کنيم.

 

                                                   Coords="10,10,65,65"

  

همچنين براي درست کردن يک لينک به شکل دايره مختصات مرکز آن و اندازه طول شعاع را بايد پيدا کنيم که با توجه به گفته بالا سه عدد بايد نوشته شود و براي چند ضلعي به تعداد هر نقطه دو عدد مينويسيم که ديگر محدوديت ندارد.

 

  ۳- "   "=href که در اين قسمت آدرس صفحه يا سايت مورد نظر را وارد ميکنيم.

 

                             خب سوالي که حالا پيش ميايد،

                      اينست که مختصات اين نقاط را چگونه پيدا کنيم؟

 

بعد از اينکه يک عکس را در صفحه قرار داديم و مراحل تشکيل image map  را انجام داديم يک تگ و يک خصوصيت به اين کدها اضافه ميکنيم و آنچه را که ميخواهيم براحتي بدست مياوريم. ابتدا تگ مخصوص لينک را قبل از<img> قرار ميدهيم تا عکس ما بصورت يک لينک ظاهر شود و سپس خصوصيت ismap را به تگ <img> اضافه ميکنيم و فايل را ذخيره ميکنيم. حالا آنرا باز کرده و همانطور که موس را روي عکس حرکت ميدهيد يک نگاه به نوار وضعيت

statusbar مرورگر در پايين بياندازيد، اعدادي را که مشاهده ميکنيد مختصات نقاط ميباشند.

a href=" # "><img src="image.gif" usemap="#newmap" < ismap
<map name="newmap">
</map>
</a>

 

 

فراموش نکنيد که بعد از پيدا کردن مختصات نقاط، تمام مراحلي را که اضافه کرديد دوباره برداريد.

 

شروع کار با جدول

سلام خدمت دوستان عزیز و آرزوی بهترین لحظه ها برای همه

 

برای ایجاد یک جدول از تگ <table> استفاده می شود و همه تگ های مرتبط با جدول داخل این تگ قرار می گیرند.

همان طور که می دانید این تگ به تنهایی هیچ کاربردی ندارد و فقط برای مشخص کردن محدوده تگ های داخلی و همچنین مشخص کردن ویژگی های کلی جدول به کار می رود.

 

دارای ویژگی های زیر است:

 

• Align: محل قرار گرفتن جدول در صفحه یا قسمتی که در آن قرار دارد(مانند یک خانه از جدولی دیگر) را مشخص می کند و دارای سه مقدار left, middle , right است و بطور پیش فرض مقدار left را داراست.

•        Background

• Bgcolor

• Border: کنترل نمایش حاشیه جدول را به عهده دارد . برای عدم نمایش حاشیه مقدار صفر به آن می دهند که پیش فرض هم همین مقدار است.

• Bordercolor: رنگ کل خطوط حاشیه را تغییر می دهد.

• Borderdarkcolor: اگر رنگ حاشیه بصورت پیش فرض باشد و مقدار border را بیش از صفر تعیین کنیم در حاشیه جدول و خانه های آن، نواحی تیره و روشن مشاهده می شود. این ویژگی رنگ قسمت های تیره را مشخص می کند.

• Borderlightcolor: با این ویژگی رنگ قسمت های روشن حاشیه جدول و خانه های آن تعیین   می شود.

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

• Cellspacing: کنترل مقدار فضای خالی بین خانه های جدول را به عهده دارد.

• Frame: این ویژگی فقط توسط internet explorer پشتیبانی می شود. وظیفه آن مشخص کردن شیوه نمایش حاشیه بیرونی جدول است. مقادیر زیر را می پذیرد:

void	تمام خطوط بیرونی جدول را حذف می کند
above	فقط حاشیه بالایی را نمایش می دهد
below	فقط حاشیه پایینی را نمایش می دهد
hsides	حاشیه های افقی (بالایی و پایینی جدول) را نمایش می دهد
vsides	حاشیه های عمودی (چپ و راست جدول) را نمایش می دهد
lhs	فقط حاشیه سمت چپ جدول را نمایش می دهد
rhs	فقط حاشیه سمت راست جدول را نمایش می دهد
box	تمام حواشی را نمایش می دهد
border	مانند box عمل می کند

 

• Height: ارتفاع جدول را تنظیم می کند.

• Rules : این ویژگی نیز فقط توسط internet explorer پشتیبانی می شود. وظیفه آن مشخص کردن شیوه نمایش مرز خانه های جدول است.مقادیر زیر را می پذیرد:

none	مرز خانه های جدول حذف می شود
all	کل مرزها نمایش داده می شود
rows	مرزهای بین خانه های هر سطر از جدول حذف می شود
cols	مرزهای بین خانه های هر ستون از جدول حذف می شود
groups	??????????????????????????????

• Title: با این ویژگی می توان برای جدول توضیحی نوشت که درمواقعی که ماوس بر روی جدول قرار بگیرد نمایش داده می شود.

• Width: عرض جدول را تنظیم می کند.

امیدوارم این مختصر مفید واقع شود.

در post های آینده به ادامه مطلب خواهم پرداخت و منتظر پیشنهادات و انتقادات سازنده عزیزان هستم.

معرفی چند تا تگ

سلام به همه ی دوستان امیدوارم تا حالا بهتون خوش گذشته باشه و از وقتتون بهترین استفادرو کرده باشید

متن چشمک زن

برای انکه متنی در صفحه ی وب به صورت چشمک زن باشد ان را دربین <BLINK>و<‌BLINK/>قرار دهید. دستور زیر متن مورد نظر را چشمک زن می کند:

<BLINK> THIS IS A BLINKING TEXT</BLINK>

متن متحرک

با استفاده از دستور<MARQUEE>می توان متن متحرکی را ایجاد کرد. این دستور دارای صفات متعددی میباشد از جمله:

1.صفت BEHAVIERکه حرکت متن را کنترل می کند.این  صفت دارای مقادیر زیر است:

             مقدارALTERNATEمشخص می کند که متن در طول مسیر ۱ بار از چپ به راست و ۱ باراز راست به چپ حرکت کند.

                 مقدارSCROLLموجب می شود متن از ۱ سمت شروع به حرکت کند و با رسیدن به انتهای طرف دیگر دوباره از همان سمت شروع به حرکت نماید.

                مقدارSLIDE موجب می شودتا متن در طول مسیر حرکت کند و وقتی که اولین کرکتر ان به طرف دیگر رسید  متوقف می شود.

۲.صفتBG COLORکه رنگ زمینه ی متن متحرک را مشخص می کند.

۳. صفتDIRECTIONمشخص می کند متن از چه جهتی حرکت کند.مقادیر فرضی این صفتLEFT

RIGHT-DOWN-UPمی باشد

۴.صفتHEIGHT -WIDTH

۵.صفتHSPACEمشخص می کند بین لبه ی کادر و محتویات ان در سطح افقی چقدر فاصله باشد.

۶.صفتVSPACE مشخص می کند بین لبه ی کادر و محتویات ان در سطح عمودی چقدر فاصله باشد.

۷.صفت LOOPمشخص می کند که متن چند بار حرکت کند .

۸.صفت SCROLLAMONTمشخص میکند فاصله ی بین هر بار نمایش متحرک چند پیکسل باشد.

۹.صفت SCROLLDELAYمشخص می کند بین هر بار نمایش متحرک چند میلی ثانیه فاصله باشد.

شروع برنامه در سال جدید

سلام به همه دوستان

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

تقریبا اکثر دوستان تو پیامهایی که ارسال کرده بودن از برنامه جدید بحثها پرسیده بودند ولی ضمن جواب دادن به تک تک اون عزیزان، گفتم یک بار دیگه این موضوع رو اینجا مطرح کنم تا اون دسته از دوستانی که هنوز خبر ندارند هم در جریان قرار بگیرند.

اگه یادتون باشه جلسه آخر رو در محلی برگزار کردیم که کیفیت آموزشی به مراتب خیلی بالاتری نسبت به جلسات قبلی داشت. به همین جهت تصمیم گرفتیم هر طوری که هست٬ طوری برنامه بریزیم که ادامه برنامه بحث و تبادل نظر رو در همون محل پیگیری کنیم.

اما چون تمامی بخشهای دانشگاه در تعطیلات نوروز تعطیل هستند برای برنامه جدید و استفاده از اون محل باید  با  مسئولین  مرکز  ۲   و  برنامه اونها  هماهنگ باشیم.  به همین جهت بنده صبر کردم تا روز   سه شنبه  ۱۴ فروردین در اولین فرصت برنامه خودمون رو در اون برنامه بگنجونم و از این به بعد در زمان دلخواه خودمون و با کیفیت بالاتری به ادامه دوره ها بپردازیم. به احتمال زیاد دو جلسه رو بتونیم در روزهای چهارشنبه و پنجشنبه ۱۵ و ۱۶ فروردین برگزار کنیم. پس برای اون روزها آمادگی لازم رو داشته باشید تا به محض اطلاع٬ همه بتونیم شرکت کنیم.

یک مسئله دیگه که بعضی از دوستان زیاد میپرسند و پیگیر میشند اون تمرین و به قول بعضی دوستان پروژه ای بود که گفتم میتونید در ایام تعطیلات با توجه به آموخته های اون ۳ جلسه انجام بدید. تا اونجایی که مطلع هستم به همون اندازه که بعضی اون کارو جدی گرفتن و تلاش زیادی انجام دادن برای انجامش، بعضی دیگه اصلا اهمیتی ندادن. البته من گفتم اون کار بیشتر یک تمرین بود و مسلما هر کس انجام نداده خودش رو برای مباحث سنگین جدید آماده نکرده و ممکنه نتونه خودش رو همسطح بقیه پیش ببره.

با آرزوی موفقیت برای همه

نحوه ذخيره كردن صفحات HTML فارسي

سلام

سالروز شهادت امام حسن عسگري عليه السلام را به همة دوستان تسليت عرض مي كنم.

چندي قبل آقاي حسيني زحمت كشيدند و نحوه فارسي نوشتن در صفحات HTML را در يكي از مطالبشان توضيح دادند. براي اينكه دوستان در موقع استفاده از تگ پيشنهاد شده توسط آقاي حسيني دچار مشكل نشوند، من در اين مطلب به نحوه ذخيره كردن كدهاي HTML در Notepad ويندوزاشاره خواهم كرد.

تگي كه در قسمت  بايد به كار برده شود به شكل زير مي باشد:

 

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

 

همين طور كه مي بينيد ما در قسمت charset در حقيقت Encoding پيش فرض را انتخاب مي كنيم .

ما براي اينكه بتوانيم در صفحات HTML فارسي بنويسيم مي توانيم از Unicode(UTF-8) استفاده كنيم. به اين منظوربايد هنگام ذخيره فايل حتما Encoding ذخيره شدن را UTF-8 انتخاب كنيم. براي اينكار هنگامي كه پنجره مربوط به Save az را باز مي كنيد بعد از وارد كردن نام فايل و نوع فايل بايد Encoding آن را نيز به UTF-8 تغيير دهيد. اين قسمت در شكل زير به صورت كادر قرمز مشخص شده است.

 

 برنامه home site  اينكدينگ UTF-8 را پشتيباني نمي كند. شما مي توانيد ابتدا تگ هاي مورد نيازتان را با اين برنامه بنويسيد و براي وارد كردن متن فارسي از Notepad استفاده كنيد.

 اميدوارم مفيد واقع شده باشد.

ویژگی target در <A>

در ادامه سلسله مطالب ویژگی های تگ  به یک ویژگی پر کاربرد این تگ می پردازم

 

این ویژگی target نام دارد و محل باز شدن صفحه ای را که لینک مورد نظر فراخوانی می کند را مشخص میکند.

 

این ویژگی مقادیر زیر را می پذیرد:

 

•  _blank : وقتی نیاز به باز شدن یک صفحه در یک پنجره جدید از browser داشته باشیم از _blank استفاده میکنیم . این خصوصیت زمانی کاربرد دارد که ما نیاز به در دسترس نکه داشتن صفحه فعلی داریم.

• _Self : وقتی نیاز باشد که صفحه در پنجره جاری (و یا در فریمی که لینک در آن قرار دارد) باز شود از _self استفاده میکنیم

• _parent: وقتی نیاز باشد که صفحه جدید در والد فریم جاری(فریمی که فریم جاری در آن قرار دارد) باز شود از _parent استفاده می کنیم

• _Top: وقتی نیاز به باز شدن صفحه در پنجره جاری (حتی اگر لینک داخل یک فریم قرار گرفته باشد) داشته باشیم از _top استفاده میکنیم

به underline در اول این مقادیر دقت کنید.

شاید اولین عیدی! (ادیتور پیشرفته وب)

سلام

بدون شک یکی از بهترین و از نظر من بهترین ادیتور دستی موجود برای طراحی و برنامه نویسی وب

ادیتور HomeSite هست. من که تمام این سالها از  html  تا  Asp.net  رو با همین ادیتور کار کردم.

(موقع نصب درج سریال رو فراموش نکنید.)

  از اینجا دریافت کنید!

قالببندی متن در HTML

قالببندی متن در HTML

HTML برچسبهای متعددی برای قالببندی متن در نظر گرفته است که در جداول زير کاربرد هر يک ذکر شده است و برای درک بهتر کاربرد هر يک از برچسب ها، مثالهای متعددی آورده شده است.

جدول برچسبهای قالببندی متن

برچسب ابتدايی	کاربرد
<b>	يک متن با حروف پررنگ را ايجاد می کند.
<big>	يک متن با حروف بزرگتراز اندازه پيش فرض را ايجاد می کند.
<em>	يک متن با حروف ايتاليک را ايجاد می کند.
<i>	يک متن با حروف ايتاليک را ايجاد می کند.
<small>	يک متن با حروف کوچکتراز اندازه پيش فرض را ايجاد می کند.
<strong>	يک متن با حروف پررنگ را ايجاد می کند.
<sub>	يک متن زيرنويس را ايجاد می کند.
<sup>	يک متن بالانويس را ايجاد می کند.
<ins>	يک متن زيرخطدار را ايجاد می کند.
<del>	يک متن با خطی بر روی آن را ايجاد می کند.

جدول برچسبهای اطلاعات خروجی رايانه

برچسب ابتدايی	کاربرد
<code>	يک متن که شامل کدهای رايانه ايست را ايجاد می کند.
<kbd>	يک متن که شامل حروف صفحه کليد است را ايجاد می کند.
<samp>	يک متن که شامل مثال هايی ازکدهای رايانه ايست را ايجاد می کند.
<tt>	يک متن که شامل حروف ماشين تحرير است را ايجاد می کند.
<var>	يک متن که شامل متغيرهای رايانه ايست را ايجاد می کند.
<pre>	يک متن با قالببندی از پيش تعيين شده را ايجاد می کند.

 

جدول برچسبهای نقل قول، اختصار، تعريف

برچسب ابتدايی	کاربرد
<abbr>	يک کلمه اختصاری را ايجاد می کند.
<acronym>	يک کلمه متشکل از حروف اول چند کلمه را ايجاد می کند.
<address>	يک عنصر آدرس را ايجاد می کند.
<bdo>	جهت متن را تعيين می کند.
<blockquote>	يک نقل قول طولانی را ايجاد می کند.
<q>	يک نقل قول کوتاه را ايجاد می کند.
<cite>	يک نقل قول را ايجاد می کند.
<dfn>	يک متن توصيفی را ايجاد می کند.

 

مثال زير به شما نشان می دهد که چگونه می توانيد يک متن را در يک فايل HTML قالببندی کنيد.

This text is bold

This text is strong

This text is big

This text is emphasized

This text is italic

This text is small

This text contains_subscript

This text contains^superscript

 

This text is bold

 

This text is strong

 

This text is big

 

This text is emphasized

 

This text is italic

 

This text is small

 

This text contains_subscript

 

This text contains^superscript

 * مثال زير به شما نشان می دهد که چگونه می توانيد يک متن خط خورده و يک متن زير خط دار را در يک فايل HTML   قالببندی کنيد. 

<del>This text is deleted.del>

This text is inserted.

 

This text is deleted

 

This text is inserted

مثال زير نشان می دهد که برچسبهای مختلف خروجی رايانه چگونه نمايش داده می شوند.

Computer code

Keyboard input

Teletype text

Sample text

Computer variable

 

Computer code

 

Keyboard input

 

Teletype text

 

Sample text

 

Computer variable

مثال زير نشان می دهد که چگونه می توان فاصله ها و شکست خطوط را با برچسب > از قبل تنظيم کرد.

This is
preformatted text.
It preserves both spaces
and line breaks.
for i = 1 to 10
print i
next i

 

This is

preformatted text.

It preserves           both spaces

and line breaks.

for i = 1 to 10

            print i

next i

*از دو برچسب استفاده شده در مثال زير هنگامی استفاده می شود که بخواهيم کلمه ای را به صورت اختصاری در متن استفاده کنيم؛ همچنين کاربر اين امکان را داشته باشد که با بردن ماوس بر روی کلمه اختصاری و نگه داشتن ماوس بر روی آن برای چند لحظه، کلمات کاملی را کلمه اختصاری از آنها نشان

گرفته است را در يک کادر کوچک زرد رنگ ببيند.

UN

WWW

 

UN

WWW_{World Wide Web}

* مثال زير نشان می دهد که آدرس را در يک فايل HTML چگونه بنويسيم.

M Nikfazan

BOX 16455-53367

Tehran

Iran

 

M Nikfazan

BOX 16455-53367

Tehran

Iran

• مثال زير طريقه استفاده از برچسب > را نشان می دهد. همان گونه که مشاهده می کنيد اين برچسب می تواند جهت نمايش متن را تغيير دهد مثلا حروف از راست به چپ نوشته شوند يا بر عکس.

Here is some Hebrew text

 

txet werbeH  emos si ereH

 توسط برچسب <blockquote>مرورگر يک خط خالی قبل و بعد از نقل قول قرار می دهد وهمچنين حاشيه

  کار خاصی روی متن انجام نمی دهد و فقط برای شما به عنوان سازنده فايلHTML ای مشخص می کند که عبارت داخل آن يک نقل قول است. 

Here comes a long quotation:

This is a long quotation. This is a

long quotation. This is a long

quotation.This is a long quotation.

Here comes a short quotation:

This is a short quotation

 

Here comes a long quotation:

 

 

This is a long quotation. This is a

long quotation. This is a long

quotation.This is a long quotation

 

Here comes a short quotation: This is a short quotation

• مثال زير جمله ای از کتابی خاص و يک جمله تعريفی را به نمايش می گذارد.

This is a citation

This is a definition term

 

This is a citation

This is a definition term

همانطور که در مثالهای فوق می بينيد خروجی بعضی از بر چسبها کاملا مثل هم است و بعضی کار خاصی را انجام نمی دهند. در اين موارد گاهی هدف از استفاده اين برچسبها تنها مشخص کردن نوع متن برای نويسنده فايل HTML می باشد. به هر حال استفاده از قالبندی های فوق به سليقه نويسنده فايلHTML  است و ضرورتی ندارد که حتما از موارد فوق دقيقا بر اساس کاربرد استفاده شود.

....Have a nive time....

ويژگي هاي تگ لينك

با سلام و عرض ادب خدمت دوستان

امیدوارم تعطیلات نوروز تا حالا به همه خوش گذشته باشه!

در پست قبلي يك سوالي مطرح كرده بودم كه اين بود: آيا مي شود لينكي را به anchor خاصي در يك صفحه ديگر درست كرد؟

در جواب بايد بگويم بله. براي اينكار تگ a را به صورت زير مي نويسيم:

                                             <A/> ليبل<"anchor name#آدرس صفحه مورد نظر"= A href>

توجه كنيد كه بين آدرس و علامت # هيچ فاصله اي وجود ندارد.

حال به مطلب جديدم مي پردازم. امروز مي خواهم در ادامه مطلب لينك به چند ويژگي ديگر تگ A بپردازم.

۱) ساختن كليد ميانبر براي لينك ها

براي اينكار مراحل زير انجام دهيد:

• ويژگي "=acceskey را در تگ لينك مورد نظر تايپ كنيد. مقدار اين ويژگي كليد ميانبر اين لينك را مشخص مي كند.
• حرف يا عدد مورد نظرتون كه مي خواهيد كليد ميانبرتون باشد را بنويسيد.
• كوتيشن آخر اين خصيصه را تايپ كنيد.

براي مثال اگر در لينكي، مقصدي به نام page.htm داشته باشيم و بخواهيم اين لينك را با كليد ميانبر g تعريف كنيم بايد تگ A را اينچنين بنويسيم:

                                                        <A/> ليبل لينك <"A href ="page.htm" acceskey="g>

نكات:

• در صورت تمايل اطلاعاتي به لينك اضافه كنيد تا كاربر بداند اين لينك كليد ميانبر دارد. 
• كاربر مي تواند با فشردن كليد هاي Alt+ g به لينك دسترسي پيدا كند.
• ممكن است كليد ميانبري كه شما تعريف مي كنيد يكي از كليد هاي ميانبر مرورگر باشد. مثل Alt+F . توجه داشته باشيد كه وقتي اين حالت پيش آيد مرورگر كليد ميانبر شما را به رسميت مي شناسد.

۲)  Title

به كاربردن اين صفت در تگ لينك مورد نظرتون باعث مي شود تا وقتي موس در صفحه مرورگر روي ليبل همان لينك قرار گرفت، توضيحاتي را نمايش دهد.اين توضيحات همان مقداري است كه به صفت Title مي دهيد. اين صفت در لينك ها، به خاطر نمايش دادن توضيحات مختصر، بسيار كاربرد دارد.

                                                     <A/>ليبل لينك <"A href ="URL" title="exploration link> 

۳) Tabindex

بيشتر مرورگرها به كاربر اين امكان را مي دهد كه با استفاده از Tab، لينك هاي درون يك صفحه را ترتيب فعال كنند. اما شما به عنوان طراح صفحه مي توانيد ترتيب فعال شدن لينك ها را به طور دلخواه تنظيم كنيد.

براي تنظيم كردن ترتيب فعال شدن لينك ها از ويژگي "tabindex="n استفاده مي كنيم كه n عددي است كه ترتيب فعال شدن را نشان مي دهد. به طور مثال اگر 3 لينك به نام هاي link1,  link2, link3 داشته باشيم و بخواهيم با tab زدن اولين لينكي كه فعال مي شه link 3، دومين لينكي كه فعال مي شه link1 و سومين لينكي كه فعال مي شه  link2 باشد، تگ هاي آن را به صورت زير تعريف مي كنيم:  

     <A href="URL" Tabindex="2"> link1 </A>

     <A href="URL" Tabindex="3"> link2 </A>

     <A href="URL" Tabindex="1"> link3 </A>

• براي فعال كردن يك لينك، كاربر بايد كليد TAB را آنقدر فشار دهد تا لينك مورد نظر او انتخاب شود. سپس Enter را فشار دهد
• اگر ويژگي tabindex يك لينك را عدد منفي قرار دهيد، در حقيقت آن لينك را به طور كلي از سلسله آيتم ها خارج مي كنيد.
• ترتيب فعال شدن لينك ها در حالت پيش فرض به ترتيب قرار گرفتن آن ها در كد HTMl بستگي دارد.

براي تغيير رنگ پيوند ها مي توانيد به مطلب آخر آقاي اسكويي مراجعه كنيد. در همين جا ، جا دارد از آقاي اسكويي به خاطر كامل كردن بحثم تشكر كنم.

خصوصیات تگ body

به  نام   خدای   بهار   آفرین         رب   و  گردش  روزگار  آفرین

همان کاو بشر آفرید از  تراب           به  او  و به  خلقش هزار آفرین

فرا رسیدن نوروز رو(هر چند قدری دیر) به همه تبریک میگم

امروز میخوام خصوصیات تگ body رو بگم.

این تگ یکی از 4 تگ اصلی HTML است که بدنه اصلی و خصوصیات آن را شامل میشود

تگ body چندین attribute دارد که در زیر اشاره میشود:

 

Background="address": این خصوصیت تصویری را در پس زمینه صفحه قرار میدهد

Bgcolor="color": این خصوصیت پس زمینه را رنگ میکند

Text="color": این خصوصیت رنگ متن صفحه را مشخص میکند(بصورت پیش فرض مشکی است)

 

که هر سه این خصوصیات در کلاس گفته شد ولی چند خصوصیت دیگر هم وجود داره که به اونها اشاره میکنم:

 

Link="color": این خصوصیت رنک لینک های ساده را مشخص میکند (بصورت پیش فرض آبی است)

Vlink="color": این خصوصیت رنک لینک های مشاهده شده را مشخص میکند (بصورت پیش فرض بنفش است)

Alink="color": این خصوصیت رنک لینک هایی که به هر وسیله ای فعال بشوند(مثل راست کلیک) را مشخص میکند (پیش فرض ندارد)

 

یادتون باشه که هر کدوم از این خصوصیات برای همه اجزای صفحه به کار برده میشه مگر اینکه توسط خصوصیت دیگری تغییر پیدا کنه

 امیدوارم که این مطلب ساده ,مفید واقع بشه

متا تگ ها

متا تگ ها از مهمترین تگ ها ی صفحات html هستند که در داخل قسمت <HEAD>  جای گرفته و بیشتر

اطلاعات شناسنامه ای صفحه را بيان کرده  و گاهی با کمک آنها فرامينی به مرورگر يا browser داده 

ميشود.تعدادی از پرمصرف ترين اين گروه به شرح زير است:

 "keywords" - assign a set of keywords to the document

روبوتهای موتورهای جستجو يا search engine  از روی اين کلمات کليدي سايتتان را index می کنند.

"description" - specify a summarized description of the document

شرحی کوتاه و خلاصه از صفحه و محتوايش

"Content-Type" - specify character encoding information

اين تگ مشخص کننده نحوه رمزگزاری صفحه است مثلاّ charset=utf-8

"refresh" - redirect visitors to another page or reload the current document

با کمک اين تگ ميتوانيد کاربر را به صفحه ديگري هدايت کنيد ويا صفحه را مجدداْ به روز درآوريد (refresh)

"robots" - instruct Web robots how to index the current document

اين تگ نحوه برحورد يک روبوت را با صفحه مشخص ميکند.

به عنوان مثال اگر نگاهی به کد اچتمل اين صفحه بيندازيد، کاربرد سه نوع متا تگ مختلف را خواهيد ديد:

<head>
<title>Mezora</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="description" content="QomIT Is a Persian Site">
<meta name="keywords" content="آموزش html ,اچتمل">
</head>

لطفا اشکالات مطلب مزبور را حتما در نظرات ارائه کنید.

لينك داخلي

سلام

حتما تا حالا به اين موضوع برخورد كرده ايد كه يك مطلب طولاني با چند سرفصل داريد و مي خواهيد كاربر را با كليك كردن روي هر سرفصل به متن آن سرفصل هدايت كنيد.

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

در اين پست مي خواهم درباره چگونگي لينك متن يا تصويري به مكان خاصي از همان صفحه كه به اين كار اصطلاحا anchor مي گويند مطلب بنويسم.

يك از ويژگي هاي تگA  به نام name وظيفه anchor كردن را داراست. حال بايد فهميد anchor چيست و چگونه ساخته مي شود.

anchor چيست؟

پرش به مكان هاي خاصي از صفحات وب را anchor  گويند كه اين مكان هاي خاص را وب نويس مشخص مي كند. وب نويس با مشخص كردن اين anchor ها مي تواند متن يا تصوير خود را به اين مكان هاي خاص لينك كند.

حال يك anchor چگونه ساخته مي شود؟

براي ساختن يك anchor  مراحل زير را بايد انجام بدهيم:

 ابتدا مكان نما را در محل مورد نظرتون قرار دهيد.

 اين تگ را تايپ كنيد :                                               <"A name =" anchor name >

توجه داشته باشي كه anchor name  نامي است كه به آن محل اختصاص مي دهيد و دلخواه می باشد.

 متن يا تصويري كه مي خواهيد به آن اشاره كنيد، در اين محل قرار دهيد.

 براي كامل كردن تعريف اين anchor، علامت <A/>را تايپ كنيد.

با انجام اين مراحل حالا شما يك مكان خاصي را anchor كرديد. در ادامه مي توانيم لينكي را درست كنيم كه كاربر با كليك روي آن به اين مكان خاص هدايت شود.

لينك كردن به anchor ها همانند لينك كردن به فايل ها و ... كه در كلاس توضيح داده شد است فقط يك تفاوت دارد و آن اين است كه بعد از عبارت "=HREF بايد anchor name را با علامت # مشخص كنيم. این علامت به مرورگر می فهماند که باید درون همین صفحه به دنبال anchor name بگردد . اين تگ اين چنين نوشته مي شود:

                                                <A/>متن يا تصوير مورد نظر <"A HREF="#anchor name>

فقط مي مونه يك سوال كه براي خودم هم سواله!

آيا مي شود لينكي را درست بكنيم كه اين لينك كاربر را به يك anchor در صفحه ديگر وب هدايت بكنه؟

تمرین !

سلام

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

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

<table >

          <tr >

                    <td ></td>

                    <td ></td>

                     .

                     .

           </tr>

</table>

  فایل تصویری جدول را از اینجا دریافت کنید!

رابطه اينترنت، وب و HTML

با سلام خدمت همه دوستان

فرارسيدن سال نو را به همه دوستان تبريك مي گويم و اميدوارم سال جديد، سالي پربار برايتان باشد.

در اين پست مي خواهم درباره رابطه اينترنت، وب و HTML  مطالبي را بنويسم.

حتما همه مي دانند كه اينترنت چيه؟ اگه بخوام تعريفي از آن داشته باشم مي توانم بگويم اينترنت محموعه از كامپيوتر هاست كه به يكديگر متصل مي شوند. يعني هنگامي كه ما به اينترنت وصل مي شويم، ما و كامپيوترمان به عنوان جزئي از اينترنت محسوب مي شود و با بقيه كامپيوتر هايي كه در آن زمان به شبكه متصل هستند مرتبط هستيم.

world wide web يكي از پروتكل هاي اينترنت است. يعني بخشي از اينترنت به حساب مي آيد كه اين بخش جذاب ترين و پركاربردترين بخش اينترنت است. اين شبكه داراي ميليون ها سند مي باشد كه اين اسناد با فرمت HTML ساخته شده اند.

HTML يا همان Hyper Text Markup Language ، خود داراي دو ويژگي است و به خاطر اين دو ويژگي در دنيا مقبول واقع شده.

۱) ابر متن (Hyper Text) بودن آن

2) عموميت داشتن آن

ويژگي ابر متن بودن HTML به اين معناست كه امكان افزودن لينك به صفحات وب را فراهم مي كند. كار لينك اين است كه بيننده ها را به يك صفحه ديگر و يا به طور كلي به هر محل ديگر هدايت مي كنند.

همچنين چون فايل هاي HTML به صورت فايل هاي متني ذخيره مي شوند، هر كاميوتري مي تواند محتويات آن را بخواند. در حقيقت فرقي نداره كه بيننده از چه سيستم عاملي استفاده مي كند . اين مطلب عموميت HTML را بيان مي كند.

موفق باشيد

چند توصیه !

با سلام به حضور همه دوستان

بعد از مدتی که از فعالیت وبلاگ میگذره لازم دونستم چند تا توصیه و البته تذکر رو اینبار تو یه نوشته عمومی اعلام کنم. این توصیه ها بیشتر مربوط به آداب ایجاد بحث جدید هست که امیدوارم همه دوستان با رعایت اونها به ارتقاء کیفیت وبلاگ کمک کنند.

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

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

 بعضی از دوستان هنوز با ادیتور وبلاگ بطور کامل آشنایی ندارند از اون دسته خواهشمندم ضمن یه مقدار کار بیشتر تا میتونن پیامهای ارسالی رو به شیوه ای مرتب و خوانا درج کنند. بدون شک یکی از جذابیتهای مطالب و کلا ظاهر یک وبلاگ همین ترتیب و نظم و یکدست بودن دست نوشته هاست.

 بعضی از دوستان به تازگی اقدام به درج عکس در نوشته هاشون میکنند. در کل درج عکس برای مطالب خیلی خوب و جالبه و جذابیت مطلب رو بیشتر میکنه. ولی با رعایت چند نکته! یکی اینکه عکسها مرتبط با مطلب باشه. و یکی دیگه اینکه حجم عکسها بالا نباشه. چون اگر حجم عکسها بطور معمول بیشتر از 10 یا 15 کیلو بایت باشه تاثیر محسوسی روی بالا اومدن صفحه وبلاگ میذاره. خودتون میدونید که اگه این اتفاق توسط همه رخ بده چی میشه! پس در مورد انتخاب عکس و درج اون به شدت مراقب رعایت این 2 نکته باشید.

Happy New Year