مشاهده نسخه کامل
: آموزش html به زبان ساده
سلام به سروران گرامي
پس از مشورت با دوست عزيزم Payman_62 تصميم گرفتم آموزش html به زبان ساده رو براي شما خوبان اينجا قرار بدم...
آموزش HTML
ھمه صفحات وب با استفاده از دستورالعمل ھایی ساخته شده اند که به آنھا برچسب ها يا تگ هاي html
كه مخفف كلمه
Hyper Text Markup Language
است...
اصلی ترین تگ ھا و بدنه یک فایل HTML شامل:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
نکته ١:پس از شروع ھر تگ لازم است با علامت / پایان آن را اعلام کنید.
نکته ٢:بھتر است کدھا را با حروف کوچک بنویسید.
نکته ٣:برای نوشتن کدھا میتوان از برنامه Notepad
استفاده نموده و ھنگام ذخیره سازی آن را با پسوند html. ذخیره کرده و از UTF-8 استفاده كنيد...
(آموزش هر تگ در يك پست مجزا انجام ميشه تا دوستان سردرگم نشن...)
شاد باشيد:40:
يا حق (:
تگ <b>
این تگ باعث می شوند متن مورد نظر پر رنگ شود مثال:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
به جای این تگ می توان از تگ ھای <i></i> برای ایتالیک کردن و از <small></small> برای کوچک کردن متن استفاده کرد.
يا حق (:
تگ <br>
این تگ مانند کلید Enter
میباشد یعنی باعث میشود متن شما به سطر بعد منتقل شود
این تگ نیازی به تگ بسته ندارد
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
يا حق (:
سلام.
ممنون به خاطر این عمل مفیدت، مرسی ولی:
یاسین جان جای درستش اینجاست:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
یا
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
خب پست شما مفهومي نداره!!!!!!
چون تاپيك ايجاد شده
حداقل كاري كه ميتونستيد بكنيد اين بود كه گزارش بدين كه انتقال بدن!
مديراي محترم پست بنده و ايشون رو حذف بفرماييد و اگر صلاح بود انتقال بدين
با تشكر
يا حق (:
عنوان ها
عنوان ها توسط تگ هاي <h1> تا <h6> ايجاد ميشوند كه <h1> بزرگترين عنوان و <h6> كوچكترين عنوان را ايجاد ميكند.
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
يا حق (:
تگ <p>
این تگ باعث ایجاد یک پاراگراف می شود.
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
يا حق (:
تگ <center>
این تگ باعث می شود متن یا ھرچیز دیگری در وسط صفحه قرار بگیرد.
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
يا حق (:
تگ <hr>
این تگ باعث ایجاد یک خط افقی می شود ونیازی به تگ بسته ندارد.
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
يا حق (:
توضیحات
نوشتن توضیحات در یک صفحه باعث میشود برای ویرایش ھای مجدد آن فایل کمتر دچار
دردسر شویم در ضمن مرورگر توضیحات را نادیده گرفته و آن ھا را نمایش نمیدھد.
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
يا حق (:
تگ <IMG> :
میتوان گفت که این تگ یکی از تگهای پرکاربرد میباشد از این تگ به منظور قرار دادن تصاویر در صفحه وب استفاده میشود.این تگ دارای پارامترهای بسیاری میباشد که برای بهتر عمل کردن این تگ مورد استفاده قرار می گیرند.
اولین پارامتر این تگ پارامتر Src میباشد که محل قرار گیری آدرس فایل تصویری میباشد.
<Img Src="/Image/Cat.jpg">
پارامتر دیگر این Border میباشد . بوسیله این پارامتر میتوان حاشیه دور تصویر موردنظر را تنظیم نمود.در مثال زیر N مقدار یک عدد دلخواه شما میباشد.
<Img Src="/Image/Cat.jpg" Border=N>
و در نهایت بوسیله پارامترهای Width و Height میتوان طول و عرض تصویر را تنظیم نمود.در مثال زیر N مقدار عدد دلخواه شما برای تنظیم تصویر میباشد.
<Img Src="/Image/Cat.jpg" Border=N Width=N Height=N>
يا حق (:
فونتھا
برای تعیین نوع سایز و رنگ فونت می توان از برچسب <font>
استفاده نمود ...
تعيين نوع فونت
<font face=tahoma>
اين يك تست است
<font/>
سايز فونت
<font size=2>
اين يك تست است
<font/>
رنگ فونت
<font color=red>
اين يك تست است
<font/>
يك مثال بصورت كلي:
<font face=Tahoma size=2 color=red>
ياسين قاسمي
<font/>
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
تمرين كنيد تا حرفه اي بشين!
يا حق (:
تگ <A> :
از این تگ برای ایجاد پیوند یا همان لینک در صفحات وب استفاده میشود.بوسیله پیوندها یا همان لینکها میتوان به صفحات دیگر رفت و یا کارهای دیگری را انجام داد. به مثال زیر توجه نمایید.بوسیله کد زیر شما یک پیوند ایجاد میکنید در قسمت مقابل پارامتر Herf آدرس فایل مقصد یا هر چیز دیگر نوشته میشود و در قسمت بعد همانطور که میبینید متن پیوند نوشته میشود.
<a href="[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]">click here</a>
آدرس و عنوانی جھت نمایش درصفحه
<a href=[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] target="_blank ">click here</a>
نوع نمایش یعنی باعث میشود لینک در پنجره ای جدید باز شود
لینک در ھمان قاب باز خوا ھد شد...parent_
لینک در ھمان پنجره باز خواھد شد (برای خارج شدن از قاب)...top_
لینک در ھمان پنجره باز خواھد شد...self_
يا حق (:
لینک به یک آدرس ایمیل
<"a href= "mailto:softestan@gmail.com>
تماس با من
<a/>
ساخت لینک بر روی تصاویر
<a href=" [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]"><img src="/image/logo.png"></a>
به جای عنوان از آدرس یک عکس استفاده کنید.
يا حق (:
Bill Gates
06-08-2008, 22:32
ولی خودمونیما جاش اینجا نیست :31: اصلا هیچ وره نمیخوره :31:
ادامه کارت رو اینجا بده :
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
فھرست ھا
فھرست بدون شماره
<html>
<head>
<title> Test </title>
<head/>
<body>
<ul>
<li/> ایران <li>
<li/> آمریکا <li>
<li/> دبي <li>
<ul/>
<body/>
<html/>
فھرست شماره دار
<body>
<ol>
<li/> ایران <li>
<li/> آمریکا <li>
<li/> دبي <li>
<ol/>
<body/>
فھرست ھای توضیح دار
<body>
<dl>
<dt/> ایران <dt>
<dd/> آسیا <dd>
<dt/> آمریکا <dt>
<dd/> آمریکای شمالی <dd>
<dt/> فرانسه <dt>
<dd/> اروپا <dd>
<dl/>
<body/>
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
يا حق (:
type در فھرستھا
با استفاده از این مشخصه میتوان شکلی را که درکنار فھرستھای بدون شماره و یا اعداد
فھرستھای شماره دار را به نوع دلخواه تغییر داد.
نوع شکل ھا دایره توپر- دایره توخالی و مربع Disc ,circle,square
اعداد:
abc , ABC , i ii iii , I II III
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
با اشكال ديگه هم تمرين كنين تا خوب ياد بگيريد...
يا حق (:
استفاده از رنگ ھا
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
استفاده از تصویر پس زمینه
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
يا حق (:
جدول ھا
از تگ <table>
برای ایجاد جداول استفاده میشود . و از تگ <tr>
برای ساخت سطرھا و از تگ <td>
برای ساخت ستون ھا استفاده میشود
از تگ <th>
ھم برای نمایش یک عنوان برای ستون ھا استفاده میشود .
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
از صفت Border جھت ایجاد حاشیه برای جدول استفاده می شود
با تگ <caption> میتوان یک عنوان برای جدول انتخاب نمود
يا حق (:
تگ <form>
توسط این تگ میتوان عناصری جھت دریافت اطلاعات از کاربر ساخت
تگ <input>
در تگ فرم می توان از این تگ استفاده نمود و انواع دکمه ھای رادیویی و فیلد ھا را
ساخت.
يا حق (:
ایجاد Textbox
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
يا حق (:
ایجاد دکمه ھای رادیویی
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
دوستان هنوز خيلي از كدها مونده
شما با اينها تمرين كنيد تا خوب خوب ياد بگيريد
انشالله اونها رو هم بزودي معرفي ميكنم كه تكميل بشه...
يا حق (:
ایجاد جعبه انتخاب
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
يا حق (:
ایجاد یک دکمه
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
يا حق (:
ساخت تکست باکس برای کلمه عبور
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
يا حق (:
Text area
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
يا حق (:
Dropdown
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
يا حق (:
ایجاد دکمه ارسال
مشخصه Action
آدرس محل ارسال فایل را مشخص می کند ...
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
يا حق (:
استفاده از دکمه ھای تصویری به جای submit
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
يا حق (:
ایجاد دکمه ای جھت جستجو در کامپیوتر کاربر
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
يا حق (:
ایجاد یک حاشیه برای فرم
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
يا حق (:
قاب ھا
با استفاده از قاب ھا می توانید بیش از یک فایل HTML را در پنجره مرورگر نمایش دھید.
تگ <frameset>
این تگ مشخص کننده این است که پنجره مرورگر چگونه بین قاب ھا تقسیم شود.
تگ <frame>
این تگ مشخص کننده قاب ھا یا ھمان فایل ھای اچ تی ام ال است.
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
در این مثال مرورگر ما به ۴ قاب که ھرکدام ٢۵ ٪ از فضای مرورگر را اشغال می کند تبدیل میشود
برای جلوگیری از تغییر سایز ھرقاب توسط کاربران عنصر noresize را به
<frame> اضافه میکنیم...
<"frame src="test.html" noresize="noresize>
يا حق (:
تگ <iframe>
با استفاده از این تگ می توان یک فایل اچ تی ام ال را در داخل یک قاب در ھرکجای متن
قرار دھید.
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
يا حق (:
تگ <marquee>
با استفاده از این تگ می توان یک متن متحرک ایجاد کرد.
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
با استفاده از Direction میتوان جھت حرکت متن را تعیین کرد.
با استفاده از Scrollamount سرعت حرکت متن را تعیین میکنیم.
سایر تنظیمات نیز مانند نوع فونت ورنگ ھم قابل اعمال است.
يا حق (:
نحوه قرار دادن فایل ھای فلش
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
يا حق (:
تگ <script>
از این تگ برای زمانی استفاده می شود که بخواھیم ازکدھای جاوا اسکریپ ویا غیره
درفایل خود استفاده کنیم این تگ ھم شامل پارامترھای مختلفی چون نوع زبان آدرس و
غیره میشود.
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنیديا حق (:
تگ <base>
با استفاده از این تگ میتوان به طور کلی برای لینک ھای صفحه مشخصه Target را
اعمال کرد.
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
يا حق (:
تگ <link>
با استفاده از این تگ می توان یک فایل CSS را به سند اچ تی ام ال پیوند زد.
با فایل ھای CSS میتوان ظاھر یک صفحه را به طور کلی کنترل کرد.
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
يا حق (:
تگ <style>
با استفاده از این تگ می توان کدھای CSS را به طور مستقیم در صفحه وارد کرد.
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
يا حق (:
تگ <meta>
با استفاده از این تگ توضیحات کلی را مربوط به صفحه وارد میکنیم این توضیحات ر ا
معمولا موتورھای جستجوگر استفاده میکنند.
این دستور نوع سند و پشتیبانی از استاندارد یونیکد را بیان میکند.
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
يا حق (:
این دستور توضیحاتی را درباره صفحه اضافه میکند
<head>
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
يا حق (:
دستور زیر کلمات کلیدی صفحه شما را مشخص میکند
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
يا حق (:
با استفاده ازاین دستور بعد از ٧ ثانیه مرورگر به آدرس جدید می رود
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
يا حق (:
از مديران محترم ميخوام كه اين تاپيك استيكي بشه
يا حق (:
neopersia
07-08-2008, 19:53
ممنون یاسین جان برای آموزش
اما اینجوری کاربهای تازه کار که نیاز به آموزش دارن نمیتونن ازش استفاده کنن چون نمیتونن کد درست رو تشخیص بدن
اگه میشه کدهای html رو بزار تو تگ [html] تا درست نمایش داده بشه
ممنون; :11:
سلام
خواهش ميشه...
خب با اين كار بايد تمام پست ها رو ويرايش كنم
چون فقط تگ html قرار بدم همه كدها دچار تغيير ميشه
ولي خب مشكلي نيست انجام ميدم
موفق باشيد
يا حق (:
sqwflol3
29-08-2008, 19:39
ممنون از آموزش هاي مفيدتون من تازه شروع کردم اين اولين پست که ميدم اميد وارم که بتونم تو اين فروم فعاليت خوبي رو شروع کنم!!!
در اين برنامه از تگهايي استفاده شده كه هر يك براي كاري مناسب است. با ديدن كد و نتيجه ، شما مي توانيد بفهميد كه هر تگ چه كاري انجام مي دهد و در جاي مناسب مي توانيد از اين تگها استفاده كنيد. ديگه من توضيح نمي دهم . خودتان با ديدن نتيجه مي فهميد چه تغييري در طرز نمايش نوشته ما بوجود مي ايد.
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
يا حق (:
دستور <pre> جانشين به حق <p> است ، وقتي مي خواهيم فواصل و اينتركردن ما ، در سايت رعايت بشه.
و واضحه كه جون مي دهد براي نوشتن كدهاي برنامه نويسي در سايت. تا خوانا باشد و خواننده سريع كدهاي برنامه نويسي را تحليل كند.
پس اگر خواستيد يك سايت بزنيد و برنامه نويسي آموزش بدهيد ، اين دستور را از خاطر نبريد.
البته واضح است كه خيلي جاها كاربرد داره و فقط براي كدهاي برنامه نويسي نيست.
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
يا حق (:
با نگه داشتن ماوس بر روي اين كلمات ، ((شرحي)) به نمايش درميايد.
پس عكس به كار نمي ايد ، بريد در سايت ماوس را روي كلمه نگه داريد.
در متن توضيحاتي انگليسي داخل كد ، توضيحاتي داده شده راجع به اين كه اين دستورات در اكسپلورر 5 و نت اسكيپ 6 و 2 دهم كدام دستورها اجرا مي شوند.
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
يا حق (:
neopersia
16-09-2008, 01:31
ممنون یاسین جان
با اجازه منم یه توضیح کوچیک در مورد abbr و acronym بدم.
صفت title باعث میشه با نگهداشتن ماوس روی یک المنت توضیحات اون المنت در قالب tool tip نمایش داده بشه و ربط زیادی به abbr و acronym نداره چون میشه از title تقریباً برای همه المنتهای html استفاده کرد. البته مرورگر تصمیم میگیره که اون توضیحات چطوری نمایش داده بشه پس حتماً نمیشه گفت به صورت تول تیپ هست. حتی ممکنه تو نوار وضعیت مرورگر نمایش داده بشه.
تگ abbr برای مشخص کردن کلماتی که به صورت مخفف هستند استفاده میشه و از title برای این تگ استفاده میشه تا کلمه اصلی و کامل رو به کاربر نشون داد.
تگ acronym برای کلماتی هست که از حروف اول سایر کلمات استفاده ساخته شدن مثل همون www (تو فارسی بعضی وقتا به اینم مخفف میگن من معادل فارسی تری براش پیدا نکردم!!) از title برای این تگ مثل تگ قبلی استفاده میشه تا به کاربر نشون داده بشه که عبارت اصلی چی بوده
بسيار عالي
سپاسگزارم...
يا حق (:
ممنون ياسين جان آموزشت به نظر من از آموزشهاي ديگه تو انجمن بهتر بود.
karbare-javan
27-01-2009, 22:50
مرسي خيلي راحت و خوب ياد داده بودي
vBulletin , Copyright ©2000-2025, Jelsoft Enterprises Ltd.