آموزش برنامه نویسی وب - ایستگاه اول:html(جلسه ی هفتم)

**HELT** · 2015/07/04, 03:02

سلام! خب بالاخره شروع شد!
با اولین جلسه از آموزش اچ تی ام ال در خدمت شما هستیم!
خب با اجازه بزرگان جمع بریم سر اصل مطلب!:
اول از همه چند نکته بگم:
1- از پرسیدن هیچ سوالی نترسید! بترسید می کشمتون! هر کسی هم که کسیو تو کلاس من(

) مسخره کنه می کشمش!
2- اگه دوس داشتین خوب یاد بگیرین تمرین هایی که میگم رو انجام بدین تا خوب درک کنین مسائل رو... این تمرین ها با عنوان "

خودتان تمرین کنید:

" قرار داده خواهد شد!
3- امیدوارم معلم خوبی باشم!

و بتونم سوالاتتون رو جواب بدم!

جلسات:

جلسه اول: تاریخچه، ساختار کلی و تگ P
جلسه ی دوم: تگ های img , a, h
جلسه ی سوم: معرفی خواص

تگ ها

جلسه ی چهارم: معرفی استایل

جلسه ی پنجم: تگ های مربوط به شخصی سازی متن و کامنت ها

جلسه ی ششم: توضیحی بر سی اس اس!

جلسه ی هفتم: لیست ها

**HELT** · 2015/07/04, 14:25

جلسه اول:

اول از همه یه تاریخچه ی کوچیک!:
زبان نشانه‌گذاری ابرمتنی یا زنگام (و باز هم فرهنگستان زبان و ادب پارسی

) یا اچ‌تی‌ام‌ال، HTML یا HyperText Markup Language در کنار سی‌اس‌اس هستهٔ فناوری ساخت صفحه‌های وب هستند. اچ‌تی‌ام‌ال زبان توصیف ساختار صفحه‌های وب است. زبانی‌است برای نشانه‌گذاری ابرمتن که برای تدوین قالب و طراحیصفحه‌های وب به کار می‌برند. دستورعمل‌های این زبان، برچسب (Tag) نام دارند که محتوای یک صفحهٔ وب، با آن‌ها، نشانه‌گذاری شده و بدین‌ترتیب، نحوهٔ نمایش آن صفحه برای مرورگرهای وب، توصیف می‌شود.
این زبان در خلال دهه ۹۰ توسط دنیس ریچی ابداع شد.
تاکنون نسخهٔ ۵ آن عرضه است.
هر یک از برچسب‌های اچ‌تی‌ام‌ال، معنا و مفهوم خاصی دارند و تأثیر مشخصی بر محتوا می‌گذارند؛ مثلاً برچسب‌هایی برای تغییر شکل ظاهری متن، نظیر درشت و ضخیم کردن یک کلمه یا برقراری پیوند به صفحات دیگر در اچ‌تی‌ام‌ال تعریف شده‌اند.
یک سند اچ‌تی‌ام‌ال، یک پروندهٔ مبتنی بر متن (Text–based) است که معمولاً با پسوند .htm یا .html نام‌گذاری شده و محتویات آن از برچسب‌های اچ‌تی‌ام‌ال تشکیل می‌شود. مرورگرهای وب، که قادر به درک و تفسیر برچسب‌های اچ‌تی‌ام‌ال هستند، تک‌تک آن‌ها را از داخل سند اچ‌تی‌ام‌ال خوانده و سپس محتوای آن صفحه را نمایان‌سازی (Render) می‌کنند.
اچ‌تی‌ام‌ال زبان برنامه‌نویسی نیست(همونطور که سهداب جان گفت)، بلکه زبانی برای نشانه‌گذاری ابرمتن است و اساساً برای ساخت‌مند کردن اطلاعات و جدایش اجزای منطقی یک نوشتار — نظیر عناوین، تصاویر، فهرست‌ها، بندها و جداول — به کار می‌رود. از سوی دیگر، اچ‌تی‌ام‌ال را نباید به عنوان زبانی برای صفحه‌آرایی یا نقاشی صفحات وب به کار بُرد؛ این وظیفه اکنون بر دوش فناوری‌های دیگری همچون سی‌اس‌اس است.

خب سوالی که نیست؟! اگه هست بپرسین!

یه نکته اینکه شما برای نوشتن فایل های html از هر ادیتوری می تونید استفاده کنید!
مثل sublime text و Atom من از سابلایم استفاده می کنم ولی خب فارسی رو خوب نشون نمی ده!
ولی موقع نشون دادن فایلتون توی مرورگر فرقی نمی کنه! هر جور مایلید! ولی خب سابلایم سبک تر هست! برای همین لینکشو میزارم:

Download Sublime Text

بریم سراغ اصل آموزش:

زبان اچ تی ام ال همونطورکه اون بالا خوندین از تگ تشکیل شده، من این تگ ها رو معرفی می کنم و طرز کارشون رو میگم:

اول از همه هر تگی به صورت زیر نوشته میشه:

کد HTML:

 <tagname><\tagname>

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

کد HTML:

<html>

<head>
  <title></title>
</head>

<body>

</body>

</html>

تگ html برای اینه که مرورگر بفهمه یه سری دستور اچ تی ام ال داره شروع میشه و توی همه ی فایل های html باید باشه.
تگ head مربوط به یه سری اطلاعات در باره ی صفحه است از جمله عنوان صفحه که اگه یه متن توی تگ "title" بنویسین اون بالا توی مرورگر به عنوان عنوان صفحه تون نشون میده!
تگ body هم مربوط به محتویات صفحه است که خیلی باهاش کار خواهیم داشت! و همونطور که گفتم همه ی تگ ها باید بسته بشن!( هنوز به اون استثنا ها نرسیدیم!)
برای تمرین توی تگ body این رو اضافه کنین:

کد HTML:

<p> salam in avvalin safheye html man ast! boro va besooooooooooooz! :D</p>

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

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

سلام

اولا ممنون از شروع خیلی خوبت ابراهیم جان امیدوارم همینجوری ادامه بدی.

دوما همون طور که ابراهیم گفت شما از هر ادیتوری میتونید استفاده کنید. از همون Notepad ویندوز گرفته تا ادیتور های مختلف.
الانم اگه نمیخواید ادیتور دانلود کنید از همون Notepad ویندوز استفاده کنید و فایلتونو با پسوند .htm یا .html ذخیره کنید. یا برید اینجا و سمت چپ کدتونو بنویسید. بعد روی "See Result" کلیک کنید و سمت راست نتیجه کدتونو ببینید.

موفق باشید!

**HELT** · 2015/07/04, 23:57

نوشته اصلی توسط Cyrus-The-Great

سلام

اولا ممنون از شروع خیلی خوبت ابراهیم جان امیدوارم همینجوری ادامه بدی.

دوما همون طور که ابراهیم گفت شما از هر ادیتوری میتونید استفاده کنید. از همون Notepad ویندوز گرفته تا ادیتور های مختلف.
الانم اگه نمیخواید ادیتور دانلود کنید از همون Notepad ویندوز استفاده کنید و فایلتونو با پسوند .htm یا .html ذخیره کنید. یا برید اینجا و سمت چپ کدتونو بنویسید. بعد روی "See Result" کلیک کنید و سمت راست نتیجه کدتونو ببینید.

موفق باشید!

اولا خواهش می کنم علیرضا جان
دوما ممنون از یاد آوریت!
راستی بچه ها w3schools ینی همین سایتی که ادیتورش رو علیرضا گذاشته سایت خیل خوبیه برای پیدا کردن اطلاعات مختلف!
در ضمن! من تا مطمئن نشم شما دارید آموزش ها رو دنبال می کنید و سوالی ندارید نمی رم سراغ آموزش بعدی... و ناراحت میشم از دست کسایی که ثبت نام کردن! ولی هیچ حرفی تا حالا نزدن!
منتظرم!

**Moahedeh** · 2015/07/05, 00:16

چیزه ابی ... من یه چیز فارسی نوشتم ولی نشون نداد درست. انگلیسی ولی نشون داد. چیکار کنم ک فارسی هم بشه؟ فعلن هم از نوتپد دارم استفاده میکنم

+ چرا تگ تایتل باید توی تگ هد باشه؟
+ توی هر تگی، برای اون تیکه ای ک تموم میشه (باب همون دومیه دیگه!) حتمن همیشه باید اسلش ( / ) داشته باشه؟

**the ship** · 2015/07/05, 01:12

مرسی ابرهیم جان

من نفهمیدم این p که اولش نوشتی چیه؟.مگه نباید بنویسی html?

**moonlightsky** · 2015/07/05, 01:52

سلام دستت درد نکنه
ببخشید زودتر نمی تونستم بیام
خوب من ادیتور دیگه فعلا نداشتم از notepad استفاده کردم اینایی که گفتی رو انجام دادم یه چندتا چیز دیگه ام بهش اضافه کردم ببین درسته

خوب این متنم توی notepad هست.

<html>

<head>
<title>avalin kar man</title>
</head>

<body> salam in avvalin safheye html man ast! boro va besooooooooooooz! :D khat dovom 

</body>

</html>

اینم شکل کارم

پس از سعی و خطا فهمیدم به اون p ها توی title نیازی نیست.
بعد یادم افتاد این p/ مثل هموناییه که توی c++ بود یعنی ایجاد پاراگراف جدید (که p حرف اول پاراگراف به انگلیسیه) بعد برای اینکه ببینم درست فهمیدم اون دومی رو ایجاد کردم.
حالا استاد بگو درست فهمیدم یا نه؟

**HELT** · 2015/07/05, 06:02

نوشته اصلی توسط Moahedeh

چیزه ابی ... من یه چیز فارسی نوشتم ولی نشون نداد درست. انگلیسی ولی نشون داد. چیکار کنم ک فارسی هم بشه؟ فعلن هم از نوتپد دارم استفاده میکنم

خب این مشکل خاصی نیست
این به خاطر اینه که مرورگرت نمی دونه که تو قراره از چه نوع Encoding ای استفاده کنی مشکل به راحتی با اضافه کردن کد زیر به تگ head حل میشه. همونطور که گفتم تگ head مربوط به یه سری اطلاعات در مورد صفحه است که خب encoding هم اطلاعات محسوب میشه:

کد HTML:

<head>    <title>عنوان</title>    <meta charset="utf-8"></head>

*در مورد تگ meta بعدا توضیح میدیم فقط بدونین که تگیه که نیاز به بسته شدن نداره و در مورد اطلاعاتی از صفحه است.
+ چرا تگ تایتل باید توی تگ هد باشه؟ چون یه اطلاعات در مورد صفحه است.

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

+ توی هر تگی، برای اون تیکه ای ک تموم میشه (باب همون دومیه دیگه!) حتمن همیشه باید اسلش ( / ) داشته باشه؟ بله حتما باید داشته باشه چون این علامت به معنای بسته شدن یک تگ هست و اگه نباشه یک تگ دیگه شروع می شه.

خب سوال اول با تشکر پاسخ داده شد!

- - - - - - - - - به دلیل ارسال پشت سر هم پست ها ادغام شدند - - - - - - - - -

نوشته اصلی توسط the ship

مرسی ابرهیم جان

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

اگه نفهمیدی بگو که بیشتر توضیح بدم!
مرسی از سوالت.

- - - - - - - - - به دلیل ارسال پشت سر هم پست ها ادغام شدند - - - - - - - - -

نوشته اصلی توسط moonlightsky

سلام دستت درد نکنه
ببخشید زودتر نمی تونستم بیام

خواهش می کنم
خوب من ادیتور دیگه فعلا نداشتم از notepad استفاده کردم اینایی که گفتی رو انجام دادم یه چندتا چیز دیگه ام بهش اضافه کردم ببین درسته

خوب این متنم توی notepad هست.

<html>

<head>
<title>avalin kar man</title>
</head>

<body> salam in avvalin safheye html man ast! boro va besooooooooooooz! :D khat dovom 

</body>

</html>

اینم شکل کارم

پس از سعی و خطا فهمیدم به اون p ها توی title نیازی نیست.بله من که گفتم شما هر متنی اونجا بنویسی میشه عنوان صفحه ات!
بعد یادم افتاد این p/ مثل هموناییه که توی c++ بود یعنی ایجاد پاراگراف جدید (که p حرف اول پاراگراف به انگلیسیه) بعد برای اینکه ببینم درست فهمیدم اون دومی رو ایجاد کردم.دقیقا! احسنت!
حالا استاد بگو درست فهمیدم یا نه؟

کتک می خوای؟!

سوال دیگه ای بود بپرسید بچه ها!
هر کسی هم که جواب سوالش رو نگرفت دوباره بپرسه! نترسین!

**Magystic Reen** · 2015/07/05, 09:48

سوال خاصی نبود. اینم کارم که نگید الکی میگه

<html>

<head>
<title> Avalin Code Nevisi </title>
</head>

<body>

 Shoro mikkonim 

</body>

</html>

- - - - - - - - - به دلیل ارسال پشت سر هم پست ها ادغام شدند - - - - - - - - -

یه چیزه دیگه این که ادیتور عنوان رو نشون نمیده

**H.A.M.I.D** · 2015/07/05, 10:56

نوشته اصلی توسط narsisa

سوال خاصی نبود. اینم کارم که نگید الکی میگه

<html>

<head>
<title> Avalin Code Nevisi </title>
</head>

<body>

 Shoro mikkonim 

</body>

</html>

- - - - - - - - - به دلیل ارسال پشت سر هم پست ها ادغام شدند - - - - - - - - -

یه چیزه دیگه این که ادیتور عنوان رو نشون نمیده

نبایدم نشون بده.فایل رو با پسوند htm یا html ذخیره و در مرورگر اجرا کنید

**Moahedeh** · 2015/07/05, 17:44

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

اون چیه؟

+ "به عنوان مثال یکی از بارز ترین کاربرد های تگ head اینه که شما میتونید کلید واژه هایی که تو صفحه تون هستن رو وارد کنین. گوگل می گرده توی کلید واژه های سایت ها و چیز سرچ شده رو پیدا می کنه!"
اینی که گفتی یعنی چی؟

زندگی پیشتاز

یکی از برترین سایت‌های ترجمه و تالیف کتاب در کشور

تـــوجـــه

تـــوجـــه

موضوع: آموزش برنامه نویسی وب - ایستگاه اول:html(جلسه ی هفتم)

ابزارهای موضوع

جستجو موضوع

نحوه نمایش موضوع

آموزش برنامه نویسی وب - ایستگاه اول:html(جلسه ی هفتم)

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

موضوعات مشابه

آموزش فارسی برنامه نویسی اندروید از شرکت لیندا

اموزش داستان نویسی "دیالوگ نویسی"

فراخوان-آموزش برنامه نویسی وب

آموزش برنامه نویسی - نظر سنجی بسته شد

اموزش برنامه نویسی مبتدی

کلمات کلیدی این موضوع

مجوز های ارسال و ویرایش

درباره زندگی پیشتاز

پیوندها