آموزش html از مقدماتی تا پیشرفته

**Mohamad** · 09-14-2011 02:27 PM

بخش اول ----------------------

فهرست::::::::::

تگ چیست؟ / چه چیزی احتیاج داریم ؟ / ساخت اولین صفحه وب / html یا htm / سرفصل و یا Head line / پاراگراف / پیوند و یا لینک ها / تصاویر / عناصر HTML / تگ های HTML تو در تو / تگهای پایانی را فراموش نکنید / عناصر HTML حرف بزرگ یا کوچک

------------------------------------------------------------------------------------------------------------------------------------------
تگ چیست؟
تگها کلماتی هستند که به وسیله یک جفت علامت <> احاطه شده اند ماننده <html> و معمولا به صورت یک جفت میباشند
ماننده <b> و <b/>
اولین تگ ( تگ ابتدایی) و دومین تگ (تگ انتهایی ) نامیده میشود . تگ ابتدایی تگ شروع و یا تگ باز و تگ انتهایی تگ پایانی و یا تگ بسته نیز نامیده میشود

منظور از یک مرورگر وب مانند internet explorer و firefox وسیله ایست برای خواندن کد های HTML و ترجمه و نمایش آنها به صورت صفحات وب . یک مرورگر تگ ها را نشان نمی دهد بلکه انها صفحه وب استفاده میکند

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

کد HTML:

<html>
    <body>
            <h1> p30ask   </h1>
            <p>  مرکز تخصصی  آموزش کامپیوتر و اینترنت </p>
    </body>
</html>

**Mohamad** · 09-14-2011 02:29 PM

متن بین <html>و <html/> صفحه وب را مشخص میکند و متن <body> و <body/> قسمت قابل روت یک صفحه وب را نشان میدهد . متن بین <h1> و <h1/> به صورت یک سر فصل نمایش داده مشود و متن بین <p> و <p/> به صورت یک پاراگراف نمایش داده میشود

چه چیزی احتیاج داریم ؟

شما برای یادگیری HTML احتیاج به هیچ نرم افزر پیچیده ای ندارید در این خود آموز ما از نرم افزر notepad موجود در windows برای نوشتن و ویرایش کد های HTML استفاده میکنیم و اعتقاد داریم که این بهترین راه برای یاد گیری HTML میباشد

کد نویسان حرفه ای از نرم افزار های front page و dream weaver و notepad++ برای تولید صفحات وب استفاده میکنن
ساخت اولین صفحه وب
برای شروع شما نرم افزار notepad خود را از ادرس accessories<program<start باز کنید و متن زیر را درون آن بنویسید

تذکر خیلی مهم::: اگر میخوای HTML یاد بگیری متن زیر کپی نکن تایپ کن خودت اگر میخوای کپی کنی تا 20 سال دیگه هم یاد نمیگیری

کد HTML:

<html>
    <body>
            <h1> this is my main page</h1>
            <p>this is some test </p>
            <p><a href="http://p30ask.com">full software download center </a></p>
    </body>
</html>

پس از اتمام ، نوشته مورد نظر خود را با پسوند های htm و یا HTML با نام phpsupport page1 ذخیره کنید

این اولین صفحه وب ساخته شده توسط شما است .

**Mohamad** · 09-14-2011 02:33 PM

htm یا html ؟

برای ذخیره یک صفحه وب شما باید یکی از این پسوند ها را انتخاب کنید htm.html

در عمل این دو پسوند تفاوتی با هم ندارند . htm یک پسوند قدیمیست و مربوط به زمانی است که پسوند ها از 3 حرف تشکیل میشوند ولی امروزه بهتر است از پسوند html استفاده کنیم

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

برای یاد گیری بهتر از چندین مثال استفاده میکنیم

سرفصل و یا head line

کد HTML:

<html>
        <body>
                <h1> this is heading </h1>
                <h2> this is heading </h2>
                <h3> this is heading </h3>
        </body>
</html>

سرفصلها توسط تگ های <h1> تا <h6> علامت گذاری میشود

پاراگراف

کد HTML:

<p> this is heading </p>
                <p> this is heading  test</p>

پاراگراف ها توسط تگهای <p> علامت گذاری میشود

پیوند ها و یا لینک ها

کد HTML:

<a href="www.p30ask.com"> internetstar </a>

link ها و یا پیوند ها توسط تگ <a> علامت گذاری میشود این تگ ها دارای نشانه هایی میباشد که در قسمت های بعدی توضیح داده خواهد شد .

تصاویر

کد HTML:

<img src="p30ask .gif" width"104" height="142"/>

تصاویر توسط تگ </img> علامت گذاری میشوند که دارای نشانه ها و تفاوت هایی با 3 تگ قبلی است که در ادامه توضیح داده میشود (ماننده نام و اندازه تصاویر )

**Mohamad** · 09-14-2011 02:35 PM

عناصر HTML

عناصر HTML اجزاء سازنده یک مجموع HTML هستند .عنصر HTML یعنی هر چیزی که بین تگ ابتدایی و انتهایی وجود دارد

تگ شروع تگ باز و تگ پایانی تگ بسته نیز نامیده میشود

عناصر و یا اجزاء یک مجموعه HTML دارای نظام و قواعد خاصی هستند که تعدادی از انها در زیر گفته میشود

عناصر HTML با یک تگ باز شروع می شود .
عناصرHTML با یک تگ بسته به پایان میرسد.
محتوای عناصر در بین تگهای ابتدایی و انتهایی قرار میگیرد
بعضی از عناصر HTML محتوایی ندارن .
این عناصر در تگ ابتدایی بسته میشود ماننده </br>
بعضی از عناصرHTML دارای مشخصات و توانایی هایی هستند

البته در مورد توانایی های و مشخصات عناصر HTML در ادامه به صورت کامل توضیح داده خواهد شد.

تگهای HTML تو در تو

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

کد HTML:

<html>
        <body>
                <p>  site p30ask.com </p>
                
        </body>
</html>

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

کد HTML:

<p>  site p30ask.cpm

**Mohamad** · 09-15-2011 10:04 PM

تواناییهای و خصوصیات عناصر HTML

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

کد HTML:

<a href="http://p30ask.com"> p30ask web site</a>

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

تگهای head line و یا سر فصلها
سرفصلها توسط تگهای h1 تا h6 علامت گذاری میشوند تگ h1 باعث ایجاد اندازه بزرگتری نسبت به h6 می شود

کد HTML:

<h1> p30ask web </h1>
<h2> p30ask web </h2>
<h3> p30ask web </h3>
<h4> p30ask web </h4>
<h5> p30ask web </h5>
<h6> p30ask web </h6>

مرورگر ها به صورت اتو ماتیک یک خط فاصله بعد از این تگها ایجاد میکند.
اهمیت تگ های head line
از این تگ ها برای بزرگ و یا کوچک کردن نوشته ها استفاده نکنید بلکه برای موضوعات پر اهمیت از انها استفاده کنید و موضوعات و نوشته های پر اهمیت را داخل انها قرار دهید .
موتور های جستجو مانند گوگل و یاهو برای پی بردن به موضوع وب سایت و صفحه وب سایت شما از نوشته هایی که داخل این تگ ها وجود دارد استفاده میکنند
ترتیب اهمیت این تگ هابه ترتیب بیشتر از h1 به h6 می رسد
تگهای خط کشی و یا خط (line)

تگ </hr> برای کشیدن خط های افقی استفاده میشود

کد HTML:

<h1> p30ask web </h1>
<hr/>
<h2> p30ask web </h2>
<hr/>
<h3> p30ask web </h3>
<hr/>
<h4> p30ask web </h4>
<hr/>
<h5> p30ask web </h5>
<hr/>
<h6> p30ask web </h6>

وشتن توضیحات برای کد های HTML

این توضیحات باید به صورتی در درون کد های HTML قرار گیرد که توسط مرورگر ها خوانده نشود بنابر این توضیحات را به این صورت نوشته میشود

کد HTML:

<!--  محل نوشتن توضيحات -->

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

چگونه کد های HTML یک صفحه وب را ببینیم ؟
برای این کار شما میتوانید در صفحه مرورگر تان گزینه view را از نوار ابزار انتخاب کنید و سپس گزینه view source و یا source را انتخاب کنید در این حالت یک پنجره جدید باز میشود که کد های HTML را به شما نشان میدهد

**Mohamad** · 09-15-2011 10:30 PM

تگ های پاراگراف

پاراگراف ها توسط تگهای <p> علامت گذاری میشن

کد HTML:

p> this is a paragraph </p>
<p> this is a another paragraph </p>

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

تگهای شکستن خط
برای ایجاد شکست در یک خط و رفتن به خط بعدی و ایجاد فاصله از تگ </br> که یک تگ خالی است استفاده میکنیم این نکته قابل ذکر است که کلیه فاصله ها در بین تگهای html در هنگام نمایش توسط مرورگر از بین میرود

کد HTML:

<p>    this is a <br/>    paragraph </p>

به طور مثال فاصله ای که قبل از محتوای این عصر HTML وجود دارد در مروگر از بین میرود

تگ های نوع نمایش نوشته ها
تگ هایی ماننده <i> و <b> باعث میشوند که نوشته ها به صورت italic و یا bold نمایش داده شود این تگ ها را تگهای نوع نمایش میگویند

کد HTML:

<p><b>this is a paragraph</b></p>
<p><strong>this is a paragraph</strong></p>
<p><big>this is a paragraph</big></p>
<p><em>this is a paragraph</em></p>
<p><i>this is a paragraph</i></p>
<p><small>this is a paragraph</small></p>
<p> this is <sub> subscript</sub> and<sup>superscript</sup></p>