آموزش کامل HTML – قسمت 15: فرم ها

توسط با بدون دیدگاه آموزش کامل HTML

فرم ها در html

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

<form>

محتویاتی که قرار است در قالب فرم ارسال شوند

<form/>

برای وارد کردن اطلاعات در داخل فرم از تگ <input> استفاده می‌کنیم. این تگ در واقع به شکل‌های مختلف اطلاعات را از ما می‌گیرد و به سرور ارسال می‌کند. تگ‌های اینپوت انواع مختلفی دارند که در ادامه به آن‌ها خواهیم پرداخت.

انواع ورودی ها

همانطور که گفتیم، ورودی‌هایی که درون فرم‌ها قرار دارند، انواع مختلفی دارند. این ورودی‌ها را input می‌گوییم و با تگ <input> می‌نویسیم. در واقع ما به شکل‌های مختلفی می‌توانیم وروردی‌ها را از کاربران دریافت کنیم. به همین خاطر در کنار تگ <input> کلمه‌ یا صفتی به نام Type قرار می‌گیرد که ما به کمک آن‌ مشخص می‌کنیم قصد دریافت چه اطلاعاتی را از کاربر داریم(type یک اتریبیوت برای تگ input است). این موضوع را در زیر نشان داده‌ایم.

<input  type= “text”>

<input  type= “radio”>

<input  type= “submit”>

ورودی متن

<“input  type= “text> برای دریافت متن به عنوان ورودی به کار می‌رود. در واقع هر چیزی که به عنوان متن محسوب شود (مثل نام کاربری، نام فرد، سن و سال یا هر چیز دیگری که متن باشد) در این ورودی‌ها قرار می‌گیرد.

نام: <br>

<input type="text"  value="پردیس وردپرس"><br>

نام خانوادگی: <br>

<input type="text"  value="پردیس وردپرس">

اتریبیوت value در فرم‌ها مقدار پیش فرضی را برای ورودی قرار می‌دهد. مثلا در فرم بالا مقدار پیش فرض نام و نام خانوادگی، پردیس وردپرس است.

دکمه های رادیویی

نوع دیگر ورودی‌ها radio است. رادیوها در واقع دکمه‌هایی هستند که در مواقعی که قصد ایجاد حق انتخاب برای کاربر داریم به کار می‌بریم.

<input  type="radio" name="1" value="html" checked> اچ تی ام ال

<br>

<input  type="radio" name="1" value="CSS"> CSS

در صورت اضافه کردن اتریبیوت checked در این نوع ورودی، گزینه به صورت پیش فرض انتخاب خواهد شد. برای مثال گزینه اچ تی ام ال در مثال بالا به صورت پیش فرض انتخاب شده است.

چک باکس

<“input  type= “checkbox> برای ایجاد چک باکس به کار می‌رود. در واقع با استفاده از دکمه‌های دایره‌ای رادیو، معمولا تنها یک گزینه را می‌توان همزمان استفاده کرد ولی در چک باکس شما می‌توانید هر چند تا از گزینه‌ها که دوست دارید را انتخاب کنید.

<input  type="checkbox" >پردیس وردپرس

<br>

<input  type="checkbox">طراحی سایت

رمز عبور

<“input type= “password> برای ورود رمز عبور به کار می‌رود. این نوع ورودی متن‌هایی که در فیلد ورودی نوشته می‌شود را به صورت رمزگذاری شده و دایره‌های مشکی نمایش می‌دهد.

نام کاربری: <br>

<input type="text" ><br>

رمز عبور: <br>

<input type="text" >

دکمه ها

<“input  type= “submit> نوع دیگر ورودی‌ها submit است. این ورودی‌ که در واقع یک دکمه است، برای ثبت ورودی‌های قبلی به کار می‌رود. در واقع شما بعد از اینکه ورودی‌های قبلی(متنی یا رادیو) را پرکردید در نهایت با فشردن دکمه ثبت یا submit آن‌ها را ثبت و ذخیره می‌کنید

نام کاربری: <br>

<input type="text" ><br>

رمز عبور: <br>

<input type="text" >

<"input  type= "submit>

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

آموزش کامل HTML – قسمت 14: نمایش کامل یک سایت

توسط با بدون دیدگاه آموزش کامل HTML

در این جلسه از آموزش html با پردیس وردپرس با تگ یا المان iframe آشنا می شویم. شما می‌توانید با کمک این تگ، یک صفحه کامل را با تمامی محتویات درون یک پنجره مشخص در صفحه خود نمایش دهید. از این تگ خصوصا در استفاده از سرویس‌هایی خارج از صفحه، همچون سرویس‌های اشتراک گذاری ویدیو استفاده می‌شود.

المان iframe

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

قانون کلی نوشتن این تگ به صورت زیر است:

<iframe src=”/url”></iframe>

به جای url آدرس صفحه ای که می خواهیم نمایش دهیم را وارد می کنیم. بعد از آن دیگر نیازی به هیچ کاری نیست و تگ را می‌بندیم. بدین ترتیب صفحه یا سرویس مورد نظر شما در صفحه جدید به نمایش در خواهد آمد. می توانیم برای کنترل بهتر این المان, از اتریبیوت استایل برای آن استفاده کنید و طول و عرض آن را به دلخواه تعیین کنید. برای این کار بعد از اتریبیوت src, از اتریبیوت style استفاده می‌کنیم.

<iframe src=”/url” style=” “></iframe>

برای مثال ما طول و عرض ۱۰۰ پیکسل را برای صفحه‌ی مورد نظرمان برگزیده‌ایم:

<iframe src=”آدرس سایت” style=”width=100px; height=”100px”></iframe>

آموزش کامل HTML – قسمت 13: المان div

توسط با بدون دیدگاه آموزش کامل HTML

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

قبل از آشنایی با این المان باید با مفاهیم بلاک و اینلاین در html آشنا می شویم.

المان های بلاک و اینلاین

المان های html به دو دسته بلاک و  اینلاین یا درون خطی تقسیم می شوند. در المان بلاک، المان مورد نظر کل فضایی را که در اختیار دارد را اشغال می کند و اجازه نمی دهد المان دیگری در کنار آن قرار بگیرد. مثلا المان پاراگراف را امتحان کنید؛ متوجه خواهید شد که نمی توانید همزمان دو المان پاراگراف را در یک خط به کار ببرید. یعنی هر المانی که بعد از تگ <p> بیاید در خط بعدی قرار می گیرد. به همین خاطر به این نوع از المان ها بلاک گفته می شود.

نوع دیگر، المان های اینلاین هستند که یک خط کامل را برای خود اشغال نمی کنند. در واقع کل فضایی را که در اختیار دارند اشغال نمی کنند. از جمله این المان ها می توان به <link> ، <img> ، <a> ، <td> و <b> اشاره کرد.

المان div

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

تگ div - پردیس وردپرس

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

<div style="background-color:کد رنگ;">
      <h1 style=" text-align:center">عنوان</h1>
</div>

در مثال فوق دیدید که از اتربیوت استایل برای شکل ظاهری المان استفاده کردیم.

تا اینجا با مفهوم کلی المان div برای تقسیم بندی صفحات وب آشنا شدیم. برای استفاده بیشتر باید با css آشنا باشید. بنابراین به آموزش کامل css در سایت مراجعه کنید.

آموزش کامل HTML – قسمت 12: تگ span

توسط با بدون دیدگاه آموزش کامل HTML

تگ <span> کاربرد زیادی در شخصی سازی متن ها و صفحات html دارد. فرض کنید که می خواهید متنی بنویسید که هر قسمت آن رنگی مختلف داشته باشد، نوشتن آن با تگ <p> کار سختی است. در این موقع از تگ <span> استفاده می کنیم.

تگ <span>

اسپن یک المان اینلاین است. این یعنی بر خلاف <p> المان شما به خط بعدی نمی رود. <span> مانند یک جعبه برای متن شماست. در واقع اسپن قسمتی از متن شما را در بر می گیرد و می توانید استایل دلخواه خود را به آن بدهید. البته توجه داشته باشید که <span> به خودی خود تغییری در ظاهر متن شما ایجاد نمی کند و باید به آن استایل بدهید.

برای مثال در زیر متنی را با تگ <p> می نویسیم و سپس قسمتی که می خواهیم از بقیه متن متفاوت باشد را در تگ <span> با رنگ و فونت دلخواه قرار می دهیم.

<p>نوشته می شود<span  style="color: red;  font-family: Yekan;">رنگ و فونت دلخواه</span>متن با</p>

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

متن در <span>

آموزش کامل HTML – قسمت یازدهم: تغییرات در جدول

توسط با بدون دیدگاه آموزش کامل HTML

در قسمت قبل با جدول ها در html آشنا شدیم. جدول هایی که در جلسه قبل تولید می کردیم از ظاهر زیبایی برخوردار نبودند. در این جلسه قصد داریم تغییراتی در ظاهر و زیبایی جدول هایمان داشته باشیم. در این قسمت از آموزش قصد داریم شما را با دو تغییر اساسی در جداول آشنا کنیم.

اضافه کردن قاب

برای قرار دادن قاب دور جدول ها تنها کافی است که از اتربیوت border در تک <table> استفاده کنیم. در مثال زیر ما یک قاب یک پیکسلی دور جدول کشیده ایم که این قاب بین تمام سلول ها نیز اعمال می شود.

<table  border="1px" >

    <tr><!-- شروع خط اول  -->

          <td>خط اول - ستون اول </td>          

          <td>خط اول - ستون دوم</td>  

         <td>خط اول - ستون سوم</td>       

   </tr><!-- پایان خط اول  -->

    <tr> <!-- شروع خط دوم -->

            <td>خط دوم - ستون اول </td>      

           <td>خط دوم- ستون دوم</td>        

            <td>خط دوم - ستون سوم</td>    

   </tr><!-- پایان خط دوم -->

 <tr> <!-- شروع خط سوم-->

            <td>خط سوم - ستون اول </td>      

           <td>خط سوم - ستون دوم</td> 

           <td>خط سوم - ستون سوم</td>

</tr><!-- پایان خط سوم-->

</table>

نکته: می توانیم از طریق اضافه کردن استایل نیز قاب دور جدول را رسم کنیم.

<table style=”border:1px;”>

تیتر های جدول

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

<table  border="1px" >

    <tr><!--    - شروع خط مربوط به عناوین  -->

          <th>خط عنوان - نام </th>          

          <th>خط عنوان - نام خانوادگی</th>  

         <th>خط عنوان - سن</th>       

   </tr> <!--    - پایان خط مربوط به عناوین  -->

    <tr> <!-- شروع خط دوم -->

            <td>خط دوم - ستون اول </td>      

           <td>خط دوم- ستون دوم</td>        

            <td>خط دوم - ستون سوم</td>    

   </tr><!-- پایان خط دوم -->

 <tr> <!-- شروع خط سوم-->

            <td>خط سوم - ستون اول </td>      

           <td>خط سوم - ستون دوم</td> 

           <td>خط سوم - ستون سوم</td>

</tr><!-- پایان خط سوم-->

</table>

همان طور که در مثال فوق دیدید تگ <th> مربوط به تیتر ها یا همان عناوین جدول است و بهتر است که در خط اول جدول قرار گیرد. ولی ما می توانیم عنوان های مختلف را برای هر سطر و به صورت جداگانه استفاده کنیم. بدین ترتیب هر ستون جدول می تواند یک هدر مخصوص داشته باشد.

خاصیت colspan

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

<table  border="1px" >

    <tr><!-- شروع خط اول  -->

          <td>خط اول - ستون اول </td>          

          <td>خط اول - ستون دوم</td>  

         <td>خط اول - ستون سوم</td>       

   </tr><!-- پایان خط اول  -->

    <tr> <!-- شروع خط دوم -->

            <td>خط دوم - ستون اول </td>      

           <td>خط دوم- ستون دوم</td>        

            <td>خط دوم - ستون سوم</td>    

   </tr><!-- پایان خط دوم -->

 <tr> <!-- شروع خط سوم-->

            <td  colspan="3">خط سوم و یکپارچه کردن سه ستون در یک ستون </td>      

    

</tr><!-- پایان خط سوم-->

</table>

عددی که در مقابل colspan قرار می گیرد نشان دهنده تعداد ستون هایی است که می خواهیم در سطر مورد نظر یکی شوند.

آموزش کامل HTML – قسمت دهم: جدول ها

توسط با بدون دیدگاه آموزش کامل HTML

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

چگونه در html جدول ایجاد کنیم؟

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

مراحل ایجاد جدول در html

  1. بعد از تگ <table> تگ <tr> را برای تولید یک سطر جدول می نویسیم.
  2. با استفاده از تگ <td> فیلد های سطر جاری یا عناوین هر ستون جدول را مشخص می کنیم.

توجه داشته باشید که برای هر سطر جدول باید یک تگ <tr> بنویسیم که به ازای هر فیلد یک تگ <td> در داخل آن قرار می گیرد.

<table>

<tr> <--شروع خط اول-->

<td>خط اول - ستون اول</td>


<td>خط اول - ستون دوم</td>

</tr>

<tr> <--شروع خط دوم-->

<td>خط دوم - ستون اول</td>

<td>خط دوم - ستون دوم</td>

</tr>

</table>

در اچ تی ام ال از علامت <– متن مورد نظر –> برای کامنت گذاری استفاده می شود. هر چیزی که در کامنت قرار دهیم توسط مرورگر در نظر گرفته نمی شود. از کامنت ها برای توضیح در کدها استفاده می کنیم.

در مورد جداول در اچ تی ام ال نکات بیشتری وجود دارد که در جلسات آینده به آن ها اشاره می کنیم.

آموزش کامل HTML – قسمت هشتم: فونت ها

توسط با بدون دیدگاه آموزش کامل HTML

فونت ها

برای ایجاد تغییرات در فونت ها باید از استایل در html استفاده کنیم. روش استفاده از استایل به صورت زیر است:

<tagname style = “style1; style2;”>محتوا</tagname>

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

<h1 style = “font-family: tahoma; color: blue;”>متن عنوان</h1>

font-family نوع فونت و color رنگ آن را مشخص می کند. توجه داشته باشید که امکان نمایش فونت پیش فرض در صورت اشتباه نوشتن نام فونت وجود دارد. برای رنگ ها از کد آن ها نیز می توانید استفاده کنید.

برای تغییر در اندازه فونت از خاصیت font-size استفاده می کنیم. اندازه فونت را معمولا بر حسب پیکسل px بیان می کنیم. البته معیارهای دیگری مانند em نیز وجود دارند.

در مثال زیر متنی با فونت تاهما رنگ 11111# و اندازه 12 پیکسل نمایش می دهیم.

<p style = “font-family: tahoma; color: #11111; font-size: 12px;”>متن مورد نظر</p>

هم تراز کردن متن

اتربیوت مورد نظر برای هم تراز کردن متن text-align می باشد. این خصوصیت به شما کمک می کند که متن خود را راست چین، وسط چین یا چپ چین کنید.

<p style = “text-align: right;”>متن راست چین</p>

<p style = “text-align: center;”>متن وسط چین</p>

<p style = “text-align: left;”>متن چپ چین</p>

پر رنگ کردن متن

برای پر رنگ کردن متن از تگ های <b></b> و <strong></strong> استفاده می کنیم و متن مورد نظر را در بین این تگ ها قرار می دهیم.

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

<p> آموزش <em>اچ تی ام ال</em> با <b>پردیس وردپرس</b> </p>

پایان جلسه هشتم

آموزش کامل HTML – قسمت هفتم: لیست ها

توسط با بدون دیدگاه آموزش کامل HTML

لیست ها در html

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

  • لیست های نامنظم یا unorderd که دارای ترتیب دلخواه است
  • لیست های منظم یا orderd که دارای ترتیب خاصی مثلا بر اساس اعداد یا حروف الفبا مرتب می شود
  • نوع سوم نیز لیست توضیحات است که بعد از عنوان، توضیحات نوشته می شود و چندان کاربردی ندارد

لیست نامنظم

<ul>

<li>متن آیتم اول</li>

<li>متن آیتم دوم</li>

<li>متن آیتم سوم</li>

</ul>

اگر لیست های html را دیده باشید حتما متوجه شده اید که در کنار لیست ها معمولا یک علامت دایره توپر دیده می شود. این علامت یا آیکون را می توان با استفاده از صفت list-style-type تغییر داد. این اتربیوت به تگ ابتدایی <ul> اضافه می شود.

<ul list-style-type: “آیکون موردنظر”>

  • disc دایره تو پر پیش فرض
  • circles دایره
  • squares مربع
  • noun بدون آیکون

لیست منظم

<ol>

<li>آیتم اول</li>

<li>آیتم دوم</li>

<li>آیتم سوم</li>

</ol>

از خاصیت list-style-type در لیست های ترتیبی می توان به صورت زیر زیر استفاده کرد:

  • 1 برای مرتب سازی بر اساس اعداد
  • A مرتب سازی بر اساس حروف بزرگ
  • a مرتب سازی بر اساس حروف کوچک
  • I مرتب سازی با اعداد یونانی
  • i مرتب سازی با اعداد یونانی کوچک

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

<ul list-style-type: “1”>

 پایان قسمت هفتم

آموزش کامل HTML – قسمت دوم: تگ پاراگراف

توسط با بدون دیدگاه آموزش کامل HTML

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

تگ پاراگراف

برای نوشتن متن در صفحات وب از این تگ استفاده می کنیم. تگ پاراگراف با <p> شروع می شود و به <p/> ختم می شود و  متن مورد نظر بین آن ها قرار می گیرد. روش استفاده از آن به صورت زیر است.

<p> متن یا جمله مورد نظر </p>

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

<p> سلام </p>

<p> آموزش کامل اچ تی ام ال با پردیس وردپرس </p>

خروجی آن به صورت زیر در مرورگر نمایش داده می شود.

سلام

آموزش کامل اچ تی ام ال با پردیس وردپرس

اگر به تگ کد فوق دقت کنید متوجه می شوید که برای نشان دادن نوشته در دو خط ما از دو تگ پارگراف استفاده کردیم، علت این امر این است تگ <p> متن را بدون فاصله اضافی در نظر می گیرد و اگر هر دو خط را در یک تگ بنویسیم کل متن در یک خط و پشت سر هم نمایش داده می شود. برای رفع این مشکل ما از دو تگ <p> استفاده کردیم. (توجه داشته باشید که نوشتن تگ دوم در خط بعدی الزامی نیست و بصورت خودکار متن تگ دوم در خط بعدی نمایش داده می شود)

تگ <pre>

این تگ بر خلاف تک پی هر آنچه که در آن نوشته می شود را بدون تغیر نمایش می دهد، یعنی فاصله های اضافی و یا اینتر بین متون را در خروجی نشان داده می شود. از این تگ برای بسیاری از کارها از جمله نمایش یک کد در صفحه یا متون شعری استفاده می‌شود. همچنین این تگ معمولا با فونت Courier به نمایش در می‌آید. کارکرد این تگ را می توانید آزمایش کنید و نتیجه را در مروگر مشاهده کنید.

<pre> متن مورد نظر </pre>

تگ <br>

از این تگ برای انتقال متن به خط بعدی استفاده می شود، در واقع کاربرد کلید اینتر را دارد. از این تگ می‌توان برای اینتر زدن در متن یا به طور کلی ایجاد یک خط جدید در هر المان اچ‌تی‌ام‌ال استفاده نمود. تگ <br> به همین شکل و بدون تگ پایانی استفاده می شود. مثال:

<p> متن خط اول <br> متن خط دوم </p>

خروجی:

متن خط اول

متن خط دوم

پایان قسمت دوم آموزش html.

آموزش کامل HTML – قسمت اول: آشنایی کلی

توسط با بدون دیدگاه آموزش کامل HTML

مقدمه

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

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

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

این کار بسیار ساده است و به ابزار خاصی نیاز ندارد، شما با نوت پد ویندوز هم می توانید یک سند html بسازید. ولی پیشنهاد می کنیم که از ++NotPad استفاده کنید، ویرایشگرهای دیگری نیز هستند که شما می توانید از آنها استفاده کنید.

  1. نوت پد را باز کرده و هر متنی که دوست دارید در آن بنویسید.
  2. حالا آن را با پسوند html ذخیره کنید.
  3. موقع ذخیره کردن فایل اینکدینگ فایل را روی utf-8 قرار دهید.
  4. فایل را از هرجایی که ذخیره کردید اجرا کنید.

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

تگ های html:

تمام کدهای html بین دو علامت <> قرار می گیرند که به آن ها تگ می گوییم. گاهی به تگ html المان هم می گویند. از تگ ها به صورت زیر استفاده می کنیم.

<tagname> محتوا </tagname>

به تگ اول opening tag و به تگ دوم closing tag گفته می شود، قالب تگ های html به صورت فوق می باشند. هر چیز در تگ مربوط به خودش قرار می گیرد.

کد یک صفحه ساده html:

<!DOCTYPE html>

<html>

<head>

<title>  عنوان صفحه | پردیس وردپرس  </title>

</head>

<body>

<h1>  تگ عنوان 1 </h1>

<p>  تگ پاراگراف یا متن  </p>

</body>

</html>

توضیح کد:

  • <!DOCTYPE html> جمله اول هر سند html می باشد، این جمله باید همیشه در ابتدای سند اچ تی ام ال قرار گیرد.
  • همه محتویات یک صفحه html در بین تگ های <html> قرار می گیرد، ازجمله تگ های دیگر مانند تگ هد یا …
  • تگ <head> اطلاعات ابتدایی در رابطه با صفحه را در بر می گیرد. مثلا نام نویسنده صفحه یا اطلاعاتی در رابطه با سایت، معمولا چیزهایی که در این تگ نوشته می شوند مستقیما در صفحه نمایش داده نمی شود.
  • تگ <title> یک عنوان برای صفحه وب نشان می دهد، این عنوان در نوار عنوان نشان داده می شود.
  • تگ <body> بدنه صفحه اچ تی ام ال ما را مشخص می کند و تمام کد ها و محتوایی که در صفحه نشان داده می شوند در این تگ قرار می گیرد.
  • تگ <h1> برای نشان دادن عنوان های در صفحه به کار می رود.
  • تگ <p> برای قرار دادن پاراگراف یا متن در صفحات وب به کار می رود.

برای نشان دادن حروف فارسی در صفحات html از کد متای <“meta charset=”UTF-8> استفاده می کنیم، این کد را باید در تگ هد قرار دهیم.

خب برای قسمت اول تا همین جا کافیست،در قسمت های بعدی بصورت کامل تر و دقیق تر با html آشنا می شویم.