در طراحی سایت با اچ تی ام ال شما نیازمند تهیه یک سند و یا نسخه اصلی هستید. در واقع این سند دارای ساختار مشخصی است . برای ایجاد این صفحه شما باید نکاتی را که در این بخش از شرکت طراحی سایت مبنا ارائه شده است را رعایت نمایید.
تگ توضیحات
در این بخش از آموزش Html ، تگ توضیحات را به شما آموزش می دهیم.
از تگ توضیحات برای توضیح کد مورد نظر استفاده می شود.این تگ در وب نمایش داده نمی شود.این تگ به شما این امکان را می دهد که اگر بعد از مدت ها به کدها در طراحی سایت رجوع کردید متوجه شرح وظیفه ی هر قسمت شوید.برای نمایش تگ توضیحات از این دستور پیروی می شود.
مثال زیر کاربرد تگ توضیحات را نشان می دهد.
<!-- توضیحات وارد شده-->
تگ Link
در این بخش از آموزش Html ، تگ Link را به شما معرفی می کنیم.
از تگ link برای برقرای ارتباط و لینک دادن به سایر صفحات وب استفاده می شود.این تگ به صورت یکه می باشد.<link/>
برای مثال شما می توانید با استفاده از این تگ در وب خود به صفحات دیگر لینک دهید.
در تگ link خاصیت charset شیوه و روش کدنویسی صفحه مقصد پیوند را مشخص می کند.همچنین برای نمایش نحوه ی باز شدن و نمایش پنجره صفحه مقصد از خواص زیر استفاده می کنیم که شامل:
blank : با استفاده از این ویژگی در طراحی سایت ، لینک در یک پنجره جدید باز می شود.
parent : لینک در قاب اصلی باز خواهد شد.
self : لینک در همان پنجره یا قابی که کلیلک شده است باز می شود.
top : لینک در همان پنجره ای که کلیک شده است به طور کامل باز خواهد شد.
مثال زیر کاربرد تگ link را در طراحی سایت نشان می دهد.
<html>
<head>
<link rel="stylesheet" type="text/css" href="آدرس فایل سی اس اس">
</head>
تگ Style
در این بخش از آموزش Html ، تگ Style را به شما آموزش می دهیم.
با استفاده از تگ Style در طراحی سایت ، خواص و تنظیمات مورد نیاز را برای هر دستور تعیین می کنیم.همچنین تگ style تغییر شکل،ویرایش،افزودن جلوه های مختلف و ... را شامل شود.
این تگ شامل یکسری عناصر می باشد که عبارتنداز:
√تعیین خواص مورد نظر در خاصیت Style در درون تگ عنصر
√تعیین خواص عناصر در تگ Style در بخش Head هر صفحه برای عناصر آن صفحه.
√تعیین خواص از طریق یک تگ Style بیرونی و پیوند آن عنصر به تگ Style .
مثال زیر کاربرد تگ Style را در طراحی سایت نشان می دهد.
<p style=" color:white; border:solid 1px red; width:100px; background-color:blue; font-size:10pt; text-align:center; "> متن پاراگراف </p>
تگ Html
در این بخش از آموزش Html ، تگ Html , تگ Head و تگ Body را به شما آموزش می دهیم.
تگ Html به صورت زوج بوده و بقیه تگ ها داخل تگ Html قرار می گیرند.این تگ بزرگترین تگ موجود می باشد زیرا سایر تگ ها داخل این تگ قرار می گیرند همچنین تگ html به مرورگر نشان می دهد که سند موجود html می باشد.توجه داشته باشید که فقط متون و دستورات داخل این تگ در طراحی سایت نمایش داده می شود و خود تگ دیده نمی شود.
از این تگ بلافاصله پس از تگ Html استفاده می شود.تگ Head از مهمترین تگ ها در طراحی سایت می باشد به خاطر داشته باشید که در تگ Head همه ی موارد نوشته شده نمایش داده نمی شود و در این تگ فقط تگ های Base,Link,Meta,Title,Style,Script قابل مشاهده می باشد.
تگ Body پس از تگ Head قرار می گیرد.تمامی عکس ها و فونت های به کار برده در این تگ قرار می گیرد.شما می توانید سایز قلم،رنگ قلم و سایر مواردی که در صفحات وب دیده می شود را در این تگ تعیین کنید.
مثال زیر نحوه ی کاربرد تگ html , تگ body و تگ head را در طراحی سایت نشان می دهد.
<html>
<head>
.
.
.
</head>
<body>
.
.
.
</body>
</html>
تگ Title
در این بخش از آموزش Html ، تگ Title را به شما آموزش می دهیم.
متنی که بین تگ Title قرار می گیرد عنوان دیده شده در مرورگر را نمایش می دهد.بهتر است تعداد کاراکتر موجود در این تگ از 15 کاراکتر بیشتر نشود.این تگ در طراحی سایت به صورت جفت می باشد.(<title></title>)
این تگ داخل تگ Head قرار می گیرد.توجه داشته باشید که تگ Title برای موتورهای جستجو گوگل بسیار حائز اهمیت می باشد.توجه داشته باشید که هر سند html فقط می تواند یکبار از تگ title استفاده کند.
مثال زیر کاربرد تگ Title را نشان می دهد.
<html>
<head>
<title>This is a TEST !</title>
</head>
<body>
</body>
<html>
خروجی: This is a TEST
تگ Script
در این بخش از آموزش Html ، تگ Script را به شما آموزش می دهیم.
از تگ اسکریپت در طراحی سایت برای قرار دادن اسکریپت درون صفحات html استفاده می شود.دستورات وارده باید بین تگ های باز و بسته script قرار گیرد.بهتر است تگ اسکریپت داخل تگ Head قرار گیرد.
مثال زیر کاربرد تگ script را نشان می دهد.
<script type="text/javascript" >
محل کدهای جاوا اسکریپت
</script>
حالت charset در تگ script نحوه ی کدگذاری و ترجمه کاراکترها در طراحی سایت را مشخص می کند.
زبان هایی که می توان در script مورد استفاده قرار گیرد عبارتنداز:
javasript,vbscript,ecmascript,live script
script دارای خواص مهمی در زبان و نوع آن دارد که شامل موارد زیر می باشد:
- text/javascript : به نوع متن و زبان برنامه نویسی آن در javascript اشاره دارد.
- text/ecmascript : این خاصیت به نوع و زبان برنامه نویسی در ecmascript اشاره دارد.
- text/vbscript : این خاصیت به نوع و زبان در vbscript اشاره دارد.
- applicattion/javascript : این خاصیت به نوع برنامه کاربردی و زبان برنامه نویسی در javascript اشاره دارد.
- applicattion/ecmascript : این خاصیت به نوع برنامه کاربردی و زبان برنامه نویسی در ecmascript اشاره می کتد.
- applicattion/vbscript : این خاصیت به نوع برنامه کاربردی و زبان برنامه نوبسی در vbscript اشاره می کند.
Meta Tag ها
در این بخش از آموزش Html ، متاتگ ها را به شما آموزش می دهیم.
در طراحی سایت ،متا تگ ها از لحاظ جستوجگران گوگل و یاهو حائز اهمیت می باشند.به یاد داشته باشید که حدود هفتاد درصد از بازدیدکنندگان از طریق گوگل و یا یاهو وارد سایت می شوند.بنابراین استفاده ی درست و به جا از متا تگ ها در بهینه سازی سایت برای موتور گوگل مهمتر می شود.به طور کل متاتگ ها اطلاعات وب را به مرورگر یا موتور گوگل معرفی می کند.
متا تگ ها داخل تگ head نوشته می شوند.متاتگ ها انواع مختلفی دارند که تعدادی را برای شما نمایش می دهیم.
متاتگ نام
<meta NAME="AUTHOR" CONTENT="author's name here"></meta>
متاتگ زبان صفحه
<meta HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=UTF-8"></meta>
متاتگ توضیحات
<meta name="description" content=" توضیح مورد نظر">
متاتگ کلمات کلیدی
<meta name="keyword" content="کلمات کلیدی وارد شود و با , از هم جدا شوند" >
تگ a
در این بخش از آموزش Html ، تگ a را آموزش می دهیم.
تگ a از کلمه ی anchor می آید که به معنای لنگر می باشد.برای ارتباط با سایر صفحات،ارتباط با تصاویر ویا قسمتی از همان صفحه از این تگ استفاده می شود.به طور کل برای ایجاد لینک ها از تگ a استفاده می شود.
مثال زیر کاربرد تگ a را نشان می دهد.
< a Properties ="Value" .... > محتوا </ a >
تگ a دارای خصوصیاتی می باشد که به معرفی این خصوصیات می پردازیم.
خاصیت href:این خاصیت از مهمترین خاصیت تگ a می باشد.در این خاصیت با کلیک بر روی لینک مورد نظر در صفحه مرور گر به آن صفحه می رود.به عبارتی برای تعیین آدرس کامل صفحه یا فایل مقصد پیوند مورد استفاده قرار می گیرد.
خاصیت target:این خاصیت در طراحی سایت نحوه ی باز شدن لینک موردنظر را در مرورگر نمایش می دهد.این خاصیت خود دارای چهار حالت می باشد که عبارتند از:
√ blank : با استفاده از این ویژگی لینک در یک پنجره ی جدید باز خواهد شد.
√ self : این خاصیت امکان لینک در همان پنجره یا قابی که کلیلک شده است باز خواهد شد.
√ parent : این خاصیت در طراحی سایت باعث باز شدن لینک در همان صفحه اصلی باز خواهد شد.
√ top : لینک در همان پنجره ای که کلیلک شده است اجرا خواهد شد.
خاصیت title:نام لنگرگاه برای پرش به قسمتی از صفحه می باشد.برای ایجاد توضیحی که مانند hint ظاهر شود به کار می رود . این گزینه برای آن به کار می رود که کاربر قبل از کلیک بداند به کجا هدایت خواهد شد .
کاربرد بهینه و درست هم می تواند در بهینه سازی سایت شما را یاری کند.
تگ img
در این بخش از آموزش Html ، تگ img را به شما آموزش می دهیم.
این تگ نیز از مهمترین تگ ها در طراحی وب سایت می باشد.با استفاده از این تگ شما می توانید عکس دلخواه را به وب سایت خود اضافه کنید.توجه داشته باشید که سایز عکس نباید زیاد باشد.
تگ img شامل خصوخصیاتی می باشد که به آنها اشاره می کنیم
خاصیت scr : این خاصیت مهمترین خاصیت تگ img می باشد.این خصوصیت آدرس عکس را شامل می شود.
مثال: <img src="administrator/files/UploadFile/1.jpg" />
خاصیت alt : این خصوصیت بدلیل اینکه برای موتورها جستجو گوگل مهم می باشد از اهمیت خاصی در در طراحی سایت برخوردار می باشد.
اگر آدرسی که وارد شده است صحیح نباشد مرورگر آن را به شکل متن وارد می کند ولی اگر صحیح باشد خوده عکس را نمایش می دهد.
به خاطر داشته باشید که حتما با استفاده از برنامه فتوشاپ حجم عکس را کم کنید در غیر این صورت سرعت لود شدن صفحه پایین خواهد آمد.
تگ Fieldset
در این بخش از آموزش Html ، تگ Fieldset و تگ Legend را آموزش می دهیم.
این تگ در طراحی سایت دور محتویات خود یک کادر ایجاد می کند و عناصری که بین این تگ قرار می گیرند جز عناصر درونی آن تگ به حساب می آیند.با استفاده از تگ Fieldset میتوانید گروه ها و همچنین عناصر را کنترل کنید.
تگ Legend
در این تگ برای اضافه کردن عنوان برای کادر Fieldset استفاده می شود.متنی که داخل تگ Legend قرار می گیرد تعیین کننده عنوان کادر است.
در طراحی سایت مثال زیر کاربرد تگ Fieldset و تگ Legend را نشان می دهد.
<fieldset>
<legend align="left">عنوان گروه</legend>
<p>متن مورد نظر.</p>
</fieldset>
عنوان گروه
متن مورد نظر.
تگ Center
در این بخش از آموزش Html ، تگ B , تگ Hr , تگ Center , تگ Sub و تگ Sup را آموزش می دهیم.
از تگ center برای وسط چین کردن متون استفاده می شود.به عبارتی؛متنی که داخل تگ center وارد می شود به قسمت مرکزی انتقال داده می شود.
مثال زیر در طراحی سایت نشان دهنده کاربرد تگ center می باشد.
<center> متن مورد نظر </center>
متن مورد نظر
تگSup و تگ Sub
از تگ sub و تگ sup برای نمایش متون در پایین یا بالای خط مورد نظر استفاده می شود.
تگ sub برای نمایش اندیس استفاده می شود درحالیکه از تگ Sup از نماد توان استفاده می شود.
مثال زیر کاربرد تگ sub و تگ sup را نشان می دهد.
<p> این متن <sub> تست</sub> می باشد. </p>
<p> این متن <sup> تست </sup> می باشد. </p>
نتیجه:
این متن تست می باشد.
این متن تست می باشد.
تگHr
با استفاده از تگ Hr در طراحی سایت ، یک خط افقی ایجاد می شود و ادامه ی متن شما در خط پایین خط افقی نوشته می شود.این تگ به صورت یکه نوشته می شود.<Hr/>
مثال زیر کاربرد تگ Hr را نشان می دهد.
<p>
first paragraph .
</p>
<hr>
<p>
second paragraph .
</p>
first paragraph .
second paragraph .
تگ B
متنی که داخل تگ B نوشته می شود به صورت پررنگ خارج می شود.این تگ به صورت جفت می باشد.
مثال زیر کاربرد تگ B در طراحی سایت را در بخش آموزش html نشان می دهد.
<p> این متن <b> تست </b> می باشد. </p>
تگ<P>
در تگ P برای ایجاد یک پاراگراف در طراحی سایت استفاده می شود.شما می توانید متن داخل تگ P را به صورت دستور وارده چپ چین،راست چین و یا وسط چین کنید.
مثال:
<P align="raght">متن مورد نظر</p>
تگ Br
تگ Br در زبان برنامه نویسی مانند کلید ENTER عمل می کند.به عبارتی متن جدید را به پاراگراف بعدی در طراحی سایت می برد.
توجه داشته باشید که این تگ به صورت تنها وارد می شود و تگ پایانی ندارد.<br/>
به یاد داشته باشید که این تگ در داخل تگ body نوشته می شود.
مثال:
< p > My name is : < br / > sara < /p >
My name is :
sara
تگ H1 - H6
در این بخش از آموزش Html در مقالات طراحی سایت ، تگ H1-H6 را به شما توضیح می دهیم.
از تگ H1- H6 برای تیترها و عنوان ها استفاده می شود.به ترتیب H1 مهمترین سر تیتر به حساب می آید همچنین h1 درشت ترین تیتر نسبت به بقیه را دارا می باشد. توصیه می شود جهت بهینه سازی سایت حتما از این سرتیترها استفاده شود زیرا این خاصیت بسیار برای موتورهای جستجو حائز اهمیت می باشد.
مثال زیر کاربرد تگ h1-h6 را در طراحی سایت نشان می دهد.
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
نتیجه:
