آموزش لینک های متنی
آموزش طراحی سایت - آموزش لینک های متنی
لینک های متن HTML
یک صفحه ی وب می تواند لینک های متنوعی داشته باشد که شما را مستقیما به صفحات دیگر یا حتی بخش هایی خاص از یک صفحه ی ارائه شده می برد. این لینک ها هایپرلینک نامیده می شوند.
هایپرلینک ها به بازدیدکنندگان اجازه می دهند تا با کلیک کردن روی لغات، اصطلاحات و تصاویر بین صفحات وب مسیریابی کنند. شما می توانید هایپرلینک ها را روی صفحه ی وب با استفاده از متن یا تصاویر موجود ایجاد کنید.
لینک کردن داکیومنت ها
یک لینک با استفاده از برچسب < a> در HTML تعیین می شود. این برچسب anchor tag نامیده می شود و هر چیزی بین برچسب آغازین < a> و پایانی < /a> بخشی از لینک می شود و یک یوزر می تواند آن بخش را کلیک کرده تا به داکیومنت لینک شده برسد. در زیر ترکیب ساده ی استفاده از برچسب < a> را می بینید.
<a href="Document URL" ...="" attributes-list="">Link Text</aمثال:
اجازه دهید مثال زیر را امتحان کنیم که http://www.tahlildadeh.com را در صفحه ی شما لینک می کند.
نمونه یک
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href="http://www.tahlildadeh.com" target="_self">Tahlildadeh</a>
</body>
</html>
این مثال نتیجه ی زیر را تولید خواهد کرد که شما می توانید روی لینک تولید شده ی tahlildadeh کلیک کنید تا به صفحه ی اصلی tahlildadeh برسید.
Click following link
tahlildadeh
ویژگی target
ما از ویژگی target در مثال قبلی خود استفاده کردیم . این ویژگی برای مشخص کردن موقعیتی که داکیومنت لینک شده باز می شود، مورد استفاده قرار می گیرد. در زیر گزینه های ممکن را مشاهده می کنید.
مثال:
برای درک تفاوت اصلی در برخی گزینه های ارائه شده در ویژگی target مثال زیر را امتحان کنید.
نمونه دو
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href="http://www.tahlildadeh.com/">
</head>
<body>
<p>Click any of the following links</p>
<a href="http://www.tahlildadeh.com" target="_blank">Opens in New</a> |
<a href="http://www.tahlildadeh.com" target="_self">Opens in Self</a> |
<a href="http://www.tahlildadeh.com" target="_parent">Opens in Parent</a> |
<a href="http://www.tahlildadeh.com" target="_top">Opens in Body</a>
</body>
</html>
Click any of the following linksOpens in New | Opens in Self | Opens in Parent | Opens in Bodyاستفاده از مسیر پایه
وقتی که شما داکیومنت های HTML را متناسب با همان وب سایت لینک می کنید، ارائه ی یک URL کامل برای هر لینک ضروری نیست. اگر از برچسب در تیتر داکیومنت HTML خود استفاده می کنید، می توانید از دست آن خلاص شوید. این برچسب برای ارائه ی یک مسیر پایه برای همه ی لینک ها استفاده می شود. بنابراین مرورگر شما مسیر ارائه شده ی مرتبط را به مسیر پایه پیوند خواهد داد و یک URL کامل ایجاد خواهد کرد.
مثال:
مثال زیر از برچسب < base> برای مشخص کردن URL پایه استفاده می کند و پس از آن ما می توانیم به جای ارائه ی URL کامل برای هر لینک از مسیرهای مرتبط استفاده کنیم.
آموزش طراحی سایت
نمونه سه
<html>
<head>
<title>Hyperlink Example</title>
<base href="http://www.tahlildadeh.com/">
</head>
<body>
<p>Click following link</p>
<a href="/WebsiteNews/TahlildadeNews.aspx" target="_blank">HTML tahlildadeh</a>
</body>
</html>
این مثال نتیجه ی زیر را تولید خواهد کرد که می توانید روی لینک تولید شده ی HTML tahlildadeh کلیک کنید تا به آموزش HTML برسید.
اکنون URL ارائه شده ی < a href="http:/WebsiteNews/TahlildadeNews.aspx> باعنوان < a href=" http //www.tahlildadeh.com/WebsiteNews /TahlildadeNews.aspx"> در نظر گرفته می شود
لینک شدن به بخشی از صفحه
می توانید برای بخش خاصی از صفحه ی وب ارائه شده، با استفاده از ویژگی name یک لینک ایجاد کنید. این امر یک فرایند دو مرحله ای می باشد.
نخست اینکه در مکانی که می خواهید به داخل صفحه ی وب برسید یک لینک ایجاد کنید و آن را با استفاده از برچسب < a...> نام گذاری کنید
<h1>HTML Text Links <a name="top"></a></h1>
مرحله ی دوم ایجاد یک هایپر لینک می باشد برای لینک کردن داکیومنت و قرار دادن در مکانی که می خواهید برسید.
<a href="/html/html_text_links.htm#top">Go to the Top</a>و این مثال لینک زیر را تولید خواهد کرد که می توانید در آن روی لینک تولید شده ی Go to the Top کلیک کنید تا به نقطه ی بالای آموزش HTML Text Link برسید.
نمونه پنج
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href="http://www.tahlildadeh.com/">
</head>
<body alink="#54A250" link="#040404" vlink="#F40633">
<p>Click following link</p>
<a href="http://www.tahlildadeh.com" target="_blank">HTML tahlildadeh</a>
</body>
</html>
تنظیم رنگ
برچسب ها : آموزش طراحی سایت ,فیلم اموزش طراحی سایت, آموزش html css, آموزش جاوا اسکریپت,آموزش طراحی سایت با html,
آموزش List
آموزش طراحی سایت -آموزش 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 خود را مشخص کنید، که به طورپیش فرض یک دیسک می باشد. در زیر گزینه های ممکن را مشاهده می کنید.
<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>
<ul type="square">
<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>
<ul type="disc">
<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>
<ul type="circle">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
لیست های منظم HTML
<ol type="1"> - Default-Case Numerals.<ol type="I"> - Upper-Case Numerals.<ol type="i"> - Lower-Case Numerals.<ol type=برچسب ها : دوره آموزش طراحی سایت,فیلم اموزش طراحی سایت, آموزش html css, آموزش طراحی وب,
آموزش ساخت جدول در html
آموزش طراحی سایت - آموزش ساخت جدول در html
آموزش Table در HTML
جدول های HTML به نویسندگان وب اجازه می دهند تا داده هایی مانند متن، تصاویر، لینک ها، جدول های دیگر و غیره در ردیف ها و ستون ها تنظیم کنید. جدول های HTML با استفاده از برچسب < table> ایجاد می شوند که در آن برچسب < tr> برای ایجاد ردیف ها و برچسب < td> برای ایجاد داده های سلول ها استفاده می شوند.
مثال:
نمونه یک
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Tables</title>
</head>
<body>
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
ویژگی های colspan و rowspan
اگر بخواهید دو یا بیشتر از دو ستون را با هم تلفیق کنید از ویژگی colspan استفاده می کنید. به طور مشابه اگر بخواهید دو یا بیشتر از دو ردیف را در یک ردیف تلفیق کنید از rowspan استفاده کنید.
مثال:نمونه سه
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan="3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
پس زمینه ی جدول
می توانید به دو روش زیر برای جدول خود زمینه ای تنظیم کنید.
- ویژگی Bg color: می توانید رنگ زمینه را برای همه ی جدول و یا تنها برای یک سلول تنظیم کنید.
- ویژگی background: می توانید یک تصویر را برای کل جدول یا تنها یک سلول تنظیم کنید.
همچنین می توانید با استفاده از ویژگی bordercolor رنگ حاشیه را نیز تنظیم کنید.
مثال:نمونه چهار
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border="1" bordercolor="green" bgcolor="yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>
در اینجا مثالی در رابطه با استفاده از ویژگی background می بینید. در این مثال ما از تصویری موجود در image directory استفاده کرده ایم.
نمونه پنج
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border="1" bordercolor="green" background="/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>
آموزش html css
طول و عرض جدول
شما می توانید طول و عرض جدولی را با استفاده از ویژگی های width و height تنظیم کنید. شما می توانید طول و عرض جدول را به پیکسل و یا متناسب با درصد صفحه ی جاری تنظیم کنید.
مثال:
نمونه شش
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border="1" width="400" height="150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
شرح جدول
برچسب caption یک توضیح یا یک تیتر برای جدول می باشد که در بالای جدول نمایش داده می شود. این برچسب در ورژن های جدید HTML/XHTML توصیه می شود.
مثال:نمونه هفت
تیتر، بدنه و پاورقی جدول
جدول ها می توانند به سه بخش تقسیم شوند: تیتر، بدنه و پاورقی جدول. عنوان و فوت(tfoot) در واقع شبیه به تیتر و پاورقی در یک فایل پردازش word می باشند که برای هرصفحه یکی می باشد، در حالیکه بدنه همان نگه دارنده ی محتوای اصلی جدول می باشد.
سه عنصر برای مجزا کردن عنوان، بدنه و فوت در یک جدول عبارتند از
- < thead> - برای ایجاد یک تیتر مجزا
- < tbody>- برای نشان دادن بدنه ی اصلی جدول
- < tfoot> - برای ایجاد یک پاورقی مجزا در یک جدول
یک جدول برای نشان دادن صفحات و گروه های مختلف یک داده، ممکن است دارای عناصر مختلفی باشد، اما ظاهر شدن برچسب های و قبل از زیاد مهم نیست.
مثال:
نمونه هشت
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Table</title>
</head>
<body>
<table border="1" width="100%">
<thead>
<tr>
<td colspan="4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
جدول های تودرتو
آموزش طراحی سایت با html
شما می توانید از یک جدول در داخل جدولی دیگر استفاده کنید. نه تنها جدول ها، بلکه می توانید تمام برچسب ها را در داخل برچسب داده ی استفاده کنید.
مثال:در زیر مثالی را از استفاده ی یک جدول و برچسب های دیگر در داخل یک سلول مشاهده می کنید.
جهت دیدن مثال بالا برروی آموزش طراحی سایت کلیک نمایید
برچسب ها : آموزش طراحی سایت , دوره آموزش طراحی سایت , آموزش برنامه نویسی,
آموزش درج کردن تصویردر HTML
آموزش طراحی سایت -آموزش درج کردن تصویردر HTML
وارد کردن تصاویر در صفحات HTML
در این آموزش چگونگی استفاده از تصاویر در صفحات HTML را فرا می گیریم.زیبا سازی تصاویر و همچنین ترسیم بسیاری از مفاهیم پیچیده به یک روش ساده روی صفحه ی وب شما، بسیار مهم می باشد. این آموزش مراحل ساده ی استفاده از تصاویر در صفحات وب را به شما آموزش خواهد داد.
وارد کردن تصویر
شما می توانید با استفاده از برچسب هر تصویری را وارد صفحه ی وب خود کنید. در زیر ترکیب ساده ی استفاده از این برچسب را می بینید:
</src="Image URL" ... attributes-list>
برچسب یک برچسب خالی می باشد، یعنی تنها می تواند دارای لیستی از ویژگی ها باشد و دارای برچسب closing نمی باشد.
مثال:
برای امتحان کردن مثال، زیر اجازه بدهید فایل html خود یعنی test.htm و فایل تصویر خود یعنی test.png را در یک مسیر قرار دهیم.
نمونه یک
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src="http://tahlildadeh.com/banner/01.jpg" alt="tahlildadeh Image" />
</body>
</html>
شما می توانید از فایل تصویر JPEG، PNG یا GIF متناسب با راحتی خود استفاده کنید، اما مطمئن شوید که در ویژگی src نام فایل تصویر را به درستی وارد کردید. نام تصویر همیشه یک مورد هوشمند می باشد.
ویژگی alt یک ویژگی می باشد که اگر تصویر نمایش داده نشود، یک متن جایگزین را برای آن مشخص می کند.
تنظیم موقعیت تصویر
آموزش html css
معمولا ما تمام تصاویر خود را در یک مسیر مجزا قرار می دهیم. بنابراین اجازه بدهید فایل test.htm مربوط به HTML را در مسیر اصلی نگه داشته و یک مسیر فرعی images داخل مسیر اصلی، جایی که تصویر test.png را نگهداری می کنیم، ایجاد کنیم.
با فرض اینکه موقعیت تصویر ما "image/test.png" می باشد، مثال زیر را امتحان کنید:مثال:
نمونه دو
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src="http://tahlildadeh.com/banner/01.jpg" alt="tahlildadeh Image" />
</body>
</html>
تنظیم طول و عرض تصویر
می توانید طول و عرض تصویر را براساس نیاز خود و با استفاده از ویژگی های width و height تنظیم کنید. شما می توانید طول و عرض تصویر را به پیکسل یا براساس درصد اندازه ی واقعی آن تنظیم کنید.
مثال:نمونه سه
<!DOCTYPE html>
<html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<img src="http://tahlildadeh.com/banner/01.jpg" width="150" height="100" />
</body>
</html>
تنظیم حاشیه ی تصویر
به طور پیش فرض تصویر حاشیه ای در اطراف خود خواهد داشت، شما می توانید ضخامت این حاشیه را با استفاده از ویژگی border و به واحد پیکسل تنظیم کنید. ضخامت 0 یعنی هیچ حاشیه ای در اطراف تصویر وجود ندارد.
مثال:نمونه چهار
<!DOCTYPE html>
<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src="http://tahlildadeh.com/banner/01.jpg" border="3" />
</body>
</html>
تنظیم همترازی تصویر
به طور پیش فرض تصویر در سمت چپ صفحه تنظیم می شود، اما می توانید از ویژگی align برای تنظیم تصویر در سمت راست یا مرکز صفحه استفاده کنید.
مثال:نمونه پنج
<!DOCTYPE html>
<html>
<head>
<title>Set Image Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
<img src="http://tahlildadeh.com/banner/01.jpg" alt="Test Image" border="3" align="right" />
</body>
</html>
کدها در این وبلاگ نمایش داده نمیشود جهت مشاهده برروی آموزش طراحی سایت کلیک نمایید
برچسب ها : آموزش طراحی سایت , دوره آموزش طراحی سایت, آموزش برنامه نویسی, آموزشگاه برنامه نویسی,
توضيحات در HTML
آموزش طراحي سايت -توضيحات در HTML
آموزش استفاده از comment در html
در اين مقاله آموزش Html مي خواهيم به چگونگي استفاده از comment در html بپردازيم:
كامنت قطعه اي از كد مي باشد كه توسط مرورگرها ناديده گرفته مي شود. افزودن كامنت به كد HTML خود، تمرين خوبي است، به ويژه در داكيومنت هاي پيچيده براي نشان دادن بخش هايي از يك داكيومنت به هركسي كه كد را نگاه مي كند. كامنت ها به شما و ديگران كمك مي كنند تا كد خود را متوجه شويد و قابليت خواندن آن را افزايش مي دهد.
كامنت هاي HTML بين برچسب هاي واقع مي شوند. بنابراين هر محتوايي كه بين اين برچسب ها واقع شود، مثل كامنت با آن رفتار خواهد شد و توسط مرورگرها به طور كامل ناديده گرفته خواهد شد.
مثال:
نمونه يك
<!DOCTYPE html>
<html>
<head>
<!-- Document Header Starts -->
<title>This is document title</title>
</head> <!-- Document Header Ends -->
<body>
<p>Document content goes here.....</p>
</body>
</html>
اين مثال نتيجه ي زير را بدون نمايش محتواي ارائه شده به عنوان بخشي از كامنت ها، به دنبال دارد.
Document content goes here.....
كامنت هاي معتبردر مقابل كامنت هاي نامعتبر
كامنت ها تودرتو نمي شوند، يعني اينكه يك كامنت نمي تواند در داخل كامنت ديگري قرار بگيرد. خط تيره ي (dash) دوتايي "--" ممكن نيست در داخل يك كامنت ظاهر شود، به جز در مواردي كه بخشي از برچسب closing باشد. شما بايد مطمئن باشيد كه هيچ فضاي خالي در ابتداي رشته ي كامنت وجود ندارد.
مثال:
در اينجا كامنت ارائه شده يك كامنت معتبر مي باشد و توسط مرورگر پاك مي شود.
نمونه دو
<!DOCTYPE html>
<html>
<head>
<title>Valid Comment Example</title>
</head>
<body>
<!-- This is valid comment -->
<p>Document content goes here.....</p>
</body>
</html>
اما خط زير يك كامنت معتبر نيست و توسط مرورگر نمايش داده خواهد شد. اين به اين خاطر است كه فضايي بين حاشه ي چپ پرانتز و علامت تعجب وجود دارد.
مثال:
نمونه سه
<!DOCTYPE html>
<html>
<head>
<title>Invalid Comment Example</title>
</head>
<body>
< !-- This is not a valid comment -->
<p>Document content goes here.....</p>
</body>
</html>
كامنت هاي چندخطي
تاكنون فقط كامنت هاي تك خطي را مشاهده كرديم، اما HTML كامنت هاي چندخطي را نيز پشتيباني مي كند.
شما مي توانيد كامنت هاي چند خطي داشته باشيد با استفاده از برچسب آغازگر --!> و پايان دهنده ي ،--> كه قبل از اولين خط و در پايان آخرين خط قرار ميگيرد.
مثال:
نمونه چهار
<!DOCTYPE html>
<html>
<head>
<title>Multiline Comments</title>
</head>
<body>
<!--
This is a multiline comment and it can
span through as many as lines you like.
-->
<p>Document content goes here.....</p>
</body>
</html>
كامنت هاي شرطي
كامنت هاي شرطي تنها در اينترنت اكسپلورر روي ويندوز كار مي كنند، اما توسط مرورگرهاي ديگر هم ناديده گرفته مي شوند. اين كامنت ها در Internet Explorer 5 به بالاتر پشتيباني مي شوند و مي توانيد از آنها براي دادن دستورات شرطي به ورژن هاي مختلف IE استفاده كنيد.
مثال:
نمونه پنج
<!DOCTYPE html>
<html>
<head>
<title>Conditional Comments</title>
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
</head>
<body>
<p>Document content goes here.....</p>
</body>
</html>
در جايي كه نياز خواهيد داشت يك صفحه ي طراحي متفاوت بر اساس ورژن هاي مختلف اينترنت اكسپلورر به كار بگيريد، به راه حلي نياز خواهيد داشت. در اين مواقع چنين كامنت هاي شرطي مفيد خواهند بود.
استفاده از برچسب كامنت
مرورگرهاي كمي هستند كه استفاده از برچسب را براي كامنت بخشي از كد HTML استفاده مي كنند.
مثال:
نمونه شش
<!DOCTYPE html>
<html>
<head>
<title>Using Comment Tag</title>
</head>
<body>
<p>This is <comment>not</comment> Internet Explorer.</p>
</body>
</html>
اگر از IE استفاده مي كنيد، نتيجه ي زير حاصل خواهد شد:
This is Internet Explorer.
اما اگر در حال استفاده از IE نمي باشد، نتيجه ي زير حاصل مي شود.
This is Internet Explorer.
كد اسكريپت كامنت
شما جاوا اسكريپت را در يك آموزش مجزا با HTML ياد خواهيد گرفت. در اينجا بايد دقت كنيد كه اگر در حال استفاده از java script يا vb script در كد html خود هستيد، بنابراين توصيه مي شود كه آن كد اسكريپت را در داخل كامنت هاي مناسب HTML قرار دهيد طوري كه مرورگرهاي قديمي بتوانند به درستي كار كنند.
مثال:
نمونه هفت
<!DOCTYPE html>
<html>
<head>
<title>Commenting Script Code</title>
<script>
<!--
document.write("Hello World!")
//-->
</script>
</head>
<body>
<p>Hello , World!</p>
</body>
</html>
كامنت صفحات طراحي
گرچه شما HTML را در يك آموزش مجزا با صفحات طراحي فرا ميگيريد، اما در اينجا بايد دقت داشته باشيد كه اگر از CSS در كد HTML خود استفاده مي كنيد، بنابراين توصيه مي شود كه كد صفحه ي طراحي را در داخل كامنت هاي مناسب HTML قرار دهيد، طوريكه مرورگرهاي قديمي بتوانند كار كنند.
مثال:
نمونه هشت
<!DOCTYPE html>
<html>
<head>
<title>Commenting Style Sheets</title>
<style>
<!--
.example {
border: 1px solid #4a7d49;
}
// -->
</style>
</head>
<body>
<div class="example">Hello , World!</div>
</body>
</html>
ممكن است بنا به دلايلي كدها كامل نمايش داده نشود جهت مشاهده برروي دوره آموزش طراحي سايت كليك نماييد
برچسب ها : دوره آموزش جامع طراحی سایت , طراحی سایت, آموزش برنامه نویسی, آموزش طراحی وب ,
آموزش طراحی سایت - آموزش قالب بندی در HTML
برچسب ها : آموزش طراحی سایت , دوره آموزش طراحی سایت , اموزش برنامه نویسی, آموزش طراحی وب سایت ,
آموزش طراحی سایت - آموزش قالب بندی در HTML
آموزش طراحی سایت - آموزش قالب بندی در HTML
در ادامه مباحث آموزشی HTML قبل، می خواهیم ببینیم چه آیتم هایی در format دادن و قالب بندی صفحات HTML مورد نیاز ما هستند.
اگر با پردازشگر word کار می کنید باید با بولد کردن (bold)، ایتالیک کردن و آندرلاین کردن متن آشنا باشید. این ها فقط سه گزینه از ده گزینه موجود برای چگونگی ظاهر شدن متن در HTML و XHTML می باشند.
بولد کردن متن
هرچیزی که بین عناصر< b>...< /b> قرار می گیرد به صورت بولد ظاهر می شود، مانند مثال زیر:
مثال:
نمونه یک
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>
ایتالیک کردن متن
هر چیزی که بین عناصر< i>...< /i>قرار بگیرد به صورت ایتالیک ظاهر می شود، مانند مثال زیر:
مثال:
نمونه دو
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example </title>
</head>
<body>
<p>The following word uses a <i>italicized</i> typeface.</p>
</body>
</html>
آندرلاین کردن متن
هر چیزی که بین عناصر < u>...< /u> قرار بگیرد به صورت آندرلاین ظاهر می شود، مانند مثال زیر:
نمونه سه
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses a <u>underlined</u> typeface.</p>
</body>
</html>
خط کشیدن روی متن
هر چیزی که بین گزینه های < strike>...< /strike> قرار بگیرد، با یک strikethrough نمایش داده می شود که خط باریکی می باشد که روی متن کشیده می شود، همانطور که در مثال زیر مشاهده می کنید:
نمونه چهار
<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>
فونت monospaced
محتوای عنصر < tt>...< /tt> به فونت monospaced نوشته می شود. اکثر فونت ها با عنوان فونت هایی با عرض متغیر شناخته شده اند، زیرا حروف مختلف دارای عرضهای مختلف هستند ( به عنوان مثال حرف m عریض تر از حرف I می باشد.) به هرحال در فونت monospaced تمام حروف دارای عرض یکسان می باشند.
مثال:
نمونه پنج
<!DOCTYPE html>
<html>
<head>
<title>Monospaced Font Example</title>
</head>
<body>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>
</html>
متن superscript ( چاپ شده در بالا)
محتوای عنصر < sup>...< /sup> در بالا نوشته می شود، فونت استفاده شده برای آن همان فونت کاراکترهای اطراف آن می باشد، اما به اندازه ی نصف یک کاراکتر بالاتر از دیگر کاراکترها نمایش داده می شود.
مثال:
نمونه شش
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
</body>
</html>
متن subscript (چاپ شده در زیر)
محتوای عنصر< sub>...< /sub> در زیر نوشته می شود. اندازه ی فونت استفاده شده برای آن به اندازه ی فونت کاراکترهای اطراف می باشد اما به اندازه ی نصف ارتفاع یک کاراکتر زیر کاراکترهای دیگر نمایش داده می شود. مثال:
نمونه هفت
<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>
</html>
متن مندرج
هرچیزی که بین عنصر ... قرار بگیرد به عنوان متن مندرج نمایش داده می شود.
مثال:
نمونه هشت
متن حذف شده
هر چیزی که بین عنصر < del>...< /del> ظاهر شود با عنوان یک متن حذف شده نمایش داده می شود.
مثال:
نمونه نه
<!DOCTYPE html>
<html>
<head>
<title>Deleted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>
متن بزرگتر
محتوای عنصر < big>...< /big> اندازه فونت را بزرگتر از متن اطراف نشان می دهد. مانند مثال زیر:
مثال:
نمونه ده
<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
<p>The following word uses a <big>big</big> typeface.</p>
</body>
</html>
متن کوچکتر
محتوای عنصر < small>...< /small> متن را یک سایز کوچکتر از متن اطراف آن نشان می دهد، مانند مثال زیر:
مثال:
نمونه یازده
<!DOCTYPE html>
<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>The following word uses a <small>small</small> typeface.</p>
</body>
</html>
گروه بندی محتوا
عناصر< div>و < span> به شما اجازه می دهند تا برای ایجاد بخش ها و یا زیرمجموعه های یک صفحه، عناصر زیادی را با یکدیگر گروه بندی کنید.
برای مثال ممکن است تمایل داشته باشید که تمام پاورقی ها را در یک صفحه در داخل عنصر < div> قرار دهید تا نشان دهید که تمام عناصر موجود در آن عنصر مربوط به پاورقی می باشند. پس از آن ممکن است طرحی را به عنصر< div> ضمیمه کنید، طوریکه با استفاده از مجموعه ای از قوانین طراحی ظاهر شوند.
مثال:
نمونه دوازده
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div id="menu" align="middle">
<a href="/index.htm">HOME</a> |
<a href="/about/contact_us.htm">CONTACT</a> |
<a href="/about/index.htm">ABOUT</a>
</div>
<div id="content" align="left" bgcolor="white">
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>
</html>
از طرف دیگر عنصر < span> فقط می تواند برای گروه بندی داخل خطی عناصر استفاده شود. بنابراین اگر بخشی از جمله یا پاراگراف را دارید که می خواهید با هم در یک گروه قرار دهید، می توانید از عنصر < span> مانند زیر استفاده کنید:
مثال:
نمونه سیزده
<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <span style="color:green">span tag</span> and the <span style="color:red">div tag</span> alongwith CSS</p>
</body>
</html>
نمونه مثال ها در این وبلاگ کامل نمایش داده نمیشود برای مشاهده کدها برروی دوره آموزش طراحی سایت کلیک کنید
برچسب ها : آموزش طراحی سایت , دوره آموزش طراحی سایت , اموزش برنامه نویسی, آموزش طراحی وب سایت ,
آموزش طراحی سایت -آموزش Attributeها در HTML
آموزش طراحی سایت -آموزش Attributeها در HTML-آموزش HTML
ویژگی های زبان HTML
- Name ویژگی مورد نظر شما برای تنظیم میباشد، به عنوان مثال عنصر پاراگرافp> > در مثال ارائه شده دارای ویژگی می باشد که نام آن align می باشد و شما می توانید از آن برای تنظیم پاراگراف در صفحه استفاده کنید.
- Value همان است که شما می خواهید مقدار ویژگی تنظیم شود و همیشه در داخل گیومه قرار می دهید. مثال زیر سه مقدار ممکن ازیک ویژگی تراز را نشان می دهد: چپ، مرکز و راست.
ویژگی نام ها و ویژگی مقادیر غیرهوشمند می باشند. به هرحال وب جهانی Consortium (W3C) مقادیر ویژگی ها را در HTML 4 با حروف کوچک پیشنهاد می دهد.
مثال:
نمونه یک
ویژگی های اصلی
چهار ویژگی اصلی که می توانند در اکثر عناصر HTML مورد استفاده قرار بگیرند عبارتند از:
- id
- title
- class
- style
ویژگی id
ویژگی id یک برچسب HTML می تواند برای تشخیص یک عنصر در یک صفحه ی HTML مورد استفاده قرار بگیرد. دو دلیل اصلی برای تمایل شما به استفاده از ویژگی id در یک عنصر وجود دارد:
- اگر یک عنصر یک ویژگی را به عنوان تشخیص دهنده ی منحصر به فرد استفاده می کند شناخت تنها آن عنصر و محتوای مربوط به آن ممکن می باشد.
- اگر دارای دو عنصر هم نام در یک صفحه ی وب می باشید، می توانید از عنصر id برای تشخیص این عناصر هم نام استفاده کنید.
در مورد طراحی صفحه در آموزش های مجزا بحث خواهیم کرد، اکنون اجازه بدهید از ویژگی id برای تشخیص عناصر بین دو پاراگراف استفاده کنیم، مانند مثال زیر:
<p id="html">This para explains what is HTMLp> <p id="css">This para explains what is Cascading Style Sheetp> . به وبسایت آموزش طراحی سایت مراجعه فرمایید HTML یرای دیدن وِِیژگی های عناصر چنانچه سوالی در این زمینه دارید در کامنت مطرح نمایید و یا با شماره تلفن 09373889811در ارتباط باشید
برچسب ها : آموزش HTML, آموزش Attributeها در HTML,طراحی سایت , آموزش برنامه نویسی, دوره طراحی سایت,
آموزش طراحی سایت- عناصر در HTML
آموزش طراحی سایت- عناصر در HTML
یک عنصر HTML توسط یک برچسب شروع کننده تعریف می شود. اگر عنصر دارای محتوای دیگری باشد، با یک برچسب بسته کننده تمام می شود در حالیکه جلوی نام عنصر یک علامت اسلش قرار گرفته است که می توانید در جدول زیر برخی ازاین برچسب ها را مشاهده کنید:
بنابراین در اینجا< p>....< /p> یک عنصر HTML و< h1>...< /h1> عنصر دیگری از HTML می باشد. عناصری از HTML وجود دارند که نیازی به بسته شدن ندارند مانند < img... />, < hr /> و< br /> . این عناصر با عنوان void elements (عناصر خالی) شناخته می شوند.
داکیومنت های HTML دارای درختی از این عناصر می باشند و مشخص می کنند که چگونه داکیومنت ها باید ساخته شوند و چه نوع محتوایی باید در چه بخشی از داکیومنت HTML قرار بگیرد.
برچسب HTML در مقابل عنصر
یک عنصر HTML به وسیله ی یک برچسب شروع کننده تعریف می شود. اگر عنصر دارای محتوای دیگری باشد با یک برچسب بستن تمام می شود.
برای مثال< p> برچسب شروع کننده ی یک پاراگراف می باشد و< /p> برچسب بستن همان پاراگراف می باشد، اما < p>This is paragraph< /p> عنصر یک پاراگراف می باشد.
عناصر تو در توی HTML
نگهداری یک عنصر HTML در داخل عنصر دیگر بسیار متداول می باشد.
نمونه یک
جهت دیدن نمونه یک به سایت ما دوره آموزش طراحی سایت مراجعه فرمایید
برچسب ها : دوره آمورش طراحی سایت, آموزش سایت, وبسایت برنامه نویسی, آموزشگاه برنامه نویسی تحلیل داده ,
آموزش طراحي سايت- آموزش تگ هاي اصلي در Html
آموزش طراحي سايت- آموزش تگ هاي اصلي در Html
در اين سري از مقالات آموزش html مي خواهيم به بيان تگ در html بپردازيم.
برچسب هاي تيتر:
هر داكيومنت با يك تيتر آغاز مي شود. شما مي توانيد از اندازه هاي مختلف براي تيترهاي خود استفاده كنيد. HTML داراي شش سطح مي باشد كه از< h1>, < h2>, < h3>, < h4>, < h5> و < h6> عناصر استفاده مي كند. در هنگام نمايش هر تيتر مرور گر يك خط قبل و يك خط بعد از تيتر اضافه مي كند.
مثال:
نمونه يك
Heading Example
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
برچسب پاراگراف:
برچسب < p> به روش طراحي متن شما در پاراگراف هاي مختلف اشاره دارد. هر پاراگراف متن بايد بين برچسب بازكننده ي < p> وبستن < /p> قرار بگيرد، همانطور كه در مثال زير مشاهده مي كنيد:
نمونه دو
Paragraph Example
Here is a first paragraph of text.
Here is a second paragraph of text.
Here is a third paragraph of text.
برچسب شكست لينك
هرزمان كه شما از < br /> عنصر استفاده كنيد، هر چيزي كه آن را دنبال مي كند از خط بعد شروع خواهد شد. اين برچسب نمونه اي از يك عنصرempty مي باشد، زماني كه لازم نيست برچسبي را باز كنيد يا ببنديد چرا كه چيزي براي رفتن بين آنها وجود ندارد.
در بچسب < br />، يك فضاي خالي بين كااكترهاي br و اسلش جلوي آن وجود دارد. اگر شما اين فضا را حذف كنيد، مرورگرهاي قديمي تر در اجراي خط شكست مشكل خواهند داشت، در حاليكه اگر اسلش را حذف كنيد برچسب < br> باقيمانده در HTML معتبر نمي باشد.مثال:
نمونه سه
Line Break Example
Hello
You delivered your assignment ontime.
Thanks
Mahnaz
مركزگذاري متن
مي توانيد با استفاده از برچسب < center> مي توانيد هر محتوايي را در مركز صفحه يا در مركز هر سلول از يك جدول قرار دهيد.
مثال:
نمونه چهار
Centring Content Example4
This text is not in the center.
This text is in the center.
خطوط افقي
خطوط افقي براي بخش هاي شكست بصري يك داكيومنت استفاده مي شوند. برچسب < hr> خطي از موقعيت كنوني داكيومنت به حاشيه ي سمت راست ايجاد كرده و خط را طبق آن مي شكند.
به عنوان مثال ممكن است تمايل داشته باشيد بين دو پاراگراف خطي قرار دهيد، همانطور كه در مثال زير ارائه شده است:
مثال:
نمونه پنج
Horizontal Line Example5
This is paragraph one and should be on top
This is paragraph two and should be at bottom
و باز برچسب< hr /> مثالي از Empty مي باشد كه نيازي به باز كردن يا بستن برچسب نداريد زيرا چيزي براي رفتن بين آنها وجود ندارد.
در عنصر < hr /> يك فضاي خالي بين كاراكترهاي hr و اسلش مقابل آن وجود دارد. اگر اين فضا را حذف كنيد مرورگرهاي قديمي تر در اجراي خط افقي مشكل خواهند داشت. در حاليكه اگر اسلش مقابل آن را حذف كنيد عنصر باقيمانده < hr> مي باشد كه در HTML فاقد اعتبار مي باشد.
حفظ طراحي
گاهي اوقات تمايل داريد كه متن فرمت دقيق خود در HTML را دنبال كند، در اين موارد مي توانيد از برچسب پريفرمت < pre> استفاده كنيد.
هر متن بين برچسب باز كننده ي < pre> و برچسب بستن < /pre> طراحي متن منبع را حفظ خواهد كرد.
مثال:
نمونه شش
Preserve Formatting Example6
function testFunction( strText ){ alert (strText) }
سعي كنيد از همان كد بدون نگهداري آن بين برچسب هاي < pre>...< /pre> استفاده كنيد.
فضاهاي غيرشكست:
فرض كنيد مي خواهيد از عبارت "12 Angry Men." استفاده كنيد. در اينجا از مرورگر نمي خواهيد عبارت را بين دو خط به صورت 12 Angry و Men بشكند.
An example of this technique appears in the movie "12 Angry Men."
در مواردي كه نمي خواهيد مرورگر متن را بشكند بايد به جاي يك فضاي عادي از فضاي غير شكست استفاده كنيد. براي مثال وقتي "12 Angry Men" را در يك پاراگراف كدگذاري مي كنيد بايد از كدي مانند زير استفاده كنيد:
مثال:
نمونه هفت
Nonbreaking Spaces Example7
An example of this technique appears in the movie "12 Angry Men."
برچسب ها : آموزش آنلاین و حضوری طراحی سایت. آموزش طراحی سایت , دوره طراحی سایت HTML,CSS, آموزشگاه تحلیل داده ,