آموزش رایگان طراحی سایت با css , html

مفهوم html

نرم افزارهای لازم برای کدنویسی html

تگ< html> < / html> شروع و پایان

تگ< head > < / head >سرکد

تگ < body > < / body >بدنه سایت

تگ < title > < / title >عنوان سایت

تگ < b > < / b > پر رنگ کردن نوشته

تگ < i > < / i > ایتالیک یا همان کج کردن نوشته

تگ < br >
یک تگ تکی است و نوشته را یک خط پایین می اندازد

تگ < u > < /u > برای آندرلاین

مفهوم رنگ ها و نحوه ساختن رنگ های مختلف با رنگ های اصلی

تگ< strong > < / strong > مثل تگ < b > عمل می کنه ولی برای سئو خوب می باشد.

تگ < em > مثل تگ < i > عمل می کنه ولی معنایش برای گوگل متفاوت است.

تگ < mark > روی کلمه مارک می کشه

تگ < small > نوشته را کوچک می کند.

تگ < del > برای حذف یا تخفیف دار کردن قیمت

تگ < sub > برای اندیس گذاری زیر نوشته

تگ < sup > برای اندیس گذاری بالای نوشته

تگ < ins > همان آندرلاین است.

تگ

، برای ساخت table از تگ هایو
< table >
< tbody >
< tr >
< td > استفاده می کنیم.

برای ادغام 2ستون صفت colspan استفاده می شود.

صفت های border، width و height

تگ

< li >,< ul >,< ol >
صفت dir=rtl برای تگ < body >
صفت valign
تگ < a > برای لینک کردن
تگ < blockqoute > برای نقل قول کردن
کامنت گذاری در html
< --< li >--< / li >--! >
تگ < header >
تگ < section >
تگ < footer >
تگ < figure >
تگ < article >
تگ < aside >

انواع css : خطی، صفحه ای، خارجی

style : سبک نوشتن css

تگ < /" "=img src >

انواع border :

solid، dash، dotted

برای درست نشان دادن کلمات فارسی

< meta charset="utf-8" >

بالای

Css صفحه ای و مفهوم کلاس و محل نوشتن آنها و نحوه فراخوانی کلاس ها مفهوم Hover، صفت cursor نحوه اضافه کردن فونت @font -face فاصله حروف: letter-spacing فاصله خطوط: line-height مرتب کردن نوشته ها: text-align:justifyi برای برداشتن خط لینک text-decoration:none برای شفاف کردن background-color:transparent background -image input :برای ورودی گرفتن از کاربر استفاده می شود تگ
،
برای وارد کردن نام و نام خانوادگی برای وارد کردن نام و نام خانوادگی < input type="text" value=" " name="firstname" / > برای ورود ایمیل < input type="email" value = " " name="email" / > برای واردکردن نظرات: < textarea clos"10"rows="20" >< / textarea > البته این تگ input نیست برای تیک زدن : < input type="checkbox"value="name" " / > دکمه: < input type="submit"value="ارسال" / >

< input type="color"value=" " name=" rang " / >
input برای ارسال فایل

input برای ارسال محدوده : برای مواردی که رنج دارند مثل قیمت 10-100
< input type='' range'' value=" " name=''range " min="10" max="100"/ >
input تعیین جنسیت
< input type= "radio" value="مرد" name="gender" / >
< input type=" radio" value=" زن" name="gender" / >

شرط درست کار کردن radio ها این است که name یکسانی داشته باشند یعنی هم گروه باشند.

selectbox

}input

textarea

زمانی که می خواهیم از بین چند مورد یکی را انتخاب کنم مثلا مدرک تحصیلی از select استفاده می کینم و برای تعریف لیست آن از تگاستفاده می کنیم.

برای زیبایی فرم و ایجاد یک کادر دورآن از تگ
< fieldset >قبل از فرم استفاده می کنیم و بعد از فرم تگ را می بندیم برای عنوان دادن از تگ

استفاده می کینم.

cssخارجی: برای جلوگیری از تکرار css ها در تمام صفحات مختلف cssها را در فایل جداگانه ای ذخیره و در هر صفحه آن را فراخوانی می کنند. برای فراخوانی cssها از تگ link استفاده می کنیم.

تگ z-index برای اولویت نمایش به کار می رود.

برای تعیین موقعیت div

-position:fixed

-position:absolute

-position:relative

-position:relative

دستور box-shadow و خصوصیت های آن

تگ border-image

مفهوم css خارجی و نحوه فراخوانی آن

تگ z-index اولویت نمایش می دهد.

تگ text-shadow

تگ text-justify

این 2تا تگ باید باهم باشند

text-align:justify

text-justify:distribute-all-lines

تگ text-overflow برای جایی که که متن طولانیه سه نقطه می گذارد.

این تگ باید با تگ overflow همراه باشد.

تگ word-warp

تگ و حالت هایش

انیمیشن:خاصیت transtion

ساخت انیمیشن با @keyframes myframe

خاصیت:

animation-iteration-cont:infinite;

animation-direction:reverse;

animation-play-state:paused;

animation-direction:alternate;

تگ gradient

برای اعمال طیف رنگی از background-image استفاده می کنیم و gradient را انتخاب می کنیم.

box-sizing: چطور متن وسط کادر قرار بگیره

تگ flexbox: برای اینکه ریسپانسیوکنیم از flex-box استفاده می کنیم.

برای انعطاف پذیر کردن صفحه از تگ display:flex استفاده می کنیم.

برای انجام ریسپانسیو باید یک کد متا بالای سایت در بخش head قرار بدهیم

حالت های پنجگانه دستگاه ها برای ریسپانسیو در bootstrap

توضیحاتی در خصوص منوی ریسپانسیو

توضیحاتی در خصوص علائم خاص در html

selector (انتخابگر)

انواع selector

class,id,tag,hover,active

a::befor {content"*"}

befor,after

علامت *

علامت +

علامت ~ ساب لاین

div p { }

div,p,h { }

div>p { }

a:link a:visited a:hover a:active

div:hover p { display:block }

displaye:none; display:block

p:first-child { }

first-child بچه اول

last-child بچه آخر

q:lang( ho ){ } برای نقل قول lang

not(p):

input:out-of-range - nth-child

read-only - optional - root - required - empty - valid-

target - checked

selection:: دو نقطه که میاد رقتار صفت نیست رفتار تگ هستش

p::first-line خط اول اثر می گذارد

p::first-letter حرف اول اثر می گذارد

input[typ-text]{ }

آشنایی با سایت های راست چین و ژاکت و themeforest.com برای مشاهده ی قالب های مختلف .

عکس های وکتوری

سایت:

flaticon.com

freepik.com

سایت unsplash عکس های رایگان

آشنایی با سایت های راست چین و ژاکت و themeforest.com برای مشاهده ی قالب های مختلف .

عکس های وکتوری

سایت:

flaticon.com

freepik.com

سایت unsplash عکس های رایگان

کار با نصب و راه اندازی فونت اوسام پرو font awesome pro