آموزش مفاهیم مقدماتی HTML
سه شنبه, ۱۵ دی ۱۳۹۴، ۱۲:۵۰ ب.ظ
html زبان نشانه گذاری و اسکلت صفحات وب و بطور کلی اصلی ترین زبان در دانش وب می باشد.در این پست می خواهیم که مقدمات استفاده از html را به شما آموزش دهیم و شما را تا حدی با این زبان آشنا کنیم.
خب شما برای کد نویسی با html باید یکسری مقدمات را آماده کنید.
این مقدمات شامل دو نرم افزار کلیدی می شوند: یک نرم افزار ویرایشگر متن ، و یک نرم افزار مرورگر
شما می توانید از نرم افزار ساده ی notepad که بصورت پیشفرض بر روی ویندوز نصب است استفاده کنید و یا می توانید از نرم افزار های پیشرفته تر مثل notepad++ ، php designer و ... اسفاده کنید.
نرم افزار مرورگر هم بصورت پیشفرض بر روی ویندوز نصب شده است.(منظور ما مرورگر IE می باشد).
حالا می توانیم شروع بکار کنیم! ما کد ها را درون فایلی ذخیره و سپس با استفاده از مرورگر آن فایل را باز می کنیم تا کد های ما اجرا شوند.
ایجاد فایل html
برای اینکار برنامه ی notepad را باز می کنیم.
کلید ترکیبی CTRL + s را می زنیم.
در پنجره ی باز شده در قسمت file name نام فایل خود را وارد می کنیم دقت داشته باشید که در پایان نام فایل پسوند html. را اضافه کنید.در حقیقت این پسوند نشان می دهد که فایل ما از نوع html می باشد.
به آدرسی که میخواهید فایل در آن جا ذخیره شود بروید.
در پایان بر روی save کلیک کنید.
کد های اولیه html
در واقع یک فایل html مجموعه ای از تگ ها می باشد.منظور ما ار تگ کد هایی به شکل <tagname> </tagname> می باشد. همانطور که می بینید یک تگ با یک تکه کد شروع و با کد دیگر پیایان می یابد.البته بیشتر تگ ها اینگونه هستند و برخی استثنائات هم وجود دارد.یک تگ با <tagname> شروع می شود و با <tagname/> به پایان می رسد.
مایکسری کد هایی داریم که باید در فایل های html وجود داشته باشند.در زیر یک تکه کد ساده ی html نوشته شده که این کد های اصلی را دارد.
1 <html>
2 <head>
3 <title> my first web page </title>
4 </head>
5 <body>
6 <h1> hi my name is daniyal </h1>
7 </body>
8 </html>
توضیحات:
در خط اول ما تگ <html> را قرار دادیم.هر فایل html باید با این تگ شروع شود.
خط دوم تگ <head> است که یکی از مهمترین قسمت ها به شمار می آید. محتویات این تگ در صفحه وب قابل مشاهده نیستند.بلکه در این قسمت کد هایی قرار می گیرند که نه در ظاهر بلکه در باطن صفحه اعمال خاصی را انجام می دهند.مثلا یک فایل جداگانه را دریافت می کنند و یا با صفحه ی وب را برای موتور های جستجو بهینه می کنند.
در این مثال ما از تگ <title> در برای ایجاد عنوان صفحه ی وب استفاده کردیم.دقت داشته باشید که این تگ تنها می بایست درون <head> قرار گیرد.
در خط پنجم تگ <body> را آورده ایم. هر عنصری که در صفحه ی وب قابل مشاهده است در این قسمت قرار می گیرد.
در خط ششم ما یک متن را ایجاد کرده ایم.
در خطوط هفت و هشت نیز تگ های body و html را بسته ایم.
تکه کد بالا تنها یک متن "hi my name is daniyal" را نمایش می دهد. شما می توانید این تکه کد در notepad بنویسید و پس از ذخیره کردن با مرورگر آن را اجرا کنید و نتیجه را ببینید.
خب شما برای کد نویسی با html باید یکسری مقدمات را آماده کنید.
این مقدمات شامل دو نرم افزار کلیدی می شوند: یک نرم افزار ویرایشگر متن ، و یک نرم افزار مرورگر
شما می توانید از نرم افزار ساده ی notepad که بصورت پیشفرض بر روی ویندوز نصب است استفاده کنید و یا می توانید از نرم افزار های پیشرفته تر مثل notepad++ ، php designer و ... اسفاده کنید.
نرم افزار مرورگر هم بصورت پیشفرض بر روی ویندوز نصب شده است.(منظور ما مرورگر IE می باشد).
حالا می توانیم شروع بکار کنیم! ما کد ها را درون فایلی ذخیره و سپس با استفاده از مرورگر آن فایل را باز می کنیم تا کد های ما اجرا شوند.
ایجاد فایل html
برای اینکار برنامه ی notepad را باز می کنیم.
کلید ترکیبی CTRL + s را می زنیم.
در پنجره ی باز شده در قسمت file name نام فایل خود را وارد می کنیم دقت داشته باشید که در پایان نام فایل پسوند html. را اضافه کنید.در حقیقت این پسوند نشان می دهد که فایل ما از نوع html می باشد.
به آدرسی که میخواهید فایل در آن جا ذخیره شود بروید.
در پایان بر روی save کلیک کنید.
کد های اولیه html
در واقع یک فایل html مجموعه ای از تگ ها می باشد.منظور ما ار تگ کد هایی به شکل <tagname> </tagname> می باشد. همانطور که می بینید یک تگ با یک تکه کد شروع و با کد دیگر پیایان می یابد.البته بیشتر تگ ها اینگونه هستند و برخی استثنائات هم وجود دارد.یک تگ با <tagname> شروع می شود و با <tagname/> به پایان می رسد.
مایکسری کد هایی داریم که باید در فایل های html وجود داشته باشند.در زیر یک تکه کد ساده ی html نوشته شده که این کد های اصلی را دارد.
1 <html>
2 <head>
3 <title> my first web page </title>
4 </head>
5 <body>
6 <h1> hi my name is daniyal </h1>
7 </body>
8 </html>
در خط اول ما تگ <html> را قرار دادیم.هر فایل html باید با این تگ شروع شود.
خط دوم تگ <head> است که یکی از مهمترین قسمت ها به شمار می آید. محتویات این تگ در صفحه وب قابل مشاهده نیستند.بلکه در این قسمت کد هایی قرار می گیرند که نه در ظاهر بلکه در باطن صفحه اعمال خاصی را انجام می دهند.مثلا یک فایل جداگانه را دریافت می کنند و یا با صفحه ی وب را برای موتور های جستجو بهینه می کنند.
در این مثال ما از تگ <title> در برای ایجاد عنوان صفحه ی وب استفاده کردیم.دقت داشته باشید که این تگ تنها می بایست درون <head> قرار گیرد.
در خط پنجم تگ <body> را آورده ایم. هر عنصری که در صفحه ی وب قابل مشاهده است در این قسمت قرار می گیرد.
در خط ششم ما یک متن را ایجاد کرده ایم.
در خطوط هفت و هشت نیز تگ های body و html را بسته ایم.
تکه کد بالا تنها یک متن "hi my name is daniyal" را نمایش می دهد. شما می توانید این تکه کد در notepad بنویسید و پس از ذخیره کردن با مرورگر آن را اجرا کنید و نتیجه را ببینید.
پک