html
html
html

آموزش html جلسه سوم

فناوری نوین نوامبر 21, 2015
0 316 خواندن این مطلب در 2 دقیقه

جلسه سوم آموزش زبان html :

 

در جلسه قبل آموختیم که تگ b برای ضخیم نوشته شدن یک کلمه و یا جمله استفاده میشود ، تگ strong نیز همین کار را انجام میدهد. تگ i برای ایتالیک کردن یا کج نوشتن نوشته استفاده میشود ، و تگ u برای زیر خط دار کردن نوشته به کار میرود .

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

۱- تگ <html> :

این تگ نشان می دهد که کدهایی که ما در صفحه در حال نوشتن آنها هستیم زبان html هست لذا لازم است تمام کدهای درون صفحه را درون این تگ قرار دهیم

 

۲- تگ head :

این تگ برای استفاده از کدهایی است که در ابتدای بارگذاری صفحه باید اجرا شود ، لذا لازم است این تگ را درون تگ html و در بالاترین محل ممکن بنویسیم

 

۳- تگ <body> :

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

 

نکته مهم : تگها همیشه به صورت تو در تو نشوته میشوند یعنی آخرین تگی که باز شده است باید اولین تگی باشد که بسته میشود و به همین شکل ، لذا نوشتن دو تگ به شکل زیر اشتباه است :

<b><i> فناوری نوین </b></i>

 

کد بالا باید به شمل زیر نوشته شود:

<b><i>فناوری نوین </i></b>

نتیجه کد بالا به شکل زیر است :

فناوری نوین

نکته دیگر خاصیت ارث بری تگها هست ، لذا اگر تگی را به شکل زیر بنویسیم ، متنهایی که درون تگها قرار دارند خصوصیات خود را از تمام تگهایی که در آنها قرار دارند به ارث میبرند:

<b><i>فناوری نوین </i>کازرون</b>

در کد بالا فناوری نوین و کازرون ، هر دو در بین تگ B  قرار دارند لذا هر دو ضخیم نوشته میشوند ، اما فقط فناوری نوین بین تگ i قرار دارد لذا فقط فناوری نوین کج نوشته میشود: خروجی کد بالا به شکل زیر است:

فناوری نوین کازرون

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

<!DOCTYPE HTML>
<HTML>
	<HEAD>
		کدهای سربرگ
	</HEAD>
 
	<BODY>
 
		کدهای بدنه اصلی صفحه
 
	<BODY>
</HTML>

درکد بالا فقط خط اول کدها ناآشناست و این کد برای این است که به مرورگر بفهمانیم که ما میخواهیم بر اساس استانداردهای آخرین نسخه زبان HTML کد بنویسیم لذا مرورگر باید آمادگی این را داشته باشد تا برخی کدهای جدید را هم شناسایی و اجرا کند.

تگ  <TITLE>  :

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

عنوان صفحه در تصویر زیر در کادر قرمز رنگ نمایش داده شده است:

 

نوار عنوان
TITLE BAR

 

<!DOCTYPE HTML>
<HTML>
	<HEAD>
		<title> فناوری نوین </title>
	</HEAD>
 
	<BODY>
 
		<b> آموزش Html جلسه سوم سایت  </b>
		<u> نویسنده این مطلب محمد باقر اسماعیلی فرد.</u>
<BODY> </HTML>

و اما تگهای  p و  تگهای h1  تا h6 :

این تگها به heading1 تا heading6  معروف هستند برای نوشتن عنوان یا سرتیتر یک پاراگراف استفاده میشوند ، مثلا در همین نوشته ، جمله “و اما تگهای  p و  تگهای h1  تا h6 :” در تگ h2 نوشته شده است ، خاصیت این تگها این است که نوشته را با فونت بزرگتر مینویسند و همچنین قبل و بعد از نوشته ها یک اینتر را اضافه میکنند ، لذا زمانی که از این تگها استفاده میکینیم نمیتوانیم قبل و بعد از آنها از نوشته دیگری استفاده کنید.

 

تگ p یا پاراگراف هم همین خاصیت را دارد یا این تقاوت که نوشته را با اندازه استاندارد خود مینویسد مثلا در پاراگراف قبل تکه اول که درشت نوشته شده در تگ h2 و متن پاراگراف در تگ p قرار دارد.

ما برای کوتا شدن نوشته از این پس از تگهای html و body و head در کدها صرفنظر میکنیم و فقط بخش اصلی کدها را در اینجا مینویسیم به کد زیر دقت کنید :

<h1> فناوری نوین </h1>
<h2> فناوری نوین </h2>
<h3> فناوری نوین </h3>
<h4> فناوری نوین </h4>
<h5> فناوری نوین </h5>
<h6> فناوری نوین </h6>
 
<p>این متن در تگ پاراگراف قرار دارد و
برای نمایش پاراگراف استفاده میشود .</p>

خروجی کد بالا به صورت زیر است:

فناوری نوین

فناوری نوین

فناوری نوین

فناوری نوین

فناوری نوین
فناوری نوین

این متن در تگ پاراگراف قرار دارد
و برای نمایش پاراگراف استفاده میشود. فناوری نوین کازرونفناوری نوین کازرون

برچسب ها

فناوری نوین

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

بستن