شغل طراحی سایت برای چه کسانی مناسب است؟

 

آموزش طراحی سایت

 

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

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

3. چنانچه شما قصد بدست آوردن درآمد دلاری و کار پروژه ای برای خارج از کشور را دارید کافیست به طراحی سایت مسلط شوید و با استفاده از یک واسطه در سایتهای فریلنسری خارجی مثل freelancer.com اقدام به گرفتن پروژه نمایید.

4. چنانچه شما خانه دار هستید و یا در شهرستانهای دور که مشاغل IT و طراحی سایت در آنها رونق ندارد زندگی می کنید می توانید بصورت پروژه ای (Freelancing) در محل سکونت خود با شرکتهای کل کشور و گاهاً بین المللی کار کنید و درآمدی بین 7 تا 60 میلیون تومان در ماه کسب کنید .

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

6. چنانچه شما قصد راه اندازی یک استارتاپ اینترنتی را دارید با آموزش طراحی سایت می توانید نظارت دقیق و صحیح از عملکرد اعضای تیم خود داشته باشید و به عنوان صاحب شغل خود نیز دستی بر آتش داشته باشید.

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

هنگام مقایسه شبکه های عصبی با مغز احتیاط کنید...

 

آموزش ماشین لرنینگ

 

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

در زمینه علوم اعصاب، محققان اغلب از شبکه‌های عصبی استفاده می‌کنند تا سعی کنند همان نوع وظایفی را که مغز انجام می‌دهد مدل‌سازی کنند، به این امید که مدل‌ها بتوانند فرضیه‌های جدیدی را در رابطه با نحوه انجام آن وظایف توسط مغز ارائه دهند. با این حال، گروهی از محققان MITتاکید می کنند که در تفسیر این مدل ها باید احتیاط بیشتری کرد. شما باید بدانید که پیش از هر چیز نیاز به داشتن دانش اصولی در زمینه ماشین لرنینگ ، زبان پایتون و کتابخانه هایی دارید مانند تنسرفلو که در زمینه هوش مصنوعی مورد استفاده قرار می گیرند.

در تجزیه و تحلیل بیش از 11000 شبکه عصبی که برای شبیه‌سازی عملکرد سلول‌های شبکه - اجزای کلیدی سیستم ناوبری مغز - آموزش دیده بودند، دریافتند که شبکه‌های عصبی تنها زمانی فعالیت سلول‌های شبکه‌ای تولید می‌کنند که محدودیت‌های بسیار خاصی به آنها داده شود که در سیستم های بیولوژیکی یافت نمی شوند. تیم MIT دریافت که تعداد بسیار کمی از شبکه‌های عصبی فعالیت‌های شبکه‌ای سلول‌مانند را ایجاد می‌کنند، که نشان می‌دهد این مدل‌ها لزوماً پیش‌بینی‌های مفیدی درباره نحوه عملکرد مغز ایجاد نمی‌کنند.

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

مدل سازی سلول های شبکه

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

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

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

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

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

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

با این حال، محققان MIT به نتایج بسیار متفاوتی دست یافتند. در تجزیه و تحلیل بیش از 11000 شبکه عصبی که در مورد یکپارچه سازی مسیر آموزش داده بودند، دریافتند که در حالی که تقریبا 90 درصد از آنها این کار را با موفقیت یاد گرفته اند، تنها حدود 10 درصد از آن شبکه ها الگوهای فعالیتی را تولید می کنند که می تواند به عنوان سلول-شبکه طبقه بندی شود. این مورد شامل شبکه‌هایی می‌شود که در آن‌ها حتی تنها یک واحد امتیاز شبکه بالایی را به دست آورده است.

به گفته تیم MIT، احتمالاً مطالعات قبلی تنها به دلیل محدودیت‌هایی که محققان در آن مدل‌ها ایجاد می‌کنند، فعالیت‌هایی شبیه سلول شبکه ایجاد می‌کنند.

مطالعات قبلی این داستان را ارائه کرده‌اند که اگر شبکه‌ها را برای یکپارچه‌سازی مسیرها آموزش دهید، سلول‌های شبکه را دریافت خواهید کرد. چیزی که ما دریافتیم این است که در عوض، شما باید این توالی طولانی از انتخاب پارامترها را انجام دهید، که می دانیم با زیست شناسی ناسازگار هستند، و سپس در بخش کوچکی از این پارامترها، نتیجه دلخواه را خواهید گرفت.

مدل های بیولوژیکی بیشتر

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

وقتی تیم MIT مدل‌ها را طوری تنظیم کرد که سلول‌های مکانی بیشتر شبیه سلول‌های مکان بیولوژیکی باشند، مدل‌ها همچنان می‌توانستند وظیفه یکپارچه‌سازی مسیر را انجام دهند، اما دیگر فعالیت سلول‌های شبکه‌ای تولید نمی‌کردند. فعالیت شبه سلول‌های شبکه‌ای نیز زمانی ناپدید شد که محققان به مدل‌ها دستور دادند تا انواع مختلفی از خروجی مکان را تولید کنند، مانند موقعیت مکانی روی یک شبکه با محورهای Xو Y یا مکان به عنوان فاصله و زاویه نسبت به یک نقطه اصلی.

فیتی می‌گوید: «اگر تنها کاری که از این شبکه می‌خواهید انجام دهد یکپارچه‌سازی مسیر است، و مجموعه‌ای از الزامات بسیار خاص و نه فیزیولوژیکی را بر واحد بازخوانی تحمیل می‌کنید، در این صورت می‌توانید سلول‌های شبکه را به دست آورید. اما اگر هر یک از این جنبه‌های این واحد بازخوانی را آرام کنید، به شدت توانایی شبکه برای تولید سلول‌های شبکه را کاهش می‌دهد. در واقع، معمولاً این کار را نمی‌کنند، حتی اگر هنوز وظیفه یکپارچه‌سازی مسیر را حل می‌کنند.»

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

وقتی از مدل‌های یادگیری عمیق (deep learning) استفاده می کنید، آنها می‌توانند ابزار قدرتمندی باشند، اما باید در تفسیر آنها و تعیین اینکه آیا واقعاً پیش‌بینی‌های جدید انجام می‌دهند یا حتی به آنچه که مغز در حال بهینه‌سازی است، بسیار محتاط بود. کنت هریس، استاد علوم اعصاب کمی در دانشگاه کالج لندن، می‌گوید امیدوار است این مطالعه جدید دانشمندان علوم اعصاب را تشویق کند که در بیان آنچه می‌توانند با تشابهات بین شبکه‌های عصبی و مغز نشان دهند، مراقب باشند.

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

به گفته محققان MIT، هنگام استفاده از این مدل‌ها برای پیش‌بینی نحوه عملکرد مغز، مهم است که هنگام ساخت مدل‌ها، محدودیت‌های بیولوژیکی واقعی و شناخته شده را در نظر بگیریم. آنها اکنون روی مدل‌هایی از سلول‌های شبکه کار می‌کنند که امیدوارند پیش‌بینی‌های دقیق‌تری از نحوه عملکرد سلول‌های شبکه‌ای در مغز ایجاد کنند.

Khona می‌گوید: «مدل‌های یادگیری عمیق به ما بینشی در مورد مغز می‌دهند، اما تنها زمانی که دانش بیولوژیکی زیادی را به مدل تزریق کنید. اگر از محدودیت‌های صحیح استفاده کنید، مدل‌ها می‌توانند راه‌حلی شبیه به مغز به شما ارائه دهند.»

این تحقیق توسط دفتر تحقیقات نیروی دریایی، بنیاد ملی علوم، بنیاد سیمونز از طریق همکاری سیمونز بر روی مغز جهانی، و موسسه پزشکی هوارد هیوز از طریق برنامه دانش پژوهان دانشکده تامین شد.

آموزش کن وس Rectangle در HTML

قبل از فکر کردن در مورد ایجاد بازی های کنشی HTML5، اجازه دهید با اساس آن شروع کنیم.
ابتدا روی دکمه ی قرمز کلیک کنید. اگر دکمه ی قرمز در بوم نقاشی نمی بینید، احتمالا تمایل داشته باشید مرورگر درستی برای ادامه بگیرید.

?

1 2 3 4 5 6 7 8 9 10

<canvas id="c1" width="200" height="200" style="border:solid 1px #000000;"></canvas> ‎<button onclick="draw_square();return true;">Red Square</button> <script>     function draw_square() {     ‎  var c1 = document.getElementById("c1");     ‎  var c1_context = c1.getContext("2d");     ‎  c1_context.fillStyle = "#f00";     ‎  c1_context.fillRect(50, 50, 100, 100);     ‎} ‎</script>‎

برای کشیدن هرچیزی در بوم نقاشی، چیزی بین برچسب opening و برچسب closing از <canvas>
قرار ندهید، مرورگرهایی که بوم نقاشی را پشتیبانی می کنند، آن را نادیده خواهند گرفت. شما می توانید فقط از جاوااسکریپت برای انجام نقاشی خود استفاده کنید.
قانون شماره یک، عنصر بوم نقاشی شما باید دارای یک ID باشد، بنابراین می توانیم از جاوااسکریپت برای قراردادن آن استفاده کنیم. قانون شماره دو، هر بوم نقاشی دارای یک کانتکست می باشد. در واقع کانتکست بوم نقاشی آن چیزی است که قرار است روی آن نقاشی بکشیم، نه خود بوم.

?

1 2	var c1 = document.getElementById("c1");    var c1_context = c1.getContext("2d");‎

از لحاظ نگارش، نه تنها کانتکست های دو بعدی، بلکه سه بعدی آن نیز در دسترس می باشند. به هرحال کانتکست سه بعدی که webGL نامیده می شود، برای شما توسط W3G یا WHATWG آورده نمی شودبلکه توسط یک شرکت غیرانتفاعی به نام Khronos Group ارائه می شود. علاوه بر آن گوگل هم در دسامبر 2010 برای اطمینان بیشتر آینده ی این استاندارد، تولید شگفت انگیز Body Browser را آزاد کرد.
اجازه دهید از رنگ قرمز (fillStyle="#f00";) استفاده کرده و یک مربع قرمز با اضلاع 100px بکشیم.

?

1 2	c1_context.fillStyle = "#f00"; c1_context.fillRect(50, 50, 100, 100);‎

 

برای ادامه مثال ها روی طراحی سایت کلیک کنید

آموزش کن وس Canvas

یکی از داغ ترین موضوعات HTML5 موضوع canvas می باشد، اما دقیقا canvas چیست؟
canvas یک پارچه ی ساده بافته شده ی سنگین می باشد که برای ساختن قایق، چادر، کوله پشتی، خیمه و دیگر ابزاری که استحکام لازم دارند، استفاده می شود. و همچنین توسط نقاشان به عنوان سطح نقاشی که روی چارچوب چوبی نصب شده باشد، استفاده می شود.
شاید این جوابی که شما به دنبال آن بودید، نباشد.به هرحال canvas در HTML5 از کاربرد آن توسط هنرمندان تقلید می کند و بوم نقاشی نامیده می شود.
بوم نقاشی یک فضای خالی بدون رنگ ( حتی بدون سفید) است، که قرار است با مداد و قلم موی جاوااسکریپت تبدیل به یک کار هنری شود.
البته که وجود بوم نقاشی تنها برای یک تصویر ثابت نیست. تصویر ثابت می تواند به سادگی به وسیله ی عنصر قدیمی img مورد بررسی قرار بگیرد. با جاوااسکریپت به عنوان قلم موی خود، می توانید یک انیمیشن شاد و یا حتی بازیهای تکرار شونده ایجاد کنید.
اگر قبلا انیمیشن های درخشانی ایجاد کرده اید و امید دارید که یک ورژن HTML5 ایجاد کنید، ابزاری وجود دارند که در انجام آن به شما کمک می کنند. یکی از آنها Flash to HTML5 می باشد.
HTML5 مقوله ی خیلی بزرگی است، آنقدر بزرگ که می توانید در مورد آن یک کتاب بنویسید. هدف من در این آموزش تحت پوشش قرار دادن جزئیات مربوط به بوم نقاشی نیست، بلکه تنها معرفی مختصری از آن است. به یاد داشته باشد که این تنها شروع آن است.
برای ایجاد بوم نقاشی، کد ساده ی زیر لازم است.

 

به هرحال به یاد داشته باشید که مرز یک بوم نقاشی یک آبجکت ناپیداست. این برنامه فضایی را می گیرد اما شما آن را نمی بینید. اجازه دهید یک سبک مرزی اضافه کرده و از ID برای مرجع استفاده کنیم. هدف از ID این است که با استفاده از DOM (document object model) آن را قابل دسترس کنیم. بدون مرجع ID، جاوا اسکریپت، در این مورد قلم موی شما، هیچ ایده ای برای نقاشی روی بوم ندارد.

 

اگر در قسمت بالا به جای یک تیره و مربع، یک جمجمه با دو استخوان ضربدری می بینیدبه این معناست که مرورگر شما بوم نقاشی را پشتیبانی نمی کند. ممکن است تمایل داشته باشید مرورگری دانلود کنید که با بوم نقاشی کار کند، همانطور که در زیر می بینید.

Basic Canvas Support

Basic Canvas Support	Browsers
✓ (requires ExplorerCanvas)	IE 7
✓	IE 9 Beta
✓	Firefox 3.0
✓	Safari 3.0
✓	Chrome 3.0
✓	Opera 10

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

HTML Layouts

آموزش HTML Layout ‏ ‏

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

 

Layout HTML – استفاده از جدول ها

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

 مثال:

برای مثال، نمونه Layout HTML زیر از طریق استفاده ی یک جدول با سه ردیف و دو ستون به دست می آید، اما عنوان و پاورقی ستون هر دو ستون را با استفاده از ویژگی colspan احاطه می کند.

 

نمونه یک

 

<!DOCTYPE html>

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

<head>

    <title>HTML Layout using Tables</title>

</head>

<body>

    <table width="100%" border="0">

        <tr>

            <td colspan="2" bgcolor="#b5dcb3">

                <h1>This is Web Page Main title</h1>

            </td>

        </tr>

        <tr valign="top">

            <td bgcolor="#aaaa" width="50">

                <b>Main Menu</b><br />

                HTML<br />

                PHP<br />

                PERL...

            </td>

            <td bgcolor="#eeeee" width="100" height="200">

                Technical and Managerial Tutorials

            </td>

        </tr>

        <tr>

            <td colspan="2" bgcolor="#b5dcb3">

                <center>

                    Copyright © 2007 Tahlildadeh.com

                </center>

            </td>

        </tr>

    </table>

</body>

</html>

 

Layout های HTML – استفاده از DIV و Span

 

عنصر < div>یک عنصر block level می باشد که برای گروه بندی عناصر HTML استفاده می شود. در حالیکه این عنصر یک عنصر block level است، عنصر< span>برای گروه بندی عناصر در یک سطح درون خطی استفاده می شوند.

گرچه می توانیم با جدول های HTML ، Layout های بسیار زیبایی به دست آوریم، اما جدول ها در واقع به عنوان ابزار Layout طراحی نشده اند، و بیشتر برای نمایش داده های جدولی استفاده می شوند.

 

نمونه دو

 

<!DOCTYPE html>

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

<head>

    <title>Three Column HTML Layout</title>

</head>

<body>

    <table width="100%" border="0">

        <tr valign="top">

            <td bgcolor="#aaaa" width="20%">

                <b>Main Menu</b><br />

                HTML<br />

                PHP<br />

                PERL...

            </td>

            <td bgcolor="#b5dcb3" height="200" width="60%">

                Technical and Managerial Tutorials

            </td>

            <td bgcolor="#aaaa" width="20%">

                <b>Right Menu</b><br />

                HTML<br />

                PHP<br />

                PERL...

            </td>

        </tr>

        </table>

</body>

</html>

 توجه:

این مثال از CSS استفاده می کند، بنابراین قبل از درک این مثال، بهتر است درک بهتری از چگونگی کار CSS داشته باشید.

 مثال:

در اینجا سعی می کنیم با استفاده از برچسب < div> همراه با CSS همان نتیجه ای را به دست اوریم که هنگام استفاده از برچسب < table> در مثال قبل به دست آوردیم.

 

نمونه سه

 

<!DOCTYPE html>

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

<head>

    <title>HTML Layouts using DIV, SPAN</title>

</head>

<body>

    <div style="width:100%">

        <div style="background-color:#b5dcb3; width:100%">

            <h1>This is Web Page Main title</h1>

        </div>

        <div style="background-color:#aaa; height:200px;width:100px;float:left;">

            <div><b>Main Menu</b></div>

            HTML<br />

            PHP<br />

            PERL...

        </div>

        <div style="background-color:#eee; height:200px;width:350px;float:left;">

            <p>Technical and Managerial Tutorials</p>

        </div>

        <div style="background-color:#aaa; height:200px;width:100px;float:right;">

            <div><b>Right Menu</b></div>

            HTML<br />

            PHP<br />

            PERL...

        </div>

        <div style="background-color:#b5dcb3;clear:both">

            <center>

                Copyright © 2007 Tahlildadeh.com

            </center>

        </div>

    </div>

</body>

</html>

 

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

جاوااسکریپت در html

آموزش javascript‏

یک اسکریپت قطعه ی کوچکی از برنامه است که می تواند به وب سایت شما تعامل اضافه کند. به عنوان مثال یک اسکریپت می تواند یک هشدار پاپ آپ مربوط به باکس پیغام تولید کند، یا یک منوی رو به پایین ایجاد کند. این اسکریپت توسط javascript یا VBScript نوشته می شود.
شما می توانید با استفاده از هر زبان اسکریپتی، کارکردهای متنوع کوچکی به نام گردانندگان رویداد بنویسید و سپس می توانید آن عملکردها را با استفاده از ویژگی های HTML اجرا کنید.
این روزها فقط javascript و چارچوب های متناظر با آن توسط بسیاری از توسعه دهندگان وب استفاده می شوند. VBScript حتی توسط برخی مرورگرها پشتیبانی هم نمی شود.
شما می توانید کد javascript را در یک فایل مجزا نگهداری کرده و سپس هرزمان که لازم بود آن را وارد کنید، یا می توانید قابلیت را در داخل خود داکیومنت HTML تعریف کنید. اجازه بدهید هر دو مورد را یکی یکی با مثال های مناسب بررسی کنیم.

 

جاوااسکریپت خارجی

اگر قصد دارید قابلیتی را تعریف کنید که در انواع داکیومنت های HTML استفاده می شود، بهتر است آن قابلیت را در یک فایل مجزای جاوااسکریپت حفظ کرده و آن فایل را وارد داکیومنت های HTML خود کنید. یک فایل جاوااسکریپت دارای ضمیمه هایی مانند js می باشد که با استفاده از برچسب< script>وارد فایل های HTML می شود.

 مثال:

تصور کنید که با استفاده از جاوااسکریپت در script.js یک عملکرد کوچک را تعریف می کنیم که دارای کد زیر می باشد.

 

function Hello()

{

    alert("Hello, World");

}

 

اکنون اجازه بدهید از فایل جاوااسکریپت خارجی بالا در داکیومنت HTML خود استفاده کنیم، مانند زیر

 

<input type="button" onclick="Hello();" name="ok" value="Click Me">

 

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

 

جاوا اسکریپت درونی

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

 

نمونه یک

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

 

گردانندگان رویدادها(()EventHandler)

گردانندگان رویدادها عملکردهای تعریف شده ی ساده ای می باشند که می توانند برعلیه هر یک از عملکردهای ماوس یا صفحه کلید فراخوانده شوند. شما می توانید عملکرد خود را در یک گرداننده ی رویداد تعریف کنید که می تواند یک خط تا 1000 خط کد باشد.
در زیر مثالی را می بینید که چگونگی نگارش یک گرداننده ی رویداد را نشان می دهد. اجازه بدهید یک تیتر ساده ی ()EventHandler را در تیتر داکیومنت بنویسیم. هر زمان که کاربر ماوس را روی یک پاراگراف بیاورد، این عملکر را فرا خواهیم خواند.

 

نمونه دو

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

 

Bring your mouse here to see an alert

مخفی کردن اسکریپت ها از مرورگرهای قدیمی

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

 

عنصر < noscript>

می توانید یک سری اطلاعت جایگزین به کاربری ارائه دهید که مرورگر وی اسکریپت ها را پشتیبانی نمی کند، همچنین برای کاربرهایی که گزینه ی script مرورگر خود را غیرفعال کرده اند. شما می توانید اینکار را با استفاده از برچسب < noscript> انجام دهید.

 

JavaScript Example

نمونه سه

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

 

سربرگ HTML

سربرگ HTML‏‏

یاد گرفتیم که یک نمونه داکیومنت HTML دارای ساختار زیر می باشد.

Document declaration tag

< html>

< head>

    Document header related tags

< head>

< body>

    Document body related tags

< body>

< html>

 

این فصل جزئیات بیشتری در مورد بخش سربرگ در HTML ارائه می دهد که به وسیله ی برچسب< head>نمایش داده می شود. برچسب< head>حاوی برچسب های مهمی می باشد که عبارتند از:< title>, < meta>, < link>, < base>,< style>, < script >, و < noscript > tags.

 

برچسب < title> در HTML

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

 

نمونه یک

 

<!DOCTYPE html>

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

<head>

    <title>HTML Title Tag Example</title>

</head>

<body>

    <p>Hello, World!<p>

</body>

</html>

برچسب < meta> در HTML

این برچسب برای ارائه ی متادیتا در مورد داکیومنت HTML استفاده می شود که اطلاعاتی از قبیل انقضا صفحه، گردآورنده ی صفحه، لیست کلمات کلیدی، توصیف صفحه و غیره ارائه می دهد.
در ادامه استفاده های مهم برچسب < meta> در داکیومنت HTML ارائه شده اند

 

نمونه دو

 

<!DOCTYPE html>

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

<head>

    <title>HTML Title Tag Example</title>

    <!-- Provide list of keywords -->

    <meta name="keywords" content="C, C++, Java, PHP, Perl, Python">

 

    <!-- Provide description of the page -->

    <meta name="description" content="Simply Easy Learning by Tutorials Point">

 

    <!-- Author information -->

    <meta name="author" content="Tutorials Point">

 

    <!-- Page content type -->

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

 

    <!-- Page refreshing delay -->

    <meta http-equiv="refresh" content="30">

 

    <!-- Page expiry -->

    <meta http-equiv="expires" content="Wed, 21 June 2006 14:25:27 GMT">

 

    <!-- Tag to tell robots not to index the content of a page -->

    <meta name="robots" content="noindex, nofollow">

</head>

<body>

    <p>Hello, World!<p>

</body>

</html>

 

برچسب < base> در HTML

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

 

نمونه سه

 

<!DOCTYPE html>

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

<head>

    <title>HTML Title Tag Example</title>

    <base href="http://www.tahlildadeh.com/" />

</head>

<body>

    <img src="/banner/02.jpg" alt="Logo Images" />

    <a href="/ArticleDetails/HTML Marquees" title="HTML Tutorial">HTML Tutorial</a>

</body>

</html>

 

برچسب < link> در HTML

این برچسب ارتباط بین داکیومنت جاری و منبع خارجی را تعیین می کند. در ادامه مثالی را می بینید از لینک یک فایل style sheet خارجی موجود در مسیر css با یک web root.

 

نمونه چهار

 

<!DOCTYPE html>

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

<head>

    <title>HTML Title Tag Example</title>

    <base href="http://www.tahlildadeh.com/" />

    <link rel="stylesheet" type="text/css" href="/css/style.css">

</head>

<body>

    <p>Hello, World!<p>

</body>

</html>

 

برچسب< style>در HTML

این برچسب برای تعیین style sheet برای داکیومنت جاری HTML استفاده می شود. در ادامه مثالی را می بینید از تعریف برخی قوانین style sheet در داخل برچسب< style>.

 

نمونه پنج

 

<!DOCTYPE html>

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

<head>

    <title>HTML style Tag Example</title>

    <base href="http://www.tahlildadeh.com/" />

    <style>

        .myclass {

            background-color: #aaa;

            padding: 10px;

        }

    </style>

</head>

<body>

    <p class="myclass">Hello, World!<p>

</body>

</html>

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

 

HTML Marquees

آموزش HTML Marquee ‏ ‏‏

Marquee در HTML یک قطعه اسکرولینگ می باشد که یا به صورت افقی در عرض متن ویا به صورت عمودی در پایین صفحه ی وب شما نمایش داده می شود، بستگی به تنظیمات دارد وتوسط برچسب < fmarquees>مربوط به HTML ایجاد می شود.

 

 توجه:

ممکن است برچسب < marquees> در HTML توسط مرورگرهای زیادی پشتیبانی نشود، بنابراین توصیه می شود که به این برچسب تکیه نکنید، در عوض می توانید از javascript و CSS برای ایجاد چنین تاثیراتی استفاده کنید.

ترکیب ساده برای استفاده از برچسب< marquees> در HTML مانند زیر می باشد:

 

< marquee attribute_name="attribute_value" ....more attributes>

    One or more lines or text message or image

< /marquee>

 

 

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

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

 

Attribute

Description

width

این ویژگی عرض marquee را مشخص می کند. می تواند مقداری مانند 10 یا 20 درصد باشد.

height

این ویژگی طول marquee را مشخص می کند. می تواند مقداری مانند 10 یا 20 درصد باشد.

direction

این ویژگی مسیری را که marquee باید در آن اسکرول شود، تعیین می کند. می تواند مقداری مانند up، down، left و یا right داشته باشد.

behavior

این ویژگی نوع اسکرول marquee را تعیین می کند. می تواند مقداری مانند scroll، side و alternate داشته باشد.

scrolldelay

این ویژگی میزان تاخیر بین دو پرش را تعیین می کند. می تواند مقداری مانند 10 داشته باشد.

scrollamount

سرعت متن marquee را تععین می کند. می تواند مقداری مانند 10 داشته باشد.

loop

تعداد دفعات loop را تعیین می کند. مقدار پیش فرض INFINITE می باشد که به این معناست که در marquee به طور پایان ناپذیری loop انجام می شود.

bgcolor

این ویژگی رنگ زمینه را به شکل نام رنگ یا مقدار شش تایی رنگ مشخص می کند.

hspace

این ویژگی فضای افقی اطراف marque را تعیین می کند. می تواند مقداری مانند 10 یا 20 درصد داشته باشد.

vspace

این ویژگی فضای عمودی اطراف marquee را تعیین می کند. می تواند مقداری مانند 10 یا 20 درصد داشته باشد.

در ادامه چند مثال از استفاده ی برچسب marquee می بینید.

 

 مثال:

نمونه یک

<!DOCTYPE html>
<html>
<head>
    <title>HTML marquee Tag</title>
</head>
<body>
    <marquee>This is basic example of marquee</marquee>
</body>
</html>

 

 مثال:

نمونه دو

<!DOCTYPE html>
<html>
<head>
    <title>HTML marquee Tag</title>
</head>
<body>
    <marquee width="50%">This example will take only 50% width</marquee>
</body>
</html>

 

 مثال:

نمونه سه

<!DOCTYPE html>
<html>
<head>
    <title>HTML marquee Tag</title>
</head>
<body>
    <marquee direction="right">This text will scroll from left to right</marquee>
</body>
</html>

 

 مثال:

نمونه چهار

<!DOCTYPE html>
<html>
<head>
    <title>HTML marquee Tag</title>
</head>
<body>
    <marquee direction="up">This text will scroll from bottom to up</marquee>
</body>
</html>

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

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

می توانید از انواع مدیاهای مختلفی مانند فایل های 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 را پشتیبانی نکند، ویژگی alt وارد تصویر می شود.

 مثال:

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

 

مرحله 5

 مثال:

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

 

مرحله 6

مثال:

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

 

مرحله 7

 مثال:

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

 

مرحله 8

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

 

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

فرم های 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>

ویژگی ها

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

 

 

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 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>

 

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

کنترل های مخفی شده فرم برای پنهان کردن داده در داخل صفحه ای استفاده می شوند که بعدا می توانند به سرور ارسال شوند. این کنترل در داخل کد مخفی شده و روی صفحه ی حقیقی ظاهر نمی شود. برای مثال فرم مخفی شده ی زیر برای حفظ شماره ی صفحه ی جاری استفاده می شود. وقتی که کاربر روی 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>

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