سفارش تبلیغ
صبا ویژن

HTML Embed Multimedia

HTML Embed Multimedia

آموزش چند رسانه ای در HTML‏ ‏

گاهی اوقات تمایل دارید که موسیقی یا ویدئو به صفحه ی وب خود اضافه کنید. ساده ترین راه برای افزودن صدا یا ویدئو به وب سایت، وارد کردن برچسب خاص HTML به نام < embed> می باشد. این برچسب باعث می شود که مرورگر به طور خودکار کنترل هایی را برای مولتی مدیا وارد کند که مرورگر ارائه شده برچسب < embed> و نوع مدیای ارائه شده را پشتیبانی می کند.
همچنین می توانید یک برچسب < noembed>برای مرورگرهایی وارد کنید که برچسب < embed> را نمی شناسند. به عنوان مثال می توانید از < embed> برای نمایش یک فیلم به انتخاب خود استفاده کنید واگر مرورگر < embed> را پشتیبانی نمی کند، از< noembed> برای نمایش یک تصویر JPG مجزا استفاده کنید.


 مثال:

در اینجا مثال ساده ای می بینید از اجرای یک فایل جاسازی شده ی midi.

 

مرحله 1

 

<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml">


<head>


    <title>HTML embed Tag <title>


<head>


<body>


    <embed src="/html/yourfile.mid"` width="100%" height="60">


    <noembed><img src="yourimage.gif" alt="Alternative Media"><noembed>


    <embed>


<body>


<html>


ویژگی های برچسب < embed>

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

 

Attribute                                                            Description
                                                                            align
تعیین می کند که چگونه یک آبجکت را تنظیم کرد، که می تواند هم در مرکز، هم در راست و یا چپ تنظیم شود.
                                                                            autostart
این ویژگی Boolean نشان می دهد که آیا مدیا باید به طور خودکار شروع به کار کند. شما می توانید آن را با true یا false تنظیم کنید.
                                                                            loop
تعیین می کند که آیا صدا متداولا پشت سرهم تکرار شود( لوپ را روی true تنظیم کنید)، یا چند دفعه باید تکرار شود ( یک مقدار مثبت) و یا اصلا تکرار نشود(false).
                                                                            playcount
تعداد دفعاتی را که یک صدا باید تکرار شود تعیین می کند. اگر در حال استفاده از IE هستید، این گزنیه جایگزینی برای loop می باشد.
                                                                            hidden
مشخص می کند که آیا آبجکت مولتی مدیا باید روی صفحه نمایش داده شود.مقدار false یعنی نه و مقدار true یعنی بله.
                                                                           width
عرض آبجکت به پیکسل.
                                                                           height
عرض آبجکت به پیکسل.
                                                                           name
نامی که برای اشاره به آبجکت استفاده می شود.
                                                                           src
URL مربوط به آبجکت که باید جاسازی شود.
                                                                          volume
میزان صدا را کنترل می کند که می تواند از 0 (صدا قطع شده) تا 100 (آخرین حد صدا) باشد.

انواع ویدیوهای پشتیبانی شده

می توانید از انواع مدیاهای مختلفی مانند فایل های flash movies، AVi و MOV در داخل برچسب embed استفاده کنید.

 

  • فایل های swf – فایل هایی هستند که با برنامه ی macromedia’s flash تولید می شوند.
  • فایل های wmv – انواع فایل های تصویری ویندوز مایکروسافت می باشند.
  • فایل های mov - فرمت Quick time movie در اپل.
  •  فایل های mpeg – فایل های تصویری هستند که توسط گروه تخصصی تصاویر متحرک (Moving Pictures Expert Group) ایجاد می شوند.

مرحله 2

 

<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml">


<head>


    <title>HTML embed Tag<title>


<head>


<body>


    <embed src="/html/yourfile.swf" width="200" height="200">


    <noembed><img src="yourimage.gif" alt="Alternative Media"><noembed>


    <embed>


<body>


<html>


صدای زمینه

 

شما می توانید از برچسب < bgsound>در html برای اجرای صدا در زمینه ی صفحه ی وب خود استفاده کنید. این برچسب فقط توسط اینترنت اکسپلورر پشتیبانی می شود و دیگر مرورگرها آن را نادیده می گیرند. زمانی که سند اصلی در ابتدا توسط کاربر دانلود شده و نمایش داده می شود، این برچسب یک فایل صدا را دانلود کرده و اجرا می کند. همچنین هروقت کاربر مرورگر را تازه سازی کند، صدای زمینه نیز دوباره اجرا خواهد شد.این برچسب دارای فقط دو ویژگی می باشد، loop و src، که همانطور که در بالا توضیح داده شد هر دوی این ویژگی ها دارای یک معنا می باشند.
در اینجا مثال ساده ای از اجرای فایل کوچک midi را می بینید.

 

 

مرحله 3

 

<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml">


<head>


    <title>HTML embed Tag<title>


<head>


<body>


    <bgsound src="/html/yourfile.mid">


        <noembed><img src="yourimage.gif"><noembed>


    <bgsound>


<body>


<html>


این مثال یک صفحه ی خالی تولید خواهد کرد. این برچسب هیچ مولفه ای را اجرا نمی کند و مخفی باقی می ماند.
اینترنت اکسپلورر نیز تنها سه فرمت صدا را اجرا می کند: wav فرمت داخلی کامپیوترها، au فرمت داخلی برای کار ابزارهای Unix و MIDI یک کد برنامه گذاری جهانی برای موسیقی.

 

برچسب آبجکت در HTML

HTML 4 عنصر< object>را معرفی می کند که یک راه حل چند منظوره برای وارد کردن آبجکت عمومی ارائه می دهد. عنصر< object>به نویسندگان HTML اجازه می دهد تا هر چیز لازم را با یک آبجکت برای ارائه ی آن توسط یک کاربر، تعیین کند.
در اینجا چند مثال در این رابطه می بینید.


 مثال:

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

 

مرحله 4

 

<object data="data/test.htm" type="text/html" width="300" height="200">


    alt : <a href="data/test.htm">test.htm<a>


</object>

در اینجا اگر مرورگر برچسب object را پشتیبانی نکند، ویژگی alt وارد تصویر می شود.


 مثال:

شما می توانید یک سند PDF را در یک سند HTML اجرا کنید.

 

مرحله 5

 

<object data="data/test.pdf" type="application/pdf" width="300" height="200">


    alt : <a href="data/test.pdf">test.htm<a>


</object>


 مثال:

شما می توانید با استفاده از برچسب < param> برخی پارامترهای متناسب با سند را مشخص کنید. در اینجا مثالی از اجرای فایل wavرا می بینید.

 

مرحله 6

<object data="data/test.wav" type="audio/x-wav" width="200" height="20">


    <param name="src" value="data/test.wav">


    <param name="autoplay" value="false">


    <param name="autoStart" value="0">


    alt : <a href="data/test.wav">test.wav<a>


</object>

 مثال:

شما می توانید یک سند flash مانند زیر اجرا کنید.

 

مرحله 7

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="penguin"


        codebase="someplace/swflash.cab" width="200" height="300">


    <param name="movie" value="flash/penguin.swf" />


    <param name="quality" value="high" />


    <img src="penguin.jpg" width="200" height="300" alt="Penguin" />


</object>

 مثال:

شما می توانید یک سند java applet وارد سند HTML کنید.

 

مرحله 8

<object classid="clsid:8ad9c840-044e-11d1-b3e9-00805f499d93"


        width="200" height="200">


    <param name="code" value="applet.class">


</object>


ویژگی classid تعیین می کند که چه نسخه ای از java plug-in استفاده شود. شما می توانید از ویژگی انتخابی codebase برای مشخص کردن چگونگی دانلود JRE استفاده کنید.


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


 


فرم های html

فرم های html

فرم های html

وقتی که می خواهید داده هایی را از سایت بازدیدکننده جمع آوری کنید، به فرم های HTML احتیاج خواهید داشت. به عنوان مثال در هنگام ثبت کاربر، اطلاعاتی مانند نام، آدرس ایمیل و کارت اعتباری و غیره را جمع آوری می کنید. یک فرم داده ها را از بازدیدکننده ی سایت می گیرد و سپس آن را به یک برنامه ی پایانی مانند CGI، اسکریپت ASP یا اسکریپت PHP باز می گرداند. برنامه ی پایانی فرایندهای مورد نیاز را بر اساس کار تعریف شده در برنامه، روی داده ی منتقل شده انجام می دهد.
عناصر متفاوتی برای فرم در دسترس میباشند، مانند فیلدهای متن، فیلدهای textarea، منوهای رو به پایین، دکمه های رادیو، چک باکس ها و غیره.
برچسب < form> مربوط به HTML، برای ایجاد یک فرم HTML استفاده می شود و دارای ترکیب زیر می باشد

< form action="Script URL" method="GET|POST">
    form elements like input, textarea etc.
< /form>

?? ویژگی های فرم

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


Attribute
Description
action
اسکریپت backend برای پردازش داده ی انتقال شده ی شما آماده میباشد.
method
روشی برای بارگذاری داده. متداولترین روش های مورد استفاده GET و POST می باشند.
target
پنجره ی هدف یا چارچوب را، جایی که نتیجه ی اسکریپت نمایش داده خواهد شد، مشخص می کند. این ویژگی مقادیر _blank, _self, _parent و غیره را به خود می گیرد.
enctype
شما می توانید از ویژگی enctype برای مشخص کردن چگونگی برنامه نویسی توسط مرورگر قبل از ارسال به سرور، استفاده کنید. مقادیر ممکن عبارتند از: application/x-www-form-urlencoded - این روش استانداردی است که بیشتر فرم ها در سناریو های ساده استفاده می کنند. mutlipart/form-data - این روش زمانی استفاده می شود که شما می خواهید داده های دوتایی را به شکل فایل هایی مانند تصویر بارگذاری کنید.

??کنترل های فرم HTML

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


  • کنترل های ورودی متن
  • کنترل های چک باکس
  • کنترل های رادیو باکس
  • کنترل های انتخاب باکس
  • باکس های انتخاب فایل
  • کنترل های مخفی
  • دکمه های قابل کلیک شدن
  • ثبت و تنظیم مجدد

??کنترل های ورودی متن

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


  • کنترل های ورودی متن تک خطی: این کنترل برای آیتم هایی استفاده می شود که فقط یک خط از ورودی کاربر را لازم دارد، مانند باکس های جستجو و نام ها. این کنترل ها با استفاده ازبرچسب < input> مربوطبه HTML ایجاد می شوند.
  • کنترل ورودی گذرواژه: این نیز یک متن ورودی تک خطی می باشد، اما به محض اینکه کاربر کاراکتر را وارد می کند، این کنترل آن را می پوشاند.
  • کنترل های متن ورودی چند خطی: زمانی استفاده می شود که لازم است کاربر جزئیاتی را وارد کند که بیشتر از یک جمله می باشند. کنترل های ورودی چند خطی با استفاده از برچسب < textarea> استفاده می شوند.

??کنترل های ورودی تک خطی

این کنترل ها برای آیتم هایی استفاده می شوند که کاربر فقط یک خط ورودی احتیاج دارد، مانند باکس های جستجو و نام ها و با استفاده از برچسب < input> مربوط به HTML ایجاد می شوند.


 مثال:

در اینجا مثال پایه ای می بینید از یک ورودی تک خطی که برای گرفتن نام کوچک و نام خانوادگی به کار می رود .


نمونه یک

<!DOCTYPE html>

<html>

<head>

    <title>Text Input Control</title>

</head>

<body>

    <form>

        First name:  <input type="text" name="first_name" />

        <br>

        Last name:  <input type="text" name="last_name" />

    </form>

</body>

</html>

??ویژگی ها

در زیر لیستی از ویژگی های برچسب < input>را برای ایجاد فیلد متن می بینید.


Attribute
Description
type
نوع کنترل ورودی را نشان می دهد و برای کنترل متن ورودی برای text تنظیم خواهد شد.
name
برای دادن نام به کنترلی استفاده می شود که قرار است برای تشخیص به سرور ارسال شود و مقدار بگیرد.
value
می تواند برای ارائه ی یک مقدار اصلی در داخل کنترل استفاده شود.
size
اجازه می دهد تا عرض کنترل متن ورودی را متناسب با کاراکترها تعیین کنید.
maxlength
اجازه می دهد تا حداکثر تعداد کاراکترهایی را که یک کاربر می تواند در یک تکست باکس وارد کند، مشخص کنید.

??کنترل های پسورد ورودی

این کنترل نیز یک کنترل تک خطی می باشد، اما به محض اینکه کاربر کاراکترها را وارد می کند، آنها را می پوشاند. این ها نیزبا استفاده از برچسب < input> مربوط به HTML ایجاد می شوند، اما نوع ویژگی با عنوان password تنظیم میشود.


 مثال:

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


نمونه دو

<!DOCTYPE html>

<html>

<head>

    <title>Password Input Control</title>

</head>

<body>

    <form>

        User ID :  <input type="text" name="user_id" />

        <br>

        Password:  <input type="password" name="password" />

    </form>

</body>

</html>

??ویژگی ها

در زیر لیست مربوط به ویژگی های برچسب < input>را برای ایجاد فیلد پسوورد می بینید.

 

Attribute
Description
type
نوع کنترل ورودی را نشان می دهد و برای کنترل ورودی پسوورد، برای password تنظیم خواهد شد.
name
برای نام گذاری کنترلی استفاده می شود که برای تشخیص وگرفتن مقدار به سرور فرستاده می شود.
value
برای ارائه ی یک مقدار اولیه در داخل کنترل استفاده می شود.
size
اجازه می دهد تا عرض کنترل متن ورودی را با کاراکترها تعیین کنید.
maxlength
اجازه می دهد تا حداکثر تعداد کاراکترهایی را که یک کاربر می تواند در یک تکست باکس وارد کند، تعیین کنید.

??کنترل های متن ورودی چند خطی

زمانی استفاده می شود که یک کاربر باید جزئیاتی را ئارد کند که بیشتر از یک جمله می باشند. کنترل های ورودی چند خطی با استفاده از برچسب < textarea> ایجاد میشوند.


 مثال:

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

 

نمونه سه

<!DOCTYPE html>

<html>

<head>

    <title>Multiple-Line Input Control</title>

</head>

<body>

    <form>

        Description : <br />

        <textarea rows="5" cols="50" name="description">

            Enter description here...

        </textarea>

    </form>

</body>

</html>

??ویژگی ها

در زیر لیستی از ویژگی های برچسب < textarea> ارائه شده اند.


Attribute
Description
name
برای نامگذاری کنترلی استفاده می شود که به سرور ارسال می شود تا تشخیص داده شده و مقدار بگیرد.
rows
تعداد ردیف های area box مربوط به متن را نشان می دهد.
cols
تعداد ستون های area box مربوط به متن را نشان می دهد.

??کنترل چک باکس

چک باکس ها زمانی استفاده می شوند که بیشتر از یک گزینه قرار است انتخاب شود. آنها نیزبا استفاده از برچسب < input>ایجاد می شوند، اما نوع ویژگی به checkbox تنظیم می شود.


 مثال:

در اینجا مثالی از کد HTML را مشاهده می کنید برای یک فرم با دو چک باکس.


نمونه چهار

<!DOCTYPE html>

<html>

<head>

    <title>Checkbox Control</title>

</head>

<body>

    <form>

        <input type="checkbox" name="maths" value="on"> Maths

        <input type="checkbox" name="physics" value="on"> Physics

    </form>

</body>

</html>

در زیر لیستی از ویژگی های برچسب < checkbox> را می بینید:

 

Attribute
Description
type
نوع کنترل ورودی را نشان می دهد و برای کنترل ورودی چک باکس با checkbox کنترل خواهد شد.
name
برای نامگذاری کنترلی استفاده می شود که برای تشخیص و گرفتن مقدار به سرور ارسال می شود.
value
مقداری که اگر چک باکس انتخاب شود، استفاده خواهد شد.
checked
اگر بخواهید آن را به طور پیش فرض انتخاب کنید، با checked تنظیم می شود.

?? کنترل دکمه ی رادیو

دکمه های رادیو زمانی استفاده میشوند که بین چندین گزینه تنها یک گزینه باید انتخاب شود. این کنترل ها نیز با برچسب < input> ایجاد میشوند، اما نوع ویژگی با radio تنظیم می شود.


 مثال:

در اینجا مثالی از کد HTML می بینید برای یک فرم با دو دکمه ی رادیو.

 

نمونه پنج

 

<!DOCTYPE html>

<html>

<head>

    <title>Checkbox Control</title>

</head>

<body>

    <form>

        <input type="radio" name="maths" value="on"> Maths

        <input type="radio" name="physics" value="on"> Physics

    </form>

</body>

</html>

?? ویژگی ها

در زیر لیستی از ویژگی های دکمه ی رادیو را می بینید.


Attribute
Description
type
نوع کنترل ورودی را نشان می دهد و برای کنترل ورودی چک باکس با عنوان radio تنظیم می شود.
name
برای نامگذاری کنترلی استفاده می شود که برای تشخیص و گرفتن مقدار به سرور ارسال می شود.
value
مقداری که radio box انتخاب شود، استفاده خواهد شد.
checked
اگر می خواهید آن را به عنوان پیش فرض استفاده کنید، به checked تنظیم کنید.

??کنترل Select Box

یک Select Boxکه منوی رو به پایین نیز نامیده می شود، گزینه ای را برای ارائه ی گزینه های مختلف به شکل یک لیست رو به پایین ارائه می دهد، که کاربر می تواند از آن یک یا بیشتر از یک گزینه را انتخاب کند.


 مثال:

در اینجا مثالی از کد HTML برای یک فرم با یک جعبه ی رو به پایین می بینید.


نمونه شش

 

<!DOCTYPE html>

<html>

<head>

    <title>Select Box Control</title>

</head>

<body>

    <form>

        <select name="dropdown">

            <option value="Maths" selected>Maths</option>

            <option value="Physics">Physics</option>

        </select>

    </form>

</body>

</html>

در زیر لیستی از ویژگی های برچسب < select> را می بینید.

Attribute
Description
name
برای نامگذاری کنترلی استفاده می شود که برای تشخیص و گرفتن مقدار به سرور انتقال می شود.
size
برای نمایش یک لیست باکس اسکرولینک استفاده می شود.
multiple
اگر روی multiple تنظیم شده باشد، به کاربر اجازه می دهد تا چند آیتم را از منو انتخاب کند.

در زیر لیستی از ویژگی های مهم برچسب < option> ارائه شده است.

Attribute
Description
value
اگر در سلکت باکس یک گزینه انتخاب شده باشد، این مقدار استفاده خواهد شد.
selected
مشخص می کند که این گزینه رد زمان بارگذاری صفحه، باید گزینه ی انتخابی باشد.
label
یک روش جایگزین برای برچسب دار کردن گزینه ها.

??فایل آپلود باکس

اگر می خواهید به کاربر اجازه دهید تا فایلی را روی وب سایت شما آپلود کند، به یک کنترل فایل آپلود احتیاج خواهید داشت، که Select Boxنیز نامیده می شود. این ویژگی با استفاده از برچسب < input> نیز ایجاد می شود، اما نوع ویژگی با file تنظیم می شود.

 مثال:

در اینجا مثالی را می بینید از کد HTML برای یک فرم با یک فایل آپلود باکس.

نمونه هفت

<!DOCTYPE html>

<html>

<head>

    <title>File Upload Box</title>

</head>

<body>

    <form>

        <input type="file" name="fileupload" accept="image/*" />

    </form>

</body>

</html>

ویژگی ها??

در زیر لیستی از ویژگی های فایل آپلود باکس را می بینید.

 

Attribute
Description
name
برای نامگذاری کنترلی استفاده می شود که برای تشخیص و گرفتن مقدار به سرور انتقال می شود.
accept
نوع فایل هایی را که سرور می پذیرد، تعیین می کند.

کنترل های دکمه??

راه های مختلفی برای ایجاد دکمه های قابل کلیک شدن وجود دارد. شما با استفاده از برچسب < input> و با تنظیم نوع ویژگی آن به button دکمه های قابل کلیک شدن ایجاد کنید. نوع ویژگی می تواند مقادیر زیر را بگیرد.

 

Type
Description
submit
دکمه ای را ایجاد می کند که به طور خودکار یک فرم را می پذیرد.
reset
دکمه ای را ایجاد می کند که به طور خودکار کنترل های فرم را به مقادیر اولیه ی خود بازمی گرداند.
button
دکمه ای را ایجاد می کند که برای اجرای اسکریپت کاربر، زمانی که کاربر آن دکمه را کلیک می کند، استفاده می شود.
image
یک دکمه ی قابل کلیک شدن ایجاد می گند، اما ما می توانیم از یک تصویر به عنوان زمینه ی دکمه استفاده کنیم.

 مثال:

در اینجا مثالی از کد HTML برای یک فرم با سه نوع دکمه را می بینید.

 

نمونه هشت

<!DOCTYPE html>

<html>

<head>

    <title>File Upload Box</title>

</head>

<body>

    <form>

        <input type="submit" name="submit" value="Submit" />

        <input type="reset" name="reset" value="Reset" />

        <input type="button" name="ok" value="OK" />

        <input type="image" name="imagebutton" src="/html/images/logo.png" />

    </form>

</body>

 

</html>

کنترل های مخفی شده ی فرم??

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


 مثال:

در اینجا مثالی از کد HTML برای نمایش کاربرد کنترل مخفی شده می بینید.

 

نمونه نه

<!DOCTYPE html>

<html>

<head>

    <title>File Upload Box</title>

</head>

<body>

    <form>

        <p>This is page 10</p>

        <input type="hidden" name="pagename" value="10" />

        <input type="submit" name="submit" value="Submit" />

        <input type="reset" name="reset" value="Reset" />

    </form>

</body>

 

</html>


فونت ها

آموزش طراحی سایت - فونت ها

فونت ها

فونت ها نقش مهمی در زیبا ساختن و خواناتر کردن وب سایت بازی می کنند. ظاهرو رنگ فونت به طور کامل بستگی به کامپیوتر و مرورگری دارد که استفاده می شود، اما شما می توانید از برچسب < font>در HTML برای افزودن استایل، سایز و رنگ به متن خود در وب سایت استفاده کنید. می توانید از یک برچسب< basefont> برای تنظیم تمام متن خود به اندازه، ظاهر و رنگ یکسان استفاده کنید.
برچسب فونت دارای سه ویژگی به نام های size، color و face می باشد که فونت شکا را به دلخواه در می آورد. برای تغییر هرکدام از ویژگی های فونت در هر زمانی در صفحه ی وب خود، به سادگی از برچسب < font> استفاده کنید. متنی که دنبال می کند، تغییر یافته با قی می ماند تا زمانی که شما آن را با < /font> برچسب ببندید. شما می توانید یکی از ویژگی ها یا همه ی ویژگی های داخل برچسب < font> را تغییر دهید.

 

نکته:

برچسب های font و basefont استفاده نمی شوند و احتمال می رود که در ورژن های بعدی HTML حذف شوند. بنابراین نباید مورد استفاده قرار بگیرند، پیشنهاد می شود که برای اجرای فونت های خود از استایل های CSS استفاده کنید. اما برای رسیدن به هدف این فصل برچسب های font و basefont رابا جزئیات توضیح می دهد.

تنظیم اندازه ی فونت

شما می توانید با استفتده از ویژگی size اندازه فونت محتوا را تنظیم کنید. دامنه ی مقادیر قابل قبول از 1 (کوچکترین) تا 7 (بزرگترین) می باشد. اندازه ی فونت پیش فرض 3 می باشد.


 مثال:

نمونه یک

 

<!DOCTYPE html>

<html>

<head>

    <title>Setting Font Size</title>

</head>

<body>

    <font size="1">Font size="1"</font><br />

    <font size="2">Font size="2"</font><br />

    <font size="3">Font size="3"</font><br />

    <font size="4">Font size="4"</font><br />

    <font size="5">Font size="5"</font><br />

    <font size="6">Font size="6"</font><br />

    <font size="7">Font size="7"</font>

</body>

</html>

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

شما می توانید مشخص کنید چه تعداد از فونت ها بزرگتر و چه تعداد کوچکتر از اندازه ی فونت حاضر باشند. می توانید آن را مانند< font size="+n"> or < font size="-n"> مشخص کنید.


 مثال:

نمونه دو

<!DOCTYPE html>

<html>

<head>

    <title>Relative Font Size</title>

</head>

<body>

    <font size="-1">Font size="-1"</font><br />

    <font size="+1">Font size="+1"</font><br />

    <font size="+2">Font size="+2"</font><br />

    <font size="+3">Font size="+3"</font><br />

    <font size="+4">Font size="+4"</font>

</body>

</html>

تنظیم ظاهر فونت

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


 مثال:

نمونه سه

<!DOCTYPE html>

<html>

<head>

    <title>Font Face</title>

</head>

<body>

    <font face="Times New Roman" size="5">Times New Roman</font><br />

    <font face="Verdana" size="5">Verdana</font><br />

    <font face="Comic sans MS" size="5">Comic Sans MS</font><br />

    <font face="WildWest" size="5">WildWest</font><br />

    <font face="Bedrock" size="5">Bedrock</font><br />

</body>

</html>

تعیین ظاهر فونت جایگزین

یک بازدید کننده فقط قادر خواهد بود فونت شما را ببیند، اگر آن را نصب شده روی کامپیوتر خود داشته باشد. بنابراین امکان تعیین دو یا بیشتر از دو ظاهر جایگزین با ارائه ی نام های مربوط به فونت ها وجود دارد.

 

< font face="arial,helvetica">
< font face="Lucida Calligraphy,Comic Sans MS,Lucida Console">

اگر هیچکدام از فونت های ارائه شده نصب نشده باشند، بنابراین فونت پیش فرض Times New Roman نمایش داده خواهد شد.


تنظیم رنگ فونت

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


 مثال:

نمونه چهار

<!DOCTYPE html>

<html>

<head>

    <title>Setting Font Color</title>

</head>

<body>

    <font color="#FF00FF">This text is in pink</font><br />

    <font color="red">This text is red</font>

</body>

</html>

عنصر < basefont>

انتظار می رود که عنصر < basefont> یک اندازه، رنگ و ظاهر پیش فرض برای هر بخشی از داکیومنت که در برچسب < font>قرار نمی گیرند، تنظیم کند. شما می توانید از عناصر < font>استفاده کنید تا تنظیمات < basefont> را انجام دهید.
برچسب < basefont> همچنین ویژگی های رنگ، اندازه و ظاهر را می گیرد و با دادن مقدار بیشتر از 1+ برای فونت های بزرگتر و کمتر از 2- برای فونت های کوچکتر، تنظیمات فونت مربوطه را پشتیبانی می کند.


 مثال:

نمونه پنج

<!DOCTYPE html>

<html>

<head>

    <title>Setting Basefont Color</title>

</head>

<body>

    <basefont face="arial, verdana, sans-serif" size="2" color="#ff0000">

    <p>This is the page"s default font.</p>

    <h2>Example of the <basefont&gt; element</h2>

    <p>

        <font size="+2" color="darkgray">

            This is darkgray text with two sizes larger

        </font>

    </p>

    <p>

        <font face="courier" size="-1" color="#000000">

            It is a courier font, a size smaller and black in color.

        </font>

    </p>

</body>

</html>


پس زمینه در html

آموزش طراحی سایت - پس زمینه در html

background در html

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

 

  • زمینه ی HTML با رنگ ها.
  • زمینه ی HTML با تصاویر.

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

 

زمینه ی HTML با رنگها

ویژگی bgcolor برای کنترل زمینه ی یک عنصر HTML، به ویژه بدنه ی صفحه و زمینه ی جدول، استفاده می شود. در زیر ترکیب استفاده از bgcolor را با هر برچسب HTML می بینید.

< tagnamebgcolor="color_value"...>
این color- value می تواند به هرکدام از فرمت های زیر ارائه شود.
<!-- Format 1 - Use color name -->
< table bgcolor="lime">
<!-- Format 2 - Use hex value -->
< table bgcolor="#f1f1f1">
<!-- Format 3 - Use color value in RGB terms -->
< table bgcolor="rgb(0,0,120)">
مثال:

در اینجا مثالی را می بینید از تنظیم زمینه ی یک برچسب HTML.


نمونه یک

<!DOCTYPE html>

<html>

<head>

    <title>HTML Background Colors</title>

</head>

<body>

    <!-- Format 1 - Use color name -->

    <table bgcolor="yellow" width="100%">

        <tr>

            <td>

                This background is yellow

            </td>

        </tr>

    </table>

    <!-- Format 2 - Use hex value -->

    <table bgcolor="#6666FF" width="100%">

        <tr>

            <td>

                This background is sky blue

            </td>

        </tr>

    </table>

    <!-- Format 3 - Use color value in RGB terms -->

    <table bgcolor="rgb(255,0,255)" width="100%">

        <tr>

            <td>

                This background is green

            </td>

        </tr>

    </table>

</body>

</html>

زمینه ی HTML با تصاویر

آموزش html css

ویژگی background همچنین می تواند برای کنترل زمینه ی یک عنصر HTML، به ویژه بدنه ی صفحه و زمینه های جدول، استفاده شود. شما می توانید یک تصویر را به عنوان زمینه ی صفحه و یا جدول HTML خود استفاده کنید. در زیر ترکیب استفاده از ویژگی background را با هر عنصر HTML می بینید.


 توجه:

ویژگی background به عنوان ویژگی خوبی تلقی نمی شود و توصیه می شود از style sheet برای تنظیم زمینه استفاده کنید.

 

< tagnamebackground="Image URL"...>

متداول ترین فرمت های مورد استفاده ی تصویر عبارتند از JPEG، PNG و GIF.


 مثال:

در اینجا مثال هایی را از تنظیم تصویر به عنوان زمینه ی جدول مشاهده می کنید.

 

نمونه دو

<!DOCTYPE html>

<html>

<head>

    <title>HTML Background Images</title>

</head>

<body>

    <!-- Set table background -->

    <table background="http://tahlildadeh.com/Temp/Html/html.jpg" width="100%" height="400">

        <tr>

            <td>

                This background is filled up with HTML image.

            </td>

        </tr>

    </table>

</body>

</html>

زمینه های طرح دار و شفاف

شما ممکن است الگوها و زمینه های شفاف بسیاری را در وب سایت های نختلف دیده باشید. این امر به راحتی و با استفاده از تصاویر طرح دار و شفاف در زمینه قابل دستیابی می باشد. توصیه می شود در هنگام ایجاد تصاویر طرح دار یا شفاف GIF یا PNG، از کوچکترین ابعاد ممکن آنها استفاده کنید، حتی به کوچکی 1x1 برای جلوگیری از بارگذاری آهسته.


 مثال:

در اینجا مثالی از تنظیم یک الگوی زمینه برای یک جدول را مشاهده می کنید.


نمونه سه

<!DOCTYPE html>

<html>

<head>

    <title>HTML Background Images</title>

</head>

<body>

 

    <!-- Set a table background using pattrern -->

    <table background="/images/pattern1.jpg" width="20%" height="100">

        <tr>

            <td>

                This background is filled up with a pattern image.

            </td>

        </tr>

    </table>

    <!-- Another example on table background using pattrern -->

    <table background="http://tahlildadeh.com/Temp/Html/pattern2.jpeg" width="20%" height="100">

        <tr>

            <td>

                This background is filled up with a pattern image.

            </td>

        </tr>

    </table>

</body>

</html>



پس زمینه در html

آموزش طراحی سایت -پس زمینه در html

background در html

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

 

  • زمینه ی HTML با رنگ ها.
  • زمینه ی HTML با تصاویر.

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

 

زمینه ی HTML با رنگها

ویژگی bgcolor برای کنترل زمینه ی یک عنصر HTML، به ویژه بدنه ی صفحه و زمینه ی جدول، استفاده می شود. در زیر ترکیب استفاده از bgcolor را با هر برچسب HTML می بینید.

< tagnamebgcolor="color_value"...>

این color- value می تواند به هرکدام از فرمت های زیر ارائه شود.
<!-- Format 1 - Use color name -->
< table bgcolor="lime">
<!-- Format 2 - Use hex value -->
< table bgcolor="#f1f1f1">
<!-- Format 3 - Use color value in RGB terms -->
< table bgcolor="rgb(0,0,120)">
 مثال:

در اینجا مثالی را می بینید از تنظیم زمینه ی یک برچسب HTML.


نمونه یک

<!DOCTYPE html>

<html>

<head>

    <title>HTML Background Colors</title>

</head>

<body>

    <!-- Format 1 - Use color name -->

    <table bgcolor="yellow" width="100%">

        <tr>

            <td>

                This background is yellow

            </td>

        </tr>

    </table>

    <!-- Format 2 - Use hex value -->

    <table bgcolor="#6666FF" width="100%">

        <tr>

            <td>

                This background is sky blue

            </td>

        </tr>

    </table>

    <!-- Format 3 - Use color value in RGB terms -->

    <table bgcolor="rgb(255,0,255)" width="100%">

        <tr>

            <td>

                This background is green

            </td>

        </tr>

    </table>

</body>

</html>

زمینه ی HTML با تصاویر

آموزش html css

ویژگی background همچنین می تواند برای کنترل زمینه ی یک عنصر HTML، به ویژه بدنه ی صفحه و زمینه های جدول، استفاده شود. شما می توانید یک تصویر را به عنوان زمینه ی صفحه و یا جدول HTML خود استفاده کنید. در زیر ترکیب استفاده از ویژگی background را با هر عنصر HTML می بینید.


 توجه:

ویژگی background به عنوان ویژگی خوبی تلقی نمی شود و توصیه می شود از style sheet برای تنظیم زمینه استفاده کنید.

 

< tagname background="Image URL" ...>

متداول ترین فرمت های مورد استفاده ی تصویر عبارتند از JPEG، PNG و GIF.


 مثال:

در اینجا مثال هایی را از تنظیم تصویر به عنوان زمینه ی جدول مشاهده می کنید.

 

نمونه دو

<!DOCTYPE html>

<html>

<head>

    <title>HTML Background Images</title>

</head>

<body>

    <!-- Set table background -->

    <table background="http://tahlildadeh.com/Temp/Html/html.jpg" width="100%" height="400">

        <tr>

            <td>

                This background is filled up with HTML image.

            </td>

        </tr>

    </table>

</body>

</html>

زمینه های طرح دار و شفاف

شما ممکن است الگوها و زمینه های شفاف بسیاری را در وب سایت های نختلف دیده باشید. این امر به راحتی و با استفاده از تصاویر طرح دار و شفاف در زمینه قابل دستیابی می باشد. توصیه می شود در هنگام ایجاد تصاویر طرح دار یا شفاف GIF یا PNG، از کوچکترین ابعاد ممکن آنها استفاده کنید، حتی به کوچکی 1x1 برای جلوگیری از بارگذاری آهسته.


 مثال:

در اینجا مثالی از تنظیم یک الگوی زمینه برای یک جدول را مشاهده می کنید.


نمونه سه

<!DOCTYPE html>

<html>

<head>

    <title>HTML Background Images</title>

</head>

<body>

 

    <!-- Set a table background using pattrern -->

    <table background="/images/pattern1.jpg" width="20%" height="100">

        <tr>

            <td>

                This background is filled up with a pattern image.

            </td>

        </tr>

    </table>

    <!-- Another example on table background using pattrern -->

    <table background="http://tahlildadeh.com/Temp/Html/pattern2.jpeg" width="20%" height="100">

        <tr>

            <td>

                This background is filled up with a pattern image.

            </td>

        </tr>

    </table>

</body>

</html>

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