close
تبلیغات در اینترنت

ابزار رایگان وبلاگ

در 90 دقیقه اولین صفحه وب خود را بسازید (آموزش HTML)

عضویت سریع


قوانین سایت

کد امنیتی :

خبرنامه

برای دریافت مطالب جدید عضو خبرنامه شوید

نظر سنجی

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

نویسندگان سایت

امکانات

لینک دوستان

درباره ما


تبلیغات



بازدید : 204 mojtaba
جمعه 14 مهر 1391 - 6:24

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

مقدمه

در این مقاله مفاهیم اولیه ساخت صفحات وب را با زبان HTML فرا خواهیم گرفت. HTML یک زبان منطقی نیست بلکه یک زبان نشانه گذاری است که با استفاده از تگ ها ( TAG یا نشانه ) به مرورگر وب مانند Internet Explorer ( یا Firefox یا Google Chrome ) نحوه نمایش متن و فرا متن را بیان می کند. شکل کلی نوشتن یک تگ به صورت زیر است: 

 

محتویات


مثال: 

سلام


برای نوشتن دستورات زبان HTML و همچنین ویرایش آنها از ویرایشگر متنی Notepad می توان استفاده کرد. برای دسترسی به برنامه Notepad در ویندوز به آدرس زیر مراجعه کنید: 

Start Menu/All programs/Accessories/Notepad
					یا
					Start Menu/run/"Type Notepad and press Enter"
					یا
					"Press Windows+R"/run/"Type Notepad and press Enter"
 


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

نکته: برای درک بهتر مفاهیم این مقاله توصیه می شود هر مثال را در Notepad نوشته و اجرای آن را مشاهده نمایید. پس از نوشتن مثال از منوی file این برنامه گزینه ی Save as را انتخاب کرده و در مسیر مورد نظرتان فایل را با پسوند htm یا html ذخیره کنید. همچنین توجه داشته باشید که جملات فارسی در Notepad پس از ذخیره به صورت علامت سوال نمایش داده می شوند، به این دلیل که در صفحه ذخیره سازی گزینه Encoding به صورت پیش فرض در حالت ANSI قرار گرفته است و از کاراکترهای زبان فارسی پشتیبانی نمی کند. برای جلوگیری از این امر باید Encoding را در حالت UTF-8 قرار دهید و سپس فایل را ذخیره کنید. 

پس از ساخت فایلی مثل web1.html کافی است بر روی فایل ساخته شده دوبار کلیک کنید تا برنامه با مرورگر پیش فرض کامپیوتر شما اجرا شود. 

HTML

زبان HTML سرنام عبارت Hyper Text Markup Language می باشد که به منظور توصیف یک صفحه وب کاربرد دارد. HTML از تعداد زیادی تگ تشکیل شده است که هر کدام دارای ویژگی های منحصربه فرد خود می باشند، تمامی تگ ها بین دو کاراکتر < و > قرار دارند و مهمترین تگ که در برگیرنده تمامی تگ ها است، تگ است. این تگ در ابتدای صفحه باز شده و در انتهای صفحه نیز بسته می شود. تگ بسته به صورت می باشد. باید به این امر نیز توجه داشت که زبان HTML به حروف کوچک یا بزرگ حساس نمی باشد. اما برای تمایز بین تگ ها و متون بهتر است تگ ها را با حروف بزرگ تایپ کنید. هر صفحه HTML شامل دو قسمت اصلی سرصفحه و بدنه است. سرصفحه با تگ آغاز شده و با خاتمه می یابد. معمول ترین تگی که در تگ HEAD استفاده می شود تگاست که عنوان صفحه در آن نمایش داده می شود. همچنین بدنه صفحه نیز با تگآغاز و با تگخاتمه می یابد. مانند مثال زیر:

 
   
    به اولین صفحه وب من خوش آمدید 
   
   
    سلام بر دنیا! 
   


نکته: تگ ها به دو صورت باپایان و بی پایان در HTML به کار برده می شود، می توان از تگ باپایان تگ HEAD را نام برد که با باز شده و با بسته می شود، و همچنین می توان از تگ بسته به
اشاره نمود، هنگامی که در جمله استفاده می شود دیگر نیازی به بستن آن نیست. 
توضیح برنامه: در این برنامه ابتدا تگ های اولیه را باز کرده و بعد از تگ TITLE عنوان مورد نظر را نوشته و سپس تگ ها را بسته و ذخیره می نمایید. 
تمرین 1- برنامه ای بنویسید که عنوان آن کلمه دنیا در دست من است باشد.
نکته: توجه داشته باشید یک تگ می تواند صفر، یک و یا بیشتر ویژگی ( Attribute ) داشته باشد، این ویژگی ها به صورت زیر به تگ افزوده می شوند. 


ترتیب قرار گرفتن ویژگی ها در اجرای آن ها تاثیری ندارد.

پاراگراف ( Paragraph )

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

استفاده می کنیم که با تگ

 

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

صفت ALIGN است که برای تراز کردن متن از آن استفاده می شود، مانند مثال زیر:

 
   
    

 

این صفحه اولین صفحه وب من است

 

    

 

آموزش گام به گام طراحی صفحات وب 
   

این صفحه اولین صفحه وب من است

آموزش گام به گام طراحی صفحات وب


توضیح برنامه: در این برنامه مشاهده می کنید که دو پاراگراف داریم که هر کدام دارای مقدار ALIGN متفاوتی می باشند که در اجرای آن پاراگرف اول چپ چین و پاراگراف دوم به صورت وسط چپن است. 
مقادیر ALIGN می تواند هر یک از حالت زیر باشد:
Left: چپ چین
right: راست چین 
center: وسط چین
Justify: تراز از چپ و راست 

نکته: مرورگرها به صورت پیش فرض محتویات فایل HTML را چپ چین در نظر می گیرند، شما با صفت ALIGN می توانید جهت پیش فرض را تغییر دهید. 
تمرین 2- برنامه ای بنویسید که شامل دو پاراگراف باشد که پاراگراف اول وسط چین و پاراگراف دوم به صورت تراز از چپ و راست باشد. 

ایجاد یک سطر جدید ( Break Line )

معمولا در هنگام تایپ از فاصله و Enter به منظور رفتن به خط بعد استفاده می شود اما هنگام مشاهده در مرورگر، زبان HTML این فاصله ها و enter را نادیده گرفته و تمامی متن در یک سطر نمایش داده می شود. 


  
    این کلمات 
    در یک خط
    نمایش داده می شوند
  

این کلمات در یک خط نمایش داده می شوند


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

استفاده می کنیم که با تگ
 
بسته می شود. می توان به جای استفاده از تگ
 از عبارت ;nbsp& ( & خوانده می شود Ampersand ) نیز استفاده نمود. به هر تعداد فاصله که نیاز است از این عبارت استفاده می شود. همانند مثال زیر: 

 
   
     www.Firefars.com 
        :آدرس ایمیل شرکت امیدرسانه پاسارگاد 
    

 

       شرکت امیدرسانه       پارسارگاد  
    

   شرکت امیدرسانه       پارسارگاد    

 
   

 

www.Firefars.com :آدرس ایمیل شرکت امیدرسانه پاسارگاد
   شرکت امیدرسانه   پارسارگاد
شرکت امیدرسانه پارسارگاد


توضیح برنامه: در این برنامه پس از استفاده از تگ های مربوطه مشاهده می شود که متن ها به همان صورت نوشته شده نمایش داده می شود. اما تگ P فاصله ها را نادیده گرفته و تمامی متن را در کنار هم و تنها با یک فاصله نمایش می دهد. 
تمرین 3- برنامه ای بنویسید که بین دو کلمه ی امیدرسانه و پاسارگاد سه فاصله باشد،و قبل از کلمه ی فایرفارس دو فاصله باشد.
نکته: می توان از تگ

بدون استفاده از تگ

جدول ایجاد نمود( در ادامه با این تگ آشنا خواهید شد. )، تنها کافیست متن را با همان فواصل مورد نظر در کد برنامه( Node pad ) تایپ نمود، همانند مثال زیر:

 
   
    

 

 
      نام    نام خانوادگی     سن 
      محمد           نجفی      21 
      کامران         رفعتی      26     
     
   

					نام    نام خانوادگی     سن 
					محمد         جفی      21        
					کامران        رفعتی      26   
					


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

ایجاد سرتیترها ( Head )

همان طور که می دانیم سرتیترها در ابتدای هر متن به صورت درشت (bold) نمایش داده می شود و کاربر می تواند با مشاهده ی تیترها به مقصد مورد نظر خود سریعتر دست یابد. بدین منظور در زبان HTML برای نوشتن تیترها از تگاستفاده می شود، که دارای 6 سطح می باشد ( H1,H2,H3,H4,H5,H6 ) . تگ

بزرگترین فونت را دارا می باشد و کوچکترین فونت آن مربوط به تگ

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

 
   
      

 

خوش آمدید  
      

 

 خوش آمدید  
      

 

 خوش آمدید  
      

 

 خوش آمدید  
      

 

 خوش آمدید  
      

 

 خوش آمدید  
   

خوش آمدید

خوش آمدید

خوش آمدید

خوش آمدید

خوش آمدید
خوش آمدید


نکته1- محتوای تگ های سرتیتر، به ترتیب از شماره کوچک به بزرگ برای موتورهای جستجو ( مانند گوگل ) بیشترین ارزش را دارد. به عنوان مثال آنچه در تگ 

می آید، توسط ربات های موتورهای جستجو به عنوان یک مطلب با ارزش در نظر گرفته می شود. 
توجه داشته باشید با ویژگی ALIGN نیز می توانید جهت نمایش متن را در این تگ تغییر دهید.
تمرین 5- . برنامه ای بنویسید که 6 سرتیتر داشته باشد، H1, H3 و H5 آن به صورت وسط چین و H2 آن به صورت چپ چین باشد و بقیه به صورت راست چین باشد؟

توضیحات ( Comment )

برنامه نویسان برای درج توضیحات یا نکاتی که تمایل ندارند در خروجی برنامه ( مرورگر ) نمایش داده شود، اصطلاحا آن را به شکل توضیحات می نویسند. از این رو در HTML توضیحات را بین قرار می دهیم. 

 
   
       
    

 

 
      نام    نام خانوادگی     سن 
      محمد           نجفی      21 
      کامران         رفعتی      26     
     
   

					نام    نام خانوادگی     سن 
					محمد         جفی      21        
					کامران        رفعتی      26   
					
ا


توصیحات: هنگام اجرای برنامه در مرورگر جمله ی ( این جدول مشخصات است ) نمایش داده نمی شود اما در کد برنامه مشاهده می شود. 

درج کاراکتر

برای اینکه در صفحه ی وب خود کاراکترهای خاصی را درج نماییم، می توان کد اسکی (Ascii) آن را نوشت به این صورت که ابتدا ;?#& میگذاریم و به جای ؟ کد اسکی کاراکتر مورد نظر را می نویسیم. مثلا علامت copy write دارای کد اسکی 169 می باشد که جای ؟ جایگزین می شود. روش دیگر نمایش کاراکتر های خاص در زبان HTML، استفاده از کد HTML آن ها می باشد. لیست این کد ها را می توانید درجدول زیر مشاهده فرمایید. 

نامHTML کدنتیجه
Non-breaking space   [ فاصله خالی یا Space]
Less-than < <
Greater-than > >
Ampersand & &
Copyright © ©
Trademark ® ®
Cent ¢ ¢
Degree sign ° °
double-less than « «
Micron µ µ
Midline dot ·
Negation, continuation line ¬ ¬
Paragraph
Plus/Minus ± ±
British Pound £ £
double greater than » »
Section §
Yen ¥ ¥



مانند مثال زیر:

 
   
     

>&#169این صفحه اولین صفحه وب من است

 

     

>&copyبرای آموزش به سایت فایرفارس رفتم

 
   

 

©این صفحه اولین صفحه وب من است

©برای آموزش به سایت فایرفارس رفتم


سبک فونت ( Font Style )

برای تعیین سبک فونت در زبان HTML، تگ های خاصی در نظر گرفته شده است که شامل BOLD, ITALIC, UNDERLINE, STRIKOUT می باشد. 
معمولا برای متمایز کردن بخشی از متن با سایر بخش ها از این تگ ها استفاده می شود. شیوه کار به این صورت است که: 
BOLD ( بزرگ نمایی متن ): متن باید بین و قرار گیرد. 
ITALIC ( نمایش متن مورب ): متن باید بین و قرار گیرد. 
UNDERLINE ( نمایش متن زیر خط دار ): متن باید بین و قرار گیرد. 
STRIKEOUT ( نمایش متن خط خورده ): متن باید بین و قرار گیرد. 

همانند مثال زیر: 

 
   
    نمایش متن به ضخیم 
    نمایش متن مورب 
    نمایش متن زیرخط دار 
    نمایش متن خط خورده 
   

نمایش متن به ضخیم
نمایش متن مورب 
نمایش متن زیرخط دار 
نمایش متن خط خورده


توضیح برنامه: در این برنامه خطوط نمایش داده شده به ترتیب، ضخیم، مورب، زیر خط دار و خط خورده می باشند. 
تمرین 7- برنامه ای بنویسید که شامل 3 خط باشد که خط اول و دوم آن مورب و یک خط آن متن خط خورده باشد. 

 

زیر نویس - بالا نویس کردن متن ( Sub script, Super script )

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

 
   
    

این یک متنبالا نویس است

 

    

این یک متنزیر نویس است


   

 

این یک متنبالا نویس است

این یک متنزیر نویس است


توضیح برنامه: همانگونه که می بینید و در تگ

قرار گرفته شده اند. در مثال بالا پاراگراف اول، متن را به صورت بالا نویس و پاراگراف دوم، متن به صورت زیر نویس نمایش می دهد. 
تمرین 8- برنامه ای بنویسید که سه سطر رانمایش دهد. کلمات اول این سطرها یه صورت بالانویس و کلمات آخر آن ها پایین نویس باشند. 

تغییر نوع فونت ( Font Type )

برای تغییر فونت متن در HTML از تگ استفاده می شود. برای این منظور ویژگی FACE را برابر با نام فونت مورد نظرمان قرار داده و با تگ به دستور خاتمه می دهیم. همانند مثال زیر:

 
   
    

 Arialمتن با فونت

 

    

 tahomaمتن با فونت


   

 

Arialمتن با فونت

tahomaمتن با فونت


توضیح برنامه: همانند مثال قبل این تگ را نیز در تگ P استفاده کردیم که پاراگراف اول متن با فونت Arial و پاراگراف دوم متن با فونت Tahoma نمایش داده می شود. 
تمرین 9- برنامه ای بنویسید که شامل سه پاراگراف باشد، پاراگراف اول با فونت zar و پاراگراف دوم با فونت serif باشد. 

اندازه ی فونت ( Font Size )

اندازه ی فونت یکی از موارد مهم در نمایش متن است. از این رو با توجه به نوع متن، برای خوانایی بهتر آن اندازه ها را تنظیم می کنیم. برای تغییر اندازه ی یک پاراگراف از تگ FONT، ویژگی SIZE آن را تغییر می دهیم. رنج این تغییرات اعداد 1 تا 7 است که عدد 1 نشان دهنده ی کوچکترین سایز و عدد 7 نماد بزرگترین سایز می باشد. همانند مثال :

 


 
   
    

پاراگراف با فونت 3


   

 

پاراگراف با فونت 3


توضیح برنامه: در این برنامه پاراگراف را به اندازه مورد نظرمان تعیین کردیم که مطالب آن با فونت 3 نمایش داده می شوند . 
تمرین 10- دو برنامه بنویسید که در برنامه اول فونت 6 برای تمامی متون در نظر گرفته شود و در برنامه ی دوم دارای دو پاراگراف باشد، پاراگراف اول با فونت 5 و پاراگراف دوم با فونت 2نمایش داده شوند. 

رنگ فونت ( Font Color )

رنگ متن نیز همچون عواملی دیگر در خوانایی یک مقاله نقش به سزایی دارد. انتخاب رنگ مناسب باعث جذابیت بیشتر وب سایت می شود. در زبان HTML برای تغییر رنگ متن از دو روش می توان استفاده کرد:
روش اول:  اگر بخواهیم رنگ کل متن را تغییر دهیم در تگاز ویژگی TEXT استفاده می کنیم. 
روش دوم: اگر بخواهیم رنگ قسمتی از متن را تغییر دهیم در تگ از ویژگی COLOR استفاده می کنیم. 

البته به این نکته توجه داشته باشید که معادل هگزادسیمال ( Hexadecimal ) رنگ ها نوشته می شود. 
نکته: هگزادسیمال یک رنگ، معادل شانزده بیتی آن است. شکل استاندارد این مدل نمایش رنگ، #RGB ،می باشد که به ترتیب R بیان کننده ی رنگ قرمزRED) ، G) بیان کننده ی رنگ سبز (GREEN) و B بیان کننده ی رنگ آبی (BLUE) است. به جای هر یک از این حروف یک عدد دو رقمی از 0 تا F می نشیند. در جدول زیر می توانید نام شانزده رنگ اصلی و معادل هگزادسیمال آنها را مشاهده کنید.

مقدار هگزادسیمالنام رنگمقدار هگزادسیمالنام رنگ
#00FFFF Aqua #000000 Black
#0000FF Blue #FF00FF Fuchsia
#808080 Gray #008000 Green
#00FF00 Lime #800000 Maroon
#000080 Navy #808000 Olive
#800080 Purple #FF0000 red
#c0c0c0 Silver #008080 Teal
#FFFFFF White #FFFF00 Yellow



  
    

متن با رنگ قرمز


     دیگر متون به رنگ پیش فرض آبی است
   

 

متن با رنگ قرمز

دیگر متون به رنگ پیش فرض آبی است


توضیح برنامه: در برنامه فوق رنگ تمامی متنون آبی می باشد اما متن قرار گرفته شده در

با توجه با تغییرات داده شده، به صورت قرمز نمایش داده می شود. (تنظیمات هر تگ نسبت به تنظیمات عمومی، اولویت دارد. ) 
تمرین 11-برنامه ای بنویسید که دارای 2 پاراگراف باشد. رنگ متن به صورت پیش فرض سبز بوده ولی پاراگراف اول، قرمز نمایش داده شود. (برای پاراگراف اول از معادل هگزا دسیمال آن استفاده کنید.) 

نکته: توجه داشته باشید، رنگ های تند مانند قرمز یا آبی پر رنگ یا رنگ های کدر مانند سیاه برای پس زمینه وب سایت مناسب نمی باشند. این رنگ ها به سرعت چشم انسان را خسته می کنند. 

تعیین رنگ پس زمینه صفحه ( Back Ground Color )

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

 
  TEXT="WHITE" BGCOLOR="BLUE"> 
    تمامی متن سفید و پس زمینه به رنگ آبی است 
   

تمامی متن سفید و پس زمینه به رنگ آبی است


توضیح برنامه: در این برنامه صفحه به رنگ آبی و متن ها به رنگ سفید نمایش داده می شود. 
تمرین 12- برنامه ای بنویسید که در آن رنگ پس زمینه ی صفحه قرمز و متن آن به رنگ سیاه نمایش داده شود. 

تنظیم اندازه حاشیه صفحه ( Margin )

با تنظیم حاشیه صفحات می توانید فاصله متن را از چپ و راست، بالا و پایین تنظیم نموده و جلوه ی بهتری به صفحه بدهید. معمولا در مرورگرها مقدار پیش فرض 10 پیکسل می باشد. برای تنظیم حاشیه در تگاز ویژگی های زیر استفاده می شود:
TOPMARGIN: فاصله از بالای صفحه 
BOTTOMMARGIN: فاصله از پایین صفحه
RIGHTMARGIN: فاصله صفحه از راست
LEFTMARGIN: فاصله صفحه از چپ
همانند مثال زیر:

 
  LEFTMARGIN="80" RIGHTMARGIN="80"> 
       تنظیم این صفحه از چپ و راست 80 پیکسل است 
   

تنظیم صفحه از چپ و راست 80 پیکسل است


توضیح برنامه: در برنامه ی بالا فاصله کلیه متون از چپ و راست صفحه 80 پیکسل می باشد. 
تمرین 13- برنامه ای بنویسید که در آن تنظیم صفحه از پایین و بالا 90 پیکسل و از چپ و راست نیز 70 پیکسل باشد. 

لیست مرتب ( Ordered Lists )

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

    وقرار می دهیم و هر عنصر بین تگ
  1. وقرار می گیرد. نماد پیش فرض یک لیست مرتب اعداد 1، 2، 3 و. . . می باشد. به منظور تغییر این نماد در لیست های مرتب از ویژگی TYPE در تگ
        استفاده می کنیم. براساس جدول زیر می توانید مقدار TYPE مورد نظر خود را تعیین کنید. 
					مقدار نماد
					A,B,C,. . .             A
					a,b,c,. . .             a
					I,II,III,. . .          I
					i,ii,iii,. . .          i
					

همانند مثال زیر:

 
   
      
       

  • کتاب1

 

       
  • کتاب2

 

       
  • کتاب3

 

       
  • کتاب4

 
      
   

 

  1. کتاب1
  2. کتاب2
  3. کتاب3
  4. کتاب4


توضیح برنامه: در برنامه ی بالا لیست ترتیبی چند کتاب را مشاهده می کنید که در ابتدای هر گزینه حروف بزرگ لاتین نمایش داده می شود. 
تمرین 14- برنامه ای بنویسید که شامل یک لیست ترتیبی بوده که در ابتدای هر کدام یکی از حروف کوچک لاتین نمایش داده شود. 

لیست های نامرتب ( Unordered Lists )

لیست نامرتب شامل عناصری است که از نظم خاصی پیروی نمی کنند. در ابتدای هر عنصر یک علامت Bullet قرار می گیرد. (شکل ساده گرافیکی مانند دایره) همچنین برای نمایش مقادیر متفاوت از ویژگی "?"=TYPE استفاده می کنیم که به جای ? مقدار مورد نظر قرار می گیرد: 

  • طراحی وب
  • برنامه نویسی وب


برای تغییر این نماد می توانید از جدول زیر نماد مورد نظرتان را انتخاب کنید. 

مقدار نماد
circle دایره تو خالی
disc دایره تو پر
square مربع تو خالی

لیست نامرتب بین تگ

    وو عناصر آن بین تگ
  • وقرار می گیرند. همانند مثال زیر:

 
   
      
       کتاب رمان 
       کتاب روانشناسی 
       کتاب برنامه نویسی 
       کتاب کودک 
      
   

  • کتاب رمان
  • کتاب روانشناسی
  • کتاب برنامه نویسی
  • کتاب کودک


توضیح برنامه: در برنامه ی بالا لیست کتاب هایی را مشاهده می کنید که از نظم خاصی پیروی نمی کنند. برای نمایش این عناصر لیست نامرتب انتخاب مناسبی است. 
تمرین 15- برنامه ای بنویسید شامل یک لیست نامرتب دروس مختلف باشد. 

لیست تو در تو

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

 
   
     

  • مشخصات

 
        

         
  • نام نویسنده

 

         
  • ناشر

 

         
  • سال چاپ

 

         
  • شابک

 
        

     
  • نام کتاب ها

 
        

         
  • شیمی

 

         
  • فیزیک

 

         
  • ادبیات

 

         
  • ریاضی

 
        
   

 

  • مشخصات
  1. نام نویسنده
  2. ناشر
  3. سال چاپ
  4. شابک
  • نام کتاب ها
  1. شیمی
  2. فیزیک
  3. ادبیات
  4. ریاضی


توضیح برنامه:در برنامه ی بالا عنصر اول (مشخصات) و عنصر دوم (نام کتاب ها) عضو یک مجموعه بوده که هر کدام شامل زیرمجموعه های گوناگون می باشند. 
تمرین 16- برنامه ای بنویسید که دارای یک لیست تو در تو بوده و دو عنصر از آن دارای زیر شاخه باشند. 

افزودن تصویر ( Image )

درHTML برای افزودن تصویر به صفحه وب از تگ IMG به همراه ویژگی "?"=SRC استفاده می نماییم و به جای ? مسیر عکس مورد نظرمان را می نویسیم. به منظور تنطیم اندازه ی عکس از ویژگی های ?=HEIGHT و ?=WIDTH استفاده می کنیم و به جای ؟ اندازه مورد نظر را بر حسب پیکسل می نویسیم. در مواردی مرورگر، تصویر را به دلایل مختلف (عدم تشخیص تصویر، تغییر آدرس تصویر، تغییر نام عکس و...) نمایش نمی دهد. به همین منظور متنی جایگزین تصویر قرار می دهیم تا کاربر متوجه موضوع عکس باشد. به همین دلیل ویژگی "?"=ALT استفاده می شود و به جای ؟ متن مورد نظر را تایپ می کنیم. ممکن است کاربر بخواهد در هنگام نمایش تصویر، متن مربوط به آن نیز نمایش داده شود از این رو از ویژگی "?"=TITLE استفاده می کنیم و به جای ؟ متن مورد نظر را می نویسیم. مانند مثال زیر:


 
   
    ALT="لوگو فایرفارس" HEIGHT="50"  WIDTH="50"> 
    در این صفحه عکس لوگو فایرفارس نمایش داده می شود 
   

نظرات

نظرات وبلاگ
نام شما :
آدرس وب سایت :
پست الکترونیک :
ایمیل * (برای عموم نمایش داده نخواهد شد)
پیام شما :
شکلک ها :
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
:
نظر خصوصی
کد امنیتی :
:

ورود به سایت

نام کاربری:
رمز عبور :

موضوعات

» تلویزیون دیجیتال
» جدول فرستنده دیجیتال کاشان+ نام و فرکانس شبکه ها
» پخش شبکه ورزش در کاشان تا 48 ساعت دیگر!
» شبکه ورزش در کاشان قابل دریافت شد+تله تکست
» EPG در فرستنده دیجیتال چیست؟
» پخش سریال امراطور دریا از شبکه اصفهان
» معرفی کامل انواع برند های ستاپ باکس(گیرنده های دیجیتال)
» کاشان
» جداول اوقات شرعی به وقت کاشان به تفکیک ماه و کاملا دقیق
» نقشه کاشان+فاصله تا تمامی مراکز استان ها+ قاصله تا تمامی روستاهای تابعه
» قالی‌شویان مشهد اردهال جهانی شد
» آموزش و ترفند
» آموزش تصویری عوض کردن پسورد ایمیل یاهو
» آموزش فرستادن SMS بدون شماره
» دریافت خلافی خودرو از طریق SMS
» ایرانسل یا مبین نت؟
» آموزش روش تایپ 10 انگشتی با صفحه کلید
» آموزش رایت بیش از 700 مگابایت بر روی یک CD
» آموزش تغيير پسورد ويندوز در صورت فراموشي
» آموزش عکس برداري ازپنجره‏هاي ويندوز با WORD 2010
» راهنمای کامل انتخاب دمپایی روفرشی
» اگر لپ تاپ دارید، حتما بخوانید
» آموزش تصویری نصب ویندوز ۸
» راهنمای خرید و نگهداری انواع شلوار
» 18قابلیت جالبی که ویندوز7 داردوسایرویندوزها ندارند!
» فن هاي کامپيوترمان را چگونه وکي تميز کنيم؟
» آموزش رمز دار کردن فایلها
» پس از GLX اکنون موبایل ایرانی PARS (معرفی تمامی محصولات)
» آموزش استفاده مجدد از سی دی های سوخته با NERO
» در 90 دقیقه اولین صفحه وب خود را بسازید (آموزش HTML)
» همه چیز راجع به سیستم عامل آندروید
» آموزش از کار انداختن هشدار پر شدن هارددیسک
» آموزش BLOCK کردن ID مزاحم
» آموزش کپی کردن عکسهای غیر قابل کپی از سایت ها
» شرح و رفع عیب تمامی خطاهای اینترنتی
» جی پی اس چیست و چگونه کار می کند ؟
» آموزش تغییر صفحه ی شروع ویندوز ۷
» آشنايي با نوار ابزار مدياپلير ويندوز 7
» 4 ترفند هوشمندانه در PAINT ویندوز 7
» دو راه جالب جهت نفوذ به ويندوز XP بدون رمز عبور!
» آموزش ساخت یک فولدر کاملاٌ مخفی
» آموزش عکس گرفتن از صفحه نمایش
» آموزش قطع کردن صدای مودم
» نكاتي براي بهبود سرعت ويندوز
» آموزش فرمانهای مفید برای استفاده در Run
» ده نكته مهم براي بالا بردن سرعت كامپيوتر شما
» فایلهای Pdf را به حرف درآورید!
» طريقه نصب صحيح دستگاه بلوتوث بر روي كامپيوتر
» گذاشتن پسورد بر روی پرونده های آفیس
» نحوه عکس گرفتن با مدیا پلیر
» فراخوانی فایل های دانلود نشده (در فایر فاکس)
» 6 راه سريع کردن فايرفاکس
» نحوه شکستن PIN2 باز کردن پین کد
» طریقه از دسترس خارج کردن گوشی
» آموزش پارتیشن بندی در ویندوز 7
» آموزش System Restore در ویندوز XP
» راهنمای تصویری ورود به Safe Mode در Windows 8
» آی پد یا لپ تاپ ؟ ۱۰ دلیل برای برای اینکه دانشجویان لپ تاپ بخرند
» ذخیره‌ی سریع‌ تصاویر با فرمت دلخواه در نرم‌افزار PAINT
» بازگردانی ویندوز هنگ کرده با یک روش ساده
» عکس و مد
» بیوگرافی و عکس های han-hyo-joo بازیگر نقش دونگ یی
» عکس های پاملا ای کیک بازگر نقش ژاکلین در سریال ساخت ایران
» استفاده از ربات های دختر جذاب در رستوران ژاپنی!
» عکس بازیگران زن ایرانی قبل انقلاب +بعد انقلاب
» کارت پستال های تبریک تولد
» عکس هایی از مهمانداران خطوط مختلف هوایی جهان
» بیوگرافی کامل کیم کارادیشیان+عکس
» ازدواج 20میلیون دلاری دختر سلطان برونئی+عکس
» جدیدترین عکس های پاملا ای کیک بازگر نقش ژاکلین در سریال ساخت ایران(2)
» عکس های یوسف تیموری و همسر تایلنیش به همراه پسر دورگه شان!
» با سارا شاهی تنها بازمانده قاجار بیشتر آشنا شویم+ عکس ها
» پشیمانی خانواده قهرمان شنای پارالمپیک از رهایی دخترشان +عکس
» عکس هایی دیدنی از شو مد لباسهای زنانه در برج میلاد
» همه چیز راجع به برند ورساچه+عکس
» تبدیل بزر گترین هواپیمای مسافربری جهان به هتل !!!
» تصاویر جدید از بانوان نینجای ایرانی !
» معرفی جذابترین زن دنیا +عکس
» جدیدترین عکس های بانو جمی(chae shi ra) سریال امپراطور دریا
» جدیدترین عکس های دونگ یی(han hyo joo)
» جدیدترین عکس های بانو جانگ(Yeon Lee So) در سریال دونگ یی
» تصاویر : پرنسس‌های والت‌دیزنی از کجا آمده‌اند
» عکس های بهترین فوتبالیست زن آسیا
» عکس های الناز بهمن زاده بازیگر نقش هانیه حقی
» دانلود
» دانلود سریال ساخت ایران ( تمامی قسمت ها تا پایان)
» دانلود نرم افزار موبایل کاشان همراه (جاوا)
» مطالب جنجالی
» حضور کامران ملک مطیعی درفیلم ضد ایرانی دوشیزگی +عکس
» عکس های دست ندادن مهرداد کرم زاده با کیت میدلتون عروس ملکه انگلیس
» عریان شدن زنان فمنیست در حین برگزاری بازی های المپیک لندن
» مدونا برای حمایت از اوباما برهنه شد! + تصویر
» سازنده فیلم توهین آمیز علیه پیامبر کیست؟
» عکس های برهنه دختر 22ساله هالیوود منتشر شد و آبرویش رفت!! + عکس
» انتشار عکس‌های خصوصی‌ از عروس ملکه انگلیس+عکس
» ترویج فساد با انتخاب زیباترین دختر عریان جهان در آذربایجان! + عکس
» دارین حمزه ی لبنانی پس از بازی در فیلمی مستهجن این بار در ایران!!!+عکس
» مالزی کشوری اسلامی یا کشور کاباره های رنگارنگ؟!!!+ عکس
» کاریکاتور موهن روزنامه شرق!!!+تصویر
» شهرت مجری زن بــا عریان شدن در یک برنامه زنده! + عکس
» عکس های دست دادن ورزشکاران ایرانی با زنان در المپیک
» بوسیدن خواننده زن توسط نخست وزیر ترکیه!!!! +عکس
» رئیس‌جمهور مسلمان دست در دست آنجلینا جولی! + تصویر
» ملکه زیبایی کرواسی سرمربی تیم فوتبال مردان شد (عکس)
» پیشگویی نسترآداموس درمورد ایران
» بینندگان حریم سلطان بخوانند!
» تصویر واقعی زنان دربار عثمانی + تصویر "حریم سلطان"
» قیمت گوشی های زیر یک میلیون آذرماه
» جدول/ قیمت انواع لپ تاپ آذر ماه
» عکس های لباس جنجال لیلا حاتمی در جشنواره کن2012
» دروغ های شاخدار آخرین مستند شبکه من و تو!
» ویژگی‌های‌ پهپاد جاسوسی‌ درچنگال‌‌ سپاه
» نگاهی به فیلم "من مادر هستم"
» سمند چگونه تولید و خودروی ملی شد
» مجلس ترکیه توقف پخش«حریم سلطان»رابررسی میکند

آرشیو

» 1391

پیوندهای روزانه

آمار سایت

افراد آنلاین : 1
بازدید امروز : 61
بازدید دیروز : 9
هفته گذشته : 116
ماه گذشته : 322
سال گذشته : 2,527
کل بازدید : 66,368
کل مطالب : 108
نظرات : 28
تعداد اعضا : 30
امروز : یکشنبه 02 اردیبهشت 1397
 

Theme Design By mojtaba

ابزار هدایت به بالای صفحه

تصویر ثابت