جلسه ی چهارم : ایجاد سند در HTML و  CSS

آموزش طراحی سایت ابوالفضل کلهری بدون نظر 10 جولای 2018 360 بازدید

ایجاد سند HTML

برای ساخت یک سند HTML کافیست که پسوند یک فایل را به htm یا html تغییر دهیم ، در این صورت فایل مورد نظر به یک فایل HTML تبدیل می شود .

نکته : پسوند های htm و html برای ایجاد سند HTML می باشند اما پسوند html رسمی می باشد و بهتر است از این پسوند استفاده نماییم .

 

ساختار سند HTML

همانطور که در آموزش اول ( آموزش Html به زبان ساده ) گفتیم و نام بردیم سند HTML دارای چند تگ اصلی می باشد . حال می خواهیم نحوه ی چینش این تگ ها و کاربرد آنان را بررسی نماییم .

ابتدا تگ html را باز و بسته می نماییم زیرا تمامی سایت ما داخل این تگ قرار می گیرد .

<html> ... </html>

سپس در داخل آن تگ head را باز و بسته می نماییم زیرا تمامی قسمت های غیر قابل مشاهده ی سایت در این قسمت قرار می گیرند .

<html>
<head> ... </head>
</html>

در داخل تگ head از تگ های meta و title استفاده می کنیم .

<html>
<head>
<meta>
<title> ... </title>
</head>
</html>

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

بعد از بسته شدن تگ head تگ body را باز می نماییم . تمامی ظاهر وب سایت که ما آن ها مشاهده می نماییم در این تگ قرار می گیرد .

<html>
<head>
<meta>
<title> ... </title>
</head>
<body>
</body>
</html>

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

نکته : برای اینکه نوت پد++ ما از زبان فارسی در این فایل پشتیبانی کند کافیست نوار Encoding را باز نموده و آن را بر روی Encode in UTF-8 قرار دهیم .

Encoding در نوت پد ++

سپس آن را با نام Index.html ذخیره نمایید سپس یک فایل برای شما ساخته خواهد شد که آن فایل HTML شما خواهد بود .

سیو کردن html در نوت پد ++

 

نکته : لطفا در حال حاضر از نرم افزار های کد نویسی استفاده نکنید زیرا می خواهم نحوه ی درست کد نوشتن را به شما دوستان عزیز آموزش دهم تا در آینده با هر برنامه ای بتوانید کد مورد نظر خود را بنویسید .

 

HTML 5

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

<!DOCTYPE html>

ساخت سند CSS

برای ایجاد یک سند CSS کافیست نوت پد ( ترجیحا از نوت پد ++  استفاده نمایید ) خود را باز نموده سپس کلید alt+ctrl+s را فشار دهید تا یک پنجره برای شما باز شود سپس گزینه ی save as type را بر روی All Files قرار دهید و در کادر File Name متن Style.css را قرار دهید تا یک فایل CSS ایجاد شود .

سیو کردن css در نوت پد ++

 

معرفی نرم افزار های کد نویسی

نرم فزار های زیادی برای کد نویسی وجود دادر اما معمولا طراحان برای کد نویسی زبان های CSS و HTML از دو نرم افزار Dreamweaver ( دریم ویور ) و Atom ( اتم ) استفاده می کنند .

نرم افزار محبوب Dreamweaver

دریم ویور یک نرم‌افزار طراحی وب سایت می باشد که توسط شرکت ادوبی ( شرکت تولید کننده ی نرم افزار محبوب فتوشاپ ) تولید شده ‌است . این نرم افزار بهترین نرم افزار برای نوشتن کد های CSS و  HTML می باشد ، اما کار با آن نیاز به مقداری آموزش دارد.

 

نرم افزار Atom

نرم افزار Atom یک ویرایش‌گر متن و ویرایش‌گر کد ( کد ادیتور ) می باشد که در لینوکس، ویندوز و مک قابل استفاده است. این نرم افزار توسط GITHUB توسعه داده می شود .

کار با نرم افزار اتم بسیار ساده می باشد در ضمن این نرم افزار برای تمامی افراد در سراسر دنیا رایگان می باشد .

 

سخن نویسنده : من به شخصه از نرم افزار اتم استفاده می کنم چون کار با آن راحت می باشد و به شما عزیزان نیز توصیه می کنیم از این نرم افزار استفاده کنید .

 

آموزش ساخت سند CSS و HTML در اتم

در صورتی که از ویرایشگر کد Atom استفاده می کنید کافیست نرم افزار را باز کرده سپس از کلید ctrl+n استفاده نمایید تا یک فایل جدید ایجاد شود سپس کلید ctrl+s را فشار دهید تا یک پنجره برای شما باز شود سپس گزینه ی save as type را بر روی All Files قرار دهید و در کادر File Name متن Style.css را قرار دهید تا یک فایل CSS ایجاد شود .

همچنین برای ایجاد یک سند HTML کافیست از کلید ctrl+n استفاده نمایید تا یک فایل جدید ایجاد شود سپس کد HTML:5 را نوشته و کلید TAB را بزنید تا یک فایل  HTML ایجاد شود سپس کلید ctrl+s را فشار دهید تا یک پنجره برای شما باز شود سپس گزینه ی save as type را بر روی All Files قرار دهید و در کادر File Name متن Index.html را قرار دهید تا یک فایل HTML ایجاد شود .

 

احساس خود را درباره این مقاله بگویید 1 نظر

جلسه ی چهارم : ایجاد سند در HTML و  CSS
3 1
ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

مقالات پیشنهادی
دیدگاه شما در رابطه با این مقاله چیست!؟

ارسال دیدگاه

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

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