آموزش زبان HTML - جلسه دوم - مثال های مقدماتی

قبل از اینکه بحث اصلی را شروع کنیم، بهتر است درمورد ویرایشگر های HTML نیز توضیحاتی بدهیم.

ویرایشگر های HTML

نوشتن کد های HTML با استفاده از Notepad یا Textedit.

صفحات وب می توانند توسط ویرایشگر (Editors) های حرفه ای ساخته شوند. اما با این حال، بهتر است که در ابتدای یادگیری از ویرایشگر های ساده ای مانند Notepad (برای ویندوز) و Textedit (برای مک) استفاده کنید. ما باور داریم که در ابتدای یادگیری، استفاده از ویرایشگر های ساده متن نیز می تواند یادگیری را آسان تر و بهتر کند.

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

قدم اول: باز کردن Notepad (ویندوز)

برای ویندوز 8 و بالاتر:

منو Start که معمولاً در قسمت پایین سمت جپ صفحه قرار دارد کلیک کرده و عبارت Notepad را تایپ کنید.

برای ویندوز 7 و پایین تر:

ویرایشگر را از طریق آدرس Start > Programs > Accessories > Notepad باز کنید.

قدم اول: باز کردن Textedit (مک)

در سیستم عامل مک می توانید ویرایشگر Textedit را از طریق آدرس Finder > Applications > TextEdit باز کنید.

همچنین می توان یکسری اولویت ها را برای اینکه ویرایشگر بتواند فایل را به صورت صحیح ذخیره کند، تغییر داد. برای اینکار ابتدا به Preferences > Format رفته و گزینه “Plain Text” را انتخاب کنید. سپس زیر “Open and Save” باکس “Display HTML files as HTML code instead of formatted text” را فعال کنید.

حال یک Document یا سند جدید را برای قرار دادن کد ها باز کنید.

قدم دوم: نوشتن کمی کد HTML

در اینجا می توانید کد زیر را در ویرایشگر سیستمتان کپی یا بنویسید.

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

قدم سوم: ذخیره کردن فایل HTML

حال باید فایل HTML نوشته شده را ذخیره کرد. برای اینکار باید در Notepad گزینه File > Save as را انتخاب کنید. سپس نام فایل را index.html قرار داده و Encoding را UTF-8 (گزینه ای که پیشنهاد می شود برای فایل های HTML انتخاب گردد) قرار دهید.

برای ذخیره سازی فایل های html می توان دو فرمت htm. و html. را قرار داد که درواقع هیچ تفاوتی میان این دو فرمت نیست.

قدم چهارم: مشاهده فایل HTML در مرورگر

حال باید فایل HTML ذخیره شده را در مرورگر دلخواه خود باز کرده و مشاهده کنیم (به راحتی می توان با دابل کلیک یا راست کلیک و سپس انتخاب گزینه Open with، فایل html را در مرورگر مورد نظرمان باز کنیم).

مثال های مقدماتی HTML

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

Documents یا همان فایل های HTML

تمام فایل های HTML باید با عبارت <!DOCTYPE html> شروع شوند که ما این عبارت را در جلسه اول توضیح دادیم.

تمام فایل های HTML با تگ <html> شروع و با تگ <html/> بسته می شوند.

بخش قابل مشاهده فایل های HTML در مرورگر ها، بخش بین دو تگ <body> و <body/> می باشد.

مثال:

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

Headings یا همان سربرگ های HTML

سربرگ ها یا همان Heading های HTML از تگ <h1> شروع می شوند تا تگ <h6>. درواقع تگ <h1> با ارزش ترین هدینگ در HTML است و باید محتویات با ارزشی در آن قرار بگیرد، و همچنین تگ <h6> پایین ترین ارزش هدینگ ها در HTML می باشد. منظور از ارزش برای سئو می باشد .

مثال:

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

پاراگراف های HTML

پاراگراف ها (Paragraphs) در HTML با تگ <p> توصیف می شوند.

مثال:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

1 2	<p>This is a paragraph.</p> <p>This is another paragraph.</p>

لینک های HTML

لینک ها در HTML با تگ <a> توصیف می شوند.

مثال:

<a href="https://www.w3schools.com">This is a link</a>

1	<a href="https://www.w3schools.com">This is a link</a>

مقصد لینک در attribute (اتریبیوت یا صفت ) “href” مشخص می شود.

صفت ها (attributes) درواقع اطلاعات اضافی و کاربردی را در رابطه با عناصر و تگ های HTML ارائه می کنند. در جلسات آینده، ما مباحث بیشتری درمورد attribute ها را پوشش می دهیم.

تصاویر HTML

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

منبع فایل تصویر “src”، متن جایگزین “alt”، عرض “width” و طول “height” نیز به عنوان attribute ارائه می شوند.

مثال:

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

1	<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

دکمه های HTML

دکمه ها در HTML با استفاده از تگ <button> توصیف می شوند.

مثال:

<button>Click me</button>

1	<button>Click me</button>

لیست های HTML

لیست ها در HTML با تگ <ul> که مخفف “unordered/bullet list” است و یا با تگ <ol> که مخفف عبارت “ordered/numbered list” می باشد، همراه با تگ های <li> توصیف می شوند.

مثالی از لیست یکسری آیتم ها:

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ul>

<li>Coffee</li>

</ul>

<ol>

<li>Coffee</li>

</ol>

آموزش زبان HTML – جلسه اول – مقدمهآموزش زبان HTML – جلسه سوم – تگ ها

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

آموزش زبان HTML – جلسه دوم – مثال های مقدماتی

ویرایشگر های HTML

نوشتن کد های HTML با استفاده از Notepad یا Textedit.

قدم اول: باز کردن Notepad (ویندوز)

قدم اول: باز کردن Textedit (مک)

قدم دوم: نوشتن کمی کد HTML

قدم سوم: ذخیره کردن فایل HTML

قدم چهارم: مشاهده فایل HTML در مرورگر

مثال های مقدماتی HTML

Documents یا همان فایل های HTML

Headings یا همان سربرگ های HTML

پاراگراف های HTML

لینک های HTML

تصاویر HTML

دکمه های HTML

لیست های HTML

درباره مهدی امامی

ثبت ديدگاه لغو پاسخ