جلسه چهارم
در جلسات قبل تعدادی از تگ های html را با ویژگی ها و قابلیت های مختلف آن ها بررسی کردیم. در این جلسه نیز برخی از موارد مهم و باقیمانده آن ها را بررسی می کنیم.
تگ a یکی از مهم ترین تگ هایی است که کاربرد بسیار زیادی نیز در وب دارد. از این تگ برای لینک کردن و اتصال صفحات مختلف به یکدیگر استفاده می شود. در حقیقت اگر میخواهید به کاربر این قابلیت را بدهید تا بتواند بین صفحات مختلف سایت شما یا بین سایت های مختلف جابجا شود باید از این تگ استفاده کنید.
مهم ترین ویژگی این تگ مقدار href می باشد که آدرس مقصد را قبول می کند. همچنین محتوای این تگ مقداری است که به کاربر نشان داده می شود. این تگ می تواند کاربر را در صفحه جاری به لینک شما منتقل کند و یا در یک تب جدید این کار را انجام دهد. برای باز کردن یک تگ جدید باید از ویزگی target و مقدار blank استفاده کنید.

<a href="https://google.com" target="blank">برو به گوگل</a>

همان طور که در جلسه اول گفته شد یکی از مهم ترین ویژگی های زبان html ساختار درختی آن است. در نتیجه بعضی مواقع شما نیاز دارید چند تگ را در یک گروه و تحت یک والد قرار دهید. برای این کار می توانید از تگ div و یا span استفاده کنید.
در حقیقت این تگ ها خروجی خاصی ندارند و بیشتر برای دسته بندی تگ های دیگر استفاده می شوند. تفاوت جزیی این دو تگ در این است که به صورت پیش فرض تگ div تمام عرض صفحه را اشغال می کند ولی تگ span تنها به اندازه که عرض مورد نیاز فرزندانش اشغال می کند.

<div>
	<input>
	<input>
</div>
<div>
	<input>
	<input>
</div>

<span>
	<input>
	<input>
</span>
<span>
	<input>
	<input>
</span>

یکی دیگر از تگ هایی که برای گرفتن نوشته های طولانی از کاربر استفاده می شود textarea است. زمانی که بخواهید از کاربر متنی را بگیرید که بیشتر از یک خط است می توانید از این تگ استفاده کنید.

<textarea>مقدار پیش فرض</textarea>

توجه داشته باشید که این تگ بر خلاف تگ input که فرزندی نداشت، میتوانید فرزند داشته باشد و مقدار پیش فرض را باید به عنوان فرزند به آن داد نه در ویژگی value .
صفحات سایت ها معمولا از پاراگراف های متعددی تشکیل شده . برای ساخت این پاراگراف ها می توان از تگ p استفاده کرد. از آنجایی که در زبان html استفاده از enter خروجی مورد نظر را ندارد. می توان از تگ p برای ایجاد پاراگراف های واقعی استفاده کرد. چرا که تگ p همیشه از ابتدای صفحه شروع می شود و فاصله های تگ های p با یکدیگر رعایت می شود و ظاهر زیبا و خوانایی به متن ما میدهد.

<p>
یک پارگراف آزمایشی
</p>
<p>
یک پارگراف آزمایشی
</p>

همان طور که گفته شد زبان html حساسیتی به فاصله و خطوط جدید ندارد. و متن شما را با کمترین تعداد فاصله نمایش می دهد. یعنی چه یک فاصله بین کلمات به کار ببرید و چه ۱۰ عدد. همیشه خروجی یک فاصله است.
حال برای اینکه بتوانید هر آنچه را که می نویسید در خروجی ببینید می توانید از تگ pre استفاده کنید. این تگ تمام فاصله ها و خطوط جدیدی که در نوشته شما وجود دارد را به صورت کامل در خروجی نمایش می دهد.

<pre>
یک متن 		با رعایت فاصله
و خطوط جدید.
</pre>

یک متن 		با رعایت فاصله
و خطوط جدید.

همان طور که گفته شد برای نمایش تصاویر می توان از تگ input استفاده کرد. اما واقعیت این است که بیشترین برنامه نویسان و طراحان سایت برای نمایش تصویر از تگ img استفاده می کنند. و این تگ اختصاصی برای این کار ساخته شده است. همانند تگ input ادرس تصویر در ویژگی src قرار میگیرد و برای متن جایگزین هم می توان از ویژگی alt استفاده کرد.

<img src="https://efaraj-thumbnail.s3.ir-thr-at1.arvanstorage.ir/pictures/html_100x69.jpg" alt="متن جایگزین">

با تگ form در جلسه پیش آشنا شدیم. این تگ دو ویژگی بسیار مهم دارد یکی ویژگی method می باشد. مقدار این ویژگی GET یا POST می باشد. در حقیقت این ویژگی نحوه ارسال داده ها توسط فرم را تعیین می کنند. از حالت POST برای ارسال امن تر داده ها و زمانی که حجم داده بیشتر است استفاده می شود. حالت GET موارد موجود در فرم را در آدرس بار نمایش خواهد داد. در نتیجه هنگامی که اطلاعات مهم مانند رمز عبور در فرم وجود دارد از این حالت استفاده نکنید.
ویژگی دیگر action است که مقصد ارسال اطلاعات را مشخص می کند. اینکه شما این اطلاعات را به کدام صفحه میخواهید ارسال کنید توسط این ویژگی مشخص می شود.
تگ دیگری که در زیباتر و خواناتر کردن خروجی به ما کمک می کند تگ hr می باشد. این تگ یک خط افقی جدا کننده بین تگ های دیگر ایجاد می کند.

<p>text</p>
<hr/>
<p>second text</p>

تگ دیگیری که شما می توانید از استفاده کنید iframe است. با این تگ محتوای یک سایت دیگر را می توانید در سایت خود داشته باشید. اما این کار باعث کاهش اعتبار شما در جستجوی گوگل می شود. آدرس سایتی که شما می خواهید آن را نمایش دهید را در مقدار src قرار میدهیم.

<p>سایت ما </p>
<iframe src="https://efaraj.ir"></iframe>

برای پخش موسیقی و فایل های mp3 در سایت خود می توانید از تگ audio استفاده کنید.این تگ به همراه تگ source استفاده می شود که ادرس فایل ها را در خود نگهداری می کند. ادرس فایل در مقدار src و فرمت آن در ویژگی type ذخیره می شود.
برای این که کاربر بتواند پخش موسیقی را کنترل کند باید مقدار controls را نیز به آن بدهیم.

<audio controls="controls">
<source src="https://efaraj.s3.ir-thr-at1.arvanstorage.ir/73_ziarat_jame_kabire_farahmand.mp3" type="audio/mp3">
</audio>

حال اگر بخواهیم ویدیو را در سایت پخش کنیم از تگ video استفاده می کنیم. روال کار به همان صورت است . دوباره یک تگ فرزند source تعریف می کنیم و ادرس فایل و فرمت آن را ذکر می کنیم.

<video controls="controls">
<source src="https://efaraj.s3.ir-thr-at1.arvanstorage.ir/programming/lesson3.mp4" type="video/mp4">
</video>

در ابتدای کلاس ها اشاره کردیم که مهم ترین تگ فرزند html تگ bodyاست. اما این تنها تگ فرزند نیست. تگ بسیار مهم دیگری که وجود دارد head است.
کاربرد این تگ در اضافه کردن اطلاعات اضافی در مورد صفحه ی موجود است. مانند اطلاعاتی که هنگام جستجو در گوگل از سایت نمایش داده می شود یا قرار دادن کد هی css و js که در دوره های بعدی آموزش داده می شود.
نحوه استفاده از آن به صورت زیر است.

<head>
<title> my site</title>
</head>
<body>
	<p>some text</p>
</body>

با این کار کلمه my site در تب مرور گر نمایش داده می شود. همچنین می توانید اطلاعات بیشتری در تگ head قرار دهید.
در ادامه آموزش ها css را بررسی خواهیم کرد. اما بهتر است اینجا تگی را که برای نوشتن css استفاده می شود را معرفی کنیم. Style تگی است که در آن کد های مربوط به css نوشته می شود و جایگاه اصلی این تگ در قسمت head است. اما میتوان در جاهای مختلف استفاده کرد. اما جمع کردن آن ها در یک جا به خوانایی کد کمک بیشتری می کند.

<head>
	<style>
	// css code comes here
	</style>
</head>
<body>
	<p>some text</p>
</body>

همچنین تگ دیگری که برای نوشتن کد های جاوااسکریپت از آن استفاده می کنیم تگ script است. محل این تگ نیز می تواند در قسمت head باشد یا در بعضی موارد قبل از بسته شدن تگ body است.
علت اینکه این تگ در قسمت پایینی صفحه ممکن است قرار گیرد اطمینان از این است که زمانی کد های اسکریپت اجرا شود که تمام صفحه به صورت کامل بارگذاری شده اند.

<head>
	<script>
	// js code comes here
	</script>
</head>
<body>
	<p>some text</p>
</body>