مثالهای پایه ای از HTML

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

در فصلهای بعد با همه ی این تگها آشنا خواهید شد و آنها را یاد خواهید گرفت .

HTML documents (سندهای HTML)

 همه ی سندهای HTML باید با اعلام کردن نوع سند مشخص شوند <DOCTYPE html!>

خود سند HTML  نیز با <html> شروع میشود و با <html/> خاتمه می یابد.

بخش قابل رویت از سند HTML بین  تگ <body> و <body/> است.

<!DOCTYPE html>
<html>
<body>

<h1> این یک عنوان است.</h1>
<p>این یک پاراگراف است.</p>

</body>

</html>
</html>

 

 

 HTML Headings(عنوان های HTML)

عنوان های HTML  توسط تگهای <h1> تا <h6> تعریف میشوند .

تگ <h1> مهمترین عنوان را مشخص میکند و تگ <h6 > کم اهمیت ترین عنوان را مشخص میکند . (منظور از عنوان همان تیتر نوشته ما است)

اگر که مثال زیر را در notepad  بنویسید و یا آن را کپی کنید و با مرورگر خود آن را باز کنید تفاوت تگهای <h1> تا <h6>را مشاهده خواهید کرد .

<!DOCTYPE html>

<html>

<body>

<h1>این عنوان 1 است</h1>

<h2>این عنوان 2 است</h2>

<h3>این عنوان3 است</h3>

<h4>این عنوان4 است </h4>

<h5>این عنوان5 است </h5>

<h6>این عنوان6 است </h6>

</body>

</html>

 

خروجی کد بالا به صورت زیر خواهد بود :

headers

 

HTML paragraphs(پاراگراف های HTML)

پاراگراف های HTML با  تگ  <p> درون قسمت <body>  تعریف می شوند  مانند زیر:

<!DOCTYPE html>

<html>

<body>

<p>این یک پاراگراف است.</p>

<p>این یک پاراگراف است.</p>

</body>

</html>

 

خروجی کد در مرورگر به صورت زیر خواهد بود :

 

 

 

HTML links (پیوند های HTML)

پیوندهای HTML با تگ <a>  تعریف میشوند  مانند مثال زیر:

 

<!DOCTYPE html>

<html>

<body>

<a href=”https://www.pysocial.com”>این یک پیوند است. </a>

</body>

</html>

 

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

مقصد لینک (پیوند)  در داخل href attribute(صفت href) مشخص شده است .

Attribute رو میشود صفت و یا ویژگی در فارسی ترجمه کرد اما ما همان  attribute  را برای آن بکار میبریم .

attribute ها  برای ارائه اطلاعات اضافی در مورد المنت های HTML استفاده می شود.

شما در فصل های بعد بیشتر درباره attribute ها یاد خواهید گرفت.

 

HTML images(تصاویر HTML)

تصاویر HTML با  تگ <img> تعریف می شوند.

source file (مکان فایل)  (src)، alternative text (متن جایگزین) (alt)، width  و height به عنوان attributes (ویژگی ها) ارائه می شود:

<!DOCTYPE html>

<html>

<body>

<img src=”pysocial.jpg” alt=”pysocial.com” width=”104″ height=”142″>

</body>

</html>

 

HTML buttons(دکمه های HTML)

دکمه های HTML با تگ <button>  تعریف میشوند :

 

<!DOCTYPE html>

<html>

<body>

<button>بر روی من کلیک کنید .</button>

</body>

</html>

 

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

 

HTML lists(لیست های HTML)

لیست های HTML با تگ <ul> (unordered list)(لیست غیر شمارشی) یا تگ <ol> (ordered list) (لیست شمارشی) و سپس تگ  <li>  (list items) (موارد لیست)تعریف می شوند:

 

<!DOCTYPE html>

<html>

<body>

<h2>An Unordered HTML List</h2>

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

<h2>An Ordered HTML List</h2>

<ol>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

</body>

</html>

 

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

 

lists

 

 

 

 

 

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *