قبل از هر چیزی باید به‌خاطر نظرها و لطف شما عزیزان تشکر کنم. دو نکته را لازم می‌دانم در ابتدا بگویم: اول اینکه تمام تلاشم را میکنم تا هر هفته دو قسمت از آموزش را آماده نمایم (به احتمال زیاد برای روزهای دوشنبه و پنجشنبه).
دوم اینکه آدرس ایمیل من Hamed.zarei@itresan.com است. اگه سوال یا مشکلی داشتید، می‌توانید در بخش نظرها بپرسید و یا حتی ایمیل بزنید.
و اما ادامه آموزش!
اول از همه، جواب تمرین جلسه اول را می‌دهم. همان طور که همگی عزیزان درست حل کردید، برای اضافه کردن یک پاراگراف دیگر کافی است یک بار دیگر از جفت تگ <p> و </p> استفاده کنید.
بنابراین کد به صورت زیر خواهد بود:
<html>
<body>
<p>My first paragraph</p>
<p>My second paragraph</p>
</body>
</html>
سوال!!
به نظر شما در HTML این امکان وجود دارد که در داخل یک تگ، از یک تگ دیگر استفاده کنیم؟!
خب کافی است خودتان امتحان کنید! یک فایل HTML خالی ایجاد کنید (همان‌طور که در جلسه اول گفته شد به‌وسیله نوت پد) و کد بالا را به‌صورت زیر تغییر دهید:
<html>
<body>
<p>My first paragraph <p>My second paragraph </p> </p>
</body>
</html>
فایل رو ذخیره کرده و باز کنید.
حال می‌توانید حتما به سوال بالا جواب بدهید. نه؟! جواب این است که بله! می‌توان تگ‌های HTML را در داخل هم به‌کار برد.
نکته مهم 1: زمانی که تگ‌ها را به‌صورت تو در تو به‌کار می‌برید (مثل کد بالا)، باید یک نکته ساده اما بسیار اساسی را به یاد داشته باشید: تگی که زودتر باز می‌شود، دیرتر بسته می‌شود!
معنی این حرف این است که کد زیر یک کد اشتباه است:
<html>
<body>
<p>
This is my first paragraph.
</body>
</p>
</html>
به این دلیل که تگ body زودتر باز شده و بعد از آن تگ p آمده است. بنابراین ابتدا باید </p> ظاهر شود و سپس </body>. اما در کد بالا اوضاع برعکس است!
نکته مهم 2: اگر پیش‌تر با یکی از زبان‌های برنامه نویسی مثل جاوا یا سی شارپ یا پاسکال یا… کار کرده باشید، حتما با مفهوم کامپایل شدن کد آشنا هستید. اما اگر از قبل تجربه برنامه نویسی نداشته‌اید، باید به زبان ساده بگویم که با کامپایل شدن، کدهای نوشته شده قبل از اجرا شدن، از نظر وجود خطاهای دستوری بررسی می‌شود (مثل اشتباه نوشتن کلمات رزرو شده و…).
از نظر دستوری، کد HTML بالا درست نیست اما باید توجه کنید که HTML فاقد کامپایلر است! یعنی چه؟!!
یک فایل خالی دیگر ایجاد کنید و کدهای بالا را عینا در آن وارد و سپس آن را باز کنید. می‌بینید که مرورگر آن را بدون هیچ مشکل یا پیغام خطایی باز می‌کند.
برای این که کمی موضوع را بیشتر متوجه شوید، این بار کدهای زیر را در فایلی جدید ریخته و باز کنید!
<html>
<body>
<p>This is a paragraph
<p>This is a paragraph
</body>
</html>
این بار هم مرورگرتان کدها را بدون مشکل و به شکل درست نمایش می‌دهد. زیرا مرورگرتان بصورت خود جوش(!) کدهای بالا را به همراه تگ‌های پایانی در نظر می‌گیرد!
اما شما به عنوان یک طراح سایت هیچ گاه نباید به این موضوع تکیه کنید! زمانی که در حال طراحی یک صفحه وب هستید تعداد تگ‌هایی که باید به‌کار ببرید گاهی بسیار زیاد خواهند شد و اگر در استفاده درست آن‌ها دقت نکنید ممکن است ایرادات ناخواسته‌ای در نتیجه به‌وجود بیاید!
زنگ تفریح!!
نوبتی هم باشه نوبته استراحته! پس پنج دقیقه استراحت کنید و بعد ادامه درس! من هم کمی استراحت کنم!
.
.
.
.
.
خب در ادامه این جلسه با مفهوم Attribute یا صفت آشنا می‌شوید.
Attribute چیست؟
• تگ‌های HTML می‌توانند صفت داشته باشند.
• صفت‌ها در واقع، اطلاعات اضافی‌تری درباره یک تگ ارایه می‌دهند!
• صفت‌ها همیشه و همیشه در تگ آغازین مشخص می‌شوند.
• ساختار صفت‌ها به‌صورت زوج‌های “نام/مقدار” بکار می‌روند.
به مثال زیر توجه کنید تا بیشتر متوجه شوید:
لینک‌ها در کد HTML به‌وسیله تگ <a> مشخص می‌شوند. آدرس لینک مورد نظر به‌وسیله صفتی به نام href مشخص می‌شود.
کد زیر را در یک فایل جدید قرار داده و اجرا کنید.
<html>
<body>
<a href=”http://www.google.com”>This is a link</a>
</body>
</html>
نتیجه مشابه تصویر زیر خواهد بود:
با کلیک بر روی لینک بالا، به سایت گوگل خواهید رفت!
در واقع، تگ a بدون صفت href نباید بکار برده شود. این href است که مشخص می‌کند آدرس لینک مورد نظر چیست!
برای امتحان کافی است یک بار تگ a را بدون صفت href به‌کار ببرید.
نکته 1: یادتان باشد که در صفت‌ها، مقدار باید همواره بین دو “ (دابل کوتیشن) و یا دو ‘ (سینگل کوتیشن) قرار بگیرد (مانند مثال href در بالا). در واقع صفت‌ها همواره به صورت زیر استفاده می‌شوند:
Name=”value”
یا
Name=’value’
نکته2: در بعضی مواقع خاص، زمانی که خود مقدار value دارای کاراکتر “ است، مجبوریم از تک کوتیشن استفاده کنیم! مثلا:
Name= ’Joe “ShotGun” Nelson’
مهمترین Attributesها:
یکی از مهمترین صفت‌ها، id است که یک نام منحصر به‌فرد برای تگ ایجاد می‌کند. مثال:
<p id=”first_paragraph”> this a paragrapgh. </p>
در مثال بالا، به پاراگراف نام first_paragraph را اختصاص داده‌ایم. با این نام می‌توان در زبان جاوا اسکریپ، جی کوئری و CSS به این پاراگراف دسترسی پیدا کرد!
نکته: زبان جاوا اسکریپ یک زبان Client-side (سمت گیرنده) است که روی مرورگر کاربر اجرا می‌شود. برعکس زبان PHP که server-side است و سمت سرور اجرا شده، نتیجه به مرورگر کاربر منتقل می‌شود.
توجه کنید که جاوا اسکریپت هیچ ارتباطی با زبان برنامه نویسی جاوا ندارد!
اگر با جاوا اسکریپت، جی کوئری، پی اچ پی، سی اس اس آشنا نیستند، نگران نباشید. برای یاد گرفتن این‌ها، ابتدا باید HTML را به‌خوبی بشناسید. ضمن اینکه، به امید خدا و اگر عمری باقی باشد پس از پایان یافتن این سری آموزش به سراغ این‌ها هم خواهیم رفت.
HTML به زبان ساده (جلسه آموزشی اول)
راستی، اگر فناوری اطلاعات در زندگی‌تون اهمیت زیادی داره، پیشنهاد میکنم تولبار آی‌تی را حتما نصب کنید: [نصب تولبار]
![[divide style=”2″]](http://itresan.com/wp-content/uploads/2012/10/2Aban.jpg){kind=link}
خداقوت .
واقعا آمزش ها عالی هستن.
به نظرم هرکی با هر سطح اطلاعات میتونه از این آموزش های بی نقص شما استفاده کنه.
موفق و پیروز باشید
سلام اگه ممکنه منو راهنمایى کنید من برنامه htmlساخت صفحه وب را مى نویسم مسیر عکس هم مى دهم ولى در موقع اجرا خود کدهایى که نوشته بودم را به جاى اجرا در وب نشان مى دهدیعنى تنها کدها دیده مىشود خیلى عجله دارم اگر ممکن هست زود جواب بدید ممنونتون میشم
راستش من خوب متوجه نشدم تو قسمته ایدی ای که ساختید….مثلا وقتی رویthis is a paragraphکلیک کنیم اون پاراگراف که توی کوتیشنه باز میشه؟؟؟:-؟
ممنون میشم اگه جواب بدید:)
This is a link
من وقتی این کد رو باز میکنم وکلیک میکنم به سایت گوگل نمیره
عالیه
مرسیییییییییییی
چندتا سوال دیگه : (یادم رف تو کامنت اول بپرسم! بوخشید!)
1) برای استفاده در جاهایی دیگه از پاراگرافی که اسمشو گذاشتیم first_paragraph باید چطور عمل کنید؟ یعنی از چه کدی استفاده کنیم تا فراخوانی بشه؟ اصلا کجاها میشه ازش استفاده کرد؟ و چه مدلی؟
2) هرموقع از id استفاده کردیم یعنی اینکه بهش اسم دادیم یا آدرس یا بخشی از حافظه رو بهش اختصاص دادیم یا چیزه دیگه؟
3) منظور از ” سمت گیرنده ” و ” سمت سرور ” چیست؟
4) چطور میتونیم ارور ها بگیرم وقتی که مرورگر هیچ ارور ی نمیده و یا در زمان ذخیره هم ارور نمیده؟
ببخشید که این همه سوال پیچتون کردم!!
خیلی خوب میشه که اینو یادمون بدین و بعدش بریم سراغ برنامه نویسی های دیگه
خیلی چیزای جالبی این دفه یاد گرفتم
مشتاق دیدن آموزش بعدی هستیم
خسته نباشید که وقت گذاشتید
سلام…
مرسی آرزو خانوم.
اگه اجازه بدی جواب این سوال ها رو توی جلسه سوم میدم. شاید سوال خیلی های دیگه هم باشه
سلام
خاهش میکنم!!
بله مشکلی نیست!هرجور صلاح میدونید.اما حتما جواب بدینا!!
منتظریم
درود
این سری هم خیلی جالب بود.
میگما یه سوال: با توضیحاتی که شما دادین برداشت من اینه که :
1)ما میتونیم دابل کوتیشن رو به جای سینگل کوتیشن هم استفاده کنیم و برعکس حالا هر جا که دلمون خواست!!!
2) برای مورده خاص هم یعنی اگه بخواهیم دابل کوتیشن رو تو صفحه نمایش نشونش بده از سینگل کوتیشن برای کل عبارت استفاده میکنم!!
عایا درست گفتم؟!؟!!؟
ممنون
تا نکته یک رو کامل فهمیدم
ولی از نکته یک به بعد رو میشه یکم بیشتر توضیح بدید
سلام و ممنون بابت لطفت!
درست متوجه نشدم کدوم قسمت رو می گی!
اگه منظورت استفاده از “تک کوتیشن” هستش باید بگم که یه زمانی که متن ما خودش دارای کاراکتر دابل کوتیشن (“) هستش! خب وقتی خود متن شامل ” باشد و ما هم در پایان متن از ” استفاده کنیم، مرورگر گیج میشه!!!
چرا؟! چون مرورگر زمان خواندن کدها برای نمایش، وقتی با اولین ” برخورد کرد، فکر می کند متن اینجا تمام می شود درصورتی این طور نیست! مثال:
name = “amir ” hossein”.
در مثال بالا، مرورگر وقتی به name می رسه انتظار یک رشته بین دو کاراکتر ” را دارد! اما اتفاقی می افته اینه که بعد از خوندن amir، به کاراکتر ” می رسه و تصور می کنه متن اینجا تموم میشه! پس مقدار name برابر amir میشه! بعد از اون، به کاراکترهای hossein می رسه و از خودش می پرسه پس این کاراکترها چی هستن؟؟؟!!!!!!!!!!!!
برای این که این اتفاقاهای ناخواسته نیوفته، از تک کوتیشن استفاده می شه!
امیدوارم خوب توضیح داده باشم! ^_^
خیلی کارتون درسته ادامه بدین. تشکر از اینکه وقت میزارین برای این آموزشها
خاهش دوست عزیز
شمام کارت درسته!
^_^