HTML چیست؟


HTML به زبانی اطلاق می شود که سنگ بنای صفحات وب سایت می باشد. عموما تمامی زبانهای برنامه نویسی تحت وب، به نوعی وابسته به زبان HTML می باشند. بعنوان مثال، PHP، جاوا اسکریپت و زبان برنامه نویسی دات نت، زبانهایی هستند که علاوه بر داشتن قوانین و استانداردهای خود، از زبان HTML کمک می گیرند بطوریکه کدهای نوشته شده در قالب خاصی، در بین کدهای HTML قرار داده می شود.

HTMLزبانی می باشد که از زبان XML مشتق شده است. به این معنی که می توان گفت HTML نوع بخصوصی از زبان XML می باشد . XML زبانی است که سنگ بنای آن، تگ می باشد. تگ، همانند پرانتزی می باشد که می توان آن را باز کرد، درون آن چیزی قرار داد و سپس آن را بست. این تگها، می توانند هر اسمی داشته باشند و زبان XML آزادی کاملی را در این خصوص به شما داده است.

همانطور که گفته شد، HTML زبانی است که از تگ ها تشکیل شده است. به این مفهوم که هر تگ در زبان HTML معنا و مفهوم خاص خود را دارد و اصطلاحا به این کار، نشانه گذاری گفته می شود.

بعنوان مثال در زبان HTML چنانچه بخواهید متنی را بولد نمایید از کد زیر استفاده می نمایید:

 

</br>این یک متن بولد است<br>

 

همانطور که ملاحظه می فرمایید، تگها با روش خاصی مشخص می شوند. تگ b در این مثال، در ابتدا باز می شود، درون آن چیزی قرار داده می شود، و سپس با "/" بسته می شود. درست همانند پرانتزها در یک عملیات ریاضی پیچیده که پرانتزها می توانند تو در تو باشند، تگها نیز می توانند به تعداد دلخواه تو در تو باشند. اصطلاحا به این عملیات indent گفته می شود.


آموزش ابتدایی HTML:

 

درس اول:

 

 

 

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

 

 



Doctype نوع را مشخص می کند. تگ صفحه وب را مشخص می کند. مشخص کننده قسمتی از صفحه است که نمایش داده می شود.<h1>تیتر یا heading را نمایش می دهد. و<p>یک پاراگراف را نمایش می دهد.
هر تگی در HTML باز می شود بایر حتما بسته شود.

<tagname>content</tagname>

محتوای بین دو تگ در صفحه وب نمایش داده می شود.
ورژن های مختلفی برایHTML در طی سال ها ایجاد شده است.

 

Version Year
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013

 

زمانی می توانیم یک صفحه وب را درست و به طور کامل ببینیم که ورژن HTML آن را بدانیم. به ما کمک می کند که وب سایتمان را درست ببینیم به عنوان مثال:

 

 

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

 

برای نوشتن HTML می توان از ادیتورهای حرفه ای مثل Adobe Dreamweaver ،Microsoft Expression Web و CoffeeCup HTML Editor اسفاده کرد. همچنین می توان از (Notepad(PC یا (TextEdit(Mac نیز استفاده کرد.
برای شروع می توانید از Notepad استفاده کنیدو آن را با پسوند html. یا htm. ذخیره کنید.

 

 

<!DOCTYPE  html>

<html>

<body>

<h1>My first heading</h1>

<p>My first paragraph.</p>

</body>

</html>


 

درس دوم:

 

تیتر (heading) در HTML:

از <h1> تا <h6> تایین می شود.مانند مثال زیر:

<h1>This is a heading</h1>

<h2>This is a heading</h2> 

<h3>This is a heading</h3> 


-از heading برای بزرگتر کردن یا بولد کردن متنتان استفاده نکنید.
-موتور های جستجو برای دانستن محتوای سایت شما از تیترheading سایتتان استفاده می کنند، پس تیتر بسیار مهم است.
تگ پاراگراف در HTML به این صورت تعریف می شود. مثال:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>


لینک ها متن ها یا عکس هایی هستند که با کلیک روی آنها می توان به یک صفحه دیگر یا به یک قسمت از همان صفحه پرش نمود.
لینک ها در HTML با تک نمایش داده می شوند:

<a href="http://www.samagraph.com">This is a link</a>



آدرس لینک در صفت href نوشته می شود. دقت داشته باشید که آدرس سایت درون " " قرار گرفته است. در سایت This is a link نمایش داده می شود و با کلیک روی آن صفحه به آدرس مورد نظر انتقال داده می شود.
صفت target مشخص می کند که صفحه مورد نظر در کجا باز شود. در مثال زیر صفحه جدید در یک tab جدید باز خواهد شد.

<a href="http://www.samagraph.com/"  target="_blank">Visit Samagraph</a>



عکس ها در HTML با تگ <img> نمایش داده می شوند.


<img  src="w3schools.jpg"  width="104"  height="142">


اسم فایل با صفت src و اندازه فایل با width و height مقداردهی می شود.

<a name="tips">Useful Tips Section</a>



معمولا تگ های HTML می توانند درون یه قرار بگیرند مانند مثال زیر:

 

<!DOCTYPE html>
<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>

 


تگ پاراگراف درون تگ body و این دو درون تگ html هستند.
تگ <br> محتوا ندارد و باعث می شود یک خط فاصله ایجاد شود. این تگ بسته نمی شود.
حروف کوچک و بزرگ در html معنا ندارد و یکی است. مثلا<p> با <P> فرقی ندارد.


در زیر تعدادی از صفات رایج لیست شده است:

 

 

Attribute

Value

Description

class

classname

Specifies a classname for an element

id

id

Specifies a unique id for an element

style

style_definition

Specifies an inline style for an element

title

tooltip_text 

Specifies extra information about an element (displayed as a tool tip)

 

 

 

تگ<hr>یک خط افقی در صفحه html ایجاد می نماید که می تواند برای جدا سازی محتوای سایت به کار رود.

 

  درمثال روبرو بعد از هر پاراگراف یک خط افقی دیده می شود. 

<p>This is a paragraph</p>

<hr><p>This is a paragraph</p>

</hr><p>This is a paragraph</p>

 

 

توضیحات در html فقط برای گویاتر شدن کد هستند و در صفحه نمایش داده نمی شوند. توضیحات به این صورت نشان داده می شوند:

 

 

<!-- This is a comment -->

 

شما می توانید html یک سایت را با کلیک راست و انتخاب view source ببینید.


درس سوم:


مثالی برای تعدادی از صفات :

 

 

<!DOCTYPE html>

<html>

<body>

<p><b>This text is bold</b></p>

<p><big>This text is big</big></p>

<p><i>This text is italic</i></p>

<p><code>This is computer output</code></p>

<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

 

</body>

</html>

خروجی:

 

This text is bold


This text is big


This text is italic


This is computer output


This is subscript and superscript

 

 

 

Tag

Description

<b>

Defines bold text

<big>

Defines big text

<em>

Defines emphasized text 

<i>

Defines a part of text in an alternate voice or mood

<small>

Defines small text

<strong>

Defines strong text

<sub>

Defines subscripted text

<sup>

Defines superscripted text

<ins>

Defines inserted text

<del>

Defines deleted text

 

 

Tag

Description

<code>

Defines computer code text

<kbd>

Defines keyboard text 

<samp>

Defines sample computer code

<tt>

Defines teletype text

<var>

Defines a variable

<pre>

Defines preformatted text

 

 

 

 

<abbr>

Defines an abbreviation

<acronym>

Defines an acronym

<address>

Defines contact information for the author/owner of a document

<bdo>

Defines the text direction

<blockquote>

Defines a section that is quoted from another source

<q>

Defines an inline (short) quotation

<cite>

Defines the title of a work

<dfn>

Defines a definition term

 

 

 

 

تگ headمی تواند تگ های زیر را درونش داشته باشد:

 

 

<title>, <base>, <link>, <meta>, <script>,<style>

 

 

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


<base href="http://www.samagraph/images/"><base target="_blank"></head>


تگ link ارتباط میان صفح با یک فایل خارجی را نشان می دهد. معمولا برای وصل کردن css خارجی به صفحه استفاده می شود.


 
<link rel="stylesheet" type="text/css" href="mystyle.css"></head>
 
 
 درون تگ style می توان سبک نمایش محتویات صفحه را در مرورگر را قرار داد:

 

 

 

<head>
<style type=”text/css”>
{body {background-color:yellow

{p {color:blue 

<style/>

<head/>

 

 

 


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

<meta name="description" content="Free Web tutorials on HTML, CSS, XML">

 
 
برای تعریف کلمات کلیدی:
 
 

<meta name="keywords" content="HTML, CSS, XML">



 

 


لیست آخرین مقالات سایت
18 دی 1391
:: هدف هکرها در سال 2013 چیست؟ ادامه ...
27 آذر 1391
:: بهترین شغل دنیای آی.تی در سال ۲۰۱۳ ادامه ...
27 آذر 1391
:: به زودی جستجو در اينترنت ۱۰۰ برابر سريعتر می‌شود. ادامه ...
8 آذر 1391
:: دامین و هاست چیست؟ ادامه ...
8 آذر 1391
:: چرا از CMS استفاده می کنیم؟ ادامه ...
28 آبان 1391
:: امکانات جدید در جیمیل کار با جیمیل را راحت‌تر کرد. ادامه ...
28 آبان 1391
:: نگاهی به نسخه دهم مرورگر Internet Explorer ادامه ...
28 آبان 1391
:: مدیریت در مرز ایمیل و هرزنامه! ادامه ...
28 آبان 1391
:: توضیحات مختصری در مورد windows 8 ادامه ...
28 آبان 1391
:: از مرورگر های قدیمی استفاده نکنید! ادامه ...
28 آبان 1391
:: المپیک فناورانه متعلق به همه است. ادامه ...
27 آبان 1391
:: HTML چیست؟ ادامه ...
22 آبان 1391
:: آیا ظرفیت اینترنت تمام می شود؟ ادامه ...
22 آبان 1391
:: CSS چیست؟ ادامه ...
21 آبان 1391
:: SEO چیست؟ ادامه ...

آخرین زمان به روز رسانی:
27 آبان 1391
نرم افزار مدیرت وب سایت از پیچیدگیهای خاصی برخوردار می باشد که باعث شده است اکثر شرکت های فعال در زمینه طراحی و تولید وب سایت سراغ نرم افزار های رایگان و کد باز (Open Source) بروند. سماگراف مفتخر است نرم افزار مدیریت محتوای اختصاصی خود را که از قسمت های و امکانات متنوع بسته به نیاز کاربران می باشد را تولید و گسترش دهد.
به روند اجرای پروژه هایتان نظم دهید, اولویت بندی کنید, قسمت های مختلف را کنترل کنید, به کارفرما اجازه دهید روند پروژه را مشاهده کند, در هر زمان گزارش بگیرد و و آن را منتشر کنید. این امکانات به همراه قسمت های مختلف دیگر از قسمت های نرم افزار کنترل پروژه سماگراف می باشد. لازم به توضیح است جهت مشاغل گوناگون, نرم افزار انعطاف پذیر می باشد.
نرم افزار پی گیری و فروش سماگراف این امکان را به تیم فروش شرکت می دهد که اطلاعات انبوهی از مشتریان را در سیتم وارد نمایند و در مراحل مختلف فروش سوابق مشتری را نگه دارند.
نرم افزار حسابداری متمرکز سما گراف که دارای بخش های مختلف خزانه داری, انبار داری, حقوق و دستمزد و ... مناسب برای مشاغل کوچک و بزرگ می باشد. این نرم افزار قادر است در صورتی که وب سایت شما فروشگاه اینترنتی دارد به آن متصل شود و حسابداری شما را متمرکز نماید. همچنین امکان اتصال به نرم افزار پی گیری و فروش را نیز دارا می باشد.

سوالات متداول (وبسایت)

چگونه ایمیل ها را از سرور قدیمی به سرور جدید منتقل کنیم؟

ادامه

چگونه رمز عبور ایمیل را تغییر دهیم؟

ادامه

سوالات متداول (پیگیری و فروش)

آیا امکان ارجاع فایل بین کاربران وجود دارد؟

ادامه

آبا امکان گروه بندی و تعیین سرگروه برای کارشناسان فروش وجود دارد؟

ادامه

سوالات متداول (مدیریت پروژه)

آیا کارفرما می تواند از روند پروژه اطلاع داشته باشد؟

ادامه

آیا مدیر پروژه به پیام های سطح های پایین تر دسترسی دارد؟

ادامه

سوالات متداول (حسابداری)

گزارشات و خروجی های نرم افزار چگونه است؟

ادامه

از چه دیتابیسی استفاده شده است؟

ادامه