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

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

۱۲ مطلب با کلمه‌ی کلیدی «html» ثبت شده است

ساختار عناصر در اچ تی ام ال

هر عنصر اچ تی ام ال معمولا یک تگ آغازین و یک تگ پایانی دارد که محتوا بین تگ های آغازین و پایانی قرار می گیرد.

 <tagname>محتوا در این قسمت قرار می گیرد</tagname> 

منظور از عنصر (element) اچ تی ام ال هر چیزی است که از تگ آغازین تا تگ پایانی قرار می گیرد. 
<p>یک پاراگراف</p>
این نکته را هم در نظر داشته باشید که بعضی از عناصر اچ تی ام ال دارای محتوا نیستند. به این نوع از عناصر، عناصر خالی (empty) می گویند. عناصر خالی دارای تگ انتهایی نیستند؛ مثل <br> هیچ وقت تگ انتهایی یک عنصر را فراموش نکنید
در مورد برخی از عناصر اچ تی ام ال، اگر تگ انتهایی را ننویسیم مشکلی پیش نمی آید یعنی در واقع نوشتن تگ انتهایی برای آنها یک گزینه انتخابی است (به مثال زیر نگاه کنید). اما این نکته را در خاطر داشته باشید که همیشه تگ انتهایی عناصر را بنویسید؛ به خاطر اینکه اگر تگ انتهایی یک عنصر را ننویسید ممکن است فایل شما دچار مشکل شود یا خطایی رخ دهد. پس بهتر است از بروز مشکل پیشگیری کنیم. 
<html>
<body>

<p>پاراگراف اول
<p>پاراگراف دوم

</body>
</html>
عناصر خالی در اچ تی ام ال

همانطور که در بالا اشاره شد، عناصری که دارای محتوا نیستند را عنصر خالی (empty) می نامیم. به عنوان مثال عنصر <br> یا line break یک عنصر خالی است که دارای محتوا نیست و تگ انتهایی نیز ندارد. البته این تگ را می توان به صورت <br /> نیز نوشت. در واقع با این روش این عنصر را می بندیم. این نکته را هم در نظر داشته باشید که در نسخه 5 اچ تی ام ال لازم نیست که یک عنصر خالی را ببندیم.
اما اگر می خواهید فایل اچ تی ام ال شما به صورت سختگیرانه تری اعتبار سنجی شود یا اینکه تمایل دارید فایل شما توسط تفسیر کننده های XML نیز قابل خواندن باشد باید تمام عناصر اچ تی ام ال را به درستی ببندید.

کوچکی یا بزرگی حروف در عناصر اچی تی ام ال

این نکته را به خاطر داشته باشید که در نسخه 5 اچ تی ام ال می توانید تگ ها را با حروف بزرگ یا کوچک یا ترکیبی از آن دو بنویسید! اما W3C توصیه می کند که از حروف کوچک برای تگهای خود استفاده کنید. این کار باعث می شود اعتبارسنجی فایل های ما سخت گیرانه تر باشد و از طرفی در مورد فایل هایی مثل XHTML نیز فایل ما دچار مشکل نخواهد شد.
۰ نظر موافقین ۱ مخالفین ۰ ۱۶ خرداد ۹۶ ، ۱۳:۳۶
مهرداد یوسفی فرد

اصول کلی و تگ های پرکاربرد در اچ تی ام ال

همانطور که در مثال های قبلی نیز مشاهده کردید هر فایل اچ تی ام ال باید با یک اعلان مربوط به نوع سند آغاز شود که در اچی تی ام ال نسخه 5 این اعلان به این شکل نوشته می شود:
<!DOCTYPE html>

اما خود فایل اچ تی ام ال مابین تگ های <html> و </html> نوشته می شود. یعنی تمام عناصر مربوط به فایل اچ تی ام ال باید مابین این تگها قرار بگیرند.

آن قسمت از فایل اچ تی ام ال که توسط کاربر قابل مشاهده است نیز مابین تگ های <body> و </body> نوشته می شود.

مثال زیر را ببینید: 
<!DOCTYPE html>
<html>
<body>

<h1>یک سر تیتر</h1>
<p>متن داخل یک پاراگراف</p>

</body>
</html>
در این قسمت می خواهیم فقط با تعدادی از تگهای پرکاربرد اچ تی ام ال و ساختار کلی یک فایل اچ تی ام ال آشنا شویم. در قسمت های بعدی توضیحات کامل تری در مورد ساختار تگ ها در داخل فایل اچ تی ام ال ارائه خواهم کرد.

در مثال بالا دو تگ پرکاربرد در زبان اچ تی ام ال را مشاهده می کنید. تگ مربوط به سرتیتر (<h1>) و تگ مربوط به پاراگراف (<p>).

سرتیتر ها را می توانیم در اچ تی ام ال تا 6 سطح متفاوت تعریف کنیم که این سرتیترها با استفاده از تگهای <h1> تا <h6> مشخص می شوند. در مثال بالا از سرتیتر نوع 1 استفاده کرده ایم که از نظر اندازه فونت از همه سرتیتر ها دشت تر است.

برای اینکه در فایل اچی تی ام ال مشخص کنیم که یک تکه از متن به عنوان پاراگراف نوشته شده است، باید این متن را مابین تگ های <p> و </p> قرار دهیم.

یکی دیگر از تگ های پرکاربرد در اچ تی ام ال تگ <a> است که از آن برای ایجاد لینک استفاده می کنیم. در واقع صفحات وب بدون امکان برقراری لینک کاملا بی معنا و غیر مفید است. برای ایجاد یک لینک از تگ های <a> و </a> استفاده می کنیم.

در داخل این تگ با استفاده از خصیصه (attribute) href باید مقصد لینک را مشخص کنیم. با استفاده از خصیصه ها اطلاعات اضافی در مورد عناصر اچی تی ام ال را درج می کنیم که یک نمونه را در عنصر لینک مشاهده کردید: 
<a href=http://www.samplesite.com>یک لینک ساده</a>
یکی دیگر از موارد پر استفاده در اچ تی ام ال درج تصویر در داخل صفحه است. با استفاده از عنصر <img> می توانیم یک تصویر را در داخل متن نمایش دهیم. این عنصر دارای 4 خصیصه است: فایل منبع (src)، متن جایگزین (alt)، ارتفاع (height)، عرض (width).

یک مثال ساده: 
<img src="sample.jpg" alt="طراحی وب سایت کتابخانه" width="50" height="60">
۰ نظر موافقین ۱ مخالفین ۰ ۱۶ خرداد ۹۶ ، ۱۳:۱۹
مهرداد یوسفی فرد