عناصر Block and Inline

 عناصر درون خطی و بلاک

هر عنصر html دارای یک مقدار پیش فرض برای نمایش است که نوع آن را مشخص میکند. این دو نوع  مقدار پیش فرض نمایش ، block و inline هستند.

Block-level Elements

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

 

:مانند

<h1>, <form>, <li>, <ol>, <ul>, <p>, <pre>, <table>, <div>

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

مانند:

<b>, <a>, <strong>, <img>, <input>, <em>, <span>

عنصر div و span

عنصر div یک عنصر block است، به عنوان ظرفی که حاوی دیگر عناصر html  میباشد. این تگ بیشتر در بخش بندی صفحه وب کاربرد دارد.

عنصر span یک عصر  inline میباشد. به عنوان ظرفی که حاوی متن میباشد.

تفاوت این دو  تگ را در مثال زیر بررسی میکنیم:

 <!DOCTYPE html>
<html>
<head>
<title> div & span </title>
</head>
<body>

<div style="color:red">
 <h4>This is first group</h4>
 </div>
<div style="color:green">
 <h4>This is second group</h4>
</div>
<p>This is <span style="color:red">red</span> and this is <span style="color:green">green</span></p>
</body>
</html>

lk

 <html>
<head>
<title> Div&span</title>
</head>
 <body>
 <h1>Div&span</h1>
 <div style="background-color:green; color:white; padding:20px;">
 <h2>Some 
 <span style="color:red">Important</span>
 Message</h2>
 <p>Some paragraph text goes here.</p>
 <p>Another paragraph goes here.</p>
 </div>
 </body>
</html>

Untitkkkled

جداول

جداول

جدول ها توسط تگ <table> ایجاد میشوند. هر سطر جدول با تگ <tr>  و هر ستون توسط تگ <td> ایجاد میشود. مثال زیر یک نمونه ایجاد جدول ساده میباشد با ویژگی border  که با ۱ مقدار دهی و باعث ایجاد حاشیه میشود.

همچنین از تگ th جهت  تعریف هدر جدول استفاده شده است.

 

 <html>
 <head>
 <title> Creating a Table</title>
 </head> 
 <body>
<table border="1">
 <tr>
 <th>Firstname</th>
 <th>Lastname</th> 
 <th>Age</th>
 </tr>
 <tr>
 <td>Jill</td>
 <td>Smith</td> 
 <td>50</td>
 </tr>
 <tr>
 <td>Eve</td>
 <td>Jackson</td> 
 <td>94</td>
 </tr>
</table>
 </body>
</html>

Capt';ure

نکته
 تگ td یا همان ستونها ی جدول مانند ظرفی که حاوی اطلاعات است میباشند. این اطلاعات میتواند شامل همه عناصر html مثل متن، عکس، لیست و…. باشد

ویژگی colspan وrowspan

 

از colspan برای ادغام  دو یا چند ستون استفاده میشود.

از rowspan برای ادغام  دو یا چند ردیف استفاده میشود.

 <html>
 <head>
 <title> Colspan Attribute</title>
 </head> 
 <body>
<table border="2">
 <tr>
 <td >Red</td>
 <td>Blue</td>
 <td>Green</td>
 </tr>
 <tr>
 <td><br /></td>
 <td colspan="2"><br /></td>
 </tr>
</table>
 </body>
</html>

Colspan

Unktitled

 <html>
 <head>
 <title> Colspan Attribute</title>
 </head> 
 <body>
<table border="2">
 <tr>
 <td rowspan="2">Red</td>
 <td>Blue</td>
 <td>Green</td>
 </tr>
 <tr>
 <td><br /></td>
 <td ><br /></td>
 </tr>
</table>
 </body>
</html>

rowspan

 

Unktitled

لیست های 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