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

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

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

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

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

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

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

جلسات:

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

تگ ها

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

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

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

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

**Cyrus-The-Great** · 2015/07/08, 01:12

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

حرف پویا رو نفهمیدم حرف خودتم نفهمیدم ابراهیم.
چیزی که من میدونم اینه: این h1 تا h6 برای تیتره. تیتر باید بزرگتر از متن باشه.
سوال: مجید سه بار از h3 استفاده کرد و توی یکیش، تیترش اندازه ی متن عادی ش بود.

سی اس اس و این چیزای سختو نگین. خیلی کوچولو و ساده جواب بده

خب مشکلش چیه؟ تو متن عادی سایز مشخص نداره که. سایز هایی که میبینی یه عرف شده. تو الان تک h6 خیلی کوچیک تر از یه متن معمولیه. اینو ببین.
هیچ مشکلی نداره. اندازه نوشته توی صفحه دست خودته که یا با CSS (که بعدا یاد میگیری) تعیین میشه یا باتگ که مطئنم ابراهیم توی آموزشاش معرفی میکنه.

بازم اگه من عوضی فهمیدم بگو.

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

یه نکته دیگه:

برای تشکر نیازی به اسپم دادن نیست. دکمه "سپاس"و برای همین گذاشتن!

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

تاپیک پاکسازی شد!

**HELT** · 2015/07/09, 07:30

سلام!

جلسه ی سوم رو با یه نکته شروع می کنیم!
- من توی این آموزش ها یه دونه منبع دارم اونم سایت w3schools هست! و ایشالا از این به بعد با طرح درس این سایت جلو خواهیم رفت.
تمرین هایی که میزارم هم مال همین سایته و می تونید روی همین سایت انجامشون بدید. کار خیلی راحت میشه براتون!

خواص یک تگ: (Attributes)

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

کد HTML:

<tagname AttributeName="value"> content </tagname>

خب حالا چند تا خاصیت معمول رو نام می برم:
- خاصیت lang:
این خاصیت متعلق به تگ <html> هستش.
کارش هم اینه که زبان صفحه رو برای مرورگر و موتور های جست و جو مشخص می کنه تا هم کار پردازش صفحه راحت تر باشه و هم کار موتور های جست و جو.

کد HTML:

<!DOCTYPE html>
<html lang="en-US">
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

برای مقدار خاصیت lang دو حرف اول زبان رو مشخص می کنن و دو حرف بعد از خط تیره لهجه و گویش رو مشخص می کنند. شما می تونین برای زبان فارسی عبارت "fa" رو برای این خاصیت قرار بدین و همین کافیه.
- خاصیت title:
اول بگم که این یک خاصیت هست و با تگ title که در head بود و عنوان صفحه رو مشخص می کرد فرق داره.
این خاصیت برای تگ p یعنی همون تگ پاراگراف استفاده می شه. و وقتی شما نشانگر موستون رو روی متن این پاراگراف قرار بدید به صورت یه متن(یا بهتره بگم tooltip) مقدار خاصیت title رو نشونتون میده. امتحان کنید.

کد HTML:

<p title="About W3Schools">
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.
</p>

خودتان امتحان کنید »
- خاصیت href:
همونطور که می دونید خاصیت href برای لینک هستش و در html آدرس لینک ها با href شناخته می شه.

کد HTML:

<a href="http://www.w3schools.com">This is a link</a>

خودتان امتحان کنید »
در مورد تگ a و در کل لینک ها توی جلسات بعد بیشتر صحبت خواهیم کرد.
- خاصیت های مربوط به اندازه:
منظور خاصیت های width و height هستش که فعلا توی تگ img ازشون استفاده کردیم و بعدا سر و کلشون جا های دیگه هم پیدا می شه!

کد HTML:

<img src="w3schools.jpg" width="104" height="142">

خودتان امتحان کنید »

در مورد تگ img و در کل عکس ها هم در آینده بیش از این بحث خواهیم کرد.

- خاصیت alt :
این خاصیت در عکس ها دیده می شه و برای وقتیه که عکس ما لود نمی شه. اون موقع به جای عکس یه"×" و مقدار این خاصیت رو مشاهده خواهیم کرد. و فایده اش هم اینه که حداقل فردی که عکس لود نشده رو می بینه یه شمای کلی از عکس رو داره مثلا عکس ماشین گذاشتید و لود نشده و طرف از روی alternative text ای که نشون داده می شه می فهمه که این عکس عکس یه ماشین بوده!

کد HTML:

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

خودتان امتحان کنید »
پیشنهاد:
- تگ ها و در کل خاصیت ها و کد های html رو تا جایی که لازم نباشه با حروف کوچیک بنویسید چون راحت تر و ساده تره برای تایپ! و البته مشاهده!
- مقدار هر خاصیت اون بالا که گفته شد بین دو تا دابل کوتیشن بود! ولی می تونه هم نباشه! اما پیشنهاد و مصلحت کار اینه که باشه برای اینکه زمانی که از چند تا خاصیت استفاده می کنیم مشکل پیش نیاد.
- زمان هایی که می خواید توی متنتون از سینگل کوتیشن و یا دابل کوتیشن استفاده کنید کار زیر رو بکنید:
در صورتی که متن دارای سینگل کوتیشن هست یعنی این : (')

کد HTML:

<p title="John 'ShotGun' Nelson">

در صورتی که متن دارای دابل کوتیشن هست: (")

کد HTML:

<p title='John "ShotGun" Nelson'>

حالا چند تا تمرین:

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

تمرین 1 »
تمرین 2 »
تمرین 3 »
تمرین 4 »
تمرین 5 »

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

اگر روی دکمه ی show answer کلیک کنید کد جواب رو بهتون نشون میده.
سعی کنید اول خودتون کدش رو بنویسید و بعد با جواب مقایسه کنید.

چند تگ کوچولو و کاربردی:
1- تگ برای رفتن به خط بعد.
2- تگ برای بولد(پر رنگ) کردن متن.
3- تگ برای ایتالیک(کج) کردن نوشته.
4- تگ <q> برای ایجاد نقل قول با استفاده از " .
5- تگ <S> برای خط کشیدن روی متن.
6- تگ برای خط کشی زیر متن.
7- تگ <hr> برای ایجاد یک خط افقی.
تمامی تگ های بالا باید باز و بسته بشن و بینشون متن باشه به جز اولی و آخری که نیازی به بسته شدن ندارن.

کد HTML:

<!DOCTYPE html>
<html>
<body>
<p>This is a Line break:</p><br>
<p><b>This is a Bold Text</b></p>
<p><i>This is an italic Text</i></p>
<p><q>This is a quoted Text</q></p>
<p><s>This is a wrong text</s></p>
<p><u>This is an Underlined Text</u></p>
<p>This is a vertical Line Text:</p><hr>
</body>
</html>

این تگ ها در عین سادگی بسیار مهم و کاربردی هستن پس خودتون خوب یاد بگیرید.

تمرین ها بسیار ساده هستن و وقتی نمی گیرن.
موفق باشین.

**moonlightsky** · 2015/07/09, 13:06

سلام مرسی فقط یک سوال
توی خودتان امتحان کنید »
 برای بولد کردنه؟

**HELT** · 2015/07/09, 13:58

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

سلام مرسی فقط یک سوال
توی خودتان امتحان کنید »
 برای بولد کردنه؟

بله توضیح نامه ی کوچیکی به جلسه ی سوم اضافه شد.

**HELT** · 2015/07/10, 08:12

سلام!
خب جلسه ی چهارم هم شروع شد!
این جلسه جلسه ی مهمیه چون که مقدمه ایه برای css پس حواستونو جمع کنید.
خب بریم سر اصل مطلب:
این جلسه قراره سر style ها بحث کنیم. style چیه؟! کسی میدونه؟!

خب بزارید برای جلوگیری از هرج و مرج خودم بگم!

استایل یعنی از لحاظ ظاهری تگمون توی چه فازیه!

این بهترین تعریفی بود که می تونستم بگم!

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

کد HTML:

<!DOCTYPE html>
<html>
<body>
<h2 style="color:red">I am Red</h2>
<h2 style="color:blue">I am Blue</h2>
</body>
</html>

این کد رو امتحان کنید. یه همچین چیزی بهتون نمایش می ده:
I am Red

I am Blue

خودتان امتحان کنید »
همونطور که می بینید اون بالا ما توی خاصیت استایل تگ p مون رنگ متن رو مشخص کردیم. به همین راحتی!

کد HTML:

<body style="background-color:lightgrey">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

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

به همین راحتی! انصافا راحت نیست؟! راحت نیست بگین!0_0
از اونجایی که style یه خاصیت برای هر تگی هست پس اینجوری نوشته میشه:

کد:

style="property:value"

حالا چند property یا ویژگی رو بررسی می کنیم:
-Text color:
هون طور که اول آموزش دیدید برای ویژگی رنگ اینطور باید عمل کنید:

کد HTML:

<h1 style="color:blue">This is a heading</h1>
<p style="color:red">This is a paragraph.</p>

خودتان امتحان کنید »
اکثر رنگ ها رو می تونید با استفاده از نام انگلیسی شون اینجا بنویسید! و امیدوار باشید که مرورگر بفهمه!

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

- Fonts:
ویژگی font-family ویزگی ای هستش که فونت متنمون رو مشخص می کنه!

کد HTML:

<h1 style="font-family:verdana">This is a heading</h1>
<p style="font-family:courier">This is a paragraph.</p>

خودتان امتحان کنید »

-Text size:
سایز و اندازه متن رو توی خاصیت استایل می تونید توسط ویژگی font-size مشخص کنید.

کد HTML:

<h1 style="font-size:300%">This is a heading</h1>
<p style="font-size:160%">This is a paragraph.</p>

خودتان امتحان کنید »
همونطور که می بینید اندازه به درصد داده شده و نسبت به اون اندازه ی پیش فرضی داده می شه که برای اون تگ تعریف شده. مثلا 300% توی خط اول یعنی اندازه ی پیشفرض رو سه برابر می کنه و نشون می ده.

این سه تا ویژگی ای که گفته شد همه و همه در تگ قابل استفاده هستن. این تگ با ویژگی های face برای نام فونتی که می خواید استفاده کنید color برای رنگ و size برای اندازه.

کد HTML:

<font size="3" color="red">This is some text!</font>
<font size="2" color="blue">This is some text!</font>
<font face="verdana" color="green">This is some text!</font>

خودتان امتحان کنید »

- Text Alignment:
برای مشخص کردن راست یا وسط یا چپ بودن متن(

) از ویژگی text-align استفاده می کنیم!

کد HTML:

<h1 style="text-align:center">Centered Heading</h1>
<p>This is a paragraph.</p>

خودتان امتحان کنید »

دوستان یه چیزی بگم این ویژگی ها فقط برای تگ هایی استفاده می شه که باهاشون متن رو سازماندهی می کنیم مانند تگ های تیتر(h1-h6) و تگ p , ... و شما برای تگ های دیگه نمی تونید ازش استفاده کنید!

برای وارد کردن چند ویژگی برای یک استایل از علامت ; بین ویژگی ها استفاده می کنیم.

کد HTML:

<tagname style="property1:value;property2:value">content</tagname>

خب تموم شد!

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

تمرین 1 »تمرین 2 »تمرین 3 »تمرین 4 »تمرین 5 »تمرین 6 »

امیدوارم خوب بوده باشه و مفید!

**moonlightsky** · 2015/07/10, 13:17

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

بعد اونوقت توی خودتان امتحان کنید »
 همون کار بولد رو انجام میده؟

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

راستی استاد عنوان رو به جلسه چهارم تغییر ندادی

**Moahedeh** · 2015/07/10, 17:22

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

بعد اینو نگاه کن. اگه نخوام این همه استایل استایل بنویسم باید از همون کلن تگ فونت استفاده کنم؟

<"body style="font-size:200%" style="background-color:lavender" style="olive" style="font-family:Arial-unicode-MS" style="text-align:right>
 this is a paragraph 
</body>

بعد چرا توی تگ فونتت برای سایز درصد نذاشتی؟

**HELT** · 2015/07/10, 18:10

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

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

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

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

راستی استاد عنوان رو به جلسه چهارم تغییر ندادی

کی گفته؟!

اون بالا رو نیگا ... نوشته جلسه 4!

پاسخ داده شد!

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

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

خیلی این جلسه آسون بود! همشو یاد گرفتم!
بعد یه چیزی! من سوالای جلسه سومم رو نپرسیدم.
خب میپرسم الان.
خب نفهمیدم اصن اون آخرش چی گفتی. توی پیشنهاد ها. وقتی گفتی اگ سینگ کوتیشن استف میکنیم یا دابل کوتیشن. فرقش چیه اصن؟
ببین تو یه جوری باید این خاصیت ها رو از هم دیگه متمایزشون کنی پس از " یا ' استفاده می کنی. حالا وقتی داخل یه خاصیتت " یا ' باشه تو باید اون دو کاری که گفتم رو انجام بدی!

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

<"body style="font-size:200%" style="background-color:lavender" style="olive" style="font-family:Arial-unicode-MS" style="text-align:right>
 this is a paragraph 
</body>

بعد چرا توی تگ فونتت برای سایز درصد نذاشتی؟
سایز برای تگ فونت از 1-7 هستش که 3 فونت پیشفرض مرورگرهاست. ولی توی استایل فعلن از درصد فقط می تونی استفاده کنی

پست جلسه ی چهارم آپدیت شد!
همگی یه بار دیگه یه نگاهی بندازن!

**Moahedeh** · 2015/07/10, 18:23

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

<"p style="font-size:200%;background-color:lavender;color:olive;font-family:Arial-unicode-MS;text-align:right>
Paragraph

بعد اینکه تو گفتی فقط برای تگ هایی ک باهاشون متنو سازمان دهی میکنیم این ویژگی ها رو داریم. برای تگ بادی هم میشه؟
+ اون اسلش رو قبل پی گذاشتم نمیدونم چرا ب هم ریخته رفته اونور.

**moonlightsky** · 2015/07/11, 01:03

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

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

<"p style="font-size:200%;background-color:lavender;color:olive;font-family:Arial-unicode-MS;text-align:right>
Paragraph

بعد اینکه تو گفتی فقط برای تگ هایی ک باهاشون متنو سازمان دهی میکنیم این ویژگی ها رو داریم. برای تگ بادی هم میشه؟
+ اون اسلش رو قبل پی گذاشتم نمیدونم چرا ب هم ریخته رفته اونور.

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

کد HTML:

<body style="background-color:lightgrey">
<h1>This is a heading</h1>
This is a paragraph.

</body>
اینو امتحان کنید. همونطور که می بینیم توی تگ body یه استایل اضافه کردیم و گفتیم رنگ پس زمینه خاکستری مِلو باشه!

زندگی پیشتاز

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

تـــوجـــه

تـــوجـــه

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

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

جستجو موضوع

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

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

جلسه ی سوم

جلسه ی چهارم

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

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

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

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

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

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

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

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

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

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

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

پیوندها