آموزش HTML

یک صفحه اینترنتی می تواند حاوی متن ، تصویر ، صوت ، ویدئو باشد. HTML یک زبان نشانه گذاری است و پایه و اساس تمام صفحات اینترنتی است . با HTML تمامی اجزا را در صفحات اینترنتی قرار می دهیم وبا CSS آنها را زیبا می کنیم.

کوتاه ترین راه برای آموزش html :

سریع ترین راه برای یادگیری طراحی سایت و html استفاده از آموزش های ویدئویی میباشد که سرعت یادگیری را تا 20 برابر افزایش می دهد.

پیشنهاد ما :

پیشنهاد می شود پکیج آموزش طراحی قالب سایت را خریداری نمایید چون مباحث کامل html,css,html5,css3همراه با دهها مثال و 3 پروژه قالب زیبا در آن موجود میباشد.

آموزش تصویری (ویدئویی) html:

این فیلم های آموزشی در قسمت دانلود رایگان موجود است. چنانچه از قسمت دانلود رایگان ، دانلود نموده اید دیگر دانلود نفرمایید.

دانلود فیلم آموزش html -بخش 1
دانلود فیلم آموزش html -بخش 2
دانلود فیلم آموزش html -بخش 3
دانلود فیلم آموزش html -بخش 4
دانلود فیلم آموزش html -بخش 5
دانلود فیلم آموزش html -بخش 6
دانلود فیلم آموزش html -بخش 7
دانلود فیلم آموزش html -بخش 8
دانلود فیلم آموزش html -بخش 9
دانلود فیلم آموزش html -بخش 10
دانلود فیلم آموزش html -بخش 11
دانلود فیلم آموزش html -بخش 12
دانلود فیلم آموزش html -بخش 13
دانلود فیلم آموزش html -بخش 14
دانلود فیلم آموزش html -بخش 15
دانلود فیلم آموزش html -بخش 16
دانلود فیلم آموزش html -بخش 17
دانلود فیلم آموزش html -بخش 18
دانلود فیلم آموزش html -بخش 19
دانلود فیلم آموزش html -بخش 20
دانلود فیلم آموزش html -بخش 21

دانلود رایگان کتاب آموزش html :

دانلود رایگان کتاب آموزش html

تگ ها در HTML :

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

HTML از بخش های مختلف تشکیل شده که به اصطلاح به آنها تگ (tag) گفته می شود. هر تگ کاربرد خاصی دارد. اين تگ ها به مرورگر می گویند که هر بخش از صفحه چه نوع عنصری است و بايد به چه صورت نمايش داده شود .

در صفحات html از جاوا اسکریپت و جی کوئری نیز استفاده می شود. پلاگین های جی کوئری نقش بسزایی در زیبایی صفحات وب دارند.

سورس صفحات اچ تی ام ال را می توانید با کلیک راست روی صفحات و زدن view source ببینید.

پسوند فایل :

پسوند فایل اچ تی ام ال html یا html می باشند. اما جدیدا فقط از پسوند html استفاده می کنند.

نرم افزارهای مورد نیاز :

برای نوشتن صفحات html پیشنهاد می شود از نرم افزارهای NOTEPAD++ , PHPSTORM استفاده شود.

برای تست صفحات html از مرورگرهای فایرفاکس یا کروم استفاده نمایید. با دابل کلیک روی صفحات html می توانید آنها را اجرا نمایید.

نوشتن فارسی در صفحات HTML :

برای نوشتن متن های فارسی در صفحات اینترنتی کافی است از متای CHARSET استفاده نمایید و مقدار آن را UTF8 قرار دهید.

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

عناصر اصلی صفحه HTML :

در اینجا شما را با یک صفحه HTML و عناصر اصلی آن آشنا می کنیم و چند تگ را نیز معرفی می کنیم.

DOCTYPE : این تگ نشانه این است که از HTML5 دراین صفحه استفاده می شود.

HTML : اولین تگ صفحات اچ تی ام ال می باشد.

HEAD : برای معرفی استایل (CSS) ، کدهای جاوا اسکریپت ، متاها ، عنوان صفحه و غیره استفاده می شود.

BODY : تمامی عناصری که به کاربر نمایش داده می شود در این قسمت قرار می گیرد مانند متن ، صوت ، تصویر ، ویدئو و غیره

TITLE : در قسمت HEAD یک تگ مهم به نام TITLE وجود دارد. این تگ برای نوشتن عنوان استفاده می شود. عنوان صفحه در سئو بسیار موثر است.

META CHARSET : برای نوشتن متن های فارسی حتما باید از این متا استفاده شود و مقدار آن باید حتما UTF8 باشد.

ساختن اولین صفحه وب :

در مثال پایین نحوه ساخت یک صفحه HTML ای را می بینید.

تگ H1 برای نوشتن عنوان های مهم بکار می رود. تگ P برای نوشتن پاراگراف ها بکار می رود. در قسمت های بعد در مورد تمامی تگ ها بحث خواهیم کرد. تگ H1 و P دارای تگ بسته می باشند. تگ H1 و P را حتما ببندید.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان صفحه</title>
</head>
<body>
<h1>SH711.COM</h1>
<p>paragraph</p>
</body>
</html>

ویژگی ها در html :

بعضی از تگ ها دارای ویژگی هایی می باشند و معمولا در تگ باز بکار می رود. ویژگی ها معمولا در تگ کوتیشن یا دابل کوتیشن قرار می گیرد. مثلا :

در تگ p یا پاراگراف یک ویژگی بنام title داریم. وقتی کاربر با موس روی تگ قرار می گیرد آن متن نمایش داده می شود.

در تگ a یا لینک یک ویژگی بنام href داریم که مسیر فایل یا سایت را در آن قرار می دهیم که در قسمت های بعد با آن آشنا می شویم.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h2>The title attribute</h2>
<p title="I'm a tooltip"> In amoozesh sh711.com ast </p>
<a href="http://sh711.com">شیرازلرن</a>
</body>
</html>

عنوان یا heading در html :

عنوان ها شامل تگ های h1 تا h6 می باشند. عنوان ها در صفحات وب دارای اهمیت زیادی هستند . معمولا مهم ترین عنوان را در تگ h1 و کم اهمیت ترین عنوان را در تگ h6 قرار می دهیم.

یکی از اشتباهات رایج افراد مبتدی این است که از heading یا عنوان برای متن های توپر استفاده می کنند که این اشتباه است. ما با عنوان ها یا تگ های h1 تا h6 مشخص می کنیم که این عنوان متن ما است و برای ما دارای اهیمت است.

<!DOCTYPE html>
<html>
<body>
<h1>sh711.com</h1>
<h2>sh711.com</h2>
<h3>sh711.com</h3>
<h4>sh711.com</h4>
<h5>sh711.com</h5>
<h6>sh711.com</h6>
</body>
</html>

تگ p و تگ pre :

برای ایجاد یک پاراگراف می توانیم از تگ های p و pre استفاده کنیم. تفاوت تگ p و pre در این است که متن ها در تگ p پشت سرهم قرار می گیرند اما در تگ pre متن ها همان طور که نوشته می شود نمایش داده می شود. مثال : اگر در حین تایپ متن از کلید Enter صفحه کلید استفاده نمایید در تگ p هیچ تاثیری ندارد و متن ها پشت سرهم قرار می گیرد اما در تگ pre کلید Enter یک خط خالی ایجاد می کند. مثال زیر را اجرا نمایید و خروجی را ببینید:

نکته مهم : حتما تگ p, pre را ببندید.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>شیرازلرن</title>
</head>
<body>
<p>
in
amoozesh
site
shirazlearn
ast
</p>
<hr>
<pre>
in
amoozesh
site
shirazlearn
ast
</pre>
</body>
</html>

نحوه استفاده از css در HTML :

سی اس اس ( css3 ,css ) نقش بسزایی در زیبایی سایت دارد. چنانچه تسلط خوبی به css داشته باشید می توانید قالب زیبایی را طراحی نمایید. یادگیری css برای طراحی قالب سایت الزامی میباشد. برای تغییر نوع فونت متن ، رنگ ، اندازه‌ها و غیره از سی اس اس (css ) استفاده می کنیم.

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

از استایل یا css به 3 شکل استفاده می شود:

1- اینلاین یا inline

2- اینترنال (internal)

3- اکسترنال (external)

در مثال پایین از نوع inline استفاده شده است. برای این کار از کلمه style استفاده می شود.در بخش آموزش css تمامی دستورات را توضیح خواهیم داد.

در این مثال رنگ متن را با دستور color تغییر می دهیم.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>شیرازلرن</title>
</head>
<body>

<h1 style="color:red;">sh711.com red</h1>
<h1 style="color:blue;">sh711.com blue</h1>

</body>
</html>

تگ b :

از تگ b برای توپر کردن متن استفاده می شود. این تگ نشان دهنده اهمیت دار بودن متن نیز میباشد.

تگ strong :

از تگ strongبرای نشان دادن متن های مهم استفاده می شود. تگ strong متن را توپر می کند.شبیه دستور b میباشد.

تگ i :

از تگ i برای ایتالیک یا کج کردن متن استفاده می شود.

تگ em :

از تگ em برای تاکید استفاده می شود و مانند تگ i متن را ایتالیک می کند.

تگ mark :

از تگ mark برای مارک کردن یا هایلایت کردن یک متن استفاده می شود.

تگ del :

از تگ del برای خط کشیدن روی متن استفاده می شود مثلا در فروشگاه اینترنتی قیمت روی آن با تگ del خط می کشم و قیمت جدید را اعلام می کنیم.

تگ ins :

از تگ ins برای اضافه کردن یک متن استفاده می شود و زیر متن خط می کشد.

تگ sub :

متنی که بین تگ sub قرار گیرد پایین تر از متن اصلی نمایش داده می شود.

تگ sup :

متنی که بین تگ sup قرار گیرد بالاتر از متن اصلی نمایش داده می شود.

مثال زیر را در فایل html قرار داده و اجرا کنید تا نتیجه را ببینید:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>شیرازلرن</title>
</head>
<body>

<p>tag b : <b>sh711.com</b></p>
<p>tag strong : <strong>sh711.com</strong></p>
<p>tag i : <i>sh711.com</i></p>
<p>best em : <em>sh711.com</em></p>
<p>best del : <del>sh711.com</del></p>
<p>best ins : <ins>sh711.com</ins></p>
<p>best sub : <sub>sh711.com</sub></p>
<p>best sup : <sup>sh711.com</sup></p>

</body>
</html>

رنگ ها در طراحی قالب سایت و html:

رنگ ها (color) نقش مهمی در طراحی قالب سایت دارند. اگر از رنگ ها بدرستی در طراحی قالب استفاده نشود می تواند در موفقیت سایت تاثیر بگذارد.

در HTML، یک رنگ را می توان با استفاده از نام یک رنگ، یک مقدار RGB، و یا یک مقدار HEX مشخص کرد.

هر رنگ یک نام دارد : مانند سفید (white) ، مشکی (black) ، آبی (blue)

یا می توان از مقادیر RGB استفاده کرد. RGB به معنی قرمز ، سبز و آبی می باشد و هر رنگ از ترکیب این سه بوجود می اید.

هر رنگ یک مقدار HEX دارد. مانند قرمز (#FF0000) ، زرد (#FFFF00) ، آبی (#0000FF)

که در ادامه آموزش و مثال ها با همه انها آشنا می شوید.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>شیرازلرن</title>
</head>
<body>


<h2 style="background-color:#FF0000">
sh711.com set by using #FF0000
</h2>

<h2 style="background-color:red">
sh711.com set by using red
</h2>

<h2 style="background-color:rgb(255,0,0)">
sh711.com by using #0000FF
</h2>

<h2 style="background-color:#FFFF00">
sh711.com set by using #FFFF00
</h2>

<h2 style="background-color:#FF00FF">
sh711.com by using #FF00FF
</h2>

<h2 style="background-color:rgb(0,255,0)">
sh711.com by using #00FFFF
</h2>

</body>
</html>

گذاشتن کامنت یا توضیحات در HTML :

کامنت یا توضیحات دارای اهمیت زیادی زیادی میباشد. توضیحات در حین طراحی قالب می تواند به ما کمک کند تا اشتباه نکنیم یا در اینده چنانچه قصد تغییر قالب داشته باشیم به ما کمک زیادی می کند.

برای گذاشتن کامنت تک خطی و چند خطی مانند مثال زیر عمل کنید دستوراتی که در کامنت قرار می گیرند اجرا نمی شوند :

<!DOCTYPE html>
<html>
<body>

<!-- <h1>comment tak khati </h1> -->
<!-- Do not display this at the moment
<img border="0" src="pic_mountain.jpg" alt="Mountain">
-->

</body>
</html>

پکیج طلایی آموزش طراحی سایت پکیج آموزش طراحی قالب سایت html,css ایده پولساز پکیج آموزش جاوا اسکریپت و جی کوئری آموزش بوت استرپ پکیج آموزش php