تالار گفتگوی بیداری اندیشه - شیرجه آموزشی در دنیای وب با طعم برنامه نویسی!

صفحه: 1 2

اعوذبالله من الشیطان الرجیم
بسم الله الرحمن الرحیم

سلام!

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

خُب کل هستی این تالار وام دار دنیای وب محسوب می شه دیگه! مگه غیر از اینه ؟!
همین الآن آقای «وب» تصمیم بگیره یه چند ساعتی (حالا به هر دلیلی!) بره مرخصی، آیا این تالار می تونه باشه آیــــا؟!

خُب! همین! دیگه هیچ توضیحی ندارم...

البته صبر کنید یه چیزایی داره یادم می آد:

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

باشه ببخشید! شوخی کردم! بذارید یخورده جدی صحبت کنم!

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

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

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

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

1. وقتی بعد از کلی کلنجار رفتن با اسلام و مسلمین، راضی می شیم که یه وبلاگ راه بندازیم و دست به قلم بشیم! برای یه دست سر و گوش قالبش کشیدن اینقدر این سایت و اون سایت نکنیم و به شونصد نفر رو نندازیم!!!

2. ان شاءالله بتونیم گلچینی از مطالب مورد علاقه خودمون رو از تالار هرماه در قالب یه مجله الکترونیکی در فضای مجازی بازنشر کنیم!
3. به دیگران هم در موارد فوق الذکر کمک کنیم! در قدم اول با آموزش دادن اونا
4. جبهه خودی رو در این زمینه تقویت کنیم، همونطور که به تولید محتوای سالم و قوی نیاز داریم، به بسترهای نوین و قوی هم برای نشر یا بازنشر این محتواها نیاز مبرم داریم فلذا به نیروی متخصص در این زمینه هم نیاز داریم.
5. می تونه پایه خوبی باشه برای شروع کار حرفه ای و شغلی و...
6. خلاصه اگه یخورده بیشتر بیشتر فکر کنیم خیلی فایده داره...

حالا! بنده سراپاتقصیر بعد کلی فکر و اندیشه و مشورت، سعی می کنم در حد توان در خصوص موارد ذیل مطلب بنویسم:

1. HTML
2. CSS
3. Javascript
4. jQuery

منتظر نظرات شما هم هستم

ان شاءالله بزودی شروع می کنم پس آماده باشید!

التماس دعا

اعوذ بالله من الشیطان الرجیم
بسم الله الرحمن الرحیم

سلام!
خیلی زود برگشتم!

از توجه همه دوستان سپاسگزارم، امیدوارم بتونم خدمتگزار خوبی در خور شأن تالار و اعضای خوب اون باشم. ان شاءالله

خُب بریم سر اصل مطلب:
قبل از شروع کار، ابتدا لازمه تا محیط برنامه نویسی رو برای خودمون آماده کنیم!

1. یک نرم افزار برای کدنویسی! که پیشنهاد من «++ Notepad» هست که می تونید بطور رایگان از اینجا دانلود کنید.
2. یک فضا در محیط وب برای قرار دادن صفحاتی که قراره باهم تولید کنیم...
(اگه خدایی نکرده مشکلی در مراحل نصب مورد یک داشتید، خوشحال می شم کمکتون کنم!)
الآن دیگه همه چی آماده است...

حالا ما اولین صفحه وبمون رو تولید می کنیم و منتشرش می کنیم!

1. برنامه ++notepad رو باز کنید...

[تصویر: new_project.jpg]

2. از منوی File گزینه New رو انتخاب کنید...

[تصویر: encoding_project.jpg]

3. از منوی Encoding گزینه Encode UTF-8 رو انتخاب کنید تا بتونیم بدون دردسر فارسی تایپ کنیم!

4. حالا کدهایی که این پایین براتون گذاشتمو با عملیات copy-paste در صفحه قرار بدین! فعلاً بدون توجه به اینکه این خط خطی ها چیه! اینکارو فقط انجام بدین واسه روحیه خودتون خوبه... بعد به وقتش با همشون حسابی آشنا می شیم!

کد قالب بندی شده:

<!DOCTYPE html>

<html>

    <head>

        <title>آموزش کدنویسی ویژه تالار بیداری اندیشه</title>

    </head>

    <body>

        <div dir="rtl" style="line-height:40px;text-align:center;">

            <h1 style="color:red;" title="salaam">

                آموزش کدنویسی صفحات وب

            </h1>

            <p>

                <a href="http://bidari-andishe.ir">تالار بیداری اندیشه</a>

            </p>

            <div style="width:150px;height:40px;background-color:Purple;color:white;margin:0 auto;">

                <marquee behavior="alternate">

                    منتظر کوچولو

                </marquee>

            </div>

        </div>

    </body>

</html>

4. اگه دقت کنید اون پایین مایینا! یه جایی من اسم کاربری خودمو نوشتم! که شما زحمت بکشید اسم خودتون رو بذارید که حق چاپ محفوظ بشه!

5. حالا زحمت بکشید، و این صفحه رو Save کنید... دیگه اینکار فک کنم آسون باشه... فقط یه نکته:
وقتی صفحه ذخیره سازی باز شد طبق معمول باید:
الف) یه مسیر دلخواه انتخاب کنید.
ب) نام این صفحه رو انتخاب کنید
ج) پسوند موردنظرتون رو انتخاب کنید... که برای این صفحه باید پسوند html رو از این کادر مطابق شکل برگزینید!

6. حالا از منوی Run لطف کنید مرورگر محبوب خودتان را انتخاب کنید تا نتیجه این خط خطی ها رو ملاحظه بفرمایید!

[تصویر: run_project.jpg]

7. نوبتی هم باشه نوبت آپلود این صفحه در فضاییه که خودتون انتخاب کردید!
8. بعدش دوباره تشریف بیارید همین صفحه و لینک صفحه ای که آپلود کردید رو اینجا بنویسید تا ببینم چه کردید!

* یه چند تا لینک کمکی براتون گذاشتم که شامل:

الف) مراحل نصب ++notepad که البته فقط عکسه ــ دانلود
ب) فایل نهایی تمرین امروز...(شامل یک عدد html ناقابل) ــ دانلود

اینم نتیجه اون خط خطی ها

[تصویر: 01_preview.jpg]

** میدونم از خیلی پایه(!!!) شروع کردم ولی فک کنم اینطوری بهتره... شما هم عجله نکنید، چون عجله کار .... آفرین!
*** دعا یادتون نره ها... اللهم عجل لولیک الفرج

(۱۲/آذر/۹۲ ۲۱:۴۳)sarallah نوشته است: [ -> ]کارتون خیلی خوب و با ارزشه.اما اگه این کار یه کم رسمی تر بشه و کلاس های انلاین هم چاشنیش بشه اونوقت نتیجه بخش خواهد بود.

از لطف شما سپاسگزارم...

یخورده بیشتر توضیح بدین... مثلا چیکار کنیم که رسمی تر بشه ؟!

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

یه مسئله دیگه ای خواهش می کنم دوستان نظر بدن اینکه:

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

ببخشید!
منتظر ایده ها و نظرات شما هستم
موفق باشید
التماس دعا

(۱۲/آذر/۹۲ ۲۲:۰۵)منتظر کوچولو نوشته است: [ -> ]یخورده بیشتر توضیح بدین... مثلا چیکار کنیم که رسمی تر بشه ؟!

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

یه مسئله دیگه ای خواهش می کنم دوستان نظر بدن اینکه:

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

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

مورد دوم هم امکانات خاصی نیاز نداره.
میشه از نرم افزار هایی مثل team viewer یا اسکریپت ها استفاده کرد که البته اگر وقت نداشته باشید ممکن نیست

اعوذ بالله من الشیطان الرجیم
بسم الله الرحمن الرحیم

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

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

اما درس دوم!

[تصویر: 01_intro.jpg]

یخورده می خوام در خصوص HTML و ساختارش توضیح بدم (خُب حتی الامکان مثل درس اول تیتروار و ساده) :

1. HTML مخفف عبارت ( Hyper Text Markup Language ) که ترجمه شده به : «زبان نشانه گذاری فرامتنی»!

2. این زبان تقریباً در تمامی صفحاتی که در اینترنت وجود دارند، بکار برده می شود:
الف) از ابتدا با این زبان نوشته شده اند (مثل صفحه ای که در درس اول ایجاد کردید)
ب) بعداً هنگام نمایش در مرورگر تبدیل به این زبان شده اند... که فعلاً با اونا کار نداریم!

3. یک سری استاندارد در این زبان (همانند سایر زبانها) وجود داره که توسط (W3C ـ کنسرسیوم شبکه جهانی وب) تهیه شده و برای یکسان سازی اون خط خطی های درس اول بکار برده می شه! و ما هم ان شاءالله از اونا پیروی می کنیم!

آشنایی با ساختار TAG ها :

[تصویر: 04_tags.jpg]

4. عناصر (element) تشکیل دهنده HTML (یعنی همون خط خطی ها) رو در اصطلاح Tag (برچسب) می گن که همه بحث ما درباره همین Tag هاست...

5. این تگ ها یا بصورت «زوج» هستند یا بصورت «فرد»؛

6. تَگ ها از دو بخش «باز» و «بسته» یا «ابتدایی و انتهایی» تشکیل می شوند.

7. اگه «زوج» باشند: مثل <h1></h1> و اگه «فرد» باشند: مثل <br> استفاده می شوند.

8. اگه خوب دقت کنید می بینید که تگ «باز یا ابتدایی» بین دو علامت کوچکتر و بزرگتر قرار می گیره و تگ «بسته یا انتهایی» هم به همین صورت فقط یه فرق کوچولو باهم دارند، اگه گفتید؟!
احسنت! تگ «بسته یا انتهایی» یه علامت «/»(slash) قبل از نام تگ داره که اینطوری به مرورگر می فهمونه که من «بسته» شدم!

9. اما تگ های فرد! این عزیزان، خیلی اعصاب ندارند، ولی جناب W3C چون با کسی شوخی نداره، وقتی دید که این دوستان هیچ رقمه «زوج»! نمی شن بهشون دستور داده که حتماً باید علامت «/» رو بعد از نام خودتون بذارید تا هر وقت سروکله تون یه جا پیدا شد، همه متوجه بشن که... بععععله! پس لطف کنید و این نکته رو مدنظر داشته باشید...
این همه توضیح دادم چون خیلی ها هنوز که هنوزه خام خواهش های این تَگ ها می شن و علامت «/» رو نمی ذارن!

* نکته ظریف 1: هرچیزی که بین دو تگ «زوج» قرار بگیره میشه «محتویات» و یا «مقدار» این تَگ! که می تونه:
ـ یه تَگ دیگه باشه! (می تونید هرچقدر که بخواین تَگ ها رو «تودرتو» استفاده کنید ولی هرچیزی یه حدی داره!)
ـ هرچیزی غیر از تَگ مثلاً متن

** نکته ظریف 2: این تگ های «فرد» یا بقول خارجکی ها «empty» هیچ مقداری نمی گیرند! همونطور که گفتم کلا اعصابشون داغونه...

ساختار پایه زبان HTML

[تصویر: 05_base.jpg]

10. حالا چارچوب اصلی زبان HTML رو با هم مرور می کنیم تا بعدش بریم سروقت معرفی یه تَگ خوب!

کد قالب بندی شده:

<!DOCTYPE html>

<html>

    <head>

    </head>

    <body>

    </body>

</html>

* اولین خطی که مشاهده می کنید، مربوط به صحبت کردن صفحه شما با مرورگره! یجورایی بهش می فهمونه که این صفحه به چه زبونی نوشته شده تا مرورگر بتونه بهتر کارشو انجام بده!

کد قالب بندی شده:

<!DOCTYPE html>

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

* کل ماجرا از درون دو تَگ html شروع می شه! (یعنی این تَگ «زوج» تشریف دارن) و تمام تَگ ها درون این تَگ معنا پیدا می کنند! (البته زیاد باور نکنید، این مرورگرها انقدر باهوشن که هرچی بهشون بدید یجوری بالاخره نشونش می دن!)

* تگ html دو تا معاون داره: (این معاونا هم هرکدوم یه سری بچه تگ دارن که باید در جای خودشون ازش استفاده بشه)

1. «تگ head» : بلافاصله بعد از html نوشته می شه(یجورایی معاون اوله!) و معمولاً برای قرارگرفتن یک سری تگ های خاص مانند عنوان صفحه (همون تَگ «زوج» title که در درس اول ازش استفاده کردید)، کلمات کلیدی، توضیحات، اتصال سایر فایلها(مثل css و javascript و...)، تنظیمات و... کاربرد داره.

2. «تگ body» : بدنه اصلی html محسوب می شه و تمام آنچه در صفحات وب می بینیم بین این دو تَگ قرار می گیره،(درسته معاون دومه، ولی...!)

آشنایی اجمالی با خاصیت ها (Attributes) :

[تصویر: 06_attr.jpg]

* تَگ ها یه سری صفت یا خاصیت (attribute) دارند که عملکرد اونا رو کنترل می کنه... این خاصیت ها باید در تگ «باز» نوشته بشه با یک فاصله دقیقاً بعد از اسم تگ...

* اولین خاصیتی که میخوام معرفی کنم و تا اطلاع ثانوی هم خیلی بدردمون می خوره، و فعلاً در تگ «body» می نویسیمش:

خاصیت «dir» که مخفف «direction» یا جهته و برای چپ چین یا راست چین کردن متن می خوایم ازش استفاده کنیم!

خوب دقت کنید:
ـ برای استفاده از خاصیت ها در یک تَگ باید بعد از اسم تَگ(مثلا body) یک فاصله ایجاد کنیم.
ـ نام اون خاصیت رو بنویسیم (مثلا dir)
ـ علامت تساوی بذاریم
ـ و مقدار موردنظرمون رو بین دو علامت (" ") بعد از تساوی قرار بدیم Sad

لطفا همیشه مقدار خاصیت ها رو بین علامت (" ") یا (' ') قرار بدین »» آقای W3C)

کد قالب بندی شده:

<body dir="rtl">

خاصیت dir دو تا مقدار می گیره:
1. rtl : راست به چپ ( Right To Left )
2. اگه گفتین؟!
آفرین! ltr : چپ به راست که البته مقدار پیش فرضه و مرورگر خودش این حالتو انتخاب می کنه ـ زورگویی تا کجا آخه؟!!! ـ ( Left To Right )

[تصویر: html_attributes_guide.jpg]

*** راستی تا یادم نرفته بگم که این آقای W3C اصرار داره که کلیه موارد اعم از خاصیت ها باید با حروف کوچولو استفاده بشن!

خُب بسته دیگه حوصله ام سر رفت... بهتره بریم سراغ خط خطی بازی!!!

آشنایی اولیه با تگ های Headings

اولین تَگی که در محدوده body قرار می گیره و باید با اون آشنا بشیم:

خانواده تگ های «heading» هستند:

ـ این خانواده اصل «فرزند بیشتر، زندگی شادتر» را رعایت کرده و از پیشتازان آن محسوب می شود. چراکه علیرغم اینکه یک خانواده شش نفره «اچ» نام هستند؛ تاکنون هیچگونه ادعایی از ایشان دیده و شنیده نشده...

کد قالب بندی شده:

<h1></h1>

.

.

.

<h6></h6>

اما نکاتی که آقای W3C برای این قسمت تدارک دیدند:
ـ هرگز، دقت کنید هرگز! از این خانواده برای بزرگ کردن یا توپر کردن متنهاتون استفاده نکنید... یعنی فقط برای تیترها و عناوین! ازش استفاده کنید...
ـ موتورهای جستجو، این خانواده رو بعنوان index در نظر می گیرند و بر اساس اون صفحه رو index می کنن و در دسته بندی های خودشون قرار می دن. پس لطفاً از بکارگیری اونا غافل نشید و ضمناً بیخودی هم استفاده نکنید!

تمرین!

ـ این جلسه برخلاف میل باطنیم، خیلی مطلب گفتم و نکته بارون کردم! واسه همین دوتا تمرین خیــــلی! سخت می دم:

[تصویر: 2_preview_2.jpg]

1. لطفاً مطابق شکل؛ دوتا صفحه آماده کنید و لینکشو بذارید تا نمره بدم! (نمره هام از یک محاسبه می شه یعنی بیستش یکه!) ــ خواهش می کنم حتماً حتماً حتماً سعی کنید از صفر تا صدشو خودتون تایپ کنید... البته «رونویسی» اشکال نداره ولی «رونویسی» تبدیل به «روکپی» نشه ها! خدا خیرتون بده... حداقل با این کارِتون، این فرصتی که گذاشته می شه رو (هم خودتون هم من) هدر ندید... متشکرم!
ضمناً اگه یه بار نوشتید و جواب گرفتید، دوباره سه باره و... هم تکرارش کنید تا دستتون به کدنویسی عادت کنه

2. خاصیت هایی که در درس اول و تمرین اول ازشون استفاده کردیم رو تیتروار بنویسید(با ذکر نام تگ)

متن استفاده شده هم اینه :
امام علی علیه السلام: التّواضع ثمرة العلم‏،فروتنی میوه علم است.

اینم منبع روایت: (غررالحکم و دررالکلم،شرح آقا جمال الدین خوانساری،ص81)

وفقکم الله

اعوذبالله من الشیطان الرجیم
بسم الله الرحمن الرحیم

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

درس دوم با معرفی ششگانه!!! h1 تا h6 و دو تمرین به کار خودش پایان داد؛ و از نکات مهم آن هم ارسال موجی از پاسخ های تمرین ها بود که همه رو مبهوت کرد و در نوع خودش بی نظیر بود...!!! (البته مهم نیستا! من جواباشو بلد بودم میخواستم خودتون یاد بگیرید!!!!)

دو تا نکته مهم!

* ان شاءالله در تاپیک مخصوص تمرینات، پاسخ تمرینای درس دوم و همچنین بررسی پاسخ تمرینای ارسال شده رو قرار می دم و از اون مهم تر نمرات دوستان...!!!

** زیاد نمی خوام توی معرفی تگ ها معطلتون کنم ولی خیلی اصرار دارم، (البته نوشته ها و پیام های دوستان هم بی تأثیر نیست) که آهسته و پیوسته گام برداریم... تا سر فرصت این آموزش رو ان شاءالله به سرانجام برسونیم، فلذا قدری صبوری کنید به جاهای دل انگیزناکشم!!! می رسیم به امید خدا

اما درس سوم:

[تصویر: 01_intro.jpg]

ادامه معرفی تگ ها

[تصویر: 02_paragraph.jpg]

پاراگراف...

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

کد قالب بندی شده:

<p>پاراگرافی برای تمام فصول</p>

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

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

* یه خاصیت اختصاصی داشت(align) که چون در نسخه جدید (HTML5) پشتیبانی نمیشه بهش نمی پردازم!

خط شکن قهرمان...!!!

ـ تگ دوم! خُب ببینم وقتی شما دارید یه پُست خوب می نویسید واسه تالار! یهو احساس می کنید که باید برید ادامه این قضیه حساس رو در خط بعد بنویسید! چیکار می کنید؟!
آفرین از دکمه بسیار استراتژیک Enter استفاده کرده و با خونسردی تمام به خط بعد رفته و مشغول به تایپ می شوید!

اما از این خبرا هنگام کدنویسی نیستا! تا صبحم Enter بزنید جناب مرورگر محترم خیلی راحت همشو میریزه دور!!! انگار نه انگار پس الکی خودتونو خسته نفرمایید...
حالا باید چیکار کرد؟!

و خط شکن وارد می شود...
یک خط شکن بسیار قاطع و کاربردی ولی یه نقطه ضعف داره اونم اینه که متأسفانه «فرد» تشریف دارند!!!

کد قالب بندی شده:

<br />

بعععععله... این تگ محبوب برای ایجاد فضای خالی در بین خطوط هنگام نمایش در مرورگرها مورد استفاده قرار می گیره... هر فضای خالی دیگری که بدون استفاده از این تگ (و چندتا چیز دیگه که بوقتش عرض می کنم) بوجود بیاد مثلا خودتون space بزنید(بجز حالتای خاص که بذارید واسه وقتش!)، Enter بزنید، یا Tab را بفشرید! هیچ اتفاقی نمی افته و مرورگر همشو بی خیال می شه...

خُب اینم از این... راحت بود؟! فک می کنید! بذارید به تمرینا برسیم!!! اونوقت معلوم میشه...

در امتداد افق....

ـ و اما تگ سوم! خسته که نشدید؟ هنوز خیلی مونده ها... یه یاعلی بگید ماشاءالله
هرگاه خواستید در امتداد افق بی کران صفحه وبتان خطی رسم کنید تا نگاه کاربران را در صفحه نصف کند! می توانید از این تگ استفاده نمایید!

کد قالب بندی شده:

<hr />

بعععله... آقایون خانوما ببخشید ایشون هم «فرد» تشریف دارند... عذر میخوام ولی چه کنم نظیر تگ درس گذشته دیگه نداریم، تک و توک یه همچون چیزی یافت می شه... بذارید به فُرم ها برسیم جبران می کنم!

خُب این تگ محترم که مخفف «horizontal rule» یا همون خط افقی خودمونه! زحمت می کشه از این طرف صفحه تا اون طرف صفحه یعنی تقریباً می شه (از چپ تا راست شایدم برعکس!) یه خط (خوش خط) می کشه که جاداره ازشون تشکر کنیم!

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

* در نسخه جدید(HTML5) از این تگ برای جدا کردن موضوعات، مقالات و... استفاده می کنند و در واقع بیشتر جنبه معنایی داره تا ظاهری، برخلاف نسخه 4 که صرفاً برای ایجاد یک خط افقی ازش استفاده می شد. البته شما آزادید که هرجور دوست دارید ازش استفاده کنید و در این قضیه جناب w3c زیاد گیر نمی ده... خداروشکر!

* تمام خاصیت های این تگ در نسخه جدید منسوخ شدند و جناب w3c تقاضا می کنه که با کمک css بهش خاصیت بدیم!

یادم تو را فراموش...!!!

ـ ان شاءالله وقتی واسه خودتون یه پا استاد شدین و در چشم بهم زدنی شونصد هزار خط کد نوشتید! این تگ و امثال این تگ خیلی در مراجعات بعدی و خوانایی کد بدردتون می خوره...
تگی برای توضیح یا بقول خارجکی ها «comment»! که معمولاً برنامه نویس ها از اون در بالا/مقابل هر قطعه/خط کدشون استفاده می کنند و یه توضیح خوب و مناسب برای اون می نویسند تا فردا روزی خودشون یا نفر دیگری خواست مراجعه کنه یا کار نیمه تموم اونا رو ادامه بده، خیلی سریع از ماجرا سردربیاره و سردرگم نشه... و یه خدا بیامرزی پشتش باشه!!!

* این نوشته ها، به هیچ وجه تا زمانی که اینطوری باشند! در مرورگرها نمایش داده نمی شوند!

در هر زبانی، نوشتن توضیحات یه شکلی داره در HTML تا آخرین نسخه اون هم به این شکل نوشته می شه:

کد قالب بندی شده:

<!-- خوب دقت کنید که علامت تعجب فقط در ابتدای این تگ وجود داره! لطفاً در انتها قرارش ندید -->

** این تگ به هیچ عنوان هیچگونه خاصیتی(attributes) نمی گیره، لطفاً اصرار نفرمایید حتی شما... البته بگما یه موقع نگید عجب تگ بی خاصیتی... اتفاقاً در عین بی خاصیتی خواص زیادی داره که...

** در بین این تگ(در واقع مقدار این تگ) می تونه هرچیزی باشه، از نوشته گرفته تا کد! درسته حتی می تونید بخشی از کدتون رو به هر دلیلی با کمک این تگ غیرفعال کنید!

خُب بسه دیگه... بقیه اش واسه آخر هفته که میخوام شونصد و خورده ای! تگ معرفی کنم... بصورت رگباری!

[تصویر: 07_homework.jpg]

تمرین...!

لطفاً توجه بفرمایید:
* برای انجام تمرین ها صرفاً از آنچه که تدریس شده استفاده کنید! (لطفاً)
** برای انجام تمرینای این درس شاید لازم باشد که از دروس گذشته هم کمک بگیرید! (ولی فقط از دروس گذشته!!!)

1. مانند تصویر زیر صفحه ای را آماده کرده و ارسال نمایید...

[تصویر: 03_preview.jpg]

ـ اگه می خواید متنی که من استفاده کردمو استفاده کنید می تونید از اینجا دانلود کنید...

2. (تمرین ویژه) با کمک یکی از خاصیت های عمومی، کاری کنید تا متنی هنگام قرار گرفتن موشواره(Mouse سابق!) بر روی پاراگراف نمایش داده شود... این کار را بر روی سایر تگ ها نیز انجام دهید و نتیجه را ارسال کنید! (مانند تصویر زیر)

* لطفاً نظرات، سؤالات و پاسخ تمرینات خود را فقط و فقط در این تاپیک ارسال کنید... متشکرم!

موفق باشید...
التماس دعا

اعوذبالله من الشیطان الرجیم
بسم الله الرحمن الرحیم

سلام!
حالتون خوبه ان شاءالله؟! با برنامه نویسی چه می کنید؟! خوش می گذره؟ میشه بگید چرا تمریناتونو انجام نمی دید؟!!!

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

و اما درس چهارم!

[تصویر: 06_intro.jpg]

در این درس می خوایم یه سر بریم «آرایشگاه نوشته ها»!!!
قصد داریم این نوشته ها رو یخورده آرایش کنیم تا صفحات وبمون قدری قیافه پیدا کنه و به چشم بیاد، البته محض «خودنمایی» نه ها! صرفاً به قصد آراستگی...

وقتی تگ ها به(با) هم گره می خورند!!! (آموزشم گره میخوره دیگه!)

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

خُب دوستان لطف کنید، دستکش هاتون رو دستتون کنید که می خوایم کارمونو شروع کنیم...

طبق فرموده استاد HTML5 عزیز لطفاً:

1. اگه نوشته موردنظر شما، جزء سرتیترها و عناوین بود، لطف کنید با کمک خانواده h1...h6 بیاراییدشان!
2. اگه مخاطب نوشته هاتون «مجیدجان دلبندم» بود!!! و خواستید بر مطلبی تأکید کنید از تگ «em : emphasis» استفاده کنید...
3. برای نمایش نوشته های مهم! لطفاً از تگ «strong» بهره ببرید...
4. اگه بازم ته کاسه چیزی موند! اونوقت می تونید از جناب b بهره مند بشید و اقدام به درشت نویسی کنید... و یا آقای i رو صدا کنید و کج نویسی بفرمایید! (ولی در نظر داشته باشید که بار کج... چی؟! آفرین)

** همونطوری که در تصویر بالا مشاهده می کنید، در ظاهر، تگ های em با i و همچنین تگ های strong و b شبیه هم هستند و تفاوتی با هم ندارند... درسته ظاهرشون یکیه ولی باطنشون متفاوته! پس از روی ظاهر لطفاً قضاوت نکنید! فرقش اونموقعی مشخص می شه که جناب «موتور جستجو» می خواد بیاد در صفحه وب شما مهمونی! اونموقع براساس تگها و تعاریفشون مطالب شما رو دسته بندی و ذخیره سازی می کنه... فلذا خیلی مهمه که از هر چیزی سرجای خودش استفاده کنید... متشکرم!

*** تگ i هم در آخرین مرحله باید مورد استفاده قرار بگیره، در ساختار HTML5 هر نوشته ای یک دسته بندی خاص داره و یه تگ براش تعریف شده و دو تگ i و b واسه چیزایی که دیگه در هیچ کدام از دسته بندیها قرار نمی گیرند کاربرد داره! (یا مواقعی که نویسنده حوصله این همه نظم و ترتیب رو نداشته باشه!!!)

حق چاپ محفوظ است!

* اگه این نوشته محترم، copyright بود یا «پاورقی» بود یا «توضیحاتی از این قبیل»؛ لطف کنید از تگ small استفاده کنید.

** یه نگاه به این عکس بندازید! متن انتهای صفحه تالار رو (که قانون استفاده از مطالب رو مشخص می کنه) با دو تگ Strong و small نشون دادم که تفاوتش رو ببینید!

ساب و سوپ!

* اگه نوشته هاتون، خیلی با سواد بودند در حد فرمول آب! لطفاً از تگ «sub:Subscript» استفاده کنید.

کد قالب بندی شده:

<p>H<sub>2</sub>O</p>

<p>E = MC<sup>2</sup></p>

** هرگاه خواستید، «توان» را در فرمول های ریاضی نمایش بدید و یا شماره پاورقی را در بالای کلمه ای قرار بدید لطفاً از تگ «sup:superscript» بهره ببرید...

حذف و اضافه ماندگار!

* اگه یه چیزی نوشتید که بعداً فهمیدید درست نبوده و یا تا اونموقع درست بوده ولی بعدش ییهو تغییر کرده! می تونید از دو تگ del و ins استفاده کنید... مثلاً دیدید در برخی فروشگاه ها می خوان تخفیف بدن! یا اجناسشون رو حراج کنن! دو تا قیمت می نویسند و روی یکیشون خط می کشند تا مشخص کنند که قیمت تغییر کرده؟! این کار توسط تگ del براحتی انجام می شه...

نکته:

ـ در نسخه 4 از تگ های strike و یا s استفاده می شد و هنوز هم کاربرد داره ولی آقای HTML5 به کمک W3C خواهش کرده که زین پس از تگ del برای اینکار استفاده کنید که ما نیز چنین می نماییم...
ـ تگ ins همواره بعد از del استفاده نمی شه! ولی از اونجا که این تگ دو خاصیت کاربردی داره گاهی اوقات می تونه مکمل خوبی برای تگ del باشه:
1. cite : توسط این خاصیت می تونید یه آدرس داخلی(اشاره به همان صفحه جاری مثلاً پاورقی صفحه) تعریف کنید تا علت اینکه کلمه یا عبارتی را حذف کردید و بجای اون چیز دیگری را اضافه کرده اید را به مخاطبانتان نشان دهید...!!!

[تصویر: 09_del_ins.jpg]

2. datetime : می تونید تاریح و زمانی که این نوشته اضافه شده و متن اصلی تغییر کرده رو هم اینطوری به مخاطبان نمایش بدید! قالب وارد کردن تاریخ و زمان هم به این شکله : ( YYYY-MM-DDThh:mm:ssTZD )

متن خود را به سادگی highlight کنید...

* در نسخه اخیر، یه تگی معرفی شده که برای «متمایز» کردن متن مورد استفاده قرار می گیره که صدالبته «زوج» تشریف دارند...(مگه انتظار دیگه ای داشتین؟! تگ «فرد» رو چه به این کارا !!!)

[تصویر: 02_mark.jpg]

** بخاطر اینکه این تگ،جدید تشریف دارند، فقط در مرورگرهای جدید باید دیده بشن! مخصوصاً در مورد IE که نسخه 9 به بعدش این تگ رو می شناسه...(کلاً در دنیای وب مرورگر IE یه کابوس بزرگه واسه کدنویسا...)

هرچی رو هرجوری که خواستی بنویس و ببین!

* یادتونه موقع معرفی تگ «فرد» br چی بهتون گفتم؟! اگه space و tab و... استفاده کنید، جناب مرورگر همه رو می ریزه دور؟!!!
اما...
هرچی داخل تگ «pre:Preformatted text» قرار بگیره، همونجوری نمایش داده می شه که نوشته بشه! خیلی جالبه مگه نه ؟!

کد قالب بندی شده:

<pre>

    if(x==2){

        alert(x);

    }    

</pre>

نقل قول

* برای نقل قول، دو تا تگ در نظر گرفته شده (که هردو «زوج» تشریف دارند)
1. blockquote : که معمولاً برای نوشته های طولانی مثلاً یک پاراگراف استفاده می شه... بطور خودکار این پاراگراف رو با فاصله قبل و بعد و مقداری تورفتگی در صفحه نمایش می ده!

[تصویر: 13_quote.jpg]

2. q : برای یک نوشته یک خطی کاربرد داره که بطور خودکار نوشته ها رو درون کوتیشن قرار می ده!
** هر دو تگ یه خاصیت اختصاصی دارند:
ـ cite : که مثل مورد قبل، مسئول نمایش مأخذ کلامی است که شما نَقلش کردید

و اما تمرین این درس!

[تصویر: 11_homework.jpg]

* صفحه ای مطابق شکل زیر آماده کنید...

[تصویر: 04_preview.jpg]

متن موجود در صفحه تمرین را از اینجا دریافت کنید...

ـ از دوستانی که لطف کردند و تمرینها رو ارسال کردند، صمیمانه تشکر می کنم... ان شاءالله بزودی همه رو یک به یک بررسی می کنیم با هم و نکات لازم رو یه بار دیگه متذکر می شویم!

ـ ارسال نظرات،سؤالات و پاسخ تمرینات صرفاً در این تاپیک... متشکرم!

موفق باشید...
التماس دعا

اعوذبالله من الشیطان الرجیم
بسم الله الرحمن الرحیم

سلام!
قبل از هر چیزی یه عذرخواهی صمیمانه از همه دوستان و بزرگواران بخاطر تأخیر و خُلف وعده ای که در ارائه درس جدید داشتم. هرچند که علتش «مریضی جسمی» بود ولی بهرحال باعث بدقولی شد! دعا بفرمایید ان شاءالله بحق این ایام عزیز، خداوند همه مریضا رو شِفا بده بخصوص امراض روحی و معنوی و اخلاقی امثال بنده رو... متشکرم!

خُب خیلی سریع بریم سروقت درس پنجم: بحث شیرین اتصالات (لینک) در اینترنت!

[تصویر: 10_intro.jpg]

همونطوری که می دونید این حضراتِ ارتباطات و اتصالات تقریباً در سرتاسر صفحات وب وجود دارند و یجورایی شدند سلطان دنیای وب...!
ـ تگ متشخص و صد البته «زوج» <a></a> وظیفه ایجاد ارتباطات و لینک در دنیای وب رو برعهده دارد و از حق هم نگذریم استادی است در بحث ارتباطات... خدایش بیفزاد!!!

** اما منظورمان از لینک و ارتباط در دنیای وب چیه؟ و دقیقاً تگ a چیکار می کنه ؟!
__ این تگ می تونه بوسیله کلمه یا کلمات و یا یک نصویر به صفحه دیگری «پُل» بزند و شما با کلیک بر روی آنها به آنجا منتقل بشید!!!
الحمدلله چون انقدر لینک زیاده که دیگه نیازی به توضیح بیشتری نیست و همه شما بخوبی باهاش آشنا هستید...
مثلاً اصلاً نیازی نیست که عرض کنم، از ویژگی های این تگ اینه که وقتی نشانگر موشواره، روی اون قرار می گیره شکل اون از فلش(پیکان) به دست تغییر می کنه... مگه نه ؟! (در حد وسعمون سعی می کنیم فارسی بنویسیم! اشکالی داره؟)

* دیگه اینکه این تگ محترم در ظاهرش یه سری نکات دیگه وجود داره که بهش اشاره می کنم:
ـ وقتی هنوز شما کلیکش نکردید و از «پُل»ش نگذشتید! به رنگ «آبی» و زیرخط دار (معمولاً اگه دستکاری نشده باشه!) دیده می شه!
ـ وقتی کلیک کنید و ازش بگذرید و برسید اونور «پُل»، رنگش می شه بِنفش و زیرخط دار!
ـ در بین این دوحالت یعنی وقتی ازش بازدید نکردید و موشواره بر روی اون قرار میگیره! رنگش میشه «قرمز» و زیرخط دار!

__ یه موقع فک نکنید، دارم وسط آموزش آب می بندم و می خوام سرهم بندی کنما! این سه حالت خُب خیلی مهمه و در چند درس آینده که رسیدیم به بحث CSS متوجه می شید که می تونیم یه حالت سفارشی برای این لینک در سه مورد بالا ایجاد کنیم و از شکل اولیه اش درش بیاریم...

* و اما خاصیت!
یک خاصیت بسیار بسیار بسیار مهم این تگ نازنین! href نام داره که موظفه مقصد این ارتباط رو مشخص کنه! یعنی مقدار این خاصیت یک آدرسه که وقتی کاربر روی اون کلمه یا تصویر کلیک می کنه به اونجا منتقل می شه!

کد قالب بندی شده:

<a href="http://bidari-andishe.ir">بیداری اندیشه</a>

»» نکات کنکوری:

» شما می تونید بجای عبارت «بیداری اندیشه» در تگ بالا هرچیزی که دلتان می خواهد بگذارید و اونو وسیله ای برای رسیدن به اهداف... اِ ببخشید! یه لحظه حواسم پرت شد... خلاصه اینکه می تونید هرچیزی رو لینک کنید!
» اگه این خاصیت استفاده نشه و تگ a بدون این خاصیت نوشته بشه، خبری از ارتباطات و لینک نخواهد بود! پس وجود لینک به وجود این خاصیت بستگی داره و نمی شه ازش صرف نظر کرد... لطفاً دقت کنید!
» یادتونه در درس های قبلی در مورد «لینک داخلی» صحبت کردیم؟! خُب این لینک داخلی توسط همین تگ محترم ایجاد می شه و نحوه استفادشو یخورده پایین تر عرض می کنم!
» ارسال ایمیل! توسط این خاصیت به راحتی هرچه تمامتر انجام می شه:
فقط کافیه که در مقدار خاصیت href اینطوری بنویسید:

کد قالب بندی شده:

<a href="mailto:gholi@gholeydoon.com?cc=soli@gholeydoon.com&bcc=gholisara@gholeydoon.com&subject=دعوتنامه%20عضویت&body=شما%20 به%20تالار%20بزرگ%20بیداری%اندیشه%20دعوت%20شدید" target="_blank"> ارسال رایانامه </a>

خوب دقت کنید ببینید چطوری تمام فیلدهای ایمیل رو در خاصیت href قرار دادم!
فقط یه نکته خیلی ریز:
هرجا که نیاز به یک فاصله بین کلمات بوده بجای ایجاد فضای خالی با space از عبارت 20% استفاده کردم تا حضرات مرورگر محترم بتونن بفهمن و دچار سرگیجه نشن... چون زیاد از space سردرنمیارن، شما هم بهتره از همین روش استفاده کنید. از ما گفتن بود! خود دانید...
__ واسه اینکه خیلی بهتر کارکرد این حالت رو ببینید بهتره از مرورگر فایرفاکس استفاده کنید!

** و خاصیت دوم! این تگ target نام دارد که نحوه دسترسی کاربر رو به مقصد مشخص می کنه:

کد قالب بندی شده:

<a href="http://bidari-andishe.ir" target="_blank">بیداری اندیشه</a>

و اما مقادیر این خاصیت عبارتند از :
1. blank_ : وقتی کاربر روی لینک کلیک می کند، مقصد، در tab یا پنجره جدید نمایش داده می شه(بسته به تنظیمات مرورگر شما)
2. self_ : این مقدار پیش فرض این خاصیته... و مقصد رو در همون تب بارگذاری می کنه و نمایش می ده
3. parent_ و top_ و framename : این سه تا باشه وقتی به بخش frame ها رسیدیم عرض می کنم! شاید بهتر باشه

** و خاصیت سوم! این خاصیت در نسخه 5 به تگ a اضافه شده و فقط در دو مرورگر کروم و فایرفاکس کاربرد داره و پشتیبانی می شه!!!

کد قالب بندی شده:

<a href="آدرس فایلی که می خواید توسط کاربران دانلود بشه" download="نام فایل"> download...!!! </a>

<a href="/images/course05/pic.jpg" download="bidari-andishe01">بیداری اندیشه</a>

خاصیت download باعث می شه که محتوایی که در خاصیت href وجود داره دانلود بشه! و مقداری که در این خاصیت قرار می گیره هم در واقع نامی است که به کاربر برای ذخیره این محتوا پیشنهاد می کنید که البته در مرورگر کروم هنگام دریافت می تونه خودش تغییرش بده و نام دیگه ای رو انتخاب کنه!

** و خاصیت چهارم! ایجاد یک لینک داخلی! محصول مشترک چین... اِ بِ بخشید! محصول مشترک href و id
این روش برای ایجاد یک bookmark (راستش معادل فارسیشو بلد نیستم! اگه می دونید حتماً بهم بگید...) در صفحه بکار می ره تا در مراجعات بعدی بتونیم به سرعت بهش دسترسی پیدا کنیم:

کد قالب بندی شده:

<a id="bookmark0001"><h2>بودن یا نبودن مسئله این است</h2></a>

.

.

.

<a href="#bookmark0001">می دانید مسئله چیست؟</a>

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

ـ وقتی می خوایم یه قسمت رو نشانه گذاری کنیم از خاصیت id در تگ a به تنهایی استفاده می کنیم.
ـ بعد از اون هرجا که خواستیم به اون دسترسی داشته باشیم در خاصیت href یک علامت # (sharp / number sign) می ذاریم بعد مقداری رو که برای خاصیت id نوشته بودیم رو عیناً قرار می دیم...
** اینطوری می تونیم هرجای این صفحه به اون نشانه گذاری(bookmark) دسترسی داشته باشیم.
*** اگه بخوایم از صفحه دیگه ای هم به این قسمت لینک بدیم هم کافیه انتهای آدرس صفحه این قسمت رو اضافه کنیم:

کد قالب بندی شده:

<a href="http://forum.bidari-andishe.ir/001.html#bookmark002">ارسال شماره 3</a>

__ خاصیت های دیگه ای هم بود که یا دیگه در نسخه 5 پشتیبانی نمی شن و یا خیلی حرفه ای و صدالبته کم کاربرد(فعلاً) هستند و بهتره سراغشون نریم...!!!

خب و اما تمرین:

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

متن استفاده شده رو اینجا گذاشتم

ـ هرگونه نظر، سؤال و مطلب دیگری پیرامون این تاپیک را صرفا در اینجا بنویسید... متشکرم!

موفق باشید
التماس دعا

اعوذبالله من الشیطان الرجیم
بسم الله الرحمن الرحیم

سلام!

دو خبر دست اول:

* از اونجا که سایت پرشین گیگ احتمالاً رفته هوا ! مجبور شدم تصاویر رو دوباره بارگزاری کنم و آموزشهای اول و دوم رو هم بازنویسی کنم.

** این آموزش آخرین آموزش قبل از امتحاناته! و ان شاءالله ادامه دروس رو موکول می کنیم بعد از امتحانات

و اما درس ششم:

[تصویر: 01_Intro.jpg]

تصاویر در HTML

برای قرار دادن تصاویر درون صفحات وب باید از تگ فرد img استفاده کنیم!

کد قالب بندی شده:

<img src="bidari-andishe.gif" alt="لوگوی تالار گفتگوی بیداری اندیشه" width="150px" height="200px" />

این تگ دو خاصیت بسیار مهم و اجباری داره:

1. src : که مقدار اون؛ آدرس تصویری است که می خوایم در صفحه وبمون نمایش بدیم!

2. alt : که مخفف ( alternate text) یا همون متن جایگزینه و برای مواقعی کاربرد داره که تصویر بدرستی در صفحه بارگزاری نشده باشه (مثلاً مواقعی که سرعت اینترنت کاربر پایینه، یا آدرس تصویر بدرستی مقداردهی نشده و...)

و اما سایر خواص:

الف) width : مقدار طولی تصویر رو برحسب پیکسل (pixel) هنگام نمایش در صفحه معین می کنه!

ب) height : توضیحش مثل مورد بالاست فقط «طولی» رو «عرضی» کنید! تا تعریفش درست بشه...!!!

نکات کنکوری مربوط به این دو خاصیت:

* صرف نظر از اندازه واقعی تصویر، با مقداردهی این دو خاصیت می تونیم به هر اندازه که می خوایم (کوچکتر یا بزرگتر) تصویر مورد نظرمون رو در صفحات وب نمایش بدیم.

** از اونجا که این دو خاصیت، اجباری نیستن! اگه استفاده نشن، تصویر با اندازه واقعیش در صفحه نمایش داده می شه، و اگه مقداردهی بشن؛ مرورگر از همه جا بی خبر می فهمه که قراره اینجا یه تصویر با n طول و عرض نمایش داده بشه و از همون اول قبل از بارگزاری تصویر تکلیفش روشنه... پس بهتره که با مقداردهی این دو خاصیت خانواده ای رو از نگرانی دربیاورید... متشکرم!

ج) usemap: هنگامی کاربرد داره که بخشی از تصویرمون رو لینک دار کرده باشیم! (یعنی چی ؟!)

باید یخورده بیشتر توضیح بدم.. خُب پس آماده باشید... و حسابی دقّت کنید! (پیشنهادم اینه که اول مثال رو ببینید، بعد بقیه مطالب رو با دقت مطالعه بفرمایید!)

مثال اینجاست!

برای توضیح این خاصیت باید با دو تگ آشنا بشیم، چرا که این خاصیت یک ارتباط بین تگ img و map ایجاد می کنه، تقریباً یه چیزی مثل اونچیزی که در درس چهارم در خصوص لینک دهی داخلی دیدید!

حالا دقت کنید:

1. map : این تگ وظیفه ایجاد لینک روی بخشهایی از تصویر رو برعهده داره! این کار رو به کمک تگ area انجام می ده و سپس توسط یک خاصیت مهم (name) اونو به تگ img می فرسته ! چه جوری ؟!

این جوری: مقداری که برای خاصیت name این تگ می نویسیم رو برای مقدار usemap (با یک # اولش!) نیز قرار می دیم و اینطوری اتصال برقرار می شه!

2. area : همونطور که از نامش پیداست، برای مشخص کردن نواحی موردنظر برای لینکدار شدن تصویر، مورداستفاده قرار می گیره...
این تگ باید درون تگ map نوشته بشه و همینجوری ییهویی ننویسیدش! گناه داره!!!

خاصیت های تگ زوج area که خیلی مهمه :

[تصویر: 02_areaShape.jpg]

* shape : اون بخشی از تصویرمونو که می خوایم انتخاب کنیم، بالاخره شبیه یکی از اشکال هندسی هست دیگه، مگه نه ؟!
خُب مقادیر این خاصیت هم ایناست:

1. default : بر اساس مقادیر وارد شده، محل موردنظر رو انتخاب می کنه، یجورایی خودش براساس مقداردهی تشخیص می ده که الآن باید چیکار کنه؟! اینجا کجاست؟ من چیکاره بیدم!

2. rect : یک منطقه مستطیل شکل در محل موردنظر ایجاد می کنه

3. circle : منطقه دایره ای شکل

4. poly : منطقه ای چندضلعی (polygonal)

اما منطورمون از مقادیر وارد شده، چیه؟! یا محل موردنظر چطوری تعیین می شه؟!
اینکار برعهده خاصیت دومه :

** coords : این خاصیت که مخفف (coordinates) یا همون مختصات خودمونه! به کمک خاصیت قبلی اندازه،شکل و محل قرارگیری لینک رو برای تصاویر مشخص می کنه

مثلا همواره گوشه سمت چپ بالای تصاویر مبدأ قرار می گیره و مختصاتش 0,0 محاسبه می شه.

اما مقادیر خاصیت coords متناسب با شکلی که در خاصیت shape تعیین شدند:

1. rect : به ترتیب باید دو نقطه رو تعیین کنید که مرورگر با اتصال اونا به هم شکل مستطیل رو روی تصویر بکشه:
چپ-بالا ؛ راست-پایین (x1,y1,x2,y2)

2. circle : برای رسم دایره چی نیاز داریم؟! اگه گفتین؟ همون داستان پرگار دیگه فک کنم سوم دبستان خوندیم!
درسته! مرکز دایره و شعاع دایره پس دو تاعدد برای محل قرارگیری مرکز دایره و یک عدد هم برای شعاع دایره نیاز داریم. (x,y,radius)

3. poly : نقاطی که باید چندضلعی ما با وصل کردن این نقاط رسم بشه رو باید وارد کنیم! از هرچندتا نقطه که بخواید می تونید استفاده کنید، محدودیت نداره!!! (x1 , y1 , x2 , y2 , x3 , y3 , ... xn , yn)

* یه نکته کنکوری!
ـ حتماً دقت دارید که نقطه ابتدایی و انتهایی باید با هم یکی باشه دیگه؟! البته زیاد نگران نباشید چون اگه دقت همراهتون نبود!!! مرورگر خودش اینکارو می کنه تا چندضلعی مفلوک بی سروته نباشه و بدرستی رسم بشه! (مرورگر مچکریم!)

کد قالب بندی شده:

<img src="img_planet.jpg" width="150px" height="200px" usemap="#myCoordinate" />

<map id="myCoordinate" name="myCoordinate">

    <area shape="circle" coords="155,181,12" href="http://bidari-andishe.ir" alt="صفحه اصلي بيداري انديشه" />

    <area shape="circle" coords="155,181,12" href="http://forum.bidari-andishe.ir" alt="تالار بيداري انديشه" />

    <area shape="circle" coords="155,181,12" href="http://forum.bidari-andishe.ir/thread-29815.html" alt="تاپيک آموزش برنامه نويسي" />

</map>

حتماً می پرسید که این مختصاتو ما چطوری بدست بیاریم! خُب خیییلی ساده است:
* اولیش نرم افزارهای مخصوص ویرایش تصاویر مثل فوتوشاپ! (ابزار slice) ــ اگه خواستید، آموزششو می نویسم!
** بعد ادیتورهای صفحات وب مثل دریم ویور!
*** فعلاً هم می تونید از این سایت استفاده کنید! یه ابزار آنلاین

یک تکنیک!
* برای اینکه کاربرانمون رو بتونیم بوسیله کلیک روی تصاویر به آدرس خاصی هدایت کنیم، کافیه که تگ img رو درون تگ لینک یعنی همون a قرار بدیم... باقی ماجرا و جزئیاتشم که در درس قبل یاد گرفتیم.

نکته کنکوری!
* اگه تصویرتون داخل تگ a قرار گرفته باشه و از اون طریق لینک دار شده باشه؛ نمی تونید از خاصیت usemap استفاده کنید!

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

خُب و اما تمرین:

[تصویر: 04_homework.jpg]

* یک صفحه مانند مثال اول درس که اینجا گذاشتم آماده کنید و یک تصویر و چندتا ناحیه لینک دار! انتخاب تصویر و نواحی لینکدارش هم به سلیقه خودتون!
** واسه اینکه اون صفحه مثال، سر و شکل پیدا کنه، یخورده از css و یخورده از javascript استفاده کردم که شما فعلاً نادیده بگیرید! و با استفاده از همونایی که درس دادیم و اندکی ذوق و سلیقه و صرف وقت، یه خروجی درخورتوجه ارائه بدید!!!

موفق باشید
التماس دعا

اعوذبالله من الشیطان الرجیم
بسم الله الرحمن الرحیم

سلام!

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

البته کار از عذرخواهی و این چیزا گذشته ولی بهرحال از این بدقولی و تأخیر عذرخواهی می کنم!
امیدوارم بتونم این آموزش ها رو تا انتها ادامه بدم تا حداقل مدیون خودم نشم! ولو اینکه دوستان استقبال نکنند!

خُب بریم سر اصل مطلب!

درس هفتم: جدول

[تصویر: 00_Intro.jpg]

وقتی تصمیم گرفتم این بخش رو تدریس کنم (چه باکلاس!) یاد یه تاپیک قدیمی قدیمی قدیمی افتادم و یه ارسال از جناب آقای «بیداری اندیشه» که اونموقعه ها که بچه خوبی بودیم و از این تاپیکا می خوندیم٬ خیلی برام مفید بود... هِی! یادش بخیر

[تصویر: 01_table-namaz.png]

اون تاپیک و جریاناتش رو اینجا ببینید... من می خوام از جدولی که جناب «بیداری اندیشه» فرستادند استفاده کنم و در این درس به بهانه تدریس مبحث جدول (Table)٬ یکی شبیه اونو بنویسیم (اینو بهش می گن روش پروژه محور!!!)

»»تگ TABLE :

[تصویر: 02_table.jpg]

کد قالب بندی شده:

<table border="1">

<caption>لیست نماز</caption>

  <tr>

    <th>صبح</th>

    <th>ظهر</th>

  </tr>

  <tr>

    <td>1</td>

    <td></td>

  </tr>

</table>

»»و اما توضیحات:

* تگ table پدر بزرگواری است که به همراه فرزندان زیاد خود برای درج جدول در صفحات وب مورد استفاده قرار می گیرد.

* از جمله فرزندان برومند این تگ محترم٬ می توان به تگ tr یا همون table rows اشاره کرد که عهده دار بخش سطر جداول هستند.

* از دیگر فرزندان ایشان٬ که در واقع فرزند tr بوده و نوه ایشان محسوب می شود٬ تگ th یعنی table headings می باشد که عهده دار تیتر و هدر جداول (سطر اول) هستند.

»»نکته:

اکثر مرورگرها٬ بدون دخالت دست و هرگونه توصیه قبلی! محتویات این تگ را بصورت Bold و «وسط چین» نمایش می دهند که جا دارد به افتخارشان.... چیه؟! انتظار دارید به افتخارشان چیکار کنیم؟! چه توقعاتی دارند مردم والا !

* و اما فرزند دیگر ایشان٬ که باز فرزند tr بوده و نوه ایشان هستند٬ تگ td بوده که مخفف table data است و عهده دار محتویات جدول می باشد. که این محتویات می تواند هر چیزی حتی یک جدول دیگر هم باشد! (بنازم به این مسئولیت پذیری!)

* و اما فرزند دیگر ایشان که شاید کمتر شناخته شده باشد٬ تگ caption است که روابط عمومی پروژه جدول هستند و وظیفه دارند یک توضیحی در مورد جدول را درست بالای سر آن٬ نشان مخاطبان دهند!

»»نکته:

محل قرارگیری تگ caption درست بعد از تگ table می باشد! لطفاً از هرگونه دخل و تصرف در آن جداً خودداری فرمایید! متشکرم!

[تصویر: 03_tableTags.png]

این یک توضیح شسته رُفته بود از table و ملحقاتش٬ خیلی سر راست و مختصر!

اما ریزه کاری خیلی داره که سعی می کنم خیلی فعلاً واردش نشم تا وقتی که برسیم به مبحث شیرین CSS ان شاءالله

»»اما از خاصیت (Attributes) هاش بگم براتون:

* border که مقدارش «عدد» است و در واقع ضخامت حاشیه جدول را تعیین می کند.

»»نکته :

این خاصیت و خیلی از خواص دیگر تگ table در HTML5 منسوخ شده و باید از CSS برای تنظیم آنها استفاده کنیم.
اما از اونجا که فعلا قصد نداریم وارد مبحث CSS بشیم این یدونه خاصیت رو از ما بپذیرید تا بعداً از خجالتتون دربیایم!

[تصویر: 04_moreStudy.jpg]

»» یخورده بیشتر!

* یه تیتری دیدم چند روز پیش که خیلی برام جالب بود! مربوط می شد به کتابی از حاج آقا مرتضی آقاتهرانی در خصوص راه کارهای ایجاد نظم و برنامه ریزی در زندگی و اونم این بود: «نظم٬ آنچه همه دوست دارند ولی...»
بعضی ها می گن ولی اسبابش فراهم نیست و...
اما در مورد table باید به عرض برسونم که ایشون اسباب ایجاد نظم رو براتون فراهم کرده در حد لالیگا و فراتر از آن!!!
اگه راست میگی بسم الله...

ـ مثلاً چی ؟!
ـ مثلاً اومده جدول رو سه قسمت کرده و هر قسمت رو درون یک تگ قرار داده و یه جورایی در جداول بزرگ از سردرگمی جلوگیری کرده! که در ادامه بیشتر توضیح می دم:

۱. تگ thead : تمام تگ هایی که مربوط به سطر اول یا هدر جدول هستند درون این تگ زوج قرار می گیرند. این تگ باید حتماً درون تگ table و بعد از تگ caption نوشته شود.

۲. تگ tbody : تمام تگ های حاوی محتویات اصلی و داده های جدول درون این تگ زوج قرار می گیرند. این تگ هم باید درون تگ table نوشته شده و بعد از تگ های caption , thead مورد استفاده قرار بگیرد.

3. تگ tfoot : تگی زوج برای نمایش اطلاعات در پایین و انتهای جدول! این تگ هم باید درون تگ table قرار گیرد و بعد از caption , thead نوشته شود و قبل از tbody و یا tr قرار گیرد. (اینجور تگ حساسیه!)

کد قالب بندی شده:

<table border="1">

    <caption></caption>

    <thead>

        <tr>

            <th></th>

        </tr>

    </thead>

    <tfoot>

        <tr>

            <td></td>

        </tr>

    </tfoot>

    <tbody>

        <tr>

            <td></td>

        </tr>

    </tbody>

</table>

»» نکته:

* تگ th فقط برای نمایش هدر در جدول استفاده می شود و برای همین فقط درون thead از این تگ استفاده شده و در دو تگ tfoot و tbody از تگ td استفاده کردیم!
* هنگامی که جداول ما حجیم و اطلاعات آنها در چند صفحه نمایش داده شود٬ هنگام پرینت گرفتن و یا هرگونه خروجی شبیه به آن٬ بطور اتوماتیک و باز هم بدون دخالت دست شاهد آن خواهیم بود که هدر و فوتر جدول در تمام صفحات تکرار می گردد! آفرین...!!!

»»و اما نکته خیلی خیلی مهم:

به این تصویر نگاه کنید:

[تصویر: 06_rowspan.png]

به نظرتون اگه بخوایم یه همچین چیزی رو در صفحه وبمون بسازیم چیکار باید بکنیم؟!
چی؟! توکل به خدا؟!
اون که بعععععله! اما همزمان با اون باید چیکار کنیم!!!

»» خودم بگم بهتره! به شرط اینکه خوب خوب خوب و تا آخرش با دقت گوش کنید!
خیلی ساده است به کمک دو خاصیت نازنین! (colspan و rowspan):

* rowspan محترم لطف می فرمایند و امکان ادغام سطرها رو برامون فراهم می کنند.
* colspan محترم هم ایضاً منت نهاده و امکان ادغام ستون ها رو مهیا می فرمایند!

برای نمونه٬ همین جدولی که در تصویر پایین می بینید رو توضیح می دم! خوب خوب خوب دقت کنید!

[تصویر: 07_row-col-cell.png]

از رنگ و لعابش که بگذریم! می رسیم به کدهاش:

کد قالب بندی شده:

<table border="1">

    <tr>

        <td colspan="3">colspan</td>

        <td rowspan="2">rowspan</td>

    </tr>

    <tr>

        <td>Cell 1</td>

        <td>Cell 2</td>

        <td>Cell 3</td>

    </tr>

</table>

دیدید چه اتفاقی افتاد؟!
از راست به چپ شروع کردیم به تبدیل عکس به کد!
اولین خونه جدول یک «خونه» یا «سلول»ی بود که معادل سه خونه زیریش بود!
یعنی این خونه موردنظر با دوتای دیگه به مصالحه رسیدن و خونه ها رو دادن دست بساز بفروش و...
واسه همین ما هم اومدیم از colspan استفاده کردیم! حالا که خونه اش بزرگ شده٬ یادش بمونه یه روزی... بعععععله!

اما خونه بعدی هم اگه دقت بکنید٬ معادل دو سطر کناری خودشه! یعنی ایشون هم با همسایه های پایینی به توافق رسیدن
واسه همین ما هم از rowspan استفاده کردیم و عدد ۲ رو برای ایشون اختصاص دادیم!
به همین راحتی!
بقیه اش هم که معلومه!

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

کد قالب بندی شده:

<table border="1">

    <tr>

        <td>colspan</td>

        <td>colspan</td>

        <td>colspan</td>

        <td>rowspan</td>

    </tr>

    <tr>

        <td>cell 1</td>

        <td>cell 2</td>

        <td>cell 3</td>

        <td>rowspan</td>

    </tr>

</table>

خُب٬ حالا هرچیزی که لازم بود رو تقریباً گفتم! البته نه به روش پروژه محور٬ می دونم! اما حالا می ریم سروقت پروژه محوری! ماهی رو هر وقت از آب بگیری.... چی ؟! آفرین! در معرض خطر مرگ قرار می گیره!!!

در جدول موردنظر(اول درس)٬ همانطور که در تصویر مشخص شده ما ۱۸ ستون و ۴ سطر داریم!
هدر جدول هم که مشخصه!

خب بسم الله!
چطوری باید بنویسیمش؟!
آهان!
این دیگه جزء تمرین های این جلسه است...

تمرین

[تصویر: 09_tamrin.png]

۱. لطف می فرمایید این جدول رو طراحی می فرمایید:
* البته بدون رنگ آمیزی! فعلاً دنبال محتواییم کاری به رنگ و لعاب نداریم...

[تصویر: 08_table-count.png]

۲. لطف می فرمایید این جدول رو هم بر پایه توضیحات ارائه شده در درس مخصوصاً colspan و rowspan طراحی می فرمایید.

[تصویر: 06_rowspan.png]

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

التماس دعا

سلام دوستان
من برای سایتمون ترجمانو که برای ترجمه مقاله سفارش ترجمه ترجمه متن تخصصی و سفارش انلاین ترجمه هست نیاز به یه طراح برای طراحی مجدد سایت دارم افرادی که توانایی دارن به ما ایمیل بزنند لطفا tarjomano@gmail.com

صفحه: 1 2