آموزش HTML5 ساخت اولین قالب
معرفی :
با عرض سلام ادب و احترام خدمت شما کاربران محترم سایت دوست داشتنی ilikephp.ir به جلسه دوم Html5 خوش آمدید ..
در جلسه پیش آماده سازی پیش نیاز ها برای شروع دوره html5 را با هم مرور کردیم.
هدف جلسه :
در این جلسه با تگ های HTML5 آشنا میشیم و شروع به کد زدن در یک محیط ویرایشگر یا ادیتور می کنیم ، اگر با ویرایشگر ها یا محیط های کدنویسی آشنایی ندارید می تونید به جلسه اول مراجعه کنید و اطلاعات لازم رو کسب کنید .
بدون اینکه وقتمون از دست بره وارد آموزش ها می شیم و سعی می کنیم آموزشها رو به صورت ساده ارائه بدیم که افرادی هم که اطلاعاتی به صورت پیش زمینه در کدنویسی ندارند ، از روند آموزش خسته نشوند.
شروع آموزش :
معرفی تگ DOCTYPE :
خب در ابتدای کار Notepad++ یا هر ویرایشگر دیگه ای رو که انتخاب کردید ، اجرا کنید بعد از باز شدن ویرایشگر یک سند HTML ایجاد کنید و اولین خطی رو که در اون باید تایپ کنید کد زیر هست :
<!DOCTYPE html>
این کد به مرورگر ها یا Browser ها می فهماند که سندی که در حال اجراست یک سند وب HTML5 است ، پس توجه داشته باشید که همیشه از این استاندارد در کد نویسی های خود استفاده کنید و فراموش نکنید .
اگر از هر ادیتوری استفاده می کنید ، باید متوجه شده باشید که بعد از نوشتن کد بالا ، به حالت رنگ خاکستری یا رنگ های تیره ی دیگه در میاد که این نشونه ی اینه که این برچسب یا تگ در صفحه نمایش به کاربر نمایش داده نمیشه و یک استاندارد هست که فقط و فقط توسط مرورگرها قابل تشخیص است .
نکته : نوشتن این تکه کد در سندهای وب به صورت الزامی است و اکیدا توصیه می کنم که در تمام پروژه ها این تگ رو قرار بدین .
معرفی تگ HTML :
تگ شروع HTML رو بعد از تگ DOCTYPE می نویسیم و انتهای اون رو هم با تگ پایانی می بندیم که در ادامه راه تگ بستن را فراموش نکنیم . تا اینجا کد شما به صورت زیر باید باشه :
<!DOCTYPE html>
<html> تگ شروع سند وب
</html>تگ پایان سند وب
این تگ به مرورگرها معرفی می کند که این سایت یا پروژه یک سند وب است که با زبان html ایجاد شده است و آنرا به سرعت ترجمه می کند .
هشدار :
برای بار دوم هم تاکید می کنم اگر شما از این دوره چیزی رو متوجه نمی شید باید حتما پیش نیازهایی را که در جلسه گذشته گفتم یاد بگیرید و سپس به این دوره بپیدوندید .
معرفی تگ HEAD :
حالا نوبت به درج کد head یا سرآیند در پروژه می رسه که باید درون تگ html به صورت زیر درج بشه :
<!DOCTYPE html>
<html>
<head>
</head>
</html>
این تگ برای درج یکسری information یا اطلاعات درباره سایت ، طراح ، برنامه نویس، نویسنده ، تاریخ ایجاد سایت ، عنوان سایت ، لینک دادن به فایل های css و javascript استفاده میشه .
نکته : تگ head وجودش در اسناد وب الزامی است بالاخره هر سایتی دارای اطلاعاتی است که باید توسط robot های موتورهای جستجو گر اطلاعات شناسایی و جمع آوری بشه .
معرفی تگ BODY :
تگ BODY یا بدنه ، اصلی ترین قسمت یک پروژه وب هستش که کاربر چیزی رو که در سیستم خودش از سایت شما مشاهده می کنه در این قسمت قرار میگیره درواقع سایت شما همانند یک ویترین فروشگاه است که این ویترین درون بدنه تعریف می شود .
کدهای شما تا بحال باید به این شکل باشد :
<!DOCTYPE html>
<html>
<head>
</head>
</html>
معرفی تگ lang یا زبان سایت :
شما باید در پروژه های خود مشخص کنید که سایتی که در حال طراحی آن هستید قرار است با چه زبانی به مخاطبان نمایش داده شود ؟
برای مشخص کردن زبان سایت ، باید تگ lang را در تگ html قرار دهید به صورت زیر :
<!DOCTYPE html>
<html lang=”en”>
<head>
</head>
<body>
</body>
</html>
نکته : برای زبان فارسی نیز می توانید مقدار en در خاصیت lang را به fa یعنی فارسی تغییر دهید .
معرفی تگ charset :
درون تگ head یک تگی باید حتما قرار بگیرد به صورت زیر :
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”/>
</head>
<body>
</body>
</html>
این تگ یک نوع کاراکتر کدگذاری برای نوشته ها است که به صورت فرمت 8 بیتی رمز نگاری می کند . که پیشنهاد می شود از این یونیکد استفاده کنید در تمام پروژه های طراحی سایت خودتان .
نکته : برای آشنایی بیشتر با این تگ می تونید در اینترنت تحقیق کنید یا اینکه دوره طراحی وب سایت ilikephp.ir رو به صورت کامل مشاهده کنید .
معرفی تگ Title :
درون تگ head یک تگ دیگر وجود دارد به نام title یا عنوان سایت که همونطور که در بالا گفتیم در قسمت information یا اطلاعات سایت قرار می گیره این تگ قابل مشاهده است برای کاربران و عنوان سایت رو نشان می دهد .
به صورت زیر نوشته می شود :
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”/>
</title>آموزش HTML5 آماده سازی <title>
</head>
<body>
</body>
</html>
و در خروجی به صورت زیر نمایش داده می شه :
معرفی تگ link در head :
شما می توانید برای import کردن فایل های css و js خود از قسمت head اقدام کنید به عنوان مثال شما یک فایل css آماده کرده اید که به صورت خروجی می خواهید به پروژه خودتان آنرا وارد نمائید در ابتدا درون تگ head باید آنرا وارد کنید و سپس از آن در پروژه استفاده کنید به صورت زیر :
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”/>
</title>آموزش HTML5 آماده سازی <title>
<link rel=”stylesheet” href=”main.css” type=”text/css”/>
</head>
<body>
</body>
</html>
حالا به توضیحات کامل تگ link می پردازیم :
Rel = مخفف relationship است، این خاصیت با مقدار stylesheet نشان می دهد که با یک فایل به نام main.css یک رابطه وجود دارد که از نوع css است .
Href = مخفف Hyperlink refrence است ، این خاصیت با مقدار main.css نشان می دهد که رفرنس یا آدرس اصلی فایل در کجا قرار دارد اگر در پوشه خود سایت باشد کافیست نام فایل با پسوند آن را درج کنید .
Type= نوع لینک را معرفی می کند که از نوع html/css است . اگر برای جاوا اسکریپت استفاده کنید نوع فایل را باید به این شکل معرفی کنید :
Html/javascript
و اما مرحله آخر :
حالا وقت آن رسیده است که فایل خودتان را ذخیره کنید به صورت اصولی و آنرا در مرورگر مشاهده کنید .
در ادیتور خود روی گزینه save کلیک کنید در قسمت save name : باید حتما index.html را قرار دهید .
و در قسمت Encoding باید حتما روی UTF-8 قرار دهید و فایل را ذخیره یا save کنید در یک مسیر مشخص .
در انتها وقتی روی فایل ذخیره شده کلیک کنید و آنرا باز کنید یک صفحه وب در مرورگر برای شما باز می شود که حاصل نوشتن کدهای خود را می توانید در آن ببینید .
اگر چیزی در صفحه شما نمایش داده نمی شود بخاطر این است که داخل تگ body چیزی را ننوشته اید ! نگران نباشید در جلسات آتی به آن هم خواهیم رسید !
نتیجه گیری:
در این جلسه تگ های الزامی و ساده برای تشکیل صفحات وب را معرفی کردیم و همچنین به بررسی تک تک آنها پرداختیم در جلسات آتی با سایر کدها آشنا خواهیم شد .
ممنون از اینکه همراه ما بودید
دوره های مارو به دوستانتان معرفی کنید
نظرات کاربران