آنچه از html یاد گرفتم :)

پیشاپیش اول عرایضم معذرت خواهی میکنم اگه نوع نگارشم موردی داشت یا اطلاعاتم ناقص بود سعی میکنم که به مرور تکمیلش کنم :)

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

یکی از اون زبونها که زبان نشانه گزاریه و نه زبان برنامه نویسی، HTML یا (Hyper Text Markup Language) هستش و به طور قطع یکی از سه زیربنای مهم طراحی وبسایتِ (در کنار css و javascript).

چهارچوب وبسایت رو با همین HTML میسازیم که با استفاده از یکسری اِلِمانها، تگها، متاتگها و لینکها کلیات وبسایت رو شکل میده.

درحال حاضر که من دارم این مطالب رو مینویسم ورژن HTML5 بروزترین ورژنه!

HTML5
HTML5

در ساده ترین شکل ممکن برای نوشتن HTML به یه محیطی مثل Notepad نیاز داریم ولی من خودم با نرم افزار brackets شروع کردم و در حال حاضر از visual studio code استفاده میکنم.

چرا؟ به چند دلیل، یکی اینکه سرعت عمل رو میبره بالا و با استفاده از افزونه هایی که میتونه داشته باشه کارایی و امکانات برنامه هارو بیشتر میکنه و علاوه بر اون نتیجه ی کدی که مینویسین رو به صورت زنده میتونید ببینید.

در نظر داشته باشید که برای شروع HTML باید از یکسری قوانین ثابت استفاده کرد در همه ی پروژه ها باید حداقل یک قسمت head داشته باشید که متا تگها و لینکها رو اونجا اضافه کنید (کار متاتگها برای کاربر قابل رویت نیست و در واقع یجوری برای تامین اطلاعات مرورگرها و موتورهای جستجوِ مثلا برای کنترل کش مرورگر یا کنترل کوکی ها، رفرش کردن صفحه، تعریف کردن زبان مورد نظر و خیلی موارد دیگه استفاده میشه)

بعنوان مثال برای تعریف زبان فارسی میتونیم از این متاتگ استفاده کنیم. <"meta charset="UTF-8>

و یه قسمت دیگه به اسم body داشته باشین (در این قسمت هرچی میخواهد دل تنگت میتونی اضافه کنی!) داخل body میتونیم از تگهای بیشماری استفاده کنیم که هر کدوم میتونه کارایی و عملکرد خاص خودش رو داشته باشه و در ادامه مختصری از این تگهارو میذارم که با هم مرور کنیم.

هر تگی باید شروع و پایان داشته باشه و حتما بین دوتا < > نوشته بشه به عنوان مثال میتونیم بنویسیم:
<title/> آنچه از html یاد گرفتم :) <title>

اتمام تگ هم باید مانند شروع اون باشه با این تفاوت که یه اسلش داره </>

اگه بخوام تقسیم بندی کنم یه صفحه وب به صورت کلی شامل footer ،body ،header هستش و هر کدوم از این قسمت ها هم میتونه تقسم بندیای خودشو داشته باشه ولی معمولا تو هدر menu و یسری مشخصات کلی وبسایت رو میتونیم پیدا کنیم

در قسمت body که اصلی ترین قسمت صفحه و درواقع بدنه ی کارمون هست میتونیم table ،Div ، button image و موارد دیگه رو جا بدیم

و در قسمت footer هم مواردی مثل location ،abut ، form رو میتونیم بذاریم
در کل صفحات وبسایت خیلی منعطف هستن و هر کسی با سلیقه خودش میتونه شکل و ظاهری که دوست داره بهش بده، معمولا هم برای قسمهای مختلف شما میتونید از comment استفاده کنید و در مورد کدی که نوشتین توضیحاتی اضافه کنید که هم خودتون تو بازنویسی یا دیگران تو خوندن کداتون منظورتونو متوجه بشن و اینجوری زمان زیادی رو صرف این نمیکنید که متوجه بشین چی نوشتین!

یه نمونه کد خیلی ساده رو براتون مینویسم و توضیحاتی رو که بالا نوشتم رو به صورت عملی نشون میدم.

<html>

<head>

<meta charset="utf-8">

<title>عنوان صفحه در این قسمت نوشته میشود</title>

<link rel ="stylesheet" type="text/css" href="../"> <--! (css) این قسمت مربوط میشه به فایل
کارمون که برای تغییر ظاهر، رنگ و یکسری ویژگیهای صفحمون که اونجا به صورت اختصاصی اضافه میکنیم -->

</head>

<body> <--! در این قسمت کامنت نوشته میشود و قابل رویت برای کاربر نمی باشد -->

<div> های دیگه ای ایجاد کنید و از هر تگی داخلش استفاده کنیدdiv یک بخش جدا ایجاد میکنه و میتونید </div>

<p>این تگ به معنای پاراگراف هست و میتونیم توش متن بنویسیم</p>

<img src:"#">در این قسمت میشه با دادن آدرس مورد نظرمون عکس اضافه کرد</img>

<footer>بسازیم وداخلش چنتابخش جدابرای هرموردی اضافه کنیمdivمیتونیم چنتا footerداخل </footer>

</body>

</html>

البته گستردگی HTML رو نمیشه تو چنتا خط توضیح داد ولی خب فک میکنم برای شروع همین قدر کافی باشه، البته به مرور این پست رو ویرایش میکنم و کاملترش میکنم :)

جمع بندی کلی:

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

ارتباط HTML با CSS و Javascript از طریق ایجاد لینک در داخل صفحه ی HTML صورت میگیره.

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