تا %60 تخفیف خرید برای 5 نفر با صدور مدرک فقط تا
00 00 00
در توسینسو تدریس کنید

آموزش HTML گام به گام قسمت 2 : دستورات مقدماتی و معرفی ساختار


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

  1. ویرایشگر متن را باز کنید
  2. کدهایی را که در قسمت قبل این آموزش ذکر کردم را وارد کنید.
  3. فایل را با پسوند .html یا .htm ذخیره کنید.
  4. در نهایت برای مشاهده فایل به یک مرورگر احتیاج دارید که به صورت پیش فرض اینترنت اکسپلورر روی ویندوز نصب می باشد.

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

  • تمرین: سعی کنید بفهمید هر کدام از این کدها چه کاربردی دارند(اگر نمیدانید به آموزش قبلی مراجعه کنید).

دو یاددآوری کوچک


  • هر سند اچ تی ام ال حتما باید شامل یک اظهارکننده و یک کد <html></html> باشد.
  • بخش قابل رویت در مرورگر را در قسمت <body></body> می نویسند.

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

به این کد دقت کنید:

<h1> Heading </h1>

همانطور که می بینید با <h1> شروع شده (قسمت آغاز) و با </h1> پایان یافته است (قسمت پایان).

تگ عنوان بندی


خب اولین تگی که می خواهم به شما یاد بدم تگ یا دستور عنوان بندی می باشد: به بزرگی و کوچکی عبارت های زیر توجه داشته باشید:

عنوان

عنوان

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

<h1>ITPRO</h1>
<h2>ITPRO</h2>
<h3>ITPRO</h3>
<h4>ITPRO</h4>
<h5>ITPRO</h5>
<h6>ITPRO</h6>

این دستورات را در نوت پد تایپ کنید و نتیجه را ببینید. کلمه ITPRO به ترتیب از بالا به پایین کاهش سایز می دهد. پس تگ <h1> تا <h6> برای عنوان بندی با 6 سایز مختلف به کار برده می شود.

تگ پاراگراف:


دومین تگ مهم در اچ تی ام ال تگ پاراگراف می باشد. پاراگراف بندی در صفحات وب بسیار مهم است تگ پاراگراف به صورت زیر استفاده می شود:

<p>Paragraph</p>

تگ لینک:


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

<a href="www.ITPRO.ir">ITPRO</a>

تگ تصویر:


برای استفاده از تصاویر در صفحات وب کافی است از تگ <img> استفاده کنید این دستور تگ پایانی ندارد، یعنی در انتها از </img> استفاده نمی شود. این تگ دارای صفتی به اسم src می باشد که آدرس تصویر را دریافت می کند.

<Img src="c:/icon.png">

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

نویسنده : ارسطو عباسی

منبع : جزیره طراحی و توسعه وب وب سایت توسینسو

هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

نظر شما
برای ارسال نظر باید وارد شوید.
4 نظر
افرادی که این مطلب را خواندند مطالب زیر را هم خوانده اند