با عرض سلام و خسته نباشید! تو سری تاپیکای مکتب خونه میخواییم! یه سری زبانها رو به صورت درست حسابی و با سازماندهی براتون بذارم! سعی میشه هر کدوم از پستای این تاپیک کوتاه!:bucktooth: رنگی رنگی! روون! و غیر کپی پیست باشه! منبع رو کنسرسیوم دبلیوتری انتخاب کردم! و سایت هایی درکنارش!:barefoot: لطفن اگر سوالی پیش اومد بپرسین فقط! و از زدن پستهای دیه خودداری کنید!:banghead: تا نظم این تاپیک به هم نخوره!:astronaut: با تشکر! عافتابگردون!
خب اول هرکاری باعد شناخت باشه!! HTML یه زبان نشانه گذاری عه! (تکراری ترین جمله درباره ی این خانواده) و بسی ساده عو مهم عو این حرفاعه! برای نوشتن صفحات وب! نیاز به یه محیط داریم! میدونید که میشه از نوت پد استفاده کرد! یعنی یه فایل باز کنید نوعشو All File کنید!!! و با پسونده html. فایل رو سیو کنید!مثلن اگر اسمش home هست بنویسیدhome.html. دقت کنید تو اسم پیجتون از نقطه استفاده نشه! یعنی غلطه که بنویسید home.page.html دقت کنید باعد چیزی که سیو کردین عایکونِ مرورگر عه پیش فرضتون شده باشه! و روش که میزنین یه صفه ی سفید باز شه! خب تبریک میگم!!! فایل ایجاد شد!! اما اگه بتونین یه مفسر مثل BRACKET رو تهیه کنین براتون کد زدن شیرین تر خواهد شد!! و اما بخش های اصلی یه سند HTML به طور زیر میشه! یه < DOCTYPE html!> اولش مینویسیم! یه تگ html به دو قسمت هد و بادی تقسیم میشه!! تو پست بعدی موارد بالا عو تعریف میکنم!:rolleyes:
از چیزایی مثل اینکه تاریخچه ی این زبان نشانه گذاری چیه عو اینا:confused::confused: گذر میکنیم میریم سر اصل مطلب!:cool: خب حالا باید یه چیزایی رو تعریف کنیم که بشه رفت جلو! 1-تگ: تگ ها یه طورایی عکلگر یا نشنانه هستن که یهه تاثیرایی میذارن! اغلبم جفت هستن! یعنی تگ شروع و تگ پایانی دارن ! مثلنی!: <tag name>....content....< /tag name> خب الگوی زیر برای همه اسناد HTML صادقه!:bucktooth: به تگ اول بدون علامت / میگن start tag و به دومی که / داره میگن end tag و فقط فرقشون تو همون یه دونه / هستش! 2-جفت تگ <head>: این جفت تگ توش اطلاعاتی از پیج مینویسیم! مثلنی: متا تگ ها که توضیحاتی در مورد دیگر تگ ها هستن! نویسنده ی صفحه کیه! کلیدواژع هاش چی اند؟! قدیما اینم مینوشتیم که هر چند ثانیه یه بار رفرش شه و ... جز موارت بالا که مربوط به متا تگ ها بودن! اینا هم تو هد مینویسیم!:cautious: زبان این صفحه چی هستش؟!:rolleyes: امممم!! Charset را مشخص میکنیم که برای ما پارسی زبانان UTF_8 هستش! title رو مشخص میکنیم!!مثلن تایتل این صفه همونی عه که بالا نوشته (:--(مکتب خونه:HTML:)--!)|انجمن تاپ فروم ! 3- جفت تگ <body>: اینجا باید چیزایی که قراره نشون داده بشن عو بنویسیم! 4- تگ تکی عه <DOCTYPE!> : این تگ تنها مشخص میکنه که این فایل از انواع دیگر مانند مدیا عو غیره نیست و document هستش!!:ninja::ninja:
خب دیگه وقتشه شروع کنیم کد بنویسیم!!:sneaky: برای این موضوع مهم!! باید ابتدا یه سری عناصر ابتدایی رو یاد بگیریم! اولیش Heading: این هدینگ ها تو فروم خودمون هستش!! همین فونت سایزهای یک تا شش که داریم همین هدینگ ها هستن!! یه نکته ی به شدت مهم اینه که! درسته که هدینگها متن را BOLD و بزرگ میکنن! اما تو طراحی نباعد برای این کار ازشون استفاده کرد! چون موتورهای جستجو خزنده هایی برای جمع کردن اطلاعات در صفحه ها میفرستند و این خزنده ها به جفت تگ های این هدینگ حساسن! یعنی اگر جایی جفت تگ <h1> ببینند برش میدارن!! و همینطور بقیه ی تگ های هدینگ! حالا فکر کنید یه تیکه ی بدرد نخور اینطور باشه! چه قدر بده! برای بزرگ یا BOLD کردن از CSS باید استفاده کنیم! مثال این Heading ها هم به طور زیر هستش: متن مخفی: مثال Heading https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic_headings دومیش پاراگراف: جفت تگ پاراگراف باعث میشه ایجاد یه Enter میان متن میشه! یعنی میره سر خط!!! مثال Paragraph به طور زیر هست! و توضیح خاصی نداره!:coffee: متن مخفی: مثال Paragraph https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic_paragraphs سومیش لینک هستش! لینک ها خیلی مهم هستن!:cool: یعنی میشه گفت خیلی چیزا رو شاخ ایناس!! لینک جفت تگ هستش! و وسط دوتا تگ هاش اون چیزی که باید لینک رو نمایش بده رو مینویسیم! مثلن اینجا تو یوزر نیم من عافتابگردون باید بره وسط جفت تگ که لینک پروفایلم توش ریخته بشه! که مداش بعه طور زیر هستن: متن مخفی: مثال Links https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic_link لینک ها دو جور هستن گاهی عادرس چیزی توی لینک باید از سیستم شخصی طرف باشه!:barefoot: برای این جور لینک ها رو باید به طور داس طوری عادرس نویسی کنیم!:barefoot: جور دیگه ای هم هست! که به یه جای جز سایتی که توش هستیم میریم! مثلاً همین بنر تبلیغاتیه!!! که از سایت خارجتون میکنه! اینا فقط تو بخش href باید آدرس URLشو بنویسیم!!:android: در پست های بعدی به مفاهیم عادرس نویسی و چیزایی مثل href و بقیه میرسیم! و فقط حالا ها بهتره به لینک های نوع دوم تو کد نویسی توجه کنیم!:bucktooth::bucktooth::bucktooth: فقط در همین حد بگم که Attribute ها اطلاعاتی به تگ ها اضافه میکنیم!:angelic: سومیش عنصر مورد علاقه ی همه عکس هست! عکس ها دارای 2 تا Attribute هستن! alt: این attribute برای روز مبادا هستش!:rolleyes: خیلی هم تو سئو مهمه! و کوتاه شده ی Alternative text هستش! و اگه یه وقتی عکسی لود نشده باشه! این نوشته جاش میاد!و باعث میشه یوزر بدونه که چی رو ندیده! و گنگ نمونه!:ninja::ninja: src: اینجا عادرس نویسی باید بکنیم! و باز هم میگم که مثل همون لینک هستش داستان عادرس ها! و مثالش: متن مخفی: مثال Image https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic_img بقیه ی چیزایی که توی مثال میبینید (طول و عرض) رو ما توی CSS مشخص میکنیم!:speechless::speechless::speechless:
و اما یه سری چیزاعه مهم!!! اولیش قانون تعداد فاصله در HTML اینه که:bucktooth: شما اگر بین دوتا کاراکتر بیست تا space bar بزنین! نمایشش فقط یک space bar هستش! همنجا تو پیام پروفا امتحان کنید! برای فاصله های بیشتر باید از کدهای دیگه ای استفاده کنیم! و عادرس نویسی داس در پست بعدی توضیح داده میشه!
خب این پست بسیار مهمه! و همینطور ساده! عادرس نویسی عه داس! خب فرض کنید شما در درایو C در پوشه ی My Html یه سند html داشته باشین! و اون پوشه در یه پوشه مثل my project باشه! و در پوشه ی my html دو تا پوشه ی دیگه مثل Img1 و webpic باشه!! در پوشه ی my projct صمن پوشه ی My Html پوشه ی My Style داریم!!! موارد زیر رو تونستین فرض کنید!؟ خب! میخواییم برای موارد زیر عادرس بنویسیم! اگر سند در پوشه ی my html باشد. 1-فایلی در Img1 Address: Img1/file name.file type2- فایلی در my html Address: file name.file type3-فایلی در my project Address: ../file name.file type4- فایلی در خارج از my project Address: ../../file name.file typeنتیجه: برای برگشت به عقب از دو تا نقطه و یه اِسلَش استقاده میکنیم!!!:geek::geek::geek: و برای هر قدم یه عقب ! یکی از اونا مینویسیم!:ninja::ninja::ninja:
حالا نوبت یاد گرفتن یه سری قانون عو تذکر عو این حرفاست!! اولیش: آقا کد رو با حرف کوچیک بنویسین!!! جز اون DOCTYPE اولش !!:barefoot::barefoot: این اجباری نیست! و html یه زبان case sensitive نیست!!! امااااااااااا!!! بهتره!! که کد کوچیک باشه!!!:coffee: دومیش: گفتیم یه سری تگ ها جفت تگ هستن!!! یه start tag و یه end tag دارن!!! تو نسخه های جدید html نوشتن end tag اجباری نیستش! ولی اگر تگ های عاخر عو ننویسید!!! ممکنه که در کد نویسی های بزرگ فاجعه به بار میاد! :banghead::banghead::banghead::astronaut::astronaut::speechless::speechless::speechless: هرچند در کدهای کوچیک بازم امکان رخ دادن اتفاقات نامطلوب رو داریم!:speechless::speechless::speechless::speechless::speechless: سومیش: تگ های تکی! یا empty tags الگوی <tag name> رو دارن! اما بهتره که به صورت </tag name> نوشته بشه! چهارمیش: تگ های تو در تو Nested Tag ::ninja: لب مطلب میشه تگ ها نباید هم دیه رو قطع کنن! مثل همه ی زبانها!!! یعنی اینکه! مدل زیر غلطه <h1> <p> </h1> </p> ولی درستش اینطوره که!!! <h1> <p> </p> </h1>این قوانین برای استاندارد شدن کد برای مراحل بعدی است!
خب امروز نوبت صحبت در باره ی Attribute هاست!! اینها یه بخش از تگ هستن! که داخل تگ شروعی! قرار میگیرن، اگر تگ دوتایی باشه! و در حالت تگ های منفرد هم توی همون یه دونه تگ میوفته! این attribute ها خیلی چیزای مفیدی اند!!! و کلــــــــــ:speechless::speechless::speechless:ـــــــــــــــی نوع دارند!!!ead: الگوی استفاده از Attributes به طور زیر هست! <start tag name="value">........</end tag>خب name همون اسم attribute هستش و value اون تنظیماتی هس که باید اعمال بشه!!:barefoot: معرفی attribute تموم شد! یه سری از مهم ها و ابتدایی هاشونو که تا اینجام دیدیمشون رو معرفی میکنم!:coffee::coffee: href Attribute : برای دادن عادرس به لینک ها هستش!:cautious: عادرساش هم میتونه URL باشه یا نباشه!! :cool: مثالش: متن مخفی: مثال href https://www.w3schools.com/html/tryit.asp?filename=tryhtml_attributes_link src Attribute : برای مشخص کردن منبع فایل هاست!!:android: و عادرساشم بازم میگم میتونه URL باشه یا نباشه!!:bucktooth: مثالش: متن مخفی: مثال src https://www.w3schools.com/html/tryit.asp?filename=tryhtml_attributes_img_src تذکر: دقت کنین هر دوتاشون عادرس میپذیرن! ولی اولی همش مربوط به لینکاس! ولی دومی منبع فایل هاس!! و مورد استفادشون بسی فرق میکنه!:angelic::angelic::angelic::angelic: قبلتر هم هم گفتم برای مشخص کردن طول یا عرض یه attribute داشتیم! ولی ازش استفاده نمیکنیم!:ninja::ninja::ninja: مگر اینکه هیچ جور نشه!! یعنی باس اوضاع خیلی داغون باشه در طراحی هاتون ازش استفاده کنین!! بهتره در css بیرونی مشخص کنیم که طول و عرض چقدره!!:giggle: ولی مثالش رو بیایید یه نگاه بندازیم! برای اینکه طراحی های اولیه عه عادم خوب درعاد چیز خوبیه!!:coffee::coffee::coffee::coffee: متن مخفی: مثال طول و عرض https://www.w3schools.com/html/tryit.asp?filename=tryhtml_attributes_img خب! یه تذکر!! این دوتا طول عو عرض که در attribute بر حسب پیکسل و از پیش برنامه ریزی شده هستن!:rolleyes::rolleyes: اما همین طول عو عرض در css بیرونی هیچ واحدی ندارن! و میتونین به صلاح یکیو خودتون انتخاب کنین!:rolleyes::rolleyes: خب alt attribute رو یه بار توضیح دادمش! اما! اون دفعه عکسه لود شد و شما ندیدین کارکردشو! این بار همون مثال بالایی عو میبینیم بدون لود عکس! مثال: متن مخفی: مثال alt https://www.w3schools.com/html/tryit.asp?filename=tryhtml_attributes_alt_error Attribute ای برای زبان!!:astronaut::astronaut: برای مشخص کردن! زبان صفحه میتونید! از تکه کد زیر کمک بگیرید!! :cautious::cautious::cautious: مثال: <DOCTYPE html!><html lang="en-US"> <body> ... </body> </html> style attribute این برای وارد کردن css درون خطی عه!:wonder::wonder::wonder: و بعدن در یه پست جدا درموردش میحرفیم!!:alien::alien: متن مخفی: مثال style https://www.w3schools.com/html/tryit.asp?filename=tryhtml_attributes_style title Attribute : یه تایتل تو هد داشتیم که توضیح دادم!! یه تایتل دیه هم داریم که به صورت زیر عمل میکنه شما داخل value عه title attribute یه چی بنویسید! وقتی با موس روی همون عنصر برین!! چیزی که نوشتین رو نشون میده! مثال: متن مخفی: مثال Title https://www.w3schools.com/html/tryit.asp?filename=tryhtml_attributes_title به متنی که نشون میده هم میگن!! tooltip از نمونه های tooltip اینه که با موس که برید روی عاباتارا !! توی یه tooltip نام کاربری طرف رو میبینید! در پست بعدی یه سری تذکر در مورد attribute میگم بهتون!
تذکرات attributes! دیدم مقدار attribute value را در کوتیشن میذاریم!! در نسخه ی HTML5 اصلا گذاشتن کوتیشن ننویسین هم براش مهم نیس!! یعنی اینجوری!! مثال: متن مخفی: No Quotation https://www.w3schools.com/html/tryit.asp?filename=tryhtml_attributes_noquotes کنسرسیوم W3C روی این کوتیشنها خیلی سخت گیره! به علت اینکه میتونه خرابکاری کنه! گاهی در حد فاجعه! مثالشو در زیر میبینیم! متن مخفی: مشکل ایجاد شده https://www.w3schools.com/html/tryit.asp?filename=tryhtml_attributes_error دیدیم که عبارت W3Shools را نمیبینیم! اما کی جفت کوتیشن!؟ و کی تک کوتیشن؟!:wonder::wonder::wonder: در حالت کلی هردوش اکی هست هم " و هم ' هردوش کار میکنه اما اگر متن tooltip خودش کوتیشن داشته باشه! بهتره برای متن از کوتیشن متفاوتی نسبت به attribute استفاده شه! مثال: <' p title='John "ShotGun" Nelson>و <" p title="John 'ShotGun' Nelson>
پست اخیر کمی شلغم ترشی است! در مورد Headingها و اهمیتشون برای موتور جستجو گفتم! تذکر فوق مهم تکراری:confused:: برای بزرگ و BOLD کردن نوشته هاتون از heading استفاده نکنین!! در ادامه میخام یکی از چیزای دیگه رو بگم!!:geek: میتونین خط افقی بذارید با استفاده از تگ منفرد! </hr> :coffee::coffee: یاد عاوری: برای اینکه نوشته های فارسی یا غیر انگلیسیتون در همه ی مرورگرها نشون بده به طور زیر charset رو UTF-8 بنویسید! مثال: متن مخفی: مثال Charset https://www.w3schools.com/html/tryit.asp?filename=tryhtml_headings_head پیشنهاد: برای دیدن کدهای هر صفحه ی وب اگر کلیک راست کنید و در کروم مورد view page resource استفاده میکنیم!:rolleyes::rolleyes::rolleyes: در اینترنت اکسپلورر هم میشه page resource رو بزنید!:sneaky::sneaky::sneaky: بازم پیشنهاد: برای دیدن عناصر HTML و کارکردنشون!! یه جای خالی بازم راست کلیک کنید! گزینه ی Inspect یا Inspect Element رو انتخاب کنید.
