حالت موضوعی | حالت خطی

**m-khan** · 08-28-2011، 11:17 PM

با سلام امروز داشتم چرخی تو فروم می زدم و نمی دونستم که چی بنویسم که یه
مرتبه به ذهنم برخورد(اثابت نمود) که بیام یه آموزش HTML از مبتدی تا حرفه
ای از اون هایی که تویه وبسایت های دیگه پیدا نمی کنید رو براتون بزارم
خوب من می خوام این آموزش کامل باشه و برمبنای سایت w3school باشه که هم
مطالب یه نظم خاصی داشته باشند هم شما راحت یاد بگیرید در ضمن تمام مطالب
طبقه بندی شده است و هیچ مشکلی بابت یادگیری نخواهید داشت این رو هم بگم
اینقدر براتون مثال می زنم که سرتون درد بیاد Tongue

در ضمن این رو هم باید اضافه
کنم که این آموزش ها ادامه داره و فهرست مطالبش به صورت زیر می باشد:
HTML Basic
HTML Advanced
XHTML
HTML5
و انشاا.. اگه عمر باشه می خوام آموزش CSS و JavaScript رو هم براتون قرار بدم.
راستی اگه کسی خواست از این مطالب استفاده کنه لطفا نام نویسنده و منبع رو هم قرار بده.(در غیر این صورت اجرشم با خودش باشه)
================
قوانین این تاپیک:
لطفا قوانین کلی انجمن رو رعایت کنید.
اسپم ندید.
برای تشکر از کلید تشکر(سمت چپ پایین هر پست) استفاده کنید.
لطفا هر سوالی رو اینجا نپرسید.
================
دوستان سعی کنید اگه یه مطلب رو نفهمیدید چند بار از روی آن بخوانید.
منتظر سری اول آموزشی باشید...

**m-khan** · 08-29-2011، 10:29 AM

این قسمت اول این مجموعه ی آموزش هست سعی کنید درس ها رو به طور جدی دنبال کنید تا تویه این زمینه بتوانید پیشرفت کنید.

با HTML شما می توانید وبسایت خود را ایجاد نمایید.
در این آموزش شما همه چیز را در مورد HTML فرا خواهید گرفت.
HTML بسیار آسان است و شما از یادگیری آن لذت خواهید برد.
این آموزش ها بر مبنای سایت w3school می باشد.

این آموزش HTML به صورت کاملا استاندارد بوده و دارای مثال های متعددی می باشد.

مثال یک نمونه کد HTML:

کد: 

<html>

 <body>

 <h1>My First Heading</h1>

 <p>My first paragraph.</p>

 </body>

 </html>

مقدمه ی HTML:

HTML چیست؟
HTML یک زبان برای توصیف صفحات وب است.

HTML مخفف Hyper Text Markup Language
HTML یک زبان برنامه نویسی نیست بلکه یک زبان نشانه گذاری است.
HTML از Tag(تگ) برای توصیف صفحات اینترنت استفاده می کند.

تگ های HTML:

تگ ها کلمات کلیدی احاطه شد توسط قلاب ها هستند.
تگ های HTML معمولا به صورت جفت جفت بوده، مانند:<b> و <b/>
تگ اول را تگ آغازین(تگ باز) و تگ دوم را تگ پایانی(تگ بسته) می نامند.

اسناد HTML صفحات وب را تشکیل می دهند:

اسناد HTML صفحات وب را توصیف می کند.
اسناد HTML حاوی دستوارت HTML و متن های ساده هستند.
اسناد HTML را صفحات وب نیز می نامند.

هدف از یک مرورگر وب(مانند:فایرفاکس،اینترنت اکسپلورر، اپرا و ...) خواندن صفحات HTML و نمایش آن ها به عنوان صفحات وب می باشد. مرورگر تگ های HTML را نشان نمی دهد بلکه با استفاده از تگ ها به تفسیر محتوای صفحه می پردازد.

تشریح مثال بالا:
متن بین <html> و <html/> به توصیف صفحات وب می پردازد.
متن بین <body> و <body/> محتوای قابل نمایش صفحه را در بر می گیرد.
متن بین <h1> و <h1/> عنوان یک سرفصل را نمایش می دهد.
متن بین <p> و <p/> یک پاراگراف را نمایش می دهد.

خیلی به خودتون سخت نگیرید که اینا رو حفظ کنید تویه بخش های بعدی به طور کامل این ها رو توضیح می دهیم.

پایان بخش اول آموزش

**m-khan** · 08-29-2011، 07:52 PM

اینم از قسمت دوم، تقدیم به دوستان گل.

آنچه شما نیاز دارید؟
در این روش تدریس شما به هیچگونه نرم افزار خاص یا حرفه ای نیاز ندارید.
نکته: بعضی از دوستان مبتدی به اشتباه تصور می کنند که برای یادگیر HTML نیاز به یک سرور و یا سایت دارند که شاید به نظر خیلی ها خنده دار باشد!! Big Grin

ولی در واقع شما برای یادگیری HTML نیاز به یک سرور یا سایت ندارید و تمام فایل هایی که طراحی می کنید بر روی سیستم شما جرا می شوند.
شما در HTML از یک ویرایشگر متنی ساده(مانند noteoad) استفاده می کنید، زیرا من معتقدم که برای یادگیری از 0 نیازی نیست که از نرم افزار های سنگین و گیچ کننده ی طراحی وب استفاده کنیم.
نکته: برخی از ویرایشگر های متنی مانند: "وردپد" و "مایکروسافت آفیس ورد" برای طراحی وبسایت نامناسب اند زیرا این ویرایشگرها کدهایی را به دستورات شما اضافه می کنند که این کدها نتیجه ی کار شما را تغییر می دهد.

چگونه از notepad برای HTML استفاده کنیم؟
نکته: ابتدا برای این منظور تغییرات زیر را در سیستم خود اعمال کنید:
از Control Panel برنامه ی Folder Options اجرا کنید و به سربرگ View بروید، در قسمت Advanced settings چک Hide extensions for known file types را بردارید و بر رو OK کیک کنید با این کار شما پسوند فایل ها را قابل مشاهده می کنید.
این کار بسیار ساده است برای این کار کافی است که شما notepad را اجرا کنید و دستورات خود را در آن تایپ کنید، حال از منوی File گزینه ی Save را انتخاب کنید. و در قسمت File name یک نام را برای فایل مورد نظر با پسوند .html یا .htm بنویسید و در قسمت Save as type گزینه ی All File(*.*) را انتخاب کنید و در قسمت Encoding گزینه UTF-8 را انتخاب نمایید و در آخر نیز کلید Save را انتخاب کنید.

.html یا .htm ؟
به طور کلی هیچ تفاوتی بین .html و .htm مشاهده نمی شود و شما میتوانید فایل های خود را با هر دو پسوند ذکر شده ذخیر کنید تنها تفاوت موجود بین این دو در تاریخچه ی آن هاست، پسوند .htm پسوندی قدیمی بوده و قبلا بیشتر در طراحی صفحات استفاده می شده اما .html نسبت به .htm جدید تر بوده و طراحان وب نیز اکثرا از این پسوند در طراحی های خود استفاده می کنند.

**m-khan** · 08-30-2011، 02:55 PM

این هم از قسمت سوم. تقدیم....

این بخش در واقع شروع HTML Basic هستش پس خوب دقت کنید.
نکته: اگر تگ ها و مثال های زیر برای شما قابل فهم نبودند نگران نشوید چون در مورد هر کدام بعدا توضیح خواهیم داد این مثال ها فقط جهت آشنایی می باشند.

لینک ها در HTML:
لینک ها در HTML با تگ <a> تعریف می شوند.
مثال:

کد: 

<a href="http://www.yas-theme.com/">This is a link</a>

توجه: آدرش لینک ها توسط ویژگی href تعریف می شود.
(در مورد ویژگی ها در آموزش های بعدی بیشتر توضیح می دهیم)

سرفصل ها در HTML:
سرفصل ها در HTML با تگ <h1> تا <h6> تعریف می شوند.
مثال:

کد: 

<h1>This is a heading</h1>

 <h2>This is a heading</h2>

 <h3>This is a heading</h3>

پاراگراف ها در HTML:
پاراگراف ها در HTML با تگ <p> تعریف می شوند.
مثال:

کد: 

<p>This is a paragraph.</p>

 <p>This is another paragraph.</p>

تصاویر در HTML:
تصاویر در HTML با تگ <img> تعریف می شوند.
مثال:

کد: 

<img src="yas-theme.jpg" width="104" height="142" />

نکته: نام و اندازه ی تصویر از ویژگی های مثال بالا می باشند.

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

**m-khan** · 09-03-2011، 05:30 AM

اینم از قسمت چهارم...

اسناد HTML توسط عناصر HTML تعریف می شود.

عنصر های HTML:
چند مثال برای عنصر ها:
عنصر پاراگراف: تگ باز(تگ آغازین):<P>، تگ بسته(تگ پایانی):<p/>
عنصر سرفصل: تگ باز:<hn>، تگ بسته:<hn/>
نکته: n عددی از 1 تا 6 است.
نکته مهم: تگی که یک عنصر با آن آغاز می شود تگ باز(تگ آغازین) و تگی که یک عنصر با آن به اتمام می رسد تگ بسته(تگ پایانی) نامیده می شود.
نکته: محتوای عناصر HTML بین تگ باز و بسته قرار می گیرد.
نکته: برخی از عناصر HTML بدون محتوای هستند.
نکته: عناصر بدون محتوا در همان تگ شروع یسته می شوند.
نکته: برخی از عناصر HTML می توانند دارای ویژگی هایی باشند.
توجه: در مورد ویژگی ها در مطالب بعدی بیشتر صحبت می کنیم.

عناصر HTML تو در تو:
بیشتر عناصر HTML بصورت تو در تو می باشند.(می توانند حاوی عناصر دیگر باشند)
اسناد HTML از عناصر HTML تو در تو تشکیل شده اند.

مثال سند HTML:

کد: 

<html>

 <body>

 <p>This is my first paragraph.</p>

 </body>

 </html>

مثال بالا شامل 3 عنصر HTML می باشد.

توضیح مثال بالا:
عنصر <p>:

کد: 

<p>This is my first paragraph.</p>

عنصر <P> یک پارا گراف را در یک سند HTML را توصیف می کند.
تگ آغازین(باز): <p>
تگ پایانی (بسته): <p/>
محتوای عنصر: This is my first paragraph.

عنصر <body>:

کد: 

<body>

 <p>This is my first paragraph.</p>

 </body>

عنصر <body> بدنه را در یک سند HTML تعریف می کند.
تگ آغازین(باز): <body>
تگ پایانی (بسته): <body/>
این عنصر HTML دربر گیرنده ی یک عنصر HTML دیگر است.

عنصر <HTML>:

کد: 

<html>

 <body>

 <p>This is my first paragraph.</p>

 </body>

 </html>

عنصر <html> در یک سند HTML کل سند را تعریف می کند.
تگ آغازین(باز): <html>
تگ پایانی (بسته): <html/>
این عنصر HTML دربر گیرنده ی یک عنصر HTML دیگر است.

تگ پایانی را فراموش نکنید:
برخی از عناصر HTML در صورت فراموش کردن تگ پایانی دچار مشکل می شوند:

کد: 

<p>This is a paragraph

 <p>This is a paragraph

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

عناصر HTML بدون محتوای:
عناصر HTML بدون محتوای را عناصر خالی می نامند.
عنصر <br> یک عنصر خالی است.(برای شکستن خط و رفتن به سطر بعد)

نکته: در XHTML همه ی عناصر باید بسته شوند. اضافه کردن یک ممیز در داخل تگ آغازین روش مناسبی برای بستن این تگ ها می باشد ، مانند: </br> .
پس بهتر است برای هماهنگی و نظم بیشتر در کار ها از تگ </br> به جای <br> استفاده شود.

نکته مهم در HTML: استفاده از تگ ها با حروف کوچک
در تگ های HTML تفاوتی بین حروف کوچک و بزرگ وجود ندارد ولی کنسرسیوم شبکه ی جهانی وب(W3C) استفاده از حروف کوچک را در HTML4 و در XHTML توصیه کرده است پس بهتر اس از حروف کوچک در HTML استفاده کنیم.

**m-khan** · 09-05-2011، 01:22 AM

ویژگی ها در HTML:

عنصر ها در HTML می توانند دارای ویژگی هایی باشند.
ویژگی های یک عنصر اطلاعاتی اضافی در مورد عنصر هستند.
ویژگی ها همیشه در تگ شروع مشخص می شوند.
ویژگی ها در یک تگ به صورت زیر هستند:

کد: 

<tag name="value">

name= نام ویژگی
value= مقدار ویژگی

یک مثال خوب از ویژگی ها را می توانیم توسط عنصر <a> نشان دهیم:

کد: 

<a href="http://www.yas-theme.com">This is a link</a>

در مثال بالا href نام ویژگی است(این ویژگی در بر گیرنده ی آدرس پیوند می باشد) و http://www.yas-theme.com مقدار یا value نسبت داده به آن است.

نکته: همیشه مقادیر(value) ویژگی ها باید بین دو دوبل کتیشن " " قرار می گیرند.
نکته: به جای دو تا دوبل کتیشن " " می توان از دوتا کتیشن ' ' هم استفاده کرد ولی استفاده از دوبل کتیشن " " توصیه می شود.
نکته مهم: از حروف کوچک در ویژگی ها استفاده کنید
نام ویژگی ها و ارزش ویژگی ها به کوچکی و بزرگی حروف حساس می باشند.
با این حال استفاده از حروف کوچک در ویژگی ها توصیه شده است.

**m-khan** · 09-06-2011، 09:03 AM

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

سرفصل ها در HTML:
سرفصل ها در HTML با برچسب <h1> تا <h6> توصیف می شوند.
<h1> مهم ترین و بزرگ ترین سرفصل می باشد و <h6> کم اهمیت ترین و کوچک ترین سرفصل می باشد.
مثال:

کد: 

<h1>This is a heading</h1>

<h2>This is a heading</h2>

<h3>This is a heading</h3>

<h4>This is a heading</h4>

<h5>This is a heading</h5>

<h6>This is a heading</h6>

اینم از نتیجش:
[تصویر: 73html1.gif]

نکته ی مهم: مرورگر ها به طور خودکار یک فاصله قبل و بعد از سرفصل ایجاد می کند.

سرفصل ها مهم هستند
از سرفصل ها فقط برای ایجاد سرفصل استفاده کنید نه برای ایجاد متن بزرگ(Big) یا متن کلفت(Bold).
موتور های جستجو به سرفصل ها توجه خاصی می کنند و از این لحاظ داری اهمیت زیادی می باشند و این در حالی است که بسیاری از طراحان وب در ایران به جای استفاده از سرفصل ها اندازه ی فونت را بیشتر می کنند.
از آن جا که کاربران توسط سرفصل ها می توانند تماس مختصری با سند HTML داشته باشند پس استفاده از سرفصل ها ضروری است.
از سرفصل H1 باید به عنوان مهم ترین سرفصل در سند HTML استفاده شود، بعد از آن H2 دارای اهمیت می باشود و به همین ترتیب... .

خطوط HTML:
تگ </hr> باعث ایجاد یک خط افقی در صفحه می شود.
نکته: این تگ یک تگ بدون محتوا می باشد و به همین دلیل در همان تگ شروع بسته می شوند.
عنصر hr بین مطالب جدا از هم استفاده می شود:

کد: 

<p>This is a paragraph</p>

 <hr />

 <p>This is a paragraph</p>

 <hr />

 <p>This is a paragraph</p>

اینم از نتیجش:
[تصویر: 4ehtml2.gif]

توضیحات HTML:
توضیحات را می توان به کد های HTML اضافه کرد تا آن را بیشتر قابل فهم نمود.
نکته: توضیحات توسط مرورگر خوانده نمی شوند.
توضیحات شبیه مثال زیر نوشته می شوند:

کد: 

<!-- This is a comment -->

نکته: یک علامت تعجب(!) بعد از براکت باز (>) است نه قبل از براکت بسته (<) یعنی به شکل: !> .

نکته مهم- نمایش کد های HTML یک صفحه
آیا تا به حال شما چیز های عجیبی در یک صفحه وب دیده اید و از خود بپرسید که چگونه این کار را انجام داده است؟!
برای پیدا کردن جواب فقط کافی است با راست کلیک بر رو صفحه و کلیک بروی View Source در IE و View Page Source در firefox کد های HTML صفحه را تماشا کنید و جواب خود را پیدا کنید.

**m-khan** · 09-08-2011، 09:27 AM

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

پاراگراف ها در HTML:
پاراگراف ها با تگ <p> تعریف می شوند.
مثال:

کد: 

<p>This is a paragraph</p>

 <p>This is another paragraph</p>

نکته:مرورگر ها به طور خودکار قبل و بعد از پاراگراف ها یک خط خالی ایجاد می کنند.

تگ پایانی را فراموش نکنید:
در بیشتر مرورگر ها در صورت فراموش کردن تگ پایانی، پاراگراف به درستی نمایش داده می شود:

کد: 

<p>This is a paragraph

 <p>This is another paragraph

مثال بالا در بیشتر مرورگر ها به درستی کار می کند اما بهتر است که تگ پایانی را همیشه استفاده کنیم چون در بعضی مواقع باعث به وجود آمدن نتایج غیره منتظره ای می شود.

شکستن خط ها در HTML:
برای رفتن به خط جدید بدون ایجاد پاراگراف جدید از تگ </br> استفاده می کنیم:

کد: 

<p>This is<br/>a para<br/>graph with line breaks</p>

اینم نتیجش:
[تصویر: 18html3.gif]

تگ </br> یک تگ بدون محتوا است به همین دلیل در همان تگ شروع بسته می شود:

کد: 

<br/>

تگ <br> یا </br>:
در XML و XHTML همه ی تگ ها باید بسته شوند.
ولی در HTML استفاده از هر دو تگ ذکر شده صحیح می باشد، پس تفاوتی بین این دو وجود ندارد و طراح برای استفاده از هر دوی آن ها مجاز است.

نکته مهم در HTML: شما نمی توانید مطمئن باشید سند HTML چگونه به نمایش در می آید، با تغییر اندازه ی صفحه ی نمایش ممکن است نتیجه ی متفاوتی ایجاد شود.

**m-khan** · 09-17-2011، 05:51 PM

ببخشید که دیر دیر تاپیک رو آپ می کنم، آخه زیاد طرفدار نداره منم زیاد انگیزه واسه ادامه دادن ندارم. Undecided

قال بندی متن ها در HTML:

تگ های قالب بندی در HTML:
در HTML با استفاده از یکسری تگ ها مانند: <b> و <i> می توان متن های کلفت(Bold) و مورب(italic) را ایجاد نمود. به این تگ ها، تگ های قالب بندی متن نیز می گویند چون این تگ ها قالب خاصی را به یک متن می دهند.

متن کلفت(Bold):
برای ایجاد متن کلفت در HTML از تگ <b> استفاده می کنیم:

کد: 

<b>This text is bold</b>

متن بزرگ(Big):
برای ایجاد متن بزرگ در HTML از تگ <big> استفاده می کنیم:

کد: 

<big>This text is big</big>

متن مورب(Italic):
برای ایجاد متن مورب یا کج در HTML از تگ <i> استفاده می کنیم:

کد: 

<i>This text is italic</i>

متن کوچک(Small):
برای ایجاد متن کوچک در HTML از تگ <small> استفاده می کنیم:

کد: 

<small>This text is small</small>

متن زیر نویس(Subscript) و متن بالا نویس(Super Script):
برای ایجاد متن زیر نویس در HTML از تگ <sub> و برای ایجاد متن بالا نویس از تگ <sup> استفاده می کنیم:

کد: 

This is<sub> subscript</sub> and <sup>superscript</sup>

اینم نتیجه برای کسایی که شاید متوجه نشده باشند:
[تصویر: jlf1yb5f9umuco96wa8l.gif]

نکته مهم: در HTML اگر بین فرقی نمی کند که بین یک متن چند تا فاصله باشه به هر حال در خروجی فقط یک فایل نمایش داده می شود مثلا:

کد: 

<p>This is a paragraph</p>

و

کد: 

<p>This is a                     paragraph</p>

هر دو در عمل به شکل زیر نمایش داده خواهند شد:
[تصویر: qguv8ui3lmzjsjem2f5.gif]

برای رفع این مشکل در HTML از تگ <pre> استفاده می شود:

کد: 

<pre>

This is

preformatted text.

It preserves  both spaces

and line breaks.

</pre>

ببینید:

نمونه های زیاد دیگری از تگ های قالب بندی متن ها در HTML وجود دارد که بعدا آن ها را نیز ذکر خواهیم کرد.
پایان قسمت هشتم.

ali pir · 09-18-2011، 06:28 AM

آقا کوجا طرفدار نداره بازم بذار رفیق!! دمت گرم!! [تصویر: 3.gif]

اجازه هست یه سوال هم بکنم؟؟ مگه مبنای همه وبلاگ ها و... HTML نیست؟ پس چرا قالب های وبلاگ ها مثلا میهن بلاگ و بلاگفا با هم فرق میکنند؟؟
راستی میتونی بگی که فرقشون توچه چیز هاییه؟؟ یا مثلا چه جوری میتونم قالب یه سایت یا وبلاگ رو برای وبلاگم استفاده کنم؟!
ببخشید دیگه اینجا سوال میکنم... راستی منتظر CSS و JavaScript هم هستیم!! Big Grin

**M@soud** · 09-18-2011، 06:46 AM

فرقشون توی متغیر هاست!
قالب شما به صورت خام مورد اتقاده قرار نمی گیره و در سیستم مورد نظر پردازش میشه!
مثلا تو بلاگفا متغیر های مثل<-BlogTitle->(عنوان وبلاگ) , <-BlogEmail-> (ایمیل نویسنده ی وبلاگ) و ........
هر سیستم متناسب با امکانات خودش متغیر های مربوط به خودش داره, برای همین نمیشه از یه قالب برای همه استفاده کرد.
البته بعضی سیستم های جدید اومدن متغیر هاشونو شبیه متغیر های سیستمهای بزرگ وبلاگ نویسی مثل بلاگفا کردند که بشه از اون قالب ها هم استفاده کرد!

**sinaqns** · 09-18-2011، 06:59 AM

در تکمیل حرف های مسعود باید بم که :
ما در یک صفحه وبسایت یا وبلاگ یکسری کد داریم که مرورگرها (firefox , ie N ...( بر طبق اصول قرار دادی فلان کد را فلان شکل نشون میدن و ما صفحه رو به این صورت میبینیم.
حالا همه ی این نوشته ها کد اند و درج این کد ها مسئله اصلی هست . یکی کد نویسه و خودش با استفاده از کد هایی که بلده وبسایت رو بالا میاره یا یکی هم از سرویس های وبلاگ دهی استفاده میکنه که خوبیش اینه که شما متن معمولی و عکس و ... وتردش میکنید , اون تبدیل به کد میکنه و در جای از قبل تعیین شده در قالب میگذاره
به همین سادگی Big Grin

10-22-2011، 05:02 PM

سلام به همگی
اقا یکی از طرفدارا ایناهاش حیو حاظر
خیلی تاپیکه خوبیه
به قوله دوستمون ما منتظر بقیشم هستیم
راستی یه سوال مثلا من چطوری میتونم متن داخل یک پاراگراف را بزرگ یا کوچیک کنم یا مثلا رنگشو عوض کنم شدنیه این کار؟؟؟؟
کد نوشتاریو بین دو تگ پاراگراف بزارم جواب میده ؟
بازم مرسی از تاپیکت Big Grin

**m-khan** · 11-16-2011، 07:11 AM

کار سختی نیست، توجه کنید:

کد: 

<p style="font-size:50 ;color:red">

yas-theme

</p>

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

lady-shin · 12-25-2011، 12:29 PM

دوست عزیز چرا دیگه ادامه نمیدی؟
توضیحاتت واقعا عالیه...یه دنیا ممنون

sansiz · 01-07-2012، 09:34 PM

اقا من هم با بقیه موافقم کارت خوبه ادامه بده

avadiss · 01-26-2012، 05:41 PM

سلام مطالبت خیلی عالی و مفیده خواهش میکنم ادامه بده

yas810 · 02-04-2012، 05:53 PM

بابا کارت درسته ...عالی بود

alireza es · 02-05-2012، 11:21 AM

هر کس بخواد بهم پیام بده واسش html5 رو آموزش بدم!
بهم پیام بدید
(نکته:برای html5 باید مقدمات طراحی وب رو بلد باشی)

**m-khan** · 02-16-2012، 07:11 PM

بعد از مدت ها می خوام شروع کنم به نوشتن و امیدوارم که با هم کاری شما این فعالیت ها ادامه داشته باشه. فقط یه خواهش، دوستانی که مطالب ما رو دنبال می کردند یه لطفی کنند و دوباره یه مرور سریع رو مطالب داشته باشند تا به مشکلی برنخورند.

فونت ها در HTML:
در HTML 4 به بعد استفاده از تگ <font> غیر معمول و غیر استاندارد شناخته شده و به جای آن از و style ها که بعدها به طور مفصل روی آن ها بحث خواهیم کرد استفاده می شود.

در زیر مثالی از کاربرد تگ <font> که استفاده از آن پشنهاد نمی شود آمده است:

کد: 

<font size="5" face="arial" color="red">

This paragraph is in Arial, size 5, and in red text color.

</font>

</p>

<p>

<font size="3" face="verdana" color="blue">

This paragraph is in Verdana, size 3, and in blue text color.

</font>

</p>

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

ما در مورد style ها در درس های بعد به صورت کامل بحث خواهیم کرد اما در این جا مثال هایی جهت آشنایی با این تگ برای شما خوهیم زد: (مثال ها خود گویای همه چیز هستند فقط به اندکی تأمل احتیاج است)

مثال 1. تغییر فونت متن:

کد: 

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

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

نکته: در تگ <h1> و <p> از ویژگی style استفاده شده( " "=style ) که درون آن از font-family استفاده شده کا مقدار آن همان نام فونت مورد نظر می باشد.

مثال 2. تغییر سایز متن:

کد: 

<h1 style="font-size:200%">This is a heading</h1>

<p style="font-size:110%">This is a paragraph.</p>

نکته: در مثال بالا برای تعیین اندازه ی فونت (font-size) به جای درصد از px نیز می توان استفاده نمود.

مثال 3. تغییر رنگ متن:

کد: 

<h1 style="color:blue">This is a heading</h1>

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

نکته: مقدار color رنگ متن را نمایش می دهد.

مثال 4. تغییر هم زمان فونت، سایز و رنگ متن:

کد: 

<p style="font-family:verdana;font-size:110%;color:green">

This is a paragraph with some text in it.

</p>

نکته: این مثال در واقع ترکیبی از سه مثال بالا است فقط از ; در بین آن ها استفاده شده است.

امیدوارم مورد پسند واقع شده باشه. Heart

حالت موضوعی \| حالت خطی آموزش HTML به صورت کامل از مبتدی تا حرفه ای
نویسنده	پیام