بهترین سایت برای توسعه دهندگان وب

دروس HTML5

شروع HTML مقدمه HTML ویرایشگران HTML مثالهای اساسی HTML المان های HTML ویژگی های HTML عناوین HTML بندهای HTML سبک های HTML قالب بندی HTML نقل قول های HTML نظرات HTML رنگهای HTML HTML و CSS پیوندهای HTML تصاویر HTML جداول HTML لیست های HTML بلوک های HTML کلاس های HTML شناسه های HTML فریم های HTML HTML و JavaScript مسیرهای پرونده HTML HTML قسمت هدینگ چیدمان های HTML HTML پاسخگو کد رایانه HTML موجودیت HTML نمادهای HTML رمزگذاری HTML رمزگذاری URL HTML HTML و XHTML

HTML فرم ها

فرم های HTML عناصر فرم HTML انواع ورودی HTML صفات ورودی HTML

HTML5

مقدمه HTML5 پشتیبانی HTML5 عناصر جدید HTML5 عناصر معنایی HTML5 مهاجرت از HTML4 راهنمای سبک HTML5

HTML گرافیک

HTML Canvas HTML SVG

HTML رسانه

HTML ویدیوی HTML صوت HTML افزونه های HTML یوتیوب HTML

HTML API

مکان جغرافیایی HTML کشیدن / رها کردن HTML HTML ذخیره وب HTML کارهای وب HTML و SSE

HTML مثال

مثالهای HTML آزمون ها HTML تمرینات HTML گواهی HTML خلاصه HTML قابلیت دسترسی به HTML

HTML منابع

لیست برچسب های HTML صفات HTML صفات جهانی HTML رویدادهای HTML رنگهای HTML کانواس HTML صوتی / تصویری HTML نسخه معتبر HTML مجموعه نویسه های HTML رمزگذاری URL HTML رمزگذاری زبان HTML پیام های HTTP روشهای HTTP مبدل PX به EM میانبرهای صفحه کلید

HTML5 درسهایی برای مبتدیان

طراحی وب واکنشگرا در HTML

یک طراحی واکنشگرا صفحه وب شما را در هر دستگاهی که باشد مناسب آن دستگاه نشان می دهد.

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


Responsive

طراحی وب ریسپانسیو چیست؟ (واکنشگرا)

طراحی وب واکنشگرا استفاده از HTML و CSS برای تغییر اندازه ، مخفی کردن ، کوچک کردن یا بزرگ کردن خودکار یک وب سایت است تا در همه دستگاه ها (دسک تاپ ، رایانه لوحی و تلفن) ظاهر خوبی داشته باشد:

خودتان آزمایش کنید »

توجه: وب سایت شما باید در تمامی دستگاه ها ظاهر مناسب و خوب داشته باشد


تنظیم Viewport

برای ایجاد یک وب سایت پاسخگو ، برچسب <meta> زیر را به تمام صفحات وب خود اضافه کنید:

مثال

<meta name="viewport" content="width=device-width, initial-scale=1.0">
خودتان آزمایش کنید »

با این کار نمای صفحه شما تنظیم می شود ، که به شما دستورالعمل هایی برای کنترل اندازه و مقیاس صفحه می دهد.

در اینجا مثالی از یک صفحه وب بدون متا برچسب ویوپورت و همان صفحه وب با متا برچسب مشاهده وجود دارد:

بدون نمای Viewport :
Без метатега viewport
با نمای Viewport:
Из метатегом viewport

نکته : : اگر در حال مرور این صفحه از طریق تلفن یا رایانه لوحی هستید ، می توانید روی دو پیوند بالا کلیک کنید تا تفاوت را ببینید.


تصاویر واکنشگرا

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

با استفاده از ویژگی عرض (width)

اگر ویژگی width روی 100٪ تنظیم شود ، تصویر پاسخگو خواهد بود و مقیاس بالا و پایین می رود:

Девушка

مثال

<img src="img_girl.jpg" style="width:100%;">
خودتان آزمایش کنید »

توجه داشته باشید که در مثال بالا ، تصویر می تواند بزرگتر از اندازه اصلی خود باشد. در بسیاری از موارد ، راه حل بهتر استفاده از ویژگی حداکثر عرض max-width به جای آن خواهد بود.

با استفاده از ویژگی حداکثر عرض ( max-width)

اگر ویژگی حداکثر عرض max-width روی 100٪ تنظیم شود ، در صورت لزوم ، تصویر پایین می آید ، اما هرگز اندازه آن بزرگتر از اندازه اصلی نیست:

Девушка

مثال

<img src="img_girl.jpg" style="max-width:100%;height:auto;">
خودتان آزمایش کنید »

نمایش تصاویر مختلف بسته به عرض مرورگر

المان <picture> به شما امکان می دهد تصاویر مختلفی را برای اندازه های مختلف پنجره مرورگر تعریف کنید.

اندازه پنجره مرورگر را تغییر دهید تا ببینید که تصویر زیر بسته به عرض تغییر می کند:

Flowers

مثال

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 600px)">
  <source srcset="img_flowers.jpg" media="(max-width: 1500px)">
  <source srcset="flowers.jpg">
  <img src="img_smallflower.jpg" alt="Flowers">
</picture>
خودتان آزمایش کنید »

اندازه متن واکنشگرا

اندازه متن را می توان با یک واحد "vw" تنظیم کرد ، که به معنای "عرض دید" "viewport width" است.

به این ترتیب اندازه متن از اندازه پنجره مرورگر پیروی می کند:

سلام دنیا

برای دیدن نحوه اندازه گیری اندازه متن ، پنجره مرورگر را تغییر اندازه دهید.

مثال

<h1 style="font-size:10vw">سلام دنیا</h1>
خودتان آزمایش کنید »

Viewport اندازه پنجره مرورگر است. 1vw = 1٪ از عرض دید. اگر عرض دید 50 سانتی متر باشد ، 1vw 0.5 سانتی متر است.


درخواست های رسانه (Media Queries)

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

با درخواست های رسانه ای می توانید سبک های کاملاً متفاوتی را برای اندازه های مختلف مرورگر تعریف کنید.

مثال: اندازه پنجره مرورگر را تغییر دهید تا ببینید سه المان div زیر به صورت افقی در صفحه های بزرگ نمایش داده می شوند و به صورت عمودی روی صفحه های کوچک قرار می گیرند:

منو اصلی


منو راست


مثال

<style>
.left, .right {
  float: left;
  width: 20%; / * عرض 20٪ است ، به طور پیش فرض * /
}

.main {
  float: left;
  width: 60%; / * عرض 60٪ است ، به طور پیش فرض * /
}

/* برای افزودن نقطه شکست در 800px از درخواست رسانه استفاده کنید: */
@media screen and (max-width: 800px) {
  .left, .main, .right {
    width: 100%; / * عرض 100٪ است ، هنگامی که نمای نمایش 800px یا کوچکتر است * /
 }
}
</style>
خودتان آزمایش کنید »

صفحه وب واکنشگرا - مثال کامل

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

خودتان آزمایش کنید »


طراحی وب واکنشگرا - چارچوب ها Frameworks

همه چارچوب های محبوب CSS طراحی واکنشگرا را ارائه می دهند.

آنها رایگان هستند و استفاده از آنها آسان است.

استقاده از W3.CSS

W3.CSS یک چارچوب CSS مدرن است که به طور پیش فرض از طراحی دسک تاپ ، تبلت و موبایل پشتیبانی می کند.

W3.CSS کوچکتر و سریعتر از چارچوبهای CSS مشابه است.

W3.CSS به عنوان یک جایگزین با کیفیت بالا برای Bootstrap طراحی شده است.

W3.CSS به گونه ای طراحی شده است که مستقل از jQuery یا هر کتابخانه JavaScript دیگری باشد.

W3.CSS نسخه ی نمایشی

تغییر اندازه صفحه برای دیدن واکنشگرایی!

لندن

لندن پایتخت انگلیس است.

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

تهران

تهران پانزدهمین شهر پرجمعیت جهان با مساحت ۷۳۰ کیلومتر مربّع است که به همراه توابع خود جمعیتی بالغ بر ۱۴ میلیون نفر دارد.

این شهر به لحاظ بزرگی بیست و هشتمین شهر دنیا است

توکیو

توکیو پایتخت ژاپن است.

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

مثال

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.farsiw3.ir/w3css/4/w3.css">
<body>

<div class="w3-container w3-green">
  <h1>نسخه نمایش w3cc</h1>
  <p>این صفحه را اندازش را تغییر دهید</p>
</div>

<div class="w3-row-padding">
  <div class="w3-third">
    <h2>London</h2>
    <p>لندن پایتخت انگلیس است.</p>
    <p>بیشترین است شهر پرجمعیت در انگلستان ،
    با یک منطقه شهری با بیش از 13 میلیون نفر سکنه.</p>
  </div>

  <div class="w3-third">
    <h2>تهران</h2>
    <p>تهران پانزدهمین شهر پرجمعیت جهان با مساحت ۷۳۰ کیلومتر مربّع است که به همراه توابع خود جمعیتی بالغ بر ۱۴ میلیون نفر دارد. </p>
    <p>این شهر به لحاظ بزرگی بیست و هشتمین شهر دنیا است
    که تراکم جمعیت آن بین ده هزار و هفتصد تا بیش از یازده هزار نفر در هر کیلومتر مربع است.</p>
  </div>

  <div class="w3-third">
    <h2>توکیو</h2>
    <p>توکیو پایتخت ژاپن است. </p>
    <p>این مرکز منطقه بزرگ توکیو است ،
    و پرجمعیت ترین منطقه شهری در جهان است.</p>
  </div>
</div>

</body>
</html>
خودتان آزمایش کنید »

برای کسب اطلاعات بیشتر در مورد W3.CSS ، آموزش W3.CSS ما را بخوانید.


Bootstrap

یکی دیگر از چارچوب های محبوب CSS ، بوت استرپ است. بوت استرپ از HTML ، CSS و jQuery برای ایجاد صفحات وب پاسخگو استفاده می کند.

مثال

<!DOCTYPE html>
<html lang="en">
<head>
<title> مثال بووت استرپ</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="jumbotron">
    <h1>اولین صفحه بوت استرپ من</h1>
  </div>
  <div class="row">
    <div class="col-sm-4">
      ...
    </div>
    <div class="col-sm-4">
      ...
    </div>
    <div class="col-sm-4">
    ...
    </div>
  </div>
</div>

</body>
</html>
خودتان آزمایش کنید »

برای کسب اطلاعات بیشتر در مورد بوت استرپ ، به آموزش بوت استرپ ما بروید.







این سایت برای آموزش ، آزمایش و یادگیری بهینه شده است. نمونه ها را می توان برای بهبود ساده کرد خواندن و درک اساسی. آموزشها ، پیوندها و مثالها مرتباً تجدید نظر می شوند تا از آنها جلوگیری شود خطاها ، اما ما نمی توانیم صحت و عملکرد کامل همه مطالب را تضمین کنیم. با استفاده از این سایت ، شما موافقت می کنید که مطالعه کرده اید و پذیرفته ایدمقررات استفاده , کوکی و سیاست های حفظ حریم خصوصی. کپی رایت 1999-2020 حق چاپ و .. محفوظ توسط احمد فرجی
سایت توسط چارچوب farsiw3.ir طراحی شده است.

Farsiw3.ir