آگاه‌سازی‌ها
پاک‌کردن همه
آموزشگاه
68
ارسال
16
کاربران
204
Reactions
221.4 K
نمایش
شروع کننده موضوع 1394/04/13 02:02
سلام! خب بالاخره شروع شد!
با اولین جلسه از آموزش اچ تی ام ال در خدمت شما هستیم!
خب با اجازه بزرگان جمع بریم سر اصل مطلب!:
اول از همه چند نکته بگم:
1- از پرسیدن هیچ سوالی نترسید! بترسید می کشمتون! هر کسی هم که کسیو تو کلاس من(:دی) مسخره کنه می کشمش!
2- اگه دوس داشتین خوب یاد بگیرین تمرین هایی که میگم رو انجام بدین تا خوب درک کنین مسائل رو... این تمرین ها با عنوان "
خودتان تمرین کنید:
" قرار داده خواهد شد!
3- امیدوارم معلم خوبی باشم!:دی و بتونم سوالاتتون رو جواب بدم!
جلسات:
شروع کننده موضوع 1394/04/16 01:41
@Moahedeh 87341 گفته:
ابراهیم اینو ببین! این چرا توی عکس مجید هم اندازه ی متن اصلیش شده؟
چیزی که پویا گفت کاملا درسته. بزار به مبحث css که رسیدیم هر فونتی که می خوای می تونی روی متنت بزاری.
اینا تگ های پایه ان و برای ساماندهی همین مشکلات و کم و کاستی ها css و غیره به وجود اومدن ((71))
صبر داشته باش!
در ضمن ممنون پویا!
1394/04/16 01:52
حرف پویا رو نفهمیدم حرف خودتم نفهمیدم ابراهیم.
چیزی که من میدونم اینه: این h1 تا h6 برای تیتره. تیتر باید بزرگتر از متن باشه.
سوال: مجید سه بار از h3 استفاده کرد و توی یکیش، تیترش اندازه ی متن عادی ش بود.
:دی
سی اس اس و این چیزای سختو نگین. خیلی کوچولو و ساده جواب بده :دی
شروع کننده موضوع 1394/04/16 02:28
@Moahedeh 87345 گفته:
حرف پویا رو نفهمیدم حرف خودتم نفهمیدم ابراهیم.
چیزی که من میدونم اینه: این h1 تا h6 برای تیتره. تیتر باید بزرگتر از متن باشه.
سوال: مجید سه بار از h3 استفاده کرد و توی یکیش، تیترش اندازه ی متن عادی ش بود.
:دی
سی اس اس و این چیزای سختو نگین. خیلی کوچولو و ساده جواب بده :دی
مرورگر مجید برنامه رو خوب اجرا نکرده یا یه گیری توی برنامه اش هست.
خودت باز نویسی کن متوجه میشی
- - - - - - - - - به دلیل ارسال پشت سر هم پست ها ادغام شدند - - - - - - - - -
برای من درست کار کرد عکسش رو آپلود کردم.
مجید تو هم با اون مرورگرت...:دی
شروع کننده موضوع 1394/04/16 22:32
1394/04/17 00:12
@Moahedeh 87345 گفته:
حرف پویا رو نفهمیدم حرف خودتم نفهمیدم ابراهیم.
چیزی که من میدونم اینه: این h1 تا h6 برای تیتره. تیتر باید بزرگتر از متن باشه.
سوال: مجید سه بار از h3 استفاده کرد و توی یکیش، تیترش اندازه ی متن عادی ش بود.
:دی
سی اس اس و این چیزای سختو نگین. خیلی کوچولو و ساده جواب بده :دی
خب مشکلش چیه؟ تو متن عادی سایز مشخص نداره که. سایز هایی که میبینی یه عرف شده. تو الان تک h6 خیلی کوچیک تر از یه متن معمولیه. اینو ببین.
هیچ مشکلی نداره. اندازه نوشته توی صفحه دست خودته که یا با CSS (که بعدا یاد میگیری) تعیین میشه یا باتگ که مطئنم ابراهیم توی آموزشاش معرفی میکنه.
بازم اگه من عوضی فهمیدم بگو.
- - - - - - - - - به دلیل ارسال پشت سر هم پست ها ادغام شدند - - - - - - - - -
یه نکته دیگه:
برای تشکر نیازی به اسپم دادن نیست. دکمه "سپاس"و برای همین گذاشتن!
- - - - - - - - - به دلیل ارسال پشت سر هم پست ها ادغام شدند - - - - - - - - -
تاپیک پاکسازی شد!
شروع کننده موضوع 1394/04/18 06:30
سلام!
جلسه ی سوم رو با یه نکته شروع می کنیم!
- من توی این آموزش ها یه دونه منبع دارم اونم سایت w3schools هست! و ایشالا از این به بعد با طرح درس این سایت جلو خواهیم رفت.
تمرین هایی که میزارم هم مال همین سایته و می تونید روی همین سایت انجامشون بدید. کار خیلی راحت میشه براتون! 
خواص یک تگ: (Attributes)
- همونطور که می دونید همه ی تگ های اچ تی ام ال می تونند داری خاصیت باشند و خاصیت براشون تعریف بشه.
- خاصیت ها کارشون اینه که اطلاعات اضافه ای رو به همراه تگ برای مرورگر به همراه داشته باشن تا مرورگر بتونه به طریق دلخواه برنامه نویس صفحه رو نشون بده و در کل مثل قید می مونن برای یک فعل! :دی
- خواص یک تگ همیشه توی تگ ابتدایی و تگ شروع اون نوشته می شه.
- خاصیت ها همیشه به این صورت نوشته می شن:
content
خب حالا چند تا خاصیت معمول رو نام می برم:
- خاصیت lang:
این خاصیت متعلق به تگ هستش.
کارش هم اینه که زبان صفحه رو برای مرورگر و موتور های جست و جو مشخص می کنه تا هم کار پردازش صفحه راحت تر باشه و هم کار موتور های جست و جو.
My First Heading
My first paragraph.
برای مقدار خاصیت lang دو حرف اول زبان رو مشخص می کنن و دو حرف بعد از خط تیره لهجه و گویش رو مشخص می کنند. شما می تونین برای زبان فارسی عبارت "fa" رو برای این خاصیت قرار بدین و همین کافیه.
- خاصیت title:
اول بگم که این یک خاصیت هست و با تگ title که در head بود و عنوان صفحه رو مشخص می کرد فرق داره.
این خاصیت برای تگ p یعنی همون تگ پاراگراف استفاده می شه. و وقتی شما نشانگر موستون رو روی متن این پاراگراف قرار بدید به صورت یه متن(یا بهتره بگم tooltip) مقدار خاصیت title رو نشونتون میده. امتحان کنید.
W3Schools is a web developer's site.
It provides tutorials and references covering
many aspects of web programming,
including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.
- خاصیت href:
همونطور که می دونید خاصیت href برای لینک هستش و در html آدرس لینک ها با href شناخته می شه.
در مورد تگ a و در کل لینک ها توی جلسات بعد بیشتر صحبت خواهیم کرد.
- خاصیت های مربوط به اندازه:
منظور خاصیت های width و height هستش که فعلا توی تگ img ازشون استفاده کردیم و بعدا سر و کلشون جا های دیگه هم پیدا می شه!
در مورد تگ img و در کل عکس ها هم در آینده بیش از این بحث خواهیم کرد.
- خاصیت alt :
این خاصیت در عکس ها دیده می شه و برای وقتیه که عکس ما لود نمی شه. اون موقع به جای عکس یه"×" و مقدار این خاصیت رو مشاهده خواهیم کرد. و فایده اش هم اینه که حداقل فردی که عکس لود نشده رو می بینه یه شمای کلی از عکس رو داره مثلا عکس ماشین گذاشتید و لود نشده و طرف از روی alternative text ای که نشون داده می شه می فهمه که این عکس عکس یه ماشین بوده!
پیشنهاد:
- تگ ها و در کل خاصیت ها و کد های html رو تا جایی که لازم نباشه با حروف کوچیک بنویسید چون راحت تر و ساده تره برای تایپ! و البته مشاهده!
- مقدار هر خاصیت اون بالا که گفته شد بین دو تا دابل کوتیشن بود! ولی می تونه هم نباشه! اما پیشنهاد و مصلحت کار اینه که باشه برای اینکه زمانی که از چند تا خاصیت استفاده می کنیم مشکل پیش نیاد.
- زمان هایی که می خواید توی متنتون از سینگل کوتیشن و یا دابل کوتیشن استفاده کنید کار زیر رو بکنید:
در صورتی که متن دارای سینگل کوتیشن هست یعنی این : (')
در صورتی که متن دارای دابل کوتیشن هست: (")
حالا چند تا تمرین:
خودتان امتحان کنید:
توضیحی برای تمرین ها:
اولا بالای صفحه و زیر عنوان exercise کاری که باید بکنید رو براتون نوشته.
اگر روی دکمه ی hint کلیک کنید یه راهنمایی کوچولو و مسخره بهتون میده!:دی
اگر روی دکمه ی show answer کلیک کنید کد جواب رو بهتون نشون میده.
سعی کنید اول خودتون کدش رو بنویسید و بعد با جواب مقایسه کنید.
چند تگ کوچولو و کاربردی:
1- تگ
برای رفتن به خط بعد.
2- تگ برای بولد(پر رنگ) کردن متن.
3- تگ برای ایتالیک(کج) کردن نوشته.
4- تگ برای ایجاد نقل قول با استفاده از " .
5- تگ برای خط کشیدن روی متن.
6- تگ برای خط کشی زیر متن.
7- تگ
برای ایجاد یک خط افقی.
تمامی تگ های بالا باید باز و بسته بشن و بینشون متن باشه به جز اولی و آخری که نیازی به بسته شدن ندارن.
This is a Line break:
This is a Bold Text
This is an italic Text
This is a quoted Text
This is a wrong text
This is an Underlined Text
This is a vertical Line Text:
این تگ ها در عین سادگی بسیار مهم و کاربردی هستن پس خودتون خوب یاد بگیرید.
تمرین ها بسیار ساده هستن و وقتی نمی گیرن.
موفق باشین.
1394/04/18 12:06
شروع کننده موضوع 1394/04/18 12:58
@moonlightsky 87493 گفته:
سلام مرسی فقط یک سوال
برای بولد کردنه؟
بله توضیح نامه ی کوچیکی به جلسه ی سوم اضافه شد.
شروع کننده موضوع 1394/04/19 07:12
سلام!
خب جلسه ی چهارم هم شروع شد!
این جلسه جلسه ی مهمیه چون که مقدمه ایه برای css پس حواستونو جمع کنید.
خب بریم سر اصل مطلب:
این جلسه قراره سر style ها بحث کنیم. style چیه؟! کسی میدونه؟! :دی خب بزارید برای جلوگیری از هرج و مرج خودم بگم!:دی
استایل یعنی از لحاظ ظاهری تگمون توی چه فازیه!:دی این بهترین تعریفی بود که می تونستم بگم!:دی
از فونت گرفته تا رنگ پشت زمینه و خیلی چیزای دیگه برای هر تگ توی استایل تعریف میشه.
شاید اه های دیگه ای هم داشته باشه ولی استایل بهترین و راحت ترین کاره!
خب بزارید مثال بزنم!
I am Red
I am Blue
این کد رو امتحان کنید. یه همچین چیزی بهتون نمایش می ده:
I am Red
I am Blue
همونطور که می بینید اون بالا ما توی خاصیت استایل تگ p مون رنگ متن رو مشخص کردیم. به همین راحتی!:دی
This is a heading
This is a paragraph.
اینو امتحان کنید. همونطور که می بینیم توی تگ body یه استایل اضافه کردیم و گفتیم رنگ پس زمینه خاکستری مِلو باشه!:دی
به همین راحتی! انصافا راحت نیست؟! راحت نیست بگین!0_0
از اونجایی که style یه خاصیت برای هر تگی هست پس اینجوری نوشته میشه:
style="property:value"
حالا چند property یا ویژگی رو بررسی می کنیم:
-Text color:
هون طور که اول آموزش دیدید برای ویژگی رنگ اینطور باید عمل کنید:
This is a heading
This is a paragraph.
اکثر رنگ ها رو می تونید با استفاده از نام انگلیسی شون اینجا بنویسید! و امیدوار باشید که مرورگر بفهمه!:دی
روش های دیگه ای هم برای وارد کردن رنگ هست که فعلا نیازی نیست بدونید!:دی
- Fonts:
ویژگی font-family ویزگی ای هستش که فونت متنمون رو مشخص می کنه!
This is a heading
This is a paragraph.
-Text size:
سایز و اندازه متن رو توی خاصیت استایل می تونید توسط ویژگی font-size مشخص کنید.
This is a heading
This is a paragraph.
همونطور که می بینید اندازه به درصد داده شده و نسبت به اون اندازه ی پیش فرضی داده می شه که برای اون تگ تعریف شده. مثلا 300% توی خط اول یعنی اندازه ی پیشفرض رو سه برابر می کنه و نشون می ده.
این سه تا ویژگی ای که گفته شد همه و همه در تگ قابل استفاده هستن. این تگ با ویژگی های face برای نام فونتی که می خواید استفاده کنید color برای رنگ و size برای اندازه.
This is some text!
This is some text!
This is some text!
- Text Alignment:
برای مشخص کردن راست یا وسط یا چپ بودن متن(:دی) از ویژگی text-align استفاده می کنیم!
Centered Heading
This is a paragraph.
دوستان یه چیزی بگم این ویژگی ها فقط برای تگ هایی استفاده می شه که باهاشون متن رو سازماندهی می کنیم مانند تگ های تیتر(h1-h6) و تگ p , ... و شما برای تگ های دیگه نمی تونید ازش استفاده کنید!
برای وارد کردن چند ویژگی برای یک استایل از علامت ; بین ویژگی ها استفاده می کنیم.
content
خب تموم شد!
خودتان تمرین کنید:
امیدوارم خوب بوده باشه و مفید!
1394/04/19 12:17
سلام دستت درد نکنه
الان پس هم ما می تونیم فونت و اینا رو هم به صورت استایل تعریف کنیم هم می تونیم خود تگ فونت رو تعریف کنیم که مثل تگ ایمیج که خاصیت هاش سورس و عرض و ارتفاع بود این تگ فونت هم خاصیت هاش فیس و سایز و رنگ هست.
بعد اونوقت توی خودتان امتحان کنید »
همون کار بولد رو انجام میده؟
- - - - - - - - - به دلیل ارسال پشت سر هم پست ها ادغام شدند - - - - - - - - -
راستی استاد عنوان رو به جلسه چهارم تغییر ندادی((200))
1394/04/19 16:22
خیلی این جلسه آسون بود! همشو یاد گرفتم!
بعد یه چیزی! من سوالای جلسه سومم رو نپرسیدم.
خب میپرسم الان.
خب نفهمیدم اصن اون آخرش چی گفتی. توی پیشنهاد ها. وقتی گفتی اگ سینگ کوتیشن استف میکنیم یا دابل کوتیشن. فرقش چیه اصن؟
بعد اینو نگاه کن. اگه نخوام این همه استایل استایل بنویسم باید از همون کلن تگ فونت استفاده کنم؟
this is a paragraph
بعد چرا توی تگ فونتت برای سایز درصد نذاشتی؟
شروع کننده موضوع 1394/04/19 17:10
@moonlightsky 87535 گفته:
سلام دستت درد نکنه
الان پس هم ما می تونیم فونت و اینا رو هم به صورت استایل تعریف کنیم هم می تونیم خود تگ فونت رو تعریف کنیم که مثل تگ ایمیج که خاصیت هاش سورس و عرض و ارتفاع بود این تگ فونت هم خاصیت هاش فیس و سایز و رنگ هست. درسته!
بعد اونوقت توی خودتان امتحان کنید »
همون کار بولد رو انجام میده؟
این تگ تگیه که برای متون مهم به کار میره. که حالا از قضا به طور پیشفرض بولد قرار داره. شما می تونی با توجه به اونچیزی که خودت دوس داری، مشخص کنی که متون مهم توی صفحه ات چه شکلی باشن. فعلا هم می تونی رنگ، فونت و اندازه رو مشخص کنی.
- - - - - - - - - به دلیل ارسال پشت سر هم پست ها ادغام شدند - - - - - - - - -
راستی استاد عنوان رو به جلسه چهارم تغییر ندادی((200))
کی گفته؟!:دی اون بالا رو نیگا ... نوشته جلسه 4!:دی
پاسخ داده شد!:دی
- - - - - - - - - به دلیل ارسال پشت سر هم پست ها ادغام شدند - - - - - - - - -
@Moahedeh 87542 گفته:
خیلی این جلسه آسون بود! همشو یاد گرفتم!
بعد یه چیزی! من سوالای جلسه سومم رو نپرسیدم.
خب میپرسم الان.
خب نفهمیدم اصن اون آخرش چی گفتی. توی پیشنهاد ها. وقتی گفتی اگ سینگ کوتیشن استف میکنیم یا دابل کوتیشن. فرقش چیه اصن؟
ببین تو یه جوری باید این خاصیت ها رو از هم دیگه متمایزشون کنی پس از " یا ' استفاده می کنی. حالا وقتی داخل یه خاصیتت " یا ' باشه تو باید اون دو کاری که گفتم رو انجام بدی!
بعد اینو نگاه کن. اگه نخوام این همه استایل استایل بنویسم باید از همون کلن تگ فونت استفاده کنم؟
اولا که استایل راحت تره! البته شاید الان راحت نباشه! ولی بعدا راحت ترین کار خواهد بود! چون تو الان بلد نیستی خارج تگ استایل تعریف کنی ولی بعدا به اون هم میرسیم! بعدشم یه بار دیگه به جلسه ی 4 نگاه کن و چیزایی که اضافه شده رو بخون! این کدت یه سری مشکل داره! می تونی فعلن برای راحتی کار از تگ فونت استفاده کنی!
پست جلسه چهارم هم آپدیت شد!
this is a paragraph
بعد چرا توی تگ فونتت برای سایز درصد نذاشتی؟سایز برای تگ فونت از 1-7 هستش که 3 فونت پیشفرض مرورگرهاست. ولی توی استایل فعلن از درصد فقط می تونی استفاده کنی
پست جلسه ی چهارم آپدیت شد!
همگی یه بار دیگه یه نگاهی بندازن!
1394/04/19 17:23
الان این درسته؟
بعد یه چیزی. در مورد فونت ها، خب اگ فونت بی نازنین رو بنویسم (با توجه به اینکه توی لپ تاپم هیچ جا ندارمش)، توی مرورگر میتونه نشونش بده؟
Paragraph
بعد اینکه تو گفتی فقط برای تگ هایی ک باهاشون متنو سازمان دهی میکنیم این ویژگی ها رو داریم. برای تگ بادی هم میشه؟
+ اون اسلش رو قبل پی گذاشتم نمیدونم چرا ب هم ریخته رفته اونور.
1394/04/20 00:03
@Moahedeh 87544 گفته:
الان این درسته؟
بعد یه چیزی. در مورد فونت ها، خب اگ فونت بی نازنین رو بنویسم (با توجه به اینکه توی لپ تاپم هیچ جا ندارمش)، توی مرورگر میتونه نشونش بده؟
Paragraph
بعد اینکه تو گفتی فقط برای تگ هایی ک باهاشون متنو سازمان دهی میکنیم این ویژگی ها رو داریم. برای تگ بادی هم میشه؟+ اون اسلش رو قبل پی گذاشتم نمیدونم چرا ب هم ریخته رفته اونور.
من جواب سوال اولو نمیدونم اما دومی فکر کنم میشه تو بادی استفاده کرد توی آموزش هم گفته شده
کد HTML:
<body style="background-color:lightgrey">
This is a heading
This is a paragraph.
اینو امتحان کنید. همونطور که می بینیم توی تگ body یه استایل اضافه کردیم و گفتیم رنگ پس زمینه خاکستری مِلو باشه!:دی
شروع کننده موضوع 1394/04/20 06:37
@Moahedeh 87544 گفته:
الان این درسته؟
بعد یه چیزی. در مورد فونت ها، خب اگ فونت بی نازنین رو بنویسم (با توجه به اینکه توی لپ تاپم هیچ جا ندارمش)، توی مرورگر میتونه نشونش بده؟
کار زیاد آسونی نیست. بزار برسیم به css اونجا می فهمی!
Paragraph
بعد اینکه تو گفتی فقط برای تگ هایی ک باهاشون متنو سازمان دهی میکنیم این ویژگی ها رو داریم. برای تگ بادی هم میشه؟ برای تگ بادی میشه ولی بعضی هاش مثل رنگ پس زمینه.+ اون اسلش رو قبل پی گذاشتم نمیدونم چرا ب هم ریخته رفته اونور.
با تشکر از مون لایت:دی
یاد گرفتیا دختر!:دی
moahedeh واکنش نشان داد
