آموزش HTML جلسه سوم – Heading,Paragraph,Line,List

نویسنده: بابک حبیبی
تاریخ: ۱۳۹۰ - ۱۲ - ۲۳
دسته بندی: HTML اچ تی ام ال

در ادامه ی آموزش HTML که پایه ی طراحی سایت هست به دستورات اولیه آن و نحوه ی کار با آن های می پردازیم. برای شروع آموزش دستورات اصلی HTML با مثالی همراه میشویم :


<body>
 <h1>درباره ی زوپیرنت</h1>
 <p>این سایت برای آموزش مباحث کامپیوتری ساخته شده است</p>
 <hr>
 <h2>چرا زوپیرنت؟</h2>
 <p>زیاد ما برای رسیدن به این اهداف فعالیت می کنیم:</p>
 <ul>
 <li>آموزش اینترنت از ۰ تا حرفه ای</li>
 <li>آموزش دوره های بین المللی </li>
 <li>آموزش مفاهیم و تکنیک های جدید در دنیا</li>
 </ul>
 </body>

Heading

این تگ برای عنوان ها به کار میرود،به طور مثال وقتی بخواهید عنوان یک مطلب را مشخص کنید با استفاده از این تگ ها : <h1> <h2> <h3> <h4> <h5> <h6> این کار را انجام میدهید،به این  صورت که <h1> بزرگترین سایز و <h6> کوچکترین سایز است.توجه داشته باشید که Heading ها در SEO وب سایتتان تاثیر دارد.


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

Heading in HTML

Paragraph

برای نشان دادن پاراگراف استفاده میشود و با تگ <p> نشان داده میشود.


<p>This is paragraph 1</p>
 <p>This is paragraph 2</p>

Paragraph in HTML

Line

برای کشیدن یک خط افقی به کار میرود و با تگ <hr> نشان داده میشود.


<p>This is paragraph 1</p>
 <hr>
 <p>This is paragraph 2</p>

Line in HTML

List

برای درست کردن لیست در وب سایت بکار می رود.

– لیست بدون ترتیب  unordered list

برای ساختن لیست بدون ترتیب از تگ <ul> استفاده میشود و برای نشان دادن اجزای لیست یا همان فرزند لیست از <li> استفاده میشود.


<ul>
 <li>List 1</li>
 <li>List 2</li>
 <li>List 3</li>
 </ul>

لیست بدون ترتیب در HTML

– لیست با ترتیب ordered list

برای ساختن لیست با ترتیب از تگ <ol> استفاده میشود و برای نشان دادن اجزای لیست یا همان فرزند لیست از <li> استفاده میشود.خاصیت type نوع ترتیب را نشان می دهد که بعد ها با آن بیشتر آشنا میشویم،بطور مثال الان از الفبای کوچک انگلیسی استفاده کرده است.


<ol type="lower-alpha">
 <li>sample1</li>
 <li>sample2</li>
 <li>sample3</li>
 </ol>

لیست با ترتیب در HTML

– لیست تعریفی definition list

برای ساختن لیست با ترتیب از تگ <dl> استفاده میشود و برای نشان دادن عنوان از تگ <dt> و برای نشان دادن زیر عنوان یا همان فرزند از <dd> استفاده میشود.


<dl>
 <dt>tarm1</dt>
 <dd>difinition1</dd>
 <dt>tarm2</dt>
 <dd>difinition2</dd>
 </dl>

لیست تعریفی در HTML

برچسب: - - - -

درباره ی

بابک حبیبی،دانشجوی لیسانس نرم افزار،برنامه نویس پی اچ پی،طراح وب،یه سری تخصص هم در شبکه و مباحث امنیتی دارم.

۳ نظر به “آموزش HTML جلسه سوم – Heading,Paragraph,Line,List” ثبت شده است

  1. TATAR گفت:

    ممنون دوست گرامی.ولی یه مشکلی هست اینجا.من الان وبلاگ رو طوری تنظیم کردم که فقط ۳ پست ارسالی نمایش بده.و اگه تعداد پست ها بیشتر بشه مطمئنا ارتفاع قالب زیاد میشه و به همون طبع هم sidebar از ارتفاع گفته شده ی ۳۳۰۰ بیشتر میشه و باز همون آش هست و همون کاسه.تازه اگه من بخوام ارتفاع sdiebar زو زیاد کنم (و مقدار دهی کنم) در موضوعاتی که مطالبی براش وجود نداره اندازه ی قالب خیلی بزرگ میشه و این شکل بدی به قالب میده.
    من خوودم این مقادیر رو قبلا امتحان کردم،متاسفانه جوابی نگرفتم.
    بازم ازتون ممنوم که پیگیر کار من بودین.اگه به یه نتیجه ی بهتری رسیدین ممنون میشم در جریانم قرار دهید.

  2. TATAR گفت:

    سلام و خسته نباشید بابت آموزش های بسیار خوب و مفیدتون.
    حقیقتش من دنبال رفع مشکلم میگشتم که به سایت شما رسیدم.
    من یه قالب برا ی وبلاگم دست و پا کردم.ولی یه جایش میلنگه.و اونم sidebar هست.اگه دقت کنین میبینین که sidebar تا پایین نرفته و تا نصفه قطع شده.خیلی باهاش کرنجال رفتم،ولی نتونستم حلش کنم.نمیدونم مشکلش از کجاست.شاید مشکلش تو جایگذاری کد های وبلاگ میهن بلاگ باشه.شایدم باید تو Css یه مقدار بنویسی.
    ازتون خواهش میکنم کمکم کنید.
    ممنون.(لطفا به امیل یا وبلاگم خبر رو ارسال کنید.)
    اگه دوست داشتین لینکتون هم میکنم.
    http://www.higgs.mihanblog.com
    http://www.forum.lianportal.com/users/132/