- آموزش زبان HTML – جلسه اول – مقدمه
- آموزش زبان HTML – جلسه دوم – مثال های مقدماتی
- آموزش زبان HTML – جلسه سوم – تگ ها
- آموزش زبان HTML – جلسه چهارم – صفت ها
- آموزش زبان HTML – جلسه پنجم – هدینگ ها
- آموزش زبان HTML – جلسه ششم – پاراگراف ها
- آموزش زبان HTML – جلسه هفتم – استایل ها
- آموزش زبان HTML – جلسه هشتم – قالب بندی متن
- آموزش زبان 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
در اینجا می توانید کد زیر را در ویرایشگر سیستمتان کپی یا بنویسید.
1 2 3 4 5 6 7 8 9 10 |
<!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/> می باشد.
مثال:
1 2 3 4 5 6 7 8 9 |
<!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 می باشد. منظور از ارزش برای سئو می باشد .
مثال:
1 2 3 |
<h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> |
پاراگراف های HTML
پاراگراف ها (Paragraphs) در HTML با تگ <p> توصیف می شوند.
مثال:
1 2 |
<p>This is a paragraph.</p> <p>This is another paragraph.</p> |
لینک های HTML
لینک ها در HTML با تگ <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 ارائه می شوند.
مثال:
1 |
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142"> |
دکمه های HTML
دکمه ها در HTML با استفاده از تگ <button> توصیف می شوند.
مثال:
1 |
<button>Click me</button> |
لیست های HTML
لیست ها در HTML با تگ <ul> که مخفف “unordered/bullet list” است و یا با تگ <ol> که مخفف عبارت “ordered/numbered list” می باشد، همراه با تگ های <li> توصیف می شوند.
مثالی از لیست یکسری آیتم ها:
1 2 3 4 5 6 7 8 9 10 11 |
<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> |


ثبت ديدگاه