آموزش طراحی سایت|دوره آموزش طراحی وب|آموزش HTML|

سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل آموزش HTML را شروع کردیم , در قسمت پنجم با ادامه آموزش HTML همراه باشید:

آموزش Meta Tag در HTML

در این قسمت از آموزش HTML می خواهیم به Meta Tag در HTML و نحوه استفاده از آن در صفحات وب اشاره کنیم.
HTML علاوه بر مشخص کردن اطلاعات مهم به روش های مختلف در مورد یک داکیومنت، به شما اجازه می دهد تا متادیتا را نیز مشخص کنید. عناصر META می توانند برای وارد کردن جفت مقدار/نام استفاده شوند، این جفت ویژگی های داکیومنت HTML مانند نویسنده، تاریخ اتمام، لیست کلمات کلیدی، داکیومنت نویسنده و غیره را ارائه میدهد.
برچسب < meta> برای ارائه ی چنین اطلاعات اضافه ای استفاده می شود. این برچسب یک عنصر خالیست و دارای برچسب بستن نیست اما اطلاعاتی را با ویژگی آن در خود دارد. شما می توانید بر اساس اطلاعاتی که می خواهید در داکیومنت خود نگهداری کنید، یک برچسب یا بیشتر از یک برچسب متا وارد داکیومنت خود کنید. اما به طور کل برچسب های متا وضعیت ظاهری داکیومنت را تحت تاثیر قرار نمی دهند، بنابراین از لحاظ ظاهری استفاده کردن یا نکردن از آنها مشخص نمی شود.

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

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

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

مشخص کردن کلمات کلیدی

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

مثال:

در این مثال برچسب های متا، متادیتا و HTML را با عنوان کلمات کلیدی در مورد داکیومنت وارد می کنیم.

< title >Meta Tags Example< /title >

< meta name="keywords" content="HTML, Meta Tags, Metadata" >

توصیف داکیومنت

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

مثال:

< meta name="keywords" content="HTML, Meta Tags, Metadata" / >

< meta name="description" content="Learning about Meta Tags." / >

بازبینی تاریخ داکیومنت

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

مثال:

< meta name="keywords" content="HTML, Meta Tags, Metadata" / >

< meta name="description" content="Learning about Meta Tags." / >

< meta name="revised" content="Tutorialspoint, 3/7/2014" / >

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

تازه سازی داکیومنت:

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

مثال:

اگر می خواهید صفحه ی وب شما پس از هر 5 ثانیه ریفرش شود، از ترکیب زیر استفاده کنید:

< meta name="keywords" content="HTML, Meta Tags, Metadata" / >

< meta name="description" content="Learning about Meta Tags." / >

< meta name="revised" content="Tutorialspoint, 3/7/2014" / >

< meta http-equiv="refresh" content="5" / >

ریدایرکت Redirect کردن صفحه

می توانید از برچسب برای Redirect کردن صفحه ی خود استفاده کنید، همچنین می توانید دوره ای را مشخص کنید که پس از آن صفحه به طور خودکار Redirect شود.

مثال:

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

< meta name="keywords" content="HTML, Meta Tags, Metadata" / >

< meta name="description" content="Learning about Meta Tags." / >

< meta name="revised" content="Tutorialspoint, 3/7/2014" / >

< meta http-equiv="refresh" content="5" url=http://www.tutorialspoint.com" / >

تنظیم cookies

کوکی Cookies داده هایی هستند که در یک فایل کوچک متن روی کامپیوتر شما ذخیره شده اند و بین مرورگر وب و سرور وب ردو بدل می شود تا مسیر اطلاعات مختلف را براساس نیاز برنامه ی وب شما حفظ کنند.
شما می توانید از برچسب برای ذخیره ی cookies در بخش کاربری استفاده کنید و پس از آن این اطلاعات می توانند توسط سرور وب استفاده شوند تا بازدیدکننده ی سایت را پیگیری کنند.

< meta name="keywords" content="HTML, Meta Tags, Metadata" / >

< meta name="description" content="Learning about Meta Tags." / >

< meta name="revised" content="Tutorialspoint, 3/7/2014" / >

< meta http-equiv="cookie" content="userid=xyz; expires=Wednesday, 08-Aug-15 23:59:59 GMT;" / >

اگر تاریخ و زمان انقضا را مشخص نکرده اید، cookie یک session cookie می باشد و وقتی که یوزر از مرورگر خارج شود، پاک خواهد شد.

تنظیم نام نگارنده

می توانید با استفاده از meta tag نام یک نگارنده را برای صفحه ی وب خود تنظیم کنید. یک مثال در این رابطه را در زیر مشاهده می کنید.

مثال:

< meta name="keywords" content="HTML, Meta Tags, Metadata" / >

< meta name="description" content="Learning about Meta Tags." / >

< meta ame="author" content="Mahnaz Mohtashim" / >

تعیین تنظیم کاراکتر

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

مثال:

به طور پیش فرض مرورگرها و سرورهای وب از رمزگزاری ISO-8859-1 برای پردازش صفحات وب استفاده می کنند. در زیر مثالی را می بینید برای تنظیم رمزگزاری UTF-8:

< meta name="keywords" content="HTML, Meta Tags, Metadata" / >

< meta name="description" content="Learning about Meta Tags." / >

< meta name="revised" content="Tutorialspoint, 3/7/2014" / >

< meta http-equiv="cookie" content="userid=xyz; expires=Wednesday, 08-Aug-15 23:59:59 GMT;" / >

برای ارائه ی کاراکترهای چینی سنتی به یک صفحه ی استاتیک، صفحه ی وب باید دارای یک برچسب باشد تا رمزگذاری Big5 را تنظیم کند.

< meta name="keywords" content="HTML, Meta Tags, Metadata" / >

< meta name="description" content="Learning about Meta Tags." / >

< meta ame="author" content="Mahnaz Mohtashim" / >

< meta http-equiv="Content-Type" content="text/html; charset=Big5" / >

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

آموزش استفاده از comment در html

در این مقاله آموزش Html می خواهیم به چگونگی استفاده از comment در html بپردازیم:
کامنت قطعه ای از کد می باشد که توسط مرورگرها نادیده گرفته می شود. افزودن کامنت به کد HTML خود، تمرین خوبی است، به ویژه در داکیومنت های پیچیده برای نشان دادن بخش هایی از یک داکیومنت به هرکسی که کد را نگاه می کند. کامنت ها به شما و دیگران کمک می کنند تا کد خود را متوجه شوید و قابلیت خواندن آن را افزایش می دهد.
کامنت های HTML بین برچسب های واقع می شوند. بنابراین هر محتوایی که بین این برچسب ها واقع شود، مثل کامنت با آن رفتار خواهد شد و توسط مرورگرها به طور کامل نادیده گرفته خواهد شد.

نمونه یک

<!-- Document Header Starts -->

<title>This is document title</title>

<!-- Document Header Ends -->

این مثال نتیجه ی زیر را بدون نمایش محتوای ارائه شده به عنوان بخشی از کامنت ها، به دنبال دارد.
Document content goes here.....

کامنت های معتبردر مقابل کامنت های نامعتبر

کامنت ها تودرتو نمی شوند، یعنی اینکه یک کامنت نمی تواند در داخل کامنت دیگری قرار بگیرد. خط تیره ی (dash) دوتایی "--" ممکن نیست در داخل یک کامنت ظاهر شود، به جز در مواردی که بخشی از برچسب closing باشد. شما باید مطمئن باشید که هیچ فضای خالی در ابتدای رشته ی کامنت وجود ندارد.

مثال:

در اینجا کامنت ارائه شده یک کامنت معتبر می باشد و توسط مرورگر پاک می شود.

نمونه دو

<!-- This is valid comment -->

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

مثال:

نمونه سه

< !-- This is not a valid comment -->

کامنت های چندخطی

تاکنون فقط کامنت های تک خطی را مشاهده کردیم، اما HTML کامنت های چندخطی را نیز پشتیبانی می کند.
شما می توانید کامنت های چند خطی داشته باشید با استفاده از برچسب آغازگر --!> و پایان دهنده ی ،--> که قبل از اولین خط و در پایان آخرین خط قرار میگیرد.

مثال:

نمونه چهار

<!--

This is a multiline comment and it canکامنت های شرطی

کامنت های شرطی تنها در اینترنت اکسپلورر روی ویندوز کار می کنند، اما توسط مرورگرهای دیگر هم نادیده گرفته می شوند. این کامنت ها در Internet Explorer 5 به بالاتر پشتیبانی می شوند و می توانید از آنها برای دادن دستورات شرطی به ورژن های مختلف IE استفاده کنید.

مثال:

نمونه پنج

<!--[if IE 6]>

.... some HTML here ....

<![endif]-->

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

استفاده از برچسب کامنت

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

مثال:

نمونه شش

<p>This is <comment>not</comment> Internet </p>

اگر از IE استفاده می کنید، نتیجه ی زیر حاصل خواهد شد:

This is Internet Explorer.

اما اگر در حال استفاده از IE نمی باشد، نتیجه ی زیر حاصل می شود.

This is Internet Explorer.

کد اسکریپت کامنت

شما جاوا اسکریپت را در یک آموزش مجزا با HTML یاد خواهید گرفت. در اینجا باید دقت کنید که اگر در حال استفاده از javascript یا vbscript در کد html خود هستید، بنابراین توصیه می شود که آن کد اسکریپت را در داخل کامنت های مناسب HTML قرار دهید طوری که مرورگرهای قدیمی بتوانند به درستی کار کنند.

مثال:

نمونه هفت

<!--

("Hello World!")

//-->

Hello World!

کامنت صفحات طراحی

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

مثال:

نمونه هشت

<style>

<!--

.example {

border: 1px solid #4a7d49;

}

// -->

</style>

span through as many as lines you like.

-->

آموزش درج کردن تصویردر HTML-آموزش Html

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

وارد کردن تصویر

شما می توانید با استفاده از برچسب هر تصویری را وارد صفحه ی وب خود کنید. در زیر ترکیب ساده ی استفاده از این برچسب را می بینید:

src="Image URL" ... attributes-list/>

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

مثال:

برای امتحان کردن مثال، زیر اجازه بدهید فایل html خود یعنی test.htm و فایل تصویر خود یعنی test.png را در یک مسیر قرار دهیم.

نمونه یک

<p>Simple Image Insert</p>

<img src="tahlildadeh.png" alt="tahlildadeh Image">

شما می توانید از فایل تصویر JPEG، PNG یا GIF متناسب با راحتی خود استفاده کنید، اما مطمئن شوید که در ویژگی src نام فایل تصویر را به درستی وارد کردید. نام تصویر همیشه یک مورد هوشمند می باشد.
ویژگی alt یک ویژگی می باشد که اگر تصویر نمایش داده نشود، یک متن جایگزین را برای آن مشخص می کند.

تنظیم موقعیت تصویر

آموزش html css

معمولا ما تمام تصاویر خود را در یک مسیر مجزا قرار می دهیم. بنابراین اجازه بدهید فایل test.htm مربوط به HTML را در مسیر اصلی نگه داشته و یک مسیر فرعی images داخل مسیر اصلی، جایی که تصویر test.png را نگهداری می کنیم، ایجاد کنیم.
با فرض اینکه موقعیت تصویر ما "image/test.png" می باشد، مثال زیر را امتحان کنید:

مثال:

نمونه دو

<p>Simple Image Insert</p>

<img src="images/tahlildadeh.png" <="" pre="">

تنظیم طول و عرض تصویر

می توانید طول و عرض تصویر را براساس نیاز خود و با استفاده از ویژگی های width و height تنظیم کنید. شما می توانید طول و عرض تصویر را به پیکسل یا براساس درصد اندازه ی واقعی آن تنظیم کنید.

مثال:

نمونه سه

<p>Setting image width and height</p>

<img src="test.png" alt="Test Image" width="150" height="100">

تنظیم حاشیه ی تصویر

به طور پیش فرض تصویر حاشیه ای در اطراف خود خواهد داشت، شما می توانید ضخامت این حاشیه را با استفاده از ویژگی border و به واحد پیکسل تنظیم کنید. ضخامت 0 یعنی هیچ حاشیه ای در اطراف تصویر وجود ندارد.

مثال:

نمونه چهار

<p>Setting image Border</p>

<img src="test.png" alt="Test Image" border="3">

تنظیم همترازی تصویر

به طور پیش فرض تصویر در سمت چپ صفحه تنظیم می شود، اما می توانید از ویژگی align برای تنظیم تصویر در سمت راست یا مرکز صفحه استفاده کنید.

مثال:

نمونه پنج

<p>Setting image Alignment</p>

<img src="test.png" alt="Test Image" border="3" align="right">

پایان بخش پنجم آموزش طراحی سایت

آموزش طراحی سایت|دوره آموزش طراحی سایت|آموزش HTML|

سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل Canvas آشنا شدیم در قسمت سوم با با آموزش HTML همراه باشید:

آموزش تگ های اصلی در Html

برچسب های تیتر:

هر داکیومنت با یک تیتر آغاز می شود. شما می توانید از اندازه های مختلف برای تیترهای خود استفاده کنید. HTML دارای شش سطح می باشد که از< h1>, < h2>, < h3>, < h4>, < h5> و < h6> عناصر استفاده می کند. در هنگام نمایش هر تیتر مرور گر یک خط قبل و یک خط بعد از تیتر اضافه می کند.

نمونه یک

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

برچسب پاراگراف:

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

برچسب < p> به روش طراحی متن شما در پاراگراف های مختلف اشاره دارد. هر پاراگراف متن باید بین برچسب بازکننده ی < p> وبستن < /p> قرار بگیرد، همانطور که در مثال زیر مشاهده می کنید:

<p>This is some text in a paragraph.</p>

برچسب شکست لینک

هرزمان که شما از < br /> عنصر استفاده کنید، هر چیزی که آن را دنبال می کند از خط بعد شروع خواهد شد. این برچسب نمونه ای از یک عنصرempty می باشد، زمانی که لازم نیست برچسبی را باز کنید یا ببندید چرا که چیزی برای رفتن بین آنها وجود ندارد.
در بچسب < br />، یک فضای خالی بین کااکترهای br و اسلش جلوی آن وجود دارد. اگر شما این فضا را حذف کنید، مرورگرهای قدیمی تر در اجرای خط شکست مشکل خواهند داشت، در حالیکه اگر اسلش را حذف کنید برچسب < br> باقیمانده در HTML معتبر نمی باشد.

نمونه سه

This text contains<br>a line break.

مرکزگذاری متن

می توانید با استفاده از برچسب < center> می توانید هر محتوایی را در مرکز صفحه یا در مرکز هر سلول از یک جدول قرار دهید.

خطوط افقی

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

<p>This is paragraph one and should be on top</p>

<hr>

<p>This is paragraph two and should be at bottom</p>

و باز برچسب< hr /> مثالی از Empty می باشد که نیازی به باز کردن یا بستن برچسب ندارید زیرا چیزی برای رفتن بین آنها وجود ندارد.
در عنصر < hr /> یک فضای خالی بین کاراکترهای hr و اسلش مقابل آن وجود دارد. اگر این فضا را حذف کنید مرورگرهای قدیمی تر در اجرای خط افقی مشکل خواهند داشت. در حالیکه اگر اسلش مقابل آن را حذف کنید عنصر باقیمانده < hr> می باشد که در HTML فاقد اعتبار می باشد.

حفظ طراحی

گاهی اوقات تمایل دارید که متن فرمت دقیق خود در HTML را دنبال کند، در این موارد می توانید از برچسب پریفرمت < pre> استفاده کنید.
هر متن بین برچسب باز کننده ی < pre> و برچسب بستن < /pre> طراحی متن منبع را حفظ خواهد کرد.

Text in a pre element

is displayed in a fixed-width

font, and it preserves

both spaces and

line breaks

سعی کنید از همان کد بدون نگهداری آن بین برچسب های < pre>...< /pre> استفاده کنید.

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

فضاهای غیرشکست:

فرض کنید می خواهید از عبارت "12 Angry Men." استفاده کنید. در اینجا از مرورگر نمی خواهید عبارت را بین دو خط به صورت 12 Angry و Men بشکند.

An example of this technique appears in the movie "12 Angry Men."

در مواردی که نمی خواهید مرورگر متن را بشکند باید به جای یک فضای عادی از فضای غیر شکست استفاده کنید. برای مثال وقتی "12 Angry Men" را در یک پاراگراف کدگذاری می کنید باید از کدی مانند زیر استفاده کنید:

<p>An example of this technique appears in the movie "12 Angry Men."</p>

عناصر در HTML

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

نابراین در اینجا< p>....< /p> یک عنصر HTML و< h1>...< /h1> عنصر دیگری از HTML می باشد. عناصری از HTML وجود دارند که نیازی به بسته شدن ندارند مانند < img... />, < hr /> و< br /> . این عناصر با عنوان void elements (عناصر خالی) شناخته می شوند.
داکیومنت های HTML دارای درختی از این عناصر می باشند و مشخص می کنند که چگونه داکیومنت ها باید ساخته شوند و چه نوع محتوایی باید در چه بخشی از داکیومنت HTML قرار بگیرد.

برچسب HTML در مقابل عنصر

یک عنصر HTML به وسیله ی یک برچسب شروع کننده تعریف می شود. اگر عنصر دارای محتوای دیگری باشد با یک برچسب بستن تمام می شود.
برای مثال< p> برچسب شروع کننده ی یک پاراگراف می باشد و< /p> برچسب بستن همان پاراگراف می باشد، اما < p>This is paragraph< /p> عنصر یک پاراگراف می باشد.

عناصر تو در توی HTML

نگهداری یک عنصر HTML در داخل عنصر دیگر بسیار متداول می باشد.

<title>Nested Elements Example </title>

<h1>This is<i>italic</i> heading</h1>

آموزش Attributeها در HTML-آموزش HTML

ویژگی های زبان HTML

در این مبحث از آموزش های HTML می خواهیم به بررسی برخی از ویژگی های زبان HTML بپردازیم:
برخی از برچسب های HTML مانند برچسب های تیتر و برچسب های پاراگراف، و موارد استفاده ی آنها را مشاهده کردیم. تاکنون از آنها به ساده ترین شکل خود استفاده کرده ایم، اما بیشتر برچسب های HTML می توانند ویژگی هایی داشته باشند که مقداری اطلاعات اضافه می باشد.
یک attribute برای تعریف ویژگی های عنصر HTML استفاده می شود و در داخل برچسب بازکننده ی عنصر قرار می گیرد. همه ی ویژگی ها از دو بخش تشکیل شده اند: name و value.

• Name ویژگی مورد نظر شما برای تنظیم میباشد، به عنوان مثال عنصر پاراگرافp> > در مثال ارائه شده دارای ویژگی می باشد که نام آن align می باشد و شما می توانید از آن برای تنظیم پاراگراف در صفحه استفاده کنید.
• Value همان است که شما می خواهید مقدار ویژگی تنظیم شود و همیشه در داخل گیومه قرار می دهید. مثال زیر سه مقدار ممکن ازیک ویژگی تراز را نشان می دهد: چپ، مرکز و راست.

ویژگی نام ها و ویژگی مقادیر غیرهوشمند می باشند. به هرحال وب جهانی Consortium (W3C) مقادیر ویژگی ها را در HTML 4 با حروف کوچک پیشنهاد می دهد.

مثال:

<title>Align Attribute Example</title>

<p align="left">This is left aligned</p>

<p align="center">This is center aligned</p>

ویژگی های اصلی

چهار ویژگی اصلی که می توانند در اکثر عناصر HTML مورد استفاده قرار بگیرند عبارتند از:

• id
• title
• class
• style

ویژگی id

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

• اگر یک عنصر یک ویژگی را به عنوان تشخیص دهنده ی منحصر به فرد استفاده می کند شناخت تنها آن عنصر و محتوای مربوط به آن ممکن می باشد.
• اگر دارای دو عنصر هم نام در یک صفحه ی وب می باشید، می توانید از عنصر id برای تشخیص این عناصر هم نام استفاده کنید.

در مورد طراحی صفحه در آموزش های مجزا بحث خواهیم کرد، اکنون اجازه بدهید از ویژگی id برای تشخیص عناصر بین دو پاراگراف استفاده کنیم، مانند مثال زیر:

<p id="html">This para explains what is HTML</p>

<p id="css">This para explains what is Cascading Style Sheet</p>

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

ویژگی title:

این ویژگی یک تیتر پیشنهادی برای عنصر ارائه می دهد. ترکیب مربوط به ویژگی title شبیه به ترکیب توضیح داده شده برای ویژگی id می باشد. رفتار این ویژگی بستگی به عنصری دارد که آن را حمل می کند، گرچه اغلب اوقات وقتی مکان نما روی عنصر قرار می گیرد یا عنصر در حال بارگذاری می باشد، با عنوان یک راهنمای ابزار(tooltip) نمایش داده می شود.

<title>The title Attribute Example</title>

<h3 title="Hello HTML!">Titled Heading Tag </h3>

اکنون سعی کنید مکان نما را روی "Titled Heading Tag Example" بیاورید، خواهید دید که هر تیتری که در کد خود استفاده کرده اید، مانند یک راهنمای ابزار نمایش داده خواهد شد.

ویژگی class:

این ویژگی برای برقراری ارتباط بین یک عنصر با یک صفحه ی طراحی استفاده می شود و گروه عنصر را مشخص می کند. وقتی که را یاد بگیرید Cascading Style Sheet (CSS) در مورد این ویژگی بیشتر فرا خواهید گرفت. اکنون تا همین حد کافیست.
مقدار ویژگی نیز ممکن است لیستی از فضاهای مجزای نام های گروه باشد، برای مثال:

class="className1 className2 className3"

ویژگی style

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

<title>The style Attribute</title>

<p style="font-family:arial; color:#FF0000;">Some </p>

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

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

درونی کردن ویژگی ها

سه ویژگی درونی وجود دارند که برای اکثر عناصر HTML استفاده می شوند:

• dir
• lang
• xml:lang

ویژگی dir

این ویژگی به شما اجازه می دهد تا مسیری را به مرورگر نشان دهید که متن در آن باید جریان داشته باشد. ویژگی dir می تواند یکی از دو مقدار باشد، همانطور که در جدول زیر نشان داده شده است:

<title>Display Directions</title>

This is how IE 5 renders right-to-left directed text.

وقتی که ویژگی dir در داخل برچسب html> > استفاده می شود، مشخص می کند که چگونه متن در کل داکیومنت نمایش داده می شود. وقتی در برچسب دیگری مورد استفاده قرار بگیرد، مسیر متن را برای محتوای مربوط به آن برچسب کنترل می کند.
ویژگی lang: این ویژگی به شما کمک می کند تا زبان اصلی استفاده شده در یک داکیومنت را نشان دهید، اما این ویژگی فقط برای سازگاری معکوس با ورژن های قدیمی تر HTML در HTML حفظ شده است. این ویژگی به وسیله ی ویژگی xml:lang در داکیومنت های جدید HTML جایگزین شده است.
مقادیر ویژگی lang کدهای دو کاراکتری زبان استاندارد ISO-639 می باشند. HTML Language Codes: ISO 639 را برای لیست کاملی از کدهای زبان چک کنید.

<title>English Language Page</title>

This page is using English Language

ویژگی xml:lang

این ویژگی جایگزین xhtml برای ویژگی lang می باشد. مقدار ویژگی xml:lang باید یک کد ISO-639 می باشد، همانطور که در بخش قبل بیان شد.

ویژگی های عمومی

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

آموزش قالب بندی در HTML-آموزش HTML

در ادامه مباحث آموزشی HTML قبل، می خواهیم ببینیم چه آیتم هایی در format دادن و قالب بندی صفحات HTML مورد نیاز ما هستند.
اگر با پردازشگر word کار می کنید باید با بولد کردن (bold)، ایتالیک کردن و آندرلاین کردن متن آشنا باشید. این ها فقط سه گزینه از ده گزینه موجود برای چگونگی ظاهر شدن متن در HTML و XHTML می باشند.

بولد کردن متن

هرچیزی که بین عناصر< b>...< /b> قرار می گیرد به صورت بولد ظاهر می شود، مانند مثال زیر:

<p>This text is normal.</p>

<p><b>This text is bold</b>.</p>

<p>The following word uses a <b>bold</b> </p>

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

هر چیزی که بین عناصر< i>...< /i>قرار بگیرد به صورت ایتالیک ظاهر می شود، مانند مثال زیر:

<p>This text is normal.</p>

<p><i>This text is italic</i>.</p>

<p>The following word uses a <i>italicized</i> </p>

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

آندرلاین کردن متن

هر چیزی که بین عناصر < u>...< /u> قرار بگیرد به صورت آندرلاین ظاهر می شود، مانند مثال زیر:

<p>This is a <u>parragraph</u>.</p>

<p>The following word uses a <u>underlined</u> typeface.</p>

خط کشیدن روی متن

هر چیزی که بین گزینه های < strike>...< /strike> قرار بگیرد، با یک strikethrough نمایش داده می شود که خط باریکی می باشد که روی متن کشیده می شود، همانطور که در مثال زیر مشاهده می کنید:

<p>Version 2.0 is <strike>not yet available!</strike> now available!</p>

فونت monospaced

محتوای عنصر < tt>...< /tt> به فونت monospaced نوشته می شود. اکثر فونت ها با عنوان فونت هایی با عرض متغیر شناخته شده اند، زیرا حروف مختلف دارای عرضهای مختلف هستند ( به عنوان مثال حرف m عریض تر از حرف I می باشد.) به هرحال در فونت monospaced تمام حروف دارای عرض یکسان می باشند.

<p><tt>Teletype text</tt></p>

متن superscript ( چاپ شده در بالا)

محتوای عنصر < sup>...< /sup> در بالا نوشته می شود، فونت استفاده شده برای آن همان فونت کاراکترهای اطراف آن می باشد، اما به اندازه ی نصف یک کاراکتر بالاتر از دیگر کاراکترها نمایش داده می شود.

<p>This is ^{superscripted} text.</p>

متن subscript (چاپ شده در زیر)

محتوای عنصر< sub>...< /sub> در زیر نوشته می شود. اندازه ی فونت استفاده شده برای آن به اندازه ی فونت کاراکترهای اطراف می باشد اما به اندازه ی نصف ارتفاع یک کاراکتر زیر کاراکترهای دیگر نمایش داده می شود.

<p>This is _subscripted text.</p>

متن مندرج

هرچیزی که بین عنصر ... قرار بگیرد به عنوان متن مندرج نمایش داده می شود.

<p>My favorite <ins>color</ins> is red.</p>

متن حذف شده

هر چیزی که بین عنصر < del>...< /del> ظاهر شود با عنوان یک متن حذف شده نمایش داده می شود.

<p>My favorite color is <del>blue</del> red.</p>

متن بزرگتر

محتوای عنصر < big>...< /big> اندازه فونت را بزرگتر از متن اطراف نشان می دهد. مانند مثال زیر:

<p><big>Bigger text</big></p>

متن کوچکتر

محتوای عنصر < small>...< /small> متن را یک سایز کوچکتر از متن اطراف آن نشان می دهد، مانند مثال زیر:

<h2>HTML <small>Small</small> Formatting</h2>

گروه بندی محتوا

عناصر< div>و < span> به شما اجازه می دهند تا برای ایجاد بخش ها و یا زیرمجموعه های یک صفحه، عناصر زیادی را با یکدیگر گروه بندی کنید.
برای مثال ممکن است تمایل داشته باشید که تمام پاورقی ها را در یک صفحه در داخل عنصر < div> قرار دهید تا نشان دهید که تمام عناصر موجود در آن عنصر مربوط به پاورقی می باشند. پس از آن ممکن است طرحی را به عنصر< div> ضمیمه کنید، طوریکه با استفاده از مجموعه ای از قوانین طراحی ظاهر شوند.

<div style="color:#0000FF">

<h3>This is a heading</h3>

<p>This is a paragraph.</p>

</div>

از طرف دیگر عنصر < span> فقط می تواند برای گروه بندی داخل خطی عناصر استفاده شود. بنابراین اگر بخشی از جمله یا پاراگراف را دارید که می خواهید با هم در یک گروه قرار دهید، می توانید از عنصر < span> مانند زیر استفاده کنید:

<p>My mother has <span style="color:blue">blue</span> eyes.</p>

این برچسب ها عموما با CSS استفاده می شوند تا به شما اجازه دهند طرحی را به بخشی ازیک صفحه ضمیمه کنید.

پایان بخش چهارم آموزش طراحی سایت

آموزش طراحی سایت|دوره آموزش طراحی سایت:قسمت سوم|

سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل با مفاهیم Canvas آشنا شدیم در قسمت سوم با ادامه canvas همراه من باشید

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

بوم نقاشی: تصویر

کشیدن خط یا اشکال ساده خسته کننده می باشد، اجازه بدهید چند تصویر طراحی کنیم.
در نمایش بالا فقط از کانتکست روش drawimage() استفاده کردم. به هرحال این روش می تواند 3، 5 و یا 9 استدلال داشته باشد. من سه عملکرد دارم که عبارتند از draw dragon (کشیدن اژدها)، draw smaller dragon (کشیدن اژدهای کوچکتر) و draw dragon head (کشیدن سر اژدها) و هرکدام از آنها 3،5 و 9 استدلال مربوطه را دنبال می کنند.

بوم نقاشی: تصویر

در اینجا کد نمایش اژدها را مشاهده می کنید.

‎<div>

<canvas id="c5" width="600" height="300" style="border:solid 1px #000000;"></canvas>

‎<div>

‎<button ="draw_dragon();return true;">Draw Dragon</button>

‎<button ="draw_smaller_dragon();return true;">Draw smaller dragon</button>

‎<button ="draw_dragon_head();return true;">Draw Dragon Head</button>

‎<button ="Clear_image();return true;">Erase Everything</button>

</div>

‎</div>

var c5 = document.getElementById("c5");

var c5_context = c5.getContext("2d");

‎ var dragon = new Image();

dragon.src = 'images/chinese_dragon.png';

‎ function draw_dragon() {

c5_context.drawImage(dragon, 100, 5);

‎}

‎ function draw_smaller_dragon() {

c5_context.drawImage(dragon, 10, 5, 58, 100);

‎}

‎ function draw_dragon_head() {

c5_context.drawImage(dragon, 0, 19, 69, 97, 300, 100, 103, 145);

‎}

‎ function Clear_image() {

c5_context.clearRect(1, 1, 600, 300);

‎}

‎‎

آموزش کن وس Text در HTML:

بوم نقاشی: متن

چگونه متن را در بوم نقاشی اجرا کنیم؟
کلمات جادویی برای چاپ متن در بوم نقاشی عبارتند از Fillstyle، Strokestyle، Font، TextBaseline و در انتها filltext و stroketext.

<div>

<canvas id="c6" width="600" height="200" style="border:solid 1px #000000;"></canvas>

<div>

<button ="showFillText();return true;">Fill Text</button>

<button ="showStrokeText();return true;">Stroke Text</button>

<button ="Clear_text();return true;">Erase Everything</button>

</div>

</div>

‎

var c6 = document.getElementById("c6");

var c6_context = c6.getContext("2d");

function showFillText() {

c6_context.fillStyle = '#f00';

c6_context.font = 'italic bold 30px sans-serif';

c6_context.textBaseline = 'bottom';

c6_context.fillText('HTML5 is cool!', 50, 100);

‎}

‎ function showStrokeText() {

c6_context.strokeStyle = "#003300";

c6_context.font = '40px san-serif';

c6_context.textBaseline = 'bottom';

c6_context.strokeText('HTML5 is cool?', 300, 100);

‎}

‎ function Clear_text() {

c6_context.clearRect(1, 1, 600, 300);

‎}

‎

بوم نقاشی: متن

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

در اینجا یک خط خاکستری در y=100 کشیده ام و قصد دارم هر لغت را در y=100 قرار دهم، اما با استفاده از textbaseline متفاوت.
در مورد نگارش، فایرفاکس هیچگونه پشتیبانی روی خط پایه ی hanging ندارد.

c7_context.textBaseline = "top";

c7_context.fillText('Top', 5, 100);

‎ c7_context.textBaseline = "bottom";

c7_context.fillText('Bottom', 80, 100);

‎ c7_context.textBaseline = "middle";

c7_context.fillText('Middle', 200, 100);

‎ c7_context.textBaseline = "alphabetic";

c7_context.fillText('Alphabetic', 300, 100);

‎ c7_context.textBaseline = "hanging";

c7_context.fillText('Hanging', 400, 100);

اگر قصد دارید چیزی را در بوم نقاشی گسترش دهید و تمایل به پشتیبانی یوزرهایی داشتید که از IE8 یا پایین تر استفاده می کنند، می توانید از یک جاوا اسکریپت با منبع آزاد به نام ExplorerCanvas استفاده کنید. اما در جریان باشید که وجود مسایل غیریکنواختی ممکن است باعث عصبانیت شما بشوند.
باز هم این معرفی مختصری از بوم نقاشی HTML5 بود. هنوز ویژگی های جالب دیگری در مورد این بوم نقاشی وجود دارد که باید در مورد آنها بیشتر بدانید.

آموزش رابط Canvas در HTML

کن واس Canvas یک تگ HTML (< canvas >) است که از طریق آن می‌توانیم با استفاده از Canvas API به طراحی و نقاشی بپردازیم.

ایجاد Canvas

انجام این کار بسیار ساده است و تنها کافی است که < canvas >< /canvas > را داخل یک فایل HTML خالی بی اندازید.

در حال حاضر در این صفحه چیزی نمی‌بینید، چرا که این canvas یک عنصر نامرئی است. مقداری حاشیه به آن اضافه کنید.

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

کروم به‌صورت خودکار به عنصر body یک حاشیه‌ی 8 پیکسلی اضافه می‌کند. به همین خاطر است که حاشیه‌ی ما شبیه به یک کادر شده است. با تنظیمات زیر می‌توانید حاشیه‌ی کروم را حذف کنید.

body {

margin: 0;

}

فعلاً کاری به تنظیمات پیش‌فرض نداریم.
حالا می‌توانیم از طریق جاوا اسکریپت و با استفاده از DOM Selectors API به canvas خود دسترسی پیدا کنیم. بنابراین می‌توانیم از ()document.querySelector استفاده کنیم.

const canvas = document.querySelector('canvas')

تغییر رنگ پس‌زمینه‌ی canvas

این کار در CSS انجام می‌شود:

canvas {

border: 1px solid black;

width: 100%;

height: 100%;

}

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

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

در حال حاضر بدنه، کل اندازه‌ی پنجره را پر نکرده است. برای این‌که کل صفحه پر شود، باید از جاوا اسکریپت استفاده کنیم.

canvas.width = window.innerWidth

canvas.height = window.innerHeight

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

اگر اندازه‌ی پنجره عوض شد، ما باید عرض canvas را هم مجدداً محاسبه کنیم که این کار جهت جلوگیری از فراخوانی رویداد تغییر اندازه‌ی canvas با استفاده از debounce انجام می‌شود (رویداد resize را با هر بار حرکت پنجره از طریق موس، می‌توان صدها بار فراخوانی کرد)، برای مثال:

const debounce = (func) => {

let timer

return (event) => {

if (timer) { clearTimeout(timer) }

timer = setTimeout(func, 100, event)

}

}

window.addEventListener('resize', debounce(() => {

canvas.width = window.innerWidth

canvas.height = window.innerHeight

}))

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

دریافت زمینه از canvas

برای ترسیم در canvas باید یک زمینه داشته باشیم:

const c = canvas.getContext('2d')

برخی زمینه را به متغیری به نام c و برخی دیگر به ctx تخصیص می‌دهند، که هر دوی آن‌ها روشی رایج برای مخفف کردن زمینه (context) است.
متد getContext() یک زمینه‌ی طراحی را در canvas برگشت می‌دهد که این کار بر اساس نوع پارامتر عبوری مشخص می‌شود.
مقادیر معتبر را می‌توانید در زیر مشاهده کنید:

• 2d: مقداری که ما از آن استفاده خواهیم کرد.
• webgl : جهت استفاده از نسخه‌ی یک WebGL کاربرد دارد.
• webgl2 : جهت استفاده از نسخه‌ی دو WebGL کاربرد دارد.
• bitmaprenderer : از آن می‌توان در کنار ImageBitmap استفاده کرد.

بر اساس نوع زمینه می‌توانید پارامتر دومی را نیز به getContext() بدهید تا مشخصات بیشتری را تعیین کنید.

برای زمینه‌ی 2d ما اساساً یک پارامتر داریم و می‌توانیم از آن در تمامی مرورگرها استفاده کنیم. این پارامتر alpha نام دارد، یک پارامتر بولی است و مقدار آن به‌صورت پیش‌فرض true است. اگر مقدار آن بر روی false تنظیم شود، مرورگر می‌فهمد که canvas پس‌زمینه‌ی شفافی ندارد و بنابراین می‌تواند سرعت رندر را افزایش دهد.

ترسیم عناصر در canvas

حالا با کمک زمینه‌های بالا می‌توانیم عناصر مورد نظر خود را ترسیم کنیم.

روش‌های زیادی برای انجام این کار وجود دارد که می‌توانیم با کمک آن‌ها عناصر زیر را ترسیم کنیم:

• متن
• خطوط
• مستطیل
• مسیر
• تصویر

و می‌توانیم fill، stroke، gradient، pattern و shadow هر یک از آن‌ها را تغییر دهیم. همچنین می‌توانیم آن‌ها را بچرخانیم، مقیاس آن‌ها را تغییر دهیم و ... .
بیایید کار خود را با یک مستطیل که ساده‌ترین عنصر است شروع کنیم. برای انجام این کار از متد fillRect(x, y, width, height) استفاده می‌کنیم.

c.fillRect(100, 100, 100, 100)

این کار باعث می‌شود یک مستطیل سیاه‌رنگ 100 پیکسل در 100 پیکسل کشیده شود که موقعیت افقی و عمودی آن هر دو 100 است.

با استفاده از متد fillStyle() می‌توانید این مستطیل را رنگ کنید. برای انجام این کار تنها کافی است یکی از رشته‌های رنگ معتبر CSS را در این متد عبور دهید.

c.fillStyle = 'white'

c.fillRect(100, 100, 100, 100)

حالا می‌توانید با کمک خلاقیت خود، چیزهای بسیاری را ترسیم کنید.

for (let i = 0; i < 60; i++) {

for (let j = 0; j < 60; j++) {

c.fillStyle = `rgb(${i * 5}, ${j * 5}, ${(i+j) * 50})`

c.fillRect(j * 20, i * 20, 10, 10)

}

}

for (let i = 0; i < 60; i++) {

for (let j = 0; j < 60; j++) {

c.fillStyle = `rgb($ {i * 5}, $ {j * 5}, $ {(i+j) * 50})`

c.fillRect(j * 20, i * 20, 20, 20)

}

}

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

ترسیم عناصر

همان‌طور که قبلاً نیز اشاره کردیم، می‌توانید عناصر زیر را ترسیم کنید:

• متن
• خطوط
• مستطیل
• مسیر
• تصویر

صرفاً برای آن‌که کلیت کار مشخص شود، به مستطیل و متن می‌پردازیم.

تغییر رنگ

جهت تغییر fill و stroke رنگ‌ها و اشکال می‌توانید از مشخصه‌های fillStyle و strokeStyle استفاده کنید. این مشخصه‌ها تمامی رنگ‌های معتبر CSS ازجمله رشته‌ها و اعداد RGB را می‌پذیرند.

c.strokeStyle = `rgb(255, 255, 255)`

c.fillStyle = `white`

مستطیل

• clearRect(x, y, width, height)
• fillRect(x, y, width, height)
• strokeRect(x, y, width, height)

در بخش قبل با fillRect() آشنا شدیم. strokeRect() نیز از نظر اسم شبیه به آن است اما به‌جای پر کردن مستطیل، صرفاً با استفاده از سبک stroke فعلی، stroke مستطیل را ترسیم می‌کند (که آن را می‌توان با استفاده از ویژگی زمینه‌ی strokeStyle تغییر داد).

const c = canvas.getContext('2d')

for (let i = 0; i < 61; i++) {

for (let j = 0; j < 61; j++) {

c.strokeStyle = `rgb($ {i * 5}, $ {j * 5}, $ {(i+j) * 50})`

c.strokeRect(j * 20, i * 20, 20, 20)

}

}

دستور ()clearRect پس‌زمینه‌ی ناحیه‌ای را حذف می‌کند.

متن

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

• fillText(text, x, y)
• strokeText(text, x, y)

با استفاده از این دو روش می‌توانید متن خود را در canvas بنویسید.

X و y به پایین گوشه سمت چپ اشاره دارد.

می‌توانید خانواده‌ی فونت و اندازه را با استفاده از ویژگی font مربوط به canvas تغییر دهید.

c.font = '148px Courier New'

ویژگی‌های مربوط به متن دیگری نیز هستند که می‌توانید آن‌ها را تغییر دهید (* = پیش‌فرض):

• textAlign (start*, end, left, right, center)
• textBaseline (top, hanging, middle, alphabetic*, ideographic, bottom)
• direction (ltr, rtl, inherit*)

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

خطوط

برای آن‌که بتوانید خطی را بکشید، ابتدا باید متد beginPath() را فراخوانی کنید، پس از آن با استفاده از moveTo(x, y) نقطه‌ی آغازینی را مشخص کنید و سپس برای قرار دادن این خط بر روی مختصات جدید lineTo(x, y) را فراخوانی کنید و در نهایت stroke() را فراخوانی کنید.

c.beginPath()

c.moveTo(10, 10)

c.lineTo(300, 300)

c.stroke()

این خط بر اساس مقدار ویژگی c.strokeStyle رنگ خواهد شد.

مثال پیچیده‌تر

این کد canvas ای را ایجاد می‌کند که حاوی 800 دایره است.

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

const canvas = document.querySelector('canvas')

canvas.width = window.innerWidth

canvas.height = window.innerHeight

const c = canvas.getContext('2d')

const circlesCount = 800

const colorArray = [

'#046975',

'#2EA1D4',

'#3BCC2A',

'#FFDF59',

'#FF1D47'

]

const debounce = (func) => {

let timer

return (event) => {

if (timer) { clearTimeout(timer) }

timer = setTimeout(func, 100, event)

}

}

window.addEventListener('resize', debounce(() => {

canvas.width = window.innerWidth

canvas.height = window.innerHeight

init()

}))

const init = () => {

for (let i = 0; i < circlesCount; i++) {

const radius = Math.random() * 20 + 1

const x = Math.random() * (innerWidth - radius * 2) + radius

const y = Math.random() * (innerHeight - radius * 2) + radius

const dx = (Math.random() - 0.5) * 2

const dy = (Math.random() - 0.5) * 2

const circle = new Circle(x, y, dx, dy, radius)

circle.draw()

}

}

const Circle = function(x, y, dx, dy, radius) {

this.x = x

this.y = y

this.dx = dx

this.dy = dy

this.radius = radius

this.minRadius = radius

this.color = colorArray[Math.floor(Math.random() * colorArray.length)]

this.draw = function() {

c.beginPath()

c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)

c.strokeStyle = 'black'

c.stroke()

c.fillStyle = this.color

c.fill()

}

}

init()

مثال دیگر: متحرک‌سازی عناصر در canvas

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

این کار از طریق requestAnimationFrame() انجام می‌شود و در هر فریم با رندر کردن حلقه‌ی تکرار تصویر را کمی حرکت می‌دهد.

تعامل با عناصر در canvas

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

شیوه‌ی کارکرد این قابلیت به چه صورت است؟ در واقع کار ردیابی موقعیت موس از طریق دو متغیر انجام می‌شود.

let mousex = undefined

let mousey = undefined

window.addEventListener('mousemove', (e) => {

mousex = e.x

mousey = e.y

})

سپس از این متغیرها در متد update() مربوط به Circle استفاده می‌کنیم تا مشخص شود که شعاع باید افزایش یابد یا کاهش.

if (mousex - this.x < distanceFromMouse && mousex - this.x > -distanceFromMouse && mousey - this.y < distanceFromMouse && mousey - this.y > -distanceFromMouse) {

if (this.radius < maxRadius) this.radius += 1

} else {

if (this.radius > this.minRadius) this.radius -= 1

}

distanceFromMouse مقداری برحسب پیکسل است (در اینجا برابر با 200 است) که مشخص می‌کند تا چه فاصله‌ای دایره‌ها باید به موس واکنش نشان دهند.

عملکرد

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

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

حرف آخر

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

پایان بخش سوم آموزش طراحی سایت

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

آموزش Bootstrap 4

سلام با بخش دوم آموزش Bootstrap 4 همراه ما باشید . در بخش اول با مفهوم Bootstrap آشنا شدیم و فرق Bootstrap 4 و Bootstrap 3 را متوجه شدیم و در بخش اول چند مثال را دیدیم و به جواب سوال (چرا بایستی از Bootstrap استفاده کنیم؟ ) رسیدیم .در ادامه :

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

آموزش سیستم گرید بندی (Grid System) در Bootstrap 4:

سیستم گرید بندی Bootstrap Bootstrap 4 مبتنی بر Flexbox ساخته شده و به شما امکان می دهد تا 12 ستون (Column) را در هر سطر (Row) داشته باشید.
اگر نمی خواهید در هر سطر (Row) از هر 12 ستون (Column) استفاده نمایید می توانید آن ها را 2 یا چندتایی با هم یک گروه کرده و ستون هایی عریض تر ایجاد نمایید.
شکل زیر، ایده کلی سیستم گریدبندی در Bootstrap 4 را نشان می دهد. همانطور که مشاهده می کنید می توانید ستون هایی با عرض 1 از 12 واحد یا 2، 3 و ... از 12 واحد را ایجاد نمایید:

آموزش سیستم گرید بندی (Grid System) در Bootstrap 4:

سیستم گریدبندی Bootstrap کاملا واکنش گرا یا Responsive است و ستون ها در هنگام تغییر عرض صفحه، به صورت خودکار، تنظیم شده و بهترین حالت نمایش را نشان می دهند.
فقط بایستی توجه داشته باشید حداکثر تعداد ستون ها در هر سطر از 12 واحد بیشتر نباشد (ولی می تواند از 12 کمتر بوده و نیازی نیست که از تمامی 12 ستون استفاده کنید).

آموزش کالاس های گرید (Grid Class) در سیستم گریدبندی Bootstrap 4:

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

سیستم گریدبندی بوت استرپ (Bootstrap 4 Grid System) دارای کلاس مختلف برای ستون ها به شرح زیر است :

• کلاس col. : مخصوص دستگاه بسیار کوچک (extra Small devices) که عرض صفحه نمایش آن ها معادل 575 پیکسل یا کمتر است.
• کلاس .col-sm-: مخصوص دستگاه هایی با صفحه نمایش کوچک (small devices) که عرض صفحه نمایش آن ها 576 پیکسل یا بیشتر است.
• کلاس .col-md-: مخصوص دستگاه هایی با صفحه نمایش متوسط (medium devices) که عرض صفحه نمایش آن ها 768 پیکسل یا بیشتر باشد.
• کلاس .col-lg-: مخصوص دستگاه هایی با صفحه نمایش بزرگ (large devices) که عرض صفحه نمایش آن ها 992 پیکسل یا بیشتر باشد.
• کلاس .col-xl: مخصوص دستگاه هایی با صفحه نمایش بسیار بزرگ (xlarge devices) که عرض صفحه نمایش آن ها از 1200 پیکسل بیشتر است.

نکته :

کلاس های فوق را می توانید به صورت ترکیبی و همزمان نیز در یک عنصر به کار برده و صفحاتی کاملا واکنش گرا (Responsive) و انعطاف پذیر (flexible) ایجاد نمایید.

تذکر

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

بنابراین مثلا اگر می خواهید عرض یکسانی را برای کلاس های sm و md تعیین کنید، کافی است مقدار sm را تنظیم کرده و خودکار به کلاس بالاتر ارث داده می شود.

آشنایی با ساختار پایه سیستم گریدبندی Bootstrap 4:

در 2 کد مثال عملی زیر، ساختار پایه تعریف و استفاده از سیستم گریدبندی Bootstrap 4 را نشان داده ایم. کد مثال ها را مطالعه نمایید. در ادامه به تشریح هرکدام خواهیم پرداخت :

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

<!-- Control the column width, and how they should appear on different devices -->

<div class="row">

<div class="col-*-*"></div>

<div class="col-*-*"></div>

</div>

<div class="row">

<div class="col-*-*"></div>

<div class="col-*-*"></div>

<div class="col-*-*"></div>

</div>

<!-- Or let Bootstrap automatically handle the layout -->

<div class="row">

<div class="col"></div>

<div class="col"></div>

<div class="col"></div>

</div>

توضیح مثال اول : ابتدا یک سطر (کد div class=”row”) ایجاد نمایید. سپس به تعداد دلخواه و مورد نظرتان ستون (Column) را با کلاس .col-*-* در هر سطر اضافه نمایید. * اول در کلاس فوق، تعیین کننده صفحه نمایش هدف برای عرض ستون است (مقادیر sm، md، lg یا xl). در حالی که * دوم یک عدد بیانگر اندازه ستون از 12 واحد کل در هر سطر است (مثلا 4 از 12).

توضیح مثال 2: همانند مثال قبل یک سطر (row) مادر ایجاد می کنید. این بار به جای تعیین عدد برای هر .col اجازه دهید Bootstrap قالب سایت را مدیریت کرده و ستون های میانی ایجاد نماید.
برای مثال اگر 2 ستون با کلاس .col تعیین کنید، عرض هرکدام، 50درصد خواهد بود. برای 3 ستون عرض هر ستون 32% و در حالت 4 ستون 25% می شود. همچنین می توانید از مقادیر sm، md، lg یا xl نیز استفاده کرده تا نحوه نمایش را در هر اندازه صفحه نمایش، دقیق کنترل نمایید.

در ادامه چند مثال عملی با سورس کد را ارائه کرده ایم تا سناریوهای مختلف قالب بندی گرید ها در Bootstrap 4 را در عمل نشان دهیم.

آموزش ایجاد 3 ستون مساوی در Bootstrap 4:

در کد مثال عملی زیر، 3 ستون با کلاس col در سطر تعریف کرده ایم که همواره هر ستون 33% عرض را در هر صفحه نمایش و دستگاهی خواهند داشت.

مثال 1

<div class="row">

<div class="col">.col</div>

<div class="col">.col</div>

<div class="col">.col</div>

</div>

آموزش ایجاد 4 ستون مساوی واکنش گرا در Bootstrap 4:

در کد مثال زیر، 4 ستون با عرض مساوی 3 واحد از 12 واحد تعریف کرده ایم که دارای کلاس sm است. ستون ها در تمامی صفحات از موبایل تا کامپیوترهای بزرگ، همواره 25% عرض سطر را اشغال خواهند کرد.
نکته مهم : در دستگاه هایی با عرض صفحه نمایش کمتر از 576 پیکسل، ستون ها به صورت اتوماتیک بر روی هم قرار گرفته و هر ستون، عرض کل صفحه را اشغال می کند :

مثال 2

<div class="row">

<div class="col-sm-3">.col-sm-3</div>

<div class="col-sm-3">.col-sm-3</div>

<div class="col-sm-3">.col-sm-3</div>

<div class="col-sm-3">.col-sm-3</div>

</div>

آموزش ایجاد 2 ستون غیر هم اندازه Responsive در Bootstrap 4:

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

در کد مثال عملی زیر، دو ستون غیر هم اندازه (یکی 4 واحد از 12 و یکی 8 واحد از 12 واحد ستون) ایجاد کرده ایم.
با تعیین پارامتر sm، مشخص کرده ایم اولویت اجرای گرید در موبایل های کوچک است و به طور خودکار به تمامی دستگاه ها با عرض بیشتر نیز انتقال می یابد.

مثال 3

<div class="row">

<div class="col-sm-4">.col-sm-4</div>

<div class="col-sm-8">.col-sm-8</div>

</div>

در بخش آموزش کامل سیستم گرید بندی Bootstrap 4، به توضیح جامع Grid System خواهیم پرداخت.

آموزش کار با متن (Text) و فن چاپ Bootstrapt 4

تنظیمات اولیه Bootstrap 4 برای نمایش متن:

چهارچوب کاری بوت استرپ Bootstrap 4 از سایز نوشته پیش فرض (font-size) با مقدار 16px و ارتفاع خط (line-height) به بلندی 1.5 استفاده می کند.
فونت یا قلم (font-family) پیش فرض در Bootstrap 4 نیز به ترتیب فونت های “Helvetica Neue”، “Helvetica”، “Arial” و “sans-serif” هستند.
علاوه بر این ها در بوت استرپ 4 ، تمامی تگ های <p> یا پاراگراف به طور پیش فرص دارای حاشیه بالا (margin-tap) برابر صفر و حاشیه پایین (margin-bottem) معادل 1rem یا 16px هستند.

آموزش کار با تگ های عنوان <h1> تا <h6> در بوت استرپ 4:

بوت استرپ Bootstrap 4 از ضخامت قلم (font-weight)، ضخیم تر و کمی سایز نوشته (font size) بزرگتر نسبت به Bootstrap 3 در تگ های عنوان یا <h1> تا <h6> استفاده می کند.
در کد مثال عملی زیر، نحوه کاربرد تگ های عنوان در بوت استرپ 4 و خروجی آن ها را نشان داده ایم :

مثال 1

<div class="container">

<h1>h1 Bootstrap heading (2.5rem = 40px)</h1>

<h2>h2 Bootstrap heading (2rem = 32px)</h2>

<h3>h3 Bootstrap heading (1.75rem = 28px)</h3>

<h4>h4 Bootstrap heading (1.5rem = 24px)</h4>

<h5>h5 Bootstrap heading (1.25rem = 20px)</h5>

<h6>h6 Bootstrap heading (1rem = 16px)</h6>

</div>

h1 Bootstrap heading (2.5rem = 40px)

h2 Bootstrap heading (2rem = 32px)

h3 Bootstrap heading (1.75rem = 28px)

h4 Bootstrap heading (1.5rem = 24px)

h5 Bootstrap heading (1.25rem = 20px)

h6 Bootstrap heading (1rem = 16px)

آموزش کار با عنوان ها (Headings) در بوت استرپ 4:

عنوان های مخصوص بوت استرپ 4 با کلاس display کمی متفاوت تر از تگ های عنوان HTML با تگ <h1> تا <h6> هستند. این عنوان ها، دارای سایز نوشته بزرگتر (font-size) ولی پهنای قلم (font-weight) کمتر نسبت به تگ های <h> هستند.
برای این عنوان ها، چهار کلاس displsy-1، display-2، display-3 و display-4 در بوت استرپ 4 ، تعریف شده اند که می توانید یکی از آن ها را انتخاب نمایید.
در کد مثال عملی زیر، نحوه استفاده از کلاس های جدید Heading در بوت استرپ 4 و خروجی آن ها نشان داده شده اند :

مثال 2

<div class="container">

<h1>Display Headings</h1>

<p>Display headings are used to stand out more than normal headings (larger font-size and lighter font-weight):</p>

<h1 class="display-1">Display 1</h1>

<h1 class="display-2">Display 2</h1>

<h1 class="display-3">Display 3</h1>

<h1 class="display-4">Display 4</h1>

</div>

آموزش کاربرد تگ <small> در بوت استرپ 4:

از تگ <small> در Bootstrap 4 برای ایجاد یک متن کوچکتر و غیر اصلی در عنوان ها استفاده می شود.

راهنمایی :

برای کارکرد صحیح تگ <small< ، این تگ بایستی درون تگ های <h1< تا <h6< و یا تگ های نوشته با کلاس .display.* قرار بگیرد.

در کد مثال عملی زیر، نحوه استفاده از تگ <small> و نتیجه آن را در خروجی نشان داده ایم:

مثال 3

<div class="container">

<h1>Lighter, Secondary Text</h1>

<p>The small element is used to create a lighter, secondary text in any heading:</p>

<h1>h1 heading <small>secondary text</small></h1>

<h2>h2 heading <small>secondary text</small></h2>

<h3>h3 heading <small>secondary text</small></h3>

<h4>h4 heading <small>secondary text</small></h4>

<h5>h5 heading <small>secondary text</small></h5>

<h6>h6 heading <small>secondary text</small></h6>

</div>

آموزش کاربرد تگ <mark> در Bootstrap 4:

در صورت قرار دادن یک متن درون تگ <mark> ، بوت استرپ 4، آن متن را برای پس زمینه زرد و کمی حاشیه درونی (padding) نمایش خواهد داد.
در کد مثال عملی زیر، نحوه استفاده از تگ <mark> و خروجی آن را نشان داده ایم:

مثال 4

<div class="container">

<h1>Highlight Text</h1>

<p>Use the mark element to <mark>highlight</mark> text.</p>

</div>

آموزش کاربرد تگ <abbr> در بوت استرپ 4:

در صورت قرار دادن متن درون تگ <abbr> ، چهارچوب کاری بوت استرپ 4، آن متن را با یک حاشیه زیرین خط چین و نقطه نقطه نمایش می دهد.
در کد مثال عملی زیر، نحوه استفاده از تگ <abbr> را در عمل نشان داده ایم:

مثال 5

<div class="container">

<h1>Abbreviations</h1>

<p>The abbr element is used to mark up an abbreviation or acronym:</p>

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

</div>

آموزش کاربرد تگ <blockquote> در Bootstrap 4:

آموزش طراحی وب

با اضافه کردن کلاس .blockquote به تگ <blockquote> در بوت استرپ 4، می توانید یک متن را به صورت درج زیرنویس (مثلا اشاره به مرجع مطلب در نوشته ها) در زیر یک متن اصلی نمایش دهید. همانند کد مثال عملی زیر:

مثال 6

<div class="container">

<h1>Blockquotes</h1>

<p>The blockquote element is used to present content from another source:</p>

<blockquote>

<p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>

<p>From WWF's website</p>

</blockquote>

</div>

آموزش کار با تگ <dl> در Bootstrap 4:

بوت استرپ 4، تگ <dl> را با زیر لیست های آن ( تگ های <dt> و <dd> ) به صورت زیر نشان می دهد:

مثال 7

<div class="container">

<h1>Description Lists</h1>

<p>The dl element indicates a description list:</p>

<p>Coffee</p>

<p>- black hot drink</p>

<p>Milk</p>

<p>- white cold drink</p>

</div>

آموزش کار با تگ <kbd> در Bootstrap 4:

بوت استرپ 4، متن درون تگ <kbd> را با پس زمینه تمام مشکی و رنگ نوشته سفید نمایش می دهد. در کد مثال عملی زیر، نحوه استفاده از تگ <kbd> و خروجی آن را نشان داده ایم:

مثال 8

<div class="container">

<h1>Keyboard Inputs</h1>

<p>To indicate input that is typically entered via the keyboard, use the kbd element:</p>

<p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>

</div>

پایان بخش دوم آموزش بوت استرپ 4

به زودی با بخش سوم آموزش Bootstrap 4 بر می گردم

آموزش Bootstrap

سلام با بخش اول آموزش Bootstrap 4 ( از دوره آموزش طراحی سایت ) در خدمت شما هستیم

بوت استرپ Bootstrap

بوت استرپ Bootstrap یک چهارچوب کاری رایگان طراحی سمت کاربر یا فرانت اند (front end) است که به منظور طراحی سریع تر و ساده تر برنامه ها و وب سایت های اینترنتی ایجاد شده است.

• بوت استرپ (Bootstrap) شامل تمپلیت های آماده مبتنی بر HTML و CSS برای کار با فرم ها (Forms)، دکمه ها (Buttons)، جدول ها (Tables)، نوار پیمایش مسیر (Navigation)، تصاویر (Images)، کادرهای محاوره ای (Models)، اسلایدها، کار با متن (Typography) و ابزارهای بسیار دیگری است. چهارچوب کاری Bootstrap حاوی افزونه (plug-in) های آماده بسیاری مبتنی بر جاوا اسکریپت، جهت پویا نمایی سایت ها نیز می باشد.
• آموزش طراحی سایت
• چهارچوب کاری بوت استرپ (Bootstrap)، به سادگی امکان طراحی وب واکنش گرا و انعطاف پذیر (Responsive Design) جهت نمایش وب سایت ها در انواع و سایزهای مختلف نمایشگر را فراهم کرده است.

راهنمایی : طراحی وب واکنش گرا (Responsive Web Design) چیست؟

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

یک مثال ساده طراحی وب سایت با Bootstrap 4:

در کد مثال عملی زیر، یک صفحه وب معمولی را با استفاده از چهارچوب کاری Bootstrap 4 ، طراحی کرده ایم.
این صفحه دارای یک هدر و سه ستون متنی است که به صورت اتوماتیک و برحسب اندازه صفحه نمایش دهنده سایت، چیدمان و عرض اجزای آن تنظیم می شود .

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

مثال 1:

<div class="container">

<div class="row">

<div class="col-sm-4">

<h3>Column 1</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

</div>

<div class="col-sm-4">

<h3>Column 2</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

</div>

<div class="col-sm-4">

<h3>Column 3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

</div>

</div>

</div>

مقایسه Bootstrap 4 با Bootstrap 3:

بوت استرپ Bootstrap 4 (بوت استرپ) ورژن جدیدتر بوت استرپ است که با کامپوننت های جدید، Stylesheet سریع تر و قابلیت واکنش گرا بودن بیشتر و بهتر.

بوت استرپ Bootstrap 4 از تمامی پلتفرم ها و آخرین نسخه های مرورگرهای اصلی، پشتیبانی می کند ولی از مرورگرهای 9IE و پایین تر، پشتیبانی نمی کند.

راهنمایی 1 :

اگر می خواهید Bootstrap را در مرورگرهای IE8و IE9 به کار ببرید، بایستی از Bootstrap ورژن 3، استفاده کنید. ورژن 3 ، پایدارترین نسخه Bootstrap است و همچنان توسط سیستم Bootstrap، جهت برطرف کردن باگ های خطرناک و ارائه مستندات آموزشی، پشتیبانی می شود.

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

راهنمایی 2 - عدم پشتیبانی از برخی از آیکون ها :

بوت استرپ Bootstrap 4 از آیکون های BS3 Glyphicons، پشتیبانی نمی کند. در Bootstrap 4 از Font Awesome و سایر کتابخانه های آماده آیکون، استفاده نمایید.

چرا بایستی از Bootstrap استفاده کنیم؟

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

• راحتی در استفاده : هر کاربری حتی با دانش کمی از HTML و CSS می تواند به راحتی شروع به استفاده از Bootstrap 4 نماید.
• قابلیت واکنش گرایی بیشتر: در نسخه Bootstrap 4، قابلیت طراحی وب واکنش گرا یا Responsive Design به وسیله CSS بهتر شده و برای انواع موبایل ها، تبلت ها و کامپیوترهای رومیزی تنظیم گشته است.
• راهکار طراحی اولیه جهت موبایل (Mobile First Design): در نسخه جدید بوت استرپ 4، استایل های طراحی جهت موبایل (دستگاه با صفحات کوچک)، به عنوان هسته اصلی چهارچوب کاری Bootstrap 4 تعریف شده است.
• سازگار بودن با انواع مرورگر : بوت استرپ 4 با تمامی مرورگرهای اصلی از جمله کروم، فایرفاکس، IE10، Edge، سافاری و اپرا کاملا سازگار است.

بوت استرپ Bootstrap 4 را از کجا دریافت کنیم؟

دو راه اصلی جهت استفاده از Bootstrap 4 بر روی وب سایت ها وجود دارد :

• خواندن آنلاین فایل های Bootstrap 4 از طریق یک توزیع کننده آنلاین وب یا CDN.
• دانلود فایل های Bootstrap 4 از سایت getbootstrap.com و اضافه کردن آن ها در هاست سایت مورد نظر.
• آموزش طراحی سایت

آموزش کار با توزیع کننده های آنلاین Bootstrap یا CDN:

اگر نمی خواهید فایل های بوت استرپ 4 را دانلود کرده و آن ها را به صورت فیزیکی بر روی هاست سایت خود قرار دهید، می توانید آن ها را از یک فراهم کننده آنلاین محتوا یا CDN به صفحه اضافه کنید.
یکی از توزیع کننده های آنلاین فایل های Bootstrap، MaxCDN است که از فایل های CSS و جاوا اسکریپت لازم، پشتیبانی می کند.
برای الحاق آنلاین فایل های Bootstrap به وب سایت هدف، از طریق MaxCDN، بایستی کد زیر را در صفحه قرار دهید. توجه داشته باشید Bootstrap برای اجرا به jQuery نیاز داشته و بایستی لینک آن ها هم اضافه شود :

<!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery library -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">

<!-- Popper JS -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">

<!-- Latest compiled JavaScript -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">

راهنمایی : مزیت استفاده از CDN Bootstrap چیست؟

بسیاری از کاربران، پیش از ورود به سایت شما، هنگام مشاهده سایت های دیگر، Bootstrap 4 را از MaxCDN دانلود کرده و به نوعی در حافظه موقت مرورگرشان قرار دارد. در نتیجه، در هنگام مشاهده سایت شما، فایل های Bootstrap از حافظه Cache مرورگر لود شده و سرعت بارگذاری صفحه شما، بسیار بالاتر می رود.
از طرف دیگر، بیشتر CDN ها، هنگامی که کاربری فایل هایی را از آن ها درخواست می کند، سعی می کنند تا از طریق نزدیک ترین سرور، فایل ها را برای کاربر ارسال کرده و خود این نیز به سرعت بارگذاری صفحات کمک خواهد کرد.

راهنمایی 2 : چرا بایستی jQuery یا Propper را همراه Bootstrap اضافه کنیم؟

بوت استرپ Bootstrap 4 از کتابخانه های آماده jQuery یا Propper برای اجرای افزونه یا کامپوننت های جاوا اسکریپتی مثل کادرهای محاوره ای (Models)، پیام ها tooltip، منوهای پاپ آپ و ... استفاده می کند، بنابراین بایستی این فایل ها هم اضافه شوند.
اما اگر فقط از بخش CSS Bootstrap استفاده می کنید، نیازی به اضافه کردن لینک jQuery یا Propper وجود ندارد.

آموزش طراحی وب

آموزش دانلود فایل های Bootstrap 4:

اگر می خواهید فایل های Bootstrap 4 را دانلود کرده و در هاست سایت خود قرار دهید، می توانید به آدرس getbootstrap.com رفته و مراحل لازم را انجام دهید.

آموزش طراحی اولین صفحه وب با Bootstrap 4:

مرحله 1 - اضافه کردن تگ اصلی HTML 5 Doctype:

بوت استرپ Bootstrap 4 از تگ های HTML و خواص CSS استفاده می کند، که لازم است تگ اصلی HTML5 یا doctype به صفحات وب اضافه شود.
همواره همانند کد زیر، تگ HTML 5 doctype را در ابتدای صفحات اضافه کرده و خواص lang(زبان) و سیستم کدینگ (charset) مناسب را تعیین نمایید :

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

</head>

</html>

مرحله 2 - Bootstrap 4 پیش فرض نمایش در موبایل است (Mobile First Design) :

بوت استرپ Bootstrap 4 به گونه ای طراحی شده است تا بهترین نمایش را در درجه اول درون صفحات موبایل ها داشته باشد و فایل های stylesheet مخصوص صفحه نمایش های کوچک، هسته اصلی چهارچوب کاری Bootstrap است. برای اطمینان از نمایش صحیح و zoom صحیح و لمسی، تگ <meta> زیر را درون بخش <head> صفحه قرار دهید :

<meta name="viewport" content="width=device-width, initial-scale=1">

در کد فوق، خاصیت width=device-width باعث می شود همواره عرض صفحه معادل عرض صفحه نمایش دهنده آن باشد که البته در دستگاه های مختلف، متفاوت خواهد بود.
همچنین خاصیت initial-scale=1، تعیین می کند زوم اولیه جهت نمایش صفحه 1 یا 100 درصد بوده که به معنای عدم زوم اولیه است.

مرحله 3 - تعیین عنصر دربرگیرنده اصلی محتویات صفحه (Containers):
بوت استرپ 4 برای دربرگرفتن کلیه اجرای صفحه به یک عنصر مادر یا Container نیاز دارد. در چهارچوب Bootstrap 4 دو نوع Container تعریف شده که می توانید از هر کدام استفاده نمایید :

• کلاس container. : یک عنصر دربرگیرنده با قابلیت طراحی واکنش گرا ایجاد می کند که عرض آن معمولا کمی کمتر از عرض کل صفحه نمایش است.
• کلاس container-fluid. : یک دربرگیرنده با عرض کامل (full width container) ایجاد می کند که تمامی عرض صفحه نمایش را در بر می گیرد.

در شکل کد مثال عملی زیر، هر دو نوع container Bootstrap را نشان داده ایم:

container Bootstrap

آموزش دو مثال عملی طراحی صفحه در Bootstrap 4:

مثال1: در کد مثال عملی زیر، یک صفحه ساده با Bootstrap 4 ایجاد کرده ایم که از عنصر دربرگیرنده با کلاس container. استفاده می کند. همانطور که در خروجی مشاهده می کنید، عرض صفحه کمی کمتر از عرض صفحه نمایش است و همواره حاشیه ثابت دارد.

مثال 2

<p>Bootstrap 4 Example</p>

<div class="container">

<h1>My First Bootstrap Page</h1>

<p>This is some text.</p>

</div>

مثال2: در کد مثال زیر، کد قبل را بازنویسی کرده و این بار از یک عنصر دربرگیرنده با کلاس container-fluid استفاده کرده ایم. همانطور که در خروجی مشاهده می کنید، محتویات کل عرض صفحه را گرفته در هر اندازه ای حالت تمام صفحه دارند :

مثال 3:

<div class="container-fluid">

<h1>My First Bootstrap Page</h1>

<p>This is some text.</p>

</div>

با ادامه بخش دوم آموزش Bootstrap 4 همراه ما باشید