امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5

آموزش HTML از مبتدی تا پیشرفته (ترجمه مستقیم آموزشهای خارجی)
آفلاین هادی صفرزادهv
مدیر انجمن

*******
مدیر انجمن
ارسال‌ها: 19
تاریخ عضویت: 20 December 2012
اعتبار: 1
ارسال: #1
آموزش HTML از مبتدی تا پیشرفته (ترجمه مستقیم آموزشهای خارجی)



با سلام خدمت شما کاربر گرامی.


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


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


آموزش های از پست بعدی شرع می شن.

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.



یک مثال ساده HTML:


کد:
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>




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


توضیحات مثال:


•    DOCTYPE  نوع سندمان را مشخص می کند.

•    متن های بین  <html> و  </html> کد ها و توضیحات صفحه وبمان است.

•    کد های بین  <body> و  </body> محتویاتی که در صفحه وب دیده می شوند است.

•    متن بین <h1> و </h1> یک متن به عنوان هدر یا عنوان را نمایش می دهد.

•    متن بین <p> و </p> یک پارگراف را نمایش می دهد.



نکته: <!DOCTYPE html>  مشخص می کند که نوع سند ما برای  HTML5 می باشد.

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

پذیرش سفارشات طراحی،راه اندازی سایت، برنامه نویسی، پروژه های دانشجویی
(آخرین ویرایش در این ارسال: 25-06-2013 07:54 PM، توسط هادی صفرزاده.)
25-06-2013 07:48 PM
نقل قول این ارسال در یک پاسخ
آفلاین هادی صفرزادهv
مدیر انجمن

*******
مدیر انجمن
ارسال‌ها: 19
تاریخ عضویت: 20 December 2012
اعتبار: 1
ارسال: #2
آموزش HTML از مبتدی تا پیشرفته - HTML چیست ؟

HTML چیست ؟


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


•    HTML  مخفف Hyper Text Markup Language به معنی زبان نشانه گذاری فرامتن هست.


•    HTML  یه زبون نشانه گذاری هست به این معنی که با کدهاش هر قسمت از صفحه را براش یه نشانه می تونیم بزاریم مثلا برای عنوان یه متن میتونیم با کد خاصی یه رنگ آبی بدیم که با این کار ما برای اون قسمت این نشانه رو میزاریم که رنگش آبی باشه.


•    زبون نشانه گذاری زبونیه که باهاش می تونیم تگ های نشانه بزاریم.


•    تگ ها همون محتویات سندمون هست.


•    یک فایل HTML شامل تگ های HTML و متن معمولی هست.


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



تگ های HTML

تگ های نشانه گذاری HTML همون تگ های معمولی HTML  هستن

•    تگ های HTML واژه های کلیدی ایی هستن که بین علامت های کوچکتر و بزرگتر میان مثل <html>

•    تگ های HTML معمولا دو نوع دارن یا به دو شکل نوشته می شن مانند: <b>  و </b>

•    تگ اول تگ شروع نشانه مورد نظرمون هست و تگ دوم تگ پایان اون نشانه.

•    تگ پایان هر تگی مثل تگ شروع خودش هست با این تفاوت که قبلش یه اِسلَش ( / ) میاد.

•    تگ شروع و پایان همچنین تگ باز و بسته نیز خونده میشن.

<نام تگ>محتویات یا متن</نام تگ>

اِلمنت های HTML

" تگ های HTML " و " المنت های HTML  " هر دو برای بیان یک چیز استفاده می شن.

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

مثال:


<p> این یک پارگراف و همچنین یک المنت است. </p>

مرورگر وب

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

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

[تصویر:  pic_ie.jpg]

ساختار یک صفحه HTML

ساختار نمایشی یک صفحه HTML :

[تصویر:  sakhtare%20html.JPG]

ورژن های HTML

ورژن های مختلفی در سال های مختلف برای HTML وجود داشته که در زیر لیستی از آنها آورده شد
 
ورژن    سال
HTML     1991
HTML+    1993
HTML 2.0    1995
HTML 3.2    1997
HTML 4.01    1999
XHTML 1.0    2000
HTML5    2012
XHTML5    2013



توضیحات نحوه استفاده از DOCTYPE


HTML5

کد:
<!DOCTYPE html>


HTML4.01
کد:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">


XHTML1.0

کد:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



برای دیدن لیست کامل به لینک زیر مراجع کنید .

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.


 

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

پذیرش سفارشات طراحی،راه اندازی سایت، برنامه نویسی، پروژه های دانشجویی
(آخرین ویرایش در این ارسال: 30-06-2013 12:18 PM، توسط هادی صفرزاده.)
25-06-2013 08:57 PM
نقل قول این ارسال در یک پاسخ
آفلاین هادی صفرزادهv
مدیر انجمن

*******
مدیر انجمن
ارسال‌ها: 19
تاریخ عضویت: 20 December 2012
اعتبار: 1
ارسال: #3
ویرایشگر های HTML

 HTML را به وسیله نرم افزار NotePad یا ویرایشگر های متن بنویسید

HTML می تونه به وسیله نرم افزار های حرفه ایی ویرایش HTML، ویرایش و نوشته بشه، مثله:

[ul][li]Adobe Dreamweaver[/li][li]Microsoft Expression Web[/li][li]CoffeeCup HTML Editor[/li][/ul]
با این حال، برای یاد گیری HTML ما ویراشگرهای متن مثل NotePad (PC)  یا TextEdit (Mac) رو پیشنهاد می کنیم. ما باور داریم که استفاده از ویرایشگر های ساده راه حل خوبی است برای یادگرفتن HTML.

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

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

پذیرش سفارشات طراحی،راه اندازی سایت، برنامه نویسی، پروژه های دانشجویی
(آخرین ویرایش در این ارسال: 01-07-2013 11:31 AM، توسط هادی صفرزاده.)
01-07-2013 11:11 AM
نقل قول این ارسال در یک پاسخ
آفلاین هادی صفرزادهv
مدیر انجمن

*******
مدیر انجمن
ارسال‌ها: 19
تاریخ عضویت: 20 December 2012
اعتبار: 1
ارسال: #4
چهار مرحله ساخت یک صفحه وب با نوت پد


مرحله 1: اجرا کردن نوت پد

برای اجرا کردن نوت پد برید به:

نقل قول: Start    
-All Programs
-- Accessories
---Notepad





مرحله 2: نوشتن HTML  در نوت پد
کد HTML خود را داخل نوت پد بنوسید:

[تصویر:  pic_notepad.jpg]




مرحله 3: HTML خود را ذخیره کنید

Save As.. رو از منو فایل نوت پد انتخاب کنید.
وقتی شما فایل HTML خودتون رو می خواید ذخیره کنید می تونید از هر دو پسوند .HTM  و یا .HTML استفاده کنید. هیچ فرقی بینشون وجود نداره بستگی به خودتون داره که کدوم رو انتخاب کنید.

در آخر فایل خودتون رو تو یه پوشه ذخیره کنید و یادتون نره که زیر این پست روی تشکر کلیک کنید :ایکس .




مرحله 4: اجرا کردن HTML در مرورگر

مرورگر خود را اجرا کنید و فایل HTML خودتون رو از از منو File,Open باز کنید، یا فقط پوشه ایی که فایل رو اونجا ذخیره کردید رو باز کنید و روی فایل HTML دابل کلیک کنید.

نتیجه کار مانند عکس زیر باید باشه:



[تصویر:  pic_ie.jpg]

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

پذیرش سفارشات طراحی،راه اندازی سایت، برنامه نویسی، پروژه های دانشجویی
01-07-2013 01:53 PM
نقل قول این ارسال در یک پاسخ
آفلاین هادی صفرزادهv
مدیر انجمن

*******
مدیر انجمن
ارسال‌ها: 19
تاریخ عضویت: 20 December 2012
اعتبار: 1
ارسال: #5
کد های پایه و پر استفاده HTML

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


هدینگ یا سرتیتر های HTML

سر تیتر های HTML با تگ های <H1> تا <H6> شناخته می شن.

مثال

کد:
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.



پاراگراف های HTML

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

مثال
کد:
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>


دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.



لینک در HTML

در HTML لینک ها با تگ <A> شناخته می شن.

مثال

کد:
<a href="http://www.4html.ir">This is a link</a>

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.


نکته: آدرس لینک تو یه صفت مشخص شده HREF قرار میگیره.
(در مورد صفت ها بعدا یاد خواهید گرفت.)


تصویر در HTML

تگ تصویر در HTML با تگ <IMG> شناخته می شن.

مثال
کد:
<img src="http://4html.ir/images/smilies/40-40/7.gif" width="50" height="50">

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.


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

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

پذیرش سفارشات طراحی،راه اندازی سایت، برنامه نویسی، پروژه های دانشجویی
04-07-2013 12:38 PM
نقل قول این ارسال در یک پاسخ
آفلاین هادی صفرزادهv
مدیر انجمن

*******
مدیر انجمن
ارسال‌ها: 19
تاریخ عضویت: 20 December 2012
اعتبار: 1
ارسال: #6
آموزش HTML از مبتدی تا پیشرفته - المنت های HTML

سند های HTML المن های HTML نیز شناخته می شن.

المنت های HTML

به هرچیزی از تگ شروع HTML تا تگ پایان اون المنت HTML می گن:

[تصویر:  HTML ELEMENTS.jpg]


ظاهر نوشتاری المنت های HTML


[ul][li]یک المنت HTML با تگ شروع یا باز شروع می شود و با تگ پایاین یا بسته تمام می شود.
[/li][li]هرچیزی که بین تگ شروع و پایاین باشه محتویات المنت است.
[/li][li]بعضی از المنت های HTML هیچ محتویاتی نداردند.
[/li][li]المنت های بدون محتوا تگ بسته ندارند و با همان تگ شروع تمام می شوند.
[/li][li]بیشتر المنت های HTML می توانند صفت های خاصی داشته باشند.[/li][/ul]
نکته: در مورد صفت ها در درس بعدی خواهیم خواند.


المنت های تو در تو HTML

اکثر المنت های HTML می توانند تو در تو باشند (المنت های دیگری در خود داشته باشند).

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

یک مثال از سند HTML
کد:
<!DOCTYPE html>

<html>

<body>
<p>این یک پاراگراف است.</p>
</body>

</html>

مثال بالا از 3 المنت HTML تشکیل شده است.

توضیح مثال

المنت <P>:


<p>این یک پاراگراف است.</p>


المنت <P> در سند های HTML  به عنوان المنت پارارگراف شناخته میشود.
این المنت با <P> شروع می شود و با </P> تمام می شود.
محتویات این المنت در اینجا  " این یک پاراگراف است. " می باشد.

المنت <body>:
کد:
<body>
<p>این یک پاراگراف است.</p>
</body>



المنت <body> به عنوان بدنه یک سند html شناخته می شود.
این المنت با تگ <body> شروع می شود و با تگ </body> بسته یا تمام می شود.
محتویات این المنت یک المنت دیگر است (المنت P)

المنت <HTML>:


کد:
<html>

<body>
<p>این یک پاراگراف است.</p>
</body>

</html>


المنت <HTML> به عنوان کل HTML شناخته می شود.
این المنت با HTML> شروع می شود و با </HTML> تمام می شود.
محتویات المنت یک المنت دیگر است (المنت BODY )

تگ پایان را فراموش نکنید !

بعضی از المنت های HTML بدون تگ پایان هم به درستی نمایش داده  می شوند:


کد:
<p>این یک پاراگراف است
<p>این یک پارارگراف است


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

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

المنت های بدون محتوا

المنت هایی که هیچ محتویاتی ندارند المنت های تکی نامیده می شوند.
المنت <BR> یک المنت تکی است که هیچ تگ پایانی ندارد (این المنت به عنوان خط شکن یا همان پرش به خط بعد شناخته می شود)

نکته: در XHTML و XML همه تگ ها باید بسته شوند برای این کار کافیه که اول تگ شروه یک اسلش ( / ) اضافه کنید مانند </BR>


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

تگ های HTML به این قضیه حساس نیست: تگ <P> معنی همان <p> را می دهد. وب سایت هایی هستند که تگ های html را با حروف بزرگ می نویسند این مشکلی نداره ولی 4HTML از حروف کوپیک برای این کار استفاده می کند چون کنسرسیوم صفحه گسترده وب (World Wide Web Consortium (W3C)) حروف کوچک را پیشنهاد می دهد.

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

پذیرش سفارشات طراحی،راه اندازی سایت، برنامه نویسی، پروژه های دانشجویی
24-07-2013 12:14 PM
نقل قول این ارسال در یک پاسخ
آفلاین هادی صفرزادهv
مدیر انجمن

*******
مدیر انجمن
ارسال‌ها: 19
تاریخ عضویت: 20 December 2012
اعتبار: 1
ارسال: #7
صفات HTML

صفت ها اطلاعات اضافی ایی درباره المنت (عنصر) های HTML را فراهم می کنن.


صفات HTML


[ul][li]هر المنت HTML می تواند صفت هایی داشته باشد.[/li][li]صفت ها همیشه در تگ شروع مشخص می شوند.[/li][li]برای نوشتن صفت اول باید نام اون رو بنویسیم و بعد داخل " " مقدار اون رو وارد کنیم، مثل: نام="مقدار"[/li][/ul]

مثال صفت


لینک های HTML با تگ <a> شناخته می شون. اما آدرس لینک با صفت HREF مشخص می شود:


مثال

کد:
<a href="http://www.4HTML.IR">این یک لینک است</a>


دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.



همیشه مقدار صفت بین علامت نقل و قول است.


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

[تصویر:  lamp.gif] نکته: در بعضی مواقع که خود مقدار صفت شامل نقل و قول دو تایی هست لازمه که ما برای اون مقدار از نقل و قول تکی استفاده کنیم:

نام صفت = ' هادی " شات گان " دارد '


نکات HTML: از حروف کوچیک در صفت ها استفاده کنید


نام صفت و مقدار آن حساس به حروف نمی باشد.
اما با این حال کنسرسیوم شبکه جهانی وب (World Wide Web Consortium (W3C)) حروف کوچک رو در HTML 4 پیشنهاد می کنید.

ورژن جدید (X(HTML نیز حروف کوچک را پیشنهاد می دهد.

ارجاع به لیست صفت های HTML


لیست کاملی از صفت های هر المنت HTML در این لینک موجود است: دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.



در پایین لیست از تگ هایی است که از آنها می توان تو تمام تگ های HTML  استفاده کرد:

صفتتوضیحات
classیک یا چند classname رو برای یک عنصر مشخص می کند (class در css نوشته می شود).
id شناسه منحصر به فرد برای یک عنصر را مشخص می کند.
styleاستایل برخط CSS را برای یک عنصر مشخص می کند.
titleاطلاعات بیشتری درباره یک عنصر را مشخص  می کند (در نوار منحصر Tool Tip دیده می شود).

برای کسب اطلاعات بیشتر درباره صفت های عمومی: دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

پذیرش سفارشات طراحی،راه اندازی سایت، برنامه نویسی، پروژه های دانشجویی
30-07-2013 11:17 AM
نقل قول این ارسال در یک پاسخ





کاربرانِ درحال بازدید از این موضوع: 1 مهمان
                                 علم تجربه ای است شیرین و بی پایان کلیه حقوق مادی و معنوی این وب سایت برای انجمن های تخصصی HTML محفوظ می باشد                   طراحی و اجرا : سرورنگار