طراحی سایت در تهران، سیدخندان به سمت رسالت شرق، خیابان کابلی (دبستان)، نبش کوچه آگاهی، پلاک ۴ ، واحد ۱۵
۰۹۱۲۰۱۹۹۳۸۶   ۰۲۱۸۸۴۷۱۵۲۱

آموزش HTML – بخش اول

آموزش HTML | آموزش HTML5

گفتیم که در قدم اول باید با زبان HTML آشنا شویم. حال ببینیم که HTML چیست و چرا باید در ابتدا این زبان را آموخت؟

یک صفحه وب مجموعه ای از المان ها و عناصری است که با آرایش خاص در کنار یکدیگر چیده شده اند. برای ایجاد یک صفحه وب در ابتدا باید اسکلت و ساختمان اصلی آن ایجاد و هر قسمت از آن نشانه گذاری شود. منظور از نشانه گذاری این است که با استفاده از ابزاری خاص، قسمت و بخش های مختلف را تعریف کنیم. زبان HTML ( که مخفف Hyper Text Markup Language  است. ) ابزاری به نام تگ را در اختیار ما قرار می دهد تا بتوانیم به راحتی هر بخش و المان را نشانه گذاری و تعریف کنیم.

شروع کار با HTML

آموزش HTML – بخش اول

با ایجاد یک سند، یادگیری HTML را آغاز می کیم.

ابتدا نرم افزار Sublime Text را اجرا کرده و از قسمت File بر روی New File کلیک نمایید. می توانید همزمان کلید های Ctrl+N را فشار دهید تا یک سند جدید ایجاد شود. فایل ایجاد شده را باید ذخیره کنید. در منوی File بر روی Save As کلیک کنید.

آموزش HTML - بخش 1 | آموزش طراحی صفحات وب

سندمان را با نام index ذخیره کرده ایم. توجه داشته باشید که باید اسناد HTML را با همین پسوند ذخیره کنید. یعنی پس از تایپ نام دلخواه برای سند، عبارت .html و یا .htm را تایپ نمایید. همانند عکس بالا. حالا بر روی دکمه Save کلیک کنید. در خط اول نرم افزار sublime text عبارت html:5 را تایپ کنید و دکمه Tab را فشار دهید تا اسکلتن اصلی ایجاد شود. جهت استفاده از امکانات sublime  پکیج Emmet را نصب کنید. با کمی جستجو در اینترنت بسته به نوع ویندوز خود، می توانید این کار را انجام دهید.

توضیحات سند:

  • <!DOCTYPE html>  به مرورگر می گوید که سندی که ایجاد کرده ایم HTML5  است و به آن کمک می کند تا محتویات صفحه را به درستی نمایش دهد. این بخش باید در اولین خط از سند HTML نوشته شود و بهتر است با حروف بزرگ نوشته شود.
  • <html lang="fa"> : ریشه سند HTML است و تمام المان ها در این تگ قرار می گیرند.
  • <head> : اطلاعات متا، در این تگ قرار می گیرند.
  • <title> : عنوان سند در این تگ نوشته می شود.
  • <body> : تمام المان ها و اطلاعاتی که در مرورگر نمایش داده می شود در این تگ قرار می گیرند.

با تمام تگ های HTML به مرور آشنا خواهید شد. در طول آموزش ممکن است از تگ هایی استفاده ای شود که شما آن را ندیده اید. جای هیچ نگرانی نیست. همه تگ ها، در زمان مناسب توضیح داده خواهند شد. در هر مرحله با تگ های جدید آشنا خواهید شد و با تمرین و تکرار، در ذهنتان ثبت خواهد شد.

تگ های HTML

هر تگ HTML دارای نامی است که محتوایی را که می خواهیم در مرورگر نمایش دهیم، در آنها قرار می گیرند.

<tagname> محتوا در این قسمت قرار می گیرد </tagname>

هر تگ از دو قسمت تشکیل شده است.

Start tag: یا تگ آغاز که شروع تگ را نشان می دهد. مانند <p>

End tag: یا تگ پایان که در انتهای محتویات نوشته می شود و نشان دهنده ی پایان تگ است. این قسمت شامل یک ” / ” همراه با نام تگ می شود. مانند </p>

توجه داشته باشید که تگ آغاز و تگ پایان در مرورگر نمایش داده نمی شوند و تنها محتویات درون آنها نمایش داده می شود.

start tag را معمولا opening tag و end tag را closing tag می گویند.

سر صفحه ها در HTML

در زبان HTML برای نوشتن سر صفحه ( heading ) از ۶ تگ <h1>  تا <h6>  استفاده می کنیم. <h1>  دارای بیشترین اهمیت و بیشترین اندازه نمایش و <h6>  حائز کمترین اهمیت و به طبع کمترین اندازه برای نمایش می باشد. به مثال زیر توجه نمایید:

آموزش HTML – بخش اول

پاراگراف

پاراگراف را با تگ <p>  نشانه گذاری می کنیم:

آموزش HTML – بخش اول

لینک

برای ایجاد لینک، تگ <a>  استفاده می شود. با استفاده از خصیصه href آدرس صفحه و یا سایتی که می خواهیم لینک را به آن ارجاع دهیم را تعیین می کنیم.

آموزش HTML – بخش اول

وقتی که نشانگر موس را روی لینک قرار می دهید، شکل نشانگر تغییر می کند و در قسمت پایین مرورگر، آدرسی را که در href تعیین کرده بودیم نمایش داده می شود

تصویر

تگ <img>  برای قرار دادن یک عکس در سند استفاده می شود. این تگ دارای خصیصه های src برای آدرس دهی منبع عکس یعنی پوشه ای که عکس در آن قرار گرفته است، width و height برای عرض و ارتفاع عکس می باشد. خصیصه دیگری که باید برای تصاویر استفاده شود، خصیصه alt می باشد. در این خصیصه متنی را می نویسیم تا اگر تصویر به هر دلیلی لود نشد، آن متن در فضای تخصیص داده شده به تصویر نمایش داده شود:

آموزش HTML – بخش اول

اگر به هر دلیلی عکس نمایش داده نشود، متن alt نمایش داده خواهد شد. که این خصیصه به سئو سایت کمک می کند:

آموزش HTML – بخش اول

المان های تودرتو ( nested )

وقتی که یک المان از سند، یک یا چند المان دیگر را دربر بگیرد، حالت تو در تو یا nested به وجود می آید. همه ی اسنادی که با زبان HTML نشانه گذاری می شوند، قطعا شامل المان های تو در تو هستند.

همانطور که مشاهده می کنید، تگ <html>  تگ اصلی است و تمام تگ ها را دربر می گیرد که از خط ۲ آغاز شده و در خط ۱۱ بسته می شود. درون تگ <html>  تگ های <head>  ( خطوط ۳ تا ۶ ) و <body>  ( خطوط ۷ تا ۱۱ ) قرار گرفته اند که این تگ ها نیز، تگ های دیگری را در برگرفته اند. در واقع همان حالت nested که در بالا توضیح داده شد ایجاد شده است.

تگ های پایان را حتما بنویسید. البته بعضی از تگ ها، مثل تگ <p>  در صورتی که تگ پایان هم نوشته نشود، محتوا را به درستی نمایش می دهند. اما بهتر است که همیشه تگ پایان نوشته شود. همچنین توجه داشته باشید که در تگ پایان، علامت ” / ” را قبل از نام تگ بنویسید.

تگ <br>

برای شکستن خط، همانند فشردن دکمه Enter در نرم افزار word و تایپ در ابتدای خط بعدی، تگ <br>  استفاده می شود.

استفاده از حروف بزرگ یا کوچک؟

برای نوشتن تگ ها هم میتوان از حروف بزرگ و هم از حروف کوچک استفاده کرد یعنی <p>  با <P> هیچ فرقی ندارد اما همیشه تگ ها را با حروف کوچک می نویسیم.

خصوصیات ( Attributes )

خصیصه ها اطلاعاتی هستند که برای منظوری خاص به المان ها می افزاییم و همیشه در تگ آغاز و به صورت name=value  نوشته می شوند. یعنی وقتی که تگی را باز می کنیم، بعد از نوشتن نام تگ، خصیصه ای را که می خواهیم به آن تگ نسبت دهیم را می نویسم و بعد علامت مساوی (=) و در ادامه مقدار مناسب برای آن خصیصه را در علامت نقل قول (” “) می نویسیم. توجه داشته باشید که می توانیم علامت نقل قول را استفاده نکنیم. اما بهتر است که همیشه از آن استفاده شود. با تمام خصیصه ها ی تگ ها به مرور و در بین مثال ها آشنا می شوید.

خصیصه lang

زبان محتوای متنی را در تگ <html>  با استفاده از خصیصه lang تعیین می کنیم.

خصیصه عنوان

حتما در هنگام جستجو و مطالعه صفحات وب، با متن هایی مواجه شده اید که و قتی نشانگر موس را روی آن قرار می دهید، متنی در کنار نشانگر نمایش داده می شود، که به آن tooltip می گوییم. این متن را با استفاده از خصیصه title تعیین می کنیم:

آموزش HTML – بخش اول

در این جلسه با مباحث اولیه HTML آشنا شدیم. در هر جلسه نکات و مطالب جدید را خواهیم آموخت و گام به گام بر دانش خود خواهیم افزود.

در پایان لازم به ذکر است که شما دوستان و همراهان گرامی می توانید سوالات خود در زمینه مطالب گفته شده در این جلسه را در قسمت نظرات مطرح نمایید و در کمترین زمان پاسخ خود را از کارشناسان سایت سازان دریافت نمایید. همچنین نظرات و پیشنهادات شما عزیزان موجب دلگرمی ما و ارائه هر چه بهتر مطالب خواهد شد.

نوشته های مرتبط

دیدگاه ‏خود را بنویسید