آموزش طراحی سایت از مبتدی تا پیشرفته – جلسه ۶

0

آموزش طراحی سایت از مبتدی تا پیشرفته – جلسه ۶

با سلام

در این سری قصد داریم به صورت قدم به قدم 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 موفق باشید

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.