جلسه ی چهارم : ایجاد سند در 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 قرار دهیم .

سپس آن را با نام Index.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 و 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 ایجاد شود .