آموزش HTML

سیده آمین ارمان · 2017/02/09

تگ Title

در این بخش از آموزش Html ، تگ Title را به شما آموزش می دهیم.

متنی که بین تگ Title قرار می گیرد عنوان دیده شده در مرورگر را نمایش می دهد.بهتر است تعداد کاراکتر موجود در این تگ از 15 کاراکتر بیشتر نشود.این تگ در طراحی سایت به صورت جفت می باشد.(<title></title>)

title

این تگ داخل تگ Head قرار می گیرد.توجه داشته باشید که تگ Title برای موتورهای جستجو گوگل بسیار حائز اهمیت می باشد.توجه داشته باشید که هر سند html فقط می تواند یکبار از تگ title استفاده کند.

مثال زیر کاربرد تگ Title را نشان می دهد.

<html>
<head>
<title>This is a TEST !</title>
</head>
<body>
</body>
<html>

خروجی: This is a TEST

سیده آمین ارمان · 2017/02/09

تگ اسکریپت Script
تگ 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 اشاره می کند.

سیده آمین ارمان · 2017/02/09

متاتگ ها (Meta Tag)
Meta Tag

در این بخش از آموزش Html ، متاتگ ها را به شما آموزش می دهیم.

در طراحی سایت ،متا تگ ها از لحاظ جستوجگران گوگل و یاهو حائز اهمیت می باشند.به یاد داشته باشید که حدود هفتاد درصد از بازدیدکنندگان از طریق گوگل و یا یاهو وارد سایت می شوند.بنابراین استفاده ی درست و به جا از متا تگ ها در بهینه سازی سایت برای موتور گوگل مهمتر می شود.به طور کل متاتگ ها اطلاعات وب را به مرورگر یا موتور گوگل معرفی می کند.

Meta Tag

متا تگ ها داخل تگ 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="کلمات کلیدی وارد شود و با , از هم جدا شوند" >

سیده آمین ارمان · 2017/02/09

تگ a

در این بخش از آموزش Html ، تگ a را آموزش می دهیم.

تگ a از کلمه ی anchor می آید که به معنای لنگر می باشد.برای ارتباط با سایر صفحات،ارتباط با تصاویر ویا قسمتی از همان صفحه از این تگ استفاده می شود.به طور کل برای ایجاد لینک ها از تگ a استفاده می شود.

مثال زیر کاربرد تگ a را نشان می دهد.

< a Properties ="Value" .... > محتوا </ a >

تگ a دارای خصوصیاتی می باشد که به معرفی این خصوصیات می پردازیم.

خاصیت href:این خاصیت از مهمترین خاصیت تگ a می باشد.در این خاصیت با کلیک بر روی لینک مورد نظر در صفحه مرور گر به آن صفحه می رود.به عبارتی برای تعیین آدرس کامل صفحه یا فایل مقصد پیوند مورد استفاده قرار می گیرد.
خاصیت target:این خاصیت در طراحی سایت نحوه ی باز شدن لینک موردنظر را در مرورگر نمایش می دهد.این خاصیت خود دارای چهار حالت می باشد که عبارتند از:

√ blank : با استفاده از این ویژگی لینک در یک پنجره ی جدید باز خواهد شد.
√ self : این خاصیت امکان لینک در همان پنجره یا قابی که کلیلک شده است باز خواهد شد.
√ parent : این خاصیت در طراحی سایت باعث باز شدن لینک در همان صفحه اصلی باز خواهد شد.
√ top : لینک در همان پنجره ای که کلیلک شده است اجرا خواهد شد.

خاصیت title:نام لنگرگاه برای پرش به قسمتی از صفحه می باشد.برای ایجاد توضیحی که مانند hint ظاهر شود به کار می رود . این گزینه برای آن به کار می رود که کاربر قبل از کلیک بداند به کجا هدایت خواهد شد .

کاربرد بهینه و درست هم می تواند در بهینه سازی سایت شما را یاری کند.

سیده آمین ارمان · 2017/02/09

تگ img

در این بخش از آموزش Html ، تگ img را به شما آموزش می دهیم.

این تگ نیز از مهمترین تگ ها در طراحی وب سایت می باشد.با استفاده از این تگ شما می توانید عکس دلخواه را به وب سایت خود اضافه کنید.توجه داشته باشید که سایز عکس نباید زیاد باشد.
تگ img شامل خصوخصیاتی می باشد که به آنها اشاره می کنیم

خاصیت scr : این خاصیت مهمترین خاصیت تگ img می باشد.این خصوصیت آدرس عکس را شامل می شود.

مثال: <img src="administrator/files/UploadFile/1.jpg" />

خاصیت alt : این خصوصیت بدلیل اینکه برای موتورها جستجو گوگل مهم می باشد از اهمیت خاصی در در طراحی سایت برخوردار می باشد.

اگر آدرسی که وارد شده است صحیح نباشد مرورگر آن را به شکل متن وارد می کند ولی اگر صحیح باشد خوده عکس را نمایش می دهد.

به خاطر داشته باشید که حتما با استفاده از برنامه فتوشاپ حجم عکس را کم کنید در غیر این صورت سرعت لود شدن صفحه پایین خواهد آمد.

سیده آمین ارمان · 2017/02/09

تگ Fieldset , Legend
تگ Fieldset

در این بخش از آموزش Html ، تگ Fieldset و تگ Legend را آموزش می دهیم.

این تگ در طراحی سایت دور محتویات خود یک کادر ایجاد می کند و عناصری که بین این تگ قرار می گیرند جز عناصر درونی آن تگ به حساب می آیند.با استفاده از تگ Fieldset میتوانید گروه ها و همچنین عناصر را کنترل کنید.

تگ Legend
در این تگ برای اضافه کردن عنوان برای کادر Fieldset استفاده می شود.متنی که داخل تگ Legend قرار می گیرد تعیین کننده عنوان کادر است.

در طراحی سایت مثال زیر کاربرد تگ Fieldset و تگ Legend را نشان می دهد.

<fieldset>

<legend align="left">عنوان گروه</legend>

<p>متن مورد نظر.</p>

</fieldset>

عنوان گروه
متن مورد نظر.

سیده آمین ارمان · 2017/02/09

تگ B , Hr , Sub , Sup , Center
تگ 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>

سیده آمین ارمان · 2017/02/09

تگ P , Br
تگ<P>

در تگ P برای ایجاد یک پاراگراف در طراحی سایت استفاده می شود.شما می توانید متن داخل تگ P را به صورت دستور وارده چپ چین،راست چین و یا وسط چین کنید.
مثال:

<P align="raght">متن مورد نظر</p>

تگ Br

تگ Br در زبان برنامه نویسی مانند کلید ENTER عمل می کند.به عبارتی متن جدید را به پاراگراف بعدی در طراحی سایت می برد.

توجه داشته باشید که این تگ به صورت تنها وارد می شود و تگ پایانی ندارد.<br/>

به یاد داشته باشید که این تگ در داخل تگ body نوشته می شود.

مثال:

< p > My name is : < br / > sara < /p >
My name is :
sara

سیده آمین ارمان · 2017/02/09

تگ 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>

نتیجه:

سیده آمین ارمان · 2017/02/09

تگ div

در این بخش از آموزش Html ، تگ div را به شما آموزش می دهیم.

این تگ از مهمترین و کاربردی ترین تگ ها در طراحی سایت می باشد.و با بوجود آمدن تگ div از تگ Table در طراحی سایت دیگر کاربردی ندارد زیرا با استفاده از تگ div می توان در بهینه سازی سایت موثر بود.این تگ برای تعیین ساختار اصلی صفحه مورد نظر استفاده می شود.
تگ div را می توان در قسمت های مختلفی از دستورات خود اضافه کرد.شما می توانید ساختاری که در نظر دارید را در تگ div قرار دهید.این تگ در html شامل کاربردهایی می باشد که آن ها را توضیح می دهیم.
√ شما می توانید با استفاده از این تگ یک سند html را تقسیم بندی نمایید.
√ با استفاده از تگ div می توانید به گروهی از تگ ها دستورات خود را اعمال کنید به طور کل با استفاده از این کار دستورات خود را به همه ی تگ ها اعمال می کنید.

تمام عناصری که در برنامه نویسی به منظور طراحی سایت استفاده می شود، دارای هدف هستند. برای مثال در زبان برنامه نویسی Html تگ هایی تعریف شده اند که هر کدام دارای هدف خاصی هستند برای مثال تگ <p> برای تعریف پاراگراف ها، تگ های <h> که از <h1> تا <h6> است و برای تعیین اولویت ها کاربرد دارد. علاوه بر این تگ ها یک تگ نیز با عنوان تگ <div> وجود دارد.

تگ <div> معرف یک دسته بندی یا یک بخش در یک HTML است. این تگ برای گروه بندی عناصر بلوک برای شکل گیری از طریق css در طراحی سایت استفاده می شود. در واقع تگ <div> در در طراحی سایت کاربرد فراوانی دارد. این تگ تا حد زیادی جایگزین تگ <table> در Html 4 است.

در زیر مثالی از نحوه کاربرد تگ های مختلف در داخل تگ <div> در در طراحی سایت برای شما کاربران عزیز ارائه کرده ایم.

<div style="color:#0000FF">
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</div>

مثالی کلی از نحوه نوشتن تگ ها در یک صفحه Html در در طراحی سایت :

<!DOCTYPE html>
<html>
<head>
<title>HTML div Tag</title>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<div id="contentinfo">
<p>Welcome to our website. We provide tutorials on various subjects.</p>
</div>
</body>
</html>

مثال زیر کاربرد تگ div را نشان میدهد.

<div style="color:red"></div>

آموزش HTML

سیده آمین ارمان

کاربر نگاه دانلود

پیشنهادات

سیده آمین ارمان

کاربر نگاه دانلود

سیده آمین ارمان

کاربر نگاه دانلود

سیده آمین ارمان

کاربر نگاه دانلود

سیده آمین ارمان

کاربر نگاه دانلود

سیده آمین ارمان

کاربر نگاه دانلود

سیده آمین ارمان

کاربر نگاه دانلود

سیده آمین ارمان

کاربر نگاه دانلود

سیده آمین ارمان

کاربر نگاه دانلود

سیده آمین ارمان

کاربر نگاه دانلود

برخی موضوعات مشابه

کسب درآمد از اینترنت برای نمایندگان پرتال

دامنه (دامین)

آمار انجمن

این صفحه را به اشتراک بگذارید