.
اطلاعات کاربری
دوستان
خبرنامه
لینکستان
نظر سنجی
دیگر موارد
آمار وب سایت

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

 

در این تگIMG نشانه قرار گرفتن تصویر در صفحه و SRC آدرس محل قرار گرفتن فایل عکس است. حتماً لازم نیست این عکس مربوط به سایت شما باشد یا در سرور شما قرار داشته باشد، شما  می توانید هر عکسی که در اینترنت قابل دسترسی باشد استفاده کنید (اگر قصد دارید صفحه  خود را در یک سایت اینترنتی قرار دهید) . شما می توانید فقط نام فایل را به جای آدرس  کامل بنویسید اگر صفحه ای که عکس باید در آن قرار گیرد و خود عکس در یک پوشه قرار داشته  باشند. مثلاً اگر عکس شما در این آدرس قرار دارد http://www.example.com/images/image.gifو صفحه ای که در حال ویرایش آن هستید در پوشه ای غیر از این قرار دارد شما باید  تگ زیر را برای اضافه کردن عکس به صفحه خود به کار ببرید:

 

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

 

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

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

 

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

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

در اطراف تگ تصویر استفاده کنید. مانند  زیر:
< img src="learn_html.gif"> < /center>

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

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

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

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

 

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



:: موضوعات مرتبط: آموزش HTML , ,
:: بازدید از این مطلب : 294
ن : سجاد نصیری
ت :
.

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

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

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

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

متن نمونه برای لینک

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

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

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

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

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

متن نمونه برای لینک

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

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

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



:: موضوعات مرتبط: آموزش HTML , ,
:: بازدید از این مطلب : 322
ن : سجاد نصیری
ت :
.

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

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

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

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

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

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

نتیجه:

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

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

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

this page Copyright © 2007 by me

متن نتیجه:

this page Copyright © 2007 by me

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

در جدول زیر می توانید تعدادی از این کاراکترهای ویژه را به همراه کد سازنده آنها  ببینید:

نام کاراکتر شکل ظاهری کاراکتر کد سازنده کاراکتر
امپرسند & &
علامت کپی رایت © ©
علامت ثبت شده ® ®
علامت تجاری
علامت کوچکتر از < <
علامت بزرگتر از > >
علامت خنجر
-------------------- » »
-------------------- « «
خط فاصله ام
علامت درجه ° °
یک چهارم ¼ ¼
یک دوم ½ ½
سه چهارم ¾ ¾
نقطه میانی · ·
علامت تعجب وارونه ¡ ¡
علامت یورو
علامت پوند انگلیس £ £
علامت تقسیم ÷ ÷
علامت رادیکال


:: موضوعات مرتبط: آموزش HTML , ,
:: بازدید از این مطلب : 378
ن : سجاد نصیری
ت :
.

در این قسمت از درس به سراغ کار با فونتها و اندازه آنها می رویم.

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

متنی که می خواهیم اندازه آنرا تعیین کنیم

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

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

این هم نتیجه تغییر سایز فونت:

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

برای کوچکتر کردن متن نیز به همین صورت عمل می کنیم:

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

این هم متن کوچک شده:

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

این هم تعدادی مثال برای درک بهتر مطالب:

این متن با اندازه 4 نوشته شده است

این متن با اندازه 4 نوشته شده است

این متن با اندازه 3 نوشته شده است

این متن با اندازه 3 نوشته شده است

این متن با اندازه 2 نوشته شده است

این متن با اندازه 2 نوشته شده است

این متن با اندازه 1 نوشته شده است

این متن با اندازه 1 نوشته شده است

این متن با اندازه 1- نوشته شده است

این متن با اندازه 1- نوشته شده است

این متن با اندازه 2- نوشته شده است

این متن با اندازه 2- نوشته شده است

این متن با اندازه 3- نوشته شده است

این متن با اندازه 3- نوشته شده است

برای تغییر رنگ متنها نیز می توانیم به روش زیر عمل کنیم، با این فرمان :

 

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

برای شروع با اسم رنگ شروع می کنیم:

متن مورد نظر

متن نهایی:

متن مورد نظر

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

متن مورد نظر

در اینجا نتیجه با مثال قبلی یکسان است:

متن مورد نظر

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

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

فرض کنید می خواهید رنگ و اندازه متنی را همراه با هم تغییر دهید. برای این کار  می توانید از دو تگ استفاده کنید. اما به خاطر داشته باشید که هر دو را ببندید. مانند زیر:

متن بزرگ و طلایی

متن بزرگ و طلایی

همچنین می توانید از شناسه های size و color در یک  تگ استفاده کنید. مانند زیر:

متن بزرگ و طلایی

متن بزرگ و طلایی

شما می توانید رنگ فونت را در تگ body تعریف کنید که بعداً به آن می پردازیم.



:: موضوعات مرتبط: آموزش HTML , ,
:: بازدید از این مطلب : 296
ن : سجاد نصیری
ت :
.

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

سرفصل بزرگ

سرفصل بزرگ

سرفصل 2

سرفصل 2

سرفصل 3

سرفصل 3

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

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

کوچکتر
کوچکتر
بسیار کوچک
بسیار کوچک

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

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

This is the first line
Here is the second line

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

This is the first line Here is the second line

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

من، یک خط جدید می خواهم

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

من، یک خط جدید می خواهم

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

من،
یک خط
جدید می خواهم

این هم نتیجه:

من،

یک خط

جدید می خواهم

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

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

این هم پاراگراف جدید < /p>

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

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

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

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

پاراگراف اول < /p> < p> پاراگراف دوم
ادامه پاراگراف دوم < /p>

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

پاراگراف اول

< p> پاراگراف دوم
ادامه پاراگراف دوم < /p>

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

پاراگراف اول

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

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



:: موضوعات مرتبط: آموزش HTML , ,
:: بازدید از این مطلب : 334
ن : سجاد نصیری
ت :
.

آنچه که قبل از یادگیری 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 را کلیک  کنید


:: موضوعات مرتبط: آموزش HTML , ,
:: بازدید از این مطلب : 317
ن : سجاد نصیری
ت :
.

صفحه قبل 1 صفحه بعد

موضوعات
نویسندگان
آرشیو مطالب
مطالب تصادفی
مطالب پربازدید
پشتیبانی