ایجاد شده در ۰۹ آبان ۱۳۹۹
نکته : ما به زبانی میایم و میگیم زبان برنامه نویسی که بتوانیم در داخل آن یک login رو پیاده سازی کنیم و در آن از آرایه‌ها و متغیر‌ها استفاده بکنیم
یک زبان نشانه گزاری ابر متن که از آن برای مشخص کردن ماهیت Html : Hyper Text markup lanquage
عناصر و المان هامون در داخل صفحه ی وب میایم و استفاده میکنیم
یک شیوه نامه اجباری برای دادن رنگ و لواب به وب سایت امون هستش :CSS : Sheet Style Cascading
ساختار درختی مرورگرمون که دارای مفاهیم زیر هستش : ( DOM ( Document Object Model
1- Document : به سند وب ما یا همون سند html امون میگویند که حکم زمین که درختمون درش قرار داره رو میگیره
نکته »
<!DOCTYPE html>زمانی که ما میخاهیم از html۵ استفاده بکنیم باید بیایم و از این تگ استفاده بکنیم نوع رو مشخص میکنیم که چه ورژنی هستش و به مرورگر ما کمک میکند که صفحه پیج و غالب ما رو چطوری بیاد و به درستی نمایش بدهد و کلن یک بارم از این تگ بیشتر استفاده نمیکنیم و قبل همه تگ‌ها هم هستش
2- تگ html
<html></html>
این تگ ریشه کل تگ‌های موجود در سندهامون که همه اون هارو در بر میگیرد همچنین میگوید ریشه ی سند ما html هست و طبق مثال ریشه درختمون هستش
<html lang="en" dir="ltr" >
این تگ دو تا پراپرتی مهم دارد که طبق مثال بالا اولی برای مشخص کردن زبان وب سایت ما هستش و دومی برای مشخص کردن جهت سند وب سایت ما هستش
3- تگ head
<head></head>این تگ شاخه‌های درختمون هستش و بیشتر جنبه ی مفهومی برای موتور‌های جست و جو مرورگرا داره برای مثال تگ‌های مربوط به title یا عنوان میاد و در داخل اون قرار میگرد همچنین تگ‌های مربوط به meta خلاصه کدهایی که نیازی نیست که کاربرمون بیاد و اونها رو ببینه در داخل این تگ هست
<meta charset="UTF-8">
این ویژگی یا خاصیت میاد و نوع کاراکترهای مارا مشخص میکند که کاراکترهای برنامه مارو بیاد و درست نمایش بده
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1 2 3ویژگی یا خاصیت name هنگامی که میخاهیم طراحی ریسپانسیو انجام بدهیم از این ویژگی استفاده میکنیم
ویژگی یا خاصیت content میگوید که بیا و به اندازه عرض سندمون بیا و عرض بگیرد
ویژگی یا خاصیت inital برای جلوگیری از درگ کردن و قالبمون برای چپ و راست رفتن و نشه فوکوس کرد بزرگ نمایی کرد
4- body
<body></body>تنه ی درختمون هستش و اون کد‌ها و مطالبی که نیاز هست تا کاربرمون اون هارو ببینه و تنها محتواهای این تگ به کاربرامون نمایش داده میشود
مفهوم Box Model : به ترکیب طول و عرض و margin و padding و border یک عنصر میگویند که باعث ایجاد این مفهوم میشود و تمام عناصر در داخل صفحات وب امان این ماهیت را دارد و یک مربع و یک مستطیل هستش
تگ‌های formating
------------------------
1- strong : برای بولد کردن یک تگ میایم و از آم استفاده میکنیم
2- i : برای درست کردن یک نوشته به صورت ایتالیک هستش
3- del : این تگ میاد و یک خط روی متن امون قرار میدهد مثال اش برای تخفیف‌ها هستش که مثلا ۵۰۰ هزار با این تگ روش خط کشیده و ۴۵۰ رو نشون مید
4- ins : میاد و یک خط رو زیر متن امون قرار میده
5- sub & sup : از این تگ‌ها برای امور مربوط به ریاضیات استفاده میکنیم
6- abbr : این تگ برای خلاصه و کوتاه کردن هستش و یک Atribute میگیرد به نام title که توضیح کاملون رو در این جا قرار میدهیم وقتی از این تگ استفاده میکنیم یک نقطه چین برای متن امون نشون میدهد و وقتی کاربر اومد و روی اون متن امون هاور کرد تایتل امون رو بهش نشون مید
7- span و p
8- a از این تگ برای لینک‌ها استفاده میکنیم و دو تا ویژگی یا صفت مهم دارد href : همون لینک وب سایتی که در داخل اون قرار میدهیم target : و مقدار _blank که این ویژگی با این مقدار به ما میگوید که وقتی روش کلیک شد و بیا و یک صفحه ی جدید برامون درست کن
نکته :
تگ div : از این تگ موقعی که میخاهیم از یک محدوده کلی برای عناصرمون در نظر بگیریم استفاده میکنیم این تگ‌ها در بر گیرند یک سری تگ دیگه هستند و ماهیت بلاک دارند
تگ span مشابه تگ div هست با این تفاوت که به صورت inline هستش و عرض رو پر نمیکنن
style ---------------------------------------
1- font-size & font-color و font-family برای مشخص کردن نوع فونت و اندازه و رنگ فونت امون میایم و استفاده میکنیم
نکته : برای استفاده از فونت‌ها در داخل صفحات وب امون ما دو تا راه داریم یک بیایم و از CDNها استفاده بکنیم که فضاهایی در بستر وب که یک چیز مشابه مثلا یک پکیج رو یا فایل مشابه در جاهای مختلف دنیا رو سرو‌های مختلفی قرار گرفته و زمانی که ما از اون استفاده میکنیم زمانی که یک درخواست به سمت سرور ارسال میشود به نزدیک‌ترین سرور که اون فایل رو داره میره و در اون جا اون فایل رو میخونه و باعث افزایش سرعت لود وبسایت امون میشود و یا این که بیایم و از فایل‌های فونت در داخل پروژه امون استفاده بکنیم
که به شیوه زیر از آن‌ها استفاده میکنیم حال font-faceهای مختلفشون
@font-face{
font-family: sahel;
src: url('../fonts/Sahel.eot') format('eot'),
url('../fonts/Sahel.woff')format('woff'),
url('..fonts/Sahel.woff2') format('woff2');
}
نکته : فرمت‌های از نوع TTF قالبا برای سیستم عامل‌ها مثل مک و ویندوز هستند و برای وب ما باید بیایم و از فرمت‌های woff و فرمت eot که ماکروسافت طراحی کرده استفاده میکنیم همچنین برای استفاده از فونت‌های گوگل هم میتوانیم از وب سایت fonts.google.com بیایم و استفاده بکنیم
2- text-align : اگر خواستیم متن ما بیاید و شیوه قرار گرفتن اشو در داخل المنت بلاکی تکس کنترل کنیم یا به عبارتی align کردن اون رو انجام بدهیم میایم و از این پراپرتی استفاده میکنیم که مقادیر center and left and Right اون به ترتیب در وسط چپ و راست المان تکس امون قرار میدهد همچنین مقادیر دیگه هم میگیرد که مختصرا توضیح میدهیم
justify : هنگامی که ما اومدیم و یک متن طولانی رو قرار دادیم وخواستیم لبه‌های متن مارو برامون تراز میکند از این مقدار برای این پراپرتی استفاده میکنیم
3- line-height : این پراپرتی میاد و فاصله بین خطوط رو هم برای ما مشخص میکند که باعث خوانایی بیشتر متن امون برای کاربر میشود و برای مقدارش سایز فونتمون هرچی هست ضرب در ۵.۱ برای متون فارسی بشه و ۶.۱ برای متون انگلیسی بشود تا مقدار بهتری رو بگیره
4- text-decoration : این پراپرتی میاد و یک خط رو برای متن‌های ما قرار میدهد و مقادیری که میگیرد به شرح زیر هست overline میاد و یک خط در بالای متن ما قرار میدهد underline میاد و یک خط در زیر خطوط ما میکشد و آخری through-line میاد و یک خط بر روی متن ما میکشد و none هم میاد و هیچ مقداری را نمیگیرد
5- text-transform : این پراپرتی بیشتر برای متون انگلیسی کاربرد دارد که مقادیر مختلفی دارد که به شرح اونا می‌پر دازیم مقدار capitalize میاد و کاراکترهای اول کلمات رو بزرگ در نظر میگیرد یعنی به ازای هرکلمه ای که اسپیس می‌خورد بزرگ میکند مقدار UpperCase همه ی کاراکترها رو بزرگ میکند مقدار lowerCase میاد و همه ی کاراکترها رو کوچک میکند
6- text-indent : میاد و برای خط اول متن امون عمل میکند و یک جورایی جایگزین padding-right هستش یعنی فاصله داخلی از المان پرنت که از سمت راست اعمال میشود
7- letter-spacing : این پراپرتی فاصله بین کاراکتر هامون رو مشخص میکند که مقدار‌های عددی مثبت و منفی هم میگیرد
8- word-spacing : مثل پراپرتی بالایی هست فقط برای کلمه‌ها میاد و اعمال میشود
9- text-shadow : این پراپرتی میاد و یک افکتی رو در داخل متن امون ایجاد میکند و ۴ تا ورودی میگیرد که سه تاش عددی و آخری رنگ هستش که اولین مقدار فاصله هست که این سایه از محور xها میاد و میگیرد و مقدار دومی فاصله ای هست که از محور y میگیرد و مقدار سومی blur میاد و محو بودن سایه رو مشخص میکند و مقدار چهارم هم رنگ سایه امون رو برامون مشخص میکند
10- white-space : no-wrap : اگر ما بیایم و یک متن طولانی رو قرار بدهیم و ارتفاع برای اون قرار ندهیم و فقط عرض مشخص کرده باشیم میاد و به طور خودکار طول المان امون رو زیاد میکند تا متن ما به طور کامل درون اون جا بشه حال با قرار دادن این پراپرتی و قرار دادن این مقدار میاد و جلو ی این کار خودکار رو میگیره و مقدار عرض رو به طور خودکار زیاد میکند
11- word-wrap : break-word : یک موقع هست ما یک کلمه ای رو داریم که میاد و طول این کلمه از عرض المان داخلش بیشتر میشه و میزنه بیرون برای شکستن این کلمه باید بیایم و این پراپرتی رو قرار بدهیم
12- word-break : break-all : یک جورایی جاگزین justify : text-align هست با این تفاوت که برای تراز کردن میاد و کلمه‌ها رو هم میکشونه
13- over-flow : اگر برای یک المان شرایط بالا صدق کنه از این پراپرتی استفاده میکنیم که مقادیر مختلفی میگیرد auto این مقدار میاد و برای متن یک اسکرول ویو درست میکند تا اضافه متن با رعایت عرض المان دیده شود hidden این مقدار اون قسمت از متن رو که میاد و عرض المان رو رد میکنه یا بیشتر از اون نشون میده رو پنهان میکند حال برای اینکه متن امون وقتی نزدیک به انتهای المان امون رسید بیاد و یک سه نقطه نشون بدهد باید ویژگی زیر رو براش -overflow : ellipsis بکنیم لحاظ
vertical-align -14 : این پراپرتی میاد و خاصیت align کردن عنصر کناری اون رو مشخص میکند مثلا bottom or top میاد المنت کناری در پان‌ترین و بالاترین جای عنصر پرنت اش قرار میدهد middle میاد و وسط اش میکند ما این خاصیت رو برای بزرگ‌ترین عنصر از نظر ارتفاع در کنار سایر اعضا در نظر میگیریم مثلا baseline میاد در جایی که ارتفاع اون عنصر تموم شده قرار اش میدهد ما میتوانیم مقدار عددی هم بدهیم برای بالا پان کردنش که هم مثبت هم منفی
baseline : خط پایه عنصر را با خط پایه عنصر والدش هم تراز میکند. این مقدار پیش فرض است.
top : لبه بالایی عنصر هم تراز با بلندترین عنصر خط میشود.
middle : عنصر در وسط عنصر والدش قرار میگیرد.
bottom : لبه پانی عنصر هم تراز با پان‌ترین عنصر خط می‌گ
-------------------------------------------------------------------------------------------------------------------------------------
نکته » معرفی پراپرتی important !برای مهم عنوان کردن استایل هامون تا استایلی که داده ایم بیاد و اعمال بشود متناسب با اون طبقه بندی اولیوت اعمال شدن استایل‌ها میایم و از این ویژگی استفاده میکنیم
تگ table جدول ها
جدول‌ها سئو اشون ضعیف هستند زیرا موتور‌های جستجو نمی‌تونند بیان و محتوای داخل اون هارو بخونن و حجم بالایی دارند و سنگینی صفحات وب رو به دنبال دارند و سرعت لود رو پان می‌آورند و رندراشون هم سنگین هستش و موارد استفاده اونها در داخل پنل‌های کاربری هستش و در داخل صفحه‌های اصلی مون سعی شود که از اونها استفاده نکنیم
تگ tr برای درست کردن ردیف در داخل جدول هامون از این تگ استفاده میکنیم
تگ th برای هر سلول میاد و یک هدر رو برای ما مشخص میکند و در داخل تگ‌های tr امون استفاده میکنیم
تگ td به اضای هر تگ بالایی که درست کردیم برای نشون دادن محتواش باید بیایم و از این تگ استفاده بکنیم و در داخل تگ‌های tr امون استفاده میکنیم
تگ caption یک از تگ‌های سماتیک هستش و برای عناوین میایم و از این تگ استفاده میکنیم و این تگ در سئو اهمیت داره عنوان‌ها رو میشه در تگ‌های p و h و span و div هم نوشت ولی بهتره از کپشن استفاده کنیم و در داخل جدول هامون هم برای عنوان جدول از این تگ استفاده میکنیم
تگ thead اگر ما مجموعه ای از ردیف هارو داشته باشیم که مربوط به هدر جدولمون باشد ما میایم و از این تگ‌ها استفاده میکنیم
تگ tbody ما میایم و بدنه جدولمون رو در داخل این تگ قرار میدهیم
تگ tfooter برای قسمت‌های پانی جدولمون و فوتر جدولمون میایم و از محدوده این تگ استفاده میکن
تگ‌های مولتی مدیا ( video and audio ) مشابه یک دیگر هستند
تگ video از این تگ برای قرار دادن کلیپ‌ها و فیلم هامون در داخل وب سایت استفاده میکنیم که یک سری Attribute دارد که اونها رو توضیح میدهیم
Src = در این ویژگی باید بیایم و آدرس فایل ویدیویی امون رو قرار بدهیم
control = این ویژگی میاد و یکسری از ویژگی‌های کنترلی رو برای فیلم امون قرار میدهد مثل نوار ابزار‌های فیلم دکمه استاپ و ....
loop این ویژگی کار که انجام میدهد این هست که وقتی فیلم به انتها رسید دوباره بیاد و از اول شروع به اجرا کردنش کنه
autoplay این ویژگی میاد و موقعی که صفحه وب ما بالا میاد به طور خودکار و بدونه تاد کاربر فیلم رو اجرا میکند
نکته : ما میتوانیم از دو تا منبع برای تگ video امون استفاده کنیم که باید به صورت زیر باشد که اگه فرمت اولی رو نتونست بخونه بره سراغ دوم
------------------------------------------------------------------------------------------------------------------------------------
تگ img ما از این تگ برای قرار دادن تصویر در داخل سندمون میایم و استفاده میکنیم
استایل‌های مربوط
background-color : برای دادن رنگ به پس زمینه المان هامون استفاده میکنیم
background-image : برای دادن یک تصویر به عنوان پس زمینه به المان هامون میایم و استفاده میکنیم
background-repeat : تکرار شدن اون پس زمینه ای که داریم رو میاد و انجام میدهد که مقدار‌های repeat و -no میگیرد رو repeat - x و repeat - y و
background-position میاد و موقعیت قرار گیری پس زمینه ما رو مشخص میکند که به طور پیش فرض سمت چپ هست و میتوانیم به آن مقدار‌های بالا پان راست و چپ و وسط هم بدهیم همچنین ما میتوانیم به آن دو مقدار رو هم بیایم و بدهیم
background-attachment : میاد و تصویر ما رو برای پس زمینه فیکس و ثابت اش میکنه و برای یک سبک از طراحی به نام پارالکس از این استفاده میکنیم برای ثابت بودنه باید مقدار fixed رو بهش بدهیم
نکته : زمانی که ما برای یک عنصر در یک فایل css میایم و background رو در نظر میگیریم باید برای اون یک ارتفاع رو هم در نظر بگیریم همچنین برای این که این عکس بیاد و تمام عرض مارو بپوشنه باید از پراپرتی زیر با مقدار زیر استفاده بکنیم cover : background-size که از تکرار جلو گیری میکنه
background-clip-: میاد و محدوده ی باکس مارو درست میکنه که مقدار box-border اون به طور پیش فرض هست که میگه محدوده تو همون بوردر تو هست اگه میایم و مقدار box-padding قرار دهیم میاد و محدوده باکس مارو padding اش قرار میدهد و مقدار box-content میاد و در جایی که محتوا شروع میشه رو محدوده باکس ما اعمال میکنه
نکته : اگر خواستیم برای یک المان بیایم و هم یک رنگ و یک تصویر رو به عنوان پس زمینه بهش اعمال کنیم برای خلاصه نویسی بهتر از پراپرتی background استفاده میکنیم به طوری که مقدار اول رنگ اون و مقدار دوم تصویر میاد و قرار میگیرد و مقدار بعدی تکرار پذیری اون و مقدار بعدی پوزیشن یا موقعیت اون هس
-------------------------------------------------------------------------------------------------------------------------------------
استایل‌های مهم
border : میاد هاشیه برای اون المنت امون ایجاد میکند و دارای اجزایی هم هست برای استفاده از اون هم اولین مقداری که میگیرد ذخامتش هستش دومین مقدار نوع اون هست که میتونه Solid یا dash و ... سومین مقدار هم رنگ اون
border : border-width border-style border-color
ویژگی border-style دارای انواعی می‌باشد
none : هیچ لبه ای نمایش داده نمی‌شود dotted : لبه‌ها به صورت نقطه نقطه ای نمایش داده میشود dashed : لبه‌ها به صورت خط تیره نمایش داده میشود double : دو لبه نمایش داده میشود groove : یک لبه سه بعدی گود دار نمایش داده میشود ridge : یک لبه سه بعدی برجسته نمایش داده میشود inset : یک لبه سه بعدی inset نمایش داده میشود outset :یک لبه سه بعدی outset نمایش داده میشود
border-Radius : برای گرد کردن هاشیه‌های اون المنت امون میاد و استفاده میشه
border-image : برای استفاده از آن در ابتدا باید بیایم و از یک border معمولی استفاده بکنیم و مقدار رنگ اون رو برابر با transparent بکنیم همچنین با استفاده از اون مقدار عددی که میدهیم میتوانیم زخامت رو هم کنترل بکنیم و به طور کلی جدا جدا میتوانیم به صورت زیر ازش استفاده بکنیم
border-image-style : تعداد تکرار‌های تصاویر border رو میاد و انجام میدهد
border-image-source : منبع عکس مورد استفاده مارو میاد و در داخل یک url میگیرد
border-image-repeat : میاد و سه حالت میگیرد اولی مقدار round هست که میاد و حالت تکرار پذیری در وسط‌ها انجام میدهد و راس هارو کاری ندارد دومی stretch که میاد و می‌کشه اون borderهای مارو یعنی راس هارو کاری نداره و وسط رو میاد و می‌کشه space بین دو مقادیر قبلی هست
حال برای خلاصه نویسی هم image-border میاد مورد اول url و مورد دوم مقدار slice رو میگیرد و مورد سوم repeat تصاویر ما برای استفاده باید به صورت png باشد
padding : برای انواع جهت‌ها هست جهت‌های بالا و پان و راست و چپ و به معنی حاشیه یا فاصله داخلی محتوا از لبه‌ها یا حاشیه‌های والد اون است عنصر درونی به نسبت حاشیه‌های والدش میاد و فاصله میگیرد
padding : padding_top padding_right padding_bottom padding_left
margin : عنصر کلی المنت ما که نسبت به عناصر یا المنت‌های کناریش میاد و فاصله ایجاد میکند از لحاظ جهت‌ها شبیه به بالایی هس خلاصه نویسی آن شبیه به بالایی هستش
مفهوم Box-sizing : ما در کد نویسی وقتی طرح رو از طراح میگیریم به ما یک طول عرض خود المان رو میاد و میده و این طول عرض جدا از اون پدینگ و مارجین و بوردر هاست و ما باید طوری طراحی کنیم که این طول عرض این عنصر در نهایت همون اندازه ای باشه که طراح گفته برای همین باید بیایم و از مفهوم باکس سایزینگ استفاده بکنیم Sizing-Box که وقتی این ویژگی رو قرار میدهیم مرورگر دیگه کاری به اضافه کردن بوردر و پدینگ به عنصرمون به صورت پیش فرض دیگه نداره ویژگی borderBox رو برای تمام عناصر امان در نظر بگیریم box-border : Box-sizing این شکلی همون طول عرض اصلی رو قرار میده
نکته : ما از تگ‌های ul و li برای لیست هامون استفاده میکنیم که برای حدف کردن بولت‌های لیست هامون ما میتوانیم بیام و از دو ویژگی استفاده بکنیم یکی list-style : none و دومی ویژگی none = list-style-type که این پراپرتی‌ها مقادیر دیگه ای هم دارند که باید امتحان بکنیم حال اگر بخاهیم به جای این بولت از یک تصویر جایگزین استفاده بکنیم باید بیایم و از پراپرتی list-style-image استفاده بکنیم که با url ادرس بدهی
ماهیت عناصر به صورت استایت ک هستند حال برای تغیر آن‌ها باید از استایل position استفاده بکنیم که مقادیر زیر را میگیرد
fix : میاد و اون المان یا عنصر ما ثابت در داخل صفحه امون نگه میداره و اجازه نمیدهد که اسکرول بخورد
absolute : میاد و یک قابلیت شناوری نسبت به عناصر والد خودش پیدا میکند که میتوانیم با مقادیر , right , left , top bottom اون عنصر رو بیایم و جابه جا کنیم
relative : میاد و جا به جایی نسبت به عنصر والد رو برای ما در نظر میگیر
ما هنگامی که میخاهیم بیایم و برای یک عنصر از absolute استفاده بکنیم میاد و دنبال relative عنصر والد خودش میگردد و وقتی که عنصر والد اون relative نداشته باشه میاد و برای pareent یا روت صفحه میره و در نظر میگیرد
معرفی filterها : یک سری توابع رو در داخل خودش دارد
۱-blur این تابع در واقع میاد و صفحه رو مات میکند و مقادیر عددی به صورت پیکسل میگیرد
۲-brightness این تابع میزان نور و روشنایی در تصویر مشخص میکند
۳-contrast میزان غلظت و اشباع شدگی بین رنگ هارو انجام میدهد پر رنگ کردن و تیره کردن و به صورت درصدی مقدار مگیرد تضاد رنگی
۴-grayscale میزان سیاه و سفیدی و مردگی تصویر رو میاد و مشخص میکند از رنگی بودن به سمت سیاه و سفید بودن و مقادیر بین صفر تا ۱۰۰ درصد مقدار میگیرد
۵-rotate-hue چرخش رنگ‌ها به منظور نقطه مقابلشون مثلا آبی به قرمز و درجه میگیرد
۶-invert میاد و بین تصویر اصلی و حالت نگاتیو اون تغیر ایجاد میکند و مقادیر درصدی میگیرد
۷-opacity میزان وضوح تصویر رو میاد و مشخص میکند و مقادیر درصدی میگیرد
۸-saturation میزان اشباع شدگی رنگ رو میاد و مشخص و مقادیر درصدی میگیرد
۹-sepia بین رنگ خودش و یک رنگ قهوه ای شروع به پیمایش میکند
۱۰- Shadow-drop برای سایه ما ی جور ایجاد سایه میکند و در تصویرمون سایه درست میکند وسه مقدار به صورت پیکسلی میگیرد
و به عنوان خلاصه نوشتن در ابتدا میتوانیم از تابع ( ) contrast و بعد از تابع ( ) brightness و .. استفاده بکنیم همان
طور که قبلا هم گفتیم زبان Css یک زبان برنامه نویسی نیست چون در آن ما نمیتوانیم توابع و متغیرهارو بیایم و تعریف بکنیم و برای حل این مورد پیش پردازنده هایی مثل sass و less معرفی شده اند که وظیفه اشون این بود که بعضی از قابلیت هایی مثل تعریف توابع یا متغیر هارو بیاین خود css به تنهایی برای رفع این موضوع یک سودوکلاس به نام روت رو اومد و درست کرد که بتوانیم یک چیزایی شبیه به متغیر‌ها در اون ایجاد بکنیم شیوه کار به این صورت هست که ما یک استایل به صورت root {} :تعریف میکنیم بعد در داخل اون میایم و متغیر هامون رو اضافه میکنیم و هرجا که خواستیم بیایم واز این‌ها استفاده بکنیم به این صورت که در داخل ( نام متغیری که نوشتیم قرار میدهیم ) v
-------------------------------------------------------------------------------------------------------------------------------------
elements semanticها در سئو تاثیر کمی دارند اما بهتر هستش بیایم و از این‌ها استفاده بکنیم و حدودا ۱۳ تا هست
۱ -section : هر موقع ما خواستیم بیایم و یک محدوده ای رو مشخص بکنیم برای یکسری از المان هامون باید بیایم و از این تگ استفاده بکنیم که جایگزین تگ div هستش و ماهیت بلاکی دارد این تگ به موتور جستجو میگوید که این یک بخش در داخل وب سایتمون هست و ماهیت بلاکی دارد
۲ -nav : هر جا در داخل وب سایتمون قرار بود و یک منویی ( چه به صورت افقی و چه عمودی ) بیاد و قرار بگیرد باید بیایم و از این تگ استفاده بکنیم و ماهیت بلاکی دارد
۳ -aside : ما از این تگ برای سایت بار وب سایتمون میایم و استفاده میکنیم کناره‌های صفحه وب امون از این تگ استفاده میکنیم و ماهیت بلاکی دارد
۴ -header : برای قسمت‌های بالایی وب سایتمون میایم و از این تگ استفاده میکنیم و ماهیت بلاکی دارد
۵ -footer : برای قسمت‌های پانی وب سایتمون میایم و از این تگ استفاده میکنیم و ماهیت بلاکی دارد
۶ -main : زمانی که به موتور جستجو میخایم بگیم که این قسمت از محتوای سایت من محتوای اصلی وب سایت من هستش در این تگ قرارش میدهیم
۷ - figure : بخشی از وب سایت امون که در داخل اون تصویر هستش پیشنهاد شده که بیایم و از این تگ استفاده بکنیم هرجا قرار بود تصویر به همراه توضیحی برای اون قرار بدهیم از این تگ استفاده میکنیم figCaption میگوید در داخل تگ بالا یی اگه خواستیم توضیحاتی رو برای تصویرمون قراربدهیم از این تگ استفاده میکنیم
۸ -Article : این تگ برای مقاله هست یعنی هرجا که ما تکس داشتیم و توضیحات داشتیم مثل تگ p و تگ‌های های فرمتینگ متن باید بیایم و از این تگ استفاده بکنیم و اون هارو در داخل اون قرار بدهیم
۹ - Summary and detail جفت تگ‌ها : ما در داخل سامری میایم و یک خلاصه از متنی که میخایم رو قرار میدهیم و بعد در داخل دیتیل میایم و اون متن رو به طور کامل قرار میدهیم و یک جور دراپ برای نشون دادن محتوا بهمون نشون میده که بهتر حتما استفاده کنین چیز جالبی هست
-------------------------------------------------------------------------------------------------------------------------------------
Attribute input
۱ -accept : با استفاده از این ویژگی میتوانیم مشخص کنیم که اینپوت ما بیاد و چه فرمت‌های بگیره مثلا اگر قرار بود بیاد و فقط فرمت عکس بگیره میتونه به شکل زیر مقدار دهی بشه یا هم اگه قصد ما استفاده کردن از تصاویر بود میتونیم از تایپ تصویر استفاده بکنیم
۲-autoComplete : این ویژگی میاد و در داخل کچ مرورگر مارو میگرده و اگه چیزی بود به عنوان کلمات رزوی در اینپوتمون نمایش میده که انتخابشون کنیم و دو مقدار میگیره یا off یا on
۳-autofocus : این ویژگی رو وقتی قرار میدهیم میاد و وقتی صفحه ی مرورگرمون لود شده به طور خودکار اینپوت مارو فعالش میکند
۴-checked این ویژگی برای نوع چک باکس هست که به طور خودکار میاد و اون رو فعالش میکند
5-maxlength : مشخص میکند که طول کاراکترهایی که در داخل اونها میایم و مینویسیم چقد باید باشد بیشترین مقدار برای یک اینپوت رو مشخص میکند
7-minlength : حدقل کاراکترهایی که میگیرد چقد باید باشد رو مشخص میکند
8-pattern : برای استفاده بهتر از ری جکس میایم و از این استفاده میکنیم و الگوی ری جکس خودمون رو مشخص میکنیم
9-title : ما میتوانیم بیایم و یک عنوان برای هشدارمون قرار بدهیم که اگه قبول نکرد اون هشدار مارو نشون بده
10-require : کاربر رو ملزم میکند که فیلد مربوطه رو بیاد و پرش بکند و اگه نکنه مثل قبلی بهش پیام خطا میدهد
11-readonly : این نوع اینپوت ما رو فقط خوندنی میکند و اجازه تغیر درون اون رو به ما نمیدهد و اجازه تغیر نمیدهد
12-disable : این ویژگی میاد و به طور خود کار اینپوت مارو غیر فعال میکند
13- text type input این ویژگی‌ها مال موقعی هست که تایپ ما برابر تکس یا متنی باشه
button اینپوت ما رو میاد و تبدیل به یک دکمه میکند
checkbox اینپوت ما رو میاد و تبدیل به یک چک باکس میکندش
color میاد و اینپوت تبدیل به یک باکس انتخاب رنگ میکند
number یک اینپوت که فقط نوع عددی میاد و میگیرد
password یک اینپوت که فرمت چیز هایی که داخلش میایم و وارد میکنیم رو شبیه به پسورد نشون میدهد
radio یک اینپوت شبیه رادیوباتن‌ها برامون درست میکنه
email میاد و فقط متن‌های که فرمت ایمیل دارند رو برای ما قبول میکند و اگه فرمت ایمیل نداشته باشه خطا میدهد
file برای ارسال فایل باید بیایم و این نوع قرار دهیم که در بالا گفتیم شیوه عملکردشو
hidden یک اینپوت ایجاد میکند که از دید کاربرمون مخفی هستش
range یک اینپوت به شکل خطی که برای قیمت‌ها استفاده میشه بیشتر
reset یک دکمه که با کلیک بر روی اون مقدار همه اینپوت هامون رو خالی میکنه یا اصطلاحا پاک میکند
search یک اینپوت برای جست جو کردن برای ما میاد و درست میکند
۱۷-submit یک اینپوت برای ارسال اطلاعات که شبیه به دکمه‌ها هست
۱۹-text برای نوشتن یک متن