نوشته های سایت آموزشی فری لرن

نحوه استفاده از CSS در صفحه وب

سایت آموزشی فری لرن — Sun, 29 Dec 2019 09:27:00 +0330

سلام خدمت تمامی دوستان و همراهان محترم ، امیدوارم که حال همگیتون خوب باشه. در ادامه با آموزش نحوه استفاده از دستورات CSS در صفحه وب با من همراه باشید.بطور کلی ما از ۳ روش میتونیم از دستورات CSS استفاده نماییم :روش خطی یا درون خطی یا اینلاین یا Inlineروش داخلی یا درون صفحه ای یا Internalروش خارجی یا مجزا یا Externalکه در ادامه بطور کامل این روش هارو آموزش خواهم داد.آموزش روش استایل نویسی خطی یا Inlineدر این روش ما باید از صفت Style در درون هر تگی که میخوایم براش استایل تعریف کنیم، استفاده نماییم. که آموزش صفت Style رو نیز بصورت جداگانه بطور کامل میتونید مشاهده نمایید.مثال شماره ۱ : ( کلیک کنید )مثال شماره ۲ : ( کلیک کنید )آموزش روش استایل نویسی داخلی یا Internalدر این روش ما باید دستورات CSS مون رو دراخل قسمت Head (بالایی ترین بخش یک صفحه وب) و در تگ Style قرار بدهیم.یک صفت داریم به اسم Style که در درون یک تگ مورد استفاده قرار میگیرد و یک تگ داریم به اسم Style که در بین تگ های Head و Body قرار میگیرد.مثال از روش داخلی ( کلیک کنید )آموزش روش استایل نویسی خارجی یا مجزا یا Externalروش خارجی که دیگه اسمش روشه، یعنی اینکه ما دستورات CSS مون رو در درون یک فایل بصورت مجزا ایجاد کنیم سپس با استفاده از یک خط کد آن را به فایل HTML مون متصل نماییم.پیشنهاد میکنم حتما آموزش نحوه ایجاد فایل CSS را مشاهده نمایید.یادگیری نحوه آدرس دهی فایل ها در یک صفحه وب برای یک طراح وب از واجبات می باشد.خب پس ما الان دستورات CSS مون رو بصورت مجزا در درون یک فایل CSS داریم که این فایل CSS برای مثال اسمش my-style هست. حالا میخوایم این فایل رو به فایل HTML مون متصل نماییم.تکه کد زیر رو در بین تگ Head صفحه وبمون قرار میدیم :که در صفت href باید آدرس کامل و دقیق فایل CSS مون رو قرار بدیم.مثال شماره 1 : قرار دادن فایل CSS از طریق آدرس دهی نسبی ( کلیک کنید )مثال شماره 2 : قرار دادن فایل CSS از طریق آدرس دهی مطلق ( کلیک کنید )اولویت بندی روش های بالا بصورت زیر می باشد : (یعنی اینکه اولویت اجرای دستورات با کدام روش هست)اولویت اول با روش خطی که با صفت Style ایجاد می شود می باشد، یعنی اگه مثلا من با استفاده از روش خطی رنگ متن یک تگ رو آبی کردم و دوباره اومدم در قسمت Internal رنگ متن همون تگ رو قرمز کردم، اولویت با آبی هست و رنگ آبی اعمال میشه. ( مثال )اولویت دوم با روش Internal و بعدش با خارجی External می باشد.اولویت آخر هم باید خوده مرورگر می باشد، یعنی اگه هیچ استایلی از روش های بالا تعریف نشده بود ، مرورگر خودش با پیش فرض هایی که برای تگ ها از قبل تعریف شده ، استایل میده.نکاتی که باید درباره روش های استایل دهی بالا مورد توجه تان باشد :روش خطی : روش بهینه ای نمی باشد ، حتی در کش مرورگر قرار نمیگیرد و باعث میشه سرعت بارگذاری صفحه کم بشه.روش داخلی : نسبت به روش خطی خیلی بهینه تر می باشد ولی یه عیبی که داره اینه با استفاده از این روش فقط میتوان برای یک صفحه استایل نوشت، یعنی اگه من بخوام از استایل صفحه شماره ۱ تو صفحه شماره ۲ استفاده کنم باید کل دستورات استایل صفحه شماره ۱ رو کپی کنم و داخل صفحه شماره ۲ پیست کنم.روش خارجی : بهینه ترین روش ممکن می باشد، برای افزایش سرعت بارگذاری صفحه حتما از این روش استفاده نمایید.تو روش خارجی اگه من مثلا ۱۰۰ صفحه داشته باشم و بخوام رنگ زمینه رو عوض کنم فقط کافیه تکه کد رنگ زمینه رو از توی فایل CSS خارجی تغییر بدم تا در تمام ۱۰۰ صفحه اعمال بشه. ولی همینکارو بخوایم با روش داخلی انجام بدیم باید کد تغییر رنگ رو در درون ۱۰۰ صفحه بصورت دستی قرار بدم یا پیست کنم.منبع: سایت آموزشی فری لرنبرای مشاهده آموزش های بیشتر لطفا به سایت مراجعه نمایید.

نحوه نوشتن دستورات CSS

سایت آموزشی فری لرن — Thu, 26 Dec 2019 20:02:38 +0330

سلام دوستان امیدوارم که حالتون خوب باشه، در این بخش میخواهیم با نحوه نوشتن دستورات CSS آشنا شویم. لطفا در ادامه و تا پایان با من همراه باشید.نحوه نوشتن دستورات CSSدستورات زبان CSS یا سی اس اس نیز همانند دیگر زبان ها ( برنامه نویسی یا .. ) دارای یکسری قواعد هستند که ما باید آنها را رعایت نماییم تا بتوانیم از دستورات آن زبان استفاده نماییم.در زبان CSS ما باید نحوه نوشتاری ( سینتکس یا Syntax ) دستورات این زبان را بلد باشیم تا بتونیم از دستورات یا ویژگی های این زبان استفاده نماییم.کلمه CSS میشه مخفف Cascading Style Sheets یعنی ( شِت های آبشاری استایل ) خب یعنی چه؟ یعنی دستورات CSS بصورت آبشاری زیرهم نوشته میشن.مثال :h1{color: blue;background-color: white;font-size: 14px;}همونطور که مشاهده مینمایید دستورات بصورت آبشاری زیرهم نوشته شدن، ولی سوال اینه که آیا حتما باید دستورات را بصورت آبشاری بنویسیم؟!پاسخ : نه هیچ اشکالی نداره که شما دستورات رو بصورت آبشاری بنویسید یا بصورت فشرده پشت سرهم، مهم فقط اینه که دستورات رو درست نوشته باشید.برای اینکه دستورات CSS شما خوانایی بالایی داشته باشن و همچنین از نظر نوشتاری تمیز و مرتب باشند پیشنهاد میکنم دستورات رو بصورت آبشاری بنویسید.شکل نوشتاری یا سینتکس یا Syntax دستورات CSSشکل کلی دستورات CSS بصورت زیر می باشد : (عکس زیر)حالا دستور بالا داره چی میگه : داره میگه انتخاب کن تگ H1 رو از کل صفحه ، بعد با استفاده از ویژگی color رنگ متنش رو آبی میکنه و بعدش دوباره با استفاده از ویژگی font-size اندازه فونتش رو ۱۲ پیکسل میکنه.Selector : یعنی انتخابگر یعنی انتخاب کن فلان تگ رو از صفحهProperty : اون ویژگی یا اون عملی که قراره رو تگ مورد نظر اعمال کنیمValue : مقدار اون ویژگی که قراره رو تگ مورد نظر اعمال شهپس اون h1 میشه قسمت انتخابگر ما (یعنی اون قسمت یا تگی که قراره روش عملی انجام بدیم) و Property میشه ویژگی ما (یعنی اون ویژگی یا چیزی که میخوایم روی تگ انتخاب شده پیاده کنیم) و در نهایت هر ویژگی دارای یک مقدار می باشد که باید مقدارشم وارد کنیم. به همین راحتی !پس در کل باید اینجوری یک دستور CSS بنویسیم - اول انتخاب میکنیم که میخوایم رو چه چیزی دستور پیاده کنیم ، مثلا نام یک تگ یا کلاس یا ID رو مینویسیم بعدش یک } باز میکنیم سپس اون ویژگی که قراره رو تگمون پیاده کنیم مینویسیم سپس یک : میگذاریم بعدش مقدار ویژگی مون رو مینویسم و در نهایت علامت ; و در آخر { را مینویسیم.دیگه همینطور تا هرچقدر که دلمون بخواد میتونیم از ویژگی های CSS استفاده نماییم.مثال های بیشترمثال شماره ۱ : نوشتن دستورات CSS بصورت آبشاری ( کلیک کنید )مثال شماره ۲ : نوشتن دستورات CSS بصورت خطی (فشرده) ( کلیک کنید )منبع: سایت آموزشی فری لرنبرای مشاهده آموزش های بیشتر لطفا به سایت مراجعه نمایید.

آموزش ساخت فایل CSS

سایت آموزشی فری لرن — Mon, 09 Dec 2019 14:12:15 +0330

سلام دوستان ، امیدوارم که حالتون خوب باشه. در این بخش میخواهیم یاد بگیریم که چگونه میتوان یک فایل CSS را ایجاد کرد.تعریف فایل CSSیک فایل CSS با پسوند css. ایجاد و مورد استفاده قرار میگیرد، یعنی در واقع هر فایلی رو که دیدید پسوندش css. بود یعنی اون فایل یک فایل CSS می باشد.سی اس اس مخفف کلمه ی Cascading Style Sheets می باشد که با استفاده از آن میتوان به یک صفحه وب استایل داد، پس بطور کلی وظیفه استایل دهی و صفحه آرایی صفحات وب بر عهده این زبان می باشد.ما از روش های مختلفی میتونیم از CSS استفاده نماییم که ان شاالله در بخش های بعدی این روش هارو بطور کامل آموزش خواهم داد و شما نیز آنها را یاد خواهید گرفت.البته بنده در مجموعه آموزش های زبان HTML روش های نحوه استفاده از CSS را در HTML آموزش داده ام که در صورت تمایل میتوانید از طریق لینک زیر آن را مشاهده نمایید.پیشنهاد میکنم آموزش نحوه استفاده از CSS در HTML را مشاهده نمایید.نرم افزار ساخت فایل CSSهمونطور که میدونید برای ساخت و ایجاد انواع فایل ها ، حالا میخواد فایل HTML باشه یا CSS یا PHP و یا هر فایل دیگه ، نیازمند نرم افزار می باشد.حال باز این نرم افزارها میتونن خیلی حرفه ای باشن ( مثله Dreamweaver ) و هم میتونن ساده باشن ( مثله ++NotePad ) که هر کدوم به نسبت ، میتونن ویژگی های خاص خودشونو داشته باشن.درسته که یک نرم افزار خیلی حرفه ای میتونه خیلی کمک کننده باشه حالا از هر نظر، ولی بنظره شخصی بنده مهم نیست که نرم افزار چقدر حرفه ای هست مهم اینه که شما چقدر تو کدنویسی حرفه ای هستید.اگه از من میشنوید سعی کنید با همین نرم افزار ساده NotePad خوده ویندوز یا نهایت با نرم افزار ++NotePad کدنویسی کنید تا بتونید دستورات رو بصورت ریشه ای در ذهنتون بکارید.چرا که وابستگی بیش از اندازه به نرم افزارهای حرفه ای باعث میشه شما تو کدنویسی ضعیف باشید، به گونه ای که اگه اون نرم افزار رو از شما بگیرن دیگه شما هیچ کاری نمیتونید کنید.آموزش نحوه ایجاد فایل CSS در نرم افزار Notepad ویندوزما میخوایم یک فایل مجزای CSS ایجاد نماییم که بتونیم این فایل CSS مجزا رو به فایل HTML مون متصل نماییم و عملا یک فایل HTML جدا و یک فایل CSS جدا داشته باشیم که دیگه لازم نباشه از دستورات CSS در درون فایل HTML استفاده نماییم.باز میگم نرم افزارهای زیادی برای ایجاد فایل CSS وجود دارند ولی ما میتونیم از نرم افزار ساده NotePad خوده ویندوز استفاده نماییم، پس لطفا این نرم افزار رو اجرا نمایید.سپس دستورات زیر رو درون نرم افزار کپی کنید : ( چه بهتر که خودتون تایپ کنید )body{background-color: blue;color: white;}p{color: yellow;}سپس باید فایل رو ذخیره یا Save کنیم، از منوی File بروی گزینه Save یا Save as کلیک نمایید.سپس باید پسوند یا فرمت فایلمون رو مشخص کنیم، چون یک فایل CSS میخوایم پس باید پسوندش رو css. بزاریم.نحوه متصل کردن فایل CSS به فایل HTMLخب ما نحوه ساخت فایل CSS رو یاد گرفتیم، حالا میخوایم یاد بگیریم که چگونه میتوان یک فایل CSS خارجی رو به صفحه وبمون (فایل HTML) متصل نمود.برای اینکار کافیه از تکه کد زیر در قسمت هِد ( HEAD ) صفحه HTML مون استفاده نماییم : توجه داشته باشید که در قسمت href باید آدرس محل فایل CSS را بصورت کامل و دقیق وارد نمایید، لطفا به مثال زیر توجه نمایید.برای مشاهده مثال آنلاین لطفا اینجا کلیک نمایید.منبع: سایت آموزشی فری لرنبرای مشاهده آموزش های بیشتر لطفا به سایت مراجعه نمایید.

آموزش CSS

سایت آموزشی فری لرن — Wed, 04 Dec 2019 10:50:07 +0330

سلام دوستان امیدوارم که حالتون خوب باشه، بلاخره بعد از مدتی که در ویرگول حضور نداشتم امروز با مطلب آموزش زبان CSS در خدمتتون هستم.آموزش قدم به قدم زبان CSSاول از هرچیز بدونید پیش نیاز یادگیری زبان CSS زبان مادر طراحی وب یعنی HTML می باشد، البته میشه هم بصورت همنیاز از این 2 زبان در کنارهمدیگر استفاده کرد.یعنی شما همزمان که دارید HTML رو یاد میگیرید زبان CSS رو نیز در کنارش یاد بگیرید ولی خب با این وجود بعضی ها ممکنه جدا برن بسمت این زبان ها و بعضی ها هردو رو بصورت همزمان آموزش ببینن.در فری لرن آموزش زبان HTML بطور کامل قرار گرفته و به پایان رسیده است لذا در صورت تمایل میتوانید این زبان را در فری لرن بطور کامل یاد بگیرید.آموزش قدم به قدم زبان HTML بطور کامل در سایت آموزشی فری لرنتعریف زبان CSSزبان استایل نویسی یا زبان سی اس اس یا به انگلیسی Cascading Style Sheets یکی دیگر از هسته های اصلی برای طراحی صفحات وب می باشد.اینجوری میتونم بگم که بعد از زبان HTML زبان CSS دومین هسته برای طراحی صفحات وب می باشد، که با استفاده از این زبان میتوان نحوه نمایش عناصر را در یک صفحه وب یا دستگاهای مختلف ( مثله موبایل و.. ) مشخص کرد.ما با استفاده از HTML مثلا یک عکس / تصویر رو درون صفحه وبمون قرار میدیم خب ، حال من میخوام عکسم رو دورش یک خط بکشم یا مثلا میخوام عکسم رو دایره ای کنم خب چجوری اینکارو کنم؟ یا اصلا میخوام یک منو درست کنم؟اچ تی ام ال خودش به تنهایی این قدرتو نداره چون وظیفه اینکارارو نداره ، اصلا بهش گفتن تو به کاری به استایل دهی یا شکل شمایل دهی به صفحه وب نداشته باش تو فقط عناصر رو تو یک صفحه وب قرار بده تا در مرورگر نمایش داده شن.تفاوت HTML با CSS در چیست؟خب تفاوت بین این ۲ زبان کاملا مشخصه، زبان HTML ایجاد کننده ی عناصر در مرورگرها می باشند و زبان CSS استایل دهنده به آن عناصر ایجاد شده در مرورگرها.مثلا من میخوام یک عکس بزارم درون وسط صفحه وبم، پس در اینجا با استفاده از زبان HTML و تگ IMG میام و عکس رو ایجاد میکنم ولی بعدش با استفاده از CSS میام و عکس رو میزارم وسط صفحه و یا هرکاری که دلم بخواد میتونم کنم باهاش.برای مثال من برای شما ۲ صفحه ایجاد کرده ام، صفحه اول فقط با HTML ایجاد شده (یعنی CSS هیچ دخالتی نداشته) و صفحه دوم هم با HTML و هم با CSS ایجاد شده. (پس میتونید تفاوت را به راحتی مشاهده نمایید)نمونه صفحه ایجاد شده با HTML : (در مثال زیر عناصر فقط از طریق HTML ایجاد شده اند و همانطور که میبینید یک صفحه خشک و بی روح داریم)برای مشاهده مثال آنلاین کلیک نماییدنمونه صفحه ایجاد شده با HTML و CSS : همانطور که میبینید با اومدن CSS به HTML روح زندگی داده.برای مشاهده مثال آنلاین کلیک نماییدنسخه های زبان CSSشاید شمایی که الان دارید این مطلب ( آموزش قدم به قدم زبان CSS ) رو مطالعه مینمایید میدانید که CSS دارای نسخه (ورژن) های مختلفی هست ، و یا شاید این را نمیدانید که CSS تا به الان ۴ نسخه ارائه کرده است.خب سوال اینه تفاوت بین نسخه ۱ تا نسخه ۴ در چیه؟ آیا مثلا من فقط باید نسخه ۴ رو یاد بگیرم؟ آیا نمیخواد دیگه نسخه ۱ رو یاد بگیرم؟!پاسخ : اینکه بخوایم بگیم مثلا ما باید نسخه ۴ رو فقط یاد بگیریم و یادگیری نسخه ۱ یا ۲ مهم نیست! کاملا اشتباه می باشد، ما باید از نسخه ۱ بلد باشیم تا هرچندتا نسخه که داشته باشد.ادامه پاسخ : خیلی میگن فقط میخوان CSS3 رو یاد بگیرند، خب واقعا چرا؟ پس CSS1 و CSS2 چی شد؟ خب در CSS3 فقط و فقط یه چنتایی (تعدادی) ویژگی جدید ارائه داده شده که ما باید اینارم بلد باشیم.ادامه پاسخ : یعنی باید در کنار CSS1 و CSS2 ما ویژگی هایی که درون CSS3 ارائه شده است را نیز بلد باشیم، پس بطور کلی CSS3 فقط یسری ویژگی جدید ارائه داده که بهتره اونارم بلد باشیم.ادامه پاسخ : یه تفاوت اساسی (نمیدونم شاید اسمش تفاوت نباشه) بین CSS1 تا CSS4 وجود داره! اینکه ببینیم آیا مرورگرها از ویژگی هایی که درون این نسخه ها ارائه شده است، پشتیبانی میکند یا خیر!ادامه پاسخ : یعنی الان مثلا برخی از مرورگرهای اینترنتی ( مثله فایرفاکس و کروم و.. ) از برخی از ویژگی های CSS3 یا CSS4 پشتیبانی نمی کنند یعنی هنوز براشون تعریف نشده چنین چیزی، در نتیجه به مرور زمان مرورگرها هم این مشکل رو رفع خواهند کرد.پس بطور کلی تفاوت اصلی بین نسخه های زبان CSS در ویژگی هایی ایست که در این نسخه ها ارائه می شوند، مثلا در نسخه ۱ ویژگی انتخابگر کلاس (یعنی اینکه بتونیم یک کلاس رو در CSS فراخوانی کنیم) ( class. ) ایجاد شد ولی نسخه ۴ ویژگی هایی اضافه شده اند که در حال حاضر (لحظه ای که این مطلب رو مینویسیم) هیچکدام از مرورگرهای اینترنتی از آنها پشتیبانی نمی کنند.چرا باید از CSS استفاده کنیم؟تا بتونیم نحوه نمایش یا چیدمان عناصر رو درون یک صفحه وب کنترل کنیم ، برای اینکه بتونیم به صفحات وبمون استایل بدهیم و آنها را از نظر ظاهر زیبا و جذاب کنیم.برای اینکه بتونیم قالب سایت طراح کنیم باید CSS را بلد باشیم و از آن استفاده نماییم، البته فقط CSS نه ، یعنی برای طراحی یک قالب ساده ما باید از HTML و CSS استفاده نماییم.گفتم قالب ساده، منظورم از ساده یعنی اینکه فقط بخوایم یک قالب رو از نظر ظاهری طراحی کنیم نیازه که از HTML و CSS استفاده نماییم ولی اگه بخوایم یکمی بهش امکانات بدیم و حرفه ای ترش کنیم میتونیم از JavaScript نیز استفاده نماییم.منبع: سایت آموزشی فری لرنبرای مشاهده آموزش های بیشتر لطفا به سایت مراجعه نمایید.

نحوه قرار دادن ویدئو در صفحات وب

سایت آموزشی فری لرن — Fri, 26 Jul 2019 11:30:17 +0430

سلام خدمت دوستان و همراهان محترم سایت آموزشی فری لرن ، لطفا در ادامه با آموزش نحوه قرار دادن ویدئو در صفحات وب با من همراه باشید.ویدئو در صفحات وبدر این بخش میخواهیم با فایل های تصویری و نحوه قرار دادن آنها در صفحات وب آشنا شویم. لطفا در ادامه با من همراه باشید.اگر در جریان باشید از بین فرمت های ویدئویی تنها فرمت های MP4 و WebM و Ogg توسط HTML5 پشتیبانی می شود، لذا فایل ویدئویی شما باید از این فرمت ها ایجاد شده باشد.در جدول زیر مشاهده خواهید نمود که چه مرورگرهایی از ۳ فرمت MP4 و WebM و Ogg پشتیبانی خواهند کرد.تنها فرمتی که توسط تمامی مرورگرها پشتیبانی می شود فرمت MP4 می باشد.جدول پشتیبانی مرورگرها از فرمت های ویدئوییهمانطور که در جدول مشاهده مینمایید تنها فرمت MP4 است که تمامی مرورگرها از آن بخوبی پشتیبانی می کنند لذا من هم پیشنهاد میکنم شما نیز از این فرمت ویدئویی برای ویدئوهایتان استفاده نمایید.جدول نوع رسانه ویدئویی در HTMLجدول نوع رسانه ویدئوییدر این وبسایت میتوانید نوع رسانه تمامی فایل های همچون تصویری / صوتی / متنی و.. را مشاهده نمایید.نحوه قرار دادن ویدئو در صفحات وبما در HTML5 به راحتی و با استفاده از تگ میتوانیم یک ویدئو را در یک صفحه ی وب قرار دهیم، که شکل کلی برای استفاده از این تگ را میتوانید بصورت زیر مشاهده نمایید. امتحان کنیدتنظیم اندازه عرض و ارتفاع ویدئوما با استفاده از صفات width و height درون تگ میتوانیم اندازه عرض و ارتفاع ویدئو را به دلخواه تنظیم نماییم. امتحان کنیدتنظیم پخش خودکار ویدئو در HTMLشاید شماهم تا به الان براتون پیش اومده باشه که وارد یک وبسایت می شوید و بطور خودکار و بدون اینکه متوجه شوید یک ویدئو برای شما پخش می شود، که البته اینکار زیاد به میل کاربران خوش نمیاد و اینکار میتونه باعث فرار کاربر از یک وبسایت شود.با استفاده از صفت autoplay در تگ ، میتوان کاری کرد که ویدئو بطور خودکار به محض بالا آمدن پخش شود.در مرورگرهای مدرن (آخرین نسخه های موزیلا فایرفاکس یا گوگل کروم) ممکن است از پخش خودکار صدا جلوگیری کنند، ولی خب شما میتونید خودتون تعیین کنید که آیا اجازه بده برای پخش خودکار یا خیر. (آموزش فعالسازی پخش خودکار در مرورگرها)قابلیت پخش خودکار یک ویدئو ممکن است بروی برخی از گوشی های موبایل کار نکند. امتحان کنیدتکرار پخش ویدئو در HTMLبا قرار دادن صفت loop درون تگ میتوان حالت تکرار پخش یک ویدئو را فعال کرد و در اینصورت به محض اتمام یک ویدئو ،دوباره همان ویدئو بطور خودکار پخش خواهد شد. امتحان کنیدقطع صدای ویدئو در HTMLبا قرار دادن صفت muted درون تگ میتوان بطور پیش فرض صدای ویدئو را قطع کرد، یعنی با کلیک بروی دکمه پخش هیچ صدایی از ویدئو پخش نخواهد شد و فقط تصویر پخش خواهد شد. امتحان کنیدنحوه اضافه کردن زیرنویس به ویدئو در HTMLحتما تا به الان ویدئوهایی را دیده اید که زیرنویس دارند، مثلا وقتی ما میخواهیم یک فیلم با زبان اصلی (خارجی) را مشاهده نماییم باید از زیرنویس با زبان فارسی استفاده نماییم. در HTML5 هم ما میتوانیم فایل زیرنویس به ویدئوهایمان اضافه نماییم تا کاربر بتواند بصورت آنلاین یک زیرنویس با زبان فارسی یا هر زبانی دیگر را مشاهده نماید.حال لطفا به مثال زیر توجه نمایید و همچنین بروی دکمه امتحان کنید برای مشاهده خروجی بصورت آنلاین کلیک نمایید.صفت src : محل فایل زیرنویس را مشخص میکند (یک فایل زیرنویس با فرمت (vtt.))صفت kind : برای فعال کردن فایل زیرنویسصفت srclang : برای مشخص کردن کد زبان فایل زیرنویس (اگر مقدار صفت kind برابر باشد با subtitles وجود این صفت ضروری می باشد)صفت label : برای ایجاد یک نام جهت نمایش در ویدئوی در حال پخشصفت default : اگر وجود داشته باشد فایل زیرنویس بطور خودکار با پخش ویدئو نمایش داده خواهد شدتوجه داشته باشید که فایل زیرنویس شما باید حتما از نوع vtt باشد نه srt یا دیگر فرمت ها.با استفاده از این وبسایت میتوانید یک زیرنویس که از نوع srt است را به یک زیرنویس از نوع vtt تبدیل نمایید.برای مشاهده کد زبان های کشورها لطفا اینجا کلیک نمایید. امتحان کنیدمنبع: سایت آموزشی فری لرن برای مشاهده آموزش های بیشتر و همچنین دانلود فایل PDF این آموزش لطفا به سایت مراجعه نمایید.

نحوه گذاشتن آهنگ در html

سایت آموزشی فری لرن — Mon, 27 May 2019 21:24:05 +0430

سلام خدمت تمامی دوستان ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش نحوه قرار دادن فایل های صوتی یا نحوه گذاشتن آهنگ ، صدا یا صوت در HTML با من همراه باشید. فایل های صوتی در HTML اگر در جریان باشید میدانید که قبل از اینکه HTML5 روی کار بیاید ما برای قرار دادن یک فایل صوتی یا تصویری باید از نرم افزارهای جانبی (افزونه یا پلاگین ها) همانند فلش استفاده میکردیم ولی امروزه با وجود HTML5 کاره ما دیگه خیلی خیلی راحت شده.دوستان محترم بهتر است بدانید که تنها ۳ فرمت MP3 و WAV و Ogg در HTML5 پشتیبانی می شوند، لذا شما برای قرار دادن یک آهنگ و.. درون یک صفحه وب باید فایل شما یکی از ۳ فرمت MP3 و WAV و Ogg را داشته باشد در غیراینصورت فایل شما برای کاربر پخش نخواهد شد.پشتیبانی مرورگرها از تگ در HTML5در جدول زیر میتوانید مشاهده نمایید که انواع مرورگرهای اینترنتی به ترتیب از فرمت های MP3 و WAV و Ogg پشتیبانی می کنند یا خیر. طبق جدول بالا همانطور که مشاهده مینمایید تنها فرمتی که توسط تمامی مرورگرها پشتیبانی می شود فرمت MP3 می باشد، لذا شما باید سعی کنید همیشه از فایل های صوتی با این فرمت استفاده نمایید. جدول نوع رسانه صوتی در HTML نحوه قرار دادن آهنگ در HTMLبرای قرار دادن فایل های صوتی در یک صفحه ی وب و بطور کلی در HTML ما باید از تگ استفاده نماییم، لطفا به شکل کلی این تگ در HTML توجه نمایید. امتحان کنید که با استفاده از صفت src ما باید آدرس دقیق فایل صوتی مان را مشخص نماییم و همچنین توسط صفت type باید مشخص شود که فایل صوتی ما از چه نوعی است (طبق جدول نوع رسانه صوتی در HTML). پخش خودکار صدا در HTML با استفاده از صفت autoplay درون تگ ، میتوان کاری کرد که صدا/آهنگ بطور خودکار به محض لود شدن صفحه پخش شود. امتحان کنید تکرار پخش صدا در HTMLبا قرار دادن صفت loop درون تگ میتوان حالت تکرار پخش یک آهنگ/صدا را فعال کرد و در اینصورت به محض اتمام آهنگ ،دوباره همان آهنگ بطور خودکار پخش خواهد شد. امتحان کنید قطع صدای فایل صوتی در HTMLبا قرار دادن صفت muted درون تگ میتوان بطور پیش فرض صدای آهنگ را قطع کرد، یعنی با کلیک بروی دکمه پخش هیچ صدایی از آهنگ پخش نخواهد شد بلکه باید بصورت دستی صدای آهنگ را تنظیم نمایید. امتحان کنید منبع: سایت آموزشی فری لرن برای مشاهده آموزش های بیشتر و همچنین دانلود فایل PDF این آموزش لطفا به سایت مراجعه نمایید.

آموزش فرم ها در HTML

سایت آموزشی فری لرن — Sun, 12 May 2019 18:55:10 +0430

سلام خدمت تمامی دوستان و همراهان محترم فری لرن ، لطفا در ادامه با آموزش فرم ها در HTML با من همراه باشید. فرم ها یا Forms در HTMLدوستان محترم این بخش میخواهیم با فرم ها و نحوه ی ایجاد آنها در یک صفحه ی وب HTML آشنا شویم و ان اشالله در بخش های بعدی ما با تگ هایی که میتوانیم در فرم ها استفاده نماییم نیز آشنا خواهیم شد.شاید تا به الان برای یکبار هم که شده شما یک فرم را از نزدیک دیده باشید و یا فرمی را تکمیل کرده باشید، خودمونی بخواهیم یک فرم را تعریف کنیم میگوییم به مجموعه ای از چندین فیلد (متنی ، انتخابی و..) در یک صفحه (کاغذ ، وب و..) که قرار است توسط یک شخص تکمیل شود را فرم میگوییم.که باز البته فرم ها میتونن نوع های مختلفی داشته باشند، مثلا یک فرم تماس با یک شخص، فرم ورود به یک سیستم و یا فرم ثبت نام در یک سیستم و دیگر مواردی که ممکن است تا به الان با آنها روبرو شده باشید.خب در صفحات اینترنتی هم فرم ها وجود دارند و ما میتونیم از آنها استفاده های بسیار زیادی را داشته باشیم، بفرض مثال یک فرم برای ثبت نام کاربران در وبسایت مان یا یک فرم برای ارسال پیام و دیگر مواردی که میتوانیم در یک صفحه ی وب از فرم ها استفاده نماییم.پس بطور کلی یک فرم برای جمع آوری اطلاعات از کاربران و همچنین ارسال این اطلاعات به پایگاه داده یک وبسایت می باشد، که امروزه تقریبا در هر وبسایتی یک فرم همانند فرم ورود یا ثبت نام وجود دارد. کار با فرم ها یا Forms در HTMLبطور کلی در HTML ما با استفاده از تگ مثال : برای مشاهده دستورات لطفا بروی دکمه امتحان کنید کلیک نمایید امتحان کنید صفت Action فرم ها در HTMLفرم ها در صفحات وب دارای یک صفت بنام action می باشند، که وظیفه این صفت ارسال اطلاعات وارد شده توسط کاربر به سرور سایت مورد نظر می باشد، یعنی کاربر اطلاعاتش را وارد میکند و سپس با زدن دکمه ثبت این اطلاعات به سرور و بطور کلی به پایگاه داده سایت مورد نظر ارسال می شود.برای مثال لطفا به فرم زیر توجه نمایید : امتحان کنید همانطور که مشاهده مینمایید با استفاده از صفت action در مثال بالا اطلاعات وارد شده توسط کاربر پس از کلیک بروی دکمه ثبت به یک صفحه بروی سرور بنام test.php ارسال می شوند. صفت Target در تگ امتحان کنید صفت Method فرم ها در HTMLاصلا صفت method چیست؟ وظیفه این صفت در فرم ها مشخص کننده نوع متد HTTP ارسالی (GET یا POST) در هنگام ارسال اطلاعات به سرور می باشد، که هر یک از نوع های بالا در ادامه با مثال مشاهده خواهید نمود.صفت method دو مقدار میتونه داشته باشه :GetPostمقدار Get در صفت method در فرم هااگر ما از مقدار Get درون صفت method استفاده نماییم، در هنگام ارسال اطلاعات به سرور، اطلاعات وارد شده توسط کاربر در نوار آدرس مرورگر قابل مشاهده می باشد. (لطفا به مثال زیر توجه نمایید) اگر اطلاعاتتان حساس می باشند لطفا از این متد استفاده نکنید. بصورت پیش فرض متد ارسالی یک فرم در HTML در حالت GET می باشد. حال لطفا به مثال زیر توجه نمایید و همچنین برای مشاهده خروجی بروی دکمه (امتحان کنید) کلیک نمایید. امتحان کنید مقدار Post در صفت method در فرم هابرخلاف Get در صورت استفاده از مقدار Post دیگه اطلاعات ارسالی در نوار آدرس مرورگر نمایش داده نخواهد شد و از نظر امنیتی نیز این روش برای ارسال اطلاعات پیشنهاد میشود.لطفا به مثال زیر توجه نمایید همچنین برای مشاهده خروجی بروی دکمه (امتحان کنید) کلیک نمایید. امتحان کنید چه موقع باید از مقادیر Get و Post استفاده نماییم؟گت یا Get : بصورت پیش فرض در فرم ها این مقدار قرار دارد، یعنی با کلیک بروی دکمه ارسال ، اطلاعات درون نوار آدرس مرورگر نمایش داده خواهد شد و همانطور که میدانید از لحاظ امنیتی استفاده از این مقدار پیشنهاد نمی شود.نکاتی درباره مقدار Get در صفت Method :داده های فرم درون نوار آدرس مرورگر نمایش داده می شوداندازه یا طول URL در این روش محدود می باشد (تقریبا تا ۳۰۰۰ کاراکتر)هرگز برای داده های محرمانه از این روش استفاده نکنیداگر داده هایتان حساس و محرمانه نیستند بهتر است از این روش استفاده نماییدپست یا Post : وقتی داده هایمان حساس و از نظر امنیتی مهم هستند ما باید از این روش استفاده نماییم چونکه در این روش دیگه داده های ما در نوار آدرس مرورگر نمایش داده نخواهند شد.نکاتی درباره مقدار Post در صفت Method :اندازه یا طول URL در این روش نامحدود می باشد (بی نهایت) منبع: سایت آموزشی فری لرن برای مشاهده آموزش های بیشتر و همچنین دانلود فایل PDF این آموزش لطفا به سایت مراجعه نمایید.

موجودیت ها یا Entities در HTML

سایت آموزشی فری لرن — Tue, 30 Apr 2019 19:57:41 +0430

سلام خدمت تمامی دوستان ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش موجودیت ها یا Entities در HTML با من همراه باشید. موجودیت ها یا Entities در HTMLموجودیت ها یا Entities در HTML به کاراکترهایی که بتوانند کاراکترهای ذخیره شده در HTML را نمایش دهند موجودیت یا Entitie گفته می شود.بهتر است بدانید برخی از کاراکترها هستند که متعلق به HTML می باشند، خب این یعنی چی! یعنی ما تعدادی کاراکتر داریم که زبان HTML از آنها برای وجود خودش استفاده میکنه و یجورایی میشه گفت HTML این کاراکترها رو در خودش ذخیره کرده.برای مثال این علامت (<)(بزرگتر) و این علامت (>) (کوچکتر) متعلق به HTML می باشد یعنی ما با استفاده از این دو علامت میتوانیم یک تگ را باز و بسته نماییم و بطور کلی دیگر مواردی که در زبان HTML از آن استفاده می شود.حال موجودیت ها باز خودشون یکسری کاراکتر هستند که ما با استفاده از آنها میتوانیم کاراکترهای ذخیره شده در زبان HTML را استخراج کنیم و در نهایت آنها را در خروجی به نمایش دربیاوریم. بفرض مثال من میخوام دستورات زیر را درون یک فایل HTML قرار دهم و دقیقا همین دستورات در خروجی هم نمایش داده شود؟!

Www.Free-Learn.Ir

همانطور که میدانید در حالت عادی چنین چیزی امکان نداره! ولی من میخوام دقیقا همین دستورات در خروجی نیز نمایش داده شوند یعنی میخوام در خروجی دقیقا دستور زیر یعنی

Www.Free-Learn.Ir

نمایش داده شود! اونوقت باید چکار کرد؟ اینجاست که ما باید از موجودیت ها یا Entities استفاده نماییم. حال میخواهیم با استفاده از موجودیت ها، دستورات بالا را که مشاهده نمودید در خروجی دقیقا به همان صورت به نمایش دربیاوریم.<p> Www.Free-Learn.Ir </p> امتحان کنید اگر خروجی را مشاهده نمایید میبینید که در خروجی دقیقا دستوراتی را که میخواستیم به ما نمایش داده شود نمایش داده شده است چرا که ما با استفاده از موجودیت ها تونستیم از کاراکترهایی که متعلق به HTML است استفاده نماییم. کار با موجودیت ها یا Entities در HTMLبرای استفاده از موجودیت ها در HTML ما میتونیم از ۲ روش زیر استفاده نماییم :استفاده از نام موجودیتاستفاده از کد موجودیتشکل کلی یک موجودیت در HTML بصورت زیر می باشد، یعنی ما باید از طریق شکل زیر از موجودیت ها استفاده نماییم :&entity_name;OR&#entity_number; اولی entity_name یا همون نام موجودیت و دومی entity_number یا همون شماره یا کد موجودیت می باشد. نحوه استفاده از نام یک موجودیت در HTMLبرای استفاده از نام یک موجودیت ما باید اول یک علامت ( & ) گذاشته سپس نام موجودیت را نوشته و در نهایت علامت ( ; ) را بگذاریم. پس به راحتی ما میتوانیم از موجودیت ها در HTML استفاده نماییم.

امتحان کنید نحوه استفاده از کد یک موجودیت در HTMLبرای استفاده از کد یا شماره یک موجودیت ما باید اول علامت ( & ) را گذاشته سپس یک علامت ( # ) سپس کد یا شماره موجودیت را نوشته و در نهایت علامت ( ; ) را بگذاریم. پس به راحتی ما میتوانیم از موجودیت ها در HTML استفاده نماییم.

امتحان کنید حال اگر لطف بفرمایید و خروجی هر دو مثال بالا را مشاهده نمایید، میبینید که خروجی هر ۲ مثال بالا یکی است، چون در مثال اول از نام موجودیت استفاده کردیم و در مثال دوم از کد یا شماره موجودیت، پس هر ۲ خروجی باید یکی باشند. نحوه ایجاد فاصله بین حروف در HTMLنمیدونم تا به الان براتون پیش اومده یا نه ولی بطور کلی اینو بدونید که در زبان HTML فقط و فقط یک خط فاصله در بین حروف و کلمات محاسبه می شود ، یعنی اگر شما ۱۰۰ فاصله در بین کلماتتون بندازید در خروجی فقط و فقط یک فاصله عمل میکند و نمایش داده می شود.اینجاست که ما میتونیم با استفاده از موجودیت ;nbsp& به راحتی و به دلخواه هر چقدر که فاصله بخواهیم در بین حروف و کلمات ایجاد نماییم و به همان اندازه نیز در خروجی نمایش داده شود.

Salam Man Sadegh Hastam.

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

آموزش تگ head در HTML

سایت آموزشی فری لرن — Sun, 07 Apr 2019 15:59:29 +0430

سلام خدمت تمامی دوستان و همراهان محترم ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ head در HTML با من همراه باشید. تگ Head در HTMLهد یا Head یا سَر یکی از مهمترین و اساسی ترین بخش یک صفحه ی وب و یا بطور کلی یک صفحه ی HTML می باشد، بطور کلی میتونیم بگیم که Head یک صفحه ی وب مغز آن صفحه می باشد.که در این Head یا سَر یکسری اطلاعات مربوط به صفحه ی وبمان قرار میگیرد، مثلا عنوان صفحه ما برای نمایش در مرورگرها در قسمت هِد قرار میگیرد.یا مثلا برای اضافه کردن دستورات CSS به یک صفحه ی وب ما باید دستورات CSS رو در قسمت هِد یا Head یک صفحه ی وب قرار دهیم و دیگر مواردی که در ادامه با آنها آشنا خواهید شد.همچنین متاداده ها یا metadata نیز در قسمت Head یک صفحه ی وب قرار میگیرند، متاداده ها در HTML در واقع اطلاعاتی را در مورد یک صفحه وب به مرورگرها و موتورهای جستجوگر ارائه می دهند.عنصر یا تگ در یک صفحه ی وب بعد از تگ و قبل از تگ قرار میگیرد، لطفا به دستورات زیر و محل قرار گیری عنصر یا تگ در یک صفحه ی وب توجه نمایید. اگر میخواهید یک محتوا،متن،تصویر و.. در مرورگرها نمایش داده شود باید آن را در قسمت body یک صفحه ی وب وارد کرد نه قسمت هِد یا Head. ---(head in here)---

Www.Free-Learn.Ir

کار با تگ Head در HTMLهمونطور که کمی بالاتر ذکر کردم، ما نباید هیچوقت یک محتوا مثلا متن یا تصویر یا جدول یا هرچیز دیگه ای رو برای نمایش در مرورگرها در قسمت Head یک صفحه ی وب قرار دهیم.چون که همیشه این رو بدونید در قسمت هِد یا Head یک صفحه ی وب فقط مواردی قرار میگیرند که اطلاعاتی یا یکسری ویژگی هایی رو به صفحه ی وب ما اضافه میکنند.تگ ها یا عناصری که میتوانند یکسری اطلاعات و امکانات رو به یک صفحه ی وب اضافه کنند موارد زیر می باشند :نحوه استفاده از تگ در HTMLعنصر یا تگ <title> یکی از مهمترین تگ های HTML و بطور کلی یکی از تگ های اصلی در یک صفحه وب می باشد که هیچوقت نباید آنرا فراموش کرد چون وجود این تگ در یک صفحه ی وب ضروری می باشد.این تگ از تگ های مورد نیاز و ضروری در یک صفحه وب می باشد، که با استفاده از این تگ میتوانیم یک عنوان را برای صفحه وبمان در مرورگرها و موتورهای جستجوگر مشخص نماییم.نحوه استفاده از این تگ را در یک صفحه ی وب، میتوانید مشاهده نمایید :<head><title> My Title In Here نحوه استفاده از تگ امتحان کنید نحوه استفاده از تگ در HTMLکمی بالاتر ما با استفاده از تگ امتحان کنید ویژگی padding در جدول هابا استفاده از ویژگی padding میتونیم یک فضای مشخصی را بین محتویات و سلول ها ایجاد نماییم. امتحان کنید ویژگی text-align در جدول هابا استفاده از ویژگی text-align میتونیم تراز یا محل قرار گیری محتویات سلول های جدول را مشخص نماییم. امتحان کنید صفت colspan در جدول هاما با استفاده از صفت colspan میتونیم اندازه یک ستون از جدول را به تعداد هرچند ستون که بخواهیم تنظیم نماییم.

امتحان کنید صفت rowspan در جدول هابا استفاده از صفت rowspan میتونیم اندازه یک سطر از جدول را به تعداد هرچند سطر که بخواهیم تنظیم نماییم.

امتحان کنید منبع: سایت آموزشی فری لرن برای مشاهده آموزش های بیشتر و همچنین دانلود فایل PDF این آموزش لطفا به سایت مراجعه نمایید.

لینک ها در html

سایت آموزشی فری لرن — Sat, 23 Feb 2019 15:50:58 +0330

سلام خدمت دوستان محترم ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با لینک ها یا Links در HTML با من همراه باشید. کار با لینک ها یا Links در HTMLلینک یا پیوند یا hyperlink در HTML به متن یا عنصری گفته می شود که قابلیت کلیک شدن و انتقال کاربر از مکانی به مکانی دیگر در یک صفحه وب و بطور کلی در دنیای اینترنت را داشته باشد.امروزه لینک ها یا Links یکی از عوامل بسیار مهم در صفحات وب یا سایت های اینترنتی می باشد، به گونه ای که در حال حاضر در هر وبسایت بیش از ده ها و صدها لینک وجود دارد که میتوانند کاربر را به بخش های مختلف یک وبسایت انتقال دهند. نه فقط یک متن بلکه هر عنصر دیگری همانند تصاویر و.. در HTML میتواند یک لینک باشد. لینک ها یا Links در HTMLبرای ایجاد یک لینک در HTML ما باید از تگ استفاده نماییم، شکل کلی برای ایجاد یک لینک در HTML بصورت زیر می باشد :Text In Here در دستور بالا کافیست در صفت href بجای url آدرس مقصد را نوشته و بجای متن Text In Here نیز یک متن دلخواه برای اینکه به کاربر نمایش داده شود و کاربر بتواند بروی آن کلیک نماید.حال لطفا به مثال زیر توجه نمایید :Click Konid امتحان کنید حال لطف بفرمایید و بروی دکمه (امتحان کنید) کلیک نمایید و خروجی مثال بالا را بصورت آنلاین مشاهده نمایید. صفت هدف یا Target در لینک هاما با استفاده از صفت target در تگ میتوانیم مشخص نماییم که مقصد ما در چه حالتی نمایش داده شود، مثلا با کلیک بروی یک لینک، مقصد در یک صفحه یا تب جدید نمایش داده شود یا دیگر مواردی که در ادامه با آنها آشنا خواهید شد. بصورت پیش فرض در HTML مقصد تمامی لینک ها در حالت self_ می باشد. صفت Target میتواند یکی از مقادیر زیر را بپذیرد :_blank مقصد در تب جدید باز میشود_self مقصد در همان صفحه جاری باز میشود_parent در فریم یا قاب والد یا پدر باز میشود_top بروی تمامی قاب های موجود در یک صفحه باز میشود حال لطفا به مثال زیر توجه نمایید : click konid click konid امتحان کنید نحوه ساخت تصاویر لینک دار در HTMLتا به الان همانطور که مشاهده نمودید ما به راحتی با استفاده از تگ توانستیم یک لینک را با یک متن که کاربر بتواند بروی آن کلیک کند را ایجاد نماییم، حال میخواهیم یاد بگیریم که چگونه میتوان یک تصویر لینک دار یا تصویری که کاربر بتونه با کلیک بروی آن به مکانی دیگر منتقل شود را ایجاد کرد.برای ایجاد یک تصویر لینک دار یا تصویری که بتوان با کلیک بروی آن به مکانی دیگر منتقل شویم باید از تگ درون تگ استفاده نماییم. لطفا به مثال زیر توجه نمایید. امتحان کنید منبع: سایت آموزشی فری لرن برای مشاهده آموزش های بیشتر و همچنین دانلود فایل PDF این آموزش لطفا به سایت مراجعه نمایید.

کار با رنگ ها در HTML

سایت آموزشی فری لرن — Fri, 22 Feb 2019 10:36:02 +0330

سلام خدمت دوستان ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با رنگ ها یا Colors در HTML با من همراه باشید. کار با رنگ ها در HTML کار با رنگ ها یا Colors در HTMLدر این بخش میخواهیم با نحوه استفاده از رنگ ها یا به انگلیسی Colors در HTML و اینکه از چه روش هایی میتوانیم از رنگ ها در HTML استفاده نماییم،آشنا شویم. لطفا در ادامه با من همراه باشید.ما از چندین روش میتونیم از رنگ ها در HTML و یا CSS استفاده نمایم که این روش هارو در ادامه مشاهده خواهید نمود :استفاده از نام رنگ | Color Nameاستفاده از کد هگزادسیمال رنگ | HEXاستفاده از مقدار RGB رنگ | RGB Value نام رنگ یا Color Nameدر این روش همونطور که از اسمش هم پیداست ما باید از نام رنگ استفاده نماییم، مثلا اگر بخواهیم از رنگ قرمز و آبی استفاده نماییم باید نام این دو رنگ را بصورت red و blue وارد نماییم.

Man Sadegh Hastam

امتحان کنید مقدار هگزادسیمال رنگ یا HEX Valueدر روش قبلی همانطور که مشاهده نمودید ما باید از نام رنگ ها استفاده میکردیم ولی در این روش ما دیگه لازم نیست از نام رنگ استفاده نماییم بلکه ما میتونیم از یک مقدار هگزادسیمال استفاده نماییم.شکل کلی یک مقدار هگزادسیمال بصورت زیر می باشد :#rrggbb همانطور که مشاهده مینمایید این کد از ۶ مقدار تشکیل می شود، اول از هرچیز باید یک علامت شارپ یا # گذاشته سپس : rr یعنی محدوده رنگ (قرمز) – gg یعنی محدوده رنگ (سبز) و bb یعنی محدوده رنگ (آبی) که هر از این مقدارها میتوانند از ۰۰ تا FF باشند.

Salam Khobi

امتحان کنید مقدار RGB رنگ یا RGB Valueبرای استفاده از این روش ما باید طبق شکل کلی یا فرمول زیر استفاده نماییم. لطفا به شکل کلی یک مقدار RGB توجه نمایید.rgb(red,green,blue) همانطور که مشاهده مینمایید این مقدار از ۳ بخش تشکیل می شود: red (محدوده رنگ قرمز) – green (محدوده رنگ سبز) و blue (محدوده رنگ آبی) که هر کدام از این بخش ها میتوانند از ۰ تا ۲۵۵ مقدار بگیرند.

Salam Khobi

آموزش استفاده از CSS در HTML

سایت آموزشی فری لرن — Wed, 20 Feb 2019 18:50:43 +0330

سلام خدمت تمامی دوستان ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش نحوه استفاده از CSS در HTML با من همراه باشید. آموزش استفاده از CSS در HTML نحوه استفاده از CSS در HTMLسی اس اس یا CSS که مخفف Cascading Style Sheets می باشد، یکی دیگر از هسته های اصلی در طراحی وب یا یک فناوری بسیار جذاب می باشد که ما از طریق اون میتونیم به صفحات وبمون استایل یا شکل و شمایل جذاب و متفاوتی را بدهیم.ما با استفاده از CSS میتونیم نحوه نمایش یا شکل نمایش عناصر (تگ ها) را در یک صفحه ی وب مشخص نماییم، بطور کلی میشه گفت فایل CSS هر سایتی یعنی قلب اون سایت که به تمامی بخشهای اون سایت از نظر استایل داره نفس برای زنده بودن میده و اگر کوچکترین مشکلی برای این فایل به وجود بیاید کل استایل و شکل شمایل اون سایت بهم خواهد ریخت. بطور کلی ما از ۳ روش میتونیم از CSS در HTML استفاده نماییم : استایل خطی یا Inlineاستایل داخلی یا Internalاستایل خارجی یا External استایل خطی یا Inline Css در HTMLاینلاین یا درون خطی یا Inline یکی از روش های اضافه کردن CSS به عناصر موجود در HTML می باشد، که در این روش ما باید از صفت Style درون هر یک از عناصر HTML که میخواهیم براش استایل تعریف نماییم، استفاده نماییم. آموزش کار با صفت Style بصورت جداگانه در بخش های قبلی از آموزش HTML ارئه شده است که در صورت تمایل میتوانید آن بخش را نیز مشاهده نمایید. لطفا به مثال زیر برای نحوه استفاده از سی اس اس بصورت خطی توجه نمایید :

Salam Khobi?

Man Sadegh

Hastam

امتحان کنید استایل داخلی یا Internal Css در HTMLهمونطور که از اسم این روش مشخصه ما میتونیم دستورات CSS رو درون یک فایل HTML قرار دهیم که بهش میگیم اینترنال یا Internal ، شکل کلی برای استفاده از این روش بصورت زیر می باشد. دوستان محترم نکته ای که در این روش باید بهش توجه کرد این است که با استفاده از این روش فقط میتوان برای یک صفحه استایل نوشت. در این روش ما باید از تگ امتحان کنید استایل خارجی یا External Css در HTMLاکسترنال یا خارجی یا External یکی دیگر از روش های استفاده از CSS در HTML می باشد، این روش یکی از بهینه ترین روشهای استفاده از دستورات CSS در HTML می باشد.امروزه تقریبا میشه گفت اکثر وبسایت های موجود در اینترنت دارای یک فایل CSS از نوع اکسترنال می باشند، این یعنی تمامی دستورات CSS یک سایت درون یک فایل بصورت مجزا نوشته می شود سپس به راحتی و با استفاده از یک خط دستور فایل CSS به فایل HTML متصل می شود. برای داشتن وبسایتی سریعتر و بهینه تر، تا جایی که میتوانید سعی کنید از روش های درون خطی (Inline) و داخلی (Internal) استفاده نکنید. پس همونطور که گفتم دستورات CSS ما باید در یک فایل مجزا نوشته شوند سپس به فایل HTML متصل شود، اصلا نگران نباشید چون در ادامه میخواهیم یاد بگیریم چگونه بدون خرج و هزینه یک فایل CSS ایجاد نماییم.همونطور که میدانید نرم افزارهای بسیار زیاد و حرفه ای برای ایجاد فایل هایی همچون HTML,CSS و .. وجود دارد، ولی ما قرار نیست از این نرم افزارها استفاده نماییم بلکه میخواهیم از نرم افزار NotePad موجود در ویندوز استفاده نماییم.پس لطفا نرم افزار NotePad را اجرا نمایید و سپس دستورات CSS زیر را در این نرم افزار وارد نمایید :body { background-color:orange; }h2 { color:blue; } حال باید فایل مون رو ذخیره نماییم، لطفا از منوی نرم افزار بروی گزینه File کلیک نمایید سپس بروی گزینه Save as کلیک نمایید و در نهایت همانند تصویر زیر محل ذخیره فایل + نام فایل بهمراه پسوند (css.) را وارد نمایید و سپس برای ذخیره فایل مورد نظر بروی گزینه Save کلیک نمایید. خب فایل CSS ما بصورت مجزا ایجاد شد، به همین راحتی شما میتوانید فایل های CSS تان را ایجاد نمایید، حال باید این فایل رو با استفاده از یک دستور در HTML به فایل HTML مان متصل نماییم. فراخوانی CSS در HTMLخب دوستان ما فایل CSS خارجی مون رو هم ایجاد کردیم و الان یک فایل CSS بصورت مجزا یا خارجی داریم، حال برای اتصال فایل CSS که بصورت مجزا ایجاد شده است باید از دستور در بخش هد یک صفحه HTML استفاده نماییم. توجه داشته باشید که در قسمت href باید آدرس محل فایل CSS را بصورت کامل و دقیق وارد نمایید، لطفا به مثال زیر توجه نمایید. امتحان کنید حال لطفا بروی دکمه « امتحان کنید » کلیک نمایید تا خروجی را مشاهده نمایید، همانطور که مشاهده مینمایید فایل CSS ای که بصورت مجزا ایجاد کرده بودیم را با موفقیت به فایل HTML مون متصل کردیم. منبع: سایت آموزشی فری لرن برای مشاهده آموزش های بیشتر و همچنین دانلود فایل PDF این آموزش لطفا به سایت مراجعه نمایید.

قالب بندی متن ها در HTML

سایت آموزشی فری لرن — Tue, 19 Feb 2019 19:40:24 +0330

سلام خدمت تمامی دوستان ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش قالب بندی متن ها یا Text Formatting در HTML با من همراه باشید. قالب بندی متن ها یا Text Formatting در HTMLاگر وبسایت آموزشی فری لرن رو در بخش های قبلی از آموزش HTML ، دنبال کرده باشید میدانید که در حالت عادی و بصورت پیش فرض در HTML ما نمیتوانیم یک متن را به دلخواه و با قالب بندی دلخواه وارد نماییم.بفرض مثال ما نمیتونیم هر کجا که دلمون خواست یه اینتر (Enter) بزنیم و متن رو در سطر بعدی بنویسیم، بلکه باید هر نوع قالب بندی یا متن سفارشی و.. را تحت یکسری تگ یا عنصر در HTML وارد نماییم تا بتوانیم نتیجه درستی را در خروجی داشته باشیم.بفرض مثال ممکن است بخواهید در متن تان یک کلمه را بولد یا برجسته یا bold کنید و یا مثلا بخواهید یک کلمه را شکسته یا ایتالیک یا italic کنید، یا بخواهید یک کلمه را خط بزنید و دیگر مواردی که در ادامه ی این بخش میخواهیم با آنها آشنا شویم.یا شاید بخواهید در یک پاراگراف یک سطر را شکسته و به سطر جدید بروید ؟ خب بنظره شما باید چکار کرد؟ وقتی ما اینتر (Enter) بزنیم در درون اون نرم افزاری که داریم دستورات رو مینویسیم اره اینتر میخوره و میره سطر بعد ولی آیا در خروجی هم همینطوره؟ جواب خیر است.یا شاید بخواهید یک تکه شعر و یا مثلا یه تکه متن به دلخواه خودتون با قالب بندی سفارشی رو در یک صفحه ی وب HTML قرار دهید؟ خب اینبار باید چکار کرد بنظره شما؟ آیا بنظره شما خیلی راحت میتونیم متن یا شعر با قالب بندی سفارشی مون رو وارد نماییم و در خروجی هم نمایش داده شود! جواب بازم خیر است. خب دیگه اینجاست که ما باید از یکسری تگ که مخصوص قالب بندی متن ها می باشند استفاده نماییم، مثلا برای اینکه بتونیم یک سطر رو بشکینم و به سطر جدید برویم باید از تگ
استفاده کرد و دیگر مواردی که در ادامه با آنها آشنا خواهید شد. Breaks Line – برای شکستن سطر و رفتن به سطر جدیدPre – برای ایجاد متن،شعر و.. با قالب بندی دلخواهBold Text – یک متن بولد یا برجستهInserted Text – یک متن زیر خط دارDeleted Text – یک متن خط خوردهMarked Text – یک متن هایلایت شده ما در HTML با استفاده از تگ
میتونیم به راحتی یک سطر رو شکسته و به سطر جدید برویم. به همین راحتی !

Salam Khobi? Man
Sadegh Hastam.
Modir Website
Free-Learn.Ir

امتحان کنید در زبان HTML ما با استفاده از تگ

به راحتی میتونیم هرنوع قالب بندی متنی سفارشی و.. داشته باشیم رو در یک صفحه ی وب قرار دهیم.برای مثال لطفا به دستورات زیر توجه نمایید و همچنین برای مشاهده خروجی دستورات زیر بصورت آنلاین بروی دکمه (امتحان کنید) کلیک نمایید.سلام خوبی؟ من صادق هستم------ ++ -------اینجا هر چی دلم بخواد میتونم وارد کنم
امتحان کنید در HTML ما میتوانیم با استفاده از تگ یک متن بولد شده را ایجاد نماییم. Salam Khobi? Man Sadegh Hastam. امتحان کنید در HTML ما میتوانیم با استفاده از تگ یک خط را به زیر یک متن بکشیم یا یک متن زیر خط دار ایجاد نماییم. Salam Khobi? Man Sadegh Hastam. امتحان کنید در HTML ما میتوانیم با استفاده از تگ یک متن را خط بزنیم. Salam Khobi? Man Sadegh Hastam. امتحان کنید حتما تا حالا دیده اید که یک متن را بصورت هایلایت یا مارک شده قرار میدهند، در HTML ما میتوانیم با استفاده از تگ یک متن را بصورت هایلایت نمایش دهیم. Salam Khobi? Man Sadegh Hastam. امتحان کنید منبع: سایت آموزشی فری لرن برای مشاهده آموزش های بیشتر و همچنین دانلود فایل PDF این آموزش لطفا به سایت مراجعه نمایید.

تگ های هدینگ یا تیتر h1-h6 در HTML

سایت آموزشی فری لرن — Mon, 18 Feb 2019 12:02:16 +0330
سلام دوستان ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ های هدینگ یا تیتر h1-h6 در HTML با من همراه باشید. تگ های تیتر یا Heading در HTMLعناوین یا تیترها یا به انگلیسی Headings از مهمترین تگ ها در یک صفحه ی HTML می باشد، در واقع میشه گفت مهمترین بخش یک صفحه ی HTML یا یک صفحه ی وب همین تگ های تیتر می باشد. حتما تا حالا دیده اید و یا شنیده اید، مثلا در یک مجله یا روزنامه میگن فلان خبر رو تیتر ۱ زدن یا مثلا فلانی تیتر ۱ روزنامه فلان می باشد، خب این یعنی همین! وقتی میگن فلان خبر تیتر ۱ روزنامه است یعنی این خبر از مهمترین و جذاب ترین و با ارزش ترین خبرهاست.تیترها یا عناوین در HTML به همین صورت است، بطور کلی در تمامی وبسایت های موجود در اینترنت از این تگ ها استفاده می شود، تیترها در HTML از طریق تگ های H1 تا H6 مشخص می شوند، تگ H1 دارای بیشترین ارزش مکانی و در مقابل تگ H6 دارای کمترین ارزش مکانی در یک صفحه ی وب HTML می باشد.در واقع میشه گفت متنی که در تگ H1 قرار میگیرد یعنی خیلی مهم و دارای بیشترین ارزش می باشد و همینطور که به این عدد (H2,H3,H4,H5,H6) اضافه شود از ارزش آن متن در یک صفحه وب کاسته می شود. بطور کلی در HTML ما ۶ نوع تیتر یا عنوان یا Heading میتونیم داشته باشیم که در دستورات زیر میتوانید آنها را مشاهده نمایید :
Free-Learn
Free-Learn
Free-Learn
Free-Learn
Free-Learn
Free-Learn
امتحان کنید لطفا برای مشاهده خروجی دستورات بالا بصورت آنلاین بروی دکمه امتحان کنید کلیک نمایید.تگ های تیتر یا Heading در HTML مهم هستند وجود تگ های تیتر یا عناوین در یک صفحه ی وب خیلی خیلی مهم هستند، در واقع تمامی موتورهای جستجوگر از طریق همین تگ های تیتر هستند که به محتوا یا بطور کلی به یک وبسایت دسترسی پیدا میکنند.معمولا و [باید] عنوان یک نوشته یا مطلب در تمامی وبسایت های موجود در اینترنت از طریق تگ H1 ایجاد شده باشد، چرا؟ چون همونطور که گفتم تگ H1 یعنی بیشترین ارزش محتوایی یک متن در یک صفحه.وقتی یک متن درون تگ H1 نوشته می شود این یعنی اینکه ای موتور جستجوگر و ای گوگل و دیگر موتورهای جستجوگر بدانید که این مطلب با این عنوان برای من اولویت اول و بطور کل بیشترین ارزش رو در صفحه ی وبسایتم داره پس شما باید تمام توجهتون به این عنوان باشه.و همینطور به ترتیب هرچقدر عدد این تگ افزایش داده بشه (H2,H3,H4,H5,H6) یعنی اینکه از ارزش و اولویت اون متن درون یک صفحه کاسته می شود، که موتورهای جستجوگر نیز به ترتیب بعد از تگ H1 به تگ H2 توجه میکنند و سپس به تگ H3 و تا تگ H6 . چگونه باید از تگ های H1 تا H6 در یک صفحه ی وب استفاده کنم؟همونطور که گفتم ما باید عنوان نوشته هامون رو درون تگ H1 قرار بدهیم که این خودش یعنی متنی که درون تگ H1 قرار گرفته است اولویت اول و بیشترین ارزش محتوایی رو در یک صفحه ی وب دارد.بعد از تگ H1 ما باید از تگ H2 استفاده کنیم، که یعنی ای موتور جستجوگر بدان که بعد از عنوان H1 ، عنوان H2 برای من دارای ارزش محتوایی است پس بهش توجه کن.و به همین ترتیب ما میتونیم از دیگر تگ های تیتر استفاده کنیم، یعنی بعد از تگ H2 از تگ H3 و H4 و H5 و H6 استفاده نماییم ، فقط نکته ای که هست اینه هرچقدر عدد H بیشتر بشه ارزش محتوایی اون عنوان درون یک صفحه کمتر و کمتر میشه. آیا محدودیتی در استفاده از تگ های تیتر وجود دارد؟بله محدودیت وجود دارد ولی فقط برای تگ H1 ، شما همیشه باید فقط از یک تگ H1 درون یک صفحه استفاده کنید، یعنی شما اگر از دو تا تگ H1 درون یک صفحه استفاده کردید اینکار از نظر گوگل اصلا خوشایند نیست و ممکنه برای شما و سایتتون گرون تموم بشه.ولی محدودیتی برای استفاده از تگ های H2 تا H6 وجود ندارد، یعنی شما میتونید بفرض مثال در یک صفحه از ۴ تگ H2 و ۳ تگ H3 و ۴ تگ H4 و یا اصلا از تگ های H5 و H6 استفاده نکنید.ولی این نکته رو باید توجه داشته باشید که زیاده روی از تگ های تیتر H2 تا H6 در یک صفحه به هیچ وجه خوب نیست و نباید زیاده روی کنید. بفرض مثال کل متن شما در یک صفحه ۲۰۰ کلمه هست بعد اومدید و از ۵ تگ H2 استفاده کرده اید که این تعداد نسبت به تعداد کلمات متن شما زیاده روی محسوب می شود.پس همیشه سعی کنید به نسبت متن موجود خود ، از تگ های تیتر استفاده نمایید تا اینکار از نظر سئو و بطور کلی از نظر موتورهای جستجوگر همچون گوگل مورد پسند باشه. چگونه باید دید عنوان یک مطلب در چه تگی قرار دارد ؟!خب ما این همه گفتیم عنوان مطالب در یک سایت باید در تگ H1 قرار داشته باشه و اگه نباشه این یعنی اون سایت اصلا معتبر و بهینه نیست حالا چه از نظر طراحی و چه سئو و…خب میخوایم ببینیم چجوری میشه که بتونیم ببینیم عنوان یک مطلب در چه تگی , مثلا تگ H1 یا H2 یا غیره قرار دارد!خب برای اینکار روی عنوان مطلب مورد نظرتون کلیک راست نمایید سپس بروی گزینه ی Inspect Element (در مرورگر فایرفاکس) و یا Inspect (در مرورگر کروم) کلیک نمایید.برای مثال من روی عنوان همین مطلبی که شما در حال مطالعه اش هستید کلیک راست میکنم. (شما میتونید در هر سایتی هر وبلاگی و.. دوست داشتید روی عنوان مطلبش اینکارو انجام بدید) بعدش یک پنجره کوچک در پایین مرورگر (فایرفاکس) باز میشه , که خیلی راحت در اونجا میتونید مشاهده نمایید که اون مطلب یا متنی که روش کلیک راست کردید در چه تگی قرار دارد. و همانطور که مشاهده مینمایید عنوان این مطلبی که در حال مطالعه آن هستید در تگ H1 قرار دارد. منبع: سایت آموزشی فری لرن برای مشاهده آموزش های بیشتر و همچنین دانلود فایل PDF این آموزش لطفا به سایت مراجعه نمایید.