آموزش کن وس Canvas

یکی از داغ ترین موضوعات HTML5 موضوع canvas می باشد، اما دقیقا canvas چیست؟
canvas یک پارچه ی ساده بافته شده ی سنگین می باشد که برای ساختن قایق، چادر، کوله پشتی، خیمه و دیگر ابزاری که استحکام لازم دارند، استفاده می شود. و همچنین توسط نقاشان به عنوان سطح نقاشی که روی چارچوب چوبی نصب شده باشد، استفاده می شود.
شاید این جوابی که شما به دنبال آن بودید، نباشد.به هرحال canvas در HTML5 از کاربرد آن توسط هنرمندان تقلید می کند و بوم نقاشی نامیده می شود.
بوم نقاشی یک فضای خالی بدون رنگ ( حتی بدون سفید) است، که قرار است با مداد و قلم موی جاوااسکریپت تبدیل به یک کار هنری شود.
البته که وجود بوم نقاشی تنها برای یک تصویر ثابت نیست. تصویر ثابت می تواند به سادگی به وسیله ی عنصر قدیمی img مورد بررسی قرار بگیرد. با جاوااسکریپت به عنوان قلم موی خود، می توانید یک انیمیشن شاد و یا حتی بازیهای تکرار شونده ایجاد کنید.
اگر قبلا انیمیشن های درخشانی ایجاد کرده اید و امید دارید که یک ورژن HTML5 ایجاد کنید، ابزاری وجود دارند که در انجام آن به شما کمک می کنند. یکی از آنها Flash to HTML5 می باشد.
HTML5 مقوله ی خیلی بزرگی است، آنقدر بزرگ که می توانید در مورد آن یک کتاب بنویسید. هدف من در این آموزش تحت پوشش قرار دادن جزئیات مربوط به بوم نقاشی نیست، بلکه تنها معرفی مختصری از آن است. به یاد داشته باشد که این تنها شروع آن است.
برای ایجاد بوم نقاشی، کد ساده ی زیر لازم است.

به هرحال به یاد داشته باشید که مرز یک بوم نقاشی یک آبجکت ناپیداست. این برنامه فضایی را می گیرد اما شما آن را نمی بینید. اجازه دهید یک سبک مرزی اضافه کرده و از ID برای مرجع استفاده کنیم. هدف از ID این است که با استفاده از DOM (document object model) آن را قابل دسترس کنیم. بدون مرجع ID، جاوا اسکریپت، در این مورد قلم موی شما، هیچ ایده ای برای نقاشی روی بوم ندارد.

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

Basic Canvas Support

Basic Canvas Support	Browsers
✓ (requires ExplorerCanvas)	IE 7
✓	IE 9 Beta
✓	Firefox 3.0
✓	Safari 3.0
✓	Chrome 3.0
✓	Opera 10

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

آموزش طراحی سایت دوره آموزش طراحی سایت فیلم دوره آموزش طراحی سایت آموزش برنامه نویسی آموزش طراحی وب آموزش طراحی وب سایت

افشین پنج‌شنبه 14 مرداد 1400 ساعت 15:57

0 نظر

HTML Style Sheet

آموزش طراحی سایت

آموزش Cascading style sheet ‏ ‏

Cascading style sheet (CSS) بیان می کند که داکیومنت ها روی صفحه و در چاپ چگونه نشان داده می شوند، یا شاید چگونه بیان می شوند. از زمانی که کنسرسیوم در سال 1994 تاسیس شد، W3C به طور فعالانه ای در استفاده از Style sheet روی وب پیشرفت کرده است.
CSS جایگزین های ساده و موثری را برای تعیین ویژگی های مختلف برچسب های HTML ارائه می دهد. با استفاده از CSS شما می توانید تعدادی از ویژگی های طراحی را برای یک HTML ارائه شده تعیین کنید. هر ویژگی دارای نام مقدار میباشد که به وسیله ی علامت (:) از هم جدا شده اند. اطلاعیه ی مربوط به هر ویژگی نیز توسط علامت نقطه ویرگول (;) از یکدیگر جدا شده اند.

مثال:

ابتدا اجازه بدهید که مثالی از داکیومنت HTML را مورد بررسی قرار دهیم که برای تعیین رنگ و اندازه ی فونت از برچسب استفاده می کند.

نمونه یک

<!DOCTYPE html>

<html>

<head>

</head>

<body>

Hello, World!

</body>

</html>

می توانیم با استفاده از style sheet مثال بالا را مانند زیر بازنویسی کنیم.

نمونه دوم

<!DOCTYPE html>

<html>

<head>

</head>

<body>

Hello, World!

</body>

</html>

شما می توانید به سه روش از CSS در داکیومنت HTML خود استفاده کنید.

Style sheet خارجی – قوانین style sheet را در یک فایل css مجزا تعریف می کند، و سپس آن فایل را با استفاده از برچسب در HTML وارد داکیومنت HTML شما می کند.
Style sheet داخلی – قوانین style sheet را در با استفاده از برچسب< style>در بخش سربرگ داکیومنت HTML تعریف می کند.
Inline style sheet – قوانین style sheet را مستقیما و به همراه عناصر HTML با استفاده از ویژگی style تعریف می کند.

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

Style sheet خارجی

اگر می خواهید از style sheet خود در صفحات مختلف استفاده کنید، توصیه می شود که یک style sheet متداول در یک فایل مجزا تعریف کنید. یک فایل cascading style sheet دارای ضمیمه هایی مانند css می باشد و با استفاده از برچسب < link> وارد فایل های HTML خواهد شد.

مثال:

توجه داشته باشید که ما یک فایل style sheet به نام style.css که دارای قوانین زیر می بشد، تعریف می کنیم.

.red{

   color: red;

}

.thick{

   font-size:20px;

}

.green{

   color:green;

}

در اینجا سه قانون CSS را تعریف کردیم که برای سه گروه متفاوت تعریف شده در برچسب های HTML مناسب می باشند. پیشنهاد می کنم در مورد چگونگی تعریف این قوانین خود را اذیت نکنید، زیرا هنگام مطالعه ی CSS آنها را فرا خواهید گرفت. اکنون اجازه بدهید از فایل CSS خارجی بالا در داکیومنت HTML زیر استفاده کنیم.

< !DOCTYPE html>
 
< html>
< head>
< title>HTML External CSS< /title>
<link rel="stylesheet" type="text/css" href="/html/style.css">
 
< /head>
< body>
< p class="red">This is red< /p>
  
< p class="thick">This is thick< /p>
  
< p class="green">This is green< /p>
  
< p class="thick green">This is thick and green< /p>
< /body>
< /html>

این مثال نتیجه ی زیر را تولید خواهد کرد.

This is red
This is thick
This is green
This is thick and green

Style sheet داخلی

اگر می خواهید قوانین style sheet را برای یک داکیومنت مجزا به کار ببرید، فقط آن موقع است که می توانید این قوانین را با استفاده از برچسب< style>وارد بخش سربرگ داکیومنت HTML کنید.

قوانین تعریف شده در style sheet داخلی، قوانین تعریف شده در فایل CSS خارجی را نیز در بر می گیرد.

مثال:

اجازه بدهید مثال بالا را یک بار دیگر بازنویسی کنیم، اما در اینجا قوانین style sheet را در همان داکیومنت HTML و با استفاده از برچسب< style>می نویسیم.

نمونه سوم

<!DOCTYPE html>

<html>

<head>

<title>HTML Internal CSS</title>

.red {

color: red;

}

.thick {

font-size: 20px;

}

.green {

color: green;

}

</style>

</head>

<body>

This is red

This is thick

This is green

This is thick and green

</body>

</html>

شما می توانید با استفاده از ویژگی style از برچسب مربوطه، قوانین style sheet را مستقیما برای هر عنصر HTML به کار برید. این امر فقطزمانی می تواند انجام شود که شما علاقمند به ایجاد تغییرات خاص در هرکدام از عناصر HTML می باشید.

قوانین تعریف شده با عنصر درون خطی، قوانین تعریف شده در یک فایل CSS خارجی و نیز قوانین تعریف شده در یک عنصر< style>را در برمی گیرد. اجازه بدهید مثال بالا را یک بار دیگر بازنویسی کنیم، اما این بار قوانین style sheet را همراه با قوانین HTML و با استفاده از ویژگی style در عناصر خواهیم نوشت.

نمونه چهارم

<!DOCTYPE html>

<html>

<head>

<title>HTML Inline CSS</title>

</head>

<body>

This is red

This is thick

This is green

This is thick and green

</body>

</html>

آموزش html css آموزش طراحی سایت دوره آموزش طراحی سایت آموزش برنامه نویسی

افشین سه‌شنبه 22 تیر 1400 ساعت 16:34

0 نظر

آموزش لینک ایمیل در HTML

آموزش طراحی سایت - آموزش لینک ایمیل در HTML

لینک ایمیل HTML

قرار دادن یک لینک ایمیل HTML روی صفحه ی وب خود کار سختی نیست، اما این کار ممکن است باعث بروز مشکل اسپم های غیرضروری در اکانت ایمیل شما شود. افرادی هستند که می توانند برنامه هایی را برای جمع آوری چنین ایمیل هایی اجرا کنند و سپس آنها را با راه های مختلف برای اسپم کردن استفاده کنند.
می توانید از گزینه دیگری استفاده کنید تا افراد به راحتی بتوانند به شما ایمیل ارسال کنند. یک گزینه می تواند استفاده از فرم های HTML باشد برای جمع آوری داده های یوزر و سپس استفاده ازاسکریپت PHP یا CGI برای ارسال ایمیل.
برای یک مثال ساده، فرم Contact Us را چک کنید. با استفاده از این فرم یک فیدبک از یوزر گرفته و سپس از یک برنامه ی CGI استفاده می کنیم که در حال جمع آوری این اطلاعات و ارسال ایمیل به یک email ID ارائه شده می باشد.

برچسب HTML Email

برچسب < a> در HTML برای مشخص کردن یک آدرس ایمیل و ارسال ایمیل، گزینه هایی را به شما ارائه می دهد. در حالیکه از برچسب < a> به عنوان یک email tag استفاده می کنید، از mailto:email address همراه با ویژگی href نیز استفاده خواهید کرد. در زیر ترکیب استفاده از mailto را به جای استفاده از http می بینید.

نمونه یک

<!DOCTYPE html>

<html>

<head>

<title>SendMail</title>

</head>

<body>

<a href="mailto:abc@example.com">Send Email</a>

</body>

</html>

اکنون اگر یوزر روی این لینک کلیک کند، email client آغاز به کار خواهد کرد ( مانند lotus notes و outlook express و غیره.) که روی کامپیوتر شما نصب شده است. ریسک دیگری در استفاده از این گزینه برای ارسال ایمیل وجود دارد، زیرا اگر یوزر email client نصب شده روی کامپیوتر خود نداشته باشد، ارسال ایمیل ممکن نحواهد بود.

تنظیمات پیش فرض

شما می توانید یک موضوع ایمیل و یک بدنه ی ایمیل پیش فرض همراه با آدرس ایمیل خود ایجاد کنید. در زیر مثال استفاده از بدنه و موضوع پیش فرض را مشاهده می کنید.

نمونه دو

<!DOCTYPE html>

<html>

<head>

<title>SendMail</title>

</head>

<body>

Send Feedback

</a>

</body>

</html>

آموزش طراحی سایت دوره آموزش طراحی سایت آموزش طراحی وب آموزش برنامه نویسی آموزش طراحی سایت با html

افشین سه‌شنبه 4 خرداد 1400 ساعت 16:30

0 نظر

آموزش لینک های عکس در html

آموزش طراحی سایت - آموزش لینک های عکس در html

آموزش Image Link

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

مثال:

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

نمونه یک

<!DOCTYPE html>

<head>

<title>Image Hyperlink Example</title>

</head>

<body>

Click following link

</a>

</body>

</html>

این ساده ترین راه ایجاد هایپرلینک با استفاده از تصاویر می باشد.

تصاویر حساس به ماوس

استانداردهای HTML و XHTML یک ویژگی ارائه می دهند که به شما اجازه می دهد لینک های مختلفی را در داخل یک تصویر اجرا کنید. شما می توانید براساس مختصات مختلف موجود روی تصویر، لینک های مختلفی را روی یک تصویر مجزا ایجاد کنید. زمانی که لینک های متفاوت به مختصات متفاوت ضمیمه می شود، می توانیم برای باز کردن داکیومنت های تارگت روی بخش های مختلف تصویر کلیک کنیم. چنین تصاویری که به ماوس حساس می باشند، تصاویر نقشه نامیده میشوند. دو روش برای ایجاد چنین تصاویری وجود دارد.

Server-side image maps - توسط ویژگی ismap از برچسب < img> فعال می شود و دستیابی به یک سرور و پردازش برنامه های مربوط به تصویر نقشه لازم می باشد.
Client-side image maps - با استفاده از ویژگی usemap از برچسب < img> همراه با برچسب های متناظر< map> و < area> ایجاد می شود.

Server side image maps

آموزش html css

در اینجا به سادگی تصویر خود را داخل یک هایپرلینک قرار داده و از ویژگی ismap استفاده کنید که آن را یک تصویر خاص می سازد و وقتی یوزر در بخشی از تصویر کلیک می کند، مرورگر مختصات اشاره گر ماوس را همراه با URL مشخص شده در برچسب < a>به سرور وب منتقل می کند. سرور از مختصات اشاره گر ماوس استفاده می کند تا تعیین کند کدام داکیومنت باید به مرورگر بازگردانده شود.
زمانی که ismap استفاده می شود، ویژگی href از برچسب < a> باید URL یک برنامه ی سرور را مانند یک cgi یا اسکریپت PHP و غیره در برداشته باشد، تا درخواست ورودی را براساس مختصات انتقال داده شده پردازش کند. مختصات موقعیت ماوس پیکسل های صفحه میباشند که از گوشه ی بالای سمت چپ تصویر شمرده می شوند و با (0,0) شروع می شوند. مختصات دنبال شده با یک علامت سوال، به انتهای URL اضافه می شوند.

مثال:

نمونه دو

<!DOCTYPE html>

<html>

<head>

<title>ISMAP Hyperlink Example</title>

</head>

<body>

Click following link

</a>

</body>

</html>

سپس مرورگر پارامترهای جستجوی زیر را به سرور می فرستد که می تواند توسط اسکریپت ismap.cgi یا فایل map پردازش شود و شما می توانید هر داکیومنتی را که دوست داشته باشید به این مختصات لینک کنید.

/cgi-bin/ismap.cgi?20,30

از این طریق شما می توانید لینک های مختلفی را به مختصات متفاوت یک تصویر اختصاص دهید، و وقتی این مختصات کلیک می شوند، می توانید داکیومنت های لینک شده ی متناظر را باز کنید.

توجه:

شما برنامه نویسی CGI را زمانی فراخواهید گرفت که برنامه نویسی perl را مطالعه کنید. می توانید اسکریپت خود را بنویسید تا این مختصات انتقال داده شده را با استفاده از PHP یا هر اسکریپت دیگری پردازش کنید. فعلا اجازه بدهید روی یادگیری HTML تمرکز کنیم، می توانید این فصل را بعدا بازبینی کنید.

Client side image maps

این تصاویر به وسیله ی ویژگی usemap از برچسب < img> فعال می شوند و به وسیله ی برچسب های ضمیمه ی< map>و< area> تعریف می شوند.
نقشه ای که قرار است نقشه را طراحی کند، به وسیله ی< img> به عنوان یک تصویرعادی وارد صفحه می شود، به جز اینکه این مورد ویژگی اضافه ای به نام usemap همرا خود دارد. مقدار ویژگی usemap مقداری می باشد که در یک برچسب< map>استفاده می شود تا برچسب های تصویر و نقشه را لینک کند.< map>همراه با برچسب های< area> همه ی مختصات تصویر و لینک های مربوطه را تعریف می کند.
برچسب< area> در داخل برچسب نقشه مختصات و شکل حاشیه های قابل کلیک در داخل تصویر را تعریف می کند. در اینجا مثالی از تصویر نقشه می بینید.

نمونه سه

<!DOCTYPE html>

<head>

</head>

<body>

</map>

</body>

</html>

سیستم مختصات

مقدار حقیقی مختصات کانلا به شکل در سوال وابسته است. در اینجا خلاصه ای می بینید که قرار است با مثال های مفصل دنبال شوند.

rect = x1 , y1 , x2 , y2

x1 و y1 مختصات گوشه ی بالای سمت چپ از مستطیل می باشد. x2 و y2 مختصات گوشه ی سمت راست پایین می باشند.

circle = xc , yc , radius

xc و yc مختصات مرکز دایره و radius شعاع دایره می باشد. دایره ای به مرکز200,50 با شعاع 25 دارای ویژگی coords="200,50,25" خواهد بود.

poly = x1 , y1 , x2 , y2 , x3 , y3 ,... xn , yn

جفت های مختلف x-y رئوس چند ضلعی می باشند، با یک خط که از یک نقطه به نقطه ی دیگر کشیده شده. یک چندضلعی لوزی شکل با بالاترین راس آن در نقطه ی 20،20 و 40 پیکسل، در عریض ترین نقطه ی خود دارای ویژگی coords="20,20,40,40,20,60,0,40" می باشد.
تمام مختصات مربوط به بالاترین گوشه ی سمت چپ تصویر می باشند. هر شکل دارای یک URL مربوطه می باشد. می توانید از هر نرم افزار تصویری برای دانستن مختصات موقعیت های نختلف استفاده کنید.

آموزش طراحی سایت آموزش html آموزش html css آموزش جاوا اسکریپت آموزش Bootstrap 4 آموزش برنامه نویسی

افشین یکشنبه 2 خرداد 1400 ساعت 12:31

0 نظر

آموزش طراحی سایت - آموزش List

آموزش List

HTML سه روش برای مشخص کردن لیست هایی از اطلاعات ارائه می دهد. تمام لیست ها باید شامل یک یا بیشتر ازیک عنصر باشند. لیست ها ممکن است شامل موارد زیر شوند.

< ul>- لیست بدون ترتیب. این لیست آیتم ها را با استفاده از bullet های ساده لیست می کند.
< ol> - لیست منظم. این لیست از نمودارهای عددی مختلف برای لیست کردن آیتم های شما استفاده می کند.
< dl>- لیست تعریف. این لیست آیتم های شما را به همان روشی که در دیکشنری منظم شده اند، منظم می کند.

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

لیست بدون ترتیب مجموعه ای از آیتم های مربوط به هم می باشد که هیچگونه نظم و ترتیب خاصی ندارند. این لیست با استفاده از برچسب < ul> در HTML ایجاد می شود. هر آیتم در لیست با یک bullet مشخص می شود.

مثال:

نمونه یک

<!DOCTYPE html>

<html>

<head>

<title>HTML Unordered List</title>

</head>

<body>

<ul>

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ul>

</body>

</html>

ویژگی type

می توانید از ویژگی type برای برچسب < ul> استفاده کنید تا نوع bullet خود را مشخص کنید، که به طور پیش فرض یک دیسک می باشد. در زیر گزینه های ممکن را مشاهده می کنید.

1

2

3

<ul type="square">
<ul type="disc">
<ul type="circle"></ul></ul></ul>

در زیر مثالی را میبینید که در آن از < ul type="square"> استفاده می کنیم.

نمونه دو

<!DOCTYPE html>

<html>

<head>

<title>HTML Unordered List</title>

</head>

<body>

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ul>

</body>

</html>

در زیر مثالی را می بینید که در آن از < ul type="disc"> استفاده کرده ایم.

نمونه سه

<!DOCTYPE html>

<html>

<head>

<title>HTML Unordered List</title>

</head>

<body>

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ul>

</body>

</html>

در زیر مثالی را می بینید که در آن از < ul type="circle"> استفاده کرده ایم.

نمونه چهار

<!DOCTYPE html>

<html>

<head>

<title>HTML Unordered List</title>

</head>

<body>

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ul>

</body>

</html>

لیست های منظم HTML

اگر تمایل دارید آیتم های خود را به جای قرار دادن در یک لیست دارای bullet، در یک لیست عددگذاری شده قرار دهید، می توانید از لیست منظم HTML استفاده کنید. این لیست با استفاده از برچسب < ol> ایجاد می شود. شماره گذاری از یک شروع شده و برای هر لیست منظم عنصر بعدی با اضافه شدن یک عدد و به همراه برچسب< li>اضافه می شود.
می توانید از ویژگی type برای برچسب < ol> استفاده کنیم تا نوع شماره گذاریمورد نظر خود را مشخص کنید. به طور پیش فرض شماره گذاری به وسیله ی عدد انجام می شود. در زیر گزینه های ممکن را مشاهده می کنید.

<ol type="1">
    - Default-Case Numerals.
<ol type="I">
        - Upper-Case Numerals.
<ol type="i">
            - Lower-Case Numerals.
<ol type="a">
                - Lower-Case Letters.
<ol type="A"> - Upper-Case Letters.</ol></ol></ol></ol></ol>

در زیر مثالی را می بینید که در آن از < ol type="1"> استفاده کرده ایم.

نمونه پنج

<!DOCTYPE html>

<html>

<head>

<title>HTML Ordered List</title>

</head>

<body>

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ol>

</body>

</html>

در زیر مثالی را می بینید که در آن از < ol type="I"> استفاده می کنیم.

نمونه شش

<!DOCTYPE html>

<html>

<head>

<title>HTML Ordered List</title>

</head>

<body>

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ol>

</body>

</html>

ر زیر مثالی را میبینید که در آن از < ol type="i"> استفاده کرده ایم.

نمونه هفت

<!DOCTYPE html>

<html>

<head>

<title>HTML Ordered List</title>

</head>

<body>

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ol>

</body>

</html>

مثال:

در زیر مثالی را می بینید که در آن از < ol type="A"> استفاده کرده ایم.

نمونه هشت

<!DOCTYPE html>

<html>

<head>

<title>HTML Ordered List</title>

</head>

<body>

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ol>

</body>

</html>

در زیر مثالی را می بینید که در آن از< ol type="a"> استفاده کرده ایم.

نمونه نه

<!DOCTYPE html>

<html>

<head>

<title>HTML Ordered List</title>

</head>

<body>

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ol>

</body>

</html>

ویژگی start

شما می توانید از ویژگی start برای برچسب < ol> استفاده کنید تا نقطه ی شروع شماره گذاری خود را مشخص کنید. در زیر گزینه های ممکن را مشاهده می کنید.

<ol type="1" start="4">
    - Numerals starts with 4.
<ol type="I" start="4">
        - Numerals starts with IV.
<ol type="i" start="4">
            - Numerals starts with iv.
<ol type="a" start="4">
                - Letters starts with d.
<ol type="A" start="4">    - Letters starts with D.
</ol></ol></ol></ol></ol>

در زیر مثالی را می بینید که در آن از < ol type="i" start="4"> استفاده می کنیم.

نمونه ده

<!DOCTYPE html>

<html>

<head>

<title>HTML Ordered List</title>

</head>

<body>

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ol>

</body>

</html>

ست های تعریف HTML

HTML و XHTML لیست هایی به نام لیست های تعریف را پشتیبانی می کنند که در این لیست ها ورودی ها مانند ترتیب لغات در دیکشنری قرار می گیرند. این لیست یک روش ایده آل برای ارائه یک فهرست از معانی یا لیستی از اصطلاحات یا لیستی از نام ها و مقادیر می باشد.
لیست تعریف از سه برچسب زیر استفاده می کند

< dl> - شروع لیست را تعریف می کند.

مثال:

نمونه یازده

<!DOCTYPE html>

<html>

<head>

<title>HTML Definition List</title>

</head>

<body>

<dl>

<dd>This stands for Hyper Text Markup Language</dd>

<dd>This stands for Hyper Text Transfer Protocol</dd>

</dl>

</body>

</html>

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

آموزش جامع طراحی سایت آموزش صفر تا صد طراحی وب آموزش برنامه نویسی آموزش طراحی وب

افشین چهارشنبه 29 اردیبهشت 1400 ساعت 13:36

0 نظر

پیوندها

دسته‌ها