تبليغات

رتبه موضوع:
  • 6 رای - 3.17 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
آشنایی با تگ های html
مدیریت کـــل
*******

مدیریت کل ای اچ پی

وضعيت : آفلاین
ارسال‌ها:2,022
تاریخ عضویت:Oct 2016

اعتبار: 200
دلنوشته من ان هذه تذکرة فمن شاء اتخذ الى ربه سبیلا؛ مسلما این تذکرى است، هر کس بخواهد راهى به سوى پروردگارش انتخاب مى کند

#1
آشنایی با تگ های html
[عکس: html5.png]

آموزش اول / html / آشنایی با تگ ها


  ...به نام خالق بشر...
با آموزش مبتدی آشنایی با تگ های زبان html اچ تی ام ال در خدمت شما عزیزان هستیم
خب دوستان ای اچ پی لطفا مطلب را بصورت دقیق و کامل مطالعه کنید و شدیدا از کپی برداری خودداری کنید
این آموزش توسط دوستان ما در انجمن امنیتی ای اچ پی طرح شده و توسط مهندس فرهاد خانلری نوشته شده است!
همانطور که میدانید صفحات وب صفحاتی هستند که بیشتر در اینترنت به کار برده میشوند در حقیقت تمام صفحات وب با HTML نوشته میشود اگر صفحه نیز با استفاده از Php , ASP یا زبان های دیگر ساخته شده باشد خروجی آن فقط دستورات Html و Javascript می باشد . Html یا Hyper Text Markup Language به ما توانایی تعیین فرمت متن ، اضافه کردن تصاویر ، صدا و ویدئو و ... در صفحات اینترنت را میدهد.یک صفحه وب چیزی جز یک فایل از نوع متن با پسوند Htm نیست با باز کردن این فایل توسط یک ویرایشگر ساده مثل notepad شما میتوانید کد های HTML رو ببینید و همچنین برای دیدن خروجی اصلی HTML میتوانید از مرورگرهای اینترنتی همانند Internet Explorer ، Mozila و ... استفاده کنید.

تگ یا Tag در HTML چیست ؟

به دستورات برنامه نویسی توسط HTML تگ یا TAG گفته میشود و در علامت های “ < ” یا “ > ” قرار میگیرند.این تگ ها به صورت های مختلف نوشته میشوند یک دسته از این تگها تگ هایی هستند که در هر جایی از صفحه ممکن است درج شود مانند تگ <HR> و هر وقت این کد درج شود بلافاصله یک خط افقی درج میگردد.یک سری تگ یا TAG هستند که باید ابتدا و انتهای مشخصی داشته باشند یعنی این تگ ها دارای ابتدا و انتها هستند و از این نوع تگ ها زیاد استفاده میشود مانند تگ <B> که زمانی این تگ باز میشود تا بسته شدن این تگ هر نوشته ای که مابین این دو تگ باشد BOLD میشود و انتهای تمام تگ ها با یک اسلش به پایان میرسد مانند <B/> یک سری تگ دیگر هستند که علاوه بر اینکه ابتدا و انتهای آن مشخص است این تگ ها وجودشان مستلزم داشتن یک سری پارامتر است مانند تگ Font که دارای پارامتر های گوناگون است به صورت مثال:
کد پی‌اچ‌پی:
<Font Face =”Tahoma” Size =20>www.ahphack.net</Font
اگر کد بالا را خروجی بگیریم میبینیم که آدرس سایت itpro با فونت Tahoma و با اندازه 20 نمایان میگردد.البته تعداد این پارامتر ها میتواند زیاد باشد.


آشنایی با برخی از تگ ها

  • تگ <Hn>
از این تگ معمولاً برای استفاده از عناوین استفاده میشود البته به جای n باید یک عدد به کار برده شود این اعداد از 1 تا 6 هستند h1 یعنی بزرگترین حالت و h6 یعنی کوچکترین حالت برای متن ها به کار برده میشود.
  • تگ <I> یا <em>یا <address>
این تگ نیز باید با اسلش به پایان برسد وظیفه این تگ مورب کردن یا ایتالیک متن است .
  • تگ <B> یا <Strong>
این تگ برای Bold کردن متن به کار برده میشود.
  • تگ <U>
برای نمایش متن به صورت زیر خط دار این تگ به کار می آید
  • تگ <Strike>
این تگ نیز برای این به کار میرود که یک خط را روی متن میکشد برای اینکه بتوانیم فونت یا قلم یک متن را مشخص کنیم از این تگ استفاده میکنیم ، اما اگر از این تگ استفاده نکنیم مرورگر اینترنت از فونت پیشفرض برای نمایش متن ها نشان میدهد و اگر فونتی را انتخاب کنیم که آن فونت در سیستم موجود نباشد باز هم همان فونت پیشفرض را برای ما به نمایش میگذارد.این تگ نیز دارای پارامتر هایی است مثلاً پارامتر Face برای تعیین نوع فونت به کار میرود شما میتوانید در این پارامتر با کاما چندین فونت را به کار ببرید تا اگر فونت ها در سیستم مقابل موجود نبود از یک فونت دیگر استفاده کند ، یکی دیگر از پارامتر های این تگ پارامتر Size است که اندازه فونت را نمایش میدهد حتی میتوان با استفاده از پارامتر color=red مثلاً رنگ قرمز را برای فونت انتخاب نمود :
[/url]
  • تگ <BR>
این تگ از جمله تگ هایی است که نیاز به پایان ندارد اما با پیدایش این تگ خط شکسته میشود به عبارتی متن به خط بعدی ادامه پیدا میکند
  • تگ <Center>
نتیجه استفاده از این تگ این است که متن داخل این تگ وسط چین می شود و در وسط مرورگر به نمایش در می آید
  • تگ <P>
از این تگ برای ایجاد پاراگراف استفاده میشود در انتهای متن این تگ باید بسته شود.
کلاً HTML با فاصله رابطه خوبی ندارد یعنی فاصله ها را در نظر نمیگیرد و خصوص خالی میان کلمات را نمیبیند و کلمات را پشت سر هم قرار میدهد این تگ که باید پایان هم داشته باشد برای این منظور است که هر کلمه یا پاراگرافی را در این تگ قرار دهید همانگونه که تایپ می شوند نمایش داده میشود و فاصله ها را هم در نظر میگیرد.
  • تگ <Ul>
این تگ مخفف Unordered List یا لیست هایی که به ترتیب موارد در آنها تاثیر ندارد می باشد هر لیست از آیتم یا مواردی تشکیل شده است که هر یک از این موارد با تگ <Li> (که این تگ نیز دارای پایان است در در داخل تگ <Ul> نوشته میشود .تگ Li مخفف ListItem یا همان موارد لیست است. این تگ مخفف Ordered List یا لیست هایی که ترتیب موارد در آنها تاثیر دارد می باشد هر لیست از آیتم یا مواردی تشکیل شده است که هر یک از این موارد بین تگ های <Ol> , </Ol> با تگ
<Li> , </Li> نوشته میشود تگ Li مخفف listeItem است.
  • تگ <bdo>
این تگ نیز دارای انتها است و برای راستچین یا چپ چین نوشتن متن به کار برده میشود اگر
کد پی‌اچ‌پی:
dir="rtl" 

تعریف شود حروف از راست به چپ قرار میگیرد یعنی کلمه بر عکس می شود و اگر dir برابر با ltr باشد تغییری در کلمه ایجاد نمی شود
  • تگ <div> و <span>
این دو تگ از مهمترین تگ های طراحی صفخات وب هستند این دو تگ را برای دسته بندی متون و سپس استایل دادن مناسب به این دسته ها میتوان استفاده نمود یک کلاس در CSS میتواند به div و Span نسبت داده شود و این دو تگ از نظر ظاهری هیچ شکل خاصی ندارند و تنها با استایل شکل ظاهری شان تغییر میکند و تنها تفاوت div نسبت یه span در این است که div جدا کننده صفحه است زیرا div مانند پاراگراف ابتدا و انتهای متن را می بندد.
  • تگ<sup> و <sub>
از تگ sup برای نمایش توان و از تگ sub برای نمایش اندیس استفاده میشود البته برای فرمول های شیمیایی و ریاضی بیشتر کاربرد دارد!
  • تگ <Object>
از این تگ برای قراردادن یک فایل خارجی در فایل HTML استفاده می شود ، میتوان از این تگ برای قراردادن فایل های فلش و یا انواع فایل های ویدئویی استفاده نمود مثال زیر را ببینید
با پارامتر زیر آدرس فیلم خود را میتوانید معرفی نمایید
کد پی‌اچ‌پی:
<param name="src" value="example.mpg"/> 

با پارامتر زیر فیلم را به صورت خودکار میتوانید پخش کنید Smile
کد پی‌اچ‌پی:
<param name="autoplay" value="true"/> 

  • تگ <img>
این تگ از پرکاربرد ترین تگ ها می باشد و از جمله تگ هایی است که پایان ندارد کاربرد این تگ برای نمایش عکس در صفحات وب است استفاده از crs یا source همان آدرس تصویر است و alt نوشته ای است که Tooltip موس برای آن تصویر به نمایش در می آید
  • تگ <a>
این تگ نیز دارای پایان است و از این تگ برای ایجاد لینک ارتباطی به یک صفحه دیگر استفاده می شود این تگ دارای خاصیت target است که به مکان باز شدن صفحه جدید اشاره دارد و این خاصیت مقادیر Blank یعنی باز شدن در یم صفحه جداگانه و parent یعنی باز شدن در صفحه اصلی و self یعنی باز شدن در همان صفحه و در نهایت top یعنی باز شدن در یک صفحه که بالا تر از صفحات دیگر است را دارا است.
ضمناً برای ساختن لینک ایمیل کافی است از دستور زیر استفاده شود:
کد پی‌اچ‌پی:
<a href="mailto:info@ahphack.net">send feedback</a
  • تگ <table>
هر جدول از سط و ستون تشکیل شده است در HTML سطر هر جدول را با تگ <tr> و ستون ها را با تگ <td> یا به عبارتی محتویات داخل هر سلول را مشخص میکنیم. مانند:
کد پی‌اچ‌پی:
<table>
<
tr>
 
  <tdrow 1 cell 1 </td>
 
  <tdrow 1 cell 2 </td>
 
  <tdrow 1 cell 3 </td>
</
tr>
<
tr>
<
tdrow 2 cell 1 </td>
<
tdrow 2 cell 2 </td>
<
tdrow 2 cell 3 </td>
</
tr>
</
table
یکی از مشکلاتی که زبان HTML دارد ایستا بودن آن است یعنی شما نمیتوانید هیچ برنامه ای بنویسید که بتواند پردازشی روی مطالب داشته باشد یعنی نمیتوانید صفحه لاگینی داشته باشید که بفهمد آیا کاربر مجاز است برای ورود یا خیر اما برای حل این مشکل ما باید از زبان های ASP.Net یا جاوا اسکریپت یا vb Script را در کنار HTML به کار بگیریم .حتماً شنیدید که با برنامه Notepad هم میتوان برنامه نوشت اما بیایید با هم این داستان را عملی پیاده کنیم یک مثال بسیار ساده برنامه Notepad را باز میکنیم و کد های زیر را داخل این ویرایشگر دوست داشتنی تایپ میکنیم؛در نهایت موقع save کردن باید با پسوند html یا html ذخیره کنید سپس با یک مرورگر باز میکنیم و خروجی را مشاهده مینماییم[url=telegram.me/ahphack].
یک صفحه وب دو بخش کلی دارد بدنه که همان Body هست و تقریباً تمام وب سایت در این قسمت نوشته میشود و قسمت سر یا همان Head که یک سری اطلاعات از جمله تیتر یا Title صفحه رو شامل میشه و علاوه بر تیتر فرمت ها و اسکریپتهای زبان جاوا اسکریپت در این قسمت نوشته میشود.
  • نکته: تو رفتگی های کد ها و همچنین فاصله ها در این کد ها اصلاً ربطی به نمایش این کد ها ندارد و فقط صرفاً جهت تسهیل در کد نویسی می باشد.اما اگر بخواهیم محتویات یک صفحه وب را ببینیم میتوانیم از منوی View گزینه Source را انتخاب میکنیم مانند تصاویر زیر تا با کد هایی که این صفحه را تشکیل دادند آشنا شویم البته همین مرورگر ها نیز کمک میکنند تا راحت تر کد ها را ویرایش کنیم و از همین منو و گزینه Source بتوانیم Notepad را باز کنیم و اطلاعات را تغییر بدهیم. Cool
    انتشار : ای اچ پی ایران / انجمن فعالیت کاربران http://www.ahphack.net       forums.ahphack.net    
[عکس: cd-jangnarm.jpg]
مبارزه مرد میخواهد نه انسان بیکار 


همانطور که در دوران جنگ مسلحانه و به
تعبیری "جنگ سخت" مردانی حضور یافتند که :

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


اکنون نیز در میدان "جنگ نرم" باید حضور یافت. ما که لیاقت بیش از این را نداریم و
 از هیچ چیزمان نگذشتیم جز اوقات فراغت خود
برای دفاع به حد توان و وسع خود.
..





مقام معظم رهــــبری




____________________________________________________________



Star ارتباط با مدیریت Star


  ایمیل : info@ahphack.net
  ایدی تلــگرام : telegram.me/alidarti
  شماره تماس : 09106550832
01-11-2016, 05:33 PM
وب‌سایت ارسال‌ها پاسخ


پرش به انجمن:


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