loading...
سرویس سایت سایت رزبلاگ بزرگترین سرویس ارائه خدمات سایت نویسی حرفه ای در ایران

قالب وردپرس, افزونه وردپرس

سلام به همه اسکینکی های عزیز ! شروع میکنیم با سری آموزشی HTML از مقدماتی تا پیشرفته ! البته این زبان پایه سطح پیشرفته نداره ولی خیلی آسون تر از اون غولیه که ..

آخرین ارسال های انجمن

آموزش کامل HTML | جلسه اول

سلام به همه اسکینکی های عزیز !

شروع میکنیم با سری آموزشی 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>
 

 

* این جلسه تمام شد و در جلسه بعدی نحوه لینک دار کردن یک متن یا عکس ، قرار دادن عکس در صفحه ، تغییر چینش محتویات صفحه و تگ های ابندایی دیگه رو یاد خواهید گرفت.

( اگر سوالی داشتید حتما بپرسید ! ) 

./ یاعلی

 

درباره : آموزشگاه اسکینک , آموزش طراحی وب ,
برچسب ها : آموزش html , آموزش فارسی HTML , آموزش کد ها و عناصر HTML , آموزش Html فارسی , آموزش کامل Html به زبان ساده , آموزش تصویری Html به زبان ساده , دانلود آموزش Html5 فارسی , اموزش Html به زبان فارسی , دانلود کتاب اموزش html , دانلود فیلم آموزش html , دانلود کتاب آموزش کامل html و css ترجمه سایت w3schools , دانلود جزوه آموزش html , فیلم آموزش کامل html , دانلود آموزش کامل html و css , دانلود کتاب آموزش html و css , آموزش html pdf , کدهای html , آموزش تگ های html , اموزش html5 ,
بازدید : 269 تاریخ : 24 / 06 / 1395 زمان : 15:11 نویسنده : mammadzi نظرات ()
مطالب مرتبط
  • حل خطا پرونده فرستاده شده بزرگ‌تر از upload_max_filesize در php.ini است حل خطا پرونده فرستاده شده بزرگ‌تر از upload_max_filesize در php.ini است
  • آموزش ایجاد زمینه مطلب(جعبه دانلود) در رزبلاگ +ویدئو آموزش ایجاد زمینه مطلب(جعبه دانلود) در رزبلاگ +ویدئو
  • آموزش ویدئویی ssl رایگان Let's Encrypt برای سی پنل شماره 2 آموزش ویدئویی ssl رایگان Let's Encrypt برای سی پنل شماره 2
  • nofollow کردن لینک ها در رزبلاگ nofollow کردن لینک ها در رزبلاگ
  • آموزش ویدئویی ssl رایگان Let's Encrypt برای سی پنل آموزش ویدئویی ssl رایگان Let's Encrypt برای سی پنل
  • 8 قدم تا ارتقا دومین اتوریتی Domain Authority 8 قدم تا ارتقا دومین اتوریتی Domain Authority
  • آموزش ساخت وی پی اس از فرانسه به صورت یک ماهه (کاملا رایگان) آموزش ساخت وی پی اس از فرانسه به صورت یک ماهه (کاملا رایگان)
  • پلاگین مترسنج با جاوا اسکریپت پلاگین مترسنج با جاوا اسکریپت
  • دانلود لیست ای پی های موتور های جستجوی گوگل و.. دانلود لیست ای پی های موتور های جستجوی گوگل و..
  • ارسال نظر برای این مطلب
    این نظر توسط victor در تاریخ 1395/6/27 و 13:34 دقیقه ارسال شده است

    کیفیت خیلی پایینه یکم باید بیشتر بشه این خیلی ابتدایی بود

    این نظر توسط اخر زمان در تاریخ 1395/6/25 و 9:38 دقیقه ارسال شده است

    واقعا پست با ارشی بود ممنون محمد جان

    این نظر توسط اخر زمان در تاریخ 1395/6/25 و 9:38 دقیقه ارسال شده است

    واقعا پست با ارشی بود ممنون محمد جان


    نام
    ایمیل (منتشر نمی‌شود) (لازم)
    وبسایت
    :) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
    نظر خصوصی
    مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
    کد امنیتی
    تبلیغات
    Rozblog.com رز بلاگ - متفاوت ترين سرويس سایت ساز

    مطالب