تبلیغات
اموزش رایگان برنامه نویسی ، اموزش رایگان برنامه نویسی c ، اموزش رایگان طراحی سایت ،اموزش رایگان برنامه نویسی کامپیوتر،اموزش رایگان طراحی وب سایت ، اموزش رایگان طراحی وب ، اموزش رایگان طراحی سایت آموزش رایگان برنامه نویسی های مختلف ، طراحی سایت به زبان php - مطالب آموزش html
 
اموزش رایگان برنامه نویسی ، اموزش رایگان برنامه نویسی c ، اموزش رایگان طراحی سایت ،اموزش رایگان برنامه نویسی کامپیوتر،اموزش رایگان طراحی وب سایت ، اموزش رایگان طراحی وب ، اموزش رایگان طراحی سایت آموزش رایگان برنامه نویسی های مختلف ، طراحی سایت به زبان php
درباره وبلاگ



مدیر وبلاگ : بهاره ساعدی
نویسندگان
آمار وبلاگ
  • کل بازدید :
  • بازدید امروز :
  • بازدید دیروز :
  • بازدید این ماه :
  • بازدید ماه قبل :
  • تعداد نویسندگان :
  • تعداد کل پست ها :
  • آخرین بازدید :
  • آخرین بروز رسانی :
جلسه 23 html

ایجاد پیوند بین نسخه کوچک تصاویر و خود تصویر

  • یک تکنیک خیلی مشابه برای استفاده از تصاویر به عنوان برچسب پیوندها ، استفاده از نسخه کوچک شده تصاویر و ایجاد پیوند بین انها و نسخه اصلی ان تصویر می باشد . شما می توانید به سرعت ، تعداد زیادی تصاویر کوچک را بار کرده و به مراجعه کنندگان تان امکان دهید ، تصویری که می خواهند با اندازه واقعی اش نمایش داده شود را خودشان انتخاب کنند .
برای ایجاد پیوند بین نسخه کوچک و بزرگ ان :
  1. تایپ کنید <a href=image.jpg> که در ان image .jpg مکان تصویر با اندازه کامل روی سرور می باشد .
  2. تایپ کنید img src=mini.jpg> که در ان mini.jpg مکان نسخه کوچک شده تصویر روی سرور می باشد .
  3. در صورت لزوم تایپ کنید alt=alternate text  که در ان alternate text متنی است که اگر به هر دلیل نسخه کوچک شده تصویر به نمایش در نیامد ان متن باید به نمایش در اید .
  4. </ نهایی را تایپ کنید .
  5. <a/> تا تعریف پیوند برای تصویر تمام اندازه کامل شود .

مثال :

<html>
<body>
<a href="http://s3.picofile.com/file/7836446234/1_23_.jpg">
<img src="http://s1.picofile.com/file/7836447090/1_23_111.jpg" />
</a>
</body>
</html>

خروجی

http://s2.picofile.com/file/7836469672/22html11.jpg

بعد از کلیک کردن روی تصویر ، تصویر بزرگ ان نمایش داده می شود



http://s4.picofile.com/file/7836470428/22html1.jpg






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

       نظرات
دوشنبه 17 تیر 1392
بهاره ساعدی
جلسه 22 html

استفاده از تصاویر به جای بر چسب پیوندها

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

برای استفاده کردن از تصاویر به عنوان برچسب پیوندها :

  1. تایپ کنید <a href=destination.html> که در ان destination . html  ، مسیر صفحه ای است که وقتی کاربر روی دکمه کلیک کند ، به ان جهش می کند .
  2. تایپ کنید <img src=image.jpg> که در ان image .jpg مکان فایل تصویر روی سرور است .
  3. رد صورت نیاز  ، تایپ کنید border=n که در ان n پهنای مرز تصویر بر حسب پیکسل است .
  4. در صورت نیاز ، سایر مشخص های مربوط به تگ تصویر را اضافه کرده و </ نهایی را تایپ کنید .

مثال :(کد صفحه firstpage.html)

<html>
<body>
<h1> coodie and woody </h1>
<p> generally considered the sweetest and yet most independent cats in the pioneer valley . cookie and woody are consistertly understand by their humble humans</p>
<p align="right"><a href ="firstpage.html"><img src="http://s1.picofile.com/file/7834454408/images1234.jpg" alt="firstpage" border="0" /></a>
<a href ="nextpage.html"><img src="http://s2.picofile.com/file/7834454622/index121.jpg" alt="nextpage" border="0" /></a>
</p>
</body>
</html>


کد صفحه (nextpage.html)

<html>
<body>
<h2> next page </h2>
</body>
</html>


خروجی :

http://s3.picofile.com/file/7834484943/22html.jpg


http://s1.picofile.com/file/7834483973/22_1html.jpg






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

       نظرات
یکشنبه 16 تیر 1392
بهاره ساعدی
جلسه 21 html

ایجاد میانبرهای صفحه کلید
  • میانبرهای صفحه کلید به مراجعه کنندگان امکان می دهد تا بدون استفاده از یک ماوس ، پیوندها را انتخاب کرده و فعال کند .

برای اضافه کردن یک میانبر صفحه کلید به یک پیوند :

  1. درون تگ پیوند ، تایپ کنید "=accesskey
  2. میانبر صفحه کلید را تایپ کنید (هر حرف یا شماره ای )
  3. " نهایی را تایپ کنید .
  4. در صورت لزوم ، اطلاعاتی را در مورد میانبر صفحه کلید به متن اضافه کنید ، تا مراجعه کننده بداند که چنین چیزی موجود است .

مثال :

<html>

<body>

<a href="page.html" accesskey="o"> example </a>(کلید میانبر : o)

</body>

</html>



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




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

       نظرات
چهارشنبه 12 تیر 1392
بهاره ساعدی
جلسه 20 html

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

برای ایجاد یک لنگر :

  1. نشانگر ماوس را در بخشی از صفحه وب که می خواهید کاربر به انجا جهش کند قرار دهید.
  2. تایپ کنید <a name = anchor name> که در ان anchor name متنی است که شما به صورت داخلی برای شناسایی ان بخش از صفحه وب به کار می برید .
  3. کلمات یا تصاویری که می خواهید به انها اشاره شود را اضافه کنید .
  4. تایپ کنید <a/>تا تعریف لنگر کامل شود .

برای ایجاد یک پیوند به یک لنگر :

  1. تایپ کنید <a href=#anchor name> که در ان anchor name مقدار شاخص name در تگ a مقصد می باشد .
  2. متن برچسب ، یعنی متنی که های لایت می شود را تایپ کنید . کاربر با کلیک کردن روی این برچسب ، به بخش مورد اشاره در مرحله یک برده میشود .
  3. تایپ کنید <a/>تا تعریف پیوند کامل شود .

مثال

<html>

<body>

<h2> table of contents </h2>

<a href="#intro"> introduction </a><br />

<a href ="#descrip"> descriptoin of the main characters </a><br />

<h2><a name = "intro">introduction </a></h2>

<p>this is the intro . if i could think of enough things to write about,it could span a few page . giving all the introductory information that an introduction should introduce. </p>

<h2><a name ="descrip">description of the main characters </a></h2>

<p>frankie and jahnny are the main characters . she is jealous , and seems to have a reason  to be . he is a sleaze . and will pay the price .</p>

</body>

</html>

خروجی



http://s3.picofile.com/file/7826424943/19html2.jpg



http://s1.picofile.com/file/7826426127/19_1html1.jpg


 








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

       نظرات
دوشنبه 10 تیر 1392
بهاره ساعدی
جلسه 19 html

پیوندها

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

برای ایجاد یک پیوند به یک صفحه وب دیگر :

  1. تایپ کنید <a href=page.html> که در ان url , page.html صفحه وب مقصد می باشد .
  2. متن برچسب را تایپ کنید ، یعنی متنی که های لایت می شود (معمولا به رنگ ابی و با خط زیر ) و وقتی روی ان کلیک می شود ، کاربر را به صفحه مورد اشاره در مرحله یک می برد .
  3. تایپ کنید <a/>تا تعریف پیوند کامل شود .

مثال

<html>

<body>

<h1>cookie and woody </h1>

<img src="http://s3.picofile.com/file/7825104187/imagescat.jpg" />

<img src="http://s4.picofile.com/file/7825104943/imagescat1.jpg" />

<p> generally considered the sweetest and yet most independent cats in the <a href="cat.html"> pioneer valley </a> cookie and woody are consistently by their humble humans </p>

</body>

</html>



ایجاد صفحه cat.html
<html>
<body>
<h1> the pioneer valley </h1>
<p> located in northwestern massachusettes , the pioneer vally is home to five colleges </p>
</body>
</html>

خروجی 


http://s3.picofile.com/file/7825126448/19html.jpg


بعد از کلیک کردن بر روی pioneer valley صفحه زیر باز می شود .

http://s4.picofile.com/file/7825125371/19_1html.jpg







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

       نظرات
یکشنبه 9 تیر 1392
بهاره ساعدی
جلسه 18 html

اضافه کردن خطوط افقی

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

برای جایگذاری یک افقی :

  1. hr> را در جایی که می خواهید خط افقی در انجا ظاهر شود تایپ کنید . متنی که پس از ان می اید ، در یک پاراگراف جدید زیر خط افقی ظاهر می شود .
  2. در صورت لزوم تایپ کنید size=n که در ان n ارتفاع خط بر حسب پیکسل است .
  3. در صورت لزوم تایپ کنید width=w ، که در ان w عرض خط بر حسب پیکسل ، یا بر حسب درصدی از سند می باشد .
  4. در صورت لزوم تایپ کنید align = direction که در ان direction روش ردیف شدن خط روی صفحه ر امشخص می کند و می تواند دارای یکی از مقادیر left , right , center باشد .
  5. در صورت لزوم تایپ کنید noshade تا یک خط یکنواخت ، بدون هیچ سایه ای ایجاد شود و به صورت noshade=noshade استفاده می شود .
  6. تایپ کنید </ تا تعریف خط افقی خاتمه یابد .
مثال 1 :
<html>
<body>
<h3> new products </h3>
<p>astrofinder3
<br /> Pleiades expander
<br /> southern cross </p>
<hr />
<p> the astrofinder3 is a revolutionary new product that has</p>
</body>
</html>
خروجی :

http://s4.picofile.com/file/7823951612/18html.jpg

مثال 2 :

<html>
<body>
<h3> new products </h3>
<p>astrofinder3
<br /> Pleiades expander
<br /> southern cross </p>
<hr size="10" width="80%" aligh="center " noshade="noshade" />
<p> the astrofinder3 is a revolutionary new product that has</p>
</body>
</html>
خروجی :

http://s2.picofile.com/file/7823957632/18_1html.jpg






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

       نظرات
شنبه 8 تیر 1392
بهاره ساعدی
جلسه 17 html

ردیف کردن تصاویر

برای ردیف کردن یک تصویر با متن :
  1. تایپ کنید img src=image.location>
  2. تایپ کنید align=direction که در ان direction می تواند مقادیر top , middle, bottom  را داشته باشد .
  3. هر شاخص دیگری را که مورد نیاز است را اضافه کنید و سپس </ را تایپ کنید .
  4. متنی که می خواهید با تصویر ردیف شود را تایپ کنید .

مثال :

<html>

<body>

<h3>aligned to the top </h3>

<p> if you put an image with a line of text , it might look better if it is with the top of the line <img src="http://s4.picofile.com/file/7823638923/imageskhoroos.jpg" align="top" /> and then followed by another couple of lines of interesting text . </p>

<h3> aligned to the middle </h3>

<p> or it might look better if it is in the middle of the line <img src="http://s4.picofile.com/file/7823638923/imageskhoroos.jpg" align = "middle" /> depending on what is around it , although it does not look much like the middle to me .... </p>

<h4> aligned to the bottom </h3>

<p> or it might look better at the bottom <img src="http://s4.picofile.com/file/7823638923/imageskhoroos.jpg" align="bottom" />of the line with lost of text in it that is very important and that say something crucial . </p>

</body>

</html>

خروجی

http://s1.picofile.com/file/7823662682/17html.png






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

       نظرات
شنبه 8 تیر 1392
بهاره ساعدی


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