آموزش طراحی سایت از صفر تا عمل

گام چهارم :

در این مرحله استفاده از تگ های HTML آموزش میدیم

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

HTML :

• HTML مخفف زبان نشانه گذاری فرا متنی است ( hyper text markup language )
• یک فایل HTML باید دارای پسوند html. یا html. باشد
• یک فایل HTML می تواند توسط یک ویرایشگر متنی ساده ساخته شود

چگونه یک فایل HTML بسازیم ؟

ابتدا در یک قسمت از فضای خالی دسکتاپ ویندوز راست کلیک نمایید سپس کزینه NEW --> Text Document را انتخاب نمایید


سپس نام فایل و پسوند را تغییر دهید. نام فایل را به دلخواه هرچه میخواهید نامگذاری کنید ولی پسوند باید HTML باشد


حال روی فایلی که ایجاد کردیم راست کلیک نموده open with --> notepad را انتخاب کنید


حالا متن زیر را وارد Notepad کنید

                        < html>   
                        < head>   
                        < title>سایت من < /title>   
                        < /head>   
                        < body>   
                        به نام خدا< br />
                        < b> صفحه اول سایت من< /b>   
                        < hr />
                        < p>این یک پاراگراف است< /p> 
                        < h1>سر تیتر بزرگ< /h1> 
                        < h6>سر تیتر بسیار کوچک< /h6> 
                        < a href="page2.htm" > صفحه بعدی < /a> 
                        < /body>   
                        < /html>   
                  

تگ HTML

اولین برچسب در فایل HTML شما ، < html> است.این برچسب به مرورگر شما می فهماند که این آغاز یک فایل HTML است، آخرین برچسب در فایل شما < html/> است.این برچسب به فایل شما می فهماند که این انتهای یک فایل HTML است.

تگ Head

این تگ بعد از تگ HTML می آید. سرتیتر سایت ، کدهای CSS و کدهای جاوا اسکریپت را میان این تگ مینویسیم

تگ Title

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

تگ Body

متنی که در مرورگر نشان داده خواهد شد ، متنی است که بین برچسب < body>< /body> نشان داده خواهد شد. تمام تگهای خود را باید در ما بین این جایگذاری کنید.

عناصر HTML

تگ < b>

هدف برچسب < b>< /b> این است که تعریف کند متن HTML باید بصورت برجسته نشان داده شوند.

تگ < br>

تگ پرش به خط بعد < Br />
یک خط خالی را ایجاد می کند

سر تیترها با برچسب های < h1>تا< h6>

برای زمانی که بخواهید یک متن را بسیار برجسته و خاص نمایش دهید.
< h1>بیانگر بزرگترین سرتیتر و < h6> بیانگر کوچکترین سر تیتر است
< h2>< / h2> - < h3> < / h3> - < h4> < / h4> - < h5> < / h5>
. HTML بطور خودکار فضای خالی اضافی به قبل و بعد از سر تیترها اضافه می کند

پاراگراف ها < p>

پاراگراف ها با برچسب < p>< /p> معرفی می شوند.HTML بطور خودکار فضای خالی اضافی به قبل و بعد از یک پاراگراف اضافه می کند.

تگ خط افقی < hr />

یک خط افقی را رسم می کند

تگ توضیحات در < !--This is a comment-->

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

خلاصه :

برچسب های پایه
برچسب ها	توضیحات
< html>	یک پرونده HTML را معرفی می کند
< body>	بدنه پرونده را معرفی می کند
< h1> to < h6>	سر تیتر 1 تا 6 را معرفی می کند
< p>	یک پاراگراف را معرفی می کند
< br>	یک خط خالی را معرفی می کند
< hr>	یک خط افقی را معرفی می کند
< !-- -->	توضیحات را معرفی می کند

تگ لینک < a>

این تگ یک لینک ایجاد میکند به فرمی جدید. مثال شما در این یک فرم هستید میخواهید بروید به صفحه دوم آن فرم. برای ساخت آن از این تگ لینک استفاده میکنیم.
< a href="AddresPage2.html" > Page2 < /a>

تگ جدول < Table>

جداول بوسیله برچسب< table>معرفی می شوند.
هر جدول به سطرها (بوسیله برچسب < tr>)
و هر سطر به سلول های داده تقسیم می شود (بوسیله برچسب < td>)
حروف td بیانگر داده جدولی (table data) هستند که حاوی سلول داده است.
یک سلول داده می تواند حاوی متن ، عکس ، لیست ها ، پاراگراف ها ، فرم ها ، خط های افقی و جدول ها و... باشد.

                        < table border='1' >
                            < tr> 
                                < td>خط اول ، سلول یک< /td>
                                < td>خط اول ، سلول دوم< /td>
                            < /tr>
                            < tr>
                                < td>خط دوم ، سلول یک< /td>
                                < td>خط دوم ، سلول دوم< /td>
                            < /tr>
                        < /table>	 
                    

تگ < DIV>

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