موضوع :
آموزشگاه اسکینک ,
آموزش طراحی وب ,
زمان: 1395/06/24
سلام به همه اسکینکی های عزیز !
شروع میکنیم با سری آموزشی HTML از مقدماتی تا پیشرفته !
البته این زبان پایه سطح پیشرفته نداره ولی خیلی آسون تر از اون غولیه که توی ذهنتون ساختید !
این آموزش ها در 5 جلسه هستند تا شما رو به یک کدنویس پایه تبدیل کنه !
خب بریم سراغ آموزش :)
( این جلسه آموزش چارچوب ساده HTML )
اول از همه HTML چیه ؟!
HTML مخفف Hyper Text Markup Language به معنی زبان نشانه‌گذاری ابرمتنی هست که ما دیگه کاری به این اسم بلند نداریم !
یک فایل HTML از تو بخش head و body تشکیل شده ، کد هایی که در قسمت head قرار میگیرند متا ها ( کد های معرف ) و یا استایل ها و یا دیگر کد های متصل به بخش های فایل HTML ما هستند .
محتویات body همان اجزای قابل مشاهده قالب هستند.
هر کد و پیش کدی در بین دو < > قرار میگیرند برای مثال کد head در واقع <head> و با پایانه </head> هست و تگ body هم به همین صورت ! ( <body> کد </body> )
یک قالب HTML ساده به صورت زیر هست :
<!DOCTYPE html>
<html>
<head>محتویات هد</head>
<body>محتویات بادی</body>
</html>
* تگ های هد و بادی بین دو تگ معرف <html> و </html> قرار میگیرند . <!DOCTYPE html> چیه؟ این کد که در اول صفحهات HTML ما قرار میگیره یک کد معرف به مرورگرهاست که ساختار صفحه رو معرفی کنه . این کد در سئو تاثیر داره و برای صفحات بهینه امر ضروری هست !
محتویات تگ head :
تگ عنوان صفحه : اولین چیز و مهم ترین عنوان صفحه هست که در این بخش قرار میگیره ، با دو کد معرف :
<title> عنوان صفحه </title>
این کد معمولا خط بعدی <head> استفاده میشه و با قرار دادن این کد عنوان صفحه در فایل ما قرار داده میشه :)
تگ های متا :
تگ های متا کد هایی برای معرفی سایت به موتور های جستجو گر هستند و برای هر سایتی ضروری هست !
برای یک صفحه با محتویات فارسی تگ زیر یک مورد ضروریه :
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="robots" content="index, follow" />
<meta name="description" content="توضیح در مورد محتویات" />
<meta name="author" content="نویسنده این مطلب در این صفحه">
<meta name="language" content="زبان صفحه">
<meta name="geo.region" CONTENT="کشور" />
<meta name="googlebot" content="INDEX, follow" />
<meta name="robots" content="index, follow">
<meta name="description" content=درباره سایت">
<meta name="keywords" content="کلمات کلیدی در مورد این سایت">
اینها لیستی از متا های تقریبا ضروری برای این صفحه فارسی و بهینه هستند که حتما باید در تگ head استفاده بشن .
استایل ها و کد های جاوا اسکریپت :
کد های استایل به عناصر داخلی صفحه ما شکل و حالت میده و تگ های جاوا هم همینطور !
کد شروع و پایانه یک استایل در بخش head قرار میگیره مثال :
<style>
کد استایل
</style>
و یا کد جاوا اسکریپت :
<script type="text/javascript">
محتویات جاوا اسکریپت
</script>
محتویات تگ body :
تگ های عناوین و سر فصل ها :
تگ های عنواین و سر فصل ها به یک سری کد هایی هستند که نه تنها برای مشخص کردن عنوان صفحه ، مطلب و یا ... استفاده میشوند بلکه در سئو هم نقش بزرگی دارند و رعایت کردن اینها امتیاز مثبتی در سئو هست .
<h1>سر فصل اول</h1>
<h2>سر فصل دوم</h2>
<h3>سر فصل سوم</h3>
<h4>سر فصل چهارم</h4>
<h5>سر فصل پنجم</h5>
<h6>سر فصل ششم</h6>
تگ های h یک تا h سه استفاده بیشتری و مهم تری نسبت به <h4> و <h5> و <h6> دارند .
تگ <h1> برای معرفی صفحه و سایت استفاده میشه و بهتر است یکبار در صفحه از اون استفاده بشه .
تگ <h2> برای عناوین مطالب استفاده میشه .
تگ <h3> برای بخش های اصلی در هر نوشته استفاده میشه .
این سه تگ رو همیشه به خاطر داشته باشید .
ما به کجا رسیدیم؟!:
<!DOCTYPE html>
<html>
<head>
<title> عنوان صفحه </title>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="robots" content="index, follow" />
<meta name="description" content="توضیح در مورد محتویات" />
<meta name="author" content="نویسنده این مطلب در این صفحه">
<meta name="language" content="زبان صفحه">
<meta name="geo.region" CONTENT="کشور" />
<meta name="googlebot" content="INDEX, follow" />
<meta name="robots" content="index, follow">
<meta name="description" content=درباره سایت">
<meta name="keywords" content="کلمات کلیدی در مورد این سایت">
</head>
<body>
<h1>سر فصل اول</h1>
<h2>سر فصل دوم</h2>
<h3>سر فصل سوم</h3>
<h4>سر فصل چهارم</h4>
<h5>سر فصل پنجم</h5>
<h6>سر فصل ششم</h6>
محتویات عادی
</body>
</html>
* این جلسه تمام شد و در جلسه بعدی نحوه لینک دار کردن یک متن یا عکس ، قرار دادن عکس در صفحه ، تغییر چینش محتویات صفحه و تگ های ابندایی دیگه رو یاد خواهید گرفت.
( اگر سوالی داشتید حتما بپرسید ! )
./ یاعلی
911
| امتیاز : |
|
نتیجه : 0 امتیاز توسط 0 نفر مجموع امتیاز :0
0
| |
برچسب ها :
آموزش html ,
آموزش فارسی HTML ,
آموزش کد ها و عناصر HTML ,
آموزش Html فارسی ,
آموزش کامل Html به زبان ساده ,
آموزش تصویری Html به زبان ساده ,
دانلود آموزش Html5 فارسی ,
اموزش Html به زبان فارسی ,
دانلود کتاب اموزش html ,
دانلود فیلم آموزش html ,
دانلود کتاب آموزش کامل html و css ترجمه سایت w3schools ,
دانلود جزوه آموزش html ,
فیلم آموزش کامل html ,
دانلود آموزش کامل html و css ,
دانلود کتاب آموزش html و css ,
آموزش html pdf ,
کدهای html ,
آموزش تگ های html ,
اموزش html5 ,
نظرات : 3 تا
بازدید : بار
