آموزش HTML CSS‌

آموزش HTML CSS‌ (به صورت پروژه محور)

اساطیر زبان

HTML و CSS دو چیز کاملا متفاوت هستند (نمیشود گفت دو زبان برنامه نویسی!) . نشانه ‌گذاری (کد) و سینتکس یا همان ترتیبی که کد به آن صورت نوشته می ‌شود، منحصر به فرد است. یک تمایز مهم بین این دو وجود دارد. شما می ‌توانید HTML را به عنوان ساختار صفحه در نظر بگیرید، CSS هم به HTML استایل می ‌دهد.

HTML مخفف HyperText Markup Language و CSS مخفف Cascading Style Sheets است.

 


برنامه نویسی شبکه معماری کامپیوتر هوش مصنوعی و تجاری

توی این پک فوق العاده، صفرتاصد مبانی برنامه نویسی رو جوری یاد میگیری که تو هیچ کلاس آموزشی یا پک دیگه ای نه دیدی نه شنیدی! بدون هیچ کلاسی، با صفرتاصد مبانی برنامه نویسی اپلیکیشن بزن، پروژه محور یاد بگیر و حسابی پول در بیار! 


 

در واقع برای این که با مفهوم جدا سازی محتوا از سبک توسط HTML و CSS آشنا شوید، نگاهی به سایت CSS Zen Garden بیندازید.

قبلا این سایت یکی از اولین نمونه‌ هایی بود که نشان می ‌داد رابطه بین HTML و CSS واقعا چه قدر قدرتمند است. ضمنا وقتی طرح‌ های سایت های دیگر را بررسی می‌ کنید، یادتان باشد که در هر طرحی دقیقا از یک HTML استفاده می ‌کند! تنها چیزی که از طرحی به طرحی فرق می ‌کند، فایل CSS است.

وقتی کد پیچیده ‌تر می ‌شود، خیلی مهم است که این دو را از هم تشخیص بدهیم . در بخش بعدی در قالب یک قطعه کد این تفاوت ها را توضیح خواهیم داد.

ایجاد فایل جدید

مرحله 1

یک فایل جدید به نام “style.css” ایجاد کنید و آن را در همان پوشه فایل HTMLتان ذخیره کنید. بیایید فرض کنیم تکه کد HTMLای که دارید را تحت عنوان index.html ذخیره کرده ‌اید و به صورت زیر است:

<!DOCTYPE html>

<html>

<head>

<title>This is my page title.</title>

</head>

<body>

<h1>This is a heading 1 element</h1>

<p>Hello world, this is a simple paragraph.</p>

</body>

<html>

مرتبط کردن فایل ‌های HTML و CSS

مرحله دوم

حتی قبل از نوشتن کد CSS، باید بهHTML تان برگردید . باید یک خط جدید بنویسید تا فایل html و فایل css را به هم مرتبط کنید. فایل HTMLتان را باز کنید. خط کد هایلایت‌ شده زیر (خط 5) را به بخش <head> سند تان اضافه کنید. نتیجه باید به این صورت باشد:

<!DOCTYPE html>

<html>

<head>

<title>This is my page title.</title>

<link href=”style.css” rel=”stylesheet” type=”text/css” />

</head>

<body>

<h1>This is a heading 1 element</h1>

<p>Hello world, this is a simple paragraph.</p>

</body>

<html>

این خط کد فایل CSS جدید را به فایل HTML شما پیوند می ‌دهد. در واقع اگر بخواهیم آن را تجزیه کنیم باید بگوییم: صفت href در واقع ارتباط نسبی فایل css را مشخص می‌ کند. مطمئن شوید که فایل style.css در همان پوشه فایل index.htmlتان قرار دارد. صفت rel به مرورگر می‌ گوید که این یک شیوه ‌نامه است. صفت type هم به مرورگر می ‌گوید که این فایلی که لینک به کد ضمیمه شده است باید به صورت سینتکس CSS تفسیر شود.

درک سینتکس CSS

مرحله 3

حالا به سراغ CSS واقعی بروید. اولین کاری که باید انجام بدهید؛ این است که متن پاراگراف را به رنگی متفاوت در بیاورید. پس باید این تکه را تایپ یا در فایلstyle.css تان قرار بدهید:

p { color: blue; }

این با کد موجود در فایل HTML ما متفاوت به نظر می ‌رسد زیرا یک سینتکس متفاوت است. من قصد دارم مقداری فضای خالی و فاصله به این کد اضافه کنم:

p {

color:blue;

}

هر دو مثال بالا تا آن جا که به مرورگر شما مربوط می ‌شود، دقیقا مشابه هستند. اما توسعه‌ دهندگان معمولا CSS را به منظور جدا سازی بصری سبک ‌ها مثل مثال بعدی می ‌نویسند. این کار به درد زمانی می ‌خورد که فایل ‌های CSS شما شروع به جمع ‌آوری صد ها سبک مختلف می ‌کنند و به درک بهتر معنای سینتکس هم کمک خواهد کرد:

ruleset

کل متن بالا از نظر فنی یک مجموعه قوانین یا فقط همان قانون نامیده و به چند بخش مختلف تقسیم می‌ شود:

selector-declaration-block

در این مجموعه قوانین خاص، می‌ توانیم p را یک انتخاب گر بنامیم. (این المان بخشی از HTML مربوطه را انتخاب می‌ کند. p{} در فایل HTML ما <p> را انتخاب می‌ کند.

کد بین آکولاد ها، بلوک اعلان نامیده می ‌شود.

declaration

یک اعلان در داخل بلوک اعلان ما وجود دارد:color:blue . اعلان ها جفت نام-مقدار هستند (درست مثل صفات HTML). در این جا نام اعلان “color” و مقدار “blue” است. حتما باید نام و مقدار را با دو نقطه (:) از هم جدا کنید و اعلان را با نقطه ویرگول (;) به پایان برسانید .

مرحله 4

ما یک مجموعه قانون جدید برای تغییر رنگ عنوان اضافه می ‌کنیم، مثل:

p {

color:blue;

}

h1 {

color:red;

}

حالا همان طور که در زیر و در نسخه دِمو خواهید دید، سرتیتر 1 باید قرمز و پاراگراف باید آبی باشد:

Screen Shot 2013-09-25 at 4.14.15 PM

خب حالا فایل‌CSS تان را ذخیره کنید و سپس به فایل HTML مربوطه در مرورگر تان نگاهی بیندازید تا مطمئن شوید که فایل شما درست مثلِ مثال بالا است.

آموزش های HTML ما

مبانی اولیه

point مقدمه

point HTML چیست؟

point ویرایشگران متنی

point اجزای سازنده

point تگ ها

point صفات

point عناصر

point  قالب بندی

point سرتیتر (عنوان)

point پاراگراف 

point تگ های عبارتی

point تگ انکر (لینک)

point تصویر 

point جدول 

point لیست

point لیست مرتب/لیست شماره گذاری شده

point لیست نامرتب/لیست بالت

point بررسی وجود یا عدم وجود فایل

point لیست توضیحات/لیست تعریف

point فرم ها

point انواع ورودی فرم

point صفت فرم

point سبک دهی

point  کلاس ها

point صفت id

point Iframe ها

point جاوا اسکریپت

point کامنت/توضیحات

point مسیرهای فایل

point عنصر head

point طرح بندی/چینش

point شیوه های طرح بندی

point واکنش گرایی

point کد کامپیوتری

point موجودیت ها

point نمادها 

point Charset 

point رمزگذاری URL

ویژگی ها

point ویژگی های عمومی

point ویژگی های رویداد ویندوز

تگ ها

point  مروری بر تگ ها

point تگ های HTML5

point تگ <! DOCTYPE>

point لنگر 

point تگ abbr

point تگ acronym

point تگ address

point تگ applet

point تگ html

point عنوان صفحه

point تگ body

point عناوین

point پاراگراف

point تگ br

point تگ hr

point تگ b

point تگ bdi

point تگ bdo

point تگ blockquote

point تگ cite

point تگ code

point تگ del

point تگ dfn

point تگ em

point تگ i

point تگ meter

point نقل قول 

point تگ ruby

point تگ var

point  تگ area

point تگ canvas

point تگ div

HTML5

point مقدمه

point  راهنمای کاربری

point اجزای جدید

point نقشه های گوگل

point مفاهیم

point مهاجرت

point صوت

point تصویر

منابع تکمیلی یادگیری

point فیلم های آموزش صفر تا صد HTML

point دانلود ۸ جزوه pdf اچ تی ام ال

point چیت شیت (صفحه ی تقلب)

point ۱۰ نکته مهم برای مبتدیان

آموزش های CSS ما

دستورات ضروری

point  معرفی

point شروع به کار

point سینتکس

point  انتخاب کننده ها

point رنگ

point پس زمینه

point فونت ها

point  متن

point لینک ها

point لیست ها

point  جدول ها

مدل جعبه ای (Box model)

point  مدل جعبه ای

point حاشیه (margin)

point فاصله (padding)

point مرز (border)

دستورات پیشرفته

point  طرح کلی (outline)

point نشانگر موس (cursor)

point سرریز (overflow)

point اندازه (dimension)

point واحدها (units)

point طرح بندی ظاهری

point  نمایش (display)

point آشکاری (visibility)

point موقعیت (Position)

point لایه ها (layer)

point شناوری (float)

point تنظیم (alignment)

point  کلاس های pseudo

point المان های pseudo

point انواع مدیا (media types)

point Sprites

point شفافیت (opacity)

point انتخابگرهای ویژگی

ویژگی های Css3

point  مرز (border)

point رنگ (color)

point پس زمینه (background)

point شیب (gradients)

point سرریز متن (text overflow)

point  سایه (drop shadow)

point تغییر شکل دو بعدی

point تغییر شکل سه بعدی

point انتقال

point انیمیشن ها

point  چیدمان چند ستونی

point جعبه های منعطف

point  فیلترها

point مدیا کوئری

point قوانین At

point ویژگی های Css3

کاربردی

point فیلم های آموزش صفر تا صد css

point دانلود ۲ جزوه آموزش css بصورت pdf

کلام پایانی

شما با موفقیت توانستید از مجموعه قوانین در فایل‌CSS تان برای تغییر ظاهر عناصر در فایل HTMLتان استفاده کنید. این پایه و اساس تمام کاری است که برای ساختن وب سایت تان انجام خواهید داد. مطمئن شوید که کدتان کار می ‌کند و وقت بگذارید تا متوجه شوید که ساختار آن چگونه است.

تفاوت پک های حرفه ای ما با آموزشهای رایگان: بطور خلاصه از زمین تا آسمان! 1-پکها، جدیدترین نسخه نرم افزارها را آموزش می دهند با قابلیت های بسیار بیشتر. 2-پکها توسط متخصص آن نرم افزار، به صورت کاملا پروژه محور و با حل چالش هایی که در مسیر کار عملی و حرفه ای با آن روبرو می شوید تهیه شده اند و بعد از استفاده، کاملا برای بازار کار آماده اید! 3- متد این پکها کاملا کار شده و تا ماهها، در ذهن تان ماندگارند و یادگیری بسیار سریعتر و کاملتری خواهید داشت. آموزشهای رایگان فقط دستورات نرم افزارها را (آنهم ناقص) بیان می کنند و تازه برای ورود به بازار باید ماهها تجربه عملی هم کسب کنید !!

turned_in, ,

چرب زبان

با این اپلیکیشن ساده، هر زبانی رو فقط با 5 دقیقه در روز، توی 80 روز مثل بلبل حرف بزن! بهترین متد روز، تقویت حافظه، آموزش تصویری. یادگیری زبان کلید یادگیری هر مهارتی در قرن 21 !


حتما بخوانید!

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این فیلد را پر کنید
این فیلد را پر کنید
لطفاً یک نشانی ایمیل معتبر بنویسید.

فهرست