تبلیغات
نیلوفر آبی - مطالب ابر آموزش html
در بازدید

فهم شما از حقیقت پیرامون بستگی به میزان دانش شما از جهان هستی دارد، نه به باور هایتان.

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

بازدید امروز
بازدید دیروز
بازدید ماه گذشته
بازدید کل
آخرین آپدیت :

پونیشا :: نیروی کار مجازی
چندی پیش 2 آموزش مقدماتی و کاربردی از HTML رو براتون تهیه کردم، این کار کمی وقت گیر پر دردسر بود برام، برای همین مدتی بعد از ادامه دادن به این کار منصرف شدم، اما اگه شما از علاقمندان وب از نوع سازنده ش هستید و دوس دارید آموزشی همراه با مثال و به زبان ساده داشته باشین نگران نباشین. یه سایت کاربردی و آموزشی خوب به همتون معرفی می کنم که تقریباً همه ی بخش های HTML و CSS کلاسیک و تا حدی جاوا اسکریپت رو توش داره. حتماً برای یکبار که شده وارد این سایت بشین و برای شروع "بخش آموزش HTML" رو کلیک کنین. من یک هفته ای میشه که این وب سایت رو پیدا کردم. از یه طرف جهت یادآوری نکات فراموش شده واسه منه و از طرفی یه اموزش خوب برای شما که تازه می خواید شروع کنین هست.
خب منتظر چی هستید؟ اینم لینکش:

neoP

آموزش دوم HTML | نحوه ی قرار دادن عکس در صفحات وب!

توی درس ساده ی قبلی اونایی که هیچ آشنایی ای به HTML نداشتن یاد گرفتن چطوری به کلمات در صفحات وب لینک بدن! اما در ادامه ی درس قبل می خوام یه نکته ی دیگه رو که جا موند بهتون بگم، قبل از اینکه درس امروز رو شروع کنیم! توی درس قبلی فهمیدید که برای لینک داد به یک کلمه باید دستور زیر تایپ بشه:
<a href="http://skyBoy.ir">SkyBoy.ir</a>
  • اگه درس قبلی رو به یاد ندارید، بهتره که با کلیک روی این لینک وارد درس قبلی بشید تا براتون یادآوری بشه!
اما حتماً گاهی اوقات دیدید که وقتی موس رو بر روی یک کلمه می برید یک پنجره ی کوچیکی روی کلمه باز می شه که توضیحات تکمیلی و یا هر نوشته ی دیگه ای رو راجب اون لینکنشون می ده! برای اینکه بتونین این نوشته رو به نمایش بذارید، کافیه دستور title رو وارد تگ <a> کنید، بدین صورت:

<a href="http://skyBoy.ir"; title="نیلوفر آبی";>SkyBoy.ir</a>
حالا نتیجه ی ما به صورت رو به رو خواهد بود: SkyBoy.ir   اگه موس رو روی این لینک ببرین کلمه ی "نیلوفر آبی" ظاهر خواهد شد. اما اگه براتون سواله که چه جوری به کلمات لینک شده رنگ خاصی و یا آندرلاین بذارید باید سی اس اس بلد باشید که اون مبحثش جداس، اما با  HTML هم میشه این کار رو کرد اما دادن استایل به کلمات به وسیله ی HTML کاری بس پیش پا افتاده اس.

لامپنکته دو - نحوه ی قرار دادن عکس در صفحات
قبل از اینکه بدونین چه جوری میشه این کار رو کرد، باید بدونین که هر عکسی که شما در دنیای مجازی می بینید در فضایی در سروری خاص ذخیره شده است! یعنی چی؟ یعنی اینکه همونطور شما عکس های جشن تولدتون رو توی فولدری در درایو خاصی از کامپیوترتون ذخیره می کنین ، در اینترنت هم عکسها بر روی هاردی در سروری که میزبان هست، ذخیره شده! پس برای دستیابی به اون عکس شما باید آدرس عکس مربوط رو داشته باشین، برای مثال آدرس پایین، آدرس عکس هیدر بالای وبلاگمه:
http://s2.picofile.com/file/7113020535/UPBG6.png
رایج ترین عکس هایی که در اینترنت به کار گرفته می شن با فرمتهای : JPG, PNG, GIF هستن.
قبلاً فهمیدین که تگهای HTML به طور کل از سه بخش تشکیل می شن:
1-کد آغاز گر، 2-محتوا، 3-کد پایان دهنده
برای قرار دادن عکس در یک صفحه می شه از کد زیر استفاده کرد:
<img src="آدرس عکس">
For Example:
<img src="http://moj68.persiangig.com/image/slideshow/67046.jpg">
کلمه img src مخفف کلمه ی Image Surce می باشد که به معنی مبدا عکس هستش!
(با دقت در لینک بالا می بینید که این دفعه کد پایان دهنده در این تگ قرار نگرفته، و محتوا وارد کد آغازگر وارد شده! این تگ های HTML تگ هایی هستن که محتوای مولتی مدیا یا رسانه ای به غیر از نوشتار باشن! یعنی اینکه کد ویدئو، عکس و... در HTML شامل دو بخش هست! 1-بخش آغاز گر و 2-محتوا، که محتوا همانطور که گفته شد در کد آغاز گر قرار می گیره)
اگه بخواید سایز عکس رو تغییر بدید، و یا وقتی که موس میره رو عکس نوشته ی دلخواه شما ظاهر بشه کافیه دستورهای زیر رو توی کدهای بالا قرار بدین:
<img style="width:100px; hieght:50px;"
src="http://moj68.persiangig.com/image/slideshow/67046.jpg" alt="خورشید">
اگه بخواید به عکستون یه قاب ساده هم بدید می تونید دستور border رو به کدهاتون اضافه کنین:
<img style="width:150px; hieght:75px;"
src="http://moj68.persiangig.com/image/slideshow/67046.jpg"
alt="خورشید"
border="2px">
و اما نتیجه ی درس امروز ما:

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

به امید روزهای پرامید...
مجتبا

مقدمه:
دلم می خواد چیزایی که خودم به صورت تجربی و با ازمون خطا یاد گرفتم به صورت یدفعه ای به شما یاد بدم! البته نمی خوام وارد مباحث پیچیده تر html و Css بشم، ولی همینقدر که شما بدونید چه طوری میشه نیازهای اولیه تون رو رفع کنین کافیه! در ضمن من توی این آموزش فرض رو براین گذاشتم که مخاطبان این پست هیچ آشنایی ای با HTML ندارن!
خب شما هم حتماً از اون دسته آدمها هستین که با دیدن قسمت ویرایش کد های قالب وبلاگ و یا وب سایتتون ترس در وجود شما نفوذ می کنه و فکر می کنین این کدها به زبون مریخی نوشته شدن! در حالیکه اصلاً اینطور نیست، اگه اصول اولیه این کدها رو یاد بگیرید، جزئیات رو خودتون به مرور زمان پی می برید و روش کار دستتون می آد.

قبل از اولین نکات آموزشی می خواستم بگم که هدفم توی این آموزشها فقط آشنایی اولیه اس، همین!

نکته یک - لینک بسازید
کدهای HTML به این صورت نوشته می شن:

<tag> Content </tag>
علامت <> در واقع کد آغازگر HTML هست، و کلمه ی tag می تونه یک دستور از بین ده ها تگ موجود در تگهای HTML باشه! با آغاز این علامت مرورگر متوجه می شه که باید دستور این تگ رو اجرا کنه، و وقتی به Content می رسه محتوای مورد نظر ما به نمایش در می آد. علامت اسلش سبزرنگ (رنگها رو برای فهم بیشتر انتخاب کردم) یعنی این: / به معنای بستن تگ مورد نظر ماست. حالا بیاین یه مثال براتون بزنم!
از بین تگهای HTML من تگ <a> رو انتحاب می کنم! همه ی لینکهای موجود در تمام وب سایتها و وبلاگهای جهان هستی با وجود این تگ لینک رو به وجود می آرن! ("لینک" می دونید چیه دیگه؟)
من می خوام کلمه ی : پرسپولیس سوراخه رو به یک لینک تبدیل کنم! به این صورت:

<a>پرسپولیس سوراخه</a>
خب؟ فکر کردید کار ما تموم شد؟ نه اصلاً در واقع در این حالت فقط شما فرمان لینک رو صادر کردید اما این لینک قابل اتصال به هیچ جایی نیست و اگه موس رو روی این کلمه ببرید و کلیک کنید هیچ جایی باز نمی شه! خب پس چیکار باید کرد، در این زمان ما به تگ <a> اطلاع می دیم این کلمه به چه آدرسی باز بشه، ببینین اینطوری:

<a href="http://skyboy.ir">پرسپولیس سوراخه</a>
به همین سادگی ما به کلمه ی پرپولیس سوراخه لینک دادیم! کد بالا کلمه ی زیر رو نشون می ده:
شاید بپرسین "href="http://skyboy.ir   از کجا اومده! خب این همون کدی هس که می شه باهاش آدرس مورد نظرمون رو به هر کلمه ای که خواستیم بدیم. href به معنای پیوند دهنده به مرجع می باشد که به انگلیسی مخفف HyperLink Refrence هستش. پس به طور کلی ما می تونیم به جای آدرس وبلاگم هر آدرسی رو بنویسم و به طور کل بگیم:
<a href="URL">Text Or Picture</a>
از همین روش برای لینک دادن به عکس ها هم میشه استفاده کرد، مثلاً ما می تونیم به جای یک کلمه یک عکس رو در قسمت Content وارد کنیم، ولی این خودش نیاز به یک اموزش کوچیک دیگه داره که در نکات آموزشی بعدی بهتون یاد می دم.
خب دیگه واسه امروز بستونه! واسه تمرین می تونین از طریق نرم افزار دریم ویور و یا نات پد تمرین کنین. ولی من Notepad رو بهتون پیشنهاد می کنم. یک فایل notepad باز کنید و دستوری مثل این چیزی که توی این درس بهتون یاد دادم رو توش وارد کنید. بعدش در قسمت منو وارد سربرگ File بشید و Save as... رو انتخاب کنید. اسم فایل رو از New Text Document.txt به Practice.html تغییر بدید. در ضمن در همون پنجره و در کادر پایین نوشته شده save as type که باید اون رو، در حالت All Files قرار بدید. و در کادر پایین تر هم مقدار رو به جای ANSI به UTF-8 تغییر بدید. بعد از همه ی این کارها و اوکی کردن این پنجره شما یک فایل HTML درست کردید که اگه روش کلیک کنین با مرورگر پیش فرض کامپیوترتون این صفحه نشون داده می شه، واسه کسی که می خواد در آینده یک طراح بشه، این می تونه اولین قدم برای شروع باشه، همین کاری که من چند سال پیش انجام دادم!
تصویر زیر هم به شما نشون می ده چطوری فایل نات پد رو به فایل html تبدیل کنید:

No1
در آموزش های بعدی به ترتیب نحوه ی وارد کردن عکس در صفحات html و لینک دار کردن اون رو به شما یاد می دم.
لحظه های شادی داشته باشین :)
 مجتبا