آموزش سریع HTML – قسمت اول

HTML

سلام من علی با آموزش html در خدمت شما هستم و سعی میکنم قسمت های

کاربردی html را براتون توضیح بدهم .

پیش از شروع باید بدانید که html در وب سایت همانند دیوار و اسکلت ساختمان میباشد یعنی شما متنها ، تصاویر ، لینکها و …. خود را

بصورت کدهای  HTML قرار میدهید و سعی نکنید.

با استفاده از  HTML به صفحات خود گرافیک و افکت دهید چون اصلا نباید این کار

را بکنید .

پیش نیازها :

  • یک لپ تاپ یا PC حتی اگر با ذغال سنگ کار کند
  • یک ادیتور
  • یک لیوان قهوه

ادیتور

برای زبان های سمت کلاینت مثل CSS , HTML ,JS یک ادیتور کافیست و شما میتوانید از ادیتور اتم [ لینک دانلود ] یا ویژوال [ لینک

دانلود ] استفاده کنید.

چون هر دو رایگان هستند و برای راحتی خودتون در کد نویسی میتونید از پلاگین EMMET برای هردو بهره

بگیرید و چون شما دانش آموز نیستید خودتون روش نصب EMMET را برای هر ادیتور بیابید .

وقتشه شروع کنیم

برای شروع یک فایل با فرمت html بسازید و ساختار زیر را درون آن قرار دهید ..

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> 
<title>Page Title</title>
</head>
<body>

</body>
</html>

خب کد بالا میشه اسکلت دائمی صفحات وب شما و همیشه بهمین شکل قرار میگیرد .

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

<tag name>
<meta charset="UTF-8">

همان طور که میبینید در داخل این تگ ها چیزی قرار نمیگیرد و نگارش آنها در HTML5 بصورت بالاست .

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

<tag name>

</tag name>
<body></body>

 

تگ ها

خواهشا عادت کنید و همیشه تگ ها را در ابتدا بصورت باز و بسته بنویسید و بعدش کدهای داخل تگ را تکمیل کنید چون در صورت

فراموشی هیچ اروری بشما نمایش داده نمیشود.

اما هنگام دادن افکت و … اشکتون بابت همین تگها درمیاد باز خودتون میدونید .

حالا بریم سراغ ساختاری که گفتم بهتره حفظ کنید و توضیح تگها

<!DOCTYPE html>

این تگ در بالای کدهای html شما قرار میگیرد و ورژن HTML  شما را به موتور جستجو اعلام میکند سعی کنید برای کلاس کاری هم که

شده به بزرگ و کوچکی کدها دقت کنید حالا توی HTML مهم نیست خیلی اما برای سایر زبان ها اجباریه .

HTML5

تگ بالا برای HTML5 به بالا استفاده میشه و لازم نیست مثل قبل ۲ خط کد بنویسید براش توقع نوشتنش را هم نداشته باشید از من 😀

 

تگ بعدی تگ html میباشد که شروع کدهای html در این تگ میباشد و نباید تگ دیگری بیرون از آن نوشته شود جز سرایند DOCTYPE .

این تگ دارای دو فرزند میباشد به نام های body و head که کدها و تگ های html در آن دو قرار میگیرند .

<!DOCTYPE html>
<html>

<head>

</head>

<body>

</body>

<html>

همان طور که مشاهده میکنید تگ head به دو بخش مجزا تبدیل میگردد که در قسمت head تگ هایی قرار میگیرند که تقریبا از دید

کاربر مخفی هستند مثل فایل های استایل ، متاتگها و … که بعدا در موردشون بیشتر توضیح میدم اما بدونید که تقریبا کاربردش چیه .

 

HTML5 اموزش HTML

تگ body

 

تگ body که اصولا اکثر تگها درون آن قرار میگیرند مانند تگهای متن ، عنوان ، لینک و … بدنه سایت شما را تشکیل میدهند و هر آنچه

در این تگ وارد میکنید در صفحه سفید مرورگر ظاهر میگردد و عمده مطالب ما در دروس آتی ( خودمم معنیشو نمیدونم ) توضیح

تگهای body میباشد .

پس چی شد ؟

body برای قسمت هایی که کاربر میبینه و head قسمت هایی که مرورگر کامپایل میکنه.

در تگ head باید یک متا تگ تک خطی برای ست کردن انکدینگ صفحه قرار دهید مخصوصا برای تایپ کلمات فارسی و مقدار آنرا برابر

UTF-8 قرار دهید .

توجه کنید که ..

اگر دیده باشید موقع سیو صفحات حتی داخل notepad هم این گزینه قابل روئیت هست و شما علاوه بر ست کردن انکدینگ

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

<meta charset="UTF-8">

در صورت قرار ندادن این تگ ممکن است در برخی مرورگرها ( فقط IE مزخرف ) این مقدار برابر UTF-7 قرار گیرد که امکان اجرای

اسکریپت های مخرب را به هکر میدهد .

HTML 2 آموزش HTML

تگ دیگر

فقط برای این درس میخوام یک تگ دیگه هم توضیح بدم و دکمه ارسال پست را بزنم و اون تگ پرکاربرد ( هر صفحه یک بار ) title

است که عنوان مد نظر شما را بر روی تبهای سایت قرار میدهد.

مثلا قبلا بستن این پیج کنار دکمه ضبدر میتونید عنوان ست شده title را ببینید .

نگارش این تگ به شکل زیر است .

<title> Page Name </title>

که داخل تگ head قرار میگیرد .

راستی بهتره بدونید تمامی کدهای سمت سرور حالا با هر زبانی به کد html تبدیل میگردد .

کامپایل

شما ازطریق پیج کامپایل شده نمیتونید به کد دسترسی داشته باشید اما به کدهای سمت کلاینت مثل css , javaScript میتونید  دسترسی پیدا کنید .

بلاخره این پست به پایان رسید درسته تعداد کارکترش کمه اما من ساعت ۶ صبح دارم مینویسم و اصلا فکر نکنید از خواب بیدار شدم

و حوصله ندارم بلکه برعکس هنوز نخوابیدم یه بیت شعر هم بنویسم زیر این پست یادگاری 😀

آنکس که نداند و نخواهد که بداند

حیف است چنین جانوری زنده بماند

بدرود

 

Add a comment

*Please complete all fields correctly

مقالات مرتبط

No Image
Posted by علی اله دادی | ۱۳۹۷-۰۶-۱۸
آموزش سریع HTML – قسمت دوم
سلام من علی هستم با قسمت دوم آموزش HTML و در این قسمت میخواهم در مورد تگ های مربوط به متن و لینک ها صحبت کنم . چون عمده مطالب...
Website Wireframe Sketch And Programming Code On Digital Tablet طراحی وب
Posted by علی اله دادی | ۱۳۹۷-۰۶-۱۶
آموزش طراحی وب قسمت صفر
طراحی وب و نکاتی مهم در این مورد طراحی وب را یاد میگیرید پس حتما این مقاله را مطالعه کنید. با سلام و عرض ادب و احترام ، من علی...
1_hUuioUcs_0tzu7mMwr9udA لاراول (Laravel) چیست؟
Posted by admin44 | ۱۳۹۷-۰۵-۰۹
لاراول (Laravel) چیست؟
           لاراول (Laravel) چیست؟ لاراول (Laravel) یک چارچوب متن باز پی اچ پی (PHP) است. لاراول از کوچکترین نرم افزارهای برنامه نویسی گرفته تا بزرگترین پروژه ها...