آیا شما می خواهید یک عکس را به صفحه خود اضافه کنید؟ برای این کار باید از تگ زیر استفاده کنید:وارد کردن تصاویر در صفحات HTML<img src="image.gif">در این تگ IMG نشانه قرار گرفتن تصویر در صفحه و SRC آدرس محل قرار گرفتن فایل عکس است. حتماً لازم نیست این عکس مربوط به سایت شما باشد یا در سرور شما قرار داشته باشد، شما می توانید هر عکسی که در اینترنت قابل دسترسی باشد استفاده کنید (اگر قصد دارید صفحه خود را در یک سایت اینترنتی قرار دهید) . شما می توانید فقط نام فایل را به جای آدرس کامل بنویسید اگر صفحه ای که عکس باید در آن قرار گیرد و خود عکس در یک پوشه قرار داشته باشند.
مثلاً اگر عکس شما در این آدرس قرار دارد http://www.example.com/images/image.gif و صفحه ای که در حال ویرایش آن هستید در پوشه ای غیر از این قرار دارد شما باید تگ زیر را برای اضافه کردن عکس به صفحه خود به کار ببرید:<img src="http://www.example.com/images/image.gif">اگر فایل html و عکس هر دو در یک پوشه باشند می توانید برای راحتی در تایپ کردن از این تگ استفاده کنید:<img src="image.gif">پسوند فایل حتماً نباید gif. باشد. یعنی شما می توانید از فرمتی مثل jpg. نیز استفاده کنید. این دو فرمت از بقیه پر استفاده تر هستند. اگر شما عکسی با فرمتی غیر از این دو فرمت دارید می توانید از برنامه های ویرایش عکس از قبیل فتوشاپ برای تبدیل کردن آنها استفاده کنید.
برای نمونه من می خواهم یک عکس را با نام learn_html.gif را که در پوشه همین صفحه قرار دارد را به این صفحه اضافه کنم. در اینجا از این تگ استفاده کرده ام:<img src="learn_html.gif">با نوشتن این تگ، این تصور را در صفحه نهایی می بینیم:
تصویر قابل مشاهده نیست .
به این ترتیب یک تصویر را در سمت چپ صفحه خواهیم دید (در صورتی که صفحه ما چپ به راست باشد). اگر می خواهید تصویر در مرکز صفحه ( وسط خط ) قرار گیرد باید از تگ <CENTER> در اطراف تگ تصویر استفاده کنید. مانند زیر:<center>تصویر به دست آمده به صورت زیر است:
<img src="learn_html.gif">
</center>روشهای دیگری هم برای نمایش عکس در وسط صفحه وجود دارد که با توجه به کم کاربرد شدن تگ <center> در نسخه چهارم HTML از آنها استفاده می شود. مثلاً می توان از تگ <div> با شناسه "align="center استفاده کرد.تصویر قابل مشاهده نیست .
به خاطر داشته باشید که آدرس محل عکس و نام آن به حروف کوچک و بزرگ حساس هستند. پس ممکن است اگر به جای image.jpg از IMAGE.JPG استفاده کنید ممکن است مرورگر شما عکسی را در صفحه نشان ندهد. پس در نوشتن آنها دقت کنید.
در مورد اضافه کردن عکسها به صفحه بعداً با جزئیات بیشتری توضیح می دهیم. تا اینجا یاد گرفتیم چگونه یک عکس را به صفحه اضافه کنیم و نحوه قرار گیری آنرا در صفحه تعیین کنیم.
پورتال تفریحی و سرگرمی کافه بزرگ ایرانیان
اولین وب سایت چت و سرگرمی و اطلاعات و اخبار برای هموطنان عزیز لطفا ما را دنبال کنید.
پورتال تفریحی و سرگرمی کافه بزرگ ایرانیان
اولین وب سایت چت و سرگرمی و اطلاعات و اخبار برای هموطنان عزیز لطفا ما را دنبال کنید.کد نویسی htmlجلسه ۶٬۷٬۸و۹
کاربران کافه ایرانیان به علت درخواست بعضی از کاربران بنده هر چند جلسه را در یک هفته منتشر میکنم.
جلسه ۶٬۷٬۸٬۹
برو ادامه مطلب
- تاریخ عضویت
- Mar 2010
- شماره عضویت
- 33152
- عنوان کاربر
- میانگین پست در روز
- 2.70
- نوشته ها
- 5,435
Html جلسه ششم
- سپاس ها و پسند ها
41195811507 از شما به خاطر این مطلب سپاس گزاری کرده اند - تاریخ عضویت
- Mar 2010
- شماره عضویت
- 33152
- عنوان کاربر
- میانگین پست در روز
- 2.70
- نوشته ها
- 5,435
Html جلسه هفتم
تگهای مورد استفاده برای نمایش متن به صورتهای مختلف
تعدادی تگ وجود دارد که در هنگام کار با متن ها می توانید از آنها کمک بگیرید. تگهایی که در این قسمت مورد بحث قرار می گیرند اینها هستند: <SUB> , <SUP> , <PRE> , <NOBR , <WBR> , <BLINK>1- <SUB> و <SUP>
این دو تگ بیشتر در زمانی استفاده می شوند که شما می خواهید در صفحه خود معادلات ریاضی را به نمایش در آورید اما ممکن است شما برای چیزهای دیگری هم از آنها استفاده کنید.
از این تگها برای قرار دادن حروف یا اعداد کمی بالاتر یا پایینتر از بقیه متن در صفحه استفاده می شود. مانند این:
استفاده از تگ <SUB> :y<SUB>1</SUB>نتیجه به این صورت دیده می شود.از این تگ می توان برای گذاشتن اندیس برای کلمات استفاده کرد.y1
استفاده از تگ <SUP> :25<SUP>3</SUP>از این روش می توانید برای گذاشتن توان برای اعداد استفاده کنید. نتیجه به این صورت خواهد بود:2532- <PRE>
از این تگ زمانی استفاده می شود که شما بخواهید همان مقدار فضای خالی که در ویرایشگر متن خود در متن HTML دارید در صفحه نهایی خود نیز داشته باشید. مثلاً وقتی که متنی را در مورد برنامه نویسی در صفحه خود می نویسید.
به این مثال توجه کنید:<PRE>نتیجه به این صورت ملاحظه می شود:
x=1;
y=2;
if (x==1)
{
y=2;
}
</PRE>x=1;ر هنگام استفاده از این تگ شما نیازی به استفاده از <BR> و ;nbsp& ندارید و راحت می توانید متن خود را به همانگونه که می خواهید به نمایش در آید بنویسید.
y=2;
if (x==1)
{
y=2;
}3- <NOBR> و <WBR>
هر متنی که بین <NOBR> و <NOBR/> قرار گیرد تا وقتی که شما به خط بعدی نروید نمی شکند و در یک خط نمایش داده می شود حتی بعد از رسیدن به پایان خط در صفحه.
به این مثال توجه کنید:<NOBR>نتیجه به این صورت نمایش داده می شود:
، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ،مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ،
مثال ،مثال
</NOBR>مثال ، مثال ، مثال ، مثال ، مثال ، مثال ،مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ،مثال ، مثال ، مثالاحتمالا شما برای دیدن تمام متن باید از نوار لغزنده پایین صفحه استفاده کنید.
شما می توانید از تگ <WBR> در تگ بالا استفاده کنید اگر می خواهید بیش از یک خط متن بلند داشته باشید. به مثال زیر توجه کنید:<NORB>این هم نتیجه:
،مثال ،مثال ، مثال ،
مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ،مثال<WBR> مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ،مثال مثال ،
مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ،مثال ، مثال ، مثال ، مثال
<NOBR>مثال ، مثال ، مثالمثال ، مثال ،مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال مثال ، مثال ، مثال ، مثال، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال4- <BLINK>
با استفاده از این تگ می توانید متنی را به صورت چشمک زن در آورید. این تگ فقط در مرورگرهایی کارایی دارد که بر پایه Netscape ساخته شده باشند.
Opera و Firefox از جمله مرورگرهایی هستند که می توانند این تگ را نمایش دهند. درMicrosoft Internet Explorer فقط متن ساده را می توان مشاهده کرد.
اگر این تگ به جا استفاده شود می تواند توجه بیننده را به نکته خاصی جلب کند اما اگر به جا استفاده نشود می تواند آزار دهنده باشد.
برای کارایی بیشتر می توانید آنرا با اندازه فونتی مثل 10+ استفاده کنید.
به این مثال توجه کنید:this is <BLINK>VERY VERY</BLINK> important!!!نتیجه این تگ:this is VERY VERY important!!!- سپاس ها و پسند ها 41195811507 از شما به خاطر این مطلب سپاس گزاری کرده اند
- تاریخ عضویت
- Mar 2010
- شماره عضویت
- 33152
- عنوان کاربر
- میانگین پست در روز
- 2.70
- نوشته ها
- 5,435
Html جلسه هشتم
توضیحات ( کامنتها ) می توانند وقتی که در حال نوشتن صفحه خود هستید به شما کمک کنند. مرورگرها نمی توانند کامنتها را نشان دهند پس در صفحه نهایی آنها به بیننده نشان داده نمی شوند. تنها راه مشاهده کامنتها مشاهده صفحه Source code صفحه است که با زبان HTMLنمایش داده شود. با استفاده از این خاصیت شما می توانید در هنگام نوشتن یک صفحه برای خود یادداشت بگذارید تا وقتی که بعداً به آن نگاه کردید بهتر آرا درک کنید.وارد کردن کامنت در متن اچ تی ام ال
در مواردی که پس از گذشت مدتی از نوشتن یک صفحه نیاز به ویرایش آن صفحه باشد یا بیش از یک نفر در نوشتن یک صفحه نقش داشته باشند کامنتها می توانند در فهمیدن صفحه به طراحان آن کمک کنند.
برای نوشتن یک کامنت شما باید ابتدا این علامت > سپس علامت تعجب ! و بعد دو خط فاصله-- (دش) بگذارید. بعد از این علائم هر متنی که بنویسید توسط مرورگر نمایش داده نمی شود. تا وقتی که علامت پایان کامنت را در انتهای آن بگذارید.
علامت پایان کامنت به این صورت نوشته می شود: ابتدا دو خط فاصله -- سپس این علامت <. به مثال زیر توجه کنید:<!-- این یک کامنت است -->شما می توانید کامنتها را در چندین خط بنویسید فقط به خاطر داشته باشید که علامت انتهایی را در آخر آن قرار دهید. مانند زیر:<!--این یک کامنت است
کامنتها در مرورگر نمایش داده نمیشوند
-->- سپاس ها و پسند ها 41195811507 از شما به خاطر این مطلب سپاس گزاری کرده اند
61100217530 مطلب ارسالی شما را پسندیده اند - تاریخ عضویت
- Mar 2010
- شماره عضویت
- 33152
- عنوان کاربر
- میانگین پست در روز
- 2.70
- نوشته ها
- 5,435
Html جلسه نهم
استفاده از لیست های HTML در صفحه
دو نمونه از پر استفاده ترین لیستها در HTML لیستهای مرتب و لیستهای نامرتب هستند. در لیستهای مرتب ترتیب بخشهای مختلف لیست مشخص می شود ولی در لیستهای نامرتب این ترتیب مشخص نمی شود.
· لیستهای نامرتب
در لیستهای نامرتب برای عناصر لیست از شماره و عدد یا حروف الفبا استفاده نمی شود. عناصر این معمولاً با یک دایره تو پر مشخص می شوند. تگ ابتدای آن <ul> است و تگ پایانی آن <ul/> است. برای جدا کردن هر بخش لیست در ابتدای آن از تگ <li> استفاده می شود. بهتر است هر تگ <li> که باز می شود با <li/> بسته شود. در زیر یک مثال برای این نوع لیست آورده شده است:<ul>مثال بالا یک لیست بولت دار با سه بخش را به ما می دهد:
<li>بخش اول لیست</li>
<li>بخشدوم لیست</li>
<li>بخش سوم لیست</li>
</ul>
· بخش اول لیست
· بخش دوم لیست
· بخش سوم لیست
به این نکته هم توجه کنید که <li> نیازی به تگ پایانی ندارد ولی بهتر است از تگ پایانی آن یعنی <li/> استفاده شود.. فاصله متن لیست شده از ابتدای خط هم مقداری از بقیه متن بیشتر می شود. شما می توانید این فاصله را با افزودن تگ <ul> بیشتر کنید فقط به خاطر داشته باشید تگهایی را که باز کرده اید در آخر لیست ببندید.در زیر یک مثال برای این نمونه لیست آورده شده است:<ul>نتیجه این فرمان به شکل زیر خواهد بود:
<ul>
<ul>
<li>خط اوللیست</li>
<li>خط دوم لیست</li>
<li>خط سوملیست</li>
</ul>
</ul>
</ul>
§ خط اول لیست
§ خط دوم لیست
§ خط سوم لیست
از شناسه type می توان در تگ <ul> استفاده کرد و ظاهر لیست را تغییر داد.
· شناسه type
از این شناسه در لیستهای نا مرتب برای مشخص کردن شکل علامت مشخص کننده هر بخش استفاده می شود. این شناسه می تواند مقادیر زیر را داشته باشد:
· circle
با قرار دادن این مقدار برای لیست علامت ابتدایی هر بخش به شکل یک دایره تو خالی در می آید.
· disc
این مقدار شکل علامت ابتدای هر قسمت از لیست را به یک دایره تو پر تغییر می دهد.
· square
این مقدار شکل علامت لیست را به صورت یک مربع تو پر در می آورد.
به یاد داشته باشید که از شناسه type هم می توان در تگ <ul> استفاده کرد و هم در تگ <li>. در صورتی که برای تگ <ul> از این شناسه استفاده شود علامت مربوط به همه قسمتهای لیست تغییر می کند اما اگر برای تگ <li> از این شناسه استفاده شود فقط علامت مربوط به همان بخش از لیست تغییر می کند.
در مثال زیر می توانید نحوه نمایش لیست با استفاده از شناسه type را در حالات مختلف مشاهده کنید. ما از کد زیر برای ساختن این لیست آزمایشی استفاده می کنیم:<ul>می توانید لیست به دست آمده را در اینجا مشاهده کنید. به خاطر داشته باشید که در مرورگرهای مختلف ممکن است نحوه نمایش لیستها متفاوت باشد.
<li type="circle">قسمت اوللیست</li>
<li type="disk">قسمت دوم لیست</li>
<li type="square">قسمت سوم لیست</li>
</ul>
o قسمت اول لیست
o قسمت دوم لیست
§ قسمت سوم لیست
اگر می خواهید از تگ <center> برای لیست خود استفاده کنید در این کار دقت کنید. چون ممکن است تمام سطرهای متن شما به یک اندازه نباشند. در این صورت به جای اینکه لیستی در یک خط و مستقیم داشته باشید ممکن است لیستی در هم ریخته و شلوغ به وجود آید. مانند زیر:<center>لیست نهایی به این صورت در صفحه دیده می شود.
<ul>
<li>بخش اول لیست که بلندتراز بقیه سطرهای لیست است</li>
<li>بخش دوملیست</li>
<li>بخش سوم لیست در سطرآخر</li>
</ul>
<center>· بخش اول لیست که بلندتر از بقیه سطرهای لیست است
· بخش دوم لیست
· بخش سوم لیست در سطر آخر
!ادامه درس جلسه نهم در پست بعدی!
پاسخ با نقل قول