window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-22241525-4'); آموزش HTML جلسه سوم – Heading,Paragraph,Line,List

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

در ادامه ی آموزش 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>

Paragraph

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


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

Line

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


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

List

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

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

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


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

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

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


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

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

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


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

بابک حبیبی @http://twitter.com/babakhabibi

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

View Comments

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

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

Comments are closed.

Share
Published by
بابک حبیبی @http://twitter.com/babakhabibi
Tags: HTML Webdesign اچ تی ام ال طراحی سایت طراحی وب

Recent Posts

  • اخبار سایت

شروعی دوباره برای زوپیرنت

با سلام. با عرض پوزش فراوان بدلیل غیبت طولانی ما که دلیل‌های ریز و درشتی داشت. خیلی خلاصه و سریع…

5 سال ago
  • اندروید

چگونه حافظه ی داخلی اندرویدتان را آزاد کنید

اکثر موبایل هایی که سیستم عامل اندروید بر رویشان نصب هست دارای حافظه داخلی محدودی هستند و بعد از مدتی…

6 سال ago
  • توییتر
  • فایرفاکس
  • فیس بوک

مدیریت تمام اکانت های شبکه های اجتماعیتان در یک برنامه

وقتی که فعالانه به زندگی مجازی بپردازید کم کم تعداد سایت های که عضو میشید زیاد خواهد شد مخصوصا سایت…

6 سال ago
  • PHP برنامه نویسی

آموزش PHP – حلقه ها – جلسه هفتم

در ادامه مبحث آموزش PHP امروز به آموزش حلقه ها می رسیم که با ذکر مثال دستوراتن While , for…

6 سال ago
  • بازی

چرا در هنگام بازی در ویندوز دچار مشکل می شوید؟

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

6 سال ago
  • ویکی پدیا

پربازدیدترین صفحات فارسی در ویکی پدیا ۲۰۱۲

با تمام شدن سال میلاد 2012 آماری از پر بازدید ترین صفحات ویکی پدیا در زبان ها مختلف ارائه شده…

6 سال ago