برنامه نویسی
Visits Count ۴۷۱آموزش برنامه نویسی html
۱
جلسه پنجم برنامه نویسی
آموزش html
در جلسات قبلی با بسیاری از تگ های این زبان آشنا شدیم و کاربرد های آن را هم دیدیم. در این جلسه می خواهیم با مواردی آشنا شویم که در ادامه کار از آن ها در زبان css و js استفاده خواهیم کرد.
مواردی که امروز به آن ها اشاره می شود نمود خاصی ندارد اما برای دسترسی به المان های صفحه و آدرس دهی استفاده می شود.
تمامی تگ ها می توانند ویژگی به اسم id داشته باشند. با این ویژگی هنگام کار با تگ label آشنا شدیم. اما تنها استفاده آن در این موقعیت نیست.
از این ویژگی می توان به دسترسی یکتا به یک المان استفاده کرد. چه در زمینه تغییر استایل و چه در زمینه دسترسی به آن در زبان جاوااسکریپت.
از آنجا که این مقدار برای دسترسی یگانه است مقدار آن نیز باید یکتا باشد. در صورتی که المان های مختلفی ایدی یکسانی داشته باشند امکان بروز خطا وجود دارد.
<p id="content" > this is sample text </p>
به غیر از ویژگی id که برای دسترسی یکتا به کار می رود ما می توانیم به تعدادی از تگ های html یه کلاس خاص بدهیم. یعنی تمامی این تگ ها متعلق به یک دسته هستند و در صورت اعمال استایل یا هر کار دیگری می توان به آن ها به صورت گروهی دسترسی پیدا کرد.
<p class="classA"> this is sample text</p>
<input class="classA" type="text">
مقدار کلاس بر خلاف id حتما لازم نیست یکتا باشد. و حتی می توان چند کلاس به یک تگ اختصاص داد. یعنی یک المان متعلق به چند کلاس است. مانند مثال زیر
<p class="classA classB"> this is sample text</p>
<input class="classA classC" type="text">
در این مثال هر دو تگ در classA اشتراک دارند ولی کلاس های اختصاصی نیز برای خود دارند.
علاوه بر این دو ویژگی که تمامی تگ ها دارا می باشند. یک ویژگی style نیز که برای تغییر استایل یک تگ به کار می رود نیز بین تمامی تگ ها مشترک است.
یعنی می توان برای تغییر استایل هر تگ از این ویژگی استفاده کرد.
<p style="color:red"> red text</p>
red text
هدف ما در این قسمت آموزش زبان css نیست. بلکه اشاره به ویژگی مشترک بین تگ هاست.
در زبان html تگ های بسیاری وجود دارند. تعدادی که ما در این آموزش مطرح کردیم شاید ۹۰ درصد از مواردی باشد که شما در طول روز با آن ها سر و کار دارید.. موارد دیگری نیز وجود دارند که میتوانید با همین مواردی که تا کنون یادگرفته اید پیاده سازی کنید.
بعضی تگ ها هم شاید خروجی محسوسی نداشته باشند اما از نظر معنا شناختی به فهم کد شما بیشتر کمک می کند. و موتور های جستجو بهتر می فهمند متنی که در داخل این تگ آمده است چیست. برای مثال وقتی شما از یک تگ abbr استفاده می کند. دیگران و موتور های جستجو متوجه می شوند در این قسمت یک مخفف به کار رفته است.
در ادامه سعی می کنیم از هر کدام از این گونه تگ ها یک مورد و نحوه استفاده آن را اشاره کنیم.
Abbr
برای نشان دادن مخفف
<abbr title="islamic republic of iran">IRI</abbr>
IRI
Addrss
برای نشان داده آدرس
<address> No 1, Fajr av. Tehran. Iran</address>
Area
برای مشخص کردن یک ناحیه از یک تصویر به کار می رود. برای مثال می خواهید نقشه یک کشور را داشته باشید و با بردن ماوس روی هر بخش اسم استان نمایش داده شود.
<map>
<area shape="rect" coords="0,0,100,100" alt="alternative text" href="url">
<area shape="circle" coords="200,200,100" alt="alternative text" href="url">
</map>
این تگ دارای ویژگی shape است که می توانید مقدار های rect و cricle یا poly را انتخاب کنید.
برای حالت rect عدد برای مختصات مستطیل نیاز است. نقطه بالا سمت چپ و نقطه پایین سمت راست.
برای حالت دایره سه عدد نیاز است. مختصات مرکز دایره و شعاع آن.
برای حالت چند ضلعی به تعداد زوجی از نقطه ها نیاز است که به ترتیب مختصات طول و عرض نقاط را مشخص می کند.
Article
برای تعریف یک محتوای مستقل از دیگران به کار می رود. مانند یک خبر ، یک محصول یا هر چیز مستقل دیگری.
همان طور که متوجه هستید این تگ کار خاصی انجام نمی دهد. صرفا برای معنا بخشی و شناسایی بهتر آیتم ها توسط موتور های جستجوگر از آن استفاده می شود.
Aside
از این تگ برای ساید بار استفاده می کنیم. اما این تگ به خودی خود تغییری در صفحه نمی دهد و شما باید با css این حالت را به وجود بیاورید.
B
از این تگ برای پرتر شدن نوشته استفاده می کنیم.
Normal <b> text</b>
Normal text
Base
برای مشخص کردن ادرس اصلی صفحه .و عکس العمل کلیک روی لینک ها را مشخص می کند.
<base href="" target="_blank">
Bdi
از این تگ برای زمانی استفاده می کنیم. که می خواهیم محتوایی را نمایش دهیم که نمیدانیم جهت نوشته از چپ به راست است یا راست به چپ.
<ul>
<li>User <bdi>hrefs</bdi>: 60 points</li>
<li>User <bdi>jdoe</bdi>: 80 points</li>
<li>User <bdi>إيان</bdi>: 90 points</li>
</ul>
- User hrefs: 60 points
- User jdoe: 80 points
- User إيان: 90 points
بدون این تگ
- User hrefs: 60 points
- User jdoe: 80 points
- User إيان: 90 points
bdo
از این تگ برای زمانی استفاده می شود که میخواهیم جهت نوشته را تغییر دهیم.
<bdo dir="rtl">
نوشته از راست به چپ است
</bdo>
blockquote
از این تگ برای استفاده از منابع دیگر استفاده می شود و می توان منبع نوشته را مشخص کرد.
<blockquote cite="http://www.worldwildlife.org/who/index.html">
یک نوشته از یک منبع دیگر
</blockquote>
یک نوشته از یک منبع دیگر
Canvas
از این تگ برای رسم اشکال مختلف در وب می توان استفاده کرد. اما نحوه رسم با زبان جاوااسکریپت است.
Caption
از این تگ برای نام گذاری جداول استفاده می شود.
<table>
<caption>نام جدول</caption>
<tr>
<th>ستون اول</th>
<th>ستون دوم</th>
</tr>
<tr>
<td>سطر اول</td>
<td>سطر اول</td>
</tr>
<tr>
<td>سطر دوم</td>
<td>سطر دوم</td>
</tr>
</table>
ستون اول | ستون دوم |
---|---|
سطر اول | سطر اول |
سطر دوم | سطر دوم |
Cite
از این تگ برای متمایز کردن بخشی از نوشته استفاده می شود. که نوشته داخل آن را کج می کند.
Text <cite> italic</cite>
Text italic
Code
از این تگ برای نمایش کد استفاده می شود.
This is code <br/>
<code>var a=2;</code>
This is code
var a=2;