طراحی وب سایت کتابخانه

طراحی وب سایت کتابخانه

۱۹ مطلب با موضوع «اچ تی ام ال (HTML)» ثبت شده است

عنصر head

همانطور که قبلا هم اشاره شد تگ <head> نگهدارنده فراداده (داده در مورد داده - metadata) است که بین تگ های <html> و <body> قرار می گیرد. فراداده ها اطلاعات تکمیلی در مورد فایل اچ تی ام ال هستند و در صفحه مرورگر کاربر نمایش داده نمی شوند. در فراداده مواردی مانند عنوان سند (title)، کاراکتر ست(character set)، شیوه نامه ها(styles)، لینک ها(links)، کدهای جاوااسکریپت(scripts) و سایر اطلاعات را قرار می دهیم.

عنصر <title>

عنصر <title>همانطور که از نامش پیداست عنوان صفحه را مشخص می کند. و در اسناد HTML/XHTML یک عنصر ضروری است. با استفاده از عنصر <title>یک عنوان برای صفحه در تب مربوط به مرورگر وب ایجاد می کنیم. همچنین هنگامی که کاربر این صفحه را در لیست صفحات مورد علاقه خود ذخیره می کند، صفحه با این عنوانی که ما مشخص کرده ایم ذخیره می شود. همین عنوان، در صفحات موتور جستجو برای عنوان صفحه نمایش داده می شود. 
<!DOCTYPE html>
<html>

<head>
  <title>عنوان صفحه</title>
</head>

<body>
محتوا در این قسمت نوشته می شود...
</body>

</html>
عنصر <style>

تگ <style> نیز در داخل تگ <head> قرار می گیرد و کدهای مربوط به css در داخل این تگ نوشته می شود. 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>یک صفحه نمونه</title>
<style type="text/css">
body {
	font-family: "B Yekan";
	font-size: 12px;
}
.msg {
	font-family: "B Yekan";
	font-size: 12px;
	color: #F00;
	text-align: center;
}
</style>
</head>
عنصر <link>

با استفاده از تگ <link> یک فایل خارجی css را فراخوانی می کنیم: 
<link rel="stylesheet" href="sample_style.css">
عنصر <meta>

همانطور که از نام این عنصر مشخص است، از این عنصر برای مشخص کردن کاراکتر ست (Character set)، توضیحات مربوط به صفحه (Description)، کلید واژه ها (Keywords)، مولف (ایجاد کننده صفحه - Author)، و سایر فراداده ها (Metadata) استفاده می کنیم. فراداده ها توسط مرورگرها، موتورهای جستجو و سایر سرویس های وب استفاده می شوند.
در مثال زیر کاراکتر ست مربوط به صفحه را مشخص می کنیم: 
<meta charset="UTF-8">
در مثال زیر یک توضیح در مورد صفحه در تگ <meta> می نویسیم: 
<meta name="description" content="آموزش طراحی وب">
در مثال زیر کلیدواژه ها را مشخص می کنیم که موتورهای جستجو از آنها استفاده می کنند: 
<meta name="keywords" content="HTML, CSS, XML, JavaScript, Joomla">
مشخص کردن محدوده دید (viewport)

در نسخه 5 اچ تی ام ال یک امکان در اختیار طراحان وب قرار داده شده که می توانند بر روی محدوده دید کنترل داشته باشند. و این کار را با استفاده از تگ <meta> انجام می دهند. منظور از محدوده دید، منطقه قابل دیده توسط کاربر است. این محدوده به نوع وسیله ای بستگی دارد که کاربر صفحه وب را با آن مشاهده می کند؛ این محدوده در یک موبایل نسبت به یک کامپیوتر رومیزی کوچک تر است. شما می توانید قطعه کد زیر را در تمام صفحه های وبی که طراحی می کنید در تگ <meta> قرار دهید: 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
خصیصه viewport در تگ <meta> به مرورگر می گوید که با ابعاد و مقیاس های مربوط به هر صفحه چگونه رفتار کند و آنها را چگونه کنترل نماید.
مقدار width=device-width مشخص می کند که عرض صفحه به اندازه عرض صفحه نمایش تعریف شود (این مقدار بر اساس نوع ابزاری که کاربر صفحه را مشاهده می کند متفاوت است).
مقدار initial-scale=1.0 سطح زوم شدن محتوای صفحه را، برای اولین باری که صفحه بارگذاری می شود مشخص می کند. که در این حالت ما این مقدار را 1.0 در نظر گرفته ایم، یعنی محتوای صفحه با اندازه طبیعی (بدون زوم) نمایش داده شود.

عنصر <script>

با استفاده از عنصر <script>کدهای جاوا اسکریپت سمت کاربر (client-side) را تعریف می کنیم.
در زیر یک مثال جاوااسکریپت را مشاهده می کنید که متن داخلی یک عنصر با آی دی id="sample" با مقدار "Hello JavaScript!" تنظیم می شود. 
<script>
function myFunction {
    document.getElementById("sample").innerHTML = "Hello JavaScript!";
}
</script>
عنصر <base>

با استفاده از عنصر <base> URL پایه برای تمام URLهای موجود در صفحه که به صورت نسبی تعریف شده اند را مشخص می کنیم: 
<base href="http://www.samplesite.com/images/" target="_blank">
نکته:
بر اساس استانداردهای نسخه 5 اچ تی ام ال، می توانیم تگ های <html>, <body> و <head> را در داخل فایل اچ تی ام ال نیاوریم. قطعه کد زیر از نظر استانداردهای اچ تی ام ال 5 معتبر است: 
<!DOCTYPE html>
<title>عنوان صفحه</title>

<h1>یک سرتیتر (عنوان)</h1>
<p>یک پاراگراف.</p>
البته مثل قبل، پیشنهاد می کنیم این کار را انجام ندهید! ننوشتن این تگ ها باعث می شود ساختار DOM در صفحه بهم بخورد و نرم افزارهای XML هم نمی توانند ساختار صفحه را به درستی تشخیص دهند. همچنین این صفحه در مرورگرهای قدیمی دچار مشکل خواهد شد. این شیوه با استانداردهای xhtml نیز همخوانی ندارد.
۰ نظر موافقین ۱ مخالفین ۰ ۳۱ خرداد ۹۶ ، ۰۰:۵۳
مهرداد یوسفی فرد

مسیر فایلها در اچ تی ام ال

منظور از مسیر فایل در اچ تی ام ال، محل فایل هایی است که در صفحه اچ تی ام ال از آنها استفاده می کنیم. فایل هایی که در داخل یک فایل اچ تی ام ال مسیرشان را مشخص می کنیم تا در داخل فایل اچ تی ام ال قرار گیرند می توانند یک صفحه وب، تصویر، شیوه نامه آبشاری (css)، یا فایل جاوا اسکریپت باشند.

مسیر فایل می تواند مطلق (Absolute) یا نسبی (Relative) باشد.

مسیر مطلق (absolute)

منظور از مسیر مطلق، یک یو آر ال (url) کامل است که به آدرس کامل یک فایل در محیط وب اشاره می کند. مثال زیر را ببینید: 
<img src="http://www.samplesite.com/images/pic.jpg" alt="متن جایگزین">
مسیر نسبی (relative)

منظور از مسیر نسبی، مسیری است که نسبت به صفحه فعلی مشخص شده است. در واقع همان چیزی که قبلا به عنوان مسیر محلی به آن اشاره کردیم. یعنی این نوع مسیر به فایلی اشاره می کند که بر روی همان سروری قرار دارد که فایل فعلی در حال اجراست.
در مثال زیر مسیر مشخص شده به پوشه images اشاره می کند که در ریشه (مسیر اصلی - root) سایت فعلی قرار دارد: 
<img src="/images/picture.jpg" alt="متن جایگزین">
در مثال زیر مسیر مشخص شده به پوشه images اشاره می کند که در همان پوشه ای قرار دارد که فایل فعلی در آن قرار گرفته است: 
<img src="images/picture.jpg" alt="متن جایگزین">
در مثال زیر مسیر مشخص شده، به پوشه images اشاره می کند که یک سطح بالاتر از پوشه فعلی قرار دارد: 
<img src="../images/picture.jpg" alt="متن جایگزین">
پیشنهاد می کنم که اگر امکان دارد همیشه سعی کنید مسیرهای فایل ها را به صورت نسبی بنویسید. در این حالت، صفحاتی که ایجاد می کنید به آدرس یو ار ال فعلی صفحه وابسته نیستند و تمام لینک هایی که در صفحات شما قرار دارند هم بر روی کامپیوتر محلی شما و هم بر روی محیط وب به خوبی عمل می کنند و دیگر نیازی نیست در هنگام جابجایی فایل ها بر روی یک سرور دیگر، مجبور باشید لینک ها را اصلاح کنید.
۰ نظر موافقین ۱ مخالفین ۰ ۲۷ خرداد ۹۶ ، ۲۲:۳۶
مهرداد یوسفی فرد

نوشتن کدهای javascript

با استفاده از جاوااسکریپت می توانیم صفحات اچ تی ام ال را پویاتر (Dynamic) و تعاملی تر (Interactive) کنیم.
برای اینکه بتوانیم کدهای جاوا اسکریپت را در داخل فایل اچ تی ام ال قرار دهیم باید از تگ <script> استفاده کنیم. ما می توانیم کدهای جاوا اسکریپت را مستقیما داخل تگ <script> بنویسیم یا می توانیم با استفاده از خصیصه src به یک فایل جاوا اسکریپت خارجی اشاره کنیم.
در گروه موضوعی جاوا اسکریپت آموزش های لازم در مورد این زبان برنامه نویسی را ارائه خواهم کرد. در مثال زیر یک قطعه کد ساده جاوا اسکریپت را می بینید که مستقیما بین تگ <script> نوشته شده است: 
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
تگ <noscript>

فرض کنید در داخل یک صفحه مقداری کد جاوا اسکریپت نوشته ایم یا یک قطعه از کد جاوا اسکریپت را وارد کرده ایم، اما ممکن است یک کاربر استفاده از کدهای جاوا اسکریپت را در داخل مرورگر وب خود غیرفعال کرده باشد یا اینکه ممکن است مرورگر وب کاربر به هر دلیلی از اسکریپت هایی که شما نوشته اید پشتیبانی نکند. با استفاده از تگ <noscript>می توانیم برای این نوع از کاربران یک متن جایگزین بنویسیم. 
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

<noscript>متاسفانه مرورگر شما از جاوااسکریپت پشتیبانی نمی کند!</noscript>
۰ نظر موافقین ۱ مخالفین ۰ ۲۷ خرداد ۹۶ ، ۲۲:۲۸
مهرداد یوسفی فرد

عنصر iframe

با استفاده از iframe می توانیم محتوای یک صفحه دیگر را در داخل صفحه اچ تی ام ال نمایش دهیم.

دستور زبان استفاده از iframe

از تگ <iframe> به شکل زیر استفاده می کنیم. مهمترین خصیصه مربوط به این تگ، خصیصه src یا منبع است که مشخص می کند محتوای کدام صفحه در داخل قاب نمایش داده شود. 
<iframe src="URL"></iframe>
یکی دیگر از ویژگی هایی که برای iframe مهم است، این است که مشخص کنیم اندازه قاب (طول و عرض) چقدر باشد. با استفاده از خصیصه های height و width می توانیم این کار را انجام دهیم: 
<iframe src=" iframe.htm" height="150" width="220"></iframe>
می توانیم یک قاب ایجاد شده توسط یک iframe را به عنوان ناحیه هدف برای یک لینک قرار دهیم. یعنی می توانیم یک لینک را طوری تعریف کنیم که با کلیک کردن بر روی آن، محتوای یک صفحه خاص را در داخل یک iframe نمایش دهد. برای این کار ابتدا برای خصیصه name در iframe یک نام منحصر به فرد ایجاد می کنیم و سپس خصیصه target در لینک (a) را با همان مقدار name مقداردهی می کنیم. 
<iframe src="sample_iframe.htm" name="iframe_1"></iframe>

<p><a href="http://www.samplewebsite.com" target="iframe_1">نمایش محتوای یک صفحه خاص در داخل یک قاب</a></p>
۰ نظر موافقین ۱ مخالفین ۰ ۲۷ خرداد ۹۶ ، ۲۲:۲۲
مهرداد یوسفی فرد

عناصر نوع block و inline

عناصر را در اچ تی ام ال بر اساس نوع نمایش (display) به دو نوع تقسیم می کنند. عناصر یا از نوع block هستند یا از نوع inline. مقدار پیش فرض نوع نمایش برای یک عنصر اچ تی ام ال مقدار block است. اگر قسمت مربوط به css را مطالعه کرده باشید به این مورد اشاره شده است.

عناصر نوع block

اگر مقدار ویژگی display برای یک عنصر مقدار block باشد (همانطور که گفته شد این مقدار، برای تمام عناصر اچ تی ام ال مقدار پیش فرض است) آن عنصر در یک خط جدید قرار می گیرد و تمام عرض صفحه نمایش را اشغال خواهد کرد. به عبارت دیگر به هیچ عنصر دیگری اجازه نمی دهد در کنار آن قرار گیرد. عناصری مثل div، h1 تا h6، p، form از نوع بلوک هستند.

تگ<div> یک تگ از نوع بلوک است.


عناصر نوع Inline

یک عنصر از نوع Inline تمام عرض صفحه را اشغال نمی کند، بلکه این نوع عنصر فقط به اندازه عرض محتوای خود، عرض صفحه را اشغال خواهد کرد و همچنین از یک خط جدید شروع نمی شود. عناصری مثل span, a, img از نوع inline هستند.

عنصر <div>

عنصر <div> عنصری است که در قالب بندی ظاهری محتوای صفحه از آن بسیار استفاده می کنیم. در واقع خیلی وقت ها از عنصر <div> به عنوان نگهدارنده (Container) محتوا استفاده می کنیم (در قسمت صفحه آرایی نیز به این نکته اشاره خواهیم کرد که یکی از روشهای چیش اجزای صفحه، استفاده از تگ <div> به همراه ویژگی float است). عنصر <div> هیچ خصیصه ضروری ندارد، اما معمولا خصیصه های style و class با این عنصر استفاده می شوند. همانطور که در بالا نیز گفتم، عنصر <div> به صورت پیش فرض یک عنصر بلوک است که می توانیم با استفاده از css این خاصیت را تغییر دهیم.

با استفاده از css می توانیم بلوک های مختلف محتوا را سازماندهی کنیم:

طراحی وبسایت کتابخانه

در این وبسایت سعی می کنم مهارت های لازم برای طراحی وب سایت را به شما آموزش دهم.

<div style="background-color:gray; color:white; padding:20px; direction:rtl;">
<h2>طراحی وبسایت کتابخانه</h2>
<p>در این وبسایت سعی میکنم مهارتهای لازم برای طراحی وبسایت را به شما آموزش دهم.</p>
</div>

عنصر <span>

علاوه بر تگ <div>، تگ دیگری هم وجود دارد که می توانیم به عنوان نگهدارنده محتوا از آن استفاده کنیم. تگ <span> تگی است که می توانیم مقداری از محتوا را داخل آن قرار دهیم. این تگ هم هیچ خصیصه اجباری ندارد اما معمولا خصیصه های style یا class را با آن استفاده می کنیم. با استفاده از css و تگ <span> می توانیم قسمتی از محتوا را قالب بندی کنیم.

یک متن مهم. 

<h2>
یک متن<span style="color: red;">مهم</span>.
</h2>
۰ نظر موافقین ۱ مخالفین ۰ ۲۷ خرداد ۹۶ ، ۲۲:۱۹
مهرداد یوسفی فرد

فهرست ها در اچ تی ام ال

در زبان اچ تی ام ال دو نوع فهرست یا لیست وجود دارد؛ فهرست مرتب(Ordered list - ol) و فهرست غیر مرتب(Unordered list - ul). منظور از فهرست مرتب، فهرستی است که آیتم ها آن به ترتیب (بر اساس عدد یا حروف) نمایش داده می شوند. اما منظور از فهرست غیر مرتب فهرستی است که آیتم های آن دارای ترتیب عددی یا حروفی نیست و آیتم ها با یک نشانه، مثلا دایره توپر...، نمایش داده می شوند.

فهرست نامرتب

برای ایجاد یک فهرست نامرتب از تگ <ul> استفاده می کنیم. آیتم های مربوط به این فهرست بین تگ آغازین <ul> و تگ پایانی </ul> قرار می گیرند. آیتم ها را بین تگهای آغازین <li> و تگ پایانی </li> قرار می دهیم. در این نوع فهرست، در کنار آیتم ها به صورت پیش فرض یک دایره توپر(bullet) نمایش داده می شود.
  • آیتم اول
  • آیتم دوم
  • آیتم سوم
<ul>
  <li>آیتم اول</li>
  <li>آیتم دوم</li>
  <li>آیتم سوم</li>
</ul>
همانطور که گفتم مقدار پیش فرض برای شکلی که در کنار آیتم قرار می گیرد یک دایره توپر است. اما می توانیم این شکل را تغییر دهیم. در CSSیک ویژگی با نام list-style-type وجود دارد که می توانیم با استفاده از آن نوع نشانگر مربوط به آیتم های یک لیست نامرتب را تغییر دهیم. مقادیر موجود برای این ویژگی به شرح زیر است:

 
مقدار توضیح
disc این مقدار، مقدار پیش فرض است. نشانگر آیتم به صورت دایره توپر تنظیم می شود.
circle نشانگر آیتم به صورت دایره تنظیم می شود.
square نشانگر آیتم به شکل مربع تنظیم می شود.
none آیتم بدون نشانگر نمایش داده می شود.
مثال: نشانگر آیتم به شکل مربع
  • آیتم اول
  • آیتم دوم
  • آیتم سوم
<ul style="list-style-type:square">
  <li>آیتم اول</li>
  <li>آیتم دوم</li>
  <li>آیتم سوم</li>
</ul>
مثال: یک فهرست بدون هیچ نشانگر
  • آیتم اول
  • آیتم دوم
  • آیتم سوم
<ul style="list-style-type:none">
  <li>آیتم اول</li>
  <li>آیتم دوم</li>
  <li>آیتم سوم</li>
</ul>
فهرست مرتب

منظور از فهرست مرتب، فهرستی است که آیتم ها بر اساس عدد یا حرف مرتب شده اند. فهرست مرتب را با استفاده از تگ <ol>ایجاد می کنیم. مانند فهرست نامرتب، آیتم ها با استفاده از تگ <li> نوشته می شوند (مقدار پیش فرض، اعداد هستند): 
<ol>
<li>آیتم اول</li>
<li>آیتم دوم</li>
<li>آیتم سوم</li>
</ol>
با استفاده از خصیصه type می توانیم نوع مرتب شدن آیتم ها را مشخص کنیم. البته مسلما با استفاده از CSS نیز می توانیم این کار را انجام دهیم و البته بهتر است که این کار را با استفاده از CSS انجام دهیم تا فرایند تولید محتوا را از ساختار ظاهری جدا کنیم. مقادیر مربوط به خصیصه type به صورت زیر هستند:

 
نوع توضیح
type="1" این مقدار، مقدار پیش فرض است. در این حالت آیتمهای فهرست با استفاده از اعداد شماره گذاری می شوند.
type="A" دراینحالت،آیتمهایفهرستبااستفادهازحروفلاتینبزرگشمارهگذاریمیشوند.
type="a" در این حالت، آیتمهای فهرست با استفاده از حروف لاتین کوچک شماره گذاری می شوند.
type="I" در این حالت، آیتم با استفاده از اعداد رومی با اندازه بزرگ شماره گذاری می شوند.
type="i" در این حالت، آیتم با استفاده از اعداد رومی با اندازه کوچک شماره گذاری می شوند.
یک فهرست با اعداد رومی با اندازه بزرگ

  1. آیتم اول
  2. آیتم دوم
  3. آیتم سوم
<ol type="I">
<li>آیتم اول</li>
<li>آیتم دوم</li>
<li>آیتم سوم</li>
</ol>
فهرست توضیحات (Description list) در اچ تی ام ال 

در اچ تی ام ال یک نوع دیگر از فهرست نیز وجود دارد که به آن فهرست توضیحات می گویند. منظور از فهرست توضیحات یک فهرست از اصطلاحات (Term) است که یک توضیح (Description) برای هر اصطلاح ذکر می شود.
برای ساختن یک فهرست توضیحات از تگ <dl> استفاده می کنیم. اصطلاح یا کلمه ای که نیاز است توضیح برای آن نوشته شود در داخل تگ
قرار می گیرد. توضیح مربوط به اصطلاح نیز در داخل تگ <dd> نوشته می شود. مثال زیر را ببینید:
عسس
- جمع عاس به معنی شبگرد
تلقین
- فهماندن و یاد دادن کلام به کسی
<dl>
<dt>عسس</dt>
<dd>- جمع عاس به معنی شبگرد</dd>
<dt>تلقین</dt>
<dd>- فهماندن و یاد دادن کلام به کسی</dd>
</dl>
ما می توانیم فهرست ها را به صورت تودرتو (Nested) نیز ایجاد کنیم. در اصل در داخل آیتم های فهرست می توانیم یک فهرست جدید، یا عناصر اچ تی ام ال مثل یک تصویر را قرار دهیم. مثال زیر را در مورد یک فهرست تو در تو ببینید.:
  • آیتم 1
  • آیتم 2
    • آیتم 2-1
    • آیتم 2-2
  • آیتم 3
<ul>
<li>آیتم 1</li>
<li>آیتم 2
<ul>
<li>آیتم 2-1</li>
<li>آیتم 2-2</li>
</ul>
</li>
<li>آیتم 3</li>
</ul>
۰ نظر موافقین ۱ مخالفین ۰ ۲۳ خرداد ۹۶ ، ۲۰:۴۵
مهرداد یوسفی فرد

جدول ها در اچ تی ام ال

تعریف کردن یک جدول

برای ایجاد کردن یک جدول از تگ <table> استفاده می کنیم. برای آغاز کردن یک جدول از تگ ابتدایی <table> استفاده می کنیم و در انتها نیز از تگ پایانی </table> استفاده می کنیم.
در داخل جدول برای مشخص کردن هر ردیف از تگ آغازین <tr> و تگ پایان </tr> استفاده می کنیم. برای مشخص کردن هر خانه در داخل یک ردیف از تگ آغازین <td> و تگ پایان </td>استفاده می کنیم.
عنوان جدول نیز داخل تگ <th> قرار می گیرد. 
<table width="30%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th>ناماستان</th>
<th>نامشهرستان</th>
</tr>
<tr>
<td>خراسانرضوی</td>
<td>مشهد</td>
</tr>
<tr>
<td>خراسانشمالی</td>
<td>بجنورد</td>
</tr>
</table>
در داخل جدول، تگ <td> برای قرار دادن داده ها استفاده می شود. می توانیم در داخل این تگ ها هر نوع عنصر اچ تی ام ال، مثل متن، تصویر، لیست، یک جدول دیگر یا ... را قرار داد.

تبدیل چند ستون یا خانه جدول به یک ستون یا یک خانه

خیلی وقت ها ممکن است بخواهیم چند خانه جدول را به یک خانه تبدیل کنیم. برای اینکه بتوانیم این کار را انجام دهیم، دو خصیصه(Attribute) وجود دارند: collspan و rowspan.
اگر بخواهیم در یک ردیف، چند خانه کنار هم را به یک خانه تبدیل کنیم باید از collspan استفاده کنیم. مقدار این خصیصه برابر با تعداد خانه هایی است که می خواهیم به یک خانه تبدیل شود. البته مسلما باید برای این کار حواسمان به تعداد کل خانه های آن ردیف باشد:

نام شماره تلفن
مهرداد یوسفی فرد شماره تلفن اول شماره تلفن دوم 
<table width="50%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>نام</td>
<td colspan="2">شماره تلفن</td>
</tr>
<tr>
<td>مهردادیوسفی فرد</td>
<td>شماره تلفن اول</td>
<td>شماره تلفن دوم</td>
</tr>
</table>
اگر بخواهیم چند ردیف را با هم ترکیب کنیم از خصیصه rowspan استفاده می کنیم:

نام مهرداد یوسفی فرد
شماره تلفن تلفن اول
تلفن دوم 
<table width="50%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>نام</td>
<td>مهرداد یوسفی فرد</td>
</tr>
<tr>
<td rowspan="2">شماره تلفن</td>
<td>تلفن اول</td>
</tr>
<tr>
<td>تلفن دوم</td>
</tr>
</table>
نوشتن عنوان برای جدول

اگر بخواهیم برای جدول یک عنوان کلی داشته باشیم، این کار را با استفاده از تگ <caption> انجام می دهیم. البته توجه داشته باشید که حتما باید این تگ را بلافاصله بعد از تگ <table> قرار دهیم:
عنوان جدول
نام استان نام شهرستان
خراسان رضوی مشهد
خراسان شمالی بجنورد 
<table width="30%" border="0" cellspacing="0" cellpadding="0">
<caption>عنوان جدول</caption>
<tr>
<th>نام استان</th>
<th>نام شهرستان</th>
</tr>
<tr>
<td>خراسان رضوی</td>
<td>مشهد</td>
</tr>
<tr>
<td>خراسان شمالی</td>
<td>بجنورد</td>
</tr>
</table>
۰ نظر موافقین ۱ مخالفین ۰ ۲۰ خرداد ۹۶ ، ۲۲:۰۶
مهرداد یوسفی فرد

قرار دادن تصویر در داخل فایل اچ تی ام ال

برای اینکه بتوانیم یک تصویر را در داخل فایل اچ تی ام ال قرار دهیم از تگ <img> استفاده می کنیم. در زیر یک مثال ساده از نحوه وارد کردن یک تصویر در فایل اچ تی ام ال را می بینید: 
<!DOCTYPE html>
<html>
<body>

<h2>یک تصویر نمونه</h2>
<img src="picture.jpg" alt="متن جایگزین" title="توضیح راهنما">
</body>
</html>
دستور زبان مربوط به تگ img

با استفاده از تگ <img> تصویر را در داخل فایل اچ تی ام ال قرار می دهیم. تگ <img> یک تگ خالی است؛ یعنی تگ انتهایی ندارد، البته همانطور که در مثال بالا می بینید می توانیم در این تگ از تعدادی خصیصه استفاده کرد.
مهمترین خصیصه، خصیصه src است که با استفاده از آن آدرس فایل تصویر را مشخص می کنیم (که این آدرس می تواند آدرس یک فایل بر روی اینترنت یا آدرس یک فایل محلی باشد). خصیصه بعدی alt است که همانطور که قبلا گفتم این خصیصه، متن جایگزین را مشخص می کند؛ این متن زمانی که به هر دلیل تصویر نمایش داده نشود به جای تصویر قرار می گیرد.
در مثال بالا خصیصه title را هم اضافه کرده ام. مقدار مربوط به این خصیصه مثل یک tooltip عمل می کند و وقتی که کاربر نشانگر موس را بر روی تصویر قرار می دهد این متن نمایش داده می شود. می توانیم با استفاده از خصیصه style مقادیر و ویژگی های css را نیز به این تگ اعمال کنیم: 
<img src="url" alt="متن جایگزین" style="width:width;height:height;">
توجه داشته باشید که باید حتما خصیصه alt را مقدار دهی کنیم. اگر برای این خصیصه مقداری را مشخص نکنیم، صفحه از نظر اعتبارسنجی دارای مشکل خواهد بود.

مشخص کردن اندازه یک تصویر

پیشنهاد می شود که همیشه عرض و طول یک تصویر را مشخص کنیم. برای این کار دو روش وجود دارد. در روش اول می توانیم با استفاده از خصیصه style از ویژگی های width و height استفاده کنیم. در روش دوم می توانیم از دو خصیصه width و height که در تگ img وجود دارد استفاده کنیم. اما این نکته را در نظر داشته باشید که بارها گفته ام در طراحی وب باید بحث کدنویسی را از قالب بندی ظاهری جدا کنیم. استفاده از دو خصیصه width و height به معنی نادیده گرفتن این اصل است.

در زیر یک مثال را مشاهده می کنید که از خصیصه style استفاده شده است: 
<img src="picture.jpg" alt="متن جایگزین تصویر" style="width:100px; height:150px;">
در مثال زیر با استفاده از خصیصه های width و height عرض و ارتفاع تصویر را مشخص می کنیم: 
<img src="html5.gif" alt="HTML5 Icon" width="100" height="150">
در حالتی که از خصیصه های width و height استفاده می کنیم، واحد اندازه گیری pixel به صورت پیش فرض در نظر گرفته می شود.

نقشه ها (maps) در تصاویر

با استفاده از تگ <map> می توانیم یک image-map تعریف کنیم. منظور از image-map یک تصویر است که قسمت های خاصی از آن قابل کلیک کردن هستند.
تگ <map> دارای خصیصه ای به نام name است که این خصیصه با یک خصیصه با نام usemap در تگ <map> ارتباط مستقیم دارد. با استفاده از این دو خصیصه بین این دو تگ ارتباط برقرار می شود.
تگ <map> دارای چند تگ <area> است. با استفاده از این تگهای <area> محدوده های قابل کلیک را در image-map مشخص می کنیم. مثال زیر را ببینید: 
<img src="picture.jpg" alt="متن جایگزین" usemap="#imagemap" style="width:145px; height:126px;">
<map name=" imagemap ">
  <area shape="rect" coords="0,0,82,126" alt="قسمت اول" href="01.htm">
  <area shape="circle" coords="90,58,3" alt="قسمت دوم" href="02.htm">
  <area shape="circle" coords="124,58,8" alt="قسمت سوم" href="03.htm">
</map>
۰ نظر موافقین ۱ مخالفین ۰ ۱۹ خرداد ۹۶ ، ۲۲:۳۳
مهرداد یوسفی فرد

درست کردن لینک در اچ تی ام ال

همانطور که از نام HTML(Hyper Text Markup Language) مشخص است، لینک ها در زبان اچ تی ام ال از اهمیت بالایی برخوردار هستند. با کلیک کردن بر روی یک لینک، به منبع (آدرس) مربوط به آن لینک هدایت می شویم. در صفحه وب هنگامی که بر روی یک لینک قرار می گیریم نشانگر موس از حالت عادی به یک دست تبدیل می شود (که البته با استفاده از CSS می توان این حالت را تغییر داد).
این نکته را در نظر داشته باشید که یک لینک حتما نباید متن باشد. یک تصویر یا هر عنصر دیگر اچ تی ام ال را می توانیم تبدیل به لینک کنیم.

دستور زبان مربوط به لینک

همانطور که قبلا هم اشاره کردم، برای درست کردن یک لینک در فایل اچ تی ام ال از تگ <a> استفاده می کنیم: 
<a href="url">متن مربوط به لینک</a>
با استفاده از خصیصه href مقصد (آدرس) مربوط به لینک را مشخص می کنیم؛ متنی که بین تگهای آغازین و پایانی نوشته می شود، متنی است که کاربر مشاهده می کند و با کلیک کردن بر روی آن می تواند به آدرس مربوطه برود.
برای ایجاد لینک های محلی (Local links) نیز از همین تگ <a> استفاده می کنیم. منظور از لینک محلی، لینک به آدرسی است که در مکانی مشابه مکان فایل فعلی – که کاربر در حال مشاهده آن است – قرار دارد. البته نه الزاما در همان پوشه؛ این فایل می تواند در پوشه (هایی) پایین تر یا بالاتر از فایل فعلی قرار داشته باشد، اما بر روی همان سروری است که فایل فعلی در حال اجراست. در لینک قبلی دیدیم که در قسمت آدرس از یک url استفاده کردیم، اما در مورد لینک های محلی نیازی نیست که از یک آدرس url استفاده کنیم (یعنی لازم نیست در ابتدای آدرس http:// یا https:// یا چیزی مشابه آن قرار دهیم).
در مثال زیر، لینک به صفحه ای اشاره می کند که در همان پوشه صفحه فعلی قرار دارد: 
<a href="sample_page.php">آموزش پی اچ پی</a>
خصیصه target

 در تگ <a> می توانیم با استفاده از خصیصه target مشخص کنیم که آدرس مشخص شده در لینک به چه صورت و در کجا باز شود. مقادیر مربوط به این خصیصه به شرح زیر هستند:
  • _blank: سند لینک شده در یک پنجره یا تب جدید باز می شود.
  • _self: سند لینک شده در پنجره/ یا تبی مشابه پنجره اصلی باز می شود. یعنی در همان پنجره ای که کاربر در آن قرار دارد – این مقدار، مقدار پیش فرض برای این خصیصه است
  • _parent: سند لینک شده را در فریم والد پنجره باز می کند.
  • _top: سند لینک شده را در حالت تمام صفحه (full body) مربوط به پنجره باز می کند.
  • framename: سند لینک شده را در یک فریم که نام آن اشاره شده است باز می کند.
به مثال زیر توجه کنید: 
<a href="http://www.samplesite.com/" target="_blank">لینک به صفحه مورد نظر</a>
اگر صفحه ای که کاربر در آن قرار داد در یک چهارچوب (frame) خاص قفل شده باشد، می توانیم با استفاده از مقدار _topاین چهارچوب را از بین ببریم: 
<a href="https://www.samplesite.com/samplecat/" target="_top">لینک مربوط به صفحه</a>
تبدیل کردن یک تصویر به یک لینک

خیلی وقتها ممکن است که بخواهیم یک تصویر را به یک لینک تبدیل کنیم. در این حالت به شکل زیر عمل می کنیم (از خصیصه href استفاده می کنیم): 
<a href="home.php">
  <img src="sample.png" alt="صفحهاول">
</a>
در IE9 و نسخه های قبل تر از آن، اگر یک تصویر را به صورت لینک نمایش دهیم، مرورگر به صورت خودکار یک حاشیه در اطراف تصویر ایجاد می کند. برای اینکه این اتفاق پیش نیاید می توانیم ویژگی border را با صفر مقدار دهی کنیم (style="border:0;").

ایجاد یک bookmark یا نشانه در قسمتی از صفحه

ممکن است لازم باشد در قسمتی از صفحه لینکی را ایجاد کنیم که کاربر را به قسمتی از همان صفحه منتقل کند؛ مثلا فرض کنید در یک صفحه که شامل چند پاراگراف با موضوعات مختلف است، می خواهیم در ابتدای صفحه چیزی شبیه به فهرست مندرجات ایجاد کنیم که با استفاده از لینکهای ایجاد شده در فهرست مندرجات، کاربر را به راحتی به قسمت مورد نظرش هدایت کنیم. برای این کار باید از bookmark استفاده کنیم.
برای اینکار ابتدا باید bookmark را ایجاد کنیم و پس از آن در هر نقطه ای که تمایل داشتیم، لینکی به بوکمارک ایجاد شده برقرار می کنیم. برای ایجاد بوکمارک از خصیصه id استفاده می کنیم. مثلا یک عنوان را با یک id خاص مقدار دهی می کنیم: 
<h1 id="first_title"></h1>
حالا در همان صفحه ای که عنوان بالا قرار دارد می توانیم به شکل زیر لینکی به عنوان مشخص شده ایجاد کنیم: 
<a href="#first_title">عنوان اول</a>
۰ نظر موافقین ۱ مخالفین ۰ ۱۹ خرداد ۹۶ ، ۱۶:۲۴
مهرداد یوسفی فرد

توضیحات در اچ تی ام ال

در اچ تی ام ال هم مانند هر زبان دیگر ممکن است بخواهیم از توضیحات استفاده کنیم. همانطور که می دانید توضیحات را یا برای خودمان می گذاریم که در آینده اگر دوباره به صفحه ای که طراحی کرده ایم مراجعه کردیم، بتوانیم با خواندن توضیحات، بفهمیم که دقیقا چه کاری انجام داده ایم؛ یا اینکه به دیگران کمک کنیم که ساختار صفحه ما را بهتر درک کنند، یا هر دلیل دیگر.
برای نوشتن توضیح در داخل فایل های اچ تی ام ال به شکل زیر عمل می کنیم: 
<!--کامنت خود را در این قسمت می نویسیم. -->
لازم به توضیح نیست که توضیحات برای کاربر وب نمایش داده نمی شود و فقط در قسمت منبع کد قابل مشاهده است.
یکی دیگر از کاربردهای توضیح در مواردی است که می خواهید قسمت از کدهای اچ تی ام ال که نوشته اید در حال حاضر – به هر دلیلی – نمایش داده نشوند: 
<!--می خواهیم این قسمت از کدمان فعلا دیده نشود
<img border="0" src="picture.jpg" alt="عنوان">
-->
۰ نظر موافقین ۱ مخالفین ۰ ۱۸ خرداد ۹۶ ، ۱۸:۳۹
مهرداد یوسفی فرد