آموزش طراحی سایت از مبتدی تا پیشرفته – جلسه ۶
با سلام
در این سری قصد داریم به صورت قدم به قدم HTML رو به شما آموزش بدیم.شما با HTML میتونید صفحات وب توسعه بدید،زبان HTML خیلی آسون و قابل درک هست و شما از این زبان لذت میبرید.
HTML چیست؟؟
HTML یک زبان برنامه نویسی می باشد که برای توسعه زبان های برنامه نویسی تحت وب و اینترنت کاربرد دارد.
HTML یک زبان نشانه گذاری یا Markup Language است که به آن tag (تگ) گفته می شود.
- HTML مخفف Hyper Text Markup Language است.
- HTML توسط تگ های HTML نوشته می شود.
- تگ های HTML را داخل <> می نویسند (برای مثال).
در اینجا ما یک مثال از ساختار HTML برای شما میزنیم :
<html> <head> <title>Page Title</title> </head> <body> <h1>سلام دنیا</h1> <p>آموزش برنامه نویسی</p> </body> </html>
نکته :
- به علامت های <> (بزرگتر یا کوچکتر در ریاضیات) در HTML تگ گفته می شود.
- برای شروع برنامه نویسی HTML از تگ <html> ، و برای بستن تگ از <html/> استفاده می کنیم.
- تگ <title> همیشه درون تگ <head> قرار می گیرد.
- وظیفه تگ <title> نمایش توضیحات بر روی تب مرورگر است. هرچه درون تگ <title> بنویسید در تب مرورگر نمایش خواهد داد.
- بدنه ی اصلی سایتمان را درون تگ <body> ایجاد می کنیم.
- تگ <h1> یک تیتر بزرگ ایجاد می کند.
- تگ <p> یک پاراگراف ایجاد می کند.
برای تست این اموزش کافیه شما یک فایل اچ تی ام ال تو سیستم خودتون با پسوند html ایجاد کنید
سپس راست کلیک کرده و روی گذینه edit کلیک کرده و کد بالا رو در فایل خودتون کپی کنید و فایل رو ذخیره کنید
حالا شما روی فایل خودتون دوبار کلیک کنید،تبریک میگم شما اولین کد اچ تی ام ال رو نوشتید!
درباره فایل ها و اسناد html:
تمامی اسناد html دارای تگ <DOCTYPE html!> هستند.
تمامی فایل های HTML با تگ <html> شروع شده و با تگ <html/> پایان می یابند.
کدهایی که برای کاربران قابل نمایش می شوند را داخل تگ <body> و <body/> می نویسیم.
مثال زیر :
<!DOCTYPE html> <html> <body> <h1>تیتر</h1> <p>متن پاراگراف</p> </body> </html>
از این پس تگ های html که پیشفرض هستند در آموزش آورده نمی شوند و شما باید تگ هایی که گفته می شود را مانند مثال بالا بین تگ های <body> و <body/> قرار دهید.
تیتر یا heading در html:
برای اینکه متن های هدینگ یا درشت را در متن ها و تیترها با html نمایش دهید از <h1> تا <h6> استفاده می کنیم.
هرچه عدد h کمتر باشد تیتر درشت تر نمایش می یابد!
مثال:
<h1>متن تیتر</h1> <h2>متن تیتر</h2> <h3>متن تیتر</h3> <h4>متن تیتر</h4> <h5>متن تیتر</h5> <h6>متن تیتر</h6>
پاراگراف در html:
با پاراگراف متن عمومی را برای کاربران نمایش می دهیم. تگ پاراگراف <p> می باشد.
مثال :
<p>متن را اینجا بنویسید</p> <p>پاراگراف بعدی را اینجا بنویسید</p>
لینک در html:
برای ساخت لینک در html از تگ <a> استفاده می کنیم.
مثال:
<a href="https://devlife.ir/">این یک لینک است</a>
تصاویر و عکس در html:
برای اینکه در فایل html تصویری جایگذاری کنیم از تگ <img> استفاده می شود.
- src : مسیر+نام فایل تصویر
- alt : نام یا توضیحات تصویر
- width : پهنای تصویر
- height : ارتفاع تصویر
<img src="devlife.jpg" alt="devlife" width="200" height="200">
آموزش قالب بندی یا Formatting متن در HTML
<b>این یک متن ضخیم است</b><br><br> <i>این یک متن کج یا ایتالیک است</i><br><br> اینجا<sup> چسبون است</sup><br>
عنصر Formatting در HTML
باید بدانید HTML عناصر خاصی را برای تعریف متن با معنی خاص تعریف می کند.
HTML از عناصری مانند <b> و <i> برای قالب بندی خروجی متن bold یا italic استفاده می کند.
یعنی با تگ <b> که برگرفته از اول کلمه ی blod است متن شما را ضخیم تر می کند.
عناصر قالب بندی یا Formatting برای نمایش انواع خاصی از متن طراحی شده اند:
- Bold text
- Important text
- Italic text
- Emphasized text
- Marked text
- Small text
- Deleted text
- Inserted text
- Subscripts
- Superscripts
خب تا اینجا با مفاهیم کلی اچ تی ام ال اشنایی پیدا کردید از جلسه بعد میریم به سراغ css ,js موفق باشید
