آموزش html-css جلسه اول

 

مقدمه طراحی وب:

 

طراحی وب سایت و وب دیزاین مجموعه فعالیت می باشد که فرد برای ایجاد و طراحی یک صفحه  پایگاه اینترنتی می باشد که به عنوان فروشگاه , یا منبع اطلاع رسانی مورد استفاده قرار بگیرد

 

طراحی و ساخت وب سایت فعالیتی است که از چندین مرحله گوناگون برخوردار است و این مراحل شامل موارد مختلفی می شود که در ادامه به آن خواهیم پرداخت.

 

با توجه به اینکه دنیای گسترده ی اینترنت دارای هیچ گونه محدودیتی نمی باشد,این فرصت برای تمامی افراد وجود دارد که بتوانند بنا بر سلیقه و میل خود پا به دنیای طراحی وب سایت بگذارند.پس هیچ محدودیتی برای شما در دنیای طراحی وب سایت وجود ندارد.

 

اما طراحی وب سایت همانند هر فعالیت دیگری نیاز به ابزار خاص خود را دارد و افراد باید برای انجام آن از ابزار های مربوط به آن استفاده نمایند. خوشبختانه طراحی وب سایت نیز از ابزار های زیادی برخوردار است و هر فردی می تواند مطابق میل خودش از آنها استفاده کند.

 

برای انجام طراحی وب سایت باید از تکنولوژی و زبان های برنامه نویسی کمک بگیریم و به آنها تسلط داشته باشیم.زبان های php و javascript و… برخی از زبان هایی هستند که در فرایند طراحی وب سایت کمک شایانی به ما می کنند.

 

اما برای ورود به دنیای طراحی وب سایت هر فردی باید دو زبان بسیار ساده و ساده html و css را فرا بگیرد.

 

پس اولین قدم هر فرد برای یادگیری طراحی وب سایت و ورود به دنیای آن یادگیری html و css مهم ترین و اولین قدم می باشد. بعد از یادگیری این دو زبان,زبان یادگیری دیگر زبان های پیشرفته همچون php و javascript و c# و دیگر زبانها فرا خواهد رسید

 

 

معرفی html

 

 Html مخففی از اولین حروف عبارت Hyper Text Markup Language می باشد که به معنای زبان نشانه گذاری متن می باشد.

Html یک زبان نشانه گذاری متن بسیار مقدماتی و ساده می باشد. معمولا در در پشت پرده هر صفحه وب سایتی کد ها و تگ های html بسیاری یافت می شود که صفحات سمت کاربر وب سایت ها از آنها ساخته شده است.

 

در html تگ های بسیاری قرار دارند که هر کدام معنا و مفهوم متناسب و ویژه خودش را دارد و انجام دهنده عملی مختلف می باشد(برای مثال تگ img در html برای فراخوانی تصاویر در صفحه وب استفاده می شود).

 

که در ادامه دوره این آموزش تمامی تگ ها را باهم بررسی خواهیم کرد.

 

استفاده و به کاربردن تگ های اچ تی ام ال در ادیتور های مختلف انجام می شود. برخی از این ادیتور ها بسیار ساده می باشند مانند Notepad یا Notepad++ که امکانات کمی هم برای کاربران فراهم می سازد.

 

اما برخی از ادیتور ها بسیار حرفه هستند و امکانات بسیاری را در جهت سرعت بخشیدن به فعالیت های طراح در اختیار می گذارند. برخی از ادیتور های پیشرفته با نام های Visual Stadio و Visual Stadio code وجود دارند که ما استفاده از ادیتور قدرتمند Visual Stadio را به شما عزیزان توصیه می کنیم

 

 

معرفی css

 

 Css همچون html برگرفته شده از اولین حروف عبارت Cascading Style Sheets می باشد

میتوان گفت Css مکمل زبان html می باشد که به آن برای زیبا سازی صفحات وب و به عنوان استایل دهی به تگ و کد های html شناخته شده است

 

به معنای ساده تر می توان گفت تمامی اجزا یک صفحه وب سایت از کد ها و تگ های html ساخته شده اند اما تمامی استایل ها و چیدمان آن توسط Css انجام شده است

 

برای درک بهتر این مفهوم به مثال زیر توجه کنید:

 

 

اما تاثیر css

 

 

همانطور که مشاهده کردید در ابتدا در html تگ p را به نشانه تگ متن را فراخوانی کردیم در صفحه مرورگر خود بسیار ساده آن را دیدید. سپس با کمک Css به آن رنگ یا color قرمز دادیم و اینگونه آن را استایل دهی کردیم.

 

تمامی استایل هایی همچون اندازه ها,لوکیشن ها,رنگ و تمامی استایل های زیبایی که فکر کنید در css تعیین می شود. همچنین تمامی خصوصیات و تگ هایی که از ان ها استفاده خواهیم کرد توسط مرورگر برای افراد نشان داده خواهد شد.

 

اما همانطور که بدانید تمامی کد هایی که در html نوشته خواهند شد در فایلی جدا از تگ های Css باید باشند(البته در برخی موارد ممکن است کد های css داخل کد های html قرار بگیرند اما این کار از نظر سئو یا همان بهینه سازی وب سایت برای موتور های جستجو بسیار تاثیر بدی خواهد داشت)

 

فایل css از طریق کد

 

 

 <link href=”نام فایل سی اس اس” rel=”stylesheet” />

که در تگ head قرار میگیرد به کد های html متصل می شوند.

 

اگر بخواهیم در دنیای امروزی html و css را به چیزی تشبیه کنیم, یک ساختمان بهترین گزینه می باشد.

تمامی اسکلت بندی و مصالح ساختمان دقیقا همان کد هایی می باشند که ما در html استفاده کرده ایم و تمامی ابزار هایی که در جهت زیبایی ساختمان چون رنگ,شکل ها و… همان کد های css می باشند.

 

همانطور که میدانید و پیش تر هم گفتیم html درست است که یک زبان برنامه نویسی بسیار قدرتمند همچون پایتون یا جاوااسکریپت نمی باشد اما پیش نیازی برای پیشرفت و رسیدن به قله های بالا تر می باشد.

 

همانگونه که در این مطلب خدمتون عرض کردیم مهم ترین و اولین قدم برای آموزش طراحی وب سایت همین یادگیری html و css می باشد

 

بسیاری افراد هستند که شما را از یادگیری این زبان ساده باز می دارند اما برای فهمیدن و درک کد نویسی و پا گذاشتن به طراحی وب سایت بدون یادگیری html و css شدنی نیست

 

در این مطلب به معرفی کامل دو زبان ساده html و css پرداختیم و امیدواریم که شما به صورت کامل آن را خوانده باشید و چرایی یادگری html و css را درک کرده باشین.

 

حال لازم است اگر قرار است حرفه ای باشید یکی از ادیتور های حرفه ای که در بالا معرفی کرده ایم همچون Notepad++ را نصب کنید و در آموزش بعدی همراه با فرانما آن را به طور کامل فرا بگیرید.

 

امیدواریم از خواندن این مقاله (جلسه اول) لذت کامل را برده باشید. اگر سوالی دارید می توانید پایین در قسمت نظرات با ما در میان بگذارید تا به شما در روند آموزش کمک کنیم.