آموزش HTML کامل و با مثال

Mehran_FLash · 10 فروردین، ۱۳۹۴

درود

آموزش کامل برنامه نویسی HTML کامل و با مثال

دوستان در این تاپیک مجموعه آموزش های HTML رو از مبتدی تا پیشرفته قرار میدم

پست اسپم ممنوع

سولی بود اینجا: سوال و جواب های برنامه نویسی

یک آموزش دیگه هم هست استاد خوبم جناب C0d3!Nj3ct!0N عزیز ایجاد کردن در این تاپیک :

آموزش کامل HTML

موفق باشید

Mehran_FLash · 10 فروردین، ۱۳۹۴

به نام خدا

پیش نیاز های برنامه نویسی HTML :

1-یک ویرایشگر متن مثل Notepad ( بقیه برنامه ها مثل WORDPAD و .... مشکل هایی دارند)

2- یک مرورگر که 100 درصد اون رو دارید

3- سعی کنید صفحاتی که طراحی می کنید رو روی همه مرورگر هایی که دارید امتحان کنید چون ممکنه روی یکی سالم باشه ولی روی مرور گر دیگه اشکالاتی داشته باشه

4-برای ذخیره کردن متن هایی که در Notepad می نویسید از منوی File گزینه Save As را انتخاب کرده و مسیری را برای ذخیره فایل انتخاب کنید و در کادر

File Name در پایین پنجره Save As نام فایل را با پسوند html بنویسید. در آخر هم دکمه Save را کلیک کنید.

پایان بخش اول

Mehran_FLash · 10 فروردین، ۱۳۹۴

به نام خدا

در اینجا می خوایم به ساختار شناسه ها یا همان تگها (tag) در HTML بپردازیم. یک تگ همیشه با علامت کوچکتر ریاضی یعنی این علامت > آغاز می شه و با

علامت بزرگتر < به پایان می رسه. مثلاً تگی که باعث ایجاد زیرخط کلمات می شه اینطور نوشته می شه: این علامت را قبل از متنی که می خواهیم زیر

آن خط کشیده بشه قرار می دیم. به این تگ ، تگ ابتدایی (Opening tag) میگن ، که عملیاتی را که شما می خواهید آغاز کنید رو شروع می کند. به منظور

پایان دادن به زیرخط باید از یک تگ پایانی استفاده کنید. یک تگ پایانی با این علامت شروع می شود: /> بقیه تگ مانند تگ ابتدایی هست . به مثال دقت کنید:

Guardiran.org

اگر بخواید متن بالا را با زیرخط در مرورگر خودتون ببینید باید اونو مثل خط روبرو در ویرایشگر متن خودتون بنویسید:

<u>Guardiran.org</u>

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

<img src="myimage.gif">

البته بعدا این تگ رو بیشتر توضیح میدیم الان فقط برای مثال بود . موارد دیگری هم با این وضعیت وجود دارن مثلاً که برای رفتن به خط بعدی

استفاده میشه ، <hr> که برای ایجاد یک خط افقی به کار میره و که برای رفتن به پاراگراف بعدی استفاده میشه.

در ضمن نیاز نیست که حتماً تگها با حروف بزرگ نوشته بشن. مثلاً همون هست. البته در نسخه های جدیدتر HTML توصیه می شه کدهای

HTML با حروف کوچک نوشته در XHTML هم نوشتن کدها با حروف کوچک الزامی است. فضای خالی هم بین تگها تأثیری نداره

مثال :

<u>         گارد ایران          </u>

خب الان این بالایی با این پایینی فرقی نداره

<u>گارد ایران</U>

اینجوری هم بنویسم فرقی نمیکنه

<u>
متن زیرخط دار
</u>

قالب پایه ای یک فایل HTML مثل پایین است. البته همه آنها را بعداً توضیح می دم.



<html>
<head>
<title>html قالب اصلی</title>
</head>
<body>
هر چیزی که اینجا قرار گیرد در صفحه شما قابل دیدن است
</body>
</html>

برای درک بهتر این قسمت سعی کنید تگها را به صورت جفتی در نظر بگیرید (از جایی که باز می شوند تا جایی که بسته می شن) اولین تگ <html>

است که علامت شروع یک متن HTML است و تگ پایانی آن <html/> است که همونطور که ممکن است حدس زده باشید نشانه پایان متن HTML هست.

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

تگ بعدی <head> هست. این تگ مشخص کننده بخشی هست که شما باید عنوان صفحه، کلمات کلیدی، و دیگر توضیحات خود برای این صفحه را در اون

قرار بدید. این بخش با <head/> به پایان می رسه. در مثال بالا تنها قسمت HEAD عنوان صفحه بود که با TITLE مشخص می شه .

تگ <title> به شما اجازه میده برای صفحه خود یک عنوان انتخاب کنید . این قسمت مورد استفاده موتورهای جستجو قرار می گیره و همون متنی است که

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

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

تگ <body> بخشی رو آغاز می کنه که در صفحه مرورگر شما به نمایش در می آید. این قسمت جایی هست که ما باید کار اصلی خود را در اون انجام بدیم

برای پایان دادن به این تگ از <body/> استفاده می کنیم. در مثال بالا متنی که در صفحه مرورگر دیده می شه به صورت زیر هست (البته در اینجا برای نوشته زیر رنگ و فونت نیز انتخاب شده که در قسمتهای بعد اون ها رو توضیح میدم :

هر چیزی که اینجا قرار گیرد در صفحه شما قابل دیدن است

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

برای طراحی میتونید به این آموزش مراجعه کنید

آموزش ساخت ‍ صفحه با برنامه web page maker و طراحي صفحه html

پایان

Mehran_FLash · 10 فروردین، ۱۳۹۴

به نام خدا

کار با متن ها

1- این تگ باعث می شه کلماتی که بین این تگ و تگ پایانی آن قرار دارن به صورت پر رنگ و بولد (Bold) دیده بشن. مثال:

<b>guardiran</b>

2- زیرخط (Underline):

<u>گارد ایران زیر خط دار </u>

3- حروف کج (Italic):

<i>این متن به صورت مورب دیده می شود</i>

4- حروف خط خورده:

<strike>این متن به صورت خط خورده دیده می شه</strike>

5- وسط چین:

<center>این متن در وسط خط نوشته می شود</center>

شما می تونید بیشتر از یک فرمان برای یک متن اجرا کنید. مثلاً وقتی که می خواین متنی به صورت پر رنگ و کج نوشته بشه برای این کار هر دو تگ

ابتدایی رو برای متن در ابتدای اون و تگهای پایانی رو در جایی که می خوایم پایان پر رنگی و کجی متن باشه قرار می دیم.

مثال :

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

آیا ترتیب قرار گرفتن تگهای پایانی مهم است؟ در جواب باید گفت در مثال بالا خیر، اما مواردی وجود داره که ترتیب قرار گرفتن تگها مهمه مثلاً قرار گرفتن تگ پایانی <HTML/> قبل از <BODY/> اشتباه است. شما با تمرین و تجربه می تونید این نکته را یاد بگیرید. شما می تونید برای جلو گیر از اشتباه HTML را به صورت زیر بنویسید:



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

اما این روش خسته کننده ست. در اینجا مهم نیست تگها به چه صورت باز و بسته بشن. اما نکته مهمی که باید در نظر داشته باشید اینه که متن ها تحت تأثیر تگهایی که قبل از آنها باز شده اند و بسته نشده اند قرار می گیرن. تأثیر یک تگ تمام می شود وقتی که تگ بسته شود.

مثال زیر رو در نظر داشته باشید:

<b><i><u>این متن پر رنگ، کج و دارای زیرخط است</u></i></b>

حالا اینو ببینید :

<u><i><b>این متن پر رنگ، کج و دارای</b></i>زیرخط است</u>

همان طور که دیدید متن بولد و ایتالیک زودتر از متن زیرخط دار به پایان رسید و این به این دلیل هست که تگهای پایانی بولد ()و ایتالیک () زود تر نوشته شدند و انتهای متن فقط توسط تگ زیرخط () تحت تأثیر قرار دارد.

متنها به صورت پیش فرض در سمت چپ صفحه به نمایش در میان. اما با استفاده از <CENTER> می توانیم اونها رو در وسط صفحه به نمایش در بیاریم . این تگ را هم می توان با دیگر تگها ترکیب کرد و نتایج جابی گرفت .

این رو هم ذکر کنم که مثال هایی که من مینویسم رو باید در نت پد بنویسید و با پسوند html سیو کنید و ببنید

پایان

Mehran_FLash · 11 فروردین، ۱۳۹۴

نوشتن سر فصلها

از تگهای سر فصل (HEADING) برای تیتر و عنوان مطالب استفاده می شه . به این مثال ها توجه کنید:

<h1>سرفصل بزرگ شماره 1 </h1>

بعدی

<h2>سرفصل بزرگ شماره 2 </h2>

<h3>سرفصل 3</h3>

<h4>در حال کوچک شدن</h4>

<h5>کوچکتر</h5>

<h6>بسیار کوچک</h6>

خب مثال ها گویای همه چیز بود و نیازی به توضیح نیست ...

وقتی که تگ در متنی وارد می شه بقیه اون خط به خط بعد منتقل می شه . در حقیقت تگ یا همان Line Break کاری مشابه فشردن کلید

Enter به همراه Shift را انجام می دهد. قابل ذکر است که این تگ نیازی به تگ پایانی ندارد. به یک مثال توجه کنید:

This is the first line <br> Here is the second line

مرورگر اصولاً تا وقتی که به کمبود فضا برای یک خط بر نخوره به خط بعدی نمیره . اما تگ مرورگر را مجبور می کنه به خط بعدی بره .مثلاً متن زیر رو تو ویرایشگر متن خود بنویسید و به صورت html ذخیره کنید، فقط یک خط رو در مرورگر خود میبینید :

تیم 


امنیتی

گار ایران

نتیجه : تیم امنیتی گارد ایران

برای اینکه نتیجه ای مشابه متن نوشته شده در ویرایشگر متن داشته باشیم، باید متن رو به این صورت بنویسیم:

تیم<br>
امنیتی<br>
گارد ایران

نتیجه :

تیم

امنیتی گارد ایران

تگ پاراگراف هست. این تگ باعث ایجاد یک فضای خالی عمودی بین دو خط در دو پاراگراف می شه اگر متوجه نشدید به مثال توجه کنید . درست مثل اینکه شما را دو بار تایپ کنید.از این تگ تو اول پاراگراف برای تمایز دو پاراگراف استفاده می شه . به مثال زیر توجه کنید:



خط اول از پاراگراف اول
<br>
خط دوم از پاراگراف اول
<p>
این هم پاراگراف جدید
</p>

نتیجه :

خط اول از پاراگراف اول

خط دوم از پاراگراف اول

این هم پاراگراف جدید

تگ پاراگراف هم نیازی به تگ پایانی نداره. اما شما می تونید برای فهم بهتر اونو در متن خود به کار ببرید. مثلاً به این صورت:

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

این متن هم نتیجه همون رو داره :



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

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

پایان

Mehran_FLash · 14 فروردین، ۱۳۹۴

کار کردن با فونتها و رنگ و اندازه آنها

اندازه فونت را می تونید با دستور زیر تعیین کنید :

<font size="x">متنی که می خواهیم اندازه آاونو تعیین کنیم</font>

به جای «x» عددی با علامت منفی یا مثبت قرار می گیره. وقتی که می خوایم یک متن بزرگتر دیده بشه از علامت مثبت و زمانی که می

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

<font size="+2">این متن بزرگتر دیده می شه</font>

برای کوچکتر کردن متن به این صورت عمل می کنیم:

<font size="-2">این متن کوچکتر دیده می شه</font>

خب مثال کاملا واضح هست و نیازی به توضیح بیشتر نداره ...

می تونیم رنگ مورد نظرمون رو با نام انگلیسی اون در فرمان بالا قرار بدیم یا از معادل هگزا دسیمال رنگ به جای اسم رنگ استفاده کنیم.

<font color="red">متن مورد نظر</font>

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

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

<font color="#ff0000">متن مورد نظر</font>

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

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

<font size="+2"><font color="gold">متن بزرگ و طلایی</font></font>

همچنین می تونید از شناسه های size و color در یک تگ استفاده کنید. مانند زیر:

<font size="+2" color="gold">متن بزرگ و طلایی</font>

شما می تونید رنگ فونت رو در تگ body تعریف کنید که بعداً به اون می پردازیم.

پایان

Mehran_FLash · 16 فروردین، ۱۳۹۴

ایجاد پیوند به دیگر صفحات با html

سلام بر همه دوستان خوبم

علت دیر آپدیت کردن تاپیک به این دلیل هست که چند تاپیک سنگین رو باهم باز کردم

بریم سراغ آموزش

برای ایجاد لینک از تگ زیر استفاده می کنیم:

<a href="url">متن لینک</a>

تگ <a> نشانه لینک هست. شناسه href مشخص کننده آدرس لینک هست ، <a/> نشانه بسته شدن تگ هست . متنی که بین این

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

یک صفحه وب مثلاً صفحه اصلی سایت گارد ایران با این آدرس: http://guardiran.org/forums/ لینکی را در صفحه خودتون داشته باشید باید

فرمان زیر رو در قسمت body صفحه خودتون در جایی که می خواید لینک به نمایش دربیاد قرار بدین:

<a href="http://guardiran.org/forums">تیم امنیتی گارد ایران</a>

لینکی رو که با فرمان بالا ساختید به صورت رنگی (بسته به تنظیمات مرورگر رنگ اون تعیین می شه) و زیرخط دار به وجود میاد. که این

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

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

اگر شما لینکی را که با این روش به وجود اومده کلیک کنید به صفحه مورد نظر میرید. با این روش شما می تونید به هر صفحه ای

لینک بسازید چون آدرس کامل اونو در لینک قرار دادید. برای مثال شما می تونید برای صفحات سایت خود در صفحه اصلی با این روش

لینکهایی بسازید.

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

روش میانبری استفاده کنید و فقط نام فایل مورد نظر رو به جای آدرس کامل اون بنویسید.

در مثال زیر فرض بر اینه که هر دو صفحه مبدأ و مقصد لینک تو یک پوشه قرار دارن. برای نمونه گارد ایران در همان پوشه ای قرار داره که

این صفحه قرار داره . نام این صفحه iran.php است. برای ایجاد یک لینک در این صفحه می تونیم به این صورت عمل کنیم:

<a href="iran.php">متن نمونه برای لینک</a>

پایان

Mehran_FLash · 19 فروردین، ۱۳۹۴

درود

وارد کردن عکس در صفحات html

برای این کار از این دستور استفاده می کنیم :

<img src="image.gif">

در این تگ IMG نشانه قرار گرفتن تصویر در صفحه و SRC آدرس محل قرار گرفتن فایل عکس هست. حتماً لازم نیست این عکس مربوط به سایت شما باشه یا در سرور

شما قرار داشته باشه، شما می توانید هر عکسی که در اینترنت قابل دسترسی باشه استفاده کنید (اگر قصد دارید صفحه خودتون رو در یک سایت اینترنتی قرار بدید)

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

مثلاً اگه عکس شما در این آدرس قرار داره http://guardiran/images/image.gif و صفحه ای که در حال ویرایش آون هستید در پوشه ای غیر از این قرار داره شما باید

تگ زیر رو برای اضافه کردن عکس به صفحه خود به کار ببرید:

<img src="http://guardiran.org/forums/images/image.gif">

اگر فایل html و عکس هر دو تو یک پوشه باشن می تونید برای راحتی در تایپ کردن از این تگ استفاده کنید:

<img src="image.gif">

پسوند فایل حتماً نباید gif. باشه . یعنی شما می تونید از فرمتی مثل jpg. هم استفاده کنید. این دو فرمت از بقیه پر استفاده تر هستن. اگه شما عکسی با فرمتی

غیر از این دو فرمت دارید می توانید از برنامه های ویرایش عکس از قبیل فتوشاپ برای تبدیل کردن آنها استفاده کنید.

برای نمونه من می خوام یک عکس را با نام guardiran.gif رو که در پوشه همین صفحه قرار داره رو به این صفحه اضافه کنم. در اینجا از این تگ استفاده کردم:

 <img src="guadriran.gif">

به این ترتیب یک تصویر رو در سمت چپ صفحه میبینیم (در صورتی که صفحه ما چپ به راست باشه). اگر می خواید تصویر در مرکز صفحه ( وسط خط ) قرار

بگیره باید از تگ <CENTER> در اطراف تگ تصویر استفاده کنید. مثل این :

<center>
<img src="guardiran.gif">
</center>

روشهای دیگری هم برای نمایش عکس در وسط صفحه وجود داره که با توجه به کم کاربرد شدن تگ <center> در نسخه چهارم HTML از آنها استفاده می شه. مثلاً

می تونید از تگ <div> با شناسه "align="center استفاده کرد.

به خاطر داشته باشید که آدرس محل عکس و نام اون به حروف کوچک و بزرگ حساس هستن. پس ممکنه اگه به جای image.jpg از IMAGE.JPG استفاده کنید ممکنه مرورگر شما عکسی را در صفحه نشون نده. پس در نوشتن اونها دقت کنید.

البته این به صورت مبتدی بود حرفه ای ترش باشه تو پست های آخر این تاپیک

موفق باشید

ورود

آموزش HTML کامل و با مثال

ارسال های توصیه شده

Mehran_FLash

لینک به دیدگاه

به اشتراک گذاری در سایت های دیگر

Mehran_FLash

لینک به دیدگاه

به اشتراک گذاری در سایت های دیگر

Mehran_FLash

لینک به دیدگاه

به اشتراک گذاری در سایت های دیگر

Mehran_FLash

لینک به دیدگاه

به اشتراک گذاری در سایت های دیگر

Mehran_FLash

لینک به دیدگاه

به اشتراک گذاری در سایت های دیگر

Mehran_FLash

لینک به دیدگاه

به اشتراک گذاری در سایت های دیگر

Mehran_FLash

لینک به دیدگاه

به اشتراک گذاری در سایت های دیگر

Mehran_FLash

لینک به دیدگاه

به اشتراک گذاری در سایت های دیگر

برای ارسال دیدگاه یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

ایجاد یک حساب کاربری

ورود به حساب کاربری

انجمن تیم امنیتی گارد ایران

شرکت گاردایران

شبکه های اجتماعی

نمادها

فعالیت ها

جریان فعالیت های من

Members Shop

اطلاعات مهم