آموزش رایگان طراحی سایت با css , html
در آموزش برنامه نویسیدرباره این دوره
در این دوره چه آموزش داده می شود؟
در این دوره کدهای html2 و html5 آموزش داده خواهد شد شما بعد از این دوره می توانید به صورت مبتدی قالب های سایت را به صورت ایستاتیک طراحی کنید.
- آموزش طراحی سایت با HTML
- مقدمه دوره آموزش HTML
- سرفصل های دوره آموزش HTML (اچ تی ام ال)
- مقدمه ای بر HTML
- آشنایی با ساختار صفحات وب
- صفت ها در HTML
- تگ های قالب بندی متن
- کار با لینک ها در HTML
- کار با تصاویر در HTML
- کار با لیست ها در HTML
- کار با جداول در HTML
- کار با بلوک ها در HTML
- کار با فریم ها در HTML
- کار با جاوا اسکریپت در HTML
- کامنت گذاری در HTML
- کار با استناد و نقل قول در HTML
- کار با CSS در HTML
- آشنایی با Head در HTML
- آشنایی با Layout در HTML
- طراحی واکنش گرا در HTML
- Computer Codes در HTML
- موجودیت ها در HTML
- کار با فرم ها در HTML
- HTML5
- آشنایی با گرافیک در HTML
- رسانه در HTML
- آشنایی با API ها در HTML
- جمع بندی HTML
پیش نیاز های این دوره آموزشی
این دوره برای افراد 10سال به بالا پیشنهاد میشود و نیاز به هیچ پیش نیازی ندارد.
نظرات (0)
مفهوم 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