در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

آموزش 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">

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

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

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

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

#آموزش_قدم_به_قدم_html #آموزش_html_و_css #آموزش_تگ_ها_در_html #آموزش_html #آموزش_طراحی_وبسایت_با_html #آموزش_گام_به_گام_html #آموزش_مقدماتی_html_و_css #استفاده_از_تگ_های_html #آموزش_مقدماتی_html
عنوان
1 آموزش HTML گام به گام قسمت 1 : معرفی و آشنایی کلی رایگان
2 آموزش HTML گام به گام قسمت 2 : دستورات مقدماتی و معرفی ساختار رایگان
3 آموزش HTML گام به گام قسمت 3 : صفحات یا Attributes و نکات مربوطه رایگان
4 آموزش HTML گام به گام قسمت 4 : عنوان بندی و تگ های جدید رایگان
5 آموزش HTML گام به گام قسمت 5 : استایل و فرمت متن ها رایگان
6 آموزش HTML گام به گام قسمت 6 : نقل قول و درج توضیحات رایگان
7 آموزش HTML گام به گام قسمت 7 : استفاده از رنگ رایگان
8 آموزش HTML گام به گام قسمت 8 : CSS چیست و مقدمات آن رایگان
9 آموزش HTML گام به گام قسمت 9 : لینک ها رایگان
10 آموزش HTML گام به گام قسمت 10 : تصاویر رایگان
11 آموزش HTML گام به گام قسمت 11 : جداول رایگان
12 آموزش HTML گام به گام قسمت 12 : لیست ها رایگان
13 آموزش HTML گام به گام قسمت 13 : بلاک و کلاس ها رایگان
14 آموزش HTML گام به گام قسمت 14 : قاب بندی رایگان
15 آموزش HTML گام به گام قسمت 15 : تگ عنوان یا Head رایگان
16 آموزش HTML گام به گام قسمت 16 : چند قانون ساده رایگان
17 آموزش HTML گام به گام قسمت 18 : فرم ها رایگان
18 آموزش HTML گام به گام قسمت 19 : کنترل ها و اجزای فرم رایگان
19 آموزش HTML گام به گام قسمت 20 : انواع ورودی رایگان
20 آموزش HTML گام به گام قسمت 21 : خاصیت های تگ input رایگان
21 آموزش HTML گام به گام قسمت 22 : چندرسانه/ویدیو و صدا رایگان
22 آموزش HTML گام به گام قسمت 23 : مدیریت بهتر لایه های وب رایگان
زمان و قیمت کل 0″ 0
2 نظر
محمد برزگر

سلام ممنون از تدریس خوبتون

سوالی که از خدممتون داشتم این هست که :

شما از تگ image استفاده کردین و در اتربیوت src شما آدرسی رو به عنوان مثلا از پوشه pc خودتون در درایو و پوشه ای دادین...

 یعنی همونطور که در cmd آدرس میدیم ، در همین جا هم باید همینطور آدرس داد؟( البته بدون این که دستور cd رو وارد کنیم برای جلو و عقب برگشتن و ...یا رفتن به پوشه ی خاصی..چون که پیش میاد بخوایم آدرس بدیم دو تا پوشه عقب و مثلا سه تا پوشه جلو بریم در این شرایط چطور میشه؟)

ارسطو  عباسی

بله اینجا هم ساختار آدرس به همین صورت است. مثالا

img/icon.png
نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره پاییزه می تونی امروز ارزونتر از فردا خرید کنی ....