رفتن به مطلب
تبریک به مناسبت آغاز سال ۱۴۰۳
انتشار چهل دومین شماره مجله برق و کامپیوتر کهربا

Html : پیش نیاز (قسمت اول)

FrnzT

توسط FrnzT،
در HTML

ارسال های توصیه شده

FrnzT    18,194

FrnzT
ارسال شده در

آموزش HTML

 

 

آنچه که قبل از یادگیری HTML لازم است بدانید:

 

برای شروع کار با HTML شما به چیزهایی نیاز دارید که در لیست زیر آمده است:

 

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

 

 

 

 

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

  • Like 9
لینک به دیدگاه
  • 3 ماه بعد...

sahar68    442

sahar68
ارسال شده در

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

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

و لینک بالا

  • Like 6
لینک به دیدگاه

FrnzT    18,194

FrnzT
  • مالک
ارسال شده در
با اجازه فرناز جون ادامه رو شروع میکنم اما با استفاده از این منبع:http://www.html.ir

درود سحر عزیزم

بسیار سپاسگذارم از این که این جستار رو ادامه میدی.

o2guu7l10fp91pmqcuts.gif

  • Like 6
لینک به دیدگاه

sahar68    442

sahar68
ارسال شده در

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

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

اگر بخواهید متن بالا را با زیرخط در مرورگر خود ببینید باید آنرا مطابق خط روبرو در ویرایشگر متن خود بنویسید:

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

تیجه را به این صورت می بینید: Tags and their position

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

 

 

 

 

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

 

 

البته بعداً در مورد این تگ توضیح خواهیم داد در اینجا فقط برای مثال این تگ را آوردیم. موارد دیگری هم با این وضعیت وجود دارند مثلاً

که برای رفتن به خط بعدی استفاده می شود،

که برای ایجاد یک خط افقی به کار می رود و

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

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

همان

است. البته در نسخه های جدیدتر HTML توصیه می شود کدهای HTML با حروف کوچک نوشته در XHTML هم نوشتن کدها با حروف کوچک الزامی است. فضای خالی هم بین تگها تأثیری ندارد. مثلاً :

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

کد بالا همان نتیجه ای را می دهد که کد زیر دارد:

 

 

 

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

 

 

 

 

قالب پایه ای یک فایل HTML مانند زیر است. ببینید می توانید کاری را که تگهای این کد انجام می دهند حدس بزنید؟ البته همه آنها را بعداً توضیح می دهیم.

 

 

 

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

برای درک بهتر این قسمت سعی کنید تگها را به صورت جفتی در نظر بگیرید (از جایی که باز می شوند تا جایی که بسته می شوند) اولین تگ است که علامت شروع یک متن HTML است و تگ پایانی آن

است که همانطور که ممکن است حدس زده باشید نشانه پایان متن HTML است. هر چیزی در HTML باید بین این دو تگ قرار گیرد. مانند متن، دیگر تگها، عکسها و... چون این دو تگ نشان دهنده آغاز و پایان صفحه شما هستند.

تگ بعدی

است. این تگ مشخص کننده بخشی است که شما باید عنوان صفحه، کلمات کلیدی، و دیگر توضیحات خود برای این صفحه را در آن قرار دهید. این بخش با
  • Like 7
لینک به دیدگاه

sahar68    442

sahar68
ارسال شده در

نوشتن متن ها به صورت ضخیم، مورب، زیر خط دار و خط خورده

 

 

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

1- این تگ باعث می شود کلماتی که بین این تگ و تگ پایانی آن قرار دارند به صورت پر رنگ و بولد (Bold) دیده شوند. به مثال زیر توجه کنید:

متنی که اینجا قرار بگیرد به صورت بولد نمایش داده می شود

مثال بالا به صورت زیر دیده می شود:

متنی که اینجا قرار بگیرد به صورت بولد نمایش داده می شود

بیایید با تگهای دیگری ادامه دهیم:

 

 

2- زیرخط (Underline):

 

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

 

 

 

این هم نتیجه:

این متن با زیر خط مشاهده می شود

 

 

3- حروف کج (Italic):

 

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

و نتیجه به این صورت است:

این متن به صورت مورب دیده می شود

 

 

4- حروف خط خورده:

 

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

متن در مرورگر به این صورت دیده می شود:

این متن به صورت خط خورده دیده می شود

 

 

5- وسط چین:

 

 


<center>این متن در وسط خط نوشته می شود</center>
برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

نتیجه هم به این صورت دیده می شود:

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

آیا ترتیب قرار گرفتن تگهای پایانی مهم است؟ در پاسخ باید گفت در مثال بالا خیر، اما مواردی وجود دارد که ترتیب قرار گرفتن تگها مهم است مثلاً قرار گرفتن تگ پایانی

قبل از
  • Like 7
لینک به دیدگاه

sahar68    442

sahar68
ارسال شده در

از تگهای سر فصل (HEADING) برای تیتر و عنوان مطالب استفاده می شود. به این مثالها توجه کنید:

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

 

 

سرفصل بزرگ

 

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

 

 

سرفصل 2

 

به همین ترتیب از تگ h1تا تگh6اگر امتحان کنید نتیجه کار را بدست خواهید اورد:ws3:

 

 

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

 

  • وقتی که تگ
    در متنی وارد می شود بقیه آن خط به خط بعد منتقل می شود. در حقیقت تگ
    یا همان Line Break کاری مشابه فشردن کلید Enter به همراه Shift را انجام می دهد. قابل ذکر است که این تگ نیازی به تگ پایانی ندارد. به یک مثال توجه کنید:

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

نتیجه مثال بالا به اینگونه است:

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

مرورگر اصولاً تا وقتی که به کمبود فضا برای یک خط بر نخورد به خط بعدی نمی رود. اما تگ

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

 

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

 

 

برای اینکه نتیجه ای مشابه متن نوشته شده در ویرایشگر متن داشته باشیم، باید متن را به این صورت بنویسیم:

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

 

این هم نتیجه:

من،

یک خط

جدید می خواهم

 

  • تگ پاراگراف است. این تگ باعث ایجاد یک فضای خالی عمودی بین دو خط در دو پاراگراف می شود. درست مثل اینکه شما
    را دو بار تایپ کنید.از این تگ در اول پاراگراف برای تمایز دو پاراگراف استفاده می شود. به مثال زیر توجه کنید:

 

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

 

 

و نتیجه به این صورت است:

خط اول از پاراگراف اول

خط دوم از پاراگراف اول

این هم پاراگراف جدید

تگ پاراگراف هم نیازی به تگ پایانی ندارد. اما شما می توانید برای فهم بهتر آنرا در متن خود به کار ببرید. مثلاً به این صورت:

 

 

 

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

 

 

 

 

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

 

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

 

 

این هم نتیجه هر دو متن بالا:

پاراگراف اول

پاراگراف دوم

ادامه پاراگراف دوم

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

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

  • Like 7
لینک به دیدگاه

sahar68    442

sahar68
ارسال شده در
ايرادي نداره من مي گم:

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

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

بازم مرسی

  • Like 3
لینک به دیدگاه

sahar68    442

sahar68
ارسال شده در

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

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

تیجه به این صورت خواهد بود: کلمه اول کلمه دوم فاصله اول بین کلمات با فشار دادن دکمه Space ایجاد می شود. مرورگر فاصله اول را تشخیص می دهد اما بعد از آن هر تعداد فاصله که باشد تفاوتی نمی کند و شما فقط یک فاصله را در مرورگر می بینید. افزودن کد ;nbsp& مرورگر را مجبور می کند تا بین دو کلمه فاصله اضافی بگذارد. شما با تکرار این کد می توانید به هر تعداد که بخواهید فاصله خالی ایجاد کنید.مانند زیر:

 

 

 

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

نتیجه:

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

این فرمان چهار فضای خالی اضافی بین دو کلمه ایجاد می کند. و در مجموع پنج فضای خالی داریم.

بحث بعدی ما علامت کپی رایت است. شما می توانید به همان روشی که برای فضای خالی اضافی ایجاد کردیم این علامت را نیز به وجود بیاورید. یعنی با استفاده از کد آن. کد علامت کپی رایت این است: ;copy& به این مثال توجه کنید:

 

 

 

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

 

 

متن نتیجه:

this page Copyright © 2007 by me

روش کار برای تمامی کاراکترهای ویژه به همین صورت است فقط کد آنها را در متن HTML قرار دهید.

 

 

 

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

  • Like 4
لینک به دیدگاه

sahar68    442

sahar68
ارسال شده در

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

برای ایجاد لینک از تگ زیر استفاده می کنیم:

 

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

 

 

تگ نشانه لینک است. شناسه href مشخص کننده آدرس لینک می باشد، نشانه بسته شدن تگ است. متنی که بین این دو تگ ابتدایی و پایانی نوشته می شود متنی است که در صفحه شما به عنوان یک لینک دیده می شود. مثلاً اگر می خواهید به یک صفحه وب مثلاً صفحه اصلی سایت ما با این آدرس: http://www.neopersia.org/html/index.html لینکی را در صفحه خود داشته باشید باید فرمان زیر را در قسمت body صفحه خود در جایی که می خواهید لینک به نمایش درآید قرار دهید:

 

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

 

 

 

 

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

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

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

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

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

در مثال زیر فرض بر این است که هر دو صفحه مبدأ و مقصد لینک در یک پوشه قرار دارند. برای نمونه سرفصل آموزش مقدماتی HTML در همان پوشه ای قرار دارد که این صفحه قرار دارد. نام این صفحه index.php است. برای ایجاد یک لینک در این صفحه می توانیم به اینگونه عمل کنیم:

 

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

 

 

لینک حاصل شده:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

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

اگر شما شک دارید یا مطمئن نیستید که هر دو صفحه در یک پوشه قرار دارند حتماً از آدرس کامل استفاده کنید. چون در این روش مهم نیست که صفحات مربوط به چه سایتی باشند.

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

 

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

 

 

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

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

  • Like 3
لینک به دیدگاه

sahar68    442

sahar68
ارسال شده در

آیا شما می خواهید یک عکس را به صفحه خود اضافه کنید؟ برای این کار باید از تگ زیر استفاده کنید:

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

 

در این تگ IMG نشانه قرار گرفتن تصویر در صفحه و SRC آدرس محل قرار گرفتن فایل عکس است. حتماً لازم نیست این عکس مربوط به سایت شما باشد یا در سرور شما قرار داشته باشد، شما می توانید هر عکسی که در اینترنت قابل دسترسی باشد استفاده کنید (اگر قصد دارید صفحه خود را در یک سایت اینترنتی قرار دهید) . شما می توانید فقط نام فایل را به جای آدرس کامل بنویسید اگر صفحه ای که عکس باید در آن قرار گیرد و خود عکس در یک پوشه قرار داشته باشند.

مثلاً اگر عکس شما در این آدرس قرار دارد

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.
و صفحه ای که در حال ویرایش آن هستید در پوشه ای غیر از این قرار دارد شما باید تگ زیر را برای اضافه کردن عکس به صفحه خود به کار ببرید:

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

 

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

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

 

پسوند فایل حتماً نباید gif. باشد. یعنی شما می توانید از فرمتی مثل jpg. نیز استفاده کنید. این دو فرمت از بقیه پر استفاده تر هستند. اگر شما عکسی با فرمتی غیر از این دو فرمت دارید می توانید از برنامه های ویرایش عکس از قبیل فتوشاپ برای تبدیل کردن آنها استفاده کنید.

برای نمونه من می خواهم یک عکس را با نام learn_html.gif را که در پوشه همین صفحه قرار دارد را به این صفحه اضافه کنم. در اینجا از این تگ استفاده کرده ام:

 

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

 

 

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

learn_html.gif

به این ترتیب یک تصویر را در سمت چپ صفحه خواهیم دید (در صورتی که صفحه ما چپ به راست باشد). اگر می خواهید تصویر در مرکز صفحه ( وسط خط ) قرار گیرد باید از تگ

در اطراف تگ تصویر استفاده کنید. مانند زیر:

 

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

 

 

تصویر به دست آمده به صورت زیر است:

learn_html.gif

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

در نسخه چهارم HTML از آنها استفاده می شود. مثلاً می توان از تگ
با شناسه "align="center استفاده کرد.

به خاطر داشته باشید که آدرس محل عکس و نام آن به حروف کوچک و بزرگ حساس هستند. پس ممکن است اگر به جای image.jpg از IMAGE.JPG استفاده کنید ممکن است مرورگر شما عکسی را در صفحه نشان ندهد. پس در نوشتن آنها دقت کنید.

 

در مورد اضافه کردن عکسها به صفحه بعداً با جزئیات بیشتری توضیح می دهیم. تا اینجا یاد گرفتیم چگونه یک عکس را به صفحه اضافه کنیم و نحوه قرار گیری آنرا در صفحه تعیین کنیم.

  • Like 4
لینک به دیدگاه

sahar68    442

sahar68
ارسال شده در

تعدادی تگ وجود دارد که در هنگام کار با متن ها می توانید از آنها کمک بگیرید. تگهایی که در این قسمت مورد بحث قرار می گیرند اینها هستند: , , 

 ,  ,

 

1-

و

 

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

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

 

استفاده از تگ :

 

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

 

 

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

y1

 

استفاده از تگ :

 

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

 

 

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

253

 

2- 

[/b][/i][/color][/center]
 
[center] [/center]
 از این تگ زمانی استفاده می شود که شما بخواهید همان مقدار فضای خالی که  در ویرایشگر  متن خود در متن HTML دارید در صفحه نهایی خود نیز داشته  باشید. مثلاً وقتی که متنی را در مورد برنامه نویسی در صفحه خود می نویسید.
 
[center] [/center]
 به این مثال توجه کنید:
 
 
[code]


<PRE>
x=1;
y=2;
if (x==1)
     { 
     y=2;
     }
</PRE>
[/code]
 
 
 
 
 نتیجه به این صورت ملاحظه می شود:
 x=1;
y=2;
if (x==1)
    {
    y=2;
    }
در هنگام استفاده از این تگ شما نیازی به استفاده از 
 و ;nbsp& ندارید و راحت می توانید متن خود را به  همانگونه که می خواهید به نمایش در آید بنویسید.
 
 [color=#800000]
[center][i][b]3-     و [/b][/i][/color][/center]
 
 هر متنی که بین  و  قرار گیرد تا وقتی که شما به خط بعدی نروید نمی شکند و در یک خط نمایش داده   می شود حتی بعد از رسیدن به پایان خط در صفحه.
 به این مثال توجه کنید:
 
 
 
 
[code]
<NOBR>
مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ،  مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ،  مثال ، مثال  ، مثال 
، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ،  مثال  ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، 
مثال ، مثال
</NOBR>
[/code]
 
 
نتیجه به این صورت نمایش داده می شود:
 مثال ، مثال ، مثال ، مثال ، مثال ، مثال  ، مثال ، مثال ، مثال  ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ،  مثال ، مثال  ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ،  مثال 
 احتمالا شما برای دیدن تمام متن باید از نوار لغزنده پایین صفحه استفاده  کنید.
 شما می توانید از تگ  در تگ بالا استفاده کنید اگر  می خواهید بیش از یک خط متن بلند داشته باشید. به مثال زیر توجه کنید:
 
 
[code]


<NORB>
 ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ،  مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ،  مثال ، مثال  ، مثال ، 
مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال<WBR>  مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال مثال  ، 
مثال  ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ،  مثال ، مثال
<NOBR>
[/code]
 
 
این هم نتیجه:
   ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال  ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ،  مثال ، مثال  ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال مثال ، مثال ، مثال ، مثال  ، مثال  ، مثال ، مثال ، مثال ، مثال ، مثال مثال ، مثال ، مثال ، مثال ، مثال ،  مثال ، مثال  ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال 
 
 [color=#800000]
[center][i][b]4-     [/b][/i][/color][/center]
 
 با استفاده از این تگ می توانید متنی را به صورت چشمک زن در آورید. این  تگ فقط در  مرورگرهایی کارایی دارد که بر پایه Netscape ساخته شده باشند.
 Opera و Firefox از جمله مرورگرهایی  هستند که می توانند این تگ را نمایش دهند. درMicrosoft Internet Explorer فقط متن ساده را می توان مشاهده کرد.
 اگر این تگ به جا استفاده شود می تواند توجه بیننده را به نکته خاصی جلب  کند اما  اگر به جا استفاده نشود می تواند آزار دهنده باشد.
  برای کارایی بیشتر می توانید آنرا با اندازه فونتی  مثل 10+ استفاده کنید.
 به این مثال توجه کنید:
 
 
 
 
[code]


this  is <BLINK>VERY VERY</BLINK> important!!!
[/code]
 
 
 
نتیجه این تگ:
 
 
[center]this is VERY VERY important!!!  [/center]
  • Like 4
لینک به دیدگاه

sahar68    442

sahar68
ارسال شده در

توضیحات ( کامنتها ) می توانند وقتی که در حال نوشتن صفحه خود هستید به شما کمک کنند. مرورگرها نمی توانند کامنتها را نشان دهند پس در صفحه نهایی آنها به بیننده نشان داده نمی شوند. تنها راه مشاهده کامنتها مشاهده صفحه Source code صفحه است که با زبان HTML نمایش داده شود. با استفاده از این خاصیت شما می توانید در هنگام نوشتن یک صفحه برای خود یادداشت بگذارید تا وقتی که بعداً به آن نگاه کردید بهتر آرا درک کنید.

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

برای نوشتن یک کامنت شما باید ابتدا این علامت > سپس علامت تعجب ! و بعد دو خط فاصله -- (دش) بگذارید. بعد از این علائم هر متنی که بنویسید توسط مرورگر نمایش داده نمی شود. تا وقتی که علامت پایان کامنت را در انتهای آن بگذارید.

علامت پایان کامنت به این صورت نوشته می شود: ابتدا دو خط فاصله -- سپس این علامت

 

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

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

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

  • Like 3
لینک به دیدگاه

sahar68    442

sahar68
ارسال شده در

دو نمونه از پر استفاده ترین لیستها در HTML لیستهای مرتب و لیستهای نامرتب هستند. در لیستهای مرتب ترتیب بخشهای مختلف لیست مشخص می شود ولی در لیستهای نامرتب این ترتیب مشخص نمی شود.

 

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

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

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

       

       

      برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

       

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

       

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

      به این نکته هم توجه کنید که

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

         

         

        برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

         

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

         



            • خط اول لیست
            • خط دوم لیست
            • خط سوم لیست

        از شناسه type می توان در تگ

          استفاده کرد و ظاهر لیست را تغییر داد.

           

          • شناسه type

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

           

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

          به یاد داشته باشید که از شناسه type هم می توان در تگ

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

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

               

               

              برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

               

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

               

              • قسمت اول لیست
              • قسمت دوم لیست
              • قسمت سوم لیست

              اگر می خواهید از تگ

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

               

               

              برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

               

              لیست نهایی به این صورت در صفحه دیده می شود.

               

              • بخش اول لیست که بلندتر از بقیه سطرهای لیست است
              • بخش دوم لیست
              • بخش سوم لیست در سطر آخر

              اگر شما در یک صفحه بیشتر به لیستها نیاز دارید می توانید از روش بالا استفاده کنید اما باید بدانید که ممکن است ظاهر لیست در اندازه های مختلف پنجره مرورگر به هم بخورد. راه دیگری که برای جلوگیری از این به هم خوردگی وجود دارد استفاده از یک Table است که بعداً در مورد آن توضیح خواهیم داد.

               

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

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

                و
                  از تگهای
                  و
                    استفاده کنید. به یک مثال در این زمینه توجه کنید:

                     

                    برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

                     

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

                     

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

                    برای کنترل تگ

                      از چند شناسه می توان استفاده کرد

                      1. شناسه start

                      در مورد لیستهای مرتب با استفاده از شناسه start در تگ

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

                         

                         

                         

                         

                        برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

                         

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

                         

                        1. این سطر اول لیست است ولی شماره آن 15 است.

                         

                        1. شناسه type

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

                         

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

                  این شناسه هم می تواند در تگ

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

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

                     

                     

                     

                    برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

                     

                     

                     

                     

                     

                     

                    نتیجه به صورت زیر خواهد بود:

                     

                    1. قسمت اول لیست
                    2. قسمت دوم لیست
                    3. قسمت سوم لیست
                    4. قسمت چهارم لیست
                    5. قسمت پنجم لیست

                     

                     

                     

                     

        • Like 3
        لینک به دیدگاه

        sahar68    442

        sahar68
        ارسال شده در

        وقتی که شما یک صفحه HTML می نویسید می توانید چیزهای زیادی را در آن با اضافه کردن شناسه هایی به تگ

        تغییر داد. تگ زیر را در نظر بگیرید:

         

         

        برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

        شما می توانید به هر تعداد از این شناسه ها که خواستید به این تگ اضافه کنید. اگر از شناسه ای استفاده نکنید این گزینه مطابق پیش فرض مرورگر تنظیم می شود. در زیر توضیحی برای هر کدام از شناسه های تگ BODY آورده شده است. البته در مورد هر کدام از آنها به طور کامل در درسهای بعد توضیح خواهیم داد:

        "bgcolor="color

         

        این شناسه رنگ زمینه صفحه شما را تغییر می دهد. شما می توانید آنرا به هر رنگی که دوست دارید تغییر دهید. فقط به جای « رنگ » در فرمان بالا اسم رنگی را که می خواهید یا معادل هگزا دسیمال آنرا قرار دهید. برای دیدن لیست رنگها به صورت هگزا دسیمال به سر فصل این بحث بروید. گزینه پیش فرض این ویژگی معمولاً سفید یا خاکستری است.

        "text="color

         

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

        برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.
        . گزینه پیش فرض این ویژگی مشکی است.

        "link="color

         

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

        برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.
        . گزینه پیش فرض برای لینکهای باز نشده معمولاً آبی است.

        "alink="color

         

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

        برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.
        .

        "vlink="color

         

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

        برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.
        . گزینه پیش فرض این ویژگی بنفش است.

        "background="image.gif

         

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

        • Like 4
        لینک به دیدگاه

        sahar68    442

        sahar68
        ارسال شده در

        برای تغییر رنگ پیش فرض متن در صفحه باید از تگ

        استفاده کنید. شما باید دنبال " "=text بعد از تگ BODY بگردید. مانند این:

         

        برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

         

         

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

         

        برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

         

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

         

         

        برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

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

        برای مشاهده جدول رنگهای هگزادسیمال

        برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.
        را کلیک کنید.

        برای مثال اگر می خواهید رنگ متن شما زرد باشد از دو طریق می توانید به این خواسته خود برسید:

        استفاده از نام رنگ به صورت زیر :

         

        برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

         

        استفاده از معادل هگزادسیمال رنگها :

         

        برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

         

         

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

        • Like 3
        لینک به دیدگاه

        me2009    216

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

        بازم مرسی __________________

        به سراغ من اگر می آیی ... دگر آسوده بیــــــا ... چند وقتی ست که فولاد شده ... چینی نازک تنهایی من..

        آخ عذر مي خواهم:icon_redface:

        از من خرده نگيري سحر خانم اين را بابت بي توجهي من بزار ممنون.:a030::w16:

        • Like 3
        لینک به دیدگاه

        به گفتگو بپیوندید

        هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

        مهمان
        ارسال پاسخ به این موضوع ...

        ×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

          تنها استفاده از 75 اموجی مجاز می باشد.

        ×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

        ×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

        ×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

        ×
        رفتن به فهرست موضوع ها
        ×
        ×
        • اضافه کردن...