پس از فراگیری مفهوم کلی طراحی سایت و اچ تی ام ال و همچنین پس از آموختن و درک کامل تگ های مقدماتی در html ، نوبت به آموزش تگ های پیشرفته در اچ تی ام ال می رسد.
در این قسمت از آموزش ها در وب سایت شرکت طراحی سایت مبنا ، به ارائه آموزش هایی در زمینه تگ های پیشرفته در html و کاربرد آنها در طراحی سایت پرداخته ایم.
تگ div
در این بخش از آموزش Html ، تگ div را به شما آموزش می دهیم.
این تگ از مهمترین و کاربردی ترین تگ ها در طراحی سایت می باشد.و با بوجود آمدن تگ div از تگ Table در طراحی سایت دیگر کاربردی ندارد زیرا با استفاده از تگ div می توان در بهینه سازی سایت موثر بود.این تگ برای تعیین ساختار اصلی صفحه مورد نظر استفاده می شود.
تگ div را می توان در قسمت های مختلفی از دستورات خود اضافه کرد.شما می توانید ساختاری که در نظر دارید را در تگ div قرار دهید.این تگ در html شامل کاربردهایی می باشد که آن ها را توضیح می دهیم.
√ شما می توانید با استفاده از این تگ یک سند html را تقسیم بندی نمایید.
√ با استفاده از تگ div می توانید به گروهی از تگ ها دستورات خود را اعمال کنید به طور کل با استفاده از این کار دستورات خود را به همه ی تگ ها اعمال می کنید.
تمام عناصری که در برنامه نویسی به منظور طراحی سایت استفاده می شود، دارای هدف هستند. برای مثال در زبان برنامه نویسی Html تگ هایی تعریف شده اند که هر کدام دارای هدف خاصی هستند برای مثال تگ <p> برای تعریف پاراگراف ها، تگ های <h> که از <h1> تا <h6> است و برای تعیین اولویت ها کاربرد دارد. علاوه بر این تگ ها یک تگ نیز با عنوان تگ <div> وجود دارد.
تگ <div> معرف یک دسته بندی یا یک بخش در یک HTML است. این تگ برای گروه بندی عناصر بلوک برای شکل گیری از طریق css در طراحی سایت استفاده می شود. در واقع تگ <div> در در طراحی سایت کاربرد فراوانی دارد. این تگ تا حد زیادی جایگزین تگ <table> در Html 4 است.
در زیر مثالی از نحوه کاربرد تگ های مختلف در داخل تگ <div> در در طراحی سایت برای شما کاربران عزیز ارائه کرده ایم.
<div style="color:#0000FF">
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</div>
مثالی کلی از نحوه نوشتن تگ ها در یک صفحه Html در در طراحی سایت :
<!DOCTYPE html>
<html>
<head>
<title>HTML div Tag</title>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<div id="contentinfo">
<p>Welcome to our website. We provide tutorials on various subjects.</p>
</div>
</body>
</html>
مثال زیر کاربرد تگ div را نشان میدهد.
<div style="color:red"></div>
تگ Table
در این بخش از آموزش Html ، تگ Table را آموزش می دهیم.
در تگ table برای رسم جدول استفاده می شود ولی چون حجم بالایی دارد بیشتر از تگ divاستفاد می شود.
برای رسم جدول تگ Tr استفاده می شود استفاده می شود این تگ برای رسم سطر جدول استفاده می شود همچنین برای رسم سلول از تگ Td استفاده می شود.
توجه داشته باشید که متنی که قرار است در داخل خانه ی جدول قرار گیرد باید داخل تگ td و یا بین تگ tr و تگ table در در طراحی سایت نوشته شود.
در این تگ می توانید تعیین کنید که جدول در کدام قسمت از سایت قرار گیرد.همچنین می توانید رنگ پس زمینه ی جدول،ضخامت پهنای جدول،میزان پهنا و عرض جدول و سایر موارد مربوط به جدول را اضافه کرد.
مثال زیر کاربرد تگ Table در در طراحی سایت را نشان می دهد.
<table width="200" border="1">
<tr>
<td>متن يا گرافيک موردنظر </td>
</tr>
</table>
تگ Button
در این بخش از آموزش Html ، تگ Textarea , تگ Lable و تگ Button را آموزش می دهیم.
از تگ button برای ایجاد دکمه تایید استفاده می شود.با استفاده از این تگ به صفحات وب دکمه تایید اضافه می شود.شما می توانید برای استفاده از دکمه از متن و یا عکس استفاده کنید.این تگ ویژگی رویداد در html را حمایت می کند.
مثال زیر کاربرد تگ button را در طراحی سایت نشان می دهد.
<button type="button">Click Me!</button>
تگ Lable
از تگ Lable برای تعریف تگ ها استفاده می شود.با استفاده از این تگ شما می توانید خصوصیت دلخواه خود را به فرم اضافه کنید به عبارتی وقتی متنی را داخل تگ lable قرار می دهیم تکس باکس که کنترل متناظر محسوب می شود را انتخاب کرده و تغییرات کوچکی را مانند انتخاب دکمه ها را در آن اعمال می کند.به علاوه با استفاده از تگ lable می توانیم از یک کلید میانبر برای مواقعی که می خواهیم از کیبورد استفاده کنیم به کار گیریم.
مثال زیر کاربرد تگ lable در در طراحی سایت را نشان می دهد.
<input> element
<form action="demo_form.asp">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br>
<input type="submit" value="Submit">
</form>
تگ Textarea
از تگ textarea برای ایجاد تعداد نامحدودی کاراکتر در بیش از یک سطر استفاده می شود.با استفاده از این تگ امکان ویرایش راحتتر مطالب را به کاربران می دهد.تگ textarea دارای شناسه می باشد که کاربرد آنها را برای شما توضیح می دهیم.
cols : با استفاده از این شناسه عرض کادر مشخص می شود.مقدار عرض کادر بستگی به تعداد کاراکتر بکار رفته و همچنین فونت می باشد.
rows : این شناسه تعداد سطرهای کادر شما را نشان می دهد که مقدار آن باید همیشه مثبت باشد.
name : این شناسه مخصوص تعیین نام textarea می باشد.
readonle=readonly : این شناسه را کاربر نمی تواند ببیند و به صورت فقط خواندنی نوشته می شود.
disabled=disabled : این شناسه کادر را به صورت غیرمشخص درمی آورد و کاربر نمی تواند متن نوشته شد در کادر را ببیند.
مثال زیر کاربرد تگ textarea را در بخش در طراحی سایت نشان می دهد.
<textarea rows="4" cols="50">
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea>
تگ select
در این بخش از آموزش Html ، تگ Optgroup , تگ Option و تگ Select را به شما آموزش می دهیم.
در این تگ برای اضافه کردن drop-down استفاده می شود.دراین تگ برای ایجاد یک منوی کشویی که دارای چند گزینه می باشد استفاده می باشد.تگoption از زیرمجموعه های تگ select می باشد و با استفاده از آن می توان قابلیت هایی را به وب سایت اضافه کرد.
مثال زیر کاربرد تگ select را نشان می دهد.
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
تگ option
از تگ option برای ایجاد گزینه هایی که در لیست نمایش داده میشود استفاده می کنیم.این تگ داخل تگ های select قرار گرفته است همچنین این تگ را ویژگی های عمومی در html را پشتیبانی می کند.
مثال زیر کاربرد تگ option را در طراحی سایت نشان می دهد.
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
تگ optgroup
از تگ optgroup برای ایجاد تعدادی از option ها در یک drop-down استفاده می شود.در صورتی که گزینه های موجود در لیست شما زیاد باشد می توانید از این تگ استفاده کنید.
مثال زیر کاربرد تگ optgroup را در بخش طراحی سایت نشان می دهد.
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
تگ Form
در این بخش از آموزش Html ، تگ Form و تگ Input را آموزش می دهیم.
تگ form یک فرم ورودی برای کاربر تعیین می کند.تگ form شامل چند تگ input می باشد.شامل:
text fields
radio-buttons
checkboxes
submit buttons
,...
همچنین فرم می تواند شامل عناصری از قبیل select lists,fieldset,legend,lable,textarea,...باشد.
مثال زیر کاربرد تگ form را در بخش طراحی سایت نشان می دهد.
<form>
.
input elements
.
</form>
تگInput
مهمترین تگ موجود در FORM تگ Input می باشد.تگ Input یک فیلد ورودی تعیین می کند.این تگ می تواند قابلیت های متفاوتی داشته باشد. شامل:text field,password,checkbox,radio button,submit button می باشد.
مثال زیر کاربرد تگ input را در طراحی سایت نشان می دهد.
<form action="demo_form.asp">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>
تگ Frame
در این بخش از آموزش Html ، تگ frame ، تگ iframe و تگ frameset را آموزش می دهیم.
با استفاده از فریم ها میتوان صفحات مختلف وب را در یک پنجره مرورگر نشان داد. تگ Frame قابل استفاده در html4 می باشد.به عبارتی از تگ frame هم برای ایجاد یک فریم یا قاب درون یک فریم اصلی که همان framest است استفاده میشود.
مثال زیر کاربرد تگ frame را در طراحی سایت نشان می دهد.
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
تگ Frameset
این تگ مانند تگ Frame از html5 پشتیبانی نمیکند.تگ Frameset در اصل یک قاب را تعریف می کند.به عبارتی frameset تعداد ستون یا ردیف در مجموعه فریم را مشخص می کند با استفاده از این خاصیت مقدار فضای اشغال شده مشخص می شود.
تگ iframe
با استفاده از این تگ فروم های درون خطی میتوان ایجاد کرد.
توجه داشته باشید که نمی توانید به طور همزمان از تگ های <body></body> و <frameset></frameset> با هم استفاده کنید. اگرچه اگر از تگ <noframes> شامل متنی برای نمایش در مرورگرهایی که از فریم ها پشتیبانی نمی کنند، استفاده کنید، مجبورید متن را در تگ های <body></body> قرار دهید. در اولین مثال زیر نحوه این کار را ببینید.
مثال زیر کاربرد تگ iframe را در طراحی سایت در بخش آموزش html نشان می دهد.
<iframe src="http://www.sitedesign-co.com"></iframe>
تگ Object
در این بخش از آموزش Html ، تگ Object و تگ Param را آموزش می دهیم.
از تگ Object برای ارتباط بین شی خارجی مثل فایل صوتی یا تصویری به صفحه html استفاده می شود.این تگ امکان ایجاد تغییر در اطلاعات را به برنامه نویس می دهد همچنین با استفاده از این تگ میتوان فایل درج شده را درج کرد.
این تگ می تواند در تگ Head و یا تگ Body قرار بگیرد.فراموش نشود برای نمایش تصویر از تگ img استفاده شود.
مثال زیر کاربرد تگ Object در برنامه نویسی و طراحی سایت را بیان می کند.
<object width="300" height="300" data="sitedesign-co.com.swf"></object>
تگ Param تعیین کننده تنظیمات نمایش شی در هنگام اجرا می باشد.در HTML این تگ نیاز به تگ پایانی ندارد.
مثال زیر در طراحی سایت بیانگر کاربرد تگ Param می باشد.
<object data="horse.wav">
<param name="autoplay" value="true">
</object>
تگ Table
در این بخش از آموزش Html ، تگ Table , تگ Td و تگ tr را به شما آموزش می دهیم.
از تگ Table برای ایجاد جدول استفاده می شود ولی چون استفاده از جدول در طراحی سایت حجم زیادی لازم دارد بیشتر از تگ div استفاده می کنند.
تگ Td
از تگ Td برای نمایش یک خانه جدول درون یک سطر استفاده می شود.هر خانه از جدول می تواند خصصیات خاص خود را داشته باشد.این تگ باید درون تگ Tr مورد استفاده قرار گیرد.
تگ Tr
از این تگ برای نمایش یک سطر در جدول استفاده می شود.شما می توانید به وسیله تگ Tr داخل هر سطر به مقدار دلخواه ستون ایجاد کنید.
مثال زیر کاربرد تگ table , تگ td و تگ tr را بخش آموزش html نشان می دهد.
< tr >
< td >
سطر 1
< /td >
< /tr >
< tr >
< td >
سطر 2
< /td >
< /tr >
< /table >
خروجی:
سطر 1
سطر 2
تگ Ul
در این بخش از آموزش Html ، تگ Ul و تگ Li را به شما آموزش می دهیم.
از تگ Ul برای نمایش لیست هایی که ترتیب برایمان اهمیتی ندارد استفاده می کنیم.
این تگ شامل خاصیت TYPE می باشد که مواردی را در خود جای داده است.در کل این تگ علامات و نشانه های ما را در قسمت مورد نظر در طراحی سایت نمایش می دهد.
√Disk:این خصیصه باعث نمایش دایره ی توپر کنار آیتم مورد نظر می شود.
√Circle:باعث نمایش یک دایره توخالی کنار آیتم انتخاب شده می شود.
√Square:امکان نمایش مربع تو پر کنار آیتم انتخاب شده می شود.
√None:این خصیصه هیچ علامتی را اضافه نمی کند.
تگ LI
با ادغام تگ های li , ul در طراحی سایت برای نمایش لیست های نامرتب استفاده می کنند.توجه داشته باشید که برای ورود دستورات خود در این لیست ابتدا باید تگ Ul را قرار داد و سپس دستورات را در تگ Li وارد کرد.توجه داشته باشید که این تگ می تواند به صورت یکه هم نوشته شود.
مثال زیر کاربرد تگ li و تگ ul را در طراحی سایت نشان می دهد.
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
نتیجه :
تگ Map
در این بخش از آموزش Html ، تگ Map را به شما آموزش می دهیم.
در تگ Map میتوان یک نقشه تصویری در طراحی سایت ایجاد کرد.با استفاده از این تگ شما می توانید با کلیک بر روی هر قسمت از عکس با صفحه مورد نظر ارتباط برقرار کنید.تگ Area در داخل تگ Map قرار می گیرد.با تعریف برای هر قسمت عکس شما می توانید به اطلاعات مورد نظر خود دست یابید.
برای این کار باید یک نقشه تصویری با نواحی مختلف قابل کلیک کردن ایجاد می کنیم پس از آن نقشه را به یک عکس بر روی صفحه پیوند می دهیم.
تگ Area
تگ Map شامل چند تگ Area می باشد که نقاط قابل کلیک بر روی نقشه را مشخص می کند.
مثال زیر در زمینه طراحی سایت کاربرد تگ Map و تگ Area را در آموزش Html نشان می دهد.
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
تگ Span
در این بخش از آموزش Html ، تگ Span را آموزش می دهیم.
این تگ مانند تگ Lable عمل می کند.تگ span می تواند بخشی از یک نوشته را نشانه گذاری کند.از تگ span برای تقسیم بندی متون موجود استفاده می شود با استفاده از این خاصیت می توان به هر قسمت از متن ویژگی های خاصی را اعمال کرد.
کاربرد تگ Span در طراحی سایت با ذکر یک مثال در زیر بیان شده است.
<html>
<head>
</head>
<body>
<p>this <span style="color:red">is a</span> paragraph.</p>
</body>
</html>
نتیجه :
this is a paragraph.
تگ <q> در HTML
در طراحی سایت با HTML از تگ <q> برای بیان نقل قول کوتاه استفاده می شود.مرورگرها معمولا علامت نقل قول را در اطراف عناصر <q> اضافه می کنند.
<p>sitedesign goal is to: <q>Build a future where people live in harmony with nature.</q></p>
تگ <blockquote> در HTML
این تگ در طراحی سایت با HTML به منظور بیان یک بخش نقل قول شده به کار می رود. مرورگرها معمولا عناصر <blockquote> را به صورت برجسته نشان می دهد.
<p>Here is a quote from Mabna website:</p>
<blockquote cite="https://sitedesign-co.com/aboutus">
For 50 years, Mabna has been protecting the future of nature.
The world's leading conservation organization,
Mabna works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>
تگ <abbr> در HTML
از این تگ در طراحی سایت برای بیان اختصار و مخفف استفاده می شود. علامت گذاری اختصارات می تواند اطلاعات مفیدی را در اختیار مرورگرها، سیستم های ترجمه و موتورهای جستجو قرار دهد.
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
تگ <address> در HTML
از عنصر <address> در طراحی سایت با HTML برای بیان اطلاعات تماس (نویسنده / صاحب سایت) به کار می رود. این عناصر معمولا به صورت ایتالیک نمایش داده می شوند. اکثر مرورگرها یک خط فاصله بین اول و آخر عنصر اضافه می کنند.
<address>
Written by Mabna.<br>
Visit us at:<br>
sitedesign-co.com<br>
Box 564, Disneyland<br>
USA
</address>
عنصر <cite> در HTML
در طراحی سایت از عنصر <cite> برای بیان عنوان یک کار استفاده می شود. این عنصر نیز مانند قبلی معمولا در مرورگرها به صورت ایتالیک نمایش داده می شوند.
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
تگ iframe
از iframe برای نمایش یک صفحه وب در داخل یک صفحه دیگر از وب در طراحی سایت استفاده می شود. نحوه ساختار عنصر iframe در html به شکل زیر است که در آن ویژگی src تعیین کننده URL (آدرس وب) صفحه iframe است:
<iframe src="URL"></iframe>
iframe - تنظیم ارتفاع و عرض
از ویژگی ارتفاع و عرض برای مشخص کردن اندازه استفاده می شود. مقدار این صفت ها به طور پیش فرض بر حسب پیکسل بیان می شود اما می توان آنها را بر حسب درصد (برای مثال 80%) نیز بیان کرد.
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
حذف حاشیه در iframe
به طور پیش فرض iframe دارای حاشیه سیاه رنگ است. به منظور حذف این حاشیه در طراحی سایت ، صفت style را اضافه کنید و از ویژگی border (حاشیه) در CSS استفاده کنید.
<iframe src="demo_iframe.htm" style="border:none"></iframe>
با استفاده از CSS، شما همچنین می توانید اندازه، سبک و رنگ مرز iframe ها را نیز تغییر دهید:
<iframe src="demo_iframe.htm" style="border:5px dotted red"></iframe>
از iframe به عنوان یک مقصد برای لینک استفاده کنید.
در واقع در طراحی سایت می توانید از iframe به عنوان یک هدف برای یک لینک استفاده کنید. صفت target یک لینک، به صفت name در iframe برمی گردد:
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
موجودیت ها در html
منظور از موجودیت ها در html ، آن دسته از کاراکترهایی هستند که بر روی صفحه کلید کامپیوتر شما وجود ندارند و برای استفاده از آنها در طراحی سایت باید تعدادی از کاراکتر ها را با یکدیگر ترکیب کنید. در این قسمت از آموزش html قصد داریم شما را با انواع موجودیت ها در html و چگونگی استفاده از آنها در طراحی سایت ، آشنا کنیم.
موجودیت ها در html می توانند به دو صورت کاراکتر نام و کاراکتر عدد وجود دارند. مزیت استفاده از موجودیت نام در مقابل نهاد عدد در طراحی سایت ، سهولت به خاطر آوردن نام است، و از معایب آن این است که مرورگرها، تمام نام ها را پشتیبانی نمی کنند اما ساپورت عدد در مرورگرها خوب است. توجه داشته باشید که موجودیت نام به کوچک و بزرگی حروف حساس است.
کاراکترهای علامت کوچکتر و بزرگتر
در صورت استفاده از علامت های کوچکتر (>) و بزرگتر (<) در طراحی سایت، مرورگر ممکن است این علامت را با تگ اشتباه بگیرد، در نتیجه در هنگام برنامه نویسی به منظور به کار بردن این علامت ها در طراحی سایت، باید از کاراکتر خاص استفاده کرد. برای نمایش علامت کوچکتر در طراحی سایت باید از کاراکتر ";<" و یا ";<" استفاده کرد و به منظور ارائه علامت بزرگتر می توان موجودیت ";>" و یا ";>" را به کار برد.
ایجاد فضای بدون شکست
یک کاراکتر رایج که در موجودیت ها در html استفادهمی شود، فضای بدون شکست است که با کاراکتر (; ) معین می شود. توجه داشته باشید که مرورگر همیشه فضای صفحات html را کوتاه می کنند. اگر شما 10 فاصله در متن خود اعمال کنید، مرورگر 9 فاصله را حذف می کند. به منظور اضافه کردن فضای واقعی در طراحی سایت از کاراکتر ;  استفاده کنید.
در جدول زیر رایج ترین علائم و کاراکترهای موجودیت در html را که کاربرد زیادی در طراحی سایت دارند را برای شما کاربران عزیز ارائه کرده ایم:
|
ردیف
|
نتیجه در مرورگر
|
موجودیت نام
|
موجودیت عدد
|
توضیحات
|
|
1
|
>
|
;<
|
";<
|
علامت کوچکتر
|
|
2
|
<
|
;>
|
;>
|
علامت بزرگتر
|
|
3
|
|
; 
|
; 
|
ایجاد فضای بدون شکست
|
|
4
|
&
|
;&
|
;&
|
|
|
5
|
¢
|
;¢
|
;¢
|
سنت
|
|
6
|
£
|
;£
|
;£
|
پوند
|
|
7
|
¥
|
;¥
|
;¥
|
ین
|
|
8
|
€
|
;€
|
;&euro
|
یورو
|
|
9
|
©
|
;©
|
;©
|
کپی رایت
|
|
10
|
®
|
;®
|
;®
|
علامت تجاری ثبت شده
|
قالب بندی کد کامپیوتر در HTML
بخش دیگری از آموزش طراحی سایت و آموزش html مربوط به قالب بندی کد کامپیوتر در HTML است. به طور معمول html در طراحی سایت از اندازه حروف و فاصله های متغیری استفاده می کند. عناصر <kbd>و <samp>، و <code> تماما از اندازه حروف و فواصل ثابت پشتیبانی می کنند.
از تگ <kbd> برای تعریف ورودی صفحه کلید استفاده می کنیم. در طراحی سایت از عنصر <samp> در html برای بیان نمونه ای از خروجی برای یک برنامه کامپیوتر به کار می رود. تگ <code> نیز در طراحی سایت با html، بیانگر یک قطعه از کد برنامه نویسی است.
<samp>
demo.example.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
</samp>
<code>
var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;
</code>
توجه داشته باشید که تگ <code> در طراحی سایت، فضای سفید اضافی و شکس های خط را حفظ نمی کند. برای تثبیت اینها شما می توانید در طراحی سایت ، تگ <code> را در داخل یک تگ <pre> قرار دهید.
<pre>
<code>
var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;
</code>
</pre>
عنصر <var> نیز در طراحی سایت معرف متغیرها است. یک متغیر می تواند یک متغیر در عبارت ریاضی باشد و یا یک متغیر در زمینه برنامه نویسی.
Einstein wrote: <var>E</var> = <var>m</var><var>c</var><sup>2</sup>.
تگ noscript
چگونگی ارائه طرح جایگزین تا حد زیادی به چگونگی استقرار جاوا اسکریپت در طراحی سایت بستگی دارد. اما عناصر noscript، دربسیاری از موارد در طراحی سایت مفید و کاربردی است. همانطور که از نام این عنصر مشخص است، ما می توانیم از این عناصر در طراحی سایت با html برای ارائه محتوای جایگزین استفاده کنیم. هر چیزی در میان تگ <noscript> و </noscript> در طراحی سایت، تنها زمانی که جاوا اسکریپت غیر فعال شود، ارائه خواهد شد.
برای مثال ما با طراحی سایت یک صفحه آزمایشی ایجاد کردیم، این صفحه نمایشی، اثر بارگذاری تصویر تار را همانطور که در شکل دیده می شود، تکرار می کند. تصاویر و اثر تار هردو از جاوااسکریپت ارسال می شوند، و اگر ما جاوااسکریپت را غیر فعال کنیم، تصاویر بارگذاری نخواهند شد.
برای نمایش این تصاویر در طراحی سایت ، ما می توانیم آنها را در عناصر noscript قرار دهیم.
<head>
<noscript>
<style>
figure noscript {
top: 0;
left: 0;
position: absolute;
}
</style>
</noscript>
</head>
...
<figure>
<img src="img/img-small-1.jpg"
width="30"
height="20"
class="img-small"
alt=""
data-large="img/img-large-1.jpeg"
data-large-width="1280"
data-large-height="853">
<canvas></canvas>
<figcaption>Lorem ipsum dolor sit amet.</figcaption>
<!-- fallback image -->
<noscript><img src="img/img-large-1.jpeg" height="600" width="900"></noscript>
</figure>
همچنین می توان از عنصر noscript برای اطلاع رسانی به کاربر در مورد خاموش بودن جاوااسکریپت استفاده کرد، مانند آنچه که فیس بوک و Trello انجام داده اند. علاوه بر این می توانیم یک لینک مرجع به منظور کمک به کاربر در جهت روشن کردن جاوااسکریپت اضافه کنیم.
کاربرد تگ کامنت در html
یکی دیگر از تگ های کاربردی در طراحی سایت ، تگ کامنت است که به صورت علامت --!> و <-- در طراحی سایت مورد استفاده قرار می گیرند. با استفاده از تگ کامنت در طراحی سایت شما می توانید، نظرات و توضیحات خود را به سند html اضافه کنید. برای این منظور باید از ترکیب زیر استفاده کنید.
<!-- کامنت خود را اینجا بنویسید -->
نکته: توجه داشته باشید که علامت سوال تنها در تگ ابتدایی وجود دارد و تگ انتهایی فاقد علامت سوال است.
کامنت ها و توضیحات که در طراحی سایت در سند html نوشته شده اند، در مرورگرها نمایش داده نمی شوند. شما می توانید با استفاده از این عنصر، اطلاعات و توضیحات لازم برای استفاده آسان تر از سند طراحی سایت را در html بنویسید. در واقع این راهی برای یادداشت اطلاعیه ها و یادآوری ها در طراحی سایت است. علاوه براین، استفاده از کامنت ها در طراحی سایت ، برای اشکال زدایی از html بسیار مناسب است. شما می توانید عناصری را که در سند html وجود دارند، در صورت نیاز در داخل تگ کامنت قرار دهید. این امر موجب می شود تا آن عنصر در مرورگر نمایش داده نشود.
<!-- درحال حاضر این عنصر در مرورگر نمایش داده نشود
<img border="0" src="pic_mountain.jpg" alt="Mountain">
-->
کاربرد تگ ol در طراحی سایت
در این جلسه ازآموزش html قصد داریم نحوه ایجاد لیست های مرتب شده در طراحی سایت را برای شما کاربران عزیز شرح دهیم. در مقاله " تگ <li> و <ul> " به طور مفصل در مورد نحوه ایجاد و شکل گیری لیست های نامرتب (لیست هایی که در آنها ترتیب اهمیتی ندارد) در طراحی سایت برای شما کاربران عزیز صحبت نمودیم. حال نوبت به لیست های مرتب در طراحی سایت رسیده است. برای یادگیری طراحی سایت با ما همراه باشید.
در طراحی سایت به منظور ایجاد لیست های مرتب، باید در ابتدای لیست از تگ <ol> استفاده کرد. در واقع این تگ در طراحی سایت نقشی مخالف نقش تگ <ul> ایفا می کند. پس از شروع لیست با تگ <ol>، آیتم های داخل لیست هرکدام با تگ <li> آغاز می شوند.
نکته: آیتم های موجود در لیست باید با شماره گذاری مشخص شوند.
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
صفت type در طراحی سایت لیست های مرتب
صفت نوع (type) به منظور تعریف نوع نشانگر، می تواند به لیست های مرتب در طراحی سایت اضافه شود. در زیر مقادیر مختلفی را که به این صفت قابل اطلاق است را برای شما ارائه نموده ایم.
• type (نوع)= "1" : آیتم های لیست با اعداد مشخص می شوند (به صورت پیش فرض).
• type (نوع)= "A" : آیتم ها در طراحی سایت در این نوع با حروف بزرگ نمایش داده می شوند.
• type (نوع)= "a" : آیتم های لیست با حروف کوچک مشخص می شوند.
• type (نوع)= "I" : آیتم ها با حروف بزرگ اعداد رومی نمایش داده می شوند.
• type (نوع)= "i" : در این حالت، آیتم های لیست در طراحی سایت با حروف کوچک اعداد رومی تعیین می شوند.
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
لیست های توصیفی در طراحی سایت
یکی دیگر از انواع لیست هایی که در html و در طراحی سایت ارائه می شوند، لیست های توصیفی هستند. در این مقاله از مجموعه مقالات آموزش سئو و آموزش طراحی سایت قصد داریم، شما را با لیست های توصیفی در طراحی سایت آشنا کنیم.
Html همچنین از لیست های توصیفی (description list) پشتیبانی می کند. یک لیست توصیفی، یک لیست با فهرست است که هر اصطلاح در آن دارای یک توضیح و توصیف است. در طراحی سایت برای برای تعریف این لیست از تگ <dl> استفاده می کنند.
علاوه بر این در طراحی سایت ، برای ایجاد لیست های توصیفی از تگ <dt> معرف اصطلاح (نام) و تگ <dd> به منظور توصیف هر اصطلاح مورد استفاده قرار می گیرد.
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
به طور خلاصه می توان چنین گفت که در طراحی سایت برای ایجاد description list که نوعی لیست با توضیحات و تفاسیر مربوطه است، به طور کلی از سه تگ در html استفاده می کنند که به شرح زیر است:
• تگ <dl> در html: این تگ همانطور که در بالا گفته شد تگ اصلی برای معرفی و شروع ایجاد لیست توصیفی در طراحی سایت است.
• تگ <dt> در html: از این تگ در داخل تگ <dl> به منظور معرفی اصطلاح در طراحی سایت به کار می رود.
• تگ <dd> در html: تگ <dd> در طراحی سایت به منظور ایجاد لیست های توضیحی برای ارائه توضیحات داده ها استفاده می شود.
عنصر <canvas> در طراحی سایت
از عنصر <canvas> در html برای طرح گرافیکی صفحات وب در طراحی سایت استفاده می شود. در این بخش از مقالات شرکت طراحی سایت مبنا قصد داریم اطلاعات جامع و کاملی را در زمینه طراحی سایت و ویژگی <canvas> در html برای شما کاربران عزیز شرح دهیم.
HTML Canvas چیست؟
عنصر <canvas> در اچ تی ام ال برای رسم طرح گرافیکی با استفاده از کد نویسی (معمولا جاوا اسکریپت) مورد استفاده قرار می گیرد. این عنصر تنها به عنوان یک جایگاه برای گرافیک است. در هر صورت شما باید از یک اسکریپت برای رسم گرافیک استفاده نمایید. <canvas> دارای چندین متد برای رسم مسیر ها ، باکس ها ، دوایر ، متون و اضافه کردن تصویر می باشد.
Canvas یک ناحیه مستطیل شکل در یک صفحه HTML در طراحی سایت است. به طور پیش فرض، یک Canvas هیچ مرز و محتوایی ندارد.
نحوه نوشتن این عنصر به شکل زیر خواهد بود:
<canvas id="myCanvas" width="200" height="100"></canvas>
توجه: همیشه یک ویژگی id برای ارجاع به اسکریپت مشخص کنید ، و یک عرض و ارتفاع برای تعریف سایز canvas تعیین نمایید. به مثال زیر توجه کنید:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
متا تگ viewport و استفاده از آن در طراحی سایت ریسپانسیو
متا تگ چیست؟
با یک مثال آن را معرفی میکنیم:
یک سایت مانند همیشه طراحی کنید و سپس با موبایل به آن سایت بروید.
<!doctype html>
<html dir="rtl" lang="fa" >
<head>
<meta charset="UTF-8">
<title>شرکت طراحی سایت مبنا</title>
</head>
<body>
<p> شرکت طراحی سایت مبنا </p>
</body>
</html>
مشاهده خواهید کرد متن در موبایل نا خوانا بوده و برای خواندن آن نیاز دارید که در صفحه زوم کنید. این علت کاملا منطقی است زیرا گوشی موبایل در برخورد با این صفحه متوجه میشود که این سایت برای کامپیوتر رومیزی طراحی شده است و عرض آن را برای مثال 980 px در نظر میگیرد و عرض آن را با دستگاه موبایل منطبق می کند یعنی صفحه را Zoom out میکند.
برای همین است که گوگل به سایت های ریسپانسیو اهمیت میدهد تا کاربران بتوانند به راحتی از صفحات اینترنت و سایت ها استفاده کنند.
حال به قطعه کد بالا متا تگ viewport را اضافه میکنیم و با موبایل دوباره وارد آن صفحه میشویم :
<!doctype html>
<htmldir="rtl" lang="fa" >
<head>
<meta charset="UTF-8">
<title>شرکت طرح و پردازش مبنا</title>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<p>شرکت طرح و پردازش مبنا</p>
</body>
</html>
خوب! همانطور که مشاهده کردید متوجه شدید که سایت دیگر نیازی به زوم کردن ندارد و متن کاملا خوانا است.
در واقع با مقدار دهی device-width به متا تگ viewport به مرورگر دستور داده میشود که عرض گوشی موبایل را با صفحه نمایش تطبیق دهد.
مدیا کوئری و استفاده از آن در طراحی سایت ریسپانسیو
در مقاله پیشین شرکت طراحی سایت مبنا به معرفی و آموزش متا تگ viewport پرداختیم. حال در این مقاله میخواهیم مدیا کوئری را آموزش دهیم تا بتوانید از آن در طراحی سایت به شکل ریسپانسیو استفاده کنید.
مدیا کوئری چیست؟
مدیا کوئری در به طراحان در طراحی سایت این قابلیت را میدهد تا قالب سایت را به نحوی طراحی کنند که مختصات و مشخصات وب سایت مانند عرض، ارتفاع،رنگ و... با دستگاه تغییر و تطبیق کند.
مدیا کوئری ها به دو دسته نوع دستگاه و نوع دیگر مشخصات دستگاه تقسیم بندی می شوند. در این عبارت ها اگر حاصل عبارت صحیح باشد عبارتی که در داخل {} قرار به حالت اجرا در می آید در غیر این صورت از مدیا کوئری چشم پوشی میشود.
مدیا کوئری قادر به شناسایی دستگاه های زیر می باشد:
پرینتر ها (print)
مانیتورهای رومیزی، تبلت و موبایل (screen)
دستگاه هایی که متن صفحه را به گفتار و صدا تبدیل می کنند (speech)
اگر میخواهید بر تمامی این دستگاه ها تغییر اعمال کنید باید از all بجای نوع دستگاه استفاده کنید.
کاربرد مدیا کوئری در طراحی قالب ریسپانسیو
در حقیقت مدیا کوئری است که به ما امکان می دهد طراحی سایت به صورت ریسپانسیو انجام دهیم زیرا بدون مدیا کوئری قادر نخواهیم بود یک قالب واکنشگرا حرفه ای و مناسب طراحی نماییم.