لیست های HTML

لیست ها

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

 

Ordered Lists

لیستهای مرتب با تگ <OL> شروع میشوند و عناصر  آن با تگ باز و بسته <li> از هم جدا میشوند. مثال زیر را در نظر بگیرید همانطور که مشاهده میکنید بعد از اجرا گرفتن با لیستی شماره گذاری شده که از ۱ به صورت صعودی رشد میکند مواجه میشویم، این شماره گذاری پیش فرض است. در ادامه مطلب با نوع های دیگر نیز آشنا میشویم:

  
 <html>
 <head>
 <title>ordered list</title>
 </head>
 <body>
 <ol>
 <li>اولین</li>
 <li>دومین</li>
 <li>سومین</li>
 </ol> 
 </body>
</html>

Capt548ure

Ordered List -خصوصیت type

توسط ویژگی type ما میتوانیم مقادیر دیگری برای شماری گذاری و مرتب کردن آیتم های لیست خود داشته باشیم

 

Type توضیح
type=”1″ آیتم های لیست با اعداد شماره گذاری میشوند(پیش فرض)
type=”A” آیتم های لیست با حروف بزرگ شماره گذاری میشوند
type=”a” آیتم های لیست با حروف کوچک شماره گذاری میشوند
type=”I” آیتم های لیست با حروف بزرگ رومی شماره گذاری میشوند
type=”i” آیتم های لیست با حروف کوچک رومی شماره گذاری میشوند

 <ol type="1|A|a|I|i">
 <li>اولین</li>
 <li>دومین</li>
 <li>سومین</li>
 </ol>

Unordered List

لیستهای نا مرتب با تگ <ul>  شروع و عناصر آن با تگ باز و بسته <li>  از هم جدا میشوند.آیتم ها با گلوله های تو پر   به صورت پیش فرض علامت گذاری میشوند. شکلهای دیگری هم هست که با خصوصیت style میشه آنها را تغییر داد. در بخش css به آن میپردازیم.

 <html>
 <head>
 <title> Unordered List</title>
 </head> 
 <body>
 <ul>
 <li>avalin</li>
 <li>dovomin</li>
 <li>sevomin</li>
 </ul> 
 </body>
</html>

unre

لیستهای  توصیفی :(Description Lists)

در ادامه به لیستی دیگری به نام لیست توصیفی میپردازیم. لیست توصیفی، لیستی از عناصر با توضیح یا توصیفی برای هر عنصر میباشد. تگ <dl> لیست توصیفی را تعریف میکند، <dt> عناصر را تعریف میکند، <dd>

توضیح هز عنصر را تعریف میکند:

 <html>
 <head>
 <title> Description Lists</title>
 </head> 
 <body>
<dl >
 <dt>Unordered List</dt>
 <dd>- The list items will be marked with bulle</dd>
 <dt>Ordered List</dt>
 <dd> - The list items will be marked with numb </dd>
</dl>
 </body>
</html>

58re

لینکها

 <a>تگ: anchor tag

لینکها بخش جدایی ناپذیر از صفحه وب هستند. شما با اضافه کردن لینکها به متن یا عکس  میتوانید با کلیک بر روی انها به فایل یا صفحه وب مور نظر بروید. در html  لینکها توسط تگ <a> تعریف میشوند.  این تگ دارای یک ویژگی به نام href است که  آدرس مقصد لینک را تعریف میکند.

در مثال زیر ما یک لینکی به آدرس http://sufra.ir داریم . وقتی یه اجرا از این کد بگیریم عنوان لینک آموزش لینک  نمایش داده میشود که وقتی بر روی آن کلیک کنیم وارد آدرسی که به عنوان مقدار در ویژگی href قرار دایم میشویم. href  ویژگی مهمی است چون اگر متنی بین تگ <a> بدون تعریف این ویژگی قرار بگیرد، متن قابلیت کلیک را از دست میدهد.

 <a href=" http://sufra.ir">آموزش لینک</a>

02ure

ویژگی target

برای باز کردن سند مرتبط میباشد، این ویژگی مقادیر مختلفی میگیره که به بررسی برخی از آنها میپردازیم:

<a target=”_blank|_self”>
مقدار توضیح
_blank سند لینک داده شده در یک پنجره یا تب جدید باز میشود.
_self سند لینک داده شده تو همون صفحه که لینک هست باز میشود و این مقدار به صورت پیش فرض هست.

Ca012pture

_blank

Cap025ture

_self

Capt321ure

عکسها

 <img> تگ

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

ادرس عکس میتواند در ویژگی src تعریف شود:

<img src=”01.jpg” />

Image مکان

ما برای مقدار صفت src به مکان عکس نیاز داریم که بین ” ” قرار میگیرد. در مثال اگر اسم عکس ما ۱٫jpg باشد در پوشه ای که فایل html مان قرار دارد و همچنین خصوصیات زیر را هم داشته باشد:

 

خصوصیات title, alt ، height ،  width

ویژگی width و height: برای عکس در نظر گرفتیم که عکس را به هر اندازه که بخواهیم در صفحه قرار میدهیم،

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

خصوصیت title :حاویمتنی است که با رفتن ماوس بر رو روی عکس به نمایش در می اید.

کد ما باید شبیه به مثال زیر باشد:

 

 

 <html>
 <head>
 <title>sufra.ir</title>
 </head>
 <body> 
 <img src="C:\Users\Desktop\01.jpg" height="100px" width="200px" alt="" title ="عکس از گربه"/>

 </body>
</html>

Cap584ture

ویژگیها_HTML

ویژگیها_HTML Attributes

ویژگیها و خصوصیات  یک سری قابلیتها ، امکانات و اطلاعات بیشتر  برای  عناصر HTML فراهم می کنند.

  • همه عناصر html میتوانند  ویژگی داشته باشند.
  • ویژگیها اطلاعات اضافی در مورد عناصر ایجاد میکنند
  • تعین ویژگی یک عنصر همیشه داخل تگ باز انجام میگیرد
  • فرم کلی نوشتن ویژگی name=valuue

ویژگی  زبان

زبان در سند html میتواند در تگ html وبا وِیژگی lang   اعلان شود. اعلان یک زبان برای دسترسی به برنامه های کاربردی  و موتورهای جستجو بسیار مهم است:

 

 <!DOCTYPE html>
<html lang="en-US">
<body>

...

</body>
</html>

ویژگی title

ما میخواهیم یه ویژگی به عنصر <P> با عنوان  title اضافه کنیم. مقدار ویژگی title به عنوان ابزار راهنما عمل میکند. به این صورت که وقتی موس را بر روی پاراگراف میبریم مقدار title که یک متن است نمایش داه میشود.

 

 <p title="I'm a tooltip">
This is a paragraph.
</p>

Ca11pture

عناصر_HTML Elements

عناصر_HTML Elements

معمولا یک عنصر html دارای یک تگ  باز و بسته است و محتوا بین این دو تگ قرار میگیرد:

<element>Content goes here…</element>
تگهایی که محتوا بین انها قرار نمیگیرد را تگهای تنها گویند. مانند:<br>

Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br>

عناصر html تو در تو 

در مثال زیر ما ۴ عنصر داریم:

<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

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

عنصر body بدنه سند را تعریف میکند. تگ شروع و پایان دارد.محتوا بین این دو تگ عنصر html دیگری مثل عنصر  h1,p.

عنصر p پاراگراف را تعریف میکند. تگ شروع و پایان دارد.محتوا بین این دو تگ My first paragraph.

 عنصر h1 عنوان را تعریف میکند. تگ شروع و پایان دارد.محتوا بین این دو تگ  .My First Heading

عنوان ها_Headings

عنوان ها_Headings

در اچ تی ام ال ۶ تگ عنوان داریم که با توجه به اهمیت موضوع رتبه بندی میشوند.که این ۶ تگ به صورت زیر هستند:

<h1>, <h2>, <h3>, <h4>, <h5>,  <h6>.

مثال زیر کاربرد و اندازه این عنوان ها را به تصویر میکشد:

 <html>
 <head>
 <title>first page</title>
 </head>
 <body>
 <h1>This is heading 1</h1>
 <h2>This is heading 2</h2>
 <h3>This is heading 3</h3>
 <h4>This is heading 4</h4>
 <h5>This is heading 5</h5>
 <h6>This is heading 6</h6>
 </body>
</html>

Captkkure

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

خط افقی :Horizontal Lines

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

Cap444ture

توصیحات:Comments

مرورگر توضیحات را نمایش نمیدهد، اما نوشتن توضیحات  برای یادآری، نوشتن نکات و… مفید است.

 <html>
 <head>
 <title>first page</title>
 </head>
 <body>
 <!-- تگ مربوط به پاراگراف -->
 <p>This is a paragraph </p>
 <!-- تگ مربوط به خط افقی -->
 <hr />
 <p>This is a paragraph </p>
 </body>
</html>

عناصر قالب بندی متن در HTML

در html  لیستی از عناصر هست که استایل متن را مشخص میکنند.عناصر قالب بندی برای نمایش انواع خاصی از متن طراحی شده اند.

 <html>
 <head>
 <title>first page</title>
 </head>
 <body>
 <p>This is regular text </p>
 <p><b> bold text </b></p>
 <p><big> big text </big></p>
 <p><i> italic text </i></p>
 <p><small> small text </small></p>
 <p><strong> strong text </strong></p>
 <p><sub> subscripted text </sub></p>
 <p><sup> superscripted text </sup></p>
 <p><ins> inserted text </ins></p>
 <p><del> deleted text </del></p>
 </body>
</html>

در این مثال هر پاراگراف فرمت متفاوتی را توسط تگ مخصوص نشان میدهد:

Captur3e

 

 

  نشان میدهد. <strong>  ر ا مثل <b> و <em> را مثل <i>مرورگر

با این حال معنی این تگ ها با هم متفاوت است،  <b> و <i> متن را به ترتیب تو پر و ایتالیک نشان میدهند ولی دو مورد دیگر اهمیت متن را نمایش میدهند.

متن با حروف درشت <b> </b>
متن مهم <strong> </strong>
متن ایتالیک <i> </i>
متن تاکید <em> </em>

پاراگرافها(p,br)

تگ p

برای ایجاد یک پاراگراف، به سادگی از تگ باز و بسته p  استفاده میکنیم:

 <html>
 <head>
 <title>first page</title>
 </head>
 <body>
 <p>This is a paragraph. </p>
 <p>This is another paragraph. </p>
 </body>
</html>

نتیجه:

 

Capتتture

 

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

شکست خط :Single Line Break

تگ br نقش اینتر را بازی  و خط جدید ایجاد میکند، بدون اینکه پاراگراف جدیدی ایجاد شود.

 <html>
 <head>
 <title>first page</title>
 </head>
 <body>
 <p>This is a paragraph.</p>
 <p>This is another paragraph. </p>
 <p>This is <br /> a line break </p>
 </body>
</html>

عنصر <br /> یک عنصر تنهاست و تگ پایانی ندارد.

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

Capt22ure

ایجاد اولین صفحه html

فایل HTML

فایلهای html فایلهای متنی هستن، بنابراین شما میتوانید از هر ادیتور متنی استفاده کنید تا اولین صفحه وب خود را ایجاد کنید. ادیتورهای زیادی در دسترس هست؛ که در اینجا ما از Notepad   استفاده میکنیم.

 

ما میتوانیم کد های html  خود را اجرا، ذخیره و به اشتراک بزاریم، بدون نصب هر نرم افزاری اضافی .

حالا برای ساختن اولین صفحه وب خود نت پد را اجرا کنید، بعد از نوشتن  ساختار اصلی  html در بخش body، متن “This is a line of text” را قرار دهید:

<html>
 <head>
 </head>
 <body>
 This is a line of text. 
 </body>
</html>

بعد از نوشتن کد باید آن را  ذخیره کنید. پایان نام فایل html باید پسوند  .html یا.htm باشد. در این مثال فایل به صورت first.html ذخیره شده است. وقتی فایل باز میشود نتیجه زیر در مرور گر نمایش داده میشود: Captnnure      

تگ title

برای قرار دادن  یک عنوان در تب که صفحه وب را توصیف کند، عنصر <title> را در بخش head اضافه میکنیم:    

<html>
 <head>
 <title>first page</title>
 </head>
 <body>
 This is a line of text. 
 </body>
</html>

نتیجه زیر تولید میشود:

 

C1apture

 

title عنصر مهمی است چون صفحه را توصیف میکند و توسط موتور جست و جو استفاده میشود.

ساختار اصلی یک سند اچ تی ام ال ( html )

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

تگ html

<html>
…
</html>

تگ head

بلافاصله بعد از تگ باز html شما تگ head را در سند میبینید که توسط دو تگ باز و بسته head  شناسایی میشود

در واقع head  تو فایل html شامل عناصری است که در بدنه صفحه  توسط  کاربر دیده نمیشود

<html>
 <head></head>
</html>

تگ body

تگ body زیر تگ head قرار میگیرد. تمام عناصری که در صفحه دیده میشوند درون این تگ قرار میگیرند.عناصری مثل Headings, paragraphs, lists, quotes, images و links از جمله عناصری هستند که میتوانند درون تگ body قرار بگیرند.

سند html از دو بخش اصلی سر و بدنه تشکیل میشود.

ساختار اساسی html:

<html>
 <head>
 </head>
 <body>
 </body>
</html>