سلام دوستان...
با آموزش CSS3 از دوره آموزش طراحی سایت همراه ما باشید
آموزش BackGround در CSS3
خاصیت های مربوط به پس زمینه در CSS 3:
با CSS 3 تعدادی خاصیت جدید مربوط به پس زمینه در اختیار طراح وب قرار می دهد که امکان کنترل و مدیریت پس زمینه را در سطح پیشرفته تری فراهم می کند. در این فصل شما را با نحوه ی افزودن چندین تصویر پس زمینه به تنها یک المان آشنا می سازیم. همچنین با خاصیت های جدید زیر که در CSS3 عرضه شده آشنایی پیدا می کنید:
background-size background-origin background-clip
مرورگرهایی که در این جدول ارائه شده از این خاصیت نوین پشتیبانی می کنند
آموزش طراحی سایت : افزودن چندین پس زمینه در CSS 3
سی اس اس CSS3 به شما این امکان را می دهد با استفاده از خاصیت background-image چندین تصویر پس زمینه به المان خود اضافه کنید. تصاویر پس زمینه متمایز با استفاده از کاراکتر ویرگول از هم جدا شده و بر روی هم انباشته می شوند (قرار می گیرند) به گونه ای که اولین تصویر به بیننده از دیگر تصاویر نزدیک تر است. مثال زیر دارای دو تصویر پس زمینه است که اولین آن ها تصویر یک گل (که در پایین سمت راست تراز بندی شده و قرار گرفته) و دیگری یک پس زمینه ی کاغذ است (که در بالا سمت چپ قرار داده شده).
مثال:
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
می توان چندین تصویر پس زمینه را یا با خاصیت مختصر نویسی (مقداردهی در تنها یک تعریف و به صورت خلاصه / به صورت خاصیت چند مقداری) به المان اضافه کرد و یا به صورت جداگانه (تعیین به صورت خاصیت تک مقداری( تصویر پس زمینه را به المان اضافه کرد مانند مثال فوق. مثال زیر از روش اول برای این منظور بهره می گیرد:
#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}
آموزش طراحی سایت : خاصیت background-size در CSS 3
پیش از CSS3, تصویر پس زمینه همان اندازه ی اولیه و اصلی خود تصویر باقی می ماند. CSS3 این قابلیت را فراهم می کند که تصاویر پس زمینه را مجدداً در کانتکست ها و زمینه های مختلف بکار ببرید. اندازه ی تصاویر را می توان بر حسب پیکسل (بر حسب واحد length) , درصد (percentage) یا یکی از دو کلیدواژه ی contain یا cover تعریف کرد. مثال زیر تصویر پس زمینه را بسیار کوچکتر از اندازه ی اصلی آن تنظیم می کند (بر حسب پیکسل): تصویر اصلی:
زیر همان تصویر را مشاهده می کنید که مجدداً اندازه بندی شده است:
کد لازم برای عملیات فوق:
#div1 {
background: url(css3.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
همان طور که پیش تر ذکر شد دو مقادیر ممکن دیگر برای تعیین اندازه ی تصویر پس زمینه وجود دارند, کلید واژه های "contain" و "cover". کلید واژه ی "contain" تصویر پس زمینه را تا حد ممکن بزرگ مقیاس دهی و اندازه بندی می کنند (البته طول و عرض هر دو باید داخل کادر و محدوده ی محتوا جای گیرد). به عبارتی دیگر, عکس پس زمینه به اندازه محتویات درون عنصر بزرگ خواهد شد، تا ارتفاع وعرض آن اندازه المان شود. از این رو, بسته به نسبت و اندازه ی تصویر پس زمینه و همچنین مکان قرار گیری تصویر پس زمینه, ممکن است بخش هایی از پس زمینه توسط تصویر مربوطه پوشش داده نشود. کلید واژه ی "cover" تصویر پس زمینه را گونه ای مقیاس دهی می کند که کلاً ناحیه یا محدوده ی محتوا را تحت پوشش قرار دهد (هر دو عرض و ارتفاع تصویر باید با ناحیه ی محتوا برابر بوده یا از آن بیشتر شود). در حقیقت, عکس پس زمینه به اندازه محتویات درون عنصر کوچک خواهد شد، تا ارتفاع وعرض آن اندازه عنصر شود. از این رو, بخش هایی از تصویر ممکن است در محل موقعیت دهی قابل رویت نباشند. مثال زیر استفاده از این دو کلید واژه را در تنظیم اندازه ی تصویر پس زمینه, نمایش می دهد:
#div1 {
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2 {
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}
اندازه ی چندین تصویر پس زمینه را به طور همزمان مقداردهی کنید
خاصیت background-size همچنین قادر است هنگام کار با چند پس زمینه, چندین مقدار برای تصویر پس زمینه بپذیرد (برای این منظور لازم است از لیستی که توسط ویرگول ایتم ها را از هم جدا می کند استفاده کنید). مثال زیر سه تصویر پس زمینه ی منحصر به فرد مشخص کرده, و برای هر تصویر یک مقدار background-size متمایز در نظر می گیرد:
مثال:
#example1 {
background: url(img_flwr.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
background-size: 50px, 130px, auto;
}
تصویر پس زمینه ی تمام صفحه
اکنون می خواهیم تصویر پس زمینه ی روی وب سایت خود پیاده کنیم که همواره (در همه شرایط) کل فضای موجود در پنجره ی مرورگر را پوشش دهد. شرایط لازم برای چنین تصویر به شرح زیر می باشد:
کل صفحه را با تصویر بپوشاند (هیچ گونه فضای سفیدی نباید وجود داشته باشد)
تصویر را متناسب با نیاز مقیاس دهی و اندازه بندی کند
تصویر در مرکز صفحه قرار گیرد
سبب ایجاد نوار پیمایش (scrollbar) برای مشاهده ی کل تصویر نشود
مثال زیر نحوه ی انجام عملیات مزبور را تشریح می کند. برای انجام این مثال کافی است از تگ html بهره بگیرید (زیرا که عنصر html همیشه حداقل از نظر ارتفاع با پنجره ی مرورگر مطابقت دارد). سپس یک پس زمینه ی وسط چین شده و ثابت روی آن مقدار دهی کنید. در مرحله ی نهایی عملیات اندازه ی تصویر را با استفاده از خاصیت background-size تنظیم کنید:
html {
background: url(img_flower.jpg) no-repeat center center fixed;
background-size: cover;
خاصیت background-origin در CSS3
خاصیت background-origin تعیین می کند تصویر پس زمینه در کدام موقعیت قرار بگیرد (نقطه ی شروع مکان قرار گیری پس زمینه ی المان مورد نظر را مشخص می کند). این خاصیت سه مقدار مقدار متفاوت می گیرد:
مثال زیر کاربرد خاصیت background-origin را نمایش می دهد:
#example1 {
border: 10px solid black;
padding:35px;
background:url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
خصوصیت background-clip در CSS3
این ویژگی به منظور تعیین مکان و نحوه قرار گیری پس زمینه در عنصر مورد نظر بکار گرفته می شود. خاصیت background-clip سه مقدار متفاوت می پذیرد که به شرح زیر است:
مثال زیر این خاصیت را کاربردی نمایش می دهد:
#example1 {
border: 10px dotted black;
padding:35px;
background: yellow;
background-clip: content-box;
}
کلیه ی خصوصیات مربوطه به پس زمینه در جدول زیر با ذکر شرح آن ارائه گردیده:
آموزش طراحی سایت ادامه دارد
سلام در ادامه دوره آموزش طراحی سایت با jQuery جی کوئری آشنا میشوید
جی کوئری jQuery چیست؟
برای اینکه بدانیم به راحتی باید گفت که یک کتابخانه یا چارچوب کاری برای زبان برنامه نویسی سمت سرویس گیرنده جاوا اسکریپت (JavaScript framework) است که هدف اصلی آن فراهم آوردن زمینه ی استفاده ی آسان از زبان نام برده در برنامه نویسی تحت وب (صفحات وب) می باشد. jQuery یک کتابخانه از جاوا اسکریپت است . از آن جایی که کتابخانه ی JQuery بسیاری از امکانات و عملیات قابل اجرا توسط زبان جاوا اسکریپت را گرفته و در قالب یک سری تابع می گنجاند که می توانید به راحتی هر چه تمام تر فراخوانی و اجرا کنید (با کم ترین میزان کدنویسی بیشترین عملیات ممکن را اجرا کنید)، می توان آن را یک لایه ی سطح بالا (abstraction layer) نیز نامید. با این حال، لازم است به خاطر داشته باشید که کتابخانه ی ذکر شده به هیچ وجه نمی تواند کاملا جایگزین JavaScript گردد. اگرچه jQuery در بسیاری از موارد میزان کدنویسی را کاهش داده و در عین حال همان عملیات قابل اجرا توسط جاوا اسکپریت را اجرا می کند، اما نباید فراموش کنید که توابع و دستورات jQuery هم در حقیقت همان کد زبان جاوا اسکریپت است.
آموزش طراحی سایت
با
توجه به آنچه گفته شد،در لزومی ندارد برای استفاده از کتابخانه ی مزبور
حتما یک متخصص در زمینه ی برنامه نویسی با جاوا اسکریپت باشید.در واقع،
jQuery سعی دارد بسیاری از کارهایی که می توان با استفاده از کدهای جاوا
اسکریپت پیاده سازی کرد، همچون دستکاری DOM و فراخوانی توابع AJAX، را
تسهیل نماید. از این رو لازم نیست درباره ی جاوا اسکریپت اطلاعات بسیار
بالایی داشته باشید.
تعدادی زیادی کتابخانه ی جاوا اسکریپت وجود دارد که
در حال حاضر jQuery پرکاربردترین و کارآمدترین آن ها محسوب می شود. از
جمله دلایل محبوبیت این کتابخانه می توان به قابلیت توسعه پذیری بالا اشاره
کرد. بنابراین شما می توانید برای هر کاری که تصورش را می کنید، افزونه
(plugin) پیدا کنید.
قدرت و کارایی بالا، دامنه ی وسیع افزونه های
پرکاربرد، ساختار نگارشی روان و کارآمد این چارچوب کاری را از دیگر
کتابخانه های jQuery تمایز بخشیده است.
پس فهمیدیم که jquery چیست(
همچنین برخی افراد معادل فارسی آن یعنی جی کوئری را استفاده می کنند)... در
مطالب آموزشی بعدی به بررسی سایر خصوصیات و موارد فنی jquery می پردازیم.
می
توان دستورات و توابع jQuery را در هر ویرایشگر متن نظیر Windows Notepad
نوشت. اما نوشتن کدهای آن داخل یک ویرایشگر HTML که دستورات جاوا اسکریپت
خود را در آن می نویسید، به مراتب کارامد تر خواهد بود. تعدادی ویرایشگر
وجود دارد که با jQuery مانند شهروند درجه یک برخورد می کنند.
بهترین
ویرایشگر برای درج بهینه و سریع دستورات آن، TSW WebCoder می باشد که با
داشتن قابلیت های بی نظیر IntelliSense و ارائه دادن تمامی تکنولوژی های
مورد نیاز همچون HTML، CSS، JavaScript، PHP و البته jQuery در کدنویسی به
یاری شما می آید.
داشتن لیستی از property ها، متدها و پارامترهای
احتمالی آن ها کمک بزرگی به شما می کند، به خصوص اگر در کدنویسی با jQuery
یک تازه وارد هستید.
در
زیر تعدادی تصویر از ویرایشگر TSW WebCoder مشاهده می کنید که اشاره به
علت برتری این ویرایشگر و قابلیت آسان سازی کدنویسی با آن دارد:
تصویر پایین توابع قابل فراخوانی بر روی یک شی jQuery را نشان می دهد.
این تصویر نیز پارامترهای متد fadeIn را نشان می دهد.
جهت
استفاده از jQuery، بایستی آن را به صفحاتی که می خواهید از کدهای آن
استفاده کنند، اضافه نمایید. برای این منظور می بایست ابتدا این کتابخانه
را از سایت www.jquery.com دانلود نمایید. با مراجعه به سایت مزبور با دو
گزینه برای دانلود مواجه می شوید: 1. نسخه ی "Production" 2. نسخه ی
"Development" .
نسخه ی "Production" برای وب سایت ها live و آماده می
باشد. این نسخه ی فشرده و کم حجم (minify) شده تا کم ترین میزان فضا را
اشغال کند و برای کاربرانی که مرورگرها آن ها باید فایل jQuery را همراه با
باقی اطلاعات سایت بارگیری کند، بهترین گزینه می باشد. اما برای آزمایش و
توسعه، نسخه ی "Development" گزینه ی ارجح تلقی می شود. نسخه ی یاد شده
فشرده سازی (minify)نشده و به همین خاطر در صورت برخورد با خطا می توانید
مشاهده کنید خطا در کجا رخ داده است.
پس از دانلود فایل jQuery
JavaScript، لازم است آن را به وسیله ی تگ< script>اچ تی ام ال به
صفحه ی وب خود متصل کنید (خصیصه ی type تگ نام برده را با مقدار
="text/javascript" src="jquery-3.4.1.js" تنظیم نمایید یا به عبارتی دیگر
در تگ script به آن ارجاع دهید). بهترین کار جایگذاری فایل دانلود شده ی
jquery.js در پوشه ی متعلق به صفحه ای است که می خواهید از jQuery استفاده
کند. سپس آن را در بخش < head> بگنجانید (در بخش head صفحه به آن
ارجاع دهید):
<script type="text/javascript" src="jquery-3.4.1.js">
اکنون بخشی از صفحه ی شما به شکل زیر خواهد:
<title>jQuery test</title>
<script type="text/javascript" src="jquery-3.4.1.js">
یک
روش جدیدتر (بجای دانلود jQuery و میزبانی آن) این است که jQuery را از یک
CDN (تحویل محتوا روی شبکه) دریافت کنید. Google و Microsoft هر دو نسخه
های مختلفی از کتابخانه ی مذکور و دیگر کتابخانه های جاوا اسکریپت را
میزبانی می کنند. با این کار دیگر نیازی به دانلود و ذخیره ی فایل jQuery
نیست. بعلاوه از آنجایی این فایل از یک URL مشترک با سایت دیگر دریافت می
شود، به احتمال زیاد زمانی که کاربران به سایت شما مراجعه می کنند و مرورگر
کتابخانه را درخواست می کنند، فایل نام برده از قبل در حافظه ی نهان
(cache) آماده می باشد (به این دلیل که سایت دیگری دقیقا همین نسخه و فایل
را از قبل استفاده می کند). همچنین بیشتر CDN ها اطمینان حاصل می کنند،
وقتی کاربری فایلی را از آن درخواست می کند، آن فایل از طریق نزدیکترین
سرویس دهنده به کاربر (از نظر موقعیت جغرافیایی و مکانی) تحویل داده شود.
می
توانید jQuery را از یک CDN، درست مانند زمانی که آن را دانلود می کنید،
مورد استفاده قرار دهید. تنها چیزی که تغییر می کند، آدرس URL می باشد.
برای نمونه، جهت اضافه کردن ویرایش jQuery 3.4.1 از سرورهای Google به صفحه
ی وب مورد نظر، دستور زیر را وارد می کنید:
1<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
در مبحث قبلی با نحوه ی اضافه کردن jQuery به صفحه ی وب برای بهره وری از امکانات فوق العاده زیاد آن آشنا شدید. پیش از شروع به استفاده از کتابخانه ی jQuery بایستی با مفاهیم پایه ای آن آشنایی پیدا کنید و نظر خود را به مثال ساده ی زیر جلب نمایید:
<div id="divTest1">Hello, world!</div>
<script type="text/javascript">
$("#divTest1").text("Hello, world!");
همان
طور که مشاهده می کنید، یک تگ با شناسه ی "divTest1" داریم. از علامت $ که
به مثابه ی یک میانبر برای دسترسی به المان های HTML ایفای نقش می کند،
استفاده می کنیم. بنابراین با استفاده از این علامت تمامی المان های HTML
با شناسه ی "divTest1" را انتخاب کرده و مقدار "Hello, world!" را در آن
قرار می دهیم (text آن را با رشته ی "Hello, world!" تنظیم می کنیم).
حتی چاپ کردن همین متن ساده در جاوا اسکریپت به کدنویسی بسیار بیشتر نیاز داشت:
<div id="divTest2">Hello, world!</div>
<script type="text/javascript">
document.getElementById("divTest2") = "Hello, world!"
اگر المان HTML فقط یک class داشت و از ID نیز برخوردار نبود، این کد به مراتب طولانی تر می شد.
به
طور معمول، باید صبر کنید تا صفحه ی وب وارد مرحله یا وضعیت READY شود و
سپس اقدام به دستکاری محتویات آن نمایید. مثال های ساده ی بالا (و همچنین
تعدادی از عملیات پیچیده ی دیگر) در بیشتر مرورگرها، پیش از آماده شدن صفحه
نیز قابل اجرا هستند. اما این امر در مورد تمامی عملیات با jQuery (پیش از
بارگذاری کامل صفحه و آماده شدن آن) امکان پذیر نیست. خوشبختانه، jQuery
اجرای این عملیات را نیز بسیار آسان ساخته است.
در مبحث بعدی به تشریح انتخابگرها (selector) خواهیم پرداخت.
همان طور که در درس قبلی ذکر شد، توصیه می شود تا اتمام بارگذاری صفحه و آماده شدن آن صبر کنید و سپس اقدام به کار با آن نمایید. این امر همچنین برای شما این امکان را فراهم می کند تا کد جاوا اسکریپت خود را در بخش head صفحه (یا به طور مستقیم و یا از طریق لینک به یک فایل جاوا اسکریپت خارجی) و قبل از تگ body قرار دهید. در jQuery این کار با قرار دادن کد در رخداد document ready امکان پذیر می باشد. در زیر، مثال درس قبلی را بکار می بریم، اما این بار داخل رخداد ready قرار داده شده است.
<div id="divTest1"></div>
<script type="text/javascript">
function DocumentReady() {
$("#divTest1").text("Hello, world!");
}
$(document).ready(DocumentReady);
در
این مثال یک تابع ایجاد کرده و آن را DocumentReady نام گذاری می کنیم که
به مجرد آماده شدن صفحه برای کار با DOM و دستکاری المان های آن، فعال می
شود. در خط آخر کد، با استفاده از متد ready()، تابع خود را به رخداد ready
تخصیص داده و بدین وسیله به jQuery اطلاع می دهیم که با آماده شدن صفحه می
خواهیم که تابع را فراخوانی کند.
می توان با بهره گیری از قابلیت تعریف
تابع بی نام (anonymous function) در جاوا اسکریپت، کد فوق را کوتاه تر
نیز کرد. منظور این است که بجای اعلان تابع و تخصیص اسم به آن، فقط یک تابع
ایجاد می کنیم و بلافاصله ارجاع به تابع ready() را به آن پاس می دهیم.
اگر چندان آشنایی با زبان جاوا اسکریپت ندارید، در آن صورت استفاده از این
روش کمی پیچیده بنظر می رسد. اما با آشنایی بیشتر خواهید دانست که در این
روش، کد نویسی کاهش یافته و فضای کمتری نیز اشغال می شود.
<div id="divTest2"></div>
<script type="text/javascript">
$(document).ready(function () {
$("#divTest2").text("Hello, world!");
});
با این وجود، تیم طراحان و توسعه دهندگان این کتابخانه احساس کردند که این کد را کوتاه تر هم می توانند بکنند. از اینرو یک نسخه ی overload از سازنده (constructor) ایجاد کردند که تابع ready را به عنوان پارامتر می پذیرد و کد را با این روش به مراتب کوتاه تر کردند.
<div id="divTest3"></div>
<script type="text/javascript">
$(function () {
$("#divTest3").text("Hello, world!");
});
در
مثال فوق، تابع بی نام مستقیما به سازنده ارسال می شود که آن را به رخداد
ready تخصیص می دهد. اگر این کد را تست کنید، متوجه می شوید که به مجرد
بارگذاری صفحه، event مربوطه اجرا می گردد. گاهی این رخداد چنین سریع فعال
می شود که اصلا متوجه اجرای آن نمی شوید.
همان طور که قبلا گفته شد،
توصیه می شود برای استفاده از jQuery در صفحه وب خود کدهای آن را داخل تابع
رخداد ready قرار دهید. در بیشتر مثال های این آموزش همین رویه دنبال
خواهد شد، مگر برای کوتاه تر شدن مثال که در تعدادی از نمونه ها این کد را
لحاظ نمی کنیم.
آموزش جی کوئری از آموزش طراحی سایت ادامه دارد
سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل CSS در HTML را یاد گرفتیم , در حال با ادامه آموزش طراحی سایت همراه باشید:
یک
اسکریپت قطعه ی کوچکی از برنامه است که می تواند به وب سایت شما تعامل
اضافه کند. به عنوان مثال یک اسکریپت می تواند یک هشدار پاپ آپ مربوط به
باکس پیغام تولید کند، یا یک منوی رو به پایین ایجاد کند. این اسکریپت توسط
javascript یا VBScript نوشته می شود.
شما می توانید با استفاده از هر
زبان اسکریپتی، کارکردهای متنوع کوچکی به نام گردانندگان رویداد بنویسید و
سپس می توانید آن عملکردها را با استفاده از ویژگی های HTML اجرا کنید.
این
روزها فقط javascript و چارچوب های متناظر با آن توسط بسیاری از توسعه
دهندگان وب استفاده می شوند. VBScript حتی توسط برخی مرورگرها پشتیبانی هم
نمی شود.
شما می توانید کد javascript را در یک فایل مجزا نگهداری کرده و
سپس هرزمان که لازم بود آن را وارد کنید، یا می توانید قابلیت را در داخل
خود داکیومنت HTML تعریف کنید. اجازه بدهید هر دو مورد را یکی یکی با مثال
های مناسب بررسی کنیم.
جاوااسکریپت خارجی
اگر قصد دارید
قابلیتی را تعریف کنید که در انواع داکیومنت های HTML استفاده می شود، بهتر
است آن قابلیت را در یک فایل مجزای جاوااسکریپت حفظ کرده و آن فایل را
وارد داکیومنت های HTML خود کنید. یک فایل جاوااسکریپت دارای ضمیمه هایی
مانند js می باشد که با استفاده از برچسب< script>وارد فایل های HTML
می شود.
مثال:
تصور کنید که با استفاده از جاوااسکریپت در script.js یک عملکرد کوچک را تعریف می کنیم که دارای کد زیر می باشد.
function Hello()
{
alert("Hello, World");
}
اکنون اجازه بدهید از فایل جاوااسکریپت خارجی بالا در داکیومنت HTML خود استفاده کنیم، مانند زیر
این مثال نتیجه ای را به دنبال خواهد داشت که می توانید با کلیک کردن برروی دکمه ی ارائه شده توسط این مثال آن را امتحان کنید.
جاوا اسکریپت درونی
شما
می توانید کد جاوااسکریپت را مستقیما روی داکیومنت HTML خود بنویسید.
معمولا کد اسکریپت را با استفاده از برچسب< script>در سربرگ داکیومنت
نگهداری می کنیم در غیر این صورت هیچ محدودیتی وجود نداشته و می توانید کد
خود را در هر جایی در داکیومنت به جز داخل برچسب < script>نگه
دارید.
نمونه یک
Javascript Internal Script
function Hello() {
alert("Hello, World");
}
Event Handlers Example
سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل آموزش HTML فرم ها در Html را یاد گرفتیم , در قسمت یازدهم با ادامه آموزش طراحی سایت همراه باشید:
گاهی
اوقات تمایل دارید که موسیقی یا ویدئو به صفحه ی وب خود اضافه کنید. ساده
ترین راه برای افزودن صدا یا ویدئو به وب سایت، وارد کردن برچسب خاص HTML
به نام < embed> می باشد. این برچسب باعث می شود که مرورگر به طور
خودکار کنترل هایی را برای مولتی مدیا وارد کند که مرورگر ارائه شده برچسب
< embed> و نوع مدیای ارائه شده را پشتیبانی می کند.
همچنین
می توانید یک برچسب < noembed>برای مرورگرهایی وارد کنید که برچسب
< embed> را نمی شناسند. به عنوان مثال می توانید از < embed>
برای نمایش یک فیلم به انتخاب خود استفاده کنید واگر مرورگر < embed>
را پشتیبانی نمی کند، از< noembed> برای نمایش یک تصویر JPG مجزا
استفاده کنید.
مثال:
در اینجا مثال ساده ای می بینید از اجرای یک فایل جاسازی شده ی midi.
<embed src="/html/yourfile.mid">
<p><img alt="Alternative Media" src="yourimage.gif"><embed></p>
در زیر لیستی از ویژگی های مهمی را می بینید که توسط برچسب < embed> استفاده می شود.
می توانید از انواع مدیاهای مختلفی مانند فایل های flash movies، AVi و MOV در داخل برچسب embed استفاده کنید.
<embed height="200" src="/html/yourfile.swf" width="200">
<p><img alt="Alternative Media" src="yourimage.gif"><embed></p>
شما
می توانید از برچسب < bgsound>در html برای اجرای صدا در زمینه ی
صفحه ی وب خود استفاده کنید. این برچسب فقط توسط اینترنت اکسپلورر پشتیبانی
می شود و دیگر مرورگرها آن را نادیده می گیرند. زمانی که سند اصلی در
ابتدا توسط کاربر دانلود شده و نمایش داده می شود، این برچسب یک فایل صدا
را دانلود کرده و اجرا می کند. همچنین هروقت کاربر مرورگر را تازه سازی
کند، صدای زمینه نیز دوباره اجرا خواهد شد.این برچسب دارای فقط دو ویژگی می
باشد، loop و src، که همانطور که در بالا توضیح داده شد هر دوی این ویژگی
ها دارای یک معنا می باشند.
در اینجا مثال ساده ای از اجرای فایل کوچک midi را می بینید.
<p><img src="yourimage.gif"></p>
این مثال یک صفحه ی خالی تولید خواهد کرد. این برچسب هیچ مولفه ای را اجرا نمی کند و مخفی باقی می ماند.
اینترنت
اکسپلورر نیز تنها سه فرمت صدا را اجرا می کند: wav فرمت داخلی
کامپیوترها، au فرمت داخلی برای کار ابزارهای Unix و MIDI یک کد برنامه
گذاری جهانی برای موسیقی.
HTML
4 عنصر< object>را معرفی می کند که یک راه حل چند منظوره برای وارد
کردن آبجکت عمومی ارائه می دهد. عنصر< object>به نویسندگان HTML
اجازه می دهد تا هر چیز لازم را با یک آبجکت برای ارائه ی آن توسط یک
کاربر، تعیین کند.
در اینجا چند مثال در این رابطه می بینید.
مثال:
شما می توانید یک سند HTML را در خود سند HTML اجرا کنید.
<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 اجرا کنید.
<object data="data/test.pdf" type="application/pdf" width="300" height="200">
alt : <a href="data/test.pdf">test.htm<a>
</object>
مثال:
شما می توانید با استفاده از برچسب < param> برخی پارامترهای متناسب با سند را مشخص کنید. در اینجا مثالی از اجرای فایل wavرا می بینید.
<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 مانند زیر اجرا کنید.
<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 کنید.
<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 را یاد گرفتیم , در قسمت دهم با ادامه آموزش طراحی سایت همراه باشید:
وقتی
که می خواهید داده هایی را از سایت بازدیدکننده جمع آوری کنید، به فرم های
HTML احتیاج خواهید داشت. به عنوان مثال در هنگام ثبت کاربر، اطلاعاتی
مانند نام، آدرس ایمیل و کارت اعتباری و غیره را جمع آوری می کنید. یک فرم
داده ها را از بازدیدکننده ی سایت می گیرد و سپس آن را به یک برنامه ی
پایانی مانند CGI، اسکریپت ASP یا اسکریپت PHP باز می گرداند. برنامه ی
پایانی فرایندهای مورد نیاز را بر اساس کار تعریف شده در برنامه، روی داده ی
منتقل شده انجام می دهد.
عناصر متفاوتی برای فرم در دسترس میباشند،
مانند فیلدهای متن، فیلدهای textarea، منوهای رو به پایین، دکمه های رادیو،
چک باکس ها و غیره.
برچسب < form>مربوط به HTML، برای ایجاد یک فرم HTML استفاده می شود و دارای ترکیب زیر می باشد
< form action="Script URL" method="GET|POST">
form elements like input, textarea etc.
< /form>
علاوه بر ویژگی های متداول، در زیر لیستی از متداول ترین ویژگی های مربوط به فرم را مشاهده می کنید .
انواع مختلفی از کنترل های فرم وجود دارند که می توانید برای جمع آوری داده با استفاده از فرم HTML از آنها استفاده کنید.
سه نوع ورودی متن وجود دارد که در فرم ها استفاده می شوند .
این کنترل ها برای آیتم هایی استفاده می شوند که کاربر فقط یک خط ورودی احتیاج دارد، مانند باکس های جستجو و نام ها و با استفاده از برچسب < input>مربوط به HTML ایجاد می شوند.
مثال:
در اینجا مثال پایه ای می بینید از یک ورودی تک خطی که برای گرفتن نام کوچک و نام خانوادگی به کار می رود .
First name:
Last name:
در زیر لیستی از ویژگی های برچسب < input>را برای ایجاد فیلد متن می بینید.
این کنترل نیز یک کنترل تک خطی می باشد، اما به محض اینکه کاربر کاراکترها را وارد می کند، آنها را می پوشاند. این ها نیزبا استفاده از برچسب < input>مربوط به HTML ایجاد می شوند، اما نوع ویژگی با عنوان password تنظیم میشود.
مثال:
در اینجا مثالی از ورودی تک خطی پسوورد می بینید که برای گرفتن پسورد کاربر استفاده می شود.
User ID :
Password:
در زیر لیست مربوط به ویژگی های برچسب < input>را برای ایجاد فیلد پسوورد می بینید.
زمانی استفاده می شود که یک کاربر باید جزئیاتی را ئارد کند که بیشتر از یک جمله می باشند. کنترل های ورودی چند خطی با استفاده از برچسب < textarea>ایجاد میشوند.