شروع ساده با html, ساده ترین زبان برنامه نویسی از نظر من

تو این مطلب به کسایی که با html آشنا نیست چند تا کار ساده با html نشون میدم بلکه خوششون بیاد و شروع کنند.

دقت کنید که این یک آموزش نیست و فقط انگیزه ای برای شروع html است.

چون نمی خواهم حوصله سر بر باشه بدون هیچ توضیح و تاریخچه ای میریم سر اصل مطلب.

برای شروع نیازی به نصب ادیتور هم نیست و میتوانید از ادیتور آنلاین w3 schools استفاده کنیم.

(البته اگر کد هارو تکه تکه میبینید مشکل از ویرگوله و فرض کنید که همه ی کد های پشت هم یک قطعه کد هستند).

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

بعد هرچی میخوایین بنویسین چون html اگه نفهمه که چی میگین همونو چاپ میکنه.

و چون با unicode کارمیکنه فارسی هم میشه نوشت(البته اگر ascii بود نمیشد).

و البته یکم بزرگترش کردم که بهتر ببینید :)

حالا بیاین لوگوی گوگل رو هم زیرش نشون بدیم.

چون این سرور برای ما نیست و قابلیت آپلود فایل عمومی هم نداره فایلمونه رو از روی سرور های گوگل فراخوانی میکنیم.

البته از روی سرور های گوگل هم میشه ولی من لینکشو از wikipedia برداشتم :)

لینک عکسه هم اینه https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/408px-Google_2015_logo.svg.png

و از این به بعد چون داره کد ها زیاد میشه کد رو مینویسم و فقط عکس خروجی رو میزارم.

چرت و پرت
<img src=&quothttps://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg&quot>

در واقع در کد بالا یک تگ image داریم که داخلش با src مسیر عکس مشخص شده.

و در ضمن اصلا اصولی نیست که متن خالی داخل html بزاریم برای همین من میزارم داخل یک تگ پاراگراف که با <p> باز و با <p/> بسته میشه.

<p>چرت و پرت</p>

<img src=&quothttps://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg&quot>

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

و الان میتونیم یک هدر هم به وب سایتمون اضافه کنیم.

هدر ها در html از 1 تا 6 دارن که 1 بزرگترین هدر و 6 کوچیکترین هدره و برای مثال هدر 1 با <h1> و با <h1/> بسته میشه.

<h1>سلام این هدر 1 هستش</h1>

<h2>سلام این هدر 2 هستش</h2>

<h3>سلام این هدر 3 هستش</h3>

<h4>سلام این هدر 4 هستش</h4>

<h5>سلام این هدر 5 هستش</h5>

<h6>سلام این هدر 6 هستش</h6>

<p>چرت و پرت</p>

<img src=&quothttps://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg&quot>

یکم هم css.

در style هم میشه css نوشت و من اینجا رنگ هدر یکم رو طوسی کردم. یا gray :)

<h1 style=&quotcolor: gray&quot>سلام این هدر 1 هستش</h1>

<h2>سلام این هدر 2 هستش</h2>

<h3>سلام این هدر 3 هستش</h3>

<h4>سلام این هدر 4 هستش</h4>

<h5>سلام این هدر 5 هستش</h5>

<h6>سلام این هدر 6 هستش</h6>

<p>چرت و پرت</p>

<img src=&quothttps://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg&quot>

و در آخر هم میتونید یک فونت باحال بهش بدید که چون فونتی که من میخواستم جزو فونت های پیشفرض نبود از گوگل فونت لینکش رو کپی کردم. (یه راز, اسم فونت هم Handjet هستش:)

<link href=&quothttps://fonts.googleapis.com/css2?family=Handjet&display=swap&quot rel=&quotstylesheet&quot>

<h1 style=&quotcolor: gray; font-family:Handjet&quot>سلام این هدر 1 هستش</h1>

<h2>سلام این هدر 2 هستش</h2>

<h3>سلام این هدر 3 هستش</h3>

<h4>سلام این هدر 4 هستش</h4>

<h5>سلام این هدر 5 هستش</h5>

<h6>سلام این هدر 6 هستش</h6>

<p>چرت و پرت</p>

<img src=&quothttps://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg&quot>

خب امیدوارم که به html کمی علاقه مند تر شده باشید و کمی درموردش تحقیق کنید.(و البته درباره unicode و ascii).

و البته فقط کپی و پیست نکرده باشید, واقعا کد ها رو فهمیده باشید.

و اگه میخواهید یادش بگیرید یک منبع خوب خود w3schools هست(و چون ویرگول ممکنه حساس بشه بگم که این یک تبلیغ نیست و از هرجای دیگه ای هم میتونین html یاد بگیرین).(ویرگول بدون هیچ دلیلی دو بار این پست رو حذف کرد)

البته میشد canvas هم نشون بدیم که مثل یک بوم نقاشی عمل میکنه و میشه توش کارهای گرافیکی کرد اما چون با جاوا اسکریپته یکم سخت میشه برای کسی که حتی html بلد نیست.

موفق باشید :)