آموزش گام به گا html

[homayon574]

سلام دوستان از این به بعد میخوام اینجا یه آموزش کامل از HTML بدم ، به شما قول میدم بعد از تموم شدن این آموزش بدون هیچ مشکلی خودتون میتونید قالبتون رو بسازید (جدی بودن بهم نمیاد) سعی میکنم کمی شوخی بین آموزش بگنجونم چون ادما در زمان شادی زودتر موضوعات رو تجزیه تحیلی میکنن

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

خب اول یه آشنایی مختصر با HTML داشته باشیم :

تاریخچه HTML :

HTML مخفف زبان نشانه گذاری فرا متنی است(hyper text markup language) توسط Tim Berners-Lee در خلال دهه 90 ميلادي همراه با گسترش وب، شکوفا شد. اين زبان توسط مرورگر Mosaic معروفيت خاصي پيدا کرد. در آن زمان HTML در چند مدل منتشر مي شد که آن بستگي داشت به سازنده فايل و انجمنهايي که در زمينه وب فعاليت داشتند.

در نوامبر 1995 نسخه HTML 2.0 گسترش يافت و بلافاصله در همان سال HTML 3.0 منتشر شد، ولي استقبالي از آن نشد. در سال 1996 انجمن W3C شروع به فعاليت بر روي نسخه اين زبان کرد که حاصل کار آنها در 14 ژانويه 1997 انتشار HTML 3.02 بود.
اين نسخه توانست رضايت اکثريت را جلب کند چون هماهنگي بيشتري با مرورگرهاي مختلف در سيستمهاي عامل متفاوت داشت. در تمام نسخه هاي اين زبان ، سعي بر اين شده بود تا نظر کساني که در زمينه وب سرمايه گذاري کرده بودند جلب شود و برنامه هاي توليد شده براي وب بتوانند مدت طولاني تري قابل استفاده باشند. به همين منظور HTML براي اهداف گسترده تري ، در وب توسعه يافت تا در کليه سيستمهاي اطلاع رساني و الکترونيکي کوچک و بزرگ با بکار بردن گرافيک و رنگها، قابليت بهره برداري بيشتري داشته باشد.

در 18 دسامبر 1997 نسخه HTML 4.0 در وب منتشر شد و در همين بين شرکتهاي توليد کننده مرورگر وب يکسري مشخصات منحصر بخود را به اين نسخه اضافه کردند که قابل اجرا در مرورگرهاي ديگر نبود. بعضي از اين تغييرات در W3C مورد تاييد قرار گرفت اما بعضي ديگر نه. با تغييرات HTML مرورگرها مجبور به تغيير شدند تا با تحولات جديد سازگار شوند.

در تاريخ 24 آوريل 1998 در اين نسخه تجديد نظر شد و حاصل آن پيدايش HTML 4.01 بود که با کمي تغيير و رفع يکسري مشکلات، در W3C برسميت شناخته شد و اين انجمن استفاده از آنرا به توسعه دهندگان و طراحان وب ، توصيه کرد.

بطور کل مجموعه HTML 4 با قابليت استفاده از embeded objects, frames, scripting, style sheets و با کارآيي بالاتر جدولها و فرمها به وب معرفي شد، همچنين در اين نسخه توجه زيادي به افراد با توانايي کم شده بود تا اين افراد هم بتوانند از محيط وب استفاده کنند.
اما مهمترين قدمي که در اين نسخه برداشته شد، پشتيباني HTML از زبانهايي بود که از راست به چپ نوشته ميشدند مانند زبان فارسي، که در اين نسخه با پذيرفتن استاندارد ISO 10646 به هدف بزرگ بين المللي شدن اين زبان نزديک شدند تا همه مردم دنيا در هر کجا و با هر زباني بتوانند اسناد HTML را منتقل کنند.

HTML 4.01 تفاوت کمي با نسخه اصلي خود يعني 4.0 دارد اما در عوض هماهنگي بيشتري با نسل جديد زبان وب يعني XHTML و نسل بعدي يعني XML دارد. در اصل XHTML اساس و مقدمه XML است که براي هماهنگي و سازگاري HTML با XML منتشر شده است.

HTML 5.0 نیز به تازگی انتشار یافته که مورد توجه تمامی اهل فن قرار گرفته است ...

اطلاعات بیشتر در این مورد در ویکپدیا : [Only registered and activated users can see links. ]

استاندارد W3C چيست؟

W3C يا کنسرسيوم شبکه جان گستر وب، مجمعي متشکل از 400 شرکت و سازمان است که در مورد استاندارد ها و فناوري هاي وب، تشريک مساعي دارند.
استاندارد W3C، از سوي سازمان W3C به صفحاتي داده ميشود که قوانين مشخصي را رعايت کنند. با رعايت اين ضوابط، اينگونه صفحات در اکثر بروزر هاي معمول دنيا قابل خواندن، بدون مشکل خواهند بود.


-------------------------------------------

خب حالا برای شروع کار چه چیزایی نیاز می باشید ، پس مواد لازم برای شروع کار با HTML :

1. شما در قدم اول به یک ویرایشگر متن نیاز دارید. در ویندوز شما می توانید از برنامه Notepad استفاده کنید. از هر نرم افزار ویرایش متن دیگری استفاده کنید اما توجه داشته باشید که نرم افزار WordPad که در ویندوز وجود دارد و نرم افزارهایی مانند Microsoft Office Word و امثال آن برای نوشتن کدهای HTML مناسب نیستند چون در هنگام ذخیره کردن متن این نرم افزارها کدهایی را به آن اضافه می کنند.
   یادآوری : نرم افزار Notepad را می توانید از طریق منوی استارت در قسمت Accessories پیدا کنید یا از طریق فرمان Run با تایپ notepad در کادر Open و فشار دادن دکمه Enter.
   
   
2. شما به یک مرورگر وب به انتخاب خود نیاز دارید. می توانید از Microsoft Internet Explorer استفاده کنید که با ویندوز نصب می شود یا از Opera,chrome,Mozilla Firefox و نرم افزارهای مشابه که اغلب به صورت رایگان برای دانلود در اینترنت وجود دارند.
   بهتر است صفحاتی را که می نویسید با چند مرورگر آزمایش کنید. زیرا در HTML قسمتهایی وجود دارد که مختص به یک مرورگر خاص است و با سایر مرورگرها کار نمی کند.

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

[homayon574]

نوشتن در صفحات HTML :

زبون HTML از یک سری شناسه(tag) تشکیل شده ، یک شناسه یا تگ همواره برای اجرا می بایست با علامت کوچکتر ریاضی یعنی این علامت > آغاز شود و با علامت بزرگتر < به پایان برسد به طور مثل تگ ضخیم کردن متن به شکل <strong> نوشته میشود این شناسه را در پشت هر نوشته ای که بگذارید باعث میشود آن نوشته به شکل ضخیم در مرور گر نمایش داده شود . به این تگ ، تگ ابتدائی(Opening tag) می گویند زیرا هر چه بعد از این تگ نوشته شود با توجه به نوع درخواست تغییر میکنید .
اما برای پایان بخشیدن به یک تگ چه باید کرد؟ برای این کار باید از تگ انتهایی را بکار برد ، تگ انتهایی مانند همان تگ ابتدائی است تنها یک " / " قبل از نام تگ قرار میگیرد

مثال کامل برای آشنایی با تگ ابتدائی و انتهایی :

<strong>this is a strong text</strong>

که نتیجه به شکل " یک متن ضحیم " خواهد شد .

• نکته 1: در HTML همه تگها به یک تگ پایانی نیاز ندارند. برای مثال تگی که برای ایجاد خط جدید استفاده می شود از این قبیل تگهاست، که به این صورت می باشد:

خط اول<br>خط دوم<br>خط سوم

• نکته 2:نیاز نیست که حتماً تگها با حروف بزرگ نوشته شوند. مثلاً <P> همان <p> است. البته در نسخه های جدیدتر HTML توصیه می شود کدهای HTML با حروف کوچک نوشته در XHTML هم نوشتن کدها با حروف کوچک الزامی است.

یک موضوع قابل توجه دیگر این است که فضا های خالی در HTML تاثیری ندارند . به طور مثال کد :

<a href="#">      this is a Hyper Link     </a>

با کد :

<a href="#"> this is a Hyper Link </a>

هیچ تفاوتی نخواهد داشت ...

خب حالا که با تگ ها و یه سری نکات در HMTL اشنا شدیم بریم سراغ آشنایی با نوشتن یک فایل HTML با اصول خودش :

خب الان یه نات پت توی ویندوزتون باز کنید و تمرینات رو اجرایی کنید توی اون فایل :

خب برای شروع کار باید تگ ابتدائی زبان HTML را وارد نمایید که علامت شروع یک متن HTML است این تگ به شکل <html> نوشته میشود . خب حالا به خطر بعد بروید تا تگ بعدی را وارد نماییم .

تگ بعد تگ <head> هست ، در داخل این تگ تمامی کدهای مخفی که در هدر قالب وجود دارد قرار میگیرد از جمله عنوان صفحه،متاتگ ها، استایل ها ،کدهای جاوا اسکریپت و ....

خب برای اینکه تگ هدرمو خالی نمونه یه چیزی توش وارد میکنیم مثلا عنوان صفحه ، برای این کار تگ <title> را به کار میبریم ، این تگ به شما اجازه می دهد برای صفحه خود یک عنوان برگزینید. این قسمت مورد استفاده موتورهای جستجو قرار می گیرد و همان متنی است که به هنگام مشاهده صفحه در نوار عنوان مرورگر نشان داده می شود. تا هنگامی که این تگ در قسمت head قرار نگیرد در متن شما نشان داده نمی شود. برای پایان دادن به تگ عنوان از این تگ استفاده می شود: <title/>

خب دیگر چیزی در هدر نداریم پس تگ هدر با <head/> میبندیم .

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

خب حالا یه چیزی باید به عنوان بدنه قرار بدیم پس یه متن ضحیم شده که قبلا" یاد گرفتیم صرفا برای آزمایش میازیرم که به شکل <strong>this is a strong text</strong> مینویسیم .

تگ بنده قالبو میبندیم چون دیگه چیزی نمیخوایم توی بدنه وارد کنیم پس برای پایان دادن به این تگ از <body/> استفاده می کنیم.

خب حالا تگ انتهایی HTML رو قرار میدیم که نشون بده دیگه صفحه تموم شدش پس کد <html/> مینویسیم اگر تمام مراحلی که گفته شد را دونه به دونه انجام داده باشید نتیجه ای به شکل زیر مشاهده خواهید نمود :

 <html>
<head>
<title>this is a title</title>
</head>
<body>
<strong>this is a strong text</strong>
</body>
</html>

و اما برای ذخیره فایلتون توی نات پد از منو File گزینه Save As ... رو بزنید و مسیر ذخبره فایل را مشخص و در جلوی کادر File Name بنویسید test1.html و فایل را ذخیره کنید ، سپس به مسیر ذخیره رفته و فایل را در مرورگر دلخواهتان بارگزاری کنید ...

تا اینجا فهمیدیم که :

• تگهای HTML برای نشانه گذاری عناصر HTML استفاده می شوند
• تگهای HTML توسط دو کاراکتر < و > محاط می شوند
• این کاراکتر های محاط کننده قلاب نامیده می شوند
• یک فایل HTML با تگ <html> شروع و با <html/> پایان میپذیرد
• کدهای بالا صفحه که مخفی هستند در بین دو تگ <head> و <head/> اجرا می شوند.
• کد های بدنه فایل HTML در بین دو تگ <body> و <body/> اجرا می گردند
• تگهای HTML معمولا بصورت جفت می آیند به طور مثال: <b> , <b/>
• تگ ضخیم کردن متن به این شکل است : <strong>lمتن مطلب</strong>
• برخی تگها به شکل تکی می آیند مانند: <hr> , <br>
• اولین تگ ، تگ ابتدائی و دومین تگ ، تگ انتهایی است
• متن های بین تگهای ابتدایی و انتهایی محتوای عناصر هستند
• تگهای HTML به حروف کوچک و بزرگ حساس نیستند <b> معادل <B> است.

بقیه آموزش دیگه برای فردا ...

[homayon574]

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

خب اولین تگ ، تگ پررنگ(Bold) کردن مطالب هست این تگ به شکل <b> نوشته میشه و با </b> به اتمام میرسه ...

<b> This Is  a  Bold  Text</b>

نتیجه به شکل :" This Is a Bold Text " خواهد شد .

--------------------------------

خب تگ بعدی ، تگ ضخیم با کلفت(Strong) کردن مطالب هست این تگ مثل همون تگ قبلیه ولی فرق دارن این تگ به شکل <strong> نوشته میشه و با </strong> به اتمام میرسه ...

<strong> This Is  a  Strong  Text</strong>

نتیجه به شکل :" This Is a Strong Text " خواهد شد .

--------------------------------

تگ بعد تگ زیر خط(Underline) هستش ، این تگ یک خط به زیر نوشته ها اضافه می کند و با <u> نوشته و با </u> اتمام میپذیرد ...

<u> This Text Is Underlined</u>

نتیجه به شکل :" This Text Is Underlined " خواهد شد .

--------------------------------

خب تگ بعدی ما تگ مورب کردن(Italic) متن هستش ، این تگ متن رو کمی کج میکنه و با <i> شروع و با </i> اتمام می پذیرد ...

<i> This Is a Italic Text</i>

نتیجه به شکل : " This Is a Italic Text "خواهد شد .

--------------------------------

تگ بعد تگ وسط چین کردن متن هست این تگ باعث میشود هر چیزی به وسط صفحه هدایت شود از جمله متون ، این تگ با <center> شروع و با </center> اتمام می پذیرد ...

 <center> This Text Is a Showed To Center</center>

نتیجه به شکل زیر خواد شد :

" This Text Is a Showed To Center "

--------------------------------

و اما تگ بعد تگ خط خورده(strike) کردن متن است ، این تگ با <strike> شروع و با </strike> پایان میپذیرد ...

 <strike> This Is a Strike Text</strike>

اینجا نمیشه براش نمونه گذاشت

--------------------------------

تگ بعدی تگ چشمک زن(Blink) کردن متن است ، این تگ با <blink> شروع و با </blink> اتمام میپذیرد ...

 <blink>blink blink blink</blink>

اینجا نمیشه براش نمونه گذاشت

--------------------------------

خب دو تا تگ دیگه هم هست یکی برای ایجاد خط جدید در نوشته ها و دیگری ایجاد پاراگراف جدید در متن

تگ ایجاد خط جدید با <br> نوشته میشود و نیاززی به بستن آن نمی باشد و از چند تگی هست که نیازی به بسته شدن ندارد . برای امتحان توی فایلی که برای آموزش ساختید این متن را اول وارد نمایید :

This Is a One Test Text On Line 1
This Is a One Test Text On Line 2

و آن را ذخیره و نتیجه را در مرورگرتان به نمایش در بیاورد چیزی که مشاهده میکنید به شکل :

This Is a One Test Text On Line 1 This Is a One Test Text On Line 2

خواهد شد . برای اجرای درست این متن باید شما تگ مورد نظر رو در بین متن بزارید یعنی به شکل :

This Is a One Test Text On Line 1
<br>
This Is a One Test Text On Line 2

تا به نتیجه درست برسید .

خب تگ بعد که تگ ایجاد پاراگراف جدید هست با <p> شروع می شود و با </p> اتمام می پذیرد ...
تا اینجا اینا کافی هستن ا، این تگها ها رو توی فایل test1.html که ایجاد کردید امتحان کنید تا بهتر متوجه عملکرد این تگ ها شوید ...

This Is a One Test Text On Line 1
<br>
This Is a One Test Text On paragraph 1
<p>
This Is a One Test Text On paragraph 2
</p>

نتیجه به شکل زیر خواهد بود :

This Is a One Test Text On Line 1
This Is a One Test Text On paragraph 1

This Is a One Test Text On paragraph 2

-------------------------------

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

<b><i><u>This  Is  a  One  Test</u></i></b>

نتیجه به شکل : " This Is a One Test " خواهد شد .

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

یک نمونه دیگر هم از این نوع خط فرمان برای شم میزنم تا درک این موضوع برای شما راحت تر شود ...

<b><i><u>This  Is</u>  a  One  </i>Test</b>Text

نتیجه به شکل : " This Is a One Test Text " خواهد شد .


خب پس تا این جا :

• با تگ <b> یا همون پررنگ کردن آشنا شدیم .
• با تگ <strong> یا ضخیم کردن متون آشنا شدیم .
• با تگ <u> یا خط زیر نوشته انداختن آشنا شدیم .
• با تگ <i> یا کج کردن نوشته ها آشنا شدیم .
• با تگ <center> یا وسط چین کردن همه چی آشنا شدیم .
• با تگ <strike> یا خط خورده کردن نوشته ها آشنا شدیم .
• با تگ <blink> یا چشمک زن کرد متن ها آشنا شدیم .
• با تگ <br> یا ایجاد خط جدید در نوشته ها آشنا شدیم .
• با تگ <p> یا ایجاد پاراگراف جدید در متن ها آشنا شدیم .
• با روش نوشتن تگ ها با هم آشنا شدیم
• ...

در تایپک بعدی به دیگر تگ های متون اشاره میکنم

[homayon574]

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

خط تگ اول تگ <nobr> هستش ، اگر به نام تگ دقت کنید نوشته no br اگر به درس قبل توجه کرده باشید تگ <br> باعث به وجود اومدن خط جدید میشد ... این تگ برعکس تگ br هستش یعنی نمیزاره خط جدیدی توی نوشته ایجاد شه و نوشته به صورت یک جا و در یک خط نمایش داده بشه...

<nobr>
test,test,test,test,test,test,test,test,test,test,test,test
,test,test,test,test,test,test,test,test,test,test,test,test,test,test,test
,test,test,test,test,test,test,test,test,test,test,test,test,test,test,test
,test,test,test,test,test,test,test,test,test,test,test,test,test,test,test
,test,test,test,test,test,test,test,test,test,test,test,test,test,test,test
</nobr>

نتیجه به شکل تکرار کلمات بدون ایجاد خط جدید خواهد شد

-----------------------------------------

تگ بعد تگ <PRE>هستش ، این تگ تمام فضای های خالی که در میانش هست رو بدون تغییر ایجاد میکنه ، همون طور که قبلا" توی تایپک های قبل گفتم توی html فضاهای خالی در نظر گرفته نمیشوند اما گاهی موارد نیاز است که فضاهای خالی درست نمایش داده شوند مثلا در فرمول ها پیش نمایش کد ها و ... برای این کار از این تگ استفاده میشود ...

<PRE>
x=1;
y=2;
if (x==1)
     { 
     y=2;
     }
</PRE>

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

------------------------------------

خط دو تگ دیگه هم هست که با هم معرفیشون میکنم چون خیلی شبیه هم هستن کاراییشون شکل همه دو تگ <SUB> و <SUP> بیشتر در زمانی استفاده می شوند که شما می خواهید در صفحه خود معادلات ریاضی را به نمایش در آورید اما ممکن است شما برای چیزهای دیگری هم از آنها استفاده کنید.
از این تگها برای قرار دادن حروف یا اعداد کمی بالاتر یا پایینتر از بقیه متن در صفحه استفاده می شود. مانند این:

y<SUB>1</SUB>
<br>
25<SUP>3</SUP>

اینجا نمیشه نتیجه رو دید خودتون تست کنید ...

-----------------------------------

خب حالا با کد سرفصل(HEADING) ها آشنا بشیم سرفصل ها در html از این کد ها برای ایجاد تیتر ها استفاده میشه :

سرفصل بزرگ

<h2>سرفصل 2</h2>

سرفصل 2

<h3>سرفصل 3</h3>

سرفصل 3

<h4>در حال کوچک شدن</h4>

در حال کوچک شدن

<h5>کوچکتر</h5>

کوچکتر

<h6>بسیار کوچک</h6>

بسیار کوچک

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

خب تا اینجا با :

• تگ <nobr> آشنا شدیم
• با تگ <pre> آشنا شدیم
• یا تگ <sub> آشنا شدیم
• با تگ <sup> آشنا شدیم
• با کد سرفصل ها آشنا شدیم
• ...

تا بعد .....

[homayon574]

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

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

تگ اول : تگ font> :

امکاناتی که این تگ به ما میده اینه که میتونیم خانواده فونت رو مشخص کنیم ، رنگ فونت رو مشخص کنیم ، اندازه فونت رو مشخص کنیم :

<font size="5" color="brown" face="Arial">This Is a  Test</font>

نمونه بالا یک نمونه میشه گفت کامل بود که لپ مطلبو میرسونه
توی قسمت اول تگ من اندازه متن رو نشون دادم این قسمت رو شما میتونید یک عدد بین 1 تا 7 قرار بدید در حال حاظر من اندازه فونت رو توی حالت متوسط گذاشتم ، قسمت بعد رنگ فونت رو مشخص کردم در این قسمت میتونید نام رنگ مورد نظر یا کد رنگتان را وارد کنید . به طور مثال برای رنگ مشکی میتوان از کلمه "black" یا کد رنگ "000000#" iاستفاده کرد اگر با کد رنگ ها آشنایی ندارید [Only registered and activated users can see links. ] استفاده نمایید ، در قسمت سوم این تگ من نوع فونت رو مشخص کردم شما میتونید نام فونت ها رو توی این قسمت بزارید نمونه هاش دیگه ای که میشه گذاشت : " georgia , tahoma , arial , times new roman , vardena " و بسیاری دیگر است ، نتیجه کد بالا به شکل زیر خواهد شد :

This Is a Test

------------------------------------------

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

<a href="http://clobiran.com">This Is a Test</a>

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

[Only registered and activated users can see links. ]

این تگ قسمت های دیگه ای هم داره مثل نحوه انتقال به صفحه مشخص شده که با " target " مشخص میشه با این کد میتوان مشخص کرد لینک در صفحه فعلی باز شه در صفحه جدید باز شه در صفحه مادر باز شه و ...

<a href="http://clobiran.com" target="_blank">This Is a Test</a>

[Only registered and activated users can see links. ]

این قسمت تگ را میشه چهار نام گذاشت

• "_blank" => باز شدن لینک در صفحه جدید
• "_parent" => باز شدن لینک در صفحه مادر
• "_self" => باز شدن لینک در صفحه فعلی
• "_top" => باز شدن لینک در بالا صفحه

تذکر1 : قبل از قرار دادن نوع پرش لینک به صفحه مشخص شد باید یک " _ " (آندرلاین) به نوع پرش اضافه شود به طور مثل self_ یا blank_ باید گذاشت .متاسفانه به دلیل تغییر جهت چپ به راست ممکنه نمایش درست کدها برعکس بشه

تذکر2 : اگر در قسمت src ادرس لینک برای آدرس دهی " //:http " را وارد ننمایید لینک به درستی اجر نمیشود پس همیشه قبل از www عبارت //:http را تایپ کنید.



قسمت بعد تگ عنوان لینک هست که با title شروع میشود ، این محتویات این قسمت تگ در صورتی که موس را روی لینک بگیرید نمایش داده میشود .

<a href="http://clobiran.com" target="_blank" title="This Is a Test">This Is a Test</a>

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

خب اینم از تگ لینک

------------------------------------------


خب بریم سراغ تگ تصویر که با img> شروع میشه این تگ برای نمایش تصاویر کاربرد داره . در ضمن ای تک از جمله تگ هایی هستش که نیازی به بسته شدن یا تگ انتهایی نداره ...

<img src="http://clobiran.com/uploads_user/1000/1/0_9176.jpg">

که تصاویر رو نشون میده اما این تگ چه قسمت هایی داره :

• src
• title
• alt
• width
• border
• height

من دونه دونه توضحشون میدم:

در قسمت src آدرس تصویر مورد نظر وارد میشود .

قسمت title که توی لینک ها باهاش آشنا شدید اگر موس رو روی تصویر قرار بدید در صورتی که title شخ شده باشه متن داخل title توی یه کادر کنار موس نمایش داده میشود

قسمت alt زمانی کاربرد داره که مشکلی توی لود شدن تصویر از سرور به وجود بیاد و تصویر لود نشه اگر چنین چیزی بشه متن alt در داخل کادر تصویر به نمایش در خواهد آمد یا به صورت متن به جای تصویر خواهد آمد

قسمت width & height برای مشخص کردن طول تصویر است طول و ارتفاع تصویر شما مساوی 200*150 باشه (در مثال آخر این مبحث مشاهده کنید ....)

قسمت border برای آن است که شما بخواهد در دورتان کادر وجود داشته باشد یا خیر در صورت خیر بودن باید این قسمت را مساوی 0 قرار دهید و در غیر اینصورت از 0 بالاتر بزارید معمولا بین 1 تا 3

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

<img src="http://clobiran.com/uploads_user/1000/1/0_9176.jpg" title="تصویر آزمایشی" alt="تصوری آزمایشی" width="200" height="150" border="0">

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

<a href="http://clobiran.com" target="_blank" title="تصویر آزمایشی"><img src="http://clobiran.com/uploads_user/1000/1/0_9176.jpg" alt="تصوری آزمایشی" width="200" height="150" border="0"></a>

یه سری تذکرات :

1. نیازی به گذاشتن طول و ارتفاع تصویر نیست تصویر خودبخود میتواند تنظیم میشود اما وارد کردن طول و ارتفاع بر بالارفتن سرعت لود صفحه تاثیر مستقیم دارد.
2. واحد اندازه گیری تصویر بر حسب پیکسل میباشد زمانی که در کد مینویسیم width="200" منظور همان width="200px" هست
3. رعایت نظم در نوشتن قسمت ها در همه تگ ها در html سرعت لود را بالا میبرد در مورد تصاویر src =>title =>alt =>width =>border =>height شکل کلی می باشد
   
4. در صورت قرار دادن تصویر در قالب یک لینک یک کادر یک پیکسلی آبی ممکن است در دور تصویر ایجاد شود که اگر کد کادر مقدار 0 داده شود یا شده باشد این کادر از بین میرود .
5. در صورتی که تصاویر در میان تگ <center> و </center> قرار بگیرید به وسط صفحه هدایت میشود .
6. در تمام تگهایی که src وارد شده است وارد کردن //:http الزامیست و وارد نکرد .www هیچ لزومی ندارد، اگر //:http وارد نشود کد شما درست اجرا نمیشود مثلا در کد تصاویر و لینک ها .
   

اینم از تگ تصویر چقدر تایپ کردما

------------------------------------------

خب یه مبحث دیگه بگم و برای امروز کافیه ...

کامنت گذاشتن در html خیلی سادست ، کامنت ها برای اینکه اگر بخوایم در زمان دیگری کدها رو ویرایش کنیم کارمون راحت باشهو یا تیکه کدی رو که فعلا" لازمش نداریمو غیر فعال نگه داریم ، کامنت ها هیچ تاثیری در کد ندارند و به طور کلی نقش هویج رو اجرا میکنن توی کد ها شوخی کردم کامنت ها خیلی مهمن همیشه توی کاراتون کامنت بزارید ، کامنت چیزیه که توی تمام زبون های برنامه نویسی وجود داره کامنت گرازی توی html خیلی سادست و هر جا بخواید کامنت شه باید <--! برای شروع گذاشته بشه و در پایان --> بشه تا کامنت بشه به مثال های زیر توجه کنید

کامنت کردن متن:

<!-- این یک کامنت است -->

کامنت کردن چند خط نوشته(فرقی نمیکنه):

<!--
این یک کامنت است
کامنتها در مرورگر نمایش داده نمی شوند
-->

کامنت کردن یه تکه کد :

<!-- <a href="http://clobiran.com">clobiran.com</a> -->

کلا شکل کلی کامنت گذاری همین استو بست

---------------------------------------------

خب امروز با چه چیزایی آشنا شدیم :

• با تگ فونت و قسمت های مختلف این تگ آشنا شدیم
• با تگ لینک و قسمت های مختلف این ت آشنا شدیم
• با تگ تصویر و قسمت های مختلف آن آشنا شدیم
• با روش کامنت گذاری در html اشنا شدیم

تعداد چیزایی که امروز یاد گرفتیم کم بود اما بحثشون طولانی بود تا بعد خداحافظ

[homayon574]

در html یک سری کاراکتر های ویژه وجد داره که برای راحتی کار گذاشته شدن ، این کاراکتر های ویژه با استفاده از کدهای ویژه در صفحه شما قرار می گیرند. این کدهای ویژه با علامت & (امپرسند) شروع می شوند و با تعدادی حرف یا عدد ادامه پیدا می کنند و با ; (نقطه ویرگول) پایان می یابند. برای مثل زمانی که شما می خواهید بین دو کلمه فضای خالی اضافی بگذارید باید از کد ;nbsp& استفاده کنید که فضای خالی اضافه می کند. مطابق مثال زیر:

کلمه اول   کلمه دوم

گفته بودم که html جاهای خالی در نظر گرفته نمیشن اما با کاراکتر &nbsp; میتوان هر چند فاصله که بخواهید ایجاد کنید

زیاد در مورد این کاراکترها توضیح نمیدم فقط بدونید این کاراکتر ها زیادن لیستشونو میتونید در زیر ببینید و استفاده کنید :

• علامت فاصله =========> ;nbsp&
• امپرسند =======> & ==> &amp;
• علامت کپی رایت ==> © ==> &copy;
• علامت ثبت شده ==> ® ==> &reg;
• علامت تجاری ====> ™ ==> &trade;
• علامت کوچکتر از ==> < ==> &lt;
• علامت بزرگتراز ===> > ==> &gt;
• علامت خنجر ====> † ==> &dagger;
• فلش راست ====> » ==> &raquo;
• فلش چپ ====> « ==> &laquo;
• علامت درجه ===> ° ==> &deg;
• یک چهارم ====> ¼ ==> &frac14;
• یک دوم =====> ½ ==> &frac12;
• سه چهارم ===> ¾ ==> &frac34;
• نقطه میانی ==> · ===> &middot;
• تعجب وارونه ==> ¡ ===> &iexcl;
• علامت یورو ==> € ===> &euro;
• علامت تقسیم=> ÷ ==> &divide;
• علامت رادیکال=> √ ==> &radic;
• پوند انگلیس ==> £ ==> &pound;
• کوتیشن ====> ' ==> &#039;
• دبل کوتیشن ==> " ==> &quot;

ایم کد ها رو هر وقت توی فایل اچ تی ام ال خودتون وارد کنید به شکل کاراکتر اصلیش نمالیش داده خواهد شد

--------------------------------------------------

خب بریم سر مبحث لیست ها

تو html دو نوع لیست پرو استفاده داریم یکی لیست های نامرتب یکی لیست های مرتب یا عددی ، اگر اصلا نمیدونید لیست ها چی هستن به 15 خط بالاتر برید جایی که من کاراکتر ها رو معرفی کردم اونجا من از یک لیست نامرتب استفاده کردم لیست ها همون نقطه گرد های کنار جمله ها هستش .... هر دو نوع لیست رو براتون معرفی میکنم و مثال میزنم ...

• لیست های نامرتب

در لیستهای نامرتب برای عناصر لیست از شماره و عدد یا حروف الفبا استفاده نمی شود. عناصر این معمولاً با یک دایره تو پر مشخص می شوند. تگ ابتدای آن <ul> است و تگ پایانی آن <ul/> است. برای جدا کردن هر بخش لیست در ابتدای آن از تگ <li> استفاده می شود. بهتر است هر تگ <li> که باز می شود با <li/> بسته شود. در زیر یک مثال برای این نوع لیست آورده شده است:

<ul>
<li>بخش اول لیست</li>
<li>بخش دوم لیست</li>
<li>بخش سوم لیست</li>
</ul>

مثال بالا یک لیست بولت دار با سه بخش را به ما می دهد:

• بخش اول لیست
• بخش دوم لیست
• بخش سوم لیست

تگ <li> یک شناسه به نام type داره در این شناسه از سه کلمه : circle،disc،square استفاده کرد. این شناسه در لیستهای نا مرتب برای مشخص کردن شکل علامت مشخص کننده هر بخش استفاده می شود.

• circle
  با قرار دادن این مقدار برای لیست علامت ابتدایی هر بخش به شکل یک دایره تو خالی در می آید.
• disc
  این مقدار شکل علامت ابتدای هر قسمت از لیست را به یک دایره تو پر تغییر می دهد.
• square
  این مقدار شکل علامت لیست را به صورت یک مربع تو پر در می آورد.

مثلا:

<ul>
<li type="circle">قسمت اول لیست</li>
<li type="disk">قسمت دوم لیست</li>
<li type="square">قسمت سوم لیست</li>
</ul>

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

• لیست های مرتب

شما می توانید در مورد لیستهای مرتب هم مانند لیستهای نامرتب عمل کنید فقط کافیست به جای استفاده از <ul> و <ul/> از تگهای <ol> و <ol/> استفاده کنید. به یک مثال در این زمینه توجه کنید:

<ol>
<li>بخش اول لیست</li>
<li>بخش دوم لیست</li>
<li>بخش سوم لیست</li>
</ol>

نتیجه به صورت لیستی شماره گذاری شده ظاهر می شود:

1. بخش اول لیست
2. بخش دوم لیست
3. بخش سوم لیست

برای کنترل تگ <ol> از چند شناسه هم می توان استفاده کرد.


خب بریم سر شناسه هایی که میشه توی این تگ استفاده کرد:


شناسه اول : start

در مورد لیستهای مرتب با استفاده از شناسه start در تگ <OL> می توانیم تعیین کنیم که شماره های لیست از چه عددی شروع شود. به مثال زیر توجه کنید:

<ol start="15">
<li>این سطر اول لیست است ولی شماره آن 15 است.</li>
</ol>

نتیجه این کد عدد اولیه شروع از 15 آغاز میشود .


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

• "type="1
  با این شناسه بخشهای لیست با اعداد ریاضی مشخص می شوند.
• "type="A
  با استفاده از این شناسه بخشهای لیست با حروف بزرگ انگلیسی مشخص می شوند.
• "type="a
  با استفاده از این شناسه بخشهای لیست با حروف کوچک انگلیسی مشخص می شوند.
• "type="I
  با استفاده از این شناسه بخشهای لیست با حروف بزرگ یونانی مشخص می شوند.
• "type="i
  با استفاده از این شناسه بخشهای لیست با حروف کوچک یونانی مشخص می شوند.

این شناسه هم می تواند در تگ <ol> استفاده شود و هم در تگ <li> و در این مورد مانند لیستهای نامرتب عمل می کند.
در مثال زیر می توانید نحوه نمایش حالات مختلف لیست را با استفاده از شناسه type مشاهده کنید:

<ol>
<li type="A">قسمت اول لیست</li>
<li type="a">قسمت دوم لیست</li>
<li type="1">قسمت سوم لیست</li>
<li type="I">قسمت چهارم لیست</li>
<li type="i">قسمت پنجم لیست</li>
</ol>

نتیجه رو خودتون تست کنید

[homayon574]

خب امروز در مورد جداول(table) در html میخوایم صحبت میکنم ...

جدول بندی در html شکل خاصی داره برای شروع یک جدول در html باید از تگ <table> سپس محتویات جدول و برای پایان از تگ </table> استفاده میشود . متاسفانه در اینجا نمیشه از جداول به شکل عملی مثل زد و خودتون باید یک فایل html ایجاد کنید و کد ها رو خودتون تست کنید ...

خب برای اینکه به یک جدول با چند ستون افقی ایجاد کنید باید از تگ <td> در قالب تگ اصلی استفاده نمایید، این تگ که مخفف table data هستش برای ایجاد ستون های افقی کاربرد داره لطفا کد زیر رو خودتون تست کنید تا با منظور بهتر ارتباط برقرار کنید

<table>
<td>
یک
</td>
<td>
دو
</td>
<td>
سه
</td>
</table>

نیتجه بالا به شکل : یک دو سه خواهد شد و هیچ چیز مشاهده نمیشود ، حالا برای اینکه جدول شکل پیدا کند باید یک خط بردار بهش اضافه کنید پس کد زیر رو جایگزین و تست کنید

<table border="1">
<td>
یک
</td>
<td>
دو
</td>
<td>
سه
</td>
</table>

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

خب حالا میخوایم یک جدول که دارای سه ستون افقی و دو ستون عمودی هست که دارای 6 خانه هست ایجاد کنیم در اینجا باید از یک تگ جانبی جدید به نام <tr> استفاده کنیم ، این تگ وظیفه داره ستونی های افقی که بعدش میاد رو در یه ستون عمودی بارگزاری کنه (حاظرم شرط ببندم نفهمیدید چی گفتم چون خودمم نفهمیدم چی گفتم )

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

<table border="1">
<td>
یک
</td>
<td>
دو
</td>
<td>
سه
</td>

<tr>
<td>
چهار
</td>
<td>
پنج
</td>
<td>
شش
</td>
</tr>

</table>

نتیجه میشه یه جدول با دو ستونه عمودی و سه ستون افقی

جدول همش همین بود ، از اینجا به بعد با امکانات که تگ های این قسمت در دسترس ما میزارن آشنا میشیم .

• اول از همه خاصیت border : این خاصیت کادر جدول رو مشخص میکنه در صورتی که گذاشته نشه معادل 0 خودبخود قرار میگیره یعنی جدول هیچ کادری نداره و شمای کلی جدول مشخص نمیشه این خاصیت در تگ <table> باید به کار برده شود

• خاصیت bgcolor : این تگ اختصاصی جداول نیست جاهای زیادی کاربرد داره،این تگ رنگ زمینه هر قسمتی که گذاشته بشه رو مشخص میکنه از این تگ هم در <table> هم در <tr> و هم در <td> میتوان استفاده کردو توش میشه از نام رنگ ها و کد هگزادیسمال رنگ ها استفاده کرد

• خاصیت cellspacing : این خاصیت فضای خالی بین ستون های جدول رو مشخص میکنه در صورتی گذاشته نشه با توجه به تنظیمات پیش فرض معادل عددی نزدیک دو قرار داده میشه یعنی به طور عادی یه فاصله کوچیک بین ستون های جداولتون در صورتی که این خاصیت معادل 0 قرار نگیره وجود داره ،این خاصیت در تگ <table> باید به کار برده شود

• خاصیت cellpadding : این خاصیت یک فضای خالی بین محتویات ستون ها با کادر ستون ایجاد میکنه، در صورت گذاشته نشدن این تگ معادل 0 طبق تنظیمات پیش فرض قرار میگیره یعنی محتویات ستون ها خر به خر میچسبه به جداول این خاصیت در تگ <table> باید به کار برده شود

• خاصیت align : این خاصیت مختص جداول نیست و توی تگ های زیادی از html میشه استفاده کردش اینجا معرفیش میکنم که سئوالی توی ذهن شما نمونه ، این خاصیت جهت قرار گیری جدول رو مشخص میکنه شما به طور مختص میتونید سه مقدار right,center,left به این خاصیت بدید .از این خاصیت میتوانید در تگ <table> و <td> استفاده نمایید.

• خاصیت valign : این خاصیت را در تگ <td> به کار ببرید ريا، این خاصیت وضعیت عمودی نوشته ها را مشخص میکند که در وسط جدول باشد پایین جدول باشد یا در بالای جدول در این خاصیت میتوانید سه مقدار top,middle,bottom را قرار بدید.

• خاصیت های width & height : این خواض رو میشه توی تگ اصلی جدول <table> نیز استفاده کرد با این خاصیت ها میتونید طول و ارتفاع جدولتون رو تغییر بدید ولی پیشنهاد اینه که از این خاصیت توی تگ <td> بیشتر استفاده کنید این نکته را هم در نظر بگیرید این خاصیت را اگر به تگ <td> به یک سطر داده بهش ستون های زیرین آن هم به آن خاصیت تغییر میکنند البته در صورتی که ستون های زیرین اندازه داده نشده باشند .

• خاصیت های rowspan & colspan : این دو خاطیت مختص تگ <td> هست .با خاصیت rowspan میتوان چند سطر ستون که به شکل عمودی هست را یکی کرد و با خاصیت colspan میتوان چند سطر ستون را به شکل افقی به هم متصل کرد.

خب با توجه به دانسته های بالا مثال زیر را اجرا و مقدار خاصیت ها رو تغییر بدید تا بیشتر این مطلب رو فرا بگیرید ...

<table border="1" bgcolor="#eeeeee" cellspacing="0" cellpadding="4" align="center" width="500" height="150">
<td align="center" colspan="3">
یک
</td>
<tr bgcolor="brown">
<td align="right" valign="top" width="200">
دو
</td>
<td align="center" valign="middle" rowspan="2">
سه
</td>
<td align="left" valign="bottom" width="200">
چهار
</td>
</tr>
<tr>
<td bgcolor="lightgreen">
پنج
</td>
<td bgcolor="green">
شش
</td>
</tr>
</table>

نتیجه به شکل زیر خواهد شد :

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

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

[b.abi]

سلام همایون جان بابت زحماتت ممنون
من مطالب رو تا اینجا خوندم،برای ادامه به کجا میتونم مراجعه کنم؟

[boy24iran]

سلام
ممنون از زحمات شما
<hr/> برای چه کار هست
<ul/><ul> برای چه کاری هست؟
زمانی که کلمه مثل آمادگی ها در ورد می نویسیم می شه از ترکیب Ctrl + منها استفاده کرد تا ی و ها به هم بچسبند ولی امکان این کار در اینجا نیست در نوت و فرانت پیج هم نبود لطفاً راهنمایی کنید
بقیه آموزش ها رو در کجا باید بخونم
ممنون

[boy24iran]

سلام ببقشید اگه تو آموزشتون چیزی می گم اما ظاهراً تگ
<del><del/>
با تگ
<strike></strike>
شبیه به هم هستند و هر چی بینشون می یاد روی اون متن خط می کشن