آگاه‌سازی‌ها
پاک‌کردن همه
آموزشگاه
68
ارسال
16
کاربران
204
Reactions
205.4 K
نمایش
شروع کننده موضوع 1394/04/13 02:02
سلام! خب بالاخره شروع شد!
با اولین جلسه از آموزش اچ تی ام ال در خدمت شما هستیم!
خب با اجازه بزرگان جمع بریم سر اصل مطلب!:
اول از همه چند نکته بگم:
1- از پرسیدن هیچ سوالی نترسید! بترسید می کشمتون! هر کسی هم که کسیو تو کلاس من(:دی) مسخره کنه می کشمش!
2- اگه دوس داشتین خوب یاد بگیرین تمرین هایی که میگم رو انجام بدین تا خوب درک کنین مسائل رو... این تمرین ها با عنوان "
خودتان تمرین کنید:
" قرار داده خواهد شد!
3- امیدوارم معلم خوبی باشم!:دی و بتونم سوالاتتون رو جواب بدم!
جلسات:
شروع کننده موضوع 1394/04/13 13:25
جلسه اول:
اول از همه یه تاریخچه ی کوچیک!:
زبان نشانه‌گذاری ابرمتنی یا زنگام (و باز هم فرهنگستان زبان و ادب پارسی
) یا اچ‌تی‌ام‌ال، HTML یا HyperText Markup Language در کنار سی‌اس‌اس هستهٔ فناوری ساخت صفحه‌های وب هستند. اچ‌تی‌ام‌ال زبان توصیف ساختار صفحه‌های وب است. زبانی‌است برای نشانه‌گذاری ابرمتن که برای تدوین قالب و طراحیصفحه‌های وب به کار می‌برند. دستورعمل‌های این زبان، برچسب (Tag) نام دارند که محتوای یک صفحهٔ وب، با آن‌ها، نشانه‌گذاری شده و بدین‌ترتیب، نحوهٔ نمایش آن صفحه برای مرورگرهای وب، توصیف می‌شود.
این زبان در خلال دهه ۹۰ توسط دنیس ریچی ابداع شد.
تاکنون نسخهٔ ۵ آن عرضه است.
هر یک از برچسب‌های اچ‌تی‌ام‌ال، معنا و مفهوم خاصی دارند و تأثیر مشخصی بر محتوا می‌گذارند؛ مثلاً برچسب‌هایی برای تغییر شکل ظاهری متن، نظیر درشت و ضخیم کردن یک کلمه یا برقراری پیوند به صفحات دیگر در اچ‌تی‌ام‌ال تعریف شده‌اند.
یک سند اچ‌تی‌ام‌ال، یک پروندهٔ مبتنی بر متن (Text–based) است که معمولاً با پسوند .htm یا .html نام‌گذاری شده و محتویات آن از برچسب‌های اچ‌تی‌ام‌ال تشکیل می‌شود. مرورگرهای وب، که قادر به درک و تفسیر برچسب‌های اچ‌تی‌ام‌ال هستند، تک‌تک آن‌ها را از داخل سند اچ‌تی‌ام‌ال خوانده و سپس محتوای آن صفحه را نمایان‌سازی (Render) می‌کنند.
اچ‌تی‌ام‌ال زبان برنامه‌نویسی نیست(همونطور که سهداب جان گفت)، بلکه زبانی برای نشانه‌گذاری ابرمتن است و اساساً برای ساخت‌مند کردن اطلاعات و جدایش اجزای منطقی یک نوشتار — نظیر عناوین، تصاویر، فهرست‌ها، بندها و جداول — به کار می‌رود. از سوی دیگر، اچ‌تی‌ام‌ال را نباید به عنوان زبانی برای صفحه‌آرایی یا نقاشی صفحات وب به کار بُرد؛ این وظیفه اکنون بر دوش فناوری‌های دیگری همچون سی‌اس‌اس است.
خب سوالی که نیست؟! اگه هست بپرسین!
یه نکته اینکه شما برای نوشتن فایل های html از هر ادیتوری می تونید استفاده کنید!
مثل sublime text و Atom من از سابلایم استفاده می کنم ولی خب فارسی رو خوب نشون نمی ده!
ولی موقع نشون دادن فایلتون توی مرورگر فرقی نمی کنه! هر جور مایلید! ولی خب سابلایم سبک تر هست! برای همین لینکشو میزارم:
بریم سراغ اصل آموزش:
زبان اچ تی ام ال همونطورکه اون بالا خوندین از تگ تشکیل شده، من این تگ ها رو معرفی می کنم و طرز کارشون رو میگم:
اول از همه هر تگی به صورت زیر نوشته میشه:
هر تگی که باز میشه باید بعدش بسته بشه به جز بعضی تگ های معدود که بعدا بهشون میرسیم!
خب قالب اصلی هر فایل اچ تی ام ال اینه:
تگ html برای اینه که مرورگر بفهمه یه سری دستور اچ تی ام ال داره شروع میشه و توی همه ی فایل های html باید باشه.
تگ head مربوط به یه سری اطلاعات در باره ی صفحه است از جمله عنوان صفحه که اگه یه متن توی تگ "title" بنویسین اون بالا توی مرورگر به عنوان عنوان صفحه تون نشون میده!
تگ body هم مربوط به محتویات صفحه است که خیلی باهاش کار خواهیم داشت! و همونطور که گفتم همه ی تگ ها باید بسته بشن!( هنوز به اون استثنا ها نرسیدیم!)
برای تمرین توی تگ body این رو اضافه کنین:
salam in avvalin safheye html man ast! boro va besooooooooooooz! 
حالا این کد رو کپی کنین و توی ادیتور تون پیست کنین. و به عنوان یه فایل با پسوند .html سیوش کنین. بعدش با مرور گرتون اجراش کنین! می بینید که چی نوشته!
حالا اون چیزی که اضافه کردید چی بود؟!
خیلی سادست! یه تگ بود از نوع پاراگراف! هر متنی توی این تگ بنویسید به عنوان یه پاراگراف توی مرورگر نشونش میده!
خب بزارید بگم برای جلسه ی اول بسه! :دی
سوالی هست بپرسید! در مورد ادیتور ها و تگ ها!
در ضمن بگم که این چیزایی که الان یاد گرفتین در مورد ساختار صفحه ی اچ تی ام ال بود!
ایشالا جلسه ی بعد در مورد تگ های مربوط به ظاهر متن خواهیم کرد.
موفق باشین!
سلام
اولا ممنون از شروع خیلی خوبت ابراهیم جان امیدوارم همینجوری ادامه بدی.
دوما همون طور که ابراهیم گفت شما از هر ادیتوری میتونید استفاده کنید. از همون Notepad ویندوز گرفته تا ادیتور های مختلف.
الانم اگه نمیخواید ادیتور دانلود کنید از همون Notepad ویندوز استفاده کنید و فایلتونو با پسوند .htm یا .html ذخیره کنید. یا برید اینجا و سمت چپ کدتونو بنویسید. بعد روی "See Result" کلیک کنید و سمت راست نتیجه کدتونو ببینید.
موفق باشید!
شروع کننده موضوع 1394/04/13 22:57
@Cyrus-The-Great 87167 گفته:
سلام
اولا ممنون از شروع خیلی خوبت ابراهیم جان امیدوارم همینجوری ادامه بدی.
دوما همون طور که ابراهیم گفت شما از هر ادیتوری میتونید استفاده کنید. از همون Notepad ویندوز گرفته تا ادیتور های مختلف.
الانم اگه نمیخواید ادیتور دانلود کنید از همون Notepad ویندوز استفاده کنید و فایلتونو با پسوند .htm یا .html ذخیره کنید. یا برید اینجا و سمت چپ کدتونو بنویسید. بعد روی "See Result" کلیک کنید و سمت راست نتیجه کدتونو ببینید.
موفق باشید!
اولا خواهش می کنم علیرضا جان
دوما ممنون از یاد آوریت!
راستی بچه ها w3schools ینی همین سایتی که ادیتورش رو علیرضا گذاشته سایت خیل خوبیه برای پیدا کردن اطلاعات مختلف!
در ضمن! من تا مطمئن نشم شما دارید آموزش ها رو دنبال می کنید و سوالی ندارید نمی رم سراغ آموزش بعدی... و ناراحت میشم از دست کسایی که ثبت نام کردن! ولی هیچ حرفی تا حالا نزدن!
منتظرم!
1394/04/13 23:16
چیزه ابی ... من یه چیز فارسی نوشتم ولی نشون نداد درست. انگلیسی ولی نشون داد. چیکار کنم ک فارسی هم بشه؟ فعلن هم از نوتپد دارم استفاده میکنم ((3))
+ چرا تگ تایتل باید توی تگ هد باشه؟
+ توی هر تگی، برای اون تیکه ای ک تموم میشه (باب همون دومیه دیگه!) حتمن همیشه باید اسلش ( / ) داشته باشه؟
1394/04/14 00:12
مرسی ابرهیم جان 
من نفهمیدم این p که اولش نوشتی چیه؟.مگه نباید بنویسی html?
StormBringer و meg واکنش نشان دادند
1394/04/14 00:52
سلام دستت درد نکنه
ببخشید زودتر نمی تونستم بیام
خوب من ادیتور دیگه فعلا نداشتم از notepad استفاده کردم اینایی که گفتی رو انجام دادم یه چندتا چیز دیگه ام بهش اضافه کردم ببین درسته
خوب این متنم توی notepad هست.
salam in avvalin safheye html man ast! boro va besooooooooooooz!
khat dovom
اینم شکل کارم
پس از سعی و خطا فهمیدم به اون p ها توی title نیازی نیست.
بعد یادم افتاد این p/ مثل هموناییه که توی c++ بود یعنی ایجاد پاراگراف جدید (که p حرف اول پاراگراف به انگلیسیه) بعد برای اینکه ببینم درست فهمیدم اون دومی رو ایجاد کردم.
حالا استاد بگو درست فهمیدم یا نه؟ ((3))
شروع کننده موضوع 1394/04/14 05:02
@Moahedeh 87192 گفته:
چیزه ابی ... من یه چیز فارسی نوشتم ولی نشون نداد درست. انگلیسی ولی نشون داد. چیکار کنم ک فارسی هم بشه؟ فعلن هم از نوتپد دارم استفاده میکنم ((3))
خب این مشکل خاصی نیست
این به خاطر اینه که مرورگرت نمی دونه که تو قراره از چه نوع Encoding ای استفاده کنی مشکل به راحتی با اضافه کردن کد زیر به تگ head حل میشه. همونطور که گفتم تگ head مربوط به یه سری اطلاعات در مورد صفحه است که خب encoding هم اطلاعات محسوب میشه:
عنوان *در مورد تگ meta بعدا توضیح میدیم فقط بدونین که تگیه که نیاز به بسته شدن نداره و در مورد اطلاعاتی از صفحه است.
+ چرا تگ تایتل باید توی تگ هد باشه؟ چون یه اطلاعات در مورد صفحه است.
نکته:بچه ها تگ head یه سری اطلاعات رو از صفحه ی ما در اختیار وب سرویس هایی مثل گوگل قرار می ده که بتونن به راحتی صفحات رو سازماندهی کنن.
به عنوان مثال یکی از بارز ترین کاربرد های تگ head اینه که شما میتونید کلید واژه هایی که تو صفحه تون هستن رو وارد کنین. گوگل می گرده توی کلید واژه های سایت ها و چیز سرچ شده رو پیدا می کنه!
این یه استفاده ساده بود از تگ هد! پس برای این جداست که به وب سرویس ها داده می شه تا شمایی از اطلاعات درون صفحه رو داشته باشن ا بتونن خوب ملت رو راهنمایی کنن!
+ توی هر تگی، برای اون تیکه ای ک تموم میشه (باب همون دومیه دیگه!) حتمن همیشه باید اسلش ( / ) داشته باشه؟ بله حتما باید داشته باشه چون این علامت به معنای بسته شدن یک تگ هست و اگه نباشه یک تگ دیگه شروع می شه.
خب سوال اول با تشکر پاسخ داده شد!
- - - - - - - - - به دلیل ارسال پشت سر هم پست ها ادغام شدند - - - - - - - - -
@the ship 87200 گفته:
مرسی ابرهیم جان
من نفهمیدم این p که اولش نوشتی چیه؟.مگه نباید بنویسی html
نه ببین هر تگی مخصوص یک کاره.
حالا اگه تو بخوای به مرورگر که صفحت رو بارگزاری می کنه بفهمونی یه فایل اچ تی ام ال داره شروع می شه از تگ html استفاده می کنی.
ولی اگه بخوای بفهمونی بهش که من اینجا یه متن دارم و می خوام اون رو به صورت پاراگراف نشون بدم از تگ p که همون مخفف paragraph ه استفاده می کنیم
همینطور هر تگ دیگه ای استفاده ی مخصوص به خودش رو داره!
اگه نفهمیدی بگو که بیشتر توضیح بدم!
مرسی از سوالت.
- - - - - - - - - به دلیل ارسال پشت سر هم پست ها ادغام شدند - - - - - - - - -
@moonlightsky 87206 گفته:
سلام دستت درد نکنه
ببخشید زودتر نمی تونستم بیام
خوب من ادیتور دیگه فعلا نداشتم از notepad استفاده کردم اینایی که گفتی رو انجام دادم یه چندتا چیز دیگه ام بهش اضافه کردم ببین درسته
خوب این متنم توی notepad هست.
avalin kar man salam in avvalin safheye html man ast! boro va besooooooooooooz!
khat dovom
اینم شکل کارم
پس از سعی و خطا فهمیدم به اون p ها توی title نیازی نیست.بله من که گفتم شما هر متنی اونجا بنویسی میشه عنوان صفحه ات!
بعد یادم افتاد این p/ مثل هموناییه که توی c++ بود یعنی ایجاد پاراگراف جدید (که p حرف اول پاراگراف به انگلیسیه) بعد برای اینکه ببینم درست فهمیدم اون دومی رو ایجاد کردم.دقیقا! احسنت!
حالا استاد بگو درست فهمیدم یا نه؟ ((3)) کتک می خوای؟! ((99))
سوال دیگه ای بود بپرسید بچه ها!
هر کسی هم که جواب سوالش رو نگرفت دوباره بپرسه! نترسین! ((99))
1394/04/14 08:48
سوال خاصی نبود. اینم کارم که نگید الکی میگه ((99))
Shoro mikkonim
- - - - - - - - - به دلیل ارسال پشت سر هم پست ها ادغام شدند - - - - - - - - -
یه چیزه دیگه این که ادیتور عنوان رو نشون نمیده
1394/04/14 09:56
@narsisa 87224 گفته:
سوال خاصی نبود. اینم کارم که نگید الکی میگه ((99))
Avalin Code Nevisi Shoro mikkonim
- - - - - - - - - به دلیل ارسال پشت سر هم پست ها ادغام شدند - - - - - - - - -
یه چیزه دیگه این که ادیتور عنوان رو نشون نمیده
نبایدم نشون بده.فایل رو با پسوند htm یا html ذخیره و در مرورگر اجرا کنید
شروع کننده موضوع 1394/04/14 14:33
@narsisa 87224 گفته:
سوال خاصی نبود. اینم کارم که نگید الکی میگه ((99))
Avalin Code Nevisi Shoro mikkonim
- - - - - - - - - به دلیل ارسال پشت سر هم پست ها ادغام شدند - - - - - - - - -
یه چیزه دیگه این که ادیتور عنوان رو نشون نمیده
پاسخ سوال داده شد. ممنون از حمید.
1394/04/14 16:44
توی سایتی که علیرضا معرفی کرد، توی تگ بادی یه سری تگ دیگه هم هست به صورت پیش فرض خودش که هرچی من لا به لاش چیز میز نوشتم چیزی نشون نداد.((228)) اون چیه؟
+ "به عنوان مثال یکی از بارز ترین کاربرد های تگ head اینه که شما میتونید کلید واژه هایی که تو صفحه تون هستن رو وارد کنین. گوگل می گرده توی کلید واژه های سایت ها و چیز سرچ شده رو پیدا می کنه!"
اینی که گفتی یعنی چی؟ :دی
meg و Cyrus-The-Great واکنش نشان دادند
1394/04/14 17:55
@Moahedeh 87253 گفته:
توی سایتی که علیرضا معرفی کرد، توی تگ بادی یه سری تگ دیگه هم هست به صورت پیش فرض خودش که هرچی من لا به لاش چیز میز نوشتم چیزی نشون نداد.((228)) اون چیه؟
من الان اون لینکو نگاه کردم. کدوم تگو میگی؟ نام ببر تا بگم.
+ "به عنوان مثال یکی از بارز ترین کاربرد های تگ head اینه که شما میتونید کلید واژه هایی که تو صفحه تون هستن رو وارد کنین. گوگل می گرده توی کلید واژه های سایت ها و چیز سرچ شده رو پیدا می کنه!"
اینی که گفتی یعنی چی؟ :دی
این کار با استفاده از تگ meta انجام میشه. همیشه از یه سری کلید واژه برای معرفی یه موضوع یا متن استفاده میشه. از اونجایی که موتور های جست و جو اول کلیدواژه ها رو میگردن، اگه شما برای صفحتون کلیذواژه تعریف کرده باشید راحت تر توسط موتور های جست و جو شناسایی میشه و باعث میشه که صفحه شما هم بالاتر نمایش داده بشه. در مورد توی head بودنشم. هر تگی میتونه تو هد به کار بره، اصلا head و Body رو ننویسی هیچ اروری به شما نمیده. اما وقتی که هد میاد توش برای پیشنیاز های صفحه استفاده میشه. به خاطر همین تگ هایی مثل title, meta و یا حتی بخش جاوا اسکریپت صفحه هم معمولا تو هد نوشته میشه.
امیدوارم کافی بوده باشه. نبود، بپرس!
1394/04/14 18:14
@Cyrus-The-Great 87256 گفته:
امیدوارم کافی بوده باشه. نبود، بپرس!
این تگ ها. جاوا اسکریپت و اینا. و توی بادی نوشته شدن نه توی هد! ((228))
Cyrus-The-Great و meg واکنش نشان دادند
1394/04/14 19:54
این تگ ها. جاوا اسکریپت و اینا. و توی بادی نوشته شدن نه توی هد! ((228))
جاوا اسکریپت توی html سه جور به کاری میره
.1-در تگ head
2-درتگ body
3-آپلود فایل با فرمت js و فراخوانی
شروع کننده موضوع 1394/04/14 20:38
علیرضا و حمید همه ی سوالا رو جواب میدن که! :دی
من چی پس؟! 
با تشکر از این دو نفر!:دی
اگه نفهمیدی بپرس!:دی
صفحه 1 / 5
بعدی
