Use LEFT and RIGHT arrow keys to navigate between flashcards;
Use UP and DOWN arrow keys to flip the card;
H to show hint;
A reads text to speech;
133 Cards in this Set
- Front
- Back
|
html چیست |
Hyper Text Markup language ابزاری است که با استفاده از تگ ها اقدام به ساخت قالب کلی صفحات وب میکند و فنداسیون و اسکلت اصلی وب سایت را می سازد مثل اسکلت بدن انسان |
|
|
برای کد نویسی در ان بهترین |
Phpstorm |
|
|
انواع تگ ها |
Container consists opening tag and closing tag Alone tag only consists opening tag |
|
|
تگ چیست |
هر کاری که html انجام میدهد با tag است و میتوانند تگها لینکها لیستها پاراگراف ها جداول عکس را بسازند و با انها صفحات وب خود را اسکلت بندی کنید |
|
|
رابطه html و css |
با هم صفحات وب را می‌سازند با html ساختار صفحات وب را میسازید و با css جذابیت ظاهری به آن استفاده میکنید ساختمان و میلگرد و بتن html گچ بری و رنگ css |
|
|
صفت ها در html |
به وسیله صفت ها در html میتوانیم ویژگیها و تنظیمات خاصی را به تگ های html بدهیم هر تگ میتواند یک سری attribute ها بگیرد که یک سری از انها مشترکند بعضی ها فقط مختص به یک تگ خاص است و دوقسمت value , name دارد <tagname attribute ='value'></tagname> صفتها همیشه باید داخل دابل کوتیشن یا سینگل کوتیشن باشند و با = به نام صفت منتسب شوند |
|
|
روشهای دیدن کد سایت |
رایت کلیک روی سایت inspect element 2View page source F12 |
|
|
تگ br |
شکستن خط و ایجاد یک خط جدید |
|
|
برای ایجاد تگ چه میکنیم |
یک مثلا h1 مینویسیم و tab را میفشاریم |
|
|
روش اول استفاده از css |
روش برخط با صفت styleمیتوانیم چند ویژگی css را به تگ های html بدهیم و انها را سمی کالن جدا میکنیم |
|
|
Comment کردن |
کنترل و اسلش |
|
|
روش دوم استفاده از css |
بین تگ باز بسته و در واقع یک خط ماقبل اخر تگ style را باز و بسته میکنیم داخل style بیا css درست کن که دستوری است |
|
|
روش سوم استفاده از css |
بیرونی همانطور که یک سند html ایجاد کردیم یک سند css هم ایجاد میکنیم <Link href="style.css"> |
|
|
تغییر چند المان با css روش اول |
استفاده از کاما |
|
|
تغییر چند المان مشابه در css |
در تگ خود یک attribute class با مقدار تعریف کنیداگر مقدارش head1باشد آنگاه در css
|
|
|
روش سوم تغییر المانهای مشابه |
در آن تگ id را تعریف میکنیم و در css به جای . از # استفاده میکنیم |
|
|
Block level |
A block level element always start on a new line A block level element has a top and a bottom margin whereas an inline element doesn't A block level element always takes up the full width available این المانها تمام فضای خط را به خود اختصاص میدهند و در صورتی که یک تگ در کنار آنها قرار گیرد انرا بخط بعد منتقل میکنند این تگ ها بدون در نظر گرفتن محتوا و فضای اشغال شده به سایر تگ ها و المانها اجازه نمی‌دهند در کنار آنها قرار گیرند و سایر تگ ها را به زیر خود منتقل خواهند کرد |
|
|
تگ ها inline |
این element ها خط اند و اگر یک تگ دیگر کنار انها بنویسیم کنار تگ قبلی ما قرار میگیرد و فضایی که لازم دارد را پر میکند و فضای اضافی اشغال نمیکند در واقع فقط تا جایی که محتوا را دارند را اشغال میکنند |
|
|
چگونگی قرار گیری تگ های inline level و block level |
درون بلاک میتوان عناصر بلاک و خطی قرار داد درون عنصر خطی فقط میتوان عنصر خطی قرار داد بجز a که مستثنی است تگ in درون تگ in دیگر قرار میگیرد تگ in درون تگ block قرار میگیرد تگ block نمیتواند درون تگ in قرار گیرند تگ block میتواند درون تگ block دیگر قرار گیرد با css میتوان level هر عنصر را تغییر داد |
|
|
Attribute در html چیست |
ویژگی ها یا attribute اطلاعات اضافه ای هستند که به عناصر html اضافه میشوند ویژگیها را به تگ ها میتوانیم اضافه کنیم و انها هم توسط مرورگر نمایش داده نمیشوند |
|
|
پرکاربردترین ویژگی ها در html |
پرکاربردترین ویژگیها در html ویژگی classو id است id یکتاست ولی class نه |
|
|
Comment در html |
<!----> |
|
|
جد تمام عناصر در html |
<html> |
|
|
عنصر head چیست |
همانطور که ویژگیها حامل اطلاعات اضافی هستند head هم حامل اطلاعات اضافی برای همه صفحات وب است |
|
|
ساخت سند html فارسی |
در زمان ذخیره فایل encoding را روی utf8 قراردهیم عنصر meta را در زیر head قراردهیم تا مشخص کنیم کاراکترها در محدوده utf8 هستند برای چیدمان صفحه ویژگی dir در html را rtl قرار دهیم |
|
|
لینکها در html |
عناصر خطی هستند که توسط تگ a تعیین میشوند و ویژگی href مشخص کننده آدرس لینک است |
|
|
انواع روشهای ادرس دهی لینکها |
Anchor Relative Absolute |
|
|
Anchor |
لینکهایی در پایین صفحات وب که با کلیک روی انها به بالای صفحه میرویم با استفاده از # میتوان هدف را یک عنصر html با یک idخاص قرارداد <a href="#footer"> به سمت عنصر footer حرکت میکنیم |
|
|
ادرس relative |
ادرسهای نسبی فقط برای صفحاتی است که روی یک دامنه هستند یا برای ادرس دهی زیرفولدر دیگر به صورت نسبی |
|
|
ادرس absoulte |
درسی از یک سایت به صفحه در سایت دیگر |
|
|
تصاویر در html |
تگ img با ویژگی src که شبیه آدرس‌های نسبی یا مطلق است ویژگی alt متن به جای تصویر است |
|
|
ساختار جداول در html |
جدول را با <table> برای ایجاد هر ردیف از <tr> برای ایجاد سلول عادی <td>سلول عنوان <th> |
|
|
ادغام چند ستون یا ردیف |
چند ستون colspan مثلا colspan=2دو ستون را ادغام میکند چند ردیف rowspan و این دو ویژگی به سلولها تعلق میگیرد
|
|
|
عنصر form در html |
یک عنصر بلاک است که قسمت تعاملی را برای کاربر در صفحه فراهم میکند و دو ویژگی دارد ادرسی که فرم به آن ارسال میشود را مشخص میکندaction روش ارسال اطلاعات فرم method |
|
|
Place holder |
ویژگی است که به کمک آن به کاربر میگوییم چه محتوایی را درون ورودی قرار دهد |
|
|
عناصر کنترل ورودی در html |
Text input Radio button Checkbox Drop down Upload widget Submit button بیشتر از tag inputtype استفاده میکنند |
|
|
ساختار صفحه وب |
|
|
|
Css |
Cascading styles sheets استایل مجموع قوانینی است که با اعمال آنها موجب زیبایی آن میشویم قوانینی میتوانند درون یک سند یا چندین سند باشند که به انها sheets میگوییم چرا آبشاری چون دستورات اعمال شده به هر عنصر بر فرزندان اون عنصر تاثیر داره
|
|
|
ساختار دستورات css |
Selector {property:value} |
|
|
Comment در css |
*//* |
|
|
Css Inheritance |
مقدار ویژگی استایل یک عنصر در html از عنصر پدر آن کپی میشود |
|
|
انتخابگرها در css |
انتخابگر الگویی است که به ما اجازه میدهد تا از طریق آن عناصر html را انتخاب کنیم و بتوانیم استایل برروی آن عناصر اعمال کنیم |
|
|
انواع انتخابگرها |
سراسری با * انتخابگر تگ تعریف کلاس برای یک عنصر html تعریف id یکتا و استفاده از آن با علامت # درcss |
|
|
Snippet |
قطعه کدهایی که با استفاده از اونها میتوان کدهای بیشتری تولید کرد |
|
|
Flexbox |
یک ماژول برای layout بندی پویا در css میباشد |
|
|
مدیا کویری |
به وسیله مدیا کویری میتوان استایل مورد نظر را فقط محدود به شرایط خاصی در یک مدیا کرد |
|
|
Collapse |
فروریختن |
|
|
بخش head |
قسمتی است که هنگام بارگذاری صفحه در مرورگر وب نمایش نمیابد و این بخش شامل اطلاعاتی مانند عنوان title لینک به صفحات css و دیگر فراداده ها در ارتباط با html مانند نویسنده کلید واژه های مهم که سند را توصیف میکنند و موارد دیگر است |
|
|
ساختار یک صفحه وب از چه تگهایی تشکیل شده |
Head body html |
|
|
انواع صفتها در html |
صفتهای عمومی بین تگها html مشترکند و در تمام تگ ها کار یکسانی انجام میدهند صفت id شناسه منحصر به فرد به تگ های html نسبت دهیم صفت اختصاصی منحصر به تگ های خاصی هستند مثلا type صفت اختصاصی input است |
|
|
صفتهای عمومی html |
Id-class-dir-lang -style- |
|
|
صفت id |
با این صفت میتوانیم یک شناسه منحصر به فرد به تگ های html نسبت دهیم که تکراری نباشد |
|
|
صفت کلاس در html |
با این صفت میتوانیم کلاسی که به زبان cssنوشته شده را به یک یا چند تگ html نسبت دهیم و مقدار صفت class مثلا تگ p را red قراردهیم و از آن برای تعریف استایل بر روی تگها استفاده میشود |
|
|
معرفی کلاسها در css |
ابتدای انها نقطه بگذارید |
|
|
استفاده از خاصیت classدر جاوااسکریپت |
نام کلاسها در تگ ها میتوانند برای انجام وظیفه ای مورد استفاده شوند و باید از تابع getElementclassName استفاده کنید |
|
|
کارهایی که میتوان با id انجام داد |
انتخاب stylesheet لینک دهی به بخش خاص صفحه که شما به سادگی شناسه تگ موردنظر را به انتهایurlصفحه میدهید یا از تگ a استفاده میکنید مرجعی برای اسکریپت استفاده از تگها برای ذخیره بخشی از محتوای صفحه وب در یک دیتابیس |
|
|
تگ span |
برای گروهبندی المنتهای inline استفاده میشودبرای دسته بندی عناصر درون خطی و اعمال استایل یا ویژگی خاص روی انها استفاده میشود اگر بخواهیم در متن مثلا استایل قرمز به بعضی کلمات اعمال شود |
|
|
تفاوت تگ span و div |
تگ div یک تگ block level هست ولی تگ span ماهیت inline level است وبهتر است درون بلوک‌ها مورد استفاده قرار گیرد |
|
|
تنظیم viewport در طراحی responsive |
|
|
|
تگ hr |
Horizontal row خط افقی از ابتدا تا انتها میکشد |
|
|
صفت position درcss |
با این صفت میتوان نوع جایابی یک عنصر را تعیین کرد و مقادیر ان عبارتند از Static Relative Fixed Absolute Sticky ویژگی position همراه تعریف ویژگی های left right top bottom موقعیت یک عنصر را در صفحه وب مشخص میکند |
|
|
وضعیت position:static |
عناصری که position انها برابرstatic است با تعیین مقادیر left bottom top right تحت تاثیر قرار نمیگیرند موقعیت خاصی نداشته و با توجه به جریان عادی صفحه نمایش داده میشوند |
|
|
وضعیت position:relative |
موقعیت نسبت به موقعیت عادی عنصر تعیین میشود |
|
|
وضعیت position:fixed |
موقعیت یک عنصر نسبت به viewport مرورگر تنظیم میشود این به این معنی است که با تعیین ویژگی bottom right top left عنصر مربوطه در محل خود ثابت شده و حتی با اسکرول کردن صفحه وب جابه جا نمیشود عنصر نسبت به کل صفحه نمایش صفحه مرورگر ثابت یا فیکس میباشد |
|
|
رابطه relative و static |
Relative شبیه به static است ولی ویژگی left و right و topو bottom و zindex برروی آن تاثیر گذار است |
|
|
Position :absolute |
موقعیت ان نسبت به عناصر والد خود در صفحه وب تعیین میشود |
|
|
تگ div |
برای گروهبندی تگهایی استفاده میشود که ماهیت بلاک دارند |
|
|
آدرس دهی به سایت دیگر |
حتما ابتدای ان باید// :http را بیاورید Target="_blank" برای اینکه کاربر از سایت شما خارج نشود |
|
|
نشان دادن ایمیل |
Mailto: ?subject=welcome cc=info@itpro.ir |
|
|
ایجاد جداول ناموزون |
Colspan Rowspan |
|
|
وسط چین کردن یک المنت |
Margin:0 auto; بالاپایین صفر چپ و راست auto |
|
|
برای width گرفتن تگ های inline باید چه کرد |
تگ های inline به صورت پیش فرض width نمیگیرند و برای width دادن باید ماهیت انها را به block یا inline block تغییر داد |
|
|
تعریف تگ های inline به صورتی که فاصله آن از والد به ارث برده شود |
1position پدر relative-child absolute 2position پدر absolute -child absolute |
|
|
ویژگیهای form |
ویژگی action با این صفت مشخص میکنید که اطلاعات فرم به چه آدرسی ارسال شود کافی است ادرس صفحه ای که قرار است اطلاعات فرم را پردازش کند به عنوان مقدار action قرار دهید ویژگی method دارای دوحالت post یا get باشد زمانی نوع get را برای فرم خود انتخاب میکنیم که اطلاعاتی که توسط فرم ارجاع داده میشوند دارای اهمیت خاصی نیستند مثلا کویری جستجو از get استفاده کنید اطلاعات را میخایم از سرور بگیریم برعکس این حالت زمانی که میخواهیم اطلاعات ارسالی در ادرس صفحه actionمشخص نباشند از متد post استفاده میکنیم مثلا زمانی که میخواهیم اطلاعاتی را به دیتابیس ارسال کرده و یا میخواهیم از کاربر رمز دریافت کنیم |
|
|
عنصر input |
دریافت اطلاعات با عنصر input میباشد تغییر نوع input با صفت type میباشد مقادیر type عبارتند از : Radio Text Password Checkbox File Submit برای هر کنترل باید یک نام مشخص کرد که با آن نام در سمت سرور بتوان به اطلاعات وارد شده دسترسی یافتname به هر input باید یک name داد ایتم دیگر value است که میتوان مقدار پیش فرض با آن داد |
|
|
Submit چیست |
این نوع input برای ارسال داده های فرم به صفحه ای که در پارامتر action تعیین کرده اید به کار میرود و دکمه شما حالت نوشتاری خواهد داشت این دکمه به همراه ارسال اطلاعات فرم مختصات دقیق محل کلیک کاربر روی تصویر را نیز به همراه اطلاعات فرم ارسال میکند |
|
|
منوی dropdown |
از تگی به نام select استفاده میکنیم و هر تگ میتواند تعدادی option را دربربگیرد که یکی به صورت پیش فرض انتخاب شده و با اضافه کردن مقدار selected به option مورد نظر مشخص میشود <Select name =subject> <Option value=math selected>math</option> <Optionvalue="physics">physics<option> </Select> |
|
|
قرار دادن دکمه در فرم |
با button این کار را میکنیم و دارای مقدار type Button Reset Submit بهتر است از همتای ان با input استفاده شود |
|
|
مقادیر پیش فرض در radiobutton و checkbox چگونه مشخص میشوند |
در عنصر input مقدار checked را قرار میدهیم |
|
|
اجباری کردن ورود دیتا در یک فیلد |
اجباری کردن inputبا required |
|
|
مزیت استفاده از for در input |
با دادن id به input میتوانیم یکlable را به آن اختصاص دهیم |
|
|
برای section بندی فرم |
از fieldsetو legend استفاده میکنیم |
|
|
Dom |
Document object model tree -structure html وقتی مرورگر یک صفحه از سایت باز میکند یکdom باز میکند که ببیند ساختار صفحه شما چگونه است |
|
|
برای اینکه مستقیما به فرزندان در css استایل دهیم چه میکنیم |
علامت < را بعد selectorمیگذاریم |
|
|
Vertical align |
بر دو المان inline پشت سرهم اعمال میشود |
|
|
Text indent |
در پاراگراف خط اول را جلوتر از بقیه می اندازد |
|
|
Text shadow |
کاراکتر اول زاویه x کاراکتر دوم زاویه y سوم میزان پراکندگی اخر رنگ |
|
|
سایت ایجاد بک گراند |
Bg.siteorigin. com |
|
|
اگر بخواهیم عکس ما با اسکرول کردن تکون نخوره چه باید کنیم |
Background-attachment:fix |
|
|
ترتیب نوشتن background |
Background:color image repeat attachment position |
|
|
عوض کردن ماهیت تگها |
با مقداردهی به display امکان پذیر است |
|
|
برای ایجاد navbar توضیحی |
تگ ul ایجاد میکنیم داخلش li اینجا به خاطر اینکه خاصیت li بلاک است زیر هم میافتند کافی است بیاییم در css خود display:inline قرار دهیم تگ a های داخلی را هم inline قرار میدهیم برای فاصله انداختن padding میدهیم |
|
|
چگونه بدون نیاز به عوض کردن display میشود دو box را کنار هم گذاشت |
اگر هر دو box را floatشان را left بدهیم بدون نیاز به عوض کردن display میشود ان دو را کنار هم گذاشت |
|
|
نکته ای که در استفاده از خاصیت float باید در نظر داشت |
وقتی شما از float استفاده میکنید روی قابلیت بقیه صفحه تاثیر می‌گذارد شما باید از قابلیت clearfixبعد از اتمام float کردنهای خود استفاده کنید. .Clearfield Clear:both; |
|
|
حالتهای layout دادن |
Fixed layout-container px Fluid layout-container % Gridsystem |
|
|
اینکه ما سایت خود را براساس 960Gs طراحی میکنیم یعنی چه |
شما سایت خود را براساس 960 px طراحی میکنید و به یک سری ستون تقسیم میشود و هرکدام از این ستونها یک سایز مشخص ویک margin مشخص دارند 12 ستون داریم و هر ستون ۶۰px عرض و ۱۰px حاشیه راست و ۱۰px حاشیه راست دارد |
|
|
اگر بخواهیم یک فونت را به کل صفحه وب اختصاص دهیم چه میکنیم |
فونت و اندازه آن را در css به قسمت بدنه میدهیم body |
|
|
List style چیست در css |
ویژگی list-style یک ویژگی خلاصه نویسی برای تنظیم مقادیر ویژگی های list-style-type ،list-style-image و list-style-position بصورت یکجا می باشد. The list-style-type:none property can also be used to remove the markers/bullets |
|
|
Text decoration |
The text-decoration property adds an underline, overline, line-through, or a combination of lines to selected text. |
|
|
Line height |
ارتفاع ردیفهایی که نوشته در آن قرار میگیرد را برای یک عنصر مشخص میکند |
|
|
Background size:cover |
کل div رو میپوشاند |
|
|
Flexdirection |
به صورت پیش فرض row است که میتوان به column تغییر داد دقت کنید row و row reverse دقیقا وابسته به direction هستند که اگر rtl شود فرق میکند |
|
|
Flex wrap |
وقتی مقدار nowrap را بگیرد در هر شرایطی ایتمها رادر یک خط نگه میدارد حتی اگر عرض را زیاد کنیم تاثیری ندارد flex-wrap را مساوی wrap قرار دهیم به خط بعد میبرد |
|
|
Main axis و crossaxis |
اگر flexdirection =row باشد mainaxisافقی است و cross axis عمودی میباشد اگر flex-direction =column باشد main axis عمودی است و cross axis افقی میباشد |
|
|
ویژگیهای container در flex |
Align content Align items Justify content Flex wrap Flex direction |
|
|
پیش فرض Align content |
Space around |
|
|
Justify content |
صفت Justify content براساس mainaxis عمل میککر |
|
|
Align -items |
دقیقا مثل justifycontent است با این تفاوت اکه بر اساس crossaxis میباشد |
|
|
Flex -flow |
ترکیب flex -direction و flex -wrap میباشد |
|
|
Align-itemsپیش فرض |
Align-items:stretch یعنی flexitemها رو کش بده تا به ارتفاع flexcontainer دربیایند |
|
|
اگر بخواهیم یک عنصر را دقیقا وسط قرار دهیم از طریق flexbox چه میکنیم |
justify-content:center Align-item:center |
|
|
بعضی از مهمترین آیتم های inline |
a br Button Img Input Script Select |
|
|
مقادیر display |
Block and inline |
|
|
تگ img |
The html tag is used to embed an image in a web page images are not technically inserted into a web page images are linked to web pages the img tag creates a holding space for the referenced image Src alt |
|
|
دو روش برای استفاده از تصویر در background |
اضافه کردن تصویر bg به المان html اگر می‌خواهید که یک صفحه به طور کامل تصویر bg داشته باشد باید به آلمان body اضافه کنید |
|
|
بعضی از ایتم های block |
Canvas Div Footer Form H1-h6 Header Hr Li Main Nav ol P Section Table Ul Video |
|
|
کاربردی ترین استفاده display:inline-block |
نمایش ایتم های لیست افقی به جای عمودی |
|
|
Padding |
برای ایجاد فضا دورتادور محتوای یک المان درون هر مرز از پیش تعریف شده به کار میرود |
|
|
Margins |
استفاده میشوند برای ایجاد فضا دورتا دور هر مرز از پیش تعریف شده به کار میرود |
|
|
مقادیر margin |
Auto -the browser calculate the margin Lengthpx pt % Inherit |
|
|
Margin auto |
U can set the margin property to auto to horizantaly center the element within its container The element take up specified width and remaining space will be split equally between the left and right margins |
|
|
مقادیر height و width |
auto the browser calculates the height and width length % |
|
|
Float |
خاصیت clear با استفاده از آن کناره هایی از عنصر را که میخواهیم متن یا عکس در آن سمت نباشد را مشخص میکنیم در واقع برای خالی کردن فضای اطراف یک عنصر به کار میرود |
|
|
نحوه ارسال اطلاعات فرم به سرور |
اطلاعات وارد شده با &جدا میشوند که شامل name ها و value ها میباشند |
|
|
مقادیر پیش فرض در checkbox |
خصوصیت checked |
|
|
Dropdown |
<select name="gender"> <option value=male>مرد <option> مثلا مقدار male تحت عنوان gender به سرور ارسال میشود |
|
|
enctypeچیست |
وقتی که فایل میخاید ارسال کنید حتما نوعش باید multipart/formdata باشد |
|
|
Fieldset in form |
باعث میشود کادری دور input ها ایجاد شود اگر legend هم بدهیم عنوان به کادر اضافه،میشود |
|
|
Legendچیست |
تعریف کننده یک caption برای المان fieldset که مجموعه ای از المانهای مرتبط میباشند |
|
|
فراداده چیست |
Metadata داده ای که به توصیف داده ها می پردازد تگ meta روش رسمی افزودن فراداده به سند html میباشد |
|
|
Flex-flow |
ترکیب flex wrap و flex direction است |
|
|
Align items |
دقیقا مثل justify content است با این تفاوت که المنتها را در محور cross مرتب میکند |
|
|
مقدار align -items به صورت پیش فرض |
Strech |
