آموزش HTML CSS پروژه محور رایگان

طراحی سایت اختصاصی | سید عباس حسینی 24 شهریور 1399 0

آموزش HTML CSS پروژه محور رایگان

به نام خدا امروز میخواهیم در خصوص آموزش HTML CSS پروژه محور رایگان صحبت کنیم لازم به ذکر است که بگوییم زبان برنامه نویسی HTML یک زبان برنامه نویسی نیست و یک زبان نشانه گذاری است.

تفاوت بین زبان برنامه نویسی و نشانه گذاری در چیست ؟

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

تگ چیست ؟

کلمه تگ به معنی کوتاه نویسی است ،‌ در زبان HTML تگ نویسی وجود دارد. قبل از اینکه شروع به تگ نویسی کنیم نیاز است اصول و قواعد آن را مطرح کنیم اصول و قواعد آن این است که عناصر باید بین تگ ها نوشته شود و بعد از اتمام کار باید آنها بسته شود که نمونه آن را در تصویر پایین به نمایش گذاشته شده است.

<p> سلام دوستان عزیز </p>

 

حالا که این مورد را توضیح دادیم که قانون استفاده از تگ های این زبان نشانه گذاری به چه صورت است ،‌ باید این موضوع را بگوییم که چگونه می توانیم از این زبان نشانه گذاری در طراحی سایت استفاده کنیم.

کاربرد HTML در طراحی سایت :

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

هر زبان برنامه نویسی و زبان نشانه گذاری نیز نیاز به محیط کار دارد، و بهترین بستر برای زبان های برنامه نویسی و نشانه گذاری مانند HTML&CSS

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

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

معرفی چند تگ HTML :

در توضیحات قبلی گفتیم که تگ به معنی کوتاه نویسی است یکی از تگ های پر کاربرد تگ p است که برای نوشتن و نمایش متن ها در وب سایت ها استفاده می شود تگ p کوتاه شده عبارت paragraph که به معنی متن یا بند است.یا تگ دیگری که در مورد آن توضیح می دهیم تگ b است این تگ برای پررنگ کردن یک تکه متن استفاده می شود که کوتاه شده عبارت bold است.در قسمت های بعدی تگ های مختلف و همینطور کاربرد آنها در طراحی وب توضیح خواهم داد.

چارچوب وب سایت :

برای اینکه بتوانیم یک صفحه وب سایت را طراحی کنیم نیاز است چارچوب اصلی را پیاده سازی کنیم که این چارچوب متشکل از تگ HTML head header body footer  است.

<!DOCTYPE html>
<html>
<head>
    
</head>
<header>
    
</header>
<body>

</body>
<footer>
    
</footer>
</html>

 

تصویری که مشاهده می کنید نحوه استاندارد چارچوب بندی وب سایت است.

توضیح کوتاه در مورد تگ های چارچوب اصلی وب سایت :

Head :

در قسمت های قبل توضیح دادیم که زبان نشانه گذاری HTML چیست و قالب و بدنه اصلی وب سایت را با آن ایجاد می کنیم. برای اینکه بهتر این موضوع را درک کنیم اگر وب سایت را به یک بدن انسان تشبیه کنیم تگ head مغز انسان است در این قسمت تگ هایی نوشته می شوند که در سایت نمایش داده نمی شوند و فقط نتیجه آنها به نمایش گذاشته می شود این تگ های عبارت است از <meta> <link> <title> <script> است.

Script :

یکی از تگ های پرکاربرد در HTML تگ <script> می باشد.این تگ به ما این امکان را می دهد که فایل هایی از نوع java را به صفحه خود لینک کنیم و یا کدهای زبان برنامه نویسی java را درون صفحه HTMLخود قرار دهیم.

لازم به ذکر است که بگوییم خیلی از زیبایی ها و حالت های نمایشی که در سایت ها مشاهده می کنید با استفاده از زبان های برنامه نویسی از جملهJavascript  و jQuery می باشد.

<script type="text/javascript" src="js.js"></script>


 

Title :

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

<title>abbashosseini.ir</title>


 

Link :

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

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

<link rel="stylesheet" type="text/css" href="style.css">



 

Meta :

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

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="author" content="Author name" />
<meta name="copyright" content="Copyright owner" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow">
<meta name="googlebot" content="index, follow">
<meta http-equiv="Content-Language" content="fa" />
<meta name="viewport" content="width=device-width">
<meta charset="uft8"/>

 

 

Header :

حال که تگ head را توضیح دادیم نیاز است تگ بعدی که نقش سر و صورت وب سایت را تشکیل می دهد توضیح دهیم ، Header متشکل از قسمت جستجو ، لوگو سایت و از همه مهم تر منوی اصلی سایت است لازم به ذکر است تمام این قسمت های سلیقه بوده و در بعضی از وب سایت ها سرچ وجود ندارد و در بعضی وب سایت ها در منوی بالای سایت عضویت و ورودکاربر نیز قرار داده می شود.

Body :

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

Footer :

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

 

 



دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *