آموزش کد نویسی

_MILAD_

بنام خدا

خب درس اول اموزش HTML
مواد لازم :
1.برنامه notepad ( %(#ff0000)[یا برنامه ای که لینکشو گذاشتمو دان کنید خیلی عالیه] )
2.تلاش خودتون که html واقعا ساده و جذاب
مقدمه :
شما برای کد نویسی html اول به یک ویرایشگر متن نیاز دارید مثل notepad
دیگر برنامه ها مثل office ,word مناسب نیستند چون کد هایی رو اضافه میکنند
خب حالا وقتی شما کدتون رو نوشتید وقتی میخواستید ذخیر ه کنید با پسوند html ذخیزه کنید مثل پارس کلاب

خب وقتی ذخیره شد بوسیله کلیک راست openwithرو پیدانید و با مرور گر دلخوا هتون کد خودتون رو باز کنید اصلا نیازی به اینترنت هم نیست اگه دوباره خواستید ویرایش بدید باز openwithرو بزن note pad
رو انتخاب کنید .
ولی باز میگم notepad++
خیلی راحت تره

_MILAD_

%(#ff0000)[+]
معرفی html:
خب ابتدا نرم افزار notepad++ رو اجرا کنید اگر هم ندارید ازnotepad استفاده کنید ولیnotepad++ کار باهاش اسونتره
اینم لینک دانلودش: https://notepad-plus-plus.org/
به کد زیر توجه کنید این کد نمونه ای از ساختار اصلی کد html است .

خب بریم سراغ توضیحات نمونه کد
1.DOCTYPEنوع فایل html را مشخص میکند
2.متن بین < < htmlو< </ htmlصفحه وب را توصیف میکند میکند (در جلسات بعد بصورت کامل توضیح میدم)
3.متن بین دو تگ h1,/h1یه متن بصورت عنوان مشخص میکند (در جلسات بعد بصورت کامل توضیح میدم)
4.متن بین و یک متن عادی رو نشون میده(در جلسات بعد بصورت کامل توضیح میدم)
توجه doctype در html5کاربرد دارد بزودیی اموزششو کامل توضیح میدم

Html چیست؟
Html زبان استاندار ططراحی صفحات وب است
Htmlیک زبان نشانه گذاری است به این معنا که اجزای مختلف بوسیه تگ ها از هم جدا میشوند و هر کدام دارای خواص خود هستند
در یک صفحه htmlمیتوان عناصر مختلفی گذاشت

تگ های html:
برچسب های نشانه گذاری htmlهمیشه برچسب های htmlخواند میشود (html tags)
تگ ها بین دو پرانتز شکسته قرار دارند مثل <html>
در جفت تگ htmlتگ اول تگ شروع و تگ دوم تگ پایان نام دارد تگ اول و تگ پایان مثل هم هستند اما قبل از تگ پایین یک خط مورب قرار دارد مثل </slash>
مثال کلی :

مرورگر های وب
منظور از مرور گر های وب مرور گر هایی است که از ش استفاده میکنیم دی: باهاش میتونی پروند htmlرو بخونی یا همون نتیجشو ببینی

Doctype
به مرور گر کمک میکند تا بتونی بطور صحیح صفحه وب نمایش داده شود که در html5بصورت
• <!DOCTYPE html>
نوشته میشود
خب حاالا برای امتحان نرم افزار notepad++یا notepad
رو اجرا کنید
کد زیر روی تایپ کنید تا دستتون برای کد نویسی روان بشه دی :

• <!DOCTYPE html>
• <html>
• <body>
• <h1>parsclub<h1>
• amozesh
• </body>
• </html>
خب فایل رو ذخیره کنید با پسوند html بعد باز کنید حواستون باشه با مرور گر بازش کنی دی :
نتیجه کد اینجوری میشه

_MILAD_

%(#ff0000)[سایت آموزش CSS3 به زبان انگلیسی]
×! پیشنهاد می کنم اگر دوست دارید css3 یاد بگیرید یه سر به این سایت بزنید !×
http://www.css3.info

_MILAD_

HTML مخفف Hyper Text Markup Language هستش ، اگه معنیشو نمیدونید معنیش میشه زبان نشانه گذاری فرا متنی!!!
زبان نشانه گذاری میگن چون ساختار دستوراتش بر اساس یکسری نشانه tag هست و فرامتنی میگن چون از متنی که تویه کاغذ نوشته میشه توانایی بیشتری داره...

HTML زبانیه که به مرورگر میگه که صفحات رو باید چطور نمایش بده! میشه گفت داره صفحات وب رو توصیف میکنه.

وقتی این همه برنامه برای ساخت صفحات وب هست چرا باید خودمو تو دردسر بندازم اچ تی ام ال یاد بگیرم!؟؟؟؟

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

مواد لازم:
هیچی! همون برنامه notepad تویه ویندوز کافیه! البته اگر برنامه notepad++ رو دانلود کنید میتونید تگ های html رو به صورت رنگی ببینید و امکانات بیشتری داشته باشید!

خوبه شروع کنیم دیگه! تویه notepad(++) یه سند جدید ایجاد کنید و توش کد زیر رو بنویسید:

<html>

<head>

 <title>In Onvane Safhast</title>

</head>

<body>

 In Ham Matne Safheye Avvle!

 Vay Khoda Daram Html Yad Migiram....

</body>

</html>

حالا اونو با یه نام دلخواه ذخیره کنید مثلا من به نام safeheye1.html ذخیره کردمش!
حالا باید نتیجه تلاشمون رو ببینیم فقط کافیه که روی فایلمون (منظورم safheye1.html) دابل کلیک کنیم!
اگر نتوستید صفحه رو باز کنید برید مرورگر رو باز کنید و از منوی File گزینه Open یا Open File رو انتخاب کنید و بعد هم فایلی که ایجاد کردید رو انتخاب و باز کنید!

اگه تا اینجا رو با دقت خونده باشید به نکات زیر حتما رسیدید:

هر صفحه html از یک فایل متنی تشکیل میشه که با پسوند html یا htm ذخیره میشه!
دستورات html ساختاری به صورت <ستور/>......<دستور> دارن!
ساختار هر فایل html به صورت زیر هست که از دو قسمت اصلی تشکیل میشه: head که توش عنوان title و یکسری اطلاعات دیگه قرار میگیره و body که توش عناصر صفحه قرار میگیرن!

<html>

<head>

</head>



<body>

</body>

</html>

دستورات html خودشون متن هستند و برای اجرا باید به کامپیوتر کاربر منتقل بشن. میتونید این موضوع رو امتحان کنید فقط کافیه تویه همین صفحه که هستند راست کلیک کنید و بعد گزینه View Source یا View Page Source رو انتخاب کنید. واسه همینه که میگن html یک زبان سمت کاربر هستش!
توانایی متون html از متون کاغذی خیلی بیشتره به عنوان مثال دیدید که با کلیک رویه کلمه میشه یه صفحه جدید باز کرد

_MILAD_

متن ها

اگر شما می خواهید متنی را به صفحه html خود اضافه کنید کافی است متن دلخواه را در قسمت Body از صفحه html تایپ کنید.
مثال:
ویراستار notepad یا notepad++ خود را باز کنید و کد زیر را تایپ کنید

<html>

<head>

<title>my page</title>

</head>

<body>

.سلام !!این صفحه وب من است.

</body>

</html>

سپس با پسوند htm یا html آن را ذخیره کنید.
با باز کردن مثال خود با مرورگر Internet Explorer یا هر مرورگر دیگر نتیجه به صورت زیر خواهد شد:

سلام !!این صفحه وب من است.

اگر خطوط را به صورت "خرچنگ قورباغه" مي بينيد,فرار نكنيد, کافی است در هنگام Save کردن در پایین پنجره گزینه Encoding را با UTF-8 تنظیم کنید
(در صورت استفاده از n++ باید قبل از save کردن از منوی Format گزینه Encode in UTF-8 را انتخاب نمایید)

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

_MILAD_

متن قسمت 2
فونت پیش فرض (BASE FONT):
برای اینکه متنی که در کل صفحه html وارد می کنید به یک شکل دیده شود یا به عبارت دیگر یک فونت سراسری با اندازه و رنگ یکسان داشته باشید کافی است که از دستور <basefont> در ابتدای قسمت بدنه (body) استفاده کنید.
مثال: ویراستار Notpade++ خود را باز کنید و کد زیر را تایپ کنید سپس با پسوند htm یا html و با نام دلخواه آن را ذخیره کنید.

1.<html>

2.<head>

```
 <title>my page</title> 
```

4.</head>

<body>

<basefont face="Tahoma, arial, verdana" size="4" color="red">

```
  Hello! This is my page. 
```
```
  All text looks the same
```
```
  since I only specified a basefont
```

10.</body>

11.</html>

در مثال بالا خاصیت های color,size,face از دستور basefont به ترتیب بیانگر فونت, اندازه یا سایز متن ( 1کوچکترین و 7 بزرگترین سایز) ورنگ متن html شما هستند.

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

Hello! This is my page. All text looks the same
since I only specified a basefont

توجه کنید که در هنگام نوشتن متون html برای رفتن به خط بعدی باید از دستور
استفاده کنید. با توجه به مثال خواهید دید که در خط 7 از
استفاده نکردیم و به همین دلیل متن نوشته شده در خط 8 با وجود اینکه در خط بعدی کد نوشته شده درخروجی بلافاصله بعد از متن خط 7 دیده میشود.

_MILAD_

تغییر فونت متن :
با استفاده از دستور می توان فونت ,رنگ و اندازه متن را تغییر داد.
مثال: ویراستار Notpade++ خود را باز کنید و کد زیر را تایپ کنید سپس با پسوند htm یا html و با نام دلخواه آن را ذخیره کنید.

<html>

<head>

</head>

<body>

Hello! This is my page.

This local text looks different.

This text looks like the first line.

</body>

</html>

با باز کردن مثال خود با مرورگر Internet Explorer , کد بالا نتیجه زیر را در مرورگر خواهد داشت:
%(#ff0000)[Hello! This is my page.]

This local text looks different.

%(#ff0000)[This text looks like the first line.]

%(#007bff)[با استفاده از صفت های color,face,size از دستور می توان به ترتیب اندازه (1 کوچکترین و7 بزرگترین) ,نوع فونت و رنگ متن را تعیین کرد.]

%(#007bff)[تفاوت font با basefont]
%(#ff0000)[basefont در کل صفحه وب اعمال می شود.در حالی که در دستور font تنها متنی که بین … قرار دارد تحت تاثیر این دستور و صفت های آن(face,color,size) قرار می گیرد]

_MILAD_

اما در حال حاضر و در روش های جدید دیگه از font یا basefont استفاده نمیشه و در html5 کلاً تگ font منسوخ شده و حذف شده از این زبان !
به جاش از css استفاده میشه برای تغییر در فونت و استایل المان مورد نظر !
یک مثال کوچیک !

<!DOCTYPE html>

<html>

<head>

	<title>پارس کلاب - شبکه آموزش</title>

	<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">

	

	<style>

		body{

			font-family:tahoma,arial;

			font-size:12px;

			margin:0px;

			padding:0px;

			background-color:#ebebeb;

			color:#222;

			direction:rtl;

		}

		p{

			color:green;

			font-size:14px;

		}

		.custom{

			background-color:#9c00ff;

			color:#ffffff;

			display:inline-block;

			padding:10px;

			margin:10px;

			width:500px;

			text-align:center;

		}

	</style>

</head>

<body>

	<p>

		پاراگراف با متن سبز رنگ

	</p>	

	<span class="custom">

		يک متن با استايل ويژه

	</span>

</body>

</html>

_MILAD_

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

_MILAD_

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

M.an

من پیشنهاد می کنم برنامه براکت رو نصب کنید سرعت کدنویسی تون بره بالا

_MILAD_

@m-an در آموزش کد نویسی گفته است:

صب کنید

پیشنهاد خیلی خوبیه اما من فکر کردم برای اینکه راحت تره محیطش بهتره وگرنه براکت هم پیشنهاد خیلی عالیه !!!

M.an

_MILAD_
هر طور خودتون می دونید فقط یه پیشنهاد بود

_MILAD_

@m-an نه خودمم اول پیشنهادم براکت بود خیلی خوبه بنظرم شیک تره و بهتر ... دوستان هر کدومو دوس داشتن انتخاب کنن

_MILAD_

_MILAD_

لینک ها
لینک ها بنیادی ترین قسمت از شبکه ارتباط جهانی (www) هستند. بنابرین توصیه می شود که هزینه زمانی بیشتری برای این قسمت صرف کنید. ما هم سعی می کنیم با آوردن مثال های متنوع به شما برای یاد گیری این بخش کمک کنیم. باید توجه داشت که هم متون و هم عکس ها می توانند به عنوان لینک مورد استفاده قرار بگیرند.
مثال زیر را با هم بررسی می کنیم.
مثال 1) برای رفتن به سایت گوگل از سایت پارس کلاب کافی است که بر روی www.google.com کلیک کنید.

انواع لینک (link) در html

لینک سراسری(Global Links): لینک هایی که به صفحات یک سایت دیگر اشاره دارند.
لینک محلی یا موضعی(Local Links): لینک هایی که به صفحات دیگر همان سایت اشاره می کند. یعنی از سایتی که در آن هستید خارج نمی شوند.
لینک داخلی (Internal Links): لینک هایی هستند که به قسمتی همان صفحه ای که در آن هستید اشاره می کنند.

چگونه لینک html بسازیم؟؟؟
برای ساختن لینک کافی است از دستور <a>...</a> مخفف anchor استفاده کنیم. هر آنچه که بین </a>…<a> قرار می گیرد به عنوان لینک شناخته می شود. برای اینکه مقصد لینک نیز مشخص شود از صفت href مخفف "hypertext reference" استفاده می کنیم. توجه کنید بین دستور a هر المانی از جمله متن ، عکس و... می تواند قرار بگیرد و بعد از این کار با کلیک بر روی آن المان به پیوند مورد نظر منتقل خواهیم شد.

پس شکل کلی این دستور در زبان html به صورت زیر است:

<a href="url">متنی که به عنوان لینک شناخته خواهد شد</a>

<a href="">هر المانی که قرار است به عنوان لینک استفاده شود</a>

Global link - لینک سراسری یا جهانی :
ویراستار Notpade++ خود را باز کنید و کد زیر را تایپ کنید سپس با پسوند htm یا html و با نام GlobalLink آن را ذخیره کنید.

<html>

<head>

   <title>My Page</title>

</head>

<body>

         Click <a href="http://www.google.com">here</a> to go to google.

</body>

</html>

حال اگر با مرورگر صفحه مورد نظر را باز کنید نتیجه به صورت زیر مشاهده خواهد شد:

Click# here to go to google.

با فشردن کلمه here به سایت گوگل خواهید رفت , به همین سادگی.

Local link - لینک محلی:
قبل از اینکه به این مثال بپردازیم یک صفحه html بنام firstpage را در درایو c خود بسازید.سپس ویراستار NotPad++ را باز کرده و کد زیر را در آن تایپ کنید و آن را با نام Internallink و با پسوند htm ذخیره کنید

Click <a href="c:\ firstpage.htm">here</a> to go to firstpage.

حال اگر با مرورگر صفحه Internallink.htm را باز کنید، صفحه مورد نظر برای شما نمایش داده میشود!

Intrnal Link - پیوند داخلی:
برای اینکه به قسمت خاصی از صفحه وبی که در آن قرار داریم ، پیوند بر قرار کنیم یا به عبارت دیگر به قسمتی از همان صفحه html پرش کنیم، باید از صفت name از دستور<a>…</a> برای نام گذاری آن بخش استفاده کنیم.این نام از حروف تشکیل می شود که باید منحصر به فرد نیز باشد. مثلا قسمتی از صفحه را انتخاب می کنیم و در آن قسمت دستور <a name="mesale1">…</a> را می نویسیم حال برای مراجعه به آن بخش کافی است در پیوند داخلی که ایجاد می کنیم علامت # و بعد نامی که انتخاب کرده بودیم را می نویسیم. در این مثال باید بنویسیم <a href="#mesale1">…</a>. مثال کامل زیر بهتر به تشریح این موضوع خواهد پرداخت.

<html>

<head>

  <title>my page</title>

</head>

<body>

    <h3><a href="#Chapter 1">Introduction</a></h2>

    <h3><a href="#Chapter 2">html text</a></h2>

    <h3><a href="#Chapter 3">html links</a></h2>



    <a name=" Chapter 1"> Introduction </a></br>

    <!-- Introdution متن مربوط به  --></br>



    <a name=" Chapter 2"> html text</a></br>

    <!-- html text متن مربوط به  --></br>



    <a name=" Chapter 3"> html links</a></br>

    <!-- html links متن مربوط به  --></br>

</body>

</html>

در مثال بالا فرض کنید صفحه وبی داریم که شامل اطلاعاتی در مورد html است که به 3 فصل html links, html text ,Introduction تقسیم شده است که در بالای صفحه آمده اند. توضیح همه این فصل ها درهمین صفحه قرار دارد.
حال برای دیدن متن مربوط به html text کافی است بر روی لینک html text کلیک کنیم. با یاد داریم که این نوع پیوند ، پیوند داخلی نام دارد. پس 2 مرحله برای ایجاد پیوند داخلی داریم:

1)نام گذاری بخشی که می خواهیم با لینک آن را ببینیم.
<a name="#Chapter 2">html text</a>

2)ایجاد پیوند به بخش نام گذاری شده.
<a href="#Chapter 2">html text</a>

_MILAD_

لینک های رنگی بسازید:
برای اینکه لینک ها را در صفحه خود به صورت متمایز نمایش دهیم می توان برای آنها رنگ مشخص کرد.
دو حالت برای تعریف کردن رنگ لینک ها وجود دارد:
1)رنگ تمام لینک ها در صفحه به یک صورت تعریف شود.
2)برای بعضی از لینک ها رنگ متفاوتی تعریف کنیم.

link,vlink,alink ؟!! یعنی چی؟
link: بیان کننده رنگ پیوند هایی است که تا کنون ملاقات نشده اند. استاندارد آن آبی (blue یا #0000FF) است.
vlink مخفف Visited Link :رنگ پیوند را پس از ملاقات شدن نمایش می دهد.استاندارد آن ارغوانی (purple - #800080) است.
alink مخفف Active Link :رنگ لینک را وقتی که ماوس بر روی آن قرار می گیرد ، مشخص می کند.استاندارد آن قرمز (red - #FF0000) است.

یک رنگ برای تمام لینک های موجود در صفحه html

کافی است که در قسمت <body> از صفت های link,vlink,alink استفاده کنیم.

هر لینک یک رنگ
اگر بخواهیم رنگ یک یا چند لینک را در صفحه html ، متفاوت از بقیه نشان دهیم از یکی از دو روش زیر استفاده می کنیم.

روش اول:استفاده از دستور font بین دستور <a href>…</a>باید به این نکته مهم توجه داشت که دستور font حتما باید بین <a href>…</a> قرار بگیرد.

Click <a href="http://www.webfocus.ir"> here </a> to go to webfocus.

روش دوم:استفاده از خاصیت style در دستور <a>

Click <a href="http://www.webfocus.com" style="color: green">here</a> to go to webfocus.

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

عضی رنگ های معروف:
Black, Aqua , Fushia, Blue, Gray, Green, Lime, Marron, Navy, Olive, Purple, Red,Silver,Teal,White,Yellow .

نکته :به جای نوشتن اسامی رنگ ها, می توان از فرمت RGB استفاده کرد.که b,g,r به ترتیب مخفف blue,green,red هستند.که هر یک می توانند مقداری بین 0 تا 255 بگیرند. رنگ مورد نظر از ترکیب این رنگ ها به دست خواهد آمد. مثلا 187 017 142 رنگی مایل به بنفش خواد بود. البته اکثر طراحان ترجیح می دهند که این رنگ ها را در مبنای شانزده (hex) بیان کنند مثلا رنگ معادل مثال قبل در مبنای شانزده به صورت 8E11BB# نوشته می شود.

_MILAD_

صفات مربوط به دستور پیوند (Link Attributes )
در مورد صفت های href وname به طور مفصل صحبت کردیم حال به توضیح صفت های دیگر این دستور می پردازیم.
صفت title : با استفاده از این صفت وقتی ماوس بر روی پیوند مورد نظر قرار می گیرد متنی که در جلوی این صفت نوشته شده ظاهر می شود.
مثال:

<a href ="www.parsclub.net" title="for more learning html click here">learning html</a>

وقتی ماوس روی پیوندhml learning قرار می گیرد پیام for more learning html click here ظاهر می شود.

صفت tabindex : با استفاده از این صفت و مقدار دادن به آن در مرورگرهایی که ازاین صفت پشتیبانی می کنند ,روند انتخاب کردن پیوند را با استفاده از کلید Tab مشخص می کنیم.
مثال:

<a href =" لينک tabindex="1">yahoo</a>

<a href =" لينک tabindex="3">google</a>

<a href ="http://parsclub.net" tabindex="2">webfocus</a>

با یک بار فشردن کلید Tabمکان نما بر روی پیوند yahoo با دو بار فشردن مکان نما بر روی پیوند parsclub و با سه بار فشردن کلید Tab مکان نما بر روی پیوند google قرار می گیرد.
حال اگر ازاین صفت استفاده نکنیم ,با هر بار فشردن کلید Tab ,مکان نما به ترتیبی که پیوندها در صفحه آورده شده اند ,حرکت می کنند.مثلا اگر در مثال بالا از صفت tabindex استفاده نشود,با یک بار فشردن Tab مکان نما بر روی پیوند yahoo با دو بار فشردن بر روی پیوند google و با سه بار فشردن برروی پیوند parsclub قرار می گیرد.

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

_MILAD_

این html بود
html5 نیست
فقط یه چیزی این اموزش ها چند تا قسمتش هم از رشیدی تو سایتیه که ادرسش اون بالاس و در گروه شبکه اموزش هست

_MILAD_

/: هوممم دوس داشتم اینو ادامه بدم ولی استقبال نداشت و این حرفا

آلاخونه

شاید شد...چه میدانی؟!

بحث آزاد

تمام رو به اتمام

ردپا

خــــــــــودنویس

به که باید دل بست؟

ای که با من ، آشنایی داشتی

امروز نه آغاز و نه انجام جهان است...

پروانه‌ی رنگین

حواست بوده است حتما...

امیدوارم نشناسند مرا... پیش از این، ستاره بودم!

خاطرات خواهر برادری

کتابخانه رنگی

کمکککک

بیاین انگیزه بدین

از روزای اول دانشگاهت بگو

سال بعد این موقع کجائیم؟؟؟؟؟؟؟؟؟؟

اشتباهات طلایی؛ درس‌هایی که از سال قبل گرفتیم

روز دختر

این فیلمو ببین

آموزش کد نویسی