آموزش شبکه
  • کاربر گرامی ، برای مطرح کردن سوالات و مشکلات مرتبط با ووکامرس از انجمن "پرسش و پاسخ ووکامرس" و برای مطرح کردن سایر مشکلات (وردپرس ، PHP و سایر اسکریپت ها) از انجمن "پرسش و پاسخ" اقدام کنید. برای دریافت پاسخ حداقل 48 ساعت منتظر باشید.

homayon574

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

27 پست در این موضوع قرار دارد

سلام دوستان از این به بعد میخوام اینجا یه آموزش کامل از HTML بدم ، به شما قول میدم بعد از تموم شدن این آموزش بدون هیچ مشکلی خودتون میتونید قالبتون رو بسازید :|:|(جدی بودن بهم نمیاد:78:) سعی میکنم کمی شوخی بین آموزش بگنجونم چون ادما در زمان شادی زودتر موضوعات رو تجزیه تحیلی میکنن;).gif' alt=':;;):'>

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

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

تاریخچه 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 نیز به تازگی انتشار یافته که مورد توجه تمامی اهل فن قرار گرفته است ...

اطلاعات بیشتر در این مورد در ویکپدیا :

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

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

W3C يا کنسرسيوم شبکه جان گستر وب، مجمعي متشکل از 400 شرکت و سازمان است که در مورد استاندارد ها و فناوري هاي وب، تشريک مساعي دارند.

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

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

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

  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) می گویند زیرا هر چه بعد از این تگ نوشته شود با توجه به نوع درخواست تغییر میکنید .

اما برای پایان بخشیدن به یک تگ چه باید کرد؟ برای این کار باید از تگ انتهایی را بکار برد ، تگ انتهایی مانند همان تگ ابتدائی است تنها یک " / " قبل از نام تگ قرار میگیرد

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

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

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

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

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

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

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

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

با کد :

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

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

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

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

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

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

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

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

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

خب حالا یه چیزی باید به عنوان بدنه قرار بدیم پس یه متن ضحیم شده که قبلا" یاد گرفتیم صرفا برای آزمایش میازیرم که به شکل <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> است.

بقیه آموزش دیگه برای فردا ...:-":105:

ویرایش شده در توسط 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

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

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

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

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

تا اینجا اینا کافی هستن ا، این تگها ها رو توی فایل test1.html که ایجاد کردید امتحان کنید تا بهتر متوجه عملکرد این تگ ها شوید ...

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

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

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خب فعلا همینا بسته البته یک نکته لازم به ذکر هم هست شما میتوانید از همه این تگها در قالب یک خط فرمان نیز استفاده کنید یعنی یک متن را هم کج کنید هم پررنگ کنید هم چشمک زن کنید ، به طور مثال :

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

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

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

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

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

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

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

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

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

ویرایش شده در توسط homayon574

به اشتراک گذاری این پست


لینک به پست
به اشتراک گذاری در سایت های دیگر

خب امروز بخض آخر آشنایی با تگ های متون هستش بعد این به سراغ تگ های پیشرفته تر میریم تا اینجا هرچی تگ یاد گرفتید رو توی یه فایل اچ تی ام ال حتما" تست کنید که از یادتون نره ;).gif' alt=':;;):'> وگرنه باید دوباره از اول این قسمتو چندماه دیگه بخونید که یادآوری بشه:76:

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

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

نتیجه به شکل تکرار کلمات بدون ایجاد خط جدید خواهد شد ;).gif' alt=':;;):'>

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

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

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

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

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

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

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

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

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

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

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

سرفصل بزرگ

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

سرفصل 2

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

سرفصل 3

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

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

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

کوچکتر

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

بسیار کوچک

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

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

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

تا بعد .....:53:

به اشتراک گذاری این پست


لینک به پست
به اشتراک گذاری در سایت های دیگر

سلام خب بریم سراغ قسمت پنجم ،

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

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

تگ اول : تگ font> :

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

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

نمونه بالا یک نمونه میشه گفت کامل بود که لپ مطلبو میرسونه ;).gif' alt=':;;):'>

توی قسمت اول تگ من اندازه متن رو نشون دادم این قسمت رو شما میتونید یک عدد بین 1 تا 7 قرار بدید در حال حاظر من اندازه فونت رو توی حالت متوسط گذاشتم ، قسمت بعد رنگ فونت رو مشخص کردم در این قسمت میتونید نام رنگ مورد نظر یا کد رنگتان را وارد کنید . به طور مثال برای رنگ مشکی میتوان از کلمه "black" یا کد رنگ "000000#" iاستفاده کرد اگر با کد رنگ ها آشنایی ندارید

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.
استفاده نمایید ، در قسمت سوم این تگ من نوع فونت رو مشخص کردم شما میتونید نام فونت ها رو توی این قسمت بزارید نمونه هاش دیگه ای که میشه گذاشت : " georgia , tahoma , arial , times new roman , vardena " و بسیاری دیگر است ، نتیجه کد بالا به شکل زیر خواهد شد :

This Is a Test

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

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


<a href="http://clobiran.com">This Is a Test</a>
این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

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

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

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


<a href="http://clobiran.com" target="_blank">This Is a Test</a>
این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

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

  • "_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> شروع میشه این تگ برای نمایش تصاویر کاربرد داره . در ضمن ای تک از جمله تگ هایی هستش که نیازی به بسته شدن یا تگ انتهایی نداره ...

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

0_9176.jpg

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

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

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

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

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

قسمت alt زمانی کاربرد داره که مشکلی توی لود شدن تصویر از سرور به وجود بیاد و تصویر لود نشه اگر چنین چیزی بشه متن alt در داخل کادر تصویر به نمایش در خواهد آمد یا به صورت متن به جای تصویر خواهد آمد;).gif' alt=':;;):'>

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

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

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

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

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

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

0_91076.jpg0

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

  1. نیازی به گذاشتن طول و ارتفاع تصویر نیست تصویر خودبخود میتواند تنظیم میشود اما وارد کردن طول و ارتفاع بر بالارفتن سرعت لود صفحه تاثیر مستقیم دارد.
  2. واحد اندازه گیری تصویر بر حسب پیکسل میباشد زمانی که در کد مینویسیم width="200" منظور همان width="200px" هست
  3. رعایت نظم در نوشتن قسمت ها در همه تگ ها در html سرعت لود را بالا میبرد در مورد تصاویر src =>title =>alt =>width =>border =>height شکل کلی می باشد

  4. در صورت قرار دادن تصویر در قالب یک لینک یک کادر یک پیکسلی آبی ممکن است در دور تصویر ایجاد شود که اگر کد کادر مقدار 0 داده شود یا شده باشد این کادر از بین میرود .
  5. در صورتی که تصاویر در میان تگ <center> و </center> قرار بگیرید به وسط صفحه هدایت میشود .
  6. در تمام تگهایی که src وارد شده است وارد کردن //:http الزامیست و وارد نکرد .www هیچ لزومی ندارد، اگر //:http وارد نشود کد شما درست اجرا نمیشود مثلا در کد تصاویر و لینک ها .

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

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

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

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

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

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

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


این یک کامنت است
کامنتها در مرورگر نمایش داده نمی شوند
-->
این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

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

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

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

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

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

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

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

ویرایش شده در توسط homayon574

به اشتراک گذاری این پست


لینک به پست
به اشتراک گذاری در سایت های دیگر

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

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

گفته بودم که html جاهای خالی در نظر گرفته نمیشن اما با کاراکتر   میتوان هر چند فاصله که بخواهید ایجاد کنید /:)

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

  • علامت فاصله =========> ;nbsp&
  • امپرسند =======> & ==> &
  • علامت کپی رایت ==> © ==> ©
  • علامت ثبت شده ==> ® ==> ®
  • علامت تجاری ====> ™ ==> ™
  • علامت کوچکتر از ==> < ==> <
  • علامت بزرگتراز ===> > ==> >
  • علامت خنجر ====> † ==> †
  • فلش راست ====> » ==> »
  • فلش چپ ====> « ==> «
  • علامت درجه ===> ° ==> °
  • یک چهارم ====> ¼ ==> ¼
  • یک دوم =====> ½ ==> ½
  • سه چهارم ===> ¾ ==> ¾
  • نقطه میانی ==> · ===> ·
  • تعجب وارونه ==> ¡ ===> ¡
  • علامت یورو ==> € ===> €
  • علامت تقسیم=> ÷ ==> ÷
  • علامت رادیکال=> √ ==> √
  • پوند انگلیس ==> £ ==> £
  • کوتیشن ====> ' ==> '
  • دبل کوتیشن ==> " ==> "

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

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

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

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

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

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

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

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

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

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

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

مثلا:

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

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

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

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

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

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

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

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

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

شناسه اول : start

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

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

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

شناسه دوم : type

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

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

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

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

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

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

وب کاشت پسند دیده است

به اشتراک گذاری این پست


لینک به پست
به اشتراک گذاری در سایت های دیگر

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

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

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

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

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

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

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

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

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

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

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

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

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

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

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

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

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

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

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

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

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

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

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

qo0ovoglav3o2lgzniyq.png

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

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

ویرایش شده در توسط homayon574
اشتباه تایپی
وب کاشت پسند دیده است

به اشتراک گذاری این پست


لینک به پست
به اشتراک گذاری در سایت های دیگر

سلام همایون جان بابت زحماتت ممنون:)

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

به اشتراک گذاری این پست


لینک به پست
به اشتراک گذاری در سایت های دیگر

سلام

ممنون از زحمات شما

<hr/> برای چه کار هست

<ul/><ul> برای چه کاری هست؟

زمانی که کلمه مثل آمادگی ها در ورد می نویسیم می شه از ترکیب Ctrl + منها استفاده کرد تا ی و ها به هم بچسبند ولی امکان این کار در اینجا نیست در نوت و فرانت پیج هم نبود لطفاً راهنمایی کنید

بقیه آموزش ها رو در کجا باید بخونم

ممنون

به اشتراک گذاری این پست


لینک به پست
به اشتراک گذاری در سایت های دیگر

سلام ببقشید اگه تو آموزشتون چیزی می گم اما ظاهراً تگ

<del><del/>

با تگ

<strike></strike>

شبیه به هم هستند و هر چی بینشون می یاد روی اون متن خط می کشن

sot35n پسند دیده است

به اشتراک گذاری این پست


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

ممنون از زحمات شما

<hr/> برای چه کار هست

<ul/><ul> برای چه کاری هست؟

زمانی که کلمه مثل آمادگی ها در ورد می نویسیم می شه از ترکیب Ctrl + منها استفاده کرد تا ی و ها به هم بچسبند ولی امکان این کار در اینجا نیست در نوت و فرانت پیج هم نبود لطفاً راهنمایی کنید

بقیه آموزش ها رو در کجا باید بخونم

ممنون

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

وب که ماکروسافت افیس نیست :دی چسبوندن میخوای چیکار space رو وردار به هم میچسبن دیگه یا از Ctrl + j استفاده کن این شکلی میشه هرچندتا دکمه بزنی آمادگیـها

به اشتراک گذاری این پست


لینک به پست
به اشتراک گذاری در سایت های دیگر
سلام ببقشید اگه تو آموزشتون چیزی می گم اما ظاهراً تگ

<del><del/>

با تگ

<strike></strike>

شبیه به هم هستند و هر چی بینشون می یاد روی اون متن خط می کشن

ببین یه سری تگ ها کاربرد شبیه هم دارن دلیل چندتایی شدنشونم برای اینه که ورژن جدیدتر ارائه شده از زبان یا دلایل دیگه که تگ جدید اومده برای خط کشیدن روی متن میشه از <s> و <strike> و <del> استفاده کرد همشونم یه کارو انجام میدن

به اشتراک گذاری این پست


لینک به پست
به اشتراک گذاری در سایت های دیگر

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

وب که ماکروسافت افیس نیست :دی چسبوندن میخوای چیکار space رو وردار به هم میچسبن دیگه یا از Ctrl + j استفاده کن این شکلی میشه هرچندتا دکمه بزنی آمادگیـها

سلام

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

آموزش بعدی دیگه ندارید

Ctrl + j

چه کاری انجام می ده؟

ممنون

به اشتراک گذاری این پست


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

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

آموزش بعدی دیگه ندارید

Ctrl + j

چه کاری انجام می ده؟

ممنون

-نمی دونم!

-اگه کسی نمیاد آموزش بده من وارد عمل شم!!!!

- این کار رو انجام می ده: ســـــــــلـــــــــام

به اشتراک گذاری این پست


لینک به پست
به اشتراک گذاری در سایت های دیگر

  • کدهای بالا صفحه که مخفی هستند در بین دو تگ <head> و <head/> اجرا می شوند.

سلام. تشکر از اطلاعاتی که میدین.

یه سوال!

تگ title که در بین دو تگ ابتدایی و پایانی تگ head قرار میگیره، کد مخفی است؟؟ منظورتون چیه که گفتین

"کدهای بالا صفحه که مخفی هستند در بین دو تگ <head> و <head/> اجرا می شوند. "

؟؟؟

به اشتراک گذاری این پست


لینک به پست
به اشتراک گذاری در سایت های دیگر
سلام. تشکر از اطلاعاتی که میدین.

یه سوال!

تگ title که در بین دو تگ ابتدایی و پایانی تگ head قرار میگیره، کد مخفی است؟؟ منظورتون چیه که گفتین

"کدهای بالا صفحه که مخفی هستند در بین دو تگ <head> و <head/> اجرا می شوند. "

؟؟؟

کدهایی که در تگ head هستند کاربردهای خاص خودشونو دارن و در بخش نمایش قالب نقشی ندارن و یه سری تنظیمات رو میتونید با کد های بین اونها تغییر بدید

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

meta tag ها با کاربردهای مختلف و زیاد از جمله اینکدینگ و متا های مربوط به سئو در head قرار میگیرن

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

کدهای جاوا اسکریپت یا فایل های جاوا اسکریپت هم قابلیت ادرس دهی در بین تگ head دارن با وجود اینکه توصیه میشه کدهای حاوا اسکریپت در بالای صفحات html استفاده نشن

به اشتراک گذاری این پست


لینک به پست
به اشتراک گذاری در سایت های دیگر

یه سوال دیگه اینکه ما بدون استفاده از تگ nobr هم به خط جدید نمیریم! چرا ازش استفاده میشه؟؟

به اشتراک گذاری این پست


لینک به پست
به اشتراک گذاری در سایت های دیگر
یه سوال دیگه اینکه ما بدون استفاده از تگ nobr هم به خط جدید نمیریم! چرا ازش استفاده میشه؟؟

کارکردشو تست کنید یه پاراگراف چند خطی رو کپی کنید و و بین تگ nobr بزارید کل پاراگراف تو یه خط مستقیم میره تا از صفحه مانیتور بزنه بیرون ! تگ پر استفاده ای نیست ولی بعضی جاها که این اینترنت ایکسپلورر سر ناسازگاری با بعضی قسمتای صفحات خصوصا جداول میزاره به کار میاد

به اشتراک گذاری این پست


لینک به پست
به اشتراک گذاری در سایت های دیگر

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

تنها چیزی که تو html قادر به ارتباط دو طرفه هست تگ <form> هست. کار فرم ها اینه که بعد از دریافت اطلاعات از کابر، اطلاعات رو به یه فایل دیگه که asp یا php و... هست میتونه ارسال کنه.

شکل کلی تگ فرم به این صورته:

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

اصلی ترین خصوصیت این تگ، action است که مشخص میکنه اطلاعات وارد شده به چه فایلی ارسال شه.

خب بریم سراغ توضیح دادن خصوصیات فرم:

خصوصیت name: یه نام برای فرمتون تعیین میکنه

خصوصیت action: فایلی رو مشخص میکنه که داده ها باید برای انجام کار برای اون ارسال بشه.

خصوصیت method: روش ارسال داده ها رو مشخص میکنه( میتونه post یا get باشه)

خصوصیت id: برای تعریف یک شناسه به کار میره.

خب تا اینجا نصف راه رو رفتیمم بقیه راه اینه که برای این فرم مثل فرم های ثبت نام جعبه متن(textbox(، دکمه و...

تعریف کنیم که برای تعریفشون از دستور input استفاده میکنیم. شکل کلی دستورش اینجوریه:

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

خصوصیات type میتونه چیزای زیر باشه:

text: کادر متنی

password: مثل همون کادر متن فقط متنش ستاره دار میشه

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

radio: دکمه های رادیویی

submit: دکمه ی تایید فرم و ارسال اطلاعات

reset: دکمه ریست کردن تموم فیلد ها

خصوصیت name هم که نام کنترل رو مشخص میکنه.

خب امیدوارم این مطلب رو تونسته باشم خوب توضحیح داده باشم.

ویرایش شده در توسط mersadblue
moein921 پسند دیده است

به اشتراک گذاری این پست


لینک به پست
به اشتراک گذاری در سایت های دیگر
در ۱ ساعت قبل، nima11 گفته است :

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

بله. خیلی از برنامه نویسهای مطرح، در دوره های آکادمیک (دانشگاهی / آموزشگاهی) شرکت نکردند. اصول همونه.

فقط شاید برید کلاس 4 تا مثال عینی براتون کار کنند که اونم با اندکی جستجو می تونید توی وب پیدا کنید.

بقیه اش خلاقیت و هنر شماست :-)

Mohammad پسند دیده است

به اشتراک گذاری این پست


لینک به پست
به اشتراک گذاری در سایت های دیگر

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری