تبلیغات
برترین وبلاگ آموزش برنامه نویسی - جلسه ششم آموزش html
 
برترین وبلاگ آموزش برنامه نویسی
درباره وبلاگ


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

مدیر وبلاگ : محمدرضا اسماعیلی
موضوعات
نظرسنجی
سطح تدریس در این وبلاگ چگونه است؟







آمار وبلاگ
  • کل بازدید :
  • بازدید امروز :
  • بازدید دیروز :
  • بازدید این ماه :
  • بازدید ماه قبل :
  • تعداد نویسندگان :
  • تعداد کل پست ها :
  • آخرین بازدید :
  • آخرین بروز رسانی :
نقشه های تصویری:

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


لیست :


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

مثال زیر رو امتحان کنید:

<!DOCTYPE html>
<html>
<body>

<h2>Unordered List with Default Bullets</h2>

<ul>
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

</body>
</html>



تگ ol:

<!DOCTYPE html>
<html>
<body>

<h2>Ordered List</h2>

<ol>
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

</body>
</html>

فرق تگ ol با تگ ul اینه که یکی پارامتر ها رو با شماره نشون میده و یکی با علامت دایره...البته میشه کاری کرد که مثلا با علامت مربع نشون بده یا ...

توی بخش css بهتون میگم چی کار باید بکنید..



تگ بعدی تگ dl یا definition list هستش...کد نویسیش به این شکل هست:

<!DOCTYPE html>
<html>
<body>

<h2>A Description List</h2>

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

</body>
</html>

میتونید به صورت ترکیبی هم از تگ ها استفاده کنید:


<!DOCTYPE html>
<html>
<body>

<h2>A Nested List</h2>

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
    <li>Black tea</li>
    <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>


بسته به نیازتون میتونید از یکی از لیست ها استفاده کنید...

خیلی خوب..فعلا..کد زیر رو هم یه نگاهی بندازید..:

<!DOCTYPE html>
<html>

<head>
<style>
ul#menu {
    padding: 0;
}

ul#menu li {
    display: inline;
}

ul#menu li a {
    background-color: black;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px 4px 0 0;
}

ul#menu li a:hover {
    background-color: orange;
}
</style>
</head>

<body>

<h2>Horizontal List</h2>

<ul id="menu">
 <li><a href="html_tables.asp">Tables</a></li>
 <li><a href="html_lists.asp">Lists</a></li>
 <li><a href="html_blocks.asp">Blocks</a></li>
 <li><a href="html_classes.asp">Classes</a></li>
</ul>  

</body>
</html>






نوع مطلب :
برچسب ها :
لینک های مرتبط :

       نظرات
سی ام آبان 93
محمدرضا اسماعیلی
بیست و هفتم شهریور 96 03:04 ب.ظ
Outstanding post but I was wondering if you could write a litte more on this subject?

I'd be very thankful if you could elaborate a little
bit more. Many thanks!
سیزدهم مرداد 96 04:21 ب.ظ
I know this web page presents quality based articles or reviews and other information, is there any other website which gives these kinds of stuff in quality?
سوم مرداد 96 08:55 ب.ظ
Today, I went to the beach with my kids. I found a sea shell and gave it to
my 4 year old daughter and said "You can hear the ocean if you put this to your ear." She put the shell to her ear and screamed.
There was a hermit crab inside and it pinched her ear. She never wants to go back!
LoL I know this is entirely off topic but I had to tell someone!
بیست و ششم اردیبهشت 96 05:23 ق.ظ
بسیار چلیپا از خود نوشتن در حالی که ظاهر شدن مناسب در
آیا واقعا حل و فصل خوب با من پس از برخی از زمان.
جایی درون جملات شما قادر به من
مؤمن متاسفانه فقط برای بسیار در
حالی که کوتاه. من هنوز کردم مشکل خود را با فراز در منطق
و یک ممکن است را سادگی به پر همه
کسانی معافیت. در صورتی که شما در واقع که می توانید انجام من را مطمئنا تا پایان تحت تاثیر قرار داد.
بیست و پنجم اردیبهشت 96 03:23 ق.ظ
In fact when someone doesn't know afterward its up to other viewers
that they will assist, so here it happens.
محمدرضا اسماعیلیhttp://www.mreweb.ir/
هجدهم اردیبهشت 95 05:51 ب.ظ
اگه وب دیگه ای داری توی وبلاگ بنویس.
محمدرضا اسماعیلیشرکتی رو تازه تاسیس کردیم..انشالله ویدئو های آموزشیمون رو از طریق وب سایت شرکت منتشر خواهیم کرد.منتظر باشید
ششم فروردین 94 08:36 ب.ظ
سلام
خیلی باحال بود مطالبت :)
با تبادل لینک موافقی؟
موافق بودی لینک کن بعد خبر بده لینکت کنم
بیست و چهارم اسفند 93 03:33 ب.ظ
ممنون
بیستم اسفند 93 11:52 ب.ظ
سلام
ممنون از سایت خوبتون
چندتا سوال درباره #c دارم
کجا بپرسم؟
محمدرضا اسماعیلیبهم ایمیل بزنید..

esmaeeli1923@gmail.com
 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر