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

ایجاد سند 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 ایجاد شود .

 

ابوالفضل کلهری

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

دیدگاه ها
  • قبل از ارسال دیدگاه خود قوانین بخش دیدگاه ها را مطالعه کنید. ارسال دیدگاه به معنی پذیرش این قوانین است. قوانین بخش دیدگاه ها