نگین نقی نژاد
نگین نقی نژاد
خواندن ۲ دقیقه·۳ سال پیش

HTML Editors

سلام سلام :)

ادامه میدیم بحث html رو. بچه ها منبع من در واقع سایت w3schools هستش.

کاری که الان باید بکنیم اینه که کد زیر رو در داخل notepad بنویسیم. (شما میتونید کپیش کنید. :دی)

<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

مرحله ی بعدی مربوط به سیو کردن فایل هست. اسم فایل رو میذاریم "index.html" و encoding رو که در تصویر مشخصه روی UTF-8 تنظیم میکنیم. [در مورد اینکه UTF-8 چی هست و اینا برید اینجا.]

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

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

HTML Basic

خب اینجا یکسری از تگ هارو معرفی میکنیم.

همه ی فایل های html باید با <DOCTYPE html!> شروع شن، و بعد ازون تگ <html> و <html/> نوشته میشه و باقی کدها و تگ ها مثل تگ <body> بین این دو قرار می گیرن.

تگ <DOCTYPE html!> در واقع همون Document type هستش که داره به browser کمک میکنه تا پیج های وب رو به درستی نشون بده. فقط هم یکبار ظاهر میشه (همون بالای کدمون!). case sensitive هم نیست.

سرفصل های html

سرفصل های html رو بین تگهای <h1> تا <h6> قرار میدیم. هر قدر که اهمیت هدینگ برامون بیشتر باشه خب طبعا میخوایم سرفصل درشت تر باشه فلذا هرچی عدد هدینگ کوچکتر باشه سرفصل درشت تر میشه. برید تو لینک زیر و مثال رو ببینید. چند بار هم خودتون تغییرش بدید، تا کامل دستتون بیاد.

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic_headings

پاراگراف های html رو با <p> نشون میدیم. برای مثالش دوباره برید به لینک زیر:

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic_paragraphs


HTML Links

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

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic_link

ما با استفاده از صفت "href" میتونیم آدرس یا مسیر یک فایل رو مشخص کنیم.

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

HTML image


اگر بخوایم عکس نشون بدیم با تگ <img> نشون میدیم. سورس فایلمون رو با "src" نشون میدیم. موتورهای جست و جو وقتی بخوان یه تصویر رو بیارن از اسم اون استفاده میکنن تا بهش برسن منطقا. در واقع ما هویت یه عکس رو با alternative text و یا "alt" نشون میدیم. دقت کنید که خود گوگل هم تاکید کرده که حتما از صفت alt استفاده کنین.

برای مشخص کردن عرض و ارتفاع عکس هم از تگ "width" و "height" استفاده میکنیم. خب قطعا میخواید خودتون لمس کنین اینایی که گفتمو پس برید به لینک زیر:

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic_img

خب حالا میخواید کد سورس html همین صفحه ای که الان توش هستین رو ببینید؟ راست کلیک کنید لطفا و گزینه ی View Page Source رو بزنید. خب الان دارید کد html و البته CSS صفحه ای که توش هستید رو می بینید. :دی




html
شاید از این پست‌ها خوشتان بیاید