آموزش html به زبان ساده قسمت سوم

//آموزش html به زبان ساده قسمت سوم

آموزش html به زبان ساده قسمت سوم

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

لیست توضیحی :

در این نوع لیست ها برای یک کلمه یا عبارت توضیحی را می نویسید. این لیست ها با تگ dl ساخته می شوند. تگ dt کلمه یا عبارت مورد نظر را در خود جا می دهد و تگ dd توضیح مربوط به کلمه یا عبارت مورد نظر را ایجاد می کند.

<dl>

  <dt>Coffee</dt>

  <dd>black hot drink</dd>

  <dt>Milk</dt>

  <dd>white cold drink</dd>

</dl>

نکته آموزشی :

در لیست های ترتیبی این امکان وجود دارد که بتوانید از یک عدد یا حرف خص ترتیب را شروع کنید. مثلا از عدد ۵۰ به بعد. برای این کار از صفت start استفاده می کنیم.

<ol start=”50″>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

تگ های بلوک و درون خطی :

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

تگ های بلوک :

<address><article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption><figure><footer><form><h1>-<h6><header><hr><li><main><nav><noscript><ol><output><p><pre><section><table><tfoot><ul><video>

تگ های درون خطی :

<a><abbr><acronym><b><bdo><big><br><button><cite><code><dfn><em><i><img><input><kbd><label><map><object><q><samp><script><select><small><span><strong><sub><sup><textarea><time><tt><var>

تگ Iframe در آموزش html:

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

<iframe src=”آدرس سایت مورد نظر“></iframe>

همچنین این تگ این امکان را به شما می دهد تا پهنا و ارتفاع کادر را نیز مشخص کنید:

<iframe src=”demo_iframe.htm” height=”200″ width=”300″></iframe>

در این تگ می توانید خط حاشیه دور کادر را نیز حذف کنید. مانند:

<iframe src=”demo_iframe.htm” style=”border:none;”></iframe>

یا خط دور کادر را ایجاد و تغییر اندازه و تغییر رنگ دهید. مانند:

<iframe src=”demo_iframe.htm” style=”border:2px solid red;”></iframe>

تگ meta :

این تگ یکی از تگ های مهم می باشد که یکسری کارها را برای شما انجام می دهد که در ادامه به آنها اشاره می کنیم. فقط دقت داشته باشید که تگ meta درون تگ head نوشته می شود.

انتخاب نوع کاراکترها :

<meta charset=”UTF-8″>

ایجاد توضیح برای صفحات وب سایت :

<meta name=”description” content=”Free Web tutorials”>

تعریف کلمه برای موتورهای جستجو :

<meta name=”keywords” content=”HTML, CSS, XML, JavaScript”>

تعریف ناشر صفحات وب سایت :

<meta name=”author” content=”John Doe”>

بارگذاری صفحه یا متن در زمان های دلخواه :

<meta http-equiv=”refresh” content=”30″>

تنظیم اندازه صفحه برای دستگاه های مختلف :

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

تگ kbd :

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

<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>

تگ samp :

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

<p>If you input wrong value, the program will return <samp>Error!</samp></p>

تگ code :

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

<code>
x = 5;
y = 6;
z = x + y;
</code>

تگ var در آموزش html:

این تگ برای ایجاد متغیر و یا فرمول محاسباتی به کار می رود. مانند:

Einstein wrote: <var>E</var> = <var>mc</var><sup>2</sup>.

فرم ها در آموزش اچ تی ام ال:

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

تگ form :

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

<form>
.
تگ های فرم
.
</form>

تگ input :

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

ورودی متن :

در این قسمت با چگونگی وارد کردن متن و ایجاد فیلد متنی آشنا می شویم. صفت type را اگر برابر با مقدار text کنیم فیلد برای ورود متن ایجاد می شود. مانند:

<form>
  First name:<br>
  <input type=”text” name=”firstname”><br>
  Last name:<br>
  <input type=”text” name=”lastname”>
</form>

دکمه های انتخاب تکی یا Radio Button :

در اینجا با چگونگی ایجاد گزینه های انتخاب تکی آشنا می شویم. به این معنی که از بین تعدادی از موارد فقط می توان یک مورد را انتخاب کرد. در اینجا صفت type را باید برابر با radio قرار دهیم. مانند:

<form>
  <input type=”radio” name=”gender” value=”male” checked> Male<br>
  <input type=”radio” name=”gender” value=”female”> Female<br>
  <input type=”radio” name=”gender” value=”other”> Other
</form>

دکمه ارسال یا Submit :

برای ارسال یک فرم باید یک دکمه وجود داشته باشد که این دکمه باید در صفت type برابر با submit باشد. مانند:

<form action=”/action_page.php”>
  نام:<br>
  <input type=”text” name=”firstname” value=”Mickey”><br>
  نام خانوادگی:<br>
  <input type=”text” name=”lastname” value=”Mouse”><br><br>
  <input type=”submit” value=”ارسال”>
</form>

لیست آبشاری در آموزش html:

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

<select name=”cars”>
  <option value=”volvo”>Volvo</option>
  <option value=”saab”>Saab</option>
  <option value=”fiat”>Fiat</option>
  <option value=”audi”>Audi</option>
</select>

ایجاد لیست متنی با تعداد مشخص :

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

<select name=”cars” size=”3″>
  <option value=”volvo”>Volvo</option>
  <option value=”saab”>Saab</option>
  <option value=”fiat”>Fiat</option>
  <option value=”audi”>Audi</option>
</select>

تگ textarea :

این تگ برای ایجاد یک مکان برای اضافه کردن متن به کار می رود. به این معنی که یک کادر متنی ایجاد می کند و می توانید متن خود را درون این کادر قرار دهید. مانند:

<textarea name=”message” rows=”10″ cols=”30″>
The cat was playing in the garden.
</textarea>

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

ورود پسورد :

در بعضی از فرم ها نیاز به دریافت و گرفتن پسورد و رمز عبور از کاربران را دارید. برای ساخت چنین امکانی باید صفت type برابر با password باشد. مانند:

<form>
  نام کاربری:<br>
  <input type=”text” name=”username”><br>
  رمز عبور:<br>
  <input type=”password” name=”psw”>
</form>

جایگزینی یا reset :

در اینجا قصد داریم تا یک دکمه reset برای برگرداندن حالت قبلی در فرم ایجاد کنیم. مانند:

<form action=”/action_page.php”>
  First name:<br>
  <input type=”text” name=”firstname” value=”Mickey”><br>
  Last name:<br>
  <input type=”text” name=”lastname” value=”Mouse”><br><br>
  <input type=”submit” value=”Submit”>
  <input type=”reset”>
</form>

انتخاب چند گزینه ای :

در اینجا یاد می گیریم که چگونه چند گزینه برای فرم خود ایجاد کنیم که قابلیت انتخاب ۲  و بیشتر بین این گزینه ها وجود داشته باشد. مانند:

<form>
  <input type=”checkbox” name=”vehicle1″ value=”Bike”> I have a bike<br>
  <input type=”checkbox” name=”vehicle2″ value=”Car”> I have a car 
</form>

انتخاب رنگ در آموزش html:

در اینجا با چگونگی انتخاب رنگ در فرم آشنا می شویم. مانند:

<form>
  رنگ مورد علاقه شما:
  <input type=”color” name=”favcolor”>
</form>

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

۱۳۹۷-۱۱-۱۸ ۱۰:۴۱:۵۴ +۰۰:۰۰

دیدگاه خود را بنویسید

با خبرم کن

می خوای با ثبت ایمیل خودِت خیلی سریع از آموزش های جدید با خبر بشی؟