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


تبليغات
سامانه ي پيامکي آز پي ان يو مقالات ISI
فروشگاه اينترنتي آز پي ان يو خريد شارژ آز پي ان يو

آموزش htmlزمان کنونی: ۱۵-۹-۱۳۹۵، ۰۶:۰۶ :عصر
کاربرانِ درحال بازدید از این موضوع: 1 مهمان
نویسنده: Administrator
آخرین ارسال: sahar.n
پاسخ: 16
بازدید: 1860

ارسال پاسخ 
 
امتیاز موضوع:
  • 31 رأی - میانگین امتیازات: 3.65
  • 1
  • 2
  • 3
  • 4
  • 5

آموزش html

۲۵-۱-۱۳۹۱, ۰۶:۳۴ :عصر (آخرین ویرایش در این ارسال: ۲۵-۱-۱۳۹۱ ۰۶:۴۰ :عصر، توسط Administrator.)
ارسال: #1
آموزش html
درس اول :


HTML خلاصه شده ی چیست؟
Hyper Text Markup Language
Language به معنای یکی از زبان های برنامه نویسی.
Markup زبان بسیار ساده ای که از تگ ها استفاده می کند. (بدون ساختار خاصی است).
Text یک فایل متنی ساده است.
Hyper الگوی خطی ندارد (خطا در قسمتی از آن، باعث خطا در سایر قسمت ها نمی شود).


تگ ها:

Tag ها از 3 قسمت تشکیل شده اند:
1. یک علامت کوچکتر (>)
2. نام تگ
3. یک علامت بزرگتر (<)


نمونه:

<tagname>

تگ ها به صورت دوتایی استفاده می شوند و تشکیل عنصر (Element) را می دهند.

نمونه یک عنصر:

<tagname>content</tagname>

عنصر شامل:

1- (openning Tag) تگ آغازین
2- محتوا
3- (closing Tag) تگ پایانی


تفاوت تگ پایانی با آغازین داشتن علامت / قبل از نام تگ می باشد.

هر تگی که باز می شود باید در جایی بسته شود (البته موارد خاص هم دارد)

اولین نمونه :

برای کلفت نشان دادن متن یا bold کردن آن از تگ <b> استفاده می شود.
نوت پد ویندوز را باز کنید و متن زیر را در آن کپی کنید.

<b> azpnu.ir </b>

سپس فایل را با پسوند html ذحیره کرده و آن را در مرورگر اجرا کنید.

تمرین: متن مورد نظر خود را در این تگ نوشته و آن را در مرورگر خود ببینید. مهمان ها نمي توانند تصاوير را ببينند و دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
مردم شهری که همه در آن می لنگند
به کسی که راست می رود میخندند !
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
 سپاس شده توسط nasrin67 ، STAR ، sima ، nasrin ، yasi ، MostafA ، الهه ، mahan ، Glaxy ، sahar.n
۲۵-۱-۱۳۹۱, ۰۶:۴۸ :عصر (آخرین ویرایش در این ارسال: ۲۵-۱-۱۳۹۱ ۰۶:۵۳ :عصر، توسط Administrator.)
ارسال: #2
RE: آموزش html
درس دوم : تگ های مهم:

تگ <br />

<br />


برای ایجاد شکست خط (رفتن به خط بعدی)
نکته: جرو عناصر تهی (Empty Element) می باشد یعنی در انتهای بخش مورد نظر می آید.
در نسخه های قدیمی از <br> استفاده می شده است اما امروز از نمونه وارد شده در کد بالا استفاده می شود (به فاصله بین r و / دقت شود)

تگ <b> :
به معنای bold ، برای کلفت نمایش دادن متن.
<b> azpnu </b>

تگ <i> :
به معنای italic ، برای مورب نمایش دادن متن.
<i> azpnu </i>

تگ <u> :
به معنای under ، برای افزودن زیرخط به متن.
<u> azpnu </u>

تگ <strike> یا <s> :
به معنای strike ، برای نمایش متن به صورت خط خورده

تگ <sup> :
به معنای superscript ، برای نمایش متن به صورت بالانویس (حالت توان، بالاتر از متن عادی و کمی کوچکتر)

تگ <sub> :
به معنای subscript ، برای نمایش متن به صورت زیرنویس (حالت اندیس، پایین تر از متن عادی و کمی کوچکتر)

تگ <big> :
به معنای big ، برای نمایش متن به صورت بزرگ تر از متن های کناری

تگ <small> :
به معنای small ، برای نمایش متن به صورت کوچک تر از متن های کناری

نکته: استفاده از تگ ها به صورت مضاعف

همانطور که در توضیح تگ های big و small خواندید، این تگ ها متن داخل خود را نسبت به اطراف بزرگ تر یا کوچک تر می کنند. می توانید با وارد کردن چند مرتبه این تگ ها در داخل متن، آن را چندین باز بزرگ یا کوچک کنید.


نمونه:

<big>Here <big> is <big>azpnu</big> for </big> talar gofteman </big><br />

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

مردم شهری که همه در آن می لنگند
به کسی که راست می رود میخندند !
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
 سپاس شده توسط nasrin67 ، sima ، seda ، nasrin ، The DaRk PrOpheT ، yasi ، MostafA ، الهه ، mahan ، STAR ، sahar.n
۳۰-۱-۱۳۹۱, ۰۸:۴۹ :عصر
ارسال: #3
RE: آموزش html
سه تگ مهم دیگر

تگ <blink>

متنی که بین این تگ قرار می گیرد به صورت چشمک زن در می آید (نکته: تمامی مروگر ها به جز IE از این تگ پشتیبانی می کنند)

<blink>AZPNU</blink>

تگ <center>
برای وسط چین کردن متن

<center>AZPNU</center>

تگ <hr />

<hr />

برای ایجاد یک خط افقی. این تگ جزو تگ های تهی است و باید در محل مناسبی استفاده شود.
نمونه استفاده از این تگ در AZPNU، خط امضا می باشد. (خط میان ارسال و امضای کاربر)
می توان با استفاده از این تگ، خط را به شکل خای مختلف تعریف کرد.
نکته: در تگ های تهی به فاصله میان / و عبارت قبل از آن دقت شود.

1- سایز خط (کلفتی)
می تواند با افزودن عبارت size کلفتی خط را تعریف کرد. (نکته: سایز بر اساس پیکسل می باشد)

<hr size=20 />


2- طول خط
با استفاده از width می توانید طول خط را تعریف کنید. هم بر اساس پیکسل هم درصدی از عرض صفحه بیان می شود.
کد:
< hr width=20 />
یا
< hr width=20% />

3- محل قرارگیری (تراز)
با استفاده از align می توانید محل قرارگیری خط را تعریف کنید. (سه متغیر left ، right ، center)
کد:
align=right

4- رنگ خط
به چند طریق می توانید رنگ برای خط خود تعریف کنید.
آ. نام رنگ، که باید آن ها را به خاطر بسپارید.
16 رنگ استاندارد:
کد:
Black , silver , gray , white , maroon , red , purple , fushia , green , lime , olive , yellow , navy , blue , teal , aqua
ب. کد رنگ (مبنای هگزادسیمال)
فرم کلی به صورت rrggbb# می باشد. برای نمونه 00000# رنگ سفید است.

پ. تابع rgp
این تابع به ترتیب سه رنگ قرمز، سبز و ابی را به عنوان مقدار می پذیرد. اعداد آن به صورت عدد صحیح یا درصد است. اعداد صحیح قابل قبول بین 0 و 255 است که 255 برابر 100% می باشد.
rgb(0%,63%,100%)
یا
rgb(0,160,255)

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

5- ترکیب ویژگی ها
به آسانی می توانید ویژگی های بیان شده برای خط را با هم ترکیب کنید.


<hr width=20% size=20 />


تمرین:

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

<hr  width=20%  color=red size=10 align=right />
مردم شهری که همه در آن می لنگند
به کسی که راست می رود میخندند !
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
 سپاس شده توسط yasi ، MostafA ، STAR ، sahar.n ، الهه ، nasrin ، nasrin67
۳۰-۱-۱۳۹۱, ۰۹:۱۸ :عصر (آخرین ویرایش در این ارسال: ۳۰-۱-۱۳۹۱ ۰۹:۲۸ :عصر، توسط Administrator.)
ارسال: #4
RE: آموزش html
تگ قراردادن تصویر

<img />

نمونه کامل آن به صورت زیر است که شامل لینک تصویر و توضیحی درباره آن است.:

<img src="AZPNU.IR/AMIN.JPG" alt="Here is!" />

صفت های این تگ:

1- align : محل قرارگیری تصویر نسبت به متن و عناصر اطراف آن شامل مقادیر زیر:
عکس در سمت راست متن: right
عکس در سمت چپ متن : left
قسمت بالای عکس با خطی که در آن قرار دارد تراز می شود : top
میانه ی عکس با خطی که در آن قرار دارد تراز می شود: middle
قسمت پایینی عکس با خطی که در آن قرار دارد تراز می شود : bottom

2- alt : بیان توضیح برای تصویر، اگر تصویر بارگذاری نشود این متن به جای آن نمایش داده می شود. استفاده از alt در تگ تصویر امروزه ضروری می باشد.

3- height : ارتفاع تصویر بر اساس px یا درصد.

4- width : عرض تصویر بر اساس px با درصد.

5- border : ضخامت کادر عکس بر اساس px

6- vspace : فاصله تصویر از بالا و پایین با محیط.

7- hspace : فاصله تصویر از چپ و راست با محیط.

8- src : اصلی ترین صفت که لینک تصویر در آن قرار می گیرد.
مردم شهری که همه در آن می لنگند
به کسی که راست می رود میخندند !
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
 سپاس شده توسط Masoud Ebrahimi ، MostafA ، STAR ، sahar.n ، nasrin ، nasrin67
۳۰-۱-۱۳۹۱, ۰۹:۲۳ :عصر
ارسال: #5
RE: آموزش html
تگ <a> :

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

نمونه:

<a href="http://AZPNU.IR">TALAR GOFTEMAN</a>

صفت ها: (بعدا در مورد صفت ها توضیحات کلی بیشتری داده می شود)

href :

اصلی ترین صفت که لینک مورد نظر در آن قرار می گیرد.

توضیح اضافه در مورد لینک ها:
1- لینک کامل (مطلق یا absolute URL) : که لینک به طور کامل نوشته می شود، مانند:

http://AZPNU.IR

2- لینک ناقص (نسبی یا relative URL) : که در آن بخشی از آدرس نوشته می شود، مانند:

/images/smilies/angry.gif

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

Target :

نوع برخورد با صفحه لینک داده شده.

1- blank_ : باز کردن لینک در صفحه جدید.
2- self_ : باز کردن لینک در همان صفحه.
3- top_ : معمولا مانند self_ عمل می کند.


تمرین: لینک دار کردن عکس با استفاده از این آموزش و ارسال قبلی:
<a href="http://AZPNU.IR" target="_blank"><img src="http://AZPNU.IR/images/smilies/sad.gif" /></a>
مردم شهری که همه در آن می لنگند
به کسی که راست می رود میخندند !
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
 سپاس شده توسط MostafA ، STAR ، sahar.n ، nasrin ، nasrin67
۳۱-۱-۱۳۹۱, ۰۲:۵۰ :عصر
ارسال: #6
RE: آموزش html
صفت ها در html

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

صفت ها دارای دو قسمت هستند:

1- Name : نام صفت
2- Value : مقدار آن


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

نمونه:

<p align=''right">Amuzesh</p>

در این نمونه

align ، نام صفت و right ، مقدار آن می باشد.

نکته: کوتیشن ها می توانند به صورت تکی یا دو تایی باشند: " یا '

برخی از صفت های عمومی:

class : برای نسبت دادن کلاسی که با استفاده از زبان CSS نوشته شده است.

dir : جهت گیری متن را تعیین می کند. دو مقدار rtl برای راست به چپ و ltr برای چپ به راست را می پذیرد.

title : توضیح ساده که با رفتن موس بر روی قسمت مورد نظر نمایش داده می شود. (به صورت tooltip)

style : برای تعیین قواعدی که به زبان CSS تعریف شده است استفاده می شود.

قبلا با برخی از صفت های عمومی و خصوصی مانند align و alt و height و width و border و vspace و hspace و target و src و href آشنا شده اید.
مردم شهری که همه در آن می لنگند
به کسی که راست می رود میخندند !
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
 سپاس شده توسط nasrin ، STAR ، nasrin67 ، MostafA ، sahar.n
۳۱-۱-۱۳۹۱, ۰۲:۵۳ :عصر (آخرین ویرایش در این ارسال: ۳۱-۱-۱۳۹۱ ۰۵:۱۱ :عصر، توسط Administrator.)
ارسال: #7
RE: آموزش html
حالت کلی سند html


<! Doc Type>
نسخه html

<html>
html شروع سند

<head>
توضیحاتی درباره سند که در مرورگر نمایش داده نمی شود
</head>

<body>
هر چیزی که در مرورگر نشان داده می شود
</body>

</html>


نکته: با قرار دادن تگ title در قسمت header می توانید عنوان صفحه را برای مرورگر تعریف کنید.


<html>
<head>
<title>azpnu</title>
</head>
<body>
<p>Talar gofteman</p>
</body>
</html>


نکته ها:
هر صفحه html با یک تگ <html> آغاز و با تگ <html/> ، پایان می یابد.
عنصر <head> ، سر صفحه را مشخص می کند و می تواند شامل اطلاعاتی در مورد صفحه باشد.
عنصر <body> ، بدنه صفحه، اطلاعاتی که نمایش داده می شود.
مردم شهری که همه در آن می لنگند
به کسی که راست می رود میخندند !
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
 سپاس شده توسط nasrin ، STAR ، nasrin67 ، MostafA ، sahar.n
۳۱-۱-۱۳۹۱, ۰۲:۵۵ :عصر
ارسال: #8
RE: آموزش html
چند تگ دیگر

<#H>
برای تعیین اندازه متن که به جای # عددی بین 1 تا 6 قرار می گیرد.

<em>
برای تاکید روی یک متن که اغلب ظاهر آن به ضورت مورب می باشد.

<strong>
مانند <br> برای کلفت نشان دادن متن

<ins>
مانند <u> برای زیر خط دار کردن متن

<del>
مانند <s> برای نمایش متن به صورت خط خورده

<pre>
برای اینکه مرورگر متن شما را دقیق به همان شکل نمایش دهد (رعایت فاصله بین کلمات و ...)
برای نمونه ممکن است شما بین دو واژه از چند فاصله (space) استفاده کنید. تا زمانی که متن داخل این تگ نباشد مرورگر تمامی فاصله ها را یک مورد در نظر می گیرد!

<pre>
سلام،                  به تالار گفتمان آز پی ان یو خوش آمدید
</pre>
مردم شهری که همه در آن می لنگند
به کسی که راست می رود میخندند !
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
 سپاس شده توسط الهه ، nasrin ، STAR ، nasrin67 ، MostafA ، Masoud Ebrahimi ، sahar.n
۳۱-۱-۱۳۹۱, ۰۵:۰۸ :عصر (آخرین ویرایش در این ارسال: ۳۱-۱-۱۳۹۱ ۰۵:۰۹ :عصر، توسط Administrator.)
ارسال: #9
RE: آموزش html
تا اینجا تقریبا نیمی از HTML را آموخته اید.

ایجاد لیست نامرتب:

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


از <li> و <ul> برای ایجاد لیست نامرتب استفاده می شود.

<ul> </ul> : لیست را ایجاد می کند.
<li> </li> : هر گزینه یا هر خط درون این قرار می گیرد.


<ul>
<li>GOZINE 1</li>
<li>GOZINE 2</li>
</ul>

در کنار هر نوشته یک دایره یا مربع قرار می گیرد. شما می توانید با دادن صفت به <li> نوع آن را مشخص کنید. (می توانید از صفت ها در <ul> نیز استفاده کنید)

صفت ها

Type : با استفاده از آن می توان نوع علامت کنار هر گزینه را تعریف کرد که مقادیر زیر را می پذیرد:
circle : دایره تو خالی
Disc : دایره تو پر سیاه رنگ
Square : مربع تو پر


<ul type='disc'>
<li>GOZINE 1</li>
<li type="Square">GOZINE 2</li>
<li>GOZINE 3</li>
<li>GOZINE 4</li>
<li type="circle">GOZINE 5</li>
<li>GOZINE 6</li>
</ul>

اگر نمونه بالا را در فایل تمرین خود انجام دهید متوجه می شود که هر گزینه ای که صفت ندارد (<li> دارای صفت نمی باشد) از صفت تعریف شده برای <ul> پیروی می کند.


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


برای ورود به سایت کلیک کنید
مردم شهری که همه در آن می لنگند
به کسی که راست می رود میخندند !
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
 سپاس شده توسط STAR ، nasrin67 ، MostafA ، Masoud Ebrahimi ، sahar.n
۳۱-۱-۱۳۹۱, ۰۷:۳۹ :عصر (آخرین ویرایش در این ارسال: ۳۱-۱-۱۳۹۱ ۰۷:۴۴ :عصر، توسط Administrator.)
ارسال: #10
RE: آموزش html
لیست مرتب

از <ol> برای ایجاد لیست مرتب استفاده می شود. و گزینه های آن مانند قبل از <li> استفاده می شود.

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

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


<ol>
<li>Azpnu</li>
<li>Talar</li>
<li>gofteman</li>
</ol>


Type
برای تغییر نوع مرتب کردن (عدد یا حرف) از صفت Type استفاده می شود که دارای مقادیر زیر است:

<ol type=“I”>
<ol type=“i”>
<ol type=“A”>
<ol type=“1”>
<ol type=“a”>

I برای اعداد رومی بزرگ
i برای اعداد رومی کوچک
A برای حروف انگلیسی بزرگ
a برای حروف انگلیسی کوچک
1 استفاده از اعداد (که خود پیشفرض می باشد و نیازی به درج آن نیست)

صفت دوم

start
برای تعیین اینکه لیست شما از چه عدد یا حرفی آغاز شود. (توجه تنها باید یک عدد برای مقدار start وارد کنید. برای نمونه اگر می خواهید از حرف f آغاز شود باید عدد 6 را وارد کنید.)


<ol type="A" start="6">
<li>Azpnu</li>
<li>Talar</li>
<li>gofteman</li>
</ol>

نکته: اگر بخواهیم در میانه لیست تغییر ایجاد کنیم چه کنیم؟
برای نمونه بخواهیم یک لیستی با 10 گزینه را نمایش دهیم که 5 گزینه نخست با عدد 1 تا 5 و پنج گزینه بعدی با عدد 15 نمایش داده شوند.

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

نمونه:


<ol>
<li>Azpnu</li>
<li>Talar</li>
<li>gofteman</li>
<li value="15">bozogtarin</li>
<li>marjae</li>
<li>computer</li>
</ol>
مردم شهری که همه در آن می لنگند
به کسی که راست می رود میخندند !
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
 سپاس شده توسط MostafA ، STAR ، sahar.n ، sarina
ارسال پاسخ 


کسانی که از این موضوع بازدید کرده اند . . . ( آز پی ان یو )
4 کاربر زیر موضوع را خوانده اند:
Administrator (۱۱-۱۲-۱۳۹۴, ۰۵:۵۱ :عصر)، Ahmad (۱۷-۵-۱۳۹۲, ۱۱:۴۶ :صبح)، sahar.n (۷-۴-۱۳۹۲, ۰۸:۳۸ :صبح)، AliReza (۲۹-۶-۱۳۹۲, ۰۶:۴۶ :عصر)

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان


آپلودسنتر آز پي ان يو تالار گفتمان آز پي ان يو
تبلیغات نیازمندی های استان چهارمحال و بختیاری